/**
 * Rolonote Dashboard — Relationship details
 * Premium dark-first design matching the Rolonote extension aesthetic
 */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root,
[data-rn-theme="dark"] {
    color-scheme: dark;
    --dash-bg: #18191a;
    --dash-surface: #242526;
    --dash-surface-elevated: #3a3b3c;
    --dash-surface-hover: #4e4f50;
    --dash-border: #3e4042;
    --dash-border-subtle: rgba(255, 255, 255, 0.06);
    --dash-border-accent: rgba(24, 119, 242, 0.35);
    --dash-text-primary: #e4e6eb;
    --dash-text-secondary: #b0b3b8;
    --dash-text-muted: #8a8d91;
    --dash-accent: #1877f2;
    --dash-accent-secondary: #4599ff;
    --dash-accent-glow: rgba(24, 119, 242, 0.2);
    --dash-gradient: linear-gradient(135deg, #1877f2, #4f46e5);
    --dash-gradient-warm: linear-gradient(135deg, #f59e0b, #f02849);
    --dash-gradient-green: linear-gradient(135deg, #10b981, #059669);
    --dash-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --dash-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --dash-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.1);
    --dash-shadow-glow: 0 0 20px rgba(24, 119, 242, 0.15);
    --dash-radius-sm: 8px;
    --dash-radius-md: 12px;
    --dash-radius-lg: 16px;
    --dash-radius-xl: 20px;

    /* Modal & Overlay */
    --dash-overlay-bg: rgba(0, 8, 20, 0.68);
    --dash-modal-bg: #242526;
    --dash-modal-border: rgba(255, 255, 255, 0.1);
    --dash-modal-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.1);

    /* Motion */
    --rn-motion-fast: 140ms;
    --rn-motion-enter: 220ms;
    --rn-motion-slow: 320ms;
    --rn-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --rn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dash-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --dash-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Toast styling */
    --dash-toast-bg: rgba(24, 25, 26, 0.85);
    --dash-toast-text: #ffffff;
    --dash-toast-border: rgba(255, 255, 255, 0.1);
    --dash-toast-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* iPad-only additions. The source extension dashboard is untouched. */
html, body {
    min-height: 100%;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}
body {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
button, input, textarea, select, [role="button"] { touch-action: manipulation; }
input, textarea, select { font-size: max(16px, 1em); }
#ipad-sync-status {
    position: fixed;
    z-index: 1000002;
    bottom: max(14px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(17,24,39,.88);
    color: #d1fae5;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
#ipad-sync-status[data-state="offline"] { color: #fde68a; }
#ipad-sync-status[data-state="syncing"] { color: #bfdbfe; }
/* These controls act on adjacent Chrome tabs, not on Rolonote data. */
#dash-recover-avatars-btn,
.dash-settings-content > .dash-settings-card:first-child { display: none !important; }
@media (pointer: coarse) {
    .dash-icon-btn, .dash-btn, .filter-chip, .dash-nav-item { min-height: 44px; }
    ::-webkit-scrollbar { width: 0; height: 0; }
}
@media (max-width: 900px) {
    .dash-main, .dashboard-main { min-width: 0; }
}

[data-rn-theme="light"] {
    color-scheme: light;
    --dash-bg: #f0f2f5;
    --dash-surface: #ffffff;
    --dash-surface-elevated: #f7f8fa;
    --dash-surface-hover: #f2f2f2;
    --dash-border: #dadde1;
    --dash-border-subtle: rgba(0, 0, 0, 0.05);
    --dash-border-accent: rgba(24, 119, 242, 0.3);
    --dash-text-primary: #050505;
    --dash-text-secondary: #65676b;
    --dash-text-muted: #8a8d91;
    --dash-accent: #1877f2;
    --dash-accent-secondary: #4599ff;
    --dash-accent-glow: rgba(24, 119, 242, 0.15);
    --dash-gradient: linear-gradient(135deg, #1877f2, #4f46e5);
    --dash-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --dash-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --dash-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.2), 0 8px 10px rgba(0, 0, 0, 0.05);
    --dash-shadow-glow: 0 0 20px rgba(24, 119, 242, 0.1);

    /* Modal & Overlay - Light */
    --dash-overlay-bg: rgba(15, 23, 42, 0.22);
    --dash-modal-bg: #ffffff;
    --dash-modal-border: #dadde1;
    --dash-modal-shadow: 0 50px 100px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.05);

    /* Motion */
    --rn-motion-fast: 140ms;
    --rn-motion-enter: 220ms;
    --rn-motion-slow: 320ms;
    --rn-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --rn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dash-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --dash-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Toast styling */
    --dash-toast-bg: rgba(255, 255, 255, 0.95);
    --dash-toast-text: #050505;
    --dash-toast-border: rgba(0, 0, 0, 0.08);
    --dash-toast-shadow: 0 10px 32px rgba(15, 23, 42, 0.16);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--dash-bg);
    color: var(--dash-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

.rn-action-pending,
.rn-action-success {
    pointer-events: none;
}

.rn-action-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex: 0 0 auto;
    animation: rn-action-spin 700ms linear infinite;
}

.rn-action-check {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #31a24c;
    font-weight: 900;
}

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

.dash-contact-card,
.dash-notif-item,
.dash-settings-card {
    min-height: 76px;
    contain: layout paint;
}

.dash-stat-card {
    min-height: 76px;
    contain: layout;
}

.modal-section {
    contain: layout paint;
}

.modal-hero {
    min-height: 220px;
}

.dash-avatar,
.dash-contact-avatar,
.modal-avatar {
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    :root,
    [data-rn-theme="dark"],
    [data-rn-theme="light"] {
        --rn-motion-fast: 1ms;
        --rn-motion-enter: 1ms;
        --rn-motion-slow: 1ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}

/* Animated top accent bar */
body::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #2d88ff, #4f46e5, #7c3aed, #a855f7, #4f46e5, #2d88ff);
    background-size: 200% 100%;
    animation: dash-shimmer-bar 4s linear infinite;
    position: sticky;
    top: 0;
    z-index: 200;
}

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

.modal-section-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, #2d88ff, #4f46e5, #7c3aed, #a855f7, #4f46e5, #2d88ff);
    background-size: 200% 100%;
    animation: rn-shimmer-bar 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.modal-section-body.open + .modal-section-shimmer,
.modal-section-body.open ~ .modal-section-shimmer {
    /* We'll add a helper class in JS or just style it directly if we can target it */
}

/* Let's refine the section logic to always have the shimmer at top of body if open */
.modal-section.open-parent > .modal-section-shimmer {
    opacity: 1;
}

/* ===== HEADER / TOP NAV ===== */
.dash-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 32px;
    background: var(--dash-surface);
    border-bottom: 1px solid var(--dash-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.dash-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dash-header-left:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.dash-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--dash-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(24, 119, 242, 0.3);
    animation: dash-logo-glow 3s ease-in-out infinite alternate;
}

@keyframes dash-logo-glow {
    0% {
        box-shadow: 0 2px 10px rgba(45, 136, 255, 0.3);
    }

    100% {
        box-shadow: 0 2px 20px rgba(45, 136, 255, 0.5), 0 0 30px rgba(79, 70, 229, 0.2);
    }
}

.dash-logo svg {
    width: 22px;
    height: 22px;
    stroke: white;
}

.dash-brand {
    display: flex;
    flex-direction: column;
}

.dash-brand-name {
    font-size: 20px;
    font-weight: 700;
    
    background: var(--dash-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dash-brand-tag {
    font-size: 14px;
    font-weight: 600;
    
    
    color: var(--dash-text-muted);
}

.dash-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-search-wrapper {
    position: relative;
    width: 320px;
}

.dash-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--dash-text-muted);
    pointer-events: none;
}

.dash-search-input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    color: var(--dash-text-primary);
    font-size: 16px;
    font-family: inherit;
    transition: all 200ms ease;
    outline: none;
}

.dash-search-input:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px var(--dash-accent-glow);
    background: var(--dash-surface);
}

.dash-search-input::placeholder {
    color: var(--dash-text-muted);
}

.dash-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    color: var(--dash-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
}

.dash-btn-icon:hover:not(:disabled):not(.is-refreshing) {
    background: var(--dash-surface-hover);
    color: var(--dash-accent);
    border-color: var(--dash-border-accent);
}

@keyframes dash-spin-smooth {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dash-btn-icon.is-refreshing svg {
    animation: dash-spin-smooth 0.9s linear infinite;
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform;
}

.dash-sync-all-icon-wrap.is-syncing svg {
    animation: dash-spin-smooth 0.9s linear infinite;
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform;
}

.dash-btn-icon.is-refreshing {
    color: var(--dash-text-secondary) !important;
    border-color: var(--dash-border) !important;
    background: var(--dash-surface-elevated) !important;
    cursor: default;
    opacity: 0.72;
}

.dash-btn-icon svg {
    width: 18px;
    height: 18px;
}

.dash-btn-icon.active {
    background: rgba(45, 136, 255, 0.12);
    color: var(--dash-accent);
    border-color: rgba(45, 136, 255, 0.4);
}

#dash-notif-btn {
    position: relative;
}

#dash-notif-badge {
    animation: dash-badge-pop 2s infinite ease-in-out;
}

@keyframes dash-badge-pop {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 1px 4px rgba(239, 68, 68, 0.5);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.7);
    }
}

.dash-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-secondary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
    text-decoration: none;
}

.dash-btn-secondary:hover {
    background: var(--dash-surface-hover);
    color: var(--dash-accent);
    border-color: var(--dash-border-accent);
}

.dash-btn-secondary svg {
    width: 15px;
    height: 15px;
}

/* ===== MAIN CONTENT ===== */
.dash-main {
    width: min(100%, 1760px);
    max-width: 1760px;
    margin: 0 auto;
    padding: 28px 32px 60px;
    box-sizing: border-box;
}

/* ===== UPCOMING BIRTHDAYS ===== */
.dash-birthdays-section {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--dash-shadow-sm);
    position: relative;
}

.dash-birthdays-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #f02849);
    border-radius: var(--dash-radius-lg) var(--dash-radius-lg) 0 0;
}

.dash-birthdays-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--dash-surface);
    border-bottom: 1px solid var(--dash-border-subtle);
    position: relative;
    overflow: hidden;
}

.dash-birthdays-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-birthdays-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.dash-birthdays-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-primary);
    margin: 0;
    line-height: 1.3;
}

.dash-birthdays-subtitle {
    font-size: 13px;
    color: var(--dash-text-muted);
    margin-top: 2px;
    display: block;
    font-weight: 400;
}

.dash-birthdays-body {
    padding: 14px 20px 16px;
}

.dash-birthdays-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--dash-border) transparent;
}

.dash-birthdays-list::-webkit-scrollbar {
    height: 5px;
}

.dash-birthdays-list::-webkit-scrollbar-track {
    background: transparent;
}

.dash-birthdays-list::-webkit-scrollbar-thumb {
    background-color: var(--dash-border);
    border-radius: 10px;
}

.dash-birthday-card {
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    transition: transform 0.2s var(--dash-spring), box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--dash-text-primary);
    flex-shrink: 0;
}

.dash-birthday-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: rgba(245, 158, 11, 0.4);
}

.dash-birthday-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dash-border);
    background: var(--dash-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--dash-text-secondary);
    flex-shrink: 0;
}

.dash-birthday-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-birthday-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    color: var(--dash-text-primary);
}

.dash-birthday-date {
    font-size: 12px;
    font-weight: 500;
    color: #f59e0b;
}


/* ===== STATS ROW ===== */
.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

.dash-stat-card {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 280ms var(--dash-spring), border-color 280ms var(--dash-spring), background-color 280ms var(--dash-spring), box-shadow 280ms var(--dash-spring);
    cursor: pointer;
    position: relative;
    /* overflow: hidden; removed to prevent tooltip clipping */
}

.dash-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 250ms ease;
}

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

.dash-stat-card:active {
    transform: translateY(-1px) scale(0.99);
    transition: transform 120ms ease;
}

.dash-stat-card:hover::before {
    opacity: 1;
}

/* Removed conflicting ::after glow effect. Applied directly to hover state of stat cards. */

.stat-total:hover {
    box-shadow: var(--dash-shadow-md), 0 0 20px rgba(45, 136, 255, 0.2);
}

.stat-active:hover {
    box-shadow: var(--dash-shadow-md), 0 0 20px rgba(16, 185, 129, 0.2);
}

.stat-vip:hover,
.stat-quiet:hover {
    box-shadow: var(--dash-shadow-md), 0 0 20px rgba(168, 85, 247, 0.2);
}

.dash-stat-card.stat-followup {
    border: 1px solid rgba(247, 185, 40, 0.6) !important;
    background: linear-gradient(135deg, var(--dash-surface), rgba(247, 185, 40, 0.08));
    box-shadow: 0 0 20px rgba(247, 185, 40, 0.12), 0 0 0 1px rgba(247, 185, 40, 0.6) inset !important;
}

.stat-followup:hover {
    box-shadow: var(--dash-shadow-md), 0 0 20px rgba(247, 185, 40, 0.2);
}

.stat-birthday:hover {
    box-shadow: var(--dash-shadow-md), 0 0 20px rgba(245, 158, 11, 0.2);
}

.dash-stat-card.stat-total {
    border: 1px solid rgba(45, 136, 255, 0.6) !important;
    background: linear-gradient(135deg, var(--dash-surface), rgba(45, 136, 255, 0.08));
    box-shadow: 0 0 20px rgba(45, 136, 255, 0.12), 0 0 0 1px rgba(45, 136, 255, 0.6) inset !important;
}

.dash-stat-card.stat-active {
    border: 1px solid rgba(16, 185, 129, 0.6) !important;
    background: linear-gradient(135deg, var(--dash-surface), rgba(16, 185, 129, 0.08));
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(16, 185, 129, 0.6) inset !important;
}

.dash-stat-card.stat-birthday {
    border: 1px solid rgba(245, 158, 11, 0.6) !important;
    background: linear-gradient(135deg, var(--dash-surface), rgba(245, 158, 11, 0.08));
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.6) inset !important;
}

.dash-stat-card.stat-quiet {
    border: 1px solid rgba(239, 68, 68, 0.6) !important;
    background: linear-gradient(135deg, var(--dash-surface), rgba(239, 68, 68, 0.08));
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.12), 0 0 0 1px rgba(239, 68, 68, 0.6) inset !important;
}

/* Executive Urgency Parity States */
.stat-followup .dash-stat-icon {
    background: rgba(247, 185, 40, 0.12);
    color: #f7b928;
}

[data-rn-theme="light"] .stat-followup .dash-stat-icon {
    background: rgba(247, 185, 40, 0.18);
    --stat-icon-stroke: #b45309;
    box-shadow: 0 2px 8px rgba(247, 185, 40, 0.12);
}

.dash-stat-card.urgency-med {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, var(--dash-surface), rgba(245, 158, 11, 0.05));
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}
.dash-stat-card.urgency-high {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, var(--dash-surface), rgba(239, 68, 68, 0.08));
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}

.dash-stat-card.urgency-med .dash-stat-value { color: #f59e0b; }
.dash-stat-card.urgency-high .dash-stat-value { color: #ef4444; }

.stat-total::before {
    background: var(--dash-gradient);
}

.stat-active::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.stat-vip::before {
    background: linear-gradient(90deg, #a855f7, #f02849);
}

.stat-birthday::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.stat-followup::before {
    background: linear-gradient(90deg, #f7b928, #f59e0b);
}

.stat-quiet::before {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.dash-stat-icon {
    width: 44px; /* Slightly more compact for premium feel */
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Default Dark Mode Styles */
[data-rn-theme="dark"] .dash-stat-icon,
:root:not([data-rn-theme="light"]) .dash-stat-icon {
    box-shadow: var(--dash-shadow-sm);
}

[data-rn-theme="dark"] .dash-stat-icon::after,
:root:not([data-rn-theme="light"]) .dash-stat-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.12), transparent);
    pointer-events: none;
}

.dash-stat-icon svg {
    width: 20px;
    height: 20px;
    fill: none; /* Fix: Remove default black fill from paths */
    stroke: var(--stat-icon-stroke, white);
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

[data-rn-theme="dark"] .dash-stat-icon svg,
:root:not([data-rn-theme="light"]) .dash-stat-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* Total Vault — Luminous Blue */
.stat-total .dash-stat-icon {
    background: linear-gradient(135deg, #2d88ff, #4f46e5);
    --stat-icon-stroke: white;
    box-shadow: 0 4px 14px rgba(45, 136, 255, 0.4);
}
[data-rn-theme="light"] .stat-total .dash-stat-icon {
    background: rgba(45, 136, 255, 0.12);
    --stat-icon-stroke: #2d88ff;
    box-shadow: 0 2px 8px rgba(45, 136, 255, 0.1);
}

/* Active (30d) — Luminous Emerald */
.stat-active .dash-stat-icon {
    background: linear-gradient(135deg, #00d8a7, #059669);
    --stat-icon-stroke: white;
    box-shadow: 0 4px 14px rgba(0, 216, 167, 0.4);
}
[data-rn-theme="light"] .stat-active .dash-stat-icon {
    background: rgba(0, 216, 167, 0.12);
    --stat-icon-stroke: #059669;
    box-shadow: 0 2px 8px rgba(0, 216, 167, 0.1);
}

/* VIP / Birthdays — Luminous Amber */
.stat-birthday .dash-stat-icon {
    background: linear-gradient(135deg, #ffb02e, #f97316);
    --stat-icon-stroke: white;
    box-shadow: 0 4px 14px rgba(255, 176, 46, 0.4);
}
.stat-birthday .dash-stat-icon svg {
    transform: translateY(-1.5px);
}
[data-rn-theme="light"] .stat-birthday .dash-stat-icon {
    background: rgba(255, 176, 46, 0.15);
    --stat-icon-stroke: #f97316;
    box-shadow: 0 2px 8px rgba(255, 176, 46, 0.1);
}

/* Quiet / Alert — Luminous Alert Red */
.stat-quiet .dash-stat-icon {
    background: linear-gradient(135deg, #ff4d4d, #f02849);
    --stat-icon-stroke: white;
    box-shadow: 0 4px 14px rgba(255, 77, 77, 0.4);
}
[data-rn-theme="light"] .stat-quiet .dash-stat-icon {
    background: rgba(255, 77, 77, 0.12);
    --stat-icon-stroke: #f02849;
    box-shadow: 0 2px 8px rgba(255, 77, 77, 0.1);
}

.dash-stat-info {
    display: flex;
    flex-direction: column;
}

.dash-stat-value {
    font-size: 30px;
    font-weight: 700;
    
    line-height: 1.1;
    color: var(--dash-text-primary);
}

.dash-stat-label {
    font-size: 15px;
    font-weight: 400;
    color: var(--dash-text-muted);
    margin-top: 4px;
}

/* ===== FILTER SECTION ===== */
.dash-filter-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 15;
}

.dash-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.dash-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-filter-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text-muted);
    
    
    min-width: 80px;
    flex-shrink: 0;
}

.dash-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface);
    color: var(--dash-text-secondary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 200ms var(--dash-spring), border-color 200ms var(--dash-spring), color 200ms var(--dash-spring), box-shadow 200ms var(--dash-spring), transform 150ms var(--dash-spring-soft);
    white-space: nowrap;
}

.dash-pill:hover {
    border-color: var(--pill-color, var(--dash-accent));
    background: var(--pill-bg, rgba(45, 136, 255, 0.08));
    color: var(--pill-color, var(--dash-accent));
    transform: translateY(-1px);
}

.dash-pill:active {
    transform: scale(0.95);
    transition: transform 100ms ease;
}

.dash-pill-muted,
.dash-pill-muted:hover {
    cursor: default;
    color: var(--dash-text-muted);
    background: var(--dash-surface-elevated);
    border-color: var(--dash-border);
    box-shadow: none;
}

.dash-pill-more,
.dash-pill-more:hover {
    cursor: pointer;
    color: var(--dash-accent);
    border-color: var(--dash-accent);
}

.dash-pill-more:hover {
    background: rgba(45, 136, 255, 0.1);
    transform: translateY(-1px);
}

.dash-pill.active {
    border-color: var(--pill-color, var(--dash-accent));
    background: var(--pill-bg, rgba(45, 136, 255, 0.15));
    color: var(--pill-color, var(--dash-accent));
    box-shadow: 0 0 8px var(--pill-bg, rgba(45, 136, 255, 0.15));
}

.dash-pill-count {
    font-size: 14px;
    opacity: 0.7;
}

.dash-pill.urgent {
    animation: dash-pill-pulse 2s ease-in-out infinite;
}

@keyframes dash-pill-pulse {

    0%,
    100% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 12px var(--pill-bg, rgba(239, 68, 68, 0.3));
    }
}

.dash-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 2px;
}

.dash-sort-select {
    padding: 8px 32px 8px 12px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-secondary);
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b0b3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    outline: none;
    transition: all 200ms ease;
}

.dash-sort-select:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px var(--dash-accent-glow);
}

.dash-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-muted);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
}

.dash-btn-ghost:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
}

/* ===== ACTIVE FILTER CHIPS ===== */
.dash-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.dash-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    background: rgba(45, 136, 255, 0.12);
    color: var(--dash-accent);
    border: 1px solid rgba(45, 136, 255, 0.25);
}

.dash-active-chip:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== CONTACTS GRID ===== */
.dash-results-count {
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text-muted);
    margin-bottom: 12px;
}

.dash-results-count strong {
    color: var(--dash-accent);
    font-weight: 700;
}

.dash-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.dash-load-more-card {
    min-height: 112px;
    border: 1px dashed var(--dash-border);
    border-radius: var(--dash-radius-lg);
    background: var(--dash-surface);
    color: var(--dash-text-secondary);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.dash-load-more-card:hover {
    border-color: var(--dash-border-accent);
    background: var(--dash-surface-elevated);
    color: var(--dash-text-primary);
}

.dash-load-more-card span {
    font-size: 14px;
    font-weight: 700;
}

.dash-load-more-card strong {
    font-size: 12px;
    color: var(--dash-text-muted);
}

/* ===== CONTACT CARD ===== */
.dash-contact-card {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-left: 3px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 18px 20px 18px 18px;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: visible; /* Must be visible so the earmark fold triangle is not clipped */
    contain: none;
    isolation: isolate;
    box-shadow: var(--dash-shadow-sm);
    min-height: 130px;
}

/* Status-colored left accent borders for glanceability */
.dash-contact-card[data-status="saved-contact"] { border-left-color: #2d88ff; }
.dash-contact-card[data-status="priority"]      { border-left-color: #f02849; }
.dash-contact-card[data-status="vip"]           { border-left-color: #a855f7; }
.dash-contact-card[data-status="close-tie"]     { border-left-color: #10b981; }
.dash-contact-card[data-status="in-touch"]      { border-left-color: #31a24c; }
.dash-contact-card[data-status="follow-up"]     { border-left-color: #f7b928; }
.dash-contact-card[data-status="warm"]          { border-left-color: #f7b928; }
.dash-contact-card[data-status="quiet"],
.dash-contact-card[data-status="dormant"]       { border-left-color: #8a8d91; }

/* Staggered card entrance animation */
.dash-contact-card:nth-child(1) {
    animation-delay: 0ms;
}

.dash-contact-card:nth-child(2) {
    animation-delay: 40ms;
}

.dash-contact-card:nth-child(3) {
    animation-delay: 80ms;
}

.dash-contact-card:nth-child(4) {
    animation-delay: 120ms;
}

.dash-contact-card:nth-child(5) {
    animation-delay: 160ms;
}

.dash-contact-card:nth-child(6) {
    animation-delay: 200ms;
}

.dash-contact-card:nth-child(7) {
    animation-delay: 240ms;
}

.dash-contact-card:nth-child(8) {
    animation-delay: 280ms;
}

.dash-contact-card:nth-child(n+9) {
    animation-delay: 300ms;
}

@keyframes dash-card-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

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

.dash-contact-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 20px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--dash-border-accent) inset;
    border-color: var(--dash-accent);
}

/* Dog-Eared Corners — visual fold on outer div, tooltip via inner span */
.dash-contact-card.rn-dog-eared {
    border-top-right-radius: 0;
}

/* Earmark outer container */
.dash-earmark {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    z-index: 10;
    overflow: visible;
    pointer-events: none;
}

/* The colored fold triangle — sits flush against the card's top-right corner */
.dash-earmark::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent var(--rn-dogear-color, var(--dash-accent)) transparent transparent;
    filter: drop-shadow(-2px 2px 4px rgba(0,0,0,0.25));
    pointer-events: none;
}

/* Hit-area span that carries the tooltip.
   NO clip-path here — clip-path kills ::after pseudo-element tooltips. */
.dash-earmark-tip {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 24px;
    height: 24px;
    pointer-events: auto;
    cursor: default;
    z-index: 11;
}

/* Right-edge tooltip: override centering so it doesn't overflow the card */
.dash-earmark-tip[data-tooltip]::after {
    bottom: auto !important;
    top: calc(100% + 6px) !important;
    left: auto !important;
    right: 0 !important;
    transform: translateY(-4px) !important;
}

.dash-earmark-tip[data-tooltip]:hover::after {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===== TOOLTIP SYSTEM (data-tooltip) ===== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    background: rgba(15, 15, 20, 0.92);
    color: #f0f0f5;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms ease;
    /* Default position: above */
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px) scale(0.96);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Position: bottom */
[data-tooltip][data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px) scale(0.96);
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::after {
    transform: translateX(0) translateY(0) scale(1);
}

/* Light theme adjustments */
[data-rn-theme="light"] [data-tooltip]::after {
    background: rgba(30, 30, 40, 0.93);
    color: #f8f8ff;
    border-color: rgba(0, 0, 0, 0.12);
}


/* Status-specific Glows on Hover */
.dash-contact-card[data-status="vip"]:hover {
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(168, 85, 247, 0.25) inset;
    border-color: #a855f7;
}

.dash-contact-card[data-status="priority"]:hover {
    box-shadow: 0 10px 25px -5px rgba(240, 40, 73, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(240, 40, 73, 0.25) inset;
    border-color: #f02849;
}

.dash-contact-card[data-status="close-tie"]:hover,
.dash-contact-card[data-status="in-touch"]:hover {
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(16, 185, 129, 0.25) inset;
    border-color: #10b981;
}

.dash-contact-card[data-status="follow-up"]:hover,
.dash-contact-card[data-status="warm"]:hover {
    box-shadow: 0 10px 25px -5px rgba(247, 185, 40, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(247, 185, 40, 0.25) inset;
    border-color: #f7b928;
}

/* Keep card contents in one stable stacking context. Hover feedback is handled
   by the border and shadow so the whole card never flashes a color overlay. */
.dash-card-header,
.dash-card-body {
    position: relative;
    z-index: 1;
}

.dash-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: var(--dash-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 24px;
}

.dash-card-avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
    max-width: 52px;
    min-height: 52px;
    max-height: 52px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    z-index: 2;
}

/*.dash-card-identity */
.dash-card-identity {
    flex: 1;
    min-width: 0;
}

.dash-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-primary);
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    margin-bottom: 3px;
}

.dash-card-handle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
}

.dash-card-handle {
    font-size: 13.5px;
    color: var(--dash-text-muted);
    white-space: normal;
    word-break: break-all;
    flex: 0 1 auto;
    min-width: 0;
}

.dash-platform-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid;
    flex-shrink: 0;
}

.dash-card-status {
    position: static;
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background-color 140ms ease, color 140ms ease;
    z-index: 5;
}

/* dog-eared status shift no longer needed — badge is inline, not absolute */

.dash-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-card-context {
    font-size: 13.5px;
    color: var(--dash-text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dash-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.dash-card-tag {
    display: inline-flex;
    padding: 3px 9px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-accent-secondary);
    transition: all 140ms ease;
}

.dash-card-tag:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.dash-card-activity {
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dash-card-birthday {
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dash-card-details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.dash-card-summary-snippet {
    color: var(--dash-text-secondary);
    font-size: 12.5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dash-micro-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--dash-text-secondary);
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.dash-micro-tag:hover {
    background: var(--dash-surface-hover);
    border-color: var(--dash-text-muted);
}

.dash-micro-tag svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Overflow indicator chip */
.dash-micro-overflow {
    color: var(--dash-text-muted);
    background: transparent;
    border-style: dashed;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.dash-micro-tag.verified {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.dash-card-quick-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 160ms;
    z-index: 10;
}

.dash-contact-card:hover .dash-card-quick-actions,
.dash-contact-card:focus-within .dash-card-quick-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.dash-qa-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dash-accent);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.dash-qa-btn svg {
    width: 15px;
    height: 15px;
}

.dash-qa-btn.qa-fb {
    background: var(--dash-surface-elevated);
    color: var(--dash-text-primary);
    border: 1px solid var(--dash-border);
}

.dash-qa-btn:hover {
    transform: scale(1.06);
}

.dash-qa-btn.qa-msg:hover {
    background: var(--dash-gradient);
    box-shadow: 0 4px 15px rgba(45, 136, 255, 0.4);
}

.dash-qa-btn.qa-fb:hover {
    background: var(--dash-surface-hover);
    border-color: var(--dash-text-muted);
}

/* ===== LOADING SKELETONS ===== */
.dash-loading-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    width: 100%;
}

.dash-skeleton-card {
    height: 180px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    position: relative;
    overflow: hidden;
}

.dash-skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.07) 40%,
            rgba(255, 255, 255, 0.13) 50%,
            rgba(255, 255, 255, 0.07) 60%,
            transparent 100%);
    animation: dash-skeleton-shimmer 1.4s ease-in-out infinite;
}

[data-rn-theme="light"] .dash-skeleton-card::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.04) 40%,
            rgba(0, 0, 0, 0.09) 50%,
            rgba(0, 0, 0, 0.04) 60%,
            transparent 100%);
}

@keyframes dash-skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes dash-count-pop {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    60% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== EMPTY STATE ===== */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.dash-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--dash-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: dash-float 3s ease-in-out infinite;
}

@keyframes dash-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.dash-empty-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--dash-accent);
    opacity: 0.5;
}

.dash-empty h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--dash-text-primary);
    margin-bottom: 8px;
}

.dash-empty p {
    font-size: 17px;
    color: var(--dash-text-muted);
    max-width: 400px;
}

/* ===== MODAL ===== */
.dash-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: dash-overlay-fade-in 200ms ease;
    padding: 20px;
    overscroll-behavior: contain;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

@keyframes dash-overlay-fade-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

.dash-modal {
    background: var(--dash-modal-bg);
    border: 1px solid var(--dash-modal-border);
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--dash-shadow-md);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--dash-border) transparent;
    animation: dash-modal-spring 280ms var(--dash-spring) forwards;
}

@keyframes dash-modal-spring {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dash-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    color: var(--dash-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    z-index: 10;
}

.dash-modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.dash-modal-close svg {
    width: 16px;
    height: 16px;
}

/* Modal Inner Content */
/* Modal Hero Header — immersive glassmorphic header */
.modal-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px 22px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.modal-header-bg {
    position: absolute;
    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -40px;
    background: var(--status-bg, var(--dash-gradient));
    filter: blur(60px);
    transform: translateZ(0);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    transition: background 0.5s ease;
}

/* Subtle shimmer line under hero */
.modal-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dash-border), transparent);
    opacity: 0.5;
}

.modal-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--dash-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 32px;
    position: relative;
    box-shadow: 
        0 0 0 3px var(--dash-modal-bg),
        0 0 0 4px rgba(45, 136, 255, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-avatar:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 0 3px var(--dash-modal-bg),
        0 0 0 5px rgba(45, 136, 255, 0.35),
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(45, 136, 255, 0.15);
}

.modal-avatar img {
    width: 88px;
    height: 88px;
    min-width: 88px;
    max-width: 88px;
    min-height: 88px;
    max-height: 88px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: inherit;
    z-index: 2;
}

.modal-identity {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

.modal-identity h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--dash-text-primary);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.modal-identity .modal-handle {
    font-size: 13px;
    font-weight: 500;
    color: var(--dash-text-muted);
    margin-top: 3px;
    opacity: 0.7;
}

.modal-identity .modal-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
}

.modal-identity .modal-status-pill svg {
    fill: none;
    stroke: currentColor;
    background: transparent;
}

/* ── Status badge (refined inline chip) ── */
#dash-modal-content .rn-detected-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.3;
    vertical-align: middle;
}

#dash-modal-content .rn-detected-badge:hover {
    filter: brightness(1.08);
}

#dash-modal-content .rn-detected-badge svg {
    flex-shrink: 0;
}

[data-rn-theme="light"] #dash-modal-content .rn-detected-badge {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Wrapper so badges flow inline */
.modal-identity .modal-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
}

.modal-body {
    padding: 16px 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Quick Info Row — refined accent-bordered intel cards */
.modal-quick-info {
    display: flex;
    gap: 8px;
    padding: 8px 32px 0;
}

.modal-qi {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    text-align: left;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Accent top-line for QI cards */
.modal-qi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--dash-gradient);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.modal-qi:hover {
    border-color: var(--dash-border-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modal-qi:hover::before {
    opacity: 1;
}

.modal-qi-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dash-text-muted);
    margin-bottom: 4px;
}

.modal-qi-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-primary);
    letter-spacing: -0.01em;
}

.modal-qi-priority {
    border-color: rgba(239, 68, 68, 0.25);
}

.modal-qi-priority::before {
    background: linear-gradient(90deg, #ef4444, #f97316);
    opacity: 0.8;
}

.modal-qi-priority .modal-qi-value {
    color: #fb7185;
}

.modal-qi-warm {
    border-color: rgba(245, 158, 11, 0.25);
}

.modal-qi-warm::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    opacity: 0.8;
}

.modal-qi-warm .modal-qi-value {
    color: #fbbf24;
}

[data-rn-theme="light"] .modal-qi {
    background: var(--dash-surface-elevated);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-rn-theme="light"] .modal-qi:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border-color: rgba(24, 119, 242, 0.25);
}

/* ── Premium section/expand system (scoped to modal) ─────── */

#dash-modal-content .modal-section {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--dash-border-subtle);
    transition: all 0.25s ease;
    position: relative;
}

[data-rn-theme="light"] #dash-modal-content .modal-section {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.06);
}

#dash-modal-content .modal-section:hover {
    border-color: var(--dash-border);
}

/* Open state — give it a subtle surface lift */
#dash-modal-content .modal-section.open-parent {
    background: var(--dash-surface-elevated);
    border-color: var(--dash-border);
}

[data-rn-theme="light"] #dash-modal-content .modal-section.open-parent {
    background: rgba(255, 255, 255, 0.6);
}

#dash-modal-content .modal-expand-btn {
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: none;
    color: var(--dash-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    gap: 10px;
}

#dash-modal-content .modal-expand-btn:hover {
    color: var(--dash-accent);
}

#dash-modal-content .modal-expand-btn-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

#dash-modal-content .modal-section-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 136, 255, 0.08);
    color: var(--dash-accent);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

[data-rn-theme="light"] #dash-modal-content .modal-section-icon {
    background: rgba(24, 119, 242, 0.06);
}

#dash-modal-content .modal-expand-btn:hover .modal-section-icon {
    background: rgba(45, 136, 255, 0.14);
}

#dash-modal-content .modal-section-icon svg {
    opacity: 0.9;
}

#dash-modal-content .modal-expand-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--dash-text-muted);
    line-height: 1;
    flex-shrink: 0;
    transition: all 180ms ease;
    border: none;
    opacity: 0.5;
}

#dash-modal-content .modal-expand-btn:hover .modal-expand-icon {
    opacity: 1;
    color: var(--dash-accent);
}

#dash-modal-content .modal-section-body {
    display: none;
    padding: 0 18px 16px;
    animation: dash-section-open 200ms ease;
}

@keyframes dash-section-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

#dash-modal-content .modal-section-body.open {
    display: block;
}

.modal-loading-shell {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-loading-line,
.modal-loading-block {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--dash-surface-elevated), var(--dash-surface-hover), var(--dash-surface-elevated));
    background-size: 220% 100%;
    animation: dash-skeleton-shimmer 1.2s linear infinite;
}

.modal-loading-line {
    height: 14px;
    width: 46%;
}

.modal-loading-line.wide {
    width: 72%;
}

.modal-loading-block {
    height: 72px;
}

/* Expand All pill */
#dash-modal-content .modal-expand-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--dash-border-subtle);
    background: transparent;
    color: var(--dash-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
    letter-spacing: 0.02em;
}

#dash-modal-content .modal-expand-all-btn:hover {
    color: var(--dash-accent);
    border-color: rgba(45, 136, 255, 0.3);
}

#dash-modal-content .modal-expand-all-icon {
    transition: transform 280ms ease;
}

#dash-modal-content .modal-expand-all-btn.expanded .modal-expand-all-icon {
    transform: rotate(180deg);
}

/* Premium chips */
#dash-modal-content .modal-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 180ms ease;
}

#dash-modal-content .modal-chip:hover {
    border-color: rgba(45, 136, 255, 0.4);
    color: var(--dash-text-primary);
    background: rgba(45, 136, 255, 0.05);
}

#dash-modal-content .modal-chip.active {
    background: rgba(45, 136, 255, 0.1);
    border-color: rgba(45, 136, 255, 0.5);
    color: var(--dash-accent);
    font-weight: 700;
}

[data-rn-theme="light"] #dash-modal-content .modal-chip.active {
    background: rgba(24, 119, 242, 0.08);
    border-color: rgba(24, 119, 242, 0.35);
    color: var(--dash-accent);
}

/* Premium status buttons */
#dash-modal-content .modal-status-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 9px 6px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 180ms ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#dash-modal-content .modal-status-btn:hover {
    border-color: rgba(45, 136, 255, 0.4);
    color: var(--dash-text-primary);
    background: rgba(45, 136, 255, 0.04);
}

#dash-modal-content .modal-status-btn.active {
    background: rgba(45, 136, 255, 0.08);
    border-color: rgba(45, 136, 255, 0.5);
    color: var(--dash-accent);
    font-weight: 700;
}

/* AI activation & Data buttons */
.modal-btn-ai-save {
    padding: 12px 24px;
    background: var(--dash-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(45, 136, 255, 0.25);
    font-family: 'Inter', sans-serif;
}

.modal-btn-ai-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 136, 255, 0.4);
    filter: brightness(1.1);
}

.modal-data-row {
    display: flex;
    gap: 8px;
}

.modal-data-btn {
    flex: 1;
    padding: 10px;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    color: var(--dash-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.modal-data-btn:hover {
    background: var(--dash-surface-hover);
    border-color: var(--dash-accent);
    color: var(--dash-accent);
}

.modal-ai-status-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dash-text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

.modal-ai-status-line strong {
    color: var(--dash-text-primary);
}

.modal-data-btn.danger {
    color: #fb7185;
    border-color: rgba(239, 68, 68, 0.2);
}

.modal-data-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
}

.dash-btn-ghost-danger {
    background: transparent;
    border: 1px solid transparent;
    color: var(--dash-text-muted);
    transition: all 0.2s ease;
}

.dash-btn-ghost-danger:hover {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Grids */
#dash-modal-content .modal-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

#dash-modal-content .modal-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* .rn-detail-item equivalent (profile intel rows) */
#dash-modal-content .modal-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 180ms ease;
}

#dash-modal-content .modal-detail-item:hover {
    background: var(--dash-surface-hover);
}

#dash-modal-content .modal-detail-item svg {
    flex-shrink: 0;
    color: var(--dash-accent);
    width: 18px;
    height: 18px;
    display: block;
    opacity: 0.85;
}

#dash-modal-content .modal-detail-label {
    font-weight: 400;
    color: var(--dash-text-muted);
    font-size: 13px;
    white-space: nowrap;
    
    
    flex-shrink: 0;
    min-width: 74px;
}

#dash-modal-content .modal-detail-value {
    font-size: 15px;
    font-weight: 400;
    color: var(--dash-text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Intel container */
#dash-modal-content .modal-detail-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}

/* Clear Button (reminder) */
#dash-modal-content .modal-clear-btn {
    padding: 7px 14px;
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 200ms ease;
}

#dash-modal-content .modal-clear-btn:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Notes Fields & Textareas */
.modal-notes-input,
.modal-tags-input,
.modal-reminder-date,
.modal-ai-input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--dash-text-primary);
    outline: none;
    transition: all 200ms ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.modal-notes-input {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

.modal-notes-input:focus,
.modal-tags-input:focus,
.modal-reminder-date:focus,
.modal-ai-input:focus {
    border-color: rgba(45,136,255,0.45);
    background: rgba(45,136,255,0.03);
    box-shadow: 0 0 0 2px rgba(45,136,255,0.08);
}

[data-rn-theme="light"] .modal-notes-input,
[data-rn-theme="light"] .modal-tags-input,
[data-rn-theme="light"] .modal-reminder-date,
[data-rn-theme="light"] .modal-ai-input {
    background: var(--dash-surface-elevated);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-rn-theme="light"] .modal-notes-input:focus,
[data-rn-theme="light"] .modal-tags-input:focus,
[data-rn-theme="light"] .modal-reminder-date:focus,
[data-rn-theme="light"] .modal-ai-input:focus {
    background: white;
    border-color: rgba(24, 119, 242, 0.35);
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.06);
}

.modal-notes-input::placeholder,
.modal-tags-input::placeholder,
.modal-ai-input::placeholder {
    color: var(--dash-text-muted);
    opacity: 0.5;
}

/* Status & Context Grids */
.modal-status-grid,
.modal-context-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.modal-status-btn,
.modal-context-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    color: var(--dash-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: inherit;
}

.modal-status-btn:hover,
.modal-context-btn:hover {
    border-color: var(--dash-border-accent);
    background: var(--dash-surface-hover);
    transform: translateY(-1px);
}

.modal-status-btn.active,
.modal-context-btn.active {
    background: var(--pill-bg, rgba(45, 136, 255, 0.1));
    border-color: var(--pill-color, var(--dash-accent));
    color: var(--pill-color, var(--dash-accent));
    box-shadow: 0 4px 12px var(--pill-bg, rgba(45, 136, 255, 0.15));
}

.modal-status-btn svg,
.modal-context-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    background: transparent;
}

/* Tags */
.modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modal-tag {
    display: inline-flex;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-accent-secondary);
    transition: all 150ms ease;
}

.modal-tag:hover {
    background: rgba(99, 102, 241, 0.18);
    transform: translateY(-1px);
}

/* Platform Details Grid */
.modal-details-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.modal-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: var(--dash-radius-sm);
    transition: background 150ms ease;
}

.modal-detail-row:hover {
    background: var(--dash-surface-elevated);
}

.modal-detail-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.modal-detail-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text-muted);
    width: 80px;
    flex-shrink: 0;
}

.modal-detail-value {
    font-size: 15px;
    color: var(--dash-text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* AI Settings & Data Management */
.modal-ai-settings,
.modal-data-mgmt {
    margin-top: 4px;
    padding: 14px;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
}

.modal-ai-header,
.modal-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.modal-ai-title,
.modal-data-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--dash-text-primary);
}

.modal-ai-status,
.modal-data-status {
    font-size: 13px;
    color: var(--dash-text-muted);
}

.modal-ai-body,
.modal-data-body {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dash-border-subtle);
}

.modal-ai-body.open,
.modal-data-body.open {
    display: block;
}

.modal-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Timeline Layout (Matching Sidebar) */
.modal-timeline-log-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.modal-timeline-log-btn {
    min-height: 36px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface-elevated);
    color: var(--dash-text-secondary);
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 180ms ease;
}

.modal-timeline-log-btn:hover {
    border-color: rgba(45, 136, 255, 0.38);
    color: var(--dash-accent);
    transform: translateY(-1px);
}

.modal-timeline-log-btn:disabled {
    cursor: default;
    opacity: 0.8;
    transform: none;
}

.modal-timeline-empty {
    color: var(--dash-text-muted);
    font-size: 14px;
    padding: 12px 0;
    text-align: center;
}

.modal-timeline-list {
    position: relative;
    padding: 6px 4px 12px 0;
}

.modal-timeline-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--dash-border) 12px, var(--dash-border) calc(100% - 12px), transparent);
    border-radius: 1px;
}

.modal-timeline-event {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: flex-start;
    column-gap: 8px;
    padding: 9px 6px 9px 0;
    position: relative;
    transition: background 200ms ease;
    border-radius: 8px;
}

.modal-timeline-event:hover {
    background: var(--dash-surface-elevated);
}

.modal-timeline-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin: 5px auto 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--dash-surface);
    background: var(--timeline-color, var(--dash-accent));
    flex-shrink: 0;
}

.modal-timeline-content {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
}

.modal-timeline-actions {
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 180ms ease;
}

.modal-timeline-event:hover .modal-timeline-actions,
.modal-timeline-event:focus-within .modal-timeline-actions {
    opacity: 1;
}

.modal-timeline-edit-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dash-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, color 160ms ease;
}

.modal-timeline-edit-btn:hover,
.modal-timeline-edit-btn:focus-visible {
    background: rgba(45, 136, 255, 0.1);
    color: var(--dash-accent);
}

.modal-timeline-text {
    color: var(--dash-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.modal-timeline-time {
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 400;
    margin-top: 1px;
    opacity: 0.85;
}



.modal-link {
    color: var(--dash-accent);
    text-decoration: none;
    font-weight: 400;
}

.modal-link:hover {
    text-decoration: underline;
}



/* Meta footer */
.modal-meta {
    text-align: center;
    font-size: 14px;
    color: var(--dash-text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--dash-border-subtle);
}

/* Last-seen line in hero */
.modal-last-seen {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-text-muted);
    margin-top: 8px;
    opacity: 0.65;
    letter-spacing: 0.01em;
}

.modal-last-seen svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Destructive contact action — grouped with Close in the modal toolbar */
.modal-btn-delete-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #f1a3a3;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: all 200ms ease;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    opacity: 0.82;
}

.modal-btn-delete-contact:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255,255,255,0.14);
    opacity: 1;
}

.modal-btn-delete-contact svg {
    flex-shrink: 0;
}

/* Actions row — compact integrated toolbar */
.modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px 16px;
    position: relative;
}

/* Subtle divider line above actions */
.modal-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dash-border), transparent);
    opacity: 0.4;
}

.modal-actions .modal-btn-save,
.modal-actions .modal-btn-primary,
.modal-actions .modal-btn-secondary,
.modal-actions .modal-btn-delete-contact {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, filter 180ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    letter-spacing: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.modal-actions .modal-btn-save::before,
.modal-actions .modal-btn-primary::before,
.modal-actions .modal-btn-secondary::before,
.modal-actions .modal-btn-delete-contact::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 48%);
    opacity: 0.65;
    pointer-events: none;
    z-index: -1;
}

.modal-actions .modal-btn-save:hover,
.modal-actions .modal-btn-primary:hover,
.modal-actions .modal-btn-secondary:hover,
.modal-actions .modal-btn-delete-contact:hover {
    transform: translateY(-1px);
}

.modal-actions .modal-btn-save:active,
.modal-actions .modal-btn-primary:active,
.modal-actions .modal-btn-secondary:active,
.modal-actions .modal-btn-delete-contact:active {
    transform: translateY(0);
}

/* Primary Save button — polished command button */
.modal-btn-save {
    padding: 10px 20px;
    background: var(--dash-gradient);
    color: white;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(24, 119, 242, 0.26), inset 0 1px 0 rgba(255,255,255,0.22);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.modal-btn-save:hover {
    box-shadow: 0 16px 34px rgba(24, 119, 242, 0.34), inset 0 1px 0 rgba(255,255,255,0.28);
    filter: brightness(1.05) saturate(1.05);
}

.modal-btn-save:active {
    box-shadow: 0 8px 18px rgba(24, 119, 242, 0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}

.modal-btn-save svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; background: transparent; flex-shrink: 0;
}

/* Open Profile — premium glass action */
.modal-btn-primary {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    color: #d8e7ff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}

.modal-btn-primary:hover {
    background: rgba(24, 119, 242, 0.12);
    border-color: rgba(24, 119, 242, 0.45);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.15);
}

.modal-btn-primary svg {
    width: 13px; height: 13px;
    fill: none; stroke: currentColor; background: transparent; flex-shrink: 0;
}

/* Message — subtle violet action */
.modal-btn-secondary {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    color: #dec7ff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}

.modal-btn-secondary:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.45);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.15);
}

.modal-btn-secondary svg {
    width: 13px; height: 13px;
    fill: none; stroke: currentColor; background: transparent; flex-shrink: 0;
}

/* Light mode action buttons */
[data-rn-theme="light"] .modal-btn-primary {
    background: linear-gradient(180deg, #ffffff, #f7f9fd);
    border-color: rgba(24, 119, 242, 0.18);
    color: #1f4f88;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}

[data-rn-theme="light"] .modal-btn-primary:hover {
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    border-color: rgba(24, 119, 242, 0.25);
    color: var(--dash-accent);
}

[data-rn-theme="light"] .modal-btn-secondary {
    background: linear-gradient(180deg, #ffffff, #faf7ff);
    color: #7c3aed;
    border-color: rgba(139, 92, 246, 0.18);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}

[data-rn-theme="light"] .modal-btn-secondary:hover {
    background: linear-gradient(180deg, #ffffff, #f5edff);
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

[data-rn-theme="light"] .modal-btn-delete-contact {
    background: linear-gradient(180deg, #ffffff, #fff5f5);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.18);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055), inset 0 1px 0 rgba(255,255,255,0.9);
}

[data-rn-theme="light"] .modal-btn-delete-contact:hover {
    background: linear-gradient(180deg, #ffffff, #fee2e2);
    border-color: rgba(220, 38, 38, 0.32);
    color: #991b1b;
}

/* ===== SCROLLBAR ===== */
.dash-modal::-webkit-scrollbar,
.modal-timeline::-webkit-scrollbar {
    width: 6px;
}

.dash-modal::-webkit-scrollbar-track,
.modal-timeline::-webkit-scrollbar-track {
    background: transparent;
}

.dash-modal::-webkit-scrollbar-thumb,
.modal-timeline::-webkit-scrollbar-thumb {
    background: var(--dash-border);
    border-radius: 3px;
}

/* ===== MODAL — Interactive Elements ===== */

/* Status & Context pill grids */
.modal-status-grid,
.modal-context-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-status-btn,
.modal-context-btn {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-secondary);
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
}

.modal-status-btn:hover,
.modal-context-btn:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08);
    color: var(--dash-text-primary);
}

.modal-status-btn.active,
.modal-context-btn.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(79, 70, 229, 0.2));
    border-color: #6366f1;
    color: #818cf8;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.modal-custom-context {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-secondary);
    font-size: 15px;
    font-style: italic;
}

/* Editable notes textarea */
.modal-notes-input {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-primary);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    box-sizing: border-box;
}

.modal-notes-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.modal-notes-input::placeholder {
    color: var(--dash-text-muted);
}

/* Tags input */
.modal-tags-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-primary);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    box-sizing: border-box;
}

.modal-tags-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.modal-tags-input::placeholder {
    color: var(--dash-text-muted);
}

/* Follow-up reminder buttons */
.modal-reminder-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.modal-reminder-btn {
    padding: 7px 14px;
    border-radius: 16px;
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-secondary);
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
}

.modal-reminder-btn:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}

.modal-reminder-date {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    background: var(--dash-card-bg);
    color: var(--dash-text-primary);
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 200ms ease;
}

.modal-reminder-date:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Highlights section */
.modal-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-highlight {
    padding: 12px 14px;
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-left: 3px solid #6366f1;
    border-radius: var(--dash-radius-sm);
}

.modal-highlight-text {
    color: var(--dash-text-secondary);
    font-size: 15px;
    line-height: 1.5;
    font-style: italic;
}

.modal-highlight-time {
    margin-top: 6px;
    color: var(--dash-text-muted);
    font-size: 14px;
}

/* Save button */
.modal-btn-save {
    padding: 11px 24px;
    background: var(--dash-gradient);
    color: white;
    border: none;
    border-radius: var(--dash-radius-sm);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex: 1;
    justify-content: center;
}

.modal-btn-save svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    background: transparent;
}

.modal-btn-save:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

/* ===== SETTINGS MODAL ===== */
.dash-settings-modal {
    max-width: 500px;
    padding: 0;
}

.dash-settings-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--dash-border);
    position: relative;
}

.dash-settings-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--dash-text-primary);
    font-weight: 600;
}

.dash-settings-header .dash-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--dash-text-secondary);
    cursor: pointer;
    font-size: 20px;
}

.dash-settings-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dash-settings-card {
    padding: 16px;
    border-radius: 12px;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
}

.dash-settings-card-header {
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-settings-desc {
    font-size: 13px;
    color: var(--dash-text-muted);
    line-height: 1.3;
}

.dash-settings-focus-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dash-settings-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-settings-icon-box svg {
    width: 18px;
    height: 18px;
}

.dash-settings-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text-primary);
    margin-bottom: 2px;
}

/* Switch */
.dash-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.dash-switch input {
    display: none;
}

.dash-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dash-surface-elevated);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
    border: 1px solid var(--dash-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dash-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--dash-text-muted);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dash-switch input:checked+.dash-slider {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: transparent;
}

.dash-switch input:checked+.dash-slider:before {
    transform: translateX(20px);
    background-color: #fff;
}

.dash-settings-focus-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-settings-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.dash-settings-action-list .dash-btn {
    justify-content: flex-start;
}

.dash-settings-action-list label.dash-btn {
    margin: 0;
    cursor: pointer;
}

.dash-hidden-input {
    display: none;
}

/* Base Inputs and Buttons (Modernized) */
.dash-input {
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-surface);
    color: var(--dash-text-primary);
    transition: all var(--dash-transition-fast);
    outline: none;
}

.dash-input:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px var(--dash-accent-glow);
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--dash-radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dash-transition-fast);
    border: 1px solid transparent;
}

.dash-btn-primary {
    background: var(--dash-accent);
    color: white;
}

.dash-btn-primary:hover {
    background: #1e70e0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 136, 255, 0.25);
}

.dash-btn-ghost {
    background: var(--dash-surface-elevated);
    border-color: var(--dash-border);
    color: var(--dash-text-secondary);
}

.dash-btn-ghost:hover {
    background: var(--dash-surface-hover);
    color: var(--dash-text-primary);
}

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

.dash-mb-3 {
    margin-bottom: 12px;
}

.dash-w-full {
    width: 100%;
}

.dash-settings-hint {
    font-size: 12px;
    margin-top: 8px;
    color: var(--dash-text-muted);
}

.dash-btn-danger {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ===== Contact Status Modifiers ===== */
.dash-status-in-touch {
    color: #31a24c;
    background: rgba(49, 162, 76, 0.15);
}

.dash-status-priority {
    color: #f02849;
    background: rgba(240, 40, 73, 0.15);
}

.dash-status-vip {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
}

.dash-status-follow-up {
    color: #f7b928;
    background: rgba(247, 185, 40, 0.15);
}

.dash-status-close-tie {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.dash-status-saved-contact {
    color: #2d88ff;
    background: rgba(45, 136, 255, 0.15);
}

.dash-status-warm {
    color: #f7b928;
    background: rgba(247, 185, 40, 0.15);
}

.dash-status-quiet {
    color: #8a8d91;
    background: rgba(138, 141, 145, 0.15);
}

/* Text Color Classes */
.dash-text-success {
    color: #10b981;
}

.dash-text-primary {
    color: #3b82f6;
}

.dash-text-warning {
    color: #f59e0b;
}

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

/* Avatar Fallback */
.dash-avatar-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: inherit;
    background: inherit;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 1;
    z-index: 1;
}

.dash-card-avatar.avatar-error > img,
.modal-avatar.avatar-error > img {
    display: none !important;
}

.dash-hidden {
    display: none !important;
}

/* Modal Empty State */
.modal-empty-state {
    padding: 16px;
    border-radius: var(--dash-radius-md);
    background: var(--dash-surface-elevated);
    border: 1px dashed var(--dash-border);
    text-align: center;
    color: var(--dash-text-secondary);
    font-size: 13px;
}

.modal-empty-link {
    color: var(--dash-accent);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 8px;
}

.modal-bottom-save-row {
    border-top: 1px solid var(--dash-border-subtle);
    margin-top: 12px;
    padding-top: 18px;
    display: flex;
}

.modal-btn-save-bottom {
    width: 100%;
    min-height: 44px;
}

@media (max-width: 620px) {
    .modal-timeline-log-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Settings Card Header Overrides (for SVGs) */
.dash-settings-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--dash-text-primary);
}

.dash-settings-card-header svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* AI Setup Specifics */
.dash-ai-setup-group {
    background: var(--dash-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-md);
    padding: 16px;
    margin-bottom: 8px;
}

.dash-settings-hint svg {
    margin-right: 4px;
    vertical-align: text-bottom;
    color: var(--dash-text-secondary);
}

/* Settings Grid for Data Management */
.dash-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dash-settings-grid-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--dash-radius-md);
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    cursor: pointer;
    text-align: left;
    transition: all var(--dash-transition-fast);
    font-family: inherit;
    color: var(--dash-text-primary);
    position: relative;
    overflow: hidden;
}

.dash-settings-grid-btn svg {
    color: var(--dash-text-secondary);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.dash-settings-grid-btn:hover {
    background: var(--dash-surface-hover);
    border-color: var(--dash-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dash-settings-grid-btn:hover svg {
    color: var(--dash-accent);
}

.dash-settings-grid-btn:active {
    transform: translateY(0);
}

.dash-grid-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.dash-grid-desc {
    font-size: 12px;
    color: var(--dash-text-muted);
}

/* Settings refinement: native grouped-list treatment */
.dash-settings-modal {
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-width: calc(100vw - 32px);
    max-height: min(92dvh, calc(100vh - 24px));
    border-radius: 18px;
    overflow: hidden;
}

.dash-settings-header {
    padding: 18px 22px 14px;
    background: var(--dash-modal-bg);
    border-bottom: 1px solid var(--dash-border-subtle);
}

.dash-settings-header h2 {
    font-size: 18px;
    font-weight: 700;
}

.dash-settings-content {
    padding: 18px 22px 22px;
    gap: 0;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background:
        linear-gradient(var(--dash-modal-bg), var(--dash-modal-bg)) padding-box,
        var(--dash-modal-bg);
}

.dash-settings-content > .dash-settings-card {
    order: 10;
}

.dash-settings-content > .dash-settings-card:nth-child(1) {
    order: 1;
}

.dash-settings-content > .dash-settings-card:nth-child(5) {
    order: 2;
}

.dash-settings-content > .dash-settings-card:nth-child(2) {
    order: 3;
}

.dash-settings-content > .dash-settings-card:nth-child(3) {
    order: 4;
}

.dash-settings-content > .dash-settings-card:nth-child(6) {
    order: 5;
}

.dash-settings-content > .dash-settings-card:nth-child(7) {
    order: 6;
}

.dash-settings-content > .dash-settings-card:nth-child(4) {
    order: 7;
}

.dash-settings-card {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.dash-settings-card + .dash-settings-card {
    margin-top: 18px !important;
}

.dash-settings-card-header {
    margin: 0 0 8px;
    padding: 0 2px;
    gap: 6px;
    color: var(--dash-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-settings-card-header svg {
    width: 13px;
    height: 13px;
    filter: none;
    opacity: 0.8;
}

.dash-settings-card:nth-child(1)::before,
.dash-settings-card:nth-child(5)::before,
.dash-settings-card:nth-child(6)::before {
    display: block;
    margin: 0 2px 8px;
    color: var(--dash-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-settings-card:nth-child(1)::before {
    content: "Preferences";
}

.dash-settings-card:nth-child(5)::before {
    content: none;
}

.dash-settings-card:nth-child(6)::before {
    content: "Account";
}

.dash-settings-content > .dash-settings-card:nth-child(5),
.dash-settings-content > .dash-settings-card:nth-child(7) {
    margin-top: 1px !important;
}

.dash-settings-card:nth-child(1) .dash-settings-focus-row {
    border-radius: 12px 12px 0 0;
}

.dash-settings-card:nth-child(5) .dash-settings-focus-row {
    border-top-color: transparent;
    border-radius: 0 0 12px 12px;
}

#dash-settings-sub-btn {
    border-radius: 12px 12px 0 0 !important;
}

#dash-settings-logout-btn {
    border-top-color: transparent !important;
    border-radius: 0 0 12px 12px !important;
}

.dash-settings-focus-row,
#dash-ai-settings-container,
.dash-settings-grid,
.dash-settings-card > p,
.dash-settings-card > .dash-btn,
.dash-settings-card > .dash-btn + div,
.dash-settings-card:nth-child(6),
.dash-settings-card:nth-child(7) {
    border-radius: 12px;
}

.dash-settings-focus-row {
    min-height: 72px;
    height: auto;
    padding: 14px 16px;
    gap: 16px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border-subtle);
    box-shadow: var(--dash-shadow-sm);
    overflow: visible;
}

.dash-settings-focus-left {
    min-width: 0;
    gap: 12px;
    flex: 1 1 auto;
}

.dash-settings-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.dash-settings-icon-box svg {
    width: 16px;
    height: 16px;
}

.dash-settings-title {
    font-size: 14px;
    line-height: 1.2;
}

.dash-settings-desc {
    max-width: 360px;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#dash-ai-settings-container {
    padding: 14px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border-subtle);
    box-shadow: var(--dash-shadow-sm);
}

#dash-ai-settings-container .dash-settings-desc {
    max-width: none;
}

#dash-ai-settings-container .dash-btn {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 9px;
}

.dash-ai-setup-group {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

.dash-settings-card:nth-child(3) .dash-settings-focus-row {
    margin-bottom: 8px !important;
}

#dash-sync-all-btn {
    min-height: 42px;
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
    border-radius: 10px !important;
    background: rgba(59, 130, 246, 0.11) !important;
    color: #60a5fa !important;
    box-shadow: var(--dash-shadow-sm);
}

#dash-sync-all-btn:hover {
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    background: rgba(59, 130, 246, 0.18) !important;
}

#dash-recover-avatars-btn {
    min-height: 42px;
    margin: 0 0 16px !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(99, 102, 241, 0.28) !important;
    border-radius: 10px !important;
    background: rgba(99, 102, 241, 0.11) !important;
    color: #a5b4fc !important;
    box-shadow: var(--dash-shadow-sm);
}

#dash-recover-avatars-btn:hover {
    color: #c4b5fd !important;
    border-color: rgba(165, 180, 252, 0.5) !important;
    background: rgba(99, 102, 241, 0.18) !important;
}

.dash-settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    overflow: hidden;
    background: var(--dash-border-subtle);
    border: 1px solid var(--dash-border-subtle);
    box-shadow: var(--dash-shadow-sm);
}

.dash-settings-grid-btn {
    min-height: 70px;
    gap: 8px;
    padding: 11px 10px;
    border: 0;
    border-radius: 0;
    background: var(--dash-surface);
    box-shadow: none;
}

.dash-settings-grid-btn:hover {
    z-index: 1;
    transform: none;
    background: var(--dash-surface-hover);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--dash-border-accent);
}

.dash-settings-grid-btn svg {
    width: 16px;
    height: 16px;
}

.dash-grid-title {
    font-size: 12.5px;
    line-height: 1.2;
}

.dash-grid-desc {
    font-size: 11px;
    line-height: 1.2;
}

.dash-settings-card:nth-child(4) {
    padding: 12px !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.dash-settings-card:nth-child(4) .dash-settings-card-header {
    margin-bottom: 6px;
    color: #ef4444 !important;
}

.dash-settings-card:nth-child(4) p {
    margin: 0 0 10px !important;
    color: var(--dash-text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

#dash-settings-wipe-data {
    min-height: 40px;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.34) !important;
}

#dash-settings-sub-btn,
#dash-settings-logout-btn {
    min-height: 46px;
    border-radius: 12px !important;
    box-shadow: var(--dash-shadow-sm);
}

#dash-settings-sub-btn {
    background: rgba(59, 130, 246, 0.11) !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
}

#dash-settings-sub-btn:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

#dash-settings-logout-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.24) !important;
}

#dash-settings-logout-btn:hover {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.46) !important;
}

#dash-settings-sub-btn + div,
#dash-settings-logout-btn + div {
    display: none;
}

[data-rn-theme="light"] .dash-settings-content {
    background: #f7f8fa;
}

[data-rn-theme="light"] .dash-settings-focus-row,
[data-rn-theme="light"] #dash-ai-settings-container,
[data-rn-theme="light"] .dash-settings-grid-btn,
[data-rn-theme="light"] #dash-settings-sub-btn {
    background: #ffffff !important;
}

[data-rn-theme="light"] #dash-sync-all-btn,
[data-rn-theme="light"] #dash-settings-sub-btn {
    background: #eff6ff !important;
}

[data-rn-theme="light"] #dash-recover-avatars-btn {
    background: #f5f3ff !important;
}

[data-rn-theme="light"] #dash-settings-logout-btn,
[data-rn-theme="light"] #dash-settings-wipe-data {
    background: #fff1f2 !important;
}

[data-rn-theme="light"] .dash-settings-grid {
    background: #e5e7eb;
    border-color: #e5e7eb;
}

[data-rn-theme="light"] .dash-settings-grid-btn:hover,
[data-rn-theme="light"] #dash-sync-all-btn:hover {
    background: #f3f4f6 !important;
}

@media (max-width: 560px) {
    .dash-settings-modal {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    .dash-settings-content {
        padding: 16px;
    }

    .dash-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MV3 CSP-safe hover states for dashboard templates. */
.modal-empty-intel-link:hover {
    background: rgba(45, 136, 255, 0.07) !important;
    border-color: rgba(45, 136, 255, 0.4) !important;
    color: var(--dash-accent) !important;
}

.modal-timeline-link:hover,
.modal-timeline-attach-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.modal-att-download:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

.modal-att-del:hover,
#dash-edit-activity-delete:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

#modal-attach-upload-label:hover {
    background: rgba(45, 136, 255, 0.07) !important;
}

#modal-phone-link:hover {
    background: rgba(16, 185, 129, 0.2) !important;
}

.modal-email-link:hover {
    background: rgba(45, 136, 255, 0.2) !important;
}

.rn-timeline-link:hover,
.rn-timeline-attach-btn:hover {
    background: var(--rn-hover-bg, rgba(255, 255, 255, 0.1)) !important;
}

/* ===== FULL SYNC PROGRESS ===== */
.dash-sync-progress {
    --sync-blue: #2d88ff;
    width: min(420px, calc(100vw - 32px));
    position: relative;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    padding: 18px;
    color: var(--dash-text-primary);
    background: var(--dash-surface-elevated);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--dash-surface-elevated) 94%, var(--sync-blue) 6%),
        var(--dash-surface-elevated));
    border: 1px solid var(--dash-border);
    border: 1px solid color-mix(in srgb, var(--sync-blue) 28%, var(--dash-border));
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22),
        0 8px 24px rgba(45, 136, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 220ms var(--rn-ease-standard),
        transform 260ms var(--rn-ease-standard),
        border-color 220ms ease;
    isolation: isolate;
}

.dash-sync-progress.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dash-sync-progress-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -110px;
    right: -70px;
    z-index: -1;
    border-radius: 50%;
    background: rgba(45, 136, 255, 0.24);
    filter: blur(34px);
    pointer-events: none;
    animation: dash-sync-glow-breathe 2.8s ease-in-out infinite;
}

.dash-sync-progress-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-sync-progress-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg, #4aa0ff, #1877f2);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(45, 136, 255, 0.3);
}

.dash-sync-progress-mark svg {
    width: 20px;
    height: 20px;
    animation: none;
    transform: none;
}

.dash-sync-progress.is-syncing .dash-sync-progress-mark svg {
    animation: dash-sync-icon-turn 1.15s linear infinite;
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform;
}

.dash-sync-progress-heading {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.dash-sync-progress-heading strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.dash-sync-progress-heading span {
    color: var(--dash-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.dash-sync-progress-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dash-sync-progress-control {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: var(--dash-text-muted);
    background: var(--dash-surface);
    background: color-mix(in srgb, var(--dash-surface) 84%, transparent);
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.dash-sync-progress-control:hover {
    color: var(--dash-text-primary);
    border-color: var(--dash-accent);
    border-color: color-mix(in srgb, var(--sync-blue) 45%, var(--dash-border));
    background: color-mix(in srgb, var(--sync-blue) 8%, var(--dash-surface));
}

.dash-sync-progress-control:focus-visible {
    outline: 2px solid #2d88ff;
    outline: 2px solid color-mix(in srgb, var(--sync-blue) 78%, white);
    outline-offset: 2px;
}

.dash-sync-progress-control svg {
    width: 15px;
    height: 15px;
    animation: none !important;
    transform: none !important;
    will-change: auto;
}

.dash-sync-progress-control svg * {
    animation: none !important;
    transform: none !important;
}

.dash-sync-progress-compact {
    min-width: 0;
    margin-top: 10px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dash-sync-progress-compact-copy {
    min-width: 0;
    display: flex;
    padding: 0;
    flex-direction: column;
    flex: 1;
    gap: 1px;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dash-sync-progress-compact-copy strong,
.dash-sync-progress-compact-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-sync-progress-compact-copy strong {
    color: var(--dash-text-primary);
    font-size: 12px;
    font-weight: 760;
}

.dash-sync-progress-compact-copy span {
    color: var(--dash-text-muted);
    font-size: 11px;
}

#dash-sync-progress-compact-count {
    flex: 0 0 auto;
    color: var(--sync-blue);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dash-sync-progress-compact-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dash-sync-progress-cancel {
    display: none;
    min-height: 30px;
    padding: 5px 9px;
    color: var(--dash-text-secondary);
    background: color-mix(in srgb, var(--dash-surface) 88%, transparent);
    border: 1px solid var(--dash-border);
    border-radius: 9px;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.dash-sync-progress-cancel:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.06);
}

.dash-sync-progress-cancel:disabled {
    cursor: default;
    opacity: 0.62;
}

.dash-sync-progress-current {
    min-height: 46px;
    margin-top: 16px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.dash-sync-progress-current-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dash-sync-progress-current-copy span {
    color: var(--sync-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.dash-sync-progress-current-copy strong {
    max-width: 310px;
    overflow: hidden;
    color: var(--dash-text-primary);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dash-sync-progress-count {
    flex: 0 0 auto;
    color: var(--dash-text-secondary);
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.dash-sync-progress-track {
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    background: var(--dash-border);
    background: color-mix(in srgb, var(--dash-border) 72%, transparent);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dash-sync-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,
        #126fe8 0%,
        #2d88ff 28%,
        #78bdff 46%,
        #2d88ff 64%,
        #126fe8 100%);
    background-size: 220% 100%;
    border-radius: inherit;
    box-shadow: 0 0 10px rgba(45, 136, 255, 0.28);
    transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}

.dash-sync-progress.is-syncing .dash-sync-progress-bar {
    animation: dash-sync-progress-flow 1.6s linear infinite;
}

.dash-sync-progress-steps {
    margin-top: 15px;
    display: grid;
    gap: 7px;
}

.dash-sync-progress-step {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 600;
    transition: color 160ms ease;
}

.dash-sync-progress-step.is-active {
    color: var(--dash-text-primary);
    animation: dash-sync-stage-enter 300ms var(--rn-ease-out) both;
}

.dash-sync-progress-step.is-complete {
    color: #2d88ff;
    color: color-mix(in srgb, var(--sync-blue) 84%, var(--dash-text-primary));
}

.dash-sync-step-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid var(--dash-border);
    border: 1px solid color-mix(in srgb, var(--dash-text-muted) 45%, transparent);
    border-radius: 50%;
}

.dash-sync-step-icon::after {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: 50%;
    opacity: 0;
}

.dash-sync-step-dot {
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
}

.dash-sync-progress-step.is-active .dash-sync-step-icon {
    color: var(--sync-blue);
    border-color: var(--dash-accent);
    border-color: color-mix(in srgb, var(--sync-blue) 55%, transparent);
    box-shadow: 0 0 0 2px rgba(45, 136, 255, 0.07);
}

.dash-sync-progress-step.is-active .dash-sync-step-icon::after {
    border-color: rgba(45, 136, 255, 0.34);
    animation: dash-sync-step-ring 1.8s ease-out infinite;
}

.dash-sync-progress-step.is-active .dash-sync-step-dot {
    animation: dash-sync-step-pulse 1.25s ease-in-out infinite;
}

.dash-sync-progress-step.is-complete .dash-sync-step-icon {
    color: var(--sync-blue);
    background: rgba(45, 136, 255, 0.11);
    border-color: rgba(45, 136, 255, 0.34);
    box-shadow: none;
}

.dash-sync-progress-step.is-complete .dash-sync-step-dot {
    width: 6px;
    height: 6px;
}

.dash-sync-progress-summary {
    margin-top: 14px;
    padding: 12px;
    color: var(--dash-text-secondary);
    background: var(--dash-surface);
    background: color-mix(in srgb, var(--sync-blue) 7%, var(--dash-surface));
    border: 1px solid var(--dash-border);
    border: 1px solid color-mix(in srgb, var(--sync-blue) 16%, var(--dash-border));
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.dash-sync-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dash-sync-report-metric {
    min-width: 0;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--dash-surface-elevated);
    background: color-mix(in srgb, var(--sync-blue) 5%, var(--dash-surface-elevated));
    border: 1px solid var(--dash-border);
    border: 1px solid color-mix(in srgb, var(--sync-blue) 12%, var(--dash-border));
    border-radius: 10px;
}

.dash-sync-report-metric strong {
    color: var(--dash-text-primary);
    font-size: 16px;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.dash-sync-report-metric span {
    color: var(--dash-text-muted);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.3;
}

.dash-sync-report-notices {
    margin-top: 10px;
    padding-top: 9px;
    display: grid;
    gap: 7px;
    border-top: 1px solid var(--dash-border);
    border-top: 1px solid color-mix(in srgb, var(--sync-blue) 12%, var(--dash-border));
}

.dash-sync-report-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--dash-text-secondary);
    font-weight: 600;
}

.dash-sync-report-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 1px;
    color: var(--sync-blue);
}

.dash-sync-profile-visit > div {
    min-width: 0;
}

.dash-sync-profile-visit > div > span {
    display: block;
    line-height: 1.5;
}

.dash-sync-profile-people {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dash-sync-profile-people a,
.dash-sync-profile-people > span {
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    color: var(--sync-blue);
    background: rgba(45, 136, 255, 0.08);
    border: 1px solid rgba(45, 136, 255, 0.18);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-sync-profile-people a:hover {
    background: rgba(45, 136, 255, 0.14);
    border-color: rgba(45, 136, 255, 0.34);
}

.dash-sync-progress.is-success,
.dash-sync-progress.is-partial {
    --sync-blue: #2d88ff;
    border-color: rgba(45, 136, 255, 0.34);
}

.dash-sync-progress.is-success .dash-sync-progress-mark,
.dash-sync-progress.is-partial .dash-sync-progress-mark {
    background: linear-gradient(145deg, #4aa0ff, #1877f2);
    box-shadow: 0 8px 18px rgba(45, 136, 255, 0.26);
}

.dash-sync-progress.is-success .dash-sync-progress-mark svg,
.dash-sync-progress.is-partial .dash-sync-progress-mark svg,
.dash-sync-progress.is-error .dash-sync-progress-mark svg {
    animation: none;
}

.dash-sync-progress.is-success .dash-sync-progress-mark .dash-sync-finished-check,
.dash-sync-progress.is-partial .dash-sync-progress-mark .dash-sync-finished-check {
    animation: dash-sync-finish-pop 480ms var(--dash-spring-soft) both;
    transform-box: fill-box;
    transform-origin: center center;
}

.dash-sync-progress.is-success .dash-sync-progress-bar,
.dash-sync-progress.is-partial .dash-sync-progress-bar {
    background: linear-gradient(90deg, #1877f2 0%, #2d88ff 62%, #58adff 100%);
}

.dash-sync-progress.is-error {
    --sync-blue: #ef4444;
    border-color: rgba(239, 68, 68, 0.34);
}

.dash-sync-progress.is-cancelled {
    --sync-blue: #64748b;
    border-color: rgba(100, 116, 139, 0.32);
}

.dash-sync-progress.is-error .dash-sync-progress-mark {
    background: linear-gradient(145deg, #fb7185, #dc2626);
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.24);
}

.dash-sync-progress.is-minimized {
    width: min(360px, calc(100vw - 32px));
    max-height: none;
    overflow: hidden;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.2),
        0 5px 16px rgba(45, 136, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.dash-sync-progress.is-minimized .dash-sync-progress-glow,
.dash-sync-progress.is-minimized .dash-sync-progress-current,
.dash-sync-progress.is-minimized .dash-sync-progress-steps,
.dash-sync-progress.is-minimized .dash-sync-progress-summary,
.dash-sync-progress.is-minimized .dash-sync-progress-heading span {
    display: none;
}

.dash-sync-progress.is-minimized .dash-sync-progress-head {
    gap: 9px;
}

.dash-sync-progress.is-minimized .dash-sync-progress-mark {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 10px;
}

.dash-sync-progress.is-minimized .dash-sync-progress-mark svg {
    width: 17px;
    height: 17px;
}

.dash-sync-progress.is-minimized .dash-sync-progress-heading strong {
    font-size: 13px;
}

.dash-sync-progress.is-minimized .dash-sync-progress-compact {
    display: flex;
}

.dash-sync-progress.is-minimized .dash-sync-progress-track {
    height: 5px;
    margin-top: 8px;
}

.dash-sync-progress.is-minimized.is-syncing .dash-sync-progress-close {
    display: none;
}

.dash-sync-progress.is-minimized.is-syncing .dash-sync-progress-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes dash-sync-step-ring {
    0% { opacity: 0; transform: scale(0.94); }
    24% { opacity: 0.24; }
    100% { opacity: 0; transform: scale(1.55); }
}

@keyframes dash-sync-icon-turn {
    to { transform: rotate(360deg); }
}

@keyframes dash-sync-progress-flow {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@keyframes dash-sync-glow-breathe {
    0%, 100% { opacity: 0.58; transform: scale(0.92); }
    50% { opacity: 0.94; transform: scale(1.08); }
}

@keyframes dash-sync-step-pulse {
    0%, 100% { opacity: 0.48; transform: scale(0.78); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes dash-sync-stage-enter {
    from { opacity: 0.58; transform: translateX(-3px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dash-sync-finish-pop {
    0% { opacity: 0; transform: scale(0.55) rotate(-10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 520px) {
    .dash-sync-progress {
        width: calc(100vw - 24px);
        padding: 16px;
        border-radius: 18px;
    }

    .dash-sync-progress-current-copy strong {
        max-width: 230px;
    }
}

@media (max-height: 520px) {
    #dash-toast-container {
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    .dash-sync-progress {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 13px 15px;
        border-radius: 16px;
        overscroll-behavior: contain;
    }

    .dash-sync-progress-current {
        min-height: 38px;
        margin-top: 10px;
    }

    .dash-sync-progress-steps {
        margin-top: 11px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
    }

    .dash-sync-progress-summary {
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-sync-progress,
    .dash-sync-progress-bar,
    .dash-sync-progress-step {
        transition-duration: 0.01ms !important;
    }

    .dash-sync-progress-mark svg,
    .dash-sync-progress-glow,
    .dash-sync-progress-bar,
    .dash-sync-progress-step.is-active,
    .dash-sync-progress-step.is-active .dash-sync-step-icon::after,
    .dash-sync-progress-step.is-active .dash-sync-step-dot,
    .dash-sync-progress .dash-sync-finished-check {
        animation: none !important;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .dash-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dash-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .dash-search-wrapper {
        width: 100%;
        order: 3;
    }

    .dash-main {
        padding: 20px 16px;
    }

    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-contacts-grid {
        grid-template-columns: 1fr;
    }

    .dash-filter-section {
        flex-direction: column;
    }
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dash-accent) 72%, white);
    outline-offset: 3px;
}

.dash-digest-section,
.dash-orbit-section,
.dash-stat-card,
.dash-contact-card {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════
   DAILY DIGEST — Executive Brief Card
   ═══════════════════════════════════════════════════ */

.dash-digest-section {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--dash-shadow-sm);
    position: relative;
}

.dash-digest-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #2d88ff, #10b981);
    border-radius: var(--dash-radius-lg) var(--dash-radius-lg) 0 0;
}

.dash-digest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--dash-surface);
    border-bottom: 1px solid var(--dash-border-subtle);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.dash-digest-header:hover {
    background: var(--dash-surface-elevated);
}

.dash-digest-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--dash-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dash-digest-header:hover::before {
    opacity: 1;
}

.dash-digest-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-digest-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(24, 119, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dash-accent);
    border: 1px solid rgba(24, 119, 242, 0.2);
}

.dash-digest-icon-wrap svg {
    stroke: currentColor;
    width: 20px;
    height: 20px;
}

.dash-digest-title h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-text-primary);
    margin: 0;
}

.dash-digest-date {
    font-size: 14px;
    color: var(--dash-text-muted);
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

.dash-digest-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dash-text-muted);
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.dash-digest-toggle:hover {
    background: var(--dash-surface-hover);
    color: var(--dash-text-primary);
}

.dash-digest-body {
    padding: 0;
    animation: dash-digest-open 0.3s ease;
}

@keyframes dash-digest-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* ── Greeting & Health ── */
.digest-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--dash-border-subtle);
    gap: 20px;
}

.digest-greeting-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.digest-greeting-hello {
    font-size: 24px;
    font-weight: 800;
    color: var(--dash-text-primary);
}

.digest-greeting-summary {
    font-size: 16px;
    color: var(--dash-text-secondary);
    line-height: 1.6;
}

.digest-health {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.digest-health-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--health-color) var(--health-pct), var(--dash-surface-elevated) var(--health-pct));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}

.digest-health-ring:hover {
    transform: scale(1.08);
}

.digest-health-ring::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--dash-surface);
}

.digest-health-score {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 800;
    color: var(--dash-text-primary);
}

.digest-health-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Sections ── */
.digest-section {
    border-top: 1px solid var(--dash-border-subtle);
}

.digest-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--dash-text-muted);
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}

.digest-section-header:hover {
    background: var(--dash-surface-hover);
}

.digest-header-urgent {
    border-left-color: #ef4444;
    color: #ef4444;
}

.digest-header-pulse {
    border-left-color: var(--dash-accent);
    color: var(--dash-accent);
}

.digest-header-motion {
    border-left-color: #a855f7;
    color: #a855f7;
}

.digest-header-radar {
    border-left-color: #f59e0b;
    color: #f59e0b;
}

.digest-header-data {
    border-left-color: #10b981;
    color: #10b981;
}

.digest-section-count {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
    text-transform: none;
}

.digest-section-body {
    padding: 0 0 10px;
}

/* ── Contact Rows ── */
.digest-contact-row,
.digest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.digest-contact-row:hover {
    background: var(--dash-surface-hover);
    padding-left: 25px;
}

.digest-row-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.digest-row-avatar-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.digest-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--dash-border);
}

.digest-row-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-surface-elevated), var(--dash-surface-hover));
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--dash-border);
}

.digest-row-text {
    font-size: 15.5px;
    color: var(--dash-text-secondary);
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

.digest-row-text strong {
    color: var(--dash-text-primary);
    font-weight: 600;
}

.digest-ai-hint {
    appearance: none;
    border: 0;
    padding: 2px 3px;
    margin: 0 0 0 4px;
    background: transparent;
    color: var(--dash-accent-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    vertical-align: baseline;
}

.digest-ai-hint:hover,
.digest-ai-hint:focus-visible {
    background: rgba(45, 136, 255, 0.12);
    outline: none;
}

.digest-ai-hint:disabled {
    cursor: wait;
    opacity: 0.75;
}

.digest-draft-container {
    margin: 4px 22px 8px 67px;
    padding: 10px;
    background: rgba(24, 119, 242, 0.06);
    border-left: 2px solid var(--dash-accent);
    border-radius: 4px;
    font-size: 12px;
    color: var(--dash-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    cursor: default;
}

.digest-draft-container.digest-draft-error {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #ef4444;
    color: #ef4444;
}

.digest-draft-text {
    line-height: 1.4;
}

.digest-draft-actions {
    display: flex;
    justify-content: flex-end;
}

.rn-copy-draft-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--dash-accent);
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.rn-copy-draft-btn:hover {
    opacity: 0.85;
}

.rn-copy-draft-btn.copied {
    background: #10b981;
}

/* Type-specific left accent on hover */
.digest-type-birthday:hover {
    border-left-color: #f59e0b;
}

.digest-type-reminder:hover {
    border-left-color: #ef4444;
}

.digest-contact-row.overdue {
    background: rgba(239, 68, 68, 0.06);
    border-left-color: #ef4444;
}

.digest-contact-row.overdue .digest-row-text,
.digest-danger-text {
    color: #ef4444;
    font-weight: 800;
}

.digest-type-quiet-priority:hover {
    border-left-color: #ef4444;
}

.digest-type-follow-up:hover {
    border-left-color: #f7b928;
}

.digest-type-new:hover {
    border-left-color: #10b981;
}

.digest-type-profile-change:hover {
    border-left-color: #a855f7;
}

.digest-type-quiet:hover {
    border-left-color: #6b7280;
}

/* ── Stats Grid ── */
.digest-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 8px 22px 12px;
}

.digest-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border-subtle);
    transition: all 0.2s ease;
}

.digest-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-sm);
}

.digest-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--dash-text-primary);
}

.digest-stat-label {
    font-size: 12px;
    color: var(--dash-text-muted);
    text-align: center;
    margin-top: 4px;
    font-weight: 600;
    
    
}

.digest-trend {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 22px 10px;
}

/* ── Completeness Bars ── */
.digest-completeness {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 22px 8px;
}

.digest-complete-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.digest-complete-item span {
    font-size: 14px;
    color: var(--dash-text-secondary);
    white-space: nowrap;
    min-width: 220px;
    font-weight: 500;
}

.digest-complete-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--dash-surface-elevated);
    overflow: hidden;
    border: 1px solid var(--dash-border-subtle);
}

.digest-complete-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Info row (no avatar) ── */
.digest-row-info {
    padding: 10px 22px;
}

.digest-row-info .digest-row-text {
    font-size: 13px;
}

/* ── Empty state ── */
.digest-empty-state {
    text-align: center;
    padding: 32px 22px;
    color: var(--dash-text-muted);
}

.digest-empty-state .digest-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.7;
}

.digest-empty-state .digest-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text-secondary);
    margin-bottom: 6px;
}

.digest-empty-state .digest-empty-hint {
    font-size: 13px;
    line-height: 1.5;
    max-width: 360px;
    margin: 0 auto;
}

@media (max-width: 700px) {
    .digest-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .digest-greeting {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════
   NETWORK ORBIT — Relationship Heatmap
   ═══════════════════════════════════════════════════ */

.dash-orbit-section {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--dash-shadow-sm);
    position: relative;
}

.dash-orbit-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a855f7, #f02849, #10b981, #6b7280);
    border-radius: var(--dash-radius-lg) var(--dash-radius-lg) 0 0;
}

.dash-orbit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--dash-surface);
    border-bottom: 1px solid var(--dash-border-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.dash-orbit-header:hover {
    background: var(--dash-surface-elevated);
}

.dash-orbit-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--dash-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dash-orbit-header:hover::before {
    opacity: 1;
}

.dash-orbit-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-orbit-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(24, 119, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dash-accent);
    border: 1px solid rgba(24, 119, 242, 0.2);
}

.dash-orbit-icon-wrap svg {
    stroke: currentColor;
    width: 20px;
    height: 20px;
}

.dash-orbit-title h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-text-primary);
    margin: 0;
    
}

.dash-orbit-subtitle {
    font-size: 14px;
    color: var(--dash-text-muted);
    font-weight: 400;
    margin-top: 1px;
}

.dash-orbit-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dash-text-muted);
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.dash-orbit-toggle:hover {
    background: var(--dash-surface-hover);
    color: var(--dash-text-primary);
}

.dash-orbit-body {
    position: relative;
    padding: 20px;
    animation: dash-digest-open 0.3s ease;
}

#dash-orbit-canvas {
    width: 100%;
    border-radius: var(--dash-radius-md);
    display: block;
}

.dash-orbit-legend {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 20px 0 12px;
    flex-wrap: wrap;
}

.dash-orbit-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dash-text-primary);
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    padding: 8px 16px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.dash-orbit-legend-item:hover {
    transform: translateY(-2px);
    border-color: var(--dash-border-hover);
    box-shadow: var(--dash-shadow-md);
}

.dash-orbit-legend-label {
    color: var(--dash-text-primary);
    font-weight: 600;
    margin-right: 2px;
}

.dash-orbit-legend-count {
    background: var(--dash-surface-hover);
    color: var(--dash-text-primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.dash-orbit-legend-desc {
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 400;
    margin-left: 2px;
}

.dash-orbit-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-orbit-tooltip {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: rgba(36, 37, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    font-size: 13px;
    color: var(--dash-text-primary);
    pointer-events: none;
    z-index: 100000;
    width: 240px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center left;
}

[data-rn-theme="light"] .dash-orbit-tooltip {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.dash-orbit-tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.dash-orbit-tooltip-name {
    font-size: 15px;
    font-weight: 700;
    
    color: var(--dash-text-primary);
}

.dash-orbit-tooltip-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    
}

.dash-orbit-tooltip-meta {
    font-size: 12px;
    color: var(--dash-text-muted);
    font-weight: 400;
}

.dash-orbit-tooltip-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dash-text-secondary);
    font-style: italic;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 4px;
    border-left: 2px solid var(--dash-accent);
}

[data-rn-theme="light"] .dash-orbit-tooltip-note {
    background: rgba(0, 0, 0, 0.03);
}

/* ── Orbit empty state ── */
.dash-orbit-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--dash-text-muted);
}

.dash-orbit-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.dash-orbit-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-text-secondary);
    margin-bottom: 6px;
}

.dash-orbit-empty-hint {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}

/* ====================================================
   PREMIUM CSS TOOLTIPS — Single canonical definition
   ==================================================== */
.rn-tooltip,
[data-tooltip] {
    position: relative;
}

/* Fix for CSP issues on notifications */
.dash-notif-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 14px 12px;
}

.dash-notif-summary-card {
    min-width: 0;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--dash-border, rgba(255,255,255,0.1));
    background: var(--dash-surface-elevated, rgba(255,255,255,0.04));
    position: relative;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-notif-summary-card:hover {
    z-index: 1;
    transform: translateY(-4px) scale(1.02);
    border-color: var(--dash-border-accent);
    box-shadow: var(--dash-shadow-lg);
}

.dash-notif-summary-card strong {
    display: block;
    color: var(--dash-text-primary, #e4e6eb);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
    margin-bottom: 4px;
}

.dash-notif-summary-card span {
    display: block;
    color: var(--dash-text-muted, #8a8d91);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-notif-summary-card.urgent {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.07);
}

.dash-notif-summary-card.birthday {
    border-color: rgba(244, 114, 182, 0.24);
    background: rgba(244, 114, 182, 0.07);
}

.dash-notif-summary-card.followups.overdue {
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(239, 68, 68, 0.095);
}

.dash-notif-summary-card.followups.overdue strong,
.dash-notif-summary-card.followups.overdue span {
    color: #ef4444;
}

.dash-notif-section {
    padding: 0 14px 10px;
}

.dash-notif-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    color: var(--dash-text-muted, #8a8d91);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.dash-notif-section-title span:not(.dash-notif-section-dot) {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--dash-surface-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--dash-border, rgba(255,255,255,0.1));
    color: var(--dash-text-secondary, #b0b3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: 0;
}

.dash-notif-section-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-notif-section-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--dash-notif-border, var(--dash-border, rgba(255,255,255,0.1)));
    border-left: 4px solid var(--dash-notif-accent, var(--dash-accent));
    background: var(--dash-notif-bg, var(--dash-surface-elevated, rgba(255,255,255,0.04)));
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.dash-notif-item:hover {
    background: color-mix(in srgb, var(--dash-notif-bg, var(--dash-surface-elevated)) 70%, rgba(255,255,255,0.09)) !important;
    transform: translateY(-1px);
}

.dash-notif-item.is-overdue {
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.09);
}

.dash-notif-item.is-overdue .dash-notif-desc {
    color: #f87171;
    font-weight: 800;
}

.dash-notif-item.needs-follow-up .dash-notif-desc {
    color: #fbbf24;
}

.dash-notif-urgent-label,
.dash-notif-needed-label {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.dash-notif-urgent-label {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.dash-notif-needed-label {
    color: #d97706;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.dash-notif-item.past {
    opacity: 0.68;
    filter: grayscale(0.4);
}

.dash-notif-item.past:hover {
    opacity: 1;
    filter: none;
}

.dash-notif-avatar-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    position: relative;
    flex-shrink: 0;
}

.dash-notif-type-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: var(--dash-surface, #242526);
    border: 2px solid var(--dash-surface-elevated, rgba(255,255,255,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.dash-notif-type-badge svg {
    width: 12px;
    height: 12px;
}

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

.dash-notif-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dash-notif-name {
    min-width: 0;
    color: var(--dash-text-primary, #e4e6eb);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-notif-type {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-notif-desc {
    margin-top: 3px;
    color: var(--dash-text-secondary, #b0b3b8);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-notif-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: var(--dash-text-muted, #8a8d91);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-notif-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dash-notif-open,
.dash-notif-restore,
.dash-notif-dismiss {
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--dash-border, rgba(255,255,255,0.1));
    background: var(--dash-surface, #242526);
    color: var(--dash-text-secondary, #b0b3b8);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.dash-notif-open,
.dash-notif-restore {
    padding: 0 10px;
}

.dash-notif-dismiss {
    width: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
}

.dash-notif-open:hover,
.dash-notif-restore:hover {
    color: #2d88ff;
    border-color: rgba(45,136,255,0.35);
    background: rgba(45,136,255,0.1);
}

.dash-notif-dismiss:hover {
    opacity: 1 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

.dash-notif-empty {
    padding: 42px 24px 46px;
    text-align: center;
    color: var(--dash-text-muted, #8a8d91);
}

.dash-notif-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d88ff;
    background: rgba(45,136,255,0.1);
}

.dash-notif-empty-title {
    color: var(--dash-text-primary, #e4e6eb);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 5px;
}

.dash-notif-empty-text {
    max-width: 340px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.45;
}

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

    .dash-notif-item {
        align-items: flex-start;
    }

    .dash-notif-actions {
        flex-direction: column;
    }
}

/* CRITICAL FIX FOR SOLID BLOCK SVG RENDERING BUG */
/* ===== MODAL INPUTS (PREMIUM SIDEBAR PARITY) ===== */
.modal-notes-input,
.modal-tags-input,
.modal-reminder-date {
    width: 100%;
    padding: 14px 18px;
    background: var(--dash-surface-elevated);
    border: 1.5px solid var(--dash-border);
    border-radius: 12px;
    color: var(--dash-text-primary);
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    margin-top: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-rn-theme="light"] .modal-notes-input,
[data-rn-theme="light"] .modal-tags-input,
[data-rn-theme="light"] .modal-reminder-date {
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.modal-notes-input:hover,
.modal-tags-input:hover,
.modal-reminder-date:hover {
    border-color: var(--dash-text-muted);
}

.modal-notes-input:focus,
.modal-tags-input:focus,
.modal-reminder-date:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 4px var(--dash-accent-glow), inset 0 2px 4px rgba(0, 0, 0, 0.05);
    background: var(--dash-surface);
    transform: translateY(-1px);
}

.modal-notes-input::placeholder,
.modal-tags-input::placeholder {
    color: var(--dash-text-muted);
    opacity: 0.6;
}

.modal-notes-input {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.modal-section-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    
    color: var(--dash-text-primary);
    margin-bottom: 4px;
}

/* CRITICAL FIX FOR SOLID BLOCK SVG RENDERING BUG */
.modal-actions button svg *,
.modal-actions a svg *,
.modal-status-grid button svg *,
.modal-context-grid button svg *,
.modal-identity .modal-status-pill svg * {
    fill: none !important;
}

.modal-actions button svg,
.modal-actions a svg,
.modal-status-grid button svg,
.modal-context-grid button svg,
.modal-identity .modal-status-pill svg {
    background: transparent !important;
    fill: none !important;
}

/* ===== PREMIUM CSS TOOLTIPS — Full implementation ===== */
.rn-tooltip,
[data-tooltip] {
    position: relative;
    cursor: default;
}

/* Tooltip bubble — Premium Glassmorphic implementation */
.rn-tooltip::after,
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.95);
    background: rgba(20, 21, 24, 0.85); /* Premium Dark Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 100000;
    pointer-events: none;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.45), 
        0 0 0 1px rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: 
        opacity 0.2s ease, 
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.1s;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.01em;
}

/* Caret (Arrow) */
.rn-tooltip::before,
[data-tooltip]::before {
    content: '';
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(100% + 2px);
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%) translateY(8px);
    border: 6px solid transparent;
    border-top-color: rgba(20, 21, 24, 0.85);
    z-index: 100001;
    opacity: 0;
    transition: 
        opacity 0.2s ease, 
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.1s;
    pointer-events: none;
}

/* Reveal on hover */
.rn-tooltip:hover::after,
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.rn-tooltip:hover::before,
[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Light mode overrides */
[data-rn-theme="light"] .rn-tooltip::after,
[data-rn-theme="light"] [data-tooltip]::after {
    background: rgba(255, 255, 255, 0.92); /* Premium Pearl Glass */
    color: #111827;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12), 
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-rn-theme="light"] .rn-tooltip::before,
[data-rn-theme="light"] [data-tooltip]::before {
    border-top-color: rgba(255, 255, 255, 0.92);
}

/* Pill buttons should keep pointer cursor */
button[data-tooltip],
button.rn-tooltip {
    cursor: pointer;
}

/* Bottom-positioned tooltip (for top-corner earmarks) */
[data-tooltip-pos="bottom"]::after {
    bottom: auto !important;
    top: calc(100% + 10px) !important;
    transform: translateX(-50%) translateY(-8px) scale(0.95) !important;
}

[data-tooltip-pos="bottom"]:hover::after {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

[data-tooltip-pos="bottom"]::before {
    bottom: auto !important;
    top: calc(100% + 2px) !important;
    border-top-color: transparent !important;
    border-bottom-color: rgba(20, 21, 24, 0.85) !important;
    transform: translateX(-50%) translateY(-8px) !important;
}

[data-tooltip-pos="bottom"]:hover::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Left-aligned tooltip (for edge elements) */

/* ===== PWA-CONGRUENT TOOLTIP CARD ===== */
[data-tooltip^="stat-"]::before,
[data-tooltip^="stat-"]::after,
[data-tooltip^="section-"]::before,
[data-tooltip^="section-"]::after,
[data-tooltip^="dc-"]::before,
[data-tooltip^="dc-"]::after,
[data-tooltip="status-in-touch"]::before,
[data-tooltip="status-in-touch"]::after,
[data-tooltip="status-closeties"]::before,
[data-tooltip="status-closeties"]::after {
    display: none !important;
}

#rn-tooltip-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

#rn-tooltip-overlay.visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.25);
}

#rn-tooltip-card {
    position: fixed;
    z-index: 99991;
    left: 16px;
    right: 16px;
    max-width: 380px;
    margin: 0 auto;
    background: rgba(22, 23, 28, 0.97);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}

#rn-tooltip-card.visible {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

[data-rn-theme="light"] #rn-tooltip-card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#rn-tooltip-card .tt-accent-bar {
    height: 3px;
    width: 100%;
    background: var(--tt-accent, linear-gradient(90deg, #2d88ff, #4f46e5, #7c3aed));
}

#rn-tooltip-card .tt-inner {
    padding: 14px 16px 16px;
}

#rn-tooltip-card .tt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#rn-tooltip-card .tt-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--tt-icon-bg, rgba(45, 136, 255, 0.12));
}

#rn-tooltip-card .tt-icon-wrap svg {
    width: 18px;
    height: 18px;
    stroke: var(--tt-icon-color, #5aa7ff);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#rn-tooltip-card .tt-title-block {
    flex: 1;
    min-width: 0;
}

#rn-tooltip-card .tt-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--dash-text-primary);
}

#rn-tooltip-card .tt-value-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--tt-icon-color, #5aa7ff);
    background: var(--tt-icon-bg, rgba(45, 136, 255, 0.12));
    padding: 2px 8px;
    border-radius: 99px;
    margin-top: 2px;
}

#rn-tooltip-card .tt-close {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
}

#rn-tooltip-card .tt-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dash-text-secondary);
}

#rn-tooltip-card .tt-insights {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#rn-tooltip-card .tt-insight-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--dash-text-secondary);
    line-height: 1.45;
}

#rn-tooltip-card .tt-insight-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tt-icon-color, #5aa7ff);
    flex-shrink: 0;
    margin-top: 5px;
}

#rn-tooltip-card .tt-hint {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-weight: 600;
    color: var(--dash-text-muted);
    text-align: center;
}

/* ===== NETWORK HEALTH BREAKDOWN ===== */
#health-breakdown-modal {
    position: fixed;
    inset: 0;
    z-index: 99989;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.health-breakdown-sheet {
    width: min(480px, calc(100% - 24px));
    margin-bottom: 12px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: 20px;
    padding: 24px 20px 20px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
}

.health-breakdown-handle {
    width: 40px;
    height: 4px;
    background: var(--dash-border);
    border-radius: 2px;
    margin: 0 auto 20px;
}

.health-breakdown-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.health-breakdown-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 800;
}

.health-breakdown-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dash-text-primary);
}

.health-breakdown-label {
    font-size: 13px;
    font-weight: 700;
}

.health-breakdown-section-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.health-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.health-breakdown-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--dash-surface-elevated);
    border-left: 3px solid currentColor;
}

.health-breakdown-icon svg {
    width: 18px;
    height: 18px;
}

.health-breakdown-row-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-primary);
    line-height: 1.35;
}

.health-breakdown-row-sub {
    font-size: 12px;
    color: var(--dash-text-muted);
    margin-top: 2px;
}

.health-breakdown-close {
    width: 100%;
    margin-top: 18px;
    padding: 12px;
    border-radius: 12px;
    border: 0;
    background: var(--dash-accent);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
[data-tooltip-align="left"]::after {
    left: 0;
    transform: translateX(0) translateY(8px) scale(0.95);
}
[data-tooltip-align="left"]:hover::after {
    transform: translateX(0) translateY(0) scale(1);
}
[data-tooltip-align="left"]::before {
    left: 16px;
    transform: translateX(0) translateY(8px);
}
[data-tooltip-align="left"]:hover::before {
    transform: translateX(0) translateY(0);
}



/* ══════════════════════════════════════════════════════════════ */
/* ── ORBIT PREMIUM POPUP CARDS                               ── */
/* ══════════════════════════════════════════════════════════════ */

/* SVG line marching-ants animation */
@keyframes orbit-dash-march {
    to { stroke-dashoffset: -24; }
}
#dash-orbit-svg-path {
    animation: orbit-dash-march 0.9s linear infinite;
}

/* Base card shell */
.orbit-popup-card {
    background: rgba(20, 21, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 40px rgba(168, 85, 247, 0.06);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
}
[data-rn-theme="light"] .orbit-popup-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* ── Contact Card: Header ── */
.orbit-popup-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}
[data-rn-theme="light"] .orbit-popup-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.orbit-popup-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, var(--orbit-popup-color-bg, rgba(168,85,247,0.1)) 0%, transparent 65%);
    pointer-events: none;
}
.orbit-popup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--orbit-popup-color, #a855f7);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 16px var(--orbit-popup-color-bg, rgba(168,85,247,0.25));
}
.orbit-popup-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border: 2.5px solid var(--orbit-popup-color, #a855f7);
    box-shadow: 0 0 16px var(--orbit-popup-color-bg, rgba(168,85,247,0.2));
}
.orbit-popup-identity {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.orbit-popup-name {
    font-size: 15px;
    font-weight: 700;
    
    color: var(--dash-text-primary, #e4e6eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.orbit-popup-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    
    
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--orbit-popup-color-bg, rgba(168,85,247,0.12));
    color: var(--orbit-popup-color, #a855f7);
    border: 1px solid var(--orbit-popup-color-bg, rgba(168,85,247,0.2));
}

/* ── Contact Card: Body ── */
.orbit-popup-body {
    padding: 13px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.orbit-popup-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--dash-text-secondary, #b0b3b8);
    line-height: 1.5;
}
.orbit-popup-row-icon {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.45;
}
.orbit-popup-row-text {
    flex: 1;
}
.orbit-popup-row-text strong {
    color: var(--dash-text-primary, #e4e6eb);
    font-weight: 600;
}
.orbit-popup-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--dash-text-secondary, #b0b3b8);
    font-style: italic;
    background: rgba(255, 255, 255, 0.03);
    padding: 9px 11px;
    border-radius: 10px;
    border-left: 3px solid var(--orbit-popup-color, #a855f7);
    margin-top: 2px;
}
[data-rn-theme="light"] .orbit-popup-note {
    background: rgba(0, 0, 0, 0.03);
}
.orbit-popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.orbit-popup-tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--dash-text-muted, #8a8d91);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
[data-rn-theme="light"] .orbit-popup-tag {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    color: #6b7280;
}

/* ── Contact Card: Footer ── */
.orbit-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: var(--dash-text-muted, #8a8d91);
}
[data-rn-theme="light"] .orbit-popup-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}
.orbit-popup-cta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--orbit-popup-color, #a855f7);
    
    
}

/* ── Ring Popup ── */
.orbit-ring-popup-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}
[data-rn-theme="light"] .orbit-ring-popup-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.orbit-ring-popup-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, var(--orbit-popup-color-bg, rgba(168,85,247,0.1)) 0%, transparent 65%);
    pointer-events: none;
}
.orbit-ring-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--orbit-popup-color, #a855f7);
    box-shadow: 0 0 14px var(--orbit-popup-color, #a855f7);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.orbit-ring-label {
    font-size: 14px;
    font-weight: 700;
    
    color: var(--dash-text-primary, #e4e6eb);
    position: relative;
    z-index: 1;
}
.orbit-ring-count-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--orbit-popup-color-bg, rgba(168,85,247,0.12));
    color: var(--orbit-popup-color, #a855f7);
    border: 1px solid var(--orbit-popup-color-bg, rgba(168,85,247,0.2));
    position: relative;
    z-index: 1;
}
.orbit-ring-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 12px 16px 10px;
}
.orbit-ring-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-secondary, #b0b3b8);
}
[data-rn-theme="light"] .orbit-ring-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.07);
}
.orbit-ring-chip-pic {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.orbit-ring-chip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    overflow: hidden;
    position: relative;
}
.orbit-ring-chip-initial {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.orbit-ring-desc {
    padding: 0 16px 14px;
    font-size: 12px;
    color: var(--dash-text-muted, #8a8d91);
    line-height: 1.55;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}
[data-rn-theme="light"] .orbit-ring-desc {
    border-top-color: rgba(0, 0, 0, 0.06);
}
.orbit-ring-empty {
    padding: 14px 16px;
    font-size: 12.5px;
    color: var(--dash-text-muted, #8a8d91);
    text-align: center;
    font-style: italic;
}
/* ===== CUSTOM CONFIRMATION DIALOG ===== */
.dash-confirm-overlay {
    position: fixed;
    inset: 0;
    background: var(--dash-overlay-bg);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: dash-fade-in 250ms ease-out;
}

.dash-confirm-modal {
    background: var(--dash-modal-bg);
    border: 1px solid var(--dash-modal-border);
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    padding: 28px;
    box-shadow: var(--dash-modal-shadow);
    transform-origin: center;
    animation: dash-modal-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dash-modal-pop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dash-confirm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.dash-confirm-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-confirm-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--dash-text-primary);
    
}

.dash-confirm-body {
    font-size: 15px;
    line-height: 1.5;
    color: var(--dash-text-secondary);
    margin-bottom: 28px;
}

.dash-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.dash-confirm-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 150ms ease;
    border: 1px solid transparent;
}

.dash-confirm-btn-cancel {
    background: var(--dash-surface-elevated);
    color: var(--dash-text-primary);
    border-color: var(--dash-border);
}

.dash-confirm-btn-cancel:hover {
    background: var(--dash-surface-hover);
    border-color: var(--dash-border-accent);
}

.dash-confirm-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.dash-confirm-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
    filter: brightness(1.1);
}

.dash-confirm-btn-primary {
    background: var(--dash-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(45, 136, 255, 0.25);
}

.dash-confirm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(45, 136, 255, 0.35);
    filter: brightness(1.1);
}

/* ===== TOAST NOTIFICATIONS ===== */
.dash-toast {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 10px;
    padding-right: 32px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-border-subtle);
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    pointer-events: auto;
    animation: dash-toast-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    max-width: fit-content;
}

@keyframes dash-toast-enter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

.dash-toast.exit {
    animation: dash-toast-exit 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dash-toast-exit {
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
        filter: blur(8px);
    }
}

.dash-toast-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dash-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(45, 136, 255, 0.25);
    flex-shrink: 0;
}

.dash-toast-icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.dash-toast-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--dash-text-primary);
    white-space: nowrap;
    
}

/* ===== SELECTION MODE UI ===== */
.selection-mode .dash-card-checkbox-wrapper {
    display: flex;
}

/* Floating Glassmorphic Bulk Action Island */
.dash-bulk-island {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translate(-50%, 150px) scale(0.95);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border-accent);
    border-radius: 16px;
    padding: 12px 24px;
    box-shadow: var(--dash-shadow-lg);
    width: max-content;
    min-width: 480px;
}

.dash-bulk-island.visible {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.dash-bulk-delete-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-bulk-delete-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.dash-card-checkbox-wrapper {
    display: none; /* Only visible in selection mode */
    position: absolute;
    top: 12px;
    left: 12px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--dash-border);
    background: var(--dash-surface);
    z-index: 20;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-card-checkbox-wrapper svg {
    width: 14px;
    height: 14px;
    stroke: white;
    stroke-width: 3;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base card changes when in selection mode */
.selection-mode .dash-contact-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer !important;
}
.selection-mode .dash-contact-card:hover {
    border-color: var(--dash-border-accent);
}

/* Selected State styling */
.selection-mode .dash-contact-card.selected {
    border-color: var(--dash-accent);
    background: rgba(24, 119, 242, 0.08); /* Faint blue using static rgba since -rgb doesn't exist */
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.15);
}

.selection-mode .dash-contact-card.selected .dash-card-checkbox-wrapper {
    background: var(--dash-accent);
    border-color: var(--dash-accent);
    transform: scale(1.05);
}

.selection-mode .dash-contact-card.selected .dash-card-checkbox-wrapper svg {
    opacity: 1;
    transform: scale(1);
}

/* Hide specific elements during selection mode to reduce clutter */
.selection-mode .dash-card-quick-actions {
    display: none !important;
}

/* Custom Checkbox Styling (replaces native white box) */
.dash-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--dash-border);
    border-radius: 4px;
    background: var(--dash-surface);
    cursor: pointer;
    position: relative;
    outline: none;
    margin: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-checkbox:checked, .dash-checkbox:indeterminate {
    background: var(--dash-accent);
    border-color: var(--dash-accent);
}

.dash-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dash-checkbox:indeterminate::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

/* ===== AVATAR RECOVERY MODAL ===== */
#avatar-recovery-modal .dash-modal {
    max-width: 480px !important;
    padding: 28px;
    text-align: center;
    border-radius: 20px;
}

#avatar-recovery-modal h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dash-text-primary);
}

#avatar-recovery-modal p {
    font-size: 14px;
    color: var(--dash-text-muted);
    margin-bottom: 22px;
}

.recovery-progress-track {
    background: var(--dash-border, rgba(255,255,255,0.08));
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

.recovery-progress-bar {
    background: linear-gradient(90deg, #6366f1, #2d88ff);
    width: 0%;
    height: 100%;
    transition: width 0.3s ease;
}

.recovery-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-text-primary);
    margin-bottom: 16px;
}

.recovery-note-box {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    background: var(--dash-surface-elevated, rgba(255,255,255,0.03));
    border: 1px solid var(--dash-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 12px 14px;
    line-height: 1.45;
    text-align: left;
    margin-bottom: 24px;
}

/* ===== SOCIAL HOME DROPDOWN ===== */
.dash-dropdown-container {
    position: relative;
    display: inline-block;
}

.dash-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--dash-surface, #242526);
    border: 1px solid var(--dash-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    min-width: 160px;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 4px;
    transform-origin: top right;
    animation: dash-dropdown-show 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dash-dropdown-show {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dash-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dash-text-primary, #e4e6eb);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.dash-dropdown-item:hover {
    background: var(--dash-surface-elevated, rgba(255, 255, 255, 0.06));
    color: #ffffff;
}

.platform-icon {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ====================================================
   DASHBOARD MODAL NOTE LOG STYLES
   ==================================================== */
.modal-notes-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.modal-note-card {
    background: var(--dash-surface-elevated);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-md);
    padding: 14px;
    box-shadow: var(--dash-shadow-sm);
    transition: all 180ms ease;
    box-sizing: border-box;
}

.modal-note-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: var(--dash-border-accent);
}

.modal-note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--dash-border-subtle);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.modal-note-card-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-note-card-edit-btn,
.modal-note-card-delete-btn,
.modal-note-card-cancel-btn,
.modal-note-card-save-btn {
    transition: all 150ms ease;
}

.modal-note-card-edit-btn:hover,
.modal-note-card-delete-btn:hover {
    color: var(--dash-accent) !important;
}

.modal-note-card-delete-btn:hover {
    color: #f43f5e !important;
}

.modal-note-card-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--dash-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Settings rescue override: keep the modal in normal document flow. */
#dash-settings-overlay {
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
}

#dash-settings-modal.dash-settings-modal {
    width: min(640px, calc(100vw - 32px)) !important;
    max-width: min(640px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#dash-settings-modal .dash-settings-header {
    flex: 0 0 auto !important;
}

#dash-settings-content.dash-settings-content {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 20px 24px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-padding-top: 20px;
}

#dash-settings-content > .dash-settings-card {
    order: 0 !important;
    display: block !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

#dash-settings-content > .dash-settings-card::before {
    content: none !important;
    display: none !important;
}

#dash-settings-content > .dash-settings-card:last-child {
    margin-bottom: 0 !important;
}

#dash-settings-content .dash-settings-card-header {
    margin: 0 0 10px !important;
    padding: 0 2px !important;
    color: var(--dash-text-muted) !important;
}

#dash-settings-content .dash-settings-focus-row,
#dash-settings-content #dash-ai-settings-container,
#dash-settings-content .dash-settings-grid,
#dash-settings-content .dash-settings-card > p,
#dash-settings-content .dash-settings-card > .dash-btn {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
}

#dash-settings-content .dash-settings-focus-row {
    min-height: 76px !important;
    align-items: center !important;
    border-radius: 14px !important;
}

#dash-settings-content > .dash-settings-card:nth-child(5) {
    margin-bottom: 14px !important;
}

#dash-settings-content > .dash-settings-card:nth-child(5) .dash-settings-focus-row {
    min-height: 58px !important;
    padding: 6px 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#dash-settings-content > .dash-settings-card:nth-child(5) .dash-settings-icon-box {
    width: 32px !important;
    height: 32px !important;
}

#dash-settings-content .dash-settings-desc {
    max-width: none !important;
}

#dash-settings-content #dash-settings-sub-btn,
#dash-settings-content #dash-settings-logout-btn {
    border-radius: 14px !important;
}

#dash-settings-content > .dash-settings-card:nth-child(6),
#dash-settings-content > .dash-settings-card:nth-child(7) {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

#dash-settings-content > .dash-settings-card:nth-child(6) + .dash-settings-card:nth-child(7) {
    margin-top: -20px !important;
}

#dash-settings-content .dash-settings-card:nth-child(4) {
    padding: 16px !important;
}

@media (max-width: 560px) {
    #dash-settings-modal.dash-settings-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    #dash-settings-content.dash-settings-content {
        padding: 16px !important;
    }
}