:root { --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --canvas:#f7f8fb; --accent:#6d28d9; --accent-soft:#f1eafe; --panel:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(1.5rem,3vw,2rem); line-height:1.2; margin-bottom:0; }
h2 { font-size:1.25rem; margin-bottom:0; }
.muted { color:var(--muted); }.eyebrow { margin-bottom:.45rem; color:var(--accent); font-size:.69rem; font-weight:800; letter-spacing:.11em; }.brand { display:flex; align-items:center; gap:.65rem; font-size:1.05rem; font-weight:800; }.brand-mark { display:grid; width:29px; height:29px; place-items:center; color:#fff; border-radius:9px; background:linear-gradient(135deg,#7c3aed,#4f46e5); }
.auth-shell { display:grid; min-height:100vh; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); background:#fff; }.auth-panel { width:min(420px,calc(100% - 3rem)); margin:auto; padding:3rem 0; }.auth-brand { margin-bottom:4rem; }.auth-panel h1 { margin-bottom:.8rem; }.auth-panel .muted { margin-bottom:2rem; }.login-form { display:grid; gap:1.15rem; }.login-form label { display:grid; gap:.45rem; font-weight:700; font-size:.88rem; }.login-form input { width:100%; padding:.82rem .9rem; border:1px solid #d1d5db; border-radius:9px; font:inherit; }.login-form input:focus { outline:3px solid #ddd6fe; border-color:var(--accent); }.login-form button { margin-top:.4rem; padding:.86rem; border:0; border-radius:9px; cursor:pointer; color:#fff; background:var(--accent); font:inherit; font-weight:800; }.alert { padding:.8rem 1rem; color:#991b1b; background:#fef2f2; border-radius:8px; }.login-help { margin-top:1.4rem; color:var(--muted); font-size:.82rem; }.auth-aside { display:grid; place-items:end start; padding:4rem; color:#fff; background:radial-gradient(circle at 20% 15%,#a78bfa 0,transparent 28%),linear-gradient(145deg,#251150,#4f1d83 54%,#20113d); }.auth-aside p { font-size:clamp(2rem,4vw,3.5rem); line-height:1.12; font-weight:300; }.auth-aside strong { font-weight:750; }
.app-shell { min-height:100vh; display:flex; }.sidebar { position:sticky; top:0; display:flex; flex:0 0 244px; flex-direction:column; height:100vh; padding:1.75rem 1rem; color:#d1d5db; background:#121826; }.sidebar .brand { padding:0 .7rem 2.5rem; color:#fff; }.sidebar nav { display:grid; gap:.3rem; }.nav-link { display:flex; align-items:center; justify-content:space-between; padding:.72rem .7rem; border-radius:8px; font-size:.92rem; }.nav-link.active,.nav-link:hover { color:#fff; background:#263149; }.nav-link span { color:#a5b4fc; font-size:.65rem; font-weight:700; }.nav-link[aria-disabled=true] { cursor:not-allowed; opacity:.62; }.sidebar-footer { margin-top:auto; border-top:1px solid #293247; padding-top:1rem; }.content { width:min(1180px,100%); margin:0 auto; padding:2.5rem 3rem 4rem; }.topbar { display:flex; align-items:center; gap:1rem; justify-content:space-between; margin-bottom:2.35rem; }.topbar>div:nth-child(2) { margin-right:auto; }.avatar { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#5b21b6; background:#ede9fe; font-weight:800; }.menu-button { display:none; padding:.45rem; border:0; background:transparent; font-size:1.3rem; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:3rem; }.metrics article { padding:1.25rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); }.metrics p { margin-bottom:.7rem; color:var(--muted); font-size:.84rem; }.metrics strong { display:block; margin-bottom:.4rem; font-size:1.6rem; }.metrics span { color:var(--muted); font-size:.78rem; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:1.15rem; }.section-heading .eyebrow { margin-bottom:.25rem; }.text-link { color:var(--accent); font-weight:750; font-size:.88rem; }.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.credit-card { min-height:184px; display:flex; flex-direction:column; padding:1.25rem; overflow:hidden; border-radius:14px; color:#fff; background:radial-gradient(circle at 85% 10%,#9d72ef 0,transparent 26%),linear-gradient(135deg,#2a1259,#542493); box-shadow:0 10px 18px #24105119; }.credit-card:nth-child(2) { background:radial-gradient(circle at 85% 10%,#60a5fa 0,transparent 28%),linear-gradient(135deg,#102d4e,#225f91); }.credit-card:nth-child(3) { background:radial-gradient(circle at 85% 10%,#fbbf24 0,transparent 28%),linear-gradient(135deg,#3e2e08,#8b6106); }.card-network { align-self:flex-end; text-transform:uppercase; font-size:.65rem; font-weight:900; letter-spacing:.08em; }.card-chip { margin-top:.4rem; color:#f5d26c; font-size:1.7rem; }.card-number { margin:1rem 0 auto; font-family:monospace; letter-spacing:.08em; }.card-details { display:flex; justify-content:space-between; align-items:end; gap:1rem; font-size:.78rem; }.card-details small { display:block; opacity:.7; }.coming-soon { display:flex; gap:1rem; align-items:start; margin-top:3rem; padding:1.25rem; border:1px solid #ddd6fe; border-radius:12px; background:var(--accent-soft); }.coming-soon>span { color:var(--accent); font-size:1.4rem; }.coming-soon h2 { font-size:1rem; margin-bottom:.3rem; }.coming-soon p { margin:0; color:#5b5870; }.empty-state { color:var(--muted); }
@media (max-width:800px) { .auth-shell { grid-template-columns:1fr; }.auth-aside { display:none; }.content { padding:1.5rem; }.sidebar { position:fixed; z-index:10; width:244px; transform:translateX(-100%); transition:transform .2s ease; }.sidebar.is-open { transform:translateX(0); }.menu-button { display:block; }.metrics,.card-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .content { padding:1.25rem 1rem 2rem; }.topbar { align-items:start; }.metrics { margin-bottom:2rem; }.section-heading { align-items:start; gap:1rem; }.auth-panel { width:min(100% - 2rem,420px); }.auth-brand { margin-bottom:2.5rem; } }