
:root{
  --bg:#0d1117;--panel:#151b23;--panel2:#1f2937;--text:#f9fafb;--muted:#a3aab8;
  --border:#2d3748;--accent:#8b5cf6;--accent2:#a78bfa;--danger:#ef4444;
  --warning:#f59e0b;--success:#22c55e;--input:#0f172a;--blue:#38bdf8
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(139,92,246,.22),transparent 35%),linear-gradient(135deg,#0d1117,#111827);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}
.shell{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{border-right:1px solid var(--border);background:rgba(13,17,23,.92);backdrop-filter:blur(14px);padding:24px 18px;position:sticky;top:0;height:100vh;overflow:auto}
.content{padding:32px;max-width:1280px;width:100%}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#6d28d9);display:grid;place-items:center;font-weight:900;box-shadow:0 14px 28px rgba(139,92,246,.25)}
.brand-text strong{display:block}.brand-text span{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.nav-title{color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin:18px 10px 8px}
.nav-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:var(--muted);transition:.18s}
.nav-link:hover,.nav-link.active{background:rgba(139,92,246,.14);color:var(--text)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.search{max-width:460px;width:100%;position:relative}
.search input{width:100%;padding:13px 14px 13px 42px;border-radius:14px;border:1px solid var(--border);background:rgba(15,23,42,.8);color:var(--text);font-size:1rem}
.search:before{content:"⌕";position:absolute;left:16px;top:9px;color:var(--muted);font-size:1.4rem}
.user-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:rgba(21,27,35,.88);border-radius:999px;padding:8px 12px;color:var(--muted);white-space:nowrap}
.avatar{width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#6d28d9);display:grid;place-items:center;color:#fff;font-weight:900}
.hero{padding:34px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(21,27,35,.92));box-shadow:0 22px 52px rgba(0,0,0,.28);margin-bottom:24px}
.eyebrow{color:var(--accent2);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.hero h1{margin:0;font-size:clamp(2rem,5vw,3.8rem);letter-spacing:-.06em}
.hero p{max-width:780px;color:var(--muted);line-height:1.55;font-size:1.05rem}
.hero-row{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap}
.date-pill{border:1px solid rgba(167,139,250,.35);background:rgba(15,23,42,.55);border-radius:999px;padding:10px 14px;color:var(--muted);font-weight:800;white-space:nowrap}
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:24px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.metric-card,.dashboard-card,.panel{background:rgba(21,27,35,.92);border:1px solid var(--border);border-radius:22px;padding:20px}
.metric-card{min-height:130px}
.metric-card .metric-icon{font-size:1.5rem;margin-bottom:14px}.metric-card strong{display:block;font-size:2rem;letter-spacing:-.05em}.metric-card span{display:block;color:var(--muted);font-size:.92rem;margin-top:4px}.metric-card small{display:block;margin-top:10px;color:var(--accent2);font-weight:800}
.dashboard-card h2,.panel h2{margin:0 0 16px;font-size:1.25rem}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.quick-action{display:flex;align-items:center;gap:12px;border:1px solid var(--border);background:rgba(15,23,42,.72);border-radius:16px;padding:14px;transition:.18s}
.quick-action:hover{border-color:rgba(167,139,250,.8);transform:translateY(-2px)}
.activity-list{display:grid;gap:11px}
.activity-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:16px;background:rgba(15,23,42,.55);padding:13px}
.activity-dot{width:32px;height:32px;border-radius:999px;background:rgba(139,92,246,.18);display:grid;place-items:center;flex:0 0 auto}
.activity-item p{margin:0;color:var(--text);line-height:1.35}.activity-item span{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}
.roadmap-list{display:grid;gap:10px}.roadmap-list div{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(15,23,42,.5);color:var(--muted)}
.section-header{margin:28px 0 14px}.section-header h2{margin:0;font-size:1.15rem}.section-header p{margin:5px 0 0;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool-card{border:1px solid var(--border);border-radius:22px;padding:20px;background:rgba(21,27,35,.88);min-height:160px;transition:.18s;position:relative;overflow:hidden}
.tool-card:hover{transform:translateY(-3px);border-color:rgba(167,139,250,.8);box-shadow:0 20px 42px rgba(0,0,0,.26)}
.tool-card .icon{font-size:1.8rem;margin-bottom:18px}.tool-card h3{margin:0 0 8px;font-size:1.15rem}.tool-card p{margin:0;color:var(--muted);line-height:1.45}
.status{position:absolute;top:18px;right:18px;font-size:.72rem;font-weight:800;border-radius:999px;padding:6px 9px;background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.28)}
.status.soon{background:rgba(245,158,11,.12);color:#fcd34d;border-color:rgba(245,158,11,.28)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
label{display:block;margin-bottom:7px;font-weight:700}
input[type=text],input[type=date],input[type=number],select,textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);background:var(--input);color:var(--text);font-size:1rem;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.option,.check{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.72);cursor:pointer;font-weight:500}
.option input,.check input{margin-top:2px;accent-color:var(--accent);transform:scale(1.1)}
.muted{color:var(--muted);font-size:.95rem;line-height:1.5}.hidden{display:none}
.alert{border-radius:16px;padding:15px;margin-top:14px;line-height:1.5}.alert.warning{border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.12)}.alert.danger{border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.12)}.alert.success{border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.12)}
.price-pill{display:inline-flex;align-items:center;padding:13px 14px;min-height:48px;border-radius:12px;background:var(--input);border:1px solid var(--border);font-weight:800}
.small-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.small-row>div{flex:1 1 220px}
.golden-rule{border:1px solid rgba(139,92,246,.55);background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(15,23,42,.9))}.golden-rule strong{color:var(--accent2)}
.status-bar{position:sticky;bottom:0;background:rgba(13,17,23,.92);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:15px 32px;margin:28px -32px -32px}.status-inner{max-width:1200px;margin:0 auto;display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap}.progress{color:var(--muted);font-weight:700}
button{border:0;border-radius:14px;padding:13px 18px;font-weight:800;font-size:1rem;cursor:pointer;color:white;background:linear-gradient(135deg,var(--accent),#6d28d9)}button:disabled{opacity:.42;cursor:not-allowed;background:#4b5563}
.mobile-top{display:none}.empty-state{border:1px dashed var(--border);border-radius:20px;padding:22px;color:var(--muted);background:rgba(15,23,42,.35)}
@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{display:none}.mobile-top{display:block;padding:16px;border-bottom:1px solid var(--border);background:rgba(13,17,23,.92)}.content{padding:18px}.topbar{display:none}.hero{padding:24px}.card-grid,.grid-3,.option-grid,.metric-grid,.quick-grid{grid-template-columns:1fr}.status-bar{margin-left:-18px;margin-right:-18px;margin-bottom:-18px;padding:14px 18px}}
