/* ===================================================================
   Star Chart — premium OZONE design system
   Light, airy, Apple-clean. Keeps all existing class names working.
   =================================================================== */
:root{
  /* OZONE palette */
  --bg:#eef6fb; --ink:#0f2a36; --txt:#0f2a36; --mut:#5b7a89;
  --line:#dce9f1; --card:#ffffff; --panel:#ffffff; --panel2:#f2f8fc;
  --brand:#0bb4d4; --brand2:#2a9be8; --acc:#0bb4d4; --acc2:#2a9be8;
  --good:#12c2b0; --warn:#f4b13a; --bad:#ff6b8a; --gold:#e8930c;
  --hero:linear-gradient(135deg,#0bb4d4 0,#2a9be8 55%,#4f8cf0 100%);
  --glow:#d7f1fb;
  --shadow:0 12px 34px rgba(12,74,110,.10);
  --r:20px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(1100px 520px at 85% -8%,var(--glow) 0,transparent 55%),var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{display:flex;align-items:center;gap:16px;padding:12px 22px;flex-wrap:wrap;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{font-weight:800;font-size:18px;letter-spacing:-.3px;color:var(--ink)}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.topbar nav a{color:var(--mut);padding:8px 13px;border-radius:10px;font-weight:600;font-size:14px}
.topbar nav a:hover{background:var(--panel2);color:var(--brand);text-decoration:none}
.userbox{display:flex;align-items:center;gap:10px}
.who{font-size:13px;color:var(--mut)}
.who small{display:block;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.4px}
.wrap{max-width:1100px;margin:0 auto;padding:24px 22px}
.foot{text-align:center;color:var(--mut);font-size:12px;padding:26px}
.flash{background:color-mix(in srgb,var(--good) 14%,#fff);border:1px solid color-mix(in srgb,var(--good) 45%,#fff);
  color:#0a7d70;padding:12px 16px;border-radius:14px;margin-bottom:18px;font-weight:600}

/* layout */
h1{font-size:23px;margin:0 0 4px;letter-spacing:-.4px}
h2{font-size:16px;margin:0 0 14px;letter-spacing:-.2px}
.sub{color:var(--mut);font-size:13.5px;margin:0 0 18px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.two{grid-template-columns:1.4fr .9fr}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.end{align-items:flex-end}
.between{justify-content:space-between}
.center{text-align:center}
.divider{height:1px;background:var(--line);margin:16px 0}
.muted{color:var(--mut)}
.tag{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}

/* KPI cards */
.kpi .lbl{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.kpi .val{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi .s{font-size:12px;color:var(--mut);margin-top:4px}

/* progress ring (uses --p inline) */
.ring{--p:0;width:118px;height:118px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--panel2) 0)}
.ring .in{width:88px;height:88px;border-radius:50%;background:var(--card);display:grid;place-items:center;text-align:center;box-shadow:inset 0 0 0 1px var(--line)}
.ring .in b{font-size:24px;display:block;color:var(--ink)}
.ring .in span{font-size:11px;color:var(--mut)}

/* buttons */
.btn{background:var(--brand);color:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:700;
  cursor:pointer;font-size:14px;display:inline-block;transition:.18s;box-shadow:0 6px 16px rgba(11,180,212,.24)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);text-decoration:none}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px;box-shadow:none}
.btn.ghost{background:var(--panel2);color:var(--brand);box-shadow:none;border:1px solid var(--line)}
.btn.gold{background:var(--gold);color:#fff;box-shadow:0 6px 16px rgba(232,147,12,.24)}
.btn.good{background:var(--good);color:#fff;box-shadow:0 6px 16px rgba(18,194,176,.24)}
.btn.danger{background:var(--bad);color:#fff;box-shadow:none}

/* forms */
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:11px;
  padding:10px 12px;font-size:14px;font-family:inherit;width:100%}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,180,212,.15)}
label{font-size:13px;color:var(--mut);display:block;margin-bottom:5px;font-weight:600}
.field{margin-bottom:14px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* pills */
.pill{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block}
.pill.g{background:color-mix(in srgb,var(--good) 16%,#fff);color:#0a8d80}
.pill.y{background:color-mix(in srgb,var(--warn) 20%,#fff);color:#9a6a12}
.pill.r{background:color-mix(in srgb,var(--bad) 16%,#fff);color:#c23c5e}
.pill.b{background:color-mix(in srgb,var(--brand) 15%,#fff);color:#0a7d94}

/* chips (child selector) */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px 6px 7px;font-weight:700;color:var(--ink)}
.chip:hover{text-decoration:none}
.chip .av{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--brand) 13%,#fff);
  display:grid;place-items:center;font-size:16px}
.chip.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,180,212,.16)}

/* tasks */
.task{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:15px;
  background:var(--card);margin-bottom:10px;transition:.18s}
.task:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.task.done{background:color-mix(in srgb,var(--good) 9%,#fff);border-color:color-mix(in srgb,var(--good) 40%,#fff)}
.check{width:34px;height:34px;border-radius:11px;border:2px solid var(--line);background:var(--panel2);
  display:grid;place-items:center;font-size:19px;cursor:pointer;flex:0 0 auto;color:#fff;transition:.2s}
.task.done .check{background:var(--good);border-color:var(--good)}
.task .tname{font-weight:700}
.task .tmeta{font-size:12px;color:var(--mut);margin-top:2px}
.task .money{margin-left:auto;text-align:right;font-weight:800;white-space:nowrap}
.task .money small{display:block;color:var(--mut);font-weight:600}

/* payout hero */
.payout{margin-top:16px;padding:18px;border-radius:16px;color:#fff;background:var(--hero);
  box-shadow:0 12px 30px rgba(20,120,180,.22)}
.payout .muted{color:rgba(255,255,255,.85)}
.payout .big{font-size:30px;font-weight:800;letter-spacing:-.5px}

/* auth screens */
.authwrap{max-width:430px;margin:7vh auto;padding:20px}
.authtop{display:flex;justify-content:flex-end;margin-bottom:10px}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.authcard h1{text-align:center;margin-bottom:6px}
.err{background:color-mix(in srgb,var(--bad) 12%,#fff);border:1px solid color-mix(in srgb,var(--bad) 40%,#fff);
  color:#c23c5e;padding:11px 14px;border-radius:12px;margin-bottom:14px;font-size:14px}
.credbox{background:var(--panel2);border:1px dashed var(--line);border-radius:12px;padding:11px 14px;font-size:13px;margin-top:10px;color:var(--mut)}

/* misc */
.langsel{width:auto;padding:7px 10px;font-size:13px;background:var(--panel2)}
canvas{max-height:240px}

/* RTL niceties */
html[dir="rtl"] .task .money{margin-left:0;margin-right:auto;text-align:left}
html[dir="rtl"] .topbar nav{flex-direction:row-reverse}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}