@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700&family=Noto+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#EEF1F4;
  --surface:#FFFFFF;
  --surface-2:#E4E9EE;
  --border:#CBD5DE;
  --border-strong:#A9B8C4;
  --text:#1A1D21;
  --text-muted:#4C5A66;
  --text-faint:#7C8A96;
  --nav-1:#0A2E4D;
  --nav-2:#0E3E66;
  --nav-text:#DCE7F0;
  --link:#0A5FA0;
  --link-visited:#5A3D8C;
  --accent:#0A5FA0;
  --accent-strong:#073F6B;
  --accent-soft:#E1EDF6;
  --mark:#C6641E;
  --mark-soft:#FBEADA;
  --stripe:#F3F6F8;
  --danger:#A5432A;
  --focus:#0A5FA0;
  --radius-sm:3px;
  --radius-md:5px;
  --shadow-card:0 1px 2px rgba(10,20,30,0.06);
  --font-head:'Roboto Condensed', Arial, sans-serif;
  --font-body:'Noto Sans', Arial, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11161B;
    --surface:#182028;
    --surface-2:#1E2830;
    --border:#2E3A44;
    --border-strong:#3D4C58;
    --text:#E7ECEF;
    --text-muted:#9FADB8;
    --text-faint:#71818C;
    --nav-1:#081D30;
    --nav-2:#0A2740;
    --nav-text:#CBDCE9;
    --link:#5FA9E0;
    --link-visited:#B79BE0;
    --accent:#5FA9E0;
    --accent-strong:#89C2ED;
    --accent-soft:#1B2C38;
    --mark:#E0A05C;
    --mark-soft:#31281B;
    --stripe:#1C252D;
    --danger:#E08066;
    --focus:#5FA9E0;
    --shadow-card:0 1px 2px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --bg:#11161B; --surface:#182028; --surface-2:#1E2830; --border:#2E3A44; --border-strong:#3D4C58;
  --text:#E7ECEF; --text-muted:#9FADB8; --text-faint:#71818C;
  --nav-1:#081D30; --nav-2:#0A2740; --nav-text:#CBDCE9;
  --link:#5FA9E0; --link-visited:#B79BE0; --accent:#5FA9E0; --accent-strong:#89C2ED; --accent-soft:#1B2C38;
  --mark:#E0A05C; --mark-soft:#31281B; --stripe:#1C252D; --danger:#E08066; --focus:#5FA9E0;
  --shadow-card:0 1px 2px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:14px; line-height:1.5;}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; color:var(--text); margin:0 0 0.4em; line-height:1.15; text-wrap:balance;}
h1{font-size:1.7rem;}
h2{font-size:1.2rem; border-bottom:1px solid var(--border); padding-bottom:6px;}
h3{font-size:1rem;}
p{margin:0 0 1em;}
a{color:var(--link); text-decoration:underline;}
a:visited{color:var(--link-visited);}
a:hover{color:var(--mark);}
a.nav-link, .no-underline{text-decoration:none;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

.wrap{max-width:1120px; margin:0 auto; padding:0 18px;}

/* ---------- Top bar ---------- */
.topbar{background:var(--nav-1); color:var(--nav-text); font-size:0.78rem;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:6px 18px; gap:12px; flex-wrap:wrap;}
.topbar span{opacity:0.85;}

header.site-nav{position:sticky; top:0; z-index:50; background:var(--nav-2); box-shadow:0 1px 4px rgba(0,0,0,0.25);}
.nav-row{display:flex; align-items:center; gap:22px; padding:0; min-height:52px;}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:#fff; padding:8px 0;}
.brand-name{font-family:var(--font-head); font-weight:700; font-size:1.08rem; letter-spacing:0.01em; color:#fff; white-space:nowrap;}
.brand-name em{font-style:normal; color:var(--mark);}
@media (max-width:520px){ .brand-name em{display:none;} }

nav.primary{display:flex; align-items:stretch; flex:1; flex-wrap:wrap;}
nav.primary > a, nav.primary > .dropdown > button{
  font-family:var(--font-head); font-weight:600; font-size:0.86rem; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--nav-text); text-decoration:none; background:transparent; border:none;
  padding:0 14px; height:52px; display:flex; align-items:center; cursor:pointer;
}
nav.primary > a:hover, nav.primary > .dropdown > button:hover, nav.primary > .dropdown.open > button{
  background:rgba(255,255,255,0.08); color:#fff;
}
nav.primary > a[aria-current="page"]{background:var(--mark); color:#241305;}
.dropdown{position:relative;}
.dropdown > button::after{content:"▾"; margin-left:6px; font-size:0.7em;}
.dropdown-panel{
  position:absolute; top:100%; left:0; background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--mark);
  min-width:240px; box-shadow:0 8px 20px rgba(0,0,0,0.18); display:none; z-index:60; padding:6px 0;
}
.dropdown.open .dropdown-panel{display:block;}
.dropdown-panel a{
  display:block; padding:9px 16px; color:var(--text); text-decoration:none; font-size:0.86rem; border-left:3px solid transparent;
}
.dropdown-panel a:hover{background:var(--accent-soft); border-left-color:var(--mark); color:var(--text);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{background:var(--surface-2); border-bottom:1px solid var(--border); font-size:0.78rem; color:var(--text-faint); padding:7px 0;}
.breadcrumb a{color:var(--text-muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--mark); text-decoration:underline;}

/* ---------- Page intro ---------- */
.page-intro{padding:20px 0 4px;}
.page-intro p.lede{color:var(--text-muted); max-width:70ch; font-size:0.95rem;}

.ribbon{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin:14px 0 20px; background:var(--border);
  gap:1px;
}
.ribbon .cell{background:var(--surface); padding:9px 13px;}
.ribbon .cell .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-faint); font-weight:600;}
.ribbon .cell .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:1.05rem; color:var(--accent-strong); margin-top:2px;}

/* ---------- Ad slot ---------- */
.ad-slot{border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--radius-sm); padding:10px; margin:18px 0; text-align:center;}
.ad-slot .ad-tag{display:block; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); font-weight:700; border-bottom:1px dotted var(--border); padding-bottom:6px; margin-bottom:8px;}
.ad-slot .ad-note{font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint);}
.ad-slot.leaderboard{min-height:80px; display:flex; flex-direction:column; justify-content:center;}
.ad-slot.rectangle{min-height:250px; display:flex; flex-direction:column; justify-content:center;}

/* ---------- Layout grid ---------- */
.layout-grid{display:grid; grid-template-columns:1fr 290px; gap:20px; align-items:start; padding-bottom:10px;}
@media (max-width:820px){ .layout-grid{grid-template-columns:1fr;} }

.side-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:18px; box-shadow:var(--shadow-card);}
.side-box .side-head{background:var(--nav-2); color:#fff; font-family:var(--font-head); font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.03em; padding:8px 12px;}
.side-box .side-body{padding:10px 12px;}
.side-box ul{margin:0; padding:0; list-style:none;}
.side-box li{border-bottom:1px solid var(--border); }
.side-box li:last-child{border-bottom:none;}
.side-box li a{display:block; padding:8px 2px; font-size:0.84rem; text-decoration:none; color:var(--link);}
.side-box li a:hover{color:var(--mark);}
.trivia{font-size:0.83rem; color:var(--text-muted); margin:0;}
.trivia + .trivia{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}

/* ---------- Tool card ---------- */
.tool-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); overflow:hidden;}
.tabs{display:flex; flex-wrap:wrap; background:var(--surface-2); border-bottom:1px solid var(--border);}
.tab-btn{
  font-family:var(--font-head); font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.02em;
  color:var(--text-muted); background:transparent; border:none; border-bottom:3px solid transparent;
  padding:12px 15px; cursor:pointer;
}
.tab-btn:hover{color:var(--text); background:rgba(10,95,160,0.06);}
.tab-btn[aria-selected="true"]{color:var(--accent-strong); border-bottom-color:var(--mark); background:var(--surface);}
.tab-panel{display:none; padding:20px;}
.tab-panel.active{display:block;}

.field-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:0.78rem; font-weight:700; color:var(--text-muted);}
.field .hint{font-size:0.72rem; color:var(--text-faint);}
input, select, textarea{
  font-family:var(--font-mono); font-size:0.9rem; color:var(--text);
  background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 9px; width:100%;
}
textarea{font-family:var(--font-body); resize:vertical; min-height:58px;}
input:focus-visible, select:focus-visible, textarea:focus-visible{border-color:var(--focus);}

.btn{
  font-family:var(--font-head); font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.02em; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent-strong); border-radius:var(--radius-sm); padding:9px 16px;
}
.btn:hover{background:var(--accent-strong);}
.row{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-top:16px;}

.result{margin-top:18px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
.result .result-headline{
  background:var(--accent-soft); font-family:var(--font-head); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(1.2rem,2.6vw,1.6rem); color:var(--accent-strong); padding:14px 16px 4px;
}
.result .result-sub{color:var(--text-muted); font-size:0.82rem; padding:0 16px 14px;}
table.result-table{width:100%; border-collapse:collapse; font-size:0.85rem;}
table.result-table td{padding:8px 16px; border-top:1px solid var(--border);}
table.result-table tr:nth-child(odd) td{background:var(--stripe);}
table.result-table td.k{color:var(--text-muted); width:55%;}
table.result-table td.v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); text-align:right;}

/* ---------- FAQ ---------- */
.faq-block{margin-top:26px;}
details{border-bottom:1px solid var(--border); padding:12px 2px;}
details summary{font-weight:700; font-family:var(--font-head); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:0.94rem;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; font-family:var(--font-mono); color:var(--mark); font-size:1.1rem;}
details[open] summary::after{content:"–";}
details p{margin-top:8px; color:var(--text-muted); max-width:72ch; font-size:0.88rem;}

/* ---------- Static pages ---------- */
.doc{max-width:74ch;}
.updated{font-family:var(--font-mono); font-size:0.75rem; color:var(--text-faint); margin-bottom:22px;}
.doc h2{font-size:1.05rem; margin-top:1.8em;}
.doc ul{color:var(--text-muted); padding-left:1.2em; font-size:0.9rem;}
.doc li{margin-bottom:0.4em;}
.card-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:20px 0;}
.info-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--shadow-card);}
.info-card h3{font-size:0.92rem; margin-bottom:4px;}
.info-card p{font-size:0.85rem; color:var(--text-muted); margin:0;}

/* ---------- Footer ---------- */
footer{background:var(--nav-1); color:var(--nav-text); margin-top:30px;}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; padding:32px 0 20px;}
.footer-col h4{font-family:var(--font-head); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:#fff; margin-bottom:10px;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:7px;}
.footer-col a{color:var(--nav-text); text-decoration:none; font-size:0.83rem;}
.footer-col a:hover{color:var(--mark);}
.footer-col p{color:var(--nav-text); font-size:0.83rem; opacity:0.85;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding:14px 0; font-size:0.76rem; opacity:0.75;}

/* ---------- Cookie banner ---------- */
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:640px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(0,0,0,0.22); padding:14px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
#cookie-banner[hidden]{display:none;}
#cookie-banner p{margin:0; font-size:0.8rem; color:var(--text-muted); flex:1 1 260px;}
#cookie-banner .btn{padding:7px 12px; font-size:0.78rem;}
#cookie-banner .btn.ghost{background:transparent; color:var(--text-muted); border-color:var(--border-strong);}

section.page{padding-bottom:40px;}