/* public/assets/css/theme-glass.css
   =============================================================
   ស្បែក (Theme) — Glassmorphism + Mesh Gradient / Aurora + Neon Glow
   ផ្ទុកជាឯកសារចុងក្រោយ ដើម្បីសរសេរជាន់លើរចនាបថចាស់
   ============================================================= */

/* =============================================================
   ១. TOKENS — LIGHT MODE
   ============================================================= */
html:root {
    /* មូលដ្ឋាន (Base) */
    --g-base: #eef1fb;
    --g-base-2: #f6f7fe;

    /* ពណ៌ Mesh / Aurora (pastel) */
    --g-mesh-purple: #c084fc;
    --g-mesh-blue: #60a5fa;
    --g-mesh-pink: #f472b6;
    --g-mesh-teal: #2dd4bf;

    /* ជម្រាល Accent: fuchsia → purple → indigo */
    --g-accent-from: #d946ef;
    --g-accent-via: #a855f7;
    --g-accent-to: #6366f1;
    --g-accent: linear-gradient(135deg, #d946ef 0%, #a855f7 50%, #6366f1 100%);
    --g-accent-soft: linear-gradient(135deg, rgba(217, 70, 239, 0.14), rgba(99, 102, 241, 0.14));
    --g-accent-solid: #a855f7;

    /* ស្រមោលពណ៌ស្វាយ (Purple shadow) */
    --g-glow: rgba(168, 85, 247, 0.35);
    --g-shadow-sm: 0 2px 10px rgba(76, 29, 149, 0.06);
    --g-shadow: 0 8px 32px rgba(76, 29, 149, 0.10);
    --g-shadow-lg: 0 24px 60px -18px rgba(76, 29, 149, 0.22);
    --g-shadow-accent: 0 10px 30px -8px var(--g-glow);

    /* ផ្ទៃកញ្ចក់ (Glass surface) */
    --g-glass: rgba(255, 255, 255, 0.62);
    --g-glass-strong: rgba(255, 255, 255, 0.78);
    --g-glass-soft: rgba(255, 255, 255, 0.42);
    --g-glass-input: rgba(255, 255, 255, 0.55);
    --g-border: rgba(255, 255, 255, 0.65);
    --g-border-soft: rgba(148, 163, 184, 0.22);
    --g-blur: 18px;
    --g-blur-lg: 26px;

    /* អក្សរ (Text) */
    --g-ink: #14173a;
    --g-body: #4b5178;
    --g-muted: #8a91b4;

    /* ស្ថានភាព (Status) */
    --g-success: #10b981;
    --g-warning: #f59e0b;
    --g-danger: #f43f5e;
    --g-info: #38bdf8;

    /* Neon label */
    --g-neon: #d946ef;
    --g-neon-glow: rgba(217, 70, 239, 0.55);

    /* កាំជ្រុង (Radius — rounded-2xl = 16px) */
    --g-r: 16px;
    --g-r-sm: 12px;
    --g-r-lg: 24px;
    --g-r-full: 999px;

    --g-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ភ្ជាប់ទៅ token ចាស់ ដើម្បីឱ្យ view ទាំងអស់ប្តូរពណ៌តាមស្វ័យប្រវត្តិ */
    --c-primary: var(--g-accent-solid);
    --c-primary-hover: #9333ea;
    --c-primary-soft: rgba(168, 85, 247, 0.12);
    --c-accent: var(--g-accent-from);
    --c-accent-hover: #c026d3;
    --c-accent-soft: rgba(217, 70, 239, 0.12);
    --c-gradient: var(--g-accent);
    --c-heading: var(--g-ink);
    --c-text: var(--g-body);
    --c-muted: var(--g-muted);
    --c-bg: transparent;
    --c-surface: var(--g-glass);
    --c-border: var(--g-border-soft);
    --c-border-strong: rgba(148, 163, 184, 0.34);
    --c-success: var(--g-success);
    --c-warning: var(--g-warning);
    --c-danger: var(--g-danger);
    --r-sm: var(--g-r-sm);
    --r-md: var(--g-r-sm);
    --r-lg: var(--g-r);
    --r-xl: var(--g-r-lg);
    --r-full: var(--g-r-full);
    --sh-xs: var(--g-shadow-sm);
    --sh-sm: var(--g-shadow-sm);
    --sh-md: var(--g-shadow);
    --sh-lg: var(--g-shadow-lg);
    --sh-brand: var(--g-shadow-accent);

    --brand-primary: var(--g-accent-solid);
    --brand-hover: #9333ea;
    --brand-accent: var(--g-accent-from);
    --brand-gradient: var(--g-accent);
    --text-heading: var(--g-ink);
    --text-body: var(--g-body);
    --text-muted: var(--g-muted);
    --bg-main: transparent;
    --border-light: var(--g-border-soft);
    --border-color: var(--g-border-soft);
    --shadow-sm: var(--g-shadow-sm);
    --shadow-md: var(--g-shadow);
    --shadow-lg: var(--g-shadow-lg);
    --shadow-brand: var(--g-shadow-accent);
    --glass-bg: var(--g-glass-soft);
    --glass-card: var(--g-glass);

    --primary: var(--g-accent-solid);
    --primary-hover: #9333ea;
    --body-bg: transparent;
    --text-dark: var(--g-ink);
    --text-gray: var(--g-body);

    --nu-primary: var(--g-accent-solid);
    --nu-accent: var(--g-accent-from);
    --nu-ink: var(--g-ink);
    --nu-body: var(--g-body);
    --nu-muted: var(--g-muted);
    --nu-line: var(--g-border-soft);
    --nu-grad: var(--g-accent);
}

/* =============================================================
   ២. TOKENS — DARK MODE (ខៀវខ្មៅជ្រៅ #0b1020)
   ============================================================= */
html:root[data-theme="dark"] {
    --g-base: #0b1020;
    --g-base-2: #0e1428;

    --g-glass: rgba(24, 31, 58, 0.58);
    --g-glass-strong: rgba(24, 31, 58, 0.74);
    --g-glass-soft: rgba(24, 31, 58, 0.38);
    --g-glass-input: rgba(13, 19, 40, 0.62);
    --g-border: rgba(148, 163, 233, 0.16);
    --g-border-soft: rgba(148, 163, 233, 0.16);

    --g-ink: #eef1fb;
    --g-body: #b3bbdd;
    --g-muted: #7a83ab;

    --g-glow: rgba(168, 85, 247, 0.45);
    --g-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.45);
    --g-shadow: 0 8px 32px rgba(2, 6, 23, 0.55);
    --g-shadow-lg: 0 24px 60px -18px rgba(2, 6, 23, 0.7);

    /* Neon ក្នុង dark mode = cyan */
    --g-neon: #22d3ee;
    --g-neon-glow: rgba(34, 211, 238, 0.55);

    --c-primary-soft: rgba(168, 85, 247, 0.18);
    --c-accent-soft: rgba(34, 211, 238, 0.16);
    --c-border-strong: rgba(148, 163, 233, 0.26);
}

/* ប្រើការកំណត់របស់ប្រព័ន្ធ ពេលអ្នកប្រើមិនបានជ្រើសរើសដោយខ្លួនឯង */
@media (prefers-color-scheme: dark) {
    html:root:not([data-theme="light"]) {
        --g-base: #0b1020;
        --g-base-2: #0e1428;

        --g-glass: rgba(24, 31, 58, 0.58);
        --g-glass-strong: rgba(24, 31, 58, 0.74);
        --g-glass-soft: rgba(24, 31, 58, 0.38);
        --g-glass-input: rgba(13, 19, 40, 0.62);
        --g-border: rgba(148, 163, 233, 0.16);
        --g-border-soft: rgba(148, 163, 233, 0.16);

        --g-ink: #eef1fb;
        --g-body: #b3bbdd;
        --g-muted: #7a83ab;

        --g-glow: rgba(168, 85, 247, 0.45);
        --g-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.45);
        --g-shadow: 0 8px 32px rgba(2, 6, 23, 0.55);
        --g-shadow-lg: 0 24px 60px -18px rgba(2, 6, 23, 0.7);

        --g-neon: #22d3ee;
        --g-neon-glow: rgba(34, 211, 238, 0.55);

        --c-primary-soft: rgba(168, 85, 247, 0.18);
        --c-accent-soft: rgba(34, 211, 238, 0.16);
        --c-border-strong: rgba(148, 163, 233, 0.26);
    }
}

/* =============================================================
   ៣. មូលដ្ឋាន + ផ្ទាំង Mesh Gradient / Aurora
   ============================================================= */
html {
    color-scheme: light;
    background-color: var(--g-base) !important;
    background-image:
        radial-gradient(58rem 42rem at 8% -6%, rgba(192, 132, 252, 0.42), transparent 62%),
        radial-gradient(52rem 38rem at 96% 4%, rgba(96, 165, 250, 0.38), transparent 62%),
        radial-gradient(46rem 36rem at 82% 92%, rgba(244, 114, 182, 0.34), transparent 64%),
        radial-gradient(44rem 34rem at 12% 96%, rgba(45, 212, 191, 0.30), transparent 64%),
        linear-gradient(180deg, var(--g-base-2) 0%, var(--g-base) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

html:root[data-theme="dark"] {
    color-scheme: dark;
    background-image:
        radial-gradient(58rem 42rem at 8% -6%, rgba(192, 132, 252, 0.20), transparent 62%),
        radial-gradient(52rem 38rem at 96% 4%, rgba(96, 165, 250, 0.18), transparent 62%),
        radial-gradient(46rem 36rem at 82% 92%, rgba(244, 114, 182, 0.16), transparent 64%),
        radial-gradient(44rem 34rem at 12% 96%, rgba(45, 212, 191, 0.14), transparent 64%),
        linear-gradient(180deg, #0e1428 0%, #0b1020 100%) !important;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        background-image:
            radial-gradient(58rem 42rem at 8% -6%, rgba(192, 132, 252, 0.20), transparent 62%),
            radial-gradient(52rem 38rem at 96% 4%, rgba(96, 165, 250, 0.18), transparent 62%),
            radial-gradient(46rem 36rem at 82% 92%, rgba(244, 114, 182, 0.16), transparent 64%),
            radial-gradient(44rem 34rem at 12% 96%, rgba(45, 212, 191, 0.14), transparent 64%),
            linear-gradient(180deg, #0e1428 0%, #0b1020 100%) !important;
    }
}

/* body ត្រូវថ្លា ដើម្បីឱ្យផ្ទាំង Aurora និង blob មើលឃើញ */
html body {
    background: transparent !important;
    color: var(--g-body);
    font-family: 'Inter', 'Kantumruy Pro', 'Siemreap', system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
}

/* =============================================================
   ៤. BLOB អណ្តែត (blur 80px, animation blob 12s)
   ============================================================= */
.g-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.g-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
    animation: blob 12s ease-in-out infinite alternate;
}

.g-blob.b1 {
    width: 34vw;
    max-width: 460px;
    aspect-ratio: 1;
    background: var(--g-mesh-purple);
    top: -8%;
    left: -6%;
}
.g-blob.b2 {
    width: 38vw;
    max-width: 520px;
    aspect-ratio: 1;
    background: var(--g-mesh-blue);
    top: 6%;
    right: -10%;
    animation-delay: -3s;
}
.g-blob.b3 {
    width: 30vw;
    max-width: 420px;
    aspect-ratio: 1;
    background: var(--g-mesh-pink);
    bottom: -12%;
    right: 12%;
    animation-delay: -6s;
}
.g-blob.b4 {
    width: 28vw;
    max-width: 400px;
    aspect-ratio: 1;
    background: var(--g-mesh-teal);
    bottom: -10%;
    left: 6%;
    animation-delay: -9s;
}

:root[data-theme="dark"] .g-blob {
    opacity: 0.28;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .g-blob { opacity: 0.28; }
}

@keyframes blob {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(6%, 8%, 0) scale(1.12); }
    66%  { transform: translate3d(-5%, 4%, 0) scale(0.94); }
    100% { transform: translate3d(4%, -6%, 0) scale(1.08); }
}

/* =============================================================
   ៥. ស្កូលបារបែបស្តើងផ្ទាល់ខ្លួន (Custom thin scrollbar)
   ============================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--g-accent-solid) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--g-accent-from), var(--g-accent-to));
    border-radius: var(--g-r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--g-accent-via); }
::-webkit-scrollbar-corner { background: transparent; }

::selection {
    background: rgba(168, 85, 247, 0.28);
    color: var(--g-ink);
}

/* =============================================================
   ៦. អក្សរ (Typography)
   ============================================================= */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    color: var(--g-ink);
    letter-spacing: -0.02em;
}

body .adm-title,
body .section-title,
body .card-head,
body .form-title,
body .status-title,
body .preview-title,
body .stat-value,
body .stat-info h3,
body .plan-name,
body .plan-price {
    color: var(--g-ink);
}

body .adm-sub,
body .stat-label,
body .stat-info p,
body .hint,
body .feat-hint,
body .form-desc,
body .log-meta,
body .user-role,
body .plan-desc {
    color: var(--g-muted);
}

/* ស៊ុមផ្ដោត (Focus ring) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--g-accent-solid);
    outline-offset: 2px;
    border-radius: var(--g-r-sm);
}

/* =============================================================
   ៧. ផ្ទៃកញ្ចក់ (Glass surfaces) — កាតថ្លាឡើងចំហុយ
   ============================================================= */
body .stat-card,
body .action-card,
body .recent-section,
body .card,
body .card-section,
body .form-card,
body .form-section,
body .history-card,
body .history-header,
body .profile-card,
body .pricing-card,
body .price-card,
body .modal-box,
body .result-card,
body .scanner-result,
body .video-card,
body .table-wrapper,
body .log-list,
body .log-box,
body .token-display-box,
body .live-preview-card,
body .preview-placeholder,
body .option-box,
body .options-grid,
body .fb-post-card,
body .comment-mockup,
body .chat-mockup,
body .chat-body,
body .mockup-frame,
body .upload-box,
body .nu-card,
body .step-card,
body .benefit-card,
body .feature-item,
body .faq-item,
body .testi-card,
body .status-card,
body .empty-state,
body .bulk-settings,
body .custom-toast,
body .sidebar-admincard,
body .glass-section,
body .post-card,
body .card-body {
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(160%);
    backdrop-filter: blur(var(--g-blur)) saturate(160%);
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-r);
    box-shadow: var(--g-shadow) !important;
    color: var(--g-body);
}

/* ពន្លឺរស្មីស្តើងនៅគែមខាងលើកាត */
body .stat-card,
body .card,
body .form-card,
body .form-section,
body .history-card,
body .profile-card,
body .pricing-card,
body .price-card,
body .nu-card,
body .step-card,
body .benefit-card,
body .video-card,
body .modal-box,
body .result-card {
    position: relative;
}

body .stat-card:hover,
body .action-card:hover,
body .video-card:hover,
body .step-card:hover,
body .benefit-card:hover,
body .feature-item:hover,
body .price-card:hover,
body .pricing-card:hover,
body .faq-item:hover {
    background: var(--g-glass-strong) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
    box-shadow: var(--g-shadow-lg), 0 0 0 1px var(--g-glow);
    transform: translateY(-3px);
}

body .action-card,
body .stat-card,
body .video-card,
body .step-card,
body .benefit-card,
body .feature-item,
body .price-card,
body .pricing-card,
body .faq-item {
    transition: transform 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease),
                background 0.3s var(--g-ease), border-color 0.3s var(--g-ease);
}

/* កាតដែលមានជម្រាល accent (រក្សាជម្រាល តែប្តូរពណ៌) */
body .welcome-banner,
body .cta-section,
body .current-plan-bar {
    background: var(--g-accent) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--g-r-lg);
    box-shadow: var(--g-shadow-accent);
    color: #fff;
}
body .welcome-banner h1,
body .welcome-banner p,
body .cta-section h2,
body .cta-section p {
    color: #fff;
}

/* =============================================================
   ៨. តារាង (Tables)
   ============================================================= */
body .adm-table,
body .styled-table,
body .custom-table {
    background: transparent !important;
}

body .adm-table th,
body .styled-table th,
body .custom-table th {
    background: var(--g-glass-soft) !important;
    color: var(--g-muted) !important;
    border-bottom: 1px solid var(--g-border-soft) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body .adm-table td,
body .styled-table td,
body .custom-table td {
    color: var(--g-body);
    border-bottom: 1px solid var(--g-border-soft) !important;
}

body .adm-table tbody tr:hover,
body .styled-table tbody tr:hover,
body .custom-table tr:hover {
    background: var(--c-primary-soft) !important;
}

/* =============================================================
   ៩. ប្រអប់បញ្ចូល (Inputs)
   ============================================================= */
body .form-group input,
body .form-group textarea,
body .form-group select,
body .form-control,
body .nu-auth .nu-inp input,
body .mini-input,
body .mini-select,
body .sidebar-search input,
body .token-textarea,
body .upload-input,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="url"],
body input[type="search"],
body input[type="date"],
body textarea,
body select {
    background: var(--g-glass-input) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--g-border-soft) !important;
    border-radius: var(--g-r-sm);
    color: var(--g-ink) !important;
    transition: border-color 0.25s var(--g-ease), box-shadow 0.25s var(--g-ease),
                background 0.25s var(--g-ease);
}

body .form-group input:focus,
body .form-group textarea:focus,
body .form-group select:focus,
body .form-control:focus,
body .nu-auth .nu-inp input:focus,
body .mini-input:focus,
body .mini-select:focus,
body .sidebar-search input:focus,
body .token-textarea:focus,
body input:focus,
body textarea:focus,
body select:focus {
    outline: none;
    background: var(--g-glass-strong) !important;
    border-color: var(--g-accent-solid) !important;
    box-shadow: 0 0 0 4px var(--c-primary-soft), 0 0 18px -4px var(--g-glow);
}

body input::placeholder,
body textarea::placeholder {
    color: var(--g-muted);
}

body .url-input-wrapper,
body .input-wrapper {
    background: var(--g-glass-input) !important;
    border: 1px solid var(--g-border-soft) !important;
    border-radius: var(--g-r-sm);
}

/* =============================================================
   ១០. ប៊ូតុង (Buttons) — gradient fuchsia → purple → indigo
   ============================================================= */
body .btn-primary,
body .btn-submit,
body .btn-submit-bulk,
body .btn-buy,
body .btn-buy-solid,
body .btn-save,
body .btn-scan,
body .btn-create-nav,
body .btn-create-new,
body .btn-create-pe,
body .btn-create-post,
body .btn-head-register,
body .btn-login,
body .btn-blue,
body .btn-purple,
body .btn-lg,
body .btn-fb-connect,
body .nu-auth .nu-btn-primary,
body button[type="submit"] {
    background: var(--g-accent) !important;
    background-size: 180% 180%;
    color: #fff !important;
    border: none !important;
    border-radius: var(--g-r-sm);
    box-shadow: var(--g-shadow-accent);
    transition: transform 0.26s var(--g-ease), box-shadow 0.26s var(--g-ease),
                background-position 0.5s var(--g-ease), filter 0.26s var(--g-ease);
}

body .btn-primary:hover,
body .btn-submit:hover,
body .btn-submit-bulk:hover,
body .btn-buy:hover,
body .btn-buy-solid:hover,
body .btn-save:hover,
body .btn-scan:hover,
body .btn-create-nav:hover,
body .btn-create-new:hover,
body .btn-create-pe:hover,
body .btn-create-post:hover,
body .btn-head-register:hover,
body .btn-login:hover,
body .btn-blue:hover,
body .btn-purple:hover,
body .btn-lg:hover,
body .btn-fb-connect:hover,
body .nu-auth .nu-btn-primary:hover,
body button[type="submit"]:hover {
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 16px 40px -10px var(--g-glow), 0 0 22px -6px var(--g-glow);
    filter: brightness(1.05);
}

/* ប៊ូតុងកញ្ចក់ថ្លា (Ghost / secondary) */
body .btn-secondary,
body .btn-buy-outline,
body .btn-gray,
body .btn-back,
body .btn-mini,
body .filter-btn,
body .tab-btn,
body .q-btn,
body .exit-admin-btn,
body .btn-head-login,
body .nu-auth .nu-btn-ghost,
body .btn-clear-history,
body .btn-disconnect {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-r-sm);
    color: var(--g-ink) !important;
    box-shadow: var(--g-shadow-sm);
    transition: all 0.25s var(--g-ease);
}

body .btn-secondary:hover,
body .btn-buy-outline:hover,
body .btn-gray:hover,
body .btn-back:hover,
body .btn-mini:hover,
body .filter-btn:hover,
body .tab-btn:hover,
body .q-btn:hover,
body .exit-admin-btn:hover,
body .btn-head-login:hover,
body .nu-auth .nu-btn-ghost:hover,
body .btn-clear-history:hover {
    background: var(--g-glass-strong) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: var(--g-accent-solid) !important;
    box-shadow: 0 8px 22px -8px var(--g-glow);
    transform: translateY(-2px);
}

body .filter-btn.active,
body .tab-btn.active,
body .nu-tabs a.on {
    background: var(--g-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--g-shadow-accent);
}

/* ប៊ូតុងគ្រោះថ្នាក់ (Danger) */
body .btn-red,
body .btn-delete,
body .logout-btn {
    background: rgba(244, 63, 94, 0.14) !important;
    border: 1px solid rgba(244, 63, 94, 0.32) !important;
    border-radius: var(--g-r-sm);
    color: #fb7185 !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: all 0.25s var(--g-ease);
}
body .btn-red:hover,
body .btn-delete:hover,
body .logout-btn:hover {
    background: rgba(244, 63, 94, 0.24) !important;
    box-shadow: 0 8px 22px -8px rgba(244, 63, 94, 0.45);
}

/* រូបតំណាង / Avatar ជម្រាល accent */
body .logo-icon-wrapper,
body .profile-icon,
body .avatar,
body .avatar-circle,
body .sac-avatar,
body .nu-brand-mark {
    background: var(--g-accent) !important;
    color: #fff !important;
    border-radius: var(--g-r-sm);
    box-shadow: var(--g-shadow-accent);
}
body .stat-icon,
body .stat-ic,
body .icon-box,
body .action-icon-box,
body .feat-icon,
body .ben-icon,
body .step-icon-wrap {
    background: var(--g-accent);
    color: #fff;
    border-radius: var(--g-r-sm);
    box-shadow: var(--g-shadow-accent);
}
body .profile-icon,
body .avatar,
body .avatar-circle {
    border-radius: 50% !important;
    border: 2px solid var(--g-border) !important;
}

/* អក្សរជម្រាល (Gradient text) */
body .logo a,
body .brand-text-main span.gradient,
body .gradient,
body .sidebar-logo {
    background: var(--g-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--g-accent-solid);
}

/* =============================================================
   ១១. HEADER / NAVBAR កញ្ចក់
   ============================================================= */
body .site-header,
body .professional-header,
body .top-navbar {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(180%);
    backdrop-filter: blur(var(--g-blur-lg)) saturate(180%);
    border-bottom: 1px solid var(--g-border) !important;
    box-shadow: 0 4px 30px -12px rgba(76, 29, 149, 0.16);
}

body .professional-header::before {
    background: var(--g-accent) !important;
    opacity: 1;
    box-shadow: 0 0 14px var(--g-glow);
}

body .professional-header.is-scrolled {
    background: var(--g-glass) !important;
    box-shadow: 0 8px 34px -14px rgba(76, 29, 149, 0.28);
}

body .nav-link {
    color: var(--g-body);
    border-radius: var(--g-r-full);
}
body .nav-link:hover {
    color: var(--g-accent-solid);
    background: var(--c-primary-soft);
}
body .nav-link.active {
    color: var(--g-accent-solid);
    background: var(--c-primary-soft);
}
body .nav-link.active::after {
    background: var(--g-accent);
    box-shadow: 0 0 10px var(--g-glow);
}

body .header-nav,
body .profile-dropdown .dropdown-menu {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(170%);
    backdrop-filter: blur(var(--g-blur-lg)) saturate(170%);
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-r) !important;
    box-shadow: var(--g-shadow-lg);
}

body .profile-dropdown .dropdown-menu li a {
    color: var(--g-body);
}
body .profile-dropdown .dropdown-menu li a i { color: var(--g-muted); }
body .profile-dropdown .dropdown-menu li a:hover {
    background: var(--c-primary-soft);
    color: var(--g-accent-solid);
}
body .profile-dropdown .dropdown-menu li a:hover i { color: var(--g-accent-solid); }
body .dropdown-divider { background: var(--g-border-soft); }

body .mobile-menu-toggle,
body .toggle-sidebar-btn,
body .close-sidebar-btn {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-r-sm);
    color: var(--g-ink) !important;
}
body .mobile-menu-toggle:hover,
body .toggle-sidebar-btn:hover,
body .close-sidebar-btn:hover {
    color: var(--g-accent-solid) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

/* =============================================================
   ១២. SIDEBAR កញ្ចក់ (ផ្ទាំង Admin)
   ============================================================= */
body .sidebar {
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(170%);
    backdrop-filter: blur(var(--g-blur-lg)) saturate(170%);
    border-right: 1px solid var(--g-border) !important;
    box-shadow: 6px 0 40px -22px rgba(76, 29, 149, 0.3);
}
body .sidebar-header,
body .sidebar-footer {
    border-color: var(--g-border-soft) !important;
}

/* 🌟 NEON LABEL — fuchsia ក្នុង light, cyan ក្នុង dark */
body .menu-label {
    color: var(--g-neon) !important;
    text-shadow: 0 0 6px var(--g-neon-glow), 0 0 18px var(--g-neon-glow);
    font-weight: 800;
    letter-spacing: 1.6px;
}

body .menu-item {
    color: var(--g-body) !important;
    border-radius: var(--g-r-sm);
    transition: all 0.22s var(--g-ease);
}
body .menu-item:hover {
    background: var(--c-primary-soft) !important;
    color: var(--g-accent-solid) !important;
}
body .menu-item.active {
    background: var(--g-accent-soft) !important;
    color: var(--g-accent-solid) !important;
    border-left: 3px solid var(--g-accent-solid) !important;
    box-shadow: inset 0 0 20px -8px var(--g-glow);
}

body .sidebar-admincard {
    background: var(--g-accent-soft) !important;
}
body .sac-name { color: var(--g-ink); }
body .sac-role { color: var(--g-success); }
body .menu-empty { color: var(--g-muted); }

body .sidebar-overlay {
    background: rgba(11, 16, 32, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* =============================================================
   ១៣. ស្លាក (Badges) — Neon pill
   ============================================================= */
body .badge,
body .status-badge,
body .menu-badge,
body .mi-badge,
body .plan-badge,
body .card-badge,
body .popular-badge,
body .popular-tag,
body .save-badge,
body .current-badge,
body .video-pe-badge,
body .admin-mode-badge,
body .nu-pill {
    border-radius: var(--g-r-full);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
}

body .b-success,
body .b-active,
body .b-paid,
body .b-done,
body .status-success,
body .alert-success,
body .khqr-ok {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.34) !important;
    box-shadow: 0 0 14px -4px rgba(16, 185, 129, 0.5);
}

body .b-failed,
body .b-expired,
body .status-failed,
body .error-alert,
body .error-box,
body .khqr-fail {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fb7185 !important;
    border-color: rgba(244, 63, 94, 0.34) !important;
    box-shadow: 0 0 14px -4px rgba(244, 63, 94, 0.5);
}

body .b-pending,
body .b-wait,
body .alert-warning,
body .admin-mode-badge {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.34) !important;
    box-shadow: 0 0 14px -4px rgba(245, 158, 11, 0.45);
}

body .b-other,
body .b-user,
body .b-none,
body .b-off,
body .badge-soft,
body .menu-badge.badge-soft,
body .badge-keyword,
body .nu-pill,
body .self-tag,
body .b-pop {
    background: var(--c-primary-soft) !important;
    color: var(--g-accent-solid) !important;
    border-color: rgba(168, 85, 247, 0.32) !important;
}

body .b-admin,
body .badge-new,
body .menu-badge.badge-new,
body .premium,
body .popular-badge,
body .popular-tag,
body .card-badge,
body .video-pe-badge {
    background: var(--g-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px -4px var(--g-glow);
}

body .badge-alert,
body .menu-badge.badge-alert,
body .mi-badge {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 0 14px -2px rgba(244, 63, 94, 0.7);
}

body .plan-badge,
body .save-badge,
body .current-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #7e22ce !important;
    border-color: transparent !important;
}

/* =============================================================
   ១៤. MODAL / OVERLAY / TOAST
   ============================================================= */
body .modal-overlay {
    background: rgba(11, 16, 32, 0.6) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body .modal-box {
    border-radius: var(--g-r-lg) !important;
    background: var(--g-glass-strong) !important;
    box-shadow: var(--g-shadow-lg), 0 0 0 1px var(--g-glow);
}
body .modal-head,
body .modal-foot { border-color: var(--g-border-soft) !important; }

body .custom-toast {
    border-radius: var(--g-r) !important;
    background: var(--g-glass-strong) !important;
    box-shadow: var(--g-shadow-lg);
}

/* =============================================================
   ១៥. FOOTER
   ============================================================= */
body .site-footer,
body .footer-wrapper {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(var(--g-blur));
    backdrop-filter: blur(var(--g-blur));
    border-top: 1px solid var(--g-border) !important;
    color: var(--g-muted);
}
body .footer-col a,
body .footer-bottom { color: var(--g-muted); }
body .footer-col a:hover { color: var(--g-accent-solid); }

/* =============================================================
   ១៦. ផ្ទាំងចាស់ដែលត្រូវលុបចោល (Legacy backdrops)
   ============================================================= */
body #particles-js,
body .nu-bg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
body .nu-orb,
body .cta-bg-glow { display: none !important; }

body .nu-side {
    background: linear-gradient(158deg, rgba(88, 28, 135, 0.92) 0%, rgba(49, 46, 129, 0.94) 55%, rgba(11, 16, 32, 0.96) 100%) !important;
    -webkit-backdrop-filter: blur(var(--g-blur));
    backdrop-filter: blur(var(--g-blur));
}
body .nu-side::before {
    background:
        radial-gradient(560px 300px at 8% 4%, rgba(217, 70, 239, 0.5), transparent 60%),
        radial-gradient(520px 320px at 96% 96%, rgba(45, 212, 191, 0.34), transparent 62%) !important;
}

/* =============================================================
   ១៧. ជ្រុងមូល rounded-2xl សម្រាប់សមាសភាគរួម
   ============================================================= */
body .stat-card,
body .action-card,
body .card,
body .form-card,
body .form-section,
body .history-card,
body .profile-card,
body .video-card,
body .result-card,
body .step-card,
body .benefit-card,
body .feature-item,
body .faq-item,
body .table-wrapper,
body .log-list,
body .option-box,
body .upload-box,
body .status-card,
body .stat-block {
    border-radius: var(--g-r) !important;
}
body .nu-card,
body .pricing-card,
body .price-card,
body .welcome-banner,
body .cta-section {
    border-radius: var(--g-r-lg) !important;
}

/* =============================================================
   ១៨. ការគោរពការកំណត់កាត់បន្ថយចលនា (Reduced motion)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    body .g-blob,
    body .nu-card {
        animation: none !important;
    }
    body * {
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================
   ១៩. ប៊ូតុងប្តូរ Light / Dark
   ============================================================= */
.g-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--g-glass-soft);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--g-border);
    border-radius: var(--g-r-sm);
    color: var(--g-ink);
    font-size: 16px;
    transition: all 0.25s var(--g-ease);
}
.g-theme-toggle:hover {
    color: var(--g-accent-solid);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 8px 22px -8px var(--g-glow);
    transform: translateY(-2px);
}
.g-theme-toggle .g-icon-dark { display: none; }
:root[data-theme="dark"] .g-theme-toggle .g-icon-dark { display: inline; }
:root[data-theme="dark"] .g-theme-toggle .g-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .g-theme-toggle .g-icon-dark { display: inline; }
    html:not([data-theme="light"]) .g-theme-toggle .g-icon-light { display: none; }
}

/* =============================================================
   ២០. កែសម្រួលបន្ថែមសម្រាប់ DARK MODE
   ============================================================= */
:root[data-theme="dark"] body .q-btn,
:root[data-theme="dark"] body .btn-head-login,
:root[data-theme="dark"] body .tab-btn,
:root[data-theme="dark"] body .filter-btn {
    color: var(--g-body) !important;
}
:root[data-theme="dark"] body .carousel-item { background: rgba(11, 16, 32, 0.9); }
:root[data-theme="dark"] body .plan-badge,
:root[data-theme="dark"] body .save-badge,
:root[data-theme="dark"] body .current-badge {
    background: rgba(34, 211, 238, 0.18) !important;
    color: #67e8f9 !important;
}

/* =============================================================
   ២១. ផ្នែកងងឹតនៅទំព័រដើម (Home dark sections) — ខៀវខ្មៅជ្រៅ
   ============================================================= */
body .site-footer,
body .cta-section,
body .price-card.premium,
body .nu-side {
    color: #cfd6f5;
}

body .cta-section {
    background:
        radial-gradient(48rem 30rem at 50% 0%, rgba(168, 85, 247, 0.28), transparent 64%),
        linear-gradient(160deg, #131a36 0%, #0b1020 100%) !important;
    border: 1px solid rgba(148, 163, 233, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body .site-footer {
    background:
        radial-gradient(44rem 26rem at 50% 0%, rgba(168, 85, 247, 0.16), transparent 66%),
        linear-gradient(180deg, rgba(19, 26, 54, 0.92) 0%, rgba(11, 16, 32, 0.96) 100%) !important;
    -webkit-backdrop-filter: blur(var(--g-blur));
    backdrop-filter: blur(var(--g-blur));
    border-top: 1px solid rgba(148, 163, 233, 0.18) !important;
}
body .footer-brand h3,
body .footer-col h4 { color: #eef1fb; }
body .footer-brand i { color: var(--g-neon); text-shadow: 0 0 10px var(--g-neon-glow); }
body .footer-col ul li a { color: #9aa3cc; }
body .footer-col ul li a:hover { color: var(--g-neon); }
body .footer-socials a {
    background: rgba(255, 255, 255, 0.06);
    color: #9aa3cc;
    border: 1px solid rgba(148, 163, 233, 0.18);
}
body .footer-socials a:hover {
    background: var(--g-accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 18px -4px var(--g-glow);
}

body .price-card.premium {
    background:
        radial-gradient(36rem 22rem at 50% 0%, rgba(168, 85, 247, 0.3), transparent 66%),
        linear-gradient(160deg, #131a36 0%, #0b1020 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 28px 60px -18px var(--g-glow) !important;
}
body .price-card.premium .plan-name,
body .price-card.premium .plan-price { color: #eef1fb !important; }
body .price-card.premium .plan-list li { color: #cfd6f5; }
body .price-card.premium .plan-price span { color: #9aa3cc; }

/* Mockup frame កញ្ចក់ */
body .mockup-frame {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(var(--g-blur));
    backdrop-filter: blur(var(--g-blur));
    border: 6px solid var(--g-border) !important;
    border-radius: var(--g-r-lg) !important;
    box-shadow: var(--g-shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}
body .fb-post-card {
    border-radius: var(--g-r-sm) !important;
    box-shadow: var(--g-shadow-sm) !important;
}
body .fb-name,
body .fb-body { color: var(--g-ink); }
body .fb-time,
body .fb-footer-stats { color: var(--g-muted); }
body .fb-body-text { background: var(--g-border-soft) !important; }
body .fb-footer-stats { border-color: var(--g-border-soft) !important; }
body .pe-layout { background: transparent !important; }

/* Stats bar & glass sections */
body .stats-bar {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(var(--g-blur));
    backdrop-filter: blur(var(--g-blur));
    border-top: 1px solid var(--g-border) !important;
    border-bottom: 1px solid var(--g-border) !important;
}
body .stat-block { background: transparent !important; border: none !important; box-shadow: none !important; }
body .stat-block:not(:last-child)::after { background: var(--g-border-soft); }
body .stat-block h3 { color: var(--g-ink); }
body .stat-block p { color: var(--g-body); }

body .glass-section {
    border-top: 1px solid var(--g-border) !important;
    border-bottom: 1px solid var(--g-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hero gradient text & badges */
body .dynamic-text {
    background: var(--g-accent) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body .typewrite > .wrap { border-right-color: var(--g-accent-solid); }
body .pe-home-wrapper .badge,
body .section-header .badge {
    background: var(--g-glass-strong) !important;
    color: var(--g-accent-solid) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 4px 14px -4px var(--g-glow);
}
body .trust-indicator { border-color: var(--g-border-soft); color: var(--g-body); }
body .quote-icon { color: var(--c-primary-soft); }
body .testi-text { color: var(--g-ink); }
body .testi-user { border-color: var(--g-border-soft); }
body .faq-q { color: var(--g-ink); }
body .faq-q i { color: var(--g-accent-solid); }
body .faq-a { color: var(--g-body); }
body .faq-item.active {
    background: var(--g-glass-strong) !important;
    border-color: rgba(168, 85, 247, 0.45) !important;
    box-shadow: 0 12px 30px -10px var(--g-glow) !important;
}
body .play-btn-glass {
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--g-border);
}
body .step-card:hover .step-icon-wrap { background: var(--g-accent); color: #fff; }
body .plan-list li i.fa-check { color: var(--g-success); }
body .plan-list li.disabled { color: var(--g-muted); }
body .plan-list li.disabled i { color: var(--g-muted); }
body .plan-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Carousel */
body .carousel-item {
    background: linear-gradient(160deg, #131a36, #0b1020);
}

/* =============================================================
   ២២. ទំព័រ Login / Register (.nu-auth) — សរសេរជាន់លើអថេរមូលដ្ឋាន
   ============================================================= */
body .nu-auth {
    --nu-primary: var(--g-accent-solid);
    --nu-accent: var(--g-accent-from);
    --nu-ink: var(--g-ink);
    --nu-body: var(--g-body);
    --nu-muted: var(--g-muted);
    --nu-line: var(--g-border-soft);
    --nu-grad: var(--g-accent);
}

body .nu-bg::after {
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.07) 1px, transparent 1px) !important;
}

body .nu-card {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(170%);
    backdrop-filter: blur(var(--g-blur-lg)) saturate(170%);
    box-shadow: var(--g-shadow-lg), 0 0 0 1px var(--g-glow) !important;
}

body .nu-side { color: #eef1fb; }
body .nu-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body .nu-side .nu-foot { color: #cfd6f5; }
body .nu-panel .nu-foot { color: var(--g-body); }
body .nu-brand-name,
body .nu-lead { color: #fff; }
body .nu-sub,
body .nu-feats li,
body .nu-stat span { color: #cfd6f5; }
body .nu-panel .nu-sub { color: var(--g-body); }
body .nu-side .nu-ico,
body .nu-pill i { color: var(--g-neon); }
body .nu-inp > i.nu-ico { color: var(--g-muted); }
body .nu-inp input:focus ~ i.nu-ico { color: var(--g-accent-solid); }

body .nu-tabs {
    background: var(--g-glass-soft) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-r-full) !important;
}
body .nu-tabs a { color: var(--g-muted); }
body .nu-tabs a:hover { color: var(--g-accent-solid); }

body .nu-label { color: var(--g-ink); }
body .nu-link { color: var(--g-accent-solid); }
body .nu-eye { color: var(--g-muted); }
body .nu-eye:hover { color: var(--g-accent-solid); }
body .nu-or span {
    color: var(--g-muted);
    border: none !important;
    box-shadow: none !important;
}
body .nu-terms,
body .nu-check { color: var(--g-body); }
body .nu-meter-txt { color: var(--g-muted); }
body .nu-back { color: var(--g-muted); }
body .nu-back:hover { color: var(--g-accent-solid); }
body .nu-alert {
    background: rgba(244, 63, 94, 0.14) !important;
    border: 1px solid rgba(244, 63, 94, 0.32) !important;
    color: #fb7185 !important;
    border-radius: var(--g-r-sm) !important;
}

/* =============================================================
   ២៣. ទំព័រដំណើរការ (Processing page) — ការកែសម្រួល
   ============================================================= */
body .success-icon { color: var(--g-success); text-shadow: 0 0 24px rgba(16, 185, 129, 0.5); }
body .error-icon { color: var(--g-danger); text-shadow: 0 0 24px rgba(244, 63, 94, 0.5); }
body .loading-icon { color: var(--g-neon); text-shadow: 0 0 24px var(--g-neon-glow); }
body .status-icon-success { color: var(--g-success); }
body .status-icon-failed { color: var(--g-danger); }
body .post-id-box,
body .log-list {
    border-style: dashed !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
    color: var(--g-body) !important;
}
body .error-box {
    background: rgba(244, 63, 94, 0.12) !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    color: #fb7185 !important;
    border-radius: var(--g-r-sm) !important;
}
body .btn-back {
    background: var(--g-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--g-r-sm) !important;
    box-shadow: var(--g-shadow-accent) !important;
}
body .btn-back:hover {
    color: #fff !important;
    box-shadow: 0 16px 40px -10px var(--g-glow) !important;
    transform: translateY(-2px);
}
body .prog {
    border: 1px solid var(--g-border-soft) !important;
    border-radius: var(--g-r-full) !important;
    overflow: hidden;
}
body .bar,
body .bar-col {
    background: var(--g-accent) !important;
    box-shadow: 0 0 14px -2px var(--g-glow);
}

/* =============================================================
   ២៤. ការកែសម្រួលចម្រុះ (Misc fixes)
   ============================================================= */
body .info-row { border-color: var(--g-border-soft) !important; }
body .info-label { color: var(--g-muted); }
body .info-value { color: var(--g-ink); }
body .divider,
body .dropdown-divider { background: var(--g-border-soft) !important; }
body .empty,
body .empty-state,
body .menu-empty,
body .preview-placeholder { color: var(--g-muted); }
body .mono { color: var(--g-ink); }
body .switch .slider {
    background: var(--g-border-soft) !important;
    border-radius: var(--g-r-full);
}
body .switch input:checked + .slider {
    background: var(--g-accent) !important;
    box-shadow: 0 0 14px -2px var(--g-glow);
}
body .custom-checkbox,
body .checkbox-ui {
    border-color: var(--g-border-soft) !important;
    border-radius: 6px !important;
}
body .custom-checkbox:checked,
body input[type="checkbox"]:checked + .checkbox-ui {
    background: var(--g-accent) !important;
    border-color: transparent !important;
}
body input[type="checkbox"],
body input[type="radio"] { accent-color: var(--g-accent-solid); }
body .tab-header,
body .tabs-wrapper,
body .recent-header,
body .adm-head,
body .adm-head-row,
body .card-head,
body .modal-head,
body .grid-header,
body .history-header,
body .info-header,
body .edit-header,
body .plans-header,
body .section-title {
    border-color: var(--g-border-soft) !important;
}
body .adm-title i,
body .section-title i,
body .card-head i,
body .sidebar-logo i {
    color: var(--g-accent-solid);
    -webkit-text-fill-color: initial;
}
body .money,
body .green-price,
body .price-tag { color: var(--g-ink); }
body .plan-permonth { color: var(--g-muted); }
body a { color: inherit; }
body .nu-link:hover,
body .quick-links a:hover { color: var(--g-accent-solid); }

/* =============================================================
   ២៥. ប៊ូតុងប្តូរស្បែក — ទីតាំងក្នុង Header
   ============================================================= */
.header-wrapper > .g-theme-toggle {
    margin-left: auto;
    margin-right: 10px;
    position: relative;
    z-index: 10001;
}

@media (max-width: 768px) {
    .header-wrapper > .g-theme-toggle {
        margin-left: auto;
        margin-right: 8px;
    }
}

/* =============================================================
   ២៦. ផ្ទៃកញ្ចក់ស្រាល (Subtle glass) — ធុងផ្ទុក និងសមាសភាគតូច
   ============================================================= */
body .video-grid,
body .table-container,
body .grid-header,
body .filter-bar,
body .post-id-box,
body .info-value,
body .nu-or span,
body .cmt-bubble,
body .msg-user,
body .prog,
body .checkbox-ui,
body .interval-inputs,
body .check-row,
body .toggle-row,
body .stats-container {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--g-border-soft) !important;
    color: var(--g-body);
}

body .video-grid,
body .table-container {
    border-radius: var(--g-r) !important;
}
body .post-id-box,
body .info-value,
body .cmt-bubble,
body .msg-user {
    border-radius: var(--g-r-sm) !important;
    color: var(--g-ink) !important;
}
body .checkbox-ui {
    background: var(--g-glass-strong) !important;
}

/* ធុងផ្ទុក layout — មិនត្រូវក្លាយជាកាត */
body .clone-container,
body .automation-container,
body .account-container,
body .post-create-container,
body .pe-layout,
body .media-col,
body .preview-section,
body .preview-sticky,
body .plan-list,
body .stat-block,
body .plans-wrapper,
body .history-wrapper,
body .profile-layout,
body .adm-wrap,
body .container,
body .content-layer,
body .footer-wrapper,
body .upload-boxes,
body .stat-grid,
body .grid-container,
body .video-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Grid header និង divider ប្រើបន្ទាត់ស្តើង */
body .grid-header {
    border: none !important;
    border-bottom: 1px dashed rgba(168, 85, 247, 0.32) !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body .filter-bar {
    background: transparent !important;
    border: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* កាតវីដេអូដែលបានជ្រើសរើស */
body .video-card.selected {
    background: var(--g-accent-soft) !important;
    border: 2px solid var(--g-accent-solid) !important;
    box-shadow: 0 0 0 4px var(--c-primary-soft), var(--g-shadow) !important;
}
body .video-thumb { background-color: rgba(11, 16, 32, 0.6); }
body .video-title { color: var(--g-ink); }
body .video-duration {
    background: rgba(11, 16, 32, 0.72);
    color: #fff;
    border-radius: 6px;
}

/* ប្រអប់អាប់ឡូត (Upload dropzone) */
body .upload-box {
    background: var(--g-accent-soft) !important;
    border: 2px dashed rgba(168, 85, 247, 0.5) !important;
    border-radius: var(--g-r) !important;
    color: var(--g-body);
}
body .upload-box:hover {
    border-color: var(--g-accent-solid) !important;
    box-shadow: 0 0 24px -8px var(--g-glow);
}
body .upload-text { color: var(--g-body); }

/* ការជូនដំណឹង (Alerts) */
body .alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.32) !important;
    color: #fbbf24 !important;
    border-radius: var(--g-r) !important;
}
body .alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.32) !important;
    color: #34d399 !important;
    border-radius: var(--g-r) !important;
}

/* ប្រអប់កំណត់ហេតុ (Log console) — រក្សាភាពងងឹត */
body .log-box {
    background: rgba(11, 16, 32, 0.82) !important;
    border: 1px solid rgba(148, 163, 233, 0.2) !important;
    color: #cfd6f5 !important;
    border-radius: var(--g-r) !important;
}

/* ប៊ូតុងស្កេន (Scan) */
body .btn-scan {
    background: var(--g-accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--g-shadow-accent) !important;
}
body .scanner-result {
    border-style: dashed !important;
    border-color: rgba(168, 85, 247, 0.34) !important;
}