: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; width:100%; padding:.72rem .7rem; border:0; border-radius:8px; color:inherit; background:transparent; font:inherit; text-align:left; 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; }.signout-form { margin:0; }.signout-button { cursor:pointer; }.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; } }
.settings-card { width:min(560px,100%); margin-top:2rem; padding:1.5rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); }.settings-card h2 { margin-bottom:.4rem; }.settings-card .muted { margin-bottom:1.5rem; }.success { padding:.8rem 1rem; color:#166534; background:#f0fdf4; border-radius:8px; }.password-rules { margin:-.45rem 0 .3rem; color:var(--muted); font-size:.78rem; }
.primary-link,.secondary-link,.text-button { display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:.88rem; font-weight:750; text-decoration:none; }.primary-link { padding:.72rem 1rem; color:#fff; background:var(--accent); }.secondary-link { padding:.6rem .85rem; color:var(--accent); border:1px solid #d8ccff; background:#fff; }.text-button { padding:.45rem .2rem; border:0; cursor:pointer; color:#b91c1c; background:transparent; font:inherit; font-weight:750; }.cards-list { display:grid; gap:.85rem; }.card-row { display:grid; grid-template-columns:44px minmax(185px,1fr) 105px 105px auto; gap:1.25rem; align-items:center; padding:1.1rem 1.25rem; border:1px solid var(--line); border-radius:12px; background:#fff; }.card-row.is-archived { opacity:.58; }.card-row-mark { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; color:#5b21b6; background:#ede9fe; font-weight:800; }.card-row-main h2 { margin:0 0 .18rem; font-size:1rem; }.card-row-main p,.card-row-meta span { margin:0; color:var(--muted); font-size:.8rem; }.card-row-meta { display:grid; gap:.15rem; }.card-row-meta strong { font-size:.88rem; }.card-row-actions { display:flex; align-items:center; gap:.85rem; }.card-row-actions form { margin:0; }.empty-panel { display:grid; place-items:start; gap:.8rem; max-width:520px; padding:2rem; border:1px dashed #c4b5fd; border-radius:12px; background:#fff; }.empty-panel span { color:var(--accent); font-size:1.8rem; }.empty-panel h2,.empty-panel p { margin:0; }.empty-panel p { color:var(--muted); }.form-card,.benefits-section { max-width:800px; padding:1.5rem; border:1px solid var(--line); border-radius:12px; background:#fff; }.form-note { margin:0 0 1.4rem; padding:.85rem 1rem; color:#4c1d95; border-radius:8px; background:#f5f3ff; font-size:.85rem; }.card-form,.benefit-form { display:grid; gap:1.1rem; }.card-form label,.benefit-form label { display:grid; gap:.45rem; font-weight:700; font-size:.88rem; }.card-form input,.card-form select,.card-form textarea,.benefit-form input,.benefit-form select { width:100%; padding:.8rem .9rem; border:1px solid #d1d5db; border-radius:9px; color:var(--ink); background:#fff; font:inherit; }.card-form input:focus,.card-form select:focus,.card-form textarea:focus,.benefit-form input:focus,.benefit-form select:focus { outline:3px solid #ddd6fe; border-color:var(--accent); }.card-form textarea { resize:vertical; }.card-form button,.benefit-form button { justify-self:start; padding:.82rem 1rem; border:0; border-radius:9px; cursor:pointer; color:#fff; background:var(--accent); font:inherit; font-weight:800; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.label-optional { color:var(--muted); font-weight:500; }.benefits-section { margin-top:1.25rem; }.benefit-list { display:grid; gap:.7rem; margin-bottom:1.2rem; }.benefit-item { display:flex; align-items:start; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:9px; }.benefit-item p,.benefit-item small { display:block; margin:.2rem 0 0; color:var(--muted); font-size:.82rem; }.benefit-item form { margin:0; }.simple-message { width:min(560px,calc(100% - 2rem)); margin:12vh auto; padding:2rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
@media (max-width:800px) { .card-row { grid-template-columns:42px minmax(0,1fr) auto; gap:.85rem; }.card-row-meta { display:none; }.form-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .topbar .primary-link { padding:.6rem .7rem; }.card-row { grid-template-columns:42px minmax(0,1fr); }.card-row-actions { grid-column:2; }.form-card,.benefits-section { padding:1rem; } }