:root{
  --bg:#031017;
  --panel:#0a2230;
  --line:#2a6075;
  --accent:#4ed8ff;
  --text:#f5fbff;
  --muted:#a9c4d0;
  --danger:#ffb4a8;
  --ok:#20aa66;
  --warn:#b67500;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Tahoma,"Segoe UI",sans-serif}
button,a,input{font:inherit}button{cursor:pointer;touch-action:manipulation}
.skip-link{position:fixed;top:-60px;right:12px;z-index:200;background:#fff;color:#082330;padding:10px 14px;border-radius:0 0 10px 10px}.skip-link:focus{top:0}
.app{position:relative;width:100vw;height:100dvh;min-height:100dvh;overflow:hidden;background:var(--bg)}
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:max(8px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left));background:linear-gradient(180deg,#03131eef 0%,#03131ecf 72%,#03131e00 100%);border-bottom:1px solid #4ed8ff22;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand>div{display:grid;gap:2px;min-width:0}.brand strong{font-size:16px;letter-spacing:.02em}.brand span{font-size:11px;color:#9fc9d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-mark{width:38px;height:38px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.7;filter:drop-shadow(0 0 9px #4ed8ff55)}
.system-state{display:flex;align-items:center;gap:7px;border:1px solid #2f6679;background:#06212dcc;padding:7px 10px;border-radius:999px;font-size:11px;white-space:nowrap}.system-state i{width:8px;height:8px;border-radius:50%;background:#37d884;box-shadow:0 0 12px #37d884}.system-state span{color:#88aeba}.system-state b{font-weight:800;color:#dfffee}.system-state.offline i{background:#e59b3b;box-shadow:0 0 12px #e59b3b}.system-state.offline b{color:#ffd7a4}
.tools{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.tool{min-width:44px;min-height:42px;border:1px solid #2b5d70;color:var(--text);background:#082633d9;border-radius:10px;padding:0 12px;backdrop-filter:blur(8px)}.tool:hover,.tool:focus-visible{border-color:var(--accent);outline:2px solid transparent;background:#0e3546}.tool.dashboard{min-width:118px}.tool.logout{border-color:#75464c;color:#ffe1dc}.icon-tool{font-size:18px}
#officeMain{position:fixed;inset:0;z-index:1;padding:0;margin:0;display:block;overflow:hidden}
.office-intro{position:fixed;z-index:15;top:88px;right:24px;max-width:min(460px,calc(100vw - 48px));padding:13px 15px;border:1px solid #54d6ff35;border-radius:14px;background:#03151f9e;backdrop-filter:blur(10px);pointer-events:none;box-shadow:0 16px 40px #0004}.office-intro>div{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.eyebrow{display:block;color:#76ddff;font-size:10px;letter-spacing:.15em;font-weight:800}.office-intro h1{margin:2px 0 0;font-size:22px}.office-intro p{margin:6px 0 0;color:#b5ced8;font-size:12px;line-height:1.65}
.stage-shell{position:absolute;inset:0;width:100vw;height:100dvh;min-width:0;overflow:hidden;overscroll-behavior:none}
.stage{position:absolute;inset:0;width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;background:#050e13;overflow:hidden;box-shadow:none;transform-origin:center center;transition:transform .18s ease;isolation:isolate}
.stage img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;user-select:none;-webkit-user-drag:none;filter:none;z-index:0}
.cinematic-grade,.grid-field,.scanline,.network-layer,.office-status{pointer-events:none}
.cinematic-grade{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 48%,transparent 28%,#00101838 70%,#001018a8 100%),linear-gradient(180deg,#00111c20 0%,transparent 35%,#00111b55 100%)}
.grid-field{position:absolute;inset:0;z-index:2;opacity:.12;background-image:linear-gradient(#62dcff33 1px,transparent 1px),linear-gradient(90deg,#62dcff33 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent 5%,#000 35%,#000 84%,transparent 100%)}
.scanline{position:absolute;z-index:3;left:0;right:0;height:2px;top:18%;background:linear-gradient(90deg,transparent,#59dcff99,transparent);box-shadow:0 0 22px #59dcff70;animation:scan-office 9s linear infinite;opacity:.45}
@keyframes scan-office{0%{translate:0 -18vh}100%{translate:0 92vh}}
.network-layer{position:absolute;inset:0;z-index:4;width:100%;height:100%;fill:none;stroke:#66ddff;stroke-width:1.15;opacity:.28;filter:drop-shadow(0 0 5px #4ed8ff)}.network-layer circle{fill:#c3f6ff;stroke:none;filter:drop-shadow(0 0 6px #4ed8ff)}
.office-status{position:absolute;z-index:8;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;align-items:end;gap:0 8px;padding:9px 12px;border:1px solid #4ed8ff55;border-radius:10px;background:#031923bd;backdrop-filter:blur(10px);direction:ltr}.office-status span{grid-column:1/-1;color:#65dcff;font-size:9px;letter-spacing:.16em}.office-status b{font-size:23px;line-height:1;color:white}.office-status small{font-size:9px;color:#9fc5d3;margin-bottom:2px}
.hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);min-width:24px;min-height:24px;border:1.5px solid transparent;border-radius:45% 45% 28% 28%;background:transparent;color:white;padding:0;z-index:10}.hotspot::before{content:"";position:absolute;width:7px;height:7px;bottom:8px;left:50%;translate:-50% 0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #18333e88;opacity:.85}.hotspot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 #4ed8ff99;transition:.16s}.hotspot:hover,.hotspot:focus-visible{outline:none;border-color:#8de8ff;background:#27c9ff18}.hotspot:hover::after,.hotspot:focus-visible::after{box-shadow:0 0 0 4px #4ed8ff30,0 0 28px #20bfffa0}.hotspot.unassigned{opacity:.38}.hotspot.unassigned::before{background:#93a7af;box-shadow:none}.tag{position:absolute;left:50%;bottom:4px;translate:-50% 0;background:#02131eee;border:1px solid #57d7ff;border-radius:8px;padding:5px 8px;white-space:nowrap;font-size:12px;font-weight:700;opacity:0;transform:translateY(7px);transition:.16s;pointer-events:none;box-shadow:0 8px 20px #0008}.hotspot:hover .tag,.hotspot:focus-visible .tag{opacity:1;transform:none}
.hint{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:20;background:#031923d9;border:1px solid #2d6275;border-radius:12px;padding:9px 13px;font-size:12px;color:var(--muted);backdrop-filter:blur(10px);max-width:min(460px,calc(100vw - 36px));box-shadow:0 12px 28px #0005}.hint-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:7px;background:#45dd88;box-shadow:0 0 10px #45dd88}
.drawer{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) min(540px,94vw);background:#0009;opacity:0;visibility:hidden;transition:.2s}.drawer.open{opacity:1;visibility:visible}.drawer-panel{grid-column:2;background:#f6f8fa;color:#15252c;height:100%;max-height:100dvh;transform:translateX(105%);transition:.25s cubic-bezier(.2,.8,.2,1);display:grid;grid-template-rows:auto 1fr;box-shadow:-20px 0 60px #0008;min-width:0}.drawer.open .drawer-panel{transform:none}.drawer-head{padding:18px 20px;background:linear-gradient(135deg,#062536,#0b3b50);color:white;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:max(18px,env(safe-area-inset-top))}.drawer-head>div{min-width:0}.drawer-kicker{display:block;font-size:9px;letter-spacing:.15em;color:#7ce0ff;margin-bottom:4px}.drawer-head strong,.drawer-head small{overflow-wrap:anywhere}.drawer-head strong{display:block;font-size:20px}.drawer-head small{display:block;color:#9dd7ea;margin-top:4px}.close{width:44px;height:44px;border:1px solid #ffffff55;border-radius:10px;background:transparent;color:#fff;font-size:25px;flex:0 0 auto}.workspace{padding:20px;overflow:auto;overscroll-behavior:contain;padding-bottom:max(20px,env(safe-area-inset-bottom))}.status{display:inline-flex;gap:7px;align-items:center;background:#dff7ea;color:#13643b;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:700}.status.warn{background:#fff0d5;color:#7b4d00}.dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}.status.warn .dot{background:#d59518}.card{margin-top:16px;background:white;border:1px solid #dce5e9;border-radius:13px;padding:16px;box-shadow:0 8px 22px #17313b10;min-width:0}.card h3{margin:0 0 10px;font-size:17px}.card p{margin:0;color:#54666f;line-height:1.75}.meta{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;margin-top:12px;font-size:13px}.meta dt{color:#71828a}.meta dd{margin:0;font-weight:700;overflow-wrap:anywhere}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{display:inline-flex;padding:5px 8px;border-radius:999px;background:#edf3f6;color:#174457;font-size:12px;border:1px solid #d5e2e7;max-width:100%;overflow-wrap:anywhere}.task{border:1px solid #e0e7ea;border-radius:10px;padding:11px;margin-top:9px;min-width:0}.task-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.task-title{font-weight:800;min-width:0;overflow-wrap:anywhere}.task-state{font-size:11px;padding:4px 7px;border-radius:999px;background:#edf3f6;white-space:nowrap}.task small{display:block;color:#6b7b82;margin-top:7px;line-height:1.55;overflow-wrap:anywhere}.empty{color:#77878e;font-size:13px;padding:12px 0}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat{padding:13px;border-radius:11px;background:#edf3f6;min-width:0}.stat strong{display:block;font-size:22px;color:#0d6e8e}.stat span{font-size:12px;color:#536871}.audit{border-right:3px solid #b7cbd3;padding:0 12px 11px 0;margin-top:10px}.audit strong{font-size:13px}.audit small{display:block;color:#78888f;margin-top:4px;direction:ltr;text-align:right;overflow-wrap:anywhere}.error{color:#8b2418;background:#ffe9e5;border:1px solid #ffc8bf;padding:10px;border-radius:8px;margin-top:12px}.loading{padding:24px;text-align:center;color:#60747e}.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.primary,.secondary{min-height:44px;border-radius:10px;padding:8px 12px;font-weight:700}.primary{border:0;background:#087da4;color:white}.secondary{border:1px solid #b7cbd3;background:white;color:#174457}
.login{position:fixed;inset:0;z-index:100;background:#031019ee;display:grid;place-items:center;padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));backdrop-filter:blur(12px)}.login[aria-hidden="true"]{display:none}.login-card{width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#f7fafb;color:#18333e;border:1px solid #31596a;border-radius:18px;padding:28px;box-shadow:0 30px 90px #000a}.login-mark{display:block;width:60px;height:60px;margin:auto;fill:none;stroke:#087da4;stroke-width:2}.login-card h1{text-align:center;margin:12px 0 8px}.login-card .eyebrow{text-align:center;color:#087da4}.login-card p{color:#60747e;line-height:1.75;font-size:14px}.login-card label{display:block;margin:18px 0 7px;font-weight:700}.login-card input{width:100%;height:46px;border:1px solid #b9cbd3;border-radius:10px;padding:0 12px;background:white;color:#142c36}.login-submit{width:100%;margin-top:12px}.login-error{display:none}
body.lite-mode .cinematic-grade,body.lite-mode .grid-field,body.lite-mode .scanline,body.lite-mode .network-layer{display:none}body.lite-mode .stage img{filter:none}body.lite-mode .office-status{opacity:.72}
@media(max-width:1024px){.topbar{gap:8px;padding-inline:12px}.brand span{max-width:210px}.system-state span{display:none}.office-intro{top:78px;right:14px}.drawer{grid-template-columns:minmax(0,1fr) min(500px,96vw)}}
@media(max-width:780px){.topbar{min-height:58px;padding:7px 9px;align-items:center}.brand span{display:none}.brand-mark{width:34px;height:34px}.brand strong{font-size:14px}.system-state{padding:6px 8px}.system-state span{display:none}.tools{gap:5px}.tool{min-width:42px;min-height:40px;padding-inline:8px}.tool.dashboard{min-width:42px;font-size:0}.tool.dashboard::after{content:"⌘";font-size:18px}.tool.logout{font-size:0}.tool.logout::after{content:"↪";font-size:18px}#minus,#plus,#fit,#zoomText{display:none}.office-intro{display:none}.stage{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;transform:none!important}.stage img{object-fit:cover}.tag{display:none}.office-status{left:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:7px 9px}.office-status span{font-size:8px}.office-status b{font-size:19px}.hint{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));text-align:center;max-width:none}.drawer{grid-template-columns:1fr;align-items:end}.drawer-panel{grid-column:1;width:100%;height:min(86dvh,760px);border-radius:18px 18px 0 0;transform:translateY(105%);box-shadow:0 -20px 60px #0008}.drawer.open .drawer-panel{transform:none}.drawer-head{padding:14px 16px}.workspace{padding:16px}.stats{grid-template-columns:1fr}.meta{grid-template-columns:96px minmax(0,1fr)}.card{padding:14px}.task-head{flex-direction:column;gap:6px}.login{padding:12px}.login-card{padding:20px;border-radius:14px}.login-card h1{font-size:22px}.hotspot{min-width:28px;min-height:28px}}
@media(max-width:480px){.topbar{grid-template-columns:auto 1fr auto}.brand>div{display:none}.system-state{margin-inline:auto}.system-state b{font-size:10px}.hint{display:none}.office-status{display:none}.drawer-panel{height:92dvh}.workspace{padding:12px}.meta{grid-template-columns:1fr}.meta dt{font-weight:700;margin-top:4px}.stats{gap:8px}.primary,.secondary{width:100%}}
@media(max-width:360px){.tool{min-width:39px;min-height:39px;padding-inline:6px}.brand-mark{width:31px;height:31px}.system-state{padding:5px 7px}.login-card{padding:16px}}
@media(orientation:landscape) and (max-height:520px){.topbar{min-height:50px}.brand>div,.system-state{display:none}.hint,.office-intro,.office-status{display:none}.drawer-panel{height:100dvh;border-radius:0}.login-card{max-height:94dvh}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.scanline{animation:none!important;display:none}}