/* 島嶼畫面：全螢幕 3D 場景，左上品牌與月份，右側狀態面板；顏色全部走 --hub-* 變數 */
:root{
  --hub-ink:#12282b; --hub-muted:#4f6669; --hub-panel:rgba(252,253,250,.95); --hub-line:#c4d4d3;
  --hub-sky-top:#bfe1ea; --hub-sky-bot:#dcefee; --hub-signal:#e89a0c; --hub-signal-ink:#2a1b00;
  --hub-ok:#1b7f4b; --hub-wait:#6b7f82; --hub-chip:rgba(255,255,255,.93); --hub-shadow:0 6px 24px rgba(18,40,43,.16);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --hub-ink:#e4efee; --hub-muted:#9fb4b5; --hub-panel:rgba(14,28,31,.93); --hub-line:#2c4246;
  --hub-sky-top:#07121a; --hub-sky-bot:#10242b; --hub-signal:#ffb830; --hub-signal-ink:#2a1b00;
  --hub-ok:#6fdc9e; --hub-wait:#8aa0a3; --hub-chip:rgba(14,28,31,.9); --hub-shadow:0 6px 24px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --hub-ink:#e4efee; --hub-muted:#9fb4b5; --hub-panel:rgba(14,28,31,.93); --hub-line:#2c4246;
  --hub-sky-top:#07121a; --hub-sky-bot:#10242b; --hub-signal:#ffb830; --hub-signal-ink:#2a1b00;
  --hub-ok:#6fdc9e; --hub-wait:#8aa0a3; --hub-chip:rgba(14,28,31,.9); --hub-shadow:0 6px 24px rgba(0,0,0,.4); color-scheme:dark}

body.hub-map{padding:0;overflow:hidden;background:var(--hub-sky-bot)}
#hubMap{position:fixed;inset:0;z-index:5;overflow:hidden;background:var(--hub-sky-bot);color:var(--hub-ink);font-family:var(--f-sans)}
#hubSky{position:absolute;inset:0;background:linear-gradient(var(--hub-sky-top),var(--hub-sky-bot) 62%)}
#hubCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#hubLabels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chip3d{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:auto;cursor:pointer;display:flex;gap:8px;align-items:center;
  font-size:12px;line-height:1.2;padding:5px 11px;border-radius:999px;background:var(--hub-chip);border:1px solid var(--hub-line);color:var(--hub-ink);box-shadow:var(--hub-shadow)}
.chip-island{font-size:13px;padding:7px 14px}
.chip-island b{font-weight:700}
.chip-island span{color:var(--hub-muted);font-family:var(--f-mono);font-size:12px}
.chip-island.dim{opacity:.8}
.chip-person .dot{width:9px;height:9px;border-radius:50%;background:var(--hub-wait);flex:none}
.chip-person.done{border-color:var(--hub-signal)}
.chip-person.done .dot{background:var(--hub-signal);box-shadow:0 0 9px 2px var(--hub-signal)}
.chip-person.sel{outline:2px solid var(--hub-ink);outline-offset:1px}

.hub-top{position:absolute;left:0;right:0;top:env(safe-area-inset-top,0px);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
  padding:14px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.hub-top>*{pointer-events:auto}
.brand h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.04em;color:var(--hub-ink)}
.brand p{margin:2px 0 0;font-size:12px;color:var(--hub-muted)}
.mnav{display:flex;align-items:center;gap:2px;background:var(--hub-chip);border:1px solid var(--hub-line);border-radius:999px;padding:3px;box-shadow:var(--hub-shadow)}
.mnav button{font:inherit;width:40px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--hub-ink);font-size:18px;cursor:pointer}
.mnav button:hover{background:var(--hub-line)}
.mnav span{min-width:104px;text-align:center;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
#hubMap button:focus-visible,.hubbar button:focus-visible,.chip3d:focus-visible{outline:2px solid var(--hub-signal);outline-offset:2px}

.hub-panel{position:absolute;top:calc(env(safe-area-inset-top,0px) + 78px);right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:340px;display:flex;flex-direction:column;min-height:0;
  background:var(--hub-panel);border:1px solid var(--hub-line);border-radius:10px;box-shadow:var(--hub-shadow);backdrop-filter:blur(8px)}
.hub-panel>header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hub-line)}
.hub-panel>header span{font-size:13px;font-weight:700}
#hubPanelToggle{display:none;font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--hub-line);background:transparent;color:var(--hub-ink);cursor:pointer}
#hubPanelBody{overflow:auto;padding:4px 14px 14px;min-height:0}
.blk{padding-top:12px}
.blk+.blk{margin-top:14px;border-top:1px solid var(--hub-line)}
.bh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bh h2{margin:0;font-size:15px;font-weight:700}
.count{font-family:var(--f-mono);font-size:13px;color:var(--hub-muted);font-variant-numeric:tabular-nums}
.blk .sub{margin:3px 0 8px;font-size:13px;color:var(--hub-muted)}
.blk.dim{opacity:.75}
ul.people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.people li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px;border:1px solid var(--hub-line);border-radius:8px;cursor:pointer}
ul.people li.sel{border-color:var(--hub-ink)}
ul.people li.done{border-color:var(--hub-signal)}
.mark{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--hub-line);color:var(--hub-muted)}
li.done .mark{background:var(--hub-signal);color:var(--hub-signal-ink);box-shadow:0 0 12px 1px var(--hub-signal)}
.who{min-width:0}
.nrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nm{font-size:14px;font-weight:700}
.st{display:block;font-size:12px;color:var(--hub-muted);margin-top:1px}
li.done .st{color:var(--hub-ok)}
ul.files{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px dashed var(--hub-line);display:grid;gap:5px}
ul.files li{display:grid;gap:0;padding:0;border:0;cursor:default;grid-template-columns:minmax(0,1fr)}
.fn{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm{font-size:11px;color:var(--hub-muted)}
.mini{font:inherit;font-size:12px;padding:2px 10px;border-radius:999px;border:1px solid var(--hub-signal);background:var(--hub-signal);color:var(--hub-signal-ink);cursor:pointer;font-weight:500}
.mini.ghost{background:transparent;border-color:var(--hub-line);color:var(--hub-muted)}
form.rn{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
form.rn input{font:inherit;font-size:13px;width:110px;padding:3px 8px;border-radius:6px;border:1px solid var(--hub-line);background:transparent;color:var(--hub-ink)}
.go{margin-top:12px;width:100%;font:inherit;font-weight:700;font-size:14px;padding:11px 14px;border-radius:8px;border:0;background:var(--hub-signal);color:var(--hub-signal-ink);cursor:pointer}
.go:hover{filter:brightness(1.06)}
.note{font-size:12px;margin:8px 0 0}.note.err{color:var(--hub-ok)}
.hub-hint{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));font-size:12px;color:var(--hub-muted);background:var(--hub-chip);border:1px solid var(--hub-line);border-radius:999px;padding:5px 12px;max-width:calc(100% - 32px)}
#hubToast{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);transform:translateX(-50%);background:var(--hub-ink);color:var(--hub-sky-bot);padding:8px 16px;border-radius:999px;font-size:13px;box-shadow:var(--hub-shadow)}
#hubNote{position:absolute;left:50%;top:40%;transform:translateX(-50%);max-width:min(420px,calc(100% - 32px));text-align:center;color:var(--hub-muted);font-size:13px}

@media (max-width:899px){
  .hub-panel{top:auto;left:max(16px,env(safe-area-inset-left,0px));width:auto;max-height:46%;bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .hub-panel.collapsed{max-height:none}
  .hub-panel.collapsed #hubPanelBody{display:none}
  #hubPanelToggle{display:block}
  .hub-hint{display:none}
  .brand h1{font-size:19px}
}
.hubbar{max-width:1500px;margin:0 auto;padding-block:12px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hubbar button{font:inherit;font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-weight:700}
.hubbar span{font-size:12px;color:var(--muted)}
#whoRow{align-items:center}
#who{font:inherit;font-size:13px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:5px 8px;min-width:140px}
@media (prefers-reduced-motion: reduce){#hubMap *{transition:none!important}}

/* 網站版：登入身分列 */
.meline{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0 2px;font-size:13px;font-weight:700}
.meline small{display:block;font-weight:400;font-size:12px;color:var(--hub-muted);word-break:break-all}
.meline.err{color:var(--hub-ink);font-weight:500;background:var(--hub-line);border-radius:8px;padding:10px 12px;margin-top:10px}
a.mini{text-decoration:none;display:inline-block;white-space:nowrap}
.mebtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tagme{font-size:11px;padding:0 7px;border-radius:999px;border:1px solid var(--hub-line);color:var(--hub-muted)}
#whoName{font-size:13px}