/* ═══════════════════════════════════════════════════════════════════════
   CLARIFY — Design Tokens
   Change colours, radii, shadows here and they flow everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --color-primary:          #6366f1;
    --color-primary-dark:     #4f46e5;
    --color-primary-light:    #818cf8;
    --color-primary-subtle:   rgba(99, 102, 241, 0.12);
    --color-secondary:        #8b5cf6;

    /* Auth gradient */
    --color-gradient-start:   #4338ca;
    --color-gradient-mid:     #6366f1;
    --color-gradient-end:     #8b5cf6;

    /* Sidebar / app bar */
    --color-surface-dark:     #1e293b;
    --color-surface-dark-2:   #2d3f54;

    /* Page backgrounds */
    --color-bg:               #f8fafc;
    --color-surface:          #ffffff;
    --color-surface-hover:    #f1f5f9;
    --color-surface-muted:    #f8fafc;

    /* Borders */
    --color-border:           #e2e8f0;
    --color-border-strong:    #cbd5e1;

    /* Text */
    --color-text:             #0f172a;
    --color-text-secondary:   #64748b;
    --color-text-muted:       #94a3b8;
    --color-text-placeholder: #94a3b8;

    /* Semantic */
    --color-success:          #16a34a;
    --color-success-bg:       #f0fdf4;
    --color-success-border:   #bbf7d0;
    --color-warning:          #d97706;
    --color-warning-light:    #f59e0b;
    --color-warning-bg:       #fffbeb;
    --color-warning-border:   #fde68a;
    --color-error:            #dc2626;
    --color-error-dark:       #991b1b;
    --color-error-bg:         #fef2f2;
    --color-error-border:     #fecaca;
    --color-info:             #0ea5e9;
    --color-info-bg:          #f0f9ff;
    --color-info-border:      #bae6fd;
    --color-purple:           #8b5cf6;
    --color-purple-bg:        #f5f3ff;
    --color-purple-border:    #ddd6fe;
    --color-error-light:        #fee2e2;
    --color-error-darker:       #7f1d1d;
    --color-error-border-strong:#fca5a5;
    --color-warning-dark:       #92400e;
    --color-warning-lightest:   #fef9c3;
    --color-orange:           #ea580c;
    --color-orange-bg:        #fff7ed;
    --color-orange-border:    #fed7aa;
    --color-pink:             #ec4899;
    --color-purple-light:     #ede9fe;
    --color-success-light-bg: #dcfce7;
    --color-primary-bg:       #eef2ff;
    --color-facebook:         #1877f2;
    --color-facebook-bg:      #e7f0ff;

    /* Own-comment / page reply */
    --color-own-comment:        #0891b2;
    --color-own-comment-bg:     #ecfeff;
    --color-own-comment-border: #a5f3fc;

    /* Drawer / sidebar tokens — change these to retheme the entire sidebar */
    --color-drawer-text:             #0f172a;
    --color-drawer-text-dim:         #475569;
    --color-drawer-text-muted:       #64748b;
    --color-drawer-icon-muted:       #94a3b8;
    --color-drawer-text-faint:       #a0aabb;
    --color-drawer-border:           #eceef3;
    --color-drawer-hover-bg:         rgba(99,102,241,0.06);
    --color-drawer-active-bg:        linear-gradient(135deg, rgba(99,102,241,0.13), rgba(139,92,246,0.09));
    --color-drawer-active-border:    rgba(99,102,241,0.18);
    --color-drawer-brand-icon-bg:    rgba(99,102,241,0.12);
    --color-drawer-brand-icon-border:rgba(99,102,241,0.25);

    /* Misc */
    --color-text-label:       var(--color-text-label);

    /* Radius */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:  0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
    --shadow-lg:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);

    /* Typography */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:   0.6875rem;
    --font-size-sm:   0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-lg:   1rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.375rem;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
}

/* ─── Reset & Base ─────────────────────────────────────────────────── */

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

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── App Bar ───────────────────────────────────────────────────────── */

.clarify-appbar {
    background: transparent !important;
    border-bottom: 1px solid var(--color-drawer-border) !important;
    box-shadow: 0 1px 16px -8px rgba(15,23,42,0.18) !important;
}
/* Frost lives on a pseudo-element so the appbar itself doesn't become a
   containing block for position:fixed descendants (e.g. the command palette). */
.clarify-appbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    pointer-events: none;
}

.appbar-username {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 4px 0 8px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appbar-icon-btn {
    color: var(--color-text-secondary) !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

.appbar-icon-btn:hover {
    color: var(--color-text) !important;
    background: var(--color-surface-hover) !important;
}

/* Avatar in the appbar — indigo gradient with a soft ring */
.clarify-appbar .mud-avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px -2px rgba(99,102,241,0.6), 0 0 0 2px rgba(99,102,241,0.12) !important;
}

/* Thin divider before the user cluster */
.clarify-appbar .appbar-divider {
    width: 1px;
    height: 22px;
    background: var(--color-drawer-border);
    margin: 0 10px 0 6px;
    flex-shrink: 0;
}

/* ─── Drawer ────────────────────────────────────────────────────────── */

.clarify-drawer .mud-drawer-content {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(185deg, #ffffff 0%, #fafbff 55%, #f6f7fe 100%);
    border-right: 1px solid var(--color-drawer-border);
    box-shadow: 1px 0 0 rgba(99,102,241,0.04), 4px 0 24px -12px rgba(15,23,42,0.06);
}

/* nav links scroll when the viewport is too short to show them all,
   while the brand stays pinned at the top and the footer at the bottom */
.drawer-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.25) transparent;
}
.drawer-nav::-webkit-scrollbar { width: 6px; }
.drawer-nav::-webkit-scrollbar-track { background: transparent; }
.drawer-nav::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.22);
    border-radius: var(--radius-full);
}
.drawer-nav:hover::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.38); }

/* one-time entrance for the brand + nav cluster */
.drawer-brand   { animation: railFadeIn 0.5s ease both; }
.tenant-switcher{ animation: railFadeIn 0.5s ease 0.06s both; }
.nav-section-label,
.mud-nav-link   { animation: railFadeIn 0.5s ease 0.1s both; }

@keyframes railFadeIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-brand, .tenant-switcher, .nav-section-label, .mud-nav-link { animation: none !important; }
}

/* soft indigo halo behind the brand at the top of the rail */
.clarify-drawer .mud-drawer-content::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: radial-gradient(125% 70% at 50% -10%, rgba(99,102,241,0.13), rgba(139,92,246,0.05) 45%, transparent 72%);
    pointer-events: none;
}

.drawer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--space-6) var(--space-4) var(--space-5);
    margin-bottom: var(--space-2);
    position: relative;
}

/* subtle gradient hairline under the brand */
.drawer-brand::after {
    content: "";
    position: absolute;
    left: var(--space-4); right: var(--space-4); bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-drawer-border) 20%, var(--color-drawer-border) 80%, transparent);
}

.drawer-logo {
    height: 58px;
    width: auto;
    display: block;
    border-radius: 16px;
    box-shadow:
        0 6px 18px -6px rgba(99,102,241,0.28),
        0 0 0 1px rgba(99,102,241,0.10);
    transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s ease;
}
.drawer-brand:hover .drawer-logo {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 10px 26px -8px rgba(99,102,241,0.40),
        0 0 0 1px rgba(99,102,241,0.18);
}

.drawer-footer {
    margin-top: auto;
    padding: var(--space-3) var(--space-4) var(--space-4);
    position: relative;
}
.drawer-footer::before {
    content: "";
    position: absolute;
    left: var(--space-4); right: var(--space-4); top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-drawer-border) 20%, var(--color-drawer-border) 80%, transparent);
}

/* ─── Tenant Switcher ─────────────────────────────────────────────────── */

.tenant-switcher {
    position: relative;
    /* Lift the whole switcher (and its open dropdown) above the nav below it —
       the nav links establish their own stacking, and without this the section
       labels paint over the dropdown, making the options unclickable. */
    z-index: 60;
    padding: 0 var(--space-3) var(--space-2);
}

.tenant-current {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,0.07), rgba(139,92,246,0.05));
    border: 1px solid var(--color-drawer-active-border);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: default;
    line-height: 1.4;
}

.tenant-current--clickable {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tenant-current--clickable:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
    box-shadow: 0 4px 14px -8px rgba(99,102,241,0.5);
}

.tenant-icon {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.tenant-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.tenant-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: var(--space-3);
    right: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1300;
    overflow: hidden;
}

.tenant-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.12s;
}

.tenant-option:hover { background: var(--color-bg-hover); }

/* non-clickable hint shown when a super user has no other workspaces to switch to */
.tenant-option--empty {
    color: var(--color-text-muted);
    font-style: italic;
    cursor: default;
}
.tenant-option--empty:hover { background: transparent; }

.tenant-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1299;
}

.drawer-footer-text {
    color: var(--color-drawer-text-faint) !important;
    font-size: var(--font-size-xs) !important;
}

.drawer-footer-links {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.65rem;
    color: var(--color-drawer-text-faint);
}
.drawer-footer-links a {
    color: var(--color-drawer-text-faint);
    text-decoration: none;
}
.drawer-footer-links a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

/* Legal links pinned to the bottom of the auth panel (the panel is a centered
   flexbox, so these are absolutely positioned rather than flowed). */
.auth-legal-links {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #94a3b8;
    z-index: 1;
}
.auth-legal-links a {
    color: #94a3b8;
    text-decoration: none;
}
.auth-legal-links a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ─── Nav Menu ──────────────────────────────────────────────────────── */

.nav-section-label {
    padding: var(--space-3) 22px var(--space-1);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-drawer-text-faint);
}

.nav-divider {
    height: 1px;
    background: var(--color-drawer-border);
    margin: var(--space-3) var(--space-4);
}

.mud-nav-link {
    position: relative !important;
    color: var(--color-drawer-text-dim) !important;
    border-radius: 9px !important;
    margin: 2px var(--space-3) !important;
    padding: 9px var(--space-3) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.mud-nav-link .mud-nav-link-icon {
    color: var(--color-drawer-icon-muted) !important;
    font-size: 1.15rem !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

.mud-nav-link:hover {
    color: var(--color-drawer-text) !important;
    background: var(--color-drawer-hover-bg) !important;
    text-decoration: none !important;
    transform: translateX(3px);
}

.mud-nav-link:hover .mud-nav-link-icon {
    color: var(--color-primary) !important;
    transform: scale(1.08);
}

.mud-nav-link.nav-active,
.mud-nav-link.active {
    color: #4338ca !important;
    background: var(--color-drawer-active-bg) !important;
    font-weight: 600 !important;
    box-shadow:
        inset 3px 0 0 0 var(--color-primary),
        inset 0 0 0 1px var(--color-drawer-active-border),
        0 4px 14px -6px rgba(99,102,241,0.45) !important;
}

.mud-nav-link.nav-active .mud-nav-link-icon,
.mud-nav-link.active .mud-nav-link-icon {
    color: var(--color-primary) !important;
}

/* ─── Main Content ──────────────────────────────────────────────────── */

.clarify-main {
    background: var(--color-bg);
    min-height: 100vh;
}

.page-content {
    padding: var(--space-8) var(--space-8) 48px;
    max-width: 1400px;
}

/* Dismissible "AI can make mistakes" reminder (app-wide, above page content) */
.ai-notice {
    display: flex; align-items: center; gap: 10px;
    margin: var(--space-6) var(--space-8) 0;
    padding: 10px 14px;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: var(--radius-md, 10px);
    color: #92400e; font-size: 0.82rem; line-height: 1.5;
}
.ai-notice-icon { font-size: 1.05rem; color: #d97706; flex-shrink: 0; }
.ai-notice-text { flex: 1; min-width: 0; }
.ai-notice-text strong { color: #78350f; }
.ai-notice-dismiss {
    flex-shrink: 0; border: none; background: none; color: #b45309; cursor: pointer;
    padding: 4px; border-radius: 6px; display: inline-flex;
}
.ai-notice-dismiss:hover { background: #fef3c7; color: #78350f; }
@media (max-width: 768px) {
    .ai-notice { margin: var(--space-4) var(--space-4) 0; }
}

/* ─── Public docs portal (/help) — self-contained, mirrors the /welcome look ─── */
.help-page {
    --lp-ink: #0f172a; --lp-muted: #475569; --lp-primary: #6366f1; --lp-primary-dark: #4f46e5; --lp-violet: #8b5cf6;
    font-family: 'Inter', system-ui, sans-serif; color: var(--lp-ink); background: #fff; line-height: 1.6;
}
.help-header { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 1.1rem 1.5rem; }
.help-logo { height: 34px; }
.help-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.9rem; font-weight: 500; }
.help-nav a { color: var(--lp-muted); text-decoration: none; }
.help-nav a:hover { color: var(--lp-primary-dark); }
.help-nav-signin { padding: 7px 18px; border: 1.5px solid #e2e8f0; border-radius: 99px; color: var(--lp-ink) !important; }
.help-nav-signin:hover { border-color: var(--lp-primary); }

.help-hero { text-align: center; padding: 3.5rem 1.5rem 1.5rem; max-width: 760px; margin: 0 auto; }
.help-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.8rem; }
.help-hero p { color: var(--lp-muted); font-size: 1.02rem; margin: 0 0 1.5rem; }
.help-search { width: 100%; max-width: 460px; padding: 11px 16px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 0.95rem; font-family: inherit; }
.help-search:focus { outline: none; border-color: var(--lp-primary); }

.help-index { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.help-section-card { border: 1px solid #e9edf5; border-radius: 16px; padding: 1.4rem 1.6rem; background: #fbfcfe; }
.help-section-card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.8rem; }
.help-section-card ul { list-style: none; margin: 0; padding: 0; }
.help-section-card li { padding: 5px 0; }
.help-section-card a { color: var(--lp-muted); text-decoration: none; font-size: 0.92rem; }
.help-section-card a:hover { color: var(--lp-primary-dark); }
.help-empty, .help-no-results { grid-column: 1 / -1; text-align: center; color: var(--lp-muted); }
.help-empty a, .help-no-results a { color: var(--lp-primary-dark); }

.help-layout { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
.help-sidebar { position: sticky; top: 1.5rem; align-self: start; }
.help-sidebar-section { margin-bottom: 1.2rem; }
.help-sidebar-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.4rem; }
.help-sidebar-link { display: block; padding: 4px 0; color: var(--lp-muted); text-decoration: none; font-size: 0.88rem; line-height: 1.45; }
.help-sidebar-link:hover { color: var(--lp-primary-dark); }
.help-sidebar-link.active { color: var(--lp-primary-dark); font-weight: 700; }

.help-article { min-width: 0; }
.help-back { display: inline-block; color: var(--lp-muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 1rem; }
.help-back:hover { color: var(--lp-primary-dark); }

.help-content { color: var(--lp-ink); }
.help-content h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1rem; }
.help-content h2 { font-size: 1.3rem; font-weight: 700; margin: 1.8rem 0 0.6rem; }
.help-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.5rem; }
.help-content p, .help-content li { font-size: 0.95rem; color: #334155; line-height: 1.7; }
.help-content p { margin: 0 0 0.9rem; }
.help-content ul, .help-content ol { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.help-content li { margin: 0.3rem 0; }
.help-content a { color: var(--lp-primary-dark); text-decoration: none; }
.help-content a:hover { text-decoration: underline; }
.help-content strong { color: var(--lp-ink); }
.help-content code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; font-size: 0.86em; }
.help-content pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; overflow: auto; }
.help-content blockquote { margin: 0 0 0.9rem; padding: 0.6rem 1rem; border-left: 3px solid #c7d2fe; background: #f8faff; color: #475569; }
.help-content table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.9rem; }
.help-content th, .help-content td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; }
.help-content th { background: #f8fafc; font-weight: 700; }
.help-content img { max-width: 100%; border-radius: 10px; }

.help-feedback { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid #eef2f7; }
.help-feedback-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; color: var(--lp-muted); }
.help-fb-btn { border: 1.5px solid #e2e8f0; background: #fff; color: var(--lp-ink); font-weight: 600; font-size: 0.82rem; padding: 5px 16px; border-radius: 99px; cursor: pointer; }
.help-fb-btn:hover { border-color: var(--lp-primary); }
.help-fb-thanks { color: var(--lp-primary-dark); font-weight: 600; }
.help-feedback-foot { font-size: 0.85rem; color: #94a3b8; margin: 0.9rem 0 0; }
.help-feedback-foot a { color: var(--lp-primary-dark); text-decoration: none; }

.help-footer { text-align: center; padding: 2.6rem 1.5rem 2.2rem; border-top: 1px solid #eef2f7; }
.help-footer-logo { height: 28px; opacity: 0.85; margin-bottom: 1rem; }
.help-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.4rem; font-size: 0.85rem; margin-bottom: 0.9rem; }
.help-footer-links a { color: var(--lp-muted); text-decoration: none; }
.help-footer-links a:hover { color: var(--lp-primary-dark); }
.help-footer-copy { font-size: 0.75rem; color: #94a3b8; margin: 0; }

@media (max-width: 760px) {
    .help-layout { grid-template-columns: 1fr; gap: 1.2rem; }
    .help-sidebar { position: static; }
    .help-nav { gap: 1rem; }
}

/* (.page-content.page-enter is defined with the page-transition rules below) */

/* ─── Cards / Paper ─────────────────────────────────────────────────── */

.mud-paper {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}

.mud-paper.mud-elevation-0 {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
}

/* ─── Stat Card ──────────────────────────────────────────────────────── */

.stat-card {
    padding: 20px var(--space-6);
    position: relative;
    overflow: hidden;
}

.stat-card-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.stat-card-icon {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Page Header ───────────────────────────────────────────────────── */

.page-header { margin-bottom: var(--space-6); }

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin: 0 0 5px;
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: 450;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */

.mud-button-root {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-size-sm) !important;
}

/* ─── Tables ─────────────────────────────────────────────────────────── */

.mud-table-root { border-radius: var(--radius-lg) !important; overflow: hidden; }

.mud-table-head .mud-table-cell {
    font-size: var(--font-size-xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-surface-muted) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px var(--space-4) !important;
}

.mud-table-body .mud-table-row:hover td { background: var(--color-surface-hover) !important; }

.mud-table-body .mud-table-cell {
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4) !important;
    border-bottom: 1px solid var(--color-surface-hover) !important;
    color: var(--color-text);
}

/* --- Auth Layout --- */

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(18px, -24px) scale(1.08); }
    66%       { transform: translate(-12px, 16px) scale(0.94); }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-layout {
    display: flex;
    min-height: 100vh;
    font-family: var(--font-sans);
}

/* -- Left panel -- */

.auth-panel-left {
    width: 440px;
    flex-shrink: 0;
    background: linear-gradient(-45deg, #4338ca, #7c3aed, #2563eb, #6d28d9, #4f46e5);
    background-size: 400% 400%;
    animation: gradient-shift 14s ease infinite;
    display: flex;
    flex-direction: column;
    padding: 48px 44px;
    position: relative;
    overflow: hidden;
}

.auth-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
}

.auth-orb-1 {
    width: 320px; height: 320px;
    top: -100px; right: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
    animation: orb-float 9s ease-in-out infinite;
}

.auth-orb-2 {
    width: 220px; height: 220px;
    bottom: 15%; left: -70px;
    background: radial-gradient(circle, rgba(167,139,250,0.35) 0%, transparent 70%);
    animation: orb-float 12s ease-in-out infinite;
    animation-delay: -4s;
}

.auth-orb-3 {
    width: 160px; height: 160px;
    bottom: 60px; right: 10%;
    background: radial-gradient(circle, rgba(96,165,250,0.3) 0%, transparent 70%);
    animation: orb-float 10s ease-in-out infinite;
    animation-delay: -7s;
}

.auth-left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.auth-logo { margin-bottom: 44px; }

.auth-logo-card {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    padding: 12px 22px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
}

.auth-logo-img {
    height: 52px;
    width: auto;
    display: block;
}

.auth-hero-title {
    font-size: 1.55rem;
    font-weight: 750;
    color: #ffffff;
    line-height: 1.32;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
}

.auth-hero-sub {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.72;
    margin: 0 0 32px;
}

.auth-features {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}

.auth-feature-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-quote-card {
    margin-top: 32px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 18px 20px;
}

.auth-quote-stars {
    color: #fbbf24;
    font-size: 0.7rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.auth-quote-text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.65;
    margin: 0 0 10px;
    font-style: italic;
}

.auth-quote-attr {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.auth-left-footer {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    position: relative;
    z-index: 1;
    margin-top: 32px;
}

/* -- Right panel -- */

@keyframes aurora-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes btn-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.auth-panel-right {
    flex: 1;
    background: linear-gradient(-55deg,
        #ede9fe, #f5f3ff, #eef2ff,
        #fdf4ff, #f0f9ff, #ede9fe, #fce7f3);
    background-size: 600% 600%;
    animation: aurora-shift 20s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    position: relative;
    overflow: hidden;
}

.auth-right-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(99,102,241,0.25) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
    opacity: 0.45;
}

.auth-right-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(110px);
    animation: orb-float 12s ease-in-out infinite;
}

.auth-right-orb-1 {
    width: 580px; height: 580px;
    top: -180px; right: -100px;
    background: radial-gradient(circle, rgba(167,139,250,0.55) 0%, transparent 65%);
    animation-duration: 15s;
}

.auth-right-orb-2 {
    width: 480px; height: 480px;
    bottom: -140px; left: -80px;
    background: radial-gradient(circle, rgba(99,102,241,0.45) 0%, transparent 65%);
    animation-duration: 12s;
    animation-delay: -5s;
}

.auth-right-orb-3 {
    width: 340px; height: 340px;
    top: 42%; right: 5%;
    background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 65%);
    animation-duration: 10s;
    animation-delay: -8s;
}

.auth-form-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.08),
        0 32px 80px -8px rgba(99,102,241,0.16),
        0 8px 32px rgba(0,0,0,0.06);
    padding: 40px;
    position: relative;
    z-index: 1;
    animation: fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile-only brand logo above the form (left panel is hidden on small screens). */
.auth-mobile-brand { display: none; }
.auth-mobile-logo-card {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.97);
    border-radius: 13px;
    padding: 11px 20px;
    box-shadow: 0 8px 28px rgba(99,102,241,0.18), 0 2px 8px rgba(0,0,0,0.08);
}
.auth-mobile-logo-card img { height: 36px; width: auto; display: block; }

/* --- Auth Form Elements --- */

.auth-heading { margin-bottom: 28px; }

.auth-heading h1 {
    font-size: 1.75rem;
    font-weight: 750;
    color: var(--color-text);
    letter-spacing: -0.035em;
    margin: 0 0 6px;
}

.auth-heading p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.auth-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.auth-field label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-label);
    margin-bottom: var(--space-1);
}

.auth-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.auth-field-row label { margin-bottom: 0; }

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    line-height: 0;
    z-index: 1;
}

.auth-input-wrapper .auth-input { padding-left: 40px; }

.auth-input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: #ffffff;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
}

.auth-input:focus {
    background: #fafaff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3.5px rgba(99,102,241,0.14);
}

.auth-input::placeholder { color: var(--color-text-placeholder); }

.auth-field-error {
    font-size: 0.75rem;
    color: var(--color-error);
    margin-top: var(--space-1);
}

.auth-validation-summary {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--color-error-dark);
    margin-bottom: var(--space-4);
    list-style: none;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 20px;
}

.auth-remember label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox {
    width: 15px; height: 15px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    accent-color: var(--color-primary);
    cursor: pointer;
}

.auth-btn-primary {
    width: 100%;
    padding: 12px var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(100deg, #818cf8, #6366f1 40%, #4f46e5 60%, #6366f1 80%, #818cf8);
    background-size: 200% auto;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    animation: btn-shimmer 3s linear infinite;
}

.auth-btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(99,102,241,0.5);
    transform: translateY(-1px);
}

.auth-btn-primary:active { transform: translateY(0); }

.auth-btn-primary:disabled,
.auth-btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.auth-btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 7px;
}

.auth-btn-secondary .auth-btn-spinner {
    border-color: rgba(99,102,241,0.25);
    border-top-color: var(--color-primary);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 20px 0;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-label);
    background: #ffffff;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-btn-secondary:hover {
    background: #fafaff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    color: var(--color-text-label);
    text-decoration: none;
}

.auth-footer-link {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 20px 0 0;
}

.auth-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.auth-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.auth-link-sm { font-size: var(--font-size-sm); }

.auth-section-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 20px 0 14px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.auth-textarea {
    resize: vertical;
    min-height: 76px;
    line-height: 1.5;
}

.auth-link {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

.auth-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.auth-link-sm { font-size: var(--font-size-sm); }

.auth-success-card {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 12px;
    padding: 28px 24px 20px;
    text-align: center;
    margin-bottom: 24px;
}

.auth-success-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(139,92,246,0.14) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-primary);
}

.auth-success-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ─── Validation ────────────────────────────────────────────────────── */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-error); }
.validation-message { color: var(--color-error); font-size: var(--font-size-sm); }
.darker-border-checkbox.form-check-input { border-color: var(--color-text-muted); }

/* ─── Blazor Error ──────────────────────────────────────────────────── */

.blazor-error-boundary {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    color: var(--color-error-dark);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
}

/* ─── Scrollbar ─────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ─── Comment Queue ─────────────────────────────────────────────────── */

.queue-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.queue-filter-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.queue-filter-bottom {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.queue-search { flex: 1; min-width: 180px; max-width: 340px; }

.queue-post-select { width: 220px; flex-shrink: 0; }

.queue-date-select { width: 150px; flex-shrink: 0; }

.queue-filter-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.filter-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.filter-chip-count { font-size: var(--font-size-xs); font-weight: 600; opacity: 0.8; }

/* Queue split layout */
.queue-split {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
    min-height: 480px;
}

.queue-list-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
}

.queue-detail-panel {
    width: 420px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
}

/* Comment rows */
.comment-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px var(--space-4) 14px 16px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.1s ease;
    position: relative;
}

.comment-row:last-child { border-bottom: none; }
.comment-row:hover { background: var(--color-surface-hover); }
.comment-row.is-selected { background: var(--color-primary-subtle); }

.comment-row-indicator {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.comment-row-avatar {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.comment-row-body { flex: 1; min-width: 0; }

.comment-row-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: 3px;
}

.comment-row-author {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-row-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.comment-row-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.comment-row-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Category badges */
.category-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.category-badge.unclassified {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

.confidence-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.reaction-counts {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-surface-hover);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.reaction-pill-pending {
    opacity: 0.55;
    font-style: italic;
}

.reaction-total {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-left: 2px;
}

.detail-reactions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
}

.reply-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.reply-status-badge.approved {
    background: rgba(22,163,74,0.12);
    color: var(--color-success);
}

/* View toggle */
.view-toggle {
    display: flex;
    gap: 2px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.15s ease;
}

.view-toggle-btn.active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* Platform chips */
.queue-platform-chips {
    display: flex;
    gap: var(--space-2);
}

.platform-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.platform-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.platform-chip.active { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

.platform-chip-sep {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
    margin: 2px 2px;
    flex-shrink: 0;
}

/* Pagination */
.queue-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.pagination-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Post group headers */
/* ── Post accordion ───────────────────────────────────────── */
.post-accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.post-accordion-header {
    display: flex;
    align-items: stretch;
    border-left: 4px solid var(--post-accent, #94a3b8);
    background: color-mix(in srgb, var(--post-accent, #94a3b8) 10%, var(--color-surface-muted));
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 1;
    transition: background 0.12s;
}

.post-accordion-header:hover {
    background: color-mix(in srgb, var(--post-accent, #94a3b8) 18%, var(--color-surface-muted));
}

/* Thumbnail */
.post-header-thumb {
    width: 82px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
    border-right: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.post-header-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--post-accent, #94a3b8) 6%, var(--color-surface));
    color: var(--color-text-muted);
}

/* Main content */
.post-header-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    gap: 7px;
}

/* Row 1: caption + meta */
.post-header-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.post-header-caption {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-header-no-caption {
    font-style: italic;
    font-weight: 400;
    opacity: 0.45;
}

.post-header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 1px;
}

.post-header-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.post-header-fb-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: opacity 0.12s, color 0.12s;
    text-decoration: none;
}
.post-header-fb-link:hover { opacity: 1; color: var(--color-primary); }

/* Row 2: reactions | sep | stats | spacer | count | expand | actions */
.post-header-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

.post-header-reactions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.post-header-sep {
    width: 1px;
    height: 13px;
    background: var(--color-border);
    flex-shrink: 0;
    opacity: 0.7;
}

.post-header-stats {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Stat chips */
.post-stat-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.67rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.post-stat-chip.chip-info   { background: color-mix(in srgb, var(--color-info)   16%, transparent); color: var(--color-info); }
.post-stat-chip.chip-warn   { background: color-mix(in srgb, #f59e0b             16%, transparent); color: #d97706; }
.post-stat-chip.chip-danger { background: color-mix(in srgb, var(--color-error)  16%, transparent); color: var(--color-error); }
.post-stat-chip.chip-pink   { background: color-mix(in srgb, #ec4899             16%, transparent); color: #db2777; }
.post-stat-chip.chip-purple { background: color-mix(in srgb, var(--color-purple) 16%, transparent); color: var(--color-purple); }

.post-header-spacer { flex: 1; min-width: 0; }

.post-header-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Unified action buttons */
.post-header-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    margin-left: 2px;
}

.post-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}
.post-action-btn:hover:not(:disabled) {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.post-action-btn:disabled { opacity: 0.4; cursor: default; }
.post-action-btn.is-active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.post-action-btn.action-success { color: var(--color-success); }
.post-action-btn.action-success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.post-action-btn.action-done { color: var(--color-success); opacity: 0.65; }
.post-action-btn.action-done:hover:not(:disabled) {
    opacity: 1;
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.post-action-badge {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.post-accordion-preview {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-surface-muted) 50%, transparent);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.6;
    white-space: pre-wrap;
}

.post-accordion-body {
    border-top: 1px solid var(--color-border);
}

.post-accordion-empty {
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* post-refresh-btn / post-reactivate-btn replaced by .post-action-btn */

.comment-moderate-btn {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.comment-row:hover .comment-moderate-btn,
.comment-moderate-btn.is-moderated {
    opacity: 1;
}
.comment-moderate-btn:hover:not(.is-moderated) {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 7%, transparent);
}
.comment-moderate-btn.is-moderated {
    color: var(--color-success);
}
.comment-moderate-btn.is-disabled {
    opacity: 0;
    cursor: not-allowed;
    color: #94a3b8;
}
.comment-row:hover .comment-moderate-btn.is-disabled {
    opacity: 1;
}
.comment-review-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-error);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.comment-row:hover .comment-review-btn {
    opacity: 1;
}
.comment-review-btn:hover {
    background: color-mix(in srgb, var(--color-error) 7%, transparent);
}
.comment-reviewed-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 7%, transparent);
    border-radius: 4px;
}
/* clickable variant — toggles the review state back off */
button.comment-reviewed-badge.is-toggle {
    border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
button.comment-reviewed-badge.is-toggle:hover {
    background: color-mix(in srgb, var(--color-error) 9%, transparent);
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 25%, transparent);
}

/* post-moderate-btn replaced by .post-action-btn.action-done */

.post-accordion.is-moderated {
    opacity: 0.65;
}

/* Post topic category badge */
.post-topic-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* post-bulk-btn / post-gen-btn replaced by .post-action-btn */

/* Bulk hide panel */
.bulk-hide-panel { display: flex; flex-direction: column; }

.bulk-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.bulk-panel-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}
.bulk-panel-post {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulk-cat-chips {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.bulk-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--cat-color) 45%, transparent);
    background: color-mix(in srgb, var(--cat-color) 12%, transparent);
    color: var(--cat-color);
    transition: background 0.12s, opacity 0.12s;
}
.bulk-cat-chip.none-sel { opacity: 0.35; }
.bulk-cat-chip.part-sel { background: color-mix(in srgb, var(--cat-color) 6%, transparent); }
.bulk-cat-chip:hover { background: color-mix(in srgb, var(--cat-color) 22%, transparent); opacity: 1; }
.bulk-cat-chip-count { font-size: 0.68rem; opacity: 0.75; }

.bulk-select-all-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    background: var(--color-surface-muted);
    flex-shrink: 0;
    user-select: none;
}
.bulk-select-all-row:hover { background: var(--color-border); }

.bulk-panel-list { flex: 1; overflow-y: auto; }

.bulk-candidate-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
    user-select: none;
}
.bulk-candidate-row:hover { background: var(--color-surface-muted); }
.bulk-candidate-row.is-selected {
    background: color-mix(in srgb, var(--color-warning-light) 6%, var(--color-surface));
}

.bulk-candidate-check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: var(--color-warning);
}

.bulk-candidate-body { flex: 1; min-width: 0; }
.bulk-candidate-author {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.bulk-candidate-text {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-candidate-thumb { margin-top: 6px; }
.bulk-candidate-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: block;
}

.bulk-panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.bulk-hide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--color-warning-light) 15%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning-light) 40%, transparent);
    transition: background 0.12s, color 0.12s;
}
.bulk-hide-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-warning-light) 25%, transparent);
    color: #b45309;
}
.bulk-hide-btn:disabled { opacity: 0.4; cursor: default; }


.bulk-reply-config {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}
.bulk-reply-config-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.bulk-reply-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    user-select: none;
}
.bulk-reply-cat-row:last-child { border-bottom: none; }
.bulk-reply-cat-row:hover { opacity: 0.85; }

.bulk-reply-log {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bulk-reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    transition: background 0.12s;
}
.bulk-reply-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.bulk-reply-btn:disabled { opacity: 0.4; cursor: default; }
.bulk-reply-btn.done {
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}
.bulk-reply-btn.done:hover {
    background: color-mix(in srgb, var(--color-success) 22%, transparent);
}

/* Bulk reply review list */
.bulk-reply-review-list {
    flex: 1;
    overflow-y: auto;
}
.bulk-reply-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: background 0.1s;
}
.bulk-reply-item.is-approved { background: color-mix(in srgb, var(--color-success) 4%, var(--color-surface)); }
.bulk-reply-item.is-posted   { background: color-mix(in srgb, var(--color-info) 4%, var(--color-surface)); }

.bulk-reply-item-header {
    display: flex;
    align-items: center;
    gap: 7px;
}
.bulk-reply-item-author {
    font-size: 0.8rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-reply-item-comment {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-reply-draft {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    line-height: 1.5;
    font-family: inherit;
    transition: border-color 0.12s;
}
.bulk-reply-draft:focus {
    outline: none;
    border-color: var(--color-primary);
}
.bulk-reply-draft:disabled { opacity: 0.6; cursor: default; resize: none; }

.bulk-reply-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bulk-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s;
}
.bulk-action-btn.approve {
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}
.bulk-action-btn.approve:hover {
    background: color-mix(in srgb, var(--color-success) 22%, transparent);
}
.bulk-action-btn.post {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.bulk-action-btn.post:hover {
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.post-show-more-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    transition: color 0.12s, background 0.12s;
}

.post-show-more-btn:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* ── Reply threads ────────────────────────────────────────── */
.reply-thread {
    border-left: 2px solid var(--color-border);
    margin-left: 52px;
    margin-bottom: 2px;
}

.reply-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.reply-toggle-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.reply-toggle-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.comment-row.reply-row {
    padding-left: 10px;
    background: color-mix(in srgb, var(--color-surface) 60%, var(--color-background));
}

.comment-row.reply-row .comment-row-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

/* ── FB-style post card ───────────────────────────────────── */
.fb-post-card {
    margin: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    display: flex;
    min-height: 90px;
}

/* ── Media panel (left column) ── */
.fb-post-media {
    flex-shrink: 0;
    width: 160px;
    border-right: 1px solid var(--color-border);
    overflow: hidden;
    background: #000;
}

.fb-post-image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 90px;
    max-height: 200px;
}

.fb-post-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-border);
    height: 100%;
}

.fb-post-gallery-img {
    width: 100%;
    height: 88px;
    object-fit: cover;
    display: block;
}

/* ── Text panel (right column) ── */
.fb-post-body {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fb-post-caption {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.6;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fb-post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    flex-shrink: 0;
}

.fb-post-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-left: auto;
}

.fb-post-link:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.reaction-pill.sm {
    font-size: 0.7rem;
    padding: 1px 5px;
}

.reaction-pill.xs {
    font-size: 0.65rem;
    padding: 1px 4px;
}

.post-group-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.post-group-link:hover {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
    text-decoration: none;
}

.comment-row-post-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    margin-left: auto;
    opacity: 0.8;
    white-space: nowrap;
}

.comment-row-post-link:hover {
    opacity: 1;
    text-decoration: underline;
    color: var(--color-primary);
}

.comment-row-post-label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Tracked account badge */
.tracked-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    vertical-align: middle;
    line-height: 1.4;
}
.own-comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-own-comment);
    background: color-mix(in srgb, var(--color-own-comment) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-own-comment) 27%, transparent);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    vertical-align: middle;
    line-height: 1.4;
}

.comment-row-author-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Queue empty state */
.queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 80px var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Detail panel */
.detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 1;
}

.detail-author-avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: 700;
    flex-shrink: 0;
}

.detail-author-info { flex: 1; min-width: 0; }

.detail-author-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.detail-author-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-close {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.detail-close:hover { background: var(--color-surface-hover); color: var(--color-text); }

.detail-ext-link {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 0.15s;
}
.detail-ext-link:hover { opacity: 1; }

.detail-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}

.detail-comment-block {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.detail-comment-text {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: var(--space-2);
}

.detail-comment-media {
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 100%;
}

.detail-comment-media img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.comment-row-media {
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
}

.comment-row-media img {
    display: block;
    max-height: 80px;
    max-width: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.detail-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.detail-classification {
    border: 1px solid;
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.detail-class-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.detail-confidence { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; }

.detail-reclassify-btn { margin-left: auto; }
.detail-reclassify-btn button { min-width: 0 !important; padding: 2px 6px !important; }

.detail-reason {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.detail-section-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.detail-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* ─── Mobile Auth ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .auth-panel-left { display: none; }
    .auth-panel-right {
        padding: 36px var(--space-4) var(--space-7);
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }
    .auth-form-card { box-shadow: 0 16px 48px rgba(99,102,241,0.12); padding: var(--space-6) var(--space-5); }
    .auth-mobile-brand { display: flex; justify-content: center; margin-bottom: 24px; }
    .page-content { padding: var(--space-4) var(--space-4) var(--space-8); }
}

/* ─── Settings ───────────────────────────────────────────────────────── */

.settings-section-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.settings-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.settings-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.settings-platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.settings-card-meta { flex: 1; min-width: 0; }
.settings-card-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.settings-card-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

.settings-status-badge {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}
.settings-status-badge.configured   { background: rgba(22,163,74,0.1);  color: var(--color-success); }
.settings-status-badge.unconfigured { background: var(--color-surface-hover); color: var(--color-text-muted); }

.settings-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.settings-field { width: 100%; }

.settings-field-row {
    display: flex;
    gap: var(--space-3);
}
.settings-field-row .settings-field { flex: 1; }

.settings-connected-list {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.settings-connected-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
}
.settings-connected-name { font-weight: 500; color: var(--color-text); }
.settings-connected-id   { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-left: var(--space-2); }
.settings-connected-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-left: auto; }

.settings-platform-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .settings-platform-grid { grid-template-columns: 1fr 1fr; }
}

.settings-nav {
    display: flex;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    margin-bottom: var(--space-6);
    width: fit-content;
}

.settings-nav-item {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.settings-nav-item:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
    text-decoration: none;
}

.settings-nav-item.active {
    color: var(--color-primary);
    background: rgba(99,102,241,0.08);
    font-weight: 600;
}

/* ── Account Tracker ─────────────────────────────────────────────────── */

.accounts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.accounts-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 2px;
}

.accounts-subtitle {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.accounts-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Four tiles don't fit a phone width — let them grid up 2x2 instead of the
   last (Blocked) tile spilling off the edge. */
@media (max-width: 600px) {
    .acct-stat { flex: 1 1 40%; }
}

.acct-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px 18px;
    min-width: 72px;
}

.acct-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

.acct-stat-label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.accounts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: 64px 24px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.accounts-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.accounts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.acct-card {
    display: flex;
    gap: var(--space-3);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: var(--space-4);
    transition: box-shadow 0.15s;
}

.acct-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.acct-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.acct-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acct-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.acct-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.acct-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acct-badge.esafety {
    background: color-mix(in srgb, var(--color-error) 13%, transparent);
    color: var(--color-error);
}

.acct-badge.signal {
    background: color-mix(in srgb, var(--color-warning-light) 13%, transparent);
    color: var(--color-warning);
}

.acct-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.acct-score-bar-wrap {
    width: 80px;
    height: 6px;
    background: var(--mud-palette-lines-default);
    border-radius: 3px;
    overflow: hidden;
}

.acct-score-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.acct-score-pct {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
}

.acct-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.acct-platform-badge {
    background: var(--mud-palette-background-grey);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.acct-id {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.acct-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.77rem;
    color: var(--mud-palette-text-secondary);
}

.acct-signals {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acct-signal-detail {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--color-warning-light) 5%, transparent);
    border-left: 2px solid var(--color-warning-light);
    padding: 4px 8px;
    border-radius: 0 4px 4px 0;
}

/* ── Account Tracker — split panel + new views ──────────────────────── */

.acct-view-toggle {
    display: flex;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.acct-view-btn {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: background 0.15s, color 0.15s;
}

.acct-view-btn.active {
    background: var(--mud-palette-primary);
    color: #fff;
}

.acct-view-btn:not(.active):hover {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}

/* Split panel (mirrors queue-split) */
.acct-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-height: 0;
}

@media (min-width: 900px) {
    .acct-split.has-detail {
        grid-template-columns: 340px 1fr;
    }
}

/* List panel */
.acct-list-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* Account/Group row button */
.acct-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.12s, border-color 0.12s;
}

.acct-row:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.acct-row.selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.acct-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.acct-row-avatar.group-avatar {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

.acct-row-body {
    flex: 1;
    min-width: 0;
}

.acct-row-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.acct-row-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.77rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.acct-row-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.acct-row-score {
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Detail panel */
.acct-detail-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 200px);
}

.acct-detail-panel .detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acct-detail-panel .detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acct-detail-panel .detail-body > * {
    flex-shrink: 0;
}

/* Score row */
.acct-detail-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acct-detail-score-label {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Meta row */
.acct-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.77rem;
    color: var(--mud-palette-text-secondary);
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Threat type badge */
.acct-threat-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Group membership chip */
.acct-group-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 500;
}

.acct-group-change {
    background: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
    transition: background 0.12s;
}
.acct-group-change:hover { background: var(--mud-palette-background); }

/* Group form */
.acct-group-form {
    background: var(--mud-palette-background-grey);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Member row inside group detail */
.acct-group-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.acct-group-member-row:last-child { border-bottom: none; }

/* Threat flag dot on avatar */
.acct-threat-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background: #dc2626;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
}

/* Risk badge on account rows */
.acct-risk-badge {
    flex-shrink: 0;
}

/* Per-flag chips in account row sub-line */
.acct-flag-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.acct-sub-platform {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.acct-sub-total {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Filter divider */
.filter-divider {
    width: 1px;
    height: 22px;
    background: var(--mud-palette-lines-default);
    margin: 0 2px;
}

/* Search box */
.acct-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface-muted);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    padding: 3px 10px;
    min-width: 180px;
    max-width: 260px;
    transition: border-color 0.15s;
}
.acct-search-wrap:focus-within {
    border-color: var(--color-primary);
}
.acct-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.acct-search-input::placeholder { color: var(--color-text-muted); }
.acct-search-clear {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.acct-search-clear:hover { color: var(--color-text); }

/* Pagination row */
.acct-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 6px;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
}
.acct-pagination-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Activity filter select */
.acct-filter-select {
    font-size: 0.8rem;
    padding: 4px 10px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 20px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Post group in activity feed */
.acct-post-group {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.acct-post-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-background-grey);
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.78rem;
}

.acct-post-caption {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-post-date {
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Reply context line */
.acct-reply-context {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px 0;
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

.acct-reply-parent-name {
    font-weight: 600;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.acct-reply-parent-body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Notes area */
.acct-notes-row {
    margin-bottom: 4px;
}

.acct-notes-field {
    width: 100%;
}

/* Comment rows in detail panels */
.acct-comment-row {
    background: transparent;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.acct-comment-row:not(:last-child) {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.acct-comment-row.is-reply {
    padding-left: 22px;
    background: rgba(99,102,241,0.02);
}

.acct-comment-row.timing-cluster {
    border-left: 3px solid var(--color-warning-light);
    padding-left: 10px;
}

.acct-comment-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.acct-comment-body {
    font-size: 0.82rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

.acct-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

/* ── AI Analysis ──────────────────────────────────────────────────── */

.ai-analysis-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ai-analysis-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: block;
}

.ai-analysis-sub {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    display: block;
    margin-top: 2px;
}

.ai-suggestions-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

.ai-suggestion-empty {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ai-suggestion-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    transition: opacity 0.2s;
}

.ai-suggestion-card.dismissed {
    opacity: 0.4;
}

.ai-suggestion-card.applied {
    border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
    background: color-mix(in srgb, var(--color-success) 3%, transparent);
}

.ai-suggestion-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--mud-palette-secondary);
}

.ai-suggestion-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-suggestion-type {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-secondary);
}

.ai-suggestion-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-suggestion-desc {
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

.ai-suggestion-reasoning {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    line-height: 1.4;
}

.ai-suggestion-members {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 0.77rem;
    color: var(--mud-palette-text-secondary);
}

.ai-member-chip {
    background: var(--mud-palette-background-grey);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Archive */
.acct-archived-banner {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #94a3b212;
    border: 1px solid #94a3b230;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #64748b;
}

.acct-archive-form {
    background: var(--mud-palette-background-grey);
    border-radius: 10px;
    padding: 12px;
}

.ai-reasoning-block {
    background: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
}

.ai-reasoning-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-secondary);
    margin-bottom: 5px;
}

.ai-reasoning-text {
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.ai-suggestion-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Timing cluster badge */
.timing-cluster-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning-light) 9%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    margin-bottom: 4px;
    align-self: flex-start;
}

/* Suspected coordinator block */
.coordinator-block {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.coordinator-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.coordinator-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-error);
}

.coordinator-identity {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.coordinator-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-error-dark);
}

.coordinator-id {
    font-size: 0.75rem;
    color: #b91c1c;
    opacity: 0.8;
}

.coordinator-reason {
    font-size: 0.78rem;
    color: #7f1d1d;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Generate Report button */
.report-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-radius: 5px;
    padding: 3px 8px;
    text-decoration: none;
    transition: background 0.15s;
}

.report-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    text-decoration: none;
    color: var(--mud-palette-primary);
}

/* ── Group Report page ─────────────────────────────────────── */
.report-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 32px;
    font-family: var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
}

.report-header {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 24px;
    margin-bottom: 32px;
}

.report-org {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.report-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    margin: 0 0 4px;
}

.report-subtitle {
    font-size: 0.88rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.report-meta-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.report-meta-item strong {
    color: var(--mud-palette-text-primary);
    margin-right: 4px;
}

.report-section {
    margin-bottom: 32px;
}

.report-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

.report-description {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--mud-palette-text-primary);
    margin: 0 0 12px;
}

.report-ai-box {
    background: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.84rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--mud-palette-text-primary);
    margin-bottom: 12px;
}

.report-coordinator-box {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: 8px;
    padding: 14px 16px;
}

.report-coordinator-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-error);
    margin-bottom: 6px;
}

.report-coordinator-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-error-dark);
    margin-bottom: 4px;
}

.report-coordinator-reason {
    font-size: 0.83rem;
    color: #7f1d1d;
    line-height: 1.55;
    margin: 0;
    font-style: italic;
}

.report-member-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.report-member-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.report-member-meta {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.report-member-signals {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.report-timeline-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.83rem;
}

.report-timeline-row:last-child { border-bottom: none; }

.report-timeline-time {
    width: 130px;
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    padding-top: 2px;
}

.report-timeline-body {
    flex: 1;
    min-width: 0;
}

.report-timeline-author {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 3px;
}

.report-timeline-text {
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
    margin-bottom: 4px;
}

.report-timeline-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.report-timing-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning-light) 9%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
}

.report-print-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 100;
}

@media print {
    .report-print-btn,
    .mud-drawer,
    nav,
    .mud-appbar,
    .mud-layout-drawer { display: none !important; }

    .report-page {
        padding: 0;
        max-width: 100%;
    }

    body { background: white !important; }

    .report-member-card,
    .report-coordinator-box,
    .report-ai-box { break-inside: avoid; }
}

/* ── Dashboard ─────────────────────────────────────────────── */

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.dash-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    margin: 0 0 2px;
}

.dash-subtitle {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.dash-queue-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}

.dash-queue-btn:hover {
    background: var(--color-primary-dark);
    color: #fff;
    text-decoration: none;
}

.dash-queue-badge {
    background: #fff;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 8px;
}

/* Stat cards row */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .dash-stats { grid-template-columns: 1fr; }
}

.dash-stat-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}

.dash-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-stat-body { min-width: 0; }

.dash-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.dash-stat-label {
    font-size: 0.73rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
}

/* Main content grid */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 960px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* min-width: 0 — grid items default to min-width:auto, so wide intrinsic
   content (the ApexCharts svg, topic bars) stops the 1fr column shrinking on
   mobile and stretches the whole page horizontally. */
.dash-col-main, .dash-col-side { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* Cards */
.dash-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
}

/* ApexCharts sizes its svg at render time; never let it push past the card. */
.dash-card .apexcharts-canvas,
.dash-card .apexcharts-canvas svg {
    max-width: 100%;
}

.dash-card-alert {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
}

/* Scan button */
.dash-scan-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.83rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.dash-scan-btn:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.dash-scan-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Scan progress log */
.dash-scan-log {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dash-scan-log-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-scan-log-close {
    align-self: flex-end;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
}

.dash-scan-log-close:hover { color: var(--mud-palette-text-primary); }

.dash-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.dash-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dash-card-sub {
    font-size: 0.73rem;
    color: var(--mud-palette-text-secondary);
}

.dash-card-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.dash-card-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

/* Empty state */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
}

.dash-empty p { margin: 0; }

/* Shared <EmptyState /> component */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    color: var(--mud-palette-text-secondary);
}

.empty-state-icon {
    font-size: 2.4rem;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 10px;
}

.empty-state-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.empty-state-desc {
    margin-top: 4px;
    font-size: 0.82rem;
    max-width: 380px;
}

.empty-state-actions { margin-top: 16px; }

/* Shared <LoadingState /> component */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
}

.loading-state-msg {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────
   Account settings (ASP.NET Identity Manage pages)
   ───────────────────────────────────────────────────────────────────────── */

/* Clickable username in the app bar */
.appbar-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    transition: background 0.15s ease;
}
.appbar-user:hover { background: var(--color-surface-hover); }
.appbar-user .appbar-username { color: var(--color-text); }

.acct-settings {
    max-width: 920px;
    margin: 0 auto;
    padding: 8px 4px 48px;
}

.acct-settings-header { margin-bottom: 24px; }
.acct-settings-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0;
}
.acct-settings-sub {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.acct-settings-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 720px) {
    .acct-settings-body { grid-template-columns: 1fr; }
}

/* Sidebar nav */
.acct-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 16px;
}
.acct-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.acct-nav-link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.acct-nav-link.active {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
    font-weight: 600;
}
.acct-nav-link.active .acct-nav-icon { color: var(--color-primary); }
.acct-nav-icon { font-size: 1.1rem !important; color: var(--color-text-muted); }
.acct-nav-link--muted { color: var(--color-text-muted); }
.acct-nav-divider { height: 1px; background: var(--color-border); margin: 8px 4px; }

/* Content card */
.acct-settings-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
}

.acct-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px;
}
.acct-section-sub {
    margin: 0 0 20px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* App-styled form controls + buttons inside the settings area (covers the
   Bootstrap-classed Identity pages we don't restyle individually). */
.acct-settings-content h1,
.acct-settings-content h2,
.acct-settings-content h3,
.acct-settings-content h4 {
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.acct-settings-content h1 { font-size: 1.25rem; }
.acct-settings-content h2 { font-size: 1.05rem; }
.acct-settings-content h3 { font-size: 1.05rem; }
.acct-settings-content hr { border-color: var(--color-border); opacity: 1; margin: 16px 0; }

.acct-field { margin-bottom: 16px; }
.acct-field > label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.acct-input,
.acct-settings-content .form-control {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acct-input:focus,
.acct-settings-content .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.acct-input::placeholder { color: var(--color-text-placeholder); }

.acct-settings-content .form-floating > label { color: var(--color-text-muted); }

.acct-btn-primary,
.acct-settings-content .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}
.acct-btn-primary:hover,
.acct-settings-content .btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

.acct-settings-content .btn-danger {
    background: var(--color-error);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
}
.acct-settings-content .btn-danger:hover { background: var(--color-error-dark); }

.acct-field-error,
.acct-validation,
.acct-settings-content .text-danger {
    color: var(--color-error);
    font-size: 0.8125rem;
}
.acct-field-error { display: block; margin-top: 6px; }

.acct-settings-content .alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    padding: 12px 14px;
}
.acct-settings-content .alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: #166534; }
.acct-settings-content .alert-danger  { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-dark); }
.acct-settings-content .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.acct-settings-content .alert-info    { background: var(--color-primary-bg); border-color: #c7d2fe; color: var(--color-primary-dark); }

/* Info banner (e.g. why 2FA is enforced) */
.acct-info-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-primary-bg);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 0.83rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.acct-info-banner strong { color: var(--color-primary-dark); font-weight: 600; }
.acct-info-banner-icon { color: var(--color-primary) !important; font-size: 1.25rem !important; flex-shrink: 0; margin-top: 1px; }

/* 2FA setup steps */
.acct-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.acct-steps > li { display: flex; gap: 14px; }
.acct-step-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
    font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.acct-step-body { flex: 1; min-width: 0; }
.acct-step-body strong { font-size: 0.9rem; color: var(--color-text); }
.acct-step-body p { margin: 2px 0 10px; font-size: 0.83rem; color: var(--color-text-secondary); line-height: 1.6; }

.acct-2fa-qr {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}
.acct-2fa-qr img { display: block; }

.acct-2fa-key {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    max-width: 320px;
}
.acct-2fa-key-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.acct-2fa-key code { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--color-text); word-break: break-all; }

.acct-2fa-form { max-width: 280px; }

/* 2FA completed + recovery codes */
.acct-2fa-done { text-align: center; max-width: 460px; margin: 0 auto; }
.acct-2fa-done-icon {
    width: 56px; height: 56px; margin: 0 auto 12px;
    border-radius: var(--radius-full);
    background: var(--color-success-bg);
    color: var(--color-success);
    display: flex; align-items: center; justify-content: center;
}
.acct-recovery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0 24px;
    text-align: left;
}
.acct-recovery-code {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--color-text);
}

/* Recent flags feed */
.dash-flag-row {
    display: flex;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 6px;
    margin: 0 -8px;
}

.dash-flag-row:last-child { border-bottom: none; }
.dash-flag-row:hover { background: var(--color-surface-hover); }
.dash-flag-row.selected { background: var(--color-primary-subtle); }

.dash-flag-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.dash-flag-full-body {
    font-size: 0.83rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.55;
    margin-bottom: 8px;
    white-space: pre-wrap;
}

.dash-flag-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.dash-flag-reason {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.dash-flag-action-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: 5px;
    padding: 3px 8px;
    text-decoration: none;
    transition: background 0.15s;
}

.dash-flag-action-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
    text-decoration: none;
}

.dash-flag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.dash-flag-body { flex: 1; min-width: 0; }

.dash-flag-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.dash-flag-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.dash-flag-time {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
}

.dash-flag-text {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

/* Category breakdown */
.dash-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dash-cat-row:last-child { margin-bottom: 0; }

.dash-cat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    width: 110px;
    flex-shrink: 0;
}

.dash-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-cat-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}

.dash-cat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.dash-cat-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* Threat groups */
.dash-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    transition: background 0.1s;
    cursor: pointer;
}

.dash-group-row:last-child { border-bottom: none; }

.dash-group-row:hover { opacity: 0.8; }

.dash-group-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-group-body { flex: 1; min-width: 0; }

.dash-group-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-group-sub {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* Post chart legend */
.dash-post-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

.dash-post-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.12s;
}

.dash-post-row:hover {
    background: var(--color-hover);
    text-decoration: none;
}

.dash-post-row.high-risk {
    background: #fee2e220;
    border-left: 3px solid var(--color-error);
    padding-left: 10px;
}

.dash-post-row.medium-risk {
    background: #fef3c720;
    border-left: 3px solid var(--color-warning);
    padding-left: 10px;
}

.dash-post-row-label {
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-post-row-stat {
    font-size: 0.73rem;
    font-weight: 600;
    flex-shrink: 0;
}

.dash-post-row-pct {
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: auto;
}

/* ─── Reply sources ────────────────────────────────────────────────── */

.reply-sources {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    border-radius: var(--radius-sm);
}

.reply-sources-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.reply-source-link {
    font-size: 0.75rem;
    color: var(--color-primary-dark);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.reply-source-link:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* ─── Web search toggle ─────────────────────────────────────────────── */

.web-search-toggle {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}

.web-search-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.web-search-toggle.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* ─── Comment queue skeleton loader ────────────────────────────────── */

.queue-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.queue-skeleton-row {
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg,
        var(--color-border) 25%,
        var(--color-surface-hover) 50%,
        var(--color-border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Navigation progress bar ──────────────────────────────────────── */

#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary-light));
    box-shadow: 0 0 12px rgba(99,102,241,0.7), 0 1px 4px rgba(99,102,241,0.45);
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 0 4px 4px 0;
}
/* glowing leading cap */
#nav-progress::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 80px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55));
    border-radius: 0 4px 4px 0;
}

/* ─── Page transition ───────────────────────────────────────────────── */

/* Page-level transitions are opacity-ONLY by design. transform/filter on
   .page-content would make it a containing block for position:fixed elements,
   trapping modals (case modal, post wizard) inside it — below the app bar.
   Inner content gets its motion from .contentReveal on sibling containers. */
.page-content.content-navigating {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.page-content.page-enter {
    animation: pageEnter 0.4s ease both;
}

@keyframes pageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Content reveal — when a page's loader is replaced by real data, the
   content container is freshly created, so this animation plays on the swap. */
@keyframes contentReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.queue-split,
.post-board-cards,
.acct-split,
.case-board,
.dash-grid,
.activity-list {
    animation: contentReveal 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Loaders ease in instead of popping */
@keyframes loaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes loaderIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: none; }
}
/* opacity-only on the spinner so we never fight MudBlazor's rotation transform */
.mud-progress-circular { animation: loaderFadeIn 0.3s ease both; }
.queue-skeleton,
.acct-loading-center  { animation: loaderIn 0.35s ease both; }

@media (prefers-reduced-motion: reduce) {
    .page-content.page-enter,
    .mud-progress-circular,
    .queue-skeleton,
    .acct-loading-center { animation: none !important; }
    .page-content.content-navigating { filter: none; transform: none; }
}

/* ─── UI micro-animations ───────────────────────────────────────────── */

/* Detail / bulk panel slides in from the right */
@keyframes panelEnter {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0);    }
}

.queue-detail-panel {
    animation: panelEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Accordion body + post card fade down when expanded */
@keyframes accordionEnter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.post-accordion-body {
    animation: accordionEnter 0.18s ease both;
}

/* Comment row: smooth bg transition covers hover AND is-selected */
.comment-row {
    transition: background 0.15s ease !important;
}

/* Filter / platform chip active state pops in */
.filter-chip,
.platform-chip {
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.1s ease !important;
}
.filter-chip:active,
.platform-chip:active {
    transform: scale(0.96);
}

/* ─── Hamburger nav toggle ──────────────────────────────────────────── */

.clarify-nav-toggle {
    background: transparent;
    border: none;
    color: var(--mud-palette-appbar-text, #1e293b);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: none;   /* desktop: sidebar is always open, so the toggle is hidden */
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.clarify-nav-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ─── Nav link instant press feedback ──────────────────────────────── */

.mud-nav-link:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
    transition: opacity 0.05s, transform 0.05s !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── Drawer: CSS-driven overlay (layout is static SSR) ────── */

    .mud-drawer.mud-drawer-persistent {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;   /* pin width so zeroing the CSS variable can't collapse it */
        height: 100vh !important;
        z-index: 1300 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
    }

    body.mobile-nav-open .mud-drawer.mud-drawer-persistent {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
    }

    /* Backdrop — blocks content, tap to close */
    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1299;
        cursor: pointer;
    }
    body.mobile-nav-open .mobile-nav-backdrop {
        display: block;
    }

    /* Content always full width — drawer no longer pushes it */
    /* Zero the CSS variable MudBlazor reads for drawer spacing */
    .mud-layout {
        --mud-drawer-width-left: 0px !important;
    }
    /* Belt-and-suspenders: override inline padding regardless of source */
    html body .mud-layout .mud-main-content,
    html body .mud-main-content,
    .mud-main-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Full-height drawer (ClipMode.Never) offsets the appbar on desktop;
       on mobile the drawer is an overlay, so the header must span full width */
    .clarify-appbar,
    .mud-appbar {
        left: 0 !important;
        width: 100% !important;
    }

    /* ─── Page chrome ───────────────────────────────────────────── */

    /* Hide the username text in the header on small screens — avatar stays */
    .appbar-username--hide-mobile { display: none !important; }

    /* The hamburger toggle is only needed on mobile, where the drawer is an overlay */
    .clarify-nav-toggle { display: inline-flex !important; }

    .page-content {
        padding: var(--space-4) var(--space-4) var(--space-8);
    }

    /* Page header: title + action button stack vertically */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .page-header > button,
    .page-header > a,
    .dash-scan-btn {
        width: 100%;
        justify-content: center;
    }

    /* ─── Comment queue filters ─────────────────────────────────── */

    /* Mobile filter: row1 = search + toggle, row2 = posts + date */
    .queue-filter-top {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .queue-search {
        max-width: 100% !important;
        flex: 1 1 0;
        min-width: 0;
        order: 1;
    }
    .view-toggle { order: 2; flex-shrink: 0; }
    .queue-post-select {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        order: 3;
    }
    .queue-date-select {
        flex: 0 0 130px;
        width: auto !important;
        order: 4;
    }

    /* Category + platform chips scroll horizontally */
    .queue-filter-bottom {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        gap: var(--space-3);
        align-items: flex-start;
        flex-direction: column;
    }
    .queue-filter-chips,
    .queue-platform-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        width: 100%;
    }
    .queue-filter-chips::-webkit-scrollbar,
    .queue-platform-chips::-webkit-scrollbar { display: none; }

    /* ─── Queue split panel ─────────────────────────────────────── */

    .queue-split {
        flex-direction: column;
        min-height: unset;
    }

    /* List panel: full height, natural scroll */
    .queue-list-panel {
        max-height: none;
        overflow-y: visible;
    }

    /* Detail / bulk panels: full width, stacked below list */
    .queue-detail-panel {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--color-border);
        max-height: none;
    }

    /* When a panel is open hide the list — "full-screen" detail experience */
    .queue-split.has-detail .queue-list-panel {
        display: none;
    }
    .queue-split.has-detail .queue-detail-panel {
        border-top: none;
    }

    /* ─── Comment rows ──────────────────────────────────────────── */

    .comment-row {
        padding: var(--space-3) var(--space-3);
    }

    /* Larger touch target for avatar */
    .comment-row-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }

    /* Footer: hide post label (redundant in grouped view), let rest wrap */
    .comment-row-footer {
        gap: 4px;
        flex-wrap: wrap;
    }
    .comment-row-post-label { display: none; }

    /* ─── Post accordions ───────────────────────────────────────── */

    /* Thumbnail narrower on mobile */
    .post-header-thumb { width: 62px; }

    /* Reactions and separator hidden on small screens */
    .post-header-reactions { display: none; }

    /* Stats wrap onto new line */
    .post-header-bottom { flex-wrap: wrap; gap: 4px; }

    /* Larger touch targets for action buttons */
    .post-action-btn { min-width: 36px; height: 36px; }

    /* ─── Detail panel ──────────────────────────────────────────── */

    .detail-actions {
        flex-wrap: wrap;
    }
    .detail-actions .mud-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* ─── Bulk panels ───────────────────────────────────────────── */

    .bulk-panel-list { max-height: 50vh; }

    .bulk-reply-review-list { max-height: 60vh; }

    /* ─── Touch targets — minimum 44 px tall ────────────────────── */

    .filter-chip,
    .platform-chip,
    .web-search-toggle {
        min-height: 36px;
        padding: 6px 12px;
    }

    .bulk-action-btn {
        min-height: 40px;
    }

    .post-action-btn {
        min-width: 36px;
        min-height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP DRAWER TOGGLE  (hamburger collapses drawer on wide screens)
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    /* Smooth width collapse on the drawer */
    .mud-drawer.mud-drawer-persistent {
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden;
    }

    /* Smooth content shift */
    .mud-main-content {
        transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Collapsed state */
    body.desktop-nav-closed .mud-drawer.mud-drawer-persistent {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.desktop-nav-closed .mud-layout {
        --mud-drawer-width-left: 0px;
    }

    body.desktop-nav-closed .mud-main-content {
        padding-left: 0 !important;
    }
}

/* ── Notification Bell ─────────────────────────────────────── */
.notif-bell-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    margin-right: 4px;
}

.notif-bell-btn:hover {
    background: #f1f5f9;
    color: var(--color-text-primary);
}

.notif-bell-btn.has-unread {
    color: var(--color-error);
}

.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-error);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1299;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 480px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifDropIn 0.15s ease both;
}

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

/* On phones the 340px absolute dropdown anchored to the bell runs off the left
   edge of the screen — pin it to the viewport under the app bar instead. */
@media (max-width: 600px) {
    .notif-dropdown {
        position: fixed;
        top: calc(var(--mud-appbar-height, 56px) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 70vh;
    }
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.notif-dropdown-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
}

.notif-mark-all-btn {
    font-size: 0.75rem;
    color: #6366f1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.notif-mark-all-btn:hover {
    background: #f0f0ff;
}

.notif-list {
    overflow-y: auto;
    flex: 1;
}

.notif-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.1s ease;
    position: relative;
}

.notif-item:hover {
    background: #f8fafc;
}

.notif-item.is-unread {
    background: var(--color-error-bg);
}

.notif-item.is-unread:hover {
    background: #fee2e2;
}

.notif-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-error-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-msg {
    font-size: 0.75rem;
    color: #475569;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-time {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 4px;
}

.notif-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-error);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ── Threat Alert Banner ────────────────────────────────────── */
.threat-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: 8px;
    color: var(--color-error);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.threat-alert-banner strong {
    font-weight: 700;
}

/* ── Notification Preferences ───────────────────────────────── */
.notif-pref-grid {
    display: grid;
    gap: 2px;
    margin-bottom: 16px;
}

.notif-pref-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    align-items: center;
    padding: 4px 8px;
}

.notif-pref-col-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.notif-pref-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
}

.notif-pref-row:hover {
    background: #f8fafc;
}

.notif-pref-type {
    font-size: 0.8125rem;
    color: #334155;
    font-weight: 500;
}

/* Threat filter chip — make it pop with red accent */
.filter-chip[data-key="threat"].active,
.queue-filter-chips .filter-chip:nth-child(2).active {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error-border);
}

/* ── Facebook OAuth connect ──────────────────────────────────── */
.fb-connect-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #1877f2;
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.fb-connect-btn:hover { background: #166fe5; color: #fff; }

/* TikTok variant of the connect button — same shape, TikTok's black brand colour */
.tt-connect-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #010101;
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.tt-connect-btn:hover { background: #2b2b2b; color: #fff; }

/* ── Dashboard connect CTA ───────────────────────────────────── */
.dash-connect-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dash-connect-cta-icon {
    width: 48px;
    height: 48px;
    background: #dbeafe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-connect-cta-body { flex: 1; min-width: 0; }
.dash-connect-cta-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1e40af;
    margin-bottom: 2px;
}
.dash-connect-cta-sub {
    font-size: 0.8rem;
    color: #3b82f6;
}

/* ── Dashboard unreviewed threats widget ─────────────────────── */
.dash-threat-widget {
    background: #fff;
    border: 1.5px solid var(--color-error-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.dash-threat-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-3) var(--space-5);
    background: var(--color-error-bg);
    border-bottom: 1px solid var(--color-error-border);
}
.dash-threat-widget-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-error-dark);
}
.dash-threat-widget-count {
    background: var(--color-error);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    flex-shrink: 0;
}
.dash-threat-widget-sub {
    font-size: 0.775rem;
    color: #b91c1c;
    margin-left: auto;
}
.dash-threat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-error-bg);
    transition: background 0.12s;
}
.dash-threat-row:last-child { border-bottom: none; }
.dash-threat-row:hover { background: #fffbfb; }
.dash-threat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-error);
    flex-shrink: 0;
}
.dash-threat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-threat-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    flex-shrink: 0;
}
.dash-threat-text {
    font-size: 0.8rem;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-threat-time {
    font-size: 0.72rem;
    color: #94a3b8;
    flex-shrink: 0;
}
.dash-threat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dash-threat-review-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-error);
    background: #fee2e2;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.12s;
}
.dash-threat-review-btn:hover { background: var(--color-error-border); }
.dash-threat-dismiss-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.12s;
}
.dash-threat-dismiss-btn:hover:not(:disabled) { background: #e2e8f0; }
.dash-threat-dismiss-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Dashboard reauth warning banner ────────────────────────── */
.dash-reauth-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fee2e2;
    border: 1.5px solid var(--color-error-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.8125rem;
    color: var(--color-error-dark);
    font-weight: 500;
}

/* ── Connect pages picker ────────────────────────────────────── */
.connect-page-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.connect-page-row:hover { background: var(--color-surface-hover); }
.connect-page-row.selected {
    border-color: #6366f1;
    background: rgba(99,102,241,0.04);
}

/* ── Risk by post topic chart ───────────────────────────────── */
.dash-topic-chart {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 0 10px;
}
.dash-topic-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-topic-label {
    width: 120px;
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-topic-bar-wrap {
    flex: 1;
    height: 16px;
    background: var(--color-surface);
    border-radius: 4px;
    overflow: hidden;
}
.dash-topic-bar {
    height: 100%;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    min-width: 4px;
    transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.dash-topic-bar > div { height: 100%; }
.dash-topic-seg {
    height: 100%;
    position: relative;
    cursor: default;
}
.dash-topic-seg::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 200;
}
.dash-topic-seg:hover::after { opacity: 1; }
.dash-topic-total {
    width: 26px;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.dash-topic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.dash-topic-legend span { display: flex; align-items: center; gap: 5px; }
.dash-topic-legend-item {
    position: relative;
    cursor: default;
}
.dash-topic-legend-item::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 200;
}
.dash-topic-legend-item:hover::after { opacity: 1; }
.dash-topic-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Tooltip ────────────────────────────────────────────────── */
.clarify-tip {
    position: fixed;
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.6;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 9999;
    white-space: pre-line;
    opacity: 0;
    transition: opacity 0.15s ease;
    max-width: 200px;
}
.clarify-tip.visible { opacity: 1; }

/* ── JS Toast notifications ─────────────────────────────────── */
#clarify-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.clarify-toast {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.clarify-toast.visible { opacity: 1; transform: translateX(0); }
.clarify-toast-icon { font-size: 0.9rem; flex-shrink: 0; }

/* ── Activity Log ───────────────────────────────────────────── */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: background 0.15s;
}
.activity-row:hover { background: var(--color-surface-hover, #f8fafc); }
.activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.activity-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.activity-body {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
}
.activity-user {
    font-weight: 600;
    color: var(--color-text);
    margin-right: 5px;
}
.activity-desc { color: var(--color-text-muted); }
.activity-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.activity-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.activity-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.activity-search {
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    min-width: 200px;
    transition: border-color 0.15s;
}
.activity-search:focus { border-color: var(--color-primary, #6366f1); }
.activity-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.activity-chip {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.activity-chip:hover { background: var(--color-surface-hover, #f8fafc); }
.activity-chip.active {
    background: var(--color-primary-subtle, #eef2ff);
    color: var(--color-primary, #6366f1);
    border-color: var(--color-primary-border, #a5b4fc);
}
.activity-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
.activity-page-info {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    min-width: 80px;
    text-align: center;
}
.activity-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.activity-link-btn:hover {
    background: var(--color-surface-hover, #f8fafc);
    color: var(--color-primary, #6366f1);
}

/* ── Accounts centred loader ───────────────────────────────────────── */
.acct-loading-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 60vh;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

/* ── Dismiss threat flag button ────────────────────────────────────── */
.acct-clear-threat-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 4px;
    border: 1px solid rgba(220,38,38,0.35);
    color: #dc2626;
    background: rgba(220,38,38,0.07);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s;
}
.acct-clear-threat-btn:hover:not(:disabled) { background: rgba(220,38,38,0.14); }
.acct-clear-threat-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.acct-raise-threat-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 4px;
    border: 1px solid rgba(220,38,38,0.25);
    color: #dc2626;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s;
}
.acct-raise-threat-btn:hover:not(:disabled) { background: rgba(220,38,38,0.07); }
.acct-raise-threat-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Account Detail – Tabs ─────────────────────────────────────────── */
.acct-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1.5px solid var(--color-border);
    margin: 14px 0 0;
}
.acct-detail-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.acct-detail-tab:hover { color: var(--color-text); }
.acct-detail-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.acct-tab-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    border-radius: 10px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
}

/* ── Account Notes ─────────────────────────────────────────────────── */
.acct-notes-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 6px;
}
.acct-notes-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    cursor: pointer;
    transition: background 0.15s;
}
.acct-notes-generate-btn:hover:not(:disabled) { background: rgba(99,102,241,0.18); }
.acct-notes-generate-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.acct-note-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--color-surface);
}
.acct-note-card.ai {
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-subtle);
}
.acct-note-card.user {
    border-left: 3px solid var(--color-border-strong);
}
.acct-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.acct-note-source {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}
.acct-note-source.ai {
    background: rgba(99,102,241,0.15);
    color: var(--color-primary);
}
.acct-note-source.user {
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
}
.acct-note-date {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-left: auto;
}
.acct-note-meta {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}
.acct-note-body {
    font-size: 0.82rem;
    color: var(--color-text);
    line-height: 1.55;
    margin: 0;
    white-space: pre-wrap;
}
.acct-note-add {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

/* ── AI settings — voice examples ───────────────────────────── */
.ai-examples-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.ai-example-row {
    position: relative;
    background: var(--color-surface-alt, #f8f9fa);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 36px 10px 12px;
}
.ai-example-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.ai-example-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}
.ai-example-date {
    font-size: 0.73rem;
    color: var(--color-text-muted);
}
.ai-example-preview {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
}
.ai-example-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    line-height: 1;
}
.ai-example-delete:hover { color: #dc2626; background: rgba(220,38,38,0.08); }
.ai-example-add {
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* ── AI settings — source domains ───────────────────────────── */
.source-domains-mode-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.source-domains-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.source-domains-mode-btn:hover {
    border-color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-primary);
}

.source-domains-mode-btn.active.allow {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
}

.source-domains-mode-btn.active.block {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

.source-domains-mode-hint {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 12px;
}

.source-domains-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.source-domain-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid #bbf7d0;
}

.source-domain-chip--blocked {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.source-domain-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: 0.6;
    color: inherit;
    line-height: 1;
}

.source-domain-delete:hover {
    opacity: 1;
}

.source-domain-add-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.source-domain-add-row .mud-input-control {
    flex: 1;
}

/* ── Team settings — member permissions ─────────────────────── */
.team-member-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px var(--space-5);
    gap: 12px;
    transition: background 0.1s;
}

.team-member-row--editing {
    background: var(--color-bg-subtle, #f8fafc);
}

.team-member-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.team-member-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.team-member-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.team-role-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
}

.team-role-badge--owner {
    color: var(--color-primary);
    background: var(--color-primary-bg);
}

.team-role-badge--you {
    color: var(--mud-palette-text-secondary);
    background: var(--color-border);
}

.team-perm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.team-perm-chip {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid;
}

.team-perm-chip--on {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.team-perm-chip--none {
    background: #f1f5f9;
    color: var(--mud-palette-text-secondary);
    border-color: var(--color-border);
}

/* Inline permissions editor */
.team-perm-editor {
    margin: 0 var(--space-5) 12px;
    padding: 14px 16px;
    background: var(--color-bg-subtle, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.team-perm-editor-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 10px;
}

.team-perm-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.team-perm-toggle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--color-border);
    cursor: pointer;
    background: var(--mud-palette-background);
    transition: border-color 0.1s, background 0.1s;
}

.team-perm-toggle input {
    display: none;
}

.team-perm-toggle.on {
    border-color: #6366f1;
    background: #f0f0ff;
}

.team-perm-toggle-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.team-perm-toggle.on .team-perm-toggle-name {
    color: #4f46e5;
}

.team-perm-toggle-desc {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.team-perm-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Transfer ownership dialog */
.team-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-dialog {
    background: var(--mud-palette-background);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.team-dialog-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--mud-palette-text-primary);
}

.team-dialog-body {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}

.team-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Post Moderation Board ──────────────────────────────────── */

.post-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.post-board-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.post-board-start-btn:hover    { background: var(--color-primary-dark); }
.post-board-start-btn:disabled { opacity: 0.5; cursor: default; }

.post-board-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.post-mod-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}
.post-mod-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

.post-mod-card-body   { padding: 0; flex: 1; }
.post-mod-card-body .fb-post-card { border-radius: 0; border: none; margin: 0; }

.post-mod-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.post-mod-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.69rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.post-mod-card-checklist {
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.79rem;
    color: var(--color-text-muted);
}
.checklist-item.needs-action { color: var(--color-text); font-weight: 500; }
.checklist-item.ok           { color: var(--color-success); }

.checklist-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-border-strong);
}
.checklist-item.needs-action .checklist-dot { background: var(--color-warning); }
.checklist-item.ok           .checklist-dot { background: var(--color-success); }

.post-mod-card-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.post-mod-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 0.78rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}
.post-mod-btn-view:hover { background: var(--color-surface-hover); color: var(--color-text); }

.post-mod-btn-wizard {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.post-mod-btn-wizard:hover { background: var(--color-primary-dark); }

.post-board-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.post-board-search { flex: 1; min-width: 200px; max-width: 360px; }
.post-board-date-select { width: 140px; flex-shrink: 0; }

.post-mod-moderated-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
    border-bottom: 1px solid var(--color-success-border);
}

.post-mod-card.is-moderated {
    opacity: 0.7;
}
.post-mod-card.is-moderated:hover { opacity: 1; }

.post-board-threat-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.82rem;
    color: var(--color-error);
    line-height: 1.5;
    margin-bottom: 20px;
}

.post-mod-threat-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-error-bg);
    color: var(--color-error);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
    border-bottom: 1px solid var(--color-error-border);
}

.post-mod-card.has-threat {
    border-color: var(--color-error-border);
    box-shadow: 0 0 0 1px var(--color-error-border);
}

/* ── Post Wizard overlay ────────────────────────────────────── */

.wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wizard-modal {
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wizard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    gap: 12px;
}

.wizard-post-counter {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    padding: 1px 8px;
    border-radius: 20px;
    margin-bottom: 4px;
}

.wizard-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 2px;
}

.wizard-post-snippet {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    max-width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    flex-shrink: 0;
    transition: color 0.1s;
}
.wizard-close:hover { color: var(--color-text); }

.wizard-stepper {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    overflow-x: auto;
    gap: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.wizard-step-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid var(--color-border-strong);
    color: var(--color-text-muted);
    background: var(--color-surface);
    transition: all 0.2s;
}
.wizard-step.active .wizard-step-dot { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); }
.wizard-step.past   .wizard-step-dot { border-color: var(--color-success); background: var(--color-success); color: #fff; }

.wizard-step-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.wizard-step.active .wizard-step-label { color: var(--color-primary); font-weight: 600; }
.wizard-step.past   .wizard-step-label { color: var(--color-success); }

.wizard-step-line {
    flex: 1;
    min-width: 12px;
    height: 2px;
    background: var(--color-border);
    margin: 0 5px;
    transition: background 0.2s;
}
.wizard-step-line.done { background: var(--color-success); }

.wizard-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Embedded panels fill the wizard body */
.wizard-body .queue-detail-panel {
    width: 100%;
    max-width: 100%;
    border-left: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

/* ── Wizard: Disclaimer step ── */
.wizard-disclaimer {
    padding: 28px 24px 24px;
    text-align: center;
}

.wizard-disclaimer-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.wizard-disclaimer-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 14px;
}

.wizard-disclaimer-body {
    text-align: left;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.wizard-disclaimer-body p  { margin: 0 0 8px; }
.wizard-disclaimer-body p:last-child { margin-bottom: 0; }
.wizard-disclaimer-body ul { margin: 6px 0 8px; padding-left: 18px; }
.wizard-disclaimer-body li { margin-bottom: 4px; }

/* ── Wizard: Re-open note ── */
.wizard-reopen-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--color-info);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
}

/* ── Wizard: Overview step ── */
.wizard-overview {
    padding: 20px;
}

.wizard-overview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.wizard-stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    min-width: 70px;
    text-align: center;
}

.wizard-stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.wizard-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.85;
}

.wizard-overview-actions {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.wizard-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.wizard-action-row:last-child    { border-bottom: none; }
.wizard-action-row.warn .wizard-action-text { color: var(--color-text); font-weight: 500; }

.wizard-action-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wizard-action-row.complete .wizard-action-icon { background: var(--color-success-bg); color: var(--color-success); }
.wizard-action-row.warn     .wizard-action-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.wizard-action-row.info     .wizard-action-icon { background: var(--color-primary-bg); color: var(--color-primary); }

.wizard-action-text { flex: 1; }

.wizard-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px;
    margin-top: 16px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.wizard-start-btn:hover { background: var(--color-primary-dark); }

/* ── Wizard: Threats step ── */
.wizard-threats {
    padding: 0;
}

.wizard-threats-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--color-error-bg);
    border-bottom: 1px solid var(--color-error-border);
    color: var(--color-error);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 12px 16px;
    line-height: 1.5;
}

.wizard-threats-empty {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.wizard-threat-list {
    display: flex;
    flex-direction: column;
}

.wizard-threat-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
}
.wizard-threat-row:last-child  { border-bottom: none; }
.wizard-threat-row.is-reviewed { opacity: 0.55; background: var(--color-surface-muted); }

.wizard-threat-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--color-error-bg);
    color: var(--color-error);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--color-error-border);
}

.wizard-threat-body  { flex: 1; min-width: 0; }

.wizard-threat-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wizard-threat-reviewed-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-success);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    padding: 1px 6px;
    border-radius: 20px;
}

.wizard-threat-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.wizard-threat-reason {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-style: italic;
}

.wizard-threat-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--color-error-border);
    border-radius: 6px;
    background: var(--color-error-bg);
    color: var(--color-error);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.1s;
    white-space: nowrap;
}
.wizard-threat-review-btn:hover    { opacity: 0.8; }
.wizard-threat-review-btn:disabled { opacity: 0.5; cursor: default; }

.wizard-threat-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--color-error-border);
    border-radius: 8px;
    background: var(--color-error-bg);
    color: var(--color-error);
    cursor: pointer;
    transition: opacity 0.15s;
}
.wizard-threat-all-btn:hover    { opacity: 0.8; }
.wizard-threat-all-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Wizard: Draft step ── */
.wizard-draft {
    padding: 20px;
}

.wizard-draft-help {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    line-height: 1.5;
}

.wizard-draft-textarea {
    width: 100%;
    min-height: 160px;
    padding: 10px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-surface);
    box-sizing: border-box;
}
.wizard-draft-textarea:focus { outline: none; border-color: var(--color-primary); }

.wizard-draft-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.wizard-draft-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    transition: background 0.1s;
}
.wizard-draft-btn:hover    { background: var(--color-surface-hover); }
.wizard-draft-btn:disabled { opacity: 0.5; cursor: default; }
.wizard-draft-btn.primary  { background: var(--color-primary); color: #fff; border-color: transparent; }
.wizard-draft-btn.primary:hover    { background: var(--color-primary-dark); }
.wizard-draft-btn.success  { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.wizard-draft-btn.success:hover    { opacity: 0.85; }

/* ── Wizard: Done step ── */
.wizard-done {
    padding: 40px 20px;
    text-align: center;
}

.wizard-done-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.wizard-done-title    { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--color-text); }
.wizard-done-subtitle { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 24px; line-height: 1.5; }

.wizard-done-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--color-success);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
}
.wizard-done-btn:hover    { opacity: 0.9; }
.wizard-done-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Wizard: footer nav ── */
.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.wizard-btn-back {
    background: none;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.1s;
}
.wizard-btn-back:hover { background: var(--color-surface-hover); }

.wizard-btn-skip {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wizard-btn-skip:hover { color: var(--color-text-secondary); }

.wizard-btn-next {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.wizard-btn-next:hover { background: var(--color-primary-dark); }


/* ── Cases: Kanban board ────────────────────────────────────── */

.case-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 12px;
    align-items: start;
}

/* Four 220px-minimum columns need ~930px — below that, scroll the board
   sideways instead of stretching the whole page. */
@media (max-width: 960px) {
    .case-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
}

.case-column {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.case-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-top: 3px solid var(--color-border-strong);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.case-column-title { font-size: 0.78rem; font-weight: 700; color: var(--color-text); }
.case-column-count {
    font-size: 0.68rem; font-weight: 700;
    background: var(--color-surface-muted); color: var(--color-text-muted);
    border-radius: 20px; padding: 1px 8px;
}

.case-column-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 80px;
}

.case-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: box-shadow 0.12s, border-color 0.12s;
}
.case-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.08); border-color: var(--color-border-strong); }

.case-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.case-card-ref { font-size: 0.66rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.02em; }
.case-card-priority { font-size: 0.62rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; text-transform: uppercase; }
.case-card-title { font-size: 0.83rem; font-weight: 600; color: var(--color-text); line-height: 1.3; margin-bottom: 5px; }
.case-card-meta { font-size: 0.72rem; color: var(--color-text-secondary); margin-bottom: 7px; }
.case-card-footer { display: flex; align-items: center; gap: 10px; font-size: 0.7rem; color: var(--color-text-secondary); }

/* MudBlazor drop-zone drag states */
.mud-drop-item-preview { opacity: 0.4; }
.case-column-body.mud-drop-zone-drag-block-target { background: var(--color-primary-subtle); }

/* ── Cases: detail modal ────────────────────────────────────── */

.case-modal {
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Keep the case modal clear of the app bar (top-aligned with breathing room) */
.case-overlay {
    align-items: flex-start;
    padding-top: 78px;
}
.case-overlay .case-modal {
    max-height: calc(100vh - 98px);
}
@media (max-width: 768px) {
    .case-overlay { padding-top: 64px; }
    .case-overlay .case-modal { max-height: calc(100vh - 80px); }
}

.case-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-border);
}
.case-modal-ref   { font-size: 0.7rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.03em; }
.case-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 2px 0; }
.case-modal-sub   { font-size: 0.78rem; color: var(--color-text-secondary); }

.case-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    flex-wrap: wrap;
}

.case-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 0; }

.case-report-meta { font-size: 0.74rem; color: var(--color-text-muted); margin-bottom: 12px; }

.case-section-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted); margin: 14px 0 5px;
}
.case-section-text { font-size: 0.86rem; line-height: 1.55; color: var(--color-text); margin: 0; }

.case-no-report {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 28px 20px; background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-strong); border-radius: 10px;
}
.case-no-report p { font-size: 0.82rem; color: var(--color-text-secondary); margin: 0; max-width: 420px; line-height: 1.5; }

.case-evidence-list { display: flex; flex-direction: column; gap: 6px; }
.case-evidence-row {
    display: flex; gap: 8px; align-items: flex-start;
    border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-surface-muted);
}
.case-evidence-body { flex: 1; min-width: 0; }
.case-evidence-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.case-evidence-type { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); }
.case-evidence-date { font-size: 0.68rem; color: var(--color-text-muted); }
.case-evidence-text { font-size: 0.82rem; color: var(--color-text); line-height: 1.4; word-break: break-word; }
.case-evidence-note { font-size: 0.72rem; font-style: italic; color: var(--color-text-muted); margin-top: 2px; }
.case-evidence-remove {
    background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 2px;
    border-radius: 4px; flex-shrink: 0; display: flex;
}
.case-evidence-remove:hover { color: var(--color-error); background: var(--color-error-bg); }

.case-add-evidence { margin-top: 14px; }

.case-modal-footer { padding: 10px 20px; border-top: 1px solid var(--color-border); display: flex; }

.case-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px; font-size: 0.78rem; font-weight: 500;
    border: 1px solid var(--color-border-strong); border-radius: 6px;
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    text-decoration: none; transition: background 0.1s;
}
.case-btn:hover { background: var(--color-surface-hover); }
.case-btn:disabled { opacity: 0.5; cursor: default; }
.case-btn.primary { background: var(--color-primary); color: #fff; border-color: transparent; }
.case-btn.primary:hover { background: var(--color-primary-dark); }
.case-btn.danger { color: var(--color-error); border-color: var(--color-error-border); }
.case-btn.danger:hover { background: var(--color-error-bg); }

.case-evidence-link {
    display: inline-flex; align-items: center; margin-top: 4px;
    font-size: 0.72rem; color: var(--color-primary); text-decoration: none; font-weight: 500;
}
.case-evidence-link:hover { text-decoration: underline; }

/* ── Command palette trigger (header) ───────────────────────── */

.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--color-drawer-border);
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    min-width: 340px;
}
.cmdk-trigger:hover {
    background: #fff;
    border-color: var(--color-drawer-active-border);
    box-shadow: 0 6px 18px -8px rgba(99,102,241,0.55);
    color: var(--color-text-secondary);
}

/* Snazzy: centre the command bar over the content area */
.clarify-appbar .mud-toolbar { position: relative; }
.clarify-appbar .cmdk-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.clarify-appbar .cmdk-trigger:hover {
    transform: translate(-50%, -50%) translateY(-1px);
}
.cmdk-trigger-label { font-weight: 500; }
.cmdk-trigger-kbd { margin-left: auto; display: inline-flex; gap: 3px; }
.cmdk-trigger-kbd kbd,
.cmdk-footer kbd,
.cmdk-esc {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 3px 5px;
    min-width: 18px;
    text-align: center;
}

/* ── Command palette modal ──────────────────────────────────── */

.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(15,23,42,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    animation: cmdkFade 0.15s ease both;
}

.cmdk-panel {
    width: 100%;
    max-width: 560px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 32px 80px -16px rgba(15,23,42,0.45), 0 0 0 1px rgba(99,102,241,0.06);
    overflow: hidden;
    animation: cmdkPop 0.2s cubic-bezier(0.2,0.8,0.2,1) both;
}

@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdkPop {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}
.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text);
}
.cmdk-input::placeholder { color: var(--color-text-placeholder); }

.cmdk-results { max-height: 56vh; overflow-y: auto; padding: 8px; }

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.cmdk-item.active { background: var(--color-drawer-active-bg); }

.cmdk-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}
.cmdk-item.active .cmdk-item-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(99,102,241,0.6);
}
.cmdk-item-label {
    font-size: 0.88rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmdk-item-hint  { font-size: 0.74rem; color: var(--color-text-muted); flex-shrink: 0; }

.cmdk-group {
    padding: 10px 12px 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.cmdk-group:first-child { padding-top: 2px; }
.cmdk-item-enter {
    margin-left: auto;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.1s;
}
.cmdk-item.active .cmdk-item-enter { opacity: 1; }

.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; }

.cmdk-footer {
    display: flex;
    gap: 16px;
    padding: 9px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: 0.7rem;
    color: var(--color-text-muted);
}
.cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-esc { margin-left: 2px; }

@media (max-width: 768px) {
    .cmdk-trigger,
    .clarify-appbar .cmdk-trigger { min-width: 0; padding: 0 10px; position: static; transform: none; }
    .clarify-appbar .cmdk-trigger:hover { transform: none; }
    .cmdk-trigger-label, .cmdk-trigger-kbd { display: none; }
    .cmdk-overlay { padding-top: 8vh; }
}

/* ── Existing-case chips (account / group panels) ───────────── */

.acct-case-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.acct-case-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.acct-case-chip:hover {
    background: var(--color-surface-hover);
    box-shadow: 0 3px 10px -5px rgba(15,23,42,0.3);
    transform: translateY(-1px);
}
.acct-case-ref { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.acct-case-status {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Dashboard cockpit ──────────────────────────────────────── */

.dash-newflag-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--color-primary-subtle);
    color: var(--color-primary-dark);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Today action center */
.dash-today {
    background: linear-gradient(135deg, #ffffff, #f7f8ff);
    border: 1px solid var(--color-drawer-active-border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 8px 30px -16px rgba(99,102,241,0.4);
}
.dash-today.is-clear {
    background: linear-gradient(135deg, #ffffff, #f3fcf6);
    border-color: var(--color-success-border);
    box-shadow: 0 8px 30px -16px rgba(22,163,74,0.35);
}

.dash-today-head { display: flex; align-items: center; gap: 13px; }
.dash-today-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px rgba(99,102,241,0.7);
}
.dash-today.is-clear .dash-today-icon { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 6px 16px -6px rgba(22,163,74,0.6); }
.dash-today-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.dash-today-sub   { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 1px; }

.dash-today-cta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 16px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 16px -8px rgba(99,102,241,0.8);
}
.dash-today-cta:hover { background: var(--color-primary-dark); transform: translateY(-1px); }

.dash-today-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.dash-todo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.dash-todo:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(15,23,42,0.35); }
.dash-todo .mud-icon-root { opacity: 0.55; }
.dash-todo-num   { font-size: 1.45rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin-top: 4px; }
.dash-todo-label { font-size: 0.72rem; color: var(--color-text-secondary); font-weight: 500; }
.dash-todo.alert { border-color: var(--color-error-border); }
.dash-todo.alert .dash-todo-num, .dash-todo.alert .mud-icon-root { color: var(--color-error); opacity: 1; }
.dash-todo.warn  .dash-todo-num, .dash-todo.warn  .mud-icon-root { color: var(--color-warning); }
.dash-todo.info  .dash-todo-num, .dash-todo.info  .mud-icon-root { color: var(--color-info); }
.dash-todo.case  .dash-todo-num, .dash-todo.case  .mud-icon-root { color: var(--color-secondary); }
.dash-todo.done  { opacity: 0.65; }
.dash-todo.done  .dash-todo-num { color: var(--color-success); }

/* Stat card deltas */
.dash-stat-delta {
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.dash-stat-delta.neutral { color: var(--color-text-muted); }
.dash-stat-delta.good    { color: var(--color-success); }
.dash-stat-delta.bad     { color: var(--color-error); }

/* Community health ring */
.dash-health { display: flex; align-items: center; gap: 18px; padding: 8px 4px; }
.dash-health-ring {
    width: 104px; height: 104px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #e9edf3 0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.4s ease;
}
.dash-health-ring-inner {
    width: 78px; height: 78px;
    border-radius: 50%;
    background: var(--color-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.dash-health-pct   { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.dash-health-state { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 3px; }
.dash-health-legend { font-size: 0.78rem; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 5px; }
.dash-health-legend > div { display: flex; align-items: center; gap: 6px; }
.dash-health-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.dash-health-note { font-size: 0.68rem !important; color: var(--color-text-muted) !important; margin-top: 2px; }

/* Cases widget */
.dash-cases-summary {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.8rem; color: var(--color-text-secondary);
    padding: 4px 0 10px;
}
.dash-cases-summary strong { color: var(--color-text); font-size: 0.95rem; }
.dash-cases-await { color: var(--color-secondary); font-weight: 600; }
.dash-case-row {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 4px;
    border-top: 1px solid var(--color-border);
    text-decoration: none;
    transition: background 0.1s;
}
.dash-case-row:hover { background: var(--color-surface-hover); border-radius: 8px; }
.dash-case-pri { font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 20px; text-transform: uppercase; flex-shrink: 0; }
.dash-case-body { flex: 1; min-width: 0; }
.dash-case-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-case-sub { font-size: 0.7rem; color: var(--color-text-muted); }
.dash-case-status { font-size: 0.62rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 768px) {
    .dash-today-items { grid-template-columns: repeat(2, 1fr); }
    .dash-today-head { flex-wrap: wrap; }
    .dash-today-cta { width: 100%; justify-content: center; }
}

/* ── Dashboard AI daily brief ───────────────────────────────── */

.dash-brief {
    position: relative;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    background:
        linear-gradient(135deg, rgba(99,102,241,0.07), rgba(139,92,246,0.05)),
        var(--color-surface);
    border: 1px solid var(--color-drawer-active-border);
    box-shadow: 0 8px 30px -18px rgba(99,102,241,0.5);
    overflow: hidden;
}
.dash-brief::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

.dash-brief-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.dash-brief-badge {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(99,102,241,0.7);
}
.dash-brief-title { font-size: 0.92rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.dash-brief-meta  { font-size: 0.72rem; color: var(--color-text-muted); }

.dash-brief-refresh {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, transform 0.3s;
}
.dash-brief-refresh:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-primary); }
.dash-brief-refresh:active { transform: rotate(180deg); }
.dash-brief-refresh:disabled { opacity: 0.6; cursor: default; }

.dash-brief-headline {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 8px;
}

.dash-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-brief-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.dash-brief-list li .mud-icon-root { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }

.dash-brief-empty { font-size: 0.82rem; color: var(--color-text-muted); }

.dash-brief-loading { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.dash-brief-shimmer {
    height: 12px;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef0f6 25%, #f7f8fc 50%, #eef0f6 75%);
    background-size: 200% 100%;
    animation: briefShimmer 1.3s ease-in-out infinite;
}
@keyframes briefShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Wizard threat step — raise-case + case chips */
.wizard-threat-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-items: stretch;
}
.wizard-threat-case-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--color-drawer-active-border);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.07));
    color: var(--color-primary-dark);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, transform 0.12s;
}
.wizard-threat-case-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.12)); }
.wizard-threat-case-btn:disabled { opacity: 0.6; cursor: default; }

.wizard-threat-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

/* ── Threat Log ─────────────────────────────────────────────── */

.threatlog-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.threatlog-search { flex: 1; min-width: 200px; max-width: 320px; }
.threatlog-date   { width: 160px; flex-shrink: 0; }
.threatlog-chips  { display: flex; gap: 6px; }

.threatlog-list { display: flex; flex-direction: column; gap: 10px; }

.threatlog-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-error);
    border-radius: 10px;
    padding: 13px 15px;
    transition: box-shadow 0.12s;
}
.threatlog-row:hover { box-shadow: 0 4px 18px -10px rgba(15,23,42,0.3); }
.threatlog-row.is-reviewed { border-left-color: var(--color-success); }

.threatlog-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-error-bg);
    color: var(--color-error);
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid var(--color-error-border);
}
.threatlog-row.is-reviewed .threatlog-avatar { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }

.threatlog-body { flex: 1; min-width: 0; }
.threatlog-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.threatlog-author { font-size: 0.86rem; font-weight: 700; color: var(--color-text); }
.threatlog-badges { display: inline-flex; gap: 4px; }
.threatlog-badge {
    display: inline-flex; align-items: center;
    font-size: 0.62rem; font-weight: 700;
    padding: 1px 7px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.threatlog-badge.unrev { background: var(--color-error-bg); color: var(--color-error); }
.threatlog-badge.rev   { background: var(--color-success-bg); color: var(--color-success); }
.threatlog-badge.mod   { background: var(--color-surface-muted); color: var(--color-text-secondary); }
.threatlog-badge.hid   { background: var(--color-purple-bg); color: var(--color-purple); }
.threatlog-time { font-size: 0.72rem; color: var(--color-text-muted); margin-left: auto; }

.threatlog-text { font-size: 0.86rem; color: var(--color-text); line-height: 1.45; word-break: break-word; }
.threatlog-meta { font-size: 0.74rem; color: var(--color-text-secondary); margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.threatlog-conf { color: var(--color-text-muted); }
.threatlog-reason { font-size: 0.74rem; font-style: italic; color: var(--color-text-muted); margin-top: 4px; }
.threatlog-cases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.threatlog-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; }
.threatlog-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 5px 11px;
    font-size: 0.74rem; font-weight: 500;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.threatlog-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.threatlog-btn:disabled { opacity: 0.6; cursor: default; }
.threatlog-btn.primary { background: var(--color-primary); color: #fff; border-color: transparent; }
.threatlog-btn.primary:hover { background: var(--color-primary-dark); color: #fff; }
.threatlog-btn.rev { color: var(--color-success); border-color: var(--color-success-border); }

.threatlog-truncated { text-align: center; font-size: 0.78rem; color: var(--color-text-muted); padding: 18px; }

@media (max-width: 768px) {
    .threatlog-row { flex-wrap: wrap; }
    .threatlog-actions { flex-direction: row; flex-wrap: wrap; width: 100%; margin-top: 8px; }
    .threatlog-date { margin-left: 0 !important; }
}

/* ── Threat Log: grouped by account ─────────────────────────── */

.threatacct-list { display: flex; flex-direction: column; gap: 10px; }

.threatacct-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.12s;
}
.threatacct-card:hover { box-shadow: 0 4px 18px -10px rgba(15,23,42,0.28); }
.threatacct-card.has-unrev { border-left-color: var(--color-error); }
.threatacct-card.repeat:not(.has-unrev) { border-left-color: var(--color-warning); }

.threatacct-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 15px;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    transition: background 0.1s;
}
.threatacct-head:hover { background: var(--color-surface-hover); }

.threatacct-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
}
.threatacct-card.has-unrev .threatacct-avatar { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error-border); }

.threatacct-id { flex: 1; min-width: 0; }
.threatacct-name {
    font-size: 0.92rem; font-weight: 700; color: var(--color-text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.threatacct-repeat-badge {
    display: inline-flex; align-items: center;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 20px;
    background: var(--color-warning-bg); color: var(--color-warning-dark);
    border: 1px solid var(--color-warning-border);
}
.threatacct-sub { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.threatacct-count { font-weight: 700; color: var(--color-text); }
.threatacct-unrev { color: var(--color-error); font-weight: 600; }
.threatacct-dot { opacity: 0.4; }
.threatacct-cases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.threatacct-head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.threatacct-chevron { color: var(--color-text-muted); flex-shrink: 0; }

.threatacct-threats {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    display: flex;
    flex-direction: column;
}
.threatacct-threat {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 15px 12px 18px;
    border-bottom: 1px solid var(--color-border);
}
.threatacct-threat:last-child { border-bottom: none; }
.threatacct-threat.is-reviewed { opacity: 0.72; }
.threatacct-threat-body { flex: 1; min-width: 0; }
.threatacct-threat-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.threatacct-threat-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; }

@media (max-width: 768px) {
    .threatacct-head { flex-wrap: wrap; }
    .threatacct-head-actions { width: 100%; margin-top: 6px; }
    .threatacct-threat { flex-wrap: wrap; }
    .threatacct-threat-actions { flex-direction: row; width: 100%; margin-top: 6px; }
    .threatlog-date { margin-left: 0 !important; }
}

/* Nav link badge (e.g. unreviewed threat count) */
.nav-link-label { display: flex; align-items: center; flex: 1; min-width: 0; }
.nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-error);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px -2px rgba(220,38,38,0.6);
}

/* Dashboard simple/full view toggle */
.dash-view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dash-view-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); }
.dash-view-toggle.simple {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
    border-color: var(--color-drawer-active-border);
    color: var(--color-primary-dark);
}

/* Case archived states */
.case-card.is-archived { opacity: 0.62; background: var(--color-surface-muted); }
.case-card.is-archived:hover { opacity: 0.85; }
.case-card-archived {
    display: inline-flex; align-items: center;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 1px 7px; border-radius: 20px;
    background: var(--color-surface-muted); color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.case-archived-tag {
    display: inline-flex; align-items: center;
    font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted);
}

/* Auth submit button loading state */
.auth-btn-primary.is-loading { opacity: 0.85; cursor: default; }
.auth-btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: auth-spin 0.7s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════════════
   Composer + Schedule calendar
   ════════════════════════════════════════════════════════════════════════════ */

/* ── New-post button ─────────────────────────────────────────────────────── */
.composer-new-btn {
    display: inline-flex; align-items: center;
    padding: 8px 16px;
    background: var(--color-primary); color: #fff;
    border: none; border-radius: var(--radius-md);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}
.composer-new-btn:hover { filter: brightness(1.08); }
.composer-new-btn:active { transform: translateY(1px); }

/* ── Calendar toolbar ────────────────────────────────────────────────────── */
.cal-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-month-label {
    font-size: 1.05rem; font-weight: 700; color: var(--color-text);
    min-width: 168px; text-align: center;
}
.cal-today-btn {
    margin-left: 8px; padding: 5px 12px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-full); font-size: 0.76rem; font-weight: 600;
    color: var(--color-text); cursor: pointer; transition: background 0.15s;
}
.cal-today-btn:hover { background: var(--color-surface-hover); }
.cal-tz { font-size: 0.74rem; color: var(--color-text-muted); }
.cal-tz-picker {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-text-muted); font-size: 0.74rem;
}
.cal-tz-picker select {
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 5px 8px; font-size: 0.74rem; font-family: inherit; color: var(--color-text);
    background: var(--color-surface); max-width: 220px; cursor: pointer;
}
.cal-tz-picker select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* ── Month grid ──────────────────────────────────────────────────────────── */
.cal-grid-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--color-surface-muted); }
.cal-weekday {
    padding: 8px 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--color-text-muted); text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
    min-height: 104px; padding: 6px 6px 8px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 4px;
    cursor: pointer; transition: background 0.12s;
    /* Grid items default to min-width:auto, so a wide chip would widen its whole column and
       knock the day numbers out of line with the header row — pin them to the 1fr track. */
    min-width: 0; overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--color-surface-hover); }
.cal-cell.out { background: var(--color-surface-muted); }
.cal-cell.out .cal-cell-date { color: var(--color-text-muted); opacity: 0.6; }
.cal-cell-date { font-size: 0.76rem; font-weight: 600; color: var(--color-text); padding: 1px 3px; }
.cal-cell.today .cal-cell-date {
    background: var(--color-primary); color: #fff;
    border-radius: var(--radius-full);
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-cell-posts { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 24px; min-width: 0; }

/* Post chips on a day */
.cal-post {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 6px; border-radius: var(--radius-sm);
    background: #eef2ff; border-left: 3px solid var(--color-primary);
    font-size: 0.7rem; cursor: pointer; overflow: hidden;
    transition: transform 0.05s, box-shadow 0.12s;
    min-width: 0; max-width: 100%;
}
.cal-post:hover { box-shadow: 0 2px 6px rgba(15,23,42,0.12); transform: translateY(-1px); }
.cal-post-thumb { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.cal-post-time { font-weight: 700; color: var(--color-primary); white-space: nowrap; flex-shrink: 0; }
.cal-post-icons { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; }
/* flex:1 + min-width:0 is what lets the ellipsis actually engage instead of overflowing. */
.cal-post-text { flex: 1 1 0; min-width: 0; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-post.published   { background: #ecfdf5; border-left-color: var(--color-success); }
.cal-post.published .cal-post-time { color: var(--color-success); }
.cal-post.partial     { background: #fffbeb; border-left-color: #d97706; }
.cal-post.partial .cal-post-time { color: #b45309; }
.cal-post.failed      { background: #fef2f2; border-left-color: #dc2626; }
.cal-post.failed .cal-post-time { color: #b91c1c; }
.cal-post.publishing  { background: #f1f5f9; border-left-color: var(--color-text-muted); }

/* Mud drop visuals while dragging */
.mud-drop-item-preview .cal-post { box-shadow: 0 6px 18px rgba(15,23,42,0.18); }
.cal-cell-posts.mud-drop-zone-drag-block-target,
.cal-cell.mud-drop-zone-drag-block-target { background: #eef2ff !important; }

/* ── Drafts strip ────────────────────────────────────────────────────────── */
.cal-drafts { margin-top: 16px; }
.cal-drafts-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted); margin: 0 0 8px;
}
.cal-drafts-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-draft-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 280px;
    padding: 7px 12px; background: var(--color-surface);
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-full);
    font-size: 0.78rem; color: var(--color-text); cursor: pointer; transition: background 0.15s;
}
.cal-draft-chip:hover { background: var(--color-surface-hover); }
.cal-draft-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-draft-delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; flex-shrink: 0;
    border: none; background: transparent; border-radius: var(--radius-full);
    color: var(--color-text-muted); cursor: pointer; transition: background 0.12s, color 0.12s;
}
.cal-draft-delete:hover { background: var(--color-error-bg, #fef2f2); color: #b91c1c; }

/* ════════════════════════════════════════════════════════════════════════════
   Composer slide-over
   ════════════════════════════════════════════════════════════════════════════ */
.composer-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.4);
    z-index: 1400; animation: composer-fade 0.15s ease;
}
@keyframes composer-fade { from { opacity: 0; } to { opacity: 1; } }
.composer-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 460px; max-width: 100vw;
    background: var(--color-surface); z-index: 1401;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(15,23,42,0.18);
    animation: composer-slide 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes composer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.composer-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border);
}
.composer-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0; }
.composer-sub { font-size: 0.78rem; color: var(--color-text-muted); margin: 2px 0 0; }

.composer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }

.composer-textarea {
    width: 100%; resize: vertical; min-height: 120px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 12px 14px; font-size: 0.9rem; font-family: inherit; color: var(--color-text);
    line-height: 1.5; transition: border-color 0.15s, box-shadow 0.15s;
}
.composer-textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.composer-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.composer-rewrite-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer-rewrite-web {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: #fff; font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted);
    cursor: pointer; user-select: none; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.composer-rewrite-web:hover { border-color: var(--color-border-strong); }
.composer-rewrite-web.on { color: var(--color-primary); border-color: var(--color-primary); background: #f5f3ff; }
.composer-rewrite-web input { width: 13px; height: 13px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.composer-rewrite-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: linear-gradient(90deg, #eef2ff, #faf5ff);
    font-size: 0.74rem; font-weight: 600; color: var(--color-primary); cursor: pointer;
    transition: filter 0.15s, opacity 0.15s;
}
.composer-rewrite-btn:hover:not(:disabled) { filter: brightness(0.97); }
.composer-rewrite-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.composer-count { font-size: 0.74rem; color: var(--color-text-muted); white-space: nowrap; }
.composer-count.over { color: #b91c1c; font-weight: 600; }
.composer-count-warn { color: #b91c1c; font-weight: 600; }

.composer-media-soon {
    display: flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 10px 12px; border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md); color: var(--color-text-muted);
    font-size: 0.78rem; cursor: help;
}

/* Media attach + thumbnails */
.composer-media-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.composer-media-item {
    position: relative; width: 72px; height: 72px;
    border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--color-border); background: var(--color-surface-muted);
}
.composer-media-item img { width: 100%; height: 100%; object-fit: cover; }
.composer-media-video {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); background: #0f172a0a;
}
.composer-media-remove {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,0.7); color: #fff; border: none; border-radius: var(--radius-full);
    cursor: pointer; padding: 0;
}
.composer-media-remove:hover { background: rgba(15,23,42,0.9); }
.composer-attach {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    padding: 9px 14px; border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 600;
    color: var(--color-text); cursor: pointer; transition: background 0.15s;
}
.composer-attach:hover { background: var(--color-surface-hover); }
.composer-attach.busy { opacity: 0.7; cursor: progress; }
.composer-attach input[type=file] { display: none; }
.composer-retention { font-size: 0.72rem; color: var(--color-text-muted); margin: 8px 0 0; line-height: 1.45; }

.composer-section-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted); margin: 20px 0 8px;
}
.composer-empty-accounts {
    font-size: 0.8rem; color: var(--color-text-muted);
    padding: 10px 12px; background: var(--color-surface-muted); border-radius: var(--radius-md);
}
.composer-empty-accounts a { color: var(--color-primary); font-weight: 600; }

/* Instagram framing preview */
.composer-ig-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.5; }
.composer-ig-list { display: flex; flex-direction: column; gap: 12px; }
.composer-ig-item { display: flex; gap: 12px; align-items: flex-start; }
.composer-ig-frame {
    flex: 0 0 120px; width: 120px; max-height: 150px; background: #fff;
    border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.composer-ig-frame img { width: 100%; height: 100%; display: block; }
.composer-ig-controls { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.composer-ig-chips, .composer-ig-fit { display: flex; flex-wrap: wrap; gap: 5px; }
.composer-ig-chip {
    border: 1px solid var(--color-border, #e2e8f0); background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569); font-size: 0.74rem; font-weight: 600;
    padding: 4px 10px; border-radius: 9999px; cursor: pointer;
}
.composer-ig-chip.on { background: var(--color-primary, #6366f1); border-color: var(--color-primary, #6366f1); color: #fff; }

.composer-targets { display: flex; flex-direction: column; gap: 8px; }
.composer-target {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--color-surface);
    border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.84rem; color: var(--color-text); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.composer-target:hover:not(.disabled) { border-color: var(--color-border-strong); }
.composer-target.selected { border-color: var(--color-primary); background: #eef2ff; }
.composer-target.disabled { opacity: 0.55; cursor: not-allowed; }
.composer-target-name { flex: 1; font-weight: 600; }
.composer-target-reason { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; }

.composer-when { display: flex; gap: 8px; }
.composer-radio {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.82rem; font-weight: 600; color: var(--color-text); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.composer-radio.active { border-color: var(--color-primary); background: #eef2ff; color: var(--color-primary); }
.composer-radio input { display: none; }

.composer-datetime { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.composer-input {
    padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.84rem; font-family: inherit; color: var(--color-text);
}
.composer-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.composer-tz { font-size: 0.74rem; color: var(--color-text-muted); }

.composer-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--color-border);
}

/* Read-only delivery results */
.results-content {
    white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5; color: var(--color-text);
    padding: 12px 14px; background: var(--color-surface-muted); border-radius: var(--radius-md);
}
.results-log { display: flex; flex-direction: column; gap: 6px; }
.results-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.results-row-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.results-row-name { font-size: 0.84rem; font-weight: 600; color: var(--color-text); }
.results-row-meta { font-size: 0.72rem; color: var(--color-text-muted); }
.results-row-error { font-size: 0.72rem; color: #b91c1c; }
.results-pill {
    font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-full);
    white-space: nowrap;
}
.results-pill.ok      { background: #ecfdf5; color: #047857; }
.results-pill.fail    { background: #fef2f2; color: #b91c1c; }
.results-pill.skip    { background: #f1f5f9; color: #64748b; }
.results-pill.pending { background: #eff6ff; color: #2563eb; }

.results-unpublish {
    flex: 0 0 auto; border: 1px solid var(--border, #e2e8f0); background: #fff;
    color: #b91c1c; font-size: 0.72rem; font-weight: 600; padding: 3px 10px;
    border-radius: var(--radius-full); cursor: pointer; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.results-unpublish:hover:not(:disabled) { background: #fef2f2; border-color: #fecaca; }
.results-unpublish:disabled { opacity: 0.5; cursor: default; }

/* ── Publishing dashboard ───────────────────────────────────────────────── */
.pub-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 20px;
}
.pub-card {
    display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
    background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px);
}
.pub-card-num   { font-size: 1.7rem; font-weight: 750; line-height: 1.1; color: #0f172a; }
.pub-card-label { font-size: 0.8rem; color: #64748b; }
.pub-card-foot  { font-size: 0.72rem; color: #b91c1c; margin-top: 2px; }
.pub-card-link  { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); text-decoration: none; align-self: center; margin: auto 0; }
.pub-card-link:hover { text-decoration: underline; }

/* Top-post hero */
.pub-hero {
    --p: #6366f1;
    display: flex; flex-direction: column; gap: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--p) 14%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--p) 30%, #e2e8f0);
    border-radius: var(--radius-lg, 14px); padding: 18px; margin-bottom: 14px;
}
.pub-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pub-hero-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--p); }
.pub-hero-react { font-size: 0.95rem; font-weight: 750; color: #0f172a; white-space: nowrap; }
.pub-hero-text { font-size: 1.02rem; line-height: 1.5; color: #1e293b; margin: 0; font-weight: 500; }
.pub-hero-link { align-self: flex-start; font-size: 0.82rem; font-weight: 700; color: var(--p); text-decoration: none; }
.pub-hero-link:hover { text-decoration: underline; }

/* Reaction mix */
.pub-mix-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: #f1f5f9; }
.pub-mix-bar > div { min-width: 4px; transition: width 0.4s ease; }
.pub-mix-list { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.pub-mix-item { font-size: 0.82rem; color: #475569; display: inline-flex; align-items: center; gap: 5px; }
.pub-mix-item strong { color: #0f172a; }
.pub-mix-emoji { font-size: 1rem; line-height: 1; }

/* Clickable post rows */
.pub-recent-link { text-decoration: none; color: inherit; cursor: pointer; transition: background 0.12s; border-radius: 8px; }
.pub-recent-link:hover { background: #f8fafc; }
.pub-recent-link:hover .pub-recent-text { color: var(--color-primary); }

.pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.pub-panel {
    background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px);
    padding: 16px 18px; margin-bottom: 14px;
}
.pub-panel-title { font-size: 0.92rem; font-weight: 700; color: #0f172a; margin: 0 0 12px; }
.pub-panel-sub   { font-size: 0.72rem; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.pub-muted       { font-size: 0.82rem; color: #94a3b8; margin: 6px 0 0; }

/* Per-platform bars */
.pub-bar-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; margin-bottom: 9px; }
.pub-bar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #334155; font-weight: 500; }
.pub-bar-track { height: 9px; background: #f1f5f9; border-radius: var(--radius-full, 999px); overflow: hidden; }
.pub-bar-fill  { height: 100%; border-radius: var(--radius-full, 999px); min-width: 3px; transition: width 0.4s ease; }
.pub-bar-num   { font-size: 0.82rem; font-weight: 600; color: #0f172a; white-space: nowrap; }
.pub-bar-fail  { font-size: 0.72rem; font-weight: 500; color: #b91c1c; margin-left: 3px; }

/* Activity sparkline */
.pub-spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.pub-spark-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.pub-spark-bar { width: 100%; background: var(--primary, #6366f1); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 0.3s ease; }
.pub-spark-bar.empty { background: #e2e8f0; }
.pub-spark-foot { margin-top: 8px; }

/* Recent list */
.pub-recent { display: flex; flex-direction: column; }
.pub-recent-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-top: 1px solid #f1f5f9;
}
.pub-recent-row:first-child { border-top: none; }
.pub-recent-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pub-recent-text { font-size: 0.86rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-recent-meta { font-size: 0.74rem; color: #94a3b8; }
.pub-status {
    flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; padding: 2px 9px;
    border-radius: var(--radius-full, 999px); white-space: nowrap;
}
.pub-status.ok      { background: #ecfdf5; color: #047857; }
.pub-status.warn    { background: #fffbeb; color: #b45309; }
.pub-status.fail    { background: #fef2f2; color: #b91c1c; }
.pub-status.pending { background: #eff6ff; color: #2563eb; }

.pub-note {
    display: flex; align-items: center; font-size: 0.78rem; color: #94a3b8;
    margin: 6px 2px 24px;
}

.pub-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 56px 20px; background: #fff; border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 14px); margin-top: 18px;
}
.pub-empty-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 6px 0 0; }
.pub-empty-sub   { font-size: 0.85rem; color: #64748b; margin: 0 0 10px; }

/* AI insights */
.pub-insight {
    background: linear-gradient(135deg, color-mix(in srgb, #6366f1 9%, #fff), #fff);
    border: 1px solid color-mix(in srgb, #6366f1 22%, #e2e8f0);
}
.pub-insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pub-insight-tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em; color: #4f46e5;
}
.pub-insight-refresh {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0;
    background: #fff; color: #475569; font-size: 0.74rem; font-weight: 600; padding: 4px 10px;
    border-radius: var(--radius-full, 999px); cursor: pointer; transition: background 0.15s ease;
}
.pub-insight-refresh:hover:not(:disabled) { background: #f8fafc; }
.pub-insight-refresh:disabled { opacity: 0.55; cursor: default; }
.pub-insight-summary { font-size: 0.95rem; line-height: 1.55; color: #1e293b; margin: 0 0 14px; font-weight: 500; }
.pub-insight-group { margin-top: 12px; }
.pub-insight-group-title {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 7px;
}
.pub-insight-group.good .pub-insight-group-title  { color: #047857; }
.pub-insight-group.watch .pub-insight-group-title { color: #b45309; }
.pub-insight-item { padding: 8px 0; border-top: 1px solid color-mix(in srgb, #6366f1 9%, #eef2f7); }
.pub-insight-item:first-of-type { border-top: none; }
.pub-insight-cat { font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.pub-insight-note { font-size: 0.85rem; line-height: 1.5; color: #334155; margin: 1px 0 0; }
.pub-insight-tip {
    font-size: 0.82rem; line-height: 1.5; color: #475569; margin: 5px 0 0; padding-left: 10px;
    border-left: 2px solid color-mix(in srgb, #f59e0b 45%, #fff);
}
.pub-insight-tip strong { color: #92400e; font-weight: 700; }
.pub-insight-loading { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #64748b; }

/* ── Media listening (/listening) ─────────────────────────────── */
.lst-upsell {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 56px 20px; background: #fff; border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 14px); margin-top: 18px;
}
.lst-upsell-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 6px 0 0; }
.lst-upsell-sub   { font-size: 0.85rem; color: #64748b; margin: 0 0 10px; max-width: 440px; line-height: 1.55; }

.lst-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lst-field-label { display: block; font-size: 0.82rem; font-weight: 600; color: #334155; margin: 4px 0 6px; }
.lst-textarea, .lst-input {
    width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 9px 11px;
    font-size: 0.86rem; color: #1e293b; font-family: inherit; background: #fff; resize: vertical;
}
.lst-textarea:focus, .lst-input:focus { outline: none; border-color: #6366f1; }
.lst-field-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.lst-btn-ghost {
    display: inline-flex; align-items: center; border: 1px solid #e2e8f0; background: #fff;
    color: #475569; font-size: 0.8rem; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer;
}
.lst-btn-ghost:hover:not(:disabled) { background: #f8fafc; }
.lst-btn-ghost:disabled { opacity: 0.55; cursor: default; }

.lst-sources { display: flex; flex-direction: column; gap: 2px; }
.lst-source-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.lst-source-row:first-child { border-top: none; }
.lst-source-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.lst-source-name { font-size: 0.86rem; font-weight: 600; color: #0f172a; }
.lst-source-sub  { font-size: 0.74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-source-err  { color: #b91c1c; }
.lst-icon-btn {
    flex: 0 0 auto; border: none; background: none; color: #94a3b8; cursor: pointer; padding: 4px;
    border-radius: 6px; display: inline-flex;
}
.lst-icon-btn:hover { background: #f1f5f9; color: #475569; }
.lst-add-source { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lst-add-source .lst-input { flex: 1; min-width: 140px; }

.lst-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lst-chip {
    border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 0.76rem; font-weight: 600;
    padding: 4px 11px; border-radius: 9999px; cursor: pointer;
}
.lst-chip.on { background: #6366f1; border-color: #6366f1; color: #fff; }
.lst-search {
    border: 1px solid var(--border, #e2e8f0); border-radius: 9999px; padding: 4px 12px;
    font-size: 0.78rem; font-family: inherit; color: #1e293b; background: #fff; min-width: 150px;
}
.lst-search:focus { outline: none; border-color: #6366f1; }

.lst-mentions { display: flex; flex-direction: column; }
.lst-mention { padding: 12px 0; border-top: 1px solid #f1f5f9; }
.lst-mention:first-child { border-top: none; }
.lst-mention.read { opacity: 0.62; }
.lst-mention.highlight {
    background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; border-radius: 8px;
    padding-left: 12px; padding-right: 8px; opacity: 1;
    animation: lst-mention-flash 1.6s ease-out 1;
}
@keyframes lst-mention-flash { 0% { background: #c7d2fe; } 100% { background: #eef2ff; } }
.lst-mention-top { display: flex; align-items: baseline; gap: 8px; }
.lst-sentiment {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 8px; border-radius: 9999px;
}
.lst-mention-title { font-size: 0.92rem; font-weight: 600; color: #0f172a; text-decoration: none; line-height: 1.4; }
.lst-mention-title:hover { color: #4f46e5; text-decoration: underline; }
.lst-mention-summary { font-size: 0.85rem; color: #334155; line-height: 1.5; margin: 4px 0 0; }
.lst-mention-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 0.74rem; color: #94a3b8; margin-top: 5px; }
.lst-mark-read {
    border: none; background: none; color: #6366f1; font-size: 0.74rem; font-weight: 600; cursor: pointer;
    padding: 0; margin-left: 2px;
}
.lst-mark-read:hover { text-decoration: underline; }

/* On-demand full-article AI read */
.lst-article-btn {
    display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid #e2e8f0;
    background: #fff; color: #4f46e5; font-size: 0.76rem; font-weight: 600; padding: 4px 11px;
    border-radius: 9999px; cursor: pointer;
}
.lst-article-btn:hover:not(:disabled) { background: #eef2ff; border-color: #c7d2fe; }
.lst-article-btn:disabled { opacity: 0.6; cursor: default; }
.lst-article {
    margin-top: 8px; padding: 9px 12px; border-radius: 10px;
    background: color-mix(in srgb, #6366f1 6%, #fff); border: 1px solid color-mix(in srgb, #6366f1 16%, #e2e8f0);
}
.lst-article-label {
    display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #4f46e5;
}
.lst-article-text { margin: 0; font-size: 0.85rem; line-height: 1.55; color: #334155; }
.lst-article-err { margin: 7px 0 0; font-size: 0.78rem; color: #b45309; }
.lst-article-err a { color: #4f46e5; text-decoration: none; margin-left: 4px; }
.lst-article-err a:hover { text-decoration: underline; }

.lst-info {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: #475569; line-height: 1.5;
    background: color-mix(in srgb, #6366f1 6%, #fff); border: 1px solid color-mix(in srgb, #6366f1 18%, #e2e8f0);
    border-radius: 10px; padding: 9px 12px; margin-bottom: 14px;
}
.lst-retention { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.lst-select { width: auto; padding: 6px 10px; cursor: pointer; }

/* Watch-term tags */
.lst-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 7px 9px; background: #fff;
}
.lst-tags:focus-within { border-color: #6366f1; }
.lst-tag {
    display: inline-flex; align-items: center; gap: 5px; background: #eef2ff; color: #4338ca;
    font-size: 0.8rem; font-weight: 600; padding: 3px 4px 3px 10px; border-radius: 9999px;
}
.lst-tag-x {
    border: none; background: none; color: #6366f1; cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 0 4px; border-radius: 9999px;
}
.lst-tag-x:hover { background: #c7d2fe; color: #312e81; }
.lst-tag-input {
    flex: 1; min-width: 120px; border: none; outline: none; background: none; font-family: inherit;
    font-size: 0.85rem; color: #1e293b; padding: 4px 2px;
}

.lst-dismiss { margin-left: auto; }
.lst-mention-top { align-items: center; }

.lst-loadmore { display: flex; justify-content: center; margin-top: 12px; }

/* Dashboard latest-mentions widget */
.dash-mentions {
    background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px);
    padding: 16px 18px; margin-bottom: 16px;
}
.dash-mentions-all { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.dash-mentions-all:hover { text-decoration: underline; }
.dash-mentions-list { display: flex; flex-direction: column; margin-top: 6px; }
.dash-mention {
    display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f1f5f9;
    text-decoration: none;
}
.dash-mention:first-child { border-top: none; }
.dash-mention-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 9999px; }
.dash-mention-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-mention-title {
    font-size: 0.85rem; font-weight: 500; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-mention:hover .dash-mention-title { color: #4f46e5; }
.dash-mention-sub { font-size: 0.74rem; color: #94a3b8; }

@media (max-width: 900px) {
    .pub-cards { grid-template-columns: repeat(2, 1fr); }
    .pub-grid  { grid-template-columns: 1fr; }
}

/* Tablet */
@media (max-width: 768px) {
    .cal-cell { min-height: 88px; padding: 5px 4px 6px; }
    .cal-weekday { padding: 7px 6px; }
    .cal-month-label { min-width: 120px; font-size: 0.95rem; }
    .composer-new-btn { padding: 7px 13px; font-size: 0.78rem; }
}

/* Phone */
@media (max-width: 540px) {
    /* Composer takes the full screen; its body scrolls between sticky header/footer. */
    .composer-panel { width: 100vw; }
    .composer-header, .composer-footer { position: sticky; background: var(--color-surface); z-index: 1; }
    .composer-header { top: 0; }
    .composer-footer { bottom: 0; }
    .composer-body { padding: 14px 16px; }
    .composer-target { padding: 12px; }   /* bigger touch targets */
    .composer-radio { padding: 11px; }
    .composer-datetime { flex-wrap: wrap; }
    .composer-input { flex: 1; min-width: 130px; }

    /* Calendar: compact day cells; chips show time + platform icons (text hidden) and stay
       tappable — tapping a post opens the editor, where date/time can be changed (drag is
       desktop-first, editing is the mobile path to reschedule). */
    .cal-toolbar { gap: 6px; }
    .cal-tz { width: 100%; order: 3; }
    .cal-cell { min-height: 64px; padding: 4px 2px 5px; }
    .cal-cell-date { font-size: 0.72rem; }
    .cal-weekday { padding: 6px 3px; font-size: 0.62rem; }
    .cal-post { padding: 2px 3px; gap: 2px; }
    .cal-post-text { display: none; }
    .cal-post-time { font-size: 0.62rem; }
    .cal-draft-chip { max-width: 100%; }
}

/* ─── Digital card (public /c/ link hub) ─────────────────────────────────── */
.dcard-page {
    --dcard-accent: #6366f1;
    min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 40px 16px 28px;
    background:
        radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--dcard-accent) 32%, #fff), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--dcard-accent) 10%, #f8fafc), #f1f5f9);
    font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.dcard {
    width: 100%; max-width: 460px;
    background: #fff; border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 26px; padding: 28px 24px 18px;
    box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--dcard-accent) 45%, transparent),
                0 4px 14px rgba(15, 23, 42, 0.06);
    text-align: center;
}
.dcard-logo { max-height: 34px; max-width: 60%; object-fit: contain; margin: 0 auto 14px; display: block; }
.dcard-avatar-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.dcard-avatar {
    width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--dcard-accent), 0 10px 24px -8px color-mix(in srgb, var(--dcard-accent) 60%, transparent);
}
.dcard-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 700; color: #fff; letter-spacing: 0.5px;
    background: linear-gradient(150deg, var(--dcard-accent), color-mix(in srgb, var(--dcard-accent) 55%, #000));
}
.dcard-name { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.01em; }
.dcard-title { font-size: 0.9rem; font-weight: 600; color: var(--dcard-accent); margin: 4px 0 0; }
.dcard-bio { font-size: 0.9rem; color: #475569; margin: 12px 4px 0; line-height: 1.55; }

.dcard-save {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 20px auto 4px; padding: 12px 22px; border-radius: var(--radius-full, 999px);
    background: var(--dcard-accent); color: #fff; font-size: 0.9rem; font-weight: 700;
    text-decoration: none; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--dcard-accent) 70%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dcard-save:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--dcard-accent) 75%, transparent); }
.dcard-save svg { width: 17px; height: 17px; }

.dcard-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.dcard-link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-radius: 15px;
    background: #fff; border: 1px solid #e9edf3; color: #0f172a;
    font-size: 0.92rem; font-weight: 600; text-decoration: none;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.dcard-link:hover {
    transform: translateY(-1px); border-color: color-mix(in srgb, var(--dcard-accent) 45%, #e9edf3);
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.25);
}
.dcard-link-icon { display: inline-flex; flex-shrink: 0; }
.dcard-link-icon svg { width: 20px; height: 20px; }
.dcard-link-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-link-chev { color: #cbd5e1; font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

.dcard-team { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eef2f7; }
.dcard-team-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.dcard-team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
.dcard-team-member { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; width: 64px; }
.dcard-team-member img, .dcard-team-fallback {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 0 0 2px #e2e8f0;
}
.dcard-team-fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 700; color: #fff;
    background: linear-gradient(150deg, var(--dcard-accent), color-mix(in srgb, var(--dcard-accent) 55%, #000));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dcard-accent) 30%, #e2e8f0);
}
.dcard-team-name { font-size: 0.72rem; font-weight: 600; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; }

.dcard-made {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 22px;
    font-size: 0.74rem; font-weight: 600; color: #94a3b8; text-decoration: none;
}
.dcard-made:hover { color: var(--dcard-accent); }
.dcard-made-spark { font-size: 0.8rem; }

.dcard-missing { justify-content: center; }
.dcard-missing-box { text-align: center; color: #475569; }
.dcard-missing-box h1 { font-size: 1.3rem; color: #0f172a; margin: 0 0 6px; }

/* ─── Digital card manager + editor ──────────────────────────────────────── */
.cards-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 56px 20px; background: #fff; border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 14px); margin-top: 18px;
}
.cards-empty-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 6px 0 0; }
.cards-empty-sub { font-size: 0.85rem; color: #64748b; margin: 0 0 12px; max-width: 380px; }

.cards-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cards-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px;
}
.cards-row-avatar {
    --dcard-accent: #6366f1; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.95rem;
    background: linear-gradient(150deg, var(--dcard-accent), color-mix(in srgb, var(--dcard-accent) 55%, #000));
}
.cards-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cards-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cards-row-name { font-size: 0.92rem; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.cards-row-draft { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b45309; background: #fffbeb; padding: 1px 7px; border-radius: 999px; }
.cards-row-slug { font-size: 0.78rem; color: #64748b; text-decoration: none; }
.cards-row-slug:hover { color: var(--color-primary); }
.cards-row-stats { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cards-row-stats span { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.cards-row-actions { display: flex; align-items: center; gap: 6px; }

@media (max-width: 640px) { .cards-row-stats { display: none; } }

.cards-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
    border: 1px solid var(--color-border, #e2e8f0); border-radius: 999px; background: #fff;
    font-size: 0.78rem; font-weight: 600; color: #334155; cursor: pointer; text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.cards-btn:hover { background: #f8fafc; border-color: var(--color-border-strong, #cbd5e1); }
.cards-btn.danger { color: #b91c1c; }
.cards-btn.danger:hover { background: #fef2f2; border-color: #fecaca; }

/* Editor */
.cards-editor { display: grid; grid-template-columns: 1fr 380px; gap: 22px; margin-top: 16px; align-items: start; }
.cards-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cards-form-section {
    background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px; padding: 16px 18px;
}
.cards-field-label { font-size: 0.8rem; font-weight: 700; color: #0f172a; margin: 4px 0 8px; }
.cards-field-hint { font-weight: 500; color: #94a3b8; }

.cards-uploads { display: flex; gap: 18px; margin-bottom: 14px; }
.cards-upload { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cards-upload-label { font-size: 0.74rem; font-weight: 600; color: #64748b; }
.cards-upload-drop {
    width: 72px; height: 72px; border-radius: 50%; border: 2px dashed var(--color-border-strong, #cbd5e1);
    display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
    background: #f8fafc; transition: border-color 0.12s;
}
.cards-upload-drop.logo { border-radius: 12px; width: 110px; }
.cards-upload-drop:hover { border-color: var(--color-primary); }
.cards-upload-drop.busy { opacity: 0.6; }
.cards-upload-drop img { width: 100%; height: 100%; object-fit: cover; }
.cards-upload-drop :is(input[type=file]) { display: none; }
.cards-upload-clear { background: none; border: none; color: #94a3b8; font-size: 0.72rem; cursor: pointer; }
.cards-upload-clear:hover { color: #b91c1c; }

.cards-slug { display: flex; align-items: center; gap: 0; margin-top: 12px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; overflow: hidden; }
.cards-slug-prefix { padding: 9px 4px 9px 12px; font-size: 0.82rem; color: #94a3b8; white-space: nowrap; background: #f8fafc; }
.cards-slug-input { flex: 1; min-width: 0; border: none; outline: none; padding: 9px 10px; font-size: 0.86rem; }
.cards-slug-state { padding: 0 12px; font-size: 0.74rem; font-weight: 700; }
.cards-slug-state.free { color: #16a34a; }
.cards-slug-state.taken { color: #b91c1c; }

.cards-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cards-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; cursor: pointer; padding: 0; }
.cards-swatch.on { box-shadow: 0 0 0 2px var(--color-primary); }
.cards-swatch-custom { width: 30px; height: 30px; padding: 0; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; }

.cards-links-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cards-link-edit { display: flex; align-items: center; gap: 10px; }
.cards-link-edit-icon { flex-shrink: 0; display: inline-flex; }
.cards-link-edit-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cards-link-input { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; padding: 7px 10px; font-size: 0.82rem; outline: none; }
.cards-link-input:focus { border-color: var(--color-primary); }
.cards-link-edit-actions { display: flex; gap: 3px; flex-shrink: 0; }
.cards-icon-btn { width: 26px; height: 26px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 7px; background: #fff; color: #64748b; cursor: pointer; font-size: 0.85rem; line-height: 1; }
.cards-icon-btn:hover:not(:disabled) { background: #f1f5f9; }
.cards-icon-btn:disabled { opacity: 0.35; cursor: default; }
.cards-icon-btn.danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.cards-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cards-preset {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
    border: 1px solid var(--color-border, #e2e8f0); border-radius: 999px; background: #fff;
    font-size: 0.78rem; font-weight: 600; color: #334155; cursor: pointer;
}
.cards-preset:hover { background: #f8fafc; border-color: var(--color-border-strong, #cbd5e1); }
.cards-preset svg { width: 15px; height: 15px; }

.cards-share { display: flex; align-items: center; gap: 16px; }
.cards-qr { width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--color-border, #e2e8f0); padding: 6px; background: #fff; }
.cards-share-actions { display: flex; flex-direction: column; gap: 8px; }
.cards-stats { display: flex; gap: 10px; margin-top: 16px; }
.cards-stat { flex: 1; text-align: center; padding: 12px 8px; background: #f8fafc; border-radius: 10px; }
.cards-stat-num { display: block; font-size: 1.3rem; font-weight: 750; color: #0f172a; }
.cards-stat-label { font-size: 0.72rem; color: #64748b; }
.cards-toplinks { margin-top: 14px; }
.cards-toplink { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 5px 0; border-top: 1px solid #f1f5f9; }
.cards-toplink-n { font-weight: 700; color: var(--color-primary); }

.cards-editor-footer { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.cards-publish { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: #334155; }

.cards-preview-wrap { position: sticky; top: 16px; }
.cards-phone {
    background: linear-gradient(180deg, #f1f5f9, #e2e8f0); border-radius: 30px; padding: 16px;
    border: 1px solid var(--color-border, #e2e8f0);
}
.cards-phone .dcard { box-shadow: 0 10px 30px -16px rgba(15,23,42,0.4); border-radius: 22px; }

@media (max-width: 880px) {
    .cards-editor { grid-template-columns: 1fr; }
    .cards-preview-wrap { position: static; order: -1; max-width: 460px; margin: 0 auto; }
}