/* PTA Web App · screen designs · 12 October 2026
Built from design.md v0.1 (approved 10 October 2026) and the approved eight key phone screens.
Fonts are kept with the files (PTA's own server in the real build). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/newsreader-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/newsreader-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--navy:#13276C; --deep:#0B1B45; --red:#E31836; --red-text:#B3122B; --teal:#35D6BE;
--cream:#FAF9F4; --white:#FFFFFF; --ink:#1B2440; --muted:#55607A; --line:#E4E2DA;
--navy-tint:#DDE3F5; --red-tint:#FBE3E7; --teal-tint:#D6F6F0; --track:#ECEAE2; --track-2:#F1EFE8;
--ok:#1F7A6C; --on-navy:#D5DBF0; --on-navy-2:#BFC8E8; --navy-mid:#33458A; --dash:#B9B6AC;
--sans:Manrope, system-ui, sans-serif; --serif:Newsreader, Georgia, serif;
--urdu:'Noto Nastaliq Urdu', serif; --naskh:'Noto Naskh Arabic', serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#E9E8E2; font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased}
a{color:var(--navy)} a:hover{color:var(--deep)}
button{font-family:var(--sans); cursor:pointer}
.num{font-variant-numeric:tabular-nums}
svg.i{flex-shrink:0}
/* ---------- review bar (outside the screen; not part of the design) ---------- */
.review{position:sticky; top:0; z-index:50; background:var(--deep); color:#fff; padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:13px}
.review b{font-weight:800}
.review .meta{color:var(--on-navy-2); font-weight:600}
.review a{color:#fff; font-weight:700; text-decoration:none; border:1px solid var(--navy-mid); border-radius:8px; padding:5px 10px}
.review a:hover{background:var(--navy)}
.review .sp{flex-grow:1}
.states{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:14px 16px 0}
.states button{height:34px; padding:0 12px; border-radius:17px; border:1px solid #C9C6BC; background:#fff; color:var(--navy); font-size:12px; font-weight:700}
.states button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.state-note{max-width:680px; margin:8px auto 0; text-align:center; font-size:12px; color:var(--muted); padding:0 16px; line-height:1.5}
[data-state]:not(.on){display:none !important}
/* ---------- the phone ---------- */
.stage{display:flex; justify-content:center; padding:18px 12px 40px}
.phone{width:390px; height:844px; background:var(--cream); border-radius:28px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(11,27,69,.18),0 12px 40px rgba(11,27,69,.12); position:relative}
.phone>.scroll{flex-grow:1; overflow-y:auto; overflow-x:hidden}
@media (max-width:430px){ .stage{padding:0} .phone{width:100%; height:100vh; border-radius:0; box-shadow:none} .review{position:static} }
/* headers */
.top{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 8px}
.top-back{display:flex; align-items:center; gap:10px; padding:16px 16px 10px}
.eyebrow{font-size:12px; font-weight:700; color:var(--muted)}
.title{font-family:var(--serif); font-size:26px; font-weight:600; color:var(--deep); line-height:1.15; margin:0}
.title.sm{font-size:22px}
.sub{font-size:13px; color:var(--muted)}
.icon-btn{position:relative; width:44px; height:44px; border-radius:22px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none}
.icon-btn .dot{position:absolute; top:8px; right:9px; width:10px; height:10px; border-radius:5px; background:var(--red); border:2px solid #fff}
.main{padding:8px 16px 16px; display:flex; flex-direction:column; gap:14px}
/* cards */
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.card.lg{border-radius:16px; padding:14px 16px}
.card.sel{border:2px solid var(--navy)}
.card-title{font-size:14px; font-weight:700; color:var(--ink)}
.row{display:flex; align-items:center; gap:10px}
.row.sb{justify-content:space-between}
.col{display:flex; flex-direction:column; gap:2px}
.small{font-size:12px; color:var(--muted)}
.label{font-size:13px; font-weight:700; color:var(--muted)}
.upper{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.strong{font-size:15px; font-weight:600}
.link-strong{font-size:13px; font-weight:700; color:var(--navy); text-decoration:none}
/* navy hero card */
.hero{background:var(--navy); color:#fff; border-radius:20px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px}
.hero .k{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--on-navy-2)}
.hero .big{font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.05}
.hero .s{font-size:13px; color:var(--on-navy)}
.daysleft{background:var(--teal); color:var(--deep); border-radius:14px; padding:8px 12px; display:flex; flex-direction:column; align-items:center}
.daysleft b{font-size:22px; font-weight:800; line-height:1}
.daysleft span{font-size:11px; font-weight:700}
.weekstrip{display:flex; gap:6px}
.weekstrip span{flex-grow:1; height:6px; border-radius:3px; background:var(--navy-mid)}
.weekstrip .d{background:var(--teal)} .weekstrip .t{background:#fff}
.hero-inner{background:var(--deep); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px}
.btn-white{background:#fff; color:var(--navy); border-radius:12px; height:48px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; text-decoration:none; border:none; width:100%}
/* ticks (daily targets) */
.tick{display:flex; align-items:center; gap:10px; font-size:13px; color:#fff; background:none; border:none; padding:2px 0; text-align:left; width:100%}
.tick .box{flex-shrink:0; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--on-navy-2); display:flex; align-items:center; justify-content:center}
.tick[aria-checked="true"] .box{background:var(--teal); border-color:var(--teal)}
.tick[aria-checked="true"] .txt{color:var(--on-navy-2); text-decoration:line-through}
/* due banner */
.due{background:#fff; border:1.5px solid var(--red); border-radius:16px; padding:14px 16px; display:flex; gap:12px; align-items:center}
.due .ic{flex-shrink:0; width:40px; height:40px; border-radius:20px; background:var(--red-tint); display:flex; align-items:center; justify-content:center}
.due .when{font-size:12px; font-weight:700; color:var(--red-text)}
.go{flex-shrink:0; width:44px; height:44px; border-radius:22px; background:var(--navy); display:flex; align-items:center; justify-content:center}
/* buttons */
.btn{height:50px; border-radius:14px; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; padding:0 16px}
.btn.lg{height:54px; font-size:16px}
.btn-primary{background:var(--navy); color:#fff; border:none}
.btn-primary:hover{color:#fff; background:#0F2058}
.btn-secondary{background:#fff; color:var(--navy); border:1px solid #C9C6BC}
.btn-ghost{background:transparent; border:none; color:var(--navy); font-size:13px; font-weight:700; height:40px; padding:0 12px}
.btn-dashed{background:#fff; color:var(--navy); border:2px dashed var(--navy)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.footer{flex-shrink:0; padding:12px 16px 18px; background:#fff; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.footer.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* chips and bands */
.chip{display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border-radius:10px; padding:4px 8px; white-space:nowrap}
.chip.navy{color:var(--navy); background:var(--navy-tint)}
.band{min-width:84px; font-size:11px; font-weight:800; border-radius:10px; padding:4px 8px; text-align:center; flex-shrink:0}
.band.strong{color:var(--deep); background:var(--teal)}
.band.dev{color:var(--navy); background:var(--navy-tint)}
.band.weak{color:var(--red-text); background:var(--red-tint)}
.band.notyet{color:var(--muted); background:var(--track-2); border:1px dashed var(--dash)}
.lo{font-size:11px; font-weight:700; border-radius:8px; padding:6px 8px; text-decoration:none}
.lo.strong{color:var(--deep); background:var(--teal)}
.lo.dev{color:var(--navy); background:var(--navy-tint)}
.lo.weak{color:var(--red-text); background:var(--red-tint); border:1px solid var(--red)}
.lo.notyet{color:var(--muted); background:var(--track-2); border:1px dashed var(--dash)}
.bar{height:8px; border-radius:4px; background:var(--track); overflow:hidden}
.bar>i{display:block; height:100%; background:var(--navy)}
/* bottom bar */
.tabbar{flex-shrink:0; height:72px; background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0 6px}
.tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-decoration:none; color:var(--muted); font-size:11px; font-weight:600}
.tabbar a span{width:52px; height:30px; border-radius:15px; display:flex; align-items:center; justify-content:center}
.tabbar a[aria-current="page"]{color:var(--navy); font-weight:700}
.tabbar a[aria-current="page"] span{background:var(--navy-tint)}
/* test screen */
.test-head{background:var(--deep); color:#fff; padding:14px 16px 12px; display:flex; flex-direction:column; gap:10px; flex-shrink:0}
.timer{background:#fff; color:var(--deep); border-radius:12px; padding:6px 12px; display:flex; align-items:center; gap:6px}
.timer b{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.timer.warn{background:var(--red-tint); color:var(--red-text)}
.prog{flex-grow:1; height:6px; border-radius:3px; background:var(--navy-mid); overflow:hidden}
.prog>i{display:block; height:6px; background:var(--teal)}
.opt{display:flex; align-items:center; gap:10px; width:100%; min-height:54px; padding:8px 14px; border-radius:12px; text-align:left; color:var(--ink); background:#fff; border:1px solid var(--line); font-size:15px}
.opt .lbl{flex-shrink:0; min-width:28px; font-weight:700; color:var(--muted)}
.opt[aria-checked="true"]{background:var(--navy-tint); border:2px solid var(--navy)}
.opt[dir="rtl"]{text-align:right}
.urdu{font-family:var(--urdu); line-height:2.2; font-size:19px; text-align:right}
.qmap{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px}
.qmap span{height:32px; border-radius:8px; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); color:var(--muted)}
.qmap .a{background:var(--navy); color:#fff; border:none}
.qmap .f{border:2px solid var(--red); color:var(--red-text)}
.qmap .c{background:var(--teal); color:var(--deep); border:none; outline:2px solid var(--deep); font-weight:800}
.legend{display:flex; flex-wrap:wrap; gap:12px; font-size:11px; font-weight:600; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.input{height:52px; border-radius:12px; border:1.5px solid #C9C6BC; background:#fff; padding:0 14px; font-size:16px; font-family:var(--sans); color:var(--ink); width:100%}
.input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.saved{font-size:12px; font-weight:600; color:var(--ok); display:flex; align-items:center; gap:6px}
/* sheets and banners */
.sheet-wrap{position:absolute; inset:0; background:rgba(11,27,69,.45); display:flex; align-items:flex-end}
.sheet{background:#fff; width:100%; border-radius:20px 20px 0 0; padding:20px 16px 18px; display:flex; flex-direction:column; gap:12px}
.grab{width:40px; height:4px; border-radius:2px; background:var(--line); align-self:center}
.note{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; gap:10px; font-size:13px; line-height:1.5}
.warnbox{background:var(--red-tint); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px}
.okbox{background:var(--teal-tint); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; color:var(--deep)}
.infobox{background:var(--navy-tint); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; color:var(--navy)}
/* notifications */
.notif{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:14px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink)}
.notif.unread{border:1.5px solid var(--navy)}
.notif .ic{flex-shrink:0; width:36px; height:36px; border-radius:18px; display:flex; align-items:center; justify-content:center}
.notif .t{font-size:14px; font-weight:700; color:var(--deep)}
.notif .b{font-size:12px; color:var(--muted); line-height:1.45}
.notif .m{display:flex; gap:8px; align-items:center; font-size:11px; font-weight:600; color:var(--muted)}
.notif .rd{flex-shrink:0; width:10px; height:10px; border-radius:5px; background:var(--red); margin-top:6px}
.tabs{display:flex; gap:8px}
.tabs button,.tabs a{height:36px; padding:0 14px; border-radius:18px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px; font-weight:700; display:flex; align-items:center; text-decoration:none}
.tabs [aria-selected="true"],.tabs [aria-current="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
/* calendar */
.cal{display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); grid-template-rows:repeat(4,20px); grid-auto-flow:column; gap:4px}
.cal span{border-radius:4px; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; background:var(--track-2); color:var(--muted)}
.cal .d{background:var(--navy); color:#fff}
.cal .n{background:var(--teal); color:var(--deep); outline:1.5px solid var(--deep)}
.cal .r{background:var(--red-tint); color:var(--red-text); border:1px solid var(--red)}
.calhead{display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:4px}
.calhead span{font-size:9px; font-weight:700; color:var(--muted); text-align:center}
/* scan */
.pages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.page{position:relative; aspect-ratio:3/4; border-radius:10px; background:#fff; padding:34px 10px 10px; display:flex; flex-direction:column; gap:7px; box-shadow:0 1px 2px rgba(11,27,69,.12); border:1px solid var(--line)}
.page i{height:4px; border-radius:2px; background:#C9CFE0; display:block}
.page.blur{border:2px solid var(--red); filter:blur(.6px)}
.page .no{position:absolute; left:6px; top:6px; min-width:22px; height:22px; border-radius:11px; background:var(--navy); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center}
.pg-btns{display:flex; gap:6px}
.pg-btns button{flex-grow:1; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center}
/* score */
.score{background:var(--navy); color:#fff; border-radius:20px; padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.score .v{font-size:34px; font-weight:800; line-height:1.1}
.pct{background:var(--teal); color:var(--deep); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:2px}
.stat3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:2px}
.stat b{font-size:20px; font-weight:800}
/* choice cards */
.choice{display:flex; gap:14px; align-items:flex-start; width:100%; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--line); text-align:left}
.choice[aria-checked="true"]{border:2px solid var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.choice[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.choice .ic{flex-shrink:0; width:48px; height:48px; border-radius:14px; background:var(--navy-tint); display:flex; align-items:center; justify-content:center}
.choice .t{font-size:16px; font-weight:700; color:var(--deep)}
.choice .b{font-size:13px; color:var(--muted); line-height:1.4}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.seg button{min-height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--navy); font-size:13px; font-weight:700; padding:6px 8px}
.seg button[aria-checked="true"]{background:var(--navy-tint); border:2px solid var(--navy)}
/* ---------- desktop (computer) ---------- */
.desk{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; background:var(--cream)}
.side{background:var(--navy); color:#fff; display:flex; flex-direction:column; padding:20px 14px; gap:6px; position:sticky; top:0; height:100vh}
.side .logo{display:block; padding:4px 8px 18px}
.side .logo img{height:40px; display:block}
.side .who{background:var(--deep); border-radius:12px; padding:10px 12px; margin-bottom:10px; display:flex; flex-direction:column; gap:2px}
.side .who b{font-size:14px} .side .who span{font-size:12px; color:var(--on-navy-2); font-weight:600}
.side a.nav{display:flex; align-items:center; gap:12px; height:44px; padding:0 12px; border-radius:12px; color:var(--on-navy); text-decoration:none; font-size:14px; font-weight:600}
.side a.nav:hover{background:#1B3380; color:#fff}
.side a.nav[aria-current="page"]{background:#fff; color:var(--navy); font-weight:700}
.side .grow{flex-grow:1}
.dmain{display:flex; flex-direction:column; min-width:0}
.dtop{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 36px 8px}
.dbody{padding:8px 36px 40px; max-width:1180px; width:100%}
.dgrid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:start}
.dcol{display:flex; flex-direction:column; gap:16px}
.desk .title{font-size:30px}
.desk-only{display:none}
/* ======================= added 12 Oct 2026 (full screen set) ======================= */
/* forms */
.form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field>label,.flabel{font-size:13px; font-weight:700; color:var(--ink)}
.field .hint{font-size:12px; color:var(--muted); line-height:1.45}
.field-err{font-size:12px; font-weight:700; color:var(--red-text)}
.input.bad,select.bad,textarea.bad{border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint)}
select.input{appearance:none; background:#fff url("data:image/svg+xml;utf8,") no-repeat right 14px center; padding-right:38px}
textarea.input{height:auto; min-height:110px; padding:12px 14px; line-height:1.5; resize:vertical}
.pwrap{position:relative} .pwrap .input{padding-right:70px}
.pwrap button{position:absolute; right:6px; top:6px; height:40px; padding:0 10px; border:none; background:transparent; color:var(--navy); font-weight:700; font-size:13px}
.otp{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.otp input{height:56px; border-radius:12px; border:1.5px solid #C9C6BC; text-align:center; font-size:22px; font-weight:800; font-family:var(--sans); color:var(--deep); width:100%}
.otp input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; cursor:pointer}
.check input{width:22px; height:22px; margin:0; flex-shrink:0; accent-color:var(--navy)}
.cbx{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line); text-align:left; font-size:14px; color:var(--ink)}
.cbx .box{flex-shrink:0; width:22px; height:22px; border-radius:6px; border:1.5px solid #9EA3B0; display:flex; align-items:center; justify-content:center; background:#fff}
.cbx .box svg{opacity:0}
.cbx[aria-checked="true"]{border-color:var(--navy); background:var(--navy-tint)}
.cbx[aria-checked="true"] .box{background:var(--navy); border-color:var(--navy)}
.cbx[aria-checked="true"] .box svg{opacity:1}
.cbx[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.rad{display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 14px; border-radius:12px; background:#fff; border:1px solid var(--line); text-align:left; font-size:14px; color:var(--ink)}
.rad .dotb{flex-shrink:0; width:22px; height:22px; border-radius:11px; border:1.5px solid #9EA3B0; display:flex; align-items:center; justify-content:center}
.rad[aria-checked="true"]{border:2px solid var(--navy); background:var(--navy-tint)}
.rad[aria-checked="true"] .dotb{border-color:var(--navy)}
.rad[aria-checked="true"] .dotb::after{content:""; width:12px; height:12px; border-radius:6px; background:var(--navy)}
.filebox{display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; border:2px dashed #9EA3B0; background:#fff; cursor:pointer}
.filebox input{position:absolute; width:1px; height:1px; opacity:0}
.filebox:focus-within{border-color:var(--navy)}
.req::after{content:" *"; color:var(--red-text)}
/* steps */
.steps{display:flex; gap:6px; align-items:center}
.steps i{flex-grow:1; height:5px; border-radius:3px; background:var(--track)}
.steps i.d{background:var(--navy)} .steps i.c{background:var(--teal)}
.steplabel{font-size:12px; font-weight:700; color:var(--muted)}
/* lists */
.list{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.li{display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid #EFEDE6; text-decoration:none; color:var(--ink); min-height:56px}
.li:first-child{border-top:none}
a.li:hover,[data-href].li:hover{background:#FBFAF6; cursor:pointer}
.li .ico{flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--navy-tint); display:flex; align-items:center; justify-content:center}
.li .t{font-size:14px; font-weight:700} .li .s{font-size:12px; color:var(--muted); line-height:1.4}
.li .grow{flex-grow:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.kv{display:grid; grid-template-columns:minmax(110px,40%) 1fr; gap:8px 12px; font-size:13px}
.kv dt{color:var(--muted); font-weight:600} .kv dd{margin:0; font-weight:600; color:var(--ink)}
.divider{height:1px; background:var(--line)}
/* status pills */
.pill{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:12px; font-size:11px; font-weight:800; white-space:nowrap}
.pill.grey{background:var(--track-2); color:var(--muted)}
.pill.navy{background:var(--navy-tint); color:var(--navy)}
.pill.teal{background:var(--teal-tint); color:var(--deep)}
.pill.ok{background:var(--teal); color:var(--deep)}
.pill.red{background:var(--red-tint); color:var(--red-text)}
.pill.amber{background:#FFF0D6; color:#7A4A00}
.pill.dark{background:var(--deep); color:#fff}
/* toast and modal */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--deep); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:.25s; z-index:90; max-width:340px; text-align:center}
.phone .toast{position:absolute; bottom:90px}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.modal{position:fixed; inset:0; background:rgba(11,27,69,.45); display:flex; align-items:flex-end; justify-content:center; z-index:80}
.phone .modal{position:absolute}
.modal[hidden]{display:none}
.modal .sheet{max-width:520px}
@media (min-width:700px){ body:not(.mob) .modal{align-items:center} body:not(.mob) .modal .sheet{border-radius:20px} }
/* page-level helpers */
.center{align-items:center; text-align:center}
.bigicon{width:64px; height:64px; border-radius:32px; display:flex; align-items:center; justify-content:center; background:var(--navy-tint)}
.bigicon.red{background:var(--red-tint)} .bigicon.teal{background:var(--teal-tint)}
.h2{font-size:16px; font-weight:800; color:var(--deep); margin:0}
.p{font-size:14px; line-height:1.55; margin:0; color:var(--ink)}
.muted{color:var(--muted)}
.entrybar{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#fff; border-bottom:1px solid var(--line); flex-shrink:0}
.entrybar img{height:32px; display:block}
.chipbar{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px}
.chipbar button{flex-shrink:0; height:34px; padding:0 12px; border-radius:17px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:12px; font-weight:700}
.chipbar button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.search{display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--line); background:#fff}
.search input{border:none; outline:none; flex-grow:1; font-size:14px; font-family:var(--sans); background:transparent}
.video{aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,#0B1B45,#13276C); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.video .bar2{position:absolute; left:12px; right:12px; bottom:12px; height:4px; border-radius:2px; background:rgba(255,255,255,.25)}
.video .bar2 i{display:block; height:4px; width:38%; background:var(--teal); border-radius:2px}
.paper{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 16px; font-size:14px; line-height:1.6; user-select:none}
.paper h4{margin:0 0 6px; font-size:14px; color:var(--deep)}
.tl{display:flex; flex-direction:column}
.tl .st{display:flex; gap:12px; padding-bottom:16px; position:relative}
.tl .st::before{content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line)}
.tl .st:last-child::before{display:none}
.tl .dotc{flex-shrink:0; width:32px; height:32px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:var(--track-2); color:var(--muted); border:1px solid var(--line); z-index:1}
.tl .dotc.d{background:var(--navy); color:#fff; border:none}
.tl .dotc.c{background:var(--teal); color:var(--deep); border:none; outline:2px solid var(--deep)}
.msg{max-width:84%; padding:10px 12px; border-radius:14px; font-size:13px; line-height:1.5}
.msg.me{align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:4px}
.msg.them{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px}
.cert{border:2px solid var(--navy); border-radius:16px; background:#fff; padding:22px 18px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center}
.qr{width:84px; height:84px; background:repeating-conic-gradient(#0B1B45 0 25%,#fff 0 50%) 0 0/14px 14px; border:6px solid #fff; outline:1px solid var(--line)}
/* desktop: entry pages and admin */
.entry-d{min-height:calc(100vh - 41px); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px 60px; background:var(--cream)}
.entry-card{width:100%; max-width:520px; display:flex; flex-direction:column; gap:16px}
.entry-card .brand{display:flex; justify-content:center; padding-bottom:6px}
.entry-card .brand img{height:44px}
.entry-card .panel{background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 26px 22px; display:flex; flex-direction:column; gap:16px}
.dsingle{max-width:780px}
.dactions{display:flex; gap:12px; flex-wrap:wrap}
.dactions .btn{min-width:200px}
.side .sect{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8E9BC6; padding:12px 12px 4px}
.side .badge{margin-left:auto; min-width:22px; height:22px; border-radius:11px; background:var(--red); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 6px}
.side a.nav[aria-current="page"] .badge{background:var(--red); color:#fff}
.admin .side{background:var(--deep)}
.admin .side .who{background:#13276C}
.admin .side a.nav:hover{background:#13276C}
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:auto}
table.t{border-collapse:collapse; width:100%; font-size:13px}
table.t th{text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:11px 14px; background:#FBFAF6; border-bottom:1px solid var(--line); white-space:nowrap}
table.t td{padding:12px 14px; border-top:1px solid #EFEDE6; vertical-align:middle}
table.t tr[data-href]{cursor:pointer} table.t tr[data-href]:hover td{background:#FBFAF6}
table.t td .t1{font-weight:700} table.t td .s1{font-size:12px; color:var(--muted)}
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink)}
.kpi b{font-size:26px; font-weight:800; color:var(--deep); font-variant-numeric:tabular-nums}
.kpi span{font-size:12px; font-weight:700; color:var(--muted)}
.kpi.alert{border:1.5px solid var(--red)} .kpi.alert b{color:var(--red-text)}
a.kpi:hover{border-color:var(--navy)}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.toolbar .search{width:300px; max-width:100%}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:700px){ .two,.three{grid-template-columns:1fr} }
.proof{background:repeating-linear-gradient(45deg,#F1EFE8,#F1EFE8 10px,#ECEAE2 10px,#ECEAE2 20px); border-radius:12px; border:1px solid var(--line); min-height:260px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; font-weight:700}
.rubric td input{width:70px}
.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:start}
.editor{background:#fff; border:1px solid var(--line); border-radius:12px}
.editor .tb{display:flex; gap:4px; padding:6px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.editor .tb button{height:32px; min-width:32px; border:none; background:transparent; border-radius:8px; font-weight:800; color:var(--navy); font-size:13px}
.editor .tb button:hover{background:var(--navy-tint)}
.editor .area{min-height:110px; padding:12px 14px; font-size:14px; line-height:1.6; outline:none}
.tree{display:flex; flex-direction:column; gap:2px; font-size:13px}
.tree .n{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px}
.tree .n.l1{font-weight:800} .tree .n.l2{padding-left:26px; font-weight:700} .tree .n.l3{padding-left:44px}
.tree .n.sel{background:var(--navy-tint)}
.wkgrid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px}
.wk{border:1px solid var(--line); border-radius:10px; background:#fff; min-height:74px; padding:6px; display:flex; flex-direction:column; gap:4px; font-size:10px}
.wk b{font-size:11px; color:var(--muted)}
.wk .lo{font-size:10px; padding:3px 5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px}
.phone .scroll{flex-grow:1; overflow-y:auto; overflow-x:hidden; min-height:0}
.phone form{display:flex; flex-direction:column; flex-grow:1; min-height:0}
[hidden]{display:none !important}
.acct{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F1EFE8;border-radius:12px;padding:10px 12px}
.acct .num{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;letter-spacing:.02em;color:#13276C;white-space:normal;line-height:1.35}
.acct .btn-ghost{height:32px;padding:0 12px;flex-shrink:0;background:#fff}
.side a.nav.sub{height:34px; font-size:13px; padding-left:44px; font-weight:600}
.ping{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line,#E4E1D6); border-left:4px solid var(--teal); border-radius:16px; padding:12px 14px; text-decoration:none; color:#1B2440}
.ping .pi{flex-shrink:0; width:36px; height:36px; border-radius:18px; background:#D6F6F0; display:flex; align-items:center; justify-content:center}
.ping .pk{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#1F7A6C}
.ping .ph{font-size:14px; font-weight:700; color:#0B1B45; line-height:1.35}
.ping .ps{font-size:12px; color:#55607A}
.newup{display:flex; align-items:center; gap:8px; text-decoration:none; font-size:13px; font-weight:700; color:#13276C; background:#DDE3F5; border-radius:12px; padding:8px 12px}
.newup .nd{width:8px; height:8px; border-radius:4px; background:#B3122B; flex-shrink:0}
.upd-item{display:flex; flex-direction:column; gap:4px; padding:12px 0; border-bottom:1px solid #ECE9DF}
.upd-item:last-child{border-bottom:none}
.upd-item .t{font-size:14px; font-weight:700; color:#0B1B45; line-height:1.4}
.upd-item .b{font-size:13px; color:#3A4560; line-height:1.55}
.upd-item .src{font-size:11px; font-weight:700; color:#55607A}
.phone .kpis{grid-template-columns:1fr 1fr; gap:10px}
.repeat{display:flex; flex-direction:column; gap:10px}
.rrow{background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px}
.rrow .rlab{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.rrow .rm{width:32px; height:32px; border-radius:16px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
.repeat .rrow:only-of-type .rm{visibility:hidden}
.addrow{align-self:flex-start; display:flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 8px; border-radius:22px; border:1.5px dashed var(--navy); background:var(--navy-tint); color:var(--navy); font:700 14px var(--sans); cursor:pointer}
.addrow .plus{width:28px; height:28px; border-radius:14px; background:var(--navy); display:flex; align-items:center; justify-content:center}
.subj-head{display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:2; background:var(--cream); padding:6px 0}
.subj-grp .upper{margin-top:2px}
.subj-why{color:var(--red-text) !important; font-weight:600}
.subj-why.soft{color:var(--muted) !important; font-weight:500}
/* M-01 sign in: centred, logo on top (13 Oct 2026) */
.centre-top{display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 0 4px}
.centre-top img{height:56px; display:block}
.entry-card .brand.centre-top img{height:60px}
.centre-slogan{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--deep)} .centre-slogan em{color:var(--red)}
.phone .scroll.centre{display:flex; flex-direction:column}
.phone .main.centre{margin:auto 0; padding:24px 16px 22px; gap:18px}
.centre-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 18px 18px; display:flex; flex-direction:column; gap:14px; box-shadow:0 14px 28px -24px rgba(11,27,69,.5)}
.centre-note{margin:0; text-align:center; font-size:12px; color:var(--muted)}
.or{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; color:var(--muted)}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.dactions.stack{flex-direction:column; align-items:stretch}
.centre-top{position:relative; width:100%}
.centre-back{position:absolute; left:0; top:4px; width:40px; height:40px; border-radius:20px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.entry-card .centre-back{display:none}
.nextsteps{display:flex; flex-direction:column; gap:10px; padding:4px 6px}
.nextsteps ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.nextsteps li{position:relative; display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:var(--muted)}
.nextsteps li:not(:last-child)::after{content:""; position:absolute; left:10px; top:28px; height:calc(100% - 20px); width:2px; background:var(--line)}
.nextsteps .dot{flex:none; width:22px; height:22px; border-radius:11px; border:1.5px solid #B9B6AC; background:var(--cream); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--muted); position:relative; z-index:1}
.nextsteps li.done{color:var(--ink)} .nextsteps li.done .dot{background:var(--teal); border-color:var(--teal)} .nextsteps li.done:not(:last-child)::after{background:var(--teal)}
.nextsteps li.now{color:var(--deep); font-weight:800} .nextsteps li.now .dot{background:var(--navy); border-color:var(--navy); color:#fff}
.nextsteps li b{margin-left:auto; font-size:11px; font-weight:800; color:var(--navy); background:var(--navy-tint); padding:3px 8px; border-radius:10px}
/* M-15: full Terms and Privacy text (13 Oct 2026) */
.lg-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lg-toc{border:1px solid var(--line); border-radius:12px; background:var(--cream)}
.lg-toc summary{padding:10px 12px; font-size:13px; font-weight:800; color:var(--navy); cursor:pointer}
.lg-toc nav{display:flex; flex-direction:column; padding:0 12px 10px}
.lg-toc nav a{font-size:13px; padding:5px 0; color:var(--navy); text-decoration:none; border-top:1px solid var(--line)}
.lg-sec{scroll-margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.lg-sec h2{margin:0 0 8px; font-family:var(--serif); font-size:18px; font-weight:600; color:var(--deep)}
.lg-sec p{margin:0 0 8px; font-size:13px; line-height:1.6; color:var(--ink)}
.lg-sec p b{color:var(--navy); margin-right:2px}
/* desktop only: M-15 Terms and Privacy uses the full width (13 Oct 2026) */
.entry-card:has(.lg-sec){max-width:1040px}
.entry-card:has(.lg-sec) .panel{padding:32px 40px 28px}
.entry-card:has(.lg-sec) .lg-sec p{font-size:14px; line-height:1.7}
/* desktop only: M-15 contents fixed in a left column, text on the right (13 Oct 2026) */
.entry-card:has(.lg-sec) .lg-toc{display:none}
.lg-wrap{display:grid; grid-template-columns:250px minmax(0,1fr); gap:32px; align-items:stretch}
.lg-col{background:var(--cream); border:1px solid var(--line); border-radius:14px}
.lg-side{position:sticky; top:66px; display:flex; flex-direction:column; max-height:calc(100vh - 82px); overflow-y:auto; padding:14px 14px 10px}
.lg-side .upper{padding-bottom:8px}
.lg-side a{font-size:13px; line-height:1.35; padding:7px 10px; border-radius:8px; color:var(--navy); text-decoration:none}
.lg-side a:hover{background:var(--navy-tint)}
.lg-side a.on{background:var(--navy); color:#fff; font-weight:700}
.lg-body .lg-sec:first-child{border-top:0; padding-top:0}
.entry-card:has(.lg-sec) .lg-sec{scroll-margin-top:70px}
.lg-sec p{font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0}
.lg-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line)}
.lg-foot .lg-back{display:inline-flex; align-items:center; gap:8px; width:auto; padding:0 22px}
#lgtop{scroll-margin-top:70px}
/* desktop only, M-02 Create Account only (it is the one screen with #cnic): wider card, fields in two columns (13 Oct 2026, for review) */
.entry-card:has(#cnic){max-width:980px}
.entry-card:has(#cnic) .panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; row-gap:16px; padding:32px 40px 28px}
.entry-card:has(#cnic) .panel > *{grid-column:1 / -1}
.entry-card:has(#cnic) .panel > .field{grid-column:auto}
.entry-card:has(#cnic) .panel > .field:has([role="radiogroup"]){grid-column:1 / -1}
.entry-card:has(#cnic) .panel > .field:has([role="radiogroup"]) [role="radiogroup"]{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.entry-card:has(#cnic) .panel > .dactions{justify-content:flex-end; align-items:flex-end}
.entry-card:has(#cnic) .panel > .dactions .btn{width:auto !important; min-width:320px; padding:0 32px}
.entry-card:has(#cnic) .nextsteps li b{margin-left:12px}
/* desktop only, M-03 Confirm email only (the one card holding .m03-grid): wider card, code on the left, help on the right (13 Oct 2026, for review) */
.m03-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); grid-template-areas:"otp note" "exp ."; column-gap:28px; row-gap:12px; align-items:center}
.m03-otp{grid-area:otp} .m03-note{grid-area:note} .m03-exp{grid-area:exp} .m03-wrong{grid-area:wrong; justify-self:end}
.m03-note .note{min-height:58px; align-items:center; margin:0}
.m03-note .note span{line-height:1.5}
.entry-card:has(.m03-grid){max-width:980px}
.entry-card:has(.m03-grid) .panel{padding:32px 40px 28px}
.entry-card:has(.m03-grid) .panel > .dactions{flex-direction:row; justify-content:space-between; align-items:center; margin-top:4px}
.m03-grid .m03-wrong{display:none}
.m03-wrong2{font-size:14px}
.entry-card:has(.m03-grid) .panel > .dactions .btn{width:auto !important; min-width:320px; padding:0 32px}
.entry-card:has(.m03-grid) .nextsteps li b{margin-left:12px}
.m03-l2{display:block} .m03-note .note{font-size:13px}
/* === M04-WIDE start: desktop only, M-04 only (the card holding the examination choice). Delete this block to undo. (13 Oct 2026) === */
.entry-card:has([data-reveal-group="ex"]){max-width:980px}
.entry-card:has([data-reveal-group="ex"]) .panel{padding:32px 40px 28px}
.entry-card:has([data-reveal-group="ex"]) [role="radiogroup"]{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.entry-card:has([data-reveal-group="ex"]) [data-reveal-group="ex"] .rad{min-height:92px; align-items:flex-start; padding:16px 18px}
.entry-card:has([data-reveal-group="ex"]) [data-reveal-group="ex"] .rad .dotb{margin-top:2px}
.entry-card:has([data-reveal-group="ex"]) [data-reveal-group="ex"] .rad span[style*="font-weight:700"]{font-size:16px}
.entry-card:has([data-reveal-group="ex"]) .panel > .dactions{justify-content:flex-start; align-items:flex-start}
.entry-card:has([data-reveal-group="ex"]) .panel > .dactions .btn{width:auto !important; min-width:320px; padding:0 32px}
.entry-card:has([data-reveal-group="ex"]) .nextsteps li b{margin-left:12px}
/* === M04-WIDE end === */
/* 12-category tag table (C-04, C-07): live and responsive */
.tg-wrap{container-type:inline-size; display:flex; flex-direction:column; gap:8px}
.tagt th:first-child{width:150px}
.tagt .tg-name{font-size:13px; font-weight:600; color:var(--ink)}
.tagt tr.tg-off{opacity:.5}
.tagt tr.tg-off .tg-name{font-weight:500}
.tagt tr.tg-bad, .tagt tr.tg-bad td{background:#FDF1F2}
.tagt .tg-need{display:block; margin-top:4px; font-size:12px; font-weight:700; color:#B3122B}
.tagt .tg-need[hidden]{display:none}
.tg-sum{font-size:13px; line-height:1.5; color:var(--ink); background:#F1EFE8; border-radius:10px; padding:8px 12px}
.tg-sum:empty{display:none}
.tg-err{color:#B3122B; font-weight:700}
.tg-note{color:#0E6E68; font-weight:700}
@container (max-width:640px){
.tagt thead{display:none}
.tagt, .tagt tbody{display:block; width:100%}
.tagt tr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line)}
.t.tagt td{display:block; padding:0; border:0; background:transparent}
.tagt td:last-child{grid-column:1 / -1}
.tagt tr.tg-off td:last-child{display:none}
}
@container (max-width:380px){
.tagt .tg-kinds .cbx.mini{flex:1 1 auto; justify-content:center}
}
.tagt .tg-lo{display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--muted)}
.is-gated{opacity:.45; cursor:not-allowed}
/* Grouped admin side bar (Super Admin (A)) · 14 Oct 2026 */
.side a.nav.tight{height:36px; font-size:13.5px; gap:10px; border-radius:10px}
.side .sect{display:block}
.side .sect:first-of-type{padding-top:8px}
.side details.rolegrp{margin-top:6px; border-top:1px solid rgba(255,255,255,.08); padding-top:4px}
.side details.rolegrp summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; border-radius:10px}
.side details.rolegrp summary::-webkit-details-marker{display:none}
.side details.rolegrp summary:hover{color:#fff}
.side details.rolegrp .chev{font-size:11px; transition:transform .15s}
.side details.rolegrp[open] .chev{transform:rotate(90deg)}
.side a.nav.sub2{height:32px; font-size:13px; padding-left:22px; font-weight:600; color:#C9D1EE}
/* A-10: the eight roles as cards · 14 Oct 2026 */
.rgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:1180px){ .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rcard{display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:16px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:box-shadow .15s, transform .15s; min-width:0}
.rcard:hover{box-shadow:0 6px 18px rgba(19,39,108,.10); transform:translateY(-1px)}
.rcard.rc-red{border-color:#E7A3AE; background:#FFF8F9}
.rc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
.rc-no{width:26px; height:26px; border-radius:13px; background:var(--navy); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center}
.rc-ic{width:32px; height:32px; border-radius:10px; background:#E8ECF8; display:flex; align-items:center; justify-content:center}
.rc-name{font-size:14px; line-height:1.25}
.rc-ids{font-size:11.5px; color:var(--muted); font-weight:600}
.rc-lines{display:flex; flex-direction:column; gap:4px; margin:8px 0 6px; padding-top:8px; border-top:1px solid #EFEDE6}
.rc-line{display:flex; gap:6px; align-items:baseline; font-size:12px; color:var(--ink)}
.rc-line b{font-size:17px; min-width:22px}
.rc-go{margin-top:auto; font-size:12.5px; font-weight:800; color:var(--navy)}
/* Next LO marker on the mastery map (15 Oct 2026) */
.lo.isnext{outline:2px solid var(--navy); outline-offset:1px}
/* Sign in (M-01), MDCAT design matched to the owner's reference signin-screen-v2.png (UX-006, 24 Oct 2026; replaces UX-002 to UX-005).
Left: the owner's picture (assets/img/mdcat/signin-background.webp) as one artboard that keeps its proportions, so the labels stay on the buildings;
sizes on it are in cqw of the artboard (reference 935 px wide). Right: light gradient, glass card; sizes scale down with the window's height (reference 863 px)
so nothing scrolls on a laptop. Narrower than 900 px (phones): one column, the picture on top. */
.si-wrap{container-type:inline-size; container-name:si; background:#EAF5FD}
.si-split{--u:min(1px, calc(100vh / 863)); min-height:100vh; display:grid; grid-template-columns:minmax(0,51.3fr) minmax(0,48.7fr)}
.states ~ form .si-split{min-height:calc(100vh - 124px)}
.si-brand{position:relative; overflow:hidden; background:#012463; min-height:100%}
.si-art{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(100%, calc(100vh * 1306 / 1205)); aspect-ratio:1306 / 1205; container-type:inline-size; background:#012463 url("img/mdcat/signin-background.webp") center / cover no-repeat; color:#fff}
.si-art > *{position:absolute; margin:0}
.si-logo{left:7.914cqw; top:5.348cqw; height:6.524cqw; width:auto}
.si-kicker{left:7.807cqw; top:15.294cqw; font-size:1.604cqw; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:#22D3C5; white-space:nowrap}
.si-head{left:7.487cqw; top:19.037cqw; font-family:var(--serif); font-weight:600; font-size:6.738cqw; line-height:1.02; letter-spacing:-.012em; color:#fff}
.si-sub{left:7.807cqw; top:33.369cqw; font-size:2.567cqw; font-weight:500; color:#A9CFF3; white-space:nowrap}
.si-pin{width:0; height:0}
.si-pin::after{content:""; position:absolute; left:-0.535cqw; top:-0.535cqw; width:1.07cqw; height:1.07cqw; border-radius:50%; background:#fff; box-shadow:0 0 0 0.321cqw rgba(255,255,255,.25)}
.si-pin b{position:absolute; left:0; transform:translateX(-50%); white-space:nowrap; font-size:1.444cqw; font-weight:600; color:#fff; background:rgba(3,22,62,.88); border:0.171cqw solid #2BD0C8; border-radius:999px; padding:0.642cqw 1.711cqw}
.si-pin b::after{content:""; position:absolute; left:50%; top:100%; width:0.171cqw; background:rgba(255,255,255,.9); transform:translateX(-50%)}
.si-pin-uni{left:18.075cqw; top:48.342cqw}
.si-pin-uni b{bottom:3.209cqw} .si-pin-uni b::after{height:3.209cqw}
.si-pin-hos{left:82.353cqw; top:46.203cqw}
.si-pin-hos b{bottom:5.348cqw} .si-pin-hos b::after{height:5.348cqw}
.si-tag{left:3.85cqw; top:82.567cqw; font-size:1.979cqw; font-weight:600; color:#5FE3D7; background:rgba(2,40,72,.72); border:0.214cqw solid #1FC9C0; border-radius:999px; padding:1.283cqw 2.353cqw; white-space:nowrap}
.si-form{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(26 * var(--u)); padding:calc(40 * var(--u)) calc(40 * var(--u));
background:
radial-gradient(55% 45% at 100% 0%, #C4FAF4 0%, rgba(196,250,244,0) 75%),
radial-gradient(55% 35% at 0% 100%, #84AEE4 0%, rgba(132,174,228,0) 80%),
radial-gradient(50% 35% at 100% 100%, #A2C8F2 0%, rgba(162,200,242,0) 80%),
linear-gradient(180deg, #F1FBFE 0%, #E6F5FE 55%, #D2E7FA 100%)}
.si-card{width:100%; max-width:calc(624 * var(--u)); background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.95); border-radius:calc(28 * var(--u)); box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(27,64,140,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:calc(40 * var(--u)) calc(62 * var(--u)) calc(34 * var(--u)); display:flex; flex-direction:column}
.si-eyebrow{font-size:calc(15 * var(--u)); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#0FB4AA}
.si-title{font-family:var(--serif); font-weight:600; font-size:calc(60 * var(--u)); line-height:1; letter-spacing:-.015em; color:var(--deep); margin:calc(10 * var(--u)) 0 0}
.si-title span{color:#22D3C5}
.si-bar{display:block; width:calc(50 * var(--u)); height:calc(4 * var(--u)); border-radius:2px; background:#22D3C5; margin-top:calc(12 * var(--u))}
.si-lede{margin:calc(10 * var(--u)) 0 0; font-size:calc(20 * var(--u)); color:#5A6A8A}
.si-card .okbox, .si-card .warnbox{margin-top:calc(14 * var(--u))}
.si-card form, .si-card .si-formbody{display:flex; flex-direction:column; margin-top:calc(22 * var(--u))}
.si-field + .si-field{margin-top:calc(17 * var(--u))}
.si-field label{display:block; font-size:calc(17 * var(--u)); font-weight:700; color:var(--ink); margin-bottom:calc(9 * var(--u))}
.si-input{position:relative; display:flex; align-items:center; height:calc(64 * var(--u)); background:#F0F7FE; border:1.5px solid #C8D5EC; border-radius:calc(12 * var(--u)); transition:border-color .15s, box-shadow .15s}
.si-input:focus-within{border-color:var(--navy); box-shadow:0 0 0 3px rgba(34,211,197,.35)}
.si-input svg{flex:none; width:calc(26 * var(--u)); height:calc(26 * var(--u)); margin-left:calc(22 * var(--u)); color:var(--deep)}
.si-input input{flex:1; min-width:0; height:100%; border:0; background:transparent; outline:none; padding:0 calc(16 * var(--u)); font:inherit; font-size:calc(17 * var(--u)); color:var(--ink)}
.si-input input::placeholder{color:#8592AE}
.si-input button{flex:none; border:0; background:none; font-size:calc(17 * var(--u)); font-weight:700; color:var(--navy); padding:0 calc(20 * var(--u)); height:100%}
.si-links{display:flex; justify-content:space-between; gap:12px; margin-top:calc(14 * var(--u))}
.si-links a{font-size:calc(16 * var(--u)); font-weight:700; color:var(--navy); text-decoration:none}
.si-links a:hover{text-decoration:underline}
.si-btn{position:relative; display:flex; align-items:center; justify-content:center; height:calc(62 * var(--u)); margin-top:calc(18 * var(--u)); border-radius:calc(12 * var(--u)); background:#0B285F; color:#fff; border:1.5px solid #2BD0C8; box-shadow:0 0 0 1px rgba(43,208,200,.25), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(11,40,95,.25); font:inherit; font-size:calc(19 * var(--u)); font-weight:700; cursor:pointer}
.si-btn svg{position:absolute; right:calc(28 * var(--u)); width:calc(24 * var(--u)); height:calc(24 * var(--u))}
.si-btn:hover{background:#0E3274}
.si-or{display:flex; align-items:center; gap:calc(14 * var(--u)); margin-top:calc(16 * var(--u)); font-size:calc(15 * var(--u)); font-weight:600; color:#5A6A8A}
.si-or::before, .si-or::after{content:""; flex:1; height:1px; background:#D3DCEA}
.si-btn2{display:flex; align-items:center; justify-content:center; height:calc(58 * var(--u)); margin-top:calc(12 * var(--u)); border-radius:calc(12 * var(--u)); background:#fff; border:2px solid #3CCFD2; color:var(--deep); font-size:calc(19 * var(--u)); font-weight:700; text-decoration:none}
.si-btn2:hover{background:#F2FCFC}
.si-note{display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--u)); margin:calc(20 * var(--u)) 0 0; font-size:calc(14 * var(--u)); color:#5A6A8A}
.si-note svg{width:calc(18 * var(--u)); height:calc(18 * var(--u)); color:#5A6A8A}
.si-close{margin:0; font-family:var(--serif); font-size:calc(21 * var(--u)); color:#1E3F86; text-align:center}
.si-close span{color:#22D3C5}
.si-card a:focus-visible, .si-card button:focus-visible{outline:3px solid #22D3C5; outline-offset:2px}
@media (max-width:899px){
.si-split{--u:.85px; grid-template-columns:minmax(0,1fr); min-height:0}
.si-brand{min-height:0}
.si-art{position:relative; left:auto; bottom:auto; transform:none; width:100%}
.si-kicker{font-size:max(10px,1.711cqw); letter-spacing:.16em}
.si-sub, .si-tag{display:none}
.si-pin b{font-size:max(10px,1.444cqw)}
.si-form{padding:24px 16px 32px; gap:20px}
.si-card{padding:28px 20px 24px; border-radius:22px}
.si-title{font-size:42px}
}
@container si (max-width:899px){
.si-split{--u:.85px; grid-template-columns:minmax(0,1fr); min-height:0}
.si-brand{min-height:0}
.si-art{position:relative; left:auto; bottom:auto; transform:none; width:100%}
.si-kicker{font-size:max(10px,1.711cqw); letter-spacing:.16em}
.si-sub, .si-tag{display:none}
.si-pin b{font-size:max(10px,1.444cqw)}
.si-form{padding:24px 16px 32px; gap:20px}
.si-card{padding:28px 20px 24px; border-radius:22px}
.si-title{font-size:42px}
}
/* ======================= design.md v0.2 (24 Oct 2026, Screen finalisation chat) =======================
The look of the approved Sign in page (M-01) applied to every screen. Added at the end, so it overrides v0.1.
Three kinds of screen (design.md 1): entry pages (full treatment), working screens (plain page blue),
test screens (plain cream: anything holding .test-head or .pages). M-01 keeps its own si-* rules. */
:root{
--brand:#0B285F; --brand-hover:#0E3274; --pic-navy:#012463; --teal-bright:#22D3C5; --teal-label:#0FB4AA;
--teal-edge:#2BD0C8; --teal-edge-2:#3CCFD2; --page-blue:#EAF5FD; --box-fill:#F0F7FE; --box-line:#C8D5EC;
--soft:#5A6A8A; --ph:#8592AE; --div-blue:#D3DCEA; --card-line:#DCE6F3;
--shadow-card:0 4px 16px rgba(27,64,140,.06); --shadow-glass:0 24px 60px rgba(27,64,140,.12); --shadow-btn:0 8px 20px rgba(11,40,95,.25);
--grad-entry:radial-gradient(55% 45% at 100% 0%, #C4FAF4 0%, rgba(196,250,244,0) 75%), radial-gradient(55% 35% at 0% 100%, #84AEE4 0%, rgba(132,174,228,0) 80%), radial-gradient(50% 35% at 100% 100%, #A2C8F2 0%, rgba(162,200,242,0) 80%), linear-gradient(180deg, #F1FBFE 0%, #E6F5FE 55%, #D2E7FA 100%);
}
/* backgrounds */
.phone, .desk, .entry-d{background:var(--page-blue)}
.subj-head{background:var(--page-blue)}
.phone:has(.centre-card), .entry-d{background:var(--grad-entry)}
.phone:has(.test-head), .phone:has(.pages), .desk:has(.test-head), .desk:has(.pages){background:var(--cream)}
.phone:has(.test-head) .subj-head, .desk:has(.test-head) .subj-head{background:var(--cream)}
/* cards: white, faint blue edge, soft blue shadow */
.card, .list, .table-wrap, .kpi, .stat, .notif, .choice, .rrow, .note, .cbx, .rad, .seg button, .opt, .ping, .editor, .wk, .paper, .msg.them{border-color:var(--card-line)}
.card, .list, .table-wrap, .kpi, .stat, .notif, .choice, .rrow, .ping, .editor{box-shadow:var(--shadow-card)}
.card{border-radius:16px}
.li{border-top-color:#E6EDF6}
a.li:hover, [data-href].li:hover{background:#F4F9FE}
.divider{background:#E1E9F4}
/* test screens stay quiet: no shadows */
.phone:has(.test-head) .card, .desk:has(.test-head) .card, .phone:has(.test-head) .opt, .desk:has(.test-head) .opt{box-shadow:none}
/* glass card: entry pages */
.entry-card .panel, .centre-card{background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.95); border-radius:28px; box-shadow:var(--shadow-glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.entry-card .panel{padding:36px 40px 30px}
.phone .centre-card{border-radius:22px; padding:24px 18px 20px}
.entrybar{background:rgba(255,255,255,.72); border-bottom-color:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.entry-card .panel .title, .centre-card .title{font-size:34px; line-height:1.05; letter-spacing:-.012em}
.phone .centre-card .title{font-size:30px}
.entry-card .panel .title::after, .centre-card .title::after{content:""; display:block; width:50px; height:4px; border-radius:2px; background:var(--teal-bright); margin-top:12px}
.centre-card .title.no-bar::after, .entry-card .panel .title.no-bar::after{display:none}
/* small capital labels */
.upper{color:var(--teal-label); font-weight:800; letter-spacing:.16em}
.hero .k, .side .sect{letter-spacing:.16em}
/* input boxes */
.input, .otp input, .search{background-color:var(--box-fill); border:1.5px solid var(--box-line); border-radius:12px}
.input::placeholder, .search input::placeholder{color:var(--ph)}
.input:focus, .otp input:focus{border-color:var(--navy); box-shadow:0 0 0 3px rgba(34,211,197,.35)}
.search:focus-within{border-color:var(--navy); box-shadow:0 0 0 3px rgba(34,211,197,.35)}
.input.bad, select.bad, textarea.bad{border-color:var(--red-text); box-shadow:0 0 0 3px var(--red-tint)}
.entry-card .input, .centre-card .input, .centre-card .otp input, .entry-card .otp input{height:58px; font-size:16px}
.check input, .cbx[aria-checked="true"] .box{accent-color:var(--brand)}
/* buttons */
.btn{border-radius:12px}
.btn-primary{background:var(--brand); color:#fff; border:1.5px solid var(--teal-edge); box-shadow:0 0 0 1px rgba(43,208,200,.25), var(--shadow-btn)}
.btn-primary:hover{background:var(--brand-hover); color:#fff}
.btn-secondary{background:#fff; color:var(--deep); border:2px solid var(--teal-edge-2)}
.btn-secondary:hover{background:#F2FCFC; color:var(--deep)}
.btn-dashed{border-color:var(--teal-edge-2); color:var(--deep)}
/* the arrow on the main button of entry pages and large main buttons */
.entry-card .btn-primary, .centre-card .btn-primary, .footer .btn-primary.lg, .dactions .btn-primary.lg{position:relative; padding-right:48px; padding-left:48px}
.entry-card .btn-primary::after, .centre-card .btn-primary::after, .footer .btn-primary.lg::after, .dactions .btn-primary.lg::after{content:""; position:absolute; right:22px; top:50%; width:20px; height:20px; margin-top:-10px; background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.phone:has(.test-head) .btn-primary, .desk:has(.test-head) .btn-primary{box-shadow:none}
.go{background:var(--brand); box-shadow:0 0 0 1.5px var(--teal-edge)}
/* chips, tabs and choices: selected stays navy (design.md 4) */
.tabs button, .tabs a, .chipbar button{border-color:var(--card-line)}
.tabs [aria-selected="true"], .tabs [aria-current="true"], .chipbar button[aria-pressed="true"]{background:var(--brand); border-color:var(--brand)}
.icon-btn{border-color:var(--card-line); box-shadow:var(--shadow-card)}
/* bars */
.tabbar{border-top:0; box-shadow:0 -4px 16px rgba(27,64,140,.07)}
.footer{border-top:0; box-shadow:0 -4px 16px rgba(27,64,140,.07)}
.phone:has(.test-head) .footer{box-shadow:none; border-top:1px solid var(--line)}
.test-head{background:var(--deep)}
/* computer side bar: picture navy, teal bar on the page you are on */
.side, .admin .side{background:var(--pic-navy)}
.side .who, .admin .side .who{background:rgba(255,255,255,.08)}
.side a.nav:hover, .admin .side a.nav:hover{background:rgba(255,255,255,.08); color:#fff}
.side a.nav[aria-current="page"]{background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 3px 0 0 var(--teal-bright)}
.side .sect{color:#7FA3D6}
/* staff tables */
table.t th{background:var(--page-blue); color:var(--deep); border-bottom-color:var(--card-line)}
table.t td{border-top-color:#E6EDF6}
table.t tr[data-href]:hover td{background:#F4F9FE}
/* focus outline for keyboard users */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{outline:3px solid var(--teal-bright); outline-offset:2px}
.side a.nav[aria-current="page"] svg{stroke:#fff; color:#fff}
.phone:has(.test-head) .btn-secondary, .desk:has(.test-head) .btn-secondary, .phone:has(.pages) .btn-secondary, .desk:has(.pages) .btn-secondary{border:1px solid #C9C6BC; color:var(--navy)}
/* ---- the app's own layouts (24 Oct 2026, Screen finalisation chat) ---- */
/* staff sign-in keeps its deep navy page; the card is solid white there, not glass */
.entry-d.on-navy .entry-card .panel{background:#fff; border-color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none}
/* candidate pages before the dashboard (layouts.cand) and the dashboard (layouts.study): page blue */
body.cand-page{background:var(--page-blue) !important}
.cand-top, .s-top{background:var(--pic-navy) !important}
/* test pages (layouts.test): plain and quiet */
body.t-page .card, body.t-page .opt, body.t-page .btn-primary{box-shadow:none}
body.t-page .btn-secondary{border:1px solid #C9C6BC; color:var(--navy)}
/* Create account (M-02) on a computer: the fields in two columns, as on the approved screen (owner, 24 Oct 2026, 15:47) */
@media (min-width:900px){
.entry-card:has(#cnic) form.col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; row-gap:16px}
.entry-card:has(#cnic) form.col > *{grid-column:1 / -1}
.entry-card:has(#cnic) form.col > .field{grid-column:auto}
.entry-card:has(#cnic) form.col > .field:has(#wa){grid-column:1 / -1}
.entry-card:has(#cnic) form.col > .field:has(#wa) .input{max-width:calc(50% - 14px)}
.entry-card:has(#cnic) form.col > button[type="submit"]{justify-self:start; width:auto; min-width:340px; padding:0 64px 0 40px}
}
/* on a phone the card keeps the phone's padding */
@media (max-width:899px){ .entry-card:has(#cnic) .panel{padding:24px 18px 20px} }
/* Create account (owner, 24 Oct 2026, 15:52): boxes 20% lower; "What happens next" as a left side bar on a computer; button on the left */
.entry-card:has(#cnic) .input{height:46px}
.entry-card:has(#cnic) .pwrap button{top:3px; height:40px}
.ca-main{display:flex; flex-direction:column; gap:16px; min-width:0}
@media (min-width:900px){
.entry-card:has(#cnic){max-width:1180px}
.ca-wrap{display:grid; grid-template-columns:250px minmax(0,1fr); column-gap:36px; align-items:start}
.ca-side{position:sticky; top:24px}
}
@media (max-width:899px){ .ca-wrap{display:flex; flex-direction:column; gap:16px} .ca-side{order:2} }
/* password strength meter (Create account, owner 24 Oct 2026): four bars, a word and the rules ticked as he types */
.pw-meter{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.pw-top{display:flex; align-items:center; gap:10px; min-height:16px}
.pw-bars{flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; max-width:200px}
.pw-bars i{height:5px; border-radius:3px; background:#E1E9F4}
.pw-meter[data-level="1"] .pw-bars i:nth-child(-n+1){background:#E31836}
.pw-meter[data-level="2"] .pw-bars i:nth-child(-n+2){background:#13276C}
.pw-meter[data-level="3"] .pw-bars i:nth-child(-n+3){background:#22D3C5}
.pw-meter[data-level="4"] .pw-bars i{background:#1F7A6C}
.pw-word{font-size:12px; font-weight:700; color:var(--ink)}
.pw-meter[data-level="1"] .pw-word{color:#B3122B}
.pw-meter[data-level="4"] .pw-word{color:#1F7A6C}
.pw-rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; font-size:12px; color:#5A6A8A}
.pw-rules li::before{content:"○"; display:inline-block; width:16px; font-weight:800}
.pw-rules li.ok{color:#1F7A6C}
.pw-rules li.ok::before{content:"✓"}
.pw-match{display:block; margin-top:8px; font-size:12px; font-weight:700}
.pw-match.ok{color:#1F7A6C}
.pw-match.no{color:#5A6A8A}
/* Confirm email (owner, 24 Oct 2026, 16:39): "What happens next" as a left side bar too (the .ca-wrap rules above) */
@media (min-width:900px){ .entry-card:has(.ca-wrap):not(:has(#cnic)){max-width:980px} }
/* "What happens next" as a left side bar on every sign-up step (owner, 24 Oct 2026, 16:44): one design, one place */
.ca-side .nextsteps{margin:0; padding:0}
.ca-side .nextsteps li > span:not(.dot){flex:1; min-width:0}
.ca-side .nextsteps li b{margin-left:8px !important; white-space:nowrap}
@media (min-width:900px){
.cand-main:has(.ca-card){max-width:1060px}
.ca-card{padding:32px 36px !important}
}
/* Candidate form (M-20, M-140, M-42; owner, 24 Oct 2026, 16:59): two columns on a computer */
@media (min-width:900px){
.cand-main:has(.cf-form){max-width:1060px}
.cf-form{display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; row-gap:16px; padding:28px 32px !important}
.cf-form > *{grid-column:1 / -1}
.cf-form > .field{grid-column:auto}
.cf-form > fieldset:not([hidden]):not([data-repeat]){display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; row-gap:10px}
.cf-form > fieldset > *{grid-column:1 / -1}
.cf-form > fieldset > .field{grid-column:auto}
.cf-form > fieldset[data-repeat] [data-row]{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.cf-form > button[type="submit"]{justify-self:start; width:auto; min-width:340px; padding:0 64px 0 40px}
}
/* dd/mm/yyyy date box (owner, 24 Oct 2026): the browser's date box hidden under the calendar button */
.dmy{position:relative; display:flex; align-items:center; width:100%}
.dmy > input[type="text"]{flex:1; padding-right:52px}
.dmy > .dmy-native{position:absolute; right:0; bottom:0; width:44px; height:100%; opacity:0; pointer-events:none; border:0; padding:0; margin:0}
.dmy-cal{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:8px; background:transparent; color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer}
.dmy-cal:hover{background:var(--navy-tint)}
/* file boxes (owner, 24 Oct 2026, 17:26): the browser's "Choose file" button centred in the box and styled as ours; a dashed edge marks an upload */
.input[type="file"]{height:52px; padding:7px 8px; line-height:36px; border-style:dashed; cursor:pointer; color:var(--soft); font-size:14px}
.input[type="file"]::file-selector-button{height:36px; margin:0 12px 0 0; padding:0 16px; border:1.5px solid var(--teal-edge-2,#3CCFD2); border-radius:10px; background:#fff; color:var(--deep); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.input[type="file"]:hover::file-selector-button{background:#F2FCFC}
/* candidate form: Save and continue centred (owner, 24 Oct 2026, 17:26) */
@media (min-width:900px){ .cf-form > button[type="submit"]{justify-self:center} }
/* candidate form: group headings (Domicile, Emergency contact) as section dividers, not field labels (owner, 24 Oct 2026, 17:33) */
.cf-form > fieldset:not([data-u18]):not([data-repeat]) > legend{display:flex; align-items:center; gap:12px; width:100%; margin:10px 0 14px; padding:0; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-label,#0FB4AA)}
.cf-form > fieldset:not([data-u18]):not([data-repeat]) > legend::after{content:""; flex:1; height:1px; background:var(--card-line,#DCE6F3)}
/* group headings in deep navy, not teal (owner, 24 Oct 2026, 17:36) */
.cf-form > fieldset:not([data-u18]):not([data-repeat]) > legend{color:var(--deep,#0B1B45)}
/* M-141 MDCAT details: "SSC", "FSc / HSC (Pre-Medical)" and "Your MDCAT" as clear section headings, the same kind as
"Domicile" on the candidate form (owner, 24 Oct 2026, 21:50, UX-035) */
.md-details > fieldset > legend, .card-title.sect{display:flex; align-items:center; gap:12px; width:100%; margin:6px 0 4px; padding:0; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--deep,#0B1B45)}
.md-details > fieldset > legend::after, .card-title.sect::after{content:""; flex:1; height:1px; background:var(--card-line,#DCE6F3)}
.md-details > fieldset + fieldset{margin-top:8px !important}
/* Choose your plan (M-23, M-142), redesigned (owner, 24 Oct 2026, 22:02, UX-036) */
.plan-lede{margin:0; font-size:15px; line-height:1.5; color:#33415C}
.plan-grid{display:grid; gap:16px; grid-template-columns:1fr; padding-top:12px}
@media (min-width:720px){ .plan-grid.plan-n2{grid-template-columns:repeat(2,1fr)} .plan-grid.plan-n3{grid-template-columns:repeat(3,1fr)} }
.plan-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:26px 20px 20px; background:#fff;
border:1.5px solid #C8D5EC; border-radius:18px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s}
.plan-card:hover{border-color:#8FA6CF; transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,40,95,.10)}
.plan-card > input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.plan-card:has(input:focus-visible){outline:3px solid #22D3C5; outline-offset:3px}
.plan-card.is-pop{border-color:#2BD0C8; background:linear-gradient(180deg,#F1FCFB 0%,#fff 60%)}
.plan-card:has(input:checked){border:2px solid #0B285F; background:#F4F8FE; box-shadow:0 0 0 4px rgba(34,211,197,.28), 0 12px 28px rgba(11,40,95,.14)}
.plan-ribbon{position:absolute; top:-13px; left:20px; padding:5px 12px; border-radius:999px; background:#22D3C5; color:#0B1B45;
font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 4px 10px rgba(34,211,197,.35)}
.plan-tick{position:absolute; top:18px; right:18px; width:24px; height:24px; border-radius:50%; border:2px solid #C8D5EC; background:#fff; box-sizing:border-box}
.plan-card:has(input:checked) .plan-tick{border-color:#0B285F; background:#0B285F}
.plan-card:has(input:checked) .plan-tick::after{content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #22D3C5; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.plan-name{font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0B1B45; padding-right:32px}
.plan-price{font-size:30px; line-height:1.1; font-weight:800; color:#0B285F; letter-spacing:-.01em}
.plan-month{font-size:13.5px; font-weight:600; color:#5A6A8A}
.plan-save{margin-top:2px; padding:3px 10px; border-radius:999px; background:#DFF7EE; color:#0B6B47; font-size:12.5px; font-weight:800}
.plan-sum{margin-top:8px; padding-top:12px; border-top:1px dashed #C8D5EC; width:100%; font-size:14px; line-height:1.5; color:#1B2440}
.plan-get, .plan-know{display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:14px}
.plan-get{background:#fff; border:1px solid #DCE6F3}
.plan-know{background:#EEF5FD; border:1px solid #C8D5EC; border-left:4px solid #0B285F}
.plan-h{display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0B1B45}
.plan-get ul, .plan-know ul{margin:0; padding-left:20px; font-size:14px; line-height:1.65; color:#1B2440}
.plan-get li::marker{color:#0FB4AA}
.plan-go{display:flex; justify-content:center; padding-top:4px}
.plan-go .btn{min-width:300px}
@media (max-width:719px){ .plan-go .btn{width:100%; min-width:0} .plan-price{font-size:26px} }
.cand-main:has(.plan-page.wide){max-width:980px}
.plan-price{white-space:nowrap}
.plan-grid.plan-n3 .plan-price{font-size:28px}
/* the plan page's opening line in bold (owner, 24 Oct 2026, 22:11, UX-036) */
.plan-lede{font-weight:700; color:#0B1B45}
/* Payment proof: the "Pay by bank transfer to" box redesigned (owner, 24 Oct 2026, 22:19, UX-037) */
.paybox{border-radius:18px; overflow:hidden; background:#fff; border:1px solid #C8D5EC; box-shadow:0 14px 34px rgba(11,40,95,.12)}
.paybox-head{position:relative; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 20px; color:#fff;
background:radial-gradient(120% 140% at 100% 0%, rgba(34,211,197,.35) 0%, rgba(34,211,197,0) 55%), linear-gradient(135deg,#0B285F 0%,#012463 100%)}
.paybox-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,#22D3C5,#2BD0C8 60%,rgba(43,208,200,0))}
.paybox-ico{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); color:#22D3C5; border:1px solid rgba(255,255,255,.18)}
.paybox-kicker{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9FEDE6}
.paybox-bank{font-size:17px; font-weight:800; line-height:1.25}
.paybox-bank span{display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,.78)}
.paybox-amt{margin-left:auto; text-align:right; font-size:24px; font-weight:800; letter-spacing:-.01em; color:#fff; white-space:nowrap}
.paybox-amt small{display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9FEDE6}
.paybox-body{display:flex; flex-direction:column; gap:12px; padding:18px 20px 16px}
.paybox-title{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px dashed #C8D5EC}
.paybox-title span, .paybox-lab{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5A6A8A}
.paybox-title b{font-size:15px; color:#0B1B45}
.paybox-calc{font-size:13px !important; font-weight:600}
.paybox-copy{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:#F0F7FE; border:1.5px dashed #9DB6DD}
.paybox-num{font-size:18px; font-weight:800; color:#0B285F; letter-spacing:.06em; word-break:break-all}
.paybox-btn{flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; border:1.5px solid #2BD0C8; background:#0B285F; color:#fff; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; transition:transform .12s, background .15s}
.paybox-btn::before{content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat}
.paybox-btn:hover{background:#012463; transform:translateY(-1px)}
.paybox-btn:focus-visible{outline:3px solid #22D3C5; outline-offset:2px}
.paybox-tip{margin:2px 0 0; font-size:13.5px; line-height:1.5; color:#33415C}
@media (max-width:560px){ .paybox-amt{margin-left:0; width:100%; text-align:left; padding-top:6px; border-top:1px solid rgba(255,255,255,.15)} .paybox-copy{flex-direction:column; align-items:stretch; gap:10px} .paybox-num{font-size:15px; letter-spacing:.02em; word-break:normal; overflow-wrap:anywhere} .paybox-btn{align-self:flex-start} .paybox-head, .paybox-body{padding-left:16px; padding-right:16px} }
/* Amount in words, written for him (owner, 24 Oct 2026, UX-038) */
input.auto-words{background:#EEF5FD; border-style:dashed; color:#0B1B45; font-weight:700; cursor:default}
input.auto-words:placeholder-shown{font-weight:400}
/* Proof received (M-25), redesigned like the payment box (owner, 24 Oct 2026, 22:31, UX-039) */
.rcpt{border-radius:18px; overflow:hidden; background:#fff; border:1px solid #C8D5EC; box-shadow:0 14px 34px rgba(11,40,95,.12)}
.rcpt-head{position:relative; display:flex; align-items:flex-start; gap:16px; padding:22px 22px 20px; color:#fff;
background:radial-gradient(120% 140% at 100% 0%, rgba(34,211,197,.35) 0%, rgba(34,211,197,0) 55%), linear-gradient(135deg,#0B285F 0%,#012463 100%)}
.rcpt-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,#22D3C5,#2BD0C8 60%,rgba(43,208,200,0))}
.rcpt-tick{flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#22D3C5; color:#0B1B45; box-shadow:0 0 0 6px rgba(34,211,197,.22)}
.rcpt-kicker{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9FEDE6}
.rcpt-head .rcpt-title{margin:0; font-size:26px; line-height:1.15; font-weight:700; color:#fff}
.rcpt-sub{font-size:14px; line-height:1.5; color:rgba(255,255,255,.85)}
.rcpt-body{padding:18px 22px 14px}
.rcpt-ref{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:14px; background:#F0F7FE; border:1.5px dashed #9DB6DD}
.rcpt-ref > span, .rcpt-list dt{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5A6A8A}
.rcpt-ref b{font-size:22px; font-weight:800; letter-spacing:.04em; color:#0B285F}
.rcpt-list{margin:6px 0 0; padding:0}
.rcpt-list > div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding:12px 2px; border-bottom:1px dashed #C8D5EC}
.rcpt-list > div:last-child{border-bottom:0}
.rcpt-list dd{margin:0; font-size:15px; font-weight:700; color:#0B1B45; text-align:right}
.rcpt-list .rcpt-amt dd{font-size:20px; font-weight:800; color:#0B285F}
.rcpt-next{display:flex; flex-direction:column; gap:12px; padding:16px 18px; border-radius:14px; background:#EEF5FD; border:1px solid #C8D5EC; border-left:4px solid #0B285F}
.rcpt-h{font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0B1B45}
.rcpt-next ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rcpt-next li{position:relative; display:flex; flex-direction:column; gap:2px; padding:0 0 16px 38px}
.rcpt-next li:last-child{padding-bottom:0}
.rcpt-next li::before{content:""; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; box-sizing:border-box; border:2px solid #9DB6DD; background:#fff}
.rcpt-next li:not(:last-child)::after{content:""; position:absolute; left:11px; top:26px; bottom:2px; width:2px; background:#C8D5EC}
.rcpt-next li.done::before{background:#22D3C5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1B45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat; border-color:#22D3C5}
.rcpt-next li.done::after{background:#22D3C5}
.rcpt-next li.now::before{border-color:#0B285F; box-shadow:inset 0 0 0 5px #fff; background:#0B285F; animation:rcpt-pulse 1.8s ease-in-out infinite}
@keyframes rcpt-pulse{0%,100%{box-shadow:inset 0 0 0 5px #fff, 0 0 0 0 rgba(34,211,197,.5)} 50%{box-shadow:inset 0 0 0 5px #fff, 0 0 0 7px rgba(34,211,197,0)}}
@media (prefers-reduced-motion:reduce){ .rcpt-next li.now::before{animation:none} }
.rcpt-next b{font-size:15px; color:#0B1B45}
.rcpt-next li span{font-size:13.5px; line-height:1.45; color:#33415C}
.rcpt-edit{margin:0; font-size:13.5px; color:#33415C; text-align:center}
.rcpt-go{display:flex; justify-content:center; flex-wrap:wrap; gap:12px}
.rcpt-go .btn{min-width:240px}
@media (max-width:560px){ .rcpt-head{padding:18px 16px} .rcpt-body{padding:16px} .rcpt-head .rcpt-title{font-size:22px} .rcpt-tick{width:44px; height:44px} .rcpt-go .btn{width:100%; min-width:0} .rcpt-list dd{text-align:left} }
/* Enrolment status (M-26), redesigned like Proof received (owner, 24 Oct 2026, 22:36, UX-040) */
.rcpt-head .stat-pill{flex:none; align-self:center; padding:6px 14px; border-radius:999px; background:#22D3C5; color:#0B1B45; font-size:12.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap}
.stat-wait .rcpt-tick{background:#fff; color:#0B285F; box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.stat-warn .rcpt-tick{background:#FFC857; color:#0B1B45; box-shadow:0 0 0 6px rgba(255,200,87,.25)}
.stat-warn .stat-pill{background:#FFC857}
.stat-info .rcpt-tick{background:#fff; color:#0B285F; box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.stat-info .stat-pill, .stat-wait .stat-pill{background:#fff}
.stat-p{margin:0; font-size:15px; line-height:1.55; color:#1B2440}
.stat-note{margin:0; font-size:13.5px; line-height:1.5; color:#33415C}
.regno{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:14px; background:#F0F7FE; border:1.5px dashed #9DB6DD}
.regno .num{font-size:20px; font-weight:800; letter-spacing:.03em; color:#0B285F}
.regno .col > span{font-size:13.5px; color:#33415C}
.regno-pill{padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800; background:#fff; color:#5A6A8A; border:1px solid #C8D5EC}
.regno-active{background:#ECFBF8; border-color:#2BD0C8}
.regno-active .regno-pill{background:#22D3C5; color:#0B1B45; border-color:#22D3C5}
.regno-replaced{opacity:.7}
@media (max-width:560px){ .rcpt-head{flex-wrap:wrap} .rcpt-head .stat-pill{margin-left:68px} }
.rcpt-kicker.stat-kicker{text-transform:none; letter-spacing:.06em; font-size:12.5px}
/* Time left to resubmit (owner, 24 Oct 2026, 23:10, UX-041) */
.ddl{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px; border-radius:16px; background:#FFF8E8; border:1.5px solid #FFC857; text-align:center}
.ddl-label{font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7A4B00}
.ddl-clock{display:flex; align-items:flex-start; gap:10px}
.ddl-unit{display:flex; flex-direction:column; align-items:center; gap:4px}
.ddl-unit b{display:block; min-width:72px; padding:10px 8px; border-radius:12px; background:#0B285F; color:#fff; font-size:34px; font-weight:800; line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums; box-shadow:0 6px 16px rgba(11,40,95,.18)}
.ddl-unit span{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5A6A8A}
.ddl-sep{padding-top:10px; font-size:30px; font-weight:800; color:#0B285F}
.ddl-msg{margin:0; font-size:13.5px; color:#33415C}
.ddl-late{background:#FDECEE; border-color:#E31836}
.ddl-late .ddl-label{color:#B3122B}
.ddl-late .ddl-unit b{background:#B3122B}
.ddl-over .ddl-unit b{background:#8A94A8}
@media (max-width:420px){ .ddl-unit b{min-width:58px; font-size:28px} .ddl-clock{gap:6px} }
/* Before week 1 (M-50), redesigned after the owner's sample (24 Oct 2026, 23:29, UX-042) */
.bw-welcome{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:18px}
.bw-chip{padding:4px 12px; border-radius:999px; background:#D7F6F2; color:#0B6B63; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.bw-hello{margin:0; font-family:var(--serif); font-size:36px; line-height:1.1; font-weight:700; color:#0B1B45}
.bw-lede{margin:0; font-size:17px; color:#33415C}
.bw-hero{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:12px; padding:26px 26px 0 26px; border-radius:20px; color:#fff;
background:radial-gradient(70% 90% at 85% 40%, rgba(34,211,197,.28) 0%, rgba(34,211,197,0) 60%), linear-gradient(135deg,#0B285F 0%,#012463 100%); box-shadow:0 14px 34px rgba(11,40,95,.18)}
.bw-hero-text{display:flex; flex-direction:column; gap:12px; padding-bottom:26px}
.bw-k{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#22D3C5}
.bw-big{font-family:var(--serif); font-size:34px; line-height:1.08; font-weight:700}
.bw-s{font-size:15px; line-height:1.5; color:rgba(255,255,255,.85)}
.bw-due{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:#fff}
.bw-due svg{color:#22D3C5}
.bw-hero-go{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px}
.bw-start{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:12px; background:#22D3C5; color:#0B1B45; font-size:15.5px; font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(34,211,197,.35); transition:transform .12s, background .15s}
.bw-start:hover{background:#2BE3D5; transform:translateY(-1px)}
.bw-start:focus-visible{outline:3px solid #fff; outline-offset:3px}
.bw-hero-art{position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:220px}
.bw-days{position:absolute; top:0; right:0; z-index:2}
.bw-sheet{position:relative; width:min(250px,100%); display:flex; flex-direction:column; gap:9px; padding:18px 16px 16px; border-radius:16px 16px 0 0; background:#fff; color:#0B1B45; box-shadow:0 -6px 30px rgba(0,0,0,.25); transform:rotate(-2deg) translateY(6px)}
.bw-sheet::before{content:""; position:absolute; top:-10px; left:50%; width:84px; height:20px; margin-left:-42px; border-radius:6px; background:#3D5A99}
.bw-sheet-t{font-size:13px; font-weight:800}
.bw-sheet-f{margin-top:2px; font-size:11.5px; font-weight:700; color:#5A6A8A}
.bw-row{display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; font-size:12px; font-weight:600}
.bw-row i, .bw-chipx i{display:block; width:22px; height:22px; border-radius:7px; background:var(--c)}
.bw-row b{min-width:28px; padding:2px 6px; border-radius:6px; text-align:center; font-size:11.5px; background:var(--cl); color:#0B1B45}
.bw-bio{--c:#22B07D; --cl:#DDF5EA} .bw-chem{--c:#3B82F6; --cl:#E0ECFE} .bw-phy{--c:#EF4466; --cl:#FDE3E8} .bw-eng{--c:#F59E0B; --cl:#FEF0D7} .bw-lr{--c:#8B5CF6; --cl:#EEE6FE}
.bw-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:16px 8px; border-radius:16px; background:#fff; border:1px solid #DCE6F3}
.bw-facts > div{display:flex; align-items:center; gap:12px; padding:4px 14px; border-left:1px solid #DCE6F3}
.bw-facts > div:first-child{border-left:0}
.bw-facts b, .bw-side b, .bw-locked b, .bw-ready b{display:block; font-size:15.5px; color:#0B1B45}
.bw-facts small, .bw-side small, .bw-locked small, .bw-ready small{display:block; font-size:13px; line-height:1.4; color:#5A6A8A}
.bw-ico{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#EAF2FD; color:#0B285F}
.bw-h{font-family:var(--serif); font-size:18px; font-weight:700; color:#0B1B45}
.bw-chips{display:flex; flex-wrap:wrap; gap:10px}
.bw-chipx{display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px; background:var(--cl); font-size:14px; font-weight:700; color:#0B1B45}
.bw-chipx i{width:18px; height:18px; border-radius:50%}
.bw-chipx b{font-size:12px; font-weight:800; color:#33415C}
.bw-two{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px}
.bw-steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.bw-steps li{counter-increment:s; position:relative; padding-left:42px; display:flex; flex-direction:column; gap:2px}
.bw-steps li::before{content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#EAF2FD; color:#0B285F; font-size:13px; font-weight:800}
.bw-steps b{font-size:15px; color:#0B1B45} .bw-steps span{font-size:13px; color:#5A6A8A}
.bw-base{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:20px; border-radius:16px; background:#F1F7FF; border:1.5px solid #8FB2E6; color:#0B285F}
.bw-base b{font-family:var(--serif); font-size:18px; color:#0B1B45} .bw-base span{font-size:13.5px; line-height:1.5; color:#33415C}
.bw-path{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; counter-reset:p}
.bw-path li{counter-increment:p; position:relative; display:flex; flex-direction:column; gap:2px; padding-left:44px}
.bw-path li::before{content:counter(p); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#EEF2F8; color:#5A6A8A; font-weight:800}
.bw-path li.now::before{background:#22D3C5; color:#0B1B45}
.bw-path b{font-size:14.5px; color:#0B1B45} .bw-path span{font-size:12.5px; color:#5A6A8A}
.bw-locked{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.bw-locked > div{display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:14px; background:#F7FAFE; border:1px dashed #C8D5EC}
.bw-locked .bw-ico{width:40px; height:40px; background:#EEF2F8; color:#5A6A8A}
.bw-locked b::after{content:" · opens in week 1"; font-size:12px; font-weight:700; color:#8A94A8}
.bw-ready{display:flex; align-items:center; gap:14px; padding:18px; border-radius:16px; background:linear-gradient(135deg,#DFF8F4,#ECFBF8); border:1px solid #9FE5DC}
.bw-tick{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#22D3C5; color:#0B1B45}
.bw-active{display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; background:#DFF8F4; color:#0B6B63; font-size:12.5px; font-weight:800}
.bw-active::before{content:""; width:8px; height:8px; border-radius:50%; background:#16A37F}
.bw-enrol .rcpt-list dd{font-size:14px}
.bw-side{display:flex; align-items:flex-start; gap:14px}
.bw-side > span:last-child{display:flex; flex-direction:column; gap:4px}
.bw-side .link-strong{margin-top:4px; font-size:14px}
.side .nav .nav-lock{margin-left:auto; display:inline-flex; opacity:.9}
@media (max-width:1100px){ .bw-two{grid-template-columns:1fr} }
@media (max-width:760px){ .bw-hero{grid-template-columns:1fr; padding:22px 20px 0} .bw-hero-art{min-height:0} .bw-sheet{display:none} .bw-days{position:static; align-self:flex-start; margin-bottom:18px} .bw-hero-art{justify-content:flex-start}
.bw-facts{grid-template-columns:1fr; gap:12px} .bw-facts > div{border-left:0} .bw-path{grid-template-columns:1fr} .bw-locked{grid-template-columns:1fr} .bw-hello{font-size:28px} .bw-big{font-size:28px} }
.card.bw-side{display:flex; flex-direction:row; padding:20px}
.bw-subj, .bw-two > .card, .bw-journey, .bw-enrol{gap:14px; padding:20px}
.bw-hero-art{min-height:250px}
.bw-sheet{margin-top:72px}
.bw-enrol .rcpt-list dt{text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; color:#5A6A8A}
.bw-enrol .rcpt-list > div{padding:10px 2px}
.dcol > .bw-hero, .dcol > section, .dcol > .bw-two{margin:0}
@media (max-width:760px){ .bw-sheet{margin-top:0} .bw-hero-art{min-height:0} }
@media (max-width:900px){ .dgrid:has(.bw-hero){grid-template-columns:minmax(0,1fr)} }
/* Before week 1 decluttered (owner, 24 Oct 2026, 23:41, UX-043) */
.bw-hello{font-size:32px}
.bw-sheet{gap:10px; padding-bottom:20px}
.bw-hero-text{gap:14px}
.bw-tips{margin:0; padding:12px 16px; border-radius:12px; background:#fff; border:1px dashed #C8D5EC; font-size:14px; line-height:1.5; color:#33415C}
.bw-tips b{color:#0B1B45}
.phone .bw-hello{font-size:26px}
/* the MCQs by subject card stays on a phone, as a plain card under the button (UX-043) */
@media (max-width:760px){ .bw-hero{padding-bottom:20px} .bw-sheet{display:flex; transform:none; margin-top:0; width:100%; border-radius:14px; box-shadow:none} .bw-sheet::before{display:none} }
.phone .bw-hero{padding-bottom:20px}
.phone .bw-sheet{display:flex; transform:none; margin-top:0; width:100%; border-radius:14px; box-shadow:none}
.phone .bw-sheet::before{display:none}
@media (max-width:760px){ .bw-hero-art{flex-direction:column; align-items:stretch} .bw-days{align-self:flex-start} }
.phone .bw-hero-art{flex-direction:column; align-items:stretch}
.phone .bw-days{align-self:flex-start}
/* Before week 1 (owner, 24 Oct 2026, 23:53, UX-044): Before you begin as points on the right; the writing pad on phones too */
.bw-tipcard{gap:12px; padding:20px}
.bw-tiplist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.bw-tiplist li{position:relative; padding-left:30px; font-size:14.5px; line-height:1.45; color:#1B2440}
.bw-tiplist li::before{content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:#D7F6F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6B63' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:760px){
.bw-hero{padding-bottom:0}
.bw-hero-art{flex-direction:column; align-items:center}
.bw-days{align-self:flex-start; margin-bottom:6px}
.bw-sheet{display:flex; width:min(280px,100%); margin-top:18px; border-radius:16px 16px 0 0; transform:rotate(-2deg) translateY(6px); box-shadow:0 -6px 30px rgba(0,0,0,.25)}
.bw-sheet::before{display:block}
}
.phone .bw-hero{padding-bottom:0}
.phone .bw-hero-art{flex-direction:column; align-items:center}
.phone .bw-days{align-self:flex-start; margin-bottom:6px}
.phone .bw-sheet{display:flex; width:min(280px,100%); margin-top:18px; border-radius:16px 16px 0 0; transform:rotate(-2deg) translateY(6px); box-shadow:0 -6px 30px rgba(0,0,0,.25)}
.phone .bw-sheet::before{display:block}
/* Before week 1: the facts strip, lightly refined (owner, 25 Oct 2026, 00:00, UX-045) */
.bw-facts2{padding:18px 6px; border-radius:18px; border-color:#D9E5F4; box-shadow:0 6px 18px rgba(11,40,95,.06)}
.bw-facts2 > div{gap:14px; padding:2px 18px; border-left-color:#E6EDF7}
.bw-facts2 .bw-ico{width:44px; height:44px; border-radius:14px}
.bw-facts2 > div:nth-child(1) .bw-ico{background:#E3F7F5; color:#0B8A80}
.bw-facts2 > div:nth-child(2) .bw-ico{background:#E8EFFC; color:#2456B8}
.bw-facts2 > div:nth-child(3) .bw-ico{background:#FFF3DC; color:#A86A00}
.bw-facts2 b{font-size:17px; font-weight:800; letter-spacing:-.01em; color:#0B1B45}
.bw-facts2 small{margin-top:2px; font-size:13px; line-height:1.45; color:#5A6A8A}
/* Diagnostic Test instructions (M-52), redesigned like Before week 1 (owner, 25 Oct 2026, 00:08, UX-046) */
.di-wrap{width:100%; max-width:860px; margin:0 auto; padding:24px 16px 48px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px}
.di-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.di-logo{height:36px}
.di-head{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:12px; padding:26px 26px 0; border-radius:20px; color:#fff;
background:radial-gradient(70% 90% at 85% 40%, rgba(34,211,197,.28) 0%, rgba(34,211,197,0) 60%), linear-gradient(135deg,#0B285F 0%,#012463 100%)}
.di-head:not(:has(.di-art)){grid-template-columns:1fr; padding-bottom:26px}
.di-head-text{display:flex; flex-direction:column; gap:12px; padding-bottom:26px}
.di-head:not(:has(.di-art)) .di-head-text{padding-bottom:0}
.di-title{margin:0; font-family:var(--serif); font-size:32px; line-height:1.1; font-weight:700; color:#fff}
.di-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.di-chips span{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-size:13.5px; font-weight:700}
.di-chips svg{color:#22D3C5}
.di-art{display:flex; align-items:flex-end; justify-content:center}
.di-art .bw-sheet{margin-top:0}
.di-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.di-card{gap:12px; padding:20px}
.di-know{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.di-know li{font-size:14.5px; line-height:1.45; color:#33415C}
.di-know b{color:#0B1B45}
.di-go{display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px; border-radius:16px; background:#fff; border:1px solid #DCE6F3}
.di-agree{display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:15px; font-weight:600; color:#0B1B45}
.di-agree input{width:22px; height:22px; margin:0; accent-color:#0B285F; flex:none}
.di-start{border:0; cursor:pointer; font-family:inherit}
.di-start[aria-disabled="true"]{opacity:.45; box-shadow:none}
@media (max-width:760px){ .di-head{grid-template-columns:1fr; padding:22px 20px 0} .di-art .bw-sheet{width:min(280px,100%)} .di-grid{grid-template-columns:1fr} .di-title{font-size:26px} }
.phone .di-head{grid-template-columns:1fr; padding:22px 20px 0}
.phone .di-art .bw-sheet{width:min(280px,100%)}
.phone .di-grid{grid-template-columns:1fr}
.phone .di-title{font-size:26px}
.di-shake{outline:2px solid #E31836; outline-offset:6px; border-radius:8px}
/* Diagnostic Test submitted (M-56), like Proof received (owner, 25 Oct 2026, 00:15, UX-047) */
.rcpt-list dd.dn-open{display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; background:#DFF8F4; color:#0B6B63; font-size:13.5px}
.rcpt-list dd.dn-open::before{content:""; width:8px; height:8px; border-radius:50%; background:#16A37F}
.rcpt-go .bw-start{min-width:240px; justify-content:center}
@media (max-width:560px){ .rcpt-go .bw-start{width:100%; min-width:0} }
/* Diagnostic report (M-57), comprehensive (owner, 25 Oct 2026, 00:20, UX-048) */
.rp-hero{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:24px 26px; border-radius:20px; color:#fff;
background:radial-gradient(70% 90% at 85% 40%, rgba(34,211,197,.28) 0%, rgba(34,211,197,0) 60%), linear-gradient(135deg,#0B285F 0%,#012463 100%)}
.rp-hero-text{display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; flex:1 1 260px}
.rp-title{margin:0; font-family:var(--serif); font-size:32px; line-height:1.1; font-weight:700; color:#fff}
.rp-band{padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800; background:#fff; color:#0B1B45}
.rp-band.rp-strong{background:#22D3C5} .rp-band.rp-weak{background:#FFD3D9; color:#8A0F22}
.rp-scores{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.rp-ring{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px}
.rp-ring-in{position:absolute; top:0; left:0; width:132px; height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center}
.rp-ring-in b{font-size:30px; font-weight:800; line-height:1}
.rp-ring-in small{font-size:12.5px; color:rgba(255,255,255,.8); margin-top:4px}
.rp-ring-k{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9FEDE6}
.rp-part2{display:flex; flex-direction:column; gap:4px; min-width:150px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2)}
.rp-part2 b{font-size:22px; font-weight:800} .rp-part2 small{font-size:12.5px; color:rgba(255,255,255,.8)}
.rp-part2.is-done{background:#22D3C5; color:#0B1B45; border-color:#22D3C5} .rp-part2.is-done small, .rp-part2.is-done .rp-ring-k{color:#0B1B45}
.rp-counts{grid-template-columns:repeat(4,1fr)}
.rp-counts .bw-ico{font-size:18px; font-weight:800}
.rp-counts .rp-ok{background:#E3F7F5; color:#0B8A80} .rp-counts .rp-no{background:#FDE8EB; color:#B3122B}
.rp-counts .rp-skip{background:#EEF2F8; color:#5A6A8A} .rp-counts .rp-flag{background:#FFF3DC; color:#A86A00}
.rp-card{gap:12px; padding:20px}
.rp-subj{display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid #EEF2F8}
.rp-subj:first-of-type{border-top:0}
.rp-subj-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.rp-subj-top b{font-size:15px; color:#0B1B45}
.rp-bar{height:10px; border-radius:999px; background:#EEF2F8; overflow:hidden}
.rp-bar i{display:block; height:100%; border-radius:999px; background:#2456B8}
.rp-bar i.rp-strong{background:#16A37F} .rp-bar i.rp-weak{background:#E5485F}
.rp-subj-s{font-size:13px; color:#5A6A8A}
.rp-conf{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.rp-conf > div{display:flex; flex-direction:column; gap:2px; padding:14px; border-radius:14px; border:1px solid #DCE6F3}
.rp-conf b{font-size:26px; font-weight:800; line-height:1.1} .rp-conf span{font-size:14px; font-weight:800; color:#0B1B45} .rp-conf small{font-size:12.5px; line-height:1.4; color:#5A6A8A}
.rp-conf-ok{background:#F0FBF8} .rp-conf-ok b{color:#0B8A80}
.rp-conf-no{background:#FFF4F5} .rp-conf-no b{color:#B3122B}
.rp-conf-mid{background:#FFF9EC} .rp-conf-mid b{color:#A86A00}
.rp-next{display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:16px; background:linear-gradient(135deg,#DFF8F4,#ECFBF8); border:1px solid #9FE5DC}
.rp-next-t{font-size:17px; line-height:1.35; color:#0B1B45}
.rp-group{border-top:1px solid #EEF2F8; padding-top:10px}
.rp-group summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; font-size:14px; color:#0B1B45}
.rp-group summary::-webkit-details-marker{display:none}
.rp-group summary::after{content:"›"; margin-left:auto; font-size:18px; color:#5A6A8A; transition:transform .15s}
.rp-group[open] summary::after{transform:rotate(90deg)}
.rp-lo{display:flex; align-items:center; gap:10px; padding:8px 0 8px 4px; font-size:13.5px; line-height:1.4; color:#1B2440; border-top:1px dashed #E6EDF7}
.rp-lo:first-of-type{margin-top:8px}
.rp-review{padding:20px}
.rp-review > summary{display:flex; flex-direction:column; gap:2px; cursor:pointer; list-style:none}
.rp-review > summary::-webkit-details-marker{display:none}
.rp-review > summary .bw-h::after{content:" ›"; color:#5A6A8A}
.rp-review[open] > summary .bw-h::after{content:" ⌄"}
.rp-qs{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.rp-q{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; border:1px solid #DCE6F3; border-left:4px solid #8A94A8; background:#fff}
.rp-q.is-ok{border-left-color:#16A37F} .rp-q.is-no{border-left-color:#E5485F}
.rp-q-top{display:flex; align-items:center; gap:10px}
.rp-q-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#EEF2F8; color:#0B1B45; font-size:12.5px; font-weight:800}
.rp-q-mark{margin-left:auto; font-size:12.5px; font-weight:800; color:#5A6A8A}
.rp-q.is-ok .rp-q-mark{color:#0B8A80} .rp-q.is-no .rp-q-mark{color:#B3122B}
.rp-q-stem{margin:0; font-size:14.5px; line-height:1.5; color:#0B1B45}
.rp-q-img{max-width:100%; max-height:260px; border-radius:10px; border:1px solid #DCE6F3; align-self:flex-start}
.rp-q-ans{margin:0; display:flex; flex-direction:column; gap:6px}
.rp-q-ans > div{display:flex; gap:10px; flex-wrap:wrap; font-size:13.5px}
.rp-q-ans dt{min-width:110px; font-weight:700; color:#5A6A8A} .rp-q-ans dd{margin:0; color:#0B1B45; font-weight:600}
.rp-q-why{margin:0; padding:10px 12px; border-radius:10px; background:#F3F8FE; font-size:13.5px; line-height:1.5; color:#33415C}
.rp-path{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rp-path li{position:relative; display:flex; flex-direction:column; gap:2px; padding:0 0 14px 36px}
.rp-path li:last-child{padding-bottom:0}
.rp-path li::before{content:""; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; box-sizing:border-box; border:2px solid #9DB6DD; background:#fff}
.rp-path li:not(:last-child)::after{content:""; position:absolute; left:10px; top:24px; bottom:2px; width:2px; background:#DCE6F3}
.rp-path li.done::before{background:#22D3C5; border-color:#22D3C5}
.rp-path li.now::before{background:#0B285F; border-color:#0B285F; box-shadow:inset 0 0 0 5px #fff}
.rp-path b{font-size:14.5px; color:#0B1B45} .rp-path span{font-size:13px; color:#5A6A8A}
.rp-key li{display:flex; align-items:center; gap:8px; padding-left:0} .rp-key li::before{display:none}
@media (max-width:760px){ .rp-counts{grid-template-columns:repeat(2,1fr)} .rp-conf{grid-template-columns:1fr} .rp-title{font-size:26px} .rp-hero{padding:20px} }
.phone .rp-counts{grid-template-columns:repeat(2,1fr)} .phone .rp-conf{grid-template-columns:1fr} .phone .rp-title{font-size:26px} .phone .rp-hero{padding:20px}
.phone .dgrid:has(.rp-hero){grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){ .dgrid:has(.rp-hero){grid-template-columns:minmax(0,1fr)} }
.rp-lo .grow{flex:1; min-width:0} .rp-lo > .pill{flex:none}
/* Home: This week (M-60, M-144), redesigned like Before week 1 (owner, 25 Oct 2026, 00:33, UX-049) */
.hm-welcome{display:flex; align-items:center; gap:14px; padding:18px; border-radius:16px; background:linear-gradient(135deg,#DFF8F4,#ECFBF8); border:1px solid #9FE5DC}
.hm-welcome.hm-done{background:linear-gradient(135deg,#E8EFFC,#F3F7FE); border-color:#C8D5EC}
.hm-badge{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#22D3C5; color:#0B1B45; font-size:20px; font-weight:800}
.hm-done .hm-badge{background:#0B285F; color:#22D3C5}
.hm-welcome-t{font-size:18px; line-height:1.3; color:#0B1B45}
.hm-hero{display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:20px; color:#fff;
background:radial-gradient(70% 90% at 85% 20%, rgba(34,211,197,.28) 0%, rgba(34,211,197,0) 60%), linear-gradient(135deg,#0B285F 0%,#012463 100%); box-shadow:0 14px 34px rgba(11,40,95,.18)}
.hm-hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.hm-big{font-family:var(--serif); font-size:34px; line-height:1.05; font-weight:700}
.hm-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.hm-days span{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.6)}
.hm-days i{display:block; width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.18)}
.hm-days .d i{background:#22D3C5} .hm-days .d{color:rgba(255,255,255,.85)}
.hm-days .t i{background:#fff} .hm-days .t{color:#fff}
.hm-subj{display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.hm-subj b{font-size:18px}
.hm-subj-k{font-size:12px; font-weight:700; color:#BFC8E8}
.hm-subj-s{font-size:12.5px; color:#D5DBF0}
.hm-prog{height:8px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden}
.hm-prog i{display:block; height:100%; border-radius:999px; background:#22D3C5}
.hm-today{background:rgba(1,20,60,.45); border-radius:14px; padding:14px 16px}
.hm-go{align-self:stretch; justify-content:center}
.hm-test{display:flex; flex-direction:column; gap:8px; padding:18px 20px; border-radius:16px; background:#fff; border:1px solid #DCE6F3; border-left:5px solid #22D3C5; box-shadow:0 6px 18px rgba(11,40,95,.06)}
.hm-test.is-open{border-left-color:#E31836; background:#FFF8F9}
.hm-test-t{font-size:17px; line-height:1.3; color:#0B1B45}
.hm-when{flex:none; display:flex; flex-direction:column; align-items:center; padding:8px 12px; border-radius:12px; background:#0B285F; color:#fff}
.hm-when b{font-size:22px; line-height:1} .hm-when small{font-size:11px; font-weight:700; color:#9FEDE6}
.hm-seq li.now::before{background:#22D3C5; border-color:#22D3C5; box-shadow:none}
.hm-seq li.now b{color:#0B6B63}
.hm-perf .card{padding:20px; gap:12px; border-radius:16px}
.hm-perf .label{font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:0; text-transform:none; color:#0B1B45}
.hm-perf table th{font-size:12px; color:#5A6A8A}
.hm-perf table tr{border-top-color:#EEF2F8 !important}
@media (max-width:900px){ .dgrid:has(.hm-hero){grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .hm-big{font-size:28px} .hm-hero{padding:20px} }
.phone .dgrid:has(.hm-hero){grid-template-columns:minmax(0,1fr)} .phone .hm-big{font-size:28px} .phone .hm-hero{padding:20px}
.side .nav .nav-new{margin-left:auto; padding:1px 7px; border-radius:999px; background:#22D3C5; color:#0B1B45; font-size:10.5px; font-weight:800}
/* Home refinements (owner, 25 Oct 2026, 12:19, UX-051): threads, My performance, Your next test */
.hm-threads{display:flex; flex-direction:column; gap:10px; margin-top:4px; padding:14px 16px; border-radius:14px; background:linear-gradient(135deg,#ECFBF8,#F4FBFF); border:1px solid #BDEDE6}
.hm-thread{display:flex; align-items:center; gap:12px}
.hm-thread-ico{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#22D3C5; color:#0B1B45; font-size:18px; font-weight:800}
.hm-thread b{font-size:15px; color:#0B1B45}
.hm-thread-bar{display:block; height:6px; border-radius:999px; background:#D7EFEC; overflow:hidden}
.hm-thread-bar i{display:block; height:100%; border-radius:999px; background:#16A37F}
.pf-card{gap:14px; padding:20px; border-radius:16px}
.pf-tabs{display:flex; flex-wrap:wrap; gap:6px}
.pf-tabs input{position:absolute; opacity:0; pointer-events:none}
.pf-tabs label{padding:7px 12px; border-radius:999px; background:#EEF2F8; color:#33415C; font-size:13px; font-weight:700; cursor:pointer}
.pf-tabs input:checked + label{background:#0B285F; color:#fff}
.pf-tabs input:focus-visible + label{outline:3px solid #22D3C5; outline-offset:2px}
.pf-grid{display:none; width:100%; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:6px}
.pf-r0:checked ~ .pf-g0, .pf-r1:checked ~ .pf-g1, .pf-r2:checked ~ .pf-g2{display:grid}
.pf-tile{display:flex; flex-direction:column; gap:2px; padding:14px; border-radius:14px; border:1px solid #DCE6F3}
.pf-tile b{font-size:26px; font-weight:800; line-height:1.1}
.pf-tile span{font-size:13px; font-weight:700; color:#5A6A8A}
.pf-sat{background:#F0FBF8} .pf-sat b{color:#0B8A80}
.pf-miss{background:#FFF4F5} .pf-miss b{color:#B3122B}
.pf-avg{background:#F1F6FE} .pf-avg b{color:#2456B8}
.pf-vid{background:#FFF9EC} .pf-vid b{color:#A86A00}
.pf-strong{display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:#1B2440}
.pf-up{color:#0B8A80; font-weight:800} .pf-down{color:#B3122B; font-weight:800}
.nt{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:18px; color:#fff;
background:radial-gradient(90% 120% at 100% 0%, rgba(34,211,197,.45) 0%, rgba(34,211,197,0) 55%), linear-gradient(140deg,#0B285F 0%,#012463 70%,#0A3A6E 100%); box-shadow:0 14px 30px rgba(11,40,95,.22)}
.nt::after{content:""; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%; border:18px solid rgba(34,211,197,.12)}
.nt-top{display:flex; align-items:center; gap:12px}
.nt-ico{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#22D3C5; color:#0B1B45; animation:nt-bob 2.4s ease-in-out infinite}
@keyframes nt-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){ .nt-ico{animation:none} }
.nt-k{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9FEDE6}
.nt-t{font-size:18px; line-height:1.25}
.nt-clock{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.nt-clock span{display:flex; flex-direction:column; align-items:center; padding:10px 6px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16)}
.nt-clock b{font-size:28px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.nt-clock small{margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#BFC8E8}
.nt-when{font-size:14px; font-weight:700; color:#fff}
.nt-chips{display:flex; flex-wrap:wrap; gap:6px}
.nt-chips span{padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.12); font-size:12.5px; font-weight:700}
.nt-prep{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:rgba(34,211,197,.14); border:1px solid rgba(34,211,197,.35); font-size:13.5px; line-height:1.45; color:#E7FAF8}
.nt-prep b{color:#22D3C5; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase}
.nt-go{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.nt-btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:12px; background:#22D3C5; color:#0B1B45; font-weight:800; font-size:14.5px; text-decoration:none}
.nt-btn:hover{background:#2BE3D5}
.nt-link{color:#fff; font-size:13.5px; font-weight:700; text-decoration:none}
/* UX-053 (owner, 25 Oct 2026, 12:56): the This week card is light, so the navy belongs to Your next test alone; the welcome card restyled. */
.hm-hero{color:#0B1B45; background:radial-gradient(60% 80% at 100% 0%, rgba(34,211,197,.14) 0%, rgba(34,211,197,0) 70%), #fff;
border:1px solid #DCE6F3; box-shadow:0 10px 28px rgba(11,40,95,.08); position:relative; overflow:hidden}
.hm-hero::before{content:""; position:absolute; left:0; top:0; right:0; height:5px; background:linear-gradient(90deg,#22D3C5,#16A37F 60%,#0B285F)}
.hm-hero .bw-k{color:#0B8F84}
.hm-hero .bw-s{color:#55607A}
.hm-hero .hm-big{color:#0B1B45}
.hm-hero .small{color:#55607A}
.hm-hero .daysleft{background:#E6F8F5; color:#0B6B63; border:1px solid #BDEDE6}
.hm-days span{color:#8A96AE}
.hm-days i{background:#E6ECF4}
.hm-days .d{color:#0B6B63} .hm-days .d i{background:#22D3C5}
.hm-days .t{color:#0B1B45} .hm-days .t i{background:#0B285F; box-shadow:0 0 0 3px rgba(11,40,95,.12)}
.hm-subj{background:#F6F9FD; border:1px solid #E3EAF3}
.hm-subj b{color:#0B1B45}
.hm-subj-k{color:#5A6A8A}
.hm-subj-s{color:#55607A}
.hm-prog{background:#E3EAF3}
.hm-prog i{background:linear-gradient(90deg,#22D3C5,#16A37F)}
.hm-today{background:#F2FBF9; border:1px dashed #A9E3DB}
.hm-today .hm-subj-k{color:#0B6B63}
.hm-hero .tick{color:#0B1B45}
.hm-hero .tick .box{border-color:#9AA8C2; background:#fff}
.hm-hero .tick[aria-checked="true"] .box{background:#22D3C5; border-color:#22D3C5}
.hm-hero .tick[aria-checked="true"] .txt{color:#8A96AE}
.hm-hero .hm-go{box-shadow:0 8px 18px rgba(34,211,197,.28)}
/* The welcome and Subject completed cards: white, a coloured edge, the subject's weeks easy to read. */
.hm-welcome{position:relative; overflow:hidden; background:#fff; border:1px solid #CDEDE8; border-left:6px solid #22D3C5; padding:16px 18px; box-shadow:0 6px 18px rgba(11,40,95,.05)}
.hm-welcome::after{content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(34,211,197,.18), rgba(34,211,197,0) 70%); pointer-events:none}
.hm-welcome .hm-badge{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#22D3C5,#16A37F); color:#fff; box-shadow:0 6px 14px rgba(22,163,127,.3)}
.hm-welcome-t{font-family:var(--serif); font-size:20px}
.hm-welcome .small{color:#55607A}
.hm-welcome.hm-done{background:#fff; border-color:#D5DEEE; border-left-color:#0B285F}
.hm-welcome.hm-done::after{background:radial-gradient(circle, rgba(11,40,95,.10), rgba(11,40,95,0) 70%)}
.hm-done .hm-badge{background:linear-gradient(135deg,#0B285F,#1B3A8A); color:#22D3C5; box-shadow:0 6px 14px rgba(11,40,95,.25)}
/* UX-054 (owner, 25 Oct 2026, 13:11): This week is the main card, the first thing the eye meets; Your next test is lighter and comes second. */
.hm-hero{color:#fff; border:0; padding:26px;
background:radial-gradient(55% 75% at 92% 8%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 65%), radial-gradient(60% 80% at 0% 100%, rgba(4,60,55,.55) 0%, rgba(4,60,55,0) 70%), linear-gradient(135deg,#14B3A5 0%,#0C8C80 50%,#086A61 100%);
box-shadow:0 18px 40px rgba(8,106,97,.30), 0 2px 0 rgba(255,255,255,.25) inset}
.hm-hero::before{content:none}
.hm-hero .bw-k{color:#D9FFFA}
.hm-hero .bw-s{color:rgba(255,255,255,.88)}
.hm-hero .hm-big{color:#fff; font-size:40px; text-shadow:0 2px 12px rgba(4,60,55,.25)}
.hm-hero .small{color:rgba(255,255,255,.85)}
.hm-hero .daysleft{background:#fff; color:#086A61; border:0; box-shadow:0 6px 16px rgba(4,60,55,.25)}
.hm-days span{color:rgba(255,255,255,.7)}
.hm-days i{height:7px; background:rgba(255,255,255,.22)}
.hm-days .d{color:#fff} .hm-days .d i{background:rgba(255,255,255,.9)}
.hm-days .t{color:#FFE08A} .hm-days .t i{background:#FFD25C; box-shadow:0 0 0 3px rgba(255,210,92,.30), 0 0 14px rgba(255,210,92,.55)}
.hm-subj{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22)}
.hm-subj b{color:#fff; font-size:20px}
.hm-subj-k{color:#CFF7F2}
.hm-subj-s{color:rgba(255,255,255,.85)}
.hm-prog{background:rgba(255,255,255,.22)}
.hm-prog i{background:linear-gradient(90deg,#FFE08A,#FFD25C)}
.hm-today{background:rgba(3,55,50,.32); border:1px solid rgba(255,255,255,.14)}
.hm-today .hm-subj-k{color:#CFF7F2}
.hm-hero .tick{color:#fff}
.hm-hero .tick .box{border-color:rgba(255,255,255,.7); background:transparent}
.hm-hero .tick[aria-checked="true"] .box{background:#fff; border-color:#fff}
.hm-hero .tick[aria-checked="true"] .box svg{stroke:#086A61}
.hm-hero .tick[aria-checked="true"] .txt{color:rgba(255,255,255,.65)}
.hm-hero .hm-go{background:#fff; color:#086A61; box-shadow:0 10px 22px rgba(4,60,55,.30)}
.hm-hero .hm-go:hover{background:#F2FFFD}
.hm-hero .hm-go:focus-visible{outline-color:#FFD25C}
@media (max-width:560px){ .hm-hero .hm-big{font-size:32px} }
.phone .hm-hero .hm-big{font-size:32px}
/* Your next test: white, quieter, still with its countdown. */
.nt{color:#0B1B45; background:#fff; border:1px solid #DCE6F3; border-top:4px solid #0B285F; box-shadow:0 6px 18px rgba(11,40,95,.06)}
.nt::after{border-color:rgba(11,40,95,.05)}
.nt-k{color:#0B8F84}
.nt-t{color:#0B1B45}
.nt-clock span{background:#F3F6FB; border:1px solid #E1E7F2}
.nt-clock b{color:#0B285F; font-size:26px}
.nt-clock small{color:#5A6A8A}
.nt-when{color:#0B1B45}
.nt-chips span{background:#EEF2F8; color:#0B285F}
.nt-prep{background:#F4FAF9; border:1px solid #D6EEEA; color:#33415C}
.nt-prep b{color:#0B8F84}
.nt-btn{background:#0B285F; color:#fff}
.nt-btn:hover{background:#13367A}
.nt-link{color:#0B285F}
/* UX-055 (owner, 25 Oct 2026, 13:15): This week in the side bar's navy family, a little brighter, so the side bar flows into it. */
.hm-hero{background:radial-gradient(55% 70% at 95% 0%, rgba(53,214,190,.30) 0%, rgba(53,214,190,0) 65%), radial-gradient(50% 60% at 0% 100%, rgba(11,27,69,.55) 0%, rgba(11,27,69,0) 70%), linear-gradient(120deg,#13276C 0%,#1A3488 55%,#2445A8 100%);
box-shadow:0 18px 40px rgba(19,39,108,.30), 0 1px 0 rgba(255,255,255,.18) inset}
.hm-hero .bw-k{color:#7FEBDB}
.hm-hero .bw-s,.hm-hero .small{color:#D5DBF0}
.hm-hero .hm-big{text-shadow:0 2px 14px rgba(11,27,69,.35)}
.hm-hero .daysleft{color:#13276C; box-shadow:0 6px 16px rgba(11,27,69,.30)}
.hm-days span{color:#AEB9DE}
.hm-days i{background:rgba(255,255,255,.18)}
.hm-days .d i{background:#35D6BE} .hm-days .d{color:#DDF8F3}
.hm-subj{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16)}
.hm-subj-k,.hm-today .hm-subj-k{color:#BFC8E8}
.hm-subj-s{color:#D5DBF0}
.hm-prog{background:rgba(255,255,255,.16)}
.hm-prog i{background:linear-gradient(90deg,#35D6BE,#7FEBDB)}
.hm-today{background:rgba(11,27,69,.38); border-color:rgba(255,255,255,.10)}
.hm-hero .tick[aria-checked="true"] .box{background:#35D6BE; border-color:#35D6BE}
.hm-hero .tick[aria-checked="true"] .box svg{stroke:#0B1B45}
.hm-hero .hm-go{background:#fff; color:#13276C; box-shadow:0 10px 22px rgba(11,27,69,.35)}
.hm-hero .hm-go:hover{background:#EEF2FF}
/* UX-056 (owner, 25 Oct 2026, 13:18): no empty space under the shorter column of the home. Both columns end level; the last card of the
shorter one grows, and in My performance the four figure tiles grow with it (two columns only; phones unchanged). */
@media (min-width:901px){
.dgrid:has(.hm-hero){align-items:stretch}
.dgrid:has(.hm-hero) > .dcol > :last-child{flex-grow:1}
.dcol > .pf-card .pf-tabs{flex:1; display:grid; grid-template-columns:repeat(3,auto) 1fr; grid-template-rows:auto 1fr; column-gap:6px; row-gap:0; align-items:start}
.dcol > .pf-card .pf-grid{grid-column:1 / -1; align-self:stretch; grid-auto-rows:1fr; margin-top:10px}
.dcol > .pf-card .pf-tile{justify-content:center}
.dcol > .pf-card .pf-tile b{font-size:30px}
}
.phone .dgrid:has(.hm-hero){align-items:start}
.phone .dcol > .pf-card .pf-tabs{display:flex; flex:none}
.phone .dcol > .pf-card .pf-grid{margin-top:6px}
.phone .dcol > .pf-card .pf-tile b{font-size:26px}
/* UX-056 fix (25 Oct 2026): in the app My performance sits inside .hm-perf, so the wrapper passes the height on to the card. */
@media (min-width:901px){
.dgrid:has(.hm-hero) .hm-perf{display:flex; flex-direction:column}
.dgrid:has(.hm-hero) .hm-perf > .pf-card{flex:1}
.dgrid:has(.hm-hero) .pf-card .pf-tabs{flex:1; display:grid; grid-template-columns:repeat(3,auto) 1fr; grid-template-rows:auto 1fr; column-gap:6px; row-gap:0; align-items:start}
.dgrid:has(.hm-hero) .pf-card .pf-grid{grid-column:1 / -1; align-self:stretch; grid-auto-rows:1fr; margin-top:10px}
.dgrid:has(.hm-hero) .pf-card .pf-tile{justify-content:center}
.dgrid:has(.hm-hero) .pf-card .pf-tile b{font-size:30px}
}
.phone .dgrid:has(.hm-hero) .pf-card .pf-tabs{display:flex; flex:none}
.phone .dgrid:has(.hm-hero) .pf-card .pf-tile b{font-size:26px}
/* UX-059 (owner, 25 Oct 2026, 13:31): review weeks and revision clubbed into one "final stretch" card, a full mock every week, a sense of reward. */
.rp-path li.hm-final{padding:8px 0 0 0}
.rp-path li.hm-final::before{content:none}
.hm-fin{position:relative; overflow:hidden; display:flex; gap:14px; align-items:flex-start; padding:16px 16px 16px 14px; border-radius:16px;
background:radial-gradient(70% 90% at 100% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%), linear-gradient(135deg,#FFF7E0 0%,#FFE8A8 100%);
border:1px solid #F1C75B; box-shadow:0 10px 24px rgba(201,138,0,.16)}
.hm-fin::after{content:"★"; position:absolute; right:14px; bottom:-14px; font-size:72px; line-height:1; color:rgba(201,138,0,.12); pointer-events:none}
.hm-fin-ico{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#fff;
background:linear-gradient(135deg,#F7B500,#D98200); box-shadow:0 6px 14px rgba(217,130,0,.35), 0 0 0 4px #FFF3CF}
.hm-fin-b{display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; z-index:1}
.rp-path .hm-fin-k{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#A25E00}
.rp-path .hm-fin-t{font-size:17px; line-height:1.25; color:#0B1B45}
.hm-fin-chips{display:flex; flex-wrap:wrap; gap:6px}
.rp-path .hm-fin-chips span{padding:4px 10px; border-radius:999px; background:#fff; border:1px solid #F1C75B; font-size:12.5px; font-weight:700; color:#6B4500}
.rp-path .hm-fin-chips .hm-fin-mock{background:#0B1B45; border-color:#0B1B45; color:#FFD25C}
.rp-path .hm-fin-s{font-size:13px; line-height:1.45; color:#5A4A1E}
.rp-path .hm-fin-tag{align-self:flex-start; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:800; background:#0B285F; color:#fff}
.rp-path .hm-final.done .hm-fin-tag{background:#16A37F}
.rp-path .hm-fin-ico{color:#fff}
/* UX-060 (owner, 25 Oct 2026, 13:36): the final stretch back on the timeline like the subjects, toned down: a gold star on the line and one chip. */
.rp-path li.hm-final{padding:0 0 0 36px}
.rp-path li.hm-final::before{content:"★"; display:grid; place-items:center; font-size:12px; line-height:1; color:#C98A00; border-color:#E6B23A; background:#FFF8E6}
.rp-path li.hm-final.now::before{color:#fff; background:#E6A100; border-color:#E6A100; box-shadow:none}
.rp-path li.hm-final.done::before{color:#fff; background:#22D3C5; border-color:#22D3C5}
.rp-path .hm-fin-mock{align-self:flex-start; margin-top:4px; padding:3px 10px; border-radius:999px; background:#FFF4D6; border:1px solid #F1D08A; font-size:12px; font-weight:700; color:#7A5200}
/* UX-061 (owner, 25 Oct 2026, 13:42): the five steps back (Biology, Chemistry, Physics, Review weeks, Revision); the last two joined on
the right by a bracket that reads "A full mock every week, from week 36". */
.rp-path li.hm-pair{padding:0; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:stretch}
.rp-path li.hm-pair::before{content:none}
.hm-step{position:relative; display:flex; flex-direction:column; gap:2px; padding:0 0 14px 36px}
.hm-step:last-child{padding-bottom:0}
.hm-step::before{content:""; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; box-sizing:border-box; border:2px solid #9DB6DD; background:#fff}
.hm-step:first-child::after{content:""; position:absolute; left:10px; top:24px; bottom:2px; width:2px; background:#DCE6F3}
.hm-step.done::before{background:#22D3C5; border-color:#22D3C5}
.hm-step.now::before{background:#0B285F; border-color:#0B285F; box-shadow:inset 0 0 0 5px #fff}
.hm-seq .hm-step.now b{color:#0B6B63}
.hm-pair-note{position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:0 4px 0 18px; max-width:170px}
.hm-pair-note::before{content:""; position:absolute; left:0; top:2px; bottom:2px; width:10px; border:2px solid #E6A100; border-left:0; border-radius:0 12px 12px 0}
.hm-pair-note::after{content:""; position:absolute; left:10px; top:50%; width:6px; height:2px; background:#E6A100}
.rp-path .hm-pair-note b{font-size:14px; line-height:1.3; color:#0B1B45}
.rp-path .hm-pair-note b i{font-style:normal; color:#E6A100}
.rp-path .hm-pair-note span{font-size:12.5px; font-weight:700; color:#A86A00}
.rp-path li.hm-pair{grid-template-columns:max-content minmax(0,1fr); column-gap:18px}
.hm-pair-note{max-width:none; padding-left:22px}
.hm-pair-note > b,.hm-pair-note > span{position:relative; z-index:1}
.hm-pair-in{display:inline-flex; flex-direction:column; gap:2px; align-self:flex-start; padding:9px 14px; border-radius:12px; background:#FFF6DC; border:1px solid #F3D58C}
.rp-path .hm-pair-in b{font-size:14.5px}
/* UX-062 (owner, 25 Oct 2026, 13:47): bracket and note 50 px further right; the note in a quiet indigo tint. */
.rp-path li.hm-pair{column-gap:68px}
.hm-pair-in{background:#EEF1FC; border-color:#C7D1F1}
.rp-path .hm-pair-note .hm-pair-in > span{color:#3A4FA0}
@media (max-width:560px){ .rp-path li.hm-pair{column-gap:18px} }
.phone .rp-path li.hm-pair{column-gap:18px}
/* UX-063 (owner, 25 Oct 2026, 13:50): the bracket replaced by a slim rounded bar with a dot at each end (level with Review weeks and
Revision), joined to the note by a short dotted line. */
.hm-pair-note::before{top:6px; bottom:6px; left:0; width:9px; border:0; border-radius:0;
background:radial-gradient(circle at 50% 4.5px,#6F82D2 4px,transparent 4.6px), radial-gradient(circle at 50% calc(100% - 4.5px),#6F82D2 4px,transparent 4.6px),
linear-gradient(#AEB9E9,#AEB9E9) center / 3px calc(100% - 9px) no-repeat}
.hm-pair-note::after{left:9px; width:13px; height:0; margin-top:-1px; background:none; border-top:2px dotted #6F82D2}
/* UX-064 (owner, 25 Oct 2026, 13:53): the extra space beside Review weeks and Revision cut from 50 px to 20 px (gap 38 px; phones 18 px). */
.rp-path li.hm-pair{column-gap:38px}
@media (max-width:560px){ .rp-path li.hm-pair{column-gap:18px} }
.phone .rp-path li.hm-pair{column-gap:18px}
/* UX-065 (owner, 25 Oct 2026, 14:01): Study redesigned in the light of the home. */
.dgrid.st-grid{align-items:start}
.dgrid.st-grid > .dcol > :last-child{flex-grow:0}
.st-hero{gap:14px}
.st-hero .hm-big{font-size:34px}
.st-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.st-stats span{display:flex; flex-direction:column; align-items:flex-start; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16)}
.st-stats b{font-size:24px; font-weight:800; line-height:1.1; color:#fff}
.st-stats small{font-size:12px; font-weight:700; color:#BFC8E8}
.st-skills{list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:2px; border-radius:14px; background:rgba(11,27,69,.38); border:1px solid rgba(255,255,255,.10)}
.st-skills a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; color:#fff; text-decoration:none}
.st-skills a:hover{background:rgba(255,255,255,.08)}
.st-code{font-family:ui-monospace,Consolas,monospace; font-size:11.5px; font-weight:700; color:#7FEBDB; white-space:nowrap}
.st-txt{font-size:13.5px; line-height:1.4; color:#EEF1FF}
.st-txt em{font-style:normal; color:#AEB9DE}
.st-has{display:flex; gap:4px}
.st-has i{font-style:normal; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(53,214,190,.18); color:#9FEDE6}
.st-go{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.st-go .hm-go{flex:1 1 220px}
.st-go form{margin:0; flex:0 0 auto}
.st-ghost{padding:13px 18px; border-radius:12px; border:1.5px solid rgba(255,255,255,.55); background:transparent; color:#fff; font-weight:800; font-size:14.5px; cursor:pointer}
.st-ghost:hover{background:rgba(255,255,255,.10)}
.st-subjects{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.st-subj{display:flex; flex-direction:column; gap:7px; padding:14px; border-radius:14px; border:1px solid #DCE6F3; background:#fff; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s}
a.st-subj:hover{box-shadow:0 8px 18px rgba(11,40,95,.08); transform:translateY(-1px)}
.st-subj b{font-size:15.5px; color:#0B1B45}
.st-subj.is-now{border-color:#9FE5DC; background:linear-gradient(135deg,#F2FBF9,#fff)}
.st-subj.is-coming{background:#F7F9FC; border-style:dashed}
.st-subj.is-coming b{color:#5A6A8A}
.st-subj.is-self{background:#F7F9FC}
.st-tag{flex:none; font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:999px; background:#EEF2F8; color:#33415C; white-space:nowrap}
.st-subj.is-now .st-tag{background:#0B285F; color:#fff}
.st-subj.is-done .st-tag{background:#DFF6F1; color:#0B6B63}
.st-bar{height:7px; border-radius:999px; background:#EEF1F6; overflow:hidden}
.st-bar i{display:block; height:100%; border-radius:999px; background:#22D3C5}
.st-bar i.bw-bio{background:#1F9D6B}.st-bar i.bw-chem{background:#2F6FD6}.st-bar i.bw-phy{background:#7A4CC2}.st-bar i.bw-eng{background:#D9822B}.st-bar i.bw-lr{background:#C2416B}
.st-meta{font-size:12.5px; color:#5A6A8A; line-height:1.45}
.st-meta b{color:#0B1B45; font-size:12.5px}
.st-practice{gap:10px; padding:20px; border-radius:16px; border-top:4px solid #22D3C5}
.st-pt{font-size:17px; color:#0B1B45}
.st-ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.st-ticks li{position:relative; padding-left:24px; font-size:13.5px; line-height:1.4; color:#33415C}
.st-ticks li::before{content:"✓"; position:absolute; left:0; top:0; width:17px; height:17px; border-radius:50%; background:#DFF6F1; color:#0B8F84; font-size:11px; font-weight:800; display:grid; place-items:center}
.st-pnum{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.st-pnum span{display:flex; flex-direction:column; padding:10px 12px; border-radius:12px; background:#F3F6FB; border:1px solid #E1E7F2}
.st-pnum b{font-size:22px; font-weight:800; color:#0B285F; line-height:1.1}
.st-pnum small{font-size:12px; font-weight:700; color:#5A6A8A}
.st-nv{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.st-nv-t{display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:12px; border:1px solid #DCE6F3}
.st-nv-t b{font-size:24px; font-weight:800; line-height:1.1}
.st-nv-t b small{font-size:14px; color:#5A6A8A}
.st-nv-t span{font-size:12.5px; font-weight:700; color:#5A6A8A}
.st-n{background:#FFF9EC} .st-n b{color:#A86A00}
.st-v{background:#F1F6FE} .st-v b{color:#2456B8}
.st-note,.st-weak{display:flex; align-items:center; gap:10px; padding:9px 2px; border-top:1px solid #EEF2F8; text-decoration:none; color:inherit}
.st-note b,.st-weak b{font-size:13.5px; color:#0B1B45; line-height:1.35}
.st-note-ico{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#FFF4D6; font-size:14px}
.st-note > span:last-child{margin-left:auto; color:#9AA8C2}
.st-weak .band{flex:none; font-size:11px; padding:3px 8px; border-radius:999px; font-weight:800}
@media (max-width:560px){ .st-subjects{grid-template-columns:minmax(0,1fr)} .st-hero .hm-big{font-size:28px} .st-skills a{grid-template-columns:minmax(0,1fr) auto} .st-code{grid-column:1 / -1} }
.phone .st-subjects{grid-template-columns:minmax(0,1fr)} .phone .st-hero .hm-big{font-size:28px}
.phone .st-skills a{grid-template-columns:minmax(0,1fr) auto} .phone .st-code{grid-column:1 / -1}
.st-ghost{display:inline-block; text-decoration:none}
/* UX-066 (owner, 25 Oct 2026, 14:17): daily targets removed; the hero shows the shape of the week. */
.hm-plan{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.hm-plan li{position:relative; padding-left:18px; font-size:13.5px; line-height:1.45; color:#E7ECFF}
.hm-plan li::before{content:""; position:absolute; left:2px; top:7px; width:7px; height:7px; border-radius:50%; background:#35D6BE}
.hm-plan b{color:#fff; font-weight:700}
/* UX-067 (owner, 25 Oct 2026, 14:32): the skill page realigned with Home and Study. */
.lo-skill{font-family:var(--serif); font-size:26px; line-height:1.25; color:#fff}
.lo-hero .st-stats b{font-size:20px}
.lo-learn{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start}
.lo-vid{display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:linear-gradient(135deg,#F1F6FE,#fff); border:1px solid #D5E2F7}
.lo-vid b{font-size:14.5px; color:#0B1B45}
.lo-vid .btn{margin-left:auto; flex:none}
.lo-vid.is-off{background:#F7F9FC; border-style:dashed}
.lo-play{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#13276C; color:#fff}
.lo-vid.is-off .lo-play{background:#C9D2E6}
.lo-sub{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#A86A00; padding-bottom:4px}
.lo-scale{position:relative; display:grid; grid-template-columns:50fr 30fr 20fr; height:30px; border-radius:10px; overflow:visible; font-size:11.5px; font-weight:800}
.lo-scale span{display:grid; place-items:center}
.lo-scale .w{background:#FBE3E7; color:#B3122B; border-radius:10px 0 0 10px}
.lo-scale .d{background:#DDE3F5; color:#13276C}
.lo-scale .s{background:#D6F6F0; color:#0B6B63; border-radius:0 10px 10px 0}
.lo-scale i{position:absolute; top:-5px; bottom:-5px; width:4px; margin-left:-2px; border-radius:4px; background:#0B1B45; box-shadow:0 0 0 2px #fff}
.lo-scale-k{display:grid; grid-template-columns:50fr 30fr 20fr 0fr; font-size:11px; color:#5A6A8A}
.lo-scale-k span:last-child{justify-self:end; white-space:nowrap}
.lo-path li{padding-bottom:16px}
.lo-path .lo-k{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8A96AE}
.lo-path li.now .lo-k{color:#0B6B63}
.lo-path a.link-strong{font-size:14px; line-height:1.4}
.lo-first{padding:12px 14px; border-radius:12px; background:#FFF6DC; border:1px solid #F3D58C; font-size:13.5px; line-height:1.45; color:#5A4A1E; display:flex; flex-direction:column}
.lo-first b{color:#0B1B45}
.lo-steps{margin:0; padding:0 0 0 0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:9px}
.lo-steps li{counter-increment:s; position:relative; padding-left:32px; font-size:13.5px; line-height:1.45; color:#33415C}
.lo-steps li::before{content:counter(s); position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%; background:#DFF6F1; color:#0B8F84; font-size:12px; font-weight:800; display:grid; place-items:center}
.lo-steps b{color:#0B1B45}
@media (max-width:760px){ .lo-learn{grid-template-columns:minmax(0,1fr)} .lo-skill{font-size:22px} }
.phone .lo-learn{grid-template-columns:minmax(0,1fr)} .phone .lo-skill{font-size:22px}
.lo-scale{grid-template-columns:50% 30% 20%}
.lo-scale-k{display:block; position:relative; height:16px}
.lo-scale-k span{position:absolute; top:0}
.lo-scale-k span:nth-child(1){left:0} .lo-scale-k span:nth-child(2){left:50%; transform:translateX(-50%)} .lo-scale-k span:nth-child(3){left:80%; transform:translateX(-50%)} .lo-scale-k span:nth-child(4){right:0}
.lo-vid{flex-wrap:wrap}
.lo-vid .btn{padding:8px 16px; font-size:13.5px; min-height:0}
/* UX-068 (owner, 25 Oct 2026, 14:39): the subject page realigned. */
.sj-next{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; border:1px dashed #C7D1F1; background:#F7F9FE}
.sj-next b{color:#0B1B45}
.sj-lock{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#EEF1FC; font-size:15px}
.sj-week.is-now{border-color:#9FE5DC; box-shadow:0 8px 20px rgba(11,107,99,.08)}
.sj-tag{display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px; background:#0B285F; color:#fff; font-family:inherit; font-size:11.5px; font-weight:800; vertical-align:middle}
.sj-lo{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 10px; border-radius:12px; border:1px solid #EEF2F8; text-decoration:none; color:inherit; transition:background .15s, border-color .15s}
.sj-lo:hover{background:#F6F9FD; border-color:#DCE6F3}
.sj-code{font-family:ui-monospace,Consolas,monospace; font-size:11.5px; font-weight:700; color:#13276C; background:#EEF1FC; padding:4px 8px; border-radius:8px; white-space:nowrap}
.sj-txt{font-size:14px; line-height:1.4; color:#1C2436}
.sj-has i{background:#DFF6F1; color:#0B6B63}
.sj-lo .band{flex:none; font-size:11px; padding:3px 9px; border-radius:999px; font-weight:800; white-space:nowrap}
.sj-bands{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.sj-bands span{display:flex; flex-direction:column; align-items:center; padding:8px 4px; border-radius:10px}
.sj-bands b{font-size:20px; font-weight:800; line-height:1.1}
.sj-bands small{font-size:11px; font-weight:700}
.sj-s{background:#D6F6F0; color:#0B6B63} .sj-d{background:#DDE3F5; color:#13276C} .sj-w{background:#FBE3E7; color:#B3122B} .sj-n{background:#F1F3F8; color:#5A6A8A}
@media (max-width:560px){ .sj-lo{grid-template-columns:minmax(0,1fr) auto} .sj-code{grid-column:1 / -1; justify-self:start} }
.phone .sj-lo{grid-template-columns:minmax(0,1fr) auto} .phone .sj-code{grid-column:1 / -1; justify-self:start}
.lo-scale{height:14px} .lo-scale span{font-size:0} .lo-scale i{top:-6px; bottom:-6px}
/* UX-070 (owner, 25 Oct 2026, 14:49): the "This week" tag on the subject page: plain sans type, teal, a small live dot. */
.sj-tag{display:inline-flex; align-items:center; gap:6px; margin-left:10px; padding:4px 10px 4px 8px; border-radius:999px;
background:#E3F7F3; border:1px solid #9FE5DC; color:#0B6B63; font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1; vertical-align:3px}
.sj-tag::before{content:""; width:7px; height:7px; border-radius:50%; background:#16A37F; box-shadow:0 0 0 3px rgba(22,163,127,.18); animation:sj-pulse 2s ease-in-out infinite}
@keyframes sj-pulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,127,.18)}50%{box-shadow:0 0 0 6px rgba(22,163,127,.06)}}
@media (prefers-reduced-motion:reduce){ .sj-tag::before{animation:none} }
/* UX-071 (owner, 25 Oct 2026, 14:58): the labels beside "Your mastery" and "Videos" in the style of the "This week" tag. */
.sj-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; border:1px solid; font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1; white-space:nowrap}
.sj-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent)}
.sj-pill.is-strong{background:#E3F7F3; border-color:#9FE5DC; color:#0B6B63}
.sj-pill.is-dev{background:#EEF1FC; border-color:#C7D1F1; color:#2A3F86}
.sj-pill.is-weak{background:#FDEEF0; border-color:#F3B9C3; color:#B3122B}
.sj-pill.is-notyet{background:#F3F5F9; border-color:#DCE2EC; color:#5A6A8A}
.sj-pill.is-v{background:#EEF1FC; border-color:#C7D1F1; color:#2A3F86}
/* UX-072 (owner, 25 Oct 2026, 15:03): each skill's band on the subject page as the same pill. */
.sj-lo .sj-pill{flex:none; justify-self:end}
/* UX-073 (owner, 25 Oct 2026, 15:09): "its next week opens" moved to the right column and made an alert card with a countdown. */
.wk-alert{gap:12px; padding:20px; border-radius:16px; border:1px solid #F1D08A; border-top:4px solid #E6A100; background:linear-gradient(180deg,#FFFBF0,#fff 60%)}
.wk-top{display:flex; align-items:center; gap:12px}
.wk-ico{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#FFF0C7; color:#A86A00}
.wk-k{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#A86A00}
.wk-t{font-size:18px; line-height:1.25; color:#0B1B45}
.wk-clock{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.wk-clock span{display:flex; flex-direction:column; align-items:center; padding:9px 4px; border-radius:12px; background:#fff; border:1px solid #F3DFA6}
.wk-clock b{font-size:24px; font-weight:800; line-height:1; color:#7A4E00; font-variant-numeric:tabular-nums}
.wk-clock small{margin-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#A86A00}
.wk-when{font-size:14px; font-weight:700; color:#0B1B45}
.wk-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.wk-list li{position:relative; padding-left:22px; font-size:13.5px; color:#33415C}
.wk-list li::before{content:"✓"; position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%; background:#FFF0C7; color:#A86A00; font-size:10px; font-weight:800; display:grid; place-items:center}
/* UX-074 (owner, 25 Oct 2026, 15:14): "Coming next" kept, its colours quieter: white, a thin indigo edge, navy figures. */
.wk-alert{background:#fff; border:1px solid #DCE3F2; border-top:3px solid #6F82D2; box-shadow:0 4px 14px rgba(19,39,108,.05)}
.wk-ico{background:#EEF1FC; color:#3A4FA0}
.wk-k{color:#3A4FA0}
.wk-clock span{background:#F6F8FC; border-color:#E1E7F2}
.wk-clock b{color:#13276C}
.wk-clock small{color:#5A6A8A}
.wk-list li::before{background:#EEF1FC; color:#3A4FA0}
/* UX-075 (owner, 25 Oct 2026, 15:21): the Tests screen realigned. */
.ts-hero{gap:12px}
.ts-big{font-size:30px}
.ts-hero.is-open{background:radial-gradient(55% 70% at 95% 0%, rgba(255,120,140,.28) 0%, rgba(255,120,140,0) 65%), linear-gradient(120deg,#13276C 0%,#1A3488 55%,#2445A8 100%)}
.ts-hero.is-open .bw-k{color:#FFC2CC}
.ts-chips{display:flex; flex-wrap:wrap; gap:6px}
.ts-chips span{padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:12.5px; font-weight:700}
.ts-clock{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ts-clock span{display:flex; flex-direction:column; align-items:center; padding:10px 4px; border-radius:12px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16)}
.ts-clock b{font-size:28px; font-weight:800; line-height:1; color:#fff; font-variant-numeric:tabular-nums}
.ts-clock small{margin-top:4px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#BFC8E8}
.ts-more{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.10); color:#fff; text-decoration:none}
.ts-more span{color:#FFC2CC; font-weight:800; font-size:13px}
.ts-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid #EEF2F8}
.ts-row b{font-size:14.5px; color:#0B1B45}
.ts-link{text-decoration:none; color:inherit; transition:background .15s}
.ts-link:hover{background:#F6F9FD}
.ts-date{flex:none; width:48px; display:flex; flex-direction:column; align-items:center; padding:6px 0; border-radius:10px; background:#EEF1FC; color:#13276C; line-height:1.1}
.ts-date small{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#3A4FA0}
.ts-date b{font-size:18px; color:#13276C}
.ts-ico{height:44px; justify-content:center; font-size:18px; background:#F3F5F9}
.ts-note{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; background:#EEF1FC; border:1px solid #C7D1F1}
.ts-note b{font-size:14px; color:#0B1B45} .ts-note b i{font-style:normal; color:#E6A100}
.ts-note span{font-size:12.5px; font-weight:700; color:#3A4FA0}
.ts-abs{background:#FDEEF0} .ts-abs b{color:#B3122B}
@media (max-width:560px){ .ts-row{grid-template-columns:auto minmax(0,1fr)} .ts-row .sj-pill{grid-column:2; justify-self:start} .ts-big{font-size:24px} }
.phone .ts-row{grid-template-columns:auto minmax(0,1fr)} .phone .ts-row .sj-pill{grid-column:2; justify-self:start} .phone .ts-big{font-size:24px}
/* UX-076 (owner, 25 Oct 2026, 15:27): the Practice screen realigned. */
.pr-subj{width:100%; text-align:left; font:inherit; cursor:pointer}
.pr-go{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#0B285F; color:#fff; font-weight:800}
.pr-subj:hover{box-shadow:0 8px 18px rgba(11,40,95,.08); transform:translateY(-1px)}
/* UX-077 (owner, 25 Oct 2026, 15:32): the practice results. */
.pr-path{display:flex; align-items:flex-end; gap:4px; height:120px; padding:8px 4px 0; border-bottom:2px solid #E3EAF3; background:repeating-linear-gradient(to top, transparent 0 23px, #F1F4F9 23px 24px)}
.pr-path span{position:relative; flex:1; min-width:6px; max-width:28px; border-radius:6px 6px 0 0}
.pr-path span.ok{background:#22D3C5} .pr-path span.no{background:#F28B9B}
.pr-path i{position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-style:normal; font-size:9.5px; color:#8A96AE}
.pr-key{display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; font-size:12px; color:#5A6A8A}
.pr-key i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.pr-key i.ok{background:#22D3C5} .pr-key i.no{background:#F28B9B}
.pr-ans{border:1px solid #EEF2F8; border-radius:12px; padding:0}
.pr-ans summary{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 12px; cursor:pointer; list-style:none}
.pr-ans summary::-webkit-details-marker{display:none}
.pr-ans[open]{background:#FAFBFD}
.pr-no{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800}
.pr-ans.is-ok .pr-no{background:#DFF6F1; color:#0B6B63} .pr-ans.is-no .pr-no{background:#FDEEF0; color:#B3122B}
.pr-q{font-size:14px; line-height:1.4; color:#1C2436}
.pr-detail{display:flex; flex-direction:column; gap:8px; padding:0 14px 14px 52px}
.pr-detail p{margin:0; font-size:13.5px; line-height:1.5; color:#33415C}
.pr-k{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8A96AE}
.pr-detail b.ok{color:#0B6B63} .pr-detail b.no{color:#B3122B}
.pr-skill{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid #EEF2F8; text-decoration:none; color:inherit}
.pr-skill:hover{background:#F6F9FD}
.pr-levels{display:flex; flex-direction:column; gap:8px}
.pr-levels > div{display:grid; grid-template-columns:64px minmax(0,1fr) 56px; gap:10px; align-items:center; font-size:13px}
.pr-levels b{color:#0B1B45; font-size:13px}
.pr-bar{height:8px; border-radius:999px; background:#EEF1F6; overflow:hidden}
.pr-bar i{display:block; height:100%; border-radius:999px}
.pr-bar i.strong{background:#22D3C5} .pr-bar i.dev{background:#6F82D2} .pr-bar i.weak{background:#F28B9B} .pr-bar i.notyet{background:#DCE2EC}
@media (max-width:560px){ .pr-detail{padding-left:14px} .pr-skill{grid-template-columns:minmax(0,1fr) auto} .pr-skill .sj-code{grid-column:1 / -1; justify-self:start} }
.phone .pr-detail{padding-left:14px} .phone .pr-skill{grid-template-columns:minmax(0,1fr) auto} .phone .pr-skill .sj-code{grid-column:1 / -1; justify-self:start}
/* UX-078 (owner, 25 Oct 2026, 15:56): the practice session realigned. */
.pq-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 16px; background:#13276C; color:#fff}
.pq-ladder{display:flex; gap:4px}
.pq-ladder span{padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.10); color:#AEB9DE; font-size:12px; font-weight:800}
.pq-ladder span.done{background:rgba(53,214,190,.25); color:#BFF3EC}
.pq-ladder span.now{background:#35D6BE; color:#0B1B45; box-shadow:0 0 0 3px rgba(53,214,190,.25)}
.pq-streak{display:flex; align-items:center; gap:5px; font-size:12.5px; color:#D5DBF0}
.pq-streak i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2)}
.pq-streak i.on{background:#FFD25C}
.pq-streak span{margin-left:4px}
.pq-score{margin-left:auto; font-size:13px; color:#D5DBF0} .pq-score b{color:#fff}
.pq-end{height:34px; padding:0 14px; border-radius:10px; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#fff; font-weight:800; font-size:13px; cursor:pointer}
.pq-end:hover{background:rgba(255,255,255,.1)}
.pq-body{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px; padding-top:22px}
.pq-card{display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:18px; background:#fff; border:1px solid #DCE6F3; box-shadow:0 10px 28px rgba(11,40,95,.06)}
.pq-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pq-n{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8A96AE; margin-right:4px}
.pq-lo{margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:11.5px; font-weight:700; color:#13276C; background:#EEF1FC; padding:4px 8px; border-radius:8px}
.pq-stem{font-size:19px; font-weight:600; line-height:1.5; color:#0B1B45}
.pq-stem p{margin:0}
.pq-opt{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px; border:1.5px solid #DCE6F3; background:#fff; cursor:pointer; font-size:15px; color:#1C2436; transition:border-color .12s, background .12s}
.pq-opt:hover{border-color:#9DB6DD; background:#F7F9FD}
.pq-opt input{position:absolute; opacity:0; pointer-events:none}
.pq-opt:has(input:checked){border-color:#13276C; background:#EEF1FC; box-shadow:0 0 0 3px rgba(19,39,108,.08)}
.pq-opt:has(input:focus-visible){outline:3px solid #35D6BE; outline-offset:2px}
.pq-letter{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#F1F4F9; color:#33415C; font-size:13px; font-weight:800}
.pq-opt:has(input:checked) .pq-letter{background:#13276C; color:#fff}
.pq-txt{flex:1; min-width:0} .pq-txt p{margin:0}
.pq-opt.is-shown{cursor:default}
.pq-opt.is-right{border-color:#1C9C7C; background:#E9F8F4} .pq-opt.is-right .pq-letter{background:#1C9C7C; color:#fff}
.pq-opt.is-wrong{border-color:#E06A80; background:#FDEEF0} .pq-opt.is-wrong .pq-letter{background:#B3122B; color:#fff}
.pq-mark{flex:none; font-weight:800; font-size:16px} .is-right .pq-mark{color:#1C9C7C} .is-wrong .pq-mark{color:#B3122B}
.pq-k{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8A96AE; margin-bottom:4px}
.pq-fib .input{height:54px; font-size:17px}
.pq-check{align-self:flex-start; min-width:200px}
.pq-result{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:14px}
.pq-result.is-right{background:#E9F8F4; border:1px solid #A9E3D6} .pq-result.is-wrong{background:#FFF6F7; border:1px solid #F3B9C3}
.pq-res-top{display:flex; align-items:center; gap:12px}
.pq-res-top b{font-size:16px; color:#0B1B45}
.pq-res-ico{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff}
.is-right .pq-res-ico{background:#1C9C7C} .is-wrong .pq-res-ico{background:#B3122B}
.pq-move{margin-left:auto; flex:none; white-space:nowrap; align-self:flex-start; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:800}
.pq-res-top > .col{flex:1 1 auto; min-width:0} /* the difficulty badge stays on one line (owner, 27 Oct 2026, 20:56) */
@media (max-width:480px){ .pq-res-top{flex-wrap:wrap; row-gap:8px} .pq-res-top > .col{flex-basis:calc(100% - 60px)} .pq-move{margin-left:48px} }
.phone .pq-res-top{flex-wrap:wrap; row-gap:8px} .phone .pq-res-top > .col{flex-basis:calc(100% - 60px)} .phone .pq-move{margin-left:48px}
.pq-move.up{background:#1C9C7C; color:#fff} .pq-move.down{background:#F3D3D9; color:#8A1022} .pq-move.stay{background:#EEF1FC; color:#13276C} /* level unchanged (owner, 27 Oct 2026, 21:12) */
.pq-expl{font-size:14px; line-height:1.55; color:#33415C} .pq-expl p{margin:0}
.pq-note{font-size:12.5px; color:#5A6A8A}
.pq-actions{display:flex; gap:10px; flex-wrap:wrap} .pq-actions form{margin:0}
.pq-trail{display:flex; flex-wrap:wrap; gap:6px}
.pq-trail span{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:800}
.pq-trail .ok{background:#DFF6F1; color:#0B6B63} .pq-trail .no{background:#FDEEF0; color:#B3122B}
.pq-foot{text-align:center}
.pq-empty{align-items:center; text-align:center}
.pq-ico{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#DFF6F1; color:#0B6B63; font-size:22px; font-weight:800}
.pq-title{font-size:18px; color:#0B1B45}
.pq-empty form{width:100%; max-width:320px}
@media (max-width:640px){ .pq-bar{gap:10px} .pq-score{margin-left:0} .pq-streak span{display:none} .pq-card{padding:18px} .pq-stem{font-size:17px} .pq-check{width:100%} .pq-lo{margin-left:0} }
/* UX-079 (owner, 25 Oct 2026, 16:07): "Difficulty level" named beside the ladder. */
.pq-dl{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#AEB9DE}
/* UX-081 (25 Oct 2026): practice question, a skill box on the left: code, unit and skill */
.pq-body.pq-grid{max-width:1060px; display:grid; grid-template-columns:260px minmax(0,1fr); column-gap:20px; row-gap:14px; align-items:start}
.pq-grid>*{grid-column:2}
.pq-grid>.pq-side{grid-column:1; grid-row:1 / span 3; position:sticky; top:16px}
.pq-side{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:16px; background:#fff; border:1px solid #DCE6F3; border-left:4px solid #35D6BE; box-shadow:0 6px 18px rgba(11,40,95,.05)}
.pq-side .pq-lo{margin-left:0; align-self:flex-start; font-size:13px; padding:5px 10px}
.pq-side-row{display:flex; flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid #EEF2F8}
.pq-side-row .pq-k{margin-bottom:0}
.pq-side-row b{font-size:14px; color:#0B1B45; line-height:1.35}
.pq-side-row span.pq-sk{font-size:14px; color:#33415C; line-height:1.45}
@media (max-width:900px){ .pq-body.pq-grid{grid-template-columns:minmax(0,1fr); max-width:780px} .pq-grid>*, .pq-grid>.pq-side{grid-column:1; grid-row:auto; position:static} }
@media (max-width:640px){ .pq-side{padding:12px 14px; gap:6px} .pq-side>.pq-k{display:none} .pq-side-row{padding-top:6px} .pq-side-row b,.pq-side-row span.pq-sk{font-size:13px} }
/* UX-082 (25 Oct 2026): the skill box moves to the right of the question card */
.pq-body.pq-grid{grid-template-columns:minmax(0,1fr) 260px}
.pq-grid>*{grid-column:1}
.pq-grid>.pq-side{grid-column:2; grid-row:1 / span 3}
@media (max-width:900px){ .pq-body.pq-grid{grid-template-columns:minmax(0,1fr)} .pq-grid>*, .pq-grid>.pq-side{grid-column:1; grid-row:auto} }
/* UX-086 (25 Oct 2026): practice question redesigned: the skill's unit and LO inside the card's head; calmer, softer card */
.pq-body.pq-grid{display:flex; max-width:820px}
.pq-body{max-width:820px; gap:16px; padding-top:26px}
.pq-bar{background:linear-gradient(90deg,#13276C 0%,#183585 100%); box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.pq-ladder span{transition:background .15s}
.pq-card{padding:0 0 26px; gap:18px; border-radius:20px; border:1px solid #E4EAF4; overflow:hidden; box-shadow:0 1px 2px rgba(11,27,69,.04), 0 14px 34px rgba(11,40,95,.07)}
.pq-card>*:not(.pq-ctx){margin-left:28px; margin-right:28px}
.pq-card.pq-empty{padding:30px 28px}
.pq-card.pq-empty>*{margin-left:0; margin-right:0}
.pq-card>.pq-meta{margin-top:6px}
.pq-ctx{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:18px; row-gap:6px; align-items:center; padding:16px 28px 15px; background:linear-gradient(120deg,#F4F6FE 0%,#F1FAF8 100%); border-bottom:1px solid #E8EDF6}
.pq-ctx-path{display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:12px; font-weight:700; color:#5A6A8A; letter-spacing:.01em}
.pq-unit{display:inline-flex; align-items:center; gap:7px}
.pq-unit::before{content:""; width:7px; height:7px; border-radius:50%; background:#35D6BE; box-shadow:0 0 0 3px rgba(53,214,190,.18)}
.pq-sep{color:#B4BED2; font-weight:600}
.pq-code{font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:#13276C; background:#fff; border:1px solid #DDE4F2; padding:2px 7px; border-radius:7px}
.pq-ctx-lo{grid-column:1; font-size:14px; line-height:1.5; color:#26324A}
.pq-ctx-k{display:inline-block; margin-right:8px; padding:2px 8px; border-radius:999px; background:rgba(53,214,190,.16); color:#0B6B63; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; vertical-align:1px}
.pq-ctx-link{grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap; font-size:12.5px; font-weight:800; color:#13276C; text-decoration:none; padding:7px 13px; border-radius:999px; background:#fff; border:1px solid #D8E0EF; transition:border-color .15s, box-shadow .15s}
.pq-ctx-link:hover{border-color:#13276C; box-shadow:0 2px 8px rgba(19,39,108,.10)}
.pq-n{color:#13276C; opacity:.7}
.pq-stem{font-size:20px; line-height:1.5; letter-spacing:-.005em}
.pq-opt{border-radius:14px; padding:14px 16px; border-color:#E2E9F4; transition:border-color .15s, background .15s, box-shadow .15s, transform .15s}
.pq-opt:not(.is-shown):hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(11,40,95,.07)}
.pq-letter{border-radius:10px; background:#F2F5FA; transition:background .15s, color .15s}
.pq-fib .input{border-radius:14px}
.pq-result{border-radius:16px; padding:18px}
.pq-trail{justify-content:center}
.pq-trail span{width:28px; height:28px; border-radius:50%}
@media (max-width:640px){ .pq-card{padding-bottom:20px} .pq-card>*:not(.pq-ctx){margin-left:18px; margin-right:18px} .pq-ctx{grid-template-columns:minmax(0,1fr); padding:14px 18px} .pq-ctx-link{grid-column:1; grid-row:auto; justify-self:start; margin-top:4px} .pq-stem{font-size:18px} }
@media (max-width:640px){ .pq-check{width:auto; align-self:stretch} }
/* UX-087 (25 Oct 2026): card head restyled: unit as a quiet eyebrow, then the LO code and statement; no link, no tag */
.pq-ctx{display:flex; flex-direction:column; gap:8px; position:relative; padding:18px 28px 17px; background:linear-gradient(180deg,#F6F8FE 0%,#FBFCFF 100%); border-bottom:1px solid #EAEFF7}
.pq-ctx::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg,#35D6BE 0%,#5B7BE0 55%,#13276C 100%); opacity:.85}
.pq-ctx-unit{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7A88A6}
.pq-ctx-unit::before{content:""; width:6px; height:6px; border-radius:50%; background:#35D6BE; box-shadow:0 0 0 3px rgba(53,214,190,.18)}
.pq-ctx-lo{display:flex; align-items:baseline; gap:12px; font-size:15.5px; font-weight:600; line-height:1.45; color:#1C2A4A}
.pq-ctx-lo .pq-code{flex:none; font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:700; color:#fff; background:#13276C; border:0; padding:4px 9px; border-radius:8px; letter-spacing:.02em; position:relative; top:-1px}
@media (max-width:640px){ .pq-ctx{padding:16px 18px 14px} .pq-ctx-lo{font-size:14.5px; gap:10px} }
.pq-ctx{align-items:flex-start; text-align:left} .pq-ctx-lo{justify-content:flex-start}
/* UX-088 (25 Oct 2026): phone only: card head as a grid: unit left and LO code right on one line, the LO statement full width below */
@media (max-width:640px){ .pq-ctx{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:10px} .pq-ctx-lo{display:contents} .pq-ctx-unit{grid-column:1; grid-row:1; font-size:11px} .pq-ctx-lo .pq-code{grid-column:2; grid-row:1; top:0; justify-self:end} .pq-ctx-lo>span:last-child{grid-column:1 / -1; grid-row:2; font-size:15px; font-weight:600; line-height:1.45; color:#1C2A4A} }
/* UX-089 (25 Oct 2026): phone only: practice results chart card: heading full width, rule pill below it, key in one line and the note under it */
@media (max-width:640px){ .pr-head{flex-direction:column; align-items:flex-start; gap:8px} .pr-head .bw-h{font-size:19px; line-height:1.25} .pr-head .sj-pill{align-self:flex-start} .pr-path{height:110px; margin-top:4px} .pr-key{gap:8px 16px; margin-top:18px} .pr-key>span:last-child{flex-basis:100%; font-size:11.5px; color:#8A96AE} }
/* UX-090 (25 Oct 2026): practice results, "how practice counts" note in points */
.pr-how{display:flex; flex-direction:column; gap:10px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid #E4EAF4; border-left:4px solid #35D6BE; box-shadow:0 6px 18px rgba(11,40,95,.05)}
.pr-how-k{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7A88A6}
.pr-how ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.pr-how li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45; color:#26324A}
.pr-how li i{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; margin-top:0}
.pr-how li i.is-ok{background:#DFF6F1; color:#0B6B63}
.pr-how li i.is-no{background:#F1F4F9; color:#5A6A8A}
.pr-how li i.is-star{background:#E8ECFB; color:#13276C}
.pr-how li:last-child{font-weight:700; color:#13276C}
/* UX-091 (25 Oct 2026): practice results, "By type and difficulty level" card redesigned */
.pr-tt{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pr-tt-i{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; background:#F8FAFD; border:1px solid #E6ECF5}
.pr-tt-k{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5A6A8A}
.pr-tt-k i{width:8px; height:8px; border-radius:50%} .pr-tt-k i.v{background:#6F82D2} .pr-tt-k i.n{background:#E9A23B}
.pr-tt-i b.num{font-size:24px; line-height:1; color:#0B1B45} .pr-tt-i b.num small{font-size:12px; font-weight:600; color:#7A88A6; margin-left:2px}
.pr-tt-none{font-size:13px; font-weight:600; color:#9AA6BD; padding:5px 0 3px}
.pr-tt-i.is-none{background:#FBFCFE; border-style:dashed}
.pr-lv{display:flex; flex-direction:column; gap:10px; padding-top:6px}
.pr-lv-k{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7A88A6}
.pr-lv-r{display:grid; grid-template-columns:38px minmax(0,1fr) 64px; align-items:center; gap:12px}
.pr-lv-c{display:grid; place-items:center; height:26px; border-radius:8px; background:#13276C; color:#fff; font-size:12px; font-weight:800}
.pr-lv-n{font-size:12.5px; font-weight:700; color:#26324A; text-align:right; white-space:nowrap}
.pr-lv-r.is-none .pr-lv-c{background:#EEF1F6; color:#8A96AE}
.pr-lv-r.is-none .pr-lv-n{font-weight:500; color:#9AA6BD}
/* UX-092 (25 Oct 2026): practice results, heading of "By type and difficulty level" with an icon and a short line under it */
.pr-hd{display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid #EEF2F8}
.pr-hd-ico{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#E8ECFB 0%,#DFF6F1 100%); color:#13276C}
.pr-hd-t{font-size:17px; font-weight:800; letter-spacing:-.005em; color:#0B1B45; line-height:1.25}
.pr-hd-s{font-size:12.5px; color:#7A88A6; line-height:1.4}
/* UX-093 (25 Oct 2026): every card heading on the practice results page in the same style as UX-092 */
.pr-hd-x{margin-left:auto; flex:none; align-self:center}
@media (max-width:640px){ .pr-hd{flex-wrap:wrap; row-gap:8px} .pr-hd-x{margin-left:50px; flex-basis:auto} }
.pr-hd>.col{flex:1 1 0; min-width:0}
@media (max-width:640px){ .pr-hd{align-items:flex-start} .pr-hd-x{flex-basis:calc(100% - 50px); align-self:flex-start} .pr-hd-x.sj-pill{flex-basis:auto} }
/* UX-094 (25 Oct 2026): practice results, "By skill" rows redesigned */
.pr-sk{display:flex; flex-direction:column; gap:9px; padding:14px 16px; border-radius:14px; background:#FBFCFE; border:1px solid #E6ECF5; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s}
.pr-sk:hover{border-color:#C9D5EA; box-shadow:0 6px 16px rgba(11,40,95,.06); transform:translateY(-1px)}
.pr-sk-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pr-sk-code{font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:700; color:#fff; background:#13276C; padding:4px 9px; border-radius:8px; letter-spacing:.02em}
.pr-sk-pct{display:inline-flex; align-items:baseline; gap:5px; font-size:18px; font-weight:800; line-height:1}
.pr-sk-pct small{font-size:11px; font-weight:600; color:#8A96AE}
.pr-sk-pct.is-strong{color:#0B8F82} .pr-sk-pct.is-dev{color:#4A5FB8} .pr-sk-pct.is-weak{color:#C2334B} .pr-sk-pct.is-notyet{color:#8A96AE}
.pr-sk-t{font-size:14.5px; font-weight:600; line-height:1.45; color:#1C2A4A}
.pr-sk-st{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:9px; border-top:1px dashed #E3EAF4}
.pr-sk-st span{display:flex; flex-direction:column; gap:2px; min-width:0}
.pr-sk-st small{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8A96AE}
.pr-sk-st b{font-size:12.5px; font-weight:700; color:#26324A; line-height:1.35}
.pr-sk-st b.is-strong{color:#0B8F82} .pr-sk-st b.is-dev{color:#4A5FB8} .pr-sk-st b.is-weak{color:#C2334B} .pr-sk-st b.is-none{font-weight:500; color:#8A96AE}
@media (max-width:640px){ .pr-sk{padding:13px 14px} .pr-sk-st{gap:6px} .pr-sk-st small{font-size:10px} .pr-sk-st b{font-size:12px} }
/* UX-095 (25 Oct 2026): practice results, "Review your answers" rows made identical to the "By skill" tiles */
.pr-ans.pr-at{border-radius:14px; background:#FBFCFE; border:1px solid #E6ECF5; transition:border-color .15s, box-shadow .15s}
.pr-ans.pr-at:hover{border-color:#C9D5EA; box-shadow:0 6px 16px rgba(11,40,95,.06)}
.pr-ans.pr-at[open]{background:#fff; border-color:#C9D5EA}
.pr-ans.pr-at summary{display:flex; flex-direction:column; gap:9px; padding:14px 16px; grid-template-columns:none}
.pr-chev{display:inline-block; margin-left:8px; font-style:normal; font-size:16px; color:#8A96AE; transform:rotate(90deg); transition:transform .15s}
.pr-ans.pr-at[open] .pr-chev{transform:rotate(-90deg)}
.pr-ans.pr-at .pr-sk-pct{font-size:15px}
.pr-ans.pr-at .pr-detail{padding:2px 16px 16px; border-top:1px dashed #E3EAF4; margin:0 16px; padding-left:0; padding-right:0; padding-top:12px}
.pr-ans.pr-at summary{align-items:stretch; justify-items:stretch; text-align:left} .pr-ans.pr-at .pr-detail b{font-size:14.5px}
/* UX-096 (25 Oct 2026): the opened answer uses the same type as the tile above it */
.pr-ans.pr-at, .pr-ans.pr-at summary, .pr-ans.pr-at .pr-detail{font-family:var(--sans)}
.pr-ans.pr-at .pr-detail{gap:10px}
.pr-ans.pr-at .pr-detail .pr-k{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8A96AE; margin-bottom:2px}
.pr-ans.pr-at .pr-detail b{font-size:14.5px; font-weight:600; line-height:1.45}
.pr-ans.pr-at .pr-detail p{font-size:14.5px; font-weight:600; line-height:1.45; color:#1C2A4A; margin:0}
.pr-ans.pr-at .pr-detail a{font-size:12.5px; font-weight:700}
/* Free trial test (owner, 26 Oct 2026; PRD 7.4d; M-05, M-26, M-148, M-149) */
.ft-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ft-head > .col{gap:4px;min-width:0}
.ft-cta{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;background:linear-gradient(135deg,#35D6BE 0%,#20B9A3 100%);color:#0B1B45;text-decoration:none;box-shadow:0 6px 18px rgba(32,185,163,.32);transition:transform .15s ease,box-shadow .15s ease;line-height:1.2}
.ft-cta:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(32,185,163,.42)}
.ft-cta:focus-visible{outline:3px solid #0B1B45;outline-offset:2px}
.ft-cta .ft-badge{background:#0B1B45;color:#35D6BE;font-size:11px;font-weight:800;letter-spacing:.8px;padding:5px 7px;border-radius:9px}
.ft-cta b{display:block;font-size:14px;font-weight:800}
.ft-cta small{display:block;font-size:11.5px;font-weight:600;color:#123B47}
.ft-cta svg{flex-shrink:0}
.ft-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:linear-gradient(120deg,#0B1B45 0%,#13276C 70%,#1D3A93 100%);color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(11,27,69,.18)}
.ft-card .ft-ic{width:46px;height:46px;border-radius:13px;background:#35D6BE;color:#0B1B45;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ft-card b{font-size:16px;font-weight:800}
.ft-card span.s{display:block;font-size:12.5px;color:#C9D2EE;margin-top:2px}
.ft-card .go{margin-left:auto;flex-shrink:0;display:inline-block;background:#35D6BE;color:#0B1B45;font-weight:800;font-size:13px;padding:9px 14px;border-radius:11px;white-space:nowrap}
.ft-hero{border-radius:20px;padding:24px;background:radial-gradient(120% 140% at 100% 0%,#1D3A93 0%,#13276C 45%,#0B1B45 100%);color:#fff;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.ft-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(53,214,190,.12)}
.ft-hero .k{font-size:12px;font-weight:800;letter-spacing:1.4px;color:#35D6BE;text-transform:uppercase}
.ft-hero h1{margin:0;font-family:var(--serif,inherit);font-size:28px;line-height:1.2;color:#fff}
.ft-hero p{margin:0;color:#D5DBF0;font-size:15px;line-height:1.5;max-width:560px}
.ft-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative;z-index:1}
.ft-stats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px;text-align:center}
.ft-stats b{display:block;font-size:24px;font-weight:800;color:#fff}
.ft-stats span{font-size:12px;color:#C9D2EE;font-weight:600}
.ft-subj{display:flex;flex-wrap:wrap;gap:8px}
.ft-subj span{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #E1E6F2;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:700;color:#13276C}
.ft-subj span i{font-style:normal;background:#E8ECF8;border-radius:999px;padding:1px 7px;font-size:12px}
.ft-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#1B2440}
.ft-steps li em{font-style:normal;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#E8ECF8;color:#13276C;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.ft-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:0;border-radius:14px;background:linear-gradient(135deg,#35D6BE 0%,#20B9A3 100%);color:#0B1B45;font-size:17px;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:0 8px 22px rgba(32,185,163,.35)}
.ft-go:hover{filter:brightness(1.03)}
.ft-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;position:relative;z-index:1}
.ft-ring{width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(#35D6BE calc(var(--p) * 1%),rgba(255,255,255,.14) 0)}
.ft-ring > div{width:104px;height:104px;border-radius:50%;background:#0F2260;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ft-ring b{font-size:30px;font-weight:800;color:#fff;line-height:1}
.ft-ring span{font-size:12px;color:#C9D2EE;font-weight:700;margin-top:4px}
.ft-bars{display:flex;flex-direction:column;gap:12px}
.ft-bar{display:grid;grid-template-columns:150px minmax(0,1fr) 56px;gap:12px;align-items:center;font-size:14px;font-weight:700;color:#1B2440}
.ft-bar .t{height:12px;border-radius:999px;background:#E8ECF8;overflow:hidden}
.ft-bar .t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#13276C,#3657C4)}
.ft-bar .t i.hi{background:linear-gradient(90deg,#20B9A3,#35D6BE)}
.ft-bar .n{text-align:right;color:#13276C}
.ft-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ft-pair div{border-radius:14px;background:#F4F6FC;border:1px solid #E1E6F2;padding:14px;display:flex;flex-direction:column;gap:2px}
.ft-pair b{font-size:22px;font-weight:800;color:#13276C}
.ft-pair span{font-size:12.5px;font-weight:700;color:#55607A}
.ft-gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ft-gets div{border-radius:14px;background:#fff;border:1px solid #E1E6F2;padding:14px;display:flex;flex-direction:column;gap:6px}
.ft-gets svg{color:#20B9A3}
.ft-gets b{font-size:14px;color:#0B1B45}
.ft-gets span{font-size:12.5px;color:#55607A;line-height:1.45}
.ft-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:16px;border:2px solid #13276C;background:#F4F6FC}
.ft-plan b{font-size:16px;color:#0B1B45}
.ft-plan .price{font-size:24px;font-weight:800;color:#13276C;white-space:nowrap}
.ft-plan .price small{font-size:12px;color:#55607A;font-weight:700}
@media (max-width:600px){
.ft-hero{padding:20px}
.ft-hero h1{font-size:23px}
.ft-stats b{font-size:20px}
.ft-score{grid-template-columns:1fr;justify-items:center;text-align:center}
.ft-bar{grid-template-columns:96px minmax(0,1fr) 44px;font-size:13px}
.ft-gets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ft-gets div{padding:11px;gap:4px}
.ft-gets b{font-size:13px}
.ft-gets span{font-size:12px}
.ft-plan .price{font-size:20px}
.ft-card{flex-wrap:wrap}
.ft-card .go{margin-left:0;width:100%;text-align:center}
}
/* The leaderboard (M-150, the card on M-60 and M-144; PRD 13.4a; owner, 27 Oct 2026) */
.lb-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lb-mini>div{background:#F4F6FB;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.lb-mini b{font-size:20px;color:#13276C}.lb-mini b span{font-weight:600}
.lb-top3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.lb-top3 li{display:flex;gap:10px;align-items:center}.lb-top3 li>b{width:22px;height:22px;border-radius:50%;background:#FFF4D6;color:#8A5A00;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.lb-top3 li>span{margin-left:auto;font-weight:700;color:#13276C}
.lb-hero{background:#0B1B45;color:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px}
.lb-hero .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#C9D2EE}
.lb-hero .big{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lb-hero .big>div{background:rgba(255,255,255,.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.lb-hero .big b{font-size:26px}.lb-hero .big span{font-size:13px;color:#C9D2EE}
.lb-boards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.lb-t{width:100%;border-collapse:collapse;font-size:14px}
.lb-t th{text-align:left;font-size:12px;color:#55607A;font-weight:700;padding:6px;border-bottom:1px solid #E3E6EE}
.lb-t td{padding:7px 6px;border-bottom:1px solid #F0F1F5}.lb-t td.n{text-align:right;font-weight:700;color:#13276C}
.lb-t tr.me td{background:#FFF7E0;font-weight:700}.lb-t tr.gap td{text-align:center;color:#55607A;padding:4px}
@media (max-width:900px){.lb-boards{grid-template-columns:1fr}.lb-hero .big b{font-size:20px}}
/* MDCAT home: how the five subjects are taught over weeks 1 to 36, the strategy only (owner, 27 Oct 2026, 14:30; from the MDCAT 2027 week-wise LO plan) */
.hm-wk{display:flex; align-items:center; gap:10px; margin-top:2px}
.hm-wk .hm-thread-bar{flex:none; width:120px}
.rp-path .hm-wk span{font-size:13px; color:#5A6A8A}
.hm-strat{--lab:196px; --gap:14px; margin:12px 0 4px; padding:14px 16px 12px; border-radius:14px; background:#F7FAFE; border:1px solid #DCE6F3}
.hm-strat-row{display:grid; grid-template-columns:var(--lab) minmax(0,1fr); column-gap:var(--gap); align-items:center; min-height:34px}
.hm-strat-lab{display:flex; flex-direction:column; gap:1px; min-width:0}
.rp-path .hm-strat-lab b{font-size:14px; font-weight:700; color:#0B1B45}
.hm-seq li .hm-strat-lab b{color:#0B1B45}
.rp-path .hm-strat-lab span{font-size:11.5px; line-height:1.3; color:#5A6A8A}
.hm-strat-track{position:relative; height:12px; border-radius:999px; background:repeating-linear-gradient(90deg,#E9EFF8 0 calc(100%/36 - 1px),#F7FAFE calc(100%/36 - 1px) calc(100%/36))}
.hm-strat-seg{position:absolute; top:0; bottom:0; border-radius:999px; background:var(--c)}
.hm-strat-seg.b{--c:#16A37F} .hm-strat-seg.c{--c:#4F63D2} .hm-strat-seg.p{--c:#2B8FD6} .hm-strat-seg.e{--c:#E09A00} .hm-strat-seg.l{--c:#8B5CF6}
.hm-strat-axis{position:relative; height:16px; margin-top:4px}
.rp-path .hm-strat-axis span{position:absolute; transform:translateX(-50%); font-size:10.5px; font-weight:700; color:#7A88A6; white-space:nowrap}
.hm-strat-mocks{position:relative; height:16px}
.hm-strat-mocks i{position:absolute; top:0; transform:translateX(-50%); font-style:normal; font-size:11px; line-height:16px; color:#E6A100}
.hm-strat-grid{position:relative}
.hm-strat-now{position:absolute; top:4px; bottom:12px; left:calc(var(--lab) + var(--gap) + (100% - var(--lab) - var(--gap)) * var(--w)); width:0; border-left:2px dashed #0B285F; pointer-events:none}
.rp-path .hm-strat-now span.x{position:absolute; top:-14px; left:-1px; transform:translateX(-50%); padding:1px 6px; border-radius:6px; background:#0B285F; color:#fff; font-size:10px; font-weight:800; white-space:nowrap}
.hm-strat-key{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; padding-top:10px; border-top:1px solid #E3EAF4}
.rp-path .hm-strat-key span{font-size:12px; color:#3A4A6A}
.hm-strat-key i{font-style:normal; color:#E6A100}
@media (max-width:560px){
.hm-strat-now,.hm-strat-axis-lab{display:none}
.hm-strat{--lab:0px; --gap:0px; padding:12px 12px 10px}
.hm-strat-row{grid-template-columns:minmax(0,1fr); row-gap:4px; margin-bottom:6px}
.hm-strat-row.hm-strat-sub{margin-bottom:0}
}
.phone .hm-strat-now,.phone .hm-strat-axis-lab{display:none}
.phone .hm-strat{--lab:0px; --gap:0px; padding:12px 12px 10px}
.phone .hm-strat-row{grid-template-columns:minmax(0,1fr); row-gap:4px; margin-bottom:6px}
.phone .hm-strat-row.hm-strat-sub{margin-bottom:0}
.hm-strat-grid{padding-top:12px}
.rp-path .hm-strat-sub .hm-strat-lab span{font-size:11.5px; font-weight:700; color:#7A5200}
.rp-path .hm-strat-sub .hm-strat-axis-lab span{font-weight:700; color:#7A88A6}
/* 27 Oct 2026, 14:54 (owner): LOs, the key, four week marks with this week in a circle, and the header */
.hm-strat-axis{height:30px; margin-top:6px}
.rp-path .hm-strat-axis span{top:7px}
.rp-path .hm-strat-axis span.hm-strat-cur{top:0; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#0B285F; color:#fff; font-size:11.5px; font-weight:800; box-shadow:0 0 0 3px #fff,0 0 0 5px #22D3C5}
.hm-strat-key{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; margin-top:10px; padding-top:9px; border-top:1px solid #E3EAF4}
.rp-path .hm-strat-key span{font-size:11.5px; color:#5A6A8A}
.rp-path .hm-strat-key b{font-size:11.5px; font-weight:800; color:#0B1B45}
.hm-strat-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid #E3EAF4}
.hm-strat-head .k{display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#0FB4AA}
.hm-strat-head h2{margin:2px 0 0; font-family:var(--serif); font-size:22px; line-height:1.2; font-weight:700; color:#0B1B45}
.hm-strat-head h2 i{font-style:normal; color:#22D3C5}
.hm-strat-cal{flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:#F2F7FE; border:1px solid #CFE0F5; color:#0B285F; font-size:13px; font-weight:700; text-decoration:none}
.hm-strat-cal:hover{background:#E6F0FC}
@media (max-width:560px){ .hm-strat-head h2{font-size:19px} .hm-strat-cal{padding:6px 10px; font-size:12.5px} }
.phone .hm-strat-head h2{font-size:19px} .phone .hm-strat-cal{padding:6px 10px; font-size:12.5px}
.hm-strat-now{z-index:1}
.rp-path .hm-strat-axis span.hm-strat-cur{z-index:3}
@media (max-width:560px){ .hm-strat-head{align-items:flex-start} }
.phone .hm-strat-head{align-items:flex-start}
@media (max-width:560px){ .hm-strat-head .k{letter-spacing:.06em} }
.phone .hm-strat-head .k{letter-spacing:.06em}
/* Revision and review weeks: the teal of weeks 1 to 36; the full mock as one line, no box (owner, 27 Oct 2026, 15:04) */
.rp-path li.hm-rev::before{border-color:#22D3C5; background:#fff}
.rp-path li.hm-rev.now::before{background:#22D3C5; border-color:#22D3C5; box-shadow:none}
.hm-seq li.hm-rev b{color:#0B6B63}
.rp-path li.hm-rev .hm-rev-mock{margin-top:3px; font-size:12.5px; font-weight:700; color:#3A4FA0}
.hm-rev-mock i{font-style:normal; color:#E6A100}
/* Leaderboard card on the phone dashboard, in the look of "Your next test" (owner, 27 Oct 2026, 15:18) */
.lbc{display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:18px; background:#fff; border:1px solid #DCE6F3; border-top:4px solid #0B285F; box-shadow:0 6px 18px rgba(11,40,95,.06); color:#0B1B45}
.lbc-top{display:flex; align-items:center; gap:12px}
.lbc-ico{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#22D3C5; color:#0B1B45}
.lbc-k{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#0B8F84}
.lbc-t{font-size:18px; line-height:1.25; color:#0B1B45}
.lbc-steps{display:flex; gap:6px}
.lbc-steps i{flex:1; height:8px; border-radius:999px; background:#E3EAF4}
.lbc-steps i.on{background:#22D3C5}
.lbc-p{margin:0; font-size:14.5px; line-height:1.5; color:#33415C}
.lbc-p b{color:#0B1B45}
.lbc-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.lbc-tiles span{display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 6px; border-radius:12px; background:#F3F6FB; border:1px solid #E1E7F2; text-align:center; min-width:0}
.lbc-tiles small{font-size:10.5px; line-height:1.25; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5A6A8A; max-width:100%; overflow-wrap:anywhere}
.lbc-tiles b{font-size:24px; font-weight:800; line-height:1.15; color:#0B285F; font-variant-numeric:tabular-nums}
.lbc-tiles em{font-style:normal; font-size:12px; color:#5A6A8A}
.lbc-top3{display:flex; flex-direction:column; gap:6px}
.lbc-k2{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5A6A8A}
.lbc-top3 ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.lbc-top3 li{display:flex; align-items:center; gap:10px; font-size:14px}
.lbc-top3 li>b{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#FFF4D6; color:#8A5A00; font-size:12px}
.lbc-top3 .n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbc-top3 .f{margin-left:auto; font-weight:800; color:#0B285F}
.lbc-note{padding:10px 12px; border-radius:12px; background:#F4FAF9; border:1px solid #D6EEEA; font-size:12.5px; line-height:1.45; color:#33415C}
.lbc-btn{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:12px; background:#0B285F; color:#fff; font-weight:800; font-size:14.5px; text-decoration:none}
.lbc-btn:hover{background:#13367A}
/* Study: this week's LOs grouped by subject, each with its colour and a separator (owner, 27 Oct 2026, 15:39) */
.sw-bio{--sc:#34D399} .sw-che{--sc:#8B9CFF} .sw-phy{--sc:#5EB8FF} .sw-eng{--sc:#FFC24D} .sw-lr{--sc:#B794FF}
.sw-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sw-stats span{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.sw-stats span > i{grid-row:1 / 3; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:rgba(34,211,197,.16); color:#7FEBDB}
.sw-stats b{font-size:24px; font-weight:800; line-height:1.05; color:#fff}
.sw-stats small{font-size:12px; font-weight:700; color:#BFC8E8}
.sw-mix{display:flex; gap:3px; height:8px}
.sw-mix i{border-radius:999px; background:var(--sc)}
.sw-groups{display:flex; flex-direction:column; border-radius:16px; background:rgba(5,16,48,.42); border:1px solid rgba(255,255,255,.10); overflow:hidden}
.sw-grp{position:relative; padding:12px 14px 10px 18px}
.sw-grp::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--sc)}
.sw-grp + .sw-grp{border-top:1px solid rgba(255,255,255,.12)}
.sw-grp header{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.sw-dot{width:10px; height:10px; border-radius:50%; background:var(--sc); box-shadow:0 0 0 3px color-mix(in srgb, var(--sc) 25%, transparent)}
.sw-grp header b{font-size:15px; font-weight:800; color:#fff}
.sw-n{padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:800; color:var(--sc); background:color-mix(in srgb, var(--sc) 16%, transparent)}
.sw-open{margin-left:auto; font-size:12.5px; font-weight:700; color:#BFC8E8; text-decoration:none}
.sw-open:hover{color:#fff}
.sw-grp ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.sw-grp li a{display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 8px; margin:0 -8px; border-radius:10px; color:#fff; text-decoration:none}
.sw-grp li a:hover{background:rgba(255,255,255,.07)}
.sw-code{justify-self:start; padding:2px 7px; border-radius:7px; font-family:ui-monospace,Consolas,monospace; font-size:11px; font-weight:700; color:var(--sc); background:color-mix(in srgb, var(--sc) 14%, transparent); white-space:nowrap}
.sw-txt{font-size:13.5px; line-height:1.4; color:#EEF1FF}
.sw-has{display:flex; align-items:center; gap:4px}
.sw-has i{font-style:normal; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(53,214,190,.18); color:#9FEDE6}
.sw-go{color:#7F8BB5}
.sw-grp li a:hover .sw-go{color:#fff}
@media (max-width:560px){
.sw-stats span{grid-template-columns:1fr; padding:10px} .sw-stats span > i{display:none}
.sw-grp li a{grid-template-columns:minmax(0,1fr) auto; row-gap:4px} .sw-code{grid-column:1; grid-row:1} .sw-has{grid-column:2; grid-row:1} .sw-txt{grid-column:1 / -1; grid-row:2}
}
.phone .sw-stats span{grid-template-columns:1fr; padding:10px} .phone .sw-stats span > i{display:none}
.phone .sw-grp li a{grid-template-columns:minmax(0,1fr) auto; row-gap:4px} .phone .sw-code{grid-column:1; grid-row:1} .phone .sw-has{grid-column:2; grid-row:1} .phone .sw-txt{grid-column:1 / -1; grid-row:2}
/* Study: the subjects list as a white panel inside the navy card; the navy frame keeps the theme (owner, 27 Oct 2026, 15:50) */
.sw-bio{--sd:#0E8A62} .sw-che{--sd:#4B55C8} .sw-phy{--sd:#1C72BD} .sw-eng{--sd:#A86400} .sw-lr{--sd:#7438D6}
.sw-groups{background:#fff; border:0; box-shadow:0 10px 24px rgba(3,12,40,.28)}
.sw-grp{padding:0 0 6px}
.sw-grp::before{top:0; bottom:0; width:4px; border-radius:0; background:var(--sd)}
.sw-grp + .sw-grp{border-top:1px solid #E6ECF5}
.sw-grp header{margin:0 0 4px; padding:10px 16px 9px 20px; background:color-mix(in srgb, var(--sd) 7%, #fff)}
.sw-grp header b{color:#0B1B45}
.sw-dot{background:var(--sd); box-shadow:0 0 0 3px color-mix(in srgb, var(--sd) 18%, #fff)}
.sw-n{color:var(--sd); background:color-mix(in srgb, var(--sd) 12%, #fff)}
.sw-open{color:#0B285F}
.sw-open:hover{color:#0FB4AA}
.sw-grp ol{padding:0 12px 0 16px}
.sw-grp li a{color:#0B1B45}
.sw-grp li a:hover{background:#F3F7FD}
.sw-grp li + li a{border-top:1px dashed #EDF1F7}
.sw-code{color:var(--sd); background:color-mix(in srgb, var(--sd) 9%, #fff); border:1px solid color-mix(in srgb, var(--sd) 22%, #fff)}
.sw-txt{color:#22314F}
.sw-has i{background:#E6F7F4; color:#0B7F75}
.sw-go{color:#9AA6C2}
.sw-grp li a:hover .sw-go{color:#0B285F}
/* The big card on the main screen (Home "This week", Study "This week's study"): a solid, lighter royal blue, so it is not the side bar's navy (owner, 27 Oct 2026, 15:54; #276597 chosen by the owner, 15:59; #1C3C77, 16:34) */
.hm-hero{background:#1C3C77; box-shadow:0 14px 30px rgba(28,60,119,.26)}
.hm-hero .bw-k{color:#A8F0E8}
.hm-hero .bw-s,.hm-hero .hm-subj-k,.hm-hero .sw-stats small{color:#E3E9FB}
.hm-hero .sw-stats span,.hm-hero .st-stats span{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22)}
.hm-hero .hero-inner.hm-today{background:rgba(9,30,86,.28); border-color:rgba(255,255,255,.16)}
/* Study: Skills to revisit and When weeks open, in the look of the Practice test card (owner, 27 Oct 2026, 16:38) */
.st-revisit{border-top-color:#E07A5F}
.st-info{border-top-color:#1C3C77}
.st-okrow{display:flex; align-items:flex-start; gap:12px}
.st-okico{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#E6F7F4; color:#0B8F84}
.st-okico.st-clock{background:#EAF0FA; color:#1C3C77}
.st-info-t{font-size:13.5px; line-height:1.5; color:#5A6A8A}
/* Practice, Your recent practice: date, result and score on one balanced line, also on a phone (owner, 27 Oct 2026, 16:49) */
.ts-prac .sj-pill{min-width:72px; justify-content:center; text-align:center}
@media (max-width:560px){ .ts-row.ts-prac{grid-template-columns:auto minmax(0,1fr) auto; gap:12px} .ts-row.ts-prac .sj-pill{grid-column:auto; justify-self:end; align-self:center} }
.phone .ts-row.ts-prac{grid-template-columns:auto minmax(0,1fr) auto; gap:12px} .phone .ts-row.ts-prac .sj-pill{grid-column:auto; justify-self:end; align-self:center}
/* Tests: the full-mock note in point form (owner, 27 Oct 2026, 16:55) */
.ts-note-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.ts-note-list li{position:relative; padding-left:16px; font-size:13px; line-height:1.45; color:#3A4FA0}
.ts-note-list li::before{content:""; position:absolute; left:2px; top:7px; width:6px; height:6px; border-radius:50%; background:#E6A100}
.ts-note .ts-note-list li b{font-size:13px; color:#0B1B45; font-weight:700}
/* Results restyled in the look of the updated screens (owner, 27 Oct 2026, 17:12) */
.rs-hero{gap:14px}
.rs-list{gap:10px}
.rs-chips{display:flex; flex-wrap:wrap; gap:6px}
.rs-chips a{padding:5px 12px; border-radius:999px; background:#EEF2F8; color:#0B285F; font-size:12.5px; font-weight:700; text-decoration:none}
.rs-chips a.on{background:#1C3C77; color:#fff}
.rs-row{text-decoration:none; color:inherit; transition:background .15s, border-color .15s}
.rs-row:hover{background:#F6F9FE; border-color:#D9E3F2}
.rs-dt .ts-date{background:#E6F7F4} .rs-dt .ts-date small,.rs-dt .ts-date b{color:#0B7F75}
.rs-mastery{border-top-color:#1C3C77}
.rs-big{font-size:30px; font-weight:800; line-height:1.1; color:#0B285F}
.rs-btn{align-self:stretch; justify-content:center; flex:0 0 auto; height:auto}
.dcol > .rs-btn{max-height:52px}
.rs-btn{width:100%; box-sizing:border-box}
/* Leaderboard restyled in the look of the updated screens (owner, 27 Oct 2026, 17:24) */
.dgrid.lb2{grid-template-columns:minmax(0,1fr)}
.lb2-wide{gap:16px}
.lb2-hero{gap:14px}
.lb2-hero .bw-s b{color:#fff}
.lb2-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.lb2-steps span{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:13px; font-weight:700; color:#E3E9FB}
.lb2-steps span i{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-style:normal; font-size:13px; font-weight:800; background:rgba(255,255,255,.14); color:#fff}
.lb2-steps span.on{background:rgba(34,211,197,.18); border-color:rgba(34,211,197,.45)}
.lb2-steps span.on i{background:#22D3C5; color:#0B1B45}
.lb2-board{gap:10px}
.lb2-pta{border-top-color:#1C3C77}
.lb2-dist{border-top-color:#22D3C5}
.lb2-top{padding:3px 10px; border-radius:999px; background:#EEF2F8; color:#0B285F; font-size:12px; font-weight:800}
.lb2-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lb2-list li{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 8px; border-radius:12px}
.lb2-list li + li{border-top:1px solid #EEF2F8}
.lb2-list li b{font-size:14px; color:#0B1B45}
.lb2-list li.me{background:#FFF7E0; border-top-color:transparent}
.lb2-list li.me + li{border-top-color:transparent}
.lb2-list li.gap{display:block; text-align:center; color:#9AA6C2; padding:2px; letter-spacing:.3em}
.lb2-rank{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-size:13px; font-weight:800; background:#EEF2F8; color:#0B285F}
.lb2-rank.r1{background:#F6C445; color:#5C3B00}
.lb2-rank.r2{background:#D5DBE5; color:#33415C}
.lb2-rank.r3{background:#E3A774; color:#4A2A0C}
.lb2-fig{font-size:15px; font-weight:800; color:#0B285F; font-variant-numeric:tabular-nums}
.lb2-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.lb2-points li{position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:#33415C}
.lb2-points li::before{content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:#22D3C5}
.lb2-points li b{color:#0B1B45}
@media (max-width:560px){ .lb2-steps span{flex-direction:column; gap:4px; padding:8px; text-align:center} }
.phone .lb2-steps span{flex-direction:column; gap:4px; padding:8px; text-align:center}
/* Calendar restyled in the look of the updated screens (owner, 27 Oct 2026, 17:34) */
.cal-hero{gap:14px}
.cal-year{gap:12px}
.cal-now{padding:3px 10px; border-radius:999px; background:#E6F7F4; color:#0B7F75; font-size:12px; font-weight:800}
.cal-grid{display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:5px}
.cal-w{position:relative; display:grid; place-items:center; height:34px; border-radius:9px; background:#EEF2F8; color:#5A6A8A; font-size:12px; font-weight:800}
.cal-w b{font-weight:800}
.cal-w.rev{background:#F1EEFB; color:#6A5BB0}
.cal-w.done{background:#1C3C77; color:#fff}
.cal-w.now{background:#22D3C5; color:#0B1B45; box-shadow:0 0 0 2px #fff,0 0 0 4px #1C3C77}
.cal-w i,.cal-key i.m,.cal-key i.f{font-style:normal; font-size:9px; font-weight:800; line-height:1; padding:2px 3px; border-radius:4px}
.cal-w i{position:absolute; top:-5px; right:-4px}
.cal-w i.m,.cal-key i.m{background:#F6C445; color:#5C3B00}
.cal-w i.f,.cal-key i.f{background:#6F82D2; color:#fff}
.cal-key{display:flex; flex-wrap:wrap; gap:6px 14px; padding-top:10px; border-top:1px solid #EEF2F8}
.cal-key span{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#5A6A8A}
.cal-key i{display:inline-block; width:12px; height:12px; border-radius:4px}
.cal-key i.k-done{background:#1C3C77} .cal-key i.k-now{background:#22D3C5} .cal-key i.k-next{background:#EEF2F8; border:1px solid #DCE3EE} .cal-key i.k-rev{background:#F1EEFB; border:1px solid #DCD5F3}
.cal-key i.m,.cal-key i.f{width:auto; height:auto}
.cal-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.cal-list li{display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-top:1px solid #EEF2F8; font-size:13.5px}
.cal-list li b{color:#0B1B45}
.cal-when{font-size:12.5px; font-weight:800; color:#0B285F}
.cal-weeks{gap:10px}
.cal-wk{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid #EEF2F8}
.cal-wk b{font-size:14.5px; color:#0B1B45}
.cal-wk.now{border:1.5px solid #1C3C77; background:#F6F9FE}
.cal-wk.now .ts-date{background:#22D3C5} .cal-wk.now .ts-date small,.cal-wk.now .ts-date b{color:#0B1B45}
.cal-wk.done .ts-date{background:#1C3C77} .cal-wk.done .ts-date small,.cal-wk.done .ts-date b{color:#fff}
.cal-note{margin-top:2px; font-size:12px; font-weight:700; color:#3A4FA0}
@media (max-width:560px){ .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))} .cal-list li{grid-template-columns:minmax(0,1fr) auto} .cal-when{grid-column:1 / -1} }
.phone .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))} .phone .cal-list li{grid-template-columns:minmax(0,1fr) auto} .phone .cal-when{grid-column:1 / -1}
.cal-open{flex:0 0 auto !important; height:auto !important; align-self:stretch}
/* Mastery map restyled in the look of the updated screens (owner, 27 Oct 2026, 17:49) */
.mm-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-stats span{grid-template-columns:1fr; position:relative; padding-left:18px}
.mm-stats span::before{content:""; position:absolute; left:8px; top:12px; bottom:12px; width:4px; border-radius:4px; background:var(--mk)}
.mm-s-strong{--mk:#22D3C5} .mm-s-dev{--mk:#8B9CFF} .mm-s-weak{--mk:#FF7A8A} .mm-s-none{--mk:rgba(255,255,255,.35)}
.mm-sub{gap:12px; padding:18px 20px; border-radius:16px; border-top:4px solid var(--sd)}
.mm-head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center}
.mm-name{font-size:17px; color:#0B1B45}
.mm-pct{display:inline-flex; align-items:center; gap:8px} .mm-pct b{font-size:20px; color:#0B1B45}
.mm-bar{display:flex; gap:3px; height:8px}
.mm-bar i{border-radius:999px}
.b-strong{background:#22D3C5} .b-developing{background:#6F82D2} .b-weak{background:#E5485F} .b-none{background:#E3E8F1}
.mm-counts{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; font-weight:600; color:#5A6A8A}
.mm-counts span{display:inline-flex; align-items:center; gap:6px} .mm-counts i{width:9px; height:9px; border-radius:3px}
.mm-next{position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 40px 12px 14px; border-radius:12px; background:color-mix(in srgb, var(--sd) 7%, #fff); border:1px solid color-mix(in srgb, var(--sd) 25%, #fff); text-decoration:none; color:inherit}
.mm-next b{font-size:14px; line-height:1.4; color:#0B1B45}
.mm-next-k{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sd)}
.mm-go{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--sd)}
.mm-unit{display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid #EEF2F8}
.mm-unit-h{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#0B285F}
.mm-los{display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:8px}
.mm-lo{display:flex; flex-direction:column; gap:4px; padding:9px 10px; border-radius:11px; border:1px solid #E3E8F1; background:#F7F9FC; text-decoration:none; color:#0B1B45; --bc:#8A96AE}
.mm-lo:hover{border-color:var(--sd)}
.mm-lo-c{display:flex; align-items:center; justify-content:space-between; gap:6px; font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:700}
.mm-lo-c i{font-style:normal; font-family:var(--sans); font-size:10px; font-weight:800; padding:1px 6px; border-radius:999px; background:#1C3C77; color:#fff}
.mm-lo-b{font-size:12px; font-weight:700; color:var(--bc)}
.mm-lo-m{height:4px; border-radius:999px; background:#E3E8F1; overflow:hidden} .mm-lo-m i{display:block; height:100%; background:var(--bc)}
.mm-lo.is-strong{--bc:#0B8F82; background:#EFFBF9; border-color:#B5ECE5}
.mm-lo.is-dev{--bc:#4A5FB8; background:#F2F4FD; border-color:#CDD5F3}
.mm-lo.is-weak{--bc:#C2334B; background:#FDF1F3; border-color:#F3C1CA}
.mm-lo.is-start{background:#fff; border-style:dashed}
.mm-lo.is-next{box-shadow:0 0 0 2px #1C3C77}
.mm-key{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; align-items:center}
.mm-key span{display:contents}
.mm-k{font-style:normal; justify-self:start; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:800; border:1px solid}
.mm-k.is-strong{background:#EFFBF9; border-color:#B5ECE5; color:#0B8F82} .mm-k.is-dev{background:#F2F4FD; border-color:#CDD5F3; color:#4A5FB8} .mm-k.is-weak{background:#FDF1F3; border-color:#F3C1CA; color:#C2334B}
.mm-k.is-start{background:#fff; border-style:dashed}
.mm-key small{font-size:13px; color:#5A6A8A; line-height:1.4}
.mm-notes{margin-top:2px; padding-top:10px; border-top:1px solid #EEF2F8}
.mm-notes li{color:#33415C}
.mm-steps{margin:0; padding:0; list-style:none; counter-reset:mm; display:flex; flex-direction:column; gap:8px}
.mm-steps li{counter-increment:mm; display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:13.5px; line-height:1.45; color:#33415C}
.mm-steps li::before{content:counter(mm); width:24px; height:24px; border-radius:50%; background:#EAF0FA; color:#1C3C77; font-size:12px; font-weight:800; display:grid; place-items:center}
@media (max-width:560px){ .mm-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .mm-sub{padding:16px} .mm-los{grid-template-columns:repeat(2,minmax(0,1fr))} }
.phone .mm-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .phone .mm-sub{padding:16px} .phone .mm-los{grid-template-columns:repeat(2,minmax(0,1fr))}
.dgrid.mm-grid > .dcol > :last-child{flex-grow:0}
.hm-hero .sw-stats.mm-stats span{padding-left:20px}
/* Past papers restyled in the look of the updated screens (owner, 27 Oct 2026, 17:59) */
.dgrid.pp-grid > .dcol > :last-child{flex-grow:0}
.pp-sub{gap:8px}
.pp-sub .mm-head{grid-template-columns:auto minmax(0,1fr) auto; margin-bottom:2px}
.pp-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px; border-radius:12px; border:1px solid #E3E8F1; background:#F9FAFD; text-decoration:none; color:inherit}
.pp-row:hover{border-color:var(--sd); background:#fff}
.pp-year{display:flex; flex-direction:column; align-items:center; justify-content:center; width:58px; height:52px; border-radius:11px; background:color-mix(in srgb, var(--sd) 12%, #fff); color:var(--sd)}
.pp-year small{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.pp-year b{font-size:17px; font-weight:800; line-height:1.1}
.pp-t{font-size:14.5px; color:#0B1B45}
.pp-read{display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:999px; background:#1C3C77; color:#fff; font-size:12.5px; font-weight:800}
.pp-pt{font-size:15px; color:#0B1B45}
.pp-empty{gap:14px}
.pp-chips{display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid #EEF2F8}
.pp-chip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid #E3E8F1; background:#F9FAFD; font-size:13px; font-weight:700; color:#0B1B45}
.pp-chip .sw-dot{width:8px; height:8px}
.pp-chip small{font-size:11px; font-weight:700; color:#8A96AE}
@media (max-width:560px){ .pp-row{gap:10px; padding:8px} .pp-year{width:52px; height:48px} .pp-read{padding:6px 10px} }
.phone .pp-row{gap:10px; padding:8px} .phone .pp-year{width:52px; height:48px} .phone .pp-read{padding:6px 10px}
/* Past papers year by year, never subject by subject (owner, 27 Oct 2026, 18:14) */
.pp-yearcard{gap:8px; padding:18px 20px; border-radius:16px; border-top:4px solid #1C3C77}
.pp-yhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px}
.pp-y{font-family:var(--serif); font-size:26px; line-height:1; color:#0B1B45}
.pp-yn{padding:3px 10px; border-radius:999px; background:#EAF0FA; color:#1C3C77; font-size:12px; font-weight:800}
.pp-doc{display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:#EAF0FA; color:#1C3C77}
.pp-row:hover{border-color:#1C3C77}
@media (max-width:560px){ .pp-doc{width:40px; height:40px} .pp-yearcard{padding:16px} }
.phone .pp-doc{width:40px; height:40px} .phone .pp-yearcard{padding:16px}
/* Diagnostic report restyled in the look of the updated screens (owner, 27 Oct 2026, 18:51) */
.dgrid.dr-grid > .dcol > :last-child{flex-grow:0}
.dr-hero{gap:16px}
.dr-top{display:flex; align-items:center; justify-content:space-between; gap:18px}
.dr-scores{display:flex; align-items:center; gap:14px; flex:none}
.dr-hero .rp-part2{max-width:220px}
.dr-card{gap:12px}
.dr-subj{display:flex; flex-direction:column; gap:7px; padding-top:10px; border-top:1px solid #EEF2F8}
.dr-subj:first-of-type{border-top:0; padding-top:0}
.dr-subj-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center}
.dr-subj-top b{font-size:15px; color:#0B1B45}
.dr-subj-n{font-size:12.5px; font-weight:700; color:#5A6A8A; white-space:nowrap}
.dr-bar{height:8px; border-radius:999px; background:#EEF2F8; overflow:hidden}
.dr-bar i{display:block; height:100%; border-radius:999px; background:var(--sd)}
.dr-next{padding-right:14px}
.dr-group{border-top:1px solid #EEF2F8; padding-top:10px}
.dr-group > summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none}
.dr-group > summary::-webkit-details-marker{display:none}
.dr-group > summary b{font-size:14px; color:#0B1B45}
.dr-chev{margin-left:auto; color:#5A6A8A; transition:transform .15s}
.dr-group[open] .dr-chev{transform:rotate(90deg)}
.dr-lo{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed #EEF2F8; font-size:13.5px}
.dr-lo:last-child{border-bottom:0}
.dr-lo-t{color:#0B1B45; line-height:1.4}
.dr-lo .pp-read{text-decoration:none; padding:5px 11px; font-size:12px}
@media (max-width:560px){ .dr-top{flex-direction:column; align-items:flex-start} .dr-subj-top{grid-template-columns:auto minmax(0,1fr) auto} .dr-subj-top > b{grid-column:2; grid-row:1} .dr-subj-top > .sj-pill{grid-column:3; grid-row:1} .dr-subj-n{grid-column:2 / -1; grid-row:2} .dr-lo{grid-template-columns:auto minmax(0,1fr)} .dr-lo > :last-child{grid-column:2; justify-self:start} }
.phone .dr-top{flex-direction:column; align-items:flex-start} .phone .dr-subj-top{grid-template-columns:auto minmax(0,1fr) auto} .phone .dr-subj-top > b{grid-column:2; grid-row:1} .phone .dr-subj-top > .sj-pill{grid-column:3; grid-row:1} .phone .dr-subj-n{grid-column:2 / -1; grid-row:2} .phone .dr-lo{grid-template-columns:auto minmax(0,1fr)} .phone .dr-lo > :last-child{grid-column:2; justify-self:start}
/* My Tickets restyled in the look of the updated screens (owner, 27 Oct 2026, 19:24) */
.dgrid.tk-grid > .dcol > :last-child{flex-grow:0}
.tk-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.tk-new{flex:none; display:inline-flex; align-items:center; gap:8px; background:#22D3C5; color:#0B1B45; border:0; font-weight:800; text-decoration:none}
.tk-new:hover{background:#3BE0D3}
.tk-list{gap:10px}
.tk-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:12px; border:1px solid #E3E8F1; background:#F9FAFD; text-decoration:none; color:inherit}
.tk-row:hover{border-color:#1C3C77; background:#fff}
.tk-row.is-done{opacity:.8}
.tk-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:#EAF0FA; color:#1C3C77}
.tk-t{font-size:14.5px; color:#0B1B45}
.tk-msg{font-size:13.5px; color:#33415C; line-height:1.4}
.tk-form{gap:16px}
.tk-about{padding:8px 12px; border-radius:10px; background:#EAF0FA; color:#1C3C77; font-size:13px; font-weight:700}
.tk-topics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.tk-topic{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:12px; border:1.5px solid #E3E8F1; background:#F9FAFD; cursor:pointer}
.tk-topic b{font-size:14px; color:#0B1B45}
.tk-topic input{margin-top:3px; accent-color:#1C3C77}
.tk-topic:has(input:checked){border-color:#1C3C77; background:#F2F5FC}
.tk-thread{gap:14px}
.tk-msgs{display:flex; flex-direction:column; gap:10px}
.tk-bubble{display:flex; flex-direction:column; gap:4px; max-width:86%; padding:12px 14px; border-radius:14px}
.tk-bubble.is-me{align-self:flex-end; background:#E6F7F4; border-bottom-right-radius:4px}
.tk-bubble.is-pta{align-self:flex-start; background:#EAF0FA; border-bottom-left-radius:4px}
.tk-who{font-size:12px; font-weight:800; color:#5A6A8A}
.tk-text{font-size:14px; line-height:1.5; color:#0B1B45; white-space:pre-line}
.tk-reply{gap:10px; padding-top:12px; border-top:1px solid #EEF2F8}
.tk-resolved{padding-top:12px; border-top:1px solid #EEF2F8}
.tk-facts{margin:0; display:flex; flex-direction:column; gap:8px}
.tk-facts > div{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding-bottom:8px; border-bottom:1px dashed #EEF2F8}
.tk-facts > div:last-child{border-bottom:0; padding-bottom:0}
.tk-facts dt{color:#5A6A8A; font-weight:600} .tk-facts dd{margin:0; color:#0B1B45; font-weight:700; text-align:right}
@media (max-width:560px){ .tk-top{flex-direction:column} .tk-topics{grid-template-columns:minmax(0,1fr)} .tk-row{grid-template-columns:auto minmax(0,1fr)} .tk-row > .sj-pill{grid-column:2; justify-self:start} .tk-bubble{max-width:100%} }
.phone .tk-top{flex-direction:column} .phone .tk-topics{grid-template-columns:minmax(0,1fr)} .phone .tk-row{grid-template-columns:auto minmax(0,1fr)} .phone .tk-row > .sj-pill{grid-column:2; justify-self:start} .phone .tk-bubble{max-width:100%}
/* My profile restyled in the look of the updated screens (owner, 27 Oct 2026, 19:45) */
.dgrid.mp-grid > .dcol > :last-child{flex-grow:0}
.mp-top{display:flex; align-items:center; gap:16px}
.mp-avatar{flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#22D3C5; color:#0B1B45; font-size:24px; font-weight:800; box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.mp-name{font-size:34px}
.mp-tile{font-size:17px !important; line-height:1.25 !important; overflow-wrap:anywhere; word-break:normal}
.mp-card{gap:4px}
.mp-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0; border-top:1px solid #EEF2F8}
.mp-card > .bw-k + .mp-row{border-top:0}
.mp-ico{display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:#EAF0FA; color:#1C3C77; flex:none}
.mp-ico-alt{background:#FDEEF0; color:#B3122B}
.mp-k{font-size:12px; font-weight:700; color:#5A6A8A; text-transform:uppercase; letter-spacing:.06em}
.mp-v{font-size:15.5px; color:#0B1B45; word-break:break-word}
.mp-s{font-size:12.5px; color:#5A6A8A; line-height:1.4}
.mp-btn{text-decoration:none}
.mp-signins{display:flex; flex-direction:column; margin-top:6px}
.mp-si{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-top:1px dashed #EEF2F8; font-size:13.5px}
.mp-si:first-child{border-top:0}
.mp-si-ico{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#F3F5F9; color:#5A6A8A}
.mp-si.is-here .mp-si-ico{background:#E6F7F4; color:#0B8F84}
.mp-si-t{color:#0B1B45; font-weight:600}
.mp-si-d{color:#5A6A8A; font-size:12.5px; white-space:nowrap}
.mp-warn{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; padding:12px 14px; border-radius:12px; background:#FFF9EC; border:1px solid #F6E2B3; font-size:13px; line-height:1.45; color:#5C3B00}
.mp-warn form{flex:none; margin:0}
.mp-switchrow{display:flex; align-items:center; justify-content:space-between; gap:14px}
.mp-switch{flex:none; display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:999px; border:1.5px solid #DCE3EE; background:#F3F5F9; font-weight:800; font-size:13px; color:#5A6A8A; cursor:pointer}
.mp-switch i{width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(11,27,69,.25)}
.mp-switch.is-on{flex-direction:row-reverse; padding:4px 4px 4px 12px; background:#1C3C77; border-color:#1C3C77; color:#fff}
.mp-link{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid #E3E8F1; background:#F9FAFD; text-decoration:none; color:inherit}
.mp-link:hover{border-color:#1C3C77; background:#fff}
.mp-link b{font-size:14px; color:#0B1B45}
.mp-chev{font-size:20px; color:#8A96AE}
.mp-form{gap:14px}
@media (max-width:560px){ .mp-name{font-size:26px} .mp-avatar{width:52px; height:52px; font-size:20px} .mp-row{grid-template-columns:auto minmax(0,1fr)} .mp-row > .mp-btn{grid-column:2; justify-self:start} .mp-warn{flex-direction:column; align-items:flex-start} }
.phone .mp-name{font-size:26px} .phone .mp-avatar{width:52px; height:52px; font-size:20px} .phone .mp-row{grid-template-columns:auto minmax(0,1fr)} .phone .mp-row > .mp-btn{grid-column:2; justify-self:start} .phone .mp-warn{flex-direction:column; align-items:flex-start}
@media (max-width:560px){ .mp-tile{font-size:13.5px !important} }
.phone .mp-tile{font-size:13.5px !important}
/* Staff sign-in (A-01 to A-03), in the look of the candidate's Sign in card (M-01), on PTA navy, without the candidate picture (28 Oct 2026) */
.sa-wrap{--u:min(1px, calc(100vh / 863)); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:calc(40 * var(--u)) 16px;
background:
radial-gradient(60% 50% at 100% 0%, rgba(34,211,197,.20) 0%, rgba(34,211,197,0) 70%),
radial-gradient(60% 45% at 0% 100%, rgba(84,140,228,.32) 0%, rgba(84,140,228,0) 75%),
linear-gradient(180deg, #012463 0%, #0B1B45 100%)}
.sa-col{width:100%; max-width:calc(560 * var(--u)); display:flex; flex-direction:column; align-items:center; gap:calc(20 * var(--u))}
.sa-logo{height:calc(54 * var(--u)); width:auto; display:block}
.sa-kicker{margin:0; font-size:calc(13 * var(--u)); font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:#22D3C5}
.sa-wrap .si-card{max-width:none; background:#fff; border-color:#fff; box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(2,10,40,.35)}
.sa-wrap .si-lede{font-size:calc(18 * var(--u))}
.sa-back{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:14px; font-weight:700; text-decoration:none}
.sa-back:hover{text-decoration:underline}
.sa-foot{margin:0; display:flex; align-items:center; justify-content:center; gap:8px; font-size:calc(14 * var(--u)); color:#A9CFF3; text-align:center}
.sa-foot svg{width:16px; height:16px; flex:none}
.si-card .si-otp{display:flex; flex-direction:column; margin-top:calc(22 * var(--u))}
.si-card .si-otp .otp input{height:calc(60 * var(--u)); background:#F0F7FE; border-color:#C8D5EC}
.si-card .si-meta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:calc(14 * var(--u)); font-size:calc(15 * var(--u)); color:#5A6A8A}
.si-card .si-meta button{border:0; background:none; font:inherit; font-weight:700; color:var(--navy); cursor:pointer; padding:0}
.si-card .si-meta button:hover{text-decoration:underline}
@media (max-width:560px){
.sa-wrap{--u:.85px; align-items:flex-start; padding-top:32px}
.sa-wrap .si-card{padding:28px 20px 24px; border-radius:22px}
.sa-wrap .si-title{font-size:40px}
}
/* Admin side in the card look of the finished candidate screens (28 Oct 2026): the navy hero, white cards with a teal top edge,
small teal capital headings, pills and link rows. Shared by every restyled staff screen. Class names start with "stf-", never "ad-": ad blockers hide "ad-" elements (28 Oct 2026). */
.dgrid.stf-grid > .dcol > :last-child{flex-grow:0}
.stf-k{color:#0B8F84 !important}
.stf-filters{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.stf-tabs{display:flex; gap:6px; flex-wrap:wrap}
.stf-tabs a{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid #DCE2EC; background:#fff; font-size:13.5px; font-weight:700; color:#1C3C77; text-decoration:none}
.stf-tabs a:hover{border-color:#1C3C77}
.stf-tabs a[aria-current]{background:#1C3C77; border-color:#1C3C77; color:#fff}
.stf-tabs a b{font-size:12px; padding:1px 7px; border-radius:999px; background:rgba(34,211,197,.18); color:inherit}
.stf-select{height:40px; border-radius:999px; border:1px solid #DCE2EC; background:#fff; padding:0 14px; font:inherit; font-size:13.5px; font-weight:700; color:#1C3C77}
.stf-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:12px; border:1px solid #E3E8F1; background:#F9FAFD; text-decoration:none; color:inherit}
a.stf-row:hover{border-color:#1C3C77; background:#fff}
.stf-row.is-late{border-color:#F3B9C3; background:#FFF7F8}
.stf-row .stf-t{font-size:14.5px; color:#0B1B45}
.stf-row .stf-s{font-size:13.5px; color:#33415C; line-height:1.4}
.stf-row .stf-end{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.stf-row .stf-amt{font-size:15px; font-weight:800; color:#0B1B45; white-space:nowrap}
.stf-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:#EAF0FA; color:#1C3C77}
.stf-ico.is-late{background:#FDEEF0; color:#B3122B}
.stf-ico.is-ok{background:#E6F7F4; color:#0B8F84}
.stf-kv{display:grid; grid-template-columns:170px minmax(0,1fr); gap:10px 16px; margin:0}
.stf-kv dt{font-size:13px; font-weight:700; color:#5A6A8A}
.stf-kv dd{margin:0; font-size:14px; line-height:1.45; color:#0B1B45}
.stf-check{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:12px; border:1.5px solid #E3E8F1; background:#F9FAFD; cursor:pointer; font-size:14px; color:#0B1B45}
.stf-check:has(input:checked){border-color:#22D3C5; background:#F0FBF9}
.stf-check input{margin-top:3px; accent-color:#0B8F84}
.stf-shot{display:block; width:100%; border-radius:12px; border:1px solid #E3E8F1}
.stf-sticky{position:sticky; top:12px}
.stf-empty{padding:14px; border-radius:12px; background:#F3F5F9; color:#5A6A8A; font-size:14px}
.stf-money{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
@media (max-width:1100px){ .dgrid.stf-grid{grid-template-columns:minmax(0,1fr)} .stf-sticky{position:static} }
@media (max-width:760px){
.stf-kv{grid-template-columns:minmax(0,1fr); gap:2px} .stf-kv dd{margin-bottom:10px}
.stf-row{grid-template-columns:minmax(0,1fr) auto} .stf-row > .stf-ico{display:none}
.hm-hero .sw-stats.mm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stf-money{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the same inside the phone frame of the design screens */
.phone .dgrid.stf-grid{grid-template-columns:minmax(0,1fr)} .phone .stf-sticky{position:static}
.phone .stf-kv{grid-template-columns:minmax(0,1fr); gap:2px} .phone .stf-kv dd{margin-bottom:10px}
.phone .stf-row{grid-template-columns:minmax(0,1fr) auto} .phone .stf-row > .stf-ico{display:none}
.phone .hm-hero .sw-stats.mm-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .phone .stf-money{grid-template-columns:repeat(2,minmax(0,1fr))}
.phone .hm-hero .hm-big{font-size:30px}
.stf-msg{padding:12px 14px; border-radius:12px; background:#F3F5F9; border:1px solid #E3E8F1}
.stf-msg.is-staff{background:#EAF0FA; border-color:#C7D1F1}
.stf-msg.is-note{background:#FFF8E6; border:1px dashed #D9A400}
.stf-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.stf-tile{position:relative; display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:12px; border:1px solid #E3E8F1; background:#F9FAFD; text-decoration:none; color:inherit}
a.stf-tile:hover{border-color:#1C3C77; background:#fff}
.stf-tile > b{font-size:14.5px; color:#0B1B45; padding-right:34px}
.stf-tile .stf-wait{font-size:15px; font-weight:700; color:#0B1B45}
.stf-tile .link-strong{margin-top:auto; padding-top:4px}
.stf-tile.is-late{border-color:#F3B9C3; background:#FFF7F8}
.stf-tile.is-late .stf-wait{color:#B3122B}
.stf-tile.is-parked{opacity:.55}
.stf-tno{position:absolute; top:12px; right:12px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#1C3C77; color:#fff; font-size:12px; font-weight:800}
.stf-tile.is-parked .stf-tno{background:#8592AE}
.stf-row.is-plain{grid-template-columns:minmax(0,1fr) auto}
.stf-tile .stf-wait.is-zero, .stf-tile.is-late .stf-wait.is-zero{color:#55607A; font-weight:600}
.sj-pill.stf-dur{text-transform:none; letter-spacing:0}
/* Staff card look for every staff page not yet given its own markup (28 Oct 2026): the content pages and the rest.
Scoped to staff pages only (body.admin without .cand-page); the candidate screens are untouched. */
body.admin:not(.cand-page) .dbody .card.lg:not(.st-practice), body.admin:not(.cand-page) .dbody .dcol > .card:not(.st-practice){padding:20px; border-radius:16px; border-top:4px solid #22D3C5}
body.admin:not(.cand-page) .dbody .card-title{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#0B8F84}
body.admin:not(.cand-page) .dbody .pill{gap:6px; height:auto; padding:4px 10px 4px 8px; border-radius:999px; border:1px solid; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1}
body.admin:not(.cand-page) .dbody .pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0}
body.admin:not(.cand-page) .dbody .pill.teal, body.admin:not(.cand-page) .dbody .pill.ok{background:#E3F7F3; border-color:#9FE5DC; color:#0B6B63}
body.admin:not(.cand-page) .dbody .pill.navy{background:#EEF1FC; border-color:#C7D1F1; color:#2A3F86}
body.admin:not(.cand-page) .dbody .pill.red{background:#FDEEF0; border-color:#F3B9C3; color:#B3122B}
body.admin:not(.cand-page) .dbody .pill.grey{background:#F3F5F9; border-color:#DCE2EC; color:#5A6A8A}
body.admin:not(.cand-page) .dbody .pill.amber{background:#FFF6E3; border-color:#F2D58F; color:#7A4A00}
body.admin:not(.cand-page) .dbody .pill.dark{background:#0B1B45; border-color:#0B1B45; color:#fff}
body.admin:not(.cand-page) .dbody .kpi{border-radius:14px; border-top:4px solid #22D3C5; padding:14px 16px}
body.admin:not(.cand-page) .dbody .kpi b{font-size:26px; color:#0B1B45}
body.admin:not(.cand-page) .dbody .tabs button, body.admin:not(.cand-page) .dbody .tabs a{border-radius:999px; border-color:#DCE2EC; color:#1C3C77; font-size:13.5px}
body.admin:not(.cand-page) .dbody .tabs [aria-selected="true"], body.admin:not(.cand-page) .dbody .tabs [aria-current="true"]{background:#1C3C77; border-color:#1C3C77; color:#fff}
body.admin:not(.cand-page) .dbody .table-wrap{border-radius:14px}
body.admin:not(.cand-page) .dtop .btn{white-space:nowrap}
body.admin:not(.cand-page) .dbody table.t thead th{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#5A6A8A}
/* 28 Oct 2026, 22:28 and 22:32 (owner): revision and review from week 37 in one line: the weekly loop on all the LOs */
.rv-line{margin:10px 0 4px; padding:12px 14px; border-radius:14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:linear-gradient(135deg,#0B1B45 0%,#13276C 100%); box-shadow:0 10px 24px -16px rgba(11,27,69,.6)}
.rp-path .rv-line .rv-c{padding:6px 12px; border-radius:999px; font-size:13px; line-height:1.2; font-weight:700; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); white-space:nowrap}
.rp-path .rv-line .rv-mock{color:#5A3A00; background:#FFD25C; border-color:#FFD25C}
.rv-line .rv-a{font-style:normal; font-size:15px; font-weight:800; color:#7FE9DF}
.rv-line .rv-rep{font-size:17px}