:root { --navy:#10253f; --blue:#1769e0; --cyan:#13b8cf; --ink:#17253a; --muted:#728096; --line:#dbe3ed; --bg:#f3f6fa; --white:#fff; --green:#21ad70; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:Inter,Segoe UI,Arial,sans-serif; }
button { font:inherit; }
.topbar { min-height:72px; padding:14px clamp(20px,5vw,72px); background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; font-size:18px; letter-spacing:.2px; }
.brand-logo { width:42px; height:42px; flex:0 0 42px; border-radius:9px; object-fit:contain; }
.statuses { display:flex; align-items:center; gap:12px; font-size:13px; }
.status,.provider { padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.06); }
.status i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#e6a638; }
.status i.online { background:#45d98b; }
main { width:min(1180px,92vw); margin:0 auto; padding:44px 0 20px; }
.hero { text-align:center; margin-bottom:32px; }
.eyebrow { margin:0 0 8px; color:var(--blue)!important; font-size:12px!important; font-weight:800; letter-spacing:2px; }
.hero h1 { margin:0; font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-2px; color:var(--navy); }
.hero h1 span { color:var(--blue); }
.hero p { color:var(--muted); font-size:17px; }
.controls { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.mode-switch { display:flex; padding:4px; background:#e4eaf2; border-radius:11px; }
.mode { border:0; padding:8px 13px; border-radius:8px; background:transparent; color:#647389; font-size:13px; cursor:pointer; }
.mode.active { background:#fff; color:var(--navy); box-shadow:0 2px 7px rgba(20,40,70,.1); font-weight:700; }
.action-buttons { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.action-buttons button { min-height:36px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; color:var(--navy); background:#fff; font-size:13px; cursor:pointer; font-weight:650; }
.action-buttons button:disabled { opacity:.45; cursor:not-allowed; }
.action-buttons .primary { border-color:var(--blue); color:#fff; background:var(--blue); }
.presentation-control { position:relative; }
.presentation-options-button { padding-inline:8px!important; }
.presentation-status { align-self:center; color:#087a4a; background:#e2f8ed; border-radius:999px; padding:6px 9px; font-size:10px; font-weight:800; white-space:nowrap; }
.presentation-status[hidden] { display:none; }
.action-buttons .active-presentation { border-color:#21ad70; color:#087a4a; background:#e2f8ed; }
.presentation-menu { position:absolute; z-index:15; top:calc(100% + 8px); right:0; width:250px; padding:10px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:0 14px 38px rgba(16,37,63,.18); }
.presentation-menu[hidden] { display:none; }
.presentation-menu label { display:grid; gap:5px; margin:2px 2px 9px; color:var(--muted); font-size:12px; }
.presentation-menu select,.presentation-menu button { width:100%; margin-bottom:6px; border:1px solid var(--line); border-radius:8px; padding:9px; background:#fff; color:var(--navy); }
.view-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin:-6px 0 12px; }
.view-controls button,.view-controls label { border:1px solid var(--line); border-radius:999px; padding:7px 11px; background:#fff; color:#526177; font-size:12px; cursor:pointer; }
.view-controls label { display:flex; align-items:center; gap:5px; }
.speech-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin:-8px 0 18px; padding:12px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.speech-controls label { display:flex; align-items:center; gap:6px; color:#526177; font-size:13px; }
.speech-controls select,.speech-controls button,.archive-toolbar button,.detail-actions button,.vocab-head button,.manual-vocab button,.dialog-actions button { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--navy); cursor:pointer; }
.check-label input { accent-color:var(--blue); }
.tts-status { color:var(--muted); font-size:12px; }
.workspace { display:grid; grid-template-columns:1fr 1fr; min-height:370px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 35px rgba(22,40,68,.08); }
.panel { min-width:0; padding:28px; }
.source-panel { border-right:1px solid var(--line); }
.translation-panel { background:linear-gradient(145deg,#fff 45%,#f2f8ff); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid #e8edf3; }
.panel-tools { display:flex; align-items:center; gap:7px; }
.collapse-button { border:1px solid var(--line); border-radius:999px; padding:6px 9px; background:#fff; color:#526177; font-size:11px; cursor:pointer; }
.panel.collapsed { min-height:0; padding:14px 20px; }
.panel.collapsed .panel-body { display:none; }
.panel.collapsed .panel-heading { padding:0; border:0; }
.panel.collapsed .panel-heading small { display:none; }
.panel.collapsed .panel-heading h2 { margin:0; font-size:15px; }
.workspace.single-panel { grid-template-columns:1fr; }
.panel-heading small { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:1.5px; }
.panel-heading h2 { margin:4px 0 0; font-size:20px; }
#listeningBadge,.language { color:var(--blue); background:#eaf2ff; border-radius:999px; padding:7px 11px; font-size:11px; font-weight:800; }
#listeningBadge.live { color:#087a4a; background:#e2f8ed; }
.content { padding-top:25px; white-space:pre-wrap; font-size:19px; line-height:1.65; }
.content.muted { color:#8792a3; }
.translation-segment { display:inline; }
.translation-segment::after { content:' '; }
.translation-segment.paragraph-break { display:block; margin-top:14px; }
.interim { color:#98a3b4; font-size:16px; font-style:italic; line-height:1.6; }
.message { min-height:24px; margin:14px 4px; color:#637187; font-size:13px; }
.message.error { color:#b42318; }
footer { text-align:center; color:#8b96a6; font-size:12px; padding:12px 20px 24px; }
.update-banner { position:fixed; z-index:100000; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:min(520px,92vw); padding:11px 14px; border:1px solid #bdd4f6; border-radius:12px; background:#fff; color:var(--navy); box-shadow:0 14px 40px rgba(16,37,63,.2); font-size:13px; }
.update-banner[hidden] { display:none; }
.update-banner button { margin-left:auto; border:0; border-radius:8px; padding:8px 12px; background:var(--blue); color:#fff; font-weight:700; cursor:pointer; }
body.projector .topbar,body.projector .hero,body.projector .controls,body.projector .speech-controls,body.projector footer { display:none; }
body.projector main { width:100vw; padding:0; }
body.projector .workspace { min-height:100vh; border:0; border-radius:0; }
body.projector .panel { padding:5vw; }
body.projector .content { font-size:clamp(28px,3.2vw,54px); }
body.projector .source-panel { display:none; }
body.projector .workspace { grid-template-columns:1fr; }
body.projector .translation-panel { display:flex; flex-direction:column; justify-content:center; }
body.projector .translation-panel { max-height:100vh; overflow:auto; }
body.projector .panel-heading { padding-bottom:12px; }
.exit-projector { position:fixed; z-index:30; top:14px; right:14px; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:8px 12px; background:rgba(16,37,63,.75); color:#fff; cursor:pointer; opacity:.7; }
.exit-projector[hidden] { display:none; }
.presentation-subtitle { position:fixed; left:4%; right:4%; bottom:10px; z-index:99999; max-height:30vh; padding:11px 58px 11px 18px; border-radius:12px; background:rgba(5,18,35,.9); color:#fff; font-size:clamp(20px,2.35vw,38px); line-height:1.22; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.presentation-subtitle[hidden] { display:none; }
.presentation-subtitle div { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; }
.presentation-subtitle button { position:absolute; top:8px; right:8px; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:5px 9px; background:rgba(255,255,255,.12); color:#fff; font-size:11px; cursor:pointer; }
body.presentation-fullscreen { background:#071628; }
body.presentation-fullscreen > :not(.presentation-subtitle) { visibility:hidden; }
.overlay { position:fixed; inset:0; z-index:20; padding:4vh 4vw; background:rgba(7,22,40,.68); backdrop-filter:blur(4px); }
.overlay[hidden],.speech-controls[hidden] { display:none!important; }
.archive-dialog,.confirm-dialog { margin:auto; background:#fff; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.archive-dialog { width:min(1120px,96vw); height:min(88vh,850px); padding:24px; display:flex; flex-direction:column; }
.confirm-dialog { width:min(500px,92vw); margin-top:16vh; padding:26px; }
.confirm-dialog label { display:grid; gap:6px; margin:14px 0; color:#526177; font-size:13px; }
.confirm-dialog input,.archive-toolbar input,.manual-vocab input { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; font:inherit; }
.dialog-head,.archive-toolbar,.detail-actions,.vocab-head,.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.dialog-head h2,.confirm-dialog h2 { margin:3px 0 14px; }
.dialog-head small { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:1.5px; }
.icon-button { border:0; background:transparent; font-size:30px; cursor:pointer; color:#66758a; }
.archive-toolbar { padding-bottom:14px; }
.archive-layout { display:grid; grid-template-columns:300px 1fr; min-height:0; flex:1; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.archive-list { overflow:auto; padding:8px; background:#f6f8fb; border-right:1px solid var(--line); }
.archive-item { width:100%; display:grid; gap:5px; text-align:left; border:0; border-radius:9px; padding:12px; margin-bottom:5px; background:transparent; cursor:pointer; color:var(--ink); }
.archive-item span,.session-meta,.muted-copy { color:var(--muted); font-size:12px; }
.archive-item.active,.archive-item:hover { background:#e7f0ff; }
.archive-detail { overflow:auto; padding:22px; }
.archive-detail h3 { font-size:24px; margin:16px 0 5px; }
.archive-detail h4 { margin:22px 0 8px; }
.archive-detail pre { white-space:pre-wrap; font:15px/1.55 Inter,Segoe UI,Arial,sans-serif; padding:12px; background:#f7f9fc; border-radius:9px; }
.detail-actions { justify-content:flex-start; flex-wrap:wrap; }
.detail-actions button:last-child { color:#b42318; }
.vocab-row { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #edf0f4; }
.vocab-english { color:var(--blue); font-weight:650; }
.vocab-actions { display:flex; gap:4px; }
.vocab-actions button { border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }
.manual-vocab { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-top:14px; }
.dialog-actions { justify-content:flex-end; flex-wrap:wrap; margin-top:20px; }
.dialog-actions .primary { background:var(--blue); color:#fff; border-color:var(--blue); }
@media (max-width:760px) { .topbar,.controls { align-items:stretch; flex-direction:column; } .statuses,.action-buttons { flex-wrap:wrap; } .presentation-control { position:static; } .presentation-menu { position:fixed; left:4vw; right:4vw; top:10px; bottom:auto; width:auto; max-height:55vh; overflow:auto; } .view-controls { justify-content:flex-start; } .workspace { grid-template-columns:1fr; } .source-panel { border-right:0; border-bottom:1px solid var(--line); } .panel { min-height:300px; } .panel.collapsed { min-height:0; } .panel-tools { gap:4px; } main { padding-top:28px; } .presentation-subtitle { left:2.5%; right:2.5%; bottom:8px; padding:9px 46px 9px 11px; font-size:clamp(18px,5vw,29px); } }
@media (max-height:500px) and (orientation:landscape) { .hero { display:none; } main { padding-top:14px; } .workspace { min-height:230px; } .panel { min-height:230px; padding:18px; } .presentation-subtitle { bottom:2%; font-size:clamp(20px,4vw,34px); padding-block:9px; } }
@media (max-width:760px) { .archive-layout { grid-template-columns:1fr; } .archive-list { max-height:180px; border-right:0; border-bottom:1px solid var(--line); } .manual-vocab { grid-template-columns:1fr; } .vocab-row { grid-template-columns:1fr; } }

body.teaching-open { overflow:hidden; }
.teaching-overlay { position:fixed; inset:0; z-index:1000; padding:2vh 2vw; background:rgba(7,22,40,.76); backdrop-filter:blur(5px); }
.teaching-overlay[hidden] { display:none; }
.teaching-shell { width:min(1500px,100%); height:96vh; margin:auto; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:var(--bg); box-shadow:0 28px 90px rgba(0,0,0,.38); }
.teaching-head { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; background:var(--navy); color:#fff; }
.teaching-head small { color:#79c8ff; font-size:10px; font-weight:800; letter-spacing:1.5px; }
.teaching-head h2 { margin:3px 0 0; font-size:23px; }
.teaching-head-actions { display:flex; align-items:center; gap:12px; }
#teachingStatus { color:#c8d8eb; font-size:12px; text-align:right; }
#teachingStatus.error { color:#ffaaa4; }
.teaching-head .icon-button { color:#fff; }
.teaching-fullscreen-button { border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:7px 10px; background:rgba(255,255,255,.08); color:#fff; font-size:12px; cursor:pointer; }
.teaching-shell:fullscreen { width:100vw; height:100vh; border-radius:0; }
.apro-voice-button[aria-pressed="true"] { border-color:#43cf82; background:#0d5c3a; color:#fff; }
.apro-voice-button.is-command { border-color:#f4c542; background:#755d08; }
.apro-voice-feedback { position:fixed; z-index:10000; left:50%; bottom:24px; transform:translateX(-50%); max-width:min(92vw,680px); padding:10px 16px; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(5,20,36,.94); color:#fff; box-shadow:0 8px 28px rgba(0,0,0,.3); font-weight:700; text-align:center; pointer-events:none; }
.material-video { width:100%; height:100%; max-height:72vh; object-fit:contain; background:#000; }
.teaching-mode-picker { width:100%; display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:10px; margin-bottom:12px; }
.teaching-mode-card { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 9px; align-items:center; padding:12px 15px!important; text-align:left; }
.teaching-mode-card > span { grid-row:1/3; font-size:24px; }.teaching-mode-card b{font-size:14px}.teaching-mode-card small{color:#718096}
.teaching-mode-card.active { border-color:#1769e0!important; background:#eaf3ff!important; color:#0c4fa8!important; }
.smart-material-picker { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 16px; background:#f4f8fc; border-bottom:1px solid var(--line); }
.smart-material-picker[hidden]{display:none}.smart-material-picker strong{margin-right:6px}.smart-material-picker button,.smart-material-picker .sidebar-menu-link{padding:8px 10px}
.teaching-overlay.smart-teaching .international-teaching-only { display:none!important; }
.teaching-overlay.smart-teaching .teaching-layout { grid-template-columns:1fr; }
.teaching-overlay.smart-teaching .teacher-panel-resize { display:none; }
.teaching-overlay.smart-teaching .material-stage { min-height:0; }
.teaching-overlay.smart-teaching .material-viewer { min-height:58vh; }
.teaching-overlay.smart-teaching .material-video,.teaching-overlay.smart-teaching .material-image { max-height:70vh; }
.material-image { display:block; max-width:100%; max-height:68vh; margin:auto; object-fit:contain; transform:scale(var(--material-zoom,1)); transform-origin:center; }
.material-viewer > .pptx-preview-wrapper { transform:scale(var(--material-zoom,1)); transform-origin:top center; }
.mobile-remote-panel { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--line); background:#f8fbff; }
.mobile-remote-panel[hidden]{display:none}.mobile-remote-panel h3,.mobile-remote-panel p{margin:0}.mobile-remote-panel p{font-size:12px;color:#607086}
.remote-session-details { width:100%; display:flex; align-items:center; gap:16px; padding:12px; border:1px solid #cbd9e8; border-radius:12px; background:#fff; }
.remote-session-details[hidden]{display:none}.remote-session-details img{width:150px;height:150px}.remote-session-details>div{display:grid;gap:8px}.remote-session-details a{color:#1769e0;font-weight:700}
.remote-body { min-height:100vh; margin:0; display:grid; place-items:center; padding:20px; background:linear-gradient(145deg,#06111f,#0b3157); color:#fff; font-family:Inter,Segoe UI,Arial,sans-serif; }
.remote-app { width:min(480px,100%); display:grid; gap:16px; text-align:center; }.remote-app h1,.remote-app p{margin:0}.remote-brand{font-size:18px;font-weight:900;color:#6ec8ff}.remote-code{font-weight:800;color:#a7d8ff}
.remote-mic-button { min-height:92px; border:0; border-radius:18px; background:#1769e0; color:#fff; font-size:21px; font-weight:900; box-shadow:0 12px 35px rgba(0,0,0,.25); }
.remote-mic-status{font-size:18px}.remote-command-card{display:grid;gap:8px;padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.08)}.remote-command-card p{font-size:18px;font-weight:800}.remote-command-card small,.remote-hint{color:#a9bed3}.remote-command-card .error{color:#ffb6b6}
@media(max-width:700px){.teaching-mode-picker{grid-template-columns:1fr}.remote-session-details{align-items:flex-start}.remote-session-details img{width:112px;height:112px}}
.teaching-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); background:#fff; }
.teaching-toolbar label,.teacher-panel label { display:grid; gap:5px; color:#526177; font-size:12px; }
.teaching-toolbar select,.teaching-toolbar button,.upload-button,.teacher-panel select,.teacher-panel textarea,.teacher-panel button,.teaching-nav button { border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:#fff; color:var(--navy); font:inherit; }
.teaching-toolbar button,.upload-button,.teacher-panel button,.teaching-nav button { cursor:pointer; font-weight:650; }
.upload-button { display:inline-flex!important; align-items:center; min-height:38px; background:var(--blue)!important; color:#fff!important; border-color:var(--blue)!important; }
.teaching-toolbar button:disabled,.teacher-panel button:disabled,.teaching-nav button:disabled { opacity:.45; cursor:not-allowed; }
.material-meta { padding:8px 18px; border-bottom:1px solid var(--line); background:#edf5ff; color:#416184; font-size:12px; }
.teaching-layout { --teacher-panel-width:clamp(420px,32%,560px); display:flex; min-width:0; min-height:0; flex:1; overflow:hidden; }
.material-stage { width:auto; min-width:0; min-height:0; flex:1 1 auto; margin:0; padding:0; display:flex; flex-direction:column; position:relative; overflow:hidden; background:#dbe3ed; }
.material-viewer { flex:1; min-height:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:12px; }
.material-empty { align-self:center; display:grid; gap:8px; color:#718096; text-align:center; }
.document-page { width:min(850px,100%); min-height:90%; padding:clamp(24px,5vw,64px); white-space:pre-wrap; overflow-wrap:anywhere; background:#fff; color:#202a38; box-shadow:0 5px 24px rgba(16,37,63,.15); font:16px/1.65 Georgia,serif; }
.material-viewer[data-fit-mode="custom"] .document-page{width:calc(850px * var(--material-zoom,1));max-width:none;padding:calc(48px * var(--material-zoom,1));font-size:calc(16px * var(--material-zoom,1))}
.material-viewer[data-fit-mode="actual"] .document-page{width:850px;max-width:none}
.material-viewer[data-fit-mode="page"] .document-page,.material-viewer[data-fit-mode="screen"] .document-page{width:min(850px,100%);max-height:100%;overflow:auto}
.document-page img { max-width:100%; height:auto; }
.pdf-canvas { display:block; max-width:100%; height:auto; background:#fff; box-shadow:0 5px 24px rgba(16,37,63,.18); }
.material-viewer[data-fit-mode="custom"] .pdf-canvas,.material-viewer[data-fit-mode="actual"] .pdf-canvas{max-width:none}
.pptx-host { max-width:100%; overflow:auto; margin:auto; }
.pptx-host .pptx-preview-wrapper { transform-origin:top left; max-width:100%; }
.teaching-nav { min-height:62px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:10px; border-top:1px solid #cbd5e1; background:#fff; }
.teaching-nav .primary { border-color:var(--blue); background:var(--blue); color:#fff; }
.teaching-nav strong { min-width:125px; color:#526177; font-size:12px; text-align:center; }
.teacher-panel-resize { position:relative; z-index:3; flex:0 0 10px; width:10px; margin-left:-5px; cursor:col-resize; touch-action:none; background:transparent; }
.teacher-panel-resize::after { content:''; position:absolute; top:0; bottom:0; left:4px; width:2px; background:#d5deea; transition:width .15s,left .15s,background .15s; }
.teacher-panel-resize:hover::after,.teacher-panel-resize:focus::after,.resizing-teacher-panel .teacher-panel-resize::after { left:3px; width:4px; background:#1769e0; }
.resizing-teacher-panel { cursor:col-resize!important; user-select:none; }
.teacher-panel { min-width:0; min-height:0; height:auto; flex:0 0 var(--teacher-panel-width); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:15px 18px 28px 15px; border-left:0; background:#fff; }
.display-tabs { display:grid; grid-template-columns:repeat(3,1fr); padding:3px; border-radius:9px; background:#e9eef5; }
.display-tabs button { padding:7px; border:0; background:transparent; }
.display-tabs button.active { background:#fff; color:var(--blue); box-shadow:0 2px 7px rgba(20,40,70,.1); }
.active-reading-status { display:grid; gap:3px; margin:10px 0 0; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#f7f9fc; color:var(--muted); font-size:11px; line-height:1.4; }
.active-reading-status strong { color:#526177; font-size:12px; }
.active-reading-status.active { border-color:#90baf3; background:#eaf3ff; color:#365a83; }
.active-reading-status.active strong { color:#1257b0; }
.teaching-text { max-height:230px; overflow:auto; margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fafcff; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.teaching-text h3 { margin:0 0 6px; color:var(--blue); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.teaching-text p { margin:0; overflow-wrap:anywhere; }
.dual-text { display:grid; grid-template-columns:1fr; gap:12px; }
.dual-text section + section { padding-top:12px; border-top:1px solid var(--line); }
.reading-block,.viewer-reading-block { border:1px solid transparent; border-radius:7px; transition:background-color .25s,border-color .25s,box-shadow .25s; }
.reading-block { margin:0 0 7px!important; padding:6px 8px; }
.viewer-reading-block { padding:7px 9px; }
.reading-active { border-color:#84afe9!important; background:#e8f2ff!important; box-shadow:0 0 0 2px rgba(23,105,224,.1); }
.dual-text .reading-active { position:relative; }
.dual-text .reading-active::before { content:'Aktif'; position:absolute; top:5px; right:7px; padding:2px 5px; border-radius:999px; background:#1769e0; color:#fff; font:700 9px/1.2 Inter,Segoe UI,Arial,sans-serif; }
.teacher-panel textarea { width:100%; resize:vertical; line-height:1.5; }
.teacher-actions,.interrupt-box { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 12px; }
.interrupt-box { padding:10px; border-radius:10px; background:#edf5ff; }
.voice-box { display:grid; grid-template-columns:1fr 90px; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; }
.voice-box h3 { grid-column:1/-1; margin:0; font-size:13px; color:var(--navy); }
.voice-box .voice-type-label,.voice-box label:nth-of-type(2),.voice-box label:nth-of-type(4),.voice-actions,.voice-note { grid-column:1/-1; }
.voice-actions { display:flex; flex-wrap:wrap; gap:7px; }
.voice-note { color:var(--muted); line-height:1.4; }
.custom-voice-modal { position:fixed; z-index:100010; inset:0; display:grid; place-items:center; padding:20px; background:rgba(4,18,35,.68); }
.custom-voice-modal[hidden] { display:none; }
.custom-voice-dialog { width:min(560px,100%); max-height:min(720px,92vh); overflow:auto; padding:20px; border-radius:16px; background:#fff; color:var(--navy); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.custom-voice-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.custom-voice-dialog h2 { margin:3px 0 0; }
.custom-voice-dialog header > button { border:0; background:transparent; font-size:28px; cursor:pointer; }
.custom-voice-unavailable { padding:11px 13px; border:1px solid #f0c36a; border-radius:10px; background:#fff8e8; font-weight:700; }
.voice-recording-guide { padding:10px; border-radius:8px; background:#edf5ff; }
.custom-voice-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.custom-voice-actions button { min-height:40px; }
.teacher-panel > .check-label { display:flex; align-items:center; gap:6px; margin:7px 0; }
.projector-subtitle { position:absolute; z-index:10; left:3%; right:3%; bottom:72px; max-height:3.7em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; padding:10px 16px; border-radius:11px; background:rgba(4,15,29,.88); color:#fff; font-size:clamp(18px,2.1vw,34px); line-height:1.22; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.teaching-projector { padding:0; background:#000; }
.teaching-projector .teaching-shell { width:100%; height:100vh; border-radius:0; }
.teaching-projector .teaching-head,.teaching-projector .teaching-toolbar,.teaching-projector .material-meta,.teaching-projector .teacher-panel { display:none; }
.teaching-projector .teaching-layout { display:flex; }
.teaching-projector .teacher-panel-resize { display:none; }
.teaching-projector .material-viewer { padding:0; background:#000; align-items:center; }
.teaching-projector .document-page { min-height:100%; width:min(1100px,100%); }
.teaching-projector .teaching-nav { position:fixed; z-index:12; top:8px; left:50%; transform:translateX(-50%); min-height:0; padding:5px; opacity:.15; transition:opacity .2s; border-radius:10px; }
.teaching-projector .teaching-nav:hover,.teaching-projector .teaching-nav:focus-within { opacity:1; }
.teaching-projector .projector-subtitle { position:fixed; left:3%; right:3%; bottom:10px; max-height:3.7em; }
@media (max-width:1100px) { .teaching-layout { display:flex; flex-direction:column; overflow:hidden; } .material-stage { min-height:0; flex:1 1 auto; order:2; } .teacher-panel-resize { display:none; } .teacher-panel { order:1; width:100%; max-height:230px; flex:0 0 auto; overflow-x:hidden; overflow-y:auto; padding:10px 14px; border-left:0; border-bottom:1px solid var(--line); } }
@media (max-width:850px) { .teaching-overlay { padding:0; } .teaching-shell { height:100vh; border-radius:0; } .teaching-head { min-height:60px; padding:10px 14px; } .teaching-head h2 { font-size:18px; } #teachingStatus { display:none; } .teaching-toolbar { flex-wrap:nowrap; overflow-x:auto; align-items:end; } .teaching-toolbar > * { flex:0 0 auto; } .dual-text section + section { padding:12px 0 0; } .voice-box { grid-template-columns:1fr; } .voice-box > * { grid-column:auto!important; } .custom-voice-actions { grid-template-columns:1fr; } .teaching-nav button { padding:8px; font-size:12px; } }

/* Modern academic visual refinement. Existing application behavior is unchanged. */
:root { --navy:#0b223d; --blue:#155fc5; --bg:#f5f7fa; --line:#dfe5ec; --muted:#68778b; }
body { background:linear-gradient(180deg,#f8fafc 0,#f4f7fa 420px); }
.topbar { min-height:64px; padding-block:10px; box-shadow:0 1px 0 rgba(255,255,255,.08); }
.brand-logo { width:38px; height:38px; flex-basis:38px; }
main { width:min(1200px,calc(100vw - 40px)); padding-top:30px; }
.hero { margin-bottom:22px; }
.hero h1 { font-size:clamp(30px,3.8vw,46px); letter-spacing:-1.4px; }
.hero p { margin:10px 0 0; font-size:16px; }
.controls { display:block; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 10px 32px rgba(16,37,63,.06); }
.teaching-mode-picker { gap:12px; margin:0 0 16px; }
.teaching-mode-card { min-height:84px; padding:15px 17px!important; border:1px solid var(--line)!important; border-radius:13px!important; background:#fff!important; box-shadow:none; transition:border-color .15s,background .15s,transform .15s; }
.teaching-mode-card:hover { border-color:#a9c4e8!important; transform:translateY(-1px); }
.teaching-mode-card > span { display:grid; width:42px; height:42px; place-items:center; border-radius:11px; background:#eef3f8; font-size:22px; }
.teaching-mode-card b { color:var(--navy); font-size:16px; }
.teaching-mode-card small { font-size:13px; line-height:1.35; }
.teaching-mode-card.active { border-color:#78a9e7!important; background:#f4f8fe!important; box-shadow:inset 3px 0 var(--blue); }
.teaching-mode-card.active > span { background:#e1edfc; }
.mode-switch { float:left; margin:0 12px 10px 0; }
.action-buttons { justify-content:flex-start; gap:7px; }
.action-buttons button { min-height:34px; padding:7px 10px; font-size:12px; }
.action-buttons .primary { padding-inline:16px; }
.view-controls { margin:10px 0 12px; }
.workspace { min-height:350px; border-radius:14px; box-shadow:0 8px 28px rgba(22,40,68,.055); }
.panel { padding:24px; }
.panel-heading { padding-bottom:16px; }
.content { padding-top:20px; font-size:18px; }
.teaching-overlay { background:rgba(4,16,31,.78); }
.teaching-shell { border:1px solid rgba(255,255,255,.08); border-radius:15px; }
.teaching-head { min-height:62px; padding:10px 18px; }
.teaching-head h2 { font-size:20px; }
.teaching-head-actions { gap:8px; }
.teaching-fullscreen-button { min-height:34px; }
.smart-material-picker { padding:9px 14px; gap:7px; background:#fff; }
.smart-material-picker strong { color:#526177; font-size:12px; text-transform:uppercase; letter-spacing:.8px; }
.smart-material-picker button,.smart-material-picker .sidebar-menu-link { box-sizing:border-box; min-height:35px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--navy); font-size:12px; font-weight:650; cursor:pointer; }
.smart-material-picker .sidebar-menu-link { display:flex; align-items:center; text-decoration:none; }
.smart-material-picker button:hover,.smart-material-picker .sidebar-menu-link:hover { border-color:#9bbce7; background:#f5f9ff; }
.material-stage { background:#e8edf3; }
.material-viewer { padding:18px; }
.material-empty { width:min(430px,90%); padding:34px 26px; border:1px dashed #b8c7d8; border-radius:16px; background:rgba(255,255,255,.72); }
.material-empty-icon { width:48px; height:48px; margin:0 auto 4px; display:grid; place-items:center; border-radius:50%; background:#e7f0fc; color:var(--blue); font-size:27px; font-weight:400; }
.material-empty b { color:var(--navy); font-size:22px; }
.material-empty span:not(.material-empty-icon) { font-size:14px; line-height:1.5; }
.material-empty button { width:max-content; margin:8px auto 0; padding:10px 16px; border:0; border-radius:9px; background:var(--blue); color:#fff; font-weight:700; cursor:pointer; }
.teaching-nav { min-height:54px; padding:7px 10px; gap:6px; }
.teaching-nav button { min-height:34px; padding:7px 10px; }
.teaching-nav strong { order:-1; min-width:92px; padding:7px 9px; border-radius:8px; background:#f2f5f8; }
.mobile-remote-panel { padding:10px 14px; background:#f7f9fc; }
.mobile-remote-panel h3 { color:var(--navy); font-size:15px; }
.mobile-remote-panel > button { min-height:36px; border:1px solid #b8cbe2; border-radius:8px; padding:7px 12px; background:#fff; color:var(--blue); font-weight:700; cursor:pointer; }
.remote-session-details { padding:10px; box-shadow:0 5px 18px rgba(16,37,63,.05); }
.remote-session-details img { width:124px; height:124px; }
.apro-voice-button { position:relative; padding-left:29px!important; }
.apro-voice-button::before { content:''; position:absolute; left:12px; width:7px; height:7px; border-radius:50%; background:#d34b4b; box-shadow:0 0 0 3px rgba(211,75,75,.12); }
.apro-voice-button[aria-pressed="true"]::before { background:#45d98b; box-shadow:0 0 0 3px rgba(69,217,139,.16); }
.apro-voice-button.is-command::before { background:#f3bd3e; box-shadow:0 0 0 3px rgba(243,189,62,.17); }
.apro-voice-feedback { bottom:18px; border-radius:999px; padding:9px 15px; font-size:13px; }
.projector-subtitle[hidden] { display:none!important; }
.remote-body { background:#0b223d; }
.remote-app { width:min(420px,100%); gap:14px; padding:26px 22px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:rgba(255,255,255,.065); box-shadow:0 20px 55px rgba(0,0,0,.24); }
.remote-app h1 { font-size:28px; }
.remote-app > p { color:#c4d0de; line-height:1.5; }
.remote-brand { font-size:15px; letter-spacing:1px; text-transform:uppercase; }
.remote-mic-button { min-height:78px; border-radius:14px; background:#1769d2; font-size:19px; box-shadow:0 9px 24px rgba(0,0,0,.2); }
.remote-command-card { padding:16px; border-radius:12px; background:rgba(255,255,255,.055); }

@media (max-width:900px) {
  main { width:min(100% - 28px,1200px); padding-top:24px; }
  .hero h1 { font-size:clamp(28px,5vw,38px); }
  .controls { padding:14px; }
  .mode-switch { float:none; width:max-content; }
  .action-buttons { clear:both; }
  .teaching-head-actions #teachingStatus { max-width:160px; }
}
@media (max-width:700px) {
  .topbar { padding:10px 14px; }
  .brand { font-size:16px; }
  .statuses { gap:6px; }
  .status,.provider { padding:6px 8px; font-size:11px; }
  main { width:calc(100% - 20px); padding-top:18px; }
  .hero { margin-bottom:16px; }
  .hero h1 { font-size:30px; }
  .hero p { font-size:14px; }
  .controls { padding:10px; border-radius:14px; }
  .teaching-mode-card { min-height:72px; padding:12px!important; }
  .teaching-mode-card > span { width:36px; height:36px; font-size:19px; }
  .teaching-mode-card b { font-size:15px; }
  .teaching-mode-card small { font-size:12px; }
  .mode-switch { display:grid; width:100%; grid-template-columns:1fr 1fr; }
  .action-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .action-buttons > *, .presentation-control > button:first-child { width:100%; }
  .presentation-control { display:flex; }
  .presentation-options-button { width:38px!important; flex:0 0 38px; }
  .view-controls { overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:3px; }
  .view-controls > * { flex:0 0 auto; }
  .workspace { border-radius:12px; }
  .panel { min-height:250px; padding:18px; }
  .panel-heading h2 { font-size:18px; }
  .content { font-size:16px; }
  .teaching-head { align-items:flex-start; }
  .teaching-head small,#teachingStatus { display:none; }
  .teaching-head h2 { font-size:17px; }
  .teaching-fullscreen-button { padding:6px 8px; font-size:11px; }
  .smart-material-picker { flex-wrap:nowrap; overflow-x:auto; }
  .smart-material-picker > * { flex:0 0 auto; }
  .material-viewer { padding:10px; }
  .material-empty { padding:24px 16px; }
  .material-empty b { font-size:20px; }
  .teaching-nav { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; }
  .teaching-nav > * { flex:0 0 auto; }
  .mobile-remote-panel { align-items:stretch; }
  .mobile-remote-panel > button { width:100%; }
  .remote-session-details { display:grid; grid-template-columns:96px 1fr; gap:10px; }
  .remote-session-details img { width:96px; height:96px; }
  .remote-session-details a { overflow-wrap:anywhere; font-size:12px; }
  .remote-app { min-height:calc(100vh - 24px); justify-content:center; padding:22px 18px; border-radius:18px; }
}
@media (max-width:420px) {
  .statuses .provider { display:none; }
  .action-buttons { grid-template-columns:1fr; }
  .remote-session-details { grid-template-columns:1fr; text-align:center; }
  .remote-session-details img { margin:auto; }
}

/* Dashboard satu halaman: sidebar ringkas dan ruang baca vertikal. */
@media (min-width:901px) {
  body { padding-top:60px; }
  .topbar { position:fixed; z-index:100; inset:0 0 auto; min-height:60px; height:60px; padding:8px 22px; }
  .brand-logo { width:34px; height:34px; flex-basis:34px; }
  main { width:auto; max-width:none; margin:0 0 0 232px; padding:18px 22px 14px; }
  .hero { display:none; }
  .controls { position:fixed; z-index:90; top:60px; bottom:0; left:0; width:232px; margin:0; padding:13px 12px 18px; overflow-y:auto; border:0; border-right:1px solid #d7e0ea; border-radius:0; background:#fff; box-shadow:4px 0 18px rgba(16,37,63,.045); scrollbar-width:thin; }
  .teaching-mode-picker { grid-template-columns:1fr; gap:6px; margin-bottom:10px; }
  .teaching-mode-card { min-height:58px; grid-template-columns:30px 1fr; gap:0 8px; padding:8px 9px!important; border-radius:9px!important; }
  .teaching-mode-card > span { width:30px; height:30px; border-radius:8px; font-size:16px; }
  .teaching-mode-card b { font-size:12px; line-height:1.25; }
  .teaching-mode-card small { font-size:10px; line-height:1.25; }
  .mode-switch { float:none; display:grid; grid-template-columns:1fr 1fr; width:100%; margin:0 0 9px; padding:3px; }
  .mode { padding:7px 5px; font-size:10px; }
  .action-buttons { display:grid; grid-template-columns:1fr; gap:4px; }
  .action-buttons > button,.presentation-control { width:100%; min-width:0; }
  .action-buttons button { min-height:31px; padding:6px 7px; overflow:hidden; font-size:10.5px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
  .action-buttons .primary { padding-inline:7px; }
  .presentation-control { display:flex; grid-column:1/-1; }
  .presentation-control > button:first-child { flex:1; min-width:0; }
  .presentation-options-button { flex:0 0 30px; width:30px; }
  .presentation-status { grid-column:1/-1; justify-self:start; }
  .presentation-menu { position:fixed; top:70px; left:240px; right:auto; }
  #teachingButton,#aproVoiceButton { grid-column:1/-1; }
  .apro-voice-button { text-align:left; }
  .view-controls { margin:0 0 9px; }
  .speech-controls { margin:0 0 9px; padding:9px; }
  .workspace { display:grid; grid-template-columns:1fr; min-height:0; border-radius:12px; }
  .source-panel { min-height:250px; border-right:0; border-bottom:1px solid var(--line); }
  .translation-panel { min-height:300px; background:#fff; }
  .panel { padding:20px 22px; }
  .panel-heading { padding-bottom:12px; }
  .panel-heading h2 { font-size:20px; }
  .content { min-height:126px; padding-top:16px; font-size:18px; line-height:1.58; }
  .message { margin:8px 3px; }
  footer { margin-left:232px; padding:6px 20px 12px; }
  body.projector { padding-top:0; }
  body.projector main { margin-left:0; }
  body.projector footer { margin-left:0; }
}

@media (min-width:901px) and (max-height:760px) {
  .controls { padding-top:9px; }
  .teaching-mode-card { min-height:50px; }
  .teaching-mode-card small { display:none; }
  .action-buttons button { min-height:27px; padding-block:4px; }
  .source-panel { min-height:210px; }
  .translation-panel { min-height:240px; }
  .content { min-height:100px; }
}

@media (max-width:900px) {
  body { padding-top:0; }
  .topbar { position:static; }
  main { margin:0 auto; }
  .hero { display:none; }
  .controls { position:static; width:auto; margin-bottom:10px; }
  .workspace { grid-template-columns:1fr; }
  .source-panel { border-right:0; border-bottom:1px solid var(--line); }
  footer { margin-left:0; }
}

/* Dashboard ringkas: sidebar ramping dan panel baca dua kolom. */
@media (min-width:901px) {
  main { margin-left:198px; padding:12px 14px 10px; }
  .controls { width:198px; padding:8px 8px 12px; }
  .teaching-mode-picker { gap:4px; margin-bottom:6px; }
  .teaching-mode-card { min-height:46px; grid-template-columns:26px 1fr; gap:0 6px; padding:6px 7px!important; border-radius:7px!important; }
  .teaching-mode-card > span { width:26px; height:26px; border-radius:7px; font-size:14px; }
  .teaching-mode-card b { font-size:11.5px; }
  .teaching-mode-card small { display:none; }
  .mode-switch { margin-bottom:6px; }
  .mode { padding:5px 3px; font-size:10px; }
  .action-buttons { gap:3px; }
  .action-buttons button { min-height:25px; padding:4px 6px; border-radius:6px; font-size:11px; }
  .presentation-options-button { flex-basis:26px; width:26px; }
  .presentation-menu { top:65px; left:204px; }
  .workspace { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .workspace.single-panel { grid-template-columns:1fr; }
  .source-panel { min-height:calc(100vh - 150px); border-right:1px solid var(--line); border-bottom:0; }
  .translation-panel { min-height:calc(100vh - 150px); }
  .panel { padding:14px 16px; }
  .panel-heading { padding-bottom:9px; }
  .panel-heading small { font-size:8.5px; letter-spacing:1.1px; }
  .panel-heading h2 { margin-top:2px; font-size:14px; line-height:1.25; }
  .panel-tools { gap:4px; }
  #listeningBadge,.language { padding:4px 7px; font-size:9px; }
  .collapse-button { padding:4px 7px; font-size:9px; }
  .content { min-height:0; padding-top:12px; font-size:14px; line-height:1.55; }
  .interim { font-size:12px; line-height:1.5; }
  .view-controls { gap:4px; margin-bottom:6px; }
  .view-controls button,.view-controls label { padding:5px 8px; font-size:10px; }
  .speech-controls { gap:6px; margin-bottom:6px; padding:7px; }
  .speech-controls label,.speech-controls button { font-size:10px; }
  .message { min-height:18px; margin:5px 3px; font-size:10px; }
  footer { margin-left:198px; padding:4px 14px 8px; font-size:10px; }
}

@media (min-width:901px) and (max-height:700px) {
  .controls { padding-top:6px; }
  .teaching-mode-card { min-height:40px; }
  .action-buttons button { min-height:23px; padding-block:3px; }
  .source-panel,.translation-panel { min-height:calc(100vh - 136px); }
}

@media (max-width:900px) {
  .workspace,.workspace.single-panel { grid-template-columns:1fr; }
  .panel-heading h2 { font-size:14px; }
  .panel-heading small { font-size:9px; }
  .content { font-size:14px; }
  .action-buttons button { min-height:30px; padding:6px 8px; font-size:11px; }
}

/* Sistem visual kompak lintas seluruh aplikasi. */
@media (min-width:901px) {
  body { font-size:12px; }
  button,input,select,textarea { font-size:12px; }
  main { margin-left:180px; padding:10px 12px 8px; }
  .controls { width:180px; padding:7px 7px 10px; }
  .teaching-mode-card { min-height:42px; grid-template-columns:24px 1fr; padding:5px 6px!important; }
  .teaching-mode-card > span { width:24px; height:24px; font-size:13px; }
  .teaching-mode-card b { font-size:11px; }
  .mode { font-size:9.5px; }
  .action-buttons button { min-height:24px; padding:3px 5px; font-size:10.5px; }
  .presentation-menu { left:186px; width:220px; padding:7px; }
  .view-controls button,.view-controls label { min-height:25px; padding:4px 7px; font-size:10px; }
  .workspace { min-height:calc(100vh - 114px); }
  .source-panel,.translation-panel { min-height:calc(100vh - 114px); }
  .panel { padding:12px 14px; }
  .panel-heading h2 { font-size:13px; }
  .content { padding-top:10px; font-size:12px; line-height:1.55; }
  .interim { font-size:11px; }
  footer { margin-left:180px; font-size:9px; }

  .overlay { z-index:900; padding:3vh 3vw; }
  .archive-dialog { width:min(1080px,96vw); height:min(88vh,760px); padding:14px; border-radius:12px; }
  .dialog-head h2,.confirm-dialog h2 { margin:2px 0 8px; font-size:16px; }
  .dialog-head small { font-size:8px; }
  .icon-button { font-size:22px; }
  .archive-toolbar { padding-bottom:8px; }
  .archive-toolbar input { padding:7px 8px; font-size:11px; }
  .archive-toolbar button,.detail-actions button,.vocab-head button,.manual-vocab button,.dialog-actions button { min-height:28px; padding:5px 8px; border-radius:6px; font-size:11px; }
  .archive-layout { grid-template-columns:230px 1fr; border-radius:9px; }
  .archive-list { padding:5px; }
  .archive-item { gap:3px; padding:8px; margin-bottom:3px; border-radius:6px; font-size:11px; }
  .archive-item span,.session-meta,.muted-copy { font-size:10px; }
  .archive-detail { padding:14px; }
  .archive-detail h3 { margin:8px 0 3px; font-size:14px; }
  .archive-detail h4 { margin:12px 0 5px; font-size:12px; }
  .archive-detail pre { padding:8px; border-radius:6px; font-size:11px; line-height:1.45; }
  .vocab-row { gap:8px; padding:6px 0; font-size:11px; }
  .manual-vocab { margin-top:8px; }
  .confirm-dialog { width:min(440px,92vw); margin-top:12vh; padding:18px; border-radius:12px; font-size:11px; }
  .confirm-dialog label { gap:4px; margin:9px 0; font-size:11px; }
  .confirm-dialog input { padding:7px; }
  .dialog-actions { margin-top:12px; }

  .teaching-overlay { padding:1.5vh 1.2vw; }
  .teaching-shell { width:min(1540px,100%); height:97vh; display:grid; grid-template-columns:210px minmax(0,1fr); grid-template-rows:52px auto minmax(0,1fr) auto; border-radius:12px; }
  .teaching-head { grid-column:1/-1; grid-row:1; min-height:52px; padding:8px 12px; }
  .teaching-head h2 { font-size:16px; }
  .teaching-head small { font-size:8px; }
  .teaching-head-actions { gap:6px; }
  #teachingStatus { font-size:10px; }
  .teaching-fullscreen-button { min-height:27px; padding:4px 7px; font-size:10px; }
  .teaching-toolbar { grid-column:1; grid-row:2; display:grid; align-content:start; gap:6px; padding:8px; overflow:auto; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .teaching-toolbar > span { display:none; }
  .teaching-toolbar label { font-size:10px; }
  .teaching-toolbar select,.teaching-toolbar button,.upload-button { width:100%; min-height:28px; padding:5px 6px; font-size:10px; }
  .material-meta { grid-column:2; grid-row:2; padding:6px 10px; font-size:10px; }
  .teaching-layout { display:contents; }
  .material-stage { grid-column:2; grid-row:2/4; min-width:0; min-height:0; }
  .teacher-panel-resize { display:none; }
  .teacher-panel { grid-column:1; grid-row:3; width:auto; min-width:0; height:auto; padding:8px; overflow:auto; border-right:1px solid var(--line); font-size:10px; }
  .teacher-panel label { font-size:10px; }
  .display-tabs { border-radius:6px; }
  .display-tabs button,.teacher-panel button,.teacher-panel select,.teacher-panel textarea { padding:5px 6px; border-radius:6px; font-size:10px; }
  .active-reading-status { margin-top:6px; padding:6px 7px; font-size:9px; }
  .active-reading-status strong { font-size:10px; }
  .teaching-text { max-height:150px; margin:7px 0; padding:7px; border-radius:7px; font-size:10px; line-height:1.45; }
  .voice-box { grid-template-columns:1fr; gap:5px; padding:7px; border-radius:7px; }
  .voice-box > * { grid-column:auto!important; }
  .voice-box h3 { font-size:11px; }
  .teacher-actions,.interrupt-box { gap:4px; margin:5px 0 7px; }
  .interrupt-box { padding:6px; border-radius:7px; }
  .smart-material-picker { grid-column:1; grid-row:2/4; align-content:start; display:grid; gap:5px; padding:8px; overflow:auto; border-right:1px solid var(--line); }
  .smart-material-picker[hidden] { display:none; }
  .smart-material-picker strong { margin:0 0 2px; font-size:9px; }
  .smart-material-picker button,.smart-material-picker .sidebar-menu-link { width:100%; min-height:29px; padding:5px 6px; text-align:left; font-size:10px; }
  .material-viewer { padding:10px; }
  .material-empty { width:min(360px,88%); padding:22px 18px; border-radius:11px; }
  .material-empty-icon { width:36px; height:36px; font-size:20px; }
  .material-empty b { font-size:14px; }
  .material-empty span:not(.material-empty-icon) { font-size:11px; }
  .material-empty button { padding:7px 10px; font-size:11px; }
  .teaching-nav { min-height:42px; gap:4px; padding:5px; }
  .teaching-nav button { min-height:28px; padding:4px 7px; border-radius:6px; font-size:10px; }
  .teaching-nav strong { min-width:78px; padding:5px 6px; font-size:10px; }
  .mobile-remote-panel { grid-column:1/-1; grid-row:4; padding:7px 9px; font-size:10px; }
  .mobile-remote-panel h3 { font-size:12px; }
  .mobile-remote-panel p { font-size:10px; }
  .mobile-remote-panel > button { min-height:28px; padding:5px 8px; font-size:10px; }
  .remote-session-details { padding:7px; }
  .remote-session-details img { width:90px; height:90px; }

  .custom-voice-dialog { width:min(500px,100%); max-height:88vh; padding:14px; border-radius:11px; font-size:11px; }
  .custom-voice-dialog h2 { font-size:16px; }
  .custom-voice-actions { gap:5px; margin:8px 0; }
  .custom-voice-actions button { min-height:28px; font-size:10px; }
  .custom-voice-unavailable,.voice-recording-guide { padding:7px 8px; border-radius:6px; }

  .remote-app { width:min(380px,100%); gap:10px; padding:18px; border-radius:15px; }
  .remote-app h1 { font-size:18px; }
  .remote-app > p,.remote-code,.remote-hint { font-size:11px; }
  .remote-mic-button { min-height:54px; border-radius:9px; font-size:12px; }
  .remote-mic-status { font-size:12px; }
  .remote-command-card { gap:5px; padding:10px; border-radius:8px; }
  .remote-command-card p { font-size:12px; }
}

@media (max-width:900px) {
  body { font-size:14px; }
  button,input,select,textarea { font-size:14px; }
  .teaching-shell { display:flex; }
  .teaching-layout { display:flex; }
  .material-stage { order:2; }
  .teacher-panel { order:1; }
  .smart-material-picker { display:flex; }
  .remote-app h1 { font-size:22px; }
  .remote-mic-button { min-height:64px; font-size:16px; }
}

/* Fullscreen presentasi: materi tetap terpasang, seluruh UI administratif tersembunyi. */
.teaching-overlay.material-fullscreen,.teaching-overlay.teaching-projector { inset:0; padding:0; overflow:hidden; background:#000; backdrop-filter:none; }
.material-fullscreen .teaching-shell,.teaching-projector .teaching-shell { width:100vw; max-width:none; height:100vh; display:block; overflow:hidden; border:0; border-radius:0; background:#000; box-shadow:none; }
.material-fullscreen .teaching-head,.material-fullscreen .smart-material-picker,.material-fullscreen .teaching-toolbar,.material-fullscreen .material-meta,.material-fullscreen .teacher-panel,.material-fullscreen .teacher-panel-resize,.material-fullscreen .teaching-nav,.material-fullscreen .mobile-remote-panel,.material-fullscreen .projector-subtitle,
.teaching-projector .teaching-head,.teaching-projector .smart-material-picker,.teaching-projector .teaching-toolbar,.teaching-projector .material-meta,.teaching-projector .teacher-panel,.teaching-projector .teacher-panel-resize,.teaching-projector .teaching-nav,.teaching-projector .mobile-remote-panel,.teaching-projector .projector-subtitle { display:none!important; }
.material-fullscreen .teaching-layout,.teaching-projector .teaching-layout { display:block!important; width:100vw; height:100vh; }
.material-fullscreen .material-stage,.teaching-projector .material-stage { position:fixed; inset:0; width:100vw; height:100vh; min-height:100vh; display:flex; overflow:hidden; background:#000; }
.material-fullscreen .material-viewer,.teaching-projector .material-viewer { box-sizing:border-box; width:100vw; max-width:none; height:100vh; min-height:100vh; margin:0; padding:0; border:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000; }
.material-fullscreen .pptx-host,.teaching-projector .pptx-host { box-sizing:border-box; width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.material-fullscreen .pptx-preview-wrapper,.teaching-projector .pptx-preview-wrapper { width:100vw; max-width:none; max-height:none; margin:0!important; padding:0!important; border:0!important; overflow:hidden!important; }
.material-fullscreen .pptx-preview-slide-wrapper,.teaching-projector .pptx-preview-slide-wrapper { width:100vw; max-width:none; max-height:none; margin:0!important; padding:0!important; border:0!important; }
.material-fullscreen .pptx-preview-wrapper-next,.material-fullscreen .pptx-preview-wrapper-pagination,
.teaching-projector .pptx-preview-wrapper-next,.teaching-projector .pptx-preview-wrapper-pagination { display:none!important; }
.material-fullscreen .pdf-canvas,.teaching-projector .pdf-canvas { display:block; flex:0 0 auto; max-width:none; max-height:none; margin:0; padding:0; border:0; transform:none; }
.material-fullscreen .material-viewer[data-fit-mode="width"] .pdf-canvas,.material-fullscreen .material-viewer[data-fit-mode="screen"] .pdf-canvas,
.teaching-projector .material-viewer[data-fit-mode="width"] .pdf-canvas,.teaching-projector .material-viewer[data-fit-mode="screen"] .pdf-canvas { width:100vw!important; height:auto!important; }
.material-fullscreen .material-viewer[data-fit-mode="page"] .pdf-canvas,.teaching-projector .material-viewer[data-fit-mode="page"] .pdf-canvas { max-width:100vw; max-height:100vh; margin:auto; }
.material-fullscreen .material-image,.teaching-projector .material-image,.material-fullscreen .material-video,.teaching-projector .material-video { display:block; max-width:100vw; max-height:100vh; width:auto; height:auto; margin:auto; object-fit:contain; transform:none; }
.material-fullscreen .document-page,.teaching-projector .document-page { width:min(1100px,100vw); height:100vh; min-height:0; margin:auto; overflow:auto; box-shadow:none; }

.voice-command-guide { grid-column:1/-1; padding:7px; border:1px solid #d7e2ef; border-radius:8px; background:#f7faff; color:#17324f; }
.voice-command-guide b { display:block; margin-bottom:5px; font-size:10px; }
.voice-command-chips { display:flex; flex-wrap:wrap; gap:4px; }
.voice-command-chips span { padding:3px 6px; border:1px solid #c9d9eb; border-radius:999px; background:#fff; color:#28527d; font-size:9px; line-height:1.15; white-space:nowrap; }
.teaching-command-guide { min-width:220px; max-width:430px; }
.remote-command-guide { width:100%; padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(255,255,255,.06); }
.remote-command-guide summary { cursor:pointer; font-size:12px; font-weight:700; }
.remote-command-guide[open] summary { margin-bottom:8px; }
.remote-command-card p { white-space:pre-line; }
.remote-manual{display:grid;gap:9px}.remote-page-status{font-size:12px;font-weight:800;color:#d9eaff}.remote-nav-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.remote-nav-buttons button,.remote-tool-buttons button{border:1px solid rgba(255,255,255,.18);background:#1769d2;color:#fff;border-radius:10px;cursor:pointer;font-weight:800}.remote-nav-buttons button{min-height:68px;display:grid;place-content:center;gap:3px}.remote-nav-buttons button span{font-size:27px}.remote-nav-buttons button small,.remote-tool-buttons button small{display:block;font-size:10px;font-weight:700}.remote-nav-buttons.secondary button{min-height:52px;background:rgba(23,105,210,.62)}.remote-tool-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.remote-tool-buttons button{min-height:46px;padding:6px;font-size:17px;background:rgba(255,255,255,.09)}.remote-tool-buttons button[hidden]{display:none}.remote-tool-buttons button:active,.remote-nav-buttons button:active{transform:translateY(1px);background:#0f55ae}
.material-zoom-control{display:flex;align-items:center;gap:4px}.material-zoom-control input{width:100px}.material-zoom-control output{min-width:38px;font-size:10px;font-weight:800}.apro-exit-confirmation{position:fixed;z-index:10000;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #c7d5e5;border-radius:10px;background:#fff;color:#10253f;box-shadow:0 12px 35px rgba(7,25,48,.24);font:700 12px Inter,Segoe UI,sans-serif}.apro-exit-confirmation[hidden]{display:none}.apro-exit-confirmation button{min-height:28px;padding:4px 10px;border:1px solid #aebfd3;border-radius:7px;background:#f5f8fc;color:#173552;cursor:pointer}.apro-exit-confirmation button[data-exit-confirm="yes"]{background:#1769d2;color:#fff;border-color:#1769d2}
.ebook-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 8px;border-bottom:1px solid #d7e2ef;background:#f8fbff;color:#17324f;font-size:10px}.ebook-toolbar[hidden]{display:none}.ebook-toolbar button,.ebook-toolbar select,.ebook-toolbar input{min-height:28px;border:1px solid #bfd0e2;border-radius:7px;background:#fff;color:#17324f;font-size:10px}.ebook-toolbar button{padding:4px 8px;font-weight:700;cursor:pointer}.ebook-toolbar label{display:flex;align-items:center;gap:3px}.ebook-toolbar form{display:flex;gap:3px}.ebook-toolbar form input{width:150px;padding:4px 7px}.ebook-book-meta{display:flex;align-items:center;gap:5px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ebook-book-meta img{width:22px;height:30px;object-fit:cover;border-radius:2px}.ebook-reader-host{width:100%;height:100%;min-height:54vh;background:#fff}.ebook-reader-host iframe{border:0!important}.ebook-panel{position:absolute;z-index:8;top:0;left:0;width:min(340px,88vw);height:100%;padding:0;border-right:1px solid #cad8e8;background:#fff;color:#17324f;box-shadow:12px 0 28px rgba(10,35,65,.16);overflow:auto}.ebook-panel[hidden]{display:none}.ebook-panel header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-bottom:1px solid #d7e2ef;background:#f7faff}.ebook-panel header button{border:0;background:transparent;font-size:18px;cursor:pointer}.ebook-panel-content{padding:8px}.ebook-toc-list{display:grid;gap:3px;margin:0;padding-left:14px;list-style:none}.ebook-toc-list button,.ebook-result{width:100%;padding:6px 7px;border:0;border-radius:6px;background:transparent;color:#17324f;text-align:left;font-size:11px;cursor:pointer}.ebook-toc-list button:hover,.ebook-result:hover{background:#edf5ff}.ebook-result{display:block;margin-bottom:4px;border:1px solid #dbe5f0}.material-stage{position:relative}.material-fullscreen .ebook-toolbar,.teaching-projector .ebook-toolbar{display:none!important}.material-fullscreen .ebook-reader-host,.teaching-projector .ebook-reader-host{width:100vw;height:100vh;min-height:100vh}.material-fullscreen .ebook-panel[data-panel-type="utility"],.teaching-projector .ebook-panel[data-panel-type="utility"]{display:none!important}
@media(max-width:700px){.ebook-toolbar{gap:4px}.ebook-toolbar label:nth-of-type(2),.ebook-toolbar label:nth-of-type(3),.ebook-book-meta{display:none}.ebook-reader-host{min-height:62vh}.ebook-panel{width:92vw}}
.material-fullscreen .voice-command-guide,.teaching-projector .voice-command-guide { display:none!important; }

/* Reader EPUB: viewport paginated yang utuh dengan book spread ringan. */
.ebook-reader-host{position:relative;overflow:hidden;background:#cfd6de;transition:background .15s ease}
.ebook-reader-host iframe{display:block;background:#fff;box-shadow:0 2px 16px rgba(16,37,63,.14)}
.ebook-reader-host.ebook-book-view{background:#c8d0d9}
.ebook-reader-host.ebook-book-view::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:50%;width:28px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(20,34,50,.14),rgba(255,255,255,.28) 45%,rgba(20,34,50,.14));box-shadow:0 0 12px rgba(16,37,63,.12)}
.ebook-reader-host.ebook-single-view iframe{border:1px solid rgba(75,95,120,.2)}
@media(max-width:819px){.ebook-reader-host.ebook-book-view::after{display:none}}

/* Standalone shell: the copied Smart Teaching workspace is the app home. */
.smart-teaching-standalone > .topbar,
.smart-teaching-standalone > main,
.smart-teaching-standalone > footer,
.smart-teaching-standalone > .update-banner,
.smart-teaching-standalone > .exit-projector,
.smart-teaching-standalone > .presentation-subtitle { display:none!important; }
.smart-teaching-standalone .teaching-overlay { padding:0; background:#e8edf3; }
.smart-teaching-standalone .teaching-shell { width:100vw; max-width:none; height:100vh; border:0; border-radius:0; box-shadow:none; }
.smart-teaching-standalone #closeTeachingButton { display:none; }
.smart-teaching-standalone .smart-material-picker .standalone-nav-active { border-color:#78a9e7; background:#eaf3ff; color:#0c4fa8; }
.smart-teaching-standalone .smart-material-picker button:disabled { cursor:not-allowed; opacity:.55; }
.ayges-consultation-panel{position:fixed;z-index:80;top:72px;right:18px;width:min(440px,calc(100vw - 36px));max-height:calc(100vh - 92px);overflow:auto;padding:18px;border:1px solid #cbd5e1;border-radius:16px;background:#fff;color:#172033;box-shadow:0 22px 60px rgba(15,23,42,.28)}
.ayges-consultation-panel[hidden]{display:none!important}.ayges-consultation-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.ayges-consultation-panel h3{margin:3px 0 0}.ayges-consultation-panel header button{min-width:38px}.ayges-consultation-panel form{display:grid;gap:9px}.ayges-consultation-panel textarea{width:100%;resize:vertical;box-sizing:border-box}.ayges-actions{display:flex;gap:9px;justify-content:flex-end}.ayges-status{margin:14px 0 0;color:#475569}.ayges-answer{margin-top:14px;white-space:pre-wrap;line-height:1.55}.ayges-answer:not(:empty){padding:13px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0}.teaching-projector .ayges-consultation-panel{display:none!important}
.ayges-speaker-status{margin:8px 0 0;padding:9px 11px;border-radius:10px;background:#f1f5f9;color:#334155;font-size:.86rem}.ayges-speaker-status[data-state="primary"],.ayges-speaker-status[data-state="verified"]{background:#ecfdf5;color:#166534}.ayges-speaker-status[data-state="ignored"],.ayges-speaker-status[data-state="error"],.ayges-speaker-status[data-state="unavailable"]{background:#fff7ed;color:#9a3412}
.ayges-expert{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px;border:1px solid #dbeafe;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f8fafc)}.ayges-expert img{width:74px;height:74px;object-fit:cover;border-radius:50%;border:2px solid #fff;box-shadow:0 4px 14px rgba(15,23,42,.18)}.ayges-expert>div{display:grid;gap:4px;flex:1}.ayges-expert span{font-size:.82rem;color:#475569}.ayges-expert-options{display:flex;gap:6px}.ayges-expert-options button{padding:5px 9px;font-size:.78rem}.ayges-expert-options button[aria-pressed="true"]{background:#1d4ed8;color:#fff}.ayges-expert.is-speaking img{box-shadow:0 0 0 4px rgba(37,99,235,.18),0 6px 18px rgba(15,23,42,.22)}.ayges-lipsync-status{display:block;margin-top:7px;color:#64748b;font-size:.75rem}
.ayges-profile-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.ayges-profile-controls label{display:grid;gap:4px;font-size:.78rem;color:#475569}.ayges-profile-controls select{min-width:0}.ayges-capability-status{display:block;margin:-2px 0 12px;color:#475569}.ayges-source-label{display:block;margin-top:10px;font-size:.75rem;font-weight:700;color:#1d4ed8}
@media(max-width:520px){.ayges-profile-controls{grid-template-columns:1fr}}