/* AI Assistant Styles */

        :root {
            --bg-main: #fdfaf6;
            --bg-surface: #ffffff;
            --text-heading: #1e293b;
            --text-body: #475569;
            --text-muted: #94a3b8;
            --border-color: #f1f5f9;
        }

        body.dark-mode {
            --bg-main: #0b1020;
            --bg-surface: #121a2b;
            --text-heading: #e8eefc;
            --text-body: #c8d3ea;
            --text-muted: #8fa1c6;
            --border-color: #2a3653;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-main) !important;
            color: var(--text-body);
            -webkit-tap-highlight-color: transparent;
        }

        body.dark-mode .bg-white {
            background-color: var(--bg-surface) !important;
        }

        body.dark-mode .bg-white\/95 {
            background-color: rgba(18, 26, 43, 0.95) !important;
        }

        body.login-mode #gemb-ai-launcher {
            display: none !important;
        }

        body.login-mode #gemb-ai-modal {
            display: none !important;
        }

        #gemb-ai-modal {
            position: fixed;
            right: 0.75rem;
            bottom: 0.75rem;
            z-index: 80;
            display: none;
            width: min(328px, calc(100vw - 1.5rem));
            height: min(540px, calc(100vh - 1.5rem));
            padding: 0;
        }

        #gemb-ai-modal.open {
            display: block;
        }

        #gemb-ai-shell {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            border: 1px solid #d7d9e6;
            background: linear-gradient(180deg, #f8f9ff 0%, #f0f1f8 100%);
            box-shadow: 0 26px 44px -24px rgba(51, 65, 85, 0.45);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #gemb-ai-shell .shell-top {
            padding: 0.95rem 0.9rem 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        #gemb-ai-shell .shell-copy {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            color: #0f172a;
        }

        .gemb-ai-logo-frame {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            background: #edf0ff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #d7d9e6;
            overflow: hidden;
        }

        .gemb-ai-logo-frame img {
            width: 1.45rem;
            height: 1.45rem;
            object-fit: contain;
        }

        #gemb-ai-shell .shell-copy h2 {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 800;
            letter-spacing: 0;
            color: #111827;
        }

        #gemb-ai-shell .shell-copy p {
            margin: 0;
            color: #6b7280;
            font-size: 0.68rem;
        }

        #gemb-ai-close {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 0;
            background: #111111;
            color: #ffffff;
        }

        #gemb-ai-shell .shell-body {
            width: 100%;
            flex: 1;
            min-height: 0;
            display: flex;
            padding: 0 0.7rem 0.7rem;
        }

        #gemb-chat-panel {
            width: 100%;
            height: 100%;
            border-radius: 16px;
            border: 1px solid #dee2f0;
            background: #f6f7fc;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #gemb-chat-messages {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 0.75rem 0.7rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .gemb-msg-row {
            display: flex;
        }

        .gemb-msg-row.bot {
            justify-content: flex-start;
        }

        .gemb-msg-row.user {
            justify-content: flex-end;
        }

        .gemb-msg {
            max-width: 82%;
            border-radius: 12px;
            padding: 0.62rem 0.72rem;
            font-size: 0.79rem;
            line-height: 1.5;
            word-wrap: break-word;
            white-space: normal;
        }

        .gemb-msg p {
            margin: 0 0 0.48rem;
        }

        .gemb-msg p:last-child {
            margin-bottom: 0;
        }

        .gemb-msg ul,
        .gemb-msg ol {
            margin: 0 0 0.5rem;
            padding-left: 1.05rem;
        }

        .gemb-msg li {
            margin: 0.2rem 0;
        }

        .gemb-msg strong {
            font-weight: 700;
        }

        .gemb-msg.bot {
            background: #ececf3;
            color: #111827;
            border-top-left-radius: 5px;
        }

        .gemb-msg.user {
            background: linear-gradient(135deg, #6f78ff 0%, #5968e8 100%);
            color: #ffffff;
            border-top-right-radius: 5px;
        }

        #gemb-chat-form {
            border-top: 1px solid #e3e5f0;
            padding: 0.55rem 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.42rem;
            background: #ffffff;
        }

        #gemb-chat-plus,
        #gemb-chat-mic {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid #d8dbe9;
            background: #f7f7fb;
            color: #6b7280;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        #gemb-chat-mic {
            position: relative;
            overflow: hidden;
        }

        #gemb-chat-mic .mic-idle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #gemb-chat-mic .mic-orb {
            display: none;
            width: 1.28rem;
            height: 1.28rem;
            border-radius: 999px;
            border: 1px solid rgba(207, 250, 254, 0.75);
            background:
                radial-gradient(circle at 22% 24%, rgba(186, 230, 253, 0.95), rgba(186, 230, 253, 0.05) 35%),
                radial-gradient(circle at 76% 28%, rgba(196, 181, 253, 0.95), rgba(196, 181, 253, 0.06) 42%),
                radial-gradient(circle at 52% 74%, rgba(147, 197, 253, 0.95), rgba(147, 197, 253, 0.08) 48%),
                linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(30, 64, 175, 0.9));
            box-shadow:
                0 0 0 1px rgba(219, 234, 254, 0.38) inset,
                0 3px 9px rgba(56, 189, 248, 0.45);
        }

        #gemb-chat-mic.is-listening {
            border-color: rgba(56, 189, 248, 0.55);
            background: #0f172a;
        }

        #gemb-chat-mic.is-listening .mic-idle {
            display: none;
        }

        #gemb-chat-mic.is-listening .mic-orb {
            display: inline-flex;
            animation: gembMicOrbBreath 1.9s ease-in-out infinite;
        }

        #gemb-chat-mic.unsupported {
            opacity: 0.45;
            cursor: not-allowed;
        }

        #gemb-chat-input {
            flex: 1;
            height: 2rem;
            border: 0;
            background: transparent;
            color: #111827;
            font-size: 0.78rem;
            outline: none;
        }

        #gemb-chat-input::placeholder {
            color: #9ca3af;
        }

        #gemb-chat-send {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 0;
            background: #111111;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .gemb-typing {
            display: inline-flex;
            align-items: center;
            gap: 0.24rem;
        }

        .gemb-typing span {
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 999px;
            background: #9ca3af;
            animation: gembTyping 1s infinite ease-in-out;
        }

        .gemb-typing span:nth-child(2) {
            animation-delay: 0.12s;
        }

        .gemb-typing span:nth-child(3) {
            animation-delay: 0.24s;
        }

        @keyframes gembTyping {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
            40% { transform: translateY(-2px); opacity: 1; }
        }

        @keyframes gembMicOrbBreath {
            0% {
                transform: scale(0.94);
                filter: saturate(1);
                box-shadow:
                    0 0 0 1px rgba(219, 234, 254, 0.38) inset,
                    0 2px 7px rgba(56, 189, 248, 0.35);
            }
            50% {
                transform: scale(1.08);
                filter: saturate(1.25);
                box-shadow:
                    0 0 0 1px rgba(224, 242, 254, 0.6) inset,
                    0 0 16px rgba(125, 211, 252, 0.6);
            }
            100% {
                transform: scale(0.95);
                filter: saturate(1.05);
                box-shadow:
                    0 0 0 1px rgba(219, 234, 254, 0.38) inset,
                    0 2px 7px rgba(56, 189, 248, 0.35);
            }
        }

        #gemb-ai-launcher {
            display: none !important;
        }

        #gemb-ai-launcher button {
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: transparent;
            border-radius: 999px;
        }

        #gemb-ai-launcher .logo-frame-launcher {
            width: 4.2rem;
            height: 4.2rem;
            border-radius: 999px;
            border: 1px solid rgba(125, 211, 252, 0.32);
            background:
                radial-gradient(circle at 25% 20%, rgba(56, 189, 248, 0.25), transparent 55%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 58, 138, 0.82));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 16px 24px -18px rgba(56, 189, 248, 0.8),
                0 0 0 1px rgba(15, 23, 42, 0.45) inset;
            overflow: hidden;
        }

        #gemb-ai-launcher .logo-frame-launcher img {
            width: 2.8rem;
            height: 2.8rem;
            object-fit: contain;
            filter: drop-shadow(0 3px 8px rgba(14, 165, 233, 0.3));
        }

        @media (max-width: 640px) {
            #gemb-ai-launcher {
                right: 0.75rem;
                left: auto;
                bottom: 5.75rem;
                width: 3.8rem;
                height: 3.8rem;
            }

            #gemb-ai-modal {
                right: 0.5rem;
                left: auto;
                bottom: 0.5rem;
                width: min(328px, calc(100vw - 1rem));
                height: min(78vh, 540px);
            }

            #gemb-ai-shell {
                width: 100%;
                height: 100%;
                border-radius: 18px;
            }
        }

        #gemb-ai2-launcher {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            z-index: 90;
            width: 4.2rem;
            height: 4.2rem;
        }

        #gemb-ai2-launcher button {
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: transparent;
            border-radius: 999px;
        }

        #gemb-ai2-launcher .logo-frame-launcher {
            width: 4.2rem;
            height: 4.2rem;
            border-radius: 999px;
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            background: 
                radial-gradient(circle at 30% 30%, rgba(134, 239, 172, 0.4), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(96, 165, 250, 0.4), transparent 60%),
                radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.4), transparent 60%),
                rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(12px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 10px 25px -5px rgba(0, 0, 0, 0.3),
                inset 0 0 15px rgba(255, 255, 255, 0.1);
            overflow: hidden;
            position: relative;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .gemb2-voice-wave {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(134, 239, 172, 0.6) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.3s ease;
            mix-blend-mode: color-dodge;
        }

        .gemb2-voice-wave.active {
            opacity: 1;
            animation: gembVoicePulse 2s infinite;
        }

        @keyframes gembVoicePulse {
            0% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.4); opacity: 0.2; }
            100% { transform: scale(1); opacity: 0.5; }
        }

        #gemb-ai2-launcher .logo-frame-launcher img {
            width: 2.8rem;
            height: 2.8rem;
            object-fit: contain;
            filter: drop-shadow(0 3px 8px rgba(16, 185, 129, 0.35));
        }

        #gemb-ai2-launcher .bot-badge {
            position: absolute;
            bottom: 0.28rem;
            right: 0.12rem;
            font-size: 0.46rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            color: #ecfdf5;
            background: rgba(5, 46, 22, 0.8);
            border: 1px solid rgba(110, 231, 183, 0.7);
            border-radius: 999px;
            padding: 0.12rem 0.32rem;
            line-height: 1;
        }

        #gemb-ai2-modal {
            position: fixed;
            right: 0.75rem;
            bottom: 0.75rem;
            z-index: 80;
            display: none;
            width: min(344px, calc(100vw - 1.5rem));
            height: min(560px, calc(100vh - 1.5rem));
            padding: 0;
        }

        #gemb-ai2-modal.open {
            display: block;
        }

        #gemb-ai2-shell {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            border: 1px solid #cce9da;
            background: linear-gradient(180deg, #f3fdf8 0%, #ecf8f2 100%);
            box-shadow: 0 26px 44px -24px rgba(15, 118, 110, 0.45);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .gemb-suggestions-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
            padding: 0 0.75rem;
            animation: gembFadeUp 0.3s ease-out;
        }
        @keyframes gembFadeUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .gemb-suggestion-chip {
            background: #ffffff;
            border: 1px solid #cce9da;
            border-radius: 10px;
            padding: 0.45rem 0.75rem;
            font-size: 10.5px;
            font-weight: 700;
            color: #0d9488;
            cursor: pointer;
            white-space: normal;
            text-align: left;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            max-width: 100%;
        }
        .gemb-suggestion-chip:hover {
            background: #0d9488;
            color: #ffffff;
            border-color: #0d9488;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.2);
        }

        #gemb-ai2-shell .shell-top {
            padding: 0.95rem 0.9rem 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        #gemb-ai2-shell .shell-copy {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            color: #0f172a;
        }

        #gemb-ai2-shell .shell-copy h2 {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 800;
            letter-spacing: 0;
            color: #064e3b;
        }

        #gemb-ai2-shell .shell-copy p {
            margin: 0;
            color: #4b5563;
            font-size: 0.68rem;
        }

        #gemb-ai2-shell .shell-controls {
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            flex-shrink: 0;
        }

        #gemb-ai2-key,
        #gemb-ai2-clear,
        #gemb-ai2-close {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid #bbdecf;
            background: #ffffff;
            color: #065f46;
        }

        #gemb-ai2-close {
            border-color: #065f46;
            background: #065f46;
            color: #ffffff;
        }

        #gemb-ai2-shell .shell-meta {
            margin: 0 0.9rem 0.65rem;
            padding: 0.42rem 0.56rem;
            border-radius: 10px;
            border: 1px solid #bbdecf;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.55rem;
        }

        #gemb-ai2-key-status {
            font-size: 0.62rem;
            font-weight: 700;
            color: #065f46;
        }

        #gemb-ai2-method-tag {
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #047857;
            padding: 0.14rem 0.38rem;
            border-radius: 999px;
            background: #d1fae5;
            border: 1px solid #86efac;
        }

        #gemb-ai2-shell .shell-body {
            width: 100%;
            flex: 1;
            min-height: 0;
            display: flex;
            padding: 0 0.7rem 0.7rem;
        }

        #gemb-ai2-chat-panel {
            width: 100%;
            height: 100%;
            border-radius: 16px;
            border: 1px solid #cde7d9;
            background: #f4fbf7;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #gemb-ai2-chat-messages {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 0.75rem 0.7rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .gemb2-msg-row {
            display: flex;
        }

        .gemb2-msg-row.bot {
            justify-content: flex-start;
        }

        .gemb2-msg-row.user {
            justify-content: flex-end;
        }

        .gemb2-msg {
            max-width: 82%;
            border-radius: 12px;
            padding: 0.62rem 0.72rem;
            font-size: 0.79rem;
            line-height: 1.5;
            word-wrap: break-word;
            white-space: normal;
        }

        .gemb2-msg p {
            margin: 0 0 0.48rem;
        }

        .gemb2-msg p:last-child {
            margin-bottom: 0;
        }

        .gemb2-msg ul,
        .gemb2-msg ol {
            margin: 0 0 0.5rem;
            padding-left: 1.05rem;
        }

        .gemb2-msg li {
            margin: 0.2rem 0;
        }

        .gemb2-msg strong {
            font-weight: 700;
        }

        .gemb2-msg.bot {
            background: #e8f5ef;
            color: #064e3b;
            border-top-left-radius: 5px;
        }

        .gemb2-msg.user {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
            border-top-right-radius: 5px;
        }

        #gemb-ai2-chat-form {
            border-top: 1px solid #d2e8dc;
            padding: 0.55rem 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.42rem;
            background: #ffffff;
        }

        #gemb-ai2-chat-plus {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid #d8dbe9;
            background: #f7f7fb;
            color: #6b7280;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        #gemb-ai2-chat-mic {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid #d8dbe9;
            background: #f1f5f9;
            color: #475569;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }

        #gemb-ai2-chat-mic.listening {
            border-color: #ef4444;
            background: #fef2f2;
            color: #dc2626;
            animation: gembMicPulse 1.5s infinite ease-in-out;
        }

        #gemb-ai2-chat-mic.unsupported {
            opacity: 0.4;
            cursor: not-allowed;
            filter: grayscale(1);
        }

        @keyframes gembMicPulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        #gemb-ai2-chat-input {
            flex: 1;
            height: 2rem;
            border: 0;
            background: transparent;
            color: #111827;
            font-size: 0.78rem;
            outline: none;
        }

        #gemb-ai2-chat-input::placeholder {
            color: #9ca3af;
        }

        #gemb-ai2-chat-send {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 0;
            background: #065f46;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .gemb2-typing {
            display: inline-flex;
            align-items: center;
            gap: 0.24rem;
        }

        .gemb2-typing span {
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 999px;
            background: #6ee7b7;
            animation: gembTyping 1s infinite ease-in-out;
        }

        .gemb2-typing span:nth-child(2) {
            animation-delay: 0.12s;
        }

        .gemb2-typing span:nth-child(3) {
            animation-delay: 0.24s;
        }

        body.login-mode #gemb-ai2-launcher,
        body.login-mode #gemb-ai2-modal {
            display: none !important;
        }

        @media (max-width: 640px) {
            #gemb-ai2-launcher {
                right: 0.75rem;
                left: auto;
                bottom: 0.9rem;
                width: 3.6rem;
                height: 3.6rem;
            }

            #gemb-ai2-modal {
                inset: 0;
                width: 100vw;
                height: 100dvh;
                max-height: 100dvh;
                z-index: 95;
            }

            #gemb-ai2-shell {
                width: 100%;
                height: 100%;
                border-radius: 0;
                border: 0;
            }

            #gemb-ai2-shell .shell-body {
                padding: 0;
            }

            #gemb-ai2-chat-panel {
                border-radius: 0;
                border-left: 0;
                border-right: 0;
                border-bottom: 0;
            }

            #gemb-ai2-chat-messages {
                padding: 0.85rem 0.75rem;
            }

            .gemb2-msg {
                max-width: 90%;
            }

            #gemb-ai2-chat-form {
                padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
            }
        }

        body.dark-mode [class*="bg-[#f8fafc]"] {
            background-color: #18223a !important;
        }

        body.dark-mode [class*="bg-[#f1f5f9]"] {
            background-color: #1a263f !important;
        }

        body.dark-mode [class*="bg-[#fef2f2]"] {
            background-color: #2a1f38 !important;
        }

        body.dark-mode [class*="hover:bg-[#f8fafc]"]:hover {
            background-color: #223154 !important;
        }

        body.dark-mode [class*="hover:bg-[#fef2f2]"]:hover {
            background-color: #3a2b4e !important;
        }

        body.dark-mode .glass-card {
            background: rgba(18, 26, 43, 0.78);
            border: 1px solid rgba(143, 161, 198, 0.22);
        }

        body.dark-mode ::-webkit-scrollbar-thumb {
            background: #334a77;
        }

        body.dark-mode button.bg-white,
        body.dark-mode a.bg-white {
            background: linear-gradient(135deg, #22345a 0%, #2b4575 100%) !important;
            border-color: #4b6fab !important;
            color: #eaf1ff !important;
            box-shadow: 0 6px 14px -8px rgba(79, 126, 201, 0.65);
        }

        body.dark-mode button.bg-white:hover,
        body.dark-mode a.bg-white:hover {
            background: linear-gradient(135deg, #2c4270 0%, #36558f 100%) !important;
            border-color: #6b93db !important;
            color: #ffffff !important;
        }

        body.dark-mode button[class*="bg-primary"] {
            box-shadow: 0 10px 20px -10px rgba(250, 151, 109, 0.65) !important;
        }

        body.dark-mode button[class*="bg-primary/5"],
        body.dark-mode button[class*="bg-primary/10"] {
            background-color: #1f3b69 !important;
            border-color: #4d75bb !important;
            color: #aecdff !important;
        }

        body.dark-mode button[class*="bg-primary/5"]:hover,
        body.dark-mode button[class*="bg-primary/10"]:hover {
            background-color: #2a4f8a !important;
            color: #dbe8ff !important;
        }

        body.dark-mode button[class*="border-border-color"] {
            border-color: #3c527f !important;
        }

        body.dark-mode #view-cpm-captura {
            background: radial-gradient(circle at 12% 8%, rgba(49, 78, 128, 0.22) 0%, rgba(11, 16, 32, 0) 40%),
                radial-gradient(circle at 88% 14%, rgba(25, 115, 148, 0.16) 0%, rgba(11, 16, 32, 0) 42%),
                #0b1020;
        }

        body.dark-mode #view-cpm-captura .sticky.top-0 {
            background: rgba(11, 16, 32, 0.9) !important;
            border-color: rgba(91, 121, 176, 0.45) !important;
        }

        body.dark-mode #view-cpm-captura #cpm-main-tabs {
            background: #14213a !important;
            border-color: #2c426e !important;
        }

        body.dark-mode #view-cpm-captura .cpm-main-tab {
            color: #9db3d8 !important;
        }

        body.dark-mode #view-cpm-captura .cpm-main-tab:hover {
            color: #e5efff !important;
            background: rgba(61, 89, 138, 0.35) !important;
        }

        body.dark-mode #view-cpm-captura .cpm-main-tab.bg-white {
            background: linear-gradient(135deg, #2a4372 0%, #365b98 100%) !important;
            border: 1px solid #5f88d2 !important;
            color: #f4f8ff !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-evaluacion [class*="bg-[#fffbeb]"],
        body.dark-mode #view-cpm-captura #cpm-tab-captura [class*="bg-[#fffbeb]"] {
            background-color: #342b1b !important;
        }

        body.dark-mode #view-cpm-captura [class*="bg-[#fff7ed]"] {
            background-color: #312216 !important;
            border-color: #6e4a2a !important;
        }

        body.dark-mode #view-cpm-captura [class*="bg-[#ecfeff]"] {
            background-color: #142e36 !important;
            border-color: #2f6570 !important;
        }

        body.dark-mode #view-cpm-captura [class*="bg-[#eff6ff]"] {
            background-color: #182944 !important;
            border-color: #365b92 !important;
        }

        body.dark-mode #view-cpm-captura #cpm-eval-preview .text-\[\#c2410c\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#c2410c\] {
            color: #ffbe8b !important;
        }

        body.dark-mode #view-cpm-captura #cpm-eval-preview .text-\[\#0f766e\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#0f766e\] {
            color: #6be6db !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-evaluacion textarea,
        body.dark-mode #view-cpm-captura #cpm-tab-captura textarea,
        body.dark-mode #view-cpm-captura #cpm-tab-evaluacion input,
        body.dark-mode #view-cpm-captura #cpm-tab-captura input,
        body.dark-mode #view-cpm-captura #cpm-tab-evaluacion select,
        body.dark-mode #view-cpm-captura #cpm-tab-captura select {
            color: #e6eefc;
            border-color: #2f456f;
            background-color: #122038;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-evaluacion textarea::placeholder,
        body.dark-mode #view-cpm-captura #cpm-tab-captura textarea::placeholder,
        body.dark-mode #view-cpm-captura #cpm-tab-evaluacion input::placeholder,
        body.dark-mode #view-cpm-captura #cpm-tab-captura input::placeholder {
            color: #8ca3c8;
        }

        body.dark-mode #view-cpm-captura #cpm-gantt-container,
        body.dark-mode #view-cpm-captura #cpm-eval-preview [class*="bg-[#f8fafc]"] {
            background-color: #101c32 !important;
            border-color: #2f456f !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista>div {
            background: linear-gradient(160deg, #0f1a30 0%, #101f38 100%) !important;
            border-color: #2e456f !important;
            box-shadow: 0 16px 34px -22px rgba(53, 86, 146, 0.72) !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista [class*="bg-[linear-gradient(160deg,#ffffff_0%,#f6f9fc_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-tab-vista [class*="bg-[linear-gradient(160deg,#ffffff_0%,#f6f9ff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-tab-vista [class*="bg-[linear-gradient(165deg,#ffffff_0%,#f6f9ff_100%)]"] {
            background: linear-gradient(160deg, #0f1a30 0%, #12223d 100%) !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista [class*="shadow-[0_12px_30px_rgba(15,23,42,0.06)]"] {
            box-shadow: 0 16px 34px -24px rgba(50, 85, 150, 0.68) !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-record-select {
            background-color: #13233f !important;
            border-color: #35507f !important;
            color: #e7efff !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .text-text-heading {
            color: #e7efff !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .text-text-muted {
            color: #9eb4d8 !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .text-primary {
            color: #9ec5ff !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .bg-white {
            background-color: #13213a !important;
            border-color: #2f466f !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .border-border-color {
            border-color: #2f466f !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .text-\[\#c2410c\] {
            color: #ffbe8b !important;
        }

        body.dark-mode #view-cpm-captura #cpm-tab-vista .text-\[\#0f766e\] {
            color: #6be6db !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content section,
        body.dark-mode #view-cpm-captura #cpm-vista-content .rounded-xl,
        body.dark-mode #view-cpm-captura #cpm-vista-content .rounded-2xl {
            border-color: #2f466f !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#f6f9ff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(160deg,#ffffff_0%,#f6f9fc_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(160deg,#ffffff_0%,#f6f9ff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(160deg,#ffffff_0%,#f8fbff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#f8fbff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#eef2ff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#ecfeff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#f8fafc_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#fffbeb_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(165deg,#ffffff_0%,#f0f9ff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(150deg,#f8fafc_0%,#eff6ff_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(150deg,#eff6ff_0%,#dbeafe_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(150deg,#ecfdf5_0%,#dcfce7_100%)]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[linear-gradient(150deg,#fffbeb_0%,#fef3c7_100%)]"] {
            background: linear-gradient(155deg, #12223d 0%, #182b4a 100%) !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#fff7f7]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#f4fff8]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#fffdf3]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#ecfdf5]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#fffbeb]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#f8fafc]"] {
            background-color: #14253f !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#eef2f7]"],
        body.dark-mode #view-cpm-captura #cpm-vista-content [class*="bg-[#f1f5f9]"] {
            background-color: #1b2d4a !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content table,
        body.dark-mode #view-cpm-captura #cpm-vista-content .bg-white {
            background-color: #13213a !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#0f172a\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#334155\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#1e3a8a\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#166534\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#065f46\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#9f1239\],
        body.dark-mode #view-cpm-captura #cpm-vista-content .text-\[\#b45309\] {
            color: #c9d8f1 !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content .text-status-green {
            color: #42d392 !important;
        }

        body.dark-mode #view-cpm-captura #cpm-vista-content .text-status-red {
            color: #fb7185 !important;
        }

        body.dark-mode #hub-maturity-card {
            background: linear-gradient(135deg, #1a2847 0%, #243b66 100%) !important;
            border-color: #5a79b8 !important;
            box-shadow: 0 12px 24px -16px rgba(74, 116, 195, 0.8);
        }

        body.dark-mode #hub-depto-score {
            color: #ffd166 !important;
        }

        body.dark-mode #hub-maturity-label {
            color: #9ec5ff !important;
        }

        body.dark-mode #hub-kpi-title {
            color: #f4f8ff !important;
        }

        body.dark-mode #hub-maturity-next-label,
        body.dark-mode #hub-maturity-next {
            color: #d8e7ff !important;
        }

        #company-overdue-card.overdue-ok {
            background: #ecfdf5;
            border-color: #86efac;
        }

        #company-overdue-card.overdue-ok #company-overdue-total-label,
        #company-overdue-card.overdue-ok #company-overdue-total-val {
            color: #15803d;
        }

        #company-overdue-card.overdue-warning {
            background: #fffbeb;
            border-color: #fcd34d;
        }

        #company-overdue-card.overdue-warning #company-overdue-total-label,
        #company-overdue-card.overdue-warning #company-overdue-total-val {
            color: #b45309;
        }

        #company-overdue-card.overdue-critical {
            background: #fef2f2;
            border-color: #fca5a5;
        }

        #company-overdue-card.overdue-critical #company-overdue-total-label,
        #company-overdue-card.overdue-critical #company-overdue-total-val {
            color: #b91c1c;
        }

        body.dark-mode #company-overdue-card.overdue-ok {
            background: linear-gradient(135deg, #173728 0%, #1f4d37 100%) !important;
            border-color: #35a66f !important;
        }

        body.dark-mode #company-overdue-card.overdue-ok #company-overdue-total-label,
        body.dark-mode #company-overdue-card.overdue-ok #company-overdue-total-val {
            color: #bbf7d0 !important;
        }

        body.dark-mode #company-overdue-card.overdue-warning {
            background: linear-gradient(135deg, #3f2a16 0%, #5a3918 100%) !important;
            border-color: #d4882f !important;
        }

        body.dark-mode #company-overdue-card.overdue-warning #company-overdue-total-label,
        body.dark-mode #company-overdue-card.overdue-warning #company-overdue-total-val {
            color: #ffd089 !important;
        }

        body.dark-mode #company-overdue-card.overdue-critical {
            background: linear-gradient(135deg, #3d1f2c 0%, #58263a 100%) !important;
            border-color: #d46a8f !important;
        }

        body.dark-mode #company-overdue-card.overdue-critical #company-overdue-total-label,
        body.dark-mode #company-overdue-card.overdue-critical #company-overdue-total-val {
            color: #ffd1e2 !important;
        }

        body.dark-mode #company-completion-card {
            background: linear-gradient(135deg, #182d4f 0%, #214274 100%) !important;
            border-color: #5d8fdd !important;
        }

        body.dark-mode #company-completion-rate-label,
        body.dark-mode #company-completion-rate-val,
        body.dark-mode #company-completion-rate-sub {
            color: #cfe1ff !important;
        }

        body.dark-mode #company-kpi-card-no-audit {
            background: linear-gradient(135deg, #2a334a 0%, #344160 100%) !important;
            border-color: #5a709f !important;
        }

        body.dark-mode #company-kpi-no-audit-label,
        body.dark-mode #company-kpi-no-audit-val,
        body.dark-mode #company-kpi-no-audit-sub,
        body.dark-mode #company-kpi-progress-sub {
            color: #d7e2fb !important;
        }

        body.dark-mode #company-filter-all,
        body.dark-mode #company-filter-critical,
        body.dark-mode #company-filter-no-audit,
        body.dark-mode #company-filter-overdue,
        body.dark-mode #company-subtab-summary-label,
        body.dark-mode #company-subtab-exec-label,
        body.dark-mode #company-subtab-analysis-label,
        body.dark-mode #company-subtab-history-label,
        body.dark-mode #company-tab-summary,
        body.dark-mode #company-tab-deptos,
        body.dark-mode #hub-mode-lean,
        body.dark-mode #hub-mode-input,
        body.dark-mode #hub-mode-review {
            box-shadow: 0 8px 18px -12px rgba(81, 126, 209, 0.75);
        }

        body.dark-mode #hub-mode-switch {
            background: rgba(15, 23, 42, 0.86) !important;
            border-color: rgba(96, 165, 250, 0.38) !important;
            box-shadow: 0 12px 30px -20px rgba(8, 26, 62, 0.95);
        }

        body.dark-mode #hub-mode-lean,
        body.dark-mode #hub-mode-input,
        body.dark-mode #hub-mode-review {
            background: rgba(30, 58, 110, 0.35) !important;
            border-color: rgba(125, 170, 248, 0.34) !important;
        }

        body.dark-mode #hub-mode-lean.border-primary,
        body.dark-mode #hub-mode-input.border-primary,
        body.dark-mode #hub-mode-review.border-primary {
            background: rgba(59, 130, 246, 0.42) !important;
            border-color: #93c5fd !important;
        }

        body.dark-mode #hub-mode-lean-title,
        body.dark-mode #hub-mode-input-title,
        body.dark-mode #hub-mode-review-title {
            color: #dbeafe !important;
            opacity: 1 !important;
            text-shadow: 0 0 0 transparent;
        }

        body.dark-mode #hub-mode-lean.border-primary #hub-mode-lean-title,
        body.dark-mode #hub-mode-input.border-primary #hub-mode-input-title,
        body.dark-mode #hub-mode-review.border-primary #hub-mode-review-title {
            color: #ffffff !important;
        }

        body.dark-mode #view-depto-hub .bg-white\/60.backdrop-blur-xl.rounded-\[24px\] {
            background: rgba(15, 23, 42, 0.9) !important;
            border-color: rgba(96, 165, 250, 0.34) !important;
        }

        body.dark-mode #hub-responsables-title {
            color: #f8fafc !important;
        }

        body.dark-mode #hub-responsables-hint {
            color: #93c5fd !important;
        }

        body.dark-mode #hub-responsables .text-text-muted {
            color: #dbeafe !important;
        }

        body.dark-mode #hub-responsables .bg-\[\#f8fafc\],
        body.dark-mode #hub-responsables .bg-\[\#ecfdf5\],
        body.dark-mode #hub-responsables .bg-\[\#eff6ff\],
        body.dark-mode #hub-responsables .bg-\[\#fff7ed\] {
            background: rgba(30, 41, 59, 0.72) !important;
        }

        body.dark-mode #hub-responsables .border-border-color,
        body.dark-mode #hub-responsables .border-\[\#a7f3d0\],
        body.dark-mode #hub-responsables .border-\[\#bfdbfe\],
        body.dark-mode #hub-responsables .border-\[\#fed7aa\] {
            border-color: rgba(148, 163, 184, 0.45) !important;
        }

        body.dark-mode #hub-responsables .text-status-green,
        body.dark-mode #hub-responsables .text-\[\#1d4ed8\],
        body.dark-mode #hub-responsables .text-\[\#c2410c\] {
            color: #e2e8f0 !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           DARK MODE: HISTORIA DE NEGOCIO (HN) — Captura + Evaluación + Presentación
           ═══════════════════════════════════════════════════════════════ */

        /* HN Textareas & Inputs */
        body.dark-mode #view-historia-negocio textarea,
        body.dark-mode #view-historia-negocio input[type="text"],
        body.dark-mode #view-historia-negocio input[type="number"],
        body.dark-mode #view-historia-negocio select {
            color: #e6eefc !important;
            border-color: #2f456f !important;
            background-color: #122038 !important;
        }

        body.dark-mode #view-historia-negocio textarea::placeholder,
        body.dark-mode #view-historia-negocio input::placeholder {
            color: #8ca3c8 !important;
        }

        /* HN Eval switches — label cards */
        body.dark-mode #view-historia-negocio .bg-amber-50 {
            background-color: #342b1b !important;
        }

        body.dark-mode #view-historia-negocio [class*="bg-[#fafbfd]"] {
            background-color: #18223a !important;
        }

        body.dark-mode #view-historia-negocio [class*="bg-[#f8fbff]"] {
            background-color: #14203c !important;
        }

        body.dark-mode #view-historia-negocio [class*="border-[#e8edf4]"] {
            border-color: #2f456f !important;
        }

        body.dark-mode #view-historia-negocio [class*="border-[#fcd34d]"] {
            border-color: #a17522 !important;
        }

        body.dark-mode #view-historia-negocio [class*="border-[#93c5fd]"] {
            border-color: #3b6fc0 !important;
        }

        body.dark-mode #view-historia-negocio [class*="border-[#bfdbfe]"] {
            border-color: #3668a8 !important;
        }

        body.dark-mode #view-historia-negocio [class*="border-[#f59e0b]"] {
            border-color: #c07b09 !important;
        }

        /* HN Eval score donut & maturity area */
        body.dark-mode #view-historia-negocio .bg-slate-100 {
            background-color: #1e2d4a !important;
        }

        body.dark-mode #view-historia-negocio .bg-slate-50 {
            background-color: #18253e !important;
        }

        /* HN Eval text colors that are dark-on-light — make them light-on-dark */
        body.dark-mode #view-historia-negocio .text-\[\#92400e\] {
            color: #fbbf24 !important;
        }

        body.dark-mode #view-historia-negocio .text-\[\#0ea5e9\] {
            color: #7dd3fc !important;
        }

        body.dark-mode #view-historia-negocio .text-\[\#8b5cf6\] {
            color: #c4b5fd !important;
        }

        body.dark-mode #view-historia-negocio .text-\[\#bfdbfe\] {
            color: #93c5fd !important;
        }

        body.dark-mode #view-historia-negocio .text-\[\#dbe7f3\] {
            color: #8fabc8 !important;
        }

        body.dark-mode #view-historia-negocio .text-\[\#facc15\] {
            color: #fde047 !important;
        }

        /* HN Presentación — presentación cards */
        body.dark-mode #view-historia-negocio [class*="border-[#bae6fd]"] {
            border-color: #2a6090 !important;
        }

        body.dark-mode #view-historia-negocio [class*="border-[#ddd6fe]"] {
            border-color: #5b45a8 !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           DARK MODE: HOSHIN KANRI (HK) — Captura + Evaluación + Vista
           ═══════════════════════════════════════════════════════════════ */

        /* HK Textareas & Inputs */
        body.dark-mode #view-hoshin-kanri textarea,
        body.dark-mode #view-hoshin-kanri input[type="text"],
        body.dark-mode #view-hoshin-kanri input[type="number"],
        body.dark-mode #view-hoshin-kanri select {
            color: #e6eefc !important;
            border-color: #2f456f !important;
            background-color: #122038 !important;
        }

        body.dark-mode #view-hoshin-kanri textarea::placeholder,
        body.dark-mode #view-hoshin-kanri input::placeholder {
            color: #8ca3c8 !important;
        }

        /* HK Tailwind utility bg overrides */
        body.dark-mode #view-hoshin-kanri .bg-amber-50 {
            background-color: #342b1b !important;
        }

        body.dark-mode #view-hoshin-kanri .bg-red-50 {
            background-color: #2d1a1f !important;
        }

        body.dark-mode #view-hoshin-kanri .bg-blue-50 {
            background-color: #172744 !important;
        }

        body.dark-mode #view-hoshin-kanri .bg-emerald-50 {
            background-color: #142e24 !important;
        }

        body.dark-mode #view-hoshin-kanri .bg-purple-50 {
            background-color: #231b38 !important;
        }

        body.dark-mode #view-hoshin-kanri .bg-slate-100 {
            background-color: #1e2d4a !important;
        }

        body.dark-mode #view-hoshin-kanri .bg-slate-50 {
            background-color: #18253e !important;
        }

        /* HK inline hex backgrounds */
        body.dark-mode #view-hoshin-kanri [class*="bg-[#fafbfd]"] {
            background-color: #18223a !important;
        }

        body.dark-mode #view-hoshin-kanri [class*="bg-[#f8fbff]"] {
            background-color: #14203c !important;
        }

        body.dark-mode #view-hoshin-kanri [class*="border-[#e8edf4]"] {
            border-color: #2f456f !important;
        }

        /* HK text color overrides — dark-on-light to light-on-dark */
        body.dark-mode #view-hoshin-kanri .text-\[\#92400e\] {
            color: #fbbf24 !important;
        }

        body.dark-mode #view-hoshin-kanri .text-amber-700 {
            color: #fbbf24 !important;
        }

        body.dark-mode #view-hoshin-kanri .text-red-700 {
            color: #fca5a5 !important;
        }

        body.dark-mode #view-hoshin-kanri .text-blue-700 {
            color: #93c5fd !important;
        }

        body.dark-mode #view-hoshin-kanri .text-emerald-700 {
            color: #6ee7b7 !important;
        }

        body.dark-mode #view-hoshin-kanri .text-purple-700 {
            color: #c4b5fd !important;
        }

        body.dark-mode #view-hoshin-kanri .text-slate-600,
        body.dark-mode #view-hoshin-kanri .text-slate-700 {
            color: #c8d3ea !important;
        }

        /* HK border overrides for SQCPRH category colors */
        body.dark-mode #view-hoshin-kanri .border-amber-200 {
            border-color: #92400e !important;
        }

        body.dark-mode #view-hoshin-kanri .border-red-200 {
            border-color: #991b1b !important;
        }

        body.dark-mode #view-hoshin-kanri .border-blue-200 {
            border-color: #1d4ed8 !important;
        }

        body.dark-mode #view-hoshin-kanri .border-emerald-200 {
            border-color: #065f46 !important;
        }

        body.dark-mode #view-hoshin-kanri .border-purple-200 {
            border-color: #6d28d9 !important;
        }

        body.dark-mode #view-hoshin-kanri .border-slate-200 {
            border-color: #2f456f !important;
        }

        /* HK Eval — score badges and maturity cards */
        body.dark-mode #view-hoshin-kanri [class*="bg-[#fffbeb]"] {
            background-color: #342b1b !important;
        }

        body.dark-mode #view-hoshin-kanri [class*="bg-[#fff7ed]"] {
            background-color: #312216 !important;
            border-color: #6e4a2a !important;
        }

        body.dark-mode #view-hoshin-kanri [class*="bg-[#eff6ff]"] {
            background-color: #182944 !important;
        }

        body.dark-mode #view-hoshin-kanri [class*="bg-[#ecfeff]"] {
            background-color: #142e36 !important;
        }

        body.dark-mode #view-hoshin-kanri [class*="bg-[#ecfdf5]"] {
            background-color: #142e24 !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           GLOBAL DARK MODE: Shared Tailwind utility overrides
           (for elements outside specific view scopes)
           ═══════════════════════════════════════════════════════════════ */

        body.dark-mode .bg-amber-50 {
            background-color: #342b1b !important;
        }

        body.dark-mode .bg-red-50 {
            background-color: #2d1a1f !important;
        }

        body.dark-mode [class*="bg-[#fdfaf6]"] {
            background-color: #0f1830 !important;
        }

        body.dark-mode .bg-blue-50 {
            background-color: #172744 !important;
        }

        body.dark-mode .bg-emerald-50 {
            background-color: #142e24 !important;
        }

        body.dark-mode .bg-purple-50 {
            background-color: #231b38 !important;
        }

        body.dark-mode .bg-slate-100 {
            background-color: #1e2d4a !important;
        }

        body.dark-mode .bg-slate-50 {
            background-color: #18253e !important;
        }

        body.dark-mode .border-slate-200 {
            border-color: #2f456f !important;
        }

        body.dark-mode .border-amber-200 {
            border-color: #92400e !important;
        }

        body.dark-mode .text-slate-600 {
            color: #c8d3ea !important;
        }

        body.dark-mode .text-\[\#92400e\] {
            color: #fbbf24 !important;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
            display: inline-flex;
            vertical-align: middle;
        }

        .filled-icon {
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
        }

        @media print {
            body * { visibility: hidden; }
            #hn-tab-presentacion, #hn-tab-presentacion * { visibility: visible; }
            #hn-tab-presentacion { 
                position: absolute; 
                left: 0; 
                top: 0; 
                width: 100%; 
                padding: 0 !important; 
                margin: 0 !important;
                background: white !important;
            }
            #hn-tabs-bar, #hn-help-drawer, .flex.justify-center.mt-12.gap-4, #bottom-nav { display: none !important; }
            .bg-white { border: 1px solid #eee !important; box-shadow: none !important; }
            .rounded-4xl { border-radius: 12px !important; }
        }

        .tab-content {
            display: none !important;
        }

        .tab-content.active {
            display: block !important;
            animation: fadeIn 0.3s ease-out;
        }

        .tab-content.active.is-flex-view {
            display: flex !important;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .nav-btn {
            transition: all 0.2s;
        }

        .nav-btn.active {
            color: #e17e66;
        }

        .nav-btn.active .material-symbols-outlined {
            font-variation-settings: 'FILL' 1;
        }

        .nav-brand {
            display: none;
            background: transparent;
            border: 0;
            padding: 0;
            cursor: pointer;
            text-align: left;
        }

        @media (min-width: 520px) {
            #main-content {
                padding-left: 160px;
                padding-bottom: 24px;
            }

            #content-shell {
                max-width: 1040px;
            }

            #bottom-nav {
                top: 76px;
                bottom: 16px;
                left: 16px;
                right: auto;
                width: 140px;
                background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
                border: 1px solid rgba(175, 194, 229, 0.75);
                border-radius: 26px;
                box-shadow: 0 18px 36px -22px rgba(42, 77, 141, 0.45);
                padding: 14px 10px;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                gap: 6px;
                overflow-x: visible;
                overflow-y: auto;
            }

            #bottom-nav:not(.hidden) {
                display: flex;
            }

            .nav-brand {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 0;
                margin-bottom: 14px;
                width: auto;
                color: #35507d;
            }

            .nav-brand img {
                width: 324px;
                height: 120px;
                object-fit: contain;
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
            }

            .nav-divider {
                height: 1px;
                width: calc(100% - 12px);
                margin: 0 auto 6px;
                background: rgba(164, 182, 214, 0.5);
            }

            .nav-btn {
                width: 100% !important;
                min-height: 46px;
                border-radius: 12px;
                color: #6e7f99;
                border: 1px solid transparent;
                transition: all 0.18s ease;
                gap: 10px;
                padding: 0 12px;
                flex-direction: row !important;
                justify-content: flex-start !important;
                align-items: center !important;
            }

            .nav-btn .material-symbols-outlined {
                font-size: 22px !important;
            }

            .nav-icon-box {
                width: 28px;
                height: 28px;
                border-radius: 9px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: rgba(142, 161, 194, 0.15);
                border: 1px solid rgba(168, 184, 212, 0.35);
                flex-shrink: 0;
            }

            .nav-btn:hover {
                color: #3f5472;
                background: rgba(255, 255, 255, 0.75);
                border-color: rgba(186, 202, 231, 0.9);
            }

            .nav-btn:hover .nav-icon-box {
                background: rgba(96, 128, 183, 0.16);
                border-color: rgba(139, 165, 208, 0.6);
            }

            .nav-btn.active {
                color: #2f445f;
                background: #ffffff;
                border-color: rgba(180, 197, 226, 0.95);
                box-shadow: 0 10px 18px -15px rgba(52, 76, 119, 0.55);
            }

            .nav-btn.active .nav-icon-box {
                background: linear-gradient(180deg, #4d79cb 0%, #355fae 100%);
                border-color: rgba(76, 122, 214, 0.85);
                color: #ffffff;
            }

            .nav-btn.active .material-symbols-outlined {
                font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
            }

            .nav-btn span:last-child {
                color: inherit;
                font-size: 12px !important;
                font-weight: 800;
                line-height: 1.15;
                text-wrap: balance;
            }

            body.dark-mode #bottom-nav {
                background: linear-gradient(180deg, #0f1e3d 0%, #0a1631 100%);
                border-color: rgba(106, 136, 196, 0.35);
                box-shadow: 0 16px 40px -20px rgba(7, 14, 33, 0.85);
            }

            body.dark-mode .nav-brand {
                color: #d8e6ff;
            }

            body.dark-mode .nav-divider {
                background: rgba(116, 144, 192, 0.45);
            }

            body.dark-mode .nav-btn {
                color: rgba(214, 230, 255, 0.78);
            }

            body.dark-mode .nav-icon-box {
                background: rgba(93, 124, 183, 0.2);
                border-color: rgba(119, 150, 205, 0.35);
            }

            body.dark-mode .nav-btn:hover {
                color: #ffffff;
                background: rgba(255, 255, 255, 0.08);
                border-color: rgba(163, 188, 236, 0.35);
            }

            body.dark-mode .nav-btn:hover .nav-icon-box {
                background: rgba(116, 150, 219, 0.28);
                border-color: rgba(154, 181, 236, 0.45);
            }

            body.dark-mode .nav-btn.active {
                color: #ffffff;
                background: linear-gradient(180deg, rgba(76, 122, 214, 0.38) 0%, rgba(60, 97, 171, 0.35) 100%);
                border-color: rgba(167, 194, 246, 0.58);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 16px -12px rgba(13, 22, 46, 0.9);
            }

            body.dark-mode .nav-btn.active .nav-icon-box {
                background: rgba(255, 255, 255, 0.18);
                border-color: rgba(187, 210, 250, 0.6);
            }
        }

        .stepper-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: white;
            background-color: #e17e66;
            z-index: 2;
            transition: all 0.3s;
        }

        .stepper-circle.inactive {
            background-color: #f1f5f9;
            color: #475569;
        }

        .stepper-line {
            flex-grow: 1;
            height: 2px;
            background-color: #e2e8f0;
            margin: 0 -4px;
            z-index: 1;
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            background: transparent;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            background: #e17e66;
            cursor: pointer;
            margin-top: -8px;
            box-shadow: 0 4px 10px rgba(225, 126, 102, 0.3);
            border: 2px solid white;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 6px;
            cursor: pointer;
            background: #e2e8f0;
            border-radius: 999px;
        }

        .toggle-checkbox:checked {
            right: 0;
            border-color: #10b981;
        }

        .toggle-checkbox:checked+.toggle-label {
            background-color: #10b981;
        }

        .flow-card {
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        .flow-card:active {
            transform: scale(0.98);
        }

        .flow-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }

        /* Toast */
        #toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-80px);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 9999;
        }

        #toast.show {
            transform: translateX(-50%) translateY(0);
        }

        /* Login */
        #view-login {
            background: linear-gradient(135deg, #1e293b 0%, #3d5469 50%, #e17e66 100%);
            min-height: 100vh;
        }

        .readonly-mode .edit-only {
            display: none !important;
        }