/* Workspace layout, A4 preview, and readable print bubbles */
.field-label { display:block; margin-bottom:8px; font-weight:650; }
.answer-key-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; max-height:420px; overflow:auto; padding:2px; }
.answer-key-row { display:grid; grid-template-columns:1fr; gap:5px; }
.answer-key-row span { font-size:.88rem; color:var(--muted); }
.answer-key-row select { width:100%; }
.answer-key-subjective { grid-column:1/-1; }
.answer-key-subjective textarea { width:100%; resize:vertical; }
.app-screen { width: min(1920px, calc(100vw - 36px)); }
.sidebar {
  color: #f4f7fb;
  background: linear-gradient(155deg, #172d42 0%, #1d3852 55%, #254861 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 42px rgba(13, 29, 45, .22);
}
.sidebar .nav-btn { color: rgba(244,247,251,.86); background: rgba(255,255,255,.055); border-color: transparent; }
.sidebar .nav-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.sidebar .nav-btn.active { color: #fff; background: rgba(244,185,66,.22); border-color: rgba(244,185,66,.34); }
.sidebar .muted, .sidebar .sidebar-note, .sidebar .sidebar-note p { color: rgba(244,247,251,.68); }
.sidebar .brand-name, .sidebar .brand-subtitle { color: #f4f7fb; }
.sidebar-head { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sidebar-logo-card { width: min(100%, 238px); margin: 2px auto 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sidebar-full-logo { display: block; width: 100%; height: auto; }
.sidebar-user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-welcome { display: grid; gap: 3px; min-width: 0; color: rgba(244,247,251,.7); font-size: .78rem; line-height: 1.3; }
.sidebar-welcome strong { color: #f4f7fb; font-size: .98rem; font-weight: 700; overflow-wrap: anywhere; }
.sidebar-head #logoutBtn { color: #f4f7fb; border-color: rgba(244,247,251,.32); background: rgba(255,255,255,.08); }
.sidebar-head #logoutBtn:hover { color: #fff; border-color: rgba(244,185,66,.58); background: rgba(244,185,66,.18); }
.app-screen.active.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.sidebar-collapsed .sidebar { display: none; }
.workspace { align-content: start; grid-auto-rows: max-content; }
.topbar { justify-content: flex-start; }
.topbar { min-height: 132px; display: flex; align-items: center; }
.topbar > div:first-of-type { margin-right: auto; }
.topbar #topbarTitle { max-width: none; margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; }
.sidebar-float-toggle { position: fixed; top: 108px; left: calc((100vw - min(1920px, calc(100vw - 36px))) / 2 + 290px); z-index: 1300; display: grid; place-items: center; width: 34px; height: 44px; padding: 0; transform: none; border: 1px solid #d5dee7; border-radius: 0 12px 12px 0; color: #20364a; background: #fff; box-shadow: 4px 4px 16px rgba(20,32,44,.16); font-size: 27px; font-weight: 500; line-height: 1; cursor: pointer; }
.sidebar-collapsed .sidebar-float-toggle { left: 8px; border-radius: 0 12px 12px 0; }
.sidebar-float-toggle:hover { color: #10263b; background: #f2f7fb; }
.app-screen.active { padding-top: 86px; }
.top-nav { position: fixed; inset: 0 0 auto; z-index: 1200; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100vw; height: 68px; padding: 10px 16px; overflow-x: auto; overflow-y: hidden; border: 0; border-bottom: 1px solid #304c68; border-radius: 0; color: #f4f7fb; background: linear-gradient(100deg, #172d42 0%, #234663 52%, #365b83 100%); box-shadow: 0 8px 24px rgba(20,32,44,.2); }
.top-nav .nav-btn { color: #f4f7fb; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.1); }
.top-nav .nav-btn:hover, .top-nav .nav-btn.active { color: #fff; background: rgba(244,185,66,.24); border-color: rgba(244,185,66,.48); }
.top-nav .nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 150px; min-width: 150px; height: 44px; flex: 0 0 150px; padding: 0 12px; white-space: nowrap; text-align: center; }
.top-nav-item { position: relative; width: 150px; min-width: 150px; flex: 0 0 150px; }
.top-nav-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 150px; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; color: #f4f7fb; background: rgba(255,255,255,.09); font: inherit; font-weight: 700; cursor: pointer; }
.top-nav-trigger:hover, .top-nav-item.open .top-nav-trigger, .top-nav-item.has-active .top-nav-trigger { color: #fff; background: rgba(244,185,66,.24); border-color: rgba(244,185,66,.48); }
.top-nav-menu { position: fixed; top: 76px; left: 8px; display: none; width: min(232px, calc(100vw - 16px)); padding: 8px; border: 1px solid #304c68; border-radius: 16px; background: #1b354d; box-shadow: 0 14px 34px rgba(20,32,44,.25); }
.top-nav-menu .nav-btn { color: #f4f7fb; background: rgba(255,255,255,.08); }
.icon-only-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 7px; }
.icon-only-toggle svg { display: block; width: 20px; height: 20px; }
.section-add-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.top-nav-item.open .top-nav-menu { display: grid; gap: 5px; }
.top-nav-menu .nav-btn { justify-content: flex-start; width: 100%; min-width: 0; height: 42px; flex: 1 1 auto; padding: 0 12px; text-align: left; }
.top-nav::-webkit-scrollbar { height: 4px; }
@media (max-width: 1200px) { .top-nav { justify-content: flex-start; } }
@media (max-width: 1120px) { .sidebar-float-toggle { left: 8px; } }
.sheet-preview-dialog { width: min(1320px, 97vw); height: min(97vh, 1600px); }
.form-preview { display: block; overflow: auto; }
.builder-live-preview-frame { display: block; width: 100%; height: 1123px; border: 0; border-radius: 14px; background: #e9edf2; }
.toast { position: fixed; z-index: 1000; top: 50%; left: 50%; right: auto; width: min(440px, calc(100vw - 32px)); padding: 18px 22px 18px 56px; border: 1px solid #bfd2eb; border-radius: 16px; color: #183554; background: #eef5ff; box-shadow: 0 18px 54px rgba(20,32,44,.24); font-weight: 650; animation: toast-enter .2s ease-out forwards; }
.login-error { padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: 10px; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); font-size: .92rem; font-weight: 600; }
.toast::before { content: "✓"; position: absolute; left: 17px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #416fa8; font-size: 15px; }
@keyframes toast-enter { from { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 1120px) { .app-screen { width: min(1920px, calc(100% - 24px)); } }
@media (max-width: 760px) { .app-screen { width: calc(100vw - 16px); } }

/* BubbleMark brand refresh: navy, blue and turquoise from the current logo. */
:root {
  --accent: #0bb7ad;
  --accent-2: #168fe5;
  --page-bg: radial-gradient(circle at 8% 0%, rgba(13,183,173,.12), transparent 30%), radial-gradient(circle at 96% 8%, rgba(22,143,229,.12), transparent 28%), linear-gradient(180deg,#f7fafc 0%,#eef4f8 58%,#e8f0f5 100%);
}
[data-theme="light"] { --page-bg: radial-gradient(circle at 8% 0%, rgba(13,183,173,.12), transparent 30%), radial-gradient(circle at 96% 8%, rgba(22,143,229,.12), transparent 28%), linear-gradient(180deg,#f7fafc 0%,#eef4f8 58%,#e8f0f5 100%); }
[data-theme="dark"] { --page-bg: radial-gradient(circle at 8% 0%, rgba(11,183,173,.18), transparent 30%), radial-gradient(circle at 96% 8%, rgba(22,143,229,.18), transparent 28%), linear-gradient(160deg,#091019 0%,#111b2b 55%,#0b1220 100%); }
[data-theme="dark"] { --accent: #18c5b8; --accent-2: #36a8f4; --preview-bubble-fill: rgba(11,183,173,.34); }
.nav-btn.active, .nav-btn:hover { background: rgba(11,183,173,.12); border-color: rgba(11,183,173,.24); }
.btn-primary { background: linear-gradient(135deg,#087f88,#0bb7ad); color: #fff; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: rgba(24,197,184,.78); box-shadow: 0 0 0 4px rgba(24,197,184,.18); }
[data-theme="dark"] .sidebar-float-toggle:focus-visible { outline-color: #18c5b8; }
[data-theme="dark"] .sheet-card-mark { color: #8ce8df; background: rgba(11,183,173,.2); }
[data-theme="dark"] .sheet-action:hover { border-color: rgba(24,197,184,.58); background: rgba(11,183,173,.1); }
[data-theme="dark"] .sheet-action-print { color: #a6f0e8; background: rgba(11,183,173,.18); border-color: rgba(24,197,184,.34); }
.sidebar .nav-btn.active { background: rgba(11,183,173,.22); border-color: rgba(34,210,197,.34); }
.sidebar-head #logoutBtn:hover { border-color: rgba(34,210,197,.58); background: rgba(11,183,173,.18); }
.top-nav { background: linear-gradient(100deg,#102d50 0%,#123f6b 52%,#086f7d 100%); }
.top-nav .nav-btn:hover, .top-nav .nav-btn.active, .top-nav-trigger:hover, .top-nav-item.open .top-nav-trigger, .top-nav-item.has-active .top-nav-trigger { background: rgba(11,183,173,.28); border-color: rgba(34,210,197,.48); }
.top-nav-menu { border-color: #17617b; background: #123754; }
.nav-btn[data-view] { display: inline-flex; align-items: center; gap: 11px; }
.nav-btn[data-view]::before { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: rgba(22,143,229,.14); font-size: 16px; line-height: 1; transition: transform .18s ease, background .18s ease; }
.nav-btn[data-view]:hover::before, .nav-btn[data-view].active::before { transform: scale(1.08); background: rgba(11,183,173,.24); }
.nav-btn[data-view="dashboard"]::before { content: "📊"; }
.nav-btn[data-view="forms"]::before { content: "📝"; }
.nav-btn[data-view="grading"]::before { content: "✅"; }
.nav-btn[data-view="students"]::before { content: "👩‍🎓"; }
.nav-btn[data-view="scan"]::before { content: "📷"; }
.nav-btn[data-view="results"]::before { content: "📈"; }
.nav-btn[data-view="admin"]::before { content: "⚙️"; }

/* Keep the desktop top navigation compact and calm; reserve the larger icon tiles for the sidebar. */
.top-nav { justify-content: center; gap: 6px; height: 64px; padding: 8px 20px; overflow-y: visible; backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(100deg,#102d50 0%,#123f6b 58%,#086f7d 100%); }
.top-nav > .nav-btn, .top-nav .top-nav-trigger { width: auto; min-width: 0; height: 42px; flex: 0 0 auto; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; }
.top-nav .top-nav-item { width: auto; min-width: 0; flex: 0 0 auto; }
.top-nav .nav-btn { gap: 8px; font-size: .9rem; }
.top-nav .nav-btn[data-view]::before { width: 24px; height: 24px; flex-basis: 24px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 14px; }
.top-nav .nav-btn[data-view]:hover::before, .top-nav .nav-btn[data-view].active::before { background: rgba(11,183,173,.3); }
.top-nav .nav-btn:hover, .top-nav .nav-btn.active, .top-nav .top-nav-trigger:hover, .top-nav .top-nav-item.open .top-nav-trigger, .top-nav .top-nav-item.has-active .top-nav-trigger { color: #fff; background: rgba(11,183,173,.2); border-color: rgba(34,210,197,.28); }