/* ======================================================================
   商店截图规格 · 独立设计（苹果展厅：纯白 + 苹果蓝 + 机型框）
   浅色 = 展厅白；深色 = 午夜展厅
   ====================================================================== */
.asp{
  --ink:#1d1d1f; --sub:#6e6e73; --faint:#a5a5ad;
  --bg:#f5f5f7; --card:#ffffff; --card2:#f0f1f4; --line:#e3e4e9; --line2:#ececf1;
  --pri:#0071e3; --pri-2:#4aa3f0; --pri-soft:#e3f0fd; --pri-ink:#0a50a8;
  --droid:#34a853; --droid-soft:#e5f4e9;
  --amber:#b45309; --amber-soft:#fdf1e0;
  --ok:#156734; --red:#c11a1a; --red-soft:#fbe9e9;
  --r:16px;
  --shadow:0 1px 2px rgba(29,29,31,.05),0 12px 32px rgba(29,29,31,.08);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    radial-gradient(900px 420px at 88% -140px, rgba(0,113,227,.08), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .asp{
  --ink:#f5f5f7; --sub:#a1a1a9; --faint:#6a6a72;
  --bg:#101014; --card:#1a1a1f; --card2:#232329; --line:#323238; --line2:#2a2a30;
  --pri:#4aa3f0; --pri-2:#7cc0f5; --pri-soft:rgba(74,163,240,.13); --pri-ink:#a8d3f8;
  --droid:#6ee28a; --droid-soft:rgba(110,226,138,.12);
  --amber:#fbbf24; --amber-soft:rgba(251,191,36,.10);
  --ok:#4ade80; --red:#f87171; --red-soft:rgba(248,113,113,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
}
.asp *{box-sizing:border-box;}
.asp b{font-weight:700;}
.asp-wrap{max-width:1120px;margin:0 auto;}
.asp code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;}

/* ---------- Hero：机型框 ---------- */
.asp-hero{margin-top:22px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow);padding:26px 30px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;}
.asp-phone{flex:none;width:92px;height:180px;border-radius:18px;border:3px solid var(--ink);position:relative;background:linear-gradient(160deg,var(--pri-soft),var(--card2));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),var(--shadow);}
.asp-phone::before{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:34px;height:9px;border-radius:6px;background:var(--ink);}
.asp-phone::after{content:"";position:absolute;left:10px;right:10px;top:30px;bottom:14px;border-radius:8px;background:repeating-linear-gradient(0deg,var(--pri) 0 2px,transparent 2px 26px);opacity:.35;}
.asp-hero h1{margin:0 0 6px;font-size:clamp(22px,3.2vw,30px);font-weight:900;letter-spacing:-.01em;}
.asp-hero h1 span{color:var(--pri);}
.asp-hero p{margin:0;color:var(--sub);font-size:14.5px;max-width:720px;}
.asp-hero p em{font-style:normal;color:var(--pri-ink);font-weight:700;}

/* ---------- 卡片 ---------- */
.asp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin-top:18px;}
.asp-card h2{margin:0 0 4px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.asp-card h2 .asp-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--pri);color:#fff;font-size:12px;font-weight:800;}
:root[data-theme="dark"] .asp-card h2 .asp-num{color:#1a1a1f;}
.asp-tip{font-size:12.5px;color:var(--sub);margin:0 0 12px;}
.asp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;}
.asp-chip{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:6px 15px;font-size:13px;cursor:pointer;font-weight:700;transition:all .15s;}
.asp-chip:hover{border-color:var(--pri-2);color:var(--pri-ink);}
.asp-chip.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .asp-chip.on{color:#1a1a1f;}
.asp-chip.on.droid{background:var(--droid);border-color:var(--droid);color:#fff;}
.asp-btn{border:none;border-radius:11px;padding:9px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:all .15s;}
.asp-btn-go{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .asp-btn-go{color:#1a1a1f;}
.asp-btn-go:hover{background:var(--pri-2);}
.asp-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.asp-btn-ghost:hover{border-color:var(--pri-2);}
.asp-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.asp-msg.err{color:var(--red);}
.asp-msg.ok{color:var(--ok);}

/* ---------- 规格卡 ---------- */
.asp-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px;}
@media (max-width:760px){.asp-specs{grid-template-columns:1fr;}}
.asp-spec{border:1px solid var(--line);border-radius:14px;background:var(--card2);padding:14px 16px;}
.asp-spec h3{margin:0 0 8px;font-size:14.5px;font-weight:900;display:flex;justify-content:space-between;align-items:center;}
.asp-spec h3 code{font-size:12px;color:var(--pri-ink);background:var(--pri-soft);border-radius:6px;padding:1px 8px;}
.asp-spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px;}
.asp-spec dt{color:var(--sub);white-space:nowrap;}
.asp-spec dd{margin:0;font-weight:600;}

/* ---------- 清单 ---------- */
.asp-desk{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:18px;}
@media (max-width:920px){.asp-desk{grid-template-columns:1fr;}}
.asp-prog{height:8px;border-radius:5px;background:var(--card2);border:1px solid var(--line);overflow:hidden;margin:6px 0 12px;}
.asp-prog i{display:block;height:100%;background:var(--pri);width:0;transition:width .2s;}
.asp-progt{font-size:12.5px;color:var(--sub);margin-bottom:4px;}
.asp-progt b{color:var(--pri-ink);}
.asp-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .15s;background:var(--card);}
.asp-item:hover{border-color:var(--pri-2);}
.asp-item input{margin-top:4px;accent-color:var(--pri);width:16px;height:16px;flex:none;cursor:pointer;}
.asp-item .asp-it{font-size:13.5px;}
.asp-item .asp-it b{display:block;font-size:13.5px;}
.asp-item .asp-it small{color:var(--sub);font-size:12px;display:block;line-height:1.55;}
.asp-item.done{background:var(--pri-soft);border-color:var(--pri);}
.asp-item.done .asp-it b{text-decoration:line-through;color:var(--sub);}

/* ---------- 文案建议 ---------- */
.asp-adv{margin:0;padding-left:0;list-style:none;counter-reset:adv;}
.asp-adv li{counter-increment:adv;position:relative;padding:8px 10px 8px 40px;border:1px dashed var(--line);border-radius:10px;margin-bottom:8px;font-size:13.5px;}
.asp-adv li::before{content:counter(adv);position:absolute;left:10px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--pri);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;}
:root[data-theme="dark"] .asp-adv li::before{color:#1a1a1f;}
.asp-adv li b{color:var(--pri-ink);}

/* ---------- 摘要 ---------- */
.asp-sum{width:100%;min-height:130px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:12px 14px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow:auto;margin-top:8px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

/* ---------- FAQ ---------- */
.asp-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.asp-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.asp-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.asp-faq p{margin:0;color:var(--sub);font-size:14px;}
.asp-faq p b{color:var(--ink);}

/* ===== 全机型规格总表与比例对照（新增） ===== */
.as2{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;}
.as2 h2{margin:0 0 4px;font-size:16px;font-weight:800;}
.as2-tip{margin:0 0 12px;font-size:12.5px;color:var(--sub);}
.as2-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;}
.as2-q{flex:1;min-width:200px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:13.5px;outline:none;}
.as2-q:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.as2-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;margin-top:4px;}
.as2-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px;}
.as2-table th,.as2-table td{border:1px solid var(--line);padding:6px 9px;text-align:left;white-space:nowrap;}
.as2-table th{background:var(--card2);font-weight:800;}
.as2-table tr:hover td{background:var(--pri-soft);}
.as2-table .as2-p{display:inline-block;border-radius:5px;padding:0 6px;font-size:11px;font-weight:800;}
.as2-table .as2-p.ios{background:var(--pri-soft);color:var(--pri-ink);}
.as2-table .as2-p.android{background:var(--droid-soft);color:var(--droid);}
.as2-table .as2-p.cn{background:var(--amber-soft);color:var(--amber);}
.as2-empty{text-align:center;color:var(--faint);font-weight:400;}
.as2-viz{margin-top:12px;}
.as2-viz svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:var(--card2);}
.as2-match{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;font-size:13px;color:var(--sub);font-weight:700;}
.as2-in{width:96px;padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:13px;outline:none;font-family:"JetBrains Mono",Consolas,monospace;}
.as2-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.as2-matchout{margin-top:8px;font-size:13px;line-height:1.9;color:var(--ink);min-height:20px;}
.as2-matchout b{color:var(--pri-ink);}
.as2-matchout .as2-hit{display:inline-block;border:1px solid var(--line);background:var(--card2);border-radius:8px;padding:2px 9px;margin:0 6px 6px 0;font-size:12.5px;}
.as2-matchout .as2-warn{color:var(--amber);font-weight:700;}
.as2-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.as2-msg.err{color:var(--red);}
.as2-msg.ok{color:var(--ok);}