/* 鲸玺 · 液态玻璃 v2（动漫配色 + Duo 双栏） */

:root{
  --tint:rgba(9,14,34,.52);
  --bg:#070a18; --bg2:#0d1330;
  --text:#d6eaff; --dim:#a3c2e6; --dim2:#86a7cd;
  --line:rgba(255,255,255,.17); --line2:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.08);
  --cyan:#5ee7ff; --blue:#5aa2ff; --violet:#a78bfa; --pink:#ff8ec7;
  --amber:#ffcf7a;
  --ok:#5ce6a8; --warn:#ffc266; --bad:#ff8f9b;
  --blur:34px; --r:26px;
  --spring:cubic-bezier(.22,1,.36,1);
  --grad-hot:linear-gradient(135deg, var(--cyan) 0%, var(--blue) 42%, var(--violet) 72%, var(--pink) 100%);
  --grad-name:linear-gradient(112deg, #a6f6ff 0%, #bcdaff 44%, #f2c4ff 100%);
  --grad-bar:linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 46%, rgba(255,255,255,.02));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

body{
  margin:0;color:var(--text);overflow:hidden;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(90% 60% at 12% -8%, #1b3f8f 0%, rgba(27,63,143,0) 62%),
    radial-gradient(80% 55% at 92% 0%, #6a2a8f 0%, rgba(106,42,143,0) 60%),
    radial-gradient(120% 80% at 50% 108%, #2a1150 0%, rgba(42,17,80,0) 66%),
    linear-gradient(180deg, #0a1030 0%, var(--bg) 58%, #05070f 100%);
}

body::before,body::after{
  content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(70px);opacity:.6;will-change:transform;
}
body::before{
  width:78vw;height:78vw;left:-24vw;top:-22vw;
  background:radial-gradient(circle at 38% 34%, #49b7ff 0%, rgba(73,183,255,0) 66%);
  animation:drift1 24s var(--spring) infinite alternate;
}
body::after{
  width:72vw;height:72vw;right:-22vw;bottom:-26vw;
  background:radial-gradient(circle at 58% 42%, #ff7fc4 0%, rgba(255,127,196,0) 68%);
  animation:drift2 30s var(--spring) infinite alternate;
}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,5vh,0) scale(1.14)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-7vw,-6vh,0) scale(.92)}}

#app{position:fixed;left:0;right:0;top:var(--app-t,0px);height:var(--app-h,100dvh);z-index:1;display:flex;flex-direction:column}

.glass,#bar,#composer,.sheet-body,.login-card,.card.user,.notice,.side-card{
  background-color:var(--tint);
  background-image:var(--grad-bar);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(4,8,24,.46);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(190%);
  backdrop-filter:blur(var(--blur)) saturate(190%);
}

#bar,#composer,.login-card,.side-card{position:relative;overflow:hidden}
#bar::before,#composer::before,.login-card::before,.side-card::before{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;z-index:0;
  background:linear-gradient(102deg, transparent 32%, rgba(255,255,255,.26) 48%, rgba(160,225,255,.16) 54%, transparent 68%);
  background-size:240% 240%;animation:sheen 11s linear infinite;
  mix-blend-mode:screen;opacity:.55;
}
@keyframes sheen{0%{background-position:130% 0}100%{background-position:-40% 0}}

#bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 0px) + var(--sb-top, 11px)) 15px 11px;
  border-width:0 0 1px;border-radius:0 0 26px 26px;z-index:5;
  background:
    radial-gradient(120% 220% at 0% 0%, rgba(94,231,255,.22), transparent 62%),
    radial-gradient(120% 220% at 100% 0%, rgba(255,142,199,.2), transparent 62%),
    var(--grad-bar), linear-gradient(var(--tint), var(--tint));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 34px rgba(6,10,30,.5);
}
#bar::after{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
}
.who{display:flex;align-items:center;gap:11px;min-width:0;position:relative;z-index:1}
.avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  background:radial-gradient(circle at 34% 26%, rgba(205,238,255,.6), rgba(90,162,255,.3) 58%, rgba(167,139,250,.34));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(60,120,255,.32), 0 0 0 3px rgba(255,255,255,.06);
}
.meta{line-height:1.2;min-width:0}
.name{
  font-weight:700;font-size:16px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--grad-name);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 2px rgba(2,6,20,.75)) drop-shadow(0 0 14px rgba(120,200,255,.45));
}
.state{font-size:11.5px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.state.on{color:var(--ok)}
.state.off{color:var(--warn)}
.icon-btn{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:var(--text);
  font-size:17px;padding:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;position:relative;z-index:1;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s var(--spring), background .18s;
}
.icon-btn:active{transform:scale(.92);background:rgba(255,255,255,.2)}
.bar-actions{display:flex;align-items:center;gap:8px}
.bar-actions .icon-btn svg{display:block}

/* 消息流：上下边缘溶解，滑到顶栏/输入区时淡出而不是被硬切 */
#stream{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  padding:10px 14px 6px;display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 26px), transparent 100%);
}
.msg{display:flex;gap:8px;max-width:88%;align-items:flex-end;animation:pop .24s var(--spring)}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}

.msg .b{
  position:relative;padding:11px 15px;border-radius:22px;white-space:pre-wrap;word-break:break-word;
  font-size:15px;line-height:1.58;
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  backdrop-filter:blur(22px) saturate(190%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px rgba(6,12,34,.34);
}
.msg.fish{align-self:flex-start}
.msg.fish .b{
  background:
    linear-gradient(158deg, rgba(255,255,255,.2), rgba(200,235,255,.1) 52%, rgba(167,139,250,.14)),
    radial-gradient(120% 140% at 0% 0%, rgba(94,231,255,.16), transparent 62%);
  border-bottom-left-radius:8px;color:#d8ebff;
}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .b{
  background:linear-gradient(150deg, rgba(94,231,255,.62), rgba(90,162,255,.5) 46%, rgba(167,139,250,.52) 100%);
  border-color:rgba(190,225,255,.42);
  border-bottom-right-radius:8px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 30px rgba(60,120,255,.4);
}
.msg .t{font-size:10.5px;color:var(--dim2);margin:0 6px 4px;letter-spacing:.2px}
.msg.me .t{text-align:right}
.msg.sys{align-self:center;max-width:92%}
.msg.sys .b{
  background:rgba(255,255,255,.07);border-color:var(--line2);color:var(--dim);
  font-size:12.5px;border-radius:15px;box-shadow:none;backdrop-filter:blur(10px);
}

#composer{
  flex:0 0 auto;display:flex;gap:9px;align-items:flex-end;
  padding:11px 12px calc(env(safe-area-inset-bottom) + 11px);
  border-width:1px 0 0;border-radius:28px 28px 0 0;
  background:
    radial-gradient(120% 200% at 50% 120%, rgba(255,142,199,.18), transparent 66%),
    radial-gradient(120% 200% at 20% 130%, rgba(94,231,255,.2), transparent 62%),
    var(--grad-bar), linear-gradient(var(--tint), var(--tint));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44), 0 -14px 34px rgba(4,8,24,.34);
}
#composer::after{
  content:"";position:absolute;left:16%;right:16%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
#input{
  position:relative;z-index:1;
  flex:1;resize:none;max-height:132px;min-height:46px;padding:12px 17px;
  border-radius:24px;border:1px solid rgba(255,255,255,.16);
  background-image:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  background-color:rgba(8,14,32,.42);
  color:#d8ebff;font-size:15px;outline:none;font-family:inherit;
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
#input::placeholder{color:#8fa9cc}
#input:focus{
  border-color:rgba(94,231,255,.7);
  background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(94,231,255,.16), 0 0 22px rgba(94,231,255,.2);
}
#send,#composer .pick{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  color:#fff;font-size:18px;display:grid;place-items:center;position:relative;z-index:1;
  transition:transform .18s var(--spring), box-shadow .2s, background .2s;
}
#send{
  background:
    linear-gradient(160deg, rgba(150,240,255,.34), rgba(110,160,255,.26) 58%, rgba(170,150,255,.3)),
    rgba(10,20,44,.42);
  border-color:rgba(180,232,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 18px rgba(60,130,255,.22);
  font-weight:700;font-size:19px;color:#dff2ff;
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  text-shadow:0 0 10px rgba(150,230,255,.5);
}
#send:active{transform:scale(.9);background:linear-gradient(160deg, rgba(170,246,255,.5), rgba(130,180,255,.42) 58%, rgba(186,166,255,.46)), rgba(10,20,44,.4)}
#send:disabled{opacity:.45;box-shadow:none}
#composer .pick{
  background:rgba(255,255,255,.1);font-size:0;color:rgba(214,236,255,.8);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
#composer .pick svg{display:block}
#composer .pick:active{transform:scale(.9);background:rgba(255,255,255,.18);color:rgba(240,250,255,.98)}

.typing{display:flex;gap:5px;padding:0 24px 8px}
.typing span{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);
  box-shadow:0 0 12px rgba(94,231,255,.9);animation:blink 1.15s infinite;
}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.22;transform:translateY(0) scale(.9)}40%{opacity:1;transform:translateY(-4px) scale(1.12)}}
.hidden{display:none !important}

.sheet{
  position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;
  background:rgba(4,6,18,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:fade .2s ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-body{
  width:100%;border-radius:30px 30px 0 0;border-width:1px 0 0;
  padding:22px 16px calc(env(safe-area-inset-bottom) + 20px);
  max-height:88dvh;overflow:auto;animation:slideUp .32s var(--spring);
}
@keyframes slideUp{from{transform:translateY(26px);opacity:.6}to{transform:none;opacity:1}}
.sheet-body h3{margin:0 0 14px;font-size:16.5px;letter-spacing:.4px}
.sheet-body label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:13px}
.sheet-body input{
  width:100%;margin-top:7px;padding:12px 14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:var(--text);
  font-size:14px;outline:none;font-family:inherit;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.sheet-body input:focus{border-color:rgba(94,231,255,.65);background:rgba(255,255,255,.15)}
.row{display:flex;gap:10px;margin-top:6px}
.sheet-body > button{width:100%}
.sheet-body > h3:first-child{margin-top:2px}
button.primary,button.ghost,a.primary,a.ghost{
  flex:1;padding:12px 14px;border-radius:17px;font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;
  transition:transform .16s var(--spring), background .18s;
}
a.primary,a.ghost{display:block;text-align:center;text-decoration:none;padding:14px 16px}
button.primary,a.primary{
  border:1px solid rgba(255,255,255,.4);color:#08101f;
  background:linear-gradient(155deg, #6ff0ff, #4f8dff 52%, #b18cff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px rgba(60,130,255,.45);
}
button.ghost,a.ghost{
  border:1px solid rgba(255,255,255,.2);color:var(--text);
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}
button.primary:active,button.ghost:active,a.primary:active,a.ghost:active{transform:scale(.97)}
button.small{flex:0 0 auto;padding:9px 12px;font-size:12.5px;border-radius:13px}
.hint{margin-top:10px;font-size:12.5px;color:var(--dim);min-height:16px}
.hint.ok{color:var(--ok)}
.hint.err{color:var(--bad)}
.hint.tiny{font-size:11.5px;opacity:.72}
.hint.center{text-align:center}
#ownerBox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:11px}
#ownerBox.hidden{display:none}
#ownerBox .row{margin:0}

.msg .b.pic{padding:6px;line-height:0;border-radius:26px;background:rgba(255,255,255,.12)}
.msg .b.pic img{
  max-width:min(58vw,230px);max-height:320px;border-radius:20px;display:block;cursor:zoom-in;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.msg.me .b.pic img{border-bottom-right-radius:8px}
.msg.fish .b.pic img{border-bottom-left-radius:8px}
.preview{
  flex:0 0 auto;display:flex;gap:8px;padding:10px 14px 4px;overflow-x:auto;
  background:rgba(255,255,255,.06);border-top:1px solid var(--line2);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.preview.hidden{display:none}
.thumb{
  position:relative;flex:0 0 auto;width:66px;height:66px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.up::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.thumb .x{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;border:none;
  background:rgba(10,18,28,.75);color:#fff;font-size:12px;line-height:19px;padding:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

.login{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;overflow:auto;
  padding:24px;
  background:radial-gradient(130% 80% at 50% 0%, rgba(20,32,80,.6), rgba(4,6,16,.9) 72%);
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
}
.login.hidden{display:none}
.login-card{
  max-height:100%;overflow:auto;width:100%;max-width:350px;display:flex;flex-direction:column;gap:12px;
  padding:30px 22px 26px;border-radius:32px;animation:pop .3s var(--spring);
}
.login-logo{position:relative;font-size:40px;text-align:center;line-height:1;display:grid;place-items:center}
.login-logo::before{
  content:"";position:absolute;left:50%;top:50%;width:186px;height:186px;
  transform:translate(-50%,-52%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,230,255,.34), rgba(140,110,255,.2) 56%, transparent 78%);
  filter:blur(14px);
}
.login-logo img{
  position:relative;z-index:1;
  width:158px;height:158px;object-fit:contain;transform:translateZ(0);
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.28) 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.28) 93%,transparent 100%);
}
.login-card h2{
  margin:0;text-align:center;font-size:21px;font-weight:800;letter-spacing:2px;
  background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-sub{margin:0 0 8px;text-align:center;font-size:12.5px;color:var(--dim)}
.login-card input{
  padding:14px 16px;border-radius:17px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:var(--text);font-size:15px;outline:none;font-family:inherit;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.login-card input:focus{
  border-color:rgba(94,231,255,.7);background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46), 0 0 0 4px rgba(94,231,255,.16);
}
.login-card input.hidden{display:none}
.login-card .primary{
  padding:14px;border-radius:17px;font-size:15.5px;font-weight:800;color:#08101f;
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(155deg, #6ff0ff, #4f8dff 52%, #b18cff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 12px 30px rgba(60,130,255,.5);
  transition:transform .16s var(--spring);
}
.login-card .primary:active{transform:scale(.975)}
.login-card .hint{min-height:18px;text-align:center}

.notice{
  margin:9px 14px 0;padding:12px 15px;border-radius:20px;
  font-size:13px;color:var(--amber);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(150deg, rgba(255,207,122,.18), rgba(255,255,255,.05));
  border-color:rgba(255,207,122,.34);
}
.notice.hidden{display:none}

.admin-body{overflow:auto}
.admin-list{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;
  padding:14px 14px calc(env(safe-area-inset-bottom) + 18px);overflow-y:auto;
}
.card.user{padding:16px 15px 14px;border-radius:26px;animation:pop .24s var(--spring)}
.card .row1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .qq{font-size:15.5px;font-weight:700;letter-spacing:.4px}
.badge{font-size:11px;padding:4px 10px;border-radius:999px;color:var(--dim);
  background:rgba(255,255,255,.08);border:1px solid var(--line2)}
.badge.on{color:var(--ok);border-color:rgba(92,230,168,.42);background:rgba(92,230,168,.14)}
.card .row2{display:flex;align-items:center;gap:8px;margin-top:8px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);flex:0 0 auto}
.dot.on{background:var(--ok);box-shadow:0 0 12px rgba(92,230,168,.9)}
.dot.pend{background:var(--warn);box-shadow:0 0 12px rgba(255,194,102,.75)}
.card .meta-line{font-size:12px;color:var(--dim);line-height:1.45}
.card .row3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px;color:var(--dim)}
.switch input{display:none}
.track{
  width:48px;height:28px;border-radius:999px;position:relative;flex:0 0 auto;
  background:rgba(255,255,255,.12);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  transition:background .24s var(--spring), border-color .24s;
}
.knob{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(160deg,#fff,#dbe9fb);box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .26s var(--spring);
}
.switch input:checked + .track{background:var(--grad-hot);border-color:rgba(200,230,255,.6)}
.switch input:checked + .track .knob{transform:translateX(20px)}
.switch input:disabled + .track{opacity:.55}

#bgart{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#bgart img{position:absolute;display:block;will-change:transform;filter:blur(.3px) saturate(1.05)}
#bgart .flip{transform:scaleX(-1)}
#bgart .d1{width:min(44vw,300px);right:-12%;top:2%;opacity:.17;animation:swimA 22s ease-in-out infinite alternate}
#bgart .d2{width:min(40vw,265px);left:-18%;bottom:2%;opacity:.18;animation:swimB 26s ease-in-out infinite alternate}
#bgart .d3{width:min(24vw,150px);left:4%;top:24%;opacity:.22;animation:swimA 30s ease-in-out infinite alternate-reverse}
#bgart .d4{width:min(32vw,220px);right:-7%;bottom:-10%;opacity:.24;animation:swimB 24s ease-in-out infinite alternate-reverse}
@keyframes swimA{from{transform:translate3d(0,0,0) rotate(-3deg)}to{transform:translate3d(-14px,13px,0) rotate(4deg)}}
@keyframes swimB{from{transform:translate3d(0,0,0) rotate(3deg) scale(.98)}to{transform:translate3d(15px,-13px,0) rotate(-4deg) scale(1.03)}}
.avatar{padding:0;overflow:hidden;font-size:0}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.06)}

#side{display:none}


#btnQuit{display:none}
#btnQuit.quit{
  width:auto;min-width:62px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:#fff;letter-spacing:.5px;
  background:linear-gradient(155deg, #ff6b7f, #e8404f 58%, #c22c46);
  border-color:rgba(255,190,200,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(220,50,72,.45);
}
#btnQuit.quit:active{transform:scale(.94);background:linear-gradient(155deg,#ff8494,#d63348)}
@media (min-width:900px){
  #btnRice,#btnMenu{display:none}
  #btnQuit{display:inline-flex}
}

@media (min-width: 900px){
  body{overflow:hidden}
  #side{display:flex;position:fixed;z-index:2;left:18px;top:18px;bottom:18px;width:326px;animation:sideIn .5s var(--spring)}
  @keyframes sideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  .side-card{
    position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
    padding:26px 18px 18px;border-radius:30px;overflow:hidden;text-align:center;
    background:
      radial-gradient(120% 80% at 20% 0%, rgba(94,231,255,.2), transparent 60%),
      radial-gradient(120% 80% at 100% 100%, rgba(255,142,199,.22), transparent 62%),
      var(--grad-bar), linear-gradient(var(--tint), var(--tint));
  }
  .side-avatar{
    width:150px;height:150px;border-radius:50%;overflow:hidden;margin:6px 0 14px;position:relative;z-index:1;
    background:radial-gradient(circle at 36% 26%, rgba(210,240,255,.6), rgba(90,162,255,.24) 60%, rgba(167,139,250,.3));
    border:1px solid rgba(255,255,255,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 20px 50px rgba(50,110,255,.4), 0 0 0 6px rgba(255,255,255,.05);
  }
  .side-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.02)}
  .side-name{
    position:relative;z-index:1;font-size:26px;font-weight:800;letter-spacing:4px;
    background:var(--grad-name);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 1px 3px rgba(2,6,20,.75)) drop-shadow(0 0 18px rgba(120,200,255,.45));
  }
  .side-role{position:relative;z-index:1;margin-top:6px;font-size:12.5px;color:#a8d8ff;letter-spacing:.4px}
  .side-bio{
    position:relative;z-index:1;margin:16px 0 0;padding:12px 14px;border-radius:18px;
    font-size:13.5px;line-height:1.95;color:#d2e7ff;letter-spacing:.2px;text-align:left;
    background:rgba(255,255,255,.07);border:1px solid var(--line2);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .side-acts{position:relative;z-index:1;display:grid;gap:9px;width:100%;margin-top:auto;padding-top:18px}
  .side-acts .ghost{width:100%;text-align:center;text-decoration:none;padding:12px 14px;font-size:13.5px}
  .side-foot{position:relative;z-index:1;margin-top:12px;font-size:11px;color:var(--dim2);letter-spacing:.3px}

  #app{
    left:362px;right:18px;top:18px;height:calc(100dvh - 36px);
    border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
    box-shadow:0 30px 70px rgba(4,8,26,.5), inset 0 1px 0 rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  #bar{border-radius:32px 32px 0 0;border-width:0 0 1px}
  #composer{border-radius:0 0 32px 32px;border-width:1px 0 0}
  #stream{padding-left:22px;padding-right:22px}
  .msg{max-width:74%}
}

@media (min-width: 1400px){
  #side{width:360px}
  #app{left:396px}
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  #bar,#composer,.sheet-body,.login-card,.card.user,.notice,.side-card{background:rgba(16,24,52,.96)}
  .msg .b{background:#1a2a52}
  .msg.me .b{background:#2b58c8}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

.login:not(.hidden) ~ #app{visibility:hidden}

.viewer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:rgba(6,10,26,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.viewer.hidden{display:none}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;border-bottom:1px solid var(--line2)}
.viewer-title{font-weight:700;font-size:15px;display:flex;align-items:baseline;gap:8px}
.viewer-acts{display:flex;align-items:center;gap:8px}
.viewer-list{flex:1;overflow:auto;padding:14px 14px calc(env(safe-area-inset-bottom) + 24px);
  display:flex;flex-direction:column;gap:10px}
.vrow{max-width:86%;display:flex;flex-direction:column;gap:4px}
.vrow.me{align-self:flex-end;align-items:flex-end}
.vrow .vb{padding:10px 13px;border-radius:16px;background:rgba(255,255,255,.09);
  border:1px solid var(--line2);font-size:14.5px;line-height:1.62;white-space:pre-wrap;word-break:break-word}
.vrow.me .vb{background:rgba(74,144,255,.24);border-color:rgba(120,180,255,.36)}
.vrow .vt{font-size:11px;color:var(--dim2)}
.vrow .vb img{max-width:min(58vw,220px);display:block;border-radius:12px;margin-bottom:6px}

.page-body{overflow:auto}
#page{position:fixed;inset:0;z-index:2;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 24px)}
.page-card{width:100%;max-width:460px;border-radius:30px;padding:22px 20px 20px;text-align:center;margin:auto}
.page-hero{width:112px;height:112px;object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 10px 22px rgba(70,140,230,.45))}
.page-card h1{
  font-size:20px;line-height:1.45;margin:10px 0 8px;font-weight:800;letter-spacing:1px;
  background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-card .sub{color:var(--dim);font-size:14px;line-height:1.8;margin:0 0 16px;text-align:left}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qr-card{position:relative;background:#fff;border-radius:20px;padding:10px;box-shadow:0 14px 32px rgba(6,12,34,.4)}
.qr-card img{width:100%;display:block;border-radius:12px}
.qr-tag{position:absolute;left:50%;transform:translateX(-50%);top:-9px;font-size:11.5px;padding:2px 10px;
  border-radius:999px;color:#fff;white-space:nowrap}
.qr-tag.wx{background:#07c160}
.qr-tag.ali{background:#1677ff}
.page-note{color:var(--dim2);font-size:12.5px;line-height:1.75;margin:16px 0 0;text-align:left}
.warn18{margin:20px 0 16px;padding:15px 10px;border-radius:16px;color:#ff4d5e;font-size:21px;font-weight:900;
  letter-spacing:1.2px;background:rgba(255,60,80,.12);border:1px solid rgba(255,90,110,.55);
  box-shadow:inset 0 0 28px rgba(255,60,80,.18),0 10px 26px rgba(255,60,80,.14)}
.page-card .ghost{display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;padding:13px 16px}
.hint-line{color:var(--dim2);font-size:12px;line-height:1.6;margin:12px 0 0;text-align:center;letter-spacing:.2px}

/* 服务控制（主人专属） */
.svc-row{display:flex;align-items:center;gap:9px;margin:2px 0 4px}
.svc-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#7b8aa5;
  box-shadow:0 0 0 3px rgba(123,138,165,.16)}
.svc-dot.on{background:#41e08a;box-shadow:0 0 0 3px rgba(65,224,138,.18),0 0 12px rgba(65,224,138,.55)}
.svc-dot.warn{background:#ffcf5c;box-shadow:0 0 0 3px rgba(255,207,92,.18),0 0 12px rgba(255,207,92,.5)}
.svc-dot.off{background:#ff6b7f;box-shadow:0 0 0 3px rgba(255,107,127,.16),0 0 12px rgba(255,107,127,.45)}
.svc-state{font-size:13px;color:var(--dim);letter-spacing:.2px}
#ownerBox button[disabled]{opacity:.55;cursor:default}

/* DeepSeek 高峰/空闲时段小标 */
.sub{display:flex;align-items:center;gap:6px;min-width:0}
.sub .state{margin-top:0}
.pchip{font-size:10.5px;line-height:1;padding:3.5px 6.5px;border-radius:999px;flex:none;
  border:1px solid transparent;background:rgba(255,255,255,.1);color:var(--dim2);
  letter-spacing:.3px;white-space:nowrap}
.pchip.off{color:#86f2c8;border-color:rgba(90,230,180,.34);background:rgba(60,200,150,.15)}
.pchip.peak{color:#ffc78f;border-color:rgba(255,168,96,.4);background:rgba(255,150,60,.16)}

/* 管理台：返回按钮（原来只有一个 ‹ 字符，太小了） */
#bar .back{
  flex:none;display:inline-flex;align-items:center;gap:2px;
  height:38px;padding:0 13px 0 9px;border-radius:999px;
  color:var(--text);text-decoration:none;font-size:14.5px;letter-spacing:.5px;
  background:linear-gradient(160deg, rgba(150,240,255,.22), rgba(120,150,255,.16)), rgba(10,20,44,.36);
  border:1px solid rgba(180,232,255,.34);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(2,8,24,.32), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .18s var(--spring), background .18s;
}
#bar .back .chev{font-size:22px;line-height:1;margin-top:-3px;opacity:.9}
#bar .back:hover{background:linear-gradient(160deg, rgba(150,240,255,.32), rgba(120,150,255,.24)), rgba(10,20,44,.42)}
#bar .back:hover .chev{transform:translateX(-2px)}
#bar .back:active{transform:scale(.95)}
#bar .back .chev{transition:transform .18s var(--spring)}
@media (max-width:400px){
  #bar .back{height:36px;padding:0 11px 0 8px}
  #bar .back .lbl{display:none}
}

/* 图片气泡：动图角标 / 播放态 / 失败态 */
.b.pic{position:relative}
.b.pic img{cursor:zoom-in;display:block}
.b.pic.playing img{cursor:zoom-out}
.b.pic.playing{box-shadow:0 0 0 2px rgba(122,222,255,.45),0 10px 26px rgba(0,0,0,.35)}
.pic-tag{position:absolute;right:8px;bottom:8px;font-size:10.5px;line-height:1;padding:3px 7px;
  border-radius:999px;letter-spacing:.4px;color:#d6ecff;pointer-events:none;
  background:rgba(6,14,30,.66);border:1px solid rgba(160,220,255,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.b.pic.failed{font-size:12.5px;color:var(--dim);padding:14px 16px;cursor:pointer;
  border:1px dashed rgba(160,200,240,.34)}

/* ---------- 手机端设置面板：去毛玻璃 / 单层滚动，解决卡顿与闪烁（2026-11-08） ---------- */
.bar-actions{flex:0 0 auto}
#svcState{display:inline-block;min-height:18px}

@media (max-width:899px){
  /* 面板底下的模糊层在 iOS/安卓上既慢又会闪，直接换成半透明纯色 */
  .sheet{background:rgba(3,6,16,.72);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  .sheet-body{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background-color:#0c1731;background-image:none;
    border-radius:26px 26px 0 0;max-height:92dvh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    animation:none;contain:paint;
    box-shadow:0 -18px 44px rgba(2,6,20,.62);
  }
  .sheet-body::before{display:none}          /* 扫光层在手机上每帧重绘，很费 */
  .sheet-body input{background:rgba(255,255,255,.08);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  button.ghost,a.ghost{-webkit-backdrop-filter:none;backdrop-filter:none}
  .card.user{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#101d3a}
  /* 面板打开时把背景那些漂移/扫光动画停掉 */
  body.sheet-open #bgart img,
  body.sheet-open::before,
  body.sheet-open::after,
  body.sheet-open #bar::before{animation-play-state:paused}
}

@media (prefers-reduced-motion:reduce){
  #bar::before,#composer::before,.login-card::before,.side-card::before{animation:none}
  body::before,body::after{animation:none}
  #bgart img{animation:none}
}

/* 设置面板：小节之间留点呼吸 */
.sheet-body h3{margin:24px 0 12px}
.sheet-body > h3:first-child{margin-top:0}
.sheet-body h3 + p{margin:-4px 0 12px}
.sheet-body .hint.tiny{font-size:11.5px;line-height:1.6;opacity:.78}

/* ---------- PC 端设置面板：收窄居中，别拉成一整条 ---------- */
@media (min-width:900px){
  .sheet{align-items:center;justify-content:center;padding:28px}
  .sheet-body{
    width:min(680px,92vw);border-radius:30px;border-width:1px;
    max-height:min(780px,calc(100dvh - 56px));
  }
}

/* ---------- 液态玻璃输入区（手机端）：按钮浮在聊天上，不再有整块底框 ---------- */
.msg .b.pic{padding:5px;border-radius:22px}
.msg .b.pic img{max-width:min(40vw,150px);max-height:200px;border-radius:16px}

@media (max-width:420px){
  .msg .b.pic img{max-width:min(46vw,132px);max-height:176px}
}

@media (max-width:899px){
  #dock{
    position:absolute;left:0;right:0;bottom:0;z-index:6;
    display:flex;flex-direction:column;gap:6px;
    padding:0 12px calc(env(safe-area-inset-bottom) + 10px);
    pointer-events:none;
    background:linear-gradient(to top, rgba(5,11,24,.6), rgba(5,11,24,0) 84%);
  }
  #dock > *{pointer-events:auto}
  #dock #typing{padding:0 8px 2px}
  #dock #preview{
    background:transparent;border-top:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:2px 4px 0;
  }
  #composer{
    background:none;background-color:transparent;background-image:none;
    border:0;box-shadow:none;border-radius:0;padding:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  #composer::before,#composer::after{display:none}
  #stream{padding-bottom:96px}

  #composer{justify-content:space-between;gap:8px}
  /* 输入框变短后，两侧按钮拉成小胶囊，比例更顺 */
  #send,#composer .pick{width:56px;height:44px;border-radius:999px}
  #input{max-width:min(56vw,290px)}

  /* 输入框、按钮各自玻璃，聊天记录从后面透过来（iOS 液态玻璃） */
  #input{
    background-color:rgba(10,18,38,.3);
    border-color:rgba(255,255,255,.32);
    -webkit-backdrop-filter:blur(28px) saturate(200%);backdrop-filter:blur(28px) saturate(200%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px rgba(3,8,20,.42);
  }
  #send,#composer .pick{
    -webkit-backdrop-filter:blur(28px) saturate(200%);backdrop-filter:blur(28px) saturate(200%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(3,8,20,.4);
  }
  #send{
    background:linear-gradient(160deg, rgba(150,240,255,.3), rgba(110,160,255,.22) 58%, rgba(170,150,255,.26)), rgba(10,20,44,.26);
  }
  #composer .pick{background:rgba(255,255,255,.13)}
}

/* 顶栏时钟 */
.clock{
  font-size:12px;font-weight:600;letter-spacing:.6px;color:#a8c6e6;
  font-variant-numeric:tabular-nums;opacity:.92;
}
@media (max-width:899px){
  .clock{font-size:11.5px}
}

/* 跳到最新：浮在输入区上方，只有离开了底部才出现 */
.jump{
  position:absolute;right:14px;bottom:calc(100% + 8px);
  z-index:7;display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.3px;
  color:#dff2ff;cursor:pointer;
  background:linear-gradient(160deg, rgba(150,240,255,.3), rgba(140,150,255,.26)), rgba(9,20,42,.72);
  border:1px solid rgba(180,232,255,.4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 24px rgba(3,8,20,.45);
}
.jump.hidden{display:none}
.jump:active{transform:scale(.96)}
@media (min-width:900px){
  .jump{right:26px;bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- 全屏（无状态栏）时，顶栏只给刘海让一点点 ---------- */
body.fs #bar{padding-top:max(6px, env(safe-area-inset-top, 0px))}

/* ---------- 用户气泡：降饱和，别那么刺眼 ---------- */
.msg.me .b{
  background:linear-gradient(150deg, rgba(56,104,196,.66), rgba(62,96,180,.56) 52%, rgba(86,82,176,.56) 100%);
  border-color:rgba(160,200,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px rgba(16,44,110,.28);
  color:#e8f2ff;
}

/* ---------- 图片框固定尺寸：先占位，图片后到也不会把页面顶来顶去 ---------- */
.msg .b.pic img,.b.pic img{
  width:min(40vw,150px);height:min(40vw,150px);object-fit:cover;
}
@media (max-width:420px){
  .msg .b.pic img,.b.pic img{width:min(46vw,132px);height:min(46vw,132px)}
}

/* ---------- 灯箱：点开图片不跳浏览器 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,9,20,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:fadeIn .16s ease-out;
}
.lightbox.hidden{display:none}
.lightbox img{
  max-width:min(94vw,760px);max-height:88vh;border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);cursor:zoom-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- 更新记录：站内浮层，点开即用，不加载新页面 ---------- */
.logview{
  position:fixed;inset:0;z-index:58;display:flex;align-items:flex-end;justify-content:center;
  padding:18px;background:rgba(4,9,20,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.logview.hidden{display:none}
.logview-card{
  width:min(680px,96vw);max-height:86dvh;display:flex;flex-direction:column;gap:10px;
  padding:18px;border-radius:26px;
  background:linear-gradient(180deg, rgba(22,40,74,.96), rgba(10,20,40,.97));
  border:1px solid rgba(160,205,255,.2);box-shadow:0 24px 60px rgba(2,6,16,.6);
}
.logview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logview-title{font-size:16px;font-weight:800;letter-spacing:.5px;color:#e6f2ff}
.logview-list{overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px}
.logview .entry{background:rgba(12,23,49,.7);border:1px solid rgba(150,200,255,.16);border-radius:18px;padding:13px 15px}
.logview .entry h4{margin:0 0 7px;font-size:13.5px;font-weight:800;color:#9fe3ff;letter-spacing:.4px}
.logview .entry ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:#d6eaff}
.logview .entry li::marker{color:#5ee7ff}

/* 动图：mp4 播放，尺寸跟图片气泡一致 */
.bubble-video{
  width:min(40vw,150px);height:min(40vw,150px);object-fit:cover;display:block;
  border-radius:16px;cursor:zoom-in;background:rgba(255,255,255,.06);
}
@media (max-width:420px){
  .bubble-video{width:min(46vw,132px);height:min(46vw,132px)}
}

/* 灯箱关闭按钮（除了点空白，也给一个明确出口） */
.lb-close{
  position:absolute;top:calc(env(safe-area-inset-top, 0px) + 14px);right:14px;
  width:42px;height:42px;border-radius:50%;font-size:17px;line-height:1;
  color:#eaf6ff;cursor:pointer;
  background:rgba(12,24,48,.72);border:1px solid rgba(170,215,255,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:inline-flex;align-items:center;justify-content:center;
}
.lb-close:active{transform:scale(.94)}
.lightbox img{cursor:zoom-out}

#lbVid{
  max-width:min(94vw,760px);max-height:88vh;border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);cursor:zoom-out;background:#000;
}
#lbVid.hidden{display:none}

/* ---------- 管理台：token 统计 ---------- */
.usage{margin-top:26px;display:flex;flex-direction:column;gap:8px;padding:0 14px}
/* usage 与卡片对齐 */
#tip{white-space:normal;line-height:1.65;padding:0 14px;overflow-wrap:anywhere}
.usage-h{font-size:15px;font-weight:700;color:#dbeaff;margin:0 0 6px;letter-spacing:.4px}
.usage-list{display:flex;flex-direction:column;gap:8px}
.usage-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-radius:16px;
  background:rgba(12,23,49,.72);border:1px solid rgba(150,200,255,.16);
}
.usage-who{font-size:13.5px;font-weight:700;color:#e8f2ff;font-variant-numeric:tabular-nums}
.usage-nums{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#a8c6e6}
.usage-nums .total{color:#8df0ff;font-weight:800;font-size:13px}
.usage-nums .cost{color:#ffd28a}

/* 背景压暗一档 */
#bgart{opacity:.55}
#bgart img{filter:blur(.3px) saturate(.92) brightness(.86)}
/* 输入框两侧不再有亮描边 */
#input{border-color:rgba(255,255,255,.09)}
#composer::after{display:none}

/* 手机端去掉输入栏两侧的彩色光晕（那两团粉/青看起来像"怪东西"） */
@media (max-width:899px){
  #composer{background:none!important;box-shadow:none!important;border:0!important}
  #composer::before,#composer::after{display:none!important;content:none!important}
}

/* 背景：去掉立绘，再压暗一档；顶栏那条白线也去掉 */
#bgart{display:none!important}
body{
  background-color:#04080f!important;
  background-image:radial-gradient(130% 95% at 50% -12%, #0a1c31 0%, #061020 46%, #04080f 100%)!important;
}
body::before,body::after{opacity:.22}
#bar{
  border-top:0!important;
  box-shadow:0 10px 26px rgba(2,6,16,.55)!important;
}

/* 手机端：顶栏不要扫光、不要底部余晖（那条白线就是扫光的上沿） */
@media (max-width:899px){
  #bar::before{display:none!important}
  body::before,body::after{display:none!important}
}

/* 顶栏最上面那条 1px 亮线（backdrop-filter 边缘取样造成的）：用一条暗线盖掉 */
#bar::after{display:none!important}

/* 背景提亮一档：顶上一层很淡的蓝光，不抢内容 */
body::after{
  content:"";position:fixed;inset:-10% -10% auto -10%;height:52vh;z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(88,168,255,.16), transparent 72%);
}

/* 设置面板：别挤在一起 */
@media (max-width:899px){
  .sheet-body{padding:22px 18px calc(env(safe-area-inset-bottom) + 26px)}
  .sheet-body h3{margin:28px 0 14px}
  .sheet-body > button{min-height:48px}
  #ownerBox{gap:14px;margin-top:18px;padding-top:18px}
  .svc-row{margin:2px 0 10px}
}
@media (min-width:900px){
  .sheet-body{padding:26px 26px 30px}
}

/* 顶部衔接：全屏时状态栏那块不要再露黑底 */
html{background:#12325a}
body.fs{background:#12325a}
#app{background:linear-gradient(180deg, #12325a 0px, #102a45 92px, #081422 210px, #081422 100%)}
body.fs #bar{padding-top:env(safe-area-inset-top, 0px)}
@media (max-width:899px){
  /* 上滑回桌面的过渡里，固定定位的光斑最容易闪成色块，直接不画 */
  body::before, body::after{display:none!important}
  #app{will-change:auto}
}

/* 设置面板：账户区两列，别再一条条堆 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}
.grid2 > button{min-height:44px;font-size:13.5px;padding:0 10px;letter-spacing:.2px}
.row.gap-top{margin-top:10px}
.sheet-body .row{margin:10px 0 0}
.sheet-body .row:first-of-type{margin-top:0}

/* 全屏时不画那条 1px 细线，顶部一路连上去 */
body.fs #bar::after{display:none}
html, body{overscroll-behavior:none}
@media (max-width:899px){
  /* 手机端顶栏毛玻璃降一档：上滑回桌面的过渡里更稳，也不那么吃性能 */
  #bar{-webkit-backdrop-filter:blur(18px) saturate(165%);backdrop-filter:blur(18px) saturate(165%)}
}

/* 顶栏按钮：略椭圆，图标细一点 */
#bar .icon-btn svg{opacity:.92}
#bar .icon-btn:hover{background:rgba(255,255,255,.15)}

/* 背景再亮一档（顶部那圈蓝光也提起来） */
body{background-color:#091a2c!important;
     background-image:radial-gradient(120% 78% at 50% -8%, #173f5f 0%, #102b45 42%, #091a2c 100%)!important}
#app{background:linear-gradient(180deg, #12325a 0px, #123049 92px, #0b1e30 210px, #091a2c 100%)!important}

/* 底栏更透：输入框和两个圆按钮都再薄一点 */
#input{background-image:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02))!important;
       background-color:rgba(8,14,32,.34)!important;
       -webkit-backdrop-filter:blur(22px) saturate(175%)!important;backdrop-filter:blur(22px) saturate(175%)!important;
       box-shadow:inset 0 1px 0 rgba(255,255,255,.26)!important}
#composer .pick,#send{background:linear-gradient(160deg, rgba(150,240,255,.22), rgba(110,160,255,.16) 58%, rgba(150,150,255,.2)), rgba(10,20,44,.3)!important;
       border-color:rgba(180,232,255,.3)!important}
#dock{background:linear-gradient(to top, rgba(5,11,24,.42), transparent 86%)!important}

/* 气泡别挨太紧 */
#stream{gap:16px!important}
.msg + .msg{margin-top:2px}

/* 顶部黑→蓝：既然系统那条缝是黑的，就让页面从黑开始，顺着化开 */
html{background:#1a1f26!important}
body,body.fs{
  background-color:#1a1f26!important;
  background-image:linear-gradient(180deg,
    #3a4148 0px,
    #333a41 40px,
    #2b3239 76px,
    #232a33 118px,
    #1b232e 170px,
    #152231 250px,
    #12253a 40%,
    #0f2136 62%,
    #0b1a2a 82%,
    #08131f 100%)!important;
}
#app{
  background:linear-gradient(180deg,
    #3a4148 0px,
    #333a41 36px,
    #2a313a 70px,
    #212932 108px,
    #1a2430 160px,
    #142436 220px,
    #10253c 46%,
    #0d2035 70%,
    #091722 100%)!important;
}
/* 顶栏自己不要再叠一层亮光，压成从透明到无 */
#bar{
  background:
    linear-gradient(180deg, rgba(58,65,72,.92) 0px, rgba(46,53,61,.55) 36px, rgba(40,48,58,0) 66px),
    linear-gradient(180deg, rgba(18,34,52,.34), rgba(9,20,34,.5))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.5)!important;
}
#bar::before{display:none!important}

/* ---------- 日间模式 ---------- */
html .icon-btn .i-moon{display:none!important}
html[data-theme="light"] .icon-btn .i-sun{display:none!important}
html[data-theme="light"] .icon-btn .i-moon{display:block!important}

html[data-theme="light"]{
  --text:#16324b; --dim:#4b6a86; --dim2:#6484a0;
  --line:rgba(20,60,100,.14); --line2:rgba(20,60,100,.08);
  --glass:rgba(255,255,255,.6); --tint:rgba(255,255,255,.55);
  --grad-bar:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.62) 52%, rgba(226,240,255,.7));
  --grad-name:linear-gradient(112deg, #1b6fa8 0%, #2f6fd0 46%, #7a4fc0 100%);
  background:#eef6ff;
}
html[data-theme="light"] body,
html[data-theme="light"] body.fs{
  background-color:#f4f9ff!important;
  background-image:linear-gradient(180deg,
    #ffffff 0px,
    #fbfdff 90px,
    #f2f8ff 220px,
    #e7f2ff 46%,
    #dceafc 70%,
    #cfe2f8 100%)!important;
  color:var(--text);
}
html[data-theme="light"] #app{
  background:linear-gradient(180deg,
    #ffffff 0px,
    #f8fcff 96px,
    #eef6ff 210px,
    #e2effe 46%,
    #d6e7fa 78%,
    #cfe0f6 100%)!important;
}
html[data-theme="light"] #bar{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72))!important;
  border-bottom:1px solid rgba(20,60,100,.1)!important;
  box-shadow:0 6px 18px rgba(30,70,120,.1)!important;
}
html[data-theme="light"] #bar::after{display:none}
html[data-theme="light"] .name{background:var(--grad-name);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .icon-btn{
  background:rgba(255,255,255,.78)!important;border:1px solid rgba(20,60,100,.12)!important;color:#274963!important;
  box-shadow:0 2px 8px rgba(30,70,120,.08)!important;
}
html[data-theme="light"] .state.on{color:#1f7a4d}
html[data-theme="light"] .clock{color:#5b7b96!important}
html[data-theme="light"] .pchip.off{background:rgba(31,122,77,.12)!important;color:#1b6b45!important;border-color:rgba(31,122,77,.24)!important}
html[data-theme="light"] .pchip.peak{background:rgba(200,120,20,.14)!important;color:#8a5200!important;border-color:rgba(200,120,20,.28)!important}

html[data-theme="light"] .msg.fish .b{
  background:linear-gradient(158deg, rgba(255,255,255,.96), rgba(240,248,255,.9))!important;
  border-color:rgba(20,60,100,.1)!important;color:#1c3b56!important;
  box-shadow:0 4px 14px rgba(30,70,120,.08)!important;
}
html[data-theme="light"] .msg.me .b{
  background:linear-gradient(150deg, #5b9cf0, #4a86dd 52%, #6f7fe0)!important;
  border-color:rgba(255,255,255,.5)!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(60,120,220,.28)!important;
}
html[data-theme="light"] .t{color:#7c96ad!important}
html[data-theme="light"] .b.pic{background:rgba(255,255,255,.9)!important;border-color:rgba(20,60,100,.1)!important}

html[data-theme="light"] #dock{background:linear-gradient(to top, rgba(240,247,255,.85), transparent 86%)!important}
html[data-theme="light"] #input{
  background-image:linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.8))!important;
  background-color:rgba(255,255,255,.72)!important;
  border-color:rgba(20,60,100,.14)!important;color:#16324b!important;
  box-shadow:0 4px 14px rgba(30,70,120,.1)!important;
}
html[data-theme="light"] #input::placeholder{color:#7f9ab1}
html[data-theme="light"] #composer .pick,
html[data-theme="light"] #send{
  background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(232,243,255,.9))!important;
  border-color:rgba(20,60,100,.14)!important;color:#2b5c86!important;
  box-shadow:0 3px 10px rgba(30,70,120,.1)!important;
}
html[data-theme="light"] .jump{
  background:rgba(255,255,255,.92)!important;border-color:rgba(20,60,100,.14)!important;color:#2b5c86!important;
}
html[data-theme="light"] .sheet-body{
  background:linear-gradient(180deg, #fbfdff, #eef6ff)!important;
  border-color:rgba(20,60,100,.1)!important;
}
html[data-theme="light"] .sheet-body h3{color:#12314c}
html[data-theme="light"] .sheet-body button.ghost,
html[data-theme="light"] .sheet-body a.ghost{
  background:rgba(255,255,255,.9)!important;border-color:rgba(20,60,100,.14)!important;color:#1f4460!important;
}
html[data-theme="light"] .svc-state{color:#3d5c78}
html[data-theme="light"] .login-card{background:rgba(255,255,255,.86)!important;border-color:rgba(20,60,100,.12)!important}
html[data-theme="light"] .login-card h2{background:var(--grad-name);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .login input{background:rgba(255,255,255,.9)!important;border-color:rgba(20,60,100,.14)!important;color:#16324b!important}
html[data-theme="light"] .logview-card,
html[data-theme="light"] .entry{background:rgba(255,255,255,.94)!important;border-color:rgba(20,60,100,.12)!important;color:#16324b!important}
html[data-theme="light"] .lightbox{background:rgba(240,247,255,.92)!important}

/* 浅色下别发光：白底上那圈青色光晕会显得字糊 */
html[data-theme=light] #send{text-shadow:none!important;box-shadow:0 3px 10px rgba(30,70,120,.14)!important}
html[data-theme=light] .msg .b{text-shadow:none!important}
html[data-theme=light] .sheet-body button.primary{box-shadow:0 4px 14px rgba(40,110,200,.18)!important;text-shadow:none!important}

/* 浅色下名字不要投影 */
html[data-theme=light] .name,
html[data-theme=light] .side-name,
html[data-theme=light] .login-card h2{
  filter:none!important;text-shadow:none!important;
}

/* 顶栏电量（只在 App 里显示） */
.batt{
  font-size:11.5px;font-weight:600;letter-spacing:.3px;color:#a8c6e6;
  font-variant-numeric:tabular-nums;padding:1px 5px;border-radius:6px;
  background:rgba(255,255,255,.07);
}
.batt.low{color:#ffc46b}
.batt.hidden{display:none}
html[data-theme="light"] .batt{color:#5a7fa8;background:rgba(20,60,110,.06)}

/* ==================== v91：底部导航 / 开屏 / 外观 ==================== */

/* 导航隐藏状态：优先用 html 上的预置类，避免刷新时闪一下 */
html.nav-hidden-pre #tabbar{opacity:0;transform:translateX(-50%) translateY(150%)}

#app{--nav-h:76px}

#tabbar{
  position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 9px);
  transform:translateX(-50%);
  width:min(430px,calc(100% - 24px));
  z-index:7;display:flex;align-items:stretch;gap:2px;
  padding:6px;border-radius:26px;
  background:rgba(10,20,38,.66);
  border:1px solid rgba(150,200,255,.18);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 16px 36px rgba(2,8,20,.52),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .46s cubic-bezier(.22,1.16,.36,1), opacity .3s ease;
}
body.nav-hidden #tabbar{transform:translateX(-50%) translateY(170%);opacity:0;pointer-events:none}

#tabbar .tab{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px 6px;border:0;border-radius:20px;background:transparent;
  color:rgba(190,214,240,.72);font-size:10.5px;letter-spacing:.4px;
  transition:background .28s ease,color .28s ease,transform .3s cubic-bezier(.22,1.16,.36,1);
  -webkit-tap-highlight-color:transparent;cursor:pointer;
}
#tabbar .tab svg{opacity:.9}
#tabbar .tab.active{
  color:#eaf6ff;background:rgba(120,190,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px rgba(30,90,180,.24);
}
#tabbar .tab:active{transform:scale(.94)}
#tabbar .tab-face{
  width:22px;height:22px;border-radius:50%;overflow:hidden;display:block;
  border:1.5px solid rgba(150,205,255,.5);background:#0d1b2e;
}
#tabbar .tab-face img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
#tabbar .tab.active .tab-face{border-color:rgba(180,235,255,.9);box-shadow:0 0 0 2px rgba(94,231,255,.2)}

/* 内容区给导航让位：dock 抬起来，列表底部留白 */
#dock{bottom:var(--nav-h);transform:translateY(0);will-change:transform;
  transition:transform .42s cubic-bezier(.22,1.16,.36,1)}
body.nav-hidden #dock{transform:translateY(var(--nav-h))}
#stream{padding-bottom:calc(96px + var(--nav-h))}

/* 顶栏的导航开关：隐藏态时按钮显示“收起来”的样式 */
#btnNav.is-off{opacity:.55}

/* ---------- 开屏 ---------- */
.splash{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:radial-gradient(125% 90% at 50% 0%,#13263d 0%,#08131f 52%,#04080f 100%);
  transition:opacity .52s ease,transform .52s ease;
}
.splash.out{opacity:0;transform:scale(1.03);pointer-events:none}
.splash-art img{
  max-width:min(76vw,330px);max-height:60vh;object-fit:contain;
  filter:drop-shadow(0 20px 44px rgba(60,140,255,.32));
  animation:splashIn .85s cubic-bezier(.22,1,.36,1) both;
}
@keyframes splashIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
.splash-name{
  margin-top:20px;font-size:23px;font-weight:800;letter-spacing:8px;padding-left:8px;
  background:var(--grad-name,linear-gradient(112deg,#8df0ff,#a9c8ff 46%,#e0b6ff));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:splashIn .9s .1s cubic-bezier(.22,1,.36,1) both;
}

/* ---------- 外观控件 ---------- */
.sheet-body h3.sec{
  display:flex;align-items:center;gap:8px;
}
.sheet-body h3.sec::before{
  content:"";width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,#6fe4ff,#9a8cff);
}
.field{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 14px}
.field-label{font-size:13px;color:var(--dim2,#9db8d6)}
.swatches{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.sw{
  width:26px;height:26px;border-radius:9px;padding:0;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.sw:active{transform:scale(.9)}
.sw.on{
  border-color:rgba(150,235,255,.95);
  box-shadow:0 0 0 2px rgba(94,231,255,.22),inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- 用量卡 ---------- */
.usage-box{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.use-row{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:15px;
  background:rgba(255,255,255,.055);border:1px solid rgba(150,200,255,.14);font-size:12.5px;
}
.use-qq{font-weight:700;letter-spacing:.4px}
.use-tok{margin-left:auto;color:#c6e6ff;font-variant-numeric:tabular-nums;font-weight:600}
.use-cost{color:var(--dim2,#8fa9c8);font-variant-numeric:tabular-nums;font-size:11.5px}

/* 浅色主题下的导航条 */
html[data-theme="light"] #tabbar{
  background:rgba(255,255,255,.78);
  border-color:rgba(120,170,230,.24);
  box-shadow:0 16px 34px rgba(120,160,220,.24),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] #tabbar .tab{color:rgba(58,92,132,.78)}
html[data-theme="light"] #tabbar .tab.active{color:#16324f;background:rgba(120,190,255,.24)}
html[data-theme="light"] .splash{
  background:radial-gradient(125% 90% at 50% 0%,#f2f8ff 0%,#e2eefb 52%,#d3e4f6 100%);
}
html[data-theme="light"] .use-row{background:rgba(255,255,255,.7);border-color:rgba(120,170,230,.2)}

/* ---------- 管理页：服务 / 用量 / 后台 面板 ---------- */
.admin-panels{display:flex;flex-direction:column;gap:12px;padding:0 0 8px}
.panel{padding:16px 16px 14px;border-radius:20px}
.panel h3.sec{margin:0 0 12px;font-size:13.5px;letter-spacing:2px}
.panel .row{margin:8px 0 0}
.panel .hint{margin:8px 0 0}
.panel a.ghost{display:block;text-align:center;text-decoration:none}
.panel.adv{padding:0;overflow:hidden}
.panel.adv > summary{
  list-style:none;cursor:pointer;padding:16px;font-size:13.5px;font-weight:700;
  letter-spacing:2px;color:#d6eaff;display:flex;justify-content:space-between;align-items:center;
}
.panel.adv > summary::-webkit-details-marker{display:none}
.panel.adv > summary::after{content:"›";font-size:20px;transform:rotate(90deg);opacity:.7;transition:transform .25s}
.panel.adv[open] > summary::after{transform:rotate(-90deg)}
.panel.adv .adv-body{padding:0 16px 16px}
.panel.adv label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:8px}

/* ---------- 计费时段详情（v1.3.0） ---------- */
.pchip{border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pchip:active{transform:scale(.96)}
.pr-head{display:flex;align-items:center;gap:9px;margin:2px 0 12px}
.pr-now{font-size:12px;color:#9fc0e2}
.pr-kv{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.pr-row{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.pr-k{color:#9fc0e2;flex:0 0 auto}
.pr-v{color:#e2f0ff;text-align:right}
.pr-tbl{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(150,200,255,.14);border-radius:14px;padding:10px 12px}
.pr-th,.pr-tr{display:grid;grid-template-columns:1fr 64px 64px;gap:4px;font-size:12.5px;font-variant-numeric:tabular-nums}
.pr-th{color:#9fc0e2;font-weight:600}
.pr-tr span:first-child{color:#cfe4ff}
.pr-tr span:not(:first-child){text-align:right;color:#e2f0ff}
.pr-note{font-size:11.5px;line-height:1.6;color:#9fc0e2;margin:6px 2px 0}
html[data-theme="light"] .pr-now,html[data-theme="light"] .pr-k,html[data-theme="light"] .pr-note{color:#5b7695}
html[data-theme="light"] .pr-v,html[data-theme="light"] .pr-tr span{color:#12263c}
html[data-theme="light"] .pr-tbl{background:rgba(255,255,255,.6);border-color:rgba(90,150,220,.2)}

/* ===== 1.4.0 顶栏与二级页 ===== */
/* 顶栏更紧凑：按钮变小、间距收紧 */
#bar{padding:calc(env(safe-area-inset-top,0px) + var(--sb-top,9px)) 13px 9px}
#bar .who{gap:9px;min-width:0}
#bar .avatar{width:36px;height:36px;flex:none}
#bar .name{font-size:15px;letter-spacing:.3px}
#bar .sub{gap:6px}
.bar-actions{gap:6px}
.bar-btn{width:40px;height:31px;border-radius:999px}
.bar-btn svg{width:17px;height:17px;height:17px}

/* 二级页（管理台）顶栏：返回 / 头像 / 标题 / 刷新 一条线对齐 */
.page-bar{align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + var(--sb-top,9px)) 13px 9px}
.page-left{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.page-left .back{height:32px;padding:0 12px 0 8px;flex:none;font-size:13.5px}
.page-left .back .chev{font-size:19px}
.page-left .avatar{width:32px;height:32px;flex:none}
.page-left .meta{min-width:0}
.page-bar .icon-btn{width:38px;height:30px;flex:none;border-radius:999px}
.page-bar .icon-btn svg{width:16px;height:16px}

/* 滚动时关掉毛玻璃，避免和内容一起重绘（抽搐/掉帧的来源） */
body.scrolling #bar,body.scrolling #tabbar,body.scrolling #dock{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
#stream{overflow-anchor:none}
body.nav-anim #stream{overflow-anchor:none}

/* ===== 1.5.0 整页导航 / 键盘 / 背景 ===== */
/* 背景交给 body 的固定渐变，app 本身透明：键盘压缩高度时色块不会跟着上移 */
#app{background:transparent!important}
body,body.fs{background-attachment:fixed!important;background-size:100% 100%!important}

/* 设置 / 敬请期待：从右侧滑入的整页，不再是底部弹层 */
.sheet.page{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  background:var(--bg-page,#0b1a2c)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  animation:none!important;padding:0!important;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1.08,.36,1);
  will-change:transform;
}
.sheet.page.open{transform:translateX(0)}
.sheet.page.hidden{display:none}
body.sheet-open #app{transform:translateX(-12%);transition:transform .34s cubic-bezier(.22,1.08,.36,1)}
body.sheet-open #tabbar{opacity:.35;pointer-events:none}

.page-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + var(--sb-top,9px)) 13px 9px;
  border-bottom:1px solid rgba(150,200,255,.1);
  background:linear-gradient(180deg, rgba(58,65,72,.55), rgba(20,32,46,0));
}
.page-title{font-size:16px;font-weight:700;letter-spacing:.6px;color:var(--text)}
.sheet.page .sheet-body{
  flex:1 1 auto;width:100%;max-height:none;border:0;border-radius:0;
  padding:16px 16px calc(env(safe-area-inset-bottom) + 22px);
  overflow-y:auto;overscroll-behavior:contain;background:transparent!important;
  animation:none!important;box-shadow:none!important;
}
.soon-body{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;color:var(--dim);
}
.soon-ico{font-size:44px;opacity:.9}
.soon-body h2{margin:0;font-size:19px;color:var(--text)}
.soon-body p{margin:0;font-size:13.5px;line-height:1.9}

/* 时钟/价格在深色下用白字 */
.clock{color:#ffffff!important;opacity:.96}
.pchip{color:#eafaff!important}

/* 导航条别在滚动时忽明忽暗：保持同样的磨砂 */
body.scrolling #tabbar{-webkit-backdrop-filter:blur(26px) saturate(180%)!important;backdrop-filter:blur(26px) saturate(180%)!important}

/* 图片打开时先给缩略图，原图后到再换 */
#lbImg{background:#050b14;image-rendering:auto}

/* 浅色主题下的整页 */
html[data-theme="light"] .sheet.page{background:#f7fbff!important}
html[data-theme="light"] .page-head{background:linear-gradient(180deg,#ffffff,rgba(240,248,255,0))}
html[data-theme="light"] .clock{color:#1c3a52!important}

/* 整页头部的返回按钮 */
.page-head .back{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  height:32px;padding:0 12px 0 8px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:var(--text);font-size:13.5px;text-decoration:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .16s var(--spring), background .2s;
}
.page-head .back .chev{font-size:19px;line-height:1;margin-top:-3px;opacity:.9}
.page-head .back:active{transform:scale(.95)}
html[data-theme="light"] .page-head .back{
  background:rgba(255,255,255,.9);border-color:rgba(20,60,100,.12);color:#1c3a52;
}

/* ---------- 1.6.0 平级页面 ---------- */
/* 设置 / 敬请期待 都是和聊天平级的整页，导航条常驻在最上层 */
.sheet.page{
  position:fixed;inset:0;z-index:5;transform:none!important;transition:none!important;
  background:var(--bg-page,#0b1a2c);display:block;
  padding-bottom:calc(86px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet.page.hidden{display:none!important}
.sheet.page.in{animation:tabIn .18s ease-out both}
@keyframes tabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

body.sheet-open #app,
body.page-open #app{transform:none!important}
body.sheet-open #tabbar,
body.page-open #tabbar{opacity:1!important;pointer-events:auto!important}

#tabbar{z-index:9}

/* 导航条和输入框之间那条接缝 */
#dock{background:transparent!important}
#tabbar{border-top:0!important}

/* 页面头：平级页面只留标题，居中靠左，不需要返回 */
.page-head.plain{padding:14px 18px 8px;background:none;border:0}
.page-head.plain .page-title{font-size:19px;letter-spacing:.5px}

/* 日间模式：更新记录 / 计费 / 管理面板 */
html[data-theme="light"] .logview .entry{background:#fff!important;border-color:rgba(20,60,100,.1)!important}
html[data-theme="light"] .logview .entry h4{color:#16506f!important}
html[data-theme="light"] .logview .entry ul{color:#16324b!important}
html[data-theme="light"] .logview .entry li::marker{color:#2b81b8!important}
html[data-theme="light"] .logview-title{color:#12314c!important}
html[data-theme="light"] .card.user,
html[data-theme="light"] .panel{background:rgba(255,255,255,.9)!important;border-color:rgba(20,60,100,.1)!important}
html[data-theme="light"] .card.user .qq,
html[data-theme="light"] .usage-who,
html[data-theme="light"] .panel h3.sec{color:#12314c!important}
html[data-theme="light"] #tip,
html[data-theme="light"] .card.user .meta,
html[data-theme="light"] .usage-nums{color:#5b7b96!important}
html[data-theme="light"] .usage-row,
html[data-theme="light"] .use-row{background:rgba(255,255,255,.8)!important;border-color:rgba(20,60,100,.1)!important}
html[data-theme="light"] .usage-total,
html[data-theme="light"] .use-tok{color:#16506f!important}
/* 1.8.0：开屏版本号 / 管理页 */
.splash-name{position:relative;display:inline-block}
.splash-ver{
  position:absolute;left:calc(100% + 6px);top:-2px;
  font-size:10px;letter-spacing:.2px;color:rgba(160,200,235,.72);
  font-weight:600;white-space:nowrap;
}
.admin-page .page-body{gap:14px}
.adm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 13px;border-radius:14px;background:rgba(12,23,49,.6);margin-bottom:8px}
.adm-qq{font-size:13.5px;color:#dbe9ff;font-variant-numeric:tabular-nums}
.adm-tag{font-size:11px;color:#f0b46a}
.adm-tag.ok{color:#5ce0a0}
#apFull{display:block;text-align:center;margin-top:6px}


/* 1.9.0：日间模式背景收敛（去掉叠加色块与光斑） */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after{display:none!important}
html[data-theme="light"] #app{background:transparent!important}
html[data-theme="light"] #bgart{display:none!important}

/* 高峰 / 空闲 颜色更明确 */
.pchip.off{color:#2fbf7a!important;background:rgba(60,220,150,.16)!important;border-color:rgba(60,220,150,.55)!important;font-weight:700}
.pchip.peak{color:#ff5d6c!important;background:rgba(255,80,100,.16)!important;border-color:rgba(255,80,100,.6)!important;font-weight:700}

/* 气泡再小一点 */
.msg .b{padding:8.5px 12px;border-radius:16px;font-size:14.5px;line-height:1.62}
.msg.me .b,.msg.fish .b{max-width:min(78vw,430px)}
@media (max-width:420px){.msg .b{padding:8px 11px;font-size:14px}}


/* 1.9.5：手机上小按钮去掉毛玻璃与投影（安卓 WebView 会渲染成黑色方块） */
@media (max-width:899px){
  #send, #composer .pick, #btnRice, #btnTheme, #btnNav, #bar .icon-btn, #tabbar .tab{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  #send, #composer .pick{background-clip:padding-box!important}
  #tabbar{box-shadow:none!important}
}

/* 日间：输入区不要深色渐隐，否则和导航条之间像有一条线 */
html[data-theme="light"] #dock{
  background:linear-gradient(to top, rgba(246,250,255,.92), rgba(246,250,255,0) 84%)!important;
}
html[data-theme="light"] #composer{border:0!important;box-shadow:none!important;background:none!important}

/* 键盘弹起：导航条让位，输入框贴键盘 */
body.kb-open #tabbar{display:none!important}
body.kb-open #app{--nav-h:0px!important}
body.kb-open #dock{bottom:0!important}

/* 页面可滚动（设置/管理内容被导航条挡住时能滑上去） */
.sheet.page{overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet.page .page-body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}


/* 1.9.7：底栏区域彻底去掉毛玻璃/投影，防安卓黑方块；dock 不再铺任何底色（日间那条白条） */
@media (max-width:899px){
  #dock, #dock::before, #dock::after{background:none!important;box-shadow:none!important;border:0!important}
  #tabbar, #tabbar *, #composer, #composer *, #dock *{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  #tabbar{background:rgba(8,16,30,.92)!important;border:1px solid rgba(150,200,255,.16)!important}
  #input{background:rgba(10,18,38,.55)!important;border:1px solid rgba(150,200,255,.18)!important}
}
html[data-theme="light"] #tabbar{background:rgba(255,255,255,.95)!important;border-color:rgba(60,110,180,.18)!important}
html[data-theme="light"] #input{background:rgba(255,255,255,.92)!important;border-color:rgba(60,110,180,.2)!important}

/* 开屏图别撑满屏幕 */
.splash img, #splashImg{max-height:56dvh!important;width:auto!important;object-fit:contain}


/* 1.9.7：底栏区域彻底去掉毛玻璃/投影，防安卓黑方块；dock 不再铺任何底色（日间那条白条） */
@media (max-width:899px){
  #dock, #dock::before, #dock::after{background:none!important;box-shadow:none!important;border:0!important}
  #tabbar, #tabbar *, #composer, #composer *, #dock *{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  #tabbar{background:rgba(8,16,30,.92)!important;border:1px solid rgba(150,200,255,.16)!important}
  #input{background:rgba(10,18,38,.55)!important;border:1px solid rgba(150,200,255,.18)!important}
}
html[data-theme="light"] #tabbar{background:rgba(255,255,255,.95)!important;border-color:rgba(60,110,180,.18)!important}
html[data-theme="light"] #input{background:rgba(255,255,255,.92)!important;border-color:rgba(60,110,180,.2)!important}

/* 开屏图别撑满屏幕 */
.splash img, #splashImg{max-height:56dvh!important;width:auto!important;object-fit:contain}


/* 1.9.7：导航条隐藏时把占位一起归零，否则键盘弹起会多出一截空白 */
body.nav-hidden #app{--nav-h:0px}
body.nav-hidden #dock{transform:none!important}
body.kb-open #stream{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}


/* ===== 1.9.8 底栏最终态：半透明但不用毛玻璃（安卓 WebView 毛玻璃会出幽灵条） ===== */
@media (max-width:899px){
  body.scrolling #tabbar{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  #dock, #dock::before, #dock::after{
    background:none!important;border:0!important;box-shadow:none!important;
  }
  #tabbar{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:rgba(14,24,44,.62)!important;
    border:1px solid rgba(150,200,255,.18)!important;
    box-shadow:none!important;
  }
  #tabbar *{box-shadow:none!important}
  #composer, #composer::before, #composer::after{box-shadow:none!important;border:0!important}
  #send, #composer .pick{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:none!important;
    background:rgba(20,34,58,.55)!important;
    border:1px solid rgba(150,205,255,.28)!important;
  }
  #composer .pick svg{opacity:.9}
}
html[data-theme="light"] #tabbar{
  background:rgba(255,255,255,.62)!important;
  border-color:rgba(90,140,200,.22)!important;
}
html[data-theme="light"] #send,
html[data-theme="light"] #composer .pick{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(90,140,200,.22)!important;
  color:#1d3f66!important;
}
html[data-theme="light"] #composer .pick svg{stroke:#2b5b8a}