:root {
    color-scheme: dark;
    --bg: #050f0d;
    --surface: rgba(8, 25, 22, 0.78);
    --surface-strong: rgba(9, 33, 29, 0.96);
    --line: rgba(166, 226, 166, 0.18);
    --line-strong: rgba(166, 226, 166, 0.38);
    --ink: #eef7f3;
    --ink-muted: #c4d8d0;
    --accent: #258c70;
    --accent-strong: #146c43;
    --accent-text: #7ddfc0;
    --unrated-border: #8fb8ac;
    --accent-link-hover: #7ddfc0;
    --accent-link-active: #a6e2a6;
    --accent-soft: rgba(125, 223, 192, 0.14);
    --matches-toolbar-icon: #d1d5db;
    --white: #f4fbf7;
    --neutral-050: #10251f;
    --neutral-200: #25473c;
    --blue-050: #0d252a;
    --blue-100: #123139;
    --blue-150: #16404a;
    --blue-200: #1f5360;
    --blue-300: #438496;
    --blue-500: #4b9aac;
    --blue-700: #71bed0;
    --blue-800: #a5e1ed;
    --blue-border-soft: rgba(125, 223, 192, 0.2);
    --blue-border-muted: rgba(125, 223, 192, 0.14);
    --blue-surface-alt: rgba(8, 31, 32, 0.94);
    --blue-surface-soft: rgba(15, 50, 53, 0.78);
    --blue-surface-code: #102c2c;
    --blue-dash-border: #438496;
    --green-success-border: #5fb58e;
    --green-success-bg: #123d2a;
    --status-success-bg: #12313b;
    --status-success-border: #39758a;
    --status-success-ink: #b7dfeb;
    --status-error-bg: #4a2029;
    --status-error-border: #a45868;
    --status-error-ink: #ffc8d1;
    --danger-bg: #8a1f2d;
    --danger-border: #bd4e5d;
    --danger-strong: #e87887;
    --danger-soft: #bd4e5d;
    --fit-score-high: #176d89;
    --fit-score-good: #71bed0;
    --fit-score-warning: #f59e0b;
    --fit-score-low: var(--danger-soft);
    --focus: #a6e2a6;
    --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.28);
    --shadow-strong: 0 14px 32px rgba(0, 0, 0, 0.42);
    --button-press-shadow: inset 0 3px 5px rgba(1, 5, 4, 0.42);
    --shadow-card-hover: 0 6px 14px rgba(0, 0, 0, 0.3);
    --shadow-accent-soft: 0 8px 16px rgba(37, 140, 112, 0.3);
    --shadow-accent-strong: 0 10px 18px rgba(125, 223, 192, 0.22);
    --shadow-danger-soft: 0 8px 16px rgba(138, 31, 45, 0.3);
    --shadow-danger-strong: 0 10px 18px rgba(189, 78, 93, 0.3);
    --focus-ring: 0 0 0 4px rgba(166, 226, 166, 0.24);
    --spinner-ring: rgba(238, 247, 243, 0.65);
    --modal-backdrop: rgba(1, 5, 4, 0.68);
    --skeleton-gradient: linear-gradient(90deg, #123139 25%, #16404a 50%, #123139 75%);
    --app-bg: #050f0d;
    --app-bg-deep: #010504;
    --app-bg-mist: rgba(15, 82, 51, 0.26);
    --app-bg-orbit: rgba(28, 114, 91, 0.24);
    --app-bg-aurora: rgba(98, 190, 160, 0.13);
    --app-bg-blue: rgba(52, 118, 139, 0.14);
    --app-bg-grid: rgba(166, 226, 166, 0.045);
    --app-bg-shimmer: rgba(125, 223, 192, 0.055);
    --app-bg-connector: #7ddfc0;
    --app-bg-connector-end: #a6e2a6;
    --app-bg-mid: #031713;
    --app-bg-primary-stop: 38%;
    --app-bg-secondary-stop: 68%;
}

body {
    min-height: 100vh;
    background-color: var(--app-bg-deep);
    background:
        radial-gradient(circle at 16% 10%, var(--app-bg-aurora), transparent 26rem),
        radial-gradient(circle at 86% 4%, var(--app-bg-blue), transparent 24rem),
        radial-gradient(circle at 72% 72%, var(--app-bg-orbit), transparent 30rem),
        radial-gradient(ellipse at 42% 34%, var(--app-bg-mist), transparent 34rem),
        linear-gradient(115deg, transparent 0 42%, var(--app-bg-shimmer) 46%, transparent 52%),
        linear-gradient(90deg, var(--app-bg-grid) 1px, transparent 1px),
        linear-gradient(0deg, var(--app-bg-grid) 1px, transparent 1px),
        linear-gradient(150deg, var(--app-bg-deep) 0%, var(--app-bg) var(--app-bg-primary-stop), var(--app-bg-mid) var(--app-bg-secondary-stop), var(--app-bg-deep) 100%);
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll;
    background-position: center top, center top, center top, center top, 0 0, 0 0, 0 0, center top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-size: auto, auto, auto, auto, 100% 100%, 42px 42px, 42px 42px, auto;
    animation: app-background-drift 28s ease-in-out infinite alternate;
}

.motion-connector-graphic {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.72;
    overflow: visible;
}

.motion-connector-lines {
    stroke-dasharray: 900 2600;
    animation: connector-line-flow 34s linear infinite;
}

.motion-connector-nodes {
    animation: connector-node-pulse 7s ease-in-out infinite alternate;
    fill: var(--app-bg-connector);
}

.motion-connector-stop-start,
.motion-connector-stop-mid {
    stop-color: var(--app-bg-connector);
}

.motion-connector-stop-end {
    stop-color: var(--app-bg-connector-end);
}

@keyframes connector-line-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -900; }
}

@keyframes connector-node-pulse {
    from { opacity: 0.42; }
    to { opacity: 0.9; }
}

@keyframes app-background-drift {
    from {
        background-position: center top, center top, center top, center top, -8% 0, 0 0, 0 0, center top;
    }
    to {
        background-position: center top, center top, center top, center top, 8% 3%, 21px 10px, -10px 21px, center top;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .motion-connector-lines,
    .motion-connector-nodes {
        animation: none;
    }
}

.topbar,
.footer {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.panel {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: none;
}

@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
    a:not([class]) {
        color: var(--accent-text);
    }

    a:not([class]):hover {
        color: var(--accent-link-active);
    }

    .markdown-preview a {
        color: var(--accent-text);
    }

    .markdown-preview a:hover {
        color: var(--accent-link-active);
    }

    .auth-button,
    .doc-guide-trigger {
        color: #f4fbf7;
    }

    .auth-password-toggle,
    .auth-file-clear,
    .nav-submenu-button {
        color: #b7dfeb;
    }

    .inline-cta {
        color: #9be7c9;
    }

    button.inline-cta,
    .inline-cta.integration-status-toggle {
        color: #9be7c9;
        background: rgba(3, 16, 13, 0.78);
        border-radius: 999px;
    }

    .match-rating-indicator.is-unrated {
        border-color: var(--unrated-border);
    }
}

.app-modal-panel {
    background: var(--surface-strong);
}

.app-toast.is-success {
    border-color: var(--green-success-border);
    background: var(--green-success-bg);
    color: var(--ink);
}

.app-toast.is-error {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-ink);
}

.match-card-collapsible.is-collapsed:hover {
    box-shadow: var(--shadow-card-hover);
}

.match-card-collapsible.is-collapsed:focus-within {
    box-shadow: var(--focus-ring);
}

::selection {
    background: var(--accent);
    color: var(--white);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg: #d7dedf;
        --surface: rgba(255, 255, 255, 0.82);
        --surface-strong: rgba(255, 255, 255, 0.98);
        --line: #c9d7dd;
        --line-strong: #9fbac4;
        --ink: #161d1c;
        --ink-muted: #425654;
        --accent: #0b547e;
        --accent-strong: #073c5b;
        --accent-text: #073c5b;
        --unrated-border: #8a9aa3;
        --accent-link-hover: #0a4c73;
        --accent-link-active: #083b5a;
        --accent-soft: #d9e3ee;
        --matches-toolbar-icon: #214e78;
        --white: #ffffff;
        --neutral-050: #fafafa;
        --neutral-200: #d8d8d8;
        --blue-050: #f2f7fc;
        --blue-100: #e6eff8;
        --blue-150: #d9e7f4;
        --blue-200: #c8dbed;
        --blue-300: #9fbfdf;
        --blue-500: #4f88be;
        --blue-700: #2f679b;
        --blue-800: #214e78;
        --blue-border-soft: #dce5f0;
        --blue-border-muted: #d5e0ef;
        --blue-surface-alt: #fbfdff;
        --blue-surface-soft: #f8fbff;
        --blue-surface-code: #f3f6fb;
        --blue-dash-border: #bfd0e6;
        --green-success-border: #a6e2a6;
        --green-success-bg: #d8fed8;
        --status-success-bg: #ebf4ff;
        --status-success-border: #b7d2ee;
        --status-success-ink: #1c4f79;
        --status-error-bg: #fff1f4;
        --status-error-border: #f0c5cf;
        --status-error-ink: #f06262;
        --danger-bg: #8a1f2d;
        --danger-border: #8a1f2d;
        --danger-strong: #a24350;
        --danger-soft: #bd4e5d;
        --focus: #7397b8;
        --shadow-soft: 0 8px 22px rgba(22, 29, 28, 0.08);
        --shadow-strong: 0 14px 32px rgba(22, 29, 28, 0.14);
        --button-press-shadow: inset 0 3px 5px rgba(7, 60, 91, 0.24);
        --shadow-card-hover: 0 6px 14px rgba(20, 33, 61, 0.08);
        --shadow-accent-soft: 0 8px 16px rgba(47, 103, 155, 0.25);
        --shadow-accent-strong: 0 10px 18px rgba(47, 103, 155, 0.3);
        --shadow-danger-soft: 0 8px 16px rgba(162, 67, 80, 0.25);
        --shadow-danger-strong: 0 10px 18px rgba(162, 67, 80, 0.3);
        --focus-ring: 0 0 0 4px rgba(159, 191, 223, 0.26);
        --spinner-ring: rgba(255, 255, 255, 0.65);
        --modal-backdrop: rgba(17, 29, 41, 0.48);
        --skeleton-gradient: linear-gradient(90deg, #ebf1f9 25%, #dde8f5 50%, #ebf1f9 75%);
        --app-bg: #f5f9fd;
        --app-bg-deep: #fbfdff;
        --app-bg-mist: rgba(159, 191, 223, 0.38);
        --app-bg-orbit: rgba(79, 136, 190, 0.22);
        --app-bg-aurora: rgba(123, 181, 221, 0.2);
        --app-bg-blue: rgba(79, 136, 190, 0.16);
        --app-bg-grid: rgba(7, 60, 91, 0.055);
        --app-bg-shimmer: rgba(79, 136, 190, 0.055);
        --app-bg-connector: #4f88be;
        --app-bg-connector-end: #9fbfdf;
        --app-bg-mid: #e6eff8;
        --app-bg-primary-stop: 42%;
        --app-bg-secondary-stop: 72%;
    }

    .app-toast.is-success {
        border-color: #badbcc;
        background: #d1e7dd;
        color: #146c43;
    }

    .app-toast.is-error {
        border-color: #f5c2c7;
        background: #f8d7da;
        color: #b02a37;
    }

    .match-card-collapsible.is-collapsed:hover {
        box-shadow: 0 8px 22px rgba(26, 54, 93, 0.1);
    }

    .match-card-collapsible.is-collapsed:focus-within {
        box-shadow: 0 0 0 3px rgba(42, 91, 154, 0.14);
    }

    .panel {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: var(--surface);
    }
}