body { margin:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#020617; color:#e5e7eb; }
.app-frame { min-height:100vh; display:flex; flex-direction:column; }
.navbar { position:sticky; top:0; background:#020617ee; border-bottom:1px solid #1f2937; }
.nav-inner { max-width:1120px; margin:0 auto; padding:0.7rem 1.2rem; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:0.75rem; }
.brand-logo { width:32px; height:32px; border-radius:12px; background:radial-gradient(circle at 20% 0%, #22d3ee, transparent 55%), radial-gradient(circle at 80% 100%, #0ea5e9, transparent 55%); border:1px solid #64748b; box-shadow:0 0 20px rgba(34,211,238,.5); }
.brand-text-main { font-size:0.9rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#22d3ee; }
.brand-text-sub { font-size:0.75rem; color:#9ca3af; }
.nav-links { display:flex; gap:0.75rem; font-size:0.85rem; }
.nav-links a { color:#9ca3af; text-decoration:none; padding:0.35rem 0.8rem; border-radius:999px; border:1px solid transparent; }
.nav-links a:hover { color:#38bdf8; border-color:#38bdf8aa; }
.main { flex:1; max-width:1120px; margin:0 auto; padding:1.6rem 1.2rem 2.5rem; }
.card { background:#020617; border-radius:18px; border:1px solid #1d4ed8aa; box-shadow:0 20px 45px rgba(15,23,42,.9); padding:1.4rem 1.5rem; }
.hero { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2.5fr); gap:1.8rem; }
.chip { display:inline-flex; align-items:center; gap:0.3rem; padding:0.16rem 0.7rem; border-radius:999px; border:1px solid #4b5563; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:#9ca3af; }
.chip-dot { width:6px; height:6px; border-radius:999px; background:#22d3ee; box-shadow:0 0 10px rgba(34,211,238,.9); }
.hero-title { margin:0.8rem 0 0.4rem; font-size:2.1rem; letter-spacing:0.06em; text-transform:uppercase; }
.hero-title span { color:#38bdf8; }
.hero-subtitle { font-size:0.95rem; color:#9ca3af; }
.hero-actions { margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:0.8rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.6rem 1.3rem; border-radius:999px; font-size:0.85rem; border:1px solid transparent; text-decoration:none; cursor:pointer; }
.btn-primary { background:radial-gradient(circle at top left,#38bdf8,#0ea5e9); color:#020617; box-shadow:0 14px 30px rgba(56,189,248,.45); }
.btn-ghost { background:#020617; border-color:#4b5563; color:#e5e7eb; }
.preview-panel { border-radius:18px; border:1px solid #1d4ed8; background:#020617; padding:1rem 1.1rem; font-size:0.8rem; }
.preview-grid { display:grid; grid-template-columns:120px minmax(0,1fr); gap:0.7rem; }
.preview-sidebar { border-radius:14px; border:1px solid #020617; background:#020617; padding:0.5rem 0.45rem; }
.preview-sidebar-item { padding:0.25rem 0.45rem; border-radius:999px; margin-bottom:0.25rem; font-size:0.75rem; color:#9ca3af; }
.preview-sidebar-item.active { background:#020617; color:#38bdf8; border:1px solid #38bdf8aa; }
.preview-main { border-radius:14px; border:1px solid #020617; background:#020617; padding:0.65rem 0.75rem; }
.preview-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.4rem; margin-bottom:0.5rem; }
.preview-metric { border-radius:12px; background:#020617; border:1px solid #1f2937; padding:0.3rem 0.4rem; }
.preview-metric-label { font-size:0.65rem; color:#9ca3af; }
.preview-metric-value { font-size:0.8rem; }
.section { margin-top:2rem; }
.section-header { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1rem; }
.section-title { font-size:0.95rem; letter-spacing:0.18em; text-transform:uppercase; }
.section-sub { font-size:0.8rem; color:#9ca3af; max-width:420px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.feature-card { border-radius:16px; border:1px solid #1d4ed8aa; background:#020617; padding:0.9rem; font-size:0.82rem; }
.feature-label { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:#38bdf8; }
.feature-title { margin:0.3rem 0 0.25rem; font-size:0.95rem; }
.feature-body { color:#9ca3af; }
.dashboard-shell { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1rem; }
.sidebar { border-radius:18px; border:1px solid #1d4ed8aa; background:#020617; padding:1rem 0.8rem; }
.sidebar-title { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:#9ca3af; margin-bottom:0.6rem; }
.sidebar-item { display:block; color:#9ca3af; text-decoration:none; padding:0.35rem 0.55rem; border-radius:999px; font-size:0.85rem; border:1px solid transparent; margin-bottom:0.25rem; }
.sidebar-item:hover { color:#38bdf8; border-color:#38bdf8aa; }
.sidebar-item.active { color:#38bdf8; border-color:#38bdf8dd; background:#020617; }
.dashboard-main { border-radius:18px; border:1px solid #1d4ed8aa; background:#020617; padding:1.2rem 1.1rem; }
.footer { border-top:1px solid #020617; padding:1rem 1.2rem 1.6rem; font-size:0.75rem; color:#9ca3af; text-align:center; }
@media(max-width:900px){{ .hero{{grid-template-columns:minmax(0,1fr);}} .grid-3{{grid-template-columns:minmax(0,1fr);}} .dashboard-shell{{grid-template-columns:minmax(0,1fr);}} }}