#view-exam { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--sheet); }

.exam-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--ink); color: #fff;
}
.exam-bar .muted { color: #b8c4d4; }
.exam-bar-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clock { font-size: 1.5rem; font-weight: 700; min-width: 5ch; text-align: right; }
.clock.low { color: #ffcf7a; }

.tool-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.tool-tabs button { background: transparent; color: #fff; border-color: #3b4f6b; padding: 6px 14px; white-space: nowrap; }
.tool-tabs button:hover { background: #22375a; }
.tool-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); border-color: #fff; }

.tool-area { position: relative; flex: 1; min-height: 0; }
.tool-area iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }

.tool-empty { max-width: 60ch; margin: 64px auto; padding: 0 20px; }
.tool-launchers { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; align-items: flex-start; }

.tool-list { padding-left: 1.2em; margin: 0; }
.tool-list .muted { font-size: .875rem; }

.fs-banner { background: var(--warn-soft); color: var(--warn); padding: 8px 16px; font-weight: 700; display: flex; gap: 12px; align-items: center; }

.alert-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(120, 20, 16, .88);
  padding: 20px;
}
.alert-box {
  background: #fff; border-radius: var(--r-md);
  border-top: 8px solid var(--bad);
  max-width: 480px; width: 100%; padding: 28px;
}
.alert-box h2 { color: var(--bad); font-size: 1.5rem; }
.alert-dur { font-weight: 700; }