:root {
  --bg:#0b0c10; --fg:#e5e7eb; --muted:#9aa0a6; --accent:#f97316;
  --surface:#1f2937; --border:#2f3b52; --maxw:980px;
}
@font-face { font-family: 'MontserratBold'; src: url('/assets/fonts/Montserrat-Bold.ttf?v=2') format('truetype'); font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family: 'MontserratMedium'; src: url('/assets/fonts/Montserrat-Medium.ttf?v=2') format('truetype'); font-weight:500; font-style:normal; font-display:swap }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.container{max-width:var(--maxw);margin:0 auto;padding:16px}

/* Header */
.site-header{border-bottom:1px solid var(--border);background:var(--surface)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{height:48px;display:block}
.site-nav{display:flex;align-items:center;gap:16px}
.site-nav .nav-group{position:relative}
.nav-toggle,.nav-single{color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0;font-weight:500}
.nav-toggle:hover,.nav-single:hover{color:var(--accent)}
.nav-group .caret{font-size:0.75rem;line-height:1}
.dropdown{position:absolute;top:100%;left:0;background:var(--surface);border:1px solid var(--border);border-radius:0.35rem;list-style:none;padding:0.4rem 0;margin:0;min-width:220px;box-shadow:0 10px 22px rgba(0,0,0,.45);display:none;z-index:50}
.nav-group.visible:hover .dropdown{display:block}
.dropdown-item{display:none}
.dropdown-item.visible{display:block}
.dropdown-item a{display:block;padding:0.35rem 0.85rem;color:var(--fg);text-decoration:none}
.dropdown-item a:hover{background:rgba(249,115,22,.12);color:var(--accent)}

/* Content */
.content h1,.content h2,.content h3{font-family:MontserratBold,system-ui;-webkit-font-smoothing:antialiased}
.content h1{font-size:2rem;margin:.5rem 0}
.content h2{font-size:1.4rem;margin:1rem 0 .5rem}
.content h3{font-size:1.1rem;margin:1rem 0 .25rem}
.content p, .content li{line-height:1.6;color:var(--fg)}
.content a{color:var(--accent);text-decoration:none}
.content a:hover{text-decoration:underline}
pre{background:#111827;border:1px solid var(--border);border-radius:6px;padding:12px;overflow:auto}
code{background:#111827;border-radius:4px;padding:2px 4px}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--surface);margin-top:48px}
.footer-inner{display:flex;justify-content:center}
.footer-inner a{color:var(--muted)}
.footer-inner a:hover{color:#f97316}

/* Simple hero (first h1 section) */
.content > h1:first-child{margin-top:12px}
@media (max-width:720px){ .site-nav a{margin-left:10px} .brand img{height:40px} }
/* Icons */
.icon{width:1.1em;height:1.1em;vertical-align:-0.1em;stroke:currentColor;stroke-width:2;fill:none;margin-right:.4em}
.icon-badge .icon{color:#f97316}
.badge{display:inline-block;padding:.15rem .4rem;border-radius:.35rem;border:1px solid var(--border);color:var(--muted);font-size:.72rem}
.badge-preview{color:#f97316;border-color:#f97316}
/* Auth overlay (simulated gating) */
.overlay-auth{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:999}
.overlay-auth.show{display:block}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;max-width:420px;margin:10vh auto;padding:16px}
.auth-card h3{margin:.2rem 0 1rem;font-family:MontserratBold}
.auth-row{margin-bottom:.75rem}
.auth-row label{display:block;color:var(--muted);font-size:.9rem;margin-bottom:.25rem}
.auth-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.btn{display:inline-block;border:1px solid var(--border);background:transparent;color:var(--fg);padding:.35rem .7rem;border-radius:.35rem;text-decoration:none;cursor:pointer}
.btn-primary{border-color:var(--accent);color:var(--accent)}
.btn:hover{filter:brightness(1.1)}
.small-muted{color:var(--muted);font-size:.78rem}

.auth-card{box-shadow:0 8px 24px rgba(0,0,0,.35)}

.site-nav img.icon{filter:brightness(0) invert(1);}

.gating-pending .content, .gating-pending .site-nav, .gating-pending .site-footer{visibility:hidden;}

/* Modal System */
.modal-overlay {
  display: none;
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.modal-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  pointer-events: auto;
  animation: modalFadeIn 0.15s ease-out;
}

/* Content-aware modal sizing */
.modal-standard {
  max-width: 400px;
  min-width: 300px;
}

.modal-legal {
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: #1a1a1a;
  border: 2px solid #f97316;
  padding: 2rem;
}

.modal-chart {
  max-width: 500px;
  min-width: 350px;
}

.modal-wide {
  max-width: 600px;
  min-width: 450px;
}

.modal-large {
  max-width: 700px;
  min-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content {
  padding: 16px 20px;
  color: var(--fg);
}

.modal-content h3 {
  margin: 0 0 12px 0;
  font-family: MontserratBold, system-ui;
  font-size: 1.1rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.modal-body {
  line-height: 1.5;
  color: var(--fg);
}

.modal-body table {
  margin: 12px 0;
  font-size: 0.9rem;
}

.modal-body pre {
  margin: 12px 0;
  font-size: 0.85rem;
}

.modal-body .mermaid {
  margin: 12px 0;
  background: transparent;
}

/* Modal Link Styling */
.modal-link {
  color: var(--accent) !important;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}

.modal-link:hover {
  color: #fb923c !important;
  border-bottom-style: solid;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Embedded Content Styles */
.content-embed {
  margin: 1.5rem 0;
  padding: 1rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  overflow-x: auto;
}

.content-embed.size-small {
  max-width: 300px;
  padding: 0.75rem;
}

.content-embed.size-medium {
  max-width: 500px;
}

.content-embed.size-large {
  max-width: 100%;
  padding: 1.5rem;
}

.content-embed .mermaid {
  background-color: transparent;
  text-align: center;
  margin: 0.5rem 0;
}

.content-embed table {
  width: 100%;
  margin: 0;
}

.content-embed p:last-child {
  margin-bottom: 0;
}

/* Responsive modal positioning */
@media (max-width: 600px) {
  .modal-container {
    max-width: 90vw;
    min-width: 250px;
  }

  .content-embed {
    padding: 0.75rem;
    margin: 1rem 0;
  }

  .content-embed.size-large {
    padding: 1rem;
  }
}