:root{
  --bg:#fbf7ef;
  --card:#fffdf8;
  --navy:#102a43;
  --navy-2:#173b5c;
  --text:#26384a;
  --muted:#6b7785;
  --border:#d8e1ea;
  --amber:#d97706;
  --amber-soft:#fff3d8;
  --shadow:0 12px 30px rgba(16,42,67,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:var(--navy-2)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.7rem 1rem;border:2px solid var(--amber);border-radius:10px;z-index:50}
.layout{display:flex;min-height:100vh}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:300px;
  background:#f5efe5;
  border-right:1px solid var(--border);
  padding:1.25rem 1rem;
  overflow:auto;
  z-index:10;
}
.brand{
  display:flex;align-items:center;gap:.65rem;
  color:var(--navy);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:1.05rem;
  margin-bottom:1rem;
}
.brand-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--navy),#255f89);box-shadow:0 6px 18px rgba(16,42,67,.22)}
.search-wrap{margin:.75rem 0 1rem}
.search-label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:.35rem}
.search-input{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:.75rem .85rem;
  font-size:.95rem;
  outline:none;
}
.search-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.16)}
.nav-section-title{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:1rem .25rem .4rem;
  font-weight:800;
}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a{
  display:block;
  color:var(--text);
  text-decoration:none;
  padding:.48rem .65rem;
  border-radius:10px;
  font-size:.92rem;
  border:1px solid transparent;
}
.nav-list a:hover,.nav-list a:focus{background:#fff;border-color:var(--border);outline:none}
.nav-list a.active{background:var(--navy);color:#fff}
.mobile-toggle{display:none}
main{
  margin-left:300px;
  width:calc(100% - 300px);
  padding:3rem clamp(1.25rem,4vw,4rem);
}
.hero{
  max-width:1040px;
  margin:0 auto 2rem;
  background:linear-gradient(135deg,#fffdf8,#fff7e5);
  border:1px solid var(--border);
  border-radius:24px;
  padding:2rem;
  box-shadow:var(--shadow);
}
.eyebrow{color:var(--amber);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}
h1{color:var(--navy);font-size:clamp(2rem,5vw,3.25rem);line-height:1.05;margin:.45rem 0 1rem;letter-spacing:-.045em}
h2{color:var(--navy);font-size:1.35rem;margin:0 0 .75rem}
h3{color:var(--navy);font-size:1.05rem;margin:0 0 .45rem}
p{margin:.25rem 0 .75rem}
.hero p{font-size:1.05rem;max-width:780px}
.stats{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.25rem}
.stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:.7rem .9rem;min-width:130px}
.stat strong{display:block;color:var(--navy);font-size:1.25rem}
.toolbar{
  max-width:1040px;
  margin:0 auto 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.count{color:var(--muted);font-size:.95rem}
.grid{
  max-width:1040px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;
}
.tool-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.05rem;
  min-height:170px;
  box-shadow:0 4px 14px rgba(16,42,67,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tool-card:hover,.tool-card:focus{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#f3bd73;outline:none}
.badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  color:#8a4d00;
  background:var(--amber-soft);
  border:1px solid #f5d99b;
  padding:.22rem .5rem;
  border-radius:999px;
  margin-bottom:.75rem;
}
.tool-card h2{font-size:1.1rem;margin:.1rem 0 .45rem}
.tool-card p{font-size:.92rem;color:#4b5b68}
.page-shell{max-width:980px;margin:0 auto}
.back-link{display:inline-flex;margin-bottom:1rem;text-decoration:none;font-weight:700;color:var(--navy)}
.tool-header{
  background:linear-gradient(135deg,#fffdf8,#fff7e5);
  border:1px solid var(--border);
  border-radius:24px;
  padding:2rem;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
}
.tool-header h1{font-size:clamp(2rem,4.5vw,3rem)}
.meta-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
.official{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  text-decoration:none;
  border-radius:12px;
  padding:.7rem 1rem;
  font-weight:800;
}
.official:hover,.official:focus{background:#1e4b73;outline:3px solid rgba(217,119,6,.26)}
.sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.section-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.15rem;
  box-shadow:0 4px 14px rgba(16,42,67,.04);
}
.section-card.wide{grid-column:1 / -1}
.section-card ul{padding-left:1.1rem;margin:.3rem 0 0}
.section-card li{margin:.25rem 0}
.small-muted{color:var(--muted);font-size:.9rem}
.no-results{
  display:none;
  max-width:1040px;
  margin:1rem auto;
  padding:1rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--muted);
  font-weight:700;
}
mark.search-hit{background:#ffec99;color:inherit;border-radius:4px;padding:.05rem .12rem}
.footer{max-width:1040px;margin:2rem auto 0;color:var(--muted);font-size:.9rem}
@media (max-width: 820px){
  .layout{display:block}
  .mobile-toggle{
    display:block;
    position:sticky;
    top:0;
    width:100%;
    border:0;
    background:var(--navy);
    color:#fff;
    padding:.85rem 1rem;
    font-weight:800;
    z-index:20;
  }
  .sidebar{
    position:static;
    width:100%;
    max-height:0;
    overflow:hidden;
    padding:0 1rem;
    border-right:0;
    border-bottom:1px solid var(--border);
    transition:max-height .2s ease,padding .2s ease;
  }
  body.nav-open .sidebar{max-height:75vh;overflow:auto;padding:1rem}
  main{margin-left:0;width:100%;padding:1.25rem}
  .hero,.tool-header{padding:1.35rem}
  .sections{grid-template-columns:1fr}
}