:root {
  --bg:#050505;
  --panel:#090909;
  --border:#252525;
  --text:#ccc;
  --muted:#707070;
  --white:#eee;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); }
body {
  font-family:"Courier New",Courier,monospace;
  font-size:13px;
  line-height:1.45;
}
a { color:#ccc; text-decoration:none; }
a:hover { color:#fff; text-decoration:underline; }
.site { width:min(1180px,calc(100% - 28px)); margin:0 auto; }
.topline { height:3px; background:#31d17c; margin-top:12px; }

header {
  border:1px solid var(--border);
  border-top:0;
  background:var(--panel);
}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  gap:20px;
}
.brand {
  font-size:24px;
  font-weight:bold;
  letter-spacing:-1px;
  color:#eee;
}
.brand span { color:#666; }
.tagline { color:#777; font-size:11px; margin-top:3px; }

nav { display:flex; flex-wrap:wrap; justify-content:flex-end; }
nav a {
  padding:7px 10px;
  border-left:1px solid var(--border);
  font-size:12px;
}
nav a:hover { background:#111; text-decoration:none; }

.breadcrumb {
  border:1px solid var(--border);
  border-top:0;
  padding:7px 10px;
  color:#777;
  background:#080808;
}
.breadcrumb a { color:#888; }

main { margin-top:12px; }
.section {
  border:1px solid var(--border);
  margin-bottom:12px;
  background:var(--panel);
}
.section-title {
  background:#101010;
  border-bottom:1px solid var(--border);
  padding:7px 10px;
  color:#ddd;
  font-weight:bold;
}
.section-body { padding:12px; }

.hero {
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #070707;
  background-size:24px 24px;
}
.hero h1 { margin:0 0 8px; font-size:28px; color:#eee; }
.hero p { max-width:720px; color:#888; margin:0; }

.columns { display:grid; grid-template-columns:1fr 330px; gap:12px; }

.file-list { width:100%; border-collapse:collapse; }
.file-list th {
  text-align:left;
  color:#777;
  font-weight:normal;
  border-bottom:1px solid var(--border);
  padding:7px 8px;
}
.file-list td {
  padding:7px 8px;
  border-bottom:1px solid #181818;
}
.file-list tr:hover td { background:#0e0e0e; }
.meta { color:#666; white-space:nowrap; }
.dir { color:#aaa; }
.notice {
  border:1px dashed #333;
  padding:10px;
  color:#777;
  background:#080808;
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);
}
.stat { padding:12px; border-right:1px solid var(--border); }
.stat:last-child { border-right:0; }
.stat b { display:block; color:#eee; font-size:18px; }
.stat span { color:#666; font-size:11px; }

.prose { max-width:900px; }
.prose h1,.prose h2,.prose h3 { color:#eee; }
.prose code {
  background:#111;
  border:1px solid #252525;
  padding:1px 4px;
}
.prose pre {
  background:#080808;
  border:1px solid #252525;
  padding:12px;
  overflow:auto;
}
.prose pre code { border:0; padding:0; }
.prose blockquote {
  border-left:2px solid #444;
  margin-left:0;
  padding-left:12px;
  color:#888;
}
.prose img { max-width:100%; height:auto; }
.prose table { border-collapse:collapse; max-width:100%; }
.prose th,.prose td { border:1px solid #252525; padding:6px 8px; }

footer {
  border-top:1px solid var(--border);
  padding:18px 4px 30px;
  color:#555;
  font-size:11px;
}

@media(max-width:760px) {
  .header-inner { align-items:flex-start; flex-direction:column; }
  nav { justify-content:flex-start; }
  .columns { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; }
  .stat { border-right:0; border-bottom:1px solid var(--border); }
  .file-list { font-size:12px; }
}


/* Sidebar layout */
body { overflow-x:hidden; }

.app-shell {
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  min-height:100vh;
}

.sidebar {
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  border-right:1px solid var(--border);
  background:#060606;
}

.sidebar-header {
  padding:18px 18px 14px;
  border-bottom:1px solid var(--border);
}

.sidebar-title {
  color:#31d17c;
  font-weight:bold;
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
}

.sidebar-title::before { content:"› "; }

.sidebar-subtitle {
  margin-top:7px;
  color:#626262;
  font-size:10px;
}

.sidebar-tree { padding:12px 0 18px; }
.sidebar-group { border-bottom:1px solid #151515; }

.sidebar-group-title {
  padding:12px 18px 8px;
  color:#696969;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.sidebar-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  color:#bcbcbc;
  border-left:2px solid transparent;
}

.sidebar-link:hover {
  background:#0b0b0b;
  border-left-color:#31d17c;
  color:#fff;
  text-decoration:none;
}

.sidebar-link.active {
  color:#31d17c;
  background:#090909;
  border-left-color:#31d17c;
}

.sidebar-icon {
  width:18px;
  display:inline-block;
  color:#6f7785;
  text-align:center;
  flex:0 0 18px;
}

.sidebar-link.active .sidebar-icon,
.sidebar-home .sidebar-icon { color:#31d17c; }

.sidebar-nested { padding-left:18px; }

.sidebar-nested .sidebar-link {
  padding-top:8px;
  padding-bottom:8px;
  font-size:12px;
}

.sidebar-footer {
  padding:14px 18px;
  color:#444;
  font-size:10px;
}

.main-column { min-width:0; }
.main-column .site { width:min(1420px,calc(100% - 28px)); }

@media(max-width:900px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar {
    position:relative;
    height:auto;
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .sidebar-tree {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sidebar-group { border-right:1px solid #151515; }
  .main-column .site { width:min(1180px,calc(100% - 20px)); }
}

@media(max-width:600px) {
  .sidebar-tree { grid-template-columns:1fr; }
}

/* Sidebar v2 */
.sidebar {
  display:flex;
  flex-direction:column;
}

.sidebar-tree {
  flex:1 1 auto;
}

.sidebar-status {
  margin-top:auto;
  padding:14px 18px;
  border-top:1px solid #151515;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.sidebar-status-label {
  color:#666;
  font-size:10px;
  letter-spacing:.14em;
}

.sidebar-status-value {
  color:#31d17c;
  font-weight:bold;
  font-size:11px;
  letter-spacing:.08em;
}

.stat-link {
  display:block;
  text-decoration:none;
}

.stat-link:hover {
  background:#0d0d0d;
  text-decoration:none;
}

.stat-link:hover b {
  color:#31d17c;
}

/* Sidebar path indentation */
.sidebar-depth-0 { padding-left:18px; }
.sidebar-depth-1 { padding-left:36px; }
.sidebar-depth-2 { padding-left:54px; }
.sidebar-depth-3 { padding-left:72px; }
.sidebar-depth-4 { padding-left:90px; }
.sidebar-depth-5 { padding-left:108px; }

@media(max-width:900px) {
  .sidebar-depth-0 { padding-left:18px; }
  .sidebar-depth-1 { padding-left:30px; }
  .sidebar-depth-2 { padding-left:42px; }
  .sidebar-depth-3 { padding-left:54px; }
  .sidebar-depth-4 { padding-left:66px; }
  .sidebar-depth-5 { padding-left:78px; }
}

/* Folder and file icons */
.site-icon {
  display:block;
  width:16px;
  height:16px;
  object-fit:contain;
  flex:0 0 16px;
}

.site-icon-file {
  width:14px;
  height:16px;
}

.sidebar-icon {
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}

.entry-icon {
  width:24px;
  min-width:24px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  vertical-align:middle;
}

.file-list a.dir,
.file-list a.file {
  display:inline-flex;
  align-items:center;
  min-height:18px;
}

/* Fixed desktop header + scrollable content pane */
@media (min-width:901px) {
  html,
  body {
    height:100%;
    overflow:hidden;
  }

  .app-shell {
    height:100vh;
    min-height:0;
  }

  .main-column {
    height:100vh;
    min-height:0;
    overflow:hidden;
  }

  .main-column .site {
    height:100vh;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .topline,
  header,
  .breadcrumb {
    flex:0 0 auto;
  }

  main {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    margin-top:12px;
    padding-bottom:28px;
    scrollbar-gutter:stable;
  }
}