:root{
  --bg:#608dc5;
  --panel:#325890;
  --card:#2f5387;
  --text:#e8eef6;
  --muted:#a8b4c6;
  --line:rgba(117, 210, 165, 0.746);
  --accent:#d6a85a;
  --shadow: 0 12px 28px rgba(58, 56, 56, 0.35);
  --radius:18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 15% 0%, rgba(48, 128, 105, 0.749), transparent 60%), var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit; text-decoration:none;}
a:hover{opacity:.92;}

header{
  position:sticky;
  top:0;
  z-index:50;
  /* Opaque navigation (no glass / transparency) */
  background: var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0;}
.brand img{width:52px; height:52px; object-fit:contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));}
.brand .title{display:flex; flex-direction:column; gap:2px; min-width:0;}
.brand .title b{font-size:18px; letter-spacing:.2px;}
.brand .title span{font-size:12.5px; color:var(--muted);}

/* Hamburger */
.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--panel);
  color:var(--text);
  cursor:pointer;
}
.menu-btn:hover{background: rgba(255,255,255,.08);}
.menu-icon{font-size:18px; line-height:1;}

/* Drawer */
.drawer{position:fixed; inset:0; z-index:60; pointer-events:none;}
.drawer.open{pointer-events:auto;}
.drawer-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.52);
  opacity:0;
  transition: opacity .18s ease;
}
.drawer.open .drawer-overlay{opacity:1;}
.drawer-panel{
  position:absolute; right:0; top:0; height:100%; width:min(360px, 92vw);
  background: linear-gradient(180deg, rgba(16,24,36,.98), rgba(12,18,26,.98));
  border-left:1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(12px);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.drawer.open .drawer-panel{transform: translateX(0); opacity:1;}
.drawer-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.drawer-title{font-weight:700; letter-spacing:.2px;}
.drawer-close{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
}
.drawer-close:hover{background: rgba(255,255,255,.06);}

.drawer-nav{display:flex; flex-direction:column; gap:6px; padding-top:4px;}
.drawer-nav a{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--text);
}
.drawer-nav a:hover{background: rgba(255,255,255,.05); border-color: var(--line);}
.drawer-nav a[aria-current="page"]{background: rgba(214,168,90,.10); border-color: rgba(214,168,90,.28);}

.drawer-settings{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drawer-section-title{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.12em;}
.lang-row{display:flex; align-items:center; gap:10px;}
.lang-btn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  letter-spacing:.06em;
}
.lang-btn:hover{background: rgba(255,255,255,.06);}
.lang-btn.active{border-color: rgba(214,168,90,.5); background: rgba(214,168,90,.10);}

.no-scroll{overflow:hidden;}

/* Layout */
main{max-width:1100px; margin:0 auto; padding:18px;}
.layout{display:grid; grid-template-columns: 320px 1fr; gap:18px; align-items:start;}

@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .sidebar{display:none;}
}

.card{
  background: linear-gradient(180deg, rgba(46, 70, 105, 0.98), rgba(53, 80, 115, 0.98));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
}
.sidebar .card{padding:16px;}
.content{padding:22px;}

.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line);
  color:var(--muted);
  background: rgba(255,255,255,.02);
}

.small{font-size:12.5px; color:var(--muted);}
.lead{font-size:16px; color:rgba(232,238,246,.92);}

.list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.list a{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid transparent;}
.list a:hover{background: rgba(24, 62, 33, 0.05); border-color: var(--line);}

h1,h2,h3{line-height:1.2;}
h1{font-size:28px; margin:0 0 10px;}
h2{font-size:20px; margin:22px 0 10px;}
h3{font-size:16px; margin:18px 0 8px; color: rgba(232,238,246,.92);}

p{margin:10px 0;}
ul,ol{margin:10px 0 10px 20px;}
blockquote{
  margin:14px 0;
  padding:14px 14px;
  border-left:3px solid rgba(214,168,90,.55);
  background: rgba(214,168,90,.08);
  border-radius: 12px;
  color: rgba(232,238,246,.92);
}

.callout{
  margin:14px 0;
  padding:14px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
@media (max-width: 720px){
  .grid-2{grid-template-columns:1fr;}
}

code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .95em; color: rgba(232,238,246,.92);}
hr{border:0; border-top:1px solid var(--line); margin:18px 0;}

footer{border-top:1px solid var(--line); margin-top:24px;}
.footer-inner{max-width:1100px; margin:0 auto; padding:18px; display:flex; justify-content:space-between; color:var(--muted);}

/* Anchor offset under sticky header */
:target{scroll-margin-top: 84px;}


/* === Navigation consistency overrides (2026-03-04) === */
/* Force single-column layout: navigation lives in hamburger drawer */
.layout{display:block; max-width:1100px; margin:0 auto; padding:18px;}
.sidebar{display:none !important;}
.content{max-width:920px; margin:0 auto;}
/* Ensure main has breathing room under sticky header */
main{padding: 12px 0 28px;}


.prose img,.content img{max-width:100%;height:auto;border-radius:14px;display:block;margin:10px auto;}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;display:block;overflow-x:auto;}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;}
.prose th{background:rgba(255,255,255,.05);text-align:left;}
.prose thead th{position:sticky;top:0;}
.prose .level1>h1:first-child,.prose > h1:first-child{margin-top:0;}
.prose{max-width:100%;}
.cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px;}
.cta-card{padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);}
.cta-card h2{margin-top:0;}