/* ══════════════════════════════════════════════════════════════════
   YONETIX面板 官网 / 用户中心 样式
   明亮主题 · B站粉主色 · 简约圆角
   ══════════════════════════════════════════════════════════════════ */
:root{
  --pink:#fb7299;            /* B站粉 */
  --pink-d:#e85b83;          /* 悬停加深 */
  --pink-l:#ffe8f0;          /* 浅粉底 */
  --blue:#00aeec;            /* B站蓝(次要强调) */

  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --bg-soft2:#f1f2f5;
  --card:#ffffff;
  --line:#e9eaee;
  --line2:#dfe1e7;

  --txt:#18191c;             /* 近黑 */
  --txt2:#4a4d55;
  --dim:#85868c;
  --dim2:#a7a8ae;

  --ok:#2bb673; --ok-bg:#eaf9f1;
  --warn:#f5a623; --warn-bg:#fff6e6;
  --err:#f04a4a; --err-bg:#feecec;

  --r:16px; --r2:12px; --r3:10px;
  --shadow:0 1px 3px rgba(24,25,28,.05),0 8px 24px rgba(24,25,28,.06);
  --shadow-h:0 4px 10px rgba(24,25,28,.07),0 16px 40px rgba(24,25,28,.1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pink-d);text-decoration:none}
a:hover{color:var(--pink)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
h1,h2,h3{line-height:1.35;font-weight:700}
.muted{color:var(--dim)}
.center{text-align:center}
.note{color:var(--dim);font-size:13.5px;margin-top:10px}

/* ── 顶栏 ── */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;color:var(--txt)}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-txt b{font-size:15.5px;letter-spacing:.2px}
.brand-txt i{font-size:11.5px;color:var(--dim2);font-style:normal}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-links a{padding:8px 14px;border-radius:999px;color:var(--txt2);font-size:14.5px;transition:.15s}
.nav-links a:hover{color:var(--txt);background:var(--bg-soft2)}
.nav-links a.on{color:var(--pink-d);background:var(--pink-l);font-weight:600}
.nav-links a.ghost{color:var(--dim)}

/* ── 按钮(B站粉) ── */
.btn-pill{display:inline-block;padding:10px 22px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:600;color:#fff;background:var(--pink);
  box-shadow:0 4px 14px rgba(251,114,153,.34);transition:.18s}
.btn-pill:hover{background:var(--pink-d);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(251,114,153,.42)}
.btn-pill:active{transform:translateY(0)}
.btn-pill.big{padding:14px 34px;font-size:16px;border-radius:999px}
.btn-pill.wide{width:100%;margin-top:10px;padding:12px}
.btn-line{display:inline-block;padding:10px 22px;border-radius:999px;cursor:pointer;font:inherit;
  font-weight:600;color:var(--txt2);background:#fff;border:1px solid var(--line2);transition:.18s}
.btn-line:hover{border-color:var(--pink);color:var(--pink-d);background:var(--pink-l)}
.btn-line.big{padding:14px 34px;font-size:16px}
.btn-danger{padding:6px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;
  font-weight:600;color:var(--err);background:var(--err-bg);border:1px solid #ffd5d5}
.btn-danger:hover{background:#ffdede}
.copy{padding:8px 16px;border-radius:999px;cursor:pointer;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--pink-d);background:var(--pink-l);border:1px solid #ffd6e3;
  transition:.15s;white-space:nowrap}
.copy:hover{background:#ffdde9}
.copy.ok{color:var(--ok);background:var(--ok-bg);border-color:#bfe9d4}
.copy.bad{color:var(--err);background:var(--err-bg);border-color:#ffd5d5}

/* ── 首页 Hero ── */
.hero{position:relative;padding:78px 22px 66px;text-align:center;
  background:
    radial-gradient(760px 340px at 50% -60px,rgba(251,114,153,.13),transparent 70%),
    linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);
  border-bottom:1px solid var(--line)}
.hero-in{max-width:860px;margin:0 auto}
.tag{display:inline-block;font-size:13px;font-weight:600;color:var(--pink-d);
  background:var(--pink-l);border-radius:999px;padding:6px 16px;margin-bottom:20px}
.hero h1{font-size:46px;letter-spacing:-.5px;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--pink);
  background:linear-gradient(92deg,var(--pink),#ff9ec7 60%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--txt2);font-size:16.5px;max-width:640px;margin:0 auto 28px}
.lede b{color:var(--txt)}
.cmd{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;
  background:#fff;border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px;
  box-shadow:var(--shadow)}
.cmd code{flex:1;text-align:left;color:var(--txt);font-size:13.6px;overflow-x:auto;
  white-space:nowrap;background:var(--bg-soft);border-radius:var(--r3);padding:9px 12px}
.hero-btns{display:flex;gap:12px;justify-content:center;margin:26px 0 14px;flex-wrap:wrap}
.hint-sm{color:var(--dim2);font-size:13px}

/* ── 区块 ── */
.wrap{max-width:1120px;margin:0 auto;padding:64px 22px}
.wrap.narrow{max-width:860px}
.sec-h{font-size:27px;margin-bottom:10px;text-align:center;letter-spacing:-.3px}
.sec-p{color:var(--dim);text-align:center;margin-bottom:34px;font-size:15.5px}
.wrap.narrow .sec-h,.wrap.narrow .sec-p{text-align:left}
.wrap.uc .sec-h,.wrap.uc .sec-p{text-align:left}
.page-h{font-size:30px;margin-bottom:10px;letter-spacing:-.4px}

/* 步骤 */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.steps li{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.steps li>b{flex:0 0 36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:var(--pink-l);color:var(--pink-d);font-size:16px}
.steps h3{font-size:16.5px;margin-bottom:6px}
.steps p{color:var(--txt2);font-size:14px}

/* 功能卡 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:16px}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  transition:.2s}
.card:hover{border-color:#ffd0de;box-shadow:var(--shadow-h);transform:translateY(-2px)}
.card .ico{font-size:26px;margin-bottom:12px;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:var(--bg-soft)}
.card h3{font-size:16.5px;margin-bottom:8px}
.card p{color:var(--txt2);font-size:14px}
.card.hl{text-align:center;background:linear-gradient(180deg,#fff,var(--bg-soft))}
.big-num{font-size:34px;font-weight:800;margin:8px 0 10px;color:var(--pink);letter-spacing:-.5px}

/* 截图 */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.shots figure{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px;box-shadow:var(--shadow);overflow:hidden}
.shots img{width:100%;border-radius:var(--r2);display:block;border:1px solid var(--line)}
.shots figcaption{color:var(--dim);font-size:13.5px;text-align:center;padding:12px 4px 4px}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:16px 20px;margin-bottom:10px;transition:.15s}
.faq details[open]{border-color:#ffd0de;background:#fffafc}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋";color:var(--pink);font-weight:700;margin-right:9px}
.faq details[open] summary::before{content:"－"}
.faq details p{color:var(--txt2);font-size:14.2px;margin-top:10px;padding-left:22px}

/* ── 登录 / 注册 ── */
.auth{display:grid;place-items:center;padding:70px 22px;min-height:60vh;
  background:linear-gradient(180deg,var(--bg-soft),#fff)}
.auth-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.auth-card h1{font-size:24px;margin-bottom:8px;letter-spacing:-.3px}
.auth-card>p{margin-bottom:22px;font-size:14px}
.auth-card label{display:block;margin-bottom:16px;font-size:13.5px;color:var(--txt2);font-weight:500}
.auth-card input{width:100%;margin-top:7px;padding:12px 14px;border-radius:var(--r3);
  background:var(--bg-soft);border:1px solid var(--line2);color:var(--txt);font:inherit;
  font-size:14.5px;transition:.15s}
.auth-card input:focus{outline:0;background:#fff;border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(251,114,153,.16)}
.auth-card .center{margin-top:16px;font-size:13.5px}
.center-card{text-align:center}

/* ── 提示条 ── */
.alert{padding:12px 16px;border-radius:var(--r3);font-size:14px;margin-bottom:18px;font-weight:500}
.alert.err{color:#a32020;background:var(--err-bg);border:1px solid #ffd5d5}
.alert.ok{color:#126b41;background:var(--ok-bg);border:1px solid #bfe9d4}

/* ── 授权卡 ── */
.lic-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow)}
.lic-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(96deg,var(--pink-l),#f3f6ff);
  border:1px dashed #ffc3d6;border-radius:var(--r2);padding:16px 18px}
.lic-label{color:var(--dim);font-size:13.5px}
.lic-code{flex:1;font-size:19px;letter-spacing:1.4px;color:var(--txt);font-weight:700;
  word-break:break-all}
.lic-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:16px;margin-top:20px}
.lic-meta span{display:block;color:var(--dim2);font-size:12.5px;margin-bottom:2px}
.lic-meta b{font-size:15px}
.st-on{color:var(--ok)}

/* ── 表格 ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:13.8px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{color:var(--dim);font-weight:600;font-size:12.8px;background:var(--bg-soft)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fffafc}
.tbl .ell{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.form-inline{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:22px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff}
.form-inline label{font-size:13.5px;color:var(--txt2);font-weight:500}
.form-inline input{margin-top:7px;padding:11px 13px;border-radius:var(--r3);background:var(--bg-soft);
  border:1px solid var(--line2);color:var(--txt);font:inherit}
.form-inline input:focus{outline:0;background:#fff;border-color:var(--pink)}

/* ── 文档 ── */
.doc h2{font-size:21px;margin:34px 0 12px;padding-left:12px;border-left:3px solid var(--pink)}
.doc h3{font-size:16.5px;margin:22px 0 9px}
.doc p,.doc li{color:var(--txt2);font-size:14.8px}
.doc ul,.doc ol{margin:10px 0 10px 22px}
.doc li{margin-bottom:7px}
.doc pre,.install-box pre{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r2);padding:15px 17px;overflow-x:auto;margin:12px 0}
.doc pre code,.install-box pre code{color:#b8345a;font-size:13.4px;white-space:pre;background:none}
.doc code{color:#b8345a;font-size:13.6px;background:var(--bg-soft2);padding:2px 7px;border-radius:6px}
.doc pre code{background:transparent;padding:0}
.install-box h2{font-size:20px;margin:28px 0 10px}
.install-box ul{margin:10px 0 10px 22px}
.install-box li{color:var(--txt2);font-size:14.8px;margin-bottom:7px}
.tbl code{background:var(--bg-soft2);padding:2px 6px;border-radius:6px;color:#b8345a}

/* ── 页脚 ── */
.foot{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:40px}
.foot-in{max-width:1120px;margin:0 auto;padding:44px 22px 26px;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.foot-col h4{font-size:13.5px;margin-bottom:12px;color:var(--txt)}
.foot-col a{display:block;color:var(--dim);font-size:13.6px;padding:4px 0}
.foot-col a:hover{color:var(--pink-d)}
.foot-brand{font-weight:700;margin-bottom:12px;font-size:15px;color:var(--txt)}
.foot-col .muted{font-size:13.2px}
.foot-bar{max-width:1120px;margin:0 auto;padding:16px 22px 30px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--dim2);font-size:12.8px}
@media(max-width:760px){
  .hero{padding:52px 18px 46px}
  .hero h1{font-size:31px}
  .lede{font-size:15px}
  .cmd{flex-direction:column;align-items:stretch}
  .cmd code{text-align:center}
  .foot-in{grid-template-columns:1fr 1fr}
  .nav-in{padding:12px 16px}
  .brand-txt i{display:none}
  .wrap{padding:46px 18px}
}