/* ============================================================
   gtpSaas 统一「软件风格」样式
   深色顶栏 + 浅色内容区 + 蓝色强调色；同时兼容后台 admin-* 类
   ============================================================ */
:root{
    --sa-ink:#111827; --sa-line:#e5e7eb; --sa-line2:#d1d5db;
    --sa-bg:#f3f4f6; --sa-card:#ffffff; --sa-text:#374151; --sa-text2:#6b7280;
    --sa-accent:#3b82f6; --sa-accent2:#2563eb; --sa-accent-soft:#eff6ff;
    --sa-ok:#16a34a; --sa-ok-soft:#ecfdf3; --sa-warn:#d97706; --sa-warn-soft:#fffbeb;
    --sa-err:#dc2626; --sa-err-soft:#fef2f2;
    --sa-top:#161b22; --sa-top2:#0f131a; --sa-top-text:#e5e7eb; --sa-top-muted:#9ca3af;
    --sa-radius:10px;
}
*{ box-sizing:border-box; }
body.sa-body{ margin:0; background:var(--sa-bg); font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; color:var(--sa-text); font-size:14px; }
a{ color:var(--sa-accent2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- 顶栏（全部页面统一） ---------- */
.sa-top{
    height:52px; display:flex; align-items:center; padding:0 18px; gap:14px;
    background:linear-gradient(180deg,var(--sa-top),var(--sa-top2)); color:var(--sa-top-text);
    position:relative; z-index:90; flex:none;
}
.sa-top .sa-logo{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:15px; letter-spacing:.3px; }
.sa-top .sa-logo:hover{ text-decoration:none; }
.sa-logo .dot{ width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#60a5fa,#2563eb); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; }
.sa-top .sa-nav{ display:flex; gap:2px; margin-left:10px; }
.sa-top .sa-nav a{
    color:var(--sa-top-muted); font-size:13px; padding:7px 13px; border-radius:7px;
}
.sa-top .sa-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.sa-top .sa-nav a.on{ color:#fff; background:rgba(59,130,246,.25); box-shadow:inset 0 0 0 1px rgba(96,165,250,.35); }
.sa-top .sp{ flex:1; }
.sa-top .sa-user{ display:flex; align-items:center; gap:10px; }
.sa-pill{
    display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 11px; border-radius:999px;
    background:rgba(255,255,255,.09); color:#e2e8f0;
}
.sa-pill b{ color:#fbbf24; font-weight:700; font-variant-numeric:tabular-nums; }
.sa-top .sa-user a.sa-btn{ color:var(--sa-top-text); font-size:13px; padding:7px 12px; border-radius:7px; }
.sa-top .sa-user a.sa-btn:hover{ background:rgba(255,255,255,.1); text-decoration:none; }
.sa-top .sa-user a.sa-btn.primary{ background:var(--sa-accent); color:#fff; }
.sa-top .sa-user a.sa-btn.primary:hover{ background:var(--sa-accent2); }

/* ---------- 布局 ---------- */
.sa-layout{ display:flex; min-height:calc(100vh - 52px); align-items:stretch; }
.sa-side{
    width:196px; flex:none; padding:16px 12px; background:#fff; border-right:1px solid var(--sa-line);
}
.sa-side .nav{
    display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:3px; border-radius:9px;
    font-size:13.5px; color:var(--sa-text); font-weight:500;
}
.sa-side .nav .ic{ width:16px; text-align:center; opacity:.75; }
.sa-side .nav:hover{ background:var(--sa-bg); text-decoration:none; }
.sa-side .nav.on{ background:var(--sa-accent-soft); color:var(--sa-accent2); font-weight:600; }
.sa-main{ flex:1; min-width:0; padding:22px 26px 44px; }

/* ---------- 通用元素 ---------- */
.sa-h1{ font-size:19px; font-weight:700; color:var(--sa-ink); margin:0 0 16px; }
.sa-sub{ font-size:12.5px; color:var(--sa-text2); margin:-10px 0 16px; }
/* P2-2：网格项默认 min-width:auto，内部含 min-width 表格时会把整页撑宽，
   故此处一律用 minmax(0,1fr) 并给卡片加 min-width:0 */
.card{ background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius); padding:18px 20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(17,24,39,.04); min-width:0; }
.card h2{ font-size:14.5px; margin:0 0 12px; color:var(--sa-ink); font-weight:650; }
.card h2 .l{ border-left:3px solid var(--sa-accent); padding-left:9px; }
.btn{
    display:inline-flex; align-items:center; gap:5px; font-size:13px; padding:7px 15px; border-radius:8px;
    background:#fff; border:1px solid var(--sa-line2); color:var(--sa-text); cursor:pointer; font-family:inherit;
}
.btn:hover{ border-color:var(--sa-accent); color:var(--sa-accent2); text-decoration:none; }
.btn.primary{ background:var(--sa-accent); color:#fff; border:none; font-weight:600; }
.btn.primary:hover{ background:var(--sa-accent2); color:#fff; }
.btn.ghost{ background:transparent; border-color:var(--sa-line2); }
.btn.danger{ color:var(--sa-err); border-color:#f3c6c6; }
.btn.danger:hover{ background:var(--sa-err-soft); }
.btn.ok{ color:var(--sa-ok); border-color:#bfe3cd; }
.btn.ok:hover{ background:var(--sa-ok-soft); }
.btn.sm{ padding:4px 10px; font-size:12px; border-radius:6px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.inp, select.inp, textarea.inp{
    width:100%; padding:8px 12px; border:1px solid var(--sa-line2); border-radius:8px;
    font-size:13.5px; color:var(--sa-text); background:#fff; font-family:inherit;
}
.inp:focus{ outline:none; border-color:var(--sa-accent); box-shadow:0 0 0 3px rgba(59,130,246,.13); }
textarea.inp{ resize:vertical; line-height:1.55; }
label.lb{ display:block; font-size:12.5px; color:var(--sa-text2); margin-bottom:5px; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th{ text-align:left; padding:9px 10px; color:var(--sa-text2); font-weight:600; border-bottom:2px solid var(--sa-line); white-space:nowrap; background:#fafafa; }
table.tbl td{ padding:9px 10px; border-bottom:1px solid #f1f3f5; vertical-align:top; }
table.tbl tr:hover td{ background:#f8fafc; }
.badge{ display:inline-block; font-size:11px; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.badge.on{ background:var(--sa-ok-soft); color:var(--sa-ok); border:1px solid #cdecd9; }
.badge.off{ background:var(--sa-err-soft); color:var(--sa-err); border:1px solid #f3d3d3; }
.badge.warn{ background:var(--sa-warn-soft); color:var(--sa-warn); border:1px solid #f3e3c3; }
.badge.info{ background:var(--sa-accent-soft); color:var(--sa-accent2); border:1px solid #d3e3fd; }
.badge.gold{ background:#fef3c7; color:#b45309; border:1px solid #f5e3ad; }
.badge.grade-a{ background:#fde8e8; color:#b91c1c; border:1px solid #f5c6c6; font-weight:700; }
.badge.grade-b{ background:#e0f2fe; color:#0369a1; border:1px solid #bee3f8; }
.badge.grade-c{ background:#e7f4e7; color:#15803d; border:1px solid #c4e6c4; }
.msg{ padding:10px 16px; border-radius:8px; font-size:13px; margin-bottom:14px; }
.msg.ok{ background:var(--sa-ok-soft); color:var(--sa-ok); border:1px solid #cdecd9; }
.msg.err{ background:var(--sa-err-soft); color:var(--sa-err); border:1px solid #f3d3d3; }
.msg.info{ background:var(--sa-accent-soft); color:var(--sa-accent2); border:1px solid #d3e3fd; }
.muted{ color:var(--sa-text2); font-size:12px; }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.toolbar .sp{ flex:1; }
.pager{ display:flex; gap:6px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.pager a, .pager span{ padding:5px 12px; border-radius:6px; font-size:12.5px; border:1px solid var(--sa-line2); color:var(--sa-text); }
.pager .cur{ background:var(--sa-accent); color:#fff; border:none; font-weight:600; }
.pager a:hover{ border-color:var(--sa-accent); text-decoration:none; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stat{ background:#fff; border:1px solid var(--sa-line); border-radius:var(--sa-radius); padding:14px 16px; }
.stat .v{ font-size:23px; font-weight:700; color:var(--sa-accent2); font-variant-numeric:tabular-nums; }
.stat .k{ font-size:12px; color:var(--sa-text2); margin-top:4px; }
.grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 18px; }
.grid2 .full{ grid-column:1 / -1; }
.empty{ text-align:center; color:var(--sa-text2); padding:34px 0; font-size:13px; }

/* ---------- 认证页（登录/注册/改密） ---------- */
.sa-auth{
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:26px;
    background:radial-gradient(1200px 600px at 20% -10%,#1e293b 0%,#111827 55%,#0b0f16 100%);
}
.sa-auth-card{
    width:400px; max-width:100%; background:#fff; border-radius:14px; padding:30px 32px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.sa-auth-card .brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sa-auth-card .brand .dot{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#60a5fa,#2563eb); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.sa-auth-card .brand b{ font-size:17px; color:var(--sa-ink); }
.sa-auth-card .tip{ font-size:12.5px; color:var(--sa-text2); margin:0 0 18px; }
.sa-auth-card .field{ margin-bottom:13px; position:relative; }
.sa-auth-card .code-btn{
    position:absolute; right:6px; top:6px; bottom:6px; width:104px; border:none; border-radius:7px;
    background:var(--sa-accent-soft); color:var(--sa-accent2); cursor:pointer; font-size:12.5px;
}
.sa-auth-card .code-btn:disabled{ color:var(--sa-text2); }
.sa-auth-card .err{ color:var(--sa-err); font-size:12.5px; min-height:18px; margin:2px 0 8px; }
.sa-auth-card .foot{ font-size:12.5px; color:var(--sa-text2); margin-top:14px; text-align:center; }
.sa-auth-card .foot a{ color:var(--sa-accent2); }

/* ---------- 工具页内嵌顶栏 ---------- */
.sa-toolbar-mask{ height:52px; flex:none; }
body.sa-tool{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
body.sa-tool .sa-top{ flex:none; }
body.sa-tool .sa-tool-body{ flex:1; min-height:0; position:relative; }

/* ---------- 工作台工具卡片 ---------- */
.tool-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:14px; }
.tool-card{
    background:#fff; border:1px solid var(--sa-line); border-radius:12px; padding:18px;
    display:flex; flex-direction:column; gap:9px; transition:box-shadow .15s, border-color .15s;
}
.tool-card:hover{ border-color:#93c5fd; box-shadow:0 6px 18px rgba(37,99,235,.09); text-decoration:none; }
.tool-card .ic{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
.tool-card .t{ font-size:15px; font-weight:650; color:var(--sa-ink); }
.tool-card .d{ font-size:12.5px; color:var(--sa-text2); line-height:1.5; min-height:36px; }
.tool-card .locked{ color:var(--sa-warn); font-size:12px; }
.tool-card .go{ font-size:12px; color:var(--sa-accent2); font-weight:600; }

/* ---------- 谱库卡片 ---------- */
.score-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.score-card{
    background:#fff; border:1px solid var(--sa-line); border-radius:11px; overflow:hidden;
    display:flex; flex-direction:column; transition:box-shadow .15s;
}
.score-card:hover{ box-shadow:0 6px 18px rgba(37,99,235,.1); }
.score-card .cover{ height:118px; background:#eef2f7; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:12px; overflow:hidden; }
.score-card .cover img{ width:100%; height:100%; object-fit:cover; }
.score-card .meta{ padding:11px 13px; display:flex; flex-direction:column; gap:5px; }
.score-card .t{ font-size:14px; font-weight:650; color:var(--sa-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score-card .s{ font-size:12px; color:var(--sa-text2); }
.score-card .row{ display:flex; align-items:center; gap:6px; font-size:12px; }

/* ---------- Tab ---------- */
.tabs{ display:flex; gap:2px; border-bottom:2px solid var(--sa-line); margin-bottom:18px; }
.tabs a{ padding:9px 16px; font-size:13.5px; color:var(--sa-text2); border-bottom:2px solid transparent; margin-bottom:-2px; }
.tabs a:hover{ color:var(--sa-accent2); text-decoration:none; }
.tabs a.on{ color:var(--sa-accent2); border-bottom-color:var(--sa-accent); font-weight:600; }

/* ---------- 计划/产品卡 ---------- */
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.plan-card{ background:#fff; border:1px solid var(--sa-line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px; position:relative; }
.plan-card.hot{ border-color:#93c5fd; box-shadow:0 6px 20px rgba(37,99,235,.1); }
.plan-card .nm{ font-size:16px; font-weight:700; color:var(--sa-ink); }
.plan-card .sd{ font-size:12.5px; color:var(--sa-text2); min-height:34px; }
.plan-card .pr{ font-size:22px; font-weight:700; color:var(--sa-accent2); font-variant-numeric:tabular-nums; }
.plan-card .pr small{ font-size:12px; color:var(--sa-text2); font-weight:400; }
.plan-card .ft{ font-size:12.5px; color:var(--sa-text); line-height:1.8; }
.plan-card .ft .no{ color:#cbd5e1; text-decoration:line-through; }

@media (max-width:900px){
    /* 移动端导航（P2-2 修复）------------------------------------------------
       原实现把 `.sa-nav` 与 `.sa-side` 一起 display:none，
       于是在 ≤900px 的窄屏上除 logo 外**没有任何导航入口**，用户被锁在当前页。
       现改为「顶栏第二行的横向可滚动导航条」，零 JS 依赖、断点内自动生效。 */
    .sa-top{ height:auto; min-height:52px; flex-wrap:wrap; padding:8px 12px; row-gap:0; }
    .sa-top .sa-logo{ order:1; }
    .sa-top .edu-org{ order:2; max-width:32vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sa-top .sp{ order:3; }
    .sa-top .sa-user{ order:3; gap:4px; }
    .sa-top .sa-user .sa-pill{ display:none; }      /* 积分胶囊占位过大，窄屏隐藏 */
    .sa-top .sa-user .sa-btn.opt{ display:none; }   /* 「账户」与昵称链接重复，隐藏其一 */
    .sa-top .sa-nav{
        display:flex; order:4; flex:0 0 100%; width:100%;
        margin:6px 0 0; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
        scrollbar-width:none; -ms-overflow-style:none;
    }
    .sa-top .sa-nav::-webkit-scrollbar{ display:none; }
    .sa-top .sa-nav a{ flex:0 0 auto; white-space:nowrap; }
    .sa-side{ display:none; }                        /* 侧栏项目已并入顶栏导航条 */
    .grid2{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- 管理后台（同一主题） ---------- */
.admin-top{
    height:52px; display:flex; align-items:center; padding:0 18px; gap:14px;
    background:linear-gradient(180deg,var(--sa-top),var(--sa-top2)); color:var(--sa-top-text);
    position:sticky; top:0; z-index:50;
}
.admin-top .brand{ font-size:15px; font-weight:700; color:#fff; display:flex; align-items:center; gap:9px; }
.admin-top .brand b{ color:#93c5fd; }
.admin-top .sp{ flex:1; }
.admin-top a{ color:var(--sa-top-muted); font-size:13px; padding:7px 13px; border-radius:7px; }
.admin-top a:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.admin-top a.out{ color:#fca5a5; }
.admin-wrap{ display:flex; min-height:calc(100vh - 52px); align-items:stretch; }
.admin-side{
    width:196px; flex:none; padding:16px 12px; background:#fff; border-right:1px solid var(--sa-line);
}
.admin-side .nav{
    display:flex; align-items:center; gap:9px; padding:10px 14px; margin-bottom:3px; border-radius:9px;
    font-size:13.5px; color:var(--sa-text); font-weight:500;
}
.admin-side .nav:hover{ background:var(--sa-bg); text-decoration:none; }
.admin-side .nav.on{ background:var(--sa-accent-soft); color:var(--sa-accent2); font-weight:600; }
.admin-main{ flex:1; min-width:0; padding:22px 26px 40px; }
.admin-main h1{ font-size:19px; margin:0 0 16px; color:var(--sa-ink); }
.admin-main h1 .l{ border-left:3px solid var(--sa-accent); padding-left:9px; }
.frm{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.frm .full{ grid-column:1 / -1; }
.frm label{ display:block; font-size:12.5px; color:var(--sa-text2); margin-bottom:5px; }
@media (max-width:820px){ .stat-grid{ grid-template-columns:repeat(3,1fr); } .frm{ grid-template-columns:1fr; } .admin-side{ width:150px; } }

/* 教培机构标识（顶栏） */
.edu-org {
  font-size: 12px;
  background: #dbeafe;
  color: #1e40af;
  padding: 2px 12px;
  border-radius: 20px;
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ============================================================
   制谱教程页（/tutorial）——ABC 制谱体系文档排版
   ============================================================ */
.tut-wrap{ display:flex; align-items:flex-start; gap:22px; }
.tut-toc{
    width:216px; flex:none; position:sticky; top:16px;
    background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius);
    padding:14px 12px; box-shadow:0 1px 3px rgba(17,24,39,.04);
}
.tut-toc h4{ font-size:12.5px; color:var(--sa-text2); margin:0 0 8px; padding:0 8px; font-weight:600; letter-spacing:.5px; }
.tut-toc a{ display:block; font-size:13px; color:var(--sa-text); padding:7px 9px; border-radius:7px; line-height:1.4; }
.tut-toc a:hover{ background:var(--sa-accent-soft); color:var(--sa-accent2); text-decoration:none; }
.tut-main{ flex:1; min-width:0; }

.tut-sec{ background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius);
    padding:18px 22px; margin-bottom:16px; box-shadow:0 1px 3px rgba(17,24,39,.04); }
.tut-sec > h2{ font-size:16px; color:var(--sa-ink); margin:0 0 12px; padding-left:12px;
    border-left:3px solid var(--sa-accent); line-height:1.4; }
.tut-sec h3{ font-size:14px; color:var(--sa-ink); margin:18px 0 8px; }
.tut-sec p{ font-size:13.5px; color:var(--sa-text); line-height:1.95; margin:8px 0; }
.tut-sec ul{ font-size:13.5px; color:var(--sa-text); line-height:1.95; margin:8px 0; padding-left:22px; }
.tut-sec li{ margin:4px 0; }
.tut-code{ display:block; background:#1e293b; color:#e2e8f0; border-radius:8px; padding:12px 15px;
    font-size:12.5px; line-height:1.85; font-family:Consolas,"Courier New",monospace;
    overflow-x:auto; margin:10px 0; white-space:pre-wrap; word-break:break-all; }
.tut-code .c-note{ color:#94a3b8; }
.tut-table{ overflow-x:auto; margin:10px 0; border:1px solid var(--sa-line); border-radius:8px; }
.tut-table table{ width:100%; border-collapse:collapse; font-size:13px; }
.tut-table th{ background:#fafafa; color:var(--sa-text2); font-weight:600; padding:9px 12px;
    text-align:left; white-space:nowrap; border-bottom:1px solid var(--sa-line); }
.tut-table td{ padding:8px 12px; border-top:1px solid #f1f3f5; color:var(--sa-text); line-height:1.7; }
.tut-table tr:hover td{ background:#f8fafc; }
.tut-sec td code, .tut-sec p code, .tut-sec li code{
    background:var(--sa-accent-soft); color:var(--sa-accent2); padding:1px 6px; border-radius:4px;
    font-size:12px; font-family:Consolas,"Courier New",monospace; }
.kv{ display:inline-block; font-family:Consolas,"Courier New",monospace; font-size:12.5px;
    background:var(--sa-accent-soft); color:var(--sa-accent2); padding:1px 7px; border-radius:5px; }
.tut-warn{ background:var(--sa-warn-soft); border:1px solid #f3e3c3; border-radius:8px;
    padding:10px 14px; font-size:13px; color:#8a5a2b; line-height:1.85; margin:10px 0; }
.tut-tip{ background:var(--sa-ok-soft); border:1px solid #cdeed9; border-radius:8px;
    padding:10px 14px; font-size:13px; color:#2f6b45; line-height:1.85; margin:10px 0; }
@media (max-width:980px){ .tut-wrap{ display:block; } .tut-toc{ width:auto; position:static; margin-bottom:16px; } }

/* ---------- 移动端适配（安全修复 P2-2） ---------- */

/* 数据表格统一放进横向滚动容器：不包容器时 table.tbl 的 nowrap 表头会把整页撑宽，
   导致手机端整页出现横向滚动条、右侧内容被裁掉。 */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%; }

@media (max-width:760px){
    .sa-main, .admin-main{ padding:16px 14px 36px; }
    .card{ padding:14px; }
    .sa-h1, .admin-main h1{ font-size:17px; }

    /* 后台：侧栏改为顶部横向可滚动标签条，避免 150px 宽侧栏把正文压到不可读 */
    .admin-wrap{ display:block; }
    .admin-side{
        width:auto; display:flex; gap:4px; padding:10px 12px;
        border-right:none; border-bottom:1px solid var(--sa-line);
        overflow-x:auto; -webkit-overflow-scrolling:touch;
        scrollbar-width:none; -ms-overflow-style:none;
    }
    .admin-side::-webkit-scrollbar{ display:none; }
    .admin-side .nav{ flex:0 0 auto; white-space:nowrap; margin-bottom:0; padding:8px 12px; }

    /* 表格保底列宽：宁可表格内横向滚动，也不把单元格挤成一字一行 */
    .tbl-wrap table.tbl{ min-width:560px; }

    /* ---- 触控目标（P2-2）：按 WCAG 2.5.5 建议 ≥44×44px ----
       实测窄屏下大量控件仅 17-31px 高，手指极易误触相邻行。
       规则：真正的按钮/输入框/导航一律 44px；
             表格单元格内的密集小按钮放宽到 36px（列宽有限，已明显改善命中率）；
             正文中的行内文字链接只加纵向内边距，保持段落排版不被破坏。 */
    .btn{ min-height:44px; padding:10px 16px; }
    .btn.sm{ min-height:36px; min-width:44px; padding:8px 12px; font-size:12.5px; }
    input.inp, select.inp, textarea.inp{ min-height:44px; font-size:16px; }   /* 16px 可避免 iOS 聚焦自动放大 */
    .sa-top .sa-logo{ min-height:44px; }
    .sa-top .sa-nav a{ min-height:44px; display:inline-flex; align-items:center; padding:0 14px; }
    .sa-top .sa-user .sa-btn{ min-height:44px; display:inline-flex; align-items:center; }
    .tabs a{ min-height:44px; display:flex; align-items:center; }            /* 教程页标签 */
    .tut-toc a{ min-height:44px; display:flex; align-items:center; }         /* 教程页目录 */
    .tbl-wrap td a{ display:inline-block; padding:10px 0; }                  /* 表格内单行链接 */
    .muted a{ display:inline-block; padding:9px 0; }
    .t a, .row a:not(.btn){ display:inline-block; padding:10px 0; }          /* 卡片标题 / 行内链接 */
}

/* ---------- 通用弹窗（激活码输入等） ---------- */
/* 默认 display:none 由内联样式给出，打开时 JS 设为 flex（保持居中） */
.sa-modal{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000;
    display:flex; align-items:center; justify-content:center; padding:16px;
}
.sa-modal-mask{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(17,24,39,.45); }
.sa-modal-box{
    position:relative; width:100%; max-width:460px; max-height:calc(100vh - 32px); overflow:auto;
    background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(17,24,39,.28);
    display:flex; flex-direction:column;
}
.sa-modal-hd{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--sa-line); }
.sa-modal-hd h3{ margin:0; font-size:15.5px; color:var(--sa-ink); font-weight:700; flex:1; }
.sa-modal-x{
    background:none; border:none; font-size:15px; color:var(--sa-text2); cursor:pointer;
    padding:5px 8px; border-radius:7px; line-height:1;
}
.sa-modal-x:hover{ background:var(--sa-bg); color:var(--sa-ink); }
.sa-modal-bd{ padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.sa-modal-ft{ display:flex; gap:10px; justify-content:flex-end; padding:13px 18px; border-top:1px solid var(--sa-line); }

/* 激活码弹窗内部 */
.cm-target{ font-size:13.5px; color:var(--sa-text); line-height:1.9; }
.cm-target > b{ color:var(--sa-ink); }
.cm-codehint{ margin-top:8px; font-size:12.5px; color:var(--sa-text2); line-height:1.8; }
.cm-codehint code{
    background:var(--sa-accent-soft); color:var(--sa-accent2); padding:1px 7px; border-radius:5px;
    font-family:ui-monospace,Consolas,"Courier New",monospace; font-size:12.5px;
}
.cm-field label{ display:block; font-size:12.5px; color:var(--sa-text2); margin-bottom:6px; }
.cm-field .inp{ width:100%; letter-spacing:.5px; }
.cm-wx{ background:var(--sa-bg); border:1px solid var(--sa-line); border-radius:10px; padding:12px 14px; }
.cm-wx-t{ font-size:13px; font-weight:600; color:var(--sa-ink); margin-bottom:10px; }
.cm-wx-body{ display:flex; gap:14px; align-items:flex-start; }
.cm-wx-qr{
    width:118px; height:118px; object-fit:contain; flex:none; background:#fff;
    border:1px solid var(--sa-line); border-radius:8px;
}
.cm-wx-info{ font-size:13px; color:var(--sa-text); line-height:1.95; min-width:0; }
.cm-wx-info b{ color:var(--sa-ink); font-family:ui-monospace,Consolas,"Courier New",monospace; }
/* 弹窗内次要按钮不随移动端 44px 规则撑高（复制按钮在正文里） */
.cm-wx-info .btn.sm{ padding:3px 9px; min-height:0; font-size:12px; margin-left:4px; }

@media (max-width:760px){
    /* 窄屏改为底部上滑面板，拇指更容易够到 */
    .sa-modal{ align-items:flex-end; padding:0; }
    .sa-modal-box{ max-width:100%; max-height:92vh; border-radius:14px 14px 0 0; }
    .cm-wx-body{ flex-direction:column; align-items:center; text-align:center; }
    .cm-wx-info{ text-align:center; }
}