:root{--ink:#3a3a3a;--accent:#e56b3c;--sea:#7fd3d6;--card:#fffdf8;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#bfe9ea;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Heiti TC",sans-serif;color:var(--ink)}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pill{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;gap:5px;white-space:nowrap;background:#fff;border-radius:999px;
  padding:5px 11px 5px 6px;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.18);
  border:0;color:var(--ink);transition:opacity .2s;user-select:none}
.pill .n{font-size:11px;color:#fff;background:var(--accent);border-radius:999px;padding:1px 6px;font-weight:800;letter-spacing:.5px}
.pill:after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:#fff;border-bottom:0}
.pill.warn .n{background:#9a9a9a}
.pill.active{outline:3px solid var(--accent)}
.tag{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  background:rgba(255,253,245,.92);color:#7a5a2a;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 5px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);white-space:nowrap;transition:opacity .2s;user-select:none;border:0}
.hide{opacity:0!important;pointer-events:none!important}
#hdr{position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top));pointer-events:none}
.brand{background:rgba(255,253,248,.95);border-radius:16px;padding:9px 14px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.brand .t1{font-size:20px;font-weight:900;color:var(--accent);letter-spacing:1px}
.brand .t2{font-size:11px;color:#777;margin-top:2px}
#badge{position:absolute;right:10px;top:calc(12px + env(safe-area-inset-top));background:rgba(58,58,58,.72);color:#fff;
  font-size:11px;padding:4px 9px;border-radius:999px;pointer-events:none}
#tools{position:absolute;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:8px}
#tools button{border:0;background:#fffdf8;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:700;color:var(--ink);
  box-shadow:0 3px 10px rgba(0,0,0,.15);font-family:inherit}
#list{position:absolute;right:10px;bottom:calc(62px + env(safe-area-inset-bottom));background:#fffdf8;border-radius:16px;padding:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);max-height:60vh;overflow:auto;min-width:190px}
#list button{display:flex;gap:8px;align-items:center;width:100%;border:0;background:none;padding:9px 10px;font-size:15px;text-align:left;font-family:inherit;color:var(--ink);border-radius:10px}
#list button:active{background:#f3ece0}
#list .n{font-size:11px;color:#fff;background:var(--accent);border-radius:999px;padding:1px 6px;font-weight:800}
.hidden{display:none!important}
#sheetMask{position:absolute;inset:0;background:rgba(0,0,0,.08)}
#sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;background:var(--card);border-radius:22px 22px 0 0;
  padding:10px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.18);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40%);opacity:.3}to{transform:none;opacity:1}}
.grip{width:42px;height:5px;border-radius:9px;background:#ddd;margin:0 auto 10px}
#sheetClose{position:absolute;right:12px;top:10px;border:0;background:#f1ebe0;border-radius:999px;width:34px;height:34px;font-size:16px;color:#666}
.sheet-head{display:flex;align-items:center;gap:10px;margin:4px 40px 8px 0}
.sheet-head .no{background:var(--accent);color:#fff;font-weight:800;border-radius:999px;padding:2px 9px;font-size:13px}
.sheet-head h2{margin:0;font-size:21px}
#sheetBody p{margin:6px 0;font-size:16px;line-height:1.55}
#sheetBody p.note{font-size:13px;color:#888}
#sheetBody .pend{color:#b26a00;font-weight:700}
#sheetBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#sheetBtns a{flex:1;text-align:center;text-decoration:none;background:var(--accent);color:#fff;font-weight:800;padding:13px 14px;border-radius:14px;font-size:16px}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:#2a6f73;background:#bfe9ea;transition:opacity .4s}
@media (min-width:900px){.brand .t1{font-size:24px}#sheet{left:auto;right:20px;bottom:20px;border-radius:22px;width:400px}}