:root{--bg:#fff6e0;--card:#fff;--ink:#2b2140;--mut:#7a6f93;--line:#2b2140;--floor:#ffe3a3;--wall:#ffb3c7;--acc:#ff5d8f;--ok:#2ecc71;--wait:#ffb400;--idle:#9aa3b5}
:root[data-theme=dark]{--bg:#14112a;--card:#221c42;--ink:#f3eeff;--mut:#a99fcf;--line:#000;--floor:#3a2f6b;--wall:#5b3a8a;--acc:#ff7ab0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 ui-monospace,Menlo,monospace;padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:12px 16px}
h1{font-size:18px;margin:0}
.bar{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:3px solid var(--line);background:var(--card);color:var(--ink);padding:6px 10px;font:inherit;cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.pill.on{background:var(--acc);color:#fff}
.pill.sm{padding:2px 8px;font-size:12px}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.office{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 16px 24px;max-width:980px;margin:auto}
.room{position:relative;border:4px solid var(--line);background:var(--floor);cursor:pointer;box-shadow:5px 5px 0 var(--line);aspect-ratio:4/3;overflow:hidden}
.room.big{grid-column:span 2;aspect-ratio:8/3}
.room canvas.bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.sprite{position:absolute;image-rendering:pixelated;width:9%;min-width:32px;aspect-ratio:8/12;height:auto}
.name{position:absolute;left:0;bottom:0;background:var(--line);color:#fff;padding:2px 8px;font-size:12px}
.dot{position:absolute;right:6px;top:6px;width:12px;height:12px;border:2px solid var(--line)}
.bubble{position:absolute;left:8px;top:8px;right:28px;background:#fff;color:#2b2140;border:3px solid #2b2140;padding:4px 6px;font-size:11px;line-height:1.25}
.bubble:after{content:"";position:absolute;left:18px;bottom:-11px;border:5px solid transparent;border-top:8px solid #2b2140}
.working .sprite{animation:type .5s steps(2) infinite}
.waiting .sprite{animation:hop .8s steps(4) infinite}
.idle .sprite{opacity:.8;transform:rotate(-8deg)}
@keyframes type{50%{transform:translateY(-3px)}}
@keyframes hop{50%{transform:translateY(-10px)}}
.zzz{position:absolute;font-weight:bold;left:52%;top:25%;animation:hop 1.6s steps(3) infinite}
#panel{position:fixed;inset:auto 0 0 0;max-height:80vh;overflow:auto;background:var(--card);border-top:4px solid var(--line);padding:16px;transform:translateY(110%);transition:transform .2s;z-index:5}
#panel.open{transform:none}
#panel h2{margin:0 0 8px}
.proj{margin:12px 0 4px;font-weight:bold;color:var(--acc)}
.task{display:flex;gap:8px;justify-content:space-between;align-items:center;border:2px solid var(--line);padding:6px 8px;margin:4px 0}
.task small{display:block;color:var(--mut)}
.tag{font-size:11px;padding:1px 6px;border:2px solid var(--line);white-space:nowrap;color:#2b2140}
.tag.working{background:var(--ok)}.tag.waiting{background:var(--wait)}.tag.idle{background:var(--idle)}
label{display:block;margin:8px 0 2px;color:var(--mut)}
input,select,textarea{width:100%;padding:8px;border:3px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.chk{display:flex;align-items:center;gap:6px;margin:3px 0;color:var(--ink)}.chk input{width:auto}
.login{max-width:340px;margin:12vh auto;padding:0 16px}
.err{color:#d6204a;margin:8px 0;min-height:1.2em}
.note{max-width:980px;margin:0 auto 100px;padding:0 16px;color:var(--mut);font-size:12px}
.badge{background:#d6204a;color:#fff;padding:0 6px;margin-left:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.office{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.working .sprite,.waiting .sprite,.zzz{animation:none}}