/* ============================================================
   ZERO-FOUC & VIEWPORT CONTAINMENT SHIELD
   Ensures modals, dropdowns and viewport are properly constrained
   from millisecond 0 even before Tailwind CDN finishes compilation.
   ============================================================ */
template,
#modals-container > div.hidden,
#header-tools-dropdown.hidden,
#header-user-dropdown.hidden,
#returning-user-banner.hidden,
#demo-guide-banner.hidden,
#workspace-split-wrapper.hidden {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: #08090c;
    color: #f1f5f9;
}

#app-shell {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

#workspace-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#workspace-viewport {
    flex: 1 1 0%;
    overflow: auto;
    position: relative;
}

/* ============================================================
   MANGA TRANSLATOR STUDIO - DARK OBSIDIAN & CYBER-INK DESIGN SYSTEM
   Bespoke, modern, ultra-refined dark theme tailored for creative manga workflows.
   Inspired by Clip Studio Paint, Figma and OLED Studio Ergonomics.
   ============================================================ */

:root {
    color-scheme: dark !important;
    /* Deep Obsidian & Graphite Palette */
    --studio-obsidian: #08090c;
    --studio-bg: #08090c;
    --studio-panel: #0f1015;
    --studio-surface: #0f1015;
    --studio-card: #151720;
    --studio-card-hover: #1c1e2b;
    --studio-card-active: #242738;
    --studio-border: rgba(255, 255, 255, 0.07);
    --studio-border-hover: rgba(255, 255, 255, 0.15);
    --studio-border-glow: rgba(245, 158, 11, 0.4);

    /* Creative Accents */
    --studio-amber: #f59e0b;
    --studio-amber-hover: #d97706;
    --studio-amber-glow: rgba(245, 158, 11, 0.28);
    --studio-indigo: #6366f1;
    --studio-primary: #6366f1;
    --studio-primary-hover: #4f46e5;
    --studio-primary-glow: rgba(99, 102, 241, 0.25);
    --studio-cyan: #06b6d4;
    --studio-cyan-glow: rgba(6, 182, 212, 0.25);
    --studio-emerald: #10b981;
    --studio-emerald-glow: rgba(16, 185, 129, 0.25);
    --studio-rose: #f43f5e;
    --studio-sky: #38bdf8;

    /* Text Hierarchy */
    --studio-text-primary: #f8fafc;
    --studio-text-secondary: #94a3b8;
    --studio-text-muted: #64748b;
}

body {
    background-color: var(--studio-bg) !important;
    color: #f8fafc !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   PERFORMANCE: Pause all CSS animations when tab is hidden
   (Controlled via JS visibilitychange event toggling this class)
   ============================================================ */
.animations-paused *,
.animations-paused *::before,
.animations-paused *::after {
    animation-play-state: paused !important;
}

/* ============================================================
   BESPOKE ULTRA-THIN STUDIO SCROLLBARS
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   STUDIO GLASS & SURFACE UTILITIES
   ============================================================ */
.studio-glass {
    background: rgba(15, 16, 21, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--studio-border) !important;
}

.studio-panel {
    background-color: var(--studio-panel) !important;
    border-color: var(--studio-border) !important;
}

.studio-card {
    background-color: var(--studio-card) !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 10px !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.studio-card:hover {
    background-color: var(--studio-card-hover) !important;
    border-color: var(--studio-border-hover) !important;
}

.hairline-border {
    border: 1px solid var(--studio-border) !important;
}

.hairline-border-b {
    border-bottom: 1px solid var(--studio-border) !important;
}

.hairline-border-r {
    border-right: 1px solid var(--studio-border) !important;
}

.hairline-border-l {
    border-left: 1px solid var(--studio-border) !important;
}

.hairline-border-t {
    border-top: 1px solid var(--studio-border) !important;
}

.floating-glass-pill {
    background: rgba(15, 16, 21, 0.96) !important;
    border: 1px solid var(--studio-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
}

/* ============================================================
   APP SHELL, HEADER & STEPPER
   ============================================================ */
#app-header {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    height: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 50 !important;
}

#app-stepper button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#app-stepper button:hover {
    transform: translateY(-1px);
}

/* ============================================================
   PANELS & SIDEBARS (LEFT & RIGHT)
   ============================================================ */
#left-panel,
#right-panel {
    background-color: var(--studio-surface) !important;
    color: #f8fafc !important;
    border-color: var(--studio-border) !important;
}

#left-panel {
    border-right: 1px solid var(--studio-border) !important;
}

#right-panel {
    border-left: 1px solid var(--studio-border) !important;
}

#left-panel > div:first-child,
#right-panel > div:first-child,
#panel-tab-layers > div:first-child {
    background-color: rgba(15, 16, 21, 0.98) !important;
    border-bottom: 1px solid var(--studio-border) !important;
}

/* Custom CSS class to reliably collapse panels on desktop */
#left-panel.hidden,
#right-panel.hidden,
#left-panel.collapsed-sidebar,
#right-panel.collapsed-sidebar {
    display: none !important;
}

/* Sidebar toggle handles - Docked to screen edges when closed, anchored to panel borders when open */
#left-sidebar-toggle-handle,
#right-sidebar-toggle-handle,
#left-sidebar-toggle-handle:hover,
#right-sidebar-toggle-handle:hover,
#left-sidebar-toggle-handle:active,
#right-sidebar-toggle-handle:active {
    transform: translateY(-50%) !important;
    animation: none !important;
    transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1), right 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

#left-sidebar-toggle-handle {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    background-color: #151720 !important;
    border: 1px solid var(--studio-border) !important;
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    color: #94a3b8 !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4) !important;
}

#right-sidebar-toggle-handle {
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;
    background-color: #151720 !important;
    border: 1px solid var(--studio-border) !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    color: #94a3b8 !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.4) !important;
}

/* When left panel is open on desktop, smoothly anchor handle to the right edge of left panel (16px left margin + 320px width = 336px) */
#app-shell:has(#left-panel:not(.hidden):not(.collapsed-sidebar)) #left-sidebar-toggle-handle,
#left-sidebar-toggle-handle.attached-to-panel {
    left: 336px !important;
}

/* Explicit fallback to edge when left panel is closed */
#app-shell:has(#left-panel.hidden) #left-sidebar-toggle-handle,
#app-shell:has(#left-panel.collapsed-sidebar) #left-sidebar-toggle-handle {
    left: 0 !important;
}

/* When right panel is open on desktop, smoothly anchor handle to the left edge of right panel (16px right margin + 320px width = 336px) */
#app-shell:has(#right-panel:not(.hidden):not(.collapsed-sidebar)) #right-sidebar-toggle-handle,
#right-sidebar-toggle-handle.attached-to-panel {
    right: 336px !important;
}

/* Explicit fallback to edge when right panel is closed */
#app-shell:has(#right-panel.hidden) #right-sidebar-toggle-handle,
#app-shell:has(#right-panel.collapsed-sidebar) #right-sidebar-toggle-handle {
    right: 0 !important;
}

#left-sidebar-toggle-handle:hover,
#right-sidebar-toggle-handle:hover {
    background-color: #1f2333 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#left-sidebar-toggle-handle i,
#right-sidebar-toggle-handle i {
    transform: none !important;
    transition: none !important;
}

/* Dropzone clean container */
#dropzone {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#dropzone:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   PAGE CARDS IN LEFT SIDEBAR (FILMSTRIP CARDS)
   ============================================================ */
.page-item,
#pages-list > div {
    background-color: #12141c !important;
    color: #cbd5e1 !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.page-item:hover,
#pages-list > div:not(.page-item-active):hover {
    background-color: #181b26 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateX(2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.page-item-active,
.page-item.active,
#pages-list .page-item-active,
#pages-list .bg-indigo-600\/20,
#pages-list .bg-indigo-600 {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--studio-primary) !important;
    border-left: 3px solid var(--studio-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.18), 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
    transform: translateX(3px) !important;
}

.page-item-active .thumb-frame,
.page-item.active .thumb-frame {
    border: 1.5px solid var(--studio-primary) !important;
    box-shadow: 0 0 10px var(--studio-primary-glow) !important;
}

/* Pages Search Bar */
#pages-search-input {
    padding-left: 32px !important;
    background-color: #08090c !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 10px !important;
    transition: all 0.18s ease !important;
}

#pages-search-input:focus {
    border-color: var(--studio-amber) !important;
    box-shadow: 0 0 0 2px var(--studio-amber-glow) !important;
}

/* Left Sidebar Popover Menu */
#left-more-actions-menu {
    animation: fadeInScale 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background: rgba(15, 16, 21, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================
   CANVAS TOP BAR & STUDIO VIEWPORT
   ============================================================ */
#canvas-top-bar {
    position: fixed !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 38px !important;
    background-color: rgba(15, 16, 21, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

#canvas-top-bar button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#canvas-top-bar button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
}

#canvas-top-bar button:active:not(:disabled) {
    transform: translateY(0) !important;
}

#canvas-top-bar span,
#canvas-top-bar div {
    white-space: nowrap !important;
}

/* FigJam Zoom Controls — permanently pinned to bottom-right corner */
#figjam-zoom-controls {
    position: fixed !important;
    bottom: 12px !important;
    right: 16px !important;
    height: 38px !important;
    border-radius: 12px !important;
    left: auto !important;
    top: auto !important;
    z-index: 50 !important;
}

#eraser-primary-hud {
    height: 38px !important;
    border-radius: 12px !important;
}

/* Workspace Viewport & Dot Grid */
#workspace-viewport {
    justify-content: safe center;
    align-items: safe center;
    background-color: #08090c !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

#workspace-empty-state {
    position: fixed !important;
    top: 4.5rem !important;
    bottom: 3.5rem !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    background: radial-gradient(circle at 50% 40%, rgba(99, 102, 241, 0.06) 0%, rgba(15, 16, 21, 0.6) 60%, transparent 100%);
    transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1), right 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 1024px) {
    #app-shell:has(#left-panel:not(.hidden):not(.collapsed-sidebar)) #workspace-empty-state {
        left: 336px !important;
    }
    #app-shell:has(#left-panel.hidden) #workspace-empty-state,
    #app-shell:has(#left-panel.collapsed-sidebar) #workspace-empty-state {
        left: 0 !important;
    }
    #app-shell:has(#right-panel:not(.hidden):not(.collapsed-sidebar)) #workspace-empty-state {
        right: 336px !important;
    }
    #app-shell:has(#right-panel.hidden) #workspace-empty-state,
    #app-shell:has(#right-panel.collapsed-sidebar) #workspace-empty-state {
        right: 0 !important;
    }
}

#workspace-empty-state .border-dashed:hover {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.25);
}

/* Space Pan Cursors */
body.space-pan-active,
body.space-pan-active #workspace-viewport,
body.space-pan-active #eraser-canvas,
body.space-pan-active #foreground-canvas,
body.space-pan-active #selection-overlay-canvas,
body.space-pan-active #inpaint-layers-container canvas,
body.space-pan-active #manga-canvas-container,
.space-pan-active {
    cursor: grab !important;
}

body.space-panning,
body.space-panning #workspace-viewport,
body.space-panning #eraser-canvas,
body.space-panning #foreground-canvas,
body.space-panning #selection-overlay-canvas,
body.space-panning #inpaint-layers-container canvas,
body.space-panning #manga-canvas-container,
.space-panning {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Figma-style Free Infinite Canvas Stage */
#workspace-canvas-stage {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80vh 80vw;
    box-sizing: border-box;
    pointer-events: auto;
}

#workspace-viewport {
    scroll-behavior: auto;
}

#workspace-viewport::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
#workspace-viewport::-webkit-scrollbar-track {
    background: transparent;
}
#workspace-viewport::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 9999px;
}
#workspace-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Manga Canvas Container & Overlays */
.manga-container {
    position: relative;
    user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    border-radius: 8px !important;
    height: 100%;
    max-height: 100%;
    width: max-content !important;
    max-width: max-content !important;
    display: inline-block;
    flex-shrink: 0 !important;
}

.manga-container.hidden,
#manga-canvas-container.hidden,
#workspace-split-wrapper.hidden,
#workspace-empty-state.hidden {
    display: none !important;
}

/* Pixel-perfect sharp nearest-neighbor rendering for high zoom (screentone / halftone inspection) */
.pixelated-zoom img,
.pixelated-zoom canvas,
.manga-container.pixelated-zoom img,
.manga-container.pixelated-zoom canvas,
#patch-preview-canvas {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
}

/* Text and active transform canvases must preserve high-resolution vector anti-aliasing */
.pixelated-zoom .manga-texts-canvas,
.pixelated-zoom .manga-active-canvas,
.pixelated-zoom #manga-texts-canvas,
.pixelated-zoom #manga-active-canvas,
.manga-container.pixelated-zoom .manga-texts-canvas,
.manga-container.pixelated-zoom .manga-active-canvas,
.manga-container.pixelated-zoom #manga-texts-canvas,
.manga-container.pixelated-zoom #manga-active-canvas {
    image-rendering: auto !important;
}

.bubble-overlay {
    position: absolute;
    cursor: move;
    border: 2px dashed rgba(99, 102, 241, 0.6);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
}

.bubble-overlay:hover {
    border: 2px dashed #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
}

.bubble-overlay.active {
    border: 2px dashed #6366f1 !important;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.35) !important;
    z-index: 50;
}

.bubble-overlay.is-locked:not(.active) {
    cursor: default !important;
    border-style: dotted !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    pointer-events: none !important;
}

.bubble-overlay.is-locked:not(.active) .bubble-lock-badge {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.bubble-overlay.is-locked:hover {
    border-color: rgba(245, 158, 11, 0.9) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}

.bubble-overlay.is-locked.active {
    cursor: default !important;
    border-style: dotted !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.35) !important;
    pointer-events: auto !important;
}

/* 4-Corner Perspective Pinning Direct Canvas Handles */
.bubble-overlay.perspective-active {
    border-color: rgba(217, 70, 239, 0.6) !important;
}
.bubble-overlay.perspective-active:hover {
    border-color: #f43f5e !important;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.35) !important;
}
.bubble-overlay.perspective-active.active {
    border: 2px dashed #d946ef !important;
    box-shadow: 0 0 16px rgba(217, 70, 239, 0.45) !important;
}

.perspective-pin-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #d946ef;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(217, 70, 239, 0.9), 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 65;
    cursor: crosshair;
    transition: transform 0.15s ease, background-color 0.15s ease;
    pointer-events: auto;
}
.perspective-pin-handle:hover {
    transform: scale(1.35);
    background: #f43f5e;
}
.perspective-pin-handle.pin-tl { top: -6px; left: -6px; }
.perspective-pin-handle.pin-tr { top: -6px; right: -6px; }
.perspective-pin-handle.pin-br { bottom: -6px; right: -6px; }
.perspective-pin-handle.pin-bl { bottom: -6px; left: -6px; }

/* Canvas Overlapping Layers Context Menu */
#canvas-layer-context-menu {
    position: fixed;
    z-index: 99999;
    min-width: 260px;
    max-width: 340px;
    border-radius: 12px;
    box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    overflow: hidden;
    animation: contextMenuPop 0.12s ease-out;
}

@keyframes contextMenuPop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   Modern Figma-Style Resizing Handles (Optimized Hitbox & Slim Edge Bars)
   ========================================================================== */
.resize-handle {
    position: absolute;
    z-index: 60;
    display: none;
    touch-action: none;
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.bubble-overlay.active .resize-handle {
    display: block;
}

/* Center Anchor Reticle: Điểm neo / điểm khởi đầu nhận diện bóng thoại mờ ở tâm block */
.bubble-anchor-reticle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    display: none;
    z-index: 15;
    opacity: 0.38;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bubble-overlay.active .bubble-anchor-reticle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble-overlay.active:hover .bubble-anchor-reticle {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.15);
}

/* 4 Corner Handles: Tinh gọn, vuông vắn chuẩn Figma với viền tím sắc nét */
.resize-nw,
.resize-ne,
.resize-se,
.resize-sw {
    width: 9px;
    height: 9px;
    background-color: #ffffff;
    border: 2px solid #6366f1;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.resize-nw:hover,
.resize-ne:hover,
.resize-se:hover,
.resize-sw:hover {
    transform: scale(1.25);
    background-color: #6366f1;
    border-color: #ffffff;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.6);
}

.resize-nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize-ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize-se { bottom: -5px; right: -5px; cursor: se-resize; }
.resize-sw { bottom: -5px; left: -5px; cursor: sw-resize; }

/* Hitbox góc tinh gọn: 18px (vừa đủ nhạy, không chạm vào cạnh hay chữ) */
.resize-nw::after,
.resize-ne::after,
.resize-se::after,
.resize-sw::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    pointer-events: auto;
}

/* 4 Edge Handles: Thanh gạch mảnh (Slim Pill Bar) thanh lịch, không choán chữ */
.resize-n,
.resize-s {
    width: 16px;
    height: 4px;
    background-color: #6366f1;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.resize-n:hover,
.resize-s:hover {
    transform: scaleY(1.5) scaleX(1.1);
    background-color: #4f46e5;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.6);
}

.resize-n { top: -3px; left: calc(50% - 8px); cursor: ns-resize; }
.resize-s { bottom: -3px; left: calc(50% - 8px); cursor: ns-resize; }

.resize-n::after,
.resize-s::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 14px;
    pointer-events: auto;
}

.resize-w,
.resize-e {
    width: 4px;
    height: 16px;
    background-color: #6366f1;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.resize-w:hover,
.resize-e:hover {
    transform: scaleX(1.5) scaleY(1.1);
    background-color: #4f46e5;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.6);
}

.resize-w { top: calc(50% - 8px); left: -3px; cursor: ew-resize; }
.resize-e { top: calc(50% - 8px); right: -3px; cursor: ew-resize; }

.resize-w::after,
.resize-e::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 22px;
    pointer-events: auto;
}

/* Tự thích ứng màn hình cảm ứng: Tăng nhẹ hitbox cho ngón tay */
@media (pointer: coarse) {
    .resize-nw::after,
    .resize-ne::after,
    .resize-se::after,
    .resize-sw::after {
        width: 26px;
        height: 26px;
    }
    .resize-n::after,
    .resize-s::after {
        width: 30px;
        height: 20px;
    }
    .resize-w::after,
    .resize-e::after {
        width: 20px;
        height: 30px;
    }
}

/* Rotation Stem & Pin Handle */
.rotate-stem {
    position: absolute;
    top: -24px;
    left: 50%;
    width: 1.5px;
    height: 24px;
    background-color: #6366f1;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 59;
    display: none;
}

.rotate-handle {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2.5px solid #6366f1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: grab;
    z-index: 60;
    display: none;
    touch-action: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.rotate-handle:hover {
    background-color: #e0e7ff;
    transform: translateX(-50%) scale(1.2);
}

.rotate-handle:active {
    cursor: grabbing;
}

.rotate-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    pointer-events: auto;
}

.bubble-overlay.active .rotate-stem,
.bubble-overlay.active .rotate-handle {
    display: block;
}

/* Real-time Angle Tooltip HUD */
.rotate-hud-badge {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -100%);
    background: rgba(15, 23, 42, 0.94);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.5);
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 99999;
}

.exporting-mode .resize-handle,
.exporting-mode .rotate-stem,
.exporting-mode .rotate-handle,
.exporting-mode .rotate-hud-badge,
.exporting-mode .bubble-anchor-reticle,
.exporting-mode .smart-guides-svg { display: none !important; }
.exporting-mode .bubble-overlay { border: none !important; box-shadow: none !important; will-change: auto !important; }

/* ============================================================
   PERFORMANCE MODE (low-perf-mode) — Máy cấu hình thấp
   Vô hiệu hoá backdrop-filter, giảm shadow nặng, tắt animation
   phức tạp để tăng FPS và giảm tải GPU tích hợp.
   ============================================================ */
body.low-perf-mode .studio-glass,
body.low-perf-mode .floating-glass-pill,
body.low-perf-mode [style*="backdrop-filter"],
body.low-perf-mode .canvas-floating-toolbar,
body.low-perf-mode #canvas-floating-toolbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Thay thế glass bằng solid background để vẫn đọc được */
body.low-perf-mode .studio-glass {
    background: rgba(13, 14, 19, 0.97) !important;
}
body.low-perf-mode .floating-glass-pill {
    background: rgba(13, 14, 19, 0.97) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Giảm box-shadow đa tầng về shadow đơn giản */
body.low-perf-mode *:not(.bubble-overlay):not(canvas) {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Cho phép bubble overlay giữ outline tối giản */
body.low-perf-mode .bubble-overlay {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4) !important;
}

/* Tắt transition animation nặng — giữ lại transition nhanh < 120ms */
body.low-perf-mode * {
    transition-duration: 0ms !important;
    animation-duration: 0.1ms !important;
    animation-iteration-count: 1 !important;
}

/* Ngoại lệ: giữ spinner/progress vẫn animate */
body.low-perf-mode .animate-spin,
body.low-perf-mode [class*="animate-bounce"],
body.low-perf-mode [class*="animate-pulse"] {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
}

/* Tắt will-change để tránh tạo layer GPU không cần thiết */
body.low-perf-mode * {
    will-change: auto !important;
}


/* Canvas Floating Quick Toolbar for Active Block */
#canvas-floating-toolbar {
    pointer-events: auto;
    border-radius: 16px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    animation: popInFloating 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#canvas-floating-toolbar.toolbar-dragging-fade {
    opacity: 0.15 !important;
    pointer-events: none !important;
}

/* Mode Top Styling (Fixed at screen top center, below header islands) */
#canvas-floating-toolbar.mode-top {
    position: fixed !important;
    top: 72px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 48 !important;
}

/* Mode Bottom Styling (Docked above canvas bottom bar) */
#canvas-floating-toolbar.mode-bottom {
    position: fixed !important;
    top: auto !important;
    bottom: 84px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 48 !important;
}

/* Dropdown positions in Mode Top vs Mode Bottom */
#canvas-floating-toolbar.mode-top #floating-font-menu,
#canvas-floating-toolbar.mode-top #floating-color-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 6px !important;
}

#canvas-floating-toolbar.mode-bottom #floating-font-menu,
#canvas-floating-toolbar.mode-bottom #floating-color-menu {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 6px !important;
}

#canvas-floating-toolbar.hidden {
    display: none !important;
}

#canvas-floating-toolbar button:not(.active):not(.active-amber):not([class*="bg-indigo-600"]):not([class*="bg-amber-500"]):not(#floating-font-trigger):not(#floating-color-trigger) {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

#canvas-floating-toolbar button:not(.active):not(.active-amber):not([class*="bg-indigo-600"]):not([class*="bg-amber-500"]):hover {
    background-color: rgba(99, 102, 241, 0.12);
}

#canvas-floating-toolbar .floating-tool-btn.active,
#canvas-floating-toolbar button.active,
#canvas-floating-toolbar button[class*="bg-indigo-600"] {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35) !important;
}

#canvas-floating-toolbar .floating-tool-btn.active-amber,
#canvas-floating-toolbar button.active-amber,
#canvas-floating-toolbar button[class*="bg-amber-500"] {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

@keyframes popInFloating {
    from {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* ============================================================
   GLOBAL BUTTONS, INPUTS & FORMS
   ============================================================ */
button:not(#left-sidebar-toggle-handle):not(#right-sidebar-toggle-handle) {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

button:not(:disabled):not(#left-sidebar-toggle-handle):not(#right-sidebar-toggle-handle):hover {
    transform: translateY(-1px);
}

button:not(:disabled):not(#left-sidebar-toggle-handle):not(#right-sidebar-toggle-handle):active {
    transform: translateY(0.5px);
}

button:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Inputs, Textareas, Selects */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--studio-primary) !important;
    box-shadow: 0 0 0 2px var(--studio-primary-glow) !important;
    outline: none !important;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.2rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Range Inputs */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #1e293b;
    border-radius: 9999px;
    height: 6px;
    outline: none;
    border: 1px solid var(--studio-border);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #6366f1;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.1s ease;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #4f46e5;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #6366f1;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.1s ease;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: #4f46e5;
}

/* Color Swatches & Presets */
[onclick*="setEraserColor('#ffffff')"] {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

[onclick*="setEraserColor('#000000')"] {
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Modals & Dialogs */
#settings-modal > div,
#lorebook-modal > div,
#help-modal > div,
#gdrive-modal > div,
#find-replace-modal > div,
#srs-modal > div,
#batch-export-modal > div,
#preview-mode-modal > div {
    background-color: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #090d16;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* ============================================================
   PRE-BUNDLED MANGA SCANLATION FONTS (TeddyBear Việt Hóa)
   ============================================================ */
@font-face {
    font-family: '000 Akbar [TeddyBear]';
    src: url('./font/000%20Akbar%20%5BTeddyBear%5D.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Akbar';
    src: url('./font/000%20Akbar%20%5BTeddyBear%5D.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '000 Clairvoyant BB [TeddyBear]';
    src: url('./font/000%20Clairvoyant%20BB%20%5BTeddyBear%5D.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Clairvoyant BB';
    src: url('./font/000%20Clairvoyant%20BB%20%5BTeddyBear%5D.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '000 Oh Crud BB [TeddyBear]';
    src: url('./font/000%20Oh%20Crud%20BB%20%5BTeddyBear%5D.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oh Crud BB';
    src: url('./font/000%20Oh%20Crud%20BB%20%5BTeddyBear%5D.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'animeace2_reg';
    src: url('./font/animeace2_reg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anime Ace 2';
    src: url('./font/animeace2_reg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LIT-Feast of Flesh BB';
    src: url('./font/LIT-Feast%20of%20Flesh%20BB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Feast of Flesh BB';
    src: url('./font/LIT-Feast%20of%20Flesh%20BB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-akbar { font-family: '000 Akbar [TeddyBear]', 'Akbar', 'Nunito', sans-serif; }
.font-clairvoyant { font-family: '000 Clairvoyant BB [TeddyBear]', 'Clairvoyant BB', 'Nunito', sans-serif; }
.font-oh-crud { font-family: '000 Oh Crud BB [TeddyBear]', 'Oh Crud BB', 'Bangers', cursive, sans-serif; }
.font-animeace2 { font-family: 'animeace2_reg', 'Anime Ace 2', 'Nunito', sans-serif; }
.font-feast-of-flesh { font-family: 'LIT-Feast of Flesh BB', 'Feast of Flesh BB', 'Bangers', cursive, sans-serif; }

/* ============================================================
   MANGA FONTS & CORE STYLING
   ============================================================ */
.font-manga { font-family: 'Nunito', sans-serif; font-weight: 700; }
.font-vietnamese { font-family: 'Be Vietnam Pro', 'Inter', sans-serif; font-weight: 600; letter-spacing: 0; }
.font-comic { font-family: 'Patrick Hand', cursive; }
.font-comicneue { font-family: 'Comic Neue', cursive; font-weight: 700; }
.font-impact { font-family: 'Bangers', cursive; letter-spacing: 0.05em; }
.font-marker { font-family: 'Permanent Marker', cursive; }
.font-bungee { font-family: 'Bungee', cursive; }
.font-caveat { font-family: 'Caveat', cursive; font-weight: 700; }
.font-tech { font-family: 'Chakra Petch', sans-serif; font-weight: 700; }
.font-condensed { font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase; }

.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.text-vertical,
.text-vertical * {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

.bubble-text-span {
    -webkit-font-smoothing: antialiased;
    paint-order: stroke fill;
}

/* Chống tự động đảo màu ở chế độ tối trên Canvas & Overlays */
#manga-canvas-container,
#manga-canvas-container *,
#manga-overlays-container,
#manga-overlays-container *,
.manga-covers-layer,
.manga-covers-layer *,
.manga-texts-layer,
.manga-texts-layer *,
.bubble-overlay,
.bubble-overlay * {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
    color-scheme: light !important;
    filter: none !important;
    -webkit-filter: none !important;
}

#eraser-canvas.drawing-active {
    cursor: crosshair;
    pointer-events: auto !important;
    touch-action: none;
}

#foreground-canvas.drawing-active {
    cursor: crosshair;
    pointer-events: auto !important;
    touch-action: none;
}

#manga-overlays-container.pointer-events-none,
#manga-overlays-container.pointer-events-none * {
    pointer-events: none !important;
}

/* SRS Flashcard 3D */
.srs-card-perspective { perspective: 1000px; }
.srs-card-inner { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; }
.srs-card-flipped { transform: rotateY(180deg); }

/* Mobile Safe Areas & Touch Utilities */
.safe-area-bottom {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
}

.safe-area-top {
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
}

#workspace-viewport.touch-hand-mode {
    cursor: grab !important;
}

#workspace-viewport.touch-hand-mode:active {
    cursor: grabbing !important;
}

/* Mobile & Tablet Responsive Design */
@media (max-width: 1024px) {
    body {
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }

    #app-shell {
        flex-direction: row;
        overflow: hidden;
        height: 100%;
        position: relative;
    }

    /* Smooth Slide-over Drawers */
    #left-panel,
    #right-panel {
        display: flex !important;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 86vw;
        max-width: 380px;
        min-width: 0;
        z-index: 60;
        background: #0f172a !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.85);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #left-panel {
        left: 0;
        border-right: 1px solid var(--studio-border) !important;
        border-left: none !important;
        transform: translateX(-105%);
    }

    #right-panel {
        right: 0;
        border-left: 1px solid var(--studio-border) !important;
        border-right: none !important;
        transform: translateX(105%);
    }

    body.mobile-menu-left-open #left-panel {
        transform: translateX(0) !important;
    }

    body.mobile-menu-right-open #right-panel {
        transform: translateX(0) !important;
    }

    /* Hide desktop toggle handles, canvas bar, zoom controls and mascot on mobile/tablet */
    #left-sidebar-toggle-handle,
    #right-sidebar-toggle-handle,
    #canvas-top-bar,
    #figjam-zoom-controls,
    #manga-mascot-widget {
        display: none !important;
    }

    /* Backdrop Overlay */
    #mobile-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(2, 6, 23, 0.75);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: opacity 0.2s ease;
    }

    body.mobile-menu-left-open #mobile-menu-backdrop,
    body.mobile-menu-right-open #mobile-menu-backdrop {
        display: block !important;
    }

    #workspace-panel {
        width: 100%;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #workspace-viewport {
        padding: 0;
        padding-bottom: 3.8rem; /* Ergonomic clearance for unified bottom bar */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }

    #workspace-split-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
        padding-bottom: 4rem;
    }

    #workspace-split-wrapper>div { width: 100%; }
    #workspace-split-wrapper img { max-width: 100% !important; width: 100%; }
    #manga-canvas-container { width: 100%; max-width: 100%; }

    /* Unified Mobile Action Bar */
    #mobile-bottom-bar {
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
        min-height: 3.25rem;
    }

    /* Mobile Quick Edit Bottom Sheet */
    #mobile-quick-edit-sheet {
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        animation: slideUpQuickSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUpQuickSheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Floating Eraser Settings Panel on Mobile / Tablet */
    #eraser-settings-panel {
        position: fixed !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
        top: auto !important;
        bottom: 4rem !important;
        width: auto !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        max-height: 70vh !important;
        z-index: 50 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85) !important;
    }

    /* Mobile Canvas Floating Toolbar */
    #canvas-floating-toolbar {
        max-width: 90vw;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    #canvas-floating-toolbar button {
        min-width: 32px;
        min-height: 32px;
    }
}

/* Strict Mobile (< 768px) Overlap Prevention */
@media (max-width: 768px) {
    #header-btn-batch-translate,
    #header-btn-export,
    #header-autosave-indicator {
        display: none !important;
    }
}

/* Custom Scrollbar for Presets & Panels */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.8);
}

/* Magic Wand Tool & Snapping Animations */
.magic-wand-cursor,
.magic-wand-cursor *,
#manga-canvas-container.magic-wand-active,
#manga-canvas-container.magic-wand-active * {
    cursor: crosshair !important;
}

#manga-canvas-container.magic-wand-active .bubble-overlay,
#manga-canvas-container.magic-wand-active .bubble-overlay * {
    cursor: pointer !important;
}

#magic-wand-highlight-box {
    position: absolute;
    border: 2px dashed #c084fc !important;
    background-color: rgba(168, 85, 247, 0.22) !important;
    border-radius: 12px;
    z-index: 9999 !important;
    pointer-events: none !important;
    box-sizing: border-box;
    display: none;
}

#magic-wand-highlight-box.active {
    display: block !important;
    animation: magicWandPulse 1.2s infinite ease-in-out;
}

@keyframes magicWandPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(168, 85, 247, 0.5), inset 0 0 8px rgba(168, 85, 247, 0.25);
        border-color: #a855f7;
    }
    50% {
        box-shadow: 0 0 26px rgba(192, 132, 252, 0.9), inset 0 0 18px rgba(192, 132, 252, 0.45);
        border-color: #e9d5ff;
    }
}

.bubble-overlay.snap-pulse-active {
    animation: blockSnapFlash 0.75s ease-out;
}

@keyframes blockSnapFlash {
    0% {
        box-shadow: 0 0 0 4px #a855f7, 0 0 25px #c084fc;
        transform: scale(1.03);
    }
    50% {
        box-shadow: 0 0 0 2px #c084fc, 0 0 15px #a855f7;
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}

/* Canvas Marquee Box Selection */
.canvas-marquee-box {
    position: absolute;
    border: 1.5px dashed #6366f1 !important;
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-radius: 6px;
    z-index: 9998 !important;
    pointer-events: none !important;
    box-sizing: border-box;
}

/* Default Typeset Overlay Settings */
.mask-content {
    line-height: 1.15;
    padding: 9% 12%;
    box-sizing: border-box;
}

/* ==========================================================================
   Manga Studio Pro & UX Tiering Styling
   ========================================================================== */

.badge-pro-gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.35) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fde68a;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.btn-pro-gold {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-pro-gold:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

/* Pro Glow Shimmer */
@keyframes proGoldShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.pro-gold-shimmer {
    background: linear-gradient(90deg, #f59e0b 0%, #fef08a 50%, #f59e0b 100%);
    background-size: 200% 100%;
    animation: proGoldShimmer 3s infinite linear;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header & Dropdown Stacking Context Fix */
#app-header {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 50 !important;
}

#header-tools-dropdown,
#header-user-dropdown {
    z-index: 60 !important;
    background-color: #0f1015 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

#header-tools-dropdown button,
#header-tools-dropdown a,
#header-user-dropdown button {
    color: #cbd5e1 !important;
}

#header-tools-dropdown button:hover,
#header-tools-dropdown a:hover,
#header-user-dropdown button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

#pages-add-dropdown {
    background-color: #0f1015 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
    color: #f8fafc !important;
}

#pages-add-dropdown button {
    color: #e2e8f0 !important;
}

#pages-add-dropdown button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#canvas-top-bar {
    position: fixed !important;
    z-index: 50 !important;
}

/* ==========================================================================
   RIGHT PANEL: INSPECTOR, TYPOGRAPHY STUDIO & FLOATING BRUSH BOX
   ========================================================================== */

#right-panel {
    background-color: #0f1015 !important;
    border-left: 1px solid var(--studio-border) !important;
}

/* Studio Tabs Header in Right Panel */
#right-panel > div:first-of-type {
    background-color: rgba(8, 9, 12, 0.92) !important;
    border-bottom: 1px solid var(--studio-border) !important;
}

#tab-edit,
#tab-style {
    letter-spacing: 0.04em !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tab-edit:hover,
#tab-style:hover {
    color: #f8fafc !important;
}

/* Floating Eraser Settings Panel (Brush HUD) */
#eraser-settings-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#btn-eraser-floating-trigger {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35) !important;
}

#btn-brush-mode-spot-inpaint.bg-purple-600 {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
    color: #ffffff !important;
    border-color: rgba(192, 132, 252, 0.4) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4) !important;
}

#btn-brush-ai-fill:not(:disabled) {
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25) !important;
}

/* Studio Sliders (Clean thin tracks with glowing studio thumbs) */
#right-panel input[type="range"],
#eraser-settings-panel input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 4px !important;
    background: #1c1e2b !important;
    border-radius: 9999px !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

#right-panel input[type="range"]::-webkit-slider-thumb,
#eraser-settings-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#right-panel input[type="range"]::-webkit-slider-thumb:hover,
#eraser-settings-panel input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.9) !important;
}

#right-panel input[type="range"]::-moz-range-thumb,
#eraser-settings-panel input[type="range"]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6) !important;
    cursor: pointer !important;
}

/* Studio Color Inputs & Hex Textboxes */
#right-panel input[type="color"],
#eraser-settings-panel input[type="color"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background-color: transparent !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

#right-panel input[type="color"]::-webkit-color-swatch-wrapper,
#eraser-settings-panel input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0 !important;
    border-radius: 8px !important;
}

#right-panel input[type="color"]::-webkit-color-swatch,
#eraser-settings-panel input[type="color"]::-webkit-color-swatch {
    border: none !important;
    border-radius: 7px !important;
}

/* Studio Font Picker Dropdown */
#font-picker-dropdown {
    background: rgba(15, 16, 21, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

#font-picker-dropdown button:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

/* Studio Accordion Container (SFX, Nudge, Shadows) - Borderless Flat */
#right-panel details.group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

#right-panel details.group[open] {
    border: none !important;
    box-shadow: none !important;
}

/* Custom Presets Cards in Style Tab */
#custom-presets-container .preset-item-row {
    background-color: #12141c !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 10px !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#custom-presets-container .preset-item-row:hover {
    background-color: #171924 !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

/* ==========================================================================
   MODAL DIALOGS & OVERLAYS (MANGA PRO STUDIO HUD)
   ========================================================================== */

/* Fullscreen Overlays Backdrop */
#modals-container > div,
#processing-overlay,
#export-hub-modal,
#qc-dashboard-modal,
#script-review-modal,
#studio-custom-dialog-container,
#preview-modal {
    background-color: rgba(4, 5, 8, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Studio Modal Cards Shell */
#modals-container > div > div,
#export-hub-modal > div,
#qc-dashboard-modal > div,
#script-review-modal > div,
#studio-custom-dialog-container > div,
#preview-modal > div {
    background-color: #0f1015 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    animation: studioModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Modal Headers & Footers */
#modals-container .modal-header,
#settings-modal > div > div:first-child,
#lorebook-dossier-modal > div > div:first-child,
#gdrive-modal > div > div:first-child,
#audio-settings-modal > div > div:first-child,
#find-replace-modal > div > div:first-child,
#export-modal > div > div:first-child,
#help-modal > div > div:first-child,
#custom-preset-modal > div > div:first-child,
#visual-rules-modal > div > div:first-child {
    background-color: rgba(8, 9, 12, 0.95) !important;
    border-bottom: 1px solid var(--studio-border) !important;
}

/* Modal Sub-cards & Sections */
#lorebook-dossier-modal .profile-card,
#audio-settings-modal .voice-card,
#preview-modal .preview-panel,
#export-hub-modal-body > div,
#qc-modal-body > div,
#script-review-modal .script-item {
    background-color: #12141c !important;
    border: 1px solid var(--studio-border) !important;
    border-radius: 12px !important;
}

/* Inputs, Selects and Textareas inside Modals */
#modals-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#modals-container select,
#modals-container textarea,
#export-hub-modal input,
#qc-dashboard-modal input,
#script-review-modal input,
#script-review-modal textarea {
    background-color: #08090c !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#modals-container input:focus,
#modals-container select:focus,
#modals-container textarea:focus,
#export-hub-modal input:focus,
#qc-dashboard-modal input:focus,
#script-review-modal input:focus,
#script-review-modal textarea:focus {
    border-color: var(--studio-primary) !important;
    box-shadow: 0 0 0 2px var(--studio-primary-glow) !important;
    outline: none !important;
}

/* Animation Keyframes */
@keyframes studioModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================
   MANGA TRANSLATOR STUDIO - LIGHT STUDIO THEME (CREATIVE COOL SLATE & DEEP INK)
   Bespoke, high-contrast light theme tailored for creative manga workflows.
   Designed with WCAG AAA contrast hierarchy, tactile cards, and crisp borders.
   Maintains contrast rule: Canvas viewport is Cool Slate (#e2e8f0) to preserve
   unmistakable, razor-sharp page boundaries for white manga pages.
   ============================================================ */

html[data-theme="light"] {
    color-scheme: light !important;

    /* Base Surfaces & Tactile Elevation */
    --studio-obsidian: #ffffff;
    --studio-bg: #f8fafc;
    --studio-panel: #ffffff;
    --studio-surface: #ffffff;
    --studio-card: #ffffff;
    --studio-card-hover: #f1f5f9;
    --studio-card-active: #e2e8f0;

    /* High-Contrast Crisp Borders (WCAG AAA) */
    --studio-border: #cbd5e1;
    --studio-border-hover: #94a3b8;
    --studio-border-glow: rgba(79, 70, 229, 0.35);
    --studio-border-subtle: #e2e8f0;

    /* Creative Accents */
    --studio-amber: #d97706;
    --studio-amber-hover: #b45309;
    --studio-amber-glow: rgba(217, 119, 6, 0.25);
    --studio-indigo: #4f46e5;
    --studio-primary: #4f46e5;
    --studio-primary-hover: #4338ca;
    --studio-primary-glow: rgba(79, 70, 229, 0.22);
    --studio-cyan: #0284c7;
    --studio-cyan-glow: rgba(2, 132, 199, 0.2);
    --studio-emerald: #059669;
    --studio-emerald-glow: rgba(5, 150, 105, 0.2);
    --studio-rose: #e11d48;
    --studio-sky: #0284c7;

    /* High-Contrast Typography Hierarchy (Deep Ink on White/Light Slate) */
    --studio-text-primary: #0f172a;
    --studio-text-secondary: #334155;
    --studio-text-muted: #64748b;
}

html[data-theme="light"] body {
    background-color: var(--studio-bg) !important;
    color: var(--studio-text-primary) !important;
}

/* Scrollbars in Light Mode */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 9999px !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Studio Glass & Surface Utilities in Light Mode */
html[data-theme="light"] .studio-glass {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .studio-panel {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .studio-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .studio-card:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .hairline-border {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .hairline-border-b {
    border-bottom-color: #cbd5e1 !important;
}

/* ============================================================
   UNIVERSAL CATCH-ALLS FOR HARDCODED DARK CLASSES
   Ensures complete coverage of all 550+ dark background utility instances.
   ============================================================ */
html[data-theme="light"] .bg-\[\#08090c\],
html[data-theme="light"] .bg-\[\#08090c\]\/40,
html[data-theme="light"] .bg-\[\#08090c\]\/50,
html[data-theme="light"] .bg-\[\#08090c\]\/60,
html[data-theme="light"] .bg-\[\#08090c\]\/80,
html[data-theme="light"] .bg-\[\#08090c\]\/90,
html[data-theme="light"] .bg-\[\#08090c\]\/95,
html[data-theme="light"] [class*="bg-[#08090c]"],
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-950\/30,
html[data-theme="light"] .bg-slate-950\/50,
html[data-theme="light"] .bg-slate-950\/60,
html[data-theme="light"] .bg-slate-950\/75,
html[data-theme="light"] .bg-slate-950\/80,
html[data-theme="light"] .bg-slate-950\/85,
html[data-theme="light"] .bg-slate-950\/95,
html[data-theme="light"] [class*="bg-slate-950"] {
    background-color: #f8fafc !important;
}

html[data-theme="light"] .bg-\[\#0f1015\],
html[data-theme="light"] .bg-\[\#0f1015\]\/50,
html[data-theme="light"] .bg-\[\#0f1015\]\/90,
html[data-theme="light"] .bg-\[\#0f1015\]\/95,
html[data-theme="light"] [class*="bg-[#0f1015]"],
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-900\/98,
html[data-theme="light"] [class*="bg-slate-900"] {
    background-color: #ffffff !important;
}

html[data-theme="light"] .bg-\[\#12141c\]\/40,
html[data-theme="light"] .bg-\[\#12141c\]\/60,
html[data-theme="light"] .bg-\[\#151720\],
html[data-theme="light"] .bg-\[\#151720\]\/80,
html[data-theme="light"] [class*="bg-[#151720]"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .bg-\[\#1c1e2b\],
html[data-theme="light"] .bg-\[\#1c1e2b\]\/80,
html[data-theme="light"] .bg-\[\#1e2130\],
html[data-theme="light"] [class*="bg-[#1c1e2b]"],
html[data-theme="light"] [class*="bg-[#1e2130]"],
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] [class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Hover Overrides for Dark Backgrounds */
html[data-theme="light"] .hover\:bg-\[\#151720\]:hover,
html[data-theme="light"] .hover\:bg-\[\#1c1e2b\]:hover,
html[data-theme="light"] .hover\:bg-\[\#252839\]:hover,
html[data-theme="light"] .hover\:bg-slate-800:hover,
html[data-theme="light"] .hover\:bg-slate-800\/70:hover,
html[data-theme="light"] .hover\:bg-slate-855:hover,
html[data-theme="light"] .hover\:bg-slate-900\/90:hover,
html[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover,
html[data-theme="light"] .hover\:bg-white\/10:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* High-Contrast Border Overrides */
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/\[0\.06\],
html[data-theme="light"] .border-white\/\[0\.07\],
html[data-theme="light"] .border-white\/\[0\.08\],
html[data-theme="light"] .border-white\/\[0\.08\]\/60,
html[data-theme="light"] .border-white\/\[0\.08\]\/70,
html[data-theme="light"] .border-white\/\[0\.08\]\/90,
html[data-theme="light"] .border-white\/\[0\.09\],
html[data-theme="light"] .border-white\/\[0\.1\],
html[data-theme="light"] .border-white\/\[0\.12\],
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-800\/80,
html[data-theme="light"] .border-slate-800\/90,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-700\/50,
html[data-theme="light"] .border-slate-600 {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .hover\:border-white\/20:hover,
html[data-theme="light"] .hover\:border-white\/\[0\.09\]:hover,
html[data-theme="light"] .hover\:border-white\/\[0\.12\]:hover,
html[data-theme="light"] .hover\:border-slate-600:hover,
html[data-theme="light"] .hover\:border-slate-500:hover {
    border-color: #94a3b8 !important;
}

/* ============================================================
   HIGH-CONTRAST TYPOGRAPHY & TEXT OVERRIDES
   ============================================================ */
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 {
    color: #0f172a !important;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-350,
html[data-theme="light"] .text-slate-400 {
    color: #334155 !important;
}

html[data-theme="light"] .text-slate-450,
html[data-theme="light"] .text-slate-500 {
    color: #475569 !important;
}

html[data-theme="light"] .text-slate-600 {
    color: #64748b !important;
}

html[data-theme="light"] .placeholder\:text-slate-500::placeholder,
html[data-theme="light"] .placeholder\:text-slate-600::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .hover\:text-slate-100:hover,
html[data-theme="light"] .hover\:text-slate-200:hover {
    color: #0f172a !important;
}

/* Handle text-white:
   Preserve white text on colored buttons (indigo, emerald, amber, rose, sky, purple, red, blue)
   while remapping surface white text to deep ink (#0f172a). */
html[data-theme="light"] .text-white:not([class*="bg-indigo"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-rose"]):not([class*="bg-purple"]):not([class*="bg-sky"]):not([class*="bg-blue"]):not([class*="bg-red"]):not(.badge-colored) {
    color: #0f172a !important;
}

html[data-theme="light"] [class*="bg-indigo"] .text-white,
html[data-theme="light"] [class*="bg-emerald"] .text-white,
html[data-theme="light"] [class*="bg-amber"] .text-white,
html[data-theme="light"] [class*="bg-rose"] .text-white,
html[data-theme="light"] [class*="bg-purple"] .text-white,
html[data-theme="light"] [class*="bg-sky"] .text-white,
html[data-theme="light"] [class*="bg-blue"] .text-white,
html[data-theme="light"] [class*="bg-red"] .text-white {
    color: #ffffff !important;
}

/* ============================================================
   TOP APP HEADER & STEPPER
   ============================================================ */
html[data-theme="light"] #app-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] #app-stepper {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] #app-stepper button {
    color: #334155 !important;
}

html[data-theme="light"] #app-stepper button:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #app-stepper button.stepper-active {
    background-color: #ffffff !important;
    color: #4338ca !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}

html[data-theme="light"] #app-header button#header-btn-lorebook,
html[data-theme="light"] #app-header button#btn-header-tools-menu,
html[data-theme="light"] #app-header button[data-action="openSettingsModal"],
html[data-theme="light"] #app-header button#btn-theme-toggle,
html[data-theme="light"] #app-header button#btn-keyboard-shortcuts {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #app-header button#header-btn-lorebook:hover,
html[data-theme="light"] #app-header button#btn-header-tools-menu:hover,
html[data-theme="light"] #app-header button[data-action="openSettingsModal"]:hover,
html[data-theme="light"] #app-header button#btn-theme-toggle:hover,
html[data-theme="light"] #app-header button#btn-keyboard-shortcuts:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08) !important;
}

#header-autosave-indicator {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
}

html[data-theme="light"] #header-autosave-indicator {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] #header-tools-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] #header-tools-dropdown button,
html[data-theme="light"] #header-tools-dropdown a {
    color: #0f172a !important;
}

html[data-theme="light"] #header-tools-dropdown button:hover,
html[data-theme="light"] #header-tools-dropdown a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ============================================================
   LEFT PANEL & FILMSTRIP
   ============================================================ */
html[data-theme="light"] #left-panel {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-right: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #left-panel > div:first-child,
html[data-theme="light"] #panel-tab-layers > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #panel-tab-layers [data-i18n="panel-layers-inpaint-title"],
html[data-theme="light"] #panel-tab-layers > div:first-child span {
    color: #0f172a !important;
}

html[data-theme="light"] #lasso-advanced-panel summary {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #lasso-advanced-panel summary:hover {
    background-color: #e2e8f0 !important;
}

/* Lasso Advanced Retouch & Pattern Fill Panel in Light Mode */
html[data-theme="light"] #lasso-advanced-panel {
    border-top-color: #e2e8f0 !important;
}

/* Sub-containers & Card Groups */
html[data-theme="light"] #lasso-advanced-panel .bg-slate-100,
html[data-theme="light"] #lasso-advanced-panel [class*="bg-slate-100"],
html[data-theme="light"] #lasso-advanced-panel .bg-slate-50,
html[data-theme="light"] #lasso-sec-patch,
html[data-theme="light"] #lasso-sec-phase-adjust,
html[data-theme="light"] #lasso-sec-presets {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Card Section Titles */
html[data-theme="light"] #lasso-sec-patch span,
html[data-theme="light"] #lasso-sec-phase-adjust span,
html[data-theme="light"] #lasso-sec-presets span {
    color: #0f172a !important;
}

/* Tab Switcher & Technique Switcher Inactive Buttons */
html[data-theme="light"] #tab-lasso-ai:not(.bg-indigo-600),
html[data-theme="light"] #tab-lasso-pattern:not(.bg-indigo-600) {
    color: #475569 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #tab-lasso-ai:not(.bg-indigo-600):hover,
html[data-theme="light"] #tab-lasso-pattern:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] #btn-lasso-tech-patch:not(.bg-indigo-600),
html[data-theme="light"] #btn-lasso-tech-tile:not(.bg-indigo-600),
html[data-theme="light"] #btn-lasso-tech-preset:not(.bg-indigo-600) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #btn-lasso-tech-patch:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-lasso-tech-tile:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-lasso-tech-preset:not(.bg-indigo-600):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Texture Sample Action Buttons */
html[data-theme="light"] #btn-pick-lasso-sample {
    background-color: #f0fdfa !important;
    border: 1px solid #99f6e4 !important;
    color: #0f766e !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #btn-pick-lasso-sample:hover {
    background-color: #0d9488 !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
}

html[data-theme="light"] #btn-auto-lasso-sample {
    background-color: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #btn-auto-lasso-sample:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

/* Screentone Dot Alignment (Phase Adjust) */
html[data-theme="light"] #lbl-lasso-offset,
html[data-theme="light"] #lbl-lasso-offset-x-val,
html[data-theme="light"] #lbl-lasso-offset-y-val {
    color: #0f766e !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #lasso-sec-phase-adjust button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #lasso-sec-phase-adjust button:hover {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
}

html[data-theme="light"] #lasso-sec-phase-adjust > div:last-child {
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #lasso-sec-phase-adjust > div:last-child span {
    color: #64748b !important;
}

/* Preset Screentones Grid */
html[data-theme="light"] #lasso-sec-presets button:not(.bg-indigo-600) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #lasso-sec-presets button:not(.bg-indigo-600):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Sliders & Inputs inside Lasso Panel */
html[data-theme="light"] #lasso-advanced-panel input[type="range"] {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #lasso-advanced-panel input[type="number"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #lasso-advanced-panel span[id^="lbl-lasso-"] {
    color: #4338ca !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #left-more-actions-menu {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] #left-more-actions-menu button {
    color: #0f172a !important;
}

html[data-theme="light"] #left-more-actions-menu button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pages-add-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pages-add-dropdown button {
    color: #0f172a !important;
}

html[data-theme="light"] #pages-add-dropdown button:hover {
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] #pages-search-container {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #pages-search-input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #pages-search-input:focus {
    border-color: var(--studio-primary) !important;
    box-shadow: 0 0 0 2px var(--studio-primary-glow) !important;
}

html[data-theme="light"] #pages-list {
    background-color: #ffffff !important;
}

html[data-theme="light"] .page-item,
html[data-theme="light"] #pages-list > div {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    border-radius: 8px !important;
}

html[data-theme="light"] .page-item:hover,
html[data-theme="light"] #pages-list > div:not(.page-item-active):hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .page-item-active,
html[data-theme="light"] .page-item.active,
html[data-theme="light"] #pages-list .page-item-active {
    background-color: #eef2ff !important;
    border: 1.5px solid #6366f1 !important;
    border-left: 4px solid #4f46e5 !important;
    color: #1e1b4b !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12) !important;
}

html[data-theme="light"] #pages-list .thumb-frame {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #pages-empty-state {
    color: #475569 !important;
}

html[data-theme="light"] #left-sidebar-toggle-handle,
html[data-theme="light"] #right-sidebar-toggle-handle {
    background-color: #ffffff !important;
    color: #334155 !important;
}

html[data-theme="light"] #left-sidebar-toggle-handle {
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #right-sidebar-toggle-handle {
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    box-shadow: -2px 0 8px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #left-sidebar-toggle-handle:hover,
html[data-theme="light"] #right-sidebar-toggle-handle:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* ============================================================
   WORKSPACE VIEWPORT & MANGA PAGE BOUNDARIES (CRITICAL UX RULE)
   Canvas viewport must be Cool Slate (#e2e8f0) with visible dot grid
   so white manga pages POP with sharp, unmistakable boundaries.
   ============================================================ */
html[data-theme="light"] #app-shell,
html[data-theme="light"] #workspace-panel {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #workspace-viewport {
    background-color: #e2e8f0 !important;
    background-image: radial-gradient(rgba(15, 23, 42, 0.16) 1.5px, transparent 1.5px) !important;
    background-size: 20px 20px !important;
}

html[data-theme="light"] #workspace-empty-state {
    background: radial-gradient(circle at 50% 40%, rgba(79, 70, 229, 0.08) 0%, rgba(226, 232, 240, 0.98) 60%, transparent 100%) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #workspace-empty-state .border-dashed {
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #workspace-empty-state h3 {
    color: #0f172a !important;
}

html[data-theme="light"] #workspace-empty-state p {
    color: #334155 !important;
}

html[data-theme="light"] .manga-container {
    border: 1.5px solid #64748b !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22), 0 4px 10px rgba(15, 23, 42, 0.1) !important;
}

/* Canvas Top Bar in Light Mode */
html[data-theme="light"] #canvas-top-bar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] #canvas-top-bar button:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Floating HUDs: Canvas Floating Toolbar */
html[data-theme="light"] #canvas-floating-toolbar {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #canvas-floating-toolbar button:not(.active):not(.active-amber):not([class*="bg-indigo-600"]):not([class*="bg-amber-500"]) {
    color: #334155 !important;
}

html[data-theme="light"] #canvas-floating-toolbar button:not(.active):not(.active-amber):not([class*="bg-indigo-600"]):not([class*="bg-amber-500"]):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Floating HUDs: Eraser Primary HUD & Popovers in Light Mode */
html[data-theme="light"] #eraser-primary-hud {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #eraser-minimized-pill {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #eraser-primary-hud > div:first-child {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #eraser-primary-hud button:not(.bg-indigo-600) {
    color: #475569 !important;
}

html[data-theme="light"] #eraser-primary-hud button:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] #eraser-color-popover,
html[data-theme="light"] #inpaint-layers-popover,
html[data-theme="light"] #lasso-advanced-popover {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #eraser-color-popover .bg-slate-100,
html[data-theme="light"] #lasso-advanced-popover .bg-slate-100 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] #eraser-color-popover button:hover,
html[data-theme="light"] #lasso-advanced-popover button:hover {
    color: #0f172a !important;
}

html[data-theme="light"] #eraser-color-hex-input {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* ============================================================
   RIGHT PANEL (INSPECTOR & TYPOGRAPHY STUDIO)
   ============================================================ */
html[data-theme="light"] #right-panel {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-left: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #right-panel > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #tab-edit,
html[data-theme="light"] #tab-style {
    color: #475569 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] #tab-edit.border-indigo-500,
html[data-theme="light"] #tab-style.border-indigo-500,
html[data-theme="light"] #tab-edit[class*="text-white"],
html[data-theme="light"] #tab-style[class*="text-white"] {
    color: #0f172a !important;
    border-bottom-color: #4f46e5 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] #block-workflow-widget {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #no-block-selected-state {
    background-color: transparent !important;
    border: none !important;
}

html[data-theme="light"] #no-block-selected-state > div.border-dashed {
    background-color: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] #no-block-selected-state i {
    color: #64748b !important;
}

html[data-theme="light"] #edit-original-text {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #edit-translated-text {
    background-color: #ffffff !important;
    border: 1.5px solid #818cf8 !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="light"] #block-type-buttons-container button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

html[data-theme="light"] #block-type-buttons-container button:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] #right-panel details.group {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

html[data-theme="light"] #right-panel details.group summary {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #right-panel details.group[open] summary {
    border-bottom: none !important;
}

html[data-theme="light"] #custom-presets-container .preset-item-row {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #custom-presets-container .preset-item-row:hover {
    background-color: #f8fafc !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12) !important;
}

html[data-theme="light"] #font-picker-dropdown {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #font-picker-dropdown input {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #font-picker-dropdown button {
    color: #0f172a !important;
}

html[data-theme="light"] #font-picker-dropdown button:hover {
    background-color: #eef2ff !important;
    color: #4338ca !important;
}

/* Global Form Controls in Light Mode */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: var(--studio-primary) !important;
    box-shadow: 0 0 0 2px var(--studio-primary-glow) !important;
}

html[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

html[data-theme="light"] input[type="range"] {
    background-color: #e2e8f0 !important;
    accent-color: #4f46e5 !important;
}

html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track {
    background-color: #e2e8f0 !important;
    border-radius: 9999px !important;
}

html[data-theme="light"] input[type="range"]::-moz-range-track {
    background-color: #e2e8f0 !important;
    border-radius: 9999px !important;
}

/* Right Inspector Button Groups in Light Mode */
html[data-theme="light"] #btn-style-horiz:not(.bg-indigo-600),
html[data-theme="light"] #btn-style-vert:not(.bg-indigo-600) {
    color: #475569 !important;
    background-color: transparent !important;
}

html[data-theme="light"] #btn-style-horiz:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-style-vert:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] #btn-align-left:not(.bg-indigo-600),
html[data-theme="light"] #btn-align-center:not(.bg-indigo-600),
html[data-theme="light"] #btn-align-right:not(.bg-indigo-600) {
    color: #475569 !important;
    background-color: transparent !important;
}

html[data-theme="light"] #btn-align-left:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-align-center:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-align-right:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] #btn-toggle-bold:not(.bg-indigo-600),
html[data-theme="light"] #btn-toggle-italic:not(.bg-indigo-600),
html[data-theme="light"] #btn-toggle-underline:not(.bg-indigo-600) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] #btn-toggle-bold:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-toggle-italic:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-toggle-underline:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] #btn-transform-none:not(.bg-indigo-600),
html[data-theme="light"] #btn-transform-uppercase:not(.bg-indigo-600),
html[data-theme="light"] #btn-transform-lowercase:not(.bg-indigo-600),
html[data-theme="light"] #btn-transform-capitalize:not(.bg-indigo-600) {
    color: #475569 !important;
    background-color: transparent !important;
}

html[data-theme="light"] #btn-transform-none:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-transform-uppercase:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-transform-lowercase:not(.bg-indigo-600):hover,
html[data-theme="light"] #btn-transform-capitalize:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

/* Right Inspector Select Dropdowns in Light Mode */
html[data-theme="light"] #style-mask-shape,
html[data-theme="light"] #style-mask-size,
html[data-theme="light"] #style-blend-mode {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Filmstrip Page Cards in Light Mode */
html[data-theme="light"] .page-item-active {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    border-left-color: #4f46e5 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .page-item-active p {
    color: #0f172a !important;
}

/* AI Quota Calculation Banner in Light Mode */
html[data-theme="light"] #ai-quota-calc-box {
    background-color: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    color: #1e1b4b !important;
}

html[data-theme="light"] #ai-quota-calc-box .text-indigo-300 {
    color: #3730a3 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #ai-quota-calc-box .text-indigo-400 {
    color: #4f46e5 !important;
}

html[data-theme="light"] #ai-quota-calc-box [data-i18n="ai-quota-badge"],
html[data-theme="light"] #ai-quota-calc-box .bg-amber-500\/10 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

html[data-theme="light"] #ai-quota-calc-box .quota-formula-box {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #92400e !important;
}

html[data-theme="light"] #ai-quota-calc-box .text-sky-300 {
    color: #0284c7 !important;
}

html[data-theme="light"] #ai-quota-calc-box .text-emerald-300 {
    color: #059669 !important;
}

html[data-theme="light"] #ai-quota-calc-box .quota-tip-box,
html[data-theme="light"] #ai-quota-calc-box p.text-slate-400 {
    color: #475569 !important;
}


/* ============================================================
   MODALS & OVERLAYS IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #modals-container > div,
html[data-theme="light"] #processing-overlay,
html[data-theme="light"] #export-hub-modal,
html[data-theme="light"] #qc-dashboard-modal,
html[data-theme="light"] #script-review-modal,
html[data-theme="light"] #studio-custom-dialog-container,
html[data-theme="light"] #preview-modal {
    background-color: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
}

html[data-theme="light"] #modals-container > div > div,
html[data-theme="light"] #export-hub-modal > div,
html[data-theme="light"] #qc-dashboard-modal > div,
html[data-theme="light"] #script-review-modal > div,
html[data-theme="light"] #studio-custom-dialog-container > div,
html[data-theme="light"] #preview-modal > div {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #modals-container .modal-header,
html[data-theme="light"] #settings-modal > div > div:first-child,
html[data-theme="light"] #lorebook-dossier-modal > div > div:first-child,
html[data-theme="light"] #gdrive-modal > div > div:first-child,
html[data-theme="light"] #audio-settings-modal > div > div:first-child,
html[data-theme="light"] #find-replace-modal > div > div:first-child,
html[data-theme="light"] #export-modal > div > div:first-child,
html[data-theme="light"] #help-modal > div > div:first-child,
html[data-theme="light"] #custom-preset-modal > div > div:first-child,
html[data-theme="light"] #visual-rules-modal > div > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #lorebook-dossier-modal .profile-card,
html[data-theme="light"] #audio-settings-modal .voice-card,
html[data-theme="light"] #preview-modal .preview-panel,
html[data-theme="light"] #export-hub-modal-body > div,
html[data-theme="light"] #qc-modal-body > div,
html[data-theme="light"] #script-review-modal .script-item {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #modals-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="light"] #modals-container select,
html[data-theme="light"] #modals-container textarea,
html[data-theme="light"] #export-hub-modal input,
html[data-theme="light"] #qc-dashboard-modal input,
html[data-theme="light"] #script-review-modal input,
html[data-theme="light"] #script-review-modal textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* ============================================================
   MANGA TRANSLATOR STUDIO - LIGHT STUDIO THEME (CREATIVE COOL SLATE & DEEP INK)
   Bespoke, high-contrast light theme tailored for creative manga workflows.
   Strictly complies with WCAG AAA contrast guidelines and tactile panel hierarchy.
   Viewport Canvas: Cool Slate (#e2e8f0) with visible dot grid ensures unmistakable
   boundaries for white manga pages.
   ============================================================ */

html[data-theme="light"] {
    color-scheme: light !important;

    /* Base Surfaces & Tactile Elevation */
    --studio-obsidian: #ffffff;
    --studio-bg: #f8fafc;
    --studio-panel: #ffffff;
    --studio-surface: #ffffff;
    --studio-card: #ffffff;
    --studio-card-hover: #f1f5f9;
    --studio-card-active: #e2e8f0;

    /* High-Contrast Crisp Borders (WCAG AAA) */
    --studio-border: #cbd5e1;
    --studio-border-hover: #94a3b8;
    --studio-border-glow: rgba(79, 70, 229, 0.35);
    --studio-border-subtle: #e2e8f0;

    /* Creative Accents */
    --studio-amber: #d97706;
    --studio-amber-hover: #b45309;
    --studio-amber-glow: rgba(217, 119, 6, 0.25);
    --studio-indigo: #4f46e5;
    --studio-primary: #4f46e5;
    --studio-primary-hover: #4338ca;
    --studio-primary-glow: rgba(79, 70, 229, 0.22);
    --studio-cyan: #0284c7;
    --studio-cyan-glow: rgba(2, 132, 199, 0.2);
    --studio-emerald: #059669;
    --studio-emerald-glow: rgba(5, 150, 105, 0.2);
    --studio-rose: #e11d48;
    --studio-sky: #0284c7;

    /* High-Contrast Typography Hierarchy (Deep Ink on White/Light Slate) */
    --studio-text-primary: #0f172a;
    --studio-text-secondary: #334155;
    --studio-text-muted: #64748b;
}

html[data-theme="light"] body {
    background-color: var(--studio-bg) !important;
    color: var(--studio-text-primary) !important;
}

/* Bespoke Scrollbars in Light Mode */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 9999px !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Studio Glass & Surface Utilities in Light Mode */
html[data-theme="light"] .studio-glass {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .studio-panel {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .studio-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .studio-card:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .hairline-border {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .hairline-border-b {
    border-bottom-color: #cbd5e1 !important;
}

/* ============================================================
   UNIVERSAL CATCH-ALLS FOR HARDCODED DARK CLASSES
   Ensures complete, robust coverage of all dark background utility instances.
   ============================================================ */
html[data-theme="light"] .bg-\[\#08090c\],
html[data-theme="light"] .bg-\[\#08090c\]\/40,
html[data-theme="light"] .bg-\[\#08090c\]\/50,
html[data-theme="light"] .bg-\[\#08090c\]\/60,
html[data-theme="light"] .bg-\[\#08090c\]\/80,
html[data-theme="light"] .bg-\[\#08090c\]\/90,
html[data-theme="light"] .bg-\[\#08090c\]\/95,
html[data-theme="light"] [class*="bg-[#08090c]"],
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-950\/30,
html[data-theme="light"] .bg-slate-950\/50,
html[data-theme="light"] .bg-slate-950\/60,
html[data-theme="light"] .bg-slate-950\/75,
html[data-theme="light"] .bg-slate-950\/80,
html[data-theme="light"] .bg-slate-950\/85,
html[data-theme="light"] .bg-slate-950\/95,
html[data-theme="light"] [class*="bg-slate-950"] {
    background-color: #f8fafc !important;
}

html[data-theme="light"] .bg-\[\#0f1015\],
html[data-theme="light"] .bg-\[\#0f1015\]\/50,
html[data-theme="light"] .bg-\[\#0f1015\]\/90,
html[data-theme="light"] .bg-\[\#0f1015\]\/95,
html[data-theme="light"] [class*="bg-[#0f1015]"],
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-900\/98,
html[data-theme="light"] [class*="bg-slate-900"] {
    background-color: #ffffff !important;
}

html[data-theme="light"] .bg-\[\#12141c\],
html[data-theme="light"] .bg-\[\#12141c\]\/40,
html[data-theme="light"] .bg-\[\#12141c\]\/60,
html[data-theme="light"] .bg-\[\#151720\],
html[data-theme="light"] .bg-\[\#151720\]\/80,
html[data-theme="light"] [class*="bg-[#12141c]"],
html[data-theme="light"] [class*="bg-[#151720]"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .bg-\[\#1c1e2b\],
html[data-theme="light"] .bg-\[\#1c1e2b\]\/80,
html[data-theme="light"] .bg-\[\#1e2130\],
html[data-theme="light"] [class*="bg-[#1c1e2b]"],
html[data-theme="light"] [class*="bg-[#1e2130]"],
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] [class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Modal Backdrops & Overlays */
html[data-theme="light"] .bg-black\/85,
html[data-theme="light"] .bg-black\/90,
html[data-theme="light"] [class*="bg-black/"] {
    background-color: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
}

/* Dividers */
html[data-theme="light"] .h-px[class*="bg-slate"],
html[data-theme="light"] .h-px[class*="bg-white"],
html[data-theme="light"] .w-px[class*="bg-slate"],
html[data-theme="light"] .w-px[class*="bg-white"] {
    background-color: #e2e8f0 !important;
}

/* Hover Overrides for Dark Backgrounds */
html[data-theme="light"] .hover\:bg-\[\#151720\]:hover,
html[data-theme="light"] .hover\:bg-\[\#1c1e2b\]:hover,
html[data-theme="light"] .hover\:bg-\[\#252839\]:hover,
html[data-theme="light"] .hover\:bg-slate-800:hover,
html[data-theme="light"] .hover\:bg-slate-800\/70:hover,
html[data-theme="light"] .hover\:bg-slate-855:hover,
html[data-theme="light"] .hover\:bg-slate-900\/90:hover,
html[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover,
html[data-theme="light"] .hover\:bg-white\/10:hover,
html[data-theme="light"] [class*="hover:bg-[#151720]"]:hover,
html[data-theme="light"] [class*="hover:bg-[#1c1e2b]"]:hover,
html[data-theme="light"] [class*="hover:bg-[#252839]"]:hover,
html[data-theme="light"] [class*="hover:bg-slate-800"]:hover,
html[data-theme="light"] [class*="hover:bg-slate-855"]:hover,
html[data-theme="light"] [class*="hover:bg-slate-900"]:hover,
html[data-theme="light"] [class*="hover:bg-white"]:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* High-Contrast Border Overrides */
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/\[0\.06\],
html[data-theme="light"] .border-white\/\[0\.07\],
html[data-theme="light"] .border-white\/\[0\.08\],
html[data-theme="light"] .border-white\/\[0\.08\]\/60,
html[data-theme="light"] .border-white\/\[0\.08\]\/70,
html[data-theme="light"] .border-white\/\[0\.08\]\/90,
html[data-theme="light"] .border-white\/\[0\.09\],
html[data-theme="light"] .border-white\/\[0\.1\],
html[data-theme="light"] .border-white\/\[0\.12\],
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] [class*="border-white"],
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-800\/80,
html[data-theme="light"] .border-slate-800\/90,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-700\/50,
html[data-theme="light"] .border-slate-600,
html[data-theme="light"] [class*="border-slate-800"],
html[data-theme="light"] [class*="border-slate-700"] {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .hover\:border-white\/20:hover,
html[data-theme="light"] .hover\:border-white\/\[0\.09\]:hover,
html[data-theme="light"] .hover\:border-white\/\[0\.12\]:hover,
html[data-theme="light"] .hover\:border-slate-600:hover,
html[data-theme="light"] .hover\:border-slate-500:hover,
html[data-theme="light"] [class*="hover:border-white"]:hover {
    border-color: #94a3b8 !important;
}

/* ============================================================
   HIGH-CONTRAST TYPOGRAPHY & TEXT OVERRIDES
   ============================================================ */
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 {
    color: #0f172a !important;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-350,
html[data-theme="light"] .text-slate-400 {
    color: #334155 !important;
}

html[data-theme="light"] .text-slate-450,
html[data-theme="light"] .text-slate-500 {
    color: #475569 !important;
}

html[data-theme="light"] .text-slate-600 {
    color: #64748b !important;
}

html[data-theme="light"] .placeholder\:text-slate-500::placeholder,
html[data-theme="light"] .placeholder\:text-slate-600::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .hover\:text-slate-100:hover,
html[data-theme="light"] .hover\:text-slate-200:hover {
    color: #0f172a !important;
}

/* Handle text-white:
   Preserve white text on colored buttons (indigo, emerald, amber, rose, sky, purple, red, blue)
   while remapping surface white text to deep ink (#0f172a). */
html[data-theme="light"] .text-white:not([class*="bg-indigo"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-rose"]):not([class*="bg-purple"]):not([class*="bg-sky"]):not([class*="bg-blue"]):not([class*="bg-red"]):not(.badge-colored) {
    color: #0f172a !important;
}

html[data-theme="light"] [class*="bg-indigo"] .text-white,
html[data-theme="light"] [class*="bg-emerald"] .text-white,
html[data-theme="light"] [class*="bg-amber"] .text-white,
html[data-theme="light"] [class*="bg-rose"] .text-white,
html[data-theme="light"] [class*="bg-purple"] .text-white,
html[data-theme="light"] [class*="bg-sky"] .text-white,
html[data-theme="light"] [class*="bg-blue"] .text-white,
html[data-theme="light"] [class*="bg-red"] .text-white {
    color: #ffffff !important;
}

/* Badges and pills */
html[data-theme="light"] span[class*="bg-slate-800"],
html[data-theme="light"] span[class*="bg-slate-900"],
html[data-theme="light"] span[class*="bg-[#151720]"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

/* ============================================================
   TOP APP HEADER & STEPPER
   ============================================================ */
html[data-theme="light"] #app-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] #app-stepper {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] #app-stepper button {
    color: #334155 !important;
}

html[data-theme="light"] #app-stepper button:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #app-stepper button.stepper-active {
    background-color: #ffffff !important;
    color: #4338ca !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}

html[data-theme="light"] #app-header button#header-btn-lorebook,
html[data-theme="light"] #app-header button#btn-header-tools-menu,
html[data-theme="light"] #app-header button[data-action="openSettingsModal"],
html[data-theme="light"] #app-header button#btn-theme-toggle {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #app-header button#header-btn-lorebook:hover,
html[data-theme="light"] #app-header button#btn-header-tools-menu:hover,
html[data-theme="light"] #app-header button[data-action="openSettingsModal"]:hover,
html[data-theme="light"] #app-header button#btn-theme-toggle:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #header-tools-dropdown,
html[data-theme="light"] #header-user-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] #header-tools-dropdown button,
html[data-theme="light"] #header-tools-dropdown a,
html[data-theme="light"] #header-user-dropdown button {
    color: #0f172a !important;
}

html[data-theme="light"] #header-tools-dropdown button:hover,
html[data-theme="light"] #header-tools-dropdown a:hover,
html[data-theme="light"] #header-user-dropdown button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ============================================================
   LEFT PANEL & FILMSTRIP
   ============================================================ */
html[data-theme="light"] #left-panel {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-right: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #left-panel > div:first-child,
html[data-theme="light"] #panel-tab-layers > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #left-more-actions-menu {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] #left-more-actions-menu button {
    color: #0f172a !important;
}

html[data-theme="light"] #left-more-actions-menu button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pages-search-container {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #pages-search-input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #pages-search-input:focus {
    border-color: var(--studio-primary) !important;
    box-shadow: 0 0 0 2px var(--studio-primary-glow) !important;
}

html[data-theme="light"] #pages-list {
    background-color: #ffffff !important;
}

html[data-theme="light"] .page-item,
html[data-theme="light"] #pages-list > div {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    border-radius: 8px !important;
}

html[data-theme="light"] .page-item:hover,
html[data-theme="light"] #pages-list > div:not(.page-item-active):hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .page-item-active,
html[data-theme="light"] .page-item.active,
html[data-theme="light"] #pages-list .page-item-active {
    background-color: #eef2ff !important;
    border: 1.5px solid #6366f1 !important;
    border-left: 4px solid #4f46e5 !important;
    color: #1e1b4b !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12) !important;
}

html[data-theme="light"] #pages-list .thumb-frame {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #pages-empty-state {
    color: #475569 !important;
}



/* ============================================================
   WORKSPACE VIEWPORT & MANGA PAGE BOUNDARIES (CRITICAL UX RULE)
   Canvas viewport must be Cool Slate (#e2e8f0) with visible dot grid
   so white manga pages POP with sharp, unmistakable boundaries.
   ============================================================ */
html[data-theme="light"] #app-shell,
html[data-theme="light"] #workspace-panel {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #workspace-viewport {
    background-color: #e2e8f0 !important;
    background-image: radial-gradient(rgba(15, 23, 42, 0.16) 1.5px, transparent 1.5px) !important;
    background-size: 20px 20px !important;
}

html[data-theme="light"] #workspace-empty-state {
    background: radial-gradient(circle at 50% 40%, rgba(79, 70, 229, 0.08) 0%, rgba(226, 232, 240, 0.98) 60%, transparent 100%) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #workspace-empty-state .border-dashed {
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #workspace-empty-state h3 {
    color: #0f172a !important;
}

html[data-theme="light"] #workspace-empty-state p {
    color: #334155 !important;
}

html[data-theme="light"] .manga-container {
    border: 1.5px solid #64748b !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22), 0 4px 10px rgba(15, 23, 42, 0.1) !important;
}

/* Canvas Top Bar in Light Mode */
html[data-theme="light"] #canvas-top-bar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] #canvas-top-bar button:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Floating HUDs: Canvas Floating Toolbar */
html[data-theme="light"] #canvas-floating-toolbar {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #canvas-floating-toolbar button:not(.active):not(.active-amber):not([class*="bg-indigo-600"]):not([class*="bg-amber-500"]) {
    color: #334155 !important;
}

html[data-theme="light"] #canvas-floating-toolbar button:not(.active):not(.active-amber):not([class*="bg-indigo-600"]):not([class*="bg-amber-500"]):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Canvas Layer Context Menu in Light Mode */
html[data-theme="light"] #canvas-layer-context-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #canvas-layer-context-menu .context-action-btn {
    color: #475569 !important;
}

html[data-theme="light"] #canvas-layer-context-menu .context-action-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#eraser-settings-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#eraser-primary-hud {
    background-color: rgba(18, 20, 28, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    color: #f8fafc !important;
}

#eraser-minimized-pill {
    background-color: rgba(18, 20, 28, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
    color: #f8fafc !important;
}

#eraser-primary-hud > div:first-child {
    background-color: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#eraser-tool-flyout-container:hover #eraser-tool-flyout-drawer {
    display: flex !important;
}

#eraser-tool-flyout-drawer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
}

#eraser-settings-panel.top-\[72px\] #eraser-tool-flyout-drawer::after {
    top: -14px;
    bottom: auto;
}

#eraser-primary-hud button:not(.bg-indigo-600) {
    color: #94a3b8 !important;
}

#eraser-primary-hud button:not(.bg-indigo-600):hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#eraser-color-popover,
#inpaint-layers-popover,
#lasso-advanced-popover {
    background-color: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
    color: #f8fafc !important;
}

#eraser-color-popover .bg-slate-100,
#lasso-advanced-popover .bg-slate-100 {
    background-color: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#eraser-color-popover button:hover,
#lasso-advanced-popover button:hover {
    color: #ffffff !important;
}

#eraser-color-hex-input {
    background-color: rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#brush-ai-model-status-indicator,
#lbl-stamp-status,
#lbl-fg-submode-status {
    display: none !important;
}

/* Figma Color Picker Slider Thumbs */
#figma-hue-slider::-webkit-slider-thumb,
#figma-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 2px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.4);
    cursor: pointer;
}

#figma-hue-slider::-moz-range-thumb,
#figma-opacity-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 2px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.4);
    cursor: pointer;
}

/* ============================================================
   RIGHT PANEL (INSPECTOR & TYPOGRAPHY STUDIO)
   ============================================================ */
html[data-theme="light"] #right-panel {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-left: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #right-panel > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #tab-edit,
html[data-theme="light"] #tab-style {
    color: #475569 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] #tab-edit.border-indigo-500,
html[data-theme="light"] #tab-style.border-indigo-500,
html[data-theme="light"] #tab-edit[class*="text-white"],
html[data-theme="light"] #tab-style[class*="text-white"] {
    color: #0f172a !important;
    border-bottom-color: #4f46e5 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] #block-workflow-widget {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #no-block-selected-state {
    background-color: transparent !important;
    border: none !important;
}

html[data-theme="light"] #no-block-selected-state > div.border-dashed {
    background-color: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] #no-block-selected-state i {
    color: #64748b !important;
}

html[data-theme="light"] #edit-original-text {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #edit-translated-text {
    background-color: #ffffff !important;
    border: 1.5px solid #818cf8 !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="light"] #block-type-buttons-container button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

html[data-theme="light"] #block-type-buttons-container button:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] #right-panel details.group {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

html[data-theme="light"] #right-panel details.group summary {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #right-panel details.group[open] summary {
    border-bottom: none !important;
}

html[data-theme="light"] #custom-presets-container .preset-item-row {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #custom-presets-container .preset-item-row:hover {
    background-color: #f8fafc !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12) !important;
}

html[data-theme="light"] #font-picker-dropdown {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #font-picker-dropdown input {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #font-picker-dropdown button {
    color: #0f172a !important;
}

html[data-theme="light"] #font-picker-dropdown button:hover {
    background-color: #eef2ff !important;
    color: #4338ca !important;
}

/* Global Form Controls in Light Mode */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: var(--studio-primary) !important;
    box-shadow: 0 0 0 2px var(--studio-primary-glow) !important;
}

html[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

html[data-theme="light"] input[type="range"] {
    background: #cbd5e1 !important;
}

/* ============================================================
   MODALS & OVERLAYS IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #modals-container > div,
html[data-theme="light"] #processing-overlay,
html[data-theme="light"] #export-hub-modal,
html[data-theme="light"] #qc-dashboard-modal,
html[data-theme="light"] #script-review-modal,
html[data-theme="light"] #studio-custom-dialog-container,
html[data-theme="light"] #preview-modal,
html[data-theme="light"] #script-exchange-modal,
html[data-theme="light"] #pro-membership-modal {
    background-color: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
}

html[data-theme="light"] #modals-container > div > div,
html[data-theme="light"] #export-hub-modal > div,
html[data-theme="light"] #qc-dashboard-modal > div,
html[data-theme="light"] #script-review-modal > div,
html[data-theme="light"] #studio-custom-dialog-container > div,
html[data-theme="light"] #preview-modal > div,
html[data-theme="light"] #script-exchange-modal > div,
html[data-theme="light"] #pro-membership-modal > div {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #modals-container .modal-header,
html[data-theme="light"] #settings-modal > div > div:first-child,
html[data-theme="light"] #lorebook-dossier-modal > div > div:first-child,
html[data-theme="light"] #gdrive-modal > div > div:first-child,
html[data-theme="light"] #audio-settings-modal > div > div:first-child,
html[data-theme="light"] #find-replace-modal > div > div:first-child,
html[data-theme="light"] #export-modal > div > div:first-child,
html[data-theme="light"] #help-modal > div > div:first-child,
html[data-theme="light"] #custom-preset-modal > div > div:first-child,
html[data-theme="light"] #visual-rules-modal > div > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #lorebook-dossier-modal .profile-card,
html[data-theme="light"] #audio-settings-modal .voice-card,
html[data-theme="light"] #preview-modal .preview-panel,
html[data-theme="light"] #export-hub-modal-body > div,
html[data-theme="light"] #qc-modal-body > div,
html[data-theme="light"] #script-review-modal .script-item {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #modals-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="light"] #modals-container select,
html[data-theme="light"] #modals-container textarea,
html[data-theme="light"] #export-hub-modal input,
html[data-theme="light"] #qc-dashboard-modal input,
html[data-theme="light"] #script-review-modal input,
html[data-theme="light"] #script-review-modal textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* ============================================================
   MOBILE DRAWERS & TOOLBARS IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #mobile-left-drawer,
html[data-theme="light"] #mobile-right-drawer,
html[data-theme="light"] #mobile-quick-editor,
html[data-theme="light"] #mobile-toolbar,
html[data-theme="light"] #mobile-bottom-nav {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* ============================================================
   SHORTCUTS MODAL IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #shortcuts-modal {
    background-color: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
}

html[data-theme="light"] #shortcuts-modal > div {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #shortcuts-modal > div > div:first-child,
html[data-theme="light"] #shortcuts-modal > div > div:last-child {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #shortcuts-modal h3#shortcuts-modal-title {
    color: #0f172a !important;
}

html[data-theme="light"] #shortcuts-modal #shortcuts-search-input {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #shortcuts-modal #shortcuts-search-input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] #shortcuts-modal #btn-close-shortcuts-modal {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

html[data-theme="light"] #shortcuts-modal #btn-close-shortcuts-modal:hover {
    background-color: #ffe4e6 !important;
    color: #e11d48 !important;
    border-color: #fca5a5 !important;
}

html[data-theme="light"] #shortcuts-modal .shortcut-category-group h4 {
    color: #334155 !important;
}

html[data-theme="light"] #shortcuts-modal .shortcut-category-group > div.grid > div {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #shortcuts-modal .shortcut-category-group > div.grid > div:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] #shortcuts-modal .shortcut-category-group span {
    color: #1e293b !important;
}

html[data-theme="light"] #shortcuts-modal kbd {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   TEAM HANDOFF DROPDOWN & ROLE ACTIONS IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #team-handoff-dropdown {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown > div:first-child {
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background-color: transparent !important;
}

html[data-theme="light"] #team-handoff-dropdown button {
    background-color: transparent !important;
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown button .font-semibold,
html[data-theme="light"] #team-handoff-dropdown button .text-slate-200 {
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown button .text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] #team-handoff-dropdown .h-px {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #team-handoff-dropdown label {
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown label:hover {
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] #team-handoff-dropdown label span.text-\[11px\] {
    color: #334155 !important;
}

html[data-theme="light"] .role-chip-btn:not([class*="indigo"]):not([class*="emerald"]):not([class*="amber"]) {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

/* ============================================================
   INPAINTING & REDRAW TOOL CONTROLS IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #btn-lasso-pattern-fill:not(:disabled) {
    background-color: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    color: #047857 !important;
}

html[data-theme="light"] #btn-lasso-pattern-fill:hover:not(:disabled) {
    background-color: #059669 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #btn-lasso-clear {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #btn-lasso-clear:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] #brush-size-container,
html[data-theme="light"] #brush-color-container > div {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #brush-size-container span,
html[data-theme="light"] #brush-color-container span {
    color: #334155 !important;
}

html[data-theme="light"] #brush-size-container button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #brush-size-container button:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

/* Redraw Layers Panel */
html[data-theme="light"] #inpaint-layers-panel {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #inpaint-layers-panel > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #inpaint-layers-panel [data-i18n="inpaint-layers-heading"] {
    color: #0f172a !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row:hover:not([data-layer-id="background"]) {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row.bg-\[\#1e2235\],
html[data-theme="light"] #inpaint-layers-list .layer-row[class*="border-indigo"] {
    background-color: #eef2ff !important;
    border: 1.5px solid #818cf8 !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.12) !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row.bg-\[\#1e2235\] .text-indigo-300 {
    color: #4338ca !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row .text-slate-300 {
    color: #1e293b !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row[data-layer-id="background"] {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row[data-layer-id="background"] span {
    color: #334155 !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row[data-layer-id="background"] div.font-mono {
    color: #64748b !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row button {
    color: #64748b !important;
}

html[data-theme="light"] #inpaint-layers-list .layer-row button:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

/* ============================================================
   PRO UPGRADE MODAL IN LIGHT MODE
   ============================================================ */
html[data-theme="light"] #pro-upgrade-modal {
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(6px) !important;
}

html[data-theme="light"] #pro-upgrade-modal > div {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pro-upgrade-modal .blur-3xl {
    display: none !important;
}

/* Top Header Bar */
html[data-theme="light"] #pro-upgrade-modal > div > div:first-child {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #pro-upgrade-modal h2 {
    background-image: linear-gradient(135deg, #d97706 0%, #7c3aed 50%, #4f46e5 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

html[data-theme="light"] #pro-upgrade-modal [data-i18n="pro-header-pricing"] {
    color: #64748b !important;
}

html[data-theme="light"] #btn-close-pro-modal {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

html[data-theme="light"] #btn-close-pro-modal:hover {
    background-color: #ffe4e6 !important;
    border-color: #fca5a5 !important;
    color: #e11d48 !important;
}

html[data-theme="light"] #pro-upgrade-modal .bg-slate-900\/90.border-slate-800 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #tab-btn-vietqr:not(.bg-gradient-to-r),
html[data-theme="light"] #tab-btn-features:not(.bg-gradient-to-r) {
    color: #475569 !important;
}

html[data-theme="light"] #tab-btn-vietqr:not(.bg-gradient-to-r):hover,
html[data-theme="light"] #tab-btn-features:not(.bg-gradient-to-r):hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

/* Feature Notification Banner */
html[data-theme="light"] #pro-modal-feature-banner > div {
    background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%) !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #pro-modal-feature-banner .text-indigo-300,
html[data-theme="light"] #pro-modal-feature-banner .text-amber-300 {
    color: #4338ca !important;
}

html[data-theme="light"] #pro-modal-feature-banner .text-white {
    color: #0f172a !important;
}

html[data-theme="light"] #pro-modal-feature-banner p {
    color: #475569 !important;
}

/* Package Selection Cards */
html[data-theme="light"] [data-i18n="pro-pkg-step"],
html[data-theme="light"] [data-i18n="pro-qr-step"] {
    color: #475569 !important;
}

html[data-theme="light"] #pkg-card-weekly {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #pkg-card-weekly.border-amber-400 {
    background-color: #fffbeb !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15) !important;
}

html[data-theme="light"] #pkg-card-lifetime {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #pkg-card-lifetime.border-amber-400 {
    background-color: #fffbeb !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15) !important;
}

html[data-theme="light"] #pkg-card-weekly span.text-white {
    color: #0f172a !important;
}

html[data-theme="light"] #pkg-card-lifetime span.text-amber-300 {
    color: #b45309 !important;
}

html[data-theme="light"] #pkg-card-lifetime span.text-amber-400 {
    color: #92400e !important;
}

html[data-theme="light"] #pkg-card-weekly p,
html[data-theme="light"] #pkg-card-lifetime p {
    color: #475569 !important;
}

/* VietQR Checkout Section */
html[data-theme="light"] #view-tab-vietqr .rounded-xl.border.border-slate-800.bg-slate-950\/80 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #view-tab-vietqr .bg-slate-900\/80 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #view-tab-vietqr span.text-white,
html[data-theme="light"] #view-tab-vietqr span.font-mono.text-white {
    color: #0f172a !important;
}

html[data-theme="light"] #view-tab-vietqr .text-amber-300 {
    color: #b45309 !important;
}

html[data-theme="light"] #view-tab-vietqr #vietqr-amount-display {
    color: #d97706 !important;
}

html[data-theme="light"] #view-tab-vietqr .bg-amber-500\/10 {
    background-color: #fffbeb !important;
    border: 1px solid #fcd34d !important;
}

html[data-theme="light"] #view-tab-vietqr #vietqr-memo-display {
    color: #92400e !important;
}

html[data-theme="light"] #btn-copy-stk,
html[data-theme="light"] #btn-copy-amount {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #btn-copy-stk:hover,
html[data-theme="light"] #btn-copy-amount:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* In-Modal Redeem Box */
html[data-theme="light"] #view-tab-vietqr > div.p-4.rounded-xl.border.border-slate-800.bg-gradient-to-r {
    background: #f8fafc !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] [data-i18n="pro-redeem-step"] {
    color: #0f172a !important;
}

html[data-theme="light"] [data-i18n="pro-instant-unlock"] {
    color: #64748b !important;
}

html[data-theme="light"] #input-redeem-code {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #input-redeem-code::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] [data-i18n="pro-redeem-tip"] {
    color: #64748b !important;
}

/* Facebook Messenger Direct Contact Box */
html[data-theme="light"] #view-tab-vietqr > div[class*="border-sky-500"] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
}

html[data-theme="light"] [data-i18n="pro-fb-title"] {
    color: #0369a1 !important;
}

html[data-theme="light"] [data-i18n="pro-fb-desc"] {
    color: #334155 !important;
}

html[data-theme="light"] #btn-copy-bill-template {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0369a1 !important;
}

html[data-theme="light"] #btn-copy-bill-template:hover {
    background-color: #f0f9ff !important;
    border-color: #7dd3fc !important;
}

/* TAB 2: Feature Comparison Table */
html[data-theme="light"] #view-tab-features > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #view-tab-features > div > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] [data-i18n="pro-feat-col-feature"],
html[data-theme="light"] [data-i18n="pro-feat-col-trial"] {
    color: #475569 !important;
}

html[data-theme="light"] [data-i18n="pro-feat-col-pro"] {
    color: #b45309 !important;
}

html[data-theme="light"] #view-tab-features .divide-y > div {
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] #view-tab-features [data-i18n$="-title"] {
    color: #0f172a !important;
    font-weight: 600 !important;
}

html[data-theme="light"] #view-tab-features [data-i18n$="-sub"] {
    color: #64748b !important;
}

html[data-theme="light"] #view-tab-features [data-i18n$="-trial"] {
    color: #475569 !important;
}

html[data-theme="light"] #view-tab-features [data-i18n$="-pro"] {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] #view-tab-features span.text-slate-200 {
    color: #0f172a !important;
}

html[data-theme="light"] #view-tab-features span.text-slate-300 {
    color: #1e293b !important;
}

html[data-theme="light"] #view-tab-features span.text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] #view-tab-features .text-amber-300 {
    color: #b45309 !important;
}

html[data-theme="light"] #view-tab-features .bg-amber-500\/5 {
    background-color: #fffbeb !important;
}

html[data-theme="light"] #view-tab-features [data-i18n="pro-feat-locked"] {
    color: #e11d48 !important;
}

html[data-theme="light"] #view-tab-features [data-i18n^="pro-feat-free-"] {
    color: #059669 !important;
}

/* Pro Modal Footer */
html[data-theme="light"] #pro-upgrade-modal > div > div:last-child {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] [data-i18n="pro-footer-security"] {
    color: #64748b !important;
}

html[data-theme="light"] #pro-upgrade-modal a[href*="facebook.com"] {
    color: #0284c7 !important;
}

/* ============================================================
   RIGHT PANEL TYPESET & STYLING TOOLS (LIGHT MODE)
   ============================================================ */

/* 1. Visual Typesetting Actions Card */
html[data-theme="light"] #visual-typeset-card {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
    border: 1px solid #c4b5fd !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.08) !important;
}

html[data-theme="light"] #visual-typeset-card [data-i18n="typeset-visual-title"] {
    color: #4338ca !important;
}

html[data-theme="light"] #visual-typeset-card button[onclick="openVisualRulesModal()"] {
    color: #4f46e5 !important;
}

html[data-theme="light"] #visual-typeset-card button[onclick="openVisualRulesModal()"]:hover {
    color: #3730a3 !important;
}

html[data-theme="light"] #visual-typeset-card button[onclick="runAutoTypesetChapter()"] {
    background-color: #ffffff !important;
    border: 1.5px solid #a855f7 !important;
    color: #7e22ce !important;
    box-shadow: 0 1px 2px rgba(126, 34, 206, 0.08) !important;
}

html[data-theme="light"] #visual-typeset-card button[onclick="runAutoTypesetChapter()"]:hover {
    background-color: #faf5ff !important;
    border-color: #9333ea !important;
    color: #6b21a8 !important;
}

html[data-theme="light"] #visual-typeset-card button[onclick="runAutoTypesetChapter()"] i {
    color: #9333ea !important;
}

html[data-theme="light"] #visual-typeset-card .border-t {
    border-top-color: #ddd6fe !important;
}

html[data-theme="light"] #visual-typeset-card .border-t > span {
    color: #475569 !important;
}

html[data-theme="light"] #visual-typeset-card kbd {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] #visual-typeset-card #visual-rules-summary-count {
    color: #6d28d9 !important;
    font-weight: 700 !important;
}

/* 2. Smart Scanlation Suite Card */
html[data-theme="light"] #smart-typeset-suite {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #smart-typeset-suite > label {
    color: #4338ca !important;
    border-bottom-color: #e2e8f0 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="cleanActiveBlockPunctuation()"],
html[data-theme="light"] #smart-typeset-suite button[onclick="autoSnapSelectedBlocksToBubbles()"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="cleanActiveBlockPunctuation()"]:hover {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoSnapSelectedBlocksToBubbles()"]:hover {
    background-color: #faf5ff !important;
    border-color: #d8b4fe !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="cleanActiveBlockPunctuation()"] [data-i18n="typeset-clean-punct-name"] {
    color: #0f172a !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="cleanActiveBlockPunctuation()"]:hover [data-i18n="typeset-clean-punct-name"] {
    color: #047857 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoSnapSelectedBlocksToBubbles()"] [data-i18n="typeset-magic-snap-name"] {
    color: #0f172a !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoSnapSelectedBlocksToBubbles()"]:hover [data-i18n="typeset-magic-snap-name"] {
    color: #6b21a8 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="cleanActiveBlockPunctuation()"] .bg-emerald-500\/20 {
    background-color: #dcfce7 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoSnapSelectedBlocksToBubbles()"] .bg-purple-500\/20 {
    background-color: #f3e8ff !important;
}

html[data-theme="light"] #smart-typeset-suite .text-slate-500 {
    color: #64748b !important;
}

html[data-theme="light"] #smart-typeset-suite .border-t {
    border-top-color: #e2e8f0 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="applyCurrentStyleToPage()"],
html[data-theme="light"] #smart-typeset-suite button[onclick="applyCurrentStyleToAllPages()"],
html[data-theme="light"] #smart-typeset-suite button[onclick="cleanAllBlocksPunctuation()"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="applyCurrentStyleToPage()"]:hover {
    background-color: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="applyCurrentStyleToAllPages()"]:hover {
    background-color: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="cleanAllBlocksPunctuation()"]:hover {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #065f46 !important;
}

/* High contrast for Auto Match button in light mode */
html[data-theme="light"] #smart-typeset-suite button[onclick="autoMatchActiveBlockStyle()"] {
    background-color: #ecfdf5 !important;
    border: 1.5px solid #6ee7b7 !important;
    color: #065f46 !important;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1) !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoMatchActiveBlockStyle()"]:hover {
    background-color: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoMatchActiveBlockStyle()"] i {
    color: #059669 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="autoMatchActiveBlockStyle()"]:hover i {
    color: #ffffff !important;
}

/* Canvas Align layer section */
html[data-theme="light"] #smart-typeset-suite [data-i18n="typeset-align-label"] {
    color: #475569 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="selectAllBlocksOnPage()"] {
    color: #4f46e5 !important;
}

html[data-theme="light"] #smart-typeset-suite button[onclick="selectAllBlocksOnPage()"]:hover {
    color: #3730a3 !important;
}

html[data-theme="light"] #smart-typeset-suite .grid-cols-6 {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #smart-typeset-suite .grid-cols-6 button {
    color: #475569 !important;
}

html[data-theme="light"] #smart-typeset-suite .grid-cols-6 button:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #smart-typeset-suite .grid-cols-6 button i.fa-align-center,
html[data-theme="light"] #smart-typeset-suite .grid-cols-6 button i.fa-grip-lines-vertical {
    color: #4f46e5 !important;
}

html[data-theme="light"] #smart-typeset-suite .grid-cols-6 button:hover i.fa-align-center,
html[data-theme="light"] #smart-typeset-suite .grid-cols-6 button:hover i.fa-grip-lines-vertical {
    color: #3730a3 !important;
}

/* ============================================================
   USER PROFILE & AUTH STATUS DROPDOWN (LIGHT MODE)
   ============================================================ */

html[data-theme="light"] #header-user-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

/* User Profile Header Card */
html[data-theme="light"] #header-user-dropdown .profile-header-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 45%, #ede9fe 100%) !important;
    border: 1px solid #fcd34d !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08) !important;
}

html[data-theme="light"] #header-user-dropdown .profile-header-card .crown-icon {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    color: #b45309 !important;
}

html[data-theme="light"] #header-user-dropdown .profile-header-card .user-name {
    color: #0f172a !important;
}

html[data-theme="light"] #header-user-dropdown .profile-header-card .user-email {
    color: #475569 !important;
}

html[data-theme="light"] #header-user-dropdown .profile-header-card .vip-badge {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    color: #b45309 !important;
}

/* Admin License Key Generator Card */
html[data-theme="light"] #header-user-dropdown .admin-card {
    background: linear-gradient(135deg, #fefce8 0%, #fdf4ff 50%, #f5f3ff 100%) !important;
    border: 1px solid #fed7aa !important;
}

html[data-theme="light"] #header-user-dropdown .admin-card-title {
    color: #92400e !important;
}

html[data-theme="light"] #header-user-dropdown .admin-badge {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    color: #b45309 !important;
}

html[data-theme="light"] #header-user-dropdown #btn-admin-gen-week {
    background-color: #ffffff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.08) !important;
}

html[data-theme="light"] #header-user-dropdown #btn-admin-gen-week:hover {
    background-color: #eef2ff !important;
    border-color: #818cf8 !important;
    color: #3730a3 !important;
}

html[data-theme="light"] #header-user-dropdown #btn-admin-gen-life {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.25) !important;
}

html[data-theme="light"] #header-user-dropdown #btn-admin-gen-life:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
}

/* Expert Mode Toggle */
html[data-theme="light"] #header-user-dropdown .expert-mode-card {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #header-user-dropdown .expert-mode-card .expert-title {
    color: #0f172a !important;
}

html[data-theme="light"] #header-user-dropdown .expert-mode-card .expert-desc {
    color: #64748b !important;
}

/* User Menu items & Divider */
html[data-theme="light"] #header-user-dropdown .menu-item-btn {
    color: #334155 !important;
}

html[data-theme="light"] #header-user-dropdown .menu-item-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #header-user-dropdown .divider {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #header-user-dropdown #btn-menu-logout {
    color: #dc2626 !important;
}

html[data-theme="light"] #header-user-dropdown #btn-menu-logout:hover {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

/* ============================================================
   WORKSPACE MODE & TEAM HANDOFF (LIGHT MODE)
   ============================================================ */

/* Container and Segmented Switcher */
html[data-theme="light"] #workspace-mode-container > div {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #workspace-mode-container .mode-segmented-box {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #btn-workmode-solo:not(.mode-active),
html[data-theme="light"] #btn-workmode-team:not(.mode-active) {
    color: #64748b !important;
}

html[data-theme="light"] #btn-workmode-solo:not(.mode-active):hover,
html[data-theme="light"] #btn-workmode-team:not(.mode-active):hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #btn-workmode-solo.mode-active,
html[data-theme="light"] #btn-workmode-team.mode-active {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important;
}

/* Role Chips */
html[data-theme="light"] .role-chip-btn:not(.role-active) {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

html[data-theme="light"] .role-chip-btn:not(.role-active):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Active Role Chips: High Contrast */
html[data-theme="light"] .role-chip-btn.role-active[data-role="translator"] {
    background-color: #ecfdf5 !important;
    border: 1.5px solid #10b981 !important;
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] .role-chip-btn.role-active[data-role="typesetter"] {
    background-color: #eef2ff !important;
    border: 1.5px solid #6366f1 !important;
    color: #4338ca !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="light"] .role-chip-btn.role-active[data-role="qc"] {
    background-color: #fffbeb !important;
    border: 1.5px solid #f59e0b !important;
    color: #b45309 !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15) !important;
}

/* Team Handoff Button */
html[data-theme="light"] #btn-team-handoff-menu {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #btn-team-handoff-menu:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Team Handoff Dropdown */
html[data-theme="light"] #team-handoff-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown .handoff-title {
    color: #4338ca !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #team-handoff-dropdown button {
    color: #334155 !important;
}

html[data-theme="light"] #team-handoff-dropdown button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown button .handoff-item-title {
    color: #0f172a !important;
}

html[data-theme="light"] #team-handoff-dropdown button:hover .handoff-item-title {
    color: #4338ca !important;
}

html[data-theme="light"] #team-handoff-dropdown button .handoff-item-desc {
    color: #64748b !important;
}

html[data-theme="light"] #team-handoff-dropdown .divider {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] #team-handoff-dropdown label {
    color: #334155 !important;
}

html[data-theme="light"] #team-handoff-dropdown label:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Custom Presets Dropdown in Light Mode */
html[data-theme="light"] .custom-presets-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .custom-presets-dropdown button {
    color: #334155 !important;
}

html[data-theme="light"] .custom-presets-dropdown button:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .custom-presets-dropdown button.text-red-400,
html[data-theme="light"] .custom-presets-dropdown button[class*="text-red"] {
    color: #e11d48 !important;
}

html[data-theme="light"] .custom-presets-dropdown button.text-red-400:hover,
html[data-theme="light"] .custom-presets-dropdown button[class*="text-red"]:hover {
    background-color: #e11d48 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .custom-presets-dropdown .divider {
    border-top-color: #e2e8f0 !important;
}

/* ==========================================================================
   App Profile Gating: Web Trial vs Desktop Pro UI
   ========================================================================== */
html[data-app-profile="trial"] .pro-only,
body.app-profile-trial .pro-only {
    display: none !important;
}

html[data-app-profile="pro"] .trial-only,
body.app-profile-pro .trial-only {
    display: none !important;
}

html[data-app-profile="trial"] #api-key-container,
body.app-profile-trial #api-key-container {
    grid-column: 1 / -1;
}

html[data-app-profile="trial"] #btn-brush-mode-lasso,
body.app-profile-trial #btn-brush-mode-lasso {
    grid-column: 1 / -1;
}

#app-stepper {
    display: none !important;
}

/* ============================================================
   PRO UPGRADE MODAL — LIGHT MODE DESIGN EXCELLENCE
   Fixes dark gradients, low-contrast text, and card visibility.
   ============================================================ */

/* 1. Modal Card & Surfaces */
html[data-theme="light"] #pro-upgrade-modal-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pro-upgrade-modal .blur-3xl {
    opacity: 0.12 !important;
}

/* Modal Header & Footer */
html[data-theme="light"] #pro-upgrade-modal-card > div:first-of-type,
html[data-theme="light"] #pro-upgrade-modal-card > div:last-of-type {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] #header-pricing-text {
    color: #475569 !important;
}

html[data-theme="light"] #btn-close-pro-modal {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] #btn-close-pro-modal:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 2. Top Feature Locked / Notification Banner */
html[data-theme="light"] .pro-feature-banner {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-color: #fcd34d !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08) !important;
}

html[data-theme="light"] .pro-feature-banner [data-i18n="pro-feature-locked-banner"] {
    color: #b45309 !important;
}

html[data-theme="light"] .pro-feature-banner [data-i18n="pro-modal-title"] {
    color: #4338ca !important;
}

html[data-theme="light"] .pro-feature-banner p,
html[data-theme="light"] .pro-feature-banner [data-i18n="pro-feature-locked-sub"],
html[data-theme="light"] .pro-feature-banner [data-i18n="pro-modal-sub"] {
    color: #475569 !important;
}

/* 3. Region Switcher & Top Tabs */
html[data-theme="light"] .pro-region-switcher {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #btn-region-vietnam.text-slate-400,
html[data-theme="light"] #btn-region-global.text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] #tab-btn-features.text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] #tab-btn-features:hover {
    color: #0f172a !important;
}

/* 4. Package Pricing Cards (Domestic & Global) */
html[data-theme="light"] #pkg-card-weekly,
html[data-theme="light"] #pkg-card-monthly,
html[data-theme="light"] #pkg-card-annual,
html[data-theme="light"] #pkg-card-lifetime,
html[data-theme="light"] #pkg-global-card-weekly,
html[data-theme="light"] #pkg-global-card-monthly,
html[data-theme="light"] #pkg-global-card-annual,
html[data-theme="light"] #pkg-global-card-lifetime {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #pkg-card-weekly:hover,
html[data-theme="light"] #pkg-card-monthly:hover,
html[data-theme="light"] #pkg-card-annual:hover,
html[data-theme="light"] #pkg-card-lifetime:hover,
html[data-theme="light"] #pkg-global-card-weekly:hover,
html[data-theme="light"] #pkg-global-card-monthly:hover,
html[data-theme="light"] #pkg-global-card-annual:hover,
html[data-theme="light"] #pkg-global-card-lifetime:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* Active Vietnam Cards in Light Mode */
html[data-theme="light"] #pkg-card-weekly.border-amber-400,
html[data-theme="light"] #pkg-card-monthly.border-amber-400,
html[data-theme="light"] #pkg-card-annual.border-amber-400,
html[data-theme="light"] #pkg-card-lifetime.border-amber-400 {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
}

html[data-theme="light"] #pkg-card-lifetime .text-amber-300,
html[data-theme="light"] #pkg-card-lifetime .text-amber-400 {
    color: #b45309 !important;
}

html[data-theme="light"] #pkg-card-lifetime [data-i18n="pro-pkg-life-badge"] {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

/* Active Global Cards in Light Mode */
html[data-theme="light"] #pkg-global-card-weekly.border-rose-400,
html[data-theme="light"] #pkg-global-card-monthly.border-rose-400,
html[data-theme="light"] #pkg-global-card-annual.border-rose-400,
html[data-theme="light"] #pkg-global-card-lifetime.border-rose-400 {
    background: #fff1f2 !important;
    border-color: #f43f5e !important;
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.15) !important;
}

html[data-theme="light"] #pkg-global-card-lifetime .text-rose-300,
html[data-theme="light"] #pkg-global-card-lifetime .text-rose-400 {
    color: #e11d48 !important;
}

html[data-theme="light"] #pkg-global-card-lifetime [data-i18n="pro-global-pkg-life-badge"] {
    background-color: #ffe4e6 !important;
    border-color: #fb7185 !important;
    color: #9f1239 !important;
}

/* 5. Domestic VietQR Box (Region A) */
html[data-theme="light"] #box-vietnam-qr {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #box-vietnam-qr .bg-slate-900\/80 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] #box-vietnam-qr .text-amber-300,
html[data-theme="light"] #box-vietnam-qr .text-amber-400 {
    color: #b45309 !important;
}

html[data-theme="light"] #box-vietnam-qr .bg-amber-500\/10 {
    background-color: #fffbeb !important;
    border-color: #fcd34d !important;
}

html[data-theme="light"] #btn-copy-stk,
html[data-theme="light"] #btn-copy-amount {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #b45309 !important;
}

html[data-theme="light"] #btn-copy-stk:hover,
html[data-theme="light"] #btn-copy-amount:hover {
    background-color: #e2e8f0 !important;
}

/* 5b. Live Bank Payment Status / Auto-listener Hero Banner (Screenshot 2) */
html[data-theme="light"] #box-auto-payment-status {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #f0fdfa 100%) !important;
    border: 1px solid #6ee7b7 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12) !important;
}

html[data-theme="light"] #box-auto-payment-status [data-i18n="pro-auto-detect-title"],
html[data-theme="light"] #box-auto-payment-status .text-emerald-300 {
    color: #065f46 !important;
}

html[data-theme="light"] #box-auto-payment-status span.bg-emerald-500\/20 {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #047857 !important;
}

html[data-theme="light"] #box-auto-payment-status p,
html[data-theme="light"] #box-auto-payment-status [data-i18n="pro-auto-detect-sub"],
html[data-theme="light"] #box-auto-payment-status .text-slate-200 {
    color: #1e293b !important;
}

html[data-theme="light"] #box-auto-payment-status #vietqr-memo-listen {
    color: #b45309 !important;
}

html[data-theme="light"] #box-auto-payment-status .text-emerald-400 {
    color: #059669 !important;
}

html[data-theme="light"] #box-auto-payment-status .w-8.h-8 {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
}

html[data-theme="light"] #box-auto-payment-status .w-8.h-8 i {
    color: #d97706 !important;
}

/* 6. Facebook Contact Card (Screenshot 1 top) */
html[data-theme="light"] #box-contact-facebook {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}

html[data-theme="light"] #box-contact-facebook .text-sky-300,
html[data-theme="light"] #box-contact-facebook .text-sky-400 {
    color: #0369a1 !important;
}

html[data-theme="light"] #box-contact-facebook p,
html[data-theme="light"] #box-contact-facebook .text-slate-300 {
    color: #334155 !important;
}

html[data-theme="light"] #box-contact-facebook a[href*="facebook.com/MidnightLilyVN"]:not(#btn-open-facebook-chat) {
    background-color: #bae6fd !important;
    border-color: #7dd3fc !important;
    color: #0369a1 !important;
}

html[data-theme="light"] #btn-open-facebook-chat {
    background-color: #0284c7 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #btn-open-facebook-chat:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
}

html[data-theme="light"] #btn-open-facebook-chat i,
html[data-theme="light"] #btn-open-facebook-chat span {
    color: #ffffff !important;
}

html[data-theme="light"] #btn-copy-bill-template {
    background-color: #ffffff !important;
    border-color: #7dd3fc !important;
    color: #0369a1 !important;
}

html[data-theme="light"] #btn-copy-bill-template:hover {
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
}

/* 7. Gumroad / Ko-fi International Checkout Box */
html[data-theme="light"] #box-checkout-kofi {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 40%, #ffffff 100%) !important;
    border-color: #fda4af !important;
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.08) !important;
}

html[data-theme="light"] #box-checkout-kofi .text-rose-300,
html[data-theme="light"] #box-checkout-kofi .text-rose-400 {
    color: #be123c !important;
}

html[data-theme="light"] #box-checkout-kofi p,
html[data-theme="light"] #box-checkout-kofi .text-slate-300,
html[data-theme="light"] #box-checkout-kofi .text-slate-400 {
    color: #334155 !important;
}

html[data-theme="light"] #box-checkout-kofi .bg-slate-900\/90 {
    background-color: #ffffff !important;
    border-color: #fecdd3 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] #kofi-selected-plan-display,
html[data-theme="light"] #gumroad-selected-plan-display {
    color: #0f172a !important;
}

html[data-theme="light"] #kofi-order-memo-display {
    color: #be123c !important;
}

html[data-theme="light"] #box-checkout-kofi .bg-emerald-950\/60 {
    background-color: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
}

html[data-theme="light"] #btn-copy-kofi-memo {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #btn-copy-kofi-memo:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 8. Global Contact & Support Box (Screenshot 1) */
html[data-theme="light"] #box-contact-global,
html[data-theme="light"] #box-contact-email {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #7dd3fc !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}

html[data-theme="light"] #box-contact-global .text-sky-300,
html[data-theme="light"] #box-contact-global .text-sky-400,
html[data-theme="light"] #box-contact-email .text-sky-300,
html[data-theme="light"] #box-contact-email .text-sky-400 {
    color: #0369a1 !important;
}

html[data-theme="light"] #box-contact-global p,
html[data-theme="light"] #box-contact-global .text-slate-300,
html[data-theme="light"] #box-contact-email p,
html[data-theme="light"] #box-contact-email .text-slate-300 {
    color: #334155 !important;
}

html[data-theme="light"] #box-contact-global a[href*="facebook.com/MidnightLilyVN"]:not(#btn-open-facebook-chat-global),
html[data-theme="light"] #box-contact-email .bg-sky-500\/20 {
    background-color: #bae6fd !important;
    border: 1px solid #7dd3fc !important;
    color: #0369a1 !important;
}

html[data-theme="light"] #btn-open-facebook-chat-global {
    background-color: #0284c7 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #btn-open-facebook-chat-global:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
}

html[data-theme="light"] #btn-open-facebook-chat-global i,
html[data-theme="light"] #btn-open-facebook-chat-global span {
    color: #ffffff !important;
}

html[data-theme="light"] #box-contact-global a[href^="mailto:"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #box-contact-global a[href^="mailto:"]:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #btn-copy-global-template {
    background-color: #ffffff !important;
    border-color: #7dd3fc !important;
    color: #0369a1 !important;
}

html[data-theme="light"] #btn-copy-global-template:hover {
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
}

/* 9. Universal Redeem Box (Screenshot 1 bottom) */
html[data-theme="light"] #box-redeem-license {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] #box-redeem-license .text-slate-300 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] #box-redeem-license [data-i18n="pro-instant-unlock"],
html[data-theme="light"] #box-redeem-license .text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] #input-redeem-code {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] #input-redeem-code::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] #input-redeem-code:focus {
    border-color: #f59e0b !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

/* 10. Tab 2 Comparison Table in Light Mode */
html[data-theme="light"] #view-tab-features .border-slate-800 {
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] #view-tab-features .bg-slate-950\/60 {
    background-color: #ffffff !important;
}

html[data-theme="light"] #view-tab-features .bg-slate-900\/90 {
    background-color: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] #view-tab-features .divide-slate-800\/70 > * {
    border-color: #f1f5f9 !important;
}

html[data-theme="light"] #view-tab-features .text-amber-300 {
    color: #b45309 !important;
}

/* 11. Mascot Companion Speech Bubble in Light Mode */
html[data-theme="light"] #mascot-speech-bubble {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(13, 148, 136, 0.7) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.16), 0 6px 10px -4px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #mascot-speech-bubble-tail {
    background-color: #ffffff !important;
    border-right-color: rgba(13, 148, 136, 0.7) !important;
    border-bottom-color: rgba(13, 148, 136, 0.7) !important;
}

html[data-theme="light"] #mascot-speech-bubble:hover {
    border-color: #0f766e !important;
}

html[data-theme="light"] #mascot-speech-bubble:hover #mascot-speech-bubble-tail {
    border-right-color: #0f766e !important;
    border-bottom-color: #0f766e !important;
}

html[data-theme="light"] #manga-mascot-widget .text-teal-300 {
    color: #0f766e !important;
}

/* Dual Stroke Overlay Support */
.bubble-overlay.editing-inline .outer-stroke-container {
    display: none !important;
}

/* ============================================================
   TAXONOMY MATRIX & NARRATIVE TONE SELECTION - VIBRANT HIGHLIGHTS ("SÁNG LÊN")
   ============================================================ */

/* 1. Tone Options Base */
.comic-tone-option {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    cursor: pointer !important;
    user-select: none;
}

/* Inactive Tone Option - Dark Mode */
.comic-tone-option:not(.is-active) {
    background-color: rgba(15, 16, 21, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}
.comic-tone-option:not(.is-active) span {
    color: inherit !important;
}
.comic-tone-option:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Inactive Tone Option - Light Mode */
html[data-theme="light"] .comic-tone-option:not(.is-active) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .comic-tone-option:not(.is-active):hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ACTIVE Tone Option: Light Up / Stand out ("Sáng lên") */
.comic-tone-option.is-active,
html[data-theme="light"] .comic-tone-option.is-active,
html[data-theme="dark"] .comic-tone-option.is-active {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
    border: 1.5px solid #a5b4fc !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.6), 0 2px 8px rgba(79, 70, 229, 0.4) !important;
    transform: translateY(-1.5px) scale(1.02);
}
.comic-tone-option.is-active span,
html[data-theme="light"] .comic-tone-option.is-active span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.comic-tone-option.is-active::after {
    content: " ✓";
    font-weight: 900;
    margin-left: 5px;
    font-size: 11px;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 2. Taxonomy Matrix Genre & Theme Tags Base */
.comic-genre-tag {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    cursor: pointer !important;
    user-select: none;
}

/* Inactive Genre Tags - Dark Mode */
.comic-genre-tag:not(.is-active) {
    background-color: rgba(15, 16, 21, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}
.comic-genre-tag:not(.is-active) span {
    color: inherit !important;
}
.comic-genre-tag:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Inactive Genre Tags - Light Mode */
html[data-theme="light"] .comic-genre-tag:not(.is-active) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .comic-genre-tag:not(.is-active):hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ACTIVE Genre Tags: Base */
.comic-genre-tag.is-active,
html[data-theme="light"] .comic-genre-tag.is-active,
html[data-theme="dark"] .comic-genre-tag.is-active {
    color: #ffffff !important;
    font-weight: 600 !important;
    transform: translateY(-1px);
}
.comic-genre-tag.is-active span,
html[data-theme="light"] .comic-genre-tag.is-active span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Tier 1: Genre -> Glowing Indigo / Violet */
.comic-genre-tag.is-active[data-tier="genre"],
.comic-genre-tag.is-active:not([data-tier]),
html[data-theme="light"] .comic-genre-tag.is-active[data-tier="genre"],
html[data-theme="light"] .comic-genre-tag.is-active:not([data-tier]) {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: 1.5px solid #a5b4fc !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.55), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Tier 2: Theme (Aliens, Animals, Cooking...) -> Glowing Vivid Emerald / Teal */
.comic-genre-tag.is-active[data-tier="theme"],
html[data-theme="light"] .comic-genre-tag.is-active[data-tier="theme"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1.5px solid #6ee7b7 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Tier 3: Content Warnings (Gore, Sexual Violence) -> Glowing Vivid Rose / Crimson */
.comic-genre-tag.is-active[data-tier="content"],
html[data-theme="light"] .comic-genre-tag.is-active[data-tier="content"] {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    border: 1.5px solid #fda4af !important;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Checkmark in active tag */
.comic-genre-tag.is-active .tag-check,
html[data-theme="light"] .comic-genre-tag.is-active .tag-check {
    display: inline-block !important;
    color: #ffffff !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* 3. Feedback Category Options Active State */
.feedback-category-option {
    transition: all 0.2s ease;
}
.feedback-category-option:has(input:checked) {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.15) !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3) !important;
}
.feedback-category-option:has(input:checked) span {
    color: #6366f1 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .feedback-category-option:has(input:checked) {
    border-color: #4f46e5 !important;
    background: #eef2ff !important;
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.25) !important;
}
html[data-theme="light"] .feedback-category-option:has(input:checked) span {
    color: #4338ca !important;
}

#brush-cursor-indicator {
    position: fixed !important;
    left: 0px !important;
    top: 0px !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    transition: none !important;
    z-index: 99999 !important;
}

/* ============================================================
   LEFT PANEL: DUAL VIEW (GRID & LIST) & STUDIO FILTERS
   ============================================================ */
#left-panel.pages-grid-expanded {
    /* Keep panel width at standard 20rem (320px) to prevent panel from stretching over the workspace canvas */
    width: 20rem !important;
}

@media (max-width: 768px) {
    #left-panel.pages-grid-expanded {
        width: calc(100vw - 2rem) !important;
    }
}

#pages-list.pages-grid-mode {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.375rem !important;
    padding: 0.375rem !important;
}

#pages-list.pages-grid-mode > [data-page-index] {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.35rem !important;
    position: relative !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

/* Card inner wrapper must be vertical column */
#pages-list.pages-grid-mode > [data-page-index] > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.25rem !important;
}

/* Manga portrait thumbnail frame - holds true aspect ratio with letterbox container */
#pages-list.pages-grid-mode > [data-page-index] .thumb-frame {
    width: 100% !important;
    height: 145px !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    background-color: #08090c !important;
    position: relative !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pages-list.pages-grid-mode > [data-page-index] .thumb-frame img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* Meta info under thumbnail */
#pages-list.pages-grid-mode > [data-page-index] > div:first-child > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
}

#pages-list.pages-grid-mode > [data-page-index] .page-title {
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}

#pages-list.pages-grid-mode > [data-page-index] .page-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.2rem !important;
    margin-top: 0 !important;
    width: 100% !important;
}

#pages-list.pages-grid-mode > [data-page-index] .page-item-actions {
    position: absolute !important;
    top: 0.45rem !important;
    right: 0.45rem !important;
    z-index: 10 !important;
    background: rgba(15, 17, 23, 0.96) !important;
    padding: 2px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    gap: 2px !important;
}

#pages-list.pages-grid-mode > .page-item-active {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.22) !important;
}

/* ============================================================
   THEME PRESET: CYBERPUNK MANGA (LANDING PAGE NEO-BRUTALIST STYLE)
   High-contrast neon anime aesthetic with Hot Pink (#ff0055),
   Cyber Cyan (#00f0ff), and electric glow accents.
   ============================================================ */
:root[data-ui-theme="cyber"],
html[data-ui-theme="cyber"] {
    --studio-obsidian: #0d0e12;
    --studio-bg: #0d0e12;
    --studio-panel: #141620;
    --studio-surface: #1a1c26;
    --studio-card: #1e212f;
    --studio-card-hover: #262a3c;
    --studio-card-active: #31364d;
    --studio-border: rgba(230, 25, 62, 0.28);
    --studio-border-hover: rgba(230, 25, 62, 0.6);
    --studio-border-glow: rgba(230, 25, 62, 0.45);
    --studio-primary: #e6193e;
    --studio-primary-hover: #ff3358;
    --studio-primary-glow: rgba(230, 25, 62, 0.45);
    --studio-amber: #f3f0e8;
    --studio-indigo: #e6193e;
    --studio-cyan: #8f94b2;
    --studio-cyan-glow: rgba(143, 148, 178, 0.35);
}

html[data-ui-theme="cyber"] body {
    background-color: #0d0e12 !important;
}

/* Cyber Header Island Overrides */
html[data-ui-theme="cyber"] #app-header > div {
    background: rgba(14, 16, 24, 0.96) !important;
    border: 1px solid rgba(230, 25, 62, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 18px rgba(230, 25, 62, 0.16) !important;
}

html[data-ui-theme="cyber"] #header-app-badge {
    color: #e6193e !important;
}

html[data-ui-theme="cyber"] #header-btn-batch-translate {
    background: linear-gradient(135deg, #e6193e 0%, #ba1030 50%, #1e212f 100%) !important;
    box-shadow: 0 0 16px rgba(230, 25, 62, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

html[data-ui-theme="cyber"] #header-btn-batch-translate:hover {
    background: linear-gradient(135deg, #ff3358 0%, #e6193e 50%, #262a3c 100%) !important;
    box-shadow: 0 0 24px rgba(230, 25, 62, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px);
}

html[data-ui-theme="cyber"] #header-btn-export:not(:disabled) {
    border-color: rgba(230, 25, 62, 0.5) !important;
    color: #f3f0e8 !important;
    background: rgba(230, 25, 62, 0.1) !important;
    box-shadow: 0 0 12px rgba(230, 25, 62, 0.22) !important;
}

html[data-ui-theme="cyber"] #header-btn-export:not(:disabled):hover {
    background: rgba(230, 25, 62, 0.2) !important;
    border-color: #ff3358 !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(230, 25, 62, 0.45) !important;
}

/* Cyber Panels (Left Drawer & Right Inspector) */
html[data-ui-theme="cyber"] #left-panel,
html[data-ui-theme="cyber"] #right-panel {
    background-color: #10121a !important;
    border: 1px solid rgba(230, 25, 62, 0.28) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 20px rgba(230, 25, 62, 0.12) !important;
}

html[data-ui-theme="cyber"] #left-panel > div:first-child,
html[data-ui-theme="cyber"] #right-panel > div:first-child,
html[data-ui-theme="cyber"] #panel-tab-layers > div:first-child {
    background-color: #0d0e13 !important;
    border-bottom: 1px solid rgba(230, 25, 62, 0.25) !important;
}

/* Cyber Page Items in Left Panel */
html[data-ui-theme="cyber"] #pages-list [data-page-index] {
    border: 1px solid rgba(230, 25, 62, 0.15) !important;
    background: #141620 !important;
}

html[data-ui-theme="cyber"] #pages-list [data-page-index]:hover {
    border-color: #e6193e !important;
    box-shadow: 0 0 14px rgba(230, 25, 62, 0.3) !important;
}

html[data-ui-theme="cyber"] #pages-list .page-item-active,
html[data-ui-theme="cyber"] #pages-list.pages-grid-mode > .page-item-active {
    border: 2px solid #e6193e !important;
    background: rgba(230, 25, 62, 0.16) !important;
    box-shadow: 0 0 18px rgba(230, 25, 62, 0.42) !important;
}

html[data-ui-theme="cyber"] #page-active-indicator {
    color: #e6193e !important;
}

/* Cyber Inspector Tabs in Right Panel */
html[data-ui-theme="cyber"] #tab-edit.text-indigo-600,
html[data-ui-theme="cyber"] #tab-edit.dark\:text-indigo-300,
html[data-ui-theme="cyber"] #tab-edit:not(.text-slate-500) {
    color: #e6193e !important;
    background: rgba(230, 25, 62, 0.14) !important;
    border: 1px solid rgba(230, 25, 62, 0.35) !important;
    box-shadow: 0 0 12px rgba(230, 25, 62, 0.25) !important;
}

html[data-ui-theme="cyber"] #tab-style.text-indigo-600,
html[data-ui-theme="cyber"] #tab-style.dark\:text-indigo-300,
html[data-ui-theme="cyber"] #tab-style:not(.text-slate-500) {
    color: #e6193e !important;
    background: rgba(230, 25, 62, 0.14) !important;
    border: 1px solid rgba(230, 25, 62, 0.35) !important;
    box-shadow: 0 0 12px rgba(230, 25, 62, 0.25) !important;
}

/* Cyber Canvas Workspace Background & Toolbars */
html[data-ui-theme="cyber"] #workspace-panel {
    background-color: #0d0e12 !important;
    background-image: radial-gradient(circle at 2px 2px, rgba(230, 25, 62, 0.2) 1.2px, transparent 0) !important;
    background-size: 24px 24px !important;
}

html[data-ui-theme="cyber"] #canvas-toolbar-container,
html[data-ui-theme="cyber"] #floating-text-toolbar,
html[data-ui-theme="cyber"] #floating-canvas-toolbar,
html[data-ui-theme="cyber"] #eraser-hud {
    background: rgba(14, 16, 24, 0.96) !important;
    border: 1px solid rgba(230, 25, 62, 0.38) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 18px rgba(230, 25, 62, 0.2) !important;
}

html[data-ui-theme="cyber"] #canvas-toolbar-container button.active,
html[data-ui-theme="cyber"] #canvas-toolbar-container button.bg-indigo-600 {
    background: #e6193e !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(230, 25, 62, 0.55) !important;
}

/* Cyber Modal Dialogs */
html[data-ui-theme="cyber"] #modals-container > div > div:not(.bg-transparent),
html[data-ui-theme="cyber"] .modal-content,
html[data-ui-theme="cyber"] #header-tools-dropdown {
    background-color: #10121a !important;
    border: 1px solid rgba(230, 25, 62, 0.35) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 24px rgba(230, 25, 62, 0.2) !important;
}

/* Cyber Scrollbars */
html[data-ui-theme="cyber"] ::-webkit-scrollbar-thumb {
    background: rgba(230, 25, 62, 0.35) !important;
}

html[data-ui-theme="cyber"] ::-webkit-scrollbar-thumb:hover {
    background: #e6193e !important;
}

/* ============================================================
   THEME PRESET: MANGA PAPER (LIGHT RETRO SCANLATION EDITORIAL)
   Warm ivory paper tone (#f6f3eb) with traditional printer ink accents.
   ============================================================ */
:root[data-ui-theme="paper"],
html[data-ui-theme="paper"] {
    --studio-obsidian: #ffffff;
    --studio-bg: #f6f3eb;
    --studio-panel: #ffffff;
    --studio-surface: #fdfbf7;
    --studio-card: #f2eee3;
    --studio-card-hover: #ebe4d5;
    --studio-border: rgba(41, 37, 36, 0.14);
    --studio-border-hover: rgba(41, 37, 36, 0.28);
    --studio-primary: #d97706;
    --studio-primary-hover: #b45309;
    --studio-text-primary: #1c1917;
    --studio-text-secondary: #57534e;
}

html[data-ui-theme="paper"] body {
    background-color: #f6f3eb !important;
    color: #1c1917 !important;
}

html[data-ui-theme="paper"] #workspace-panel {
    background-color: #f6f3eb !important;
    background-image: radial-gradient(circle at 2px 2px, rgba(120, 113, 108, 0.25) 1.2px, transparent 0) !important;
}

html[data-ui-theme="paper"] #app-header > div,
html[data-ui-theme="paper"] #left-panel,
html[data-ui-theme="paper"] #right-panel {
    background-color: #ffffff !important;
    border-color: rgba(41, 37, 36, 0.15) !important;
    box-shadow: 0 10px 25px rgba(68, 64, 60, 0.08) !important;
}

html[data-ui-theme="paper"] #left-panel > div:first-child,
html[data-ui-theme="paper"] #right-panel > div:first-child,
html[data-ui-theme="paper"] #panel-tab-layers > div:first-child {
    background-color: #fdfbf7 !important;
    border-bottom: 1px solid rgba(41, 37, 36, 0.14) !important;
    color: #1c1917 !important;
}

html[data-ui-theme="paper"] #panel-tab-layers [data-i18n="panel-layers-inpaint-title"],
html[data-ui-theme="paper"] #panel-tab-layers > div:first-child span {
    color: #1c1917 !important;
}

html[data-ui-theme="paper"] #lasso-advanced-panel summary {
    background: #f7f4ed !important;
    border: 1px solid rgba(41, 37, 36, 0.12) !important;
    color: #1c1917 !important;
}

html[data-ui-theme="paper"] #lasso-advanced-panel .bg-slate-100,
html[data-ui-theme="paper"] #lasso-advanced-panel [class*="bg-slate-100"],
html[data-ui-theme="paper"] #lasso-advanced-panel .bg-slate-50,
html[data-ui-theme="paper"] #lasso-sec-patch,
html[data-ui-theme="paper"] #lasso-sec-phase-adjust,
html[data-ui-theme="paper"] #lasso-sec-presets {
    background-color: #fdfbf7 !important;
    border-color: rgba(41, 37, 36, 0.16) !important;
}

html[data-ui-theme="paper"] #btn-auto-lasso-sample {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}

html[data-ui-theme="paper"] #btn-auto-lasso-sample:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

html[data-ui-theme="paper"] #lasso-advanced-panel span[id^="lbl-lasso-"] {
    color: #b45309 !important;
}

html[data-ui-theme="paper"] #canvas-layer-context-menu {
    background: #fdfbf7 !important;
    border: 1px solid rgba(41, 37, 36, 0.16) !important;
    box-shadow: 0 16px 40px rgba(68, 64, 60, 0.12) !important;
    color: #1c1917 !important;
}

html[data-ui-theme="paper"] #canvas-layer-context-menu .context-action-btn {
    color: #44403c !important;
}

html[data-ui-theme="paper"] #canvas-layer-context-menu .context-action-btn:hover {
    background-color: #f2eee3 !important;
    color: #1c1917 !important;
}

/* ============================================================
   THEME PRESET: GLACIER GLASS (Y2K FROST AERO / PASTEL GLASSMORPHISM)
   Vivid frosted sky blue with milky ice glassmorphism, pill contours,
   and deep abyss navy typography.
   ============================================================ */
:root[data-ui-theme="glacier"],
html[data-ui-theme="glacier"] {
    --studio-obsidian: #ffffff;
    --studio-bg: #9cd4f8;
    --studio-panel: rgba(225, 243, 255, 0.92);
    --studio-surface: rgba(240, 249, 255, 0.85);
    --studio-card: rgba(255, 255, 255, 0.88);
    --studio-card-hover: #ffffff;
    --studio-card-active: #ffffff;
    --studio-border: rgba(255, 255, 255, 0.85);
    --studio-border-hover: rgba(37, 140, 219, 0.5);
    --studio-border-glow: rgba(142, 205, 245, 0.65);
    --studio-primary: #258cdb;
    --studio-primary-hover: #1872b8;
    --studio-primary-glow: rgba(37, 140, 219, 0.4);
    --studio-amber: #f6cfc2;
    --studio-indigo: #258cdb;
    --studio-cyan: #38bdf8;
    --studio-cyan-glow: rgba(56, 189, 248, 0.35);
    --studio-text-primary: #1e2b45;
    --studio-text-secondary: #4d6285;
}

html[data-ui-theme="glacier"] body {
    background-color: #9cd4f8 !important;
    background-image: 
        radial-gradient(at 10% 10%, rgba(255, 255, 255, 0.95) 0px, transparent 45%),
        radial-gradient(at 90% 10%, rgba(188, 227, 251, 0.95) 0px, transparent 45%),
        radial-gradient(at 50% 90%, rgba(246, 207, 194, 0.5) 0px, transparent 50%),
        radial-gradient(at 85% 85%, rgba(162, 217, 252, 0.9) 0px, transparent 50%) !important;
    background-attachment: fixed !important;
    color: #1e2b45 !important;
}

/* Glacier Canvas Workspace (Vivid Sky Blue, distinctly different from Paper Ivory) */
html[data-ui-theme="glacier"] #workspace-panel {
    background-color: #b0defa !important;
    background-image: 
        radial-gradient(at 20% 20%, rgba(255, 255, 255, 0.85) 0px, transparent 40%),
        radial-gradient(at 80% 80%, rgba(246, 207, 194, 0.35) 0px, transparent 40%),
        radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.65) 1.5px, transparent 0) !important;
    background-size: 100% 100%, 100% 100%, 20px 20px !important;
}

/* Glacier Header Island */
html[data-ui-theme="glacier"] #app-header > div {
    background: rgba(228, 244, 255, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 30px rgba(37, 140, 219, 0.18), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-ui-theme="glacier"] #header-app-badge {
    color: #258cdb !important;
}

/* Glacier Panels (Milky Frost Glassmorphism) */
html[data-ui-theme="glacier"] #left-panel,
html[data-ui-theme="glacier"] #right-panel {
    background: rgba(225, 243, 255, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 16px 40px rgba(37, 140, 219, 0.16) !important;
    color: #1e2b45 !important;
}

html[data-ui-theme="glacier"] #left-panel > div:first-child,
html[data-ui-theme="glacier"] #right-panel > div:first-child,
html[data-ui-theme="glacier"] #panel-tab-layers > div:first-child {
    background: rgba(205, 235, 255, 0.96) !important;
    border-bottom: 1px solid rgba(188, 227, 251, 0.8) !important;
    color: #1e2b45 !important;
}

html[data-ui-theme="glacier"] #panel-tab-layers [data-i18n="panel-layers-inpaint-title"],
html[data-ui-theme="glacier"] #panel-tab-layers > div:first-child span {
    color: #1e2b45 !important;
}

html[data-ui-theme="glacier"] #lasso-advanced-panel summary {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(188, 227, 251, 0.7) !important;
    color: #1e2b45 !important;
}

html[data-ui-theme="glacier"] #lasso-advanced-panel summary:hover {
    background: #ffffff !important;
}

html[data-ui-theme="glacier"] #btn-auto-lasso-sample {
    background-color: rgba(37, 140, 219, 0.12) !important;
    border: 1px solid rgba(37, 140, 219, 0.3) !important;
    color: #1872b8 !important;
}

html[data-ui-theme="glacier"] #btn-auto-lasso-sample:hover {
    background-color: #258cdb !important;
    color: #ffffff !important;
    border-color: #258cdb !important;
}

html[data-ui-theme="glacier"] #lasso-advanced-panel span[id^="lbl-lasso-"] {
    color: #258cdb !important;
}

/* Glacier Panel Internal Containers & Cards */
html[data-ui-theme="glacier"] #left-panel .bg-white,
html[data-ui-theme="glacier"] #right-panel .bg-white,
html[data-ui-theme="glacier"] #left-panel .bg-slate-100,
html[data-ui-theme="glacier"] #right-panel .bg-slate-100,
html[data-ui-theme="glacier"] #left-panel .dark\:bg-white\/\[0\.03\],
html[data-ui-theme="glacier"] #right-panel .dark\:bg-white\/\[0\.03\],
html[data-ui-theme="glacier"] #left-panel .dark\:bg-slate-900,
html[data-ui-theme="glacier"] #right-panel .dark\:bg-slate-900 {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(188, 227, 251, 0.7) !important;
}

/* Glacier Page Items in Left Panel */
html[data-ui-theme="glacier"] #pages-list [data-page-index] {
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 2px 8px rgba(37, 140, 219, 0.08) !important;
}

html[data-ui-theme="glacier"] #pages-list [data-page-index]:hover {
    border-color: #258cdb !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(37, 140, 219, 0.22) !important;
}

html[data-ui-theme="glacier"] #pages-list .page-item-active,
html[data-ui-theme="glacier"] #pages-list.pages-grid-mode > .page-item-active {
    border: 2px solid #258cdb !important;
    background: rgba(188, 227, 251, 0.55) !important;
    box-shadow: 0 8px 20px rgba(37, 140, 219, 0.28) !important;
}

html[data-ui-theme="glacier"] #page-active-indicator {
    color: #258cdb !important;
}

/* Glacier Floating Toolbars & HUD */
html[data-ui-theme="glacier"] #canvas-toolbar-container,
html[data-ui-theme="glacier"] #floating-text-toolbar,
html[data-ui-theme="glacier"] #floating-canvas-toolbar,
html[data-ui-theme="glacier"] #eraser-hud,
html[data-ui-theme="glacier"] #canvas-layer-context-menu {
    background: rgba(235, 247, 255, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 12px 32px rgba(37, 140, 219, 0.2) !important;
    color: #1e2b45 !important;
}

html[data-ui-theme="glacier"] #canvas-layer-context-menu .context-action-btn {
    color: #33476b !important;
}

html[data-ui-theme="glacier"] #canvas-layer-context-menu .context-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: #258cdb !important;
}

/* Glacier Modal Dialogs */
html[data-ui-theme="glacier"] #modals-container > div > div:not(.bg-transparent),
html[data-ui-theme="glacier"] .modal-content,
html[data-ui-theme="glacier"] #header-tools-dropdown {
    background: rgba(240, 249, 255, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 24px 60px rgba(37, 140, 219, 0.24) !important;
    color: #1e2b45 !important;
}

/* Glacier Scrollbars */
html[data-ui-theme="glacier"] ::-webkit-scrollbar-thumb {
    background: rgba(37, 140, 219, 0.35) !important;
    border-radius: 9999px !important;
}

html[data-ui-theme="glacier"] ::-webkit-scrollbar-thumb:hover {
    background: #258cdb !important;
}

/* ============================================================
   DYNAMIC BUTTON & ACCENT OVERRIDES (TRIỆT TIÊU TOÀN BỘ MÀU TÍM CỨNG)
   Automatically maps button backgrounds, active badges, and focus rings
   to each specific UI style preset.
   ============================================================ */

/* --- 1. GLACIER GLASS: Aqua Sky Blue Buttons (#258cdb) --- */
html[data-ui-theme="glacier"] button.bg-indigo-600,
html[data-ui-theme="glacier"] button.bg-indigo-500,
html[data-ui-theme="glacier"] .bg-indigo-600,
html[data-ui-theme="glacier"] [class*="bg-indigo-600"]:not([class*="/"]),
html[data-ui-theme="glacier"] #btn-tool-select,
html[data-ui-theme="glacier"] #view-mode-overlay,
html[data-ui-theme="glacier"] #tab-edit:not(.text-slate-500),
html[data-ui-theme="glacier"] #tab-style:not(.text-slate-500),
html[data-ui-theme="glacier"] .changelog-tab-btn.bg-indigo-600 {
    background: #258cdb !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 14px rgba(37, 140, 219, 0.35) !important;
}

html[data-ui-theme="glacier"] button.bg-indigo-600:hover,
html[data-ui-theme="glacier"] .hover\:bg-indigo-500:hover,
html[data-ui-theme="glacier"] .hover\:bg-indigo-600:hover,
html[data-ui-theme="glacier"] [class*="hover:bg-indigo-600"]:hover {
    background: #1872b8 !important;
    box-shadow: 0 6px 18px rgba(37, 140, 219, 0.5) !important;
}

html[data-ui-theme="glacier"] [class*="from-indigo-600"],
html[data-ui-theme="glacier"] #header-btn-batch-translate {
    background: linear-gradient(135deg, #258cdb 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(37, 140, 219, 0.4) !important;
}

html[data-ui-theme="glacier"] .text-indigo-600,
html[data-ui-theme="glacier"] .text-indigo-500,
html[data-ui-theme="glacier"] .text-indigo-400,
html[data-ui-theme="glacier"] .dark\:text-indigo-400,
html[data-ui-theme="glacier"] [class*="text-indigo-"] {
    color: #258cdb !important;
}

html[data-ui-theme="glacier"] .hover\:text-indigo-600:hover,
html[data-ui-theme="glacier"] .hover\:text-indigo-500:hover {
    color: #1872b8 !important;
}

html[data-ui-theme="glacier"] [class*="border-indigo-"] {
    border-color: rgba(37, 140, 219, 0.45) !important;
}

html[data-ui-theme="glacier"] [class*="bg-indigo-500/"],
html[data-ui-theme="glacier"] [class*="bg-indigo-600/"],
html[data-ui-theme="glacier"] [class*="bg-indigo-50"],
html[data-ui-theme="glacier"] [class*="bg-indigo-950/"] {
    background: rgba(37, 140, 219, 0.12) !important;
    border-color: rgba(37, 140, 219, 0.25) !important;
    color: #1b6cb0 !important;
}

/* --- 2. MANGA PAPER: Warm Amber/Printer Ink Buttons (#d97706) --- */
html[data-ui-theme="paper"] button.bg-indigo-600,
html[data-ui-theme="paper"] button.bg-indigo-500,
html[data-ui-theme="paper"] .bg-indigo-600,
html[data-ui-theme="paper"] [class*="bg-indigo-600"]:not([class*="/"]),
html[data-ui-theme="paper"] #btn-tool-select,
html[data-ui-theme="paper"] #view-mode-overlay,
html[data-ui-theme="paper"] #tab-edit:not(.text-slate-500),
html[data-ui-theme="paper"] #tab-style:not(.text-slate-500),
html[data-ui-theme="paper"] .changelog-tab-btn.bg-indigo-600 {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: rgba(180, 83, 9, 0.4) !important;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.25) !important;
}

html[data-ui-theme="paper"] button.bg-indigo-600:hover,
html[data-ui-theme="paper"] .hover\:bg-indigo-500:hover,
html[data-ui-theme="paper"] .hover\:bg-indigo-600:hover,
html[data-ui-theme="paper"] [class*="hover:bg-indigo-600"]:hover {
    background: #b45309 !important;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}

html[data-ui-theme="paper"] [class*="from-indigo-600"],
html[data-ui-theme="paper"] #header-btn-batch-translate {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

html[data-ui-theme="paper"] .text-indigo-600,
html[data-ui-theme="paper"] .text-indigo-500,
html[data-ui-theme="paper"] .text-indigo-400,
html[data-ui-theme="paper"] [class*="text-indigo-"] {
    color: #d97706 !important;
}

html[data-ui-theme="paper"] .hover\:text-indigo-600:hover,
html[data-ui-theme="paper"] .hover\:text-indigo-500:hover {
    color: #b45309 !important;
}

html[data-ui-theme="paper"] [class*="border-indigo-"] {
    border-color: rgba(217, 119, 6, 0.4) !important;
}

html[data-ui-theme="paper"] [class*="bg-indigo-500/"],
html[data-ui-theme="paper"] [class*="bg-indigo-600/"],
html[data-ui-theme="paper"] [class*="bg-indigo-50"],
html[data-ui-theme="paper"] [class*="bg-indigo-950/"] {
    background: rgba(217, 119, 6, 0.12) !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
    color: #b45309 !important;
}

/* --- 3. CYBERPUNK: Cyber Crimson Buttons (#e6193e) --- */
html[data-ui-theme="cyber"] button.bg-indigo-600,
html[data-ui-theme="cyber"] button.bg-indigo-500,
html[data-ui-theme="cyber"] .bg-indigo-600,
html[data-ui-theme="cyber"] [class*="bg-indigo-600"]:not([class*="/"]),
html[data-ui-theme="cyber"] #btn-tool-select,
html[data-ui-theme="cyber"] #view-mode-overlay,
html[data-ui-theme="cyber"] #tab-edit:not(.text-slate-500),
html[data-ui-theme="cyber"] #tab-style:not(.text-slate-500),
html[data-ui-theme="cyber"] .changelog-tab-btn.bg-indigo-600 {
    background: #e6193e !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(230, 25, 62, 0.55) !important;
}

html[data-ui-theme="cyber"] button.bg-indigo-600:hover,
html[data-ui-theme="cyber"] .hover\:bg-indigo-500:hover,
html[data-ui-theme="cyber"] .hover\:bg-indigo-600:hover,
html[data-ui-theme="cyber"] [class*="hover:bg-indigo-600"]:hover {
    background: #ff3358 !important;
    box-shadow: 0 0 20px rgba(230, 25, 62, 0.75) !important;
}

html[data-ui-theme="cyber"] [class*="from-indigo-600"] {
    background: linear-gradient(135deg, #e6193e 0%, #ba1030 50%, #1e212f 100%) !important;
    box-shadow: 0 0 16px rgba(230, 25, 62, 0.55) !important;
}

html[data-ui-theme="cyber"] .text-indigo-600,
html[data-ui-theme="cyber"] .text-indigo-500,
html[data-ui-theme="cyber"] .text-indigo-400,
html[data-ui-theme="cyber"] [class*="text-indigo-"] {
    color: #e6193e !important;
}

html[data-ui-theme="cyber"] .hover\:text-indigo-600:hover,
html[data-ui-theme="cyber"] .hover\:text-indigo-500:hover {
    color: #ff3358 !important;
}

html[data-ui-theme="cyber"] [class*="border-indigo-"] {
    border-color: rgba(230, 25, 62, 0.45) !important;
}

html[data-ui-theme="cyber"] [class*="bg-indigo-500/"],
html[data-ui-theme="cyber"] [class*="bg-indigo-600/"],
html[data-ui-theme="cyber"] [class*="bg-indigo-50"],
html[data-ui-theme="cyber"] [class*="bg-indigo-950/"] {
    background: rgba(230, 25, 62, 0.15) !important;
    border-color: rgba(230, 25, 62, 0.3) !important;
    color: #ff3358 !important;
}

/* Zero-FOUC Global Constraint for SVG branding icons */
img[src*="logo.svg"] {
    max-width: 100%;
    max-height: 100%;
}

/* Ensure settings modal tabs are seamless borderless containers */
#settings-modal-body > div {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}