:root{--purple:#6d28d9;--violet:#7c3aed;--pink:#db2777;--ink:#1e1b2e;--muted:#6b7280;--bg:#f6f4fb;--card:#fff;--line:#e5e0f2}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
#topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff}
.brand{font-weight:800;font-size:20px;letter-spacing:.3px}
#whoami{font-size:14px;display:flex;gap:12px;align-items:center}
#whoami button{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.5)}
main{max-width:1080px;margin:0 auto;padding:24px 16px 48px}
footer{max-width:1080px;margin:0 auto;padding:16px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(80,50,160,.06)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.stat{font-size:30px;font-weight:800;color:var(--purple)}
.muted{color:var(--muted)} .small{font-size:13px}
button{background:var(--violet);color:#fff;border:0;border-radius:9px;padding:9px 15px;cursor:pointer;font-size:14px}
button:hover{background:var(--purple)} button.ghost{background:#fff;color:var(--violet);border:1px solid var(--violet)}
button.danger{background:#dc2626} button:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;padding:9px 11px;margin:5px 0 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:#fff}
label{font-size:13px;font-weight:600;color:#443a5e}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--purple);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{background:#ede9fe;color:var(--purple)} .tabs button.on{background:var(--violet);color:#fff}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;background:#ede9fe;color:var(--purple);font-weight:600}
.badge.paid,.badge.approved,.badge.active{background:#dcfce7;color:#166534}
.badge.pending,.badge.draft{background:#fef9c3;color:#854d0e}
.badge.declined,.badge.suspended,.badge.terminated{background:#fee2e2;color:#991b1b}
.err{background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:9px;margin-bottom:12px}
.ok{background:#dcfce7;color:#166534;padding:10px 14px;border-radius:9px;margin-bottom:12px}
.meter{height:10px;background:#ede9fe;border-radius:99px;overflow:hidden}.meter>div{height:100%;background:linear-gradient(90deg,var(--violet),var(--pink))}
.auth{max-width:430px;margin:40px auto}
h1{font-size:26px;margin:4px 0 12px} h2{font-size:19px;margin:0 0 12px;color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}
a{color:var(--violet)}