:root{
  --bg:#07070a;--panel:#0e0f14;--text:#eaeaf0;--muted:#a6a6b3;
  --gold:#d6b36a;--gold2:#f2e3b6;--line:rgba(214,179,106,.24);
  --ok:#31d0aa;--danger:#ff4d6d;--radius:16px;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  background:radial-gradient(1200px 600px at 30% 10%, rgba(214,179,106,.18), transparent 55%),
             radial-gradient(900px 500px at 80% 70%, rgba(49,208,170,.08), transparent 60%),var(--bg);
  color:var(--text)}
a{color:var(--gold2);text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:28px 18px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);
  border-radius:999px;background:rgba(14,15,20,.64);backdrop-filter:blur(10px)}
.logo{width:34px;height:34px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--gold),#7b5a2f,var(--gold2),var(--gold));
  box-shadow:0 0 0 4px rgba(214,179,106,.08)}
h1{font-size:40px;margin:18px 0 10px;letter-spacing:.4px}
h2{font-size:22px;margin:18px 0 10px;color:var(--gold2)}
p{color:var(--muted);line-height:1.6}
.card{border:1px solid rgba(255,255,255,.06);background:rgba(14,15,20,.7);
  border-radius:var(--radius);padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.grid{display:grid;gap:14px}@media(min-width:860px){.grid.cols2{grid-template-columns:1.2fr .8fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;
  border:1px solid rgba(214,179,106,.35);
  background:linear-gradient(180deg, rgba(214,179,106,.16), rgba(214,179,106,.06));
  color:var(--gold2);font-weight:700;cursor:pointer;user-select:none}
.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{border-color:rgba(214,179,106,.6);
  background:linear-gradient(180deg, rgba(214,179,106,.32), rgba(214,179,106,.08))}
.btn.ok{border-color:rgba(49,208,170,.55);
  background:linear-gradient(180deg, rgba(49,208,170,.22), rgba(49,208,170,.06));color:#bff7ea}
.btn.danger{border-color:rgba(255,77,109,.55);
  background:linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.06));color:#ffd0d8}
input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);color:var(--text);outline:none}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
.small{font-size:12px;color:rgba(234,234,240,.7)}
.hr{height:1px;background:rgba(255,255,255,.08);margin:14px 0}
.kpi{display:flex;gap:14px;flex-wrap:wrap}
.kpi .box{min-width:160px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.14)}
.kpi .n{font-size:22px;font-weight:800;color:var(--gold2)}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:6px 10px;font-size:12px;background:rgba(0,0,0,.18)}
.fade{opacity:.82}