/*
 * Japanese Zen Themes
 * Visual themes inspired by Japanese aesthetics for PRO users
 *
 * STRUCTURE:
 *   1. Theme Variables
 *   2. Global Zen-Class Overrides
 *   3. Default (Neo-Brutalist) Overrides
 *   4. Wabi-Sabi (侘寂) Overrides — broken borders, imperfection
 *   5. Sumi-e (墨絵) Overrides — fog, ink wash, frosted glass
 *   6. Anime (アニメ) Overrides — gradients, sparkles, bounce
 *   7. Kabukicho (歌舞伎町) Dark Mode Overrides
 *  10. Matsuri (祭り) — Night Festival Overrides (Dark Mode)
 *  11. Shogun Castle (将軍の城) Overrides
 *  12. Yokai World (妖怪) — Spirit World Overrides (Dark Mode)
 *   8. Keyframes
 *   9. Transitions
 */

/* ==========================================================================
   1. THEME VARIABLES
   ========================================================================== */

/* --- DEFAULT (Neo-Brutalist) --- */
:root {
  --zen-bg: #FFFFFF;
  --zen-surface: #F5F5F5;
  --zen-text: #1A1A1A;
  --zen-accent: #D5442A; /* 朱色 сю-иро — киноварь ханко (= HankoStamp) */
  --zen-success: #69821B; /* 苔色 кокэ-иро — мох/матча */
  --zen-warning: #BF783A; /* 琥珀色 кохаку-иро — янтарь */
  --zen-border: #000000;

  --border-width: 3px;
  --border-radius: 0px;
  --shadow: 6px 6px 0px 0px #000000;
  --shadow-hover: 8px 8px 0px 0px #000000;
  --shadow-sm: 3px 3px 0px 0px #000000;

  /* Японский декор шелла: инертные дефолты — темы включают сами */
  --zen-seal: var(--zen-accent);   /* цвет «печати» для вермильонных деталей */
  --zen-pattern-opacity: 0;        /* сэйгайха в шелле скрыта, если тема не opted-in */
}

[data-theme="default"] { --zen-pattern-opacity: 0.04; }

/* --- WABI-SABI (侘寂) — Imperfection --- */
[data-theme="wabi_sabi"] {
  --zen-bg: #F5F3EE;
  --zen-surface: #EAE5DC;
  --zen-text: #3A3331;
  --zen-accent: #8B7355;
  --zen-success: #7A8450;
  --zen-warning: #B8956A;
  --zen-border: #5D4E37;

  --border-width: 1px;
  --border-radius: 3px;
  --shadow: 0 2px 8px rgba(93, 78, 55, 0.08);
  --shadow-hover: 0 4px 12px rgba(93, 78, 55, 0.14);
  --shadow-sm: 0 1px 4px rgba(93, 78, 55, 0.06);
}

[data-theme="wabi_sabi"] body {
  background-color: var(--zen-bg);
  color: var(--zen-text);
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence baseFrequency="0.9" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.03"/></svg>');
}

/* --- SUMI-E (墨絵) — Ink fog & mist --- */
[data-theme="sumi_e"] {
  --zen-bg: #F8F8F8;
  --zen-surface: #E8E8E8;
  --zen-text: #1A1A1A;
  --zen-accent: #4A4A4A;
  --zen-success: #2C2C2C;
  --zen-warning: #6B6B6B;
  --zen-border: #333333;

  --border-width: 1px;
  --border-radius: 0px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
}

[data-theme="sumi_e"] .ink-brush {
  background: linear-gradient(180deg, #1A1A1A 0%, #4A4A4A 100%);
}

/* --- KABUKICHO (歌舞伎町) — Neon cyberpunk --- */
[data-theme="kabukicho"] {
  --zen-bg: #0A0E1A;
  --zen-surface: #1A1F35;
  --zen-text: #E0E6FF;
  --zen-accent: #FF0080;
  --zen-success: #00FFD1;
  --zen-warning: #FFD700;
  --zen-border: #FF0080;

  --border-width: 2px;
  --border-radius: 4px;
  --shadow: 0 0 20px rgba(255, 0, 128, 0.3);
  --shadow-hover: 0 0 30px rgba(255, 0, 128, 0.5);
  --shadow-sm: 0 0 10px rgba(255, 0, 128, 0.2);
}

[data-theme="kabukicho"] body {
  background: linear-gradient(180deg, #0A0E1A 0%, #1A1F35 100%);
  color: var(--zen-text);
}

[data-theme="kabukicho"] .neon-glow {
  box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  animation: neon-pulse 2s ease-in-out infinite;
}

[data-theme="kabukicho"] h1,
[data-theme="kabukicho"] h2,
[data-theme="kabukicho"] h3 {
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
}

/* --- ANIME (アニメ) — Kawaii overload --- */
[data-theme="anime"] {
  --zen-bg: #FFFFFF;
  --zen-surface: #FFF5F7;
  --zen-text: #2D1B4E;
  --zen-accent: #FF6B9D;
  --zen-success: #4ECDC4;
  --zen-warning: #FFE66D;
  --zen-border: #FF6B9D;

  --border-width: 3px;
  --border-radius: 16px;
  --shadow: 4px 4px 0 0 #4ECDC4;
  --shadow-hover: 6px 6px 0 0 #4ECDC4;
  --shadow-sm: 2px 2px 0 0 #4ECDC4;
}

[data-theme="anime"] .gradient-bg {
  background: linear-gradient(135deg, #FF6B9D 0%, #A8E6CF 100%);
}


/* ==========================================================================
   2. GLOBAL ZEN-CLASS OVERRIDES (all non-default themes)
   ========================================================================== */

/* Token bridge: index.css defines shadow-neo / rounded-zen utilities over
   --zen-shadow-* / --zen-radius (@theme inline). Non-default themes feed them
   from the per-theme vars above, so tokenized components restyle without the
   literal-class !important bridge below. The class bridge stays for the
   not-yet-migrated tail — values are identical, so it's inert on tokenized
   markup. Default theme keeps the bundled 4px/0px values from index.css. */
[data-theme]:not([data-theme="default"]) {
  --zen-shadow-neo: var(--shadow);
  --zen-shadow-neo-hover: var(--shadow-hover);
  --zen-shadow-neo-sm: var(--shadow-sm);
  --zen-radius: var(--border-radius);
}

/* Backgrounds */
[data-theme]:not([data-theme="default"]) .bg-zen-bg      { background-color: var(--zen-bg) !important; }
[data-theme]:not([data-theme="default"]) .bg-zen-surface  { background-color: var(--zen-surface) !important; }
[data-theme]:not([data-theme="default"]) .bg-zen-text     { background-color: var(--zen-text) !important; }
[data-theme]:not([data-theme="default"]) .bg-zen-accent   { background-color: var(--zen-accent) !important; }
[data-theme]:not([data-theme="default"]) .bg-zen-success  { background-color: var(--zen-success) !important; }
[data-theme]:not([data-theme="default"]) .bg-zen-warning  { background-color: var(--zen-warning) !important; }

/* Text */
[data-theme]:not([data-theme="default"]) .text-zen-text    { color: var(--zen-text) !important; }
[data-theme]:not([data-theme="default"]) .text-zen-accent  { color: var(--zen-accent) !important; }
[data-theme]:not([data-theme="default"]) .text-zen-success { color: var(--zen-success) !important; }
[data-theme]:not([data-theme="default"]) .text-zen-warning { color: var(--zen-warning) !important; }

/* Borders */
[data-theme]:not([data-theme="default"]) .border-black     { border-color: var(--zen-border) !important; }
[data-theme]:not([data-theme="default"]) .border-zen-accent { border-color: var(--zen-accent) !important; }

/* Shadows */
[data-theme]:not([data-theme="default"]) .shadow-neo       { box-shadow: var(--shadow) !important; }
[data-theme]:not([data-theme="default"]) .shadow-neo-hover { box-shadow: var(--shadow-hover) !important; }
[data-theme]:not([data-theme="default"]) .shadow-neo-sm    { box-shadow: var(--shadow-sm) !important; }

/* Canvas paper — always white, never overridden by dark themes */
.zen-canvas-paper {
  background-color: #FFFFFF !important;
}

/* Canvas border — adapts to theme */
.zen-canvas-border {
  border-color: var(--zen-border) !important;
}

/* Японские декоративные микроэлементы (кандзи-подписи, камон-марки) —
   видны только в темах, включивших их явно */
.zen-jp-deco { display: none; }
[data-theme="default"] .zen-jp-deco,
[data-theme="paper"] .zen-jp-deco { display: inline; }


/* ==========================================================================
   3. DEFAULT (Neo-Brutalist) OVERRIDES
   Bolder, punchier — thick borders, heavy shadows, accent stripes
   ========================================================================== */

[data-theme="default"] button {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-width: 3px !important;
}

/* Primary button: red accent stripe at bottom */
[data-theme="default"] button.bg-zen-text {
  color: white !important;
  position: relative !important;
  overflow: hidden !important;
}

[data-theme="default"] button.bg-zen-text::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background-color: var(--zen-accent) !important;
}

/* Active level tabs: colored shadow + tilt */
[data-theme="default"] button.bg-black.text-white {
  box-shadow: 6px 6px 0px 0px var(--zen-accent) !important;
  transform: translateY(-3px) rotate(-1deg) !important;
}

/* Non-button bg-black (badges, tags): accent shadow */
[data-theme="default"] .bg-black:not(button) {
  box-shadow: 3px 3px 0px 0px var(--zen-accent) !important;
}

/* Cards hover: tilt effect */
[data-theme="default"] .shadow-neo:hover {
  transform: translate(-2px, -2px) rotate(-0.5deg) !important;
  box-shadow: 8px 8px 0px 0px #000000 !important;
}

/* Nav active: thick left accent bar */
[data-theme="default"] nav button.bg-zen-text {
  border-left: 6px solid var(--zen-accent) !important;
}

/* Progress bar fill: diagonal stripes */
[data-theme="default"] .bg-zen-success.h-full {
  background: repeating-linear-gradient(
    -45deg,
    var(--zen-success),
    var(--zen-success) 4px,
    #566B16 4px,
    #566B16 8px
  ) !important;
}

/* Headings: tight tracking */
[data-theme="default"] h2 {
  letter-spacing: -0.03em !important;
}

/* Scrollbar: brutalist */
[data-theme="default"] ::-webkit-scrollbar-track { background: #F5F5F5 !important; }
[data-theme="default"] ::-webkit-scrollbar-thumb { background: #1A1A1A !important; }
[data-theme="default"] ::-webkit-scrollbar-thumb:hover { background: var(--zen-accent) !important; }


/* ==========================================================================
   3.5 PAPER — light soft-minimal, borderless (NEW default theme)
   Separation by color + soft shadow. Built like every other theme: a variable
   block (the global bridge in section 2 maps the zen utility classes — bg-zen,
   border-black, shadow-neo — to these for free) plus a few targeted overrides.
   Neo-brutalism (the default theme) stays UNTOUCHED.
   ========================================================================== */

[data-theme="paper"] {
  --zen-bg: #EDE7D9;        /* warm washi page */
  --zen-surface: #E7E0CE;   /* insets / secondary */
  --zen-text: #2E2A22;      /* warm sumi ink (was cool #1A1D21) */
  --zen-accent: #2F7A57;    /* jade 翡翠 */
  --zen-success: #4E9A63;   /* leaf green — distinct from accent */
  --zen-warning: #C0892E;   /* golden ochre */
  --zen-border: transparent;          /* borderless: .border-black → transparent via bridge */

  --border-width: 0px;
  --border-radius: 14px;
  /* warm-tinted soft shadows (brown tint, not cool blue-gray) */
  --shadow:       0 1px 2px rgba(60,50,30,0.06), 0 4px 16px rgba(60,50,30,0.08);
  --shadow-hover: 0 6px 12px rgba(60,50,30,0.08), 0 16px 32px rgba(60,50,30,0.12);
  --shadow-sm:    0 1px 3px rgba(60,50,30,0.10);

  --zen-seal: #B5533B;             /* приглушённый сю — как ремап красного ниже */
  --zen-pattern-opacity: 0.05;
}

/* Rice-paper (washi) page: warm base + ultra-subtle paper grain */
[data-theme="paper"] body {
  background-color: var(--zen-bg);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="w"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/></filter><rect width="120" height="120" filter="url(%23w)" opacity="0.06"/></svg>');
}

/* Cards / surfaces → light cream washi (lighter than page so they lift on shadow) */
[data-theme="paper"] .bg-white { background-color: #FAF6EC !important; }

/* Round cards / buttons (anything carrying the soft shadow) */
[data-theme="paper"] .shadow-neo { border-radius: var(--border-radius) !important; }

/* Round plates broadly for a softer feel — exam plate, nav buttons, hint
   banners, tooltips, badges, chips, mobile tabs. Exclude intentional squares
   (.rounded-none — lesson status icons / split bars) and circles (.rounded-full
   — avatars, lock circle, pill chips, InfoTip trigger). */
[data-theme="paper"] .border:not(.rounded-none):not(.rounded-full),
[data-theme="paper"] .border-2:not(.rounded-none):not(.rounded-full),
[data-theme="paper"] .border-4:not(.rounded-none):not(.rounded-full),
[data-theme="paper"] .shadow-neo-sm:not(.rounded-none):not(.rounded-full),
[data-theme="paper"] nav button:not(.rounded-full) {
  border-radius: var(--border-radius) !important;
}

/* Quieter weight */
[data-theme="paper"] .font-black { font-weight: 600 !important; }

/* Buttons: no uppercase / heavy tracking */
[data-theme="paper"] button { text-transform: none !important; letter-spacing: normal !important; }

/* Primary button → indigo (keeps the .bg-zen-text contract) */
[data-theme="paper"] button.bg-zen-text { background: var(--zen-accent) !important; color: #fff !important; }
[data-theme="paper"] button.bg-zen-text:hover { background: #256447 !important; }

/* Active level / segment tabs (bg-black.text-white) → flat indigo, no tilt */
[data-theme="paper"] button.bg-black.text-white { background: var(--zen-accent) !important; box-shadow: var(--shadow-sm) !important; transform: none !important; }

/* Solid black plates / icons → indigo (no harsh black on Paper) */
[data-theme="paper"] .bg-black:not(button) { background: var(--zen-accent) !important; }

/* Card hover: gentle lift + soft shadow */
[data-theme="paper"] .shadow-neo:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-hover) !important; }

/* Nav active: тонкая вермильонная рельса — метка-инкан */
[data-theme="paper"] nav button.bg-zen-text { border-left: 3px solid var(--zen-seal) !important; }

/* Progress fill: flat */
[data-theme="paper"] .bg-zen-success.h-full { background: var(--zen-success) !important; }

/* Calligraphy canvas keeps a visible hairline (border var is transparent here) */
[data-theme="paper"] .zen-canvas-border { border-color: #DDD3C0 !important; }

/* Scrollbar: quiet, warm */
[data-theme="paper"] ::-webkit-scrollbar-track { background: transparent !important; }
[data-theme="paper"] ::-webkit-scrollbar-thumb { background: #CFC6B3 !important; border-radius: 9999px !important; }
[data-theme="paper"] ::-webkit-scrollbar-thumb:hover { background: #A99F89 !important; }

/* ── Tab groups → borderless free pills (like the feed). Marker class added in
      JSX; placed after the .bg-white rule so transparent wins over cream. ── */
[data-theme="paper"] .tab-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 0.5rem; }
/* .tab-bar-glass: «стекло» убрано — липкая подложка теперь тает градиентом
   в самом Tabs.tsx (var(--zen-surface) → transparent), одинаково во всех темах */

/* ── Palette harmonization: tame bright Tailwind utilities into the washi+jade
      gamut. Semantic intent kept (green=success, red=danger, amber=warning —
      only muted; blue/indigo/purple/cyan=decorative → jade). ── */

/* text-black → warm sumi ink */
[data-theme="paper"] .text-black { color: #2E2A22 !important; }

/* --- backgrounds: light tints (50-300) --- */
[data-theme="paper"] .bg-blue-50,[data-theme="paper"] .bg-blue-100,[data-theme="paper"] .bg-blue-200,[data-theme="paper"] .bg-blue-300,[data-theme="paper"] .bg-indigo-50,[data-theme="paper"] .bg-indigo-100,[data-theme="paper"] .bg-indigo-200,[data-theme="paper"] .bg-indigo-300,[data-theme="paper"] .bg-purple-50,[data-theme="paper"] .bg-purple-100,[data-theme="paper"] .bg-purple-200,[data-theme="paper"] .bg-purple-300,[data-theme="paper"] .bg-cyan-50,[data-theme="paper"] .bg-cyan-100,[data-theme="paper"] .bg-cyan-200,[data-theme="paper"] .bg-cyan-300 { background-color: #E3ECDD !important; }
[data-theme="paper"] .bg-green-50,[data-theme="paper"] .bg-green-100,[data-theme="paper"] .bg-green-200,[data-theme="paper"] .bg-green-300,[data-theme="paper"] .bg-emerald-50,[data-theme="paper"] .bg-emerald-100,[data-theme="paper"] .bg-emerald-200,[data-theme="paper"] .bg-emerald-300,[data-theme="paper"] .bg-teal-50,[data-theme="paper"] .bg-teal-100,[data-theme="paper"] .bg-teal-200,[data-theme="paper"] .bg-teal-300 { background-color: #E7EFE0 !important; }
[data-theme="paper"] .bg-red-50,[data-theme="paper"] .bg-red-100,[data-theme="paper"] .bg-red-200,[data-theme="paper"] .bg-red-300,[data-theme="paper"] .bg-rose-50,[data-theme="paper"] .bg-rose-100,[data-theme="paper"] .bg-rose-200,[data-theme="paper"] .bg-rose-300 { background-color: #F3E2DC !important; }
[data-theme="paper"] .bg-amber-50,[data-theme="paper"] .bg-amber-100,[data-theme="paper"] .bg-amber-200,[data-theme="paper"] .bg-amber-300,[data-theme="paper"] .bg-yellow-50,[data-theme="paper"] .bg-yellow-100,[data-theme="paper"] .bg-yellow-200,[data-theme="paper"] .bg-yellow-300,[data-theme="paper"] .bg-orange-50,[data-theme="paper"] .bg-orange-100,[data-theme="paper"] .bg-orange-200,[data-theme="paper"] .bg-orange-300 { background-color: #F3E9D5 !important; }
[data-theme="paper"] .bg-pink-50,[data-theme="paper"] .bg-pink-100,[data-theme="paper"] .bg-pink-200,[data-theme="paper"] .bg-pink-300 { background-color: #F2E3E0 !important; }

/* --- backgrounds: solids (400-700) --- */
[data-theme="paper"] .bg-blue-400,[data-theme="paper"] .bg-blue-500,[data-theme="paper"] .bg-blue-600,[data-theme="paper"] .bg-blue-700,[data-theme="paper"] .bg-indigo-400,[data-theme="paper"] .bg-indigo-500,[data-theme="paper"] .bg-indigo-600,[data-theme="paper"] .bg-indigo-700,[data-theme="paper"] .bg-purple-400,[data-theme="paper"] .bg-purple-500,[data-theme="paper"] .bg-purple-600,[data-theme="paper"] .bg-purple-700,[data-theme="paper"] .bg-cyan-500,[data-theme="paper"] .bg-cyan-600 { background-color: #2F7A57 !important; }
[data-theme="paper"] .bg-green-400,[data-theme="paper"] .bg-green-500,[data-theme="paper"] .bg-green-600,[data-theme="paper"] .bg-green-700,[data-theme="paper"] .bg-emerald-400,[data-theme="paper"] .bg-emerald-500,[data-theme="paper"] .bg-emerald-600,[data-theme="paper"] .bg-emerald-700,[data-theme="paper"] .bg-teal-500,[data-theme="paper"] .bg-teal-600 { background-color: #4E9A63 !important; }
[data-theme="paper"] .bg-red-400,[data-theme="paper"] .bg-red-500,[data-theme="paper"] .bg-red-600,[data-theme="paper"] .bg-red-700,[data-theme="paper"] .bg-rose-400,[data-theme="paper"] .bg-rose-500,[data-theme="paper"] .bg-rose-600,[data-theme="paper"] .bg-rose-700 { background-color: #B5533B !important; }
[data-theme="paper"] .bg-amber-400,[data-theme="paper"] .bg-amber-500,[data-theme="paper"] .bg-amber-600,[data-theme="paper"] .bg-yellow-400,[data-theme="paper"] .bg-yellow-500,[data-theme="paper"] .bg-yellow-600,[data-theme="paper"] .bg-orange-400,[data-theme="paper"] .bg-orange-500,[data-theme="paper"] .bg-orange-600 { background-color: #C0892E !important; }
[data-theme="paper"] .bg-pink-400,[data-theme="paper"] .bg-pink-500,[data-theme="paper"] .bg-pink-600 { background-color: #B5677F !important; }

/* --- borders --- */
[data-theme="paper"] .border-blue-200,[data-theme="paper"] .border-blue-300,[data-theme="paper"] .border-blue-400,[data-theme="paper"] .border-blue-500,[data-theme="paper"] .border-blue-600,[data-theme="paper"] .border-blue-700,[data-theme="paper"] .border-blue-900,[data-theme="paper"] .border-indigo-200,[data-theme="paper"] .border-indigo-300,[data-theme="paper"] .border-indigo-400,[data-theme="paper"] .border-indigo-500,[data-theme="paper"] .border-purple-200,[data-theme="paper"] .border-purple-300,[data-theme="paper"] .border-purple-400,[data-theme="paper"] .border-purple-500,[data-theme="paper"] .border-purple-900,[data-theme="paper"] .border-cyan-200,[data-theme="paper"] .border-cyan-300 { border-color: #BCD0C2 !important; }
[data-theme="paper"] .border-green-300,[data-theme="paper"] .border-green-400,[data-theme="paper"] .border-green-500,[data-theme="paper"] .border-green-600,[data-theme="paper"] .border-green-900,[data-theme="paper"] .border-emerald-300,[data-theme="paper"] .border-emerald-400,[data-theme="paper"] .border-emerald-500,[data-theme="paper"] .border-teal-300,[data-theme="paper"] .border-teal-400 { border-color: #C2D8C2 !important; }
[data-theme="paper"] .border-red-200,[data-theme="paper"] .border-red-300,[data-theme="paper"] .border-red-400,[data-theme="paper"] .border-red-500,[data-theme="paper"] .border-red-600,[data-theme="paper"] .border-red-900,[data-theme="paper"] .border-rose-200,[data-theme="paper"] .border-rose-300,[data-theme="paper"] .border-rose-400,[data-theme="paper"] .border-rose-500 { border-color: #E2C3B8 !important; }
[data-theme="paper"] .border-amber-300,[data-theme="paper"] .border-amber-400,[data-theme="paper"] .border-amber-500,[data-theme="paper"] .border-amber-600,[data-theme="paper"] .border-yellow-200,[data-theme="paper"] .border-yellow-400,[data-theme="paper"] .border-yellow-500,[data-theme="paper"] .border-orange-300,[data-theme="paper"] .border-orange-400,[data-theme="paper"] .border-orange-500 { border-color: #E4D2A8 !important; }
[data-theme="paper"] .border-pink-200,[data-theme="paper"] .border-pink-300,[data-theme="paper"] .border-pink-400,[data-theme="paper"] .border-pink-500 { border-color: #E6CBD2 !important; }

/* --- text (keep semantic hue, muted) --- */
[data-theme="paper"] .text-blue-600,[data-theme="paper"] .text-blue-700,[data-theme="paper"] .text-blue-800,[data-theme="paper"] .text-indigo-600,[data-theme="paper"] .text-indigo-700,[data-theme="paper"] .text-indigo-800,[data-theme="paper"] .text-purple-600,[data-theme="paper"] .text-purple-700,[data-theme="paper"] .text-purple-800,[data-theme="paper"] .text-cyan-700 { color: #2F6E4E !important; }
[data-theme="paper"] .text-green-600,[data-theme="paper"] .text-green-700,[data-theme="paper"] .text-green-800,[data-theme="paper"] .text-emerald-600,[data-theme="paper"] .text-emerald-700,[data-theme="paper"] .text-teal-700 { color: #3E7D50 !important; }
[data-theme="paper"] .text-red-600,[data-theme="paper"] .text-red-700,[data-theme="paper"] .text-rose-600,[data-theme="paper"] .text-rose-700 { color: #A24A37 !important; }
[data-theme="paper"] .text-amber-600,[data-theme="paper"] .text-amber-700,[data-theme="paper"] .text-amber-900,[data-theme="paper"] .text-yellow-700,[data-theme="paper"] .text-yellow-800,[data-theme="paper"] .text-orange-600,[data-theme="paper"] .text-orange-700 { color: #9A6F22 !important; }
[data-theme="paper"] .text-pink-500,[data-theme="paper"] .text-pink-600,[data-theme="paper"] .text-pink-700 { color: #9C5B59 !important; }

/* --- gradients: remap endpoints so they stay subtle washi (image kept) --- */
[data-theme="paper"] .from-blue-50,[data-theme="paper"] .from-blue-100,[data-theme="paper"] .from-indigo-50,[data-theme="paper"] .from-indigo-100,[data-theme="paper"] .from-purple-50,[data-theme="paper"] .from-purple-100,[data-theme="paper"] .from-cyan-50,[data-theme="paper"] .from-cyan-100 { --tw-gradient-from: #E3ECDD var(--tw-gradient-from-position) !important; }
[data-theme="paper"] .to-blue-100,[data-theme="paper"] .to-indigo-100,[data-theme="paper"] .to-purple-50,[data-theme="paper"] .to-purple-100,[data-theme="paper"] .to-cyan-100 { --tw-gradient-to: #E3ECDD var(--tw-gradient-to-position) !important; }
[data-theme="paper"] .from-green-50,[data-theme="paper"] .from-emerald-50,[data-theme="paper"] .from-teal-50 { --tw-gradient-from: #E7EFE0 var(--tw-gradient-from-position) !important; }
[data-theme="paper"] .to-green-50,[data-theme="paper"] .to-emerald-50,[data-theme="paper"] .to-teal-50 { --tw-gradient-to: #E7EFE0 var(--tw-gradient-to-position) !important; }
[data-theme="paper"] .from-red-50,[data-theme="paper"] .from-rose-50,[data-theme="paper"] .from-pink-50,[data-theme="paper"] .from-pink-100 { --tw-gradient-from: #F2E3E0 var(--tw-gradient-from-position) !important; }
[data-theme="paper"] .to-red-50,[data-theme="paper"] .to-rose-50,[data-theme="paper"] .to-pink-50,[data-theme="paper"] .to-pink-100 { --tw-gradient-to: #F2E3E0 var(--tw-gradient-to-position) !important; }
[data-theme="paper"] .from-amber-50,[data-theme="paper"] .from-amber-200,[data-theme="paper"] .from-yellow-50,[data-theme="paper"] .from-yellow-100,[data-theme="paper"] .from-orange-50 { --tw-gradient-from: #F3E9D5 var(--tw-gradient-from-position) !important; }
[data-theme="paper"] .to-amber-100,[data-theme="paper"] .to-yellow-300,[data-theme="paper"] .to-orange-50,[data-theme="paper"] .to-orange-100 { --tw-gradient-to: #F3E9D5 var(--tw-gradient-to-position) !important; }

/* Strong gradient CTAs (e.g. from-purple-600 to-pink-600) → flat jade, not acid */
[data-theme="paper"] .from-blue-500,[data-theme="paper"] .from-blue-600,[data-theme="paper"] .from-blue-700,[data-theme="paper"] .from-indigo-500,[data-theme="paper"] .from-indigo-600,[data-theme="paper"] .from-indigo-700,[data-theme="paper"] .from-purple-500,[data-theme="paper"] .from-purple-600,[data-theme="paper"] .from-purple-700,[data-theme="paper"] .from-violet-500,[data-theme="paper"] .from-violet-600,[data-theme="paper"] .from-cyan-500,[data-theme="paper"] .from-cyan-600,[data-theme="paper"] .from-pink-500,[data-theme="paper"] .from-pink-600 { --tw-gradient-from: #2F7A57 var(--tw-gradient-from-position) !important; }
[data-theme="paper"] .to-blue-500,[data-theme="paper"] .to-blue-600,[data-theme="paper"] .to-blue-700,[data-theme="paper"] .to-indigo-500,[data-theme="paper"] .to-indigo-600,[data-theme="paper"] .to-indigo-700,[data-theme="paper"] .to-purple-500,[data-theme="paper"] .to-purple-600,[data-theme="paper"] .to-purple-700,[data-theme="paper"] .to-violet-500,[data-theme="paper"] .to-violet-600,[data-theme="paper"] .to-cyan-500,[data-theme="paper"] .to-cyan-600,[data-theme="paper"] .to-pink-500,[data-theme="paper"] .to-pink-600 { --tw-gradient-to: #2F7A57 var(--tw-gradient-to-position) !important; }

/* Landing dark (jade) sections: lift secondary text to readable cream */
[data-theme="paper"] .bg-black .text-gray-300,
[data-theme="paper"] .bg-black .text-gray-400,
[data-theme="paper"] .bg-black .text-gray-500,
[data-theme="paper"] .bg-black .text-gray-600 { color: rgba(247,244,236,0.86) !important; }
[data-theme="paper"] .bg-black .text-zen-accent { color: #F6EAD2 !important; }


/* ==========================================================================
   4. WABI-SABI (侘寂) OVERRIDES
   Broken borders, organic imperfection, aged paper, incompleteness
   ========================================================================== */

/* bg-white → warm paper */
[data-theme="wabi_sabi"] .bg-white {
  background-color: var(--zen-surface) !important;
}

/* --- Broken/incomplete borders on buttons --- */
[data-theme="wabi_sabi"] button {
  border-style: dashed !important;
  border-width: 1.5px !important;
  border-color: var(--zen-border) !important;
  border-radius: 2px !important;
  border-image: repeating-linear-gradient(
    90deg,
    var(--zen-border) 0px,
    var(--zen-border) 8px,
    transparent 8px,
    transparent 12px
  ) 1 !important;
}

/* Primary button: solid top/bottom, hidden left — incomplete feel */
[data-theme="wabi_sabi"] button.bg-zen-text {
  border-top-style: solid !important;
  border-right-style: dashed !important;
  border-bottom-style: solid !important;
  border-left-style: hidden !important;
  border-image: none !important;
  border-width: 1.5px !important;
}

/* --- Cards: rotation + gap in border corner --- */
[data-theme="wabi_sabi"] .shadow-neo {
  transform: rotate(0.3deg) !important;
  border-style: solid !important;
  border-width: 1px !important;
  position: relative !important;
}

/* Gap pseudo-element: break in bottom-right corner */
[data-theme="wabi_sabi"] .shadow-neo::before {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  right: 10px !important;
  width: 30px !important;
  height: 3px !important;
  background-color: var(--zen-bg) !important;
  z-index: 1 !important;
}

/* Alternate cards rotate opposite, gap on left */
[data-theme="wabi_sabi"] .shadow-neo:nth-child(even) {
  transform: rotate(-0.3deg) !important;
}

[data-theme="wabi_sabi"] .shadow-neo:nth-child(even)::before {
  right: auto !important;
  left: 15px !important;
}

/* Hover: straighten */
[data-theme="wabi_sabi"] .shadow-neo:hover {
  transform: rotate(0deg) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* --- Active tabs: solid earth tone --- */
[data-theme="wabi_sabi"] button.bg-black {
  background-color: var(--zen-text) !important;
  color: var(--zen-surface) !important;
  border-style: solid !important;
  border-image: none !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-2px) rotate(-0.5deg) !important;
}

[data-theme="wabi_sabi"] button.text-gray-400 {
  color: #9B8F82 !important;
}

/* --- Softer font weights for imperfect feel --- */
[data-theme="wabi_sabi"] .font-black { font-weight: 800 !important; }
[data-theme="wabi_sabi"] .font-bold  { font-weight: 600 !important; }

/* --- Sidebar: thin organic border --- */
[data-theme="wabi_sabi"] aside.border-r-2 {
  border-right-width: 1px !important;
  border-color: rgba(93, 78, 55, 0.2) !important;
}

/* --- Progress bar: gradient fill --- */
[data-theme="wabi_sabi"] .bg-zen-success.h-full {
  background: linear-gradient(
    90deg, var(--zen-success) 0%, #8a9458 60%, var(--zen-success) 100%
  ) !important;
  border-right: none !important;
}

/* --- Scrollbar: earthy --- */
[data-theme="wabi_sabi"] ::-webkit-scrollbar-track { background: var(--zen-bg) !important; }
[data-theme="wabi_sabi"] ::-webkit-scrollbar-thumb {
  background: var(--zen-border) !important;
  border-radius: 3px !important;
}


/* ==========================================================================
   5. SUMI-E (墨絵) OVERRIDES
   Ink fog, mist, frosted glass, wash gradients
   ========================================================================== */

/* --- Body: mist gradient background --- */
[data-theme="sumi_e"] body {
  background: linear-gradient(
    180deg, #F8F8F8 0%, #F0F0F0 30%, #E8E8E8 70%, #F0F0F0 100%
  ) !important;
  background-attachment: fixed !important;
  color: var(--zen-text) !important;
}

/* --- Fog overlay at bottom of screen --- */
[data-theme="sumi_e"] main {
  position: relative !important;
}

[data-theme="sumi_e"] main::after {
  content: '' !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 120px !important;
  background: linear-gradient(
    to top,
    rgba(232, 232, 232, 0.9) 0%,
    rgba(232, 232, 232, 0.4) 40%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

/* --- Cards: white for contrast, ink wash top bar --- */
[data-theme="sumi_e"] .bg-white {
  background-color: #FFFFFF !important;
}

[data-theme="sumi_e"] .shadow-neo {
  border-width: 1px !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ink wash accent bar at card top */
[data-theme="sumi_e"] .shadow-neo::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 26, 26, 0.6) 20%,
    rgba(26, 26, 26, 0.8) 50%,
    rgba(26, 26, 26, 0.6) 80%,
    transparent 100%
  ) !important;
  z-index: 1 !important;
}

[data-theme="sumi_e"] .shadow-neo:hover {
  transform: translateY(-2px) !important;
}

/* --- Buttons: thin borders --- */
[data-theme="sumi_e"] button {
  border-width: 1px !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Primary: ink wash gradient */
[data-theme="sumi_e"] .bg-zen-text {
  background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 40%, #333333 100%) !important;
  color: #F8F8F8 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: transparent !important;
}

[data-theme="sumi_e"] .bg-zen-text.text-white { color: #FFFFFF !important; }

/* Secondary: frosted glass */
[data-theme="sumi_e"] button.bg-white {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="sumi_e"] button.bg-white:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* --- Active tabs: ink gradient --- */
[data-theme="sumi_e"] button.bg-black {
  background: linear-gradient(180deg, #222 0%, #111 100%) !important;
  color: #F8F8F8 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
}

[data-theme="sumi_e"] button.text-gray-400 {
  color: #999999 !important;
}

[data-theme="sumi_e"] button.text-gray-400:hover {
  color: #333333 !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

/* --- Non-button bg-black (badges): ink gradient --- */
[data-theme="sumi_e"] .bg-black:not(button) {
  background: linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 100%) !important;
}

/* --- Nav: ink gradient + left bar --- */
[data-theme="sumi_e"] nav button.bg-zen-text {
  background: linear-gradient(90deg, #1A1A1A 0%, #2A2A2A 100%) !important;
  border-left: 4px solid #000000 !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

[data-theme="sumi_e"] nav button.bg-white {
  background-color: transparent !important;
}

[data-theme="sumi_e"] nav button.bg-white:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* --- Sidebar: frosted glass --- */
[data-theme="sumi_e"] aside.border-r-2 {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-right-width: 1px !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* --- Progress bar: ink fill --- */
[data-theme="sumi_e"] .bg-zen-success.h-full {
  background: linear-gradient(90deg, #1A1A1A 0%, #2C2C2C 50%, #3A3A3A 100%) !important;
  border-right: none !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* --- Headings: ink style --- */
[data-theme="sumi_e"] h2 {
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* --- Scrollbar: minimal ink --- */
[data-theme="sumi_e"] ::-webkit-scrollbar-track { background: transparent !important; }
[data-theme="sumi_e"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
}
[data-theme="sumi_e"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}


/* ==========================================================================
   6. ANIME (アニメ) OVERRIDES
   Kawaii gradients, sparkles, bounce, double shadows, shimmer
   ========================================================================== */

/* --- Body: pastel gradient --- */
[data-theme="anime"] body {
  background: linear-gradient(
    135deg, #FFFFFF 0%, #FFF5F7 30%, #F0FFF4 60%, #FFF5F7 100%
  ) !important;
  background-attachment: fixed !important;
}

/* --- Everything rounds out + bouncy transitions --- */
[data-theme="anime"] button {
  border-radius: 14px !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="anime"] .rounded    { border-radius: 14px !important; }
[data-theme="anime"] .rounded-lg { border-radius: 18px !important; }

/* --- Primary button: pink→purple→blue gradient --- */
[data-theme="anime"] .bg-zen-text {
  background: linear-gradient(135deg, #FF6B9D 0%, #C06BFF 50%, #6B8BFF 100%) !important;
  color: #FFFFFF !important;
  border-color: #FF6B9D !important;
  box-shadow: 4px 4px 0 0 #4ECDC4 !important;
  border-radius: 14px !important;
}

[data-theme="anime"] .bg-zen-text:hover {
  transform: translateY(-4px) scale(1.03) rotate(-1deg) !important;
  box-shadow: 6px 6px 0 0 #4ECDC4, 0 8px 25px rgba(255, 107, 157, 0.3) !important;
}

[data-theme="anime"] .bg-zen-text:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 2px 2px 0 0 #4ECDC4 !important;
}

[data-theme="anime"] .bg-zen-text.text-white { color: #FFFFFF !important; }

/* Secondary: pastel gradient */
[data-theme="anime"] button.bg-white {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF0F5 100%) !important;
  border-color: #FF6B9D !important;
  border-radius: 14px !important;
}

[data-theme="anime"] button.bg-white:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background: linear-gradient(135deg, #FFF0F5 0%, #FFE0EC 100%) !important;
  box-shadow: 4px 4px 0 0 #FFE66D !important;
}

/* Accent: warm gradient */
[data-theme="anime"] .bg-zen-accent {
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8A80 50%, #FFB74D 100%) !important;
  border-color: #FF6B9D !important;
}

[data-theme="anime"] .bg-zen-accent:hover {
  transform: translateY(-3px) scale(1.03) rotate(1deg) !important;
  box-shadow: 5px 5px 0 0 #4ECDC4, 0 8px 25px rgba(255, 107, 157, 0.3) !important;
}

/* --- Cards: double shadow + sparkle star --- */
[data-theme="anime"] .shadow-neo {
  box-shadow: 4px 4px 0 0 #4ECDC4, 8px 8px 0 0 rgba(255, 107, 157, 0.3) !important;
  border-color: #FF6B9D !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: visible !important;
}

[data-theme="anime"] .shadow-neo:hover {
  box-shadow: 6px 6px 0 0 #4ECDC4, 12px 12px 0 0 rgba(255, 107, 157, 0.3) !important;
  transform: translateY(-4px) rotate(-0.5deg) !important;
}

/* Sparkle star on card */
[data-theme="anime"] .shadow-neo::after {
  content: '\2726' !important;
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  font-size: 16px !important;
  color: #FFE66D !important;
  animation: anime-sparkle 2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* --- Active level tabs: purple gradient + bounce --- */
[data-theme="anime"] button.bg-black {
  background: linear-gradient(135deg, #2D1B4E 0%, #6B3FA0 50%, #9B59B6 100%) !important;
  color: #FFFFFF !important;
  border-color: #FF6B9D !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 #FFE66D !important;
  transform: translateY(-3px) scale(1.05) !important;
}

[data-theme="anime"] button.text-gray-400 {
  color: #C4A1D6 !important;
  border-radius: 12px !important;
}

[data-theme="anime"] button.text-gray-400:hover {
  color: #9B59B6 !important;
  background: rgba(255, 107, 157, 0.08) !important;
  transform: scale(1.05) !important;
}

/* Non-button bg-black (badges): purple gradient */
[data-theme="anime"] .bg-black:not(button) {
  background: linear-gradient(135deg, #2D1B4E 0%, #6B3FA0 100%) !important;
  border-color: #9B59B6 !important;
}

/* --- Nav: gradient active --- */
[data-theme="anime"] nav button.bg-zen-text {
  background: linear-gradient(135deg, #FF6B9D 0%, #C06BFF 100%) !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 0 #4ECDC4 !important;
}

[data-theme="anime"] nav button.bg-white:hover {
  background: rgba(255, 107, 157, 0.06) !important;
  border-color: #FFB6C8 !important;
  transform: translateX(4px) !important;
  border-radius: 14px !important;
}

/* --- Progress bar: rounded + shimmer --- */
[data-theme="anime"] .h-4.border-2.border-black.bg-white {
  border-color: #FF6B9D !important;
  border-radius: 9999px !important;
  background-color: #FFF5F7 !important;
  overflow: hidden !important;
}

[data-theme="anime"] .bg-zen-success.h-full {
  background: linear-gradient(90deg, #4ECDC4 0%, #45B7AA 50%, #6BDFCF 100%) !important;
  border-radius: 9999px !important;
  border-right: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer on progress fill */
[data-theme="anime"] .bg-zen-success.h-full::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%
  ) !important;
  animation: anime-shimmer 2s ease-in-out infinite !important;
}

/* --- Sidebar: pastel gradient + rounded edge --- */
[data-theme="anime"] aside.border-r-2 {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F7 50%, #F0FFF4 100%) !important;
  border-right-color: #FFB6C8 !important;
  border-right-width: 3px !important;
  border-radius: 0 20px 20px 0 !important;
}

/* --- Headings: gradient text --- */
[data-theme="anime"] h2 {
  background: linear-gradient(135deg, #2D1B4E 0%, #FF6B9D 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* --- Scrollbar: pink gradient --- */
[data-theme="anime"] ::-webkit-scrollbar-track { background: #FFF5F7 !important; border-radius: 4px !important; }
[data-theme="anime"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF6B9D 0%, #C06BFF 100%) !important;
  border-radius: 4px !important;
}
[data-theme="anime"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF8AB5 0%, #D08BFF 100%) !important;
}


/* ==========================================================================
   7. KABUKICHO (歌舞伎町) DARK MODE OVERRIDES
   Everything below ONLY affects [data-theme="kabukicho"].
   ========================================================================== */

/* --- 7a. bg-white → dark surface --- */
[data-theme="kabukicho"] .bg-white {
  background-color: var(--zen-surface) !important;
}

/* --- 7b. Text: black/gray → light --- */
[data-theme="kabukicho"] .text-black     { color: var(--zen-text) !important; }
/* Исключение: на ярких заливках (чипы Badge: bg-zen-success/warning и т.п.) текст
   должен остаться тёмным — светлый ремап делал «СЕРИЯ/N5/АКТИВНА» нечитаемыми */
[data-theme="kabukicho"] .bg-zen-success.text-black,
[data-theme="kabukicho"] .bg-zen-warning.text-black,
[data-theme="kabukicho"] .bg-zen-accent.text-black,
[data-theme="kabukicho"] .bg-yellow-400.text-black,
[data-theme="kabukicho"] .bg-yellow-500.text-black,
[data-theme="kabukicho"] .bg-amber-400.text-black,
[data-theme="kabukicho"] .bg-green-400.text-black { color: var(--zen-bg) !important; }
[data-theme="kabukicho"] .text-gray-400  { color: var(--zen-success) !important; }
[data-theme="kabukicho"] .text-gray-500  { color: #A0A4D4 !important; }
[data-theme="kabukicho"] .text-gray-600  { color: #9DA1D2 !important; }
[data-theme="kabukicho"] .text-gray-700  { color: #B0B5E0 !important; }
[data-theme="kabukicho"] .text-gray-800  { color: #CDD0F0 !important; }
[data-theme="kabukicho"] .text-white     { color: #fff !important; }
[data-theme="kabukicho"] .text-green-600 { color: var(--zen-success) !important; }
[data-theme="kabukicho"] .text-green-800 { color: #00FFD1 !important; }
[data-theme="kabukicho"] .text-yellow-600 { color: #FFD700 !important; }
[data-theme="kabukicho"] .text-yellow-800 { color: #FFD700 !important; }
[data-theme="kabukicho"] .text-red-600   { color: #FF3050 !important; }
[data-theme="kabukicho"] .font-mono      { color: var(--zen-text); }

/* --- 7c. Backgrounds: gray/color → dark --- */
[data-theme="kabukicho"] .bg-gray-50  { background-color: #141830 !important; }
[data-theme="kabukicho"] .bg-gray-100 { background-color: #1A1F38 !important; }
[data-theme="kabukicho"] .bg-gray-200 { background-color: #252A45 !important; }

[data-theme="kabukicho"] .bg-green-50  { background-color: rgba(0, 255, 209, 0.08) !important; }
[data-theme="kabukicho"] .bg-green-100 { background-color: rgba(0, 255, 209, 0.15) !important; }
[data-theme="kabukicho"] .bg-yellow-50  { background-color: rgba(255, 215, 0, 0.08) !important; }
[data-theme="kabukicho"] .bg-yellow-100 { background-color: rgba(255, 215, 0, 0.15) !important; }
[data-theme="kabukicho"] .bg-yellow-400 { background-color: #FFD700 !important; }
[data-theme="kabukicho"] .bg-blue-50    { background-color: rgba(80, 120, 255, 0.1) !important; }
[data-theme="kabukicho"] .bg-red-50  { background-color: rgba(255, 60, 80, 0.1) !important; }
[data-theme="kabukicho"] .bg-red-100 { background-color: rgba(255, 0, 128, 0.2) !important; }
[data-theme="kabukicho"] .bg-red-200 { background-color: rgba(255, 0, 128, 0.3) !important; }

[data-theme="kabukicho"] .bg-cyan-100    { background-color: rgba(0, 255, 209, 0.15) !important; }
[data-theme="kabukicho"] .bg-pink-50     { background-color: rgba(255, 0, 128, 0.08) !important; }
[data-theme="kabukicho"] .bg-pink-100    { background-color: rgba(255, 0, 128, 0.15) !important; }
[data-theme="kabukicho"] .bg-purple-50   { background-color: rgba(180, 120, 255, 0.08) !important; }
[data-theme="kabukicho"] .bg-purple-100  { background-color: rgba(180, 120, 255, 0.15) !important; }
[data-theme="kabukicho"] .bg-blue-100    { background-color: rgba(80, 120, 255, 0.15) !important; }
[data-theme="kabukicho"] .bg-orange-50   { background-color: rgba(255, 160, 50, 0.08) !important; }
[data-theme="kabukicho"] .bg-orange-100  { background-color: rgba(255, 160, 50, 0.15) !important; }
[data-theme="kabukicho"] .bg-amber-50    { background-color: rgba(255, 215, 0, 0.08) !important; }
[data-theme="kabukicho"] .bg-amber-100   { background-color: rgba(255, 215, 0, 0.15) !important; }
[data-theme="kabukicho"] .bg-indigo-50   { background-color: rgba(130, 100, 255, 0.08) !important; }
[data-theme="kabukicho"] .bg-indigo-100  { background-color: rgba(130, 100, 255, 0.15) !important; }

/* --- 7b-ext. Missing text color overrides --- */
[data-theme="kabukicho"] .text-green-700  { color: #00FFD1 !important; }
[data-theme="kabukicho"] .text-blue-700   { color: #7B9FFF !important; }
[data-theme="kabukicho"] .text-blue-800   { color: #7B9FFF !important; }
[data-theme="kabukicho"] .text-purple-700 { color: #C8A0FF !important; }
[data-theme="kabukicho"] .text-purple-800 { color: #C8A0FF !important; }
[data-theme="kabukicho"] .text-pink-600   { color: #FF60A0 !important; }
[data-theme="kabukicho"] .text-pink-700   { color: #FF60A0 !important; }
[data-theme="kabukicho"] .text-cyan-700   { color: #00FFD1 !important; }
[data-theme="kabukicho"] .text-orange-600 { color: #FFB060 !important; }
[data-theme="kabukicho"] .text-orange-700 { color: #FFB060 !important; }
[data-theme="kabukicho"] .text-indigo-700 { color: #A090FF !important; }
[data-theme="kabukicho"] .text-amber-700  { color: #FFD700 !important; }
[data-theme="kabukicho"] .text-amber-900  { color: #FFD700 !important; }

/* --- 7c-ext. Border overrides for badges --- */
[data-theme="kabukicho"] .border-purple-200,
[data-theme="kabukicho"] .border-purple-500 { border-color: rgba(180, 120, 255, 0.4) !important; }
[data-theme="kabukicho"] .border-pink-200   { border-color: rgba(255, 0, 128, 0.4) !important; }
[data-theme="kabukicho"] .border-cyan-200   { border-color: rgba(0, 255, 209, 0.4) !important; }
[data-theme="kabukicho"] .border-orange-200,
[data-theme="kabukicho"] .border-orange-300 { border-color: rgba(255, 160, 50, 0.4) !important; }
[data-theme="kabukicho"] .border-amber-300,
[data-theme="kabukicho"] .border-amber-400,
[data-theme="kabukicho"] .border-amber-600 { border-color: rgba(255, 215, 0, 0.4) !important; }
[data-theme="kabukicho"] .border-indigo-200 { border-color: rgba(130, 100, 255, 0.4) !important; }
[data-theme="kabukicho"] .border-blue-400   { border-color: rgba(80, 120, 255, 0.4) !important; }

/* --- 7c-ext. Gradient overrides for RoleBadge --- */
[data-theme="kabukicho"] .from-yellow-100 { --tw-gradient-from: rgba(255, 215, 0, 0.15) !important; }
[data-theme="kabukicho"] .to-orange-100   { --tw-gradient-to: rgba(255, 160, 50, 0.15) !important; }
[data-theme="kabukicho"] .from-blue-100   { --tw-gradient-from: rgba(80, 120, 255, 0.15) !important; }
[data-theme="kabukicho"] .to-cyan-100     { --tw-gradient-to: rgba(0, 255, 209, 0.15) !important; }
[data-theme="kabukicho"] .from-purple-100 { --tw-gradient-from: rgba(180, 120, 255, 0.15) !important; }
[data-theme="kabukicho"] .to-pink-100     { --tw-gradient-to: rgba(255, 0, 128, 0.15) !important; }
[data-theme="kabukicho"] .from-amber-200  { --tw-gradient-from: rgba(255, 215, 0, 0.20) !important; }
[data-theme="kabukicho"] .to-yellow-300   { --tw-gradient-to: rgba(255, 215, 0, 0.25) !important; }

/* --- 7d. Primary buttons: bg-zen-text → neon cyan --- */
[data-theme="kabukicho"] .bg-zen-text {
  background-color: var(--zen-success) !important;
  color: #0A0E1A !important;
  box-shadow: 0 0 15px rgba(0, 255, 209, 0.6), inset 0 0 8px rgba(0, 255, 209, 0.2) !important;
}

[data-theme="kabukicho"] .bg-zen-text.text-white,
[data-theme="kabukicho"] .bg-zen-text.text-black {
  color: #0A0E1A !important;
}

[data-theme="kabukicho"] .bg-zen-text .text-white {
  color: #0A0E1A !important;
}

/* --- 7e. Active tabs: bg-black → neon cyan --- */
[data-theme="kabukicho"] button.bg-black {
  background-color: var(--zen-success) !important;
  color: #0A0E1A !important;
  box-shadow: 0 0 20px rgba(0, 255, 209, 0.5) !important;
}

[data-theme="kabukicho"] button.bg-black.text-white {
  color: #0A0E1A !important;
}

/* Non-button bg-black → neon magenta */
[data-theme="kabukicho"] .bg-black:not(button) {
  background-color: var(--zen-accent) !important;
}

/* --- 7f. Borders --- */
[data-theme="kabukicho"] .border-gray-200,
[data-theme="kabukicho"] .border-gray-300 { border-color: #2A2F50 !important; }
[data-theme="kabukicho"] .border-dashed   { border-color: #3A3F60 !important; }
[data-theme="kabukicho"] .border-green-300 { border-color: rgba(0, 255, 209, 0.4) !important; }
[data-theme="kabukicho"] .border-green-500 { border-color: var(--zen-success) !important; }
[data-theme="kabukicho"] .border-red-500   { border-color: #FF3050 !important; }
[data-theme="kabukicho"] .border-blue-300  { border-color: rgba(80, 120, 255, 0.5) !important; }
[data-theme="kabukicho"] .border-yellow-400 { border-color: #FFD700 !important; }

[data-theme="kabukicho"] .border-zen-success {
  border-color: var(--zen-success) !important;
  box-shadow: 0 0 8px rgba(0, 255, 209, 0.4), inset 0 0 6px rgba(0, 255, 209, 0.1) !important;
}

[data-theme="kabukicho"] .border-dashed.border-gray-300  { border-color: #3A3F60 !important; }
[data-theme="kabukicho"] .border-dashed.border-green-500 { border-color: var(--zen-success) !important; }
[data-theme="kabukicho"] .border-dashed.border-red-500   { border-color: #FF3050 !important; }

/* --- 7g. Hover states --- */
[data-theme="kabukicho"] .hover\:text-black:hover    { color: var(--zen-text) !important; }
[data-theme="kabukicho"] .hover\:bg-gray-50:hover    { background-color: #1A1F38 !important; }
[data-theme="kabukicho"] .hover\:bg-gray-100:hover   { background-color: #252A45 !important; }
[data-theme="kabukicho"] .hover\:bg-red-200:hover    { background-color: rgba(255, 0, 128, 0.3) !important; }
[data-theme="kabukicho"] .hover\:bg-zinc-800:hover   { background-color: rgba(0, 255, 209, 0.8) !important; }

[data-theme="kabukicho"] button:hover:not(.bg-zen-text):not(.bg-zen-accent):not(.bg-zen-success) {
  text-shadow: 0 0 6px currentColor;
}

/* --- 7h. Neon glow effects --- */
[data-theme="kabukicho"] .bg-zen-primary {
  background-color: var(--zen-accent) !important;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
}

[data-theme="kabukicho"] .bg-zen-success {
  background-color: var(--zen-success) !important;
  box-shadow: 0 0 10px rgba(0, 255, 209, 0.5);
}

[data-theme="kabukicho"] .shadow-neo {
  box-shadow: 0 0 20px rgba(255, 0, 128, 0.2), 0 0 40px rgba(255, 0, 128, 0.05) !important;
}

/* --- 7i. Links --- */
[data-theme="kabukicho"] a       { color: var(--zen-success); }
[data-theme="kabukicho"] a:hover { color: var(--zen-accent); }

/* --- 7j. Scrollbar --- */
[data-theme="kabukicho"] ::-webkit-scrollbar-track {
  background: #0A0E1A;
  border-left-color: #FF0080;
}
[data-theme="kabukicho"] ::-webkit-scrollbar-thumb {
  background: #FF0080;
  border-color: #0A0E1A;
}
[data-theme="kabukicho"] ::-webkit-scrollbar-thumb:hover {
  background: #00FFD1;
}


/* ==========================================================================
   8. KEYFRAMES
   ========================================================================== */

@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes anime-sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(0.7) rotate(180deg); }
}

@keyframes anime-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes anime-pulse-border {
  0%, 100% { box-shadow: 4px 4px 0 0 #FFE66D; }
  50% { box-shadow: 6px 6px 0 0 #4ECDC4, 0 0 20px rgba(255, 107, 157, 0.3); }
}


/* ==========================================================================
   10. MOBILE BOTTOM BAR — Per-theme overrides
   ========================================================================== */

/* --- DEFAULT (Neo-Brutalist): thick borders, red accent shadow, UPPERCASE --- */
[data-theme="default"] .mobile-bottom-bar {
  background: rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 3px solid #000 !important;
}
[data-theme="default"] .mobile-tab {
  border: 2px solid #000 !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
[data-theme="default"] .mobile-tab-active {
  border-color: var(--zen-accent) !important;
  box-shadow: 3px 3px 0px 0px var(--zen-accent) !important;
  background: #fff !important;
  transform: translateY(-2px) !important;
}

/* --- PAPER: borderless, frosted washi, jade active tint --- */
[data-theme="paper"] .mobile-bottom-bar {
  background: rgba(250, 246, 236, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid #DDD3C0 !important;
}
[data-theme="paper"] .mobile-tab {
  border: 0 !important;
  border-radius: var(--border-radius) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
[data-theme="paper"] .mobile-tab-active {
  border-color: transparent !important;
  box-shadow: none !important;
  background: #DCEAE2 !important;
  color: var(--zen-accent) !important;
  transform: none !important;
}

/* --- WABI-SABI (侘寂): dashed borders, earthy, warm imperfection --- */
[data-theme="wabi_sabi"] .mobile-bottom-bar {
  background: rgba(245, 243, 238, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px dashed var(--zen-border) !important;
}
[data-theme="wabi_sabi"] .mobile-tab {
  border: 1px dashed transparent !important;
  border-radius: 3px !important;
  background: transparent !important;
  opacity: 0.8 !important;
}
[data-theme="wabi_sabi"] .mobile-tab-active {
  border-color: var(--zen-border) !important;
  opacity: 1 !important;
  background: var(--zen-surface) !important;
  box-shadow: none !important;
}

/* --- SUMI-E (墨絵): ethereal fog, ink underline, frosted glass --- */
[data-theme="sumi_e"] .mobile-bottom-bar {
  background: rgba(248, 248, 248, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="sumi_e"] .mobile-tab {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 0.5 !important;
}
[data-theme="sumi_e"] .mobile-tab-active {
  opacity: 1 !important;
  border-bottom: 2px solid var(--zen-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- ANIME (アニメ): pastel gradient, sparkle star ✦, bouncy --- */
[data-theme="anime"] .mobile-bottom-bar {
  background: linear-gradient(135deg, rgba(255, 245, 247, 0.92), rgba(168, 230, 207, 0.92)) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 3px solid #FF6B9D !important;
  border-radius: 20px 20px 0 0 !important;
}
[data-theme="anime"] .mobile-tab {
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
[data-theme="anime"] .mobile-tab-active {
  background: linear-gradient(135deg, #FF6B9D, #A78BFA) !important;
  color: #fff !important;
  border-color: #FFE66D !important;
  box-shadow: 3px 3px 0 0 #4ECDC4 !important;
  transform: translateY(-3px) scale(1.05) !important;
  position: relative !important;
  overflow: visible !important;
}
[data-theme="anime"] .mobile-tab-active::after {
  content: '\2726' !important;
  position: absolute !important;
  top: -6px !important;
  right: -4px !important;
  font-size: 12px !important;
  color: #FFE66D !important;
  animation: anime-sparkle 2s ease-in-out infinite !important;
  pointer-events: none !important;
}
[data-theme="anime"] .mobile-tab-active span,
[data-theme="anime"] .mobile-tab-active svg {
  color: #fff !important;
}

/* --- KABUKICHO (歌舞伎町): dark glass, neon glow, cyberpunk --- */
[data-theme="kabukicho"] .mobile-bottom-bar {
  background: rgba(10, 14, 26, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 2px solid var(--zen-accent) !important;
  box-shadow: 0 -4px 20px rgba(255, 0, 128, 0.15) !important;
}
[data-theme="kabukicho"] .mobile-tab {
  border: 1px solid rgba(255, 0, 128, 0.15) !important;
  border-radius: 4px !important;
  background: rgba(26, 31, 53, 0.6) !important;
  color: #E0E6FF !important;
}
[data-theme="kabukicho"] .mobile-tab-active {
  border-color: #00FFD1 !important;
  box-shadow: 0 0 12px rgba(0, 255, 209, 0.4), inset 0 0 8px rgba(0, 255, 209, 0.1) !important;
  color: #00FFD1 !important;
  background: rgba(0, 255, 209, 0.08) !important;
  text-shadow: 0 0 8px rgba(0, 255, 209, 0.5) !important;
}
[data-theme="kabukicho"] .mobile-tab-active svg {
  filter: drop-shadow(0 0 4px rgba(0, 255, 209, 0.6)) !important;
}


/* ==========================================================================
   9. TRANSITIONS
   ========================================================================== */

* {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

[data-theme-switching] * {
  transition: none !important;
}