:root{
  --rail-w:300px;
  --gap:36px;
  --main-max:clamp(980px,74vw,1320px);
  --page-max:calc(var(--main-max) + 2*var(--rail-w) + 2*var(--gap));
  --bg:#fafafa;
  --card:#ffffff;
  --text:#111827;
  --muted:#556070;
  --border:#e5e7eb;
  --accent:#0a58ca;
  --accent-soft:#eef5ff;
  --danger:#b42318;
  --success:#0f766e;
}
*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.5;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
header{
  position:static;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
}
.header-inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:.8rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  color:#333;
}
nav.primary a{ margin-left:1rem; font-weight:500; }
.site-search{ position:relative; flex:1; max-width:520px; }
.site-search form{ display:flex; align-items:center; gap:.5rem; }
.site-search input[type="search"]{
  width:100%;
  padding:.6rem .9rem;
  border:1px solid #ccc;
  border-radius:999px;
  font-size:.95rem;
  outline:none;
  transition:border-color .15s ease;
}
.site-search input[type="search"]:focus{ border-color:#0066cc; box-shadow:0 0 0 3px rgba(0,102,204,.12); }
.site-search .kbd{ font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#666; }
.site-search .results{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:.35rem;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
  max-height:60vh;
  overflow-y:auto;
  display:none;
  z-index:20;
}
.site-search .results[data-open="true"]{ display:block; }
.site-search .result{ padding:.7rem .9rem; cursor:pointer; display:block; text-decoration:none; color:#111; }
.site-search .result:hover,.site-search .result[aria-selected="true"]{ background:#f6f8fb; }
@media (max-width:579.98px){
  .header-inner{ flex-wrap:wrap; }
  .site-search{ order:3; width:100%; max-width:none; }
}
.page{
  max-width:var(--page-max);
  margin:0 auto;
  display:grid;
  gap:var(--gap);
  padding:1rem;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:980px) and (max-width:1599.98px){
  .page{
    grid-template-columns:1fr var(--rail-w);
    align-items:start;
    max-width:calc(var(--main-max) + var(--rail-w) + var(--gap));
  }
  .left-rail{ display:none !important; }
}
@media (min-width:1600px){
  .page{ grid-template-columns:var(--rail-w) minmax(0,var(--main-max)) var(--rail-w); align-items:start; }
}
.rail{ position:sticky; top:72px; height:fit-content; }
.rail .stack > * + *{ margin-top:var(--gap); }
.ad-wrap[aria-label="Advertisement"]{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:.5rem;
}
.rail .ad-wrap[aria-label]::before{
  content:attr(aria-label);
  display:block;
  font-size:1rem;
  font-weight:700;
  color:#1f2937;
  margin:0 0 .65rem;
  text-align:center;
}
.ad-slot{ display:block; width:100%; min-height:300px; }
@media (min-width:1200px){ .ad-slot{ min-height:320px; } }
.show-desktop{ display:none; }
.show-mobile{ display:block; }
@media (min-width:980px){
  .show-desktop{ display:block; }
  .show-mobile{ display:none; }
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
}
.tool-canvas > * + *{ margin-top:1rem; }
h1{ font-size:1.55rem; margin:.25rem 0 .25rem; }
h2{ font-size:1.15rem; margin:0 0 .75rem; }
h3{ font-size:1rem; margin:0 0 .55rem; }
.meta{ color:var(--muted); font-size:.95rem; margin:.25rem 0 .8rem; }
.hint,.small{ color:var(--muted); font-size:.92rem; }
.tool-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:980px){ .tool-grid{ grid-template-columns:1.15fr 1fr; } }
.grid2{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid3{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
label{ font-weight:600; display:block; margin:.25rem 0 .35rem; }
input[type="number"],input[type="text"],input[type="date"],input[type="time"],select,textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid #ccc;
  border-radius:10px;
  font-size:1rem;
  font-family:inherit;
  background:#fff;
  color:var(--text);
}
textarea{ min-height:110px; resize:vertical; }
input[type="checkbox"]{ transform:translateY(1px); }
.checkbox-row label{ font-weight:500; margin:0; }
.btn{
  background:#0066cc;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:.7rem 1rem;
  cursor:pointer;
  font-size:.95rem;
}
.btn:hover{ background:#004a99; }
.btn.secondary{ background:#eee; color:#222; }
.btn.secondary:hover{ background:#ddd; }
.btn.ghost{ background:transparent; color:#0066cc; border:1px solid #cfe3f8; }
.btn.ghost:hover{ background:#f3f8ff; }
.pill,.pill-link{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  font-size:.93rem;
  color:#0a58ca;
  text-decoration:none;
  white-space:nowrap;
}
.pill:hover,.pill-link:hover{ background:#eef5ff; border-color:#cfe3f8; text-decoration:none; }
.related-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
}
.related-tools .label{ margin-right:.25rem; color:#333; }
.result-block{
  background:#fcfcfc;
  border:1px dashed #d7dce3;
  border-radius:10px;
  padding:12px;
}
.result-lead{
  padding:.85rem 1rem;
  background:#f6f8fb;
  border:1px solid #e5ebf3;
  border-radius:10px;
  margin-bottom:.75rem;
}
.result-lead strong{ color:#0a58ca; }
.result-grid{ display:grid; gap:.6rem; grid-template-columns:1fr; }
@media (min-width:580px){ .result-grid{ grid-template-columns:1fr 1fr; } }
.kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem .75rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
}
.kv strong{ color:#0a58ca; }
.status{ color:var(--muted); font-size:.9rem; min-height:1.2em; margin-top:.4rem; }
.error{ color:var(--danger); }
.success{ color:var(--success); }
table{
  width:100%;
  border-collapse:collapse;
  margin-top:.85rem;
  font-size:.95rem;
}
th,td{
  border:1px solid #e5e7eb;
  padding:.65rem .7rem;
  text-align:left;
  vertical-align:top;
}
th{ background:#f8fafc; }
.table-wrap{ overflow:auto; }
.faq-list > div + div{ margin-top:1rem; padding-top:1rem; border-top:1px solid #eee; }
.formula-list code{ font-size:.95rem; }
.pretty-facts .facts-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.pretty-facts .fact{
  position:relative;
  background:#f8fbff;
  border:1px solid #e6f0fe;
  border-radius:12px;
  padding:14px 12px 12px 52px;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.pretty-facts .fact:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  border-color:#d9e8ff;
}
@media (prefers-reduced-motion:reduce){
  .pretty-facts .fact{ transition:none; }
}
.pretty-facts .badge{
  position:absolute;
  left:12px;
  top:12px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:#0a58ca;
  background:#eaf2ff;
  border:1px solid #cfe3f8;
}
.pretty-facts h3{ margin:.1rem 0 .35rem; color:#0a58ca; }
.pretty-facts p{ margin:.15rem 0 .5rem; color:#213547; }
.pretty-facts .tag{
  display:inline-block;
  font-size:.85rem;
  padding:.2rem .5rem;
  border-radius:999px;
  background:#fff;
  border:1px solid #e6f0fe;
  color:#0a58ca;
}
.disclaimer{
  background:#fffaf0;
  border:1px solid #f4d8a8;
  color:#6b4f1d;
}
.below-content .cats{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1rem;
}
footer{ color:#666; font-size:.9rem; padding:2rem 1rem; text-align:center; }
.muted-list{ margin:.5rem 0 0; padding-left:1.1rem; color:#475467; }
@media (max-width:579.98px){
  .card{ padding:.85rem; }
  .actions-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .actions-row button{ width:100%; }
}