/* DAP STUDIO V9 — night-glass UI for the WebGL virtual office */
:root{
  --bg:#070d18; --panel:rgba(12,22,38,.82); --panel-solid:#0f1b2d; --panel2:rgba(20,34,56,.88); --line:rgba(140,185,255,.16); --line2:rgba(140,185,255,.28);
  --text:#eaf2ff; --muted:#93a8c6; --blue:#347df8; --blue2:#5aa2ff; --cyan:#38d6ff; --green:#22e08a; --amber:#ffb547; --red:#ff4d5e; --purple:#b07cff; --gold:#f5c542;
  --radius:14px; --shadow:0 10px 30px rgba(0,6,20,.45); --sky:#8dc8fa;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
[hidden]{display:none!important}
.shell{display:flex;flex-direction:column;height:100dvh;min-width:0;background:radial-gradient(1200px 300px at 30% -80px,#16305a 0%,transparent 70%),var(--bg)}

/* ---------- Top bar ---------- */
.topbar{flex:none;display:flex;align-items:stretch;gap:10px;padding:10px 12px 8px;z-index:30;min-width:0}
.brand-card{display:flex;align-items:center;gap:11px;padding:8px 12px 8px 9px;border-radius:var(--radius);border:1px solid var(--line2);background:linear-gradient(135deg,rgba(23,42,74,.95),rgba(10,18,32,.95));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);white-space:nowrap}
.brand-card:hover{border-color:#4f8dff}
.brand-tile{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#cfe6ff;background:radial-gradient(circle at 35% 30%,#5aa2ff,#1d4fb8 60%,#0f2a66);box-shadow:0 0 18px rgba(80,150,255,.55),inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden}
.brand-tile img,.brand-logo{width:100%;height:100%;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.brand-text strong{font-size:19px;letter-spacing:.5px;font-weight:900}
.brand-text small{font-size:10.5px;letter-spacing:2.2px;color:#9fb9e0;margin-top:3px;font-weight:700}
.brand-ver{font-size:12px;font-weight:900;color:#9fd0ff;border:1px solid #3d79d8;border-radius:8px;padding:4px 7px;background:rgba(52,125,248,.15)}
.kpis{display:flex;gap:8px;min-width:0;flex:1;overflow:hidden}
.kpi{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 0;max-width:210px;padding:8px 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.kpi-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(80,140,255,.16);color:#8fc0ff}
.kpi-ico svg{width:19px;height:19px}
.kpi.green .kpi-ico{background:rgba(34,224,138,.14);color:#4cf0a4}.kpi.red .kpi-ico{background:rgba(255,77,94,.14);color:#ff8090}.kpi.gold .kpi-ico{background:rgba(245,197,66,.15);color:#ffd668}.kpi.cyan .kpi-ico{background:rgba(56,214,255,.14);color:#6fe3ff}.kpi.purple .kpi-ico{background:rgba(176,124,255,.15);color:#c9a6ff}
.kpi-body{min-width:0;display:flex;flex-direction:column}
.kpi-body small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-body strong{font-size:18px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.kpi-body strong.up{color:#3ff0a1}.kpi-body strong.down{color:#ff6b78}
.kpi-body em{font-style:normal;font-size:10px;color:#7f98ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-body em.up{color:#3fd391}.kpi-body em.down{color:#ff8a95}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.mode-pill{font-size:10px;font-weight:800;letter-spacing:.4px;padding:5px 9px;border-radius:20px;border:1px solid #6681a7;background:rgba(32,51,74,.8);white-space:nowrap}
.mode-pill.live{background:rgba(8,88,63,.8);border-color:#2de28f;color:#d7ffe9}.mode-pill.demo{background:rgba(100,66,31,.8);border-color:#eeb964;color:#ffe2a2}
.admin-btn{display:flex;align-items:center;gap:9px;height:100%;min-height:46px;padding:0 14px;border-radius:var(--radius);border:1px solid #d9a93a;background:linear-gradient(180deg,rgba(60,44,12,.9),rgba(28,20,6,.92));color:#ffe3a1;font-weight:800;box-shadow:0 0 0 1px rgba(255,200,80,.1),0 8px 24px rgba(0,0,0,.35),0 0 18px rgba(245,197,66,.18);white-space:nowrap}
.admin-btn:hover{border-color:#ffd56a;box-shadow:0 0 22px rgba(245,197,66,.35)}
.admin-btn .chev{font-size:20px;line-height:1;opacity:.8}

/* ---------- Room tabs ---------- */
.room-tabs{flex:none;display:flex;flex-wrap:wrap;gap:7px;padding:2px 12px 8px;z-index:29;max-height:140px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2c4468 transparent}
.tab{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:#cfe0f7;font-size:12.5px;font-weight:700;white-space:nowrap;backdrop-filter:blur(8px);transition:border-color .15s,background .15s,transform .15s}
.tab:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-1px)}
.tab .tab-ico{font-size:15px}
.tab .tab-count{font-size:10px;font-weight:800;color:#9fd0ff;background:rgba(52,125,248,.18);border-radius:8px;padding:1px 6px}
.tab.active{background:linear-gradient(180deg,#2f7cf6,#1d5ed6);border-color:#7db2ff;color:#fff;box-shadow:0 0 0 1px rgba(125,178,255,.4),0 0 22px rgba(52,125,248,.55)}
.tab.active .tab-count{background:rgba(255,255,255,.22);color:#fff}

/* ---------- Viewport ---------- */
.viewport{position:relative;flex:1;min-height:0;margin:0 12px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0b1424;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),var(--shadow);isolation:isolate}
.office-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
.office-canvas:active{cursor:grabbing}
.scene-labels,.agents-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.room-label,.agent-tag,.agent-bubble{position:absolute;left:0;top:0;will-change:transform}
.room-label{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(10,18,32,.86);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.4);color:#fff;font-size:12px;white-space:nowrap;transition:opacity .2s,border-color .2s}
.room-label:hover{border-color:var(--acc,#4aa3ff);box-shadow:0 0 0 1px var(--acc,#4aa3ff),0 6px 20px rgba(0,0,0,.45);z-index:5}
.room-label .rl-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;background:color-mix(in srgb,var(--acc,#4aa3ff) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#4aa3ff) 60%,transparent)}
.room-label .rl-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.room-label b{font-size:12px;font-weight:800}
.room-label small{display:flex;align-items:center;gap:5px;font-size:10px;color:#9fb4d2}
.room-label small i{width:6px;height:6px;border-radius:50%;background:#5b6b82}
.room-label.busy small i{background:var(--green);box-shadow:0 0 6px var(--green)}
.room-label.dimmed{opacity:.35}
.agent-tag{pointer-events:auto;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(8,15,27,.88);color:#fff;font-size:10.5px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.agent-tag i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.agent-tag.working i{background:var(--green);box-shadow:0 0 6px var(--green)}.agent-tag.break i{background:var(--amber);box-shadow:0 0 6px var(--amber)}.agent-tag.idle i{background:var(--blue2)}.agent-tag.offline i{background:var(--red)}.agent-tag.maintenance i{background:var(--purple)}
.agent-tag b{font-weight:800}
.agent-tag em{font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;padding:1px 5px;border-radius:6px;background:rgba(52,125,248,.3);color:#cfe3ff;max-width:92px;overflow:hidden;text-overflow:ellipsis}
.agent-tag.break em{background:rgba(255,181,71,.25);color:#ffe1ad}.agent-tag.offline em{background:rgba(255,77,94,.25);color:#ffc2c8}
.agent-tag:hover,.agent-tag.following{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 14px rgba(56,214,255,.45);z-index:6}
.agent-bubble{max-width:230px;padding:5px 9px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.95);color:#0f1d30;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 16px rgba(0,0,0,.35);animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:scale(.8)}}

/* HUD */
.hud-tl{position:absolute;left:12px;top:12px;z-index:10;display:flex;flex-direction:column;gap:9px;width:min(340px,calc(100% - 24px));pointer-events:none}
.hud-tl>*{pointer-events:auto}
.loc-chip{align-self:flex-start;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:11px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px);font-size:11.5px;letter-spacing:.5px;box-shadow:var(--shadow)}
.loc-chip b{font-weight:850}
.activity-card{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line2);backdrop-filter:blur(12px);box-shadow:var(--shadow),0 0 0 1px rgba(34,224,138,.05);overflow:hidden}
.live-dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,224,138,.18),0 0 12px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(34,224,138,.06),0 0 18px var(--green)}}
.activity-heading{display:flex;flex-direction:column;flex:1;min-width:0}
.activity-heading strong{font-size:15px;font-weight:850}
.activity-heading small{font-size:11px;color:#7fe6b4}
.activity-card.collapsed .activity-content{display:none}
.activity-tabs{display:flex;gap:4px;padding:0 10px 8px}
.activity-tabs button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:9px;padding:6px 4px;font-size:11px;font-weight:750;color:#b9cbe6}
.activity-tabs button.active{background:rgba(52,125,248,.22);border-color:#4f8dff;color:#fff}
.activity-list{max-height:min(46vh,380px);overflow:auto;padding:0 8px 6px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin;scrollbar-color:#2c4468 transparent}
.activity-card[data-size="large"] .activity-list{max-height:calc(100dvh - 330px)}
.feed-item{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:start;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid transparent;cursor:pointer;animation:slidein .3s ease}
.feed-item:hover{border-color:var(--line2);background:rgba(52,125,248,.1)}
@keyframes slidein{from{opacity:0;transform:translateX(-8px)}}
.av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;position:relative}
.av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;border:2px solid #0f1b2d;background:var(--muted)}
.av.working::after{background:var(--green)}.av.break::after{background:var(--amber)}.av.idle::after{background:var(--blue2)}.av.offline::after{background:var(--red)}.av.maintenance::after{background:var(--purple)}
.feed-item .ft{min-width:0;font-size:11.5px;line-height:1.35;color:#d7e4f7}
.feed-item .ft b{color:#fff}
.feed-item time{font-size:9.5px;color:#7088a8;font-variant-numeric:tabular-nums}
.feed-item.move .ft{color:#a9bcd8}
.agent-row{display:grid;grid-template-columns:28px 1fr 46px;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.035);cursor:pointer;border:1px solid transparent}
.agent-row:hover{border-color:var(--line2)}
.agent-row .ar-main{min-width:0}
.agent-row .ar-main div{display:flex;gap:6px;align-items:baseline}
.agent-row b{font-size:12px}
.agent-row .ar-role{font-size:9.5px;color:#89a2c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-row p{margin:2px 0 0;font-size:11px;color:#cfe0f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-row .ar-loc{font-size:9.5px;color:#7fa4d6}
.mini-progress{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.mini-progress i{display:block;height:100%;background:linear-gradient(90deg,#22e08a,#38d6ff);border-radius:5px;transition:width .6s}
.agent-row.break .mini-progress i{background:linear-gradient(90deg,#ffb547,#ffd56a)}
.agent-row.offline{opacity:.6}
.room-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.035);cursor:pointer;font-size:12px}
.room-row:hover{background:rgba(52,125,248,.12)}
.room-row .rr-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.room-row b{flex:1}
.room-row span{font-size:10.5px;color:#9fd0ff}
.room-row .bar{width:60px}
.activity-footer{display:flex;align-items:center;justify-content:space-between;padding:7px 12px 9px;border-top:1px solid var(--line);font-size:9.5px;letter-spacing:.6px;color:#7f98ba;font-weight:800}
.activity-footer button{border:1px solid var(--line);background:transparent;border-radius:7px;padding:2px 7px;color:#b9cbe6}
.hud-tr{position:absolute;right:12px;top:12px;z-index:10;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
.hud-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);backdrop-filter:blur(10px);color:#e1edff;font-size:12.5px;font-weight:750;box-shadow:var(--shadow);white-space:nowrap}
.hud-btn:hover{border-color:#6ea6ff;background:var(--panel2)}
.hud-btn.primary-glow{border-color:#4f9bff;box-shadow:0 0 0 1px rgba(79,155,255,.35),0 0 18px rgba(52,125,248,.4),var(--shadow)}
.hud-btn.on{background:linear-gradient(180deg,#2f7cf6,#1d5ed6);border-color:#7db2ff;color:#fff}
.zoom-ctl{position:absolute;left:12px;bottom:12px;z-index:10;display:flex;align-items:center;gap:4px;padding:5px;border-radius:13px;background:var(--panel);border:1px solid var(--line2);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.zoom-ctl button{width:34px;height:32px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:17px;font-weight:700}
.zoom-ctl button:hover{background:rgba(52,125,248,.25)}
.zoom-ctl span{min-width:52px;text-align:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:#cfe0f7}
.interior-hud{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:14px;background:var(--panel);border:1px solid var(--line2);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.interior-hud div{display:flex;flex-direction:column;align-items:center;min-width:170px}
.interior-hud strong{font-size:14px}.interior-hud small{font-size:10.5px;color:var(--muted)}
.interior-hud button{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:9px;padding:6px 11px;font-weight:800}
.interior-hud .exit{background:rgba(255,77,94,.16);border-color:rgba(255,77,94,.45);color:#ffd0d5}
.follow-chip{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:20px;background:rgba(10,30,45,.9);border:1px solid var(--cyan);box-shadow:0 0 18px rgba(56,214,255,.35);font-size:12px;font-weight:700}
.follow-chip button{border:0;border-radius:14px;padding:5px 10px;background:rgba(56,214,255,.2);color:#dff8ff;font-weight:800}
.room-popover{position:absolute;right:12px;top:62px;z-index:12;width:min(330px,calc(100% - 24px));border-radius:16px;background:rgba(10,19,33,.94);border:1px solid var(--line2);box-shadow:var(--shadow);backdrop-filter:blur(12px);padding:14px;animation:pop .2s ease}
.room-popover .rp-head{display:flex;gap:10px;align-items:center}
.room-popover .rp-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--acc,#4aa3ff) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#4aa3ff) 60%,transparent)}
.room-popover h3{margin:0;font-size:16px}
.room-popover p{margin:8px 0;font-size:12px;color:#b9cbe6;line-height:1.5}
.room-popover .close-room{margin-left:auto;align-self:flex-start;border:1px solid var(--line);background:transparent;border-radius:8px;padding:3px 8px}
.rp-stats{display:flex;gap:6px;margin:6px 0 8px}
.rp-stats span{flex:1;text-align:center;font-size:11px;padding:6px;border-radius:9px;background:rgba(255,255,255,.05)}
.rp-stats b{display:block;font-size:15px}
.rp-agents{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow:auto;margin-bottom:10px}
.rp-agent{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:5px 6px;border-radius:8px;background:rgba(255,255,255,.04);cursor:pointer}
.rp-agent:hover{background:rgba(52,125,248,.15)}
.rp-agent span{color:#9fb4d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.rp-actions{display:flex;gap:7px}
.rp-actions button{flex:1;border-radius:10px;padding:9px;font-size:12px;font-weight:800;border:1px solid var(--line2);background:rgba(255,255,255,.05)}
.rp-actions .enter-room{background:linear-gradient(180deg,#2f7cf6,#1d5ed6);border-color:#7db2ff}
.setup-banner{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);z-index:14;display:flex;gap:14px;align-items:center;max-width:min(720px,calc(100% - 24px));padding:12px 14px;border-radius:14px;background:rgba(40,26,10,.94);border:1px solid #c89a3c;box-shadow:var(--shadow)}
.setup-banner strong{font-size:13px;color:#ffe2a2}
.setup-banner p{margin:3px 0 0;font-size:11.5px;color:#f0d9b0;line-height:1.45}
.setup-actions{display:flex;gap:6px;flex:none}
.loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#13284a,#070d18 70%);font-size:13px;color:#b9cbe6;transition:opacity .5s}
.loading.done{opacity:0;pointer-events:none}
.spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(90,162,255,.2);border-top-color:#5aa2ff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.webgl-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#0b1424 center/cover no-repeat;color:#fff;z-index:4}

/* ---------- Status bar ---------- */
.statusbar{flex:none;display:flex;align-items:center;gap:12px;padding:8px 12px 10px;font-size:11.5px;color:#b9cbe6;min-width:0}
.legend{display:flex;gap:4px;padding:6px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.legend span{display:flex;align-items:center;gap:6px;padding:0 7px;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.working{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.break{background:var(--amber)}.dot.idle{background:var(--blue2)}.dot.offline{background:var(--red)}
.help{flex:1;text-align:center;color:#8ea6c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer-info{display:flex;align-items:center;gap:8px;margin-left:auto}
.connection-pill{padding:6px 11px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-weight:750;white-space:nowrap}
.connection-pill.online{border-color:rgba(34,224,138,.5);color:#9ff5c9}.connection-pill.offline{border-color:rgba(255,181,71,.55);color:#ffd98f}
.updated{padding:6px 11px;border-radius:12px;border:1px solid var(--line);background:var(--panel);white-space:nowrap}
.clock{font-variant-numeric:tabular-nums;color:#8ea6c6}

/* ---------- Buttons ---------- */
.primary,.secondary,.danger-line,.ghost{border:0;border-radius:9px;font-size:12px;font-weight:800;padding:9px 14px;color:#fff;background:var(--blue)}
.primary:hover{background:#2269da}.secondary{background:#2c4260}.secondary:hover{background:#3a5679}
.danger-line{background:#7e2f3c}.danger-line:hover{background:#a3394a}.ghost{background:transparent;border:1px solid var(--line2)}
.mini-btn{border:1px solid var(--line2);background:rgba(255,255,255,.05);border-radius:7px;padding:4px 8px;font-size:11px;font-weight:700}
.mini-btn:hover{background:rgba(52,125,248,.25)}.mini-btn.danger{border-color:rgba(255,77,94,.45);color:#ffc2c8}

/* ---------- Admin panel ---------- */
.panel-backdrop{position:fixed;inset:0;background:rgba(3,8,18,.6);z-index:45;backdrop-filter:blur(2px)}
.side-panel{position:fixed;right:0;top:0;bottom:0;width:min(760px,100vw);background:#0d1729;border-left:1px solid var(--line2);box-shadow:-20px 0 50px rgba(0,0,0,.5);z-index:50;transform:translateX(105%);transition:transform .28s ease;display:flex;flex-direction:column}
.side-panel.open{transform:none}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:linear-gradient(180deg,#14233b,#0f1b2e);border-bottom:1px solid var(--line)}
.panel-header h2{margin:0;font-size:16px}
.close{border:1px solid var(--line2);background:rgba(255,255,255,.05);border-radius:9px;padding:5px 10px;font-size:15px}
.panel-body{flex:1;overflow:auto;padding:16px 18px 30px}
.panel-body h3{font-size:14px;margin:18px 0 10px}
.panel-body p{font-size:12px;color:#b9cbe6;line-height:1.6}
.login-area h2{font-size:18px;margin:4px 0 8px}
.login-api-status{padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.vertical-form{display:grid;gap:12px;margin-top:12px}
.vertical-form label,.editor-form label{display:grid;gap:6px;font-size:12px;color:#b9cbe6}
input,select,textarea{width:100%;background:#0a1322;color:#fff;border:1px solid #2c4468;border-radius:9px;padding:9px 10px;min-width:0}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}
input[type=color]{padding:2px;height:38px}
input.readonly{opacity:.6}
.fine-print{font-size:11px!important;color:#8ea6c6!important}
.admin-db-alert{padding:12px;border-radius:12px;background:rgba(120,70,20,.3);border:1px solid #b9862f;margin-bottom:12px}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.admin-stats>div{text-align:center;padding:12px;border-radius:12px;background:rgba(52,125,248,.1);border:1px solid var(--line)}
.admin-stats strong{display:block;font-size:22px}.admin-stats small{font-size:10.5px;color:var(--muted)}
.admin-toolbar{display:flex;gap:8px;margin:12px 0}
.admin-nav{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.admin-nav button{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:700;color:#cfe0f7}
.admin-nav button.active{background:var(--blue);border-color:#7db2ff;color:#fff}
.table-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.table-head h3{margin:8px 0}
.data-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:56vh}
.data-table{width:100%;border-collapse:collapse;font-size:11.5px}
.data-table th{position:sticky;top:0;background:#14233b;text-align:left;padding:8px;font-size:10.5px;color:#9fb4d2;text-transform:uppercase;letter-spacing:.4px}
.data-table td{padding:7px 8px;border-top:1px solid rgba(255,255,255,.06);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table tr:hover td{background:rgba(52,125,248,.07)}
.row-buttons{display:flex;gap:4px}
.hint{font-size:11.5px;color:#9fb4d2;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-top:10px;line-height:1.55}
.empty-state{padding:16px;text-align:center;font-size:12px;color:#8ea6c6}
.editor-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.editor-form .wide,.editor-form button[type=submit]{grid-column:1/-1}
.logo-uploader{padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin:10px 0}
.logo-uploader h3{margin:0 0 6px}
.logo-upload-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.logo-preview{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:#13284a;overflow:hidden}
.logo-preview img{width:100%;height:100%;object-fit:contain}
.logo-upload-label{display:flex;flex-direction:column;font-size:11px;color:#9fb4d2;flex:1;min-width:170px}
.logo-upload-status{font-size:11px;color:#9fb4d2;margin-top:6px}

/* ---------- Modals ---------- */
.modal-shell{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,8,18,.7);backdrop-filter:blur(3px)}
.modal-dialog{width:min(660px,100%);max-height:min(90dvh,900px);overflow:auto;padding:18px 20px;border-radius:18px;background:#0f1b2d;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.editor-head h2{margin:0;font-size:17px}
.modal-actions{display:flex;gap:8px;margin-top:14px}
.ag-top{display:flex;gap:14px;align-items:center}
.ag-top .av{width:56px;height:56px;border-radius:16px;font-size:24px}
.ag-top h3{margin:0;font-size:19px}
.ag-top p{margin:3px 0 0;font-size:12px;color:#9fb4d2}
.status-badge{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:20px;margin-left:6px;vertical-align:middle;background:#2c4260}
.status-badge.working{background:rgba(34,224,138,.18);color:#7ff7bd}.status-badge.break{background:rgba(255,181,71,.2);color:#ffd98f}.status-badge.idle{background:rgba(90,162,255,.2);color:#b9d8ff}.status-badge.offline{background:rgba(255,77,94,.2);color:#ffc2c8}
.ag-now{margin:14px 0;padding:12px;border-radius:12px;background:linear-gradient(135deg,rgba(52,125,248,.18),rgba(56,214,255,.08));border:1px solid rgba(90,162,255,.35)}
.ag-now small{font-size:10px;letter-spacing:.6px;color:#9fd0ff;font-weight:800}
.ag-now div{font-size:14px;font-weight:750;margin-top:4px}
.ag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ag-grid div{padding:9px;border-radius:10px;background:rgba(255,255,255,.04)}
.ag-grid small{display:block;font-size:10px;color:#89a2c4;margin-bottom:4px}
.ag-grid strong{font-size:12.5px}
.ag-hist{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto;margin-top:6px}
.ag-hist div{display:flex;gap:8px;font-size:11.5px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.035)}
.ag-hist time{color:#7088a8;font-variant-numeric:tabular-nums;flex:none}
.agent-task-list{display:flex;flex-direction:column;gap:4px;font-size:12px}
.toasts{position:fixed;z-index:100;top:14px;left:50%;transform:translateX(-50%);display:grid;gap:7px;width:min(380px,94vw);pointer-events:none}
.toast{padding:11px 14px;border-radius:12px;background:rgba(14,28,48,.96);border:1px solid #3d79d8;box-shadow:0 10px 28px rgba(0,0,0,.45);font-size:12px;line-height:1.5;animation:pop .2s ease}
.toast.error{border-color:#ff6b78}
.noscript{position:fixed;inset:0;display:grid;place-items:center;background:#0b1424;color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1280px){.kpi{padding:7px 9px}.kpi-ico{width:28px;height:28px}.kpi-body strong{font-size:15px}.kpi-body em{display:none}.brand-text small{letter-spacing:1px}}
@media (max-width:1050px){.mode-pill{display:none}.kpi:nth-child(n+5){display:none}.help{display:none}.admin-label{display:none}}
@media (max-width:820px){
  .topbar{flex-wrap:wrap;padding:8px}.kpis{order:3;flex-basis:100%;overflow-x:auto}.kpi{flex:0 0 auto;max-width:none}.kpi:nth-child(n+5){display:flex}
  .brand-text strong{font-size:15px}.brand-tile{width:34px;height:34px}.brand-ver{display:none}
  .room-tabs{flex-wrap:nowrap;overflow-x:auto;padding:2px 8px 6px}.viewport{margin:0 8px;border-radius:12px}
  .hud-tr{top:auto;bottom:58px;right:8px;max-width:calc(100% - 16px)}.hud-btn span{display:none}.hud-btn{padding:9px 11px}
  .hud-tl{left:8px;top:8px;width:min(300px,calc(100% - 16px))}.activity-list{max-height:30vh}
  .statusbar{padding:6px 8px 8px}.legend span:nth-child(n+3){display:none}.updated{display:none}
  .ag-grid{grid-template-columns:repeat(2,1fr)}.editor-form{grid-template-columns:1fr}
  .room-popover{top:auto;bottom:60px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:820px){.room-label{padding:4px 8px 4px 4px;gap:6px}.room-label .rl-icon{width:20px;height:20px;font-size:12px}.room-label b{font-size:10.5px}.room-label small{font-size:9px}.agent-tag em{display:none}}

/* ---------- V13: explore mode, home world, calendar, music ---------- */
.hud-btn.explore-btn{background:linear-gradient(180deg,#ffd23f,#f5b301);border-color:#ffe27a;color:#1d1400;box-shadow:0 0 0 1px rgba(255,210,63,.5),0 6px 18px rgba(245,179,1,.35)}
.hud-btn.explore-btn:hover{background:linear-gradient(180deg,#ffe066,#ffc21a);border-color:#fff1b3}
.hud-btn.home-btn{border-color:rgba(242,193,78,.6);background:linear-gradient(180deg,rgba(66,48,18,.92),rgba(30,22,10,.92));color:#ffe6a8}
.hud-btn.home-btn:hover{border-color:#f2c14e;background:linear-gradient(180deg,rgba(90,64,22,.95),rgba(40,28,10,.95))}
body.world-home .brand-ver{border-color:#c9a24a;color:#ffe08a;background:rgba(242,193,78,.14)}
body.world-home .room-label{--acc:#f2c14e}
.agent-tag.player{border-color:#ffd23f;background:rgba(40,30,4,.92);box-shadow:0 0 0 1px #ffd23f,0 0 16px rgba(255,210,63,.45)}
.agent-tag.player i{background:#22e08a;box-shadow:0 0 6px #22e08a}
.agent-tag.player em{background:#ffd23f;color:#2a1d00}
body.exploring .room-tabs,body.exploring .hud-tl,body.exploring .hud-tr,body.exploring .interior-hud,body.exploring .follow-chip,body.exploring .room-popover{display:none!important}
body.exploring .zoom-ctl{bottom:62px}
.explore-hud{position:absolute;inset:0;z-index:12;pointer-events:none}
.explore-hud>*{pointer-events:auto}
.ex-top{position:absolute;right:12px;top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ex-char{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:14px;background:rgba(10,18,32,.86);border:1px solid var(--line2);backdrop-filter:blur(10px);font-size:12px;font-weight:800;color:#cfe0f7;box-shadow:var(--shadow)}
.ex-char select{background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:9px;padding:6px 8px;color:#fff;font-weight:700;max-width:230px}
.ex-char select option{background:#0f1b2d}
.ex-world{padding:10px 14px;border-radius:14px;border:1px solid rgba(242,193,78,.6);background:rgba(40,28,10,.9);color:#ffe6a8;font-weight:800;font-size:13px;box-shadow:var(--shadow)}
.ex-map{padding:11px 20px;border-radius:16px;border:2px solid #fff3b0;background:linear-gradient(180deg,#ffd23f,#f5b301);color:#1d1400;font-weight:900;font-size:15px;box-shadow:0 0 0 2px rgba(255,210,63,.35),0 8px 22px rgba(245,179,1,.45)}
.ex-map:hover{filter:brightness(1.06)}
.ex-time{position:absolute;right:12px;bottom:56px;display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:14px;background:rgba(10,18,32,.86);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:12px;color:#cfe0f7;flex-wrap:wrap;max-width:260px}
.ex-time b{font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
.ex-time small{flex-basis:100%;color:var(--muted);font-size:10.5px}
.ex-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:9px 16px;border-radius:14px;background:rgba(10,18,32,.86);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:12px;color:#d6e4f7;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.ex-touch{display:none}
@media (hover:none),(pointer:coarse){
  .ex-touch{display:block}.ex-hint{display:none}
  .joy{position:absolute;left:22px;bottom:84px;width:118px;height:118px;border-radius:50%;background:rgba(10,18,32,.45);border:2px solid rgba(255,255,255,.25);touch-action:none}
  .joy-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,210,63,.85);box-shadow:0 4px 12px rgba(0,0,0,.4)}
  .joy-jump{position:absolute;right:22px;bottom:120px;width:66px;height:66px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(10,18,32,.6);font-size:26px;color:#fff;touch-action:none}
  .ex-time{bottom:200px}
}
.cal-chip{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:#d6e4f7;font-size:11.5px;white-space:nowrap}
.cal-chip:hover{border-color:#6ea6ff;background:rgba(52,125,248,.15)}
.cal-chip b{font-weight:800;color:#fff}
.cal-chip.sim{border-color:#ffb547;background:rgba(255,181,71,.12)}
.cal-chip em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.6px;padding:2px 6px;border-radius:6px;background:#ffb547;color:#2a1a00}
.cal-pop{position:fixed;right:12px;bottom:52px;z-index:60;width:320px;max-width:calc(100vw - 24px);padding:14px;border-radius:16px;background:rgba(12,22,38,.97);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cal-head .close{border:0;background:rgba(255,255,255,.08);border-radius:8px;width:28px;height:28px}
.cal-pop .muted{font-size:11.5px;color:var(--muted);margin:4px 0 10px;line-height:1.45}
.cm-title{font-weight:900;text-align:center;margin-bottom:6px}
.cm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:11.5px}
.cm-grid b{font-size:10px;color:var(--muted);padding:3px 0}
.cm-grid button{border:1px solid transparent;border-radius:8px;background:rgba(255,255,255,.04);padding:6px 0;font-weight:700}
.cm-grid button:hover{background:rgba(52,125,248,.25)}
.cm-grid button.today{border-color:#22e08a}
.cm-grid button.sel{background:linear-gradient(180deg,#2f7cf6,#1d5ed6);color:#fff}
.cal-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px}
.cal-inputs label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);font-weight:700}
.cal-inputs input{background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:9px;padding:7px 8px;color:#fff;color-scheme:dark}
.cal-actions{display:flex;gap:8px}
.cal-actions button{flex:1;padding:9px;border-radius:10px;font-weight:800;border:1px solid var(--line2)}
.cal-actions .primary{background:linear-gradient(180deg,#2f7cf6,#1d5ed6);border-color:#7db2ff;color:#fff}
.cal-actions .secondary{background:rgba(255,255,255,.06)}
@media (max-width:820px){.cal-chip b{display:none}.ex-char span{display:none}.ex-hint{white-space:normal}}

/* ---------- V14: window controls (minimize / maximize) ---------- */
.activity-head{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 4px}
.activity-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:5px 6px 5px 9px;border:0;background:transparent;text-align:left;border-radius:10px}
.activity-title:hover{background:rgba(255,255,255,.04)}
.win-ctl{display:flex;gap:5px;flex:none}
.win-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:#d6e4f7;padding:0;transition:background .15s,border-color .15s}
.win-btn:hover{background:rgba(52,125,248,.25);border-color:#6ea6ff;color:#fff}
.win-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.activity-card.collapsed .activity-content{display:none}
.activity-card[data-size="large"]{width:min(520px,calc(100vw - 24px))}
.activity-card[data-size="large"] .activity-list{max-height:min(62vh,640px)}
.tabs-wrap{flex:none;position:relative;display:flex;align-items:flex-start;gap:8px;padding:0 12px 8px;z-index:29;min-width:0}
.tabs-wrap .room-tabs{flex:1;min-width:0;padding:2px 0 0}
.tabs-wrap .tabs-ctl{padding-top:4px}
.tabs-wrap[data-state="row"] .room-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;padding-bottom:4px}
.tabs-wrap[data-state="max"] .room-tabs{flex-wrap:wrap;max-height:none;overflow:visible}
.tabs-wrap[data-state="min"] .room-tabs{display:none}
.tabs-mini{display:none;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:#d6e4f7;font-size:12.5px;font-weight:700;white-space:nowrap}
.tabs-mini small{font-size:11px;color:#9fd0ff;background:rgba(52,125,248,.18);border-radius:8px;padding:2px 8px;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.tabs-mini:hover{border-color:#6ea6ff}
.tabs-wrap[data-state="min"] .tabs-mini{display:flex}
.tabs-wrap[data-state="min"]{justify-content:space-between;align-items:center}
body.exploring .tabs-wrap{display:none!important}
@media (max-width:820px){.tabs-wrap{padding:0 8px 6px}.tabs-wrap[data-state="max"] .room-tabs{max-height:30vh;overflow:auto}}
.activity-card.collapsed[data-size="large"]{width:100%}

/* V15: explore interaction prompt */
.ex-prompt{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:calc(100% - 24px)}
.exp-now{width:100%;text-align:center;font-size:12px;color:#ffe6a8;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.exp-btn{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:12px;border:1px solid var(--line2);background:rgba(10,18,32,.9);color:#eaf2ff;font-size:12.5px;font-weight:750;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.exp-btn kbd{display:grid;place-items:center;min-width:26px;height:26px;border-radius:7px;background:#ffd23f;color:#1d1400;font:900 13px/1 Inter,system-ui,sans-serif;box-shadow:0 2px 0 #b8860b}
.exp-btn.main{border-color:#ffd23f;box-shadow:0 0 0 1px rgba(255,210,63,.4),var(--shadow)}
.exp-btn.talk kbd{background:#5aa2ff;box-shadow:0 2px 0 #1d5ed6;color:#fff}
.exp-btn.item kbd{background:#22e08a;box-shadow:0 2px 0 #0f9a5c;color:#03210f}
.exp-btn:hover{filter:brightness(1.1)}
.ex-hint b{color:#ffd23f}
@media (hover:none),(pointer:coarse){.ex-prompt{top:64px;bottom:auto;left:auto;right:12px;transform:none;flex-direction:column;align-items:flex-end}.exp-btn{padding:10px 14px 10px 10px}}

/* ---------- V17: mobile layout (responsive, tidy, fits the screen) ---------- */
@media (max-width:820px){
  .topbar{gap:6px;padding:8px 8px 6px}
  .brand-card{flex:1 1 auto;min-width:0;padding:6px 10px 6px 7px}
  .top-actions{display:none}
  .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible}
  .kpi{min-width:0;max-width:none;padding:6px 8px;gap:7px}
  .kpi:nth-child(n+4){display:none}
  .kpi-ico{width:24px;height:24px;border-radius:8px}.kpi-ico svg{width:14px;height:14px}
  .kpi-body{min-width:0}.kpi-body small{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .kpi-body strong{font-size:13.5px;white-space:nowrap}.kpi-body em{display:none}
  .viewport{margin:0 6px;border-radius:12px}
  .hud-tr{left:8px;right:8px;bottom:8px;top:auto;max-width:none;flex-wrap:nowrap;justify-content:space-between;gap:5px}
  .hud-tr .hud-btn{flex:1 1 0;min-width:0;justify-content:center;padding:9px 0;font-size:15px;border-radius:11px}
  .zoom-ctl{left:auto;right:8px;bottom:58px;flex-direction:column;padding:4px;gap:3px}
  .zoom-ctl button{width:34px;height:30px}.zoom-ctl span{min-width:0;font-size:9.5px}
  .follow-chip{bottom:60px;max-width:calc(100% - 70px)}
  .interior-hud{top:auto;bottom:58px;left:8px;transform:none;max-width:calc(100% - 64px);gap:6px;padding:5px 6px}.interior-hud div{min-width:0;flex:1}.interior-hud strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.interior-hud button{padding:6px 9px}
  .room-popover{left:8px;right:8px;width:auto;max-width:none;top:auto;bottom:58px;max-height:62%;overflow:auto}
  .hud-tl{width:min(320px,calc(100% - 60px))}
  .statusbar{gap:6px;padding:6px 8px 8px;justify-content:space-between}
  .legend,.help,.updated{display:none}
  .footer-info{margin-left:0;width:100%;justify-content:space-between;gap:6px;min-width:0}
  .connection-pill{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .cal-chip{padding:5px 8px;flex:none}
  .cal-pop{left:8px;right:8px;width:auto;bottom:48px}
}
@media (max-width:820px),(hover:none) and (pointer:coarse){
  body.exploring .zoom-ctl{display:none}
  .ex-top{left:8px;right:8px;top:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch}
  .ex-char{padding:4px 6px;min-width:0;border-radius:12px}.ex-char span{display:none}
  .ex-char select{width:100%;max-width:none;min-width:0;font-size:12.5px;padding:7px 6px}
  .ex-map{grid-row:1;grid-column:2;padding:8px 14px;font-size:13.5px;border-radius:12px;white-space:nowrap}
  .ex-char{grid-row:1;grid-column:1}
  .ex-top .ex-floor{grid-row:2;grid-column:1 / -1}
  .ex-world{grid-row:3;grid-column:1;justify-self:start;padding:6px 11px;font-size:11.5px;border-radius:10px;white-space:nowrap}
  body:not(.world-home) .ex-time{top:142px}
  .ex-time{top:54px;right:8px;bottom:auto;padding:5px 10px;max-width:none;gap:5px;border-radius:10px;font-size:11px;flex-wrap:nowrap}
  .ex-time b{font-size:14px}.ex-time small{display:none}
  .ex-hint{display:none}
  .ex-prompt{top:auto;bottom:96px;right:10px;left:auto;transform:none;flex-direction:column;align-items:flex-end;gap:6px;max-width:64vw}
  .exp-now{width:auto;max-width:64vw;text-align:right;font-size:11px;padding:5px 9px;border-radius:9px;background:rgba(10,18,32,.8)}
  .exp-btn{padding:7px 11px 7px 7px;font-size:12px;max-width:64vw}.exp-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .exp-btn kbd{min-width:24px;height:24px;font-size:12px}
  .joy{left:14px;bottom:18px;width:112px;height:112px}
  .joy-jump{right:14px;bottom:22px;width:62px;height:62px;font-size:24px}
}
@media (max-width:380px){.kpi-ico{display:none}.hud-tr .hud-btn{font-size:14px;padding:8px 0}.brand-text small{display:none}}
@media (max-height:520px){
  .topbar{padding:4px 8px}.brand-card{padding:4px 9px 4px 6px}.brand-tile{width:32px;height:32px;font-size:17px}.brand-text strong{font-size:15px}.brand-text small{display:none}
  .kpi{padding:4px 8px}.kpi-ico{width:24px;height:24px}.kpi-body strong{font-size:13.5px}.kpi-body em{display:none}
  .tabs-wrap{padding:0 8px 4px}.tabs-wrap .room-tabs{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important}
  .tab{padding:6px 10px;font-size:12px}
  .hud-btn span{display:none}.hud-btn{padding:8px 11px}
  .activity-list{max-height:38vh}
  .statusbar{padding:4px 8px 6px}.legend,.help,.updated{display:none}.footer-info{margin-left:auto}
  .zoom-ctl{left:auto;right:8px;bottom:8px}
}
.agent-tag.pet-tag{border-color:rgba(255,138,176,.55)}.agent-tag.pet-tag i{background:#ff8ab0;box-shadow:0 0 6px #ff8ab0}.agent-tag.pet-tag em{color:#ffd1e1}

/* V22 — maintenance screen (admin: Pengaturan Sistem → Maintenance Website) */
.maintenance-screen{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:radial-gradient(700px 400px at 20% 10%,rgba(255,122,47,.35),transparent 70%),radial-gradient(600px 400px at 90% 90%,rgba(255,63,127,.35),transparent 70%),#140a1c}
.maintenance-screen[hidden]{display:none}
.mt-card{width:min(440px,100%);text-align:center;padding:34px 26px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);color:#fff}
.mt-ico{width:76px;height:76px;margin:0 auto 14px;display:grid;place-items:center;border-radius:24px;font-size:36px;background:linear-gradient(135deg,#ff7a2f,#ff3f7f);box-shadow:0 20px 40px -14px #ff3f7f}
.mt-card h2{margin:0 0 8px;font-size:26px}.mt-card p{margin:0 0 18px;color:rgba(255,255,255,.8);line-height:1.6}.mt-card small{display:block;margin-top:12px;color:rgba(255,255,255,.55);font-size:12px}

/* ===== V24 · Menara DAP (twin tower 20 lantai) ===== */
.hud-btn.tower-btn{border-color:rgba(56,189,248,.6);background:linear-gradient(180deg,rgba(14,48,82,.94),rgba(8,24,44,.94));color:#cdeeff}
.hud-btn.tower-btn:hover{border-color:#38bdf8;background:linear-gradient(180deg,rgba(18,64,108,.96),rgba(10,30,56,.96))}
.room-label.tower-gate{border-color:rgba(56,189,248,.7);box-shadow:0 0 0 1px rgba(56,189,248,.35),0 8px 24px rgba(2,12,30,.45)}
.tower-floors{position:absolute;right:14px;top:74px;z-index:14;width:250px;max-height:calc(100% - 170px);display:flex;flex-direction:column;border-radius:16px;border:1px solid rgba(56,189,248,.35);background:linear-gradient(180deg,rgba(9,20,38,.94),rgba(6,13,26,.94));box-shadow:0 18px 40px rgba(0,0,0,.45);backdrop-filter:blur(10px);color:#e6f3ff;overflow:hidden}
.tower-floors[hidden]{display:none}
.tf-head{display:grid;grid-template-columns:1fr auto;align-items:center;padding:11px 12px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
.tf-head b{font-size:13.5px}.tf-head small{grid-column:1;color:#8fb3d6;font-size:11px}
.tf-head button{grid-row:1/3;grid-column:2;width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#cfe3f7;cursor:pointer}
.tf-all{margin:8px 10px 4px;padding:8px 10px;border-radius:10px;border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08);color:#d6f1ff;font-weight:750;font-size:12.5px;text-align:left;cursor:pointer}
.tf-list{overflow:auto;padding:4px 10px 10px;display:flex;flex-direction:column;gap:4px}
.tf-list button{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;border:1px solid transparent;background:rgba(255,255,255,.035);color:#d9e8f7;font-size:12px;text-align:left;cursor:pointer}
.tf-list button:hover,.tf-all:hover{border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.12)}
.tf-list button.on,.tf-all.on{border-color:#38bdf8;background:linear-gradient(90deg,rgba(56,189,248,.28),rgba(56,189,248,.08));color:#fff}
.tf-n{display:grid;place-items:center;min-width:28px;height:24px;border-radius:7px;background:#13284f;color:#7dd3fc;font-weight:900;font-size:12px}
.tf-list button.ceo .tf-n{background:linear-gradient(135deg,#d4a945,#8a6a1f);color:#1d1400}
.tf-t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-c{min-width:20px;padding:1px 6px;border-radius:999px;background:rgba(34,224,138,.18);color:#5ff0ac;font-weight:800;font-size:11px;text-align:center}
.exp-btn.lift kbd{background:#38bdf8;box-shadow:0 2px 0 #0369a1;color:#04223a}
.lift-pad{display:grid;grid-template-columns:repeat(10,30px);gap:4px;padding:6px;border-radius:12px;background:rgba(10,18,32,.9);border:1px solid rgba(56,189,248,.35)}
.lift-pad button{height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#13284f;color:#cdeeff;font-weight:800;font-size:12px;cursor:pointer}
.lift-pad button.on{background:#38bdf8;color:#04223a;border-color:#7dd3fc}
.lift-pad button:hover{filter:brightness(1.2)}
body.exploring .tower-floors{display:none}
.ex-floor select{min-width:150px}
body.world-home .ex-floor{display:none}
@media (max-width:820px){.tower-floors{top:auto;bottom:118px;right:10px;width:min(240px,calc(100% - 20px));max-height:46vh}.lift-pad{grid-template-columns:repeat(5,30px)}}

.tf-list button.roof .tf-n{background:linear-gradient(135deg,#a855f7,#ff3dbb);color:#fff}

/* ===== V32 · car HUD + auto-travel loading scene ===== */
.exp-now.car-hud b{font-size:18px;color:#7dd3fc}
.travel-ov{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#070d18;opacity:0;transition:opacity .45s ease;overflow:hidden;font-family:inherit}
.travel-ov.on{opacity:1}.travel-ov[hidden]{display:none}
.tv-sky{position:absolute;inset:0 0 38% 0;background:linear-gradient(180deg,#0f2557 0%,#3b5ba5 55%,#f2a65a 100%)}
.tv-sun{position:absolute;left:62%;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ffe8a3,#ffb347 60%,transparent 70%);filter:blur(1px)}
.tv-city{position:absolute;bottom:0;left:0;width:200%;height:46%;background-repeat:repeat-x;animation:tvCity 14s linear infinite}
.tv-city.c1{background-image:linear-gradient(90deg,transparent 0 3%,#1d2a4a 3% 7%,transparent 7% 9%,#1d2a4a 9% 11%,transparent 11% 14%,#16213d 14% 19%,transparent 19% 22%,#1d2a4a 22% 25%,transparent 25% 100%);background-size:700px 100%;opacity:.9}
.tv-city.c2{height:70%;background-image:linear-gradient(90deg,transparent 0 5%,#24345c 5% 8%,transparent 8% 13%,#2b3e6b 13% 15%,transparent 15% 21%,#24345c 21% 26%,transparent 26% 100%);background-size:900px 100%;opacity:.55;animation-duration:24s}
@keyframes tvCity{to{transform:translateX(-50%)}}
.tv-road{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,#2b2f36,#1b1d22)}
.tv-lines{position:absolute;left:0;top:46%;width:200%;height:8px;background:repeating-linear-gradient(90deg,#f5f7fa 0 60px,transparent 60px 130px);animation:tvLines .5s linear infinite}
@keyframes tvLines{to{transform:translateX(-130px)}}
.tv-car{position:absolute;left:calc(50% - 60px);top:14%;font-size:96px;transform:scaleX(-1);animation:tvBounce .35s ease-in-out infinite alternate;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
@keyframes tvBounce{to{transform:scaleX(-1) translateY(-4px)}}
.tv-card{position:relative;z-index:2;margin-top:-18vh;min-width:min(440px,calc(100vw - 32px));padding:20px 22px;border-radius:18px;background:rgba(8,16,32,.72);border:1px solid rgba(125,211,252,.35);backdrop-filter:blur(10px);color:#eaf2ff;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.tv-card small{color:#7dd3fc;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.tv-card h2{margin:6px 0 14px;font-size:22px}
.tv-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.tv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#22e08a);border-radius:99px}
.tv-step{margin-top:12px;font-weight:700}.tv-meta{display:flex;justify-content:space-between;margin-top:8px;color:#9fb4d2;font-size:12.5px}

/* V46: checkboxes in the 3D office UI are toggle switches */
input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:40px;height:22px;margin:0;border-radius:999px;cursor:pointer;vertical-align:middle;background:rgba(148,163,184,.28);border:1px solid rgba(255,255,255,.12);transition:background .25s,box-shadow .25s}
input[type=checkbox]::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
input[type=checkbox]:checked{background:linear-gradient(135deg,#38bdf8,#2563eb);border-color:transparent;box-shadow:0 4px 14px rgba(37,99,235,.4)}
input[type=checkbox]:checked::after{transform:translateX(18px)}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(56,189,248,.45)}

/* V47: AI mode pill, mining chip + realtime mining tab */
.ai-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:rgba(148,163,184,.14);color:#c9d6ea;border:1px solid rgba(255,255,255,.08)}
.ai-pill.on{background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(99,102,241,.28));color:#e6f1ff;border-color:rgba(125,211,252,.35);box-shadow:0 0 14px rgba(56,189,248,.25)}
.mine-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:700 10.5px/1.4 inherit;color:#ffe9a8;background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(234,88,12,.2));border:1px solid rgba(251,191,36,.35);cursor:pointer}
.mine-chip i{width:7px;height:7px;border-radius:50%;background:#22e08a;box-shadow:0 0 8px #22e08a;animation:pulse 1.6s infinite}.mine-chip i.stale{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.mn-head{display:flex;align-items:center;gap:8px;padding:4px 4px 8px;font-size:12px;color:#e6eefb}.mn-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mn-head time{font-size:10.5px;color:#8ea3c2}
.mn-live{width:8px;height:8px;border-radius:50%;background:#22e08a;box-shadow:0 0 10px #22e08a;animation:pulse 1.6s infinite}.mn-live.stale{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
.mn-warn{font-size:11px;color:#fde68a;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:6px 8px;margin-bottom:8px}
.mn-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mn-stat{padding:9px 10px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07)}
.mn-stat small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8ea3c2}.mn-stat b{display:block;font-size:15px;color:#fff;margin-top:2px}.mn-stat b span{font-size:11px;color:#8ea3c2}.mn-stat em{display:block;font-style:normal;font-size:10.5px;color:#9fd8ff;margin-top:1px}
.mn-spark{width:100%;height:34px;margin:8px 0 2px;display:block}.mn-spark polyline{fill:none;stroke:#fbbf24;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(251,191,36,.6))}
.mn-price{font-size:10.5px;color:#a9bad4;margin:2px 2px 8px}
.mn-workers{display:grid;gap:4px}.mn-w{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;font-size:11.5px;padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.035)}
.mn-w i{width:8px;height:8px;border-radius:50%;background:#22e08a;box-shadow:0 0 6px #22e08a}.mn-w.off i{background:#ff4d5e;box-shadow:0 0 6px #ff4d5e}.mn-w span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbe7f8}.mn-w b{color:#fff;font-size:11px}.mn-w.off b{color:#ff9aa5}
.mn-none{color:#8ea3c2;font-size:11px}
.mn-team{margin-top:9px;font-size:11px;color:#a9bad4;display:flex;flex-wrap:wrap;gap:4px;align-items:center}.mn-team span{padding:2px 8px;border-radius:999px;background:rgba(251,191,36,.14);color:#ffe9a8;cursor:pointer}

/* V48: Manajemen Office tab + floor ticket badge */
.tf-k{margin-left:4px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f97316,#e11d48);box-shadow:0 0 10px rgba(249,115,22,.45)}
.ops-open{display:grid;gap:5px;margin-bottom:8px}
.ops-t{padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.04);border-left:3px solid #64748b}.ops-t b{display:block;font-size:11.5px;color:#eef4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ops-t small{font-size:10.5px;color:#9fb2cf}
.ops-t.p-urgent{border-left-color:#ef4444;background:rgba(239,68,68,.08)}.ops-t.p-high{border-left-color:#f97316}.ops-t.p-normal{border-left-color:#38bdf8}.ops-t.p-low{border-left-color:#22c55e}
.ops-sub{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8ea3c2;margin:4px 2px 6px}
.ops-ev{display:grid;gap:5px}.ops-e{display:grid;grid-template-columns:22px 1fr;gap:6px;font-size:11px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.03)}
.ops-e>span{font-size:13px}.ops-e b{color:#fff}.ops-e em{font-style:normal;color:#8ea3c2;font-size:10px}.ops-e i{font-style:normal;font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px;background:rgba(56,189,248,.2);color:#9fe0ff}
.ops-e p{margin:2px 0 0;color:#cfdcf0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ops-e.k-resolve{background:rgba(34,197,94,.08)}.ops-e.k-escalate{background:rgba(239,68,68,.09)}.ops-e.k-consult,.ops-e.k-consult_reply{background:rgba(168,85,247,.09)}

/* ---------- V50: admin integration HUD (bell, admin, live chat) ---------- */
.integ-bar{display:flex;align-items:center;gap:6px}
.ib-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:11px;border:1px solid rgba(132,168,214,.35);background:linear-gradient(180deg,rgba(30,48,78,.88),rgba(16,28,48,.9));color:#e8f1ff;font:800 11.5px/1 inherit;text-decoration:none;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .15s,border-color .15s}
.ib-btn:hover{transform:translateY(-1px);border-color:#6fb4ff}
.ib-btn.admin{background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:transparent}
.ib-btn.ghost{background:rgba(16,28,48,.6)}
.ib-btn.bell{padding:0 9px;font-size:14px}.ib-btn.bell i{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font:900 9.5px/17px inherit;font-style:normal;text-align:center;box-shadow:0 0 0 2px #0b1426;animation:ibPulse 2s infinite}
@keyframes ibPulse{50%{box-shadow:0 0 0 2px #0b1426,0 0 0 6px rgba(239,68,68,.25)}}
.ib-me{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#10b981,#0ea5e9);color:#fff;font-weight:900;font-size:13px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.noti-pop{position:fixed;z-index:80;width:min(360px,calc(100vw - 16px));max-height:min(460px,70vh);display:flex;flex-direction:column;border-radius:16px;background:rgba(10,18,34,.97);border:1px solid rgba(132,168,214,.28);box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(14px);color:#e8f1ff;overflow:hidden}
.noti-pop[hidden]{display:none}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(132,168,214,.18);font-size:13px}
.np-list{overflow:auto;padding:6px}
.np-i{display:flex;gap:10px;padding:9px 10px;border-radius:12px;font-size:12px}.np-i+.np-i{margin-top:2px}
.np-i.unread{background:rgba(59,130,246,.12);cursor:pointer}.np-i.unread:hover{background:rgba(59,130,246,.2)}
.np-i>span{font-size:15px}.np-i b{display:block;font-size:12.5px}.np-i p{margin:2px 0;color:#a9bbd6;line-height:1.4}.np-i time{font-size:10.5px;color:#7088ab}
.adm-link{display:inline-flex;align-items:center;gap:5px;color:#7cc0ff;font-weight:800;font-size:11.5px;text-decoration:none}.adm-link:hover{text-decoration:underline}
.rp-adm{display:flex;justify-content:center;margin-top:10px;padding:8px;border-radius:10px;background:rgba(124,192,255,.08);border:1px dashed rgba(124,192,255,.35)}
.feed-adm{display:flex;margin:4px 0 8px;padding:7px 10px;border-radius:10px;background:rgba(124,192,255,.08)}
a.adm-btn{text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:820px){.top-actions{display:flex;margin-left:0}.top-actions .mode-pill{display:none}.ib-btn span{display:none}.ib-me{display:none}}