:root{
  --topbarH: 57px;

  --bg: #0b0f14;
  --surface: #101823;
  --surface2:#0d141d;
  --border:#233244;

  --text:#e6edf3;
  --muted:#9db0c6;

  --accent:#4da3ff;
  --accent2:#7c5cff;

  --btn:#142131;
  --btnHover:#1a2b40;
  --btnPrimary:#1c3b66;
  --btnPrimaryHover:#244a82;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.muted{ color: var(--muted); }

.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background: var(--surface);
  z-index: 999;
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background: var(--surface2);
  position: sticky; top:0; z-index: 50;
}
.brand{ display:flex; align-items:center; gap:12px; min-width: 0; }
.badge{
  border:1px solid var(--border);
  background: var(--surface);
  padding:6px 10px;
  border-radius:999px;
  font-weight: 800;
  letter-spacing: .2px;
}
.brandText{ min-width:0; }
.title{ font-size: 16px; font-weight: 800; }
.subtitle{ color: var(--muted); font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 52vw; }

.topbarRight{ display:flex; align-items:center; gap:10px; }

.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}

/* Shell layout */
.shell{
  display:grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100dvh - var(--topbarH));
}

/* Sidebar */
.sidebar{
  border-right:1px solid var(--border);
  background: var(--surface2);
  position: relative;
}
.sidebarInner{
  padding:14px;
  position: sticky;
  top: var(--topbarH);
  height: calc(100dvh - var(--topbarH));
  overflow:auto;
}
.sidebarHeader{
  color: var(--muted);
  font-weight: 800;
  letter-spacing:.2px;
  margin-bottom: 10px;
}
.fileList{ display:flex; flex-direction:column; gap:8px; }

.fileLink{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--surface);
  color: inherit;
  text-decoration:none;
}
.fileLink:hover{ border-color: rgba(77,163,255,.55); }
.fileLink[aria-current="page"]{
  border-color: rgba(77,163,255,.9);
  box-shadow: 0 0 0 2px rgba(77,163,255,.15);
}
.fileName{ font-weight: 800; }
.fileHint{ color: var(--muted); font-size: 13px; }

.hr{
  border:0; height:1px;
  background: var(--border);
  margin: 14px 0;
}

.helpTitle{ margin:0 0 6px 0; font-size: 14px; }
.helpList{ margin:0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.details{ margin-top: 10px; color: var(--muted); }
.details summary{ cursor:pointer; }
.details code{ color: var(--text); }

/* Main */
.main{
  padding: 16px;
  min-width: 0;
}
.panel{
  border:1px solid var(--border);
  border-radius: 16px;
  background: var(--surface2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panelHeader{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.fileMeta{ min-width: 0; }
.fileTitle{ font-weight: 900; font-size: 16px; }
.fileSub{ color: var(--muted); font-size: 13px; }

.actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; flex-wrap:wrap;
}
.field{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}
.fieldLabel{ color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing:.2px; }
.field input{
  border:0; outline:0; background: transparent;
  color: var(--text); width: 180px;
}
.btnGroup{ display:flex; align-items:center; gap:6px; }
.mini{ color: var(--muted); font-size: 12px; min-width: 28px; text-align:center; }

.btn, .iconBtn{
  appearance:none;
  border:1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover, .iconBtn:hover{ background: var(--btnHover); }
.btn.primary{
  background: var(--btnPrimary);
  border-color: rgba(77,163,255,.35);
}
.btn.primary:hover{ background: var(--btnPrimaryHover); }
.btn.ghost{
  background: transparent;
}
.icon{ font-size: 16px; line-height: 1; }
.iconBtnText{ font-weight: 800; }

.btn:focus-visible, .iconBtn:focus-visible, .fileLink:focus-visible, .codeBox:focus-visible, .field:focus-within{
  outline: 2px solid rgba(77,163,255,.75);
  outline-offset: 2px;
}

.panelBody{
  padding: 14px;
}

/* Code viewer */
.codeBox{
  margin:0;
  border:1px solid var(--border);
  border-radius: 14px;
  background: #070b10;
  overflow:auto;
  max-height: calc(100dvh - 220px);
}
.codeArea{
  display:block;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  tab-size: 4;
  white-space: pre;
  font-variant-ligatures: none;
  counter-reset: line;
}

/* per-line wrapper for line numbers */
.line{
  display:block;
  padding-left: 3.5rem;
  position: relative;
}
.line::before{
  counter-increment: line;
  content: counter(line);
  position:absolute;
  left:0;
  width: 2.8rem;
  text-align:right;
  padding-right:.7rem;
  color: rgba(157,176,198,.65);
  user-select:none;
  border-right: 1px solid rgba(35,50,68,.8);
}

.wrapOn .codeArea{ white-space: pre-wrap; word-break: break-word; }
.wrapOn .line{ white-space: inherit; }

.line.hit{ background: rgba(77,163,255,.08); }
.line.hit.current{ background: rgba(124,92,255,.14); }

/* syntax (minimal) */
.kw{ color: #7fbfff; font-weight: 800; }
.type{ color: #a8e6b7; }
.str{ color: #ffd28a; }
.com{ color: #7f93aa; font-style: italic; }

.footer{
  padding: 12px 2px;
  color: var(--muted);
  font-size: 13px;
}
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--text);
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  color: var(--text);
  z-index: 999;
}
.toast.show{ opacity: 1; }

/* Mobile: off-canvas sidebar */
.sidebarBackdrop{
  display:none;
}
@media (max-width: 920px){
  .shell{ grid-template-columns: 1fr; }

  .sidebar{
    position: fixed;
    top: var(--topbarH);
    left: 0;
    width: min(88vw, 340px);
    height: calc(100dvh - var(--topbarH));
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 80;
    box-shadow: var(--shadow);
  }
  .sidebar.open{ transform: translateX(0); }
  .sidebarInner{ position: static; height: 100%; }

  .sidebarBackdrop{
    display:block;
    position: fixed;
    inset: var(--topbarH) 0 0 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 70;
  }
  .sidebarBackdrop.show{
    opacity: 1;
    pointer-events: auto;
  }

  .subtitle{ max-width: 44vw; }
  .field input{ width: 140px; }
}



/* Grouped file nav */
.group{
  margin-bottom: 14px;
}
.groupHeader{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin: 12px 0 8px 0;
}
.groupTitle{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.groupDesc{
  color: var(--muted);
  font-size: 12px;
}

/* File row (name + tag) */
.fileRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Header meta row (title + tag) */
.fileTitleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Small tags */
.tag{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--muted);
  background: rgba(157,176,198,.10);
}
.tag.required{
  color: var(--text);
  border-color: rgba(77,163,255,.35);
  background: rgba(77,163,255,.14);
}
.tag.example{
  color: var(--text);
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.14);
}

.filePath{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .9;
}