/* 八根喵控制台 v0.42.0：深色＋貓咪粉紫。沒有外部資源。動畫都能被 prefers-reduced-motion 關掉。 */
:root{
  --bg:#15111f;--bg2:#1d1730;--card:rgba(255,255,255,.055);--card-b:rgba(255,255,255,.09);
  --text:#f4effc;--muted:#a99fc2;--pink:#ff8fbe;--pink2:#ffb6d3;--purple:#8b6cff;--purple2:#b39dff;
  --ok:#6ee7b7;--warn:#ffd36e;--bad:#ff6b8a;--r:18px;--r-s:12px;
  --grad:linear-gradient(135deg,#8b6cff 0%,#ff8fbe 100%);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --safe-b:env(safe-area-inset-bottom,0px);--tabs-h:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  overflow-x:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bg-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 10% 0%,#241a3d 0%,var(--bg) 60%)}
.bg-blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:float 18s ease-in-out infinite}
.bg-blobs i:nth-child(1){width:380px;height:380px;background:#8b6cff;left:-120px;top:-80px}
.bg-blobs i:nth-child(2){width:320px;height:320px;background:#ff8fbe;right:-100px;top:30%;animation-delay:-6s;opacity:.25}
.bg-blobs i:nth-child(3){width:300px;height:300px;background:#5b8cff;left:20%;bottom:-140px;animation-delay:-12s;opacity:.22}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.08)}}

/* ---------- 頂欄 ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;
  background:rgba(21,17,31,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--card-b)}
.top .logo{border-radius:50%;box-shadow:0 0 0 2px rgba(255,143,190,.5)}
.top .title{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.top .title b{font-size:16px;letter-spacing:.5px}.top .title small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--card);border:1px solid var(--card-b);font-size:12.5px;color:var(--muted);white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:#777}
.pill.on{color:var(--ok)}.pill.on i{background:var(--ok);animation:pulse 2s infinite}
.pill.off{color:var(--bad)}.pill.off i{background:var(--bad)}
.pill.paused{color:var(--warn)}.pill.paused i{background:var(--warn)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(110,231,183,.6)}70%{box-shadow:0 0 0 8px rgba(110,231,183,0)}100%{box-shadow:0 0 0 0 rgba(110,231,183,0)}}
.icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--card-b);background:var(--card);color:var(--text);font-size:17px;cursor:pointer;
  transition:transform .18s var(--spring),background .2s,border-color .2s}
.icon-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,143,190,.5)}.icon-btn:active{transform:scale(.88)}
.icon-btn.spin{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 分頁列：手機在下方，桌機在左邊 ---------- */
.tabs{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;gap:2px;padding:6px 8px calc(6px + var(--safe-b));overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  background:rgba(24,19,38,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--card-b)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 62px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border:0;border-radius:14px;background:none;color:var(--muted);
  font:inherit;font-size:11px;cursor:pointer;position:relative;transition:color .2s,background .25s,transform .18s var(--spring)}
.tab .ic{font-size:21px;line-height:1.15;transition:transform .3s var(--spring)}
.tab:active{transform:scale(.92)}
.tab[aria-selected=true]{color:var(--text);background:linear-gradient(135deg,rgba(139,108,255,.28),rgba(255,143,190,.22))}
.tab[aria-selected=true] .ic{transform:translateY(-2px) scale(1.15)}
.view{padding:16px 14px calc(var(--tabs-h) + 28px + var(--safe-b));max-width:1100px;margin:0 auto;outline:none}
@media(min-width:900px){
  .tabs{top:61px;bottom:0;right:auto;width:188px;flex-direction:column;padding:14px 10px;border-top:0;border-right:1px solid var(--card-b);overflow-y:auto}
  .tab{flex:0 0 auto;flex-direction:row;gap:10px;justify-content:flex-start;padding:10px 14px;font-size:14px}.tab .ic{font-size:19px}
  .tab[aria-selected=true] .ic{transform:scale(1.12)}
  .view{padding:22px 24px 40px;margin-left:200px;max-width:none}
  .view>.page{max-width:1060px}
}

/* ---------- 版面／卡片 ---------- */
.page{animation:pageIn .2s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page.back{animation-name:pageInL}@keyframes pageInL{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.page.fwd{animation-name:pageInR}@keyframes pageInR{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.grid.wide{grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--card-b);border-radius:var(--r);padding:16px;backdrop-filter:blur(6px);
  animation:cardIn .28s var(--ease) both;animation-delay:calc(min(var(--i,0),5) * 28ms);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.card:hover{border-color:rgba(255,143,190,.28)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card h2{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px}
.card h2 .tag{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);background:rgba(255,255,255,.07);padding:2px 8px;border-radius:99px}
.card .desc{margin:0 0 12px;color:var(--muted);font-size:13px}
.hero{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,rgba(139,108,255,.22),rgba(255,143,190,.16));border-color:rgba(255,143,190,.25)}
.hero img{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 8px 24px rgba(139,108,255,.4);animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero h2{font-size:19px;margin:0}.hero p{margin:2px 0 0;color:var(--muted);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.stat{background:rgba(255,255,255,.045);border-radius:var(--r-s);padding:10px 12px}
.stat small{display:block;color:var(--muted);font-size:11.5px}.stat b{font-size:19px;font-variant-numeric:tabular-nums}
.stat b.sm{font-size:14px}
.banner{padding:10px 14px;border-radius:var(--r-s);margin-bottom:14px;background:rgba(255,211,110,.12);border:1px solid rgba(255,211,110,.35);color:var(--warn);font-size:13px;animation:cardIn .4s var(--ease) both}

/* ---------- 列／開關 ---------- */
.rows>*+*{border-top:1px solid rgba(255,255,255,.06)}
.row{display:flex;align-items:center;gap:12px;padding:11px 2px;min-height:52px}
.row .ic{font-size:20px;width:26px;text-align:center}
.row .tx{flex:1;min-width:0}.row .tx b{display:block;font-weight:600;font-size:14.5px}.row .tx small{color:var(--muted);font-size:12.5px;display:block}
.row .end{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sw{position:relative;display:inline-block;width:50px;height:30px;flex:none;cursor:pointer}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.sw span{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.14);transition:background .3s var(--ease),box-shadow .3s}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .26s var(--spring),width .2s}
.sw input:checked+span{background:var(--grad);box-shadow:0 0 14px rgba(255,143,190,.45)}
.sw input:checked+span::after{transform:translateX(20px)}
.sw input:active+span::after{width:29px}.sw input:checked:active+span::after{transform:translateX(15px)}
.sw input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}
.sw.busy{opacity:.55;pointer-events:none}

/* ---------- 按鈕／輸入 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:12px;border:1px solid var(--card-b);background:rgba(255,255,255,.07);
  color:var(--text);font:inherit;font-weight:600;font-size:14px;cursor:pointer;min-height:40px;
  transition:transform .18s var(--spring),background .2s,border-color .2s,box-shadow .25s,filter .2s}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,143,190,.45);transform:translateY(-1px)}
.btn:active{transform:scale(.95)}
.btn:disabled,.btn.busy{opacity:.5;pointer-events:none}
.btn.busy::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.primary{background:var(--grad);border-color:transparent;box-shadow:0 6px 18px rgba(139,108,255,.35)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 8px 24px rgba(255,143,190,.4)}
.btn.danger{background:rgba(255,107,138,.14);border-color:rgba(255,107,138,.5);color:#ffb3c3}
.btn.danger:hover{background:rgba(255,107,138,.28);border-color:var(--bad)}
.btn.big{width:100%;min-height:48px;font-size:16px}.btn.sm{padding:5px 10px;min-height:32px;font-size:13px;border-radius:10px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
input[type=text],input[type=password],input[type=number],textarea,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--card-b);background:rgba(0,0,0,.28);color:var(--text);
  font:inherit;outline:none;transition:border-color .2s,box-shadow .2s;min-height:42px}
textarea{resize:vertical;min-height:96px;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
select option{background:#231b38;color:var(--text)}
input:focus,textarea:focus,select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,143,190,.18)}
input[type=number]{width:96px;text-align:center}
.field{margin-bottom:10px}.field>label{display:block;font-size:12.5px;color:var(--muted);margin:0 0 4px 2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:520px){.two{grid-template-columns:1fr}}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.chip{padding:3px 10px;border-radius:99px;font-size:12.5px;background:rgba(255,255,255,.07);border:1px solid var(--card-b);color:var(--text);cursor:pointer;transition:background .2s,transform .15s}
.chip:hover{background:rgba(255,143,190,.2)}.chip:active{transform:scale(.93)}.chip.sel{background:var(--grad);border-color:transparent}
.chip.static{cursor:default}.chip.good{color:var(--ok)}.chip.warn{color:var(--warn)}
.count{font-size:12px;color:var(--muted);text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.muted{color:var(--muted)}.empty{padding:18px;text-align:center;color:var(--muted)}
.seg{display:inline-flex;background:rgba(0,0,0,.28);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;color:var(--muted);padding:6px 14px;border-radius:9px;font:inherit;font-size:13.5px;cursor:pointer;transition:background .25s,color .2s}
.seg button[aria-pressed=true]{background:var(--grad);color:#fff}
.mem{display:flex;gap:10px;padding:10px 4px;align-items:flex-start;animation:cardIn .22s var(--ease) both;animation-delay:calc(min(var(--i,0),8) * 14ms)}
.mem+.mem{border-top:1px solid rgba(255,255,255,.06)}
.mem input{width:20px;height:20px;margin-top:3px;accent-color:#ff8fbe;flex:none;min-height:0}
.mem .d{color:var(--muted);font-size:12px}.mem .f{white-space:pre-wrap;word-break:break-word}
.q{display:flex;gap:8px;padding:8px 2px;align-items:center}.q+.q{border-top:1px solid rgba(255,255,255,.06)}.q .n{color:var(--muted);width:24px;text-align:right;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .6s var(--ease)}
.vol{display:flex;align-items:center;gap:10px}.vol b{min-width:48px;text-align:center;font-variant-numeric:tabular-nums}
.chunk{border:1px solid var(--card-b);border-radius:var(--r-s);margin-bottom:10px;overflow:hidden;background:rgba(0,0,0,.18)}
.chunk>button{width:100%;display:flex;gap:8px;padding:12px 14px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;align-items:center}
.chunk>button small{margin-left:auto;color:var(--muted)}.chunk>button:hover{background:rgba(255,255,255,.04)}
.chunk .body{padding:0 12px 12px;animation:pageIn .3s var(--ease)}
.chunk textarea{min-height:200px}

/* ---------- 骨架屏 ---------- */
.skel{border-radius:var(--r-s);background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;min-height:18px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel.h1{height:90px;margin-bottom:14px}.skel.h2{height:150px}.skel.line{height:16px;margin:10px 0}.skel.line.s{width:60%}

/* ---------- 提示／對話框 ---------- */
.toasts{position:fixed;z-index:80;left:0;right:0;bottom:calc(var(--tabs-h) + 14px + var(--safe-b));display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;padding:0 12px}
@media(min-width:900px){.toasts{left:auto;right:20px;bottom:20px;align-items:flex-end}}
.toast{pointer-events:auto;max-width:min(92vw,420px);padding:11px 16px;border-radius:14px;background:#2b2145;border:1px solid rgba(255,143,190,.4);color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:toastIn .3s var(--spring) both;font-size:14px}
.toast.ok{border-color:rgba(110,231,183,.55)}.toast.err{border-color:rgba(255,107,138,.65);background:#3a1f35}
.toast.out{animation:toastOut .3s ease-in forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(12px) scale(.95)}}
@media(min-width:900px){@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}}
.modal-back{position:fixed;inset:0;z-index:90;background:rgba(8,5,16,.66);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .2s ease both}
.modal-back[hidden]{display:none}
.modal{width:min(440px,100%);background:#241b3b;border:1px solid rgba(255,143,190,.35);border-radius:22px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.55);animation:pop .35s var(--spring) both}
.modal h3{margin:0 0 8px}.m-body{color:var(--muted);margin-bottom:14px;white-space:pre-wrap}
.m-actions{display:flex;gap:8px;justify-content:flex-end}.m-actions .btn{min-width:90px}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes pop{from{opacity:0;transform:scale(.88) translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 登入頁 ---------- */
.login-body{display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:min(380px,100%);text-align:center;padding:28px 24px 22px;border-radius:26px;background:var(--card);border:1px solid var(--card-b);backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);animation:pop .6s var(--spring) both}
.login-card.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.login-card h1{margin:10px 0 2px;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-card .sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.login-card form{display:flex;flex-direction:column;gap:12px}
.login-note{min-height:22px;margin-top:12px;font-size:13.5px;color:var(--bad)}.ver{color:var(--muted);font-size:11px;opacity:.7}
.cat-wrap{position:relative;display:inline-block;height:104px}
.cat{border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.2),0 10px 30px rgba(139,108,255,.5);animation:catBounce 2.2s cubic-bezier(.28,.84,.42,1) infinite;transform-origin:50% 100%}
.cat.happy{animation:catJoy .8s var(--spring) 2}
@keyframes catBounce{0%,100%{transform:translateY(0) scale(1.04,.96)}12%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-22px) scale(.96,1.05)}75%{transform:translateY(0) scale(1.04,.96)}88%{transform:translateY(-4px) scale(1,1)}}
@keyframes catJoy{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-30px) rotate(-12deg)}60%{transform:translateY(-10px) rotate(10deg)}100%{transform:translateY(0) rotate(0)}}
.paw{position:absolute;font-size:16px;opacity:0;animation:paw 3.6s ease-in-out infinite}
.paw.p1{left:-34px;bottom:6px}.paw.p2{right:-34px;bottom:30px;animation-delay:1.2s}.paw.p3{left:-14px;bottom:56px;animation-delay:2.4s}
@keyframes paw{0%,100%{opacity:0;transform:translateY(8px) rotate(-10deg)}30%,60%{opacity:.8;transform:translateY(0) rotate(10deg)}}


/* ---------- 訊息監控（v0.41.0） ---------- */
.sec-title{margin:26px 2px 4px;font-size:17px}.sec-desc{margin:0 2px 12px;font-size:13px}
.voice-box{margin-top:6px}
.mon-top{max-width:640px;margin:0 auto;text-align:center;padding-top:6px}
.mon-h{margin:6px 0 4px;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sq-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.sq-big{width:min(44vw,196px);aspect-ratio:1;border-radius:28px;border:1px solid var(--card-b);background:var(--card);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;
  font:inherit;position:relative;overflow:hidden;animation:cardIn .35s var(--ease) both;transition:transform .25s var(--spring),box-shadow .3s,border-color .25s}
.sq-big.ig{animation-delay:70ms}
.sq-big::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(90% 90% at 50% 10%,rgba(255,255,255,.14),transparent)}
.sq-big:hover{transform:translateY(-5px) scale(1.03);border-color:rgba(255,143,190,.55);box-shadow:0 14px 34px rgba(139,108,255,.35)}.sq-big:hover::before{opacity:1}
.sq-big:active{transform:scale(.95)}
.sq-big .logo{width:78px;height:78px;display:grid;place-items:center;transition:transform .35s var(--spring)}.sq-big:hover .logo{transform:rotate(-6deg) scale(1.1)}
.sq-big.dc{color:#aab4ff}.sq-big.dc .logo{color:#7f8cff}
.sq-big b{font-size:17px;color:var(--text)}.sq-big small{color:var(--muted);font-size:12px;line-height:1.3}
.logo-svg{width:100%;height:100%;display:block}
.mon-bar{flex:none;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mon-bar-t{display:inline-flex;align-items:center;gap:8px;font-weight:700}.mon-bar-t .logo-svg{width:22px;height:22px}
.mon{display:grid;grid-template-columns:68px 250px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px;flex:1 1 auto;min-height:0;height:auto}
.mon.no-rail{grid-template-columns:270px minmax(0,1fr)}
.mon>*{min-height:0;min-width:0}
.mon-rail{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:2px 4px 8px 2px;scrollbar-width:none}.mon-rail::-webkit-scrollbar{display:none}
.sq{position:relative;flex:none;width:56px;height:56px;border-radius:18px;border:2px solid transparent;background:var(--card);cursor:pointer;display:grid;place-items:center;padding:0;overflow:visible;color:var(--text);
  transition:border-radius .25s var(--ease),transform .2s var(--spring),border-color .2s,box-shadow .25s,background .2s}
.sq:hover{border-radius:14px;transform:translateY(-2px);background:rgba(255,255,255,.11)}.sq:active{transform:scale(.92)}
.sq[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,143,190,.22),0 6px 18px rgba(139,108,255,.4)}
.sq .sq-ic{font-size:26px}
.sq .tkdot{position:absolute;right:-5px;top:-5px;font-size:12px;font-style:normal;background:#3a1f35;border:1px solid var(--bad);border-radius:99px;padding:0 4px;line-height:17px;display:none}
.sq.taken .tkdot{display:block;animation:pop .35s var(--spring) both}
.av{position:relative;flex:none;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:700;background:hsl(var(--hue,300) 55% 45%);width:36px;height:36px;font-size:15px}
.av i{font-style:normal}.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a2140}
.av.sm{width:34px;height:34px}.av.md{width:40px;height:40px}.av.lg{width:42px;height:42px}
.av.sq-av{width:100%;height:100%;border-radius:inherit;font-size:20px}.sq:hover .av.sq-av{border-radius:12px}
.mon-list{overflow-y:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--card-b);border-radius:var(--r);padding:8px;min-width:0}
.list-h{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;font-weight:700}.list-h small{margin-left:auto;color:var(--muted);font-weight:400}
.cat-h{padding:10px 8px 3px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.gtk,.room-head .tk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:2px 8px 8px;justify-content:space-between}
.li{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .18s,transform .15s var(--spring)}
.li:hover{background:rgba(255,255,255,.08)}.li:active{transform:scale(.98)}.li.on{background:linear-gradient(135deg,rgba(139,108,255,.3),rgba(255,143,190,.22))}
.li .tx{min-width:0}.li .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.li .tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px}
.li.ch{padding:6px 8px;gap:8px}.li.ch .hash{width:22px;text-align:center;color:var(--muted);font-weight:700}.li.dim{opacity:.55}
.li .tag{display:none;margin-left:auto;font-style:normal;font-size:11px;color:#ffb3c3;background:rgba(255,107,138,.16);border:1px solid rgba(255,107,138,.4);border-radius:99px;padding:1px 7px;white-space:nowrap}
.li.taken .tag{display:inline-block}
.list-add{display:flex;gap:6px;margin-top:10px;padding:8px 4px 2px;border-top:1px solid rgba(255,255,255,.07)}.list-add input{min-height:36px;padding:6px 10px;font-size:13px}
.mon-chat{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.empty.big{margin:auto;font-size:15px}
.room{flex:1 1 0;min-height:0;display:flex;flex-direction:column;background:rgba(0,0,0,.2);border:1px solid var(--card-b);border-radius:var(--r);overflow:hidden;animation:cardIn .28s var(--ease) both}
.room.taken{border-color:rgba(255,107,138,.55);box-shadow:0 0 0 1px rgba(255,107,138,.25),0 0 26px rgba(255,107,138,.12)}
.room-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--card-b);background:rgba(255,255,255,.04)}
.room-head .tx{flex:1;min-width:0}.room-head .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-head .tx small{color:var(--muted);font-size:12px}
.room-head .tk{padding:0;gap:8px;flex:none}.room-head .back{display:none}
.ro-pill{color:var(--warn)}
.tk-banner{flex:none;display:none;padding:8px 14px;font-size:13px;background:rgba(255,107,138,.14);color:#ffc2cf;border-bottom:1px solid rgba(255,107,138,.35)}
.tk-banner.show{display:block;animation:pageIn .25s var(--ease)}
.msgs{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 12px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;outline:none}
.msgs>*{flex:none}
.older{text-align:center;color:var(--muted);font-size:12px;padding:2px 0 6px}
.day{display:flex;justify-content:center;margin:4px 0}.day span{font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.07);padding:2px 12px;border-radius:99px}
.m{display:flex;gap:8px;align-items:flex-start;max-width:88%;align-self:flex-start;animation:msgIn .24s var(--ease) both}
.m.me{flex-direction:row-reverse;align-self:flex-end}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.mc{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}.m.me .mc{align-items:flex-end}
.mh{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted)}.m.me .mh{flex-direction:row-reverse}
.mh b{color:var(--text);font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mh small{font-size:11px;opacity:.8}
.bub{background:rgba(255,255,255,.09);border-radius:4px 16px 16px 16px;padding:8px 12px;max-width:100%;word-break:break-word;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:6px}
.m.me .bub{background:linear-gradient(135deg,#7a5cf0,#e8679f);border-radius:16px 4px 16px 16px;box-shadow:0 4px 14px rgba(139,108,255,.3)}
.bub .txt{white-space:pre-wrap;font-size:14.5px;line-height:1.5}.bub a{color:#bfd0ff;text-decoration:underline}.m.me .bub a{color:#fff}
.bub .emo{height:22px;width:auto;vertical-align:-5px;margin:0 1px}
.bub .rep{font-size:12px;color:var(--muted);border-left:3px solid var(--pink);padding:1px 8px;background:rgba(0,0,0,.18);border-radius:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m.me .rep{color:#f1e7ff}
.att-img img{display:block;max-width:min(300px,100%);max-height:260px;border-radius:12px;background:rgba(0,0,0,.25)}
.att-file{font-size:13px}.stk{width:120px;height:120px;object-fit:contain}
.emb{border-left:3px solid var(--purple);background:rgba(0,0,0,.2);border-radius:6px;padding:6px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px}.emb img{max-width:260px;max-height:180px;border-radius:8px}
.rx{display:flex;gap:4px;flex-wrap:wrap}.rx span{font-size:12px;background:rgba(255,255,255,.1);border-radius:99px;padding:1px 8px}
.acts{display:flex;gap:4px;opacity:0;transition:opacity .15s;height:22px}.m:hover .acts,.m:focus-within .acts{opacity:1}
@media(hover:none){.acts{opacity:.9}}
.mini{border:0;background:rgba(255,255,255,.1);color:var(--text);border-radius:8px;padding:0 7px;cursor:pointer;font-size:12px;min-height:22px;transition:transform .15s var(--spring),background .2s}.mini:hover{background:rgba(255,143,190,.3)}.mini:active{transform:scale(.88)}
.composer{flex:none;border-top:1px solid var(--card-b);padding:8px 10px calc(8px + var(--safe-b));background:rgba(255,255,255,.035)}
.composer.ro-note{text-align:center;color:var(--warn);font-size:13px}
.compose-row{display:flex;gap:8px;align-items:flex-end}.compose-row textarea{min-height:42px;max-height:140px;resize:none;padding:10px 12px}
.compose-row .send{flex:none;min-width:72px}
.compose-chip{display:none;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:2px 4px 6px}.compose-chip.show{display:flex}
.compose-chip .mini{margin-left:auto}
.learn{font-size:11.5px;margin:4px 2px 0}
@media(max-width:899px){
  .mon{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .mon.no-rail{grid-template-rows:minmax(0,1fr)}
  .mon-rail{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px}
  .mon[data-pane=chat] .mon-rail,.mon[data-pane=chat] .mon-list{display:none}
  .mon[data-pane=chat]{grid-template-rows:minmax(0,1fr)}
  .mon[data-pane=list] .mon-chat{display:none}
  .room-head .back{display:inline-block}
  .m{max-width:94%}
}
/* 訊息監控整頁貼合視窗高度：只有訊息列表／左邊清單自己捲動，輸入框永遠在底部（高度由 app.js 依 visualViewport 設 --app-h，鍵盤彈出也跟著縮） */
body.mon-fit{position:fixed;left:0;right:0;top:var(--app-top,0px);height:var(--app-h,100dvh);min-height:0;overflow:hidden}
body.mon-fit .view{box-sizing:border-box;height:calc(var(--app-h,100dvh) - var(--top-h,61px));min-height:0;overflow:hidden;display:flex;flex-direction:column;
  padding:10px 12px calc(var(--tabs-h) + var(--safe-b) + 6px)}
body.mon-fit .view>.page.mon-page{flex:1 1 0;min-height:0;width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}
body.mon-fit .view>.page.mon-page:has(>.mon){overflow:hidden}
body.mon-fit.kb .view{padding-bottom:calc(8px + var(--safe-b))}
body.mon-fit.kb .tabs{display:none}
body.mon-fit.kb .composer{padding-bottom:8px}
@media(min-width:900px){
  body.mon-fit .view{padding:14px 20px 16px}
  body.mon-fit .view>.page.mon-page{max-width:1280px}
}
@media(prefers-reduced-motion:reduce){.msgs{scroll-behavior:auto}}

/* ---------- 音樂播放器（v0.42.0）：桌機三欄、手機直向堆疊 ---------- */
.view>.page.pl-page{max-width:1400px}
.pl-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;padding:10px 12px;border:1px solid var(--card-b);border-radius:var(--r);background:var(--card)}
.pl-bar-f{min-width:130px;flex:0 1 180px}.pl-bar-f.grow{flex:1 1 220px}
.pl-bar-f label{display:block;font-size:12px;color:var(--muted);margin:0 0 3px 2px}
.pl-bar select{padding:8px 10px}
.pl-bar-b{display:flex;gap:8px}
.pl{display:grid;gap:14px;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1fr);height:clamp(540px,calc(100dvh - 270px),780px);align-items:stretch}
.pl>*{min-height:0}
.pl-main,.pl-side,.pl-lyrbox{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--card-b);border-radius:var(--r);background:var(--card);overflow:hidden}
.pl-side{padding:12px}
/* 封面＋視覺化 */
.pl-cover{position:relative;flex:1 1 220px;min-height:200px;overflow:hidden;isolation:isolate;background:#120d1f}
.pl-cover-base{position:absolute;inset:0;background:radial-gradient(90% 90% at 20% 10%,#4a2d8f 0%,transparent 60%),radial-gradient(90% 90% at 90% 90%,#8f2d68 0%,transparent 60%),#150f24}
.pl-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(16px) saturate(1.35) brightness(.72);opacity:0;transition:opacity .7s var(--ease)}
.pl-bg.on{opacity:.82}
.pl-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,17,31,.15) 0%,rgba(21,17,31,.35) 45%,rgba(21,17,31,.88) 100%)}
.pl-viz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.pl-info{position:absolute;left:0;right:0;top:0;padding:14px 16px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.pl-chip{display:inline-block;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.18);font-size:12px;backdrop-filter:blur(6px)}
.pl-title{font-size:clamp(18px,2.2vw,26px);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.pl-sub{color:#e6dcff;font-size:13px}
.pl-cover.idle .pl-viz{opacity:.55}
/* 進度／控制／音量 */
.pl-panel{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--card-b);background:rgba(0,0,0,.18)}
.pl-seekrow,.pl-volrow{display:flex;align-items:center;gap:10px}
.pl-t,.pl-vt{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);min-width:42px}.pl-vt{min-width:46px;text-align:right;color:var(--text)}
.pl-vi{font-size:16px;width:20px;text-align:center}
.pl-hint{color:var(--muted);font-size:11.5px;line-height:1.4}
.pl-range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;width:auto;height:22px;padding:0;margin:0;background:transparent;border:0;cursor:pointer;--p:0%;touch-action:none}
.pl-range:focus{outline:none}
.pl-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,#8b6cff 0,#ff8fbe var(--p),rgba(255,255,255,.14) var(--p))}
.pl-range::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.14)}
.pl-range::-moz-range-progress{height:6px;border-radius:99px;background:linear-gradient(90deg,#8b6cff,#ff8fbe)}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px rgba(255,143,190,.45),0 0 12px rgba(255,143,190,.8);transition:transform .15s var(--spring)}
.pl-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px rgba(255,143,190,.45),0 0 12px rgba(255,143,190,.8)}
.pl-range:hover::-webkit-slider-thumb,.pl-range:active::-webkit-slider-thumb{transform:scale(1.25)}
.pl-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(179,157,255,.8)}
.pl-range:disabled{opacity:.4;cursor:not-allowed}
.pl-ctls{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.pl-ctls-main{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:nowrap}
.pl-ctl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(244,239,252,.9);font:inherit;cursor:pointer;
  transition:transform .18s var(--spring),background .2s,border-color .2s,box-shadow .2s,opacity .2s,filter .2s;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pl-ctl .i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;line-height:0;pointer-events:none}
.pl-ctl .i svg{width:100%;height:100%;display:block}
.pl-ctl:hover{background:rgba(255,255,255,.14);border-color:rgba(255,143,190,.4);color:#fff;transform:translateY(-1px)}
.pl-ctl:active{transform:scale(.9)}
.pl-ctl:focus-visible{outline:2px solid var(--purple2);outline-offset:3px}
.pl-ctl:disabled{opacity:.32;pointer-events:none;filter:grayscale(.25)}
.pl-ctl.busy{opacity:.55;pointer-events:none}
.pl-ctl.big{width:64px;height:64px;min-width:64px;min-height:64px;border:0;color:#fff;
  background:linear-gradient(145deg,#ff8fbe 0%,#c47aff 48%,#8b6cff 100%);
  box-shadow:0 8px 28px rgba(139,108,255,.5),0 0 22px rgba(255,143,190,.42),inset 0 1px 0 rgba(255,255,255,.28)}
.pl-ctl.big .i{width:28px;height:28px}
.pl-ctl.big:hover{filter:brightness(1.07);transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 34px rgba(139,108,255,.55),0 0 28px rgba(255,143,190,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.pl-ctl.big:active{transform:scale(.94);filter:brightness(.98)}
.pl-ctl.big.morph .i{animation:plIconMorph .28s var(--spring)}
@keyframes plIconMorph{0%{transform:scale(.55);opacity:.35}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.pl-ctl.seek .i{width:24px;height:24px}
.pl-ctl.stop{width:36px;height:36px;min-width:36px;min-height:36px;opacity:.55;border-color:transparent;background:transparent;color:var(--muted)}
.pl-ctl.stop .i{width:16px;height:16px}
.pl-ctl.stop:hover{opacity:1;color:var(--bad);background:rgba(255,107,138,.14);border-color:rgba(255,107,138,.35)}

/* 中欄 */
.pl-addrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.pl-addrow .btn.on{background:var(--grad);border-color:transparent}
.pl-form{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:10px;border-radius:var(--r-s);background:rgba(0,0,0,.2);border:1px solid var(--card-b);animation:pageIn .2s var(--ease)}
.pl-form[hidden]{display:none}
.pl-qhead{font-size:12.5px;color:var(--muted);padding:2px 2px 6px;border-bottom:1px solid rgba(255,255,255,.07)}
.pl-queue{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:4px}
.pl-q{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:10px}
.pl-q:hover{background:rgba(255,255,255,.05)}
.pl-q .n{width:22px;text-align:right;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;flex:none}
.pl-q img,.pl-q .ph{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.pl-q .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;line-height:1.3;word-break:break-word}
.pl-q .du{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.pl-q.now{background:linear-gradient(135deg,rgba(139,108,255,.25),rgba(255,143,190,.18));border:1px solid rgba(255,143,190,.3)}
.pl-q.now .n{color:var(--pink2)}
/* 歌詞 */
.pl-lhead{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--card-b)}
.pl-lhead small{margin-left:auto;color:var(--muted);font-size:11.5px;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn.sm{width:30px;height:30px;font-size:15px;border-radius:10px;flex:none}
.pl-lyr{position:relative;flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 40vh;outline:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.ly{padding:6px 8px;border-radius:12px;transition:background .3s,opacity .3s,transform .3s var(--ease);opacity:.5;transform-origin:left center}
.ly.gap{padding:6px}
.ly.syn{cursor:pointer}.ly.syn:hover{opacity:.85;background:rgba(255,255,255,.05)}
.ly .w{display:block;font-size:17px;line-height:1.45;font-weight:600;word-break:break-word}
.ly .tr{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted);word-break:break-word}
.ly.cur{opacity:1;background:linear-gradient(90deg,rgba(139,108,255,.22),rgba(255,143,190,.14));transform:scale(1.03)}
.ly.cur .w{color:#fff;text-shadow:0 0 14px rgba(255,143,190,.75),0 0 28px rgba(139,108,255,.55)}
.ly.cur .tr{color:var(--pink2)}
.ly-note{color:var(--muted);font-size:12.5px;padding:4px 8px 10px}
.pl-lyr .empty,.pl-queue .empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:13.5px}
.pl-more{margin-top:14px;border:1px solid var(--card-b);border-radius:var(--r-s);background:var(--card)}
.pl-more summary{cursor:pointer;padding:10px 14px;color:var(--muted);font-size:13.5px}
.pl-morebody{padding:0 14px 12px}
@media(min-width:1000px) and (max-width:1239px){
  .pl{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .pl-main{grid-row:1 / span 2}
}
@media(max-width:999px){
  .pl-page.live{display:flex;flex-direction:column}.pl-page.live .pl{order:1}.pl-page.live .pl-bar{order:2;margin:14px 0 0}.pl-page.live .pl-more{order:3}
  .pl{display:flex;flex-direction:column;height:auto}
  .pl-main{overflow:visible}
  .pl-cover{flex:none;height:clamp(230px,62vw,360px)}
  .pl-side{max-height:none}
  .pl-queue{flex:none;max-height:340px}
  .pl-lyrbox{height:min(60dvh,520px)}
  .pl-title{font-size:18px}
}
@media(max-width:520px){.pl-ctl{width:44px;height:44px;min-width:44px;min-height:44px}.pl-ctl.big{width:58px;height:58px;min-width:58px;min-height:58px}.pl-ctls-main{gap:8px}.pl-bar-b{width:100%}.pl-bar-b .btn{flex:1}.pl-bar-f{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){.ly.cur{transform:none}.pl-bg{transition:none}}

/* ---------- 減少動態 ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .skel{animation:none}.pill.on i{animation:none}
}
/* 重開後的重新連線畫面 */
.reconn{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(14,10,24,.92);backdrop-filter:blur(8px);animation:fade .3s both}
.reconn img{border-radius:50%;border:3px solid rgba(255,143,190,.5);animation:catBounce 1.2s ease-in-out infinite}
.reconn h2{margin:6px 0 0}.reconn p{color:var(--muted);margin:0}.reconn .bar{width:min(300px,80vw)}
.tx b{display:block}.tx small{display:block;color:var(--muted);font-size:12.5px}

/* ---------- 生圖分頁（v0.44.0） ---------- */
.gen-drop{border:2px dashed rgba(255,255,255,.2);border-radius:var(--r-s);padding:14px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:rgba(0,0,0,.18);transition:border-color .2s,background .2s;min-height:96px;justify-content:center;margin-bottom:6px}
.gen-drop:hover,.gen-drop.over,.gen-drop:focus-visible{border-color:var(--pink);background:rgba(255,143,190,.08);outline:none}
.gen-dropmsg{color:var(--muted);font-size:13.5px}
.gen-prev{max-width:100%;max-height:220px;border-radius:10px;object-fit:contain}
.gen-fileinfo{font-size:12px}
.gen-upbtns{margin:6px 0 10px}
.gen-i2i{margin:6px 0 10px;padding:10px 12px;border-radius:var(--r-s);background:rgba(139,108,255,.1);border:1px solid rgba(139,108,255,.3)}
.gen-i2i[hidden],.gen-prev[hidden],.gen-dropmsg[hidden]{display:none}
.gen-range{display:flex;align-items:center;gap:12px}
.gen-range input{flex:1;min-height:32px;accent-color:var(--pink)}
.gen-val{min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.gen-seg{flex-wrap:wrap}
.gen-optrow{display:flex;gap:12px;align-items:flex-start;margin:6px 0 10px}
.gen-optrow .desc{margin:2px 0 0}
.gen-adv{margin:6px 0}.gen-adv summary{cursor:pointer;color:var(--muted);font-size:13px;padding:6px 0}
.gen-job{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.gen-job:last-of-type{border-bottom:0}
.gen-jh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gen-jh .btn{margin-left:auto}
.gen-jp{font-size:13.5px;margin:4px 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gen-jm{font-size:12px;margin-top:3px}
.gen-err{margin-top:6px;padding:8px 10px;border-radius:10px;background:rgba(255,107,138,.12);border:1px solid rgba(255,107,138,.4);color:#ffb3c3;font-size:13px}
.gen-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px}
.gen-bar i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .6s var(--ease)}
.gen-bar.ind i{width:35%!important;animation:genInd 1.4s ease-in-out infinite}
@keyframes genInd{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.gen-thumbs{display:grid;gap:6px;margin-top:8px;grid-template-columns:repeat(2,1fr)}
.gen-thumbs.n1{grid-template-columns:minmax(0,260px)}
.gen-th{padding:0;border:0;background:rgba(0,0,0,.3);border-radius:10px;overflow:hidden;cursor:zoom-in;line-height:0}
.gen-th img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .3s var(--ease)}
.gen-th:hover img{transform:scale(1.04)}
.gen-rec{display:grid;grid-template-columns:minmax(150px,280px) 1fr;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07);align-items:start}
.gen-rec:first-child{border-top:0}
.gen-rec .gen-thumbs{margin-top:0}
.gen-rp{font-size:13.5px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:600px){.gen-rec{grid-template-columns:1fr}.gen-thumbs.n1{grid-template-columns:minmax(0,200px)}}
.gen-lb{position:fixed;inset:0;z-index:90;background:rgba(8,5,14,.9);display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,var(--safe-b))}
.gen-lbin{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;max-height:100%}
.gen-lbimg{max-width:100%;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);border-radius:12px;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.gen-lbcap{color:var(--muted);font-size:13px}.gen-lbbar{justify-content:center;margin-top:0}
@media(prefers-reduced-motion:reduce){.gen-bar.ind i{animation:none}.gen-th img,.gen-bar i{transition:none}}

/* ---- 瀏覽器播放（v0.45.0） ---- */
.pl-out{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px;padding:7px 12px;border-radius:99px;font-size:13px;border:1px solid var(--card-b);background:var(--card)}
.pl-out.br{border-color:rgba(110,231,183,.45);background:rgba(110,231,183,.08)}
.pl-out.dc{border-color:rgba(139,108,255,.5);background:rgba(139,108,255,.1)}
.pl-out small{color:var(--muted)}.pl-out .o-warn{color:#ffd37a}
.pl-q.jump{cursor:pointer}.pl-q.jump:focus-visible{outline:2px solid var(--pink2);outline-offset:1px}
.pl-q.done{opacity:.5}.pl-q.fail .tt{text-decoration:line-through;color:var(--muted)}
.pl-q .rm{flex:none;border:0;background:transparent;color:var(--muted);width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:13px}
.pl-q .rm:hover,.pl-q .rm:focus-visible{background:rgba(255,107,138,.2);color:#ff8fa6}
.pl-note{margin:8px 4px 2px;padding:8px 10px;border-radius:10px;background:rgba(139,108,255,.12);color:var(--muted);font-size:12.5px;line-height:1.45}
.bp-mini{position:fixed;z-index:35;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h) + 10px + var(--safe-b));display:flex;align-items:center;gap:6px;max-width:min(94vw,520px);width:max-content;padding:6px 8px 6px 14px;border-radius:99px;background:#2b2145;border:1px solid rgba(110,231,183,.5);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.bp-mini[hidden]{display:none}
.bp-t{flex:1;min-width:0;max-width:300px;background:transparent;border:0;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.pl-out{border-radius:14px}.bp-t{max-width:46vw}}

/* 伺服器設定（頻道模式、頻道勾選、功能開關） */
.gcfg-box{grid-column:1/-1}
.gcfg-mode{flex-wrap:wrap}
.gcfg-list{max-height:340px;overflow:auto;margin:10px 0;padding:6px 10px;border-radius:12px;background:rgba(0,0,0,.2);-webkit-overflow-scrolling:touch}
.gcfg-cat{margin:10px 0 4px;font-size:12px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.gcfg-item{display:flex;align-items:center;gap:10px;padding:8px 4px;min-height:40px;cursor:pointer;border-radius:8px}
.gcfg-item:hover{background:rgba(255,255,255,.05)}
.gcfg-item input{width:20px;height:20px;accent-color:var(--accent,#ff8fb7);flex:none}
.gcfg-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* MUSIC-APP-PWA */
html:has(body.app-music), body.app-music {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.app-music {
  display: flex;
  flex-direction: column;
}
body.app-music .tabs { display: none !important; }
body.app-music .top { flex: 0 0 auto; }
body.app-music .view {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
body.app-music .view > .page.pl-page {
  max-width: 1400px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 0;
  overflow: hidden;
}
body.app-music .pl-bar { margin-bottom: 8px; flex: 0 0 auto; }
body.app-music .pl {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none;
}
@media (max-width: 899px) {
  body.app-music .pl {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
body.app-music .bp-mini { display: none !important; }
body.app-music #to-panel { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* MUSIC-APP-RECALL */
.pl-recall{display:flex;flex-direction:column;gap:8px;margin:0 0 10px;padding:10px 12px;border:1px solid rgba(179,157,255,.35);border-radius:var(--r);background:linear-gradient(135deg,rgba(139,108,255,.14),rgba(255,105,180,.08))}
.pl-recall[hidden]{display:none!important}
.pl-recall-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-recall-row .tx{flex:1 1 160px;min-width:0}
.pl-recall-row .tx b{display:block;font-size:13px}
.pl-recall-row .tx small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}