:root{
  --bg: #0e1117;
  --panel: #111521;
  --panel-2:#0b0e16;
  --ring:#263147;
  --text:#e6edf3;
  --muted:#a5b1c2;
  --accent:#89b4ff;
  --accent-2:#b894ff;
  --btn:#1a2340;
  --btn-h:#223057;
  --code-bg:#0b0e16;
}

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

#app{min-height:100dvh;display:flex;flex-direction:column}

.topbar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  padding:16px 20px;border-bottom:1px solid var(--ring);background:var(--panel);
  position:sticky;top:0;z-index:5;
}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{margin:0;font-size:22px;letter-spacing:.2px}
.badge{
  padding:3px 10px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0e16;
  font-weight:800;letter-spacing:.3px
}

.tabs{display:flex;gap:8px;margin-left:auto}
.tab{
  appearance:none;border:1px solid var(--ring);background:var(--panel-2);color:var(--text);
  padding:8px 12px;border-radius:10px;cursor:pointer
}
.tab:hover{background:#12182a}
.tab.is-active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(137,180,255,.15) inset}

.intro{padding:14px 20px;border-bottom:1px dashed var(--ring);background:linear-gradient(180deg,transparent,#0b0e1608)}
.intro .note{color:var(--muted);margin:.4rem 0 0}

/* =========================
   LAYOUT: full-page viewer
   ========================= */
.layout{
  flex:1;
  display:flex;              /* default: single column */
  flex-direction:column;
  gap:16px;
  padding:16px 20px;
  min-height:0;              /* allow children to flex/scroll */
}

/* In Source mode: show sidebar + viewer */
#app.mode-source .layout{
  display:grid;
  grid-template-columns: 320px 1fr;
}

.sidebar{
  border:1px solid var(--ring);border-radius:12px;background:var(--panel);
  overflow:auto;min-height:200px
}
.sidebar-head{padding:10px;border-bottom:1px solid var(--ring)}
#fileSearch{
  width:100%;padding:10px;border-radius:10px;border:1px solid var(--ring);
  background:var(--panel-2);color:var(--text);outline:none
}
.file-list{list-style:none;margin:0;padding:8px}
.file-list li{margin:4px 0}
.file-list button{
  width:100%;text-align:left;padding:8px 10px;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--text);cursor:pointer
}
.file-list button:hover{background:#12182a;border-color:var(--ring)}
.file-list button.active{border-color:var(--accent);background:#111a30}

/* Viewer fills available height */
.viewer{
  border:1px solid var(--ring);border-radius:12px;background:var(--panel);
  display:flex;flex-direction:column;
  min-height:0;    /* critical for flex/grid parents */
  height:100%;
}
.viewer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--ring);background:var(--panel-2);
  flex:0 0 auto;
}
.path{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;gap:8px}
.btn{
  appearance:none;border:1px solid var(--ring);background:var(--btn);color:var(--text);
  padding:8px 12px;border-radius:10px;cursor:pointer
}
.btn:hover{background:var(--btn-h)}

/* Code area takes the rest of the page */
.viewer-body{
  padding:12px 12px 16px;
  overflow:auto;
  flex:1 1 auto;
  min-height:0;
}
.codewrap{
  margin:0;border-radius:10px;background:var(--code-bg);border:1px solid var(--ring);padding:12px;overflow:auto
}
.codeblock{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13.5px;line-height:1.5;tab-size:4;white-space:pre
}

/* tiny “syntax” pop for readability (pure CSS + <span> marks added by JS) */
.codeblock .kw{color:#91caff;font-weight:700}
.codeblock .type{color:#b3f6c0}
.codeblock .str{color:#ffd699}
.codeblock .com{color:#6b7a90;font-style:italic}

.footer{padding:16px 20px;border-top:1px dashed var(--ring);color:var(--muted)}
.footer .muted{color:var(--muted);text-decoration:none}
.footer .muted:hover{text-decoration:underline}

/* Responsive: Source mode collapses to one column; viewer still full-page */
@media (max-width: 860px){
  #app.mode-source .layout{grid-template-columns: 1fr}
}