/* Node Network — "Navigate Your Connections"
   Brand system: halftone-sphere spectrum on true black, Poppins type.
   Palette and typography are taken directly from the brand guide. */

/* ============== Poppins (self-hosted so the brand face never depends on a CDN) ============== */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('../fonts/poppins-300.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/poppins-400.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/poppins-500.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/poppins-600.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/poppins-700.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('../fonts/poppins-800.ttf') format('truetype'); }

/* ============== CSS Variables ============== */
:root {
    /* Surfaces — true black canvas per the brand guide, with a subtle
       elevation ramp so cards read against the black. */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0f;
    --bg-tertiary: #14141c;
    --bg-card: #101017;
    --bg-card-hover: #191922;
    --bg-elevated: #1c1c26;

    --text-primary: #FFFFFF;
    --text-secondary: #b6b6c6;
    /* Raised from #74748a, which cleared WCAG AA only against pure black:
       measured 4.61 on --bg-primary but 4.16 on --bg-card and 3.71 on
       --bg-elevated, against a 4.5 requirement. Since almost everything sits
       on a card rather than on the page ground, the old value failed nearly
       everywhere it was actually used — 120 pieces of text across 18 pages,
       from one token. This clears 5.02 on the worst surface and stays clearly
       dimmer than --text-secondary, which is the job it does in the design. */
    --text-muted: #8a8aa3;

    /* ---- Brand spectrum (the 9 palette swatches) ---- */
    --brand-pink:   #FF2D8E;
    --brand-orange: #FF8A00;
    --brand-yellow: #FFD600;
    --brand-lime:   #7CFF00;
    --brand-green:  #00E090;
    --brand-cyan:   #00E0FF;
    --brand-blue:   #0066FF;
    --brand-violet: #8A2BFF;
    --brand-white:  #FFFFFF;

    /* Two ends of the spectrum are too dark to read as small text: violet
       measures 3.11 and blue 3.49 against a 4.5 requirement, while orange,
       cyan and green already clear 7 or better. These are the same hues
       lightened until they pass. The spectrum above stays exactly as it is —
       it is the brand signature and it is used on fills, rules and glows,
       where the requirement is different. */
    --brand-violet-text: #A78BFF;
    --brand-blue-text:   #6FA8FF;

    /* Interactive accent = the sphere's blue→violet core. Rainbow is reserved
       as the signature (logo, brand rule, hero glows), not used everywhere. */
    --accent-primary: #6E4BFF;
    --accent-secondary: #0066FF;
    --accent-tertiary: #8A2BFF;

    /* The accent, lightened until it is legible as text.
       #6E4BFF is built for buttons, borders and glows, where a large filled
       area carries the colour and the contrast requirement is lower. Used as
       small text it measured 3.31 against a 4.5 requirement — 14 places
       across the app. This is the same hue at 5.65 on the worst surface.
       Use it for text; keep the accent itself for everything else. */
    --accent-text: #9B82FF;
    /* Legacy aliases referenced by some templates — point them at the brand. */
    --primary-color: #6E4BFF;
    --secondary-color: #0066FF;
    --accent-color: #00E0FF;
    --accent-cyan: var(--brand-cyan);
    --accent-green: var(--brand-green);
    --accent-yellow: var(--brand-yellow);
    --accent-red: var(--brand-pink);
    --accent-pink: var(--brand-pink);
    --accent-blue: var(--brand-blue);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0066FF 0%, #8A2BFF 100%);
    --gradient-spectrum: linear-gradient(90deg,
        #FF2D8E, #FF8A00, #FFD600, #7CFF00, #00E090, #00E0FF, #0066FF, #8A2BFF);
    --gradient-subtle: linear-gradient(180deg, rgba(110, 75, 255, 0.10) 0%, transparent 100%);
    --gradient-card: var(--bg-card);

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-accent: rgba(138, 43, 255, 0.35);

    /* Shadows + brand glow */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 28px rgba(110, 75, 255, 0.28);
    --shadow-soft: 0 6px 30px rgba(0, 0, 0, 0.4);

    /* Typography — Poppins (brand face) */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --nav-height: 64px;
    --container-max: 1400px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 22px;

    /* Animations */
    --transition-fast: 0.12s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.35s ease;
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============== Reset & Base ============== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Faint brand aura: a violet-blue glow bleeding from the top-left, echoing
       the sphere's core, over true black. Fixed so it stays put on scroll. */
    background-image:
        radial-gradient(1100px 620px at 15% -8%, rgba(110, 75, 255, 0.10), transparent 60%),
        radial-gradient(900px 560px at 100% 0%, rgba(0, 224, 255, 0.06), transparent 55%);
    background-attachment: fixed;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

/* ============== Navbar ============== */
.navbar {
    height: var(--nav-height);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.nav-brand {
    flex-shrink: 0;
}
.nav-brand a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.logo {
    height: 36px;
    width: 36px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(110, 75, 255, 0.35));
}

/* Wordmark: "Node" bold, "Network" light — matches the brand lockup. */
.brand-text {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.brand-text strong {
    font-weight: 700;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
}

.nav-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-link.active {
    background: var(--accent-primary);
    color: white;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
}

.search-box input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    width: 280px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

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

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-top: 0.5rem;
    box-shadow: var(--shadow-lg);
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

.search-results.active {
    display: block;
}

.search-result-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-tertiary);
}

.result-name {
    font-weight: 600;
    color: var(--text-primary);
}

.result-info {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ============== Buttons ============== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--border-radius);
    font-weight: 550;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
    border: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-xs), var(--shadow-glow);
}

.btn-primary:hover {
    background: var(--accent-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.btn-danger {
    background: var(--accent-red);
    color: white;
}

.btn-danger:hover {
    background: #ef5350;
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

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

.btn-lg {
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
}

.btn-sm {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    border-radius: var(--border-radius-sm);
}

.btn-icon {
    padding: 0.6rem;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
}

.btn-icon:hover, .btn-icon.active {
    color: var(--accent-yellow);
    background: var(--bg-tertiary);
}

/* ============== Main Content ============== */
.main-content {
    flex: 1;
    padding: 2rem;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
}

/* ============== Flash Messages ============== */
.flash-messages {
    margin-bottom: 1.5rem;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.flash-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
}

.flash-info {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
}

.flash-close {
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.flash-close:hover {
    opacity: 1;
}

/* ============== Hero Section ============== */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 750;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}

.gradient-text {
    background: var(--gradient-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
    max-width: 480px;
    line-height: 1.7;
}

.hero-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-preview {
    width: 380px;
    height: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* ============== Section ============== */
.section {
    margin: 2.5rem 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 650;
    color: var(--text-primary);
}

.link {
    color: var(--accent-text);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--accent-text);
}

/* ============== Contact Cards ============== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-normal);
    position: relative;
}

.contact-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-soft);
}

.contact-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    overflow: hidden;
}

.contact-avatar.small {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
}

.contact-avatar.large {
    width: 110px;
    height: 110px;
    font-size: 2.25rem;
}

.contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Ensure SVG avatars from DiceBear display properly */
.contact-avatar img[src*="dicebear"] {
    background: var(--bg-tertiary);
}

.avatar-initials {
    color: white;
    font-weight: 600;
    font-size: 1.35rem;
}

.contact-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--text-primary);
}

.contact-role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.contact-badge {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    font-size: 1.1rem;
}

.contact-badge.favorite {
    color: var(--accent-yellow);
}

/* ============== Contacts List ============== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.filters-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.9rem 1.25rem;
    margin-bottom: 1.25rem;
}

.filters-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-filter {
    flex: 1;
    min-width: 220px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-filter svg {
    position: absolute;
    left: 0.9rem;
    color: var(--text-muted);
    width: 16px;
    height: 16px;
}

.search-filter input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-filter input:focus {
    outline: none;
    border-color: var(--border-accent);
    background: var(--bg-elevated);
}

.filter-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
}

.filter-select:focus {
    outline: none;
    border-color: var(--border-accent);
}

.contacts-count {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.contact-row:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
}

.contact-main {
    min-width: 0;
}

.contact-main .contact-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.star-icon {
    color: var(--accent-yellow);
}

.contact-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 180px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.contact-tags {
    display: flex;
    gap: 0.4rem;
}

.tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--bg-tertiary);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.tag-professional {
    background: rgba(149, 128, 255, 0.15);
    color: var(--accent-text);
}

.tag-personal {
    background: rgba(94, 234, 212, 0.15);
    color: var(--accent-cyan);
}

.tag-acquaintance {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.tag-industry {
    background: rgba(99, 102, 241, 0.2);
    color: var(--brand-blue-text);
}

.contact-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
}

.last-contact {
    font-size: 0.875rem;
}

.last-contact.overdue {
    color: var(--accent-yellow);
}

.last-contact.recent {
    color: var(--accent-green);
}

/* ============== Enhanced Filters & Grid View ============== */

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.view-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 0.2rem;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.65rem;
    border-radius: calc(var(--border-radius-sm) - 2px);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.view-btn:hover {
    color: var(--text-primary);
}

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

/* Quick Filter Pills */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.quick-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.quick-pill:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.quick-pill.active {
    background: var(--accent-primary);
    border-color: transparent;
    color: white;
}

.quick-pill.favorites.active {
    background: var(--accent-yellow);
}

.quick-pill.followup.active {
    background: var(--accent-red);
}

.quick-pill.recent.active {
    background: var(--accent-green);
}

.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.quick-pill:not(.active) .pill-count {
    background: var(--bg-tertiary);
}

/* Active Filters Display */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.9rem;
    background: rgba(149, 128, 255, 0.08);
    border: 1px solid rgba(149, 128, 255, 0.15);
    border-radius: var(--border-radius-sm);
}

.active-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 0.4rem;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: var(--accent-primary);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

.remove-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9rem;
    height: 0.9rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.8rem;
    line-height: 1;
    transition: background var(--transition-fast);
}

.remove-filter:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Clear Button */
.clear-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

/* Contacts Count Enhancement */
.contacts-count {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.count-number {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

/* Grid View */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.contacts-grid.hidden,
.contacts-list.hidden {
    display: none;
}

.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
    animation: fadeInUp 0.35s ease-out forwards;
    opacity: 0;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    border-color: var(--border-accent);
}

.card-header {
    position: relative;
    background: var(--bg-tertiary);
    padding: 1.25rem;
    display: flex;
    justify-content: center;
}

.card-header .contact-avatar.large {
    width: 72px;
    height: 72px;
}

.card-header .contact-avatar.large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    color: var(--accent-yellow);
    font-size: 1.1rem;
}

.card-body {
    padding: 0.85rem 1rem;
    text-align: center;
}

.card-body .contact-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--text-primary);
}

.contact-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
}

.contact-company {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.tag.small {
    padding: 0.1rem 0.45rem;
    font-size: 0.65rem;
}

.last-contact.small {
    font-size: 0.7rem;
}

/* List View Animation */
.contact-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: fadeInUp 0.35s ease-out forwards;
    opacity: 0;
}

.contact-row:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-soft);
}

/* Smooth Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Filters Form Responsive */
.filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

/* Responsive adjustments for new filters */
@media (max-width: 1024px) {
    .contact-row {
        grid-template-columns: auto 1fr auto;
    }
    
    .contact-meta {
        display: none;
    }
    
    .contacts-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (max-width: 768px) {
    .quick-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.4rem;
        margin-bottom: 0.85rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .quick-filters::-webkit-scrollbar {
        display: none;
    }
    
    .filters-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-select {
        width: 100%;
    }
    
    .search-filter {
        width: 100%;
    }
    
    .view-toggle {
        order: -1;
        align-self: flex-end;
        margin-bottom: 0.5rem;
    }
    
    .contact-row {
        grid-template-columns: auto 1fr auto;
        gap: 1rem;
        padding: 0.875rem 1rem;
    }
    
    .contact-tags {
        display: none;
    }
    
    .contacts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .card-header .contact-avatar.large {
        width: 60px;
        height: 60px;
    }
    
    .active-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.5rem 0.75rem;
    }
}

/* ============== Contact Detail ============== */
.contact-detail {
    max-width: 1200px;
    margin: 0 auto;
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.back-link:hover {
    color: var(--accent-text);
}

.detail-actions {
    display: flex;
    gap: 0.6rem;
}

.detail-main {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
}

.detail-profile {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
}

.profile-avatar {
    margin: 0 auto 1.25rem;
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}

.profile-nickname {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.4rem;
}

.profile-title {
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.contact-methods, .social-links {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.contact-methods h3, .social-links h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.contact-method, .social-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.contact-method:hover, .social-link:hover {
    background: var(--bg-tertiary);
    color: var(--accent-text);
}

.social-link.linkedin:hover { color: #0A66C2; }
.social-link.twitter:hover { color: #1DA1F2; }
.social-link.website:hover { color: var(--accent-cyan); }

/* Quick Actions - Messaging */
.quick-actions {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.quick-actions h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.action-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-accent);
}

.action-btn.action-email {
    background: var(--accent-primary);
    border: none;
    color: white;
}

.action-btn.action-email:hover {
    background: var(--accent-primary-hover);
}

.action-btn.action-outlook {
    background: #0078D4;
    border: none;
    color: white;
}

.action-btn.action-outlook:hover {
    background: #106EBE;
}

.action-btn.action-linkedin, .action-btn.action-linkedin-view {
    background: #0A66C2;
    border: none;
    color: white;
}

.action-btn.action-linkedin:hover, .action-btn.action-linkedin-view:hover {
    background: #004182;
}

.action-btn.action-sms {
    background: var(--accent-green);
    border: none;
    color: white;
}

.action-btn.action-sms:hover {
    background: #059669;
}

.action-btn.action-enrich {
    background: var(--accent-primary);
    border: none;
    color: white;
    margin-top: 0.4rem;
}

.action-btn.action-enrich:hover {
    background: var(--accent-primary-hover);
}

.action-btn.action-enrich.loading {
    opacity: 0.7;
    cursor: wait;
}

.action-btn.action-enrich:disabled {
    cursor: not-allowed;
}

.enrichment-info-text {
    color: var(--text-tertiary);
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

/* Email Compose Modal */
.modal-large {
    max-width: 680px;
}

.modal-large h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.input-readonly {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.email-templates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.template-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 0.4rem;
}

.template-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.template-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.send-options {
    display: flex;
    gap: 0.5rem;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.content-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.content-section h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item.full {
    grid-column: 1 / -1;
}

.info-item label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.info-item p {
    color: var(--text-primary);
}

.days-ago {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.text-warning {
    color: var(--accent-yellow);
}

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

.notes-content {
    white-space: pre-wrap;
    color: var(--text-secondary);
    line-height: 1.6;
}

.connections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.connection-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.connection-card:hover {
    background: var(--bg-card-hover);
}

.connection-info {
    display: flex;
    flex-direction: column;
}

.connection-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.connection-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.add-connection {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.add-connection h4 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.connection-search {
    position: relative;
}

.connection-search input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.connection-search input:focus {
    outline: none;
    border-color: var(--border-accent);
}

.connection-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-top: 0.4rem;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

.connection-results.active {
    display: block;
}

.connection-result-item {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.connection-result-item:hover {
    background: var(--bg-tertiary);
}

.result-company {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.interactions-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.interaction-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.6rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.interaction-type {
    padding: 0.2rem 0.6rem;
    background: var(--bg-secondary);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: capitalize;
}

.interaction-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.interaction-notes {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.4rem;
    flex: 1;
}

/* ============== Contact Form ============== */
.form-page {
    max-width: 780px;
    margin: 0 auto;
}

.form-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.form-section h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.form-group {
    margin-bottom: 0.85rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group select {
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.85rem;
}

/* ============== Network Page ============== */
.network-page {
    height: calc(100vh - var(--nav-height) - 2rem);
    display: flex;
    gap: 0.85rem;
    position: relative;
    overflow: hidden;
}

/* ===== Network Stats Bar ===== */
.network-stats-bar {
    display: flex;
    gap: 1.25rem;
    padding: 0.6rem 1.25rem;
    background: rgba(26, 26, 46, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    position: absolute;
    top: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    animation: slideDown 0.4s ease;
    backdrop-filter: blur(12px);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.network-stats-bar .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.85rem;
    border-right: 1px solid var(--border-color);
    cursor: default;
    transition: transform var(--transition-fast);
}

.network-stats-bar .stat-item:hover {
    transform: scale(1.03);
}

.network-stats-bar .stat-item:last-child {
    border-right: none;
}

.network-stats-bar .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.network-stats-bar .stat-item.highlight .stat-value {
    color: var(--accent-text);
}

.network-stats-bar .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Control Sidebar =====
   Docked in flow beside the graph, never over it. The narrow-screen media
   query below is the only place it floats. */
.network-panel {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    backdrop-filter: blur(16px);
    overflow: hidden;
    animation: slideInLeft 0.35s ease;
    box-shadow: var(--shadow-soft);
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: translateX(0); }
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: rgba(149, 128, 255, 0.06);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.panel-header:hover {
    background: rgba(149, 128, 255, 0.1);
}

.panel-header h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.panel-toggle {
    transition: transform 0.25s ease;
}

/* Collapsed: a slim rail. The gear alone remains as the re-open control, so
   the graph gets the width back without the panel leaving the layout. */
.network-panel.collapsed {
    flex-basis: 52px;
}

.network-panel.collapsed .panel-title-text,
.network-panel.collapsed .panel-toggle {
    display: none;
}

.network-panel.collapsed .panel-header {
    justify-content: center;
    padding: 0.85rem 0;
}

.network-panel.collapsed .panel-body {
    display: none;
}

.panel-body {
    flex: 1;
    padding: 0.85rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Filter Sections */
.filter-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.filter-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-section h3 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Quick Filters */
.quick-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.quick-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-filter:hover {
    border-color: var(--border-accent);
    background: rgba(149, 128, 255, 0.08);
}

.quick-filter.active {
    background: rgba(149, 128, 255, 0.12);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-icon {
    font-size: 0.95rem;
}

/* Filter Grid */
.filter-grid {
    display: grid;
    /* minmax(0, …): a <select>'s intrinsic width otherwise wins over the
       track size and pushes the second column past the sidebar edge. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.filter-item select {
    width: 100%;
}

.filter-item label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.filter-item select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.45rem 0.55rem;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-item select:hover,
.filter-item select:focus {
    border-color: var(--border-accent);
    outline: none;
}

/* Checkbox Filters */
.checkbox-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.filter-checkbox:hover {
    color: var(--text-primary);
}

.filter-checkbox input {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: all var(--transition-fast);
}

.checkbox-custom.professional { border-color: var(--accent-primary); }
.checkbox-custom.personal { border-color: #5eead4; }
.checkbox-custom.acquaintance { border-color: #6ee7b7; }

.filter-checkbox input:checked + .checkbox-custom {
    background: var(--primary-color);
    border-color: var(--accent-primary);
}

.filter-checkbox input:checked + .checkbox-custom.professional { background: var(--accent-primary); border-color: var(--accent-primary); }
.filter-checkbox input:checked + .checkbox-custom.personal { background: #5eead4; border-color: #5eead4; }
.filter-checkbox input:checked + .checkbox-custom.acquaintance { background: #6ee7b7; border-color: #6ee7b7; }

.filter-checkbox input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Toggle Buttons */
.toggle-buttons {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.toggle-btn {
    padding: 0.4rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-btn:hover {
    border-color: var(--border-accent);
}

.toggle-btn.active {
    background: var(--accent-primary);
    border-color: transparent;
    color: white;
}

/* Network Search */
.network-search {
    position: relative;
}

.network-search svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 14px;
    height: 14px;
}

.network-search input {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.network-search input:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.1);
}

/* Ask Your Network (local model) */
.ask-network {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ask-network select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.ask-input-row {
    display: flex;
    gap: 0.4rem;
}

.ask-input-row input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.ask-input-row input:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.1);
}

.ask-input-row button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: var(--border-accent, var(--accent-tertiary));
    border: none;
    border-radius: var(--border-radius-sm);
    color: #fff;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.ask-input-row button:hover:not(:disabled) {
    opacity: 0.85;
}

.ask-input-row button:disabled,
.ask-network select:disabled,
.ask-input-row input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ask-badge {
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.ask-badge-ok { color: #10B981; }
.ask-badge-off { color: #EF4444; }
.ask-badge-loading { color: #F59E0B; }

.ask-result {
    font-size: 0.78rem;
    line-height: 1.35;
}

.ask-result:empty { display: none; }

.ask-result-info { color: var(--text-muted); }
.ask-result-success { color: #10B981; }
.ask-result-error { color: #EF4444; }

/* ---- Ask hero -------------------------------------------------------------
   The sidebar's one loud element; every other section stays quiet. Bleeds to
   the panel edges (the negative margins cancel .panel-body's padding). */
.ask-hero {
    margin: -0.85rem -0.85rem 1rem;
    padding: 1rem 0.85rem;
    background: linear-gradient(165deg, rgba(139, 92, 246, 0.18), rgba(6, 182, 212, 0.06) 80%);
    border-bottom: 1px solid var(--border-accent, rgba(149, 128, 255, 0.35));
}

.ask-hero h3 {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

.ask-hero .ask-hint {
    margin: 0;
}

.ask-hero .ask-input-row input {
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.45);
}

/* The model picker is plumbing, not the point: quiet row under the input. */
.ask-hero .ask-network select {
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: transparent;
}

/* Below this width a docked 300px sidebar would leave no room for the graph;
   float the panel over the canvas instead, as it always did. */
@media (max-width: 900px) {
    .network-panel {
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
        width: min(300px, 82vw);
        max-height: calc(100% - 1.7rem);
        height: auto;
        flex: none;
        z-index: 200;
    }

    .network-panel.collapsed {
        width: 52px;
    }
}

/* Advanced Options */
.filter-section.collapsible h3 {
    cursor: pointer;
}

.collapse-icon {
    transition: transform 0.25s ease;
}

.filter-section.collapsible.open .collapse-icon {
    transform: rotate(180deg);
}

.advanced-options {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.6rem;
    animation: fadeIn 0.25s ease;
}

.filter-section.collapsible.open .advanced-options {
    display: flex;
}

/* ===== Network Container ===== */
.network-container {
    flex: 1;
    min-width: 0;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(149, 128, 255, 0.02) 0%, transparent 70%);
    border-radius: var(--border-radius);
    overflow: hidden;
}

#network-graph {
    width: 100%;
    height: 100%;
}

/* Loading Animation */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 24, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.loading-content {
    text-align: center;
}

.loading-orbs {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;
}

.orb {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    animation: orbit 2s linear infinite;
}

.orb-1 {
    background: var(--accent-primary);
}

.orb-2 {
    background: #5eead4;
    animation-delay: 0.66s;
}

.orb-3 {
    background: #6ee7b7;
    animation-delay: 1.32s;
}

.orb-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(149, 128, 255, 0.4);
}

@keyframes orbit {
    0% {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    25% {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
    }
    50% {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
    }
    75% {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    100% {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

.loading-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===== Legend ===== */
.network-legend {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    background: rgba(17, 17, 24, 0.92);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    backdrop-filter: blur(12px);
    overflow: hidden;
    animation: slideInUp 0.35s ease 0.15s backwards;
    min-width: 150px;
}

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

.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.legend-header h3 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.legend-body {
    padding: 0.6rem 0.85rem;
}

.network-legend.collapsed .legend-body {
    display: none;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

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

.legend-line {
    width: 18px;
    height: 2px;
    border-radius: 2px;
}

.legend-connections {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.legend-connections h4 {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

/* ===== View Controls ===== */
.view-controls {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    animation: slideInUp 0.35s ease 0.25s backwards;
}

.view-btn {
    width: 40px;
    height: 40px;
    background: rgba(17, 17, 24, 0.92);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(10px);
}

.view-btn:hover {
    background: rgba(149, 128, 255, 0.15);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.view-btn:active {
    transform: scale(0.96);
}

/* ===== Contact Panel ===== */
.contact-panel {
    position: absolute;
    top: 0.85rem;
    right: -340px;
    width: 300px;
    height: calc(100% - 1.7rem);
    background: rgba(17, 17, 24, 0.98);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    z-index: 250;
    transition: right 0.25s ease;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.contact-panel.open {
    right: 0.85rem;
}

.panel-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 28px;
    height: 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}

.panel-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #EF4444;
    color: #EF4444;
}

.contact-panel-content {
    padding: 1.25rem;
    height: 100%;
    overflow-y: auto;
}

.contact-panel-header {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.contact-panel-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    border: 3px solid var(--primary-color);
}

.contact-panel-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.contact-panel-title {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.contact-panel-company {
    color: var(--accent-text);
    font-size: 0.9rem;
}

.contact-panel-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.contact-panel-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Contact Panel Details */
.contact-panel-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: right;
    word-break: break-all;
}

/* Empty Network */
.empty-network {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}

.empty-network svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-network h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-network p {
    margin-bottom: 1.5rem;
}

/* ============== AI Assistant Widget ============== */
.ai-assistant {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1000;
}

.ai-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(149, 128, 255, 0.3);
    transition: all var(--transition-fast);
    position: relative;
}

.ai-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(149, 128, 255, 0.4);
}

.ai-toggle:active {
    transform: scale(0.95);
}

.ai-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #EF4444;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-panel {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 360px;
    height: 460px;
    background: rgba(17, 17, 24, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    animation: slideUp 0.25s ease;
}

.ai-chat-panel.open {
    display: flex;
}

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

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: rgba(149, 128, 255, 0.06);
    border-bottom: 1px solid var(--border-color);
}

.ai-header-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ai-avatar {
    width: 36px;
    height: 36px;
    background: var(--accent-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.ai-header-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.ai-status {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ai-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ai-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
    color: #EF4444;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ai-message {
    max-width: 88%;
    animation: fadeIn 0.25s ease;
}

.ai-message-bot {
    align-self: flex-start;
}

.ai-message-user {
    align-self: flex-end;
}

.ai-message-content {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ai-message-bot .ai-message-content {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.ai-message-user .ai-message-content {
    background: var(--accent-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-message-content p {
    margin: 0 0 0.4rem 0;
}

.ai-message-content p:last-child {
    margin-bottom: 0;
}

.ai-message-content ul {
    margin: 0.4rem 0;
    padding-left: 1.1rem;
}

.ai-message-content li {
    margin: 0.2rem 0;
    color: var(--text-secondary);
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.ai-suggestion {
    padding: 0.4rem 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-suggestion:hover {
    background: rgba(149, 128, 255, 0.1);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

/* AI Stats Display */
.ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.ai-stat-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem;
    text-align: center;
}

.ai-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-text);
}

.ai-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* AI Contact Cards */
.ai-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.ai-contact-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-contact-card:hover {
    background: rgba(149, 128, 255, 0.08);
    border-color: var(--border-accent);
}

.ai-contact-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ai-contact-info {
    flex: 1;
    min-width: 0;
}

.ai-contact-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-contact-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-contact-action {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-contact-action:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* AI Action Buttons */
.ai-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.ai-action-btn {
    flex: 1;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.ai-action-btn:hover {
    background: rgba(149, 128, 255, 0.1);
    border-color: var(--border-accent);
}

.ai-action-btn.primary {
    background: var(--accent-primary);
    border: none;
    color: white;
}

/* AI Typing Indicator */
.ai-typing {
    display: flex;
    gap: 3px;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    width: fit-content;
}

.ai-typing span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.ai-typing span:nth-child(1) { animation-delay: 0s; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.ai-chat-input {
    display: flex;
    gap: 0.4rem;
    padding: 0.85rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.ai-chat-input input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.ai-chat-input input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.1);
}

.ai-chat-input button {
    width: 38px;
    height: 38px;
    background: var(--accent-primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.ai-chat-input button:hover {
    transform: scale(1.05);
}

.ai-chat-input button:active {
    transform: scale(0.95);
}

/* ============== Dashboard ============== */
.dashboard-header {
    margin-bottom: 1.5rem;
}

.dashboard-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.stat-card.large {
    grid-column: span 1;
}

.stat-icon {
    width: 52px;
    height: 52px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-text);
}

.stat-icon.favorite {
    color: var(--accent-yellow);
}

.stat-icon.connections {
    color: var(--accent-cyan);
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-text);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.dashboard-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.dashboard-card.full-width {
    grid-column: 1 / -1;
}

.dashboard-card h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.dashboard-card h2 .badge {
    background: var(--accent-primary);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
}

.chart-container {
    height: 180px;
    margin-bottom: 0.85rem;
}

.type-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breakdown-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.breakdown-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.breakdown-dot.type-professional {
    background: var(--accent-primary);
}

.breakdown-dot.type-personal {
    background: var(--accent-cyan);
}

.breakdown-dot.type-acquaintance {
    background: var(--accent-green);
}

.breakdown-value {
    font-weight: 600;
}

.industry-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.industry-item {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 0.85rem;
}

.industry-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.industry-bar-container {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.industry-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.industry-count {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 28px;
    text-align: right;
    font-size: 0.85rem;
}

.followup-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.followup-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.followup-item:hover {
    background: var(--bg-card-hover);
}

.followup-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.followup-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.followup-company {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.followup-status .overdue {
    color: var(--accent-yellow);
    font-size: 0.8rem;
    font-weight: 500;
}

.followup-status .never {
    color: var(--accent-red);
    font-size: 0.8rem;
    font-weight: 500;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.recent-item:hover {
    background: var(--bg-card-hover);
}

.recent-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recent-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.recent-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.recent-company {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Enhanced Dashboard Grid */
.dashboard-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.dashboard-subtitle {
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Scrollable breakdown lists */
.breakdown-list.scrollable {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.4rem;
}

.breakdown-list.scrollable::-webkit-scrollbar {
    width: 3px;
}

.breakdown-list.scrollable::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 2px;
}

.breakdown-list.scrollable::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 2px;
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Clickable breakdown items */
.breakdown-item.clickable {
    padding: 0.4rem 0.65rem;
    margin: 0 -0.65rem;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.breakdown-item.clickable:hover {
    background: var(--bg-tertiary);
}

.industry-item.clickable {
    padding: 0.4rem 0.65rem;
    margin: 0 -0.65rem;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.industry-item.clickable:hover {
    background: var(--bg-tertiary);
}

/* Truncate long text */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Follow-up grid layout */
.followup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

.followup-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.followup-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
}

.followup-card .followup-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.followup-card .followup-status {
    margin-top: 0.25rem;
}

/* Stat icon variants */
.stat-icon.companies {
    color: var(--accent-pink);
}

/* Empty state small */
.empty-state-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
}

.empty-state-small svg {
    margin-bottom: 0.85rem;
    opacity: 0.5;
}

.empty-state-small p {
    font-size: 0.9rem;
}

/* ============== Empty State ============== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}

.empty-icon {
    margin-bottom: 1.25rem;
    opacity: 0.5;
}

.empty-state h2 {
    font-size: 1.35rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.empty-state p {
    max-width: 380px;
    margin-bottom: 1.25rem;
}

/* ============== Modal ============== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-content form {
    padding: 1.25rem;
}

/* Photo Upload Section */
.photo-upload-group {
    margin-bottom: 1.25rem;
}

.photo-upload-container {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.current-photo {
    flex-shrink: 0;
}

.current-photo img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.photo-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.photo-upload-options {
    flex: 1;
}

.photo-upload-options .form-group {
    margin-bottom: 0;
}

/* ============== Footer ============== */
.footer {
    text-align: center;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============== Responsive ============== */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.25rem;
    }
    
    .hero-subtitle {
        margin: 0 auto 1.5rem;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-visual {
        display: none;
    }
    
    .detail-main {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 0.85rem;
    }
    
    .nav-links {
        display: none;
    }
    
    .search-box input {
        width: 180px;
    }
    
    .main-content {
        padding: 0.85rem;
    }
    
    .contact-row {
        grid-template-columns: auto 1fr auto;
    }
    
    .contact-meta, .contact-tags {
        display: none;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .followup-grid {
        grid-template-columns: 1fr;
    }
}


/* ============== Import Page ============== */
.import-page {
    max-width: 1180px;
    margin: 0 auto;
}

.import-page .page-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.import-page .page-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
}

.import-page .subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

.import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.import-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
}

.import-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-soft);
}

.card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.linkedin-icon {
    background: #0077B5;
    color: white;
}

.csv-icon {
    background: var(--accent-primary);
    color: white;
}

.coming-soon-icon {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.import-card h2 {
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
}

.card-description {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.55;
    font-size: 0.9rem;
}

.import-steps {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.import-steps h3 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.import-steps ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.import-steps li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.step-number {
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.step-content strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.step-content p {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.step-content code {
    background: var(--bg-tertiary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--accent-cyan);
}

.upload-form {
    margin-top: auto;
}

.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    margin-bottom: 0.85rem;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--accent-primary);
    background: rgba(149, 128, 255, 0.06);
}

.file-upload-area svg {
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.upload-text {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.upload-subtext {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.file-upload-area input[type="file"] {
    display: none;
}

.file-selected {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius-sm);
    padding: 0.85rem;
    margin-bottom: 0.85rem;
}

.file-selected svg {
    color: var(--accent-text);
}

.file-selected span {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.remove-file {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.remove-file:hover {
    color: var(--accent-red);
}

.csv-format-info {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.csv-format-info h4 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.column-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.column-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.column-list code {
    background: var(--bg-tertiary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--accent-cyan);
}

.coming-soon-features {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.feature-item svg {
    opacity: 0.5;
}

.coming-soon-card .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============== Import Preview Page ============== */
.import-preview-page {
    max-width: 1380px;
    margin: 0 auto;
}

.import-preview-page .page-header {
    margin-bottom: 1.5rem;
}

.import-preview-page .header-left {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: color var(--transition-fast);
}

.back-link:hover {
    color: var(--accent-text);
}

.import-preview-page h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.5rem;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-new .summary-icon {
    background: rgba(110, 231, 183, 0.15);
    color: var(--accent-green);
}

.summary-existing .summary-icon {
    background: rgba(149, 128, 255, 0.15);
    color: var(--accent-text);
}

.summary-total .summary-icon {
    background: rgba(94, 234, 212, 0.15);
    color: var(--accent-cyan);
}

.summary-content {
    display: flex;
    flex-direction: column;
}

.summary-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.summary-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.import-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.85rem 1.25rem;
    margin-bottom: 0.85rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.select-controls {
    display: flex;
    gap: 0.4rem;
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

.preview-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
}

.preview-table th {
    background: var(--bg-tertiary);
    padding: 0.85rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.preview-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.preview-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.existing-row {
    opacity: 0.7;
}

.th-checkbox, .td-checkbox {
    width: 46px;
    text-align: center;
}

.td-checkbox input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-primary);
}

.td-name strong {
    color: var(--text-primary);
}

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

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
}

.status-new {
    background: rgba(110, 231, 183, 0.15);
    color: var(--accent-green);
}

.status-exists {
    background: rgba(149, 128, 255, 0.15);
    color: var(--accent-text);
}

.import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .import-grid {
        grid-template-columns: 1fr;
    }
    
    .import-summary {
        grid-template-columns: 1fr;
    }
    
    .import-options {
        flex-direction: column;
        gap: 0.85rem;
        align-items: flex-start;
    }
    
    .select-controls {
        flex-wrap: wrap;
    }
}


/* ============== Settings Page ============== */
.settings-page {
    padding: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
}

.settings-page .page-header {
    margin-bottom: 1.5rem;
}

.settings-page .page-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
}

.settings-page .page-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.settings-section .section-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-section .section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.settings-section .section-header p {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.settings-section .form-group {
    margin-bottom: 1rem;
}

.settings-section .form-group:last-child {
    margin-bottom: 0;
}

.settings-section .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.settings-section .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.checkbox-setting label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.checkbox-setting input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.checkbox-setting .checkbox-label {
    font-weight: 400;
    color: var(--text-primary);
}

/* Contact Enrichment Section */
.settings-section-enrichment {
    grid-column: 1 / -1;
}

.enrichment-info {
    margin-bottom: 1.25rem;
}

.enrichment-info .info-box {
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.enrichment-info .info-box svg {
    flex-shrink: 0;
    color: var(--accent-cyan);
    margin-top: 2px;
}

.provider-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.provider-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--accent-primary);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.provider-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 2px;
}

.provider-desc a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.provider-desc a:hover {
    text-decoration: underline;
}

.enrichment-actions {
    display: flex;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.enrichment-status {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    line-height: 1.5;
}

.enrichment-info {
    background: rgba(149, 128, 255, 0.06);
    border: 1px solid rgba(149, 128, 255, 0.2);
}

.enrichment-success {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.enrichment-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

.enrichment-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.enrichment-status .loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

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

/* Data Management Section */
.settings-section-data {
    grid-column: 1 / -1;
}

.data-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.data-stat {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 0.85rem;
    text-align: center;
}

.data-stat .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-text);
}

.data-stat .stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.data-actions {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.danger-zone {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--border-radius-sm);
    padding: 1.25rem;
}

.danger-zone h3 {
    color: var(--accent-red);
    margin-bottom: 0.4rem;
    font-size: 1rem;
}

.danger-zone p {
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
}

.btn-danger {
    background: var(--accent-red);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-fast);
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    max-width: 450px;
    width: 90%;
}

.modal-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.modal-content ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.modal-content ul li {
    margin-bottom: 0.25rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-section .form-row {
        grid-template-columns: 1fr;
    }
    
    .data-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .data-actions {
        flex-direction: column;
    }
}

/* ======================================
   AI NETWORK ASSISTANT
====================================== */

.assistant-trigger {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(149, 128, 255, 0.3);
    transition: all var(--transition-fast);
    z-index: 1000;
}

.assistant-trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(149, 128, 255, 0.4);
}

.assistant-trigger svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Closed state hides in place rather than parking the panel off-screen at
   right: -400px. A fixed element positioned outside the viewport still counts
   toward scroll width, which is what made every mobile page 696px wide in a
   390px window. */
.assistant-panel {
    position: fixed;
    bottom: 0;
    right: 1rem;
    width: 380px;
    height: 500px;
    max-width: calc(100vw - 2rem);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px 14px 0 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* `.active` is what the script toggles. The stylesheet previously only
   defined `.open`, so the panel never appeared — clicking the trigger did
   nothing at all. */
.assistant-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}



.assistant-header {
    background: var(--accent-primary);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.assistant-header h3 {
    color: white;
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.assistant-header h3 svg {
    width: 18px;
    height: 18px;
    fill: white;
}

.assistant-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.assistant-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.assistant-message {
    max-width: 88%;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.assistant-message.bot {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.assistant-message.user {
    background: var(--accent-primary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.assistant-message.bot .example-queries {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.assistant-message.bot .example-query {
    background: rgba(149, 128, 255, 0.06);
    border: 1px solid rgba(149, 128, 255, 0.2);
    padding: 0.4rem 0.65rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.8rem;
    color: var(--accent-text);
}

.assistant-message.bot .example-query:hover {
    background: rgba(149, 128, 255, 0.12);
    border-color: var(--border-accent);
}

/* Assistant Results */
.assistant-results {
    margin-top: 0.6rem;
}

.assistant-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.4rem;
    transition: all var(--transition-fast);
}

.assistant-result-item:hover {
    border-color: var(--border-accent);
    background: rgba(149, 128, 255, 0.04);
}

.assistant-result-item a {
    color: var(--text-primary);
    text-decoration: none;
    flex: 1;
}

.assistant-result-item .result-name {
    font-weight: 600;
    color: var(--accent-text);
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
}

.assistant-result-item .result-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.assistant-results-more {
    text-align: center;
    margin-top: 0.6rem;
}

.assistant-results-more a {
    color: var(--accent-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.assistant-results-more a:hover {
    text-decoration: underline;
}

/* Stats Display */
.assistant-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.assistant-stat {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 0.625rem;
    border-radius: 8px;
    text-align: center;
}

.assistant-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-text);
}

.assistant-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Input Area */
.assistant-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.assistant-input-area input {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--transition-fast);
}

.assistant-input-area input:focus {
    border-color: var(--accent-primary);
}

.assistant-input-area input::placeholder {
    color: var(--text-muted);
}

.assistant-send {
    width: 38px;
    height: 38px;
    background: var(--accent-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.assistant-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(149, 128, 255, 0.3);
}

.assistant-send svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Mobile Responsiveness */
@media (max-width: 500px) {
    .assistant-panel {
        width: calc(100% - 1rem);
        right: 0.5rem;
    }
    
    
    .assistant-trigger {
        bottom: 1rem;
        right: 1rem;
        width: 46px;
        height: 46px;
    }
}

/* Highlight Toast for Network */
.highlight-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #FFD700;
    color: var(--bg-tertiary);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    z-index: 1002;
    animation: slideUpToast 0.25s ease, pulseGlow 2s ease-in-out infinite;
    font-weight: 600;
    font-size: 0.9rem;
}

@keyframes slideUpToast {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 4px 28px rgba(255, 215, 0, 0.65); }
}

.highlight-toast span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.highlight-toast button {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: var(--bg-tertiary);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.highlight-toast button:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ============================================
   REMINDERS PAGE STYLES
   ============================================ */

.reminders-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem;
}

.reminders-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.reminders-page .header-content h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.75rem;
    color: var(--text-primary);
}

.reminders-page .subtitle {
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-size: 0.9rem;
}

.reminders-page .header-actions {
    display: flex;
    gap: 0.6rem;
}

/* Reminder Stats Pills */
.reminder-stats {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border-radius: 50px;
    border: 1px solid var(--border-color);
}

.stat-pill.overdue {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

.stat-pill.overdue svg {
    color: #EF4444;
}

.stat-pill.today {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

.stat-pill.today svg {
    color: #F59E0B;
}

.stat-pill.upcoming {
    background: rgba(149, 128, 255, 0.08);
    border-color: rgba(149, 128, 255, 0.2);
}

.stat-pill.upcoming svg {
    color: var(--accent-text);
}

.stat-pill .stat-count {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-pill .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Reminders Grid */
.reminders-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reminder-section {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.section-title.overdue {
    color: #EF4444;
}

.section-title.today {
    color: #F59E0B;
}

.section-title.upcoming {
    color: var(--accent-text);
}

.section-title.completed {
    color: #10B981;
}

/* Reminder List */
.reminder-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reminder-list.compact {
    gap: 0.4rem;
}

/* Reminder Card */
.reminder-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.reminder-card:hover {
    border-color: var(--border-accent);
}

.reminder-card.overdue {
    border-left: 3px solid #EF4444;
}

.reminder-card.today {
    border-left: 3px solid #F59E0B;
}

.reminder-card.upcoming {
    border-left: 3px solid var(--accent-primary);
}

.reminder-card.completed {
    opacity: 0.6;
}

.reminder-card.compact {
    padding: 0.6rem 0.85rem;
}

.reminder-card.completing {
    opacity: 0;
    transform: translateX(16px);
    transition: all 0.25s;
}

.reminder-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.reminder-avatar.small {
    width: 32px;
    height: 32px;
}

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

.reminder-content {
    flex: 1;
    min-width: 0;
}

.reminder-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.reminder-contact {
    color: var(--accent-text);
    text-decoration: none;
    font-size: 0.85rem;
}

.reminder-contact:hover {
    text-decoration: underline;
}

.reminder-notes {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.reminder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
}

.reminder-date {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--text-secondary);
}

.reminder-date.overdue {
    color: #EF4444;
    font-weight: 600;
}

.reminder-date.today {
    color: #F59E0B;
    font-weight: 600;
}

.reminder-date.upcoming {
    color: var(--accent-text);
}

.reminder-type {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.1rem 0.45rem;
    border-radius: 12px;
}

.reminder-recurring {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--accent-cyan);
}

.reminder-priority.high {
    color: #EF4444;
    font-weight: 600;
}

/* Reminder Actions */
.reminder-actions {
    display: flex;
    gap: 0.4rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon.small {
    width: 26px;
    height: 26px;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.btn-icon.btn-complete:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10B981;
    color: #10B981;
}

.btn-icon.btn-snooze:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: #F59E0B;
    color: #F59E0B;
}

.btn-icon.btn-delete:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #EF4444;
    color: #EF4444;
}

/* Snooze Modal */
.snooze-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    padding: 0.85rem;
}

.snooze-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.snooze-btn:hover {
    border-color: var(--border-accent);
    background: rgba(149, 128, 255, 0.08);
}

.snooze-days {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-text);
}

.snooze-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Empty State */
.reminders-page .empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.reminders-page .empty-state svg {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.reminders-page .empty-state h2 {
    margin: 0 0 0.4rem;
    color: var(--text-primary);
}

.reminders-page .empty-state p {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.reminders-page .empty-actions {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
}

/* Search Dropdown */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: var(--shadow-soft);
}

.search-dropdown.active {
    display: block;
}

.search-result {
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-result:hover {
    background: rgba(149, 128, 255, 0.08);
}

.search-result strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-result span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ============================================
   SMART SUGGESTIONS STYLES
   ============================================ */

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.suggestion-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.suggestion-card:hover {
    border-color: var(--border-accent);
}

.suggestion-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

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

.suggestion-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.suggestion-name:hover {
    color: var(--accent-text);
}

.suggestion-role {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-reason {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    margin-top: 0.2rem;
}

.suggestion-reason.company {
    background: rgba(149, 128, 255, 0.1);
    color: var(--accent-text);
}

.suggestion-reason.industry {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-cyan);
}

.suggestion-reason.role {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.suggestion-reason.mutual {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.loading-suggestions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   CONTACT DETAIL REMINDERS
   ============================================ */

.contact-reminders {
    margin-bottom: 0.85rem;
}

.reminder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.4rem;
    border-left: 3px solid var(--border-color);
}

.reminder-item.overdue {
    border-left-color: #EF4444;
    background: rgba(239, 68, 68, 0.04);
}

.reminder-item.today {
    border-left-color: #F59E0B;
    background: rgba(245, 158, 11, 0.04);
}

.reminder-item .reminder-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reminder-item .reminder-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.reminder-item .reminder-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.reminder-item .reminder-date.overdue {
    color: #EF4444;
}

.quick-reminder-actions h4 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
}

.quick-reminder-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
}

/* ============================================
   DASHBOARD REMINDERS WIDGET
   ============================================ */

.stat-card.alert {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

.stat-card.alert .stat-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.stat-icon.reminders {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
}

.reminders-alert-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    border-left: 3px solid #F59E0B;
}

.reminders-alert-card .alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.reminders-alert-card .alert-header h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.reminders-alert-card .alert-header h2 svg {
    color: #F59E0B;
}

.reminders-quick-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.quick-reminder-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.quick-reminder-item.overdue {
    border-left: 3px solid #EF4444;
}

.quick-reminder-item.today {
    border-left: 3px solid #F59E0B;
}

.quick-reminder-item .reminder-avatar {
    width: 36px;
    height: 36px;
}

.quick-reminder-item .reminder-info {
    flex: 1;
    min-width: 0;
}

.quick-reminder-item .reminder-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.quick-reminder-item .reminder-contact {
    font-size: 0.8rem;
    color: var(--accent-text);
    text-decoration: none;
}

.quick-reminder-item .reminder-status {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-weight: 500;
}

.quick-reminder-item .reminder-status.overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.quick-reminder-item .reminder-status.today {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

/* Form Styles */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.modal-content.small {
    max-width: 380px;
}

/* Responsive */
@media (max-width: 768px) {
    .reminder-stats {
        flex-direction: column;
    }
    
    .reminder-card {
        flex-wrap: wrap;
    }
    
    .reminder-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
    
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
    
    .snooze-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .quick-reminder-buttons {
        flex-direction: column;
    }
    
    .quick-reminder-buttons .btn {
        width: 100%;
    }
}
/* ============== Network Pulse Page ============== */
.pulse-page {
    padding: 1.5rem;
    max-width: 1500px;
    margin: 0 auto;
}

.pulse-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pulse-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-text);
    margin-bottom: 0.4rem;
}

.pulse-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ---- Pulse panels ----------------------------------------------------
   The stylesheet and the template had drifted apart: the rules below used to
   target strength-bar-item / strength-label / strength-bar-container, none of
   which appear in pulse.html, while the markup's own bar-label / bar-track /
   bar-fill had no rules at all. Worse, `.strength-bar` was styled as a
   coloured fill but is the row container in the markup, so every row was
   painted like a bar. These match the HTML that actually ships. */

.pulse-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.pulse-card .card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.pulse-card .card-header h2 svg { color: var(--accent-text); flex: none; }
.card-badge {
    flex: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

/* Strength distribution rows */
.pulse-card .strength-bar {
    display: grid;
    grid-template-columns: 7.5rem 1fr 2rem;
    align-items: center;
    gap: 0.75rem;
    /* Reset the fill-bar styling the old rules applied to this row. */
    background: none;
    min-width: 0;
    padding: 0;
    height: auto;
    border-radius: 0;
}
.bar-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.bar-track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--accent-primary);
}
.bar-fill.strong  { background: #10B981; }
.bar-fill.growing { background: var(--accent-primary); }
.bar-fill.stable  { background: var(--accent-cyan); }
.bar-fill.fading  { background: #F59E0B; }
.bar-fill.dormant { background: #6B7280; }
.bar-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Person rows — strongest connections, rising, reconnect */
.connections-list,
.rising-list,
.gems-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.connection-item,
.rising-item,
.gem-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}
.connection-item:hover,
.rising-item:hover,
.gem-item:hover { background: var(--bg-tertiary); }

.connection-avatar,
.rising-avatar,
.gem-avatar {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
}
.connection-avatar img,
.rising-avatar img,
.gem-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.connection-info,
.rising-info,
.gem-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.connection-name,
.rising-name,
.gem-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.connection-meta,
.rising-why,
.gem-reason {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rising-badge {
    flex: none;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.rising-badge.rising-emerging {
    background: rgba(16, 185, 129, 0.14);
    color: #10B981;
}
.rising-badge.rising-strengthening {
    background: rgba(110, 75, 255, 0.16);
    color: var(--accent-text);
}

.connection-score { flex: none; }
.score-badge {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
}
.pulse-ring { display: none; }
.gem-indicator {
    position: absolute;
    right: -2px;
    bottom: -2px;
    font-size: 0.7rem;
    line-height: 1;
}
.gem-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.loading-placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.pulse-grid {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.pulse-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    transition: all var(--transition-fast);
}

.pulse-card:hover {
    border-color: var(--border-accent);
}

.pulse-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pulse-card h3 svg {
    color: var(--accent-text);
}

/* Network Score Ring */
.network-score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0;
}

.score-ring {
    position: relative;
    width: 180px;
    height: 180px;
}

.score-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.score-ring-bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 10;
}

.score-ring-progress {
    fill: none;
    stroke: url(#scoreGradient);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-ring-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-ring-value .score-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-text);
    line-height: 1;
}

.score-ring-value .score-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.score-status {
    margin-top: 0.85rem;
    padding: 0.4rem 1.25rem;
    background: rgba(149, 128, 255, 0.08);
    border: 1px solid rgba(149, 128, 255, 0.2);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--accent-text);
    font-weight: 500;
}

/* Strength Distribution */
.strength-bars {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.strength-bar-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.strength-label {
    width: 70px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.strength-bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.strength-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.6rem;
    min-width: 36px;
}

.strength-bar.strong {
    background: #10B981;
}

.strength-bar.growing {
    background: var(--accent-primary);
}

.strength-bar.stable {
    background: var(--accent-cyan);
}

.strength-bar.fading {
    background: #F59E0B;
}

.strength-bar.dormant {
    background: #6B7280;
}

.strength-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Top Connections */
.top-connections-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.top-connection-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.top-connection-item:hover {
    background: rgba(149, 128, 255, 0.06);
}

.connection-rank {
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.connection-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 0.9rem;
}

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

.connection-info .name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-info .role {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-score {
    padding: 0.2rem 0.6rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-green);
}

/* Neglected Gems */
.neglected-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.neglected-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem;
    background: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.neglected-item:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.neglected-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F59E0B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 0.9rem;
}

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

.neglected-info .name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neglected-info .last-contact {
    font-size: 0.75rem;
    color: var(--accent-yellow);
}

.reconnect-btn {
    padding: 0.4rem 0.85rem;
    background: #F59E0B;
    border: none;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.reconnect-btn:hover {
    background: #D97706;
}

/* Activity Heatmap */
.heatmap-container {
    padding: 0.75rem 0;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    margin-bottom: 0.85rem;
}

.heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heatmap-day {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--bg-tertiary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.heatmap-day:hover {
    transform: scale(1.15);
    z-index: 10;
}

.heatmap-day.level-0 { background: var(--bg-tertiary); }
.heatmap-day.level-1 { background: rgba(149, 128, 255, 0.15); }
.heatmap-day.level-2 { background: rgba(149, 128, 255, 0.3); }
.heatmap-day.level-3 { background: rgba(149, 128, 255, 0.5); }
.heatmap-day.level-4 { background: rgba(149, 128, 255, 0.7); }
.heatmap-day.level-5 { background: var(--accent-primary); }

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.legend-scale {
    display: flex;
    gap: 2px;
}

.legend-scale span {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* AI Insights */
.insights-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.insight-item {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--accent-primary);
    transition: all var(--transition-fast);
}

.insight-item:hover {
    background: rgba(149, 128, 255, 0.04);
}

.insight-item.positive {
    border-left-color: var(--accent-green);
}

.insight-item.warning {
    border-left-color: var(--accent-yellow);
}

.insight-item.suggestion {
    border-left-color: var(--accent-cyan);
}

.insight-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-item.positive .insight-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

.insight-item.warning .insight-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-yellow);
}

.insight-item.suggestion .insight-icon {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-cyan);
}

.insight-content {
    flex: 1;
}

.insight-content p {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.insight-content .insight-metric {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Diversity Chart */
.diversity-chart-container {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diversity-chart {
    width: 100%;
    height: 100%;
}

/* Network Pulse Animations */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(149, 128, 255, 0.2); }
    50% { box-shadow: 0 0 16px rgba(149, 128, 255, 0.4); }
}

.pulse-card.highlight {
    animation: pulseGlow 2s ease-in-out infinite;
}

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

.pulse-card {
    animation: fadeInUp 0.4s ease-out forwards;
}

.pulse-card:nth-child(1) { animation-delay: 0.05s; }
.pulse-card:nth-child(2) { animation-delay: 0.1s; }
.pulse-card:nth-child(3) { animation-delay: 0.15s; }

/* Empty State */
.pulse-empty {
    text-align: center;
    padding: 2.5rem;
    color: var(--text-muted);
}

.pulse-empty svg {
    width: 56px;
    height: 56px;
    margin-bottom: 0.85rem;
    opacity: 0.5;
}

/* Loading State */
.pulse-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}

.pulse-loader {
    width: 36px;
    height: 36px;
    border: 2px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Pulse Page Responsive */
@media (max-width: 1400px) {
    .pulse-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .pulse-card.full-width {
        grid-column: span 2;
    }
}

@media (max-width: 1000px) {
    .pulse-grid {
        grid-template-columns: 1fr;
    }
    
    .pulse-card.full-width {
        grid-column: span 1;
    }
    
    .pulse-header h1 {
        font-size: 1.75rem;
    }
    
    .score-ring {
        width: 140px;
        height: 140px;
    }
    
    .score-ring-value .score-number {
        font-size: 2.25rem;
    }
}

@media (max-width: 600px) {
    .pulse-page {
        padding: 1rem;
    }
    
    .heatmap-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .insight-item {
        flex-direction: column;
        gap: 0.4rem;
    }
}

/* ============== Connection Discovery Page ============== */
.discover-page {
    padding: 1.5rem;
    max-width: 1350px;
    margin: 0 auto;
}

.discover-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.discover-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-text);
    margin-bottom: 0.4rem;
}

.discover-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Search Section */
.discover-search-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.search-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.search-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-tab:hover {
    background: rgba(149, 128, 255, 0.06);
    color: var(--text-primary);
}

.search-tab.active {
    background: var(--accent-primary);
    border-color: transparent;
    color: white;
}

.search-tab svg {
    width: 16px;
    height: 16px;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.search-input-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.4rem 0.85rem;
    transition: all var(--transition-fast);
}

.search-input-group:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.1);
}

.search-input-group svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    padding: 0.4rem 0;
    outline: none;
}

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

.search-filters {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.search-filters select {
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 140px;
}

.search-filters select:hover {
    border-color: var(--border-accent);
}

.search-filters select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.1);
}

/* Quick Discover */
.quick-discover {
    margin-bottom: 1.5rem;
}

.quick-discover h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

.quick-chips {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.quick-chip {
    padding: 0.4rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-chip:hover {
    background: var(--accent-primary);
    border-color: transparent;
    color: white;
}

/* Results Section */
.discover-results {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.results-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.results-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Discover Card */
.discover-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    transition: all var(--transition-fast);
    animation: fadeInUp 0.35s ease-out forwards;
    opacity: 0;
}

.discover-card:hover {
    border-color: var(--border-accent);
}

.discover-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.discover-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 1.1rem;
    overflow: hidden;
}

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

.discover-source-badge {
    padding: 0.3rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-card-body {
    margin-bottom: 1rem;
}

.discover-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.discover-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-company {
    font-size: 0.8rem;
    color: var(--accent-text);
    margin-bottom: 0.2rem;
}

.discover-location {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.discover-card-stats {
    display: flex;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.85rem;
}

.discover-card-stats span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.discover-card-stats svg {
    color: var(--accent-text);
}

.discover-card-actions {
    display: flex;
    gap: 0.6rem;
}

.discover-card-actions .btn {
    flex: 1;
    justify-content: center;
}

/* Loading State */
.results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 0.85rem;
}

.discover-loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.results-loading p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Empty State */
.results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.results-empty svg {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 0.85rem;
}

.results-empty p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Load More */
.load-more {
    display: flex;
    justify-content: center;
    padding-top: 1.25rem;
}

/* Import Modal Styles */
.import-preview {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 1.25rem;
}

.import-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 1.25rem;
    overflow: hidden;
}

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

.import-info h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.import-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
    transform: translateY(100px);
    opacity: 0;
    transition: all var(--transition-base);
    z-index: 10000;
    font-size: 0.9rem;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success {
    border-left: 3px solid var(--accent-green);
}

.toast-error {
    border-left: 3px solid var(--accent-red);
}

.toast-info {
    border-left: 3px solid var(--accent-primary);
}

/* Discovery Responsive */
@media (max-width: 1000px) {
    .discover-page {
        padding: 1rem;
    }
    
    .discover-header h1 {
        font-size: 1.75rem;
    }
    
    .search-tabs {
        justify-content: center;
    }
    
    .search-input-group {
        flex-wrap: wrap;
    }
    
    .search-input-group input {
        width: 100%;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .search-tab {
        padding: 0.5rem 0.85rem;
        font-size: 0.75rem;
    }
    
    .search-tab svg {
        display: none;
    }
    
    .search-filters {
        flex-direction: column;
    }
    
    .search-filters select {
        width: 100%;
    }
    
    .quick-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.4rem;
    }
    
    .quick-chip {
        flex-shrink: 0;
    }
    
    .discover-card-actions {
        flex-direction: column;
    }
}

/* ============================
   LABS - EXPERIMENTAL FEATURES
   ============================ */

.labs-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.labs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.labs-title-section h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0;
}

.labs-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 500px;
    margin: 0;
}

.labs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.labs-badge svg {
    width: 14px;
    height: 14px;
}

.labs-stats {
    display: flex;
    gap: 1.5rem;
}

.labs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.labs-stat .stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.labs-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.labs-experiments {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.experiment-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.75rem;
    transition: var(--transition-fast);
}

.experiment-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.experiment-card.experiment-coming-soon {
    opacity: 0.6;
}

.experiment-card.experiment-coming-soon:hover {
    opacity: 0.7;
}

.experiment-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.experiment-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 12px;
    flex-shrink: 0;
}

.experiment-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-text);
}

.experiment-icon.muted {
    background: rgba(255, 255, 255, 0.05);
}

.experiment-icon.muted svg {
    color: var(--text-muted);
}

.experiment-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.experiment-title-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.experiment-status {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
}

.experiment-status.status-beta {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.experiment-status.status-coming {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.experiment-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.correlation-factors {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.correlation-factors li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.correlation-factors li strong {
    color: var(--text-primary);
}

.correlation-controls {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.confidence-slider-section {
    max-width: 400px;
}

.confidence-slider-section label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.slider-with-value {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider-with-value input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
}

.slider-with-value input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-fast);
}

.slider-with-value input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.slider-value {
    min-width: 45px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-text);
}

.slider-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.4rem 0 0 0;
}

.correlation-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.correlation-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.correlation-actions .btn svg {
    width: 16px;
    height: 16px;
}

.correlation-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Results Section */
.correlation-results {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.results-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.results-summary {
    display: flex;
    gap: 1rem;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.summary-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.summary-item.high .dot { background: #10B981; }
.summary-item.medium .dot { background: #F59E0B; }
.summary-item.low .dot { background: #EF4444; }

.suggestions-list {
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}

.suggestions-list::-webkit-scrollbar {
    width: 6px;
}

.suggestions-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: var(--transition-fast);
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.suggestion-item.below-threshold {
    opacity: 0.5;
}

.suggestion-checkbox {
    position: relative;
    display: flex;
    cursor: pointer;
}

.suggestion-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
}

.suggestion-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: var(--transition-fast);
}

.suggestion-checkbox input:checked + .checkmark {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.suggestion-checkbox input:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 7px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.suggestion-contacts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.contact-mini {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.mini-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mini-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mini-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-indicator {
    flex-shrink: 0;
}

.connection-indicator svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.suggestion-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.confidence-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
}

.confidence-badge.high {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.confidence-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.confidence-badge.low {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.reason-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.results-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.results-actions .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.no-suggestions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem;
    text-align: center;
    color: var(--text-muted);
}

.no-suggestions svg {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}

.no-suggestions p {
    margin: 0;
    font-size: 0.9rem;
}

/* Spinner animation for loading states */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 0.85rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.toast-success {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.15);
}

.toast.toast-error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.15);
}

/* Labs page responsive */
@media (max-width: 768px) {
    .labs-header {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .labs-stats {
        width: 100%;
    }
    
    .labs-stat {
        flex: 1;
    }
    
    .correlation-factors {
        grid-template-columns: 1fr;
    }
    
    .suggestion-contacts {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .connection-indicator {
        transform: rotate(90deg);
        align-self: center;
    }
    
    .suggestion-meta {
        align-items: flex-start;
    }
    
    .results-actions {
        justify-content: stretch;
    }
    
    .results-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============== PATHS PAGE (degrees of separation) ============== */

.paths-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.paths-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.paths-header h1 svg { color: var(--accent-text); }

.paths-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.6rem;
    max-width: 640px;
}

.paths-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.paths-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
}

.paths-card h3 {
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.paths-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.paths-controls {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.paths-select-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 180px;
}

.paths-select-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.paths-select-group select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    max-width: 100%;
}

.paths-select-group select:focus {
    outline: none;
    border-color: var(--border-accent);
}

.paths-result { margin-top: 1.4rem; }

.paths-message {
    color: var(--text-secondary);
    padding: 0.9rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.92rem;
}

.paths-message.error { color: var(--accent-red); }
.paths-message.muted { color: var(--text-muted); }

.path-degrees {
    display: inline-block;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.path-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.path-person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
    min-width: 0;
}

.path-person:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.path-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

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

.path-person-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.path-person-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.path-person-sub {
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.path-arrow {
    color: var(--accent-text);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.path-tip {
    margin-top: 1rem;
    color: var(--accent-cyan);
    font-size: 0.88rem;
}

.connectors-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.connector-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.connector-row .path-person {
    flex: 1;
    min-width: 0;
}

.connector-rank {
    color: var(--accent-text);
    font-weight: 700;
    font-size: 0.85rem;
    width: 1.8rem;
    flex-shrink: 0;
}

.connector-stats {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-end;
    flex-shrink: 0;
}

.connector-stat {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.paths-loading {
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.5rem 0;
}

@media (max-width: 1000px) {
    .paths-grid { grid-template-columns: 1fr; }
    .paths-controls { flex-direction: column; align-items: stretch; }
    #path-swap { align-self: center; transform: rotate(90deg); }
}

/* ============== NETWORK GRAPH ENHANCEMENTS ============== */

/* Tool buttons row (Reset / Isolate / Export / Keys) */
.tool-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tool-btn {
    flex: 1 1 auto;
    min-width: 68px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.5rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tool-btn:hover:not(:disabled) {
    border-color: var(--border-accent);
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Network Health panel */
.health-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.health-label { color: var(--text-muted); font-size: 0.8rem; }
.health-value { color: var(--text-primary); font-weight: 600; font-size: 0.85rem; }
.health-subhead {
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.health-connector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    transition: background 0.15s ease;
}
.health-connector:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.health-connector-deg {
    background: var(--accent-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
}
.health-loading { color: var(--text-muted); font-size: 0.82rem; padding: 0.4rem 0; }

/* Contact panel tags */
.panel-tag {
    display: inline-block;
    background: var(--bg-elevated);
    color: var(--accent-text);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    margin: 0.1rem 0.15rem 0.1rem 0;
}
.detail-tags .detail-value { text-align: right; }

/* Focus-mode banner (ego network / isolate) */
.focus-banner {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--gradient-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
    animation: fadeInDown 0.25s ease;
}
.focus-exit {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.focus-exit:hover { background: rgba(255, 255, 255, 0.3); }
@keyframes fadeInDown {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Transient toast */
.graph-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    z-index: 200;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-accent);
    border-radius: 10px;
    padding: 0.65rem 1.1rem;
    font-size: 0.85rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.graph-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Keyboard shortcuts overlay */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}
.shortcuts-overlay[hidden] { display: none; }
.shortcuts-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    min-width: 300px;
    box-shadow: var(--shadow-lg);
}
.shortcuts-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}
.shortcuts-head h3 { margin: 0; color: var(--text-primary); }
.shortcuts-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}
.shortcuts-close:hover { color: var(--text-primary); }
.shortcuts-list { list-style: none; padding: 0; margin: 0; }
.shortcuts-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.shortcuts-list kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0.1rem 0.5rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    min-width: 1.6rem;
    text-align: center;
}

/* ============== vCARD IMPORT CARD (Apple / Google / Android / Outlook) ============== */

.vcard-icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(16, 185, 129, 0.15)) !important;
}

.vcard-howto {
    margin: 1.25rem 0;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 0.9rem;
}
.howto-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.howto-tab {
    flex: 1 1 auto;
    min-width: 76px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.howto-tab:hover { color: var(--text-primary); border-color: var(--border-accent); }
.howto-tab.active {
    background: var(--gradient-primary, linear-gradient(135deg,var(--accent-tertiary),#06B6D4));
    color: #fff;
    border-color: transparent;
}
.howto-panel {
    margin: 0;
    padding-left: 1.4rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.howto-panel:not(.active) { display: none; }
.howto-panel li { margin-bottom: 0.3rem; }
.howto-panel code {
    background: var(--bg-tertiary);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

.vcard-upload {
    border: 2px dashed var(--accent-cyan, #06B6D4) !important;
    background: rgba(6, 182, 212, 0.03);
}
.vcard-upload:hover, .vcard-upload.drag-over {
    background: rgba(6, 182, 212, 0.08);
}

/* ============================================================================
   BRAND V2 — auth screen, rainbow accents, motion system
   ========================================================================== */

/* ---- Auth screen (sign in / magic link / reset) ---- */

/* .main-content is a block, so `flex: 1` on .auth-page below was inert and the
   card sat at the top of the content area instead of the middle of the screen.
   Making the parent a flex column only on auth pages is what lets the child
   actually claim the leftover height. */
.main-content:has(.auth-page) {
    display: flex;
    flex-direction: column;
    /* The card carries its own padding and .auth-page adds its own air, so the
       wrapper's 2rem top and bottom only pushed the page into a scrollbar.
       Horizontal padding stays.

       This is more specific than the mobile `.main-content { padding-bottom:
       5.5rem }` further down, so it wins there too. That rule reserves room
       for the bottom nav bar, which is not rendered for a signed-out visitor —
       so on these pages the space was reserved for nothing. */
    padding-top: 0;
    padding-bottom: 0;
}
.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Breathing room on a tall window, but it collapses rather than forcing
       the card off a short one. */
    padding: clamp(1.25rem, 4vh, 3rem) 1rem;
}
/* Only where :has() is unsupported — there the parent stays a block, flex:1
   is inert, and the card would sit at the very top. Applying this
   unconditionally would add height modern browsers do not need and push a
   tall card into a scrollbar. */
@supports not selector(:has(*)) {
    .auth-page { min-height: min(68vh, 620px); }
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    animation: authRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Spectrum hairline across the top of the card — the brand signature.
   Slid with a transform rather than background-position: background-position
   cannot be composited, so it repainted this bar every frame, forever. Two
   copies of the gradient across a double-width bar mean a -50% translate
   loops seamlessly. The card's overflow:hidden clips the overhang. */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 3px;
    background: var(--gradient-spectrum);
    background-size: 50% 100%;
    animation: spectrumDrift 6s linear infinite;
    will-change: transform;
}
.auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(110, 75, 255, 0.45));
    animation: floaty 5s ease-in-out infinite;
    /* Promotes the logo to its own compositor layer, so the drop-shadow is
       rasterised once instead of being recomputed on every frame of the
       float. That recomputation was most of the visible stutter. */
    will-change: transform;
}
.auth-wordmark {
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: 0.75rem;
    letter-spacing: 0.01em;
}
.auth-wordmark strong { font-weight: 700; }
.auth-tagline {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.auth-heading {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.auth-form .form-group { margin-bottom: 1.1rem; }
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-check input { width: auto; }
.form-check label { margin: 0; }
.label-hint { color: var(--text-secondary); font-weight: 400; }
.auth-submit { width: 100%; margin-top: 0.25rem; }
.auth-alt {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
}
.auth-alt a { color: var(--brand-cyan); font-weight: 500; }

/* ---- Rainbow accent utilities ---- */
/* A thin animated spectrum rule; drop <div class="brand-rule"></div> anywhere. */
.brand-rule {
    height: 3px;
    border-radius: 3px;
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 6s linear infinite;
}
/* Stat cards get a per-card spectrum edge that cycles through the palette so a
   row of stats reads as the rainbow, not one flat accent. */
.stat-card, .summary-card { position: relative; overflow: hidden; }
.stat-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--brand-violet);
}
.stat-card:nth-child(6n+1)::after { background: var(--brand-pink); }
.stat-card:nth-child(6n+2)::after { background: var(--brand-orange); }
.stat-card:nth-child(6n+3)::after { background: var(--brand-green); }
.stat-card:nth-child(6n+4)::after { background: var(--brand-cyan); }
.stat-card:nth-child(6n+5)::after { background: var(--brand-blue); }
.stat-card:nth-child(6n+6)::after { background: var(--brand-violet); }

/* ---- Motion system ---- */
/* Global smooth transitions on the things people touch. */
a, button, .btn, .nav-link, .card, .stat-card, .contact-card,
.quick-filter, .toggle-btn, .tool-btn, input, select, textarea,
.summary-card, .import-card {
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal),
                opacity var(--transition-normal);
}

/* Nav links: animated spectrum underline that grows from center on hover. */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-spectrum);
    transition: left var(--transition-normal), right var(--transition-normal);
}
.nav-link:hover::after { left: 18%; right: 18%; }
.nav-link.active::after { left: 0; right: 0; opacity: 0; }

/* Buttons: lift + brand glow on hover. */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 26px rgba(110, 75, 255, 0.45);
}
.btn:active { transform: translateY(0) scale(0.98); }

/* Cards lift gently on hover. */
.stat-card:hover, .contact-card:hover, .summary-card:hover, .import-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Page-load: fade the main content up. Individual cards stagger in. */
/* Auth pages are excluded: .auth-card runs its own authRise, and animating the
   wrapper too meant two nested transforms of different durations compounding —
   which read as a wobble rather than a rise. */
.main-content > *:not(.auth-page) {
    animation: contentRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-card, .contact-card, .summary-card, .pulse-card, .import-card,
.experiment-card, .preview-table tbody tr {
    animation: cardRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4) { animation-delay: 0.16s; }
.contact-card:nth-child(odd) { animation-delay: 0.06s; }
.contact-card:nth-child(even) { animation-delay: 0.10s; }

/* Keyframes */
/* Translate and opacity only. The previous scale(0.98) → scale(1) forced the
   browser to re-rasterise every glyph in the card on each frame, which both
   stuttered and left the text briefly soft. translate3d keeps it on the
   compositor; the motion reads the same. */
@keyframes authRise {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes contentRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spectrumSlide {
    to { background-position: 200% 0; }
}
/* Transform-based twin of spectrumSlide, for elements that can afford a
   double-width bar. Composited rather than repainted, so it costs nothing per
   frame. Kept separate because spectrumSlide is used in nine places and they
   are not all shaped to take a translate. */
@keyframes spectrumDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(110, 75, 255, 0.0); }
    50%      { box-shadow: 0 0 22px rgba(110, 75, 255, 0.35); }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============== IMPORT: progress bar + swipeable carousel ============== */

/* ---- Import history: what actually happened, not what can be inferred ---- */
/* The sidebar filter's one line of explanation. It takes a sentence, so it
   needs to say that it narrows the graph rather than answering -- otherwise it
   reads as a third assistant, which is what it looked like before. */
.ask-hint {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.import-history {
    max-width: 1100px;
    margin: 0 auto 1.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.1rem 1.3rem;
}
.import-history-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
}
.import-history-last {
    margin: 0 0 0.8rem;
    color: var(--text-secondary);
}
.import-history-last.is-due { color: var(--text-primary); }
.import-history-nudge {
    color: var(--brand-cyan);
    font-weight: 500;
    margin-left: 0.35rem;
}
.import-history-empty {
    margin: 0;
    color: var(--text-muted);
}
.import-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.import-history-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.import-history-item:first-child { border-top: 0; }
.import-history-when {
    color: var(--text-muted);
    min-width: 6.5rem;
}
.import-history-source { font-weight: 600; }
.import-history-counts { color: var(--text-secondary); }

.import-progress {
    max-width: 1100px;
    margin: 0 auto 1.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.1rem 1.3rem;
}
.import-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.7rem;
}
.import-progress-label { color: var(--text-secondary); font-size: 0.92rem; }
.import-progress-label strong { color: var(--text-primary); }
.import-progress-count {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
}
.import-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.import-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 6s linear infinite;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 2px;
}
.import-progress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}
.src-chip {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-tertiary);
}
.src-chip.done {
    color: var(--brand-green);
    border-color: rgba(0, 224, 144, 0.4);
    background: rgba(0, 224, 144, 0.08);
}

/* Carousel */
.import-carousel {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.carousel-viewport {
    flex: 1;
    overflow: hidden;
    /* Top room so the "Recommended" badge above each card isn't clipped. */
    padding: 16px 2px 2px;
    border-radius: var(--border-radius-lg);
}
.carousel-track {
    display: flex;
    gap: 0;
    align-items: flex-start;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Each import card becomes a full-width slide inside the viewport. */
.carousel-track .import-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    /* override any grid-span from the featured rule */
    grid-column: auto !important;
    animation: none;  /* slides shouldn't re-trigger the card-rise on swipe */
}
.carousel-arrow {
    flex: 0 0 auto;
    width: 44px;
    align-self: center;
    height: 88px;
    border-radius: var(--border-radius);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-arrow:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--border-accent);
    background: var(--bg-card-hover);
    transform: scale(1.05);
}
.carousel-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: var(--bg-elevated);
    cursor: pointer;
    transition: transform var(--transition-normal), background var(--transition-normal);
}
.carousel-dot:hover { transform: scale(1.2); }
.carousel-dot.active {
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 4s linear infinite;
    transform: scale(1.25);
}

@media (max-width: 640px) {
    .carousel-arrow { display: none; }  /* touch users swipe instead */
}

/* ============== AI reconnect draft (Phase 1) ============== */
.ai-draft-section h2 { display: flex; align-items: center; gap: 0.5rem; }
.ai-badge-dot { font-size: 1.4rem; line-height: 1; color: var(--text-muted); }
.ai-draft-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0.25rem 0 1rem;
}
.ai-draft-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.ai-draft-select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
}
.ai-draft-select:focus { outline: none; border-color: var(--border-accent); }
.ai-draft-output { margin-top: 1rem; }
.ai-draft-text {
    width: 100%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
}
.ai-draft-text:focus { outline: none; border-color: var(--border-accent); }
.ai-draft-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.ai-draft-message {
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.ai-draft-message.error {
    color: var(--accent-red);
    background: rgba(255, 45, 142, 0.08);
    border: 1px solid rgba(255, 45, 142, 0.25);
}

/* ============== Semantic search + Similar contacts ============== */

/* "Smart results" header inside the global-search dropdown. */
.search-results-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

/* Small rainbow-spectrum "AI" pill, reused by the search header and the
   "People like …" section heading. */
.smart-results-tag,
.similar-ai-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--brand-white);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--brand-pink),
        var(--brand-violet),
        var(--brand-cyan)
    );
}

.similar-ai-tag {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* "People like {first_name}" strip on the contact detail page. Mirrors the
   suggestions grid so it reads as part of the same page. */
.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

.similar-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.similar-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-card-hover);
}

.similar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

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

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

.similar-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.similar-role {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* ============== Weekly Network Digest (Phase 4) ============== */
.digest-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    animation: cardRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.digest-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 6s linear infinite;
}
.digest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}
.digest-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
.digest-head h2 svg { color: var(--accent-text); }
.digest-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 5s linear infinite;
}
.digest-refresh {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform var(--transition-normal), color var(--transition-normal);
}
.digest-refresh:hover { color: var(--text-primary); transform: rotate(90deg); }
.digest-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.digest-bullet {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}
.digest-bullet::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-cyan);
}
.digest-bullet:nth-child(2)::before { background: var(--brand-violet); }
.digest-bullet:nth-child(3)::before { background: var(--brand-orange); }
.digest-bullet:nth-child(4)::before { background: var(--brand-green); }
.digest-loading { color: var(--text-muted); font-size: 0.9rem; padding-left: 0; }

/* ============== Quick Capture modal (Phase 5) ============== */
.capture-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: contentRise 0.2s ease both;
}
.capture-modal[hidden] { display: none; }
.capture-dialog {
    width: 100%;
    max-width: 540px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.capture-dialog::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 6s linear infinite;
}
.capture-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.capture-head h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.capture-ai-tag {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    color: #fff;
    background: var(--gradient-spectrum);
    background-size: 200% 100%;
    animation: spectrumSlide 5s linear infinite;
}
.capture-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.capture-close:hover { color: var(--text-primary); }
.capture-hint { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1rem; }
.capture-textarea {
    width: 100%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}
.capture-textarea:focus { outline: none; border-color: var(--border-accent); }
.capture-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.capture-message {
    margin-top: 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.capture-message.error {
    color: var(--accent-red);
    background: rgba(255, 45, 142, 0.08);
    border: 1px solid rgba(255, 45, 142, 0.25);
}
.capture-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 1rem 0 0.4rem;
}
.capture-contact {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
}
.capture-contact-name { font-weight: 600; grid-column: 1; }
.capture-contact-sub { color: var(--text-muted); font-size: 0.8rem; grid-column: 1; }
.capture-tag {
    font-size: 0.68rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}
.capture-tag.new { color: var(--brand-green); background: rgba(0, 224, 144, 0.1); }
.capture-tag.exists { color: var(--brand-cyan); background: rgba(0, 224, 255, 0.1); }
.capture-include { width: 18px; height: 18px; accent-color: var(--accent-primary); }
.capture-pill {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ============== Today — the relationship inbox ============== */
/* One column, generous spacing, a small number of cards. The page is meant to
   be read top to bottom and finished, not scanned like a dashboard. */

.today-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.today-header h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.today-date {
    color: var(--text-muted);
    margin: 0.25rem 0 1.5rem;
    font-size: 0.9rem;
}

.today-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.today-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.today-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

.today-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.today-feed {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.today-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.today-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}

/* The left rule is the only per-kind colour. Everything else stays neutral so
   four card types in a row do not read as a warning panel. */
.today-card-follow_up    { border-left-color: var(--brand-orange); }
.today-card-reconnect    { border-left-color: var(--brand-cyan); }
.today-card-strengthening { border-left-color: var(--brand-green); }
.today-card-introduce    { border-left-color: var(--brand-violet); }

.today-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.today-kind {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.today-kind-follow_up    { color: var(--brand-orange); }
.today-kind-reconnect    { color: var(--brand-cyan); }
.today-kind-strengthening { color: var(--brand-green); }
.today-kind-introduce    { color: var(--brand-violet-text); }

.today-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    white-space: nowrap;
}

.today-badge-very_strong,
.today-badge-strong { color: var(--brand-green); border-color: rgba(0, 224, 144, 0.3); }
.today-badge-dormant { color: var(--text-muted); }

.today-card-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.85rem;
    line-height: 1.35;
}

.today-people {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.today-person {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.3rem 0.85rem 0.3rem 0.3rem;
    transition: background var(--transition-fast);
}

.today-person:hover { background: var(--bg-card-hover); }

.today-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.today-person-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.today-person-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
}

.today-person-company {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.today-people-join {
    color: var(--text-muted);
    font-weight: 600;
}

/* Why / Why now. A two-column definition list so the labels stay out of the
   way of the sentences while remaining real semantic labels. */
.today-reasons {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.3rem 0.9rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}

.today-reasons dt {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 0.15rem;
}

.today-reasons dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.today-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.today-confidence {
    font-size: 0.72rem;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    cursor: help;
}

.today-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.today-empty h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.today-empty p {
    color: var(--text-secondary);
    max-width: 46ch;
    margin: 0 auto 1.4rem;
    line-height: 1.6;
}

.today-empty .btn { margin: 0 0.25rem; }

.today-footnote {
    margin-top: 2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 640px) {
    .today-page { padding: 1.25rem 1rem 2rem; }
    .today-header h1 { font-size: 1.6rem; }
    .today-reasons { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
    .today-reasons dt { padding-top: 0.5rem; }
}

/* ---- Pathfinder: ranked routes (Increment 1) ---- */

.path-route-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.path-route-rank {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.path-alt .path-route-rank { color: var(--text-muted); }

.path-quality {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
}

.path-quality-high { color: var(--brand-green); border-color: rgba(0, 224, 144, 0.35); }
.path-quality-medium { color: var(--brand-yellow); border-color: rgba(255, 214, 0, 0.3); }
.path-quality-low { color: var(--text-muted); }

.path-reasoning {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Alternates sit quieter than the winner — the point is comparison, not noise. */
.path-alt {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    opacity: 0.86;
}

.path-alt:hover { opacity: 1; }

.path-caveat {
    margin: 1.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
    padding-top: 0.75rem;
}

/* ============== Communities (Increment 2) ============== */

.comm-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.comm-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.comm-header h1 svg { color: var(--accent-text); }

.comm-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.25rem;
    max-width: 620px;
    line-height: 1.6;
}

.comm-summary {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.comm-summary strong { color: var(--text-primary); }

.comm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.comm-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.35rem;
    box-shadow: var(--shadow-sm);
}

.comm-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.comm-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    overflow-wrap: anywhere;
}

.comm-rename {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    padding: 0.3rem;
    cursor: pointer;
    display: inline-flex;
    line-height: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.comm-rename:hover { color: var(--accent-text); border-color: var(--border-accent); }
.comm-rename:disabled { opacity: 0.5; cursor: default; }

.comm-auto {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    cursor: help;
}

.comm-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 0.5rem;
}

.comm-stats div { display: flex; flex-direction: column; gap: 0.1rem; }

.comm-stats dt {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.comm-stats dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.comm-stats-note {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.comm-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.comm-topic {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.comm-role { margin-bottom: 0.9rem; }

.comm-role h3 {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.35rem;
}

.comm-role ul { list-style: none; margin: 0; padding: 0; }

.comm-role li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.12rem 0;
}

.comm-role a { color: var(--text-primary); text-decoration: none; }
.comm-role a:hover { color: var(--accent-text); text-decoration: underline; }

.comm-reaches { font-size: 0.72rem; color: var(--text-muted); }

.comm-members {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-subtle);
}

.comm-member img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    display: block;
}

.comm-member-more {
    font-size: 0.72rem;
    color: var(--text-muted);
    padding-left: 0.2rem;
}

.comm-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.comm-empty h2 { font-size: 1.25rem; color: var(--text-primary); margin-bottom: 0.6rem; }

.comm-empty p {
    color: var(--text-secondary);
    max-width: 52ch;
    margin: 0 auto 1.4rem;
    line-height: 1.6;
}

.comm-empty .btn { margin: 0 0.25rem; }

.comm-footnote {
    margin-top: 2.5rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 70ch;
}

@media (max-width: 640px) {
    .comm-page { padding: 1.25rem 1rem 2rem; }
    .comm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============== Goals (Increment 3) ============== */

.goals-page, .goal-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.goals-header h1, .goal-head h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.goals-header h1 svg { color: var(--accent-text); }

.goals-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.75rem;
    max-width: 620px;
    line-height: 1.6;
}

.goals-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.goals-list { display: flex; flex-direction: column; gap: 0.85rem; }

.goal-card {
    display: block;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--border-radius);
    padding: 1.15rem 1.35rem;
    transition: border-color var(--transition-normal), background var(--transition-normal);
}

.goal-card:hover { background: var(--bg-card-hover); border-color: var(--border-accent); }
.goal-card.goal-status-achieved { border-left-color: var(--brand-green); }
.goal-card.goal-status-paused { border-left-color: var(--text-muted); opacity: 0.75; }

.goal-card-head { display: flex; align-items: center; gap: 0.6rem; }

.goal-card-head h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.goal-status {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.goal-status-achieved { color: var(--brand-green); }

.goal-card-desc {
    margin: 0.45rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goal-card-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.7rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.goals-new {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.35rem;
}

.goals-new h2 { font-size: 1rem; color: var(--text-primary); margin: 0 0 1rem; }

.goals-new label, .goal-edit-form label, .goal-add label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.9rem 0 0.35rem;
}

.goals-new input, .goals-new textarea, .goals-new select,
.goal-edit-form input, .goal-edit-form textarea, .goal-edit-form select,
.goal-add select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.88rem;
}

.goals-new textarea, .goal-edit-form textarea { resize: vertical; }
.goals-new button { margin-top: 1rem; width: 100%; }
.goals-optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }

.goals-hint, .goal-muted {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

.goals-hint { margin: 1rem 0 0; }
.goal-muted.small { font-size: 0.72rem; margin-top: 0.75rem; }

.goals-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.goals-empty h2 { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.goals-empty p { color: var(--text-secondary); max-width: 48ch; margin: 0 auto; line-height: 1.6; }

/* ---- goal detail ---- */

.goal-breadcrumb { margin-bottom: 1rem; font-size: 0.85rem; }
.goal-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.goal-breadcrumb a:hover { color: var(--accent-text); }

.goal-desc {
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
    max-width: 70ch;
    line-height: 1.6;
}

.goal-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.9rem 0 1.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.goal-col {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.35rem;
}

.goal-col h2 { font-size: 1rem; color: var(--text-primary); margin: 0 0 0.9rem; }

.goal-col h3 {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.4rem 0 0.5rem;
}

.gap-list, .strength-list, .linked-list, .suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gap {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 0.6rem 0 0.6rem 0.9rem;
    border-left: 2px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.gap-warn { border-left-color: var(--brand-orange); color: var(--text-primary); }

.strength-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    color: var(--text-secondary);
    padding: 0.2rem 0;
    text-transform: capitalize;
}

.strength-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.strength-very_strong, .strength-strong { background: var(--brand-green); }
.strength-active { background: var(--brand-cyan); }
.strength-weak { background: var(--brand-yellow); }
.strength-dormant { background: var(--text-muted); }

.linked-row, .suggest-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.linked-row:last-child, .suggest-row:last-child { border-bottom: 0; }

.linked-row img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.linked-info, .suggest-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.linked-info a, .suggest-info a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.linked-info a:hover, .suggest-info a:hover { color: var(--accent-text); }

.linked-sub, .suggest-reason { font-size: 0.74rem; color: var(--text-muted); }

.linked-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }

.linked-tag {
    font-size: 0.63rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.linked-tag.key { color: var(--accent-text); border-color: var(--border-accent); }
.linked-tag.suggested { color: var(--brand-cyan); }

.linked-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
}

.linked-remove:hover { color: var(--brand-pink); background: var(--bg-tertiary); }
.linked-remove:disabled { opacity: 0.4; cursor: default; }

.suggest-add { font-size: 0.75rem; padding: 0.3rem 0.7rem; flex-shrink: 0; }

.goal-add { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.goal-add-row { display: flex; gap: 0.5rem; }
.goal-add-row select { flex: 1; min-width: 0; }

.goal-settings {
    margin-top: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.35rem;
}

.goal-settings summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.goal-edit-form { margin-top: 1rem; max-width: 520px; }
.goal-edit-form button { margin-top: 1rem; }
.goal-delete { margin-top: 1rem; color: var(--brand-pink); }

@media (max-width: 1000px) {
    .goals-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .goals-page, .goal-page { padding: 1.25rem 1rem 2rem; }
}

/* ============== Organizations (Increment 4) ============== */

.orgs-page, .org-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.orgs-header h1, .org-head h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.orgs-header h1 svg { color: var(--accent-text); }

.orgs-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.75rem;
    max-width: 640px;
    line-height: 1.6;
}

.orgs-proposals {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-orange);
    border-radius: var(--border-radius);
    padding: 1.35rem;
    margin-bottom: 1.75rem;
}

.orgs-proposals h2 { font-size: 1rem; color: var(--text-primary); margin: 0 0 0.5rem; }

.orgs-proposals-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.15rem;
    max-width: 66ch;
}

.orgs-proposal {
    padding: 0.9rem 0;
    border-top: 1px solid var(--border-subtle);
}

.orgs-proposal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.orgs-proposal-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.orgs-proposal-option:hover { border-color: var(--border-accent); }
.orgs-proposal-name { color: var(--text-primary); font-weight: 500; }
.orgs-proposal-count { color: var(--text-muted); font-size: 0.75rem; }

.orgs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.org-card {
    display: block;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.15rem 1.25rem;
    transition: border-color var(--transition-normal), background var(--transition-normal);
}

.org-card:hover { background: var(--bg-card-hover); border-color: var(--border-accent); }

.org-card h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    overflow-wrap: anywhere;
}

.org-card-industry {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.org-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.8rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.org-card-stats strong { color: var(--text-primary); }
.org-live { color: var(--brand-green); }
.org-dormant { color: var(--text-muted); }

.orgs-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.orgs-empty h2 { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.orgs-empty p { color: var(--text-secondary); max-width: 50ch; margin: 0 auto; line-height: 1.6; }

.orgs-backfill {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.orgs-backfill-note {
    font-size: 0.76rem;
    color: var(--text-muted);
    max-width: 52ch;
    line-height: 1.55;
}

/* ---- organization detail ---- */

.org-breadcrumb { margin-bottom: 1rem; font-size: 0.85rem; }
.org-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.org-breadcrumb a:hover { color: var(--accent-text); }

.org-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.7rem 0 1.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.org-col {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.35rem;
}

.org-col h2 { font-size: 1rem; color: var(--text-primary); margin: 0 0 0.9rem; }

.org-col h3 {
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.35rem 0 0.5rem;
}

.org-people-list, .org-plain-list { list-style: none; margin: 0; padding: 0; }

.org-people-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.org-people-list li:last-child { border-bottom: 0; }

.org-people-list img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.org-person-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.org-person-info a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.org-person-info a:hover { color: var(--accent-text); }
.org-person-title { font-size: 0.74rem; color: var(--text-muted); }

.org-strength {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    white-space: nowrap;
}

.org-strength-very_strong, .org-strength-strong { color: var(--brand-green); }
.org-strength-active { color: var(--brand-cyan); }

.org-strongest { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.org-strongest a { color: var(--text-primary); }

.org-plain-list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.15rem 0;
}

.org-count { color: var(--text-muted); font-size: 0.75rem; }

.org-muted, .org-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

.org-note {
    margin-top: 1.5rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--border-color);
}

.org-settings {
    margin-top: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.35rem;
}

.org-settings summary { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.org-edit-form { margin-top: 1rem; max-width: 480px; }

.org-edit-form label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.9rem 0 0.35rem;
}

.org-edit-form input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.88rem;
}

.org-edit-form button { margin-top: 1rem; }

@media (max-width: 640px) {
    .orgs-page, .org-page { padding: 1.25rem 1rem 2rem; }
    .orgs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============== Contact history timeline (Increment 7) ============== */

.history-summary { margin-bottom: 1.25rem; }

.history-sentence {
    margin: 0 0 0.35rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.history-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.history-topics-label {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.history-topic {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.history-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.15rem;
    position: relative;
}

.history-list::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border-color);
}

.history-item {
    position: relative;
    padding: 0 0 1.1rem 0;
}

.history-item::before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.history-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.history-date { font-size: 0.8rem; color: var(--text-primary); font-weight: 500; }

.history-kind,
.history-direction,
.history-attended {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.history-direction { color: var(--brand-cyan); }
.history-attended { color: var(--brand-violet-text); }

.history-notes,
.history-intro,
.history-others {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.history-intro a, .history-others a { color: var(--text-primary); text-decoration: none; }
.history-intro a:hover, .history-others a:hover { color: var(--accent-text); }
.history-others { color: var(--text-muted); font-size: 0.78rem; }

/* ============== Provenance (Increment 8) ============== */

.provenance-section summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.provenance-section summary::-webkit-details-marker { display: none; }

.provenance-summary-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.provenance-section summary::before {
    content: '›';
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: transform var(--transition-fast);
    display: inline-block;
}

.provenance-section[open] summary::before { transform: rotate(90deg); }

.provenance-intro {
    margin: 0.75rem 0 1rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 66ch;
}

ul.provenance-list { list-style: none; margin: 0; padding: 0; }

.provenance-item {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-subtle);
}

/* Anything not asserted by a human is visually softer — a guess must not
   look like a typed fact. */
.provenance-item.is-soft { opacity: 0.9; }
.provenance-item.is-soft .provenance-statement { font-style: italic; }

.provenance-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.provenance-subject {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.provenance-origin {
    font-size: 0.66rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.provenance-origin-user { color: var(--brand-green); }
.provenance-origin-imported { color: var(--brand-cyan); }
.provenance-origin-inferred { color: var(--brand-orange); }
.provenance-origin-computed { color: var(--accent-text); }
.provenance-origin-unknown { color: var(--text-muted); border-style: dashed; }

.provenance-confidence { font-size: 0.66rem; color: var(--text-muted); }

.provenance-statement {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.provenance-detail {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 70ch;
}

/* ============== Duplicate review (Increment 9) ============== */

.dupe-page { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.dupe-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.dupe-header h1 svg { color: var(--accent-text); }

.dupe-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.75rem;
    max-width: 620px;
    line-height: 1.6;
}

.dupe-list { display: flex; flex-direction: column; gap: 1.25rem; }

.dupe-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-orange);
    border-radius: var(--border-radius);
    padding: 1.35rem;
}

.dupe-confidence {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-orange);
    margin-bottom: 0.6rem;
}

.dupe-reasons { list-style: none; margin: 0 0 1rem; padding: 0; }

.dupe-reasons li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.1rem 0;
}

.dupe-reasons li::before { content: '· '; color: var(--text-muted); }

.dupe-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dupe-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.8rem 0.9rem;
    cursor: pointer;
}

.dupe-choice:hover { border-color: var(--border-accent); }
.dupe-choice-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dupe-name { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.dupe-line { font-size: 0.76rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.dupe-meta { color: var(--text-muted); }

.dupe-view {
    font-size: 0.74rem;
    color: var(--accent-text);
    text-decoration: none;
    margin-top: 0.2rem;
}

.dupe-note {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1rem;
    max-width: 68ch;
}

.dupe-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.dupe-empty h2 { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.dupe-empty p { color: var(--text-secondary); max-width: 52ch; margin: 0 auto; line-height: 1.6; }

.dupe-history { margin-top: 2.5rem; }
.dupe-history h2 { font-size: 1rem; color: var(--text-primary); margin-bottom: 0.75rem; }
.dupe-history ul { list-style: none; margin: 0; padding: 0; }

.dupe-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dupe-undone { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============== Calendar import (Increment 10) ============== */

.cal-page { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.cal-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.cal-header h1 svg { color: var(--accent-text); }

.cal-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.75rem;
    max-width: 640px;
    line-height: 1.6;
}

.cal-upload, .cal-explainer, .cal-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.cal-explainer { margin-top: 1.25rem; }
.cal-explainer h2 { font-size: 1rem; color: var(--text-primary); margin: 0 0 0.75rem; }
.cal-explainer ul { margin: 0; padding-left: 1.1rem; }

.cal-explainer li {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.cal-upload label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.cal-upload input[type="file"] {
    display: block;
    width: 100%;
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.cal-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; margin: 1rem 0 0; }

.cal-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cal-stats strong { color: var(--text-primary); }

.cal-bulk { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.cal-bulk .btn { font-size: 0.78rem; padding: 0.35rem 0.8rem; }

.cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.cal-event {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.15rem;
}

.cal-event-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.cal-date { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-summary { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.cal-location { font-size: 0.74rem; color: var(--text-muted); }

.cal-people { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.cal-person {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.cal-person-name { font-size: 0.85rem; color: var(--text-primary); }
.cal-person-how { font-size: 0.7rem; color: var(--text-muted); }

.cal-unmatched {
    margin: 0.7rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.cal-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; }

.cal-empty { text-align: center; }
.cal-empty h2 { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.cal-empty p { color: var(--text-secondary); max-width: 54ch; margin: 0 auto 1.25rem; line-height: 1.6; }

/* ============== Ask Node (Increment 11) ============== */

.ask-page { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.ask-header h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.ask-header h1 svg { color: var(--accent-text); }

.ask-description {
    color: var(--text-secondary);
    margin: 0.4rem 0 1.5rem;
    max-width: 620px;
    line-height: 1.6;
}

.ask-box { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.ask-box input {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.ask-box input:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.ask-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.75rem; }

.ask-example {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.ask-example:hover { color: var(--text-primary); border-color: var(--border-accent); }

.ask-result:empty { display: none; }

.ask-answer {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

/* An honest refusal should not look like a failure. */
.ask-answer.ask-refused { color: var(--brand-yellow); }

.ask-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.15rem;
    max-width: 68ch;
}

.ask-people { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.ask-person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.ask-person-name { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.ask-person-name:hover { color: var(--accent-text); }
.ask-person-sub { font-size: 0.78rem; color: var(--text-secondary); }
.ask-person-why { font-size: 0.74rem; color: var(--text-muted); margin-left: auto; }

.ask-source {
    font-size: 0.74rem;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
    padding-top: 0.7rem;
    margin: 0;
}

.ask-narrate {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    cursor: pointer;
}

.ask-narrate-note { font-size: 0.72rem; color: var(--text-muted); }

/* ============== Grouped navigation ==============
   The bar previously carried 17 flat links: 2017px of nav in a 1440px window,
   which forced the whole document to 2935px and pushed every page into the
   left half of the screen. Five top-level items now cover the same
   destinations, and menus open on click so they work on touch. */

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}

.nav-group { position: relative; }

.nav-group-toggle {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.nav-chev {
    display: inline-flex;
    opacity: 0.55;
    transition: transform var(--transition-fast);
}

.nav-group.open .nav-chev { transform: rotate(180deg); }

.nav-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 260px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    display: none;
    z-index: 1100;
}

.nav-group.open .nav-menu { display: block; }

.nav-menu-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.nav-menu-item:hover { background: var(--bg-card-hover); }
.nav-menu-item.active { background: var(--accent-wash, rgba(110,75,255,0.12)); }

.nav-menu-label { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; }
.nav-menu-blurb { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }

/* ============== Mobile navigation ============== */

.mobile-bar { display: none; }
.mobile-drawer { display: none; }

@media (max-width: 1000px) {
    .navbar { padding: 0 1rem; }
    .nav-links { display: none; }
    .nav-actions .btn span,
    .nav-actions form { display: none; }

    .mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1200;
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border-color);
        padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.4rem 0.2rem;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 0.66rem;
        color: var(--text-muted);
        text-decoration: none;
        cursor: pointer;
        min-height: 48px;
        justify-content: center;
    }

    .mobile-tab.active { color: var(--accent-text); }
    .mobile-tab svg { flex-shrink: 0; }

    /* Keep the bottom bar from covering the end of a page. */
    .main-content { padding-bottom: 5.5rem; }

    .mobile-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: rgba(0, 0, 0, 0.6);
    }

    .mobile-drawer[hidden] { display: none; }

    .mobile-drawer-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 82vh;
        overflow-y: auto;
        background: var(--bg-secondary);
        border-top-left-radius: var(--border-radius-lg);
        border-top-right-radius: var(--border-radius-lg);
        border-top: 1px solid var(--border-color);
        padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
    }

    .mobile-drawer-close {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        padding: 0 0.4rem;
    }

    .mobile-drawer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .mobile-drawer-links a {
        display: block;
        padding: 0.75rem 0.85rem;
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--border-radius-sm);
        color: var(--text-primary);
        text-decoration: none;
        font-size: 0.85rem;
    }

    .mobile-drawer-logout { margin-top: 0.75rem; }

    .mobile-drawer-logout button {
        width: 100%;
        padding: 0.75rem;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 0.85rem;
        cursor: pointer;
    }

    body.drawer-open { overflow: hidden; }
}

/* Below the phone breakpoint the search box is the only thing competing with
   the brand, and it was being clipped. */
@media (max-width: 560px) {
    .nav-actions .search-box input { width: 100%; min-width: 0; }
    .nav-actions { flex: 1; min-width: 0; margin-left: 0.75rem; }
}


/* On a phone the bottom bar already has an Ask tab, and a floating bubble on
   top of a fixed tab bar is two competing entry points to the same thing. */
@media (max-width: 1000px) {
    .assistant-trigger,
    .assistant-panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-panel { transition: none; }
}

.nav-logout { display: inline; margin: 0; }

@media (max-width: 1000px) {
    /* Icons stay, labels go. Sign out lives in the drawer. */
    .btn-label { display: none; }
    .nav-logout { display: none; }
}

@media (max-width: 640px) {
    /* Two contact pickers and a swap button will not sit in a row on a phone. */
    .paths-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .paths-select-group { width: 100%; }
    .paths-controls select,
    .paths-controls .btn { width: 100%; }
    #path-swap { align-self: center; width: auto; }
    .paths-grid { grid-template-columns: minmax(0, 1fr); }
    .path-chain { flex-wrap: wrap; }
}

@media (max-width: 1000px) {
    /* The top bar on a phone is: brand, search, capture. "Add contact" lives
       in the drawer; the bottom bar covers navigation. Anything more and the
       row stops fitting, which is what pushed the document past the viewport. */
    .nav-actions > .btn-primary { display: none; }
    .nav-actions {
        flex: 1;
        min-width: 0;
        gap: 0.5rem;
        justify-content: flex-end;
    }
    .nav-actions .search-box { flex: 1; min-width: 0; }
    .nav-actions .search-box input { width: 100%; min-width: 0; }
    .nav-actions .btn { flex-shrink: 0; padding: 0.5rem 0.6rem; }
}

@media (max-width: 480px) {
    /* Reclaim the wordmark's width for the search field. */
    .brand-text { display: none; }
}

@media (max-width: 420px) {
    /* Two-up quick filters and the settings grid both assume more room than a
       small phone has. */
    .quick-filters { grid-template-columns: minmax(0, 1fr); }
    .quick-pill { width: 100%; min-width: 0; }
    .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-section { min-width: 0; }
    .header-actions { flex-wrap: wrap; }
    .header-actions .btn { flex: 1; min-width: 0; justify-content: center; }
}

/* ---- Navbar sizing ----
   The three regions were all shrinkable, so at narrower widths .nav-links was
   squeezed below its content and its buttons spilled into the actions. The
   links keep their natural width; the search field is the elastic part. */

.navbar { gap: 1.25rem; }

.nav-links { flex-shrink: 0; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.nav-actions .search-box {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 300px;
}

.nav-actions .search-box input { width: 100%; min-width: 0; }
.nav-actions .btn { flex-shrink: 0; white-space: nowrap; }

/* Between the phone breakpoint and a roomy desktop, drop the button words and
   keep their icons — that is ~250px back without losing a destination. */
@media (max-width: 1320px) {
    .btn-label { display: none; }
}


/* ---- Network controls ----
   The panel's selects were wider than their container, so the layout option
   read "Force Directe". */
.network-controls select,
.controls-panel select,
.control-group select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.control-row,
.controls-grid {
    min-width: 0;
}

/* Hidden modals should leave the layout, not sit in it at full height. */
.modal[hidden],
.modal:not(.active):not(.open) {
    display: none !important;
}

.comm-summary-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 72ch;
}

/* Suggestions are buttons now rather than <li onclick>, so they need the
   list-item look restoring and the button chrome removing. */
.example-queries li button {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.example-queries li button:hover,
.example-queries li button:focus-visible {
    color: var(--accent-text);
}

/* ==========================================================================
   Contacts as an intelligence surface
   ==========================================================================
   The list used to answer only "who is in here" — a name, a job title, and how
   many days since the last contact. The number of days is a fact about the
   calendar, not about the relationship: a quarterly friendship at 80 days is
   healthy and a weekly collaborator at 40 is not. These two pills put the
   engine's reading on the row instead: where the relationship stands, and
   which way it is moving.
   ========================================================================== */

.strength-pill {
    --pill: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.5rem 0.18rem 0.3rem;
    border: 1px solid color-mix(in srgb, var(--pill) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pill) 12%, transparent);
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: help;
}

.strength-pill .strength-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pill) 22%, transparent);
    color: var(--pill);
    font-weight: 700;
    /* Scores sit in a column down the list; keep the digits aligned. */
    font-variant-numeric: tabular-nums;
}

.strength-pill .strength-label {
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.strength-pill--very_strong { --pill: var(--brand-green); }
.strength-pill--strong      { --pill: var(--brand-lime); }
.strength-pill--active      { --pill: var(--brand-cyan); }
.strength-pill--weak        { --pill: var(--brand-yellow); }
.strength-pill--dormant     { --pill: var(--text-muted); }

/* Trajectory is deliberately quieter than strength: it is the second question
   a reader asks, not the first. */
.trajectory-pill {
    --pill: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: var(--pill);
    white-space: nowrap;
}

.trajectory-pill--strengthening,
.trajectory-pill--emerging { --pill: var(--brand-green); }
.trajectory-pill--weakening { --pill: var(--brand-orange); }
.trajectory-pill--dormant   { --pill: var(--text-muted); }
.trajectory-pill--new       { --pill: var(--brand-cyan); }

/* Its own column in the row, between the name and the contact details. */
.contact-strength {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    flex-shrink: 0;
}

.contact-strength .trajectory-pill { margin-left: 0; }

.card-strength {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0 1rem 0.6rem;
}

/* Below the point where the row runs out of horizontal room, the pills matter
   more than the email address does. */
@media (max-width: 900px) {
    .contact-row .contact-meta { display: none; }
}

@media (max-width: 560px) {
    .contact-strength .strength-label { display: none; }
}

/* ---- Quick-filter pills for the computed questions ---------------------- */
.quick-pill.dormant.active       { border-color: var(--text-muted); }
.quick-pill.strengthening.active { border-color: var(--brand-green); }
.quick-pill.never.active         { border-color: var(--brand-orange); }

/* ---- Pagination --------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.75rem 0 0.5rem;
}

.pager-link {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.pager-link:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.pager-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pager-position {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.contacts-count .count-page {
    margin-left: 0.4rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Command palette
   ==========================================================================
   Nineteen pages behind five menu groups. Ctrl/Cmd-K puts people and pages in
   one field. Positioned high rather than centred: the list grows downward and
   the field should not move as it does.
   ========================================================================== */

.palette-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 1rem 2rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
}

.palette-overlay[hidden] { display: none; }

.palette {
    width: min(620px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.palette-field {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
}

.palette-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
}

.palette-field input::placeholder { color: var(--text-muted); }

.palette-list {
    flex: 1;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    overflow-y: auto;
}

.palette-section {
    padding: 0.55rem 0.75rem 0.3rem;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    /* Hover does not select — the keyboard owns the selection, and a stray
       pointer should not move it out from under someone typing. The mousemove
       handler syncs the two deliberately. */
}

.palette-item.is-active {
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.palette-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}

.palette-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 7px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.palette-label {
    color: var(--text-primary);
    font-size: 0.92rem;
    white-space: nowrap;
}

.palette-detail {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-empty {
    margin: 0;
    padding: 1.5rem 1.1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
}

.palette-foot {
    display: flex;
    gap: 1.1rem;
    padding: 0.55rem 1.1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.72rem;
}

.palette-foot kbd,
.search-kbd kbd {
    display: inline-block;
    min-width: 1.2em;
    margin-right: 0.15rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
    font-family: inherit;
    font-size: 0.92em;
    line-height: 1.4;
}

/* Nothing behind the palette should scroll while it is open. */
body.palette-open { overflow: hidden; }

/* The visible way in, for anyone who does not know the shortcut. */
.search-kbd {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    padding: 0.1rem 0.2rem;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.search-kbd:hover kbd {
    border-color: var(--accent-primary);
    color: var(--text-secondary);
}

/* The global search input has to leave room for it. */
.search-box { position: relative; }
.search-box input { padding-right: 4.4rem; }

/* No physical keyboard, no shortcut worth advertising — and the palette's own
   field duplicates the search box that is already on screen. */
@media (max-width: 900px) {
    .search-kbd { display: none; }
    .search-box input { padding-right: 0.9rem; }
    .palette-overlay { padding-top: 6vh; }
    .palette-foot { display: none; }
}

/* ==========================================================================
   Today — acting on a card without leaving it
   ==========================================================================
   Every card used to be a link out. You read the suggestion, opened the
   contact, logged something, and found your way back — and a card you had
   decided against came round again the next morning because the feed is
   recomputed from the data every time. These do the work in place.
   ========================================================================== */

.today-put-down {
    position: relative;
    display: inline-flex;
}

.today-put-down-menu {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    min-width: 12.5rem;
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.today-put-down.open .today-put-down-menu { display: flex; }

.today-put-down-menu button {
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.today-put-down-menu button:hover,
.today-put-down-menu button:focus-visible {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* "Never suggest this" is a different kind of statement from "not this week",
   and reads as one. */
.today-put-down-menu button:last-child { color: var(--text-muted); }
.today-put-down-menu button:last-child:hover { color: var(--brand-orange); }

/* ---- The log form ------------------------------------------------------- */
.today-log {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.9rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.today-log[hidden] { display: none; }

.today-log-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.today-log label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 11rem;
    min-width: 0;
}

.today-log label > span {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.today-log select,
.today-log textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.88rem;
}

.today-log textarea { resize: vertical; }

.today-log-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.today-log-status {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---- What is left behind ------------------------------------------------ */
.today-settled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.today-undo {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.today-undo:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

@media (max-width: 560px) {
    .today-log-row { flex-direction: column; }
    .today-put-down-menu { left: auto; right: 0; }
}

/* ==========================================================================
   Quick add
   ==========================================================================
   The full form asks twenty-two questions. This asks one, and offers three
   more. Same overlay treatment as the command palette so the two read as the
   same kind of thing.
   ========================================================================== */

.quick-add-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 1rem 2rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
}

.quick-add-overlay[hidden] { display: none; }

.quick-add {
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-elevated);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.quick-add h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.quick-add label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.quick-add label > span {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* "optional" is said once per field rather than implied by its absence on the
   one field that is not. */
.quick-add label em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

.quick-add input[type="text"],
.quick-add input[type="email"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
}

.quick-add-name input { font-size: 1.02rem; }

.quick-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.quick-add-row label { flex: 1 1 12rem; }

.quick-add-check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.quick-add-check span {
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
}

.quick-add-buttons {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.2rem;
}

.quick-add-full {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-decoration: none;
}

.quick-add-full:hover { color: var(--text-secondary); }

.quick-add-status {
    flex-basis: 100%;
    font-size: 0.82rem;
    color: var(--text-muted);
}

body.quick-add-showing { overflow: hidden; }

@media (max-width: 560px) {
    .quick-add-overlay { padding-top: 6vh; }
    .quick-add-row { flex-direction: column; }
}

/* ==========================================================================
   Contact detail — four panes
   ==========================================================================
   Ten sections in one column ran to about 3,000 pixels: three and a half
   screens, with everything but "How We Met" below the fold. The grouping is
   by what you came to do — read the relationship, read its history, look at
   who else is around them, write to them.

   Progressive enhancement: with no JavaScript no pane carries `.pane-on` and
   nothing is hidden, so the page is what it always was. The rules below only
   bite once the script has run, which is what `.detail-tabs.ready` marks.
   ========================================================================== */

.detail-tabs {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.detail-tabs [role="tab"] {
    position: relative;
    padding: 0.55rem 0.95rem;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.detail-tabs [role="tab"]:hover { color: var(--text-secondary); }

.detail-tabs [role="tab"].is-active { color: var(--text-primary); }

.detail-tabs [role="tab"].is-active::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -0.2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-primary);
}

.detail-tabs.ready ~ [data-pane] { display: none; }
.detail-tabs.ready ~ [data-pane].pane-on { display: block; }

/* A section that hides itself — #similar-section until its fetch returns —
   stays hidden even on the pane it belongs to. */
.detail-tabs.ready ~ [data-pane][hidden] { display: none; }

/* An empty state with no way forward is a dead end with better typography. */
.empty-network-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.empty-network p {
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ---- The shared empty panel (app/templates/_empty_state.html) ----------- */
.empty-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-panel-compact { padding: 1.75rem 1rem; }

.empty-panel-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.empty-panel-body {
    max-width: 52ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}

.empty-panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

/* "Not measured" is a different statement from "none", and should not look
   like a populated section that happens to be empty. */
.comm-role-unmeasured h3 { opacity: 0.75; }

.comm-role-unmeasured p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Present to assistive technology, absent to everyone else. Uses the clip-path
   technique rather than `display: none` or `visibility: hidden`, both of which
   remove the element from the accessibility tree as well as from the page —
   which would defeat the point. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   The contacts list opens through a real link
   ==========================================================================
   Both views were `<div onclick>`: not in the tab order, announced as
   nothing, and measured at zero keyboard-reachable elements inside the whole
   list. The contact's name is now the row's single anchor, stretched to cover
   the row so it still behaves as it looks.
   ========================================================================== */

.contact-row,
.contact-card { position: relative; }

.contact-open {
    color: inherit;
    text-decoration: none;
}

/* The transparent overlay that keeps the whole row clickable. It sits on the
   link rather than the row so there is exactly one target, which is what
   makes it announce correctly. */
.contact-open::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Focus has to be visible on the row, not on the few words of the name — the
   overlay means the link's own box is not where the eye goes. */
.contact-open:focus-visible { outline: none; }

.contact-row:focus-within,
.contact-card:focus-within {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

/* Anything genuinely interactive inside the row has to sit above the overlay
   or the link would swallow its clicks. */
.contact-row .contact-actions,
.contact-row .tag,
.contact-card .tag {
    position: relative;
    z-index: 2;
}

/* The two collapse toggles on the network page became buttons — they perform
   an action and a keyboard has to be able to perform it. These reset the
   button chrome so they look exactly as they did as divs. */
.panel-header,
.legend-header {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

/* The headings inside them became spans, since a button may not contain a
   heading. Restore the type they had. */
.panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.legend-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}