/* ============================================
   COFFEE — GeoCities Edition, vintage 1997
   Best viewed in Netscape Navigator @ 800x600
   ============================================ */

:root {
  --coffee-bg: #000066;
  --coffee-text: #ffff00;
  --coffee-link: #0000ee;
  --coffee-green: #00ff00;
  --coffee-magenta: #ff00ff;
  --coffee-cyan: #00ffff;
  --coffee-black: #000000;
  --coffee-font-body: 'Comic Sans MS', 'Chalkboard', cursive;
  --coffee-font-display: 'Press Start 2P', monospace;
  --coffee-font-mono: 'VT323', monospace;
  --coffee-font-size-body: 16px;
  --coffee-font-size-small: 9px;
  --coffee-font-size-medium: 18px;
  --coffee-space-xs: 4px;
  --coffee-space-sm: 6px;
  --coffee-space-md: 12px;
  --coffee-space-lg: 20px;
  --coffee-radius-sm: 4px;
  --coffee-radius-md: 8px;
  --coffee-transition-fast: 0.15s ease;
  --coffee-transition-base: 0.25s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--coffee-font-body);
  color: var(--coffee-text);
  background: var(--coffee-bg);
  /* TIE-DYE TILED STARFIELD */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23000066'/%3E%3Ctext x='8' y='18' font-size='14' fill='%23ffff00'%3E★%3C/text%3E%3Ctext x='40' y='30' font-size='10' fill='%2300ffff'%3E✦%3C/text%3E%3Ctext x='20' y='48' font-size='12' fill='%23ff00ff'%3E✧%3C/text%3E%3Ctext x='48' y='55' font-size='8' fill='%23ffffff'%3E·%3C/text%3E%3Ctext x='2' y='38' font-size='9' fill='%2300ff00'%3E·%3C/text%3E%3C/svg%3E");
  background-attachment: fixed;
  font-size: var(--coffee-font-size-body);
  text-align: center;
  min-height: 100vh;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='18' font-size='18'%3E☕%3C/text%3E%3C/svg%3E") 4 4, auto;
}

/* ---------- MIDI WARNING BAR ---------- */
.midi-warning {
  background: #ffff00;
  color: #000;
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 6px;
  border-bottom: 3px ridge #ff00ff;
  text-align: center;
}

.fake-link {
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- VISITOR COUNTER ---------- */
.counter-cluster {
  display: inline-flex;
  gap: 14px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

.counter-box {
  margin: 14px auto 8px;
  background: #000;
  border: 3px outset #00ff00;
  color: #00ff00;
  font-family: 'VT323', monospace;
  padding: 4px;
}

.counter-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #ffff00;
  letter-spacing: 2px;
}

.counter-digits {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: #00ff00;
  background: #001100;
  padding: 6px 12px;
  display: inline-block;
  margin: 4px 0;
  letter-spacing: 4px;
  border: 2px inset #00ff00;
  text-shadow: 0 0 4px #00ff00;
}

.counter-sub {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #ffaa00;
}

.portfolio-box {
  min-width: 260px;
}

.portfolio-digits {
  min-width: 210px;
  white-space: nowrap;
}

.loading-state {
  font-size: 18px;
  letter-spacing: 2px;
  animation: pulse-led 1s steps(2) infinite;
}

@keyframes pulse-led {
  50% { opacity: 0.55; }
}

/* ---------- MARQUEE ---------- */
.top-marquee {
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #ff00ff, #ff0000);
  color: #000;
  font-weight: bold;
  font-family: 'Comic Sans MS', cursive;
  font-size: 16px;
  padding: 6px 0;
  border-top: 3px ridge #ffff00;
  border-bottom: 3px ridge #ffff00;
}

.portfolio-marquee {
  background: linear-gradient(90deg, #001100, #00ff00, #001100);
  color: #001100;
  font-family: 'VT323', monospace;
  font-size: 22px;
  text-shadow: 0 0 8px #00ff00;
}

/* ---------- MAIN TABLE ---------- */
.main-table {
  margin: 20px auto;
  max-width: 780px;
  background: #000033;
  box-shadow: 8px 8px 0 #ff00ff;
}

.main-table td {
  color: #ffff00;
}

/* ---------- RAINBOW TITLE ---------- */
.rainbow-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 48px;
  margin: 10px 0;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(255,0,255,0.6);
}

.subtitle {
  font-family: 'Comic Sans MS', cursive;
  font-size: 18px;
  color: #ff66ff;
  margin: 0 0 24px;
}

/* ---------- BLINK ---------- */
.blink {
  animation: blink 0.8s steps(2) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- UNDER CONSTRUCTION ---------- */
.uc-banner {
  background: #000;
  border: 4px dashed #ffcc00;
  padding: 12px;
  margin: 20px auto;
  max-width: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.uc-sign {
  width: 70px;
  height: auto;
  animation: shake 0.6s ease-in-out infinite;
}

.uc-flip {
  animation-delay: 0.3s;
  transform: scaleX(-1);
}

@keyframes shake {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.uc-flip {
  animation: shake-flip 0.6s ease-in-out infinite;
}

@keyframes shake-flip {
  0%, 100% { transform: scaleX(-1) rotate(-3deg); }
  50% { transform: scaleX(-1) rotate(3deg); }
}

.uc-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #ffcc00;
}

/* ---------- STATUS LINE ---------- */
.status-line {
  font-family: 'Comic Sans MS', cursive;
  font-size: 16px;
  color: #00ff00;
  margin: 16px 0;
}

.is-positive {
  color: #00ff00;
  text-shadow: 0 0 6px #00ff00;
}

.is-negative {
  color: #ff6666;
  text-shadow: 0 0 6px #ff0000;
}

.dot-green {
  display: inline-block;
  width: 10px; height: 10px;
  background: #00ff00;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 6px #00ff00;
  animation: blink 1s steps(2) infinite;
}

/* ---------- NEXT DEMO BOX ---------- */
.next-demo-box {
  background: #330000;
  border: 4px ridge #ff0000;
  margin: 20px auto;
  color: #ffff00;
  box-shadow: 0 0 18px #ff0000;
}

.fire-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #ff6600;
  text-shadow: 1px 1px 0 #ffff00;
  letter-spacing: 1px;
}

.big-demo-value {
  font-family: 'Comic Sans MS', cursive;
  font-size: 28px;
  color: #ffff00;
  font-weight: bold;
  text-shadow: 2px 2px 0 #ff0000;
}

.cursor {
  animation: blink 0.8s steps(2) infinite;
  color: #00ff00;
}

.small-text {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #ff99cc;
}

/* ---------- SECTION HEADERS ---------- */
.section-h2 {
  font-family: 'Comic Sans MS', cursive;
  font-size: 26px;
  color: #00ffff;
  text-shadow: 2px 2px 0 #ff00ff;
  margin: 28px 0 14px;
  border-bottom: 2px dashed #ff00ff;
  padding-bottom: 4px;
}

/* ---------- MANIFESTO ---------- */
.manifesto {
  font-family: 'Comic Sans MS', cursive;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 20px;
  text-align: left;
  padding: 0 10px;
}

.glow-pink {
  color: #ff66ff;
  text-shadow: 0 0 6px #ff00ff;
}

.wave {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-15deg); }
}

/* ---------- CORNER BOOTH ---------- */
.ceo-salon {
  margin: 18px auto 24px;
  max-width: 680px;
  text-align: left;
  border: 5px ridge #b8742f;
  background:
    linear-gradient(180deg, rgba(57, 23, 7, 0.85), rgba(24, 8, 2, 0.95)),
    repeating-linear-gradient(
      90deg,
      rgba(112, 59, 19, 0.45) 0,
      rgba(112, 59, 19, 0.45) 18px,
      rgba(73, 37, 11, 0.45) 18px,
      rgba(73, 37, 11, 0.45) 36px
    );
  box-shadow: 0 0 0 3px #2a1104, 8px 8px 0 rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
}

.ceo-salon::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 219, 168, 0.12), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(255, 183, 77, 0.12), transparent 24%);
  pointer-events: none;
}

.ceo-salon-header,
.ceo-salon-stage {
  position: relative;
  z-index: 1;
}

.ceo-salon-header {
  padding: 12px 16px 10px;
  border-bottom: 3px dotted #d7a25d;
  background: linear-gradient(180deg, rgba(32, 12, 3, 0.88), rgba(63, 26, 7, 0.76));
}

.ceo-salon-ledger {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.7;
  color: #ffd95e;
  text-shadow: 1px 1px 0 #000;
}

.ceo-salon-meta {
  margin-top: 8px;
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: #f5d4a9;
}

.ceo-salon-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 0.9fr);
  gap: 16px;
  padding: 16px;
  align-items: start;
}

.ceo-whisper-list {
  display: grid;
  gap: 12px;
}

.ceo-whisper-card {
  padding: 12px 13px 10px;
  background:
    linear-gradient(180deg, rgba(252, 242, 220, 0.96), rgba(234, 214, 183, 0.94));
  border: 3px solid #6f3c12;
  color: #2f1406;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  transform: rotate(-0.6deg);
}

.ceo-whisper-card:nth-child(even) {
  transform: rotate(0.6deg);
}

.ceo-card-top {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.ceo-card-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: #6b1e00;
}

.ceo-card-chip {
  flex-shrink: 0;
  background: #2d1407;
  border: 2px outset #d39a54;
  color: #ffe58d;
  font-family: 'VT323', monospace;
  font-size: 24px;
  padding: 1px 8px;
}

.ceo-whisper-card.ceo-card-up .ceo-card-chip {
  color: #b6ff8b;
  text-shadow: 0 0 6px #1e6f00;
}

.ceo-whisper-card.ceo-card-down .ceo-card-chip {
  color: #ffb6a5;
  text-shadow: 0 0 6px #7a0f00;
}

.ceo-card-message {
  margin: 10px 0 8px;
  font-family: 'Comic Sans MS', cursive;
  font-size: 17px;
  line-height: 1.45;
  color: #2a1306;
}

.ceo-card-meta {
  font-family: 'VT323', monospace;
  font-size: 21px;
  color: #6f3c12;
}

.ceo-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  border: 3px dashed #d4a35f;
  background: rgba(28, 11, 2, 0.55);
  color: #ffe7aa;
  font-family: 'VT323', monospace;
  font-size: 28px;
  line-height: 1.2;
}

.ceo-loading-error {
  color: #ffb3a0;
  border-color: #ff7a59;
}

.ceo-flight-wall {
  display: grid;
  gap: 12px;
  align-content: start;
}

.flight-photo {
  background: linear-gradient(180deg, #f7efe1, #ded1bc);
  border: 4px solid #f8e7ca;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.38);
  color: #2f1406;
  padding: 10px;
  transform: rotate(2deg);
}

.flight-photo-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #7a3910;
  margin-bottom: 8px;
}

.flight-photo-frame {
  border: 3px solid #70411a;
  padding: 8px;
  background: #fff7eb;
}

.flight-sky {
  height: 100px;
  background:
    linear-gradient(180deg, #6dc1ff, #d6efff 68%, #b57d4a 68%, #87542c 100%);
  border: 2px solid #2d1407;
  position: relative;
  overflow: hidden;
}

.flight-sky::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  border-top: 2px dashed rgba(255, 243, 203, 0.8);
}

.flight-jet {
  margin-top: -72px;
  margin-left: 56%;
  font-size: 42px;
  color: #1d0f07;
  text-shadow: 2px 2px 0 #ffe8bf;
  transform: rotate(14deg);
  position: relative;
}

.flight-caption {
  margin-top: 8px;
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #5a2b0d;
}

.cash-register-note {
  padding: 12px 10px;
  background: rgba(20, 8, 2, 0.72);
  border: 3px dotted #d9a75f;
  color: #ffdea4;
  font-family: 'VT323', monospace;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
}

/* ---------- ROADMAP TABLE ---------- */
.roadmap-table {
  margin: 10px auto 20px;
  background: #000;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #00ff00;
  max-width: 640px;
  width: 90%;
}

.roadmap-table th {
  background: #ff00ff;
  color: #ffff00;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 10px;
  letter-spacing: 1px;
}

.roadmap-table td {
  border: 1px dotted #00ffff;
  color: #ffff99;
  padding: 8px;
  text-align: left;
}

.roadmap-table tr:nth-child(even) td {
  background: #001133;
}

.roadmap-complete-row td {
  background: #003300;
  color: #ccff66;
  text-shadow: 0 0 4px #00ff00;
}

/* ---------- DOSSIER / COFSLÉ ---------- */
.img-intro {
  font-family: 'Comic Sans MS', cursive;
  font-size: 18px;
  color: #ffff00;
  margin: 10px 0;
}

.dossier-geo {
  display: inline-block;
  padding: 8px;
  background: linear-gradient(135deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 400% 400%;
  animation: rainbow-frame 4s linear infinite;
  margin: 10px auto 8px;
  max-width: 520px;
}

.dossier-geo img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px ridge #000;
}

@keyframes rainbow-frame {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.img-caption {
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #ffcccc;
}

/* ---------- STATS TABLE ---------- */
.stats-table {
  margin: 10px auto 20px;
  background: #000;
}

.stats-table td {
  text-align: center;
  background: #220044;
}

.stat-big {
  font-family: 'Press Start 2P', monospace;
  font-size: 34px;
  color: #ffff00;
  text-shadow: 2px 2px 0 #ff00ff;
  margin-bottom: 6px;
}

.stat-lbl {
  font-family: 'Comic Sans MS', cursive;
  font-size: 12px;
  color: #00ffff;
}

/* ---------- WEBRING ---------- */
.webring {
  background: #000;
  border: 3px groove #ffff00;
  margin: 10px auto;
  font-family: 'VT323', monospace;
  font-size: 18px;
}

.webring a {
  color: #00ffff;
  text-decoration: underline;
  font-weight: bold;
}

.webring a:visited { color: #ff66ff; }
.webring a:hover { color: #ffff00; background: #000066; }

.webring-actions {
  position: relative;
}

.webring-join-notice {
  margin: 8px auto 0;
  max-width: 460px;
  padding: 8px 12px;
  border: 2px dashed #ff66ff;
  background: linear-gradient(180deg, #330033, #1a0022);
  color: #ffff66;
  font-family: 'Comic Sans MS', cursive;
  font-size: 18px;
  line-height: 1.25;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 2px 2px 0 #00ffff;
}

.ring-label {
  font-family: 'Comic Sans MS', cursive;
  color: #ff66ff;
  padding: 0 16px;
}

/* ---------- MAILTO ---------- */
.mailto-line {
  font-family: 'Comic Sans MS', cursive;
  font-size: 20px;
  margin: 20px 0;
}

.mailto-line a {
  color: #00ffff;
  text-decoration: underline;
  font-weight: bold;
}

.envelope {
  display: inline-block;
  font-size: 24px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- AWARDS ---------- */
.awards {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px auto 10px;
  max-width: 780px;
}

.award {
  display: inline-block;
  background: radial-gradient(circle, #ffcc00, #ff6600);
  border: 3px ridge #ffff00;
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 12px 10px;
  line-height: 1.6;
  width: 120px;
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-2deg);
}

.award:nth-child(even) { transform: rotate(2deg); background: radial-gradient(circle, #ff66ff, #990099); color: #fff; }

/* ---------- BROWSER BADGES ---------- */
.browser-badges {
  margin: 14px 0;
  font-family: 'VT323', monospace;
  font-size: 16px;
}

.badge {
  display: inline-block;
  background: #c0c0c0;
  color: #000;
  padding: 3px 8px;
  margin: 2px 4px;
  border: 2px outset #fff;
}

/* ---------- FOOTER ---------- */
.footer-geo {
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #ffccff;
  margin: 20px auto 40px;
  line-height: 1.6;
}

/* ---------- ANIMATED STAR FIELD ---------- */
.star-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  font-size: 20px;
  animation: twinkle 1.4s ease-in-out infinite;
}

.star.s1 { top: 8%; left: 5%; color: #ffff00; animation-delay: 0s; }
.star.s2 { top: 18%; left: 92%; color: #ff00ff; animation-delay: 0.2s; font-size: 16px; }
.star.s3 { top: 35%; left: 3%; color: #00ffff; animation-delay: 0.4s; font-size: 24px; }
.star.s4 { top: 55%; left: 95%; color: #ffffff; animation-delay: 0.6s; }
.star.s5 { top: 70%; left: 6%; color: #00ff00; animation-delay: 0.8s; font-size: 18px; }
.star.s6 { top: 85%; left: 90%; color: #ff6600; animation-delay: 1.0s; }
.star.s7 { top: 45%; left: 88%; color: #ffff00; animation-delay: 0.3s; font-size: 14px; }
.star.s8 { top: 25%; left: 8%; color: #ff00ff; animation-delay: 0.7s; font-size: 22px; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* keep content above stars */
center, .midi-warning, .top-marquee { position: relative; z-index: 2; }

/* ---------- WEIGHT & BALANCE (concentration readout) ---------- */
.wb-panel {
  margin: 18px auto 24px;
  max-width: 680px;
  text-align: left;
  border: 5px ridge #3a3a3a;
  background:
    linear-gradient(180deg, rgba(6, 14, 10, 0.96), rgba(2, 8, 5, 0.98)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 120, 0.04) 0,
      rgba(0, 255, 120, 0.04) 1px,
      transparent 1px,
      transparent 4px
    );
  box-shadow: 0 0 0 3px #000, 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(0, 255, 120, 0.08);
  padding: 0 0 14px;
  position: relative;
  overflow: hidden;
}

.wb-header {
  padding: 12px 16px 10px;
  border-bottom: 3px dotted #1f6f3f;
  background: linear-gradient(180deg, rgba(0, 20, 10, 0.9), rgba(0, 8, 4, 0.7));
}

.wb-ledger {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.7;
  color: #00ff88;
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0, 255, 120, 0.5);
}

.wb-meta {
  margin-top: 8px;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: #8fffc4;
}

.wb-bars {
  display: grid;
  gap: 9px;
  padding: 16px 16px 6px;
}

.wb-bar-row {
  display: grid;
  grid-template-columns: 66px 1fr 64px;
  align-items: center;
  gap: 10px;
}

.wb-bar-ticker {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #ffe58d;
  text-shadow: 1px 1px 0 #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-bar-track {
  position: relative;
  height: 18px;
  background: #011207;
  border: 2px inset #0c5a2e;
  overflow: hidden;
}

.wb-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, #00ff7f, #00aa44);
  box-shadow: 0 0 8px rgba(0, 255, 120, 0.6);
  transition: width 0.6s ease;
}

.wb-band-elevated .wb-bar-fill {
  background: linear-gradient(180deg, #ffd23f, #d68a00);
  box-shadow: 0 0 8px rgba(255, 180, 0, 0.6);
}

.wb-band-flagged .wb-bar-fill {
  background: linear-gradient(180deg, #ff5b5b, #b30000);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
  animation: wb-flag-pulse 1s steps(2) infinite;
}

@keyframes wb-flag-pulse {
  50% { opacity: 0.6; }
}

.wb-bar-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: repeating-linear-gradient(
    180deg,
    #ff00ff 0,
    #ff00ff 3px,
    transparent 3px,
    transparent 6px
  );
  pointer-events: none;
}

.wb-bar-value {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #b6ff8b;
  text-align: right;
}

.wb-band-elevated .wb-bar-value { color: #ffd23f; }
.wb-band-flagged .wb-bar-value { color: #ff8a8a; text-shadow: 0 0 6px #ff0000; }

.wb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #1f6f3f;
}

.wb-legend-item {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: #9fdcbb;
  display: inline-flex;
  align-items: center;
}

.wb-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border: 1px solid #000;
}

.wb-chip.wb-band-normal { background: #00ff7f; }
.wb-chip.wb-band-elevated { background: #ffd23f; }
.wb-chip.wb-band-flagged { background: #ff5b5b; }

.wb-flags {
  display: grid;
  gap: 7px;
  padding: 6px 16px 4px;
}

.wb-flag {
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.2;
  padding: 6px 10px;
  border: 2px solid #14502f;
  background: rgba(0, 30, 15, 0.6);
  color: #b6ff8b;
}

.wb-flag-warn {
  border-color: #b30000;
  background: rgba(50, 0, 0, 0.55);
  color: #ffb3a0;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
}

.wb-flag-ok {
  border-color: #1f8f4f;
  color: #9dffc0;
}

.wb-split {
  padding: 8px 16px 2px;
}

.wb-split-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #ffe58d;
  letter-spacing: 1px;
  margin-bottom: 7px;
}

.wb-split-bar {
  display: flex;
  height: 22px;
  border: 2px inset #0c5a2e;
  background: #011207;
  overflow: hidden;
}

.wb-split-core {
  background: linear-gradient(180deg, #00d9ff, #0077aa);
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.5);
}

.wb-split-sat {
  background: linear-gradient(180deg, #ff9ee6, #c43bb0);
  box-shadow: 0 0 8px rgba(255, 100, 220, 0.4);
}

.wb-split-legend {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-family: 'VT323', monospace;
  font-size: 18px;
}

.wb-split-legend-core { color: #6fe6ff; }
.wb-split-legend-sat { color: #ffaae8; }

.wb-loading {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border: 3px dashed #1f8f4f;
  background: rgba(0, 20, 10, 0.5);
  color: #9dffc0;
  font-family: 'VT323', monospace;
  font-size: 24px;
}

.wb-loading-error {
  color: #ffb3a0;
  border-color: #ff7a59;
}

@media (max-width: 700px) {
  .portfolio-digits {
    min-width: 0;
    font-size: 18px;
    letter-spacing: 2px;
  }

  .portfolio-marquee {
    font-size: 18px;
  }

  .ceo-salon-stage {
    grid-template-columns: 1fr;
  }

  .ceo-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .ceo-card-chip {
    font-size: 20px;
  }

  .ceo-loading {
    min-height: 0;
    font-size: 24px;
  }

  .wb-bar-row {
    grid-template-columns: 52px 1fr 52px;
    gap: 7px;
  }

  .wb-bar-value { font-size: 17px; }
  .wb-flag { font-size: 17px; }
  .wb-meta { font-size: 19px; }
}