/* ============================================================
   k27-theme.css  ·  K27 Component Library
   33 themes / 8 categories, 100% CSS custom properties.
   Extracted from Metals Stack (K27-MD-D503-METALS, Lucy v1.9.2).

   Every theme sets the same 30 variables. Nothing here targets
   any app-specific element, so this file is safe to drop into
   any page. See README.md for the full variable reference.
   ============================================================ */

/* ================= THEME TOKENS ================= */
/* Cloud Dancer (default — current look) */
:root, [data-theme="cloud"] {
  --bg: #fafafa;
  --bg-soft: #fff8e1;
  --surface: #ffffff;
  --surface-2: #fff;
  --text: #1a1a1a;
  --text-muted: #666;
  --text-dim: #888;
  --border: #eee;
  --accent: #d4af37;
  --accent-2: #b8860b;
  --silver: #b8b8b8;
  --platinum: #6b8e9f;
  --palladium: #8e7cc3;
  --total-bg: #1a1a2e;
  --total-text: #ffffff;
  --total-meta: #ccc;
  --pos: #2ecc71;
  --neg: #e74c3c;
  --warn: #f39c12;
  --tag-bg: #f0e6d2;
  --tag-text: #8b6914;
  --row-border: #eee;
  --header-grad: linear-gradient(135deg, #d4af37, #b8860b);
  --header-text: #ffffff;
  --pie-border: #ffffff;
  --shadow: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 2px 8px rgba(0,0,0,0.1);
  --soft-grad: linear-gradient(135deg, #fff8e1, #fff);
  --feed-grad: #fff8e1;
  --feed-border: #f39c12;
}

/* Cloud Dancer Light — pure white, subtle gold */
[data-theme="cloud-light"] {
  --bg: #ffffff;
  --bg-soft: #fbfaf6;
  --surface: #ffffff;
  --surface-2: #fbfaf6;
  --text: #2a2a2a;
  --text-muted: #6a6a6a;
  --text-dim: #9a9a9a;
  --border: #f0f0f0;
  --accent: #c9a227;
  --accent-2: #a07f1a;
  --silver: #c8c8c8;
  --platinum: #7a9eb0;
  --palladium: #9c8cc7;
  --total-bg: #f7f3e8;
  --total-text: #2a2a2a;
  --total-meta: #6a6a6a;
  --pos: #1f9d55;
  --neg: #d44848;
  --warn: #d49623;
  --tag-bg: #f7efd8;
  --tag-text: #7a5a10;
  --row-border: #f0f0f0;
  --header-grad: linear-gradient(135deg, #e8c878, #c9a227);
  --header-text: #2a2a2a;
  --pie-border: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.06);
  --soft-grad: linear-gradient(135deg, #fbfaf6, #ffffff);
  --feed-grad: #fbfaf6;
  --feed-border: #d49623;
}

/* Classic Dark — deep navy, gold pop */
[data-theme="dark"] {
  --bg: #0e1018;
  --bg-soft: #181b27;
  --surface: #1a1d2a;
  --surface-2: #232636;
  --text: #e8e9ee;
  --text-muted: #9ea3b6;
  --text-dim: #6b7186;
  --border: #2a2e3f;
  --accent: #f0c64a;
  --accent-2: #d4af37;
  --silver: #c8ccd6;
  --platinum: #8ab4c8;
  --palladium: #b29adb;
  --total-bg: #0a0c14;
  --total-text: #f0c64a;
  --total-meta: #9ea3b6;
  --pos: #3ddc97;
  --neg: #ff6b6b;
  --warn: #ffb454;
  --tag-bg: #2a2e3f;
  --tag-text: #f0c64a;
  --row-border: #2a2e3f;
  --header-grad: linear-gradient(135deg, #1a1d2a, #2a2e3f);
  --header-text: #f0c64a;
  --pie-border: #1a1d2a;
  --shadow: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --soft-grad: linear-gradient(135deg, #181b27, #1a1d2a);
  --feed-grad: #181b27;
  --feed-border: #f0c64a;
}

/* Stadium — baseball field green, chalk lines */
[data-theme="stadium"] {
  --bg: #0c2a14;
  --bg-soft: #143d1e;
  --surface: #1a4f28;
  --surface-2: #1f5c30;
  --text: #f5f7f0;
  --text-muted: #b5c9b0;
  --text-dim: #7a9075;
  --border: #2a6638;
  --accent: #f4d35e;
  --accent-2: #e0b020;
  --silver: #e8eae0;
  --platinum: #9ec5b8;
  --palladium: #c8a8e0;
  --total-bg: #0a1f0f;
  --total-text: #f4d35e;
  --total-meta: #b5c9b0;
  --pos: #6ee7b7;
  --neg: #ff7b7b;
  --warn: #ffb545;
  --tag-bg: #f4d35e;
  --tag-text: #0c2a14;
  --row-border: #2a6638;
  --header-grad: linear-gradient(135deg, #1a4f28, #f4d35e);
  --header-text: #ffffff;
  --pie-border: #1a4f28;
  --shadow: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.4);
  --soft-grad: linear-gradient(135deg, #143d1e, #1a4f28);
  --feed-grad: #143d1e;
  --feed-border: #f4d35e;
}

/* Newsprint — old-paper beige, serif vibes */
[data-theme="newsprint"] {
  --bg: #efe8d4;
  --bg-soft: #f7f1de;
  --surface: #faf5e4;
  --surface-2: #f0e9d2;
  --text: #1c1c1c;
  --text-muted: #4a4234;
  --text-dim: #7a6f55;
  --border: #d8cdaf;
  --accent: #6b4f1d;
  --accent-2: #4a3514;
  --silver: #888270;
  --platinum: #5a6e7a;
  --palladium: #6e5a8a;
  --total-bg: #1c1c1c;
  --total-text: #efe8d4;
  --total-meta: #b8a978;
  --pos: #2f7d3a;
  --neg: #a82828;
  --warn: #a86d1c;
  --tag-bg: #d8cdaf;
  --tag-text: #4a3514;
  --row-border: #d8cdaf;
  --header-grad: linear-gradient(135deg, #4a3514, #6b4f1d);
  --header-text: #faf5e4;
  --pie-border: #faf5e4;
  --shadow: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.12);
  --soft-grad: linear-gradient(135deg, #f7f1de, #faf5e4);
  --feed-grad: #f7f1de;
  --feed-border: #6b4f1d;
}

/* Solarized Dark */
[data-theme="solarized"] {
  --bg: #002b36;
  --bg-soft: #073642;
  --surface: #073642;
  --surface-2: #0d4655;
  --text: #eee8d5;
  --text-muted: #93a1a1;
  --text-dim: #586e75;
  --border: #0d4655;
  --accent: #b58900;
  --accent-2: #cb9a1a;
  --silver: #93a1a1;
  --platinum: #268bd2;
  --palladium: #6c71c4;
  --total-bg: #002028;
  --total-text: #b58900;
  --total-meta: #93a1a1;
  --pos: #859900;
  --neg: #dc322f;
  --warn: #cb4b16;
  --tag-bg: #0d4655;
  --tag-text: #b58900;
  --row-border: #0d4655;
  --header-grad: linear-gradient(135deg, #073642, #b58900);
  --header-text: #eee8d5;
  --pie-border: #073642;
  --shadow: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --soft-grad: linear-gradient(135deg, #073642, #002b36);
  --feed-grad: #073642;
  --feed-border: #b58900;
}

/* Sunset — warm orange/pink */
[data-theme="sunset"] {
  --bg: #2a1834;
  --bg-soft: #3d2247;
  --surface: #4a2a55;
  --surface-2: #5a3565;
  --text: #fff0e8;
  --text-muted: #f4b5a0;
  --text-dim: #c89588;
  --border: #6a4475;
  --accent: #ffb347;
  --accent-2: #ff8c61;
  --silver: #f0c8b8;
  --platinum: #ce8fb0;
  --palladium: #b08ad6;
  --total-bg: #1a0e22;
  --total-text: #ffb347;
  --total-meta: #f4b5a0;
  --pos: #7be88a;
  --neg: #ff5e7e;
  --warn: #ffb347;
  --tag-bg: #6a4475;
  --tag-text: #ffb347;
  --row-border: #6a4475;
  --header-grad: linear-gradient(135deg, #ff5e7e, #ffb347);
  --header-text: #2a1834;
  --pie-border: #4a2a55;
  --shadow: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.45);
  --soft-grad: linear-gradient(135deg, #3d2247, #4a2a55);
  --feed-grad: #3d2247;
  --feed-border: #ffb347;
}

/* Cyberpunk — neon pink/cyan on near-black */
[data-theme="cyberpunk"] {
  --bg: #07000f;
  --bg-soft: #110024;
  --surface: #150030;
  --surface-2: #1f0048;
  --text: #e8f0ff;
  --text-muted: #9aa0c0;
  --text-dim: #6a6a9a;
  --border: #2a0060;
  --accent: #ff00aa;
  --accent-2: #00ffff;
  --silver: #c8d8ff;
  --platinum: #6affff;
  --total-bg: #04000a;
  --total-text: #00ffff;
  --total-meta: #ff66cc;
  --pos: #00ff9c;
  --neg: #ff3366;
  --warn: #ffd700;
  --tag-bg: #2a0060;
  --tag-text: #ff00aa;
  --row-border: #2a0060;
  --header-grad: linear-gradient(135deg, #ff00aa, #00ffff);
  --header-text: #07000f;
  --pie-border: #150030;
  --shadow: 0 2px 12px rgba(255,0,170,0.15);
  --shadow-lg: 0 4px 22px rgba(0,255,255,0.18);
  --soft-grad: linear-gradient(135deg, #150030, #1f0048);
  --feed-grad: #110024;
  --feed-border: #ff00aa;
}

/* Forest — deep green, mossy */
[data-theme="forest"] {
  --bg: #0e2018;
  --bg-soft: #18302a;
  --surface: #1d3a2e;
  --surface-2: #244738;
  --text: #ecf3df;
  --text-muted: #a8c0a0;
  --text-dim: #6a8070;
  --border: #2a4838;
  --accent: #88c070;
  --accent-2: #6aa050;
  --silver: #c8d4b8;
  --platinum: #88a8b0;
  --total-bg: #07140e;
  --total-text: #c8e0a0;
  --total-meta: #a8c0a0;
  --pos: #88c070;
  --neg: #d46b6b;
  --warn: #e0b048;
  --tag-bg: #244738;
  --tag-text: #c8e0a0;
  --row-border: #2a4838;
  --header-grad: linear-gradient(135deg, #1d3a2e, #88c070);
  --header-text: #0e2018;
  --pie-border: #1d3a2e;
  --shadow: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.4);
  --soft-grad: linear-gradient(135deg, #18302a, #1d3a2e);
  --feed-grad: #18302a;
  --feed-border: #88c070;
}

/* Ocean — deep blue/teal */
[data-theme="ocean"] {
  --bg: #051e3e;
  --bg-soft: #0a2c52;
  --surface: #0f3866;
  --surface-2: #16447a;
  --text: #e8f4ff;
  --text-muted: #a0c4dd;
  --text-dim: #6a8ca8;
  --border: #1f5088;
  --accent: #4ec5d4;
  --accent-2: #2faab8;
  --silver: #c0d8ec;
  --platinum: #88b8d0;
  --total-bg: #021428;
  --total-text: #4ec5d4;
  --total-meta: #a0c4dd;
  --pos: #5eea98;
  --neg: #ff6b88;
  --warn: #ffc25e;
  --tag-bg: #16447a;
  --tag-text: #4ec5d4;
  --row-border: #1f5088;
  --header-grad: linear-gradient(135deg, #0f3866, #4ec5d4);
  --header-text: #ffffff;
  --pie-border: #0f3866;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
  --soft-grad: linear-gradient(135deg, #0a2c52, #0f3866);
  --feed-grad: #0a2c52;
  --feed-border: #4ec5d4;
}

/* Rose Gold — soft pink + copper */
[data-theme="rose"] {
  --bg: #fff0e8;
  --bg-soft: #fde0d4;
  --surface: #fff8f3;
  --surface-2: #fbe8de;
  --text: #4a2828;
  --text-muted: #7a5a5a;
  --text-dim: #b08888;
  --border: #f4d4c4;
  --accent: #c98686;
  --accent-2: #a86060;
  --silver: #d8c8c0;
  --platinum: #b89898;
  --total-bg: #4a2828;
  --total-text: #fff0e8;
  --total-meta: #f4d4c4;
  --pos: #4a9a5a;
  --neg: #c44848;
  --warn: #d49623;
  --tag-bg: #fde0d4;
  --tag-text: #a86060;
  --row-border: #f4d4c4;
  --header-grad: linear-gradient(135deg, #c98686, #d4a888);
  --header-text: #ffffff;
  --pie-border: #fff8f3;
  --shadow: 0 1px 4px rgba(150,80,80,0.1);
  --shadow-lg: 0 2px 10px rgba(150,80,80,0.15);
  --soft-grad: linear-gradient(135deg, #fde0d4, #fff8f3);
  --feed-grad: #fde0d4;
  --feed-border: #c98686;
}

/* Mono — true minimalist black/white */
[data-theme="mono"] {
  --bg: #f8f8f8;
  --bg-soft: #f0f0f0;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --text: #0a0a0a;
  --text-muted: #555555;
  --text-dim: #999999;
  --border: #e0e0e0;
  --accent: #000000;
  --accent-2: #333333;
  --silver: #b8b8b8;
  --platinum: #777777;
  --total-bg: #0a0a0a;
  --total-text: #ffffff;
  --total-meta: #b8b8b8;
  --pos: #006400;
  --neg: #b40000;
  --warn: #c46a00;
  --tag-bg: #e8e8e8;
  --tag-text: #0a0a0a;
  --row-border: #e0e0e0;
  --header-grad: linear-gradient(135deg, #0a0a0a, #555555);
  --header-text: #ffffff;
  --pie-border: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 2px 8px rgba(0,0,0,0.12);
  --soft-grad: linear-gradient(135deg, #f0f0f0, #ffffff);
  --feed-grad: #f0f0f0;
  --feed-border: #0a0a0a;
}

/* Vapor — synthwave purple/pink */
[data-theme="vapor"] {
  --bg: #1a0033;
  --bg-soft: #2a0a4a;
  --surface: #3a1062;
  --surface-2: #4a1a78;
  --text: #ffeaff;
  --text-muted: #d4a0e8;
  --text-dim: #9a70b8;
  --border: #5a2a90;
  --accent: #ff71ce;
  --accent-2: #b967ff;
  --silver: #e8d0f4;
  --platinum: #ff9dff;
  --total-bg: #0a0018;
  --total-text: #01cdfe;
  --total-meta: #ff71ce;
  --pos: #05ffa1;
  --neg: #ff5599;
  --warn: #fffb96;
  --tag-bg: #4a1a78;
  --tag-text: #01cdfe;
  --row-border: #5a2a90;
  --header-grad: linear-gradient(135deg, #ff71ce, #01cdfe);
  --header-text: #1a0033;
  --pie-border: #3a1062;
  --shadow: 0 2px 12px rgba(255,113,206,0.2);
  --shadow-lg: 0 4px 20px rgba(1,205,254,0.2);
  --soft-grad: linear-gradient(135deg, #2a0a4a, #3a1062);
  --feed-grad: #2a0a4a;
  --feed-border: #ff71ce;
}

/* Money — cash green & black */
[data-theme="money"] {
  --bg: #062215;
  --bg-soft: #0a3324;
  --surface: #0f4030;
  --surface-2: #155040;
  --text: #e8f8e8;
  --text-muted: #a0d0a8;
  --text-dim: #6a9a78;
  --border: #1f6044;
  --accent: #5cb85c;
  --accent-2: #3a8a3a;
  --silver: #c8d8c0;
  --platinum: #88a890;
  --total-bg: #03150a;
  --total-text: #b8e0a0;
  --total-meta: #a0d0a8;
  --pos: #88e08c;
  --neg: #e06b6b;
  --warn: #e0c048;
  --tag-bg: #155040;
  --tag-text: #b8e0a0;
  --row-border: #1f6044;
  --header-grad: linear-gradient(135deg, #0f4030, #5cb85c);
  --header-text: #062215;
  --pie-border: #0f4030;
  --shadow: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.45);
  --soft-grad: linear-gradient(135deg, #0a3324, #0f4030);
  --feed-grad: #0a3324;
  --feed-border: #5cb85c;
}

/* ===== SCI-FI / CYBER (additions) ===== */
[data-theme="matrix"] {
  --bg: #000800; --bg-soft: #001500; --surface: #001a00; --surface-2: #002400;
  --text: #00ff41; --text-muted: #00b32d; --text-dim: #007020;
  --border: #003800; --accent: #39ff14; --accent-2: #00ff41;
  --silver: #88ff88; --platinum: #44ff66;
  --total-bg: #000400; --total-text: #39ff14; --total-meta: #00b32d;
  --pos: #66ff66; --neg: #ff3366; --warn: #ffff00;
  --tag-bg: #002400; --tag-text: #39ff14; --row-border: #003800;
  --header-grad: linear-gradient(135deg, #000800, #00ff41);
  --header-text: #000400; --pie-border: #001a00;
  --shadow: 0 0 8px rgba(0,255,65,0.15); --shadow-lg: 0 0 20px rgba(0,255,65,0.25);
  --soft-grad: linear-gradient(135deg, #001500, #001a00); --feed-grad: #001500; --feed-border: #39ff14;
}
[data-theme="tron"] {
  --bg: #000810; --bg-soft: #001220; --surface: #001a2e; --surface-2: #00253f;
  --text: #ffffff; --text-muted: #6FC3DF; --text-dim: #4a8ca5;
  --border: #003a5c; --accent: #6FC3DF; --accent-2: #00b3ff;
  --silver: #ccddee; --platinum: #88aac0;
  --palladium: #00b3ff; /* K27: filled — absent in original */
  --total-bg: #00040a; --total-text: #6FC3DF; --total-meta: #88bcd0;
  --pos: #5eea98; --neg: #ff5566; --warn: #ffaa33;
  --tag-bg: #00253f; --tag-text: #6FC3DF; --row-border: #003a5c;
  --header-grad: linear-gradient(135deg, #001a2e, #6FC3DF);
  --header-text: #000810; --pie-border: #001a2e;
  --shadow: 0 0 8px rgba(111,195,223,0.18); --shadow-lg: 0 0 20px rgba(111,195,223,0.28);
  --soft-grad: linear-gradient(135deg, #001220, #001a2e); --feed-grad: #001220; --feed-border: #6FC3DF;
}
[data-theme="hud"] {
  --bg: #001a35; --bg-soft: #002550; --surface: #003066; --surface-2: #004080;
  --text: #cce7ff; --text-muted: #88bbe0; --text-dim: #5e87b0;
  --border: #1f5088; --accent: #00aaff; --accent-2: #0088cc;
  --silver: #bbd4ec; --platinum: #6699cc;
  --total-bg: #00102a; --total-text: #00aaff; --total-meta: #88bbe0;
  --pos: #5eea98; --neg: #ff6677; --warn: #ffcc33;
  --tag-bg: #004080; --tag-text: #00aaff; --row-border: #1f5088;
  --header-grad: linear-gradient(135deg, #003066, #00aaff);
  --header-text: #001a35; --pie-border: #003066;
  --shadow: 0 1px 6px rgba(0,170,255,0.18); --shadow-lg: 0 2px 14px rgba(0,170,255,0.28);
  --soft-grad: linear-gradient(135deg, #002550, #003066); --feed-grad: #002550; --feed-border: #00aaff;
}
[data-theme="outrun"] {
  --bg: #1a002a; --bg-soft: #2a0d3f; --surface: #3a1750; --surface-2: #4a2068;
  --text: #ff66c4; --text-muted: #ff8cd8; --text-dim: #aa68a8;
  --border: #6a2d80; --accent: #ff2e88; --accent-2: #ffcc00;
  --silver: #f0c8e8; --platinum: #c888c0;
  --palladium: #ffcc00; /* K27: filled — absent in original */
  --total-bg: #0a0014; --total-text: #ff2e88; --total-meta: #ffcc00;
  --pos: #00ffaa; --neg: #ff3344; --warn: #ffd700;
  --tag-bg: #4a2068; --tag-text: #ffcc00; --row-border: #6a2d80;
  --header-grad: linear-gradient(135deg, #ff2e88, #ffcc00);
  --header-text: #1a002a; --pie-border: #3a1750;
  --shadow: 0 0 12px rgba(255,46,136,0.3); --shadow-lg: 0 0 24px rgba(255,204,0,0.25);
  --soft-grad: linear-gradient(135deg, #2a0d3f, #3a1750); --feed-grad: #2a0d3f; --feed-border: #ff2e88;
}

/* ===== MOVIES / POP ===== */
[data-theme="batman"] {
  --bg: #000000; --bg-soft: #0a0a0a; --surface: #141414; --surface-2: #1f1f1f;
  --text: #f8d44f; --text-muted: #b89a30; --text-dim: #6a5a1c;
  --border: #2a2510; --accent: #ffd700; --accent-2: #c8a32a;
  --silver: #c8c8c8; --platinum: #888888;
  --total-bg: #000000; --total-text: #ffd700; --total-meta: #b89a30;
  --pos: #88dd88; --neg: #ff4444; --warn: #ffaa00;
  --tag-bg: #1f1f1f; --tag-text: #ffd700; --row-border: #2a2510;
  --header-grad: linear-gradient(135deg, #000000, #ffd700);
  --header-text: #000000; --pie-border: #141414;
  --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-lg: 0 4px 16px rgba(255,215,0,0.18);
  --soft-grad: linear-gradient(135deg, #0a0a0a, #141414); --feed-grad: #0a0a0a; --feed-border: #ffd700;
}
[data-theme="panic"] {
  --bg: #1a1a00; --bg-soft: #2a2a00; --surface: #3a3a00; --surface-2: #444400;
  --text: #fff200; --text-muted: #d4cc00; --text-dim: #888500;
  --border: #555500; --accent: #fff200; --accent-2: #ffeb3b;
  --silver: #dddd88; --platinum: #aaaa66;
  --palladium: #ffeb3b; /* K27: filled — absent in original */
  --total-bg: #0a0a00; --total-text: #fff200; --total-meta: #d4cc00;
  --pos: #aaff66; --neg: #ff3333; --warn: #ffaa00;
  --tag-bg: #444400; --tag-text: #fff200; --row-border: #555500;
  --header-grad: linear-gradient(135deg, #fff200, #ffaa00);
  --header-text: #0a0a00; --pie-border: #3a3a00;
  --shadow: 0 0 8px rgba(255,242,0,0.2); --shadow-lg: 0 0 16px rgba(255,242,0,0.3);
  --soft-grad: linear-gradient(135deg, #2a2a00, #3a3a00); --feed-grad: #2a2a00; --feed-border: #fff200;
}
[data-theme="nasa"] {
  --bg: #0c1320; --bg-soft: #131b2c; --surface: #1a2238; --surface-2: #232c44;
  --text: #e8eaf2; --text-muted: #9aa3b8; --text-dim: #5e6a85;
  --border: #2c3654; --accent: #ff5f00; --accent-2: #ff8800;
  --silver: #c8ccd6; --platinum: #88aac0;
  --total-bg: #060a14; --total-text: #ff5f00; --total-meta: #ffaa66;
  --pos: #5eea98; --neg: #ff6677; --warn: #ffaa33;
  --tag-bg: #232c44; --tag-text: #ff5f00; --row-border: #2c3654;
  --header-grad: linear-gradient(135deg, #1a2238, #ff5f00);
  --header-text: #ffffff; --pie-border: #1a2238;
  --shadow: 0 2px 8px rgba(0,0,0,0.4); --shadow-lg: 0 4px 16px rgba(255,95,0,0.18);
  --soft-grad: linear-gradient(135deg, #131b2c, #1a2238); --feed-grad: #131b2c; --feed-border: #ff5f00;
}

/* ===== GAMES / ARCADE ===== */
[data-theme="pacman"] {
  --bg: #000000; --bg-soft: #0a0a0a; --surface: #0f0f1c; --surface-2: #181830;
  --text: #ffffff; --text-muted: #b8b8d8; --text-dim: #6a6a8a;
  --border: #2121de; --accent: #fff700; --accent-2: #ffcc00;
  --silver: #ffb8de; --platinum: #00ffff;
  --total-bg: #000000; --total-text: #fff700; --total-meta: #b8b8d8;
  --pos: #00ff66; --neg: #ff0044; --warn: #ff8800;
  --tag-bg: #181830; --tag-text: #fff700; --row-border: #2121de;
  --header-grad: linear-gradient(135deg, #2121de, #fff700);
  --header-text: #000000; --pie-border: #0f0f1c;
  --shadow: 0 2px 6px rgba(0,0,0,0.5); --shadow-lg: 0 4px 14px rgba(33,33,222,0.3);
  --soft-grad: linear-gradient(135deg, #0a0a0a, #0f0f1c); --feed-grad: #0a0a0a; --feed-border: #fff700;
}
[data-theme="nes"] {
  --bg: #d4d4d4; --bg-soft: #e8e8e8; --surface: #ffffff; --surface-2: #f4f4f4;
  --text: #000000; --text-muted: #444444; --text-dim: #888888;
  --border: #b8b8b8; --accent: #d40000; --accent-2: #0058f8;
  --silver: #888888; --platinum: #6a6a6a;
  --palladium: #0058f8; /* K27: filled — absent in original */
  --total-bg: #000000; --total-text: #ffffff; --total-meta: #d4d4d4;
  --pos: #008800; --neg: #d40000; --warn: #f8a800;
  --tag-bg: #d4d4d4; --tag-text: #d40000; --row-border: #b8b8b8;
  --header-grad: linear-gradient(135deg, #d40000, #0058f8);
  --header-text: #ffffff; --pie-border: #ffffff;
  --shadow: 0 1px 0 #888; --shadow-lg: 0 2px 0 #888;
  --soft-grad: linear-gradient(135deg, #e8e8e8, #ffffff); --feed-grad: #e8e8e8; --feed-border: #d40000;
}
[data-theme="gameboy"] {
  --bg: #9bbc0f; --bg-soft: #8bac0f; --surface: #8bac0f; --surface-2: #9bbc0f;
  --text: #0f380f; --text-muted: #306230; --text-dim: #4d7c4d;
  --border: #306230; --accent: #0f380f; --accent-2: #306230;
  --silver: #4d7c4d; --platinum: #306230;
  --total-bg: #0f380f; --total-text: #9bbc0f; --total-meta: #8bac0f;
  --pos: #0f380f; --neg: #642000; --warn: #644a00;
  --tag-bg: #8bac0f; --tag-text: #0f380f; --row-border: #306230;
  --header-grad: linear-gradient(135deg, #306230, #9bbc0f);
  --header-text: #0f380f; --pie-border: #8bac0f;
  --shadow: 0 1px 0 #306230; --shadow-lg: 0 2px 0 #306230;
  --soft-grad: linear-gradient(135deg, #8bac0f, #9bbc0f); --feed-grad: #8bac0f; --feed-border: #0f380f;
}
[data-theme="minecraft"] {
  --bg: #5d3a1a; --bg-soft: #6d4a2a; --surface: #7a5530; --surface-2: #8a6238;
  --text: #f4ead5; --text-muted: #d4c098; --text-dim: #a89072;
  --border: #4a2e15; --accent: #5cb85c; --accent-2: #4a9a4a;
  --silver: #c8c0a8; --platinum: #888070;
  --palladium: #4a9a4a; /* K27: filled — absent in original */
  --total-bg: #3a2410; --total-text: #5cb85c; --total-meta: #d4c098;
  --pos: #88ff88; --neg: #cc4444; --warn: #ffaa33;
  --tag-bg: #8a6238; --tag-text: #5cb85c; --row-border: #4a2e15;
  --header-grad: linear-gradient(135deg, #5d3a1a, #5cb85c);
  --header-text: #f4ead5; --pie-border: #7a5530;
  --shadow: 0 2px 0 #4a2e15; --shadow-lg: 0 4px 0 #4a2e15;
  --soft-grad: linear-gradient(135deg, #6d4a2a, #7a5530); --feed-grad: #6d4a2a; --feed-border: #5cb85c;
}
[data-theme="sonic"] {
  --bg: #00478f; --bg-soft: #0058a8; --surface: #0066cc; --surface-2: #0077dd;
  --text: #ffffff; --text-muted: #b8d4f0; --text-dim: #88a8c8;
  --border: #003a72; --accent: #ffd700; --accent-2: #ff8800;
  --silver: #c8dcf0; --platinum: #88a8c8;
  --total-bg: #002a52; --total-text: #ffd700; --total-meta: #b8d4f0;
  --pos: #88ff88; --neg: #ff4466; --warn: #ffaa00;
  --tag-bg: #0077dd; --tag-text: #ffd700; --row-border: #003a72;
  --header-grad: linear-gradient(135deg, #0066cc, #ffd700);
  --header-text: #002a52; --pie-border: #0066cc;
  --shadow: 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 4px 14px rgba(255,215,0,0.3);
  --soft-grad: linear-gradient(135deg, #0058a8, #0066cc); --feed-grad: #0058a8; --feed-border: #ffd700;
}
[data-theme="mario"] {
  --bg: #5c94fc; --bg-soft: #7aa8ff; --surface: #93b8ff; --surface-2: #a8c5ff;
  --text: #ffffff; --text-muted: #003366; --text-dim: #1a4d80;
  --border: #3a7adc; --accent: #e52521; --accent-2: #c01510;
  --silver: #cce0ff; --platinum: #88aacc;
  --palladium: #c01510; /* K27: filled — absent in original */
  --total-bg: #002255; --total-text: #ffffff; --total-meta: #cce0ff;
  --pos: #44b455; --neg: #e52521; --warn: #ffcc00;
  --tag-bg: #a8c5ff; --tag-text: #e52521; --row-border: #3a7adc;
  --header-grad: linear-gradient(135deg, #e52521, #ffcc00);
  --header-text: #002255; --pie-border: #93b8ff;
  --shadow: 0 1px 0 #3a7adc; --shadow-lg: 0 2px 0 #3a7adc;
  --soft-grad: linear-gradient(135deg, #7aa8ff, #93b8ff); --feed-grad: #7aa8ff; --feed-border: #e52521;
}

/* ===== FASHION / PLAYFUL ===== */
[data-theme="barbie"] {
  --bg: #ffd1e8; --bg-soft: #ffb6d9; --surface: #ffc4e0; --surface-2: #ffd6e8;
  --text: #2a0033; --text-muted: #5a1a4a; --text-dim: #8a4a78;
  --border: #ff8ab8; --accent: #ff1493; --accent-2: #c8106f;
  --silver: #e8b8d4; --platinum: #c888a8;
  --total-bg: #4a0a2c; --total-text: #ff8ad4; --total-meta: #ffc4e0;
  --pos: #00aa66; --neg: #cc0044; --warn: #cc6600;
  --tag-bg: #ffb6d9; --tag-text: #c8106f; --row-border: #ff8ab8;
  --header-grad: linear-gradient(135deg, #ff1493, #ffb6d9);
  --header-text: #ffffff; --pie-border: #ffc4e0;
  --shadow: 0 1px 4px rgba(255,20,147,0.15); --shadow-lg: 0 2px 12px rgba(255,20,147,0.22);
  --soft-grad: linear-gradient(135deg, #ffb6d9, #ffc4e0); --feed-grad: #ffb6d9; --feed-border: #ff1493;
}
[data-theme="y2k"] {
  --bg: #c0c8d0; --bg-soft: #d0d8e0; --surface: #e0e4ec; --surface-2: #ecf0f4;
  --text: #1a1a2e; --text-muted: #4a4a6a; --text-dim: #7a7a9a;
  --border: #a8b0c0; --accent: #ff66cc; --accent-2: #00ccff;
  --silver: #e0e4ec; --platinum: #a8b0c0;
  --palladium: #00ccff; /* K27: filled — absent in original */
  --total-bg: #1a1a2e; --total-text: #ff66cc; --total-meta: #c0c8d0;
  --pos: #00cc88; --neg: #ff4488; --warn: #ffaa44;
  --tag-bg: #e0e4ec; --tag-text: #ff66cc; --row-border: #a8b0c0;
  --header-grad: linear-gradient(135deg, #ff66cc, #00ccff);
  --header-text: #1a1a2e; --pie-border: #e0e4ec;
  --shadow: 0 1px 6px rgba(0,204,255,0.2); --shadow-lg: 0 2px 14px rgba(255,102,204,0.25);
  --soft-grad: linear-gradient(135deg, #d0d8e0, #e0e4ec); --feed-grad: #d0d8e0; --feed-border: #ff66cc;
}
[data-theme="cottage"] {
  --bg: #f5e6d3; --bg-soft: #f9efdc; --surface: #fdf2e9; --surface-2: #fbeadb;
  --text: #3a2a20; --text-muted: #6a5440; --text-dim: #9a8470;
  --border: #e0c8a8; --accent: #c19978; --accent-2: #a07a5c;
  --silver: #d4c4b0; --platinum: #a89478;
  --total-bg: #4a3424; --total-text: #f5e6d3; --total-meta: #d4c4b0;
  --pos: #6a9a4a; --neg: #b04848; --warn: #c89630;
  --tag-bg: #fbeadb; --tag-text: #a07a5c; --row-border: #e0c8a8;
  --header-grad: linear-gradient(135deg, #c19978, #f5e6d3);
  --header-text: #3a2a20; --pie-border: #fdf2e9;
  --shadow: 0 1px 3px rgba(150,120,90,0.1); --shadow-lg: 0 2px 8px rgba(150,120,90,0.15);
  --soft-grad: linear-gradient(135deg, #f9efdc, #fdf2e9); --feed-grad: #f9efdc; --feed-border: #c19978;
}

/* ===== CARTOON / GOOFY ===== */
[data-theme="satmorn"] {
  --bg: #ffe8a8; --bg-soft: #fff0c4; --surface: #fff8dc; --surface-2: #fff3c0;
  --text: #2a1a00; --text-muted: #5a3a10; --text-dim: #8a6a30;
  --border: #d4ac4c; --accent: #ff5722; --accent-2: #e040fb;
  --silver: #d4c898; --platinum: #ac9c5c;
  --total-bg: #2a1a00; --total-text: #ffe8a8; --total-meta: #fff0c4;
  --pos: #4caf50; --neg: #f44336; --warn: #ff9800;
  --tag-bg: #fff3c0; --tag-text: #ff5722; --row-border: #d4ac4c;
  --header-grad: linear-gradient(135deg, #ff5722, #ffd54f);
  --header-text: #2a1a00; --pie-border: #fff8dc;
  --shadow: 0 1px 0 #c89630; --shadow-lg: 0 2px 0 #c89630;
  --soft-grad: linear-gradient(135deg, #fff0c4, #fff8dc); --feed-grad: #fff0c4; --feed-border: #ff5722;
}
[data-theme="crayola"] {
  --bg: #1a1a1a; --bg-soft: #2a2a2a; --surface: #ffffff; --surface-2: #f4f4f4;
  --text: #1a1a1a; --text-muted: #444444; --text-dim: #888888;
  --border: #e0e0e0; --accent: #e91e63; --accent-2: #2196f3;
  --silver: #b0b0b0; --platinum: #707070;
  --palladium: #2196f3; /* K27: filled — absent in original */
  --total-bg: #1a1a1a; --total-text: #ffeb3b; --total-meta: #f4f4f4;
  --pos: #4caf50; --neg: #f44336; --warn: #ff9800;
  --tag-bg: #ffffff; --tag-text: #e91e63; --row-border: #e0e0e0;
  --header-grad: linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0);
  --header-text: #ffffff; --pie-border: #ffffff;
  --shadow: 0 1px 4px rgba(0,0,0,0.1); --shadow-lg: 0 2px 12px rgba(0,0,0,0.15);
  --soft-grad: linear-gradient(135deg, #f4f4f4, #ffffff); --feed-grad: #f4f4f4; --feed-border: #e91e63;
}

/* ===== GRADIENT / OMBRE (additions) ===== */
[data-theme="aurora"] {
  --bg: #0d1b2a; --bg-soft: #142436; --surface: #1b2638; --surface-2: #243046;
  --text: #e0e1dd; --text-muted: #a0c4b8; --text-dim: #6a8a80;
  --border: #2a3a52; --accent: #5fffbe; --accent-2: #ff66cc;
  --silver: #c8d4cc; --platinum: #88aaa0;
  --total-bg: #050d18; --total-text: #5fffbe; --total-meta: #ff88dd;
  --pos: #5fffbe; --neg: #ff5588; --warn: #ffcc55;
  --tag-bg: #243046; --tag-text: #5fffbe; --row-border: #2a3a52;
  --header-grad: linear-gradient(135deg, #5fffbe, #ff66cc);
  --header-text: #0d1b2a; --pie-border: #1b2638;
  --shadow: 0 2px 8px rgba(95,255,190,0.12); --shadow-lg: 0 4px 16px rgba(255,102,204,0.18);
  --soft-grad: linear-gradient(135deg, #142436, #1b2638); --feed-grad: #142436; --feed-border: #5fffbe;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 16px;
  line-height: 1.4;
  transition: background 0.2s, color 0.2s;
}

body[data-theme="newsprint"], [data-theme="newsprint"] {
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* ============================================================
   OPTIONAL BASE LAYER  ·  delete this block if the host page
   already paints its own background / text colours.
   This is the minimum needed for a brand-new page to visibly
   respond to a theme change.
   ============================================================ */
body[data-theme] {
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
body[data-theme="newsprint"] { font-family: Georgia, 'Times New Roman', serif; }

/* ================= THEME PICKER UI ================= */
/* Theme picker: always black box, regardless of active theme · expandable · sticky */
details.k27-theme-bar {
  background: #0a0a0a;
  color: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  position: sticky;
  top: 0;
  z-index: 50;
  border: 1px solid #1f1f1f;
  overflow: hidden;
}
details.k27-theme-bar > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  transition: background 0.12s;
}
details.k27-theme-bar > summary::-webkit-details-marker { display: none; }
details.k27-theme-bar > summary:hover { background: #161616; }
details.k27-theme-bar[open] > summary { border-bottom: 1px solid #2a2a2a; }
details.k27-theme-bar > summary .title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
details.k27-theme-bar > summary {
  flex-wrap: nowrap;
}
details.k27-theme-bar > summary .sub {
  white-space: nowrap;
}
details.k27-theme-bar > summary .sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #888;
  font-weight: 700;
  margin-left: 4px;
}
details.k27-theme-bar > summary .active-theme {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  background: #161616;
  border: 1px solid #2a2a2a;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.4px;
}
details.k27-theme-bar > summary .chev {
  margin-left: auto;
  font-size: 11px;
  color: #888;
  transition: transform 0.18s;
}
details.k27-theme-bar[open] > summary .chev { transform: rotate(180deg); color: #ffd700; }
details.k27-theme-bar > summary .preview-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}
details.k27-theme-bar > summary .preview-dots .pd {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
}
.k27-theme-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  padding: 8px 10px;
}
/* Nested theme categories inside the picker */
.k27-theme-cats { padding: 8px; display: grid; gap: 5px; }
details.k27-theme-cat {
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  overflow: hidden;
}
details.k27-theme-cat > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #ffd700;
  background: #141414;
  user-select: none;
  transition: background 0.12s;
}
details.k27-theme-cat > summary::-webkit-details-marker { display: none; }
details.k27-theme-cat > summary:hover { background: #1f1f1f; }
details.k27-theme-cat > summary .cat-chev {
  font-size: 9px; color: #888; width: 10px;
  transition: transform 0.18s; flex-shrink: 0;
}
details.k27-theme-cat[open] > summary .cat-chev { transform: rotate(90deg); color: #ffd700; }
details.k27-theme-cat > summary .cat-name { flex: 1; white-space: nowrap; }
details.k27-theme-cat > summary .cat-count {
  font-size: 9px; color: #888;
  background: #0a0a0a; padding: 2px 7px;
  border-radius: 10px; letter-spacing: 0; font-weight: 700;
}
.k27-theme-btn {
  background: #161616;
  color: #f0f0f0;
  border: 1px solid #2a2a2a;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.k27-theme-btn:hover {
  transform: translateY(-1px);
  border-color: #555;
  background: #1f1f1f;
}
.k27-theme-btn.active {
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #ffd700;
}
.k27-theme-btn .swatches {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.k27-theme-btn .sw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: inline-block;
}
.k27-theme-btn.active .sw { border-color: rgba(0,0,0,0.3); }
.k27-theme-btn .nm { flex: 1; }

/* === Compact picker (shrinks expanded vertical footprint) === */
/* === Compact theme picker === */
/* Tighter category spacing + smaller theme button grid so expanded vertical footprint shrinks */
.k27-theme-cats { padding: 6px; gap: 3px; }
details.k27-theme-cat > summary { padding: 6px 10px; min-height: 34px; font-size: 9px; letter-spacing: 1.2px; }
details.k27-theme-cat > summary .cat-count { padding: 1px 6px; font-size: 8px; }
.k27-theme-rows {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 4px; padding: 6px;
}
.k27-theme-btn { padding: 5px 8px; font-size: 10px; min-height: 32px; }

/* === Mobile: 44px minimum tap targets === */
@media (max-width: 768px) {
  .k27-theme-btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }
  details.k27-theme-bar > summary {
    min-height: 48px;
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  details.k27-theme-bar > summary .title {
    font-size: 14px;
    flex: 0 1 auto;
  }
  details.k27-theme-bar > summary .sub {
    display: none;
  }
  details.k27-theme-bar > summary .preview-dots {
    display: none;
  }
  details.k27-theme-bar > summary .active-theme {
    font-size: 13px;
    padding: 5px 12px;
  }
  details.k27-theme-bar > summary .chev {
    font-size: 14px;
  }
  .k27-theme-rows {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
  }
  details.k27-theme-cat > summary {
    min-height: 44px;
    padding: 12px;
    font-size: 11px;
  }
  details.k27-theme-cat > summary .cat-name { font-size: 11px; }

}

/* ============================================================
   v1.1 · PINNED ONE-TAP SWATCH STRIP
   Replaces the collapsed <details> drill-down. The strip is
   always visible, always one tap from any theme, and sticks to
   the top so the page can be re-themed while scrolled down.
   The v1.0 `details.k27-theme-bar` rules above are retained so
   pages still running the old markup keep working.
   ============================================================ */

/* container — always a black control surface, whatever the theme.
   NOTE: the sticky positioning is applied by k27-theme.js to the MOUNT
   element, not here. position:sticky is clamped to the parent's box, and
   the mount is exactly as tall as this bar, so a sticky bar nested inside
   it can never travel — it just scrolls away with the page. */
div.k27-theme-bar {
  position: static;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  margin: 0 0 10px;
  padding: 8px 0 2px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

/* --- header row: title + current theme --- */
.k27-tb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 7px;
  flex-wrap: nowrap;
}
.k27-tb-head .title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
.k27-tb-head .active-theme {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  background: #161616;
  border: 1px solid #2a2a2a;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.k27-tb-head .preview-dots { display: inline-flex; gap: 2px; flex-shrink: 0; }
.k27-tb-head .preview-dots .pd {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
}

/* --- category filter row (optional, demoted to a filter) --- */
.k27-tb-cats {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 0 12px 7px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.k27-tb-cats::-webkit-scrollbar { display: none; }
.k27-cat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #141414;
  color: #9a9a9a;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 7px 13px;
  min-height: 34px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.k27-cat-chip:hover { background: #1f1f1f; color: #ddd; }
.k27-cat-chip.on {
  background: #ffd700;
  color: #0a0a0a;
  border-color: #ffd700;
}
.k27-cat-chip .cat-count {
  font-size: 9px;
  font-weight: 700;
  background: rgba(0,0,0,0.35);
  color: inherit;
  padding: 1px 6px;
  border-radius: 8px;
  opacity: 0.75;
}
.k27-cat-chip.on .cat-count { background: rgba(0,0,0,0.18); }

/* --- the swatch strip: every theme one tap away --- */
.k27-tb-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 12px 10px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.k27-tb-strip::-webkit-scrollbar { height: 4px; }
.k27-tb-strip::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.k27-tb-strip::-webkit-scrollbar-track { background: transparent; }

div.k27-theme-bar .k27-theme-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #161616;
  color: #e8e8e8;
  border: 2px solid #2a2a2a;
  border-radius: 10px;
  padding: 8px 9px;
  min-width: 74px;
  min-height: 62px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
div.k27-theme-bar .k27-theme-btn:hover {
  border-color: #666;
  background: #1f1f1f;
  transform: translateY(-1px);
}
div.k27-theme-bar .k27-theme-btn.active {
  border-color: #ffd700;
  background: #ffffff;
  color: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(255,215,0,0.35);
}
div.k27-theme-bar .k27-theme-btn .swatches {
  display: inline-flex;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.22);
  flex-shrink: 0;
}
div.k27-theme-bar .k27-theme-btn.active .swatches { border-color: rgba(0,0,0,0.35); }
div.k27-theme-bar .k27-theme-btn .sw {
  width: 17px;
  height: 17px;
  border-radius: 0;
  border: none;
  display: block;
}
div.k27-theme-bar .k27-theme-btn .nm {
  display: block;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
  font-weight: 700;
}
.k27-theme-btn.k27-hide { display: none !important; }

/* --- mobile: 44px+ tap targets, bigger swatches --- */
@media (max-width: 768px) {
  div.k27-theme-bar { margin-bottom: 8px; }
  .k27-tb-head { padding: 0 10px 7px; }
  .k27-tb-head .title { font-size: 13px; }
  .k27-tb-head .preview-dots { display: none; }
  .k27-tb-cats { padding: 0 10px 8px; gap: 6px; }
  .k27-cat-chip { min-height: 44px; padding: 10px 15px; font-size: 12px; }
  .k27-tb-strip { padding: 2px 10px 12px; gap: 7px; }
  div.k27-theme-bar .k27-theme-btn {
    min-width: 80px;
    min-height: 70px;
    padding: 9px;
    font-size: 11px;
  }
  div.k27-theme-bar .k27-theme-btn .sw { width: 20px; height: 20px; }
  div.k27-theme-bar .k27-theme-btn .nm { max-width: 74px; }
}