:root{
  --bg:#fafafa; --fg:#1a1a1a; --muted:#777; --line:#e6e6e6;
  --accent:#2b6cff; --accent-d:#1a3aa8; --card:#fff; --radius:14px; --soft:#f0f4ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:840px;margin:0 auto;padding:28px 22px 96px}
.nav{display:flex;flex-wrap:wrap;gap:7px;padding:13px 22px;border-bottom:1px solid var(--line);
  background:var(--card);position:sticky;top:0;z-index:20}
.nav a{font-size:13px;color:var(--muted);padding:4px 11px;border-radius:999px;transition:.15s;white-space:nowrap}
.nav a:hover{color:var(--accent);background:var(--soft)}
.nav a.cur{color:var(--accent);background:var(--soft);font-weight:600}
header{margin:12px 0 30px}
h1{font-size:30px;font-weight:700;letter-spacing:-.5px;margin:0 0 6px}
h2{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600;margin:40px 0 14px}
/* 标题主文 + 小字补充说明（转换区标题与输出行共用） */
.ttl{font-size:17px;font-weight:700;letter-spacing:.3px;text-transform:none;color:#1f2b4d}
.sub{font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;color:#8a93b0;margin-left:6px;vertical-align:1.5px}
.note{margin-top:8px;display:inline-flex;align-items:baseline}
.note .ttl{font-size:15px}
h3{font-size:19px;margin:30px 0 12px;padding-bottom:7px;border-bottom:2px solid var(--accent)}
p{font-size:16px;color:#333;margin:0 0 12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;transition:.15s}
.feat:hover{border-color:var(--accent);box-shadow:0 2px 14px rgba(43,108,255,.08)}
.feat b{display:block;font-size:13.5px;margin-bottom:3px}
.feat span{font-size:12.5px;color:var(--muted);line-height:1.55}
/* 表格横向可滑动容器（窄屏出现滚动条，桌面端无变化） */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.tscroll table{margin:0}
table.wide{width:auto;min-width:520px}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{border-bottom:1px solid var(--line);padding:9px 14px;text-align:left;vertical-align:top}
th{background:#f6f8ff;color:#334;font-weight:600;font-size:13px}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:#fcfdff}
code,.en{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--soft);padding:1px 6px;border-radius:6px;font-size:14px;color:var(--accent-d)}
.jingle{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:16px 22px;margin:14px 0;font-size:16px}
.jingle b{color:var(--accent)}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.io{display:flex;flex-direction:column;gap:14px}
textarea{width:100%;min-height:120px;resize:vertical;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;font-size:16px;font-family:inherit;background:var(--card);color:var(--fg);outline:none;transition:border-color .15s}
textarea:focus{border-color:var(--accent)}
.out{width:100%;min-height:120px;border:1px dashed var(--line);border-radius:var(--radius);padding:16px;
  font-size:18px;background:#fcfcfc;color:#222;white-space:pre-wrap;word-break:break-word;line-height:2;user-select:text}
.out .w{cursor:pointer;border-radius:5px;padding:0 1px;transition:.12s}
.out .w:hover{background:var(--soft);color:var(--accent)}
.ipaline{min-height:26px;padding:11px 14px;background:#eaf0ff;color:#2a3a66;border-radius:var(--radius);
  border:1px solid var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;white-space:pre-wrap;word-break:break-word;transition:.15s}
.ipaline.empty{color:#8a93b0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
button.copy{border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;
  border-radius:999px;padding:8px 16px;font-size:14px;transition:.15s}
button.copy:hover{border-color:var(--accent);color:var(--accent)}
.examples{display:grid;grid-template-columns:1fr;gap:8px;margin-top:6px}
.ex{display:flex;gap:10px;align-items:baseline;font-size:15px;cursor:pointer}
.ex .en{color:var(--muted);min-width:200px}
.ex .ar{color:var(--accent);font-weight:600}
.ex:hover .en{color:var(--fg)}
.tip{font-size:13px;color:var(--muted);margin-top:10px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.cards a.feat{text-decoration:none;color:inherit}
.cards a.feat:hover b{color:var(--accent)}
footer{margin-top:64px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}
a.dl{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
a.dl:hover{color:var(--accent)}
/* 工信部备案号：页面底部居中显示 */
.icp{text-align:center;margin-top:16px;font-size:12px;color:var(--muted);letter-spacing:.3px}
.icp a{color:var(--muted);text-decoration:none}
.icp a:hover{color:var(--accent)}
.icp .ga{display:inline-flex;align-items:center;gap:4px;margin-top:6px}
.icp .ga-icon{height:14px;width:auto;vertical-align:-2px}
@media(max-width:600px){.grid,.cards{grid-template-columns:1fr}.ex .en{min-width:0}}
/* 手机端导航改为单行横向滑动，解决换行占多行；桌面保持胶囊换行不变 */
@media(max-width:640px){
  .nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:11px 16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto}
  .nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;
    background:linear-gradient(to right,rgba(255,255,255,0),rgba(0,0,0,0.22));pointer-events:none;z-index:5}
}