:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #243344; background: #fcfcfa; font-synthesis: none;
  --green: #277a69; --line: #e5e8e5; --shadow: 0 4px 20px #203b3010, 0 1px 3px #203b3008;
  --dock-height: 62px;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, input, select { font: inherit; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 46px; min-height: 46px; padding: 0 12px; flex-shrink: 0;
  border: 0; border-radius: 10px; background: transparent; color: inherit;
  cursor: pointer; touch-action: manipulation; font-size: 13px; font-weight: 550;
}
button:hover { background: #eef2ee; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #65b8a8; outline-offset: 2px; }
button:disabled { opacity: .28; cursor: default; }
button.active, button[aria-pressed=true] { background: #e8f2ed; color: var(--green); }
button.primary { background: var(--green); color: white; }
button.primary:hover { background: #206858; }
svg { width: 21px; height: 21px; flex-shrink: 0; display: block; pointer-events: none; }
#board { position: absolute; inset: 0; background: #fcfcfa; overflow: hidden; }
.paper { position: absolute; inset: 0; pointer-events: none; }
.paper-right { display: none; }
#board.comparison .paper { width: 50%; right: auto; }
#board.comparison .paper-right { display: block; left: 50%; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#base { pointer-events: none; }
#live { touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
#empty-hint { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; color: #6d7d72; }
.hint-symbol { font-size: 52px; font-weight: 300; color: #9db4a3; }
h1 { font-size: 30px; letter-spacing: -1px; font-weight: 500; color: #64796a; margin: 20px 0 12px; }
#empty-hint p { font-size: 15px; margin: 0 0 15px; }
#empty-hint > span:last-child { font-size: 12px; color: #95a196; }
.dark #empty-hint h1 { color: #a2b9a8; }
/* A single compact row. Menus float above their launchers. */
#bottom-dock { position: absolute; z-index: 10; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: calc(100% - 24px); width: max-content; height: 62px; padding: 7px 10px; overflow-x: auto; overflow-y: hidden; background: #fffffff7; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 32px #203b3017; scrollbar-width: thin; }
#bottom-dock > button { white-space: nowrap; }
.brand { text-decoration: none; flex-shrink: 0; margin-right: 5px; }
.brandmark { height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; background: var(--green); color: white; border-radius: 10px; font: bold 31px/1 Georgia,serif; }
.brandmark span { font: 28px Georgia; align-self: flex-end; margin: 0 0 2px -2px; color: #9ed3ae; }
.small-divider { height: 24px; border-left: 1px solid var(--line); margin: 0 3px; flex-shrink: 0; }
.menu-arrow svg { width: 13px; height: 13px; }
.color-swatch { width: 22px; height: 22px; border-radius: 50%; background: #243344; display: block; }
#width-label { white-space: nowrap; }
#colors { display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; }
#colors button { padding: 9px; min-width: 40px; }
#colors button span { height: 24px; width: 24px; border-radius: 50%; border: 1px solid #00000012; }
#width-dot { display: block; width: 3px; height: 3px; background: #243344; border-radius: 50%; }
#ink-mode, .zoom-controls, .page-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#ink-mode { background: #f4f6f2; padding: 4px; border-radius: 10px; }
#ink-mode button { flex: 1; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool-grid button { justify-content: flex-start; }
#zoom-reset { font-variant-numeric: tabular-nums; min-width: 80px; }
#show-ui { position: absolute; bottom: 18px; left: 20px; z-index: 7; width: 54px; height: 54px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
body.ui-hidden #bottom-dock, body.ui-hidden .panel { display: none; }
.save-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #829087; margin: 12px 0; }
.save-status > span:first-child { width: 6px; height: 6px; background: #70a583; border-radius: 50%; flex-shrink: 0; }
.text-input { width: 100%; min-height: 46px; border: 1px solid var(--line); padding: 10px; border-radius: 8px; margin-top: 10px; }
/* Menus open immediately above the bottom controls; dialogs are bottom anchored too. */
.panel { position: absolute; right: 18px; bottom: calc(var(--dock-height) + 28px); width: 320px; max-height: calc(100vh - var(--dock-height) - 50px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; z-index: 11; box-shadow: 0 10px 50px #203b301a; font-size: 13px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 6px; }
h2 { font-size: 16px; font-weight: 650; margin: 0 0 17px; letter-spacing: -.3px; }
.panel-head h2 { margin: 0; }
.field { display: block; margin: 20px 0; color: #51615a; font-size: 12px; }
.field output { float: right; color: var(--green); }
input[type=range] { width: 100%; accent-color: var(--green); margin-top: 10px; min-height: 46px; cursor: pointer; }
select { width: 100%; min-height: 46px; padding: 12px; border: 1px solid var(--line); background: #fafbf8; border-radius: 8px; color: #243344; margin-top: 10px; }
.toggle { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; min-height: 46px; }
.toggle input { width: 24px; height: 24px; accent-color: var(--green); }
.note { font-size: 11px; line-height: 1.7; color: #7b8980; margin: 12px 0; }
.wide { display: flex; width: 100%; justify-content: flex-start; margin: 5px 0; text-align: left; line-height: 1.5; }
.danger { color: #b3504a; }
.export-panel { width: 300px; }
.pages-panel { width: 300px; }
#page-list { max-height: 300px; overflow: auto; }
#page-list button { width: 100%; justify-content: flex-start; }
#compare-labels { position: absolute; top: 24px; left: 0; right: 0; display: flex; pointer-events: none; }
#compare-labels > span { width: 50%; text-align: center; font-size: 12px; color: #688172; }
#compare-labels b { display: inline-block; border: 1px solid #cfddd3; border-radius: 5px; padding: 4px 7px; margin-right: 7px; font-size: 10px; }
#compare-labels small { display: block; margin-top: 8px; font-size: 10px; color: #92a095; }
#board.comparison:after { content: ""; position: absolute; inset: 0 auto 0 50%; border-left: 1px dashed #c7d5c9; pointer-events: none; }
.live-badge { font-size: 9px; letter-spacing: 1px; color: var(--green); background: #e8f2ed; padding: 5px; border-radius: 4px; }
#diagnostics-panel { width: min(460px, calc(100vw - 16px)); }
#diagnostics-values { font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#diagnostics-values dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#diagnostics-values dt, #diagnostics-values p { color: #7b8980; }
#diagnostics-values dd { margin: 0; text-align: right; }
#diagnostics-values details { margin: 14px 0; }
#diagnostics-values h3 { margin: 18px 0 8px; font: 600 13px system-ui; }
#diagnostics-values .diagnostic-log { padding-left: 18px; }
#diagnostics-values .diagnostic-log li { margin-bottom: 14px; }
#diagnostics-values .diagnostic-log pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 4px 0; }
#toast { position: absolute; bottom: calc(var(--dock-height) + 30px); left: 50%; transform: translateX(-50%); background: #243b31; color: #fff; border-radius: 10px; padding: 14px 22px; font-size: 13px; z-index: 10; max-width: 90vw; pointer-events: none; }
dialog { position: fixed; top: auto; bottom: 25px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; padding: 28px; width: min(440px, 90vw); color: #243344; box-shadow: var(--shadow); max-height: calc(100vh - 50px); overflow: auto; }
dialog::backdrop { background: #172b2640; }
dialog p { font-size: 13px; line-height: 1.7; color: #718077; margin-bottom: 24px; }
dialog > div { display: flex; justify-content: flex-end; gap: 8px; }
.background-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.background-choices button { flex-direction: column; padding: 10px; border: 1px solid var(--line); gap: 8px; }
.background-choices button[aria-pressed=true] { border-color: var(--green); }
.paper-preview { display: block; height: 52px; width: 100%; border-radius: 5px; background-color: #fcfcfa; }
.paper-preview.dots { background-image: radial-gradient(#c1d1c8 1px, transparent 1px); background-size: 12px 12px; }
.paper-preview.grid { background-image: linear-gradient(to right, #c1d1c8 1px, transparent 1px), linear-gradient(to bottom, #c1d1c8 1px, transparent 1px); background-size: 12px 12px; }
.paper-preview.lines { background-image: linear-gradient(to bottom, #c1d1c8 1px, transparent 1px); background-size: 12px 12px; }
[hidden] { display: none !important; }
@media(max-width:1100px) { .dock-label { display: none; } #bottom-dock { gap: 2px; } }
@media(max-width:700px) {
  #bottom-dock { height: 60px; bottom: max(8px, env(safe-area-inset-bottom)); max-width: calc(100% - 16px); padding: 6px; gap: 0; }
  #bottom-dock .brand, #bottom-dock .small-divider, #bottom-dock .menu-arrow { display: none; }
  #bottom-dock > button { padding: 0; min-width: 46px; width: 46px; }
  .panel { width: min(320px, calc(100vw - 16px)); padding: 15px; max-height: calc(100vh - 100px); }
  h1 { font-size: 24px; } #empty-hint { top: 40%; }
  #compare-labels small { display: none; }
}
.app-workspace { position: absolute; z-index: 5; inset: 16px 16px calc(var(--dock-height) + 32px); background: #fcfcfa; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 50px #203b3015; display: flex; flex-direction: column; overflow: hidden; }
.app-content { flex: 1; min-height: 0; overflow: auto; }
.app-footer { min-height: 60px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 6px 18px; flex-shrink: 0; font-size: 13px; }
.app-footer strong { white-space: nowrap; }.app-footer > span { color: #829087; font-size: 11px; }.app-footer a { color: var(--green); }
#app-close { margin-left: auto; }
#timer-app { display: flex; flex-direction: column; padding: 20px; }
.timer-face { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
#timer-caption { font-size: clamp(14px,2vw,30px); color: #829087; }
#timer-display { font-size: clamp(64px,min(18vw,35vh),300px); line-height: 1.1; letter-spacing: -.05em; font-weight: 550; font-variant-numeric: tabular-nums; }
#timer-status { font-size: clamp(14px,2vw,28px); }.time-low #timer-display { color: #b56a35; }.time-ended #timer-display,.time-ended #timer-status { color: #b3504a; }
.timer-controls,.timer-presets { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.timer-controls label { font-size: 11px; color: #718077; }.timer-controls input { display: block; margin-top: 5px; padding: 10px; min-height: 46px; width: 85px; border: 1px solid var(--line); border-radius: 8px; }
.timer-presets button { color: var(--green); background: #edf3ed; }
.timer-running { position: relative; }.timer-running:after { content: ''; width: 6px; height: 6px; background: #d88b42; border-radius: 50%; position: absolute; right: 5px; top: 5px; }
#geogebra-frame { width: 100%; height: 100%; border: 0; display: block; }
#calculator-app { display: flex; align-items: flex-start; justify-content: center; padding: 20px; }
.calculator-shell { width: min(100%,600px); }.calculator-input-label { color: #718077; font-size: 12px; }
#calculator-input { display: block; width: 100%; min-height: 55px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: clamp(20px,3vw,34px); text-align: right; }
#calculator-result { display: block; min-height: 52px; padding: 10px; text-align: right; font-size: clamp(22px,4vw,38px); overflow-wrap: anywhere; color: var(--green); }
#calculator-result.error { color: #b3504a; font-size: 16px; }
#calculator-angle { display: flex; gap: 8px; margin: 5px 0; }
#calculator-functions { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; margin: 10px 0; }
#calculator-functions button { padding: 5px; background: #edf3ed; color: var(--green); min-width: 0; }
#calculator-keys { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
#calculator-keys button { min-height: 50px; background: #f0f2ef; font-size: 20px; }#calculator-keys .equals { grid-column: span 2; background: var(--green); }
@media(max-width:700px) {
  .app-workspace { inset: 8px 8px calc(var(--dock-height) + 22px); border-radius: 14px; }
  .app-footer { padding: 5px 10px; gap: 6px; }.app-footer > span { display: none; }.app-footer strong { white-space: normal; font-size: 12px; }
  #timer-app { padding: 10px; }.timer-controls { gap: 5px; }.timer-controls button { font-size: 12px; padding: 0 8px; }
  .timer-controls input { width: 72px; }.timer-presets button { min-width: 42px; padding: 0 8px; }
  #calculator-app { padding: 10px; } #calculator-functions { grid-template-columns: repeat(4,1fr); }
}
/* The timer and calculator float independently, without an input-blocking backdrop. */
.floating-app { position: absolute; z-index: 8; width: 380px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--dock-height) - 40px); background: #fff; border: 1px solid #dfe6df; border-radius: 16px; box-shadow: 0 12px 45px #203b3024,0 2px 6px #203b3010; display: flex; flex-direction: column; overflow: hidden; }
.window-bar { display: flex; min-height: 48px; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 8px 2px 16px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: grab; touch-action: none; user-select: none; }
.window-bar:active,.timer-face:active { cursor: grabbing; }.window-bar button { min-height: 42px; }
.calculator-window.scientific { width: 520px; }
.floating-app #calculator-app { padding: 12px; display: block; }
.floating-app .calculator-shell { width: 100%; }
.floating-app #calculator-input { font-size: 24px; min-height: 48px; }
.floating-app #calculator-result { font-size: 28px; min-height: 48px; }
.floating-app #calculator-result.error { font-size: 14px; }
.floating-app #calculator-keys button { min-height: 46px; }
.timer-window { width: 460px; }
.timer-window #timer-app { padding: 14px; gap: 6px; }
.timer-window .timer-face { flex: none; min-height: 160px; gap: 8px; touch-action: none; cursor: grab; user-select: none; }
.timer-window #timer-display { font-size: 125px; }
.timer-window #timer-caption,.timer-window #timer-status { font-size: 14px; }
.timer-window .timer-controls,.timer-window .timer-presets { gap: 5px; }
.timer-window .timer-controls button { padding: 0 9px; font-size: 12px; }
.timer-window .timer-controls input { width: 70px; }
.timer-window .timer-presets button { min-width: 52px; padding: 0 8px; }
.timer-window.is-running .window-bar,.timer-window.is-running .timer-controls,.timer-window.is-running .timer-presets,.timer-window.is-running #timer-caption { display: none; }
.timer-window.is-running .timer-face { min-height: 170px; }
.timer-options { display: flex; justify-content: center; gap: 5px; padding: 0 8px 12px; flex-shrink: 0; }
.timer-options button { padding: 0 9px; font-size: 12px; }
@media(max-width:600px) { .floating-app #calculator-functions { grid-template-columns: repeat(4,1fr); } .timer-window .timer-face { min-height: 130px; } }
/* Compact scientific layout: function bank beside the number keys, not above them. */
.calculator-window.scientific { width: 420px; }
.calculator-window.scientific .calculator-shell { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5px 7px; }
.calculator-window.scientific .calculator-input-label { display: none; }
.calculator-window.scientific #calculator-input,.calculator-window.scientific #calculator-result,.calculator-window.scientific #calculator-angle { grid-column: 1 / -1; }
.calculator-window.scientific #calculator-input { min-height: 40px; height: 40px; padding: 6px 10px; font-size: 21px; }
.calculator-window.scientific #calculator-result { min-height: 36px; padding: 2px 8px; font-size: 24px; }
.calculator-window.scientific #calculator-angle { margin: 0; }
.calculator-window.scientific #calculator-angle button { min-height: 38px; font-size: 11px; }
.calculator-window.scientific #calculator-functions { grid-template-columns: repeat(2,1fr); gap: 4px; margin: 0; grid-column: 1; grid-row: 4; }
.calculator-window.scientific #calculator-functions button { min-height: 34px; font-size: 12px; padding: 1px; }
.calculator-window.scientific #calculator-keys { grid-column: 2; grid-row: 4; gap: 4px; }
.calculator-window.scientific #calculator-keys button { min-width: 0; min-height: 42px; font-size: 17px; padding: 2px; }
.calculator-window.scientific .note { display: none; }
.timer-label-field { display: block; font-size: 11px; color: #718077; }
.timer-label-field input { width: 100%; min-height: 42px; padding: 8px; margin-top: 5px; border: 1px solid var(--line); border-radius: 8px; }
.timer-window.is-running .timer-label-field { display: none; }
.timer-window.is-running #timer-caption { display: block; }
#timer-caption { max-width: 100%; overflow-wrap: anywhere; }
#selection-actions { position: absolute; z-index: 10; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-height) + 27px); background: white; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 4px 8px; border-radius: 12px; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 16px); }
#selection-actions > span { font-size: 11px; color: #718077; padding: 0 8px; }
.image-dialog { width: min(900px,95vw); max-height: calc(100vh - 24px); bottom: 12px; padding: 18px; }
.image-dialog .crop-stage { display: flex; justify-content: center; align-items: center; width: 100%; height: min(55vh,450px); background: #edf1ed; border-radius: 8px; overflow: hidden; }
#crop-canvas { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.image-dialog .crop-actions { display: flex; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.app-footer { flex-wrap: wrap; }
@media(max-width:600px) { #selection-actions > span { display: none; }.calculator-window.scientific { width: 360px; }.calculator-window.scientific #calculator-functions button { min-height: 34px; } }
.custom-color-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; min-height: 46px; margin-top: 8px; }
#custom-color { width: 64px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: transparent; padding: 3px; cursor: pointer; }
.calculator-window.scientific .window-bar { min-height: 42px; }
.floating-app.calculator-window.scientific #calculator-app { padding: 8px; }
.calculator-window.scientific #calculator-input { min-height: 36px; height: 36px; }
.calculator-window.scientific #calculator-result { min-height: 30px; font-size: 23px; }
.calculator-window.scientific #calculator-angle button { min-height: 34px; }
.calculator-window.scientific #calculator-functions button { min-height: 30px; }
.calculator-window.scientific #calculator-keys button { min-height: 38px; }

.text-dialog { width: min(850px,95vw); max-height: calc(100dvh - 24px); overflow: auto; }
.text-dialog .text-format { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
.text-format select,.text-format input { min-height: 40px; max-width: 150px; }
#text-editor { display: block; min-height: 160px; max-height: 40vh; overflow: auto; white-space: pre; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font: 32px sans-serif; background: #fff; color: #243344; }
#text-error { color: #b52437; }

/* Teaching tools and structured mathematics. */
#pen-favorites { display:flex; flex-shrink:0; gap:2px; }
#pen-favorites button { min-width:40px; padding:0 9px; }
#pen-favorites .favorite-ink { width:22px; border-radius:5px; border:1px solid #0002; }
#favorite-save { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:12px; }
#favorite-save button { font-size:11px; padding:0 7px; min-height:40px; }
#selection-actions { overflow-x:auto; white-space:nowrap; }
.math-dialog { width:min(900px,95vw); bottom:12px; max-height:calc(100dvh - 24px); }
#math-fields { display:block; }
.math-fields { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; margin:12px 0; }
.math-fields label { display:flex; flex-direction:column; gap:7px; font-size:12px; flex:1 0 120px; max-width:240px; }
.math-fields input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:8px; padding:8px; }
.math-fields input[type=checkbox] { width:24px; height:24px; min-height:24px; accent-color:var(--green); }
.table-sizes details { margin:14px 0; border:1px solid var(--line); border-radius:8px; padding:10px; }
.table-sizes summary { cursor:pointer; padding:8px; font-size:13px; }
.table-cells-wrap { overflow:auto; max-height:35vh; }
.table-editor { border-collapse:collapse; }
.table-editor th { font-size:11px; padding:6px; color:#718077; white-space:nowrap; }
.table-editor td { padding:3px; }
.table-editor textarea { font:16px sans-serif; width:150px; min-height:64px; padding:8px; border:1px solid var(--line); border-radius:5px; resize:vertical; }
#math-error { color:#b52437; }
textarea:focus-visible { outline:3px solid #65b8a8; outline-offset:2px; }

@media(max-width:1450px) { #bottom-dock .dock-label { display:none; } }
#toast { bottom:calc(var(--dock-height) + 90px); }
.math-dialog[open] { display:flex; flex-direction:column; }
.math-dialog > h2,.math-dialog > div:last-child { flex-shrink:0; }
#math-fields { flex:1 1 auto; min-height:0; overflow:auto; padding:0 3px; }
.math-dialog > div:last-child { padding-top:12px; background:#fff; }
#math-error { margin:8px 0 0; flex-shrink:0; }

#table-quick-actions { display:flex; flex-shrink:0; gap:2px; align-items:center; }
#table-quick-actions button { padding:0 10px; }

/* Core tools remain visible while the rest of the single-row dock scrolls. */
#quick-tools { display:flex; flex-shrink:0; position:sticky; left:0; z-index:2; gap:2px; background:#fff; border-radius:10px; box-shadow:6px 0 0 #fff; }
#quick-tools button { width:46px; min-width:46px; padding:0; }
#page-navigation { display:flex; flex-shrink:0; align-items:center; gap:0; border:1px solid var(--line); border-radius:10px; }
#page-navigation button { min-width:36px; min-height:42px; padding:0 4px; }
#page-navigation #pages-toggle { min-width:52px; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }

#selection-actions[data-multiple=true] #selection-hint { display:inline; white-space:nowrap; }

.pdf-dialog { width:min(780px,95vw); bottom:12px; max-height:calc(100dvh - 24px); }
.pdf-dialog[open] { display:flex; flex-direction:column; }
.pdf-dialog h2,.pdf-dialog > p,.pdf-dialog > label,.pdf-actions,#pdf-password-row { flex-shrink:0; }
#pdf-name { margin:0 0 6px; overflow-wrap:anywhere; font-weight:600; }
#pdf-status { margin:0 0 10px; }
.pdf-dialog .pdf-preview-stage { display:flex; justify-content:center; background:#edf1ed; padding:8px; border-radius:8px; flex:1 1 auto; min-height:0; overflow:hidden; }
#pdf-preview { position:static; width:auto; height:auto; max-width:100%; max-height:38vh; object-fit:contain; }
.pdf-dialog > .field { margin:12px 0 0; }
.pdf-dialog .note { margin:8px 0 0; }
#pdf-error { color:#b52437; margin:8px 0; }
#pdf-password-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
#pdf-password { min-height:46px; min-width:0; border:1px solid var(--line); border-radius:8px; padding:8px; flex:1; }
@media(max-height:600px) { #pdf-preview { max-height:18vh; }.pdf-dialog .note { display:none; } }