/* 孤島 · 樣式
 * 舞台固定 1200×675（設計座標），依視窗等比縮放置中。
 * 淺色模式＝整個畫面反相（#viewport.day），所以只需要寫深色的顏色。 */

:root{
  --bg:#0A0A0B; --ink:#ECECEC; --hi:#F5F5F5; --sub:#C8C8CC; --mute:#8C8C91; --dim:#6E6E74;
  --lamp:#D8C9A0; --glow:#F3E9CF; --panel:rgba(10,10,12,.96); --line:rgba(236,236,236,.08);
  --serif:'Noto Serif TC',serif; --sans:'Noto Sans TC',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif)}
body.lock{overflow:hidden}
a{color:var(--lamp)}a:hover{color:var(--hi)}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
#track{height:520vh}

#viewport{position:fixed;inset:0;overflow:hidden;background:var(--bg);transition:filter .9s ease}
#viewport.day{filter:invert(1) hue-rotate(180deg) brightness(.93) sepia(.08)}
#stage{position:absolute;left:0;top:0;width:1200px;height:675px;transform-origin:0 0;overflow:hidden}
#scene{position:absolute;inset:0;background:var(--bg)}
.layer{position:absolute;inset:0;pointer-events:none}

/* ───── 背景 ───── */
#photo{background-size:cover;background-position:center;filter:grayscale(1) contrast(1.3) brightness(.34);opacity:0}
#photoShade{background:linear-gradient(180deg,rgba(10,11,14,.55) 0%,rgba(10,10,11,.2) 40%,rgba(10,10,11,.92) 66%,#0A0A0B 100%);opacity:0}
#stars,#wx{position:absolute;left:0;top:0;width:1200px;height:420px;overflow:hidden;pointer-events:none}
#stars{mix-blend-mode:screen;opacity:0}
#starsSm,#starsBig{position:absolute;left:0;top:0;border-radius:50%}
#starsSm{width:1px;height:1px}#starsBig{width:2px;height:2px}
#wxFog{position:absolute;left:0;right:0;bottom:0;height:230px;background:linear-gradient(to top,rgba(150,155,162,.24),rgba(150,155,162,.08) 55%,transparent)}
#dayBg{opacity:0;transition:opacity .9s ease}
.day #dayBg{opacity:1}
#world{position:absolute;inset:0;width:100%;height:100%}
#vign{background:radial-gradient(90% 75% at 50% 62%,transparent 45%,rgba(4,4,5,.9) 100%)}

.vd-meteor{position:absolute;left:830px;top:110px;width:140px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,245,245,.95));transform-origin:100% 50%;transform:rotate(24deg);opacity:0;animation:vdMeteor 11s ease-in infinite}
@keyframes vdMeteor{0%{opacity:0;translate:-110px -49px}2%{opacity:1}7%{opacity:0;translate:0 0}100%{opacity:0;translate:0 0}}
.vd-cloud{position:absolute;width:70%;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(150,156,164,.2),transparent);filter:blur(10px);animation:vdDrift 70s linear infinite alternate}
.vd-cloud2{width:58%;height:100px;animation-duration:90s;animation-direction:alternate-reverse}
@keyframes vdDrift{from{translate:-6% 0}to{translate:6% 0}}
.vd-rain{position:absolute;left:0;right:0;top:-60px;bottom:-60px;background:repeating-linear-gradient(105deg,rgba(220,224,230,.1) 0 1px,transparent 1px 11px);animation:vdRain .9s linear infinite}
@keyframes vdRain{from{translate:0 0}to{translate:0 42.47px}}
.vd-dcloud{position:absolute;overflow:visible;opacity:.92;animation:vdDrift 120s linear infinite alternate}

/* ───── 島上 ───── */
.pose{opacity:0;transition:opacity 1.2s}
.pose.on{opacity:1}
#walkG{transition:opacity .4s}
.vd-flame{transform-box:fill-box;transform-origin:50% 100%;animation:vdFlame .9s ease-in-out infinite alternate}
@keyframes vdFlame{from{scale:1 1}to{scale:.82 1.18}}
.vd-jump{animation:vdJump .9s ease-in-out infinite}
@keyframes vdJump{0%,100%{translate:0 0}50%{translate:0 -.8px}}
.vd-step{animation:vdStep .5s ease-in-out infinite}
@keyframes vdStep{0%,100%{translate:0 0}50%{translate:0 -.25px}}
.vd-leg1,.vd-leg2{transform-box:fill-box;transform-origin:50% 0;animation:vdLeg .5s ease-in-out infinite alternate}
.vd-leg2{animation-direction:alternate-reverse}
@keyframes vdLeg{from{rotate:-18deg}to{rotate:18deg}}
.vd-rod{transform-box:fill-box;transform-origin:0% 50%;animation:vdRod 17s ease-in-out infinite}
@keyframes vdRod{0%,86%,100%{rotate:0deg}89%{rotate:-9deg}93%{rotate:3deg}96%{rotate:0deg}}
.vd-bobber{transform-box:fill-box;animation:vdBobber 3.4s ease-in-out infinite}
@keyframes vdBobber{0%,100%{translate:0 0}50%{translate:0 .5px}}
#loot svg{position:absolute;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
#loot .lglow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(243,233,207,.5),rgba(243,233,207,0))}

/* ───── 句子、燈塔、島 ───── */
#sentence{position:absolute;left:0;right:0;top:196px;margin:0;text-align:center;font-weight:300;font-size:12px;line-height:1.4;letter-spacing:.42em;padding-left:.42em;color:#A8A8AE;pointer-events:none}
#skyBtn{position:absolute;left:0;top:0;width:1200px;height:420px;padding:0;background:transparent;border:0;cursor:default;outline:0}
.vd-lh{position:absolute;cursor:pointer;background:transparent;border:0;border-radius:50%;padding:0;z-index:3;transition:box-shadow .5s}
.vd-lh:hover,.vd-lh:focus-visible{box-shadow:0 0 0 1px rgba(216,201,160,.35),0 0 28px rgba(216,201,160,.25);outline:0}
.vd-isle{position:absolute;background:transparent;border:0;padding:0;border-radius:50%;cursor:default;z-index:2;transition:background .6s}
.vd-isle:hover,.vd-isle:focus-visible{background:radial-gradient(closest-side,rgba(243,233,207,.18),rgba(243,233,207,.06) 60%,rgba(243,233,207,0));outline:0}

/* 我的最愛（拆解階段） */
.fav-line{position:absolute;height:0;border-top:1px dashed rgba(236,236,236,.28);pointer-events:none}
.fav{position:absolute;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:0;color:var(--sub);cursor:pointer}
.fav svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fav:hover,.fav:focus-visible{color:var(--hi);outline:0}

/* 共用：圖示按鈕、提示字、漂浮 */
.ic-btn,.x-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:0;color:#A8A8AE;cursor:pointer}
.ic-btn.lamp{color:var(--lamp)}
.ic-btn:hover,.ic-btn:focus-visible,.x-btn:hover,.x-btn:focus-visible{color:var(--hi);outline:0}
.ic-btn:disabled{opacity:.35;cursor:default}
.ic-btn svg,.x-btn svg,.bhead svg,.row-ic,.chip svg,.vd-flot svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.vd-in{background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:13px;letter-spacing:.04em;min-width:0}
.vd-in::placeholder{color:#7C7C82}
.vd-in.center{text-align:center;letter-spacing:.06em}
.vd-drift{display:flex;align-items:center;justify-content:center;text-decoration:none}
.vd-drift:hover,.vd-drift:focus-visible{color:var(--hi)!important;outline:0}
.vd-bob{animation:vdBob 6s ease-in-out infinite}
@keyframes vdBob{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -3px;rotate:2deg}}
.vd-tip{position:absolute;top:44px;left:50%;translate:-50% 0;white-space:nowrap;font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:#B4B4BA;opacity:0;transition:opacity .3s;pointer-events:none}
.vd-drift:hover .vd-tip,.vd-drift:focus-visible .vd-tip{opacity:1}
.vd-fade{animation:vdLightIn .9s ease both}
.vd-msg{animation:vdLightIn 1.2s ease both}
@keyframes vdLightIn{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2A2A2E transparent}

/* ───── 拉近後的島 ───── */
#zoomUI{position:absolute;inset:0;pointer-events:none}
#zoomUI>*{pointer-events:auto}
#objBtns{position:absolute;inset:0;pointer-events:none}
.vd-obj{position:absolute;width:44px;height:44px;background:transparent;border:0;padding:0;border-radius:50%;cursor:pointer;z-index:4;pointer-events:auto;transition:box-shadow .4s}
.vd-obj:hover,.vd-obj:focus-visible{box-shadow:0 0 0 1px rgba(216,201,160,.45),0 0 18px rgba(216,201,160,.2);outline:0}
#card,#bubble{position:absolute;width:280px;display:flex;flex-direction:column;background:rgba(10,10,12,.94);border:1px solid rgba(236,236,236,.14);font-family:var(--sans)}
#card{padding:18px 20px;gap:10px;z-index:5}
#card .kick{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--lamp)}
#card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
#card .top .x-btn{width:28px;height:28px;margin:-8px -8px 0 0;color:var(--mute)}
#card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.6;letter-spacing:.06em;color:var(--hi)}
#card p.body{margin:0;white-space:pre-line;font-size:12px;line-height:1.9;letter-spacing:.04em;color:#B4B4BA}
#card .lnk,.cabin-lnk{align-self:flex-start;font-size:12px;letter-spacing:.1em;color:var(--lamp);text-decoration:none;border-bottom:1px solid rgba(216,201,160,.4);background:none;border-top:0;border-left:0;border-right:0;padding:0;cursor:pointer}
#card .rowlinks{display:flex;flex-direction:column}
#card .rowlinks button{display:flex;align-items:center;min-height:34px;padding:0;background:none;border:0;border-bottom:1px solid rgba(236,236,236,.06);color:#D4D4D8;font-size:12px;text-align:left;cursor:pointer}
#card .rowlinks button:hover{color:var(--hi)}
#bubble{padding:16px 16px 12px;gap:12px;z-index:6;transform:translateY(calc(-100% - 10px))}
#bubble .x-btn{position:absolute;right:4px;top:4px;width:28px;height:28px;color:var(--mute)}
#talkLines{display:flex;flex-direction:column;gap:8px;padding-right:18px}
#talkLines .bot{margin:0;font-family:var(--serif);font-size:14px;line-height:1.8;letter-spacing:.08em;color:#F0F0F2;white-space:pre-line}
#talkLines .user{margin:0;align-self:flex-end;font-size:12px;line-height:1.7;letter-spacing:.06em;color:var(--lamp)}
#talkOpts{display:flex;flex-wrap:wrap;gap:6px}
#talkOpts button,.chip{min-height:30px;padding:0 10px;background:transparent;border:1px solid rgba(236,236,236,.16);color:var(--sub);font-size:11px;letter-spacing:.06em;cursor:pointer}
#talkOpts button:hover,.chip:hover{border-color:rgba(216,201,160,.5);color:var(--hi)}
.line-input{display:flex;align-items:center;gap:2px;border-bottom:1px solid rgba(236,236,236,.24)}
.line-input .vd-in{flex-grow:1;height:36px;font-size:12px}
.line-input .ic-btn{width:32px;height:36px}
#bubble .tail{position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:rgba(10,10,12,.94);border-right:1px solid rgba(236,236,236,.14);border-bottom:1px solid rgba(236,236,236,.14);transform:rotate(45deg)}

/* ───── 面板（側邊欄） ───── */
.panel{position:absolute;right:0;top:0;bottom:0;width:360px;padding:14px 10px 28px 24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-left:1px solid rgba(236,236,236,.1);z-index:6;font-family:var(--sans);color:#D4D4D8;scrollbar-width:thin;scrollbar-color:#2A2A2E transparent;pointer-events:auto}
.panel.left{left:0;right:auto;width:340px;padding:20px 24px 28px;border-left:0;border-right:1px solid rgba(236,236,236,.1);background:rgba(11,11,13,.95)}
.panel.wide{width:520px}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.p-head h2{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:300;font-size:15px;letter-spacing:.4em;color:var(--hi);min-width:0}
.p-head .acts{display:flex}
.p-sub{margin:4px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mute)}
.p-sec{display:flex;flex-direction:column;gap:10px;padding-right:14px}
.panel.left .p-sec{padding-right:0}
.h3{margin:0;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.28em;color:var(--mute)}
.note{margin:0;font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--mute)}
.pill{min-height:36px;padding:0 16px;background:transparent;border:1px solid rgba(236,236,236,.16);color:#A8A8AE;font-size:12px;letter-spacing:.16em;cursor:pointer}
.pill.on{border-color:var(--lamp);color:var(--hi)}
.pill:hover{color:var(--hi)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px 0 12px;color:#D4D4D8;font-size:12px}
.chip svg{width:10px;height:10px;color:var(--mute);stroke-width:1.6}
.field{display:flex;align-items:center;border-bottom:1px solid rgba(236,236,236,.2)}
.field .vd-in{flex-grow:1;height:40px}
.field .ic-btn{width:40px;height:40px}
.mod{display:flex;align-items:center;justify-content:space-between;min-height:40px;font-size:13px;letter-spacing:.04em;cursor:pointer;border-bottom:1px solid rgba(236,236,236,.06)}
.mod input{width:16px;height:16px;accent-color:var(--lamp)}
.area-row{display:flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid rgba(236,236,236,.06)}
.area-row.off{opacity:.45}
.area-row .vd-in{flex-grow:1;height:36px;color:#E4E4E8}
.area-row .code{width:22px;flex-shrink:0;font-family:var(--mono);font-size:10px;color:var(--mute)}
.mini{min-height:32px;padding:0 10px;background:transparent;border:1px solid rgba(236,236,236,.16);color:#A8A8AE;font-size:11px;letter-spacing:.1em;cursor:pointer;white-space:nowrap}
.mini.lamp{border-color:rgba(216,201,160,.5);color:var(--lamp)}
.add-link{align-self:flex-start;display:flex;align-items:center;gap:8px;min-height:44px;padding:0;background:transparent;border:0;color:var(--lamp);font-size:12px;letter-spacing:.14em;cursor:pointer}
.add-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.city-opt{display:flex;align-items:center;min-height:38px;padding:0 10px;background:none;border:0;border-bottom:1px solid rgba(236,236,236,.06);color:var(--sub);font-size:12px;text-align:left;cursor:pointer}
.city-opt:hover{color:var(--hi);background:rgba(216,201,160,.06)}

/* 列表（面板與方塊共用） */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:10px;min-height:40px;padding:0;background:none;border:0;border-bottom:1px solid rgba(236,236,236,.06);color:#D4D4D8;font-size:13px;letter-spacing:.04em;text-align:left;cursor:pointer;width:100%}
.li:hover,.li:focus-visible{color:var(--hi);outline:0;background:rgba(216,201,160,.04)}
.li .t{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .m{flex-shrink:0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
.li .row-ic{width:16px;height:16px;flex-shrink:0;color:var(--mute)}
.li.static{cursor:default}.li.static:hover{background:none;color:#D4D4D8}
.empty{margin:0;padding:10px 0;font-size:12px;color:var(--mute)}
.loading{margin:0;padding:10px 0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim)}

/* 資料面板（板塊 → 資料庫 → 一筆） */
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute)}
.crumbs button{padding:0;background:none;border:0;color:var(--mute);cursor:pointer;font:inherit}
.crumbs button:hover{color:var(--lamp)}
.kv{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 14px}
.kv dt,.kv dd{margin:0;padding:9px 0;border-bottom:1px solid rgba(236,236,236,.06);font-size:12px;line-height:1.7}
.kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mute);padding-top:11px}
.kv dd{color:#D4D4D8;word-break:break-word;white-space:pre-line}
.kv dd a{text-decoration:none;border-bottom:1px solid rgba(216,201,160,.35)}
.prose{margin:0;white-space:pre-line;font-family:var(--serif);font-weight:300;font-size:13px;line-height:2;color:var(--sub)}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.thumbs figure{margin:0;display:flex;flex-direction:column;gap:4px}
.thumbs .ph{aspect-ratio:1;background:rgba(236,236,236,.04) center/cover no-repeat;border:1px solid rgba(236,236,236,.06)}
.thumbs figcaption{font-size:10px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-filter{display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(236,236,236,.16)}
.db-filter svg{width:14px;height:14px;color:var(--mute);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.db-filter .vd-in{flex-grow:1;height:38px}
.li .sub2{display:block;font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .stack{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:6px 0}
.li .stack .t{white-space:nowrap}

/* ───── 儀表板 ───── */
#dash{position:absolute;inset:0;pointer-events:none}
#dash>*{pointer-events:auto}
#dash>#constellation,#dash>#searchLine,#dash>.vd-flot,#dash>#fall,#dash>#toast,#dash>#chatFloat{pointer-events:none}
.vd-star{position:absolute;left:35px;top:40px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 0 6px rgba(245,245,245,.75));animation:vdTwinkle 4.5s ease-in-out infinite;transition:transform .4s}
.vd-star:hover,.vd-star:focus-visible{transform:scale(1.15);outline:0}
.day .vd-star svg{visibility:hidden}
@keyframes vdTwinkle{0%,100%{opacity:.85}50%{opacity:1}}

#constellation{position:absolute;inset:0}
.c-link{position:absolute;height:0;border-top:1px solid rgba(236,236,236,.14);transform-origin:0 0;opacity:.6;pointer-events:none}
.day .c-link{opacity:0}
.c-star{position:absolute;width:44px;height:44px;padding:0;background:none;border:0;color:var(--sub);cursor:pointer;pointer-events:auto}
.c-star .dot{display:block;border-radius:50%;background:var(--hi)}
.c-star .bird{display:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.day .c-star .dot{display:none}.day .c-star .bird{display:block}

#searchLine{position:absolute;left:30px;top:464px;width:300px;height:1px;background:linear-gradient(90deg,transparent,rgba(236,236,236,.42) 18%,rgba(236,236,236,.42) 82%,transparent);opacity:0;transition:opacity .4s}
#searchLine.on{opacity:1}
#searchBox{position:absolute;left:35px;top:421px;width:280px;height:44px;display:flex;align-items:center;gap:2px;font-family:var(--sans)}
#searchBox .vd-in{flex-grow:1;height:40px}
#searchResults{position:absolute;left:35px;bottom:262px;width:320px;max-height:300px;padding:6px 0;overflow-y:auto;background:rgba(10,10,12,.94);border:1px solid rgba(236,236,236,.12);font-family:var(--sans);z-index:5;scrollbar-width:thin;scrollbar-color:#2A2A2E transparent}
#searchResults .li{padding:0 14px;min-height:40px;font-size:12px}

#boat{position:absolute;left:468px;top:437px;width:44px;height:44px;padding:0;background:transparent;border:0;color:var(--sub);cursor:pointer;animation-delay:-3.2s}
#buoy{position:absolute;left:1104px;top:432px;width:44px;height:44px;padding:0;background:transparent;border:0;color:#A8A8AE;cursor:pointer;animation-duration:7s}
#buoy svg{position:absolute;left:8px;top:7px}
#buoy.sync svg{animation:vdBlink 1.6s ease-in-out infinite}
#buoy.off{color:#5A5A60}
@keyframes vdBlink{0%,100%{opacity:.35}50%{opacity:1}}
.vd-flot{position:absolute;top:456px;color:#A8A8AE;opacity:0;animation:vdFlot 95s linear infinite;pointer-events:none}
@keyframes vdFlot{0%{translate:0 0;opacity:0}6%{opacity:.75}80%{translate:-440px 0;opacity:.75}88%{translate:-470px 0;opacity:0}100%{translate:-470px 0;opacity:0}}
#fall{position:absolute;left:0;top:0}
.day #fall{display:none}
.vd-fall{position:absolute;width:150px;height:1px;background:linear-gradient(90deg,rgba(255,244,214,.95),rgba(255,244,214,0));transform-origin:0 50%;transform:rotate(-43deg);opacity:0;animation:vdFall 48s ease-in infinite}
@keyframes vdFall{0%{translate:300px -280px;opacity:0}2%{opacity:1}6%{translate:0 0;opacity:1}7%{translate:0 0;opacity:0}100%{translate:0 0;opacity:0}}
.vd-impact{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,205,.95),rgba(255,240,205,0));opacity:0;animation:vdImpact 48s ease-out infinite}
@keyframes vdImpact{0%,5.8%{opacity:0;scale:.4}6.6%{opacity:1;scale:1.4}12%{opacity:0;scale:2.2}100%{opacity:0;scale:2.2}}

#dateCol{position:absolute;left:48px;top:504px;height:104px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.16em;color:#9A9AA0;white-space:nowrap}
#clock{position:absolute;left:124px;top:498px}
#setBtn{position:absolute;left:35px;bottom:18px}

.block{position:absolute;top:487px;width:180px;display:flex;flex-direction:column;gap:2px;font-family:var(--sans)}
.bhead{height:44px;display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid transparent}
.bhead>svg{color:var(--mute);flex-shrink:0}
.bhead.adding{border-bottom-color:rgba(236,236,236,.22)}
.bhead.adding>svg{display:none}
.bhead .vd-in{flex-grow:1;height:44px}
.block .list li{border-bottom:1px solid rgba(236,236,236,.08)}
.block .li{min-height:36px;border:0;font-size:12px;color:var(--sub)}
.block .li .m{font-size:10px}
.block ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#inbox{max-height:108px}
#inbox li{display:flex;align-items:center;gap:8px;min-height:36px}
#inbox .mk{width:5px;height:5px;flex-shrink:0;border:1px solid var(--mute);transform:rotate(45deg)}
#inbox .tx{flex-grow:1;min-width:0;font-size:12px;letter-spacing:.04em;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#inbox .ic-btn{width:36px;height:36px;color:var(--mute)}
#inbox .ic-btn svg{width:15px;height:15px}
#inbox input{flex-grow:1;height:36px;background:rgba(236,236,236,.05);outline:1px solid rgba(216,201,160,.5);color:var(--hi);padding:0 8px}
#stocks .li{gap:10px}
#stocks .px{flex-shrink:0;font-family:var(--mono);font-size:11px;color:#D4D4D8}
#stocks .chg{width:50px;flex-shrink:0;text-align:right;font-family:var(--mono);font-size:10px;color:var(--mute)}
#stocks .chg.up{color:#C9A9A0}#stocks .chg.down{color:#9FB5A8}

#toast{position:absolute;left:0;right:0;top:40px;margin:0;text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--lamp);z-index:9}

/* 守燈人：燈塔上方 */
#chatFloat{position:absolute;inset:0}
#chatFloat .dim{position:absolute;inset:0;background:rgba(5,5,6,.66);pointer-events:auto}
#chatFloat .lampGlow{position:absolute;left:572px;top:395px;width:64px;height:64px;border-radius:50%;background:radial-gradient(closest-side,rgba(243,233,207,.9),rgba(243,233,207,.25) 35%,rgba(243,233,207,0))}
#chatFloat .lampAxis{position:absolute;left:604px;top:390px;width:0;height:28px;border-left:1px dashed rgba(236,236,236,.24)}
#chatFloat section{position:absolute;left:383px;top:92px;width:440px;height:296px;display:flex;flex-direction:column;pointer-events:auto;font-family:var(--sans)}
#chatFloat .log{flex-grow:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:0 12px 20px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 55%);mask-image:linear-gradient(to bottom,transparent 0,#000 55%)}
#floatMsgs{margin-top:auto;display:flex;flex-direction:column;gap:18px}
#floatMsgs .user{margin:0;text-align:center;font-size:12px;line-height:1.9;letter-spacing:.1em;color:var(--lamp)}
#floatMsgs .bot{margin:0;text-align:center;font-family:var(--serif);font-weight:300;font-size:14px;line-height:2;letter-spacing:.14em;color:#D4D4D8;white-space:pre-line}
#floatMsgs .acts,.msg-acts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
#chatFloat .line-input{border-bottom-color:rgba(236,236,236,.26)}
#chatFloat .line-input .vd-in{height:40px;font-size:13px}
#chatFloat .line-input .ic-btn{width:34px;height:40px}
.presets{position:absolute;left:0;bottom:46px;width:240px;padding:6px 0;background:rgba(10,10,12,.94);border:1px solid rgba(236,236,236,.12);z-index:2}
.vd-pre{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;min-height:44px;padding:0 16px;background:transparent;border:0;color:#E4E4E8;font-size:13px;letter-spacing:.06em;text-align:left;cursor:pointer}
.vd-pre span{font-size:11px;color:var(--mute);letter-spacing:.04em}
.vd-pre:hover,.vd-pre:focus-visible{background:rgba(216,201,160,.08);outline:0}
.typing{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim);text-align:center}

/* 守燈人側邊欄 */
#chatSide{width:380px;padding:0;gap:0}
#chatSide .p-head{padding:14px 10px 10px 24px}
.lampdot{width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px rgba(243,233,207,.8)}
.tabs{display:flex;gap:22px;padding:0 24px;border-bottom:1px solid var(--line)}
.tab{min-height:40px;padding:0;background:transparent;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;color:var(--mute);font-size:12px;letter-spacing:.2em;cursor:pointer}
.tab.on{border-bottom-color:var(--lamp);color:var(--hi)}
.side-log{flex-grow:1;min-height:0;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:#2A2A2E transparent}
.side-msg{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.side-msg.user{align-items:flex-end}
.side-msg time{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim)}
.side-msg p{margin:0;max-width:92%;font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.95;letter-spacing:.06em;color:var(--sub);white-space:pre-line}
.side-msg.user p{max-width:86%;padding:9px 13px;background:rgba(236,236,236,.06);font-family:var(--sans);font-weight:400;line-height:1.8;letter-spacing:0;color:#E4E4E8}
.side-input{position:relative;margin:0 16px 18px}
.side-input .presets{left:0;right:0;width:auto;bottom:48px;background:#0E0E10}
.side-input .line-input{border-bottom-color:rgba(236,236,236,.22)}
.side-input .line-input .vd-in{height:44px;font-size:13px}
.side-input .line-input .ic-btn{width:40px;height:44px}
.side-body{overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:22px}
.pending{padding:14px 16px;border:1px solid rgba(236,236,236,.14);box-shadow:inset 2px 0 0 var(--lamp);display:flex;flex-direction:column;gap:12px}
.pending p{margin:0;font-size:13px;line-height:1.8;color:#E4E4E8}
.btn-ok,.btn-no{min-height:36px;padding:0 14px;background:transparent;border:1px solid var(--lamp);color:var(--hi);font-size:12px;letter-spacing:.14em;cursor:pointer}
.btn-no{border-color:rgba(236,236,236,.16);color:#A8A8AE}

/* 行事曆 */
.cal-day{display:flex;flex-direction:column;padding-right:14px}
.cal-day h3{margin:0 0 4px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--mute)}
.cal-day.today h3{color:var(--lamp)}
.cal-it{display:flex;align-items:center;gap:14px;min-height:40px;border-bottom:1px solid rgba(236,236,236,.06)}
.cal-it .tm{width:46px;flex-shrink:0;font-family:var(--mono);font-size:11px;color:var(--mute)}
.cal-it .tt{font-size:13px;letter-spacing:.04em;color:#D4D4D8}

/* 新增資料庫 */
#newDb{position:absolute;inset:0;z-index:8}
#newDb .dim{position:absolute;inset:0;background:rgba(5,5,6,.6)}
#newDb .dialog{position:absolute;left:380px;top:150px;width:440px;max-height:440px;overflow-y:auto;padding:28px 30px 24px;display:flex;flex-direction:column;gap:20px;background:#0E0E10;border:1px solid rgba(236,236,236,.14);font-family:var(--sans);color:#D4D4D8}
#newDb .step{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--lamp)}
#newDb h2{margin:0;font-family:var(--serif);font-weight:300;font-size:19px;letter-spacing:.16em;color:var(--hi)}
#newDb .name{height:44px;border-bottom:1px solid rgba(236,236,236,.3);color:var(--hi);font-size:15px;letter-spacing:.06em}
.opt{min-height:44px;padding:0 14px;text-align:left;background:transparent;border:0;border-bottom:1px solid rgba(236,236,236,.06);box-shadow:inset 2px 0 0 transparent;color:#B4B4BA;font-size:13px;letter-spacing:.06em;cursor:pointer}
.opt.on{background:rgba(216,201,160,.08);box-shadow:inset 2px 0 0 var(--lamp);color:var(--hi)}
.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.view{min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid rgba(236,236,236,.12);color:#A8A8AE;font-size:12px;letter-spacing:.14em;cursor:pointer}
.view svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.view.on{background:rgba(216,201,160,.08);border-color:var(--lamp);color:var(--hi)}
.nd-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:4px}
.nd-back{min-height:40px;padding:0 16px;background:transparent;border:0;color:#A8A8AE;font-size:12px;letter-spacing:.16em;cursor:pointer}
.nd-next{min-height:40px;padding:0 22px;background:transparent;border:1px solid var(--lamp);color:var(--hi);font-size:12px;letter-spacing:.2em;cursor:pointer}
.nd-next:disabled{border-color:rgba(236,236,236,.12);color:#6C6C72;cursor:default}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* 通行碼 */
#gate{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(5,5,6,.82);font-family:var(--sans)}
#gate form{width:min(300px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:stretch;gap:14px}
#gate .g-mark{align-self:center;width:6px;height:6px;margin:0 0 10px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px rgba(243,233,207,.8)}
#gate label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--mute);text-align:center}
#gate input{height:44px;border-bottom:1px solid rgba(236,236,236,.3);text-align:center;font-size:15px;letter-spacing:.2em;color:var(--hi)}
#gate button{align-self:center}
#gateMsg{min-height:18px;margin:0;text-align:center;font-size:12px;color:var(--lamp)}
#buoyTip{left:auto;right:0;translate:0 0}