:root{
  --orange:#FF6B3D; --orange-dark:#F2542D;
  --ink:#1b2030; --ink-2:#3f4658; --muted:#8b91a1;
  --line:#e5e7eb; --bg:#ffffff; --soft:#f6f7f9;
  --yellow:#F5A623; --teal:#12B5A6; --teal-dark:#0E9488; --green:#22B07D;
  --radius:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --shadow-md:0 10px 28px rgba(16,24,40,.10);
  --side-w:236px; --right-w:340px; --maxw:1320px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;
  border:none;cursor:pointer;border-radius:999px;padding:14px 30px;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 18px rgba(255,107,61,.30);}
.btn-primary:hover{background:var(--orange-dark);}
.btn-primary:disabled{opacity:.6;}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn.sm{padding:10px 18px;font-size:14px;}

.app-logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:linear-gradient(150deg,var(--orange),#FF9166);color:#fff;font-weight:800;font-size:17px;}
.app-logo.sm{width:22px;height:22px;font-size:13px;border-radius:6px;}
.app-logo.big{width:56px;height:56px;font-size:30px;border-radius:16px;}
img.app-logo{background:none;object-fit:cover;}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);}

/* boot / loaders */
.boot{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;padding:32px;color:var(--ink-2);}
.boot h2{color:var(--ink);font-size:22px;}
.boot code{background:var(--soft);padding:2px 6px;border-radius:6px;font-size:13px;}
.boot .btn{width:auto;}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;}
.spinner.big{width:40px;height:40px;border-width:4px;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading{color:var(--muted);text-align:center;padding:18px;}
.empty{color:var(--muted);font-size:14px;padding:6px 0;}

/* ============ dashboard layout ============ */
.hl{max-width:var(--maxw);margin:0 auto;min-height:100vh;min-height:100dvh;display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "side body" "foot foot";
  column-gap:36px;padding:0 28px 48px;}

/* cross-property footer (Learn / EveryMemory / Get the app) */
.hl-eco{grid-area:foot;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px;}
.hl-eco-inner{display:flex;flex-wrap:wrap;gap:54px;}
.hl-eco-group{display:flex;flex-direction:column;gap:9px;}
.hl-eco-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);}
.hl-eco-group a{font-size:14px;font-weight:600;color:var(--ink-2);}
.hl-eco-group a:hover{color:var(--orange);}
.hl-eco-note{max-width:280px;font-size:13px;line-height:1.6;color:var(--muted);}

.hl-top{grid-area:top;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-bottom:26px;}
.hl-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink);}
.hl-top-right{display:flex;align-items:center;gap:18px;}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink-2);}
.chip svg{width:18px;height:18px;}
.hl-user{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;border-radius:22px;padding:3px 3px 3px 10px;transition:background .15s ease;}
.hl-user:hover{background:rgba(0,0,0,.05);}
.hl-name{font-weight:700;font-size:14px;color:var(--ink);}
.hl-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,#5B8DEF,#12B5A6);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;}

.hl-side{grid-area:side;position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:4px;}
.nav-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;
  color:var(--muted);font-weight:700;font-size:15px;}
.nav-item svg{width:20px;height:20px;}
.nav-item:hover{background:var(--soft);color:var(--ink-2);}
.nav-item.is-active{color:var(--orange);}

.hl-body{grid-area:body;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:36px;align-items:start;}
.hl-body.has-right{grid-template-columns:minmax(0,1fr) var(--right-w);}
.hl-main{min-width:0;display:flex;flex-direction:column;gap:18px;}
.hl-right{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:18px;}
.hl-foot{margin-top:12px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;}
.hl-foot a:hover{color:var(--orange);}

/* ============ today card ============ */
.today-card{padding:26px;}
.today-top{display:flex;gap:26px;align-items:flex-start;}
.ring.big{--p:0;width:116px;height:116px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--orange) calc(var(--p)*360deg),#E9ECF1 0);}
.ring.big .ring-core{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#FF7A45,#FF6B3D);box-shadow:0 0 0 8px #fff;}
.ring.big .ring-core svg{width:44px;height:44px;}
.today-meta{flex:1;min-width:0;}
.day-tag{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px;}
.today-meta h2{font-size:26px;letter-spacing:-.5px;font-weight:800;color:var(--ink);}
.today-meta p{color:var(--ink-2);margin:8px 0 18px;font-size:15px;max-width:470px;}

.ex-head{margin:26px 0 14px;font-size:20px;font-weight:800;color:var(--ink);}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;}
.ex{display:flex;align-items:center;gap:11px;background:none;border:none;padding:8px;border-radius:12px;text-align:left;}
.ex:hover{background:var(--soft);}
.ex.is-locked{cursor:default;}
.ex-text{display:flex;flex-direction:column;min-width:0;}
.ex-text b{font-size:14px;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ex-text small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.ex.is-locked .ex-text b{color:var(--ink-2);}
.ex-state{margin-left:auto;}
.ex-state svg{width:18px;height:18px;}

/* round category icon */
.gicon{position:relative;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--c);box-shadow:0 3px 8px rgba(16,24,40,.16);}
.gicon.is-locked{background:#c2c8d2;box-shadow:none;}
.gicon-lock{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;
  background:#8b91a1;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;}

/* feedback + promo */
.feedback-label{color:var(--orange);font-weight:700;font-size:18px;margin-top:6px;}
.promo{position:relative;border-radius:16px;padding:22px 24px;
  background:linear-gradient(120deg,#E6F7F0,#E3F0FB);border:1px solid #d6ebe4;}
.promo-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;
  background:rgba(255,255,255,.55);border-radius:50%;color:var(--ink-2);display:grid;place-items:center;}
.promo-close svg{width:15px;height:15px;}
.promo-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--ink);margin-bottom:8px;}
.promo-tag{background:var(--teal);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;letter-spacing:.5px;text-transform:uppercase;}
.promo p{color:var(--ink-2);font-size:14px;max-width:540px;}
.promo-link{display:inline-block;margin-top:10px;color:var(--teal-dark);font-weight:700;font-size:14px;}

/* more workouts */
.more{margin-top:4px;}
.more-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.more-head h3{font-size:22px;font-weight:800;color:var(--ink);}
.unlock{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:none;
  font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;}
.unlock svg{width:14px;height:14px;}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.more-tile{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px;text-align:left;box-shadow:var(--shadow-sm);}
.more-tile:hover{box-shadow:var(--shadow-md);}
.more-text b{display:block;font-size:15px;color:var(--ink);font-weight:700;}
.more-text small{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;}

/* right column cards */
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-title{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;color:var(--ink);}
.card-title svg{width:18px;height:18px;}
.card-arrow{color:var(--muted);font-size:22px;font-weight:700;line-height:1;}

.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:10px;}
.cal-dow span{text-align:center;font-size:12px;color:var(--muted);font-weight:700;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px 6px;justify-items:center;}
.cal-cell{width:18px;height:18px;border-radius:50%;background:#EAECEF;}
.cal-cell.future{background:#F2F3F5;}
.cal-cell.partial{background:#FFD9C9;}
.cal-cell.done{background:#C2C8D2;}
.cal-cell.today{background:var(--orange);}
.hist-streak{display:flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;color:var(--ink-2);}
.hist-streak svg{width:18px;height:18px;}
.hist-streak b{color:var(--ink);}

.emi-overall{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.emi-hint{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5;}
.emi-list{display:flex;flex-direction:column;gap:15px;}
.emi-row{display:grid;grid-template-columns:1fr auto;row-gap:6px;align-items:center;}
.emi-label{grid-column:1;grid-row:1;font-size:14px;font-weight:700;color:var(--ink);}
.emi-note{font-size:11px;color:var(--muted);font-weight:500;}
.emi-score{grid-column:2;grid-row:1;text-align:right;font-weight:700;font-size:14px;color:var(--ink);}
.emi-score.muted{color:var(--muted);}
.emi-bar{grid-column:1 / -1;grid-row:2;height:8px;border-radius:6px;background:#EEF0F3;overflow:hidden;}
.emi-bar span{display:block;height:100%;background:var(--yellow);border-radius:6px;}
.emi-soon{display:none;}

/* generic page heads (games/progress/tests/settings) */
.page-head h1{font-size:28px;font-weight:800;letter-spacing:-.5px;color:var(--ink);}
.page-head h2{font-size:20px;font-weight:800;color:var(--ink);}
.page-head p{color:var(--ink-2);margin-top:4px;}
.page-head.sub{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}

/* category filter chips (games view) */
.cat-chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px;}
.cat-chip{font-size:14px;font-weight:700;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:9px 18px;min-height:42px;transition:border-color .15s,color .15s,background .15s,box-shadow .15s;}
.cat-chip:hover{border-color:var(--chip,var(--ink));color:var(--ink);}
.cat-chip.is-on{background:var(--chip,var(--ink));border-color:var(--chip,var(--ink));color:#fff;
  box-shadow:0 4px 12px rgba(16,24,40,.14);}
.cat-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,107,61,.32);}

/* play cards (games view) */
.play-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.play-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:18px;text-align:left;box-shadow:var(--shadow-sm);width:100%;
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;}
.play-card:hover{box-shadow:var(--shadow-md);border-color:#dcdfe6;transform:translateY(-2px);}
.play-card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,107,61,.32);}
.play-card.is-locked{cursor:pointer;opacity:.96;}
.play-card.is-locked:hover{transform:none;box-shadow:var(--shadow-sm);}
.pc-body{flex:1;min-width:0;}
.pc-skill{font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;color:var(--teal-dark);}
.pc-body h3{font-size:18px;font-weight:800;color:var(--ink);margin-top:3px;}
.pc-body p{font-size:13.5px;color:var(--ink-2);margin-top:5px;line-height:1.5;}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:10px;}
.pc-best{font-size:12.5px;color:var(--muted);font-weight:600;}
.pc-best b{color:var(--ink);font-weight:800;}
.pc-best.is-new{background:#e6f7f3;color:var(--teal-dark);font-weight:800;padding:3px 10px;border-radius:999px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;}
.pc-play{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:var(--orange);}
.pc-play svg{width:15px;height:15px;}
.play-card:hover .pc-play{color:var(--orange-dark);}
.play-empty{color:var(--muted);font-size:14px;padding:18px 2px;}
.play-sub-note{color:var(--muted);font-size:13px;margin:-2px 0 14px;}

/* tests */
.test-card{display:flex;gap:18px;align-items:center;}
.test-card.muted{opacity:.7;}
.test-body h3{font-size:18px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;}
.test-body p{color:var(--ink-2);font-size:14px;margin:6px 0 12px;max-width:480px;}
.soon-tag{background:#EEF0F3;color:var(--muted);font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;}

/* progress recent list */
.res-list{list-style:none;display:flex;flex-direction:column;gap:2px;}
.res-list li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;}
.res-list li:last-child{border-bottom:none;}
.rl-name{font-weight:700;flex:none;min-width:96px;}
.rl-score{flex:1;color:var(--ink-2);}
.rl-ago{color:var(--muted);font-size:12px;}

/* settings */
.kicker{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--orange);margin-bottom:10px;}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:12px;}
.field input{padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:16px;color:var(--ink);}
.field input:focus{outline:none;border-color:var(--orange);}
.muted-row{color:var(--ink-2);font-size:14px;margin-bottom:12px;}
.muted-row.tiny{font-size:12px;color:var(--muted);}
.badge{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;}
.badge.ok{background:#E6F7F0;color:var(--teal-dark);}
.link-row{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:15px;}
.link-row:last-child{border-bottom:none;}
.save-note{color:var(--teal-dark);font-weight:700;font-size:13px;margin-left:10px;}
.card .btn.sm{margin-top:4px;margin-right:8px;}

/* settings (reference-style sections) */
.set-section{margin-bottom:6px;}
.set-label{font-size:15px;font-weight:800;color:var(--ink);margin:18px 0 10px;}
.set-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
.set-row{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);}
.set-row:last-child{border-bottom:none;}
.set-row .srl{flex:1;min-width:0;}
.set-row .srl b{display:block;font-size:15px;color:var(--ink);font-weight:700;}
.set-row .srl small{display:block;font-size:13px;color:var(--muted);margin-top:2px;}
.set-info-row{display:flex;flex-direction:column;gap:2px;padding:13px 18px;border-bottom:1px solid var(--line);}
.set-info-row b{font-size:13px;color:var(--ink);font-weight:700;}
.set-info-row span{font-size:15px;color:var(--ink-2);}
.set-action{margin-left:auto;color:var(--orange);font-weight:700;font-size:14px;background:none;border:none;cursor:pointer;white-space:nowrap;}
.set-action:hover{text-decoration:underline;}
.set-danger{color:#E23B2E;}
.set-select{margin-left:auto;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink);background:#fff;}

.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none;margin-left:auto;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch .track{position:absolute;inset:0;background:#d4d8e0;border-radius:999px;transition:background .2s ease;cursor:pointer;}
.switch .track::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease;}
.switch input:checked + .track{background:var(--orange);}
.switch input:checked + .track::before{transform:translateX(20px);}

/* ============ game runner (focused full-screen) ============ */
.play{max-width:620px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;}
.play-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;height:60px;padding:0 14px;border-bottom:1px solid var(--line);}
.play-quit{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  display:grid;place-items:center;transition:border-color .15s,color .15s,background .15s;}
.play-quit svg{width:18px;height:18px;}
.play-quit:hover{border-color:var(--ink);color:var(--ink);background:var(--soft);}
.play-quit:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,107,61,.32);}
.play-title{font-weight:800;font-size:16px;color:var(--ink);text-align:center;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.play-bar-spacer{width:44px;flex:none;}
.play-stage{flex:1;display:flex;flex-direction:column;padding:14px 18px 32px;}

/* intro */
.g-intro{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:380px;width:100%;padding:18px 0;}
.g-intro-icon{margin-bottom:4px;}
.g-intro-icon .gicon{box-shadow:var(--shadow-md);}
.g-intro-skill{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.g-intro h1{font-size:28px;letter-spacing:-.6px;color:var(--ink);}
.g-intro-blurb{color:var(--ink-2);font-size:15px;line-height:1.55;}
.g-intro .btn{margin-top:8px;width:100%;max-width:280px;}
.g-how{width:100%;text-align:left;background:var(--soft);border-radius:var(--radius-lg);padding:18px 20px;margin-top:6px;}
.g-how h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);margin-bottom:10px;}
.g-how-list{margin:0;padding:0;list-style:none;counter-reset:how;display:flex;flex-direction:column;gap:10px;}
.g-how-list li{counter-increment:how;position:relative;padding-left:34px;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.g-how-list li::before{content:counter(how);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:#fff;color:var(--orange);border:1.5px solid var(--line);font-weight:800;font-size:12px;display:grid;place-items:center;}
.g-how p{font-size:14.5px;color:var(--ink-2);line-height:1.5;}

/* loading */
.g-loading{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);}
.g-loading p{font-weight:600;}

/* shared in-game lines (games inject their own boards) */
.g-host{flex:1;display:flex;flex-direction:column;}
.g-status{display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-weight:800;color:var(--ink);font-size:15px;margin-bottom:10px;}
.g-hint{text-align:center;color:var(--ink-2);font-size:15px;line-height:1.5;margin:0 auto 16px;max-width:420px;min-height:22px;}

/* quit confirm */
.g-confirm{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:24px;
  background:rgba(16,24,40,.45);animation:gfade .15s ease;}
.g-confirm-card{background:#fff;border-radius:var(--radius-lg);padding:26px 24px;max-width:340px;width:100%;
  text-align:center;box-shadow:var(--shadow-md);}
.g-confirm-card h2{font-size:20px;letter-spacing:-.3px;color:var(--ink);}
.g-confirm-card p{color:var(--ink-2);font-size:14.5px;margin:8px 0 20px;}
.g-confirm-actions{display:flex;flex-direction:column;gap:10px;}
.g-confirm-actions .btn{width:100%;}
@keyframes gfade{from{opacity:0}to{opacity:1}}
.mx-grid{--n:3;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:10px;max-width:360px;margin:0 auto;width:100%;}
.mx-grid.locked{pointer-events:none;}
.mx-cell{aspect-ratio:1;border:none;border-radius:14px;background:var(--soft);box-shadow:var(--shadow-sm);}
.mx-cell.on{background:linear-gradient(150deg,var(--orange),#FF9166);}
.mx-cell.hit{background:linear-gradient(150deg,var(--teal),#36D6C7);}
.mx-cell.miss{background:#F2C2B5;}
.nc-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;}
.nc-btn{border:none;border-radius:22px;background:#fff;box-shadow:var(--shadow-sm);font-weight:800;color:var(--ink);display:grid;place-items:center;min-height:200px;}
.nc-btn span{font-size:64px;letter-spacing:-2px;}
.nc-btn.hit{background:linear-gradient(150deg,var(--teal),#36D6C7);color:#fff;}
.nc-btn.miss{background:#F2C2B5;}
.fs-rule{text-align:center;font-weight:800;font-size:20px;padding:14px;border-radius:16px;margin-bottom:16px;}
.fs-rule.color{background:rgba(255,107,61,.12);color:var(--orange);}
.fs-rule.shape{background:rgba(18,181,166,.14);color:var(--teal-dark);}
.fs-stim{display:grid;place-items:center;flex:1;}
.fs-shape{width:120px;height:120px;background:var(--orange);box-shadow:var(--shadow-md);transition:border-radius .15s ease,background .15s ease;}
.fs-answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
.fs-btn{border:none;border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);font-weight:700;font-size:18px;padding:20px;color:var(--ink);}
.fs-btn.hit{background:linear-gradient(150deg,var(--teal),#36D6C7);color:#fff;}
.fs-btn.miss{background:#F2C2B5;}
.g-saving{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);}
.g-saving p{font-weight:600;}
.g-result{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:360px;width:100%;padding:18px 0;}
.g-best-badge{align-self:center;background:linear-gradient(135deg,var(--yellow),#FFC65C);color:#fff;font-weight:800;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;padding:6px 16px;border-radius:999px;
  box-shadow:0 6px 16px rgba(245,166,35,.35);margin-bottom:6px;}
.g-result-badge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--c,var(--orange));box-shadow:var(--shadow-md);margin-bottom:6px;}
.g-result-badge svg{width:34px;height:34px;}
.g-result h1{font-size:26px;letter-spacing:-.5px;}
.res-score{font-size:54px;font-weight:800;letter-spacing:-2px;color:var(--orange);line-height:1;margin:6px 0;}
.res-score span{display:block;font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;}
.res-stats{display:flex;gap:12px;width:100%;margin:14px 0;}
.res-stats div{flex:1;background:var(--soft);border-radius:14px;padding:12px;}
.res-stats b{display:block;font-size:18px;font-weight:800;}
.res-stats span{font-size:11px;color:var(--muted);font-weight:600;}
.res-streak{font-weight:700;color:var(--teal-dark);}
.res-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:14px;}
.res-actions .btn{width:100%;}

/* ============ auth ============ */
.auth{min-height:100vh;min-height:100dvh;max-width:440px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:28px;gap:22px;}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;}
.auth-card{width:100%;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-md);}
.auth-card h1{font-size:24px;letter-spacing:-.5px;}
.auth-sub{color:var(--ink-2);margin:6px 0 20px;font-size:15px;}
.auth-card form{display:flex;flex-direction:column;gap:14px;}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);}
.auth-card input{padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;color:var(--ink);}
.auth-card input:focus{outline:none;border-color:var(--orange);}
.auth-card .btn{width:100%;}
.auth-err{background:#FDECE7;color:#C23A1B;font-size:13px;padding:10px 12px;border-radius:10px;font-weight:600;}
.auth-toggle{background:none;border:none;color:var(--ink-2);font-size:14px;margin-top:16px;width:100%;}
.auth-toggle b{color:var(--orange);}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:16px 0;}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ============ responsive ============ */
@media (max-width:1100px){
  :root{--right-w:300px;--side-w:210px;}
  .hl{column-gap:26px;}
}
@media (max-width:980px){
  .hl{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "body" "foot";
    column-gap:0;padding:0 16px 96px;}
  .hl-eco{gap:18px;}
  .hl-eco-inner{gap:36px;}
  .hl-body,.hl-body.has-right{grid-template-columns:minmax(0,1fr);row-gap:18px;}
  .hl-top{margin-bottom:16px;}
  .hl-right{position:static;flex-direction:column;}
  .hl-side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;flex-direction:row;justify-content:space-around;
    gap:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
  .nav-item{flex:1;flex-direction:column;gap:3px;font-size:10px;padding:6px 4px;text-align:center;border-radius:10px;}
  .nav-item svg{width:22px;height:22px;}
  .ex-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .hl-name{display:none;}
  .hl-user{padding:3px;}
  .nav-item span{display:none;}
  .ex-grid{grid-template-columns:1fr;}
  .more-grid{grid-template-columns:1fr;}
  .today-top{flex-direction:column;align-items:flex-start;gap:16px;}
  .ring.big{width:96px;height:96px;}
  .ring.big .ring-core{width:74px;height:74px;}
  .today-meta h2{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* Migrated cabinet: OAuth buttons + login footer (gated member area) */
.btn-oauth { width:100%; justify-content:center; background:#fff; color:#18142B; border:1px solid #e7e3f0; margin-bottom:10px; font-weight:600; }
.btn-oauth:hover { background:#faf9fc; }
.auth-foot { margin-top:16px; font-size:14px; color:#7D7A8C; text-align:center; }
.auth-foot a { color:#E8431B; font-weight:700; }
.auth-legal { margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:13px; }
.auth-legal a { color:#7D7A8C; font-weight:600; text-decoration:none; }
.auth-legal a:hover { color:#E8431B; text-decoration:underline; }

/* ============================================================
   30-day course: hero, calendar widget, day detail, charts
   ============================================================ */
.btn-sm{padding:9px 16px;font-size:14px;border-radius:11px;}
.course-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:80px 0;color:var(--muted);}
.course{max-width:880px;}
.course .kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);}

/* Hero */
.course-hero{display:flex;gap:24px;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#fff,var(--soft));border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);margin-bottom:20px;}
.course-hero-main{flex:1;min-width:0;}
.course-hero h1{font-size:clamp(22px,3vw,30px);letter-spacing:-.5px;margin:8px 0 4px;line-height:1.1;}
.course-sub{color:var(--ink-2);margin:0 0 16px;font-size:15px;}
.course-progress{margin-bottom:16px;}
.course-bar{height:10px;border-radius:999px;background:#eceef3;overflow:hidden;}
.course-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),#FF9166);transition:width .4s;}
.course-progress-row{font-size:13.5px;color:var(--muted);margin-top:8px;}
.course-progress-row b{color:var(--ink);}
.course-ring{position:relative;width:120px;height:120px;flex:none;}
.course-ring svg{width:120px;height:120px;transform:rotate(-90deg);}
.course-ring .ring-bg{fill:none;stroke:#eceef3;stroke-width:10;}
.course-ring .ring-fg{fill:none;stroke:var(--teal);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .5s;}
.course-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.course-ring-label b{font-size:24px;font-weight:800;color:var(--ink);}
.course-ring-label span{font-size:11px;color:var(--muted);}

/* Calendar legend + week blocks */
.cal-legend{display:flex;gap:18px;font-size:13px;color:var(--muted);margin:0 2px 14px;}
.cal-legend i.lg{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-1px;}
.lg-done{background:var(--teal);}
.lg-current{background:var(--orange);}
.lg-locked{background:#dfe3ea;}
.cal-week{margin-bottom:22px;}
.cal-week-head{margin-bottom:12px;}
.cal-week-n{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark);}
.cal-week-head h3{margin:2px 0 2px;font-size:18px;letter-spacing:-.3px;}
.cal-week-head p{margin:0;color:var(--muted);font-size:13.5px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.cal-cell{aspect-ratio:1/1;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .12s,box-shadow .12s,border-color .12s;padding:0;}
.cal-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.cal-num{font-size:18px;font-weight:800;color:var(--ink);line-height:1;}
.cal-d{font-size:10px;color:var(--muted);font-weight:600;}
.cal-cell.st-done{background:var(--teal);border-color:var(--teal);}
.cal-cell.st-done .cal-num,.cal-cell.st-done .cal-d{color:#fff;}
.cal-cell.st-current{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,61,.18);}
.cal-cell.st-current .cal-num{color:var(--orange);}
.cal-cell.st-locked-seq,.cal-cell.st-locked-premium{background:var(--soft);border-color:var(--line);cursor:default;}
.cal-cell.st-locked-seq .cal-num,.cal-cell.st-locked-premium .cal-num{color:var(--muted);font-size:14px;}
.cal-cell.st-locked-seq:hover,.cal-cell.st-locked-premium:hover{transform:none;box-shadow:none;}
.cal-cell.st-future .cal-num{color:#c2c7d2;}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cal-cell.nudge{animation:nudge .3s;}

/* Day detail */
.day-view{max-width:720px;}
.day-back{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:8px;}
.day-back:hover{color:var(--ink);}
.day-hero{margin-bottom:18px;}
.day-hero h1{font-size:clamp(22px,3vw,30px);letter-spacing:-.5px;margin:6px 0;}
.day-complete-chip{display:inline-block;background:#e6f7f3;color:var(--teal-dark);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;}
.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.step-card.is-done{background:linear-gradient(135deg,#fff,#f3fbf9);border-color:#cdeee7;}
.step-head{display:flex;align-items:center;gap:12px;}
.step-ic{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:var(--soft);color:var(--ink-2);font-size:14px;}
.step-card.is-done .step-ic{background:var(--teal);color:#fff;}
.step-head h3{flex:1;margin:0;font-size:16.5px;letter-spacing:-.2px;}
.step-flag{font-size:12.5px;font-weight:700;color:var(--teal-dark);}
.step-body{margin-top:12px;padding-left:42px;}
.lesson-text,.action-text{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin:0 0 14px;}
.step-hint{color:var(--muted);font-size:13.5px;margin:0 0 12px;}
.day-games{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.day-game{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .12s,transform .12s;}
.day-game:hover{border-color:var(--orange);transform:translateX(2px);}
.dg-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--orange),#FF9166);}
.dg-meta{flex:1;display:flex;flex-direction:column;}
.dg-meta b{font-size:15px;}
.dg-meta i{font-style:normal;font-size:12.5px;color:var(--muted);}
.dg-go{color:var(--orange);font-weight:700;font-size:14px;}
.day-done-card{text-align:center;background:linear-gradient(135deg,#fff,#f3fbf9);border:1px solid #cdeee7;
  border-radius:var(--radius-lg);padding:28px;margin-top:8px;}
.day-done-badge{width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;font-size:26px;
  display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 8px 18px rgba(18,181,166,.35);}
.day-done-card h2{margin:0 0 4px;font-size:21px;}
.day-done-card p{margin:0 0 18px;color:var(--ink-2);}
.day-foot-hint{text-align:center;color:var(--muted);font-size:13.5px;margin-top:6px;}
.res-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.day-upsell{text-align:center;padding:40px 24px;}
.day-upsell-badge{width:56px;height:56px;border-radius:16px;background:linear-gradient(150deg,var(--orange),#FF9166);
  color:#fff;font-size:26px;display:grid;place-items:center;margin:0 auto 14px;}
.day-upsell h1{font-size:26px;margin:8px 0;}
.day-upsell p{color:var(--ink-2);max-width:420px;margin:0 auto 20px;}

/* Progress charts (My Brain) */
.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);margin-bottom:18px;}
.chart-card h3{margin:0 0 4px;font-size:17px;letter-spacing:-.2px;}
.chart-card .sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
.bars{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:8px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.bar{width:100%;max-width:42px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--teal),#3fd0c2);min-height:4px;transition:height .5s;}
.bar.empty{background:#eceef3;}
.bar-lab{font-size:11.5px;color:var(--muted);font-weight:600;}
.bar-val{font-size:11px;color:var(--ink-2);font-weight:700;}

@media (max-width:560px){
  .course-hero{flex-direction:column;align-items:flex-start;}
  .course-ring{align-self:center;}
  .cal-grid{gap:7px;}
  .cal-d{display:none;}
  .step-body{padding-left:0;}
  .play-grid{grid-template-columns:1fr;}
  .g-intro h1{font-size:24px;}
  .page-head h1{font-size:24px;}
}

/* ============================================================
   Plan page - production polish (featured card, week progress,
   icon cells, skeleton loaders)
   ============================================================ */
/* Featured "today / continue" card */
.today-card{background:linear-gradient(135deg,#fff,#fff7f3);border:1px solid #ffe2d4;
  border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm);margin-bottom:26px;position:relative;overflow:hidden;}
.today-card::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,61,.12),transparent 70%);pointer-events:none;}
.today-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.theme-chip{font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--teal-dark);background:#e6f7f3;padding:5px 12px;border-radius:999px;}
.day-pill{font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);padding:5px 12px;border-radius:999px;}
.today-card h2{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.4px;margin:0 0 8px;line-height:1.15;}
.today-peek{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 16px;max-width:560px;}
.today-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.tstep{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px;}
.tstep i{width:18px;height:18px;border-radius:50%;background:var(--soft);color:var(--muted);font-style:normal;
  font-size:11px;font-weight:800;display:grid;place-items:center;}
.tstep.is-done{color:var(--teal-dark);border-color:#bfe9e0;background:#f1fbf9;}
.tstep.is-done .cal-ic{width:16px;height:16px;color:var(--teal);}
.today-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.today-time{font-size:13px;color:var(--muted);font-weight:600;}
.today-card.is-finished{background:linear-gradient(135deg,#fff,#f3fbf9);border-color:#cdeee7;}

/* Section head above the calendar */
.cal-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 2px 16px;flex-wrap:wrap;}
.cal-section-head h2{font-size:19px;letter-spacing:-.3px;margin:0;}
.cal-legend{margin:0;}

/* Week head -> row with progress */
.cal-week-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;}
.cal-week-titles{min-width:0;}
.cal-week-prog{flex:none;width:140px;text-align:right;}
.cal-week-count{font-size:12.5px;font-weight:700;color:var(--ink-2);}
.cal-week-bar{height:6px;border-radius:999px;background:#eceef3;overflow:hidden;margin-top:5px;}
.cal-week-bar span{display:block;height:100%;border-radius:999px;background:var(--teal);transition:width .4s;}

/* Calendar cell icons + refined states */
.cal-ic{width:24px;height:24px;}
.cal-cell.st-done{color:#fff;}
.cal-cell.st-current{color:var(--orange);}
.cal-cell.st-locked-premium{color:var(--yellow);}
.cal-cell.st-locked-premium .cal-ic{opacity:.85;}
.cal-cell.st-locked-seq{color:#b6bcc8;}
.cal-cell:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,107,61,.35);}
.cal-cell[aria-disabled="true"]{cursor:default;}

/* Skeleton loaders */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.sk{background:#eef0f4;background-image:linear-gradient(90deg,#eef0f4,#f6f7f9,#eef0f4);background-size:400px 100%;
  animation:shimmer 1.2s infinite linear;border-radius:12px;}
.sk-hero{height:150px;margin-bottom:22px;border-radius:var(--radius-lg);}
.sk-today{height:170px;margin-bottom:26px;border-radius:var(--radius-lg);}
.sk-line{height:42px;width:60%;margin-bottom:12px;}
.sk-cell{aspect-ratio:1/1;border-radius:14px;}
.course-skel .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}

@media (max-width:560px){
  .cal-week-head{flex-direction:column;align-items:stretch;gap:8px;}
  .cal-week-prog{width:auto;text-align:left;}
  .today-card{padding:20px;}
  .cal-ic{width:20px;height:20px;}
}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none;}
  .g-confirm{animation:none;}
  .play-card:hover{transform:none;}
  .spinner,.spinner.big{animation-duration:1.6s;}
}

/* ============================================================
   Achievements page (shared with the iOS app via Firestore)
   ============================================================ */
.ach .kicker { color: var(--orange); }
.ach-hero { display:flex; gap:24px; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#fff,var(--soft)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); margin-bottom:24px; }
.ach-hero-main { flex:1; min-width:0; }
.ach-hero h1 { font-size:clamp(22px,3vw,30px); letter-spacing:-.5px; margin:8px 0 4px; }
.ach-hero-stats { display:flex; gap:26px; margin-top:16px; flex-wrap:wrap; }
.ach-hero-stats div { display:flex; flex-direction:column; }
.ach-hero-stats b { font-size:22px; font-weight:800; color:var(--ink); line-height:1; }
.ach-hero-stats span { font-size:12.5px; color:var(--muted); margin-top:3px; }

.ach-group { margin-bottom:26px; }
.ach-group h2 { font-size:18px; letter-spacing:-.3px; margin:0 0 14px; }
.ach-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ach-card { display:flex; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); align-items:flex-start; transition:box-shadow .18s, transform .18s; }
.ach-card.is-earned:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ach-card.is-locked { background:var(--soft); }
.ach-medal { position:relative; width:62px; height:62px; flex:none; border-radius:50%;
  display:grid; place-items:center; box-shadow:0 8px 18px rgba(16,24,40,.16); }
.ach-card.is-locked .ach-medal { filter:grayscale(.85) opacity(.7); box-shadow:none; }
.ach-ic { font-size:28px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.ach-lvl { position:absolute; bottom:-5px; right:-5px; min-width:22px; height:22px; padding:0 5px;
  border-radius:999px; background:#fff; color:var(--ink); font-size:11px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(16,24,40,.22); border:1.5px solid #fff; }
.ach-lock { position:absolute; bottom:-4px; right:-4px; font-size:13px; }
.ach-body { flex:1; min-width:0; }
.ach-body h3 { font-size:16px; margin:0 0 2px; letter-spacing:-.2px; }
.ach-lvl-tag { font-size:11.5px; font-weight:700; color:var(--teal-dark); background:#e6f7f3;
  padding:2px 8px; border-radius:999px; vertical-align:middle; margin-left:4px; }
.ach-body p { font-size:13px; color:var(--muted); margin:0 0 10px; }
.ach-bar { height:8px; border-radius:999px; background:#eceef3; overflow:hidden; }
.ach-bar span { display:block; height:100%; border-radius:999px; }
.ach-status { font-size:12px; color:var(--ink-2); font-weight:600; margin-top:7px; }

@media (max-width:760px){ .ach-grid { grid-template-columns:1fr; } .ach-hero { flex-direction:column; align-items:flex-start; } .ach-hero .course-ring { align-self:center; } }

/* ============================================================
   Games library - full catalog mirroring the app (28 games)
   ============================================================ */
.play-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.play-card { display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px;
  box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.play-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.play-card.is-soon { cursor:default; background:var(--soft); }
.play-card.is-soon:hover { transform:none; box-shadow:var(--shadow-sm); }
.play-card.is-soon .pc-medal { filter:grayscale(.5) opacity(.8); }
.play-card.nudge { animation:nudge .3s; }
.pc-medal { width:54px; height:54px; flex:none; border-radius:16px; display:grid; place-items:center;
  font-size:26px; box-shadow:0 8px 16px rgba(16,24,40,.16); }
.pc-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.pc-skill { font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.pc-name { font-size:16.5px; font-weight:700; letter-spacing:-.2px; margin:2px 0 3px; }
.pc-blurb { font-size:13px; color:var(--muted); line-height:1.45; }
.pc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.pc-best { font-size:12.5px; font-weight:700; color:var(--ink-2); }
.pc-play { font-size:13.5px; font-weight:800; color:var(--orange); }
.pc-soon { font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:#e9ebf0; padding:3px 10px; border-radius:999px; }
.games-note { text-align:center; color:var(--muted); font-size:13px; margin:22px 0 8px; }

/* Player intro icon as an accent disc with the game's emoji */
.g-intro-icon { width:84px; height:84px; border-radius:24px; display:grid; place-items:center;
  font-size:42px; margin:0 auto 14px; box-shadow:0 12px 26px rgba(16,24,40,.18); }

@media (max-width:760px){ .play-grid { grid-template-columns:1fr; } }

/* ============================================================
   Games section v2 - glyph icons, favorites, working filters
   ============================================================ */
.play-card { position:relative; display:block; padding:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; }
.play-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.pc-open { display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:16px; font:inherit; color:inherit; border-radius:var(--radius-lg); }
.pc-medal { width:54px; height:54px; flex:none; border-radius:16px; display:grid; place-items:center;
  color:#fff; box-shadow:0 8px 16px rgba(16,24,40,.16); }
.pc-medal svg { width:28px; height:28px; display:block; }
.pc-body { flex:1; min-width:0; display:flex; flex-direction:column; padding-right:30px; }
.pc-fav { position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border-radius:50%;
  border:0; background:transparent; color:#c2c7d2; cursor:pointer; display:grid; place-items:center; transition:background .15s, color .15s, transform .1s; }
.pc-fav svg { width:20px; height:20px; }
.pc-fav:hover { background:var(--soft); color:#FF5A6E; }
.pc-fav.on { color:#FF4D6A; }
.pc-fav:active { transform:scale(.88); }

/* Filter chips + favorites count */
.chip-count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px;
  border-radius:999px; background:rgba(16,24,40,.10); color:var(--ink-2); font-size:11px; font-weight:800; vertical-align:1px; }
.cat-chip.is-active .chip-count { background:rgba(255,255,255,.28); color:#fff; }

/* Empty states */
.games-empty { padding:8px 0 24px; }
.empty-card { text-align:center; padding:44px 24px; color:var(--muted); background:var(--soft); border-radius:var(--radius-lg); }
.empty-card .empty-ic { font-size:40px; line-height:1; color:#cfd4de; margin-bottom:8px; }
.empty-card h3 { margin:0 0 4px; color:var(--ink); font-size:17px; }
.empty-card p { margin:0; font-size:14px; }

/* Glyphs in the player intro + day cards render white on the accent */
.g-intro-icon svg { width:44px; height:44px; display:block; }
.dg-ic svg { width:22px; height:22px; display:block; }
.dg-ic { color:#fff; }

/* ============================================================
   Games section v3 - fix [hidden] filtering, brain-gym hero, search
   ============================================================ */
/* Make the hidden attribute actually hide cards (author .play-card{display:block} otherwise wins). */
[hidden] { display: none !important; }

/* Brain-gym hero: frames the whole app as a memory trainer, games as its playful side */
.games-hero { display:flex; gap:24px; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg, #fff, var(--soft)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px 26px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
.games-hero-main { flex:1; min-width:0; }
.games-hero-main h1 { font-size:clamp(22px,3vw,30px); letter-spacing:-.5px; line-height:1.1; margin:8px 0 8px; }
.games-hero-main p { color:var(--ink-2); font-size:15px; line-height:1.6; margin:0 0 16px; max-width:560px; }
.games-hero-cta { display:flex; gap:10px; flex-wrap:wrap; }
.games-hero-areas { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.gha { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--ink-2); }
.gha svg { width:20px; height:20px; color:var(--c); flex:none; }

/* Toolbar: search + filter chips */
.games-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.games-search { position:relative; display:flex; align-items:center; flex:1; min-width:200px; max-width:340px; }
.games-search svg { position:absolute; left:13px; width:18px; height:18px; color:var(--muted); pointer-events:none; }
.games-search input { width:100%; height:44px; padding:0 14px 0 40px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font:inherit; font-size:15px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
.games-search input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,107,61,.15); }
.cat-chips { display:flex; gap:9px; flex-wrap:wrap; flex:1; }

@media (max-width:760px) {
  .games-hero { flex-direction:column; align-items:flex-start; }
  .games-hero-areas { grid-template-columns:1fr 1fr; width:100%; }
  .games-toolbar { flex-direction:column; align-items:stretch; }
  .games-search { max-width:none; }
}

/* ============================================================
   /plan redesign - "the 30-day journey" (namespace .pl-*)
   ============================================================ */
.plan,.brain,.home{ --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --pl-ink:#1b2030; --pl-warm:#FF6B3D; --pl-warm-d:#F2542D; --pl-teal:#17B0A6; --pl-teal-d:#0E8C82;
  max-width:940px; }
.plan h1,.plan h2,.plan h3,.brain h1,.brain h2,.brain h3,.home h1,.home h2,.home h3{ font-family:var(--serif); }

/* staggered entrance */
@keyframes pl-rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.pl-hero,.pl-today,.pl-journey-head,.pl-week,.pl-year{ opacity:0; animation:pl-rise .62s cubic-bezier(.2,.72,.28,1) forwards; }
.pl-hero{ animation-delay:.02s; }
.pl-today{ animation-delay:.10s; }
.pl-journey-head{ animation-delay:.18s; }
.pl-week{ animation-delay:calc(.22s + var(--i,0) * .07s); }
.pl-year{ animation-delay:.16s; }

/* ---- hero ---- */
.pl-hero{ position:relative; overflow:hidden; display:flex; align-items:center; gap:30px;
  padding:34px 36px; border-radius:30px; border:1px solid #F2E5DC;
  background:
    radial-gradient(115% 140% at 10% -10%, #FFE7DB 0%, rgba(255,231,219,0) 52%),
    radial-gradient(120% 130% at 102% 8%, #D3F4EF 0%, rgba(211,244,239,0) 50%),
    radial-gradient(90% 120% at 78% 118%, #FFF0D6 0%, rgba(255,240,214,0) 55%),
    linear-gradient(180deg,#FFFDFB,#FAF8F6);
  box-shadow:0 18px 50px -28px rgba(120,70,40,.30); }
.pl-hero-glow{ position:absolute; right:-50px; top:-70px; width:280px; height:280px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,122,61,.26), rgba(255,122,61,0) 68%); }
.pl-hero-main{ position:relative; flex:1; min-width:0; }
.pl-kicker{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pl-warm-d); margin-bottom:12px; }
.pl-title{ font-size:clamp(28px,4.2vw,44px); font-weight:600; line-height:1.03; letter-spacing:-.01em;
  color:var(--pl-ink); margin:0 0 10px; }
.pl-sub{ color:var(--ink-2); font-size:15.5px; line-height:1.6; margin:0 0 22px; max-width:30em; }
.pl-stats{ display:flex; gap:30px; flex-wrap:wrap; }
.pl-stat b{ font-family:var(--serif); font-weight:600; font-size:27px; color:var(--pl-ink); line-height:1; letter-spacing:-.01em; }
.pl-stat b i{ font-style:normal; font-size:16px; color:var(--muted); font-weight:600; }
.pl-stat span{ display:block; margin-top:5px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.pl-ring{ position:relative; width:172px; height:172px; flex:none; }
.pl-ring svg{ width:172px; height:172px; transform:rotate(-90deg); }
.pl-ring-bg{ fill:none; stroke:rgba(120,90,70,.12); stroke-width:11; }
.pl-ring-fg{ fill:none; stroke:url(#plRingGrad); stroke-width:11; stroke-linecap:round;
  transition:stroke-dashoffset 1.15s cubic-bezier(.3,.8,.3,1); filter:drop-shadow(0 4px 10px rgba(23,176,166,.30)); }
.pl-ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pl-ring-label b{ font-family:var(--serif); font-weight:600; font-size:42px; line-height:1; color:var(--pl-ink); }
.pl-ring-label b i{ font-style:normal; font-size:20px; color:var(--pl-warm-d); }
.pl-ring-label span{ margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* today-areas ring (My Brain): ring + a plain caption underneath */
.pg-ring-col{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.pg-ring-cap{ margin:0; max-width:172px; text-align:center; font-size:12px; line-height:1.4; font-weight:600; color:var(--muted); }

/* ---- today / featured card (overlaps the hero) ---- */
.pl-today{ position:relative; display:flex; gap:22px; align-items:flex-start;
  margin:18px 0 30px; padding:26px 28px;
  background:#fff; border:1px solid var(--line); border-radius:24px;
  box-shadow:0 20px 48px -30px rgba(20,28,45,.4); }
.pl-today-medal{ position:relative; flex:none; width:68px; height:68px; border-radius:20px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg,#FF8A4C,#F2542D); box-shadow:0 10px 22px -8px rgba(242,84,45,.6); }
.pl-today-medal svg{ width:32px; height:32px; }
.pl-today-medal-n{ position:absolute; right:-7px; bottom:-7px; min-width:24px; height:24px; padding:0 5px; border-radius:12px;
  background:#fff; color:var(--pl-warm-d); font-size:13px; font-weight:800; display:grid; place-items:center;
  box-shadow:0 3px 8px rgba(20,28,45,.18); }
.pl-today.is-finished .pl-today-medal{ background:linear-gradient(150deg,#FFD15C,#F0A21E); box-shadow:0 10px 22px -8px rgba(240,162,30,.6); }
.pl-today-body{ flex:1; min-width:0; }
.pl-today-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:11px; }
.pl-chip{ font-size:11.5px; font-weight:800; letter-spacing:.03em; color:var(--pl-teal-d);
  background:#E4F7F3; padding:5px 12px; border-radius:999px; }
.pl-chip-gold{ color:#9A6B05; background:#FCF0D2; }
.pl-daypill{ font-size:12px; font-weight:700; color:var(--ink-2); background:var(--soft); padding:5px 12px; border-radius:999px; }
.pl-daypill i{ font-style:normal; color:var(--muted); margin:0 1px; }
.pl-today-body h2{ font-size:clamp(21px,2.7vw,27px); font-weight:600; letter-spacing:-.01em; line-height:1.15;
  color:var(--pl-ink); margin:0 0 8px; }
.pl-today-body p{ color:var(--ink-2); font-size:15px; line-height:1.62; margin:0 0 18px; max-width:60ch; }
.pl-steps{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; }
.pl-step{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2);
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:6px 13px 6px 7px; }
.pl-step-n{ width:20px; height:20px; border-radius:50%; background:var(--soft); color:var(--muted);
  font-style:normal; font-size:12px; font-weight:800; display:grid; place-items:center; }
.pl-step-ic{ width:20px; height:20px; border-radius:50%; background:var(--pl-teal); display:grid; place-items:center; }
.pl-step-ic svg{ width:13px; height:13px; color:#fff; }
.pl-step.is-done{ color:var(--pl-teal-d); border-color:#BFE9E0; background:#F1FBF9; }
.pl-today-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pl-go{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; font-size:15.5px; border-radius:14px; }
.pl-go svg{ width:17px; height:17px; }
.pl-time{ font-size:13px; color:var(--muted); font-weight:600; }

/* ---- journey header + legend ---- */
.pl-journey-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 2px 18px; }
.pl-journey-head h2{ font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); margin:0; }
.pl-legend{ display:flex; gap:16px; font-size:12.5px; color:var(--muted); }
.pl-legend span{ display:inline-flex; align-items:center; }
.pl-lg{ width:12px; height:12px; border-radius:4px; margin-right:6px; }
.pl-lg.done{ background:var(--pl-teal); }
.pl-lg.current{ background:var(--pl-warm); }
.pl-lg.locked{ background:#dfe3ea; }

/* ---- the trail ---- */
.pl-trail{ list-style:none; margin:0; padding:0; }
.pl-week{ position:relative; display:grid; grid-template-columns:46px 1fr; gap:16px; padding-bottom:20px; }
.pl-week-spine{ position:relative; display:flex; justify-content:center; }
.pl-week-spine::before{ content:""; position:absolute; top:6px; bottom:-20px; left:50%; width:2px; transform:translateX(-50%);
  background:repeating-linear-gradient(var(--line) 0 5px, transparent 5px 11px); }
.pl-week:last-child .pl-week-spine::before{ display:none; }
.pl-week.is-done .pl-week-spine::before{ background:linear-gradient(var(--pl-teal),rgba(23,176,166,.25)); }
.pl-week-medal{ position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink-2);
  background:#fff; border:2px solid var(--line); box-shadow:0 4px 12px -6px rgba(20,28,45,.3); }
.pl-week-medal svg{ width:18px; height:18px; }
.pl-week.is-done .pl-week-medal{ background:var(--pl-teal); border-color:var(--pl-teal); color:#fff; }
.pl-week.is-active .pl-week-medal{ border-color:var(--pl-warm); color:var(--pl-warm-d);
  box-shadow:0 0 0 4px rgba(255,107,61,.16); }
.pl-week-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px 22px;
  box-shadow:0 10px 30px -24px rgba(20,28,45,.5); }
.pl-week-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.pl-week-kicker{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pl-teal-d); }
.pl-week-titles h3{ margin:3px 0 3px; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); }
.pl-week-titles p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; max-width:46ch; }
.pl-week-prog{ flex:none; width:120px; text-align:right; }
.pl-week-count{ font-family:var(--serif); font-weight:600; font-size:20px; color:var(--pl-ink); }
.pl-week-count i{ font-style:normal; font-size:13px; color:var(--muted); }
.pl-week-bar{ height:7px; border-radius:999px; background:#eef0f4; overflow:hidden; margin-top:7px; }
.pl-week-bar span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--pl-teal),#5FD9CF); transition:width .8s cubic-bezier(.3,.8,.3,1); }

/* ---- day nodes ---- */
.pl-days{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:9px; }
.pl-day{ appearance:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:11px 4px 8px; border-radius:15px; border:1.5px solid var(--line); background:#fff;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease; -webkit-tap-highlight-color:transparent; }
.pl-day-g{ display:grid; place-items:center; width:24px; height:24px; }
.pl-day-g svg{ width:19px; height:19px; }
.pl-day-num{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--pl-ink); line-height:1; }
.pl-day-lab{ font-size:10px; font-weight:700; letter-spacing:.02em; color:var(--muted); }
.pl-day:not([aria-disabled]):hover{ transform:translateY(-3px); box-shadow:0 12px 22px -14px rgba(20,28,45,.5); border-color:#d7dce4; }
.pl-day:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,61,.3); }
.pl-day.st-done{ background:var(--pl-teal); border-color:var(--pl-teal); }
.pl-day.st-done .pl-day-g{ color:#fff; } .pl-day.st-done .pl-day-lab{ color:rgba(255,255,255,.85); }
.pl-day.st-current{ border-color:var(--pl-warm); box-shadow:0 0 0 3px rgba(255,107,61,.18);
  animation:pl-pulse 2.4s ease-in-out infinite; }
.pl-day.st-current .pl-day-num{ color:var(--pl-warm-d); }
.pl-day.st-current .pl-day-lab{ color:var(--pl-warm-d); }
.pl-day.st-locked-seq,.pl-day.st-locked-premium{ background:var(--soft); border-color:var(--line); cursor:default; }
.pl-day.st-locked-seq .pl-day-g,.pl-day.st-locked-premium .pl-day-g{ color:var(--muted); }
.pl-day.st-locked-premium .pl-day-g{ color:#C99A2E; }
.pl-day.st-future{ background:#fcfcfd; }
.pl-day.st-future .pl-day-num{ color:#c3c8d2; }
.pl-day.pl-nudge{ animation:pl-nudge .34s; }
@keyframes pl-pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,107,61,.18);} 50%{ box-shadow:0 0 0 6px rgba(255,107,61,.07);} }
@keyframes pl-nudge{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

/* ---- the year ahead (12 monthly chapters; 30-day plan = Month 1) ---- */
.pl-year{ margin-top:34px; padding:30px 30px 26px; border-radius:26px; border:1px solid #EAE3DC;
  background:
    radial-gradient(120% 150% at 100% 0%, #EAF8F5 0%, rgba(234,248,245,0) 48%),
    radial-gradient(120% 150% at 0% 100%, #FFF1E6 0%, rgba(255,241,230,0) 50%),
    linear-gradient(180deg,#FFFEFC,#FBF9F7);
  box-shadow:0 18px 50px -34px rgba(120,70,40,.30); }
.pl-year-head{ max-width:62ch; margin-bottom:22px; }
.pl-year-kicker{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pl-teal-d); margin-bottom:10px; }
.pl-year-kicker svg{ width:15px; height:15px; }
.pl-year-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,30px); letter-spacing:-.01em;
  color:var(--pl-ink); margin:0 0 8px; }
.pl-year-head p{ margin:0; color:var(--ink-2); font-size:15px; line-height:1.62; }
.pl-year-grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:11px; }
.pl-month{ display:flex; align-items:center; gap:12px; padding:13px 14px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 8px 22px -20px rgba(20,28,45,.5); }
.pl-month-medal{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:17px; color:var(--muted);
  background:var(--soft); border:1px solid var(--line); }
.pl-month-medal svg{ width:18px; height:18px; }
.pl-month-body{ flex:1; min-width:0; }
.pl-month-lab{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.pl-month-body h3{ margin:2px 0 0; font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink);
  line-height:1.22; }
.pl-month-badge{ display:inline-block; margin-top:7px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:var(--soft); padding:4px 9px; border-radius:999px; }
/* current month = warm highlight */
.pl-month.is-current{ border-color:var(--pl-warm); box-shadow:0 0 0 3px rgba(255,107,61,.14), 0 10px 26px -18px rgba(242,84,45,.5); }
.pl-month.is-current .pl-month-medal{ color:#fff; background:linear-gradient(150deg,#FF8A4C,#F2542D); border-color:transparent; }
.pl-month.is-current .pl-month-badge{ color:var(--pl-warm-d); background:#FFEAE0; }
/* done month = teal */
.pl-month.is-done .pl-month-medal{ color:#fff; background:var(--pl-teal); border-color:transparent; }
.pl-month.is-done .pl-month-badge{ color:var(--pl-teal-d); background:#E4F7F3; }
/* next month opening up = soft teal cue */
.pl-month.is-next .pl-month-badge{ color:var(--pl-teal-d); background:#E4F7F3; }
.pl-month.is-upcoming{ opacity:.82; }

.pl-foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.pl-foot p{ font-size:12px; line-height:1.6; color:var(--muted); max-width:64ch; }

/* ---- skeleton ---- */
@keyframes pl-shimmer{ 0%{background-position:-460px 0;} 100%{background-position:460px 0;} }
.plan-skel .sk{ border-radius:22px; background:#eef0f4;
  background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));
  background-size:460px 100%; background-repeat:no-repeat; animation:pl-shimmer 1.25s infinite; }
.pl-sk-hero{ height:180px; border-radius:30px; }
.pl-sk-today{ height:150px; margin:18px 0 30px; }
.pl-sk-weeks{ display:flex; flex-direction:column; gap:20px; }
.pl-sk-week{ height:150px; }

/* ---- responsive ---- */
@media (max-width:760px){
  .pl-hero{ flex-direction:column; align-items:flex-start; gap:22px; padding:26px 22px; border-radius:24px; }
  .pl-ring{ align-self:center; width:148px; height:148px; } .pl-ring svg{ width:148px; height:148px; }
  .pl-ring-label b{ font-size:36px; }
  .pl-stats{ gap:22px; }
  .pl-today{ flex-direction:column; gap:16px; margin:14px 0 26px; padding:22px; }
  .pl-week{ grid-template-columns:34px 1fr; gap:11px; }
  .pl-week-medal{ width:34px; height:34px; font-size:15px; }
  .pl-week-head{ flex-direction:column; gap:12px; }
  .pl-week-prog{ width:100%; text-align:left; display:flex; align-items:center; gap:12px; }
  .pl-week-prog .pl-week-bar{ flex:1; margin-top:0; }
  .pl-days{ grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:7px; }
  .pl-day-lab{ display:none; }
  .pl-year{ padding:24px 18px 20px; border-radius:22px; }
  .pl-year-grid{ grid-template-columns:1fr 1fr; gap:9px; }
}
@media (max-width:440px){
  .pl-year-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .pl-hero,.pl-today,.pl-journey-head,.pl-week,.pl-year{ opacity:1; animation:none; }
  .brain > .pg-card,.brain > .pg-row2{ opacity:1; animation:none; }
  .home > .hm-today,.home > .hm-links,.home > .hm-promo{ opacity:1; animation:none; }
  .pl-day.st-current{ animation:none; }
  .pl-ring-fg,.pl-week-bar span,.pg-emi-bar span,.pg-wk-bar,.pg-plan-bar span{ transition:none; }
  .plan-skel .sk{ animation:none; }
}

/* ============================================================
   /progress (My Brain) - extends the journey design (.pg-*)
   ============================================================ */
.brain .pl-hero{ margin-bottom:22px; }
.brain > .pg-card,.brain > .pg-row2{ opacity:0; animation:pl-rise .6s cubic-bezier(.2,.72,.28,1) forwards; }
.brain > .pg-emi{ animation-delay:.10s; }
.brain > .pg-row2{ animation-delay:.18s; }
.brain > .pg-plan{ animation-delay:.24s; }
.brain > .pg-recent{ animation-delay:.30s; }

.pg-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px 26px;
  box-shadow:0 14px 36px -28px rgba(20,28,45,.5); margin-bottom:20px; }
.pg-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.pg-card-head h2{ font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); margin:0; }
.pg-card-note{ font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }

/* EveryMemory Index: radar + area rows */
.pg-emi-grid{ display:grid; grid-template-columns:minmax(0,256px) 1fr; gap:28px; align-items:center; }
.pg-radar-wrap{ display:flex; justify-content:center; padding:6px 14px; }
.pg-radar{ width:100%; max-width:256px; height:auto; overflow:visible; }
.pg-rad-grid,.pg-rad-spoke{ fill:none; stroke:rgba(120,90,70,.13); stroke-width:1; }
.pg-rad-grid{ fill:none; }
.pg-rad-area{ fill:url(#pgRad); stroke:#17B0A6; stroke-width:2; stroke-linejoin:round; }
.pg-rad-lab{ font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; font-weight:800; letter-spacing:.02em; }
.pg-emi-list{ display:flex; flex-direction:column; gap:15px; }
.pg-emi-row{ display:flex; align-items:flex-start; gap:11px; }
.pg-emi-dot{ width:11px; height:11px; border-radius:50%; margin-top:5px; flex:none; }
.pg-emi-main{ flex:1; min-width:0; }
.pg-emi-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pg-emi-name{ font-size:14px; font-weight:700; color:var(--pl-ink); }
.pg-emi-score{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--pl-ink); }
.pg-emi-score.muted{ font-family:inherit; font-size:12px; font-weight:600; color:var(--muted); }
.pg-emi-bar{ height:7px; border-radius:999px; background:#eef0f4; overflow:hidden; margin:6px 0 4px; }
.pg-emi-bar span{ display:block; height:100%; border-radius:999px; transition:width .8s cubic-bezier(.3,.8,.3,1); }
.pg-emi-sub{ font-size:11.5px; color:var(--muted); font-weight:600; }
.pg-empty-hint{ margin:18px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.pg-empty-hint a{ color:var(--pl-warm-d); font-weight:700; }

.pg-row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.pg-row2 .pg-card{ margin-bottom:0; }

/* weekly points chart */
.pg-wk-chart{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:152px; padding-top:6px; }
.pg-wk-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.pg-wk-val{ font-size:10.5px; font-weight:700; color:var(--muted); min-height:13px; }
.pg-wk-bar{ width:100%; max-width:34px; border-radius:8px 8px 4px 4px; min-height:4px;
  background:linear-gradient(180deg,#5FD9CF,#17B0A6); transition:height .7s cubic-bezier(.3,.8,.3,1); }
.pg-wk-bar.empty{ background:#e9ecf1; }
.pg-wk-col.is-today .pg-wk-bar{ background:linear-gradient(180deg,#FF9166,#F2542D); }
.pg-wk-col.is-today .pg-wk-lab{ color:var(--pl-warm-d); }
.pg-wk-lab{ font-size:11px; font-weight:700; color:var(--muted); }
.pg-wk-empty{ display:grid; place-items:center; height:152px; text-align:center; color:var(--muted); font-size:13.5px; padding:0 12px; }

/* training calendar */
.pg-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; }
.pg-cal-dow span{ text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); }
.pg-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.pg-cal-cell{ aspect-ratio:1/1; border-radius:7px; background:#eef0f4; }
.pg-cal-cell.future{ background:#f4f5f8; }
.pg-cal-cell.partial{ background:#FFD2BD; }
.pg-cal-cell.done{ background:linear-gradient(150deg,#5FD9CF,#17B0A6); }
.pg-cal-cell.today{ background:#fff; box-shadow:inset 0 0 0 2px var(--pl-warm); }
.pg-cal-streak{ display:flex; align-items:center; gap:7px; margin-top:14px; font-size:13.5px; color:var(--ink-2); }
.pg-cal-streak svg{ width:18px; height:18px; flex:none; } .pg-cal-streak b{ color:var(--pl-ink); font-weight:800; }

/* 30-day plan strip */
.pg-plan{ display:flex; align-items:center; gap:22px; }
.pg-plan-main{ flex:1; min-width:0; }
.pg-plan-kicker{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pl-teal-d); }
.pg-plan h2{ font-size:18px; font-weight:600; color:var(--pl-ink); margin:4px 0 11px; }
.pg-plan-bar{ height:9px; border-radius:999px; background:#eef0f4; overflow:hidden; max-width:440px; }
.pg-plan-bar span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--pl-warm),#FF9166); transition:width .8s cubic-bezier(.3,.8,.3,1); }
.pg-plan .pl-go{ flex:none; }

/* recent games */
.pg-rec-list{ list-style:none; margin:0; padding:0; }
.pg-rec{ display:flex; align-items:center; gap:13px; padding:11px 0; border-top:1px solid var(--line); }
.pg-rec:first-child{ border-top:none; padding-top:2px; }
.pg-rec-name{ flex:1; min-width:0; font-weight:700; font-size:14.5px; color:var(--pl-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-rec-score{ font-size:13px; font-weight:700; color:var(--pl-ink); white-space:nowrap; }
.pg-rec-score i{ font-style:normal; color:var(--muted); font-weight:600; margin-left:4px; }
.pg-rec-ago{ font-size:12px; color:var(--muted); white-space:nowrap; min-width:54px; text-align:right; }
.pg-loading,.pg-empty{ color:var(--muted); font-size:14px; padding:8px 0; }

@media (max-width:760px){
  .pg-emi-grid{ grid-template-columns:1fr; gap:18px; }
  .pg-radar{ max-width:230px; }
  .pg-row2{ grid-template-columns:1fr; }
  .pg-plan{ flex-direction:column; align-items:flex-start; gap:14px; }
  .pg-plan .pl-go{ width:100%; justify-content:center; }
  .pg-rec-ago{ display:none; }
}

/* ============================================================
   / dashboard (Today) - extends the journey design (.hm-*)
   ============================================================ */
.home .pl-hero{ margin-bottom:22px; }
.home > .hm-today,.home > .hm-links,.home > .hm-promo{ opacity:0; animation:pl-rise .6s cubic-bezier(.2,.72,.28,1) forwards; }
.home > .hm-today{ animation-delay:.10s; }
.home > .hm-links{ animation-delay:.18s; }
.home > .hm-promo{ animation-delay:.24s; }

.hm-hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; }
.hm-hero-meta{ font-size:13px; color:var(--muted); font-weight:600; }

.hm-today{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px 24px;
  box-shadow:0 14px 36px -28px rgba(20,28,45,.5); margin-bottom:20px; }
.hm-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.hm-card-head h2{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); margin:0; }
.hm-card-note{ font-size:12px; font-weight:600; color:var(--muted); }
.hm-ex-list{ display:flex; flex-direction:column; gap:10px; }
.hm-ex{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:11px 14px;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.hm-ex:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -16px rgba(20,28,45,.5); border-color:#d7dce4; }
.hm-ex:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,61,.3); }
.hm-ex.is-done{ background:#F1FBF9; border-color:#BFE9E0; }
.hm-ex-text{ flex:1; min-width:0; }
.hm-ex-text b{ display:block; font-size:15px; font-weight:700; color:var(--pl-ink); }
.hm-ex-text small{ font-size:12.5px; color:var(--muted); font-weight:600; }
.hm-ex-state{ flex:none; }
.hm-ex-go,.hm-ex-done{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; }
.hm-ex-go{ background:var(--soft); color:var(--pl-teal-d); } .hm-ex-go svg{ width:13px; height:13px; margin-left:1px; }
.hm-ex-done{ background:var(--pl-teal); color:#fff; } .hm-ex-done svg{ width:16px; height:16px; }
.hm-ex:hover .hm-ex-go{ background:var(--pl-teal); color:#fff; }
.hm-empty{ color:var(--muted); font-size:14px; padding:6px 0; }

.hm-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.hm-link{ display:flex; align-items:center; gap:13px; padding:16px; border-radius:18px;
  background:#fff; border:1px solid var(--line); box-shadow:0 10px 28px -24px rgba(20,28,45,.5);
  transition:transform .14s ease, box-shadow .18s ease; }
.hm-link:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(20,28,45,.5); }
.hm-link-ic{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; }
.hm-link-ic svg{ width:22px; height:22px; }
.hm-warm .hm-link-ic{ background:linear-gradient(150deg,#FF8A4C,#F2542D); }
.hm-teal .hm-link-ic{ background:linear-gradient(150deg,#3FD0C4,#0E9488); }
.hm-violet .hm-link-ic{ background:linear-gradient(150deg,#A98CF2,#7C5CE0); }
.hm-link-text{ flex:1; min-width:0; }
.hm-link-text b{ display:block; font-size:14.5px; font-weight:700; color:var(--pl-ink); }
.hm-link-text small{ font-size:12px; color:var(--muted); }
.hm-link-arrow{ flex:none; color:var(--muted); display:grid; transition:transform .18s ease; }
.hm-link-arrow svg{ width:18px; height:18px; }
.hm-link:hover .hm-link-arrow{ transform:translateX(3px); color:var(--pl-ink); }

.hm-promo{ position:relative; border-radius:22px; padding:22px 24px; margin-bottom:20px;
  background:radial-gradient(120% 130% at 0% 0%, #FFE7DB 0%, rgba(255,231,219,0) 55%),
    radial-gradient(120% 130% at 100% 100%, #D7F3EE 0%, rgba(215,243,238,0) 55%), #FFFDFB;
  border:1px solid #F2E5DC; }
.hm-promo-close{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(255,255,255,.6); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.hm-promo-close svg{ width:15px; height:15px; }
.hm-promo-brand{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--pl-ink); font-size:15px; }
.hm-promo-brand .app-logo.sm{ width:22px; height:22px; }
.hm-promo-tag{ font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--pl-warm-d); background:#FCE6DC; padding:3px 9px; border-radius:999px; }
.hm-promo p{ margin:10px 0 12px; color:var(--ink-2); font-size:14px; line-height:1.6; max-width:54ch; }
.hm-promo-link{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:var(--pl-warm-d); }
.hm-promo-link svg{ width:15px; height:15px; }
.pl-foot a{ color:var(--ink-2); font-weight:600; } .pl-foot a:hover{ color:var(--pl-warm-d); }

@media (max-width:760px){
  .hm-links{ grid-template-columns:1fr; }
}

/* ============================================================
   /day/:n (plan day) - extends the journey design (.dv-*)
   ============================================================ */
.dv-back{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--ink-2); padding:4px 0; margin-bottom:8px; transition:color .15s; }
.dv-back svg{ width:18px; height:18px; }
.dv-back:hover{ color:var(--pl-warm-d); }
.dv-hero{ margin-bottom:22px; }
.dv-chip{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:12.5px; font-weight:800;
  color:#0E7A72; background:#DCF5F0; padding:6px 13px; border-radius:999px; }
.dv-chip svg{ width:15px; height:15px; }

.dv-steps{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.dv-step{ display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px 22px;
  box-shadow:0 12px 32px -28px rgba(20,28,45,.5);
  opacity:0; animation:pl-rise .55s cubic-bezier(.2,.72,.28,1) forwards; animation-delay:calc(.10s + var(--i,0) * .08s); }
.dv-step-medal{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink-2);
  background:#fff; border:2px solid var(--line); transition:background .2s,border-color .2s,color .2s; }
.dv-step-medal svg{ width:19px; height:19px; }
.dv-step.is-done .dv-step-medal{ background:var(--pl-teal); border-color:var(--pl-teal); color:#fff; }
.dv-step-main{ flex:1; min-width:0; }
.dv-step-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.dv-step-head h3{ font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); margin:0; }
.dv-step-flag{ font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--pl-teal-d); }
.dv-lesson,.dv-action{ color:var(--ink-2); font-size:15px; line-height:1.65; margin:0 0 14px; }
.dv-hint{ color:var(--muted); font-size:13.5px; margin:0 0 12px; }
.dv .btn-sm{ font-size:14px; padding:9px 18px; }
.dv-do{ margin-top:2px; }

.dv-games{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.dv-game{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:9px 12px;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.dv-game:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -16px rgba(20,28,45,.5); border-color:#d7dce4; }
.dv-game-ic{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; }
.dv-game-meta{ flex:1; min-width:0; }
.dv-game-meta b{ display:block; font-size:14.5px; font-weight:700; color:var(--pl-ink); }
.dv-game-meta i{ font-style:normal; font-size:12px; color:var(--muted); }
.dv-game-go{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--soft); color:var(--pl-teal-d);
  display:grid; place-items:center; } .dv-game-go svg{ width:13px; height:13px; margin-left:1px; }
.dv-game:hover .dv-game-go{ background:var(--pl-teal); color:#fff; }

.dv-done{ text-align:center; background:linear-gradient(180deg,#F1FBF9,#fff); border:1px solid #BFE9E0;
  border-radius:22px; padding:30px 26px; margin-bottom:14px; }
.dv-done-badge{ width:58px; height:58px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:var(--pl-teal); color:#fff; box-shadow:0 10px 24px -8px rgba(23,176,166,.6); }
.dv-done-badge svg{ width:30px; height:30px; }
.dv-done h2{ font-size:23px; font-weight:600; color:var(--pl-ink); margin:0 0 6px; }
.dv-done p{ color:var(--ink-2); font-size:15px; margin:0 0 20px; }
.dv-done-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dv-foot{ text-align:center; color:var(--muted); font-size:13.5px; margin:6px 0 0; }

.dv-upsell{ text-align:center; background:
    radial-gradient(120% 130% at 50% -10%, #FFE7DB 0%, rgba(255,231,219,0) 55%), #fff;
  border:1px solid #F2E5DC; border-radius:24px; padding:40px 28px; }
.dv-upsell-badge{ width:60px; height:60px; border-radius:18px; margin:0 auto 14px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg,#FFD15C,#F0A21E); box-shadow:0 12px 26px -8px rgba(240,162,30,.6); }
.dv-upsell-badge svg{ width:30px; height:30px; }
.dv-upsell h1{ font-size:clamp(24px,3.4vw,32px); font-weight:600; color:var(--pl-ink); margin:8px 0 10px; }
.dv-upsell p{ color:var(--ink-2); font-size:15px; line-height:1.6; max-width:46ch; margin:0 auto 22px; }

@media (max-width:760px){
  .dv-step{ padding:18px; gap:13px; }
}
@media (prefers-reduced-motion:reduce){
  .dv-step{ opacity:1; animation:none; }
}

/* ============================================================
   /tests - extends the journey design (.tv-*)
   ============================================================ */
.tv-hero{ margin-bottom:22px; }
.tv-hero-badge{ flex:none; width:104px; height:104px; border-radius:26px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg,#3FD0C4,#0E9488); box-shadow:0 16px 32px -12px rgba(14,148,136,.55); }
.tv-hero-badge svg{ width:50px; height:50px; }
.tv-card{ display:flex; align-items:flex-start; gap:18px; background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:22px 24px; box-shadow:0 14px 36px -28px rgba(20,28,45,.5); margin-bottom:16px;
  opacity:0; animation:pl-rise .55s cubic-bezier(.2,.72,.28,1) forwards; animation-delay:calc(.12s + var(--i,0) * .08s); }
.tv-card-ic{ flex:none; }
.tv-card-body{ flex:1; min-width:0; }
.tv-card-body h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); margin:0 0 7px; }
.tv-card-body p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0 0 16px; max-width:56ch; }
.tv-soon{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  background:var(--soft); padding:3px 9px; border-radius:999px; vertical-align:middle; margin-left:6px; }
.tv-card.is-soon{ opacity:.72; }
.tv-card.is-soon .tv-card-body p{ margin-bottom:0; }

@media (max-width:760px){
  .tv-hero-badge{ width:84px; height:84px; border-radius:22px; } .tv-hero-badge svg{ width:40px; height:40px; }
  .tv-card{ padding:18px; gap:14px; }
}
@media (prefers-reduced-motion:reduce){
  .tv-card{ opacity:1; animation:none; }
}

/* ============================================================
   /achievements - extends the journey design (.av-*)
   ============================================================ */
.av-hero{ margin-bottom:24px; }
.av-group{ margin-bottom:26px; opacity:0; animation:pl-rise .55s cubic-bezier(.2,.72,.28,1) forwards; animation-delay:calc(.10s + var(--i,0) * .08s); }
.av-group h2{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--pl-ink); margin:0 0 14px; }
.av-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:14px; }
.av-card{ display:flex; gap:15px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 18px;
  box-shadow:0 12px 30px -26px rgba(20,28,45,.5); }
.av-card.is-locked{ background:#fcfcfd; }
.av-medal{ position:relative; flex:none; width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  color:#fff; box-shadow:0 8px 18px -8px rgba(20,28,45,.45), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.10); }
/* soft top-left sheen so each medal reads as a crafted medallion, not a flat tile */
.av-medal::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(125% 105% at 26% 16%, rgba(255,255,255,.5), rgba(255,255,255,0) 56%); }
.av-card.is-locked .av-medal{ filter:grayscale(.55) opacity(.7); }
/* frosted inner disc holding the crisp white icon */
.av-ic{ position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 5px rgba(0,0,0,.14); }
.av-ic svg{ width:23px; height:23px; display:block; filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.22)); }
.av-lvl{ position:absolute; right:-5px; bottom:-5px; min-width:21px; height:21px; padding:0 5px; border-radius:11px;
  background:#fff; color:var(--pl-ink); font-family:var(--serif); font-weight:700; font-size:11px;
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(20,28,45,.22); }
.av-lock{ position:absolute; right:-5px; bottom:-5px; width:22px; height:22px; border-radius:50%;
  background:#fff; color:var(--muted); display:grid; place-items:center; box-shadow:0 2px 6px rgba(20,28,45,.18); }
.av-lock svg{ width:12px; height:12px; }
.av-body{ flex:1; min-width:0; }
.av-body h3{ font-size:15.5px; font-weight:700; color:var(--pl-ink); margin:0 0 4px; font-family:"Plus Jakarta Sans",sans-serif; }
.av-tag{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--pl-teal-d);
  background:#E4F7F3; padding:2px 7px; border-radius:999px; vertical-align:middle; margin-left:4px; }
.av-body p{ font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:0 0 9px; }
.av-bar{ height:6px; border-radius:999px; background:#eef0f4; overflow:hidden; margin-bottom:6px; }
.av-bar span{ display:block; height:100%; border-radius:999px; transition:width .8s cubic-bezier(.3,.8,.3,1); }
.av-status{ font-size:11.5px; font-weight:600; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  .av-group{ opacity:1; animation:none; }
  .av-bar span{ transition:none; }
}

/* ============================================================
   /settings - extends the journey design (.settings-view)
   ============================================================ */
.sv-hero{ margin-bottom:20px; }
.settings-view .set-section{ margin-bottom:18px;
  opacity:0; animation:pl-rise .5s cubic-bezier(.2,.72,.28,1) forwards; }
.settings-view .set-section:nth-of-type(1){ animation-delay:.08s; }
.settings-view .set-section:nth-of-type(2){ animation-delay:.13s; }
.settings-view .set-section:nth-of-type(3){ animation-delay:.18s; }
.settings-view .set-section:nth-of-type(n+4){ animation-delay:.22s; }
.settings-view .set-label{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pl-teal-d); margin:0 0 10px 4px; }
.settings-view .set-card{ border-radius:18px; box-shadow:0 12px 30px -26px rgba(20,28,45,.5); }
.settings-view .set-row{ padding:15px 18px; }
.settings-view .set-action{ margin-left:auto; color:var(--pl-warm-d); font-weight:700; font-size:13.5px;
  background:var(--soft); border:1px solid var(--line); padding:7px 14px; border-radius:999px; transition:background .15s,border-color .15s; }
.settings-view .set-action:hover{ text-decoration:none; background:#fff; border-color:#d7dce4; }
.settings-view .set-action.set-danger{ color:#E23B2E; }
.settings-view .badge.ok{ background:#E4F7F3; color:var(--pl-teal-d); }

@media (prefers-reduced-motion:reduce){
  .settings-view .set-section{ opacity:1; animation:none; }
}

/* ============================================================
   /games hero + /login - harmonized to the journey look
   ============================================================ */
.games-hero{ margin-bottom:22px; }
.games-hero .pl-title{ font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; }
.games-hero-areas{ align-self:center; }
.games-hero .games-hero-cta{ margin-top:20px; }

.auth::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 80% at 10% -5%, #FFE7DB 0%, rgba(255,231,219,0) 55%),
    radial-gradient(85% 80% at 102% 8%, #D3F4EF 0%, rgba(211,244,239,0) 50%),
    radial-gradient(70% 80% at 82% 105%, #FFF0D6 0%, rgba(255,240,214,0) 55%),
    linear-gradient(180deg,#FFFDFB,#FAF8F6); }
.auth-card{ border-radius:26px; box-shadow:0 30px 70px -34px rgba(20,28,45,.5); }
.auth-card h1{ font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; font-size:29px; letter-spacing:-.01em; }
.auth-brand img{ width:30px; height:30px; }

/* ============================================================
   Polish pass: motion preference, focus rings, hover, empties
   ============================================================ */
/* App-level "Reduce motion" (Settings toggle): collapse animation/transition durations.
   Entrance animations use `forwards`, so they still settle at their final (visible) state. */
.em-reduce-motion *, .em-reduce-motion *::before, .em-reduce-motion *::after{
  animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important;
  transition-duration:1ms !important; scroll-behavior:auto !important;
}

/* Accessible keyboard focus ring across the cabinet */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--orange); outline-offset:2px;
}
/* Elements that already paint their own ring: avoid a double outline */
.pl-day:focus-visible, .hm-ex:focus-visible, .play-quit:focus-visible{ outline:none; }

/* Hover micro-interactions */
.pl-go{ transition:transform .12s ease, background .15s ease, box-shadow .18s ease; }
.pl-go:hover{ transform:translateY(-1px); }
.pl-go:active{ transform:translateY(0); }
.nav-item{ transition:background .15s ease, color .15s ease; }
.hl-avatar{ transition:transform .15s ease; } .hl-avatar:hover{ transform:scale(1.05); }

/* Unified empty states */
.empty-card{ text-align:center; padding:38px 20px; color:var(--ink-2); }
.empty-card .empty-ic{ font-size:30px; opacity:.55; }
.empty-card h3{ font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; font-size:19px;
  color:#1b2030; margin:10px 0 6px; }
.empty-card p{ font-size:14px; color:var(--muted); }

/* ============ in-cabinet 404 (notFound view) ============ */
.nf-view{ min-height:54vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.nf-card{ max-width:540px; padding:28px 24px; }
.nf-kicker{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-dark); margin-bottom:12px; }
.nf-code{ font-family:var(--serif); font-weight:600; font-size:clamp(88px,16vw,150px); line-height:.9; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--orange),#FF8A4C 55%,var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nf-card h1{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,32px); letter-spacing:-.012em;
  margin:4px 0 10px; color:var(--pl-ink); }
.nf-card p{ color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:36ch; margin:0 auto 24px; }
.nf-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   P0-2 Memory Check hub (tests.js) + runner
   ============================================================ */
.tv-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 0;color:var(--pl-ink,#2a2a32);}
.tv-emi{display:flex;gap:18px;align-items:center;background:#fff;border-radius:22px;padding:20px;
  box-shadow:0 10px 30px rgba(20,20,40,.06);margin-top:14px;flex-wrap:wrap;}
.tv-emi-ring{flex:0 0 132px;width:132px;height:132px;}
.tv-emi-ring svg{width:100%;height:100%;}
.tv-ring-bg{fill:none;stroke:rgba(20,30,40,.08);stroke-width:9;}
.tv-ring-fg{fill:none;stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset .9s ease;}
.tv-ring-val{font-family:var(--serif,Fraunces),serif;font-size:34px;font-weight:700;fill:var(--pl-ink,#22222a);dominant-baseline:middle;}
.tv-ring-cap{font-size:11px;fill:#8a8a96;letter-spacing:.08em;text-transform:uppercase;}
.tv-emi-body{flex:1;min-width:220px;}
.tv-emi-meta,.tv-emi-empty{color:#6a6a76;font-size:14px;margin:0 0 8px;}
.tv-delta{display:inline-block;font-weight:700;font-size:14px;padding:3px 10px;border-radius:999px;margin-bottom:10px;}
.tv-delta-up{color:#16834f;background:rgba(52,207,134,.14);}
.tv-delta-down{color:#b04a2e;background:rgba(255,90,46,.12);}
.tv-delta-flat{color:#6a6a76;background:rgba(120,120,135,.12);}
.tv-cta{margin-top:6px;}
.tv-cta-sub{color:#8a8a96;font-size:13px;margin:8px 0 0;}
.tv-card{background:#fff;border-radius:22px;padding:18px 20px;box-shadow:0 10px 30px rgba(20,20,40,.06);margin-top:14px;}
.tv-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.tv-card-head h2{font-family:var(--serif,Fraunces),serif;font-size:20px;margin:0;}
.tv-note{color:#8a8a96;font-size:13px;}
.tv-spark{width:100%;height:auto;}
.tv-spark-line{fill:none;stroke:#FF5A2E;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.tv-spark-dot{fill:#fff;stroke:#FF5A2E;stroke-width:2;}
.tv-spark-lab{font-size:9px;fill:#9a9aa6;}
.tv-areas{display:flex;flex-direction:column;gap:14px;}
.tv-area-row{display:flex;align-items:center;gap:12px;}
.tv-area-ic{flex:0 0 30px;}
.tv-area-main{flex:1;min-width:0;}
.tv-area-top{display:flex;justify-content:space-between;font-size:14px;font-weight:600;}
.tv-area-val{font-variant-numeric:tabular-nums;}
.tv-area-val.muted{color:#9a9aa6;font-weight:500;}
.tv-area-bar{height:8px;border-radius:999px;background:rgba(20,30,40,.07);margin:5px 0 3px;overflow:hidden;}
.tv-area-bar span{display:block;height:100%;border-radius:999px;transition:width .7s ease;}
.tv-area-sub{font-size:12px;color:#9a9aa6;}
.mc-bar{display:flex;align-items:center;justify-content:space-between;}
.mc-step{font-variant-numeric:tabular-nums;font-weight:700;color:#8a8a96;font-size:14px;}
.mc-track{display:flex;gap:6px;justify-content:center;padding:8px 0 0;}
.mc-pip{width:26px;height:5px;border-radius:999px;background:rgba(20,30,40,.12);transition:background .3s;}
.mc-pip.is-done{background:var(--c,#17B0A6);}
.mc-pip.is-now{background:var(--c,#FF5A2E);box-shadow:0 0 0 3px color-mix(in srgb,var(--c,#FF5A2E) 22%,transparent);}
.mc-intro-note{color:#8a8a96;font-size:13px;margin-top:6px;}

/* ===== Onboarding (onboarding.js) - fixed-size 9:16 themed story card ===== */
.onb{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:18px 16px;background:radial-gradient(125% 80% at 50% 0%, #FFF1E8 0%, #F3FBF8 50%, #ffffff 100%);}
.onb-card{position:relative;width:min(384px,92vw);height:min(660px,84dvh);aspect-ratio:9/16;
  display:flex;flex-direction:column;border-radius:30px;overflow:hidden;background:#fff;
  box-shadow:0 34px 80px -34px rgba(80,40,10,.5),0 6px 18px -10px rgba(80,40,10,.2);}
.onb-skip{position:absolute;top:14px;right:14px;z-index:3;background:rgba(255,255,255,.22);border:0;color:#fff;
  font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 13px;border-radius:20px;backdrop-filter:blur(4px);}
.onb-skip:hover{background:rgba(255,255,255,.34);}
.onb-art{flex:1 1 auto;min-height:150px;position:relative;display:grid;place-items:center;background:var(--grad);overflow:hidden;}
.onb-wordmark{position:absolute;top:16px;left:18px;z-index:2;color:rgba(255,255,255,.95);font-weight:800;font-size:13px;letter-spacing:.03em;}
.onb-blob{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;}
.onb-blob-a{width:170px;height:170px;background:rgba(255,255,255,.45);top:-46px;right:-34px;}
.onb-blob-b{width:130px;height:130px;background:rgba(255,255,255,.22);bottom:-36px;left:-26px;}
.onb-glyph{position:relative;z-index:2;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.42);box-shadow:0 16px 34px -12px rgba(0,0,0,.28);}
.onb-glyph svg{width:56px;height:56px;color:#fff;}
.onb-body{flex:0 0 auto;background:#fff;padding:22px 26px 24px;text-align:center;}
.onb-kicker{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:8px;}
.onb-body h1{font-family:var(--serif,Fraunces),Georgia,serif;font-weight:600;font-size:25px;line-height:1.16;
  margin:0 0 10px;color:var(--ink);letter-spacing:-.01em;}
.onb-body>p{color:#5a5a66;font-size:14.5px;line-height:1.55;margin:0 0 16px;}
.onb-dots{display:flex;gap:7px;justify-content:center;margin:0 0 16px;}
.onb-dot{width:7px;height:7px;border-radius:50%;background:#e3d6ca;transition:background .2s,width .2s;}
.onb-dot.is-on{background:var(--accent);width:20px;border-radius:5px;}
.onb-cta{width:100%;border:0;border-radius:14px;padding:14px;font-weight:700;font-size:15.5px;cursor:pointer;
  background:var(--accent);color:#fff;box-shadow:0 14px 26px -14px var(--accent);transition:filter .12s;}
.onb-cta:hover{filter:brightness(.96);}
.onb-sub{display:block;width:100%;margin:11px 0 0;background:none;border:0;color:#8a7666;font-size:13.5px;font-weight:600;cursor:pointer;}
.onb-sub:hover{color:var(--ink);}
.onb-sub.is-hidden{visibility:hidden;pointer-events:none;}
.onb-fine{color:#a08672;font-size:11.5px;line-height:1.4;text-align:center;margin:0;}
@media (max-width:480px){.onb-card{height:min(640px,86dvh);}.onb-body{padding:20px 22px 22px;}.onb-body h1{font-size:23px;}.onb-glyph{width:104px;height:104px;}.onb-glyph svg{width:50px;height:50px;}}
@media (prefers-reduced-motion:reduce){.onb-dot,.onb-cta{transition:none;}}

/* ===== P0-5 review-gating prompt (rev-*) ===== */
.rev-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(16,24,40,.45);backdrop-filter:blur(3px);animation:revFade .18s ease;}
@keyframes revFade{from{opacity:0}to{opacity:1}}
.rev-card{position:relative;width:100%;max-width:420px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px 24px 24px;text-align:center;box-shadow:var(--shadow-md);
  animation:revPop .22s cubic-bezier(.2,.8,.25,1);}
@keyframes revPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.em-reduce-motion .rev-overlay,.em-reduce-motion .rev-card{animation:none;}
.rev-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border:none;background:transparent;
  color:var(--muted);font-size:24px;line-height:1;cursor:pointer;border-radius:8px;}
.rev-x:hover{background:var(--soft);color:var(--ink-2);}
.rev-emoji{width:58px;height:58px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(150deg,var(--orange),#FF9166);color:#fff;box-shadow:0 8px 18px rgba(255,107,61,.30);}
.rev-emoji svg{width:30px;height:30px;}
.rev-emoji-ok{background:linear-gradient(150deg,var(--teal),var(--teal-dark));box-shadow:0 8px 18px rgba(18,181,166,.30);}
.rev-title{font-size:23px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.rev-sub{font-size:15px;color:var(--ink-2);margin:0 auto 20px;max-width:330px;line-height:1.55;}
.rev-actions{display:flex;flex-direction:column;gap:10px;}
.rev-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:48px;border-radius:12px;
  font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;}
.rev-btn:active{transform:scale(.98);}
.rev-btn-primary{background:var(--orange);color:#fff;border:none;box-shadow:0 8px 18px rgba(255,107,61,.30);}
.rev-btn-primary:hover{background:var(--orange-dark);}
.rev-btn-primary:disabled{opacity:.6;cursor:default;box-shadow:none;}
.rev-btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.rev-btn-ghost:hover{border-color:var(--ink);}
.rev-form{text-align:left;display:flex;flex-direction:column;gap:14px;}
.rev-field{display:flex;flex-direction:column;gap:6px;}
.rev-field>span{font-size:13px;font-weight:700;color:var(--ink-2);}
.rev-input,.rev-textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--soft);resize:vertical;}
.rev-input:focus,.rev-textarea:focus{outline:none;border-color:var(--orange);background:#fff;}
.rev-textarea{min-height:88px;}
.rev-err{color:var(--orange-dark);font-size:13px;font-weight:600;margin:-4px 0 0;}
.rev-btn:focus-visible,.rev-x:focus-visible,.rev-input:focus-visible,.rev-textarea:focus-visible{
  outline:3px solid rgba(255,107,61,.35);outline-offset:2px;}
@media (max-width:480px){.rev-card{padding:24px 18px 20px;}.rev-title{font-size:21px;}}

/* ===== P0-6 Settings: non-medical disclaimer prose card ===== */
.settings-view .set-card.set-note{ padding:16px 18px; }
.settings-view .set-card.set-note p{ font-size:13px; line-height:1.6; color:var(--ink-2); margin:0; }
.settings-view .set-card.set-note p + p{ margin-top:10px; }

/* ============================================================
   Rich course-lesson blocks (courseBlocks.js) - premium illustrated lessons
   ============================================================ */
.cb{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.cb-p{ font-size:15px; line-height:1.62; color:var(--ink-2,#3f4658); margin:0; }
.cb-p strong{ color:var(--pl-ink,#1b2030); font-weight:700; }
.cb-h{ font-family:var(--serif,Fraunces),serif; font-weight:600; font-size:17px; letter-spacing:-.01em;
  color:var(--pl-ink,#1b2030); margin:4px 0 -4px; }
/* illustration */
.cb-fig{ margin:2px 0; }
.cb-fig-art{ border-radius:16px; overflow:hidden; background:
  radial-gradient(120% 140% at 8% -10%, #FFE7DB 0%, rgba(255,231,219,0) 55%),
  radial-gradient(120% 130% at 100% 0%, #D6F4EF 0%, rgba(214,244,239,0) 52%),
  linear-gradient(180deg,#FFFDFB,#F6F8F9);
  border:1px solid #EEE7E0; }
.cb-fig-art svg{ display:block; width:100%; height:auto; }
.cb-fig figcaption{ margin-top:7px; font-size:12.5px; color:var(--muted,#8b91a1); text-align:center; }
/* callout */
.cb-callout{ display:flex; gap:12px; padding:14px 16px; border-radius:16px; align-items:flex-start; }
.cb-callout-ic{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; }
.cb-callout-ic svg{ width:17px; height:17px; }
.cb-callout-body b{ display:block; font-size:14px; font-weight:700; color:var(--pl-ink,#1b2030); margin-bottom:2px; }
.cb-callout-body p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-2,#3f4658); }
.cb-tip{ background:#FFF1E9; } .cb-tip .cb-callout-ic{ background:linear-gradient(150deg,#FF8A4C,#F2542D); }
.cb-key{ background:#FCF3DC; } .cb-key .cb-callout-ic{ background:linear-gradient(150deg,#F5B83C,#E1992B); }
.cb-insight{ background:#E6F7F3; } .cb-insight .cb-callout-ic{ background:linear-gradient(150deg,#2FC4B6,#0E9488); }
/* steps */
.cb-steps{ margin:0; padding:0; list-style:none; counter-reset:cb; display:flex; flex-direction:column; gap:9px; }
.cb-steps li{ position:relative; padding-left:38px; font-size:14.5px; line-height:1.5; color:var(--ink-2,#3f4658); counter-increment:cb; }
.cb-steps li::before{ content:counter(cb); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:50%;
  background:var(--soft,#f6f7f9); color:var(--pl-warm-d,#E8431B); font-weight:800; font-size:13px; display:grid; place-items:center; }
/* micro quiz */
.cb-quiz{ border:1.5px solid #EAE6F0; border-radius:18px; padding:16px; background:#fff; }
.cb-quiz-tag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-dark,#0E9488); margin-bottom:6px; }
.cb-quiz-q p{ margin:0 0 12px; font-size:15px; font-weight:600; color:var(--pl-ink,#1b2030); line-height:1.45; }
.cb-opts{ display:flex; flex-direction:column; gap:8px; }
.cb-opt{ text-align:left; padding:11px 14px; border-radius:12px; border:1.5px solid var(--line,#e5e7eb); background:#fff;
  font:inherit; font-size:14.5px; color:var(--ink-2,#3f4658); cursor:pointer; transition:border-color .15s, background .15s; }
.cb-opt:hover:not(:disabled){ border-color:#d7dce4; background:var(--soft,#f6f7f9); }
.cb-opt:disabled{ cursor:default; }
.cb-opt.is-correct{ border-color:#2FB07D; background:#EAF9F1; color:#16834f; font-weight:600; }
.cb-opt.is-wrong{ border-color:#F0A39B; background:#FDECE8; color:#b04a2e; }
.cb-quiz-fb{ margin-top:11px; font-size:13.5px; line-height:1.55; color:var(--ink-2,#3f4658); }
.cb-quiz-fb .cb-quiz-verdict{ font-weight:800; color:var(--pl-ink,#1b2030); }
.cb-opt:focus-visible{ outline:2.5px solid rgba(255,90,46,.4); outline-offset:2px; }
/* try-it */
.cb-try{ border:1.5px dashed #DDD6CE; border-radius:16px; padding:14px 16px; background:#FFFDF9; }
.cb-try b{ display:block; font-size:14px; color:var(--pl-ink,#1b2030); margin-bottom:3px; }
.cb-try p{ margin:0 0 10px; font-size:14px; line-height:1.55; color:var(--ink-2,#3f4658); }
.cb-try-btn{ padding:8px 16px; border-radius:999px; border:1.5px solid var(--line,#e5e7eb); background:#fff;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--pl-ink,#1b2030); cursor:pointer; }
.cb-try-btn:hover{ border-color:var(--pl-ink,#1b2030); }
.cb-try-reveal{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--ink-2,#3f4658); }

/* ============================================================
   Assessment hub cards + Self-Review (.sr-*) + Text Test (.tt-*)
   (cognitive profile .cp-* CSS is injected by cognitiveProfile.js)
   ============================================================ */
.tv-assess .tv-as-list{ display:flex; flex-direction:column; gap:10px; }
.tv-as-card{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px 16px; font:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .18s ease; }
.tv-as-card:hover{ border-color:#d7dce4; transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(20,28,45,.45); }
.tv-as-card:focus-visible{ outline:2.5px solid rgba(255,90,46,.4); outline-offset:2px; }
.tv-as-dot{ flex:none; width:14px; height:14px; border-radius:50%; }
.tv-as-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tv-as-body b{ font-size:15.5px; font-weight:700; color:var(--pl-ink,#1b2030); }
.tv-as-body i{ font-style:normal; font-size:13px; color:var(--ink-2,#3f4658); }
.tv-as-meta{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--muted,#8b91a1); margin-top:2px; }
.tv-as-cta{ flex:none; font-size:13.5px; font-weight:800; color:var(--orange,#FF5A2E);
  border:1.5px solid #FFD7C7; background:#FFF1EC; padding:8px 14px; border-radius:999px; }

/* ===== Self-Review (subjective memory self-report) ===== */
.sr-review{ max-width:620px; margin:0 auto; padding:8px 0 28px; }
.sr-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sr-cancel{ background:none; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:14px; color:var(--pl-teal-d,#0E9488); padding:6px 4px; border-radius:8px; }
.sr-cancel:hover{ color:var(--pl-warm-d,#E8431B); }
.sr-cancel:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,61,.32); }
.sr-count{ font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--pl-teal-d,#0E9488); }
.sr-progress{ height:8px; border-radius:999px; background:#EEE7E1; overflow:hidden; margin-bottom:26px; }
.sr-progress > span{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--pl-warm,#FF6B3D),#FF9166); transition:width .4s cubic-bezier(.3,.8,.3,1); }
.sr-card{ position:relative; border-radius:24px; border:1px solid #F2E5DC; padding:30px 28px 24px;
  background:radial-gradient(120% 130% at 8% -10%, #FFE7DB 0%, rgba(255,231,219,0) 50%),radial-gradient(120% 120% at 104% 6%, #D3F4EF 0%, rgba(211,244,239,0) 48%),linear-gradient(180deg,#FFFDFB,#FAF8F6);
  box-shadow:0 18px 50px -30px rgba(120,70,40,.30); }
.sr-facet{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pl-teal-d,#0E9488); margin-bottom:12px; }
.sr-q{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.4vw,30px); line-height:1.16; letter-spacing:-.01em; color:var(--pl-ink); margin:0 0 8px; }
.sr-hint{ font-size:14.5px; color:var(--ink-2); margin:0 0 20px; }
.sr-opts{ display:flex; flex-direction:column; gap:9px; }
.sr-opt{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer; font:inherit; font-size:15.5px; font-weight:600; color:var(--pl-ink); padding:13px 16px; border-radius:14px; border:1.5px solid #EADFD6; background:#fff; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.sr-opt:hover{ border-color:var(--pl-warm,#FF6B3D); }
.sr-opt:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,61,.32); }
.sr-opt-dot{ flex:none; width:20px; height:20px; border-radius:50%; border:2px solid #D7CABE; transition:border-color .15s ease, background .15s ease; }
.sr-opt.is-sel{ border-color:var(--pl-warm,#FF6B3D); background:#FFF4EE; }
.sr-opt.is-sel .sr-opt-dot{ border-color:var(--pl-warm,#FF6B3D); background:var(--pl-warm,#FF6B3D); box-shadow:inset 0 0 0 3px #fff; }
.sr-opt-lab{ flex:1; min-width:0; }
.sr-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:24px; }
.sr-back{ background:none; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:15px; color:var(--ink-2); padding:11px 6px; border-radius:10px; }
.sr-back:hover{ color:var(--pl-ink); }
.sr-back:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,61,.32); }
.sr-next{ min-width:128px; justify-content:center; }
.sr-next:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
@media (max-width:520px){ .sr-card{ padding:24px 18px 20px; } .sr-opt{ padding:12px 14px; font-size:15px; } }

/* ===== Textual Memory Test (.tt-*) ===== */
.tt{ max-width:640px; margin:0 auto; padding:0 16px 40px; }
.tt-bar{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.tt-title{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--pl-ink); }
.tt-x{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink-2); font-size:22px; line-height:1; display:grid; place-items:center; }
.tt-x:hover{ border-color:var(--ink); }
.tt-track{ display:flex; gap:8px; margin:0 2px 22px; }
.tt-pip{ flex:1; height:5px; border-radius:999px; background:var(--line); transition:background .3s; }
.tt-pip.is-now{ background:var(--orange); } .tt-pip.is-done{ background:var(--teal); }
.tt-screen{ animation:tt-rise .45s cubic-bezier(.2,.72,.28,1) both; }
@keyframes tt-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .tt-screen{ animation:none; } }
.tt-kicker,.tt-stage-tag{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:12px; }
.tt-h1{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,4vw,34px); line-height:1.08; letter-spacing:-.01em; color:var(--pl-ink); margin:0 0 12px; }
.tt-lead{ font-size:16px; line-height:1.55; color:var(--ink-2); margin:0 0 18px; }
.tt-list{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; }
.tt-list li{ font-size:15px; color:var(--ink-2); padding-left:18px; position:relative; line-height:1.5; }
.tt-list li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.tt-note{ font-size:13px; line-height:1.55; color:var(--muted); margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.tt-hint{ font-size:13.5px; color:var(--muted); margin:14px 0 0; }
.tt-go{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; } .tt-go svg{ width:18px; height:18px; }
.tt-cue{ display:flex; gap:12px; align-items:flex-start; background:#FFF3EE; border:1.5px solid #FFD7C7; border-radius:16px; padding:16px; margin:6px 0 22px; font-size:15px; line-height:1.5; color:var(--ink-2); }
.tt-cue-ic{ flex:none; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--orange); display:grid; place-items:center; } .tt-cue-ic svg{ width:20px; height:20px; }
.tt-study{ text-align:center; }
.tt-timer{ font-family:var(--serif); font-weight:600; font-size:46px; color:var(--teal-dark); line-height:1; margin:8px 0 22px; }
.tt-timer.small{ font-size:34px; } .tt-timer.is-low{ color:var(--orange); }
.tt-words{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px; }
.tt-word{ font-family:var(--serif); font-size:22px; font-weight:600; color:var(--pl-ink); background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:10px 16px; }
.tt-distract{ text-align:center; }
.tt-input{ width:100%; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; font-size:16px; color:var(--ink); background:#fff; margin-bottom:14px; }
.tt-input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,107,61,.14); }
.tt-recall-in{ resize:vertical; min-height:120px; line-height:1.7; }
.tt-span-input{ text-align:center; font-family:var(--serif); font-size:28px; letter-spacing:.2em; }
.tt-span-flash{ text-align:center; }
.tt-seq{ display:flex; gap:14px; justify-content:center; margin:24px 0 18px; }
.tt-digit{ font-family:var(--serif); font-weight:600; font-size:44px; color:var(--pl-ink); width:58px; height:70px; display:grid; place-items:center; background:#fff; border:1.5px solid var(--line); border-radius:14px; }
.tt-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 20px; }
.tt-chip{ font-size:16px; font-weight:600; color:var(--ink-2); background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; transition:all .15s; }
.tt-chip:hover{ border-color:var(--ink); } .tt-chip.is-on{ background:var(--teal); border-color:var(--teal); color:#fff; }
.tt-chip:focus-visible,.tt-x:focus-visible,.tt-go:focus-visible,.tt-bell:focus-visible{ outline:3px solid rgba(18,181,166,.5); outline-offset:2px; }
.tt-bell{ display:flex; align-items:center; gap:10px; background:#fff; color:var(--orange); border:1.5px solid #FFD7C7; border-radius:14px; padding:14px 20px; font-size:16px; font-weight:700; margin:4px 0 16px; }
.tt-bell:hover{ background:#FFF3EE; } .tt-bell.is-rung{ background:var(--teal); border-color:var(--teal); color:#fff; cursor:default; }
.tt-bell-ic{ display:grid; place-items:center; } .tt-bell-ic svg{ width:22px; height:22px; }
.tt-done{ text-align:left; }
.tt-score{ font-family:var(--serif); margin:6px 0 18px; }
.tt-score b{ font-weight:600; font-size:56px; color:var(--pl-ink); line-height:1; } .tt-score i{ font-style:normal; font-size:22px; color:var(--muted); margin-left:6px; }
.tt-bars{ display:grid; gap:12px; margin-bottom:8px; }
.tt-bar-top{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-2); margin-bottom:5px; } .tt-bar-top b{ font-weight:800; color:var(--pl-ink); }
.tt-bar{ height:9px; border-radius:999px; background:var(--soft); overflow:hidden; }
.tt-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--teal)); }

/* ============================================================
   Tracker (progress journal + timeline) - .trk-*
   ============================================================ */
.trk-compose{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px; margin-top:14px;
  box-shadow:0 10px 30px -22px rgba(20,28,45,.5); }
.trk-text{ width:100%; border:1.5px solid var(--line); border-radius:14px; padding:13px 15px; font:inherit; font-size:15.5px;
  color:var(--pl-ink,#1b2030); background:var(--soft,#f6f7f9); resize:vertical; min-height:74px; line-height:1.55; }
.trk-text:focus{ outline:none; border-color:var(--orange,#FF5A2E); background:#fff; box-shadow:0 0 0 4px rgba(255,90,46,.12); }
.trk-prompts{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.trk-prompt{ font:inherit; font-size:13px; font-weight:600; color:var(--ink-2,#3f4658); background:#fff;
  border:1.5px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer; transition:all .15s; }
.trk-prompt:hover{ border-color:#d7dce4; }
.trk-prompt.is-on{ background:#E6F7F3; border-color:#BFE9E0; color:var(--teal-dark,#0E9488); }
.trk-compose-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.trk-feed{ display:flex; flex-direction:column; gap:12px; margin-top:18px; position:relative; }
.trk-item{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 18px;
  box-shadow:0 8px 24px -20px rgba(20,28,45,.5); }
.trk-note-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.trk-when{ font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted,#8b91a1); }
.trk-actions{ display:flex; gap:4px; }
.trk-ic{ width:30px; height:30px; border-radius:9px; border:none; background:transparent; color:var(--muted,#8b91a1);
  cursor:pointer; display:grid; place-items:center; transition:background .15s, color .15s; }
.trk-ic svg{ width:16px; height:16px; }
.trk-ic:hover{ background:var(--soft,#f6f7f9); color:var(--ink-2,#3f4658); }
.trk-prompt-tag{ display:inline-block; font-size:11.5px; font-weight:700; color:var(--teal-dark,#0E9488);
  background:#E6F7F3; padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.trk-note-text{ margin:0; font-size:15px; line-height:1.6; color:var(--pl-ink,#1b2030); white-space:normal; }
.trk-item.is-editing .trk-edit-area{ width:100%; border:1.5px solid var(--orange,#FF5A2E); border-radius:12px; padding:12px 14px;
  font:inherit; font-size:15px; line-height:1.55; color:var(--pl-ink,#1b2030); min-height:96px; resize:vertical; }
.trk-edit-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }
.trk-mile{ display:flex; align-items:center; gap:13px; }
.trk-mile-dot{ flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; }
.trk-mile-dot svg{ width:18px; height:18px; }
.trk-mile-body{ flex:1; min-width:0; }
.trk-mile-top{ display:flex; align-items:baseline; gap:8px; }
.trk-mile-top b{ font-size:14.5px; font-weight:700; color:var(--pl-ink,#1b2030); }
.trk-mile-val{ font-family:var(--serif,Fraunces),serif; font-weight:600; font-size:18px; color:var(--pl-warm-d,#E8431B); margin-left:auto; }
.trk-empty{ text-align:center; color:var(--muted,#8b91a1); font-size:14.5px; padding:34px 18px; line-height:1.6; }

/* ============================================================
   Timed Memory Test (memoryTestPro.js + testBlocksMA.js) - .mt-*
   (.mt-sfr-* from testBlocksSFR.js is injected by memoryTestPro.js)
   ============================================================ */
.mt-test{ --mt-warm:var(--orange,#FF5A2E); --mt-teal:var(--teal,#12B5A6); --mt-ink:var(--pl-ink,#1b2030);
  max-width:560px; margin:0 auto; padding:4px 2px 8px; color:var(--mt-ink); }
.mt-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 2px 14px; }
.mt-kicker{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mt-teal); }
.mt-clock{ font-family:var(--serif,Georgia,serif); font-weight:600; font-size:26px; line-height:1; color:var(--mt-ink); font-variant-numeric:tabular-nums; min-width:54px; text-align:right; transition:color .2s ease; }
.mt-clock.is-low{ color:var(--mt-warm); }
.mt-stage{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.mt-intro{ max-width:460px; }
.mt-lead{ font-family:var(--serif,Georgia,serif); font-weight:600; font-size:23px; letter-spacing:-.01em; color:var(--mt-ink); margin:0 0 6px; }
.mt-sub{ font-size:14.5px; line-height:1.5; color:#5a6172; margin:0; }
.mt-words{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px 0; }
.mt-word{ font-family:var(--serif,Georgia,serif); font-weight:600; font-size:20px; color:var(--mt-ink); background:#fff; border:1.5px solid #e7e9f0; border-radius:14px; padding:13px 20px; box-shadow:0 4px 12px rgba(20,30,60,.05); }
.mt-count{ font-size:13px; font-weight:700; color:var(--mt-teal); margin:2px 0 0; font-variant-numeric:tabular-nums; }
.mt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; }
.mt-chip{ display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; font-family:inherit; font-size:16px; font-weight:600; color:var(--mt-ink); background:#fff; border:1.5px solid #e7e9f0; border-radius:14px; padding:14px 16px; min-height:54px; transition:border-color .12s, background .12s, transform .06s; }
.mt-chip:hover{ border-color:#cfd3e0; } .mt-chip:active{ transform:scale(.985); }
.mt-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.4); }
.mt-tick{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; border:2px solid #cfd3e0; position:relative; transition:border-color .12s, background .12s; }
.mt-chip.is-on{ border-color:var(--mt-teal); background:#eafaf7; }
.mt-chip.is-on .mt-tick{ border-color:var(--mt-teal); background:var(--mt-teal); }
.mt-chip.is-on .mt-tick::after{ content:""; position:absolute; left:6px; top:3px; width:6px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.mt-done{ margin-top:6px; cursor:pointer; font-family:inherit; font-weight:800; font-size:16px; color:#fff; background:linear-gradient(150deg,var(--mt-warm,#FF5A2E),#FF9166); border:none; border-radius:16px; padding:15px 30px; box-shadow:0 10px 22px rgba(255,90,46,.28); transition:filter .12s, transform .06s; }
.mt-done:hover{ filter:brightness(1.04); } .mt-done:active{ transform:scale(.985); }
.mt-done:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,90,46,.45); }
.mt-tap-rule{ font-size:16px; font-weight:600; color:var(--mt-ink); margin:0; }
.mt-example{ margin:2px 0; }
.mt-vig-stage{ display:grid; place-items:center; width:230px; height:230px; cursor:pointer; background:#fff; border:1.5px solid #e7e9f0; border-radius:28px; padding:0; box-shadow:0 10px 26px rgba(20,30,60,.07); transition:box-shadow .12s, transform .06s; }
.mt-vig-stage:active{ transform:scale(.99); } .mt-vig-stage:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(18,181,166,.4); }
.mt-slot{ display:grid; place-items:center; width:100%; height:100%; border-radius:26px; transition:background .12s; }
.mt-slot svg{ display:block; }
.mt-slot.is-flash-ok{ background:rgba(43,168,74,.16); } .mt-slot.is-flash-bad{ background:rgba(229,57,138,.16); }
.mt-vig-hint{ margin-top:2px; }
@media (max-width:420px){ .mt-vig-stage{ width:200px; height:200px; } .mt-lead{ font-size:21px; } }
@media (prefers-reduced-motion:reduce){ .mt-chip,.mt-done,.mt-vig-stage,.mt-slot,.mt-clock{ transition:none; } }

/* intro + results screens (memoryTestPro.js) */
.mt-introscreen,.mt-results{ max-width:540px; margin:0 auto; text-align:center; padding:18px 4px 24px; }
.mt-intro-h,.mt-results .pl-kicker+*{ }
.mt-intro-h{ font-family:var(--serif,Fraunces),serif; font-weight:600; font-size:clamp(26px,4vw,34px); letter-spacing:-.01em; color:var(--pl-ink); margin:8px 0 12px; }
.mt-intro-p{ color:var(--ink-2,#3f4658); font-size:15.5px; line-height:1.6; margin:0 auto 18px; max-width:34em; }
.mt-intro-list{ list-style:none; padding:0; margin:0 auto 22px; max-width:30em; text-align:left; display:flex; flex-direction:column; gap:10px; }
.mt-intro-list li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:var(--ink-2,#3f4658); }
.mt-intro-list li::before{ content:""; position:absolute; left:4px; top:8px; width:8px; height:8px; border-radius:50%; background:var(--teal,#12B5A6); }
.mt-intro-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.mt-res-ring{ position:relative; width:150px; height:150px; margin:6px auto 8px; }
.mt-res-ring svg{ width:150px; height:150px; }
.mt-res-ring-val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mt-res-ring-val b{ font-family:var(--serif,Fraunces),serif; font-weight:600; font-size:44px; line-height:1; color:var(--pl-ink); }
.mt-res-ring-val span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#8b91a1); margin-top:2px; }
.mt-res-delta{ font-size:14.5px; font-weight:600; color:var(--ink-2,#3f4658); margin:0 0 18px; }
.mt-res-rows{ display:flex; flex-direction:column; gap:12px; text-align:left; margin-bottom:16px; }
.mt-res-top{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:5px; }
.mt-res-name{ font-weight:600; color:var(--pl-ink); } .mt-res-band{ font-weight:700; font-variant-numeric:tabular-nums; }
.mt-res-bar{ height:9px; border-radius:999px; background:rgba(20,30,40,.07); overflow:hidden; }
.mt-res-bar span{ display:block; height:100%; border-radius:999px; }
.mt-res-strong{ font-size:14.5px; color:var(--ink-2,#3f4658); margin:6px 0 16px; }
.mt-res-done{ display:inline-flex; align-items:center; gap:9px; }
.mt-res-fine{ font-size:12px; line-height:1.55; color:var(--muted,#8b91a1); margin:16px auto 0; max-width:40em; }

/* ============================================================
   Secondary timed test rounds - .mt2-* (testBlocksMemAtt2.js + testBlocksFlexReasSpeed2.js)
   Reuse the shared .mt-* chrome (bar/kicker/clock/stage/done/lead/sub).
   ============================================================ */
.mt-2 .mt-stage{ max-width:540px; }
/* Corsi spatial-span board */
.mt2-grid{ display:grid; grid-template-columns:repeat(3,72px); grid-template-rows:repeat(3,72px); gap:12px; }
.mt2-cell{ width:72px; height:72px; border-radius:16px; background:rgba(18,181,166,.10); border:1.5px solid #e3e7ef; padding:0; cursor:pointer; transition:background .12s, transform .06s, box-shadow .12s; }
.mt2-cell:active{ transform:scale(.97); }
.mt2-cell:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.4); }
.mt2-cell.is-lit{ background:var(--teal,#12B5A6); border-color:var(--teal,#12B5A6); box-shadow:0 8px 20px rgba(18,181,166,.35); }
.mt2-cell.is-tapped{ background:rgba(18,181,166,.5); border-color:rgba(18,181,166,.6); }
.mt2-cell.is-wrong{ background:rgba(255,90,46,.45); border-color:rgba(255,90,46,.55); }
@media (max-width:420px){ .mt2-grid{ grid-template-columns:repeat(3,60px); grid-template-rows:repeat(3,60px); gap:10px; } .mt2-cell{ width:60px; height:60px; } }
/* Flanker */
.mt2-flank-row{ display:flex; align-items:center; justify-content:center; gap:14px; min-height:60px; }
.mt2-flank-demo{ opacity:.85; }
.mt2-arrow{ display:inline-flex; } .mt2-arrow svg{ display:block; }
.mt2-feedback{ height:24px; font-weight:800; font-size:16px; line-height:24px; color:transparent; }
.mt2-feedback.is-ok{ color:#2BA84A; } .mt2-feedback.is-bad{ color:#E5398A; }
.mt2-lr{ display:flex; gap:12px; }
.mt2-lrbtn{ cursor:pointer; font-family:inherit; font-weight:800; font-size:16px; color:var(--pl-ink,#1b2030); background:#fff; border:1.5px solid #e3e7ef; border-radius:14px; padding:14px 26px; min-width:120px; box-shadow:0 4px 12px rgba(20,30,60,.05); transition:filter .12s, transform .06s, box-shadow .12s; }
.mt2-lrbtn:hover{ filter:brightness(.99); } .mt2-lrbtn:active{ transform:scale(.985); }
.mt2-lrbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.4); }
/* Divided-attention tile */
.mt2-tile{ display:grid; place-items:center; width:160px; height:160px; border-radius:28px; border:none; padding:0; cursor:pointer; box-shadow:0 10px 26px rgba(20,30,60,.12); transition:transform .06s, box-shadow .12s; }
.mt2-tile:active{ transform:scale(.99); } .mt2-tile:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(18,181,166,.45); }
.mt2-glyph{ font-family:var(--serif,Georgia,serif); font-weight:700; font-size:74px; line-height:1; color:#fff; }
.mt2-tile.is-flash-ok{ box-shadow:0 0 0 4px rgba(43,168,74,.6); }
.mt2-tile.is-flash-bad{ box-shadow:0 0 0 4px rgba(229,57,138,.6); }
.mt2-demo-row{ display:flex; gap:14px; justify-content:center; }
.mt2-tile-demo{ width:84px; height:84px; border-radius:18px; box-shadow:0 6px 16px rgba(20,30,60,.10); }
.mt2-tile-demo .mt2-glyph{ font-size:42px; }
/* shared correct/wrong flash chip (set 2) */
.mt2-fb{ height:10px; width:64px; border-radius:999px; background:transparent; transition:background .12s ease; margin:0 auto; }
.mt2-fb.is-ok{ background:rgba(43,168,74,.55); } .mt2-fb.is-bad{ background:rgba(229,57,138,.55); }
/* Stroop */
.mt2-stroop-word{ font-family:var(--serif,Georgia,serif); font-weight:800; font-size:clamp(48px,12vw,72px); line-height:1; letter-spacing:.02em; margin:6px 0; min-height:1em; text-transform:uppercase; }
.mt2-swatches{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:4px 0; }
.mt2-swatch{ position:relative; width:64px; height:56px; border-radius:16px; border:3px solid #fff; cursor:pointer; box-shadow:0 6px 16px rgba(20,30,60,.16); transition:transform .06s ease, box-shadow .12s ease; }
.mt2-swatch:hover{ box-shadow:0 8px 20px rgba(20,30,60,.22); } .mt2-swatch:active{ transform:scale(.96); }
.mt2-swatch:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(18,181,166,.5); }
.mt2-swatch-k{ position:absolute; right:5px; bottom:3px; font-size:11px; font-weight:800; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; }
@media (max-width:420px){ .mt2-swatch{ width:54px; height:50px; } }
/* Odd-one-out (renamed to avoid the corsi .mt2-grid/.mt2-cell clash) */
.mt2-odd-head{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.mt2-lvl{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal,#12B5A6); font-variant-numeric:tabular-nums; }
.mt2-oo-grid{ display:grid; gap:12px; width:100%; max-width:360px; margin:4px auto; }
.mt2-oo-grid-demo{ max-width:240px; pointer-events:none; }
.mt2-oo-cell{ display:grid; place-items:center; aspect-ratio:1/1; background:#fff; border:1.5px solid #e7e9f0; border-radius:18px; cursor:pointer; padding:0; box-shadow:0 4px 12px rgba(20,30,60,.05); transition:border-color .12s ease, background .12s ease, transform .06s ease; }
.mt2-oo-cell:hover{ border-color:#cfd3e0; } .mt2-oo-cell:active{ transform:scale(.97); }
.mt2-oo-cell:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.4); }
.mt2-oo-cell.is-answer{ border-color:#2BA84A; background:rgba(43,168,74,.1); }
.mt2-oo-cell.is-wrong{ border-color:#E5398A; background:rgba(229,57,138,.1); }
.mt2-oo-cell svg{ display:block; }
.mt2-oo-cell[disabled]{ cursor:default; }
/* covered tile (round 12: tap where the odd one was) - a calm face-down plate with a center dot */
.mt2-oo-cell.is-covered{ background:linear-gradient(160deg,#eef1f6,#e3e7f0); border-color:#dfe3ec; }
.mt2-oo-cell.is-covered:hover{ border-color:var(--teal,#12B5A6); }
.mt2-oo-cover{ width:14px; height:14px; border-radius:50%; background:rgba(27,32,48,.16); }
/* Symbol search */
.mt2-target{ display:grid; place-items:center; width:96px; height:96px; margin:2px auto; background:#eafaf7; border:1.5px solid rgba(18,181,166,.3); border-radius:22px; }
.mt2-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:4px 0; }
.mt2-row-demo{ pointer-events:none; }
.mt2-cand{ display:grid; place-items:center; width:62px; height:62px; background:#fff; border:1.5px solid #e7e9f0; border-radius:16px; box-shadow:0 4px 12px rgba(20,30,60,.05); }
.mt2-cand svg{ display:block; }
.mt2-yesno{ display:flex; gap:14px; justify-content:center; margin-top:4px; }
.mt2-yesno .mt-done{ min-width:120px; margin-top:0; }
.mt2-no{ background:#fff; color:var(--pl-ink,#1b2030); border:1.5px solid #e7e9f0; box-shadow:0 6px 16px rgba(20,30,60,.06); }
.mt2-no:hover{ filter:none; border-color:#cfd3e0; }
@media (max-width:420px){ .mt2-cand{ width:54px; height:54px; } .mt2-target{ width:84px; height:84px; } .mt2-tile{ width:140px; height:140px; } .mt2-glyph{ font-size:64px; } .mt2-lrbtn{ min-width:104px; padding:13px 20px; } }
@media (prefers-reduced-motion:reduce){ .mt2-cell,.mt2-tile,.mt2-lrbtn,.mt2-oo-cell,.mt2-fb,.mt2-swatch{ transition:none; } }

/* ============================================================
   PREMIUM TEST DESIGN - "journey" framing for the timed Memory Test
   Shell w/ global progress + focused mesh surface, refined timer pill,
   premium intro + results. Desktop & mobile. (overrides the plain .mt-* base)
   ============================================================ */
@keyframes mt-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes mt-clockpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

/* --- The persistent test shell (rounds) --- */
.mt-shell{ position:relative; max-width:660px; margin:8px auto 0; padding:18px 26px 32px; border-radius:30px;
  background:
    radial-gradient(135% 120% at 0% -12%, #FFE9DE 0%, rgba(255,233,222,0) 46%),
    radial-gradient(120% 120% at 102% -4%, #DAF4EF 0%, rgba(218,244,239,0) 44%),
    linear-gradient(180deg,#FFFDFB 0%, #FAF8F6 100%);
  border:1px solid #F1E9E1;
  box-shadow:0 26px 64px -40px rgba(120,70,40,.40), inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden; min-height:60vh;
  animation:mt-rise .42s cubic-bezier(.2,.7,.2,1) both; }
.mt-shell-glow{ position:absolute; inset:0; pointer-events:none; }
.mt-shell-glow::before{ content:""; position:absolute; right:-80px; top:-90px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,61,.16), rgba(255,122,61,0) 70%); }
.mt-shell-glow::after{ content:""; position:absolute; left:-90px; bottom:-110px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(18,181,166,.12), rgba(18,181,166,0) 70%); }

/* progress strip */
.mt-shell-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:2px 2px 16px; }
.mt-shell-step{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0E9488; white-space:nowrap; }
.mt-shell-step i{ font-style:normal; color:#ad9f95; letter-spacing:.08em; }
.mt-pips{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.mt-pip{ width:16px; height:6px; border-radius:999px; background:rgba(40,28,18,.12); transition:width .35s ease, background .35s ease, box-shadow .35s ease; }
.mt-pip.is-done{ background:var(--c,#FF7A4D); opacity:.48; }
.mt-pip.is-now{ background:var(--c,#FF7A4D); width:28px; box-shadow:0 0 0 3px color-mix(in srgb, var(--c,#FF7A4D) 22%, transparent); }

.mt-shell-stage{ position:relative; }
/* inside the shell the shell owns the label; the block keeps only its live timer */
.mt-shell .mt-test{ padding:0; }
.mt-shell .mt-kicker{ display:none; }
.mt-shell .mt-bar{ justify-content:flex-end; padding:0 0 16px; min-height:30px; }

/* --- Refined timer pill (shared) --- */
.mt-shell .mt-clock{ display:inline-flex; align-items:baseline; justify-content:center; min-width:66px; padding:7px 16px;
  font-size:23px; background:#fff; border:1px solid #efe5dc; border-radius:999px;
  box-shadow:0 8px 18px -10px rgba(120,70,40,.30), inset 0 1px 0 rgba(255,255,255,.8); }
.mt-shell .mt-clock.is-low{ color:var(--orange,#FF5A2E); background:#FFF1EB; border-color:#FFD2BD;
  animation:mt-clockpulse 1s ease-in-out infinite; }

/* --- Premium INTRO screen --- */
.mt-introscreen{ position:relative; max-width:580px; margin:8px auto 0; text-align:center; padding:38px 32px 34px; border-radius:32px;
  background:
    radial-gradient(135% 120% at 0% -12%, #FFE9DE 0%, rgba(255,233,222,0) 48%),
    radial-gradient(120% 120% at 102% -4%, #DAF4EF 0%, rgba(218,244,239,0) 46%),
    linear-gradient(180deg,#FFFDFB 0%, #FAF8F6 100%);
  border:1px solid #F1E9E1; box-shadow:0 26px 64px -40px rgba(120,70,40,.40), inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden; animation:mt-rise .42s cubic-bezier(.2,.7,.2,1) both; }
.mt-intro-medal{ position:relative; width:74px; height:74px; margin:2px auto 16px; border-radius:22px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg,#FF8A5C 0%, #FF5A2E 100%);
  box-shadow:0 18px 32px -12px rgba(255,90,46,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.mt-intro-medal svg{ width:34px; height:34px; }
.mt-introscreen .pl-kicker{ color:#0E9488; }
.mt-intro-h{ margin:6px 0 12px; }
.mt-intro-p{ color:#4a5160; }
.mt-intro-list{ background:rgba(255,255,255,.55); border:1px solid rgba(241,233,225,.9); border-radius:18px; padding:16px 18px; max-width:32em; }
.mt-intro-list li{ padding-left:28px; }
.mt-intro-list li::before{ content:""; position:absolute; left:2px; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--teal,#12B5A6); box-shadow:0 2px 6px rgba(18,181,166,.35); }
.mt-intro-list li::after{ content:""; position:absolute; left:7px; top:7px; width:4px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.mt-intro-cta .btn-primary{ box-shadow:0 14px 26px -10px rgba(255,90,46,.5); }

/* --- Premium RESULTS screen --- */
.mt-results{ position:relative; max-width:580px; margin:8px auto 0; text-align:center; padding:32px 32px 30px; border-radius:32px;
  background:
    radial-gradient(135% 120% at 0% -12%, #FFEDE4 0%, rgba(255,237,228,0) 48%),
    radial-gradient(120% 120% at 102% -4%, #DAF4EF 0%, rgba(218,244,239,0) 46%),
    linear-gradient(180deg,#FFFDFB 0%, #FAF8F6 100%);
  border:1px solid #F1E9E1; box-shadow:0 26px 64px -40px rgba(120,70,40,.40), inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden; animation:mt-rise .42s cubic-bezier(.2,.7,.2,1) both; }
.mt-results .pl-kicker{ color:#0E9488; }
.mt-res-ring{ width:172px; height:172px; }
.mt-res-ring svg{ width:172px; height:172px; }
.mt-res-ring-val b{ font-size:50px; }
.mt-res-delta{ display:inline-block; background:#fff; border:1px solid #efe5dc; border-radius:999px; padding:7px 17px;
  font-size:13.5px; color:#4a5160; box-shadow:0 8px 18px -12px rgba(120,70,40,.3); margin:2px 0 20px; }
.mt-res-rows{ background:rgba(255,255,255,.6); border:1px solid rgba(241,233,225,.9); border-radius:20px; padding:18px 18px 16px; gap:14px; margin-bottom:18px; }
.mt-res-bar{ height:10px; background:rgba(40,28,18,.07); }
.mt-res-strong{ color:#4a5160; }
.mt-res-fine{ border-top:1px solid rgba(241,233,225,.9); padding-top:12px; }

/* --- Responsive: mobile --- */
@media (max-width:560px){
  .mt-shell{ padding:14px 15px 24px; border-radius:24px; min-height:54vh; margin-top:2px; }
  .mt-shell-top{ padding-bottom:14px; gap:10px; }
  .mt-pips{ gap:4px; } .mt-pip{ width:12px; height:5px; } .mt-pip.is-now{ width:20px; }
  .mt-shell .mt-clock{ font-size:20px; min-width:58px; padding:6px 13px; }
  .mt-introscreen,.mt-results{ padding:28px 18px 26px; border-radius:26px; margin-top:2px; }
  .mt-intro-medal{ width:64px; height:64px; border-radius:19px; } .mt-intro-medal svg{ width:30px; height:30px; }
  .mt-intro-cta{ flex-direction:column-reverse; gap:8px; }
  .mt-intro-cta .btn{ width:100%; }
  .mt-res-ring,.mt-res-ring svg{ width:152px; height:152px; }
  .mt-res-done{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .mt-shell,.mt-introscreen,.mt-results{ animation:none; }
  .mt-shell .mt-clock.is-low{ animation:none; }
}
.em-reduce-motion .mt-shell,.em-reduce-motion .mt-introscreen,.em-reduce-motion .mt-results{ animation:none; }
.em-reduce-motion .mt-shell .mt-clock.is-low{ animation:none; }

/* --- Test: quit (X) control, progress spacing, hub assessment tags (v44) --- */
/* lift the progress strip away from the content: a hairline separator + more room below */
.mt-shell-top{ justify-content:flex-start; padding:2px 2px 18px; margin-bottom:14px; border-bottom:1px solid rgba(241,233,225,.85); }
.mt-pips{ flex:1 1 auto; justify-content:flex-end; }
.mt-shell-stage{ padding-top:4px; }

/* the X / close affordance (shell, intro, quick-check bar) */
.mt-x{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; padding:0; border-radius:50%;
  background:rgba(255,255,255,.7); border:1px solid #efe5dc; color:#9a8f86; cursor:pointer;
  transition:color .12s, background .12s, transform .06s; -webkit-tap-highlight-color:transparent; }
.mt-x svg{ width:17px; height:17px; display:block; }
.mt-x:hover{ color:var(--orange,#FF5A2E); background:#fff; }
.mt-x:active{ transform:scale(.92); }
.mt-x:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,90,46,.35); }
.mt-x-intro{ position:absolute; top:14px; right:14px; z-index:3; }
.mc-x{ background:transparent; border-color:rgba(20,30,60,.10); margin-left:10px; }

/* hub assessment cards: "Key test" / "Interim" tags + the key card stands out */
.tv-as-tag{ display:inline-block; margin-left:8px; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:#0E9488; background:rgba(18,181,166,.13); border-radius:999px; padding:2px 8px; vertical-align:middle; }
.tv-as-tag.is-key{ color:#fff; background:linear-gradient(135deg,#FF8A5C,#FF5A2E); box-shadow:0 4px 10px -4px rgba(255,90,46,.5); }
.tv-as-card.is-primary{ border-color:#FFD3BE !important; box-shadow:0 14px 30px -20px rgba(255,90,46,.55); }

@media (max-width:560px){
  .mt-x-intro{ top:10px; right:10px; }
  .mt-shell-top{ flex-wrap:nowrap; }
}

/* --- Test screen centering + flanker dots + divided colour swatch (v45) --- */
/* Center the whole test card vertically in the viewport (the test takes over #app). */
.mt-screen{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; padding:20px 14px; }
.mt-screen > *{ width:100%; }

/* Flanker: each arrow stacks over its marker dots (one dot = the target, two = ignore). */
.mt2-arrow{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; }
/* Clickable arrow tiles (round 5: tap the arrow with your number of dots). */
.mt2-arrow-btn{ background:none; border:0; cursor:pointer; padding:6px 8px; border-radius:14px;
  transition:background .12s, transform .06s; }
.mt2-arrow-btn:hover{ background:rgba(18,181,166,.10); }
.mt2-arrow-btn:active{ transform:scale(.95); }
.mt2-arrow-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.4); }
/* The target highlight is used ONLY in the intro demo (never during play, so it can't reveal the
   answer). It rings the example arrow with the remembered dot count. */
.mt2-arrow.is-target{ outline:2.5px solid var(--teal,#12B5A6); outline-offset:6px; border-radius:12px; }
.mt2-flank-row{ min-height:88px; }
.mt2-dots{ display:flex; gap:5px; height:9px; align-items:center; justify-content:center; }
.mt2-dots i{ width:7px; height:7px; border-radius:50%; background:#1b2030; display:block; }

/* Divided attention: a filled colour swatch chip in the prompt (clear, unambiguous target). */
.mt2-swatch-chip{ display:inline-flex; align-items:center; gap:7px; font-weight:800; color:var(--pl-ink,#1b2030); vertical-align:middle; }
.mt2-swatch-chip i{ width:18px; height:18px; border-radius:6px; display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }

/* Flanker on small screens: shrink the 5-arrow row so it always fits a 360px phone. */
@media (max-width:560px){
  .mt2-flank-row{ gap:9px; min-height:78px; }
  .mt2-arrow svg{ width:46px; height:43px; }
  .mt2-dots i{ width:6px; height:6px; }
  .mt2-dots{ gap:4px; }
}

/* Vigilance: a small filled target icon in the prompt (matches the divided colour swatch). */
.mt-target-chip{ display:inline-flex; vertical-align:middle; margin:0 1px; }
.mt-target-chip svg{ width:26px; height:26px; display:block; }

/* --- v47 polish: SFR colour vars, divided full-card fill, unified bottom controls --- */
/* SFR rounds use a .mt-sfr root (not .mt-test), so define the shared tokens here too -
   without this --mt-warm was unset and the Start button's gradient broke (looked white). */
.mt-sfr{ --mt-warm:var(--orange,#FF5A2E); --mt-teal:var(--teal,#12B5A6); --mt-ink:var(--pl-ink,#1b2030); }

/* Divided demo cards: one is a plain letter (no fill), the other is pure colour (no letter). */
.mt2-demo-letter{ background:#fff; border:1.5px solid #e7e9f0; }
.mt2-demo-letter .mt2-glyph{ color:#1b2030; }

/* Unified task layout: a stable-height stage so the answer controls always sit in the same
   place (anchored to the bottom), reducing how much the controls jump between rounds. */
.mt-test .mt-stage, .mt-sfr .mt-stage{ min-height:344px; justify-content:flex-start; }
/* the primary action row is pinned to the bottom (Start, options, Left/Right, Yes/No, swatches). */
.mt-stage > .mt-done, .mt-sfr-opts, .mt-sfr-lr, .mt2-lr, .mt2-yesno, .mt2-swatches, .mt-sfr-grid{ margin-top:auto; }
/* tap-the-stimulus rounds + lists: centre the stimulus vertically in the space above. */
.mt-vig-stage, .mt-sfr-flex .mt-sfr-card, .mt2-tile, .mt2-oo-grid, .mt2-grid, .mt-words{ margin-top:auto; margin-bottom:auto; }
@media (max-width:560px){
  .mt-test .mt-stage, .mt-sfr .mt-stage{ min-height:308px; }
}

/* --- Certificate share (results screen + tracker history) v48 --- */
.mt-res-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:2px 0 4px; }
.mt-res-cta .btn{ min-height:48px; }
.mt-res-donelink{ display:inline-block; margin:6px auto 0; background:none; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; color:var(--muted,#8b91a1); padding:8px 14px; border-radius:10px; }
.mt-res-donelink:hover{ color:var(--pl-ink,#1b2030); }
.mt-res-donelink:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.35); }
/* tracker history: small "Certificate" button on each Memory Test milestone */
.trk-cert{ color:var(--teal-dark,#0E9488); background:rgba(18,181,166,.10); border-color:rgba(18,181,166,.22); }
.trk-cert svg{ width:15px; height:15px; flex:none; }
.trk-cert:hover{ background:rgba(18,181,166,.16); }
.trk-cert:active{ transform:scale(.97); }
.trk-cert:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.35); }
.trk-cert[disabled]{ opacity:.55; cursor:default; }
@media (max-width:560px){ .mt-res-cta{ flex-direction:column; } .mt-res-cta .btn{ width:100%; } }

/* --- Detailed test statistics link + panel on the results screen (v49) --- */
.mt-res-statslink{ display:inline-block; margin:4px auto 0; background:none; border:none; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:14px; color:var(--teal-dark,#0E9488); padding:8px 14px; border-radius:10px; }
.mt-res-statslink:hover{ background:rgba(18,181,166,.09); }
.mt-res-statslink:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.35); }
.mt-res-stats{ width:100%; text-align:left; margin-top:12px; }

/* --- Tracker: per-test action buttons (Certificate + Details), one consistent pill size --- */
.trk-mile-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
/* shared pill geometry so both buttons are exactly the same height + baseline */
.trk-cert, .trk-statbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 15px; margin:0; box-sizing:border-box; line-height:1; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13px; border-radius:999px;
  border-width:1px; border-style:solid; transition:background .12s, transform .06s; }
.trk-statbtn{ color:var(--pl-ink,#1b2030); background:rgba(20,30,60,.05); border-color:rgba(20,30,60,.12); }
.trk-statbtn:hover{ background:rgba(20,30,60,.08); }
.trk-statbtn:active{ transform:scale(.97); }
.trk-statbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(18,181,166,.35); }
.trk-stats{ margin-top:10px; }

/* --- Vigilance (round 4) emoji stimulus + example (v52) --- */
.mt-slot .mt-emoji{ font-size:92px; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.mt-emoji-lg{ display:inline-block; font-size:104px; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
@media (max-width:420px){ .mt-slot .mt-emoji{ font-size:78px; } .mt-emoji-lg{ font-size:88px; } }
/* Coloured chip behind each vigilance stimulus (a distracting colour dimension to ignore). */
.mt-vig-chip{ display:grid; place-items:center; width:160px; height:160px; border-radius:34px; box-shadow:inset 0 2px 10px rgba(20,30,60,.10), 0 2px 6px rgba(20,30,60,.06); }
@media (max-width:420px){ .mt-vig-chip{ width:132px; height:132px; border-radius:28px; } }
/* Intro example chip (round 4): the emoji is outside .mt-slot, so size it explicitly + make it big. */
.mt-example .mt-vig-chip{ width:172px; height:172px; border-radius:36px; }
.mt-example .mt-vig-chip .mt-emoji{ font-size:96px; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
@media (max-width:420px){ .mt-example .mt-vig-chip{ width:148px; height:148px; } .mt-example .mt-vig-chip .mt-emoji{ font-size:82px; } }