/* 二外语种选择 · 语言护照风：青瓷绿 / 橘橙 / 护照印章 / 五维雷达 */
.sl-page{
  --sl-bg:#eef6f1;--sl-card:#fff;--sl-ink:#1e3b33;--sl-mute:#6e887e;--sl-line:#d6e7de;
  --sl-green:#1f6b52;--sl-orange:#e8792b;--sl-soft:#f2f8f4;--sl-a:#1f6b52;--sl-b:#e8792b;
  color:var(--sl-ink);background:var(--sl-bg);min-height:100vh;padding:0 0 54px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
:root[data-theme="dark"] .sl-page{
  --sl-bg:#101c18;--sl-card:#182821;--sl-ink:#e4f1e9;--sl-mute:#96b3a6;--sl-line:#2b4439;
  --sl-green:#6cc2a0;--sl-orange:#f2a061;--sl-soft:#14221c;--sl-a:#6cc2a0;--sl-b:#f2a061;
}
.sl-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sl-page .detail-breadcrumb{margin:18px 0 22px;font-size:13px}
.sl-page .detail-breadcrumb a{color:var(--sl-mute);text-decoration:none}
.sl-page .detail-breadcrumb .sep{margin:0 8px;color:var(--sl-orange)}
.sl-page .detail-breadcrumb .current{color:var(--sl-ink);font-weight:700}

.sl-hero{display:grid;grid-template-columns:1fr 190px;gap:30px;align-items:center;background:var(--sl-green);color:#f2fbf6;
  border-radius:20px;padding:36px 40px;position:relative;overflow:hidden}
.sl-hero:after{content:"";position:absolute;inset:12px;border:1px dashed rgba(255,255,255,.22);border-radius:12px;pointer-events:none}
.sl-kicker{font:600 11px/1.4 ui-monospace,monospace;letter-spacing:.2em;color:#f6c48c;margin-bottom:14px}
.sl-hero h1{font-size:clamp(25px,3.3vw,36px);line-height:1.34;margin:0 0 13px;font-weight:800}
.sl-sub{font-size:14.5px;line-height:1.95;color:rgba(242,251,246,.86);margin:0;max-width:700px}
.sl-sub b{color:#f6c48c}
.sl-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.sl-flags span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:6px 12px;font-size:12px}
.sl-stamp{position:relative;z-index:1;width:160px;height:160px;margin:0 auto;border:3px double rgba(255,255,255,.7);border-radius:50%;
  transform:rotate(-12deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.sl-stamp b{font:800 32px/1 "Songti SC",SimSun,serif;letter-spacing:.16em}
.sl-stamp i{font:600 9px/1 ui-monospace,monospace;letter-spacing:.2em;font-style:normal}
.sl-stamp span{font:600 7px/1.4 ui-monospace,monospace;letter-spacing:.1em;opacity:.8}

.sl-sec-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.sl-sec-head h2{font-size:19px;margin:0;font-weight:800}
.sl-sec-head small{margin-left:auto;color:var(--sl-mute);font-size:12.5px;text-align:right}
.sl-pick,.sl-weights,.sl-compare,.sl-batch{margin-top:22px;background:var(--sl-card);border:1px solid var(--sl-line);
  border-radius:16px;padding:26px 28px;box-shadow:0 8px 26px rgba(31,107,82,.06)}
.sl-pick-grid{display:grid;grid-template-columns:1fr 54px 1fr;gap:14px;align-items:center}
.sl-side{display:inline-block;font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--sl-mute);margin-bottom:10px}
.sl-lang-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sl-lang{border:1px solid var(--sl-line);background:var(--sl-soft);color:var(--sl-ink);border-radius:10px;
  padding:10px 3px;font-size:12px;cursor:pointer;font-family:inherit;line-height:1.5;transition:.16s}
.sl-lang b{display:block;font-size:17px;margin-bottom:3px}
.sl-lang:hover{border-color:var(--sl-green)}
.sl-lang.is-on{background:var(--sl-green);color:#fff;border-color:var(--sl-green)}
.sl-lang.is-on.b-side{background:var(--sl-orange);border-color:var(--sl-orange)}
.sl-picked{display:block;margin-top:10px;font-size:15px;color:var(--sl-green)}
.sl-vs{width:48px;height:48px;border-radius:50%;background:var(--sl-soft);border:2px solid var(--sl-line);
  display:grid;place-items:center;font:800 14px/1 ui-monospace,monospace;color:var(--sl-orange);margin:0 auto}

.sl-weight-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sl-w{background:var(--sl-soft);border:1px solid var(--sl-line);border-radius:12px;padding:14px}
.sl-w label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:10px}
.sl-w label b{font:700 13px/1 ui-monospace,monospace;color:var(--sl-orange)}
.sl-w input{width:100%;accent-color:var(--sl-green)}
.sl-w small{display:block;font-size:10.5px;color:var(--sl-mute);line-height:1.5;margin-top:7px}
.sl-weight-note{font-size:12px;color:var(--sl-mute);margin:12px 0 0}

.sl-compare-grid{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:center}
.sl-radar svg{width:100%;height:auto;display:block}
.sl-radar-legend{display:flex;justify-content:center;gap:18px;font-size:12px}
.sl-radar-legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.sl-radar-legend .a:before{background:var(--sl-a)}
.sl-radar-legend .b:before{background:var(--sl-b)}
.sl-bars{display:grid;gap:12px}
.sl-bar-row{display:grid;grid-template-columns:82px 1fr 1fr 76px;gap:8px;align-items:center;font-size:12px}
.sl-bar-row>span{color:var(--sl-mute)}
.sl-bar-track{height:16px;background:var(--sl-soft);border-radius:4px;overflow:hidden;display:flex;align-items:center}
.sl-bar-track i{display:block;height:100%;border-radius:4px;transition:.3s}
.sl-bar-track.a i{background:var(--sl-a)}
.sl-bar-track.b i{background:var(--sl-b)}
.sl-bar-row em{font-style:normal;font:700 11px/1 ui-monospace,monospace;text-align:right;color:var(--sl-mute)}
.sl-score{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;border-top:1px dashed var(--sl-line);padding-top:18px}
.sl-score div{flex:1;min-width:150px;background:var(--sl-soft);border:1px solid var(--sl-line);border-radius:12px;padding:14px}
.sl-score span{display:block;font-size:11.5px;color:var(--sl-mute)}
.sl-score b{display:block;font:800 26px/1.3 ui-monospace,monospace;color:var(--sl-green);margin-top:4px}
.sl-score div:nth-child(2) b{color:var(--sl-orange)}
.sl-advice{margin-top:14px;background:var(--sl-soft);border-left:4px solid var(--sl-orange);border-radius:8px;padding:15px 18px;font-size:13px;line-height:1.9}
.sl-advice b{color:var(--sl-green)}

.sl-quick{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--sl-mute)}
.sl-quick button,.sl-btn{border:1px solid var(--sl-line);background:var(--sl-soft);color:var(--sl-ink);border-radius:8px;
  padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.16s}
.sl-quick button:hover,.sl-btn:hover{border-color:var(--sl-green);color:var(--sl-green)}
.sl-batch textarea{width:100%;box-sizing:border-box;border:1px solid var(--sl-line);border-radius:10px;background:var(--sl-soft);
  color:var(--sl-ink);padding:13px;font:13px/1.8 ui-monospace,monospace;resize:vertical}
.sl-batch textarea:focus{outline:2px solid var(--sl-orange)}
.sl-batch-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 4px}
.sl-btn-main{border:0;border-radius:9px;background:var(--sl-green);color:#fff;padding:10px 20px;
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.sl-batch-result{margin-top:16px;overflow-x:auto}
.sl-batch-result table{width:100%;border-collapse:collapse;font-size:13px}
.sl-batch-result th,.sl-batch-result td{border:1px solid var(--sl-line);padding:8px 10px;text-align:left}
.sl-batch-result th{background:var(--sl-soft)}
.sl-batch-result tr.is-bad td{background:rgba(232,121,43,.09)}

:root[data-theme="dark"] .sl-lang.is-on,:root[data-theme="dark"] .sl-btn-main{color:#0e1c16}
@media(max-width:920px){.sl-hero{grid-template-columns:1fr}.sl-stamp{display:none}
 .sl-compare-grid{grid-template-columns:1fr}.sl-radar{max-width:340px;margin:0 auto}.sl-weight-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sl-wrap{padding:0 14px}.sl-hero,.sl-pick,.sl-weights,.sl-compare,.sl-batch{padding:20px 16px}
 .sl-hero h1{font-size:24px}.sl-pick-grid{grid-template-columns:1fr;gap:10px}.sl-vs{margin:0 auto}
 .sl-lang-row{gap:4px}.sl-lang b{font-size:14px}.sl-lang{font-size:10px;padding:8px 2px}
 .sl-sec-head small{display:none}.sl-bar-row{grid-template-columns:60px 1fr 1fr 54px;font-size:10.5px}}
