/* =====================================================================
   appwl 设计令牌 —— 所有间距、圆角、字号、阴影、动效都从这里取
   ===================================================================== */
:root{
  /* 间距：4 的倍数 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:56px;--s10:80px;
  /* 圆角 */
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
  /* 字号 */
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-base:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:32px;--fs-4xl:clamp(34px,5.4vw,60px);
  /* 控件高度 */
  --h-sm:30px;--h-md:38px;--h-lg:46px;
  /* 动效 */
  --ease:cubic-bezier(.22,.8,.24,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-fast:.15s;--t-mid:.28s;--t-slow:.45s;
  /* 字体 */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,"Noto Sans CJK SC",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* 语义色（两套主题共用） */
  --ok:#22c55e;--ok-ink:#16a34a;--warn:#f59e0b;--danger:#ef4444;--danger-ink:#dc2626;
  --accent-rgb:139,92,246;--accent:rgb(var(--accent-rgb));
  /* 暗色主题 */
  --bg:#0a0c12;--bg-2:#0e1119;--panel:#131722;--panel-2:#1a1f2c;--line:#252b3b;--line-2:#323a4e;
  --text:#eceef5;--text-2:#b6bccd;--muted:#8a91a8;--ink-on-accent:#fff;
  --nav:rgba(10,12,18,.72);--overlay:rgba(4,6,10,.56);
  --sh-1:0 1px 0 rgba(255,255,255,.03) inset;--sh-2:0 8px 24px -12px rgba(0,0,0,.6);--sh-3:0 24px 64px -24px rgba(0,0,0,.7);
  --grid-rgb:150,165,215;--grid-a:.055;--tint-a:.22;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#f6f7fa;--bg-2:#eef0f5;--panel:#ffffff;--panel-2:#f2f4f8;--line:#e3e6ee;--line-2:#d4d9e4;
  --text:#14171f;--text-2:#3c4354;--muted:#687087;
  --nav:rgba(255,255,255,.78);--overlay:rgba(20,24,34,.28);
  --sh-1:0 1px 2px rgba(16,24,40,.04);--sh-2:0 8px 24px -14px rgba(16,24,40,.22);--sh-3:0 24px 64px -24px rgba(16,24,40,.3);
  --grid-rgb:60,72,110;--grid-a:.06;--tint-a:.13;
  color-scheme:light;
}
body.mac{--accent-rgb:139,92,246}
body.windows{--accent-rgb:14,152,233}

/* ============================ 基础 ============================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{--accent:rgb(var(--accent-rgb));background:var(--bg);color:var(--text);font:400 var(--fs-base)/1.6 var(--font);min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{text-wrap:pretty}
.num,.mono,.kv dd,.stat b,.os .meta b,table td{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);letter-spacing:.04em}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s6)}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.f{fill:currentColor;stroke:none}
::selection{background:rgba(var(--accent-rgb),.28)}

/* 焦点环：清晰、完整、贴合圆角 */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inp:focus-visible,.search:focus-within,select.sel:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)}

/* 背景网格：低对比、顶部清晰、向下渐隐（静态） */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:linear-gradient(rgba(var(--grid-rgb),var(--grid-a)) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--grid-rgb),var(--grid-a)) 1px,transparent 1px);
  background-size:48px 48px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000 35%,transparent 100%)}

/* ============================ 顶栏 ============================ */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);background:var(--nav);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:var(--s4);height:60px}
.logo{display:flex;align-items:center;gap:var(--s3);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;white-space:nowrap}
.logo i{width:28px;height:28px;border-radius:var(--r-sm);background:linear-gradient(135deg,#8b5cf6,#ec4899);display:grid;place-items:center;color:#fff}
.logo i svg{width:16px;height:16px}
.nav .links{display:flex;gap:var(--s1);margin-left:auto;min-width:0}
.nav .links a{height:var(--h-md);padding:0 var(--s3);border-radius:var(--r-md);color:var(--muted);font-size:var(--fs-md);display:flex;align-items:center;gap:var(--s2);white-space:nowrap;transition:color var(--t-fast),background var(--t-fast)}
.nav .links a:hover{color:var(--text);background:var(--panel-2)}
.nav .links a.on{color:var(--text);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.nav .links svg{width:15px;height:15px}
.nav .tools{display:flex;gap:var(--s2);padding-left:var(--s3);border-left:1px solid var(--line)}
.icon-btn{width:var(--h-md);height:var(--h-md);border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel);color:var(--text-2);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:600;transition:border-color var(--t-fast),color var(--t-fast)}
.icon-btn:hover{border-color:var(--line-2);color:var(--text)}
.icon-btn svg{width:17px;height:17px}

/* ============================ 按钮 / 输入 ============================ */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--h-md);padding:0 var(--s4);border-radius:var(--r-md);border:1px solid transparent;background:var(--accent);color:var(--ink-on-accent);font-weight:600;font-size:var(--fs-md);white-space:nowrap;transition:transform var(--t-fast) var(--ease),filter var(--t-fast),background var(--t-fast),border-color var(--t-fast)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.ghost{background:var(--panel);color:var(--text);border-color:var(--line)}
.btn.ghost:hover{filter:none;border-color:var(--line-2);background:var(--panel-2)}
.btn.danger{background:var(--danger)}
.btn.sm{height:var(--h-sm);padding:0 var(--s3);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn.big{width:100%;height:var(--h-lg);font-size:var(--fs-base);border-radius:var(--r-md)}
.btn svg{width:16px;height:16px}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn.go-flash::after{animation:sweep .7s var(--ease)}
@keyframes sweep{to{transform:translateX(120%)}}
.dl-ok{display:none}.btn.go-flash .dl-ok{display:inline}

.inp,.sel{width:100%;height:var(--h-md);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:0 var(--s3);font-size:var(--fs-md);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
textarea.inp{height:96px;padding:var(--s3);resize:vertical;line-height:1.5}
.inp option,.sel option{background:var(--panel);color:var(--text)}
.sel{width:auto;min-width:140px;background:var(--panel)}
.field{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-2);font-weight:500}
.field small{color:var(--muted);font-weight:400}
.field .lab{display:flex;align-items:baseline;gap:var(--s2)}
.check{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-md);color:var(--text);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--panel-2);font:500 11px/1 var(--mono);color:var(--muted)}

/* 标签 / 徽章 */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:var(--r-xs);background:var(--panel-2);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.tag.hot{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:500;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.plain::before{display:none}
.pill.ok{background:rgba(34,197,94,.12);color:var(--ok-ink)}
.pill.bad{background:rgba(239,68,68,.12);color:var(--danger-ink)}
.pill.warn{background:rgba(245,158,11,.14);color:#b45309}
.pill.mac,.pill.windows{background:var(--panel-2);color:var(--text-2)}
[data-theme=dark] .pill.ok{color:#4ade80}[data-theme=dark] .pill.bad{color:#f87171}[data-theme=dark] .pill.warn{color:#fbbf24}
.pv{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:600;background:var(--panel-2);color:var(--text-2);white-space:nowrap}

/* ============================ 首页 ============================ */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:var(--s10) 0 var(--s7);text-align:center}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:560px;background:radial-gradient(closest-side,rgba(139,92,246,var(--tint-a)),transparent);z-index:-1}
.hero h1{font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.hero h1 span:not(.plain){background:linear-gradient(180deg,var(--text) 20%,var(--muted));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:var(--fs-lg);margin:var(--s4) auto 0;max-width:640px;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.hero h1,.phead p,.state p,.dialog p,.panel>p{word-break:keep-all;overflow-wrap:anywhere}
.choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);max-width:900px;margin:var(--s9) auto 0}
.os{--glow-rgb:var(--accent-rgb);position:relative;isolation:isolate;display:block;padding:var(--s8) var(--s7) var(--s7);border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(160deg,var(--panel-2),var(--panel));box-shadow:var(--sh-1),var(--sh-2);text-align:left;overflow:hidden;transition:transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.os.mac{--glow-rgb:139,92,246}.os.win{--glow-rgb:14,152,233}
.os:hover{transform:translateY(-3px);border-color:rgba(var(--glow-rgb),.5)}
.os .ico{width:60px;height:60px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);margin-bottom:var(--s5)}
.os .ico svg{width:30px;height:30px;fill:var(--text)}
.os h2{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em}
.os p{color:var(--muted);margin-top:var(--s1);font-size:var(--fs-md)}
.os .meta{display:flex;gap:var(--s6);margin-top:var(--s6);color:var(--muted);font-size:var(--fs-sm)}
.os .meta b{display:block;color:var(--text);font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.os .meta span{display:block}
.os .go{position:absolute;right:var(--s7);bottom:var(--s7);width:44px;height:44px;border-radius:50%;background:rgb(var(--glow-rgb));color:#fff;display:grid;place-items:center;overflow:hidden;transition:transform var(--t-mid) var(--ease)}
.os .go i{position:absolute;inset:0;display:grid;place-items:center;transition:transform var(--t-slow) var(--ease)}
.os .go i svg{width:20px;height:20px;stroke-width:2.2}
.os .go i+i{transform:translateY(-110%)}
.os:hover .go{transform:scale(1.05)}
.os:hover .go i:first-child{transform:translateX(110%)}
.os:hover .go i+i{transform:translateY(0)}
.tick{position:absolute;top:var(--s5);right:var(--s6);font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--muted);opacity:.75}
.circuit{position:absolute;top:40px;width:340px;height:400px;z-index:-1;pointer-events:none;color:rgba(var(--grid-rgb),.55)}
.circuit.l{left:0}.circuit.r{right:0;transform:scaleX(-1)}
.circuit path{fill:none;stroke:currentColor;stroke-width:1.1}
.circuit circle{fill:var(--bg);stroke:currentColor;stroke-width:1.1}
.circuit circle.hot{fill:currentColor}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin:var(--s10) 0 var(--s5)}
.section-title h3{font-size:var(--fs-xl);white-space:nowrap}
.section-title span{color:var(--muted);font-size:var(--fs-md);white-space:nowrap}

/* ============================ 软件卡片 ============================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:var(--s4)}
.card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:180px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1);transition:transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.card:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.5)}
.card .top{display:flex;gap:var(--s3);align-items:center;min-width:0}
.card .top>div{min-width:0;flex:1}
.card img{width:48px;height:48px;border-radius:var(--r-md);background:var(--panel-2);object-fit:cover;flex:none}
.card h4{font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ver{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sum{color:var(--muted);font-size:var(--fs-md);line-height:1.55;margin:var(--s3) 0 var(--s4);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:var(--fs-xs);color:var(--muted)}
.card .foot .num{display:inline-flex;align-items:center;gap:var(--s3)}
.card .foot svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.pfi svg{width:11px;height:11px;fill:currentColor}
/* 鼠标微光（transform 驱动，GPU 合成） */
.card::before,.os::before{content:"";position:absolute;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.13),transparent);pointer-events:none;z-index:-1;opacity:0;transform:translate3d(var(--mx,50%),var(--my,50%),0);transition:opacity var(--t-mid)}
.os::before{width:420px;height:420px;margin:-210px 0 0 -210px;background:radial-gradient(closest-side,rgba(var(--glow-rgb),.16),transparent)}
.card:hover::before,.os:hover::before{opacity:1}

/* ============================ 平台页 ============================ */
.phead{padding:var(--s9) 0 var(--s6);position:relative}
.crumb{display:flex;align-items:center;gap:var(--s2);color:var(--muted);font-size:var(--fs-md);white-space:nowrap;overflow:hidden}
.crumb a:hover{color:var(--text)}
.crumb .sep{opacity:.5}
.phead h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin-top:var(--s2);display:flex;align-items:center;gap:var(--s3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl-ico{display:inline-grid;place-items:center;flex:none}
.ttl-ico svg{width:34px;height:34px;fill:currentColor}
.phead p{color:var(--muted);margin-top:var(--s2);max-width:720px}
body.mac::before,body.windows::before{content:"";position:fixed;inset:0 0 auto 0;height:420px;pointer-events:none;z-index:-1;background:radial-gradient(900px 360px at 25% 0,rgba(var(--accent-rgb),var(--tint-a)),transparent 70%)}
.toolbar{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin:var(--s2) 0 var(--s4)}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:var(--s2);height:var(--h-lg);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:0 var(--s4);color:var(--muted);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.search input{flex:1;background:none;border:0;outline:0;height:100%;color:var(--text);min-width:0}
.search kbd{flex:none}
.toolbar .sel{height:var(--h-lg)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s6)}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s3);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);color:var(--text-2);font-size:var(--fs-sm);white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.chip.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.chip.on em{color:inherit;opacity:.6}
.list-busy{opacity:.55;transition:opacity var(--t-fast)}

/* ============================ 详情页 ============================ */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);padding:var(--s8) 0}
.dhead{display:flex;gap:var(--s5);align-items:center;min-width:0;margin-top:var(--s3)}
.dhead>div{min-width:0}
.dhead img{width:88px;height:88px;border-radius:var(--r-xl);background:var(--panel-2);flex:none;box-shadow:var(--sh-2)}
.dhead h1{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead .sub{color:var(--muted);margin-top:var(--s1);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;font-size:var(--fs-md)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);margin-top:var(--s6);box-shadow:var(--sh-1)}
.box h3{font-size:var(--fs-base);margin-bottom:var(--s3)}
.box .prose{color:var(--text-2);white-space:pre-wrap;line-height:1.7}
aside .box{position:sticky;top:84px}
.dl{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);min-height:56px}
.dl:first-of-type{border-top:0}
.dl>div{min-width:0}
.dl .n{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-md);min-width:0}
.dl .n span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl .s{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s3) var(--s4);font-size:var(--fs-md);margin-top:var(--s5)}
.kv dt{color:var(--muted)}
.kv dd{min-width:0;overflow-wrap:anywhere}
.kv .lnk{display:inline-flex;max-width:100%;vertical-align:top}
.kv .lnk .ellipsis{display:block}
.lnk{color:var(--accent);display:inline-flex;align-items:center;gap:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t-mid) var(--ease)}
.lnk svg{width:13px;height:13px;opacity:.7;transition:transform var(--t-mid) var(--ease)}
.lnk:hover{background-size:100% 1px}
.lnk:hover svg{transform:translate(2px,-2px);opacity:1}
.btn-stack{display:flex;flex-direction:column;gap:var(--s2)}

/* ============================ 浮层：对话框 / 抽屉 / 菜单 / 提示 ============================ */
.overlay{position:fixed;inset:0;z-index:80;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease)}
.overlay.show{opacity:1;pointer-events:auto}
.dialog{position:fixed;left:50%;top:50%;z-index:81;width:min(420px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--sh-3);opacity:0;pointer-events:none;transform:translate(-50%,-48%) scale(.98);transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.dialog.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.dialog h3{font-size:var(--fs-lg)}
.dialog p{color:var(--muted);margin-top:var(--s2);font-size:var(--fs-md)}
.dialog .acts{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s6)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.x-btn{width:32px;height:32px;border-radius:var(--r-sm);border:0;background:none;color:var(--muted);display:grid;place-items:center}
.x-btn:hover{background:var(--panel-2);color:var(--text)}
.code-row{display:flex;align-items:center;gap:var(--s3);height:56px;padding:0 var(--s3) 0 var(--s4);border:1px dashed var(--line-2);border-radius:var(--r-md);margin-bottom:var(--s2)}
.code-row span{color:var(--muted);font-size:var(--fs-sm);min-width:64px}
.code-row b{flex:1;font:600 var(--fs-xl)/1 var(--mono);letter-spacing:.08em}
.code-row i{flex:1;color:var(--muted);font-style:normal}
.tip{color:var(--muted);font-size:var(--fs-sm);margin:var(--s3) 0 var(--s4)}
.text-btn{display:inline-flex;align-items:center;gap:6px;margin:var(--s4) auto 0;border:0;background:none;color:var(--muted);font-size:var(--fs-sm)}
.text-btn:hover{color:var(--text)}
.text-btn svg{width:14px;height:14px}
.center{display:flex;justify-content:center}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;width:clamp(420px,42vw,720px);max-width:100vw;background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--sh-3);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--t-slow) var(--ease);visibility:hidden}
.drawer.show{transform:none;visibility:visible}
.drawer-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s5) var(--s6);border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-b{flex:1;overflow:auto;padding:var(--s6)}
.drawer-f{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);padding:var(--s4) var(--s6);border-top:1px solid var(--line);background:var(--panel)}
.drawer-f .hint{margin-right:auto;color:var(--muted);font-size:var(--fs-xs);display:flex;gap:6px;align-items:center}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form .full{grid-column:1/-1}
.form-sec{grid-column:1/-1;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:var(--s2);border-top:1px solid var(--line);margin-top:var(--s2)}
.form-sec:first-child{border-top:0;padding-top:0;margin-top:0}
.arow{display:grid;grid-template-columns:1.1fr 2fr 84px 84px 32px;gap:var(--s2);margin-bottom:var(--s2)}

.menu{position:fixed;z-index:90;min-width:220px;padding:var(--s1);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);opacity:0;transform:scale(.97);transform-origin:top right;pointer-events:none;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.menu.show{opacity:1;transform:none;pointer-events:auto}
.menu .grp+.grp{border-top:1px solid var(--line);margin-top:var(--s1);padding-top:var(--s1)}
.menu button{width:100%;display:flex;align-items:center;gap:var(--s3);height:34px;padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:none;color:var(--text);font-size:var(--fs-md);text-align:left}
.menu button:hover,.menu button:focus-visible{background:var(--panel-2);outline:none}
.menu button svg{width:16px;height:16px;color:var(--muted)}
.menu button kbd{margin-left:auto}
.menu button.danger,.menu button.danger svg{color:var(--danger)}
.menu button.danger:hover{background:rgba(239,68,68,.1)}

.toast{position:fixed;left:50%;bottom:var(--s6);z-index:95;display:flex;align-items:center;gap:var(--s2);max-width:calc(100vw - 32px);padding:var(--s3) var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:var(--fs-md);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px}
.toast.ok svg{color:var(--ok)}.toast.bad svg{color:var(--danger)}

/* ============================ 状态组件：加载 / 空 / 错误 ============================ */
.state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);text-align:center;padding:var(--s9) var(--s6);color:var(--muted)}
.state .ic{width:48px;height:48px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--panel-2);color:var(--muted);margin-bottom:var(--s2)}
.state .ic svg{width:22px;height:22px}
.state b{color:var(--text);font-size:var(--fs-base);font-weight:600}
.state p{font-size:var(--fs-md);max-width:380px}
.state .btn{margin-top:var(--s3)}
.state.err .ic{color:var(--danger);background:rgba(239,68,68,.1)}
.skel{position:relative;overflow:hidden;background:var(--panel-2);border-radius:var(--r-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.4s infinite}
[data-theme=light] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}
.card.sk{pointer-events:none}
.card.sk .a{width:48px;height:48px;border-radius:var(--r-md)}
.card.sk .b{height:14px;width:60%}.card.sk .c{height:10px;width:40%;margin-top:8px}
.card.sk .d{height:10px;width:100%;margin-top:18px}.card.sk .e{height:10px;width:80%;margin-top:8px}
.skel-n{display:inline-block;width:2.4em;height:1em;vertical-align:-2px}

/* ============================ 后台 ============================ */
.admin-layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:calc(100vh - 60px)}
.side{border-right:1px solid var(--line);padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:var(--s1);position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.side .grp-t{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;padding:var(--s4) var(--s3) var(--s2)}
.side .grp-t:first-child{padding-top:0}
.side a{display:flex;align-items:center;gap:var(--s3);height:var(--h-md);padding:0 var(--s3);border-radius:var(--r-md);color:var(--text-2);font-size:var(--fs-md);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.side a:hover{background:var(--panel-2);color:var(--text)}
.side a.on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.side a svg{color:var(--muted)}.side a.on svg{color:var(--accent)}
.side a kbd{margin-left:auto}
.side .spacer{flex:1}
.side a.danger,.side a.danger svg{color:var(--danger)}
.main{padding:var(--s7) var(--s8);min-width:0}
.page-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.page-h h2{font-size:var(--fs-2xl);white-space:nowrap;margin-right:auto}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s6)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1);min-width:0}
.stat b{display:block;font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.stat span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s1)}
.stat b.ok{color:var(--ok-ink)}.stat b.bad{color:var(--danger-ink)}
[data-theme=dark] .stat b.ok{color:#4ade80}[data-theme=dark] .stat b.bad{color:#f87171}
.bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.bar .grow{flex:1}
.bar .note{color:var(--muted);font-size:var(--fs-sm)}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md)}
.seg button{height:30px;padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background var(--t-fast),color var(--t-fast)}
.seg button em{font-style:normal;font-weight:500;opacity:.7;font-variant-numeric:tabular-nums}
.seg button.on{background:var(--panel-2);color:var(--text);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:0 var(--s4);height:56px;border-bottom:1px solid var(--line);font-size:var(--fs-md);vertical-align:middle;white-space:nowrap}
th{height:42px;color:var(--muted);font-weight:500;font-size:var(--fs-sm);background:var(--bg-2)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover{background:var(--bg-2)}
td.app .cell{display:flex;align-items:center;gap:var(--s3);min-width:0;max-width:300px}
td.app img{width:30px;height:30px;border-radius:var(--r-sm);flex:none;background:var(--panel-2)}
td.app span{overflow:hidden;text-overflow:ellipsis}
td.act{width:52px;text-align:right}
.more{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--muted);display:inline-grid;place-items:center}
.more:hover,.more[aria-expanded=true]{background:var(--panel-2);border-color:var(--line);color:var(--text)}
td .lnk{font-size:var(--fs-sm);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);max-width:760px}
.panel+.panel{margin-top:var(--s5)}
.panel h3{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.panel>p{color:var(--muted);font-size:var(--fs-md);margin-bottom:var(--s5)}
.progress{height:6px;border-radius:var(--r-pill);background:var(--panel-2);overflow:hidden;margin-top:var(--s4)}
.progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width var(--t-slow) var(--ease)}
.login{max-width:400px;margin:12vh auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s8);box-shadow:var(--sh-3)}
.login h2{font-size:var(--fs-2xl)}
.login p{color:var(--muted);font-size:var(--fs-md);margin:var(--s2) 0 var(--s6)}
.login .btn{width:100%;margin-top:var(--s4)}
.result-list{margin-top:var(--s3);font-size:var(--fs-sm);max-height:180px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.result-list .bad{color:var(--danger)}

footer{border-top:1px solid var(--line);margin-top:var(--s10);padding:var(--s6) 0;color:var(--muted);font-size:var(--fs-sm);text-align:center}

/* ============================ 动效：只服务于状态变化 ============================ */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 35ms)}
.rv.in{opacity:1;transform:none}
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.38s;animation-timing-function:cubic-bezier(.22,.8,.24,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
.vt-fallback body{animation:pageIn .25s var(--ease) both}
.vt-fallback.leaving body{opacity:0;transition:opacity .14s}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.lite .card::before,.lite .os::before{display:none}
.lite .rv{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  @view-transition{navigation:none}
}

/* ============================ 窄屏 ============================ */
@media(max-width:1180px){.circuit{opacity:.5;width:240px;height:282px}.main{padding:var(--s6)}}
@media(max-width:980px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail{grid-template-columns:minmax(0,1fr)}
  aside .box{position:static}
}
@media(max-width:860px){
  .admin-layout{grid-template-columns:1fr}
  .side{position:sticky;top:60px;z-index:20;height:auto;flex-direction:row;overflow-x:auto;padding:var(--s2) var(--s4);gap:var(--s1);border-right:0;border-bottom:1px solid var(--line);background:var(--nav);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .side .grp-t,.side .spacer,.side kbd{display:none}
  .side a{flex:none}
  /* 表格变为卡片列表 */
  .table-wrap{background:none;border:0;box-shadow:none;overflow:visible}
  table,thead,tbody,tr,td{display:block}
  thead{display:none}
  tbody tr{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
  tbody tr:hover{background:var(--panel)}
  td{height:auto;border:0;padding:var(--s1) 0;display:flex;justify-content:space-between;gap:var(--s3);white-space:normal}
  td::before{content:attr(data-l);color:var(--muted);font-size:var(--fs-sm)}
  td.app{padding-right:44px}
  td.app .cell{max-width:none}
  td.app::before,td.act::before{display:none}
  td.act{position:absolute;top:var(--s3);right:var(--s3);width:auto;padding:0}
  td.app{justify-content:flex-start}
  .drawer{width:100vw}
}
@media(max-width:760px){
  .wrap{padding:0 var(--s4)}
  .choose{grid-template-columns:1fr;gap:var(--s4)}
  .circuit{display:none}
  .nav .wrap{gap:var(--s2)}
  .nav .links a{padding:0 var(--s2)}
  .nav .links a span{display:none}
  .nav .tools{padding-left:var(--s2)}
  .logo b{display:none}
  .hero{padding:var(--s9) 0 var(--s6)}
  .os{padding:var(--s6)}
  .os .go{right:var(--s6);bottom:var(--s6)}
  .stats{gap:var(--s3)}
  .stat{padding:var(--s4)}
  .stat b{font-size:var(--fs-2xl)}
  .form{grid-template-columns:1fr}
  .arow{grid-template-columns:1fr 1fr 32px}
  .arow .inp:nth-child(2){grid-column:1/3;grid-row:2}
  .page-h h2{font-size:var(--fs-xl)}
  .section-title span{display:none}
  .search kbd{display:none}
  .drawer-f .hint{display:none}
  .bar .search{flex:1;max-width:none!important}
}
@media(max-width:420px){.grid{grid-template-columns:1fr}.logo{font-size:var(--fs-base)}}
.dhead .sub .num{display:inline-flex;align-items:center;gap:4px}
.dhead .sub svg{width:14px;height:14px}

/* 环境标记：测试 / 开发版本在顶栏显示，生产环境不显示 */
.env-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-left:8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:#92400e;background:#fef3c7;border:1px solid #fcd34d;white-space:nowrap;font-variant-numeric:tabular-nums}
[data-theme="dark"] .env-badge{color:#fcd34d;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4)}
@media (max-width:560px){.env-badge{margin-left:4px;padding:0 6px}}