/*
 * Wadsworth Skin: Kawaii Night - Dark
 * Author: Wadsworth Team
 * Description: Soft dark purple backdrop with pastel pink and lavender accents.
 *              Rounded corners, gentle glows, and floating hearts ✨
 * Tier: pro
 *
 * Effects: kawaii.js — floating hearts + sparkles (prefers-reduced-motion safe)
 *
 * Sections
 * ─────────────────────────────────────────────────────
 * CORE UI (79 vars):
 *   Backgrounds · Borders · Text · Accent/Brand · Semantic · Medals ·
 *   Fonts · Border-Radius · Z-Index · Shadows · Transitions · Gradients
 *
 * SPECIALTY THEMES (22 vars):
 *   Nav-Loader · Audio Player · Company Pages (Leather) · WikiWads
 *
 * SEMANTIC DATA (39 vars): game-specific meaning, pink/lavender tinted
 *
 * COMPONENT OVERRIDES: rounder corners, pink glows, kawaii button shapes
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg-page:    #0c0718;            /* deep indigo-black                */
  --bg-card:    #180e2a;            /* dark violet card                 */
  --bg-card-2:  #241539;            /* medium dark violet               */
  --bg-input:   #180e2a;            /* same as card                     */
  --bg-header:  #0a0514;            /* darkest strip for header         */
  --bg-ticker:  #0a0514;            /* bottom ticker matches header     */
  --bg-overlay: rgba(8,4,18,0.80);  /* modal overlay                    */

  /* ── Borders ──────────────────────────────────────────────── */
  --border:        #3d1a5e;         /* primary card / input border      */
  --border-subtle: #5c2e80;         /* dividers, section separators     */
  --border-focus:  #f472b6;         /* pink focus ring                  */

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:   #f5d8f0;        /* warm pinkish white               */
  --text-bright:    #fce7f8;        /* near-white for numbers           */
  --text-secondary: #c49fd4;        /* muted lavender labels            */
  --text-muted:     #7e5a8a;        /* disabled / placeholders          */
  --text-faint:     #513660;        /* metadata, timestamps             */
  --text-on-accent: #1a0c28;        /* dark text on pink backgrounds    */
  --text-on-danger: #ffffff;        /* white on danger red              */

  /* ── Accent / Brand ───────────────────────────────────────── */
  --accent:       #f472b6;          /* hot pink — links, interactive    */
  --accent-dim:   #ec4899;          /* pressed / hover                  */
  --accent-bg:    rgba(244,114,182,0.10);
  --accent-2:     #c084fc;          /* lavender — secondary             */
  --accent-2-dim: #a855f7;
  --accent-2-bg:  rgba(192,132,252,0.10);
  --accent-3:     #67e8f9;          /* aqua — tertiary (events/levels)  */
  --accent-3-dim: #22d3ee;
  --accent-3-bg:  rgba(103,232,249,0.10);

  /* ── Semantic Colors ──────────────────────────────────────── */
  --color-success:        #4ade80;
  --color-success-light:  #86efac;
  --color-success-dark:   #22c55e;
  --color-success-bg:     rgba(74,222,128,0.10);
  --color-danger:         #fb7185;
  --color-danger-light:   #fda4af;
  --color-danger-dark:    #f43f5e;
  --color-danger-xdark:   #9f1239;
  --color-danger-bg:      rgba(251,113,133,0.10);
  --color-warning:        #fbbf24;
  --color-warning-light:  #fde68a;
  --color-warning-bg:     rgba(251,191,36,0.10);
  --color-gold:           #fcd34d;
  --color-gold-bg:        rgba(252,211,77,0.14);
  --color-orange:         #fb923c;
  --color-purple:         #c084fc;
  --color-teal:           #2dd4bf;
  --color-pink:           #f472b6;
  --color-lime:           #a3e635;
  --color-sky:            #7dd3fc;

  /* ── Medals ────────────────────────────────────────────────── */
  --color-rank-1: #fcd34d;          /* gold */
  --color-rank-2: #d1d5db;          /* silver */
  --color-rank-3: #fb923c;          /* bronze (warm) */

  /* ── Fonts ─────────────────────────────────────────────────── */
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-serif:   Georgia, serif;
  --font-cursive: 'Caveat', cursive;
  --font-sans:    'Nunito', system-ui, sans-serif;

  /* ── Border Radius (rounder for kawaii feel) ─────────────── */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     22px;
  --radius-2xl:    32px;
  --radius-pill:   9999px;
  --radius-circle: 50%;

  /* ── Z-Index ────────────────────────────────────────────────── */
  --z-below:  -1;
  --z-base:   100;
  --z-audio:  150;
  --z-ticker: 1000;
  --z-modal:  9999;

  /* ── Shadows (pink glow) ──────────────────────────────────── */
  --shadow-sm:          0 1px 6px  rgba(244,114,182,0.22);
  --shadow-md:          0 4px 22px rgba(244,114,182,0.20);
  --shadow-glow:        0 8px 30px rgba(244,114,182,0.30);
  --shadow-glow-danger: 0 8px 30px rgba(251,113,133,0.30);

  /* ── Transitions ────────────────────────────────────────────── */
  --dur-fast:   0.15s;
  --dur-normal: 0.2s;
  --dur-slow:   2s;

  /* ── Gradients ──────────────────────────────────────────────── */
  --grad-card:        linear-gradient(135deg, #180e2a 0%, #241539 100%);
  --grad-bar:         linear-gradient(to top, #f472b6, #c084fc);
  --grad-cert:        linear-gradient(135deg, #0c0718 0%, #180e2a 100%);
  --grad-cert-border: linear-gradient(90deg, #5c2e80, #3d1a5e, #5c2e80);
  --grad-delete-zone: linear-gradient(135deg, #0c0718 0%, #2a0a1a 100%);
  --grad-audio-knob:  linear-gradient(to bottom, #3d1a5e, #0c0718);
  --grad-kpi:         linear-gradient(135deg, #0c0718 0%, #180e2a 100%);

  /* ── Specialty: Nav-Loader ──────────────────────────────────── */
  --loader-border:    #5c2e80;
  --loader-bar-start: #ec4899;

  /* ── Specialty: Audio Player ────────────────────────────────── */
  --audio-bg-dark:  #1a0d26;
  --audio-bg-mid:   #3d1a5e;
  --audio-accent:   #f472b6;
  --audio-font:     var(--font-serif);
  --audio-pastels-json: '["#FFB7CE","#FFDCE8","#E8D5F5","#C5E8F5","#D5F5E8","#FFB7D5","#F5BBD5","#E8B7F5","#D5C5F0","#B7D5FF","#C5E8C5","#F0F5C5","#FFF5C5","#FFE5B5","#FFF0DC"]';

  /* ── Specialty: Company Pages (Leather & Parchment) ────────── */
  --leather-bg-dark:  #1a0d26;
  --leather-bg-light: #fce7f8;      /* blush parchment instead of cream */
  --leather-text:     #2a1535;
  --leather-accent:   #c084fc;
  --leather-accent-2: #7c3aed;
  --leather-border:   #3d1a5e;

  /* ── Specialty: WikiWads ────────────────────────────────────── */
  --wiki-bg-page:    #0a0514;
  --wiki-bg-card:    #140a22;
  --wiki-bg-card-2:  #1e1030;
  --wiki-border:     #4a1e6e;
  --wiki-text:       #f5d8f0;
  --wiki-text-muted: #8a5f98;
  --wiki-accent-1:   #f472b6;
  --wiki-accent-2:   #fcd34d;
  --wiki-accent-3:   #c084fc;

  /* ── Semantic Data: Transactions ───────────────────────────── */
  --tx-market:    #7dd3fc;
  --tx-resource:  #67e8f9;
  --tx-cash-in:   #4ade80;
  --tx-cash-out:  #fb7185;
  --tx-business:  #c084fc;
  --tx-land:      #a3e635;
  --tx-district:  #fbbf24;
  --tx-crypto:    #fbbf24;
  --tx-bonds:     #67e8f9;
  --tx-shares:    #7dd3fc;
  --tx-dividend:  #4ade80;
  --tx-tax:       #fb923c;
  --tx-p2p:       #c084fc;

  /* ── Semantic Data: Charts ──────────────────────────────────── */
  --chart-income:         rgba(74,222,128,0.70);
  --chart-expense:        rgba(251,113,133,0.65);
  --chart-line:           #f472b6;
  --chart-line-fill:      rgba(244,114,182,0.08);
  --chart-tooltip-bg:     #180e2a;
  --chart-tooltip-border: #3d1a5e;
  --chart-grid:           #1e1030;
  --chart-tick:           #513660;

  /* ── Semantic Data: Chat / Notifications ───────────────────── */
  --mention-player:  #4ade80;
  --mention-item:    #67e8f9;
  --mention-crypto:  #fcd34d;
  --mention-stock:   #fb923c;
  --chat-mod-accent: #fbbf24;

  --notif-badge:     #fb7185;
  --notif-badge-bg:  rgba(251,113,133,0.15);
  --notif-market:    #fbbf24;
  --notif-corporate: #67e8f9;
  --notif-execs:     #c084fc;
  --notif-general:   #7e5a8a;
  --notif-govt:      #4ade80;
  --notif-business:  #fb923c;
  --notif-land:      #a3e635;
  --notif-contract:  #f472b6;
  --notif-dm:        #7dd3fc;

  --dm-own-accent: #c084fc;
  --dm-unread:     #c084fc;
}

/* ── Component overrides — rounder, glowy kawaii aesthetic ─────── */

.card {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow-glow);
}

.badge {
  border-radius: var(--radius-pill);
}

.btn,
.btn-blue, .btn-orange, .btn-red, .btn-gold, .btn-green, .btn-gray {
  border-radius: var(--radius-md);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.btn-blue   { box-shadow: 0 0 12px rgba(244,114,182,0.30); }
.btn-green  { box-shadow: 0 0 10px rgba(74,222,128,0.25); }

.header {
  background: var(--bg-header);
}

input, select {
  border-radius: var(--radius-md);
}

.ticker {
  background: var(--bg-ticker);
}

a:hover {
  color: var(--accent-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES (data-skin="kawaii" prefix — specificity 0,2,0,0)
   ───────────────────────────────────────────────────────────────────────────
   Page <style> blocks appear in <body> and load after the skin <link> tags,
   giving them document-order priority at equal specificity (0,1,0,0).
   Prefixing with [data-skin="kawaii"] raises our specificity to (0,2,0,0)
   so these rules reliably win. The attribute is set synchronously by a
   <script> tag injected alongside the skin <link> tags in skin_utils.py.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Body & Global ───────────────────────────────────────────────────────── */
[data-skin="kawaii"] body {
  background: linear-gradient(180deg, #0c0718 0%, #180e2a 55%, #0c0718 100%) fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
}
[data-skin="kawaii"] a { color: var(--accent); }
[data-skin="kawaii"] a:hover { color: var(--accent-dim); }

/* ── Universal card — glass morphism ─────────────────────────────────────── */
[data-skin="kawaii"] .card {
  background: rgba(24,14,42,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px rgba(253,181,204,0.18);
}
[data-skin="kawaii"] .card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 28px rgba(253,181,204,0.30);
}

/* ── Shared shell overrides (stats_ux.py / exec_shell redefine these) ─────── */
[data-skin="kawaii"] body > .header,
[data-skin="kawaii"] .container > .header {
  background: var(--bg-header);
  border-bottom: 1.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(253,181,204,0.25);
}
[data-skin="kawaii"] .header {
  background: var(--bg-header);
  border-bottom: 1.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(253,181,204,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-skin="kawaii"] .brand  { color: var(--accent); }
/* Swap the Wadsworth badge for the kawaii crown logo everywhere it appears.
   CSS content: on <img> re-points the src in Chromium/WebKit (Android TWA). */
[data-skin="kawaii"] .brand img,
[data-skin="kawaii"] .nl-logo {
  content: url('/static/logo-kawaii.png');
  filter: drop-shadow(0 2px 8px rgba(253,181,204,0.5));
}
[data-skin="kawaii"] .brand img {
  height: 28px;
  width: auto;
}
/* Nav-loader overlay — reskin from leather brown to kawaii soft purple */
[data-skin="kawaii"] #nav-loader {
  background: rgba(18, 10, 30, 0.97) !important;
  font-family: var(--font-body) !important;
}
[data-skin="kawaii"] #nl-card {
  background: rgba(24, 14, 42, 0.99) !important;
  border-color: rgba(253,181,204,0.35) !important;
  box-shadow: 0 20px 60px rgba(253,181,204,0.12), 0 0 0 1px rgba(253,181,204,0.1) !important;
}
[data-skin="kawaii"] #nl-bar {
  background: linear-gradient(to right, var(--accent), var(--accent-2), var(--accent-3)) !important;
  box-shadow: 0 0 10px rgba(253,181,204,0.4) !important;
}
[data-skin="kawaii"] #nl-pct { color: var(--accent) !important; }
[data-skin="kawaii"] #nl-msgs p { color: var(--text-secondary) !important; }
/* Company + auth nav-loader card (different bar id) */
[data-skin="kawaii"] #nl-bar-co,
[data-skin="kawaii"] #nl-bar-login {
  background: linear-gradient(to right, var(--accent), var(--accent-2)) !important;
}
[data-skin="kawaii"] .balance {
  color: var(--color-success);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
[data-skin="kawaii"] .nav {
  background: var(--bg-header);
  border-bottom: 1.5px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 20px rgba(253,181,204,0.20);
}
[data-skin="kawaii"] .nav a {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
}
[data-skin="kawaii"] .nav a:hover,
[data-skin="kawaii"] .nav a.active {
  background: var(--accent);
  color: var(--text-on-accent);
  text-decoration: none;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), 0 0 12px rgba(244,114,182,0.40);
}
[data-skin="kawaii"] .page-title { color: var(--text-bright); }
[data-skin="kawaii"] .nav-link {
  color: var(--accent);
  border-color: var(--accent);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .nav-link:hover { background: var(--accent-bg); }

/* ── Dashboard cards (.dc) ───────────────────────────────────────────────── */
[data-skin="kawaii"] .dc {
  background: rgba(24,14,42,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px rgba(253,181,204,0.18);
}
[data-skin="kawaii"] .dc-d { color: #8b6a9e; }
[data-skin="kawaii"] .dc:hover {
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 8px 28px rgba(253,181,204,0.30);
  text-decoration: none;
}
/* Alternate-tinted large hero dashboard cards */
[data-skin="kawaii"] .dc.dc-hero {
  background: linear-gradient(135deg, rgba(244,114,182,0.18) 0%, rgba(192,132,252,0.14) 100%);
  border-color: rgba(244,114,182,0.25);
}
[data-skin="kawaii"] .dc-btn { border-radius: var(--radius-pill); font-weight: 800; }

/* ── Executive cards & internals ─────────────────────────────────────────── */
[data-skin="kawaii"] .card-special {
  background: rgba(24,14,42,0.82);
  border-color: #d4af37;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 18px rgba(212,175,55,0.22);
}
[data-skin="kawaii"] .card-quit {
  background: rgba(24,14,42,0.82);
  border-color: var(--color-danger);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .exec-name   { color: var(--text-bright); }
[data-skin="kawaii"] .exec-title  { color: #d4af37; }
[data-skin="kawaii"] .exec-desc   { color: var(--text-muted); }
[data-skin="kawaii"] .abilities-section {
  background: #0c0718;
  border-color: rgba(61,26,94,0.4);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .abilities-header { color: var(--text-muted); }
[data-skin="kawaii"] .ability-chip {
  background: var(--bg-card-2);
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .ability-tooltip {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .perf-meter {
  background: var(--bg-card-2);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .perf-label { color: var(--text-muted); }
[data-skin="kawaii"] .stat-row   { border-bottom-color: rgba(61,26,94,0.3); }
[data-skin="kawaii"] .stat-label { color: var(--text-secondary); }
[data-skin="kawaii"] .stat-value { color: var(--text-primary); }
[data-skin="kawaii"] .stat-value.green  { color: var(--color-success); }
[data-skin="kawaii"] .stat-value.orange { color: var(--color-warning); }
[data-skin="kawaii"] .stat-value.red    { color: var(--color-danger); }
[data-skin="kawaii"] .stat-value.purple { color: var(--accent-2); }
[data-skin="kawaii"] .exec-special-tag {
  background: rgba(212,175,55,0.13);
  color: #d4af37;
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .legendary-ability {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.27);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .legendary-ability-name { color: #d4af37; }
[data-skin="kawaii"] .legendary-ability-desc { color: var(--text-secondary); }
[data-skin="kawaii"] .nav-row .btn,
[data-skin="kawaii"] .nav-row a {
  border-radius: var(--radius-sm);
}

/* ── Business page (.biz-*) ──────────────────────────────────────────────── */
[data-skin="kawaii"] .biz-stat {
  background: var(--bg-card);
  border-color: var(--border);
  border-radius: var(--radius-md);
}
[data-skin="kawaii"] .biz-stat .lbl  { color: var(--text-muted); }
[data-skin="kawaii"] .biz-filter-btn {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .biz-filter-btn:hover,
[data-skin="kawaii"] .biz-filter-btn.active { border-color: var(--accent); color: var(--accent); }
[data-skin="kawaii"] .biz-sort-btn        { color: var(--text-muted); }
[data-skin="kawaii"] .biz-sort-btn.active { color: var(--accent); }
[data-skin="kawaii"] .biz-card-header,
[data-skin="kawaii"] .biz-card-body { border-color: var(--border); }
[data-skin="kawaii"] .btn-sm { border-radius: var(--radius-sm); font-weight: 700; }
[data-skin="kawaii"] .btn-sm-blue   { background: var(--accent);         color: var(--text-on-accent); }
[data-skin="kawaii"] .btn-sm-orange { background: var(--color-warning);   color: #1a0c28; }
[data-skin="kawaii"] .btn-sm-red    { background: var(--color-danger);    color: var(--text-on-accent); }
[data-skin="kawaii"] .btn-sm-green  { background: var(--color-success);   color: #0a1a0a; }
[data-skin="kawaii"] .progress-bar-wrap {
  background: var(--bg-page);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .progress-bar-fill {
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .line-row {
  background: var(--bg-page);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .qb-panel {
  background: #0e0820;
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .sp-panel {
  background: #0e0820;
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .qb-input {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .qb-input:focus  { border-color: var(--accent); }

/* ── Inventory page (.inv-*) ─────────────────────────────────────────────── */
[data-skin="kawaii"] .inv-page-header h1 { color: var(--text-bright); }
[data-skin="kawaii"] .inv-summary-bar {
  background: var(--bg-card);
  border-color: var(--border);
  border-radius: var(--radius-md);
}
[data-skin="kawaii"] .inv-stat-val  { color: var(--text-primary); }
[data-skin="kawaii"] .inv-stat-lbl  { color: var(--text-muted); }
[data-skin="kawaii"] .inv-search-wrap {
  background: var(--bg-page);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .inv-search-wrap:focus-within { border-color: var(--accent); }
[data-skin="kawaii"] .inv-search-input            { color: var(--text-primary); }
[data-skin="kawaii"] .inv-search-input::placeholder { color: var(--text-muted); }
[data-skin="kawaii"] .inv-quick-btn {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--accent-2);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .inv-quick-btn:hover { background: var(--bg-card-2); border-color: var(--accent-2); }
[data-skin="kawaii"] .inv-qty-badge     { color: var(--accent); }
[data-skin="kawaii"] .inv-card-name     { color: var(--text-bright); }
[data-skin="kawaii"] .inv-card-desc     { color: var(--text-secondary); }
[data-skin="kawaii"] .inv-card-value    { color: var(--color-success); }
[data-skin="kawaii"] .inv-card-value--none { color: var(--text-muted); }
[data-skin="kawaii"] .inv-unit-price    { color: var(--text-muted); }
[data-skin="kawaii"] .inv-value-bar     { background: var(--bg-page); }
[data-skin="kawaii"] .inv-list-toggle {
  border-color: var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .inv-list-toggle:hover { border-color: var(--accent); color: var(--accent); }
[data-skin="kawaii"] .inv-list-toggle.open  { border-color: rgba(244,114,182,0.3); color: var(--accent); background: var(--accent-bg); }
[data-skin="kawaii"] .inv-list-form         { border-top-color: var(--border); }
[data-skin="kawaii"] .inv-input {
  background: var(--bg-page);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .inv-input:focus     { border-color: var(--accent); }
[data-skin="kawaii"] .inv-empty           { color: var(--border-subtle); }
[data-skin="kawaii"] .inv-mkt-sep         { color: var(--border-subtle); }
[data-skin="kawaii"] .inv-depth,
[data-skin="kawaii"] .inv-vol             { color: var(--text-muted); }
[data-skin="kawaii"] .inv-sort-label      { color: var(--text-muted); }
[data-skin="kawaii"] .inv-mkt-link {
  color: var(--text-secondary);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .inv-mkt-link:hover  { color: var(--accent); border-color: var(--accent); }
[data-skin="kawaii"] .inv-desc-toggle     { color: var(--accent); }
[data-skin="kawaii"] .inv-biz-prod {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: rgba(244,114,182,0.25);
  border-radius: 10px;
}
[data-skin="kawaii"] .inv-biz-cons {
  background: var(--accent-2-bg);
  color: var(--accent-2);
  border-color: rgba(192,132,252,0.25);
  border-radius: 10px;
}
[data-skin="kawaii"] .inv-quick-bid {
  color: var(--color-gold);
  border-color: rgba(120,53,15,0.5);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .inv-quick-bid:hover { background: rgba(120,53,15,0.25); border-color: var(--color-gold); color: #fde68a; }
[data-skin="kawaii"] .inv-filter-tabs::-webkit-scrollbar-thumb { background: var(--border-subtle); }
[data-skin="kawaii"] .inv-listed           { color: var(--color-success); }
[data-skin="kawaii"] .inv-listed a         { color: var(--color-success); }
[data-skin="kawaii"] .inv-chg-up   { color: var(--color-success); background: var(--color-success-bg); }
[data-skin="kawaii"] .inv-chg-down { color: var(--color-danger);  background: var(--color-danger-bg); }
[data-skin="kawaii"] .inv-chg-flat { color: var(--text-muted); }
[data-skin="kawaii"] .inv-bid  { color: var(--color-success); }
[data-skin="kawaii"] .inv-ask  { color: var(--color-orange); }

/* ── Trading Dashboard (.td-*) ───────────────────────────────────────────── */
[data-skin="kawaii"] .td-sidebar,
[data-skin="kawaii"] .td-panel,
[data-skin="kawaii"] .td-section {
  background: var(--bg-card);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .td-label { color: var(--text-muted); }
[data-skin="kawaii"] .td-input {
  background: var(--bg-page);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .td-input:focus { border-color: var(--accent); }
[data-skin="kawaii"] #td-tab-buy:checked  ~ .td-tab-bar .td-tab-buy  { background: var(--color-success); }
[data-skin="kawaii"] #td-tab-sell:checked ~ .td-tab-bar .td-tab-sell { background: var(--color-danger); }

/* ── Progress bar (base class shimmer) ───────────────────────────────────── */
[data-skin="kawaii"] .progress-bar {
  background: var(--grad-bar);
  position: relative;
  overflow: hidden;
}
[data-skin="kawaii"] .progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: _kw-shimmer-ltr 3s infinite;
}

/* ── Admin/Mod shells (.admin-*, filter buttons, table rows) ─────────────── */
[data-skin="kawaii"] table { border-collapse: collapse; }
[data-skin="kawaii"] th {
  background: var(--bg-card-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
[data-skin="kawaii"] td { border-color: var(--border); }
[data-skin="kawaii"] tr:hover td { background: var(--accent-bg); }

/* ── Ledger page ─────────────────────────────────────────────────────────── */
[data-skin="kawaii"] .ledger { background: var(--grad-cert); border-color: var(--border); }
[data-skin="kawaii"] .ledger-title  { color: var(--accent); }
[data-skin="kawaii"] .ledger-subtitle { color: var(--text-secondary); }

/* ── Level badge fix (inline style attribute, needs !important) ──────────── */
[data-skin="kawaii"] [style*="background:#1e1b4b"],
[data-skin="kawaii"] [style*="background: #1e1b4b"] {
  background: var(--bg-card-2) !important;
  border-color: var(--border-subtle) !important;
}

/* ── Selection highlight ─────────────────────────────────────────────────── */
[data-skin="kawaii"] ::selection {
  background: rgba(244,114,182,0.35);
  color: var(--text-bright);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
[data-skin="kawaii"] ::-webkit-scrollbar        { width: 6px; height: 6px; }
[data-skin="kawaii"] ::-webkit-scrollbar-track  { background: var(--bg-page); }
[data-skin="kawaii"] ::-webkit-scrollbar-thumb  { background: var(--border-subtle); border-radius: 3px; }
[data-skin="kawaii"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS-FILE UTILITY CLASS OVERRIDES
   Common classes reused with hardcoded hex across chat, memecoins, counties,
   cities, districts, estate, reserve_banks, admins, settings pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Alerts ──────────────────────────────────────────────────────────────── */
[data-skin="kawaii"] .alert-success,
[data-skin="kawaii"] .flash-success,
[data-skin="kawaii"] .alert-price-up  { background: var(--color-success-bg); border-color: var(--color-success-dark); color: var(--color-success-light); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .alert-error,
[data-skin="kawaii"] .flash-error,
[data-skin="kawaii"] .alert-price-down { background: var(--color-danger-bg); border-color: var(--color-danger-dark); color: var(--color-danger-light); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .alert-info      { background: var(--accent-bg);         border-color: var(--accent-dim);        color: var(--accent); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .alert-warning   { background: var(--color-warning-bg);  border-color: var(--color-warning);     color: var(--color-warning-light); border-radius: var(--radius-sm); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
[data-skin="kawaii"] .badge-success,
[data-skin="kawaii"] .badge-green,
[data-skin="kawaii"] .badge-buy       { background: var(--color-success-bg); color: var(--color-success-light); }
[data-skin="kawaii"] .badge-danger,
[data-skin="kawaii"] .badge-red,
[data-skin="kawaii"] .badge-sell      { background: var(--color-danger-bg);  color: var(--color-danger-light); }
[data-skin="kawaii"] .badge-warning,
[data-skin="kawaii"] .badge-yellow,
[data-skin="kawaii"] .badge-partial,
[data-skin="kawaii"] .badge-meme,
[data-skin="kawaii"] .badge-governance { background: var(--color-gold-bg); color: var(--color-gold); }
[data-skin="kawaii"] .badge-info,
[data-skin="kawaii"] .badge-blue,
[data-skin="kawaii"] .badge-filled    { background: var(--accent-bg);        color: var(--accent); }
[data-skin="kawaii"] .badge-crypto,
[data-skin="kawaii"] .badge-native    { background: var(--accent-2-bg);      color: var(--accent-2); }
[data-skin="kawaii"] .badge-active,
[data-skin="kawaii"] .badge-cancelled { background: var(--bg-card-2);        color: var(--text-muted); }

/* ── Common buttons ──────────────────────────────────────────────────────── */
[data-skin="kawaii"] .btn-primary  { background: var(--accent);         color: var(--text-on-accent); border-radius: var(--radius-md); font-weight: 800; }
[data-skin="kawaii"] .btn-secondary { background: var(--bg-card-2);    color: var(--text-secondary);  border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-danger   { background: var(--color-danger);   color: var(--text-on-accent);  border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-crypto   { background: var(--accent-2);       color: var(--text-on-accent);  border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-governance { background: var(--color-gold);   color: #1a0c28;                border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-buy      { background: var(--color-success);  color: #0a1a0a;                border-radius: var(--radius-md); font-weight: 800; }
[data-skin="kawaii"] .btn-sell     { background: var(--color-danger);   color: var(--text-on-accent);  border-radius: var(--radius-md); font-weight: 800; }
[data-skin="kawaii"] .btn-meme     { background: var(--color-warning);  color: #1a0c28;                border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-cancel   { background: var(--bg-card-2);      color: var(--text-secondary);  border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-vote-yes { background: var(--color-success);  color: #0a1a0a;                border-radius: var(--radius-md); }
[data-skin="kawaii"] .btn-vote-no  { background: var(--color-danger);   color: var(--text-on-accent);  border-radius: var(--radius-md); }

/* ── Common stat cells ───────────────────────────────────────────────────── */
[data-skin="kawaii"] .stat         { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .stat-label   { color: var(--text-secondary); }
[data-skin="kawaii"] .stat-value   { color: var(--text-bright); }
[data-skin="kawaii"] .stat-box     { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .info-stat    { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .info-stat-label { color: var(--text-muted); }
[data-skin="kawaii"] .info-stat-value { color: var(--accent-2); }
[data-skin="kawaii"] .info-box     { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .positive     { color: var(--color-success); }
[data-skin="kawaii"] .negative     { color: var(--color-danger); }
[data-skin="kawaii"] .neutral      { color: var(--text-muted); }

/* ── Common layout ───────────────────────────────────────────────────────── */
[data-skin="kawaii"] .form-group label,
[data-skin="kawaii"] .form-label   { color: var(--text-muted); }
[data-skin="kawaii"] .detail-row   { border-color: var(--border); }
[data-skin="kawaii"] .divider      { border-color: var(--border); }
[data-skin="kawaii"] .tabs         { border-color: var(--border); background: var(--bg-card); }
[data-skin="kawaii"] .active       { border-color: var(--accent); color: var(--accent); }

/* ── Chat & DM system ────────────────────────────────────────────────────── */
[data-skin="kawaii"] .chat-layout  { background: var(--bg-page); }
[data-skin="kawaii"] .chat-sidebar {
  background: var(--bg-header);
  border-color: var(--border);
}
[data-skin="kawaii"] .chat-header,
[data-skin="kawaii"] .chat-input-bar {
  background: var(--bg-header);
  border-color: var(--border);
}
[data-skin="kawaii"] .chat-messages { background: var(--bg-page); }
[data-skin="kawaii"] .chat-msg      { background: transparent; }
[data-skin="kawaii"] .msg-body      { background: var(--bg-card); border-radius: var(--radius-md); }
[data-skin="kawaii"] .msg-name      { color: var(--accent); }
[data-skin="kawaii"] .msg-time      { color: var(--text-faint); }
[data-skin="kawaii"] .msg-text      { color: var(--text-primary); }
[data-skin="kawaii"] .msg-avatar,
[data-skin="kawaii"] .msg-avatar-letter,
[data-skin="kawaii"] .avatar-letter,
[data-skin="kawaii"] .conv-avatar,
[data-skin="kawaii"] .profile-avatar,
[data-skin="kawaii"] .search-result-letter { background: var(--bg-card-2); color: var(--accent-2); border-radius: 50%; }
[data-skin="kawaii"] .avatar-preview { background: var(--bg-card-2); border-color: var(--border); }
[data-skin="kawaii"] .sidebar-section { border-color: var(--border); }
[data-skin="kawaii"] .sidebar-btn  { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .sidebar-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-skin="kawaii"] .room-btn     { color: var(--text-secondary); }
[data-skin="kawaii"] .conv-btn     { color: var(--text-secondary); }
[data-skin="kawaii"] .conv-preview { color: var(--text-muted); }
[data-skin="kawaii"] .conv-name    { color: var(--text-primary); }
[data-skin="kawaii"] .unread-badge { background: var(--color-danger); color: #fff; border-radius: var(--radius-pill); }
[data-skin="kawaii"] .online-status { background: var(--color-success); border-radius: 50%; }
[data-skin="kawaii"] .typing-indicator { color: var(--text-muted); }
[data-skin="kawaii"] .system-msg   { color: var(--text-faint); }
[data-skin="kawaii"] .dm-placeholder { color: var(--text-muted); }
[data-skin="kawaii"] .hamburger    { background: var(--bg-card-2); color: var(--text-secondary); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .search-input {
  background: var(--bg-page);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .search-result-item { color: var(--text-secondary); }
[data-skin="kawaii"] .search-results { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .emoji-picker  { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .emoji-toggle  { background: var(--bg-card-2); border-color: var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .readonly-banner { background: var(--bg-card-2); border-color: var(--border-subtle); color: var(--text-muted); }
[data-skin="kawaii"] .ban-word-tag  { background: var(--bg-card-2); color: var(--text-secondary); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .remove-x     { color: var(--color-danger); }
[data-skin="kawaii"] .selected     { background: var(--accent-bg); border-color: var(--accent); }
[data-skin="kawaii"] .label, [data-skin="kawaii"] .value { color: var(--text-secondary); }
[data-skin="kawaii"] .mention          { color: var(--accent); }
[data-skin="kawaii"] .mention-player   { color: var(--mention-player); }
[data-skin="kawaii"] .mention-crypto   { color: var(--mention-crypto); }
[data-skin="kawaii"] .mention-stock    { color: var(--mention-stock); }
[data-skin="kawaii"] .mention-item     { color: var(--mention-item); }
[data-skin="kawaii"] .mention-dropdown {
  background: var(--bg-card);
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
[data-skin="kawaii"] .mention-dropdown-header { color: var(--text-muted); }
[data-skin="kawaii"] .mention-item     { border-color: var(--border); }
[data-skin="kawaii"] .mention-option:hover { background: var(--accent-bg); }
[data-skin="kawaii"] .mention-primary  { color: var(--text-primary); }
[data-skin="kawaii"] .mention-secondary { color: var(--text-muted); }

/* ── Memecoins / crypto tokens ───────────────────────────────────────────── */
[data-skin="kawaii"] .meme-card,
[data-skin="kawaii"] .wsc-card,
[data-skin="kawaii"] .wallet-card {
  background: rgba(24,14,42,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--border);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .wsc-card { border-color: var(--accent-2); box-shadow: 0 0 20px rgba(192,132,252,0.15); }
[data-skin="kawaii"] .wsc-balance { color: var(--accent-2); }
[data-skin="kawaii"] .wallet-balance { color: var(--accent-2); }
[data-skin="kawaii"] .wallet-value   { color: var(--text-secondary); }
[data-skin="kawaii"] .wallet-ticker  { background: var(--bg-card-2); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .token-hero {
  background: linear-gradient(135deg, #1a0533 0%, #0c0718 100%);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .token-logo     { background: var(--accent-2-bg); border-radius: var(--radius-circle); }
[data-skin="kawaii"] .token-price-big { color: var(--text-bright); }
[data-skin="kawaii"] .price-big      { color: var(--accent); font-weight: 800; }
[data-skin="kawaii"] .ticker-up,
[data-skin="kawaii"] .ticker-change.up,
[data-skin="kawaii"] .token-change-up  { color: var(--color-success); }
[data-skin="kawaii"] .ticker-down,
[data-skin="kawaii"] .ticker-change.down,
[data-skin="kawaii"] .token-change-down { color: var(--color-danger); }
[data-skin="kawaii"] .ticker-flat,
[data-skin="kawaii"] .token-change-flat { color: var(--text-muted); }
[data-skin="kawaii"] .ticker-item    { color: var(--text-primary); }
[data-skin="kawaii"] .ticker-symbol  { color: var(--accent-2); }
[data-skin="kawaii"] .ticker-sep     { color: var(--border-subtle); }
[data-skin="kawaii"] .ticker-chip    { background: var(--bg-card-2); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .token-change-badge { border-radius: var(--radius-pill); }
[data-skin="kawaii"] .bid-row        { color: var(--color-success); }
[data-skin="kawaii"] .ask-row        { color: var(--color-danger); }
[data-skin="kawaii"] .order-row      { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .order-book-side { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .depth-bar      { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .depth-cell     { color: var(--text-secondary); }
[data-skin="kawaii"] .spread-line    { background: var(--bg-card); border-color: var(--color-gold); color: var(--color-gold); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .tab-bar        { background: var(--bg-card-2); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .tab-btn        { color: var(--text-secondary); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .tab-btn.active,
[data-skin="kawaii"] .tab-content    { background: var(--bg-card); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .sort-tab       { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .sort-tab.active { border-color: var(--accent); color: var(--accent); }
[data-skin="kawaii"] .swap-box       { background: var(--bg-card); border-color: var(--accent-2); border-radius: var(--radius-lg); box-shadow: 0 0 16px rgba(192,132,252,0.12); }
[data-skin="kawaii"] .reward-pool    { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .privacy-banner { background: var(--bg-card-2); border-color: var(--border-subtle); color: var(--text-muted); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .price-change-badge { border-radius: var(--radius-pill); }
[data-skin="kawaii"] .holder-rank   { background: var(--accent-2-bg); color: var(--accent-2); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .holder-row    { border-color: var(--border); }
[data-skin="kawaii"] .mining-bar-bg { background: var(--bg-page); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .mining-bar-fill { background: var(--grad-bar); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .native-color  { color: var(--accent-2); }
[data-skin="kawaii"] .meme-color    { color: var(--color-gold); }
[data-skin="kawaii"] .pie-dot       { border-radius: 50%; }
[data-skin="kawaii"] .logo-cell     { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .logo-placeholder { background: var(--bg-card-2); color: var(--text-muted); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .pool-val      { color: var(--accent); }

/* ── Counties / crypto exchanges / governance ────────────────────────────── */
[data-skin="kawaii"] .exchange-panel {
  background: var(--bg-card);
  border-color: var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px var(--accent-bg);
}
[data-skin="kawaii"] .governance-panel {
  background: var(--bg-card);
  border-color: var(--color-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px var(--color-gold-bg);
}
[data-skin="kawaii"] .crypto { color: var(--accent-2); }
[data-skin="kawaii"] .crypto-ticker {
  background: linear-gradient(135deg, var(--bg-page) 0%, var(--bg-card) 100%);
  border-color: var(--accent-2);
  border-radius: var(--radius-md);
}
[data-skin="kawaii"] .supply-bar  { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .supply-bar-fill { background: linear-gradient(to right, var(--accent-2), var(--accent)); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .cycle-stat  { background: var(--bg-card); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .cycle-stat-label { color: var(--text-muted); }
[data-skin="kawaii"] .cycle-stat-value { color: var(--color-warning); }
[data-skin="kawaii"] .vote-bar    { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .vote-bar-yes { background: var(--color-success); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .vote-bar-no  { background: var(--color-danger);  border-radius: var(--radius-sm); }
[data-skin="kawaii"] .vote-yes    { background: var(--color-success-bg);  color: var(--color-success-light);  border-radius: var(--radius-sm); }
[data-skin="kawaii"] .vote-no     { background: var(--color-danger-bg);   color: var(--color-danger-light);   border-radius: var(--radius-sm); }
[data-skin="kawaii"] .poll-card,
[data-skin="kawaii"] .proposal-card { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .poll-header,
[data-skin="kawaii"] .proposal-header { color: var(--text-bright); border-color: var(--border); }
[data-skin="kawaii"] .proposal-type { background: var(--accent-2-bg); color: var(--accent-2); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .poll-votes   { color: var(--text-muted); }
[data-skin="kawaii"] .phase-indicator { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .phase-proposal { color: var(--accent-2); }
[data-skin="kawaii"] .phase-voting   { color: var(--color-warning); }
[data-skin="kawaii"] .phase-completed { color: var(--color-success); }
[data-skin="kawaii"] .mining-node  { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .dot          { background: var(--accent); border-radius: 50%; }
[data-skin="kawaii"] .refresh-note { color: var(--text-muted); }
[data-skin="kawaii"] .info-grid    { background: var(--bg-card); border-radius: var(--radius-md); }
[data-skin="kawaii"] .mayor        { background: var(--color-gold-bg); color: var(--color-gold); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .member-chip  { background: var(--bg-card-2); border-color: var(--border); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .member-list  { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .proj-tab     { background: var(--bg-card-2); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .proj-tab.active { border-color: var(--accent); color: var(--accent); }

/* ── Reserve Banks (bonds, forex) ────────────────────────────────────────── */
[data-skin="kawaii"] .bank-card    { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-lg); }
[data-skin="kawaii"] .bank-header  { background: var(--bg-header); border-color: var(--border); }
[data-skin="kawaii"] .bond-row     { border-color: var(--border); }
[data-skin="kawaii"] .bond-row:hover { background: var(--accent-bg); }
[data-skin="kawaii"] .fx-row       { border-color: var(--border); }
[data-skin="kawaii"] .fx-row-header { background: var(--bg-card-2); color: var(--text-muted); }
[data-skin="kawaii"] .yield        { color: var(--color-success); }
[data-skin="kawaii"] .yield-neg    { color: var(--color-danger); }
[data-skin="kawaii"] .code         { background: var(--bg-card-2); color: var(--accent); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .grid2,
[data-skin="kawaii"] .grid3        { gap: 12px; }
[data-skin="kawaii"] .mini         { color: var(--text-muted); font-size: 0.75rem; }
[data-skin="kawaii"] .rate         { color: var(--text-bright); font-weight: 700; }
[data-skin="kawaii"] .alert-ok     { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-light); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .alert-err    { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger-light);  border-radius: var(--radius-sm); }
[data-skin="kawaii"] .badge-pos    { background: var(--color-success-bg); color: var(--color-success); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .badge-neg    { background: var(--color-danger-bg);  color: var(--color-danger);  border-radius: var(--radius-pill); }
[data-skin="kawaii"] .badge-zero   { background: var(--bg-card-2); color: var(--text-muted); border-radius: var(--radius-pill); }

/* ── Estate / inheritance ────────────────────────────────────────────────── */
[data-skin="kawaii"] .cert-card    {
  background: rgba(10,5,20,0.85);
  border-color: var(--border);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .cert-title   { color: var(--text-muted); }
[data-skin="kawaii"] .cert-badge-idle      { background: var(--color-gold-bg); color: var(--color-gold); border-radius: var(--radius-pill); }
[data-skin="kawaii"] .cert-badge-voluntary { background: var(--accent-2-bg);   color: var(--accent-2);   border-radius: var(--radius-pill); }
[data-skin="kawaii"] .heir-slot    { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .heir-slot-empty { color: var(--text-muted); }
[data-skin="kawaii"] .heir-number  { color: var(--text-muted); }
[data-skin="kawaii"] .delete-zone  {
  background: linear-gradient(135deg, var(--bg-page) 0%, #2a0a1a 100%);
  border-color: var(--color-danger-dark);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .inheritance-alert { background: var(--accent-2-bg); border-color: var(--accent-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .search-box   { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .stat-row     { border-color: var(--border); background: transparent; }
[data-skin="kawaii"] .rank-2       { color: #d1d5db; }
[data-skin="kawaii"] .rank-3       { color: var(--color-orange); }

/* ── Admin item-routes panel (.ir-*) ─────────────────────────────────────── */
[data-skin="kawaii"] .ir-card     { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-md); }
[data-skin="kawaii"] .ir-card-hdr { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .ir-col-hdr  { background: var(--bg-card-2); color: var(--text-muted); }
[data-skin="kawaii"] .ir-cons-hdr { color: var(--color-danger-light); }
[data-skin="kawaii"] .ir-prod-hdr { color: var(--color-success-light); }
[data-skin="kawaii"] .ir-biz-row  { background: var(--bg-page); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .ir-biz-name { color: var(--text-primary); }
[data-skin="kawaii"] .ir-item-key { color: var(--text-faint); }
[data-skin="kawaii"] .ir-item-name { color: var(--text-primary); }
[data-skin="kawaii"] .ir-qty      { color: var(--text-faint); }
[data-skin="kawaii"] .ir-stat, [data-skin="kawaii"] .ir-section-lbl { color: var(--text-muted); }
[data-skin="kawaii"] .ir-none     { color: var(--text-faint); }
[data-skin="kawaii"] .ir-pill     { border-radius: var(--radius-pill); }
[data-skin="kawaii"] .ir-pill-c   { color: var(--color-danger); }
[data-skin="kawaii"] .ir-pill-d   { color: var(--accent); }
[data-skin="kawaii"] .ir-pill-r   { color: var(--text-muted); }
[data-skin="kawaii"] .ir-more     { color: var(--color-danger); }
[data-skin="kawaii"] .ir-dl-btn   { color: var(--color-danger); }
[data-skin="kawaii"] .ir-search, [data-skin="kawaii"] .ir-inp {
  background: var(--bg-page);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .ir-filters  { background: var(--bg-card-2); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .ir-toolbar  { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .ir-ft       { border-radius: var(--radius-sm); }
[data-skin="kawaii"] .ir-search-ico, [data-skin="kawaii"] .ir-search-wrap { color: var(--text-muted); }
[data-skin="kawaii"] .link-card   { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .lc-title    { color: var(--text-primary); }
[data-skin="kawaii"] .lc-desc     { color: var(--text-muted); }
[data-skin="kawaii"] .flash       { border-radius: var(--radius-sm); }
[data-skin="kawaii"] .tabs        { border-color: var(--border); background: var(--bg-card); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .chat-msg-row { background: var(--bg-card); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .cm-name     { color: var(--accent); }
[data-skin="kawaii"] .cm-text     { color: var(--text-primary); }
[data-skin="kawaii"] .cm-time     { color: var(--text-faint); }

/* ── Settings page ───────────────────────────────────────────────────────── */
[data-skin="kawaii"] .fcc-btn {
  background: var(--bg-card-2);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .fcc-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-skin="kawaii"] .rp-tl-btn {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
[data-skin="kawaii"] .rp-tl-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Audio player warm wood aesthetic intentionally preserved; just soften bg */
[data-skin="kawaii"] .rp-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
[data-skin="kawaii"] .rp-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ── Misc admin badges & chat modals ─────────────────────────────────────── */
[data-skin="kawaii"] .modal-overlay { background: var(--bg-overlay); }
[data-skin="kawaii"] .modal         { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-glow); }
[data-skin="kawaii"] .modal-btn     { border-radius: var(--radius-sm); font-weight: 700; }
[data-skin="kawaii"] .modal-btn-blue { background: var(--accent); color: var(--text-on-accent); }
[data-skin="kawaii"] .modal-btn-gray { background: var(--bg-card-2); color: var(--text-secondary); }
[data-skin="kawaii"] .modal-btn-red  { background: var(--color-danger); color: var(--text-on-accent); }
[data-skin="kawaii"] .profile-name  { color: var(--text-bright); }
[data-skin="kawaii"] .profile-stat  { color: var(--text-muted); }
[data-skin="kawaii"] .online-count  { color: var(--color-success); }
[data-skin="kawaii"] .patch-note-msg { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-sm); }
[data-skin="kawaii"] .patch-note-icon { color: var(--accent); }
[data-skin="kawaii"] .mention-trigger-badge { background: var(--accent-bg); color: var(--accent); border-radius: var(--radius-pill); }

/* ═══════════════════════════════════════════════════════════════════════════
   GACHA PRINCESS REFERENCE — ANIMATIONS & MICRO-INTERACTIONS
   Ported from the Gacha Princess sample: floating, shimmer, bubbly press,
   pink-glow glass cards, inset active states, event banner accent block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tap highlight removal ───────────────────────────────────────────────── */
[data-skin="kawaii"] * { -webkit-tap-highlight-color: transparent; }

/* ── Bubbly press — all interactive elements ─────────────────────────────── */
[data-skin="kawaii"] button:active,
[data-skin="kawaii"] .btn:active,
[data-skin="kawaii"] .btn-sm:active,
[data-skin="kawaii"] .btn-blue:active,
[data-skin="kawaii"] .btn-green:active,
[data-skin="kawaii"] .btn-red:active,
[data-skin="kawaii"] .btn-primary:active,
[data-skin="kawaii"] .btn-secondary:active,
[data-skin="kawaii"] .btn-danger:active,
[data-skin="kawaii"] .btn-buy:active,
[data-skin="kawaii"] .btn-sell:active,
[data-skin="kawaii"] .dc:active,
[data-skin="kawaii"] .nav a:active,
[data-skin="kawaii"] .biz-filter-btn:active,
[data-skin="kawaii"] .tab-btn:active,
[data-skin="kawaii"] .fcc-btn:active,
[data-skin="kawaii"] .inv-list-toggle:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
[data-skin="kawaii"] button,
[data-skin="kawaii"] .btn,
[data-skin="kawaii"] .dc {
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* ── Floating animation (hero icons, level badge, avatar ring) ───────────── */
@keyframes _kw-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}
[data-skin="kawaii"] .level-badge,
[data-skin="kawaii"] .player-avatar-hero,
[data-skin="kawaii"] .hero-icon,
[data-skin="kawaii"] .floating {
  animation: _kw-float 4s ease-in-out infinite;
}

/* ── Shimmer on ALL progress / XP / value bars (matches sample 3s speed) ─── */
@keyframes _kw-shimmer-ltr {
  0%   { left: -100%; }
  100% { left:  100%; }
}
[data-skin="kawaii"] .progress-bar-fill,
[data-skin="kawaii"] .inv-value-bar > div,
[data-skin="kawaii"] .mining-bar-fill,
[data-skin="kawaii"] .supply-bar-fill,
[data-skin="kawaii"] .vote-bar-yes,
[data-skin="kawaii"] .vote-bar-no {
  position: relative;
  overflow: hidden;
}
[data-skin="kawaii"] .progress-bar-fill::after,
[data-skin="kawaii"] .inv-value-bar > div::after,
[data-skin="kawaii"] .mining-bar-fill::after,
[data-skin="kawaii"] .supply-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
  animation: _kw-shimmer-ltr 3s infinite;
}

/* ── Glass card: remaining card variants get the same white-tinted border ─── */
[data-skin="kawaii"] .inv-card {
  background: rgba(24,14,42,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(253,181,204,0.14);
}
[data-skin="kawaii"] .inv-card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 6px 20px rgba(253,181,204,0.24);
}
[data-skin="kawaii"] .biz-card {
  background: rgba(24,14,42,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(253,181,204,0.14);
}
[data-skin="kawaii"] .meme-card,
[data-skin="kawaii"] .wsc-card,
[data-skin="kawaii"] .wallet-card {
  border: 1.5px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 16px rgba(253,181,204,0.16);
}
[data-skin="kawaii"] .bank-card {
  border: 1.5px solid rgba(255,255,255,0.09);
  box-shadow: 0 4px 14px rgba(253,181,204,0.14);
}
[data-skin="kawaii"] .poll-card,
[data-skin="kawaii"] .proposal-card,
[data-skin="kawaii"] .heir-slot {
  background: rgba(24,14,42,0.80);
  border: 1.5px solid rgba(255,255,255,0.09);
}
[data-skin="kawaii"] .modal {
  border: 1.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 30px rgba(253,181,204,0.30);
}

/* ── Event / notification banner (left accent block + glass body) ────────── */
[data-skin="kawaii"] .event-card,
[data-skin="kawaii"] .notif-card,
[data-skin="kawaii"] .alert-event {
  display: flex;
  overflow: hidden;
  background: rgba(24,14,42,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(253,181,204,0.20);
}
[data-skin="kawaii"] .event-card-accent,
[data-skin="kawaii"] .notif-icon-block {
  background: linear-gradient(180deg, rgba(244,114,182,0.40) 0%, rgba(192,132,252,0.30) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  min-width: 56px;
}
[data-skin="kawaii"] .event-tag,
[data-skin="kawaii"] .notif-tag {
  background: rgba(244,114,182,0.18);
  color: var(--accent);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 8px;
}

/* ── Currency / balance pill (rounded-full white-tint) ───────────────────── */
[data-skin="kawaii"] .currency-pill,
[data-skin="kawaii"] .stat-pill,
[data-skin="kawaii"] .balance-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Bottom ticker: override the component-level rule too ────────────────── */
[data-skin="kawaii"] .ticker {
  background: rgba(10,5,20,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -8px 30px rgba(255,133,179,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WADSWORTH WIKI (.w* namespace — stats_ux.py wiki_shell)
   The wiki ships its own orange/yellow/blue palette baked into an inline
   <style> block. These [data-skin="kawaii"] rules (specificity 0,2,0) recolor
   it to the kawaii pink/lavender theme using the --wiki-* variables.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Header */
[data-skin="kawaii"] .wh {
  background: var(--bg-header);
  border-image: linear-gradient(90deg, var(--accent), var(--accent-2) 50%, var(--accent-3)) 1;
  box-shadow: 0 4px 20px rgba(253,181,204,0.20);
}
[data-skin="kawaii"] .wh-logo {
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text;
}
[data-skin="kawaii"] .wh-player { color: var(--text-muted); }
[data-skin="kawaii"] .wh-btn {
  border-color: var(--border); color: var(--text-secondary); border-radius: var(--radius-md);
}
[data-skin="kawaii"] .wh-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Nav */
[data-skin="kawaii"] .wn { background: var(--bg-header); border-bottom-color: var(--border); }
[data-skin="kawaii"] .wn a { color: var(--text-secondary); }
[data-skin="kawaii"] .wn a:hover { color: var(--accent); border-bottom-color: var(--accent-2); }
[data-skin="kawaii"] .wn a.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Page title + description */
[data-skin="kawaii"] .wpt,
[data-skin="kawaii"] .whero-title {
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text;
}
[data-skin="kawaii"] .wpd,
[data-skin="kawaii"] .whero-sub { color: var(--text-secondary); }
/* Section divider */
[data-skin="kawaii"] .ws-t { color: var(--accent); }
[data-skin="kawaii"] .ws-l { background: linear-gradient(90deg, var(--border-subtle), transparent); }
/* Cards (glass morphism) */
[data-skin="kawaii"] .wc {
  background: rgba(24,14,42,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .wc::after { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
[data-skin="kawaii"] .wc:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(253,181,204,0.24), 0 2px 8px rgba(0,0,0,0.4);
}
[data-skin="kawaii"] .wcs:hover { border-color: rgba(255,255,255,0.10); }
[data-skin="kawaii"] .wc-title { color: var(--text-bright); }
[data-skin="kawaii"] .wc-desc { color: var(--text-secondary); }
[data-skin="kawaii"] .wc-meta { border-top-color: var(--border); }
/* Key-value rows */
[data-skin="kawaii"] .wkv { border-bottom-color: var(--border); }
[data-skin="kawaii"] .wk { color: var(--text-muted); }
[data-skin="kawaii"] .wv { color: var(--text-bright); }
[data-skin="kawaii"] .wv.ora { color: var(--accent); }
[data-skin="kawaii"] .wv.yel { color: var(--color-gold); }
[data-skin="kawaii"] .wv.blu { color: var(--accent-3); }
[data-skin="kawaii"] .wv.dim { color: var(--text-muted); }
/* Badges */
[data-skin="kawaii"] .wb-o { background: var(--accent-bg);   color: var(--accent);   border-color: rgba(244,114,182,0.3); }
[data-skin="kawaii"] .wb-y { background: var(--color-gold-bg); color: var(--color-gold); border-color: rgba(252,211,77,0.25); }
[data-skin="kawaii"] .wb-b { background: var(--accent-3-bg); color: var(--accent-3); border-color: rgba(103,232,249,0.25); }
[data-skin="kawaii"] .wb-g { background: var(--bg-card-2);   color: var(--text-secondary); border-color: var(--border); }
/* Search & filters */
[data-skin="kawaii"] .wsbox,
[data-skin="kawaii"] .whero-sw input {
  background: var(--bg-card); border-color: var(--border); color: var(--text-primary);
  border-radius: var(--radius-md);
}
[data-skin="kawaii"] .wsbox:focus,
[data-skin="kawaii"] .whero-sw input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
[data-skin="kawaii"] .wsw-ico,
[data-skin="kawaii"] .whero-sw-ico { color: var(--text-muted); }
[data-skin="kawaii"] .wft {
  color: var(--text-secondary); background: var(--bg-card); border-color: var(--border);
}
[data-skin="kawaii"] .wft:hover { color: var(--accent); border-color: var(--accent); }
[data-skin="kawaii"] .wft.active { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }
[data-skin="kawaii"] .wnone { color: var(--text-muted); }
/* Video / audio / material cards */
[data-skin="kawaii"] .wvc,
[data-skin="kawaii"] .wac {
  background: rgba(24,14,42,0.82); border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .wvc-title,
[data-skin="kawaii"] .wac-title { color: var(--text-bright); }
[data-skin="kawaii"] .wvc-desc,
[data-skin="kawaii"] .wac-lbl { color: var(--text-muted); }
[data-skin="kawaii"] .wac-ico {
  background: linear-gradient(135deg, var(--accent-bg), var(--accent-2-bg));
  border-color: rgba(244,114,182,0.28);
}
[data-skin="kawaii"] .wac-soon { color: var(--color-gold); }
[data-skin="kawaii"] .mat { background: var(--bg-card-2); border-color: var(--border); color: var(--text-secondary); }
/* Hero */
[data-skin="kawaii"] .whero {
  background: radial-gradient(ellipse at 50% -20%, rgba(244,114,182,0.12) 0%, transparent 65%);
  border-bottom-color: var(--border);
}
[data-skin="kawaii"] .whero-tag {
  color: var(--accent); background: var(--accent-bg); border-color: rgba(244,114,182,0.25);
}
/* WikiWads article cards (.ww-* namespace) */
[data-skin="kawaii"] .ww-article {
  background: rgba(24,14,42,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .ww-article-header { border-bottom-color: var(--border); }
[data-skin="kawaii"] .ww-article-title  { color: var(--text-bright); }
[data-skin="kawaii"] .ww-article-summary { color: var(--text-secondary); }
[data-skin="kawaii"] .ww-result-card {
  background: var(--bg-card-2); border-color: var(--border); color: inherit;
  border-radius: var(--radius-md);
}
[data-skin="kawaii"] .ww-result-card:hover { border-color: var(--accent); }
[data-skin="kawaii"] .ww-rc-title { color: var(--text-bright); }
[data-skin="kawaii"] .ww-rc-sum  { color: var(--text-muted); }
[data-skin="kawaii"] .ww-search-info { color: var(--text-muted); }
[data-skin="kawaii"] .ww-index-card {
  background: rgba(24,14,42,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg);
}
[data-skin="kawaii"] .ww-index-card:hover {
  border-color: var(--accent); box-shadow: 0 8px 24px rgba(253,181,204,0.20);
}
[data-skin="kawaii"] .ww-ic-title { color: var(--text-bright); }
[data-skin="kawaii"] .ww-ic-sum  { color: var(--text-muted); }