:root { --pvac-blue:#149bd7; --pvac-ink:#102131; --pvac-line:#c9dbe6; --pvac-muted:#526c7a; --pvac-green:#157347; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { min-height:100%; }
body { margin:0; color:var(--pvac-ink); background:#edf5f9; font-family:Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.app { min-height:100vh; display:grid; grid-template-rows:auto minmax(0,1fr); }
.topbar { min-height:72px; display:grid; grid-template-columns:minmax(240px,1fr) auto; align-items:center; gap:16px; padding:11px 18px; color:#fff; background:#071018; }
.brand { min-width:0; display:flex; align-items:center; gap:14px; }
.brand-logo { display:inline-flex; border-radius:6px; }
.brand-logo img { width:142px; height:auto; display:block; }
.brand h1 { margin:0; color:#fff; font-size:clamp(1.35rem,2vw,2rem); line-height:1.05; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.icon-button { width:48px; min-width:48px; min-height:48px; display:inline-grid; place-items:center; padding:0; border:2px solid #263d51; border-radius:8px; color:#fff; background:#122436; cursor:pointer; }
.icon-button:hover,.icon-button:focus-visible { border-color:#8fd8f3; color:#06111a; background:var(--pvac-blue); }
.icon { width:24px; height:24px; display:block; pointer-events:none; }
.home-button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:2px solid #263d51; border-radius:8px; color:#fff; background:#122436; font-weight:800; text-decoration:none; }
.home-button:hover,.home-button:focus-visible { border-color:#8fd8f3; color:#06111a; background:var(--pvac-blue); }
.pvac-app { min-height:calc(100vh - 72px); color:var(--pvac-ink); background:#edf5f9; }
.pvac-toolbar { min-height:70px; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 16px; border-bottom:1px solid var(--pvac-line); background:#fff; overflow:visible; }
.toolbar-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pvac-control-strip { justify-content:center; }
.pvac-range-field { display:grid; gap:4px; color:var(--pvac-muted); font-size:.8rem; font-weight:800; }
.pvac-range-field select { width:100%; min-height:48px; padding:8px 11px; border:1px solid #9fb8c8; border-radius:8px; color:var(--pvac-ink); background:#fff; font-size:1rem; font-weight:800; }
.pvac-button,.pvac-toolbar summary { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 15px; border:1px solid #9fb8c8; border-radius:8px; color:var(--pvac-ink); background:#fff; font-weight:800; cursor:pointer; }
.pvac-button:hover,.pvac-button:focus-visible,.pvac-toolbar summary:hover,.pvac-toolbar summary:focus-visible { border-color:#006b99; box-shadow:0 0 0 3px rgba(20,155,215,.18); outline:0; }
.pvac-button.primary { border-color:#087eaf; color:#fff; background:var(--pvac-blue); }
.pvac-button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.pvac-toolbar details { position:relative; }
.pvac-toolbar summary { list-style:none; }
.pvac-toolbar summary::-webkit-details-marker { display:none; }
.menu-panel { position:absolute; z-index:30; top:calc(100% + 8px); left:0; width:min(300px,calc(100vw - 28px)); padding:13px; border:1px solid var(--pvac-line); border-radius:9px; background:#fff; box-shadow:0 14px 32px rgba(7,16,24,.2); }
.menu-panel p { margin:9px 0 0; color:var(--pvac-muted); font-size:.82rem; line-height:1.35; }
.pvac-models-menu { width:min(360px,calc(100vw - 28px)); }
.pvac-models-menu fieldset { margin:0; padding:0; border:0; }
.pvac-checkbox { min-height:48px; display:flex; align-items:center; gap:9px; color:var(--pvac-ink); font-weight:800; }
.pvac-checkbox input { width:22px; height:22px; accent-color:#087eaf; }
.pvac-companion-heading a { color:#006b99; font-weight:800; text-underline-offset:2px; }
.pvac-workspace { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; padding:12px; }
.pvac-prompt { margin:0; padding:11px 16px; border-radius:9px; color:#fff; background:#073047; font-size:clamp(1.08rem,2vw,1.35rem); line-height:1.25; text-align:center; }
.pvac-boards { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.pvac-board { min-width:0; overflow:hidden; border:2px solid transparent; border-radius:20px; background:#fff; box-shadow:0 8px 22px rgba(7,32,48,.07); }
.pvac-board.is-active { border-color:#149bd7; box-shadow:0 0 0 3px rgba(20,155,215,.16),0 8px 22px rgba(7,32,48,.07); }
.pvac-board-header { min-width:0; display:flex; align-items:center; gap:12px; padding:8px 10px; border-bottom:1px solid var(--pvac-line); background:#f5fafc; }
.pvac-board-header h3 { flex:0 0 auto; margin:0; color:#073047; font-size:1.05rem; }
.pvac-board-header h3 span { color:var(--pvac-muted); }
.pvac-board-controls { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:1 1 auto; flex-wrap:wrap; }
.pvac-number-field input { width:154px; min-height:48px; padding:8px 11px; border:1px solid #9fb8c8; border-radius:8px; color:var(--pvac-ink); background:#fff; font-size:1rem; font-weight:900; }
.pvac-model-panel { min-width:0; height:var(--pvac-board-model-height); min-height:var(--pvac-board-model-height); display:grid; overflow:hidden; padding:8px; background:#fff; transition:height .16s ease,min-height .16s ease; }
.pvac-model-host { width:100%; height:100%; min-width:0; min-height:0; display:grid; place-items:stretch; overflow:hidden; }
.pvac-model-host .question-visual { width:100%; height:100%; min-width:0; min-height:0; margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.pvac-model-host .diagram-visual { width:100%; height:100%; min-height:0; max-height:100%; }
.pvac-model-host figcaption,.pvac-companion-host figcaption { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.pvac-model-host .model-number-sentence { margin:8px 0 2px; padding:5px 8px; color:#073047; font-size:clamp(1.8rem,3vw,2.35rem); font-weight:900; line-height:1.15; text-align:center; }
.pvac-companions { min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px; }
.pvac-companion-card { min-width:0; display:grid; grid-template-rows:auto minmax(260px,1fr); overflow:hidden; border:1px solid var(--pvac-line); border-radius:12px; background:#fff; box-shadow:0 8px 22px rgba(7,32,48,.07); }
.pvac-companion-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--pvac-line); background:#f5fafc; }
.pvac-companion-heading h3 { margin:0; color:#073047; font-size:1rem; }
.pvac-companion-heading a { text-align:right; font-size:.86rem; }
.pvac-companion-host { min-width:0; min-height:260px; display:grid; place-items:center; overflow:hidden; padding:8px; }
.pvac-companion-host .question-visual { width:100%; height:100%; min-height:0; display:grid; margin:0; }
.pvac-companion-host .diagram-visual { width:100%; height:100%; max-height:100%; }
.pvac-model-note { max-width:580px; margin:auto; padding:18px; border-radius:9px; color:#526c7a; background:#f3f7f9; font-weight:800; line-height:1.45; text-align:center; }
.pvac-instructions { width:min(760px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; border:0; border-radius:11px; color:var(--pvac-ink); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.pvac-instructions::backdrop { background:rgba(4,19,29,.62); }
.pvac-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 17px; color:#fff; background:#071018; }
.pvac-dialog-header h2 { margin:0; font-size:1.3rem; }
.pvac-dialog-close { min-height:48px; padding:0 14px; border:2px solid #263d51; border-radius:8px; color:#fff; background:#122436; font-weight:800; cursor:pointer; }
.pvac-dialog-body { padding:17px 20px; line-height:1.52; overflow:auto; }
.pvac-dialog-body li { margin-bottom:7px; }
.pvac-print-brand { display:none; }
@media (prefers-reduced-motion:reduce) { .pvac-app * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media (min-width:1100px) and (min-height:650px) {
  html,body { width:100%; height:100%; overflow:hidden; }
  .app { width:100%; height:100vh; min-height:0; overflow:hidden; }
  .pvac-app { min-height:0; height:calc(100vh - 72px); display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
  .pvac-toolbar { min-height:0; }
  .pvac-workspace { min-height:0; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
  .pvac-boards { min-height:0; grid-template-rows:repeat(var(--pvac-board-count,1),minmax(0,1fr)); overflow:hidden; }
  .pvac-app[data-board-count="1"] .pvac-boards { --pvac-board-count:1; }
  .pvac-app[data-board-count="2"] .pvac-boards { --pvac-board-count:2; }
  .pvac-app[data-board-count="3"] .pvac-boards { --pvac-board-count:3; }
  .pvac-board { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); }
  .pvac-model-panel { height:auto!important; min-height:0!important; }
  .pvac-model-host .question-visual,.pvac-model-host .diagram-visual { max-width:100%; max-height:100%; }
  .pvac-app.has-companions .pvac-workspace { grid-template-columns:minmax(0,3fr) minmax(360px,2fr); grid-template-rows:auto minmax(0,1fr); }
  .pvac-app.has-companions .pvac-prompt { grid-column:1 / -1; }
  .pvac-app.has-companions .pvac-boards { grid-column:1; grid-row:2; }
  .pvac-app.has-companions .pvac-companions { grid-column:2; grid-row:2; min-height:0; grid-template-columns:1fr; grid-template-rows:repeat(var(--pvac-companion-count,1),minmax(0,1fr)); overflow:hidden; }
  .pvac-app[data-companion-count="1"] .pvac-companions { --pvac-companion-count:1; }
  .pvac-app[data-companion-count="2"] .pvac-companions { --pvac-companion-count:2; }
  .pvac-app[data-companion-count="3"] .pvac-companions { --pvac-companion-count:3; }
  .pvac-companion-card { min-height:0; grid-template-rows:auto minmax(0,1fr); }
  .pvac-companion-host { min-height:0; height:auto; }
  .pvac-companion-host .question-visual,.pvac-companion-host .diagram-visual { min-height:0; max-width:100%; max-height:100%; }
}
@media (max-width:900px) {
  .app { display:block; }
  .topbar { grid-template-columns:1fr; }
  .top-actions { justify-content:flex-start; flex-wrap:wrap; }
  .pvac-toolbar { align-items:stretch; }
  .pvac-toolbar .toolbar-group { align-items:stretch; justify-content:center; }
  .pvac-board-header { align-items:flex-start; flex-direction:column; }
  .pvac-board-controls { width:100%; justify-content:flex-start; }
  .pvac-companions { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .brand h1 { font-size:1.18rem; }
  .brand-logo img { width:116px; }
  .pvac-control-strip > * { flex:1 1 128px; }
  .pvac-control-strip details summary { width:100%; }
  .pvac-board-controls .pvac-number-field { width:100%; }
  .pvac-number-field input { width:100%; }
  .pvac-board-controls .pvac-button { flex:1 1 92px; padding-inline:9px; }
  .pvac-model-panel { padding:4px; }
  .pvac-model-host .model-number-sentence { font-size:clamp(1.45rem,7vw,1.8rem); }
  .pvac-companion-heading { align-items:flex-start; flex-direction:column; }
  .pvac-companion-heading a { text-align:left; }
}
@media print {
  @page { size:A4 landscape; margin:8mm; }
  html,body { width:100%; height:auto!important; overflow:visible!important; background:#fff!important; }
  .topbar,.pvac-toolbar,.pvac-feedback,.pvac-instructions,.classroom-tools-layer,.annotation-toolbar,.pvac-board-controls { display:none!important; }
  .app,.pvac-app,.pvac-workspace { min-height:0!important; height:auto!important; overflow:visible!important; }
  .pvac-app { display:block; background:#fff; }
  .pvac-workspace { display:grid; gap:2mm; padding:0; }
  .pvac-prompt { padding:2mm; font-size:15pt; }
  .pvac-boards { gap:2mm; }
  .pvac-board { border:1px solid #93a9b7; box-shadow:none; break-inside:avoid; }
  .pvac-board-header { padding:1.5mm 2mm; }
  .pvac-board-header h3 { font-size:10pt; }
  .pvac-model-panel { height:116mm!important; min-height:116mm!important; padding:1.5mm; }
  .pvac-app[data-board-count="2"] .pvac-model-panel { height:56mm!important; min-height:56mm!important; }
  .pvac-app[data-board-count="3"] .pvac-model-panel { height:35mm!important; min-height:35mm!important; }
  .pvac-model-host .model-number-sentence { margin:1mm 0 0; padding:0; font-size:14pt; }
  .pvac-companions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2mm; }
  .pvac-companion-card { min-height:42mm; grid-template-rows:auto 1fr; border:1px solid #93a9b7; box-shadow:none; }
  .pvac-companion-heading { padding:1mm 2mm; }
  .pvac-companion-heading h3 { font-size:9pt; }
  .pvac-companion-heading a { display:none; }
  .pvac-companion-host { min-height:35mm; height:35mm; padding:1mm; }
  .pvac-app.has-companions .pvac-model-panel { height:78mm!important; min-height:78mm!important; }
  .pvac-app.has-companions[data-board-count="2"] .pvac-model-panel { height:36mm!important; min-height:36mm!important; }
  .pvac-app.has-companions[data-board-count="3"] .pvac-model-panel { height:23mm!important; min-height:23mm!important; }
  .pvac-print-brand { position:fixed; left:8mm; right:8mm; bottom:5mm; display:flex!important; justify-content:space-between; align-items:end; border-top:1px solid #c7d7df; padding-top:2mm; color:var(--pvac-muted); font-size:8pt; }
  .pvac-print-brand .print-logo { width:34mm; height:auto; }
}