/* Qinghe Cube — three-tier hydroponics presentation. */
:root{--bg:#f4f6f1;--ink:#243c31;--muted:#788577;--green:#36775c}
.topbar{height:72px}.topbar .brand strong{letter-spacing:1px;font-size:22px}.brand strong>span{letter-spacing:1.7px;font-size:9px;margin-left:10px}.topbar-actions{gap:14px}
main{padding-top:23px}.page-heading{margin-bottom:21px}.page-heading h1{font-size:27px;margin:9px 0;letter-spacing:.4px}.page-heading p{font-size:12px;color:#7c8a79}.eyebrow{color:#81967f}.system-state{padding-top:8px}.system-state>small{color:#8d9c88}
.metrics{padding:17px 0;margin-bottom:20px}.metric p{font-size:11px;color:#7c8977}.metric-aside>small{font-size:9px;color:#8e9c88}.metric-value strong{font-size:28px}.soft-tag{font-size:10px}.workspace{grid-template-columns:minmax(0,1fr) 314px;gap:20px}
.scene-card{height:clamp(400px,calc(100vh - 320px),740px);border-color:#dce5d6;background:#edf2e9}.scene-title{font-size:12px}.scene-subtitle{font-size:10px}.scene-top{padding:20px}.layer-switch button{font-size:11px;padding:7px 10px}.scene-card canvas{cursor:grab}.scene-card canvas:active{cursor:grabbing}
.scene-summary{position:absolute;top:78px;left:23px;display:flex;align-items:center;gap:10px;z-index:2;pointer-events:none}.summary-index{font-size:34px;font-weight:300;line-height:1;color:#91a990;letter-spacing:-2px}.scene-summary strong{font-size:11px;font-weight:500;display:block;color:#607d5b}.scene-summary small{font-size:9px;display:block;margin-top:5px;color:#8c9b85}
.level-focus{position:absolute;z-index:3;left:22px;top:146px;display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #dce6d5;background:#ffffffc9;border-radius:9px;backdrop-filter:blur(5px)}.level-focus>span{font-size:9px;color:#8c9b85;padding:0 7px}.level-focus button{border:0;background:none;font-size:10px;padding:6px 8px;border-radius:5px;color:#889b7e}.level-focus button.active{background:#e7efdf;color:#426f42}.scene-hint{font-size:10px;color:#87997e;bottom:64px}.scene-bottom{left:20px;right:20px;bottom:19px}.view-button{font-size:10px;padding:6px 8px}.data-caption{font-size:9px;background:#ffffffb8}.heat-legend{top:79px;right:20px;width:187px;background:#ffffffef}.heat-legend p{font-size:9px;color:#89977f}.heat-legend>div:first-child{font-size:11px}
.level-panel{background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:19px;padding:20px}.sampling-note{font-size:10px;color:#8e9c86}.level-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px}.level-card{display:block;text-align:left;background:#fbfcf8;border:1px solid #e5ebdc;border-radius:12px;padding:14px 13px;width:100%;min-width:0}.level-card.focused{border-color:#8db17b;background:#f1f7eb;box-shadow:inset 0 0 0 1px #8db17b}.level-card-top{display:flex;align-items:center;gap:7px}.level-number{color:#a5b29a;font-size:12px;font-variant-numeric:tabular-nums}.level-card-top strong{font-size:11px;font-weight:550;white-space:nowrap}.lamp-label{margin-left:auto;font-size:8px;color:#92a18a;padding:4px 5px;border-radius:4px;background:#eef2e7;white-space:nowrap}.lamp-label.on{background:#fcf1d5;color:#ac893d}.level-reading{display:flex;flex-wrap:wrap;gap:6px 13px;margin:15px 0 11px;font-size:8px;color:#95a28a}.level-reading b{font-size:17px;font-weight:500;color:#506e49}.level-reading>span:last-child{white-space:nowrap}.level-card>small{display:block;border-top:1px solid #e9eedf;padding-top:9px;font-size:8px;color:#98a68d}.level-card>small span{float:right}.layer-footnote{margin:13px 0 0;font-size:9px;line-height:1.7;color:#96a18d}
.control-card,.water-card,.events-card{padding:19px}.control-heading h2,.section-caption h2{font-size:13px}.mode-note{font-size:10px;color:#929f86;line-height:1.8}.device-tabs button{font-size:10px;color:#849377;padding:10px 4px}.selected-device{min-height:206px}.device-title-row{margin-bottom:13px}.device-title-row strong{font-size:13px}.device-state-visual strong{font-size:22px}.device-explanation{font-size:10px;min-height:33px;color:#88997b}.device-action-buttons .button{font-size:11px;padding:10px}.command-feedback{font-size:10px;color:#8b9b80}.pump-telemetry{display:flex;gap:10px;margin:-2px 0 14px}.pump-telemetry>span{flex:1;background:#f5f8f0;padding:9px 10px;border-radius:7px;font-size:9px;color:#8d9f80}.pump-telemetry strong{display:block;font-size:14px;color:#607d52;margin-top:5px;font-weight:500}.pump-telemetry small{font-size:8px;color:#8d9f80;font-weight:400}
.tank-row{font-size:10px}.tank-row>span{width:51px}.station-tag{font-size:8px}.water-readings{margin-top:16px;padding-top:14px}.water-readings span{font-size:10px;color:#87997b}.water-readings strong{font-size:22px}.water-readings #sample-ec{font-size:8px;margin-left:2px}.water-status-line{display:flex;justify-content:space-between;font-size:9px;color:#91a080;margin-top:16px}.water-status-line .warning{color:#b77753}.batch-state{padding:10px;margin-top:12px}.batch-state>span{font-size:10px}.water-tools{display:flex;justify-content:space-between;gap:8px;margin-top:13px;font-size:9px;color:#92a082}.water-tools label{display:flex;align-items:center;gap:5px}.water-tools input{accent-color:#36775c;margin:0}.water-disclaimer{font-size:9px;color:#9aa58e;line-height:1.8;margin:13px 0 0}.events-list strong{font-size:10px}.events-list small{font-size:9px}.events-list{margin-top:15px}
.scenario-panel{margin-top:19px}.scenario-button strong{font-size:11px}.scenario-button small{font-size:9px;line-height:1.6;color:#97a28c}.scenario-explanation{font-size:10px;color:#8c9b7f;line-height:1.8}.history-mode .level-panel{display:none}.scene-card:fullscreen{height:100vh}.scene-card:fullscreen .scene-summary{top:96px}.scene-card:fullscreen .level-focus{top:162px}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 340px}.scene-card{height:740px}.level-reading b{font-size:21px}.level-card-top strong{font-size:12px}.level-card>small{font-size:9px}}
@media(max-width:1250px){.workspace{grid-template-columns:minmax(0,1fr) 292px;gap:17px}.topbar{padding:0 24px}.page-heading h1{font-size:24px}.scene-card{height:clamp(400px,calc(100vh - 320px),610px)}.scene-top{padding:18px 16px}.scene-title{font-size:11px}.layer-switch button{font-size:10px;padding:7px 8px}.metric-aside .sparkline{width:48px}.metric-aside>small{font-size:8px}.level-cards{gap:8px}.level-card{padding:12px 10px}.level-reading{gap:7px 10px}.level-reading b{font-size:16px}.level-panel{padding:18px 15px}.sampling-note{font-size:9px}.scene-views{gap:0}.view-button{font-size:9px;padding:6px}.data-caption{font-size:8px}.level-card-top{gap:5px}.lamp-label{font-size:7px;padding:4px}.level-card-top strong{font-size:10px}.scene-summary{top:76px}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr)}.control-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.control-card{grid-row:span 2}.scene-card{height:660px}.metrics{gap:20px 0}.page-heading h1{font-size:25px}.level-card-top strong{font-size:12px}.level-reading b{font-size:20px}.level-card>small{font-size:9px}.sampling-note{font-size:10px}.scene-title{font-size:13px}.layer-switch button{font-size:11px}.data-caption{font-size:9px}.view-button{font-size:10px;padding:6px 8px}.level-card{padding:15px}.scene-top{padding:20px}.lamp-label{font-size:8px}}
@media(max-width:650px){.topbar{height:67px;padding:0 12px}.topbar .brand strong{font-size:18px;letter-spacing:0}.brand strong>span{display:none}.topbar-actions{gap:7px}main{padding:21px 13px 0}.page-heading h1{font-size:20px;line-height:1.6;max-width:260px}.page-heading p{font-size:10px;line-height:1.8}.metrics{gap:17px 0;padding:15px 0}.metric p{font-size:9px}.metric-value strong{font-size:23px}.workspace{gap:16px}.scene-card{height:530px}.scene-top{padding:13px;gap:10px}.scene-title{font-size:11px}.layer-switch{order:3}.layer-switch button{font-size:10px;padding:7px 9px}.scene-summary{top:105px;left:15px;gap:8px}.summary-index{font-size:27px}.scene-summary strong{font-size:10px}.scene-summary small{font-size:8px}.level-focus{top:165px;left:14px}.level-focus>span{display:none}.level-focus button{font-size:9px;padding:6px}.scene-hint{bottom:89px;font-size:8px;left:15px;right:auto}.scene-bottom{bottom:12px;left:11px;right:11px;flex-wrap:wrap;gap:7px}.scene-views{width:100%;justify-content:center}.view-button{font-size:9px;padding:7px 8px}.data-caption{font-size:8px;margin-left:auto}.heat-legend{top:104px;right:12px;width:139px;padding:9px}.heat-legend p{font-size:8px}.heat-legend>div:first-child{font-size:9px}.level-panel{padding:15px 12px;margin-top:16px}.level-panel .section-caption{align-items:flex-start}.level-panel .section-caption>div{display:block}.level-panel .section-index{display:block;margin-bottom:7px}.level-panel h2{font-size:11px}.sampling-note{font-size:8px;margin-top:3px;max-width:78px;line-height:1.7;text-align:right}.level-cards{grid-template-columns:1fr;gap:8px;margin-top:13px}.level-card{padding:12px}.level-card-top strong{font-size:12px}.level-reading{margin:12px 0 10px;gap:20px}.level-reading b{font-size:20px}.level-card>small{font-size:9px}.lamp-label{font-size:9px}.layer-footnote{font-size:9px}.control-column{display:flex}.control-card{grid-row:auto}.device-tabs{grid-template-columns:repeat(3,1fr);gap:7px}.device-tabs button{flex-direction:row;font-size:10px;gap:6px;padding:12px 5px}.scenario-button strong{font-size:10px}.scenario-button small{font-size:8px}.scenario-explanation{font-size:9px}.selected-device{min-height:200px}.section-caption h2{font-size:12px}.scene-card:fullscreen .scene-summary{top:115px}.scene-card:fullscreen .level-focus{top:170px}}

@media(min-width:1001px) and (max-height:800px){main{padding-top:18px}.page-heading{margin-bottom:16px}.page-heading h1{font-size:23px;margin:7px 0}.page-heading p{font-size:11px}.metrics{padding:13px 0;margin-bottom:17px}.scene-card{height:calc(100vh - 294px);min-height:380px}.metric-value strong{font-size:25px}.scene-top{padding:15px 18px}.scene-summary{top:68px}.level-focus{top:129px}.scene-hint{bottom:59px}}

.manual-prep{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid #edf1e5}.manual-prep small{font-size:8px;color:#a2ae95}.manual-prep button{font-size:9px}

/* Virtual laboratory: one shared scene and controller state. */
.workspace.lab-mode{grid-template-columns:minmax(0,1fr)}
.lab-mode .visual-column{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);align-items:start;gap:18px}
.lab-mode .scene-card{position:sticky;top:16px;height:650px;min-width:0}
.lab-mode .level-panel,.lab-mode .scenario-panel,.lab-mode .control-column,.lab-mode .history-card{display:none}
.lab-panel{min-width:0}.in-lab .metrics{display:none}.in-lab .page-heading{margin-bottom:22px}
.lab-mode .scene-title{font-size:11px}.lab-mode .scene-subtitle{display:none}.lab-mode .scene-top{flex-wrap:wrap;padding:16px}.lab-mode .layer-switch{order:3;width:100%;justify-content:center}.lab-mode .layer-switch button{flex:1;padding:7px 5px;font-size:10px}.lab-mode .scene-summary{top:111px}.lab-mode .level-focus{top:177px}.lab-mode .scene-bottom{flex-wrap:wrap;gap:7px}.lab-mode .scene-views{width:100%;justify-content:center}.lab-mode .data-caption{margin-left:auto}.lab-mode .heat-legend{top:238px;width:162px}.lab-mode .scene-hint{bottom:92px;font-size:9px}.lab-mode .scene-top .icon-button{margin-left:auto}
@media(max-width:1100px){.lab-mode .visual-column{grid-template-columns:minmax(300px,.75fr) minmax(0,1fr);gap:14px}.lab-mode .scene-card{height:590px}.in-lab .page-heading h1{font-size:22px}}
@media(max-width:860px){.lab-mode .visual-column{display:block}.lab-mode .scene-card{position:relative;top:auto;height:440px;margin-bottom:16px}.lab-mode .scene-summary{top:111px}.lab-mode .level-focus{top:175px}.in-lab .page-heading{margin-bottom:16px}}
@media(max-width:650px){.rail-nav{gap:6px}.nav-item{height:55px}.lab-mode .scene-card{height:440px}.lab-mode .scene-hint{font-size:8px}.in-lab .page-heading h1{font-size:19px}.lab-mode .scene-views{flex-wrap:wrap}.lab-mode .heat-legend{top:235px}}