/* ============================================================
   TaiaiVPN · 液态琉璃 (Liquid Glass) Design System
   ============================================================ */
:root{
  --blue:#0a5ad6;
  --blue-soft:#2e7bff;
  --cyan:#19b8ef;
  --violet:#7b6cff;
  --mint:#37d9b0;
  --ink:#0a1a33;
  --ink-1:rgba(9,24,48,.72);
  --ink-2:rgba(9,24,48,.48);
  --ink-3:rgba(9,24,48,.30);
  --line:rgba(255,255,255,.7);
  --glass:linear-gradient(152deg,rgba(255,255,255,.72),rgba(255,255,255,.44) 46%,rgba(255,255,255,.3));
  --glass-strong:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.58));
  --shadow:0 30px 54px -30px rgba(10,32,78,.6),0 10px 22px -18px rgba(10,32,78,.45),0 1px 2px rgba(10,32,78,.06);
  --shadow-sm:0 10px 24px -16px rgba(14,38,86,.55);
  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:14px;
  --blur:22px;
  --sat:200%;
  --tint:.0;
  --accent:var(--blue);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:#e8eefb;overflow:hidden;
  font-feature-settings:"tnum" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
}
/* ---------- 背景：极光流体 ---------- */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;
  background:linear-gradient(178deg,#f6faff 0%,#eef4fe 40%,#e9f0fd 72%,#eef4ff 100%)}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,rgba(255,255,255,.34),rgba(255,255,255,.12) 60%,rgba(255,255,255,.3)),
  radial-gradient(120% 70% at 50% 118%,rgba(58,104,200,.18),transparent 62%)}
.bg i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.55;will-change:transform}
.bg .b1{width:78vw;height:70vh;left:-26vw;top:-14vh;
  background:radial-gradient(circle at 40% 40%,#6f9bff 0%,#b7ccff 48%,transparent 74%);animation:d1 24s ease-in-out infinite alternate}
.bg .b2{width:70vw;height:52vh;right:-24vw;top:2vh;
  background:radial-gradient(circle at 45% 45%,#57d8f7 0%,#b6eefb 46%,transparent 74%);animation:d2 27s ease-in-out infinite alternate}
.bg .b3{width:86vw;height:60vh;left:2vw;bottom:-24vh;
  background:radial-gradient(circle at 50% 50%,#a695ff 0%,#d6cbff 48%,transparent 76%);animation:d3 31s ease-in-out infinite alternate}
.bg .b4{width:56vw;height:46vh;right:-14vw;bottom:-6vh;
  background:radial-gradient(circle at 50% 50%,#6fe3c8 0%,#c2f8ec 48%,transparent 74%);animation:d1 36s ease-in-out infinite alternate-reverse}
.bg .b5{width:42vw;height:34vh;left:22vw;top:46vh;
  background:radial-gradient(circle at 50% 50%,#ffbcd6 0%,#ffe1ec 50%,transparent 76%);opacity:.4;animation:d2 29s ease-in-out infinite alternate-reverse}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");}

/* ---------- 玻璃基元 ---------- */
.glass{
  position:relative;border-radius:var(--r-lg);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.8);
  isolation:isolate;
}
.glass{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.glass::before{ /* 折射高光边 */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 70% at 12% -10%,rgba(255,255,255,.95),rgba(255,255,255,0) 55%),
    radial-gradient(90% 60% at 100% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%);
  mix-blend-mode:screen;opacity:.55;
}
.glass::after{ /* 内描边 hairline */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(255,255,255,.16) 38%,rgba(255,255,255,.72) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.85;
}
.tile{border-radius:var(--r-md);padding:14px 16px}
.muted{color:var(--ink-2)}
.tiny{font-size:11px;letter-spacing:.02em}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:22px 6px 10px}
.sec-title h3{margin:0;font-size:13.5px;font-weight:600;color:var(--ink-1);letter-spacing:.03em}
.sec-title a{font-size:12px;color:var(--blue);text-decoration:none;opacity:.9}

/* ---------- 状态栏 / 顶栏 ---------- */
.statusbar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px 2px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#0a1a33}
.statusbar .right{display:flex;gap:6px;align-items:center;opacity:.85}
.statusbar svg{width:15px;height:15px}
.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px 4px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:11px;position:relative;display:grid;place-items:center;
  background:linear-gradient(145deg,#2e7bff,#0a4bb5);box-shadow:0 8px 18px -8px rgba(10,74,180,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.logo svg{width:18px;height:18px;color:#fff}
.brand h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.brand .sub{font-size:10px;letter-spacing:.24em;color:var(--ink-2);margin-top:1px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(140deg,#2e7bff,#0a4bb5);
  box-shadow:0 8px 20px -8px rgba(10,74,180,.85),inset 0 1px 0 rgba(255,255,255,.55),0 0 0 3px rgba(255,255,255,.55)}

/* ---------- 视图容器 ---------- */
#view{position:relative;z-index:2;height:calc(100% - 118px);overflow-y:auto;overflow-x:hidden;
  padding:6px 16px 108px;scroll-behavior:smooth}
#view::-webkit-scrollbar{width:0}
.screen{display:none;animation:fade .32s cubic-bezier(.22,.61,.36,1)}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 底部琉璃 Tab ---------- */
.tabbar{position:fixed;z-index:6;left:16px;right:16px;bottom:14px;height:66px;border-radius:24px;
  display:flex;align-items:center;justify-content:space-around;padding:0 6px;
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 60px -28px rgba(10,32,78,.62),0 8px 18px -14px rgba(10,32,78,.35),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.5)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;
  font:inherit;font-size:10.5px;color:var(--ink-2);padding:8px 0;cursor:pointer;border-radius:16px;transition:.22s}
.tabbar svg{width:21px;height:21px;stroke-width:1.7}
.tabbar button.on{color:var(--blue);background:radial-gradient(60% 70% at 50% 120%,rgba(46,123,255,.16),transparent 70%)}
.tabbar button.on svg{filter:drop-shadow(0 4px 8px rgba(10,90,214,.35))}

/* ---------- 通用 ---------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  font-size:11px;font-weight:600;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  color:var(--ink-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.chip.blue{color:#0a4bb5;background:linear-gradient(180deg,rgba(214,232,255,.95),rgba(190,216,255,.7));border-color:rgba(255,255,255,.8)}
.chip.mint{color:#0a7a5e;background:linear-gradient(180deg,rgba(206,255,242,.95),rgba(178,247,228,.7))}
.chip.violet{color:#4b3bbd;background:linear-gradient(180deg,rgba(228,222,255,.95),rgba(212,203,255,.7))}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(55,217,176,.18)}
.num{font-variant-numeric:tabular-nums}

/* ---------- 告警条 ---------- */
.banner{margin:10px 0 0;border-radius:18px;padding:13px 15px;display:flex;align-items:center;gap:10px;
  color:#fff;font-size:13.5px;font-weight:600;background:linear-gradient(135deg,#ff5a5f,#e0313c);
  box-shadow:0 16px 30px -18px rgba(224,49,60,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.banner.ok{background:linear-gradient(135deg,#22c08a,#0f9c74);box-shadow:0 16px 30px -18px rgba(15,156,116,.9)}
.banner .btn{margin-left:auto;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);
  color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:12px;backdrop-filter:blur(8px)}

/* ---------- 连接球 ---------- */
.orb-wrap{position:relative;height:272px;display:grid;place-items:center;margin:2px 0 -6px}
.orb .veil{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(120% 92% at 34% 10%,rgba(255,255,255,.72),rgba(255,255,255,.28) 46%,rgba(255,255,255,.08) 72%)}
.orb .streak{position:absolute;left:12%;top:6%;width:66%;height:26%;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 70%,transparent);filter:blur(6px);opacity:.85}
.orb-wrap .halo{position:absolute;width:236px;height:236px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,123,255,.32),rgba(46,123,255,0) 68%);filter:blur(8px)}
.orb-wrap.connected .halo{background:radial-gradient(circle,rgba(25,184,239,.42),rgba(55,217,176,.12) 55%,transparent 70%)}
.orb{position:relative;width:184px;height:184px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:
    radial-gradient(112% 88% at 32% 2%,rgba(255,255,255,.99) 0%,rgba(255,255,255,.9) 15%,rgba(248,252,255,.66) 40%,rgba(232,244,255,.5) 68%,rgba(210,232,255,.55) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(200%);backdrop-filter:blur(18px) saturate(200%);
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 1px rgba(24,64,132,.10),
    0 40px 72px -30px rgba(12,45,110,.55),
    0 16px 30px -20px rgba(12,45,110,.4),
    inset 0 3px 5px rgba(255,255,255,1),
    inset 0 -3px 6px rgba(255,255,255,.95),
    inset 0 -22px 40px -22px rgba(74,138,235,.65),
    inset 0 0 0 7px rgba(255,255,255,.4),
    inset 0 -40px 60px -40px rgba(40,110,220,.5),
    inset 0 0 40px -12px rgba(255,255,255,.95);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .5s;
}
.orb:active{transform:scale(.97)}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(52% 34% at 30% 5%,rgba(255,255,255,.98),rgba(255,255,255,0) 70%),
    radial-gradient(40% 22% at 74% 12%,rgba(255,255,255,.7),rgba(255,255,255,0) 72%),
    radial-gradient(60% 30% at 50% 104%,rgba(120,190,255,.45),rgba(120,190,255,0) 70%);
  mix-blend-mode:screen}
.orb .core{display:flex;flex-direction:column;align-items:center;gap:8px}
.orb svg{width:40px;height:40px;color:var(--blue);stroke-width:1.9;filter:drop-shadow(0 8px 14px rgba(10,90,214,.35))}
.orb .label{font-size:17px;font-weight:750;letter-spacing:.08em;color:#083a92}
.orb .sub{font-size:10.5px;letter-spacing:.16em;color:rgba(9,24,48,.55);font-weight:600}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 24px rgba(120,170,255,.25)}
.ring.r1{width:212px;height:212px;opacity:.85}
.ring.r2{width:252px;height:252px;opacity:.55}
.ring.r3{width:292px;height:292px;opacity:.3}
.connected .ring{border-color:rgba(130,235,255,.55);animation:pulse 3.4s ease-in-out infinite}
.connected .ring.r2{animation-delay:.4s}.connected .ring.r3{animation-delay:.8s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.04);opacity:.22}}
.connected .orb{box-shadow:
    0 34px 70px -26px rgba(9,120,180,.6),
    inset 0 2px 2px rgba(255,255,255,1),
    inset 0 -16px 30px -16px rgba(60,220,255,.55),
    0 0 0 1px rgba(140,240,255,.5)}
.connected .orb svg{color:#0a5ad6}
.connected .orb .label{color:#083a92}

/* 律动条 */
.wave{display:flex;align-items:flex-end;gap:2.5px;height:16px;margin-top:2px}
.wave i{width:2.5px;border-radius:2px;background:linear-gradient(180deg,#2ee0ff,#0a90d0);animation:w 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}
.wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}
@keyframes w{0%,100%{height:5px;opacity:.55}50%{height:15px;opacity:1}}

/* ---------- 节点卡 ---------- */
.nodecard{padding:15px 16px;display:flex;align-items:center;gap:13px}
.flag{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:#0a2a5c;background:linear-gradient(150deg,#ffffff,#dce9ff);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(14,38,86,.5),inset 0 0 0 1px rgba(255,255,255,.9)}
.flag.hk{background:linear-gradient(150deg,#ffe3ea,#ffc8d6);color:#8c1030}
.flag.jp{background:linear-gradient(150deg,#fff0f0,#ffd4d4);color:#a02030}
.flag.sg{background:linear-gradient(150deg,#e6fff6,#c6f7e6);color:#0a6c53}
.flag.us{background:linear-gradient(150deg,#e8f1ff,#cfe0ff);color:#123a78}
.flag.tw{background:linear-gradient(150deg,#eaf6ff,#cfe8ff);color:#14507e}
.flag.de{background:linear-gradient(150deg,#fff6e0,#ffe4b0);color:#7a4b00}
.flag.kr{background:linear-gradient(150deg,#f0f0ff,#dcdcff);color:#3a3480}
.nodecard .meta{flex:1;min-width:0}
.nodecard .n1{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:650}
.nodecard .n2{margin-top:3px;font-size:11.5px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.signal{display:flex;align-items:flex-end;gap:2px;height:16px}
.signal i{width:3px;border-radius:1.5px;background:rgba(10,90,214,.25)}
.signal i.on{background:linear-gradient(180deg,#31c7ff,#0a7ad6)}
.signal i:nth-child(1){height:5px}.signal i:nth-child(2){height:8px}.signal i:nth-child(3){height:11px}.signal i:nth-child(4){height:15px}
.pill-btn{height:34px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.8);font:inherit;font-size:12.5px;font-weight:650;
  color:var(--blue);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(233,242,255,.7));
  box-shadow:0 8px 18px -12px rgba(14,38,86,.6),inset 0 1px 0 #fff;cursor:pointer}

/* ---------- 速率 / 流量 ---------- */
.rate{display:flex;gap:10px;margin-top:12px}
.rate .glass{flex:1;padding:12px 14px}
.rate .k{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.rate .v{font-size:19px;font-weight:750;letter-spacing:-.02em;margin-top:2px}
.rate .v span{font-size:11px;font-weight:600;color:var(--ink-2);margin-left:3px}
.spark{height:26px;margin-top:6px;position:relative}
.traffic{padding:16px}
.ring-progress{--p:82;width:64px;height:64px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(from -90deg,#31c7ff calc(var(--p)*1%),rgba(150,180,225,.25) 0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 8px 18px -12px rgba(14,38,86,.7)}
.ring-progress::after{content:"";position:absolute;inset:6px;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(238,245,255,.8));
  box-shadow:inset 0 1px 2px rgba(255,255,255,1)}
.ring-progress b{position:relative;z-index:1;font-size:13px;color:#0a4bb5}
.bar{height:6px;border-radius:6px;background:rgba(150,180,225,.28);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#4ad2ff,#0a7ad6)}

/* ---------- 快捷开关 ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 6px;border-radius:18px;font:inherit;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--ink-1);border:1px solid rgba(255,255,255,.62);
  background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.26));
  backdrop-filter:blur(18px) saturate(170%);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);transition:.2s}
.quick button svg{width:19px;height:19px;color:var(--blue);stroke-width:1.8}
.quick button.on{background:linear-gradient(160deg,rgba(214,236,255,.95),rgba(178,214,255,.65));color:#0a3f9e;
  box-shadow:0 12px 24px -14px rgba(10,90,214,.7),inset 0 1px 0 #fff}

/* ---------- 入口宫格 ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.gbtn{padding:14px 4px;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10.5px;font-weight:600;color:var(--ink-1);
  border:1px solid rgba(255,255,255,.6);background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22));
  backdrop-filter:blur(18px);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);cursor:pointer}
.gbtn svg{width:20px;height:20px;stroke-width:1.8;color:var(--blue)}
.gbtn.i2 svg{color:var(--violet)}.gbtn.i3 svg{color:#0aa88a}.gbtn.i4 svg{color:#e0872b}

/* ---------- 列表 ---------- */
.list{padding:6px 4px}
.li{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:16px;transition:.18s;cursor:pointer}
.li+.li{box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.li:active{background:rgba(255,255,255,.45)}
.li .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(224,236,255,.75));
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -10px rgba(14,38,86,.6)}
.li .ic svg{width:17px;height:17px;color:var(--blue);stroke-width:1.9}
.li .txt{flex:1;min-width:0}
.li .t1{font-size:13.5px;font-weight:600}
.li .t2{font-size:11px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .val{font-size:12.5px;color:var(--ink-1);font-weight:600}
.li .chev{width:14px;height:14px;color:var(--ink-3);flex:none}
.switch{width:46px;height:27px;border-radius:999px;position:relative;flex:none;cursor:pointer;transition:.25s;
  background:rgba(160,185,220,.45);box-shadow:inset 0 1px 3px rgba(20,45,90,.2),inset 0 0 0 1px rgba(255,255,255,.6)}
.switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(160deg,#fff,#eef4ff);box-shadow:0 2px 6px rgba(14,38,86,.35),inset 0 1px 0 #fff;transition:.25s}
.switch.on{background:linear-gradient(135deg,#39a8ff,#0a5ad6);box-shadow:0 6px 16px -8px rgba(10,90,214,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.switch.on::after{left:21.5px}

/* ---------- 分段控件 ---------- */
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(150,180,225,.22);
  box-shadow:inset 0 1px 2px rgba(20,45,90,.12),inset 0 0 0 1px rgba(255,255,255,.55)}
.seg button{flex:1;border:0;border-radius:11px;padding:8px 4px;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-2);background:none;cursor:pointer;transition:.2s}
.seg button.on{color:#0a3f9e;background:linear-gradient(180deg,#fff,rgba(240,246,255,.92));
  box-shadow:0 4px 10px -6px rgba(14,38,86,.6),inset 0 1px 0 #fff}

/* ---------- 搜索 ---------- */
.search{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 #fff,0 10px 22px -18px rgba(14,38,86,.7)}
.search svg{width:16px;height:16px;color:var(--ink-2);flex:none}
.search input{flex:1;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.search input::placeholder{color:var(--ink-3)}
.groups{display:flex;gap:7px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.groups::-webkit-scrollbar{display:none}
.groups button{flex:none;height:31px;padding:0 14px;border-radius:999px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  color:var(--ink-1);border:1px solid rgba(255,255,255,.7);background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.3));
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -12px rgba(14,38,86,.7)}
.groups button.on{color:#fff;background:linear-gradient(135deg,#3a8bff,#0a4bb5);border-color:rgba(255,255,255,.5);
  box-shadow:0 10px 22px -12px rgba(10,74,180,.9),inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- 统计 ---------- */
.stat-hero{padding:20px 18px;display:flex;align-items:center;gap:16px}
.stat-hero .big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.stat-hero .big span{font-size:13px;font-weight:600;color:var(--ink-2);margin-left:4px}
.bars{display:flex;align-items:flex-end;gap:9px;height:112px;padding:6px 2px 0}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars .col i{width:100%;max-width:22px;border-radius:8px;background:linear-gradient(180deg,#5fd6ff,#0a6ed6);box-shadow:0 6px 14px -8px rgba(10,90,214,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.bars .col.dim i{background:linear-gradient(180deg,rgba(150,190,240,.75),rgba(120,165,225,.5))}
.bars .col span{font-size:9.5px;color:var(--ink-2)}

/* ---------- 页面顶标题 ---------- */
.page-head{padding:6px 4px 2px;display:flex;align-items:flex-end;justify-content:space-between}
.page-head h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.page-head p{margin:4px 0 0;font-size:11.5px;color:var(--ink-2)}

/* ---------- 账户 ---------- */
.acct{display:flex;flex-direction:column;align-items:center;padding:24px 18px 18px;text-align:center}
.acct .avatar{width:74px;height:74px;font-size:26px;border-radius:50%}
.acct .mail{margin-top:12px;font-size:15px;font-weight:700}
.acct .plan{margin-top:6px;font-size:11.5px;color:var(--ink-2)}
.vip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:#7a4b00;background:linear-gradient(135deg,#ffe9a8,#ffd166 45%,#ffc233);box-shadow:0 10px 22px -12px rgba(220,160,0,.9),inset 0 1px 0 rgba(255,255,255,.8)}
.kv{display:flex;justify-content:space-between;padding:11px 12px;font-size:12.5px}
.kv+.kv{box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.kv .k{color:var(--ink-1)}
.kv .v{font-weight:650}
.cta{display:flex;gap:10px;margin-top:14px}
.cta button{flex:1;height:48px;border-radius:16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.6)}
.cta .primary{color:#fff;background:linear-gradient(135deg,#3a8bff,#0a4bb5);
  box-shadow:0 16px 30px -16px rgba(10,74,180,.95),inset 0 1px 0 rgba(255,255,255,.45)}
.cta .ghost{color:var(--blue);background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(232,241,255,.6));
  box-shadow:0 12px 24px -18px rgba(14,38,86,.8),inset 0 1px 0 #fff}

/* ---------- 桌面布局 ---------- */
.sidebar,.desk-only{display:none}
@media (min-width:1000px){
  body{background:#eef3fb}
  .shell{display:grid;grid-template-columns:262px 1fr;height:100vh}
  .sidebar{display:flex;flex-direction:column;gap:6px;padding:26px 18px;margin:16px 0 16px 16px;border-radius:28px;
    background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.3));
    -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
  .sidebar .brand{padding:0 8px 18px}
  .sidebar nav{display:flex;flex-direction:column;gap:4px}
  .sidebar nav button{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;border:0;background:none;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-1);cursor:pointer;transition:.2s}
  .sidebar nav button svg{width:19px;height:19px;stroke-width:1.8}
  .sidebar nav button.on{color:#0a3f9e;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(222,236,255,.75));
    box-shadow:0 12px 24px -18px rgba(14,38,86,.9),inset 0 1px 0 #fff}
  .sidebar .me{margin-top:auto;display:flex;align-items:center;gap:11px;padding:12px;border-radius:18px;
    background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.25));border:1px solid rgba(255,255,255,.6)}
  .sidebar .me .avatar{width:38px;height:38px;font-size:14px}
  .sidebar .me .m1{font-size:12.5px;font-weight:700}
  .sidebar .me .m2{font-size:10.5px;color:var(--ink-2)}
  .main{overflow-y:auto;padding:16px 18px 28px;display:block}
  .main::-webkit-scrollbar{width:8px}
  .main::-webkit-scrollbar-thumb{background:rgba(140,170,215,.4);border-radius:8px}
  .statusbar,.tabbar,.topbar{display:none}
  #view{height:auto;overflow:visible;padding:0}
  .desk-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 16px}
  .desk-head h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em}
  .desk-head p{margin:4px 0 0;font-size:12px;color:var(--ink-2)}
  .desk-grid{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(340px,.87fr);gap:18px;align-items:start}
  .desk-col{display:flex;flex-direction:column;gap:14px}
  .desk-only{display:block}
  .orb-wrap{height:300px}
  .screen{animation:none}
  .main .screen.on{display:block}
  .desk-view{display:none}
  .desk-view.on{display:block}
}
@media (min-width:1000px) and (max-width:1280px){ .desk-grid{grid-template-columns:1fr} }

/* ---------- 布局补齐 ---------- */
.main{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column}
#view{flex:1;min-height:0}
.home-grid{display:block}
.stack>*+*{margin-top:10px}
@media (min-width:1000px){
  .home-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(330px,.94fr);gap:18px;align-items:start}
  .stack>*+*{margin-top:14px}
  .main{display:block;height:100vh}
}
/* 连接中 */
.orb-wrap.connecting .orb{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.orb-wrap:not(.connected) .wave{display:none}
.orb-wrap.connecting .wave{display:flex}
.orb-wrap.connecting .ring{animation:pulse 1.6s ease-in-out infinite;border-color:rgba(120,180,255,.6)}
.orb-wrap.connecting .halo{background:radial-gradient(circle,rgba(90,150,255,.4),transparent 68%)}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;z-index:99;
  padding:11px 18px;border-radius:14px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(10,26,51,.82);backdrop-filter:blur(14px);transition:.28s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:1000px){.toast{bottom:28px;left:auto;right:28px;transform:translateY(20px)}.toast.on{transform:none}}