/* ============================================================
   STEP TO TOPPERS — DESKTOP SOFTWARE SHELL v12.7
   IMPORTANT: Mobile/tablet-touch UI is intentionally untouched.
   Desktop mode activates only on wide, precise-pointer devices.
   ============================================================ */
.stt-desktop-page-context{display:none}

@media (min-width:901px) and (hover:hover) and (pointer:fine){
  :root{
    --stt-desktop-sidebar:272px;
    --stt-desktop-header:78px;
    --stt-desktop-content-max:1500px;
    --stt-desktop-gap:22px;
    --stt-desktop-panel:#ffffff;
    --stt-desktop-canvas:#eef2f7;
    --stt-desktop-line:#e2e8f0;
    --stt-desktop-text:#172033;
    --stt-desktop-muted:#6b7280;
    --stt-desktop-shadow:0 10px 30px rgba(15,23,42,.065);
    --stt-desktop-shadow-soft:0 5px 16px rgba(15,23,42,.045);
  }

  html,body{height:100%!important;min-height:100%!important}
  body{
    display:block!important;
    width:100%!important;
    min-width:901px!important;
    margin:0!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 100% 0,color-mix(in srgb,var(--theme-accent) 8%,transparent) 0,transparent 31%),
      var(--stt-desktop-canvas)!important;
    color:var(--stt-desktop-text)!important;
  }

  /* Main application workspace. */
  body > .app-container,
  body .app-container{
    width:calc(100vw - var(--stt-desktop-sidebar))!important;
    max-width:none!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0 0 0 var(--stt-desktop-sidebar)!important;
    padding-top:var(--stt-desktop-header)!important;
    padding-bottom:0!important;
    border:0!important;
    overflow:hidden!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body .app-container > main{
    width:100%!important;
    max-width:var(--stt-desktop-content-max)!important;
    height:calc(100vh - var(--stt-desktop-header))!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:26px 30px 34px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
  }
  body .app-container > main::-webkit-scrollbar{width:10px}
  body .app-container > main::-webkit-scrollbar-track{background:transparent}
  body .app-container > main::-webkit-scrollbar-thumb{background:#cbd5e1;border:3px solid transparent;background-clip:padding-box;border-radius:999px}

  /* Fixed software toolbar. Existing brand/bell buttons are preserved. */
  .top-main-header{
    left:var(--stt-desktop-sidebar)!important;
    right:0!important;
    top:0!important;
    width:auto!important;
    max-width:none!important;
    height:var(--stt-desktop-header)!important;
    min-height:var(--stt-desktop-header)!important;
    margin:0!important;
    padding:12px 22px!important;
    display:grid!important;
    grid-template-columns:auto minmax(220px,1fr) 45px!important;
    gap:20px!important;
    background:rgba(255,255,255,.94)!important;
    border-bottom:1px solid var(--stt-desktop-line)!important;
    box-shadow:0 4px 18px rgba(15,23,42,.055)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    z-index:18000!important;
  }
  .top-main-header>.tm-menu-btn{display:none!important}
  .top-main-header .tm-brand{
    justify-content:flex-start!important;
    width:auto!important;
    min-width:280px!important;
    padding:0!important;
  }
  .top-main-header .tm-brand img{width:46px!important;height:46px!important;flex-basis:46px!important}
  .top-main-header .tm-title{max-width:320px!important;font-size:18px!important}
  .top-main-header .tm-tagline{max-width:320px!important;font-size:8px!important;letter-spacing:1.7px!important}
  .top-main-header>.tm-bell-btn{justify-self:end!important}
  .stt-desktop-page-context{
    display:flex!important;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding-left:20px;
    border-left:1px solid var(--stt-desktop-line);
  }
  .stt-desktop-page-context span{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--stt-desktop-muted);line-height:1.1}
  .stt-desktop-page-context strong{font-size:16px;font-weight:900;color:var(--stt-desktop-text);line-height:1.25;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* Mobile drawer becomes a persistent software sidebar. */
  .stt-overlay{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--stt-desktop-sidebar)!important;
    height:100vh!important;
    background:transparent!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:19000!important;
  }
  .stt-drawer{
    position:absolute!important;
    inset:0!important;
    width:var(--stt-desktop-sidebar)!important;
    max-width:none!important;
    height:100vh!important;
    padding:18px 16px 20px!important;
    transform:none!important;
    border-radius:0!important;
    background:var(--blue-grad-vert)!important;
    box-shadow:12px 0 32px rgba(15,23,42,.13)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .stt-drawer::-webkit-scrollbar{width:6px}.stt-drawer::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}
  .stt-drawer .drawer-close{display:none!important}
  .stt-drawer .drawer-top{padding:4px 4px 17px!important;margin-bottom:0!important}
  .stt-drawer .drawer-brand-icon{width:46px!important;height:46px!important;flex-basis:46px!important;border-radius:13px!important}
  .stt-drawer .drawer-brand-icon img{width:39px!important;height:39px!important}
  .stt-drawer .drawer-brand h3{font-size:14px!important;max-width:175px!important}
  .stt-drawer .drawer-brand p{font-size:7.5px!important;max-width:175px!important}
  .stt-drawer .drawer-quick{grid-template-columns:1fr!important;gap:7px!important;margin:14px 0 17px!important}
  .stt-drawer .drawer-quick a{height:44px!important;justify-content:flex-start!important;padding:0 13px!important;border-radius:11px!important;background:rgba(255,255,255,.10)!important}
  .stt-drawer .drawer-label{margin:0 9px 7px!important;font-size:8px!important;letter-spacing:1.7px!important}
  .stt-drawer .drawer-nav{gap:3px!important}
  .stt-drawer .drawer-nav a{
    min-height:45px!important;
    grid-template-columns:35px minmax(0,1fr) 13px!important;
    gap:8px!important;
    padding:5px 8px!important;
    border-radius:11px!important;
    font-size:11.5px!important;
  }
  .stt-drawer .drawer-nav .drawer-icon{width:35px!important;height:35px!important;border-radius:10px!important}
  .stt-drawer .drawer-nav a.stt-desktop-active{
    background:#fff!important;
    color:var(--theme-end)!important;
    box-shadow:0 7px 18px rgba(15,23,42,.16)!important;
  }
  .stt-drawer .drawer-nav a.stt-desktop-active .drawer-icon{
    background:color-mix(in srgb,var(--theme-accent) 12%,#fff)!important;
    border-color:color-mix(in srgb,var(--theme-accent) 18%,#fff)!important;
  }
  .stt-drawer .drawer-nav a.stt-desktop-active .drawer-icon i,
  .stt-drawer .drawer-nav a.stt-desktop-active .drawer-chevron{color:var(--theme-end)!important}
  .stt-drawer .drawer-access{margin-top:15px!important}
  .stt-drawer .drawer-secure{margin-top:14px!important;padding-top:12px!important}

  /* Mobile footer is replaced by the persistent left navigation on desktop. */
  .fixed-footer{display:none!important}
  .pwa-install-fab{right:22px!important;bottom:20px!important}
  .notice-sheet{
    left:auto!important;
    right:20px!important;
    top:88px!important;
    bottom:auto!important;
    width:min(380px,calc(100vw - var(--stt-desktop-sidebar) - 40px))!important;
    max-height:calc(100vh - 110px)!important;
    transform:translateY(-8px)!important;
    border-radius:16px!important;
    box-shadow:0 22px 55px rgba(15,23,42,.18)!important;
  }
  .notice-sheet.open{transform:translateY(0)!important}

  /* Shared desktop card treatment. Never changes existing button geometry/colors. */
  body :is(.page-head,.section-head,.section-title-bar){max-width:none!important}
  body :is(.test-card,.result-card,.history-card,.subject-card,.trend-card,.type-card,.card,.section-card,.edit-card,.weak-topic-card,.review-card,.snapshot-card){
    box-shadow:var(--stt-desktop-shadow-soft);
  }

  /* DASHBOARD */
  .page-dashboard .welcome{min-height:190px!important;border-radius:18px!important;padding:24px!important}
  .page-dashboard .student-photo{width:96px!important;height:96px!important;flex-basis:96px!important}
  .page-dashboard .welcome-copy h1{font-size:28px!important}
  .page-dashboard .welcome-copy p{font-size:11px!important}
  .page-dashboard .student-tag{font-size:9px!important;padding:6px 10px!important}
  .page-dashboard .stats{border-radius:16px!important;padding:15px 8px!important;margin-top:16px!important}
  .page-dashboard .stat{padding:5px 8px!important}
  .page-dashboard .stat-icon{width:44px!important;height:44px!important;font-size:17px!important}
  .page-dashboard .stat strong{font-size:23px!important}
  .page-dashboard .stat b{font-size:9px!important}.page-dashboard .stat span{font-size:8px!important}
  .page-dashboard .section-head{margin:22px 3px 11px!important}
  .page-dashboard .section-head h2{font-size:14px!important}.page-dashboard .section-head a{font-size:10px!important}
  .page-dashboard .quick{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}
  .page-dashboard .quick a{min-height:112px!important;border-radius:15px!important}
  .page-dashboard .quick-icon{width:46px!important;height:46px!important;border-radius:13px!important;font-size:18px!important}
  .page-dashboard .quick span:last-child{font-size:9px!important}
  .page-dashboard .practice{grid-template-columns:minmax(0,1fr) 180px!important;min-height:180px!important;border-radius:17px!important;padding:20px!important}
  .page-dashboard .practice h3{font-size:18px!important}.page-dashboard .practice p{font-size:10px!important}.page-dashboard .practice-subject{font-size:11px!important}.page-dashboard .chapter-label{font-size:9px!important}
  .page-dashboard .practice-side{height:142px!important;border-radius:15px!important}
  .page-dashboard .subjects{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  .page-dashboard .subject{min-height:142px!important;border-radius:15px!important;padding:15px!important}
  .page-dashboard .test-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .page-dashboard .next-test{margin:0!important;border-radius:15px!important}

  /* TEST LIBRARY */
  .page-tests .practice-title{font-size:24px!important;margin-bottom:20px!important}
  .page-tests .series-tabs{max-width:580px!important;grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .page-tests .subject-picker{max-width:900px!important}
  .page-tests .subject-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .page-tests .subject-panel-card{border-radius:18px!important;padding:16px!important}
  .page-tests .series-panel.active{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:start!important}
  .page-tests .test-card{margin-bottom:0!important;border-radius:17px!important;min-width:0!important;height:100%!important}
  .page-tests .compact-meta-row{gap:8px!important}
  .page-tests .chapter-focus{grid-column:1/-1!important}
  .page-tests .chapter-focus-card{border-radius:18px!important;padding:20px!important}
  .page-tests .auth-gate,.page-tests .empty-card{grid-column:1/-1!important}

  /* EXAM CATALOG / BATCHES */
  .page-batches .tabs{max-width:none!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
  .page-batches .list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}
  .page-batches .batch{margin:0!important;height:100%!important;border-radius:16px!important}
  .page-batches .exam-detail-sheet{width:min(720px,calc(100vw - var(--stt-desktop-sidebar) - 60px))!important;max-width:720px!important;border-radius:22px!important}

  /* PROFILE / EDIT PROFILE */
  .page-profile main{max-width:1180px!important}
  .page-profile .profile-hero{border-radius:20px!important;padding:24px!important}
  .page-profile .meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .page-profile .section-card{border-radius:18px!important;padding:20px!important}
  .page-profile .action-card{min-height:90px!important;border-radius:15px!important}
  .page-edit-profile main{max-width:900px!important}
  .page-edit-profile .edit-card{border-radius:20px!important;padding:24px!important}
  .page-edit-profile .field{margin-bottom:15px!important}

  /* RESULT DETAIL */
  .page-result main{max-width:1320px!important}
  .page-result .result-hero{border-radius:20px!important;padding:24px!important}
  .page-result .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)!important;gap:22px!important}
  .page-result .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .page-result .snapshot-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .page-result .weak-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .page-result .review-card{border-radius:18px!important;padding:20px!important}
  .page-result .question-box{padding:18px!important;border-radius:14px!important}
  .page-result .options-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .page-result .option-row{margin:0!important;min-height:64px!important}
  .page-result .explanation{border-radius:15px!important;padding:17px!important}
  .page-result .actions{max-width:620px!important;margin-left:auto!important;margin-right:auto!important}

  /* RESULTS / PREVIOUS / PERFORMANCE */
  body:has(.journey-tabs) .journey-tabs{max-width:620px!important;gap:10px!important}
  body:has(.result-card) main,
  body:has(.history-card) main,
  body:has(.subject-list) main{max-width:1260px!important}
  body:has(.result-card) .summary,
  body:has(.history-card) .summary{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  body:has(.result-card) main{display:block!important}
  body:has(.result-card) .result-card{border-radius:16px!important;padding:17px!important}
  body:has(.history-card) .history-card{border-radius:16px!important;padding:17px!important}
  body:has(.subject-list) .subject-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  body:has(.subject-list) .subject-card{margin:0!important;border-radius:16px!important}
  body:has(.type-grid) .type-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  body:has(.trend) .trend{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}

  /* WALLET / SYLLABUS */
  .page-wallet main{max-width:1100px!important}
  .page-wallet .wallet-hero{border-radius:20px!important;padding:24px!important}
  .page-wallet .stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .page-wallet .card{border-radius:17px!important;padding:20px!important}
  .page-syllabus main{max-width:1180px!important}
  .page-syllabus .card{border-radius:17px!important;padding:20px!important}
  .page-syllabus .chapters{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}

  /* PUBLIC HOME */
  .page-home main{max-width:1380px!important}
  .page-home .hero{border-radius:22px!important;padding:28px!important;min-height:260px!important}
  .page-home .learning-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
  .page-home .category-overview-clean{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
  .page-home .class-card{margin:0!important;height:100%!important}
  .page-home .feature-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}

  /* ========================================================
     LIVE TEST — desktop-only CBT software workspace.
     All mobile test behavior and buttons remain untouched.
     ======================================================== */
  .page-exam{overflow:hidden!important;background:#eef2f7!important}
  .page-exam .app-container{
    width:100vw!important;
    height:100vh!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    overflow:hidden!important;
    background:#f5f7fb!important;
  }
  .page-exam .exam-sticky-stack{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:330px!important;
    width:auto!important;
    max-width:none!important;
    border-radius:0!important;
    box-shadow:0 5px 18px rgba(15,23,42,.07)!important;
    z-index:1180!important;
  }
  .page-exam .exam-sticky-stack .exam-header{padding:12px 26px 8px!important}
  .page-exam .exam-header-row{max-width:1120px!important;margin:0 auto!important}
  .page-exam .q-palette-container{max-width:1120px!important;margin:0 auto 10px!important;border-radius:12px!important;padding:10px 12px!important}
  .page-exam #headerSpacer{height:128px!important}
  .page-exam #examForm{height:100vh!important}
  .page-exam .exam-body{
    position:fixed!important;
    top:128px!important;
    left:0!important;
    right:330px!important;
    bottom:68px!important;
    overflow-y:auto!important;
    padding:24px 32px!important;
    background:#f5f7fb!important;
  }
  .page-exam .question-card{
    width:min(100%,1080px)!important;
    margin:0 auto 20px!important;
    padding:24px!important;
    border-radius:16px!important;
    box-shadow:var(--stt-desktop-shadow)!important;
  }
  .page-exam .q-text{font-size:17px!important;line-height:1.85!important;margin-bottom:22px!important}
  .page-exam .options-container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .page-exam .opt-label{min-height:68px!important;border-radius:13px!important;padding:13px 15px!important}
  .page-exam .exam-footer{
    left:0!important;
    right:330px!important;
    bottom:0!important;
    width:auto!important;
    max-width:none!important;
    height:68px!important;
    padding:11px 32px!important;
    display:grid!important;
    grid-template-columns:170px 150px minmax(200px,260px)!important;
    justify-content:center!important;
    gap:12px!important;
    border-radius:0!important;
    box-shadow:0 -5px 18px rgba(15,23,42,.065)!important;
  }
  .page-exam .palette-bottom-btn{display:none!important}
  .page-exam .palette-overlay{
    position:fixed!important;
    inset:0 0 0 auto!important;
    width:330px!important;
    height:100vh!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:transparent!important;
    z-index:1170!important;
  }
  .page-exam .palette-drawer{
    position:absolute!important;
    inset:0!important;
    width:330px!important;
    max-width:none!important;
    height:100vh!important;
    transform:none!important;
    padding:20px 18px!important;
    border-left:1px solid var(--stt-desktop-line)!important;
    box-shadow:-8px 0 22px rgba(15,23,42,.06)!important;
    background:#fff!important;
  }
  .page-exam .palette-subject-tabs{margin-top:0!important}
  .page-exam .drawer-grid{grid-template-columns:repeat(5,1fr)!important;gap:9px!important}
  .page-exam .drawer-q{height:44px!important;border-radius:10px!important}
  .page-exam .palette-legend{margin-top:18px!important}
  .page-exam .hide-palette{display:none!important}
  .page-exam .test-start-modal,.page-exam .submit-modal,.page-exam .leave-test-modal{z-index:50000!important}
  .page-exam .start-card,.page-exam .modal-card,.page-exam .leave-test-card{max-width:520px!important;border-radius:20px!important}

  /* Keep modal overlays above the persistent software shell. */
  .auth-overlay,.exam-detail-overlay{z-index:50000!important}
}

/* ============================================================
   V12.7 — LIVE EXAM DESKTOP FIT + BALANCED FOOTER
   Desktop precise-pointer only. Mobile CSS above remains intact.
   ============================================================ */
.desktop-fit-screen-btn{display:none}

@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .page-exam{
    --stt-exam-palette-w:330px;
    --stt-exam-top-h:96px;
    --stt-exam-footer-h:74px;
    --stt-exam-content-max:1160px;
  }

  /* Desktop has a permanent palette at right, so the duplicate mobile
     horizontal question strip is hidden only on desktop. */
  .page-exam .q-palette-wrapper{display:none!important}

  .page-exam .exam-sticky-stack{
    right:var(--stt-exam-palette-w)!important;
    min-height:var(--stt-exam-top-h)!important;
    background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  .page-exam .exam-sticky-stack .exam-header{
    padding:10px max(24px,calc((100vw - var(--stt-exam-palette-w) - var(--stt-exam-content-max))/2)) 5px!important;
  }
  .page-exam .exam-header-row{
    max-width:var(--stt-exam-content-max)!important;
    min-height:42px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:12px!important;
  }
  .page-exam .exam-name-pill{
    min-height:40px!important;
    padding:0 4px!important;
    font-size:14px!important;
  }

  .page-exam .desktop-fit-screen-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    height:38px!important;
    min-width:116px!important;
    padding:0 13px!important;
    border-radius:10px!important;
    border:1px solid var(--border-card,#d7dee8)!important;
    background:#fff!important;
    color:#4b5563!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    cursor:pointer!important;
    box-shadow:0 3px 9px rgba(15,23,42,.05)!important;
    transition:.15s ease!important;
  }
  .page-exam .desktop-fit-screen-btn:hover{
    color:var(--brand-blue-dark)!important;
    border-color:var(--brand-blue)!important;
    background:var(--brand-soft,#f8fafc)!important;
    transform:translateY(-1px)!important;
  }
  .page-exam .desktop-fit-screen-btn.active{
    background:var(--btn-solid)!important;
    color:#fff!important;
    border-color:#fff!important;
  }
  .page-exam .timer-box{
    height:38px!important;
    min-width:122px!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:15px!important;
    padding:0 12px!important;
  }

  /* Subject row becomes the second slim toolbar line. */
  .page-exam .q-palette-container{
    width:calc(100% - 48px)!important;
    max-width:var(--stt-exam-content-max)!important;
    min-height:34px!important;
    margin:0 auto 7px!important;
    padding:5px 10px!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    box-shadow:none!important;
  }
  .page-exam .subject-fixed-row{min-height:28px!important}
  .page-exam .subject-fixed-name{font-size:11px!important;font-weight:900!important}
  .page-exam .subject-fixed-count{font-size:11px!important}

  .page-exam #headerSpacer{height:var(--stt-exam-top-h)!important}
  .page-exam .exam-body{
    top:var(--stt-exam-top-h)!important;
    right:var(--stt-exam-palette-w)!important;
    bottom:var(--stt-exam-footer-h)!important;
    padding:18px 28px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }
  .page-exam .exam-body::-webkit-scrollbar{width:9px}
  .page-exam .exam-body::-webkit-scrollbar-thumb{background:#cbd5e1;border:3px solid transparent;background-clip:padding-box;border-radius:999px}
  .page-exam .question-card{
    width:min(100%,var(--stt-exam-content-max))!important;
    margin:0 auto 16px!important;
    padding:20px 24px!important;
    border-radius:17px!important;
  }
  .page-exam .q-meta-row{margin-bottom:14px!important;padding-bottom:14px!important}
  .page-exam .q-text{font-size:16.5px!important;line-height:1.75!important;margin-bottom:18px!important}
  .page-exam .options-container{gap:12px!important}
  .page-exam .opt-label{min-height:62px!important;padding:11px 14px!important}

  /* Equal-width controls, equal left/right breathing room and equal gaps. */
  .page-exam .exam-footer{
    right:var(--stt-exam-palette-w)!important;
    height:var(--stt-exam-footer-h)!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
    padding-left:max(28px,calc((100vw - var(--stt-exam-palette-w) - var(--stt-exam-content-max))/2))!important;
    padding-right:max(28px,calc((100vw - var(--stt-exam-palette-w) - var(--stt-exam-content-max))/2))!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:center!important;
  }
  .page-exam .exam-footer .btn-action{
    width:100%!important;
    max-width:none!important;
    flex:unset!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    margin:0!important;
  }

  .page-exam .palette-overlay{width:var(--stt-exam-palette-w)!important}
  .page-exam .palette-drawer{
    width:var(--stt-exam-palette-w)!important;
    padding:18px 16px 16px!important;
    overflow-y:auto!important;
  }
  .page-exam .palette-subject-tabs{padding-bottom:10px!important;margin-bottom:10px!important}
  .page-exam .drawer-grid{gap:8px!important}
  .page-exam .drawer-q{height:42px!important}
  .page-exam .palette-legend{margin-top:14px!important}
  .page-exam .legend-row{padding:10px 2px!important}
  .page-exam .legend-count{width:40px!important;height:40px!important}
}

/* Short laptop screens: automatically compact to keep header, question and
   action footer visible without browser zoom. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-height:820px){
  .page-exam{
    --stt-exam-top-h:86px;
    --stt-exam-footer-h:66px;
  }
  .page-exam .exam-sticky-stack .exam-header{padding-top:7px!important;padding-bottom:3px!important}
  .page-exam .exam-header-row{min-height:38px!important}
  .page-exam .desktop-fit-screen-btn,.page-exam .timer-box{height:34px!important}
  .page-exam .q-palette-container{min-height:30px!important;padding-top:3px!important;padding-bottom:3px!important;margin-bottom:5px!important}
  .page-exam .exam-body{padding-top:12px!important;padding-bottom:12px!important}
  .page-exam .question-card{padding:16px 20px!important;margin-bottom:10px!important}
  .page-exam .q-meta-row{margin-bottom:10px!important;padding-bottom:10px!important}
  .page-exam .q-text{font-size:15.5px!important;line-height:1.62!important;margin-bottom:13px!important}
  .page-exam .options-container{gap:10px!important}
  .page-exam .opt-label{min-height:54px!important;padding:9px 12px!important}
  .page-exam .exam-footer{padding-top:8px!important;padding-bottom:8px!important}
  .page-exam .exam-footer .btn-action{height:48px!important;min-height:48px!important;max-height:48px!important}
  .page-exam .drawer-q{height:38px!important}
  .page-exam .legend-row{padding:8px 2px!important}
  .page-exam .legend-count{width:36px!important;height:36px!important}
}

/* Fallback compact mode if browser denies Fullscreen API. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html.stt-exam-compact-fit .page-exam{--stt-exam-top-h:82px;--stt-exam-footer-h:64px}
  html.stt-exam-compact-fit .page-exam .question-card{padding:15px 19px!important}
  html.stt-exam-compact-fit .page-exam .q-text{font-size:15px!important;line-height:1.58!important;margin-bottom:12px!important}
  html.stt-exam-compact-fit .page-exam .opt-label{min-height:52px!important}
}


/* ============================================================
   V12.8 — DESKTOP HEADER HARD LOCK + SOFTWARE FULL-VIEW POLISH
   Root-cause fix for mobile menu button occupying the desktop grid
   and pushing the notification bell into a second row.
   Desktop precise-pointer only; mobile remains untouched.
   ============================================================ */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html,body{width:100%;min-width:0;min-height:100%;height:100%;overflow:hidden!important}
  body{min-height:100dvh!important}

  .top-main-header{
    grid-template-columns:minmax(300px,max-content) minmax(0,1fr) 45px!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    overflow:visible!important;
  }

  /* Base mobile header uses a stronger button selector with display:grid!important.
     Match/beat that selector here so hamburger truly disappears on desktop. */
  .top-main-header>button.tm-menu-btn{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    position:absolute!important;
    width:0!important;height:0!important;
    min-width:0!important;min-height:0!important;
    max-width:0!important;max-height:0!important;
    padding:0!important;margin:0!important;
    border:0!important;box-shadow:none!important;
    overflow:hidden!important;
  }

  .top-main-header>.tm-brand{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
    position:relative!important;
    inset:auto!important;
  }

  .top-main-header>.stt-desktop-page-context{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    min-width:0!important;
    display:flex!important;
    align-items:flex-end!important;
    text-align:right!important;
    padding:0 20px 0 18px!important;
    border-left:0!important;
    border-right:1px solid var(--stt-desktop-line)!important;
  }

  /* Hard-lock notification control into the toolbar's third column. */
  .top-main-header>button.tm-bell-btn{
    display:grid!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    margin:0!important;
    transform:none!important;
    z-index:3!important;
  }
  .top-main-header>button.tm-bell-btn:hover{transform:translateY(-1px)!important}
  .top-main-header>button.tm-bell-btn:active{transform:translateY(1px) scale(.985)!important}

  .notice-sheet{
    top:calc(var(--stt-desktop-header) + 10px)!important;
    right:20px!important;
    left:auto!important;
  }

  /* Every desktop page owns exactly the available software viewport. */
  body>.app-container,body .app-container{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
  }
  body .app-container>main{
    min-height:0!important;
    max-height:calc(100dvh - var(--stt-desktop-header))!important;
  }
}

/* When Chromium grants native Fullscreen API, remove any accidental edge gap. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html:fullscreen,html:fullscreen body{width:100vw!important;height:100vh!important;min-height:100vh!important;background:var(--stt-desktop-canvas,#eef2f7)!important}
  html:fullscreen body>.app-container,html:fullscreen body .app-container{height:100vh!important;min-height:100vh!important;max-height:100vh!important}
}

/* ============================================================
   V12.9 — DEDICATED DESKTOP CBT HEADER + CLEAN QUESTION PALETTE
   Desktop precise-pointer only. Mobile/touch exam UI is untouched.
   ============================================================ */
.desktop-cbt-header,.desktop-palette-heading{display:none}

@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .page-exam{
    --stt-exam-palette-w:320px;
    --stt-exam-top-h:92px;
    --stt-exam-footer-h:74px;
    --stt-exam-content-max:1180px;
  }

  /* Original-CBT style: one dedicated exam bar, no duplicate mobile toolbar. */
  .page-exam .exam-sticky-stack{
    right:var(--stt-exam-palette-w)!important;
    height:var(--stt-exam-top-h)!important;
    min-height:var(--stt-exam-top-h)!important;
    background:#fff!important;
    border-bottom:1px solid #dfe5ed!important;
    box-shadow:0 4px 16px rgba(15,23,42,.055)!important;
    overflow:hidden!important;
  }
  .page-exam .exam-sticky-stack>.exam-header,
  .page-exam .exam-sticky-stack>.q-palette-container{display:none!important}

  .page-exam .desktop-cbt-header{
    display:grid!important;
    grid-template-columns:minmax(210px,245px) minmax(0,1fr) auto!important;
    align-items:stretch!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 22px!important;
    color:#172033!important;
  }
  .page-exam .desktop-cbt-brand{
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    min-width:0!important;
    padding-right:18px!important;
    border-right:1px solid #e5eaf1!important;
  }
  .page-exam .desktop-cbt-mark{
    width:44px!important;height:44px!important;flex:0 0 44px!important;
    display:grid!important;place-items:center!important;
    border-radius:12px!important;background:var(--btn-solid)!important;color:#fff!important;
    border:2px solid #fff!important;box-shadow:0 5px 12px rgba(15,23,42,.16)!important;
    font-size:18px!important;
  }
  .page-exam .desktop-cbt-brand-copy{min-width:0!important}
  .page-exam .desktop-cbt-brand-copy span{
    display:block!important;font-size:13px!important;line-height:1.05!important;font-weight:950!important;
    white-space:nowrap!important;color:#172033!important;
  }
  .page-exam .desktop-cbt-brand-copy strong{
    display:block!important;margin-top:5px!important;font-size:8px!important;line-height:1!important;
    letter-spacing:.14em!important;color:var(--brand-blue)!important;white-space:nowrap!important;
  }

  .page-exam .desktop-cbt-meta{
    display:grid!important;
    grid-template-columns:minmax(145px,.85fr) minmax(160px,1fr) minmax(170px,.95fr)!important;
    align-items:center!important;
    min-width:0!important;
    padding:0 18px!important;
  }
  .page-exam .desktop-cbt-meta-item{
    min-width:0!important;
    padding:4px 15px!important;
    border-right:1px solid #edf0f4!important;
  }
  .page-exam .desktop-cbt-meta-item:first-child{padding-left:0!important}
  .page-exam .desktop-cbt-meta-item:last-child{border-right:0!important}
  .page-exam .desktop-cbt-meta-item>span{
    display:block!important;font-size:7.5px!important;font-weight:900!important;
    text-transform:uppercase!important;letter-spacing:.09em!important;color:#8a95a6!important;margin-bottom:5px!important;
  }
  .page-exam .desktop-cbt-meta-item>strong{
    display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:11.5px!important;font-weight:900!important;color:#1d2939!important;line-height:1.2!important;
  }
  .page-exam .desktop-cbt-meta-item>small{
    display:block!important;margin-top:3px!important;font-size:7.5px!important;font-weight:800!important;color:#667085!important;
  }

  .page-exam .desktop-cbt-live{
    display:grid!important;
    grid-template-columns:auto auto auto!important;
    align-items:center!important;
    gap:9px!important;
    padding-left:12px!important;
  }
  .page-exam .desktop-cbt-qcount{
    min-width:72px!important;height:50px!important;padding:7px 10px!important;
    border:1px solid #e2e8f0!important;border-radius:11px!important;background:#f8fafc!important;text-align:center!important;
  }
  .page-exam .desktop-cbt-qcount>span,.page-exam .desktop-cbt-timer>span{
    display:block!important;font-size:7px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:#8a95a6!important;
  }
  .page-exam .desktop-cbt-qcount>strong{
    display:block!important;margin-top:4px!important;font-size:12px!important;color:#172033!important;white-space:nowrap!important;
  }
  .page-exam .desktop-cbt-qcount b{color:var(--brand-blue-dark)!important;font-size:15px!important}

  .page-exam .desktop-fit-screen-btn{
    display:inline-flex!important;height:50px!important;min-width:108px!important;padding:0 12px!important;
    border-radius:11px!important;font-size:8.5px!important;letter-spacing:.035em!important;
  }
  .page-exam .desktop-cbt-timer{
    min-width:126px!important;height:50px!important;padding:7px 12px!important;
    border:1px solid #f1c4ca!important;border-radius:11px!important;background:#fff7f8!important;text-align:center!important;
  }
  .page-exam .desktop-cbt-timer>strong{
    display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
    margin-top:4px!important;font-size:14px!important;color:#dc263f!important;white-space:nowrap!important;
  }
  .page-exam .desktop-cbt-timer b{font-size:14px!important}
  .page-exam .desktop-cbt-timer.is-danger{background:#fee2e2!important;border-color:#fca5a5!important}

  .page-exam #headerSpacer{height:var(--stt-exam-top-h)!important}
  .page-exam .exam-body{
    top:var(--stt-exam-top-h)!important;
    right:var(--stt-exam-palette-w)!important;
    bottom:var(--stt-exam-footer-h)!important;
    padding:18px 28px!important;
  }
  .page-exam .exam-footer{right:var(--stt-exam-palette-w)!important}

  /* Desktop question palette is intentionally present — this is standard CBT navigation.
     Only the duplicate horizontal mobile strip stays hidden. */
  .page-exam .palette-overlay{width:var(--stt-exam-palette-w)!important}
  .page-exam .palette-drawer{
    width:var(--stt-exam-palette-w)!important;
    padding:16px 15px 14px!important;
    background:#fff!important;
  }
  .page-exam .desktop-palette-heading{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
    min-height:58px!important;padding:5px 2px 12px!important;margin-bottom:11px!important;
    border-bottom:1px solid #e7ebf1!important;
  }
  .page-exam .desktop-palette-heading>div:first-child{min-width:0!important}
  .page-exam .desktop-palette-heading span{
    display:block!important;font-size:7px!important;font-weight:900!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#98a2b3!important;
  }
  .page-exam .desktop-palette-heading strong{
    display:block!important;margin-top:4px!important;font-size:15px!important;font-weight:950!important;color:#172033!important;
  }
  .page-exam .desktop-palette-progress{
    flex:0 0 auto!important;display:flex!important;align-items:baseline!important;gap:3px!important;
    padding:8px 10px!important;border-radius:10px!important;background:var(--brand-soft,#fff5f6)!important;border:1px solid var(--brand-border-soft,#ffd6dc)!important;
  }
  .page-exam .desktop-palette-progress b{font-size:15px!important;color:var(--brand-blue-dark)!important;font-weight:950!important}
  .page-exam .desktop-palette-progress span{font-size:9px!important;color:#667085!important;letter-spacing:0!important;text-transform:none!important}
  .page-exam .palette-subject-tabs{margin:0 0 12px!important;padding:0!important}
  .page-exam .palette-subject-tab{height:42px!important;border-radius:10px!important}
  .page-exam .drawer-grid{gap:8px!important}
  .page-exam .drawer-q{height:42px!important;border-radius:10px!important}
  .page-exam .palette-legend{margin-top:16px!important;padding-top:4px!important;border-top:1px solid #edf0f4!important}
  .page-exam .legend-row{min-height:54px!important;padding:9px 2px!important}
  .page-exam .legend-count{width:40px!important;height:40px!important}
}

@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-width:1260px){
  .page-exam{--stt-exam-palette-w:300px;--stt-exam-top-h:88px}
  .page-exam .desktop-cbt-header{grid-template-columns:190px minmax(0,1fr) auto!important;padding:0 16px!important}
  .page-exam .desktop-cbt-meta{grid-template-columns:minmax(120px,.8fr) minmax(135px,1fr) minmax(145px,.9fr)!important;padding:0 10px!important}
  .page-exam .desktop-cbt-meta-item{padding-left:10px!important;padding-right:10px!important}
  .page-exam .desktop-cbt-brand-copy span{font-size:11.5px!important}
  .page-exam .desktop-cbt-brand-copy strong{font-size:7px!important}
  .page-exam .desktop-cbt-mark{width:40px!important;height:40px!important;flex-basis:40px!important}
  .page-exam .desktop-cbt-qcount{display:none!important}
  .page-exam .desktop-fit-screen-btn{min-width:96px!important;padding:0 9px!important}
  .page-exam .desktop-cbt-timer{min-width:116px!important}
}

@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-height:820px){
  .page-exam{--stt-exam-top-h:82px;--stt-exam-footer-h:66px}
  .page-exam .desktop-cbt-header{padding-left:18px!important;padding-right:18px!important}
  .page-exam .desktop-cbt-mark{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:10px!important}
  .page-exam .desktop-cbt-meta-item>span{margin-bottom:3px!important}
  .page-exam .desktop-cbt-live>*{height:44px!important}
  .page-exam .desktop-cbt-timer,.page-exam .desktop-cbt-qcount{padding-top:5px!important;padding-bottom:5px!important}
  .page-exam .palette-drawer{padding-top:12px!important}
  .page-exam .desktop-palette-heading{min-height:52px!important;margin-bottom:8px!important;padding-bottom:9px!important}
  .page-exam .drawer-q{height:38px!important}
  .page-exam .legend-row{min-height:48px!important;padding:7px 2px!important}
  .page-exam .legend-count{width:36px!important;height:36px!important}
}

/* Desktop shell App Mode helper. Never shown on mobile. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .stt-desktop-appmode-btn{
    display:none;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 10px;
    border:1px solid #e1e7ef;border-radius:9px;background:#fff;color:#475467;font-size:8px;font-weight:900;cursor:pointer;
  }
  .stt-desktop-appmode-btn.ready{display:inline-flex}
  html.stt-installed-app .stt-desktop-appmode-btn{display:none!important}
}