openvibers/openvibe.live Commits

Status words and badges use the readable status twins (var(--<status>-text, var(--<status>))) (#312)

OP OpenVibers committed 22 days ago · 53acfaa825 · 20 files, +86 −86

Changes

ddiff --git a/public/css/broadcast.css b/public/css/broadcast.css
iindex 1e0c70e9..4f0b48a7 100644
---- a/public/css/broadcast.css
++++ b/public/css/broadcast.css
@@@ -1022,7 +1022,7 @@
      padding: 10px 14px;
      margin-bottom: 16px;
      font-size: 0.85rem;
--    color: var(--warning, #f39c12);
++    color: var(--warning-text, var(--warning, #f39c12));
  }
  .bc-active-notice i {
      font-size: 1.1rem;
@@@ -1250,7 +1250,7 @@
  
  /* ── Required Asterisk ───────────────────────────────────────── */
  .bc-required {
--    color: var(--danger, #e74c3c);
++    color: var(--danger-text, var(--danger, #e74c3c));
      font-weight: 700;
  }
  
@@@ -1763,7 +1763,7 @@
      flex: 1 1 200px;
  }
  .bc-ws-restream-cooldown i.fa-triangle-exclamation {
--    color: var(--warning, #e0a800);
++    color: var(--warning-text, var(--warning, #e0a800));
  }
  
  /* ── Workspace tabs ── */
ddiff --git a/public/css/chat-shared.css b/public/css/chat-shared.css
iindex bbb07abd..95102b6d 100644
---- a/public/css/chat-shared.css
++++ b/public/css/chat-shared.css
@@@ -97,11 +97,11 @@
  }
  .ctx-btn:hover { background: var(--bg-hover); }
  .ctx-btn i { width: 16px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
--.ctx-btn-danger { color: var(--danger); }
--.ctx-btn-danger i { color: var(--danger); }
++.ctx-btn-danger { color: var(--danger-text, var(--danger)); }
++.ctx-btn-danger i { color: var(--danger-text, var(--danger)); }
  .ctx-btn-danger:hover { background: rgba(231,76,60,0.12); }
--.ctx-btn-warn { color: var(--warning, #f39c12); }
--.ctx-btn-warn i { color: var(--warning, #f39c12); }
++.ctx-btn-warn { color: var(--warning-text, var(--warning, #f39c12)); }
++.ctx-btn-warn i { color: var(--warning-text, var(--warning, #f39c12)); }
  .ctx-btn-warn:hover { background: rgba(243,156,18,0.12); }
  
  /* Deleted message fade-out */
@@@ -172,7 +172,7 @@
      background: var(--bg-primary, #1e1e24);
      border-bottom: 1px solid var(--border, #3a3a44);
      font-size: 1.05rem; font-weight: 600;
--    color: var(--warning, #f59e0b);
++    color: var(--warning-text, var(--warning, #f59e0b));
  }
  .link-trust-header i { font-size: 1.2rem; }
  
ddiff --git a/public/css/features/broadcast.css b/public/css/features/broadcast.css
iindex 62735c4a..16e7819d 100644
---- a/public/css/features/broadcast.css
++++ b/public/css/features/broadcast.css
@@@ -206,7 +206,7 @@
      transition: color 0.15s, background 0.15s;
  }
  .bc-ws-item:hover .bc-ws-item-del { display: flex; align-items: center; }
--.bc-ws-item-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
++.bc-ws-item-del:hover { color: var(--danger-text, var(--danger)); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .bc-ws-empty {
      flex: 1;
      display: flex;
@@@ -790,8 +790,8 @@
      line-height: 1.35;
      overflow-wrap: anywhere;
  }
--.bc-restream-err { color: var(--danger, #e74c3c); }
--.bc-restream-warn { color: var(--warning, #f39c12); }
++.bc-restream-err { color: var(--danger-text, var(--danger, #e74c3c)); }
++.bc-restream-warn { color: var(--warning-text, var(--warning, #f39c12)); }
  .bc-restream-transport {
      margin-left: 6px;
      padding: 1px 5px;
@@@ -829,11 +829,11 @@
      border-radius: 10px;
      white-space: nowrap;
  }
--.bc-restream-status-live { background: rgba(46, 204, 113, 0.15); color: var(--success, #2ecc71); }
--.bc-restream-status-starting { background: rgba(243, 156, 18, 0.15); color: var(--warning, #f39c12); }
--.bc-restream-status-error { background: rgba(231, 76, 60, 0.15); color: var(--danger, #e74c3c); }
++.bc-restream-status-live { background: rgba(46, 204, 113, 0.15); color: var(--success-text, var(--success, #2ecc71)); }
++.bc-restream-status-starting { background: rgba(243, 156, 18, 0.15); color: var(--warning-text, var(--warning, #f39c12)); }
++.bc-restream-status-error { background: rgba(231, 76, 60, 0.15); color: var(--danger-text, var(--danger, #e74c3c)); }
  .bc-restream-status-idle { background: var(--bg-tertiary); color: var(--text-secondary); }
--.bc-restream-status-failed { background: rgba(231, 76, 60, 0.15); color: var(--danger, #e74c3c); }
++.bc-restream-status-failed { background: rgba(231, 76, 60, 0.15); color: var(--danger-text, var(--danger, #e74c3c)); }
  
  .bc-restream-actions {
      margin-left: auto;
@@@ -895,9 +895,9 @@
      gap: 5px;
      white-space: nowrap;
  }
--.bc-rs-live    { color: var(--success, #2ecc71); }
--.bc-rs-connecting { color: var(--warning, #f39c12); }
--.bc-rs-error   { color: var(--danger, #e74c3c); }
++.bc-rs-live    { color: var(--success-text, var(--success, #2ecc71)); }
++.bc-rs-connecting { color: var(--warning-text, var(--warning, #f39c12)); }
++.bc-rs-error   { color: var(--danger-text, var(--danger, #e74c3c)); }
  .bc-rs-ready   { color: var(--text-secondary, #888); }
  .bc-rs-off     { color: var(--text-muted, #555); }
  
@@@ -1215,7 +1215,7 @@
  .bc-tab .bc-tab-close:hover {
      opacity: 1;
      background: rgba(231, 76, 60, 0.3);
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
  }
  #bc-stream-manager {
      padding: 24px;
@@@ -1628,7 +1628,7 @@
      background: color-mix(in srgb, var(--danger) 15%, var(--bg-secondary));
      border: 1px solid var(--danger);
      border-radius: var(--radius);
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
      font-size: 0.85rem;
      font-weight: 600;
      margin: 8px 16px;
@@@ -1800,10 +1800,10 @@
      min-width: 80px;
      text-align: right;
  }
--.bc-ws-dirty { color: var(--warning, #e6a700); }
++.bc-ws-dirty { color: var(--warning-text, var(--warning, #e6a700)); }
  .bc-ws-saving { color: var(--text-muted); }
--.bc-ws-saved { color: var(--success, #2ecc71); }
--.bc-ws-save-error { color: var(--danger, #e74c3c); }
++.bc-ws-saved { color: var(--success-text, var(--success, #2ecc71)); }
++.bc-ws-save-error { color: var(--danger-text, var(--danger, #e74c3c)); }
  .bc-ws-panel-hd {
      display: flex;
      align-items: center;
@@@ -2433,7 +2433,7 @@
  .bc-switch:has(input:checked) { border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border)); background: color-mix(in srgb, var(--danger, #ef4444) 7%, transparent); }
  .bc-switch-text { display: grid; gap: 2px; min-width: 0; }
  .bc-switch-text b { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
--.bc-switch-text b i { color: var(--danger, #ef4444); margin-right: 3px; }
++.bc-switch-text b i { color: var(--danger-text, var(--danger, #ef4444)); margin-right: 3px; }
  .bc-switch-text small { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
  
  /* Video quality: reads as a row that opens (chevron, current values), not a static label. */
ddiff --git a/public/css/features/channel.css b/public/css/features/channel.css
iindex b2173787..668e4a44 100644
---- a/public/css/features/channel.css
++++ b/public/css/features/channel.css
@@@ -615,8 +615,8 @@
  .preset-btn:active { background: var(--accent); color: #000; }
  .preset-btn.on-cooldown { opacity: 0.5; pointer-events: none; }
  .staff-badge:hover { transform: translateY(-1px); }
--.staff-badge-admin { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); }
--.staff-badge-mod { color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
++.staff-badge-admin { color: var(--warning-text, var(--warning)); background: color-mix(in srgb, var(--warning) 15%, transparent); }
++.staff-badge-mod { color: var(--success-text, var(--success)); background: color-mix(in srgb, var(--success) 15%, transparent); }
  .staff-badge[data-tip]::after {
      content: attr(data-tip);
      position: absolute; bottom: calc(100% + 7px); left: 50%;
@@@ -873,7 +873,7 @@
  .ch-panel-edit-head .ch-panel-type { font-weight: 700; font-size: 0.85rem; flex: 1; color: var(--text-secondary); }
  .ch-panel-drag { cursor: grab; color: var(--text-muted); }
  .ch-panel-drag:active { cursor: grabbing; }
--.ch-panel-del { background: none; border: none; color: var(--live-red, #e05a5a); cursor: pointer; padding: 4px; border-radius: 6px; }
++.ch-panel-del { background: none; border: none; color: var(--live-red-text, var(--live-red, #e05a5a)); cursor: pointer; padding: 4px; border-radius: 6px; }
  .ch-panel-del:hover { background: color-mix(in srgb, var(--live-red, #e05a5a) 15%, transparent); }
  .ch-panel-img-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ch-panel-img-preview { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--bg-primary); }
@@@ -881,7 +881,7 @@
  .ch-media-req { display: flex; gap: 8px; }
  .ch-media-hint { font-size: 0.82rem; }
  .ch-media-status { font-size: 0.85rem; min-height: 1em; }
--.ch-media-status.err { color: var(--live-red, #e05a5a); }
++.ch-media-status.err { color: var(--live-red-text, var(--live-red, #e05a5a)); }
  .ch-media-section-label { font-weight: 700; font-size: 0.95rem; margin-top: 6px; display: flex; align-items: center; gap: 7px; }
  .ch-media-now .ch-media-item { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .ch-media-queue { display: flex; flex-direction: column; gap: 8px; }
@@@ -894,7 +894,7 @@
  .ch-media-meta { flex: 1 1 180px; }
  .ch-media-sub { font-size: 0.82rem; }
  .ch-media-cost { margin-left: 6px; white-space: nowrap; }
--.ch-media-problem { margin-top: 3px; font-size: 0.8rem; color: var(--live-red, #e05a5a); overflow-wrap: anywhere; }
++.ch-media-problem { margin-top: 3px; font-size: 0.8rem; color: var(--live-red-text, var(--live-red, #e05a5a)); overflow-wrap: anywhere; }
  .ch-media-mod-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 8px 10px; border-radius: 10px;
@@@ -903,7 +903,7 @@
      font-size: 0.85rem;
  }
  .ch-media-actions { display: flex; gap: 5px; flex: 0 0 auto; margin-left: auto; }
--.ch-media-actions .btn.danger:hover { border-color: var(--live-red, #e05a5a); color: var(--live-red, #e05a5a); }
++.ch-media-actions .btn.danger:hover { border-color: var(--live-red, #e05a5a); color: var(--live-red-text, var(--live-red, #e05a5a)); }
  .ch-media-quote {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 10px; border-radius: 10px;
@@@ -912,7 +912,7 @@
  }
  .ch-media-quote.loading { justify-content: center; padding: 14px; }
  .ch-media-quote-price { margin-top: 4px; font-weight: 700; }
--.ch-media-quote-price.err { color: var(--live-red, #e05a5a); font-weight: 600; }
++.ch-media-quote-price.err { color: var(--live-red-text, var(--live-red, #e05a5a)); font-weight: 600; }
  .ch-media-quote-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .ch-media-item > .ch-media-actions { min-width: 0; }
  @media (max-width: 900px) {
@@@ -1035,7 +1035,7 @@
  .wh-time { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
  .wh-icon { font-size: 0.8rem; color: var(--primary, var(--accent)); }
  .wh-temp { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
--.wh-precip { font-size: 0.62rem; color: var(--info, #60a5fa); }
++.wh-precip { font-size: 0.62rem; color: var(--info-text, var(--info, #60a5fa)); }
  .wh-extra { font-size: 0.58rem; color: var(--text-muted); }
  .weather-hour.wh-now {
      background: color-mix(in srgb, var(--primary, var(--accent)) 18%, var(--bg-tertiary, var(--bg-secondary)));
@@@ -1061,7 +1061,7 @@
  .wd-temps { display: flex; gap: 6px; font-size: 0.78rem; flex: 1; }
  .wd-hi { font-weight: 700; color: var(--text-primary); }
  .wd-lo { color: var(--text-muted); }
--.wd-precip { font-size: 0.65rem; color: var(--info, #60a5fa); flex-shrink: 0; }
++.wd-precip { font-size: 0.65rem; color: var(--info-text, var(--info, #60a5fa)); flex-shrink: 0; }
  #ch-weather-widget-offline .ch-weather-widget,
  #ch-weather-widget-offline { max-width: 500px; }
  .ch-offline-area .stream-main { padding-bottom: 14px; }
ddiff --git a/public/css/features/chatpage.css b/public/css/features/chatpage.css
iindex ba2948ce..68cf2a6e 100644
---- a/public/css/features/chatpage.css
++++ b/public/css/features/chatpage.css
@@@ -157,7 +157,7 @@
  }
  .vc-participant-muted {
      font-size: 0.6rem;
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
      opacity: 0.75;
      flex-shrink: 0;
  }
@@@ -230,7 +230,7 @@
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
--    color: var(--success, #22c55e);
++    color: var(--success-text, var(--success, #22c55e));
      display: flex;
      align-items: center;
      gap: 6px;
ddiff --git a/public/css/features/dashboard.css b/public/css/features/dashboard.css
iindex d0d52d2c..0217e471 100644
---- a/public/css/features/dashboard.css
++++ b/public/css/features/dashboard.css
@@@ -81,7 +81,7 @@
  .bucks-log-when { font-size: 0.76rem; color: var(--text-muted); }
  .bucks-log-note { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bucks-log-amt { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
--.bucks-log-amt.pos { color: var(--success, #2ecc71); }
++.bucks-log-amt.pos { color: var(--success-text, var(--success, #2ecc71)); }
  .bucks-log-amt.neg { color: var(--text-secondary); }
  .dash-cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; margin-top: 8px; }
  .dash-cp-grid > label > span:first-child { font-weight: 600; }
ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex 0111087e..e4f56a8d 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -607,7 +607,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
  @media (prefers-reduced-motion: reduce) { .home-load-more, .home-load-more i { transition: none; } }
  .hero-stat:hover { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
  .hero-stat--clickable:hover { transform: translateY(-1px); }
--.hero-stat--live > i { color: var(--live-red); background: color-mix(in srgb, var(--live-red) 15%, transparent); border-color: color-mix(in srgb, var(--live-red) 34%, transparent); }
++.hero-stat--live > i { color: var(--live-red-text, var(--live-red)); background: color-mix(in srgb, var(--live-red) 15%, transparent); border-color: color-mix(in srgb, var(--live-red) 34%, transparent); }
  .hero-stat-num { font-weight: 850; letter-spacing: -0.02em; }
  .hero-stat-delta {
      display: inline-flex; align-items: center; gap: 2px;
@@@ -1042,7 +1042,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  }
--.hero-stat-strip .hero-stat--live > i { color: var(--live-red); background: color-mix(in srgb, var(--live-red) 15%, transparent); border-color: color-mix(in srgb, var(--live-red) 34%, transparent); }
++.hero-stat-strip .hero-stat--live > i { color: var(--live-red-text, var(--live-red)); background: color-mix(in srgb, var(--live-red) 15%, transparent); border-color: color-mix(in srgb, var(--live-red) 34%, transparent); }
  .hero-stat-strip .hero-stat-meta { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .hero-stat-strip .hero-stat-num { font-size: 1.06rem; line-height: 1.05; letter-spacing: -0.02em; }
  .hero-stat-strip .hero-stat-label { font-size: 0.56rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
ddiff --git a/public/css/features/search.css b/public/css/features/search.css
iindex c549eadc..6467ebe3 100644
---- a/public/css/features/search.css
++++ b/public/css/features/search.css
@@@ -18,7 +18,7 @@
  .ls-title:hover { color: var(--accent); }
  .ls-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0; font-size: 0.8rem; color: var(--text-muted); }
  .ls-kind { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
--.ls-live { color: var(--live-red); font-weight: 700; }
++.ls-live { color: var(--live-red-text, var(--live-red)); font-weight: 700; }
  .ls-snippet { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
  .ls-snippet mark { background: var(--bg-tertiary); color: var(--text-primary); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--accent); }
  .ls-more-wrap { display: flex; justify-content: center; margin-top: 16px; }
ddiff --git a/public/css/features/stats.css b/public/css/features/stats.css
iindex 0569ee37..031ec49b 100644
---- a/public/css/features/stats.css
++++ b/public/css/features/stats.css
@@@ -55,8 +55,8 @@
  .sn-tile-sub { font-size: 0.72rem; color: var(--text-secondary); }
  .sn-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); }
  .sn-delta i { font-size: 0.7rem; }
--.sn-delta.is-up i { color: var(--success, #2ecc71); }
--.sn-delta.is-down i { color: var(--error, #e74c3c); }
++.sn-delta.is-up i { color: var(--success-text, var(--success, #2ecc71)); }
++.sn-delta.is-down i { color: var(--error-text, var(--error, #e74c3c)); }
  
  .sn-body { position: relative; transition: opacity var(--dur-fast, 160ms); }
  .sn-body.is-loading { opacity: 0.45; pointer-events: none; }
ddiff --git a/public/css/messenger.css b/public/css/messenger.css
iindex e6f3cb20..80d1921d 100644
---- a/public/css/messenger.css
++++ b/public/css/messenger.css
@@@ -550,7 +550,7 @@
  }
  .msg-group-member-remove {
      font-size: 12px;
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.15s;
@@@ -587,7 +587,7 @@
  .msg-group-leave button {
      background: transparent;
      border: 1px solid var(--danger);
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
      padding: 8px 16px;
      border-radius: var(--radius);
      font-size: 13px;
ddiff --git a/public/css/style.css b/public/css/style.css
iindex e4dcfecc..0ba4f0b7 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -1198,7 +1198,7 @@ body.ov-nav-overlay .navbar.ovnav-top {
      margin: 18px auto 0; font-size: 0.86rem; color: var(--text-secondary);
  }
  .hero-golive-note span { display: inline-flex; align-items: center; gap: 6px; }
--.hero-golive-note i { color: var(--success, #22c55e); font-size: 0.78rem; }
++.hero-golive-note i { color: var(--success-text, var(--success, #22c55e)); font-size: 0.78rem; }
  .hero-golive-note a { color: var(--accent-light); font-weight: 600; }
  .hero-philosophy-btn {
      display: inline-flex;
@@@ -1432,7 +1432,7 @@ body.ov-nav-overlay .navbar.ovnav-top {
      font-size: 0.75rem; font-weight: 600;
  }
  .live-dot {
--    color: var(--live-red); font-size: 0.6rem;
++    color: var(--live-red-text, var(--live-red)); font-size: 0.6rem;
      animation: pulse-live 1.5s infinite;
  }
  @keyframes pulse-live {
@@@ -2519,7 +2519,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  
  .stream-nsfw-gate-card i {
      font-size: clamp(2rem, 5vw, 3rem);
--    color: var(--warning, #f39c12);
++    color: var(--warning-text, var(--warning, #f39c12));
      margin-bottom: 2px;
  }
  
@@@ -3631,10 +3631,10 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .chat-badge i { font-size: 0.66rem; line-height: 1; }
  .chat-badge:hover { transform: translateY(-1px); }
  /* role colours: tinted fill + coloured icon + subtle matching border */
--.chat-badge-admin    { color: var(--warning);      background: color-mix(in srgb, var(--warning) 18%, transparent);      border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
--.chat-badge-mod      { color: var(--success);      background: color-mix(in srgb, var(--success) 18%, transparent);      border-color: color-mix(in srgb, var(--success) 40%, transparent); }
++.chat-badge-admin    { color: var(--warning-text, var(--warning));      background: color-mix(in srgb, var(--warning) 18%, transparent);      border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
++.chat-badge-mod      { color: var(--success-text, var(--success));      background: color-mix(in srgb, var(--success) 18%, transparent);      border-color: color-mix(in srgb, var(--success) 40%, transparent); }
  .chat-badge-cmod     { color: #6ea8ff;             background: color-mix(in srgb, #6ea8ff 18%, transparent);             border-color: color-mix(in srgb, #6ea8ff 40%, transparent); }
--.chat-badge-streamer { color: var(--live-red);     background: color-mix(in srgb, var(--live-red) 18%, transparent);     border-color: color-mix(in srgb, var(--live-red) 40%, transparent); }
++.chat-badge-streamer { color: var(--live-red-text, var(--live-red));     background: color-mix(in srgb, var(--live-red) 18%, transparent);     border-color: color-mix(in srgb, var(--live-red) 40%, transparent); }
  .chat-badge-sub      { color: var(--accent-light, var(--accent)); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
  /* VIP member badge (OpenVibe.VIP): a short text label, so it is a pill rather than an icon square. */
  .chat-vip-badge      { width: auto; padding: 0 5px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; color: var(--accent-light, var(--accent)); background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
@@@ -3704,7 +3704,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
      z-index: 1;
  }
  .chat-slowmode-info i {
--    color: var(--warning);
++    color: var(--warning-text, var(--warning));
      font-size: 0.7rem;
  }
  .chat-slowmode-label {
@@@ -3712,7 +3712,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
      color: var(--text-secondary, var(--text-muted));
  }
  .chat-slowmode-duration {
--    color: var(--warning);
++    color: var(--warning-text, var(--warning));
      font-variant-numeric: tabular-nums;
      font-weight: 600;
  }
@@@ -4007,11 +4007,11 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  }
  .ctx-btn:hover { background: var(--bg-hover); }
  .ctx-btn i { width: 16px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
--.ctx-btn-danger { color: var(--danger); }
--.ctx-btn-danger i { color: var(--danger); }
++.ctx-btn-danger { color: var(--danger-text, var(--danger)); }
++.ctx-btn-danger i { color: var(--danger-text, var(--danger)); }
  .ctx-btn-danger:hover { background: rgba(231,76,60,0.12); }
--.ctx-btn-warn { color: var(--warning, #f39c12); }
--.ctx-btn-warn i { color: var(--warning, #f39c12); }
++.ctx-btn-warn { color: var(--warning-text, var(--warning, #f39c12)); }
++.ctx-btn-warn i { color: var(--warning-text, var(--warning, #f39c12)); }
  .ctx-btn-warn:hover { background: rgba(243,156,18,0.12); }
  
  /* Deleted message fade-out */
@@@ -4712,13 +4712,13 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
      opacity: 0.9;
  }
  .toast.success { border-color: color-mix(in srgb, var(--success) 65%, transparent); }
--.toast.success i { color: var(--success); }
++.toast.success i { color: var(--success-text, var(--success)); }
  .toast.error { border-color: color-mix(in srgb, var(--danger) 65%, transparent); }
--.toast.error i { color: var(--danger); }
++.toast.error i { color: var(--danger-text, var(--danger)); }
  .toast.warning { border-color: color-mix(in srgb, var(--warning) 70%, transparent); }
--.toast.warning i { color: var(--warning); }
++.toast.warning i { color: var(--warning-text, var(--warning)); }
  .toast.info { border-color: color-mix(in srgb, var(--info) 65%, transparent); }
--.toast.info i { color: var(--info); }
++.toast.info i { color: var(--info-text, var(--info)); }
  @keyframes toast-in {
      from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.98); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
@@@ -5283,7 +5283,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
  /* ── Media Request tab ── */
  .ch-media-req input { flex: 1; }
  .ch-media-hint i { margin-right: 3px; opacity: 0.8; }
--.ch-media-status.ok { color: var(--success, #4fd48a); }
++.ch-media-status.ok { color: var(--success-text, var(--success, #4fd48a)); }
  .ch-media-section-label i { color: var(--accent); }
  .ch-media-item { display: flex; align-items: center; gap: 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; }
  .ch-media-pos { width: 22px; text-align: center; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
@@@ -5300,7 +5300,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
  /* Quote card: the exact price for this link, shown before anything is charged. */
  .ch-media-quote-meta { min-width: 0; flex: 1; }
  .ch-media-quote-price i { color: var(--accent); }
--.ch-media-quote-price.ok { color: var(--success, #4fd48a); }
++.ch-media-quote-price.ok { color: var(--success-text, var(--success, #4fd48a)); }
  /* Container-relative, not viewport-relative: the channel tab is a narrow column even on
     a wide screen, which is why viewport breakpoints alone left the controls clipped. */
  @media (max-width: 900px) {
@@@ -5449,7 +5449,7 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
  .uai-section h4 .uai-tag { margin-left: auto; font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
  .uai-tag-today { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
  .uai-tag-all { background: var(--bg-tertiary); color: var(--text-secondary); }
--.uai-tag-streamer { background: color-mix(in srgb, var(--live-red, #e05a5a) 20%, transparent); color: var(--live-red, #e05a5a); }
++.uai-tag-streamer { background: color-mix(in srgb, var(--live-red, #e05a5a) 20%, transparent); color: var(--live-red-text, var(--live-red, #e05a5a)); }
  .uai-body { font-size: 0.9rem; line-height: 1.55; color: var(--text-primary); }
  /* Collapsible overview sections (collapsed by default; header toggles open) */
  .uai-collapsible .uai-collapse-toggle { cursor: pointer; user-select: none; }
@@@ -6868,11 +6868,11 @@ body.theme-light .btn-outline:hover {
      text-transform: uppercase;
  }
  .paste-card-pin {
--    color: var(--warning, #f59e0b);
++    color: var(--warning-text, var(--warning, #f59e0b));
      font-size: 0.75rem;
  }
  .paste-card-burn {
--    color: var(--danger, #ef4444);
++    color: var(--danger-text, var(--danger, #ef4444));
      font-size: 0.75rem;
  }
  .paste-card-nsfw {
@@@ -7521,7 +7521,7 @@ body.theme-light .btn-outline:hover {
      min-width: 0;
  }
  .vc-channel-count.full {
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
  }
  
  /* Participant list — shown inside channel items */
@@@ -8814,7 +8814,7 @@ body.theme-light .btn-outline:hover {
      background: var(--bg-primary, #1e1e24);
      border-bottom: 1px solid var(--border, #3a3a44);
      font-size: 1.05rem; font-weight: 600;
--    color: var(--warning, #f59e0b);
++    color: var(--warning-text, var(--warning, #f59e0b));
  }
  .link-trust-header i { font-size: 1.2rem; }
  
@@@ -9097,7 +9097,7 @@ body.theme-light .btn-outline:hover {
      padding: 32px 0; text-align: center; color: var(--text-muted);
      font-size: 0.9rem;
  }
--.admin-tools-error { color: var(--danger); }
++.admin-tools-error { color: var(--danger-text, var(--danger)); }
  
  /* Admin tools button in context menu */
  .ctx-btn-admin-tools { color: var(--accent); }
@@@ -10348,7 +10348,7 @@ label.staff-inline-toggle.aiv-field { flex-direction:row; align-items:center; }
  /* The live dot keeps its pulse and stays a dot — a tile around it would hide the signal. */
  .section-header h2 > i.live-dot {
      width: auto; height: auto; background: none; border: 0; box-shadow: none;
--    color: var(--live-red); font-size: 0.62rem;
++    color: var(--live-red-text, var(--live-red)); font-size: 0.62rem;
  }
  /* A rule that carries the section colour out across the page and fades. */
  .section-header::after {
@@@ -10634,7 +10634,7 @@ label.staff-inline-toggle.aiv-field { flex-direction:row; align-items:center; }
  .ov-conn-pill[data-state="connected"] .ov-conn-dot { background: var(--success); }
  @keyframes ovConnPulse { 50% { transform: scale(0.55); opacity: 0.5; } }
  .chat-conn-status { font-style: italic; opacity: 0.85; }
--.chat-conn-status[data-state="connected"] { color: var(--success); }
++.chat-conn-status[data-state="connected"] { color: var(--success-text, var(--success)); }
  @media (prefers-reduced-motion: reduce) {
      .ov-conn-pill { transition: opacity var(--motion-fast) linear; transform: translate3d(-50%, 0, 0); }
      .ov-conn-pill .ov-conn-dot { animation: none !important; }
ddiff --git a/public/index.html b/public/index.html
iindex 51d75d47..8b41bc3f 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -97,7 +97,7 @@
      .ov-route-skel span:nth-child(3){height:120px;animation-delay:.2s}
      @keyframes ovRouteSkel{from{opacity:.55}to{opacity:1}}
      .ov-route-error{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px auto;max-width:640px;padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--danger,#ef4444) 40%,transparent);background:color-mix(in srgb,var(--danger,#ef4444) 10%,var(--bg-card,#171826))}
--    .ov-route-error>i{font-size:1.4rem;color:var(--danger,#ef4444)}
++    .ov-route-error>i{font-size:1.4rem;color:var(--danger-text, var(--danger,#ef4444))}
      .ov-route-error>div{flex:1;min-width:180px;display:grid;gap:2px}
      .ov-route-error span{color:var(--text-muted,#8b93ad);font-size:.9rem}
      @media (prefers-reduced-motion:reduce){.ov-route-skel span{animation:none}}
ddiff --git a/public/js/app.js b/public/js/app.js
iindex 3932aed9..a002d62b 100644
---- a/public/js/app.js
++++ b/public/js/app.js
@@@ -2173,7 +2173,7 @@ function createManagedStreamModal() {
              </button>
              <button class="btn btn-outline" onclick="closeModal()" style="flex:1">Cancel</button>
          </div>
--        <p id="cms-error" style="display:none;color:var(--danger);margin-top:8px;font-size:0.85rem"></p>`;
++        <p id="cms-error" style="display:none;color:var(--danger-text, var(--danger));margin-top:8px;font-size:0.85rem"></p>`;
  }
  
  function _cmsSelectMethod(method) {
ddiff --git a/public/js/broadcast-workspace.js b/public/js/broadcast-workspace.js
iindex 3b2432bf..74cdc9bf 100644
---- a/public/js/broadcast-workspace.js
++++ b/public/js/broadcast-workspace.js
@@@ -1204,7 +1204,7 @@ function _wsConfirmUnsaved(message) {
          overlay.className = 'bc-ws-confirm-overlay';
          overlay.innerHTML = `
              <div class="bc-ws-confirm-dialog">
--                <h3><i class="fa-solid fa-triangle-exclamation" style="color:var(--warning)"></i> Unsaved Changes</h3>
++                <h3><i class="fa-solid fa-triangle-exclamation" style="color:var(--warning-text, var(--warning))"></i> Unsaved Changes</h3>
                  <p>${esc(message || 'You have unsaved changes.')}</p>
                  <div class="bc-ws-confirm-actions">
                      <button class="btn btn-small" id="bc-ws-confirm-cancel">Cancel</button>
@@@ -1235,7 +1235,7 @@ function _wsConfirmAction(message, { title = 'Are you sure?', okLabel = 'Confirm
          overlay.className = 'bc-ws-confirm-overlay';
          overlay.innerHTML = `
              <div class="bc-ws-confirm-dialog">
--                <h3><i class="fa-solid fa-triangle-exclamation" style="color:var(--warning)"></i> ${esc(title)}</h3>
++                <h3><i class="fa-solid fa-triangle-exclamation" style="color:var(--warning-text, var(--warning))"></i> ${esc(title)}</h3>
                  <p>${esc(message)}</p>
                  <div class="bc-ws-confirm-actions">
                      <button class="btn btn-small" id="bc-ws-confirm-cancel">Cancel</button>
@@@ -2566,7 +2566,7 @@ function _wsRenderSlotRsCard() {
                  <button class="btn btn-small btn-outline" onclick="_wsEditSlotRs()" title="Edit">
                      <i class="fa-solid fa-pen"></i>
                  </button>
--                <button class="btn btn-small btn-outline" style="color:var(--danger)" onclick="_wsDeleteSlotRs()" title="Delete">
++                <button class="btn btn-small btn-outline" style="color:var(--danger-text, var(--danger))" onclick="_wsDeleteSlotRs()" title="Delete">
                      <i class="fa-solid fa-trash"></i>
                  </button>
              </div>
@@@ -2616,7 +2616,7 @@ function _wsRenderRestreamList(container) {
                      <button class="btn btn-small btn-outline" onclick="_wsEditRestreamDest(${d.id})" title="Edit">
                          <i class="fa-solid fa-pen"></i>
                      </button>
--                    <button class="btn btn-small btn-outline" style="color:var(--danger)" onclick="_wsDeleteRestreamDest(${d.id})" title="Delete">
++                    <button class="btn btn-small btn-outline" style="color:var(--danger-text, var(--danger))" onclick="_wsDeleteRestreamDest(${d.id})" title="Delete">
                          <i class="fa-solid fa-trash"></i>
                      </button>
                  </div>
@@@ -3101,7 +3101,7 @@ function _wsRenderRestreamConnect(platform) {
                  <i class="fa-solid fa-circle-check" style="color:#53fc18"></i>
                  <span style="flex:1"></span>
                  <button class="btn btn-small btn-outline" type="button" onclick="_wsConnectPlatform('${platform}')" title="Reconnect"><i class="fa-solid fa-rotate"></i></button>
--                <button class="btn btn-small btn-outline" type="button" style="color:var(--danger)" onclick="_wsDisconnectPlatform('${platform}')"><i class="fa-solid fa-link-slash"></i> Disconnect</button>
++                <button class="btn btn-small btn-outline" type="button" style="color:var(--danger-text, var(--danger))" onclick="_wsDisconnectPlatform('${platform}')"><i class="fa-solid fa-link-slash"></i> Disconnect</button>
              </div>
              <p class="muted" style="font-size:0.75rem;margin:6px 0 0">${providesKey
                  ? 'Your ingest URL &amp; stream key are filled in automatically — just save.'
ddiff --git a/public/js/chat.js b/public/js/chat.js
iindex 105d982c..c1f1db91 100644
---- a/public/js/chat.js
++++ b/public/js/chat.js
@@@ -5818,7 +5818,7 @@ async function adminToolsIpBanAll(ip, username) {
          // Refresh the admin tools panel if still open
          const body = document.querySelector('.admin-tools-body');
          if (body) {
--            body.innerHTML = '<div class="admin-tools-loading"><i class="fa-solid fa-check" style="color:var(--success)"></i> Ban applied. Close and reopen to refresh.</div>';
++            body.innerHTML = '<div class="admin-tools-loading"><i class="fa-solid fa-check" style="color:var(--success-text, var(--success))"></i> Ban applied. Close and reopen to refresh.</div>';
          }
      } catch (e) {
          toast(e.message || 'Ban failed', 'error');
ddiff --git a/public/js/dashboard.js b/public/js/dashboard.js
iindex eb3fafd7..e4267505 100644
---- a/public/js/dashboard.js
++++ b/public/js/dashboard.js
@@@ -1006,7 +1006,7 @@ async function loadDashTokens() {
              const created = t.created_at ? new Date(t.created_at).toLocaleDateString() : 'Unknown';
              const lastUsed = t.last_used_at ? new Date(t.last_used_at).toLocaleDateString() : 'Never';
              const expires = t.expires_at ? new Date(t.expires_at).toLocaleDateString() : 'Never';
--            const statusClass = t.is_active ? 'color:var(--success)' : 'color:var(--danger)';
++            const statusClass = t.is_active ? 'color:var(--success-text, var(--success))' : 'color:var(--danger-text, var(--danger))';
              const statusLabel = t.is_active ? 'Active' : 'Revoked';
              return `<div style="display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-secondary);border-radius:6px;border:1px solid var(--border)">
                  <div style="flex:1;min-width:0">
@@@ -1184,7 +1184,7 @@ async function loadDashChatLogs(page) {
              pagination.innerHTML = '';
          }
      } catch (e) {
--        results.innerHTML = `<p class="muted" style="color:var(--danger)">Failed to load chat logs: ${esc(e.message)}</p>`;
++        results.innerHTML = `<p class="muted" style="color:var(--danger-text, var(--danger))">Failed to load chat logs: ${esc(e.message)}</p>`;
      }
  }
  
ddiff --git a/public/js/pastes.js b/public/js/pastes.js
iindex 2a33498b..a86b203c 100644
---- a/public/js/pastes.js
++++ b/public/js/pastes.js
@@@ -238,7 +238,7 @@ async function loadPasteViewer(slug) {
          if (p.burned || (p.burn_after_read && p.views > 1)) {
              container.innerHTML = `
                  <div class="paste-burned">
--                    <i class="fa-solid fa-fire" style="font-size:3rem; color:var(--danger); margin-bottom:16px;"></i>
++                    <i class="fa-solid fa-fire" style="font-size:3rem; color:var(--danger-text, var(--danger)); margin-bottom:16px;"></i>
                      <h2>This paste has been burned</h2>
                      <p>It was set to self-destruct after being read.</p>
                      <button class="btn btn-primary" onclick="navigate('/pastes')">Back to Pastes</button>
@@@ -251,7 +251,7 @@ async function loadPasteViewer(slug) {
          if (p.is_nsfw && !nsfwDismissed) {
              container.innerHTML = `
                  <div class="paste-nsfw-gate">
--                    <i class="fa-solid fa-triangle-exclamation" style="font-size:3rem; color:var(--warning, #f39c12); margin-bottom:16px;"></i>
++                    <i class="fa-solid fa-triangle-exclamation" style="font-size:3rem; color:var(--warning-text, var(--warning, #f39c12)); margin-bottom:16px;"></i>
                      <h2>NSFW Content</h2>
                      <p>This paste has been marked as containing content that may not be suitable for all audiences.</p>
                      <div style="display:flex;gap:12px;margin-top:16px;">
@@@ -422,7 +422,7 @@ async function loadPasteViewer(slug) {
          const isMissing = /not found/i.test(err && err.message || '');
          container.innerHTML = `
              <div class="empty-state" style="text-align:center; padding:48px;">
--                <i class="fa-solid fa-circle-exclamation" style="font-size:2rem; color:var(--danger); margin-bottom:12px;"></i>
++                <i class="fa-solid fa-circle-exclamation" style="font-size:2rem; color:var(--danger-text, var(--danger)); margin-bottom:12px;"></i>
                  <h3>${isMissing ? 'Paste not found' : 'Couldn\u2019t display this paste'}</h3>
                  <p>${isMissing
                      ? 'It may have been deleted or the link is invalid.'
ddiff --git a/public/popout-chat.html b/public/popout-chat.html
iindex 7b77e59c..32015019 100644
---- a/public/popout-chat.html
++++ b/public/popout-chat.html
@@@ -91,7 +91,7 @@
          .pc-msg { padding: 2px 0; word-break: break-word; }
          .pc-msg.system { color: var(--text-muted, #888); font-style: italic; font-size: 0.75rem; }
          .pc-msg.deleted { opacity: 0.4; text-decoration: line-through; font-size: 0.75rem; }
--        .pc-msg.error { color: var(--danger, #e05555); font-size: 0.75rem; }
++        .pc-msg.error { color: var(--danger-text, var(--danger, #e05555)); font-size: 0.75rem; }
          .pc-user-name-tag { font-weight: 600; cursor: default; }
          .pc-time { font-size: 0.68rem; color: var(--text-muted, #888); margin-right: 3px; }
          .pc-stream-badge {
@@@ -99,7 +99,7 @@
              padding: 1px 4px; border-radius: 3px; margin-right: 4px;
          }
          .pc-badge-admin { font-size: 0.6rem; color: var(--accent, #8b5cf6); margin-right: 2px; }
--        .pc-badge-mod { font-size: 0.6rem; color: var(--success, #55e090); margin-right: 2px; }
++        .pc-badge-mod { font-size: 0.6rem; color: var(--success-text, var(--success, #55e090)); margin-right: 2px; }
          .pc-emote { height: 1.2em; vertical-align: middle; }
  
          /* ── Input ── */
ddiff --git a/public/privacy.html b/public/privacy.html
iindex 7690751e..efed9df9 100644
---- a/public/privacy.html
++++ b/public/privacy.html
@@@ -139,7 +139,7 @@
              flex-shrink: 0;
              line-height: 1.7;
          }
--        .rule-list li.no .rule-icon { color: var(--danger); }
++        .rule-list li.no .rule-icon { color: var(--danger-text, var(--danger)); }
          .rule-list li.yes .rule-icon { color: #2ecc71; }
          .rule-list li strong { color: var(--text); }
  
ddiff --git a/public/tos.html b/public/tos.html
iindex 5076c08f..474ae6cc 100644
---- a/public/tos.html
++++ b/public/tos.html
@@@ -139,7 +139,7 @@
              flex-shrink: 0;
              line-height: 1.7;
          }
--        .rule-list li.no .rule-icon { color: var(--danger); }
++        .rule-list li.no .rule-icon { color: var(--danger-text, var(--danger)); }
          .rule-list li.yes .rule-icon { color: #2ecc71; }
          .rule-list li strong { color: var(--text); }