:root {
  --brand-bg: #0f172a; /* slate-900 */
  --brand-accent: #38bdf8; /* sky-400 */
  --brand-accent-2: #0284c7; /* sky-600 */
  --text: #e5e7eb; /* gray-200 */
  --muted: #94a3b8; /* slate-400 */
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; background: var(--brand-bg); color: var(--text); }
a { color: var(--brand-accent); text-decoration: none; }
a:hover { color: var(--brand-accent-2); }

.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.navbar { backdrop-filter: blur(6px); background: rgba(15,23,42,0.7); border-bottom: 1px solid #1f2937; position: sticky; top:0; z-index:100; }
.navbar-inner { display:flex; align-items:center; gap: 16px; padding: 10px 16px; }
.navbar img.logo { height: 36px; border-radius: 6px; }
.spacer { flex: 1; }
.navlink { padding: 8px 10px; border-radius: 10px; }
.navlink.active, .navlink:hover { background: #111827; }
.dropdown { position: relative; }
.dropdown-menu { display:none; position:absolute; top:100%; left:0; background:#0b1220; border: 1px solid #1f2937; border-radius: 12px; min-width: 220px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dropdown:hover .dropdown-menu { display:block; }
.dropdown-menu a { display:block; padding:8px 10px; border-radius: 8px;}
.dropdown-menu a:hover{ background:#111827; }

.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #111827; border: 1px solid #334155; color: var(--muted); }
.lock { opacity: .6; }
.hero { padding: 28px 16px; border-bottom: 1px solid #1f2937; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card { background: #0b1220; border:1px solid #1f2937; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.card h3 { margin: 8px 0 6px; }
.card p { color: var(--muted); }

.btn { display:inline-block; padding:10px 14px; border-radius: 12px; border:1px solid #1f2937; background:#0b1220; color:var(--text); cursor:pointer; }
.btn.primary { background: linear-gradient(180deg, var(--brand-accent), var(--brand-accent-2)); border: none; color: white; }
.btn.block { display:block; width:100%; text-align:center; }
.btn:disabled { opacity: .5; cursor:not-allowed; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.input { width:100%; padding:10px 12px; border-radius: 10px; background:#0b1220; border:1px solid #334155; color:var(--text); }
label { font-size: 14px; color: var(--muted); }

.notice { padding:10px 12px; border:1px dashed #334155; border-radius: 12px; background:#0a1220; color: var(--muted); }
.hide { display:none !important; }

.footer { padding: 40px 16px; color: var(--muted); text-align:center; border-top: 1px solid #1f2937; margin-top:40px; }
.small { font-size: 12px; color: var(--muted); }