@media (max-width:1120px){
  .kpis,.quick,.library,.statsGrid,.setup,.uploadWrap{grid-template-columns:1fr 1fr}
  .practiceLayout{grid-template-columns:1fr}
  .sideCard{position:static}
}
@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .mobileNav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:8px;justify-content:space-between;box-shadow:var(--shadow-lg)}
  .mobileNav button{flex:1;border:0;background:transparent;padding:10px 6px;border-radius:12px;color:var(--muted);font-size:12px;font-weight:700}
  .mobileNav button.active{background:#eff6ff;color:var(--blue2)}
  .topbar{padding:0 18px}
  .content{padding:24px 18px 96px}
}
@media (max-width:720px){
  .kpis,.quick,.library,.statsGrid,.setup,.uploadWrap,.formGrid,.modeGrid{grid-template-columns:1fr}
  .hero{padding:24px}
  .hero h1{font-size:34px}
  .qTitle{font-size:20px}
  .qGrid{grid-template-columns:repeat(4,1fr)}
  .barRow{grid-template-columns:1fr;gap:6px}
}
@media (max-width:520px){
  .sectionHead{display:block}
  .topMeta{display:none}
  .qGrid{grid-template-columns:repeat(3,1fr)}
  .actions,.qFooter,.searchRow{flex-direction:column;align-items:stretch}
  .btn{width:100%;justify-content:center}
}

/* Professional refinement layer */
:root{--navy:#102a56;--navy2:#173b75;--soft:#f7faff;--soft-blue:#eef5ff;--focus:0 0 0 4px rgba(37,99,235,.12)}
body{font-size:14px;letter-spacing:-.005em}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--focus)}
.sidebar{padding:26px 18px 22px;box-shadow:10px 0 34px rgba(25,60,120,.035)}
.brand{padding:1px 10px 30px}
.mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#1f5bd8,#2b76ee);box-shadow:0 10px 25px rgba(37,99,235,.23);position:relative;overflow:hidden}
.mark:after{content:"";position:absolute;width:25px;height:25px;border:1px solid rgba(255,255,255,.32);border-radius:50%;right:-11px;top:-9px}
.mark span{font-size:18px;line-height:1;font-weight:900;position:relative;z-index:1}
.brand strong{font-size:18px;color:#12264c}.brand small{font-size:10.5px;letter-spacing:.01em}
.nav{gap:5px}.nav button{padding:10px 11px;font-weight:650;letter-spacing:-.01em}.nav button.active{font-weight:750}
.nav .ico{width:20px;height:20px;display:grid;place-items:center}.nav .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sideFoot{bottom:20px}.privacy{display:flex;gap:9px;align-items:flex-start;background:linear-gradient(180deg,#fbfdff,#f3f7ff);padding:12px 11px}.privacyIcon{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:8px;background:#e8f1ff;color:var(--blue2);font-weight:900;font-size:12px}
.topbar{height:76px;padding:0 34px}.topKicker{font-size:9px;letter-spacing:.16em;color:#91a2bd;font-weight:850;margin-bottom:1px}.topTitle{font-size:15px;line-height:1.1}.topMeta{gap:8px}.pill{font-size:11px;padding:7px 11px;box-shadow:0 1px 2px rgba(17,38,76,.03)}
.content{max-width:1280px;padding-top:30px}
.hero{padding:0;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 55%,#f1f7ff 100%);border-color:#dbe8fb;box-shadow:0 24px 60px rgba(34,78,150,.11)}
.hero:before{background:linear-gradient(100deg,transparent 54%,rgba(37,99,235,.035))}
.hero:after{width:360px;height:360px;right:-155px;top:-185px;background:radial-gradient(circle,rgba(37,99,235,.13),transparent 67%)}
.heroInner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:46px;align-items:center;padding:46px 48px;position:relative;z-index:2}
.heroCopy{max-width:650px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.15em}.eyebrowDot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(37,99,235,.08)}
.hero h1{font-size:clamp(38px,4.5vw,58px);line-height:1.015;margin:14px 0 16px;letter-spacing:-.058em;color:#102750}.hero h1 span{color:#2b67df}.hero p{font-size:15.5px;line-height:1.7;color:#5a6f91;max-width:620px;margin-bottom:25px}
.hero .btn{min-height:46px;padding:12px 17px}.btnArrow{font-size:17px;margin-left:8px}.btn.secondary{background:#fff;border-color:#cddcf3;color:#24426f}.btn.secondary:hover{background:#f8fbff}
.trustRow{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:#6e809d;font-size:10.5px;font-weight:650}.trustRow span{display:flex;align-items:center;gap:4px}.trustRow span::first-letter{color:#2b67df}
.heroPreview{border:1px solid #dbe6f7;border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 24px 52px rgba(33,73,140,.12);padding:19px 19px 17px;transform:rotate(.4deg)}
.previewTop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.previewTop small{display:block;font-size:8px;letter-spacing:.13em;color:#91a3bf;font-weight:850;margin-bottom:3px}.previewTop strong{display:block;color:#142c56;font-size:14px}.previewBadge{font-size:9px;font-weight:850;color:#156b3c;background:#e9f9f0;border:1px solid #c9efd9;border-radius:999px;padding:5px 8px}
.previewStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 16px}.previewStats>div{padding:10px 10px 9px;border:1px solid #e6edf8;background:#fbfdff;border-radius:12px}.previewStats span{display:block;color:#8a9ab4;font-size:8.5px;margin-bottom:1px}.previewStats b{font-size:15px;color:#17345f}.previewLine{height:1px;background:#edf2f9;margin:3px 0 13px}.previewLabel{display:flex;justify-content:space-between;color:#7a8ca9;font-size:9px;font-weight:700}.miniBars{display:grid;gap:9px;margin-top:11px}.miniBars>div{display:grid;grid-template-columns:88px 1fr 34px;gap:8px;align-items:center;font-size:9px;color:#6e809c}.miniBars i{height:6px;background:#edf3fb;border-radius:999px;overflow:hidden}.miniBars em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2b67df,#5e92ee)}.miniBars b{font-size:9px;color:#40577e;text-align:right}.previewFoot{margin-top:15px;border-top:1px solid #edf2f9;padding-top:11px;color:#7284a1;font-size:9.5px;display:flex;gap:7px;align-items:center}.pulse{width:7px;height:7px;border-radius:50%;background:#22a861;box-shadow:0 0 0 4px rgba(34,168,97,.09)}
.kpis{gap:14px;margin:16px 0 0}.card{box-shadow:0 12px 32px rgba(35,76,142,.065)}.kpi{padding:17px 18px}.kpi .label{text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:800}.kpi .value{font-size:27px;margin-top:5px}.kpi .sub{font-size:10px}.section{margin-top:28px}.sectionHead{margin-bottom:12px}.sectionHead h2{font-size:18px}.sectionHead p{font-size:11px}
.quick{gap:13px}.quickCard{padding:16px 16px 15px;min-height:132px;transition:.16s transform,.16s box-shadow,.16s border-color}.quickCard:hover{transform:translateY(-2px);border-color:#c8dafa;box-shadow:0 18px 36px rgba(35,76,142,.09)}.quickCard strong{font-size:15px;color:#17345f}.quickCard p{font-size:11px;line-height:1.5}.quickCard .num{font-size:44px;top:9px;color:rgba(37,99,235,.065)}
.testCard{transition:.16s transform,.16s border-color,.16s box-shadow}.testCard:hover{transform:translateY(-2px);border-color:#cadcf8;box-shadow:0 18px 38px rgba(35,76,142,.09)}
.badge,.chip{letter-spacing:.015em;font-weight:750}
.drop{background:linear-gradient(180deg,#fff,#f8fbff);border-color:#b8d0f7;min-height:325px}.drop:hover{border-color:#7ea9ef}.dropIcon{width:60px;height:60px;border-radius:18px;background:linear-gradient(145deg,#edf5ff,#e5f0ff)}.dropIcon svg{width:26px;height:26px;fill:none;stroke:#2c66d7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.drop h2{font-size:21px}.drop p{font-size:12px;line-height:1.65}.notice{padding:22px}.notice h3{font-size:14px}.notice li{font-size:12px;line-height:1.55}.notice ul{padding-left:19px}
.panelPad{padding:20px}.field label{font-size:9px;letter-spacing:.09em}.input,select{min-height:43px;font-size:13px}.mode{transition:.14s;border-radius:13px}.mode:hover{border-color:#bcd2f7;background:#f7fbff}.mode strong{font-size:13px}.mode small{font-size:10.5px}
.qCard{padding:26px 28px;border-radius:24px}.qMeta{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:750}.qTitle{font-size:22px;line-height:1.46;max-width:870px}.choices{gap:9px}.choice{padding:11px 13px;min-height:60px;border-radius:14px}.choice .letter{width:36px;height:36px;border-radius:10px}.choice:focus-visible{box-shadow:var(--focus);outline:none}.explain{background:linear-gradient(180deg,#f9fbff,#f5f9ff)}.sideCard{border-radius:20px}.qDot{border-radius:10px}.resultsHero{border-radius:24px}.bankItem{transition:.12s background}.bankItem:hover{background:#f9fbff}.chart{padding:20px}
.mobileNav{box-shadow:0 16px 40px rgba(21,57,115,.18)}.mobileNav button{display:flex;flex-direction:column;gap:2px;align-items:center}.mIco{font-size:14px;line-height:1}
@media(max-width:1120px){.heroInner{grid-template-columns:1fr .82fr;gap:26px;padding:38px 34px}.hero h1{font-size:44px}.trustRow{gap:11px}.miniBars>div{grid-template-columns:80px 1fr 32px}}
@media(max-width:920px){.heroInner{grid-template-columns:1fr}.heroPreview{max-width:520px;transform:none}.heroCopy{max-width:720px}}
@media(max-width:720px){.heroInner{padding:28px 24px}.hero h1{font-size:36px}.trustRow{display:grid;gap:6px}.heroPreview{padding:16px}.previewStats{grid-template-columns:repeat(3,1fr)}.content{padding-top:20px}.topbar{height:68px}}
@media(max-width:480px){.hero h1{font-size:31px}.previewStats{grid-template-columns:1fr 1fr}.previewStats>div:last-child{grid-column:1/-1}.miniBars>div{grid-template-columns:76px 1fr 30px}.topbar{padding:0 16px}}


/* Practice selection and layout */
.setup{grid-template-columns:minmax(0,1fr) 280px;align-items:start}
.modeGrid{gap:12px}
.mode{position:relative;text-align:left;min-height:88px;padding:18px;border:2px solid #dbe5f5;background:#fff;color:var(--text);transition:background .15s,border-color .15s,box-shadow .15s}
.mode strong{font-size:15px;padding-right:24px}
.mode small{display:block;margin-top:5px;font-size:12px;line-height:1.45}
.mode:hover{border-color:#8eb4f8;background:#f5f9ff}
.mode.active,.mode.active:hover,.mode[aria-pressed="true"]{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.2)}
.mode.active small{color:#e7efff}
.mode.active:after{content:'✓';position:absolute;top:17px;right:16px;color:#fff;font-weight:900;font-size:17px}
#resumeSessionBox{padding:14px;border:1px solid var(--line);border-radius:14px;background:#f7faff}
dialog::backdrop{background:rgba(16,32,63,.45);backdrop-filter:blur(3px)}
dialog .actions{margin-top:22px}
@media(max-width:1050px){.setup{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.modeGrid{grid-template-columns:1fr 1fr}.mode{padding:14px;min-height:90px}.mode strong{font-size:14px}}
@media(max-width:420px){.modeGrid{grid-template-columns:1fr}}
/* Leave room below mobile navigation for the hosting badge. */
@media(max-width:880px){.mobileNav{bottom:58px}.content{padding-bottom:144px}}

.studyResources summary{cursor:pointer;font-weight:750;color:var(--blue2)}
.studyResources p,.studyResources li{font-size:12px;line-height:1.6}
.studyResources a{color:var(--blue2)}
.studyResources li{margin-bottom:8px}

/* Keep the question palette from stretching the question card to 100 rows. */
.practiceLayout{align-items:start}
.qCard{min-height:0}
.qFooter{margin-top:22px}
.sideCard{display:flex;flex-direction:column;max-height:calc(100dvh - 118px)}
.sideCard .timer{font-size:30px;line-height:1.2;margin-top:6px}
.sideCard .qGrid{min-height:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;padding:3px;grid-auto-rows:38px;flex-shrink:1}
.sideCard .qDot{height:38px;aspect-ratio:auto}
.sideCard #submitEarly{flex-shrink:0}
.examNote{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.choice.selected{border-color:#2563eb;box-shadow:inset 0 0 0 1px #2563eb}
.choice.selected .letter{background:#2563eb;color:#fff}
.choice.correct .letter,.choice.wrong .letter{background:#eef4ff;color:var(--blue2)}
@media(max-width:1120px){.sideCard{max-height:none}.sideCard .qGrid{max-height:224px;grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:480px){.sideCard .qGrid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Large, readable session controls, including native Safari select elements. */
.sessionFields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#f8fbff}
.sessionFields .pdfField{grid-column:1/-1}
.sessionFields .field{min-width:0}
.sessionFields .field label{font-size:15px;font-weight:750;color:var(--text);margin-bottom:9px;letter-spacing:0}
.sessionFields select,.sessionFields .input{appearance:none;-webkit-appearance:none;display:block;min-height:56px;height:56px;font-size:16px;line-height:1.4;padding:13px 42px 13px 15px;border:2px solid #c4d5ee;border-radius:12px;background-color:#fff;color:var(--text);text-overflow:ellipsis}
.sessionFields select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.sessionFields select:focus-visible,.sessionFields .input:focus-visible{border-color:#2563eb;box-shadow:0 0 0 4px #dbeafe;outline:none}
.sessionFields select:disabled{opacity:1;cursor:default;background-color:#eaf0f8;color:#516480;border-color:#d3deee}
.sessionFields small,.sessionFields #sourceNote{display:block;margin:8px 0 0;color:#516480;font-size:13px;line-height:1.5}
.examNotice{margin-top:20px;padding:18px 20px;border:1px solid #9cbff5;border-left:4px solid #2563eb;border-radius:12px;background:#eff6ff;color:#19375e}
.examNotice strong{display:block;font-size:16px}
.examNotice p{margin:8px 0 0;font-size:14px;line-height:1.6}
.examNote{padding:12px 14px;border-radius:10px;background:#eff6ff;color:#19375e;font-size:14px}
@media(max-width:600px){.sessionFields{grid-template-columns:minmax(0,1fr);padding:16px;gap:18px}}
