* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0b0c10; color: #eaecef; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }

.header { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #ff6a00, #ee0979); box-shadow: 0 6px 24px rgba(238,9,121,0.35); }
.brand-title { font-weight: 800; letter-spacing: 0.5px; font-size: 1.25rem; }

.search { display: flex; gap: 10px; width: 100%; max-width: 560px; }
.search input { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid #222; background: #111419; color: #eaecef; outline: none; }
.search button { padding: 12px 16px; border-radius: 12px; border: none; background: linear-gradient(135deg, #06beb6, #48b1bf); color: #06131a; font-weight: 700; cursor: pointer; box-shadow: 0 8px 26px rgba(72,177,191,0.3); }

.hero { margin-top: 12px; padding: 24px; border-radius: 16px; background: radial-gradient(100% 100% at 0% 0%, rgba(72,177,191,0.15), rgba(255,255,255,0) 60%), #0f1117; border: 1px solid #1b1f2a; }
.hero h1 { margin: 0 0 8px; font-size: 1.8rem; }
.hero p { margin: 0; opacity: 0.9; }

.grid { margin-top: 24px; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { position: relative; background: #0f131a; border: 1px solid #1b2430; border-radius: 16px; padding: 18px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s ease, border-color .15s ease; }
.card:hover { transform: translateY(-2px); border-color: #293446; }
.card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.card p { margin: 0; opacity: 0.85; font-size: 0.95rem; }
.card .cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.badge { position: absolute; top: 12px; right: 12px; font-size: 0.7rem; padding: 4px 8px; border-radius: 999px; background: #18222f; border: 1px solid #2a3a4f; opacity: 0.85; }

.footer { margin: 36px 0 12px; font-size: 0.9rem; opacity: 0.8; text-align: center; }
.footer a { text-decoration: underline; }

.note { margin-top: 10px; font-size: 0.9rem; opacity: 0.8; }

/* Redirect page */
.redirect-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(100% 100% at 0% 0%, rgba(255,106,0,0.15), rgba(255,255,255,0) 60%), #0f1117; }
.redirect-card { width: 100%; max-width: 560px; border: 1px solid #2a3a4f; border-radius: 16px; background: #0b0f15; padding: 24px; text-align: center; }
.redirect-card h2 { margin: 0 0 8px; }
.redirect-card p { margin: 0; opacity: .9; }
.loader { margin: 18px auto 6px; width: 40px; height: 40px; border: 3px solid #223; border-top-color: #48b1bf; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.small { font-size: .88rem; opacity: .8; }