/* =======================================================================
   God Save Our Ping — Retro 2009 Skin (drop-in; no layout changes)
   ======================================================================= */

/* ---------- Palette ---------- */
:root{
  --bg:#0b1310;
  --bg-soft:#0f1b16;
  --panel:#0e1d16;
  --panel-2:#0c1a14;
  --ink:#eaf6ec;
  --ink-dim:#b7c9bf;
  --brand:#d2f0b3;                     /* mint highlight */
  --border:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.06);
  --shadow:0 10px 24px rgba(0,0,0,.55);
  --radius:14px;
  --radius-lg:20px;
}

/* ---------- Global base ---------- */
*,
*::before,
*::after { box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font:15px/1.45 "Segoe UI", Tahoma, "Trebuchet MS", Verdana, Arial, sans-serif;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  background:
    radial-gradient(1200px 900px at 50% -10%, rgba(45,90,70,.25), transparent 60%),
    linear-gradient(to bottom,#0d1e17,#08120e 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015), rgba(255,255,255,.015) 2px, transparent 2px, transparent 4px);
}

a{ color:#a6f6c5; text-decoration:none; }
a:hover{ filter:brightness(1.08); }
:focus-visible{ outline:2px solid #bdf3d1; outline-offset:2px; }

img{ max-width:100%; height:auto; display:block; }

/* Utility tiny bits */
.mb-16{ margin-bottom:16px; }
.mt-8{ margin-top:8px; }
.mt-6{ margin-top:6px; }
.gap-8{ gap:8px; }
.inline{ display:inline-block; }
.small{ font-size:.92em; }
.meta{ opacity:.85; color:var(--ink-dim); }

/* Flash text colors */
.flash-ok{ color:#bfe08e; }
.flash-err{ color:#ffb0b0; }

/* ---------- Containers ---------- */
.wrap{ max-width:1200px; margin:0 auto; padding:10px 16px; }

/* ---------- Header (late-2000s shine) ---------- */
.sitebar{
  position:relative;
  z-index:2;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 50%),
    linear-gradient(to bottom, #0e2018ee, #0a1712cc);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Put brand on left, nav on right (no markup changes needed) */
.sitebar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:inherit;
}
.brand-logo{
  height:64px; width:auto;
  object-fit:contain;
}
.brand-text{ white-space:nowrap; }
.brand .title{ font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 12px rgba(140,255,180,.08); }
.brand .version{ opacity:.85; font-size:12px; }

/* Top nav as gel tabs — works whether you use .nav/.tab or just <nav><a> */
.nav{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:6px 0; margin-left:auto; }
.sitebar .wrap nav{ display:flex; flex-wrap:wrap; gap:12px; margin-left:auto; }

.tab,
.sitebar .wrap nav a{
  position:relative;
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  color:#f4fff7;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.05)),
    radial-gradient(200% 100% at 50% 0%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 60%),
    linear-gradient(to bottom,#1f3a2d,#142820 60%,#102119);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 2px 2px rgba(0,0,0,.25),
    0 8px 14px rgba(0,0,0,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.65);
  letter-spacing:.2px;
  white-space:nowrap;
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.tab:hover,
.sitebar .wrap nav a:hover{
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 3px 4px rgba(0,0,0,.28),
    0 10px 18px rgba(0,0,0,.45);
}
.tab:active,
.sitebar .wrap nav a:active{ transform:translateY(1px); }
.tab.active{ color:#132016; border-color:rgba(255,255,255,.35);
  background:linear-gradient(to bottom,#e3ffd0,#bde8a2 70%,#a8d08c);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

/* ---------- Main frame & grid (unchanged layout) ---------- */
.main{ position:relative; z-index:1; }
.retro-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* Three columns: LEFT | CENTER | RIGHT */
.retro-grid{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 320px;
  gap:16px;
  align-items:start;
}
@media (max-width:1100px){
  .retro-grid{ grid-template-columns:1fr; }
}

/* Center: split into Posts | Media */
.center-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:1100px){
  .center-split{ grid-template-columns:1fr; }
}

/* Scrollable panes inside cards (desktop) */
.pane{ display:flex; flex-direction:column; }
.pane-scroll{
  max-height:calc(100vh - 210px);
  overflow:auto;
  padding-right:6px;
}
@media (max-width:1100px){
  .pane-scroll{ max-height:none; overflow:visible; }
}

/* ---------- Cards / Panels (gloss + bevel) ---------- */
.card, .panel{
  padding:14px;
  border-radius:var(--radius);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    linear-gradient(to bottom, #11251c, #0c1b15 55%, #0a1712);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    var(--shadow);
}
.card h2, .panel h3{ margin:0 0 8px; text-shadow:0 1px 0 rgba(0,0,0,.7), 0 0 14px rgba(130,230,170,.10); }

/* File lists in panels/cards */
.filelist{ list-style:none; margin:0; padding:0; }
.filelist > li{ margin:8px 0; }

/* Sidebar menu as vertical buttons */
.panel ul{ list-style:none; margin:0; padding:0; }
.panel ul li{ margin:8px 0; }
.panel ul li a{
  display:block; padding:10px 14px;
  border-radius:12px; color:#f5fff8;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(to bottom, #1a3429, #132821 60%, #0f211b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 2px 3px rgba(0,0,0,.25);
  transition:filter .12s ease, transform .08s ease;
}
.panel ul li a:hover{ filter:brightness(1.08); }
.panel ul li a:active{ transform:translateY(1px); }

/* Key/Value stack (Status panel) */
.kvs{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 10px;
  align-items:center;
}

/* ---------- Inputs & Buttons (gel) ---------- */
.input{
  width:100%;
  padding:10px 12px;
  color:var(--ink);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    #102019;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.6),
    inset 0 8px 16px rgba(255,255,255,.02);
}
.input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(145,255,195,.22), inset 0 1px 2px rgba(0,0,0,.6);
}

.button, .button-danger{
  display:inline-block;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(0,0,0,.08),
    0 3px 6px rgba(0,0,0,.35);
}
.button{
  color:#0e1b14;
  background:linear-gradient(to bottom,#ebffd7,#c7f0af 60%,#b2e099);
}
.button:hover{ filter:brightness(1.03); }
.button:active{ transform:translateY(1px); }

.button-danger{
  color:#1b0808;
  background:linear-gradient(to bottom,#ffd7d7,#f59c9c 60%,#ee8383);
}

/* ---------- Footer gloss ---------- */
.footer{
  margin-top:24px;
  color:var(--ink-dim);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  background:linear-gradient(to top, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 16px 24px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}