@import url('../../../assets/workshop-3d.css');
.lab-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr); gap:1.2rem; }
.lab-layout > div { min-width:0; }
.artboard { position:relative; aspect-ratio:1; border:1px solid #cbd5e1; border-radius:14px; overflow:hidden; }
.artboard canvas { height:100%; width:100%; }
#guides { position:absolute; inset:0; cursor:grab; touch-action:none; }
.panel { background:#f0f9ff; padding:1rem; border:1px solid #bae6fd; border-radius:14px; }
.panel label { display:block; font-weight:700; margin:.6rem 0; }
.panel select { width:100%; padding:.6rem; border:1px solid #94a3b8; border-radius:7px; background:white; font:inherit; }
.calculation { overflow-x:auto; margin:1rem 0; padding:.7rem; background:white; border-radius:9px; }
.proportion { display:flex; height:24px; overflow:hidden; border-radius:8px; background:#94a3b8; }
#prepared-bar { background:#0891b2; transition:width .15s; }
#pending-bar { background:#94a3b8; }
.accessible-lot { margin-top:1rem; }
.equipment-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4rem; }
.equipment-grid button { padding:.55rem .1rem; background:#e2e8f0; color:#334155; border:2px solid #64748b; }
.equipment-grid button[aria-pressed=true] { color:white; background:#0891b2; border-color:#075985; }
.mission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.status { min-height:1.7rem; }
@media(max-width:750px) { .lab-layout,.mission-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { #prepared-bar { transition:none; } }
.timeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.5rem; margin:1rem 0; }
.timeline button { font-size:.85rem; line-height:1.3; }
.timer-box { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:.5rem 0 1rem; }
#timer { font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; min-width:5ch; }
.phase { background:#f8fafc; border:1px solid #cbd5e1; border-radius:12px; padding:.9rem; margin:1rem 0; }
.phase-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem; font-size:.92rem; margin-bottom:.6rem; }
.phase-meta span { background:white; border-radius:8px; padding:.5rem; }
.phase-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.phase h4 { margin:.2rem 0; }
.role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.role { background:#ecfeff; border:2px solid #0891b2; border-radius:14px; padding:1rem; }
.role h3 { margin-top:0; }
.dialogue p { margin:.4rem 0; padding:.4rem .7rem; background:#f1f5f9; border-radius:8px; }
@media(max-width:750px) { .phase-cols,.role-grid { grid-template-columns:1fr; } }