/* Dark navy / dull gold */
:root {
  --bg-page:      #090d18;
  --bg-panel:     #0d1220;
  --bg-secondary: #111827;
  --bg-tertiary:  #1a2237;

  --gold:         #b8960c;
  --gold-light:   #d4aa1a;
  --gold-dark:    #8a6e08;
  --gold-text:    #c9a827;

  --text:         #c4cad8;
  --text-sub:     #7a8fa8;
  --text-muted:   #3f5068;

  --border-gold:   1px solid #b8960c;
  --border-subtle: 1px solid #1c2d45;
  --border-panel:  1px solid #243050;

  --font:    'Courier New', Courier, monospace;
  --font-hd: Georgia, 'Times New Roman', serif;
  --pad:     12px 16px;
  --gap:     8px;
}
/* ── Reset */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background-color: var(--bg-page);
  background-attachment: fixed;
  color: var(--text);
  cursor: default;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  min-height: 100vh;
}
a               { color:var(--gold-text); text-decoration:none; }
a:hover         { color:var(--gold-light); text-decoration:underline; }
code            { color:var(--gold-text); font-family:var(--font); }
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-page); }
::-webkit-scrollbar-thumb { background:#2a3a55; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dark); }
/* ── Wrapper */
.site-wrapper { max-width:1080px; margin:0 auto; padding:12px; }
/* ── Header */
.site-header   { margin-bottom:var(--gap); }
.header-banner {
  background:var(--bg-panel); border:var(--border-gold); border-bottom:none;
  padding:14px 20px; display:flex; align-items:baseline; gap:14px;
}
.header-title  { font-family:var(--font-hd); font-size:26px; color:var(--gold-text); letter-spacing:3px; text-transform:uppercase; }
.header-sub    { font-size:11px; color:var(--text-sub); letter-spacing:1px; }
/* ── Nav */
.site-nav { background:var(--bg-secondary); border:var(--border-gold); display:flex; align-items:stretch; height:36px; }
.site-nav a {
  display:flex; align-items:center; padding:0 15px;
  color:var(--text-sub); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  border-right:var(--border-panel); transition:background .12s, color .12s;
}
.site-nav a:hover  { background:var(--bg-tertiary); color:var(--gold-text); text-decoration:none; }
.site-nav a.active { background:var(--bg-tertiary); color:var(--gold-text); border-bottom:2px solid var(--gold); }
/* ── Layout grid */
.layout-grid           { display:grid; grid-template-columns:210px 1fr; gap:var(--gap); align-items:start; }
.layout-grid.no-sidebar { grid-template-columns:1fr; }
/* ── Panel */
.panel        { background:var(--bg-panel); border:var(--border-gold); margin-bottom:var(--gap); }
.panel-header {
  background:var(--bg-secondary); border-bottom:var(--border-gold);
  padding:6px 12px; font-size:10px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gold-text); display:flex; justify-content:space-between; align-items:center;
}
.ph-right  { color:var(--text-muted); font-size:10px; letter-spacing:.5px; }
.panel-body { padding:var(--pad); }
/* ── Sidebar */
.stat-row                { display:flex; justify-content:space-between; padding:4px 0; border-bottom:var(--border-subtle); font-size:12px; }
.stat-row:last-child     { border-bottom:none; }
.stat-label              { color:var(--text-sub); }
.stat-val                { color:var(--gold-text); font-weight:bold; }
/* ── Shoutbox */
.shoutbox-feed  { max-height:190px; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:5px; }
.shout          { font-size:12px; line-height:1.4; }
.shout-name     { color:var(--gold-text); font-weight:bold; margin-right:3px; }
.shout-time     { color:var(--text-muted); font-size:10px; margin-left:3px; }
.shout-name.is-dave { animation:glitch 2.5s infinite; }
.shoutbox-form  { border-top:var(--border-panel); padding:7px 10px; display:flex; gap:5px; overflow:hidden; }
.shout-notice   { padding:4px 12px; font-size:11px; color:var(--gold-text); border-top:var(--border-subtle); }
.shout-err      { padding:4px 12px; font-size:11px; color:#c05050; border-top:var(--border-subtle); }
.hidden         { display:none !important; }
/* ── Inputs & buttons */
input[type="text"], input[type="password"], textarea, select {
  background:var(--bg-tertiary); border:var(--border-panel);
  color:var(--text); font-family:var(--font); font-size:12px; padding:4px 8px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  outline:none; border-color:var(--gold-dark);
}
textarea { resize:vertical; width:100%; min-height:80px; }
.btn    {
  background:var(--bg-tertiary); border:var(--border-gold); color:var(--gold-text);
  font-family:var(--font); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:4px 12px; cursor:pointer; white-space:nowrap; transition:background .12s, color .12s;
}
.btn:hover  { background:var(--bg-secondary); color:var(--gold-light); }
.btn.btn-sm { padding:3px 9px; font-size:10px; }
/* ── Content typography */
.content-body p              { margin-bottom:10px; }
.content-body p:last-child   { margin-bottom:0; }
.content-body h2             { color:var(--gold-text); font-size:13px; letter-spacing:1.2px; text-transform:uppercase; border-bottom:var(--border-subtle); padding-bottom:4px; margin:14px 0 8px; }
.content-body h2:first-child { margin-top:0; }
.content-body h3             { color:var(--text); font-size:13px; margin-bottom:5px; }
.content-body ul             { padding-left:16px; margin-bottom:10px; }
.content-body li             { margin-bottom:3px; }
.content-body hr             { border:none; border-top:var(--border-subtle); margin:12px 0; }
.content-body a              { color:var(--gold-text); }
/* ── footer */
.site-footer   { background:var(--bg-secondary); border:var(--border-panel); margin-top:var(--gap); padding:7px 16px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-muted); }
.site-footer a { color:var(--text-muted); }
.site-footer a:hover { color:var(--gold-text); text-decoration:none; }
/* ── utility */
.gold  { color:var(--gold-text); }
.muted { color:var(--text-muted); }
.sub   { color:var(--text-sub); }
.txt-sm { font-size:11px; }
.txt-xs { font-size:10px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.mt { margin-top:var(--gap); }
/* ── shoutbox glitch */
@keyframes glitch {
  0%,88%,100% { text-shadow:none; letter-spacing:0; }
  90%  { text-shadow:-2px 0 #ff0040, 2px 0 #00ffef; letter-spacing:2px; }
  92%  { text-shadow: 2px 0 #ff0040,-2px 0 #00ffef; letter-spacing:0;   }
  94%  { text-shadow:-1px 0 #ff0040, 1px 0 #00ffef; }
}
/* ── 88×31 buttons */
.site-buttons           { display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; }
.site-buttons a         { line-height:0; }
.site-buttons a img     { display:block; border:1px solid var(--border-panel); width:88px; height:31px; image-rendering:pixelated; }
.site-buttons a:hover img { border-color:var(--gold); }
/* ── posts */
.post-panel             { }
.post-title             { font-family:var(--font-hd); font-size:17px; color:var(--text); margin-bottom:5px; line-height:1.3; }
.post-meta              { display:flex; align-items:center; flex-wrap:wrap; gap:2px; font-size:11px; color:var(--text-muted); margin-bottom:12px; border-bottom:var(--border-subtle); padding-bottom:8px; }
.post-author            { color:var(--gold-text); }
.post-sep               { color:var(--text-muted); }
.post-icon-btn          { background:none; border:none; cursor:pointer; font-size:14px; padding:0 2px; color:var(--text-sub); line-height:1; }
.post-icon-btn:hover    { color:var(--gold-text); }
.post-body              { color:var(--text); font-size:13px; line-height:1.65; }
.post-img               { max-width:100%; border:var(--border-panel); display:block; margin:8px 0; }
.post-audio             { width:100%; margin:8px 0; display:block; }
.post-video             { max-width:100%; border:var(--border-panel); display:block; margin:8px 0; }
/* ── File modal */
.file-modal             { position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:200; }
.file-modal.hidden      { display:none; }
.file-modal-box         { width:min(480px,90vw); max-height:80vh; overflow-y:auto; }
.file-row               { display:flex; align-items:center; gap:12px; padding:8px 14px; border-bottom:var(--border-subtle); }
.file-row:last-child    { border-bottom:none; }
.file-info              { flex:1; min-width:0; }
.file-name              { display:block; color:var(--text); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-meta              { display:block; color:var(--text-muted); font-size:10px; margin-top:2px; }
/* ── Link toast */
.link-toast             { position:fixed; bottom:20px; right:20px; background:var(--bg-secondary); border:var(--border-gold); padding:7px 16px; color:var(--gold-text); font-size:11px; letter-spacing:.5px; z-index:300; pointer-events:none; }
.link-toast.hidden      { display:none; }
/* ── Contact form ──────────────────────────────────────────────── */
.contact-intro    { color:var(--text-sub); font-size:12px; line-height:1.6;
                    margin-bottom:14px; padding-bottom:12px;
                    border-bottom:var(--border-subtle); }

.contact-form .form-row { margin-bottom:12px; }
.contact-form label     { display:block; color:var(--text-muted); font-size:9px;
                          letter-spacing:1.4px; text-transform:uppercase; margin-bottom:4px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea  { width:100%; box-sizing:border-box; padding:7px 10px;
                          font-family:var(--font); font-size:12px; }
.contact-form textarea  { resize:vertical; min-height:130px; line-height:1.6; }
.contact-form .invalid  { border-color:#5a2020; }
.contact-form .invalid:focus { border-color:#c06060; }

.cf-err           { color:#c06060; font-size:10px; line-height:1.4; min-height:0; }
.cf-err:not(:empty) { margin-top:4px; }
.cf-meta          { display:flex; align-items:flex-start; justify-content:space-between;
                    gap:10px; margin-top:4px; }
.cf-count         { color:var(--text-muted); font-size:10px; white-space:nowrap; }

/* Honeypot — off-screen rather than display:none, which some bots detect */
.cf-hp            { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-actions  { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                    border-top:var(--border-subtle); padding-top:12px; margin-top:4px; }
.cf-status        { font-size:11px; }
.cf-status.bad    { color:#c06060; }
.cf-status.good   { color:var(--gold-text); }

.cf-banner        { padding:8px 12px; font-size:12px; margin-bottom:14px;
                    border:var(--border-subtle); }
.cf-banner.good   { border-color:var(--gold-dark); color:var(--gold-text);
                    background:var(--bg-tertiary); }
.cf-banner.bad    { border-color:#5a2020; color:#c06060; background:var(--bg-panel); }

/* "you asked for /whatever" note on the 404 page */
.err-attempted    { margin-top:10px; padding:7px 11px; background:var(--bg-panel);
                    border:var(--border-subtle); color:var(--text-muted); font-size:11px;
                    word-break:break-all; }
.err-attempted code { color:var(--text-sub); }
/* ── Files table */
.files-table            { width:100%; border-collapse:collapse; font-size:12px; }
.files-table th         {
  background:var(--bg-secondary); border-bottom:var(--border-gold);
  padding:7px 10px; text-align:left; color:var(--gold-text);
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap;
}
.files-table th.num     { text-align:right; }
.files-table th.sortable { cursor:pointer; user-select:none; position:relative; }
.files-table th.sortable:hover { color:var(--gold-light); }
.files-table th.sortable::after { content:'\2195'; opacity:.35; margin-left:5px; font-size:9px; }
.files-table th.sort-asc::after  { content:'\2191'; opacity:1; }
.files-table th.sort-desc::after { content:'\2193'; opacity:1; }
.files-table td         { padding:6px 10px; border-bottom:var(--border-subtle); color:var(--text); vertical-align:top; }
.files-table tr:last-child td { border-bottom:none; }
.files-table tr:hover td { background:var(--bg-secondary); }
.files-table td.num     { text-align:right; color:var(--gold-text); white-space:nowrap; }
.files-table td.fname   { color:var(--text); word-break:break-all; }
.files-table .ext-tag   { display:inline-block; background:var(--bg-tertiary); border:var(--border-panel); padding:1px 6px; font-size:10px; text-transform:uppercase; color:var(--text-sub); }
.files-table .desc-col  { color:var(--text-sub); font-size:11px; min-width:120px; }
.files-table .dl-col    { text-align:right; white-space:nowrap; }
@media (max-width:640px) {
  .files-table .desc-col { display:none; }
}

/* ── File preview modal */
body.modal-open         { overflow:hidden; }
.prev-modal             { position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:400; padding:20px; }
.prev-modal.hidden      { display:none; }
.prev-box               { width:min(900px,95vw); max-height:88vh; display:flex; flex-direction:column; margin-bottom:0; }
.prev-box .panel-header { gap:12px; }
.prev-box .panel-header > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prev-dl                { font-size:10px; letter-spacing:1px; text-transform:uppercase; margin-right:10px; }
.prev-close             { background:none; border:none; color:var(--text-sub); font-family:var(--font); font-size:14px; line-height:1; cursor:pointer; padding:0 2px; }
.prev-close:hover       { color:var(--gold-light); }

.prev-tabs              { display:flex; gap:4px; background:var(--bg-secondary); border-bottom:var(--border-panel); padding:6px 10px 0; }
.prev-tab               { background:var(--bg-tertiary); border:var(--border-panel); border-bottom:none; color:var(--text-sub); font-family:var(--font); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; padding:5px 14px; cursor:pointer; }
.prev-tab:hover         { color:var(--gold-text); }
.prev-tab.active        { background:var(--bg-panel); color:var(--gold-text); border-color:var(--gold); }

.prev-body              { flex:1; min-height:0; overflow:auto; background:var(--bg-panel); }
.prev-pane.hidden       { display:none; }
.prev-loading           { padding:24px; text-align:center; color:var(--text-muted); font-size:12px; }
.prev-loading.hidden    { display:none; }
.prev-err               { padding:24px; text-align:center; color:#c05050; font-size:12px; }
.prev-note              { padding:6px 12px; font-size:10px; color:var(--text-muted); border-top:var(--border-subtle); }

.prev-frame             { width:100%; height:60vh; border:none; background:#fff; display:block; }
.prev-pre               { margin:0; padding:0; overflow:auto; max-height:70vh; background:var(--bg-page); }
.prev-pre code          { font-family:var(--font); font-size:12px; line-height:1.55; color:var(--text); display:block; white-space:pre; }
/* line-numbered code view */
.prev-code-wrap         { display:table; width:100%; }
.prev-line              { display:table-row; }
.prev-ln                { display:table-cell; width:1%; padding:0 10px 0 12px; text-align:right; color:var(--text-muted); background:var(--bg-panel); border-right:var(--border-subtle); user-select:none; white-space:nowrap; font-size:11px; vertical-align:top; }
.prev-lt                { display:table-cell; padding:0 14px 0 12px; white-space:pre-wrap; word-break:break-word; vertical-align:top; }
.prev-line:hover .prev-lt { background:var(--bg-secondary); }
.prev-line:hover .prev-ln { color:var(--gold-text); }

.prev-media-wrap        { display:flex; align-items:center; justify-content:center; padding:14px; min-height:120px; }
.prev-img               { max-width:100%; max-height:70vh; display:block; image-rendering:auto; }
.prev-video             { max-width:100%; max-height:70vh; display:block; }
.prev-audio             { width:100%; max-width:520px; display:block; }

@media (max-width:640px) {
  .prev-modal  { padding:8px; }
  .prev-frame  { height:50vh; }
}

/* ── Projects page ─────────────────────────────────────────────── */
.proj-grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
                  gap:12px; }

.proj-card      { border:var(--border-panel); background:var(--bg-secondary);
                  display:flex; flex-direction:column; transition:border-color .12s; }
.proj-card:hover { border-color:var(--gold-dark); }
.proj-card.hidden { display:none; }

/* The whole upper area is one button so the card is clickable */
.proj-open      { display:block; width:100%; text-align:left; padding:0;
                  background:none; border:none; cursor:pointer; font-family:var(--font);
                  color:inherit; }
.proj-open:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }

.proj-feature   { position:relative; background:var(--bg-page); border-bottom:var(--border-subtle);
                  aspect-ratio:16/10; overflow:hidden; }
.proj-feature img { width:100%; height:100%; object-fit:cover; display:block;
                    transition:opacity .12s; }
.proj-open:hover .proj-feature img { opacity:.82; }
.proj-feature-none { width:100%; height:100%; display:flex; align-items:center;
                     justify-content:center; color:var(--text-muted); font-size:10px;
                     letter-spacing:1.2px; text-transform:uppercase; }
.proj-shotcount { position:absolute; bottom:5px; right:5px; background:rgba(9,13,24,.85);
                  border:var(--border-subtle); color:var(--text-sub); font-size:9px;
                  letter-spacing:.8px; padding:2px 6px; }

.proj-card-body  { padding:9px 11px; }
.proj-card-title { font-family:var(--font-hd); font-size:15px; color:var(--gold-text);
                   font-weight:normal; letter-spacing:.8px; line-height:1.3; margin:0; }
.proj-open:hover .proj-card-title { color:var(--gold-light); }
.proj-card-brief { color:var(--text-sub); font-size:11px; line-height:1.5; margin-top:4px; }

.proj-card-tags  { display:flex; flex-wrap:wrap; gap:3px; padding:0 11px 9px; }

/* ── Project detail modal ──────────────────────────────────────── */
.proj-modal          { position:fixed; inset:0; background:rgba(5,8,15,.9); z-index:150;
                       display:flex; align-items:center; justify-content:center; padding:24px; }
.proj-modal.hidden   { display:none; }
.proj-modal-box      { width:min(820px,100%); max-height:calc(100vh - 48px);
                       display:flex; flex-direction:column; margin:0; }
.proj-modal-box .panel-header > span:first-child { overflow:hidden; text-overflow:ellipsis;
                                                   white-space:nowrap; }
.proj-modal-body     { padding:14px 16px; overflow-y:auto; flex:1; }
.proj-modal-foot     { border-top:var(--border-panel); display:flex; align-items:center;
                       justify-content:space-between; gap:10px; }
#proj-modal-visit.hidden { display:none; }

/* Detail content (reuses the old single-column styling) */
.proj-brief     { background:var(--bg-tertiary); border-left:2px solid var(--gold);
                  padding:6px 10px; font-size:12px; color:var(--text); margin-bottom:8px; }

.proj-tags      { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.proj-tag       { background:var(--bg-panel); border:var(--border-subtle); color:var(--text-sub);
                  font-size:10px; letter-spacing:.8px; text-transform:uppercase; padding:2px 8px;
                  font-family:var(--font); cursor:pointer; transition:color .12s, border-color .12s; }
.proj-tag:hover { color:var(--gold-text); border-color:var(--gold-dark); }
.proj-tag-static { background:var(--bg-panel); border:var(--border-subtle); color:var(--text-sub);
                   font-size:10px; letter-spacing:.8px; text-transform:uppercase; padding:2px 8px; }

.proj-shots     { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.proj-shot      { padding:0; background:none; border:var(--border-panel); cursor:pointer;
                  line-height:0; transition:border-color .12s; }
.proj-shot:hover     { border-color:var(--gold); }
.proj-shot img       { width:150px; height:100px; object-fit:cover; display:block; }

.proj-desc      { font-size:13px; color:var(--text); line-height:1.6; }

/* Filter bar */
.proj-filter        { display:flex; flex-wrap:wrap; align-items:center; gap:5px;
                      padding:8px 14px; border-bottom:var(--border-panel);
                      background:var(--bg-secondary); }
.proj-filter-label  { color:var(--text-muted); font-size:9px; letter-spacing:1.4px;
                      text-transform:uppercase; margin-right:4px; }
.proj-filter-tag    { background:var(--bg-panel); border:var(--border-subtle); color:var(--text-sub);
                      font-family:var(--font); font-size:10px; letter-spacing:.8px;
                      text-transform:uppercase; padding:3px 9px; cursor:pointer;
                      transition:color .12s, border-color .12s, background .12s; }
.proj-filter-tag:hover  { color:var(--gold-text); border-color:var(--gold-dark); }
.proj-filter-tag.active { color:var(--gold-text); border-color:var(--gold); background:var(--bg-tertiary); }
.pf-count           { color:var(--text-muted); }
.proj-filter-tag.active .pf-count { color:var(--gold-dark); }
.proj-empty         { color:var(--text-muted); font-size:12px; padding:8px 0; }
.proj-empty.hidden  { display:none; }

@media (max-width:520px) {
  .proj-grid    { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
  .proj-modal   { padding:10px; }
  .proj-shot img { width:calc(50vw - 40px); height:90px; }
}

/* Screenshot lightbox */
.shot-modal          { position:fixed; inset:0; background:rgba(5,8,15,.92); z-index:200;
                       display:flex; flex-direction:column; align-items:center; justify-content:center;
                       padding:36px 20px; }
.shot-modal.hidden   { display:none; }
.shot-modal img      { max-width:100%; max-height:calc(100vh - 110px); object-fit:contain;
                       border:var(--border-gold); background:var(--bg-page); }
.shot-modal img.loading { opacity:.25; }
.shot-modal img      { transition:opacity .12s; }
.shot-modal-cap      { color:var(--text-sub); font-size:11px; margin-top:8px; word-break:break-all;
                       text-align:center; display:flex; align-items:center; gap:10px;
                       justify-content:center; flex-wrap:wrap; }
.shot-count          { color:var(--gold-text); letter-spacing:1px; white-space:nowrap; }

/* Prev / next arrows */
.shot-nav            { position:absolute; top:50%; transform:translateY(-50%);
                       background:rgba(13,18,32,.85); border:var(--border-gold);
                       color:var(--gold-text); font-family:var(--font); font-size:20px;
                       line-height:1; padding:14px 12px; cursor:pointer; z-index:2;
                       transition:background .12s, color .12s; }
.shot-nav:hover      { background:var(--bg-tertiary); color:var(--gold-light); }
.shot-nav.hidden     { display:none; }
.shot-prev           { left:16px; }
.shot-next           { right:16px; }

@media (max-width:640px) {
  .shot-nav   { font-size:16px; padding:10px 8px; }
  .shot-prev  { left:6px; }
  .shot-next  { right:6px; }
}
.shot-modal-close    { position:absolute; top:12px; right:16px; background:none; border:var(--border-gold);
                       color:var(--gold-text); font-family:var(--font); font-size:14px; line-height:1;
                       padding:5px 10px; cursor:pointer; }
.shot-modal-close:hover { color:var(--gold-light); border-color:var(--gold-light); }

@media (max-width:640px) {
  .proj-shot img { width:calc(50vw - 34px); height:90px; }
}

/* ── Rendered markdown body ────────────────────────────────────── */
.md-body                { font-size:13px; line-height:1.65; color:var(--text); }
.md-body .md-h          { font-family:var(--font-hd); color:var(--gold-text); font-weight:normal;
                          letter-spacing:1px; margin:14px 0 6px; line-height:1.3; }
.md-body h3.md-h        { font-size:16px; }
.md-body h4.md-h        { font-size:14px; }
.md-body h5.md-h,
.md-body h6.md-h        { font-size:13px; color:var(--text-sub); text-transform:uppercase; letter-spacing:1.4px; }
.md-body strong         { color:#dfe5f0; font-weight:bold; }
.md-body em             { color:var(--text); font-style:italic; }
.md-body del            { color:var(--text-muted); }
.md-body a              { color:var(--gold-text); text-decoration:underline; }
.md-body a:hover        { color:var(--gold-light); }

.md-code                { background:var(--bg-tertiary); border:var(--border-subtle);
                          color:var(--gold-text); padding:1px 5px; font-size:12px; }

.md-code-wrap           { position:relative; margin:10px 0; border:var(--border-panel); background:#0a0e1a; }
.md-code-lang           { position:absolute; top:0; right:0; background:var(--bg-secondary);
                          border-left:var(--border-panel); border-bottom:var(--border-panel);
                          color:var(--text-muted); font-size:9px; letter-spacing:1.2px;
                          text-transform:uppercase; padding:2px 8px; z-index:1; }
.md-pre                 { margin:0; padding:12px 14px; overflow-x:auto; background:transparent !important; }
.md-pre code            { font-family:var(--font); font-size:12px; line-height:1.55;
                          background:none !important; text-shadow:none !important; color:var(--text); }
.md-pre::-webkit-scrollbar { height:6px; }

.md-body ul.md-ul,
.md-body ol.md-ol       { margin:6px 0 6px 22px; }
.md-body li             { margin:2px 0; }

.md-quote               { border-left:3px solid var(--gold-dark); background:var(--bg-panel);
                          padding:7px 12px; margin:10px 0; color:var(--text-sub); font-style:italic; }
.md-hr                  { border:none; border-top:var(--border-panel); margin:14px 0; }
.md-img                 { max-width:100%; height:auto; border:var(--border-panel); margin:8px 0; display:block; }

.md-chart               { background:var(--bg-panel); border:var(--border-panel); padding:12px;
                          margin:12px 0; }
.md-chart-title         { color:var(--gold-text); font-size:11px; letter-spacing:1.4px;
                          text-transform:uppercase; margin-bottom:8px; text-align:center; }
.md-chart canvas        { max-height:320px; }
.md-chart-err           { border:1px solid #5a2020; color:#c06060; background:var(--bg-panel);
                          padding:8px 12px; font-size:12px; margin:10px 0; }

/* ── Editor toolbar (admin) ────────────────────────────────────── */
.md-toolbar             { display:flex; flex-wrap:wrap; align-items:center; gap:2px;
                          background:var(--bg-secondary); border:var(--border-panel);
                          border-bottom:none; padding:4px 6px; }
.md-tb                  { background:var(--bg-panel); border:var(--border-subtle); color:var(--text-sub);
                          font-family:var(--font); font-size:11px; line-height:1; padding:5px 8px;
                          cursor:pointer; min-width:26px; transition:color .12s, border-color .12s; }
.md-tb:hover            { color:var(--gold-text); border-color:var(--gold-dark); }
.md-tb.active           { color:var(--gold-text); border-color:var(--gold); background:var(--bg-tertiary); }
.md-tb-gold             { color:var(--gold-text); border-color:var(--gold-dark); }
.md-tb-sep              { width:1px; height:18px; background:var(--border-panel);
                          background:#243050; margin:0 4px; }
.md-tb-spacer           { flex:1; }
.md-input               { border-top:none !important; font-family:var(--font) !important;
                          font-size:12px !important; line-height:1.6; }

.md-preview             { border:var(--border-panel); border-top:none; background:var(--bg-panel); }
.md-preview.hidden      { display:none; }
.md-preview-label       { background:var(--bg-secondary); border-bottom:var(--border-subtle);
                          color:var(--text-muted); font-size:9px; letter-spacing:1.4px;
                          text-transform:uppercase; padding:3px 10px; }
.md-preview-body        { padding:12px 14px; max-height:420px; overflow-y:auto; }

/* ── Graph builder modal ───────────────────────────────────────── */
.gb-modal               { position:fixed; inset:0; background:rgba(5,8,15,.9); z-index:220;
                          display:flex; align-items:center; justify-content:center; padding:24px; }
.gb-modal.hidden        { display:none; }
.gb-box                 { width:min(940px,100%); max-height:calc(100vh - 48px);
                          display:flex; flex-direction:column; margin:0; }
.gb-body                { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:auto; }
.gb-left                { padding:12px 14px; border-right:var(--border-panel); }
.gb-right               { padding:12px 14px; display:flex; flex-direction:column; }
.gb-prev-label          { color:var(--text-muted); font-size:9px; letter-spacing:1.4px;
                          text-transform:uppercase; margin-bottom:8px; }
.gb-canvas-wrap         { flex:1; min-height:260px; background:var(--bg-page);
                          border:var(--border-panel); padding:10px; position:relative; }
.gb-canvas-wrap canvas  { max-height:300px; }
.gb-opt                 { color:var(--text-muted); text-transform:none; letter-spacing:0; }
/* Scoped to direct form rows so it can't fight the series-row layout below. */
.gb-left > .form-row > select,
.gb-left > .form-row > input[type="text"] { width:100%; padding:6px 10px; }

/* Series rows: name + data side by side, each with its own mini-label.
   Widths use flex-basis (not width:100%) so the two fields share the row. */
.gb-series-list         { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.gb-series-row          { display:flex; gap:6px; align-items:flex-end;
                          background:var(--bg-panel); border:var(--border-subtle);
                          padding:7px 8px; }
.gb-series-field        { display:flex; flex-direction:column; gap:3px; min-width:0; }
.gb-series-field.name   { flex:0 0 34%; }
.gb-series-field.data   { flex:1 1 auto; }
.gb-series-field label  { color:var(--text-muted); font-size:9px; letter-spacing:1px;
                          text-transform:uppercase; margin:0; }
.gb-series-row input[type="text"] { width:100%; min-width:0; padding:5px 8px; font-size:12px; }
.gb-series-row .gb-s-del { flex:0 0 auto; align-self:flex-end; padding:5px 9px; line-height:1.35; }
.gb-s-count             { color:var(--text-muted); font-size:9px; letter-spacing:.5px;
                          white-space:nowrap; margin-top:3px; }
.gb-s-count.bad         { color:#c06060; }
.gb-s-count.good        { color:var(--text-muted); }

.gb-checks              { display:flex; gap:16px; }
.gb-check               { display:flex !important; align-items:center; gap:5px; font-size:11px;
                          color:var(--text-sub); text-transform:none !important; letter-spacing:0 !important; }
.gb-err                 { border:1px solid #5a2020; color:#c06060; background:var(--bg-panel);
                          padding:6px 10px; font-size:11px; margin-top:8px; }
.gb-err.warn            { border-color:var(--gold-dark); color:var(--gold-text); }
.gb-err.hidden          { display:none; }
.gb-actions             { border-top:var(--border-panel); display:flex; gap:8px; align-items:center; }
.gb-actions .btn:disabled { opacity:.4; cursor:not-allowed; color:var(--text-muted);
                            border-color:var(--border-panel); }
.gb-actions .btn:disabled:hover { background:var(--bg-panel); color:var(--text-muted); }

@media (max-width:760px) {
  .gb-body   { grid-template-columns:1fr; }
  .gb-left   { border-right:none; border-bottom:var(--border-panel); }
}


/* ── Screenshot picker (admin) ──────────────────────────────────── */
.ip-box             { width:min(680px,100%); max-height:calc(100vh - 48px);
                      display:flex; flex-direction:column; margin:0; }
.ip-grid            { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
                      gap:8px; max-height:52vh; overflow-y:auto; }
.ip-item            { background:var(--bg-panel); border:var(--border-panel); padding:0;
                      cursor:pointer; display:flex; flex-direction:column; gap:0;
                      transition:border-color .12s; font-family:var(--font); }
.ip-item:hover      { border-color:var(--gold); }
.ip-item img        { width:100%; height:88px; object-fit:cover; display:block; }
.ip-name            { color:var(--text-sub); font-size:10px; padding:4px 6px;
                      word-break:break-all; text-align:left; line-height:1.35; }
.ip-empty           { color:var(--text-muted); font-size:12px; padding:6px 0; }
.ip-empty.hidden    { display:none; }

/* ── Sidebar: collapsible panels ─────────────────────────────── */
.sb-toggle              { cursor:pointer; user-select:none; position:relative; }
.sb-toggle::after       { content:'\2212'; position:absolute; right:16px; top:50%;
                          transform:translateY(-50%); color:var(--text-muted);
                          font-size:12px; line-height:1; transition:color .15s; }
.sb-toggle:hover::after { color:var(--gold-text); }
.sb-panel.is-collapsed .sb-toggle::after { content:'\002B'; }
.sb-panel.is-collapsed .sb-collapse      { display:none; }
/* Nudge an existing right-side label clear of the +/- marker */
.sb-toggle .ph-right    { margin-right:14px; }

/* ── Friends: 88x31 button grid + hover tooltip ──────────────── */
.site-buttons           { display:grid; grid-template-columns:repeat(2, 88px);
                          justify-content:center; gap:5px; padding:10px; }
.friend-btn             { position:relative; line-height:0; display:block; }
.friend-btn img         { display:block; width:88px; height:31px;
                          border:var(--border-subtle); image-rendering:pixelated; }
.friend-btn:hover img   { border-color:var(--gold); }
.friend-fallback        { display:flex; align-items:center; justify-content:center;
                          width:88px; height:31px; border:var(--border-subtle);
                          background:var(--bg-secondary); color:var(--text-sub);
                          font-size:9px; line-height:1.1; text-align:center;
                          padding:2px; overflow:hidden; }
.friend-btn:hover .friend-fallback { border-color:var(--gold); color:var(--gold-text); }
/* Tooltip */
.friend-btn::after      { content:attr(data-tip); position:absolute; bottom:calc(100% + 5px);
                          left:50%; transform:translateX(-50%);
                          background:var(--bg-tertiary); border:var(--border-gold);
                          color:var(--gold-text); font-size:10px; line-height:1.3;
                          letter-spacing:.5px; white-space:nowrap; padding:3px 7px;
                          opacity:0; visibility:hidden; transition:opacity .15s;
                          pointer-events:none; z-index:20; }
.friend-btn:hover::after { opacity:1; visibility:visible; }

/* ── Stat rows: live-updating values ─────────────────────────── */
.stat-row[data-stat="yourip"] .stat-val,
.stat-row[data-stat="clock"]  .stat-val { font-size:11px; letter-spacing:.5px; }
.stat-row[data-stat="updated"] .stat-val { font-weight:normal; color:var(--text-sub); }

/* ── Admin: sidebar tab ──────────────────────────────────────── */
.sb-cols        { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.sb-sortlist    { list-style:none; }
.sb-sortitem    { display:flex; align-items:center; gap:8px; padding:6px 8px;
                  border:var(--border-subtle); background:var(--bg-secondary);
                  margin-bottom:5px; }
.sb-sortitem.dragging { opacity:.4; border-color:var(--gold); }
.sb-sortitem.drag-over { border-top:2px solid var(--gold); }
.sb-grip        { cursor:grab; color:var(--text-muted); font-size:13px;
                  letter-spacing:-2px; flex:none; }
.sb-grip:active { cursor:grabbing; }
.sb-sortitem input[type=text] { flex:1; min-width:0; }
.sb-sortitem .sb-key { color:var(--text-muted); font-size:10px;
                       text-transform:uppercase; letter-spacing:1px;
                       flex:none; width:76px; }
.sb-chk         { display:flex; align-items:center; gap:4px; font-size:10px;
                  color:var(--text-sub); flex:none; white-space:nowrap; }
.sb-chk input   { margin:0; }
@media (max-width:820px) { .sb-cols { grid-template-columns:1fr; } }