*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    /* ── Design Tokens (Dark default) ── */
    :root {
      --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: rgba(37,99,235,.15); --primary-border: rgba(37,99,235,.3);
      --accent-cyan: #00d4ff;
      --success: #00ff88; --success-light: rgba(0,255,136,.1); --success-border: rgba(0,255,136,.2);
      --warning: #ff8800; --warning-light: rgba(255,136,0,.1); --warning-border: rgba(255,136,0,.2);
      --danger: #ff0066; --danger-light: rgba(255,0,102,.1); --danger-border: rgba(255,0,102,.2);
      --gray-50: rgba(255,255,255,.03); --gray-100: rgba(255,255,255,.05); --gray-200: rgba(255,255,255,.07);
      --gray-300: rgba(255,255,255,.12); --gray-400: rgba(255,255,255,.35); --gray-500: rgba(255,255,255,.45);
      --gray-600: rgba(255,255,255,.6); --gray-700: #c8ccd4; --gray-800: #e0e4ea; --gray-900: #ffffff;
      --radius: 16px; --radius-sm: 10px; --radius-xs: 6px;
      --shadow-sm: 0 2px 8px rgba(0,0,0,.2); --shadow: 0 4px 16px rgba(0,0,0,.3);
      --sidebar-w: 68px; --sidebar-w-expanded: 260px; --topbar-h: 60px;
      --border-color: rgba(255,255,255,.1); --card-bg: rgba(255,255,255,.04); --icon-bg: rgba(255,255,255,.06); --text-primary: #fff; --text-secondary: rgba(255,255,255,.5);
      --transition: 180ms ease;

      --bg-body: #06080f; --bg-card: rgba(12,18,40,.6); --bg-card-hover: rgba(12,18,40,.75);
      --bg-sidebar: #0c1222; --bg-topbar: rgba(12,18,40,.7); --bg-input: rgba(255,255,255,.05);
      --border-card: rgba(255,255,255,.07); --border-subtle: rgba(255,255,255,.04);
      --text-body: #c8ccd4; --text-heading: #ffffff;
      --card-blur: blur(40px); --card-inset: inset 0 1px 0 rgba(255,255,255,.05);
      --glass-border: 1px solid rgba(255,255,255,.07);
      --glow-primary: 0 0 20px rgba(37,99,235,.15); --glow-cyan: 0 0 20px rgba(0,212,255,.1);
    }

    /* ── Light Theme ── */
    body.light {
      --primary-light: #eff6ff; --primary-border: #bfdbfe;
      --success: #10b981; --success-light: #ecfdf5; --success-border: #a7f3d0;
      --warning: #f59e0b; --warning-light: #fffbeb; --warning-border: #fde68a;
      --danger: #ef4444; --danger-light: #fef2f2; --danger-border: #fecaca;
      --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
      --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
      --radius: 12px; --radius-sm: 8px;
      --border-color: #e5e7eb; --card-bg: #fff; --icon-bg: #f3f4f6; --text-primary: #111827; --text-secondary: #6b7280;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);

      --bg-body: #f8f9fb; --bg-card: #ffffff; --bg-card-hover: #ffffff;
      --bg-sidebar: #ffffff; --bg-topbar: #ffffff; --bg-input: #ffffff;
      --border-card: #e5e7eb; --border-subtle: #f3f4f6;
      --text-body: #1a1a2e; --text-heading: #111827;
      --card-blur: none; --card-inset: none;
      --glass-border: 1px solid #e5e7eb;
      --glow-primary: none; --glow-cyan: none;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg-body); color: var(--text-body); font-size: 14px; line-height: 1.5;
      transition: background .3s ease, color .3s ease;
    }
    body:not(.light) { background: #06080f radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0,212,255,.05) 0%, transparent 50%); background-attachment: fixed; }

    /* ── Fade-in animation ── */
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .page-section.active { animation: fadeInUp .35s ease-out; }

    /* ── Auth Screen ── */
    #auth-screen { display: flex; min-height: 100vh; background: #0f0a1a; }
    .auth-left { flex: 1; background: linear-gradient(160deg, #3c096c 0%, #240046 50%, #10002b 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 56px 44px; position: relative; overflow: hidden; }
    .auth-left::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: rgba(255,255,255,.04); border-radius: 50%; }
    .auth-left::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 200px; height: 200px; background: rgba(255,255,255,.03); border-radius: 50%; }
    .auth-left > * { position: relative; z-index: 1; }
    .auth-left .logo { font-size: 32px; font-weight: 800; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; letter-spacing: -.02em; }
    .auth-left .tagline { font-size: 20px; font-weight: 500; opacity: .9; margin-bottom: 40px; }
    .auth-usp { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; position: relative; }
    .auth-usp .usp-icon { width: 36px; height: 36px; background: rgba(255,255,255,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .auth-usp .usp-icon svg { width: 18px; height: 18px; stroke: #c77dff; fill: none; stroke-width: 2; }
    .auth-usp .usp-text h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
    .auth-usp .usp-text p { font-size: 13px; opacity: .65; }
    .auth-right { width: 480px; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; background: #fff; }
    body.light .auth-right { background: #fff; }
    .auth-right .auth-form-title { font-size: 22px; font-weight: 700; color: #0f0a1a; margin-bottom: 6px; }
    .auth-right .auth-form-sub { font-size: 14px; color: #6b7280; margin-bottom: 28px; }
    .auth-right .form-row { margin-bottom: 20px; }
    .auth-right .form-row label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #374151; }
    .auth-right .form-row input, #auth-screen .auth-right input[type="email"], #auth-screen .auth-right input[type="password"] { width: 100%; padding: 12px 16px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 14px; outline: none; font-family: inherit; transition: all .2s; background: #fafbfc; color: #1a1a2e; }
    .auth-right .form-row input:focus, #auth-screen .auth-right input:focus { border-color: #3c096c; box-shadow: 0 0 0 3px rgba(60,9,108,.08); background: #fff; color: #1a1a2e; }
    .auth-right .form-row input::placeholder, #auth-screen .auth-right input::placeholder { color: #b0b7c3; }
    .auth-right .btn-primary { width: 100%; padding: 14px; background: #3c096c; color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; }
    .auth-right .btn-primary:hover { background: #240046; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(60,9,108,.3); }
    .auth-right .btn-primary:active { transform: translateY(0); }
    .auth-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: #4b5563; }
    .auth-remember input { width: 16px; height: 16px; accent-color: #3c096c; }
    .auth-links { text-align: center; margin-top: 20px; font-size: 13px; color: #9ca3af; }
    .auth-links a { color: #3c096c; text-decoration: none; font-weight: 600; }
    .auth-links a:hover { text-decoration: underline; }
    .auth-trust { display: flex; gap: 24px; justify-content: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
    .auth-trust span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9ca3af; }
    .auth-trust svg { width: 14px; height: 14px; }

    /* ── Layout ── */
    #main { display: none; }
    .layout { display: flex; min-height: 100vh; }

    /* ── Sidebar ── */
    .sidebar { width: var(--sidebar-w); background: var(--bg-sidebar); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; transition: width .3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; border-right: var(--glass-border); }
    body:not(.light) .sidebar { background: #0c1222; }
    body.light .sidebar { background: #fff; border-right: 1px solid #e5e7eb; }
    body.light .sidebar-logo { color: #2563eb; border-bottom-color: #e5e7eb; }
    body.light .sidebar-nav a { color: #6b7280; }
    body.light .sidebar-nav a:hover { background: #f3f4f6; color: #111827; }
    body.light .sidebar-nav a.active { background: rgba(37,99,235,.08); color: #2563eb; }
    body.light .sidebar-nav a svg { opacity: .5; }
    body.light .sidebar-nav a.active svg { opacity: 1; color: #2563eb; }
    body.light .nav-category { color: #9ca3af; }
    body.light .nav-divider { background: #e5e7eb; }
    body.light .sidebar-footer { border-top-color: #e5e7eb; }
    body.light .sidebar-footer button { border-color: #e5e7eb; color: #6b7280; }
    body.light .sidebar-footer button:hover { background: #f3f4f6; border-color: #d1d5db; }
    .sidebar:hover { width: var(--sidebar-w-expanded); }
    .sidebar-logo { padding: 18px 16px; font-weight: 700; font-size: 18px; color: #fff; display: flex; align-items: center; gap: 10px; height: var(--topbar-h); white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.06); }
    .sidebar-logo span { opacity: 0; transition: opacity .2s ease .05s; }
    .sidebar:hover .sidebar-logo span { opacity: 1; }
    .sidebar-logo svg { flex-shrink: 0; }
    .sidebar-nav { flex: 1; padding: 8px 10px; overflow-y: auto; overflow-x: hidden; }
    .nav-category { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.3); padding: 20px 12px 8px; white-space: nowrap; opacity: 0; height: 0; padding: 0; overflow: hidden; transition: opacity .2s ease .05s; }
    .sidebar:hover .nav-category { opacity: 1; height: auto; padding: 20px 12px 8px; }
    .nav-divider { height: 1px; background: rgba(255,255,255,.06); margin: 4px 12px; }
    .sidebar:hover .nav-divider { margin: 8px 12px; }
    .nav-dropdown { }
    .nav-dropdown.locked .nav-dropdown-toggle { opacity: .4; }
    .nav-dropdown.locked .nav-dropdown-toggle:hover { opacity: .6; background: rgba(255,255,255,.04); }
    .nav-dropdown.locked .nav-dropdown-items { display: none !important; }
    .nav-dropdown.locked .nav-arrow { display: none !important; }
    .nav-lock-badge { display: none; margin-left: auto; color: rgba(255,255,255,.3); }
    .nav-dropdown.locked .nav-lock-badge { display: flex; align-items: center; }
    body.light .nav-dropdown.locked .nav-lock-badge { color: #9ca3af; }
    body.light .nav-dropdown.locked .nav-dropdown-toggle { opacity: .4; }
    body.light .nav-dropdown.locked .nav-dropdown-toggle:hover { opacity: .6; background: #f9fafb; }
    .nav-agent-label { display: flex; flex-direction: column; line-height: 1.2; }
    .nav-agent-name { font-weight: 600; font-size: 14px; }
    .nav-agent-role { font-size: 11px; opacity: 0.6; font-weight: 400; }
    .nav-dropdown-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: rgba(255,255,255,.45); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s ease; cursor: pointer; white-space: nowrap; }
    .nav-dropdown-toggle:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
    .nav-dropdown-toggle svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .5; }
    .nav-dropdown-toggle .nav-arrow { width: 14px; height: 14px; margin-left: auto; opacity: .3; transition: transform .35s ease, opacity .35s; display: none; }
    .sidebar:hover .nav-dropdown-toggle .nav-arrow { display: block; }
    .nav-dropdown.open .nav-dropdown-toggle .nav-arrow { transform: rotate(90deg); opacity: .6; }
    .nav-dropdown.open .nav-dropdown-toggle { color: rgba(255,255,255,.85); }
    .nav-dropdown-items { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
    .sidebar:hover .nav-dropdown.open .nav-dropdown-items { max-height: 400px; }
    .nav-dropdown-items a { padding-left: 40px; font-size: 12px; }
    .nav-dropdown-items a svg { width: 16px; height: 16px; }
    .nav-subdropdown-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: rgba(255,255,255,.45); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s ease; cursor: pointer; white-space: nowrap; }
    .nav-subdropdown-toggle:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }
    .nav-subdropdown-toggle svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .5; }
    .nav-subdropdown-toggle .nav-arrow { width: 12px; height: 12px; margin-left: auto; opacity: .3; transition: transform .35s ease, opacity .35s; display: none; }
    .sidebar:hover .nav-subdropdown-toggle .nav-arrow { display: block; }
    .nav-subdropdown.open .nav-subdropdown-toggle .nav-arrow { transform: rotate(90deg); opacity: .6; }
    .nav-subdropdown-items { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
    .sidebar:hover .nav-subdropdown.open .nav-subdropdown-items { max-height: 200px; }
    .nav-subdropdown-items a { padding-left: 32px; font-size: 12px; }
    .nav-subdropdown-items a svg { width: 16px; height: 16px; }
    body.light .nav-dropdown-toggle { color: #6b7280; }
    body.light .nav-dropdown-toggle:hover { background: #f3f4f6; color: #111827; }
    body.light .nav-dropdown.open .nav-dropdown-toggle { color: #111827; }
    body.light .nav-subdropdown-toggle { color: #9ca3af; }
    body.light .nav-subdropdown-toggle:hover { background: #f3f4f6; color: #374151; }
    .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: rgba(255,255,255,.45); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s ease; cursor: pointer; white-space: nowrap; }
    .sidebar-nav a:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
    .sidebar-nav a.active { background: rgba(37,99,235,.25); color: #5b9aff; border-left: 3px solid #5b9aff; padding-left: 9px; }
    .sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .5; }
    .sidebar-nav a:hover svg { opacity: .8; }
    .sidebar-nav a.active svg { opacity: 1; color: #5b9aff; }
    .nav-dropdown:has(a.active) > .nav-dropdown-toggle { color: rgba(255,255,255,.85); background: rgba(37,99,235,.08); }
    .nav-dropdown:has(a.active) > .nav-dropdown-toggle svg { opacity: .8; color: #5b9aff; }
    body.light .nav-dropdown:has(a.active) > .nav-dropdown-toggle { color: #111827; background: rgba(37,99,235,.06); }
    body.light .nav-dropdown:has(a.active) > .nav-dropdown-toggle svg { color: #2563eb; }
    .nav-subdropdown:has(a.active) > .nav-subdropdown-toggle { color: rgba(255,255,255,.75); }
    .nav-subdropdown:has(a.active) > .nav-subdropdown-toggle svg { opacity: .8; color: #5b9aff; }
    body.light .sidebar-nav a.active { background: rgba(37,99,235,.1); color: #2563eb; border-left-color: #2563eb; }
    body.light .sidebar-nav a.active svg { color: #2563eb; }
    .sidebar-nav a span { opacity: 0; transition: opacity .2s ease .05s; }
    .nav-dropdown-toggle span { opacity: 0; transition: opacity .2s ease .05s; }
    .nav-subdropdown-toggle span { opacity: 0; transition: opacity .2s ease .05s; }
    .sidebar:hover .sidebar-nav a span { opacity: 1; }
    .sidebar:hover .nav-dropdown-toggle span { opacity: 1; }
    .sidebar:hover .nav-subdropdown-toggle span { opacity: 1; }
    .sidebar-footer { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,.06); }
    .sidebar-footer button { width: 100%; padding: 9px 12px; background: none; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); color: rgba(255,255,255,.35); font-size: 13px; cursor: pointer; font-family: inherit; transition: all .15s ease; display: flex; align-items: center; gap: 8px; justify-content: center; white-space: nowrap; overflow: hidden; }
    .sidebar-footer button:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
    .sidebar-footer button svg { width: 16px; height: 16px; flex-shrink: 0; }
    .sidebar-footer button span { opacity: 0; transition: opacity .2s ease .05s; }
    .sidebar:hover .sidebar-footer button span { opacity: 1; }

    /* ── Top Bar ── */
    .topbar { position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h); background: var(--bg-topbar); backdrop-filter: var(--card-blur); border-bottom: var(--glass-border); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; z-index: 40; transition: left .3s cubic-bezier(0.4,0,0.2,1); }
    body.light .topbar { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--gray-200); }
    .topbar-title { font-size: 18px; font-weight: 700; color: var(--text-heading); }
    .topbar-right { display: flex; align-items: center; gap: 16px; }
    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--transition); border: 1px solid transparent; }
    .topbar .status-badge.active { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.3); backdrop-filter: blur(8px); }
    .topbar .status-badge.inactive { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); backdrop-filter: blur(8px); }
    .status-badge .dot { width: 7px; height: 7px; border-radius: 50%; }
    .status-badge.active .dot { background: var(--success); }
    .status-badge.inactive .dot { background: var(--danger); }
    .topbar-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); color: var(--gray-500); }
    .topbar-icon:hover { background: var(--gray-100); color: var(--text-heading); }
    .topbar-icon svg { width: 20px; height: 20px; }
    .topbar-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: all var(--transition); position: relative; }
    .topbar-user:hover { background: var(--gray-50); }
    .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
    .user-avatar img { pointer-events: none; }
    .user-name { font-size: 13px; font-weight: 500; color: var(--text-body); }
    .user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius-sm); box-shadow: var(--shadow); min-width: 190px; display: none; z-index: 100; }
    body.light .user-dropdown { background: #fff; border: 1px solid #e5e7eb; backdrop-filter: none; }
    .user-dropdown.show { display: block; }
    .user-dropdown a { display: block; padding: 10px 16px; font-size: 13px; color: var(--gray-600); text-decoration: none; transition: all var(--transition); }
    .user-dropdown a:hover { background: var(--gray-50); color: var(--gray-900); }

    /* ── Tenant Switcher ── */
    .tenant-switcher { position: relative; }
    .tenant-switcher-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-sm); border: var(--glass-border); background: var(--bg-input); cursor: pointer; transition: all var(--transition); font-size: 13px; font-weight: 500; color: var(--text-body); }
    .tenant-switcher-btn:hover { border-color: rgba(37,99,235,.3); background: var(--gray-50); }
    body.light .tenant-switcher-btn { background: #fff; border: 1px solid #e5e7eb; color: #374151; }
    .tenant-switcher-btn svg { flex-shrink: 0; }
    .tenant-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius-sm); box-shadow: var(--shadow); min-width: 260px; display: none; z-index: 100; overflow: hidden; }
    body.light .tenant-dropdown { background: #fff; border: 1px solid #e5e7eb; backdrop-filter: none; }
    .tenant-dropdown.show { display: block; }
    .tenant-dropdown-header { padding: 10px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); }
    .tenant-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; transition: all var(--transition); font-size: 13px; color: var(--gray-700); }
    .tenant-dropdown-item:hover { background: var(--gray-50); }
    .tenant-dropdown-item.active { background: #eff6ff; color: var(--primary); font-weight: 500; }
    .tenant-dropdown-item .tenant-meta { font-size: 11px; color: var(--gray-400); }
    .tenant-dropdown-footer { padding: 8px 14px; border-top: 1px solid var(--gray-100); }
    .tenant-dropdown-footer button { width: 100%; text-align: left; background: none; border: none; padding: 8px 0; font-size: 13px; color: var(--primary); cursor: pointer; display: flex; align-items: center; gap: 6px; }
    .tenant-dropdown-footer button:hover { text-decoration: underline; }
    .tenant-switch-loading { position: fixed; inset: 0; background: rgba(6,8,15,.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; font-size: 15px; color: var(--text-body); gap: 10px; }
    body.light .tenant-switch-loading { background: rgba(255,255,255,.85); backdrop-filter: none; }
    .tenant-switch-loading.hidden { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner-sm { width: 18px; height: 18px; border: 2px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; }

    /* ── Notifications ── */
    .topbar-notifications { position: relative; }
    .notification-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; line-height: 1; }
    .notification-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: rgba(12,18,40,0.95); backdrop-filter: blur(20px); border: var(--glass-border); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.4); width: 360px; max-height: 480px; display: none; z-index: 100; overflow: hidden; }
    body.light .notification-dropdown { background: #fff; border: 1px solid #e5e7eb; backdrop-filter: none; }
    .notification-dropdown.show { display: flex; flex-direction: column; }
    .notification-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); font-size: 13px; font-weight: 600; color: var(--text-heading); }
    .notification-dropdown-header button { background: none; border: none; font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 500; }
    .notification-dropdown-header button:hover { text-decoration: underline; }
    .notification-dropdown-list { overflow-y: auto; max-height: 400px; flex: 1; }
    .notification-item { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; transition: all var(--transition); border-bottom: 1px solid var(--gray-50); }
    .notification-item:hover { background: var(--gray-50); }
    .notification-item.unread { background: rgba(37,99,235,.08); }
    body.light .notification-item.unread { background: #eff6ff; }
    .notification-item-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .notification-item-icon.lead { background: rgba(34,197,94,.15); color: #22c55e; }
    .notification-item-icon.chat { background: rgba(37,99,235,.15); color: var(--primary); }
    .notification-item-icon.warning { background: rgba(245,158,11,.15); color: #f59e0b; }
    .notification-item-icon.info { background: rgba(37,99,235,.15); color: var(--primary); }
    .notification-item-icon.bell { background: rgba(107,114,128,.15); color: var(--gray-500); }
    .notification-item-content { flex: 1; min-width: 0; }
    .notification-item-title { font-size: 13px; font-weight: 500; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notification-item-body { font-size: 12px; color: var(--gray-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notification-item-time { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
    .notification-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--gray-400); }
    .notification-item .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 4px; }

    /* ── Status badges with liquid glass effect ── */
    .status-badge {
      display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
      backdrop-filter: blur(8px); border: 1px solid transparent; transition: all 0.2s ease;
    }
    .status-success {
      background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.3);
    }
    .status-warning {
      background: rgba(234,179,8,0.15); color: #eab308; border-color: rgba(234,179,8,0.3);
    }
    .status-error {
      background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3);
    }
    .status-info {
      background: rgba(91,154,255,0.15); color: #5b9aff; border-color: rgba(91,154,255,0.3);
    }
    .status-inactive {
      background: rgba(107,114,128,0.15); color: #6b7280; border-color: rgba(107,114,128,0.3);
    }

    /* ── Main Content ── */
    .main-content { margin-left: var(--sidebar-w); margin-top: var(--topbar-h); padding: 28px; width: 100%; transition: margin-left .3s cubic-bezier(0.4,0,0.2,1); }

    /* ── Cards ── */
    .card { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); box-shadow: var(--card-inset); }
    .card:hover { box-shadow: var(--card-inset), var(--glow-primary); transform: translateY(-1px); border-color: rgba(255,255,255,.1); }
    body.light .card { background: #fff; backdrop-filter: none; box-shadow: none; }
    body.light .card:hover { box-shadow: var(--shadow-sm); border-color: var(--gray-200); }
    /* CMS platform tabs — liquid glass */
    .cms-tab:not(.cms-tab-soon):hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.6) !important; }
    .cms-tab.active { border-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(60,9,108,.15), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(60,9,108,.1) !important; background: linear-gradient(135deg, rgba(60,9,108,.06), rgba(123,44,191,.03)) !important; }
    body.light .cms-tab { background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.4)) !important; border-color: rgba(0,0,0,.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.8) !important; }
    body.light .cms-tab.active { border-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(60,9,108,.1), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(60,9,108,.08) !important; }
    body.light .cms-tab:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9) !important; }

    .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .card-header h2 { font-size: 16px; font-weight: 600; color: var(--text-heading); }
    .card-header p { font-size: 13px; color: var(--gray-500); }
    .card-desc { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }

    /* ── Stats ── */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .stat-card { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); padding: 20px; transition: all var(--transition); box-shadow: var(--card-inset); position: relative; overflow: hidden; }
    .stat-card:hover { box-shadow: var(--card-inset), var(--shadow); transform: translateY(-1px); }
    body:not(.light) .stat-card:nth-child(1) { border-top: 2px solid var(--accent-cyan); }
    body:not(.light) .stat-card:nth-child(2) { border-top: 2px solid var(--success); }
    body:not(.light) .stat-card:nth-child(3) { border-top: 2px solid var(--warning); }
    body:not(.light) .stat-card:nth-child(4) { border-top: 2px solid #ff0066; }
    body:not(.light) .stat-card:nth-child(5) { border-top: 2px solid var(--primary); }
    body.light .stat-card { background: #fff; backdrop-filter: none; box-shadow: none; border: 1px solid #e5e7eb; }
    body.light .stat-card:hover { box-shadow: var(--shadow); }
    .stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
    .stat-icon svg { width: 20px; height: 20px; }
    .stat-icon.blue { background: var(--primary-light); color: var(--primary); }
    .stat-icon.green { background: var(--success-light); color: var(--success); }
    .stat-icon.orange { background: var(--warning-light); color: var(--warning); }
    .stat-icon.purple { background: #f3e8ff; color: #7c3aed; }
    .stat-icon.red { background: var(--danger-light); color: var(--danger); }
    .stat-label { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
    .stat-value { font-size: 28px; font-weight: 700; margin-top: 4px; color: var(--text-heading); }
    .stat-sub { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
    .progress-bar { background: var(--gray-200); border-radius: 999px; height: 6px; margin-top: 8px; overflow: hidden; }
    .progress-fill { background: var(--primary); height: 100%; border-radius: 999px; transition: width .3s; }

    /* ── Quick Actions ── */
    /* ── Dashboard V2 ── */
    .dash-header { margin-bottom: 24px; }
    .dash-header h1 { font-size: 24px; font-weight: 700; color: var(--text-heading); }
    .dash-header p { font-size: 14px; color: var(--gray-500); margin-top: 4px; }

    /* ── Dashboard V3 ── */
    .dash-header-v3 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
    .dash-header-v3 h1 { font-size: 22px; font-weight: 700; color: var(--text-heading); }
    .dash-header-v3 p { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

    .dash-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
    .dash-kpi { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); padding: 18px 20px; transition: all var(--transition); box-shadow: var(--card-inset); position: relative; overflow: hidden; cursor: pointer; }
    .dash-kpi:hover { box-shadow: var(--card-inset), var(--shadow); transform: translateY(-1px); }
    body.light .dash-kpi { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
    body.light .dash-kpi:hover { box-shadow: var(--shadow); }
    .dash-kpi.skeleton { min-height: 90px; }
    .dash-kpi.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); animation: shimmer 1.5s infinite; }
    .dash-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .dash-kpi-label { font-size: 12px; font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }
    .dash-kpi-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .dash-kpi-icon svg { width: 16px; height: 16px; }
    .dash-kpi-value { font-size: 26px; font-weight: 700; color: var(--text-heading); line-height: 1; }
    .dash-kpi-sub { font-size: 11px; color: var(--gray-500); margin-top: 6px; }
    .dash-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
    .dash-kpi-trend.up { color: #10b981; background: rgba(16,185,129,.1); }
    .dash-kpi-trend.down { color: #ef4444; background: rgba(239,68,68,.1); }
    .dash-kpi-trend.neutral { color: var(--gray-500); background: rgba(107,114,128,.1); }

    .dash-quick-actions { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
    .dash-qa { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-card); border: var(--glass-border); border-radius: var(--radius); cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .dash-qa:hover { background: rgba(255,255,255,.06); border-color: var(--primary); }
    body.light .dash-qa { background: #fff; border: 1px solid #e5e7eb; }
    body.light .dash-qa:hover { background: #f0f9ff; border-color: var(--primary); }
    .dash-qa svg { width: 16px; height: 16px; flex-shrink: 0; }

    .dash-main-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin-bottom: 20px; }
    .dash-card { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-inset); }
    body.light .dash-card { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
    .dash-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-color); }
    .dash-card-header h2 { font-size: 14px; font-weight: 600; color: var(--text-heading); }
    .dash-card-body { max-height: 420px; overflow-y: auto; }
    .dash-loading { padding: 40px 20px; text-align: center; font-size: 13px; color: var(--gray-500); }
    .btn-xs { font-size: 11px; padding: 4px 10px; }

    .dash-trial { background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,191,36,.04)); border: 1px solid rgba(251,191,36,.25); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
    .dash-trial .trial-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(251,191,36,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .dash-trial .trial-icon svg { width: 18px; height: 18px; color: var(--warning); }
    .dash-trial .trial-text { font-size: 13px; color: var(--text-primary); }
    .dash-trial .trial-text strong { color: var(--warning); }

    .dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
    .kpi-card { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); padding: 20px; transition: all var(--transition); box-shadow: var(--card-inset); position: relative; overflow: hidden; }
    .kpi-card:hover { box-shadow: var(--card-inset), var(--shadow); transform: translateY(-1px); }
    body.light .kpi-card { background: #fff; backdrop-filter: none; box-shadow: none; border: 1px solid #e5e7eb; }
    body.light .kpi-card:hover { box-shadow: var(--shadow); }
    .kpi-card .kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
    .kpi-card .kpi-icon svg { width: 20px; height: 20px; }
    .kpi-card .kpi-label { font-size: 12px; font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: var(--text-heading); line-height: 1; }
    .kpi-card .kpi-sub { font-size: 12px; color: var(--gray-500); margin-top: 6px; }
    .kpi-card .kpi-bar { height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; margin-top: 10px; }
    .kpi-card .kpi-bar-fill { height: 100%; border-radius: 2px; transition: width .8s ease; }
    .kpi-card.skeleton { min-height: 120px; }
    .kpi-card.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); animation: shimmer 1.5s infinite; }
    @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

    .dash-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .module-pill { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 12px; transition: all var(--transition); box-shadow: var(--card-inset); }
    .module-pill:hover { transform: translateY(-1px); box-shadow: var(--card-inset), var(--shadow); }
    body.light .module-pill { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
    body.light .module-pill:hover { box-shadow: var(--shadow); }
    .module-pill .mp-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .module-pill .mp-icon svg { width: 18px; height: 18px; }
    .module-pill .mp-info { flex: 1; min-width: 0; }
    .module-pill .mp-name { font-size: 13px; font-weight: 600; color: var(--text-heading); }
    .module-pill .mp-usage { font-size: 12px; color: var(--gray-500); margin-top: 2px; font-weight: 500; }
    .module-pill .mp-bar { height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; margin-top: 6px; }
    .module-pill .mp-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }

    .dash-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin-bottom: 20px; }
    .dash-conversations { overflow: hidden; }
    .dash-activity { overflow: hidden; }

    .conv-card { padding: 14px 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background .15s; display: flex; gap: 12px; align-items: flex-start; }
    .conv-card:hover { background: rgba(255,255,255,.03); }
    body.light .conv-card:hover { background: rgba(0,0,0,.02); }
    .conv-card:last-child { border-bottom: none; }
    .conv-card .conv-channel { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .conv-card .conv-channel svg { width: 16px; height: 16px; }
    .conv-card .conv-body { flex: 1; min-width: 0; }
    .conv-card .conv-preview { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
    .conv-card .conv-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
    .conv-card .conv-meta span { font-size: 11px; color: var(--gray-500); display: flex; align-items: center; gap: 3px; }
    .conv-card .conv-meta span svg { width: 12px; height: 12px; }
    .conv-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }
    .conv-badge.lead { background: rgba(16,185,129,.12); color: #10b981; }
    .conv-badge.positive { background: rgba(16,185,129,.12); color: #10b981; }
    .conv-badge.negative { background: rgba(239,68,68,.12); color: #ef4444; }

    .activity-item { padding: 10px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background .15s; }
    .activity-item:hover { background: rgba(255,255,255,.03); }
    body.light .activity-item:hover { background: rgba(0,0,0,.02); }
    .activity-item:last-child { border-bottom: none; }
    .activity-item .act-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
    .activity-item .act-text { flex: 1; min-width: 0; }
    .activity-item .act-title { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .activity-item .act-time { font-size: 11px; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }

    .dash-pipeline { padding: 20px; margin-bottom: 20px; }
    .dash-pipeline .card-header { margin-bottom: 16px; }
    .pipeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .pipeline-col { text-align: center; padding: 16px; background: rgba(255,255,255,.02); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
    body.light .pipeline-col { background: #f9fafb; }
    .pipeline-col .pipe-count { font-size: 28px; font-weight: 700; color: var(--text-heading); line-height: 1; }
    .pipeline-col .pipe-label { font-size: 12px; font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
    .pipeline-col .pipe-detail { font-size: 11px; color: var(--gray-400); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .dash-performance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .perf-card { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: all var(--transition); }
    body.light .perf-card { background: #fff; border: 1px solid #e5e7eb; }
    .perf-card .perf-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .perf-card .perf-icon svg { width: 20px; height: 20px; }
    .perf-card .perf-info { flex: 1; }
    .perf-card .perf-label { font-size: 12px; color: var(--gray-500); margin-bottom: 2px; }
    .perf-card .perf-value { font-size: 20px; font-weight: 700; color: var(--text-heading); }
    .perf-card .perf-sub { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

    /* ── Form elements ── */
    input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], textarea, select {
      width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 14px;
      outline: none; font-family: inherit; background: var(--bg-input); color: var(--text-heading); transition: border-color var(--transition), box-shadow var(--transition);
    }
    body.light input[type="text"], body.light input[type="email"], body.light input[type="number"], body.light input[type="password"], body.light input[type="url"], body.light input[type="tel"], body.light textarea, body.light select { background: #fff; color: #111827; }
    input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    textarea { min-height: 100px; resize: vertical; }
    label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; }
    .form-row { margin-bottom: 16px; }
    .form-row-inline { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
    .form-row-inline > * { flex: 1; }
    .helper-text { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

    /* ── Buttons ── */
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all var(--transition); text-decoration: none; }
    .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: var(--glow-primary); }
    .btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
    body.light .btn-primary { background: var(--primary); box-shadow: none; }
    body.light .btn-primary:hover { background: var(--primary-hover); }
    .btn-secondary { background: var(--bg-input); color: var(--gray-700); border: var(--glass-border); }
    .btn-secondary:hover { background: var(--gray-100); border-color: rgba(255,255,255,.15); }
    body.light .btn-secondary { background: var(--gray-100); color: #374151; border: 1px solid #d1d5db; }
    body.light .btn-secondary:hover { background: #e5e7eb; }
    .btn-danger { background: var(--danger-light); color: #dc2626; border: 1px solid var(--danger-border); }
    .btn-danger:hover { background: #fee2e2; }
    .btn-success { background: var(--success); color: #fff; }
    .btn-success:hover { background: #059669; }
    .btn-sm { padding: 6px 12px; font-size: 12px; }
    .btn-xs { padding: 4px 8px; font-size: 11px; }
    .btn-ghost { background: none; color: var(--gray-500); padding: 6px 10px; }
    .btn-ghost:hover { background: var(--gray-100); color: var(--text-heading); }

    /* ── Filter Tabs ── */
    .filter-tabs { display: flex; gap: 4px; }
    .filter-tab { background: none; border: 1px solid var(--border-color); color: var(--gray-500); padding: 8px 16px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition); }
    .filter-tab:hover { background: var(--gray-100); color: var(--text-heading); }
    .filter-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
    body.light .filter-tab { border-color: var(--gray-300); }
    body.light .filter-tab:hover { background: var(--gray-100); }

    /* ── Toggle switch ── */
    .toggle { position: relative; width: 44px; height: 24px; background: rgba(255,255,255,.15); border-radius: 12px; cursor: pointer; transition: background .2s; flex-shrink: 0; }
    body.light .toggle { background: #d1d5db; }
    .toggle.active { background: var(--primary); }
    .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
    .toggle.active::after { transform: translateX(20px); }

    /* ── Setting row ── */
    .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
    .setting-row:last-child { border-bottom: none; }
    .setting-info { flex: 1; margin-right: 16px; }
    .setting-info .title { font-size: 14px; font-weight: 500; color: var(--text-heading); }
    .setting-info .desc { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

    /* ── Template cards (removed) ── */

    /* ── Page sections ── */
    .page-section { display: none; }
    .page-section.active { display: block; }

    /* ── Empty state ── */
    .empty-state { text-align: center; padding: 40px 20px; }
    .empty-state svg { width: 48px; height: 48px; color: var(--gray-300); margin-bottom: 12px; }
    .empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; }
    .empty-state p { font-size: 13px; color: var(--gray-400); margin-bottom: 16px; }

    /* ── Spinner ── */
    .spinner { width: 20px; height: 20px; border: 2px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
    .spinner.spinner-inline { width: 14px; height: 14px; margin-right: var(--space-2); vertical-align: middle; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Log entries ── */
    .log-entry { padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
    .log-entry:last-child { border-bottom: none; }
    .log-role { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
    .log-role.user { color: var(--primary); }
    .log-role.assistant { color: #059669; }
    .log-time { color: var(--gray-400); font-size: 11px; margin-left: 8px; }
    .log-msg { margin-top: 4px; color: var(--gray-700); }

    /* ── Chat conversation view ── */
    .session-item { border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: all var(--transition); }
    .session-item:hover { box-shadow: var(--shadow-sm); }
    .session-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; background: var(--bg-card); transition: background var(--transition); }
    .session-header:hover { background: var(--gray-50); }
    body.light .session-header { background: #fff; }
    .session-header .chevron-icon { transition: transform .2s; width: 16px; height: 16px; color: var(--gray-400); }
    .session-item.expanded .session-header .chevron-icon { transform: rotate(180deg); }
    .session-messages { display: none; padding: 16px; background: var(--bg-input); border-top: var(--glass-border); }
    body.light .session-messages { background: #f9fafb; border-top: 1px solid #e5e7eb; }
    .session-item.expanded .session-messages { display: block; }
    .chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; position: relative; }
    .chat-bubble.user-msg { background: var(--primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
    .chat-bubble.bot-msg { background: var(--bg-card); color: var(--gray-800); border: var(--glass-border); border-bottom-left-radius: 4px; }
    body.light .chat-bubble.bot-msg { background: #fff; border: 1px solid #e5e7eb; }
    .chat-bubble .bubble-time { font-size: 10px; opacity: .6; margin-top: 4px; }
    .chat-bubble.user-msg .bubble-time { text-align: right; }
    .feedback-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
    .feedback-btn { background: none; border: 1px solid var(--gray-200); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 12px; transition: all var(--transition); color: var(--text-body); }
    .feedback-btn:hover { background: var(--gray-100); }
    .feedback-btn.selected-positive { background: var(--success-light); border-color: var(--success-border); color: #059669; }
    .feedback-btn.selected-negative { background: var(--danger-light); border-color: var(--danger-border); color: var(--danger); }
    .feedback-comment { display: none; margin-top: 6px; }
    .feedback-comment.show { display: flex; gap: 6px; }

    /* ── Lead cards ── */
    .lead-item { background: var(--bg-card); border: var(--glass-border); border-radius: 10px; padding: 16px; margin-bottom: 10px; transition: all var(--transition); backdrop-filter: var(--card-blur); }
    body.light .lead-item { background: #f9fafb; border: 1px solid #e5e7eb; backdrop-filter: none; }
    .lead-item:hover { box-shadow: var(--shadow-sm); }
    .lead-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .lead-name { font-weight: 600; font-size: 14px; }
    .lead-score { background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
    .lead-detail { font-size: 13px; color: var(--gray-600); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
    .lead-detail svg { width: 14px; height: 14px; color: var(--gray-400); }
    .lead-meta { font-size: 12px; color: var(--gray-400); margin-top: 8px; }

    /* ── Flow items ── */
    .flow-item { border: var(--glass-border); border-radius: 10px; padding: 16px; margin-bottom: 10px; background: var(--bg-card); backdrop-filter: var(--card-blur); }
    body.light .flow-item { background: #fff; border: 1px solid #e5e7eb; backdrop-filter: none; }
    .flow-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .flow-trigger { font-weight: 600; font-size: 14px; color: var(--text-heading); }
    .flow-response { background: var(--bg-input); padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--gray-600); margin-top: 8px; }
    body.light .flow-response { background: #f9fafb; }
    .flow-meta { font-size: 12px; color: var(--gray-400); margin-top: 8px; display: flex; align-items: center; gap: 8px; }

    /* ── File items ── */
    .file-item { border: var(--glass-border); border-radius: 8px; padding: 12px; margin-bottom: 8px; background: var(--bg-card); display: flex; align-items: center; justify-content: space-between; }
    body.light .file-item { background: #fff; border: 1px solid #e5e7eb; }
    .file-info { flex: 1; }
    .file-name { font-weight: 500; font-size: 13px; color: var(--text-heading); }
    .file-meta { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

    /* ── Upload area ── */
    .upload-area { border: 2px dashed var(--gray-300); border-radius: 8px; padding: 24px; text-align: center; background: var(--bg-input); transition: all var(--transition); cursor: pointer; }
    .upload-area:hover, .upload-area.dragover { border-color: var(--primary); background: var(--primary-light); }
    body.light .upload-area { background: #fafafa; }
    body.light .upload-area:hover, body.light .upload-area.dragover { background: #f0f7ff; }
    .upload-area.dragover { transform: scale(1.01); }

    /* ── Modal ── */
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
    .modal-overlay.show { display: flex; }
    .modal { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: 18px; padding: 28px; max-width: 500px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.4), var(--card-inset); }
    .modal h3 { color: var(--text-heading); }
    body.light .modal { background: #fff; backdrop-filter: none; border: 1px solid #e5e7eb; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
    .modal h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
    .modal .modal-desc { font-size: 13px; color: var(--gray-500); margin-bottom: 20px; }
    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

    /* ── Toast ── */
    .toast { position: fixed; top: 20px; right: 20px; background: rgba(12,18,40,.85); backdrop-filter: blur(20px); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 300; opacity: 0; transform: translateY(-8px); transition: all .25s; box-shadow: 0 8px 24px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
    body.light .toast { background: #111827; backdrop-filter: none; border: none; }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { background: #059669; }
    .toast.error { background: #dc2626; }

    /* ── Training Mode Chat ── */
    .training-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
    .training-msg.customer { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
    .training-msg.bot { align-self: flex-start; background: var(--bg-input); color: var(--text-body); border: var(--glass-border); border-bottom-left-radius: 4px; }
    body.light .training-msg.bot { background: #f3f4f6; border: 1px solid #e5e7eb; }
    .training-msg.system { align-self: center; background: transparent; color: var(--gray-400); font-size: 12px; font-style: italic; padding: 4px 0; }
    .training-msg-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; opacity: .6; }
    .fb-source-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; display: inline-block; }
    .fb-source-badge.chat_log { background: var(--primary-light); color: var(--primary); }
    .fb-source-badge.training { background: rgba(139,92,246,.15); color: #8b5cf6; }
    .fb-source-badge.manual { background: var(--gray-100); color: var(--gray-500); }

    /* ── Tour Walkthrough System ── */
    .duke-tour-overlay { position: fixed; inset: 0; z-index: 500; pointer-events: auto; transition: opacity .25s ease; }
    .duke-tour-spotlight { position: fixed; z-index: 501; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none; transition: all .35s cubic-bezier(.4,0,.2,1); }
    body.light .duke-tour-spotlight { box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
    .duke-tour-spotlight::after { content: ''; position: absolute; inset: -4px; border-radius: 12px; border: 2px solid rgba(37,99,235,.4); animation: tourPulse 2s ease-in-out infinite; }
    @keyframes tourPulse { 0%,100% { opacity: .4; } 50% { opacity: .8; } }

    .duke-tour-tooltip { position: fixed; max-width: 370px; min-width: 280px; background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.4), var(--card-inset); z-index: 502; animation: tourFadeIn .25s ease-out; overflow: hidden; }
    body.light .duke-tour-tooltip { background: #fff; backdrop-filter: none; border: 1px solid #e5e7eb; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
    .duke-tour-tooltip-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; }
    .duke-tour-step-badge { font-size: 11px; font-weight: 600; color: var(--primary); background: var(--primary-light); padding: 3px 10px; border-radius: 20px; }
    .duke-tour-close { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; transition: all .15s; }
    .duke-tour-close:hover { background: var(--gray-100); color: var(--text-heading); }
    .duke-tour-tooltip-body { padding: 12px 18px 8px; }
    .duke-tour-tooltip-body h4 { font-size: 15px; font-weight: 600; color: var(--text-heading); margin-bottom: 6px; }
    .duke-tour-tooltip-body p { font-size: 13px; color: var(--text-body); line-height: 1.55; }
    .duke-tour-tooltip-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 14px; }
    .duke-tour-skip { background: none; border: none; color: var(--gray-400); font-size: 12px; cursor: pointer; padding: 6px 0; transition: color .15s; }
    .duke-tour-skip:hover { color: var(--text-heading); }
    .duke-tour-nav { display: flex; gap: 8px; }
    .duke-tour-btn { padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; }
    .duke-tour-btn-prev { background: var(--gray-100); color: var(--text-body); }
    .duke-tour-btn-prev:hover { background: var(--gray-200); }
    .duke-tour-btn-next { background: var(--primary); color: #fff; }
    .duke-tour-btn-next:hover { background: var(--primary-hover); }
    .duke-tour-btn-finish { background: #059669; color: #fff; }
    .duke-tour-btn-finish:hover { background: #047857; }
    .duke-tour-arrow { position: absolute; width: 10px; height: 10px; background: var(--bg-card); border: var(--glass-border); transform: rotate(45deg); }
    body.light .duke-tour-arrow { background: #fff; border: 1px solid #e5e7eb; }

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

    /* Tour Launcher */
    .duke-tour-launcher { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: none; cursor: pointer; z-index: 150; box-shadow: 0 4px 16px rgba(37,99,235,.3); display: flex; align-items: center; justify-content: center; transition: all .2s; }
    .duke-tour-launcher:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,99,235,.45); }
    .duke-tour-launcher svg { width: 22px; height: 22px; }
    .duke-tour-launcher .tour-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; background: var(--warning); border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; }

    /* Tour Menu */
    .duke-tour-menu { position: fixed; bottom: 80px; right: 24px; width: 340px; max-height: 520px; overflow-y: auto; background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.4), var(--card-inset); z-index: 160; animation: tourFadeIn .2s ease-out; display: none; }
    body.light .duke-tour-menu { background: #fff; backdrop-filter: none; border: 1px solid #e5e7eb; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
    .duke-tour-menu.show { display: block; }
    .duke-tour-menu-header { padding: 18px 18px 12px; border-bottom: 1px solid var(--border-subtle); }
    .duke-tour-menu-header h3 { font-size: 15px; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; }
    .duke-tour-menu-header p { font-size: 12px; color: var(--gray-400); }
    .duke-tour-progress-bar { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
    .duke-tour-progress-track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
    .duke-tour-progress-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #059669); border-radius: 3px; transition: width .5s ease; }
    .duke-tour-progress-pct { font-size: 12px; font-weight: 700; color: var(--primary); min-width: 32px; text-align: right; }
    .duke-tour-menu-section { padding: 12px 18px 4px; }
    .duke-tour-menu-section-title { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
    .duke-tour-menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .15s; margin-bottom: 4px; }
    .duke-tour-menu-item:hover { background: var(--gray-50); }
    .duke-tour-menu-item.completed { opacity: .6; cursor: default; }
    .duke-tour-menu-item.completed:hover { background: transparent; }
    .duke-tour-menu-item-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .duke-tour-menu-item-icon svg { width: 16px; height: 16px; color: var(--primary); }
    .duke-tour-menu-item.completed .duke-tour-menu-item-icon { background: var(--success-light); }
    .duke-tour-menu-item.completed .duke-tour-menu-item-icon svg { color: var(--success); }
    .duke-tour-menu-item-text { flex: 1; min-width: 0; }
    .duke-tour-menu-item-text h4 { font-size: 13px; font-weight: 600; color: var(--text-heading); }
    .duke-tour-menu-item-text p { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
    .duke-tour-menu-item-status { font-size: 11px; color: var(--gray-400); flex-shrink: 0; }
    .duke-tour-menu-item.completed .duke-tour-menu-item-status { color: var(--success); }
    .duke-tour-menu-footer { padding: 12px 18px; border-top: 1px solid var(--border-subtle); }

    /* Tour celebration */
    .duke-tour-celebrate { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); animation: tourFadeIn .3s ease; }
    .duke-tour-celebrate-card { background: var(--bg-card); backdrop-filter: var(--card-blur); border: var(--glass-border); border-radius: 20px; padding: 40px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
    body.light .duke-tour-celebrate-card { background: #fff; backdrop-filter: none; border: 1px solid #e5e7eb; }
    .duke-tour-celebrate-card h2 { font-size: 22px; font-weight: 700; color: var(--text-heading); margin: 16px 0 8px; }
    .duke-tour-celebrate-card p { font-size: 14px; color: var(--text-body); margin-bottom: 24px; }
    .duke-tour-celebrate-icon { font-size: 48px; }

    /* Sidebar forced open for tour — mirror all :hover rules */
    .sidebar.duke-tour-sidebar-open { width: var(--sidebar-w-expanded) !important; z-index: 501 !important; }
    .sidebar.duke-tour-sidebar-open .sidebar-logo span { opacity: 1 !important; }
    .sidebar.duke-tour-sidebar-open .sidebar-nav a span { opacity: 1 !important; }
    .sidebar.duke-tour-sidebar-open .nav-dropdown-toggle span { opacity: 1 !important; }
    .sidebar.duke-tour-sidebar-open .nav-subdropdown-toggle span { opacity: 1 !important; }
    .sidebar.duke-tour-sidebar-open .sidebar-footer button span { opacity: 1 !important; }
    .sidebar.duke-tour-sidebar-open .nav-category { opacity: 1 !important; height: auto !important; padding: 20px 12px 8px !important; }
    .sidebar.duke-tour-sidebar-open .nav-divider { margin: 8px 12px !important; }
    .sidebar.duke-tour-sidebar-open .nav-arrow { display: block !important; opacity: 1 !important; }
    .sidebar.duke-tour-sidebar-open .nav-dropdown-toggle .nav-arrow { display: block !important; }
    .sidebar.duke-tour-sidebar-open .nav-dropdown.open .nav-dropdown-items { max-height: 400px !important; }
    .sidebar.duke-tour-sidebar-open .nav-subdropdown-toggle .nav-arrow { display: block !important; }
    .sidebar.duke-tour-sidebar-open .nav-subdropdown.open .nav-subdropdown-items { max-height: 200px !important; }

    @media (max-width: 768px) {
      .duke-tour-launcher { bottom: 16px; right: 16px; width: 44px; height: 44px; }
      .duke-tour-menu { bottom: 68px; right: 16px; width: calc(100vw - 32px); max-height: 70vh; }
      .duke-tour-tooltip { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; }
      .duke-tour-arrow { display: none !important; }
    }

    /* ── Intake questions ── */
    .intake-list { }
    .intake-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
    .intake-item:last-child { border-bottom: none; }
    .intake-item .intake-label { flex: 1; font-size: 13px; font-weight: 500; }
    .intake-item .intake-sub { font-size: 12px; color: var(--gray-400); }
    .intake-item .intake-badge { font-size: 10px; color: #dc2626; font-weight: 600; text-transform: uppercase; }
    .intake-custom-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
    .intake-custom-item input { flex: 1; }

    /* ── Collapsible sections ── */
    .collapsible-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px 0; user-select: none; }
    .collapsible-header .chevron { transition: transform .2s; }
    .collapsible-header.open .chevron { transform: rotate(180deg); }
    .collapsible-body { display: none; padding-bottom: 12px; }
    .collapsible-body.open { display: block; }

    /* ── Suggestion items ── */
    .suggestion-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-input); border: var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 8px; }
    .suggestion-item span { font-size: 13px; color: var(--text-body); }
    body.light .suggestion-item { background: #f9fafb; border: 1px solid #e5e7eb; }

    /* ── Test chatbot ── */

    /* ── Placeholder charts ── */
    .chart-placeholder { background: var(--bg-input); border: 1px dashed var(--gray-300); border-radius: var(--radius); padding: 40px 20px; text-align: center; margin-bottom: 16px; }
    body.light .chart-placeholder { background: #f9fafb; }
    .chart-placeholder svg { width: 40px; height: 40px; color: var(--gray-300); margin-bottom: 8px; }
    .chart-placeholder p { font-size: 13px; color: var(--gray-400); }

    /* ── Feedback tabs ── */
    .fb-tab { background: var(--bg-input); color: var(--gray-600); border: 1px solid var(--gray-200); }
    .fb-tab:hover { background: var(--gray-100); color: var(--text-heading); }
    .fb-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .fb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.2); margin-left: 4px; }
    .fb-tab:not(.active) .fb-badge { background: var(--gray-200); color: var(--gray-600); }
    .fb-item { border: 1px solid var(--gray-200); border-radius: 10px; padding: 16px; margin-bottom: 10px; background: var(--bg-card); backdrop-filter: var(--card-blur); transition: all var(--transition); }
    body.light .fb-item { background: #fff; border: 1px solid #e5e7eb; }
    .fb-item:hover { box-shadow: var(--shadow-sm); }
    .fb-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
    .fb-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
    .fb-type-badge.improvement { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); backdrop-filter: blur(8px); }
    .fb-type-badge.correction { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); backdrop-filter: blur(8px); }
    .fb-type-badge.template { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); backdrop-filter: blur(8px); }

    /* ── Mobile ── */
    .mobile-header { display: none; }
    @media (max-width: 768px) {
      .auth-left { display: none; }
      .auth-right { width: 100%; padding: 32px 24px; background: #fff; }
      .sidebar { transform: translateX(-100%); transition: transform .2s; width: var(--sidebar-w-expanded) !important; }
      .sidebar.open { transform: translateX(0); }
      .sidebar .sidebar-logo span,
      .sidebar .sidebar-nav a span,
      .sidebar .nav-dropdown-toggle span,
      .sidebar .nav-subdropdown-toggle span,
      .sidebar .sidebar-footer button span,
      .sidebar .nav-agent-label { opacity: 1 !important; }
      .sidebar .nav-category { opacity: 1 !important; height: auto !important; padding: 20px 12px 8px !important; }
      .sidebar .nav-divider { margin: 8px 12px !important; }
      .sidebar .nav-dropdown.open .nav-dropdown-items { max-height: 400px; }
      .topbar { left: 0; }
      .main-content { margin-left: 0; padding: 16px; }
      .mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-topbar); backdrop-filter: var(--card-blur); border-bottom: var(--glass-border); position: sticky; top: 0; z-index: 40; }
      body.light .mobile-header { background: #fff; border-bottom: 1px solid #e5e7eb; backdrop-filter: none; }
      .mobile-header .logo { font-weight: 700; font-size: 16px; color: var(--primary); }
      .hamburger { background: none; border: none; cursor: pointer; padding: 4px; }
      .hamburger svg { width: 24px; height: 24px; color: var(--gray-700); }
      .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 45; }
      .sidebar-overlay.show { display: block; }
      .topbar { display: none; }
      .dash-kpis { grid-template-columns: repeat(2, 1fr); }
      .dash-grid { grid-template-columns: 1fr; }
      .dash-performance { grid-template-columns: 1fr; }
      .pipeline-grid { grid-template-columns: 1fr; }
      .dash-kpi-strip { grid-template-columns: repeat(2, 1fr); }
      .dash-main-grid { grid-template-columns: 1fr; }
      .dash-quick-actions { overflow-x: auto; flex-wrap: nowrap; }
      .plan-token-grid { grid-template-columns: 1fr !important; }

      /* Force all inline grids to single column on mobile */
      [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      [style*="grid-template-columns: repeat(7"] { grid-template-columns: repeat(7, 1fr) !important; font-size: 11px !important; }
      [style*="grid-template-columns:repeat(7"] { grid-template-columns: repeat(7, 1fr) !important; font-size: 11px !important; }
      [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: 24px 1fr 140px 140px"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns:24px 1fr 140px 140px"] { grid-template-columns: 1fr !important; }

      /* Stats grid smaller cards */
      .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
      .stats-grid .stat-card { padding: 12px !important; }

      /* Cards need less padding */
      .card { padding: 14px !important; }
      .card-body { padding: 0 !important; }
      .card-header h2 { font-size: 16px !important; }

      /* Content planning calendar scroll */
      #content-calendar { overflow-x: auto; }

      /* Tabs scroll horizontally */
      .tab-bar, [style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      /* Forms 2-col → 1-col */
      [style*="grid-template-columns: 1fr 1fr;"],
      [style*="grid-template-columns:1fr 1fr;"] {
        grid-template-columns: 1fr !important;
      }

      /* Inline article editor */
      #inline-article-editor { padding: 16px !important; }

      /* Topbar search / actions */
      .topbar-right { gap: 8px !important; }

      /* Modal responsive */
      .duke-modal-content { width: 95vw !important; max-width: 95vw !important; max-height: 90vh !important; padding: 16px !important; }

      /* Schrijfprofiel 2-col form */
      #wp-form [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

      /* SEO opportunities */
      #opportunities-grid { grid-template-columns: 1fr !important; }

      /* CMS platform tabs */
      #cms-platform-tabs { grid-template-columns: repeat(2, 1fr) !important; }

      /* Appointments stats */
      #appointments-stats { grid-template-columns: repeat(2, 1fr) !important; }

      /* Social post editor 2-col → 1-col */
      #social-post-editor [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

      /* Merkstijl wizard */
      #ms-wizard [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

      /* Tables horizontal scroll */
      .table-wrap, table { display: block; overflow-x: auto; }

      /* Buttons wrapping */
      .btn { font-size: 12px !important; padding: 8px 12px !important; }
      .btn-xs { padding: 5px 8px !important; font-size: 11px !important; }

      /* Nav dropdown items */
      .nav-dropdown-items a { padding-left: 36px !important; font-size: 13px !important; }

      /* Content gap cards */
      #content-gaps-grid { grid-template-columns: 1fr !important; }
      #trending-topics-grid { grid-template-columns: 1fr !important; }
    }
    /* Tablet breakpoint */
    /* Hide mobile-only elements on desktop */
    @media (min-width: 769px) {
      .mobile-agents-panel,
      .mobile-agents-backdrop,
      .mobile-bottom-nav { display: none !important; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
      .main-content { padding: 16px; }
      .dash-kpis { grid-template-columns: repeat(2, 1fr); }
      .dash-grid { grid-template-columns: 1fr; }
      .pipeline-grid { grid-template-columns: repeat(2, 1fr); }
      [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      #opportunities-grid { grid-template-columns: 1fr !important; }
      #cms-platform-tabs { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* Merkstijl wizard */
    .ms-chip { padding:6px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; transition:all .15s; }
    .ms-chip:hover { border-color:rgba(255,255,255,.25); color:#fff; }
    .ms-chip.selected { background:rgba(37,99,235,.3); border-color:#2563eb; color:#fff; }
    body.light .ms-chip { border-color:#d1d5db; background:#f9fafb; color:#374151; }
    body.light .ms-chip:hover { border-color:#9ca3af; }
    body.light .ms-chip.selected { background:rgba(37,99,235,.1); border-color:#2563eb; color:#1d4ed8; }
    .ms-card { padding:12px 16px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; transition:all .15s; text-align:left; }
    .ms-card:hover { border-color:rgba(255,255,255,.2); }
    .ms-card.selected { background:rgba(37,99,235,.2); border-color:#2563eb; color:#fff; }
    body.light .ms-card { border-color:#e5e7eb; background:#fff; color:#374151; }
    body.light .ms-card:hover { border-color:#9ca3af; }
    body.light .ms-card.selected { background:rgba(37,99,235,.08); border-color:#2563eb; color:#1d4ed8; }

  
    /* ── Mobile Bottom Tab Bar ── */
    .mobile-bottom-bar { display: none; }
    .mobile-nav-toggle { display: none; }
    .mobile-menu-overlay { display: none; }

    @media (max-width: 768px) {
      .mobile-header { display: none !important; }
      .sidebar { display: none !important; }
      .sidebar-overlay { display: none !important; }
      .topbar { display: none !important; }
      .main-content { margin-top: 0 !important; margin-left: 0 !important; padding-top: 12px; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; transition: padding-bottom .25s; }
      .mobile-bottom-bar.hidden + .main-content,
      body.nav-hidden .main-content { padding-bottom: 0 !important; }

      .mobile-nav-toggle {
        display: flex !important;
        position: fixed;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        background: var(--bg-sidebar);
        border: 1px solid var(--border-color);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        padding: 2px 16px;
        cursor: pointer;
        color: var(--text-secondary, #999);
        transition: bottom .25s cubic-bezier(.4,0,.2,1);
        -webkit-tap-highlight-color: transparent;
      }
      .mobile-nav-toggle.flipped {
        bottom: 0;
      }
      .mobile-nav-toggle.flipped svg {
        transform: rotate(180deg);
      }
      /* Hide toggle arrow when agents panel is open */
      body.agents-panel-open .mobile-nav-toggle {
        display: none !important;
      }
      .mobile-bottom-bar {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; right: 0;
        min-height: 56px; z-index: 1000;
        background: var(--bg-sidebar);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-color);
        align-items: center; justify-content: space-around;
        padding: 8px 4px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        flex-shrink: 0;
      }
      .mobile-bottom-bar.hidden {
        transform: translateY(100%);
      }
      body.light .mobile-bottom-bar {
        background: rgba(255,255,255,.92);
        border-top: 1px solid #e5e7eb;
      }
      .bottom-tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; flex: 1; background: none; border: none; cursor: pointer;
        color: var(--gray-400); padding: 6px 0; transition: color .15s;
      }
      .bottom-tab svg { width: 22px; height: 22px; }
      .bottom-tab span { font-size: 10px; font-weight: 500; }
      .bottom-tab.active { color: #2563eb; }
      body.light .bottom-tab { color: #9ca3af; }
      body.light .bottom-tab.active { color: #2563eb; }

      /* Hide bottom bar + toggle on chat page */
      body.section-alex .mobile-bottom-bar { display: none !important; }
      body.section-alex .mobile-nav-toggle { display: none !important; }
      body.section-alex .main-content { padding-bottom: 0 !important; }

      .mobile-menu-overlay {
        position: fixed; inset: 0; z-index: 1005;
        background: var(--bg-body);
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        overflow: hidden;
        flex-direction: column;
      }
      .mobile-menu-overlay.open {
        display: flex !important;
        transform: translateY(0);
      }
      body.light .mobile-menu-overlay { background: #f8f9fb; }
      .mobile-menu-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px; border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
      }
      body.light .mobile-menu-header { border-bottom-color: #e5e7eb; }
      .mobile-menu-title { font-size: 18px; font-weight: 700; color: var(--text-heading); }
      .mobile-menu-close {
        background: none; border: none; cursor: pointer; padding: 4px;
        color: var(--gray-500); width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 8px; transition: background .15s;
      }
      .mobile-menu-close:hover { background: var(--gray-100); }
      .mobile-menu-close svg { width: 22px; height: 22px; }
      .mobile-menu-scroll {
        flex: 1; overflow-y: auto; padding: 8px 16px 80px;
        -webkit-overflow-scrolling: touch;
      }
      .mobile-menu-section { margin-bottom: 8px; }
      .mobile-menu-section-title {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .8px; color: var(--gray-400);
        padding: 12px 8px 6px;
      }
      .mobile-menu-item {
        display: block; padding: 12px 12px; border-radius: 10px;
        font-size: 15px; font-weight: 500; color: var(--text-body);
        text-decoration: none; cursor: pointer;
        transition: background .15s;
      }
      .mobile-menu-item:hover, .mobile-menu-item:active {
        background: var(--gray-100);
      }
      body.light .mobile-menu-item { color: #374151; }
      body.light .mobile-menu-item:hover { background: #f3f4f6; }

      /* Mobile Agents Panel */
      .mobile-agents-backdrop {
        display: none; position: fixed; inset: 0; z-index: 998;
        background: rgba(0,0,0,.4);
      }
      .mobile-agents-backdrop.show { display: block; }
      .mobile-agents-panel {
        display: none; position: fixed; bottom: 56px; left: 0; right: 0;
        z-index: 999; background: var(--bg-sidebar);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-color);
        border-radius: 16px 16px 0 0;
        padding: 12px 12px 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
      }
      .mobile-agents-panel.open {
        display: block;
        transform: translateY(0);
      }
      body.light .mobile-agents-panel {
        background: rgba(255,255,255,.96);
        border-top: 1px solid #e5e7eb;
      }
      .mobile-agents-list {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
      }
      .mobile-agent-card {
        display: flex; flex-direction: column; align-items: center;
        gap: 4px; padding: 10px 4px; border-radius: 12px;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
        cursor: pointer; transition: all .15s; color: var(--text-body);
      }
      .mobile-agent-card:hover, .mobile-agent-card.active {
        background: rgba(37,99,235,.15); border-color: rgba(37,99,235,.3);
        color: #5b9aff;
      }
      body.light .mobile-agent-card {
        background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151;
      }
      body.light .mobile-agent-card:hover, body.light .mobile-agent-card.active {
        background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.3); color: #2563eb;
      }
      .mobile-agent-card svg { width: 20px; height: 20px; flex-shrink: 0; }
      .mobile-agent-info { text-align: center; line-height: 1.2; }
      .mobile-agent-info strong { display: block; font-size: 11px; font-weight: 600; }
      .mobile-agent-info small { font-size: 9px; opacity: .6; }

      .mobile-agent-subitems {
        display: none; padding: 12px 0 4px;
      }
      .mobile-agent-subitems.open { display: block; }
      .mobile-agent-subitems a {
        display: block; padding: 13px 16px; border-radius: 10px;
        font-size: 15px; font-weight: 500; color: var(--text-body);
        text-decoration: none; cursor: pointer; transition: background .15s;
      }
      .mobile-agent-subitems a:hover, .mobile-agent-subitems a:active {
        background: rgba(255,255,255,.06);
      }
      body.light .mobile-agent-subitems a { color: #374151; }
      body.light .mobile-agent-subitems a:hover { background: #f3f4f6; }
      .mobile-agent-subheading {
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
        color: rgba(255,255,255,.25); padding: 6px 16px 4px; margin-top: 8px;
      }
      .mobile-agent-subheading[onclick] {
        padding: 10px 16px;
        margin: 2px 0;
        cursor: pointer;
        transition: color .15s;
        border-top: none;
      }
      .mobile-agent-subheading[onclick]:active {
        color: rgba(255,255,255,.4);
      }
      body.light .mobile-agent-subheading { color: #9ca3af; }
      body.light .mobile-agent-subheading[onclick]:active { color: #6b7280; }
      .mobile-nav-divider {
        height: 1px; background: rgba(255,255,255,.06); margin: 8px 16px;
      }
      body.light .mobile-nav-divider { background: #e5e7eb; }

      /* Chatbot widget above bottom bar */
      .duke-tour-launcher { bottom: 72px !important; }
    }

    .bl-tmpl-ghost { opacity: 0.4; background: var(--primary-light) !important; border-color: var(--primary) !important; }
    .bl-tmpl-drag-handle:active { cursor: grabbing; }
  
  
    .ql-toolbar.ql-snow { background: rgba(255,255,255,0.03); border-color: var(--border-color) !important; border-radius: 12px 12px 0 0; }
    .ql-container.ql-snow { border-color: var(--border-color) !important; border-radius: 0 0 12px 12px; background: var(--bg-input); min-height: 300px; }
    .ql-editor { color: var(--text-primary); font-size: 14px; line-height: 1.7; min-height: 280px; }
    .ql-editor h2 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; color: var(--text-heading); }
    .ql-editor h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; color: var(--text-heading); }
    .ql-editor p { margin-bottom: 12px; }
    .ql-editor ul, .ql-editor ol { padding-left: 24px; margin-bottom: 12px; }
    .ql-editor ul { list-style-type: disc; }
    .ql-editor ol { list-style-type: decimal; }
    .ql-editor li { margin-bottom: 4px; line-height: 1.7; }
    .ql-editor li::marker { color: var(--text-secondary); }
    .ql-editor.ql-blank::before { color: var(--text-secondary); font-style: normal; }
    .ql-snow .ql-stroke { stroke: var(--text-secondary) !important; }
    .ql-snow .ql-fill { fill: var(--text-secondary) !important; }
    .ql-snow .ql-picker-label { color: var(--text-secondary) !important; }
    .ql-snow .ql-picker-options { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
    .ql-snow .ql-picker-item { color: var(--text-primary) !important; }
    .ql-snow .ql-active .ql-stroke { stroke: #5b9aff !important; }
    .ql-snow .ql-active .ql-fill { fill: #5b9aff !important; }
    .ql-snow .ql-active { color: #5b9aff !important; }
    .ql-snow button:hover .ql-stroke { stroke: #5b9aff !important; }
    .ql-snow button:hover .ql-fill { fill: #5b9aff !important; }
  

/* Noor config chip labels */
.chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.03);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.chip-label:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--primary);
}
.chip-label:has(input:checked) {
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.15);
  border-color: var(--primary);
  color: var(--primary);
}
.chip-label input[type="checkbox"] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Single Source of Truth
   All tokens, utilities, and component classes below.
   ═══════════════════════════════════════════════════════════════════ */