:root{--fb:'Geist',system-ui,sans-serif;--fd:'Geist',system-ui,sans-serif;--fdl:-.04em;--bg:#E6E8EC;--bg2:#DDE0E5;--sbg:#EEF0F3;--navbg:rgba(238,240,243,.85);--card:#F6F7F9;--ink:#0F1113;--mut:#6A707A;--soft:#9EA4AD;--line:#DADDE2;--chip:#E9EBEE;--acc:#13A08A;--acc2:#D7F0EA;--peri:#7C8CF0;--peri2:#E4E7FD;--amber:#F0A23B;--ok:#13A08A;--ok2:#D7F0EA;--warn:#C9831C;--warn2:#FCEFD9;--bad:#E5484D;--bad2:#FCE5E5;--r:28px;--shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -26px rgba(30,40,60,.35);color-scheme:light}
[data-theme=dark]{--bg:#0E1012;--bg2:#15181B;--sbg:#0B0D0F;--navbg:rgba(11,13,15,.85);--card:#1A1D21;--ink:#EEF0F2;--mut:#9AA1AA;--soft:#6C737C;--line:#2A2E33;--chip:#23272C;--acc2:#12352F;--peri2:#262B4A;--ok2:#12352F;--warn2:#3A2D14;--bad2:#3A1A1C;--shadow:0 18px 40px -26px rgba(0,0,0,.8);color-scheme:dark}
.app{min-height:100vh;padding:20px}
.frame{max-width:1440px;margin:0 auto;border-radius:36px;background:var(--bg);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 80px -50px rgba(30,40,60,.35);padding:26px 34px 40px;display:grid;grid-template-columns:52px 1fr;gap:0 24px;min-height:calc(100vh - 40px)}
[data-theme=dark] .frame{box-shadow:none}
.top{grid-column:1/-1;display:flex;align-items:center;gap:14px;height:76px;margin-bottom:22px}
.top .logo svg{width:44px;height:44px}
.top h1{font-size:clamp(30px,3.6vw,52px);margin-left:20px;white-space:nowrap}
.search{position:relative;margin-left:auto}
.search input{height:48px;width:260px;border-radius:99px;background:transparent;border:1px solid transparent;padding:0 16px 0 44px;outline:0}
.search input:focus{background:var(--card);border-color:var(--line)}
.search>.i{position:absolute;left:16px;top:15px;color:var(--mut)}
.search .pop{left:0;right:auto;width:340px}
.iconb{background:var(--card);box-shadow:var(--shadow);width:50px;height:50px}
.me{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:99px;background:var(--card);box-shadow:var(--shadow);text-align:left}
.me img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.me small{display:block;font-size:11px;color:var(--mut)}.me b{font-weight:500;font-size:16px;line-height:1.1}
.side{display:flex;flex-direction:column;gap:18px;padding-top:4px}
.side a{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:var(--ink);position:relative}
.side a.on{background:var(--card);box-shadow:var(--shadow)}
.side a .b{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
.side a:hover:not(.on){background:rgba(255,255,255,.35)}
.view{min-width:0;animation:fade .3s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.glass{background:linear-gradient(180deg,var(--card),rgba(246,247,249,.55));border-radius:var(--r);box-shadow:var(--shadow)}
[data-theme=dark] .glass{background:var(--card)}
h2.t{font-size:clamp(24px,2.2vw,34px)}
.g-ov{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
.hub{position:relative;min-height:500px}
.hub .tower{position:absolute;left:50%;top:10px;transform:translateX(-46%);height:470px;width:auto;pointer-events:none}
.hub .lbl{position:absolute}
.hub .lbl small{display:block;color:var(--mut);font-size:14px}
.hub .lbl b{font-weight:400;font-size:19px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);font-weight:500}
.spin{animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.hbars{display:flex;align-items:flex-end;gap:0;height:220px;margin-top:10px;flex:1}
.hbars button{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.hbars .v{font-size:20px;margin-bottom:6px}
.hbars i{width:100%;background:linear-gradient(180deg,#fff,rgba(255,255,255,.2));transition:height .45s cubic-bezier(.2,.8,.2,1)}
[data-theme=dark] .hbars i{background:linear-gradient(180deg,#3A3F46,rgba(58,63,70,.2))}
.hbars button.peak i{background:linear-gradient(180deg,#8ED9CB,rgba(19,160,138,.15));border-top:4px solid var(--acc)}
.hbars button.slip i{background:linear-gradient(180deg,#A9B3F6,rgba(124,140,240,.15));border-top:4px solid var(--peri)}
.hbars button.on i{outline:2px solid var(--ink);outline-offset:-2px}
.hlab{display:flex;margin-top:10px;color:var(--soft);font-size:14px}.hlab span{flex:1;text-align:center}
.tipb{position:absolute;z-index:3;background:#121416;color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;white-space:nowrap;pointer-events:none;bottom:calc(100% + 6px)}
.tipb small{display:block;color:#A0A6AE;font-size:12px}
.esc-li{display:grid;grid-template-columns:52px 1fr 30px;gap:14px;align-items:center;padding:10px 0}
.esc-li .ph{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:600;font-size:18px}
.chk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--peri);color:#fff}
.chk.add{background:var(--ink);color:var(--card)}
.chk .i{width:15px;height:15px;stroke-width:2.4}
.cover{position:relative;height:150px;margin-top:6px}
.cover .ax{display:flex;justify-content:space-between;color:var(--mut);font-size:15px}
.cover .ev{position:absolute;display:flex;align-items:center}
.cover .ev .ln{display:block;height:2px;background:var(--ink);flex:1;position:relative}
.cover .ev .ln::before,.cover .ev .ln::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.cover .ev .ln::before{left:-4px}.cover .ev .ln::after{right:-4px}
.cover .ev .tag{padding:6px 14px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);margin:0 6px;white-space:nowrap}
.cover .bar{position:absolute;bottom:0;height:18px;border-radius:8px 8px 0 0}
/* inbox */
.g-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,540px);gap:0;align-items:start}
.tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs2 button{padding:10px 16px;border-radius:99px;font-weight:500;color:var(--mut)}
.tabs2 button b{font-weight:400;color:var(--soft);margin-left:6px}
.tabs2 button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.tlist{padding:14px 12px}
.tr{display:grid;grid-template-columns:48px minmax(0,1.1fr) minmax(0,1.5fr) 90px;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;cursor:pointer;width:100%;text-align:left;border-bottom:1px solid var(--line)}
.tr:hover{background:rgba(255,255,255,.45)}[data-theme=dark] .tr:hover{background:var(--chip)}
.tr.on{background:var(--card);box-shadow:var(--shadow);border-color:transparent}
.tr.solved{opacity:.55}
.lt{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:600;font-size:18px}
.tr small{display:block;color:var(--mut);font-size:13px}
.th{display:grid;grid-template-columns:48px minmax(0,1.1fr) minmax(0,1.5fr) 90px;gap:16px;padding:10px 16px;color:var(--mut);font-size:13px}
.tp{background:var(--card);border-radius:30px;box-shadow:0 30px 60px -30px rgba(30,40,60,.45);padding:28px;margin-left:-14px;position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-height:600px}
.msg{border-radius:18px;background:var(--bg);padding:18px 20px;line-height:1.6}
[data-theme=dark] .msg{background:var(--chip)}
.hint{display:flex;gap:10px;padding:12px 16px;border-radius:14px;background:var(--acc2);color:var(--acc);font-size:14px}
.draft{border:1.5px solid var(--ink);border-radius:22px;padding:18px}
.draft textarea{width:100%;border:0;background:none;outline:0;resize:vertical;min-height:150px;line-height:1.6;font-size:15px}
/* routing */
.g-rt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
.cond{display:grid;grid-template-columns:1fr 60px 1.4fr 36px;gap:10px;margin-bottom:10px}
.cond .k{height:48px;border-radius:12px;background:var(--card);border:1px solid var(--line);padding:0 12px;outline:0;width:100%}
.cond .is{display:grid;place-items:center;color:var(--mut);border-radius:12px;border:1px solid var(--line)}
.lbl2{font-size:13px;letter-spacing:.08em;color:var(--mut);margin:22px 0 10px}
.rmap{width:100%;height:auto}
.rmap .node rect{fill:var(--card);filter:drop-shadow(0 8px 14px rgba(30,40,60,.12))}
.rmap text{fill:var(--ink);font-family:var(--fb)}
.rule{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
/* planner */
.g-pl{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.shift{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;height:62px}
.track{position:relative;height:40px}
.sb{position:absolute;top:0;bottom:0;border-radius:10px;background:var(--acc2);border:1px solid #9FDCCF;color:#0E7F6D;font-size:14px;display:flex;align-items:center;padding:0 12px;white-space:nowrap;transition:left .5s,width .5s,background .3s}
.sb.hot{background:var(--acc);color:#fff;border-color:var(--acc)}
.sb.oc{background:repeating-linear-gradient(45deg,var(--chip),var(--chip) 6px,transparent 6px,transparent 12px);border-style:dashed;border-color:var(--soft);color:var(--mut)}
.gap{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(240,162,59,.28),rgba(240,162,59,.28) 6px,transparent 6px,transparent 12px);border-left:2px solid var(--amber);border-right:2px solid var(--amber)}
.ring{width:170px;height:170px}
/* reports */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{padding:22px 24px}
.kpi b{font-size:44px;font-weight:500;letter-spacing:-.04em}.kpi b small{font-size:18px;margin-left:3px}
.g-rp{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:18px;margin-top:18px}
.lg{display:flex;gap:16px;font-size:14px;color:var(--mut)}.lg i{display:inline-block;width:14px;height:2px;margin-right:6px;vertical-align:middle}
.mnav{display:none}
@media (max-width:1100px){.g-ov,.g-rt,.g-pl,.g-rp{grid-template-columns:minmax(0,1fr)}.g-in{grid-template-columns:minmax(0,1fr)}.tp{display:none}.kpis{grid-template-columns:1fr 1fr}.search input{width:180px}.top h1{margin-left:8px}}
@media (max-width:900px){
 .app{padding:0}.frame{border-radius:0;grid-template-columns:1fr;padding:14px 16px 96px}
 .side,.search,.me div{display:none}.me{padding:4px}
 .top{height:auto;margin-bottom:16px}.top .logo svg{width:34px;height:34px}.top h1{font-size:28px;margin-left:4px;margin-right:auto}
 .iconb{width:42px;height:42px}
 .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)}
 .hub{min-height:420px}.hub .tower{height:380px}
 .th{display:none}.tr{grid-template-columns:44px minmax(0,1fr) auto}.tr .sj{grid-column:2/4;grid-row:2;font-size:14px}
 .cond{grid-template-columns:1fr 1fr 36px}.cond .is{display:none}
 .shift{grid-template-columns:90px 1fr}.shift .nm{font-size:13px}
 .kpis{grid-template-columns:1fr 1fr;gap:12px}.kpi b{font-size:32px}
}

.hub .tower,.vmod{mix-blend-mode:multiply}
[data-theme=dark] .hub .tower,[data-theme=dark] .vmod{mix-blend-mode:normal;border-radius:22px;opacity:.92}
.hub .tower{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.vmod{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.cond>*{min-width:0}.cover{overflow:hidden}
.tp>.row:first-child{flex-wrap:wrap}
@media (max-width:900px){.fc{grid-template-columns:90px 1fr!important}.hub .lbl b{font-size:16px}}
.frame{grid-template-columns:52px minmax(0,1fr)}
@media (max-width:900px){.frame{grid-template-columns:minmax(0,1fr)}.top{gap:6px}.top h1{font-size:23px;white-space:normal;line-height:1.05}.iconb{width:38px;height:38px}.me img{width:36px;height:36px}.me>.i{display:none}}