/* ══════════════════════════════════════════════════════════════════
   AGN — AUREXIS Growth Navigator. Indigo + emerald "growth" theme.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --indigo:#4f46e5; --indigo-d:#3730a3; --emerald:#10b981; --emerald-d:#059669;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f1f5f9; --card:#ffffff;
  --amber:#f59e0b; --red:#ef4444; --red-bg:#fee2e2;
  --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px}
.hidden{display:none!important}
h2,h3{margin:0}
button{font-family:inherit}

/* ── Login ── */
.login-screen{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-d) 55%,#0f172a 100%);padding:24px}
.login-card{background:#fff;border-radius:18px;padding:36px 28px;width:100%;max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);text-align:center}
.login-logo{margin-bottom:14px}
.login-title{font-size:19px;font-weight:800;color:var(--indigo-d)}
.login-subtitle{font-size:12px;color:var(--muted);margin:6px 0 26px}
.login-pin-input{width:100%;padding:15px;border:2px solid var(--line);border-radius:12px;font-size:22px;
  text-align:center;letter-spacing:10px;font-weight:700;color:var(--indigo-d);background:#f8fafc;outline:none}
.login-pin-input:focus{border-color:var(--indigo);background:#fff}
#signup-view .login-pin-input{margin-bottom:10px}
.su-field{font-size:16px;text-align:left;letter-spacing:normal;font-weight:600;color:var(--ink)}
.su-field::placeholder{font-weight:500;color:var(--muted)}
.login-alt{margin-top:14px;font-size:13px;color:var(--muted)}
.login-alt a{color:var(--indigo);cursor:pointer;font-weight:700}
.login-btn{width:100%;padding:14px;margin-top:12px;background:var(--indigo);color:#fff;border:none;
  border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;min-height:48px}
.login-btn:active{background:var(--indigo-d)}
.login-btn:disabled{background:#9ca3af}
.login-error{color:#991b1b;font-size:13px;margin-top:12px;display:none;background:var(--red-bg);padding:8px 12px;border-radius:8px}
.login-footer{font-size:11px;color:#9ca3af;margin-top:22px}

/* ── App layout ── */
.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:18px 18px 14px}
.brand-name{font-weight:800;font-size:15px;color:var(--ink)}
.nav-list{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border:none;background:none;
  border-radius:10px;cursor:pointer;color:var(--muted);font-size:14px;font-weight:600;text-align:left;width:100%}
.nav-item:hover{background:#f1f5f9;color:var(--ink)}
.nav-item.active{background:#eef2ff;color:var(--indigo)}
.nav-ico{width:18px;text-align:center;font-size:15px}
.nav-lbl{flex:1}
.nav-badge{background:#ef4444;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.sidebar-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.user-chip{font-size:12px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.user-chip:hover{color:var(--indigo);text-decoration:underline}
.logout-btn{background:#f1f5f9;border:none;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--muted)}
.logout-btn:hover{background:var(--red-bg);color:var(--red)}
.lang-switch{display:flex;gap:5px;padding:8px 12px;border-top:1px solid var(--line)}
.lang-btn{flex:1;padding:5px 0;border:1px solid var(--line);background:#fff;border-radius:8px;
  cursor:pointer;font-size:11px;font-weight:700;color:var(--muted)}
.lang-btn:hover{background:#f1f5f9}
.lang-btn.active{background:var(--indigo);color:#fff;border-color:var(--indigo)}
/* Mobile hamburger top bar + drawer backdrop (shown only ≤900px) */
.mtopbar{display:none}
.nav-toggle{background:#f1f5f9;border:none;width:38px;height:38px;border-radius:9px;font-size:18px;cursor:pointer;color:var(--ink);flex:none}
.nav-toggle:active{background:#e2e8f0}
.mtopbar-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--indigo-d)}
.nav-backdrop{display:none}
.view{padding:24px 28px 80px;max-width:1100px;width:100%;margin:0 auto}

/* ── Page head / buttons ── */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.page-head h2{font-size:22px;font-weight:800}
.page-actions{display:flex;gap:8px}
.btn-primary{background:var(--indigo);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-weight:700;cursor:pointer;font-size:13px}
.btn-primary:active{background:var(--indigo-d)}
.btn-primary:disabled{background:#9ca3af}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);padding:9px 14px;border-radius:10px;font-weight:600;cursor:pointer;font-size:13px}
.btn-ghost:hover{background:#f8fafc}
.btn-danger{background:var(--red);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-weight:700;cursor:pointer}
.btn-sm{padding:6px 12px;font-size:12px}
.section-title{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.count-pill{background:#eef2ff;color:var(--indigo);font-size:11px;padding:1px 8px;border-radius:999px}

/* ── Chips / badges / bars ── */
.chip{background:#f1f5f9;color:var(--ink);font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px}
.chip-prog{background:#eef2ff;color:var(--indigo)}
.chip-red{background:var(--red-bg);color:var(--red)}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge.sm{font-size:10px;padding:2px 7px}
.st-new{background:#f1f5f9;color:#475569}
.st-contacted{background:#e0f2fe;color:#0369a1}
.st-engaged{background:#eef2ff;color:#4f46e5}
.st-followup{background:#fef3c7;color:#b45309}
.st-joined{background:#d1fae5;color:#047857}
.st-lost{background:#fee2e2;color:#b91c1c}
.bar{height:8px;background:#e9eef5;border-radius:999px;overflow:hidden}
.bar-lg{height:12px}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--indigo),var(--emerald));border-radius:999px;transition:width .4s}
.bar-fill.done{background:var(--emerald)}

/* ── Empty states ── */
.empty-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:48px 28px;text-align:center;box-shadow:var(--shadow)}
.empty-ico{font-size:36px;color:var(--indigo);margin-bottom:8px}
.empty-card h3{font-size:18px;margin-bottom:6px}
.empty-card p{color:var(--muted);max-width:380px;margin:0 auto 18px}
.empty-inline{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:18px;color:var(--muted);text-align:center}
.empty-inline.sm{padding:12px;font-size:13px}
.empty-inline.ok{border-color:#a7f3d0;background:#f0fdf4;color:var(--emerald-d)}

/* ── Goal hero ── */
.goal-hero{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.goal-hero-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.goal-rank-row{display:flex;align-items:center;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.rank-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rank-val{font-size:22px;font-weight:800}
.rank-target{color:var(--indigo)}
.rank-arrow{font-size:22px;color:var(--muted)}
.goal-pct{margin-left:auto;text-align:right}
.pct-num{font-size:30px;font-weight:800;color:var(--emerald-d);line-height:1}
.goal-target-date{margin-top:12px;font-size:13px;color:var(--muted)}
.metrics{display:flex;flex-direction:column;gap:14px}
.metric-row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow)}
.metric-top{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}
.metric-top .derived{font-style:normal;font-size:10px;background:#eef2ff;color:var(--indigo);padding:1px 6px;border-radius:6px;font-weight:700}
.metric-nums{color:var(--ink)}
.metric-gap{font-size:12px;color:var(--muted);margin-top:6px}
.banner{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--muted);margin-top:14px}
.banner-green{background:#f0fdf4;border-color:#a7f3d0;color:var(--emerald-d)}
.banner-blue{background:#eef2ff;border-color:#c7d2fe;color:var(--indigo-d)}

/* ── Prospects ── */
.search{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;margin-bottom:12px;outline:none}
.search:focus{border-color:var(--indigo)}
.fpills{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px}
.fpill{flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--muted);padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.fpill em{font-style:normal;opacity:.7}
.fpill.active{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.p-list,.a-list,.ref-list,.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.p-card,.a-card,.ref-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.p-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.p-name{font-weight:800;font-size:15px}
.hot{font-size:13px}
.p-meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.p-sub{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:8px;flex-wrap:wrap}
/* Shared Timeline Card (Time Engine) — date-aware objects */
.tl-card{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:12px}
.tl-cell{background:#fbfcff;padding:6px 7px;text-align:center;min-width:0}
.tl-cell-lbl{font-size:9px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;line-height:1.1}
.tl-cell-val{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.15;overflow-wrap:break-word}
.tl-cell.tl-alert{background:#fef2f2}
.tl-cell.tl-alert .tl-cell-val{color:#dc2626}
.overdue{color:var(--red);font-weight:700}
.p-suggest{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:8px 10px;margin-bottom:10px}
.p-suggest-lbl{font-size:12px;color:#065f46}
.p-suggest .btn-sm{flex:0 0 auto}
/* Prospect command center — focus strip, urgency groups, progressive disclosure */
.p-focus{background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #c7d2fe;border-radius:14px;padding:12px 15px;margin-bottom:14px}
.p-focus.calm{background:#f0fdf4;border-color:#a7f3d0}
.pf-eyebrow{font-size:12px;font-weight:800;color:#6d28d9;letter-spacing:.02em;margin-bottom:6px}
.pf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pf-name{font-weight:800;font-size:16px;color:var(--ink)}
.pf-why{font-size:12.5px;color:var(--muted);margin-top:2px}
.pf-calm{font-size:13px;color:#065f46}
.p-group{margin-bottom:16px}
.p-group-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.pgh-today{color:#b91c1c}
.pgh-upcoming{color:#b45309}
.pgh-healthy{color:#047857}
.p-card.pg-today{border-left:3px solid #ef4444}
.p-card.pg-upcoming{border-left:3px solid var(--amber)}
.p-card.pg-healthy{border-left:3px solid #10b981}
.p-top-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.p-expand{border:1px solid var(--line);background:#fff;border-radius:8px;width:26px;height:26px;cursor:pointer;font-size:12px;color:var(--muted);flex:0 0 auto;line-height:1}
.p-expand.open{background:#eef2ff;color:var(--indigo);border-color:#c7d2fe}
.p-why{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.p-details{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line)}
.p-extra{font-size:12px;color:var(--muted);margin:8px 0}
/* Conversation ladder (team coaching) — done step greyed, active step live */
.tm-convo{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.convo-step{display:flex;align-items:center;gap:8px;font-size:13px;border-radius:10px;padding:8px 10px}
.convo-step .cs-ico{flex:0 0 auto;font-size:12px}
.convo-step.done{background:#f3f4f6;border:1px solid var(--line);color:var(--muted)}
.convo-step.done .cs-date{font-size:11px}
.convo-step.active{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;justify-content:space-between}
.convo-step.active .btn-sm{flex:0 0 auto}
/* ── Team layer ── */
.team-health{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;margin-bottom:16px}
.th-stat{display:flex;flex-direction:column;align-items:center;min-width:60px}
.th-num{font-size:24px;font-weight:800;color:var(--ink);line-height:1}
.th-stat.warn .th-num{color:var(--amber)}
.th-lbl{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.th-action{flex:1;min-width:160px;font-size:13px;color:var(--ink);padding-left:6px;border-left:1px solid var(--line)}
/* Leadership Summary — Structure / Health / Growth / Attention */
/* Leadership Dashboard — 4-leg visual · structure ScoreCard · health · attention */
.lead-dash{margin-bottom:16px}
.ld-health-line{font-size:12.5px;padding:7px 11px;border-radius:9px;margin-top:8px}
.ld-health-line.ok{color:#047857;background:#f0fdf4;border:1px solid #a7f3d0}
.ld-health-line.warn{color:#92400e;background:#fffbeb;border:1px solid #fde68a}
/* 4-leg visual (its own light card above the structure ScoreCard) */
.leg-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.leg-strip-dots{display:flex;gap:8px}
.leg-dot{width:16px;height:16px;border-radius:50%;display:inline-block;flex:0 0 auto}
.ds-empty{background:#e5e7eb}
.ds-needs_anchor{background:var(--amber)}
.ds-attention{background:#ef4444}
.ds-healthy{background:#10b981}
.leg-strip-cap{font-size:13px;font-weight:700;color:var(--ink)}
/* Most important leadership action */
.ld-action{background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #c7d2fe;border-radius:12px;padding:13px 15px;margin-bottom:14px}
.ld-eyebrow{font-size:12px;font-weight:800;color:#6d28d9;letter-spacing:.02em;margin-bottom:5px}
.ld-state{font-size:14px;font-weight:700;color:var(--ink)}
.ld-focus{font-size:13.5px;color:#4338ca;margin:5px 0 10px}
.ld-focus.done{color:#047857;margin-bottom:0}
/* Two distinct measures */
.ld-measures{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ld-measure{flex:1;min-width:150px;border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.ld-m-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ld-m-main{font-size:22px;font-weight:800;color:var(--ink);line-height:1}
.ld-m-main.warn{color:var(--amber)}
.ld-m-main.ok{color:#10b981}
.ld-m-pct{font-size:13px;font-weight:700;color:var(--muted)}
.ld-m-bar{height:7px;background:#f3f4f6;border-radius:999px;overflow:hidden;margin:8px 0 6px}
.ld-m-fill{height:100%;background:#7c3aed;border-radius:999px;transition:width .3s}
.ld-m-sub{font-size:11.5px;color:var(--muted)}
.ls-attention{font-size:12.5px;padding:7px 11px;border-radius:9px}
.ls-attention.warn{color:#92400e;background:#fffbeb;border:1px solid #fde68a}
.ls-attention.ok{color:#047857;background:#f0fdf4;border:1px solid #a7f3d0}
/* Legs — team structure (Anchor → Leg → Leg Health → Org Health) */
.leg-sec{margin-bottom:18px}
.leg-sec.empty .leg-head{border-bottom-style:dashed;opacity:.95}
.leg-sec.is-next .leg-head{border-bottom-color:#34d399}
.leg-tag{font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--muted);background:#f3f4f6;border-radius:999px;padding:2px 9px}
.leg-tag.next{color:#065f46;background:#d1fae5;border:1px solid #a7f3d0}
/* Leg growth unit — the leg summarised via its anchor */
.leg-unit{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px 16px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:11px}
.lu-row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0}
.lu-k{color:var(--muted);font-weight:600}
.lu-v{color:var(--ink);font-weight:700;text-align:right}
/* Leadership-maturity level + explainer (make the % self-explaining) */
.lh-level{font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;vertical-align:middle;margin-left:4px}
.lvl-starting{background:#fef2f2;color:#b91c1c}
.lvl-building{background:#fffbeb;color:#b45309}
.lvl-mature{background:#ecfdf5;color:#047857}
.lh-explain{font-size:12px;color:var(--muted);margin:-2px 0 10px}
/* Leadership-maturity breakdown — strengths vs growth */
.lh-breakdown{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0}
.lh-bd-col{flex:1;min-width:150px}
.lh-bd-h{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px}
.lh-bd-h.ok{color:#047857}
.lh-bd-h.warn{color:#b45309}
.lh-bd-item{font-size:12.5px;color:var(--ink);padding:2px 0}
.lh-bd-item.warn{color:#92400e}
/* Per-leg status chip (colour read) */
.leg-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--muted)}
.leg-status .leg-dot{width:9px;height:9px}
.leg-status.st-healthy{color:#047857}
.leg-status.st-attention{color:#b91c1c}
.leg-status.st-needs_anchor{color:#b45309}
.leg-opp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:12px;padding:13px 15px;background:#fbfdfb}
.leg-opp.next{border:1px solid #a7f3d0;background:linear-gradient(135deg,#f0fdf4,#ecfdf5)}
.leg-opp-ico{font-size:22px;flex:0 0 auto}
.leg-opp-body{flex:1;min-width:140px}
.leg-opp-h{font-size:13.5px;font-weight:700;color:var(--ink)}
.leg-opp-p{font-size:12px;color:var(--muted);margin-top:2px}
.leg-opp .leg-add{flex:0 0 auto}
.leg-sec.unassigned{opacity:.92}
.leg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:7px;border-bottom:2px solid var(--line)}
.leg-title{font-size:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:7px}
.leg-count{font-size:11px;font-weight:700;color:var(--muted);background:#f3f4f6;border-radius:999px;padding:1px 8px}
.leg-health{display:flex;gap:6px;flex:1}
.lh-pill{font-size:11px;font-weight:700;color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:1px 9px}
.lh-pill.warn{color:#92400e;background:#fffbeb;border-color:#fde68a}
.leg-add{flex:0 0 auto}
.leg-empty{font-size:13px;color:var(--muted);padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
.tm-acct{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:4px 9px}
.tm-leg{display:flex;align-items:center;gap:7px;margin:8px 0}
.tm-leg-lbl{font-size:12px;font-weight:700;color:var(--muted)}
.tm-leg-sel{flex:1;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.cred-intro{font-size:13px;color:var(--muted);margin:2px 0 12px}
.cred-box{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.cred-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0}
.cred-row+.cred-row{border-top:1px solid #e9e5fb}
.cred-lbl{font-size:12px;font-weight:700;color:var(--muted)}
.cred-val{font-size:15px;font-weight:700;color:var(--ink)}
.cred-pin{font-size:22px;letter-spacing:3px;color:#6d28d9}
.leg-bar{width:64px;height:7px;background:#f3f4f6;border-radius:999px;overflow:hidden;flex:0 0 auto}
.leg-fill{height:100%;border-radius:999px;transition:width .25s}
.leg-fill.ok{background:#10b981}
.leg-fill.warn{background:var(--amber)}
.leg-next{font-size:12.5px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:6px 10px;margin-bottom:10px}
.tm-card.anchor{border-color:#ddd6fe;box-shadow:0 0 0 1px #ede9fe inset}
.tm-anchor{color:#7c3aed}
.tm-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.tm-card.needs{border-color:#fde68a;background:#fffdf5}
.tm-path{display:inline-block;font-size:11px;font-weight:700;color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:999px;padding:2px 9px;margin-bottom:8px;cursor:pointer}
/* Stockist path checklist (modal) */
.stk-body{padding:4px 2px}
.stk-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.stk-bar{flex:1;height:8px;background:#ede9fe;border-radius:999px;overflow:hidden}
.stk-fill{height:100%;background:#7c3aed;border-radius:999px;transition:width .25s}
.stk-pct{font-size:12px;font-weight:700;color:#6d28d9;flex:0 0 auto}
.stk-steps{display:flex;flex-direction:column;gap:8px}
.stk-step{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.stk-step.done{background:#f5f3ff;border-color:#ddd6fe}
.stk-step input{margin-top:2px}
.stk-step-body{display:flex;flex-direction:column;gap:2px}
.stk-step-title{font-weight:600;font-size:14px;color:var(--ink)}
.stk-step.done .stk-step-title{color:var(--muted);text-decoration:line-through}
.stk-step-detail{font-size:12px;color:var(--muted)}
.stk-actions{margin-top:14px;display:flex;justify-content:flex-end}
.tm-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.tm-name{font-weight:700;color:var(--ink)}
.tm-from{color:var(--muted);font-size:12px}
.tm-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.tm-sub{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.badge.tms-active{background:#dcfce7;color:#166534}
.badge.tms-inactive{background:#fef3c7;color:#92400e}
.badge.tms-left{background:#f1f5f9;color:var(--muted)}
.p-actions{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.p-actions button{flex:1;min-width:62px;border:1px solid var(--line);background:#f8fafc;color:var(--ink);padding:6px 8px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.p-actions button:hover{background:#eef2ff;border-color:#c7d2fe;color:var(--indigo)}
.p-actions .a-del{flex:0 0 auto;min-width:auto}
.p-actions .a-del:hover{background:var(--red-bg);color:var(--red);border-color:#fecaca}
/* "Won deal" — the conversion action; emphasised when the prospect is close */
.p-actions .p-join{background:#ecfdf5;border-color:#a7f3d0;color:var(--emerald-d);font-weight:800}
.p-actions .p-join:hover{background:var(--emerald);border-color:var(--emerald);color:#fff}
.p-actions .p-join.ready{flex-basis:100%;background:var(--emerald);border-color:var(--emerald);color:#fff;padding:9px}
/* Mark Joined promoted to the default card view */
/* Time-bound June promo — urgent, send-anytime */
.p-promo-banner{display:block;background:linear-gradient(135deg,#fb923c,#ef4444);color:#fff;font-weight:800;font-size:13px;padding:10px 14px;border-radius:11px;margin-bottom:14px;text-align:center;box-shadow:0 4px 14px rgba(239,68,68,.3)}
.p-promo{width:100%;margin-bottom:10px;border:none;background:linear-gradient(135deg,#fb923c,#ef4444);color:#fff;font-weight:800;padding:9px;border-radius:9px;font-size:13px;cursor:pointer}
.p-promo:hover{filter:brightness(1.06)}
.p-join-default{width:100%;margin-bottom:10px;border:1px solid #a7f3d0;background:#ecfdf5;color:var(--emerald-d);font-weight:800;padding:8px;border-radius:9px;font-size:13px;cursor:pointer}
.p-join-default:hover{background:var(--emerald);border-color:var(--emerald);color:#fff}
.p-join-default.ready{background:var(--emerald);border-color:var(--emerald);color:#fff}
.p-converted{margin:10px 0 0;padding:9px 13px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;
  color:var(--emerald-d);font-weight:700;font-size:13px;cursor:pointer}
.p-converted:hover{background:#d1fae5}

/* ── Activities ── */
.a-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.a-date{font-size:12px;color:var(--muted);font-weight:600}
.a-outcome{font-weight:700;margin-bottom:8px}
.a-prospects{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.tagp{background:#eef2ff;color:var(--indigo);font-size:11px;padding:2px 8px;border-radius:6px;font-weight:600}
.a-notes{font-size:13px;color:var(--muted);margin-bottom:10px}

/* ── Follow-ups ── */
.fu-list{display:flex;flex-direction:column;gap:9px}
.fu-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow)}
.overdue-card{border-left:3px solid var(--red,#ef4444)}
.soon-card{border-left:3px solid var(--amber)}
.fu-name{font-weight:700;display:flex;align-items:center;gap:7px}
.fu-sub{font-size:12px;color:var(--muted);margin-top:3px}
.fu-overdue{color:var(--red,#ef4444);font-weight:600}
.hist-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hist-row{background:#fff;padding:11px 14px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.hist-notes{font-size:12px;color:var(--muted);margin-top:3px}
.hist-date{font-size:12px;color:var(--muted);white-space:nowrap}
.muted{color:var(--muted)}

/* ── Reflections ── */
.ref-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ref-ctx{font-size:12px;font-weight:700;color:var(--muted)}
.ref-line{display:flex;gap:8px;font-size:13px;margin-bottom:7px;align-items:flex-start}
.ref-tag{flex-shrink:0;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;text-transform:uppercase}
.ref-tag.good{background:#d1fae5;color:#047857}
.ref-tag.bad{background:#fee2e2;color:#b91c1c}
.ref-tag.next{background:#eef2ff;color:#4f46e5}
.a-del.mini{background:none;border:none;cursor:pointer;font-size:13px;opacity:.5}
.a-del.mini:hover{opacity:1}

/* ── Achievements ── */
.ach-next{background:linear-gradient(135deg,#eef2ff,#f0fdf4);border:1px solid #c7d2fe;border-radius:var(--radius);padding:18px 20px;margin-bottom:8px}
.ach-next.met{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ach-next-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--muted)}
.ach-next-rank{font-size:18px;font-weight:800;margin:3px 0}
.ach-next-gap{font-size:13px;color:var(--indigo-d);margin-bottom:10px}
/* Active navigation card (Achievements as a GPS, not a report) */
.anav{background:linear-gradient(135deg,#eef2ff,#f0fdf4);border:1px solid #c7d2fe;border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.anav-dest-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.anav-dest{font-size:23px;font-weight:900;color:var(--ink);margin-top:4px}
.anav-identity{font-size:13px;font-weight:800;font-style:italic;color:var(--indigo-d);margin-top:2px}
.anav-pct{font-size:13px;font-weight:700;color:var(--indigo-d);margin:3px 0 8px}
.anav .bar{margin-bottom:4px}
.anav-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:17px 0 7px}
.anav-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.anav-reqs li{font-size:14px;color:#334155;line-height:1.45;display:flex;gap:9px;align-items:flex-start}
.anav-reqs .rq-box{color:var(--indigo);font-weight:900;flex:none}
.anav-reqs .rq-body{flex:1}
.opens-tag{font-size:11.5px;font-weight:700;color:var(--emerald-d);margin-top:4px;line-height:1.35}
/* "Perjalanan Anda" — milestone time-series (how far have I come) */
.aj-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.aj-cell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.aj-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.aj-val{font-size:17px;font-weight:800;color:var(--ink);margin-top:3px}
.aj-ago{display:block;font-size:12px;font-weight:700;color:var(--indigo);margin-top:1px}
.aj-pending{font-size:12.5px;font-weight:600;color:var(--muted);font-style:italic}
@media(max-width:560px){.aj-grid{grid-template-columns:1fr 1fr}}
.anav-focus{font-size:15.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid #d1fae5;border-radius:10px;padding:12px 14px;display:flex;gap:9px;align-items:flex-start}
.anav-fico{flex:none}
.anav-why{font-size:13.5px;color:#475569;line-height:1.55}
.anav-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ach-hist-list{display:flex;flex-direction:column;gap:8px}
.ach-hist{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.ach-hist .ah-tick{width:24px;height:24px;border-radius:50%;background:var(--emerald);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex:none}
.ach-hist .ah-body{flex:1;min-width:0}
.ach-hist .ah-name{font-weight:800;font-size:14.5px;color:var(--ink)}
.ach-hist .ah-meta{font-size:12px;color:var(--muted);margin-top:1px}
.ach-hist .ah-identity{font-size:12.5px;font-weight:800;font-style:italic;color:var(--emerald-d);margin-top:2px}
.ach-hist .ah-date{font-weight:700;font-size:13px;color:var(--ink);margin-top:2px}
.ach-hist .ah-from{font-size:12px;color:var(--muted);margin-top:1px}
.ach-hist .ah-reward{font-size:12px;color:var(--emerald-d);font-weight:600;margin-top:2px}
.ach-hist .ah-ref{font-size:12.5px;white-space:nowrap;font-weight:700;margin-top:2px}
/* Timeline connector between dated nodes */
.ach-timeline{position:relative}
.ach-timeline .ach-hist{position:relative}
.ach-timeline .ach-hist:not(:last-child)::after{content:'';position:absolute;left:25px;top:100%;height:8px;width:2px;background:var(--line)}
.ach-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--shadow)}
.ach-star{color:var(--amber);font-size:20px}
.ach-body{flex:1}
.ach-mile{font-weight:800}
.ach-meta{font-size:12px;color:var(--muted);margin-top:2px}
.ach-notes{font-size:13px;color:var(--muted);margin-top:6px}

/* ── Intelligence ── */
.intel-sub{color:var(--muted);margin:0 0 16px}
.intel-table{display:flex;flex-direction:column;gap:7px}
.intel-row{display:grid;grid-template-columns:140px 1fr 90px;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 13px}
.intel-key{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intel-bar{height:8px;background:#e9eef5;border-radius:999px;overflow:hidden}
.intel-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--emerald));border-radius:999px}
.intel-val{text-align:right;font-size:13px;font-weight:700;color:var(--muted)}
.intel-note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:13px}

/* ── Dashboard ── */
.dash-top{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.dt-cell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.dt-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--muted)}
.dt-val{font-size:17px;font-weight:800;margin-top:4px}
.dt-target{color:var(--indigo)}
.dt-red .dt-val{color:var(--red)}
.dash-mid{display:grid;grid-template-columns:1fr 1.3fr;gap:14px;margin-bottom:6px}
.dm-progress,.dm-plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.dm-pct{font-size:34px;font-weight:800;color:var(--emerald-d);line-height:1;margin-bottom:12px}
.dm-gaps{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.gap-chip{background:#fef3c7;color:#b45309;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.gap-chip.done{background:#d1fae5;color:#047857}
.dm-plan-head{font-weight:800;font-size:14px;display:flex;align-items:center;gap:9px;margin-bottom:10px}
.prio{font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px}
.prio-high{background:var(--red-bg);color:var(--red)}
.prio-medium{background:#fef3c7;color:#b45309}
.prio-low{background:#d1fae5;color:#047857}
.prio-set,.prio-done{background:#eef2ff;color:var(--indigo)}
.plan-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.plan-list li{font-size:13px;line-height:1.4}
.dash-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.db-col{min-width:0}
.mini-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:6px;cursor:pointer;font-size:13px}
.mini-row:hover{border-color:#c7d2fe;background:#fafbff}
.mini-ref{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:6px;font-size:13px;color:var(--ink);cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Modal / form ── */
.modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(2px)}
.modal-card{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal-card.modal-sm{max-width:380px;padding:22px}
.msg-card{max-width:480px;padding-bottom:18px}
.msg-sub{padding:2px 20px 0;font-size:12px;font-weight:700;color:var(--indigo)}
.msg-text{margin:10px 20px 0;width:calc(100% - 40px);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:14px;line-height:1.5;color:var(--ink);font-family:inherit;resize:vertical;background:#f8fafc}
.msg-warn{margin:8px 20px 0;font-size:12px;color:var(--red);font-weight:600}
.msg-actions{display:flex;gap:8px;padding:12px 20px 0}
.msg-actions .btn-primary{flex:1}
.msg-after{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:14px 20px 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 0}
.modal-head h3{font-size:17px;font-weight:800}
.modal-x{background:#f1f5f9;border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--muted)}
#fm-form{padding:16px 20px 20px}
.fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fm-field{display:flex;flex-direction:column;gap:5px}
.fm-field.fm-full{grid-column:1/-1}
.fm-field span{font-size:12px;font-weight:700;color:var(--muted)}
.fm-field input,.fm-field select,.fm-field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;outline:none;width:100%}
.fm-field input:focus,.fm-field select:focus,.fm-field textarea:focus{border-color:var(--indigo)}
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:160px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:9px}
.ms-box{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink)}
.ms-empty{color:var(--muted);font-size:13px}
.fm-err{color:var(--red);font-size:13px;margin-top:10px;display:none}
.fm-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.confirm-msg{font-size:15px;margin:0 0 18px;line-height:1.4}

/* ── Toast ── */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transform:translateY(10px);transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateY(0)}
.toast-err{background:var(--red)}
.toast-ok{background:var(--emerald-d)}

/* ── Responsive ── */
@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}
  /* Mobile top bar with hamburger */
  .mtopbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;height:52px;padding:0 14px;
    background:#fff;border-bottom:1px solid var(--line);z-index:120}
  /* Sidebar becomes a slide-in drawer holding the FULL nav (all pages) + lang + foot */
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;width:266px;flex-direction:column;
    transform:translateX(-100%);transition:transform .25s ease;z-index:200;box-shadow:2px 0 18px rgba(15,23,42,.2)}
  .sidebar.open{transform:none}
  .nav-backdrop.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:150}
  /* Refresh FAB: small circle, bottom-right — no bottom bar to clash with now */
  .refresh-fab{bottom:calc(18px + env(safe-area-inset-bottom));right:14px;width:42px;height:42px;padding:0;
    border-radius:50%;justify-content:center;gap:0;opacity:.92;box-shadow:0 2px 10px rgba(0,0,0,.22)}
  .refresh-fab .rf-lbl{display:none}
  .refresh-fab .rf-ico{font-size:19px}
  .view{padding:18px 16px 80px}
  .dash-top{grid-template-columns:1fr 1fr}
  .dash-mid,.dash-bottom,.tm-list,.gs-cycle{grid-template-columns:1fr}
  .fm-grid{grid-template-columns:1fr}
  .intel-row{grid-template-columns:100px 1fr 72px;gap:8px}
  .ref-grid{grid-template-columns:1fr}
  .ref-pkg{flex-wrap:wrap;gap:8px}
  .jr-gps{grid-template-columns:1fr}
}

/* ── Journey (My BRAVO Journey — the GPS) ── */
.jr-gps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jr-gps-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.jr-gps-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.jr-gps-val{font-size:18px;font-weight:800;color:var(--ink);margin-top:4px}
.jr-gps-sub{font-size:12px;color:var(--muted);margin-top:2px}
.jr-gps-take{font-size:12px;font-weight:600;color:var(--indigo);margin-top:4px}
.jr-gps-next{background:#eef2ff;border-color:#c7d2fe}
.jr-gps-next .jr-gps-val{color:var(--indigo-d)}
.jr-gps-prog .jr-gps-val{color:var(--emerald-d)}
/* next-step actions */
.jr-actions{background:#fff;border:1px solid var(--line);border-left:3px solid var(--indigo);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:6px}
.jr-actions-head{font-size:13px;color:var(--ink);margin-bottom:8px}
.jr-action-list{margin:0 0 12px;padding-left:20px;color:var(--ink);font-size:13px;line-height:1.7}
.jr-action-list .muted{color:var(--muted);list-style:none;margin-left:-20px}
/* stepper */
.jr-stages{display:flex;flex-direction:column;gap:10px}
.jr-stage{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.jr-stage.active{border-color:#c7d2fe;background:#f8faff}
.jr-stage-head{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:0;margin-bottom:9px;cursor:pointer}
.jr-stage.collapsed .jr-stage-head{margin-bottom:0}
.jr-stage-prog{margin-left:auto;font-size:11px;font-weight:800;color:var(--indigo-d);background:#eef2ff;border-radius:20px;padding:2px 9px;flex:0 0 auto}
.jr-stage-chev{font-size:12px;color:var(--muted);flex:0 0 auto;transition:transform .15s}
.jr-stage:not(.collapsed) .jr-stage-chev{transform:rotate(90deg)}
.jr-stage.collapsed .jr-stage-body{display:none}
.jr-stage-no{width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.jr-stage.active .jr-stage-no{background:var(--indigo-d)}
.jr-stage-name{font-weight:800;font-size:14px}
.jr-stage-ms{display:flex;flex-direction:column;gap:6px}
.jr-ms{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer}
.jr-ms:hover{background:#f1f5f9}
.jr-ms-ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:0 0 auto}
.jr-ms.done .jr-ms-ico{background:#d1fae5;color:var(--emerald-d)}
.jr-ms.next .jr-ms-ico{background:#eef2ff;color:var(--indigo)}
.jr-ms.upcoming .jr-ms-ico{background:#e9eef5;color:var(--muted)}
.jr-ms-body{display:flex;flex-direction:column;gap:1px;flex:1}
.jr-ms-name{font-weight:700;font-size:13.5px}
.jr-ms.done .jr-ms-name{color:var(--muted);text-decoration:line-through}
.jr-ms.next .jr-ms-name{color:var(--indigo-d)}
.jr-ms-take{font-size:11.5px;color:var(--muted)}
/* "Saya boleh…" identity ladder — who you become at each milestone */
.jr-ms-identity{font-size:12px;font-weight:800;color:var(--indigo);font-style:italic}
.jr-ms.done .jr-ms-identity{color:var(--emerald-d)}
.jr-ms.next{border-color:#c7d2fe}

/* ── Training (Leader Development) ── */
.tr-prog{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:14px}
.tr-prog-top{display:flex;justify-content:space-between;font-weight:700;font-size:13px;margin-bottom:8px}
.tr-prog-pct{color:var(--emerald-d)}
.tr-list{display:flex;flex-direction:column;gap:10px}
.tr-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.tr-card.done{border-color:#a7f3d0;background:#f6fefb}
.tr-cardhead{display:flex;align-items:center;gap:11px;cursor:pointer}
.tr-cardhead:hover .tr-title{color:var(--indigo)}
.tr-headmeta{flex:1;display:flex;flex-direction:column;gap:1px}
.tr-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:#eef2ff;color:var(--indigo);flex:0 0 auto}
.tr-card.done .tr-ico{background:#d1fae5;color:var(--emerald-d)}
.tr-title{font-weight:800;font-size:15px}
.tr-mile{font-size:11.5px;color:var(--muted)}
.tr-submeta{font-size:11px;color:var(--muted);margin-top:2px}
.tr-momentum{color:var(--indigo-d);font-weight:700}
.tr-card.inprogress{border-color:#c7d2fe}
.tr-card.inprogress .tr-ico{background:#eef2ff;color:var(--indigo)}
.tr-completebtn{display:block;width:100%;margin-top:10px;font-size:12.5px;font-weight:800;color:#fff;background:#059669;border:none;border-radius:8px;padding:10px;cursor:pointer}
.tr-completebtn:hover{background:var(--emerald-d)}
.tr-chev{color:var(--muted);font-size:12px;transition:transform .2s;flex:0 0 auto}
.tr-card.open .tr-chev{transform:rotate(180deg)}
.tr-cardbody{display:none;margin-top:12px}
.tr-card.open .tr-cardbody{display:block}
/* Academy — navigator UX (one recommended module · collapse · section reveal) */
.tr-celebrate{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #6ee7b7;border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:14px;font-weight:800;color:#047857;text-align:center;animation:trPop .35s ease}
@keyframes trPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.tr-today{background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #c7d2fe;border-radius:14px;padding:15px 17px;margin-bottom:16px}
.tr-today.done{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border-color:#a7f3d0}
.tr-today-eyebrow{font-size:12px;font-weight:800;color:#6d28d9;letter-spacing:.02em;margin-bottom:6px}
.tr-today-mod{font-size:18px;font-weight:800;color:var(--ink);line-height:1.2}
.tr-today-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.tr-today-why{font-size:13px;color:var(--ink);margin:9px 0 11px}
.tr-today-go{font-size:14px;padding:9px 22px}
.tr-today-next{font-size:12.5px;color:var(--muted);margin-top:11px;padding-top:9px;border-top:1px solid #e0e7ff}
.tr-today-next .tr-mlbl{font-weight:800;color:#4338ca;display:inline}
/* Curriculum (milestone) — collapsed, with progress */
.tr-curric{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.tr-curric.done{border-color:#a7f3d0}
.tr-curric-head{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;flex-wrap:wrap}
.tr-curric-ico{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:#eef2ff;color:var(--indigo);flex:0 0 auto;font-size:13px}
.tr-curric.done .tr-curric-ico{background:#d1fae5;color:var(--emerald-d)}
.tr-curric-meta{display:flex;flex-direction:column;gap:1px;min-width:120px}
.tr-curric-title{font-weight:800;font-size:15px}
.tr-curric-prog{font-size:11.5px;color:var(--muted)}
.tr-curric-identity{font-size:11.5px;font-weight:700;color:#047857}
.tr-curric-sub{font-size:11.5px;color:var(--muted);line-height:1.35;margin:1px 0}
.tr-crosslink{display:block;margin:8px 2px 2px;font-size:12px;font-weight:700;color:#0891b2;background:#ecfeff;border:1px solid #a5f3fc;border-radius:8px;padding:8px 11px;cursor:pointer;text-align:left;width:100%}
.jr-comms-academy{margin-top:9px;padding-top:8px;border-top:1px dashed #cbd5e1}
.jr-ca-head{font-size:11px;font-weight:700;color:#0891b2;margin-bottom:5px}
.jr-ca-link{display:block;width:100%;text-align:left;font-size:12px;font-weight:600;color:#0e7490;background:#ecfeff;border:1px solid #a5f3fc;border-radius:7px;padding:6px 9px;margin-bottom:4px;cursor:pointer}
.jr-ms-train[data-train]{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.tr-track{margin-top:14px;border-top:1px solid #eef0f4;padding-top:14px}
.tr-track-head{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer}
.tr-track-headmain{flex:1;min-width:0}
.tr-track-body{display:none;margin-top:10px}
.tr-track.open>.tr-track-body{display:block}
.tr-track.open>.tr-track-head .tr-chev{transform:rotate(180deg)}
.tr-track-title{font-size:15px;font-weight:800;margin:0}
.tr-track-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.tr-track-development .tr-track-title{color:#047857}
.tr-track-lifeskills .tr-track-title{color:#0891b2}
.tr-track-rank .tr-track-title{color:#b45309}
.tr-track-specialization .tr-track-title{color:#6d28d9}
.tr-curric-soon{font-size:11.5px;font-weight:700;color:#6d28d9}
.tr-curric.soon{opacity:.9}
.tr-curric.soon .tr-curric-ico{color:#a78bda}
.tr-vsoon{display:inline-block;font-size:11px;font-weight:700;color:#6d28d9;background:#f3eefe;border-radius:6px;padding:2px 8px;margin:0 0 6px}
.tr-mprev{margin:8px 0;padding:8px 11px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px}
.tr-mprev .tr-mtopics{margin:4px 0 0;padding-left:18px}
.tr-mprev .tr-mtopics li{font-size:12.5px;color:#334155}
.tr-mcomp{display:inline-block;font-size:11px;font-weight:700;color:#6d28d9;background:#f3eefe;border-radius:6px;padding:2px 8px;margin:0 0 6px}
.tr-eps{margin-top:10px}
.tr-eps-head{font-size:12px;font-weight:700;color:#6d28d9;margin-bottom:6px}
.tr-ep{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;margin-bottom:6px;background:#fafafa;border:1px solid #ececf3;border-radius:9px}
.tr-ep.done{background:#f0fdf4;border-color:#bbf7d0}
.tr-ep-ico{font-size:14px;line-height:1.4;flex:0 0 auto}
.tr-ep-body{flex:1;min-width:0}
.tr-ep-title{font-size:13px;font-weight:700;color:#1f2937}
.tr-ep-dur{font-size:11px;font-weight:600;color:#94a3b8;margin-left:4px}
.tr-ep-en{font-size:11.5px;color:#94a3b8;font-style:italic}
.tr-ep-soon{display:inline-block;font-size:10.5px;font-weight:700;color:#6d28d9;background:#f3eefe;border-radius:5px;padding:1px 6px;margin-top:3px}
.tr-ep-play{display:inline-block;font-size:11.5px;font-weight:700;color:#6d28d9;margin-top:3px;text-decoration:none}
.tr-ep-chal{font-size:12px;color:#334155;margin-top:4px}
.tr-ep-btn{flex:0 0 auto;align-self:center;font-size:11.5px;font-weight:700;color:#6d28d9;background:#fff;border:1px solid #d7c8f5;border-radius:7px;padding:4px 10px;cursor:pointer}
.tr-ep.done .tr-ep-btn{color:#16a34a;border-color:#bbf7d0}
.tr-curric-bar{flex:1;min-width:70px;height:7px;background:#f3f4f6;border-radius:999px;overflow:hidden}
.tr-curric-fill{height:100%;background:#7c3aed;border-radius:999px;transition:width .3s}
.tr-curric-fill.full{background:#10b981}
.tr-curric-pct{font-size:12px;font-weight:800;color:var(--muted);flex:0 0 auto}
.tr-curric .tr-chev{transition:transform .2s}
.tr-curric.open .tr-chev{transform:rotate(180deg)}
.tr-curric-body{display:none;padding:0 12px 10px;flex-direction:column;gap:7px}
.tr-curric.open .tr-curric-body{display:flex}
/* Module row — collapsed, status-coloured; body reveals section-by-section */
.tr-moditem{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tr-moditem.current{border-color:#c7d2fe;background:#fbfaff}
.tr-moditem.done{background:#f8fefb}
.tr-modhead{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer}
.tr-mod-ico{flex:0 0 auto;font-weight:800;color:var(--muted)}
.tr-moditem.done .tr-mod-ico{color:#10b981}
.tr-moditem.current .tr-mod-ico{color:#7c3aed}
.tr-mod-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.tr-mod-num{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.tr-mod-title{font-weight:700;font-size:13.5px}
.tr-mod-status{font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;border-radius:999px;padding:2px 8px}
.tr-mod-status.st-done{color:#047857;background:#ecfdf5}
.tr-mod-status.st-current{color:#6d28d9;background:#f5f3ff}
.tr-mod-status.st-upcoming{color:var(--muted);background:#f3f4f6}
.tr-moditem.open .tr-chev{transform:rotate(180deg)}
.tr-modbody{padding:2px 13px 13px}
.tr-block{margin-bottom:10px}
.tr-block[hidden]{display:none}
.tr-more{display:block;width:100%;margin:4px 0 12px;font-size:13px;font-weight:800;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:9px;padding:9px;cursor:pointer}
.tr-more:hover{background:#e0e7ff}
.tr-modfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tr-doneflag{font-size:12.5px;font-weight:800;color:#047857}
.tr-reopen{font-size:12px;color:var(--muted);background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer}
.tr-modfoot .tr-completebtn{margin-top:0}
.tr-goal{font-size:13px;color:var(--indigo-d);font-weight:600;margin:0 0 6px}
.tr-topics{margin:0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ink)}
.tr-tbd{font-size:12.5px;color:var(--muted);font-style:italic}
.tr-outcome{font-size:12.5px;color:var(--ink);margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
/* Academy modules (full curriculum) */
.tr-modcount{font-size:10.5px;font-weight:800;color:var(--indigo);background:#eef2ff;border-radius:999px;padding:1px 8px;width:fit-content;margin-top:3px}
.tr-mods{display:flex;flex-direction:column;gap:12px;margin:4px 0 2px}
.tr-mod{border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:#fbfcff}
.tr-mhead{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.tr-mno{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--indigo);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.tr-mtitle{font-weight:800;font-size:14px;color:var(--indigo-d)}
.tr-mdesc{font-size:12.5px;line-height:1.55;color:var(--ink);margin-bottom:9px}
.tr-msec{margin-top:9px}
.tr-mlbl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.tr-msec ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.tr-msec ul li{margin-bottom:2px}
.tr-mkey{font-size:12.5px;font-weight:700;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 10px;margin-top:9px}
.tr-mout{font-size:12px;color:var(--emerald-d);background:#f6fefb;border:1px solid #a7f3d0;border-radius:8px;padding:7px 10px;margin-top:10px}
/* Uniform Academy schema blocks */
.tr-men{font-size:11px;color:var(--muted);font-style:italic;margin:-4px 0 7px}
.tr-mwhy{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.tr-mwhy>div:last-child{color:var(--indigo-d)}
.tr-maction{margin-top:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:7px 10px;font-size:12.5px;color:#1e3a8a}
.tr-maction>div:last-child{font-weight:600}
.tr-mnext{margin-top:7px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tr-mnext-path{font-size:12px;font-weight:700;color:var(--indigo);background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:3px 11px}
.tr-nextbtn{font-size:12px;font-weight:700;color:#fff;background:var(--indigo);border:1px solid var(--indigo);border-radius:999px;padding:4px 12px;cursor:pointer;transition:background .15s,transform .05s}
.tr-nextbtn:hover{background:var(--indigo-d)}
.tr-nextbtn:active{transform:scale(0.97)}
.tr-reflectbtn{display:block;width:100%;margin-top:10px;font-size:12.5px;font-weight:700;color:#5b21b6;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;padding:8px 11px;cursor:pointer;transition:background .15s}
.tr-reflectbtn:hover{background:#ede9fe}
.ref-academy .ref-ctx{color:var(--indigo-d);font-weight:700}
.ref-prompt{font-size:12.5px;font-weight:600;color:var(--ink);background:#f8fafc;border-radius:7px;padding:6px 9px;margin:4px 0 6px}
.tr-mcoach{margin-top:8px;font-size:12.5px;line-height:1.5;color:#5b21b6;background:#f5f3ff;border-left:3px solid #8b5cf6;border-radius:0 8px 8px 0;padding:8px 11px;font-style:italic}
/* Section-based module (sections + accordion + metadata) */
.tr-mmeta{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 9px}
.tr-chip{font-size:10px;font-weight:700;color:var(--muted);background:#f1f5f9;border-radius:999px;padding:1px 8px;text-transform:capitalize}
.tr-secs{display:flex;flex-direction:column;gap:10px}
.tr-sec{border-left:3px solid #e0e7ff;padding:2px 0 2px 11px}
.tr-sec-title{font-weight:800;font-size:12.5px;color:var(--indigo-d);margin-bottom:4px}
.tr-sec ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.tr-sec-note{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:5px}
.tr-sec-ref{font-size:12px;color:var(--indigo-d);background:#eef2ff;border-radius:8px;padding:6px 9px;margin-top:7px}
.tr-acc{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.tr-acc-item{border:1px solid var(--line);border-radius:8px;background:#fff}
.tr-acc-item summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--ink);padding:8px 10px;list-style:none}
.tr-acc-item summary::-webkit-details-marker{display:none}
.tr-acc-item summary::before{content:"▸ ";color:var(--muted)}
.tr-acc-item[open] summary::before{content:"▾ "}
.tr-acc-body{padding:0 10px 9px;font-size:12px;line-height:1.5;color:var(--ink)}
.tr-acc-body p{margin:4px 0}
.tr-acc-body ul.tr-acc-q{margin:3px 0 0;padding-left:18px;color:var(--indigo-d)}
.tr-mcomplete{font-size:12px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 10px;margin-top:10px}
.jr-ms-train{font-size:11px;font-weight:700;color:#b45309;margin-top:3px}
.jr-ms-train.done{color:var(--emerald-d)}
.jr-actions-train{font-size:12.5px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 11px;margin-bottom:10px;cursor:pointer}
.jr-actions-train.done{color:var(--emerald-d);background:#f0fdf4;border-color:#a7f3d0}

/* ── Dashboard journey band + helpers ── */
.dash-journey{background:linear-gradient(135deg,#eef2ff,#f0fdf4);border:1px solid #c7d2fe;border-radius:14px;
  padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;margin-bottom:16px}
.dash-journey:hover{border-color:var(--indigo)}
.dj-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;color:var(--indigo-d);margin-bottom:10px}
.dj-pct{font-size:18px;color:var(--emerald-d)}
.dj-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.dj-cell{flex:1}
.dj-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dj-val{font-size:17px;font-weight:800;color:var(--ink);margin-top:2px}
.dj-next{color:var(--indigo-d)}
.dj-arrow{font-size:18px;color:var(--muted)}
.dash-alt{font-size:12.5px;color:var(--muted);margin-top:14px}

/* 🏪 Laluan Stokis (Stockist Journey) */
.stkj-welcome{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.stkj-band{background:linear-gradient(135deg,#fff7ed,#f0fdf4);border:1px solid #fed7aa;border-radius:14px;padding:14px 16px;cursor:pointer;margin-bottom:14px}
.stkj-band:hover{border-color:#fb923c}
.stkj-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;color:#9a3412;margin-bottom:10px}
.stkj-pct{font-size:18px;color:var(--emerald-d)}
.stkj-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.stkj-cell{flex:1}
.stkj-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stkj-val{font-size:16px;font-weight:800;color:var(--ink);margin-top:2px}
.stkj-next{color:#9a3412}
.stkj-arrow{font-size:18px;color:var(--muted)}
.stkj-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:16px}
.stkj-sum-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.stkj-sum-pct{font-size:24px;font-weight:800;color:var(--emerald-d)}
.stkj-next-line{font-size:13px;color:var(--ink);margin-top:10px}
.stkj-phases{display:flex;flex-direction:column;gap:12px}
.stkj-phase{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.stkj-phase.complete{border-color:#a7f3d0;background:#f0fdf4}
.stkj-phase-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px}
.stkj-phase>summary{list-style:none;cursor:pointer;user-select:none}
.stkj-phase>summary::-webkit-details-marker{display:none}
.stkj-phase:not([open])>summary{margin-bottom:0}
.stkj-chev{color:var(--muted);font-size:12px;transition:transform .15s;flex:0 0 auto}
.stkj-phase[open] .stkj-chev{transform:rotate(90deg)}
.stkj-phase-name{font-weight:800;font-size:14px;flex:1}
.stkj-phase-count{font-size:12px;font-weight:700;color:var(--muted)}
.stkj-phase-steps{display:flex;flex-direction:column;gap:6px}
.stkj-step{display:flex;align-items:center;gap:11px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer}
.stkj-step:hover{background:#f1f5f9}
.stkj-step input{position:absolute;opacity:0;width:0;height:0}
.stkj-step-ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:0 0 auto;background:#e9eef5;color:var(--muted)}
.stkj-step.done .stkj-step-ico{background:#d1fae5;color:var(--emerald-d)}
.stkj-step.next .stkj-step-ico{background:#ffedd5;color:#9a3412}
.stkj-step-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.stkj-step-title{font-weight:700;font-size:13.5px}
.stkj-step-no{font-size:10.5px;font-weight:800;color:#9a3412;background:#fff;border:1px solid #fed7aa;border-radius:6px;padding:1px 5px;margin-right:2px}
.stkj-step.ro{cursor:default}
.stk-cap{font-size:12px;color:var(--muted);background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:12px}
.stkj-step.done .stkj-step-title{color:var(--muted);text-decoration:line-through}
.stkj-step-detail{font-size:11.5px;color:var(--muted);font-weight:500}
.stkj-step.next{border-color:#fed7aa}
.stkj-step-tag{font-size:10.5px;font-weight:800;color:#9a3412;background:#ffedd5;border-radius:6px;padding:2px 6px;text-transform:uppercase;letter-spacing:.03em}
.stkj-step.wf{cursor:pointer}
.stkj-step.wf:hover{background:#fff7ed;border-color:#fdba74}
.stkj-wf-go{font-size:12px;font-weight:800;color:#9a3412;white-space:nowrap;flex:0 0 auto}
.stkj-hint{font-size:12px;color:#9a3412;margin-bottom:10px}
.stkj-next-how{color:var(--muted);font-weight:500}
.lnk{color:var(--indigo);font-weight:700;cursor:pointer;text-decoration:none}
.lnk:hover{text-decoration:underline}

/* ── Stockist detail rows (Reference) ── */
.ref-stk-row{display:flex;gap:8px;font-size:12px;margin-top:5px}
.ref-stk-k{font-weight:700;color:var(--muted);min-width:96px}

/* ── Typed goals ── */
.goal-list{display:flex;flex-direction:column;gap:10px}
.goal-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.goal-card.achieved{opacity:.72}
.gc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.gc-btns{display:flex;gap:6px;flex-wrap:wrap}
.mini{background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--ink)}
.mini:hover{background:#f8fafc;border-color:#c7d2fe}
.gc-title{font-size:16px;font-weight:800;color:var(--ink)}
.gc-info{font-size:12.5px;color:var(--indigo);font-weight:600;margin-top:3px}
.gc-prog{margin-top:9px}
.gc-prog-lbl{font-size:12px;color:var(--muted);margin-top:4px}
.gc-status{display:inline-block;margin-top:9px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;background:#f1f5f9;color:#475569}
.gc-status.done{background:#d1fae5;color:#047857}
.gc-due{font-size:11.5px;color:var(--muted);margin-top:8px}
.gc-notes{font-size:12.5px;color:var(--ink);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
/* type badges */
.gt-personal{background:#eef2ff;color:var(--indigo)}
.gt-package{background:#e0f2fe;color:#0369a1}
.gt-rank{background:#fef3c7;color:#b45309}
.gt-stockist{background:#f3e8ff;color:#7e22ce}
.gt-income{background:#d1fae5;color:#047857}
/* dashboard active-goals card */
.dash-goals-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.dg-all{margin-left:auto;font-size:12px}
.dg-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.dg-row:last-child{border-bottom:none}
.dg-target{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-pct{font-weight:800;color:var(--indigo);white-space:nowrap}

/* ── Focus Goal strip (Dashboard) ── */
.refresh-fab{position:fixed;right:14px;bottom:18px;z-index:300;background:var(--indigo);color:#fff;border:none;
  padding:10px 16px;border-radius:24px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.25);
  display:flex;align-items:center;gap:7px}
.refresh-fab .rf-ico{font-size:15px;line-height:1}
.refresh-fab:hover{background:var(--indigo-d)}
.refresh-fab:active{transform:scale(.96)}
.coach-band{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.coach-card{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);
  border:1px solid #bfdbfe;border-radius:12px;padding:11px 14px}
.coach-ico{font-size:20px;flex:0 0 auto}
.coach-body{flex:1;min-width:0}
.coach-text{font-size:13px;line-height:1.45;color:var(--ink)}
.coach-goal{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.coach-cta{flex:0 0 auto;white-space:nowrap}
/* ── The Hero — Today's Most Important Action (one voice) ── */
.hero-card{background:linear-gradient(135deg,var(--indigo),var(--indigo-d));color:#fff;border-radius:16px;
  padding:18px 18px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.hero-eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c7d2fe;margin-bottom:8px}
.hero-action{font-size:17px;font-weight:700;line-height:1.4;display:flex;gap:9px;align-items:flex-start}
.hero-ico{font-size:20px;flex:0 0 auto;line-height:1.3}
.hero-why{font-size:12.5px;color:#e0e7ff;line-height:1.45;margin-top:9px}
.hero-why-q{font-weight:800;color:#fff}
.hero-cta{margin-top:13px;background:#fff;color:var(--indigo-d);font-weight:800;border:none}
.hero-cta:hover{background:#eef2ff}
.hero-calm{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);color:var(--ink);border:1px solid #a7f3d0}
.hero-calm .hero-eyebrow{color:var(--emerald-d)}
/* ── Digital Upline Promise ── */
.promise-card{position:relative;background:linear-gradient(135deg,#eef2ff,#f0fdf4);border:1px solid #c7d2fe;border-radius:14px;padding:15px 16px;margin-bottom:16px}
.promise-x{position:absolute;top:8px;right:10px;border:none;background:transparent;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px}
.promise-x:hover{color:var(--ink)}
.promise-head{font-size:15px;font-weight:800;color:var(--indigo-d);margin-bottom:4px}
.promise-adapt{font-size:13.5px;font-weight:700;font-style:italic;color:#065f46;margin-bottom:10px;line-height:1.4}
.promise-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.promise-list li{font-size:13px;color:var(--ink);line-height:1.4}
.promise-comms{margin-top:11px;padding-top:11px;border-top:1px solid #c7d2fe}
.promise-comms-head{font-size:12px;font-weight:700;color:#065f46;margin-bottom:7px}
.promise-comms-list{display:flex;flex-wrap:wrap;gap:6px}
.pc-stage{font-size:11px;color:#334155;background:#fff;border:1px solid #d1fae5;border-radius:99px;padding:3px 10px}
.pc-stage strong{color:var(--emerald-d)}
/* ── First-week strip (guided, not measured) ── */
.firstweek{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #a7f3d0;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.firstweek-head{font-size:13px;font-weight:800;color:var(--emerald-d);display:flex;align-items:center;gap:8px;margin-bottom:11px}
.firstweek-day{font-size:11px;font-weight:700;color:#fff;background:var(--emerald);border-radius:99px;padding:2px 10px}
.firstweek-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fw-step{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);background:#fff;border:1px solid #d1fae5;border-radius:10px;padding:8px 11px}
.fw-step.done{color:var(--emerald-d);font-weight:600}
.fw-ico{font-weight:800;color:#94a3b8}
.fw-step.done .fw-ico{color:var(--emerald)}
.firstweek-note{font-size:12px;color:var(--muted);margin-top:11px;font-style:italic}
@media (max-width:480px){.firstweek-steps{grid-template-columns:1fr}}
/* ── Hero forward briefing (next milestone → this week → today) ── */
.hero-celebrate{font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border-radius:10px;padding:8px 11px;margin-bottom:12px}
.hero-next{font-size:15px;font-weight:800;color:#fff;margin-bottom:9px}
.hero-week-h{font-size:12px;font-weight:700;color:#c7d2fe;margin-bottom:5px}
.hero-week-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:4px}
.hero-week-list li{font-size:13px;color:#e0e7ff;line-height:1.4}
.hero-week-list li.done{color:#a7f3d0}
.hero-today{border-top:1px solid rgba(255,255,255,.22);padding-top:12px;margin-top:12px}
.hero-today .hero-eyebrow{margin-bottom:6px}
/* ── Current conversation (the "what do I say?" card) ── */
.conv-card{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.conv-head{font-size:12px;font-weight:800;letter-spacing:.03em;color:#065f46;margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.conv-stage{font-size:10.5px;font-weight:700;letter-spacing:0;color:#047857;background:#d1fae5;border-radius:999px;padding:2px 8px;cursor:pointer}
.conv-title{font-size:14px;font-weight:700;color:var(--ink);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.conv-goal{font-size:11px;font-weight:600;color:var(--muted)}
.conv-why{font-size:12.5px;color:#334155;line-height:1.45;margin-top:7px}
.conv-why-q{font-weight:800;color:#065f46}
.conv-preview{font-size:13px;color:#334155;line-height:1.5;white-space:pre-line;background:#fff;border:1px solid #d1fae5;border-radius:10px;padding:10px 12px;margin:9px 0;max-height:118px;overflow:hidden}
.conv-actions{display:flex}
/* ── Growth evidence — plain-language PDCA (member comprehension) ── */
.growth-evidence .gs-overall{font-size:20px;color:var(--muted)}
.gs-evid-list{display:flex;flex-direction:column;gap:11px}
.gs-evid .gs-evid-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.gs-evid .gs-lbl{font-size:13px;font-weight:700;color:var(--ink)}
.gs-evid .gs-val{font-size:12px;font-weight:700;color:var(--muted)}
.gs-evid.weak .gs-lbl{color:var(--amber)}
.gs-evid.weak .gs-fill{background:var(--amber)}
.gs-plain{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
/* ── Invitation empty states (not "what you lack") ── */
.empty-inline.invite{color:var(--indigo);font-weight:600;cursor:pointer;background:#eef2ff;border-radius:8px;padding:8px 10px}
.empty-inline.invite:hover{background:#e0e7ff}
.welcome-card{text-align:center}
/* ── Communication Roadmap (Journey + Training) ── */
.jr-comms{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:10px 12px;margin:6px 0 12px}
.jr-comms-head{font-size:12px;color:#065f46;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.jr-comms-goal{color:var(--muted);font-weight:600}
.jr-comms-text{font-size:13px;color:var(--ink);line-height:1.5;margin-top:6px;white-space:pre-line}
.jr-stage-comms{font-size:11px;color:#059669;font-weight:600;margin:2px 0 4px}
.cs-list{display:flex;flex-direction:column;gap:10px}
.cs-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cs-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cs-title{font-weight:700;color:var(--ink);font-size:14px}
.cs-stage{font-size:11px;color:var(--muted);background:#f1f5f9;border-radius:999px;padding:2px 9px;font-weight:600}
.cs-goal{font-size:11px;color:var(--muted);font-weight:600;margin:4px 0}
.cs-text{font-size:13px;color:var(--ink);line-height:1.5;white-space:pre-line}
/* ── Growth Score (AGN Growth Cycle / PDCA) ── */
.growth-band{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.gs-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.gs-head>span:first-child{font-size:13px;font-weight:700;color:var(--muted)}
.gs-overall{font-size:26px;font-weight:800;color:var(--indigo);line-height:1}
.gs-tier{font-size:11px;color:var(--muted);font-weight:600;margin:-4px 0 10px}
.gs-cycle{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.gs-cell{display:grid;grid-template-columns:64px 1fr 38px;align-items:center;gap:8px}
.gs-lbl{font-size:12px;font-weight:700;color:var(--ink)}
.gs-bar{height:8px;background:#eef2f7;border-radius:99px;overflow:hidden}
.gs-fill{height:100%;background:var(--indigo);border-radius:99px}
.gs-val{font-size:12px;font-weight:700;color:var(--muted);text-align:right}
.gs-cell.weak .gs-lbl{color:var(--amber)}
.gs-cell.weak .gs-fill{background:var(--amber)}
/* ScoreCard "to level up" coaching line (button optional) */
.sc-next{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;padding:9px 12px;background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #c7d2fe;border-radius:10px;font-size:13px}
.sc-next-lbl{font-weight:800;color:#4338ca}
.sc-next-text{flex:1;color:var(--ink);min-width:140px}
.gs-nba{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:13px}
.gs-nba-lbl{font-weight:700;color:var(--ink)}
.gs-nba-text{flex:1;color:var(--ink);min-width:140px}
.gs-overall-pill{background:#eef2ff;color:var(--indigo);border-radius:99px;padding:2px 10px;font-size:13px;font-weight:800}
.gs-break{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.gs-pillar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.gs-pillar-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.gs-pillar-pct{font-weight:800;color:var(--indigo)}
.gs-q{font-size:12px;color:var(--muted)}
.gs-measures{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gs-m{font-size:11px;color:var(--muted);background:#f1f5f9;border-radius:99px;padding:3px 9px;font-weight:600}
.gs-m.met{background:#dcfce7;color:#166534}
/* leader Growth profile */
.gp-body{padding:14px 20px 4px}
.gp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.gp-lbl{font-size:11px;font-weight:700;margin-right:4px}
.gp-lbl.good{color:#166534}
.gp-lbl.warn{color:var(--amber)}
.gp-chip{font-size:11px;font-weight:600;border-radius:99px;padding:3px 10px}
.gp-chip.good{background:#dcfce7;color:#166534}
.gp-chip.warn{background:#fef3c7;color:#92400e}
.gp-coach{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:14px 20px 16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.muted-btn{opacity:.55}
/* ── Events (Journey) ── */
.ev-list{display:flex;flex-direction:column;gap:10px}
.ev-card{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ev-card.ev-here{border-color:#bfdbfe;background:linear-gradient(135deg,#eff6ff,#f8fafc)}
.ev-ico{font-size:20px;flex:0 0 auto}
.ev-body{flex:1;min-width:0}
.ev-title{font-weight:700;color:var(--ink);font-size:14px}
.ev-tag{font-size:10px;font-weight:700;color:var(--indigo);background:#eef2ff;border-radius:99px;padding:2px 8px;margin-left:4px}
.ev-when{font-size:12px;color:var(--muted);margin-top:2px}
.ev-desc{font-size:12px;color:var(--ink);margin-top:5px}
.ev-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
.ev-att.done{color:#166534;border-color:#a7f3d0;background:#dcfce7}
/* ── Rank maintenance ── */
.maint-card{border-radius:12px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--line)}
.maint-card.due{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fde68a}
.maint-card.done{background:linear-gradient(135deg,#f0fdf4,#d1fae5);border-color:#a7f3d0}
.maint-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.maint-rank{font-weight:800;color:var(--ink);font-size:15px}
.maint-streak{font-size:12px;font-weight:700;color:#b45309}
.maint-status{font-size:13px;color:var(--ink);margin:6px 0 8px}
/* Qualification windows (Phase 4) */
.rw-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.rw-card{border-radius:12px;padding:12px 16px;border:1px solid #c7d2fe;background:linear-gradient(135deg,#f5f3ff,#eff6ff)}
.rw-card.overdue{border-color:#fecaca;background:linear-gradient(135deg,#fef2f2,#fee2e2)}
.rw-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rw-name{font-weight:800;color:var(--ink);font-size:15px}
.rw-from{font-size:12px;font-weight:700;color:#6d28d9}
.rw-req{font-size:13px;color:var(--muted);margin:5px 0 9px}
.lh-band{border-color:#c7d2fe;background:linear-gradient(135deg,#f5f3ff,#eff6ff)}
.lh-band .gs-overall{color:#6d28d9}
.lh-band .gs-fill{background:#7c3aed}
.lh-band .gs-cell.weak .gs-fill{background:var(--amber)}
.dash-focus{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1px solid #fde68a;border-radius:12px;padding:11px 16px;margin-bottom:16px;cursor:pointer;font-size:13px}
.dash-focus:hover{border-color:var(--amber)}
.dash-focus.done{background:linear-gradient(135deg,#f0fdf4,#d1fae5);border-color:#a7f3d0}
.df-star{font-size:18px}
.df-text{flex:1;color:var(--ink)}
.df-meta{font-weight:700;color:#b45309;white-space:nowrap}
.dash-focus.done .df-meta{color:var(--emerald-d)}
.dash-focus.prompt{background:#fff;border:1px dashed var(--line);cursor:default;color:var(--muted)}
.dash-focus.prompt:hover{border-color:#fde68a}

/* ── Focus Goal (Goals page) ── */
.focus-card{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid #fde68a;border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow)}
.focus-card.done{background:linear-gradient(135deg,#f0fdf4,#d1fae5);border-color:#a7f3d0}
.focus-star{font-size:24px}
.focus-body{flex:1}
.focus-lbl{font-size:11px;font-weight:800;color:#b45309;text-transform:uppercase;letter-spacing:.04em}
.focus-card.done .focus-lbl{color:var(--emerald-d)}
.focus-mile{font-size:16px;font-weight:800;color:var(--ink);margin-top:2px}
.focus-meta{font-size:12px;color:var(--muted);margin-top:2px}
.focus-btns{display:flex;gap:6px}
.focus-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);flex-wrap:wrap}

/* ── Rewards (Reference recognition pathway) ── */
.ref-rwd-group{margin-bottom:12px}
.ref-rwd-cat{font-size:12px;font-weight:800;color:var(--indigo-d);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px 2px}
.ref-rwd{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow);margin-bottom:7px}
.ref-rwd-main{display:flex;flex-direction:column;gap:2px}
.ref-rwd-note{font-size:11.5px;color:var(--muted)}
.ref-rwd-val{font-weight:800;color:var(--emerald-d);font-size:13px;white-space:nowrap;text-align:right}
/* Income streams — payout-free unlock map */
.ref-streams-note{font-size:12.5px;color:var(--muted);background:#f8fafc;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
.ref-stream-tier{font-weight:800;font-size:12px;letter-spacing:.02em;color:var(--indigo);text-transform:uppercase;margin:14px 0 2px;padding-top:8px;border-top:1px solid var(--line)}
.ref-stream-tier:first-child{margin-top:2px;padding-top:0;border-top:none}
.ref-stream{padding:11px 2px;border-bottom:1px solid var(--line)}
.ref-stream:last-child{border-bottom:none}
.ref-stream-name{font-weight:800;font-size:14.5px;color:var(--ink)}
.ref-stream-unlock{font-size:13px;color:#475569;margin-top:3px;line-height:1.45}
.ref-stream-unlock .rsu-lbl{font-weight:700;color:var(--indigo)}

/* ── Glossary (tappable terms + Reference list) ── */
.gloss{cursor:pointer;border-bottom:1px dotted var(--indigo);white-space:nowrap}
.gloss-i{font-style:normal;color:var(--indigo);font-size:11px;margin-left:2px;vertical-align:super;line-height:0}
.gloss.chip{border-bottom:none;cursor:pointer}
.gloss.chip .gloss-i{margin-left:3px;vertical-align:baseline}
.gloss:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:3px}
.gloss-list{display:flex;flex-direction:column}
.gloss-item{padding:11px 2px;border-bottom:1px solid var(--line)}
.gloss-item:last-child{border-bottom:none}
.gloss-term{font-weight:800;font-size:14.5px;color:var(--ink)}
.gloss-def{font-size:13px;color:#475569;margin-top:3px;line-height:1.5}
.gloss-pop-def{font-size:14px;color:#334155;line-height:1.6;margin:4px 0 14px}

/* ── Reference (read-only program data) ── */
.ref-intro{font-size:13px;color:var(--muted);background:#f8fafc;border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;margin-bottom:12px}
/* collapsible sections */
.ref-sec{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.ref-sec-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:none;cursor:pointer;padding:14px 16px;text-align:left}
.ref-sec-head:hover{background:#f8fafc}
.ref-sec-title{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.ref-sec-chev{color:var(--muted);font-size:12px;transition:transform .2s}
.ref-sec.open .ref-sec-chev{transform:rotate(180deg)}
.ref-sec-body{display:none;padding:0 16px 16px}
.ref-sec.open .ref-sec-body{display:block}
.ref-name{font-weight:800;font-size:14px;color:var(--ink)}
/* products */
.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ref-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.ref-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.ref-tag{font-size:12px;font-weight:600;color:var(--indigo);margin-bottom:6px}
.ref-prod-btns{display:flex;gap:6px;margin:6px 0}
.ref-prod-btn{flex:1;font-size:11.5px;font-weight:700;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;color:var(--ink);cursor:pointer}
.ref-prod-btn:hover{background:#eef2ff;border-color:#c7d2fe}
.ref-prod-btn.active{background:var(--indigo);border-color:var(--indigo);color:#fff}
.ref-prod-media{max-height:0;overflow:hidden;transition:max-height .2s ease}
.ref-prod-media.open{max-height:640px;margin-bottom:8px}
.ref-prod-thumb{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.ref-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:7px}
.ref-benefits{font-size:12.5px;color:var(--ink);line-height:1.5}
.ref-reg{font-size:10.5px;color:var(--muted);margin-top:8px;font-family:ui-monospace,monospace}
.ref-cat-health{background:#d1fae5;color:#047857}
.ref-cat-wellness{background:#eef2ff;color:var(--indigo)}
.ref-cat-personal-care{background:#fce7f3;color:#be185d}
/* packages */
.ref-pkgs{display:flex;flex-direction:column;gap:8px}
.ref-pkg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow)}
.ref-pkg-main{display:flex;flex-direction:column;gap:2px}
.ref-pkg-note{font-size:11.5px;color:var(--muted)}
.ref-pkg-nums{display:flex;align-items:center;gap:12px;white-space:nowrap}
.ref-price{font-weight:800;color:var(--ink);font-size:14px}
/* ranks */
.ref-ranks{display:flex;flex-direction:column;gap:8px}
.ref-rank{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
.ref-rank-badge{font-size:18px;color:var(--amber)}
.ref-rank-body{flex:1}
.ref-rank-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ref-reward{font-size:12px;font-weight:700;color:var(--emerald-d)}
.ref-rank-req{font-size:12px;color:var(--muted);margin-top:3px}