.swal2-container {
      z-index: 10000000 !important;
    }
    :root {
      /* Taste-Skill Calibrated Modern Palette */
      --paper: #f8fafc;
      --paper-subtle: #f1f5f9;
      --white: #ffffff;
      --ink: #0f172a;
      --ink-secondary: #334155;
      --muted: #64748b;
      --muted-light: #94a3b8;
      --line: #e2e8f0;
      --line-subtle: rgba(15, 23, 42, 0.06);

      /* Brand Palette: Deep Slate Navy & Refined Sapphire/Indigo */
      --blue-950: #090d16;
      --blue-900: #0f172a;
      --blue-800: #1e293b;
      --blue-700: #1d4ed8;
      --blue-600: #2563eb;
      --blue-100: #eff6ff;
      --blue-50: #f8fafc;

      /* Status Tokens */
      --red: #e11d48;
      --red-bg: #fff1f2;
      --red-border: #fecdd3;
      --amber: #d97706;
      --amber-bg: #fffbeb;
      --amber-border: #fde68a;
      --green: #059669;
      --green-bg: #ecfdf5;
      --green-border: #a7f3d0;

      /* Ambient Layered Shadows */
      --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
      --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
      --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
      --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.07), 0 4px 8px -2px rgba(15, 23, 42, 0.03);
      --shadow: var(--shadow-lg);

      /* Typography */
      --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    body.dark-mode {
      --paper: #090d16;
      --paper-subtle: #0f172a;
      --white: #111c33;
      --ink: #f8fafc;
      --ink-secondary: #cbd5e1;
      --muted: #94a3b8;
      --line: #1e293b;
      --line-subtle: rgba(255, 255, 255, 0.08);
      --blue-50: #0f172a;
      --blue-100: #1e293b;
      --shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    }
    body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
      background: #0d1627;
      color: #f8fafc;
      border-color: #1e293b;
    }
    body.dark-mode .brand-panel {
      background: linear-gradient(135deg, #050811 0%, #090d16 100%);
      border-color: rgba(255, 255, 255, 0.08);
    }
    body.dark-mode .summary-card {
      background: #111c33;
      border-color: #1e293b;
    }

    * { box-sizing: border-box; }
    html {
      color-scheme: light;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    body {
      min-height: 100vh;
      margin: 0;
      color: var(--ink-secondary);
      background: var(--paper);
      font-family: var(--font-main);
      font-size: 15px;
      line-height: 1.6;
      letter-spacing: -0.01em;
    }

    button, input, select, textarea {
      font-family: inherit;
    }
    button {
      min-height: 42px;
      border: 1px solid var(--blue-700);
      border-radius: 8px;
      padding: 9px 18px;
      color: #ffffff;
      background: linear-gradient(180deg, var(--blue-600) 0%, var(--blue-700) 100%);
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    button:hover {
      background: linear-gradient(180deg, var(--blue-700) 0%, #1e40af 100%);
      border-color: #1e40af;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
      transform: translateY(-1px);
    }
    button:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--blue-600);
      outline-offset: 2px;
    }
    button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
      transform: none !important;
    }
    .secondary-button {
      border: 1px solid var(--line);
      color: var(--ink-secondary);
      background: #ffffff;
      box-shadow: var(--shadow-xs);
    }
    .secondary-button:not([style*="background"]):hover {
      border-color: #cbd5e1;
      color: var(--ink);
      background: #f8fafc;
      box-shadow: var(--shadow-sm);
    }

    .shell {
      width: min(1080px, calc(100% - 32px));
      margin: 28px auto 48px;
    }

    .brand-panel {
      min-height: 124px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 24px 32px;
      border-radius: 16px 16px 0 0;
      color: #ffffff;
      background: linear-gradient(135deg, #090d16 0%, #0f172a 60%, #1e293b 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 0;
      position: relative;
      overflow: hidden;
    }
    .brand-panel::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 400px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(37, 99, 235, 0.15), transparent 70%);
      pointer-events: none;
    }
    .brand-identity {
      display: flex;
      align-items: center;
      gap: 18px;
      min-width: 0;
      position: relative;
      z-index: 1;
    }
    .brand-copy { min-width: 0; }
    .school-mark {
      width: 60px;
      height: 60px;
      flex: 0 0 60px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      font-weight: 800;
      color: var(--blue-800);
    }
    .school-mark img {
      width: 52px !important;
      height: 52px !important;
      max-width: 52px !important;
      max-height: 52px !important;
      display: block;
      object-fit: contain;
      border-radius: 10px;
    }
    .eyebrow {
      margin: 0 0 4px;
      color: var(--blue-600);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .brand-panel .eyebrow {
      color: #93c5fd;
    }
    h1 {
      margin: 0;
      font-size: clamp(1.5rem, 3.8vw, 2.15rem);
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .brand-panel h1 {
      color: #ffffff;
    }
    h2 {
      margin: 0 0 18px;
      font-size: 1.4rem;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    h3 {
      margin: 22px 0 10px;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    .lead {
      margin: 6px 0 0;
      color: #475569;
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.5;
    }
    .brand-panel .lead {
      color: #cbd5e1;
    }
    .value-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .value-strip span {
      border: 1px solid rgba(255, 255, 255, 0.35) !important;
      border-radius: 999px;
      padding: 5px 14px;
      color: #ffffff !important;
      background: rgba(255, 255, 255, 0.18) !important;
      backdrop-filter: blur(8px);
      font-size: 0.75rem;
      font-weight: 700 !important;
      letter-spacing: 0.03em;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    /* PWA Universal Install Banner - Premium High-Contrast Theme */
    #pwa-install-banner {
      background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%) !important;
      border: 1.5px solid #93c5fd !important;
      border-radius: 14px !important;
      padding: 14px 20px !important;
      margin-bottom: 22px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 12px !important;
      box-shadow: 0 4px 18px rgba(37, 99, 235, 0.08) !important;
    }
    #pwa-install-banner .pwa-banner-title,
    #pwa-install-banner strong.pwa-banner-title {
      color: #0f172a !important;
      font-size: 1.02rem !important;
      font-weight: 800 !important;
    }
    #pwa-install-banner .pwa-banner-badge {
      background: #dbeafe !important;
      color: #1d4ed8 !important;
      font-size: 0.72rem !important;
      font-weight: 800 !important;
      padding: 2px 8px !important;
      border-radius: 12px !important;
      border: 1px solid #bfdbfe !important;
    }
    #pwa-install-banner .pwa-banner-desc {
      margin: 3px 0 0 !important;
      color: #334155 !important;
      font-size: 0.84rem !important;
      line-height: 1.45 !important;
    }
    #pwa-install-banner .pwa-banner-desc strong {
      color: #1d4ed8 !important;
      font-weight: 700 !important;
    }
    #pwa-install-banner button.pwa-install-action-btn {
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
      color: #ffffff !important;
      border: 1px solid #1d4ed8 !important;
      padding: 9px 18px !important;
      border-radius: 8px !important;
      font-weight: 800 !important;
      font-size: 0.88rem !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
      transition: all 0.15s ease !important;
    }
    #pwa-install-banner button.pwa-install-action-btn span {
      background: transparent !important;
      color: #ffffff !important;
      border: none !important;
      padding: 0 !important;
      font-size: 0.88rem !important;
      font-weight: 800 !important;
    }

    .app-panel {
      min-height: 540px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 16px 16px;
      padding: 28px 34px 38px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .tabs {
      display: none !important;
    }
    .tab {
      min-height: 48px;
      border: 0;
      border-bottom: 3px solid transparent;
      border-radius: 0;
      color: var(--muted);
      background: transparent;
      box-shadow: none;
    }
    .tab:hover { color: var(--blue-700); background: var(--blue-50); box-shadow: none; }
    .tab.active { border-bottom-color: var(--blue-700); color: var(--blue-700); background: transparent; }
    .page { display: none; max-width: 960px; margin: 0 auto; }
    .page.active { display: block; animation: page-in .24s ease-out; }
    @keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

    /* Segmented Navigation Controls */
    .admin-subtabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      background: #f1f5f9;
      padding: 5px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    .admin-subtab {
      min-height: 38px;
      padding: 7px 16px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: #475569;
      font-size: 0.86rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: none;
      transition: all 0.16s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .admin-subtab:hover {
      background: rgba(255, 255, 255, 0.65);
      color: #0f172a;
      box-shadow: none;
      transform: none;
    }
    .admin-subtab.active {
      background: #ffffff;
      color: var(--blue-700);
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
      border: 1px solid rgba(15, 23, 42, 0.04);
    }
    .admin-subtab-content { display: none; }
    .admin-subtab-content.active { display: block; animation: page-in .24s ease-out; }

    /* TKA & CBT Stimulus Wacana & Visual Diagram */
    .tka-stimulus-box {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-left: 4px solid #1857a4;
      border-radius: 8px;
      padding: 14px 18px;
      margin: 12px 0 16px;
      font-size: 0.94rem;
      line-height: 1.65;
      color: #1e293b;
    }
    .tka-stimulus-title {
      font-weight: 700;
      color: #0f3d7a;
      margin-bottom: 8px;
      font-size: 0.92rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tka-stimulus-box > svg, .cbt-question-text > svg, svg.stimulus-diagram {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 12px auto;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .tka-stimulus-box table, .cbt-question-text table {
      width: 100%;
      max-width: 100%;
      margin: 10px auto;
      border-collapse: collapse;
      font-size: 0.85rem;
      background: #ffffff;
      border-radius: 6px;
      display: table;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .tka-stimulus-box table th, .tka-stimulus-box table td,
    .cbt-question-text table th, .cbt-question-text table td {
      border: 1px solid #cbd5e1;
      padding: 6px 10px;
      text-align: center;
    }
    .tka-stimulus-box table th, .cbt-question-text table th {
      background: #f1f5f9;
      color: #0f172a;
      font-weight: 700;
    }
    .katex {
      font-size: 1.05em;
      line-height: 1.5;
      text-rendering: geometricPrecision;
    }
    .katex svg {
      display: inline-block !important;
      position: static !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
      max-width: none !important;
      height: inherit !important;
      overflow: visible !important;
    }
    .katex-display {
      margin: 0.6em 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 4px 0;
    }
    .cbt-question-text, .question-text, .cbt-option, .explanation-steps, .tka-stimulus-box, .tka-pertanyaan {
      line-height: 1.8;
      overflow: visible;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    .cbt-question-text img, .tka-image-box img, .cbt-exam-main img, .cbt-q-btn {
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }
    .swal2-container {
      pointer-events: auto !important;
      z-index: 10000000 !important;
    }
    .swal2-popup, .swal2-confirm, .swal2-cancel, .swal2-actions {
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    #admin-login { max-width: 620px; margin: 0 auto; }
    #reflection-card {
      width: min(760px, calc(100vw - 32px));
      max-width: 760px;
      margin: 32px auto;
      padding: 28px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    #reflection-card h2 {
      margin: 0 0 8px;
      color: var(--blue-900);
      font-size: clamp(1.35rem, 2vw, 1.75rem);
      line-height: 1.2;
    }
    #reflection-card .reflection-note {
      color: var(--muted);
      font-size: 0.92rem;
      margin: 0 0 22px;
      line-height: 1.6;
    }
    #reflection-card label {
      margin-bottom: 18px;
      line-height: 1.45;
    }
    #reflection-card textarea {
      display: block;
      min-height: 112px;
      margin-top: 8px;
      line-height: 1.55;
    }
    #reflection-card button {
      margin-top: 4px;
      min-height: 46px;
      padding: 12px 22px;
      font-weight: 800;
    }
    label { display: block; margin-bottom: 16px; color: var(--ink); font-weight: 700; }
    /* Global Text-like Input Fields Only (Excluding Checkbox, Radio, Buttons, Color, Range, File) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
    select,
    textarea {
      width: 100%;
      min-height: 44px;
      margin-top: 7px;
      border: 1px solid #c7d4e4;
      border-radius: 6px;
      padding: 10px 12px;
      color: var(--ink);
      background: var(--white);
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
    select:hover,
    textarea:hover { border-color: #9eb4ce; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
    select:focus,
    textarea:focus { border-color: var(--blue-600); }

    /* Standardized Clean Checkbox & Radio Controls Across Entire Platform */
    input[type="checkbox"],
    input[type="radio"] {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 22px !important;
      max-height: 22px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 1.5px solid #94a3b8 !important;
      border-radius: 4px !important;
      background-color: #ffffff !important;
      cursor: pointer !important;
      flex: 0 0 18px !important;
      flex-shrink: 0 !important;
      vertical-align: middle !important;
      accent-color: var(--blue-700) !important;
      display: inline-block !important;
      box-sizing: border-box !important;
      box-shadow: none !important;
      transition: transform .12s ease, filter .15s ease;
    }
    input[type="radio"] {
      border-radius: 50% !important;
    }
    input[type="checkbox"]:hover,
    input[type="radio"]:hover {
      filter: brightness(0.95);
      transform: scale(1.05);
    }
    .cbt-matrix-table input[type="radio"] {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      min-height: 22px !important;
      max-width: 24px !important;
      max-height: 24px !important;
      flex: 0 0 22px !important;
    }
    textarea { min-height: 96px; resize: vertical; }
    .inline-login, .filters, .nav-row, .exam-top, .section-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: end;
    }
    .inline-login { margin-top: 12px; }
    .inline-login input { margin-top: 0; }
    .message { min-height: 24px; margin: 12px 0 0; color: var(--muted); font-weight: 600; font-size: 0.9em; }
    .message.error { color: var(--red); }
    .message.success { color: var(--green); }
    .hidden,
    [hidden],
    .modal-overlay.hidden,
    .modal.hidden,
    .cbt-exam-notice.hidden,
    .fullscreen-restore-overlay.hidden,
    .integrity-warning-overlay.hidden,
    .cbt-exam-locked-overlay.hidden {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
      z-index: -999999 !important;
      width: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      outline: 0 !important;
    }
    .auth-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; max-width: 920px; margin: 0 auto; }
    .auth-card, .student-dashboard {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 22px;
      background: var(--white);
    }
    .auth-card h2, .student-dashboard h2 { margin-bottom: 8px; }
    .card-note { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
    .account-benefits { display: grid; gap: 10px; margin-top: 14px; }
    .benefit-row { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 11px; background: var(--blue-50); }
    .benefit-row strong { display: block; color: var(--blue-800); }
    .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
    .dashboard-action { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--blue-50); }
    .dashboard-action h3 { margin: 0 0 6px; color: var(--blue-800); }
    .dashboard-action p { margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
    .ai-box { margin-top: 10px; border: 1px solid #b8d7c0; border-radius: 8px; padding: 12px; background: #f3fbf5; color: #173f24; white-space: pre-wrap; }

    .exam-top, .section-head {
      align-items: center;
      padding-bottom: 15px;
      margin-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .exam-top h2, .section-head h2 { margin-bottom: 0; }

    @keyframes timer-pulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(192, 52, 61, 0.4); }
      50% { transform: scale(1.08); box-shadow: 0 0 14px 4px rgba(192, 52, 61, 0.6); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(192, 52, 61, 0.4); }
    }
    #timer {
      min-width: 88px;
      border: 1px solid #f0c9cd;
      border-radius: 6px;
      padding: 8px 12px;
      color: var(--red);
      background: #fff4f5;
      text-align: center;
      font-size: 1.15rem;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    #timer.timer-warning {
      animation: timer-pulse 1.2s infinite !important;
      background: #ffebee !important;
      border-color: var(--red) !important;
    }

    .integrity {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      border: 1px solid #cfe0f5;
      border-radius: 6px;
      padding: 12px 14px;
      background: var(--blue-50);
      font-weight: 600;
      font-size: 0.9em;
    }
    .integrity input { width: 17px; height: 17px; min-height: 0; margin: 3px 0 0; flex: 0 0 auto; }
    .question-meta { display: flex; gap: 7px; flex-wrap: wrap; margin: 20px 0 12px; }
    .status {
      display: inline-flex;
      align-items: center;
      border: 1px solid #cfe0f5;
      border-radius: 999px;
      padding: 4px 9px;
      color: var(--blue-700);
      background: var(--blue-50);
      font-size: .76rem;
      font-weight: 800;
    }
    .status.warn { border-color: #ead6aa; color: var(--amber); background: #fff9e9; }
    .status.danger { border-color: #efc6ca; color: var(--red); background: #fff3f4; }
    .status.success { border-color: #a5d6a7; color: var(--green); background: #e8f5e9; }
    .question-text {
      margin: 10px 0 17px;
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.75;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      white-space: pre-wrap;
    }
    .option {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-bottom: 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 12px 13px;
      background: var(--white);
      font-weight: 500;
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease;
    }
    .option:hover { border-color: #9dbbe0; background: var(--blue-50); }
    .option:has(input:checked) { border-color: var(--blue-600); background: var(--blue-100); }
    .option input { width: 17px; height: 17px; min-height: 0; margin: 3px 0 0; flex: 0 0 auto; }
    .nav-row { margin-top: 20px; }
    .question-toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin: 17px 0 4px;
    }
    .question-nav { display: flex; flex-wrap: wrap; gap: 6px; }
    .question-number {
      width: 36px;
      min-height: 36px;
      padding: 0;
      border-color: var(--line);
      color: var(--muted);
      background: var(--white);
      box-shadow: none;
    }
    .question-number:hover { color: var(--blue-700); background: var(--blue-50); box-shadow: none; }
    .question-number.answered { border-color: #86add9; color: var(--blue-800); background: var(--blue-100); }
    .question-number.active { border-color: var(--blue-700); color: var(--white); background: var(--blue-700); }
    .autosave-status { flex: 0 0 auto; padding-top: 7px; color: var(--muted); font-size: .77rem; font-weight: 700; }

    .filters { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
    .filters select { margin-top: 0; }
    .metrics {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 9px;
      margin: 14px 0 22px;
    }
    .metric {
      min-width: 0;
      border: 1px solid var(--line);
      border-top: 3px solid var(--blue-600);
      border-radius: 6px;
      padding: 12px;
      background: var(--blue-50);
    }
    .metric span { display: block; overflow-wrap: anywhere; color: var(--muted); font-size: .75rem; font-weight: 700; }
    .metric strong { display: block; overflow-wrap: anywhere; margin-top: 3px; color: var(--blue-950); font-size: 1.45rem; line-height: 1.25; }
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .list { padding: 0; margin: 0; list-style: none; }
    .list li, .table-row, details {
      margin-bottom: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 11px 12px;
      background: var(--white);
    }
    .table-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
    .table-row small { color: var(--muted); overflow-wrap: anywhere; }
    .feedback { margin: 12px 0; border-left: 4px solid var(--blue-600); padding: 10px 12px; background: var(--blue-50); border-radius: 4px; }
    .feedback.wrong { border-color: var(--red); background: #fff7f7; }
    .feedback p { margin-bottom: 0; }
    .exam-builder { margin-top: 14px; background: var(--blue-50); }
    .exam-builder[open] { padding-bottom: 16px; }
    .exam-builder summary { cursor: pointer; color: var(--blue-800); font-weight: 800; }
    .exam-builder[open] summary { margin-bottom: 16px; }
    .exam-builder button { margin: 4px 6px 0 0; }
    .dashboard-actions, .import-actions, .bank-select-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .dashboard-actions { margin: -8px 0 18px; }
    .import-actions { justify-content: flex-start; }
    .file-field {
      min-width: min(100%, 320px);
      margin: 0;
      border: 1px dashed #a8bdd6;
      border-radius: 6px;
      padding: 10px 12px;
      color: var(--blue-800);
      background: var(--white);
    }
    .file-field input { min-height: 0; margin-top: 5px; border: 0; padding: 0; }
    .field-help { margin: 12px 0; color: var(--muted); font-size: .85rem; }
    .source-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
    .source-divider::before, .source-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
    .google-form-import { border: 1px solid #cfe0f5; border-radius: 6px; padding: 15px; background: var(--blue-50); }
    .import-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
    .import-step { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--white); }
    .import-step strong { display: block; color: var(--blue-800); margin-bottom: 4px; }
    .import-step small { color: var(--muted); line-height: 1.45; }
    .import-helper { border: 1px dashed #86add9; border-radius: 8px; padding: 12px; background: #f8fbff; color: var(--blue-900); font-size: 0.86rem; line-height: 1.55; margin-top: 12px; }
    .import-preview { margin: 12px 0; border: 1px solid var(--line); border-radius: 6px; padding: 12px; color: var(--muted); background: var(--white); }
    .preview-table-wrap { max-width: 100%; overflow-x: auto; }
    .preview-table-wrap table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: .78rem; }
    .preview-table-wrap th, .preview-table-wrap td { border: 1px solid var(--line); padding: 7px; text-align: left; vertical-align: top; }
    .preview-table-wrap th { color: var(--blue-800); background: var(--blue-50); }
    .bank-filters { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
    .bank-filters input, .bank-filters select { margin-top: 0; }
    .bank-select-bar { margin: 12px 0; }
    .bank-select-bar label { margin: 0; font-size: .85rem; }
    .bank-select-bar input, .setting-toggles input { width: auto; min-height: 0; margin: 0 6px 0 0; }
    .question-bank-list { max-height: 350px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
    .bank-question { display: grid; grid-template-columns: auto 1fr; gap: 11px; margin: 0; padding: 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
    .bank-question:last-child { border-bottom: 0; }
    .bank-question:hover { background: var(--blue-50); }
    .bank-question > input { width: 17px; height: 17px; min-height: 0; margin: 4px 0 0; }
    .empty-state { padding: 26px 14px; color: var(--muted); text-align: center; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .form-grid .span-2 { grid-column: span 2; }
    .setting-toggles { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 14px; }
    .setting-toggles label { margin: 0; font-size: .88rem; }

    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(10, 37, 80, 0.65);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow-y: auto;
    }
    .modal-card {
      background: var(--white);
      border-radius: 12px;
      max-width: 480px;
      width: 100%;
      padding: 28px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
      text-align: center;
      animation: modal-pop 0.22s ease-out;
      max-height: 90vh;
      overflow-y: auto;
    }
    @keyframes modal-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .modal-card h3 { margin-top: 0; font-size: 1.35rem; color: var(--blue-800); }
    .modal-card p { color: var(--ink); font-size: 0.95rem; margin: 12px 0 22px; }
    .modal-icon { font-size: 2.8rem; margin-bottom: 8px; }

    /* MOBILE: modal overlay & card responsif untuk HP */
    @media (max-width: 600px) {
      .modal-overlay {
        align-items: flex-start;
        padding: 12px 8px;
      }
      .modal-card {
        padding: 18px 14px;
        max-height: calc(100dvh - 24px);
        border-radius: 10px;
      }
      #exam-rules-modal .modal-card {
        font-size: 0.85rem;
      }
      #exam-rules-modal .modal-card ol {
        padding-left: 16px;
      }
    }

    .loader-spinner {
      border: 5px solid #eaf3ff;
      border-top: 5px solid var(--blue-700);
      border-radius: 50%;
      width: 48px; height: 48px;
      animation: spin 0.9s linear infinite;
      margin: 10px auto 16px;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    #score-display { font-size: 4em; font-weight: 800; color: var(--green); text-align: center; margin: 15px 0; }
    #score-display.cheated { color: var(--red); }

    .summary-card {
      background: #eaf3ff;
      border: 1px solid #bbdefb;
      border-left: 5px solid var(--blue-700);
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 18px;
    }

    /* PERBAIKAN MOBILE & SCREEN KECIL LOGO HEADER */
    @media (max-width: 720px) {
      .shell { width: 100%; margin: 0; }
      .brand-panel { min-height: 0; align-items: center; padding: 14px 16px; border-radius: 0; }
      .school-mark { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
      .school-mark img { width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; object-fit: contain !important; border-radius: 50% !important; }
      .brand-identity { align-items: center; gap: 10px; }
      h1 { font-size: 1.25rem; }
      .lead { font-size: .8rem; }
      .value-strip { display: none; }
      .app-panel { min-height: auto; border-right: 0; border-left: 0; border-radius: 0; padding: 16px 12px 28px; }
      .tabs { margin: -4px 0 16px; }
      .tab { font-size: 0.88rem; min-height: 42px; padding: 6px 8px; }
      .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .split, .filters { grid-template-columns: 1fr; gap: 6px; }
      .bank-filters { grid-template-columns: 1fr; }
      .import-guide { grid-template-columns: 1fr; }
      .inline-login { grid-template-columns: minmax(0, 1fr) auto; }
      .section-head { grid-template-columns: minmax(0, 1fr) auto; }
      .form-grid { grid-template-columns: 1fr; }
      .form-grid .span-2 { grid-column: span 1; }
      .cbt-login-box {
        padding: 20px 16px 18px !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(13, 33, 55, 0.05) !important;
      }
      .cbt-login-box .cbt-logo { font-size: 2rem !important; margin-bottom: 4px !important; }
      .cbt-login-box h2 { font-size: 1.15rem !important; }
      .cbt-login-box .cbt-subtitle { font-size: 0.76rem !important; margin-bottom: 16px !important; }
    }

    /* SISTEM PENGAWASAN & ANTI-KECURANGAN AKTIF (CSS ENFORCEMENT) */
    body.exam-in-progress {
      user-select: none !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      -webkit-touch-callout: none !important;
    }
    body.exam-in-progress input,
    body.exam-in-progress textarea {
      user-select: text !important;
      -webkit-user-select: text !important;
    }
    @keyframes pulseWarning {
      0% { transform: scale(1); }
      50% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }

    /* ============================== */
    /* CBT EXAM BROWSER THEME         */
    /* ============================== */

    /* CBT Login Card */
    .cbt-login-page {
      min-height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      padding: 6px 0 16px;
    }
    .cbt-login-box {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1.5px solid #dce5f0;
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(13, 33, 55, 0.06);
      padding: 28px 24px 22px;
      text-align: center;
      box-sizing: border-box;
    }
    .cbt-login-box .cbt-logo {
      font-size: 2.5rem;
      margin-bottom: 6px;
    }
    .cbt-login-box h2 {
      font-size: 1.28rem;
      color: #0d2137;
      margin: 0 0 4px;
      font-weight: 800;
    }
    .cbt-login-box .cbt-subtitle {
      font-size: 0.82rem;
      color: #66758a;
      margin: 0 0 20px;
    }
    .cbt-login-box label {
      text-align: left;
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      color: #17243a;
      margin-bottom: 12px;
    }
    .cbt-login-box input, .cbt-login-box select {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid #d7e1ee;
      border-radius: 8px;
      font-size: 0.92rem;
      margin-top: 4px;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .cbt-login-box input:focus, .cbt-login-box select:focus {
      outline: none;
      border-color: #1857a4;
      box-shadow: 0 0 0 3px rgba(24,87,164,0.12);
    }
    .cbt-login-box button.cbt-btn-primary {
      width: 100%;
      padding: 12px;
      background: #1857a4;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s;
    }
    .cbt-login-box button.cbt-btn-primary:hover {
      background: #123f7a;
    }
    .cbt-login-footer {
      margin-top: 18px;
      font-size: 0.75rem;
      color: #64748b;
      text-align: center;
    }

    /* CBT Dashboard */
    .cbt-dashboard {
      min-height: 100vh;
      background: #f0f4f8;
    }
    .cbt-topbar {
      background: #0d1117;
      color: #fff;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .cbt-topbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 0.95rem;
    }
    .cbt-topbar-brand .lock-icon {
      font-size: 1.2rem;
    }
    .cbt-topbar-user {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.85rem;
    }
    .cbt-topbar-user .user-name {
      font-weight: 600;
    }
    .cbt-topbar-user .user-class {
      color: #8b949e;
      font-size: 0.8rem;
    }
    .cbt-topbar-user button {
      background: #21262d;
      color: #f0f6fc;
      border: 1px solid #30363d;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .cbt-topbar-user button:hover {
      background: #30363d;
    }
    .cbt-exam-list {
      max-width: 800px;
      margin: 0 auto;
      padding: 30px 20px;
    }
    .cbt-exam-list {
      max-width: 920px;
      margin: 0 auto;
      padding: 30px 20px 60px;
    }
    .cbt-exam-list h2 {
      font-size: 1.35rem;
      color: #0f172a;
      margin: 0 0 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    /* Modern Premium Exam Card (Taste-Skill Standard) */
    .cbt-exam-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-left: 5px solid #0284c7;
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      box-sizing: border-box;
    }
    .cbt-exam-card:hover {
      box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.08);
      border-color: #cbd5e1;
      transform: translateY(-2px);
    }
    .cbt-exam-card.tryout-variant {
      border-left-color: #f59e0b;
    }
    .cbt-exam-card.tryout-variant:hover {
      border-left-color: #d97706;
    }

    .cbt-exam-card .exam-info {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .cbt-exam-card .to-card-header-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 2px;
    }
    .cbt-exam-card .to-card-series-tag {
      background: #fef3c7;
      color: #92400e;
      padding: 3px 10px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 0.74rem;
      border: 1px solid #fde68a;
      letter-spacing: 0.4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      line-height: 1.3;
    }
    .cbt-exam-card .to-card-category-tag {
      font-size: 0.75rem;
      color: #64748b;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .cbt-exam-card .exam-info h3,
    .cbt-exam-card .to-card-title {
      margin: 2px 0 6px;
      font-size: 1.15rem;
      color: #0f172a;
      font-weight: 800;
      letter-spacing: -0.015em;
      line-height: 1.35;
    }
    .cbt-exam-card.tryout-variant .to-card-title {
      color: #78350f;
    }
    .cbt-exam-card .to-card-meta-chips,
    .cbt-exam-card .exam-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 4px;
    }
    .cbt-exam-card .to-meta-chip,
    .cbt-exam-card .exam-meta span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 0.78rem;
      font-weight: 600;
      color: #475569;
      line-height: 1.25;
    }

    /* Action & Token Box (Right Column) */
    .cbt-exam-card .to-card-action-box {
      flex: 0 0 280px;
      max-width: 280px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-self: center;
      box-sizing: border-box;
    }
    .cbt-exam-card .to-token-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: #78350f;
      display: flex;
      align-items: center;
      gap: 5px;
      letter-spacing: 0.2px;
    }
    .cbt-exam-card .to-token-input {
      width: 100%;
      height: 42px;
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 3px;
      text-align: center;
      font-size: 1.05rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      border: 1.5px solid #f59e0b;
      border-radius: 8px;
      background: #fffdf5;
      color: #78350f;
      padding: 0 12px;
      box-sizing: border-box;
      outline: none;
      transition: all 0.2s ease;
    }
    .cbt-exam-card .to-token-input:focus {
      border-color: #d97706;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }
    .cbt-exam-card .to-btn-start-cbt {
      width: 100%;
      height: 42px;
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 800;
      letter-spacing: 0.6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.28);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-sizing: border-box;
    }
    .cbt-exam-card .to-btn-start-cbt:hover {
      background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(217, 119, 6, 0.38);
    }
    .cbt-exam-card .to-btn-start-cbt:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
    }

    .cbt-exam-card .exam-status {
      flex-shrink: 0;
      text-align: right;
    }
    .cbt-exam-card .exam-status .score-badge {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 0.82rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .cbt-exam-card .exam-status .score-badge.done {
      background: #dafbe1;
      color: #1a7f37;
    }
    .cbt-exam-card .exam-status .score-badge.pending {
      background: #fff8c5;
      color: #9a6700;
    }
    .cbt-exam-card .btn-start-exam {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 22px;
      background: #0284c7;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
      transition: all 0.2s;
    }
    .cbt-exam-card .btn-start-exam:hover {
      background: #0369a1;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    }
    .cbt-exam-card .btn-start-exam.remedial {
      background: linear-gradient(135deg, #d97706, #b45309);
      color: #fff;
    }
    .cbt-exam-card .btn-start-exam.remedial:hover {
      background: linear-gradient(135deg, #b45309, #92400e);
    }
    .cbt-exam-card .btn-start-exam.retake {
      background: #0284c7;
      color: #fff;
    }
    .cbt-exam-card .btn-start-exam.retake:hover {
      background: #0369a1;
    }
    .cbt-exam-card .btn-start-exam.review {
      background: #21262d;
    }
    .cbt-exam-card .btn-start-exam.review:hover {
      background: #30363d;
    }

    /* CBT Exam Taking - Split Panel Layout */
    .cbt-exam-container {
      display: grid;
      grid-template-columns: 270px 1fr;
      grid-template-rows: auto 1fr auto;
      height: 100vh;
      background: #f6f8fa;
    }

    /* CBT Exam Header */
    .cbt-exam-header {
      grid-column: 1 / -1;
      background: #0d1117;
      color: #f0f6fc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 52px;
      border-bottom: 1px solid #21262d;
    }
    .cbt-exam-header .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 0.9rem;
      min-width: 0;
      max-width: 38%;
      overflow: hidden;
    }
    .cbt-exam-header .header-left .exam-title-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #f0f6fc;
    }
    .cbt-exam-header .header-left .lock-badge {
      background: #1f6feb;
      color: #fff;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .cbt-exam-header .header-center {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.3rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #f0f6fc;
    }
    .cbt-exam-header .header-center .timer-icon {
      font-size: 1rem;
    }
    .cbt-exam-header .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 0.85rem;
      color: #8b949e;
    }
    .cbt-exam-header .header-right .progress-text {
      font-weight: 600;
      color: #f0f6fc;
    }
    .cbt-exam-header .header-right .status-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #3fb950;
      display: inline-block;
    }
    .cbt-fs-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #1e293b;
      color: #f8fafc;
      border: 1px solid #475569;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .cbt-fs-toggle-btn:hover {
      background: #334155;
      border-color: #38bdf8;
      color: #38bdf8;
    }

    /* CBT Sidebar */
    .cbt-exam-sidebar {
      background: #161b22;
      border-right: 1px solid #21262d;
      padding: 18px 16px 36px;
      width: 270px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      z-index: 100;
    }
    .cbt-exam-sidebar h4 {
      color: #f0f6fc;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin: 0 0 14px;
      font-weight: 800;
    }
    .cbt-q-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 20px;
      box-sizing: border-box;
      width: 100%;
      position: relative;
      z-index: 101;
    }
    .cbt-q-btn {
      width: 100%;
      aspect-ratio: 1;
      min-width: 0;
      box-sizing: border-box;
      border: 1.5px solid #484f58;
      border-radius: 10px !important;
      background: #21262d;
      color: #ffffff !important;
      font-size: 0.95rem;
      font-weight: 800;
      cursor: pointer !important;
      pointer-events: auto !important;
      transition: all 0.15s ease !important;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 102 !important;
      outline: none !important;
      -webkit-tap-highlight-color: transparent !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }
    .cbt-q-btn:hover {
      border-color: #58a6ff !important;
      color: #58a6ff !important;
      background: #30363d !important;
      transform: scale(1.05) !important;
    }
    .cbt-q-btn:focus {
      outline: none !important;
    }
    .cbt-q-btn.answered {
      background: #1f6feb !important;
      border-color: #388bfd !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      box-shadow: 0 2px 6px rgba(31, 111, 235, 0.4) !important;
    }
    .cbt-q-btn.answered:hover {
      background: #388bfd !important;
      border-color: #58a6ff !important;
      color: #ffffff !important;
      transform: scale(1.05) !important;
    }
    .cbt-q-btn.flagged::after {
      content: '';
      position: absolute;
      right: 5px;
      top: 5px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #facc15;
      box-shadow: 0 0 0 2px #090d16;
    }
    .cbt-q-btn.active {
      background: #f0883e !important;
      border-color: #f0883e !important;
      color: #ffffff !important;
      font-weight: 900 !important;
      box-shadow: 0 0 0 2px #0d1117, 0 0 0 4px #f0883e !important;
      z-index: 103 !important;
    }
    .cbt-q-btn.active:hover {
      background: #f0883e !important;
      border-color: #f0883e !important;
      color: #ffffff !important;
      transform: scale(1.05) !important;
    }
    .cbt-q-btn.answered.active {
      background: #f0883e !important;
      border-color: #f0883e !important;
      color: #ffffff !important;
    }
    .cbt-sidebar-stats {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid #30363d;
    }
    .cbt-sidebar-stats .stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      color: #c9d1d9;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .cbt-sidebar-stats .stat-row strong {
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: 800;
    }
    .cbt-legend {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 0 0 16px;
      color: #e6edf3;
      font-size: 0.78rem;
      font-weight: 700;
    }
    .cbt-legend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: #f0f6fc;
    }
    .cbt-legend i {
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background: #21262d;
      border: 1.5px solid #484f58;
      flex: 0 0 auto;
    }
    .cbt-legend i.answered { background: #1f6feb; border-color: #388bfd; }
    .cbt-legend i.active { background: #f0883e; border-color: #f0883e; }
    .cbt-legend i.flagged { background: #facc15; border-color: #eab308; }
    .cbt-sidebar-stats .btn-finish {
      width: 100%;
      padding: 11px;
      background: #da3633;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 12px;
      margin-bottom: 28px;
      transition: background 0.2s;
    }
    .cbt-sidebar-stats .btn-finish:hover {
      background: #b62324;
    }

    /* CBT Main Question Panel */
    .cbt-exam-main {
      padding: 30px 40px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .cbt-question-number {
      font-size: 0.8rem;
      color: #57606a;
      font-weight: 600;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .cbt-question-topic {
      display: inline-block;
      background: #ddf4ff;
      color: #0969da;
      padding: 3px 12px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .cbt-question-text {
      font-size: 1.08rem;
      line-height: 1.7;
      color: #1f2328;
      margin-bottom: 24px;
      font-weight: 400;
    }
    .tka-table-wrap {
      overflow-x: auto;
      margin: 16px auto;
      max-width: 100%;
      text-align: center;
      -webkit-overflow-scrolling: touch;
    }
    .tka-table {
      border-collapse: collapse;
      margin: 0 auto;
      min-width: 280px;
      width: auto;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 0.95rem;
      text-align: center;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .tka-table th {
      background: #f8fafc;
      color: #0f172a;
      font-weight: 700;
      padding: 10px 16px;
      border: 1px solid #cbd5e1;
      border-bottom: 2px solid #94a3b8;
    }
    .tka-table td {
      padding: 9px 16px;
      border: 1px solid #cbd5e1;
      color: #334155;
    }
    .tka-table tr:nth-child(even) td {
      background: #f8fafc;
    }
    .tka-option-table-wrap {
      margin: 8px 0;
      overflow-x: auto;
    }

    /* ==========================================================================
       AKADEMIK & CBT PREMIUM TYPOGRAPHY DESIGN SYSTEM (BAHASA INDONESIA & ENGLISH)
       ========================================================================== */
    .cbt-question-text {
      font-size: 1.04rem;
      line-height: 1.8;
      color: #1e293b;
      margin-bottom: 22px;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-spacing: 0.04em;
      letter-spacing: 0.01em;
    }
    .cbt-paragraph {
      margin: 0 0 14px 0;
      line-height: 1.85;
      color: #1e293b;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-spacing: 0.04em;
    }
    .cbt-paragraph:last-child {
      margin-bottom: 0;
    }
    .tka-stimulus-box {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-left: 4.5px solid #2563eb;
      border-radius: 10px;
      padding: 16px 20px;
      margin: 14px 0 18px 0;
      line-height: 1.85;
      color: #0f172a;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    .tka-pertanyaan {
      font-weight: 400;
      color: #1e293b;
      line-height: 1.75;
      margin-top: 14px;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    .cbt-stimulus-header {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 12px 0 14px 0;
      padding: 9px 14px;
      background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
      border: 1.5px solid #bfdbfe;
      border-radius: 8px;
    }
    .cbt-stimulus-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.76rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: #1d4ed8;
      color: #ffffff;
      padding: 3px 10px;
      border-radius: 999px;
      box-shadow: 0 1px 3px rgba(29, 78, 216, 0.25);
    }
    .cbt-stimulus-intro {
      font-size: 0.92rem;
      font-weight: 600;
      color: #1e40af;
      font-style: italic;
    }
    .cbt-passage-card {
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      border: 1.5px solid #cbd5e1;
      border-left: 5px solid #2563eb;
      border-radius: 12px;
      padding: 20px 24px;
      margin: 16px 0 20px 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      font-family: Charter, Georgia, 'Times New Roman', -apple-system, BlinkMacSystemFont, 'Segoe UI', serif;
      font-size: 1.04rem;
      line-height: 1.85;
      color: #0f172a;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-spacing: 0.04em;
    }
    .cbt-passage-title {
      font-weight: 800;
      font-size: 1.12rem;
      text-align: center;
      color: #0f172a;
      margin: 12px 0 16px 0;
      padding-bottom: 8px;
      border-bottom: 1.5px solid #e2e8f0;
      letter-spacing: 0.3px;
    }
    .cbt-dialogue-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-left: 4.5px solid #0d9488;
      border-radius: 10px;
      padding: 14px 18px;
      margin: 14px 0 16px 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .cbt-dialogue-turn {
      display: flex;
      align-items: baseline;
      gap: 8px;
      line-height: 1.7;
      font-size: 0.98rem;
    }
    .cbt-speaker-tag {
      font-weight: 800;
      color: #0f766e;
      background: #ccfbf1;
      padding: 2px 9px;
      border-radius: 6px;
      font-size: 0.85rem;
      flex-shrink: 0;
      border: 1px solid #99f6e4;
    }
    .cbt-speaker-speech {
      color: #1e293b;
      font-style: normal;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      line-height: 1.7;
    }
    .cbt-dialogue-note {
      font-size: 0.88rem;
      font-style: italic;
      color: #64748b;
      padding-top: 4px;
      text-align: justify;
      text-justify: inter-word;
    }
    .cbt-statements-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-left: 4.5px solid #6366f1;
      border-radius: 10px;
      padding: 14px 18px;
      margin: 14px 0 16px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cbt-statement-item {
      display: flex;
      align-items: baseline;
      gap: 9px;
      font-size: 0.98rem;
      line-height: 1.7;
    }
    .cbt-statement-num {
      font-weight: 800;
      color: #4338ca;
      background: #e0e7ff;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.82rem;
      flex-shrink: 0;
      border: 1px solid #c7d2fe;
    }
    .cbt-statement-text {
      color: #1e293b;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      line-height: 1.7;
    }
    .cbt-statement-note {
      font-weight: 700;
      color: #312e81;
      font-size: 0.92rem;
      margin-bottom: 4px;
    }
    .cbt-lead-question {
      font-weight: 700;
      font-size: 1.05rem;
      line-height: 1.75;
      color: #0f172a;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1.5px dashed #cbd5e1;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    .cbt-blank-slot {
      display: inline-block;
      min-width: 48px;
      padding: 1px 8px;
      margin: 0 4px;
      background: #f1f5f9;
      border-bottom: 2.5px solid #1e40af;
      border-radius: 4px 4px 0 0;
      font-weight: 700;
      color: #1e40af;
      text-align: center;
      font-size: 0.92rem;
    }

    .cbt-option {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 18px;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      margin-bottom: 11px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .cbt-option input[type="radio"],
    .cbt-option input[type="checkbox"] {
      cursor: pointer;
      pointer-events: auto;
    }
    .cbt-option:hover {
      border-color: #2563eb;
      background: #f8faff;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
    }
    .cbt-option.selected {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    }
    .cbt-option input[type="radio"],
    .cbt-option input[type="checkbox"] {
      width: 18px; height: 18px;
      margin-top: 5px;
      flex-shrink: 0;
      accent-color: #2563eb;
    }
    .cbt-option input[type="checkbox"] {
      border-radius: 4px;
    }
        .rich-toolbar-mini {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #f8fafc;
      padding: 2px 5px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
    }
    .btn-rich-fmt {
      min-width: 25px;
      height: 24px;
      padding: 0 6px;
      font-size: 0.82rem;
      border-radius: 4px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      color: #1e293b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      transition: all 0.15s ease;
    }
    .btn-rich-fmt:hover {
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }
    .btn-rich-fmt:active {
      background: #cbd5e1 !important;
      transform: scale(0.96);
    }
    .rich-option-input {
      min-height: 40px;
      max-height: 120px;
      overflow-y: auto;
      padding: 8px 12px;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      font-size: 0.92rem;
      font-weight: 400;
      color: #1e293b;
      line-height: 1.45;
      outline: none;
      box-sizing: border-box;
      word-break: break-word;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .rich-option-input:focus {
      border-color: #4f46e5 !important;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
    }
    .rich-option-input:empty:before {
      content: attr(data-placeholder);
      color: #94a3b8;
      font-weight: normal;
      pointer-events: none;
    }
    .rich-option-input b,
    .rich-option-input strong {
      font-weight: 800 !important;
      color: #020617 !important;
    }
    .rich-option-input i,
    .rich-option-input em {
      font-style: italic !important;
    }
    .rich-option-input u {
      text-decoration: underline !important;
      text-underline-offset: 3px !important;
      text-decoration-thickness: 1.5px !important;
    }
    .rich-option-input b i,
    .rich-option-input i b,
    .rich-option-input strong em,
    .rich-option-input em strong {
      font-weight: 800 !important;
      font-style: italic !important;
      color: #020617 !important;
    }

    .cbt-option .option-text img,
    .rich-option-input img,
    .tka-img-option {
      max-width: 100%;
      max-height: 140px;
      height: auto;
      width: auto;
      object-fit: contain;
      border-radius: 6px;
      display: inline-block;
      vertical-align: middle;
      margin: 4px 0;
    }

    .cbt-option .option-text {
      font-size: 0.98rem;
      font-weight: 400;
      color: #1e293b;
      line-height: 1.65;
      padding-top: 2px;
      flex-grow: 1;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
    .cbt-option .option-text b,
    .cbt-option .option-text strong {
      font-weight: 800 !important;
      color: #020617 !important;
      letter-spacing: -0.01em;
    }
    .cbt-option .option-text i,
    .cbt-option .option-text em {
      font-style: italic !important;
    }
    .cbt-option .option-text u {
      text-decoration: underline !important;
      text-underline-offset: 3.5px !important;
      text-decoration-thickness: 1.5px !important;
    }
    .cbt-option .option-text b i,
    .cbt-option .option-text i b,
    .cbt-option .option-text strong em,
    .cbt-option .option-text em strong {
      font-weight: 800 !important;
      font-style: italic !important;
      color: #000000 !important;
    }
    .cbt-option.preview-key-highlight .option-text {
      color: #14532d !important;
    }
    .cbt-option.preview-key-highlight .option-text b,
    .cbt-option.preview-key-highlight .option-text strong {
      font-weight: 800 !important;
      color: #052e16 !important;
    }
    /* Formatting High-Contrast: Bold Hitam Pekat, Italic Miring Nyata, Underline */
    b, strong, .tka-bold {
      font-weight: 800 !important;
      color: #000000 !important;
    }
    i, em, .tka-italic {
      font-style: italic !important;
    }
    u, .tka-underline {
      text-decoration: underline !important;
    }
    .cbt-question-text b,
    .cbt-question-text strong,
    .question-text b,
    .question-text strong,
    .tka-stimulus-box b,
    .tka-stimulus-box strong,
    .tka-pertanyaan b,
    .tka-pertanyaan strong,
    .bank-collection-card b,
    .bank-collection-card strong,
    .option-text b,
    .option-text strong,
    .rich-option-input b,
    .rich-option-input strong,
    .cbt-paragraph b,
    .cbt-paragraph strong,
    .cbt-lead-question b,
    .cbt-lead-question strong,
    .cbt-passage-card b,
    .cbt-passage-card strong {
      font-weight: 800 !important;
      color: #000000 !important;
    }
    .cbt-question-text i,
    .cbt-question-text em,
    .question-text i,
    .question-text em,
    .tka-stimulus-box i,
    .tka-stimulus-box em,
    .tka-pertanyaan i,
    .tka-pertanyaan em,
    .bank-collection-card i,
    .bank-collection-card em,
    .option-text i,
    .option-text em,
    .rich-option-input i,
    .rich-option-input em,
    .cbt-paragraph i,
    .cbt-paragraph em,
    .cbt-lead-question i,
    .cbt-lead-question em,
    .cbt-passage-card i,
    .cbt-passage-card em {
      font-style: italic !important;
    }
    .cbt-option .option-letter {
      font-weight: 800;
      color: #1e40af;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      min-width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.88rem;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }
    .cbt-option:hover .option-letter {
      background: #dbeafe;
      border-color: #3b82f6;
      color: #1d4ed8;
    }
    .cbt-option.selected .option-letter {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    }
    .cbt-nav-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: auto;
      padding-top: 16px;
      padding-bottom: 12px;
      border-top: 1.5px solid #d0d7de;
      position: sticky;
      bottom: 0;
      background: #f6f8fa;
      z-index: 95;
    }
    .cbt-nav-btn {
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid #d0d7de;
      background: #fff;
      color: #24292f;
      transition: all 0.15s;
      user-select: none;
    }
    .cbt-nav-btn:hover {
      background: #f3f4f6;
      border-color: #1857a4;
      color: #1857a4;
    }
    .cbt-nav-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .cbt-nav-btn.primary {
      background: #1857a4;
      color: #fff;
      border-color: #1857a4;
      font-weight: 800;
    }
    .cbt-nav-btn.primary:hover {
      background: #123f7a;
    }
    .cbt-nav-btn.flag {
      border: 1.5px solid #d29922;
      color: #744210;
      background: #fef9c3;
      font-weight: 700;
    }
    .cbt-nav-btn.flag:hover {
      background: #fde047;
      border-color: #ca8a04;
      color: #713f12;
    }
    .cbt-nav-btn.flag.active {
      background: #eab308 !important;
      border-color: #a16207 !important;
      color: #000000 !important;
      font-weight: 800 !important;
      box-shadow: 0 0 0 2px #fef08a, 0 2px 8px rgba(234, 179, 8, 0.4) !important;
    }
    /* TKA Rich Question Styles (Stimulus, Audio Listening, Diagram) */
    .tka-stimulus-box {
      margin-bottom: 16px;
      padding: 16px 18px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-left: 5px solid #0284c7;
      border-radius: 8px;
      line-height: 1.7;
      color: #1e293b;
      font-size: 0.96rem;
    }
    .tka-audio-box {
      margin-bottom: 16px;
      padding: 14px 18px;
      background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
      border: 1.5px solid #c4b5fd;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.08);
    }
    .tka-image-box {
      margin: 14px 0;
      text-align: center;
    }
    .tka-image-box img {
      max-width: 100%;
      max-height: 440px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .cbt-exam-notice {
      position: fixed;
      top: 66px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000000;
      max-width: min(560px, calc(100vw - 28px));
      background: #fff8c5;
      color: #3b2300;
      border: 1px solid #d29922;
      border-left: 5px solid #bf8700;
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 16px 40px rgba(13, 17, 23, 0.22);
      font-size: 0.9rem;
      font-weight: 700;
    }
    .cbt-exam-notice.info {
      background: #ddf4ff;
      color: #05305f;
      border-color: #80ccff;
      border-left-color: #0969da;
    }
    .cbt-exam-notice.hidden,
    #cbt-exam-notice.hidden {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }

    /* CBT Footer */
    .cbt-exam-footer {
      grid-column: 1 / -1;
      background: #0d1117;
      color: #8b949e;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 36px;
      font-size: 0.75rem;
      border-top: 1px solid #21262d;
    }
    .cbt-exam-footer .security-badge {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .cbt-exam-footer .security-badge .dot-green {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #3fb950;
    }

    /* ============================================================
       CBT SECURITY & PROCTORING FULLSCREEN OVERLAYS (HIGH PRIORITY)
       ============================================================ */
    /* Mode Dinamis: Restore overlay dinonaktifkan permanen agar tidak pernah memblokir layar */
    .fullscreen-restore-overlay,
    #fullscreen-restore-overlay {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      z-index: -9999 !important;
    }

    .integrity-warning-overlay,
    .cbt-exam-locked-overlay,
    .cbt-dual-screen-warning-overlay,
    #integrity-warning-overlay,
    #cbt-exam-locked-overlay,
    #cbt-dual-screen-warning-overlay {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: rgba(15, 23, 42, 0.95) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      z-index: 1000000 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
      box-sizing: border-box !important;
      pointer-events: auto !important;
    }
    .fullscreen-restore-overlay.hidden,
    .integrity-warning-overlay.hidden,
    .cbt-exam-locked-overlay.hidden,
    .cbt-dual-screen-warning-overlay.hidden,
    #fullscreen-restore-overlay.hidden,
    #integrity-warning-overlay.hidden,
    #cbt-exam-locked-overlay.hidden,
    #cbt-dual-screen-warning-overlay.hidden {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      z-index: -9999 !important;
    }
    #cbt-security-watermark-overlay,
    #cbt-security-watermark-overlay *,
    .cbt-wm-item {
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }
    #cbt-security-watermark-overlay {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      pointer-events: none !important;
      z-index: 99999 !important;
      overflow: hidden !important;
      user-select: none !important;
      opacity: 0.055 !important;
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
      gap: 50px 30px !important;
      align-content: space-around !important;
      justify-content: space-around !important;
      padding: 30px !important;
      transform: rotate(-18deg) scale(1.15) !important;
    }
    .cbt-wm-item {
      font-size: 13px !important;
      font-weight: 800 !important;
      font-family: monospace, sans-serif !important;
      color: #0f172a !important;
      text-align: center !important;
      white-space: nowrap !important;
      letter-spacing: 0.5px !important;
      pointer-events: none !important;
      user-select: none !important;
    }
    body.fullscreen-paused .cbt-exam-container {
      filter: none !important;
      pointer-events: auto !important;
      user-select: auto !important;
      opacity: 1 !important;
      transition: none !important;
    }
    .fullscreen-restore-card,
    .integrity-warning-card,
    .cbt-exam-locked-card {
      background: #ffffff !important;
      border-radius: 18px !important;
      padding: 36px 32px !important;
      max-width: 520px !important;
      width: 100% !important;
      text-align: center !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
      border: 2.5px solid #ef4444 !important;
      animation: cbtPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
      box-sizing: border-box !important;
    }
    @keyframes cbtPopIn {
      0% { opacity: 0; transform: scale(0.92) translateY(10px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .fullscreen-restore-card h3,
    .integrity-warning-card h3,
    .cbt-exam-locked-card h3 {
      margin: 12px 0 8px !important;
      font-size: 1.35rem !important;
      font-weight: 800 !important;
      color: #991b1b !important;
    }
    .fullscreen-restore-card p,
    .integrity-warning-card p,
    .cbt-exam-locked-card p {
      color: #334155 !important;
      font-size: 0.95rem !important;
      line-height: 1.65 !important;
      margin-bottom: 24px !important;
    }
    .fullscreen-restore-card button,
    .integrity-warning-card button,
    .cbt-exam-locked-card button {
      width: 100% !important;
      min-height: 48px !important;
      background: #2563eb !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 10px !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
      transition: all 0.2s ease !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
    }
    .fullscreen-restore-card button:hover,
    .integrity-warning-card button:hover,
    .cbt-exam-locked-card button:hover {
      background: #1d4ed8 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
    }

    /* CBT Mobile & Tablet Ultra-Responsive Stylesheet */
    @media (max-width: 1024px) {
      #exam-card {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        background: #f6f8fa;
        overflow: hidden;
        margin: 0;
      }
      .cbt-exam-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        background: #f6f8fa;
      }
      .cbt-exam-header {
        height: 48px;
        min-height: 48px;
        padding: 0 12px;
        background: #0d1117;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        border-bottom: 1px solid #21262d;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }
      .cbt-exam-header .header-left,
      .cbt-exam-header .header-center,
      .cbt-exam-header .header-right {
        min-width: 0;
      }
      .cbt-exam-header .header-left .lock-badge {
        display: none;
      }
      .cbt-exam-header .header-left .exam-title-text {
        font-size: 0.82rem;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #cbd5e1;
      }
      .cbt-exam-header .header-center {
        font-size: 1.18rem;
        font-weight: 800;
        gap: 6px;
      }
      .cbt-exam-header .header-center .timer-icon {
        font-size: 0.9rem;
      }
      .cbt-exam-header .header-right {
        gap: 8px;
        font-size: 0.8rem;
      }
      .cbt-exam-header .header-right #cheat-warning-badge {
        font-size: 0.72rem;
        padding: 2px 7px;
      }
      .cbt-exam-header .header-right .progress-text {
        font-size: 0.8rem;
      }

      /* Sidebar & Question Navigator row on mobile */
      .cbt-exam-sidebar {
        background: #161b22;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid #30363d;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }
      .cbt-exam-sidebar h4 {
        display: none;
      }
      .cbt-q-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        margin-bottom: 0;
        padding: 2px 0 4px;
        scrollbar-width: thin;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .cbt-q-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex: 0 0 36px;
        border-radius: 6px;
        font-size: 0.82rem;
        aspect-ratio: 1;
      }
      .cbt-sidebar-stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;
        padding-top: 4px;
        border-top: 1px solid #21262d;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
      }
      .cbt-sidebar-stats .stat-row {
        margin-bottom: 0;
        font-size: 0.76rem;
        white-space: nowrap;
      }
      .cbt-sidebar-stats .btn-finish {
        width: auto;
        margin-top: 0;
        padding: 5px 12px;
        font-size: 0.76rem;
        border-radius: 6px;
        white-space: nowrap;
      }

      /* Main Question viewport on mobile */
      .cbt-exam-main {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 14px 20px;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .cbt-question-number {
        font-size: 0.74rem;
        margin-bottom: 4px;
      }
      .cbt-question-topic {
        font-size: 0.72rem;
        padding: 2px 10px;
        margin-bottom: 12px;
      }
      .cbt-question-text {
        font-size: 0.96rem;
        line-height: 1.65;
        margin-bottom: 16px;
      }
      .tka-stimulus-box {
        padding: 10px 12px;
        margin: 8px 0 12px;
        border-radius: 8px;
        font-size: 0.88rem;
      }
      .cbt-option {
        padding: 11px 13px;
        border-radius: 8px;
        margin-bottom: 8px;
        gap: 10px;
      }
      .cbt-option .option-letter {
        font-size: 0.9rem;
        min-width: 18px;
      }


    .cbt-option .option-text {
        font-size: 0.88rem;
        line-height: 1.5;
      }
      .cbt-nav-buttons {
        padding-top: 14px;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
      }
      .cbt-nav-btn {
        padding: 9px 18px;
        font-size: 0.82rem;
        border-radius: 6px;
      }

      /* Footer */
      .cbt-exam-footer {
        height: 30px;
        font-size: 0.68rem;
        padding: 0 12px;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      /* Student Dashboard Responsive */
      .cbt-topbar {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .cbt-topbar-brand {
        font-size: 0.88rem;
      }
      .cbt-topbar-user {
        gap: 8px;
        font-size: 0.78rem;
        max-width: 100%;
      }
      .cbt-topbar-user .user-name {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
      }
      .cbt-topbar-user button {
        padding: 4px 10px;
        font-size: 0.74rem;
        flex-shrink: 0;
      }

      .cbt-exam-list {
        padding: 16px 12px;
      }
      .cbt-exam-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 10px;
      }
      .cbt-exam-card .exam-info h3 {
        font-size: 1.02rem;
      }
      .cbt-exam-card .exam-info .exam-meta {
        gap: 6px 10px;
        font-size: 0.76rem;
      }
      .cbt-exam-card .exam-status {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1px dashed #e2e8f0;
        padding-top: 10px;
        margin-top: 2px;
        width: 100%;
        text-align: left;
      }
      .cbt-exam-card .exam-status .score-badge {
        margin-bottom: 0;
        font-size: 0.76rem;
        padding: 3px 10px;
      }
      .cbt-exam-card .btn-start-exam {
        padding: 7px 16px;
        font-size: 0.8rem;
        border-radius: 6px;
      }
      #reflection-card {
        width: calc(100vw - 24px);
        margin: 16px auto 28px;
        padding: 18px 14px;
        border-radius: 10px;
      }
      #reflection-card h2 {
        font-size: 1.28rem;
      }
      #reflection-card textarea {
        min-height: 108px;
      }
      #reflection-card button {
        width: 100%;
      }
    }

    @media (max-width: 768px) {
      .cbt-exam-header {
        height: auto;
        min-height: 48px;
        padding: 6px 10px;
      }
      .cbt-exam-header .header-left .exam-title-text {
        max-width: 88px;
      }
      .cbt-exam-header .header-center {
        font-size: 1.05rem;
      }
      .cbt-exam-header .header-right {
        gap: 6px;
      }
      .cbt-exam-header .header-right #cheat-warning-badge {
        display: none;
      }
      .cbt-exam-sidebar {
        padding: 8px 10px;
      }
      .cbt-sidebar-stats {
        align-items: stretch;
      }
      .cbt-sidebar-stats .stat-row {
        font-size: 0.72rem;
      }
      .cbt-sidebar-stats .btn-finish {
        padding: 5px 10px;
      }
      .cbt-exam-main {
        padding: 12px 12px 18px;
      }
      .cbt-nav-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .cbt-nav-btn {
        width: 100%;
        padding: 10px 8px;
      }
      #flag-question {
        grid-column: 1 / -1;
        order: -1;
      }
      .fullscreen-restore-card {
        padding: 22px 18px;
      }

      /* Tryout Exam Cards on Mobile & Tablet */
      .cbt-exam-card.tryout-variant {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
        gap: 14px !important;
      }
      .cbt-exam-card.tryout-variant .to-card-action-box {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        align-self: stretch !important;
        margin-top: 6px !important;
        padding-top: 12px !important;
        border-top: 1px dashed #fed7aa !important;
      }
      .cbt-exam-card.tryout-variant .to-token-input {
        font-size: 1.15rem !important;
        height: 46px !important;
        touch-action: manipulation;
      }
      .cbt-exam-card.tryout-variant .to-btn-start-cbt {
        height: 46px !important;
        font-size: 0.92rem !important;
        touch-action: manipulation;
      }
    }

    /* Small Phone Displays (<= 480px) */
    @media (max-width: 480px) {
      .header {
        padding: 10px 12px !important;
      }
      .header-title {
        font-size: 1.15rem !important;
      }
      .header-subtitle {
        font-size: 0.74rem !important;
      }
      .welcome-portal {
        padding: 4px 6px !important;
      }
      .welcome-header h2 {
        font-size: 1.35rem !important;
      }
      .mode-card, .mode-choice-card {
        padding: 22px 16px !important;
        border-radius: 14px !important;
      }
      .cbt-exam-main {
        padding: 12px 10px 18px !important;
      }
      .cbt-question-text {
        font-size: 0.94rem !important;
        line-height: 1.62 !important;
      }
      .cbt-option {
        padding: 10px 12px !important;
      }
      .cbt-nav-buttons {
        gap: 6px !important;
      }
      .cbt-nav-btn {
        padding: 10px 6px !important;
        font-size: 0.8rem !important;
      }
      .modal-content, .cbt-score-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        width: 95vw !important;
        max-width: 95vw !important;
      }
    }

    /* Universal KaTeX & Formula Overflow Safeguards */
    .katex-display, .katex-html {
      max-width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 4px 0 !important;
    }
    .tka-table-wrap, .table-container, .tka-stimulus-box, .tka-pertanyaan {
      max-width: 100% !important;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    button, a, input, select, textarea, [role="button"] {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    /* CBT Result Card Professional */
    .cbt-result-container {
      max-width: 700px;
      margin: 0 auto;
      padding: 30px 20px;
    }
    .cbt-score-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      padding: 40px;
      text-align: center;
      margin-bottom: 24px;
    }
    .cbt-score-card .score-number {
      font-size: 4.5rem;
      font-weight: 900;
      line-height: 1;
      margin: 16px 0;
    }
    .cbt-score-card .score-number.pass { color: #1a7f37; }
    .cbt-score-card .score-number.fail { color: #cf222e; }
    .cbt-score-card .status-badge {
      display: inline-block;
      padding: 6px 24px;
      border-radius: 24px;
      font-size: 1rem;
      font-weight: 700;
    }
    .cbt-score-card .status-badge.pass {
      background: #dafbe1;
      color: #1a7f37;
    }
    .cbt-score-card .status-badge.fail {
      background: #ffebe9;
      color: #cf222e;
    }

    /* ========================================================
       WELCOME PORTAL & TRY OUT STYLES (MULTI-CABANG AFL)
       ======================================================== */
    .welcome-portal {
      max-width: 980px;
      margin: 8px auto 20px;
      padding: 6px 12px;
      animation: fadeIn 0.25s ease-in-out;
    }
    .welcome-header {
      text-align: center;
      margin-bottom: 28px;
    }
    .welcome-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
      color: #0369a1;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.8px;
      border-radius: 999px;
      text-transform: uppercase;
      margin-bottom: 12px;
      border: 1.5px solid #bae6fd;
      box-shadow: 0 2px 6px rgba(3, 105, 161, 0.08);
    }
    .welcome-header h2 {
      margin: 0 0 10px;
      font-size: clamp(1.55rem, 3.4vw, 2.05rem);
      color: #0a2550;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.3px;
    }
    .welcome-subtitle {
      color: #64748b;
      font-size: 0.95rem;
      margin: 0 auto;
      max-width: 600px;
      line-height: 1.55;
    }
    .mode-cards-grid,
    .welcome-choices-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px;
      margin-top: 26px;
      margin-bottom: 24px;
    }
    @media (max-width: 768px) {
      .mode-cards-grid,
      .welcome-choices-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
    .mode-card,
    .mode-choice-card {
      position: relative !important;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 18px;
      padding: 32px 28px 28px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      text-align: left;
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
      box-shadow: 0 4px 18px -2px rgba(15, 41, 66, 0.05);
      overflow: visible;
      min-height: 100%;
    }
    .mode-card:hover,
    .mode-choice-card:hover {
      transform: translateY(-5px);
    }
    .mode-card.mode-practice,
    .mode-choice-card.practice-card {
      border-color: #cbd5e1;
      background: #ffffff;
    }
    .mode-card.mode-practice:hover,
    .mode-choice-card.practice-card:hover {
      border-color: #2563eb;
      box-shadow: 0 20px 35px -6px rgba(37, 99, 235, 0.15);
    }
    .mode-card.mode-tryout,
    .mode-choice-card.tryout-card {
      border-color: #fed7aa;
      background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
    }
    .mode-card.mode-tryout:hover,
    .mode-choice-card.tryout-card:hover {
      border-color: #ea580c;
      box-shadow: 0 20px 35px -6px rgba(234, 88, 12, 0.16);
    }
    .mode-card-badge {
      position: absolute !important;
      top: 18px !important;
      right: 20px !important;
      font-size: 0.74rem;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      letter-spacing: 0.3px;
      line-height: 1.2;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      z-index: 2;
    }
    .mode-practice .mode-card-badge {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .mode-tryout .mode-card-badge {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }
    .mode-icon,
    .mode-icon-wrap {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      margin-bottom: 20px;
      flex-shrink: 0;
    }
    .mode-practice .mode-icon,
    .mode-icon-wrap.bg-blue {
      background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .mode-tryout .mode-icon,
    .mode-icon-wrap.bg-amber {
      background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .mode-card h3,
    .mode-choice-card h3 {
      margin: 0 0 8px;
      font-size: 1.3rem;
      color: #0a2550;
      font-weight: 800;
      line-height: 1.3;
    }
    .mode-desc,
    .mode-choice-card p {
      color: #64748b;
      font-size: 0.88rem;
      line-height: 1.55;
      margin: 0 0 20px;
      min-height: 48px;
    }
    .mode-features {
      list-style: none;
      padding: 0;
      margin: 0 0 26px;
      flex-grow: 1;
    }
    .mode-features li {
      font-size: 0.85rem;
      color: #334155;
      padding: 9px 0;
      border-bottom: 1px dashed #e2e8f0;
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1.4;
    }
    .mode-features li:last-child {
      border-bottom: none;
    }
    .mode-features li::before {
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: 0.72rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    .mode-practice .mode-features li::before {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .mode-tryout .mode-features li::before {
      background: #fef3c7;
      color: #b45309;
    }
    .btn-select-mode {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: none;
      border-radius: 12px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
      text-decoration: none;
      margin-top: auto;
    }
    .btn-select-mode.btn-blue {
      background: linear-gradient(135deg, #1857a4 0%, #1e40af 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(24, 87, 164, 0.25);
    }
    .btn-select-mode.btn-blue:hover {
      background: linear-gradient(135deg, #123f7a 0%, #1e3a8a 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(18, 63, 122, 0.35);
    }
    .btn-select-mode.btn-amber {
      background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(180, 83, 9, 0.25);
    }
    .btn-select-mode.btn-amber:hover {
      background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(146, 64, 14, 0.35);
    }
    .welcome-footer {
      text-align: center;
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid #f1f5f9;
    }
    .btn-teacher-portal {
      display: none !important;
    }

    .btn-back-mode {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      color: #1857a4;
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 6px;
      margin-bottom: 12px;
      transition: all 0.15s;
    }
    .btn-back-mode:hover {
      background: #eaf3ff;
      color: #0a2550;
    }
    .tryout-completion-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 38px 30px;
      box-shadow: 0 12px 34px rgba(27, 67, 118, 0.1);
      max-width: 580px;
      margin: 30px auto;
      text-align: center;
      border-top: 6px solid #b45309;
      border: 1px solid #e2e8f0;
      border-top-width: 6px;
    }
    .tryout-completion-icon {
      font-size: 3.5rem;
      margin-bottom: 14px;
    }
    .tryout-meta-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      text-align: left;
      font-size: 0.88rem;
    }
    .tryout-meta-table td {
      padding: 9px 12px;
      border-bottom: 1px solid #e2e8f0;
    }
    .tryout-meta-table td:first-child {
      color: #64748b;
      font-weight: 600;
      width: 40%;
    }
    .tryout-meta-table td:last-child {
      font-weight: 700;
      color: #0a2550;
    }
    .tryout-notice-box {
      background: #fefce8;
      border: 1px solid #fef08a;
      border-radius: 8px;
      padding: 14px 16px;
      color: #854d0e;
      font-size: 0.84rem;
      line-height: 1.5;
      margin-bottom: 24px;
      text-align: left;
    }
  
    /* ======================================================= */
    /* TASTE-SKILL ANTI-SLOP: MODERN TABLES, CARDS & CBT UI   */
    /* ======================================================= */

    /* Universal Modern Table Polish */
    #cbt-proctor-table, #tryout-matrix-table, .tryout-meta-table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
      width: 100% !important;
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: var(--shadow-xs) !important;
      background: #ffffff !important;
    }
    #cbt-proctor-table thead tr, #tryout-matrix-table thead tr {
      background: #f8fafc !important;
      color: #475569 !important;
      font-size: 0.76rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid var(--line) !important;
    }
    #cbt-proctor-table th, #tryout-matrix-table th {
      padding: 12px 14px !important;
      border-bottom: 1px solid var(--line) !important;
      border-top: none !important;
    }
    #cbt-proctor-table td, #tryout-matrix-table td {
      padding: 11px 14px !important;
      border-bottom: 1px solid #f1f5f9 !important;
      color: #1e293b !important;
      font-size: 0.88rem !important;
      transition: background 0.12s ease !important;
    }
    #cbt-proctor-table tbody tr:hover, #tryout-matrix-table tbody tr:hover {
      background-color: #f8fafc !important;
    }
    #cbt-proctor-table tbody tr:last-child td,
    #tryout-matrix-table tbody tr:last-child td {
      border-bottom: none !important;
    }

    /* MODERN SPREADSHEET TABLE FOR STUDENT CBT GRID */
    #excel-student-table {
      min-width: 1380px !important;
      width: 100% !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      background: #ffffff !important;
      border: none !important;
    }
    #excel-student-table thead tr th {
      position: sticky !important;
      top: 0 !important;
      z-index: 10 !important;
      background: #f1f5f9 !important;
      color: #334155 !important;
      font-size: 0.78rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      padding: 10px 8px !important;
      border-bottom: 2px solid #cbd5e1 !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    #excel-student-table td {
      padding: 5px 6px !important;
      border-bottom: 1px solid #f1f5f9 !important;
      vertical-align: middle !important;
    }
    #excel-student-table tbody tr:hover td {
      background-color: #f8fafc !important;
    }
    .student-grid-input {
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      min-height: 35px !important;
      height: 35px !important;
      padding: 5px 8px !important;
      font-size: 0.84rem !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 6px !important;
      background: #ffffff !important;
      color: #1e293b !important;
      transition: all 0.15s ease !important;
    }
    .student-grid-input:focus {
      border-color: #2563eb !important;
      background: #ffffff !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
    }
    .student-grid-input:hover {
      border-color: #94a3b8 !important;
    }

    /* Tabular Numeral Alignments for IDs and Metrics */
    #cbt-proctor-table td:nth-child(1),
    #cbt-proctor-table td:nth-child(2),
    #excel-student-table td:nth-child(1),
    #excel-student-table td:nth-child(2),
    .cbt-exam-header .header-center,
    #timer {
      font-family: var(--font-mono) !important;
      font-variant-numeric: tabular-nums !important;
    }

    /* Metric & KPI Cards */
    .metric {
      border: 1px solid var(--line) !important;
      border-top: 3px solid var(--blue-600) !important;
      border-radius: 12px !important;
      padding: 14px 16px !important;
      background: #ffffff !important;
      box-shadow: var(--shadow-xs) !important;
      transition: all 0.15s ease !important;
    }
    .metric:hover {
      border-color: #cbd5e1 !important;
      box-shadow: var(--shadow-sm) !important;
      transform: translateY(-1px);
    }
    .metric strong {
      font-family: var(--font-mono) !important;
      font-variant-numeric: tabular-nums !important;
      color: var(--ink) !important;
      font-size: 1.55rem !important;
    }

    /* Option Cards Hover & Selection Polish */
    .cbt-option {
      border: 1.5px solid #e2e8f0 !important;
      border-radius: 10px !important;
      transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .cbt-option:hover {
      border-color: #93c5fd !important;
      background: #f8fafc !important;
      transform: translateX(2px);
    }
    .cbt-option.selected {
      border-color: var(--blue-600) !important;
      background: #eff6ff !important;
      box-shadow: 0 0 0 1px var(--blue-600) !important;
    }

    /* CBT Navigation Buttons & Squircle Grid */
    .cbt-q-btn {
      border-radius: 10px !important;
      font-family: var(--font-mono) !important;
      font-weight: 600 !important;
      transition: all 0.15s ease !important;
    }
    .cbt-q-btn:hover {
      transform: scale(1.05);
    }

    /* Timer Pill */
    #timer {
      border-radius: 10px !important;
      font-family: var(--font-mono) !important;
      letter-spacing: 0.04em !important;
      box-shadow: var(--shadow-xs) !important;
    }

    body.exam-in-progress {
      overflow: hidden !important;
      background: #f6f8fa !important;
    }
    body.exam-in-progress header,
    body.exam-in-progress .header,
    body.exam-in-progress .brand-panel,
    body.exam-in-progress .brand-identity,
    body.exam-in-progress .value-strip,
    body.exam-in-progress .welcome-portal,
    body.exam-in-progress #welcome-mode-card,
    body.exam-in-progress #login-card,
    body.exam-in-progress #tryout-login-card,
    body.exam-in-progress #tryout-dashboard,
    body.exam-in-progress #student-dashboard,
    body.exam-in-progress #student-history-card,
    body.exam-in-progress #admin-card,
    body.exam-in-progress .site-footer,
    body.exam-in-progress .tabs {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
      z-index: -99999 !important;
    }
    body.exam-in-progress #main-shell,
    body.exam-in-progress .shell,
    body.exam-in-progress .app-panel {
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 0 !important;
      height: 100dvh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      background: #f6f8fa !important;
    }
    body.exam-in-progress #exam-card {
      position: fixed !important;
      inset: 0 !important;
      z-index: 999999 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: #f6f8fa !important;
    }
    body.exam-in-progress .cbt-exam-container {
      width: 100% !important;
      max-width: 100% !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
      overflow: hidden !important;
      grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) !important;
    }
    body.exam-in-progress .cbt-exam-header {
      min-width: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 100 !important;
    }
    body.exam-in-progress .cbt-exam-sidebar {
      min-width: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 1000 !important;
      pointer-events: auto !important;
    }
    body.exam-in-progress .cbt-q-grid {
      position: relative !important;
      z-index: 1001 !important;
      pointer-events: auto !important;
    }
    body.exam-in-progress .cbt-q-btn {
      position: relative !important;
      z-index: 1002 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
    }
    body.exam-in-progress .cbt-exam-main {
      min-width: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 50 !important;
    }
    body.exam-in-progress .cbt-exam-footer {
      min-width: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 50 !important;
    }
    body.exam-compact-exam .cbt-exam-container {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
    }
    body.exam-compact-exam .cbt-exam-header {
      width: 100% !important;
      height: auto !important;
      min-height: 48px !important;
      padding: 6px 10px !important;
      gap: 8px !important;
      flex: 0 0 auto !important;
      overflow: hidden !important;
    }
    body.exam-compact-exam .cbt-exam-header .header-left,
    body.exam-compact-exam .cbt-exam-header .header-center,
    body.exam-compact-exam .cbt-exam-header .header-right {
      min-width: 0 !important;
      flex: 0 1 auto !important;
    }
    body.exam-compact-exam .cbt-exam-header .header-left .lock-badge,
    body.exam-compact-exam .cbt-exam-header .status-dot {
      display: none !important;
    }
    body.exam-compact-exam .cbt-exam-header .exam-title-text {
      display: block !important;
      max-width: 86px !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
      font-size: 0.72rem !important;
    }
    body.exam-compact-exam .cbt-exam-header .header-center {
      font-size: 1.05rem !important;
    }
    body.exam-compact-exam .cbt-exam-header #cheat-warning-badge {
      max-width: 118px !important;
      white-space: normal !important;
      text-align: center !important;
      line-height: 1.25 !important;
      font-size: 0.68rem !important;
      padding: 3px 8px !important;
    }
    body.exam-compact-exam .cbt-exam-header .progress-text {
      font-size: 0.72rem !important;
      white-space: nowrap !important;
    }
    body.exam-compact-exam .cbt-exam-sidebar {
      width: 100% !important;
      max-width: 100% !important;
      min-height: 96px !important;
      max-height: 132px !important;
      padding: 7px 10px !important;
      border-right: 0 !important;
      border-bottom: 1px solid #30363d !important;
      flex: 0 0 auto !important;
      overflow: hidden !important;
    }
    body.exam-compact-exam .cbt-exam-sidebar h4 {
      display: none !important;
    }
    body.exam-compact-exam .cbt-q-grid {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 6px !important;
      margin: 0 !important;
      padding: 0 0 5px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }
    body.exam-compact-exam .cbt-q-btn {
      width: 38px !important;
      min-width: 38px !important;
      height: 38px !important;
      flex: 0 0 38px !important;
      aspect-ratio: auto !important;
      border-radius: 7px !important;
      font-size: 0.82rem !important;
    }
    body.exam-compact-exam .cbt-legend {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 10px !important;
      margin: 0 !important;
      overflow-x: auto !important;
      font-size: 0.68rem !important;
    }
    body.exam-compact-exam .cbt-sidebar-stats {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 4px 6px !important;
      margin-top: 4px !important;
      background: #161b22 !important;
      border-top: 1px solid #30363d !important;
    }
    body.exam-compact-exam .cbt-sidebar-stats .stat-row {
      display: none !important;
    }
    body.exam-compact-exam .cbt-sidebar-stats .btn-finish {
      flex: 1 1 auto !important;
      min-height: 32px !important;
      font-size: 0.72rem !important;
      padding: 4px 8px !important;
      margin: 0 !important;
    }
    body.exam-compact-exam .cbt-sidebar-stats .btn-emergency-exit {
      flex: 0 0 auto !important;
      width: auto !important;
      min-height: 32px !important;
      font-size: 0.72rem !important;
      padding: 4px 8px !important;
      margin-top: 0 !important;
    }
    body.exam-compact-exam .cbt-exam-main {
      width: 100% !important;
      max-width: 100% !important;
      min-height: 0 !important;
      flex: 1 1 auto !important;
      padding: 12px 12px 18px !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      background: #f6f8fa !important;
    }
    body.exam-compact-exam .cbt-question-text {
      margin-bottom: 12px !important;
    }

    .cbt-option .option-text {
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }
    body.exam-compact-exam .cbt-exam-footer {
      display: none !important;
    }
    body.exam-compact-exam .cbt-nav-buttons {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
    }
    body.exam-compact-exam .cbt-nav-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 0.8rem !important;
    }
    body.exam-compact-exam #flag-question {
      grid-column: 1 / -1 !important;
      order: -1 !important;
    }
    @media (max-width: 640px) {
      body:not(.exam-in-progress) .shell {
        width: 100% !important;
        margin: 0 !important;
      }
      body:not(.exam-in-progress) .brand-panel {
        min-height: auto !important;
        padding: 16px 14px !important;
        border-radius: 0 !important;
      }
      body:not(.exam-in-progress) .app-panel {
        min-height: 100dvh !important;
        padding: 16px 12px 24px !important;
        border-radius: 0 !important;
      }
      body:not(.exam-in-progress) .tabs {
        width: 100% !important;
        grid-template-columns: 1fr !important;
      }
      body:not(.exam-in-progress) .cbt-login-page {
        padding: 14px 8px !important;
        border-radius: 10px !important;
      }
      body:not(.exam-in-progress) .cbt-login-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 14px !important;
      }
    }
  
    /* ========================================================
       TEACHER PREVIEW & SIMULATION BANNER STYLES
       ======================================================== */
    .teacher-preview-banner {
      grid-column: 1 / -1 !important;
      position: relative !important;
      top: 0 !important;
      z-index: 1000005 !important;
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
      border-bottom: 3px solid #6366f1 !important;
      padding: 8px 16px !important;
      color: #ffffff !important;
      box-shadow: 0 4px 20px rgba(30, 27, 75, 0.4) !important;
      flex-shrink: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    body.teacher-preview-active #exam-card {
      display: flex !important;
      flex-direction: column !important;
      height: 100vh !important;
      height: 100dvh !important;
      overflow: hidden !important;
    }
    body.teacher-preview-active .teacher-preview-banner {
      flex: 0 0 auto !important;
      width: 100% !important;
      position: relative !important;
      z-index: 1000005 !important;
    }
    body.teacher-preview-active .cbt-exam-container {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: calc(100dvh - 54px) !important;
    }
    .preview-key-highlight {
      background: #f0fdf4 !important;
      border: 2px solid #22c55e !important;
      color: #14532d !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15) !important;
    }
    .btn-preview-tool {
      padding: 5px 12px;
      font-size: 0.82rem;
      font-weight: 700;
      border-radius: 6px;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      transition: all 0.2s ease;
    }
    .btn-preview-tool:hover {
      filter: brightness(0.95);
      transform: translateY(-1px);
    }
    .btn-preview-tool.active-green {
      background: #dcfce7 !important;
      color: #166534 !important;
      border-color: #86efac !important;
    }
    .btn-preview-tool.exit {
      background: #fff1f2 !important;
      color: #b91c1c !important;
      border-color: #fca5a5 !important;
    }

    /* ==========================================================================
       ENTERPRISE ADMIN PRO LAYOUT: FULL-SCREEN CONTROL PANEL (100VW x 100VH)
       ========================================================================== */
    body.admin-mode-active,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) {
      margin: 0 !important;
      padding: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: 100vw !important;
      max-height: 100vh !important;
      overflow: hidden !important;
      background: #080d1a !important;
    }

    body.admin-mode-active .brand-panel,
    body.admin-mode-active .site-footer,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) .brand-panel,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) .site-footer {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    body.admin-mode-active #main-shell,
    body.admin-mode-active .shell,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) #main-shell,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) .shell {
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      background: transparent !important;
    }

    body.admin-mode-active .app-panel,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) .app-panel {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      background: transparent !important;
    }

    body.admin-mode-active #admin.page,
    body:has(#admin.page.active:not(:has(#admin-dashboard.hidden))) #admin.page {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    .admin-pro-layout {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      min-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      display: flex !important;
      overflow: hidden !important;
      background: #f8fafc !important;
      z-index: 1000 !important;
    }

    /* Modal dialogs float on top of fullscreen admin layout & CBT exam */
    .modal-overlay {
      z-index: 10000000 !important;
    }
    .swal2-container, div.swal2-container {
      z-index: 20000000 !important;
      pointer-events: auto !important;
    }
    .swal2-popup, .swal2-modal {
      z-index: 20000001 !important;
      pointer-events: auto !important;
    }

    /* Left Sidebar Control Panel */
    .admin-sidebar {
      width: 285px;
      min-width: 285px;
      max-width: 285px;
      height: 100vh;
      max-height: 100vh;
      flex-shrink: 0;
      background: #080d1a;
      color: #f1f5f9;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #1e293b;
      position: relative;
      z-index: 50;
      overflow: hidden;
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar-header {
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      flex-shrink: 0;
    }

    .sidebar-brand-box {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sidebar-brand-logo {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, #1e40af, #0284c7);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
      flex-shrink: 0;
      overflow: hidden;
    }

    .sidebar-brand-logo img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }

    .sidebar-brand-title {
      font-size: 0.96rem;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0.5px;
      line-height: 1.2;
    }

    .sidebar-brand-sub {
      font-size: 0.72rem;
      font-weight: 600;
      color: #38bdf8;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 175px;
    }

    /* Admin Profile Card */
    .sidebar-user-card {
      margin: 14px 14px 10px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-avatar-badge {
      font-size: 1.4rem;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .user-meta-name {
      font-size: 0.84rem;
      font-weight: 700;
      color: #f8fafc;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }

    .user-meta-role {
      font-size: 0.72rem;
      font-weight: 600;
      color: #4ade80;
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 2px;
    }

    .role-pulse-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px #22c55e;
      animation: pulse-ring 2s infinite;
    }

    /* Sidebar Section Headers */
    .sidebar-nav-label {
      padding: 10px 16px 4px;
      font-size: 0.7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: #64748b;
    }

    /* Workspace Selector in Sidebar */
    .sidebar-ws-pills {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0 14px 10px;
    }

    .sidebar-ws-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: #cbd5e1;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
      transition: all 0.2s ease;
      width: 100%;
    }

    .sidebar-ws-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #ffffff;
    }

    .sidebar-ws-btn.active-tryout {
      background: linear-gradient(135deg, #312e81, #3730a3);
      border-color: #6366f1;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    .sidebar-ws-btn.active-latihan {
      background: linear-gradient(135deg, #065f46, #047857);
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    /* Sidebar Nav Links */
    .sidebar-nav-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 6px 10px 24px;
      scrollbar-width: thin;
      scrollbar-color: #334155 #080d1a;
    }
    .sidebar-nav-scroll::-webkit-scrollbar {
      width: 5px;
    }
    .sidebar-nav-scroll::-webkit-scrollbar-track {
      background: #080d1a;
    }
    .sidebar-nav-scroll::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 4px;
    }

    .sidebar-nav-group-header {
      margin: 12px 0 4px;
      padding: 4px 6px 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .admin-sidebar-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .admin-sidebar .sidebar-nav-item,
    .admin-sidebar .admin-subtab {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 36px;
      padding: 7px 10px;
      margin-bottom: 2px;
      border-radius: 7px;
      border: 1px solid transparent;
      background: transparent;
      color: #94a3b8;
      font-size: 0.81rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      transition: all 0.16s ease;
      text-decoration: none;
      box-shadow: none;
      box-sizing: border-box;
    }

    .admin-sidebar .sidebar-nav-item .nav-icon,
    .admin-sidebar .admin-subtab .nav-icon {
      font-size: 1.05rem;
      width: 20px;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
    }

    .admin-sidebar .sidebar-nav-item .nav-text,
    .admin-sidebar .admin-subtab .nav-text {
      flex: 1;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .admin-sidebar .sidebar-nav-item .nav-pill-badge,
    .admin-sidebar .admin-subtab .nav-pill-badge {
      font-size: 0.62rem;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 8px;
      background: #0284c7;
      color: #fff;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .admin-sidebar .sidebar-nav-item:hover,
    .admin-sidebar .admin-subtab:hover {
      background: rgba(255, 255, 255, 0.07);
      color: #f1f5f9;
      transform: none;
    }

    .admin-sidebar .sidebar-nav-item.active,
    .admin-sidebar .admin-subtab.active {
      background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      border-color: rgba(96, 165, 250, 0.35) !important;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    }

    /* Sidebar Footer */
    .sidebar-footer-box {
      padding: 12px 14px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(0, 0, 0, 0.2);
    }

    .sidebar-system-telemetry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 0.72rem;
      color: #94a3b8;
    }

    .telemetry-indicator {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #4ade80;
      font-weight: 700;
    }

    .sidebar-action-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
    }

    .sidebar-quick-btn {
      padding: 6px 4px;
      border-radius: 6px;
      font-size: 0.74rem;
      font-weight: 700;
      text-align: center;
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: #cbd5e1;
      transition: all 0.2s ease;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-quick-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }

    .sidebar-quick-btn.danger {
      color: #fca5a5;
      border-color: rgba(239, 68, 68, 0.3);
    }

    .sidebar-quick-btn.danger:hover {
      background: #dc2626;
      color: #ffffff;
    }

    /* Main Content Area */
    .admin-main-stage {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      background: #f8fafc;
    }

    .admin-topbar {
      min-height: 58px;
      padding: 10px 24px;
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 30;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .topbar-toggle-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e293b;
      font-size: 1.15rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.16s ease;
    }

    .topbar-toggle-btn:hover {
      background: #e2e8f0;
    }

    .topbar-breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.88rem;
    }

    .crumb-root {
      color: #64748b;
      font-weight: 500;
    }

    .crumb-sep {
      color: #cbd5e1;
    }

    .crumb-current {
      color: #0f172a;
      font-weight: 800;
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .topbar-ws-badge {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 800;
      color: #ffffff;
      background: #4f46e5;
      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
    }

    .topbar-ws-badge.latihan {
      background: #059669;
      box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
    }

    .admin-viewport {
      padding: 20px 24px 36px;
      flex: 1;
      overflow-y: auto;
    }

    /* Settings Panel Cards & Grid */
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
      gap: 20px;
      margin-top: 16px;
    }

    .settings-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 22px;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
      display: flex;
      flex-direction: column;
    }

    .settings-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 14px;
      margin-bottom: 16px;
      border-bottom: 1.5px solid #f1f5f9;
    }

    .settings-card-icon {
      font-size: 1.5rem;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: #eff6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .settings-card-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 800;
      color: #0f172a;
    }

    .settings-card-desc {
      margin: 2px 0 0;
      font-size: 0.78rem;
      color: #64748b;
      line-height: 1.35;
    }

    .setting-form-group {
      margin-bottom: 14px;
    }

    .setting-label {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: #334155;
      margin-bottom: 5px;
    }

    .setting-input {
      width: 100%;
      padding: 8px 12px;
      border-radius: 7px;
      border: 1.5px solid #cbd5e1;
      font-size: 0.88rem;
      color: #0f172a;
      background: #ffffff;
      transition: all 0.18s ease;
      min-height: 38px;
      box-sizing: border-box;
    }

    .setting-input:focus {
      border-color: #3b82f6;
      outline: none;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .setting-help {
      font-size: 0.74rem;
      color: #64748b;
      margin-top: 4px;
      line-height: 1.35;
    }

    .setting-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .setting-toggle-label {
      font-size: 0.84rem;
      font-weight: 700;
      color: #1e293b;
    }

    .setting-toggle-desc {
      font-size: 0.74rem;
      color: #64748b;
    }

    .setting-btn-primary {
      background: #1e40af;
      color: #ffffff;
      border: none;
      border-radius: 7px;
      padding: 9px 18px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: all 0.18s ease;
      box-shadow: 0 2px 6px rgba(30, 64, 175, 0.25);
    }

    .setting-btn-primary:hover {
      background: #1d4ed8;
      transform: translateY(-1px);
    }

    /* Responsive Collapsible Drawer */
    @media (max-width: 992px) {
      .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.45);
      }
      .admin-sidebar.sidebar-open {
        transform: translateX(0);
      }
      .admin-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        z-index: 45;
      }
      .admin-sidebar-backdrop.active {
        display: block;
      }
    }

    /* Parent Report Sender Exams List & Modal Checkboxes */
    #parent-report-exams-list {
      max-height: 180px;
      overflow-y: auto;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    #parent-report-exams-list label {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 7px 10px !important;
      margin-bottom: 0 !important;
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 6px !important;
      cursor: pointer !important;
      transition: all 0.15s ease !important;
    }
    #parent-report-exams-list label:hover {
      background: #f1f5f9 !important;
      border-color: #cbd5e1 !important;
    }
    #parent-report-exams-list input[type="checkbox"] {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }

    /* ========================================================
       HIGH CONTRAST & WCAG AAA ENFORCEMENT FOR PURPLE / INDIGO
       Mencegah teks gelap/hitam di atas latar belakang ungu tua
       ======================================================== */
    [style*="#4f46e5"],
    [style*="#4338ca"],
    [style*="#312e81"],
    [style*="#1e1b4b"],
    [style*="#3730a3"],
    [style*="#6366f1"],
    [style*="#7c3aed"],
    [style*="#6d28d9"],
    [style*="#581c87"],
    [style*="#6b21a8"],
    .topbar-ws-badge,
    .topbar-ws-badge *,
    .sidebar-ws-btn.active-tryout,
    .sidebar-ws-btn.active-tryout *,
    .teacher-preview-banner,
    .teacher-preview-banner *,
    .nav-pill-badge[style*="#4f46e5"] {
      color: #ffffff !important;
    }

    /* Proteksi Tombol & Badge saat Hover */
    .secondary-button[style*="#4f46e5"]:hover,
    .secondary-button[style*="#4338ca"]:hover,
    .secondary-button[style*="#312e81"]:hover,
    .secondary-button[style*="#6366f1"]:hover,
    .secondary-button[style*="#7c3aed"]:hover,
    button[style*="#4f46e5"]:hover,
    button[style*="#4338ca"]:hover,
    button[style*="#312e81"]:hover,
    button[style*="#6366f1"]:hover,
    button[style*="#7c3aed"]:hover {
      color: #ffffff !important;
      filter: brightness(1.12);
    }

    /* CBT Action Buttons & Highest-Priority Stacking (Kebal dari Stacking Context) */
    .swal2-container, div.swal2-container {
      z-index: 20000000 !important;
      pointer-events: auto !important;
    }
    .swal2-popup, .swal2-modal {
      z-index: 20000001 !important;
      pointer-events: auto !important;
      max-width: 92vw !important;
      box-sizing: border-box !important;
    }
    .swal2-html-container {
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }

    /* ============================================================
       CBT LAYOUT: SEPARATED SCROLLABLE QUESTION AREA & STATIC ACTION BAR
       ============================================================ */
    body.exam-in-progress .cbt-exam-main,
    .cbt-exam-main,
    #question-box {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      background: #f6f8fa !important;
      position: relative !important;
      min-width: 0 !important;
    }

    /* Area Soal Mandiri Scrollable (Tanpa Tumpang Tindih Tombol) */
    .cbt-question-scroll-area {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 24px 36px 32px !important;
      scroll-behavior: smooth !important;
      min-height: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 10 !important;
    }

    /* Bilah Navigasi Bawah: Static di Dasar Panel Soal (Tidak Pernah Menutupi Opsi) */
    body.exam-in-progress .cbt-nav-buttons,
    .cbt-nav-buttons {
      flex: 0 0 auto !important;
      position: static !important;
      width: 100% !important;
      box-sizing: border-box !important;
      background: #ffffff !important;
      border-top: 1.5px solid #d0d7de !important;
      padding: 12px 28px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      gap: 12px !important;
      box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.05) !important;
      z-index: 100 !important;
      pointer-events: auto !important;
    }

    /* Optimalisasi Gambar Soal: Terpusat & Proporsional di Layar Siswa */
    .cbt-question-scroll-area .tka-image-box img,
    .cbt-exam-main .tka-image-box img,
    .cbt-question-scroll-area img,
    .tka-img-fluid {
      max-height: 250px !important;
      max-width: 90% !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
      border: 1px solid #e2e8f0 !important;
      margin: 8px auto !important;
      display: block !important;
    }

    /* CBT Sidebar: Scroll Mandiri pada Grid Tombol Soal */
    body.exam-in-progress .cbt-exam-sidebar,
    .cbt-exam-sidebar {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      height: 100% !important;
      max-height: 100% !important;
      padding: 16px 14px 10px !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 1000 !important;
      pointer-events: auto !important;
    }

    body.exam-in-progress .cbt-q-grid,
    .cbt-q-grid {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      min-height: 80px !important;
      max-height: none !important;
      padding-right: 4px !important;
      scrollbar-width: thin !important;
      margin-bottom: 8px !important;
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 6px !important;
    }

    body.exam-in-progress .cbt-legend,
    .cbt-legend {
      flex: 0 0 auto !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 4px !important;
      margin: 4px 0 8px !important;
      font-size: 0.74rem !important;
    }

    body.exam-in-progress .cbt-sidebar-stats,
    .cbt-sidebar-stats {
      flex: 0 0 auto !important;
      position: static !important;
      margin-top: auto !important;
      padding-top: 8px !important;
      padding-bottom: 6px !important;
      border-top: 1px solid #30363d !important;
      background: #161b22 !important;
      box-shadow: 0 -4px 10px rgba(13, 17, 23, 0.5) !important;
      z-index: 105 !important;
      pointer-events: auto !important;
    }

    body.exam-in-progress .cbt-sidebar-stats .stat-row,
    .cbt-sidebar-stats .stat-row {
      margin-bottom: 4px !important;
      font-size: 0.8rem !important;
    }

    /* Tombol Aksi Selesai & Keluar: 100% Clickable & High Contrast */
    body.exam-in-progress .btn-finish,
    body.exam-in-progress #cbt-finish-btn,
    .cbt-sidebar-stats .btn-finish,
    #cbt-finish-btn {
      position: relative !important;
      z-index: 110 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      width: 100% !important;
      min-height: 40px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      border-radius: 8px !important;
      font-size: 0.85rem !important;
      font-weight: 800 !important;
      transition: all 0.2s ease !important;
      user-select: none !important;
    }

    body.exam-in-progress .btn-emergency-exit,
    body.exam-in-progress #cbt-emergency-exit-btn,
    .cbt-sidebar-stats .btn-emergency-exit,
    #cbt-emergency-exit-btn {
      position: relative !important;
      z-index: 110 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      width: 100% !important;
      min-height: 34px !important;
      margin-top: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      border-radius: 8px !important;
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      transition: all 0.2s ease !important;
      user-select: none !important;
    }

    body.exam-in-progress .cbt-nav-btn,
    body.exam-in-progress #next-question,
    body.exam-in-progress #prev-question,
    body.exam-in-progress #flag-question,
    body.exam-in-progress #cbt-bottom-exit-btn {
      position: relative !important;
      z-index: 1006 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      padding: 10px 24px !important;
      border-radius: 8px !important;
      font-size: 0.88rem !important;
      font-weight: 700 !important;
      transition: all 0.15s !important;
      user-select: none !important;
    }

    /* Opsi Jawaban: Responsif, Terpisah Bersih, & 100% Bebas Klik */
    .cbt-option {
      position: relative !important;
      z-index: 25 !important;
      pointer-events: auto !important;
      touch-action: manipulation !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      cursor: pointer !important;
      margin-bottom: 12px !important;
    }
    .cbt-option * {
      pointer-events: none !important;
    }
    .cbt-matrix-tf-container {
      position: relative !important;
      z-index: 25 !important;
      margin-bottom: 24px !important;
    }
    .cbt-matrix-table td label {
      cursor: pointer !important;
      touch-action: manipulation !important;
      width: 100% !important;
      height: 100% !important;
    }

    /* Tombol Nomor Soal Sidebar */
    body.exam-in-progress .cbt-q-btn,
    .cbt-q-btn {
      width: 100% !important;
      height: 38px !important;
      min-height: 38px !important;
      max-height: 42px !important;
      aspect-ratio: auto !important;
      font-size: 0.92rem !important;
      font-weight: 800 !important;
      border-radius: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
      z-index: 1002 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: manipulation !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }



/* ==============================================================================
   CBT SCREEN-AGNOSTIC CONTRACT
   Area soal yang menggulir, action bar tetap terlihat, dan seluruh kontrol bebas klik.
   ============================================================================== */
#fullscreen-restore-overlay,
.fullscreen-restore-overlay {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

#cbt-fullscreen-enforce-overlay.hidden {
  display: none !important;
}

#cbt-fullscreen-enforce-overlay:not(.hidden) {
  display: flex !important;
}

body.fullscreen-paused {
  overflow: auto !important;
}

.cbt-exam-container,
.cbt-exam-main,
.cbt-question-scroll-area,
.cbt-nav-buttons,
#question-nav,
#cbt-question-nav-grid,
.cbt-option,
.cbt-matrix-tf-container,
.cbt-matrix-table,
.cbt-matrix-table label {
  pointer-events: auto !important;
}

.cbt-exam-container {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.cbt-exam-main,
#question-box {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.cbt-question-scroll-area {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: clamp(12px, 2.2vw, 28px) clamp(12px, 2.8vw, 36px) 28px !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

.cbt-nav-buttons {
  flex: 0 0 auto !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 8px clamp(10px, 2vw, 24px) !important;
  background: #ffffff !important;
  border-top: 1.5px solid #d0d7de !important;
  box-sizing: border-box !important;
  z-index: 20 !important;
}

.cbt-nav-buttons .cbt-nav-btn {
  min-height: 44px !important;
  touch-action: manipulation !important;
}

.cbt-exam-sidebar {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 3 !important;
}

body.exam-compact-exam .cbt-exam-sidebar {
  height: auto !important;
  min-height: 0 !important;
  max-height: 192px !important;
  flex: 0 0 auto !important;
  padding: 8px 10px !important;
}

body.exam-compact-exam #question-nav {
  flex: 0 1 auto !important;
  height: 96px !important;
  min-height: 44px !important;
  max-height: 96px !important;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
  grid-auto-rows: 44px !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.exam-compact-exam .cbt-legend {
  display: flex !important;
  justify-content: space-between !important;
  margin: 4px 0 !important;
  gap: 6px !important;
}

body.exam-compact-exam .cbt-sidebar-stats {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.exam-compact-exam .cbt-sidebar-stats button {
  min-height: 44px !important;
  max-width: 100% !important;
}

body.exam-compact-exam .cbt-exam-main,
body.exam-compact-exam #question-box {
  height: auto !important;
  flex: 1 1 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.exam-compact-exam #cbt-emergency-exit-btn {
  display: none !important;
}

body.exam-compact-exam .cbt-nav-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

body.exam-compact-exam .cbt-nav-buttons .cbt-nav-btn {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 6px !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  order: 0 !important;
}

body.exam-compact-exam .cbt-nav-buttons #flag-question {
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
}

body.exam-compact-exam .cbt-exam-header .header-right {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 3px !important;
}

body.exam-compact-exam #cbt-autosave-badge {
  display: none !important;
}

@media (max-height: 480px) {
  body.exam-compact-exam #question-nav {
    height: 44px !important;
    max-height: 44px !important;
  }
  body.exam-compact-exam .cbt-legend {
    display: none !important;
  }
  body.exam-compact-exam .cbt-exam-sidebar {
    max-height: 100px !important;
    padding: 4px 8px !important;
  }
  body.exam-compact-exam .cbt-nav-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 4px 6px !important;
  }
  body.exam-compact-exam .cbt-nav-buttons .cbt-nav-btn {
    flex: 1 1 0 !important;
    width: auto !important;
  }
}

#question-nav,
#cbt-question-nav-grid,
.cbt-q-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
  grid-auto-rows: minmax(44px, auto) !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

#question-nav .cbt-q-btn,
#cbt-question-nav-grid .cbt-q-btn {
  width: 100% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.cbt-question-text,
.cbt-question-content,
.tka-stimulus-box,
.tka-pertanyaan,
.cbt-passage-card,
.cbt-option,
.option-text {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.tka-table-wrap,
.cbt-matrix-tf-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 4px !important;
}

.cbt-matrix-table th,
.cbt-matrix-table td {
  padding: clamp(8px, 1.4vw, 14px) !important;
  vertical-align: middle !important;
}

.katex-display {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 3px 0 !important;
}

.tka-img-fluid,
.tka-image-box img,
.cbt-question-content img,
.cbt-question-scroll-area img {
  max-width: 100% !important;
  max-height: min(48dvh, 380px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  cursor: zoom-in !important;
  display: block !important;
  margin: 10px auto !important;
}

.cbt-image-unavailable {
  min-width: min(100%, 280px) !important;
  min-height: 84px !important;
  border: 1px dashed #9ca3af !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  cursor: default !important;
}

.cbt-option {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.cbt-option input {
  pointer-events: none !important;
}

@supports not (height: 1dvh) {
  .tka-img-fluid,
  .tka-image-box img,
  .cbt-question-content img,
  .cbt-question-scroll-area img {
    max-height: min(48vh, 380px) !important;
  }
}

@media (max-width: 720px) {
  .cbt-question-scroll-area {
    padding: 12px 12px 22px !important;
  }

  .cbt-nav-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .cbt-nav-buttons #flag-question {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .cbt-matrix-table {
    min-width: 340px !important;
    width: 100% !important;
  }

  .cbt-matrix-mobile-hint {
    display: flex !important;
  }
}

/* ==========================================================================
   CBT Matrix Table (ANBK True/False) Horizontal Scroll & Touch Enhancements
   ========================================================================== */
.cbt-matrix-scroll-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 #f1f5f9 !important;
}

.cbt-matrix-scroll-wrapper::-webkit-scrollbar {
  height: 6px !important;
}

.cbt-matrix-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px !important;
}

.cbt-matrix-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 4px !important;
}

.cbt-matrix-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

.cbt-col-matrix-tf {
  width: 72px !important;
  min-width: 68px !important;
  max-width: 78px !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   SweetAlert2 Popup & Input Box Anti-Overflow Protection
   Mencegah input text/password meluber keluar dari batas kanan modal
   ========================================================================== */
.swal2-container .swal2-popup,
.swal2-cbt-exit-modal {
  box-sizing: border-box !important;
  max-width: min(92vw, 440px) !important;
  padding: 1.5rem 1.25rem !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.swal2-popup .swal2-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 0.5rem !important;
}

.swal2-popup .swal2-html-container {
  font-size: 0.92rem !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0.5rem auto 0.75rem !important;
}

/* Reset margin bawaan SweetAlert2 (1em 2em) yang menyebabkan input meluber */
.swal2-popup .swal2-input,
.swal2-popup .swal2-file,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-radio,
.swal2-popup .swal2-checkbox,
.swal2-cbt-exit-input,
input.swal2-input {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  font-size: 1rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1e293b !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.swal2-popup .swal2-input:focus,
.swal2-cbt-exit-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  outline: none !important;
}

.swal2-actions,
.swal2-cbt-exit-actions {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
}

.swal2-actions button,
.swal2-cbt-exit-actions button {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ========================================================================= */
/* TRYOUT MATRIX LEVEL FILTER, COLUMN PICKER & COLLAPSIBLE SECTION           */
/* ========================================================================= */
.tryout-level-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.tryout-level-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  transform: translateY(-1px);
}
.tryout-level-btn.active {
  background: #0284c7;
  color: #ffffff !important;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}
.tryout-level-btn.active[data-level="sd"] {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}
.tryout-level-btn.active[data-level="smp"] {
  background: #4f46e5;
  border-color: #4f46e5;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.tryout-col-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tryout-col-checkbox-item:hover {
  background: #f1f5f9;
}
.tryout-col-checkbox-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #0284c7;
}

.tryout-collapsible-content {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  overflow: hidden;
}
.tryout-collapsible-content.collapsed {
  display: none !important;
}