:root{--fb:'Plus Jakarta Sans',system-ui,sans-serif;--fd:'Plus Jakarta Sans',system-ui,sans-serif;--fdl:-.03em;--bg:#fff;--bg2:#F1F3F6;--sbg:#F4F6F8;--navbg:rgba(244,246,248,.85);--card:#fff;--ink:#121418;--mut:#6B7280;--soft:#9CA3AF;--line:#E7EAEE;--chip:#F1F3F6;--acc:#0E7F55;--acc2:#DDF1E8;--blue:#2952E3;--blue2:#E5EBFD;--lime:#D7F25B;--ok:#0E7F55;--ok2:#DDF1E8;--warn:#B7791F;--warn2:#FDF0D9;--bad:#E5484D;--bad2:#FDE8E8;--r:26px;--shadow:0 16px 36px -24px rgba(20,30,50,.3);color-scheme:light}
[data-theme=dark]{--bg:#121417;--bg2:#1B1E23;--sbg:#0D0F12;--navbg:rgba(13,15,18,.85);--card:#181B20;--ink:#F1F3F5;--mut:#9CA3AF;--soft:#6B7280;--line:#2A2E35;--chip:#22262C;--acc:#21B07A;--acc2:#163A2C;--blue2:#1D2850;--ok:#21B07A;--ok2:#163A2C;--warn2:#3A2E14;--bad2:#3A1A1C;--shadow:0 16px 36px -24px rgba(0,0,0,.8);color-scheme:dark}
body{background:#ECEEF1}[data-theme=dark] body{background:#0B0C0E}
.app{min-height:100vh;padding:20px;display:flex;justify-content:center}
.shell{width:100%;max-width:1440px;display:grid;grid-template-columns:72px minmax(0,1fr);background:#F4F6F8;border-radius:40px;box-shadow:0 40px 80px -50px rgba(20,30,50,.35);min-height:calc(100vh - 40px)}
[data-theme=dark] .shell{background:#0F1114}
.rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:84px 0 24px}
.rail a,.rail button{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--ink)}
.rail a.on{background:var(--acc);color:#fff}
.rail a:hover:not(.on),.rail button:hover{background:var(--chip)}
.rail .sp{flex:1}
.main{background:var(--bg);border-radius:34px;margin:8px;padding:26px 30px 36px;min-width:0}
.top{display:flex;align-items:center;gap:14px;height:56px}
.top .logo{font-size:26px;font-weight:700;color:var(--acc);letter-spacing:-.03em;gap:6px}.top .logo b{color:var(--acc);font-weight:600}
.top .logo svg{width:34px;height:34px}
.search{position:relative;margin-left:auto}
.search input{height:44px;width:300px;border-radius:99px;background:var(--chip);border:1px solid transparent;padding:0 52px 0 18px;outline:0}
.search input:focus{border-color:var(--acc);background:var(--card)}
.search .go{position:absolute;right:5px;top:5px;width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center}
.search .pop{left:0;right:auto;width:360px}
.iconb{background:var(--chip)}
.me{display:flex;gap:10px;align-items:center;text-align:left}
.me img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.me b{font-weight:600;display:block;line-height:1.2}.me small{color:var(--mut);font-size:13px}
.ph{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 22px}
.ph h1{font-size:clamp(28px,2.8vw,38px);font-weight:500;letter-spacing:-.03em}
.ph .sp{flex:1}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchips button{height:38px;padding:0 16px;border-radius:12px;border:1.5px solid var(--blue);color:var(--blue);font-weight:500;background:var(--card)}
.fchips button.on{background:var(--blue);color:#fff}
.view{animation:fade .3s ease-out}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.jobs{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px)/3);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:thin}
.job{scroll-snap-align:start;border-radius:26px;padding:22px;color:#fff;display:flex;flex-direction:column;gap:10px;min-height:248px}
.job.Cooling{background:var(--blue)}.job.Ventilation{background:#0E7F55}.job.Heating{background:#16181C}.job.Maintenance{background:#6B4CE6}
[data-theme=dark] .job.Heating{background:#2A2E35}
.job .tg{display:inline-block;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.25);font-size:13px}
.job h3{font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.job .bar{height:6px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}.job .bar i{display:block;height:100%;background:#fff;border-radius:9px;transition:width .4s}
.job .bm{margin-left:auto}.job .bm.on .i{fill:#fff}
.stack{display:flex}.stack img,.stack span{width:34px;height:34px;border-radius:50%;border:2px solid currentColor;margin-left:-8px;object-fit:cover;background:#fff;color:#111;display:grid;place-items:center;font-size:12px;font-weight:600}
.stack>:first-child{margin-left:0}
.btn.limeb{background:var(--lime);color:#111;height:40px}
.g-wo{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;margin-top:14px}
.panel{background:var(--bg2);border-radius:26px;padding:22px}
.vis{width:100%}
.vis .r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 80px;gap:10px;align-items:center;padding:12px 2px;border-top:1px solid var(--line);width:100%;text-align:left}
.vis .r:hover{background:var(--card)}
.vis small{display:block;color:var(--mut);font-size:13px}
.lime{background:var(--lime);color:#111;border-radius:26px;padding:24px;display:flex;flex-direction:column}
.lime h3{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:14px 0 10px}
/* schedule */
.g-sc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px}
.ucard{background:var(--card);border-radius:18px;padding:14px 16px;cursor:grab;border:2px solid transparent;box-shadow:var(--shadow)}
.ucard.sel{border-color:var(--blue)}
.ucard:active{cursor:grabbing}
.grid{border:1.5px solid var(--line);border-radius:26px;overflow:hidden;position:relative;background:var(--card)}
.gh,.gr{display:grid;grid-template-columns:120px minmax(0,1fr)}
.gh .hs{display:flex;justify-content:space-between;padding:18px 10px 10px 0;color:var(--mut);font-size:14px}
.gr{border-top:1px solid var(--line);min-height:96px}
.gr .who{display:flex;align-items:center;gap:10px;padding-left:16px;font-weight:500}
.gr .lane{position:relative;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100%/9) 100%}
.gr.drop .lane{background-color:var(--blue2)}
.blk{position:absolute;top:12px;bottom:12px;border-radius:14px;color:#fff;padding:10px 12px;font-size:14px;font-weight:600;overflow:hidden;text-align:left;line-height:1.25}
.blk small{display:block;font-weight:400;opacity:.8;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk.Cooling{background:var(--blue)}.blk.Ventilation{background:#0E7F55}.blk.Heating{background:#16181C}.blk.Maintenance{background:#6B4CE6}
[data-theme=dark] .blk.Heating{background:#3A3F48}
.blk.ghost{background:transparent;border:2px dashed var(--blue);color:var(--blue)}
.blk.new{box-shadow:0 0 0 3px var(--lime)}
.now{position:absolute;top:44px;bottom:0;width:2px;background:var(--bad);z-index:2}
.now::before{content:"";position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--bad)}
/* fleet */
.g-fl{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.map{position:relative;border-radius:26px;overflow:hidden;background:#EEF0F3;min-height:600px}
[data-theme=dark] .map{background:#1B1E23}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.vanb{position:absolute;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);transition:left 1s linear,top 1s linear}
.vanb img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.mcard{position:absolute;left:18px;right:18px;bottom:18px;background:var(--card);border-radius:22px;padding:20px 22px;box-shadow:var(--shadow)}
.crew{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--card);border:2px solid transparent;width:100%;text-align:left;margin-bottom:10px;box-shadow:var(--shadow)}
.crew.on{border-color:var(--acc)}
.crew img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.crew small{display:block;color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto}
.mini3>div{background:var(--card);border-radius:16px;padding:14px}
.mini3 b{font-size:26px;font-weight:500;display:block}.mini3 small{color:var(--mut)}
/* equipment */
.g-eq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:14px;align-items:start}
.unit{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:center;padding:14px 18px;border-radius:18px;background:var(--card);border:2px solid transparent;width:100%;text-align:left;margin-bottom:10px}
.unit.on{border-color:var(--blue)}
.unit small{display:block;color:var(--mut);font-size:13px}
.risk{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:6px}.risk i{display:block;height:100%;border-radius:9px}
.eqd{border:1.5px solid var(--line);border-radius:26px;padding:24px;background:var(--card)}
.met{background:var(--bg2);border-radius:16px;padding:14px 16px}.met small{display:block;color:var(--mut);font-size:13px}.met b{font-size:20px;font-weight:500}
/* performance */
.kp4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kp{border:1.5px solid var(--line);border-radius:24px;padding:22px}
.kp b{display:block;font-size:42px;font-weight:500;letter-spacing:-.03em;margin:16px 0 4px}
.kp small{font-size:13px;color:var(--mut)}
.kp.blue{background:var(--blue);color:#fff;border-color:var(--blue)}.kp.blue small{color:rgba(255,255,255,.8)}
.kp.lime{background:var(--lime);color:#111;border-color:var(--lime)}.kp.lime small{color:#333}
.g-pf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;margin-top:14px}
.wbars{display:flex;gap:12px;align-items:flex-end;height:330px;margin-top:20px;position:relative}
.wbars button{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:8px;position:relative}
.wbars i{width:100%;border-radius:10px;background:#CDE8DC;transition:height .45s cubic-bezier(.2,.8,.2,1)}
[data-theme=dark] .wbars i{background:#1F4A38}
.wbars button.on i{background:var(--acc)}
.wbars span{font-size:13px;color:var(--soft)}
.tipb{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#121418;color:#fff;border-radius:12px;padding:8px 14px;font-size:14px;white-space:nowrap;z-index:3;pointer-events:none}
.tipb small{display:block;color:#A3A9B3;font-size:12.5px}
.tech{display:grid;grid-template-columns:34px 1fr 52px;gap:12px;align-items:center;padding:10px 0}
.tech img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.tbar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:6px}.tbar i{display:block;height:100%;background:var(--blue);border-radius:9px;transition:width .5s}
.chk-li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.chk-li .bx{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.chk-li.done .bx{background:var(--acc);border-color:var(--acc);color:#fff}.chk-li.done span{text-decoration:line-through;color:var(--mut)}
.chk-li .bx .i{width:14px;height:14px;stroke-width:3}
.mnav{display:none}
@media (max-width:1100px){.jobs{grid-auto-columns:calc((100% - 14px)/2)}.g-wo,.g-fl,.g-eq,.g-pf{grid-template-columns:minmax(0,1fr)}.kp4{grid-template-columns:1fr 1fr}.search input{width:200px}.me div{display:none}.g-sc{grid-template-columns:minmax(0,1fr)}.ulist{display:flex;gap:10px;overflow-x:auto}.ulist .ucard{min-width:220px}}
@media (max-width:900px){
 .app{padding:0}.shell{grid-template-columns:1fr;border-radius:0;min-height:100vh}.rail{display:none}.main{margin:0;border-radius:0;padding:14px 16px 96px}
 .search{display:none}.top .logo{margin-right:auto}
 .jobs{grid-auto-columns:86%}
 .mnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--card);border-top:1px solid var(--line);justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
 .mnav a{display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--mut);padding:4px 6px}.mnav a.on{color:var(--acc)}
 .gscroll{overflow-x:auto}.grid{min-width:760px}
 .map{min-height:520px}
 .kp b{font-size:30px}
 .vis .r{grid-template-columns:minmax(0,1fr) 70px}.vis .r .tcol{display:none}
}

.rail .i{width:22px;height:22px}
.pc{width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
@media (max-width:900px){.map{min-height:0;padding:340px 10px 10px}.mcard{position:relative;left:auto;right:auto;bottom:auto}}
.map{min-height:0;aspect-ratio:7/6;align-self:start}
@media (max-width:900px){.map{aspect-ratio:auto;padding:0 0 10px}.map .geo{position:relative;aspect-ratio:7/6}.mcard{margin:0 10px}}
@media (max-width:900px){.map .geo{position:relative!important;inset:auto!important}}
@media (max-width:900px){.vanb{width:40px;height:40px}.vanb img{width:28px;height:28px}}
