.wrap { max-width: 840px; margin: 48px auto; padding: 0 16px; }
.title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.subtitle { color: #666; margin-bottom: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: flex; align-items: center; gap: 12px; border: 1px solid #eaeaea; border-radius: 14px; padding: 14px; background: #fff; cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-1px); }
.card:disabled { opacity: 0.7; cursor: not-allowed; }
.cardIcon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #f5f7fb; }
.cardBody { text-align: left; flex: 1; }
.cardTitle { font-weight: 600; }
.cardMeta { font-size: 12px; color: #777; margin-top: 4px; }
.cardArrow { opacity: 0.7; }
.center { display: flex; gap: 8px; align-items: center; justify-content: center; height: 50vh; color: #333; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.errorWrap { max-width: 560px; margin: 80px auto; border: 1px solid #ffd7d7; background: #fff5f5; color: #7a1111; padding: 16px; border-radius: 12px; display: flex; gap: 12px; }
.retryBtn { margin-top: 8px; background:#111827; color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }
.empty { display: grid; place-items: center; gap: 8px; height: 40vh; color: #555; }
