: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}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.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 14px; color:var(--ink-2); font-size:.94rem}

.fields{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px 12px}
.field{display:block; min-width:0}
.lab{display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.opt{font-weight:600; text-transform:none; letter-spacing:0; color:#93a1b3; font-size:.9em}
.inline{display:flex; gap:6px; align-items:stretch}
input[type=number],select{
  width:100%; min-width:0; padding:9px 10px; font-size:.98rem; color:var(--ink);
  background:#fff; border:1px solid #c9d4e1; border-radius:9px; -webkit-appearance:none; appearance:none;
}
.inline select{flex:0 0 64px}
select{background-image:linear-gradient(45deg,transparent 50%,#7b8798 50%),linear-gradient(135deg,#7b8798 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:26px}
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; font-size:.9rem}
#custom-wrap .inline input,#rescustom-wrap .inline input{flex:0 1 104px}
.hidden{display:none !important}

/* ---------- result ---------- */
.result{margin-top:14px; padding:14px 16px 12px; border-radius:12px; background:var(--ink); color:#fff}
.big3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding-bottom:10px; border-bottom:1px solid #24384f}
.big3 .cell{min-width:0}
.big3 .k{display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#9fb0c4; font-weight:700; margin-bottom:2px}
.big3 .v{display:block; font-size:1.42rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:#ffd08a; font-variant-numeric:tabular-nums; white-space:nowrap}
.big3 .s{display:block; font-size:.8rem; color:#c3cfdd; font-variant-numeric:tabular-nums; white-space:nowrap}
.verdict{margin:9px 0 0; font-size:.9rem; line-height:1.45; color:#dbe5ef}

.cmp{width:100%; border-collapse:collapse; font-size:.84rem; margin-top:9px; font-variant-numeric:tabular-nums}
.cmp caption{text-align:left}
.cmp th,.cmp td{padding:5px 0; border-top:1px solid #24384f; text-align:left; vertical-align:top}
.cmp thead th{font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:#8fa1b6; font-weight:700; padding-bottom:3px}
.cmp thead th:nth-child(2),.cmp thead th:nth-child(3){text-align:right}
.cmp tbody th{font-weight:700; color:#fff; white-space:nowrap; padding-right:10px}
.cmp tbody td{color:#dbe5ef; white-space:nowrap}
.cmp tbody td:nth-child(2){text-align:right; padding-right:10px}
.cmp tbody td:nth-child(3){text-align:right; color:#9fb0c4}
.cmp tbody tr.cur th,.cmp tbody tr.cur td{color:#ffd08a}
.cmp tbody tr.cur td:nth-child(3){color:#ffd08a}

.px{margin:8px 0 0; font-size:.8rem; color:#9fb0c4; font-variant-numeric:tabular-nums}
.px:empty{display:none}
.round{margin:6px 0 0; font-size:.82rem; line-height:1.4; color:#ffd08a; font-variant-numeric:tabular-nums}
.round:empty{display:none}
.actions{display:flex; align-items:center; gap:12px; margin-top:10px}
button#copy{
  font:inherit; font-weight:700; padding:10px 16px; min-height:42px; border-radius:9px;
  border:1px solid #ffd08a; background:#ffd08a; color:#12233a; cursor:pointer;
}
button#copy:active{transform:translateY(1px)}
.copied{font-size:.82rem; color:#8fe0b0; font-weight:600}

/* ---------- prose ---------- */
.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.12rem; margin:22px 0 8px; letter-spacing:-.01em}
h2:first-child{margin-top:0}
.prose p{color:var(--ink-2); font-size:.94rem}
.eq{margin:10px 0; padding:12px 14px; background:#f2f6fa; border-radius:10px; font-size:.9rem; color:var(--ink)}
.eq p{margin:4px 0; color:var(--ink)}
table.sizes{width:100%; border-collapse:collapse; font-size:.9rem; margin:10px 0 4px; font-variant-numeric:tabular-nums}
table.sizes th,table.sizes td{padding:7px 8px; border-bottom:1px solid #eef2f6; text-align:left; white-space:nowrap}
table.sizes thead th{font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700}
table.sizes tbody th{font-weight:700; color:var(--ink)}
table.sizes tbody td{color:var(--ink-2)}
.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:10px 10px 40px}
  .tool,.prose{padding:12px; border-radius:14px}
  .topbar{padding:8px 12px}
  .topbar nav a:first-child{display:none}
  h1{font-size:1.24rem; line-height:1.16; margin-bottom:4px}
  .lede{font-size:.82rem; line-height:1.35; margin-bottom:9px}
  .fields{grid-template-columns:1fr 1fr; gap:7px 8px}
  #res-field{grid-column:1 / -1}
  .lab{font-size:.62rem; margin-bottom:2px}
  input[type=number],select{padding:7px 8px; font-size:.9rem; border-radius:8px}
  .inline select{flex:0 0 54px}
  select{padding-right:22px; background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%}
  .result{margin-top:9px; padding:10px 10px 9px}
  .big3{gap:6px; padding-bottom:8px}
  .big3 .k{font-size:.6rem}
  .big3 .v{font-size:1.08rem}
  .big3 .s{font-size:.72rem}
  .verdict{margin-top:7px; font-size:.8rem; line-height:1.34}
  .cmp{font-size:.74rem; margin-top:7px}
  .cmp tbody th{padding-right:6px}
  .cmp tbody td:nth-child(2){padding-right:6px}
  .px{font-size:.72rem; margin-top:6px}
  .round{font-size:.72rem; margin-top:5px}
  .actions{margin-top:7px}
  button#copy{min-height:38px; padding:8px 13px; font-size:.9rem}
  table.sizes{font-size:.76rem}
  table.sizes th,table.sizes td{padding:5px 5px; white-space:normal}
  footer{padding:0 12px 30px; flex-direction:column; gap:8px}
}