/* Light and dark for every look (owner's request: keep the light / dark switch on every look).
   looks.css draws each look in its usual mode: Counter, Thermal, Playmat, Minimal, Cute, Super detailed and Anime
   light, Binder and High definition dark (Classic and Showcase already have both). This file is the other mode of
   each, on <html data-theme>: the page's switch (the price page's sun / moon button, Settings → App look → Light /
   Dark). Picking a look starts it in its usual mode (KMSLook.set in profile-boot.js). The extra [data-theme] makes
   every rule here win over the same rule in looks.css. Loaded after looks.css (app/manifest.json). */

/* ======================= Counter, dark ======================= */
:root:root[data-look="counter"][data-theme="dark"] {
  --kms-black: #050507; --bg-page: #111114; --bg-card: #1b1b20; --surface: #1b1b20;
  --border-color: #2e2e36; --line-soft: #25252c; --card-shadow: transparent;
  --text-main: #f1f1f5; --text-sub: #a2a2ae; --band-bg: #111114; --band-border: #2e2e36;
  --btn-alt-bg: #f1f1f5; --btn-alt-fg: #18181d; --btn-outline-bg: transparent; --error-color: #ff8a8a; --logo-ring: #1b1b20;
  --look-soft: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="counter"][data-theme="dark"] {
    --bg-page: color-mix(in srgb, var(--kms-red) 5%, #101013);
    --look-soft: color-mix(in srgb, var(--kms-red) 22%, #1b1b20);
  }
}
:root[data-look="counter"][data-theme="dark"] .brand,
:root[data-look="counter"][data-theme="dark"] .app-panel-header,
:root[data-look="counter"][data-theme="dark"] .app-tabs { background: var(--bg-card); }
:root[data-look="counter"][data-theme="dark"] .brand-logo { background: #fff; box-shadow: 0 0 0 1px var(--border-color), 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
:root[data-look="counter"][data-theme="dark"] .card { background: var(--bg-card); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7); }
:root[data-look="counter"][data-theme="dark"] .cart-bar { background: var(--bg-card); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4); }
:root[data-look="counter"][data-theme="dark"] .app-tab .app-count-bubble { border-color: var(--bg-card); }
:root[data-look="counter"][data-theme="dark"] .app-card { box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.7); }
:root[data-look="counter"][data-theme="dark"] .app-modal-overlay { background: rgba(0, 0, 0, 0.6); }

/* ======================= Binder, light ======================= */
:root:root[data-look="binder"][data-theme="light"] {
  --kms-black: #16161c; --bg-page: #f3f2f6; --bg-card: #ffffff; --surface: #ffffff;
  --border-color: #e0dfe7; --line-soft: #ebeaf0; --card-shadow: rgba(30, 20, 40, 0.25);
  --text-main: #16161c; --text-sub: #66667a; --band-bg: #ffffff; --band-border: #e0dfe7;
  --btn-alt-bg: #16161c; --btn-alt-fg: #ffffff; --btn-outline-bg: #ffffff; --error-color: #b3261e; --logo-ring: #f3f2f6;
  --look-hi: #c41414; --look-glow: rgba(227, 21, 21, 0.25);
  --look-glass: rgba(255, 255, 255, 0.75); --look-edge: rgba(20, 20, 40, 0.1);
  color-scheme: light;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="binder"][data-theme="light"] {
    --bg-page: color-mix(in srgb, var(--kms-red) 6%, #f5f5f8);
    --border-color: color-mix(in srgb, var(--kms-red) 10%, #e2e2e8);
    --look-hi: color-mix(in srgb, var(--kms-red) 80%, #000000);
    --look-glow: color-mix(in srgb, var(--kms-red) 30%, transparent);
  }
}
:root[data-look="binder"][data-theme="light"] .card { box-shadow: 0 24px 40px -26px rgba(30, 20, 40, 0.35); }
:root[data-look="binder"][data-theme="light"] .card-art { box-shadow: 0 0 40px var(--look-glow), 0 14px 30px rgba(0, 0, 0, 0.25); }
:root[data-look="binder"][data-theme="light"] .cart-bar { background: rgba(255, 255, 255, 0.85); }
:root[data-look="binder"][data-theme="light"] .cart-bar-btn { color: var(--text-main); }
:root[data-look="binder"][data-theme="light"] .cart-summary-text { color: var(--text-sub); }
/* The page's price box labels are white (made for a dark box) */
:root[data-look="binder"][data-theme="light"] .price-container .label,
:root[data-look="binder"][data-theme="light"] .floor-note { color: var(--text-sub); }
:root[data-look="binder"][data-theme="light"] .cart-summary-total { color: var(--text-main); }
:root[data-look="binder"][data-theme="light"] .app-tools-btn { background: rgba(0, 0, 0, 0.05); color: var(--text-main); border-color: var(--look-edge); }
:root[data-look="binder"][data-theme="light"] .app-modal-overlay { background: rgba(20, 20, 30, 0.4); }

/* ======================= Thermal, dark (a receipt in negative) ======================= */
:root:root[data-look="thermal"][data-theme="dark"] {
  --kms-black: #ecebe5; --bg-page: #141413; --bg-card: #1e1e1c; --surface: #1e1e1c;
  --border-color: #ecebe5; --line-soft: #34342f; --card-shadow: #ecebe5;
  --text-main: #ecebe5; --text-sub: #a3a39a; --band-bg: #1e1e1c; --band-border: #ecebe5;
  --btn-alt-bg: #1e1e1c; --btn-alt-fg: #ecebe5; --btn-outline-bg: #1e1e1c; --error-color: #ff8a8a; --logo-ring: #ecebe5;
  color-scheme: dark;
}
:root[data-look="thermal"][data-theme="dark"] .price-container,
:root[data-look="thermal"][data-theme="dark"] .cart-bar { background: var(--bg-card); }
:root[data-look="thermal"][data-theme="dark"] .btn-cart { color: #141413; }
:root[data-look="thermal"][data-theme="dark"] .cart-bar-btn { background: var(--bg-card); color: var(--text-main); }
:root[data-look="thermal"][data-theme="dark"] .cart-bar-btn-scan { background: var(--kms-black); color: #141413; }
:root[data-look="thermal"][data-theme="dark"] .app-btn-primary { color: #141413 !important; }
:root[data-look="thermal"][data-theme="dark"] .app-btn-primary .app-count-bubble { background: #141413; color: #ecebe5; }
:root[data-look="thermal"][data-theme="dark"] .app-list-row { border-bottom-color: #45453f; }
/* The round buttons on the price page (Staff Tools, light / dark) are white with a "black" icon */
:root[data-look="thermal"][data-theme="dark"] .theme-toggle { color: #141413; border-color: #ecebe5; }
:root[data-look="thermal"][data-theme="dark"] .app-count-bubble,
:root[data-look="thermal"][data-theme="dark"] .app-tools-badge { background: var(--kms-red); color: #fff; }

/* ======================= Playmat, dark (a dark felt mat) ======================= */
:root:root[data-look="playmat"][data-theme="dark"] {
  --look-ink: #050507; --look-face: #2a2a33;
  --kms-black: #050507; --bg-page: #1a1a20; --bg-card: #2a2a33; --surface: #2a2a33;
  --border-color: #050507; --line-soft: rgba(255, 255, 255, 0.08); --card-shadow: #050507;
  --text-main: #f0f0f4; --text-sub: #a8a8b4; --band-bg: #2a2a33; --band-border: #050507;
  --btn-alt-bg: #2a2a33; --btn-alt-fg: #f0f0f4; --btn-outline-bg: #2a2a33; --error-color: #ff8a8a; --logo-ring: #050507;
  --look-soft: rgba(255, 255, 255, 0.1); --look-zone: rgba(255, 255, 255, 0.22);
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="playmat"][data-theme="dark"] {
    --bg-page: color-mix(in srgb, var(--kms-red) 16%, #16161b);
    --look-face: color-mix(in srgb, var(--kms-red) 8%, #2a2a33);
    --bg-card: var(--look-face); --surface: var(--look-face); --band-bg: var(--look-face);
    --btn-alt-bg: var(--look-face); --btn-outline-bg: var(--look-face);
    --text-sub: color-mix(in srgb, var(--kms-red) 15%, #a8a8b4);
    --look-soft: color-mix(in srgb, var(--kms-red) 30%, #2a2a33);
    --look-zone: color-mix(in srgb, var(--kms-red) 35%, rgba(255, 255, 255, 0.25));
  }
}
:root[data-look="playmat"][data-theme="dark"] body, :root[data-look="playmat"][data-theme="dark"] .app-panel {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
}
:root[data-look="playmat"][data-theme="dark"] .card { background: rgba(255, 255, 255, 0.04); }
:root[data-look="playmat"][data-theme="dark"] .app-card { background: rgba(255, 255, 255, 0.05); }
:root[data-look="playmat"][data-theme="dark"] .badge { background: var(--look-face); color: var(--text-main); }
:root[data-look="playmat"][data-theme="dark"] .price-container,
:root[data-look="playmat"][data-theme="dark"] .condition-btn,
:root[data-look="playmat"][data-theme="dark"] .cart-bar,
:root[data-look="playmat"][data-theme="dark"] .app-tabs,
:root[data-look="playmat"][data-theme="dark"] .app-btn,
:root[data-look="playmat"][data-theme="dark"] .app-back-btn,
:root[data-look="playmat"][data-theme="dark"] .app-input { background: var(--look-face); }
:root[data-look="playmat"][data-theme="dark"] .condition-btn.active { background: var(--kms-red); color: #fff; }
:root[data-look="playmat"][data-theme="dark"] .app-btn-primary { background: var(--kms-red) !important; }
:root[data-look="playmat"][data-theme="dark"] .app-panel-header .app-price-btn { background: var(--look-face); }
:root[data-look="playmat"][data-theme="dark"] .app-tab .app-count-bubble { border-color: var(--look-face); }
:root[data-look="playmat"][data-theme="dark"] .btn-scan { background: var(--look-face); color: var(--text-main); }

/* ======================= Minimal, dark ======================= */
:root:root[data-look="minimal"][data-theme="dark"] {
  --kms-black: #000000; --bg-page: #0e0e0e; --bg-card: #0e0e0e; --surface: #0e0e0e;
  --border-color: #2c2c2c; --line-soft: #202020; --card-shadow: transparent;
  --text-main: #f2f2f2; --text-sub: #8c8c8c; --band-bg: #0e0e0e; --band-border: #2c2c2c;
  --btn-alt-bg: #f2f2f2; --btn-alt-fg: #0e0e0e; --btn-outline-bg: #0e0e0e; --error-color: #ff8a8a; --logo-ring: #0e0e0e;
  color-scheme: dark;
}
:root[data-look="minimal"][data-theme="dark"] .brand,
:root[data-look="minimal"][data-theme="dark"] .app-panel-header,
:root[data-look="minimal"][data-theme="dark"] .app-tabs { background: #0e0e0e; color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .card-art { box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.9); }
:root[data-look="minimal"][data-theme="dark"] .price-container { color: #f2f2f2; border-top-color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .price,
:root[data-look="minimal"][data-theme="dark"] .cart-summary-total,
:root[data-look="minimal"][data-theme="dark"] .app-row-price { color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .condition-btn { color: #6f6f6f; }
:root[data-look="minimal"][data-theme="dark"] .condition-btn.active { color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .btn { border-color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .btn-cart { background: #f2f2f2; color: #0e0e0e; }
:root[data-look="minimal"][data-theme="dark"] .btn-scan { background: #0e0e0e; color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .btn-link { border-color: var(--border-color); }
:root[data-look="minimal"][data-theme="dark"] .cart-bar { background: #0e0e0e; border-top-color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .cart-bar-btn { background: #0e0e0e; color: #f2f2f2; border-color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .cart-bar-btn-scan { background: #f2f2f2; color: #0e0e0e; }
:root[data-look="minimal"][data-theme="dark"] .app-panel-header .app-price-btn { color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .app-tab { color: #5c5c5c; }
:root[data-look="minimal"][data-theme="dark"] .app-tab.active,
:root[data-look="minimal"][data-theme="dark"] .app-tab.active .app-tab-icon { color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .app-btn-primary { background: #f2f2f2 !important; border-color: #f2f2f2 !important; color: #0e0e0e !important; }
:root[data-look="minimal"][data-theme="dark"] .app-btn-primary .app-count-bubble { background: #0e0e0e; color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .app-input:focus { border-color: #f2f2f2; }
:root[data-look="minimal"][data-theme="dark"] .app-modal { background: #151515; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6); }
:root[data-look="minimal"][data-theme="dark"] .app-modal-overlay { background: rgba(0, 0, 0, 0.7); }

/* ======================= Cute, dark (a night sky in the shop's color) ======================= */
:root:root[data-look="cute"][data-theme="dark"] {
  --look-ink: #fbeef3; --look-soft: #3a2a33; --look-face: #2a2026;
  --kms-black: #0d090b; --bg-page: #1a1418; --bg-card: #2a2026; --surface: #2a2026;
  --border-color: #4a3540; --line-soft: #34282f; --card-shadow: #0d090b;
  --text-main: #fbeef3; --text-sub: #c3a9b6; --band-bg: #2a2026; --band-border: #4a3540;
  --btn-alt-bg: #2a2026; --btn-alt-fg: #fbeef3; --btn-outline-bg: #2a2026; --error-color: #ff9a9a; --logo-ring: #2a2026;
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="cute"][data-theme="dark"] {
    --bg-page: color-mix(in srgb, var(--kms-red) 12%, #151116);
    --look-face: color-mix(in srgb, var(--kms-red) 12%, #241d22);
    --bg-card: var(--look-face); --surface: var(--look-face); --band-bg: var(--look-face);
    --btn-alt-bg: var(--look-face); --btn-outline-bg: var(--look-face); --logo-ring: var(--look-face);
    --look-soft: color-mix(in srgb, var(--kms-red) 30%, #241d22);
    --border-color: color-mix(in srgb, var(--kms-red) 30%, #3a2e35);
    --line-soft: color-mix(in srgb, var(--kms-red) 14%, #2a2228);
    --text-sub: color-mix(in srgb, var(--kms-red) 25%, #c9b8c1);
  }
}
:root[data-look="cute"][data-theme="dark"] body, :root[data-look="cute"][data-theme="dark"] .app-panel {
  background-image: radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 60%, var(--border-color) 0 2px, transparent 3px);
}
:root[data-look="cute"][data-theme="dark"] .brand-logo,
:root[data-look="cute"][data-theme="dark"] .app-panel-header::before { border-color: var(--look-face); }
:root[data-look="cute"][data-theme="dark"] .btn-scan { background: var(--look-soft); color: var(--text-main); }
:root[data-look="cute"][data-theme="dark"] .btn-link,
:root[data-look="cute"][data-theme="dark"] .cart-bar,
:root[data-look="cute"][data-theme="dark"] .app-panel-header .app-price-btn,
:root[data-look="cute"][data-theme="dark"] .app-tabs { background: var(--look-face); color: var(--text-main); }
:root[data-look="cute"][data-theme="dark"] .app-tools-btn { border-color: var(--look-face); }
:root[data-look="cute"][data-theme="dark"] .app-tab .app-count-bubble { border-color: var(--look-face); }
:root[data-look="cute"][data-theme="dark"] .app-scan-frame { border-color: var(--look-face); }

/* ======================= High definition, light (white, hairlines, huge numbers) ======================= */
:root:root[data-look="hd"][data-theme="light"] {
  --kms-black: #000000; --bg-page: #ffffff; --bg-card: #f6f6f6; --surface: #f6f6f6;
  --border-color: #d6d6d6; --line-soft: #e8e8e8; --card-shadow: transparent;
  --text-main: #000000; --text-sub: #6b6b6b; --band-bg: #ffffff; --band-border: #d6d6d6;
  --btn-alt-bg: #000000; --btn-alt-fg: #ffffff; --btn-outline-bg: transparent; --error-color: #b3261e; --logo-ring: #ffffff;
  --look-hi: #b80e0e; --look-glow: rgba(227, 21, 21, 0.25);
  color-scheme: light;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="hd"][data-theme="light"] {
    --look-hi: color-mix(in srgb, var(--kms-red) 85%, #000000);
    --look-glow: color-mix(in srgb, var(--kms-red) 30%, transparent);
  }
}
:root[data-look="hd"][data-theme="light"] body, :root[data-look="hd"][data-theme="light"] .app-panel { background: #fff; }
:root[data-look="hd"][data-theme="light"] .brand,
:root[data-look="hd"][data-theme="light"] .app-panel-header { background: #fff; color: #000; border-bottom-color: #d6d6d6; }
:root[data-look="hd"][data-theme="light"] .brand-logo { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35); }
:root[data-look="hd"][data-theme="light"] .card { background: #fff; }
:root[data-look="hd"][data-theme="light"] .card-art { box-shadow: 0 30px 60px -24px var(--look-glow), 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
:root[data-look="hd"][data-theme="light"] .badge { border-color: #bbb; color: #444; }
:root[data-look="hd"][data-theme="light"] .price-container { border-top-color: #d6d6d6; border-bottom-color: #d6d6d6; }
:root[data-look="hd"][data-theme="light"] .floor-note { color: var(--text-sub); }
:root[data-look="hd"][data-theme="light"] .price { color: #000; background: linear-gradient(180deg, #000 35%, var(--look-hi)); -webkit-background-clip: text; background-clip: text; }
:root[data-look="hd"][data-theme="light"] .condition-btn { border-color: #ccc; color: #666; }
:root[data-look="hd"][data-theme="light"] .condition-btn.active { background: #000; color: #fff; border-color: #000; }
:root[data-look="hd"][data-theme="light"] .btn { border-color: #bbb; }
:root[data-look="hd"][data-theme="light"] .btn-cart { background: #000; color: #fff; border-color: #000; }
:root[data-look="hd"][data-theme="light"] .btn-scan { color: #000; border-color: #000; }
:root[data-look="hd"][data-theme="light"] .btn-link { border-color: #d6d6d6; }
:root[data-look="hd"][data-theme="light"] .cart-bar { background: rgba(255, 255, 255, 0.92); border-top-color: #d6d6d6; }
:root[data-look="hd"][data-theme="light"] .cart-bar-btn { color: #000; border-color: #bbb; }
:root[data-look="hd"][data-theme="light"] .cart-summary-text { color: var(--text-sub); }
:root[data-look="hd"][data-theme="light"] .cart-summary-total { color: #000; }
:root[data-look="hd"][data-theme="light"] .cart-bar-btn-scan { background: #000; color: #fff; border-color: #000; }
:root[data-look="hd"][data-theme="light"] .app-tools-btn { background: #fff; color: #000; border-color: #bbb; }
:root[data-look="hd"][data-theme="light"] .app-panel-header .app-price-btn { color: #000; border-color: #bbb; }
:root[data-look="hd"][data-theme="light"] .app-tabs { background: #fff; border-top-color: #e0e0e0; }
:root[data-look="hd"][data-theme="light"] .app-tab { color: #8a8a8a; }
:root[data-look="hd"][data-theme="light"] .app-tab.active,
:root[data-look="hd"][data-theme="light"] .app-tab.active .app-tab-icon { color: #000; }
:root[data-look="hd"][data-theme="light"] .app-tab .app-count-bubble { border-color: #fff; }
:root[data-look="hd"][data-theme="light"] .app-card { border-color: #e0e0e0; }
:root[data-look="hd"][data-theme="light"] .app-btn, :root[data-look="hd"][data-theme="light"] .app-back-btn { border-color: #bbb; }
:root[data-look="hd"][data-theme="light"] .app-btn-primary { background: #000 !important; color: #fff !important; border-color: #000 !important; }
:root[data-look="hd"][data-theme="light"] .app-btn-primary .app-count-bubble { background: #fff; color: #000; }
:root[data-look="hd"][data-theme="light"] .app-input { border-color: #ccc; }
:root[data-look="hd"][data-theme="light"] .app-input:focus { border-color: #000; }
:root[data-look="hd"][data-theme="light"] .app-row-price { color: #000; }
:root[data-look="hd"][data-theme="light"] .app-list-row { border-bottom-color: #e8e8e8; }
:root[data-look="hd"][data-theme="light"] .app-modal { border-color: #d6d6d6; }
:root[data-look="hd"][data-theme="light"] .app-scan-frame { border-color: #bbb; }

/* ======================= Super detailed, dark ======================= */
:root:root[data-look="detailed"][data-theme="dark"] {
  --kms-black: #050608; --bg-page: #0f1115; --bg-card: #191c22; --surface: #191c22;
  --border-color: #2c313a; --line-soft: #22262d; --card-shadow: transparent;
  --text-main: #e9ecf1; --text-sub: #98a1b0; --band-bg: #191c22; --band-border: #2c313a;
  --btn-alt-bg: #e9ecf1; --btn-alt-fg: #191c22; --btn-outline-bg: transparent; --error-color: #ff8a8a; --logo-ring: #191c22;
  --look-soft: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="detailed"][data-theme="dark"] { --look-soft: color-mix(in srgb, var(--kms-red) 22%, #191c22); }
}
:root[data-look="detailed"][data-theme="dark"] .brand,
:root[data-look="detailed"][data-theme="dark"] .cart-bar,
:root[data-look="detailed"][data-theme="dark"] .app-panel-header,
:root[data-look="detailed"][data-theme="dark"] .app-tabs { background: var(--bg-card); }
:root[data-look="detailed"][data-theme="dark"] .price-container { background: #15181d; }
/* (.btn-scan: the light "alt" button, as in Classic dark) */
:root[data-look="detailed"][data-theme="dark"] .btn-scan { border-color: var(--btn-alt-bg); }
:root[data-look="detailed"][data-theme="dark"] .app-tab .app-count-bubble { border-color: var(--bg-card); }
:root[data-look="detailed"][data-theme="dark"] .app-detail-log span,
:root[data-look="detailed"][data-theme="dark"] .app-detail-gain { color: #4cc27a; }
:root[data-look="detailed"][data-theme="dark"] .app-detail-up .app-detail-line { stroke: #4cc27a; }

/* ======================= Anime, dark (white outlines, hard shadows in the shop's color) ======================= */
:root:root[data-look="anime"][data-theme="dark"] {
  --kms-black: #000000; --bg-page: #111115; --bg-card: #1e1e24; --surface: #1e1e24;
  --border-color: #f2f2f2; --line-soft: #34343c; --card-shadow: var(--kms-red);
  --text-main: #f2f2f2; --text-sub: #b0b0ba; --band-bg: #1e1e24; --band-border: #f2f2f2;
  --btn-alt-bg: #1e1e24; --btn-alt-fg: #f2f2f2; --btn-outline-bg: #1e1e24; --error-color: #ff8a8a; --logo-ring: #f2f2f2;
  --look-dots: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root:root[data-look="anime"][data-theme="dark"] { --look-dots: color-mix(in srgb, var(--kms-red) 35%, transparent); }
}
:root[data-look="anime"][data-theme="dark"] body, :root[data-look="anime"][data-theme="dark"] .app-panel { background-color: #111115; }
:root[data-look="anime"][data-theme="dark"] .brand-logo { border-color: #f2f2f2; box-shadow: 4px 4px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .app-tools-btn { border-color: #f2f2f2; box-shadow: 3px 3px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .card { background: #1e1e24; border-color: #f2f2f2; box-shadow: 4px 4px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .card-art { border-color: #f2f2f2; box-shadow: 5px 5px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .badge { border-color: #f2f2f2; box-shadow: 3px 3px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .price-container { border-color: #f2f2f2; box-shadow: 5px 5px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .condition-btn { background: #1e1e24; border-color: #f2f2f2; color: #f2f2f2; }
:root[data-look="anime"][data-theme="dark"] .condition-btn.active { background: var(--kms-red); color: #fff; border-color: #f2f2f2; box-shadow: 3px 3px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .btn { border-color: #f2f2f2; box-shadow: 4px 4px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .btn-cart { box-shadow: 4px 4px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .btn:active { box-shadow: 2px 2px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .btn-scan { background: #1e1e24; color: #f2f2f2; border-color: #f2f2f2; }
:root[data-look="anime"][data-theme="dark"] .cart-bar { background: #000; }
:root[data-look="anime"][data-theme="dark"] .app-panel-header::before { border-color: #f2f2f2; box-shadow: 3px 3px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .app-panel-header .app-price-btn { background: #1e1e24; color: #f2f2f2; border-color: #f2f2f2; box-shadow: 3px 3px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .app-tabs { background: #000; }
:root[data-look="anime"][data-theme="dark"] .app-tab .app-count-bubble { border-color: #000; }
:root[data-look="anime"][data-theme="dark"] .app-card { background: #1e1e24; border-color: #f2f2f2; box-shadow: 4px 4px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .app-btn,
:root[data-look="anime"][data-theme="dark"] .app-back-btn { border-color: #f2f2f2; box-shadow: 3px 3px 0 var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .app-btn-primary { border-color: #f2f2f2 !important; box-shadow: 3px 3px 0 #000; }
:root[data-look="anime"][data-theme="dark"] .app-input { border-color: #f2f2f2; }
:root[data-look="anime"][data-theme="dark"] .app-input:focus { border-color: var(--kms-red); }
:root[data-look="anime"][data-theme="dark"] .app-chip { border-color: #f2f2f2; }
:root[data-look="anime"][data-theme="dark"] .app-row-price { color: #f2f2f2; }
:root[data-look="anime"][data-theme="dark"] .app-modal { border-color: #f2f2f2; }
:root[data-look="anime"][data-theme="dark"] .app-scan-frame { border-color: #f2f2f2; }