/* ============================================================
   Member portal skin — layered on /shared/base.css.
   Overrides only the palette + portal-specific components, so
   both themes stay in sync with the admin console automatically.
   ============================================================ */

/* cyan identity, dark */
body.member, :root[data-theme="dark"] body.member {
  --accent:#0ea5e9; --accent2:#38bdf8;
  --bg:#0a0f16; --bg2:#0f1720; --panel:#131c26; --panel2:#1a242f; --line:#23303d;
  --login-glow:#0c4a6e;
}
/* cyan identity, light */
:root[data-theme="light"] body.member {
  --accent:#0284c7; --accent2:#0369a1;
  --bg:#f2f7fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef4f9; --line:#d8e3ec;
  --login-glow:#cfe9fa;
  --hover:#e4eef7;
}

body.member .chart .col{background:linear-gradient(180deg,var(--accent2),var(--accent))}

/* ---------- portal components ---------- */
.progress-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.progress-row .lbl{width:74px;color:var(--muted);font-size:12px}
.progress-row .bar{flex:1}
.progress-row .val{width:132px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}

.rank-step{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.rank-step:last-child{border-bottom:none}
.rank-step .dot{width:11px;height:11px;border-radius:50%;background:var(--line);flex-shrink:0}
.rank-step.done .dot{background:var(--ok)}
.rank-step.now .dot{background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.rank-step .nm{width:130px;font-weight:600}
.rank-step .reqs{flex:1;display:flex;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}

.tile{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2);margin-bottom:9px}
.tile:hover{border-color:var(--accent)}
.tile .ic{font-size:22px;width:34px;text-align:center}
.tile .bd{flex:1} .tile .bd b{display:block;font-size:13px}
.tile .bd small{color:var(--muted);font-size:12px}

.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.badge-item{text-align:center;padding:15px 9px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);opacity:.4}
.badge-item.earned{opacity:1;border-color:var(--accent)}
.badge-item .ic{font-size:28px}
.badge-item b{display:block;font-size:12px;margin-top:6px}
.badge-item small{color:var(--muted);font-size:11px}