/* =========================================
           BJM AI STUDIO - CUSTOM CSS & ANIMATIONS
           ========================================= */

        /* ĐỊNH NGHĨA BIẾN MÀU SẮC CHO 2 CHẾ ĐỘ */
        :root {
            /* LIGHT MODE (Chế độ sáng) */
            --color-bg: 245, 245, 243;
            --color-card: 255, 255, 255;
            --color-card-alt: 240, 238, 233;
            --color-border: 215, 213, 208;
            --color-accent: 196, 154, 45;
            --color-text: 40, 40, 38;
            --color-muted: 120, 118, 114;
            --color-input-bg: 255, 255, 255;
            --color-json-bg: 250, 249, 247;
            --color-title: 20, 20, 19;
            --color-reverse: 26, 26, 25;
            --color-reverse-text: 255, 255, 255;
        }

        .dark {
            /* DARK MODE (Chế độ tối nguyên bản) */
            --color-bg: 17, 17, 16;
            --color-card: 24, 24, 23;
            --color-card-alt: 21, 21, 20;
            --color-border: 42, 42, 40;
            --color-accent: 212, 175, 55;
            --color-text: 230, 228, 221;
            --color-muted: 140, 139, 136;
            --color-input-bg: 26, 26, 25;
            --color-json-bg: 10, 10, 9;
            --color-title: 255, 255, 255;
            --color-reverse: 255, 255, 255;
            --color-reverse-text: 0, 0, 0;
        }

        /* Tùy chỉnh thanh cuộn */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: rgba(var(--color-text), 0.05); }
        ::-webkit-scrollbar-thumb { background: rgba(var(--color-border), 1); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-accent), 1); }

        .transition-all { 
            transition-property: all; 
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
            transition-duration: 400ms; 
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px) scale(0.99); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .animate-fade-in {
            animation: fadeIn 0.4s ease-out forwards;
        }

        @keyframes slideUpFade {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .form-card-stagger {
            opacity: 0;
            animation: slideUpFade 0.5s ease-out forwards;
        }

        @keyframes nanoGlow {
            0%, 100% { box-shadow: 0 0 5px rgba(250, 204, 21, 0.1); border-color: rgba(var(--color-border), 1); color: rgba(var(--color-title), 1); }
            50% { box-shadow: 0 0 15px rgba(250, 204, 21, 0.4); border-color: #facc15; color: #facc15; }
        }
        .btn-nano:hover {
            animation: nanoGlow 1.5s infinite;
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translate(-50%, -20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }
        .animate-slide-down {
            animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .peer-hidden { display: none; }
        
        .toggle-checkbox { right: 0; z-index: 1; border-color: transparent; transition: all 0.3s; }
        .toggle-checkbox:checked { right: 0; border-color: transparent; transform: translateX(100%); }
        .toggle-checkbox:checked + .toggle-label { background-color: rgba(var(--color-accent), 1); }
        .toggle-label { width: 2.5rem; height: 1.25rem; background-color: rgba(var(--color-border), 1); border-radius: 9999px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }

        .bg-grid {
            background-color: rgba(var(--color-bg), 1);
            background-image: 
                linear-gradient(to right, rgba(var(--color-text), 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(var(--color-text), 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            background-attachment: fixed;
        }
        
        .upload-box {
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .upload-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 5;
        }
        .upload-box:hover::before {
            opacity: 1;
        }
        .upload-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0; left: 0;
            z-index: 0;
            display: none;
            transition: transform 0.5s ease;
        }
        .upload-box:hover img {
            transform: scale(1.05);
        }
        .upload-box.has-image .upload-placeholder { 
            display: none; 
        }
        .upload-box.has-image img { 
            display: block; 
        }


        /* AUTO PROMPT GENERATOR - TÍCH HỢP ĐỒNG BỘ VỚI BJM AI STUDIO */
        .auto-prompt-system { width: 100%; }
        .auto-prompt-system .tabs { display:flex; gap:.65rem; flex-wrap:wrap; margin:0 0 1.25rem; }
        .auto-prompt-system .tab { border:1px solid rgba(var(--color-border), 1); background:rgba(var(--color-input-bg), .92); color:rgba(var(--color-muted),1); border-radius:2px; padding:.72rem 1rem; cursor:pointer; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; transition:all .25s ease; }
        .auto-prompt-system .tab:hover { transform:translateY(-1px); border-color:rgba(var(--color-accent), .55); color:rgba(var(--color-title), 1); background:rgba(var(--color-card), 1); }
        .auto-prompt-system .tab.active { background:rgba(var(--color-accent),1); color:rgba(var(--color-reverse-text),1); border-color:rgba(var(--color-accent),1); box-shadow:0 0 18px rgba(var(--color-accent), .18); }
        .auto-prompt-system .section-title { display:flex; align-items:center; gap:.55rem; margin:1.4rem 0 .75rem; padding-bottom:.7rem; border-bottom:1px solid rgba(var(--color-border), .75); color:rgba(var(--color-title),1); font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
        .auto-prompt-system .section-title .note { color:rgba(var(--color-muted),1); font-size:.75rem; font-weight:400; letter-spacing:.03em; text-transform:none; }
        .auto-prompt-system .grid { display:grid; grid-template-columns:repeat(2, minmax(230px,1fr)); gap:1rem; }
        .auto-prompt-system .grid.two, .auto-prompt-system .grid.three { grid-template-columns:repeat(2, minmax(230px,1fr)); max-width:none; }
        .auto-prompt-system .card { background:rgba(var(--color-card-alt), .42); border:1px solid rgba(var(--color-border), .68); border-radius:2px; padding:1.15rem; min-height:8rem; transition:all .28s ease; position:relative; overflow:hidden; }
        .auto-prompt-system .card:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(var(--color-accent),.045), transparent 44%); pointer-events:none; opacity:.7; }
        .auto-prompt-system .card:hover { border-color:rgba(var(--color-accent), .5); background:rgba(var(--color-card), .9); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.16); }
        .auto-prompt-system .card h3 { position:relative; margin:0 0 .35rem; display:flex; align-items:center; gap:.45rem; color:rgba(var(--color-title),1); font-size:.92rem; font-weight:700; letter-spacing:.02em; }
        .auto-prompt-system .hint { position:relative; display:inline-block; color:rgba(var(--color-accent), 1); background:rgba(var(--color-accent), .1); border:1px solid rgba(var(--color-accent), .14); border-radius:999px; padding:.2rem .55rem; font-size:.68rem; font-weight:800; margin-bottom:.55rem; }
        .auto-prompt-system .desc, .auto-prompt-system .small-muted { position:relative; color:rgba(var(--color-muted),1); font-size:.76rem; line-height:1.55; margin:.3rem 0 .65rem; }
        .auto-prompt-system .chips { position:relative; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
        .auto-prompt-system .chip { border:1px solid rgba(var(--color-border), .95); background:rgba(var(--color-input-bg), .9); color:rgba(var(--color-text), .82); border-radius:999px; padding:.45rem .72rem; cursor:pointer; font-size:.75rem; line-height:1; transition:all .16s ease; user-select:none; }
        .auto-prompt-system .chip:hover { border-color:rgba(var(--color-accent), .45); color:rgba(var(--color-title),1); transform:translateY(-1px); }
        .auto-prompt-system .chip.selected { background:rgba(var(--color-accent), .14); border-color:rgba(var(--color-accent), .78); color:rgba(var(--color-accent),1); box-shadow:0 0 0 1px rgba(var(--color-accent), .08); }
        .auto-prompt-system .chip.blue.selected { background:rgba(var(--color-accent), .22); }
        .auto-prompt-system .chip.green.selected { background:rgba(29,191,115,.16); border-color:rgba(29,191,115,.55); color:rgb(74, 222, 128); }
        .auto-prompt-system .selectbox, .auto-prompt-system .custom-input { position:relative; width:100%; background:rgba(var(--color-input-bg), 1); color:rgba(var(--color-title),1); border:1px solid rgba(var(--color-border), 1); border-radius:2px; padding:.67rem .85rem; outline:none; font-size:.78rem; }
        .auto-prompt-system .selectbox:focus, .auto-prompt-system .custom-input:focus, .auto-prompt-system textarea:focus { border-color:rgba(var(--color-accent),1); box-shadow:0 0 0 3px rgba(var(--color-accent), .12); }
        .auto-prompt-system .custom-row { position:relative; display:flex; gap:.45rem; margin-top:.7rem; }
        .auto-prompt-system .addbtn { border:1px solid rgba(var(--color-border),1); border-radius:2px; background:rgba(var(--color-card),1); color:rgba(var(--color-title),1); padding:0 .85rem; cursor:pointer; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
        .auto-prompt-system .addbtn:hover { background:rgba(var(--color-accent),1); color:rgba(var(--color-reverse-text),1); border-color:rgba(var(--color-accent),1); }
        .auto-prompt-system .toggle { position:relative; display:flex; align-items:center; gap:.65rem; margin-top:.25rem; }
        .auto-prompt-system .switch { position:relative; width:2.75rem; height:1.45rem; border-radius:999px; background:rgba(var(--color-border),1); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(var(--color-text),.08); transition:.18s; }
        .auto-prompt-system .switch:after { content:""; position:absolute; top:.18rem; left:.18rem; width:1.08rem; height:1.08rem; border-radius:50%; background:#fff; transition:.18s; }
        .auto-prompt-system .switch.on { background:rgba(var(--color-accent),1); }
        .auto-prompt-system .switch.on:after { left:1.48rem; }
        .auto-prompt-system .switch-label { color:rgba(var(--color-muted),1); font-size:.76rem; font-weight:800; }
        .auto-prompt-system .promptbox { border:1px solid rgba(var(--color-border), .75); background:rgba(var(--color-card), .7); border-radius:2px; padding:1rem; margin-top:1.25rem; }
        .auto-prompt-system .promptbox textarea { width:100%; min-height:9rem; background:rgba(var(--color-json-bg),1); color:rgba(var(--color-text),1); border:1px solid rgba(var(--color-border),1); border-radius:2px; padding:.85rem; resize:vertical; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; outline:none; }
        @media (max-width: 900px) { .auto-prompt-system .grid, .auto-prompt-system .grid.two, .auto-prompt-system .grid.three { grid-template-columns:1fr; } }

    

/* =========================================
   AUTH / ADMIN UI - BJM DESIGN
   ========================================= */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.auth-card {
    width: 100%;
    max-width: 980px;
    border: 1px solid rgba(var(--color-border), 1);
    background: rgba(var(--color-card), .92);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 90px rgba(0,0,0,.28);
}
.auth-tab-btn.active { background: rgba(var(--color-accent), 1); color: rgba(var(--color-reverse-text), 1); }
.auth-field { width:100%; background:rgba(var(--color-input-bg),1); color:rgba(var(--color-title),1); border:1px solid rgba(var(--color-border),1); border-radius:2px; padding:.85rem 1rem; outline:none; }
.auth-field:focus { border-color:rgba(var(--color-accent),1); box-shadow:0 0 0 3px rgba(var(--color-accent), .12); }
.auth-label { display:block; color:rgba(var(--color-muted),1); font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:.45rem; }
.auth-alert { border:1px solid rgba(var(--color-border),1); padding:.9rem 1rem; border-radius:2px; font-size:.9rem; line-height:1.55; }
.auth-alert.error { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.38); color:#fecaca; }
.auth-alert.success { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.35); color:#bbf7d0; }
.light .auth-alert.error { color:#991b1b; }
.light .auth-alert.success { color:#166534; }
.account-menu { position:relative; }
.account-dropdown { opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s ease; }
.account-menu:hover .account-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.admin-page { min-height:100vh; overflow:auto; }
.admin-table { width:100%; border-collapse:separate; border-spacing:0; }
.admin-table th, .admin-table td { border-bottom:1px solid rgba(var(--color-border), .75); padding:.85rem; text-align:left; vertical-align:top; }
.admin-table th { color:rgba(var(--color-muted),1); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; background:rgba(var(--color-card-alt), .75); }
.admin-table td { color:rgba(var(--color-text),1); font-size:.88rem; }
.status-badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.25rem .6rem; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.status-approved { background:rgba(34,197,94,.14); color:#4ade80; border:1px solid rgba(34,197,94,.3); }
.status-pending { background:rgba(250,204,21,.12); color:#facc15; border:1px solid rgba(250,204,21,.3); }
.status-disabled { background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.3); }
.admin-action-form { display:inline-flex; gap:.35rem; margin:.15rem; flex-wrap:wrap; align-items:center; }
.btn-small { border:1px solid rgba(var(--color-border),1); padding:.45rem .65rem; border-radius:2px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; transition:all .2s; }
.btn-small:hover { border-color:rgba(var(--color-accent),1); color:rgba(var(--color-accent),1); }
.btn-danger:hover { border-color:rgba(239,68,68,1); color:rgb(248,113,113); }
@media (max-width: 900px) {
    body { overflow:auto; }
    .admin-table, .admin-table thead, .admin-table tbody, .admin-table th, .admin-table td, .admin-table tr { display:block; }
    .admin-table thead { display:none; }
    .admin-table tr { border:1px solid rgba(var(--color-border),1); margin-bottom:1rem; background:rgba(var(--color-card),.7); }
    .admin-table td { display:flex; justify-content:space-between; gap:1rem; }
    .admin-table td::before { content:attr(data-label); color:rgba(var(--color-muted),1); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; }
}

/* =========================================
   BJM AUTH V4 - SMOOTH VISUAL UPGRADE
   Hiệu ứng mượt cho đăng nhập / đăng ký / admin
   ========================================= */
@keyframes bjmFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(18px, -22px, 0) rotate(8deg); }
}
@keyframes bjmAura {
    0%, 100% { opacity: .35; filter: blur(24px); transform: scale(1); }
    50% { opacity: .75; filter: blur(34px); transform: scale(1.1); }
}
@keyframes bjmCardIn {
    from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes bjmFormIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes bjmShimmer {
    0% { background-position: -180% 50%; }
    100% { background-position: 180% 50%; }
}
@keyframes bjmBorderScan {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
@keyframes bjmPulseDot {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--color-accent), .45); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(var(--color-accent), 0); }
}

.auth-page {
    min-height: 100vh;
    overflow-x: hidden;
}
.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--color-accent), .14), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,.055), transparent 36%),
        linear-gradient(120deg, transparent 0%, rgba(var(--color-accent), .045) 48%, transparent 100%);
    animation: bjmAura 7s ease-in-out infinite;
    z-index: 0;
}
.auth-shell {
    position: relative;
    isolation: isolate;
}
.auth-ambient {
    position: fixed;
    width: 18rem;
    height: 18rem;
    border: 1px solid rgba(var(--color-accent), .12);
    background: radial-gradient(circle, rgba(var(--color-accent), .14), rgba(var(--color-accent), .02) 45%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(.2px);
    animation: bjmFloat 9s ease-in-out infinite;
}
.auth-ambient-one { top: 8%; left: 8%; border-radius: 38% 62% 54% 46%; }
.auth-ambient-two { right: 8%; bottom: 10%; border-radius: 50%; animation-delay: -2.5s; width: 15rem; height: 15rem; }
.auth-ambient-three { left: 48%; bottom: 5%; border-radius: 16px; transform: rotate(18deg); animation-delay: -5s; opacity: .55; width: 10rem; height: 10rem; }
.auth-card-pro {
    position: relative;
    animation: bjmCardIn .72s cubic-bezier(.2,.8,.2,1) both;
    overflow: hidden;
}
.auth-card-pro::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    background: linear-gradient(120deg, transparent, rgba(var(--color-accent), .55), transparent, rgba(255,255,255,.12), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .7;
}
.auth-card-pro::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--color-accent), .95), transparent);
    animation: bjmBorderScan 4.6s linear infinite;
    pointer-events: none;
}
.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(var(--color-accent), .13), transparent 35%),
        radial-gradient(circle at 82% 18%, rgba(var(--color-accent), .18), transparent 28%);
    pointer-events: none;
}
.auth-brand-panel > * { position: relative; z-index: 1; }
.auth-brand-mark {
    position: absolute;
    right: -1rem;
    bottom: 1rem;
    z-index: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(5rem, 14vw, 11rem);
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(var(--color-title), .045);
    line-height: 1;
    pointer-events: none;
}
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(var(--color-accent), 1);
    border: 1px solid rgba(var(--color-accent), .25);
    background: rgba(var(--color-accent), .08);
    border-radius: 999px;
    padding: .35rem .75rem;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 1rem;
}
.auth-kicker::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: rgba(var(--color-accent), 1);
    animation: bjmPulseDot 1.8s ease-in-out infinite;
}
.auth-title {
    background: linear-gradient(100deg, rgba(var(--color-title), 1), rgba(var(--color-accent), 1), rgba(var(--color-title), 1));
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: bjmShimmer 5.8s linear infinite;
}
.auth-copy p {
    padding-left: 1rem;
    border-left: 1px solid rgba(var(--color-accent), .28);
}
.auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.auth-feature {
    position: relative;
    overflow: hidden;
    min-height: 6.4rem;
    padding: .85rem;
    border: 1px solid rgba(var(--color-border), .75);
    background: rgba(var(--color-input-bg), .55);
    border-radius: 2px;
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.auth-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(var(--color-accent), .12), transparent 50%);
    opacity: 0;
    transition: opacity .28s ease;
}
.auth-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-accent), .55);
    background: rgba(var(--color-card), .92);
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.auth-feature:hover::before { opacity: 1; }
.auth-feature span, .auth-feature strong, .auth-feature em { position: relative; z-index: 1; display: block; }
.auth-feature span { color: rgba(var(--color-accent), 1); font-size: .68rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 1.15rem; }
.auth-feature strong { color: rgba(var(--color-title), 1); font-size: .78rem; letter-spacing: .04em; }
.auth-feature em { color: rgba(var(--color-muted), 1); font-size: .72rem; font-style: normal; margin-top: .2rem; }
.auth-contact-btn,
.auth-contact-now,
.auth-submit,
.admin-access-link,
.account-trigger {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}
.auth-contact-btn::before,
.auth-contact-now::before,
.auth-submit::before,
.admin-access-link::before,
.account-trigger::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.26) 45%, transparent 70%);
    transform: translateX(-125%);
    transition: transform .62s ease;
    pointer-events: none;
}
.auth-contact-btn:hover::before,
.auth-contact-now:hover::before,
.auth-submit:hover::before,
.admin-access-link:hover::before,
.account-trigger:hover::before { transform: translateX(125%); }
.auth-tabs {
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(var(--color-text), .035);
}
.auth-tab-btn {
    position: relative;
    overflow: hidden;
    transition: color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.auth-tab-btn:hover { transform: translateY(-1px); color: rgba(var(--color-title), 1); }
.auth-tab-btn.active {
    box-shadow: 0 10px 24px rgba(var(--color-accent), .22);
}
.auth-form-active { animation: bjmFormIn .38s cubic-bezier(.2,.8,.2,1) both; }
.auth-field-wrap { position: relative; }
.auth-field-icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: rgba(var(--color-accent), .85);
    font-size: .82rem;
    opacity: .9;
    pointer-events: none;
}
.auth-field.has-icon { padding-left: 2.65rem; }
.auth-field.has-action { padding-right: 4.5rem; }
.auth-field {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.auth-field:hover {
    border-color: rgba(var(--color-accent), .36);
    background: rgba(var(--color-card), .9);
}
.auth-field:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(var(--color-accent), .12), 0 12px 24px rgba(0,0,0,.12);
}
.password-toggle {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    padding: .38rem .58rem;
    border: 1px solid rgba(var(--color-border), .9);
    background: rgba(var(--color-card), .78);
    color: rgba(var(--color-muted), 1);
    border-radius: 2px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: all .2s ease;
}
.password-toggle:hover {
    color: rgba(var(--color-accent), 1);
    border-color: rgba(var(--color-accent), .65);
    transform: translateY(-50%) scale(1.03);
}
.auth-submit {
    box-shadow: 0 14px 32px rgba(var(--color-accent), .22);
    transform: translateY(0);
}
.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(var(--color-accent), .28);
}
.auth-submit.is-loading { pointer-events: none; opacity: .86; }
.auth-submit.is-loading span { opacity: .55; }
.auth-submit.is-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(var(--color-reverse-text), .35);
    border-top-color: rgba(var(--color-reverse-text), 1);
    top: 50%;
    left: 50%;
    margin: -.5rem 0 0 -.5rem;
    animation: spin .72s linear infinite;
}
.auth-alert {
    position: relative;
    overflow: hidden;
    animation: bjmFormIn .36s ease both;
}
.auth-alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: currentColor;
    opacity: .65;
}
.account-menu { z-index: 90; }
.account-trigger {
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.account-dropdown {
    border-color: rgba(var(--color-accent), .22) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 50px rgba(0,0,0,.34), 0 0 0 1px rgba(var(--color-accent), .07) !important;
}
.account-dropdown::before {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: -.42rem;
    width: .8rem;
    height: .8rem;
    background: rgba(var(--color-card), 1);
    border-left: 1px solid rgba(var(--color-accent), .22);
    border-top: 1px solid rgba(var(--color-accent), .22);
    transform: rotate(45deg);
}
.admin-access-link {
    animation: bjmFormIn .45s ease both;
    box-shadow: 0 10px 24px rgba(var(--color-accent), .12);
}
.admin-topbar {
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.admin-main { animation: bjmFormIn .48s ease both; }
.admin-stat-card,
.admin-panel-card {
    position: relative;
    overflow: hidden;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.admin-stat-card::before,
.admin-panel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(var(--color-accent), .09), transparent 42%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}
.admin-stat-card:hover,
.admin-panel-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-accent), .42);
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.admin-stat-card:hover::before,
.admin-panel-card:hover::before { opacity: 1; }
.admin-stats .admin-stat-card:nth-child(1) { animation: bjmFormIn .35s .03s ease both; }
.admin-stats .admin-stat-card:nth-child(2) { animation: bjmFormIn .35s .09s ease both; }
.admin-stats .admin-stat-card:nth-child(3) { animation: bjmFormIn .35s .15s ease both; }
.admin-stats .admin-stat-card:nth-child(4) { animation: bjmFormIn .35s .21s ease both; }
.admin-table tbody tr {
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.admin-table tbody tr:hover {
    background: rgba(var(--color-accent), .045);
    transform: translateX(2px);
}
.btn-small {
    position: relative;
    overflow: hidden;
}
.btn-small::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(var(--color-accent), .18), transparent);
    transform: translateX(-120%);
    transition: transform .45s ease;
}
.btn-small:hover::before { transform: translateX(120%); }

@media (max-width: 900px) {
    .auth-card-pro { max-width: 560px; }
    .auth-brand-panel { border-right: none; border-bottom: 1px solid rgba(var(--color-border), 1); }
    .auth-feature-grid { grid-template-columns: 1fr; }
    .auth-feature { min-height: auto; }
    .auth-shell { padding: 1rem; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page::before,
    .auth-ambient,
    .auth-card-pro,
    .auth-card-pro::after,
    .auth-title,
    .auth-form-active,
    .admin-main,
    .admin-stat-card,
    .auth-kicker::before {
        animation: none !important;
    }
    .auth-field,
    .auth-feature,
    .auth-submit,
    .admin-stat-card,
    .admin-panel-card,
    .admin-table tbody tr {
        transition: none !important;
    }
}

/* =========================================================
   BJM AI Studio - Maintenance Mode UI (v5)
   ========================================================= */
.maintenance-admin-card {
    border-color: rgba(var(--color-accent), .24) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(var(--color-accent), .08);
}
.maintenance-status-dot {
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    display: inline-flex;
    position: relative;
    box-shadow: 0 0 0 5px rgba(var(--color-muted), .08);
}
.maintenance-status-dot::after {
    content: "";
    position: absolute;
    inset: -.35rem;
    border-radius: inherit;
    border: 1px solid currentColor;
    opacity: .2;
    animation: maintenancePing 1.8s ease-out infinite;
}
.maintenance-status-dot.is-on { background: rgb(248 113 113); color: rgb(248 113 113); }
.maintenance-status-dot.is-off { background: rgb(74 222 128); color: rgb(74 222 128); }
.maintenance-message-field {
    min-height: 7.5rem;
    resize: vertical;
    line-height: 1.65;
}
.maintenance-toggle-btn {
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.maintenance-toggle-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.24), transparent);
    transform: translateX(-130%);
    transition: transform .55s ease;
}
.maintenance-toggle-btn:hover::before { transform: translateX(130%); }
.maintenance-toggle-btn.warning { background: linear-gradient(135deg, #d4af37, #b45309); }
.maintenance-toggle-btn.danger { background: linear-gradient(135deg, #ef4444, #991b1b); }
.maintenance-mini-badge {
    box-shadow: 0 10px 24px rgba(239,68,68,.12);
    animation: maintenanceSoftPulse 1.8s ease-in-out infinite;
}
.maintenance-login-notice {
    position: relative;
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid rgba(239,68,68,.34);
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(var(--color-card), .72));
    border-radius: 2px;
    overflow: hidden;
    animation: bjmFormIn .4s ease both;
}
.maintenance-login-notice::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 0%, rgba(239,68,68,.18), transparent 44%);
    pointer-events: none;
}
.maintenance-pulse-dot {
    flex: 0 0 auto;
    width: .75rem;
    height: .75rem;
    margin-top: .28rem;
    border-radius: 999px;
    background: rgb(248 113 113);
    box-shadow: 0 0 0 5px rgba(239,68,68,.12);
    animation: maintenanceSoftPulse 1.4s ease-in-out infinite;
}
.maintenance-notice-title {
    position: relative;
    color: rgb(248 113 113);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    margin-bottom: .35rem;
}
.maintenance-notice-text {
    position: relative;
    color: rgba(var(--color-title), 1);
    font-size: .88rem;
    line-height: 1.55;
}
.maintenance-notice-sub {
    position: relative;
    color: rgba(var(--color-muted), 1);
    margin-top: .5rem;
    font-size: .76rem;
    line-height: 1.45;
}
.maintenance-page {
    overflow: hidden;
}
.maintenance-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.maintenance-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(48px);
    opacity: .34;
    pointer-events: none;
    animation: maintenanceFloat 8s ease-in-out infinite;
}
.maintenance-orb-one {
    width: 24rem;
    height: 24rem;
    background: rgba(var(--color-accent), .48);
    top: -6rem;
    left: -5rem;
}
.maintenance-orb-two {
    width: 26rem;
    height: 26rem;
    background: rgba(239, 68, 68, .26);
    right: -7rem;
    bottom: -8rem;
    animation-delay: -3s;
}
.maintenance-card {
    position: relative;
    width: min(720px, 100%);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    background: rgba(var(--color-card), .84);
    border: 1px solid rgba(var(--color-accent), .24);
    box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(22px);
    overflow: hidden;
    animation: maintenanceCardIn .55s cubic-bezier(.2,.9,.2,1) both;
}
.maintenance-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(var(--color-accent), .13), transparent 38%),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.06), transparent 34%);
    pointer-events: none;
}
.maintenance-icon-wrap {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.4rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--color-accent), .38);
    background: rgba(var(--color-accent), .08);
    box-shadow: 0 0 32px rgba(var(--color-accent), .14);
}
.maintenance-icon {
    font-size: 2.35rem;
    animation: maintenanceWrench 2.4s ease-in-out infinite;
}
.maintenance-kicker {
    position: relative;
    color: rgba(var(--color-accent), 1);
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .78rem;
    font-weight: 900;
    margin-bottom: .85rem;
}
.maintenance-title {
    position: relative;
    color: rgba(var(--color-title), 1);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 7vw, 4.8rem);
    line-height: .92;
    margin: 0 0 1.25rem;
    letter-spacing: .02em;
}
.maintenance-message {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    color: rgba(var(--color-text), .92);
    line-height: 1.8;
    font-size: 1rem;
}
.maintenance-subtext {
    position: relative;
    color: rgba(var(--color-muted), 1);
    font-size: .88rem;
    line-height: 1.65;
    margin: 1.25rem auto 0;
    max-width: 540px;
}
.maintenance-progress {
    position: relative;
    height: .35rem;
    width: min(420px, 100%);
    margin: 1.8rem auto 0;
    border-radius: 999px;
    background: rgba(var(--color-border), .8);
    overflow: hidden;
}
.maintenance-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(var(--color-accent), 1), transparent);
    animation: maintenanceProgress 2s ease-in-out infinite;
}
.maintenance-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 2rem;
}
.maintenance-primary,
.maintenance-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10.5rem;
    padding: .9rem 1.15rem;
    border-radius: 2px;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    transition: transform .24s ease, border-color .24s ease, color .24s ease, background .24s ease;
}
.maintenance-primary {
    background: rgba(var(--color-accent), 1);
    color: rgba(var(--color-reverse-text), 1);
    border: 1px solid rgba(var(--color-accent), 1);
}
.maintenance-secondary {
    border: 1px solid rgba(var(--color-border), 1);
    color: rgba(var(--color-title), 1);
    background: rgba(var(--color-input-bg), .7);
}
.maintenance-primary:hover,
.maintenance-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-accent), 1);
    color: rgba(var(--color-accent), 1);
    background: rgba(var(--color-card), .95);
}
@keyframes maintenancePing {
    0% { transform: scale(.7); opacity: .35; }
    100% { transform: scale(1.9); opacity: 0; }
}
@keyframes maintenanceSoftPulse {
    0%,100% { opacity: 1; box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
    50% { opacity: .82; box-shadow: 0 0 0 8px rgba(239,68,68,.04); }
}
@keyframes maintenanceFloat {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(20px,-18px,0) scale(1.05); }
}
@keyframes maintenanceCardIn {
    from { opacity: 0; transform: translateY(22px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes maintenanceWrench {
    0%,100% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
}
@keyframes maintenanceProgress {
    0% { left: -45%; }
    100% { left: 105%; }
}
@media (prefers-reduced-motion: reduce) {
    .maintenance-status-dot::after,
    .maintenance-mini-badge,
    .maintenance-pulse-dot,
    .maintenance-orb,
    .maintenance-card,
    .maintenance-icon,
    .maintenance-progress span {
        animation: none !important;
    }
}

/* =========================================
   BJM SECURITY v6 - Turnstile CAPTCHA
   ========================================= */
.turnstile-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    padding: .75rem;
    border: 1px solid rgba(var(--color-border), .85);
    background: linear-gradient(135deg, rgba(var(--color-card), .72), rgba(var(--color-card-alt), .52));
    border-radius: 2px;
    overflow: hidden;
    animation: bjmFormIn .34s ease both;
}
.turnstile-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(var(--color-accent), .14), transparent 38%);
    opacity: .75;
    pointer-events: none;
}
.turnstile-wrap .cf-turnstile {
    position: relative;
    z-index: 2;
    max-width: 100%;
}
.turnstile-wrap:hover {
    border-color: rgba(var(--color-accent), .45);
    box-shadow: 0 12px 26px rgba(var(--color-accent), .10);
}

/* =========================================
   BJM PURPLE / BLACK THEME v8
   Tone tham chiếu: nền đen, viền tím neon, chữ trắng
   ========================================= */
:root,
.dark {
    --color-bg: 3, 3, 6;
    --color-card: 8, 7, 12;
    --color-card-alt: 13, 10, 20;
    --color-border: 126, 50, 255;
    --color-accent: 143, 65, 255;
    --color-text: 239, 236, 247;
    --color-muted: 178, 170, 194;
    --color-input-bg: 10, 8, 16;
    --color-json-bg: 2, 2, 5;
    --color-title: 255, 255, 255;
    --color-reverse: 143, 65, 255;
    --color-reverse-text: 255, 255, 255;
}

html:not(.dark) {
    --color-bg: 6, 5, 10;
    --color-card: 12, 10, 18;
    --color-card-alt: 17, 13, 25;
    --color-border: 126, 50, 255;
    --color-accent: 143, 65, 255;
    --color-text: 239, 236, 247;
    --color-muted: 178, 170, 194;
    --color-input-bg: 12, 10, 18;
    --color-json-bg: 3, 3, 7;
    --color-title: 255, 255, 255;
    --color-reverse: 143, 65, 255;
    --color-reverse-text: 255, 255, 255;
}

body,
.bg-grid,
.auth-bg,
.admin-page,
.maintenance-page {
    background-color: rgb(3, 3, 6) !important;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(143, 65, 255, .18), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(99, 102, 241, .11), transparent 26%),
        radial-gradient(circle at 68% 86%, rgba(168, 85, 247, .12), transparent 30%),
        linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 44px 44px, 44px 44px !important;
    background-attachment: fixed !important;
}

header,
.auth-card,
.admin-card,
.admin-panel,
.maintenance-card,
.auto-prompt-system .card,
.auto-prompt-system .promptbox,
.bg-arch-card,
.bg-arch-card\/80,
.bg-arch-card-alt,
.bg-arch-card-alt\/90 {
    border-color: rgba(var(--color-accent), .55) !important;
    box-shadow: 0 0 0 1px rgba(var(--color-accent), .16), 0 22px 70px rgba(0,0,0,.52), 0 0 38px rgba(var(--color-accent), .10) !important;
}

.auth-card,
.admin-card,
.admin-panel,
.maintenance-card,
.auto-prompt-system .card,
.auto-prompt-system .promptbox,
.bg-arch-card\/80,
.bg-arch-card-alt\/90 {
    background:
        linear-gradient(145deg, rgba(12,10,18,.96), rgba(5,5,9,.94)),
        radial-gradient(circle at 92% 8%, rgba(var(--color-accent), .12), transparent 32%) !important;
    backdrop-filter: blur(18px) !important;
}

.text-arch-accent,
.auth-kicker,
.auth-title span,
.maintenance-kicker,
.auto-prompt-system .hint,
.auto-prompt-system .chip.selected,
.auto-prompt-system .tab:hover,
.account-menu:hover button {
    color: rgb(var(--color-accent)) !important;
}

.border-arch-accent,
.border-arch-accent\/40,
.border-arch-accent\/50,
.hover\:border-arch-accent:hover,
.auth-field:focus,
.auto-prompt-system .selectbox:focus,
.auto-prompt-system .custom-input:focus,
.auto-prompt-system textarea:focus {
    border-color: rgba(var(--color-accent), .95) !important;
}

.bg-arch-accent,
.auth-tab-btn.active,
.auto-prompt-system .tab.active,
.auto-prompt-system .addbtn:hover,
.auto-prompt-system .switch.on,
.maintenance-primary,
button[type="submit"],
.btn-primary-purple {
    background: linear-gradient(135deg, #7c2dff, #9b5cff 52%, #6d28d9) !important;
    color: #fff !important;
    border-color: rgba(155, 92, 255, .95) !important;
    box-shadow: 0 0 22px rgba(143, 65, 255, .28), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

button[type="submit"]:hover,
.bg-arch-accent:hover,
.maintenance-primary:hover,
.auto-prompt-system .tab.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 34px rgba(143, 65, 255, .42), 0 14px 34px rgba(0,0,0,.36) !important;
}

.auth-field,
.auto-prompt-system .selectbox,
.auto-prompt-system .custom-input,
.auto-prompt-system .promptbox textarea,
textarea,
select,
input {
    background: rgba(4, 4, 8, .92) !important;
    color: rgb(var(--color-title)) !important;
    border-color: rgba(var(--color-accent), .38) !important;
}

.auth-field::placeholder,
.auto-prompt-system .custom-input::placeholder,
textarea::placeholder,
input::placeholder {
    color: rgba(var(--color-muted), .78) !important;
}

.auth-field:focus,
textarea:focus,
select:focus,
input:focus {
    outline: none !important;
    border-color: rgba(var(--color-accent), 1) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-accent), .16), 0 0 28px rgba(var(--color-accent), .16) !important;
}

.auto-prompt-system .chip {
    background: rgba(8, 7, 12, .88) !important;
    border-color: rgba(var(--color-accent), .34) !important;
    color: rgba(var(--color-text), .9) !important;
}
.auto-prompt-system .chip:hover {
    border-color: rgba(var(--color-accent), .92) !important;
    box-shadow: 0 0 16px rgba(var(--color-accent), .16) !important;
}
.auto-prompt-system .chip.selected {
    background: rgba(var(--color-accent), .18) !important;
    border-color: rgba(var(--color-accent), .98) !important;
}

.account-dropdown,
.auth-tab-panel,
.admin-table th,
.admin-table td,
.turnstile-wrap,
.maintenance-login-notice {
    border-color: rgba(var(--color-accent), .32) !important;
    background: rgba(8, 7, 12, .96) !important;
}

.auth-logo-mark,
.maintenance-icon-wrap {
    border-color: rgba(var(--color-accent), .7) !important;
    background: rgba(var(--color-accent), .12) !important;
    box-shadow: 0 0 28px rgba(var(--color-accent), .24) !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent), .72) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent), 1) !important;
}

::selection {
    background: rgba(var(--color-accent), .35) !important;
    color: #fff !important;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(143, 65, 255, .30); }
    50% { box-shadow: 0 0 28px rgba(143, 65, 255, .72); }
}

@keyframes nanoGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(143,65,255,.14); border-color: rgba(var(--color-accent), .44); color: rgba(var(--color-title), 1); }
    50% { box-shadow: 0 0 18px rgba(143,65,255,.48); border-color: rgb(var(--color-accent)); color: rgb(var(--color-accent)); }
}

/* BJM_PURPLE_THEME_START */
/* =========================================
   BJM LUXURY READABLE THEME v8.3
   Tăng sắc độ, chữ Dark mode trắng rõ, fix Light mode và trạng thái đang chọn
   ========================================= */

:root {
    /* LIGHT MODE - ivory / lavender rõ ràng */
    --color-bg: 249, 247, 255;
    --color-card: 255, 255, 255;
    --color-card-alt: 241, 236, 255;
    --color-border: 148, 123, 214;
    --color-accent: 112, 67, 205;
    --color-text: 28, 23, 43;
    --color-muted: 84, 72, 112;
    --color-input-bg: 255, 255, 255;
    --color-json-bg: 253, 251, 255;
    --color-title: 12, 10, 20;
    --color-reverse: 112, 67, 205;
    --color-reverse-text: 255, 255, 255;

    --bjm-accent-strong: 112, 67, 205;
    --bjm-accent-soft: 139, 92, 246;
    --bjm-gold: 190, 139, 56;
    --bjm-gold-soft: 222, 183, 99;
    --bjm-ink: 12, 10, 20;
    --bjm-white: 255, 255, 255;
    color-scheme: light;
}

html.dark,
.dark {
    /* DARK MODE - graphite / royal violet / champagne, chữ trắng rõ */
    --color-bg: 5, 5, 9;
    --color-card: 12, 12, 20;
    --color-card-alt: 20, 18, 32;
    --color-border: 128, 94, 222;
    --color-accent: 153, 102, 255;
    --color-text: 255, 255, 255;
    --color-muted: 211, 205, 224;
    --color-input-bg: 9, 9, 16;
    --color-json-bg: 3, 3, 7;
    --color-title: 255, 255, 255;
    --color-reverse: 153, 102, 255;
    --color-reverse-text: 255, 255, 255;

    --bjm-accent-strong: 153, 102, 255;
    --bjm-accent-soft: 183, 148, 255;
    --bjm-gold: 226, 178, 82;
    --bjm-gold-soft: 245, 207, 120;
    --bjm-ink: 255, 255, 255;
    color-scheme: dark;
}

/* =========================================================
   RESET MÀU TỔNG THỂ THEO MODE - FIX LIGHTMODE TRẮNG/ĐEN LẪN LỘN
   ========================================================= */
html:not(.dark),
html:not(.dark) body {
    color: rgb(28,23,43) !important;
    background-color: rgb(249,247,255) !important;
}

html.dark,
html.dark body {
    color: #ffffff !important;
    background-color: rgb(5,5,9) !important;
}

html:not(.dark) body,
html:not(.dark) .bg-grid,
html:not(.dark) .auth-page,
html:not(.dark) .auth-bg,
html:not(.dark) .admin-page,
html:not(.dark) .maintenance-page {
    background-color: rgb(249,247,255) !important;
    background-image:
        radial-gradient(circle at 9% 10%, rgba(112,67,205,.20), transparent 27%),
        radial-gradient(circle at 91% 12%, rgba(190,139,56,.20), transparent 25%),
        radial-gradient(circle at 80% 90%, rgba(139,92,246,.14), transparent 35%),
        linear-gradient(to right, rgba(28,23,43,.060) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(28,23,43,.060) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 42px 42px, 42px 42px !important;
}

html.dark body,
html.dark .bg-grid,
html.dark .auth-page,
html.dark .auth-bg,
html.dark .admin-page,
html.dark .maintenance-page {
    background-color: rgb(5,5,9) !important;
    background-image:
        radial-gradient(circle at 12% 10%, rgba(153,102,255,.24), transparent 29%),
        radial-gradient(circle at 88% 12%, rgba(226,178,82,.13), transparent 25%),
        radial-gradient(circle at 76% 88%, rgba(90,62,180,.20), transparent 36%),
        linear-gradient(to right, rgba(255,255,255,.036) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.036) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 42px 42px, 42px 42px !important;
}

/* =========================================================
   OVERRIDE TAILWIND ARCH CLASSES - ĐỒNG BỘ LIGHT/DARK
   ========================================================= */
html:not(.dark) .bg-arch-bg,
html:not(.dark) .bg-arch-bg\/5,
html:not(.dark) .bg-arch-bg\/10,
html:not(.dark) .bg-arch-bg\/20,
html:not(.dark) .bg-arch-bg\/40,
html:not(.dark) .bg-arch-bg\/50,
html:not(.dark) .bg-arch-bg\/60,
html:not(.dark) .bg-arch-bg\/70,
html:not(.dark) .bg-arch-bg\/80,
html:not(.dark) .bg-arch-bg\/90 { background-color: rgba(249,247,255,.94) !important; }

html:not(.dark) .bg-arch-card,
html:not(.dark) .bg-arch-card\/5,
html:not(.dark) .bg-arch-card\/10,
html:not(.dark) .bg-arch-card\/20,
html:not(.dark) .bg-arch-card\/40,
html:not(.dark) .bg-arch-card\/50,
html:not(.dark) .bg-arch-card\/60,
html:not(.dark) .bg-arch-card\/70,
html:not(.dark) .bg-arch-card\/80,
html:not(.dark) .bg-arch-card\/90,
html:not(.dark) .bg-arch-card\/95 { background-color: rgba(255,255,255,.96) !important; }

html:not(.dark) .bg-arch-card-alt,
html:not(.dark) .bg-arch-card-alt\/5,
html:not(.dark) .bg-arch-card-alt\/10,
html:not(.dark) .bg-arch-card-alt\/20,
html:not(.dark) .bg-arch-card-alt\/40,
html:not(.dark) .bg-arch-card-alt\/50,
html:not(.dark) .bg-arch-card-alt\/60,
html:not(.dark) .bg-arch-card-alt\/70,
html:not(.dark) .bg-arch-card-alt\/80,
html:not(.dark) .bg-arch-card-alt\/90 { background-color: rgba(241,236,255,.94) !important; }

html:not(.dark) .bg-arch-input,
html:not(.dark) .bg-arch-input\/50,
html:not(.dark) .bg-arch-input\/80,
html:not(.dark) .bg-arch-json { background-color: rgba(255,255,255,.98) !important; }

html.dark .bg-arch-bg,
html.dark .bg-arch-bg\/5,
html.dark .bg-arch-bg\/10,
html.dark .bg-arch-bg\/20,
html.dark .bg-arch-bg\/40,
html.dark .bg-arch-bg\/50,
html.dark .bg-arch-bg\/60,
html.dark .bg-arch-bg\/70,
html.dark .bg-arch-bg\/80,
html.dark .bg-arch-bg\/90 { background-color: rgba(5,5,9,.94) !important; }

html.dark .bg-arch-card,
html.dark .bg-arch-card\/5,
html.dark .bg-arch-card\/10,
html.dark .bg-arch-card\/20,
html.dark .bg-arch-card\/40,
html.dark .bg-arch-card\/50,
html.dark .bg-arch-card\/60,
html.dark .bg-arch-card\/70,
html.dark .bg-arch-card\/80,
html.dark .bg-arch-card\/90,
html.dark .bg-arch-card\/95 { background-color: rgba(12,12,20,.96) !important; }

html.dark .bg-arch-card-alt,
html.dark .bg-arch-card-alt\/5,
html.dark .bg-arch-card-alt\/10,
html.dark .bg-arch-card-alt\/20,
html.dark .bg-arch-card-alt\/40,
html.dark .bg-arch-card-alt\/50,
html.dark .bg-arch-card-alt\/60,
html.dark .bg-arch-card-alt\/70,
html.dark .bg-arch-card-alt\/80,
html.dark .bg-arch-card-alt\/90 { background-color: rgba(20,18,32,.96) !important; }

html.dark .bg-arch-input,
html.dark .bg-arch-input\/50,
html.dark .bg-arch-input\/80,
html.dark .bg-arch-json { background-color: rgba(9,9,16,.98) !important; }

html:not(.dark) .text-arch-text { color: rgb(28,23,43) !important; }
html:not(.dark) .text-arch-title { color: rgb(12,10,20) !important; }
html:not(.dark) .text-arch-muted { color: rgb(84,72,112) !important; }
html:not(.dark) .text-arch-accent { color: rgb(112,67,205) !important; }
html:not(.dark) .border-arch-border,
html:not(.dark) .border-arch-border\/50,
html:not(.dark) .border-arch-border\/60,
html:not(.dark) .border-arch-border\/75 { border-color: rgba(148,123,214,.72) !important; }

html.dark .text-arch-text,
html.dark .text-arch-title,
html.dark .text-white { color: #ffffff !important; }
html.dark .text-arch-muted { color: rgb(211,205,224) !important; }
html.dark .text-arch-accent { color: rgb(183,148,255) !important; }
html.dark .border-arch-border,
html.dark .border-arch-border\/50,
html.dark .border-arch-border\/60,
html.dark .border-arch-border\/75 { border-color: rgba(128,94,222,.70) !important; }

/* =========================================================
   PANEL / CARD / HEADER
   ========================================================= */
header,
.auth-card,
.auth-card-pro,
.auth-form-panel,
.auth-brand-panel,
.admin-topbar,
.admin-stat-card,
.admin-panel-card,
.admin-card,
.admin-panel,
.maintenance-card,
.account-dropdown,
.material-widget,
.auto-prompt-system .card,
.auto-prompt-system .promptbox,
#material-widget,
#custom-room-modal > div,
#json-warning-modal > div,
#view-json > div,
#view-json > div > div,
#view-vision .bg-arch-card-alt\/90 {
    border-color: rgba(var(--color-accent), .46) !important;
    color: rgb(var(--color-text)) !important;
}

html:not(.dark) header,
html:not(.dark) .auth-card,
html:not(.dark) .auth-card-pro,
html:not(.dark) .auth-form-panel,
html:not(.dark) .admin-topbar,
html:not(.dark) .admin-stat-card,
html:not(.dark) .admin-panel-card,
html:not(.dark) .admin-card,
html:not(.dark) .admin-panel,
html:not(.dark) .maintenance-card,
html:not(.dark) .account-dropdown,
html:not(.dark) .auto-prompt-system .card,
html:not(.dark) .auto-prompt-system .promptbox,
html:not(.dark) #material-widget,
html:not(.dark) #custom-room-modal > div,
html:not(.dark) #json-warning-modal > div {
    background:
        linear-gradient(145deg, rgba(255,255,255,.985), rgba(244,239,255,.965)),
        radial-gradient(circle at 92% 5%, rgba(112,67,205,.13), transparent 36%) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.90), 0 22px 58px rgba(52,35,98,.18), 0 0 34px rgba(112,67,205,.10) !important;
}

html.dark header,
html.dark .auth-card,
html.dark .auth-card-pro,
html.dark .auth-form-panel,
html.dark .admin-topbar,
html.dark .admin-stat-card,
html.dark .admin-panel-card,
html.dark .admin-card,
html.dark .admin-panel,
html.dark .maintenance-card,
html.dark .account-dropdown,
html.dark .auto-prompt-system .card,
html.dark .auto-prompt-system .promptbox,
html.dark #material-widget,
html.dark #custom-room-modal > div,
html.dark #json-warning-modal > div {
    background:
        linear-gradient(145deg, rgba(15,14,25,.985), rgba(6,6,11,.975)),
        radial-gradient(circle at 92% 5%, rgba(153,102,255,.17), transparent 36%) !important;
    box-shadow: 0 0 0 1px rgba(153,102,255,.16), 0 25px 72px rgba(0,0,0,.60), 0 0 40px rgba(153,102,255,.11) !important;
}

html:not(.dark) .auth-brand-panel {
    background:
        linear-gradient(145deg, rgba(247,243,255,.99), rgba(231,222,255,.95)),
        radial-gradient(circle at 86% 10%, rgba(190,139,56,.18), transparent 33%) !important;
}
html.dark .auth-brand-panel {
    background:
        linear-gradient(145deg, rgba(22,20,37,.99), rgba(8,7,14,.975)),
        radial-gradient(circle at 86% 10%, rgba(226,178,82,.14), transparent 33%) !important;
}

/* =========================================================
   CHỮ - DARK MODE TRẮNG RÕ, LIGHT MODE KHÔNG LỖI TRẮNG/ĐEN
   ========================================================= */
.auth-title,
.auth-feature strong,
.admin-stat-card strong,
.admin-panel-card strong,
.auto-prompt-system .card h3,
.auto-prompt-system .section-title,
h1, h2, h3, h4,
.text-arch-title {
    color: rgb(var(--color-title)) !important;
}

html.dark .auth-title,
html.dark .auth-feature strong,
html.dark .admin-stat-card strong,
html.dark .admin-panel-card strong,
html.dark .auto-prompt-system .card h3,
html.dark .auto-prompt-system .section-title,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark p,
html.dark label,
html.dark span,
html.dark td,
html.dark th,
html.dark .text-arch-title,
html.dark .text-arch-text {
    color: #ffffff !important;
}

html.dark .text-arch-muted,
html.dark .auth-copy,
html.dark .auth-label,
html.dark .auto-prompt-system .desc,
html.dark .auto-prompt-system .small-muted,
html.dark .section-title .note {
    color: rgb(211,205,224) !important;
}

html:not(.dark) .auth-title,
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) .text-arch-title {
    color: rgb(12,10,20) !important;
}

html:not(.dark) p,
html:not(.dark) label,
html:not(.dark) span,
html:not(.dark) td,
html:not(.dark) th,
html:not(.dark) .text-arch-text {
    color: rgb(28,23,43) !important;
}

html:not(.dark) .text-arch-muted,
html:not(.dark) .auth-copy,
html:not(.dark) .auth-label,
html:not(.dark) .auto-prompt-system .desc,
html:not(.dark) .auto-prompt-system .small-muted,
html:not(.dark) .section-title .note {
    color: rgb(84,72,112) !important;
}

.auth-kicker,
.auth-field-icon,
.password-toggle:hover,
.auto-prompt-system .hint,
.maintenance-kicker,
.text-arch-accent,
html:not(.dark) .text-arch-accent,
html.dark .text-arch-accent {
    color: rgb(var(--color-accent)) !important;
}

/* =========================================================
   INPUT / SELECT / TEXTAREA - FIX LIGHTMODE
   ========================================================= */
.auth-field,
.password-toggle,
.auto-prompt-system .selectbox,
.auto-prompt-system .custom-input,
.auto-prompt-system .promptbox textarea,
#json-preview,
#json-editor,
#ai-prompt-result,
#material-result,
textarea,
select,
input {
    color: rgb(var(--color-title)) !important;
    border-color: rgba(var(--color-accent), .42) !important;
    caret-color: rgb(var(--color-accent)) !important;
}

html:not(.dark) .auth-field,
html:not(.dark) .password-toggle,
html:not(.dark) .auto-prompt-system .selectbox,
html:not(.dark) .auto-prompt-system .custom-input,
html:not(.dark) .auto-prompt-system .promptbox textarea,
html:not(.dark) #json-preview,
html:not(.dark) #json-editor,
html:not(.dark) #ai-prompt-result,
html:not(.dark) #material-result,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) input {
    background-color: rgba(255,255,255,.99) !important;
    color: rgb(12,10,20) !important;
}

html.dark .auth-field,
html.dark .password-toggle,
html.dark .auto-prompt-system .selectbox,
html.dark .auto-prompt-system .custom-input,
html.dark .auto-prompt-system .promptbox textarea,
html.dark #json-preview,
html.dark #json-editor,
html.dark #ai-prompt-result,
html.dark #material-result,
html.dark textarea,
html.dark select,
html.dark input {
    background-color: rgba(8,8,15,.98) !important;
    color: #ffffff !important;
}

.auth-field::placeholder,
.auto-prompt-system .custom-input::placeholder,
textarea::placeholder,
input::placeholder { color: rgba(var(--color-muted), .78) !important; }

.auth-field:hover,
.auto-prompt-system .selectbox:hover,
.auto-prompt-system .custom-input:hover,
textarea:hover,
select:hover,
input:hover {
    border-color: rgba(var(--color-accent), .70) !important;
}

.auth-field:focus,
.auto-prompt-system .selectbox:focus,
.auto-prompt-system .custom-input:focus,
.auto-prompt-system textarea:focus,
textarea:focus,
select:focus,
input:focus {
    outline: none !important;
    border-color: rgba(var(--color-accent), .95) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-accent), .19), 0 12px 26px rgba(45,30,84,.14) !important;
}

/* =========================================================
   NÚT / HOVER - FIX MẤT CHỮ
   ========================================================= */
.bg-arch-accent,
.auth-submit,
.auth-tab-btn.active,
.auth-contact-now,
.auto-prompt-system .tab.active,
.auto-prompt-system .addbtn:hover,
.auto-prompt-system .switch.on,
.maintenance-primary,
button[type="submit"],
.btn-primary-purple,
.admin-access-link,
.account-trigger:hover,
.hover\:bg-arch-accent:hover,
.hover\:bg-arch-reverse:hover {
    background: linear-gradient(135deg, rgb(92,55,181) 0%, rgb(139,92,246) 54%, rgb(190,139,56) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(var(--color-accent), .86) !important;
    box-shadow: 0 14px 30px rgba(79,50,150,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.auth-submit:hover,
.bg-arch-accent:hover,
.auth-contact-btn:hover,
.auth-contact-now:hover,
.admin-access-link:hover,
.account-trigger:hover,
.maintenance-primary:hover,
button[type="submit"]:hover,
.auto-prompt-system .tab.active:hover,
.auto-prompt-system .addbtn:hover,
.hover\:bg-arch-accent:hover,
.hover\:bg-arch-reverse:hover,
.btn-small:hover {
    background: linear-gradient(135deg, rgb(73,38,151) 0%, rgb(124,78,228) 52%, rgb(168,116,42) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(var(--color-accent), .98) !important;
    box-shadow: 0 18px 40px rgba(79,50,150,.38), 0 0 26px rgba(var(--color-accent), .25) !important;
}

.auth-submit:hover *,
.bg-arch-accent:hover *,
.auth-contact-btn:hover *,
.auth-contact-now:hover *,
.admin-access-link:hover *,
.account-trigger:hover *,
.hover\:bg-arch-accent:hover *,
.hover\:bg-arch-reverse:hover *,
button[type="submit"]:hover *,
.btn-small:hover * {
    color: #ffffff !important;
}

.btn-small,
button.btn-small {
    color: rgb(var(--color-title)) !important;
    background: rgba(var(--color-card), .76) !important;
    border-color: rgba(var(--color-accent), .38) !important;
}

html.dark .btn-small,
html.dark button.btn-small {
    color: #ffffff !important;
    background: rgba(17,16,28,.92) !important;
}

.btn-danger:hover,
.hover\:bg-red-500:hover,
.hover\:bg-red-600:hover {
    background: rgb(220,38,38) !important;
    color: #ffffff !important;
    border-color: rgba(239,68,68,.95) !important;
}

/* =========================================================
   FIX QUAN TRỌNG: TUỲ CHỌN CƠ BẢN / PROMPT CUSTOM ĐANG CHỌN
   ========================================================= */
/* Các option dạng radio/checkbox trong phần Cơ bản dùng input.peer + span */
input.peer:checked + span,
label:has(input.peer:checked) > span,
.peer:checked ~ span,
.peer:checked + .option-pill,
.peer:checked + .chip,
input[type="radio"].peer:checked + span,
input[type="checkbox"].peer:checked + span {
    background: linear-gradient(135deg, rgba(112,67,205,.98), rgba(139,92,246,.95)) !important;
    color: #ffffff !important;
    border-color: rgba(226,178,82,.96) !important;
    box-shadow:
        0 0 0 1px rgba(226,178,82,.40),
        0 0 0 4px rgba(139,92,246,.18),
        0 14px 30px rgba(74,45,140,.25) !important;
    font-weight: 700 !important;
}

input.peer:checked + span *,
label:has(input.peer:checked) > span * {
    color: #ffffff !important;
}

input.peer:not(:checked) + span,
input[type="radio"].peer:not(:checked) + span,
input[type="checkbox"].peer:not(:checked) + span {
    border-color: rgba(var(--color-accent), .34) !important;
}

html.dark input.peer:not(:checked) + span,
html.dark input[type="radio"].peer:not(:checked) + span,
html.dark input[type="checkbox"].peer:not(:checked) + span {
    background: rgba(10,10,18,.94) !important;
    color: rgb(211,205,224) !important;
}

html:not(.dark) input.peer:not(:checked) + span,
html:not(.dark) input[type="radio"].peer:not(:checked) + span,
html:not(.dark) input[type="checkbox"].peer:not(:checked) + span {
    background: rgba(255,255,255,.96) !important;
    color: rgb(84,72,112) !important;
}

input.peer:not(:checked) + span:hover,
input[type="radio"].peer:not(:checked) + span:hover,
input[type="checkbox"].peer:not(:checked) + span:hover {
    border-color: rgba(var(--color-accent), .78) !important;
    color: rgb(var(--color-title)) !important;
    box-shadow: 0 10px 22px rgba(65,42,130,.14) !important;
}

html.dark input.peer:not(:checked) + span:hover {
    color: #ffffff !important;
}

/* Select box thường trong phần Cơ bản */
select option:checked {
    background: rgb(var(--color-accent)) !important;
    color: #ffffff !important;
}

/* =========================================================
   AUTO CHIPS / TAB
   ========================================================= */
.auto-prompt-system .tab {
    background: rgba(var(--color-card), .88) !important;
    border-color: rgba(var(--color-accent), .30) !important;
    color: rgb(var(--color-muted)) !important;
}
.auto-prompt-system .tab:hover {
    color: rgb(var(--color-title)) !important;
    border-color: rgba(var(--color-accent), .72) !important;
    background: rgba(var(--color-card-alt), .97) !important;
}
html.dark .auto-prompt-system .tab:hover { color: #ffffff !important; }
.auto-prompt-system .tab.active {
    background: linear-gradient(135deg, rgb(92,55,181), rgb(139,92,246), rgb(190,139,56)) !important;
    color: #ffffff !important;
    border-color: rgba(226,178,82,.90) !important;
}
.auto-prompt-system .chip {
    border-color: rgba(var(--color-accent), .32) !important;
    color: rgb(var(--color-text)) !important;
}
html:not(.dark) .auto-prompt-system .chip { background: rgba(255,255,255,.94) !important; }
html.dark .auto-prompt-system .chip { background: rgba(10,10,18,.94) !important; color: rgb(211,205,224) !important; }
.auto-prompt-system .chip:hover {
    color: rgb(var(--color-title)) !important;
    border-color: rgba(var(--color-accent), .72) !important;
    box-shadow: 0 10px 22px rgba(65,42,130,.14) !important;
}
html.dark .auto-prompt-system .chip:hover { color: #ffffff !important; }
.auto-prompt-system .chip.selected,
.auto-prompt-system .chip.blue.selected {
    background: linear-gradient(135deg, rgba(112,67,205,.98), rgba(139,92,246,.94)) !important;
    border-color: rgba(226,178,82,.92) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(226,178,82,.36), 0 0 0 4px rgba(139,92,246,.16) !important;
}
.auto-prompt-system .chip.green.selected {
    background: linear-gradient(135deg, rgba(190,139,56,.96), rgba(226,178,82,.92)) !important;
    border-color: rgba(112,67,205,.72) !important;
    color: #ffffff !important;
}

/* =========================================================
   ADMIN TABLE / ACCOUNT MENU / LIGHTMODE BUGS
   ========================================================= */
.admin-table,
.admin-table th,
.admin-table td,
.account-dropdown,
.account-dropdown * {
    color: rgb(var(--color-text)) !important;
    border-color: rgba(var(--color-accent), .25) !important;
}
html.dark .admin-table,
html.dark .admin-table th,
html.dark .admin-table td,
html.dark .account-dropdown,
html.dark .account-dropdown * { color: #ffffff !important; }

.admin-table th {
    background: rgba(var(--color-card-alt), .96) !important;
    color: rgb(var(--color-muted)) !important;
}
.admin-table tbody tr:hover,
.admin-stat-card:hover,
.admin-panel-card:hover,
.auth-feature:hover {
    background: rgba(var(--color-accent), .12) !important;
    color: rgb(var(--color-title)) !important;
    border-color: rgba(var(--color-accent), .66) !important;
}
html.dark .admin-table tbody tr:hover,
html.dark .admin-stat-card:hover,
html.dark .admin-panel-card:hover,
html.dark .auth-feature:hover,
html.dark .admin-table tbody tr:hover * {
    color: #ffffff !important;
}

.account-dropdown::before {
    background: rgb(var(--color-card)) !important;
    border-color: rgba(var(--color-accent), .40) !important;
}
.account-dropdown a:hover,
.account-dropdown button:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgb(92,55,181), rgb(139,92,246)) !important;
}
.account-dropdown a:hover *,
.account-dropdown button:hover * { color: #ffffff !important; }

/* =========================================================
   ALERT / CAPTCHA / MAINTENANCE
   ========================================================= */
.turnstile-wrap,
.maintenance-login-notice,
.auth-alert,
.cf-turnstile {
    background: rgba(var(--color-card), .86) !important;
    border-color: rgba(var(--color-accent), .32) !important;
    color: rgb(var(--color-text)) !important;
}
.auth-alert.error {
    background: rgba(239,68,68,.12) !important;
    border-color: rgba(239,68,68,.52) !important;
    color: #991b1b !important;
}
html.dark .auth-alert.error { color: #fecaca !important; }
.auth-alert.success {
    background: rgba(34,197,94,.12) !important;
    border-color: rgba(34,197,94,.46) !important;
    color: #14532d !important;
}
html.dark .auth-alert.success { color: #bbf7d0 !important; }

.status-approved { background:rgba(34,197,94,.16) !important; color:#15803d !important; border-color:rgba(34,197,94,.42) !important; }
.status-pending { background:rgba(250,204,21,.17) !important; color:#854d0e !important; border-color:rgba(250,204,21,.44) !important; }
.status-disabled { background:rgba(239,68,68,.14) !important; color:#991b1b !important; border-color:rgba(239,68,68,.42) !important; }
html.dark .status-approved { color:#86efac !important; }
html.dark .status-pending { color:#fde68a !important; }
html.dark .status-disabled { color:#fca5a5 !important; }

/* =========================================================
   DECOR / SCROLLBAR / SELECTION
   ========================================================= */
.auth-card-pro::before {
    background: linear-gradient(120deg, transparent, rgba(var(--color-accent), .78), transparent, rgba(var(--bjm-gold), .50), transparent) !important;
}
.auth-card-pro::after {
    background: linear-gradient(90deg, transparent, rgba(var(--color-accent), 1), rgba(var(--bjm-gold), .90), transparent) !important;
}
.auth-kicker,
.auth-logo-mark,
.maintenance-icon-wrap {
    background: rgba(var(--color-accent), .14) !important;
    border-color: rgba(var(--color-accent), .48) !important;
}
.auth-title {
    background: linear-gradient(100deg, rgb(var(--color-title)), rgb(var(--color-accent)), rgb(var(--bjm-gold)), rgb(var(--color-title))) !important;
    background-size: 260% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
html.dark .auth-title {
    background: linear-gradient(100deg, #ffffff, rgb(183,148,255), rgb(245,207,120), #ffffff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
::-webkit-scrollbar-thumb { background: rgba(var(--color-accent), .58) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-accent), .90) !important; }
::selection { background: rgba(var(--color-accent), .30) !important; color: rgb(var(--color-title)) !important; }
html.dark ::selection { color: #ffffff !important; }

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--color-accent), .26); }
    50% { box-shadow: 0 0 28px rgba(var(--color-accent), .56); }
}
@keyframes nanoGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--color-accent), .18); border-color: rgba(var(--color-accent), .40); color: rgb(var(--color-title)); }
    50% { box-shadow: 0 0 22px rgba(var(--color-accent), .42); border-color: rgb(var(--color-accent)); color: rgb(var(--color-accent)); }
}

/* BJM_PURPLE_THEME_END */