/* KWOTRA · 设计系统 v1 · 2026-08 */

:root{
  --paper:#f2f3ef;
  --paper-2:#e9ebe4;
  --card:#ffffff;
  --ink:#15181c;
  --ink-2:#49515a;
  --ink-3:#5f6a74;
  --rule:#d7dbd2;
  --rule-2:#c3c9bc;
  --accent:#0e4a38;
  --accent-2:#126349;
  --accent-soft:#e2ede8;
  --warn:#9f3a20;
  --warn-soft:#f6e9e4;
  --gold:#f0b90b;
  --gold-deep:#c9990a;
  --on-gold:#120f06;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1180px;
  --gap:clamp(1rem,2.4vw,1.75rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  font-variant-numeric:tabular-nums;
}
img,svg{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.28;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-inline-start:1.3em}
li{margin:.35em 0}
hr{border:0;border-top:1px solid var(--rule);margin:2.2rem 0}

.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem}
.skip-link:focus{inset-inline-start:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- 顶部工单条 + 报头（两行 header，刻意不做窄横条） ---------- */
.topbar{background:var(--ink);color:#cfd6cf;font-size:.775rem;letter-spacing:.02em}
.topbar-inner{max-width:var(--wrap);margin:0 auto;padding:.4rem var(--gap);display:flex;gap:1rem;align-items:center;justify-content:space-between}
.topbar-meta{display:flex;gap:1.1rem;flex-wrap:wrap;margin:0}
.topbar-meta span{white-space:nowrap}
.topbar-langs{display:flex;gap:.4rem;align-items:center}
.lang-pill{color:#cfd6cf;border:1px solid #3a4149;padding:.05rem .45rem;font-size:.72rem}
.lang-pill[aria-current="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:700}
a.lang-pill:hover{border-color:var(--gold);color:#fff;text-decoration:none}

.masthead{background:var(--paper);border-bottom:2px solid var(--ink)}
.masthead-inner{max-width:var(--wrap);margin:0 auto;padding:.85rem var(--gap);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.brand-word{font-size:1.22rem;font-weight:800;letter-spacing:.11em}
.brand-tag{display:block;font-size:.68rem;font-weight:500;letter-spacing:.16em;color:var(--ink-3);margin-top:-2px}
.nav{display:flex;gap:.15rem;align-items:center;flex-wrap:wrap}
.nav-link{padding:.4rem .7rem;color:var(--ink-2);font-size:.94rem;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--ink);border-bottom-color:var(--accent);text-decoration:none}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(1.4rem,3.4vw,2.6rem) 0 0}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}


.site-note{font-size:.8rem;color:var(--ink-3);margin:0 0 1rem;letter-spacing:.04em;max-width:44em}

.hero-main{min-width:0}
.hero-side{min-width:0}
.hero h1{font-size:clamp(1.72rem,3.9vw,2.72rem)}
.lede{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-2);margin:.85rem 0 1.35rem;max-width:34em}

/* 官方色转化块（形态 A：0 交易所直链，码 + 真复制） */
.promo{background:var(--gold);color:var(--on-gold);border:1px solid var(--gold-deep);padding:1rem 1.1rem}
.promo-head{display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.09em;margin-bottom:.6rem}
.promo-head svg{width:19px;height:19px}
.promo-code{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.code-value{font-family:var(--mono);font-size:clamp(1.5rem,3.4vw,2rem);font-weight:700;letter-spacing:.13em;background:var(--on-gold);color:var(--gold);padding:.22rem .68rem}
.copy-btn{font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;background:var(--on-gold);color:#fff;border:0;padding:.55rem 1.15rem}
.copy-btn:hover{background:#2c2712}
.copy-btn[data-copied="1"]{background:var(--accent)}
.promo-benefit{margin:.7rem 0 0;font-size:1rem;font-weight:700}
.promo-foot{margin:.35rem 0 0;font-size:.755rem;line-height:1.55;color:#3d3410}

/* 首屏编号步骤 */
.steps{list-style:none;margin:1.4rem 0 0;padding:0;counter-reset:none}
.step{display:flex;gap:.8rem;align-items:flex-start;padding:.65rem 0;border-bottom:1px solid var(--rule);margin:0}
.step:last-child{border-bottom:0}
.step-num{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:.86rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.15rem}
.step-body{min-width:0}
.step-title{display:block;font-weight:700;font-size:.98rem}
.step-text{display:block;font-size:.88rem;color:var(--ink-2);line-height:1.65}

/* 首屏右栏：真功能试算卡 */
.toolcard{background:var(--card);border:1px solid var(--rule-2);border-inline-start:3px solid var(--accent)}
.toolcard-head{padding:.75rem 1rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.toolcard-title{font-size:.98rem;font-weight:700}
.toolcard-note{font-size:.74rem;color:var(--ink-3)}
.toolcard-body{padding:1rem}
.field{margin-bottom:.85rem}
.field-label{display:block;font-size:.8rem;color:var(--ink-2);margin-bottom:.3rem}
.field-input{width:100%;font:inherit;font-family:var(--mono);font-size:1.12rem;padding:.5rem .65rem;border:1px solid var(--rule-2);background:#fbfcfa;color:var(--ink)}
.field-input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.seg{display:flex;gap:.3rem;flex-wrap:wrap}
.seg-btn{font:inherit;font-size:.82rem;cursor:pointer;background:var(--paper-2);border:1px solid var(--rule-2);color:var(--ink-2);padding:.3rem .6rem}
.seg-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.result{background:var(--ink);color:#fff;padding:.9rem 1rem;margin-top:.2rem}
.result-label{font-size:.76rem;color:#9fb0a6;margin:0 0 .15rem}
.result-num{font-family:var(--mono);font-size:clamp(1.8rem,4.4vw,2.5rem);font-weight:700;line-height:1.1}
.result-unit{font-size:.9rem;color:#9fb0a6;margin-inline-start:.3rem}
.result-rows{margin:.75rem 0 0;padding:0;list-style:none;border-top:1px solid #333b33}
.result-row{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;font-size:.85rem;border-bottom:1px solid #262d26;margin:0}
.result-key{color:#9fb0a6}
.result-val{font-family:var(--mono)}
.toolcard-foot{padding:.6rem 1rem;border-top:1px solid var(--rule);font-size:.74rem;color:var(--ink-3)}

/* ---------- 硬数字带 ---------- */
.factband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);margin:clamp(1.6rem,3.4vw,2.6rem) 0}
.fact{background:var(--paper);padding:.9rem 1rem}
.fact-num{font-family:var(--mono);font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;display:block}
.fact-label{font-size:.82rem;color:var(--ink-2);display:block;margin-top:.1rem}
.fact-src{font-size:.7rem;color:var(--ink-3);display:block;margin-top:.25rem}

/* ---------- 通用区块 ---------- */
.section{padding:clamp(1.6rem,3.4vw,2.8rem) 0;border-top:1px solid var(--rule)}
.section-head{margin-bottom:1.3rem;max-width:46em}
.section-kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--accent);margin:0 0 .3rem}
.section-title{font-size:clamp(1.25rem,2.4vw,1.62rem)}
.section-desc{color:var(--ink-2);margin:.5rem 0 0}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

.card{background:var(--card);border:1px solid var(--rule);padding:1rem 1.05rem;display:block;color:var(--ink)}
.card:hover{border-color:var(--accent);text-decoration:none}
.card-kicker{font-size:.71rem;font-weight:700;letter-spacing:.11em;color:var(--ink-3);display:block;margin-bottom:.3rem}
.card-title{font-size:1.03rem;margin-bottom:.3rem}
.card-desc{font-size:.88rem;color:var(--ink-2);margin:0}

.list-links{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.link-row{margin:0;border-bottom:1px solid var(--rule)}
.link-row a{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;padding:.7rem .2rem;color:var(--ink)}
.link-row a:hover{background:var(--accent-soft);text-decoration:none}
.link-row-title{font-weight:600;font-size:.97rem}
.link-row-note{font-size:.78rem;color:var(--ink-3);white-space:nowrap}

.table-wrap{overflow-x:auto;border:1px solid var(--rule-2);background:var(--card)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.table-wrap th,.table-wrap td{padding:.55rem .75rem;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top}
.table-wrap th{background:var(--paper-2);font-size:.82rem;letter-spacing:.02em}
.table-wrap tbody tr:last-child td{border-bottom:0}

.callout{border:1px solid var(--rule-2);border-inline-start:3px solid var(--accent);background:var(--card);padding:.85rem 1rem;margin:1.4rem 0}
.callout-warn{border-inline-start-color:var(--warn);background:var(--warn-soft)}
.callout-title{font-size:.92rem;font-weight:700;margin:0 0 .3rem}
.callout p:last-child{margin-bottom:0}

/* ---------- 文章页 ---------- */
.article{max-width:44rem;margin:0 auto;padding:clamp(1.2rem,3vw,2.2rem) 0}
.breadcrumb{font-size:.78rem;color:var(--ink-3);margin:0 0 1rem}
.breadcrumb a{color:var(--ink-3)}
.article-kicker{font-size:.74rem;font-weight:700;letter-spacing:.15em;color:var(--accent);margin:0 0 .45rem}
.article-title{font-size:clamp(1.55rem,3.4vw,2.24rem)}
.article-deck{font-size:1.06rem;color:var(--ink-2);margin:.8rem 0 1rem}
.article-meta{font-size:.78rem;color:var(--ink-3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.5rem 0;margin:0 0 1.6rem;display:flex;gap:1.1rem;flex-wrap:wrap}
.toc{background:var(--card);border:1px solid var(--rule);padding:.9rem 1rem;margin:0 0 1.8rem}
.toc-title{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--ink-2);margin:0 0 .45rem}
.toc-list{margin:0;padding-inline-start:1.15em;font-size:.9rem;columns:2;column-gap:1.6rem}
.toc-list li{margin:.2em 0;break-inside:avoid}

.prose h2{font-size:clamp(1.2rem,2.6vw,1.48rem);margin:2.2rem 0 .7rem;padding-top:.35rem;border-top:2px solid var(--ink)}
.prose h3{font-size:1.06rem;margin:1.5rem 0 .5rem;color:var(--accent)}
.prose blockquote{margin:1.3rem 0;padding-block:.2rem;padding-inline-start:1rem;border-inline-start:3px solid var(--rule-2);color:var(--ink-2)}
.answer-first{font-weight:600;background:var(--accent-soft);padding:.7rem .9rem;margin:0 0 1em;border-inline-start:3px solid var(--accent)}

/* 转化页专用：唯一一条注册直链 */
.cta-inline{background:var(--gold);border:1px solid var(--gold-deep);padding:1rem 1.1rem;margin:1.6rem 0}
.cta-btn{display:inline-block;background:var(--on-gold);color:#fff;font-weight:700;padding:.6rem 1.25rem}
.cta-btn:hover{background:#2c2712;text-decoration:none;color:#fff}
.cta-note{margin:.6rem 0 0;font-size:.775rem;line-height:1.55;color:#3d3410}

/* 信息文用：品牌 + 码块（0 链接） */
.codeblock{border:1px solid var(--rule-2);border-top:3px solid var(--gold);background:var(--card);padding:.9rem 1rem;margin:1.6rem 0}
.codeblock-lead{font-size:.9rem;color:var(--ink-2);margin:0 0 .55rem}
.codeblock-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.codeblock-note{margin:.55rem 0 0;font-size:.74rem;color:var(--ink-3)}

/* 信息文用：品牌 + 码 横条（0 链接，与 .codeblock 不同款） */
.codebar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--paper-2);border-inline-start:4px solid var(--gold);padding:.75rem 1rem;margin:1.6rem 0}
.codebar-text{flex:1 1 14rem;margin:0;font-size:.88rem;color:var(--ink-2)}
.codebar-code{font-family:var(--mono);font-size:1.15rem;font-weight:700;letter-spacing:.1em;background:var(--on-gold);color:var(--gold);padding:.18rem .55rem}
.codebar-note{flex:1 1 100%;margin:.15rem 0 0;font-size:.73rem;color:var(--ink-3)}

/* 时间线（给「先后顺序」型内容用的首屏结构） */
.timeline{list-style:none;margin:0 0 1.6rem;padding:0;border-inline-start:2px solid var(--rule-2)}
.tl-item{position:relative;margin:0;padding:.15rem 0 1rem;padding-inline-start:1.1rem}
.tl-item::before{content:"";position:absolute;inset-inline-start:-6px;top:.55rem;width:10px;height:10px;background:var(--accent);border:2px solid var(--paper)}
.tl-time{display:block;font-family:var(--mono);font-size:.78rem;color:var(--accent);font-weight:700;letter-spacing:.04em}
.tl-body{display:block;font-size:.94rem;color:var(--ink-2);line-height:1.7}
.tl-body strong{color:var(--ink)}

.faq{margin:2rem 0 0}
.faq-item{border-bottom:1px solid var(--rule);padding:.9rem 0}
.faq-q{font-size:1rem;font-weight:700;margin:0 0 .4rem}
.faq-a{margin:0;color:var(--ink-2)}

/* 工具页折叠 Guide */
.guide{border:1px solid var(--rule);background:var(--card);margin:1.8rem 0 0}
.guide>summary{cursor:pointer;padding:.75rem 1rem;font-weight:700;font-size:.95rem;list-style:none}
.guide>summary::-webkit-details-marker{display:none}
.guide>summary::after{content:"＋";float:inline-end;color:var(--ink-3)}
.guide[open]>summary::after{content:"－"}
.guide-body{padding:0 1rem 1rem;border-top:1px solid var(--rule)}
.guide-body h3{font-size:.98rem;margin:1.1rem 0 .35rem;color:var(--accent)}
.guide-body p,.guide-body ul{font-size:.9rem;color:var(--ink-2)}

/* 工具页主体 */
.toolpage{max-width:52rem;margin:0 auto;padding:clamp(1.2rem,3vw,2.2rem) 0}
.tool-shell{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.tool-pane{background:var(--card);border:1px solid var(--rule-2);padding:1rem}
.tool-pane-title{font-size:.92rem;font-weight:700;margin:0 0 .8rem;padding-bottom:.45rem;border-bottom:1px solid var(--rule)}
.check-row{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--rule);margin:0}
.check-row:last-child{border-bottom:0}
.check-row input{margin-top:.42rem;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent)}
.check-label{font-size:.9rem}
.check-hint{display:block;font-size:.76rem;color:var(--ink-3)}
.verdict{padding:.9rem 1rem;border:1px solid var(--rule-2);border-inline-start:3px solid var(--ink-3);background:var(--paper-2)}
.verdict[data-state="ok"]{border-inline-start-color:var(--accent);background:var(--accent-soft)}
.verdict[data-state="no"]{border-inline-start-color:var(--warn);background:var(--warn-soft)}
.verdict-title{font-size:1rem;font-weight:700;margin:0 0 .3rem}
.verdict-text{margin:0;font-size:.9rem;color:var(--ink-2)}
.verdict-list{margin:.6rem 0 0;font-size:.86rem;color:var(--ink-2)}

/* ---------- 页脚 ---------- */
.footer{background:var(--ink);color:#b9c2ba;margin-top:clamp(2rem,5vw,3.6rem);font-size:.88rem}
.footer a{color:#dfe5df}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.4rem;padding:2rem 0 1.4rem}
.footer-brand{display:inline-flex;align-items:center;gap:.5rem;color:#fff}
.footer-mark{width:26px;height:26px}
.footer-word{font-size:1.02rem;font-weight:800;letter-spacing:.11em}
.footer-about{font-size:.82rem;margin:.6rem 0 0;color:#96a096}
.footer-title{font-size:.75rem;font-weight:700;letter-spacing:.13em;color:#79837a;margin:0 0 .55rem}
.footer-list{margin:0;padding:0;list-style:none}
.footer-list li{margin:.3em 0}
.footer-partner{border-top:1px solid #2b332c;padding:.9rem 0;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:#96a096}
.footer-legal{border-top:1px solid #2b332c;padding:1rem 0 2rem;font-size:.78rem;color:#79837a}
.footer-legal p{margin:.3em 0}

.section-count{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-3);letter-spacing:.04em}

/* ---------- 文章封面 ---------- */
.article-cover{margin:1.4rem 0 0;border:1px solid var(--rule)}
.article-cover img{display:block;width:100%;height:auto}

/* ---------- 实拍截图 ---------- */
.shot{margin:1.7rem 0;border:1px solid var(--rule);background:var(--card)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:.6rem .85rem;font-size:.82rem;line-height:1.65;color:var(--ink-2);border-top:1px solid var(--rule)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .tool-shell{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .factband{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .topbar-meta span:nth-child(n+3){display:none}
  .masthead-inner{flex-wrap:wrap;gap:.5rem}
  .nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.15rem}
  /* 触摸目标：导航、语言切换、页脚链接在移动端都保证 44px 可点高度 */
  .nav-link{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .6rem;white-space:nowrap;font-size:.9rem}
  .topbar-inner{padding-top:0;padding-bottom:0}
  .topbar-langs{gap:.5rem}
  .lang-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem}
  .footer-list li{margin:0}
  .footer-list a{display:inline-flex;align-items:center;min-height:44px}
  .footer-legal a,.breadcrumb a{display:inline-block;padding:.5rem 0}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .toc-list{columns:1}
  .footer-grid{grid-template-columns:1fr}
  .copy-btn,.seg-btn,.cta-btn{min-height:44px}
  .hero{padding-top:1rem}
}
@media (max-width:380px){
  .factband{grid-template-columns:1fr}
}

/* ---------- 阿拉伯语 / RTL ----------
   方向由 dir="rtl" + 上面的逻辑属性自动镜像，这里只处理逻辑属性覆盖不到的三件事：
   ① 阿语字体栈；② letter-spacing 会切断阿语字母连写，必须归零；
   ③ 拉丁品牌词、代码、数字在 RTL 段落里强制 LTR 排版。 */
[dir="rtl"]{
  --sans:"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",Tahoma,"Traditional Arabic",Arial,sans-serif;
}
[dir="rtl"] body{line-height:1.95}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .topbar,[dir="rtl"] .lang-pill,[dir="rtl"] .brand-tag,
[dir="rtl"] .article-kicker,[dir="rtl"] .footer-title,[dir="rtl"] .tl-time,
[dir="rtl"] .fact-label,[dir="rtl"] .fact-src,[dir="rtl"] .toolcard-note{letter-spacing:0}
[dir="rtl"] .brand-word,[dir="rtl"] .footer-word{letter-spacing:.11em}
[dir="rtl"] .num,[dir="rtl"] .codebar-code,[dir="rtl"] .code-value,
[dir="rtl"] .result-num,[dir="rtl"] .fact-num,[dir="rtl"] .field-input,
[dir="rtl"] .result-val{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .field-input{text-align:start}
[dir="rtl"] .breadcrumb,[dir="rtl"] .result-rows,[dir="rtl"] .steps{unicode-bidi:isolate}
[dir="rtl"] .guide>summary::after{float:left}
[dir="rtl"] .tl-item::before{inset-inline-start:-6px}