/* Virtual Lab — Physics apparatus room, Chemistry store, reaction bench, drawer (uses khl-theme tokens) */
.room-body{padding:20px 24px 26px}
.room-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lab-search,.lab-select{flex:1;min-width:220px;padding:10px 14px;border-radius:10px;border:1px solid var(--color-border-strong,var(--color-border));background:var(--color-surface);color:var(--color-text);font:inherit;font-size:.88rem}
.lab-select{width:100%;min-width:0}
.lab-search:focus,.lab-select:focus{outline:2px solid var(--color-focus,var(--color-primary));outline-offset:1px}
.room-count{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono)}
.lab-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.lab-chip{padding:5px 12px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-raise-1);color:var(--color-text-secondary);font:inherit;font-size:.76rem;font-weight:600;cursor:pointer}
.lab-chip:hover{border-color:var(--color-primary);color:var(--color-text)}
.lab-chip.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.lab-empty{padding:30px;text-align:center;color:var(--color-text-muted);grid-column:1/-1}

/* Physics instrument cards */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-raise-1);color:var(--color-text);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.tool-card:hover,.tool-card:focus-visible{transform:translateY(-2px);border-color:var(--color-primary);box-shadow:0 6px 18px color-mix(in srgb,var(--color-shadow,#000) 12%,transparent)}
.tool-icon{font-size:1.7rem;line-height:1}
.tool-name{font-weight:700;font-size:.9rem}
.tool-meta{font-size:.76rem;color:var(--color-text-secondary);line-height:1.4}
.tool-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.tool-tags span{font-size:.64rem;padding:2px 7px;border-radius:6px;background:var(--color-raise-2);color:var(--color-text-muted);font-weight:600}
.tool-practice{font-size:.68rem;font-weight:700;color:var(--color-warning)}

/* Reading trainer */
.trainer{margin-top:24px;border:1px solid var(--color-border);border-radius:14px;padding:16px 18px;background:var(--color-raise-1)}
.trainer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.trainer-kicker{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-warning)}
.trainer-title{font-weight:700;color:var(--color-text);margin-top:2px}
.trainer-switch{display:flex;gap:6px}
.trainer-switch button{padding:6px 12px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.trainer-switch button.on{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}
.tr-svg{width:100%;height:auto;max-height:230px;display:block;background:var(--color-surface);border-radius:10px;border:1px solid var(--color-border)}
.tr-metal{fill:#d9dee4;stroke:#8a939c}
.tr-slider{fill:#c3cad2;stroke:#6d7781}
.tr-tick{stroke:#1b2733;stroke-width:1.3}
.tr-tick.v{stroke:#0b3d91}
.tr-num{font:600 12px var(--font-mono,monospace);fill:#1b2733;text-anchor:middle}
.tr-num.v{fill:#0b3d91}
.tr-unit,.tr-cap{font:500 11px var(--font-sans,sans-serif);fill:#47525d}
.trainer-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:.85rem;color:var(--color-text)}
.trainer-form input{width:110px;padding:8px 10px;border-radius:8px;border:1px solid var(--color-border-strong,var(--color-border));background:var(--color-surface);color:var(--color-text);font:600 .95rem var(--font-mono,monospace)}
#trainer-feedback{margin-top:10px;font-size:.84rem;color:var(--color-text-secondary);line-height:1.6}
#trainer-feedback .good{color:var(--color-success);font-weight:700}
#trainer-feedback .bad{color:var(--color-error);font-weight:700}
.tr-score{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted);margin-top:4px}

/* Chemistry store */
.store-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--color-border);padding-bottom:10px}
.store-tab{padding:8px 14px;border-radius:9px;border:1px solid transparent;background:none;color:var(--color-text-secondary);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.store-tab:hover{background:var(--color-raise-1)}
.store-tab.on{background:var(--color-raise-2);color:var(--color-text);border-color:var(--color-border)}
.chem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.chem-card{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-raise-1);color:var(--color-text);font:inherit;cursor:pointer}
.chem-card:hover,.chem-card:focus-visible{border-color:var(--color-primary)}
.cc-bottle{flex:0 0 30px;height:44px;border-radius:5px 5px 8px 8px;border:2px solid var(--color-border-strong,var(--color-border));background:linear-gradient(to top,var(--liq) 62%,transparent 62%);position:relative;margin-top:4px}
.cc-bottle::before{content:'';position:absolute;top:-8px;left:7px;right:7px;height:7px;border-radius:2px;background:var(--color-text-muted)}
.cc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc-f{font:700 .95rem var(--font-mono,monospace);color:var(--color-emphasis,var(--color-text))}
.cc-name{font-weight:600;font-size:.82rem}
.cc-look{font-size:.72rem;color:var(--color-text-muted)}
.cc-hz{font-size:.85rem;letter-spacing:2px}
.hz-key{margin-top:14px;font-size:.74rem;color:var(--color-text-muted)}
.hz{display:inline-block;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:6px;margin:0 4px 4px 0;background:var(--color-raise-2);color:var(--color-text)}
.hz-corrosive,.hz-toxic{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.hz-flammable,.hz-oxidising{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--color-warning)}
.hz-low{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.app-card{display:flex;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-raise-1)}
.app-icon{font-size:1.5rem}
.app-name{font-weight:700;font-size:.88rem;color:var(--color-text)}
.app-use{font-size:.78rem;color:var(--color-text-secondary);margin-top:2px;line-height:1.5}
.app-note{font-size:.72rem;color:var(--color-text-muted);margin-top:4px;line-height:1.5}
.store-h{font-size:.95rem;margin:18px 0 8px;color:var(--color-text)}
.store-h:first-child{margin-top:0}
.table-scroll{overflow-x:auto;border:1px solid var(--color-border);border-radius:10px}
.qa-table{width:100%;border-collapse:collapse;font-size:.8rem;color:var(--color-text);min-width:640px}
.qa-table th{background:var(--color-raise-2);text-align:left;padding:8px 10px;font-size:.74rem}
.qa-table td{padding:8px 10px;border-top:1px solid var(--color-border);vertical-align:top;line-height:1.5}
.qa-table small{color:var(--color-text-muted)}
.ind-label{display:block;font-size:.8rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:6px}
.ind-row{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 10px}
.ind-tube{width:120px;text-align:center}
.ind-liq{height:90px;width:44px;margin:0 auto 8px;border:2px solid var(--color-border-strong,var(--color-border));border-top:none;border-radius:0 0 22px 22px;transition:background .5s}
.ind-name{font-weight:700;font-size:.8rem;color:var(--color-text)}
.ind-col{font-size:.76rem;color:var(--color-text-secondary)}
.ind-note{font-weight:600;color:var(--color-text);margin-bottom:14px}
.ind-scale{display:grid;grid-template-columns:repeat(14,1fr);border-radius:8px;overflow:hidden}
.ind-scale span{color:#fff;font:700 .72rem var(--font-mono,monospace);text-align:center;padding:6px 0;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ind-scale-cap{display:flex;justify-content:space-between;font-size:.7rem;color:var(--color-text-muted);margin-top:4px}

/* Reaction bench */
.rx-pickers{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin-bottom:8px}
.rx-pickers label{display:block;font-size:.72rem;font-weight:700;color:var(--color-text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.rx-swap{height:40px}
.rx-partners{font-size:.76rem;color:var(--color-text-muted);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.rx-partners .lab-chip{padding:3px 9px;font-family:var(--font-mono);font-size:.72rem}
.bench-op{font-size:2rem;padding-bottom:30px;color:var(--color-text-muted)}
.beaker-body.is-solid .beaker-liquid{border-radius:40% 40% 9px 9px}
.beaker-body.is-heat{border-color:transparent;background:radial-gradient(circle at 50% 100%,#ff9a3c 0,#ff6a00 30%,transparent 62%)}
.beaker-body.is-gas{background:repeating-radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--color-text-muted) 18%,transparent) 0 2px,transparent 2px 10px)}
.ppt-layer{position:absolute;left:0;right:0;bottom:0;height:22%;border-radius:0 0 9px 9px;opacity:.95;box-shadow:inset 0 3px 6px rgba(0,0,0,.12)}
.bubble{position:absolute;bottom:4px;width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.15);animation:labBubble 1.8s ease-in infinite;opacity:0}
@keyframes labBubble{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-80px);opacity:0}}
.reaction-eq{line-height:1.6}
.rx-ionic{font-size:.76rem;color:var(--color-text-muted);margin-top:4px}
.reaction-obs ul{margin:4px 0 10px 18px;line-height:1.6}
.reaction-obs b{color:var(--color-text)}
.rx-cond{font-size:.78rem;color:var(--color-warning);margin-bottom:6px;font-weight:600}
.rx-note{color:var(--color-text-muted)}
.rx-test{font-size:.78rem;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--color-success) 10%,transparent);color:var(--color-text);margin-top:4px}
.rx-safe{font-size:.78rem;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--color-error) 10%,transparent);color:var(--color-error);margin-top:6px;font-weight:600}

/* Detail drawer */
.lab-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:9990}
.lab-drawer-bg.open{opacity:1;pointer-events:auto}
.lab-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--color-surface);color:var(--color-text);border-left:1px solid var(--color-border);box-shadow:-10px 0 40px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .3s ease;z-index:9991;display:flex;flex-direction:column;outline:none}
.lab-drawer.open{transform:none}
.lab-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--color-border)}
.lab-drawer-head h3{margin:0;font-size:1.1rem}
.lab-drawer-x{border:none;background:var(--color-raise-2);color:var(--color-text);width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer}
.lab-drawer-body{padding:18px 22px 40px;overflow-y:auto;font-size:.86rem;line-height:1.65;color:var(--color-text-secondary)}
.lab-drawer-body h4{color:var(--color-text);margin:18px 0 6px;font-size:.9rem}
.lab-drawer-body ol,.lab-drawer-body ul{padding-left:20px}
.dr-desc{color:var(--color-text);margin-bottom:12px}
.dr-table{width:100%;border-collapse:collapse;font-size:.8rem}
.dr-table th{text-align:left;width:40%;padding:6px 8px;background:var(--color-raise-1);color:var(--color-text);border:1px solid var(--color-border);font-weight:600}
.dr-table td{padding:6px 8px;border:1px solid var(--color-border)}
.dr-example{padding:10px 12px;border-left:4px solid var(--color-primary);background:var(--color-raise-1);border-radius:0 8px 8px 0;font-family:var(--font-mono);font-size:.8rem;color:var(--color-text)}
.dr-safety{margin-top:12px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--color-error) 10%,transparent);color:var(--color-error);font-weight:600}
.dr-fact{margin-top:12px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--color-warning) 10%,transparent);color:var(--color-text)}
.dr-hz{margin-bottom:10px}
.dr-rx{display:flex;flex-wrap:wrap;gap:6px}

@media(max-width:820px){
  .chem-layout{grid-template-columns:1fr!important}
  .chem-main{border-right:none!important;border-bottom:1px solid var(--color-border)}
  .circuit-layout{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .room-body{padding:14px}
  .rx-pickers{grid-template-columns:1fr}
  .rx-swap{justify-self:center}
  .chem-bench{gap:8px!important;padding:16px 8px!important}
  .beaker-body{width:56px!important}
  .ind-tube{width:calc(50% - 10px)}
  .lab-container{padding:0 12px 40px!important}
}
@media(prefers-reduced-motion:reduce){.bubble{animation:none;opacity:.8}.lab-drawer,.lab-drawer-bg{transition:none}}

/* Biology models */
.bio-group{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin:12px 0 6px}
.bio-group:first-child{margin-top:0}
.bio-sub{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:6px}
#bio-labels .bio-label-item{width:100%;display:flex;align-items:flex-start;gap:9px;padding:8px 6px;border:none;border-bottom:1px solid var(--color-border);background:none;color:var(--color-text);font:inherit;font-size:.76rem;line-height:1.45;text-align:left;cursor:pointer;border-radius:6px}
#bio-labels .bio-label-item:hover{background:var(--color-raise-1)}
#bio-labels .bio-label-item.on{background:color-mix(in srgb,var(--color-error) 10%,transparent)}
#bio-labels small{color:var(--color-text-secondary);font-size:.72rem}
.bio-num{flex:0 0 20px;height:20px;border-radius:50%;background:#0369a1;color:#fff;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bio-label-item.on .bio-num{background:#dc2626}
.bio-notes{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--color-border-strong,var(--color-border));background:var(--color-surface);color:var(--color-text);font:inherit;font-size:.8rem;resize:vertical}
.bio-info-panel{max-height:620px}
@media(max-width:900px){.bio-info-panel{max-height:none}}