.top-kpis { gap: 6px; }
.top-kpi { min-width: 118px; }
.scene-card { background: #f1f4ef; }
.overview-card { width: 216px; top: 106px; padding: 14px; }
.quality-head, .process-map-title { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; font-weight:750; }
.quality-head b, .process-map-title b { color:#9aa49e; font-size:9px; letter-spacing:.11em; }
.quality-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin-top:12px; }
.quality-grid span { display:flex; justify-content:space-between; gap:6px; color:#7a867f; font-size:10px; }
.quality-grid strong { color:#27342e; font-size:11px; }
.quality-unit { margin-top:11px; padding-top:9px; border-top:1px solid #e4e9e4; color:#9aa49e; font-size:9px; }
.process-mini-map { position:absolute; z-index:9; top:18px; right:18px; width:min(560px,52%); padding:12px 13px; border:1px solid rgba(205,215,208,.95); border-radius:15px; background:rgba(255,255,255,.84); box-shadow:0 12px 30px rgba(50,66,57,.08); backdrop-filter:blur(16px); }
.process-map-flow { display:flex; align-items:center; gap:4px; margin-top:9px; overflow:hidden; }
.process-map-flow button { flex:0 1 auto; border:0; border-radius:8px; background:#f2f5f1; color:#536159; padding:6px 8px; font-size:10px; white-space:nowrap; cursor:pointer; transition:.2s; }
.process-map-flow button:hover, .process-map-flow button.active { background:#eaff9c; color:#26321e; }
.process-map-flow i { flex:1 1 10px; min-width:5px; height:1px; background:#b8c5bd; position:relative; }
.process-map-flow i::after { content:""; position:absolute; right:-1px; top:-2px; width:4px; height:4px; border-top:1px solid #8c9a92; border-right:1px solid #8c9a92; transform:rotate(45deg); }
.plant-label { padding:6px 8px; font-size:10px; }
.mode-bar { bottom:16px; }
.water-legend { position:absolute; left:20px; bottom:58px; z-index:5; display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid rgba(51,66,58,.10); border-radius:10px; background:rgba(250,252,249,.84); backdrop-filter:blur(9px); box-shadow:0 7px 22px rgba(49,64,56,.07); color:#657169; font-size:9px; pointer-events:none; }
.water-legend span { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.water-legend .water-legend-title { padding-right:2px; color:#34443b; font-weight:700; letter-spacing:.05em; }
.water-legend i { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.water-legend i.raw { background:#4e4b43; }.water-legend i.mixed { background:#8b704e; }.water-legend i.settled { background:#789a96; }.water-legend i.polished { background:#5f9f9a; }.water-legend i.clean { background:#46aab7; }
.mode-btn { padding:8px 11px; }
.pool-scope { margin-top:6px; color:#8a958e; font-size:11px; line-height:1.4; }
.data-quality-line { display:flex; align-items:center; gap:7px; margin-top:8px; color:#8a958e; font-size:10px; }
.data-quality-line::before { content:""; width:6px; height:6px; border-radius:50%; background:#8fbd25; box-shadow:0 0 0 3px rgba(143,189,37,.12); }
.data-quality-line strong { color:#617169; font-weight:680; }
.removal-caption { margin:15px 0 -7px; color:#7c8982; font-size:10px; font-weight:700; letter-spacing:.03em; }
.removal-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0; }
.removal-strip > div { padding:9px 7px; border-radius:11px; background:#f4f7f2; border:1px solid #e3e9e3; text-align:center; }
.removal-strip span { display:block; color:#7e8983; font-size:9px; white-space:nowrap; }
.removal-strip strong { display:block; margin-top:4px; color:#39473f; font-size:13px; }
.alarm-head { margin-top:16px; }
.alarm-list { display:grid; gap:7px; }
.alarm-row { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:9px; padding:10px 11px; border:1px solid #e5e9e6; background:#fafbf9; border-radius:11px; }
.alarm-dot { width:8px; height:8px; border-radius:50%; background:#93c424; }
.alarm-row.warning .alarm-dot { background:#f0ad42; }
.alarm-row.danger .alarm-dot { background:#ef6b5e; }
.alarm-name { font-size:11px; font-weight:650; }
.alarm-copy { margin-top:2px; color:#89938e; font-size:9px; }
.alarm-time { color:#97a19b; font-size:9px; }
.line-water { color:#6fd6cf; }
.line-sludge { color:#9b806c; }
.line-air { color:#8fcbb3; }
.line-chemical { color:#efb35c; }
@media(max-width:1280px){.process-mini-map{width:48%}.process-map-flow button{padding:6px;font-size:9px}.process-map-flow i{display:none}}
@media(max-width:860px){.process-mini-map{top:auto;bottom:64px;left:12px;right:12px;width:auto}.process-map-flow{overflow-x:auto}.process-map-flow button{font-size:10px}.overview-card{display:none}.water-legend{display:none}.removal-strip{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.process-mini-map{display:none}.mode-btn{padding:8px 7px}.mode-bar{max-width:95%;overflow-x:auto}.pool-scope{font-size:10px}}

/* Platform navigation */
.module-nav { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #e1e7e2; border-radius:13px; background:#f4f7f3; }
.module-tab { border:0; border-radius:9px; padding:8px 11px; background:transparent; color:#68746d; font-size:12px; font-weight:650; white-space:nowrap; cursor:pointer; transition:.18s ease; }
.module-tab:hover { color:#2d3b34; background:#fff; }
.module-tab.active { color:#233129; background:#fff; box-shadow:0 3px 12px rgba(39,55,47,.09); }
.nav-badge { display:inline-grid; place-items:center; min-width:17px; height:17px; margin-left:5px; padding:0 4px; border-radius:20px; background:#f1b14e; color:#fff; font-size:10px; }
.view-reset-btn { min-width:102px; height:40px; border:1px solid var(--line); border-radius:12px; background:#fff; color:#46514c; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; font-size:12px; font-weight:650; transition:.2s ease; }
.view-reset-btn:hover { border-color:#aebaB2; transform:translateY(-1px); }
.view-reset-btn.module-hidden { visibility:hidden; }
.scene-tools { position:absolute; z-index:10; right:18px; top:92px; display:flex; gap:5px; padding:4px; border:1px solid rgba(207,216,209,.95); border-radius:12px; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); box-shadow:0 9px 24px rgba(46,60,52,.09); }
.scene-tools button { border:0; border-radius:8px; padding:7px 10px; background:transparent; color:#647169; font-size:11px; cursor:pointer; }
.scene-tools button:hover { color:#26332c; background:#eff4ed; }
.scene-tools button[aria-pressed="true"] { color:#26332c; background:#eff4ed; font-weight:700; }

/* Shared secondary modules */
.module-page { min-height:0; overflow:auto; padding:18px 20px 24px; background:linear-gradient(140deg,#f4f7f3 0%,#ebf0eb 100%); scrollbar-width:thin; }
.workspace[hidden] { display:none; }
.module-page[hidden] { display:none; }
.module-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:16px; }
.module-heading h1 { margin:4px 0 4px; font-size:28px; letter-spacing:-.045em; }
.module-heading p { margin:0; color:#758179; font-size:13px; }
.heading-actions { display:flex; align-items:center; gap:9px; }
.live-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid #dce7d5; border-radius:999px; padding:8px 11px; background:#f5faee; color:#628116; font-size:12px; font-weight:700; }
.live-chip i { width:7px; height:7px; border-radius:50%; background:#90c522; box-shadow:0 0 0 4px rgba(144,197,34,.12); }
.boundary-chip { display:inline-flex; align-items:center; border:1px solid #dce3dd; border-radius:999px; padding:8px 11px; background:#fff; color:#68756d; font-size:11px; font-weight:680; white-space:nowrap; }
.live-chip.warning { color:#9b690f; background:#fff8e9; border-color:#f0dfba; }.live-chip.warning i{background:#eead42;box-shadow:0 0 0 4px rgba(238,173,66,.13)}
.soft-btn { border:1px solid #dce3dd; border-radius:10px; padding:8px 12px; background:#fff; color:#46554d; font-size:12px; font-weight:650; cursor:pointer; }
.soft-btn:hover { border-color:#aebeB4; }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card-heading h2 { margin:3px 0 0; font-size:17px; letter-spacing:-.02em; }
.card-kicker { color:#8a968f; font-size:10px; font-weight:760; letter-spacing:.1em; }
.side-card,.ops-card,.forecast-chart-card,.alert-board { border:1px solid #dfe6e0; border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 12px 34px rgba(47,63,54,.065); }
.side-card { padding:17px; }.side-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.side-card-head>span{font-size:13px;font-weight:760}.side-card-head>b{color:#8a968f;font-size:10px;letter-spacing:.08em}

/* Forecast center */
.forecast-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:14px; }
.forecast-main { min-width:0; display:grid; gap:12px; }
.indicator-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.forecast-metric { min-width:0; text-align:left; border:1px solid #dfe6e0; border-radius:15px; padding:12px 13px; background:rgba(255,255,255,.83); cursor:pointer; transition:.18s ease; }
.forecast-metric:hover { transform:translateY(-1px); border-color:#b6c3ba; }.forecast-metric.active{border-color:#9cc42e;box-shadow:0 0 0 2px rgba(156,196,46,.14);background:#fbfff0}.forecast-metric.warning{background:#fffaf0}.forecast-metric.warning.active{border-color:#e6a83d;box-shadow:0 0 0 2px rgba(230,168,61,.13)}
.forecast-metric>span { display:block; color:#728078; font-size:11px; font-weight:720; }.forecast-metric strong{display:block;margin-top:7px;font-size:21px;letter-spacing:-.035em}.forecast-metric strong small{color:#849087;font-size:10px;font-weight:550}.forecast-metric em{display:block;margin-top:5px;color:#8b968f;font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forecast-chart-card { min-height:420px; padding:18px 19px 13px; }
.horizon-tabs { display:flex; gap:3px; padding:3px; border-radius:10px; background:#f0f3f0; }.horizon-btn{border:0;border-radius:8px;padding:6px 9px;background:transparent;color:#79857d;font-size:11px;cursor:pointer}.horizon-btn.active{background:#fff;color:#26332d;box-shadow:0 2px 7px rgba(42,56,48,.09)}
.forecast-wide-chart { display:block; width:100%; height:330px; margin-top:5px; overflow:visible; }
.wide-chart-legend { display:flex; flex-wrap:wrap; gap:15px; color:#748078; font-size:11px; }.wide-chart-legend span{display:flex;align-items:center;gap:6px}.wide-chart-legend i{width:16px;height:3px;background:#3e5148}.wide-chart-legend i.prediction{background:#98c622}.wide-chart-legend i.confidence{height:9px;background:rgba(152,198,34,.22)}.wide-chart-legend i.threshold{height:1px;background:repeating-linear-gradient(90deg,#ec9b83 0 4px,transparent 4px 7px)}
.forecast-side { display:grid; align-content:start; gap:12px; }.risk-summary{background:linear-gradient(145deg,#f8fce9,#fff)}.risk-summary .side-card-head b{color:#6f9216}.risk-number{display:block;margin-top:13px;font-size:34px;letter-spacing:-.06em}.risk-label{color:#79857e;font-size:11px}.risk-bar{height:7px;margin:12px 0 10px;overflow:hidden;border-radius:10px;background:#e8ede6}.risk-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a8d52c,#d8ff52);transition:width .3s}.risk-summary p,.explanation-card p,.action-card p,.alert-insight p,.validation-card p{margin:10px 0 0;color:#6f7c74;font-size:12px;line-height:1.55}
.factor-list { display:grid; gap:12px; margin-top:15px; }.factor-row{display:grid;grid-template-columns:1fr 52px;gap:10px;align-items:center}.factor-name{font-size:11px;color:#5c6962}.factor-value{text-align:right;font-size:11px;font-weight:720}.factor-track{grid-column:1/-1;height:5px;margin-top:-5px;border-radius:8px;background:#edf1ec;overflow:hidden}.factor-track i{display:block;height:100%;border-radius:inherit;background:#9bbd42}.factor-row.negative .factor-track i{background:#7ebdb5}
.action-card h3,.alert-insight h3 { margin:13px 0 0; font-size:15px; }.action-meta{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #e9ede9;color:#8a958f;font-size:10px}

/* Alert loop */
.summary-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:13px; }.summary-strip>div{padding:14px 15px;border:1px solid #dfe6e0;border-radius:15px;background:rgba(255,255,255,.87)}.summary-strip span{display:block;color:#77837b;font-size:11px}.summary-strip strong{display:inline-block;margin-top:6px;font-size:24px;letter-spacing:-.04em}.summary-strip em{margin-left:8px;color:#88948c;font-size:10px;font-style:normal}
.alert-workspace { display:grid; grid-template-columns:minmax(0,1fr) 315px; gap:13px; }.alert-board{padding:18px}.alert-table{display:grid;gap:8px;margin-top:14px}.alert-ticket{display:grid;grid-template-columns:34px minmax(220px,1.4fr) minmax(140px,.8fr) minmax(120px,.7fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid #e4e9e5;border-radius:14px;background:#fbfcfa}.alert-ticket.resolved{opacity:.58;background:#f3f5f2}.alert-severity{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#fff0ed;color:#c65f50;font-size:11px;font-weight:800}.alert-ticket.warning .alert-severity{background:#fff5df;color:#a76d10}.alert-ticket.notice .alert-severity{background:#edf7e0;color:#67861b}.alert-ticket div>b,.alert-ticket div>strong{display:block;font-size:12px}.alert-ticket div>span{display:block;margin-top:4px;color:#839088;font-size:10px}.ticket-actions{display:flex;gap:5px}.ticket-actions button{border:1px solid #dae2dc;border-radius:8px;padding:7px 8px;background:#fff;color:#59665f;font-size:10px;cursor:pointer}.ticket-actions button:first-child{border-color:#cfe09b;background:#f6fce5;color:#617d16}.ticket-actions button:hover{transform:translateY(-1px)}
.closed-state { color:#66851a!important; font-size:10px!important; font-weight:720; }
.workorder-link{border-color:#cfe09b!important;background:#f6fce5!important;color:#617d16!important;font-weight:720}.workorder-link:focus-visible{outline:2px solid #91b525;outline-offset:2px}
.alert-insight{display:grid;align-content:start;gap:12px}.cause-chain{display:flex;align-items:center;gap:5px;margin-top:15px}.cause-chain span{padding:6px 7px;border-radius:8px;background:#f0f4ef;color:#5b6861;font-size:10px}.cause-chain i{flex:1;height:1px;background:#b9c6bd;position:relative}.cause-chain i:after{content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-top:1px solid #87948c;border-right:1px solid #87948c;transform:rotate(45deg)}
.workorder-hint{margin:8px 0 0;color:#869189;font-size:10px}.workorder-list{display:grid;gap:8px;margin-top:10px}.workorder-list>div{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:10px;border-radius:11px;background:#f6f8f5;outline:0;transition:background .2s,box-shadow .2s}.workorder-list>div.is-focused{background:#f4fadf;box-shadow:0 0 0 3px rgba(145,181,37,.2)}.workorder-list i{width:8px;height:8px;border-radius:50%;background:#8ba923}.workorder-list i.doing{background:#e3a23a}.workorder-list p{margin:0}.workorder-list p b{display:block;font-size:11px}.workorder-list p span{display:block;margin-top:3px;color:#869189;font-size:9px}.workorder-list em{color:#77837c;font-size:9px;font-style:normal}

/* Data and model operations */
.data-source-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:13px; }.data-source-grid article{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;padding:13px;border:1px solid #dfe6e0;border-radius:15px;background:rgba(255,255,255,.88)}.source-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eaf4d0;color:#587218;font-weight:800}.data-source-grid span,.data-source-grid strong,.data-source-grid em{display:block}.data-source-grid span{font-size:11px;color:#748078}.data-source-grid strong{margin-top:2px;font-size:12px}.data-source-grid em{margin-top:2px;color:#929c96;font-size:9px;font-style:normal}.data-source-grid article>b{color:#6d9018;font-size:10px}.data-source-grid article>b.attention,.sensor-table b.attention{color:#aa7115}
.data-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:13px; }.data-column,.model-column{display:grid;align-content:start;gap:12px}.ops-card{padding:18px}.quality-score{padding:7px 9px;border-radius:9px;background:#f2f8df;color:#668519;font-size:11px;font-weight:730}.quality-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.quality-metrics>div{padding:11px;border-radius:12px;background:#f6f8f5}.quality-metrics span{color:#7b877f;font-size:10px}.quality-metrics strong{display:block;margin:4px 0 8px;font-size:18px}.quality-metrics i,.model-health i,.validation-card i{display:block;height:5px;overflow:hidden;border-radius:7px;background:#e3e9e3}.quality-metrics i b,.model-health i b,.validation-card i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8eaf36,#c8ea55)}
.sensor-table{margin-top:14px;border:1px solid #e4e9e5;border-radius:12px;overflow:hidden}.sensor-table>div{display:grid;grid-template-columns:1.25fr .8fr .55fr .55fr;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid #ebefeb;font-size:11px}.sensor-table>div:first-child{border-top:0}.sensor-table .sensor-head{background:#f4f7f3;color:#7c8880;font-size:9px;font-weight:700}.sensor-table b{color:#68891a;font-size:10px}
.feature-groups{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.feature-groups>div{padding:11px;border-radius:11px;background:#f6f8f5}.feature-groups span{font-size:10px;font-weight:720}.feature-groups p{margin:4px 0 0;color:#7b8780;font-size:10px;line-height:1.45}
.model-title{display:grid;grid-template-columns:43px 1fr auto;gap:11px;align-items:center}.model-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#d8ff52;color:#26321e;font-weight:850}.model-title span{color:#819088;font-size:10px}.model-title h2{margin:3px 0 0;font-size:16px}.model-title>b{padding:6px 8px;border-radius:9px;background:#edf7df;color:#698919;font-size:9px}.model-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}.model-stats>div{padding:11px;border-radius:11px;background:#f5f7f4}.model-stats span{display:block;color:#859087;font-size:9px}.model-stats strong{display:block;margin-top:4px;font-size:16px}.model-health{margin-top:15px;padding-top:14px;border-top:1px solid #e6ebe7}.model-health>span{color:#77837c;font-size:10px}.model-health>strong{float:right;font-size:11px}.model-health i{clear:both;margin-top:8px}.model-health i b{width:94%}.model-health p{margin:8px 0 0;color:#869189;font-size:10px}
.validation-card>div:not(.side-card-head){display:grid;grid-template-columns:44px 1fr 72px;gap:9px;align-items:center;margin-top:13px}.validation-card>div>span{font-size:10px;font-weight:700}.validation-card>div>em{text-align:right;color:#7f8a83;font-size:9px;font-style:normal}

@media(max-width:1500px){.plant-health{display:none}.module-nav{margin-right:auto}}
@media(max-width:1150px){.module-tab{padding:8px 8px}.top-kpis{display:none}.forecast-layout,.alert-workspace{grid-template-columns:1fr}.forecast-side,.alert-insight{grid-template-columns:repeat(3,1fr)}.data-source-grid{grid-template-columns:1fr 1fr}.data-layout{grid-template-columns:1fr}.model-column{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.topbar{gap:9px;backdrop-filter:none}.module-nav{position:fixed;left:8px;right:8px;bottom:8px;z-index:40;justify-content:space-between;box-shadow:0 8px 30px rgba(34,49,41,.18)}.module-tab{flex:1;font-size:10px;padding:9px 4px}.view-reset-btn{width:40px;min-width:40px;padding:0}.view-reset-btn span{display:none}.module-page{padding:14px 10px 78px}.module-heading{align-items:flex-start}.module-heading h1{font-size:23px}.module-heading p{max-width:70vw}.indicator-grid{grid-template-columns:repeat(2,1fr)}.forecast-metric:last-child{grid-column:span 2}.forecast-side,.alert-insight,.model-column{grid-template-columns:1fr}.summary-strip{grid-template-columns:1fr 1fr}.alert-ticket{grid-template-columns:32px 1fr}.alert-ticket>div:nth-child(3),.alert-ticket>div:nth-child(4){display:none}.ticket-actions{grid-column:2}.data-source-grid{grid-template-columns:1fr 1fr}.feature-groups{grid-template-columns:1fr}.scene-tools{top:85px}.scene-hint{display:block;bottom:62px;font-size:10px}.water-legend{display:none}}
@media(max-width:560px){.brand-meta{display:none}.brand-mark{width:34px;height:34px}.module-heading{display:block}.heading-actions{margin-top:10px}.live-chip{font-size:10px}.indicator-grid,.data-source-grid,.quality-metrics,.summary-strip{grid-template-columns:1fr}.forecast-metric:last-child{grid-column:auto}.forecast-wide-chart{height:260px}.scene-tools{top:70px}.data-source-grid article{grid-template-columns:34px 1fr auto}.source-icon{width:34px;height:34px}.sensor-table>div{grid-template-columns:1.3fr .8fr .6fr}.sensor-table>div span:nth-child(3),.sensor-table>div b:nth-child(4){display:none}.alert-ticket{padding:10px}.ticket-actions button{font-size:9px}.module-heading p{max-width:none}.water-legend{display:none}}

/* Entry, identity and multi-plant selection */
[hidden] { display:none!important; }
.entry-screen { position:relative; width:100vw; height:100vh; min-height:680px; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 430px; align-items:center; gap:8vw; padding:76px 8vw; color:#f4fbff; background:#081c2a; }
#login-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.95; }
.entry-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(8,28,42,.08),rgba(8,28,42,.22) 55%,rgba(8,28,42,.72)); }
.entry-brand { position:absolute; z-index:2; top:34px; left:42px; display:flex; align-items:center; gap:12px; }
.entry-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(123,218,255,.34); border-radius:13px; background:rgba(21,70,96,.38); color:#65d9ff; backdrop-filter:blur(12px); }
.entry-mark svg { width:25px; height:25px; }
.entry-brand strong,.entry-brand span { display:block; }
.entry-brand strong { font-size:18px; letter-spacing:.12em; }
.entry-brand span { margin-top:3px; color:#88aebe; font-size:11px; letter-spacing:.12em; }
.entry-story { position:relative; z-index:2; max-width:610px; align-self:end; padding-bottom:6vh; }
.entry-story>span { display:block; margin-bottom:18px; color:#72cde9; font-size:14px; font-weight:700; letter-spacing:.13em; }
.entry-story>strong { display:block; font-size:clamp(42px,4.2vw,72px); line-height:1.08; letter-spacing:-.055em; font-weight:680; }
.entry-story>p { margin:22px 0 0; color:#a8c2cc; font-size:16px; letter-spacing:.03em; }
.login-card { position:relative; z-index:3; width:100%; padding:38px 38px 34px; border:1px solid rgba(150,210,230,.22); border-radius:26px; background:rgba(246,251,252,.96); color:#143044; box-shadow:0 30px 90px rgba(0,12,23,.42); backdrop-filter:blur(24px); }
.entry-kicker { color:#3989aa; font-size:12px; font-weight:800; letter-spacing:.14em; }
.login-card h1 { margin:10px 0 7px; font-size:30px; letter-spacing:-.045em; }
.login-card>p { margin:0 0 28px; color:#70838e; font-size:15px; }
#login-form { display:grid; gap:17px; }
#login-form>label { display:grid; gap:8px; color:#536b78; font-size:14px; font-weight:650; }
#login-form input:not([type="checkbox"]) { width:100%; height:48px; border:1px solid #cfdae0; border-radius:12px; outline:0; padding:0 14px; background:#fff; color:#173244; font-size:16px; transition:border-color .18s,box-shadow .18s; }
#login-form input:not([type="checkbox"]):focus { border-color:#3fa9ce; box-shadow:0 0 0 4px rgba(63,169,206,.13); }
.login-options { display:flex; justify-content:space-between; align-items:center; color:#7e9099; font-size:13px; }
.login-options label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.login-options input { accent-color:#168eb9; }
.login-submit { height:50px; margin-top:2px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:13px; background:#0e7095; color:#fff; font-size:15px; font-weight:760; cursor:pointer; box-shadow:0 12px 28px rgba(14,112,149,.24); transition:transform .18s,background .18s; }
.login-submit:hover { transform:translateY(-1px); background:#0b7da6; }
.login-submit i { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.login-submit.loading i { display:block; }
.login-submit.loading { pointer-events:none; }
.login-safe { display:flex; align-items:center; gap:8px; margin-top:22px; padding-top:20px; border-top:1px solid #dce5e9; color:#84969f; font-size:12px; line-height:1.45; }
.login-safe span { width:8px; height:8px; flex:none; border-radius:50%; background:#45bca0; box-shadow:0 0 0 4px rgba(69,188,160,.12); }
.entry-foot { position:absolute; z-index:2; left:42px; bottom:28px; color:#668b9b; font-size:12px; }

.plant-select-view { height:100vh; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; color:#1c2e29; background:#edf2ef; scrollbar-gutter:stable; }
.select-topbar { height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 42px; border-bottom:1px solid #d7e0da; background:rgba(255,255,255,.88); backdrop-filter:blur(18px); }
.select-brand,.select-account { display:flex; align-items:center; gap:12px; }
.select-drop { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#1e2c27; box-shadow:0 9px 24px rgba(31,44,38,.14); }
.select-drop svg { width:22px; height:22px; display:block; }
.select-brand strong,.select-brand small { display:block; }
.select-brand strong { font-size:16px; }.select-brand small{margin-top:3px;color:#87948d;font-size:10px;letter-spacing:.1em}
.select-account span { color:#68766e; font-size:13px; }.select-account b{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#20362e;color:#d8ff52;font-size:12px}
.select-content { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:56px 0; }
.select-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.select-heading>div>span { color:#839089; font-size:11px; font-weight:800; letter-spacing:.15em; }
.select-heading h1 { margin:8px 0 8px; font-size:34px; letter-spacing:-.05em; }.select-heading p{margin:0;color:#79867f;font-size:15px}
.group-summary { min-width:270px; padding:15px 17px; border:1px solid #d9e2dc; border-radius:15px; background:#f9fbf9; }.group-summary span,.group-summary strong,.group-summary small{display:block}.group-summary span{color:#8a9690;font-size:11px}.group-summary strong{margin-top:5px;font-size:14px}.group-summary small{margin-top:5px;color:#a37321;font-size:12px}
.plant-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.plant-card { position:relative; min-height:230px; overflow:hidden; text-align:left; border:1px solid #d9e2dc; border-radius:21px; padding:23px; background:#fff; color:#20312b; cursor:pointer; box-shadow:0 12px 35px rgba(45,63,53,.055); transition:transform .2s,border-color .2s,box-shadow .2s; }
.plant-card:hover,.plant-card:focus-visible { transform:translateY(-3px); border-color:#a9c167; box-shadow:0 18px 45px rgba(45,63,53,.11); outline:0; }
.plant-card.warning { background:#fffdf8; }
.plant-card-index { position:absolute; right:19px; bottom:-18px; color:#f0f3f0; font-size:82px; font-weight:850; line-height:1; pointer-events:none; }
.plant-card-head { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; }.plant-mark { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#17382e; color:#d8ff52; font-size:19px; line-height:1; font-weight:700; }.plant-card-id { min-width:0; }.plant-card-head small,.plant-card-head strong{display:block}.plant-card-head small{margin-top:4px;color:#87948d;font-size:10px;letter-spacing:.1em}.plant-card-head strong{font-size:20px;letter-spacing:-.025em}.plant-card-spec{color:#87938c;font-size:12px}.plant-state{flex:none;padding:7px 9px;border-radius:999px;background:#edf7de;color:#648416;font-size:11px}.plant-state.attention{background:#fff1d9;color:#9d6911}
.plant-card-stats { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:27px; }.plant-card-stats span{color:#7f8c85;font-size:11px}.plant-card-stats strong{display:block;margin-top:5px;color:#2c3c35;font-size:14px}
.plant-card-foot { position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:26px; padding-top:16px; border-top:1px solid #e6ebe7; color:#7d8a83; font-size:12px; }.plant-card-foot em{color:#618019;font-style:normal;font-weight:760}
.select-note { margin:24px 0 0; color:#8b9790; font-size:12px; text-align:center; }
.plant-switch-button { width:42px; height:40px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; color:#516058; cursor:pointer; }
.plant-switch-button span { width:16px; height:16px; border:1.6px solid currentColor; border-radius:50%; position:relative; }.plant-switch-button span::before,.plant-switch-button span::after{content:"";position:absolute;left:3px;right:3px;height:1px;background:currentColor}.plant-switch-button span::before{top:5px}.plant-switch-button span::after{bottom:5px}.plant-switch-button b{display:none}

/* Lightweight 2D navigation map: no second WebGL scene */
.factory-minimap { position:absolute; z-index:10; left:20px; bottom:18px; width:218px; padding:10px; border:1px solid rgba(197,208,201,.94); border-radius:15px; background:rgba(255,255,255,.88); box-shadow:0 12px 32px rgba(45,59,51,.11); backdrop-filter:blur(15px); }
.minimap-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:#47564e; font-size:10px; font-weight:760; }.minimap-head b{color:#98a49d;font-size:8px;letter-spacing:.12em}
.minimap-map { position:relative; height:110px; overflow:hidden; border-radius:9px; background-color:#edf2ed; background-image:linear-gradient(rgba(112,132,120,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,132,120,.08) 1px,transparent 1px); background-size:14px 14px; box-shadow:inset 0 0 0 1px rgba(71,90,79,.08); }
.minimap-map::before { content:""; position:absolute; left:7%; right:7%; top:48%; height:9px; border-top:2px solid rgba(161,174,166,.6); border-bottom:2px solid rgba(161,174,166,.6); transform:rotate(-4deg); }
.minimap-node { position:absolute; width:10px; height:10px; border:2px solid rgba(255,255,255,.9); border-radius:3px; background:#6e9a91; box-shadow:0 1px 5px rgba(40,61,51,.23); transform:translate(-50%,-50%); cursor:pointer; transition:transform .16s,background .16s,box-shadow .16s; }
.minimap-node:hover { transform:translate(-50%,-50%) scale(1.35); }.minimap-node.warning{background:#e7a43b}.minimap-node.active{z-index:3;background:#a0ca28;transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 0 5px rgba(160,202,40,.2)}
.minimap-view { position:absolute; width:42px; height:30px; border:1px solid rgba(44,84,70,.44); border-radius:7px; background:rgba(216,255,82,.08); transform:translate(-50%,-50%); pointer-events:none; transition:left .15s linear,top .15s linear; }
.water-legend { bottom:177px; }

/* Clear but restrained feedback when a different process unit is selected */
.detail-panel { position:relative; }
.detail-panel::before { content:""; position:sticky; z-index:4; top:0; left:0; display:block; width:3px; height:0; margin:0 0 0 -15px; border-radius:6px; background:#9bc91f; opacity:0; }
.detail-panel.panel-refresh::before { animation:panelSweep .42s ease-out; }
.detail-panel.panel-refresh .panel-top,.detail-panel.panel-refresh .removal-strip,.detail-panel.panel-refresh .metric-grid,.detail-panel.panel-refresh .forecast-card,.detail-panel.panel-refresh .chart-wrap { animation:panelContentIn .34s cubic-bezier(.2,.72,.24,1) both; }
.detail-panel.panel-refresh .removal-strip { animation-delay:.025s }.detail-panel.panel-refresh .metric-grid{animation-delay:.05s}.detail-panel.panel-refresh .forecast-card{animation-delay:.075s}.detail-panel.panel-refresh .chart-wrap{animation-delay:.1s}
@keyframes panelContentIn { from{opacity:.2;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes panelSweep { 0%{height:0;opacity:0} 35%{height:68px;opacity:1} 100%{height:120px;opacity:0} }

@media(max-width:1280px){.plant-switch-button{display:grid}.factory-minimap{width:190px}.water-legend{display:none}}
@media(max-width:860px){.entry-screen{grid-template-columns:1fr;min-height:100vh;padding:92px 24px 40px}.entry-story{display:none}.entry-screen::after{background:rgba(8,28,42,.36)}.login-card{width:min(430px,100%);margin:auto;padding:30px}.entry-brand{left:24px;top:24px}.entry-foot{left:24px;bottom:16px;right:24px;text-align:center}.select-topbar{padding:0 20px}.select-content{width:min(680px,calc(100% - 28px));padding:34px 0 80px}.select-heading{display:block}.group-summary{margin-top:20px}.plant-card-grid{grid-template-columns:1fr}.factory-minimap{bottom:116px;left:12px}.process-mini-map{bottom:64px}.water-legend{display:none}}
@media(max-width:560px){.entry-screen{min-height:640px;padding-left:16px;padding-right:16px}.login-card{padding:26px 22px;border-radius:21px}.login-card h1{font-size:26px}.entry-brand span,.entry-foot{display:none}.select-topbar{height:68px}.select-account span{display:none}.select-heading h1{font-size:27px}.plant-card{padding:19px}.plant-card-stats{grid-template-columns:1fr 1fr}.plant-card-stats span:last-child{display:none}.factory-minimap{display:none}}
@media(prefers-reduced-motion:reduce){.login-submit,.plant-card,.minimap-node{transition:none}.detail-panel.panel-refresh .panel-top,.detail-panel.panel-refresh .removal-strip,.detail-panel.panel-refresh .metric-grid,.detail-panel.panel-refresh .forecast-card,.detail-panel.panel-refresh .chart-wrap,.detail-panel.panel-refresh::before{animation:none!important}}

/* Brand alignment: carry the light industrial twin palette into sign-in */
.entry-screen { color:#1e2925; background:radial-gradient(circle at 30% 46%,#fdfefb 0,#f4f7f3 42%,#e8ede9 100%); }
.entry-screen::after { background:linear-gradient(90deg,rgba(238,243,239,.02),rgba(238,243,239,.12) 56%,rgba(232,237,233,.54)); }
.entry-mark { border-color:rgba(31,54,46,.16); background:#1e2c27; color:#d8ff52; box-shadow:0 9px 24px rgba(31,44,38,.14); }
.entry-brand span { color:#7f8c85; }
.entry-story>span { color:#6e8d1d; }
.entry-story>p { color:#68766e; }
.login-card { border-color:rgba(201,211,204,.94); background:rgba(255,255,255,.92); color:#1e2925; box-shadow:0 24px 70px rgba(42,57,49,.14); }
.entry-kicker { color:#758f27; }
.login-card>p { color:#748079; }
#login-form>label { color:#55635c; }
#login-form input:not([type="checkbox"]){border-color:#d7dfd9;background:#fbfcfa;color:#20312b}
#login-form input:not([type="checkbox"]):focus{border-color:#9fbd45;box-shadow:0 0 0 4px rgba(159,189,69,.13)}
.login-options { color:#7d8982; }.login-options input{accent-color:#73921d}
.login-submit { background:#1e2c27; box-shadow:0 12px 28px rgba(31,44,38,.2); }.login-submit:hover{background:#2d4038}
.login-safe { border-top-color:#e1e7e2; color:#849089; }.login-safe span{background:#93c424;box-shadow:0 0 0 4px rgba(147,196,36,.12)}
.entry-foot { color:#849089; }
@media(max-width:860px){.entry-screen::after{background:rgba(237,242,238,.22)}}

/* Distinct plant previews: one lightweight atlas, four facility configurations */
.plant-card { min-height:390px; padding:0; }
.plant-card-visual { position:relative; height:164px; overflow:hidden; border-bottom:1px solid #dce4de; background-image:url('./plant-thumbnails-v2.webp'); background-repeat:no-repeat; background-size:200% auto; transition:filter .28s ease; }
.plant-card-visual::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(20,43,35,.34)); }
.plant-card-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.24) 48%,transparent 61%); transform:translateX(-110%); transition:transform .62s cubic-bezier(.2,.7,.2,1); }
.plant-card:hover .plant-card-visual::after,.plant-card:focus-visible .plant-card-visual::after { transform:translateX(110%); }
.visual-south { background-position:0 0; }
.visual-riverside { background-position:100% 0; }
.visual-north { background-position:0 100%; }
.visual-harbor { background-position:100% 100%; }
.plant-card-head,.plant-card-spec,.plant-card-stats,.plant-card-foot { margin-left:23px; margin-right:23px; }.plant-card-spec { margin-top:13px; }
.plant-card-head { margin-top:18px; }
.plant-card-stats { margin-top:22px; }
.plant-card-foot { margin-top:20px; margin-bottom:20px; }
.plant-card.opening { border-color:#9fbd45; box-shadow:0 0 0 4px rgba(159,189,69,.13),0 22px 50px rgba(45,63,53,.13); }
.plant-card.opening .plant-card-visual { filter:saturate(1.08) brightness(1.03); }

/* Full-width twin with an on-demand details drawer.
   ★ 2026-10-06 按用户「左边的弹出来，池子不要动」把抽屉从右侧改到左侧。
   只动「锚边 + 出场方向」两处：right:12px → left:12px、
   translateX(+(100%+30px)) → translateX(-(100%+30px))。
   三维场景里的东西（池体、相机、标签、指北针、小地图、模式条）一个都没碰。 */
.workspace { position:relative; grid-template-columns:minmax(0,1fr); overflow:hidden; }
.detail-panel { position:absolute; z-index:25; top:12px; right:12px; bottom:12px; width:min(398px,calc(100% - 24px)); min-height:0; overflow:auto; opacity:0; pointer-events:none; transform:translateX(calc(100% + 30px)); transition:transform .34s cubic-bezier(.2,.75,.2,1),opacity .22s ease; box-shadow:0 22px 64px rgba(34,49,41,.19); }
.detail-panel.is-open { opacity:1; pointer-events:auto; transform:none; }
.panel-actions { display:flex; align-items:center; gap:8px; flex:none; }
.detail-close { width:34px; height:34px; display:grid; place-items:center; border:1px solid #dce4de; border-radius:11px; background:#f8faf7; color:#66736c; cursor:pointer; transition:background .18s,color .18s,transform .18s; }
.detail-close:hover { color:#20312b; background:#eef3ee; transform:rotate(3deg); }
.detail-close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.detail-panel::before { position:absolute; }

/* Restrained motion communicates hierarchy without turning the dashboard into a demo reel */
.surface-leave { animation:surfaceLeave .18s ease both; pointer-events:none; }
.surface-enter { animation:surfaceEnter .42s cubic-bezier(.2,.76,.2,1) both; }
.module-enter { animation:moduleEnter .4s cubic-bezier(.2,.72,.2,1) both; }
@keyframes surfaceLeave { to{opacity:0;transform:translateY(-7px);filter:blur(2px)} }
@keyframes surfaceEnter { from{opacity:0;transform:translateY(12px);filter:blur(3px)} to{opacity:1;transform:none;filter:none} }
@keyframes moduleEnter { from{opacity:.18;transform:translateY(9px)} to{opacity:1;transform:none} }

@media(max-width:860px){
  .plant-card { min-height:378px; padding:0; }
  .plant-card-visual { height:154px; }
  .detail-panel { top:8px; right:8px; bottom:8px; width:calc(100% - 16px); overflow:auto; }
}
@media(max-width:560px){
  .plant-card { padding:0; }
  .plant-card-head,.plant-card-spec,.plant-card-stats,.plant-card-foot { margin-left:18px; margin-right:18px; }
  .plant-card-head { gap:10px; }.plant-mark { width:38px; height:38px; border-radius:11px; font-size:17px; }.plant-card-head strong { font-size:18px; }.plant-card-head small { letter-spacing:.06em; }
  .plant-card-visual { height:142px; }
  .detail-panel { border-radius:19px; padding:18px; }
  .status-pill { padding:7px 8px; font-size:10px; }
}

/* Functional industrial sand-table: stronger hierarchy, fewer decorative cues. */
.scene-card {
  background:
    radial-gradient(circle at 58% 44%,rgba(255,255,255,.82),rgba(236,241,237,.38) 44%,rgba(221,228,222,.55) 100%),
    #e9eeea;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 18px 50px rgba(39,55,47,.10);
}
#plant-canvas { filter:none; }
.scene-loading { background:#e9eeea; }
.plant-label { border-color:rgba(181,194,185,.9); background:rgba(249,251,248,.88); box-shadow:0 7px 18px rgba(36,52,44,.10); }
.plant-label.warning { border-color:rgba(230,165,61,.52); background:rgba(255,249,237,.94); }
.overview-card,.process-mini-map,.factory-minimap,.mode-bar,.scene-tools,.scene-hint,.water-legend { border-color:rgba(181,194,185,.86); }
.water-legend { color:#59675f; }

@media(prefers-reduced-motion:reduce){
  .surface-leave,.surface-enter,.module-enter { animation:none!important; }
  .detail-panel,.plant-card-visual,.plant-card-visual::after,.detail-close { transition:none!important; }
  #plant-canvas { filter:none; }
}

/* Editorial sign-in composition: the product promise becomes the visual anchor. */
.entry-screen {
  width:calc(100vw - 32px);
  height:calc(100vh - 32px);
  min-height:648px;
  margin:16px;
  grid-template-columns:minmax(0,1.68fr) minmax(390px,.92fr);
  gap:clamp(38px,4.5vw,82px);
  padding:86px clamp(64px,6.7vw,128px) 72px clamp(64px,6.7vw,128px);
  border:1px solid rgba(190,202,194,.82);
  border-radius:30px;
  box-shadow:0 22px 70px rgba(42,57,49,.11);
}
.entry-screen::after,#login-particles { border-radius:inherit; }
.entry-brand { left:clamp(34px,4vw,72px); }
.entry-story { max-width:920px; align-self:center; padding-bottom:0; margin-top:3vh; }
.entry-story>span { margin-bottom:22px; font-size:15px; letter-spacing:.11em; }
.entry-story>strong { font-size:clamp(66px,5.65vw,112px); line-height:.91; letter-spacing:-.075em; font-weight:760; }
.entry-story>strong>span,.entry-story>strong>em { display:block; }
.entry-story>strong>em { margin-top:.08em; padding-left:.5em; font-size:.82em; font-style:normal; font-weight:480; letter-spacing:-.07em; }
.entry-story>p { margin-top:30px; font-size:18px; }
.login-card { width:min(100%,460px); justify-self:start; transform:translateY(.8vh); }
.entry-foot { left:clamp(34px,4vw,72px); }

@media(max-width:1180px) and (min-width:861px){
  .entry-screen { grid-template-columns:minmax(0,1fr) 390px; gap:34px; padding:82px 46px 64px 52px; }
  .entry-story { max-width:570px; margin-top:4vh; }
  .entry-story>strong { font-size:clamp(54px,6.2vw,76px); }
  .entry-story>p { font-size:15px; }
  .login-card { width:390px; padding:34px; }
}
@media(max-width:860px){
  .entry-screen { width:calc(100vw - 20px); height:calc(100vh - 20px); min-height:620px; margin:10px; grid-template-columns:1fr; padding:92px 24px 40px; border-radius:24px; }
  .login-card { width:min(430px,100%); justify-self:center; transform:none; }
}
@media(max-width:560px){
  .entry-screen { padding-left:16px; padding-right:16px; }
}

/* Pool detail can switch between a compact drawer and a focused full-screen workspace. */
.detail-overview,.detail-chart-block,.detail-operations { display:contents; }
.detail-expand {
  width:34px; height:34px; display:grid; place-items:center; border:1px solid #dce4de;
  border-radius:11px; background:#f8faf7; color:#66736c; cursor:pointer;
  transition:background .18s,color .18s,transform .18s,border-color .18s;
}
.detail-expand:hover { color:#20312b; background:#eef3ee; border-color:#ccd8d0; transform:translateY(-1px); }
.detail-expand svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.detail-expand .restore-symbol { display:none; }
.detail-panel.is-expanded .detail-expand .expand-symbol { display:none; }
.detail-panel.is-expanded .detail-expand .restore-symbol { display:block; }

.detail-panel.is-expanded {
  position:fixed; inset:14px; z-index:80; width:auto; max-width:none; min-height:0;
  display:grid; grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr);
  grid-template-rows:auto auto auto; align-content:start; column-gap:26px; row-gap:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  scrollbar-width:thin; scrollbar-gutter:stable; padding:28px; border-radius:26px; background:rgba(252,253,251,.985);
  box-shadow:0 34px 110px rgba(22,39,31,.25); animation:detailExpandIn .28s cubic-bezier(.2,.76,.2,1) both;
}
.detail-panel.is-expanded .panel-top { grid-column:1/-1; padding-bottom:20px; border-bottom:1px solid #e2e8e3; }
.detail-panel.is-expanded .pool-title { font-size:30px; }
.detail-panel.is-expanded .detail-overview { display:block; grid-column:1; grid-row:2; min-width:0; }
.detail-panel.is-expanded .detail-chart-block { display:block; grid-column:1; grid-row:3; min-width:0; min-height:0; }
.detail-panel.is-expanded .detail-operations {
  display:block; grid-column:2; grid-row:2 / span 2; min-height:0; overflow:visible;
  padding-left:26px; border-left:1px solid #e2e8e3; scrollbar-width:thin;
}
.detail-panel.is-expanded .removal-caption { margin-top:20px; }
.detail-panel.is-expanded .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:16px; }
.detail-panel.is-expanded .metric-card { padding:15px 16px; }
.detail-panel.is-expanded .metric-value { font-size:25px; }
.detail-panel.is-expanded .forecast-card { padding:16px 18px; }
.detail-panel.is-expanded .detail-chart-block .section-head { margin-top:20px; }
.detail-panel.is-expanded .chart-wrap { padding:16px 18px 12px; }
.detail-panel.is-expanded #trend-chart { height:clamp(230px,31vh,360px); }
.detail-panel.is-expanded .detail-operations>.section-head:first-child { margin-top:20px; }
.detail-panel.is-expanded .device-row,.detail-panel.is-expanded .alarm-row { padding:14px; }
@keyframes detailExpandIn { from{opacity:.68;transform:scale(.975)} to{opacity:1;transform:none} }

@media(max-width:980px){
  .detail-panel.is-expanded { grid-template-columns:1fr; grid-template-rows:auto auto auto auto; overflow:auto; }
  .detail-panel.is-expanded .panel-top { grid-column:1; }
  .detail-panel.is-expanded .detail-overview { grid-column:1; grid-row:2; }
  .detail-panel.is-expanded .detail-chart-block { grid-column:1; grid-row:3; }
  .detail-panel.is-expanded .detail-operations { grid-column:1; grid-row:4; overflow:visible; padding-left:0; border-left:0; }
  .detail-panel.is-expanded .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px){
  .detail-expand { display:none; }
}
@media(prefers-reduced-motion:reduce){
  .detail-expand { transition:none!important; }
  .detail-panel.is-expanded { animation:none!important; }
}

/* Keep the process chain fixed to the visual centre of the workspace.
   Detail drawers must never shift this navigation landmark. */
.process-mini-map {
  left:50%;
  right:auto;
  width:min(650px,calc(100% - 36px));
  transform:translateX(-50%);
  transition:opacity .2s ease;
}
@media(max-width:860px){
  .process-mini-map { top:auto; bottom:64px; left:12px; right:12px; width:auto; transform:none; }
}
@media(max-width:520px){
  .process-mini-map { display:none; }
}
@media(prefers-reduced-motion:reduce){
  .process-mini-map { transition:none!important; }
}

/* Keep the WebGL surface out of repeated blur/filter compositing passes. */
.workspace.module-enter { animation:none; }
.scene-card .process-mini-map,.scene-card .overview-card,
.scene-card .factory-minimap,.scene-card .scene-tools,
.scene-card .mode-bar,.scene-card .scene-hint,.scene-card .plant-label {
  backdrop-filter:none;
}
@media(min-width:861px) and (max-width:1400px) {
  .detail-panel:not(.is-expanded) { top:114px; }
}

.demo-badge { display:inline-block; margin-left:7px; padding:2px 5px; border:1px solid #d2dec1; border-radius:5px; background:#f2f7e8; color:#667b33; font-size:11px; font-weight:600; vertical-align:middle; }

/* All process labels stay available without opening a detail drawer. */
.plant-label { padding:5px 8px; font-size:12px; line-height:16px; background:rgba(250,252,250,.97); box-shadow:0 3px 9px rgba(36,52,44,.09); }
.plant-label::after { display:none; }
.plant-label:hover,.plant-label.active { transform:translate(-50%,-100%); }
.label-leaders { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; z-index:6; }
.label-leaders line { stroke:#82938b; stroke-width:1; opacity:.7; }

/* ★ 2026-10-06 二改：抽屉回到右侧（用户「左边的换为右边的出来」）。
   抽屉贴右时会压住右上角的「复位三维 / 俯视平面」——那是**操作控件**，
   被盖住等于功能不可达，所以抽屉打开且未全屏时把工具条往左推 404px
   （398 是抽屉宽 + 6 余量）。
   ★ 门槛从原来的 min-width:1401px 放宽到 861px：实测 861~1400 档抽屉
     top:114px、.scene-tools 落在 y 177~217，仍在抽屉的纵向范围内，
     同样会被压住。≤860px 抽屉是通栏面板，整屏被接管，不适用这条。 */
@media(min-width:861px){
  .workspace:has(> .detail-panel.is-open:not(.is-expanded)) .scene-tools { right:422px; }
}
/* 左侧概览卡：进水 / 出水分区 */
.quality-block-out { margin-top:14px; padding-top:13px; border-top:1px solid #e4e9e4; }

/* Agent 智能体工作台 */
.agent-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:13px; align-items:start; }
.agent-console { display:grid; gap:12px; padding:18px; }
.agent-thread { display:grid; gap:11px; align-content:start; max-height:438px; overflow-y:auto; padding-right:5px; scrollbar-width:thin; }
.agent-msg { display:grid; gap:6px; max-width:92%; justify-self:start; }
.agent-msg.user { justify-self:end; }
.agent-msg .bubble { padding:11px 13px; border-radius:14px; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.agent-msg.user .bubble { border:1px solid #d6e6b0; border-bottom-right-radius:5px; background:#e9f3d4; color:#3c4a33; }
.agent-msg.agent .bubble { display:grid; gap:9px; border:1px solid #e4e9e5; border-bottom-left-radius:5px; background:#f6f8f5; color:#37453d; }
.agent-who { display:flex; align-items:center; gap:6px; color:#8a958e; font-size:10px; }
.agent-who i { width:16px; height:16px; display:grid; place-items:center; border-radius:6px; background:#d8ff52; color:#26321e; font-size:9px; font-style:normal; font-weight:850; }
.agent-verdict { padding:9px 11px; border:1px solid #d9e9b6; border-radius:11px; background:#f1f8e2; color:#3f5220; font-size:12px; font-weight:720; line-height:1.55; }
.agent-metrics { display:flex; flex-wrap:wrap; gap:6px; }
.agent-metrics span { padding:6px 9px; border:1px solid #e4e9e5; border-radius:9px; background:#fff; color:#66736b; font-size:10px; }
.agent-metrics span strong { color:#27342e; font-weight:760; }
.agent-cites { display:flex; flex-wrap:wrap; gap:5px; }
.agent-cites button { border:1px solid #dbe4dc; border-radius:8px; padding:5px 8px; background:#fff; color:#6a7870; font-size:9px; cursor:pointer; transition:.18s ease; }
.agent-cites button::before { content:"§"; margin-right:4px; color:#9cb63f; font-weight:800; }
.agent-cites button:hover { border-color:#bcd48a; background:#f8fce9; color:#4f5f22; }
.agent-advice { margin:0; padding:8px 10px; border-left:3px solid #b5d169; border-radius:0 9px 9px 0; background:#fbfdf5; color:#5b6a52; font-size:10px; line-height:1.6; }
.agent-typing { display:flex; align-items:center; gap:4px; color:#8a958e; font-size:10px; }
.agent-typing i { width:5px; height:5px; border-radius:50%; background:#b6c8a0; animation:agentDot 1s infinite; }
.agent-typing i:nth-child(2) { animation-delay:.15s; }
.agent-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes agentDot { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
.agent-suggest { display:flex; flex-wrap:wrap; gap:6px; }
.agent-suggest button { border:1px dashed #cfdccf; border-radius:999px; padding:7px 11px; background:#fbfdf8; color:#63715f; font-size:10px; cursor:pointer; transition:.18s ease; }
.agent-suggest button:hover { border-style:solid; border-color:#b5d169; background:#f6fce5; color:#4d6118; }
.agent-composer { display:grid; grid-template-columns:1fr auto; gap:8px; padding:7px; border:1px solid #dfe6e0; border-radius:14px; background:#fff; }
.agent-composer input { border:0; outline:0; padding:6px 8px; background:transparent; color:#2c3a33; font-size:12px; }
.agent-composer input::placeholder { color:#a4aea8; }
.agent-composer button { border:0; border-radius:10px; padding:9px 15px; background:#26321e; color:#d8ff52; font-size:11px; font-weight:720; cursor:pointer; transition:.2s ease; }
.agent-composer button:hover { background:#33422a; }
.agent-note { margin:0; color:#93a099; font-size:10px; line-height:1.55; }
.agent-side { display:grid; align-content:start; gap:12px; }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:13px; }
.tool-item { padding:10px; border-radius:11px; background:#f6f8f5; }
.tool-item i { width:20px; height:20px; display:inline-grid; place-items:center; margin-bottom:6px; border-radius:7px; background:#d8ff52; color:#26321e; font-size:9px; font-style:normal; font-weight:850; }
.tool-item b { display:block; font-size:11px; }
.tool-item span { display:block; margin-top:3px; color:#8a958e; font-size:9px; line-height:1.45; }
.cite-list { display:grid; gap:7px; margin-top:13px; }
.cite-item { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:9px 10px; border-radius:10px; background:#f6f8f5; }
.cite-item span { color:#6d7a72; font-size:10px; }
.cite-item span b { display:block; margin-bottom:2px; color:#2f3d35; font-size:11px; }
.cite-item em { color:#8a958e; font-size:9px; font-style:normal; }
@media(max-width:1150px) {
  .agent-layout { grid-template-columns:1fr; }
  /* 2026-10-06：原为 max-height:none —— 上下堆叠时对话区会随消息无限长高，
     把输入行顶到视口外（实测 1024x768 被顶到 y=2158）。给一个视口相关的上限，
     让它在卡片内部滚动。 */
  #data-page .agent-thread { max-height:clamp(220px,40dvh,460px); }
}
@media(max-width:560px) {
  .agent-console { padding:14px; }
  .agent-msg { max-width:100%; }
  .tool-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .agent-typing i { animation:none; }
}
/* ═══════════ 移动端布局修订（2026-10-06） ═══════════
   三处真实缺陷，均由 tools/probe-mobile.py 在 390 / 360 / 320 三档实测复现：
   1. .mode-bar 在窄屏被 flex 压扁，而 .mode-btn 缺 white-space:nowrap →
      中文被挤成「一个字一行」，药丸从 40px 撑到 76px，反过来盖住了 .scene-hint。
   2. .scene-card 用 vh 定高（68vh / 62vh），底部导航之上留出近 200px 死区。
   3. 触控目标普遍偏小：.module-tab 32px、.plant-label 28px、.scene-tools 按钮 30px，
      都低于 44px 基线。
   只改 CSS，不动 DOM 结构。 */

/* ① 模式栏按钮：不许换行，在滚动容器里也不许被压扁 */
.mode-btn { white-space:nowrap; flex:0 0 auto; }

/* 触屏设备换掉鼠标专属提示（左键/右键/滚轮/Esc） */
.hint-coarse { display:none; }
@media (hover:none) and (pointer:coarse) {
  .hint-fine { display:none; }
  .hint-coarse { display:inline; }
}

@media(max-width:860px) {
  /* ② 触控目标抬到 44px 基线 */
  .module-tab { min-height:44px; display:flex; align-items:center; justify-content:center; padding:0 8px; font-size:12px; }
  .plant-switch-button { width:44px; height:44px; }
  .scene-tools button { min-height:40px; padding:9px 12px; font-size:12px; }
  /* ③ 场景卡吃满顶栏与底部导航之间的空间（顶栏 66 + 工作区上下留白 16 + 底栏 54 + 余量 10） */
  .scene-card { height:calc(100vh - 146px); height:calc(100dvh - 146px); min-height:320px; }
  /* ④ 提示文字从 10px 抬到 11.5px，并上移到变矮之后的模式栏之上 */
  .scene-hint { font-size:11.5px; bottom:64px; padding:8px 11px; }
}

@media(max-width:560px) {
  /* 模式栏改为整宽居中，不再左右各空一截 */
  .mode-bar { left:10px; right:10px; max-width:none; transform:none; justify-content:center; gap:3px; }
  /* 12px 字号下五个按钮 + 内边距塞不进 320~360 的卡片宽（实测内容宽 323 > 容器 320），所以横向内边距再收 2px */
  .mode-btn { padding:9px 10px; font-size:12px; }
  /* 池体标签 10px / 约 24px 高太小，抬到 11px / 约 30px */
  .plant-label { font-size:11px; padding:7px 9px; }
  .nav-badge { font-size:11px; min-width:19px; height:19px; }
  /* 详情抽屉里的 9~10px 小字（指标、图例、设备备注）抬到 11px */
  .pool-scope, .data-quality-line, .removal-caption, .legend-item, .device-meta,
  .panel-note, .removal-strip span, .alarm-copy, .alarm-time, .quality-grid span,
  .quality-unit, .metric-delta, .status-pill { font-size:11px; }
}

/* 最窄档（320px）：模式栏五个按钮按 12px 仍差 11px 塞不下（实测内容 291 > 容器 280），
   再降一档字号与内边距；同时把模式栏按钮抬到 40px 高，接近触控基线。 */
@media(max-width:360px) {
  .mode-bar { gap:2px; padding:4px; }
  .mode-btn { padding:8px 8px; font-size:11px; min-height:40px; }
}

/* ═══════════ 智能体页左栏空白修订（2026-10-06） ═══════════
   问题：.agent-layout（第 436 行）是两栏网格且 align-items:start，网格项不被拉伸。
        于是「问 Agent」面板只有内容高度，而右栏三张卡叠起来高得多。
        实测 1920x1056 视口：.agent-console = 1260x481，.agent-side = 607x753，
        两栏底部差 272px —— 这段差就变成了左栏下方一大片页面底色
        （实拍约 350px 高、横贯整个左栏；测量见 tools/probe-agent-blank.py）。
   修法：让左栏与右栏等高，并把多出来的高度交给对话区 .agent-thread，
        输入框与备注自然落到卡片底部 —— 这才是对话界面该有的形态。
        .agent-console 恰好 5 个子节点（标题/对话区/建议/输入行/备注），
        所以 grid-template-rows 给 5 个值，第 2 个是 1fr。
   只改 CSS，不动 DOM。想回退就把下面两行 + 文件末尾 ≥1151px 块里那行删掉
   （原来就是 align-items:start、以及 .agent-thread 的 max-height:438px）。
   ★ 2026-10-06 第二轮把「.agent-thread { max-height:none; min-height:0 }」从文件末尾
     挪进了文末的 ≥1151px 块 —— 它原来在 @media(max-width:1150px) 之后，
     会静默压掉窄档的上限设置。 */
.agent-layout { align-items:stretch; }
.agent-console { grid-template-rows:auto minmax(0,1fr) auto auto auto; }

/* ═══════════ Agent 页「输入行固定」（2026-10-06 第二轮） ═══════════
   用户原话：「agent那里对话框能不能固定」。实测 tools/probe-agent-composer.py（1920x1056）：
     · 2 条消息：输入行 y=840、视口 969 ⇒ 在视口内
     · 灌到 14 条：卡片 753 -> 2072、右栏一并被顶到 2072、对话区 527 -> 1845 且自己不滚、
       输入行被顶到 y=2158（视口外）；滚动容器是 #data-page，滚到底时输入行视口位移 -1310px
   ⇒ 输入行不是固定的：消息一多就得滚页面才能找到它。
   根因：上一版把两栏拉平、把对话区设成 minmax(0,1fr)，但**卡片高度仍是内容驱动**的，
        1fr 在内容定高的容器里退化成 auto ⇒ 对话区不限高、随消息无限长高。
   修法：#data-page 变 flex 纵列 —— 标题占自然高，.agent-layout 用 flex:1 + min-height:0
        拿到确定高度，minmax(0,1fr) 才真正生效：只有对话区滚动，输入行/建议/备注
        恒定贴在卡片底部；右栏超高时在自己内部滚动，不再顶高页面。
   窄档（≤1150px）是上下堆叠，一屏放不下两张卡，锁高反而更糟，
        所以那一档只给对话区一个视口相关的上限（见上面的 max-width:1150px 规则）。 */
@media(min-width:1151px) {
  #data-page.module-page { display:flex; flex-direction:column; }
  #data-page .agent-layout { flex:1 1 auto; min-height:0; }
  #data-page .agent-console { min-height:0; }
  #data-page .agent-thread { max-height:none; min-height:0; }
  #data-page .agent-side { min-height:0; overflow-y:auto; scrollbar-width:thin; }
}