/* =========================================
   QR BOX TOKENS
   ========================================= */



/* Brand accent stays #A50364 as core brand */
:root {
  --sticky-top: 56px;
  --gap-vert: 16px;
  --sb-thumb: rgba(0,0,0,.35);
  --sb-thumb-hover: rgba(0,0,0,.55);
  --sb-track: rgba(0,0,0,.08);

  --qrb-bg:#F6F7FB;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#F1F2F7;
  --qrb-border:#D9DCE6;
  --qrb-text:#101323;
  --qrb-text-2:#4A5060;
  --qrb-accent:#A50364;
  --qrb-accent-hover:#8D0356;
  --qrb-accent-soft:#cbc4ed;
  --qrb-accent-soft-border:#dbd4fd;
  --qrb-accent-soft-text:#000;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#315B9A;
  --qrb-ring:rgba(165,3,100,.28);
  
  /* Page Blocks / Sidebar - left side content */
  --page-block-header:#dcc;
  --page-block-header-text:#211;
  --page-block-background:#FFF;
  --page-block-text:#000;
  --page-block-background-alt:#F1F2F7;
  --page-block-text-alt:#110;
  --page-block-background-alt2:#dbd4fd;
  --page-block-text-alt2:#000;
  --page-block-border:#ccc;
  

  /* Logo tokens (estimated from supplied logo) */
  --logo-ribbon-start:#FF5A4E;  /* warm red */
  --logo-ribbon-mid:#C12C7D;    /* magenta */
  --logo-ribbon-end:#6B2E9B;    /* deep purple */
  --logo-box:#8B5CF6;           /* violet */
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  
   /* Page */
  --page-background: #fff;
  --page-text: #111;
  --page-text-light: #fff;
  
  /* Header */
  --header-background: #ebebeb;
  --header-background-image: none; /* Image not set for this theme */
  --header-bg-space:0px;

  --header-text: #000;
  --header-border: #a50364;
  
  /* Links */
  --link: #000;
  --link-hover: #a50364;
  --link-hover-text: #fff;
  --link-active: #000;
  --link-active-text: #a50364;
  --link-bg: #ebebeb;
  --link-bg-hover: #ddd;
  --link-bg-active: #a50364;
  
  /* Cards / Surfaces / Feed */
  --card-background: #efeaea;
  --card-border: #ddd;
  --card-text: #111;
  --card-shadow: rgba(0,0,0,.4);
  
  /* Buttons */
  --button-primary-background: #a50364;
  --button-primary-background-off: #f2f2f2;
  --button-primary-background-hover: #f00;
  --button-primary-text-hover: #222;
  --button-primary-text: #fff;
  --button-primary-text-off: #000;
  --button-primary-border: #903550;
  
  --button-secondary-background: #6c757d;
  --button-secondary-background-hover: #5a6268;
  --button-secondary-text: #fff;
  --button-secondary-border: #6c757d;
  
  --button-default-background: #ebebeb;
  --button-default-background-hover: #ddd;
  --button-default-text: #a50364;
  --button-default-border: #ddd;
  --button-default-text-hover:#a50364;
  
  --button-danger-background: #f00;
  --button-danger-background-hover: #d00;
  --button-danger-text: #fff;
  --button-danger-border: #ddd;
  
  --button-warning-background: #B76800;
  --button-warning-background-hover: #B76800;
  --button-warning-text: #fff;
  --button-warning-border: #B76800;
  
  --button-close-background: #222;
  --button-close-background-hover: #555;
  --button-close-text: #fff;
  --button-close-border: #ddd;
  
  /* Badges / counters */
  --badge-background: #fff;
  --badge-text: #666;
  --badge-border: #ddd;
  
  /* Sliders / Switches / modal */
  --slider-wrapper: rgba(250, 250, 250, 0.4);
  --slider-background: #eee;
  --slider-background-before: #f7f4ee;
  --slider-text: #333;
  --slider-box-shadow: rgba(255, 255, 255, 0.3);
  --slider-box-overlay: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.85) 100%);
  
  /* Inputs */
  --input-background: #0f0;
  --input-text: #000;
  --input-checked: #a50364;
  --input-checked-text: #fff;
  --input-unchecked: #222;
  --input-unchecked-text: #a50364;
  --input-box-shadow: rgba(92,184,92,.25);
  --input-border: #ddd;
  --input-placeholder: #fff;
  --input-focus-ring: rgb(90 163 255 / .5);
  
  /* Playlist (light theme) */
  --playlist-background: #ffffff;
  --playlist-title: #101323;
  --playlist-hover: #e5e0e0;
  --playlist-playing: #ede9e9;
  --playlist-border: #d9dce6;
  --playlist-text: #101323;
  --playlist-icon-inactive: #a503645e;
  --playlist-icon-active: #000;
  --player-background: #ddd;
  
  /* Player */
  --player-text: #222;
  --player-progress-bar-loading: #ccc;
  --player-buttons: #a50364;
  --player-buttons-text: #222;
  --player-open-buttons-text: #fff;
  --player-buttons-hover: #a50364;
  --player-border: #ddd;
  --player-buttons-hover:#a50364;          /* was invalid hex */
  --player-background:#ddd;                /* keep a single definition */
  --player-progress-bar:#a50364;           /* add back if your CSS uses it */
  
  /* Status */
  --success: #00ff00;
  --warning: #B76800;
  --danger: #f00;
  --info: #0000ff;
  --typing: #f00;
  --online: #36c90f;
  --offline: #acacac;
  --mail-unread-alert: #e12760;
  
  --gradient-1: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.05));
  
  /* Friends Bar */
  --friends-bar-bg:#edf2fa;
  --friends-bar-title-bg:#1b2130;
  --friends-bar-title-text:#e9ecf1;
  --friends-bar-item-bg:#f0f0f0;
  --friends-bar-item-text:#222;
  --friends-bar-item-subtext:#9aa3b2;
  --friends-bar-hover-bg:#222a3a;
  --friends-bar-border:#2a3244;
  --friends-bar-avatar-bg:#222a3a;
  --friends-bar-status-bg:#a50364;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#a50364;
  
  /* Feed and RHS */
  --social-rhs:#cbc4ed;
  --composer-button-background:#cbc4ed;
  --composer-button-text:#000;
  --editor-container: #a50364;
  --social-general-background:#00f;
  --social-general-text:#1e8ed0;
  --social-general-border:#dd0;
  --editor-header:#f6f6f6;
  --editor-text-area:#fff;
  --feed-wrapper-background:#fff;
  --feed-wrapper-border:#000;
  --feed-header-background:#f6f6f6;
  --feed-timestamp:#626569;
  --feed-active-like: #0a88bd;
  --feed-content-stat:#fff;
}



.qrb-theme[data-theme="grb"]{
	  --sticky-top: 56px;
  --gap-vert: 16px;
  --sb-thumb: rgba(0,0,0,.35);
  --sb-thumb-hover: rgba(0,0,0,.55);
  --sb-track: rgba(0,0,0,.08);
  

  --qrb-bg:#F6F7FB;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#F1F2F7;
  --qrb-border:#D9DCE6;
  --qrb-text:#101323;
  --qrb-text-2:#4A5060;
  --qrb-accent:#A50364;
  --qrb-accent-hover:#8D0356;
  --qrb-accent-soft:#cbc4ed;
  --qrb-accent-soft-border:#dbd4fd;
  --qrb-accent-soft-text:#000;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#315B9A;
  --qrb-ring:rgba(165,3,100,.28);
  
  /* Page Blocks / Sidebar - left side content */
  --page-block-header:#dcc;
  --page-block-header-text:#211;
  --page-block-background:#FFF;
  --page-block-text:#000;
  --page-block-background-alt:#F1F2F7;
  --page-block-text-alt:#110;
  --page-block-background-alt2:#dbd4fd;
  --page-block-text-alt2:#000;
  --page-block-border:#ccc;
  

  /* Logo tokens (estimated from supplied logo) */
  --logo-ribbon-start:#FF5A4E;  /* warm red */
  --logo-ribbon-mid:#C12C7D;    /* magenta */
  --logo-ribbon-end:#6B2E9B;    /* deep purple */
  --logo-box:#8B5CF6;           /* violet */
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  
   /* Page */
  --page-background: #fff;
  --page-text: #111;
  --page-text-light: #fff;
  
  /* Header */
  --header-background: #ebebeb;
  --header-background-image: none; /* Image not set for this theme */
  --header-bg-space:0px;

  --header-text: #000;
  --header-border: #a50364;
  
  /* Links */
  --link: #000;
  --link-hover: #a50364;
  --link-hover-text: #fff;
  --link-active: #000;
  --link-active-text: #a50364;
  --link-bg: #ebebeb;
  --link-bg-hover: #ddd;
  --link-bg-active: #a50364;
  
  /* Cards / Surfaces / Feed */
  --card-background: #efeaea;
  --card-border: #ddd;
  --card-text: #111;
  --card-shadow: rgba(0,0,0,.4);
  
  /* Buttons */
  --button-primary-background: #a50364;
  --button-primary-background-off: #f2f2f2;
  --button-primary-background-hover: #903550;
  --button-primary-text-hover: #222;
  --button-primary-text: #fff;
  --button-primary-text-off: #000;
  --button-primary-border: #903550;
  
  --button-secondary-background: #6c757d;
  --button-secondary-background-hover: #5a6268;
  --button-secondary-text: #fff;
  --button-secondary-border: #6c757d;
  
  --button-default-background: #ebebeb;
  --button-default-background-hover: #ddd;
  --button-default-text: #a50364;
  --button-default-border: #ddd;
  --button-default-text-hover:#a50364;
  
  --button-danger-background: #f00;
  --button-danger-background-hover: #d00;
  --button-danger-text: #fff;
  --button-danger-border: #ddd;
  
  --button-warning-background: #B76800;
  --button-warning-background-hover: #B76800;
  --button-warning-text: #fff;
  --button-warning-border: #B76800;
  
  --button-close-background: #222;
  --button-close-background-hover: #555;
  --button-close-text: #fff;
  --button-close-border: #ddd;
  
  /* Badges / counters */
  --badge-background: #fff;
  --badge-text: #666;
  --badge-border: #ddd;
  
  /* Sliders / Switches / modal */
  --slider-wrapper: rgba(250, 250, 250, 0.4);
  --slider-background: #eee;
  --slider-background-before: #f7f4ee;
  --slider-text: #333;
  --slider-box-shadow: rgba(255, 255, 255, 0.3);
  --slider-box-overlay: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.85) 100%);
  
  /* Inputs */
  --input-background: #0f0;
  --input-text: #000;
  --input-checked: #a50364;
  --input-checked-text: #fff;
  --input-unchecked: #222;
  --input-unchecked-text: #a50364;
  --input-box-shadow: rgba(92,184,92,.25);
  --input-border: #ddd;
  --input-placeholder: #fff;
  --input-focus-ring: rgb(90 163 255 / .5);
  
  /* Playlist (light theme) */
  --playlist-background: #ffffff;
  --playlist-title: #101323;
  --playlist-hover: #e5e0e0;
  --playlist-playing: #ede9e9;
  --playlist-border: #d9dce6;
  --playlist-text: #101323;
  --playlist-icon-inactive: #a503645e;
  --playlist-icon-active: #000;
  --player-background: #ddd;
  
  /* Player */
  --player-text: #222;
  --player-progress-bar-loading: #ccc;
  --player-buttons: #a50364;
  --player-buttons-text: #222;
  --player-open-buttons-text: #fff;
  --player-buttons-hover: #a50364;
  --player-border: #ddd;
  --player-buttons-hover:#a50364;          /* was invalid hex */
  --player-background:#ddd;                /* keep a single definition */
  --player-progress-bar:#a50364;           /* add back if your CSS uses it */
  
  /* Status */
  --success: #00ff00;
  --warning: #B76800;
  --danger: #f00;
  --info: #0000ff;
  --typing: #f00;
  --online: #36c90f;
  --offline: #acacac;
  --mail-unread-alert: #e12760;
  
  --gradient-1: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.05));
  
  /* Friends Bar */
  --friends-bar-bg:#edf2fa;
  --friends-bar-title-bg:#1b2130;
  --friends-bar-title-text:#e9ecf1;
  --friends-bar-item-bg:#f0f0f0;
  --friends-bar-item-text:#222;
  --friends-bar-item-subtext:#9aa3b2;
  --friends-bar-hover-bg:#222a3a;
  --friends-bar-border:#2a3244;
  --friends-bar-avatar-bg:#222a3a;
  --friends-bar-status-bg:#a50364;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#a50364;
  
  /* Feed and RHS */
  --social-rhs:#cbc4ed;
  --composer-button-background:#cbc4ed;
  --composer-button-text:#000;
  --editor-container: #a50364;
  --social-general-background:#00f;
  --social-general-text:#1e8ed0;
  --social-general-border:#dd0;
  --editor-header:#f6f6f6;
  --editor-text-area:#fff;
  --feed-wrapper-background:#fff;
  --feed-wrapper-border:#000;
  --feed-header-background:#f6f6f6;
  --feed-timestamp:#626569;
  --feed-active-like: #0a88bd;
  --feed-content-stat:#fff;
}

/* QR Box – Dark tokens */
.qrb-theme[data-theme="qrb_dark"]{
  --sticky-top: 56px;
  --gap-vert: 16px;
  --sb-thumb: rgba(255,255,255,.35);
  --sb-thumb-hover: rgba(255,255,255,.55);
  --sb-track: rgba(255,255,255,.08);

  /* Core palette */
  --qrb-bg:#0f1117;
  --qrb-surface:#151923;
  --qrb-surface-alt:#1b2130;
  --qrb-border:#2a3244;
  --qrb-text:#e9ecf1;
  --qrb-text-2:#b8bfcc;
  --qrb-accent:#A50364;
  --qrb-accent-hover:#8D0356;
  --qrb-accent-soft:rgba(165,3,100,.18);
  --qrb-accent-soft-border:rgba(165,3,100,.35);
  --qrb-accent-soft-text:#ffffff;
  --qrb-success:#23a26b;
  --qrb-warning:#d08719;
  --qrb-danger:#d23a45;
  --qrb-info:#5aa2ff;
  --qrb-ring:rgba(165,3,100,.32);

  /* Page Blocks / Sidebar */
  --page-block-header:#1a1e2a;
  --page-block-header-text:#e9ecf1;
  --page-block-background:#161b26;
  --page-block-text:#e9ecf1;
  --page-block-background-alt:#1b2130;
  --page-block-text-alt:#c7cdd9;
  --page-block-background-alt2:rgba(165,3,100,.12);
  --page-block-text-alt2:#ffffff;
  --page-block-border:#2a3244;

  /* Logo tokens (unchanged hues, work on dark) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#0e1117;
  --page-text:#e9ecf1;
  --page-text-light:#b8bfcc;

  /* Header */
  --header-background:#121622;
  --header-background-image:none;
  --header-bg-space:0px;
  --header-text:#e9ecf1;
  --header-border:#a50364;

  /* Links */
  --link:#e9ecf1;
  --link-hover:#a50364;
  --link-hover-text:#ffffff;
  --link-active:#ffffff;
  --link-active-text:#a50364;
  --link-bg:#1b2130;
  --link-bg-hover:#222a3a;
  --link-bg-active:#a50364;

  /* Cards / Surfaces / Feed */
  --card-background:#161b26;
  --card-border:#2a3244;
  --card-text:#e9ecf1;
  --card-shadow:rgba(0,0,0,.7);

  /* Buttons */
  --button-primary-background:#a50364;
  --button-primary-background-off:#262b36;
  --button-primary-background-hover:#8d0356;
  --button-primary-text:#ffffff;
  --button-primary-text-off:#d6d9e0;
  --button-primary-text-hover:#ffffff;
  --button-primary-border:#a50364;

  --button-secondary-background:#444c56;
  --button-secondary-background-hover:#3a4150;
  --button-secondary-text:#e9ecf1;
  --button-secondary-border:#444c56;

  --button-default-background:#262b36;
  --button-default-background-hover:#2d3442;
  --button-default-text:#a50364;
  --button-default-border:#2a3244;
  --button-default-text-hover:#a50364;

  --button-danger-background:#cc2b2b;
  --button-danger-background-hover:#b82323;
  --button-danger-text:#ffffff;
  --button-danger-border:#2a3244;

  --button-warning-background:#d08719;
  --button-warning-background-hover:#b87514;
  --button-warning-text:#111319;
  --button-warning-border:#3a2c12;

  --button-close-background:#0f1117;
  --button-close-background-hover:#1a2030;
  --button-close-text:#e9ecf1;
  --button-close-border:#2a3244;

  /* Badges / counters */
  --badge-background:#1b2130;
  --badge-text:#cbd5e1;
  --badge-border:#2a3244;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(10,12,18,.6);
  --slider-background:#222838;
  --slider-background-before:#1b2130;
  --slider-text:#d1d5db;
  --slider-box-shadow:rgba(0,0,0,.35);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.85) 100%);

  /* Inputs */
  --input-background:#121824;
  --input-text:#e9ecf1;
  --input-checked:#a50364;
  --input-checked-text:#ffffff;
  --input-unchecked:#2a3244;
  --input-unchecked-text:#b8bfcc;
  --input-box-shadow:rgba(165,3,100,.25);
  --input-border:#2a3244;
  --input-placeholder:#6b7280;
  --input-focus-ring:rgb(165 3 100 / .45);

  /* Playlist (dark) */
  --playlist-background:#151923;
  --playlist-title:#e9ecf1;
  --playlist-hover:#1c2332;
  --playlist-playing:#20283a;
  --playlist-border:#2a3244;
  --playlist-text:#e9ecf1;
  --playlist-icon-inactive:rgba(165,3,100,.45);
  --playlist-icon-active:#ffffff;
  --player-background:#121824;

  /* Player */
  --player-text:#e9ecf1;
  --player-progress-bar-loading:#394258;
  --player-buttons:#a50364;
  --player-buttons-text:#e9ecf1;
  --player-open-buttons-text:#ffffff;
  --player-buttons-hover:#a50364;
  --player-border:#2a3244;
  --player-progress-bar:#a50364;

  /* Status */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#38bdf8;
  --typing:#ef4444;
  --online:#22c55e;
  --offline:#6b7280;
  --mail-unread-alert:#e12760;

  --gradient-1:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.1));

  /* Friends Bar */
  --friends-bar-bg:#0f1117;
  --friends-bar-title-bg:#1b2130;
  --friends-bar-title-text:#e9ecf1;
  --friends-bar-item-bg:#1a2030;
  --friends-bar-item-text:#e9ecf1;
  --friends-bar-item-subtext:#9aa3b2;
  --friends-bar-hover-bg:#222a3a;
  --friends-bar-border:#2a3244;
  --friends-bar-avatar-bg:#222a3a;
  --friends-bar-status-bg:#a50364;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#a50364;

  /* Feed and RHS */
  --social-rhs:rgba(165,3,100,.12);
  --composer-button-background:rgba(165,3,100,.18);
  --composer-button-text:#ffffff;
  --editor-container:#a50364;
  --social-general-background:#0f1117;
  --social-general-text:#e9ecf1;
  --social-general-border:#2a3244;
  --editor-header:#151923;
  --editor-text-area:#0f1117;
  --feed-wrapper-background:#151923;
  --feed-wrapper-border:#2a3244;
  --feed-header-background:#1b2130;
  --feed-timestamp:#9aa3b2;
  --feed-active-like:#46a6d1;
  --feed-content-stat:#0f1117;
}


/* QR Box – High Contrast tokens */
.qrb-theme[data-theme="qrb_high_contrast"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(255,255,255,.7);
  --sb-thumb-hover:#fff;
  --sb-track:rgba(255,255,255,.2);

  /* Core palette (HC) */
  --qrb-bg:#000;
  --qrb-surface:#000;
  --qrb-surface-alt:#111;
  --qrb-border:#fff;
  --qrb-text:#fff;
  --qrb-text-2:#e6e6e6;
  --qrb-accent:#A50364;                  /* brand */
  --qrb-accent-hover:#ff007a;            /* punchy hover */
  --qrb-accent-soft:#000;                /* avoid muted tones in HC */
  --qrb-accent-soft-border:#fff;
  --qrb-accent-soft-text:#fff;
  --qrb-success:#00ff5a;
  --qrb-warning:#ffbf00;
  --qrb-danger:#ff2a2a;
  --qrb-info:#29a8ff;
  --qrb-ring:#ffff00;                    /* strong focus */

  /* Page Blocks / Sidebar */
  --page-block-header:#000;
  --page-block-header-text:#fff;
  --page-block-background:#000;
  --page-block-text:#fff;
  --page-block-background-alt:#111;
  --page-block-text-alt:#fff;
  --page-block-background-alt2:#000;
  --page-block-text-alt2:#fff;
  --page-block-border:#fff;

  /* Logo tokens (unchanged hues) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#000;
  --page-text:#fff;
  --page-text-light:#fff;

  /* Header */
  --header-background:#000;
  --header-background-image:none;
  --header-bg-space:0px;
  --header-text:#fff;
  --header-border:#fff;

  /* Links */
  --link:#fff;
  --link-hover:#A50364;
  --link-hover-text:#fff;
  --link-active:#ffff00;
  --link-active-text:#000;
  --link-bg:#000;
  --link-bg-hover:#111;
  --link-bg-active:#ffff00;

  /* Cards / Surfaces / Feed */
  --card-background:#000;
  --card-border:#fff;
  --card-text:#fff;
  --card-shadow:rgba(255,255,255,.2);

  /* Buttons */
  --button-primary-background:#A50364;
  --button-primary-background-off:#000;
  --button-primary-background-hover:#ff007a;
  --button-primary-text:#fff;
  --button-primary-text-off:#fff;
  --button-primary-text-hover:#fff;
  --button-primary-border:#fff;

  --button-secondary-background:#000;
  --button-secondary-background-hover:#111;
  --button-secondary-text:#fff;
  --button-secondary-border:#fff;

  --button-default-background:#000;
  --button-default-background-hover:#111;
  --button-default-text:#ffff00;
  --button-default-border:#fff;
  --button-default-text-hover:#a50364;

  --button-danger-background:#ff2a2a;
  --button-danger-background-hover:#ff0000;
  --button-danger-text:#000;
  --button-danger-border:#fff;

  --button-warning-background:#ffbf00;
  --button-warning-background-hover:#ffcc33;
  --button-warning-text:#000;
  --button-warning-border:#fff;

  --button-close-background:#000;
  --button-close-background-hover:#111;
  --button-close-text:#fff;
  --button-close-border:#fff;

  /* Badges / counters */
  --badge-background:#000;
  --badge-text:#ffff00;
  --badge-border:#fff;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(255,255,255,.06);
  --slider-background:#111;
  --slider-background-before:#000;
  --slider-text:#fff;
  --slider-box-shadow:rgba(255,255,255,.25);
  --slider-box-overlay:linear-gradient(180deg,rgba(255,255,0,.0) 0%,rgba(255,255,0,.35) 60%,rgba(255,255,0,.6) 100%);

  /* Inputs */
  --input-background:#000;
  --input-text:#fff;
  --input-checked:#A50364;
  --input-checked-text:#fff;
  --input-unchecked:#000;
  --input-unchecked-text:#fff;
  --input-box-shadow:rgba(255,255,0,.6);
  --input-border:#fff;
  --input-placeholder:#e6e6e6;
  --input-focus-ring:#ffff00;

  /* Playlist */
  --playlist-background:#000;
  --playlist-title:#fff;
  --playlist-hover:#111;
  --playlist-playing:#111;
  --playlist-border:#fff;
  --playlist-text:#fff;
  --playlist-icon-inactive:#ffff00;
  --playlist-icon-active:#fff;
  --player-background:#000;

  /* Player */
  --player-text:#fff;
  --player-progress-bar-loading:#fff;
  --player-buttons:#A50364;
  --player-buttons-text:#fff;
  --player-open-buttons-text:#000;
  --player-buttons-hover:#ff007a;
  --player-border:#fff;
  --player-progress-bar:#ffff00;

  /* Status */
  --success:#00ff5a;
  --warning:#ffbf00;
  --danger:#ff2a2a;
  --info:#29a8ff;
  --typing:#ff2a2a;
  --online:#00ff5a;
  --offline:#aaa;
  --mail-unread-alert:#ffff00;

  --gradient-1:linear-gradient(to top, #000, #000); /* avoid low-contrast fades */

  /* Friends Bar */
  --friends-bar-bg:#000;
  --friends-bar-title-bg:#000;
  --friends-bar-title-text:#fff;
  --friends-bar-item-bg:#000;
  --friends-bar-item-text:#fff;
  --friends-bar-item-subtext:#ffff00;
  --friends-bar-hover-bg:#111;
  --friends-bar-border:#fff;
  --friends-bar-avatar-bg:#000;
  --friends-bar-status-bg:#ffff00;
  --friends-bar-status-text:#000;
  --friends-bar-accent:#A50364;

  /* Feed and RHS */
  --social-rhs:#000;
  --composer-button-background:#000;
  --composer-button-text:#ffff00;
  --editor-container:#A50364;
  --social-general-background:#000;
  --social-general-text:#fff;
  --social-general-border:#fff;
  --editor-header:#000;
  --editor-text-area:#000;
  --feed-wrapper-background:#000;
  --feed-wrapper-border:#fff;
  --feed-header-background:#000;
  --feed-timestamp:#ffff00;
  --feed-active-like:#29a8ff;
  --feed-content-stat:#000;
}

/* QR Box – Violet tokens (lush purple light theme) */
.qrb-theme[data-theme="violet"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#F6F3FF;                 /* page background */
  --qrb-surface:#FFFFFF;            /* cards/surfaces */
  --qrb-surface-alt:#F0E9FF;        /* subtle violet wash */
  --qrb-border:#D9D1F5;             /* soft lilac border */
  --qrb-text:#111323;               /* primary text */
  --qrb-text-2:#4A4F66;             /* secondary text */
  --qrb-accent:#8B5CF6;             /* violet accent */
  --qrb-accent-hover:#6D46D9;       /* darker hover */
  --qrb-accent-soft:#E9E3FF;        /* tinted fill */
  --qrb-accent-soft-border:#D6CCFF; /* tinted border */
  --qrb-accent-soft-text:#1a1333;   /* readable on soft fills */
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#4256D0;               /* cool indigo info */
  --qrb-ring:rgba(139,92,246,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#EDE7FF;
  --page-block-header-text:#1a1333;
  --page-block-background:#FFFFFF;
  --page-block-text:#111323;
  --page-block-background-alt:#F6F0FF;
  --page-block-text-alt:#2d244a;
  --page-block-background-alt2:#E9E3FF;
  --page-block-text-alt2:#1a1333;
  --page-block-border:#D9D1F5;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#F6F3FF;
  --page-text:#111323;
  --page-text-light:#4A4F66;

  /* Header */
  --header-background:#ECE4FF;
  --header-background-image:none;
  --header-bg-space:0px;
  --header-text:#1a1333;
  --header-border:#8B5CF6;

  /* Links */
  --link:#6D46D9;
  --link-hover:#8B5CF6;
  --link-hover-text:#ffffff;
  --link-active:#1a1333;
  --link-active-text:#8B5CF6;
  --link-bg:#EEE7FF;
  --link-bg-hover:#E2DAFF;
  --link-bg-active:#8B5CF6;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#D9D1F5;
  --card-text:#111323;
  --card-shadow:rgba(109,70,217,.18);

  /* Buttons */
  --button-primary-background:#8B5CF6;
  --button-primary-background-off:#F1ECFF;
  --button-primary-background-hover:#6D46D9;
  --button-primary-text:#ffffff;
  --button-primary-text-off:#2d244a;
  --button-primary-text-hover:#ffffff;
  --button-primary-border:#6D46D9;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#EEE7FF;
  --button-default-background-hover:#E2DAFF;
  --button-default-text:#6D46D9;
  --button-default-border:#D9D1F5;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#F0E9FF;
  --button-close-background-hover:#E2DAFF;
  --button-close-text:#1a1333;
  --button-close-border:#D9D1F5;

  /* Badges / counters */
  --badge-background:#EDE7FF;
  --badge-text:#2d244a;
  --badge-border:#D9D1F5;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(245,240,255,.6);
  --slider-background:#EDE7FF;
  --slider-background-before:#F7F3FF;
  --slider-text:#2d244a;
  --slider-box-shadow:rgba(109,70,217,.25);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(109,70,217,.18) 60%,rgba(109,70,217,.32) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#111323;
  --input-checked:#8B5CF6;
  --input-checked-text:#ffffff;
  --input-unchecked:#E2DAFF;
  --input-unchecked-text:#6D46D9;
  --input-box-shadow:rgba(139,92,246,.25);
  --input-border:#D9D1F5;
  --input-placeholder:#7b719b;
  --input-focus-ring:rgb(139 92 246 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#1a1333;
  --playlist-hover:#F4EFFF;
  --playlist-playing:#EEE7FF;
  --playlist-border:#D9D1F5;
  --playlist-text:#1a1333;
  --playlist-icon-inactive:rgba(139,92,246,.55);
  --playlist-icon-active:#2d244a;
  --player-background:#EDE7FF;

  /* Player */
  --player-text:#1a1333;
  --player-progress-bar-loading:#D9D1F5;
  --player-buttons:#8B5CF6;
  --player-buttons-text:#1a1333;
  --player-open-buttons-text:#ffffff;
  --player-buttons-hover:#6D46D9;
  --player-border:#D9D1F5;
  --player-progress-bar:#8B5CF6;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#4256D0;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#8B5CF6;

  --gradient-1:linear-gradient(180deg,#F6F3FF 0%,#ECE4FF 100%);

  /* Friends Bar */
  --friends-bar-bg:#F6F3FF;
  --friends-bar-title-bg:#EEE7FF;
  --friends-bar-title-text:#1a1333;
  --friends-bar-item-bg:#eee8ff;
  --friends-bar-item-text:#111323;
  --friends-bar-item-subtext:#6A6490;
  --friends-bar-hover-bg:#F4EFFF;
  --friends-bar-border:#6A6490;
  --friends-bar-avatar-bg:#EDE7FF;
  --friends-bar-status-bg:#8B5CF6;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#8B5CF6;

  /* Feed and RHS */
  --social-rhs:#E9E3FF;
  --composer-button-background:#E9E3FF;
  --composer-button-text:#2d244a;
  --editor-container:#8B5CF6;
  --social-general-background:#FFFFFF;
  --social-general-text:#111323;
  --social-general-border:#D9D1F5;
  --editor-header:#F3EEFF;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#D9D1F5;
  --feed-header-background:#F3EEFF;
  --feed-timestamp:#6A6490;
  --feed-active-like:#5F9AD6;
  --feed-content-stat:#FFFFFF;
}


/* QR Box – Indigo tokens (clean indigo light theme) */
.qrb-theme[data-theme="indigo"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#F5F7FF;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#ECF0FF;
  --qrb-border:#D7DEF8;
  --qrb-text:#0F1226;
  --qrb-text-2:#424966;
  --qrb-accent:#4256D0;             /* indigo accent */
  --qrb-accent-hover:#3345B3;       /* darker hover */
  --qrb-accent-soft:#E6EAFF;        /* tinted fill */
  --qrb-accent-soft-border:#D1D8FF; /* tinted border */
  --qrb-accent-soft-text:#0f1226;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#4256D0;
  --qrb-ring:rgba(66,86,208,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#EDEFFF;
  --page-block-header-text:#0f1226;
  --page-block-background:#FFFFFF;
  --page-block-text:#0f1226;
  --page-block-background-alt:#F3F6FF;
  --page-block-text-alt:#1a2244;
  --page-block-background-alt2:#E6EAFF;
  --page-block-text-alt2:#0f1226;
  --page-block-border:#D7DEF8;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#F5F7FF;
  --page-text:#0F1226;
  --page-text-light:#424966;

  /* Header */
  --header-background:#E9EEFF;
  --header-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 120" preserveAspectRatio="none"><defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="%23F6F7FF"/><stop offset=".6" stop-color="%23FBFCFF"/><stop offset="1" stop-color="%23FFFFFF"/></linearGradient><linearGradient id="fade" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="%23FFFFFF" stop-opacity="0"/><stop offset="1" stop-color="%23FFFFFF" stop-opacity="1"/></linearGradient></defs><rect width="390" height="120" fill="url(%23bg)"/><!-- cube symbol: top, left, right + highlight and shadow --><g id="c"><ellipse cx="18" cy="28" rx="18" ry="6" fill="%23222" opacity=".08"/><polygon points="0,0 18,-10 36,0 18,10" fill="%23B9BDFE"/><polygon points="0,0 18,10 18,26 0,16" fill="%234F46E5"/><polygon points="36,0 18,10 18,26 36,16" fill="%233E36C7"/><polyline points="0,0 18,-10 36,0" fill="none" stroke="%23FFFFFF" stroke-opacity=".28" stroke-width="1"/></g><!-- grid of cubes (left-heavy) --><g transform="translate(8,42)"><use href="%23c"/><g transform="translate(38,-14)"><use href="%23c"/></g><g transform="translate(38,14)"><use href="%23c"/></g><g transform="translate(76,0)"><use href="%23c"/></g><g transform="translate(114,-14)"><use href="%23c"/></g><g transform="translate(114,14)"><use href="%23c"/></g><g transform="translate(152,0)"><use href="%23c"/></g><g transform="translate(190,-14)"><use href="%23c"/></g></g><g transform="translate(26,74)" opacity=".95"><use href="%23c"/><g transform="translate(38,-14)"><use href="%23c"/></g><g transform="translate(38,14)"><use href="%23c"/></g><g transform="translate(76,0)"><use href="%23c"/></g><g transform="translate(114,-14)"><use href="%23c"/></g><g transform="translate(114,14)"><use href="%23c"/></g><g transform="translate(152,0)"><use href="%23c"/></g></g><!-- gentle RHS dip highlight + fade to white --><path d="M150,0 L390,0 L390,120 C330,104 250,98 170,112 Z" fill="%23FFFFFF" opacity=".12"/><rect x="240" y="0" width="150" height="120" fill="url(%23fade)"/></svg>');
 
  --header-bg-space:0px;
  --header-text:#10163a;
  --header-border:#4256D0;

  /* Links */
  --link:#3345B3;
  --link-hover:#4256D0;
  --link-hover-text:#ffffff;
  --link-active:#10163a;
  --link-active-text:#4256D0;
  --link-bg:#E8EDFF;
  --link-bg-hover:#DDE5FF;
  --link-bg-active:#4256D0;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#D7DEF8;
  --card-text:#0F1226;
  --card-shadow:rgba(51,69,179,.18);

  /* Buttons */
  --button-primary-background:#4256D0;
  --button-primary-background-off:#EEF2FF;
  --button-primary-background-hover:#3345B3;
  --button-primary-text:#ffffff;
  --button-primary-text-off:#1a2244;
  --button-primary-text-hover:#ffffff;
  --button-primary-border:#3345B3;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#E8EDFF;
  --button-default-background-hover:#DDE5FF;
  --button-default-text:#3345B3;
  --button-default-border:#D7DEF8;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#ECF0FF;
  --button-close-background-hover:#DDE5FF;
  --button-close-text:#10163a;
  --button-close-border:#D7DEF8;

  /* Badges / counters */
  --badge-background:#EDEFFF;
  --badge-text:#1a2244;
  --badge-border:#D7DEF8;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(237,240,255,.6);
  --slider-background:#EDEFFF;
  --slider-background-before:#F6F8FF;
  --slider-text:#1a2244;
  --slider-box-shadow:rgba(66,86,208,.25);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(66,86,208,.18) 60%,rgba(66,86,208,.32) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#0F1226;
  --input-checked:#4256D0;
  --input-checked-text:#ffffff;
  --input-unchecked:#DDE5FF;
  --input-unchecked-text:#3345B3;
  --input-box-shadow:rgba(66,86,208,.25);
  --input-border:#D7DEF8;
  --input-placeholder:#6d7699;
  --input-focus-ring:rgb(66 86 208 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#10163a;
  --playlist-hover:#EEF2FF;
  --playlist-playing:#E8EDFF;
  --playlist-border:#D7DEF8;
  --playlist-text:#10163a;
  --playlist-icon-inactive:rgba(66,86,208,.55);
  --playlist-icon-active:#1a2244;
  --player-background:#EDEFFF;

  /* Player */
  --player-text:#10163a;
  --player-progress-bar-loading:#D7DEF8;
  --player-buttons:#4256D0;
  --player-buttons-text:#10163a;
  --player-open-buttons-text:#ffffff;
  --player-buttons-hover:#3345B3;
  --player-border:#D7DEF8;
  --player-progress-bar:#4256D0;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#4256D0;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#4256D0;

  --gradient-1:linear-gradient(180deg,#F1F4FF 0%,#E9EEFF 100%);

  /* Friends Bar */
  --friends-bar-bg:#F5F7FF;
  --friends-bar-title-bg:#E8EDFF;
  --friends-bar-title-text:#10163a;
  --friends-bar-item-bg:#FFFFFF;
  --friends-bar-item-text:#0F1226;
  --friends-bar-item-subtext:#5a6388;
  --friends-bar-hover-bg:#EEF2FF;
  --friends-bar-border:#D7DEF8;
  --friends-bar-avatar-bg:#EDEFFF;
  --friends-bar-status-bg:#4256D0;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#4256D0;

  /* Feed and RHS */
  --social-rhs:#E6EAFF;
  --composer-button-background:#E6EAFF;
  --composer-button-text:#1a2244;
  --editor-container:#4256D0;
  --social-general-background:#FFFFFF;
  --social-general-text:#0F1226;
  --social-general-border:#D7DEF8;
  --editor-header:#F1F4FF;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#D7DEF8;
  --feed-header-background:#F1F4FF;
  --feed-timestamp:#5a6388;
  --feed-active-like:#3A97D6;
  --feed-content-stat:#FFFFFF;
}


/* QR Box – Blue tokens (crisp blue light theme) */
.qrb-theme[data-theme="blue"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#F2F7FF;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#EAF2FF;
  --qrb-border:#D6E2F5;
  --qrb-text:#0E1420;
  --qrb-text-2:#445068;
  --qrb-accent:#1F6FEB;             /* blue accent */
  --qrb-accent-hover:#165BD1;       /* darker hover */
  --qrb-accent-soft:#E6F0FF;        /* tinted fill */
  --qrb-accent-soft-border:#D2E2FF; /* tinted border */
  --qrb-accent-soft-text:#0e1420;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#1F6FEB;
  --qrb-ring:rgba(31,111,235,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#EDF4FF;
  --page-block-header-text:#0e1420;
  --page-block-background:#FFFFFF;
  --page-block-text:#0e1420;
  --page-block-background-alt:#F4F8FF;
  --page-block-text-alt:#17233a;
  --page-block-background-alt2:#E6F0FF;
  --page-block-text-alt2:#0e1420;
  --page-block-border:#D6E2F5;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#F2F7FF;
  --page-text:#0E1420;
  --page-text-light:#445068;

  /* Header */
  --header-background:#d6e1FF;
  --header-background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 120" preserveAspectRatio="none"><defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="%231F6FEB"/><stop offset="1" stop-color="%23CBE7FF"/></linearGradient><linearGradient id="sh" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23FFFFFF" stop-opacity=".22"/><stop offset="1" stop-color="%23FFFFFF" stop-opacity="0"/></linearGradient></defs><rect width="390" height="120" fill="url(%23bg)"/><g opacity=".95"><polygon fill="%232C7BEA" points="0,0 120,0 70,44 0,28"/><polygon fill="%233F8EF4" points="0,28 70,44 58,86 0,76"/><polygon fill="%235AA2F6" points="70,44 150,18 168,52 108,72"/><polygon fill="%237CB9FA" points="108,72 168,52 210,78 146,104"/><polygon fill="%239FD0FE" points="150,18 230,8 268,36 168,52"/><polygon fill="%23B9DDFC" points="210,78 268,36 318,66 254,104"/><polygon fill="%23D1E9FF" points="268,36 330,18 390,46 318,66"/><polygon fill="%23E8F4FF" points="318,66 390,46 390,120 254,104"/></g><path d="M180,0 L390,0 L390,120 C330,102 250,96 190,110 Z" fill="url(%23sh)"/></svg>');
  --header-bg-space:0px;
  --header-text:#10203a;
  --header-border:#1F6FEB;

  /* Links */
  --link:#165BD1;
  --link-hover:#1F6FEB;
  --link-hover-text:#ffffff;
  --link-active:#10203a;
  --link-active-text:#1F6FEB;
  --link-bg:#E4EFFF;
  --link-bg-hover:#D9E7FF;
  --link-bg-active:#1F6FEB;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#D6E2F5;
  --card-text:#0E1420;
  --card-shadow:rgba(22,91,209,.18);

  /* Buttons */
  --button-primary-background:#1F6FEB;
  --button-primary-background-off:#EAF2FF;
  --button-primary-background-hover:#165BD1;
  --button-primary-text:#ffffff;
  --button-primary-text-off:#17233a;
  --button-primary-text-hover:#ffffff;
  --button-primary-border:#165BD1;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#E4EFFF;
  --button-default-background-hover:#D9E7FF;
  --button-default-text:#165BD1;
  --button-default-border:#D6E2F5;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#EAF2FF;
  --button-close-background-hover:#D9E7FF;
  --button-close-text:#10203a;
  --button-close-border:#D6E2F5;

  /* Badges / counters */
  --badge-background:#EDF4FF;
  --badge-text:#17233a;
  --badge-border:#D6E2F5;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(232,242,255,.6);
  --slider-background:#EDF4FF;
  --slider-background-before:#F6FAFF;
  --slider-text:#17233a;
  --slider-box-shadow:rgba(31,111,235,.25);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(31,111,235,.16) 60%,rgba(31,111,235,.28) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#0E1420;
  --input-checked:#1F6FEB;
  --input-checked-text:#ffffff;
  --input-unchecked:#D9E7FF;
  --input-unchecked-text:#165BD1;
  --input-box-shadow:rgba(31,111,235,.25);
  --input-border:#D6E2F5;
  --input-placeholder:#6a7594;
  --input-focus-ring:rgb(31 111 235 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#10203a;
  --playlist-hover:#EEF6FF;
  --playlist-playing:#E4EFFF;
  --playlist-border:#D6E2F5;
  --playlist-text:#10203a;
  --playlist-icon-inactive:rgba(31,111,235,.55);
  --playlist-icon-active:#17233a;
  --player-background:#EDF4FF;

  /* Player */
  --player-text:#fff;
  --player-progress-bar-loading:#D6E2F5;
  --player-buttons:#092c63;
  --player-buttons-text:#10203a;
  --player-open-buttons-text:#ffffff;
  --player-buttons-hover:#165BD1;
  --player-border:#D6E2F5;
  --player-progress-bar:#092c63;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#1F6FEB;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#1F6FEB;

  --gradient-1:linear-gradient(180deg,#EEF6FF 0%,#E6F1FF 100%);

  /* Friends Bar */
  --friends-bar-bg:#F2F7FF;
  --friends-bar-title-bg:#E4EFFF;
  --friends-bar-title-text:#10203a;
  --friends-bar-item-bg:#FFFFFF;
  --friends-bar-item-text:#0E1420;
  --friends-bar-item-subtext:#566584;
  --friends-bar-hover-bg:#EEF6FF;
  --friends-bar-border:#D6E2F5;
  --friends-bar-avatar-bg:#EDF4FF;
  --friends-bar-status-bg:#1F6FEB;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#1F6FEB;

  /* Feed and RHS */
  --social-rhs:#E6F0FF;
  --composer-button-background:#E6F0FF;
  --composer-button-text:#17233a;
  --editor-container:#1F6FEB;
  --social-general-background:#FFFFFF;
  --social-general-text:#0E1420;
  --social-general-border:#D6E2F5;
  --editor-header:#EEF6FF;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#D6E2F5;
  --feed-header-background:#EEF6FF;
  --feed-timestamp:#566584;
  --feed-active-like:#3AA2E6;
  --feed-content-stat:#FFFFFF;
}


/* QR Box – Green tokens (fresh green light theme) */
.qrb-theme[data-theme="green"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#F3FBF6;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#E8F6EE;
  --qrb-border:#D3E7DA;
  --qrb-text:#0E1612;
  --qrb-text-2:#3E574C;
  --qrb-accent:#16A34A;             /* green accent */
  --qrb-accent-hover:#12833C;       /* darker hover */
  --qrb-accent-soft:#E6F6EC;        /* tinted fill */
  --qrb-accent-soft-border:#CFECDD; /* tinted border */
  --qrb-accent-soft-text:#0e1612;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#2B6CB0;               /* calm blue for info */
  --qrb-ring:rgba(22,163,74,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#EAF7F0;
  --page-block-header-text:#0e1612;
  --page-block-background:#FFFFFF;
  --page-block-text:#0e1612;
  --page-block-background-alt:#F1FBF6;
  --page-block-text-alt:#183826;
  --page-block-background-alt2:#E6F6EC;
  --page-block-text-alt2:#0e1612;
  --page-block-border:#D3E7DA;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#F3FBF6;
  --page-text:#0E1612;
  --page-text-light:#3E574C;

  /* Header */
  --header-background:#c6FfcE;
  --header-background-image:none;
  --header-bg-space:0px;
  --header-text:#113424;
  --header-border:#16A34A;

  /* Links */
  --link:#12833C;
  --link-hover:#16A34A;
  --link-hover-text:#ffffff;
  --link-active:#113424;
  --link-active-text:#16A34A;
  --link-bg:#E4F5EA;
  --link-bg-hover:#D8EFDF;
  --link-bg-active:#16A34A;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#D3E7DA;
  --card-text:#0E1612;
  --card-shadow:rgba(18,131,60,.16);

  /* Buttons */
  --button-primary-background:#16A34A;
  --button-primary-background-off:#EAF7F0;
  --button-primary-background-hover:#12833C;
  --button-primary-text:#ffffff;
  --button-primary-text-off:#183826;
  --button-primary-text-hover:#ffffff;
  --button-primary-border:#12833C;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#E4F5EA;
  --button-default-background-hover:#D8EFDF;
  --button-default-text:#12833C;
  --button-default-border:#D3E7DA;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#E8F6EE;
  --button-close-background-hover:#D8EFDF;
  --button-close-text:#113424;
  --button-close-border:#D3E7DA;

  /* Badges / counters */
  --badge-background:#EAF7F0;
  --badge-text:#1b3c2a;
  --badge-border:#D3E7DA;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(234,247,240,.6);
  --slider-background:#EAF7F0;
  --slider-background-before:#F4FBF7;
  --slider-text:#1b3c2a;
  --slider-box-shadow:rgba(22,163,74,.22);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(22,163,74,.14) 60%,rgba(22,163,74,.26) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#0E1612;
  --input-checked:#16A34A;
  --input-checked-text:#ffffff;
  --input-unchecked:#D8EFDF;
  --input-unchecked-text:#12833C;
  --input-box-shadow:rgba(22,163,74,.25);
  --input-border:#D3E7DA;
  --input-placeholder:#6a7d73;
  --input-focus-ring:rgb(22 163 74 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#113424;
  --playlist-hover:#EEF9F3;
  --playlist-playing:#E4F5EA;
  --playlist-border:#D3E7DA;
  --playlist-text:#113424;
  --playlist-icon-inactive:rgba(22,163,74,.55);
  --playlist-icon-active:#183826;
  --player-background:#EAF7F0;

  /* Player */
  --player-text:#113424;
  --player-progress-bar-loading:#D3E7DA;
  --player-buttons:#16A34A;
  --player-buttons-text:#113424;
  --player-open-buttons-text:#ffffff;
  --player-buttons-hover:#12833C;
  --player-border:#D3E7DA;
  --player-progress-bar:#16A34A;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#2B6CB0;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#16A34A;

  --gradient-1:linear-gradient(180deg,#EEF9F3 0%,#E6F6EE 100%);

  /* Friends Bar */
  --friends-bar-bg:#F3FBF6;
  --friends-bar-title-bg:#E4F5EA;
  --friends-bar-title-text:#113424;
  --friends-bar-item-bg:#FFFFFF;
  --friends-bar-item-text:#0E1612;
  --friends-bar-item-subtext:#4b6a5b;
  --friends-bar-hover-bg:#EEF9F3;
  --friends-bar-border:#D3E7DA;
  --friends-bar-avatar-bg:#EAF7F0;
  --friends-bar-status-bg:#16A34A;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#16A34A;

  /* Feed and RHS */
  --social-rhs:#E6F6EC;
  --composer-button-background:#E6F6EC;
  --composer-button-text:#1b3c2a;
  --editor-container:#16A34A;
  --social-general-background:#FFFFFF;
  --social-general-text:#0E1612;
  --social-general-border:#D3E7DA;
  --editor-header:#EEF9F3;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#D3E7DA;
  --feed-header-background:#EEF9F3;
  --feed-timestamp:#4b6a5b;
  --feed-active-like:#4BB67A;
  --feed-content-stat:#FFFFFF;
}

/* QR Box – Yellow tokens (warm yellow light theme) */
.qrb-theme[data-theme="yellow"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#FFF9E8;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#FFF3CC;
  --qrb-border:#E9DEB5;
  --qrb-text:#161305;
  --qrb-text-2:#5C5433;
  --qrb-accent:#E6B800;             /* yellow accent */
  --qrb-accent-hover:#C99E00;       /* darker hover */
  --qrb-accent-soft:#FFF2BF;        /* tinted fill */
  --qrb-accent-soft-border:#F2E4A3; /* tinted border */
  --qrb-accent-soft-text:#2a2200;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#2B6CB0;
  --qrb-ring:rgba(230,184,0,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#FFF1B8;
  --page-block-header-text:#2a2200;
  --page-block-background:#FFFFFF;
  --page-block-text:#161305;
  --page-block-background-alt:#FFF6D6;
  --page-block-text-alt:#3b320a;
  --page-block-background-alt2:#FFF2BF;
  --page-block-text-alt2:#2a2200;
  --page-block-border:#E9DEB5;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#FFF9E8;
  --page-text:#161305;
  --page-text-light:#5C5433;

  /* Header */
  --header-background:#FFF0BA;
  --header-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 120" preserveAspectRatio="none"><defs><linearGradient id="fade" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="%23ffffff" stop-opacity="0"/><stop offset="1" stop-color="%23ffffff" stop-opacity="1"/></linearGradient></defs><rect width="390" height="120" fill="%23ffffff"/><g opacity=".98"><polygon fill="%23FFD400" points="0,0 44,0 22,38"/><polygon fill="%23FFC400" points="44,0 66,38 22,38"/><polygon fill="%23FFE066" points="22,38 66,38 44,76"/><polygon fill="%23FFEB99" points="0,76 22,38 44,76"/><polygon fill="%23FFD400" points="44,76 88,76 66,38"/><polygon fill="%23FFC400" points="88,76 110,38 66,38"/><polygon fill="%23FFE066" points="66,38 110,38 88,0"/><polygon fill="%23FFEB99" points="110,38 154,38 132,0"/><polygon fill="%23FFD400" points="88,0 132,0 110,38"/><polygon fill="%23FFDD33" points="44,0 88,0 66,38"/><polygon fill="%23FFE97F" points="0,0 22,38 0,76"/><polygon fill="%23FFE066" points="132,0 176,0 154,38"/><polygon fill="%23FFC400" points="154,38 198,38 176,0"/><polygon fill="%23FFEB99" points="132,76 154,38 110,38"/><polygon fill="%23FFE97F" points="154,38 198,76 110,76"/><polygon fill="%23FFDD33" points="198,38 242,38 220,0"/><polygon fill="%23FFE97F" points="176,0 220,0 198,38"/><polygon fill="%23FFE066" points="198,76 242,76 220,38"/><polygon fill="%23FFEB99" points="154,76 198,76 176,114"/><polygon fill="%23FFD400" points="110,76 154,76 132,114"/><polygon fill="%23FFC400" points="66,76 110,76 88,114"/></g><rect x="170" y="0" width="220" height="120" fill="url(%23fade)"/></svg>');
  
  --header-bg-space:0px;
  --header-text:#2a2200;
  --header-border:#E6B800;

  /* Links */
  --link:#A67C00;
  --link-hover:#E6B800;
  --link-hover-text:#1b1600;
  --link-active:#2a2200;
  --link-active-text:#E6B800;
  --link-bg:#FFF0BA;
  --link-bg-hover:#FFE899;
  --link-bg-active:#E6B800;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#E9DEB5;
  --card-text:#161305;
  --card-shadow:rgba(166,124,0,.16);

  /* Buttons */
  --button-primary-background:#E6B800;
  --button-primary-background-off:#FFF2BF;
  --button-primary-background-hover:#C99E00;
  --button-primary-text:#1b1600;
  --button-primary-text-off:#2a2200;
  --button-primary-text-hover:#1b1600;
  --button-primary-border:#C99E00;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#FFF0BA;
  --button-default-background-hover:#FFE899;
  --button-default-text:#A67C00;
  --button-default-border:#E9DEB5;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#FFF3CC;
  --button-close-background-hover:#FFE899;
  --button-close-text:#2a2200;
  --button-close-border:#E9DEB5;

  /* Badges / counters */
  --badge-background:#FFF1B8;
  --badge-text:#3b320a;
  --badge-border:#E9DEB5;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(255,243,204,.6);
  --slider-background:#FFF1B8;
  --slider-background-before:#FFF6D6;
  --slider-text:#3b320a;
  --slider-box-shadow:rgba(230,184,0,.22);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(230,184,0,.14) 60%,rgba(230,184,0,.26) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#161305;
  --input-checked:#E6B800;
  --input-checked-text:#1b1600;
  --input-unchecked:#FFE899;
  --input-unchecked-text:#A67C00;
  --input-box-shadow:rgba(230,184,0,.25);
  --input-border:#E9DEB5;
  --input-placeholder:#7a6f3f;
  --input-focus-ring:rgb(230 184 0 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#2a2200;
  --playlist-hover:#FFF6D6;
  --playlist-playing:#FFF0BA;
  --playlist-border:#E9DEB5;
  --playlist-text:#2a2200;
  --playlist-icon-inactive:rgba(230,184,0,.55);
  --playlist-icon-active:#3b320a;
  --player-background:#FFF1B8;

  /* Player */
  --player-text:#2a2200;
  --player-progress-bar-loading:#E9DEB5;
  --player-buttons:#E6B800;
  --player-buttons-text:#2a2200;
  --player-open-buttons-text:#1b1600;
  --player-buttons-hover:#C99E00;
  --player-border:#E9DEB5;
  --player-progress-bar:#E6B800;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#2B6CB0;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#E6B800;

  --gradient-1:linear-gradient(180deg,#FFF6D6 0%,#FFF0BA 100%);

  /* Friends Bar */
  --friends-bar-bg:#FFF9E8;
  --friends-bar-title-bg:#FFF0BA;
  --friends-bar-title-text:#2a2200;
  --friends-bar-item-bg:#fff2bf;
  --friends-bar-item-text:#161305;
  --friends-bar-item-subtext:#6b6032;
  --friends-bar-hover-bg:#FFF6D6;
  --friends-bar-border:#E9DEB5;
  --friends-bar-avatar-bg:#FFF1B8;
  --friends-bar-status-bg:#E6B800;
  --friends-bar-status-text:#1b1600;
  --friends-bar-accent:#E6B800;

  /* Feed and RHS */
  --social-rhs:#FFF2BF;
  --composer-button-background:#FFF2BF;
  --composer-button-text:#3b320a;
  --editor-container:#E6B800;
  --social-general-background:#FFFFFF;
  --social-general-text:#161305;
  --social-general-border:#E9DEB5;
  --editor-header:#FFF6D6;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#E9DEB5;
  --feed-header-background:#FFF6D6;
  --feed-timestamp:#6b6032;
  --feed-active-like:#5DA8D6;
  --feed-content-stat:#FFFFFF;
}

/* QR Box – Orange tokens (bright orange light theme) */
.qrb-theme[data-theme="orange"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#FFF4EC;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#FFE9D9;
  --qrb-border:#F1D7C6;
  --qrb-text:#1A130E;
  --qrb-text-2:#54453A;
  --qrb-accent:#F97316;             /* orange accent */
  --qrb-accent-hover:#DB650F;       /* darker hover */
  --qrb-accent-soft:#FFE3D1;        /* tinted fill */
  --qrb-accent-soft-border:#FFD2B8; /* tinted border */
  --qrb-accent-soft-text:#20150e;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#2B6CB0;
  --qrb-ring:rgba(249,115,22,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#FFE2CC;
  --page-block-header-text:#20150e;
  --page-block-background:#FFFFFF;
  --page-block-text:#1A130E;
  --page-block-background-alt:#FFF0E4;
  --page-block-text-alt:#301f14;
  --page-block-background-alt2:#FFE3D1;
  --page-block-text-alt2:#20150e;
  --page-block-border:#F1D7C6;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#FFF4EC;
  --page-text:#1A130E;
  --page-text-light:#54453A;

  /* Header */
  --header-background:#FFE5D2;
  --header-background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 120" preserveAspectRatio="none"><rect width="390" height="120" fill="%23FFFFFF"/><path d="M0,0 H390 V24 C340,28 310,28 262,22 C214,16 160,18 106,20 C70,22 36,16 0,12 Z" fill="%23DB650F" opacity=".9"/><path d="M0,28 C60,22 130,28 182,40 C238,54 278,72 330,78 C360,82 378,82 390,80 L390,120 H0 Z" fill="%23FFE6D3"/><path d="M0,44 C58,36 132,44 190,56 C246,68 290,84 336,86 C362,88 380,86 390,84 L390,120 H0 Z" fill="%23DB650F" opacity=".85"/><path d="M0,64 C56,56 138,64 202,74 C262,84 300,98 334,100 C356,102 372,100 390,96 L390,120 H0 Z" fill="%23F97316"/><path d="M226,30 C258,20 302,18 338,24 C360,28 374,34 390,42 V120 H160 C164,92 180,74 206,62 C214,58 220,54 226,50 C236,44 236,36 226,30 Z" fill="%23FFFFFF"/><path d="M0,58 C58,50 138,58 202,70 C266,82 304,92 352,94 L352,98 C304,96 262,86 200,74 C138,62 60,56 0,66 Z" fill="%23FFFFFF" opacity=".14"/></svg>');
  
  --header-bg-space:0px;
  --header-text:#2b1a10;
  --header-border:#F97316;

  /* Links */
  --link:#C2560C;
  --link-hover:#F97316;
  --link-hover-text:#ffffff;
  --link-active:#2b1a10;
  --link-active-text:#F97316;
  --link-bg:#FFE1CC;
  --link-bg-hover:#FFD6BA;
  --link-bg-active:#F97316;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#F1D7C6;
  --card-text:#1A130E;
  --card-shadow:rgba(219,101,15,.16);

  /* Buttons */
  --button-primary-background:#F97316;
  --button-primary-background-off:#FFE6D3;
  --button-primary-background-hover:#DB650F;
  --button-primary-text:#fff;
  --button-primary-text-off:#2b1a10;
  --button-primary-text-hover:#2b1a10;
  --button-primary-border:#DB650F;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#FFE1CC;
  --button-default-background-hover:#FFD6BA;
  --button-default-text:#C2560C;
  --button-default-border:#F1D7C6;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#FFE9D9;
  --button-close-background-hover:#FFD6BA;
  --button-close-text:#2b1a10;
  --button-close-border:#F1D7C6;

  /* Badges / counters */
  --badge-background:#FFE2CC;
  --badge-text:#3a2619;
  --badge-border:#F1D7C6;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(255,233,217,.6);
  --slider-background:#FFE2CC;
  --slider-background-before:#FFF1E5;
  --slider-text:#3a2619;
  --slider-box-shadow:rgba(249,115,22,.22);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(249,115,22,.14) 60%,rgba(249,115,22,.26) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#1A130E;
  --input-checked:#F97316;
  --input-checked-text:#2b1a10;
  --input-unchecked:#FFD6BA;
  --input-unchecked-text:#C2560C;
  --input-box-shadow:rgba(249,115,22,.25);
  --input-border:#F1D7C6;
  --input-placeholder:#7a614f;
  --input-focus-ring:rgb(249 115 22 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#2b1a10;
  --playlist-hover:#FFF0E4;
  --playlist-playing:#FFE1CC;
  --playlist-border:#F1D7C6;
  --playlist-text:#2b1a10;
  --playlist-icon-inactive:rgba(249,115,22,.55);
  --playlist-icon-active:#3a2619;
  --player-background:#FFE2CC;

  /* Player */
  --player-text:#2b1a10;
  --player-progress-bar-loading:#F1D7C6;
  --player-buttons:#F97316;
  --player-buttons-text:#2b1a10;
  --player-open-buttons-text:#1f140d;
  --player-buttons-hover:#DB650F;
  --player-border:#F1D7C6;
  --player-progress-bar:#F97316;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#2B6CB0;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#F97316;

  --gradient-1:linear-gradient(180deg,#FFF0E4 0%,#FFE5D2 100%);

  /* Friends Bar */
  --friends-bar-bg:#FFF4EC;
  --friends-bar-title-bg:#FFE1CC;
  --friends-bar-title-text:#2b1a10;
  --friends-bar-item-bg:#ffe5d2;
  --friends-bar-item-text:#1A130E;
  --friends-bar-item-subtext:#5d4639;
  --friends-bar-hover-bg:#FFF0E4;
  --friends-bar-border:#5d4639;
  --friends-bar-avatar-bg:#FFE2CC;
  --friends-bar-status-bg:#F97316;
  --friends-bar-status-text:#1f140d;
  --friends-bar-accent:#F97316;

  /* Feed and RHS */
  --social-rhs:#FFE3D1;
  --composer-button-background:#FFE3D1;
  --composer-button-text:#3a2619;
  --editor-container:#F97316;
  --social-general-background:#FFFFFF;
  --social-general-text:#1A130E;
  --social-general-border:#F1D7C6;
  --editor-header:#FFF0E4;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#F1D7C6;
  --feed-header-background:#FFF0E4;
  --feed-timestamp:#5d4639;
  --feed-active-like:#5DA8D6;
  --feed-content-stat:#FFFFFF;
}

/* QR Box – Red tokens (bold red light theme) */
.qrb-theme[data-theme="red"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette */
  --qrb-bg:#FFF4F4;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#FFE3E3;
  --qrb-border:#F1D0D0;
  --qrb-text:#1A0E0E;
  --qrb-text-2:#5B3F3F;
  --qrb-accent:#E23B3B;             /* red accent */
  --qrb-accent-hover:#C72F2F;       /* darker hover */
  --qrb-accent-soft:#FFE0E0;        /* tinted fill */
  --qrb-accent-soft-border:#F8CACA; /* tinted border */
  --qrb-accent-soft-text:#2a1313;
  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#2B6CB0;
  --qrb-ring:rgba(226,59,59,.35);

  /* Page Blocks / Sidebar */
  --page-block-header:#FFD7D7;
  --page-block-header-text:#2a1313;
  --page-block-background:#FFFFFF;
  --page-block-text:#1A0E0E;
  --page-block-background-alt:#FFECEC;
  --page-block-text-alt:#361818;
  --page-block-background-alt2:#FFE0E0;
  --page-block-text-alt2:#2a1313;
  --page-block-border:#F1D0D0;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#FFF4F4;
  --page-text:#1A0E0E;
  --page-text-light:#5B3F3F;

  /* Header */
  --header-background:#FFDCDC;
  --header-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 120" preserveAspectRatio="none"><defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="%23E40303"/><stop offset="1" stop-color="%23FFE9E9"/></linearGradient><linearGradient id="shine" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23FFFFFF" stop-opacity=".22"/><stop offset="1" stop-color="%23FFFFFF" stop-opacity="0"/></linearGradient></defs><rect width="390" height="120" fill="url(%23bg)"/><g opacity=".96"><polygon fill="%23B90E0E" points="0,0 118,0 72,42 0,28"/><polygon fill="%23D63030" points="0,28 72,42 58,86 0,78"/><polygon fill="%23F25B5B" points="72,42 152,16 170,52 108,72"/><polygon fill="%23FF8A80" points="108,72 170,52 212,80 148,106"/><polygon fill="%23FFC1B8" points="152,16 234,10 270,36 170,52"/><polygon fill="%23FFD2CC" points="212,80 270,36 320,66 256,106"/><polygon fill="%23FFE1DD" points="270,36 332,18 390,46 320,66"/><polygon fill="%23FFF0EE" points="320,66 390,46 390,120 256,106"/></g><path d="M182,0 L390,0 L390,120 C332,102 252,96 192,110 Z" fill="url(%23shine)"/></svg>');
  
  --header-bg-space:0px;
  --header-text:#2a1313;
  --header-border:#E23B3B;

  /* Links */
  --link:#B32F2F;
  --link-hover:#E23B3B;
  --link-hover-text:#ffffff;
  --link-active:#2a1313;
  --link-active-text:#E23B3B;
  --link-bg:#FFD7D7;
  --link-bg-hover:#FFC7C7;
  --link-bg-active:#E23B3B;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#F1D0D0;
  --card-text:#1A0E0E;
  --card-shadow:rgba(194,47,47,.16);

  /* Buttons */
  --button-primary-background:#E23B3B;
  --button-primary-background-off:#FFE0E0;
  --button-primary-background-hover:#C72F2F;
  --button-primary-text:#fff;
  --button-primary-text-off:#2a1313;
  --button-primary-text-hover:#2a1313;
  --button-primary-border:#C72F2F;

  --button-secondary-background:#6c757d;
  --button-secondary-background-hover:#5a6268;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#6c757d;

  --button-default-background:#FFD7D7;
  --button-default-background-hover:#FFC7C7;
  --button-default-text:#B32F2F;
  --button-default-border:#F1D0D0;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E23B3B;
  --button-danger-background-hover:#C72F2F;
  --button-danger-text:#2a1313;
  --button-danger-border:#F1D0D0;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#FFE3E3;
  --button-close-background-hover:#FFC7C7;
  --button-close-text:#2a1313;
  --button-close-border:#F1D0D0;

  /* Badges / counters */
  --badge-background:#FFD7D7;
  --badge-text:#3b1919;
  --badge-border:#F1D0D0;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(255,231,231,.6);
  --slider-background:#FFD7D7;
  --slider-background-before:#FFECEC;
  --slider-text:#3b1919;
  --slider-box-shadow:rgba(226,59,59,.22);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(226,59,59,.14) 60%,rgba(226,59,59,.26) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#1A0E0E;
  --input-checked:#E23B3B;
  --input-checked-text:#2a1313;
  --input-unchecked:#FFC7C7;
  --input-unchecked-text:#B32F2F;
  --input-box-shadow:rgba(226,59,59,.25);
  --input-border:#F1D0D0;
  --input-placeholder:#7a5a5a;
  --input-focus-ring:rgb(226 59 59 / .45);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#2a1313;
  --playlist-hover:#FFECEC;
  --playlist-playing:#FFD7D7;
  --playlist-border:#F1D0D0;
  --playlist-text:#2a1313;
  --playlist-icon-inactive:rgba(226,59,59,.55);
  --playlist-icon-active:#3b1919;
  --player-background:#FFD7D7;

  /* Player */
  --player-text:#fff;
  --player-progress-bar-loading:#F1D0D0;
  --player-buttons:#891616;
  --player-buttons-text:#2a1313;
  --player-open-buttons-text:#1d0f0f;
  --player-buttons-hover:#C72F2F;
  --player-border:#F1D0D0;
  --player-progress-bar:#861e1e;

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#2B6CB0;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#E12760;

  --gradient-1:linear-gradient(180deg,#FFECEC 0%,#FFDCDC 100%);

  /* Friends Bar */
  --friends-bar-bg:#FFF4F4;
  --friends-bar-title-bg:#FFD7D7;
  --friends-bar-title-text:#2a1313;
  --friends-bar-item-bg:#ffdbdb;
  --friends-bar-item-text:#1A0E0E;
  --friends-bar-item-subtext:#6d4a4a;
  --friends-bar-hover-bg:#FFECEC;
  --friends-bar-border:#6d4a4a;
  --friends-bar-avatar-bg:#FFD7D7;
  --friends-bar-status-bg:#E23B3B;
  --friends-bar-status-text:#1d0f0f;
  --friends-bar-accent:#E23B3B;

  /* Feed and RHS */
  --social-rhs:#FFE0E0;
  --composer-button-background:#FFE0E0;
  --composer-button-text:#3b1919;
  --editor-container:#E23B3B;
  --social-general-background:#FFFFFF;
  --social-general-text:#1A0E0E;
  --social-general-border:#F1D0D0;
  --editor-header:#FFECEC;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#F1D0D0;
  --feed-header-background:#FFECEC;
  --feed-timestamp:#6d4a4a;
  --feed-active-like:#5DA8D6;
  --feed-content-stat:#FFFFFF;
}

/* QR Box – LGBTQ Rainbow tokens (bright light theme) */
.qrb-theme[data-theme="lgbtq_rainbow"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Core palette (bright) */
  --qrb-bg:#FFFDF6;
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#FFF6F0;
  --qrb-border:#E6E2DA;
  --qrb-text:#141214;
  --qrb-text-2:#524b52;

  /* Keep brand accent but lean into rainbow elsewhere */
  --qrb-accent:#A50364;
  --qrb-accent-hover:#8D0356;
  --qrb-accent-soft:#FFE3F2;
  --qrb-accent-soft-border:#FFC7E6;
  --qrb-accent-soft-text:#28121f;

  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#2B6CB0;
  --qrb-ring:rgba(255,196,0,.45);

  /* Rainbow primitives (use as needed in components) */
  --rainbow-red:#FF3B30;
  --rainbow-orange:#FF8A00;
  --rainbow-yellow:#FFD400;
  --rainbow-green:#34C759;
  --rainbow-blue:#1F6FEB;
  --rainbow-indigo:#4256D0;
  --rainbow-violet:#A64DFF;

  --gradient-rainbow:linear-gradient(90deg,
    var(--rainbow-red) 0%,
    var(--rainbow-orange) 16.6%,
    var(--rainbow-yellow) 33.3%,
    var(--rainbow-green) 50%,
    var(--rainbow-blue) 66.6%,
    var(--rainbow-indigo) 83.3%,
    var(--rainbow-violet) 100%
  );

  /* Page Blocks / Sidebar */
  --page-block-header:#FFF3E8;
  --page-block-header-text:#201c20;
  --page-block-background:#FFFFFF;
  --page-block-text:#141214;
  --page-block-background-alt:#FFF7EF;
  --page-block-text-alt:#2d262f;
  --page-block-background-alt2:#FFF0FB;
  --page-block-text-alt2:#28121f;
  --page-block-border:#E6E2DA;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#FFFDF6;
  --page-text:#141214;
  --page-text-light:#524b52;

  /* Header */
  --header-background:var(--gradient-rainbow);
  --header-background:#fff;
  --header-background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23E40303"/><rect y="133.333" width="1200" height="133.333" fill="%23FF8C00"/><rect y="266.666" width="1200" height="133.333" fill="%23FFED00"/><rect y="400" width="1200" height="133.333" fill="%23008026"/><rect y="533.333" width="1200" height="133.333" fill="%23004DFF"/><rect y="666.666" width="1200" height="133.333" fill="%23750787"/><polygon points="0,0 266.666,400 0,800" fill="%23000000"/><polygon points="0,0 213.333,400 0,800" fill="%23784F17"/><polygon points="0,0 160,400 0,800" fill="%235BCFFB"/><polygon points="0,0 120,400 0,800" fill="%23F5A9B8"/><polygon points="0,0 80,400 0,800" fill="%23FFFFFF"/></svg>');
  --header-bg-space:50px;
  --header-text:#111;
  --header-border:#FFD400;

  /* Links */
  --link:#1F6FEB;
  --link-hover:#A50364;
  --link-hover-text:#ffffff;
  --link-active:#141214;
  --link-active-text:#1F6FEB;
  --link-bg:#F0F6FF;
  --link-bg-hover:#E6EEFF;
  --link-bg-active:#FFD400;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#E6E2DA;
  --card-text:#141214;
  --card-shadow:rgba(0,0,0,.12);

  /* Buttons */
  --button-primary-background:#A50364;           /* brand key */
  --button-primary-background-off:#FFE3F2;
  --button-primary-background-hover:#8D0356;
  --button-primary-text:#ffffff;
  --button-primary-text-off:#2a1421;
  --button-primary-text-hover:#ffffff;
  --button-primary-border:#8D0356;

  --button-secondary-background:#1F6FEB;        /* blue */
  --button-secondary-background-hover:#165BD1;
  --button-secondary-text:#ffffff;
  --button-secondary-border:#165BD1;

  --button-default-background:#FFF0E1;          /* soft orange tint */
  --button-default-background-hover:#FFE5CC;
  --button-default-text:#C2560C;
  --button-default-border:#E6E2DA;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E23B3B;           /* red */
  --button-danger-background-hover:#C72F2F;
  --button-danger-text:#ffffff;
  --button-danger-border:#F1D0D0;

  --button-warning-background:#FFD400;          /* yellow */
  --button-warning-background-hover:#F3C400;
  --button-warning-text:#2a2200;
  --button-warning-border:#E9DEB5;

  --button-close-background:#F7F7F7;
  --button-close-background-hover:#EEE;
  --button-close-text:#222;
  --button-close-border:#DDD;

  /* Badges / counters */
  --badge-background:#FFFFFF;
  --badge-text:#141214;
  --badge-border:#E6E2DA;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(255,255,255,.7);
  --slider-background:#F2F2F2;
  --slider-background-before:#FFFFFF;
  --slider-text:#222;
  --slider-box-shadow:rgba(0,0,0,.15);
  --slider-box-overlay:var(--gradient-rainbow);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#141214;
  --input-checked:#1F6FEB;          /* clear affordance */
  --input-checked-text:#ffffff;
  --input-unchecked:#E6E2DA;
  --input-unchecked-text:#524b52;
  --input-box-shadow:rgba(31,111,235,.25);
  --input-border:#DCD7CF;
  --input-placeholder:#7a757a;
  --input-focus-ring:rgb(255 212 0 / .55);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#1a171a;
  --playlist-hover:#FFF7EF;
  --playlist-playing:#F0F6FF;
  --playlist-border:#E6E2DA;
  --playlist-text:#1a171a;
  --playlist-icon-inactive:rgba(31,111,235,.55);
  --playlist-icon-active:#1a171a;
  --player-background:#FFF3E8;

  /* Player */
  --player-text:#141214;
  --player-progress-bar-loading:#E6E2DA;
  --player-buttons:#A50364;
  --player-buttons-text:#141214;
  --player-open-buttons-text:#ffffff;
  --player-buttons-hover:#8D0356;
  --player-border:#E6E2DA;
  --player-progress-bar:#FFD400;    /* rainbow pop on progress */

  /* Status */
  --success:#34C759;
  --warning:#FFD400;
  --danger:#FF3B30;
  --info:#1F6FEB;
  --typing:#FF3B30;
  --online:#34C759;
  --offline:#9aa3b2;
  --mail-unread-alert:#A50364;

  --gradient-1:var(--gradient-rainbow);

  /* Friends Bar */
  --friends-bar-bg:#FFFDF6;
  --friends-bar-title-bg:#FFFFFF;
  --friends-bar-title-text:#141214;
  --friends-bar-item-bg:#FFFFFF;
  --friends-bar-item-text:#141214;
  --friends-bar-item-subtext:#5a545a;
  --friends-bar-hover-bg:#FFF7EF;
  --friends-bar-border:#E6E2DA;
  --friends-bar-avatar-bg:#FFF0FB;
  --friends-bar-status-bg:#1F6FEB;
  --friends-bar-status-text:#ffffff;
  --friends-bar-accent:#A50364;

  /* Feed and RHS */
  --social-rhs:#FFF0FB;
  --composer-button-background:#FFF0FB;
  --composer-button-text:#28121f;
  --editor-container:#A50364;
  --social-general-background:#FFFFFF;
  --social-general-text:#141214;
  --social-general-border:#E6E2DA;
  --editor-header:#FFF6F0;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#E6E2DA;
  --feed-header-background:#FFF6F0;
  --feed-timestamp:#6a636a;
  --feed-active-like:#1F6FEB;
  --feed-content-stat:#FFFFFF;
}


/* QR Box – LGBTQ Trans tokens (light theme with trans flag colours) */
.qrb-theme[data-theme="lgbtq_trans"]{
  --sticky-top:56px;
  --gap-vert:16px;
  --sb-thumb:rgba(0,0,0,.35);
  --sb-thumb-hover:rgba(0,0,0,.55);
  --sb-track:rgba(0,0,0,.08);

  /* Trans flag palette */
  --trans-blue:#5BCEFA;    /* light blue */
  --trans-pink:#F5A9B8;    /* light pink */
  --trans-white:#FFFFFF;
  --trans-blue-d:#3BB3E3;  /* darker blue for hover/borders */
  --trans-pink-d:#DD8AA0;  /* darker pink for hover/borders */

  --gradient-trans:linear-gradient(180deg,
    var(--trans-blue) 0%,
    var(--trans-blue) 20%,
    var(--trans-pink) 20%,
    var(--trans-pink) 40%,
    var(--trans-white) 40%,
    var(--trans-white) 60%,
    var(--trans-pink) 60%,
    var(--trans-pink) 80%,
    var(--trans-blue) 80%,
    var(--trans-blue) 100%
  );

  /* Core palette */
  --qrb-bg:#FCFEFF;                 /* very light blue-white */
  --qrb-surface:#FFFFFF;
  --qrb-surface-alt:#F7FBFF;        /* faint blue tint */
  --qrb-border:#D7E8F4;             /* soft cool border */
  --qrb-text:#0F1420;               /* near-black */
  --qrb-text-2:#4A5568;             /* secondary text */

  /* Accent takes trans blue; keep brand available in components if needed */
  --qrb-accent:var(--trans-blue);
  --qrb-accent-hover:var(--trans-blue-d);
  --qrb-accent-soft:#E9F7FF;
  --qrb-accent-soft-border:#D3EEFE;
  --qrb-accent-soft-text:#0f1420;

  --qrb-success:#1A7F5A;
  --qrb-warning:#B76800;
  --qrb-danger:#B2232E;
  --qrb-info:#3BB3E3;
  --qrb-ring:rgba(91,206,250,.36);

  /* Page Blocks / Sidebar */
  --page-block-header:#FFEFF3;      /* pink wash */
  --page-block-header-text:#2a1a20;
  --page-block-background:#FFFFFF;
  --page-block-text:#0F1420;
  --page-block-background-alt:#F0FAFF; /* blue wash */
  --page-block-text-alt:#152236;
  --page-block-background-alt2:#FFF7FA;/* pinker wash */
  --page-block-text-alt2:#2a1a20;
  --page-block-border:#D7E8F4;

  /* Logo tokens (unchanged) */
  --logo-ribbon-start:#FF5A4E;
  --logo-ribbon-mid:#C12C7D;
  --logo-ribbon-end:#6B2E9B;
  --logo-box:#8B5CF6;
  --logo-text:#FFFFFF;
  --logo-qr:#000000;

  /* Page */
  --page-background:#FCFEFF;
  --page-text:#0F1420;
  --page-text-light:#4A5568;

    /* Header */
  --header-background:var(--gradient-trans);
  --header-background:#fff;
  --header-background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1200 800"><rect width="1200" height="160" fill="%235BCFFB"/><rect y="160" width="1200" height="160" fill="%23F5A9B8"/><rect y="320" width="1200" height="160" fill="%23FFFFFF"/><rect y="480" width="1200" height="160" fill="%23F5A9B8"/><rect y="640" width="1200" height="160" fill="%235BCFFB"/><polygon points="0,0 266.666,400 0,800" fill="%235BCFFB"/><polygon points="0,0 213.333,400 0,800" fill="%23F5A9B8"/><polygon points="0,0 160,400 0,800" fill="%23FFFFFF"/><polygon points="0,0 120,400 0,800" fill="%23F5A9B8"/><polygon points="0,0 80,400 0,800" fill="%235BCFFB"/></svg>');
	--header-bg-space:50px;
  --header-text:#111;
  --header-border:#FFD400;

  /* Links */
  --link:#3BB3E3;
  --link-hover:#5BCEFA;
  --link-hover-text:#102030;
  --link-active:#0F1420;
  --link-active-text:#5BCEFA;
  --link-bg:#E6F6FF;
  --link-bg-hover:#D8F0FF;
  --link-bg-active:#FCE7EE;

  /* Cards / Surfaces / Feed */
  --card-background:#FFFFFF;
  --card-border:#D7E8F4;
  --card-text:#0F1420;
  --card-shadow:rgba(59,179,227,.16);

  /* Buttons */
  --button-primary-background:var(--trans-blue);
  --button-primary-background-off:#E6F6FF;
  --button-primary-background-hover:var(--trans-blue-d);
  --button-primary-text:#0F1420;
  --button-primary-text-off:#142033;
  --button-primary-text-hover:#0F1420;
  --button-primary-border:var(--trans-blue-d);

  --button-secondary-background:var(--trans-pink);
  --button-secondary-background-hover:var(--trans-pink-d);
  --button-secondary-text:#142033;
  --button-secondary-border:var(--trans-pink-d);

  --button-default-background:#FFF0F5;
  --button-default-background-hover:#FFE6EE;
  --button-default-text:#B45B72;
  --button-default-border:#E8D4DD;
  --button-default-text-hover:#a50364;

  --button-danger-background:#E24A4A;
  --button-danger-background-hover:#C63D3D;
  --button-danger-text:#ffffff;
  --button-danger-border:#E2C9C9;

  --button-warning-background:#F2A11B;
  --button-warning-background-hover:#DB8F16;
  --button-warning-text:#241600;
  --button-warning-border:#F2A11B;

  --button-close-background:#F7FBFF;
  --button-close-background-hover:#EAF4FF;
  --button-close-text:#0F1420;
  --button-close-border:#D7E8F4;

  /* Badges / counters */
  --badge-background:#FFFFFF;
  --badge-text:#142033;
  --badge-border:#D7E8F4;

  /* Sliders / Switches / modal */
  --slider-wrapper:rgba(240,248,255,.65);
  --slider-background:#EAF4FF;
  --slider-background-before:#FFFFFF;
  --slider-text:#142033;
  --slider-box-shadow:rgba(91,206,250,.22);
  --slider-box-overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(245,169,184,.18) 60%,rgba(91,206,250,.28) 100%);

  /* Inputs */
  --input-background:#FFFFFF;
  --input-text:#0F1420;
  --input-checked:var(--trans-pink);
  --input-checked-text:#142033;
  --input-unchecked:#E6F6FF;
  --input-unchecked-text:#3BB3E3;
  --input-box-shadow:rgba(245,169,184,.25);
  --input-border:#D7E8F4;
  --input-placeholder:#6d7386;
  --input-focus-ring:rgb(91 206 250 / .50);

  /* Playlist */
  --playlist-background:#FFFFFF;
  --playlist-title:#142033;
  --playlist-hover:#F7FBFF;
  --playlist-playing:#FFF0F5;
  --playlist-border:#D7E8F4;
  --playlist-text:#142033;
  --playlist-icon-inactive:rgba(91,206,250,.6);
  --playlist-icon-active:#142033;
  --player-background:#EAF4FF;

  /* Player */
  --player-text:#0F1420;
  --player-progress-bar-loading:#D7E8F4;
  --player-buttons:var(--trans-blue);
  --player-buttons-text:#0F1420;
  --player-open-buttons-text:#142033;
  --player-buttons-hover:var(--trans-blue-d);
  --player-border:#D7E8F4;
  --player-progress-bar:var(--trans-pink);

  /* Status */
  --success:#1A7F5A;
  --warning:#B76800;
  --danger:#B2232E;
  --info:#3BB3E3;
  --typing:#B2232E;
  --online:#36c90f;
  --offline:#9aa3b2;
  --mail-unread-alert:#5BCEFA;

  --gradient-1:var(--gradient-trans);

  /* Friends Bar */
  --friends-bar-bg:#FCFEFF;
  --friends-bar-title-bg:#FFFFFF;
  --friends-bar-title-text:#0F1420;
  --friends-bar-item-bg:#FFFFFF;
  --friends-bar-item-text:#0F1420;
  --friends-bar-item-subtext:#56627a;
  --friends-bar-hover-bg:#F7FBFF;
  --friends-bar-border:#D7E8F4;
  --friends-bar-avatar-bg:#FFF0F5;
  --friends-bar-status-bg:#5BCEFA;
  --friends-bar-status-text:#142033;
  --friends-bar-accent:#F5A9B8;

  /* Feed and RHS */
  --social-rhs:#FFF0F5;
  --composer-button-background:#FFF0F5;
  --composer-button-text:#2a1a20;
  --editor-container:#5BCEFA;
  --social-general-background:#FFFFFF;
  --social-general-text:#0F1420;
  --social-general-border:#D7E8F4;
  --editor-header:#F0FAFF;
  --editor-text-area:#FFFFFF;
  --feed-wrapper-background:#FFFFFF;
  --feed-wrapper-border:#D7E8F4;
  --feed-header-background:#F0FAFF;
  --feed-timestamp:#5f6b82;
  --feed-active-like:#3BB3E3;
  --feed-content-stat:#FFFFFF;
}



.qrb-theme[data-theme="light"]{
	
}

 /* 
  --header-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23E40303"/><rect y="133.333" width="1200" height="133.333" fill="%23FF8C00"/><rect y="266.666" width="1200" height="133.333" fill="%23FFED00"/><rect y="400" width="1200" height="133.333" fill="%23008026"/><rect y="533.333" width="1200" height="133.333" fill="%23004DFF"/><rect y="666.666" width="1200" height="133.333" fill="%23750787"/><polygon points="0,0 266.666,400 0,800" fill="%23000000"/><polygon points="0,0 213.333,400 0,800" fill="%23784F17"/><polygon points="0,0 160,400 0,800" fill="%235BCFFB"/><polygon points="0,0 120,400 0,800" fill="%23F5A9B8"/><polygon points="0,0 80,400 0,800" fill="%23FFFFFF"/></svg>');
  */



/* fixes applied: use var() correctly, remove duplicate widths, safe fallbacks, tidy focus/duration */

/* icon colours via tokens */
.lucide-info-icon,
.lucide-list-music{
  color: var(--page-text) !important;
}
.icon-danger{ color: var(--danger); }

/* layout bits kept as-is */
body, html, .hap-fixed, .navbar, .qrb-header-row{ width:100% !important; }
.playlist-icons{ right:20px; gap:18px; }
#modalTrackImage{ width:100%; }

.header-wrapper{ position:relative; }
.header-wrapper img.full-width{ display:block; width:100%; height:auto; }

/* tokenised borders */

.editor-container{
	border: 2px dashed var(--editor-container);
}
.btn-primary:hover{
	background:var(--button-default-background-hover);
}
.qr-composer .editor-wrapper{overflow:hidden;transition:height .25s ease;}
.qr-composer.is-hidden{opacity:0;pointer-events:none;}
.qr-composer.is-hidden .editor-wrapper{height:0!important;display:none;padding:0;margin:0;border-width:0;}

.post-as-chevron{
	font-size:25px;
}
/* Force avatar above editor on all screen sizes */
.editor-textarea-wrapper .editor-user-icon,
.editor-textarea-wrapper .editor-textarea-part {
  float: none !important;     /* neutralise any B3 floats */
  display: block !important;  /* rows, not columns */
  width: 100% !important;     /* full width each row */
  clear: both;                /* ensure stacking */
}

.editor-textarea-wrapper .editor-user-icon {
  margin: 0 0 8px 0;          /* space under avatar */
}

/* Summernote can fix its own width; make it fluid */
.editor-textarea-part .note-editor,
.editor-textarea-part .note-editor .note-editable {
  width: 100%;
  box-sizing: border-box;
}
.note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu {
    min-width: 185px;	
}

/* Composer stub: tidy, neutral, BS3-compatible */
#composer-toggle-mount.composer-stub{
  margin:6px 10px;
  height:40px;
}
.composer-stub .js-composer-toggle, .composer-toggle-dismount{
  display:flex;
  align-items:center;
  height:40px;

  border:1px solid #ddd;
  border-radius:20px;
  background:var(--composer-button-background) !important;
  color:var(--composer-button-text) !important;
  cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.composer-stub .js-composer-toggle:focus{ outline:0; box-shadow:0 0 0 2px rgba(0,123,255,.25); }
.composer-stub .js-composer-toggle:hover{ background:var(--composer-button-background); border-color:#ccc; }

.composer-stub-avatar{
  width:28px; height:28px; border-radius:50%;
  object-fit:cover; margin-right:8px;
}

.composer-stub-input{
  flex:1 1 auto; height:30px;
  border:0; background:transparent;
  pointer-events:none; /* let clicks hit the toggle wrapper */
  color:var(--composer-button-text); font-size:13px;
}

#composer-toggle-mount.is-hidden{ display:none; }
.progress-pride-bg{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23E40303"/><rect y="133.333" width="1200" height="133.333" fill="%23FF8C00"/><rect y="266.666" width="1200" height="133.333" fill="%23FFED00"/><rect y="400" width="1200" height="133.333" fill="%23008026"/><rect y="533.333" width="1200" height="133.333" fill="%23004DFF"/><rect y="666.666" width="1200" height="133.333" fill="%23750787"/><polygon points="0,0 266.666,400 0,800" fill="%23000000"/><polygon points="0,0 213.333,400 0,800" fill="%23784F17"/><polygon points="0,0 160,400 0,800" fill="%235BCFFB"/><polygon points="0,0 120,400 0,800" fill="%23F5A9B8"/><polygon points="0,0 80,400 0,800" fill="%23FFFFFF"/></svg>');background-size:cover;background-repeat:no-repeat;background-position:center;}


.sidebar{
	height:100% !important;
	background:var(--friends-bar-bg);
	color:var(--friends-bar-title-text);
}
.friends-bar-box {
    border-top: 1px solid var(--friends-bar-border);
    padding: 10px;
	background:var(--friends-bar-item-bg);
	color: var(--friends-bar-item-text);
}

/* Friends Bar */
.friends-title { font-size: 18px; color: #223753; }
.friends-bar-box { border-top: 1px solid var(--page-block-border); padding: 10px; }
.friends-bar-box {
    border-top: 1px solid var(--friends-bar-border);
    padding: 10px; 
	padding-bottom:3px;
	padding-top:3px;
	margin-bottom:2px;
    background: var(--friends-bar-item-bg);
    color: var(--friends-bar-item-text);
}
.friends-bar-user { float: left; width: 50px; }
.friends-bar-info { float: left; }
.friends-padding-content { padding: 10px; padding-bottom:0px;background:var(--header-background);}
.friends-bar-last-online { font-size: 11px; color: #626871; margin-bottom: 0px; }


/* RHS - SOCIAL  */



/* FROM BOOTSTRAP */
.btn-default {
    text-shadow: none; /* Matches #fff */
	background-image:none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    border-color: var(--button-default-background, #dbdbdb) !important;
	color: var(--button-default-text);
    background-color: var(--button-default-background);

}
.btn-primary, .btn-primary:hover  {
    border-color: #fbfbfb00;
}
.btn-default:hover {
	color: var(--button-default-text-hover);
    background-color: var(--button-default-background-hover);

}


.hap-fixed .hap-player-title, .hap-fixed  .hap-player-artist{
    color: var(--player-text);
}

.hap-fixed .hap-contr-btn svg {
    fill: var(--player-progress-bar);
}

.hap-fixed .hap-playback-toggle-ex, .hap-fixed .hap-player-toggle-ex{
    background-color: var(--player-background);
    border-top: 1px solid var(--player-border);
    border-left: 1px solid var(--player-border);
    border-right: 1px solid var(--player-border);
}
.hap-playlist-bar{
	background: var(--player-background);
}

.lucide-info-icon, .lucide-list-music{
	color: var(--playlist-icon-active);
}
favourite.active, .pl-like.active {
    color: var(--playlist-icon-active);
}



/* make the *inner* area scrollable with a thin, nice scrollbar */
.scroll-thin{
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  overscroll-behavior: contain;      /* stop scroll chaining */
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit/Blink */
.scroll-thin::-webkit-scrollbar{ width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-track{ background: var(--sb-track); }
.scroll-thin::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid var(--sb-track); /* inset look, reduces visual weight */
}
.scroll-thin:hover::-webkit-scrollbar-thumb{ background-color: var(--sb-thumb-hover); }

	

		/* 100% width (keep normal height) */
		#playlistModal .modal-dialog {
		  width: 100%;          /* not 100vw (avoids horizontal scroll) */
		  max-width: none;
		  margin: 0;            /* remove the centered margins */
		}
		#playlistModal .modal-content { border-radius: 0; } /* optional, cleaner edge */

		/* optional: manage body scroll so content doesn't overflow viewport */
		#playlistModal .modal-body {
		  max-height: calc(100vh - 100px); /* header+footer ≈ 100px; adjust if needed */
		  width:100%;
		}

		/* if Bootstrap’s padding causes side gaps on some browsers: */
		#playlistModal.modal { padding-left: 0 !important; padding-right: 0 !important; }

		.qrb-pl-item {
			display: flex;
			align-items: center;
			gap: 12px;
			
		}
		.qrb-pl-item-wrap {
			flex: 1 1 auto;
			min-width: 0;
		}
		.qrb-pl-item-content {
			display: flex;
			align-items: center;
			padding-left: 5px;
		}
		#playlistTrackModal #qrb-selected-track{display:block!important;background:var(--badge-background)}
		#qrb-selected-track .media-left{float:left;margin-right:3px}
		#qrb-selected-track .media-body{overflow:hidden} /* contain the left float */
		.media-body{
			padding-top:8px;
		}

		/* QRB iOS-style switch (namespaced) */
		.qrb-switch{position:relative;display:inline-block;width:44px;height:22px;vertical-align:middle}
		.qrb-switch-input{opacity:0;width:0;height:0}
		.qrb-switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--badge-background);transition:.2s;border-radius:999px}
		.qrb-switch-slider:before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;background:var(--badge-background);transition:.2s;border-radius:50%}
		.qrb-switch-input:checked + .qrb-switch-slider{background:#a50364} /* BS3 success */
		.qrb-switch-input:focus + .qrb-switch-slider{box-shadow:0 0 0 2px rgba(92,184,92,.25)}
		.qrb-switch-input:checked + .qrb-switch-slider:before{transform:translateX(22px)}
		.qrb-switch-label-text{margin-left:8px;vertical-align:middle}

    .media-tabs-wrapper {
      overflow-x: auto;
      background-color: var(--slider-wrapper);
      -webkit-overflow-scrolling: touch;
    }

    .media-tabs {
      display: flex;
      white-space: nowrap;
    }

    .tab-button {
      flex: 0 0 auto;
      padding: 15px 20px;
      border: none;
      background: var(--input-background);
      cursor: pointer;
      font-size: 16px;
      min-width: 120px;
      text-align: center;
    }

    .tab-button.active {
      background-color: var(--input-checked);
      color: var(--input-checked-text);

    }

    .tab-content-wrapper {
      position: relative;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;
    }

    .tab-content {
      display: none;
      padding: 20px;
      height: 100%;
      overflow-y: auto;
      transition: opacity 0.4s ease;
    }

    .tab-content.active {
      display: block;
      opacity: 1;
    }

		.tab-button{
		  flex:0 0 auto;
		  padding:10px 15px;
		  background:var(--button-primary-background-off);
		  color: var(--button-primary-text-off);
		  cursor:pointer;
		  font-size:16px;

		  text-align:center;
		  min-width:90px;
		  /* requested */
		  border:1px solid var(--card-border);
		  border-bottom:0;
		  border-radius:12px 12px 0 0; /* round top only */
		}

		.tab-button.active {
			background-color: var(--button-primary-background);
			color: var(--button-primary-text);
		}
		.tab-content-wrapper {
			background: var(--slider-wrapper);
		}
		.media-tabs-wrapper {
			background-color: var(--slider-background);
		}

		@media (max-width: 768px) {
			.icon-counters, .info-sign, .hide-on-mobile{
				display: none !important;
			}
			.qrb-icon-group {
				width: 20px;
				margin-right:15px;
			}
			.qrb-playlist-icons {
				gap: 5px;
				width:100px;
			}
			.tab-content {
				padding: 0px;
			}
			.modal-dialog {
				width: 100%;
				padding: 0;
				margin: 0
			}
			
			.qrb-playlist-item-selected{
				background: #9f0360;
			}
			.tab-button{
				min-width:50px;
			
			}

		}


		#modalTrackTitle{
			font-size:18px;
		}
		/* Overlay + centered box (keeps it a real modal) */
		#detailsModal.track-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10550}
		#detailsModal.track-modal.show{display:block}
		#detailsModal .track-modal-content{
		  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
		  width:min(1000px,96vw);max-height:92vh;overflow:auto;
		  border-radius:12px;padding:16px
		}

		/* Close button (top-right of content box) */
		#closeTrackDetailsModal{
		  position:absolute;top:8px;right:8px;z-index:2;
		  background:var(--button-close-background);border:1px solid var(--button-close-background);color:var(--button-close-text);
		  border-radius:10px;padding:4px 10px;line-height:1;font-size:18px;cursor:pointer
		}
		#closeTrackDetailsModal:hover{border-color:var(--page-text-light);color:var(--page-text-light)}

		/* Image + overlay polish */
		#detailsModal .author-image{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:var(--box-shadow)}
		#detailsModal .track-title-overlay{
		  background:var(--gradient-1);
		  color:var(--page-text-light);
		}

		/* Mobile layout nicety */
		@media (max-width:767.98px){
		  #detailsModal .track-image-pane{min-height:240px;margin-bottom:.5rem}
		}

		#detailsModal .track-modal-content{ box-sizing:border-box; overflow-x:hidden; }
		#detailsModal img, #detailsModal svg{ max-width:100%; height:auto; }
		#detailsModal .track-image-pane{ overflow:hidden; } /* just in case */


.author-image {
    position: absolute;
    bottom: 20px;
    left: 15px;
    width: 110px !important;
    height: 110px !important;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    object-fit: cover;
}

/* scope to theme so it flips when data-theme changes */
.editor-event{

  color:var(--page-block-text-alt);
}

/* editor-event > p */
.editor-event > p{
  color:var(--page-block-text-alt);
}

/* editor-event > strong (your <p><strong>…</strong></p>) */
.editor-event > p > strong{
  color:var(--page-block-text-alt);
}




/* editor-event > .glyphicon */
.editor-event .glyphicon{
  color:var(--page-block-text-alt);
}

/* optional: dim the timestamp line */
.editor-event .glyphicon-time,
.editor-event time,
.editor-event .event-meta{
  color:var(--page-block-text);
}
.feed-content{
	color:var(--page-block-text);
}


			.lucide-info-icon, .lucide-list-music{
				color:#fff !important;
			}
			.icon-danger{
				color:#f00;
			}
			body, html, .hap-fixed, .navbar, .qrb-header-row{
				width:100% !important;
			}
			.playlist-icons {
				right: 20px;
				   gap: 18px;
			}
			#modalTrackImage{
				width:100%;
			}

			.header-wrapper {
			  position: relative;
			}

			.header-wrapper img.full-width {
			  display: block;
			  width: 100%;
			  height: auto;
			}

			.avatar-overlay {
			  position: absolute;
			  bottom: -40px; /* tweak to overlap nicely */
			  left: 20px;
			  width: 80px;
			  height: 80px;
			  border-radius: 50%;
			  border: 3px solid #fff;
			  object-fit: cover;
			}
			.avatar-overlay-3 {
				position: absolute;
				bottom: -20px;
				left: 10px;
				width: 60px;
				height: 60px;
				border-radius: 50%;
				border: 3px solid #fff;
				object-fit: cover;
			}
			.title-overlay-3{
				position: absolute;
				bottom: -13px;
				left: 70px;
				
			}
			.space-grid .space-item [class*="col-"] {
				float: left;
			}
			
			/* ---- Defaults/vars ---- */
			
			
			
			/* Make the anchor set its own aspect ratio; no dependency on extra classes */
			.youtube-poster { 
				aspect-ratio: 16 / 9; 
				width: 100%;
			width: calc(33% - 10px);
				float: left;
				margin: 5px;	}


			/* If posters are wrapped by editor <p> tags, neutralise the wrapper’s spacing */
			p > .youtube-poster:only-child { display: block; margin: 14px 0; }
			p:has(> .youtube-poster:only-child) { margin: 0; } /* modern browsers */
			@supports not (selector(:has(*))) {
			  /* fallback: reduce paragraphs that only contain our poster + whitespace */
			  p { margin: 0; }
			}

			/* Slight elevation so it doesn’t look like a flat slab */
			.youtube-poster,
			.yt-unembeddable { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

			/* Images should inherit rounding from container */
			.youtube-video-poster { border-radius: inherit; }

			/* If you have a narrow feed column, keep badges proportionate */
			@media (max-width: 1100px){

			  .youtube-poster { 
					width: calc(50% - 10px);
				}
			}

			/* If you have a narrow feed column, keep badges proportionate */
			@media (max-width: 530px){
			  :root{ --yt-badge-size: 52px; }
			  .youtube-poster { 
					width: calc(100%);
				}
			}


			:root{
			  --yt-badge-size: 40px;         /* play button diameter */
			  --yt-badge-size-sm: 40px;      /* small screens */
			  --yt-badge-bg: #a50360;
			  --yt-badge-fg: #fff;
			  --yt-duration-bg: rgba(0,0,0,.72);
			  --yt-focus: #5aa3ff;
			  --yt-radius: 12px;
			}



			/* Aspect ratio helper shared by posters/placeholders */
			.ar-16x9{ aspect-ratio: 16/9; }

			/* ---- Poster container ---- */
			.youtube-poster,
			.yt-unembeddable{
			  position: relative;
			  display: block;
			  background: #000;
			  overflow: hidden;
			  border-radius: var(--yt-radius);
			}

			.youtube-video-poster{
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  display: block;           /* no inline-gap */
			  background: #111;         /* fallback while loading */
			  
			}

			/* subtle overlay to improve text contrast */
			.youtube-poster::after,
			.yt-unembeddable::after{
			  content: "";
			  position: absolute;
			  inset: 0;
			  background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.05));
			  pointer-events: none;
			}

			/* ---- Play badge (pure CSS, no image) ---- */
			.yt-play-badge{
			  position: absolute;
			  inset: 0;
			  display: grid;
			  place-items: center;
			  pointer-events: none;           /* keep clicks on the anchor */
			}

			.yt-play-badge::before{
			  content: "";
			  width: var(--yt-badge-size);
			  height: var(--yt-badge-size);
			  border-radius: 999px;
			  background: var(--yt-badge-bg);
			  box-shadow: 0 2px 14px rgba(0,0,0,.60);
			  transition: transform .18s ease;
			}

			.yt-play-badge::after{
			  content: "";
			  position: absolute;
			  /* triangle play icon */
			  width: 0; height: 0;
			  border-left: 18px solid var(--yt-badge-fg);
			  border-top: 11px solid transparent;
			  border-bottom: 11px solid transparent;
			  transform: translateX(2px); /* optical centering */
			}

			/* Smaller badge on tight viewports */
			@media (max-width: 420px){
			  .yt-play-badge::before{ width: var(--yt-badge-size-sm); height: var(--yt-badge-size-sm); }
			  .yt-play-badge::after{ border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
			}

			/* Hover/active affordance */
			.youtube-poster:hover .yt-play-badge::before{ transform: scale(1.30); }
			.youtube-poster:active .yt-play-badge::before{ transform: scale(.40); }

			/* Keyboard focus */
			.youtube-poster:focus-visible{
			  outline: 2px solid var(--yt-focus);
			  outline-offset: 3px;
			}

			/* ---- Duration chip ---- */
			.yt-duration{
			  position: absolute;
			  right: .5rem;
			  bottom: .5rem;
			  padding: .15rem .4rem;
			  font-size: .85rem;
			  line-height: 1;
			  color: #fff;
			  background: var(--yt-duration-bg);
			  border-radius: .35rem;
			  letter-spacing: .01em;
			  pointer-events: none;
			}

			/* ---- Unembeddable figure caption ---- */
			.yt-unembeddable figcaption{
			  position: absolute;
			  left: .5rem;
			  bottom: .5rem;
			  padding: .15rem .45rem;
			  font-size: .85rem;
			  line-height: 1;
			  color: #fff;
			  background: var(--yt-duration-bg);
			  border-radius: .35rem;
			}

			/* Reduced motion respect */
			@media (prefers-reduced-motion: reduce){
			  .yt-play-badge::before{ transition: none; }
			}

			/* High-contrast/Windows forced-colors */
			@media (forced-colors: active){
			  .youtube-poster:focus-visible{ outline-color: Highlight; }
			  .yt-play-badge::before{ forced-color-adjust: none; background: CanvasText; }
			  .yt-play-badge::after{ border-left-color: Canvas; }
			}