:root{
  --bg:#090a0d; --panel:#12141a; --panel2:#171a20; --line:rgba(255,255,255,.10);
  --text:#eef2f6; --muted:#99a2ad; --red:#d12626; --maroon:#741d26; --grey:#5b626d;
  --blue:#74859a; --green:#55d884; --yellow:#ffcd4c; --orange:#ff9a3d; --shadow:0 18px 42px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top left,#3a141b 0,#12161d 34%,#07080b 100%);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}
body{overflow-x:hidden}
button,select,input{font:inherit}
button{cursor:pointer;border:1px solid rgba(255,255,255,.1);background:#152131;color:#edf6ff;border-radius:10px;min-height:38px;padding:8px 11px;font-weight:700;font-size:12px}
button:hover{border-color:rgba(209,38,38,.55);background:#1b2636}
button.active,.tabs button.active,.viewer-toolbar button.active,.scenario.active{background:linear-gradient(135deg,var(--red),#81151d);color:#fff;border-color:rgba(255,255,255,.16)}
select{height:38px;border-radius:10px;background:#101722;color:#eaf3fb;border:1px solid var(--line);padding:0 10px;min-width:0}
.topbar{position:sticky;top:0;z-index:80;min-height:74px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(9,12,17,.94));border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;min-width:285px}.brand img{width:48px;height:48px;object-fit:contain}.brand h1{font-size:18px;margin:0;letter-spacing:.3px}.brand p{margin:3px 0 0;color:var(--muted);font-size:12px}
.tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:0 0 auto;min-height:36px;padding:7px 10px;background:#101722;border-radius:999px;color:#d6e2ee;white-space:nowrap}
.top-actions{display:flex;gap:8px;align-items:center}.status-btn.online{background:linear-gradient(135deg,#1b8c45,#116132)}.status-btn.offline{background:linear-gradient(135deg,#6d2b2f,#3d161a)}
.workspace{display:grid;grid-template-columns:255px minmax(0,1fr) 330px;gap:10px;padding:10px;align-items:start}
.left-panel,.right-panel{display:flex;flex-direction:column;gap:10px;min-width:0}.main-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
.card,.viewer-card{background:linear-gradient(180deg,rgba(23,24,30,.98),rgba(15,16,20,.98));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card{padding:12px}.card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-weight:800;font-size:13px;margin-bottom:10px;color:#fff}.card-title span{font-weight:600;color:var(--muted);font-size:11px;text-align:right}.card-title button{min-height:0;padding:0 6px;border:0;background:transparent;color:#c9d7e6;font-size:18px}
.viewer-card{position:relative;height:58vh;min-height:560px;background:linear-gradient(180deg,#d9dde2,#eef0f3)}#viewer{position:absolute;inset:0;background:#e4e7eb}#viewer canvas{position:absolute!important;inset:0!important;display:block!important;touch-action:none}
.viewer-toolbar{position:absolute;z-index:30;left:12px;top:12px;display:flex;gap:7px;flex-wrap:wrap;max-width:calc(100% - 210px);padding:7px;background:rgba(9,14,20,.88);border:1px solid rgba(255,255,255,.12);border-radius:13px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.viewer-toolbar button{min-height:34px;padding:7px 10px;white-space:nowrap}.viewer-hint{position:absolute;left:12px;bottom:12px;z-index:20;background:rgba(255,255,255,.88);color:#17202b;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700}
.asset-popup{position:absolute;right:12px;top:12px;z-index:35;width:330px;max-width:calc(100% - 24px);padding:12px;border-radius:14px;background:rgba(9,14,20,.94);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.asset-popup.hidden{display:none}
.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.asset-grid div{padding:8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}.asset-grid small{color:var(--muted)}.asset-grid b{color:#fff}
.bottom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.draggable[draggable="true"]{outline:1px dashed rgba(209,38,38,.5)}.drag-handle{cursor:grab}
.kpi-grid,.inventory-grid,.inspection-summary,.route-kpis,.asrs-status,.fixture-matrix{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kpi-grid div,.inventory-grid div,.inspection-summary div,.route-kpis div,.asrs-status div,.fixture-matrix div{padding:10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.kpi-grid b,.inventory-grid strong,.inspection-summary b,.route-kpis b,.asrs-status b,.fixture-matrix b{display:block;font-size:20px}.kpi-grid span,.inventory-grid span,.inspection-summary span,.route-kpis span,.asrs-status span,.fixture-matrix span{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.scroll-list{max-height:245px;overflow:auto;scrollbar-width:thin}.scroll-list.compact{max-height:168px}
.status-row{display:grid;grid-template-columns:40px 1fr 50px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.055)}.status-row:last-child{border-bottom:none}.dot{width:11px;height:11px;border-radius:50%;margin-left:9px;background:var(--green);box-shadow:0 0 12px rgba(85,216,132,.55)}.dot.setup{background:var(--yellow);box-shadow:0 0 12px rgba(255,205,76,.5)}.dot.idle{background:#7c8794;box-shadow:none}.dot.alert{background:var(--red);box-shadow:0 0 12px rgba(209,38,38,.6)}.bar{height:7px;border-radius:999px;background:#242d3a;overflow:hidden}.bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--red),#ff8b8b)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.form-row label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px;font-weight:800}
.control-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.control-row button{flex:1 1 140px;white-space:normal}
.flow-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}.flow-step{position:relative;min-height:74px;padding:10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.flow-step.done{border-color:rgba(85,216,132,.45);background:rgba(85,216,132,.09)}.flow-step.active{border-color:rgba(209,38,38,.58);background:rgba(209,38,38,.14);box-shadow:0 0 0 1px rgba(209,38,38,.25) inset}.flow-step b{display:block;font-size:12px}.flow-step small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.flow-step:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;transform:translateY(-50%);color:#ff9ca0;font-size:18px}
.detail-grid,.toolset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.detail-grid div,.toolset-grid div{padding:9px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.detail-grid small,.toolset-grid span{display:block;color:var(--muted);font-size:10px}.detail-grid b,.toolset-grid b{display:block;font-size:13px;margin-top:3px}
.route-mini-map{height:165px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#121a23,#0b1118);padding:10px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:6px}.route-node{position:relative;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:10px;display:flex;align-items:center;justify-content:center;text-align:center;color:#dfe8f1}.route-node.active{border-color:rgba(209,38,38,.58);background:rgba(209,38,38,.15)}.route-node.asrs{background:rgba(85,96,110,.4)}.route-node.cmm{background:rgba(95,134,173,.2)}.route-node.amr{background:rgba(209,38,38,.2)}
.table{width:100%;border-collapse:collapse;font-size:11px}.table th,.table td{padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);text-align:left;vertical-align:top}.table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px}.pill{display:inline-block;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800}.pill.ok{background:rgba(85,216,132,.15);color:#82e9a3}.pill.warn{background:rgba(255,205,76,.15);color:#ffe08b}.pill.bad{background:rgba(209,38,38,.16);color:#ff858b}
.ai-frame{display:grid;grid-template-columns:120px 1fr;gap:12px}.ai-image{height:120px;border-radius:14px;background:radial-gradient(circle at 50% 50%,#838d98,#202a36);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.blade-defect{position:absolute;left:35px;top:18px;width:48px;height:88px;border-radius:60% 35% 45% 55%;transform:rotate(18deg);background:linear-gradient(135deg,#c8ced5,#7f8a96);box-shadow:inset -8px -12px 18px rgba(0,0,0,.22)}.blade-defect::after{content:"";position:absolute;right:8px;top:26px;width:14px;height:3px;background:#d12626;border-radius:99px;box-shadow:0 0 8px #d12626}.ai-image span{position:absolute;left:8px;right:8px;bottom:8px;font-size:10px;color:#fff;background:rgba(0,0,0,.36);padding:4px 6px;border-radius:8px}.ai-controls{display:flex;flex-direction:column;gap:8px}.ai-controls label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px;font-weight:800}
.log-note{color:var(--muted);font-size:11px;margin-top:8px;line-height:1.35}.scenario-buttons{display:grid;gap:8px}.scenario-buttons button{text-align:left}.module-content{font-size:12px;line-height:1.45;color:#d9e4ef}.module-content .mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.module-content .mini-grid div{padding:8px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.mobile-nav{display:none}.toast{position:fixed;left:50%;bottom:24px;z-index:1000;transform:translate(-50%,20px);opacity:0;transition:.25s ease;background:rgba(8,12,18,.96);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);padding:12px 16px;border-radius:999px;color:#fff}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1500px){.workspace{grid-template-columns:235px minmax(0,1fr) 300px}.bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.viewer-toolbar{max-width:calc(100% - 24px)}}
@media(max-width:1120px){.topbar{grid-template-columns:1fr}.top-actions{justify-content:stretch}.top-actions select,.top-actions button{flex:1}.workspace{display:flex;flex-direction:column}.left-panel,.right-panel{display:grid;grid-template-columns:1fr 1fr}.viewer-card{height:64svh;min-height:520px}.bottom-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.brand h1{font-size:15px}.brand p{display:none}.brand{min-width:0}.brand img{width:40px;height:40px}.tabs{display:none}.top-actions{display:grid;grid-template-columns:1fr 1fr}.top-actions select{grid-column:1 / -1}.viewer-card{height:66svh;min-height:430px;border-radius:12px}.viewer-toolbar{left:8px;top:8px;right:8px;max-width:none;overflow-x:auto;flex-wrap:nowrap;padding:6px}.viewer-toolbar button{flex:0 0 auto;font-size:11px;padding:6px 9px}.viewer-hint{display:none}.asset-popup{left:8px;right:8px;top:auto;bottom:62px;width:auto;max-height:42vh;overflow:auto}.left-panel,.right-panel,.bottom-grid{grid-template-columns:1fr}.flow-chain{grid-template-columns:1fr}.flow-step::after{display:none}.form-row,.detail-grid,.toolset-grid,.ai-frame{grid-template-columns:1fr}.kpi-grid,.inventory-grid,.inspection-summary,.route-kpis,.asrs-status,.fixture-matrix{grid-template-columns:1fr 1fr}.workspace{padding-bottom:70px}.mobile-nav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:90;grid-template-columns:repeat(4,1fr);padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(7,10,14,.96);border-top:1px solid var(--line);box-shadow:0 -18px 50px rgba(0,0,0,.45)}.mobile-nav button{border:0;background:transparent;color:#aebccd;border-radius:12px}.mobile-nav button.active{background:linear-gradient(135deg,var(--red),#81151d);color:#fff}.toast{bottom:80px;width:calc(100% - 28px);text-align:center;border-radius:16px}}
@media(min-width:1800px){.workspace{grid-template-columns:300px minmax(0,1fr) 380px}.viewer-card{height:63vh}.bottom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.control-room .workspace{grid-template-columns:340px minmax(0,1fr) 420px}body.control-room .viewer-card{height:68vh}

.viewer-toolbar{background:rgba(33,18,22,.90)!important;border-color:rgba(209,38,38,.22)!important}.viewer-hint{background:rgba(250,250,251,.92)!important}.route-node.active{box-shadow:0 0 0 1px rgba(209,38,38,.45) inset}.flow-step.active{background:rgba(209,38,38,.16)!important}.flow-step.done{background:rgba(110,31,39,.12)!important;border-color:rgba(209,38,38,.25)!important}