:root{
  --ink:#122339; --ink-2:#3d4d61; --muted:#657387; --line:#dce3eb;
  --bg:#f6f8fb; --card:#fff; --accent:#b25f00; --accent-soft:#fff0db;
  --radius:16px; --shadow:0 10px 30px #1423380b;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid #c6d1de}
a:hover{border-bottom-color:var(--ink)}
code{font:0.92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#eef2f7; padding:1px 5px; border-radius:5px}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; border:0; letter-spacing:-.01em}
.brand .dot{width:12px; height:12px; border-radius:4px; background:var(--ink); display:inline-block}
.topbar nav{display:flex; gap:14px; font-size:.86rem}
.topbar nav a{color:var(--muted); border:0}
.topbar nav a:hover{color:var(--ink)}

main{max-width:920px; margin:0 auto; padding:20px 20px 64px}

/* ---------- tool ---------- */
.tool{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
h1{font-size:1.62rem; line-height:1.2; margin:0 0 6px; letter-spacing:-.02em}
.lede{margin:0 0 16px; color:var(--ink-2); font-size:.94rem}
.mobile-answer{display:none}

.inputs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.field{display:block; margin:0}
.lab{display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.lab em{font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; color:#93a1b3}
.inline{display:flex; gap:6px; align-items:stretch}
input[type=number],select{
  width:100%; min-width:0; padding:11px 12px; font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid #c9d4e1; border-radius:10px; -webkit-appearance:none; appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,#7b8798 50%),linear-gradient(135deg,#7b8798 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}
input[type=number]:focus,select:focus{outline:2px solid #9dc0e8; outline-offset:1px; border-color:#9dc0e8}
.colon{align-self:center; color:var(--muted); font-weight:700}
.help{display:block; margin-top:5px; font-size:.76rem; color:#8695a8}
.hidden{display:none !important}

.result{margin-top:16px; padding:16px 18px; border-radius:12px; background:var(--ink); color:#fff}
.big{font-size:1.72rem; font-weight:800; line-height:1.15; letter-spacing:-.02em; color:#ffd08a}
.sub{margin-top:6px; color:#c3cfdd; font-size:.92rem}
.note{margin-top:8px; color:#8ea0b5; font-size:.82rem}

.actions{display:flex; align-items:center; gap:12px; margin-top:14px}
button{
  font:inherit; font-weight:700; padding:11px 18px; min-height:44px; border-radius:10px;
  border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
}
button:active{transform:translateY(1px)}
.copied{font-size:.84rem; color:#1f7a4d; font-weight:600}

.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:16px 0 0; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.stats>div{background:#fff; padding:10px 12px}
.stats dt{font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 3px}
.stats dd{margin:0; font-weight:700; font-size:.95rem}

/* ---------- swap table ---------- */
.swap,.prose{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-top:18px}
h2{font-size:1.14rem; margin:0 0 8px; letter-spacing:-.01em}
.swap p,.prose p{color:var(--ink-2); font-size:.94rem}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.92rem; margin-top:8px}
th,td{text-align:right; padding:9px 10px; border-bottom:1px solid #eef2f6; white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700}
tbody tr.on{background:var(--accent-soft)}
tbody tr.on td{font-weight:700; color:#6d3a00}
td.up{color:#1f7a4d}
td.down{color:#a3352b}

.eq{margin:10px 0; padding:12px 14px; background:#f2f6fa; border-radius:10px; font-size:.9rem; color:var(--ink)}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0}
.card{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fbfcfe}
.card span{display:block; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.card strong{display:block; font-size:1.02rem}
.card em{display:block; margin-top:4px; font-style:normal; font-size:.8rem; color:var(--muted)}
.ranges{margin:8px 0 0; padding-left:18px; color:var(--ink-2); font-size:.94rem}
.ranges li{margin:6px 0}
.diagram img{display:block; width:100%; height:auto; margin:12px 0; border:1px solid var(--line); border-radius:12px; background:#f8fbff}

.faq details{border-top:1px solid #eef2f6; padding:10px 0}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer; font-weight:700; font-size:.96rem}
.faq details p{margin:8px 0 0; font-size:.92rem}

footer{max-width:920px; margin:0 auto; padding:0 20px 40px; display:flex; justify-content:space-between; gap:16px; font-size:.84rem; color:var(--muted)}
footer a{color:var(--muted); border:0}
footer nav{display:flex; gap:14px}

@media(max-width:760px){
  main{padding:14px 14px 48px}
  .tool,.swap,.prose{padding:14px; border-radius:14px}
  .lede{margin-bottom:12px}
  .mobile-answer{display:block; margin:0 0 12px; padding:11px 13px; border-radius:11px; background:var(--ink); color:#fff}
  .mobile-answer span{display:block; color:#9db0c6; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
  .mobile-answer strong{display:block; margin-top:2px; color:#ffd08a; font-size:1.25rem; line-height:1.2}
  .mobile-answer small{display:block; margin-top:3px; color:#c3cfdd; font-size:.78rem}
  .result{margin-top:12px; padding:14px 16px}
  .actions{margin-top:12px}
  h1{font-size:1.42rem}
  .inputs{grid-template-columns:1fr}
  .big{font-size:1.5rem}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr}
  .topbar{padding:10px 14px}
  .topbar nav a:first-child{display:none}
  footer{padding:0 14px 32px}
}

/* Page-scoped SAR/DAR states and compact diagnostic list. */
.note.pass{color:#86efac}
.note.warn{color:#fbbf24}
.diagnosis ol{display:grid;gap:12px;padding-left:1.35rem}
.diagnosis li{padding-left:.35rem;line-height:1.62}
.diagnosis code{overflow-wrap:anywhere;word-break:break-word}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:760px}
@media(max-width:760px){
  .inputs .inline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
  .table-wrap{margin-inline:-4px;padding-bottom:6px}
}