:root{
  --cream:#F6F3ED; --cream2:#EDE8DF; --wall:#F2EEE6; --floor:#D9D9D4;
  --blue:#2C6BB0; --blue-d:#1B4F87; --blue-l:#E7F0FA;
  --mint:#2FB398; --mint-l:#E2F6F1; --mint-d:#1F8C77;
  --wood:#C89058; --green:#4EA87A;
  --ink:#22303D; --ink2:#5A6B7B; --ink3:#8B98A5;
  --line:#DCE1E7; --card:#FFFFFF; --shadow:0 4px 18px rgba(28,50,72,.10);
  --warn:#C9722A; --danger:#C0483C; --ok:#2E9E63;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--cream);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}

/* ---------- 顶栏 ---------- */
#topbar{position:relative;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(180deg,#fff,#F8FAFC);border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(28,50,72,.06);flex:0 0 auto}
#topbar .brand{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#topbar .brand b{font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
#topbar .brand span{font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps{display:flex;gap:4px;flex:1 1 auto;justify-content:center;min-width:0}
.step{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#F1F4F8;
  font-size:12.5px;color:var(--ink2);border:1px solid transparent;white-space:nowrap;transition:.18s}
.step i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#D8E0EA;color:#6B7B8C;
  display:grid;place-items:center;font-size:11px;font-weight:700}
.step.on{background:var(--blue-l);border-color:#BBD5F0;color:var(--blue-d);font-weight:600}
.step.on i{background:var(--blue);color:#fff}
.step.done{background:var(--mint-l);border-color:#B9E7DA;color:var(--mint-d)}
.step.done i{background:var(--mint);color:#fff}
.topbtns{display:flex;gap:6px;flex:0 0 auto}
.tbtn{padding:7px 11px;border-radius:10px;background:#F1F4F8;border:1px solid var(--line);font-size:12.5px;color:var(--ink2);white-space:nowrap}
.tbtn:hover{background:#E7EDF4;color:var(--blue-d)}
.tbtn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.tbtn.primary:hover{background:var(--blue-d);color:#fff}
.tbtn.danger{color:var(--danger)}
#saveTip{font-size:11.5px;color:var(--mint-d);display:flex;align-items:center;gap:4px;white-space:nowrap}

/* ---------- 主体 ---------- */
#main{position:relative;flex:1 1 auto;display:flex;min-height:0}
#sceneWrap{position:absolute;inset:0;overflow:hidden;background:#DCE7F0}
#sceneWrap canvas{display:block;width:100%;height:100%;touch-action:none}
#mapWrap{position:absolute;inset:0;background:var(--cream);overflow:auto;display:none;padding:14px}
#mapWrap.show{display:block}

.panel{position:absolute;top:12px;z-index:20;width:322px;max-height:calc(100% - 24px);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#leftPanel{left:12px}
#rightPanel{right:12px;width:308px}
.panel.collapsed{display:none}
.phead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:#FBFCFD;flex:0 0 auto}
.phead b{font-size:14px;flex:1 1 auto;min-width:0}
.phead .mini{font-size:11px;padding:3px 8px;border-radius:8px;background:var(--blue-l);color:var(--blue-d);white-space:nowrap}
.pbody{padding:12px;overflow:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.pfoot{padding:10px 12px;border-top:1px solid var(--line);background:#FBFCFD;display:flex;gap:8px;flex:0 0 auto}

h4{margin:0 0 6px;font-size:13.5px;color:var(--ink)}
.muted{color:var(--ink2);font-size:12.5px}
.small{font-size:12px;color:var(--ink2);line-height:1.55}
.hr{height:1px;background:var(--line);margin:10px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;padding:3px 9px;border-radius:999px;background:#F1F4F8;color:var(--ink2);border:1px solid var(--line)}
.chip.b{background:var(--blue-l);color:var(--blue-d);border-color:#C9DEF4}
.chip.g{background:var(--mint-l);color:var(--mint-d);border-color:#BCE6DC}
.chip.w{background:#FDF1E3;color:var(--warn);border-color:#F3DCC0}
.chip.r{background:#FBE9E7;color:var(--danger);border-color:#F3CFCB}

label.f{display:block;font-size:12.5px;color:var(--ink2);margin:10px 0 4px}
input[type=text],input[type=number],select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;background:#fff;outline:none;min-height:40px}
textarea{min-height:72px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,107,176,.12)}
.row{display:flex;gap:8px}.row>*{flex:1 1 0;min-width:0}

.btn{padding:10px 14px;border-radius:11px;background:var(--blue);color:#fff;font-size:13.5px;font-weight:600;
  text-align:center;border:1px solid var(--blue);min-height:44px}
.btn:hover{background:var(--blue-d)}
.btn.ghost{background:#fff;color:var(--ink2);border-color:var(--line)}
.btn.ghost:hover{background:#F1F4F8;color:var(--blue-d)}
.btn.mint{background:var(--mint);border-color:var(--mint)}
.btn.mint:hover{background:var(--mint-d)}
.btn.danger{background:#fff;color:var(--danger);border-color:#F0C9C4}
.btn.sm{padding:7px 11px;min-height:36px;font-size:12.5px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.full{width:100%}

.opt{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:7px;background:#fff;cursor:pointer;transition:.15s}
.opt:hover{border-color:#BBD5F0;background:#F8FBFF}
.opt.sel{border-color:var(--blue);background:var(--blue-l);box-shadow:0 0 0 3px rgba(44,107,176,.10)}
.opt .t{font-weight:600;font-size:13.5px;display:flex;gap:6px;align-items:center}
.opt .d{font-size:12px;color:var(--ink2);margin-top:3px}
.opt .fx{margin-top:5px;font-size:11.5px;color:var(--ink3)}

table.mini{width:100%;border-collapse:collapse;font-size:12px}
table.mini th,table.mini td{border:1px solid var(--line);padding:5px 6px;text-align:left}
table.mini th{background:#F4F7FA;font-weight:600;color:var(--ink2)}
table.mini td.num{text-align:right;font-variant-numeric:tabular-nums}

.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}
.metric{border:1px solid var(--line);border-radius:11px;padding:8px 10px;background:#FBFCFD}
.metric .k{font-size:11.5px;color:var(--ink2)}
.metric .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.metric .d{font-size:11px;font-variant-numeric:tabular-nums}
.up{color:#D9483B}.down{color:#1E9E63}.flat{color:var(--ink3)}

/* ---------- 底部工具条 ---------- */
#bottombar{position:relative;z-index:25;flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:8px 12px;
  background:linear-gradient(0deg,#fff,#F8FAFC);border-top:1px solid var(--line);box-shadow:0 -1px 6px rgba(28,50,72,.05);overflow-x:auto}
.bbtn{padding:8px 12px;border-radius:10px;background:#F1F4F8;border:1px solid var(--line);font-size:12.5px;white-space:nowrap;min-height:38px}
.bbtn:hover{background:#E7EDF4}
.bbtn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.spacer{flex:1 1 auto;min-width:6px}
.floorSel{display:flex;gap:4px;align-items:center}
.floorSel .bbtn{padding:6px 10px}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:15}
#cross{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:.65}
#cross:before,#cross:after{content:"";position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
#cross:before{left:9px;top:0;width:2px;height:20px}
#cross:after{top:9px;left:0;height:2px;width:20px}
#prox{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(255,255,255,.96);
  border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:13px;box-shadow:var(--shadow);
  max-width:min(560px,92vw);text-align:center;display:none}
#prox b{color:var(--blue-d)}
#prox .k{font-size:11.5px;color:var(--ink2)}
#viewtip{position:absolute;left:12px;bottom:12px;background:rgba(34,48,61,.78);color:#fff;font-size:11.5px;
  padding:5px 10px;border-radius:8px;display:none;max-width:60vw}
#perfTip{position:absolute;right:12px;top:12px;background:rgba(34,48,61,.72);color:#fff;font-size:11px;padding:4px 9px;border-radius:8px;display:none}

/* ---------- 移动端控制 ---------- */
#touch{position:absolute;inset:0;z-index:18;display:none}
#touch.on{display:block}
#stick{position:absolute;left:18px;bottom:74px;width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.34);border:2px solid rgba(255,255,255,.6);touch-action:none}
#stick .knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(44,107,176,.78);border:2px solid #fff}
#look{position:absolute;right:0;top:0;width:52%;height:calc(100% - 66px);touch-action:none}
#tbtns{position:absolute;right:16px;bottom:76px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
#tbtns .rbtn{min-width:96px;min-height:52px;padding:12px 16px;border-radius:26px;background:rgba(44,107,176,.92);
  color:#fff;font-size:15px;font-weight:600;box-shadow:var(--shadow)}
#tbtns .rbtn.alt{background:rgba(255,255,255,.94);color:var(--blue-d);border:1px solid var(--line)}
#tbtns .rbtn.mint{background:rgba(47,179,152,.94)}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(20,34,48,.42);backdrop-filter:blur(2px)}
.modal.show{display:flex}
.mbox{background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(20,40,64,.28);width:min(780px,100%);
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.mbox.narrow{width:min(460px,100%)}
.mbox.tall{width:min(940px,100%)}
.mhead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:#FBFCFD}
.mhead b{font-size:15px;flex:1 1 auto}
.mbody{padding:16px;overflow:auto;-webkit-overflow-scrolling:touch}
.mfoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:#FBFCFD;flex-wrap:wrap}
.x{width:34px;height:34px;border-radius:9px;background:#F1F4F8;color:var(--ink2);font-size:17px;line-height:34px;text-align:center}
.x:hover{background:#E7EDF4}

/* ---------- 二维楼层图 ---------- */
.mapHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mapGrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.mapGrid{grid-template-columns:1fr 320px}}
.mapCard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.mapCard svg{width:100%;height:auto;display:block;border-radius:8px;background:#F7F9FB}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:11.5px;color:var(--ink2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-2px}

/* ---------- 引导 ---------- */
#coach{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:28;background:#fff;
  border:1px solid #BBD5F0;border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);max-width:min(560px,92vw);
  font-size:13px;display:none}
#coach.show{display:block}
#coach .ca{display:flex;gap:8px;align-items:center;margin-top:6px}

#warnbar{position:relative;z-index:40;background:#FDF1E3;border-bottom:1px solid #F3DCC0;color:#8A4E14;
  font-size:12.5px;padding:7px 14px;display:none}
#warnbar.show{display:block}

#loading{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#F6F3ED,#E6EEF6);gap:14px}
#loading .lg{width:56px;height:56px;border-radius:16px;background:var(--blue);display:grid;place-items:center;color:#fff;font-size:24px;font-weight:700}
#loading .bar{width:220px;height:6px;border-radius:3px;background:#DCE4ED;overflow:hidden}
#loading .bar i{display:block;height:100%;width:30%;background:var(--mint);border-radius:3px;animation:ld 1.1s infinite}
@keyframes ld{0%{margin-left:-32%}100%{margin-left:102%}}

.fade{transition:opacity .18s}
.hide{display:none !important}
.nowrap{white-space:nowrap}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.center{text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:720px){
  #topbar .brand span{display:none}
  .steps{display:none}
  .panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:64vh;border-radius:16px 16px 0 0;
    border-bottom:0;z-index:45}
  #rightPanel{bottom:0;max-height:70vh}
  .panel.collapsed{display:none}
  #bottombar{padding:6px 8px}
  .bbtn{padding:8px 10px;font-size:12px}
  #stick{width:118px;height:118px;bottom:70px;left:12px}
  #stick .knob{width:50px;height:50px;margin:-25px 0 0 -25px}
  .grid2,.grid3{grid-template-columns:1fr}
  #viewtip{display:none !important}
}

/* 外观首页：只保留一枚明确的进入按钮，不弹出遮挡画面的任务卡片。 */
#btnEnterBuilding {
  position:absolute;left:50%;bottom:clamp(16px,4vh,36px);
  transform:translateX(-50%);z-index:24;
  min-width:190px;min-height:49px;padding:11px 24px;
  border-radius:999px;color:#fff;background:#2FB398;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 20px rgba(22,64,57,.23);
  font-size:15px;font-weight:700;white-space:nowrap;
}
#btnEnterBuilding:hover,#btnEnterBuilding:focus-visible {background:#1F8C77;}
@media(max-width:720px) {
  #btnEnterBuilding {bottom:22px;min-height:48px;}
}


/* ---------- 简洁密码入口 ---------- */
#sceneWrap,#touch {touch-action:none;}
.gate{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,#F6F3ED,#E6EEF6)}
.gate.hide{display:none}
.gate-card{width:min(390px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(20,40,64,.18);padding:26px 22px}
.gate-card h2{margin:0 0 18px;font-size:21px;line-height:1.3;text-align:center}
#gateForm{display:flex;gap:9px;align-items:stretch}
#gatePass{flex:1 1 0;width:100%;min-width:0;min-height:46px;border:1px solid var(--line);border-radius:10px;
  padding:10px 11px;outline:none;font-size:16px}
#gatePass:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,107,176,.12)}
#gateBtn{flex:0 0 auto;min-height:46px;white-space:nowrap}
.gate-error{margin:9px 0 0;color:var(--danger);font-size:12.5px;min-height:0}
.gate-error:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:420px){.gate-card{padding:22px 16px}#gateForm{flex-direction:column}}