@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
    --font: "Inter", "Rubik", sans-serif;

    /* Brand */
    --primary-color: #C1272D;
    --primary: #C1272D;
    --primary-dark: #9b1e22;
    --primary-light: rgba(193, 39, 45, 0.10);
    --primary-glow: rgba(193, 39, 45, 0.22);

    /* RGB channels — for rgba(var(--x-rgb), opacity) usage */
    --primary-rgb:  193, 39, 45;
    --red-rgb:      239, 68, 68;
    --purple-rgb:   124, 58, 237;
    --amber-rgb:    245, 158, 11;
    --white-rgb:    255, 255, 255;
    --black-rgb:    0, 0, 0;

    /* Login page scene backgrounds */
    --login-scene-bg:   #07070f;
    --login-scene-deep: #1a0a0a;

    /* Sidebar */
    --sb-bg: #0f172a;
    --sb-bg-2: #1e293b;
    --sb-border: rgba(255, 255, 255, 0.06);
    --sb-text: #94a3b8;
    --sb-text-hover: #f8fafc;
    --sb-icon-muted: #7e97b4;
    --sb-section:    #6b82a0;
    --sb-width: 265px;
    --sb-width-sm: 72px;
    --sb-gradient: linear-gradient(175deg, #0f172a 0%, #141d2f 60%, #111827 100%);

    /* Surface & Layout */
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-glass: rgba(255, 255, 255, 0.84);
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    /* Text */
    --tx-primary: #0f172a;
    --tx-secondary: #475569;
    --tx-muted: #94a3b8;
    --tx-white: #ffffff;

    /* Status — modern */
    --green: #10b981;
    --green-bg: #d1fae5;
    --green-border: #6ee7b7;
    --red: #ef4444;
    --red-bg: #fee2e2;
    --red-border: #fca5a5;
    --blue: #3b82f6;
    --blue-bg: #dbeafe;
    --blue-border: #93c5fd;
    --amber: #f59e0b;
    --amber-bg: #fef3c7;
    --amber-border: #fcd34d;
    --purple: #8b5cf6;
    --purple-bg: #ede9fe;
    --purple-border: #c4b5fd;
    --slate: #475569;
    --slate-bg: #e2e8f0;
    --slate-border: #94a3b8;
    --cyan: #06b6d4;
    --cyan-bg: #cffafe;
    --cyan-border: #67e8f9;
    --orange: #f97316;
    --orange-bg: #ffedd5;
    --orange-border: #fed7aa;

    /* Legacy aliases — keep for backward compat across all pages */
    --white-color: #fff;
    --black-color: #000;
    --black-25: rgba(0, 0, 0, 0.08);
    --white-50: rgba(255, 255, 255, 0.92);
    --body-color: #f1f5f9;
    --assest-color: #0f172a;
    --green-color: #10b981;
    --green-50: #d1fae5;
    --red-color: #ef4444;
    --red-50: #fee2e2;
    --edit-delete-color: #1d4ed8;
    --edit-delete-50: #dbeafe;
    --edit-color: #1d4ed8;
    --edit-bg: #dbeafe;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #C1272D 0%, #e53935 100%);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.15), 0 8px 20px rgba(15, 23, 42, 0.08);

    /* Border Radius */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-full: 9999px;

    /* Transitions */
    --ease:   cubic-bezier(0.4, 0, 0.2, 1);
    --fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --slow:   0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Demo button ─── */
    --demo-gradient:      linear-gradient(135deg, #ff6b35, #f7931e);
    --demo-glow-sm:       rgba(247, 147, 30, 0.30);
    --demo-glow:          rgba(247, 147, 30, 0.40);

    /* ─── Sidebar tones — dark defaults ─── */
    --sb-hover-sm:           rgba(255, 255, 255, 0.07);
    --sb-hover:              rgba(255, 255, 255, 0.14);
    --sb-shadow:             4px 0 24px rgba(0, 0, 0, 0.18);
    --sb-logo-end:           #f1a4a6;
    --sb-logo-gradient:      linear-gradient(135deg, #fff 0%, #f1a4a6 100%);
    --sb-scrollbar-thumb:    rgba(255, 255, 255, 0.10);
    --sb-scrollbar-sm:       rgba(255, 255, 255, 0.08);
    --sb-active-line:        rgba(193, 39, 45, 0.50);
    --sb-active-sub-bg:      rgba(193, 39, 45, 0.18);
    --sb-hover-line:         rgba(193, 39, 45, 0.40);
    --sb-item-hover:         rgba(255, 255, 255, 0.06);
    --sb-active-text:        #f8fafc;
    --sb-hover-icon:         #ffffff;

    /* ─── Header ─── */
    --header-border-alpha: rgba(226, 232, 240, 0.65);
    --header-shadow:       0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 24px rgba(15, 23, 42, 0.06);

    /* ─── Status dark text ─── */
    --green-dark:          #065f46;
    --blue-dark:           #1e40af;
    --red-dark:            #991b1b;

    /* ─── Overlays ─── */
    --overlay-dark:        rgba(0, 0, 0, 0.26);
    --overlay-caption:     rgba(0, 0, 0, 0.42);
    --overlay-remove:      rgba(0, 0, 0, 0.48);
    --overlay-loader:      rgba(241, 245, 249, 0.88);
    --overlay-shadow:      rgba(0, 0, 0, 0.20);

    /* ─── Table ─── */
    --table-hover:         rgba(193, 39, 45, 0.03);

    /* ─── Misc UI ─── */
    --google-pill-bg:      #fde8e8;
    --login-box-bg:        rgba(15, 23, 42, 0.72);

    /* ─── White alpha scale ─── */
    --white-08:  rgba(255, 255, 255, 0.08);
    --white-10:  rgba(255, 255, 255, 0.10);
    --white-12:  rgba(255, 255, 255, 0.12);
    --white-15:  rgba(255, 255, 255, 0.15);
    --white-16:  rgba(255, 255, 255, 0.16);
    --white-38:  rgba(255, 255, 255, 0.38);
    --white-45:  rgba(255, 255, 255, 0.45);
    --white-65:  rgba(255, 255, 255, 0.65);
    --white-78:  rgba(255, 255, 255, 0.78);
    --white-82:  rgba(255, 255, 255, 0.82);
}

/* ================================================================
   DARK THEME — variable overrides
   ================================================================ */
[data-theme="dark"] {
    --bg:            #0d1117;
    --surface:       #161b22;
    --surface-2:     #1c2128;
    --surface-glass: rgba(22, 27, 34, 0.92);
    --body-color:    #0d1117;

    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --tx-primary:    #e6edf3;
    --tx-secondary:  #8b949e;
    --tx-muted:      #6e7681;
    --assest-color:  #e6edf3;

    --header-border-alpha: rgba(255, 255, 255, 0.07);
    --header-shadow:       0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.3);
    --overlay-loader:      rgba(13, 17, 23, 0.88);

    --green-bg:      rgba(16, 185, 129, 0.12);
    --green-border:  rgba(16, 185, 129, 0.28);
    --green-dark:    #4ade80;
    --green-50:      rgba(16, 185, 129, 0.12);
    --red-bg:        rgba(239, 68, 68, 0.12);
    --red-border:    rgba(239, 68, 68, 0.28);
    --red-dark:      #f87171;
    --red-50:        rgba(239, 68, 68, 0.12);
    --blue-bg:       rgba(59, 130, 246, 0.12);
    --blue-border:   rgba(59, 130, 246, 0.28);
    --blue-dark:     #60a5fa;
    --edit-color:     #93c5fd;
    --edit-bg:        rgba(59, 130, 246, 0.15);
    --edit-delete-50: rgba(59, 130, 246, 0.15);
    --amber-bg:      rgba(245, 158, 11, 0.12);
    --amber-border:  rgba(245, 158, 11, 0.28);
    --purple-bg:     rgba(139, 92, 246, 0.12);
    --purple-border: rgba(139, 92, 246, 0.28);
    --slate:         #94a3b8;
    --slate-bg:      rgba(148, 163, 184, 0.14);
    --slate-border:  rgba(148, 163, 184, 0.32);
    --cyan-bg:       rgba(6, 182, 212, 0.12);
    --cyan-border:   rgba(6, 182, 212, 0.28);
    --orange-bg:     rgba(249, 115, 22, 0.12);
    --orange-border: rgba(249, 115, 22, 0.28);
    --google-pill-bg: rgba(239, 68, 68, 0.12);
    --table-hover:   rgba(193, 39, 45, 0.06);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36), 0 2px 6px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.44), 0 4px 12px rgba(0, 0, 0, 0.28);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.52), 0 8px 20px rgba(0, 0, 0, 0.32);

    /* Sidebar — dark mode full override */
    --sb-bg:              #161b22;
    --sb-bg-2:            #1c2128;
    --sb-gradient:        linear-gradient(175deg, #161b22 0%, #1c2128 60%, #161b22 100%);
    --sb-border:          rgba(255, 255, 255, 0.07);
    --sb-text:            #94a3b8;
    --sb-text-hover:      #f8fafc;
    --sb-icon-muted:      #7e97b4;
    --sb-section:         #6b82a0;
    --sb-shadow:          0 0 0 1px rgba(255, 255, 255, 0.05), 4px 0 24px rgba(0, 0, 0, 0.4);
    --sb-logo-end:        #f1a4a6;
    --sb-logo-gradient:   linear-gradient(135deg, #fff 0%, #f1a4a6 100%);
    --sb-hover-sm:        rgba(255, 255, 255, 0.07);
    --sb-hover:           rgba(255, 255, 255, 0.14);
    --sb-scrollbar-thumb: rgba(255, 255, 255, 0.10);
    --sb-scrollbar-sm:    rgba(255, 255, 255, 0.08);
    --sb-active-line:     rgba(193, 39, 45, 0.50);
    --sb-active-sub-bg:   rgba(193, 39, 45, 0.18);
    --sb-hover-line:      rgba(193, 39, 45, 0.40);
    --sb-item-hover:      rgba(255, 255, 255, 0.06);
    --sb-active-text:     #f8fafc;
    --sb-hover-icon:      #ffffff;
}

/* ================================================================
   LIGHT THEME — sidebar variable overrides
   ================================================================ */
[data-theme="light"] {
    /* Sidebar — clean neutral light panel, clearly distinct from body (#f1f5f9) */
    --sb-bg:              #eef0f7;
    --sb-bg-2:            #e5e8f3;
    --sb-gradient:        linear-gradient(175deg, #eef0f7 0%, #e8ebf4 60%, #eceff6 100%);
    --sb-border:          rgba(15, 23, 42, 0.10);
    --sb-text:            #1e293b;
    --sb-text-hover:      #0f172a;
    --sb-icon-muted:      #64748b;
    --sb-section:         #94a3b8;
    --sb-shadow:          4px 0 16px rgba(15, 23, 42, 0.07), 1px 0 0 rgba(15, 23, 42, 0.08);
    --sb-logo-gradient:   linear-gradient(135deg, #0f172a 0%, #C1272D 100%);
    --sb-logo-end:        #C1272D;
    --sb-hover-sm:        rgba(15, 23, 42, 0.05);
    --sb-hover:           rgba(15, 23, 42, 0.09);
    --sb-scrollbar-thumb: rgba(15, 23, 42, 0.15);
    --sb-scrollbar-sm:    rgba(15, 23, 42, 0.10);
    --sb-active-line:     rgba(193, 39, 45, 0.55);
    --sb-active-sub-bg:   rgba(193, 39, 45, 0.10);
    --sb-hover-line:      rgba(193, 39, 45, 0.30);
    --sb-item-hover:      rgba(15, 23, 42, 0.05);
    --sb-active-text:     var(--primary-color);
    --sb-hover-icon:      var(--primary-color);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--tx-primary);
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
    color: var(--tx-primary);
    font-weight: 700;
}

.defaultfont {
    font-family: var(--font);
}

a {
    text-decoration: none !important;
    color: var(--primary-color);
    transition: color var(--fast);
}

a:hover {
    color: var(--primary-dark);
}

.primary-color {
    color: var(--primary-color);
}

.text-gray {
    color: var(--tx-muted);
}

.btn:focus {
    outline: none;
    box-shadow: none;
}

/* ─── Breadcrumb ─── */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    padding: 8px 18px 8px 10px;
    margin: 0;
    box-shadow: var(--shadow-xs);
    gap: 0;
    height: 40px;
}

/* Remove Bootstrap default padding on items */
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

/* Chevron separator — replaces Bootstrap's "/" */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '›';
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--tx-muted);
    padding: 0 6px;
    opacity: 0.55;
}

/* All links */
.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tx-secondary);
    font-weight: 500;
    font-size: 13.5px;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    text-decoration: none !important;
    transition: color var(--fast), background var(--fast);
}
.breadcrumb-item a:hover {
    color: var(--primary-color);
    background: var(--primary-light);
}

/* Home icon on the first item */
.breadcrumb-item:first-child a::before {
    content: '\f015';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', sans-serif;
    font-weight: 900;
    font-size: 11px;
    color: var(--primary-color);
    line-height: 1;
}

/* Active (current page) */
.breadcrumb-item.active {
    display: inline-flex;
    align-items: center;
    color: var(--tx-primary);
    font-weight: 600;
    font-size: 13.5px;
    padding: 2px 6px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-link {
    color: var(--primary-color) !important;
    font-weight: 600;
    border-bottom: 1.5px solid var(--primary-color);
    display: inline-block;
    padding: 0 0 2px;
    border-radius: 0;
    font-size: 13px;
    transition: opacity var(--fast);
}

.btn-link:hover {
    opacity: 0.72;
}

.btn-demo {
    background: var(--demo-gradient);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 700;
    color: var(--white-color);
    border: none;
    transition: all var(--normal);
    padding: 7px 16px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px var(--demo-glow-sm);
}

.btn-demo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--demo-glow);
    color: var(--white-color);
}

.btn-default {
    background: var(--primary-color);
    border-radius: var(--r-full);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--white-color);
    border: none;
    transition: background var(--fast), box-shadow var(--fast);
    padding: 9px 22px;
    letter-spacing: 0.2px;
    /* display: inline-flex; */
    align-items: center;
    gap: 6px;
}

.btn-default:hover {
    background: var(--primary-dark);
    color: var(--white-color);
    box-shadow: 0 3px 10px var(--primary-glow);
}

.mw-120 {
    min-width: 120px;
}

.btn-icon {
    padding: 7px 12px;
    border-radius: var(--r-sm);
    background: var(--primary-color);
    color: var(--white-color);
    border: none;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-icon:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    color: var(--white-color);
}

.btn-cancel {
    background: var(--surface-2);
    border-radius: var(--r-full);
    font-size: 14px;
    font-weight: 600;
    color: var(--tx-primary);
    border: 1.5px solid var(--border);
    transition: all var(--normal);
    padding: 9px 24px;
}

.btn-cancel:hover {
    background: var(--border);
    color: var(--tx-primary);
    border-color: var(--border);
}

.listitemClass {
    background: var(--surface);
    border: 1.5px solid var(--border);
    cursor: grab;
    font-size: 13.5px;
    padding: 10px 14px;
    font-weight: 500;
    border-radius: var(--r-sm);
    color: var(--tx-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--fast), border-color var(--fast);
    user-select: none;
}

.listitemClass:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.listitemClass:active {
    cursor: grabbing;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropright .dot-icon {
    height: 18px;
}

.dropright .dropdown-menu {
    top: 100% !important;
    right: 0;
    transform: none !important;
    left: auto !important;
}

.dropdown-menu {
    box-shadow: var(--shadow-lg);
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    min-width: 178px;
    animation: dropIn var(--fast) both;
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

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

.dropdown-menu .dropdown-item {
    font-weight: 500;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--tx-secondary);
    border-bottom: none;
    transition: all var(--fast);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-menu .dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.dropdown-menu .dropdown-item:last-child {
    border-bottom: 0;
}

.bg-darkblue {
    background: var(--tx-primary) !important;
}

.bg-green {
    background: var(--green) !important;
}

/* ============================================================
   SIDE TOGGLE HAMBURGER
   ============================================================ */
.side-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--sb-hover-sm);
    padding: 8px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    gap: 4px;
    width: 36px;
    height: 36px;
    transition: background var(--fast);
    flex-shrink: 0;
}

.side-toggle:hover {
    background: var(--sb-hover);
}

.side-toggle span {
    background: var(--sb-text);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    transition: all var(--normal);
    display: block;
}

.side-toggle span:nth-child(2) {
    width: 13px;
    align-self: flex-start;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    background: var(--sb-gradient);
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: var(--sb-width);
    max-width: 100%;
    overflow: hidden;
    transform: translateX(0);
    transition: width var(--normal), transform var(--normal);
    z-index: 200;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sb-shadow);
    border-right: 1px solid var(--sb-border);
}

.sidebar::-webkit-scrollbar {
    width: 3px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 99px;
    opacity: 0.7;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

.sidebar::-webkit-scrollbar-track {
    background: var(--sb-active-sub-bg);
    border-radius: 99px;
}

/* Side Head / Brand */
.sidebar .side-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}

.sidebar .side-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
}

.sb-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px var(--primary-glow);
}

.sb-brand-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.sidebar .side-logo h3 {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.sb-brand-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--sb-icon-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    margin-top: 2px;
}

/* Scrollable nav */
.sidebar .side-menu {
    padding: 8px 12px 24px;
    list-style: none;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--sb-active-sub-bg);
}

.sidebar .side-menu::-webkit-scrollbar {
    width: 3px;
}

.sidebar .side-menu::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 99px;
}

.sidebar .side-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

.sidebar .side-menu::-webkit-scrollbar-track {
    background: var(--sb-active-sub-bg);
    border-radius: 99px;
}

/* Section labels */
.partition {
    display: flex;
    align-items: center;
    padding: 20px 8px 7px;
    margin: 0;
    border-bottom: none;
    line-height: 1;
}

.partition span {
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    color: var(--sb-section);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0;
    white-space: nowrap;
    margin: 0;
}

/* Nav Items */
.sidebar .side-menu a {
    color: var(--sb-text);
    display: flex;
    padding: 10px 12px;
    position: relative;
    margin: 2px 0;
    align-items: center;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--r-sm);
    transition: all var(--fast);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar .side-menu a .menu-icon {
    margin-right: 11px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--sb-icon-muted);
    transition: color var(--fast);
    font-size: 14px !important;
}

.sidebar .side-menu .dropdown-menu a .submenu-icon {
    margin-right: 10px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    color: var(--sb-icon-muted);
    font-size: 12px !important;
    transition: color var(--fast);
}

.sidebar .side-menu a:hover {
    color: var(--sb-text-hover);
    background: var(--sb-hover-sm);
}

.sidebar .side-menu a:hover .menu-icon,
.sidebar .side-menu a:hover .submenu-icon {
    color: var(--sb-hover-icon);
}

/* Active state */
.sidebar .side-menu .active>a,
.sidebar .side-menu .side_line.active>a {
    background: var(--gradient-primary);
    color: var(--white-color);
    box-shadow: 0 4px 16px var(--primary-glow);
    font-weight: 600;
}

.sidebar .side-menu .active>a .menu-icon,
.sidebar .side-menu .side_line.active>a .menu-icon {
    color: var(--white-color) !important;
}

/* Remove old after-element active indicator */
.sidebar .side-menu .side_line.active a:after {
    content: none;
}

/* Dropdown caret */
.sidebar .side-menu .dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* opacity: 0.45; */
    font-size: 14px;
}

/* Sub-menu */
.sidebar .side-menu .dropdown-menu {
    position: relative !important;
    transform: none !important;
    box-shadow: none;
    float: none;
    background: transparent;
    margin-left: 14px;
    border: none;
    padding: 2px 0;
    animation: none;
    min-width: unset;
}

.sidebar .side-menu .dropdown-menu .dropdown-item {
    font-weight: 400;
    padding: 8px 10px 8px 12px;
    background: transparent !important;
    color: var(--sb-text);
    border-radius: var(--r-sm);
    font-size: 13px;
    transition: all var(--fast);
    margin: 1px 0;
    display: flex;
    align-items: center;
    border-left: 2px solid transparent;
    border-bottom: none;
}

.sidebar .side-menu .dropdown-menu .dropdown-item:hover {
    color: var(--sb-text-hover);
    background: var(--sb-item-hover) !important;
    border-left-color: var(--sb-active-line);
}

/* Active submenu item */
.sidebar .side-menu .side-submenu .active {
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--white-color);
    padding: 0;
    font-size: 14px;
}

.sidebar .side-menu .side-submenu .active a {
    background: var(--sb-active-sub-bg);
    color: var(--sb-active-text);
    border-left: 2px solid var(--primary-color);
    font-weight: 600;
}

.sidebar .side-menu .side-submenu .active a:hover {
    color: var(--sb-active-text);
}

.sidebar .side-menu .side-submenu a:hover {
    color: var(--sb-text-hover);
}

.sidebar .side-menu .side-submenu a {
    color: var(--sb-text);
    display: flex;
    padding: 8px 10px 8px 12px;
    position: relative;
    margin: 1px 0;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    border-radius: var(--r-sm);
    transition: all var(--fast);
    border-left: 2px solid transparent;
}

.sidebar .side-menu .side-submenu a:hover {
    background: var(--sb-item-hover);
    border-left-color: var(--sb-hover-line);
    color: var(--sb-text-hover);
}

/* Sidebar Footer */
.sb-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--sb-border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sb-footer i {
    color: var(--sb-section);
    font-size: 12px;
}

.sb-footer span {
    font-size: 11px;
    color: var(--sb-section);
    font-weight: 500;
}

/* Collapsed sidebar */
.sidebar.hide-sidebar {
    width: var(--sb-width-sm);
}

@media (min-width: 1024px) {
    .sidebar.hide-sidebar .side-menu .partition {
        display: none;
    }

    .sidebar.hide-sidebar .side-head {
        justify-content: center;
        padding: 18px 10px;
    }

    .sidebar.hide-sidebar .sb-brand-text {
        display: none;
    }

    .sidebar.hide-sidebar .side-logo {
        flex: 0;
        min-width: 0;
    }

    .sidebar.hide-sidebar .sb-footer span,
    .sidebar.hide-sidebar .sb-footer i:not(:first-child) {
        display: none;
    }

    .sidebar.hide-sidebar .sb-footer {
        justify-content: center;
    }

    .sidebar.hide-sidebar .side-menu a>span {
        display: none;
    }

    .sidebar.hide-sidebar .side-menu .active a:after {
        content: none;
    }

    .sidebar.hide-sidebar .side-menu a {
        margin: 3px auto;
        padding: 12px;
        height: 46px;
        width: 46px;
        justify-content: center;
        gap: 0;
    }

    .sidebar.hide-sidebar .side-menu a .menu-icon {
        margin-right: 0;
    }

    .sidebar.hide-sidebar .side-menu a.dropdown-toggle:after {
        content: none;
    }

    .sidebar.hide-sidebar .side-menu .dropdown-menu {
        margin-left: 0;
        min-width: unset;
        padding: 0;
    }

    .sidebar.hide-sidebar .side-menu .dropdown-menu a {
        padding: 0;
        justify-content: center;
    }

    .sidebar.hide-sidebar .side-menu .dropdown-menu a svg {
        margin-right: 0;
    }
}

@media (min-width: 1680px) {
    :root {
        --sb-width: 280px;
    }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    background: var(--surface-glass);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    z-index: 100;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    border-bottom: 1px solid var(--header-border-alpha);
    box-shadow: var(--header-shadow);
    gap: 16px;
}

@media (min-width: 1680px) {
    .header {
        padding: 0 36px;
        height: 68px;
    }
}

.header .title-control {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

/* Mobile toggle in header */
.header .title-control .side-toggle {
    display: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.header .title-control .side-toggle span {
    background: var(--tx-secondary);
}

.header .title-control .side-toggle:hover {
    background: var(--bg);
}

/* Logo in header (mobile only) */
.header .side-logo {
    display: none;
}

.header .side-logo h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.3px;
}

/* Page title */
.header .page-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--tx-primary);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dividers */
.header-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    flex-shrink: 0;
    border-radius: 1px;
}

.head-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}

/* Header right controls */
.header .head-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Individual header action buttons */
.header .head-control .head-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    padding: 0;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: all var(--fast);
    margin-left: 0;
    color: var(--tx-secondary);
    cursor: pointer;
}

.header .head-control .head-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.header .head-control .head-btn i {
    font-size: 15px !important;
    margin: 0 !important;
}

.header .head-control .head-btn .fa-2xl,
.header .head-control .head-btn .fa-2x,
.header .head-control .head-btn .avatar-img {
    font-size: 15px !important;
}

/* Profile button */
.head-profile {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: all var(--fast);
    cursor: pointer;
}

.head-profile:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.head-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Profile dropdown user info */
.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
}

.dropdown-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.dropdown-user-details p {
    margin: 0;
    line-height: 1.3;
}

.dropdown-username {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tx-primary);
}

.dropdown-user-role {
    font-size: 11px;
    color: var(--tx-muted);
    font-weight: 500;
}

/* Danger dropdown item */
.dropdown-item-danger {
    color: var(--red) !important;
}

.dropdown-item-danger:hover {
    background: var(--red-bg) !important;
    color: var(--red) !important;
}

/* ============================================================
   RIGHT CONTENT / LAYOUT
   ============================================================ */
.right-content {
    margin-left: var(--sb-width);
    transition: margin-left var(--normal);
    min-height: 100vh;
    background: var(--bg);
}

.right-content.right-content-0 {
    margin-left: var(--sb-width-sm);
}

.right-content.right-content-0 .header .title-control .side-toggle {
    display: none;
}

@media (min-width: 1680px) {
    .right-content {
        margin-left: 280px;
    }
}

.avatar-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ============================================================
   BODY CONTENT
   ============================================================ */
.body-content {
    padding: 24px 28px;
}

/* Mobile page title */
.page-title-sm {
    display: none;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--tx-primary);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-left {
    flex: 1;
    min-width: 0;
}

.page-header-title {
    display: none;
    font-size: 22px;
    font-weight: 800;
    color: var(--tx-primary);
    margin: 5px 0 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.page-header-right {
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE BREADCRUMB / PAGE ACTION ROW
   Usage   : add `.responsive-crumb-row` to the `.row` wrapping a
             breadcrumb column (col-sm-10) and a page action
             button column (col-sm-2, justify-content-end).
   Fixes   : the action button (e.g. "Back to List") getting its
             label clipped on tablet/mobile because the fixed
             col-sm-2 (~16.67%) column is narrower than its label.
             The button column now sizes to its own content and
             the row wraps instead of clipping.
   ============================================================ */
.responsive-crumb-row {
    flex-wrap: wrap;
    row-gap: 10px;
}

.responsive-crumb-row > .col-sm-10 {
    flex: 1 1 260px;
    max-width: 100%;
    min-width: 0;
}

.responsive-crumb-row > .col-sm-2 {
    flex: 0 0 auto;
    max-width: 100%;
    width: auto;
}

/* ============================================================
   FULL-WIDTH TOGGLE
   Usage : add `.is-full-width` (via JS) to a form's main
           content column (col-md-9) whenever its sibling
           sidebar column (e.g. an image upload box shown only
           for the "image" upload type) is hidden. Without this
           the main column stays pinned at 75% width, leaving
           dead space where the sidebar used to be and making
           anything inside it (Summernote, inputs, etc.) render
           narrower than the available space on every screen size.
   ============================================================ */
.col-md-9.is-full-width {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ============================================================
   CUSTOM BORDER CARD
   ============================================================ */
.custom-border-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--normal);
}

.custom-border-card:hover {
    box-shadow: var(--shadow-md);
}

.custom-border-card .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tx-primary);
    letter-spacing: -0.1px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    padding: 0 0 14px;
    margin-bottom: 16px;
}

/* Red accent bar — auto-injected, no extra HTML needed */
.custom-border-card .card-header::before {
    content: '';
    width: 3.5px;
    height: 18px;
    background: var(--primary-color);
    border-radius: var(--r-full);
    flex-shrink: 0;
}

.custom-border-card .card-body {
    padding: 16px 0 8px;
}

/* ============================================================
   EXPORT TOOLBAR
   ============================================================ */
.export-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}

.export-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--tx-secondary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.export-info i {
    flex-shrink: 0;
    font-size: 15px;
}

.export-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: all var(--fast);
    cursor: pointer;
}

.export-btn-excel {
    background: var(--green-bg);
    color: var(--green-dark);
    border-color: var(--green-border);
}

.export-btn-excel:hover {
    background: var(--green);
    color: var(--white-color);
    border-color: var(--green);
}

.export-btn-csv {
    background: var(--blue-bg);
    color: var(--blue-dark);
    border-color: var(--blue-border);
}

.export-btn-csv:hover {
    background: var(--blue);
    color: var(--white-color);
    border-color: var(--blue);
}

.export-btn-pdf {
    background: var(--red-bg);
    color: var(--red-dark);
    border-color: var(--red-border);
}

.export-btn-pdf:hover {
    background: var(--red);
    color: var(--white-color);
    border-color: var(--red);
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    flex: 1 1 200px;       /* grows to fill space the filter group leaves */
    min-width: 200px;
    transition: all var(--fast);
}

.filter-search:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.filter-search i {
    color: var(--tx-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.filter-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;          /* allows input to shrink inside flex */
    font-size: 13.5px;
    color: var(--tx-primary);
    background: transparent;
    font-family: var(--font);
}

.filter-input::placeholder {
    color: var(--tx-muted);
}

/* Filter group: honors the inline width you give it (25%, 50%, etc.) */
.filter-selects {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;        /* <-- width comes from inline style="width:..." */
    min-width: 0;
    flex-wrap: nowrap;     /* filters stay on one row */
}

/* Every filter splits the group width equally */
.filter-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    flex: 1 1 0;           /* equal share of the group, no matter how many */
    min-width: 0;          /* prevents content from forcing overflow */
    transition: border-color var(--fast);
}

.filter-select-wrap:focus-within {
    border-color: var(--primary-color);
}

.filter-select-wrap label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tx-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;        /* keep the label readable, don't crush it */
    margin: 5px 0 0 0;
}

.filter-select {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--tx-primary);
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    flex: 1 1 0;           /* select fills the remaining wrap width */
    min-width: 0;          /* allows it to shrink */
    width: 100%;
}

/* Old page-search kept for backward compat on other module pages */
.page-search {
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 14px;
    gap: 10px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.page-search .input-group {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    flex: 1;
    min-width: 180px;
    transition: all var(--normal);
}

.page-search .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.page-search .input-group-text,
.page-search .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13.5px;
    color: var(--tx-primary);
    font-family: var(--font);
}

.page-search .input-group-text img {
    width: 18px;
}

.page-search .input-group-text i {
    color: var(--tx-muted);
    font-size: 13px;
}

.page-search .form-control::placeholder {
    color: var(--tx-muted);
}

.page-search .sorting {
    display: flex;
    align-items: center;
    background: var(--surface);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    gap: 8px;
    min-width: 150px;
    transition: border-color var(--fast);
}

.page-search .sorting:focus-within {
    border-color: var(--primary-color);
}

.page-search .sorting label {
    min-width: 52px;
    margin: 0;
    font-weight: 600;
    color: var(--tx-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.page-search .sorting .form-control {
    border: 0;
    box-shadow: none;
    padding: 3px 6px;
    font-size: 13.5px;
    background: transparent;
    color: var(--tx-primary);
    font-family: var(--font);
    font-weight: 500;
}

.page-search .btn-default {
    font-size: 12.5px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-responsive {
    border-radius: var(--r-md);
    overflow: hidden;
    /* border: 1px solid var(--border); */
}

.table {
    border-color: var(--border);
    color: var(--tx-primary);
    min-width: 650px;
    margin: 0;
    font-family: var(--font);
}

.table thead th {
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-top: 0;
    border-bottom: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--tx-secondary);
    padding: 12px 14px;
    white-space: nowrap;
    vertical-align: middle;
}

.table td {
    font-size: 13.5px;
    border-bottom: 1px solid var(--border);
    border-top: 0;
    vertical-align: middle;
    padding: 12px 14px;
    color: var(--tx-primary);
    font-weight: 400;
}

.table tbody tr { transition: background var(--fast); }
.table tbody tr:hover { background: var(--table-hover) !important; }
.table tbody tr:last-child td { border-bottom: 0; }

.table-striped tbody tr:nth-of-type(odd)  { background-color: transparent; }
.table-striped tbody tr:nth-of-type(even) { background-color: var(--surface-2); }

.table .avatar-img {
    height: 42px;
    width: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    display: block;
    margin: 0 auto;
}

.table .clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 220px;
}

.table .btn {
    padding: 5px 8px;
    background: transparent;
    margin: 0 2px;
    border-radius: var(--r-sm);
    transition: background var(--fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.table .btn:hover { background: var(--bg); }
.table .btn img  { width: 15px; }

/* ============================================================
   ACTION BUTTONS (edit / delete / status)
   ============================================================ */
.edit-btn {
    border: 1.5px solid transparent;
    cursor: pointer;
    outline: none;
    color: var(--edit-color);
    background: var(--edit-bg);
    padding: 18px 10px;
    border-radius: var(--r-sm);
    transition: all var(--fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.edit-btn:hover {
    color: var(--edit-color);
    border-color: var(--edit-color);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.edit-btn:focus {
    outline: none;
    box-shadow: none;
}

.delete-btn {
    border: 1.5px solid transparent;
    cursor: pointer;
    outline: none;
    color: var(--primary-color) !important;
    background: var(--red-bg);
    padding: 18px 10px;
    border-radius: var(--r-sm);
    transition: all var(--fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.delete-btn:hover {
    border-color: var(--red);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.delete-btn:focus {
    outline: none;
    box-shadow: none;
}

.status-btn {
    border: 1.5px solid transparent;
    cursor: pointer;
    outline: none;
    color: var(--edit-color);
    background: var(--edit-bg);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    transition: all var(--fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.status-btn:hover {
    border-color: var(--edit-color);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.status-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Show / Hide pill buttons */
.show-btn {
    background: var(--green-bg);
    color: var(--green-dark);
    padding: 5px 18px;
    font-size: 12px;
    border-radius: var(--r-full);
    font-weight: 700;
    border: 1.5px solid var(--green-border);
    outline: none;
    transition: all var(--fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.show-btn:hover {
    background: var(--green);
    color: var(--white-color);
    border-color: var(--green);
}

.hide-btn {
    background: var(--red-bg);
    color: var(--red-dark);
    padding: 5px 18px;
    font-size: 12px;
    border-radius: var(--r-full);
    font-weight: 700;
    border: 1.5px solid var(--red-border);
    outline: none;
    transition: all var(--fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hide-btn:hover {
    background: var(--red);
    color: var(--white-color);
    border-color: var(--red);
}

.show-btn:focus {
    border: none !important;
    outline: none !important;
}
.hide-btn:focus {
    border: none !important;
    outline: none !important;
}

.btn-show {
    background: var(--green-bg);
    color: var(--green-dark);
    font-weight: 700;
    padding: 5px 12px;
    border: 1.5px solid var(--green-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--fast);
    font-size: 12.5px;
}

.btn-hide {
    background: var(--red-bg);
    color: var(--red-dark);
    font-weight: 700;
    padding: 5px 12px;
    border: 1.5px solid var(--red-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--fast);
    font-size: 12.5px;
}

.btn-yes:focus,
.btn-show:focus,
.btn-hide:focus {
    outline: none;
}

.btn-show:hover {
    background: var(--green);
    color: var(--white-color);
    border-color: var(--green);
}

.btn-hide:hover {
    background: var(--red);
    color: var(--white-color);
    border-color: var(--red);
}

/* ============================================================
   DATATABLES CONTROLS
   ============================================================ */
table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:before { content: "↑"; }

table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:after  { content: "↓"; }

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 6px 14px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--tx-secondary);
    gap: 8px;
    transition: border-color var(--fast);
}
div.dataTables_wrapper div.dataTables_length label:focus-within,
div.dataTables_wrapper div.dataTables_filter label:focus-within {
    border-color: var(--primary-color);
}

div.dataTables_wrapper div.dataTables_length label .form-control,
div.dataTables_wrapper div.dataTables_filter label .form-control {
    padding: 4px 10px;
    text-align: center;
    margin: 0 6px;
    border-radius: var(--r-xs);
}
div.dataTables_wrapper div.dataTables_length label input.form-control,
div.dataTables_wrapper div.dataTables_filter label input.form-control {
    margin-right: 0;
    text-align: left;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child,
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
    overflow: auto;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    padding: 4px;
    border: 1px solid var(--border);
    display: inline-flex;
    border-radius: var(--r-md);
    margin: 24px auto 0;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    gap: 2px;
}

.pagination .page-link {
    border: 0;
    height: 34px;
    width: 34px;
    background: transparent !important;
    margin: 0;
    border-radius: var(--r-sm) !important;
    color: var(--tx-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--fast);
}

.pagination .page-link:hover {
    background: var(--bg) !important;
    color: var(--tx-primary);
}

.pagination .active .page-link {
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
    box-shadow: 0 2px 8px var(--primary-glow);
}

.pagination .page-link .right-arrow {
    transform: rotate(180deg);
}

.pagination .page-link .dots {
    font-weight: 700;
    margin-top: -4px;
}

.pagination .arrow-icon {
    height: 20px;
    width: 20px;
    background-image: url("../../assets/imgs/left-arrow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px;
}

/* ============================================================
   BOX TITLE
   ============================================================ */
.box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1.5px solid var(--border);
    padding-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 8px;
    gap: 8px;
}

.box-title .title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--tx-primary);
}

/* ============================================================
   AVATAR CONTROL
   ============================================================ */
.avatar-control {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-control .avatar-img {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.dot {
    height: 8px;
    width: 8px;
    background: var(--red);
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

/* ============================================================
   VIDEO CARD / ARTICLE CARD
   ============================================================ */
.video-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg);
    margin: 12px 0;
    transition: all var(--normal);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    padding: 0;
}

.video-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: transparent !important;
}

.video-card:hover .play-btn,
.video-card:hover .overlap-control,
.video-card:hover .play-btn-top {
    display: block;
}

.video-card .card-img-top {
    border-radius: 0;
    height: 160px;
    object-fit: cover;
    width: 100%;
}

.video-card .card-img-top-headline {
    border-radius: 0;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.video-card .play-btn {
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.video-card .card-body {
    padding: 12px 14px !important;
    position: relative;
}

.video-card .card-body .dropdown {
    position: absolute;
    right: 10px;
    top: 10px;
}

.video-card .card-body .dropdown .dropdown-menu {
    top: auto !important;
    bottom: 100%;
}

.video-card .card-body .dropdown .head-btn {
    padding: 5px;
    transform: rotate(90deg);
}

.video-card .card-body .dropdown .dropdown-item {
    font-weight: 500;
}

.video-card .card-body .dropdown .dropdown-item img {
    height: 16px;
    width: 16px;
    object-fit: contain;
    margin-right: 8px;
}

.video-card .card-body .card-title {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 100px;
    min-height: 42px;
    color: var(--tx-primary);
    line-height: 1.45;
}

.video-card .card-body .card-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.video-card .card-body .card-details p {
    margin: 0;
    font-weight: 500;
    color: var(--tx-secondary);
    font-size: 12px;
}

.video-card .card-body .card-details p.tag {
    color: var(--tx-muted);
}

.video-card .play-btn-top {
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    padding: 0;
    display: none;
}

.video-card .play-btn-top img {
    width: 40px;
}

.video-card .overlap-control {
    position: absolute;
    right: 10px;
    bottom: -4px;
    display: none;
}

.video-card .overlap-control .btn {
    background: var(--edit-bg);
    color: var(--edit-color);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    font-size: 12px;
}

.video-card .overlap-control .btn .dot-icon {
    height: 14px;
    width: 14px;
    object-fit: contain;
}

/* Article Card */
.article-card {
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all var(--normal);
    position: relative;
}

.article-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: transparent;
}

.card-image-container {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg);
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--slow);
}

.article-card:hover .card-image {
    transform: scale(1.06);
}

.action-overlay {
    position: absolute;
    bottom: 12px;
    right: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: all var(--fast);
}

.article-card:hover .action-overlay {
    opacity: 1;
    transform: translateY(0);
}

.action-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    background: var(--edit-bg);
    color: var(--edit-color);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-md);
    transition: all var(--fast);
    font-size: 12px;
}

.action-btn:hover {
    background: var(--edit-color);
    color: var(--white-color);
    transform: scale(1.08);
}

.video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-dark);
    opacity: 0;
    transition: opacity var(--fast);
}

.article-card:hover .video-overlay {
    opacity: 1;
}

.play-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--white-50);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transition: all var(--fast);
    animation: scaleIn var(--fast) both;
}

.play-btn:hover {
    background: var(--white-color);
    transform: scale(1.1);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.82);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.card-content {
    padding: 14px 16px;
}

.article-card .card-title {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tx-primary);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 100px;
    min-height: 58px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--tx-muted);
}

.engagement-stats {
    display: flex;
    gap: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   STAT CARDS (custom-card)
   ============================================================ */
.custom-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--normal), transform var(--normal), border-color var(--normal);
}

.custom-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.custom-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.custom-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    gap: 16px;
}

.custom-card .card-body h3 {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--tx-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.custom-card .card-body span {
    font-size: 0.75rem;
    color: var(--tx-muted);
    font-weight: 600;
    display: block;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Icon box */
.card-icon-primary {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
    transition: background var(--fast), color var(--fast);
}

/* Primary (default) — covers card-color-primary backward compat */
.custom-card.card-color-primary:hover  { border-color: var(--primary-light); }

/* Amber */
.custom-card.card-amber::before        { background: var(--amber); }
.custom-card.card-amber:hover          { border-color: var(--amber-border); }
.custom-card.card-amber .card-icon-primary { background: var(--amber-bg); color: var(--amber); }

/* Blue */
.custom-card.card-blue::before         { background: var(--blue); }
.custom-card.card-blue:hover           { border-color: var(--blue-border); }
.custom-card.card-blue .card-icon-primary  { background: var(--blue-bg); color: var(--blue); }

/* Green */
.custom-card.card-green::before        { background: var(--green); }
.custom-card.card-green:hover          { border-color: var(--green-border); }
.custom-card.card-green .card-icon-primary { background: var(--green-bg); color: var(--green); }

/* Purple */
.custom-card.card-purple::before       { background: var(--purple); }
.custom-card.card-purple:hover         { border-color: var(--purple-border); }
.custom-card.card-purple .card-icon-primary { background: var(--purple-bg); color: var(--purple); }

/* ============================================================
   DASHBOARD CATEGORY / HASHTAG
   ============================================================ */
.category-box {
    padding: 20px;
    background: var(--sb-bg);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.category-box .f600 {
    font-weight: 600;
}

.category-box .box-border-0 {
    border: 0;
    padding-bottom: 0;
}

.category-image {
    max-height: 105px;
    height: 105px;
    width: 100%;
    border-radius: var(--r-sm);
    filter: blur(1.2px);
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    color: var(--white-color);
}

.hashtag-card {
    padding: 12px 16px;
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 15px;
    font-weight: 600;
    background: var(--sb-bg);
    color: var(--sb-text);
    transition: border-left-width var(--fast);
}

.hashtag-card:hover {
    border-left-width: 6px;
}

.hashtag-card>.row {
    margin: 0;
}

.hashtag-card>.row .col,
.hashtag-card>.row .col-2,
.hashtag-card>.row .col-10 {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: start;
}

/* ============================================================
   SUMMARY TABLE CARD
   ============================================================ */
.summary-table-card .border-card {
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    font-size: 13px;
    background: var(--surface);
    transition: all var(--fast);
}

.summary-table-card .border-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.summary-table-card .border-card>.row {
    margin: 0;
}

.summary-table-card .border-card>.row .col,
.summary-table-card .border-card>.row .col-1,
.summary-table-card .border-card>.row .col-2,
.summary-table-card .border-card>.row .col-12 {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-table-card .avatar-control {
    min-width: 120px;
    font-weight: 600;
}

.summary-table-card .avatar-control img {
    margin-right: 8px;
}

.summary-table-card .price {
    color: var(--red);
    font-weight: 700;
}

/* ============================================================
   CUSTOM TABS
   ============================================================ */
.custom-tabs {
    margin: 20px 0;
    background: var(--sb-bg);
    border-radius: var(--r-full);
    padding: 5px 10px;
    display: flex;
}

.custom-tabs li.nav-item {
    flex: 1;
    text-align: center;
}

.custom-tabs .nav-link {
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-text);
    padding: 8px 12px;
    transition: all var(--fast);
    white-space: nowrap;
}

.custom-tabs .nav-link:hover {
    color: var(--white-color);
}

.custom-tabs .nav-link.active {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.inline-tabs {
    display: inline-flex;
    position: relative;
    z-index: 2;
    background: var(--surface-2);
    border-radius: var(--r-full);
    padding: 4px;
    border: 1.5px solid var(--border);
    gap: 2px;
    flex-wrap: wrap;
}

.inline-tabs li.nav-item {
    flex: none;
}

.inline-tabs .nav-link {
    padding: 8px 22px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-secondary);
    transition: all var(--fast);
    white-space: nowrap;
}

.inline-tabs .nav-link:hover {
    color: var(--tx-primary);
    background: var(--black-25);
}

.inline-tabs .nav-link.active {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.inline-tabs .nav-link.active:hover {
    color: var(--white-color);
    background: var(--primary-dark);
}

.artist-row {
    margin: 0 -10px;
}

.artist-row .col-6 {
    padding: 0 10px;
}

/* ============================================================
   VIDEO BOX
   ============================================================ */
.video-box {
    padding: 22px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.video-box .f600 {
    font-weight: 600;
}

.video-box .box-border-0 {
    border: 0;
    padding-bottom: 0;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group label {
    font-weight: 600;
    color: var(--tx-secondary);
    font-size: 12px;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.form-control,
.custom-select {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    height: auto !important;
    color: var(--tx-primary);
    background: var(--surface);
    transition: all var(--fast);
    font-family: var(--font);
}

.form-control:focus,
.custom-select:focus {
    box-shadow: 0 0 0 3px var(--primary-light);
    border-color: var(--primary-color);
    background: var(--surface);
    outline: none;
    color: var(--tx-primary);
}

.form-control::placeholder {
    color: var(--tx-muted);
}

.file-control {
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: var(--r-lg);
    cursor: pointer;
    border: 2px dashed var(--border);
    background: var(--surface-2);
    transition: all var(--fast);
}

.file-control:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.file-control span {
    opacity: 0.65;
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--tx-secondary);
}

.thumbnail-img {
    position: relative;
    border: 1.5px solid var(--border);
    display: inline-block;
    height: 100px;
    width: 130px;
    border-radius: var(--r-sm);
    padding: 4px;
}

.thumbnail-img img {
    border-radius: 6px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.thumbnail-img .close {
    position: absolute;
    top: 5px;
    right: 8px;
    color: var(--white-color);
    opacity: 1;
    font-weight: 300;
}

/* ─── Radio Group — pill-style toggle (applies across all modules) ─── */
.radio-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.radio-group .custom-control {
    padding-left: 0;
    margin-right: 0;
}

.radio-group .custom-control-label {
    position: relative;
    margin-bottom: 0;
    background: var(--surface);
    padding: 7px 20px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-secondary);
    border: 1.5px solid var(--border);
    transition: background var(--fast), color var(--fast), border-color var(--fast), box-shadow var(--fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

/* suppress Bootstrap's radio dot indicator entirely */
.radio-group .custom-control-label::before,
.radio-group .custom-control-label::after {
    display: none !important;
}

.radio-group .custom-control-label:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.radio-group .custom-control-input:checked ~ .custom-control-label {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.radio-group .custom-control-input:checked ~ .custom-control-label:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 3px 12px var(--primary-glow);
}

.custom-control .custom-control-label::before {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
}

.custom-control .custom-control-input:checked~.custom-control-label::after {
    border-radius: 4px;
    background-color: var(--primary-color);
}

.custom-control.custom-radio .custom-control-label::before,
.custom-control.custom-radio .custom-control-label:after {
    border-radius: 50% !important;
}

.border-bottom {
    border-color: var(--border) !important;
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.toggle-input:checked+.toggle-label {
    background-color: var(--green);
}

.toggle-label {
    display: inline-block;
    width: 50px;
    height: 26px;
    position: relative;
    background: var(--border-strong);
    border-radius: 26px;
    cursor: pointer;
    transition: background var(--fast);
}

.toggle-input:checked+.toggle-label::after {
    transform: translateX(24px);
}

.toggle-label::after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: var(--white-color);
    border-radius: 50%;
    transition: transform var(--fast);
    box-shadow: 0 1px 4px var(--overlay-shadow);
}

.toggle-input {
    display: none;
}

.custom-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--primary-color);
}

/* Permission Cards */
.permission-card {
    border: 1.5px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--fast);
    height: 100%;
    background: var(--surface);
}

.permission-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 6px;
}

.card-title-group {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--tx-primary);
    gap: 10px;
}

.form-check-label {
    font-size: 14.5px;
    font-weight: 400;
    cursor: pointer;
    color: var(--tx-primary);
}

.form-check-input[type="radio"] {
    width: 17px;
    height: 17px;
    margin-top: 4px;
    accent-color: var(--primary-color);
}

.switch-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    transition: background var(--fast);
    border-radius: var(--r-sm);
}

.switch-wrapper:last-child {
    border-bottom: none;
}

.switch-wrapper:hover {
    background: var(--surface-2);
}

.custom-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.custom-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-strong);
    transition: .3s;
    border-radius: 24px;
}

.switch-track:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--white-color);
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px var(--overlay-shadow);
}

input:checked+.switch-track {
    background: var(--primary-color);
}

input:checked+.switch-track:before {
    transform: translateX(20px);
}

/* ============================================================
   LANDSCAPE CARD
   ============================================================ */
/* ============================================================
   LANDSCAPE CARD — vertical media card (custom ads & reusable)
   ============================================================ */
.landscape-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--normal);
    position: relative;
}

.landscape-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: transparent;
}

/* Image container — 16:9 aspect ratio */
.landscape-card-image-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg);
}

.wallet-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--slow);
}

.landscape-card:hover .wallet-image {
    transform: scale(1.05);
}

/* Content area */
.landscape-card-body {
    padding: 14px 16px;
}

.landscape-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tx-primary);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.landscape-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tx-secondary);
    font-size: 12px;
    margin-bottom: 8px;
}

/* Removed dashed border — kept selector for backward compat */
.landscape-card-border {
    display: none;
}

/* ─── Ads Type Badge (overlay on image) ─── */
.ads-type-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-full);
    letter-spacing: 0.3px;
    line-height: 1.6;
    pointer-events: none;
}

.ads-type-badge--banner {
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid var(--blue-border);
}

.ads-type-badge--interstitial {
    background: var(--amber-bg);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.ads-type-badge--reward {
    background: var(--purple-bg);
    color: var(--purple);
    border: 1px solid var(--purple-border);
}

/* ─── Ads Action Overlay (hover-revealed, top-right) ─── */
.ads-action-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(10px);
    transition: all var(--fast);
}

.landscape-card:hover .ads-action-overlay {
    opacity: 1;
    transform: translateX(0);
}

/* Delete variant for action-btn */
.action-btn--delete {
    background: var(--red-bg);
    color: var(--red-dark);
    border: none;
}

.action-btn--delete:hover {
    background: var(--red);
    color: var(--white-color);
}

/* ============================================================
   ADD VIDEO BUTTON
   ============================================================ */
.add-video-btn {
    height: calc(100% - 30px);
    background: var(--surface-2);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 15px 0;
    width: 100%;
    border-radius: var(--r-lg);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    padding: 25px;
    color: var(--tx-secondary) !important;
    transition: all var(--fast);
}

.add-video-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    background: var(--primary-light);
}

.add-video-btn .icon {
    margin-bottom: 12px;
}

/* ============================================================
   LOADER
   ============================================================ */
#dvloader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.88;
    background: var(--overlay-loader);
    backdrop-filter: blur(6px);
    z-index: 9999;
    text-align: center;
}

#dvloader img {
    position: absolute;
    top: 35%;
    left: 45%;
    z-index: 100;
}

/* ============================================================
   UPLOAD BUTTON
   ============================================================ */
.upload-btn {
    font-weight: 700;
    border: none;
    color: var(--white-color) !important;
    background: var(--primary-color);
    padding: 7px 18px;
    outline: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 13.5px !important;
    transition: all var(--fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.upload-btn:hover {
    background: var(--primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.cart-bg {
    background: var(--surface);
}

/* ============================================================
   IMPORT FILE / COLOR PICKER
   ============================================================ */
.import-file {
    background: var(--surface-2);
    color: var(--tx-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
}

.import-file::file-selector-button {
    border-radius: var(--r-sm);
    background: var(--primary-color);
    color: var(--white-color);
    border: none;
    height: 36px;
    cursor: pointer;
    padding: 0 14px;
    font-weight: 600;
    font-size: 12.5px;
    transition: background var(--fast);
}

.import-file::file-selector-button:hover {
    background: var(--primary-dark);
}

.colorpicker-component {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color var(--fast);
}

.colorpicker-component:focus-within {
    border-color: var(--primary-color);
}

.colorpicker {
    border: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 2px;
    margin: 0;
}

.hexcolor {
    border: none;
    padding: 10px 12px;
    width: 110px;
    outline: none;
    font-size: 13px;
    color: var(--tx-primary);
    background: var(--surface);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.left-caption {
    height: 100%;
    position: relative;
}

.left-caption .bg-img {
    height: 100%;
    width: 100%;
    object-fit: fill;
}

.left-caption .caption {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--overlay-caption);
    color: var(--white-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px;
}

.left-caption .caption .text {
    margin-top: 20px;
    font-size: 15px;
    line-height: 26px;
}

.login-bg {
    min-height: 100vh;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding-bottom: 20px;
    display: flex;
}

.login-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

@media (max-height: 600px) {
    .login-bg {
        justify-content: flex-start;
    }
}

.app-logo img {
    width: 170px;
    margin: 16px 0 20px;
}

.app-login-box {
    max-width: 420px;
    width: 92%;
    padding: 38px;
    background: var(--login-box-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--r-xl);
    border: 1px solid var(--white-12);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 1;
    color: var(--white-color);
}

.app-login-box .form-group label {
    color: var(--white-65);
}

.app-login-box .form-control {
    background: var(--white-10);
    border-color: var(--white-15);
    color: var(--white-color);
}

.app-login-box .form-control::placeholder {
    color: var(--white-38);
}

.app-login-box .form-control:focus {
    background: var(--white-16);
    border-color: var(--white-45);
    box-shadow: 0 0 0 3px var(--white-08);
}

/* ============================================================
   INSTALLATION PAGES
   ============================================================ */
.list-group-item {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    background: transparent;
    border-color: var(--border);
}

.dropdown-menu,
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.install-bg-img {
    text-align: center;
}

.install-bg-img img {
    max-width: 100%;
    height: auto;
}

.install-title {
    font-size: 44px;
    font-weight: 800;
    color: var(--tx-primary);
    letter-spacing: -1px;
}

.install_sub_title {
    font-size: 21px;
    color: var(--tx-secondary);
}

.install_text {
    font-size: 17px;
    margin-bottom: 26px;
    margin-top: 26px;
    color: var(--tx-secondary);
}

.install-list li {
    font-size: 17px;
    margin-bottom: 10px;
    color: var(--tx-secondary);
}

.install-list li:hover {
    background: transparent;
    color: var(--primary-color);
}

.install-card {
    margin-left: 80px;
    margin-right: 80px;
}

@media (max-width: 1024px) {
    .install-bg-img {
        display: none !important;
    }
}

.install-footer {
    padding: 20px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: var(--white-color);
    background: var(--primary-color);
}

.install-footer a {
    color: var(--white-82);
    margin: 0 14px;
    font-size: 15px;
    transition: color var(--fast);
}

.install-footer a:hover {
    color: var(--white-color);
}

.install-social-icons {
    margin-top: 10px;
}

.install-social-icons a {
    color: var(--white-78);
    font-size: 20px;
    transition: color var(--fast);
}

.install-social-icons a:hover {
    color: var(--white-color);
}

.install-footer .content {
    position: relative;
    z-index: 1;
}

.btn-install {
    background: var(--primary-color);
    border-radius: var(--r-sm);
    font-size: 16px;
    font-weight: 700;
    color: var(--white-color);
    border: none;
    transition: all var(--normal);
    padding: 12px 40px;
}

.btn-install:hover {
    background: var(--primary-dark);
    color: var(--white-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-install-cancel {
    background: var(--tx-primary);
    border-radius: var(--r-sm);
    font-size: 16px;
    font-weight: 700;
    color: var(--white-color);
    border: none;
    transition: all var(--normal);
    padding: 12px 40px;
}

.btn-install-cancel:hover {
    background: var(--sb-bg-2);
    color: var(--white-color);
}

/* ============================================================
   FILEPOND / GALLERY
   ============================================================ */
.filepond--list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filepond--item {
    width: 120px;
    height: auto;
}

.filepond--file {
    color: var(--tx-primary) !important;
}

.filepond--credits {
    display: none !important;
}

.remove-btn {
    position: absolute;
    top: 1px;
    right: 0;
    background: var(--login-box-bg);
    color: var(--white-color);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    transition: background var(--fast);
}

.remove-btn:hover {
    background: var(--red);
}
#existing-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.existing-img {
    position: relative;
    width: 120px;
    height: 100px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}

.existing-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   AVATAR UPLOAD
   ============================================================ */
.avatar-upload {
    position: relative;
    max-width: 205px;
}

.avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
}

.avatar-edit input {
    display: none;
}

.avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 125px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-weight: normal;
    transition: all var(--fast);
}

.avatar-edit input+label:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.avatar-edit input+label:after {
    content: "\f0ee";
    font-family: 'FontAwesome';
    color: var(--tx-secondary);
    position: absolute;
    top: 130px;
    left: 0;
    right: 30px;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
}

.avatar-upload .avatar-preview>img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--slow);
    cursor: pointer;
    border-radius: 10px;
}

.avatar-upload .avatar-preview>img:hover {
    transform: scale(1.05);
}

.avatar-upload-landscape {
    position: relative;
    max-width: 265px;
}

.avatar-edit-landscape {
    position: absolute;
    right: 0;
    bottom: -20px;
    z-index: 1;
}

.avatar-edit-landscape input {
    display: none;
}

.avatar-edit-landscape input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 125px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-weight: normal;
    transition: all var(--fast);
}

.avatar-edit-landscape input+label:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.avatar-edit-landscape input+label:after {
    content: "\f0ee";
    font-family: 'FontAwesome';
    color: var(--tx-secondary);
    position: absolute;
    top: 130px;
    left: 0;
    right: 30px;
    text-align: center;
    margin: auto;
}

.avatar-upload-landscape .avatar-preview-landscape {
    width: 220px;
    height: 120px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
}

.avatar-upload-landscape .avatar-preview-landscape>img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--slow);
    cursor: pointer;
    border-radius: 10px;
}

.avatar-upload-landscape .avatar-preview-landscape>img:hover {
    transform: scale(1.05);
}

/* ============================================================
   IMG UPLOAD COMPONENT
   Variants  : .img-upload (portrait 140×140)
             · .img-upload--landscape (224×126)
   JS hooks  : .image-upload-wrapper · .drop-area
             · input[type="file"] · img   (no JS changes needed)

   State logic (pure CSS, no JS):
     img has NO src attr  → empty state visible, overlay hidden
     img HAS src attr     → image visible, empty state hidden,
                            overlay appears on hover/drag
   ============================================================ */

/* ─── Wrapper ─── */
.img-upload {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ─── Drop zone ─── */
.img-upload .drop-area {
    position: relative;
    display: block;
    width: 140px;
    height: 140px;
    border-radius: var(--r-lg);
    border: 2px dashed var(--border);
    background: var(--surface-2);
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}

/* Landscape variant */
.img-upload--landscape .drop-area {
    width: 224px;
    height: 126px;
    border-radius: var(--r-md);
}

/* Hover + drag-active */
.img-upload .drop-area:hover,
.img-upload .drop-area.dragover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ─── Empty state (no image selected yet) ─── */
.img-upload__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    pointer-events: none;
    transition: opacity var(--fast);
}

.img-upload__empty i {
    font-size: 24px;
    color: var(--tx-muted);
    transition: color var(--fast), transform var(--fast);
    line-height: 1;
}

.img-upload__empty span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx-muted);
    text-align: center;
    line-height: 1.35;
    letter-spacing: 0.2px;
}

/* Hover / drag — energise the empty state icon */
.img-upload .drop-area:hover .img-upload__empty i,
.img-upload .drop-area.dragover .img-upload__empty i {
    color: var(--primary-color);
    transform: translateY(-4px);
}

.img-upload .drop-area:hover .img-upload__empty span,
.img-upload .drop-area.dragover .img-upload__empty span {
    color: var(--primary-color);
}

/* ─── Preview image ─── */
.img-upload .drop-area > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--r-lg) - 2px);
    transition: transform var(--slow), filter var(--fast);
}

.img-upload--landscape .drop-area > img {
    border-radius: calc(var(--r-md) - 2px);
}

/* No src attr → img is invisible; empty state shows */
.img-upload .drop-area > img:not([src]) {
    display: none;
}

/* Has src → hide the empty state (sibling after img in DOM) */
.img-upload .drop-area > img[src] ~ .img-upload__empty {
    display: none;
}

/* Dim + scale image on hover/drag when loaded */
.img-upload .drop-area:hover > img[src],
.img-upload .drop-area.dragover > img[src] {
    transform: scale(1.05);
    filter: brightness(0.72);
}

/* ─── Change overlay (only when image is loaded) ─── */
.img-upload__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fast);
}

.img-upload__overlay i {
    font-size: 22px;
    color: var(--white-color);
    line-height: 1;
}

.img-upload__overlay span {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--white-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Show overlay only when img has a src (image is loaded) + hovered */
.img-upload .drop-area:hover > img[src] ~ .img-upload__overlay,
.img-upload .drop-area.dragover > img[src] ~ .img-upload__overlay {
    opacity: 1;
}

/* ─── Format hint below the zone ─── */
.img-upload__hint {
    font-size: 11px;
    font-weight: 500;
    color: var(--tx-muted);
    text-align: center;
    letter-spacing: 0.3px;
}

/* ─── Size variants ─── */
.img-upload--sm .drop-area {
    width: 84px;
    height: 84px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal .close {
    font-size: 30px;
    color: var(--white-color);
    opacity: 0.75;
    position: absolute;
    right: 20px;
    top: 11px;
    font-weight: 300;
    z-index: 22;
    outline: none;
    transition: opacity var(--fast);
}

.modal .close:hover {
    opacity: 1;
}

/* App misc */
.app-right-btn {
    text-align: right;
    margin-top: -54px;
    margin-bottom: 26px;
}

/* ============================================================
   MODAL — full theme override (applies across all modules)
   ============================================================ */
.modal-content {
    border: none;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    background: var(--surface);
}

.modal-header {
    background: var(--tx-primary);
    border-bottom: none;
    padding: 18px 24px;
    position: relative;
}

.modal-title {
    color: var(--tx-white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.modal-body {
    padding: 24px;
    background: var(--surface);
}

.modal-footer {
    border-top: 1.5px solid var(--border);
    padding: 14px 24px;
    gap: 8px;
    background: var(--surface);
}

/* ─── Form section divider — reusable across all module cards ─── */
.form-section {
    border-top: 1.5px solid var(--border);
    margin-top: 20px;
    padding-top: 20px;
}

.form-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--tx-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ============================================================
   APP SETTINGS MODULE  —  as-* component system
   Segmented tab control + profile-bar card layout
   ============================================================ */

/* ── Segmented tab control ── */
.as-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 5px;
    margin-bottom: 22px;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.as-tabs::-webkit-scrollbar { display: none; }

.as-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    border-radius: var(--r-lg);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tx-muted);
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--font);
    white-space: nowrap;
    transition: all var(--fast);
    line-height: 1;
}
.as-tab i { font-size: 11px; }
.as-tab:hover { color: var(--tx-primary); background: var(--bg); }
.as-tab:focus { outline: none; }
.as-tab.active {
    color: var(--primary);
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

/* ── Pane visibility ── */
.as-pane         { display: none; }
.as-pane.active  { display: block; }

/* ── Main card shell ── */
.as-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
    transition: box-shadow var(--normal);
}

/* ── Profile bar — logo slots + live meta ── */
.as-profile-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 28px;
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
}

.as-logos {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-shrink: 0;
}

.as-logo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.as-logo-frame {
    width: 84px;
    height: 84px;
    border-radius: var(--r-lg);
    border: 2px dashed var(--border-strong);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fast);
    position: relative;
}
.as-logo-frame:hover { border-color: var(--primary); background: var(--primary-light); }
.as-logo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
    transition: transform var(--slow);
}
.as-logo-frame:hover img { transform: scale(1.06); }

.as-logo-name {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tx-muted);
}

.as-bar-divider {
    width: 1px;
    height: 72px;
    background: var(--border);
    flex-shrink: 0;
}

.as-meta-live { flex: 1; min-width: 0; }
.as-meta-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--tx-primary);
    letter-spacing: -0.4px;
    margin: 0 0 3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-meta-company {
    font-size: 13px;
    color: var(--tx-secondary);
    margin: 0 0 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid var(--primary-glow);
}

/* ── Form sections ── */
.as-section {
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
}

.as-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.as-section-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
}

.as-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--tx-muted);
}

/* ── Card footer (save row) ── */
.as-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 28px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.as-footer-hint {
    font-size: 11px;
    color: var(--tx-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.as-footer-hint i { color: var(--amber); }

/* ── Config strip (3 cards: API / Currency / VAPID) ── */
.as-config-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.as-cfg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--normal), border-color var(--normal), transform var(--normal);
    display: flex;
    flex-direction: column;
}
.as-cfg-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.as-cfg-head {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.as-cfg-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.as-cfg-title { font-size: 12px; font-weight: 700; color: var(--tx-primary); margin: 0 0 1px; }
.as-cfg-desc  { font-size: 10.5px; color: var(--tx-muted); margin: 0; }

.as-cfg-card > form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.as-cfg-body { padding: 14px 18px; flex: 1; }

.as-cfg-foot {
    padding: 10px 18px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* ── Copy row (API path) ── */
.as-copy-row {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    transition: border-color var(--fast), box-shadow var(--fast);
}
.as-copy-row:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.as-copy-row input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--tx-secondary);
    font-family: 'Courier New', monospace;
    outline: none;
    min-width: 0;
}
.as-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: var(--primary-light);
    border: none;
    border-left: 1.5px solid var(--border);
    color: var(--primary);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font);
    transition: all var(--fast);
    flex-shrink: 0;
    line-height: 1;
}
.as-copy-btn:hover { background: var(--primary); color: var(--white-color); }

/* ── SMTP / Social / Onboarding pane header ── */
.as-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.as-pane-hgroup { display: flex; align-items: center; gap: 14px; }
.as-pane-hicon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.as-pane-htitle { font-size: 13.5px; font-weight: 700; color: var(--tx-primary); margin: 0 0 2px; }
.as-pane-hdesc  { font-size: 11.5px; color: var(--tx-muted); margin: 0; }

/* ── Dynamic list items (Social / Onboarding) ── */
.as-list-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.as-list-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }

.as-list-thumb {
    width: 70px;
    height: 70px;
    border-radius: var(--r-sm);
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 3px;
    display: block;
}

.as-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--green-border);
    background: var(--green-bg);
    color: var(--green-dark);
    cursor: pointer;
    transition: all var(--fast);
    text-decoration: none;
    font-family: var(--font);
    line-height: 1;
}
.as-btn-add:hover { background: var(--green); color: var(--white-color); border-color: var(--green); text-decoration: none; }

.as-btn-add:focus {
    outline: none;
    border: none;
}

.as-btn-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--red-border);
    background: var(--red-bg);
    color: var(--red-dark);
    cursor: pointer;
    transition: all var(--fast);
    font-family: var(--font);
    line-height: 1;
}
.as-btn-remove:hover { background: var(--red); color: var(--white-color); border-color: var(--red); }

.as-btn-remove:focus {
    outline: none;
    border: none;
}

/* ─── App-settings list-item row: image left · fields right ─── */
.as-row-entry {
    display: flex;
    align-items: center;
    gap: 16px;
}

.as-row-thumb { flex-shrink: 0; }

.as-row-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx-secondary);
    margin: 0 0 6px;
}

.as-row-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.as-row-fields .form-group { margin-bottom: 0; }

.as-row-actions { flex-shrink: 0; }

/* First (empty) row — dashed border signals "new entry" */
.as-list-item--new {
    border-style: dashed;
    background: transparent;
}
.as-list-item--new:hover {
    border-style: dashed;
    border-color: var(--primary-color);
    background: var(--primary-light);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .as-tabs             { width: 100%; }
    .as-profile-bar      { flex-wrap: wrap; padding: 16px; gap: 14px; }
    .as-bar-divider      { display: none; }
    .as-section          { padding: 14px 16px; }
    .as-card-footer, .as-pane-header { padding-left: 16px; padding-right: 16px; }
    .as-config-strip     { grid-template-columns: 1fr; }
}

/* ============================================================
   SETTINGS PAGE
   Underline-tab navigation + sectioned panel layout.
   Reusable across app-setting, smtp, storage, payment pages.
   ============================================================ */

/* ─── Tab navigation — GitHub/Vercel-style underline ─── */
.settings-tab-nav {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
}

.settings-tab-nav::-webkit-scrollbar { display: none; }

.settings-tab-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    background: none;
    white-space: nowrap;
    transition: color var(--fast), border-color var(--fast);
}

.settings-tab-nav .nav-link i {
    font-size: 12px;
}

.settings-tab-nav .nav-link:hover {
    color: var(--tx-primary);
    border-bottom-color: var(--border-strong);
}

.settings-tab-nav .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ─── Settings panel (replaces .card.custom-border-card) ─── */
.settings-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
    transition: box-shadow var(--normal);
}

/* ─── Section inside a panel ─── */
.settings-section {
    padding: 24px 28px;
}

.settings-section + .settings-section {
    border-top: 1px solid var(--border);
}

/* ─── Section header: icon box + title + subtitle ─── */
.settings-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.settings-section-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
}

.settings-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx-primary);
    margin: 0 0 3px;
    letter-spacing: -0.1px;
    line-height: 1.3;
}

.settings-section-subtitle {
    font-size: 12px;
    color: var(--tx-muted);
    margin: 0;
    line-height: 1.5;
}

/* ─── Section footer: save button row ─── */
.settings-section-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 28px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

/* ============================================================
   STORAGE SETTINGS — stg-* components
   Uses only existing :root variables
   ============================================================ */

/* ── Provider selector grid ───────────────────────────────── */
.stg-providers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 4px;
}

/* ── Individual provider card ─────────────────────────────── */
.stg-provider-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 18px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
    user-select: none;
}

.stg-provider-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.stg-provider-card.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

/* ── Radio check badge ────────────────────────────────────── */
.stg-provider-radio {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: var(--r-full);
    border: 2px solid var(--border-strong);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: transparent;
    transition: all var(--fast);
}

.stg-provider-card.is-active .stg-provider-radio {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white-color);
}

/* ── Provider icon container ──────────────────────────────── */
.stg-provider-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform var(--fast);
}

.stg-provider-card:hover .stg-provider-icon,
.stg-provider-card.is-active .stg-provider-icon {
    transform: scale(1.08);
}

/* ── Icon colour themes ───────────────────────────────────── */
.stg-icon--neutral {
    background: var(--surface-2);
    color: var(--tx-secondary);
    border: 1px solid var(--border);
}

.stg-icon--amber {
    background: var(--amber-bg);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.stg-icon--green {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.stg-icon--blue {
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid var(--blue-border);
}

/* ── Provider text ────────────────────────────────────────── */
.stg-provider-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx-primary);
    line-height: 1.3;
    margin: 0;
}

.stg-provider-desc {
    font-size: 11px;
    color: var(--tx-muted);
    line-height: 1.5;
    margin: 0;
}

/* ── Credentials panel (animated slide-in) ────────────────── */
.stg-creds-section {
    animation: stgFadeIn var(--normal) var(--ease) both;
}

@keyframes stgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Credentials panel header ─────────────────────────────── */
.stg-creds-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.stg-creds-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.stg-creds-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx-primary);
    margin: 0 0 3px;
    line-height: 1.3;
}

.stg-creds-subtitle {
    font-size: 12px;
    color: var(--tx-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Input helper hint ────────────────────────────────────── */
.stg-field-hint {
    display: block;
    font-size: 11px;
    color: var(--tx-muted);
    margin-top: 5px;
    line-height: 1.4;
    font-style: italic;
}

/* ── Local storage — no credentials panel ────────────────── */
.stg-no-creds {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: var(--r-md);
    padding: 18px 22px;
}

.stg-no-creds-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-full);
    background: var(--green);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.stg-no-creds-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-dark);
    margin: 0 0 2px;
}

.stg-no-creds-text {
    font-size: 12px;
    color: var(--green-dark);
    margin: 0;
    opacity: 0.8;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .stg-providers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .stg-providers-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stg-provider-card  { padding: 16px 12px 14px; }
    .stg-provider-icon  { width: 42px; height: 42px; font-size: 18px; }
    .stg-provider-name  { font-size: 12px; }
    .stg-no-creds       { flex-direction: column; text-align: center; }
}

/* ─── Logo blocks: side-by-side upload zones ─── */
.settings-logos-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.settings-logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.settings-logo-block-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tx-muted);
    text-align: center;
    display: block;
    margin: 0;
}

/* ─── Copyable readonly input row (API path) ─── */
.settings-copy-row {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    transition: border-color var(--fast), box-shadow var(--fast);
}

.settings-copy-row:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.settings-copy-row input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--tx-secondary);
    font-family: 'Courier New', monospace;
    outline: none;
    min-width: 0;
}

.settings-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--primary-light);
    border: none;
    border-left: 1.5px solid var(--border);
    color: var(--primary);
    cursor: pointer;
    transition: all var(--fast);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font);
    flex-shrink: 0;
    line-height: 1;
}

.settings-copy-btn:hover {
    background: var(--primary);
    color: var(--white-color);
}

/* ─── Dynamic list items (social links / onboarding rows) ─── */
.settings-list-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 10px;
    transition: border-color var(--fast), box-shadow var(--fast);
}

.settings-list-item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.settings-list-item-thumbnail {
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 4px;
    display: block;
    align-self: flex-end;
}

/* ─── Add / Remove action buttons ─── */
.settings-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--green-border);
    background: var(--green-bg);
    color: var(--green-dark);
    cursor: pointer;
    transition: all var(--fast);
    text-decoration: none;
    font-family: var(--font);
    line-height: 1;
}

.settings-btn-add:hover {
    background: var(--green);
    color: var(--white-color);
    border-color: var(--green);
    text-decoration: none;
}

.settings-btn-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--red-border);
    background: var(--red-bg);
    color: var(--red-dark);
    cursor: pointer;
    transition: all var(--fast);
    text-decoration: none;
    font-family: var(--font);
    line-height: 1;
}

.settings-btn-remove:hover {
    background: var(--red);
    color: var(--white-color);
    border-color: var(--red);
    text-decoration: none;
}

/* ─── Responsive ─── */
@media (max-width: 767px) {
    .settings-section        { padding: 16px; }
    .settings-section-footer { padding: 12px 16px; }
    .settings-tab-nav .nav-link { padding: 10px 12px; font-size: 12px; gap: 5px; }
    .settings-logos-row      { gap: 12px; }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (min-width: 1600px) {
    .counter-row {
        margin-bottom: 20px;
    }

    .table thead th,
    .table td {
        font-size: 16px;
    }

    .custom-tabs .nav-link,
    .summary-table-card .border-card {
        font-size: 14.5px;
    }

    .video-card .card-img-top {
        height: 240px;
    }

    .video-card .card-img-top-headline {
        width: 100%;
        height: 175px;
    }

    .video-card .card-body .card-title {
        font-size: 16px;
    }

    .video-card .card-body .card-details p {
        font-size: 14px;
    }

    .video-card .play-btn-top img {
        width: 52px;
    }

    .form-group label {
        font-size: 12px;
    }

    .custom-border-card .card-header {
        font-size: 17px;
    }

    .custom-border-card .card-header::before {
        height: 20px;
    }
}

@media (max-width: 1600px) {
    .article-card {
        width: 100%;
    }

    .card-content {
        padding: 10px 12px;
    }

    .card-meta {
        font-size: 11px;
    }

    .engagement-stats {
        gap: 6px;
    }

    .article-card .card-title {
        font-size: 12.5px;
    }

    .video-card {
        margin: 8px 0;
    }

    .video-card .card-body .card-details {
        font-size: 11px;
    }

    .video-card .card-body .card-title {
        font-size: 13px;
        min-height: 34px;
    }

    .video-card .card-body {
        padding: 8px 10px !important;
    }

    .btn-show,
    .btn-hide {
        padding: 4px 9px;
        font-size: 11.5px;
    }
}

@media (max-width: 1280px) {
    .header .input-group {
        width: 240px;
    }
}

@media (max-width: 991px) {
    .sidebar {
        left: calc(var(--sb-width) * -1);
        width: var(--sb-width);
    }

    .sidebar.hide-sidebar {
        transform: translateX(0);
        left: 0;
        z-index: 1000;
        width: var(--sb-width);
    }

    .sidebar.hide-sidebar .side-toggle span:first-child {
        transform: rotate(45deg);
    }

    .sidebar.hide-sidebar .side-toggle span:nth-child(2) {
        display: none;
    }

    .sidebar.hide-sidebar .side-toggle span:last-child {
        transform: rotate(-45deg);
        margin-top: -6px;
    }

    .right-content {
        margin-left: 0 !important;
    }

    .right-content .page-title {
        display: none;
    }

    .header {
        padding: 0 16px;
        height: 58px;
    }

    .header .title-control .side-toggle {
        display: flex !important;
    }

    .header .side-logo {
        display: block;
    }

    .header .mobile-close-search {
        display: none;
    }

    .counter-row .col-md {
        padding-right: 5px;
        padding-left: 5px;
    }

    .page-header-title {
        display: block;
    }

    .page-title-sm {
        font-size: 21px;
        font-weight: 700;
        margin: 0 0 18px;
        display: block;
        border-bottom: 1.5px solid var(--border);
        padding-bottom: 10px;
        color: var(--tx-primary);
    }

    .app-logo img {
        margin: 20px 0 12px;
    }

    .body-content {
        padding: 18px 16px;
    }
}

@media (max-width: 767px) {
    .btn-default {
        font-size: 13px;
    }

    .header .input-group {
        height: 38px;
        width: 38px;
        border-radius: var(--r-sm);
    }

    .header .input-group .input-group-text {
        padding: 6px;
    }

    .header .input-group .form-control {
        display: none;
    }

    .box-title {
        padding-bottom: 8px;
    }

    .box-title .title {
        font-size: 15px;
    }

    .avatar-control .avatar-img {
        height: 28px;
        width: 28px;
    }

    .table th,
    .table td {
        padding: 9px 8px;
    }

    .summary-table-card .border-card {
        padding: 10px 4px;
    }

    .summary-table-card .border-card .row .col {
        text-align: left;
    }

    .summary-table-card .border-card .row .col-12 {
        justify-content: flex-start;
    }

    .summary-table-card .avatar-control {
        margin: 0 12px 10px;
    }

    .pagination {
        margin-top: 18px;
    }

    .inline-tabs {
        flex-wrap: nowrap;
        overflow: auto;
        margin-top: 0;
    }

    .inline-tabs::-webkit-scrollbar {
        display: none;
    }

    .inline-tabs .nav-link {
        padding: 7px 14px;
    }

    .app-right-btn {
        margin: 0 0 14px;
    }

    .form-group label {
        font-size: 11.5px;
    }

    .custom-border-card {
        padding: 14px 16px;
    }

    .custom-border-card .card-header {
        font-size: 14px;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .custom-border-card .card-header::before {
        height: 15px;
        width: 3px;
    }

    .file-control {
        padding: 14px;
    }

    .export-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-search {
        min-width: 100%;
    }

    .filter-selects {
        width: 100%;
    }

    .filter-select-wrap {
        flex: 1;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 567px) {
    .page-search {
        flex-direction: column;
        margin-bottom: 12px;
        gap: 8px;
    }

    .page-search .sorting {
        margin-top: 0;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label {
        display: flex;
        justify-content: center;
    }

    div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child,
    div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
        padding: 0;
        overflow: auto;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin-top: 12px;
    }

    .export-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 340px) {
    .header .side-logo {
        width: 110px;
    }
}

/* ============================================================
   LOGIN TYPE PILLS (user module)
   ============================================================ */
.login-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.login-type-otp    { background: var(--blue-bg);   color: var(--blue); border: 1px solid var(--blue-border); }
.login-type-google { background: var(--google-pill-bg); color: var(--primary-dark); border: 1px solid var(--red-border); }
.login-type-apple  { background: var(--slate-bg);    color: var(--slate); border: 1px solid var(--slate-border); }
.login-type-normal { background: var(--purple-bg);  color: var(--purple); border: 1px solid var(--purple-border); }

.img-thumbnail-custom {
    height:48px;
    width:48px;
    object-fit:cover;
    border-radius:8px;
    border:2px solid var(--border);
}

/* ============================================================
   SELECT2 — ADMIN THEME
   Global overrides for all Select2 instances (form context).
   Filter-bar context (.filter-select-wrap) uses !important to
   guarantee it wins the cascade regardless of source order.
   ============================================================ */

/* Base container */
.select2-container {
    font-family: var(--font);
}

/* ---- Closed selection box (form fields, modals, etc.) ---- */
.select2-container--default .select2-selection--single {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    height: 38px;
    display: flex;
    align-items: center;
    transition: border-color var(--fast), box-shadow var(--fast);
}

/* Open / focus ring */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
}

/* Radius stays intact when dropdown opens below */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: var(--r-sm);
    border-bottom-right-radius: var(--r-sm);
}

/* Rendered text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tx-primary);
    font-size: 13.5px;
    font-weight: 400;
    font-family: var(--font);
    line-height: 36px;
    padding-left: 12px;
    padding-right: 32px;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--tx-muted);
}

/* Arrow indicator */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 10px;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tx-muted) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary-color) transparent;
    border-width: 0 4px 5px 4px;
}

/* ---- Dropdown panel ---- */
.select2-dropdown {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    font-family: var(--font);
    overflow: hidden;
    margin-top: 4px;
}

/* Inline search field inside dropdown */
.select2-search--dropdown {
    padding: 8px 8px 4px;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: var(--font);
    padding: 6px 10px;
    outline: none;
    color: var(--tx-primary);
    background: var(--surface-2);
    width: 100%;
    transition: border-color var(--fast), box-shadow var(--fast);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* ---- Results list ---- */
.select2-results__options {
    padding: 4px;
    max-height: 220px;
}

.select2-container--default .select2-results__option {
    font-size: 13px;
    font-family: var(--font);
    color: var(--tx-secondary);
    padding: 8px 10px;
    border-radius: 6px;
    transition: background var(--fast), color var(--fast);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-light);
    color: var(--primary-color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 600;
}

/* ============================================================
   SELECT2 — FILTER BAR CONTEXT
   Inside .filter-select-wrap the wrapper owns the border/bg.
   !important ensures these always beat the global open/focus rules.
   ============================================================ */
.filter-select-wrap .select2-container {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    /* display: flex; */
    align-items: center;
}

.filter-select-wrap .select2-container--default .select2-selection--single {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Prevent open/focus ring from appearing inside the wrapper */
.filter-select-wrap .select2-container--default.select2-container--open .select2-selection--single,
.filter-select-wrap .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Rendered text: no extra padding, match filter-input typography */
.filter-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 0 20px 0 0 !important;
    color: var(--tx-primary) !important;
}

/* Arrow flush to the right edge */
.filter-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    width: 16px !important;
    display: flex;
    align-items: center;
}

/* Arrow stays muted; no open-state color change inside wrapper */
.filter-select-wrap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tx-muted) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
}

/* Date input inside filter-select-wrap — matches Select2 visual style globally */
.filter-select-wrap input[type="date"] {
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-primary);
    font-family: var(--font);
    flex: 1;
    min-width: 0;
    width: 100%;
    cursor: pointer;
}

/* Banner Css  */
.banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.banner-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.banner-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.banner-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 2px solid var(--border);
    flex-shrink: 0;
    background: var(--border);
}

.banner-meta {
    flex: 1;
    min-width: 0;
}
.banner-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tx-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.banner-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-delete {
    flex-shrink: 0;
}
.banner-delete .delete-btn {
    padding: 8px 10px;
}

.banner-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--tx-muted);
}
.banner-empty-state i {
    font-size: 48px;
    opacity: 0.3;
    display: block;
    margin-bottom: 12px;
}
.banner-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ============================================================
   UPLOAD CARD GRID  (uc-*)
   Gallery-style card component for dynamic media upload.
   Reusable across feed, story, gallery, and any module
   that needs repeatable content blocks.
   ============================================================ */

/* ── Grid ── */
.uc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

/* ── Card ── */
.uc-card {
    position: relative;
    width: 250px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--normal), box-shadow var(--normal), transform var(--normal);
}

.uc-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Numbered badge — top-left corner */
.uc-card__num {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--primary-color);
    color: var(--tx-white);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    user-select: none;
    line-height: 1;
}

/* Remove button — top-right, revealed on card hover */
.uc-card__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 26px;
    height: 26px;
    background: rgba(15, 23, 42, 0.58);
    color: var(--tx-white);
    border: none;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.72);
    transition: opacity var(--fast), transform var(--fast), background var(--fast);
}

.uc-card:hover .uc-card__remove {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.uc-card__remove:hover {
    background: var(--red);
}

.uc-card__remove:focus {
    border: none;
    outline: none;
}

/* ── Upload zone ── */
.uc-card__zone {
    position: relative;
    width: 100%;
    height: 178px;
    background: var(--surface-2);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--fast);
}

.uc-card__drop {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Preview image — hidden until has-img */
.uc-card__drop > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--normal);
}

/* Empty state */
.uc-card__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 14px;
    pointer-events: none;
    transition: opacity var(--fast);
}

.uc-card__empty i {
    font-size: 32px;
    color: var(--tx-muted);
    transition: color var(--fast), transform var(--fast);
}

.uc-card__empty span {
    font-size: 12px;
    font-weight: 600;
    color: var(--tx-muted);
    text-align: center;
    line-height: 1.3;
    transition: color var(--fast);
}

.uc-card__empty p {
    font-size: 10.5px;
    color: var(--tx-muted);
    opacity: 0.6;
    margin: 0;
    text-align: center;
    transition: opacity var(--fast), color var(--fast);
}

/* Hover over empty zone */
.uc-card__zone:not(.has-img):hover .uc-card__empty i {
    color: var(--primary-color);
    transform: translateY(-5px) scale(1.08);
}

.uc-card__zone:not(.has-img):hover .uc-card__empty span {
    color: var(--primary-color);
}

.uc-card__zone:not(.has-img):hover .uc-card__empty p {
    opacity: 1;
    color: var(--primary-color);
}

/* Hover overlay — shown when image is loaded */
.uc-card__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0;
    transition: opacity var(--normal);
    pointer-events: none;
}

.uc-card__overlay i  { font-size: 22px; color: var(--tx-white); }
.uc-card__overlay span { font-size: 12px; font-weight: 600; color: var(--tx-white); }

/* State: image loaded — JS adds .has-img to .uc-card__zone */
.uc-card__zone.has-img .uc-card__drop > img { opacity: 1; }
.uc-card__zone.has-img .uc-card__empty      { opacity: 0; }
.uc-card__zone.has-img:hover .uc-card__overlay { opacity: 1; }

/* Dragover highlight */
.uc-card__zone.dragover {
    background: var(--primary-light);
    outline: 2px dashed var(--primary-color);
    outline-offset: -4px;
}

.uc-card__zone.dragover .uc-card__empty i {
    color: var(--primary-color);
    transform: translateY(-5px) scale(1.08);
}

/* ── Footer ── */
.uc-card__foot {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* Type pill toggle */
.uc-type-pills { display: flex; gap: 5px; }

.uc-type-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    color: var(--tx-muted);
    cursor: pointer;
    transition: all var(--fast);
    user-select: none;
    letter-spacing: 0.2px;
}

.uc-type-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--tx-white);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.uc-type-pill:not(.active):hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
}

.uc-type-pill i { font-size: 10px; }

/* Video upload section */
.uc-card__video {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.uc-card__video .form-control {
    font-size: 11.5px;
    padding: 7px 10px;
}

.uc-card__hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--tx-muted);
    margin: 5px 0 0;
}

.uc-card__hint i { font-size: 10px; color: var(--primary-color); flex-shrink: 0; }

/* ── Add-card button ── */
.uc-add-card {
    width: 250px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--surface-2);
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-xl);
    color: var(--tx-muted);
    cursor: pointer;
    transition: border-color var(--normal), background var(--normal), color var(--normal),
                box-shadow var(--normal), transform var(--normal);
    text-decoration: none;
    padding: 24px 16px;
    user-select: none;
}

.uc-add-card:hover,
.uc-add-card:focus {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: 0 0 0 4px var(--primary-glow);
    text-decoration: none;
    outline: none;
    transform: translateY(-3px);
}

.uc-add-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-full);
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background var(--fast), transform var(--fast), color var(--fast);
}

.uc-add-card:hover .uc-add-card__icon {
    background: var(--primary-color);
    color: var(--tx-white);
    transform: rotate(90deg) scale(1.1);
}

.uc-add-card__label {
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .uc-card, .uc-add-card { width: 175px; }
    .uc-card__zone { height: 160px; }
    .uc-add-card { min-height: 216px; }
}

@media (max-width: 767px) {
    .uc-grid { gap: 12px; }
    .uc-card, .uc-add-card { width: calc(50% - 6px); }
    .uc-card__zone { height: 150px; }
    .uc-add-card { min-height: 150px; }
}

@media (max-width: 480px) {
    .uc-card, .uc-add-card { width: 100%; }
}
/* ============================================================
   SYSTEM SETTINGS — scoped styles (.ss-*)
   Uses only existing :root variables — no new colours
   ============================================================ */

/* ── Hero Banner ─────────────────────────────────────────── */
.ss-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 20px 26px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ss-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ss-hero-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px var(--primary-glow);
}

.ss-hero-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--tx-primary);
    margin: 0 0 2px;
    letter-spacing: -0.3px;
}

.ss-hero-sub {
    font-size: 12px;
    color: var(--tx-muted);
    margin: 0;
}

.ss-hero-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ss-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
}

.ss-pill--blue  { 
    background: var(--blue-bg);  
    color: var(--blue);  
    border-color: var(--blue-border);  
}
.ss-pill--green { 
    background: var(--green-bg); 
    color: var(--green); 
    border-color: var(--green-border); 
}

/* ── Caution Bar ─────────────────────────────────────────── */
.ss-caution {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-left: 3.5px solid var(--amber);
    border-radius: var(--r-md);
    padding: 11px 18px;
    margin-bottom: 22px;
    font-size: 12.5px;
    color: var(--tx-secondary);
    font-weight: 500;
}

.ss-caution > i {
    color: var(--amber);
    flex-shrink: 0;
    font-size: 15px;
}

/* ── Tools Grid ──────────────────────────────────────────── */
.ss-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

/* ── Tool Card ───────────────────────────────────────────── */
.ss-tool {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--normal), transform var(--normal);
}

.ss-tool:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Coloured top accent strip */
.ss-tool-accent {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

.ss-tool--blue  .ss-tool-accent { 
    background: linear-gradient(90deg, var(--blue)  0%, var(--cyan)  100%); 
}
.ss-tool--green .ss-tool-accent { 
    background: linear-gradient(90deg, var(--green) 0%, var(--cyan)  100%); 
}
.ss-tool--red   .ss-tool-accent { 
    background: linear-gradient(90deg, var(--primary) 0%, var(--red) 100%);
}

/* Card body */
.ss-tool-body {
    padding: 22px 22px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Head row: icon left, badge right */
.ss-tool-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* Icon box */
.ss-tool-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

/* Risk badge */
.ss-risk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
    white-space: nowrap;
    margin-top: 2px;
}

.ss-risk--blue  { 
    background: var(--blue-bg);  
    color: var(--blue);  
    border-color: var(--blue-border);  
}
.ss-risk--green { 
    background: var(--green-bg); 
    color: var(--green); border-color: 
    var(--green-border); 
}
.ss-risk--red   { 
    background: var(--red-bg);   
    color: var(--red);   
    border-color: var(--red-border);   
}

/* Tool title */
.ss-tool-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

/* Description */
.ss-tool-desc {
    font-size: 12.5px;
    color: var(--tx-secondary);
    margin: 0;
    line-height: 1.65;
    flex: 1;
}

/* Meta / info strip */
.ss-tool-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--tx-muted);
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    width: fit-content;
}

.ss-tool-meta--warn {
    color: var(--red) !important;
    background: var(--red-bg) !important;
    border-color: var(--red-border) !important;
}

.ss-tool-meta i { 
    font-size: 10px; 
}

/* Card footer */
.ss-tool-foot {
    padding: 14px 22px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

/* Action button */
.ss-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--fast);
    text-decoration: none !important;
    letter-spacing: -0.1px;
}

.ss-action-btn--blue  { 
    background: var(--blue-bg);  
    color: var(--blue);  border-color: 
    var(--blue-border);  
}
.ss-action-btn--green { 
    background: var(--green-bg); 
    color: var(--green); border-color: 
    var(--green-border); 
}
.ss-action-btn--red   { 
    background: var(--red-bg);   
    color: var(--red);   
    border-color: var(--red-border);   
}

.ss-action-btn--blue:hover  { 
    background: var(--blue);    
    color: var(--tx-white); 
    border-color: var(--blue);    
    box-shadow: var(--shadow-sm); 
}
.ss-action-btn--green:hover { 
    background: var(--green);   
    color: var(--tx-white); 
    border-color: var(--green);   
    box-shadow: var(--shadow-sm); 
}
.ss-action-btn--red:hover   { 
    background: var(--red);     
    color: var(--tx-white); 
    border-color: var(--red);     
    box-shadow: var(--shadow-sm); 
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ss-tools-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 640px) {
    .ss-tools-grid { 
        grid-template-columns: 1fr; 
    }
    .ss-hero { 
        flex-direction: column; 
        align-items: flex-start;
    }
    .ss-hero-pills {
        width: 100%;
    }
}

/* ============================================================
   ADMIN LOGIN PAGE
   ============================================================ */

/* ---------- SCENE ---------- */
.ln-scene {
    position: fixed; inset: 0;
    background: radial-gradient(ellipse 120% 80% at 20% 40%, var(--login-scene-deep) 0%, var(--login-scene-bg) 60%);
    overflow: hidden;
}

/* Animated gradient orbs */
.ln-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); pointer-events: none;
}
.ln-orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    top: -15%; left: -8%;
    animation: orbDrift1 14s ease-in-out infinite;
}
.ln-orb-2 {
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(var(--purple-rgb), 0.14) 0%, transparent 70%);
    bottom: -10%; right: -5%;
    animation: orbDrift2 17s ease-in-out infinite;
}
.ln-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(var(--amber-rgb), 0.1) 0%, transparent 70%);
    top: 50%; left: 40%;
    animation: orbDrift3 11s ease-in-out infinite;
}
@keyframes orbDrift1 {
    0%,100% { transform: translate(0,0); }
    40%     { transform: translate(40px,-30px); }
    70%     { transform: translate(-20px,50px); }
}
@keyframes orbDrift2 {
    0%,100% { transform: translate(0,0); }
    35%     { transform: translate(-50px,30px); }
    65%     { transform: translate(30px,-40px); }
}
@keyframes orbDrift3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-60px,-30px) scale(1.15); }
}

/* Grid */
.ln-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--primary-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Floating particles */
.ln-particle {
    position: absolute; border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.55);
    animation: particleRise linear infinite;
    pointer-events: none;
}
@keyframes particleRise {
    0%   { transform: translateY(110vh) translateX(0); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 0.6; }
    100% { transform: translateY(-80px) translateX(var(--dx)); opacity: 0; }
}

/* Scan line overlay */
.ln-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--black-rgb), 0.06) 2px,
        rgba(var(--black-rgb), 0.06) 4px
    );
}

/* ---------- LAYOUT ---------- */
.ln-layout {
    position: relative; z-index: 10;
    display: flex; height: 100vh;
}

/* ===== LEFT PANEL ===== */
.ln-left {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; padding: 60px 64px;
    position: relative;
}

.ln-live-pill {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    background: var(--primary-light);
    border-radius: 100px; padding: 7px 18px;
    font-size: 10px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--red);
    width: fit-content; margin-bottom: 36px;
    animation: fadein 0.7s ease both;
}
.ln-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0.6);
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0.6); }
    60%     { box-shadow: 0 0 0 8px rgba(var(--red-rgb), 0); }
}

.ln-brand {
    font-size: clamp(52px, 5.5vw, 78px);
    font-weight: 900; line-height: 0.95;
    letter-spacing: -3px; color: var(--white-color);
    animation: fadein 0.7s 0.1s ease both;
}
.ln-brand-accent { color: var(--red); }

.ln-tagline {
    margin-top: 24px; font-size: 16px; line-height: 1.75;
    color: rgba(var(--white-rgb), 0.42); max-width: 680px;
    animation: fadein 0.7s 0.2s ease both;
}

/* Divider */
.ln-divider-h {
    width: 48px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--red), transparent);
    margin: 32px 0; animation: fadein 0.7s 0.25s ease both;
}

/* Ticker */
.ln-ticker-wrap { animation: fadein 0.7s 0.3s ease both; }
.ln-ticker-label {
    font-size: 9px; letter-spacing: 3px; font-weight: 700;
    color: var(--red); text-transform: uppercase; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.ln-ticker-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(var(--red-rgb), 0.4), transparent);
}
.ln-ticker-box {
    overflow: hidden; height: 26px;
    border-left: 2px solid var(--red); padding-left: 14px;
}
.ln-ticker-inner { animation: tickScroll 14s linear infinite; }
.ln-ticker-item {
    height: 26px; line-height: 26px;
    font-size: 13px; color: rgba(var(--white-rgb), 0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes tickScroll {
    0%,  14%  { transform: translateY(0); }
    17%,  30% { transform: translateY(-26px); }
    33%,  46% { transform: translateY(-52px); }
    49%,  62% { transform: translateY(-78px); }
    65%,  78% { transform: translateY(-104px); }
    81%,  94% { transform: translateY(-130px); }
    97%, 100%  { transform: translateY(0); }
}

/* Stats */
.ln-stats {
    display: flex; flex-wrap: wrap; gap: 0; margin-top: 52px;
    animation: fadein 0.7s 0.4s ease both;
}
.ln-stat { padding: 0 24px 0 0; }
.ln-stat:not(:last-child) {
    border-right: 1px solid rgba(var(--white-rgb), 0.07);
    margin-right: 24px;
}
.ln-stat-num {
    font-size: 24px; font-weight: 800; color: var(--white-color); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ln-stat-num sub { font-size: 12px; color: var(--red); vertical-align: baseline; }
.ln-stat-lbl {
    font-size: 9px; color: rgba(var(--white-rgb), 0.3);
    text-transform: uppercase; letter-spacing: 2px; margin-top: 5px;
}

/* Vertical separator */
.ln-separator {
    position: absolute; right: 0; top: 8%; bottom: 8%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--red-rgb), 0.25) 30%,
        rgba(var(--red-rgb), 0.25) 70%,
        transparent 100%
    );
}

/* ===== RIGHT PANEL ===== */
.ln-right {
    width: 620px; display: flex;
    align-items: center; justify-content: center;
    padding: 40px 52px;
}

/* Glass card */
.ln-card {
    width: 100%; max-width: 500px;
    background: rgba(var(--white-rgb), 0.035);
    border: 1px solid rgba(var(--white-rgb), 0.075);
    border-radius: 28px;
    padding: 52px 52px 44px;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow:
        0 40px 100px rgba(var(--black-rgb), 0.55),
        0 0 0 1px rgba(var(--red-rgb), 0.06),
        inset 0 1px 0 rgba(var(--white-rgb), 0.06);
    animation: cardIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(48px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card top */
.ln-card-top { text-align: center; margin-bottom: 40px; }

.ln-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 74px; height: 74px;
    background: linear-gradient(145deg, var(--primary), var(--red));
    font-size: 26px; color: var(--white-color);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.45), 0 0 0 1px rgba(var(--red-rgb), 0.3);
    margin-bottom: 22px;
    animation: iconBob 3.5s ease-in-out infinite;
}
@keyframes iconBob {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-7px) rotate(-4deg); }
}

.ln-card-title {
    font-size: 26px; font-weight: 800; color: var(--white-color);
    letter-spacing: -0.5px; margin-bottom: 6px;
}
.ln-card-sub {
    font-size: 13px; color: rgba(var(--white-rgb), 0.38); line-height: 1.6;
}

/* ---------- FLOATING LABEL INPUTS ---------- */
.ln-field {
    position: relative; margin-bottom: 20px;
}
.ln-field input {
    display: block; width: 100%;
    background: rgba(var(--white-rgb), 0.05);
    border: 1.5px solid rgba(var(--white-rgb), 0.08);
    border-radius: 14px;
    padding: 24px 52px 9px 18px;
    color: var(--white-color); font-size: 15px;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    outline: none; line-height: 1;
}
.ln-field input::placeholder { color: transparent; }
.ln-field input:focus {
    border-color: rgba(var(--red-rgb), 0.55);
    background: rgba(var(--red-rgb), 0.06);
    box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.1);
}
.ln-field label {
    position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px; color: rgba(var(--white-rgb), 0.38);
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ln-field input:focus ~ label,
.ln-field input:not(:placeholder-shown) ~ label {
    top: 11px; transform: none;
    font-size: 10px; font-weight: 600;
    color: var(--red); letter-spacing: 0.5px;
}
.ln-field-icon {
    position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
    color: rgba(var(--white-rgb), 0.2); font-size: 14px; pointer-events: none;
    transition: color 0.25s ease;
}
.ln-field input:focus ~ label ~ .ln-field-icon,
.ln-field input:focus ~ .ln-field-icon { color: var(--red); }

.ln-toggle {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: rgba(var(--white-rgb), 0.22); font-size: 14px;
    padding: 4px; transition: color 0.22s ease;
}
.ln-toggle:hover { color: var(--red); }

/* ---------- SUBMIT BUTTON ---------- */
.ln-btn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 17px 24px; margin-top: 10px;
    background: linear-gradient(145deg, var(--primary), var(--red));
    border: none; border-radius: 14px;
    color: var(--white-color); font-size: 15px; font-weight: 700;
    letter-spacing: 0.4px; cursor: pointer;
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ln-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(var(--primary-rgb), 0.55);
}
.ln-btn:active:not(:disabled) { transform: translateY(0); }
.ln-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.ln-btn:focus { outline: none; }
.ln-btn::after {
    content: ''; position: absolute;
    top: -50%; left: -75%; width: 50%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.ln-btn:hover::after { left: 130%; }

/* Ripple */
.ln-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(var(--white-rgb), 0.28);
    transform: scale(0);
    animation: rippleOut 0.55s ease-out;
    pointer-events: none;
}
@keyframes rippleOut {
    to { transform: scale(5); opacity: 0; }
}

/* ---------- DEMO NOTICE ---------- */
.ln-demo-box {
    margin-top: 18px; padding: 13px 16px;
    background: rgba(var(--red-rgb), 0.07);
    border: 1px solid rgba(var(--red-rgb), 0.18);
    border-radius: 12px;
}
.ln-demo-box p {
    margin: 0; font-size: 12px; color: rgba(var(--white-rgb), 0.45); line-height: 1.65;
}
.ln-demo-box a { color: var(--red); text-decoration: none; font-weight: 600; }
.ln-demo-box a:hover { text-decoration: underline; }

/* ---------- CARD FOOTER ---------- */
.ln-card-foot {
    margin-top: 28px; text-align: center;
    font-size: 11.5px; color: rgba(var(--white-rgb), 0.18);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ln-card-foot::before,
.ln-card-foot::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(var(--white-rgb), 0.07);
}

/* ---------- LOGIN KEYFRAMES ---------- */
@keyframes fadein {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- LOGIN RESPONSIVE ---------- */
@media (max-width: 991px) {
    .ln-left { display: none !important; }
    .ln-right { width: 100%; padding: 24px 20px; }
    .ln-card { max-width: 500px; padding: 40px 32px 32px; }
}
@media (max-width: 400px) {
    .ln-card { padding: 32px 20px 24px; border-radius: 20px; }
}
/* ============================================================
   CHANNEL DASHBOARD — Page-scoped styles
   Uses only variables defined in style.css :root
   ============================================================ */

/* ── Hero Card ── */
.ch-hero {
    background: var(--sb-gradient);
    border-radius: var(--r-xl);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--shadow-lg);
}
.ch-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(var(--primary-rgb), 0.18) 0%, transparent 65%);
    pointer-events: none;
}
.ch-hero::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    pointer-events: none;
}
.ch-hero-avatar {
    flex-shrink: 0;
    width: 84px; height: 84px;
    border-radius: 50%;
    border: 3px solid rgba(var(--primary-rgb), 0.6);
    object-fit: cover;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
    background: var(--sb-bg-2);
}
.ch-hero-avatar-placeholder {
    flex-shrink: 0;
    width: 84px; height: 84px;
    border-radius: 50%;
    border: 3px solid rgba(var(--primary-rgb), 0.6);
    background: var(--sb-bg-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}
.ch-hero-info { 
    flex: 1; 
    min-width: 0; 
}
.ch-hero-name {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tx-white);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ch-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-full);
    letter-spacing: 0.03em;
}
.ch-badge-verified {
    background: var(--green-bg);
    color: var(--green-border);
    border: 1px solid var(--green-border);
}
.ch-hero-username {
    color: var(--sb-text);
    font-size: 0.875rem;
    margin: 0 0 14px;
}
.ch-hero-meta {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ch-hero-stat {
    display: flex; align-items: center; gap: 7px;
    color: var(--sb-text);
    font-size: 0.82rem;
}
.ch-hero-stat strong {
    color: var(--tx-white);
    font-size: 1rem;
    font-weight: 700;
}
.ch-hero-stat .dot-divider {
    width: 4px; height: 4px;
    background: var(--sb-text);
    border-radius: 50%;
}
.ch-hero-actions {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.ch-hero-date {
    color: var(--sb-text);
    font-size: 0.78rem;
}
.ch-hero-edit-btn {
    border-color: rgba(var(--white-rgb), 0.25);
    color: var(--tx-white);
    font-size: 0.78rem;
    padding: 5px 14px;
    border-radius: var(--r-full);
}
.ch-hero-edit-btn:hover { 
    color: var(--primary-color); 
    opacity: 0.85; 
}

/* ── Stat Cards ── */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.dash-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 20px 18px;
    position: relative;
    overflow: hidden;
    transition: transform var(--fast), box-shadow var(--fast);
    box-shadow: var(--shadow-xs);
}
.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.dash-stat-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, var(--primary-color));
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.dash-stat-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 14px;
}
.dash-stat-card-icon {
    width: 42px; height: 42px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    background: var(--card-icon-bg, var(--primary-light));
    color: var(--card-accent, var(--primary-color));
}
.dash-stat-badge {
    font-size: 0.68rem; font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--card-icon-bg, var(--primary-light));
    color: var(--card-accent, var(--primary-color));
}
.dash-stat-card-number {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--tx-primary);
    line-height: 1;
    margin-bottom: 5px;
}
.dash-stat-card-label {
    font-size: 0.78rem;
    color: var(--tx-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dash-stat-card-sub {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--tx-muted);
}
.dash-stat-card-sub .published-count { 
    color: var(--green); 
    font-weight: 600; 
}

/* Stat card color variants */
.dash-stat-primary { 
    --card-accent: var(--primary-color); 
    --card-icon-bg: var(--primary-light); 
}
.dash-stat-purple  { 
    --card-accent: var(--purple);        
    --card-icon-bg: var(--purple-bg); 
}
.dash-stat-blue    { 
    --card-accent: var(--blue);          
    --card-icon-bg: var(--blue-bg); 
}
.dash-stat-green   { 
    --card-accent: var(--green);         
    --card-icon-bg: var(--green-bg); 
}
.dash-stat-cyan    { 
    --card-accent: var(--cyan);          
    --card-icon-bg: var(--cyan-bg); 
}
.dash-stat-amber   { 
    --card-accent: var(--amber);         
    --card-icon-bg: var(--amber-bg); 
}
.dash-stat-orange  { 
    --card-accent: var(--orange);        
    --card-icon-bg: var(--orange-bg); 
}
.dash-stat-red     { 
    --card-accent: var(--red);           
    --card-icon-bg: var(--red-bg); 
}

/* Sub-row indicator dot */
.dash-stat-dot         { 
    font-size: 0.6rem; 
}
.dash-stat-dot-green   { 
    color: var(--green); 
}
.dash-stat-dot-primary { 
    color: var(--primary-color); 
}
.dash-stat-dot-cyan    { 
    color: var(--cyan); 
}
.dash-stat-dot-amber   { 
    color: var(--amber); 
    font-size: 0.7rem; 
}
.dash-stat-dot-orange  { 
    color: var(--orange); 
}
.dash-stat-dot-red     { 
    color: var(--red); 
}

/* Sub-row count value color variants */
.dash-sub-count-primary { 
    color: var(--primary-color); 
    font-weight: 600; 
}
.dash-sub-count-cyan    { 
    color: var(--cyan);           
    font-weight: 600; 
}
.dash-sub-count-amber   { 
    color: var(--amber);          
    font-weight: 600; 
}
.dash-sub-count-orange  { 
    color: var(--orange);         
    font-weight: 600; 
}
.dash-sub-count-red     { 
    color: var(--red);            
    font-weight: 600; 
}

/* ── Layout helpers ── */
.dash-two-col {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    margin-bottom: 24px;
}
.dash-col-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Surface card ── */
.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.dash-card-head {
    padding: 18px 20px 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.dash-card-head--padded { 
    padding-bottom: 16px; 
}
.dash-card-head h3 {
    font-size: 0.92rem; font-weight: 700;
    color: var(--tx-primary); margin: 0;
    flex: 1;
}
.dash-section-icon {
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
}

/* ── Custom Tabs ── */
.dash-tabs {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    margin-top: 14px;
    margin-bottom: -1px;
}
.dash-card-tabs { 
    padding: 0; 
    margin: 0; 
}
.dash-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tx-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 14px 10px;
    cursor: pointer;
    transition: color var(--fast), border-color var(--fast);
    letter-spacing: 0.02em;
}
.dash-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.dash-tab-btn:hover:not(.active) { 
    color: var(--tx-secondary); 
}

/* ── Ranked content list ── */
.dash-ranked-list { 
    padding: 8px 0 4px; 
}
.dash-ranked-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--fast);
}
.dash-ranked-item:last-child { 
    border-bottom: none; 
}
.dash-ranked-item:hover { 
    background: var(--surface-2); 
}
.dash-rank-num {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tx-muted);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.dash-rank-num.top1 { 
    color: var(--amber); 
}
.dash-rank-num.top2 { 
    color: var(--tx-secondary); 
}
.dash-rank-num.top3 { 
    color: var(--orange); 
}
.dash-ranked-thumb {
    width: 46px; height: 46px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.dash-ranked-info { 
    flex: 1; min-width: 0; 
}
.dash-ranked-title {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--tx-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.dash-ranked-count {
    display: flex; align-items: center; gap: 5px;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tx-secondary);
}
.dash-ranked-count i { 
    font-size: 0.72rem; color: var(--primary-color); 
}
.dash-ranked-count--like { 
    color: var(--primary-color); 
}
.dash-ranked-count--like i { 
    color: var(--primary-color); 
}
.dash-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--tx-muted);
    font-size: 0.85rem;
}
.dash-empty-state i { 
    font-size: 2rem; 
    margin-bottom: 10px; 
    display: block; 
    opacity: 0.4; 
}

/* ── Upload Quota ── */
.quota-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
}
.quota-tile {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--card-accent, var(--border-strong));
    border-radius: var(--r-md);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--fast), box-shadow var(--fast);
}
.quota-tile:hover {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.quota-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--card-icon-bg, var(--primary-light));
    color: var(--card-accent, var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.quota-tile-body {
    flex: 1;
    min-width: 0;
}
.quota-tile-count {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--card-accent, var(--primary-color));
    line-height: 1;
    margin-bottom: 3px;
}
.quota-tile-label {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--tx-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quota-tile--empty {
    opacity: 0.55;
    border-left-color: var(--border-strong);
}
.quota-tile--empty .quota-tile-count {
    color: var(--tx-muted);
}
.quota-tile--empty .quota-tile-icon {
    background: rgba(var(--black-rgb), 0.04);
    color: var(--tx-muted);
}
.quota-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 0.73rem;
    color: var(--tx-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.quota-footer i {
    color: var(--primary-color);
}

/* ── Recent Activity ── */
.dash-activity-list { 
    padding: 8px 0 4px; 
}
.dash-activity-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--fast);
}
.dash-activity-item:last-child { 
    border-bottom: none; 
}
.dash-activity-item:hover { 
    background: var(--surface-2); 
}
.dash-activity-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.dash-activity-dot--published { 
    background: var(--green); 
}
.dash-activity-dot--draft { 
    background: var(--amber); 
}
.dash-activity-text { 
    flex: 1; min-width: 0; 
}
.dash-activity-title {
    font-size: 0.83rem; font-weight: 600;
    color: var(--tx-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-activity-time { 
    font-size: 0.74rem; 
    color: var(--tx-muted); 
    margin-top: 2px; 
}
.dash-activity-status {
    flex-shrink: 0;
    font-size: 0.7rem; font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-full);
}
.status-published { 
    background: var(--green-bg);  
    color: var(--green);  
    border: 1px solid var(--green-border); 
}
.status-draft { 
    background: var(--amber-bg);  
    color: var(--amber);  
    border: 1px solid var(--amber-border); 
}

/* ── Engagement summary row ── */
.dash-engage-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    overflow: hidden;
}
.dash-engage-cell { 
    background: var(--surface); 
    padding: 16px; 
    text-align: center; 
}
.dash-engage-cell-value { 
    font-size: 1.2rem; 
    font-weight: 800; 
    color: var(--tx-primary); 
    margin-bottom: 3px; 
}
.dash-engage-cell-label { 
    font-size: 0.72rem; 
    font-weight: 500; 
    color: var(--tx-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}
.icon-primary { 
    color: var(--primary-color); 
}
.icon-blue { 
    color: var(--blue); 
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .dash-two-col { 
        grid-template-columns: 1fr; 
    }
}
@media (max-width: 992px) {
    .dash-stats-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
}
@media (max-width: 768px) {
    .dash-stats-grid  { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .ch-hero          { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 24px 20px; 
    }
    .ch-hero-actions  {
        align-items: flex-start;
    }
}


/* ============================================================
   CHANNEL LOGIN PAGE  (.cl-*)
   ============================================================ */

/* ── Scene ── */
.cl-scene {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--login-scene-bg);
    overflow: hidden;
}
/* Dot-grid overlay */
.cl-scene::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(var(--primary-rgb), 0.09) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
    animation: cl-grid-fade 10s ease-in-out infinite alternate;
}
@keyframes cl-grid-fade { 0% { opacity: 0.32 } 100% { opacity: 0.08 } }

/* Animated gradient base */
.cl-bg-gradient {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 75% 70% at 15% 20%, rgba(var(--primary-rgb), 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at 85% 85%, rgba(var(--primary-rgb), 0.13) 0%, transparent 60%),
        radial-gradient(ellipse 45% 50% at 55% 5%,  rgba(var(--primary-rgb), 0.09) 0%, transparent 55%);
    animation: cl-bg-breathe 14s ease-in-out infinite alternate;
}
@keyframes cl-bg-breathe { 0% { opacity: 1; } 100% { opacity: 0.55; } }

/* Particles canvas */
#cl-particles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
}

/* Glowing ambient orbs */
.cl-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); pointer-events: none; z-index: 2;
    will-change: transform;
}
.cl-orb-1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.17) 0%, transparent 65%);
    top: -220px; left: -180px;
    animation: cl-orb1 22s ease-in-out infinite;
}
.cl-orb-2 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.14) 0%, transparent 65%);
    bottom: -180px; right: -140px;
    animation: cl-orb2 26s ease-in-out infinite;
}
.cl-orb-3 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.10) 0%, transparent 65%);
    top: 35%; left: 58%;
    animation: cl-orb3 30s ease-in-out infinite;
}
.cl-orb-4 {
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, transparent 65%);
    top: 60%; left: 10%;
    animation: cl-orb1 34s ease-in-out infinite reverse;
}
@keyframes cl-orb1 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(55px, 40px) } }
@keyframes cl-orb2 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-45px, -30px) } }
@keyframes cl-orb3 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-65px, 45px) } }

/* Vertical accent lines */
.cl-lines {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2;
}
.cl-lines::before, .cl-lines::after {
    content: '';
    position: absolute;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(var(--primary-rgb), 0.08), transparent);
    animation: cl-line-glow 12s ease-in-out infinite alternate;
}
.cl-lines::before { left: 25%; animation-delay: 0s; }
.cl-lines::after  { right: 25%; animation-delay: 6s; }
@keyframes cl-line-glow { 0% { opacity: 0.15 } 100% { opacity: 0.55 } }

/* ── Main card ── */
.cl-card {
    position: relative; z-index: 10;
    width: 460px; border-radius: 24px; overflow: hidden;
    background: var(--sb-bg);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    box-shadow:
        0 0 0 1px rgba(var(--primary-rgb), 0.10),
        0 24px 80px rgba(var(--black-rgb), 0.70),
        inset 0 1px 0 rgba(var(--white-rgb), 0.07);
    animation: cl-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cl-card-in {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.cl-card::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 65%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.42), transparent);
    z-index: 2;
}

/* ── Card header ── */
.cl-head {
    padding: 26px 36px 20px;
    background: var(--sb-bg);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.20);
    position: relative;
}
.cl-live {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 30px; padding: 4px 13px 4px 10px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px;
    color: var(--primary-color); text-transform: uppercase;
    margin-bottom: 11px;
}
.cl-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.8);
    animation: cl-blink 1.6s ease-in-out infinite;
}
@keyframes cl-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }
.cl-brand {
    font-size: 28px; font-weight: 900; letter-spacing: -0.8px;
    color: var(--tx-white); line-height: 1; margin-bottom: 5px;
}
.cl-brand em {
    font-style: normal;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cl-brand-sub { font-size: 12px; color: rgba(var(--white-rgb), 0.48); letter-spacing: 0.3px; }
.cl-signal {
    position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: flex-end; gap: 4px;
}
.cl-bar {
    width: 5px; border-radius: 2px;
    background: var(--primary-color);
    animation: cl-bar-pulse 1.8s ease-in-out infinite;
}
.cl-bar:nth-child(1) { height: 8px;  opacity: 0.5;  animation-delay: 0s; }
.cl-bar:nth-child(2) { height: 14px; opacity: 0.65; animation-delay: 0.2s; }
.cl-bar:nth-child(3) { height: 20px; opacity: 0.8;  animation-delay: 0.4s; }
.cl-bar:nth-child(4) { height: 26px; opacity: 1;    animation-delay: 0.6s; }
@keyframes cl-bar-pulse { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(0.45) } }

/* ── Card body ── */
.cl-body { padding: 24px 36px 28px; background: var(--sb-bg); }
.cl-title {
    font-size: 18px; font-weight: 700; color: var(--tx-white);
    letter-spacing: -0.3px; margin-bottom: 4px;
}
.cl-subtitle {
    font-size: 13px; color: rgba(var(--white-rgb), 0.52);
    margin-bottom: 22px; letter-spacing: 0.1px;
}

/* Form fields */
.cl-field { margin-bottom: 16px; }
.cl-field-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: rgba(var(--white-rgb), 0.58);
    margin-bottom: 8px; cursor: pointer;
}
.cl-field-label i { font-size: 10px; color: var(--primary-color); }
.cl-input-wrap { position: relative; }
.cl-input {
    width: 100%; padding: 13px 44px;
    background: var(--sb-bg-2);
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 12px;
    color: var(--tx-white); font-size: 14px; font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    letter-spacing: 0.2px;
}
.cl-input::placeholder { color: rgba(var(--white-rgb), 0.30); }
.cl-input:focus {
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.cl-input-prefix {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: rgba(var(--white-rgb), 0.32); font-size: 14px;
    pointer-events: none; transition: color 0.2s;
}
.cl-input-wrap:focus-within .cl-input-prefix { color: var(--primary-color); }
.cl-pw-eye {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 6px;
    color: rgba(var(--white-rgb), 0.30); cursor: pointer;
    font-size: 14px; transition: color 0.2s; line-height: 1; border-radius: 6px;
}
.cl-pw-eye:hover { color: rgba(var(--white-rgb), 0.65); }
.cl-pw-eye:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.55); outline-offset: 2px; }

/* Divider */
.cl-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.cl-divider-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sb-border), transparent);
}
.cl-divider-text { font-size: 10px; color: rgba(var(--white-rgb), 0.35); letter-spacing: 0.5px; }

/* Submit button */
.cl-btn {
    width: 100%; padding: 14px 20px;
    background: var(--gradient-primary);
    border: none; border-radius: 12px;
    color: var(--tx-white); font-size: 14px; font-weight: 700;
    letter-spacing: 0.5px; cursor: pointer; font-family: inherit;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.32);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cl-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(var(--white-rgb), 0.12) 0%, transparent 55%);
    pointer-events: none;
}
.cl-btn::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.10), transparent);
    transition: left 0.45s ease; pointer-events: none;
}
.cl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.42); }
.cl-btn:hover::after { left: 145%; }
.cl-btn:active { transform: translateY(0); box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.28); }
.cl-btn:disabled {
    opacity: 0.72; cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.20) !important;
}
.cl-btn:focus { outline: none; border: none; }
.cl-btn:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.70); outline-offset: 3px; }
.cl-btn span {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ── Card footer ── */
.cl-foot {
    padding: 13px 36px;
    background: var(--sb-bg);
    border-top: 1px solid var(--sb-border);
    display: flex; align-items: center; justify-content: space-between;
}
.cl-foot-txt { font-size: 11px; color: rgba(var(--white-rgb), 0.42); }
.cl-foot-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--white-rgb), 0.28); }

/* Demo mode box */
.cl-demo {
    margin-top: 18px;
    background: rgba(var(--amber-rgb), 0.07);
    border: 1px solid rgba(var(--amber-rgb), 0.20);
    border-radius: 10px; padding: 12px 16px;
    font-size: 12px; color: rgba(var(--white-rgb), 0.45);
    text-align: center; line-height: 1.6;
}
.cl-demo a { color: var(--amber); text-decoration: none; font-weight: 600; }
.cl-demo a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 520px) {
    .cl-card { width: calc(100vw - 28px); border-radius: 18px; }
    .cl-head { padding: 20px 20px 16px; }
    .cl-body { padding: 20px 20px 24px; }
    .cl-foot { padding-left: 20px; padding-right: 20px; }
    .cl-signal { display: none; }
}

/* ============================================================
   STAFF DASHBOARD  —  Newsroom v2
   All colours via :root variables
   ============================================================ */

/* ── Hero band ─────────────────────────────────────────────── */
.snr-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(130deg, var(--sb-bg) 0%, var(--sb-bg-2) 55%, var(--sb-bg) 100%);
    border-radius: var(--r-xl);
    padding: 26px 32px;
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 22px;
}
.snr-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 80% at 85% 50%, rgba(var(--primary-rgb), .10) 0%, transparent 70%);
    pointer-events: none;
}
.snr-hero::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    top: -90px; right: 200px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .05);
    pointer-events: none;
}
.snr-avatar {
    width: 54px; height: 54px; border-radius: var(--r-full);
    background: var(--primary-glow);
    border: 2px solid rgba(var(--primary-rgb), .40);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 900; color: var(--tx-white);
    flex-shrink: 0; line-height: 1;
}
.snr-info { flex-shrink: 0; }
.snr-name {
    font-size: 17px; font-weight: 800; color: var(--tx-white);
    display: block; line-height: 1.2;
}
.snr-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.snr-role {
    font-size: 11px; font-weight: 700;
    background: rgba(var(--primary-rgb), .28);
    border: 1px solid rgba(var(--primary-rgb), .40);
    color: var(--red-dark); padding: 2px 10px; border-radius: var(--r-full);
}
.snr-channel { font-size: 11px; color: var(--sb-text); display: flex; align-items: center; gap: 5px; }
.snr-channel i { color: var(--blue); font-size: 10px; }
.snr-vr { width: 1px; height: 54px; background: var(--white-10); flex-shrink: 0; margin: 0 8px; }
.snr-kpis { display: flex; align-items: center; flex: 1; min-width: 0; }
.snr-kpi { flex: 1; text-align: center; padding: 0 14px; border-right: 1px solid var(--white-08); }
.snr-kpi:last-child { border-right: none; }
.snr-kpi-ico { font-size: 12px; margin-bottom: 5px; display: block; }
.snr-kpi-n { display: block; font-size: 26px; font-weight: 900; color: var(--tx-white); letter-spacing: -1px; line-height: 1; }
.snr-kpi-l { display: block; font-size: 10px; color: var(--sb-text); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.snr-hero-date { flex-shrink: 0; text-align: right; font-size: 11px; color: var(--sb-text); line-height: 1.7; }
.snr-hero-date strong { display: block; color: var(--white-78); font-size: 12px; font-weight: 700; }

@media (max-width: 860px) {
    .snr-hero { flex-wrap: wrap; padding: 20px 22px; }
    .snr-vr { display: none; }
    .snr-kpis { width: 100%; }
    .snr-hero-date { display: none; }
}

/* ── Module access grid ────────────────────────────────────── */
.snr-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.snr-mod {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 15px 13px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--fast), transform var(--fast);
}
.snr-mod:hover      { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.snr-mod.snr-open   { border-top-color: var(--snr-c); }
.snr-mod.snr-locked { opacity: .5; }
.snr-mod-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.snr-mod-ico {
    width: 26px; height: 26px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0;
    background: var(--snr-bg); color: var(--snr-c);
}
.snr-mod-lbl   { font-size: 11px; font-weight: 700; color: var(--tx-secondary); }
.snr-mod-count { font-size: 28px; font-weight: 900; color: var(--tx-primary); letter-spacing: -1.5px; line-height: 1; display: block; margin-bottom: 10px; }
.snr-mod.snr-locked .snr-mod-count { color: var(--tx-muted); }
.snr-perm-row { display: flex; gap: 3px; flex-wrap: wrap; }
.snr-perm { font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .2px; }
.snr-perm-on  { background: var(--green-bg);  color: var(--green-dark); }
.snr-perm-off { background: var(--surface-2); color: var(--tx-muted); opacity: .65; }

/* module colour tokens */
.snr-c-red    { --snr-c: var(--red);     --snr-bg: var(--red-bg);       }
.snr-c-blue   { --snr-c: var(--blue);    --snr-bg: var(--blue-bg);      }
.snr-c-purple { --snr-c: var(--purple);  --snr-bg: var(--purple-bg);    }
.snr-c-cyan   { --snr-c: var(--cyan);    --snr-bg: var(--cyan-bg);      }
.snr-c-green  { --snr-c: var(--green);   --snr-bg: var(--green-bg);     }
.snr-c-amber  { --snr-c: var(--amber);   --snr-bg: var(--amber-bg);     }
.snr-c-orange { --snr-c: var(--orange);  --snr-bg: var(--orange-bg);    }
.snr-c-prim   { --snr-c: var(--primary); --snr-bg: var(--primary-light);}

/* ── Bottom three-column grid ──────────────────────────────── */
.snr-bottom { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; align-items: start; }
.snr-bottom > * { min-width: 0; }
@media (max-width: 1200px) { .snr-bottom { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .snr-bottom { grid-template-columns: 1fr; } }

/* ── Panels ────────────────────────────────────────────────── */
.snr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; margin-bottom: 0; }
.snr-panel-hd { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.snr-panel-title { font-size: 13px; font-weight: 700; color: var(--tx-primary); margin: 0; display: flex; align-items: center; gap: 7px; }
.snr-panel-badge { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--tx-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 2px 8px; border-radius: var(--r-full); }

/* ── Recent articles ───────────────────────────────────────── */
.snr-art-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); transition: background var(--fast); }
.snr-art-row:last-child { border-bottom: none; }
.snr-art-row:hover { background: var(--surface-2); }
.snr-thumb { width: 64px; height: 46px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.snr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.snr-status { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.snr-st-pub   { background: var(--green-bg); color: var(--green-dark); }
.snr-st-draft { background: var(--amber-bg); color: var(--amber); }
.snr-art-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tx-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr-art-stats { display: flex; gap: 10px; font-size: 11px; color: var(--tx-muted); flex-shrink: 0; }
.snr-art-stats i { font-size: 9px; margin-right: 2px; }

/* ── Performance panels ────────────────────────────────────── */
.snr-perf { margin-bottom: 16px; }
.snr-perf:last-child { margin-bottom: 0; }
.snr-tabs { margin-left: auto; display: flex; gap: 2px; list-style: none; padding: 0; }
.snr-tabs li a { display: block; font-size: 10px; font-weight: 700; color: var(--tx-muted); padding: 3px 8px; border-radius: var(--r-full); border: 1px solid transparent; text-decoration: none; transition: all var(--fast); }
.snr-tabs li a:hover  { color: var(--tx-primary); background: var(--surface-2); }
.snr-tabs li a.active { color: var(--primary) !important; background: var(--primary-light) !important; border-color: rgba(var(--primary-rgb), .2) !important; }

/* ── Rank rows ─────────────────────────────────────────────── */
.snr-rank { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.snr-rank:last-child { border-bottom: none; }
.snr-rank-n { width: 19px; height: 19px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; flex-shrink: 0; background: var(--surface-2); color: var(--tx-muted); border: 1.5px solid var(--border); }
.snr-rank:nth-child(1) .snr-rank-n { background: var(--amber-bg);  color: var(--tx-secondary); border-color: var(--amber-border);  }
.snr-rank:nth-child(2) .snr-rank-n { background: var(--bg);        color: var(--tx-secondary); border-color: var(--border-strong); }
.snr-rank:nth-child(3) .snr-rank-n { background: var(--orange-bg); color: var(--red-dark);     border-color: var(--orange-border); }
.snr-rank-img { width: 34px; height: 34px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.snr-rank-img img { width: 100%; height: 100%; object-fit: cover; }
.snr-rank-body { flex: 1; min-width: 0; }
.snr-rank-title { font-size: 11px; font-weight: 600; color: var(--tx-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 4px; }
.snr-bar-bg { height: 3px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.snr-bar    { height: 100%; border-radius: var(--r-full); }
.snr-rank-val { font-size: 11px; font-weight: 800; color: var(--tx-secondary); flex-shrink: 0; min-width: 28px; text-align: right; }

/* ── Empty state ───────────────────────────────────────────── */
.snr-empty   { padding: 24px; text-align: center; color: var(--tx-muted); }
.snr-empty i { display: block; font-size: 22px; opacity: .35; margin-bottom: 7px; }

/* ================================================================
   STAFF LOGIN — "Broadcast Desk" Design
   All colors via :root CSS variables only
   ================================================================ */

.sf-scene {
    min-height: 100vh;
    background: var(--login-scene-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    font-family: var(--font);
}

/* Ambient background glows */
.sf-glow-a,
.sf-glow-b,
.sf-glow-c {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.sf-glow-a {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.14) 0%, transparent 68%);
    top: -180px;
    left: -120px;
    animation: sf-drift-a 20s ease-in-out infinite alternate;
}
.sf-glow-b {
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(var(--purple-rgb), 0.07) 0%, transparent 65%);
    bottom: -80px;
    right: -80px;
    animation: sf-drift-b 26s ease-in-out infinite alternate;
}
.sf-glow-c {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(var(--purple-rgb), 0.06) 0%, transparent 65%);
    top: 40%;
    left: 58%;
    animation: sf-drift-c 32s ease-in-out infinite alternate;
}

@keyframes sf-drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(70px, 50px) scale(1.08); }
    100% { transform: translate(20px, 110px) scale(0.94); }
}
@keyframes sf-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-50px, -35px) scale(1.12); }
    100% { transform: translate(-90px, 28px) scale(0.92); }
}
@keyframes sf-drift-c {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-60px, -40px); }
}

/* Subtle dot grid overlay */
.sf-dotgrid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(var(--white-rgb), 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Main content area ── */
.sf-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    position: relative;
    z-index: 1;
}

/* ── Dual-panel card ── */
.sf-card {
    display: flex;
    width: 100%;
    max-width: 840px;
    min-height: 500px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    box-shadow:
        0 0 0 1px rgba(var(--white-rgb), 0.02) inset,
        0 32px 72px rgba(var(--black-rgb), 0.55),
        0 0 60px rgba(var(--primary-rgb), 0.06);
    position: relative;
    z-index: 2;
    animation: sf-card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sf-card-in {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Left panel ── */
.sf-panel-left {
    width: 300px;
    flex-shrink: 0;
    background: var(--sb-bg);
    padding: 36px 28px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.sf-panel-left::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.16) 0%, transparent 68%);
    pointer-events: none;
}
.sf-panel-left::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--purple-rgb), 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.sf-access-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--primary-rgb), 0.13);
    border: 1px solid rgba(var(--primary-rgb), 0.24);
    color: var(--red);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    width: fit-content;
}
.sf-access-tag i { font-size: 7px; }

.sf-left-title {
    font-size: 23px;
    font-weight: 800;
    color: var(--tx-white);
    line-height: 1.22;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.sf-left-title em {
    font-style: normal;
    color: var(--primary);
}

.sf-left-desc {
    font-size: 12.5px;
    color: var(--sb-text);
    line-height: 1.65;
    margin-bottom: 0;
}

.sf-divider-h {
    height: 1px;
    background: var(--sb-border);
    margin: 22px 0;
}

.sf-modules-label {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--sb-section);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sf-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    flex: 1;
    align-content: start;
}

.sf-chip {
    background: rgba(var(--white-rgb), 0.025);
    border: 1px solid var(--sb-border);
    border-radius: 9px;
    padding: 9px 5px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: default;
    transition: background 0.22s, border-color 0.22s, transform 0.18s;
    opacity: 0;
    animation: sf-chip-in 0.45s ease forwards;
}
.sf-chip:hover {
    background: rgba(var(--primary-rgb), 0.09);
    border-color: var(--primary-glow);
    transform: translateY(-2px);
}
.sf-chip:hover .sf-chip-icon { color: var(--red); }

.sf-chip-icon {
    font-size: 14px;
    color: var(--sb-icon-muted);
    transition: color 0.18s;
    line-height: 1;
}
.sf-chip-name {
    font-size: 9px;
    color: var(--sb-text);
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

@keyframes sf-chip-in {
    from { opacity: 0; transform: scale(0.88) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.sf-chip:nth-child(1)  { animation-delay: 0.08s; }
.sf-chip:nth-child(2)  { animation-delay: 0.13s; }
.sf-chip:nth-child(3)  { animation-delay: 0.18s; }
.sf-chip:nth-child(4)  { animation-delay: 0.23s; }
.sf-chip:nth-child(5)  { animation-delay: 0.28s; }
.sf-chip:nth-child(6)  { animation-delay: 0.33s; }
.sf-chip:nth-child(7)  { animation-delay: 0.38s; }
.sf-chip:nth-child(8)  { animation-delay: 0.43s; }
.sf-chip:nth-child(9)  { animation-delay: 0.48s; }
.sf-chip:nth-child(10) { animation-delay: 0.53s; }
.sf-chip:nth-child(11) { animation-delay: 0.58s; }

/* ── Vertical separator ── */
.sf-vsep {
    width: 1px;
    background: var(--sb-border);
    flex-shrink: 0;
    position: relative;
}
.sf-vsep::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -2px;
    width: 5px;
    height: 16px;
    border-radius: 3px;
    background: var(--primary);
    opacity: 0.75;
    animation: sf-sep-slide 3.5s ease-in-out infinite;
}
@keyframes sf-sep-slide {
    0%   { top: -16px; opacity: 0; }
    10%  { opacity: 0.75; }
    90%  { opacity: 0.75; }
    100% { top: calc(100% + 16px); opacity: 0; }
}

/* ── Right panel ── */
.sf-panel-right {
    flex: 1;
    background: var(--sb-bg-2);
    padding: 40px 40px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.sf-panel-right::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.25), transparent);
    pointer-events: none;
}

.sf-form-header { margin-bottom: 28px; }
.sf-welcome-line {
    font-size: 25px;
    font-weight: 800;
    color: var(--tx-white);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 6px;
}
.sf-welcome-sub {
    font-size: 13px;
    color: var(--sb-text);
    line-height: 1.5;
}

.sf-field { margin-bottom: 18px; }
.sf-field-lbl {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sb-section);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.sf-input-wrap { position: relative; }
.sf-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sb-icon-muted);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s;
    z-index: 1;
}
.sf-input {
    width: 100%;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    padding: 12px 14px 12px 42px;
    color: var(--tx-white);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
    -webkit-appearance: none;
    appearance: none;
}
.sf-input::placeholder { color: var(--sb-icon-muted); }
.sf-input:focus {
    border-color: rgba(var(--primary-rgb), 0.48);
    background: rgba(var(--primary-rgb), 0.04);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.sf-input-wrap:focus-within .sf-input-icon { color: var(--red); }

.sf-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--sb-icon-muted);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    font-size: 13px;
    transition: color 0.2s;
    z-index: 1;
}
.sf-pw-toggle:hover { color: var(--sb-text-hover); }

.sf-btn {
    width: 100%;
    background: var(--primary);
    color: var(--tx-white);
    border: none;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    position: relative;
    overflow: hidden;
    transition: background 0.2s, transform 0.15s, box-shadow 0.22s;
    letter-spacing: 0.01em;
}
.sf-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.1), transparent);
    transform: skewX(-15deg);
    animation: sf-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sf-shimmer {
    0%   { left: -100%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}
.sf-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.38);
    transform: translateY(-1px);
}
.sf-btn:active { transform: translateY(0); }
.sf-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.sf-btn:focus { outline: none; border: none; }

.sf-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(var(--white-rgb), 0.18);
    transform: scale(0);
    animation: sf-ripple-anim 0.55s ease-out forwards;
    pointer-events: none;
}
@keyframes sf-ripple-anim {
    to { transform: scale(3); opacity: 0; }
}

.sf-demo-box {
    margin-top: 18px;
    padding: 11px 15px;
    background: rgba(var(--amber-rgb), 0.07);
    border: 1px solid rgba(var(--amber-rgb), 0.18);
    border-radius: 8px;
    font-size: 12px;
    color: var(--sb-text);
    text-align: center;
    line-height: 1.5;
}
.sf-demo-box a { color: var(--amber); text-decoration: none; font-weight: 600; }
.sf-demo-box a:hover { text-decoration: underline; }

.sf-panel-foot {
    margin-top: auto;
    padding-top: 22px;
    font-size: 11px;
    color: var(--sb-section);
    text-align: center;
    letter-spacing: 0.01em;
}
.sf-panel-foot .sf-foot-sep { margin: 0 6px; opacity: 0.5; }

@media (max-width: 720px) {
    .sf-panel-left, .sf-vsep { display: none; }
    .sf-card { max-width: 440px; min-height: auto; }
    .sf-panel-right { padding: 32px 24px 24px; justify-content: flex-start; }
}
@media (max-width: 480px) {
    .sf-main { padding: 20px 12px; }
    .sf-panel-right { padding: 28px 20px 20px; }
}
.snr-empty p { font-size: 12px; margin: 0; }

/* ── Theme toggle icon — CSS-driven, no JS flash ── */
.theme-icon-moon { display: inline; }
.theme-icon-sun  { display: none;   }

[data-theme="dark"]  .theme-icon-moon { 
    display: none;   
}
[data-theme="dark"]  .theme-icon-sun  { 
    display: inline; 
}
[data-theme="light"] .theme-icon-moon { 
    display: inline; 
}
[data-theme="light"] .theme-icon-sun  { 
    display: none;   
}

/* ── Smooth theme switch ── */
body,
.sidebar,
.header,
.right-content,
.custom-border-card,
.modal-content,
.dropdown-menu,
.form-control {
    transition:
        background-color 0.25s var(--ease),
        border-color     0.25s var(--ease),
        color            0.25s var(--ease),
        box-shadow       0.25s var(--ease);
}

/* ── Dark: body ── */
[data-theme="dark"] body {
    background: var(--bg);
    color: var(--tx-primary);
}

/* ── Dark: headings & text ── */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--tx-primary); }
[data-theme="dark"] p { color: var(--tx-secondary); }
[data-theme="dark"] label { color: var(--tx-secondary); }
[data-theme="dark"] .form-group label { color: var(--tx-secondary); }
[data-theme="dark"] .custom-control-label { color: var(--tx-secondary); }

/* ── Dark: form controls ── */
[data-theme="dark"] .form-control {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--tx-primary);
}
[data-theme="dark"] .form-control:focus {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--tx-primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
[data-theme="dark"] .form-control::placeholder { color: var(--tx-muted); }
[data-theme="dark"] select.form-control option { background: var(--surface-2); color: var(--tx-primary); }

/* ── Dark: modals ── */
[data-theme="dark"] .modal-content {
    background: var(--surface);
    border-color: var(--border);
    color: var(--tx-primary);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--border);
 }
[data-theme="dark"] .modal-title { color: var(--sb-bg); }
[data-theme="dark"] .close { color: var(--sb-bg); opacity: 0.7; }
[data-theme="dark"] .close:hover { color: var(--sb-bg); opacity: 1; }
[data-theme="dark"] button.btn-close { filter: invert(1); }

/* ── Dark: tables ── */
[data-theme="dark"] .table { color: var(--tx-primary); }
[data-theme="dark"] .table thead th {
    background: var(--surface-2) !important;
    color: var(--tx-muted) !important;
    border-color: var(--border) !important;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--border) !important; }
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th { border-color: var(--border) !important; }

/* Beat dataTables.bootstrap4 hardcoded .odd / .even row colours */
[data-theme="dark"] table.dataTable,
[data-theme="dark"] .table {
    background-color: var(--surface) !important;
}
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody tr.odd,
[data-theme="dark"] table.dataTable tbody tr.even,
[data-theme="dark"] .table > tbody > tr {
    background-color: var(--surface) !important;
    color: var(--tx-primary) !important;
}
/* Subtle stripe on even rows */
[data-theme="dark"] table.dataTable tbody tr.even,
[data-theme="dark"] table.dataTable.table-striped tbody tr.even,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--surface-2) !important;
}
/* All cells inherit row bg */
[data-theme="dark"] table.dataTable tbody tr > td,
[data-theme="dark"] table.dataTable tbody tr > th,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th {
    background-color: inherit !important;
    color: var(--tx-primary) !important;
    border-color: var(--border) !important;
}
/* Hover */
[data-theme="dark"] table.dataTable tbody tr:hover,
[data-theme="dark"] table.dataTable tbody tr.odd:hover,
[data-theme="dark"] table.dataTable tbody tr.even:hover,
[data-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: rgba(var(--primary-rgb), 0.07) !important;
    color: var(--tx-primary) !important;
}
/* DataTables sorted column highlight */
[data-theme="dark"] table.dataTable thead .sorting_asc,
[data-theme="dark"] table.dataTable thead .sorting_desc {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary) !important;
}
[data-theme="dark"] table.dataTable tbody td.sorting_1,
[data-theme="dark"] table.dataTable tbody td.sorting_2,
[data-theme="dark"] table.dataTable tbody td.sorting_3 {
    background-color: rgba(var(--primary-rgb), 0.04) !important;
}
/* Empty state */
[data-theme="dark"] table.dataTable tbody td.dataTables_empty {
    background-color: var(--surface) !important;
    color: var(--tx-muted) !important;
}

/* ── Dark: table row transitions for smooth hover ── */
[data-theme="dark"] table.dataTable tbody tr {
    transition: background-color 0.12s ease !important;
}

/* ── Dark: table wrapper / responsive container ── */
[data-theme="dark"] .table-responsive {
    background: transparent;
}
[data-theme="dark"] .dataTables_wrapper {
    background: transparent;
    color: var(--tx-primary);
}

/* ── Dark: cards & filter bar ── */
[data-theme="dark"] .custom-border-card {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .custom-border-card .card-header {
    color: var(--tx-primary);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .filter-search,
[data-theme="dark"] .filter-select-wrap {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .filter-input {
    color: var(--tx-primary);
}
[data-theme="dark"] .filter-input::placeholder {
    color: var(--tx-muted);
}
[data-theme="dark"] .filter-select {
    background: var(--surface);
    color: var(--tx-primary);
    border: none;
    color-scheme: dark;
}
[data-theme="dark"] .filter-select option {
    background: var(--surface-2);
    color: var(--tx-primary);
}

/* ── Dark: dropdowns ── */
[data-theme="dark"] .dropdown-menu {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .dropdown-item { color: var(--tx-primary); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background: var(--surface-2); color: var(--tx-primary); }
[data-theme="dark"] .dropdown-divider { border-color: var(--border); }

/* ── Dark: Select2
   Select2 CDN <link> is placed inside @section('content') so it loads AFTER
   style.css. !important is required on every property so our dark overrides
   win over the library's default white-background rules.
── */

/* Selection box (closed state) */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: var(--surface-2) !important;
    border: 1.5px solid var(--border-strong) !important;
}

/* Open / focus ring */
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple,
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color) !important;
}

/* Selected / placeholder text */
[data-theme="dark"] .select2-selection__rendered { color: var(--tx-primary) !important; }
[data-theme="dark"] .select2-selection__placeholder { color: var(--tx-muted) !important; }

/* Dropdown arrow */
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tx-muted) transparent transparent transparent !important;
}
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary-color) transparent !important;
}

/* Multiple-select choice tags */
[data-theme="dark"] .select2-selection__choice {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--tx-primary) !important;
}
[data-theme="dark"] .select2-selection__choice__remove {
    color: var(--tx-muted) !important;
    border-right: 1px solid var(--border-strong) !important;
}
[data-theme="dark"] .select2-selection__choice__remove:hover {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Dropdown panel */
[data-theme="dark"] .select2-dropdown {
    background: var(--surface) !important;
    border: 1.5px solid var(--border-strong) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Search field inside dropdown */
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--surface-2) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--tx-primary) !important;
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--tx-muted) !important;
}

/* Results list */
[data-theme="dark"] .select2-results__options { background: var(--surface) !important; }
[data-theme="dark"] .select2-results__option {
    background: transparent !important;
    color: var(--tx-primary) !important;
}
[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}
[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary-color) !important;
}

/* Filter-bar Select2 variant (index/list pages) */
[data-theme="dark"] .filter-select-wrap .select2-container--default .select2-selection--single {
    background: var(--surface) !important;
    border-color: var(--surface) !important;
    width: 100% !important;
}


[data-theme="dark"] input[type="date"] {
    color-scheme: dark;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    cursor: pointer;
    opacity: 0.75;
}

/* ── Dark: Ads type badges (image overlay)
   Light mode uses pastel backgrounds that work on white cards.
   Dark mode needs opaque colored backgrounds so the badge reads
   clearly when sitting on top of a photo. White text gives the
   best contrast on any of the three accent colors.
── */
[data-theme="dark"] .ads-type-badge--banner {
    background: rgba(59, 130, 246, 0.82);
    color: #ffffff;
    border-color: rgba(147, 197, 253, 0.3);
}
[data-theme="dark"] .ads-type-badge--interstitial {
    background: rgba(217, 119, 6, 0.85);
    color: #ffffff;
    border-color: rgba(252, 211, 77, 0.3);
}
[data-theme="dark"] .ads-type-badge--reward {
    background: rgba(109, 40, 217, 0.82);
    color: #ffffff;
    border-color: rgba(196, 181, 253, 0.3);
}

/* ── Dark: DataTables ── */
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: var(--tx-secondary); }
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--tx-primary);
}
[data-theme="dark"] .page-item .page-link {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--tx-secondary);
}
[data-theme="dark"] .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--tx-white);
}
[data-theme="dark"] .page-item.disabled .page-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--tx-muted);
}

/* ── Dark: sidebar ── */
[data-theme="dark"] .sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Dark: sidebar submenu dropdown stays transparent ── */
[data-theme="dark"] .sidebar .side-menu .dropdown-menu {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* ── Dark: header ── */
[data-theme="dark"] .header {
    background: var(--surface-glass);
    border-bottom-color: var(--header-border-alpha);
    box-shadow: var(--header-shadow);
}
[data-theme="dark"] .header .page-title { color: var(--tx-primary); }
[data-theme="dark"] .header .head-control .head-btn {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--tx-secondary);
}
[data-theme="dark"] .header .head-control .head-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
[data-theme="dark"] .head-profile {
    background: var(--surface-2);
    border-color: var(--border);
}
[data-theme="dark"] .head-divider,
[data-theme="dark"] .header-divider { background: var(--border); }

/* ── Dark: sortable list items ── */
[data-theme="dark"] .listitemClass {
    background: var(--surface-2);
    color: var(--tx-primary);
    border-color: var(--border);
}

/* ================================================================
   ADMIN LOGIN — light theme overrides
   ================================================================ */
[data-theme="light"] .ln-scene { background: var(--bg); }
[data-theme="light"] .ln-orb-1 {
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.07) 0%, transparent 70%);
}
[data-theme="light"] .ln-orb-2 {
    background: radial-gradient(circle, rgba(var(--purple-rgb), 0.05) 0%, transparent 70%);
}
[data-theme="light"] .ln-orb-3 {
    background: radial-gradient(circle, rgba(var(--amber-rgb), 0.05) 0%, transparent 70%);
}
[data-theme="light"] .ln-grid {
    background-image:
        linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
}
[data-theme="light"] .ln-particle { background: rgba(var(--primary-rgb), 0.18); }
[data-theme="light"] .ln-scanlines {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(var(--black-rgb), 0.015) 2px,
        rgba(var(--black-rgb), 0.015) 4px
    );
}
[data-theme="light"] .ln-separator {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(var(--primary-rgb), 0.2) 30%,
        rgba(var(--primary-rgb), 0.2) 70%,
        transparent 100%
    );
}
[data-theme="light"] .ln-brand { color: var(--tx-primary); }
[data-theme="light"] .ln-tagline { color: var(--tx-secondary); }
[data-theme="light"] .ln-ticker-item { color: var(--tx-secondary); }
[data-theme="light"] .ln-stat-num { color: var(--tx-primary); }
[data-theme="light"] .ln-stat:not(:last-child) {
    border-right-color: var(--border);
}
[data-theme="light"] .ln-stat-lbl { color: var(--tx-muted); }
[data-theme="light"] .ln-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-xl);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .ln-card-title { color: var(--tx-primary); }
[data-theme="light"] .ln-card-sub { color: var(--tx-muted); }
[data-theme="light"] .ln-field input {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--tx-primary);
}
[data-theme="light"] .ln-field input:focus {
    background: var(--surface);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 4px var(--primary-light);
}
[data-theme="light"] .ln-field label { color: var(--tx-muted); }
[data-theme="light"] .ln-field input:focus ~ label,
[data-theme="light"] .ln-field input:not(:placeholder-shown) ~ label { color: var(--primary); }
[data-theme="light"] .ln-field-icon { color: var(--tx-muted); opacity: 0.6; }
[data-theme="light"] .ln-toggle { color: var(--tx-muted); }
[data-theme="light"] .ln-toggle:hover { color: var(--primary); }
[data-theme="light"] .ln-demo-box {
    background: rgba(var(--amber-rgb), 0.07);
    border-color: rgba(var(--amber-rgb), 0.2);
}
[data-theme="light"] .ln-demo-box p { color: var(--tx-secondary); }
[data-theme="light"] .ln-card-foot { color: var(--tx-muted); }
[data-theme="light"] .ln-card-foot::before,
[data-theme="light"] .ln-card-foot::after { background: var(--border); }

/* ── Login / floating theme toggle button ── */
.ln-theme-btn {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: var(--r-full);
    border: 1px solid rgba(var(--white-rgb), 0.12);
    background: rgba(var(--white-rgb), 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(var(--white-rgb), 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: background var(--fast), color var(--fast), border-color var(--fast);
    padding: 0;
    line-height: 1;
}
.ln-theme-btn:hover {
    background: rgba(var(--white-rgb), 0.14);
    color: var(--white-color);
    border-color: rgba(var(--white-rgb), 0.22);
}
[data-theme="light"] .ln-theme-btn {
    border-color: var(--border);
    background: var(--surface);
    color: var(--tx-secondary);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .ln-theme-btn:hover {
    background: var(--surface-2);
    color: var(--primary);
}

/* ================================================================
   CHANNEL LOGIN PAGE — light theme overrides  (.cl-*)
   Base dark styles live with the .cl-* block above.
================================================================ */
[data-theme="light"] { --login-scene-bg: #eef1f8; }

[data-theme="light"] .cl-scene { background: var(--login-scene-bg); }

[data-theme="light"] .cl-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow:
        0 0 0 1px rgba(var(--primary-rgb), 0.08),
        0 24px 80px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

[data-theme="light"] .cl-head {
    background: var(--surface);
    border-bottom-color: var(--border);
}

[data-theme="light"] .cl-brand { color: var(--tx-primary); }
[data-theme="light"] .cl-brand-sub { color: var(--tx-muted); }

[data-theme="light"] .cl-body { background: var(--surface); }

[data-theme="light"] .cl-title { color: var(--tx-primary); }
[data-theme="light"] .cl-subtitle { color: var(--tx-secondary); }

[data-theme="light"] .cl-field-label { color: rgba(15, 23, 42, 0.55); }

[data-theme="light"] .cl-input {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--tx-primary);
}
[data-theme="light"] .cl-input::placeholder { color: rgba(15, 23, 42, 0.35); }
[data-theme="light"] .cl-input:focus {
    background: var(--surface);
    border-color: rgba(var(--primary-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10);
}

[data-theme="light"] .cl-input-prefix { color: rgba(15, 23, 42, 0.35); }
[data-theme="light"] .cl-input-wrap:focus-within .cl-input-prefix { color: var(--primary-color); }

[data-theme="light"] .cl-pw-eye { color: rgba(15, 23, 42, 0.40); }
[data-theme="light"] .cl-pw-eye:hover { color: var(--tx-primary); }

[data-theme="light"] .cl-divider-line {
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
[data-theme="light"] .cl-divider-text { color: rgba(15, 23, 42, 0.40); }

[data-theme="light"] .cl-foot {
    background: var(--surface-2);
    border-top-color: var(--border);
}
[data-theme="light"] .cl-foot-txt { color: var(--tx-muted); }
[data-theme="light"] .cl-foot-dot { background: var(--border-strong); }

[data-theme="light"] .cl-demo { color: var(--tx-secondary); }

/* ================================================================
   CHANNEL DASHBOARD HERO — light theme overrides  (.ch-hero)
   Base dark styles live with the .ch-hero block above.
================================================================ */

/* 1. Red-tinted background — clearly distinct from the #f1f5f9 page body */
[data-theme="light"] .ch-hero {
    background: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    box-shadow: var(--shadow-lg);
}

/* 2. Channel name — dark text readable on tinted bg */
[data-theme="light"] .ch-hero-name { color: var(--tx-primary); }

/* 3. Stat count numbers — primary red for visual emphasis */
[data-theme="light"] .ch-hero-stat strong { color: var(--primary-color); }

/* 4. Edit Profile button — visible red outlined CTA */
[data-theme="light"] .ch-hero-edit-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
[data-theme="light"] .ch-hero-edit-btn:hover {
    background: var(--primary-color);
    color: var(--tx-white);
    opacity: 1;
}

/* ================================================================
   STAFF LOGIN PAGE — light theme overrides  (.sf-*)
   Base dark styles live with the .sf-* block above.
   Scene background reuses --login-scene-bg already overridden above.
================================================================ */

/* Dot-grid: white dots → dark dots in light mode */
[data-theme="light"] .sf-dotgrid {
    background-image: radial-gradient(circle, rgba(var(--black-rgb), 0.05) 1px, transparent 1px);
}

/* Card: lose the heavy dark shadow */
[data-theme="light"] .sf-card {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04) inset,
        0 32px 72px rgba(15, 23, 42, 0.10),
        0 0 60px rgba(var(--primary-rgb), 0.04);
}

/* Left panel title: was var(--tx-white) = always #fff */
[data-theme="light"] .sf-left-title { color: var(--tx-primary); }

/* Module chips: white ghost bg → solid white card with visible border */
[data-theme="light"] .sf-chip {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="light"] .sf-chip:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
}

/* Welcome heading: was var(--tx-white) = always #fff */
[data-theme="light"] .sf-welcome-line { color: var(--tx-primary); }

/* Input: white-ghost bg + white text → visible surface + dark text */
[data-theme="light"] .sf-input {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--tx-primary);
}
[data-theme="light"] .sf-input::placeholder { color: var(--tx-muted); }
[data-theme="light"] .sf-input:focus {
    background: var(--surface);
    border-color: rgba(var(--primary-rgb), 0.48);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Password toggle: normal + hover states */
[data-theme="light"] .sf-pw-toggle       { color: var(--tx-muted); }
[data-theme="light"] .sf-pw-toggle:hover { color: var(--tx-primary); }

/* Right panel: clean white surface */
[data-theme="light"] .sf-panel-right { background: var(--surface); }

/* Left panel — labels and body text */
[data-theme="light"] .sf-left-desc     { color: var(--tx-secondary); }
[data-theme="light"] .sf-modules-label { color: var(--tx-secondary); }

/* Chip icons: stronger, readable against white chips */
[data-theme="light"] .sf-chip-icon { color: var(--tx-secondary); }

/* Form labels, prefix icons */
[data-theme="light"] .sf-field-lbl  { color: var(--tx-secondary); }
[data-theme="light"] .sf-input-icon { color: var(--tx-muted); }

/* Welcome subtitle */
[data-theme="light"] .sf-welcome-sub { color: var(--tx-secondary); }

/* Footer copyright line */
[data-theme="light"] .sf-panel-foot { color: var(--tx-muted); }

/* ──────────────────────────────────────────────────────────
   STAFF DASHBOARD — light-mode overrides (.snr-*)
──────────────────────────────────────────────────────────── */

/* Hero card: lift off the page bg with a white surface + border + shadow */
[data-theme="light"] .snr-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Staff name: was white text, now dark */
[data-theme="light"] .snr-name { color: var(--tx-primary); }

/* Avatar initial: primary-glow bg is very light in light mode, use primary color text */
[data-theme="light"] .snr-avatar { color: var(--primary-color); }

/* Role pill: readable primary text on subtle background */
[data-theme="light"] .snr-role {
    background: var(--primary-light);
    border-color: rgba(var(--primary-rgb), .30);
    color: var(--primary-dark);
}

/* Vertical rule: near-invisible white alpha → solid border */
[data-theme="light"] .snr-vr { background: var(--border-strong); }

/* KPI column dividers: near-invisible white alpha → solid border */
[data-theme="light"] .snr-kpi { border-right-color: var(--border); }

/* KPI numbers: was white, now dark */
[data-theme="light"] .snr-kpi-n { color: var(--tx-primary); }

/* Date strong text: was semi-transparent white, now readable secondary */
[data-theme="light"] .snr-hero-date strong { color: var(--tx-secondary); }

/* ================================================================
   ADMIN DASHBOARD  —  .adm-* namespace
   Exclusively for admin/dashboard. Both light + dark supported.
================================================================ */

/* ── Overview Strip ── */
.adm-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 18px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.adm-strip-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 180px;
}
.adm-strip-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px var(--primary-glow);
}
.adm-strip-title  { font-size: 16px; font-weight: 800; color: var(--tx-primary); margin: 0; line-height: 1.2; }
.adm-strip-sub    { font-size: 11px; color: var(--tx-muted); font-weight: 500; margin-top: 2px; }
.adm-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    padding: 4px 10px;
    border-radius: var(--r-full);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.adm-live-pill::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: admPulse 1.8s ease-in-out infinite;
}
@keyframes admPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.85); }
}
.adm-vr { width:1px; height:36px; background: var(--border); flex-shrink: 0; }
.adm-strip-stats { display:flex; gap:20px; }
.adm-strip-stat  { display:flex; flex-direction:column; align-items:center; gap:2px; }
.adm-strip-stat strong { font-size:15px; font-weight:800; color:var(--tx-primary); line-height:1; }
.adm-strip-stat span   { font-size:10px; color:var(--tx-muted); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.adm-strip-date { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tx-muted); font-weight:500; white-space:nowrap; }

/* ── Section Divider ── */
.adm-sec {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--tx-muted);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.adm-sec::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── KPI Grid ── */
.adm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.adm-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--adm-ac, var(--primary-color));
    border-radius: var(--r-lg);
    padding: 18px 18px 14px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--fast), transform var(--fast), border-color var(--fast);
    box-shadow: var(--shadow-xs);
}
.adm-kpi:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.adm-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.adm-kpi-lbl {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--tx-muted);
    line-height: 1;
}
.adm-kpi-ico {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: var(--adm-ic-bg, var(--primary-light));
    color: var(--adm-ac, var(--primary-color));
    flex-shrink: 0;
}
.adm-kpi-val {
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--tx-primary);
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 5px;
}
.adm-kpi-hint { font-size: 11px; color: var(--tx-muted); font-weight: 500; }

/* Color tokens */
.adm-c-primary { --adm-ac: var(--primary-color); --adm-ic-bg: var(--primary-light); }
.adm-c-blue    { --adm-ac: var(--blue);   --adm-ic-bg: var(--blue-bg);   }
.adm-c-green   { --adm-ac: var(--green);  --adm-ic-bg: var(--green-bg);  }
.adm-c-amber   { --adm-ac: var(--amber);  --adm-ic-bg: var(--amber-bg);  }
.adm-c-purple  { --adm-ac: var(--purple); --adm-ic-bg: var(--purple-bg); }
.adm-c-cyan    { --adm-ac: var(--cyan);   --adm-ic-bg: var(--cyan-bg);   }
.adm-c-orange  { --adm-ac: var(--orange); --adm-ic-bg: var(--orange-bg); }
.adm-c-red     { --adm-ac: var(--red);    --adm-ic-bg: var(--red-bg);    }

/* ── Panel ── */
.adm-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 24px;
}
.adm-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}
.adm-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tx-primary);
    margin: 0;
    line-height: 1.3;
}
.adm-panel-title i { color: var(--primary-color); font-size: 13px; }
.adm-panel-acts { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.adm-panel-body { padding: 16px 20px 20px; }

/* Toggle button */
.adm-tbtn {
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--tx-muted);
    cursor: pointer;
    transition: all var(--fast);
    line-height: 1.4;
}
.adm-tbtn:hover, .adm-tbtn.on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.adm-link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity var(--fast);
    white-space: nowrap;
}
.adm-link:hover { opacity:.7; color: var(--primary-color); }

/* ── Content type tabs ── */
.adm-ctabs {
    display: flex;
    gap: 4px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
}
.adm-ctab {
    font-size: 12px; font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    color: var(--tx-muted);
    cursor: pointer;
    transition: all var(--fast);
}
.adm-ctab:hover   { background: var(--surface-2); color: var(--tx-primary); }
.adm-ctab.on      { background: var(--primary-light); color: var(--primary-color); }

/* ── Rank list ── */
.adm-list { display:flex; flex-direction:column; gap:2px; padding:8px 16px 14px; }
.adm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    transition: background var(--fast);
}
.adm-row:hover { background: var(--surface-2); }
.adm-badge {
    width: 26px; height: 26px;
    border-radius: var(--r-xs);
    display: flex; align-items:center; justify-content:center;
    font-size: 11px; font-weight: 800;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--tx-muted);
    border: 1px solid var(--border);
}
.adm-badge.r1 { background:var(--amber-bg);  color:var(--amber);  border-color:var(--amber-border); }
.adm-badge.r2 { background:var(--blue-bg);   color:var(--blue);   border-color:var(--blue-border);  }
.adm-badge.r3 { background:var(--orange-bg); color:var(--orange); border-color:var(--orange-border);}
.adm-thumb {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
}
.adm-ch-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 2px solid var(--border);
}
.adm-row-info { flex:1; min-width:0; }
.adm-row-name {
    font-size: 13px; font-weight: 600; color: var(--tx-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.adm-row-meta { font-size: 11px; color: var(--tx-muted); font-weight:500; margin-top:2px; }
.adm-row-stat {
    display:flex; align-items:center; gap:4px;
    font-size: 12px; font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap; flex-shrink: 0;
}
.adm-ch-stat { color: var(--blue); }

/* ── Dark overrides ── */
[data-theme="dark"] .adm-strip,
[data-theme="dark"] .adm-kpi,
[data-theme="dark"] .adm-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .adm-row:hover  { background: rgba(255,255,255,.04); }
[data-theme="dark"] .adm-ctab:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .adm-tbtn       { border-color: var(--border); }

/* ── Responsive ── */
@media (max-width: 991px) {
    .adm-kpi-grid   { grid-template-columns: repeat(2,1fr); }
    .adm-strip-stats, .adm-vr { display:none; }
}
@media (max-width: 575px) {
    .adm-kpi-grid { gap:12px; }
    .adm-kpi-val  { font-size:1.6rem; }
}

/* ================================================================
   SUMMERNOTE DARK THEME
================================================================ */
[data-theme="dark"] .note-editor.note-frame,
[data-theme="dark"] .note-editor.note-airframe {
    border-color: var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
}
/* Toolbar */
[data-theme="dark"] .note-editor .note-toolbar {
    background: var(--surface-2);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .note-editor .note-toolbar .note-btn,
[data-theme="dark"] .note-editor .note-toolbar .btn-default,
[data-theme="dark"] .note-editor .note-toolbar .btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--tx-primary);
}
[data-theme="dark"] .note-editor .note-toolbar .note-btn:hover,
[data-theme="dark"] .note-editor .note-toolbar .btn-default:hover,
[data-theme="dark"] .note-editor .note-toolbar .btn:hover {
    background: var(--surface-2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
[data-theme="dark"] .note-editor .note-toolbar .note-btn.active,
[data-theme="dark"] .note-editor .note-toolbar .btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
/* Btn group separators */
[data-theme="dark"] .note-editor .note-toolbar .btn-group {
    border-color: var(--border);
}
[data-theme="dark"] .note-editor .note-toolbar .note-style h1,
[data-theme="dark"] .note-editor .note-toolbar .note-style h2,
[data-theme="dark"] .note-editor .note-toolbar .note-style h3,
[data-theme="dark"] .note-editor .note-toolbar .note-style p {
    color: var(--tx-primary);
}
/* Editable area */
[data-theme="dark"] .note-editor .note-editable {
    background: var(--surface);
    color: var(--tx-primary);
    caret-color: var(--tx-primary);
}
[data-theme="dark"] .note-editor .note-placeholder {
    color: var(--tx-muted);
}
/* Status bar */
[data-theme="dark"] .note-editor .note-statusbar {
    background: var(--surface-2);
    border-top-color: var(--border);
}
[data-theme="dark"] .note-editor .note-statusbar .note-resizebar .note-icon-bar {
    border-top-color: var(--tx-muted);
}
/* Dropdowns inside toolbar */
[data-theme="dark"] .note-editor .dropdown-menu,
[data-theme="dark"] .note-editor .note-dropdown-menu {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .note-editor .dropdown-menu .dropdown-item,
[data-theme="dark"] .note-editor .note-dropdown-menu li a {
    color: var(--tx-primary);
}
[data-theme="dark"] .note-editor .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .note-editor .note-dropdown-menu li a:hover {
    background: var(--surface-2);
    color: var(--tx-primary);
}
/* Font/size select inputs inside toolbar */
[data-theme="dark"] .note-editor .note-toolbar select,
[data-theme="dark"] .note-editor .note-toolbar input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--tx-primary);
}
/* Color picker palette */
[data-theme="dark"] .note-editor .note-color-palette .note-color-reset,
[data-theme="dark"] .note-editor .note-color-palette .note-color-select {
    color: var(--tx-primary);
    background: var(--surface-2);
    border-color: var(--border);
}
/* Modal inside Summernote (link/image dialogs) */
[data-theme="dark"] .note-modal .modal-content {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .note-modal .modal-header {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .note-modal .modal-footer {
    border-top-color: var(--border);
}
[data-theme="dark"] .note-modal .modal-title,
[data-theme="dark"] .note-modal label {
    color: var(--tx-primary);
}
[data-theme="dark"] .note-modal .form-control {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--tx-primary);
}
[data-theme="dark"] .note-modal .form-control::placeholder {
    color: var(--tx-muted);
}