/* ══════════════════════════════════════════════════════
   NetVault — netvault.css
   Era-authentic portal/forum aesthetic for modern displays.
   No gradients on structural elements. No border-radius > 2px.
   No box-shadow. No external fonts.
   ══════════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES — LIGHT MODE ── */
:root {
  --page-bg:           #cccccc;
  --panel-bg:          #ffffff;
  --panel-border:      #999999;
  --panel-shadow:      #666666;
  --section-bar-bg:    #cccccc;
  --text-primary:      #000000;
  --text-secondary:    #666666;
  --text-muted:        #888888;
  --link:              #0000cc;
  --link-visited:      #551a8b;
  --link-hover:        #cc0000;
  --header-steel:      #336699;
  --header-burg:       #993333;
  --header-teal:       #336666;
  --header-olive:      #666633;
  --header-dark:       #333333;
  --header-green:      #336633;
  --header-text:       #ffffff;
  --divider-yellow:    #ffcc00;
  --divider-yellow-bg: #ffffcc;
  --divider-text:      #333300;
  --input-bg:          #ffffff;
  --input-border:      #888888;
  --btn-bg:            #dddddd;
  --btn-border:        #999999;
  --ticker-bg:         #ffff99;
  --ticker-border:     #cccc00;
  --ticker-text:       #333300;
  --nav-bg:            #336699;
  --nav-border:        #224466;
  --nav-tab-bg:        #4477aa;
  --nav-tab-active:    #ffffff;
  --nav-tab-text:      #cce0ff;
  --nav-tab-active-text: #003366;
  --footer-bg:         #dddddd;
  --footer-border:     #888888;
  --footer-text:       #555555;
  --panel-ctrl:        #aaccff;
  --online-bg:         #e8f0ff;
  --online-border:     #aabbdd;
  --online-dot:        #00aa00;
  --counter-bg:        #000000;
  --counter-text:      #00ff00;
  --radio-bg:          #111122;
  --radio-border:      #0044aa;
  --radio-text:        #aaddff;
  --radio-track:       #ffffff;
  --radio-live:        #cc0000;
  --radio-listeners:   #00ff88;
  --radio-btn-bg:      #224488;
  --radio-btn-text:    #aaccff;
  --bbs-bg:            #000000;
  --bbs-text:          #00ff00;
  --bbs-cyan:          #00ffff;
  --bbs-yellow:        #ffff00;
  --bbs-gray:          #aaaaaa;
  --shout-bg:          #f8f8f8;
  --shout-border:      #cccccc;
  --badge-border:      #888888;
  --stock-up:          #006600;
  --stock-down:        #cc0000;
  --cat-header-bg:     #336699;
  --cat-header-text:   #ffffff;
  --cat-header-sub:    #4477aa;
  --board-row-bg:      #ffffff;
  --board-row-alt:     #eef3f8;
  --board-row-hover:   #ddeeff;
  --thread-pinned:     #fffbe6;
  --thread-locked:     #f8f8f8;
  --post-user-bg:      #ddeeff;
  --post-user-border:  #aaccdd;
  --post-bg:           #ffffff;
  --post-border:       #cccccc;
  --post-alt:          #f9f9f9;
  --rank-color:        #336699;
  --breadcrumb-bg:     #eef3f8;
  --breadcrumb-border: #aabbcc;
  --stats-bar-bg:      #eef3f8;
  --stats-bar-border:  #aabbcc;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --page-bg:           #1a1a1a;
  --panel-bg:          #252525;
  --panel-border:      #444444;
  --panel-shadow:      #111111;
  --section-bar-bg:    #2a2a2a;
  --text-primary:      #dddddd;
  --text-secondary:    #aaaaaa;
  --text-muted:        #777777;
  --link:              #6699ff;
  --link-visited:      #bb88ff;
  --link-hover:        #ff6666;
  --header-steel:      #336699;
  --header-burg:       #993333;
  --header-teal:       #336666;
  --header-olive:      #666633;
  --header-dark:       #444444;
  --header-green:      #336633;
  --header-text:       #ffffff;
  --divider-yellow:    #aa8800;
  --divider-yellow-bg: #2a2a00;
  --divider-text:      #ddcc66;
  --input-bg:          #333333;
  --input-border:      #555555;
  --btn-bg:            #3a3a3a;
  --btn-border:        #555555;
  --ticker-bg:         #2a2a00;
  --ticker-border:     #666600;
  --ticker-text:       #ddcc44;
  --nav-bg:            #1a3355;
  --nav-border:        #112233;
  --nav-tab-bg:        #224466;
  --nav-tab-active:    #252525;
  --nav-tab-text:      #99bbdd;
  --nav-tab-active-text: #aaccff;
  --footer-bg:         #1a1a1a;
  --footer-border:     #333333;
  --footer-text:       #888888;
  --panel-ctrl:        #667799;
  --online-bg:         #1a2233;
  --online-border:     #334466;
  --online-dot:        #00cc00;
  --shout-bg:          #1e1e1e;
  --shout-border:      #444444;
  --badge-border:      #555555;
  --stock-up:          #00cc00;
  --stock-down:        #ff4444;
  --cat-header-bg:     #1a3355;
  --cat-header-text:   #aaccff;
  --cat-header-sub:    #224466;
  --board-row-bg:      #252525;
  --board-row-alt:     #2a2a2a;
  --board-row-hover:   #1a3355;
  --thread-pinned:     #2a2a00;
  --thread-locked:     #222222;
  --post-user-bg:      #1a2233;
  --post-user-border:  #334466;
  --post-bg:           #252525;
  --post-border:       #444444;
  --post-alt:          #2a2a2a;
  --rank-color:        #6699ff;
  --breadcrumb-bg:     #1e2a33;
  --breadcrumb-border: #334455;
  --stats-bar-bg:      #1e2233;
  --stats-bar-border:  #334455;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── BODY ── */
body {
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--text-primary);
  background: var(--page-bg);
  min-width: 1024px;
}

/* ── LINKS ── */
a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); }

/* ── UTILITY — FONT SIZE SCALE ── */
.text-sm  { font-size: clamp(11px, 0.9vw, 13px); }
.text-xs  { font-size: clamp(10px, 0.8vw, 12px); }
.text-xxs { font-size: clamp(9px, 0.75vw, 11px); }

/* ── UTILITY — BUTTONS ── */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: inherit;
  text-decoration: underline;
}
.link-btn:hover { color: var(--link-hover); }

.btn {
  display: inline-block;
  height: 22px;
  padding: 0 10px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 12px);
  cursor: pointer;
  text-decoration: none;
  line-height: 22px;
  vertical-align: middle;
}
.btn:active { border-style: inset; }
.btn:hover { text-decoration: none; background: var(--board-row-hover); }

.submit-btn {
  display: block;
  width: 100%;
  height: 24px;
  padding: 0 12px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: bold;
  cursor: pointer;
}
.submit-btn:active { border-style: inset; }

.post-btn {
  height: 18px;
  padding: 0 5px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}
.post-btn:active,
.post-btn:hover { background: var(--header-steel); color: #fff; border-style: inset; text-decoration: none; }

/* ── PAGE WRAP — fixed-width centered container ── */
#page-wrap {
  width: 1240px;
  margin: 0 auto;
  background: var(--page-bg);
  border-left: 1px solid var(--panel-shadow);
  border-right: 1px solid var(--panel-shadow);
}

/* ── HEADER ── */
#header {
  background: var(--panel-bg);
  border-bottom: 2px solid var(--header-steel);
}
#header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  gap: 8px;
}
#logo-area {
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid var(--panel-border);
  padding-right: 10px;
  flex-shrink: 0;
}
#logo-box {
  width: 88px;
  height: 31px;
  background: var(--header-steel);
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: -0.5px;
  font-family: 'Times New Roman', serif;
  text-decoration: none;
}
#logo-box:hover { color: #ffffff; text-decoration: none; }
#header-center { flex: 1; padding: 0 12px; text-align: center; }
#header-util {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid var(--panel-border);
}
#header-util-links {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#clock-display {
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--text-secondary);
  white-space: nowrap;
}
#theme-toggle {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(9px, 0.75vw, 11px);
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
#theme-toggle:hover { background: var(--header-steel); color: #fff; border-color: var(--nav-border); }

/* ── PERSONALIZE BAR ── */
#personalize-bar {
  background: var(--section-bar-bg);
  border-bottom: 1px solid var(--panel-border);
  padding: 2px 6px;
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
#personalize-bar strong { color: var(--header-steel); }

/* ── NAV TABS ── */
#nav-tabs {
  background: var(--nav-bg);
  border-bottom: 2px solid var(--nav-border);
  padding: 0 4px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.nav-tab {
  display: inline-block;
  padding: 3px 10px 2px;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: bold;
  color: var(--nav-tab-text);
  text-decoration: none;
  background: var(--nav-tab-bg);
  border: 1px solid var(--nav-border);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  white-space: nowrap;
}
.nav-tab:hover { color: #fff; text-decoration: none; }
.nav-tab.active {
  background: var(--nav-tab-active);
  color: var(--nav-tab-active-text);
  border-color: var(--panel-border);
}

/* ── TICKER ── */
#ticker-bar {
  background: var(--ticker-bg);
  border-bottom: 1px solid var(--ticker-border);
  padding: 2px 8px;
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--ticker-text);
  overflow: hidden;
  white-space: nowrap;
}
#ticker-bar a { color: var(--ticker-text); }
.ticker-inner {
  display: inline-block;
  animation: ticker 40s linear infinite;
}
#ticker-bar:hover .ticker-inner {
  animation-play-state: paused;
}
@keyframes ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ── FLASH MESSAGES ── */
.flash {
  padding: 3px 8px;
  border-bottom: 1px solid;
  font-size: clamp(11px, 0.9vw, 13px);
}
.flash-success  { background: #ccffcc; border-color: #009900; color: #003300; }
.flash-error    { background: #ffcccc; border-color: #990000; color: #330000; }
.flash-warning  { background: #ffffcc; border-color: #999900; color: #333300; }
.flash-irc_token {
  background: #000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  border-color: #009900;
  word-break: break-all;
}

/* ── PORTAL THREE-COLUMN LAYOUT ── */
#portal-wrapper {
  padding: 4px;
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  gap: 4px;
  align-items: flex-start;
}
#col-left, #col-right { min-width: 0; }
#col-center { min-width: 0; }

/* ── FORUM SINGLE-COLUMN LAYOUT ── */
#forum-wrapper {
  padding: 4px 6px;
}

/* ── PANEL ── */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  margin-bottom: 4px;
}
.panel-header {
  padding: 2px 5px;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: bold;
  color: var(--header-text);
  background: var(--header-steel);
  border-bottom: 1px solid #224466;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-header.burg  { background: var(--header-burg);  border-color: #661111; }
.panel-header.teal  { background: var(--header-teal);  border-color: #224444; }
.panel-header.olive { background: var(--header-olive); border-color: #444422; }
.panel-header.dark  { background: var(--header-dark);  border-color: #111111; }
.panel-header.green { background: var(--header-green); border-color: #224422; }

.panel-controls { display: flex; gap: 3px; align-items: center; }
.panel-ctrl-btn {
  font-size: clamp(9px, 0.75vw, 11px);
  color: var(--panel-ctrl);
  text-decoration: none;
  padding: 0 2px;
  line-height: 1;
}
.panel-ctrl-btn:hover { color: #fff; text-decoration: none; }

.panel-body { padding: 3px 5px; }

/* ── SECTION BARS (yellow dividers) ── */
.section-bar {
  background: var(--divider-yellow-bg);
  border-top: 1px solid var(--divider-yellow);
  border-bottom: 1px solid var(--divider-yellow);
  padding: 1px 5px;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: bold;
  color: var(--divider-text);
  margin: 3px 0 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-bar a { color: var(--divider-text); font-size: clamp(9px, 0.75vw, 11px); font-weight: normal; }

/* ── DIVIDERS ── */
.hd     { border: none; border-top: 1px solid var(--panel-border); margin: 2px 0; }
.hd-dot { border: none; border-top: 1px dotted var(--panel-border); margin: 2px 0; }

/* ── ITEM ROWS (portal panel items) ── */
.item-row { display: flex; align-items: baseline; gap: 3px; padding: 1px 0; line-height: 1.5; }
.bullet { color: var(--header-steel); font-size: clamp(9px, 0.75vw, 11px); flex-shrink: 0; }
.item-meta { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); white-space: nowrap; }
.badge-new {
  background: #cc0000;
  color: #fff;
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: bold;
  padding: 0 2px;
  margin-left: 2px;
  vertical-align: middle;
}

/* ── RADIO WIDGET ── */
.radio-wrap {
  background: var(--radio-bg);
  border: 1px solid var(--radio-border);
  padding: 5px;
  margin: 3px 0;
}
.radio-header { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.radio-icon { font-size: 14px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.radio-title {
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: bold;
  color: #00aaff;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.radio-live {
  background: var(--radio-live);
  color: #fff;
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: bold;
  padding: 0 3px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.radio-nowplaying { font-size: clamp(9px, 0.75vw, 11px); color: var(--radio-text); margin-bottom: 2px; }
.radio-track {
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--radio-track);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radio-prog-wrap { margin: 3px 0; background: #001133; height: 5px; border: 1px solid #003388; }
.radio-prog {
  height: 100%;
  background: #0055aa;
  width: 33%;
  animation: rprog 180s linear infinite;
}
@keyframes rprog { 0% { width: 5%; } 100% { width: 100%; } }
.radio-meta { display: flex; justify-content: space-between; font-size: clamp(9px, 0.75vw, 11px); color: #6699cc; }
.radio-listeners { color: var(--radio-listeners); }
.radio-btns { display: flex; gap: 2px; margin-top: 4px; }
.radio-btn {
  flex: 1;
  padding: 2px 0;
  text-align: center;
  background: var(--radio-btn-bg);
  border: 1px solid #446699;
  color: var(--radio-btn-text);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: bold;
  cursor: pointer;
  font-family: Verdana, Tahoma, Arial, sans-serif;
}
.radio-btn:hover { background: #335599; color: #fff; }
.radio-offline { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); text-align: center; padding: 8px 0; }

/* ── ONLINE USERS ── */
.online-count {
  font-size: 22px;
  font-weight: bold;
  color: var(--online-dot);
  text-align: center;
  display: block;
  padding: 2px 0;
}
.online-list { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 0; }
.online-user {
  font-size: clamp(9px, 0.75vw, 11px);
  color: var(--link);
  background: var(--online-bg);
  border: 1px solid var(--online-border);
  padding: 0 3px;
}
.online-user::before { content: "● "; color: var(--online-dot); font-size: 8px; }

/* ── HIT COUNTER ── */
.hit-counter {
  text-align: center;
  padding: 4px;
  background: var(--counter-bg);
  border: 2px inset #555;
  margin: 3px 0;
}
.counter-digits {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: bold;
  color: var(--counter-text);
  letter-spacing: 3px;
}
.counter-label { font-size: clamp(9px, 0.75vw, 11px); color: #555; margin-top: 1px; }

/* ── WEATHER ── */
.weather-box { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.weather-icon { font-size: 24px; }
.weather-temp { font-size: 16px; font-weight: bold; color: var(--header-steel); }
.weather-desc { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-secondary); }
.weather-city { font-size: clamp(10px, 0.8vw, 12px); font-weight: bold; }

/* ── SEARCH BOX ── */
.search-box { text-align: center; padding: 6px; border-bottom: 1px solid var(--panel-border); }
.search-row { display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 3px; }
.search-input {
  width: 220px;
  height: 22px;
  border: 2px inset var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  padding: 0 4px;
}
.search-btn {
  height: 22px;
  padding: 0 8px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: bold;
  cursor: pointer;
}
.search-btn:active { border-style: inset; }

/* ── HEADLINES ── */
.headline-row { padding: 2px 0; border-bottom: 1px dotted var(--panel-border); line-height: 1.4; }
.headline-row:last-child { border-bottom: none; }
.headline-src { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); font-style: italic; }

/* ── TWO-COLUMN GRID ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.two-col-label {
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: bold;
  color: var(--header-steel);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── FORUM ROWS (portal panel) ── */
.forum-row { padding: 2px 0; border-bottom: 1px dotted var(--panel-border); line-height: 1.4; }
.forum-row:last-child { border-bottom: none; }
.forum-board { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); font-weight: bold; text-transform: uppercase; }
.forum-replies { font-size: clamp(9px, 0.75vw, 11px); color: #cc6600; float: right; }

/* ── DIRECTORY GRID ── */
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.dir-entry { font-size: clamp(10px, 0.8vw, 12px); padding: 1px 0; }
.dir-count { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); }

/* ── SHOUTBOX ── */
.shout-msgs {
  height: 100px;
  overflow-y: auto;
  background: var(--shout-bg);
  border: 1px inset var(--shout-border);
  padding: 2px 3px;
  margin-bottom: 3px;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.5;
}
.shout-entry { padding: 1px 0; border-bottom: 1px dotted var(--panel-border); }
.shout-entry:last-child { border-bottom: none; }
.shout-name { font-weight: bold; color: var(--link); }
.shout-time { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); float: right; }
.shout-input-row { display: flex; gap: 2px; }
.shout-msg-f {
  flex: 1;
  height: 19px;
  border: 1px inset var(--shout-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: clamp(10px, 0.8vw, 12px);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  padding: 0 3px;
}
.shout-btn {
  height: 19px;
  padding: 0 6px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: bold;
  cursor: pointer;
  font-family: Verdana, Tahoma, Arial, sans-serif;
}
.shout-btn:active { border-style: inset; }

/* ── STOCKS ── */
.stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
  border-bottom: 1px dotted var(--panel-border);
  font-size: clamp(10px, 0.8vw, 12px);
}
.stock-row:last-child { border-bottom: none; }
.stock-sym { font-weight: bold; font-family: 'Courier New', monospace; }
.stock-up  { color: var(--stock-up); font-weight: bold; }
.stock-dn  { color: var(--stock-down); font-weight: bold; }

/* ── POLL ── */
.poll-opt { display: block; font-size: clamp(10px, 0.8vw, 12px); padding: 1px 0; cursor: pointer; }
.poll-opt input { margin-right: 3px; }

/* ── BBS PANEL ── */
.bbs-body {
  background: var(--bbs-bg);
  color: var(--bbs-text);
  font-family: 'Courier New', monospace;
  padding: 6px;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.7;
}
.bbs-cyan   { color: var(--bbs-cyan); }
.bbs-yellow { color: var(--bbs-yellow); }
.bbs-gray   { color: var(--bbs-gray); }

/* ── WEB RING ── */
.ring-nav { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.ring-arr { font-size: 18px; text-decoration: none; color: var(--link); }

/* ── SPOTLIGHT ── */
.spotlight-avatar {
  width: 44px;
  height: 44px;
  background: var(--header-steel);
  border: 1px solid var(--panel-border);
  margin: 0 auto 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}

/* ── 88x31 BADGES ── */
.badge-row { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 0; }
.badge88 {
  width: 88px;
  height: 31px;
  border: 1px solid var(--badge-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  line-height: 1.2;
  cursor: default;
}
.b-ns  { background: #336699; }
.b-icq { background: #009900; }
.b-wa  { background: #330099; }
.b-lnx { background: #cc6600; }

/* ════════════════════════════════════════════════════
   FORUM — FULL BOARD INDEX
   ════════════════════════════════════════════════════ */
.forum-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
  border: 1px solid var(--panel-border);
}
.forum-table td { padding: 3px 6px; border-bottom: 1px solid var(--panel-border); vertical-align: middle; }
.forum-table tr:last-child td { border-bottom: none; }

.cat-header td {
  background: var(--cat-header-bg);
  color: var(--cat-header-text);
  font-weight: bold;
  font-size: clamp(10px, 0.8vw, 12px);
  border-bottom: 1px solid var(--cat-header-sub);
}
.cat-header-right { text-align: right; }

.col-header td {
  background: var(--cat-header-sub);
  color: var(--cat-header-text);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: bold;
}

.board-row td { background: var(--board-row-bg); }
.board-row:nth-child(even) td { background: var(--board-row-alt); }
.board-row:hover td { background: var(--board-row-hover); }
.board-icon { width: 24px; text-align: center; font-size: 16px; }
.board-name a { font-size: clamp(11px, 0.9vw, 13px); font-weight: bold; }
.board-desc { color: var(--text-muted); margin-top: 1px; }
.board-stats { width: 70px; text-align: center; }
.board-lastpost { width: 180px; }

/* ── THREAD LIST ── */
.thread-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  border: 1px solid var(--panel-border);
}
.thread-table td { padding: 3px 6px; border-bottom: 1px dotted var(--panel-border); vertical-align: middle; }
.thread-table tr:last-child td { border-bottom: none; }
.thread-row td { background: var(--board-row-bg); font-size: clamp(11px, 0.9vw, 13px); }
.thread-row:hover td { background: var(--board-row-hover); }
.thread-row.pinned td { background: var(--thread-pinned); }
.thread-row.locked td { background: var(--thread-locked); color: var(--text-muted); }
.thread-icon { width: 20px; text-align: center; }
.thread-stats { width: 60px; text-align: center; font-size: clamp(10px, 0.8vw, 12px); }
.thread-lastpost { width: 160px; font-size: clamp(9px, 0.75vw, 11px); }

/* ── BREADCRUMB ── */
.breadcrumb {
  background: var(--breadcrumb-bg);
  border: 1px solid var(--breadcrumb-border);
  border-left: none;
  border-right: none;
  padding: 2px 6px;
  font-size: clamp(10px, 0.8vw, 12px);
  margin-bottom: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.breadcrumb-right { color: var(--text-muted); }

/* ── STATS BAR ── */
.stats-bar {
  background: var(--stats-bar-bg);
  border: 1px solid var(--stats-bar-border);
  padding: 3px 6px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── PAGINATION ── */
.pagination {
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 4px 0;
  font-size: clamp(10px, 0.8vw, 12px);
}
.page-btn {
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 12px);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-btn.active { background: var(--header-steel); color: #fff; border-style: inset; }
.page-btn:hover:not(.active) { background: var(--board-row-hover); text-decoration: none; }

/* ── POST TABLE ── */
.post-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  border: 1px solid var(--post-border);
}
.post-table td { border-bottom: 1px solid var(--post-border); vertical-align: top; }
.post-table tr:last-child td { border-bottom: none; }

.post-user-cell {
  width: 130px;
  background: var(--post-user-bg);
  border-right: 1px solid var(--post-user-border);
  padding: 6px 5px;
  text-align: center;
  font-size: clamp(10px, 0.8vw, 12px);
}
.post-avatar { font-size: 32px; margin-bottom: 3px; }
.post-username a { font-weight: bold; font-size: clamp(11px, 0.9vw, 13px); }
.post-rank { color: var(--rank-color); margin: 1px 0; }
.post-pip { color: #cc8800; }
.post-user-stats { color: var(--text-muted); text-align: left; margin-top: 4px; line-height: 1.6; }

.post-content-cell {
  background: var(--post-bg);
  padding: 0;
}
.post-content-cell.alt { background: var(--post-alt); }

.post-header {
  background: var(--breadcrumb-bg);
  border-bottom: 1px solid var(--breadcrumb-border);
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(10px, 0.8vw, 12px);
}
.post-num { color: var(--text-muted); font-weight: bold; }

.post-body {
  padding: 6px 8px;
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.6;
  word-break: break-word;
}
.post-body blockquote,
.post-body .bbcode-quote {
  border-left: 3px solid var(--header-steel);
  background: var(--board-row-alt);
  padding: 4px 6px;
  margin: 4px 0;
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--text-secondary);
}
.post-body .bbcode-code,
.post-body pre,
.post-body code {
  font-family: 'Courier New', monospace;
  background: var(--shout-bg);
  border: 1px solid var(--shout-border);
  padding: 2px 4px;
  font-size: clamp(10px, 0.8vw, 12px);
  display: block;
  white-space: pre-wrap;
  margin: 3px 0;
}

.post-sig {
  border-top: 1px dotted var(--panel-border);
  padding: 3px 8px;
  color: var(--text-muted);
  font-style: italic;
}

.post-footer {
  border-top: 1px solid var(--post-border);
  background: var(--breadcrumb-bg);
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post-actions { display: flex; gap: 4px; align-items: center; }
.post-report a { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); }

/* ── SPOILER ── */
.spoiler-wrap { display: inline; }
.spoiler-btn {
  font-size: clamp(9px, 0.75vw, 11px);
  padding: 0 4px;
  height: 16px;
  background: var(--header-dark);
  color: var(--header-text);
  border: 1px solid #555;
  cursor: pointer;
  font-family: Verdana, Tahoma, Arial, sans-serif;
}
.spoiler { background: var(--shout-bg); padding: 2px 4px; border: 1px solid var(--shout-border); }

/* ── REPLY FORM ── */
.reply-form { margin-top: 6px; }
.bbcode-toolbar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 3px 4px;
  background: var(--section-bar-bg);
  border: 1px solid var(--panel-border);
  border-bottom: none;
}
.bbcode-toolbar button {
  height: 22px;
  padding: 0 8px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: clamp(10px, 0.8vw, 12px);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  cursor: pointer;
  line-height: 22px;
}
.bbcode-toolbar button:hover { background: var(--board-row-hover); }
.bbcode-toolbar button:active { border-style: inset; }
.reply-textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  padding: 4px;
  resize: vertical;
  display: block;
}
.char-count { font-size: clamp(9px, 0.75vw, 11px); color: var(--text-muted); text-align: right; padding: 1px 0; }

/* ════════════════════════════════════════════════════
   FORMS — AUTH / GENERAL
   ════════════════════════════════════════════════════ */
.form-row { margin-bottom: 6px; }
.form-label {
  display: block;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.form-input {
  width: 100%;
  height: 22px;
  border: 1px inset var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  padding: 0 4px;
}
.form-input:focus { outline: 2px solid var(--header-steel); }
.form-error { font-size: clamp(10px, 0.8vw, 12px); color: #990000; margin-top: 2px; }
.form-error-list { list-style: none; margin: 0 0 6px; }
.form-error-list li::before { content: "▶ "; color: #990000; }

/* aliases for form-group / form-control (same as form-row / form-input) */
.form-group { margin-bottom: 6px; }
.form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 20px;
  padding: 0 4px;
  background: var(--input-bg);
  border: 1px inset var(--input-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
}
.form-control:focus { outline: 2px solid var(--header-steel); }

/* forum post textarea */
.post-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  background: var(--input-bg);
  border: 1px inset var(--input-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  resize: vertical;
  line-height: 1.5;
}
.post-textarea:focus { outline: 2px solid var(--header-steel); }

/* character counter below textarea */
.char-counter {
  text-align: right;
  font-size: clamp(9px, 0.75vw, 11px);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── MEMBER PAGES ── */
.file-table {
  width: 100%;
  border-collapse: collapse;
}
.file-table td { padding: 3px 4px; border-bottom: 1px dotted var(--panel-border); }
.file-table tr:last-child td { border-bottom: none; }

/* ── ADMIN ── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--panel-border);
}
.admin-table th {
  background: var(--cat-header-bg);
  color: var(--cat-header-text);
  padding: 3px 6px;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid var(--cat-header-sub);
}
.admin-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--panel-border);
  font-size: clamp(10px, 0.8vw, 12px);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:nth-child(even) td { background: var(--board-row-alt); }
.admin-table tr:hover td { background: var(--board-row-hover); }

/* ── FOOTER ── */
#footer {
  background: var(--footer-bg);
  border-top: 2px solid var(--footer-border);
  padding: 5px 8px;
  text-align: center;
  font-size: clamp(9px, 0.75vw, 11px);
  color: var(--footer-text);
  margin-top: 6px;
}
#footer a { color: var(--link); }
.footer-links { display: flex; justify-content: center; gap: 12px; margin-bottom: 3px; flex-wrap: wrap; }

/* ── FORUM PASS 3 ADDITIONS ── */
/* category/column headers using <th> inside .forum-table */
.forum-table th.forum-cat-header {
  background: var(--cat-header-bg);
  color: var(--cat-header-text);
  font-weight: bold;
  font-size: clamp(10px, 0.8vw, 12px);
  padding: 3px 6px;
  border-bottom: 1px solid var(--cat-header-sub);
  text-align: left;
}
.forum-table tr.forum-col-headers th {
  background: var(--cat-header-sub);
  color: var(--cat-header-text);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: bold;
  padding: 2px 6px;
}
.forum-board-row td { background: var(--board-row-bg); }
.forum-board-row:nth-child(even) td { background: var(--board-row-alt); }
.forum-board-row:hover td { background: var(--board-row-hover); }
.forum-board-name { font-weight: bold; font-size: clamp(11px, 0.9vw, 13px); display: flex; align-items: center; gap: 4px; }
.forum-board-desc { color: var(--text-muted); font-size: clamp(10px, 0.8vw, 12px); margin-top: 1px; }
.forum-lastpost { width: 180px; }
.forum-stats-bar td { background: var(--stats-bar-bg, var(--section-bar-bg)); padding: 3px 6px; }

.forum-thread-row td { background: var(--board-row-bg); }
.forum-thread-row:hover td { background: var(--board-row-hover); }
.forum-thread-row.pinned td { background: var(--thread-pinned); }
.forum-thread-row.locked td { color: var(--text-muted); }
.forum-thread-title { display: flex; align-items: center; gap: 4px; }

.forum-board-toolbar { padding: 3px 0 4px; }

.forum-thread-header { padding: 4px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thread-title { margin: 0; font-size: clamp(13px, 1.1vw, 15px); font-family: Verdana, Tahoma, Arial, sans-serif; }
.mod-actions form button { font-size: clamp(9px, 0.75vw, 11px); }
.mod-toolbar { padding: 3px 0; color: var(--text-muted); }

/* forum-icon stub squares — actual icons could be GIFs in a real deploy */
.forum-icon { display: inline-block; width: 14px; height: 14px; background: var(--btn-bg); border: 1px solid var(--btn-border); flex-shrink: 0; }
.forum-icon-open { background: #3a7a3a; }
.forum-icon-locked { background: #7a3a3a; }
.forum-icon-pin { background: #3a5a7a; }
.forum-icon-pinlocked { background: #5a3a7a; }

/* badges */
.badge-pin, .badge-lock {
  font-size: clamp(9px, 0.75vw, 11px);
  padding: 0 3px;
  border: 1px solid;
  font-weight: bold;
}
.badge-pin { background: #d0e8ff; border-color: #3a5a7a; color: #3a5a7a; }
.badge-lock { background: #ffe0e0; border-color: #7a3a3a; color: #7a3a3a; }

/* post usercard — alias for post-user-cell */
.post-usercard {
  width: 130px;
  background: var(--post-user-bg);
  border-right: 1px solid var(--post-user-border);
  padding: 6px 5px;
  text-align: center;
  font-size: clamp(10px, 0.8vw, 12px);
  vertical-align: top;
}
.usercard-name a { font-weight: bold; font-size: clamp(11px, 0.9vw, 13px); }
.usercard-avatar { margin: 3px auto; }
.usercard-avatar img { max-width: 60px; max-height: 60px; }
.avatar-placeholder { font-size: 32px; line-height: 1; }
.usercard-rank { color: var(--rank-color, #555); margin: 1px 0; }
.usercard-pips { color: #cc8800; }
.usercard-posts, .usercard-loc, .usercard-join { color: var(--text-muted); text-align: left; line-height: 1.5; }

/* post content — alias */
.post-content {
  background: var(--post-bg);
  padding: 0;
  vertical-align: top;
}
.post-meta {
  background: var(--breadcrumb-bg);
  border-bottom: 1px solid var(--breadcrumb-border);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* pagination a/span style (replaces .page-btn for <a> pagination) */
.pagination a, .pagination span {
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  background: var(--btn-bg);
  border: 1px outset var(--btn-border);
  color: var(--text-primary);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 12px);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination span.current { background: var(--header-steel); color: #fff; border-style: inset; cursor: default; }
.pagination span.ellipsis { background: transparent; border: none; color: var(--text-muted); }
.pagination a:hover { background: var(--board-row-hover); text-decoration: none; }

/* reply box */
.reply-box { margin-top: 8px; }

/* btn variants */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--btn-border);
  color: var(--text-primary);
  padding: 1px 8px;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: clamp(10px, 0.8vw, 12px);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover { background: var(--board-row-hover); text-decoration: none; }
.btn-sm { padding: 1px 6px; font-size: clamp(9px, 0.75vw, 11px); }
.btn.danger, button.danger { background: #990000; color: #fff; border-color: #660000; }

/* #forum-wrapper padding (already declared above, ensure content fills it) */
#forum-wrapper { padding: 4px; }

/* ── SCROLLBAR ERA FEEL ── */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--section-bar-bg); border: 1px solid var(--panel-border); }
::-webkit-scrollbar-thumb { background: var(--btn-bg); border: 1px outset var(--btn-border); }