:root{
  --bg:#0f172a;
  --panel:#111b33;
  --panel-2:#172444;
  --text:#eaf0ff;
  --muted:#b8c6ea;
  --accent:#6ea8ff;
  --line:rgba(255,255,255,0.12);
}

*{box-sizing:border-box}
html{overflow-y:scroll;overflow-x:hidden}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  background:linear-gradient(180deg,#0b1224,#111a33 35%,#0f172a);
  color:var(--text);
}

a{color:#9fc4ff;text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(5px);
  background:rgba(8,13,27,0.86);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  max-width:1150px;
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
}

.brand{
  font-weight:700;
  letter-spacing:0.4px;
  flex-shrink:0;
}

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-left:auto;
  justify-content:flex-end;
}

.nav a{
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:999px;
}

.nav a.active{
  border-color:var(--line);
  background:rgba(255,255,255,0.07);
}

.hero{
  max-width:1150px;
  margin:26px auto 0 auto;
  padding:0 18px;
}

.hero-card{
  border:1px solid var(--line);
  background:linear-gradient(130deg,var(--panel),var(--panel-2));
  border-radius:18px;
  padding:24px;
}

.hero h1{
  margin:0 0 10px 0;
  font-size:30px;
}

.hero p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:950px;
}

.container{
  max-width:1150px;
  margin:18px auto 56px auto;
  padding:0 18px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}

.card{
  grid-column:span 12;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  padding:16px;
}

.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}

@media(max-width:900px){
  .col-6,.col-8,.col-4{grid-column:span 12}
}

h2{
  margin:0 0 10px 0;
  font-size:21px;
}

h3{
  margin:12px 0 8px 0;
  font-size:17px;
}

p,li{
  line-height:1.58;
  color:var(--muted);
}

ul{margin:8px 0 0 20px}

.tag{
  display:inline-block;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 10px;
  margin:6px 8px 0 0;
  color:#d2deff;
  font-size:13px;
}

.gif{
  width:100%;
  max-width:620px;
  border:1px solid var(--line);
  border-radius:10px;
}

.diagram-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  margin-top:12px;
}

.diagram-head{
  background:rgba(255,255,255,0.05);
  border-bottom:1px solid var(--line);
  padding:8px 10px;
  font-size:18px;
  color:#d3defb;
}

pre.mermaid{
  margin:0;
  padding:12px;
  background:rgba(0,0,0,0.22);
  overflow:auto;
}

pre.fallback{
  margin:0;
  padding:12px;
  display:none;
  background:rgba(0,0,0,0.32);
  color:#ccdafd;
  overflow:auto;
}

.note{
  border-left:4px solid var(--accent);
  background:rgba(110,168,255,0.10);
  padding:10px 12px;
  border-radius:8px;
  color:#d9e6ff;
}

footer:not(.protocol-global-footer){
  max-width:1150px;
  margin:0 auto 35px auto;
  padding:0 18px;
  color:#9fb1dd;
}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag.highlight{background:rgba(110,168,255,0.2);border-color:var(--accent)}
code{background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:4px;font-size:inherit;line-height:inherit}
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px}
.benefit-item{border:1px solid var(--line);border-radius:12px;padding:16px;background:rgba(255,255,255,0.02)}
.benefit-icon{font-size:28px;display:block;margin-bottom:8px}
.benefit-item h3{margin:0 0 8px 0;font-size:17px}
.code-block{background:rgba(0,0,0,0.35);padding:12px;border-radius:8px;overflow-x:auto;font-size:1em;line-height:1.55;margin:10px 0;font-family:Consolas,"Segoe UI Mono","Courier New",monospace}
.small{font-size:12px;color:#8a9cc7}

.hero-img{
  width:100%;
  max-width:900px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border-radius:12px;
  border:1px solid var(--line);
}

.unit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-top:16px;
}

.unit-card{
  display:block;
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  text-decoration:none;
  color:inherit;
  transition:border-color .2s,background .2s;
}

.unit-card:hover{
  border-color:var(--accent);
  background:rgba(110,168,255,0.08);
}

.unit-icon{font-size:32px;display:block;margin-bottom:8px}
.unit-card h3{margin:0 0 8px 0;font-size:17px}
.unit-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}

/* Layout with left sidebar */
.layout-with-sidebar{
  display:flex;
  min-height:calc(100vh - 52px);
}

.sidebar{
  width:220px;
  flex-shrink:0;
  padding:20px 0 20px 20px;
  border-right:1px solid var(--line);
  background:rgba(0,0,0,0.15);
}

.sidebar-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--muted);
  margin:0 0 12px 12px;
  padding-bottom:6px;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sidebar-nav a{
  display:block;
  padding:10px 14px;
  color:var(--muted);
  text-decoration:none;
  border-radius:8px;
  font-size:14px;
  transition:background .2s,color .2s;
}

.sidebar-nav a:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text);
}

.sidebar-nav a.active{
  background:rgba(110,168,255,0.15);
  color:var(--accent);
}

.main-with-sidebar{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.main-with-sidebar .hero,
.main-with-sidebar .container{
  max-width:100%;
}

/* Protocol + FS docs — full viewport-width bar (below sidebar + main) */
footer.protocol-global-footer,
.protocol-global-footer{
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 22px 18px 32px;
  border-top: 1px solid var(--line);
  background: rgba(8, 13, 27, 0.35);
  text-align: center;
  font-size: 13px;
  color: #8a9cc7;
  letter-spacing: 0.04em;
  clear: both;
}
.protocol-global-footer p{
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
  display: block;
}
.protocol-footer-note{
  margin: 28px auto 0 auto;
  padding: 0 18px 8px;
  color: #9fb1dd;
  text-align: center;
  font-size: 14px;
}

/* FS pages: avoid forcing layout to ~100vh — otherwise footer sits always below first screen */
body.fs-docs .layout-with-sidebar{
  min-height: 0;
}