/*
  Modal, auth, sync, onboarding, viewer-mode, and coaching portal layout styles.
  Extracted from snippetz-study-v5.html so the HTML can stay focused on markup.
  Keep this file loaded in the order declared in the HTML because later files refine earlier styles.
*/

    /* ── MODAL ──────────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 3200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .modal-overlay.open {
      display: flex;
      animation: fi .15s ease
    }

    .modal {
      background: var(--white);
      border-radius: var(--r);
      padding: 22px 24px;
      width: 100%;
      max-width: 460px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shm)
    }

    .modal-title {
      font-family: 'Instrument Serif', serif;
      font-size: 18px;
      margin-bottom: 16px;
      color: var(--text)
    }

    .tt-view-btn {
      font-size: 12px;
      padding: 4px 11px
    }

    .tt-view-btn.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent)
    }

    .c-t {
      color: var(--teal)
    }

    .c-y {
      color: var(--yellow)
    }

    .c-r {
      color: var(--red)
    }

    .asgn-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      background: var(--al)
    }

    .exam-type-btn {
      font-size: 12.5px;
      padding: 6px 14px;
      border-radius: var(--rs);
      border: 1px solid var(--border);
      background: var(--white);
      cursor: pointer;
      transition: all .15s
    }

    .exam-type-btn.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent)
    }

    /* ── AUTH OVERLAY ───────────────────────────────────────────────── */
    .auth-card {
      background: var(--white);
      border-radius: 16px;
      padding: 36px 40px;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .12)
    }

    .auth-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px
    }

    .auth-logo-ic {
      width: 36px;
      height: 36px;
      background: var(--accent);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px
    }

    .auth-logo-nm {
      font-family: 'Instrument Serif', serif;
      font-size: 22px
    }

    .auth-tabs {
      display: flex;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 22px;
      overflow: hidden
    }

    .auth-tab {
      flex: 1;
      padding: 8px;
      text-align: center;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      color: var(--text3)
    }

    .auth-tab.on {
      background: var(--accent);
      color: #fff
    }

    .auth-err {
      font-size: 12px;
      color: var(--red);
      margin-top: -8px;
      margin-bottom: 8px;
      min-height: 16px
    }

    .auth-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 14px 0;
      font-size: 11px;
      color: var(--text3);
      text-align: center;
      position: relative
    }

    .auth-divider::after {
      content: attr(data-txt);
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--white);
      padding: 0 8px
    }

    /* ── SYNC STATUS ────────────────────────────────────────────────── */
    #sync-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      display: inline-block;
      margin-right: 4px;
      transition: background .3s
    }

    #sync-dot.syncing {
      background: var(--orange);
      animation: br 1s ease-in-out infinite
    }

    #sync-dot.error {
      background: var(--red)
    }

    #auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      overflow-y: auto;
      padding: 20px;
      background: var(--bg, #f7f6f2);
      pointer-events: none
    }

    #auth-overlay .auth-split,
    #auth-overlay #auth-file-warning {
      pointer-events: auto;
      max-width: 100%
    }

    #auth-overlay[style*="display: flex"],
    #auth-overlay.open {
      display: flex
    }

    #auth-overlay[style*="display: none"],
    #auth-overlay[style*="display:none"] {
      pointer-events: none !important
    }

    #admin-overlay[style*="display: none"],
    #admin-overlay[style*="display:none"] {
      pointer-events: none !important
    }

    #teacher-overlay[style*="display: none"],
    #teacher-overlay[style*="display:none"] {
      pointer-events: none !important
    }

    .modal-overlay:not(.open) {
      pointer-events: none !important
    }

    .app-loading-screen {
      position: fixed;
      inset: 0;
      z-index: 9800;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .12), transparent 42%),
        var(--bg, #f7f6f2);
      color: var(--text, #181714);
    }

    .app-loading-screen.open {
      display: flex;
    }

    .app-loading-card {
      width: min(360px, 100%);
      text-align: center;
      padding: 28px 24px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 28px 90px rgba(15, 23, 42, .18);
    }

    .app-loading-mark {
      width: 62px;
      height: 62px;
      margin: 0 auto 14px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--white);
      box-shadow: var(--sh);
      animation: appLoadingPulse 1.4s ease-in-out infinite;
    }

    .app-loading-mark img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .app-loading-title {
      font-family: 'Instrument Serif', serif;
      font-size: 28px;
      line-height: 1;
      color: var(--text);
      margin-bottom: 8px;
    }

    .app-loading-copy {
      color: var(--text2);
      font-size: 13px;
      line-height: 1.55;
      margin-bottom: 18px;
    }

    .app-loading-bar {
      height: 5px;
      border-radius: 999px;
      background: var(--bg2);
      overflow: hidden;
    }

    .app-loading-bar span {
      display: block;
      height: 100%;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), #0d9488);
      animation: appLoadingBar 1.15s ease-in-out infinite;
    }

    @keyframes appLoadingPulse {
      0%, 100% { transform: translateY(0); box-shadow: var(--sh) }
      50% { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(37, 99, 235, .2) }
    }

    @keyframes appLoadingBar {
      from { transform: translateX(-110%) }
      to { transform: translateX(250%) }
    }

    /* App shell modes — portals live inside .main; never hide .main entirely */
    body.app-shell-auth .sb,
    body.app-shell-admin .sb,
    body.app-shell-teacher .sb {
      display: none !important
    }

    body.app-shell-auth .main,
    body.app-shell-admin .main,
    body.app-shell-teacher .main {
      display: block !important;
      flex: 1 !important;
      min-width: 0;
      position: relative;
      overflow: hidden
    }

    body.app-shell-auth .main > :not(#auth-overlay):not(.modal-overlay),
    body.app-shell-admin .main > :not(#admin-overlay):not(.modal-overlay),
    body.app-shell-teacher .main > :not(#teacher-overlay):not(.modal-overlay) {
      display: none !important
    }

    body.app-shell-auth #auth-overlay {
      display: flex !important;
      position: fixed !important;
      inset: 0 !important;
      left: 0 !important;
      z-index: 2000 !important;
      pointer-events: none
    }

    body.app-shell-admin #admin-overlay {
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: 1500 !important;
      pointer-events: auto !important;
      overflow-y: auto
    }

    body.app-shell-teacher #teacher-overlay {
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: 1500 !important;
      pointer-events: auto !important;
      overflow-y: auto
    }

    body.app-shell-student .sb {
      display: flex !important
    }

    body.app-shell-student .main {
      display: flex !important
    }

    body.app-shell-student #auth-overlay,
    body.app-shell-student #admin-overlay,
    body.app-shell-student #teacher-overlay {
      display: none !important;
      pointer-events: none !important
    }

    /* ── STUDENT SETTINGS ───────────────────────────────────────────── */
    .student-settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 8000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: clamp(10px, 2.2vw, 24px);
      background: rgba(15, 18, 24, .36);
      backdrop-filter: blur(18px) saturate(1.12)
    }

    .student-settings-overlay.open {
      display: flex;
      animation: fi .18s ease
    }

    #modal-settings-confirm {
      z-index: 9000;
      background: rgba(6, 8, 12, .52);
      backdrop-filter: blur(12px) saturate(1.08)
    }

    #modal-settings-confirm.open {
      pointer-events: auto !important
    }

    .settings-shell {
      width: min(1120px, 100%);
      height: min(760px, calc(100vh - 24px));
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      overflow: hidden;
      border-radius: 22px;
      border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
      background: color-mix(in srgb, var(--white) 86%, transparent);
      box-shadow: 0 30px 90px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .22)
    }

    .settings-rail {
      background: color-mix(in srgb, var(--bg) 74%, transparent);
      border-right: 1px solid var(--border);
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .settings-titlebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 18px
    }

    .settings-close {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text2);
      cursor: pointer;
      font-size: 16px
    }

    .settings-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--white) 72%, transparent);
      margin-bottom: 16px;
      min-width: 0
    }

    .settings-user-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--accent), var(--teal));
      color: #fff;
      font-weight: 800;
      font-size: 17px;
      flex: 0 0 42px
    }

    .settings-nav-label {
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      color: var(--text3);
      font-family: 'JetBrains Mono', monospace;
      padding: 0 8px 8px
    }

    .settings-nav {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .settings-nav-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text2);
      border-radius: 12px;
      padding: 10px 11px;
      cursor: pointer;
      text-align: left;
      font: inherit;
      font-weight: 700;
      transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease
    }

    .settings-nav-btn:hover {
      background: var(--white);
      color: var(--text);
      transform: translateX(1px)
    }

    .settings-nav-btn.on {
      background: var(--al);
      color: var(--accent);
      border-color: var(--ab)
    }

    .settings-nav-icon {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--white);
      border: 1px solid var(--border);
      flex: 0 0 28px
    }

    .settings-content {
      min-width: 0;
      overflow-y: auto;
      padding: clamp(18px, 3vw, 34px)
    }

    .settings-pane {
      display: none;
      animation: settingsPaneIn .22s ease
    }

    .settings-pane.on {
      display: block
    }

    @keyframes settingsPaneIn {
      from { opacity: 0; transform: translateY(5px) }
      to { opacity: 1; transform: none }
    }

    .settings-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px
    }

    .settings-heading h2 {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 400;
      line-height: 1;
      margin-bottom: 7px;
      color: var(--text)
    }

    .settings-heading p {
      color: var(--text3);
      font-size: 13px;
      line-height: 1.6;
      max-width: 620px
    }

    .settings-section {
      background: color-mix(in srgb, var(--white) 92%, transparent);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      box-shadow: var(--sh);
      margin-bottom: 14px
    }

    .settings-section-title {
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 4px;
      color: var(--text)
    }

    .settings-section-sub {
      color: var(--text3);
      font-size: 12.2px;
      line-height: 1.55;
      margin-bottom: 13px
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
    }

    .settings-choice-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px
    }

    .settings-choice {
      border: 1px solid var(--border);
      background: var(--bg);
      border-radius: 14px;
      padding: 13px;
      cursor: pointer;
      color: var(--text2);
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease
    }

    .settings-choice:hover {
      transform: translateY(-1px);
      border-color: var(--ab);
      box-shadow: var(--sh)
    }

    .settings-choice.on {
      background: var(--al);
      border-color: var(--accent);
      color: var(--text);
      box-shadow: 0 0 0 1px var(--ab)
    }

    .settings-choice strong {
      display: block;
      color: var(--text);
      margin-bottom: 4px
    }

    .settings-choice span {
      display: block;
      color: var(--text3);
      font-size: 11.5px;
      line-height: 1.45
    }

    .settings-swatch {
      height: 42px;
      border-radius: 11px;
      border: 1px solid var(--border);
      margin-bottom: 10px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr
    }

    .settings-status {
      min-height: 18px;
      font-size: 12px;
      color: var(--text3);
      margin-top: 9px
    }

    .settings-status.ok { color: var(--green) }
    .settings-status.err { color: var(--red) }

    .settings-danger {
      border-color: var(--rb);
      background: var(--rl)
    }

    .settings-modal-copy {
      color: var(--text2);
      font-size: 13px;
      line-height: 1.65;
      margin-bottom: 14px
    }

    .portal-settings-icon {
      width: 36px;
      min-width: 36px;
      justify-content: center;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease
    }

    .portal-settings-icon:hover {
      transform: translateY(-1px) rotate(12deg);
      box-shadow: var(--sh)
    }

    /* ── FIRST-RUN ROLE TOUR ───────────────────────────────────────── */
    .role-tour-overlay {
      position: fixed;
      inset: 0;
      z-index: 9800;
      display: none;
      pointer-events: none;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif
    }

    .role-tour-overlay.open {
      display: block;
      pointer-events: auto;
      animation: fi .18s ease
    }

    .role-tour-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(9, 12, 24, .04);
      backdrop-filter: blur(0.5px)
    }

    .role-tour-spotlight {
      position: absolute;
      z-index: 1;
      border-radius: 14px;
      border: 2px solid rgba(255, 255, 255, .92);
      box-shadow: 0 0 0 9999px rgba(9, 12, 24, .03), 0 18px 50px rgba(0, 0, 0, .28), 0 0 0 6px rgba(37, 99, 235, .18);
      opacity: 0;
      pointer-events: none;
      transition: left .24s ease, top .24s ease, width .24s ease, height .24s ease, opacity .18s ease
    }

    .role-tour-panel {
      position: absolute;
      z-index: 2;
      right: clamp(16px, 3vw, 34px);
      bottom: clamp(16px, 3vw, 34px);
      width: min(390px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      border-radius: 20px;
      background: color-mix(in srgb, var(--white) 96%, transparent);
      box-shadow: 0 28px 90px rgba(9, 12, 24, .34);
      padding: 22px
    }

    .role-tour-top {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 6px
    }

    .role-tour-kicker {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 4px
    }

    .role-tour-top h2 {
      margin: 0;
      color: var(--text);
      font-family: 'Instrument Serif', serif;
      font-weight: 400;
      font-size: clamp(22px, 3.6vw, 28px);
      line-height: 1.05;
      letter-spacing: -.01em
    }

    .role-tour-icon-btn {
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 10px;
      background: var(--bg);
      color: var(--text3);
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      flex: 0 0 30px;
      transition: background .13s, color .13s
    }

    .role-tour-icon-btn:hover {
      background: var(--border);
      color: var(--text)
    }

    .role-tour-visual {
      border-radius: 14px;
      border: 1px solid var(--border);
      background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--al) 45%, var(--white)));
      overflow: hidden
    }

    .role-tour-mini-screen {
      padding: 12px;
      min-height: 156px
    }

    .role-tour-mini-bar {
      height: 28px;
      display: flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid var(--border);
      margin: -12px -12px 12px;
      padding: 0 12px;
      background: rgba(255, 255, 255, .62)
    }

    .role-tour-mini-bar span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .35
    }

    .role-tour-mini-grid {
      display: grid;
      gap: 8px
    }

    .role-tour-mini-row {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      border-radius: 10px;
      background: var(--white);
      box-shadow: var(--sh);
      animation: roleTourRow .58s ease both;
      animation-delay: calc(var(--i) * 80ms)
    }

    .role-tour-mini-row b {
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .role-tour-mini-row span {
      color: var(--text);
      font-weight: 700;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .role-tour-copy {
      color: var(--text);
      font-size: 15px;
      line-height: 1.6;
      margin: 10px 0 16px
    }

    .role-tour-bullets {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px
    }

    .role-tour-bullets span {
      border: 1px solid var(--ab);
      border-radius: 999px;
      background: var(--al);
      color: var(--accent);
      padding: 4px 11px;
      font-size: 12px;
      font-weight: 700
    }

    .role-tour-progress {
      height: 4px;
      border-radius: 999px;
      background: var(--bg2);
      overflow: hidden;
      margin-bottom: 16px
    }

    .role-tour-progress div {
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), #0d9488);
      transition: width .22s ease
    }

    .role-tour-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px
    }

    .role-tour-actions .btn {
      padding: 5px 11px;
      font-size: 12px;
      border-radius: 8px
    }

    .role-tour-actions .btn:disabled {
      opacity: .35;
      cursor: default;
      transform: none
    }

    .role-tour-actions .role-tour-step {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 800;
      color: var(--text3);
      white-space: nowrap
    }

    @keyframes roleTourRow {
      from { opacity: 0; transform: translateY(8px) scale(.98) }
      to { opacity: 1; transform: none }
    }

    @media (max-width: 720px) {
      .role-tour-panel {
        left: 10px;
        right: 10px;
        bottom: 12px;
        width: auto;
        padding: 16px;
        border-radius: 16px;
        max-height: 44vh
      }

      .role-tour-spotlight {
        border-radius: 10px
      }

      .role-tour-visual {
        display: none
      }

      .role-tour-top {
        margin-bottom: 4px;
        gap: 8px
      }

      .role-tour-kicker {
        font-size: 9px;
        margin-bottom: 3px
      }

      .role-tour-top h2 {
        font-size: clamp(18px, 4vw, 22px);
        line-height: 1.1
      }

      .role-tour-icon-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
        flex: 0 0 32px
      }

      .role-tour-copy {
        font-size: 14px;
        line-height: 1.55;
        margin: 8px 0 12px
      }

      .role-tour-bullets {
        gap: 5px;
        margin-bottom: 12px
      }

      .role-tour-bullets span {
        font-size: 11px;
        padding: 3px 10px;
        font-weight: 700
      }

      .role-tour-progress {
        margin-bottom: 12px
      }

      .role-tour-actions {
        gap: 6px
      }

      .role-tour-actions .btn {
        padding: 5px 13px;
        font-size: 12px;
        border-radius: 9px
      }

      .role-tour-actions .role-tour-step {
        font-size: 11px
      }
    }

    .portal-settings-shell {
      position: relative;
      background: color-mix(in srgb, var(--white) 88%, transparent)
    }

    #portal-settings-alerts {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
      width: min(420px, calc(100% - 32px))
    }

    .portal-settings-toast {
      opacity: 0;
      transform: translateY(-8px);
      background: color-mix(in srgb, var(--text) 88%, transparent);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .15);
      box-shadow: 0 18px 40px rgba(15, 23, 42, .2);
      border-radius: 12px;
      padding: 10px 13px;
      font-size: 12.2px;
      font-weight: 800;
      text-align: center;
      transition: opacity .18s ease, transform .18s ease
    }

    .portal-settings-toast.show {
      opacity: 1;
      transform: none
    }

    .portal-settings-toast.ok { background: color-mix(in srgb, var(--green) 82%, #111 18%) }
    .portal-settings-toast.err { background: color-mix(in srgb, var(--red) 82%, #111 18%) }

    .portal-permission-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .portal-permission-row,
    .portal-batch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid var(--border);
      background: var(--bg);
      border-radius: 14px;
      padding: 12px 13px;
      min-width: 0
    }

    .portal-permission-row span,
    .portal-batch-row div {
      min-width: 0
    }

    .portal-permission-row strong,
    .portal-batch-row strong {
      display: block;
      color: var(--text);
      font-size: 13.5px
    }

    .portal-permission-row em,
    .portal-batch-row span {
      display: block;
      color: var(--text3);
      font-size: 11.5px;
      line-height: 1.45;
      font-style: normal;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .portal-permission-row input[type="checkbox"] {
      width: 42px;
      height: 24px;
      flex: 0 0 42px;
      appearance: none;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--text3) 18%, transparent);
      cursor: pointer;
      position: relative;
      transition: background .16s ease, border-color .16s ease
    }

    .portal-permission-row input[type="checkbox"]::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      left: 2px;
      top: 2px;
      background: var(--white);
      box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
      transition: transform .16s ease
    }

    .portal-permission-row input[type="checkbox"]:checked {
      border-color: var(--accent);
      background: var(--accent)
    }

    .portal-permission-row input[type="checkbox"]:checked::after {
      transform: translateX(18px)
    }

    #modal-portal-settings-confirm {
      z-index: 9100;
      background: rgba(6, 8, 12, .52);
      backdrop-filter: blur(12px) saturate(1.08)
    }

    #student-restriction-modal {
      z-index: 9100;
      background: rgba(6, 8, 12, .48);
      backdrop-filter: blur(12px) saturate(1.08)
    }

    .restriction-modal {
      max-width: 430px;
      text-align: center
    }

    @media (max-width: 820px) {
      .student-settings-overlay { padding: 0 }
      .settings-shell {
        height: 100vh;
        border-radius: 0;
        grid-template-columns: 1fr
      }
      .settings-rail {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 12px;
        max-height: 230px;
        overflow-y: auto
      }
      .settings-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
      .settings-content { padding: 16px }
      .settings-grid { grid-template-columns: 1fr }
    }


    /* ── ONBOARDING ────────────────────────────────────────────────── */
    .auth-split {
      width: min(1440px, 100%);
      min-height: min(860px, calc(100vh - 32px));
      display: grid;
      grid-template-columns: minmax(300px, 0.55fr) 1fr;
      gap: 0;
      align-items: stretch;
      background: #f4f3ef;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(15, 23, 42, .16);
    }

    .auth-showcase {
      position: relative;
      overflow: hidden;
      border-radius: 0;
      padding: clamp(26px, 3.2vw, 42px);
      color: #fff;
      background: linear-gradient(180deg, #000 0%, #00066f 48%, #1a22d4 74%, #c8cbf8 100%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: min(860px, calc(100vh - 32px));
    }

    .auth-showcase::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 54%),
        radial-gradient(ellipse 68% 42% at 50% 58%, rgba(74, 90, 255, .28), transparent 70%);
      pointer-events: none;
    }

    .auth-showcase>* {
      position: relative;
      z-index: 1;
    }

    .auth-brand-row {
      display: flex;
      align-items: center;
      gap: 14px;
      color: rgba(255, 255, 255, .74);
      font-size: 17px;
      font-weight: 800;
      margin-bottom: clamp(26px, 5vh, 42px);
    }

    .auth-brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .86);
      font-size: 20px;
    }

    .auth-status-pill,
    .auth-platform-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(255, 255, 255, .13);
      background: rgba(255, 255, 255, .055);
      color: rgba(255, 255, 255, .75);
      border-radius: 999px;
      padding: 9px 16px;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: clamp(24px, 4vh, 36px);
    }

    .auth-status-pill {
      color: rgba(74, 222, 128, .76);
      letter-spacing: 0;
      text-transform: none;
      font-size: 13px;
      margin: -92px 0 90px;
    }

    .auth-status-pill::before,
    .auth-platform-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f7c948;
    }

    .auth-status-pill::before {
      background: #47d681;
    }

    .auth-hero-title {
      font-family: 'Instrument Serif', Georgia, serif;
      font-size: clamp(42px, 4.6vw, 60px);
      line-height: .98;
      letter-spacing: 0;
      max-width: 640px;
      margin-bottom: 18px;
      color: rgba(255, 255, 255, .94);
    }

    .auth-hero-title em {
      display: block;
      color: rgba(255, 255, 255, .34);
      font-style: italic;
    }

    .auth-hero-copy {
      max-width: 460px;
      font-size: 15px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .68);
    }

    .auth-proof-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: clamp(20px, 4vh, 32px);
      max-width: 560px;
    }

    .auth-proof {
      display: grid;
      grid-template-columns: 30px 1fr;
      align-items: center;
      gap: 11px;
      border-radius: 15px;
      padding: 12px 14px 12px 13px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .13);
      color: rgba(255, 255, 255, .58);
      min-height: 54px;
    }

    .auth-proof strong {
      display: block;
      color: rgba(255, 255, 255, .9);
      font-size: 12.5px;
      margin-bottom: 3px;
    }

    .auth-proof span {
      font-size: 12px;
      line-height: 1.45;
    }

    @media (max-height: 920px) and (min-width: 761px) {
      .auth-showcase {
        padding: 32px 42px;
      }

      .auth-brand-row {
        margin-bottom: 34px;
      }

      .auth-platform-pill {
        margin-bottom: 24px;
      }

      .auth-hero-title {
        font-size: clamp(42px, 4.3vw, 56px);
      }

      .auth-proof-grid {
        margin-top: 20px;
      }
    }

    .auth-flow-card {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 18px;
      padding: 16px;
    }

    .auth-flow-line {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 10px;
      align-items: start;
      color: rgba(255, 255, 255, .78);
      font-size: 12px;
      line-height: 1.6;
      margin-top: 10px;
    }

    .auth-flow-line:first-child {
      margin-top: 0;
    }

    .auth-flow-dot {
      width: 24px;
      height: 24px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .16);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
    }

    .auth-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      background: #f4f3ef;
      padding: clamp(28px, 5vw, 78px);
      overflow-y: auto;
    }

    .auth-stage>div {
      width: min(100%, 760px) !important;
    }

    .auth-kicker {
      color: #b5b2ad;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 2.8px;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .auth-title {
      font-family: 'Instrument Serif', Georgia, serif;
      font-size: clamp(34px, 4vw, 54px);
      line-height: .96;
      color: #1f1f1d;
      margin-bottom: 12px;
    }

    .auth-title em {
      display: block;
      color: #9d9993;
      font-style: italic;
    }

    .auth-subtitle {
      max-width: 430px;
      color: #9d9993;
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: clamp(20px, 4vh, 32px);
    }

    .auth-choice-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: clamp(32px, 7vh, 66px);
    }

    .ob-path-btn {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 22px;
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(15, 23, 42, .06);
      border-radius: 14px;
      cursor: pointer;
      transition: all .17s;
      width: 100%;
      text-align: left;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
    }

    .auth-card {
      width: 100%;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      padding: 0 !important;
    }

    .ob-path-btn:hover {
      border-color: rgba(15, 23, 42, .12);
      background: #fff;
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(15, 23, 42, .07);
    }

    .ob-path-btn-featured {
      border-left: 2px solid var(--accent);
      background: rgba(255, 255, 255, .92);
      padding-left: 20px;
    }

    #ob-signin .auth-card,
    #ob-signup .auth-card,
    #ob-waiting .auth-card,
    #ob-codes-screen .auth-card {
      background: rgba(255, 255, 255, .74) !important;
      border: 1px solid rgba(15, 23, 42, .08) !important;
      border-radius: 22px !important;
      padding: clamp(22px, 3vw, 32px) !important;
      box-shadow: 0 16px 45px rgba(15, 23, 42, .08) !important;
    }

    .auth-choice-index {
      width: 24px;
      color: #bcb8b1;
      font-family: 'Instrument Serif', Georgia, serif;
      font-size: 16px;
      font-style: italic;
      flex: 0 0 auto;
    }

    .auth-choice-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f2ef;
      border: 1px solid rgba(15, 23, 42, .06);
      font-size: 19px;
      flex: 0 0 auto;
    }

    .auth-choice-arrow {
      margin-left: auto;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(15, 23, 42, .07);
      color: #111;
      font-size: 20px;
      flex: 0 0 auto;
    }

    .auth-signin-area {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 18px;
      align-items: center;
      color: #b5b2ad;
      font-size: 12px;
      margin-bottom: 18px;
    }

    .auth-signin-area::before,
    .auth-signin-area::after {
      content: "";
      height: 1px;
      background: rgba(15, 23, 42, .08);
    }

    .auth-signin-btn {
      width: 100%;
      min-height: 48px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(15, 23, 42, .08);
      color: #1f1f1d;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
      transition: all .15s;
    }

    .auth-signin-btn:hover {
      background: #fff;
      transform: translateY(-1px);
    }


    /* ── VIEWER MODE (admin/teacher viewing student dashboard) ── */
    body.viewer-mode .btn.pr[onclick*="openModal"],
    body.viewer-mode .btn.pr[onclick*="openGlobal"],
    body.viewer-mode .btn.pr[onclick*="openExam"],
    body.viewer-mode #btn-join-room-sidebar,
    body.viewer-mode #btn-signout-sidebar {
      display: none !important;
    }