@charset "UTF-8";
/*!
 * AI47 代理前端 —— 共享样式表
 * 设计令牌取自 workbuddy.cn 线上 CSS（TDesign 体系 + #28b894 青绿品牌色）
 * 由 /socks/index.php 与后续前端页共用，禁止在各页面内联重复定义。
 */

/* ============ 字体（同风格：Alimama 系列标题字 + PingFang 正文） ============ */
@font-face{
  font-family:"Alimama ShuHeiTi";
  src:url(https://download.codebuddy.cn/web/workbuddy/e64b8fb4bc34aa55029abb007f83b311b08261f3/assets/AlimamaShuHeiTi-Bold.subset-B7GgQqeL.woff2) format("woff2");
  font-display:swap;font-weight:400 900;
}
@font-face{
  font-family:"Alimama FangYuanTi VF";
  src:url(https://download.codebuddy.cn/web/workbuddy/e64b8fb4bc34aa55029abb007f83b311b08261f3/assets/AlimamaFangYuanTiVF-Thin.subset-CPWgZJiz.woff2) format("woff2");
  font-display:swap;font-weight:100 900;
}

/* ============ 设计令牌 ============ */
:root{
  --brand:#28b894;
  --brand-dark:#20a080;
  --brand-light:#32e6b9;
  --brand-soft:#eef9f7;
  --brand-grad:linear-gradient(135deg,#28b894,#20a080);
  --brand-grad-alt:linear-gradient(135deg,#28b894,#3b82f6);
  --accent:#6c4dff;

  --ink:#1a202c;
  --ink-2:#333333;
  --muted:#666666;
  --muted-2:#767676; /* 对比度：原 #999 白底仅 2.85:1（不达 WCAG AA 4.5:1）；#767676 ≈ 4.54:1，已达标 */
  --border:#e2e8f0;
  --border-soft:#e8e8e8;
  --bg:#ffffff;
  --bg-soft:#f8f9fa;
  --bg-soft-2:#f5f5f5;
  --dark-grad:linear-gradient(135deg,#1a202c,#4c4f6b);

  --r-sm:4px;
  --r:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:999px;

  --shadow-1:0 2px 8px rgba(0,0,0,.06);
  --shadow-2:0 4px 16px rgba(0,0,0,.08);
  --shadow-3:0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 6px rgba(0,0,0,.05);

  --backdrop-blur:81.33px;
  --ease:.3s;
  --container:1140px;

  --display-font:"Alimama ShuHeiTi","Alimama FangYuanTi VF","PingFang SC","Microsoft YaHei",sans-serif;
}
/* 低性能设备降级 */
@media (hover:none) and (pointer:coarse){
  :root{--backdrop-blur:20px;--ease:.2s}
}
@media (prefers-reduced-motion:reduce){
  :root{--backdrop-blur:0;--ease:0}
  *{animation:none !important;transition:none !important}
}

*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Alimama FangYuanTi VF",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400;line-height:1.6;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ============ 通用组件 ============ */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--brand-dark);
  background:var(--brand-soft);border:1px solid rgba(40,184,148,.22);
  padding:6px 14px;border-radius:var(--r-pill);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(40,184,148,.18)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;border-radius:var(--r);font-size:15px;font-weight:600;
  transition:all var(--ease) ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-lg{height:48px;padding:0 28px;font-size:16px;border-radius:var(--r-md)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 2px 8px rgba(40,184,148,.26)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 4px 14px rgba(40,184,148,.34)}
.btn-outline{border:1px solid var(--border);color:var(--ink-2);background:#fff}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--bg-soft)}

.section{padding:76px 0}
.section-soft{background:var(--bg-soft)}
.sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.sec-head h2{
  font-family:var(--display-font);
  font-size:clamp(24px,3vw,34px);line-height:1.3;font-weight:800;letter-spacing:-.015em;
  margin:14px 0 12px;
}
.sec-head p{font-size:15.5px;color:var(--muted);line-height:1.75}

/* ============ Header（玻璃拟态） ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(var(--backdrop-blur));
  backdrop-filter:saturate(180%) blur(var(--backdrop-blur));
  border-bottom:1px solid rgba(226,232,240,.8);
  transition:box-shadow var(--ease) ease;
}
.site-header.scrolled{box-shadow:var(--shadow-1)}
.nav-bar{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;flex-shrink:0}
.logo .mark{
  width:30px;height:30px;border-radius:var(--r-md);background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:800;
  box-shadow:0 2px 8px rgba(40,184,148,.28);
}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  padding:8px 12px;border-radius:var(--r);font-size:15px;color:var(--ink-2);
  transition:all var(--ease) ease;
}
.nav-links a:hover{color:var(--brand-dark);background:var(--brand-soft)}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:none;width:38px;height:38px;border-radius:var(--r);display:none;align-items:center;justify-content:center}
.burger:hover{background:var(--bg-soft)}
.mobile-menu{display:none;padding:8px 0 14px;border-top:1px solid var(--border-soft)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 4px;font-size:15px;color:var(--ink-2);border-radius:var(--r)}
.mobile-menu a:hover{background:var(--bg-soft)}
@media(max-width:960px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ============ Hero ============ */
.hero{position:relative;padding:72px 0 80px;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(880px 420px at 10% -8%,rgba(40,184,148,.13),transparent 62%),
    radial-gradient(720px 380px at 90% 2%,rgba(108,77,255,.10),transparent 60%),
    radial-gradient(560px 300px at 50% 100%,rgba(50,230,185,.08),transparent 65%);
}
.hero-grid-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(226,232,240,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(226,232,240,.5) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 40%,transparent 100%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr;gap:36px}}
.hero-copy h1{
  font-family:var(--display-font);
  font-size:clamp(30px,4.4vw,50px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:20px 0 18px;
}
.hero-copy h1 em{font-style:normal;background:var(--brand-grad-alt);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(15px,1.4vw,17px);color:var(--muted);line-height:1.75;max-width:560px}
.hero-acts{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-meta{margin-top:16px;font-size:13px;color:var(--muted-2)}

/* 右侧：协议节点卡 */
.proto-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);overflow:hidden;
}
.proto-card .top-bar{height:3px;background:var(--brand-grad-alt)}
.proto-card .head{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--border-soft);background:var(--bg-soft);
  font-size:13px;color:var(--muted);font-weight:600;
}
.proto-card .head .dots{display:flex;gap:6px}
.proto-card .head .dots i{width:9px;height:9px;border-radius:50%;background:#dcdcdc;display:block}
.proto-card .head .dots i:nth-child(1){background:#ff5f57}
.proto-card .head .dots i:nth-child(2){background:#febc2e}
.proto-card .head .dots i:nth-child(3){background:#28c840}
.proto-card .body{padding:16px}
.proto-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);
  border:1px solid var(--border-soft);margin-bottom:9px;background:#fff;
}
.proto-row:last-child{margin-bottom:0}
.proto-row .pico{
  width:34px;height:34px;border-radius:var(--r);background:var(--brand-soft);color:var(--brand-dark);
  display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;letter-spacing:-.02em;
}
.proto-row .pinfo{flex:1;min-width:0}
.proto-row .pname{font-size:14px;font-weight:600;color:var(--ink)}
.proto-row .pdesc{font-size:12px;color:var(--muted-2)}
.proto-row .plat{
  font-size:12px;font-weight:700;color:var(--brand-dark);background:var(--brand-soft);
  padding:3px 9px;border-radius:var(--r-pill);flex-shrink:0;
}

/* ============ 数据条 ============ */
.stat-band{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:var(--bg-soft)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:30px 0}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center}
.stat .num{font-family:var(--display-font);font-size:28px;font-weight:800;color:var(--brand-dark);line-height:1.2}
.stat .lbl{font-size:13px;color:var(--muted-2);margin-top:4px}

/* ============ 功能卡 ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px 26px;
  transition:all var(--ease) ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgba(40,184,148,.4)}
.card .ic{
  width:42px;height:42px;border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand-dark);
  display:grid;place-items:center;margin-bottom:14px;
}
.card h3{font-size:16.5px;font-weight:700;margin-bottom:8px}
.card p{font-size:14px;color:var(--muted);line-height:1.7}

/* ============ 协议支持 ============ */
.proto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.proto-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proto-grid{grid-template-columns:1fr}}
.proto-box{
  border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 20px;background:#fff;
  transition:all var(--ease) ease;
}
.proto-box:hover{border-color:rgba(40,184,148,.45);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.proto-box .nm{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px}
.proto-box .nm .sq{width:8px;height:8px;border-radius:2px;background:var(--brand)}
.proto-box .ds{font-size:13.5px;color:var(--muted);line-height:1.7;margin-top:8px}

/* ============ 公告 ============ */
.news-list{display:grid;gap:12px}
.news-item{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;
  transition:box-shadow var(--ease) ease;
}
.news-item:hover{box-shadow:var(--shadow-2)}
.news-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-size:11.5px;padding:2px 8px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.tag.warn{background:#fdf3e7;color:#e37318}
.tag.important{background:#fdecea;color:#d54941}
.news-title{font-size:15.5px;font-weight:600}
.news-body{color:var(--muted);font-size:14px;margin-top:8px;white-space:pre-wrap;line-height:1.7}
.news-time{color:var(--muted-2);font-size:12px;margin-top:8px}
.empty{text-align:center;color:var(--muted-2);font-size:14px;padding:28px}

/* ============ 步骤 ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 20px}
.step .no{
  width:30px;height:30px;border-radius:50%;background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;margin-bottom:12px;
  box-shadow:0 2px 8px rgba(40,184,148,.24);
}
.step h4{font-size:15.5px;font-weight:700}
.step p{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.7}

/* ============ FAQ ============ */
.faq-list{display:grid;gap:10px;max-width:840px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 18px}
.faq-item summary{font-size:15.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";color:var(--muted-2);font-weight:700;font-size:18px;line-height:1}
.faq-item[open] summary:after{content:"–"}
.faq-item p{color:var(--muted);font-size:14px;margin-top:10px;line-height:1.75}

/* ============ CTA ============ */
.cta-section{padding:74px 0;background:var(--dark-grad);color:#fff;text-align:center}
.cta-headline{font-family:var(--display-font);font-size:clamp(24px,3vw,36px);font-weight:800;line-height:1.32;margin:14px 0 14px}
.cta-desc{font-size:15.5px;color:rgba(255,255,255,.72);max-width:600px;margin:0 auto;line-height:1.75}
.cta-acts{display:flex;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.cta-white{
  background:#fff;color:var(--ink);height:48px;padding:0 28px;border-radius:var(--r-md);
  font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:8px;
}
.cta-white:hover{background:var(--brand-soft);transform:translateY(-1px)}
.cta-line{border:1px solid rgba(255,255,255,.32);color:#fff;height:48px;padding:0 28px;border-radius:var(--r-md);font-size:16px;font-weight:600;display:inline-flex;align-items:center}
.cta-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.badge-on-dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.badge-on-dark .dot{background:var(--brand-light);box-shadow:0 0 0 3px rgba(50,230,185,.25)}

/* ---------- 当前设备推荐（首页 Hero / CTA 通用，对应 workbuddy 的「当前设备」标记） ---------- */
.rec-badge{display:none;align-items:center;background:var(--brand);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:3px 8px;border-radius:999px;margin-left:2px;white-space:nowrap}
.btn.rec,.cta-white.rec{outline:2px solid var(--brand);outline-offset:2px;box-shadow:0 6px 18px rgba(40,184,148,.32)}
.btn.rec .rec-badge,.cta-white.rec .rec-badge{display:inline-flex}

/* ============ Footer ============ */
.site-footer{background:#fff;border-top:1px solid var(--border-soft);padding:52px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(2,1fr);gap:36px}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand-wordmark{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--muted-2);line-height:1.7;max-width:320px}
.footer-col h5{font-size:14px;font-weight:700;margin-bottom:12px}
.footer-col li{margin-bottom:9px}
.footer-col a{font-size:13px;color:var(--muted);transition:color var(--ease) ease}
.footer-col a:hover{color:var(--brand-dark)}
.footer-bottom{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--border-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-2);
}
.disclaimer{font-size:12.5px;color:var(--muted-2);line-height:1.7;max-width:640px}

/* ============ 提示条（未安装等异常态） ============ */
.notice{
  max-width:720px;margin:80px auto;padding:26px 28px;border:1px solid var(--border);
  border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-2);text-align:center;
}
.notice h1{font-family:var(--display-font);font-size:22px;font-weight:800;margin-bottom:10px}
.notice p{color:var(--muted);font-size:14.5px;line-height:1.75}

/* ============================================================
   用户中心组件（/proxy/user/*）
   沿用同一套设计令牌，禁止在用户中心页面内另写 <style>
   ============================================================ */

/* 布局：侧边栏 + 内容 */
.uc-shell{display:grid;grid-template-columns:236px 1fr;gap:28px;padding:28px 0 56px;align-items:start}
@media(max-width:900px){.uc-shell{grid-template-columns:1fr;gap:18px}}

.uc-side{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 14px;box-shadow:var(--shadow-1);position:sticky;top:80px;
}
@media(max-width:900px){.uc-side{position:static}}
.uc-user{display:flex;align-items:center;gap:11px;padding:4px 8px 14px;border-bottom:1px solid var(--border-soft);margin-bottom:10px}
.uc-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800;flex-shrink:0;
  box-shadow:0 2px 8px rgba(40,184,148,.24);
}
.uc-user .nm{font-size:15px;font-weight:700;line-height:1.3}
.uc-user .mt{font-size:12px;color:var(--muted-2)}
.uc-nav{display:grid;gap:2px}
.uc-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);
  font-size:14.5px;color:var(--ink-2);transition:all var(--ease) ease;
}
.uc-nav a:hover{background:var(--bg-soft);color:var(--brand-dark)}
.uc-nav a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.uc-nav .grp{margin:12px 0 6px;padding:0 12px;font-size:11.5px;color:var(--muted-2);font-weight:600;letter-spacing:.06em}
.uc-side-logout{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
.uc-side-logout a{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r)}
.uc-side-logout a:hover{background:#fdecea;color:#d54941}

/* 内容区卡片 */
.uc-page-title{font-family:var(--display-font);font-size:24px;font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.uc-page-desc{color:var(--muted);font-size:14px;margin-bottom:22px}
.uc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-1)}
.uc-card > h3{font-size:16px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.uc-card:last-child{margin-bottom:0}
@media(max-width:600px){.uc-card{padding:18px 16px}}

/* 统计卡 */
.uc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:900px){.uc-stats{grid-template-columns:repeat(2,1fr)}}
.uc-stat{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 18px 16px;box-shadow:var(--shadow-1)}
.uc-stat .lb{font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:6px}
.uc-stat .vl{font-family:var(--display-font);font-size:26px;font-weight:800;line-height:1.25;margin-top:4px;color:var(--ink)}
.uc-stat .vl.ok{color:var(--brand-dark)}
.uc-stat .vl.warn{color:#e37318}
.uc-stat .vl.danger{color:#d54941}
.uc-stat .ex{font-size:12px;color:var(--muted-2);margin-top:2px}

/* 信息表 */
.uc-info{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
@media(max-width:700px){.uc-info{grid-template-columns:1fr}}
.uc-info .row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border-soft);font-size:14px}
.uc-info .row:last-child{border-bottom:none}
.uc-info .k{color:var(--muted-2);flex-shrink:0}
.uc-info .v{color:var(--ink);text-align:right;word-break:break-all}

/* 数据表 */
.uc-table{width:100%;border-collapse:collapse;font-size:14px}
.uc-table th{
  text-align:left;padding:10px 12px;color:var(--muted-2);font-weight:600;font-size:12.5px;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.uc-table td{padding:12px;border-bottom:1px solid var(--border-soft);color:var(--ink-2);vertical-align:middle}
.uc-table tr:last-child td{border-bottom:none}
.uc-table tr:hover td{background:var(--bg-soft)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 表单 */
.uc-form{max-width:440px}
.uc-form .field{margin-bottom:16px}
.uc-form label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.uc-form .input{
  width:100%;height:42px;padding:0 13px;border:1px solid var(--border);border-radius:var(--r);
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
  transition:all var(--ease) ease;
}
.uc-form .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(40,184,148,.14)}
.uc-form .hint{font-size:12.5px;color:var(--muted-2);margin-top:6px;line-height:1.6}
.uc-form .acts{margin-top:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* 提示条 */
.uc-alert{padding:12px 16px;border-radius:var(--r);font-size:14px;margin-bottom:16px;line-height:1.6;display:flex;gap:9px;align-items:flex-start}
.uc-alert.ok{background:var(--brand-soft);color:var(--brand-dark);border:1px solid rgba(40,184,148,.24)}
.uc-alert.err{background:#fdecea;color:#d54941;border:1px solid rgba(213,73,65,.24)}
.uc-alert.warn{background:#fdf3e7;color:#e37318;border:1px solid rgba(227,115,24,.24)}

/* 登录/注册页 */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  background:radial-gradient(900px 460px at 20% -10%,rgba(40,184,148,.12),transparent 60%),
             radial-gradient(760px 400px at 88% 0%,rgba(108,77,255,.10),transparent 60%),
             var(--bg-soft);
}
.auth-box{width:100%;max-width:400px}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 28px;box-shadow:var(--shadow-3)}
.auth-head{text-align:center;margin-bottom:22px}
.auth-brand{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:700;margin-bottom:14px}
.auth-title{font-family:var(--display-font);font-size:21px;font-weight:800}
.auth-sub{color:var(--muted-2);font-size:13.5px;margin-top:5px}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.auth-switch a{color:var(--brand-dark);font-weight:600}
.auth-back{text-align:center;margin-top:14px;font-size:13px}
.auth-back a{color:var(--muted-2)}
.auth-back a:hover{color:var(--brand-dark)}

/* 节点/公告列表项 */
.uc-item{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px;background:#fff;transition:all var(--ease) ease}
.uc-item:hover{border-color:rgba(40,184,148,.4);box-shadow:var(--shadow-2)}
.uc-item:last-child{margin-bottom:0}
.uc-item .t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.uc-item .m{font-size:12.5px;color:var(--muted-2);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.uc-item .b{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.7;white-space:pre-wrap}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-dark)}
.pill.gray{background:var(--bg-soft-2);color:var(--muted)}
.pill.purple{background:rgba(108,77,255,.12);color:var(--accent)}
.empty-box{text-align:center;color:var(--muted-2);font-size:14px;padding:34px 12px}

/* ============================================================
   下载页组件（/socks/download.php）
   ============================================================ */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.dl-grid{grid-template-columns:1fr}}

.dl-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  padding:26px 24px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;
}
.dl-card.hot{border-color:rgba(40,184,148,.45);box-shadow:0 8px 30px rgba(40,184,148,.12)}
.dl-plat{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dl-plat .ico{
  width:46px;height:46px;border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand-dark);
  display:grid;place-items:center;flex-shrink:0;
}
.dl-plat h3{font-size:19px;font-weight:700;line-height:1.3}
.dl-plat .sub{font-size:12.5px;color:var(--muted-2);margin-top:2px}

.dl-meta{display:grid;gap:7px;margin-bottom:18px}
.dl-meta .r{
  display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted);
  border-bottom:1px dashed var(--border-soft);padding-bottom:6px;
}
.dl-meta .r:last-child{border-bottom:none}
.dl-meta .r .v{color:var(--ink-2);font-weight:600;text-align:right;word-break:break-all}

.dl-card .acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.dl-sha{
  margin-top:14px;font-family:SFMono-Regular,Consolas,"Courier New",monospace;font-size:11.5px;
  color:var(--muted-2);word-break:break-all;background:var(--bg-soft);
  border-radius:var(--r);padding:8px 10px;line-height:1.6;
}
.dl-sha b{color:var(--muted);font-family:inherit;font-weight:600}

.dl-notes{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
.dl-notes h4{font-size:13.5px;font-weight:700;margin-bottom:10px;color:var(--ink-2)}
.dl-notes li{
  font-size:13.5px;color:var(--muted);line-height:1.75;padding-left:16px;position:relative;margin-bottom:6px;
}
.dl-notes li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--brand-light)}

.dl-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.dl-steps{grid-template-columns:1fr}}
.dl-step-col h4{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}

.dl-hist{overflow-x:auto}
.dl-hist table{width:100%;border-collapse:collapse;font-size:13.5px}
.dl-hist th{
  text-align:left;font-size:12.5px;color:var(--muted-2);font-weight:600;
  padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.dl-hist td{padding:10px;border-bottom:1px solid var(--border-soft);color:var(--ink-2);white-space:nowrap}
.dl-hist tr:last-child td{border-bottom:none}
.dl-hist tr:hover td{background:var(--bg-soft)}
.dl-hist a{color:var(--brand-dark);font-weight:600}

/* ---------- 下载页：hero 收紧 ---------- */
.dl-hero{padding:56px 0 38px}
.dl-hero .inner{position:relative;text-align:center;max-width:760px;margin:0 auto}
.dl-hero h1{font-size:clamp(27px,4vw,40px);margin:18px 0 14px;line-height:1.2}
.dl-hero p{max-width:620px;margin:0 auto}

/* ---------- 下载页：推荐态 ---------- */
.dl-card{position:relative}
.dl-badge-rec{
  display:none;position:absolute;top:-11px;right:20px;font-size:12px;font-weight:700;color:#fff;
  background:var(--brand-grad);padding:4px 12px;border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(40,184,148,.3);
}
.dl-card.rec{border-color:rgba(40,184,148,.6);box-shadow:0 10px 34px rgba(40,184,148,.16)}
.dl-card.rec .dl-badge-rec{display:inline-block}
/* 非本机平台降级显示，视线自然落到推荐的那张 */
.dl-card.dim{opacity:.82}

/* ---------- 下载页：小工具按钮 ---------- */
.dl-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dl-mini{
  font-size:12.5px;color:var(--muted);border:1px solid var(--border);background:#fff;
  border-radius:var(--r-pill);padding:5px 13px;cursor:pointer;transition:all var(--ease) ease;
}
.dl-mini:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}

/* ---------- 下载页：卡内排障指引 ---------- */
.dl-help{margin-top:16px;border-top:1px solid var(--border-soft);padding-top:14px}
.dl-help summary{
  font-size:13.5px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink-2);
}
.dl-help summary::-webkit-details-marker{display:none}
.dl-help summary:after{content:"+";color:var(--muted-2);font-weight:700;font-size:16px;line-height:1}
.dl-help[open] summary:after{content:"–"}
.dl-help .body{margin-top:10px}
.dl-help .body p{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:9px}
.dl-help .body p:last-child{margin-bottom:0}
.dl-cmd{
  display:block;font-family:SFMono-Regular,Consolas,"Courier New",monospace;font-size:11.5px;
  background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--r);
  padding:7px 9px;word-break:break-all;color:var(--ink-2);margin:6px 0;
}

/* ---------- 下载页：历史表小屏隐藏文件列 ---------- */
@media(max-width:700px){.dl-hist .col-file{display:none}}

/* ---------- 用户中心：进度条 / 用量条（对标同类面板） ---------- */
.uc-bar{
  height:8px;border-radius:var(--r-pill);background:var(--bg-soft-2);
  overflow:hidden;margin:10px 0 6px;
}
.uc-bar > i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--brand-grad);transition:width .4s ease;
}
.uc-bar.warn > i{background:linear-gradient(135deg,#e37318,#d54941)}
.uc-bar.danger > i{background:linear-gradient(135deg,#d54941,#a3271f)}
.uc-bar-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted-2);gap:12px}

.uc-usage{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:620px){.uc-usage{grid-template-columns:1fr}}
.uc-usage .u{font-size:13px}
.uc-usage .u .t{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.uc-usage .u .t b{color:var(--ink);font-weight:700}

/* ---------- 用户中心：检索工具条 ---------- */
.uc-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.uc-toolbar input,.uc-toolbar select{
  height:36px;border:1px solid var(--border);border-radius:var(--r);
  padding:0 11px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;
}
.uc-toolbar input{min-width:190px;flex:1;max-width:280px}
.uc-toolbar input:focus,.uc-toolbar select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(40,184,148,.14);
}
.uc-toolbar .cnt{font-size:12.5px;color:var(--muted-2)}
.uc-empty{text-align:center;color:var(--muted-2);font-size:14px;padding:26px 12px;display:none}
.uc-empty.show{display:block}

/* ---------- 全局轻提示 ---------- */
.dl-toast{
  position:fixed;right:20px;bottom:24px;z-index:300;max-width:78vw;
  background:var(--ink);color:#fff;font-size:13.5px;line-height:1.5;
  padding:11px 16px;border-radius:var(--r-md);box-shadow:var(--shadow-3);
  opacity:0;transform:translateY(8px);transition:all .25s ease;pointer-events:none;
}
.dl-toast.show{opacity:1;transform:none}
@media(max-width:520px){.dl-toast{left:20px;right:20px;bottom:18px}}

/* ============ 美化轮：锚点偏移 / 滚动入场 / 卡片微交互 ============ */
html{scroll-behavior:smooth}
.section,.stat-band,.cta-section{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 滚动入场（JS 先加 .reveal 再加 .in；无 JS 或不支持 IO 时不加类，内容照常显示） */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Hero 协议行微交互 */
.proto-row{transition:border-color var(--ease) ease,box-shadow var(--ease) ease,transform var(--ease) ease}
.proto-row:hover{border-color:rgba(40,184,148,.4);box-shadow:var(--shadow-1);transform:translateX(2px)}

/* 数据条：桌面端竖分隔线 */
@media(min-width:761px){.stat+.stat{border-left:1px solid var(--border-soft)}}

/* 功能卡：图标 hover 转渐变填充 */
.card .ic{transition:background var(--ease) ease,color var(--ease) ease,box-shadow var(--ease) ease}
.card:hover .ic{background:var(--brand-grad);color:#fff;box-shadow:0 4px 12px rgba(40,184,148,.28)}
.card h3{transition:color var(--ease) ease}
.card:hover h3{color:var(--brand-dark)}

/* 协议支持：四类各自强调色 + 柔光圈，避免整片同色 */
.proto-grid .proto-box:nth-child(1) .nm .sq{background:#28b894;box-shadow:0 0 0 3px rgba(40,184,148,.12)}
.proto-grid .proto-box:nth-child(2) .nm .sq{background:#6c4dff;box-shadow:0 0 0 3px rgba(108,77,255,.12)}
.proto-grid .proto-box:nth-child(3) .nm .sq{background:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.proto-grid .proto-box:nth-child(4) .nm .sq{background:#00a870;box-shadow:0 0 0 3px rgba(0,168,112,.12)}

/* 公告卡 */
.news-item{transition:box-shadow var(--ease) ease,border-color var(--ease) ease}
.news-item:hover{border-color:rgba(40,184,148,.35)}

/* 步骤卡：hover 上浮 + 序号光圈 */
.step{transition:transform var(--ease) ease,box-shadow var(--ease) ease,border-color var(--ease) ease}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(40,184,148,.4)}
.step .no{box-shadow:0 2px 8px rgba(40,184,148,.24),0 0 0 4px rgba(40,184,148,.10)}

/* FAQ：hover 描边 + 展开态底色 */
.faq-item{transition:border-color var(--ease) ease,box-shadow var(--ease) ease}
.faq-item:hover{border-color:rgba(40,184,148,.45)}
.faq-item[open]{border-color:rgba(40,184,148,.35);box-shadow:var(--shadow-1)}
.faq-item summary{transition:color var(--ease) ease}
.faq-item summary:hover{color:var(--brand-dark)}
.faq-item summary:after{transition:color var(--ease) ease}
.faq-item summary:hover:after{color:var(--brand-dark)}

/* CTA：顶部柔光 */
.cta-section{position:relative;overflow:hidden}
.cta-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 260px at 50% -10%,rgba(255,255,255,.12),transparent 70%)}

/* 页脚链接 */
.footer-col a{transition:color var(--ease) ease,transform var(--ease) ease;display:inline-block}
.footer-col a:hover{color:var(--brand-dark);transform:translateX(2px)}

/* 键盘焦点：统一品牌色焦点环（仅键盘/辅助技术触发，鼠标点击不显示，避免干扰视觉） */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm);
}
/* 不支持 :focus-visible 的老浏览器降级为 :focus */
@supports not selector(:focus-visible){
  a:focus,button:focus,summary:focus{outline:2px solid var(--brand);outline-offset:2px}
}