:root {
  --navy: #0b1f3a; --navy-2: #16305a; --red: #c8102e; --paper: #f6f4ef; --card: #fff;
  --ink: #14161a; --muted: #6b7280; --line: #e5e1d8;
  --gold: #c9a227; --silver: #a3a9b1; --bronze: #b0723b; --ok: #1f7a4d; --warn: #b45309;
  --r: 14px; --sans: "Inter", system-ui, sans-serif; --serif: "Source Serif 4", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--navy); }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 26px; font-weight: 800; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); } .small { font-size: 14px; } .center { text-align: center; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin: 0 0 4px; }
.eyebrow.light { color: #ffd0d6; }
.section { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }

/* chrome */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--navy); color: #fff; }
.top-title { font-weight: 700; font-size: 15px; }
.spacer { flex: 1; }
.back { color: #fff; text-decoration: none; font-size: 30px; line-height: 1; width: 28px; margin-top: -4px; }
.mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--red); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .04em; }
.mark.big { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
.page { padding: 20px 16px 110px; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabs a { flex: 1; max-width: 186px; text-align: center; padding: 10px 0 12px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabs a .ico { font-size: 18px; line-height: 1; }
.tabs a.on { color: var(--navy); }
.tabs a.on .ico { color: var(--red); }

/* forms */
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
input, textarea, select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: 16px var(--sans); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); }
textarea.err { border-color: var(--danger); }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { margin: 0; font-weight: 500; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--navy); }
.stack > * + * { margin-top: 12px; }
.stack label + label { margin-top: 0; }
.row { display: flex; gap: 10px; align-items: flex-end; }
.grow { flex: 1; }
.opt-l { font-weight: 400; color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid transparent; font: 600 16px var(--sans); text-decoration: none; cursor: pointer; background: #fff; color: var(--navy); }
.btn.full { display: flex; width: 100%; }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:disabled { opacity: .6; }
.btn.outline { border-color: var(--navy); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.light { background: #fff; color: var(--navy); align-self: flex-start; margin-top: 14px; padding: 10px 16px; }
.btn.danger { color: var(--danger); }
.btn + .btn.full, .btn.full + .btn.full { margin-top: 10px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.card + .card { margin-top: 10px; }

/* login */
.login { padding: 48px 16px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, var(--navy) 0 300px, var(--paper) 300px); }
.login-brand { color: #fff; text-align: center; margin-bottom: 28px; }
.login-brand h1 { font-size: 30px; font-weight: 800; margin-top: 14px; }
.login-brand p { color: #c7d2e3; }
.fine { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.fine.link { text-align: center; display: block; margin-top: 24px; }

/* onboarding */
.ob-head { margin: -4px 0 22px; }
.ob-steps { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ob-steps .on { color: var(--navy); } .ob-steps .done { color: var(--ok); }
.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--red); border-radius: 99px; transition: width .3s; }
.social-row .row:first-child { align-items: center; margin-bottom: 10px; }
.social-row select { margin: 0; font-weight: 600; }
.x { border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; padding: 0 6px; }
.upload-mini input { font-size: 14px; padding: 8px; }

/* home */
.hello { font-size: 28px; font-weight: 800; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero { display: flex; flex-direction: column; padding: 22px; border-radius: 20px; text-decoration: none; color: #fff; background: radial-gradient(120% 120% at 100% 0, var(--navy-2), var(--navy)); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(200,16,46,.55); }
.hero-mod { font-size: 15px; color: #c7d2e3; font-weight: 500; }
.hero-step { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0; }
.hero-meta { font-size: 14px; color: #c7d2e3; }
.notice { display: block; text-decoration: none; padding: 14px 16px; border-radius: var(--r); background: #fff4e5; border: 1px solid #f5c98a; color: var(--ink); margin-bottom: 12px; }
.notice strong { display: block; color: var(--warn); font-size: 14px; }
.notice span { font-size: 14px; }
.stat-strip { display: flex; justify-content: space-between; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; }
.stat-strip b { color: var(--ok); }
.path { list-style: none; margin: 0; padding: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.path li > a, .path li > div { display: flex; align-items: center; gap: 14px; padding: 9px 0; text-decoration: none; color: var(--ink); position: relative; }
.path .locked .pt { opacity: .45; }
.dot.locked { color: #c4c8cf; }
.dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: #fff; border: 2px solid var(--line); color: var(--muted); }
.dot.current { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px rgba(200,16,46,.12); }
.dot.done { background: var(--navy); border-color: var(--navy); color: #fff; }
.dot.approved { background: var(--gold); border-color: var(--gold); color: #fff; }
.dot.redo { background: var(--warn); border-color: var(--warn); color: #fff; }
.pt b { display: block; font-size: 16px; }
.pt small { color: var(--muted); font-size: 13px; }

/* module */
.steps { display: flex; gap: 6px; margin: 12px 0 22px; }
.steps > * { flex: 1; text-align: center; padding: 8px 4px; border-radius: 99px; font-size: 13px; font-weight: 600; text-decoration: none; background: #fff; border: 1.5px solid var(--line); color: var(--muted); }
.steps .on { border-color: var(--navy); color: var(--navy); }
.steps .done { color: var(--ok); }
.steps .off { opacity: .45; }
.lesson { font: 18px/1.65 var(--serif); margin-bottom: 26px; }
.lesson .lede { font-size: 21px; line-height: 1.5; }
.lesson h3 { font: 700 18px var(--sans); margin: 24px 0 6px; }
.lesson ul, .lesson ol { padding-left: 22px; }
.lesson li { margin-bottom: 6px; }
.callout { font: 16px/1.55 var(--sans); background: #fff; border-left: 4px solid var(--red); padding: 14px 16px; border-radius: 0 10px 10px 0; margin: 16px 0; }

.quiz .q { font-size: 21px; margin-bottom: 16px; }
.qbar { display: flex; gap: 6px; margin-bottom: 14px; }
.qbar i { flex: 1; height: 5px; border-radius: 99px; background: var(--line); }
.qbar i.past { background: var(--navy); } .qbar i.now { background: var(--red); }
.opts { display: grid; gap: 10px; }
.opt { text-align: left; padding: 15px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: 500 16px var(--sans); color: var(--ink); cursor: pointer; }
.opt:not(:disabled):active { border-color: var(--navy); }
.opt.right { border-color: var(--ok); background: #eaf6ef; }
.opt.wrong { border-color: var(--danger); background: #fdecee; }
.opt:disabled { cursor: default; }
.feedback { margin: 16px 0 12px; padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.feedback.ok { background: #eaf6ef; } .feedback.no { background: #fdecee; }
.result { text-align: center; padding: 28px 8px 20px; }
.score { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.score span { font-size: 28px; color: var(--muted); }
.result.fail .score { color: var(--danger); }
.medal-pop { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: #fff; background: radial-gradient(circle at 35% 30%, #f3d774, var(--gold) 60%, #9c7b12); box-shadow: 0 6px 18px rgba(201,162,39,.4); }

.hw h3 { font-size: 20px; }
.checklist { list-style: none; padding: 0; margin: 14px 0 0; }
.checklist li { border-top: 1px solid var(--line); }
.checklist label { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 11px 0; font-weight: 500; font-size: 15px; }
.checklist input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--ok); }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }
.hw + form, .hw + #prev-media { margin-top: 16px; }
.upload { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 16px; border: 2px dashed #b9c3d3; border-radius: 16px; background: #fff; text-align: center; cursor: pointer; margin: 0; }
.upload input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.upload.has { border-style: solid; border-color: var(--ok); }
.up-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 8px; }
.up-t { font-size: 17px; font-weight: 700; word-break: break-all; }
.up-s { font-size: 13px; color: var(--muted); font-weight: 500; }
.media { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #000; border-radius: 14px; margin: 12px 0; }
.media.empty { background: #eee; color: var(--muted); padding: 40px; text-align: center; font-size: 14px; }
.status { padding: 14px 16px; border-radius: var(--r); margin-bottom: 14px; font-size: 14px; }
.status strong { display: block; font-size: 15px; }
.status.review { background: #e8eef8; } .status.approved { background: #fbf4dc; } .status.redo { background: #fff4e5; border: 1px solid #f5c98a; }

/* leaderboard */
.podium { display: flex; align-items: flex-end; gap: 8px; margin: 26px 0 18px; }
.pod { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pod .pn { font-weight: 700; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .ps { font-size: 12px; color: var(--muted); }
.pod .pg { font-weight: 800; color: var(--ok); margin: 4px 0 8px; }
.block { width: 100%; border-radius: 12px 12px 0 0; display: flex; justify-content: center; padding-top: 12px; background: var(--navy); }
.p1 .block { height: 128px; } .p2 .block { height: 96px; } .p3 .block { height: 72px; }
.p1 .av { width: 60px; height: 60px; font-size: 20px; box-shadow: 0 0 0 3px var(--gold); }
.p2 .av { box-shadow: 0 0 0 3px var(--silver); } .p3 .av { box-shadow: 0 0 0 3px var(--bronze); }
.pod.me .pn::after { content: " (you)"; color: var(--red); font-weight: 600; }
.medal { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 17px; border: 3px solid rgba(255,255,255,.35); }
.medal.gold { background: radial-gradient(circle at 35% 30%, #f3d774, var(--gold) 60%, #9c7b12); }
.medal.silver { background: radial-gradient(circle at 35% 30%, #eef0f2, var(--silver) 60%, #6f757c); }
.medal.bronze { background: radial-gradient(circle at 35% 30%, #e0a875, var(--bronze) 60%, #7a4a20); }
.av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #dfe5ee; color: var(--navy); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.av.big { width: 64px; height: 64px; font-size: 22px; }
.board { list-style: none; padding: 0; margin: 0 0 20px; }
.board li { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.board li.me { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.1); }
.rk { width: 22px; font-weight: 700; color: var(--muted); text-align: center; }
.bn { flex: 1; min-width: 0; }
.bn b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn small { color: var(--muted); font-size: 13px; }
.bg { font-weight: 800; color: var(--ok); }

/* profile + coach */
.prof { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.prof h2 { margin: 0; font-size: 22px; } .prof p { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.kpis b { display: block; font-size: 19px; } .kpis small { color: var(--muted); font-size: 12px; }
.nums { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nums small { display: block; color: var(--muted); font-size: 13px; }
.nums input { width: 120px; margin: 0; text-align: right; font-weight: 600; }
.list { padding: 4px 16px; }
.list > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 15px; }
.list > div + div { border-top: 1px solid var(--line); }
.seg { display: flex; background: #e9e5dc; border-radius: 12px; padding: 4px; margin: 10px 0 18px; }
.seg button { flex: 1; border: 0; background: none; padding: 10px; border-radius: 9px; font: 600 14px var(--sans); color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.r { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.rg { text-align: right; } .rg b { display: block; color: var(--ok); } .rg small { color: var(--muted); font-size: 12px; }
.rv-h { display: flex; gap: 12px; align-items: center; }
.review textarea { margin: 0 0 10px; }
.review + .review { margin-top: 14px; }
.qa + .qa { margin-top: 14px; }
.qa small { color: var(--muted); font-size: 13px; }
.qa p { margin: 2px 0 0; }

@media (min-width: 600px) { .page { padding-top: 32px; } }

/* backend states */
.loading { display: grid; place-items: center; padding: 60px 0; }
.loading span { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 16px; right: 16px; bottom: 84px; max-width: 528px; margin: 0 auto; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.seg.small { margin: 0 0 16px; }
.linkbtn { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--navy); font: 500 14px var(--sans); text-decoration: underline; cursor: pointer; }
.login .note { margin-bottom: 12px; font-size: 15px; background: #eef4ec; border-color: #cfe3c9; }
.login form h3 { margin-bottom: 14px; }
.shot .media { max-height: 360px; }

/* Start earning partner cards */
.earn p { margin: 8px 0 14px; font-size: 15px; }
.earn-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.earn-h b { font-size: 18px; }
.earn-h small { color: var(--muted); }
.earn-h .pill { margin-left: auto; }
.earn .check { margin-top: 12px; }
.btn.disabled { color: var(--muted); cursor: default; }
.pill.ok { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #e3f4ea; color: var(--ok); }
.earn-steps { margin: 0 0 14px; padding-left: 20px; font-size: 15px; }
.earn-steps li + li { margin-top: 4px; }
.earn-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.earn-code small { display: block; color: var(--muted); font-size: 12px; }
.earn-code b { font-size: 20px; letter-spacing: .08em; }
.earn-code .btn { padding: 8px 14px; }

/* ---------- v2: tracks, gifting, learn, calendar, chat ---------- */
:root { --blue: #2563eb; --green: #1f7a4d; }
.hide { display: none !important; }
.ob-now { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; color: var(--muted); }
.ob-now b { color: var(--navy); font-size: 14px; }
.bar.thin { height: 4px; margin-top: 8px; }
.list > a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.list > * + * { border-top: 1px solid var(--line); }
.list .right { text-align: right; }

/* pick cards (tracks, gifting) */
.pick { display: grid; gap: 10px; margin: 0 0 8px; }
.pick-card { margin: 0; position: relative; cursor: pointer; font-weight: 400; }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-body { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); font-size: 14px; color: var(--ink); }
.pick-body b { font-size: 17px; }
.pick-body small { color: var(--muted); }
.pick-body em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .04em; text-transform: uppercase; }
.pick-card input:checked + .pick-body { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,31,58,.12); }
.pick-card input:checked + .pick-body b::after { content: " ✓"; color: var(--red); }
.pick-card.slim .pick-body b { font-size: 15px; }
.pick-ico { font-size: 26px; line-height: 1; }
.notice.info { background: #eef3fb; border-color: #c9d6ea; }
.notice.info strong { color: var(--navy); }

/* home extras */
.mini-next { display: flex; align-items: center; gap: 12px; margin-top: 10px; text-decoration: none; color: var(--ink); font-size: 14px; }
.mini-next small, .track-card small { display: block; color: var(--muted); font-size: 12px; }
.mini-next b { display: block; }
.ann { display: block; text-decoration: none; color: var(--ink); }
.ann small { color: var(--muted); font-size: 12px; }
.ann p { margin: 4px 0 0; font-size: 15px; }

/* learn */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); min-height: 132px; }
.tile b { font-size: 16px; }
.tile small { color: var(--muted); font-size: 13px; line-height: 1.35; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-f { font-size: 12px; font-weight: 700; color: var(--navy); }
.track-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-top: 16px; background: var(--navy); color: #fff; border-color: var(--navy); }
.track-card small { color: #c7d2e3; }
.track-card b { font-size: 18px; }
.track-card .bar { background: rgba(255,255,255,.2); }

/* calendar */
.top-act { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; background: var(--red); padding: 6px 12px; border-radius: 99px; }
.cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-h h2 { margin: 0; font-size: 22px; }
.cal-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 22px; color: var(--navy); cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: 6px 0 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend em, .cd em { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
em.blue { background: var(--blue); } em.gold { background: var(--gold); } em.red { background: var(--red); } em.green { background: var(--green); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.cal > b { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0 4px; }
.cd { aspect-ratio: 1 / 1; border: 0; background: none; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; padding: 0; }
.cd i { display: flex; gap: 2px; height: 7px; }
.cd.out { color: #c4c8cf; }
.cd.today span { color: var(--red); font-weight: 800; }
.cd.sel { background: var(--navy); color: #fff; }
.cd.sel span { color: #fff; }
.linkbtn.inline { display: inline; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; }
.ev { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.ev b { display: block; font-size: 16px; }
.ev small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.ev .pill { margin-left: 6px; }
.ev-date { flex: none; width: 50px; text-align: center; border-radius: 10px; padding: 6px 0; color: #fff; background: var(--navy); }
.ev-date small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: inherit; opacity: .85; margin: 0; }
.ev-date b { font-size: 20px; line-height: 1.1; }
.ev-date.blue { background: var(--blue); } .ev-date.gold { background: var(--gold); } .ev-date.red { background: var(--red); } .ev-date.green { background: var(--green); }
.kind { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: #eceae4; color: var(--muted); }
.kind.blue { background: #e4ecfd; color: var(--blue); } .kind.gold { background: #f7efd3; color: #8a6d0f; } .kind.red { background: #fbe3e7; color: var(--red); } .kind.green { background: #e3f4ea; color: var(--green); }
.ev-meta > div > span:first-child { color: var(--muted); }
.ev-meta > div > span:last-child { text-align: right; }
.ev-desc { margin-top: 16px; }
.q-item small { color: var(--muted); font-size: 12px; }
.q-item p { margin: 4px 0 6px; }
.q-item.answered { opacity: .6; }
.btn.danger { color: var(--danger); }

/* chat */
.rooms { margin-top: 12px; }
.room { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.room b { display: block; }
.room small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.room-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eef3fb; color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.room-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.room.unread b { font-weight: 800; }
.udot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.chat-page { padding-bottom: 170px; }
.room-desc { font-size: 13px; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.msg { display: flex; gap: 10px; padding: 6px 0 2px; }
.msg.grouped { padding-top: 0; }
.av.sm { width: 34px; height: 34px; font-size: 12px; }
.av.ghost { background: none; }
.mb { flex: 1; min-width: 0; }
.mh { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mh b { font-size: 14px; }
.mh small { color: var(--muted); font-size: 12px; }
.badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--red); color: #fff; padding: 2px 6px; border-radius: 6px; }
.mt { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.mdel { background: none; border: 0; padding: 0; color: var(--muted); font: 12px var(--sans); cursor: pointer; opacity: 0; }
.msg:hover .mdel, .mdel[data-armed] { opacity: 1; }
@media (hover: none) { .mdel { opacity: .6; } }
.mdel[data-armed] { color: var(--danger); }
.day-sep { text-align: center; margin: 14px 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.composer { position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: var(--paper); border-top: 1px solid var(--line); z-index: 4; }
.composer textarea { margin: 0; resize: none; min-height: 46px; max-height: 140px; }
.composer .btn { padding: 12px 16px; }
.composer.ro { justify-content: center; font-size: 14px; color: var(--muted); padding: 16px; }
.gift .kind { margin-left: auto; }
.gift p { margin: 8px 0 0; }
.goals .goal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; }
.goals .goal.on { border-color: var(--navy); }
.goals .goal .check { margin: 0; flex: none; width: 42%; font-size: 15px; }
.goals .goal-in { flex: 1; margin: 0; padding: 9px 10px; font-size: 15px; min-width: 0; }
.goals .goal:not(.on) .goal-in { opacity: .55; }
.err-note { color: var(--danger); font-size: 14px; font-weight: 600; margin: 4px 0 0; }

/* agreement */
.agree-banner { background: var(--navy); color: #fff; border-radius: var(--r); padding: 16px 18px; font-weight: 700; font-size: 16px; line-height: 1.4; margin-bottom: 20px; border-left: 6px solid var(--red); }
.agree-doc { max-height: 46vh; overflow-y: auto; font-family: var(--serif); font-size: 14px; line-height: 1.55; }
.agree-doc h3 { font-family: var(--sans); font-size: 17px; }
.agree-doc h4 { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; margin: 16px 0 6px; }
.agree-doc p { margin: 0 0 8px; }
.sig { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; }
.sig canvas { display: block; width: 100%; height: 160px; touch-action: none; border-radius: 12px; }
.sig-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.linkbtn.left { margin: 6px 0 0; }
.list.flat { padding: 0; }

/* admin */
.kpis.k3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis.k3 > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.kpis.k3 b { font-size: 20px; }
.kpis.k3 small { display: block; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.funnel { display: grid; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 118px 1fr 34px; align-items: center; gap: 10px; font-size: 13.5px; }
.funnel-row b { text-align: right; }
.funnel-bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.person { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.person .bn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .kind { flex: none; }
#q { margin: 0 0 4px; }
.fine { font-size: 12px; line-height: 1.45; color: var(--muted); margin: -10px 0 18px; }
.pill.req { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #fbe3e7; color: var(--danger); }
.card.earn.required { border: 1.5px solid var(--navy); }
.why h3 { margin-bottom: 4px; }
.why ul { margin: 8px 0 0; padding-left: 18px; }
.why li { margin-bottom: 8px; font-size: 15px; }
.why { margin-bottom: 14px; }
.notice.foam { background: #eef3fb; border-color: #c9d6ea; } .notice.foam strong { color: var(--navy); } .notice.foam .small { display: block; margin-top: 8px; }
.top-me { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 12px; text-decoration: none; }
.top-me.on { box-shadow: 0 0 0 3px var(--red); }

/* points */
.pts-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.pts-row + .pts-row { border-top: 1px solid var(--line); }
.pts-row span { display: flex; flex-direction: column; font-size: 14px; }
.pts-row small { color: var(--muted); font-size: 12.5px; }
.pts-n { flex: none; width: 46px; text-align: center; font-size: 15px; color: #8a6d0f; background: #f7efd3; border-radius: 10px; padding: 6px 0; }
.pchip { display: inline-block; padding: 6px 10px; border-radius: 99px; background: #f7efd3; color: #6b5409; font-size: 13px; }
.my-pts .big-pts { margin-left: auto; font-size: 26px; font-weight: 800; color: var(--navy); }
.my-pts .chips { margin-top: 10px; }
.how summary { cursor: pointer; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how[open] summary { margin-bottom: 8px; }
.how { margin: 18px 0 14px; }
.pts-strip b { color: #8a6d0f !important; }
.review-card { margin-bottom: 4px; }
.review-card small:last-of-type { color: #c7d2e3; }
.deal { display: block; text-decoration: none; color: var(--ink); }
.deal small { display: block; margin-top: 4px; }

/* celebration */
.cele { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(11, 31, 58, 0); transition: background .3s; }
.cele.in { background: rgba(11, 31, 58, .72); }
.cele.out { opacity: 0; transition: opacity .3s; }
.cele-card { position: relative; z-index: 2; width: 100%; max-width: 360px; background: #fff; border-radius: 22px; padding: 26px 20px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); transform: scale(.85) translateY(20px); opacity: 0; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .3s; }
.cele.in .cele-card { transform: none; opacity: 1; }
.cele-plus { font-size: 64px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(180deg, #e8c766, #b88a12); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop .7s cubic-bezier(.2,1.6,.4,1) both .15s; }
@keyframes pop { 0% { transform: scale(.2) translateY(30px); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.cele-total { margin: 10px 0 16px; display: flex; flex-direction: column; }
.cele-total b { font-size: 40px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.cele-total span { font-size: 13px; color: var(--muted); }
.cele-board { display: grid; gap: 6px; text-align: left; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s, max-height .4s; }
.cele-board.show { opacity: 1; max-height: 420px; overflow: visible; }
.cele-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f6f4ef; transition: transform .9s cubic-bezier(.3,1.25,.4,1); position: relative; }
.cele-row .rk { width: 26px; text-align: center; font-weight: 700; color: var(--muted); }
.cele-row b { flex: 1; font-size: 15px; }
.cele-row .cp { font-weight: 800; font-variant-numeric: tabular-nums; }
.cele-row.me { background: var(--navy); color: #fff; z-index: 2; box-shadow: 0 6px 18px rgba(11,31,58,.35); }
.cele-row.me .rk { color: #ffd0d6; }
.cele-row.me .av { background: var(--red); color: #fff; }
.cele-row.pulse { animation: glow 1.4s ease-out .6s; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,.8); } 100% { box-shadow: 0 0 0 16px rgba(201,162,39,0); } }
.cele-rank { margin: 14px 0; font-size: 15px; min-height: 22px; }
.confetti { position: absolute; left: 50%; top: 42%; z-index: 3; pointer-events: none; }
.confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; }
.cele.in .confetti i { animation: burst var(--d) cubic-bezier(.1,.8,.3,1) forwards .2s; }
@keyframes burst { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 380px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cele-card, .cele-row, .cele-plus, .confetti i { animation: none !important; transition: none !important; } }

/* welcome tour */
.welcome { min-height: 100vh; display: flex; flex-direction: column; padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(140% 70% at 100% 0, var(--navy-2), var(--navy)); color: #fff; }
.w-top { display: flex; align-items: center; gap: 12px; }
.w-dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
.w-dots i { width: 22px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.25); }
.w-dots i.done { background: rgba(255,255,255,.6); } .w-dots i.on { background: var(--red); }
.w-skip { background: none; border: 0; color: #c7d2e3; font: 600 14px var(--sans); width: 44px; cursor: pointer; }
.w-slide { flex: 1; padding: 28px 0 20px; animation: slidein .45s ease both; }
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.w-slide h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.w-slide p, .w-slide li { color: #dfe6f1; font-size: 16px; }
.w-slide .lede { font-size: 18px; color: #fff; }
.w-slide .card { color: var(--ink); }
.w-slide .card p, .w-slide .card li { color: var(--ink); }
.w-slide .card small, .w-slide .card .muted { color: var(--muted); }
.w-slide .status { color: var(--ink); }
.w-slide label { color: var(--ink); }
.coach { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.coach .av { background: var(--red); color: #fff; }
.coach b { font-size: 18px; }
.coach p { margin: 2px 0 0; font-size: 14.5px; }
.medals { display: flex; gap: 10px; justify-content: center; margin: 4px 0 16px; }
.medals .medal { width: 54px; height: 54px; font-size: 20px; }
.w-nav { display: flex; gap: 10px; }
.w-nav .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); }

/* Connected accounts */
.btn.sm { padding: 8px 12px; font-size: 14px; border-radius: 10px; flex-shrink: 0; }
.conns { gap: 10px; }
.conn-h { display: flex; align-items: center; gap: 12px; }
.conn-h > div { flex: 1; min-width: 0; }
.conn-h small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.pill.soon { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #eef0f4; color: var(--muted); flex-shrink: 0; }
.warn { color: var(--danger); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.stat-grid > div { background: #f6f7f9; border-radius: 10px; padding: 8px 10px; }
.stat-grid b { display: block; font-size: 17px; }
.stat-grid small { color: var(--muted); font-size: 12px; }
.legal-links { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
.legal-links a { color: var(--muted); }

/* =====================================================================
   Paragons brand layer (2026-11-14). Tokens from the American Paragons
   design system in Claude Design: navy field, cream type, gold as the one
   accent, Cinzel display, Jost text, IBM Plex Mono numerals, architectural
   radii, no bounce. Overrides the earlier look above; keep it last.
   ===================================================================== */
:root {
  --navy-900: #04021A; --navy-800: #0A0821; --navy-700: #131233; --navy-600: #1E1D45; --navy-500: #2B2A5C; --navy-200: #8785B0;
  --gold-700: #8F6A15; --gold-600: #B98F24; --gold-500: #DCB034; --gold-400: #E8C55C; --gold-300: #F0D68C; --gold-100: #F8ECC6;
  --cream-500: #F1E7CF; --cream-300: #F7F0E1;
  --ink-900: #14121F; --ink-700: #35334A; --ink-500: #5C5A72;
  --danger: #A63A31; --danger-soft: #F6E3E1; --success-soft: #E2F0E9; --info: #3E5C9A; --info-soft: #E5EAF5;
  --gild: linear-gradient(100deg, #B98F24 0%, #E8C55C 28%, #F8ECC6 46%, #DCB034 62%, #8F6A15 100%);
  --silverleaf: linear-gradient(100deg, #8B93A0 0%, #D3D8DF 34%, #FFFFFF 48%, #B9BFC9 64%, #6E7683 100%);
  --bronzeleaf: linear-gradient(100deg, #7A4718 0%, #CE8F52 34%, #EBD3B9 48%, #B87333 64%, #7A4718 100%);
  --shadow-sm: 0 2px 6px rgba(4,2,26,.08); --shadow-md: 0 6px 20px rgba(4,2,26,.10);
  --focus-ring: 0 0 0 3px rgba(220,176,52,.45);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* remap the app's original names onto the brand */
  --navy: var(--navy-900); --navy-2: var(--navy-700);
  --red: var(--gold-500);           /* accent */
  --paper: #FCFAF4; --card: #fff;
  --ink: var(--ink-900); --muted: var(--ink-500); --line: rgba(20,18,31,.12);
  --gold: var(--gold-500); --silver: #B9BFC9; --bronze: #B87333;
  --ok: #2E7D5B; --warn: var(--gold-700); --green: #2E7D5B; --blue: var(--info);
  --r: 8px;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --serif: "Jost", "Futura", system-ui, sans-serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}
html, body { font-family: var(--sans); line-height: 1.6; }
::selection { background: var(--gold-300); color: var(--ink-900); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a { color: var(--navy-600); text-underline-offset: 3px; }

/* type */
h1, h2, .hello, .hero-step, .login-brand h1, .w-slide h1, .cal-h h2, .prof h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: .02em; text-wrap: balance;
}
h2 { font-size: 25px; }
h3 { font-weight: 600; }
.hello { font-size: 27px; font-weight: 600; letter-spacing: .02em; }
.eyebrow { font-weight: 600; letter-spacing: .24em; font-size: 11px; color: var(--gold-700); }
.eyebrow.light { color: var(--gold-400); }
.section { font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--ink-500); margin-top: 32px; }
.section::before { content: ""; display: block; width: 48px; height: 3px; background: var(--gold-500); border-radius: 1px; margin-bottom: 12px; }
.lesson { font: 300 18px/1.7 var(--sans); color: var(--ink-900); }
.lesson .lede { font-weight: 300; font-size: 20px; color: var(--ink-700); }
.lesson h3 { font: 600 18px var(--sans); }
.lesson strong, .lesson b { font-weight: 600; }
.quiz .q { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .02em; line-height: 1.35; }
.score, .cele-plus, .cele-total b, .big-pts, .kpis b, .stat-grid b, .bg, .pg, .rg b, .cp, .pts-n, .rk, .earn-code b, .ev-date b, .funnel-row b, .hero-meta b {
  font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.score { font-size: 60px; }
.agree-doc { font-family: var(--sans); font-weight: 400; }

/* chrome */
.top { background: var(--navy-900); color: var(--cream-500); border-bottom: 1px solid var(--navy-500); }
.top-title { font-family: var(--display); font-weight: 600; letter-spacing: .04em; font-size: 15px; }
.back { color: var(--cream-500); }
.mark { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-900); color: var(--gold-400); border: 1px solid var(--gold-600); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.mark.big { width: 64px; height: 64px; border-radius: 50%; font-size: 20px; border-width: 1.5px; }
.top-me { background: var(--cream-500); color: var(--navy-900); font-family: var(--sans); font-weight: 600; }
.top-me.on { box-shadow: 0 0 0 2px var(--gold-500); }
.top-act { background: var(--gold-500); color: var(--ink-900); border-radius: var(--r-pill, 999px); font-weight: 600; }
.tabs { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(4,2,26,.04); }
.tabs a { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); gap: 4px; }
.tabs a.on { color: var(--navy-900); }
.tabs a.on .ico { color: var(--gold-600); }

/* forms */
label, legend { font-weight: 500; }
input, textarea, select { border: 1px solid var(--line); border-radius: 4px; font-family: var(--sans); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
input:focus, textarea:focus, select:focus { border-color: var(--gold-500); box-shadow: var(--focus-ring); }
textarea.err { border-color: var(--danger); }
.chip span { border: 1px solid var(--line); font-weight: 500; transition: border-color .2s var(--ease); }
.chip span:hover { border-color: var(--gold-500); }
.chip input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream-500); }
.check input, .checklist input { accent-color: var(--navy-900); }

/* buttons: gold primary, ink text; hover changes color, press drops 1px */
.btn { border-radius: 4px; border-width: 1px; font-weight: 500; letter-spacing: .02em; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.btn.primary:hover:not(:disabled) { background: var(--gold-600); border-color: var(--gold-600); }
.btn.primary:disabled { opacity: .45; }
.btn.outline { border-color: rgba(20,18,31,.32); color: var(--ink-900); background: transparent; }
.btn.outline:hover { border-color: var(--gold-500); color: var(--gold-700); }
.btn.ghost { border-color: var(--line); color: var(--ink-700); }
.btn.ghost:hover { border-color: var(--gold-500); color: var(--gold-700); }
.btn.light { background: transparent; color: var(--cream-500); border-color: rgba(241,231,207,.28); }
.btn.light:hover { border-color: var(--gold-500); color: var(--gold-400); }
.btn.sm { border-radius: 4px; }
.linkbtn { color: var(--navy-600); }

/* cards and surfaces */
.card, .tile, .pick-body, .stat-strip, .board li, .kpis > div, .kpis.k3 > div, .goals .goal, .opt, .cal, .upload, .sig { border-radius: var(--r); border-color: var(--line); }
.card { box-shadow: var(--shadow-sm); }
.tile { box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.tile:hover, a.card:hover { box-shadow: var(--shadow-md); border-color: rgba(20,18,31,.32); }
.tile-f { color: var(--gold-700); font-weight: 600; letter-spacing: .04em; }
.pick-body { border-width: 1px; }
.pick-body em { color: var(--gold-700); letter-spacing: .16em; font-weight: 600; }
.pick-card input:checked + .pick-body { border-color: var(--navy-900); box-shadow: 0 0 0 1px var(--navy-900), var(--shadow-sm); }
.pick-card input:checked + .pick-body b::after { color: var(--gold-600); }
.track-card, .agree-banner { background: var(--navy-900); border-color: var(--navy-500); color: var(--cream-500); }
.track-card small, .review-card small:last-of-type { color: var(--navy-200); }
.agree-banner { border-left: 0; border-top: 3px solid var(--gold-500); font-weight: 500; }
.seg { background: var(--cream-300); border-radius: 6px; }
.seg button { border-radius: 4px; font-weight: 500; }
.seg button.on { color: var(--navy-900); box-shadow: var(--shadow-sm); }
.callout { background: var(--cream-300); border-left: 3px solid var(--gold-500); border-radius: 0 4px 4px 0; }
.notice { border-radius: var(--r); background: var(--gold-100); border-color: var(--gold-300); }
.notice strong { color: var(--gold-700); }
.notice.info, .notice.foam { background: var(--info-soft); border-color: #C9D3E8; }
.notice.info strong, .notice.foam strong { color: var(--navy-600); }

/* home hero: navy field with a gold rule, no decorative ring */
.hero { border-radius: var(--r); background: var(--navy-900); border: 1px solid var(--navy-500); color: var(--cream-500); padding: 24px 22px 22px; }
.hero::before { content: ""; display: block; width: 48px; height: 3px; background: var(--gild); border-radius: 1px; margin-bottom: 14px; }
.hero::after { display: none; }
.hero-mod, .hero-meta { color: var(--navy-200); }
.hero-step { font-size: 32px; color: var(--cream-500); }
.hero:hover { border-color: var(--gold-500); }

/* learning path */
.dot { border-width: 1px; font-family: var(--mono); font-weight: 500; }
.dot.current { border-color: var(--gold-500); color: var(--gold-700); box-shadow: 0 0 0 4px rgba(220,176,52,.18); }
.dot.done { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream-500); }
.dot.approved { background: var(--gild); border-color: var(--gold-600); color: var(--ink-900); }
.dot.redo { background: var(--gold-700); border-color: var(--gold-700); }
.steps > * { border-width: 1px; font-weight: 500; }
.steps .on { border-color: var(--navy-900); color: var(--navy-900); }
.bar i, .qbar i.now { background: var(--gold-500); }
.qbar i.past, .funnel-bar i { background: var(--navy-900); }
.opt { border-width: 1px; transition: border-color .2s var(--ease); }
.opt:not(:disabled):hover { border-color: var(--gold-500); }
.opt.right, .feedback.ok { background: var(--success-soft); }
.opt.wrong, .feedback.no { background: var(--danger-soft); }
.feedback { border-radius: var(--r); }
.status { border-radius: var(--r); }
.status.review { background: var(--info-soft); } .status.approved { background: var(--gold-100); }
.upload { border: 1px dashed rgba(20,18,31,.32); }
.upload:hover { border-color: var(--gold-500); }
.up-ico { background: var(--navy-900); color: var(--gold-400); }

/* medals: leafed metal, flat ring, mono numerals */
.medal, .medal-pop { border: 1px solid rgba(4,2,26,.18); color: var(--ink-900); font-family: var(--mono); font-weight: 600; box-shadow: var(--shadow-sm); }
.medal.gold, .medal-pop { background: var(--gild); }
.medal.silver { background: var(--silverleaf); }
.medal.bronze { background: var(--bronzeleaf); color: #2A1608; }
.block { background: var(--navy-900); border-radius: 4px 4px 0 0; border-top: 3px solid var(--navy-500); }
.p1 .block { border-top-color: var(--gold-500); } .p2 .block { border-top-color: var(--silver); } .p3 .block { border-top-color: var(--bronze); }
.pod.me .pn::after { color: var(--gold-700); }
.board li.me { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
.pod .pg, .bg, .rg b, .stat-strip b { color: var(--navy-900); }
.av { background: var(--cream-300); color: var(--navy-900); font-weight: 600; }
.pts-n, .pchip { background: var(--gold-100); color: var(--gold-700); border-radius: 4px; }
.pts-strip b { color: var(--gold-700) !important; }
.my-pts .big-pts { color: var(--navy-900); }

/* calendar, chat, pills */
.cal-nav { color: var(--navy-900); }
.cd { border-radius: 4px; font-family: var(--mono); font-weight: 500; }
.cd.today span { color: var(--gold-700); font-weight: 600; }
.cd.sel { background: var(--navy-900); }
.ev-date { border-radius: 4px; background: var(--navy-900); color: var(--cream-500); }
.ev-date.red, em.red { background: var(--gold-500); color: var(--ink-900); }
.kind, .pill.ok, .pill.req, .pill.soon { letter-spacing: .12em; font-weight: 600; font-size: 10.5px; text-transform: uppercase; }
.kind.red { background: var(--gold-100); color: var(--gold-700); }
.kind.gold { background: var(--gold-100); color: var(--gold-700); }
.pill.req { background: var(--danger-soft); }
.pill.ok { background: var(--success-soft); }
.card.earn.required { border: 1px solid var(--navy-900); }
.room-ico { background: var(--navy-900); color: var(--gold-400); border-radius: 4px; }
.udot { background: var(--gold-500); }
.badge { background: var(--navy-900); color: var(--gold-400); border-radius: 2px; letter-spacing: .12em; }
.toast { background: var(--navy-900); color: var(--cream-500); border-radius: 4px; border-top: 2px solid var(--gold-500); }
.loading span { border-top-color: var(--gold-500); }
.stat-grid > div { background: var(--cream-300); border-radius: 4px; }
.coach { border-radius: var(--r); background: rgba(241,231,207,.05); border-color: var(--navy-500); }
.coach .av, .cele-row.me .av { background: var(--gold-500); color: var(--ink-900); }

/* sign-in: navy field band, cream wordmark */
.login { background: linear-gradient(180deg, var(--navy-900) 0 320px, var(--paper) 320px); }
.login-brand { color: var(--cream-500); }
.login-brand h1 { font-size: 30px; font-weight: 600; margin-top: 16px; }
.login-brand h1::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; background: var(--gild); border-radius: 1px; }
.login-brand p { color: var(--navy-200); font-weight: 300; }

/* welcome tour + celebration: navy field, measured motion */
.welcome { background: var(--navy-900); color: var(--cream-500); }
.w-slide h1 { font-size: 30px; font-weight: 600; color: var(--cream-500); }
.w-slide p, .w-slide li { color: #D8D3E6; }
.w-slide .lede { color: var(--cream-500); font-weight: 300; }
.w-dots i.on { background: var(--gold-500); }
.w-skip { color: var(--navy-200); }
.w-nav .btn.ghost { color: var(--cream-500); border-color: rgba(241,231,207,.28); }
.cele.in { background: rgba(4,2,26,.78); }
.cele-card { border-radius: var(--r); border-top: 3px solid var(--gold-500); transition: transform .42s var(--ease), opacity .3s var(--ease); transform: translateY(8px); }
.cele-plus { background: var(--gild); -webkit-background-clip: text; background-clip: text; font-weight: 600; animation: rise .42s var(--ease) both .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cele-row { border-radius: 4px; background: var(--cream-300); transition: transform .8s var(--ease); }
.cele-row.me { background: var(--navy-900); color: var(--cream-500); }
.cele-row.me .rk { color: var(--gold-400); }
.w-slide { animation: rise .42s var(--ease) both; }

/* line icons + rank discs */
svg.i { display: block; flex: none; }
.tabs a .ico { display: grid; place-items: center; height: 22px; }
.pick-ico { color: var(--navy-900); display: inline-flex; }
.track-card .pick-ico { color: var(--gold-400); }
.up-ico svg.i, .room-ico svg.i { color: inherit; }
.rmk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 600 11px/1 var(--mono); font-style: normal; color: var(--ink-900); border: 1px solid rgba(4,2,26,.18); vertical-align: -4px; margin-right: 4px; }
.rmk.gold { background: var(--gild); } .rmk.silver { background: var(--silverleaf); } .rmk.bronze { background: var(--bronzeleaf); color: #2A1608; }
.cele-row .rk .rmk { margin: 0; }

/* Logo (added 2026-11-14 with Phil's OK): laurel mark in the bar, full lockup on sign-in. */
img.mark { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: var(--navy-900); object-fit: cover; display: block; }
.lockup { display: block; width: min(260px, 72%); height: auto; margin: 0 auto 4px; }
.login-brand h1 { font-size: 22px; margin-top: 18px; letter-spacing: .08em; }