/* ===== BLITTER — 1980s CRT Terminal Aesthetic ===== */

:root {
  --bg: #0a0f0a;
  --screen: #0d1a0d;
  --green: #33ff33;
  --green-dim: #1a8c1a;
  --green-dark: #0d4d0d;
  --amber: #ffb000;
  --amber-dim: #996600;
  --red: #ff3333;
  --text: #33ff33;
  --border: #1a8c1a;
  --glow: 0 0 8px rgba(51, 255, 51, 0.6);
  --font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --font-pixel: 'VT323', 'Courier New', monospace;
}

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

/* Apple II display font — user-supplied Print Char 21. */
@font-face {
  font-family: 'BlitterAppleII';
  src: url('/fonts/PrintChar21.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Commodore 64 display font — user-supplied Commodore 64 v6.3. */
@font-face {
  font-family: 'BlitterC64';
  src: url('/fonts/Commodore-64-v6.3.TTF') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


/* IBM CGA display font — user-supplied Ac437 IBM CGA. */
@font-face {
  font-family: 'BlitterCGA';
  src: url('/fonts/Ac437_IBM_CGA.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  height: 100%;
  background: #000;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  overflow-x: hidden;
}

/* CRT container */
.crt {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
}

.screen {
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: 100vh;
  background: var(--screen);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
}

/* Scanlines + CRT curvature illusion */
.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 1000;
}

.crt::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 999;
}

/* Subtle flicker */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.92; }
  94% { opacity: 1; }
  97% { opacity: 0.96; }
}

.screen {
  animation: flicker 4s infinite;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 2px solid var(--border);
  background: linear-gradient(180deg, #0f1f0f 0%, #0a150a 100%);
}


.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.logo-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.logo-mascot {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex: 0 0 auto;
  image-rendering: auto;
  filter: drop-shadow(0 0 10px rgba(84, 255, 0, 0.22));
}

.logo-mascot-pirate,
.logo-mascot-mac,
.logo-mascot-appleii,
.logo-mascot-c64 {
  display: none;
}

html[data-theme="pirate"] .logo-mascot-default,
html[data-theme="mac-system-6"] .logo-mascot-default,
html[data-theme="apple-ii"] .logo-mascot-default,
html[data-theme="commodore-64"] .logo-mascot-default {
  display: none;
}

html[data-theme="pirate"] .logo-mascot-pirate {
  display: block;
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 0 10px rgba(255, 200, 60, 0.22));
}

html[data-theme="mac-system-6"] .logo-mascot-mac {
  display: block;
  width: 74px;
  height: 74px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.20));
}

html[data-theme="apple-ii"] .logo-mascot-appleii {
  display: block;
  width: 78px;
  height: 78px;
  filter: none;
}

html[data-theme="commodore-64"] .logo-mascot-c64 {
  display: block;
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 0 8px rgba(230, 222, 116, 0.22));
}

.logo-text {
  font-family: var(--font-pixel);
  font-size: 42px;
  letter-spacing: 4px;
  color: var(--green);
  text-shadow: var(--glow);
  line-height: 1;
}

.logo-sub {
  display: block;
  font-size: 12px;
  color: var(--green-dim);
  letter-spacing: 2px;
  margin-top: -4px;
}

.nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav button, .btn {
  font-family: var(--font-mono);
  background: transparent;
  border: 1px solid var(--green-dim);
  color: var(--green);
  padding: 6px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  transition: all 0.15s;
}

.btn:hover, .nav button:hover {
  background: var(--green-dark);
  border-color: var(--green);
  box-shadow: var(--glow);
}

.btn.primary {
  background: var(--green-dark);
  border-color: var(--green);
}

.btn.primary:hover {
  background: var(--green);
  color: #000;
  text-shadow: none;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Panels */
.panel {
  border: 1px solid var(--border);
  background: rgba(0, 20, 0, 0.6);
  margin-bottom: 16px;
}

.terminal-header {
  background: var(--green-dark);
  color: var(--green);
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--border);
  text-shadow: var(--glow);
}

/* Auth */
#auth-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  border: 2px solid var(--border);
  background: rgba(0, 25, 0, 0.85);
  box-shadow: 0 0 30px rgba(51, 255, 51, 0.15);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--green-dim);
  padding: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  letter-spacing: 2px;
}

.tab.active {
  color: var(--green);
  background: var(--green-dark);
  text-shadow: var(--glow);
}

.auth-form {
  padding: 24px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--green-dim);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.field input, textarea {
  width: 100%;
  background: #001a00;
  border: 1px solid var(--border);
  color: var(--green);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  outline: none;
}

.field input:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.3);
}

.form-error {
  color: var(--red);
  font-size: 13px;
  margin-top: 12px;
  min-height: 18px;
}

/* App layout */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: 366px;
  flex: 0 0 366px;
  border-right: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(0, 15, 0, 0.5);
}

.user-card {
  border: 1px solid var(--border);
  padding: 12px;
  background: rgba(0, 30, 0, 0.4);
}

.user-card .name {
  font-family: var(--font-pixel);
  font-size: 24px;
  color: var(--green);
  text-shadow: var(--glow);
}

.user-card .handle {
  color: var(--green-dim);
  font-size: 13px;
}

/* Subtle PayPal support button above sidebar search */
.blitter-donate-form {
  margin: -4px 0 -4px;
  width: 100%;
}

.blitter-donate-button {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: rgba(0, 24, 0, 0.34);
  color: var(--green-dim);
  font: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.blitter-donate-button:hover,
.blitter-donate-button:focus-visible {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0, 45, 0, 0.58);
  outline: none;
}


.blitter-donate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}


.blitter-paypal-retro-badge {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 48px;
  padding: 2px 5px 1px;
  border: 1px solid #7d9fc5;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #dce8f5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 0 rgba(0,0,0,.12);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.7px;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

.paypal-retro-pay {
  color: #003087;
}

.paypal-retro-pal {
  color: #1d74b7;
}

.blitter-donate-label {
  letter-spacing: 1px;
}

/* Monochrome treatment for the classic Macintosh look. */
html[data-theme="mac-system-6"] .blitter-paypal-retro-badge {
  background: #fff;
  border-color: #000;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

html[data-theme="mac-system-6"] .paypal-retro-pay,
html[data-theme="mac-system-6"] .paypal-retro-pal {
  color: #000;
}

/* Subdue the badge slightly in terminal-style themes. */
html[data-theme="blitter-green"] .blitter-paypal-retro-badge,
html[data-theme="amber-terminal"] .blitter-paypal-retro-badge,
html[data-theme="apple-ii"] .blitter-paypal-retro-badge {
  filter: saturate(.72) brightness(.92);
}

html[data-theme="pirate"] .blitter-paypal-retro-badge {
  filter: sepia(.42) saturate(.9);
}

html[data-theme="continental"] .blitter-paypal-retro-badge {
  filter: sepia(.55) saturate(.72) brightness(.82);
}

html[data-theme="twitter-2009"] .blitter-paypal-retro-badge {
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.12);
}

/* Theme-specific donation treatment: deliberately quiet, not promotional. */
html[data-theme="amber-terminal"] .blitter-donate-button {
  background: rgba(45, 27, 0, .38);
}

html[data-theme="apple-ii"] .blitter-donate-button {
  border-radius: 0;
  background: #000;
}

html[data-theme="commodore-64"] .blitter-donate-button {
  background: #352879;
  border-color: #a7a4ff;
  color: #d0cfff;
}

html[data-theme="commodore-64"] .blitter-donate-button:hover,
html[data-theme="commodore-64"] .blitter-donate-button:focus-visible {
  background: #6c5eb5;
  color: #fff;
}

html[data-theme="ibm-cga"] .blitter-donate-button {
  background: #001b20;
  border-color: #55ffff;
  color: #55ffff;
}

html[data-theme="pirate"] .blitter-donate-button {
  background: #211207;
  border-color: #d29b4d;
  color: #d29b4d;
}

html[data-theme="continental"] .blitter-donate-button {
  background: #0d0b09;
  border-color: #8f7340;
  color: #b29a69;
  letter-spacing: 2px;
}

html[data-theme="mac-system-6"] .blitter-donate-button {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0;
}

html[data-theme="mac-system-6"] .blitter-donate-button:hover,
html[data-theme="mac-system-6"] .blitter-donate-button:focus-visible {
  background: #000 !important;
  color: #fff !important;
}

html[data-theme="twitter-2009"] .blitter-donate-form {
  margin: 0 0 4px;
}

html[data-theme="twitter-2009"] .blitter-donate-button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #2276a9;
  background: #eef7fb;
  border: 1px solid #c3dce8;
  border-radius: 4px;
  text-shadow: none;
}

html[data-theme="twitter-2009"] .blitter-donate-button:hover,
html[data-theme="twitter-2009"] .blitter-donate-button:focus-visible {
  color: #0b5f91;
  background: #fff;
  border-color: #9fc4d5;
}

.search-box {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.search-box input {
  flex: 1;
  background: #001a00;
  border: 1px solid var(--border);
  color: var(--green);
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.search-box input:focus {
  border-color: var(--green);
  box-shadow: 0 0 6px rgba(51, 255, 51, 0.3);
}

.search-box input::placeholder {
  color: var(--green-dim);
  opacity: 0.7;
}

.search-box .btn {
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* Search results */
.user-result {
  border: 1px solid var(--border);
  background: rgba(0, 20, 0, 0.45);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.user-result:hover {
  border-color: var(--green);
}

.user-result .name {
  font-family: var(--font-pixel);
  font-size: 22px;
  color: var(--green);
  text-shadow: var(--glow);
}

.user-result .handle {
  color: var(--green-dim);
  font-size: 13px;
}

.user-result .bio {
  margin-top: 6px;
  font-size: 13px;
  color: var(--green-dim);
}

.user-result .stats {
  margin-top: 8px;
  font-size: 12px;
  color: var(--green-dim);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-btn {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--green-dim);
  padding: 8px 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 14px;
  white-space: nowrap;
}

.side-btn:hover, .side-btn.active {
  color: var(--green);
  background: var(--green-dark);
  text-shadow: var(--glow);
}

.status-box {
  margin-top: auto;
  font-size: 11px;
  color: var(--green-dim);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.online {
  color: var(--green);
  text-shadow: var(--glow);
}

.main {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
}

/* Compose */
.compose {
  margin-bottom: 20px;
}

.compose textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: none;
  border-bottom: 1px solid var(--border);
  background: #001400;
  padding: 12px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 16px;
}

.compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
}

#char-count {
  font-size: 12px;
  color: var(--green-dim);
}

/* Feed / Blits */
.feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blit {
  border: 1px solid var(--border);
  background: rgba(0, 20, 0, 0.45);
  padding: 14px 16px;
  transition: border-color 0.15s;
}

.blit:hover {
  border-color: var(--green);
}

.blit-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.blit-author {
  font-family: var(--font-pixel);
  font-size: 22px;
  color: var(--green);
  cursor: pointer;
  text-shadow: var(--glow);
}

.blit-author:hover {
  text-decoration: underline;
}

.blit-handle {
  color: var(--green-dim);
  font-size: 13px;
  margin-left: 8px;
}

.blit-time {
  font-size: 12px;
  color: var(--green-dim);
}

.blit-content {
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
}

.blit-content a.hashtag,
.blit-content a.mention {
  color: var(--amber);
  text-decoration: none;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.5);
  cursor: pointer;
}

.blit-content a.hashtag:hover,
.blit-content a.mention:hover {
  text-decoration: underline;
}

.trending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 25, 0, 0.4);
}

.trending-tag {
  background: var(--green-dark);
  border: 1px solid var(--border);
  color: var(--amber);
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-mono);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.4);
}

.trending-tag:hover {
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.3);
}

.trending-tag .count {
  color: var(--green-dim);
  margin-left: 4px;
  font-size: 11px;
}

.blit-actions {
  display: flex;
  gap: 16px;
  font-size: 13px;
}

.blit-actions button {
  background: none;
  border: none;
  color: var(--green-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  padding: 2px 0;
}

.blit-actions button:hover {
  color: var(--green);
  text-shadow: var(--glow);
}

.blit-actions button.liked {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.6);
}

.blit-actions button.reblitted {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.6);
}

.blit-actions .reblit-count {
  color: var(--green-dim);
  font-size: 13px;
}

.reblit-banner {
  font-size: 12px;
  color: var(--green-dim);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.reblit-banner .blit-author {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  cursor: pointer;
  text-shadow: 0 0 4px rgba(255, 176, 0, 0.4);
}

.loading, .empty {
  text-align: center;
  padding: 40px;
  color: var(--green-dim);
  letter-spacing: 2px;
}

/* Profile view extras */
.profile-header {
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 20px;
  background: rgba(0, 25, 0, 0.5);
}

.profile-header .name {
  font-family: var(--font-pixel);
  font-size: 36px;
  color: var(--green);
  text-shadow: var(--glow);
}

.profile-header .handle {
  color: var(--green-dim);
  margin-bottom: 12px;
}

.profile-stats {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--green-dim);
  margin-top: 12px;
}

.profile-stats span strong {
  color: var(--green);
}

.profile-stats .stat-link {
  cursor: pointer;
  transition: color 0.15s;
}

.profile-stats .stat-link:hover {
  color: var(--green);
  text-shadow: var(--glow);
}

.profile-stats .stat-link:hover strong {
  color: var(--amber);
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 10px 20px;
  font-size: 11px;
  color: var(--green-dim);
  text-align: center;
  letter-spacing: 1px;
}

/* ===== Dial-up BBS intro sequence ===== */
#dialer-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.dialer-box {
  width: 100%;
  max-width: 560px;
  border: 2px solid var(--border);
  background: rgba(0, 25, 0, 0.85);
  box-shadow: 0 0 30px rgba(51, 255, 51, 0.15);
  padding: 20px 24px 16px;
}

.ascii-logo {
  color: var(--green-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  white-space: pre;
  overflow-x: auto;
  margin-bottom: 12px;
  transition: color 0.4s, text-shadow 0.4s;
}

.ascii-logo.lit {
  color: var(--green);
  text-shadow: var(--glow);
}

.dial-info {
  font-size: 12px;
  color: var(--green-dim);
  letter-spacing: 1px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  margin-bottom: 12px;
}

.dial-terminal {
  min-height: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: #001000;
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 14px;
}

.dial-line {
  color: var(--green);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.3em;
}

.dial-line.dim {
  color: var(--green-dim);
}

.dial-line.ok {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.5);
}

.dial-line.banner {
  color: var(--green);
  text-shadow: var(--glow);
  letter-spacing: 2px;
  margin-top: 6px;
}

.dial-line.blink-prompt {
  color: var(--amber);
  cursor: pointer;
  animation: dial-blink 1s steps(1) infinite;
}

@keyframes dial-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

.dial-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.sound-toggle {
  font-size: 12px;
  color: var(--green-dim);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dial-skip {
  text-align: center;
  margin-top: 14px;
}

.dial-skip a, .redial-row a {
  color: var(--green-dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: none;
}

.dial-skip a:hover, .redial-row a:hover {
  color: var(--green);
  text-shadow: var(--glow);
}

.redial-row {
  text-align: center;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #001000;
}
::-webkit-scrollbar-thumb {
  background: var(--green-dark);
  border: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 700px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .status-box {
    display: none;
  }
  .logo-text {
    font-size: 28px;
  }
}


/* Notifications + replies */
.badge {
  background: var(--amber);
  color: #000;
  font-size: 11px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 2px;
  text-shadow: none;
}
.reply-banner {
  font-size: 12px;
  color: var(--green-dim);
  margin-bottom: 8px;
}
.thread-link {
  background: none;
  border: none;
  color: var(--amber);
  font-family: var(--font-mono);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.thread-parent {
  opacity: 0.85;
  border-left: 2px solid var(--border);
  padding-left: 8px;
  margin-bottom: 8px;
}
.thread-root .blit {
  border-color: var(--green);
}
.notif-item {
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  background: rgba(0, 20, 0, 0.4);
}
.notif-item:hover {
  border-color: var(--green);
}
.notif-item.notif-unread {
  border-color: var(--amber);
  background: rgba(40, 30, 0, 0.35);
}
.notif-snippet {
  margin-top: 6px;
  color: var(--green-dim);
  font-size: 13px;
}


/* Password show/hide */
.password-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.password-wrap input {
  flex: 1;
  border-right: none;
  min-width: 0;
}
.toggle-password {
  background: #001a00;
  border: 1px solid var(--border);
  border-left: none;
  color: var(--green-dim);
  cursor: pointer;
  padding: 0 12px;
  font-size: 16px;
  font-family: var(--font-mono);
  line-height: 1;
}
.toggle-password:hover {
  color: var(--green);
  text-shadow: var(--glow);
  background: var(--green-dark);
}
.toggle-password.active {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.5);
}


/* Quote reblit */
.quote-embed {
  border: 1px solid var(--border);
  background: rgba(0, 25, 0, 0.5);
  padding: 10px 12px;
  margin: 8px 0 12px;
  cursor: pointer;
}
.quote-embed:hover {
  border-color: var(--green-dim);
}
.quote-author {
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--green-dim);
}
.quote-content {
  font-size: 14px;
  line-height: 1.4;
  color: var(--green);
  white-space: pre-wrap;
  word-break: break-word;
}


/* Direct messages */
.dm-convo {
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  background: rgba(0, 20, 0, 0.4);
}
.dm-convo:hover { border-color: var(--green); }
.dm-convo.dm-unread { border-color: var(--amber); }
.dm-preview {
  color: var(--green-dim);
  font-size: 13px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-thread {
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 8px;
  padding-right: 4px;
}
.dm-msg {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  max-width: 90%;
}
.dm-mine {
  margin-left: auto;
  border-color: var(--green-dim);
  background: rgba(0, 40, 0, 0.35);
}
.dm-theirs {
  margin-right: auto;
  background: rgba(0, 20, 0, 0.4);
}
.dm-meta {
  font-size: 12px;
  color: var(--green-dim);
  margin-bottom: 4px;
}
.dm-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.form-success {
  color: var(--green);
  margin-top: 10px;
  min-height: 1em;
}

/* --- Profile pictures / phosphor avatars --- */
.user-avatar {
  flex: 0 0 auto;
  object-fit: cover;
  image-rendering: auto;
  border: 1px solid var(--border);
  background: #001000;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.18);
}

.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  color: var(--green);
  text-shadow: var(--glow);
  background:
    linear-gradient(45deg, transparent 46%, rgba(51,255,51,.16) 48%, rgba(51,255,51,.16) 52%, transparent 54%),
    #001000;
}

.avatar-sidebar,
.avatar-list,
.avatar-blit {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 2px;
}

.avatar-profile {
  width: 128px;
  height: 128px;
  min-width: 128px;
  border-radius: 2px;
  font-size: 64px;
  box-shadow: 0 0 14px rgba(51, 255, 51, 0.22);
}

.avatar-sidebar,
.avatar-list,
.avatar-blit {
  font-size: 26px;
}

.user-card-row,
.profile-identity,
.blit-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blit-header {
  align-items: flex-start;
}

.user-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.user-result-body {
  min-width: 0;
  flex: 1;
}

.profile-identity {
  align-items: flex-start;
  margin-bottom: 12px;
}

.avatar-editor {
  padding: 16px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.avatar-editor-controls {
  flex: 1;
  min-width: 0;
}

.avatar-editor input[type="file"] {
  width: 100%;
  color: var(--green);
  font-family: var(--font-mono);
  background: #001400;
  border: 1px solid var(--border);
  padding: 8px;
}

.avatar-note {
  margin-top: 8px;
  color: var(--green-dim);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 650px) {
  .profile-identity,
  .avatar-editor {
    flex-direction: column;
  }
  .profile-stats {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
}


/* ---------- News Wire ---------- */
.news-wire-header { margin-bottom: 14px; }
.news-wire-meta { padding: 10px 12px; color: var(--green-dim); font-size: 13px; letter-spacing: 0.03em; }
.news-story { padding: 14px 16px; margin-bottom: 12px; }
.news-category { color: var(--amber); font-size: 13px; margin-bottom: 6px; }
.news-title { display: block; color: var(--green); font-family: var(--font-display); font-size: 24px; line-height: 1.05; text-decoration: none; text-shadow: 0 0 7px rgba(0,255,80,.45); }
.news-title:hover { text-decoration: underline; }
.news-date { color: var(--green-dim); font-size: 12px; margin: 5px 0 10px; }
.news-summary { line-height: 1.45; margin: 8px 0 10px; }
.news-actions { font-size: 13px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.news-actions a { color: var(--green); }
.news-full-text {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  background: rgba(0, 18, 0, .35);
}
.news-article-body {
  margin-top: 10px;
  line-height: 1.62;
  white-space: normal;
}
.news-article-body br + br { line-height: 2; }

/* ---------- News Wire Service Upgrade ---------- */
.news-wire-ticker {
  padding: 8px 12px;
  border-bottom: 1px dashed var(--border);
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: .08em;
}
.news-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px 12px;
  border-top: 1px dashed var(--border);
}
.news-filter {
  background: #001500;
  color: var(--green-dim);
  border: 1px solid var(--border);
  padding: 6px 9px;
  font-family: var(--font-mono);
  cursor: pointer;
  box-shadow: inset 0 0 8px rgba(0,255,80,.04);
}
.news-filter:hover,
.news-filter.active {
  color: var(--green);
  border-color: var(--green);
  text-shadow: 0 0 6px rgba(0,255,80,.7);
  box-shadow: inset 0 0 10px rgba(0,255,80,.08), 0 0 7px rgba(0,255,80,.14);
}
.news-story.breaking {
  border-style: double;
  box-shadow: inset 0 0 18px rgba(255,176,0,.045), 0 0 10px rgba(255,176,0,.08);
}
.news-breaking {
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .09em;
  margin: -2px 0 8px;
  animation: newsBreakingBlink 1.2s steps(2, end) infinite;
}
@keyframes newsBreakingBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: .5; }
}

.news-pagination {
  margin-top: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.news-page-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.news-page {
  min-width: 34px;
  background: #001500;
  color: var(--green-dim);
  border: 1px solid var(--border);
  padding: 6px 8px;
  font-family: var(--font-mono);
  cursor: pointer;
}
.news-page:hover,
.news-page.active {
  color: var(--green);
  border-color: var(--green);
  text-shadow: 0 0 6px rgba(0,255,80,.7);
}
.news-page-meta {
  flex-basis: 100%;
  text-align: center;
  color: var(--green-dim);
  font-size: 12px;
  margin-top: 4px;
}

@media (max-width: 680px) {
  .news-filter { flex: 1 1 auto; }
  .news-wire-ticker { white-space: normal; }
}


/* SYSOP News Wire Administration */
.news-admin-header { padding-bottom: 14px; margin-bottom: 14px; }
.news-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; }
.news-admin-header > .field { margin:14px; }
.news-admin-actions { display:flex; gap:10px; flex-wrap:wrap; margin:12px 14px 0; }
.news-admin-row { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px dashed var(--border); }
.news-admin-source { padding:14px; margin-bottom:12px; }
.news-admin-source select, .news-admin-header select { width:100%; background:#001a00; border:1px solid var(--border); color:var(--green); padding:9px; font-family:var(--font-mono); }
@media (max-width:700px){ .news-admin-grid { grid-template-columns:1fr; } .news-admin-row { align-items:flex-start; flex-direction:column; } }

/* Old-school mechanical page counter */
.page-counter {
  display: inline-flex;
  gap: 1px;
  margin: 3px 0 5px;
  padding: 2px;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: inset 0 0 8px rgba(0, 255, 80, 0.12);
}
.page-counter span {
  display: inline-block;
  min-width: 12px;
  padding: 1px 2px;
  text-align: center;
  color: var(--green);
  background: #001000;
  border: 1px solid #154515;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.15;
  text-shadow: var(--glow);
}


/* Clickable current-user avatar in sidebar */
.sidebar-avatar-link {
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: 4px;
}
.sidebar-avatar-link:focus { outline: none; }
.sidebar-avatar-link:focus-visible {
  outline: 1px dashed var(--green);
  outline-offset: 3px;
}
.sidebar-avatar-link:hover .user-avatar {
  filter: brightness(1.2);
}

/* Clickable avatars in blit feeds */
.blit-avatar-link {
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: 4px;
}
.blit-avatar-link:focus { outline: none; }
.blit-avatar-link:focus-visible {
  outline: 1px dashed var(--green);
  outline-offset: 3px;
}
.blit-avatar-link:hover .user-avatar {
  filter: brightness(1.2);
}

/* Privacy controls + trending users */
.privacy-banner {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px dashed var(--amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13px;
}
.trending-users {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0 18px;
}
.trending-user {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  padding: 10px;
  cursor: pointer;
  background: rgba(0,255,80,0.025);
}
.trending-user:hover { box-shadow: inset 0 0 12px rgba(0,255,80,0.08); }
.auth-note { color: var(--green-dim); font-size: 14px; line-height: 1.35; }

/* Retro Marketplace */
.market-head { margin-bottom:14px; }
.market-tools { display:flex; gap:8px; flex-wrap:wrap; padding:14px; align-items:center; }
.market-tools input { min-width:220px; flex:1; }
.market-tools input, .market-tools select, .market-form select { background:#001a00; border:1px solid var(--border); color:var(--green); padding:9px; font-family:var(--font-mono); }
.market-head .auth-note { padding:0 14px 14px; }
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.market-card { position:relative; border:1px solid var(--border); background:rgba(0,255,80,.025); cursor:pointer; overflow:hidden; }
.market-card:hover { box-shadow:0 0 14px rgba(0,255,80,.12), inset 0 0 10px rgba(0,255,80,.04); transform:translateY(-1px); }
.market-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.market-no-image { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--green-dim); background:repeating-linear-gradient(45deg,#001000,#001000 8px,#001600 8px,#001600 16px); border-bottom:1px solid var(--border); }
.market-card-body { padding:10px; }
.market-title { font-size:18px; line-height:1.15; min-height:42px; }
.market-price { font-size:20px; color:var(--amber); margin:6px 0; text-shadow:0 0 6px currentColor; }
.market-meta { color:var(--green-dim); font-size:12px; margin-top:4px; }
.market-sold { opacity:.75; }
.market-sold-stamp { display:inline-block; border:2px solid var(--amber); color:var(--amber); padding:2px 8px; font-weight:bold; transform:rotate(-4deg); }
.market-pages { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:16px 0; }
.market-detail { overflow:hidden; }
.market-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px; padding:4px; background:#000; }
.market-gallery img { width:100%; height:320px; object-fit:contain; background:#000; }
.market-detail-no-image { min-height:260px; aspect-ratio:auto; }
.market-detail-body { padding:16px; }
.market-detail-body h2 { margin:0 0 8px; font-size:28px; }
.market-price-large { font-size:30px; }
.market-sold-big { font-size:24px; margin:8px 0 14px; }
.market-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; padding:12px 0; border-top:1px dashed var(--border); border-bottom:1px dashed var(--border); }
.market-description, .market-shipping { margin:16px 0; line-height:1.5; }
.market-shipping { padding:10px; border:1px dashed var(--border); }
.market-actions { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.market-form { padding:16px; }
.market-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.market-form textarea { width:100%; background:#001400; border:1px solid var(--border); color:var(--green); padding:10px; font-family:var(--font-mono); resize:vertical; }
.market-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.market-edit-images { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:12px 0; }
.market-edit-images img { width:100%; aspect-ratio:1; object-fit:cover; display:block; margin-bottom:4px; }
@media(max-width:700px){ .market-form-row{grid-template-columns:1fr}.market-gallery img{height:auto;max-height:70vh}.market-tools>*{width:100%}.market-tools input{min-width:0}.market-grid{grid-template-columns:1fr 1fr}.market-title{font-size:15px}.market-price{font-size:17px} }
@media(max-width:480px){ .market-grid{grid-template-columns:1fr} }
.market-type-badge { display:inline-block; font-size:11px; letter-spacing:1px; border:1px solid var(--border); padding:2px 6px; color:var(--green-dim); margin-bottom:5px; }
.market-countdown { color:var(--amber); text-shadow:0 0 5px currentColor; }
.market-auction-box { margin:12px 0; padding:12px; border:1px solid var(--amber); background:rgba(255,180,0,.035); line-height:1.7; }
.market-bid-form { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.market-bid-form input { min-width:160px; background:#001400; border:1px solid var(--border); color:var(--green); padding:9px; font-family:var(--font-mono); }
.market-bids { margin:18px 0; border-top:1px dashed var(--border); padding-top:12px; }
.market-bid-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:6px 0; border-bottom:1px dotted rgba(0,255,80,.15); font-size:13px; }
@media(max-width:600px){ .market-bid-row{grid-template-columns:1fr auto}.market-bid-row span:last-child{grid-column:1/-1;color:var(--green-dim)} }

/* SYSOP Marketplace administration */
.market-admin-panel { overflow:hidden; }
.market-admin-stats { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; padding:14px; }
.market-admin-stats > div { border:1px solid var(--border); padding:12px; text-align:center; background:rgba(0,255,80,.025); }
.market-admin-stats strong { display:block; font-size:25px; color:var(--amber); }
.market-admin-stats span { display:block; margin-top:4px; color:var(--green-dim); font-size:11px; letter-spacing:1px; }
.market-admin-section { padding:14px; border-top:1px dashed var(--border); }
.market-admin-section h3 { margin:0 0 10px; }
.market-admin-add { display:flex; gap:8px; flex-wrap:wrap; }
.market-admin-add input, .market-admin-cat-name { background:#001400; border:1px solid var(--border); color:var(--green); padding:9px; font-family:var(--font-mono); }
.market-admin-add input { min-width:260px; flex:1; }
.market-admin-category { display:grid; grid-template-columns:minmax(180px,1.5fr) auto auto auto auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px dotted rgba(0,255,80,.18); }
.market-admin-toggle { white-space:nowrap; }
.market-admin-protected { color:var(--amber); font-size:11px; }
.market-admin-listing { display:grid; grid-template-columns:minmax(180px,2fr) minmax(90px,1fr) minmax(130px,1fr) minmax(130px,1fr) auto auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px dotted rgba(0,255,80,.18); font-size:12px; }
.market-admin-title { appearance:none; border:0; background:none; color:var(--green); font:inherit; text-align:left; padding:0; cursor:pointer; text-decoration:underline; }
.market-admin-listing strong { color:var(--amber); white-space:nowrap; }
@media(max-width:850px){.market-admin-stats{grid-template-columns:1fr 1fr}.market-admin-category,.market-admin-listing{grid-template-columns:1fr}.market-admin-listing .btn,.market-admin-category .btn{width:100%}}

/* MY BLITTER dashboard */
.dashboard-panel { margin-bottom: 14px; }
.dashboard-greeting { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--green-dim); }
.dashboard-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:12px; }
.dashboard-stat { background:#001400; border:1px solid var(--border); color:var(--green); padding:12px 8px; font:inherit; cursor:pointer; text-align:center; }
.dashboard-stat:hover,.dashboard-stat:focus { background:#003000; box-shadow:0 0 8px rgba(80,255,80,.22); }
.dashboard-stat b { display:block; font-family:var(--font-display); font-size:30px; line-height:1; margin-bottom:6px; }
.dashboard-stat span { display:block; font-size:11px; color:var(--green-dim); }
.dashboard-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.dashboard-section { overflow:hidden; }
.dashboard-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:9px 12px; border-bottom:1px dotted var(--border); }
.dashboard-row small { grid-column:1 / -1; color:var(--green-dim); }
.dashboard-link { cursor:pointer; }
.dashboard-link:hover { background:#002600; }
.dashboard-more { margin:10px 12px; }
@media (max-width:900px){ .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.dashboard-columns{grid-template-columns:1fr;} }


/* ===== DISPLAY MODE — selectable retro hardware personalities ===== */
:root {
  --theme-page: #000;
  --theme-bg: #0a0f0a;
  --theme-screen: #0d1a0d;
  --theme-panel: rgba(0, 20, 0, 0.6);
  --theme-input: #001a00;
  --theme-header-a: #0f1f0f;
  --theme-header-b: #0a150a;
  --theme-card: rgba(0,255,80,.025);
  --theme-hover: #003000;
  --theme-scanline: rgba(0,0,0,.15);
  --theme-glow-rgb: 51,255,51;
  --theme-radius: 0px;
}

.display-mode-bar {
  position: relative;
  z-index: 1101;
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: var(--theme-page);
  color: var(--green-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
}
.display-mode-inner {
  min-height: 28px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.display-mode-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(var(--theme-glow-rgb), .8);
}
.display-mode-bar select {
  appearance: auto;
  background: var(--theme-input);
  color: var(--green);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 11px;
  padding: 2px 6px;
  outline: none;
  text-transform: uppercase;
}
.display-mode-bar select:focus { border-color: var(--green); box-shadow: var(--glow); }
.display-mode-status { opacity: .65; min-width: 82px; text-align: left; }

/* Make original components consume the active hardware palette. */
html, body { background: var(--theme-page); }
.crt { background: var(--theme-bg); }
.screen { background: var(--theme-screen); }
.header { background: linear-gradient(180deg, var(--theme-header-a) 0%, var(--theme-header-b) 100%); }
.panel { background: var(--theme-panel); border-radius: var(--theme-radius); }
.auth-box { background: var(--theme-panel); }
.field input, textarea,
.market-tools input, .market-tools select, .market-form select,
.market-form textarea, .market-bid-form input,
.market-admin-add input, .market-admin-cat-name,
.dashboard-stat { background: var(--theme-input); }
.market-card, .market-admin-stats > div, .trending-user { background: var(--theme-card); }
.dashboard-stat:hover,.dashboard-stat:focus,.dashboard-link:hover { background: var(--theme-hover); }
.scanlines { background: repeating-linear-gradient(0deg, var(--theme-scanline) 0px, var(--theme-scanline) 1px, transparent 1px, transparent 3px); }

/* 1. Original Blitter phosphor — deliberately unchanged. */
html[data-theme="blitter-green"] {
  --theme-page:#000; --theme-bg:#0a0f0a; --theme-screen:#0d1a0d; --theme-panel:rgba(0,20,0,.60);
  --theme-input:#001a00; --theme-header-a:#0f1f0f; --theme-header-b:#0a150a; --theme-card:rgba(0,255,80,.025);
  --theme-hover:#003000; --theme-glow-rgb:51,255,51;
}

/* 2. Amber serial terminal — warm P3 phosphor glow. */
html[data-theme="amber-terminal"] {
  --bg:#120d02; --screen:#171003; --green:#ffb000; --green-dim:#b87900; --green-dark:#4f3100;
  --amber:#ffe27a; --amber-dim:#b78a24; --red:#ff654d; --text:#ffc14d; --border:#9b6500;
  --glow:0 0 9px rgba(255,176,0,.65);
  --theme-page:#050300; --theme-bg:#120d02; --theme-screen:#171003; --theme-panel:rgba(40,25,0,.68);
  --theme-input:#211300; --theme-header-a:#281900; --theme-header-b:#160d00; --theme-card:rgba(255,176,0,.035);
  --theme-hover:#3b2500; --theme-glow-rgb:255,176,0; --theme-scanline:rgba(25,10,0,.25);
}

/* 3. Apple II — crisp monochrome monitor, white data with Apple-green controls. */
html[data-theme="apple-ii"] {
  --font-mono:'BlitterAppleII', monospace; --font-pixel:'BlitterAppleII', monospace; --font-display:'BlitterAppleII', monospace;
  --bg:#000; --screen:#030603; --green:#6dff72; --green-dim:#39b84b; --green-dark:#103c16;
  --amber:#f5f5f5; --amber-dim:#b7c2b7; --red:#ff6868; --text:#e7ffe8; --border:#35a844;
  --glow:0 0 5px rgba(109,255,114,.52);
  --theme-page:#000; --theme-bg:#000; --theme-screen:#030603; --theme-panel:rgba(0,10,0,.82);
  --theme-input:#000; --theme-header-a:#071107; --theme-header-b:#000; --theme-card:rgba(109,255,114,.018);
  --theme-hover:#0b260d; --theme-glow-rgb:109,255,114; --theme-scanline:rgba(0,0,0,.28);
}
html[data-theme="apple-ii"] .screen { animation:none; }
html[data-theme="apple-ii"] .logo-text { letter-spacing:2px; }
html[data-theme="apple-ii"] .btn, html[data-theme="apple-ii"] input, html[data-theme="apple-ii"] select, html[data-theme="apple-ii"] textarea { border-radius:0 !important; }
html[data-theme="apple-ii"] body,
html[data-theme="apple-ii"] button,
html[data-theme="apple-ii"] input,
html[data-theme="apple-ii"] select,
html[data-theme="apple-ii"] textarea {
  font-family:'BlitterAppleII', monospace !important;
  font-weight:400 !important;
  letter-spacing:.035em;
}
html[data-theme="apple-ii"] .logo-text,
html[data-theme="apple-ii"] .terminal-header,
html[data-theme="apple-ii"] h1,
html[data-theme="apple-ii"] h2,
html[data-theme="apple-ii"] h3 {
  font-family:'BlitterAppleII', monospace !important;
  font-weight:400 !important;
}


/* 4. Commodore 64 — blue-on-blue BASIC screen energy. */
html[data-theme="commodore-64"] {
  --font-mono:'BlitterC64', monospace; --font-pixel:'BlitterC64', monospace; --font-display:'BlitterC64', monospace;
  --bg:#40318d; --screen:#40318d; --green:#a7a4ff; --green-dim:#7774d6; --green-dark:#352879;
  --amber:#ffffff; --amber-dim:#c8c7ff; --red:#ff8caa; --text:#a7a4ff; --border:#a7a4ff;
  --glow:0 0 6px rgba(167,164,255,.48);
  --theme-page:#28206b; --theme-bg:#28206b; --theme-screen:#40318d; --theme-panel:rgba(49,38,119,.82);
  --theme-input:#352879; --theme-header-a:#352879; --theme-header-b:#2c226c; --theme-card:rgba(167,164,255,.055);
  --theme-hover:#5145a3; --theme-glow-rgb:167,164,255; --theme-scanline:rgba(25,20,70,.20);
}
html[data-theme="commodore-64"] .screen { border-left:12px solid #6c5eb5; border-right:12px solid #6c5eb5; }
html[data-theme="commodore-64"] body,
html[data-theme="commodore-64"] button,
html[data-theme="commodore-64"] input,
html[data-theme="commodore-64"] select,
html[data-theme="commodore-64"] textarea {
  font-family:'BlitterC64', monospace !important;
  font-weight:400 !important;
  letter-spacing:.02em;
}
html[data-theme="commodore-64"] .logo-text,
html[data-theme="commodore-64"] .terminal-header,
html[data-theme="commodore-64"] h1,
html[data-theme="commodore-64"] h2,
html[data-theme="commodore-64"] h3 {
  font-family:'BlitterC64', monospace !important;
  font-weight:400 !important;
}

@media (min-width: 821px) {
  html[data-theme="commodore-64"] .sidebar {
    width: 450px;
    min-width: 450px;
    flex: 0 0 450px;
    box-sizing: border-box;
    overflow: visible;
  }

  html[data-theme="commodore-64"] .side-nav {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 20px;
  }

  html[data-theme="commodore-64"] .side-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
    text-overflow: initial;
    padding-right: 20px;
  }
}

/* 5. IBM CGA — unapologetic cyan/magenta/white. */
html[data-theme="ibm-cga"] {
  --font-mono:'BlitterCGA', monospace; --font-pixel:'BlitterCGA', monospace; --font-display:'BlitterCGA', monospace;
  --bg:#000; --screen:#05000a; --green:#55ffff; --green-dim:#00aaaa; --green-dark:#003f46;
  --amber:#ff55ff; --amber-dim:#aa00aa; --red:#ff5555; --text:#ffffff; --border:#00aaaa;
  --glow:0 0 7px rgba(85,255,255,.48);
  --theme-page:#000; --theme-bg:#000; --theme-screen:#05000a; --theme-panel:rgba(0,20,25,.72);
  --theme-input:#001b20; --theme-header-a:#001e26; --theme-header-b:#110019; --theme-card:rgba(85,255,255,.03);
  --theme-hover:#102c34; --theme-glow-rgb:85,255,255; --theme-scanline:rgba(0,0,0,.22);
}
html[data-theme="ibm-cga"] body,
html[data-theme="ibm-cga"] button,
html[data-theme="ibm-cga"] input,
html[data-theme="ibm-cga"] select,
html[data-theme="ibm-cga"] textarea {
  font-family:'BlitterCGA', monospace !important;
  font-weight:400 !important;
  letter-spacing:.015em;
}
html[data-theme="ibm-cga"] .logo-text,
html[data-theme="ibm-cga"] .terminal-header,
html[data-theme="ibm-cga"] h1,
html[data-theme="ibm-cga"] h2,
html[data-theme="ibm-cga"] h3 {
  font-family:'BlitterCGA', monospace !important;
  font-weight:400 !important;
}
html[data-theme="ibm-cga"] .terminal-header,
html[data-theme="ibm-cga"] .market-price,
html[data-theme="ibm-cga"] .market-admin-stats strong { color:#ff55ff; }
html[data-theme="ibm-cga"] .btn.primary { border-color:#ff55ff; color:#ff55ff; background:#2d0030; }
html[data-theme="ibm-cga"] .btn.primary:hover { background:#ff55ff; color:#000; }

/* 6. Macintosh System 6 — a full monochrome desktop/interface transformation. */
html[data-theme="mac-system-6"] {
  --font-mono: "Chicago", "Charcoal", "Geneva", "Helvetica", Arial, sans-serif;
  --font-pixel: "Chicago", "Charcoal", "Geneva", "Helvetica", Arial, sans-serif;
  --font-display: "Chicago", "Charcoal", "Geneva", "Helvetica", Arial, sans-serif;
  --bg:#bdbdbd; --screen:#d8d8d8; --green:#000; --green-dim:#222; --green-dark:#d8d8d8;
  --amber:#000; --amber-dim:#444; --red:#000; --text:#000; --border:#000;
  --glow:none;
  --theme-page:#bdbdbd; --theme-bg:#bdbdbd; --theme-screen:#d8d8d8; --theme-panel:#fff;
  --theme-input:#fff; --theme-header-a:#fff; --theme-header-b:#fff; --theme-card:#fff;
  --theme-hover:#000; --theme-glow-rgb:0,0,0; --theme-scanline:transparent; --theme-radius:0;
}

/* Macintosh desktop: no CRT, no phosphor, no animation. */
html[data-theme="mac-system-6"],
html[data-theme="mac-system-6"] body {
  background-color:#bdbdbd !important;
  background-image:
    linear-gradient(45deg,#aaa 25%,transparent 25%),
    linear-gradient(-45deg,#aaa 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#aaa 75%),
    linear-gradient(-45deg,transparent 75%,#aaa 75%) !important;
  background-size:4px 4px !important;
  background-position:0 0,0 2px,2px -2px,-2px 0 !important;
  color:#000 !important;
  font-family:var(--font-mono) !important;
  font-size:14px;
}
html[data-theme="mac-system-6"] .crt { background:transparent !important; }
html[data-theme="mac-system-6"] .crt::before,
html[data-theme="mac-system-6"] .scanlines { display:none !important; }
html[data-theme="mac-system-6"] .screen {
  width:100%; max-width:1220px; min-height:100vh;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
  padding:0 10px 18px;
}

/* System menu bar. The existing Display Mode control remains fully functional. */
html[data-theme="mac-system-6"] .display-mode-bar {
  position:sticky; top:0; z-index:1500;
  background:#fff !important; color:#000 !important;
  border:0 !important; border-bottom:2px solid #000 !important;
  font-family:var(--font-mono) !important; font-size:13px; letter-spacing:0;
  box-shadow:none;
}
html[data-theme="mac-system-6"] .display-mode-inner {
  min-height:28px; padding:3px 8px; justify-content:flex-end; gap:6px;
}
html[data-theme="mac-system-6"] .display-mode-led { display:none; }
html[data-theme="mac-system-6"] .display-mode-bar label { font-weight:bold; }
html[data-theme="mac-system-6"] .display-mode-bar select {
  background:#fff !important; color:#000 !important;
  border:1px solid #000 !important; border-radius:0 !important;
  padding:1px 20px 1px 5px; text-transform:none; letter-spacing:0;
  box-shadow:inset 1px 1px #fff, inset -1px -1px #777;
}
html[data-theme="mac-system-6"] .display-mode-status { color:#000 !important; opacity:1; min-width:auto; }
html[data-theme="mac-system-6"] .display-mode-status::after { content:" · System 6"; }

/* Main Blitter window/title bar. */
html[data-theme="mac-system-6"] .header {
  position:relative; margin:14px 8px 0; padding:8px 12px;
  background:repeating-linear-gradient(0deg,#000 0,#000 1px,#fff 1px,#fff 3px) !important;
  color:#000 !important; border:2px solid #000 !important;
  box-shadow:3px 3px 0 #000; min-height:58px;
}
html[data-theme="mac-system-6"] .logo {
  background:#fff; padding:2px 12px; border-left:6px solid #fff; border-right:6px solid #fff;
}
html[data-theme="mac-system-6"] .logo-text {
  color:#000 !important; text-shadow:none !important; font-family:var(--font-display) !important;
  font-size:25px; font-weight:bold; letter-spacing:0;
}
html[data-theme="mac-system-6"] .logo-text::before { content:"□ "; font-weight:normal; }
html[data-theme="mac-system-6"] .logo-sub { color:#000 !important; font-size:10px; letter-spacing:0; margin-top:0; }
html[data-theme="mac-system-6"] .nav { background:#fff; padding:3px; }

/* App layout becomes two Macintosh windows sitting on the desktop. */
html[data-theme="mac-system-6"] #app { padding:12px 8px 0; }
html[data-theme="mac-system-6"] .layout { gap:14px; align-items:flex-start; }
html[data-theme="mac-system-6"] .sidebar {
  width:381px; min-width:381px; flex:0 0 381px; margin:0; padding:26px 10px 10px;
  background:#fff !important; border:2px solid #000 !important;
  box-shadow:3px 3px 0 #000; gap:12px; position:relative;
}
html[data-theme="mac-system-6"] .sidebar::before {
  content:"Blitter Control Panel"; position:absolute; left:30px; right:30px; top:5px;
  text-align:center; font-weight:bold; background:#fff; z-index:1;
}
html[data-theme="mac-system-6"] .sidebar::after {
  content:""; position:absolute; left:6px; right:6px; top:12px; height:7px;
  border-top:1px solid #000; border-bottom:1px solid #000;
}
html[data-theme="mac-system-6"] .main {
  min-width:0; padding:0 0 20px; overflow:visible;
}

/* Classic Macintosh windows and title bars. */
html[data-theme="mac-system-6"] .panel,
html[data-theme="mac-system-6"] .auth-box,
html[data-theme="mac-system-6"] .user-result,
html[data-theme="mac-system-6"] .blit,
html[data-theme="mac-system-6"] .market-card,
html[data-theme="mac-system-6"] .trending-user,
html[data-theme="mac-system-6"] .dashboard-stat,
html[data-theme="mac-system-6"] .dashboard-link,
html[data-theme="mac-system-6"] .dm-thread,
html[data-theme="mac-system-6"] .notification-item {
  background:#fff !important; color:#000 !important;
  border:2px solid #000 !important; border-radius:0 !important;
  box-shadow:2px 2px 0 #000 !important;
  text-shadow:none !important;
}
html[data-theme="mac-system-6"] .terminal-header {
  position:relative; background:repeating-linear-gradient(0deg,#000 0,#000 1px,#fff 1px,#fff 3px) !important;
  color:#000 !important; text-shadow:none !important; font-weight:bold; letter-spacing:0;
  text-align:center; border-bottom:2px solid #000 !important; padding:4px 36px;
}
html[data-theme="mac-system-6"] .terminal-header::before {
  content:"□"; position:absolute; left:8px; top:2px; background:#fff; padding:0 2px; font-size:15px;
}

/* Compose/feed windows. */
html[data-theme="mac-system-6"] .compose { margin-bottom:14px; }
html[data-theme="mac-system-6"] .compose textarea,
html[data-theme="mac-system-6"] input,
html[data-theme="mac-system-6"] textarea,
html[data-theme="mac-system-6"] select {
  background:#fff !important; color:#000 !important; border:1px solid #000 !important;
  border-radius:0 !important; box-shadow:inset 1px 1px 0 #777 !important;
  font-family:var(--font-mono) !important; text-shadow:none !important;
}
html[data-theme="mac-system-6"] input::placeholder,
html[data-theme="mac-system-6"] textarea::placeholder { color:#555 !important; opacity:1; }
html[data-theme="mac-system-6"] .feed { gap:14px; }
html[data-theme="mac-system-6"] .blit { padding:10px 12px; }
html[data-theme="mac-system-6"] .blit:hover { border-color:#000 !important; }
html[data-theme="mac-system-6"] .blit-author,
html[data-theme="mac-system-6"] .user-result .name,
html[data-theme="mac-system-6"] .user-card .name,
html[data-theme="mac-system-6"] .market-price,
html[data-theme="mac-system-6"] h1,
html[data-theme="mac-system-6"] h2,
html[data-theme="mac-system-6"] h3 { color:#000 !important; text-shadow:none !important; font-family:var(--font-display) !important; }
html[data-theme="mac-system-6"] .blit-handle,
html[data-theme="mac-system-6"] .blit-time,
html[data-theme="mac-system-6"] .user-card .handle,
html[data-theme="mac-system-6"] .status-box,
html[data-theme="mac-system-6"] .market-meta { color:#333 !important; }
html[data-theme="mac-system-6"] a,
html[data-theme="mac-system-6"] .blit-content a.hashtag,
html[data-theme="mac-system-6"] .blit-content a.mention { color:#000 !important; text-decoration:underline; text-shadow:none !important; }

/* Finder-like left navigation. */
html[data-theme="mac-system-6"] .user-card { background:#fff !important; border:1px solid #000 !important; box-shadow:none !important; }
html[data-theme="mac-system-6"] .side-nav { gap:1px; border:1px solid #000; padding:3px; }
html[data-theme="mac-system-6"] .side-btn {
  color:#000 !important; background:#fff !important; border:0 !important;
  padding:5px 7px; letter-spacing:0; text-shadow:none !important; text-transform:none;
}
html[data-theme="mac-system-6"] .side-btn:hover,
html[data-theme="mac-system-6"] .side-btn.active {
  background:#000 !important; color:#fff !important; text-shadow:none !important;
}
html[data-theme="mac-system-6"] .search-box input { background:#fff !important; color:#000 !important; }
html[data-theme="mac-system-6"] .status-box { border-top:1px solid #000 !important; color:#000 !important; }
html[data-theme="mac-system-6"] .online { color:#000 !important; text-shadow:none !important; font-weight:bold; }
html[data-theme="mac-system-6"] .page-counter { color:#000 !important; background:#fff !important; border:1px inset #777; }

/* System 6 controls: raised buttons, depressed selection. */
html[data-theme="mac-system-6"] .btn,
html[data-theme="mac-system-6"] .nav button,
html[data-theme="mac-system-6"] .blit-actions button,
html[data-theme="mac-system-6"] button:not(.side-btn) {
  background:#eee !important; color:#000 !important; border:1px solid #000 !important;
  border-radius:2px !important; box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #777 !important;
  text-shadow:none !important; font-family:var(--font-mono) !important;
  letter-spacing:0; text-transform:none;
}
html[data-theme="mac-system-6"] .btn:hover,
html[data-theme="mac-system-6"] .nav button:hover,
html[data-theme="mac-system-6"] button:not(.side-btn):hover { background:#fff !important; color:#000 !important; box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #555 !important; }
html[data-theme="mac-system-6"] .btn:active,
html[data-theme="mac-system-6"] button:not(.side-btn):active { background:#000 !important; color:#fff !important; box-shadow:none !important; }
html[data-theme="mac-system-6"] .btn.primary { border:3px double #000 !important; background:#fff !important; font-weight:bold; }
html[data-theme="mac-system-6"] .badge { background:#000 !important; color:#fff !important; border:0 !important; border-radius:0 !important; }

/* Marketplace / dashboard / notification surfaces stay usable in monochrome. */
html[data-theme="mac-system-6"] .market-tools,
html[data-theme="mac-system-6"] .market-admin-stats > div,
html[data-theme="mac-system-6"] .market-admin-row,
html[data-theme="mac-system-6"] .market-bid-history,
html[data-theme="mac-system-6"] .dashboard-section,
html[data-theme="mac-system-6"] .notification-row,
html[data-theme="mac-system-6"] .dm-message { background:#fff !important; color:#000 !important; border-color:#000 !important; }
html[data-theme="mac-system-6"] .market-card:hover,
html[data-theme="mac-system-6"] .dashboard-stat:hover,
html[data-theme="mac-system-6"] .dashboard-link:hover { background:#f3f3f3 !important; color:#000 !important; }
html[data-theme="mac-system-6"] .user-avatar { filter:grayscale(1) contrast(1.25) !important; border-color:#000 !important; }
html[data-theme="mac-system-6"] .market-photo,
html[data-theme="mac-system-6"] .market-card img { filter:grayscale(1); }

/* Footer becomes a quiet desktop status strip. */
html[data-theme="mac-system-6"] .footer {
  margin:10px 8px 0; background:#fff !important; color:#000 !important;
  border:1px solid #000 !important; padding:6px 10px; text-align:center; text-shadow:none !important;
}

/* Authentication and dialer become Macintosh dialogs. */
html[data-theme="mac-system-6"] #auth-screen,
html[data-theme="mac-system-6"] .dialer-screen { background:transparent !important; }
html[data-theme="mac-system-6"] .auth-box,
html[data-theme="mac-system-6"] .dialer-box {
  background:#fff !important; color:#000 !important; border:2px solid #000 !important;
  box-shadow:4px 4px 0 #000 !important;
}
html[data-theme="mac-system-6"] .ascii-logo,
html[data-theme="mac-system-6"] .dial-terminal,
html[data-theme="mac-system-6"] .dial-info { color:#000 !important; text-shadow:none !important; }

@media(max-width:760px) {
  html[data-theme="mac-system-6"] .display-mode-bar::before { content:"◆  File  View"; font-size:11px; top:7px; }
  html[data-theme="mac-system-6"] .display-mode-status { display:none; }
  html[data-theme="mac-system-6"] .layout { flex-direction:column; }
  html[data-theme="mac-system-6"] .sidebar { width:100%; min-width:0; }
  html[data-theme="mac-system-6"] .header { margin-top:8px; }
}

/* 6. Pirate Mode — because every respectable BBS needs a completely unnecessary pirate setting. */
html[data-theme="pirate"] {
  --bg:#120b05; --screen:#1b1008; --green:#ffd36a; --green-dim:#b88a42; --green-dark:#4b260f;
  --amber:#ff4d3d; --amber-dim:#9f2d24; --red:#ff3b30; --text:#f5dfaa; --border:#93652d;
  --glow:0 0 7px rgba(255,211,106,.38);
  --font-mono: Georgia, 'Times New Roman', serif; --font-pixel: Georgia, 'Times New Roman', serif;
  --theme-page:#070401; --theme-bg:#120b05; --theme-screen:#1b1008; --theme-panel:rgba(48,25,10,.72);
  --theme-input:#211207; --theme-header-a:#3b1d0d; --theme-header-b:#1b0d06; --theme-card:rgba(255,211,106,.035);
  --theme-hover:#4a2813; --theme-glow-rgb:255,211,106; --theme-scanline:rgba(40,15,3,.18); --theme-radius:2px;
}
html[data-theme="pirate"] .logo-text::after { content:' ☠'; color:#ff4d3d; }
html[data-theme="pirate"] .logo-sub { color:#d29b4d; }
html[data-theme="pirate"] .logo-sub::after { content:' // HIGH SEAS RELAY'; color:#ff4d3d; }
html[data-theme="pirate"] .display-mode-led { border-radius:0; transform:rotate(45deg); }
html[data-theme="pirate"] .panel,
html[data-theme="pirate"] .auth-box { box-shadow:inset 0 0 22px rgba(0,0,0,.42); }
html[data-theme="pirate"] .terminal-header { letter-spacing:1px; }
html[data-theme="pirate"] .btn { text-transform:none; font-weight:bold; }


/* 7. Breaking Bad — desert lab greens, periodic-table accents and chemical-yellow highlights. */
html[data-theme="breaking-bad"] {
  --bg:#0b1009; --screen:#10180f; --green:#8fcb67; --green-dim:#6da44d; --green-dark:#21331b;
  --amber:#d5b86d; --amber-dim:#927c42; --red:#c87d46; --text:#edf7d7; --border:#607a43;
  --glow:0 0 8px rgba(143,203,103,.38);
  --theme-page:#090d08; --theme-bg:#0d140b; --theme-screen:#10180f; --theme-panel:rgba(15,24,13,.80);
  --theme-input:#162112; --theme-header-a:#203019; --theme-header-b:#131d10; --theme-card:rgba(143,203,103,.035);
  --theme-hover:#24351c; --theme-glow-rgb:143,203,103; --theme-scanline:rgba(9,16,8,.22);
}
html[data-theme="breaking-bad"] body {
  background-image:
    radial-gradient(circle at top right, rgba(213,184,109,.05), transparent 33%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.32));
}
html[data-theme="breaking-bad"] .display-mode-bar {
  border-bottom-color:#786338;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
html[data-theme="breaking-bad"] .display-mode-led {
  background:linear-gradient(180deg, #d9e9b1, #6da44d);
  box-shadow:0 0 10px rgba(143,203,103,.65);
}
html[data-theme="breaking-bad"] .header,
html[data-theme="breaking-bad"] .terminal-header {
  letter-spacing:.08em;
}
html[data-theme="breaking-bad"] .logo-text::before {
  content:'Br';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.65em;
  height:1.65em;
  margin-right:.38em;
  vertical-align:middle;
  border:1px solid #d2d0aa;
  background:linear-gradient(180deg, #44652c 0%, #253919 100%);
  color:#f7f5d0;
  font-size:.55em;
  font-weight:700;
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 12px rgba(143,203,103,.15);
}
html[data-theme="breaking-bad"] .logo-sub {
  color:#d8be7f;
}
html[data-theme="breaking-bad"] .logo-sub::after {
  content:' // HIGH DESERT CHEM LAB';
  color:#8fcb67;
}
html[data-theme="breaking-bad"] .panel,
html[data-theme="breaking-bad"] .auth-box,
html[data-theme="breaking-bad"] .dialer-box,
html[data-theme="breaking-bad"] .market-card,
html[data-theme="breaking-bad"] .dashboard-stat,
html[data-theme="breaking-bad"] .dashboard-link,
html[data-theme="breaking-bad"] .dm-thread,
html[data-theme="breaking-bad"] .notification-item,
html[data-theme="breaking-bad"] .blit,
html[data-theme="breaking-bad"] .user-result,
html[data-theme="breaking-bad"] .trending-user {
  border-color:#536a3c;
  box-shadow:0 0 0 1px rgba(125,156,84,.15), inset 0 0 18px rgba(0,0,0,.2);
}
html[data-theme="breaking-bad"] .side-nav {
  border:1px solid rgba(143,203,103,.22);
  background:rgba(7,12,6,.28);
}
html[data-theme="breaking-bad"] .side-btn {
  border-color:#465b31;
  background:linear-gradient(180deg, rgba(22,33,18,.96), rgba(12,18,10,.96));
}
html[data-theme="breaking-bad"] .side-btn:hover,
html[data-theme="breaking-bad"] .side-btn.active {
  border-color:#d5b86d;
  background:linear-gradient(180deg, #39572a, #23341a);
  color:#fff7d5;
  box-shadow:0 0 12px rgba(143,203,103,.15);
}
html[data-theme="breaking-bad"] .btn.primary {
  border-color:#d5b86d;
  color:#fff2c2;
  background:linear-gradient(180deg, #2f4a22, #1d2e15);
}
html[data-theme="breaking-bad"] .btn.primary:hover {
  background:linear-gradient(180deg, #496a34, #2b4320);
  color:#fff7de;
}
html[data-theme="breaking-bad"] .page-counter span,
html[data-theme="breaking-bad"] .badge {
  border-color:#8b7542;
  color:#fff4ce;
}
html[data-theme="breaking-bad"] .user-avatar {
  filter:hue-rotate(22deg) saturate(.72) brightness(1.03);
}

/* Re-tint the preprocessed green avatar PNGs so non-green modes do not look accidental. */
html[data-theme="amber-terminal"] .user-avatar { filter:sepia(1) saturate(5) hue-rotate(345deg) brightness(1.15); }
html[data-theme="commodore-64"] .user-avatar { filter:hue-rotate(205deg) saturate(.8) brightness(1.35); }
html[data-theme="ibm-cga"] .user-avatar { filter:hue-rotate(125deg) saturate(1.8) brightness(1.3); }
html[data-theme="pirate"] .user-avatar { filter:sepia(1) saturate(2.2) hue-rotate(345deg) brightness(.95); }

@media(max-width:600px) {
  .display-mode-inner { justify-content:center; flex-wrap:wrap; }
  .display-mode-status { display:none; }
  .display-mode-bar label { font-size:10px; }
  .display-mode-bar select { max-width:170px; }
}

/* MAC SYSTEM 6: mechanical page counter must remain legible in monochrome mode. */
html[data-theme="mac-system-6"] .page-counter {
  background:#fff !important;
  border:1px solid #000 !important;
  box-shadow:inset 1px 1px 0 #777, inset -1px -1px 0 #fff !important;
}
html[data-theme="mac-system-6"] .page-counter span {
  color:#000 !important;
  background:#fff !important;
  border:1px solid #777 !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

/* ========================================================================== */
/* THE CONTINENTAL — neo-noir luxury underworld interface                    */
/* A theme-only presentation layer: no routes or app functionality change.   */
/* ========================================================================== */
html[data-theme="continental"] {
  --bg:#070707;
  --screen:#0d0d0d;
  --green:#d4b46a;
  --green-dim:#a68b50;
  --green-dark:#211b12;
  --amber:#8f1717;
  --amber-dim:#571010;
  --red:#b91e24;
  --text:#eee8da;
  --border:#5d4b2c;
  --glow:0 0 10px rgba(185,30,36,.12);
  --font-mono:"Share Tech Mono", "Courier New", monospace;
  --font-pixel:Georgia, "Times New Roman", serif;
  --theme-page:#050505;
  --theme-bg:#080808;
  --theme-screen:#0b0b0b;
  --theme-panel:rgba(14,14,14,.96);
  --theme-input:#090909;
  --theme-header-a:#17120c;
  --theme-header-b:#080808;
  --theme-card:rgba(212,180,106,.025);
  --theme-hover:#1b1510;
  --theme-glow-rgb:212,180,106;
  --theme-scanline:rgba(0,0,0,.05);
  --theme-radius:0px;
  background:#050505;
  color-scheme:dark;
}

html[data-theme="continental"],
html[data-theme="continental"] body {
  background:
    radial-gradient(circle at 78% 12%, rgba(117,15,19,.13), transparent 26rem),
    radial-gradient(circle at 22% 72%, rgba(212,180,106,.06), transparent 30rem),
    linear-gradient(135deg,#030303 0%,#0a0a0a 52%,#050505 100%) !important;
  color:#eee8da !important;
  font-family:"Share Tech Mono", "Courier New", monospace;
}

/* Glass, rain and hotel-lobby ambience. */
html[data-theme="continental"] body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.13;
  background-image:repeating-linear-gradient(103deg,transparent 0 34px,rgba(255,255,255,.12) 35px,transparent 36px 71px);
  background-size:180px 240px;
  animation:continental-rain 7s linear infinite;
}
@keyframes continental-rain { from { background-position:0 -240px; } to { background-position:120px 240px; } }
html[data-theme="continental"] .scanlines { opacity:.08; }
html[data-theme="continental"] .crt::before { opacity:.12; }
html[data-theme="continental"] .screen {
  border:1px solid #30281a !important;
  box-shadow:0 0 0 1px #080808, 0 22px 70px rgba(0,0,0,.8), inset 0 0 80px rgba(0,0,0,.5) !important;
}

/* Private-club status bar. */
html[data-theme="continental"] .display-mode-bar {
  min-height:40px;
  background:linear-gradient(180deg,#17130e,#090909) !important;
  border-bottom:1px solid #8f7340 !important;
  box-shadow:0 4px 20px rgba(0,0,0,.55) !important;
  color:#d4b46a !important;
  position:relative;
}
html[data-theme="continental"] .display-mode-bar::before {
  content:"THE CONTINENTAL  ◆  BLITTER-1  //  PRIVATE NETWORK";
  position:absolute;
  left:18px;
  top:12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:12px;
  letter-spacing:2px;
  color:#d4b46a;
  text-transform:uppercase;
}
html[data-theme="continental"] .display-mode-inner { justify-content:flex-end; min-height:40px; padding-right:14px; }
html[data-theme="continental"] .display-mode-led {
  background:#921c20 !important;
  box-shadow:0 0 9px rgba(185,30,36,.8) !important;
}
html[data-theme="continental"] .display-mode-bar label { color:#81704b !important; letter-spacing:1px; }
html[data-theme="continental"] .display-mode-bar select {
  background:#090909 !important;
  color:#d4b46a !important;
  border:1px solid #705b34 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  letter-spacing:.8px;
  box-shadow:inset 0 0 12px #000;
}
html[data-theme="continental"] .display-mode-status { color:#8f1717 !important; font-weight:bold; }
html[data-theme="continental"] .display-mode-status::after { content:" // CLEARED"; color:#d4b46a; }

/* Masthead becomes a luxury hotel / intelligence desk. */
html[data-theme="continental"] .header {
  background:linear-gradient(90deg,#090909,#15100a 50%,#090909) !important;
  border-bottom:1px solid #4f4127 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
html[data-theme="continental"] .logo-text {
  color:#e7d29c !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:30px !important;
  letter-spacing:8px !important;
  text-shadow:0 2px 10px #000 !important;
}
html[data-theme="continental"] .logo-text::before { content:"◆ "; color:#8f1717; font-size:16px; vertical-align:middle; }
html[data-theme="continental"] .logo-text::after { content:" // CONTINENTAL"; color:#8f7340; font-size:12px; letter-spacing:3px; }
html[data-theme="continental"] .logo-sub {
  color:#7c6a45 !important;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:3px;
}
html[data-theme="continental"] .nav button {
  color:#bca66f !important;
  border-color:transparent !important;
}

/* The left rail resembles a concierge / operations directory. */
html[data-theme="continental"] .sidebar {
  background:linear-gradient(180deg,rgba(18,15,11,.97),rgba(7,7,7,.98)) !important;
  border:1px solid #493b24 !important;
  box-shadow:8px 10px 32px rgba(0,0,0,.4), inset 0 0 30px rgba(212,180,106,.025) !important;
  padding:12px !important;
}
html[data-theme="continental"] .sidebar::before {
  content:"GUEST SERVICES // OPERATIONS";
  display:block;
  padding:0 4px 10px;
  margin-bottom:8px;
  border-bottom:1px solid #4f4127;
  color:#d4b46a;
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px;
  letter-spacing:2px;
  text-align:center;
}
html[data-theme="continental"] .user-card {
  background:#0a0a0a !important;
  border:1px solid #3e3320 !important;
  box-shadow:inset 0 0 24px rgba(0,0,0,.8) !important;
}
html[data-theme="continental"] .side-nav { gap:3px; }
html[data-theme="continental"] .side-btn {
  background:transparent !important;
  color:#9d8b61 !important;
  border-left:2px solid transparent !important;
  padding:8px 10px !important;
  letter-spacing:.7px !important;
  text-shadow:none !important;
}
html[data-theme="continental"] .side-btn:hover,
html[data-theme="continental"] .side-btn.active {
  color:#f1dfae !important;
  background:linear-gradient(90deg,rgba(143,23,23,.28),rgba(212,180,106,.035)) !important;
  border-left-color:#a51e23 !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.5);
}
html[data-theme="continental"] .status-box {
  color:#81704b !important;
  border-top:1px solid #4b3e27 !important;
  background:#070707;
  padding:12px 8px 6px;
}
html[data-theme="continental"] .status-box::before { content:"HOUSE STATUS"; display:block; color:#d4b46a; letter-spacing:2px; margin-bottom:5px; }
html[data-theme="continental"] .online { color:#b7272d !important; text-shadow:0 0 6px rgba(185,30,36,.4) !important; }
html[data-theme="continental"] .page-counter { background:#050505 !important; border:1px solid #5b4929 !important; }
html[data-theme="continental"] .page-counter span {
  background:#0a0907 !important;
  color:#d4b46a !important;
  border-color:#44391f !important;
  text-shadow:0 0 5px rgba(212,180,106,.25) !important;
}

/* Main content: dossier cards and black glass. */
html[data-theme="continental"] .main { background:transparent !important; }
html[data-theme="continental"] .panel,
html[data-theme="continental"] .auth-box,
html[data-theme="continental"] .user-result,
html[data-theme="continental"] .blit,
html[data-theme="continental"] .market-card,
html[data-theme="continental"] .trending-user,
html[data-theme="continental"] .dashboard-stat,
html[data-theme="continental"] .dashboard-link,
html[data-theme="continental"] .dm-thread,
html[data-theme="continental"] .notification-item {
  background:linear-gradient(145deg,rgba(18,18,18,.96),rgba(8,8,8,.98)) !important;
  color:#e8e0cf !important;
  border:1px solid #3f3522 !important;
  border-radius:0 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.018) !important;
}
html[data-theme="continental"] .panel:hover,
html[data-theme="continental"] .blit:hover,
html[data-theme="continental"] .market-card:hover,
html[data-theme="continental"] .dashboard-stat:hover,
html[data-theme="continental"] .dashboard-link:hover { border-color:#826a3d !important; }

html[data-theme="continental"] .terminal-header {
  color:#e4ce93 !important;
  background:linear-gradient(90deg,#1b130d,#0b0b0b) !important;
  border-bottom:1px solid #66522f !important;
  font-family:Georgia,"Times New Roman",serif !important;
  letter-spacing:3px !important;
  text-shadow:none !important;
}
html[data-theme="continental"] .terminal-header::before { content:"◆ "; color:#9f2025; }
html[data-theme="continental"] .blit-author,
html[data-theme="continental"] .user-result .name,
html[data-theme="continental"] .user-card .name,
html[data-theme="continental"] .market-price,
html[data-theme="continental"] h1,
html[data-theme="continental"] h2,
html[data-theme="continental"] h3 {
  color:#d9bd79 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  text-shadow:none !important;
}
html[data-theme="continental"] a { color:#c9aa62 !important; }
html[data-theme="continental"] a:hover { color:#f3e1af !important; }
html[data-theme="continental"] .handle,
html[data-theme="continental"] .blit-time,
html[data-theme="continental"] .muted,
html[data-theme="continental"] .meta { color:#81755f !important; }

/* Forms: polished black glass with brass keylines. */
html[data-theme="continental"] input,
html[data-theme="continental"] textarea,
html[data-theme="continental"] select {
  background:#070707 !important;
  color:#eee8da !important;
  border:1px solid #4f4127 !important;
  border-radius:0 !important;
  box-shadow:inset 0 0 15px rgba(0,0,0,.8) !important;
  caret-color:#b91e24;
}
html[data-theme="continental"] input:focus,
html[data-theme="continental"] textarea:focus,
html[data-theme="continental"] select:focus {
  border-color:#a78648 !important;
  box-shadow:0 0 0 1px rgba(167,134,72,.18), inset 0 0 15px #000 !important;
  outline:none !important;
}
html[data-theme="continental"] input::placeholder,
html[data-theme="continental"] textarea::placeholder { color:#645b4a !important; opacity:1; }

/* Buttons: formal black lacquer, brass edges, restrained blood-red primary state. */
html[data-theme="continental"] .btn,
html[data-theme="continental"] .nav button,
html[data-theme="continental"] .blit-actions button,
html[data-theme="continental"] button:not(.side-btn) {
  background:linear-gradient(180deg,#171717,#080808) !important;
  color:#cbb277 !important;
  border:1px solid #5c4a2b !important;
  border-radius:0 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035), 0 3px 8px rgba(0,0,0,.35) !important;
  text-shadow:none !important;
  letter-spacing:1px;
}
html[data-theme="continental"] .btn:hover,
html[data-theme="continental"] button:not(.side-btn):hover {
  color:#f4dfaa !important;
  border-color:#a88949 !important;
  background:linear-gradient(180deg,#211a10,#0c0b09) !important;
}
html[data-theme="continental"] .btn.primary {
  color:#f1dfae !important;
  border-color:#8f1717 !important;
  background:linear-gradient(180deg,#641216,#26090b) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 16px rgba(143,23,23,.12) !important;
}
html[data-theme="continental"] .btn.primary:hover { background:linear-gradient(180deg,#8b1b20,#370b0d) !important; border-color:#bc2b31 !important; }
html[data-theme="continental"] .badge { background:#8f1717 !important; color:#f4e6c5 !important; border:1px solid #be4549 !important; border-radius:50% !important; }

/* Exchange / operations / secure-comms surfaces. */
html[data-theme="continental"] .market-tools,
html[data-theme="continental"] .market-admin-stats > div,
html[data-theme="continental"] .market-admin-row,
html[data-theme="continental"] .market-bid-history,
html[data-theme="continental"] .dashboard-section,
html[data-theme="continental"] .notification-row,
html[data-theme="continental"] .dm-message {
  background:#0b0b0b !important;
  color:#ded5c2 !important;
  border-color:#493c25 !important;
}
html[data-theme="continental"] .market-price { color:#dfc27e !important; }
html[data-theme="continental"] .user-avatar {
  filter:grayscale(.65) contrast(1.15) sepia(.18) !important;
  border-color:#766039 !important;
  box-shadow:0 0 0 1px #090909,0 4px 14px rgba(0,0,0,.55) !important;
}
html[data-theme="continental"] .market-photo,
html[data-theme="continental"] .market-card img { filter:saturate(.55) contrast(1.05) brightness(.82); }

/* Authentication reads like a private membership desk. */
html[data-theme="continental"] #auth-screen,
html[data-theme="continental"] .dialer-screen { background:transparent !important; }
html[data-theme="continental"] .auth-box,
html[data-theme="continental"] .dialer-box {
  border:1px solid #7c6437 !important;
  background:linear-gradient(145deg,#15120e,#070707) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.75),inset 0 0 35px rgba(212,180,106,.025) !important;
}
html[data-theme="continental"] .ascii-logo,
html[data-theme="continental"] .dial-terminal,
html[data-theme="continental"] .dial-info { color:#bda668 !important; text-shadow:none !important; }

html[data-theme="continental"] .footer {
  background:#070707 !important;
  color:#625944 !important;
  border-top:1px solid #40351f !important;
  text-shadow:none !important;
  letter-spacing:1px;
}
html[data-theme="continental"] .footer::before { content:"◆  HOUSE RULES APPLY  ◆\A"; white-space:pre; color:#8f7340; }

@media(max-width:900px) {
  html[data-theme="continental"] .display-mode-bar::before { content:"THE CONTINENTAL // PRIVATE NETWORK"; font-size:10px; letter-spacing:1px; }
  html[data-theme="continental"] .display-mode-bar label { display:none; }
}
@media(max-width:650px) {
  html[data-theme="continental"] .display-mode-bar::before { display:none; }
  html[data-theme="continental"] .display-mode-inner { justify-content:center; padding-right:0; }
  html[data-theme="continental"] .logo-text { font-size:24px !important; letter-spacing:4px !important; }
  html[data-theme="continental"] .logo-text::after { display:none; }
  html[data-theme="continental"] .layout { flex-direction:column; }
  html[data-theme="continental"] .sidebar { width:100%; min-width:0; }
}

/* Retro Calendar */
.community-header p { margin: 8px 0 12px; opacity: .82; }
.community-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.community-toolbar input { flex:1 1 240px; min-width:180px; }
.community-toolbar select { min-width:150px; }
.community-card { position:relative; }
.community-card h2 { margin:8px 0; }
.community-type { font-weight:bold; letter-spacing:.06em; opacity:.86; }
.community-event-meta { margin:5px 0; }
.community-description { margin:14px 0; line-height:1.5; }
.community-description-full { font-size:1.05em; padding:12px 0; }
.community-footer { margin-top:12px; opacity:.72; font-size:.9em; }
.community-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.community-past { opacity:.72; }
.community-pagination { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.community-form { padding-top:10px; }
.community-form-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.community-contact { margin:10px 0; }
.text-link { border:0; background:none; color:inherit; font:inherit; padding:0; text-decoration:underline; cursor:pointer; }
@media (max-width:760px) { .community-form-row { grid-template-columns:1fr; } }

/* Macintosh System 6 treatment for the retro calendar */
html[data-theme="mac-system-6"] .community-type,
html[data-theme="mac-system-6"] .community-footer { color:#000; opacity:1; }
html[data-theme="mac-system-6"] .community-card,
html[data-theme="mac-system-6"] .community-detail,
html[data-theme="mac-system-6"] .community-form-panel { background:#fff; color:#000; }

/* Continental community notices become event dossiers */
html[data-theme="continental"] .community-type { color:#b99a54; }
html[data-theme="continental"] .community-card { border-color:#6f582c; }
html[data-theme="continental"] .community-event-meta strong { color:#b99a54; }

/* Pirate community notices */
html[data-theme="pirate"] .community-type { color:#e8c56b; }
html[data-theme="pirate"] .community-card { border-color:#7b5427; }


/* ================================================================
   COMPACT BLIT COMPOSER — inspired by late-2010s social timelines
   Keeps the posting box quiet until the user actually wants it.
   ================================================================ */
#compose-box.compose {
  margin-bottom: 12px;
  padding: 0;
  overflow: hidden;
}

#compose-box .compose-title {
  display: none;
}

#compose-box .compose-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}

#compose-box .compose-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#compose-box .compose-avatar .user-avatar,
#compose-box .compose-avatar img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  border-radius: 50%;
  object-fit: cover;
}

#compose-box .compose-body {
  min-width: 0;
  flex: 1;
}

#compose-box.compose textarea#compose-text {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 42px;
  height: 42px;
  max-height: 180px;
  resize: none;
  overflow-y: hidden;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: 9px 4px 7px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.45;
  outline: none;
  transition: min-height .14s ease, height .14s ease, border-color .14s ease;
}

#compose-box.compose textarea#compose-text::placeholder {
  color: var(--green-dim);
  opacity: .85;
}

#compose-box.compose:focus-within textarea#compose-text,
#compose-box.compose.has-content textarea#compose-text {
  min-height: 78px;
  height: 78px;
  overflow-y: auto;
  border-bottom-color: var(--border);
}

#compose-box .compose-footer {
  display: none;
  min-height: 34px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 7px 0 0;
}

#compose-box.compose:focus-within .compose-footer,
#compose-box.compose.has-content .compose-footer {
  display: flex;
}

#compose-box .compose-hint {
  margin-right: auto;
  color: var(--green-dim);
  font-size: 10px;
  opacity: .75;
}

#compose-box #char-count {
  font-size: 11px;
  white-space: nowrap;
}

#compose-box #blit-btn {
  min-width: 76px;
  padding: 7px 14px;
}

#compose-box #compose-error {
  margin: 0 12px 8px 64px;
}

/* Preserve each display mode's personality while using the compact layout. */
html[data-theme="mac-system-6"] #compose-box.compose textarea#compose-text {
  background:#fff !important;
  color:#000 !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  box-shadow:none !important;
}
html[data-theme="mac-system-6"] #compose-box.compose:focus-within textarea#compose-text,
html[data-theme="mac-system-6"] #compose-box.compose.has-content textarea#compose-text {
  border-bottom-color:#000 !important;
}
html[data-theme="mac-system-6"] #compose-box .compose-hint,
html[data-theme="mac-system-6"] #compose-box #char-count { color:#333 !important; }

html[data-theme="continental"] #compose-box.compose textarea#compose-text {
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  box-shadow:none !important;
}
html[data-theme="continental"] #compose-box.compose:focus-within textarea#compose-text,
html[data-theme="continental"] #compose-box.compose.has-content textarea#compose-text {
  border-bottom-color:#6f5a32 !important;
}

@media (max-width: 700px) {
  #compose-box .compose-inner { padding: 9px 10px; gap: 8px; }
  #compose-box .compose-avatar { flex-basis: 36px; width:36px; height:36px; }
  #compose-box .compose-avatar .user-avatar,
  #compose-box .compose-avatar img { width:36px !important; height:36px !important; max-width:36px !important; }
  #compose-box.compose textarea#compose-text { min-height:36px; height:36px; padding-top:6px; font-size:15px; }
  #compose-box .compose-hint { display:none; }
  #compose-box #compose-error { margin-left:54px; }
}

/* X/Twitter-style follow control in USER LIST */
.user-list-follow-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  min-width: 94px;
  padding: 7px 14px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: #001000;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .03em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.user-list-follow-btn:hover { filter: brightness(1.08); }
.user-list-follow-btn.following {
  background: transparent;
  color: var(--green);
}
.user-list-follow-btn.following:hover::after { content: ''; }
.user-list-follow-btn:disabled { opacity: .55; cursor: wait; }

html[data-theme="mac-system-6"] .user-list-follow-btn {
  border: 2px solid #000;
  border-radius: 4px;
  background: #fff;
  color: #000;
  box-shadow: 2px 2px 0 #000;
}
html[data-theme="mac-system-6"] .user-list-follow-btn.following {
  background: #000;
  color: #fff;
}
html[data-theme="continental"] .user-list-follow-btn {
  border-color: var(--green);
  background: var(--green);
  color: #0a0907;
}
html[data-theme="continental"] .user-list-follow-btn.following {
  background: transparent;
  color: var(--green);
}

@media (max-width: 640px) {
  .user-list-follow-btn { min-width: 82px; padding: 7px 10px; font-size: 11px; }
}


/* ===== Twitter/X-inspired profile layout ===== */
.profile-header.profile-x { padding:0; overflow:hidden; background:rgba(0,25,0,.5); }
.profile-banner { position:relative; width:100%; aspect-ratio:3/1; min-height:150px; max-height:270px; background:linear-gradient(135deg,#001000,#003400 52%,#001600); background-size:cover; background-position:center; border-bottom:1px solid var(--border); }
.profile-banner::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28)); }
.profile-banner-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--green-dim); font-family:var(--font-display); font-size:clamp(16px,3vw,28px); letter-spacing:.12em; opacity:.55; }
.profile-x-body { padding:0 20px 20px; }
.profile-x-topline { min-height:76px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.profile-avatar-wrap { margin-top:-64px; position:relative; z-index:2; padding:5px; background:var(--bg); border:1px solid var(--border); border-radius:50%; }
.profile-avatar-wrap .avatar-profile { border-radius:50%; box-shadow:0 0 14px rgba(51,255,51,.22); }
.profile-x-actions { margin-left:auto; padding-top:12px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.profile-x-name-row { display:flex; align-items:center; gap:8px; }
.profile-header.profile-x .name { font-size:30px; line-height:1.05; }
.profile-header.profile-x .handle { margin:3px 0 12px; }
.profile-x-bio { margin:0 0 10px; color:var(--green); line-height:1.45; white-space:pre-wrap; }
.profile-meta-line { color:var(--green-dim); font-size:13px; margin:5px 0 12px; }
.profile-x-stats { margin-top:0; gap:18px; }
.profile-x-stats span { white-space:nowrap; }
.sysop-profile-badge { color:var(--amber); font-size:12px; }
.banner-editor { padding:16px; }
.banner-editor-preview { width:100%; aspect-ratio:3/1; min-height:120px; margin-bottom:15px; display:flex; align-items:center; justify-content:center; background:#001400; border:1px solid var(--border); color:var(--green-dim); background-size:cover; background-position:center; letter-spacing:.08em; }
.banner-editor input[type="file"] { width:100%; color:var(--green); font-family:var(--font-mono); background:#001400; border:1px solid var(--border); padding:8px; }

/* Mac System 6: keep the X-like geometry, skin it as a classic Mac profile window. */
html[data-theme="mac-system-6"] .profile-header.profile-x { background:#fff; }
html[data-theme="mac-system-6"] .profile-banner { background:repeating-linear-gradient(45deg,#fff 0 2px,#ddd 2px 4px); border-color:#000; filter:grayscale(1); }
html[data-theme="mac-system-6"] .profile-banner::after { display:none; }
html[data-theme="mac-system-6"] .profile-avatar-wrap { background:#fff; border:2px solid #000; }
html[data-theme="mac-system-6"] .profile-meta-line { color:#222; }
html[data-theme="mac-system-6"] .banner-editor-preview { background:#fff; color:#000; border:2px solid #000; filter:grayscale(1); }

/* Continental: cinematic banner treatment. */
html[data-theme="continental"] .profile-banner { background:linear-gradient(135deg,#080706,#21180f,#090807); border-color:var(--border); }
html[data-theme="continental"] .profile-banner.has-image { filter:saturate(.55) contrast(1.08); }
html[data-theme="continental"] .profile-banner::after { background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.62)); }
html[data-theme="continental"] .profile-avatar-wrap { background:#0b0a09; }

@media (max-width:650px) {
  .profile-banner { min-height:115px; }
  .profile-x-body { padding:0 12px 16px; }
  .profile-x-topline { min-height:66px; }
  .profile-avatar-wrap { margin-top:-50px; padding:4px; }
  .profile-avatar-wrap .avatar-profile { width:96px; height:96px; min-width:96px; font-size:48px; }
  .profile-x-actions { padding-top:8px; }
  .profile-x-actions .btn { font-size:10px; padding:7px 8px; }
  .profile-header.profile-x .name { font-size:25px; }
}


/* ===== X-style profile photo lightbox ===== */
.profile-avatar-button {
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:inherit;
  border-radius:50%;
  line-height:0;
}
.profile-avatar-button.has-photo { cursor:zoom-in; }
.profile-avatar-button.has-photo:hover .avatar-profile,
.profile-avatar-button.has-photo:focus-visible .avatar-profile {
  filter:brightness(.82);
}
.profile-avatar-button:focus-visible {
  outline:2px solid var(--green);
  outline-offset:3px;
}
.profile-avatar-button:disabled { cursor:default; }
body.profile-photo-open { overflow:hidden; }
.profile-photo-lightbox {
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:72px 24px 28px;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(3px);
}
.profile-photo-lightbox.open { display:flex; }
.profile-photo-lightbox-stage {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:zoom-out;
}
.profile-photo-lightbox-image {
  display:block;
  width:auto;
  height:auto;
  max-width:min(92vw,1000px);
  max-height:82vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 0 0 2px rgba(255,255,255,.18),0 18px 60px rgba(0,0,0,.75);
  cursor:default;
  image-rendering:auto;
}
.profile-photo-lightbox-close {
  position:absolute;
  top:18px;
  left:20px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(20,20,20,.72);
  color:#fff;
  font:32px/40px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  z-index:2;
}
.profile-photo-lightbox-close:hover,
.profile-photo-lightbox-close:focus-visible { background:rgba(80,80,80,.9); outline:2px solid #fff; }
html[data-theme="mac-system-6"] .profile-avatar-button:focus-visible { outline-color:#000; }
html[data-theme="mac-system-6"] .profile-photo-lightbox { background:rgba(0,0,0,.88); backdrop-filter:none; }
html[data-theme="mac-system-6"] .profile-photo-lightbox-image { filter:grayscale(1); border:2px solid #fff; border-radius:0; }
html[data-theme="mac-system-6"] .profile-photo-lightbox-close { border:2px solid #fff; border-radius:0; }
html[data-theme="continental"] .profile-photo-lightbox { background:rgba(5,4,3,.96); }
html[data-theme="continental"] .profile-photo-lightbox-image { border-radius:4px; filter:saturate(.72) contrast(1.06); box-shadow:0 0 0 1px rgba(180,145,75,.65),0 22px 70px #000; }
@media (max-width:650px) {
  .profile-photo-lightbox { padding:64px 12px 18px; }
  .profile-photo-lightbox-image { max-width:94vw; max-height:78vh; }
  .profile-photo-lightbox-close { top:12px; left:12px; }
}

/* ===== BLITTER MERCH // official Canada-only store ===== */
.merch-banner{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:rgba(255,0,0,.06)}
.merch-banner strong{font-size:18px;letter-spacing:1px}.merch-banner span{opacity:.8;font-size:12px}.merch-tools,.merch-admin-controls,.merch-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px}.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:12px}.merch-card{border:1px solid var(--border);background:var(--panel-bg,#020702);cursor:pointer;overflow:hidden;transition:transform .12s ease}.merch-card:hover{transform:translateY(-2px)}.merch-card-photo{aspect-ratio:1/1;background:#050505;display:grid;place-items:center;overflow:hidden}.merch-card-photo img{width:100%;height:100%;object-fit:cover}.merch-no-image{display:grid;place-items:center;text-align:center;width:100%;height:100%;min-height:160px;letter-spacing:3px;opacity:.7}.merch-no-image.large{min-height:320px;border:1px solid var(--border)}.merch-card-copy{padding:10px}.merch-card-title{font-weight:bold;min-height:2.5em}.merch-card-price,.merch-detail-price{font-size:18px;font-weight:bold;margin-top:6px}.merch-card-stock{font-size:11px;opacity:.75;margin-top:5px}.merch-note{padding:10px 12px;border-top:1px solid var(--border);font-size:11px;opacity:.7}.merch-detail-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,.8fr);gap:18px;padding:14px}.merch-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.merch-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--border)}.merch-description{margin:16px 0;line-height:1.5}.merch-cart-row,.merch-admin-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--border)}.merch-cart-row small,.merch-admin-row small{display:block;opacity:.7;margin-top:3px}.merch-totals{padding:14px;margin-left:auto;max-width:360px}.merch-totals>div{display:flex;justify-content:space-between;padding:5px 0}.merch-grand{font-size:18px;border-top:1px solid var(--border);margin-top:5px;padding-top:10px!important}.merch-checkout{padding:14px;border-top:1px solid var(--border)}.merch-form-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}.merch-confirm{display:block;margin:12px 0}.merch-order,.merch-admin-order{padding:12px;border-bottom:1px solid var(--border);line-height:1.5}.merch-success{text-align:center;padding-bottom:24px}.merch-edit-images{display:flex;gap:8px;flex-wrap:wrap;padding:10px}.merch-edit-image{width:120px}.merch-edit-image img{width:120px;height:120px;object-fit:cover;border:1px solid var(--border)}.merch-edit-image .btn{width:100%;font-size:10px}#paypal-button-container{max-width:480px;margin:16px 0}
html[data-theme="mac-system-6"] .merch-card,html[data-theme="mac-system-6"] .merch-cart-row,html[data-theme="mac-system-6"] .merch-admin-row{background:#fff;color:#000;border-color:#000}html[data-theme="mac-system-6"] .merch-banner{background:#fff;color:#000;border-color:#000}html[data-theme="continental"] .merch-banner{background:rgba(122,17,26,.22);border-color:#9a7b42}html[data-theme="continental"] .merch-card{border-color:#7f693e}
@media(max-width:760px){.merch-detail-grid{grid-template-columns:1fr}.merch-form-row{grid-template-columns:1fr}.merch-banner{align-items:flex-start;flex-direction:column}.merch-cart-row{grid-template-columns:1fr auto}.merch-cart-row .merch-remove{grid-column:1/-1}}

/* ===== BLITTER FILE ARCHIVE ===== */
.archive-summary,.archive-admin-tools,.archive-admin-new{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.archive-layout{display:grid;grid-template-columns:220px minmax(0,1fr)}.archive-sections{border-right:1px solid var(--border);padding:8px}.archive-section{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;padding:9px;margin-bottom:5px;background:var(--panel);color:var(--green);border:1px solid var(--border);font-family:inherit;cursor:pointer}.archive-section span,.archive-section small{opacity:.75}.archive-section.active{box-shadow:inset 3px 0 0 currentColor}.archive-files{min-width:0}.archive-file{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--border)}.archive-file-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.archive-section-admin{display:grid;grid-template-columns:1fr 2fr auto auto auto;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border)}.archive-section-admin input{min-width:0}.archive-panel .auth-note{margin:10px 12px}.archive-admin-new input{flex:1;min-width:160px}
html[data-theme="mac-system-6"] .archive-section{background:#fff;color:#000;border-color:#000;box-shadow:none}html[data-theme="mac-system-6"] .archive-section.active{background:#000;color:#fff}html[data-theme="continental"] .archive-section{background:#0b0b0d;color:#d1b36a;border-color:#5b4930}html[data-theme="continental"] .archive-section.active{background:#171317;color:#f3d78a}
@media(max-width:760px){.archive-layout{grid-template-columns:1fr}.archive-sections{border-right:0;border-bottom:1px solid var(--border)}.archive-file{align-items:flex-start;flex-wrap:wrap}.archive-file-main{flex-basis:100%}.archive-section-admin{grid-template-columns:1fr}.archive-section-admin span{font-size:.85em}}

/* ===== BLITTER FILE ARCHIVE ===== */
.archive-summary,.archive-admin-tools,.archive-admin-new{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.archive-layout{display:grid;grid-template-columns:220px minmax(0,1fr)}.archive-sections{border-right:1px solid var(--border);padding:8px}.archive-section{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;padding:9px;margin-bottom:5px;background:var(--panel);color:var(--green);border:1px solid var(--border);font-family:inherit;cursor:pointer}.archive-section span,.archive-section small{opacity:.75}.archive-section.active{box-shadow:inset 3px 0 0 currentColor}.archive-files{min-width:0}.archive-file{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--border)}.archive-file-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.archive-section-admin{display:grid;grid-template-columns:1fr 2fr auto auto auto;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border)}.archive-section-admin input{min-width:0}.archive-panel .auth-note{margin:10px 12px}.archive-admin-new input{flex:1;min-width:160px}
html[data-theme="mac-system-6"] .archive-section{background:#fff;color:#000;border-color:#000;box-shadow:none}html[data-theme="mac-system-6"] .archive-section.active{background:#000;color:#fff}html[data-theme="continental"] .archive-section{background:#0b0b0d;color:#d1b36a;border-color:#5b4930}html[data-theme="continental"] .archive-section.active{background:#171317;color:#f3d78a}
@media(max-width:760px){.archive-layout{grid-template-columns:1fr}.archive-sections{border-right:0;border-bottom:1px solid var(--border)}.archive-file{align-items:flex-start;flex-wrap:wrap}.archive-file-main{flex-basis:100%}.archive-section-admin{grid-template-columns:1fr}.archive-section-admin span{font-size:.85em}}

/* ===== ZMODEM DOWNLOAD SIMULATOR ===== */
body.zmodem-open{overflow:hidden}.zmodem-overlay{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:18px}.zmodem-window{position:relative;width:min(760px,96vw);max-height:92vh;overflow:auto;border:2px solid var(--border);background:#000;color:var(--green);box-shadow:0 0 34px rgba(0,255,80,.22);font-family:var(--font-mono,monospace)}.zmodem-title{padding:10px 48px 10px 12px;border-bottom:1px solid var(--border);font-weight:bold;letter-spacing:1px}.zmodem-close{position:absolute;right:9px;top:6px;width:34px;height:30px;border:1px solid currentColor;background:transparent;color:inherit;font:22px/1 monospace;cursor:pointer}.zmodem-terminal{padding:14px}.zmodem-handshake{white-space:pre-wrap;line-height:1.35;margin-bottom:12px;opacity:.9}.zmodem-grid{display:grid;grid-template-columns:100px 1fr;gap:5px 12px;padding:10px 0;border-top:1px dashed currentColor;border-bottom:1px dashed currentColor}.zmodem-grid>span{opacity:.7}.zmodem-name{overflow-wrap:anywhere}.zmodem-bar{position:relative;height:28px;border:1px solid currentColor;margin:16px 0;background:#001000;overflow:hidden}.zmodem-bar-fill{height:100%;width:0;background:currentColor;opacity:.55;transition:width .08s linear}.zmodem-bar-text{position:absolute;inset:0;display:grid;place-items:center;font-weight:bold;mix-blend-mode:difference;color:#fff}.zmodem-stats{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;font-size:12px}.zmodem-stats span{border:1px solid var(--border);padding:7px}.zmodem-log{height:130px;overflow:auto;margin:12px 0;padding:8px;border:1px solid var(--border);background:#000;font-size:12px;line-height:1.45}.zmodem-log div::before{content:'> ';opacity:.6}.zmodem-footer{font-size:11px;opacity:.65;margin-bottom:10px}.zmodem-abort{width:100%}
html[data-theme="mac-system-6"] .zmodem-overlay{background:rgba(0,0,0,.72)}html[data-theme="mac-system-6"] .zmodem-window{background:#fff;color:#000;border-color:#000;box-shadow:6px 6px 0 #000}html[data-theme="mac-system-6"] .zmodem-bar,html[data-theme="mac-system-6"] .zmodem-log{background:#fff;color:#000;border-color:#000}html[data-theme="mac-system-6"] .zmodem-bar-fill{background:#000}html[data-theme="continental"] .zmodem-window{background:#09090b;color:#d1b36a;border-color:#8d7340;box-shadow:0 0 40px rgba(190,145,55,.22)}html[data-theme="continental"] .zmodem-bar{background:#120d0b;border-color:#8d7340}html[data-theme="continental"] .zmodem-log{background:#070709;border-color:#5b4930}
@media(max-width:620px){.zmodem-overlay{padding:8px}.zmodem-terminal{padding:10px}.zmodem-grid{grid-template-columns:72px 1fr;font-size:12px}.zmodem-stats{grid-template-columns:1fr}.zmodem-log{height:105px}}

/* ===== FILE ARCHIVE 256x256 DISK / BOX ARTWORK ===== */
.archive-file-info{display:flex;gap:14px;align-items:flex-start;flex:1;min-width:0}.archive-artwork{width:128px;height:128px;object-fit:contain;flex:0 0 128px;border:1px solid var(--border);background:#000;image-rendering:auto}.archive-file-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.archive-description{line-height:1.45}.archive-art-preview,.archive-edit-art{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.archive-art-preview img,.archive-edit-art img{width:256px;height:256px;object-fit:contain;border:1px solid var(--border);background:#000}.archive-art-preview span{display:block;font-size:11px;opacity:.75}.archive-art-preview.empty{padding:14px;border:1px dashed var(--border);opacity:.65}.archive-edit-art{margin-bottom:8px}.archive-edit-art .btn{align-self:flex-end}
html[data-theme="mac-system-6"] .archive-artwork,html[data-theme="mac-system-6"] .archive-art-preview img,html[data-theme="mac-system-6"] .archive-edit-art img{border-color:#000;filter:grayscale(1)}html[data-theme="continental"] .archive-artwork,html[data-theme="continental"] .archive-art-preview img,html[data-theme="continental"] .archive-edit-art img{border-color:#8d7340}
@media(max-width:760px){.archive-file-info{width:100%}.archive-artwork{width:96px;height:96px;flex-basis:96px}.archive-file-actions{width:100%}}
@media(max-width:460px){.archive-file-info{flex-direction:column}.archive-artwork{width:128px;height:128px}.archive-art-preview img,.archive-edit-art img{width:min(256px,100%);height:auto;aspect-ratio:1/1}}

/* ========================================================================
   TWITTER 2009 DISPLAY MODE
   A Blitter-flavoured recreation of the classic 2009 Twitter web layout:
   sky-blue page, compact centered canvas, white timeline, right sidebar,
   Arial/Helvetica typography, rounded modules and understated blue links.
   No Twitter logos or proprietary image assets are used.
   ======================================================================== */
html[data-theme="twitter-2009"] {
  --bg:#c0deed;
  --screen:#ffffff;
  --green:#0084b4;
  --green-dim:#6e9fb3;
  --green-dark:#e5f3f8;
  --amber:#f28c00;
  --amber-dim:#c66f00;
  --red:#cc3333;
  --text:#333333;
  --border:#cbd6dc;
  --glow:none;
  --font-mono:Arial, Helvetica, sans-serif;
  --font-pixel:Arial, Helvetica, sans-serif;
}

html[data-theme="twitter-2009"],
html[data-theme="twitter-2009"] body {
  background:#c0deed !important;
  color:#333 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:14px;
}
html[data-theme="twitter-2009"] body {
  background:
    radial-gradient(ellipse at 15% 5%, rgba(255,255,255,.78) 0 3%, transparent 3.2%),
    radial-gradient(ellipse at 22% 7%, rgba(255,255,255,.62) 0 4%, transparent 4.2%),
    linear-gradient(#b9def0 0 120px,#d9edf6 270px,#eef7fb 560px,#fff 100%) fixed !important;
}
html[data-theme="twitter-2009"] .crt {
  background:transparent !important;
  min-height:100vh;
}
html[data-theme="twitter-2009"] .crt::before,
html[data-theme="twitter-2009"] .scanlines { display:none !important; }
html[data-theme="twitter-2009"] .screen {
  width:1120px;
  max-width:calc(100% - 32px);
  min-height:100vh;
  margin:0 auto;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
}

/* narrow utility strip, similar to the era's settings/design controls */
html[data-theme="twitter-2009"] .display-mode-bar {
  background:transparent;
  border:0;
  padding:6px 0 3px;
  color:#5c7f8f;
  font:11px Arial,Helvetica,sans-serif;
}
html[data-theme="twitter-2009"] .display-mode-inner {
  justify-content:flex-end;
  gap:6px;
}
html[data-theme="twitter-2009"] .display-mode-led { display:none; }
html[data-theme="twitter-2009"] .display-mode-bar label {
  color:#5c7f8f;
  letter-spacing:0;
  font-weight:normal;
}
html[data-theme="twitter-2009"] .display-mode-bar select {
  background:#fff;
  color:#333;
  border:1px solid #9db9c5;
  border-radius:3px;
  padding:2px 4px;
  font:11px Arial,Helvetica,sans-serif;
}
html[data-theme="twitter-2009"] .display-mode-status {
  color:#88a3af !important;
  font-size:10px;
}

/* classic compact masthead */
html[data-theme="twitter-2009"] .header {
  min-height:62px;
  padding:6px 10px 7px;
  border:0;
  border-bottom:1px solid #a8c8d6;
  background:rgba(255,255,255,.88);
  border-radius:7px 7px 0 0;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
html[data-theme="twitter-2009"] .logo-text {
  display:inline-block;
  color:#33a9d8;
  text-shadow:none;
  font:bold italic 32px Georgia,"Times New Roman",serif;
  letter-spacing:-2px;
  line-height:1;
  text-transform:lowercase;
}
html[data-theme="twitter-2009"] .logo-text::first-letter { text-transform:uppercase; }
html[data-theme="twitter-2009"] .logo-sub {
  margin-top:2px;
  color:#8ba8b5;
  font:10px Arial,Helvetica,sans-serif;
  letter-spacing:.3px;
  text-transform:none;
}
html[data-theme="twitter-2009"] .nav {
  gap:0;
  align-self:flex-start;
  padding-top:6px;
}
html[data-theme="twitter-2009"] .nav > span {
  color:#777 !important;
  font:12px Arial,Helvetica,sans-serif !important;
  margin-right:10px !important;
  padding-top:5px;
}
html[data-theme="twitter-2009"] .nav button,
html[data-theme="twitter-2009"] .btn {
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(#fff,#e9eef1);
  border:1px solid #b8c8d0;
  border-radius:5px;
  color:#1686b0;
  padding:5px 10px;
  letter-spacing:0;
  font-size:12px;
  font-weight:bold;
  text-transform:none;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  text-shadow:none;
}
html[data-theme="twitter-2009"] .btn:hover,
html[data-theme="twitter-2009"] .nav button:hover {
  background:#f5fbfe;
  border-color:#7eb8cf;
  color:#006f9a;
  box-shadow:none;
}
html[data-theme="twitter-2009"] .btn.primary {
  background:linear-gradient(#59b9df,#2b9bc7);
  border-color:#1e87b1;
  color:#fff;
}
html[data-theme="twitter-2009"] .btn.primary:hover {
  background:linear-gradient(#6cc5e5,#2696c1);
  color:#fff;
}

/* 2009 layout: timeline on the left, account/navigation modules on right */
html[data-theme="twitter-2009"] #app {
  background:#fff;
  border-radius:0 0 7px 7px;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
  overflow:hidden;
}
html[data-theme="twitter-2009"] .layout {
  flex-direction:row-reverse;
  align-items:stretch;
  gap:0;
  background:#fff;
}
html[data-theme="twitter-2009"] .main {
  width:780px;
  flex:1 1 780px;
  min-width:0;
  padding:12px 18px 26px;
  background:#fff;
  border-right:1px solid #d6e2e8;
}
html[data-theme="twitter-2009"] .sidebar {
  width:457px;
  flex:0 0 457px;
  order:0;
  border:0;
  padding:14px 12px 20px;
  gap:12px;
  background:#eaf5fa;
}
html[data-theme="twitter-2009"] .user-card,
html[data-theme="twitter-2009"] .status-box,
html[data-theme="twitter-2009"] .search-box,
html[data-theme="twitter-2009"] .side-nav {
  background:transparent;
}
html[data-theme="twitter-2009"] .user-card {
  border:0;
  border-bottom:1px solid #c6dce6;
  padding:5px 7px 12px;
}
html[data-theme="twitter-2009"] .user-card .name {
  color:#333;
  text-shadow:none;
  font:bold 18px Arial,Helvetica,sans-serif;
}
html[data-theme="twitter-2009"] .user-card .handle {
  color:#777;
  font-size:11px;
}

html[data-theme="twitter-2009"] .search-box {
  gap:4px;
  margin:0;
}
html[data-theme="twitter-2009"] .search-box input,
html[data-theme="twitter-2009"] .field input,
html[data-theme="twitter-2009"] textarea,
html[data-theme="twitter-2009"] .market-tools input,
html[data-theme="twitter-2009"] .market-tools select,
html[data-theme="twitter-2009"] .market-form select,
html[data-theme="twitter-2009"] .market-form textarea,
html[data-theme="twitter-2009"] .market-bid-form input,
html[data-theme="twitter-2009"] .market-admin-add input,
html[data-theme="twitter-2009"] .market-admin-cat-name {
  background:#fff !important;
  color:#333 !important;
  border:1px solid #b7c8d0 !important;
  border-radius:4px;
  font-family:Arial,Helvetica,sans-serif !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07);
}
html[data-theme="twitter-2009"] .search-box input::placeholder,
html[data-theme="twitter-2009"] textarea::placeholder { color:#999 !important; }
html[data-theme="twitter-2009"] .search-box input:focus,
html[data-theme="twitter-2009"] .field input:focus,
html[data-theme="twitter-2009"] textarea:focus {
  border-color:#55aeca !important;
  box-shadow:0 0 3px rgba(0,132,180,.28) !important;
}
html[data-theme="twitter-2009"] .side-nav {
  gap:0;
  border-top:1px solid #c6dce6;
}
html[data-theme="twitter-2009"] .side-btn {
  position:relative;
  color:#1686b0;
  border:0;
  border-bottom:1px solid #d1e4ec;
  padding:7px 8px 7px 18px;
  letter-spacing:0;
  font:bold 12px Arial,Helvetica,sans-serif;
  text-transform:none;
}
html[data-theme="twitter-2009"] .side-btn:hover,
html[data-theme="twitter-2009"] .side-btn.active {
  color:#333;
  background:#fff;
  text-shadow:none;
}
html[data-theme="twitter-2009"] .status-box {
  margin-top:0;
  border-top:1px solid #c6dce6;
  color:#78909b;
  padding:9px 7px 0;
  font-size:10px;
  line-height:1.55;
}
html[data-theme="twitter-2009"] .online { color:#498c2f; text-shadow:none; }
html[data-theme="twitter-2009"] .page-counter {
  color:#555 !important;
  background:#fff !important;
  border:1px solid #c5d5dc;
  text-shadow:none !important;
}

/* timeline / tweet stream */
html[data-theme="twitter-2009"] .panel,
html[data-theme="twitter-2009"] .auth-box,
html[data-theme="twitter-2009"] .user-result,
html[data-theme="twitter-2009"] .blit,
html[data-theme="twitter-2009"] .notification-item,
html[data-theme="twitter-2009"] .dm-thread,
html[data-theme="twitter-2009"] .dashboard-stat,
html[data-theme="twitter-2009"] .dashboard-link,
html[data-theme="twitter-2009"] .market-card {
  background:#fff;
  border-color:#d7e0e5;
  color:#333;
  box-shadow:none;
}
html[data-theme="twitter-2009"] .terminal-header {
  background:linear-gradient(#f7fbfd,#e8f3f8);
  color:#333;
  border-bottom:1px solid #cddde5;
  padding:7px 10px;
  font:bold 14px Arial,Helvetica,sans-serif;
  letter-spacing:0;
  text-shadow:none;
  text-transform:none;
}
html[data-theme="twitter-2009"] .compose {
  margin-bottom:10px;
  border:1px solid #cddde5;
  border-radius:6px;
  overflow:hidden;
  background:#f4fafc;
}
html[data-theme="twitter-2009"] .compose-title { color:#555; }
html[data-theme="twitter-2009"] .compose textarea {
  min-height:46px;
  padding:8px 9px;
  font-size:14px;
}
html[data-theme="twitter-2009"] .compose-footer,
html[data-theme="twitter-2009"] .compose-hint,
html[data-theme="twitter-2009"] #char-count { color:#8999a1; }

html[data-theme="twitter-2009"] .feed { border-top:1px solid #d7e0e5; }
html[data-theme="twitter-2009"] .blit {
  border:0;
  border-bottom:1px solid #e1e8ed;
  border-radius:0;
  margin:0;
  padding:10px 8px;
  transition:background .12s ease;
}
html[data-theme="twitter-2009"] .blit:hover { background:#f5fafc; border-color:#e1e8ed; }
html[data-theme="twitter-2009"] .blit-author,
html[data-theme="twitter-2009"] a,
html[data-theme="twitter-2009"] .blit-content a.hashtag,
html[data-theme="twitter-2009"] .blit-content a.mention { color:#0084b4; text-shadow:none; }
html[data-theme="twitter-2009"] .blit-author { font-weight:bold; }
html[data-theme="twitter-2009"] .blit-handle,
html[data-theme="twitter-2009"] .blit-time,
html[data-theme="twitter-2009"] .market-meta,
html[data-theme="twitter-2009"] .user-result .handle,
html[data-theme="twitter-2009"] .user-result .bio,
html[data-theme="twitter-2009"] .user-result .stats { color:#8899a6; }
html[data-theme="twitter-2009"] .blit-content {
  color:#333;
  font:14px/1.38 Arial,Helvetica,sans-serif;
}
html[data-theme="twitter-2009"] .blit-actions {
  border-top:0;
  margin-top:6px;
  padding-top:0;
}
html[data-theme="twitter-2009"] .blit-actions button {
  color:#9aa8ae;
  font:11px Arial,Helvetica,sans-serif;
  text-transform:none;
  letter-spacing:0;
}
html[data-theme="twitter-2009"] .blit-actions button:hover,
html[data-theme="twitter-2009"] .blit-actions button.liked,
html[data-theme="twitter-2009"] .blit-actions button.reblitted { color:#0084b4; background:transparent; }
html[data-theme="twitter-2009"] .user-avatar {
  border:1px solid #ccd6db;
  border-radius:4px !important;
  box-shadow:none !important;
  filter:none !important;
}

/* profile / directory modules */
html[data-theme="twitter-2009"] .profile-header {
  background:#fff;
  border:1px solid #d7e0e5;
  border-radius:6px 6px 0 0;
  color:#333;
}
html[data-theme="twitter-2009"] .profile-header .name { color:#333; text-shadow:none; font-family:Arial,Helvetica,sans-serif; }
html[data-theme="twitter-2009"] .profile-header .handle { color:#777; }
html[data-theme="twitter-2009"] .profile-stats {
  background:#eaf5fa;
  border-color:#c8dde6;
}
html[data-theme="twitter-2009"] .profile-stats span,
html[data-theme="twitter-2009"] .profile-stats span strong { color:#1686b0; text-shadow:none; }
html[data-theme="twitter-2009"] .user-result {
  border-width:0 0 1px;
  padding:10px;
}
html[data-theme="twitter-2009"] .user-result .name {
  color:#333;
  text-shadow:none;
  font:bold 15px Arial,Helvetica,sans-serif;
}

/* secondary apps remain functional, but inherit the 2009 web palette */
html[data-theme="twitter-2009"] .market-card { border-radius:5px; overflow:hidden; }
html[data-theme="twitter-2009"] .market-card:hover { box-shadow:0 1px 4px rgba(0,0,0,.12); transform:none; }
html[data-theme="twitter-2009"] .market-price,
html[data-theme="twitter-2009"] .market-price-large,
html[data-theme="twitter-2009"] .market-admin-stats strong { color:#e98b19; text-shadow:none; }
html[data-theme="twitter-2009"] .market-no-image { color:#78909b; background:#eef6f9; }
html[data-theme="twitter-2009"] .market-auction-box,
html[data-theme="twitter-2009"] .market-shipping { background:#fffdf1; border-color:#e6d8a7; }
html[data-theme="twitter-2009"] .badge { background:#d95858; color:#fff; text-shadow:none; }
html[data-theme="twitter-2009"] .loading,
html[data-theme="twitter-2009"] .empty { color:#78909b; text-shadow:none; }

/* login/register page in the same late-2000s web language */
html[data-theme="twitter-2009"] #auth-screen {
  background:#fff;
  border:0;
  padding:30px 20px 45px;
}
html[data-theme="twitter-2009"] .auth-box {
  max-width:520px;
  border:1px solid #bfcfd7;
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.13);
}
html[data-theme="twitter-2009"] .tabs { border-color:#cbdbe2; background:#eaf5fa; }
html[data-theme="twitter-2009"] .tab {
  color:#1686b0;
  font:bold 13px Arial,Helvetica,sans-serif;
  letter-spacing:0;
  padding:10px;
}
html[data-theme="twitter-2009"] .tab.active { color:#333; background:#fff; text-shadow:none; }
html[data-theme="twitter-2009"] .field label { color:#555; font:bold 12px Arial,Helvetica,sans-serif; letter-spacing:0; }
html[data-theme="twitter-2009"] .auth-note { color:#667b84; }

/* intro is still usable if a user intentionally redials it */
html[data-theme="twitter-2009"] .dialer-screen { background:transparent; }
html[data-theme="twitter-2009"] .dialer-box {
  background:#fff;
  color:#333;
  border:1px solid #c5d4db;
  border-radius:7px;
  box-shadow:0 1px 5px rgba(0,0,0,.15);
}
html[data-theme="twitter-2009"] .ascii-logo,
html[data-theme="twitter-2009"] .dial-terminal,
html[data-theme="twitter-2009"] .dial-info { color:#1686b0; text-shadow:none; }

html[data-theme="twitter-2009"] .footer {
  margin-top:14px;
  padding:12px 4px 20px;
  border:0;
  background:transparent;
  color:#6f929f;
  text-shadow:none;
  font:11px Arial,Helvetica,sans-serif;
}

@media (max-width:760px) {
  html[data-theme="twitter-2009"] .screen { max-width:100%; width:100%; }
  html[data-theme="twitter-2009"] .header { border-radius:0; }
  html[data-theme="twitter-2009"] .layout { flex-direction:column; }
  html[data-theme="twitter-2009"] .main { width:100%; border-right:0; order:0; }
  html[data-theme="twitter-2009"] .sidebar { width:100%; flex-basis:auto; order:1; border-top:1px solid #cbdde5; }
  html[data-theme="twitter-2009"] .side-nav { display:grid; grid-template-columns:1fr 1fr; }
  html[data-theme="twitter-2009"] .nav > span { display:none; }
}

/* TWITMODE 2009 uses natural full-colour profile photography. */
html[data-theme="twitter-2009"] .user-avatar,
html[data-theme="twitter-2009"] .avatar-profile,
html[data-theme="twitter-2009"] .profile-photo-lightbox-image {
  filter:none !important;
  mix-blend-mode:normal !important;
  text-shadow:none !important;
}
html[data-theme="twitter-2009"] .profile-avatar-wrap {
  background:#fff !important;
  border-color:#ccd6db !important;
  box-shadow:none !important;
}
html[data-theme="twitter-2009"] .profile-avatar-wrap .avatar-profile {
  box-shadow:none !important;
}


html[data-theme="twitter-2009"] .logo-mascot {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

html[data-theme="mac-system-6"] .logo-mascot {
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.28));
}

html[data-theme="continental"] .logo-mascot {
  filter: drop-shadow(0 2px 10px rgba(160,32,32,.18));
}


html[data-theme="pirate"] .logo-copy {
  transform: translateY(1px);
}


/* Real Macintosh System 6 menu bar. Hidden outside the Mac theme. */
.mac-menu-bar { display:none; }

html[data-theme="mac-system-6"] .mac-menu-bar {
  display:flex;
  align-items:stretch;
  position:absolute;
  left:6px;
  top:0;
  height:28px;
  z-index:1600;
  font-family:var(--font-mono) !important;
  font-size:13px;
  font-weight:bold;
  color:#000;
}
html[data-theme="mac-system-6"] .mac-menu {
  position:relative;
  display:flex;
  align-items:stretch;
}
html[data-theme="mac-system-6"] .mac-menu-title {
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#000 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  padding:3px 7px 2px !important;
  margin:0 !important;
  min-width:0;
  height:28px;
  line-height:20px;
  font:inherit !important;
  font-weight:bold !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  cursor:default;
}

html[data-theme="mac-system-6"] .mac-menu,
html[data-theme="mac-system-6"] .mac-menu + .mac-menu {
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
}

html[data-theme="mac-system-6"] .mac-menu-title::before,
html[data-theme="mac-system-6"] .mac-menu-title::after {
  content:none !important;
  display:none !important;
}

html[data-theme="mac-system-6"] .mac-menu-title:hover,
html[data-theme="mac-system-6"] .mac-menu.open > .mac-menu-title {
  background:#000 !important;
  color:#fff !important;
}
html[data-theme="mac-system-6"] .mac-apple-title {
  width:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
}
html[data-theme="mac-system-6"] .mac-apple-title img {
  width:16px;
  height:18px;
  object-fit:contain;
  image-rendering:pixelated;
}
html[data-theme="mac-system-6"] .mac-menu.open > .mac-apple-title img {
  filter:invert(1);
}
html[data-theme="mac-system-6"] .mac-menu-dropdown {
  display:none;
  position:absolute;
  left:0;
  top:28px;
  min-width:190px;
  padding:3px 0;
  background:#fff;
  border:1px solid #000;
  box-shadow:2px 2px 0 #000;
  z-index:1700;
}
html[data-theme="mac-system-6"] .mac-menu.open > .mac-menu-dropdown { display:block; }
html[data-theme="mac-system-6"] .mac-menu-dropdown button {
  display:block;
  width:100%;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#000 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-align:left;
  white-space:nowrap;
  padding:3px 24px 3px 20px !important;
  margin:0;
  font:inherit !important;
  font-weight:normal !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  cursor:default;
}
html[data-theme="mac-system-6"] .mac-menu-dropdown button:hover,
html[data-theme="mac-system-6"] .mac-menu-dropdown button:focus {
  background:#000 !important;
  color:#fff !important;
  outline:0;
}
html[data-theme="mac-system-6"] .mac-menu-separator {
  height:1px;
  background:#000;
  margin:3px 0;
}
@media(max-width:760px) {
  html[data-theme="mac-system-6"] .mac-menu-title { padding-left:5px !important; padding-right:5px !important; }
  html[data-theme="mac-system-6"] .mac-apple-title { width:28px; }
  html[data-theme="mac-system-6"] .display-mode-inner { padding-top:30px; min-height:54px; }
}


/* System 6 menu titles must be true flat menu-bar labels, not raised controls.
   This intentionally outranks the generic Mac button styling above. */
html[data-theme="mac-system-6"] .mac-menu button.mac-menu-title:not(.side-btn) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  color: #000 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-shadow: none !important;
  margin: 0 !important;
  padding: 3px 7px 2px !important;
}

html[data-theme="mac-system-6"] .mac-menu button.mac-menu-title:not(.side-btn):hover,
html[data-theme="mac-system-6"] .mac-menu button.mac-menu-title:not(.side-btn):focus {
  background: transparent !important;
  background-image: none !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="mac-system-6"] .mac-menu.open > button.mac-menu-title:not(.side-btn),
html[data-theme="mac-system-6"] .mac-menu.open > button.mac-menu-title:not(.side-btn):hover,
html[data-theme="mac-system-6"] .mac-menu.open > button.mac-menu-title:not(.side-btn):focus,
html[data-theme="mac-system-6"] .mac-menu.open > button.mac-menu-title:not(.side-btn):active {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="mac-system-6"] .mac-menu button.mac-apple-title:not(.side-btn) {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* Show the classic System 6 menu bar only during an authenticated session. */
#mac-menu-bar.mac-session-hidden {
  display: none !important;
}


/* Macintosh System 6 — About This Macintosh window */
.mac-about-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.18);
}
.mac-about-overlay.hidden { display:none !important; }
.mac-about-window {
  width: min(430px, calc(100vw - 36px));
  background:#fff;
  color:#000;
  border:2px solid #000;
  box-shadow:4px 4px 0 #000;
  font-family: Chicago, Geneva, Helvetica, Arial, sans-serif;
  font-size:13px;
}
.mac-about-titlebar {
  height:24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:0 7px;
  border-bottom:2px solid #000;
  background:#fff;
  white-space:nowrap;
}
.mac-about-titlebar strong { font-size:13px; }
.mac-title-stripes {
  height:12px;
  background:repeating-linear-gradient(to bottom,#000 0,#000 1px,#fff 1px,#fff 3px);
}
.mac-about-body {
  position:relative;
  padding:20px 22px 18px;
  min-height:250px;
}
.mac-about-icon {
  float:left;
  width:54px;
  height:54px;
  margin:0 15px 12px 0;
  border:2px solid #000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:monospace;
  font-size:36px;
  font-weight:bold;
  line-height:1;
  background:#fff;
}
.mac-about-heading { min-height:58px; padding-top:5px; }
.mac-about-heading strong { display:block; font-size:18px; margin-bottom:5px; }
.mac-about-heading span { display:block; font-size:12px; }
.mac-about-rule { clear:both; border-top:1px solid #000; margin:8px 0 14px; }
.mac-about-stats { margin:0 auto; max-width:285px; }
.mac-about-stats > div {
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  padding:4px 2px;
}
.mac-about-stats strong { min-width:70px; text-align:right; font-variant-numeric:tabular-nums; }
.mac-about-status {
  margin:16px 0 12px;
  min-height:18px;
  text-align:center;
  font-size:11px;
}
.mac-about-ok {
  display:block !important;
  min-width:78px;
  margin:0 auto;
  padding:4px 14px !important;
  background:#fff !important;
  color:#000 !important;
  border:2px solid #000 !important;
  border-radius:0 !important;
  box-shadow:2px 2px 0 #000 !important;
  font-family:Chicago,Geneva,Helvetica,Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.2 !important;
}
.mac-about-ok:active { transform:translate(1px,1px); box-shadow:1px 1px 0 #000 !important; }

/* The About window is a Mac-only UI element. */
html:not([data-theme="mac-system-6"]) .mac-about-overlay { display:none !important; }

@media (max-width:520px) {
  .mac-about-body { padding:16px 14px; }
  .mac-about-stats { max-width:none; }
  .mac-about-window { box-shadow:2px 2px 0 #000; }
}


html[data-theme="apple-ii"] .logo-copy {
  transform: translateY(1px);
}

html[data-theme="apple-ii"] .logo-sub {
  letter-spacing: 2px;
}


html[data-theme="apple-ii"] .logo .logo-mascot-default,
html[data-theme="apple-ii"] .logo .logo-mascot-pirate,
html[data-theme="apple-ii"] .logo .logo-mascot-mac {
  display: none !important;
}

html[data-theme="apple-ii"] .logo .logo-mascot-appleii {
  display: block !important;
}


/* File Archive: keep descriptions wide and place actions underneath */
.archive-file {
  align-items: flex-start;
}
.archive-file-info {
  width: 100%;
  flex: 1 1 100%;
}
.archive-file-main {
  width: 100%;
  max-width: none;
}
.archive-description {
  width: 100%;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.archive-file-actions {
  margin-top: 10px;
  width: 100%;
  justify-content: flex-start;
}

@media (max-width:760px) {
  .archive-file-actions {
    width: 100%;
  }
}

/* File Archive legal / rights-holder notice */
.archive-legal-notice{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--panel);line-height:1.45;max-width:none;text-align:left}
.archive-legal-notice strong{display:block;margin-bottom:6px;letter-spacing:1px}
.archive-legal-notice p{margin:5px 0;max-width:none}
.archive-legal-notice a{color:var(--green);text-decoration:underline;overflow-wrap:anywhere}
html[data-theme="twitter-2009"] .archive-legal-notice a{color:#2276bb}
html[data-theme="mac-system-6"] .archive-legal-notice a{color:#000;text-decoration:underline}


/* ==========================================================================
   X CURRENT
   Modern, current-X-inspired "Lights Out" visual mode.
   No X logos or proprietary image assets are used.
   ========================================================================== */

html[data-theme="x-current"] {
  --bg:#000000;
  --screen:#000000;
  --green:#eff3f4;
  --green-dim:#71767b;
  --green-dark:#16181c;
  --amber:#1d9bf0;
  --amber-dim:#1a8cd8;
  --red:#f4212e;
  --text:#e7e9ea;
  --border:#2f3336;
  --glow:none;
  --font-mono:Arial, Helvetica, sans-serif;
  --font-pixel:Arial, Helvetica, sans-serif;
}

html[data-theme="x-current"],
html[data-theme="x-current"] body {
  background:#000 !important;
  color:#e7e9ea !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

html[data-theme="x-current"] body {
  margin:0;
}

html[data-theme="x-current"] .crt {
  background:#000;
}

html[data-theme="x-current"] .crt::before,
html[data-theme="x-current"] .scanlines {
  display:none !important;
}

html[data-theme="x-current"] .screen {
  max-width:1450px;
  margin:0 auto;
  padding:0;
  background:#000;
  border:0;
  border-radius:0;
  box-shadow:none;
  animation:none;
}

/* thin top display selector, deliberately quiet */
html[data-theme="x-current"] .display-mode-bar {
  background:#000;
  border:0;
  border-bottom:1px solid #2f3336;
  color:#71767b;
  box-shadow:none;
}

html[data-theme="x-current"] .display-mode-inner {
  max-width:1450px;
  margin:auto;
  padding:7px 16px;
}

html[data-theme="x-current"] .display-mode-led {
  width:7px;
  height:7px;
  background:#1d9bf0;
  box-shadow:none;
}

html[data-theme="x-current"] .display-mode-bar label,
html[data-theme="x-current"] .display-mode-status {
  color:#71767b;
  font:600 11px Arial,Helvetica,sans-serif;
  letter-spacing:.4px;
}

html[data-theme="x-current"] .display-mode-bar select {
  background:#000;
  color:#e7e9ea;
  border:1px solid #536471;
  border-radius:999px;
  padding:4px 26px 4px 10px;
  font:600 12px Arial,Helvetica,sans-serif;
}

/* modern identity/header */
html[data-theme="x-current"] .header {
  position:sticky;
  top:0;
  z-index:25;
  min-height:58px;
  padding:0 16px;
  background:rgba(0,0,0,.94);
  border:0;
  border-bottom:1px solid #2f3336;
  box-shadow:none;
  backdrop-filter:blur(12px);
}

html[data-theme="x-current"] .logo {
  gap:10px;
}

html[data-theme="x-current"] .logo-mascot {
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  filter:none;
}

html[data-theme="x-current"] .logo-text {
  color:#e7e9ea;
  text-shadow:none;
  letter-spacing:-.5px;
  font:800 22px Arial,Helvetica,sans-serif;
}

html[data-theme="x-current"] .logo-sub {
  display:none;
}

html[data-theme="x-current"] .nav {
  gap:8px;
  color:#71767b;
}

html[data-theme="x-current"] .nav > span {
  color:#71767b;
}

html[data-theme="x-current"] .nav button,
html[data-theme="x-current"] .btn {
  min-height:34px;
  padding:7px 15px;
  border:1px solid #536471;
  border-radius:999px;
  background:transparent;
  color:#eff3f4;
  box-shadow:none;
  text-shadow:none;
  font:700 14px Arial,Helvetica,sans-serif;
  letter-spacing:0;
  text-transform:none;
}

html[data-theme="x-current"] .nav button:hover,
html[data-theme="x-current"] .btn:hover {
  background:#181818;
  border-color:#71767b;
  color:#fff;
}

html[data-theme="x-current"] .btn.primary {
  background:#eff3f4;
  border-color:#eff3f4;
  color:#0f1419;
}

html[data-theme="x-current"] .btn.primary:hover {
  background:#d7dbdc;
  border-color:#d7dbdc;
}

/* App layout: left utility rail, central feed, current-X-style dark surfaces */
html[data-theme="x-current"] #app {
  background:#000;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

html[data-theme="x-current"] .layout {
  flex-direction:row;
  align-items:flex-start;
  gap:0;
  background:#000;
}

html[data-theme="x-current"] .sidebar {
  width:434px;
  flex:0 0 434px;
  padding:12px 18px 30px 0;
  gap:12px;
  background:#000;
  border:0;
  position:sticky;
  top:58px;
}

html[data-theme="x-current"] .main {
  width:auto;
  max-width:1080px;
  flex:1 1 980px;
  min-width:0;
  min-height:calc(100vh - 58px);
  padding:0;
  background:#000;
  border-left:1px solid #2f3336;
  border-right:1px solid #2f3336;
}

/* cards and panels */
html[data-theme="x-current"] .panel,
html[data-theme="x-current"] .auth-box,
html[data-theme="x-current"] .user-card,
html[data-theme="x-current"] .status-box,
html[data-theme="x-current"] .search-box,
html[data-theme="x-current"] .side-nav,
html[data-theme="x-current"] .user-result,
html[data-theme="x-current"] .blit,
html[data-theme="x-current"] .notification-item,
html[data-theme="x-current"] .dm-thread,
html[data-theme="x-current"] .dashboard-stat,
html[data-theme="x-current"] .dashboard-link,
html[data-theme="x-current"] .market-card,
html[data-theme="x-current"] .file-card,
html[data-theme="x-current"] .announcement-card {
  background:#000;
  color:#e7e9ea;
  border-color:#2f3336;
  box-shadow:none;
  text-shadow:none;
}

html[data-theme="x-current"] .terminal-header {
  padding:14px 16px;
  background:#000;
  color:#e7e9ea;
  border:0;
  border-bottom:1px solid #2f3336;
  text-shadow:none;
  text-transform:none;
  letter-spacing:0;
  font:800 20px Arial,Helvetica,sans-serif;
}

/* left rail modules */
html[data-theme="x-current"] .user-card {
  border:0;
  padding:10px 12px;
  border-radius:14px;
}

html[data-theme="x-current"] .user-card:hover {
  background:#080808;
}

html[data-theme="x-current"] .user-card .name {
  color:#e7e9ea;
  text-shadow:none;
  font:700 15px Arial,Helvetica,sans-serif;
}

html[data-theme="x-current"] .user-card .handle,
html[data-theme="x-current"] .meta,
html[data-theme="x-current"] .muted,
html[data-theme="x-current"] .blit-meta {
  color:#71767b !important;
  text-shadow:none;
}

html[data-theme="x-current"] .side-nav {
  border:0;
  gap:4px;
}

html[data-theme="x-current"] .side-btn {
  width:auto;
  align-self:flex-start;
  padding:11px 16px;
  border:0;
  border-radius:999px;
  color:#e7e9ea;
  background:transparent;
  font:500 18px Arial,Helvetica,sans-serif;
  letter-spacing:0;
  text-transform:none;
}

html[data-theme="x-current"] .side-btn:hover,
html[data-theme="x-current"] .side-btn.active {
  color:#fff;
  background:#181818;
  text-shadow:none;
}

html[data-theme="x-current"] .status-box {
  border:0;
  padding:10px 14px;
  color:#71767b;
  font-size:11px;
}

/* Current X-style search */
html[data-theme="x-current"] .search-box {
  margin:0;
  padding:0;
  gap:6px;
  border:0;
}

html[data-theme="x-current"] .search-box input,
html[data-theme="x-current"] .field input,
html[data-theme="x-current"] textarea,
html[data-theme="x-current"] select,
html[data-theme="x-current"] .market-tools input,
html[data-theme="x-current"] .market-tools select,
html[data-theme="x-current"] .market-form select,
html[data-theme="x-current"] .market-form textarea,
html[data-theme="x-current"] .market-bid-form input,
html[data-theme="x-current"] .market-admin-add input,
html[data-theme="x-current"] .market-admin-cat-name {
  background:#202327 !important;
  color:#e7e9ea !important;
  border:1px solid transparent !important;
  border-radius:999px;
  box-shadow:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
}

html[data-theme="x-current"] textarea,
html[data-theme="x-current"] .market-form textarea {
  border-radius:16px;
}

html[data-theme="x-current"] input::placeholder,
html[data-theme="x-current"] textarea::placeholder {
  color:#71767b !important;
}

html[data-theme="x-current"] input:focus,
html[data-theme="x-current"] textarea:focus,
html[data-theme="x-current"] select:focus {
  outline:none;
  border-color:#1d9bf0 !important;
  background:#000 !important;
}

/* composer */
html[data-theme="x-current"] .composer {
  padding:12px 16px;
  border:0;
  border-bottom:1px solid #2f3336;
  background:#000;
  border-radius:0;
}

html[data-theme="x-current"] .composer textarea {
  min-height:54px;
  background:#000 !important;
  border:0 !important;
  border-radius:0;
  color:#e7e9ea !important;
  font-size:20px !important;
  line-height:1.35;
  padding:8px 0;
}

html[data-theme="x-current"] .composer textarea:focus {
  background:#000 !important;
  box-shadow:none !important;
}

html[data-theme="x-current"] .compose-footer {
  border-top:1px solid #2f3336;
  padding-top:10px;
}

html[data-theme="x-current"] .compose-hint,
html[data-theme="x-current"] #char-count {
  color:#71767b;
}

/* post stream */
html[data-theme="x-current"] .feed {
  border-top:0;
}

html[data-theme="x-current"] .blit {
  margin:0;
  padding:12px 16px;
  border:0;
  border-bottom:1px solid #2f3336;
  border-radius:0;
  transition:background .12s ease;
}

html[data-theme="x-current"] .blit:hover {
  background:#080808;
  border-color:#2f3336;
}

html[data-theme="x-current"] .blit-author {
  color:#e7e9ea;
  font-weight:700;
  text-shadow:none;
}

html[data-theme="x-current"] a,
html[data-theme="x-current"] .blit-content a.hashtag,
html[data-theme="x-current"] .blit-content a.mention {
  color:#1d9bf0;
  text-shadow:none;
}

html[data-theme="x-current"] .blit-content {
  color:#e7e9ea;
  font-size:15px;
  line-height:1.35;
}

html[data-theme="x-current"] .blit-actions button {
  background:transparent;
  color:#71767b;
  border:0;
  border-radius:999px;
}

html[data-theme="x-current"] .blit-actions button:hover {
  color:#1d9bf0;
  background:rgba(29,155,240,.10);
}

/* avatars/media */
html[data-theme="x-current"] .avatar,
html[data-theme="x-current"] .avatar-img,
html[data-theme="x-current"] .profile-avatar,
html[data-theme="x-current"] .user-avatar {
  border-radius:50% !important;
  filter:none !important;
}

/* profile treatment */
html[data-theme="x-current"] .profile-banner,
html[data-theme="x-current"] .profile-header-banner {
  border-radius:0;
  filter:none;
}

html[data-theme="x-current"] .profile-name {
  color:#e7e9ea;
}

html[data-theme="x-current"] .profile-handle {
  color:#71767b;
}

/* PayPal support control stays intentionally understated */
html[data-theme="x-current"] .blitter-donate-form {
  margin:4px 0 0;
}

html[data-theme="x-current"] .blitter-donate-button {
  background:transparent;
  color:#e7e9ea;
  border:1px solid #536471;
  border-radius:999px;
  box-shadow:none;
}

html[data-theme="x-current"] .blitter-donate-button:hover {
  background:#181818;
  border-color:#71767b;
}

html[data-theme="x-current"] .blitter-paypal-retro-badge {
  background:#fff;
  border-color:#8b98a5;
  box-shadow:none;
}

/* File Archive + Marketplace + other dense areas */
html[data-theme="x-current"] .market-card,
html[data-theme="x-current"] .file-card,
html[data-theme="x-current"] .announcement-card,
html[data-theme="x-current"] .dashboard-stat,
html[data-theme="x-current"] .dashboard-link {
  border:1px solid #2f3336;
  border-radius:16px;
}

html[data-theme="x-current"] .market-card:hover,
html[data-theme="x-current"] .file-card:hover,
html[data-theme="x-current"] .dashboard-link:hover {
  background:#080808;
  border-color:#536471;
}

html[data-theme="x-current"] hr,
html[data-theme="x-current"] .separator {
  border-color:#2f3336;
}

/* page counter */
html[data-theme="x-current"] .page-counter {
  color:#71767b !important;
  background:#000 !important;
  border:1px solid #2f3336;
  border-radius:999px;
  text-shadow:none !important;
}

/* auth screens */
html[data-theme="x-current"] .auth-box {
  max-width:560px;
  margin:48px auto;
  padding:0;
  border:1px solid #2f3336;
  border-radius:16px;
  overflow:hidden;
}

html[data-theme="x-current"] .tabs {
  border-bottom:1px solid #2f3336;
}

html[data-theme="x-current"] .tab {
  background:#000;
  color:#71767b;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
}

html[data-theme="x-current"] .tab.active {
  color:#e7e9ea;
  border-bottom-color:#1d9bf0;
}

/* Responsive collapse */
@media (max-width: 900px) {
  html[data-theme="x-current"] .screen {
    max-width:100%;
  }

  html[data-theme="x-current"] .sidebar {
    width:320px;
    flex-basis:320px;
    padding-right:8px;
  }

  html[data-theme="x-current"] .side-btn {
    font-size:15px;
    padding:10px 12px;
  }
}

@media (max-width: 700px) {
  html[data-theme="x-current"] .layout {
    display:block;
  }

  html[data-theme="x-current"] .sidebar {
    position:static;
    width:auto;
    padding:8px 10px;
    border-bottom:1px solid #2f3336;
  }

  html[data-theme="x-current"] .side-nav {
    flex-direction:row;
    flex-wrap:wrap;
  }

  html[data-theme="x-current"] .side-btn {
    font-size:13px;
    padding:7px 10px;
  }

  html[data-theme="x-current"] .main {
    max-width:none;
    border-left:0;
    border-right:0;
  }

  html[data-theme="x-current"] .header {
    padding:0 10px;
  }
}

/* ==========================================================================\n   BLITTER RELAY CHAT\n   ========================================================================== */
.chat-shell{display:grid;grid-template-columns:minmax(145px,190px) minmax(0,1fr) minmax(145px,190px);min-height:560px;border:1px solid var(--border);background:var(--theme-panel,rgba(0,16,0,.65))}
.chat-room-list,.chat-user-list{padding:10px;border-right:1px solid var(--border);overflow:auto}.chat-user-list{border-right:0;border-left:1px solid var(--border)}
.chat-room-list h3,.chat-user-list h3{margin:0 0 8px;font-size:13px;color:var(--amber)}
.chat-room-button{display:block;width:100%;text-align:left;padding:7px 8px;margin:0 0 4px;background:transparent;color:var(--green);border:1px solid transparent;font-family:var(--font-mono);cursor:pointer}.chat-room-button:hover,.chat-room-button.active{border-color:var(--border);background:var(--theme-hover,rgba(0,255,0,.08));color:var(--amber)}
.chat-main{display:flex;flex-direction:column;min-width:0;min-height:560px}.chat-header{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--theme-header-a,rgba(0,20,0,.8))}.chat-title{font-size:18px;color:var(--amber)}.chat-topic{font-size:12px;color:var(--green-dim);margin-top:3px}
.chat-log{flex:1;min-height:380px;max-height:58vh;overflow:auto;padding:10px 12px;background:var(--theme-screen,var(--screen))}.chat-line{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:3px 0;line-height:1.35}.chat-line:hover{background:rgba(var(--theme-glow-rgb,84,255,0),.04)}.chat-time{color:var(--green-dim);font-size:11px}.chat-body{min-width:0;overflow-wrap:anywhere}.chat-user{font-weight:bold;color:var(--amber);cursor:pointer}.chat-action{font-style:italic}.chat-system{color:var(--green-dim);font-style:italic}.chat-sysop-tag{font-size:10px;color:var(--red);margin-left:4px}.chat-delete{float:right;font-size:10px;padding:1px 5px;margin-left:5px}
.chat-compose{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border);background:var(--theme-input,rgba(0,10,0,.8))}.chat-compose input{flex:1;min-width:0}.chat-compose .btn{flex:0 0 auto}.chat-status{padding:5px 10px;border-top:1px solid var(--border);font-size:11px;color:var(--green-dim)}
.chat-user-entry{display:block;padding:4px 2px;color:var(--green);font-size:12px;cursor:pointer}.chat-user-entry:hover{color:var(--amber)}.chat-user-entry.sysop{color:var(--amber)}
.chat-create{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.chat-create input{width:100%;box-sizing:border-box;margin-bottom:5px}.chat-admin{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.chat-command-help{font-size:11px;color:var(--green-dim);padding:6px 10px;border-top:1px dotted var(--border)}
html[data-theme="twitter-2009"] .chat-shell,html[data-theme="x-current"] .chat-shell{font-family:Arial,Helvetica,sans-serif}.chat-shell button,.chat-shell input{font-family:inherit}
html[data-theme="twitter-2009"] .chat-shell{grid-template-columns:minmax(140px,160px) minmax(0,1fr) minmax(115px,130px);min-height:640px}
html[data-theme="twitter-2009"] .chat-room-list{padding:10px 8px}
html[data-theme="twitter-2009"] .chat-user-list{padding:10px 7px}
html[data-theme="twitter-2009"] .chat-main{min-height:640px}
html[data-theme="twitter-2009"] .chat-log{max-height:68vh}
html[data-theme="twitter-2009"] .chat-compose{padding:12px 12px;gap:8px}
html[data-theme="twitter-2009"] .chat-compose input{min-height:40px;padding:8px 10px;font-size:14px}
html[data-theme="twitter-2009"] .chat-compose .btn{min-height:40px;padding:7px 14px}
html[data-theme="x-current"] .chat-shell{grid-template-columns:minmax(140px,160px) minmax(0,1fr) minmax(115px,130px);min-height:640px;border-color:#2f3336;background:#000;border-radius:16px;overflow:hidden}
html[data-theme="x-current"] .chat-room-list{padding:10px 8px}
html[data-theme="x-current"] .chat-user-list{padding:10px 7px}
html[data-theme="x-current"] .chat-main{min-height:640px}
html[data-theme="x-current"] .chat-log{background:#000;max-height:68vh}
html[data-theme="x-current"] .chat-compose{padding:12px;gap:8px}
html[data-theme="x-current"] .chat-compose input{min-height:42px;padding:9px 14px;font-size:15px;background:#202327!important;border-radius:999px!important}
html[data-theme="x-current"] .chat-compose .btn{min-height:42px;padding:8px 17px}
.chat-room-list,.chat-user-list{scrollbar-width:thin}html[data-theme="x-current"] .chat-room-list,html[data-theme="x-current"] .chat-user-list,html[data-theme="x-current"] .chat-header,html[data-theme="x-current"] .chat-compose{background:#000;border-color:#2f3336}html[data-theme="x-current"] .chat-room-button{border-radius:999px;color:#e7e9ea;font-family:Arial,Helvetica,sans-serif}html[data-theme="x-current"] .chat-room-button.active,html[data-theme="x-current"] .chat-room-button:hover{background:#181818;border-color:#2f3336}html[data-theme="x-current"] .chat-title,html[data-theme="x-current"] .chat-user{color:#e7e9ea}
html[data-theme="mac-system-6"] .chat-shell{border:2px solid #000;background:#fff;color:#000}.chat-room-list,.chat-user-list,html[data-theme="mac-system-6"] .chat-header,html[data-theme="mac-system-6"] .chat-compose,html[data-theme="mac-system-6"] .chat-log{background:#fff!important;border-color:#000!important}.chat-room-button{color:inherit}html[data-theme="mac-system-6"] .chat-room-button.active{background:#000;color:#fff}html[data-theme="mac-system-6"] .chat-title,html[data-theme="mac-system-6"] .chat-user,html[data-theme="mac-system-6"] .chat-room-list h3,html[data-theme="mac-system-6"] .chat-user-list h3{color:#000}
@media(max-width:820px){.chat-shell{grid-template-columns:135px minmax(0,1fr)}.chat-user-list{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;max-height:130px}.chat-user-list h3{width:100%}.chat-user-entry{display:inline-block}.chat-main{min-height:520px}}
@media(max-width:580px){.chat-shell{display:block}.chat-room-list{border-right:0;border-bottom:1px solid var(--border);max-height:155px}.chat-room-list h3{position:sticky;top:0}.chat-main{min-height:480px}.chat-log{max-height:52vh}.chat-line{grid-template-columns:58px minmax(0,1fr)}}


/* ==========================================================================\n   BLITTER COMPUTER LAB\n   ========================================================================== */
.computer-lab-panel{overflow:hidden}
.computer-lab-intro{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--theme-card,rgba(0,255,0,.025))}
.computer-lab-intro p{margin:7px 0 0;color:var(--green-dim);line-height:1.45}
.computer-machine-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}
.computer-machine{min-width:0;padding:14px;border:1px solid var(--border);background:var(--theme-card,rgba(0,255,0,.025));text-align:center}
.computer-machine.active{box-shadow:inset 0 0 20px rgba(var(--theme-glow-rgb,84,255,0),.05)}
.computer-machine.coming{opacity:.55}
.computer-machine h2{font-size:16px;margin:8px 0 4px}.computer-machine p{font-size:11px;color:var(--green-dim);margin:0 0 10px}
.computer-machine-badge{font-size:25px;line-height:1;color:var(--amber);text-shadow:var(--glow)}
.computer-machine-actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.computer-lab-selected{margin:14px;padding:12px;border:1px solid var(--amber);background:var(--theme-card,rgba(255,180,0,.035))}
.computer-lab-selected-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.computer-emulator-wrap{margin:0 14px 16px;border:1px solid var(--border);background:#111;overflow:hidden}
.computer-emulator-toolbar{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;background:var(--theme-header-a,#111);border-bottom:1px solid var(--border);font-size:11px;color:var(--green-dim)}
.computer-emulator-toolbar strong{color:var(--amber)}
.computer-emulator-frame{display:block;width:100%;height:760px;border:0;background:#111}
.computer-emulator-credit{padding:6px 10px;border-top:1px solid var(--border);font-size:10px;color:var(--green-dim);text-align:center}
.archive-apple2-play{white-space:nowrap}
html[data-theme="twitter-2009"] .computer-machine,html[data-theme="twitter-2009"] .computer-lab-selected{border-color:#c9dce5;background:#f5fbfe}
html[data-theme="twitter-2009"] .computer-machine-badge{color:#1686b0;text-shadow:none}
html[data-theme="twitter-2009"] .computer-emulator-wrap{border-color:#b7ccd6;border-radius:5px}
html[data-theme="twitter-2009"] .computer-emulator-toolbar{background:#eaf5fa;color:#6d8792;border-color:#b7ccd6}
html[data-theme="twitter-2009"] .computer-emulator-toolbar strong{color:#1686b0}
html[data-theme="x-current"] .computer-machine,html[data-theme="x-current"] .computer-lab-selected{border-color:#2f3336;background:#000;border-radius:16px}
html[data-theme="x-current"] .computer-machine.active{background:#080808}
html[data-theme="x-current"] .computer-machine-badge{color:#1d9bf0;text-shadow:none}
html[data-theme="x-current"] .computer-emulator-wrap{border-color:#2f3336;border-radius:16px}
html[data-theme="x-current"] .computer-emulator-toolbar{background:#000;border-color:#2f3336}
html[data-theme="x-current"] .computer-emulator-toolbar strong{color:#e7e9ea}
html[data-theme="mac-system-6"] .computer-machine,html[data-theme="mac-system-6"] .computer-lab-selected,html[data-theme="mac-system-6"] .computer-emulator-wrap{border:2px solid #000;background:#fff;border-radius:0;box-shadow:none}
html[data-theme="mac-system-6"] .computer-machine-badge,html[data-theme="mac-system-6"] .computer-emulator-toolbar strong{color:#000;text-shadow:none}
html[data-theme="mac-system-6"] .computer-emulator-toolbar{background:#fff;color:#000;border-color:#000}
@media(max-width:900px){.computer-machine-grid{grid-template-columns:1fr 1fr}.computer-emulator-frame{height:680px}}
@media(max-width:620px){.computer-machine-grid{grid-template-columns:1fr}.computer-emulator-toolbar{display:block}.computer-emulator-toolbar span{display:block;margin-top:4px}.computer-emulator-frame{height:590px}.computer-lab-selected-actions{display:grid}}

/* ==========================================================================\n   APPLE II // COMPUTER LAB WIDE DESKTOP LAYOUT\n   Give emulator/status text room without changing other display modes.\n   ========================================================================== */
@media (min-width: 901px) {
  html[data-theme="apple-ii"] .screen {
    max-width: 1280px;
  }

  html[data-theme="apple-ii"] .sidebar {
    width: 335px;
    flex: 0 0 335px;
  }

  html[data-theme="apple-ii"] .main {
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
  }

  html[data-theme="apple-ii"] .computer-lab-selected {
    margin-left: 10px;
    margin-right: 10px;
  }

  html[data-theme="apple-ii"] .computer-machine-grid {
    padding-left: 10px;
    padding-right: 10px;
    gap: 8px;
  }

  html[data-theme="apple-ii"] .computer-emulator-wrap {
    margin-left: 10px;
    margin-right: 10px;
  }

  html[data-theme="apple-ii"] .computer-emulator-toolbar {
    gap: 8px;
    white-space: nowrap;
  }

  html[data-theme="apple-ii"] .computer-lab-selected > strong,
  html[data-theme="apple-ii"] #lab-disk-status {
    white-space: nowrap;
  }
}



/* APPLE II THEME — COMPACT SIDEBAR TYPOGRAPHY
   Keeps the wider Computer Lab canvas while preventing sidebar labels from wrapping. */
html[data-theme="apple-ii"] .sidebar,
html[data-theme="apple-ii"] .sidebar button,
html[data-theme="apple-ii"] .sidebar a,
html[data-theme="apple-ii"] .sidebar .nav-item,
html[data-theme="apple-ii"] .sidebar .sidebar-link {
  font-size: 12px;
  line-height: 1.08;
  letter-spacing: .35px;
}

html[data-theme="apple-ii"] .sidebar .nav-item,
html[data-theme="apple-ii"] .sidebar .sidebar-link,
html[data-theme="apple-ii"] .sidebar button {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

html[data-theme="apple-ii"] .sidebar .profile-card,
html[data-theme="apple-ii"] .sidebar .user-card {
  font-size: 11px;
}

html[data-theme="apple-ii"] .sidebar .sidebar-status,
html[data-theme="apple-ii"] .sidebar .status-block,
html[data-theme="apple-ii"] .sidebar .footer-status {
  font-size: 10px;
  line-height: 1.12;
}



/* APPLE II THEME — KEEP RETRO CALENDAR ON ONE LINE */
html[data-theme="apple-ii"] #retro-calendar,
html[data-theme="apple-ii"] [data-route="retro-calendar"],
html[data-theme="apple-ii"] [href*="calendar"],
html[data-theme="apple-ii"] .retro-calendar-link {
  white-space: nowrap !important;
  font-size: 13px !important;
  letter-spacing: .2px !important;
  line-height: 1.06 !important;
}



/* APPLE II THEME — RETRO CALENDAR MATCHES NORMAL SIDEBAR TYPE */
html[data-theme="apple-ii"] .side-btn[data-view="announcements"] {
  white-space: nowrap !important;
  font-size: 13px !important;
  letter-spacing: .2px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  line-height: 1.06 !important;
}


/* ============================================================
   BLITTER v0.12.142 // REIMAGINED CLASSICS
   ============================================================ */
.reimagined-classics-page {
  overflow: hidden;
}

.reimagined-intro {
  padding: 20px 22px 8px;
  border-bottom: 1px solid var(--border, #2a5);
}

.reimagined-intro h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1;
  letter-spacing: 0.06em;
}

.reimagined-intro p {
  margin: 8px 0;
  max-width: 900px;
  line-height: 1.5;
}

.reimagined-intro-note {
  opacity: 0.78;
  font-size: 0.92em;
}

.reimagined-game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
}

.reimagined-game-card {
  min-width: 0;
  border: 1px solid var(--border, #2a5);
  background: rgba(0, 0, 0, 0.16);
  padding: 20px;
}

.reimagined-game-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.reimagined-game-kicker {
  font-size: 0.78em;
  opacity: 0.72;
  letter-spacing: 0.12em;
}

.reimagined-game-head h2 {
  margin: 5px 0 4px;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 0.95;
  letter-spacing: 0.05em;
}

.reimagined-game-subtitle {
  font-size: 0.9em;
  opacity: 0.86;
  letter-spacing: 0.05em;
}

.reimagined-game-status {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  padding: 5px 9px;
  font-size: 0.78em;
  font-weight: bold;
  letter-spacing: 0.12em;
}

.reimagined-game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
}

.reimagined-game-tags span {
  border: 1px solid currentColor;
  padding: 3px 7px;
  font-size: 0.76em;
  opacity: 0.8;
}

.reimagined-game-copy {
  max-width: 960px;
  line-height: 1.58;
}

.reimagined-game-copy p {
  margin: 0 0 13px;
}

.reimagined-game-motto {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed currentColor;
  font-size: clamp(18px, 3vw, 25px);
  font-weight: bold;
  letter-spacing: 0.09em;
}

.reimagined-game-closing {
  margin-top: 8px;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: bold;
  letter-spacing: 0.08em;
}

.reimagined-game-byline {
  margin-top: 8px;
  opacity: 0.78;
  letter-spacing: 0.06em;
}

.reimagined-game-actions {
  margin-top: 20px;
}

.reimagined-launch {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 1.05em;
  font-weight: bold;
}

.reimagined-legal {
  margin: 0 22px 22px;
  padding: 16px 18px;
  border: 1px dashed var(--border, #2a5);
  font-size: 0.84em;
  line-height: 1.45;
  opacity: 0.9;
}

.reimagined-legal-title {
  margin-bottom: 8px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.reimagined-legal p {
  margin: 7px 0;
}

@media (max-width: 640px) {
  .reimagined-intro,
  .reimagined-game-grid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .reimagined-game-card {
    padding: 15px;
  }

  .reimagined-game-head {
    display: block;
  }

  .reimagined-game-status {
    display: inline-block;
    margin-top: 10px;
  }

  .reimagined-legal {
    margin-left: 14px;
    margin-right: 14px;
  }

  .reimagined-launch {
    width: 100%;
  }
}


/* BLITTER v0.12.235 // # EXPLORE with early-2017-Twitter-like top tabs */
.explore-header { margin-bottom:12px; overflow:hidden; }
.explore-title {
  padding:13px 16px 9px;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:1px;
  border-bottom:1px solid var(--border);
}
.explore-tabs {
  display:flex;
  min-height:44px;
  border-bottom:1px solid var(--border);
}
.explore-tab {
  flex:1;
  border:0;
  border-right:1px solid var(--border);
  border-bottom:3px solid transparent;
  background:transparent;
  color:var(--green-dim);
  font:700 13px/1 var(--font-mono);
  letter-spacing:1px;
  cursor:pointer;
  padding:14px 10px 11px;
}
.explore-tab:last-child { border-right:0; }
.explore-tab:hover { color:var(--green); background:rgba(80,255,80,.06); }
.explore-tab.active {
  color:var(--green);
  border-bottom-color:var(--green);
  background:rgba(80,255,80,.08);
}
.explore-section { margin-bottom:12px; }
.explore-stream-title { margin:4px 0 10px; }
.explore-trend-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.explore-trend {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:11px 12px;
  border:0;
  border-right:1px dotted var(--border);
  border-bottom:1px dotted var(--border);
  background:transparent;
  color:var(--green);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.explore-trend:hover { background:rgba(80,255,80,.08); }
.explore-trend strong { overflow:hidden; text-overflow:ellipsis; }
.explore-trend span { color:var(--green-dim); font-size:11px; }

html[data-theme="twitter-2009"] .explore-title,
html[data-theme="twitter-2009"] .explore-tab,
html[data-theme="twitter-2009"] .explore-trend { color:#333; }
html[data-theme="twitter-2009"] .explore-tab.active {
  color:#1684b8;
  border-bottom-color:#1da1f2;
}
html[data-theme="x-current"] .explore-tab.active { border-bottom-color:#1d9bf0; }

@media(max-width:760px) {
  .explore-trend-strip { grid-template-columns:1fr; }
}


/* BLITTER v0.12.238 // permanent Twitter-like vertical hashtag ranking */
.twitter-trends-panel {
  overflow: hidden;
}
.twitter-trend-list {
  display: flex;
  flex-direction: column;
}
.twitter-trend-row {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--green);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.twitter-trend-row:last-child {
  border-bottom: 0;
}
.twitter-trend-row:hover {
  background: rgba(80,255,80,.07);
}
.twitter-trend-rank {
  color: var(--green-dim);
  font-size: 12px;
  line-height: 1.35;
  padding-top: 2px;
}
.twitter-trend-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.twitter-trend-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.twitter-trend-copy span {
  color: var(--green-dim);
  font-size: 11px;
}

html[data-theme="twitter-2009"] .twitter-trend-row,
html[data-theme="twitter-2009"] .twitter-trend-copy strong {
  color: #333;
}
html[data-theme="twitter-2009"] .twitter-trend-row:hover {
  background: #f5f8fa;
}
html[data-theme="twitter-2009"] .twitter-trend-rank,
html[data-theme="twitter-2009"] .twitter-trend-copy span {
  color: #657786;
}
html[data-theme="x-current"] .twitter-trend-row,
html[data-theme="x-current"] .twitter-trend-copy strong {
  color: #e7e9ea;
}
html[data-theme="x-current"] .twitter-trend-row:hover {
  background: rgba(255,255,255,.03);
}
html[data-theme="x-current"] .twitter-trend-rank,
html[data-theme="x-current"] .twitter-trend-copy span {
  color: #71767b;
}

/* BLITTER v0.12.291: v0.12.290 static mobile sidebar override removed.
   The mobile drawer is controlled by the runtime mobile-support layer in app.js. */

/* ==========================================================================\n   BLITTER v0.12.300 // APPLE II COMPUTER LAB FIT-TO-WIDTH\n   Keep the Lab inside the visible Apple II desktop canvas at browser 100%.\n   ========================================================================== */
@media (min-width: 901px) {
  html[data-theme="apple-ii"] .computer-lab-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* The Apple II font is physically wider than the normal terminal font.
     Three cards per row gives every machine label/button enough real width
     instead of forcing the fourth card toward the clipped right edge. */
  html[data-theme="apple-ii"] .computer-machine-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
  }

  html[data-theme="apple-ii"] .computer-machine,
  html[data-theme="apple-ii"] .computer-machine h2,
  html[data-theme="apple-ii"] .computer-machine p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* v0.12.287 originally kept these lines on one row.  In Computer Lab that
     makes long emulator/media status text wider than the available main pane.
     Allow the toolbar to wrap instead of being cut off at the right edge. */
  html[data-theme="apple-ii"] .computer-emulator-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-theme="apple-ii"] .computer-emulator-toolbar > *,
  html[data-theme="apple-ii"] .computer-emulator-toolbar > strong,
  html[data-theme="apple-ii"] .computer-emulator-toolbar > span,
  html[data-theme="apple-ii"] .lab-media-swap {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-theme="apple-ii"] .computer-lab-selected,
  html[data-theme="apple-ii"] .computer-lab-selected > strong,
  html[data-theme="apple-ii"] #lab-disk-status {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-theme="apple-ii"] .computer-emulator-wrap,
  html[data-theme="apple-ii"] .computer-emulator-frame {
    min-width: 0;
    max-width: 100%;
  }
}


/* ==========================================================================
   BLITTER v0.12.302 // PET CABINET PHOTO OVERLAY
   Show the live PET emulator inside a Commodore PET 2001 cabinet image.
   ========================================================================== */
.pet-cabinet-stage,
.pet-cabinet-art,
.pet-screen-window,
.pet-screen-window iframe {
  display: block;
}


/* ==========================================================================
   BLITTER v0.12.303 // PET CABINET CONTROL CLEANUP
   Keep model/drive controls outside the CRT, directly under the Lab toolbar.
   ========================================================================== */
.pet-lab-control-strip,
.pet-lab-control-box,
.pet-lab-control-row { box-sizing:border-box; }
.pet-lab-control-strip { width:100%; max-width:100%; }
.pet-lab-control-box { max-width:100%; }
html[data-theme="apple-ii"] .pet-lab-control-strip,
html[data-theme="commodore-64"] .pet-lab-control-strip,
html[data-theme="ibm-cga"] .pet-lab-control-strip,
html[data-theme="amber-terminal"] .pet-lab-control-strip,
html[data-theme="blitter-green"] .pet-lab-control-strip { overflow-wrap:anywhere; }