:root {
      --brand: #157A6E;
      --brand-dark: #0F5F56;
      --brand-soft: #E8F3EE;
      --brand-light: #F4FAF7;
      --accent: #499F68;
      --accent-soft: #77B28C;
      --warm: #B4654A;
      --blue: #157A6E;
      --blue-dark: #0F5F56;
      --blue-soft: #E8F3EE;
      --navy: #111827;
      --text: #253244;
      --muted: #64748b;
      --line: #dbe4f0;
      --paper: #ffffff;
      --soft: #f6f8fb;
      --danger: #b91c1c;
      --success: #047857;
      --warning: #a16207;
      --shadow: 0 14px 36px rgba(17, 24, 39, 0.08);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
      background: #eef3fb;
      color: var(--text);
      line-height: 1.55;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .exam-shell {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .topbar {
      height: 64px;
      background: white;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
      position: sticky;
      top: 0;
      z-index: 50;
    }

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

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--blue);
      color: white;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .brand strong {
      color: var(--navy);
      display: block;
      font-size: 17px;
    }

    .brand span {
      color: var(--muted);
      display: block;
      font-size: 13px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .timer {
      background: var(--navy);
      color: white;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 900;
      min-width: 82px;
      text-align: center;
    }

    .risk-pill {
      background: #fff7ed;
      color: var(--warning);
      border: 1px solid #fed7aa;
      padding: 8px 11px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
    }

    .btn {
      border: 2px solid transparent;
      background: var(--blue);
      color: white;
      border-radius: 10px;
      padding: 10px 14px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.18s ease;
    }

    .btn:hover {
      background: var(--blue-dark);
    }

    .btn.secondary {
      background: white;
      color: var(--blue);
      border-color: var(--blue);
    }

    .btn.secondary:hover {
      background: var(--blue-soft);
    }

    .btn.danger {
      background: #dc2626;
      border-color: #dc2626;
    }

    .btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .start-page {
      min-height: calc(100vh - 64px);
      display: grid;
      place-items: center;
      padding: 28px;
    }

    .start-card {
      width: min(920px, 100%);
      background: white;
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
    }

    .start-card > .exam-choice-group {
      grid-column: 1 / -1;
      padding: 20px 24px 0;
    }

    .start-info {
      background: var(--blue);
      color: white;
      padding: 34px;
    }

    .start-info h1 {
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: -0.055em;
      margin-bottom: 16px;
    }

    .start-info p {
      color: rgba(255,255,255,0.84);
      margin-bottom: 22px;
    }

    .exam-facts {
      display: grid;
      gap: 10px;
    }

    .exam-fact {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 14px;
      padding: 12px 14px;
    }

    .exam-fact strong {
      display: block;
      margin-bottom: 2px;
    }

    .exam-fact span {
      color: rgba(255,255,255,0.78);
      font-size: 14px;
    }

    .start-form {
      padding: 34px;
      display: grid;
      gap: 15px;
    }

    .start-form h2 {
      color: var(--navy);
      font-size: 26px;
      letter-spacing: -0.035em;
    }

    label {
      display: grid;
      gap: 6px;
      color: var(--navy);
      font-weight: 900;
      font-size: 14px;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px 12px;
      font: inherit;
      background: var(--soft);
      color: var(--text);
      outline: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--blue);
      background: white;
      box-shadow: 0 0 0 3px rgba(35,84,209,0.12);
    }

    .agreement {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--text);
      font-weight: 700;
      font-size: 13px;
    }

    .agreement input {
      width: auto;
      margin-top: 3px;
    }

    .exam-layout {
      display: none;
      grid-template-columns: 260px 1fr 340px;
      gap: 0;
      min-height: calc(100vh - 64px);
    }

    .sidebar {
      background: white;
      border-right: 1px solid var(--line);
      padding: 18px;
      overflow: auto;
    }

    .sidebar h2 {
      font-size: 16px;
      color: var(--navy);
      margin-bottom: 12px;
    }

    .question-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 18px;
    }

    .qnav {
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--text);
      border-radius: 10px;
      min-height: 42px;
      font-weight: 900;
      cursor: pointer;
    }

    .qnav.active {
      background: var(--blue);
      color: white;
      border-color: var(--blue);
    }

    .qnav.answered {
      border-color: var(--success);
    }

    .qnav.flagged::after {
      content: "⚑";
      display: block;
      font-size: 11px;
      line-height: 1;
    }

    .sidebar-note {
      background: var(--blue-soft);
      border: 1px solid #c8d8ff;
      color: var(--blue-dark);
      border-radius: 14px;
      padding: 12px;
      font-size: 13px;
      font-weight: 700;
    }

    .main-panel {
      padding: 24px;
      overflow: auto;
    }

    .question-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      min-height: calc(100vh - 112px);
      padding: 28px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }

    .question-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .tag {
      background: var(--blue-soft);
      color: var(--blue-dark);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 900;
    }

    .question-title {
      color: var(--navy);
      font-size: 27px;
      line-height: 1.15;
      letter-spacing: -0.04em;
      margin-bottom: 16px;
    }

    .prompt {
      color: var(--text);
      font-size: 16px;
      margin-bottom: 18px;
    }

    pre {
      background: #0f172a;
      color: #e5e7eb;
      border-radius: 14px;
      padding: 16px;
      overflow: auto;
      margin: 14px 0 18px;
      font-size: 14px;
      line-height: 1.5;
      user-select: none;
      -webkit-user-select: none;
    }

    code {
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    .options {
      display: grid;
      gap: 10px;
    }

    .option {
      border: 1px solid var(--line);
      background: var(--soft);
      border-radius: 14px;
      padding: 13px 14px;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      cursor: pointer;
      user-select: none;
    }

    .option:hover {
      border-color: var(--blue);
      background: var(--blue-soft);
    }

    .option.selected {
      background: var(--blue-soft);
      border-color: var(--blue);
    }

    .letter {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: white;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--navy);
      font-weight: 900;
    }

    .frq-area {
      display: grid;
      gap: 12px;
    }

    .frq-area textarea {
      min-height: 260px;
      resize: vertical;
      background: #ffffff;
      user-select: text;
      -webkit-user-select: text;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      line-height: 1.5;
    }

    .question-actions {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 22px;
      flex-wrap: wrap;
    }

    .right-panel {
      background: white;
      border-left: 1px solid var(--line);
      padding: 18px;
      overflow: auto;
    }

    .panel-box {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 15px;
      margin-bottom: 14px;
      background: var(--soft);
    }

    .panel-box h3 {
      color: var(--navy);
      font-size: 16px;
      margin-bottom: 8px;
    }

    .panel-box p, .panel-box li {
      color: var(--muted);
      font-size: 13px;
    }

    .panel-box ul {
      padding-left: 18px;
      display: grid;
      gap: 6px;
    }

    .signal-list {
      display: grid;
      gap: 8px;
      font-size: 13px;
    }

    .signal-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 7px;
    }

    .signal-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .submit-screen {
      display: none;
      min-height: calc(100vh - 64px);
      padding: 28px;
      place-items: center;
    }

    .result-card {
      width: min(760px, 100%);
      background: white;
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 32px;
    }

    .result-card h1 {
      color: var(--navy);
      font-size: 38px;
      letter-spacing: -0.05em;
      margin-bottom: 10px;
    }

    .result-card p {
      color: var(--muted);
      margin-bottom: 18px;
    }

    .result-note {
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      margin: 18px 0 22px;
      display: grid;
      gap: 6px;
    }

    .result-note strong {
      color: var(--navy);
      font-size: 18px;
    }

    .result-note span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }


    .result-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 18px 0 22px;
    }

    .result-item {
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
    }

    .result-item strong {
      display: block;
      color: var(--navy);
      font-size: 22px;
    }

    .result-item span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .ai-canary {
      position: absolute;
      left: 12px;
      top: 12px;
      color: rgba(255, 255, 255, 0.035);
      font-size: 11px;
      pointer-events: none;
      user-select: none;
    }

    @media (max-width: 1100px) {
      .exam-layout {
        grid-template-columns: 220px 1fr;
      }

      .right-panel {
        display: none;
      }
    }

    @media (max-width: 760px) {
      .topbar {
        height: auto;
        padding: 12px;
        align-items: flex-start;
      }

      .top-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .start-card {
        grid-template-columns: 1fr;
      }

      .exam-layout {
        grid-template-columns: 1fr;
      }

      .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .question-grid {
        grid-template-columns: repeat(5, 1fr);
      }

      .main-panel {
        padding: 14px;
      }

      .question-card {
        padding: 20px;
      }

      .result-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Hide AI risk details from students, keep storing them in Firestore */
    #riskPreview {
      display: none;
    }

    .right-panel .panel-box:nth-child(2) {
      display: none;
    }

    .ai-risk-result {
      display: none;
    }

    .result-grid {
      grid-template-columns: repeat(2, 1fr);
    }



    /* Unified brand logo */
    .brand-mark {
      width: 88px;
      height: 88px;
      padding: 3px;
      border-radius: 24px;
      background: #ffffff;
      border: 2px solid var(--line);
      box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
      overflow: hidden;
      display: grid;
      place-items: center;
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      transform: scale(1.12);
      transform-origin: center;
    }

    @media (max-width: 760px) {
      .brand-mark {
        width: 64px;
        height: 64px;
        border-radius: 18px;
      }
    }


    /* Header vertical breathing room */
    .nav {
      min-height: 112px;
      padding: 12px 0;
    }

    @media (max-width: 760px) {
      .nav {
        min-height: auto;
        padding: 14px 0;
      }
    }


    /* Exam header logo fix */
    .topbar {
      min-height: 72px;
      height: 72px;
      padding: 0 22px;
    }

    .topbar .brand-mark {
      width: 56px !important;
      height: 56px !important;
      border-radius: 16px !important;
      padding: 3px !important;
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      overflow: hidden !important;
      box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08) !important;
    }

    .topbar .brand-mark img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      transform: scale(1.08) !important;
      transform-origin: center !important;
    }

    @media (max-width: 760px) {
      .topbar {
        min-height: auto;
        height: auto;
      }

      .topbar .brand-mark {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
      }
    }


    /* Exam course selection and header logo fix */
    .topbar {
      min-height: 72px;
      height: 72px;
      padding: 0 22px;
    }

    .topbar .brand-mark {
      width: 56px !important;
      height: 56px !important;
      border-radius: 16px !important;
      padding: 3px !important;
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      overflow: hidden !important;
      box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08) !important;
    }

    .topbar .brand-mark img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      transform: scale(1.08) !important;
      transform-origin: center !important;
    }

    .exam-choice-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 4px 0 4px;
    }

    .exam-choice {
      text-align: left;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--text);
      border-radius: 14px;
      padding: 12px;
      cursor: pointer;
      transition: 0.18s ease;
      min-height: 96px;
    }

    .exam-choice strong {
      display: block;
      color: var(--navy);
      font-size: 15px;
      margin-bottom: 5px;
    }

    .exam-choice span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .exam-choice:hover {
      border-color: var(--blue);
      background: var(--blue-soft);
    }

    .exam-choice.active {
      border-color: var(--blue);
      background: var(--blue-soft);
      box-shadow: 0 0 0 3px rgba(35, 84, 209, 0.10);
    }

    @media (max-width: 760px) {
      .topbar {
        min-height: auto;
        height: auto;
      }

      .topbar .brand-mark {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
      }

      .exam-choice-group {
        grid-template-columns: 1fr;
      }

      .exam-choice {
        min-height: auto;
      }
    }


    /* Language switcher */
    .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .lang-switch a { padding: 4px 7px; border-radius: 999px; color: var(--muted); }
    .lang-switch a.active { background: var(--brand-soft, var(--blue-soft)); color: var(--brand, var(--blue)); }
    .lang-switch a:hover { background: var(--blue-soft); color: var(--blue); }
    @media (max-width: 720px) { .top-actions .lang-switch { display:none; } }