/* Keyword research and report pages */
:root {
    --ink: #0f172a;
    --muted: #64748b;
    --paper: #fbfcfe;
    --card: #fff;
    --line: #e2e8f0;
    --green: #2563eb;
    --green-dark: #1d4ed8;
    --lime: #dbeafe;
    --orange: #2563eb;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --compare-radius-xs: 4px;
    --compare-radius-sm: 6px;
    --compare-radius-md: 8px;
}

* {
    box-sizing: border-box;
}

html {
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--paper);
}

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

button,
input,
select,
textarea {
    font: inherit;
}

.site-header,
.shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.site-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.brand {
    color: var(--ink);
    font-size: 1.3rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.brand::after {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--green);
    content: "";
}

.header-search {
    display: flex;
    width: min(500px, 100%);
    margin-left: auto;
}

.header-search input {
    min-width: 0;
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 9px 0 0 9px;
    outline: 0;
    background: var(--card);
    color: var(--ink);
}

.header-search input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.header-search button,
.header-menu-panel button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.header-search button {
    padding: 0 15px;
    border-radius: 0 9px 9px 0;
    background: var(--green-dark);
    color: #fff;
    font-weight: 750;
}

.header-menus {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.header-menu {
    position: relative;
}

.header-menu-toggle {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    cursor: pointer;
    list-style: none;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.header-menu-toggle::-webkit-details-marker {
    display: none;
}

.header-menu-toggle svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.header-menu:hover .header-menu-toggle,
.header-menu[open] .header-menu-toggle,
.header-menu-toggle:hover {
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.header-menu-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.header-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 9px);
    right: 0;
    display: grid;
    min-width: 210px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.header-menu-panel::before {
    position: absolute;
    top: -9px;
    right: 0;
    left: 0;
    height: 9px;
    content: "";
}

.header-menu-panel strong {
    padding: 12px 15px 8px;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-menu-panel a,
.header-menu-panel button {
    width: 100%;
    padding: 10px 15px;
    background: transparent;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
}

.header-menu-panel form {
    margin: 0;
}

.header-menu-panel a:hover,
.header-menu-panel button:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--green-dark);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.app-page {
    flex: 1;
    width: min(1180px, 100%);
    margin-inline: auto;
    padding: 24px 24px 48px;
}

.hero {
    max-width: 830px;
    margin: 32px 0 50px;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--green);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 820px;
    margin-bottom: 18px;
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hero > p:last-child {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.12rem;
}

.search-panel,
.progress-panel {
    padding: clamp(22px, 4vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow);
}

.research-form label span,
.filter-control span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.primary-field input {
    width: 100%;
    padding: 12px 0 14px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    font-weight: 650;
}

.primary-field input:focus {
    border-color: var(--green);
}

.primary-field input::placeholder {
    color: #b6bcb8;
}

.form-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 30px 0;
}

select {
    width: 100%;
    padding: 11px 34px 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    background: #fff;
    color: var(--ink);
}

select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.primary-button,
.secondary-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--green-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
}

.primary-button {
    background: var(--green-dark);
    color: white;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.primary-button:hover {
    background: var(--green);
}

.secondary-button {
    background: transparent;
    color: var(--green-dark);
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.secondary-button:hover {
    background: var(--lime);
    border-color: var(--green);
    color: var(--green);
}

.form-note {
    display: inline-block;
    max-width: 560px;
    margin: 0 0 0 18px;
    color: var(--muted);
    font-size: 0.78rem;
    vertical-align: middle;
}

.field-error,
.alert {
    color: #9f2f20;
}

.alert {
    margin: 18px 0;
    padding: 12px 15px;
    border: 1px solid #efb8ae;
    border-radius: 8px;
    background: #fff1ee;
}

.recent-section,
.cluster-section {
    margin-top: 70px;
}

.section-heading {
    margin-bottom: 22px;
}

.section-heading.split,
.report-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-heading h2 {
    margin-bottom: 5px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.section-heading p,
.progress-panel p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.recent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.recent-card,
.empty-state {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
}

.recent-card {
    display: flex;
    min-height: 145px;
    flex-direction: column;
    gap: 8px;
    transition: transform 150ms ease, border-color 150ms ease;
}

.recent-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}

.recent-card > span {
    color: var(--muted);
    font-size: 0.78rem;
}

.recent-card .status {
    margin-top: auto;
    color: var(--green);
    font-weight: 700;
}

.site-footer {
    margin-top: auto;
    padding: 28px 24px 32px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.86rem;
}

.site-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr);
    gap: 28px 40px;
    width: min(1180px, 100%);
    margin-inline: auto;
}

.site-footer-brand > :is(strong, a) {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.site-footer-brand a:hover {
    color: var(--compare-brand-blue, #1678fd);
}

.site-footer-brand p {
    margin: 0;
    max-width: 48ch;
    line-height: 1.45;
}

.site-footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px;
}

.site-footer-col h2 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer-col ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-col a,
.site-footer-col span {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.site-footer-col a:hover {
    color: var(--compare-brand-blue, #1678fd);
}

.site-footer-col span[aria-current="page"] {
    color: var(--ink);
}

.site-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 24px;
    width: min(1180px, 100%);
    margin: 22px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
}

.site-footer-copy,
.site-footer-credit {
    margin: 0;
}

.site-footer-credit {
    margin-left: auto;
    text-align: right;
}

.site-footer-credit a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.site-footer-credit a:hover {
    color: var(--compare-brand-blue, #1678fd);
}

.site-footer-credit-sep {
    margin: 0 0.4em;
    opacity: 0.6;
}

.report-heading {
    margin: 24px 0 44px;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.report-actions form {
    margin: 0;
}

.report-heading h1 {
    margin-bottom: 10px;
    font-size: clamp(1.65rem, 4vw, 2.2rem);
}

.report-heading p:last-child {
    color: var(--muted);
}

.progress-topline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.progress-track,
.mini-track {
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.progress-track {
    height: 14px;
    margin-bottom: 18px;
}

.progress-track span,
.mini-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width 300ms ease;
}

.live-counts {
    display: flex;
    gap: 40px;
    margin: 30px 0 0;
}

.live-counts div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.live-counts dt {
    color: var(--muted);
    font-size: 0.78rem;
}

.live-counts dd {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.metric-card,
.content-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
}

.metric-card {
    padding: 19px;
}

.metric-card span {
    display: block;
    min-height: 36px;
    color: var(--muted);
    font-size: 0.73rem;
}

.metric-card strong {
    display: block;
    margin-top: 5px;
    font-size: 1.65rem;
    font-weight: 800;
}

.analysis-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 18px;
    margin-top: 60px;
}

.content-card {
    padding: 26px;
}

.table-wrap {
    max-height: 510px;
    overflow: auto;
}

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

th,
td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

td:last-child,
th:last-child {
    text-align: right;
}

td small {
    color: var(--muted);
}

.intent-list > div {
    display: grid;
    grid-template-columns: 100px 1fr 48px;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.84rem;
}

.intent-list strong {
    text-align: right;
}

.intent-list > div > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.intent-list small {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.25;
}

.mini-track {
    height: 8px;
}

.filter-control {
    min-width: 190px;
}

.cluster-list {
    display: grid;
    gap: 14px;
}

.cluster-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
}

.cluster-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
}

.cluster-card summary::-webkit-details-marker {
    display: none;
}

.cluster-card summary > span:first-child {
    display: flex;
    flex-direction: column;
}

.cluster-card summary small {
    color: var(--muted);
    font-weight: 400;
}

.score {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 50%;
    background: var(--lime);
    color: var(--green-dark);
    font-weight: 800;
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border-block: 1px solid var(--line);
    background: var(--line);
}

.score-grid div {
    padding: 17px 24px;
    background: #f8fafc;
}

.score-grid span,
.score-grid strong {
    display: block;
}

.score-grid span {
    min-height: 35px;
    color: var(--muted);
    font-size: 0.7rem;
}

.score-grid strong {
    font-size: 1.3rem;
}

.cluster-card h3 {
    margin: 22px 24px 10px;
    font-size: 0.82rem;
}

.phrase-list {
    padding: 0 24px 24px;
}

.phrase-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.86rem;
}

.phrase-row small {
    color: var(--muted);
    text-align: right;
}

.unusual-card {
    margin-top: 50px;
}

.unusual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.unusual-grid article {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 15px;
    border-radius: var(--radius-sm);
    background: #f1f5f9;
}

.unusual-grid span {
    color: var(--muted);
    font-size: 0.76rem;
}

.unusual-grid b {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--green);
}

@media (max-width: 900px) {
    .site-header {
        gap: 12px;
    }

    .header-search {
        width: auto;
        flex: 1;
    }

    .form-options,
    .metric-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .app-page {
        padding: 16px 16px 32px;
    }

    .site-header,
    .shell {
        width: min(100% - 24px, 1180px);
    }

    .site-footer {
        padding: 24px 16px 28px;
    }

    .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .site-footer-nav {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .site-header {
        flex-wrap: wrap;
    }

    .header-search {
        width: 100%;
        flex-basis: 100%;
        order: 3;
    }

    .header-menus {
        margin-left: auto;
    }

    .shell {
        padding-top: 15px;
    }

    .form-options,
    .metric-grid,
    .score-grid,
    .unusual-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-note {
        display: block;
        margin: 14px 0 0;
    }

    .recent-grid {
        grid-template-columns: 1fr;
    }

    .report-heading,
    .section-heading.split {
        align-items: flex-start;
        flex-direction: column;
    }

    .phrase-row {
        flex-direction: column;
        gap: 2px;
    }

    .phrase-row small {
        text-align: left;
    }
}

/* Authentication and account pages */
.notice {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 15px;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    background: #eff6ff;
    color: var(--green-dark);
}

.auth-panel,
.account-panel {
    padding: clamp(24px, 5vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow);
}

.auth-panel {
    max-width: 560px;
    margin: 30px auto;
}

.auth-panel h1,
.account-heading h1,
.error-panel h1 {
    font-size: clamp(1.65rem, 4vw, 2.2rem);
}

.auth-panel > p:not(.eyebrow),
.danger-panel > p {
    color: var(--muted);
}

.auth-panel form,
.account-panel form {
    display: grid;
    gap: 18px;
}

.auth-panel label > span,
.account-panel label > span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.auth-panel label > .field-error,
.account-panel label > .field-error {
    margin-top: 6px;
    color: #9f2f20;
}

.auth-panel input:not([type="checkbox"]),
.account-panel input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: var(--ink);
}

.auth-panel input:focus,
.account-panel input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.auth-panel .check-field {
    display: flex;
    align-items: center;
    gap: 9px;
}

.auth-panel .check-field span {
    margin: 0;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    color: var(--muted);
    font-size: 0.85rem;
}

.auth-links a {
    color: var(--green-dark);
    font-weight: 750;
}

.account-heading {
    margin: 24px 0 36px;
}

.account-page {
    display: flex;
    flex-direction: column;
    max-width: 920px;
}

.account-page .account-heading {
    margin: 0 0 14px;
}

.account-page .account-heading h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.account-page .account-grid {
    gap: 14px;
}

.account-page .account-panel {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
}

.account-page .account-panel h2 {
    margin: 0 0 12px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.account-page .account-panel form {
    flex: 1;
    gap: 12px;
}

.account-page .account-panel form .primary-button {
    margin-top: auto;
    justify-self: start;
}

.account-page .account-panel label > span {
    margin-bottom: 5px;
    font-size: 0.88rem;
}

.account-page .account-panel input {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

.account-page .danger-panel > p {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.4;
}

.account-page .danger-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 700;
}

.account-page .primary-button {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.92rem;
}

.account-page--delete {
    max-width: 480px;
}

.account-back {
    margin: 0 0 8px;
    font-size: 0.88rem;
}

.account-back a {
    color: var(--muted);
    font-weight: 650;
    text-decoration: none;
}

.account-back a:hover {
    color: var(--green-dark);
}

.account-delete-entry {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
}

.account-delete-entry:hover {
    color: #8d2d22;
}

.account-panel h2 {
    font-size: 1.25rem;
    font-weight: 800;
}

.danger-panel {
    grid-column: 1 / -1;
    border-color: #efb8ae;
}

.danger-button {
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid #8d2d22;
    border-radius: 9px;
    background: #8d2d22;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    transition: background 120ms ease, border-color 120ms ease;
}

.danger-button:hover {
    background: #a3382a;
    border-color: #a3382a;
}

/* Error response pages */
.error-panel {
    max-width: 760px;
    margin: 55px auto;
    text-align: center;
}

.error-code {
    display: block;
    margin-bottom: 10px;
    color: var(--green);
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 800;
    line-height: 0.9;
}

.error-panel h1 {
    margin-bottom: 15px;
}

.error-panel > p:not(.eyebrow) {
    max-width: 560px;
    margin: 0 auto 28px;
    color: var(--muted);
}

@media (max-width: 600px) {
    .auth-links {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin provider cache comparison */
.admin-cache-heading {
    margin: 24px 0 36px;
}

.admin-cache-filters {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
}

.admin-cache-terms {
    margin-top: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
}

.admin-cache-terms .section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.admin-cache-terms .table-wrap {
    max-height: 430px;
}

.admin-cache-terms tbody tr {
    cursor: pointer;
}

.admin-cache-terms tbody tr:hover,
.admin-cache-terms tbody tr:focus {
    background: rgba(37, 99, 235, 0.08);
    outline: none;
}

.admin-cache-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 170px 150px auto;
    gap: 12px;
    align-items: end;
}

.admin-cache-form label span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-cache-term input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.admin-cache-filters select {
    padding-top: 8px;
    padding-bottom: 8px;
}

.admin-cache-filter-count {
    padding: 8px 0;
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.admin-cache-filter-count strong {
    color: var(--ink);
}

.admin-cache-terms th button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
}

.admin-cache-terms [data-cache-sort-indicator] {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #8b9691;
    font-size: 0.9rem;
    line-height: 1;
}

.admin-cache-terms th[aria-sort="ascending"] button,
.admin-cache-terms th[aria-sort="descending"] button {
    color: var(--green-dark);
    font-weight: 850;
}

.admin-cache-terms th[aria-sort="ascending"] [data-cache-sort-indicator],
.admin-cache-terms th[aria-sort="descending"] [data-cache-sort-indicator] {
    background: var(--green-dark);
    color: #fff;
}

.admin-cache-empty {
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-cache-modal {
    width: min(96vw, 1500px);
    max-width: none;
    height: min(88vh, 900px);
    max-height: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.admin-cache-modal[open] {
    display: flex;
    flex-direction: column;
}

.admin-cache-modal::backdrop {
    background: rgba(15, 23, 42, 0.68);
}

.admin-cache-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
}

.admin-cache-modal-heading h2 {
    font-family: inherit;
    font-size: 2rem;
    font-weight: 500;
}

.admin-cache-modal-heading p:last-child {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-cache-modal-heading button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.admin-cache-modal-heading button:hover {
    border-color: var(--green);
    background: var(--lime);
    color: var(--green-dark);
}

.admin-cache-modal-body {
    min-height: 0;
    flex: 1;
    padding: 0 26px 26px;
    overflow: auto;
}

.admin-cache-comparison {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
}

.admin-cache-comparison th,
.admin-cache-comparison td {
    text-align: left;
}

.admin-cache-comparison th {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 18px 14px;
    background: var(--card);
}

.admin-cache-comparison th strong,
.admin-cache-comparison th small {
    display: block;
}

.admin-cache-comparison th small {
    margin-top: 5px;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
}

.admin-cache-refresh {
    margin-top: 10px;
    padding: 6px 10px;
    border: 1px solid var(--green);
    border-radius: 8px;
    background: transparent;
    color: var(--green-dark);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: none;
}

.admin-cache-refresh:hover {
    background: rgba(37, 99, 235, 0.08);
}

.admin-cache-refresh:disabled {
    cursor: wait;
    opacity: 0.65;
}

.admin-cache-comparison td {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.admin-cache-comparison td.is-missing {
    color: var(--muted);
}

@media (max-width: 900px) {
    .admin-cache-form {
        grid-template-columns: 1fr;
    }
}

/* Admin database tables */
.admin-database-tables th button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
}

.admin-database-tables [data-table-sort-indicator] {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #8b9691;
    font-size: 0.9rem;
    line-height: 1;
}

.admin-database-tables th[aria-sort="ascending"] button,
.admin-database-tables th[aria-sort="descending"] button {
    color: var(--green-dark);
    font-weight: 850;
}

.admin-database-tables th[aria-sort="ascending"] [data-table-sort-indicator],
.admin-database-tables th[aria-sort="descending"] [data-table-sort-indicator] {
    background: var(--green-dark);
    color: #fff;
}

/* Admin reference tests */
.admin-ref-tests-empty {
    margin: 0;
    color: #5d6a64;
}

.admin-ref-tests-list {
    display: grid;
    gap: 10px;
}

.admin-ref-test {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    /* Off-screen rows are skipped for layout/paint on this long page. */
    content-visibility: auto;
    contain-intrinsic-size: auto 220px;
}

.admin-ref-test-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    margin-bottom: 6px;
}

.admin-ref-test-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

.admin-ref-test-heading h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.25;
}

.admin-ref-test-market,
.admin-ref-test-actions [data-ref-test-meta] {
    margin: 0;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    gap: 8px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.admin-ref-test-actions .admin-ref-test-rerun {
    order: 2;
    flex: 0 0 auto;
}

.admin-ref-test-bulk,
.admin-ref-test-providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.admin-ref-test-bulk {
    margin-bottom: 10px;
    padding: 0 13px;
}

.admin-ref-test-bulk button {
    justify-self: end;
    padding: 5px 10px;
    font-weight: 600;
}

.admin-ref-test-provider {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: #fff;
    contain: layout;
}

.admin-ref-test-provider-name {
    color: #334039;
    font-weight: 700;
}

.admin-ref-test-rerun {
    padding: 3px 8px;
    border: 1px solid #b7c4bd;
    border-radius: 4px;
    background: #fff;
    color: #2f3b35;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.2;
}

.admin-ref-test-rerun:hover {
    border-color: var(--green-dark);
    color: var(--green-dark);
}

.admin-ref-test-rerun:disabled {
    cursor: wait;
    opacity: 0.7;
}

.admin-ref-test-provider.is-refreshing {
    opacity: 0.72;
    transition: opacity 120ms ease;
}

.admin-ref-test-flag {
    color: #8a4b2b;
}

.admin-ref-test-results {
    margin: 0;
    padding-left: 1.1rem;
    color: #334039;
    font-size: 0.72rem;
    line-height: 1.35;
}

.admin-ref-test-results li + li {
    margin-top: 1px;
}

.admin-ref-test-empty {
    margin: 0;
    color: #7a8781;
    font-size: 0.72rem;
}

/* Reference tests page: run settings dialog and the settings recorded against a cached run. */
.admin-ref-test-settings-used {
    order: 3;
    flex: 0 0 100%;
    margin: 0;
    color: #6b5a2b;
    font-size: 0.68rem;
    line-height: 1.3;
}

.admin-ref-test-settings-used:empty {
    display: none;
}

.admin-ref-test-settings {
    width: min(94vw, 620px);
    max-width: none;
    max-height: 88vh;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

@media (min-width: 900px) {
    .admin-ref-test-settings {
        width: min(94vw, 920px);
        max-height: none;
    }

    .admin-ref-test-settings[open] .admin-ref-test-settings-inner {
        max-height: none;
    }

    .admin-ref-test-settings-fields {
        grid-template-columns: 1fr 1fr;
        align-content: start;
        overflow: visible;
    }

    .admin-ref-test-settings-tiers {
        grid-column: 1 / -1;
    }
}

.admin-ref-test-settings[open] .admin-ref-test-settings-inner {
    display: flex;
    max-height: 88vh;
    flex-direction: column;
}

.admin-ref-test-settings::backdrop {
    background: rgba(15, 23, 42, 0.68);
}

.admin-ref-test-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.admin-ref-test-settings-heading h2 {
    margin: 0;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
}

.admin-ref-test-settings-heading p:last-child {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.admin-ref-test-settings-heading button {
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.admin-ref-test-settings-heading button:hover {
    border-color: var(--green);
    background: var(--lime);
    color: var(--green-dark);
}

.admin-ref-test-settings-fields {
    display: grid;
    min-height: 0;
    gap: 14px;
    padding: 18px 22px;
    overflow: auto;
}

.admin-ref-test-settings-fields label {
    display: grid;
    gap: 3px;
}

.admin-ref-test-settings-fields label[hidden] {
    display: none;
}

.admin-ref-test-settings-tiers {
    margin: 4px 0 0;
    padding: 10px 12px;
    border: 1px solid #d5ddd8;
    border-radius: 6px;
}

.admin-ref-test-settings-tiers[hidden] {
    display: none;
}

.admin-ref-test-settings-tiers legend {
    padding: 0 4px;
    color: #2f3b35;
    font-size: 0.76rem;
    font-weight: 700;
}

.admin-ref-test-settings-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: start;
    margin-top: 8px;
    cursor: pointer;
}

.admin-ref-test-settings-check input {
    margin-top: 2px;
}

.admin-ref-test-settings-check .admin-ref-test-settings-name {
    display: block;
}

.admin-ref-test-settings-check .admin-ref-test-settings-note {
    display: block;
    margin-top: 1px;
}

.admin-ref-test-settings-coherence {
    margin-top: 0.35rem;
}

.admin-ref-test-settings-name {
    color: #334039;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-ref-test-settings-note {
    color: #6b7873;
    font-size: 0.72rem;
    line-height: 1.35;
}

.admin-ref-test-settings-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}

.admin-ref-test-settings-input input {
    flex: 1;
    accent-color: var(--green-dark);
}

.admin-ref-test-settings-input output {
    min-width: 34px;
    color: #2f3b35;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.admin-ref-test-settings-default {
    color: #8b9791;
    font-size: 0.68rem;
    white-space: nowrap;
}

.admin-ref-test-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
}

.admin-ref-test-settings-actions button {
    padding: 5px 12px;
    border: 1px solid #b7c4bd;
    border-radius: 4px;
    background: #fff;
    color: #2f3b35;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.admin-ref-test-settings-actions button:hover {
    border-color: var(--green-dark);
    color: var(--green-dark);
    background: #f8fafc;
}

.admin-ref-test-settings-actions [data-ref-test-settings-run] {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: #fff;
    font-weight: 700;
}

.admin-ref-test-settings-actions [data-ref-test-settings-run]:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

/* Relevance badge beside each suggestion on the admin reference tests page */
.admin-ref-test-tier {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.3rem;
    border-radius: 2px;
    background: #e7ebe8;
    color: #4a574f;
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.admin-ref-test-tier[data-tier='anchored'] {
    background: #d8ead9;
    color: #2c5231;
}

.admin-ref-test-tier[data-tier='corroborated'] {
    background: #e2e8f2;
    color: #33445f;
}

.admin-ref-test-tier[data-tier='anchored_permutation'] {
    background: #e8f0e4;
    color: #3a5534;
}

/* Known keywords panel on research results */
.known-keywords {
    margin-top: 14px;
}

.known-keywords-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.known-keywords-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.86rem;
}

.known-keywords-list li:last-child {
    border-bottom: 0;
}

.known-keywords-empty,
.known-keywords-signin {
    color: var(--muted);
    font-size: 0.8rem;
}

.known-keywords-list button {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.known-keywords-list button:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: var(--ink);
}

.known-keywords-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.known-keywords-form input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.86rem;
}

.known-keywords-form button {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--green-dark);
    border-radius: 6px;
    background: var(--green-dark);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background 120ms ease, border-color 120ms ease;
}

.known-keywords-form button:hover {
    background: var(--green);
    border-color: var(--green);
}

.known-keywords-status {
    margin: 8px 0 0;
    color: #5d6a64;
    font-size: 0.76rem;
}

.known-keywords-status.is-error {
    color: #8a4b2b;
}

.known-keywords-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 4.5rem;
    padding: 7px 10px;
    border: 1px solid #c5d0c9;
    border-radius: 6px;
    background: #fff;
    color: #2f3b35;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.35;
    resize: vertical;
}

.known-keywords-form {
    align-items: flex-end;
}

.known-keywords-compact {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #d5ddd8;
    border-radius: 8px;
    background: #f8fafc;
}

.known-keywords-compact .section-heading {
    margin-bottom: 6px;
}

.known-keywords-compact .section-heading h2 {
    font-size: 0.82rem;
}

.known-keywords-compact .section-heading p {
    font-size: 0.7rem;
}

.known-keywords-compact .known-keywords-list li {
    font-size: 0.78rem;
    padding: 3px 0;
}

.known-keywords-compact .known-keywords-form textarea {
    min-height: 3.2rem;
    font-size: 0.78rem;
}

.known-keywords-compact .known-keywords-form button {
    padding: 6px 10px;
    font-size: 0.74rem;
}

/* Shared known-keywords dialog on the admin reference tests page */
.admin-ref-test-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.admin-ref-test-known-open {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid #c5d0c9;
    border-radius: 4px;
    background: #fff;
    color: #5d6a64;
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.admin-ref-test-known-open:hover {
    border-color: var(--green-dark);
    color: var(--green-dark);
    background: #f8fafc;
}

.admin-ref-test-known {
    width: min(94vw, 560px);
    max-width: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.admin-ref-test-known-inner {
    display: flex;
    flex-direction: column;
}

.admin-ref-test-known .known-keywords {
    margin: 0;
    padding: 14px 22px;
    border: 0;
    background: transparent;
}

.admin-ref-test-known::backdrop {
    background: rgba(12, 24, 19, 0.68);
}

/* Compare page ? /compare/ */
.compare-body {
    --compare-brand-blue: #1678fd;
    min-height: 100vh;
    margin: 0;
    background: #fbfcfe;
    color: #0f172a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.compare-app {
    --compare-sidebar-width: var(--compare-sidebar-boot-width, 296px);
    display: grid;
    grid-template-columns: var(--compare-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.compare-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 14px;
    background: #0f172a;
    color: #cbd5e1;
}

.compare-sidebar-resizer {
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: calc(var(--compare-sidebar-width) - 4px);
    width: 8px;
    cursor: col-resize;
    touch-action: none;
}

.compare-sidebar-resizer::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background: transparent;
    content: "";
    transition: background 120ms ease;
}

.compare-sidebar-resizer:hover::after,
.compare-sidebar-resizer:focus-visible::after,
.compare-app.is-resizing-sidebar .compare-sidebar-resizer::after {
    background: var(--compare-brand-blue);
}

.compare-app.is-resizing-sidebar,
.compare-app.is-resizing-sidebar * {
    cursor: col-resize !important;
    user-select: none !important;
}

.compare-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f8fafc;
    text-decoration: none;
    text-align: left;
}

.compare-brand:focus-visible {
    outline: 2px solid rgba(22, 120, 253, 0.45);
    outline-offset: 3px;
    border-radius: var(--compare-radius-sm);
}

.compare-brand-full {
    display: block;
    width: 224px;
    height: auto;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.compare-brand-mark {
    display: none;
    width: 36px;
    height: auto;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.compare-brand:hover .compare-brand-full,
.compare-brand:hover .compare-brand-mark {
    opacity: 0.72;
}

.compare-sidebar-collapse {
    position: fixed;
    z-index: 110;
    top: auto;
    bottom: 18px;
    left: calc(var(--compare-sidebar-width) - 11px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #64748b;
    box-shadow: 1px 1px 3px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.compare-sidebar-collapse:hover {
    background: #f8fafc;
    color: #0f172a;
}

.compare-sidebar-collapse:focus-visible {
    outline: 2px solid rgba(22, 120, 253, 0.45);
    outline-offset: 2px;
}

.compare-sidebar-collapse svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.compare-app.is-sidebar-collapsed {
    --compare-sidebar-width: 64px;
}

.compare-app.is-sidebar-collapsed .compare-sidebar {
    align-items: center;
    padding: 16px 10px 14px;
    overflow-x: hidden;
    overflow-y: auto;
}

.compare-app.is-sidebar-collapsed .compare-brand {
    justify-content: center;
}

.compare-app.is-sidebar-collapsed .compare-brand-full {
    display: none;
}

.compare-app.is-sidebar-collapsed .compare-brand-mark {
    display: block;
}

.compare-app.is-sidebar-collapsed .compare-upgrade-card,
.compare-app.is-sidebar-collapsed .compare-sidebar-resizer {
    display: none;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-btn {
    width: 40px;
    height: 40px;
    margin-top: 6px;
    padding: 0;
    gap: 0;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-btn-label {
    display: none;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-btn svg {
    width: 18px;
    height: 18px;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-btn + .compare-sidebar-section {
    margin-top: 8px;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-section {
    width: 100%;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-section h2,
.compare-app.is-sidebar-collapsed .compare-sidebar-section-head {
    display: none;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-section:first-of-type .compare-sidebar-list {
    margin-top: 0;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-list > li {
    display: flex;
    justify-content: center;
    gap: 0;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-section:first-of-type .compare-sidebar-list > li {
    min-height: 40px;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-list > li.is-active {
    box-shadow: none;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-item {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-item-icon {
    width: 20px;
    height: 20px;
    margin-top: 0;
    flex: 0 0 20px;
    color: #94a3b8;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-list > li.is-active .compare-sidebar-item-icon {
    color: var(--compare-brand-blue);
}

.compare-app.is-sidebar-collapsed .compare-sidebar-item-icon svg {
    width: 18px;
    height: 18px;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-item-copy,
.compare-app.is-sidebar-collapsed .compare-sidebar-menu {
    display: none;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-collapse svg {
    transform: scaleX(-1);
}

.compare-sidebar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
    padding: 8px 12px;
    border: 1px solid var(--compare-brand-blue);
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: var(--compare-brand-blue);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.compare-sidebar-btn:hover {
    background: rgba(22, 120, 253, 0.12);
}

.compare-sidebar-btn:focus-visible {
    outline: 2px solid rgba(22, 120, 253, 0.35);
    outline-offset: 2px;
}

.compare-sidebar-btn + .compare-sidebar-section {
    margin-top: 12px;
}

.compare-sidebar-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.compare-sidebar-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 5px;
}

.compare-sidebar-section-head[hidden] {
    display: none;
}

.compare-sidebar-section-head h2,
.compare-sidebar-section h2 {
    margin: 0;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.compare-sidebar-section-head h2 {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.compare-sidebar-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.compare-sidebar-section > h2 {
    margin: 0 0 5px;
}

.compare-sidebar-manage {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    flex: 0 0 auto;
}

.compare-sidebar-manage:hover {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.14);
}

.compare-sidebar-manage svg {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
}

.compare-sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.compare-sidebar-section:first-of-type .compare-sidebar-list {
    margin-top: 8px;
}

.compare-sidebar-section + .compare-sidebar-section {
    margin-top: 14px;
}

.compare-sidebar-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
}

.compare-sidebar-section:first-of-type .compare-sidebar-list > li {
    min-height: 64px;
}

.compare-sidebar-list > li.is-active {
    border-radius: var(--compare-radius-sm);
    background: rgba(22, 120, 253, 0.12);
    box-shadow: inset 3px 0 0 var(--compare-brand-blue);
}

.compare-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-radius: var(--compare-radius-xs);
}

.compare-sidebar-item-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #64748b;
    flex: 0 0 18px;
}

.compare-sidebar-item-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.compare-sidebar-item-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.compare-sidebar-item:hover {
    background: rgba(148, 163, 184, 0.12);
}

.compare-sidebar-item-title {
    color: #f1f5f9;
    font-size: 0.86rem;
    font-weight: 650;
}

.compare-sidebar-item-meta {
    color: #64748b;
    font-size: 0.72rem;
}

.compare-sidebar-kebab {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.compare-sidebar-kebab svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.compare-upgrade-card {
    margin-top: auto;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--compare-radius-md);
    background: rgba(15, 23, 42, 0.55);
}

.compare-upgrade-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    border-radius: var(--compare-radius-sm);
    background: rgba(37, 99, 235, 0.18);
}

.compare-upgrade-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #60a5fa;
    stroke-width: 1.8;
}

.compare-upgrade-card strong {
    display: block;
    color: #f8fafc;
    font-size: 0.92rem;
}

.compare-upgrade-card p {
    margin: 6px 0 10px;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.45;
}

.compare-upgrade-card a {
    color: #60a5fa;
    font-size: 0.82rem;
    font-weight: 650;
}

.compare-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fbfcfe;
}

.compare-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 78px;
    padding: 12px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.compare-topbar--actions {
    grid-template-columns: 1fr;
    justify-items: end;
}

.compare-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0 0 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.compare-search-icon {
    display: grid;
    place-items: center;
    color: #94a3b8;
}

.compare-search-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.compare-search input {
    min-width: 0;
    flex: 1;
    padding: 10px 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.95rem;
}

.compare-search-clear {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.compare-search-clear:hover {
    color: #475569;
    background: #f1f5f9;
}

.compare-search-clear svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.compare-search-submit {
    padding: 11px 18px;
    border: 0;
    border-radius: 0 var(--compare-radius-md) var(--compare-radius-md) 0;
    background: #2563eb;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease;
}

.compare-search-submit:hover {
    background: #1d4ed8;
}

.compare-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.compare-topbar-utilities {
    display: flex;
    align-items: center;
    gap: 0;
}

.compare-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}

.compare-topbar-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: #1d4ed8;
}

.compare-profile-menu .header-menu-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    color: #475569;
    background: #fff;
}

.compare-admin-link {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    color: #475569;
    background: #fff;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.compare-admin-link svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.compare-profile-menu:hover .header-menu-toggle,
.compare-profile-menu[open] .header-menu-toggle,
.compare-profile-menu .header-menu-toggle:hover {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.compare-admin-link:hover {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.compare-profile-menu .header-menu-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    outline-offset: 2px;
}

.compare-admin-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    outline-offset: 2px;
}

.compare-admin-menu:hover .compare-admin-link,
.compare-admin-menu[open] .compare-admin-link {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.compare-admin-menu .header-menu-panel {
    right: 0;
    left: auto;
    min-width: 220px;
}

.compare-admin-menu .header-menu-panel strong {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 10px 13px 6px;
}

.compare-admin-menu .header-menu-panel a:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

.compare-profile-menu .header-menu-panel {
    right: 0;
    left: auto;
    min-width: 168px;
}

.compare-profile-menu .header-menu-panel strong {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 10px 13px 6px;
}

.compare-body .header-menu-panel a,
.compare-body .header-menu-panel button {
    padding: 7px 13px;
    font-size: 0.82rem;
    font-weight: 500;
}

.compare-profile-menu .header-menu-panel a:hover,
.compare-profile-menu .header-menu-panel button:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

.profile-menu-panel {
    min-width: 220px;
    padding: 4px 0;
    overflow: hidden;
}

.profile-menu-hello {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.profile-menu-avatar {
    display: grid;
    flex: none;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

.profile-menu-hello-text {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.profile-menu-greeting {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
}

.profile-menu-email {
    overflow: hidden;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-group {
    display: grid;
    padding-bottom: 4px;
}

.profile-menu-group + .profile-menu-group {
    border-top: 1px solid #e2e8f0;
}

.profile-menu-group a,
.profile-menu-group button {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

.profile-menu-group svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.compare-profile-menu .header-menu-panel .profile-menu-logout:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

.compare-topbar-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.compare-topbar-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.compare-workspace {
    flex: 1;
    min-height: 0;
    padding: 14px 24px 32px;
}

.compare-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: -14px -24px 14px;
    padding: 12px 24px;
    min-height: 78px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.compare-heading h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.compare-heading p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.92rem;
}

.compare-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 6px 0 12px;
}

.compare-workspace-header[hidden],
.compare-toolbar[hidden] {
    display: none !important;
}

.compare-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 52px;
}

.compare-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.compare-mode-toggle {
    display: inline-flex;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
        max-height 0.28s ease,
        opacity 0.22s ease,
        transform 0.28s ease,
        padding 0.28s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        visibility 0s linear 0.28s;
}

.compare-mode-toggle.is-open {
    max-height: 3.5rem;
    padding: 3px;
    border-color: #dbe2ea;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        max-height 0.28s ease,
        opacity 0.22s ease,
        transform 0.28s ease,
        padding 0.28s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        visibility 0s;
}

.compare-mode-toggle button {
    padding: 10px 24px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.25;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.compare-mode-label-short {
    display: none;
}

.compare-mode-toggle button:hover:not(:disabled):not(.is-active) {
    background: #f1f5f9;
    color: #334155;
}

.compare-mode-toggle button.is-active {
    background: #2563eb;
    color: #fff;
}

.compare-mode-toggle button.is-active:hover:not(:disabled) {
    background: #1d4ed8;
}

.compare-mode-toggle button:disabled {
    cursor: default;
}

.compare-baseline select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
}

.compare-baseline {
    display: block;
}

.compare-baseline select {
    width: 268px;
    min-height: 45px;
    padding: 10px 38px 10px 14px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.compare-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #64748b;
    font-size: 0.78rem;
}

.compare-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.compare-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.compare-dot.is-same {
    background: #94a3b8;
}

.compare-dot.is-new {
    background: #22c55e;
}

.compare-dot.is-removed {
    background: #94a3b8;
}

.compare-dot.is-rank {
    width: auto;
    height: auto;
    background: none;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 700;
}

.compare-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #2563eb;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #2563eb;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.compare-add-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.compare-add-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.compare-board-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.compare-hscroll {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    border: 1px solid #eef2f7;
    border-radius: 999px;
    background: #f8fafc;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f1f5f9;
}

.compare-hscroll[hidden] {
    display: none !important;
}

.compare-hscroll-spacer {
    height: 1px;
    pointer-events: none;
}

.compare-hscroll::-webkit-scrollbar {
    height: 10px;
}

.compare-hscroll::-webkit-scrollbar-track {
    margin: 2px 4px;
    border-radius: 999px;
    background: #f1f5f9;
}

.compare-hscroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #d1d5db;
    background-clip: padding-box;
}

.compare-hscroll::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
    background-clip: padding-box;
}

.compare-board-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.compare-connectors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.compare-connectors-svg {
    display: block;
    overflow: visible;
}

.compare-connectors-svg line {
    stroke: #94a3b8;
    stroke-width: 1.5;
    opacity: 0.85;
}

.compare-board {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.compare-board::-webkit-scrollbar {
    display: none;
}

.compare-loading,
.compare-error {
    padding: 40px 16px;
    color: #64748b;
    text-align: center;
}

.compare-error {
    color: #b91c1c;
}

.compare-dot.is-rank::before {
    content: "?";
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.compare-column {
    flex: 0 0 373px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 0;
    max-height: calc(100vh - 250px);
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    scroll-snap-align: start;
    overflow: hidden;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

@keyframes compare-column-appear {
    0% {
        opacity: 0;
        transform: translateX(36px) scale(0.96);
        background: #dbeafe;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45), 0 8px 28px rgba(37, 99, 235, 0.18);
    }
    55% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        background: #fff;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    }
}

.compare-column.is-reordering {
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.compare-column.is-appearing {
    animation: compare-column-appear 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.compare-column-loading {
    display: grid;
    place-items: center;
    min-height: 160px;
}

.compare-column-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: compare-modal-spin 0.75s linear infinite;
}

.compare-column.is-loading {
    opacity: 0.92;
}

.compare-column--current {
    border-top: 3px solid #2563eb;
}

.compare-column--closer {
    border-top: 3px solid #38bdf8;
}

.compare-column--reach {
    border-top: 3px solid #a78bfa;
}

.compare-column--longer {
    border-top: 3px solid #4ade80;
}

.compare-column-head {
    min-height: 112px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eef2f7;
}

.compare-column-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.compare-column-head p {
    margin: 4px 0 10px;
    color: #64748b;
    font-size: 0.8rem;
}

.compare-column-origin {
    margin: 4px 0 0;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.compare-column-head .compare-column-origin {
    margin: 4px 0 0;
    color: #334155;
}

.compare-column-seeds {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

.compare-column-seeds span:not(:last-child)::after {
    content: "·";
    margin: 0 0.4em;
    opacity: 0.55;
}

.compare-column-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.compare-column-tags-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.compare-column-tags span {
    padding: 3px 7px;
    border-radius: var(--compare-radius-xs);
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
}

.compare-column-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: var(--compare-radius-xs);
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.compare-column-order-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-column-order-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}

.compare-column-order-btn.is-active {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.compare-column-list {
    margin: 0;
    padding: 4px 0;
    min-height: 0;
    overflow: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.compare-column-list::-webkit-scrollbar {
    width: 5px;
}

.compare-column-list::-webkit-scrollbar-track {
    background: transparent;
}

.compare-column-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
}

.compare-column-list:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.75);
}

.compare-column-list::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.compare-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: 7px 10px;
    border-left: 3px solid transparent;
}

.compare-row[draggable="true"] {
    cursor: grab;
}

.compare-row[draggable="true"]:active {
    cursor: grabbing;
}

.compare-row.is-dragging {
    opacity: 0.45;
}

.compare-row.is-drag-over {
    box-shadow: inset 0 2px 0 0 #64748b;
}

.compare-row:hover {
    background: rgba(241, 245, 249, 0.85);
}

.compare-row.is-marked {
    border-left-color: #22c55e;
    background: #dcfce7;
}

.compare-row.is-marked:hover {
    background: #bbf7d0;
}

.compare-row-rank {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.compare-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}

.compare-row-phrase {
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.compare-row-phrase.is-struck {
    color: #94a3b8;
    text-decoration: line-through;
}

.compare-row-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.compare-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: var(--compare-radius-xs);
    font-size: 0.68rem;
    font-weight: 700;
}

.compare-badge.is-same {
    background: #f1f5f9;
    color: #64748b;
}

.compare-badge.is-new {
    background: #dcfce7;
    color: #15803d;
}

.compare-badge.is-removed {
    background: #f1f5f9;
    color: #64748b;
}

.compare-rank {
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
}

.compare-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

.compare-downvote,
.compare-marker {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.compare-downvote {
    color: #94a3b8;
}

.compare-marker {
    color: var(--compare-brand-blue, #1678fd);
}

.compare-downvote:hover:not(:disabled):not(.is-active) {
    background: #fef2f2;
    color: #dc2626;
}

.compare-marker:hover:not(:disabled):not(.is-active) {
    background: #eff6ff;
    color: #1d4ed8;
}

.compare-downvote svg,
.compare-marker svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.compare-downvote.is-active {
    color: #dc2626;
}

.compare-downvote.is-active svg {
    fill: #fecaca;
    stroke: #dc2626;
}

.compare-marker.is-active svg {
    fill: var(--compare-brand-blue, #1678fd);
    stroke: var(--compare-brand-blue, #1678fd);
}

.compare-downvote:disabled,
.compare-marker:disabled {
    opacity: 0.5;
    cursor: wait;
}

.compare-row.is-downvoted:not(.is-marked) {
    opacity: 0.72;
    background: #fee2e2;
    box-shadow: none;
}

.compare-column-foot {
    padding: 12px 16px 14px;
    border-top: 1px solid #eef2f7;
    text-align: left;
}

.compare-column-foot p {
    margin: 0 0 10px;
    color: #64748b;
    font-size: 0.78rem;
}

.compare-use-settings {
    width: auto;
    padding: 9px 12px;
    border: 1px solid #2563eb;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.compare-use-settings:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.compare-view-nav {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.compare-view-menu {
    position: relative;
}

.compare-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.compare-view-toggle::-webkit-details-marker {
    display: none;
}

.compare-view-toggle svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-view-chevron {
    width: 12px !important;
    height: 12px !important;
    color: #64748b;
    transition: transform 120ms ease;
}

.compare-view-menu[open] .compare-view-chevron {
    transform: rotate(180deg);
}

.compare-view-toggle:hover,
.compare-view-menu[open] .compare-view-toggle {
    background: #eff6ff;
}

.compare-view-menu-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    min-width: 160px;
    padding: 4px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.compare-view-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--compare-radius-sm);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.compare-view-menu-item svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-view-menu-item:hover {
    background: #f8fafc;
    color: #2563eb;
}

.compare-view-menu-item.is-active {
    background: #eff6ff;
    color: #2563eb;
}

.compare-view-menu-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.compare-view-menu-item.is-disabled:hover {
    background: transparent;
    color: #475569;
}

.compare-view-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: 2px;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid #e2e8f0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.compare-view-review svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-view-review:hover:not(:disabled):not(.is-disabled) {
    background: #eff6ff;
    color: #2563eb;
}

.compare-view-review.is-active {
    background: #eff6ff;
    color: #2563eb;
}

.compare-view-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-left: 1px solid #e2e8f0;
    border-radius: 0 var(--compare-radius-sm) var(--compare-radius-sm) 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.compare-view-export svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-view-export:hover:not(:disabled):not(.is-disabled) {
    background: #eff6ff;
    color: #2563eb;
}

.compare-view-export:disabled,
.compare-view-export.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.compare-view-export.is-active {
    background: #eff6ff;
    color: #2563eb;
}

.compare-toast {
    position: fixed;
    right: 36px;
    bottom: 24px;
    z-index: 80;
    margin: 0;
    max-width: min(92vw, 360px);
    padding: 12px 16px;
    border: 1px solid #bfdbfe;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
    font-size: 0.86rem;
    font-weight: 650;
    opacity: 0;
    transform: translate3d(0, calc(100% + 40px), 0);
    transition:
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.compare-toast.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .compare-toast {
        transform: none;
        transition: opacity 0.18s ease;
    }

    .compare-toast.is-visible {
        transform: none;
    }
}

.compare-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
}

.compare-modal--message,
.compare-modal--project-manager-confirm {
    z-index: 130;
}

.compare-modal--message .compare-modal-card footer {
    justify-content: flex-end;
}

.compare-modal--message .compare-message-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.compare-modal--message .compare-message-modal-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: #2563eb;
}

.compare-modal--message .compare-message-modal-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.compare-modal--message .compare-modal-card header p {
    margin: 0;
    color: #334155;
    font-size: 0.84rem;
    line-height: 1.45;
}

.compare-modal[hidden] {
    display: none;
}

.compare-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.compare-modal-card {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

body.compare-modal-open {
    overflow: hidden;
}

.compare-modal-card header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.compare-modal-card header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
}

.compare-modal-field {
    display: grid;
    gap: 5px;
}

.compare-modal-field span {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 500;
}

.compare-modal-field input,
.compare-modal-field textarea,
.compare-modal-field select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 400;
}

.compare-modal-field textarea {
    resize: vertical;
    min-height: 120px;
}

.compare-modal-limit input[type="range"] {
    display: block;
    width: 100%;
    padding: 0;
}

.compare-modal-limit output {
    min-width: 2ch;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.compare-modal-card footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.compare-modal-card footer.compare-modal-footer {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.compare-modal-footer-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.compare-modal-reset {
    padding: 7px 12px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.compare-modal-reset:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.compare-tuning-default {
    color: #94a3b8;
    font-size: 0.68rem;
    white-space: nowrap;
}

.compare-modal-cancel,
.compare-modal-submit {
    padding: 7px 12px;
    border-radius: var(--compare-radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.compare-modal-card footer button {
    border-radius: var(--compare-radius-sm);
}

.compare-modal-cancel {
    border: 1px solid #dbe2ea;
    background: #fff;
    color: #475569;
}

.compare-modal-cancel:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.compare-modal-submit {
    border: 0;
    background: #2563eb;
    color: #fff;
}

.compare-modal-submit:hover:not(:disabled) {
    background: #1d4ed8;
}

.compare-modal-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (min-width: 981px) {
    .compare-body {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .compare-app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        align-items: start;
    }

    .compare-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .compare-main {
        overflow: visible;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .compare-workspace {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        padding-bottom: 14px;
        box-sizing: border-box;
    }

    .compare-workspace.export-workspace {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .compare-heading,
    .compare-workspace-header {
        flex: 0 0 auto;
    }

    .compare-board-wrap,
    .tree-board-wrap,
    .map-board-wrap {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    .compare-board-stage,
    .map-board-stage {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .tree-board-stage {
        flex: 1 1 0;
        display: block;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .map-board-stage {
        min-height: 0;
    }

    .compare-board {
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
    }

    .compare-column {
        height: 100%;
        max-height: 100%;
    }

    .tree-workspace > .tree-legend,
    .map-workspace > .map-legend {
        flex: 0 0 auto;
    }
}

@media (max-width: 980px) {
    .compare-app {
        grid-template-columns: 1fr;
    }

    .compare-app.is-sidebar-collapsed {
        --compare-sidebar-width: 296px;
    }

    .compare-sidebar {
        position: fixed;
        z-index: 220;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(296px, 86vw);
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 200ms ease;
        box-shadow: 8px 0 24px rgba(15, 23, 42, 0.28);
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar {
        align-items: stretch;
        padding: 16px 20px 14px;
    }

    .compare-app.is-sidebar-collapsed .compare-brand {
        justify-content: flex-start;
    }

    .compare-app.is-sidebar-collapsed .compare-brand-full {
        display: block;
    }

    .compare-app.is-sidebar-collapsed .compare-brand-mark {
        display: none;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-btn {
        display: inline-flex;
        width: 100%;
        height: auto;
        margin-top: 2px;
        padding: 8px 12px;
        gap: 8px;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-btn-label {
        display: inline;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-btn svg {
        width: 14px;
        height: 14px;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-section,
    .compare-app.is-sidebar-collapsed .compare-upgrade-card {
        display: block;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-section h2 {
        display: block;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-item-copy {
        display: grid;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-menu {
        display: block;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-list > li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-section:first-of-type .compare-sidebar-list > li {
        min-height: 64px;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-list > li.is-active {
        box-shadow: inset 3px 0 0 var(--compare-brand-blue);
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-item {
        align-items: flex-start;
        justify-content: flex-start;
        width: auto;
        height: auto;
        padding: 8px 6px;
        gap: 10px;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-item-icon {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        flex: 0 0 18px;
        color: #64748b;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-item-icon svg {
        width: 16px;
        height: 16px;
    }

    .compare-app.is-sidebar-collapsed .compare-sidebar-collapse,
    .compare-sidebar-collapse {
        display: none;
    }

    .compare-app.is-nav-open .compare-sidebar {
        transform: translateX(0);
    }

    .compare-sidebar-resizer {
        display: none;
    }

    .compare-topbar {
        min-height: 64px;
        padding: 10px 14px;
        gap: 10px;
    }

    .compare-search-submit {
        padding-inline: 12px;
    }
}

@media (max-width: 1500px) and (min-width: 981px) {
    .compare-app {
        --compare-sidebar-width: var(--compare-sidebar-boot-width, 260px);
    }

    .compare-workspace {
        padding-inline: 24px;
    }

    .compare-column {
        flex-basis: 330px;
    }
}

/* Compare page empty board */
.compare-empty {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 32px 24px;
    border: 1px dashed #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.compare-empty p {
    max-width: 420px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.compare-empty-intro {
    gap: 28px;
    min-height: min(68vh, 640px);
    padding: 40px 28px 48px;
    border: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 28%, rgba(22, 120, 253, 0.08), transparent 70%),
        #fbfcfe;
    color: #0f172a;
}

.compare-empty-intro-image {
    display: block;
    width: min(100%, 560px);
    height: auto;
    margin: 0 auto;
    user-select: none;
    pointer-events: none;
}

.compare-empty-intro-copy {
    display: grid;
    gap: 12px;
    justify-items: center;
    max-width: 460px;
    margin: 0 auto;
}

.compare-empty-intro-copy h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #0f172a;
}

.compare-empty-intro-copy p {
    max-width: 420px;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 1.55;
}

.compare-empty-intro-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: var(--compare-brand-blue);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
}

.compare-empty-intro-cta:hover {
    background: #0f66e8;
}

.compare-empty-intro-cta:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

a.compare-empty-intro-cta {
    text-decoration: none;
}

@media (max-width: 980px) {
    .compare-empty-intro {
        gap: 20px;
        min-height: min(58vh, 520px);
        padding: 28px 18px 36px;
    }

    .compare-empty-intro-image {
        width: min(100%, 420px);
    }
}

.compare-sidebar-menu {
    position: relative;
}

.compare-sidebar-menu summary {
    list-style: none;
}

.compare-sidebar-menu summary::-webkit-details-marker {
    display: none;
}

.compare-sidebar-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 132px;
    padding: 5px;
    border: 1px solid #334155;
    border-radius: var(--compare-radius-sm);
    background: #1e293b;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.compare-sidebar-menu-panel button {
    display: block;
    width: 100%;
    padding: 6px 9px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #e2e8f0;
    font-size: 0.74rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.compare-sidebar-menu-panel button:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

.compare-sidebar-menu-panel button[data-compare-rename-project]:hover {
    background: rgba(22, 120, 253, 0.15);
    color: #93c5fd;
}

.compare-modal-submit.is-danger {
    border: 0;
    background: #dc2626;
    color: #fff;
}

.compare-modal-submit.is-danger:hover:not(:disabled) {
    background: #b91c1c;
}

/* Compare page ? suggestion tier badges in row badges */
.compare-row-badges .admin-ref-test-tier {
    margin-left: 0;
}

.compare-row-badges .admin-ref-test-tier[data-tier='peripheral'] {
    background: #eef0ec;
    color: #556055;
}

/* Site-wide custom tooltips */
.kc-tooltip {
    position: fixed;
    z-index: 10050;
    max-width: min(280px, calc(100vw - 24px));
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(22, 120, 253, 0.38);
    border-radius: 8px;
    background: var(--ink, #15251f);
    box-shadow: 0 14px 36px rgba(21, 37, 31, 0.28);
    color: var(--paper, #f5f3ec);
    font-size: 0.78rem;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.kc-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.kc-tooltip-title {
    display: block;
    margin-bottom: 0.2rem;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kc-tooltip-body {
    display: block;
    color: rgba(245, 243, 236, 0.9);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-line;
}

.kc-tooltip::after {
    content: '';
    position: absolute;
    left: var(--kc-tooltip-arrow-left, 50%);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(22, 120, 253, 0.38);
    border-bottom: 1px solid rgba(22, 120, 253, 0.38);
    background: var(--ink, #15251f);
    transform: translateX(-50%) rotate(45deg);
}

.kc-tooltip[data-placement='top']::after {
    bottom: -6px;
}

.kc-tooltip[data-placement='bottom']::after {
    top: -6px;
    transform: translateX(-50%) rotate(-135deg);
}

[data-tooltip] {
    cursor: help;
}

.compare-legend [data-tooltip],
.compare-badge[data-tooltip],
.compare-rank[data-tooltip] {
    cursor: help;
}

.header-menu-toggle[data-tooltip],
.compare-view-toggle[data-tooltip],
.compare-view-menu-item[data-tooltip],
.compare-view-review[data-tooltip],
.compare-view-export[data-tooltip],
.compare-downvote[data-tooltip],
.compare-marker[data-tooltip],
.compare-phrase-filter-btn[data-tooltip],
.compare-filters-btn[data-tooltip],
.compare-tweak-btn[data-tooltip],
.compare-column-hide-btn[data-tooltip],
.compare-column-delete-btn[data-tooltip] {
    cursor: pointer;
}

/* Compare page ? save project sidebar control */
.compare-sidebar-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(22, 120, 253, 0.35);
    border-radius: var(--compare-radius-sm);
    background: rgba(22, 120, 253, 0.08);
    color: var(--compare-brand-blue, #1678fd);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}

.compare-sidebar-save-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-sidebar-save-btn:hover:not(:disabled) {
    background: rgba(22, 120, 253, 0.14);
}

.compare-sidebar-save-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Compare page ? phrase search + filters toolbar */
.compare-phrase-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.compare-phrase-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.compare-phrase-filter-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.compare-phrase-filter-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.compare-phrase-filter-btn.is-active {
    border-color: #2563eb;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.compare-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    white-space: nowrap;
    transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.compare-filters-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.compare-filters-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.compare-filters-btn.is-active {
    border-color: #2563eb;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.compare-phrase-filter-panel {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: min(70vw, 280px);
    height: 42px;
    padding: 0 4px 0 10px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-md);
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.compare-phrase-filter-panel[hidden] {
    display: none !important;
}

.compare-phrase-filter-search {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.compare-phrase-filter-panel input {
    min-width: 0;
    flex: 1;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.88rem;
}

.compare-phrase-filter-panel input[type="search"]::-webkit-search-decoration,
.compare-phrase-filter-panel input[type="search"]::-webkit-search-cancel-button,
.compare-phrase-filter-panel input[type="search"]::-webkit-search-results-button,
.compare-phrase-filter-panel input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.compare-phrase-filter-clear {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-xs);
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.compare-phrase-filter-clear svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.compare-phrase-filter-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.compare-column.is-column-hidden {
    opacity: 0.55;
}

.compare-modal--filters .compare-modal-card {
    width: min(92vw, 540px);
}

.compare-modal--filters .compare-modal-card header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.compare-modal--order .compare-modal-card {
    width: min(92vw, 400px);
}

.compare-modal--order .compare-modal-card header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.compare-modal--order .compare-modal-card footer {
    justify-content: flex-end;
}

.compare-order-section {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.compare-order-switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #f8fafc;
    cursor: pointer;
}

.compare-switch {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    margin-top: 1px;
}

.compare-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.compare-switch-track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s ease;
}

.compare-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.compare-switch input:checked + .compare-switch-track {
    background: #2563eb;
}

.compare-switch input:checked ~ .compare-switch-thumb {
    transform: translateX(16px);
}

.compare-switch input:focus-visible + .compare-switch-track {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.compare-filters-section {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.compare-filters-section[hidden] {
    display: none;
}

.compare-filters-section h3 {
    margin: 0;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.compare-row-empty {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 8px 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    color: var(--muted);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.3;
    list-style: none;
    white-space: nowrap;
}

.compare-row-empty:hover {
    background: #f8fafc;
}

/* compare page ? initial results tweak button */
.compare-column-head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.compare-column-head-title {
    min-width: 0;
    flex: 1;
}

.compare-column-head-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.compare-column-index {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    cursor: help;
}

.compare-column-head-top h2,
.compare-column-head-title h2 {
    min-width: 0;
}

.compare-column-head-title-row h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.compare-column-head-title .compare-column-seeds {
    margin: 4px 0 0;
}

.compare-column-head-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.compare-column-head-actions-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.compare-column-head-actions-row .compare-column-hide-btn,
.compare-column-head-actions-row .compare-column-delete-btn {
    flex: 1;
}

.compare-tweak-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: var(--compare-radius-xs);
    background: #fff;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.compare-tweak-btn-icon {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.compare-tweak-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.compare-tweak-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.compare-tweak-btn[aria-disabled="true"]:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.compare-column-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: var(--compare-radius-xs);
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.compare-column-delete-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-column-delete-btn:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
}

.compare-column-hide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: var(--compare-radius-xs);
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.compare-column-hide-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-column-hide-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #334155;
}

.compare-column.is-hiding {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

/* compare page ? fine-tune modal header icon */
.compare-tweak-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compare-tweak-modal-title h2 {
    margin: 0;
}

.compare-tweak-modal-icon {
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.compare-tuning-fields {
    display: grid;
    gap: 15px;
}

/* Compare page ? heading tools and settings modal */
.compare-heading-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.compare-heading-tools [data-compare-board-tool][hidden] {
    display: none !important;
}

.compare-heading-tools .compare-phrase-filter-btn,
.compare-heading-tools .compare-phrase-filter-panel {
    height: 38px;
    border-radius: var(--compare-radius-sm);
    box-shadow: none;
}

.compare-heading-tools .compare-phrase-filter-btn {
    width: 38px;
}

.compare-heading-tools .compare-filters-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: var(--compare-radius-sm);
    box-shadow: none;
}

/* Board tools now live in the heading; only keep the toolbar row while the compare mode toggle is showing. */
@media (min-width: 550px) {
    .compare-workspace-header:not(:has(.compare-mode-toggle.is-open)) {
        display: none;
    }
}

.compare-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.compare-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-icon-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.compare-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.compare-icon-btn:disabled:hover {
    border-color: #dbe2ea;
    color: #475569;
}

.compare-icon-btn.is-active {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

.compare-fullscreen-icon-exit {
    display: none;
}

.compare-icon-btn.is-active .compare-fullscreen-icon-enter {
    display: none;
}

.compare-icon-btn.is-active .compare-fullscreen-icon-exit {
    display: block;
}

.compare-modal--settings .compare-modal-card footer {
    justify-content: flex-end;
}

.compare-settings-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 4px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #f8fafc;
    cursor: pointer;
}

.compare-settings-option-button {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

.compare-settings-option-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.compare-settings-option-button:not(:disabled):hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.compare-settings-option input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: none;
    accent-color: #2563eb;
    cursor: pointer;
}

.compare-settings-option-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.compare-settings-option-copy strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.compare-settings-option-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.compare-settings-experimental {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #fbbf24;
    background: #fffbeb;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: #b45309;
    white-space: nowrap;
}

.compare-settings-option-copy span {
    font-size: 0.82rem;
    line-height: 1.35;
    color: #64748b;
}

.compare-settings-option-copy .compare-settings-experimental {
    font-size: 0.68rem;
    line-height: 1.35;
    color: #b45309;
}

/* compare page ? tuning field help */
.compare-modal-field-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.compare-modal-field .compare-modal-field-label {
    font-weight: 700;
}

.compare-field-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 2px 0 0;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    box-sizing: border-box;
}

.compare-field-help:hover,
.compare-field-help:focus-visible {
    border-color: #1678fd;
    color: #1678fd;
    outline: none;
}

/* Mobile header ? logo + burger (?980px) */
.compare-mobile-bar {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #0f172a;
}

.compare-mobile-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.compare-mobile-brand img {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    mix-blend-mode: screen;
    transition: opacity 0.2s ease;
}

.compare-mobile-brand:hover img {
    opacity: 0.72;
}

.compare-nav-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
    flex: none;
}

.compare-nav-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.compare-nav-toggle-close {
    display: none;
}

.compare-nav-toggle:hover,
.compare-nav-toggle:focus-visible {
    border-color: #60a5fa;
    color: #fff;
    outline: none;
}

.compare-nav-backdrop {
    display: none;
    position: fixed;
    z-index: 210;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    cursor: pointer;
}

@media (max-width: 980px) {
    .compare-mobile-bar {
        display: flex;
    }

    .compare-nav-backdrop:not([hidden]) {
        display: block;
    }

    .compare-body.is-nav-open {
        overflow: hidden;
    }

    .compare-app.is-nav-open .compare-nav-toggle-open {
        display: none;
    }

    .compare-app.is-nav-open .compare-nav-toggle-close {
        display: block;
    }

    .compare-workspace {
        padding: 10px 12px 24px;
    }

    .compare-heading {
        gap: 8px;
        margin: -10px -12px 10px;
        padding: 10px 12px;
        min-height: 64px;
        min-width: 0;
    }

    .compare-heading-copy {
        min-width: 0;
        flex: 1;
    }

    .compare-heading h1 {
        font-size: 1.15rem;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .compare-heading p {
        display: none;
    }

    .compare-heading-tools {
        gap: 4px;
    }

    .compare-view-nav {
        padding: 2px;
        box-shadow: none;
    }

    .compare-view-toggle {
        padding: 6px 8px;
        gap: 4px;
    }

    .compare-view-btn-label {
        display: none;
    }

    .compare-view-review {
        width: 30px;
        padding: 0;
    }

    .compare-view-export {
        width: 30px;
    }

    .compare-heading .compare-icon-btn,
    .compare-heading .compare-profile-menu .header-menu-toggle,
    .compare-heading .compare-admin-link {
        width: 34px;
        height: 34px;
    }

    .compare-heading .compare-icon-btn svg {
        width: 15px;
        height: 15px;
    }

    .compare-heading-tools .compare-phrase-filter-btn,
    .compare-heading-tools .compare-filters-btn {
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .compare-heading-tools .compare-phrase-filter-panel {
        height: 34px;
    }

    .compare-toolbar {
        gap: 8px;
        margin: 8px 0 12px;
    }

    .compare-toolbar-left,
    .compare-toolbar-right {
        gap: 6px;
    }

    .compare-mode-label-full {
        display: none;
    }

    .compare-mode-label-short {
        display: inline;
    }

    .compare-mode-toggle.is-open {
        padding: 2px;
    }

    .compare-mode-toggle button {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .compare-phrase-filter-btn,
    .compare-filters-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        gap: 0;
        border-radius: var(--compare-radius-sm);
        box-shadow: none;
    }

    .compare-phrase-filter-panel {
        width: min(62vw, 220px);
        height: 34px;
        padding: 0 2px 0 8px;
        border-radius: var(--compare-radius-sm);
        box-shadow: none;
    }

    .compare-phrase-filter-panel input {
        font-size: 0.8rem;
    }

    .compare-filters-btn-label {
        display: none;
    }

    .compare-toast {
        right: 12px;
        bottom: 12px;
    }
}

.compare-toolbar-page-title {
    display: none;
}

@media (max-width: 549px) {
    .compare-heading {
        justify-content: flex-end;
        gap: 6px;
        min-height: 52px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .compare-heading-copy {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .compare-toolbar-page-title {
        display: block;
        margin: 0;
        color: var(--ink, #0f172a);
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .compare-toolbar-page-title--fallback {
        margin: 2px 0 10px;
    }

    .compare-workspace:has(.compare-workspace-header:not([hidden])) .compare-toolbar-page-title--fallback {
        display: none;
    }

    .compare-toolbar-left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 10px;
    }

    .compare-toolbar-left > .compare-toolbar-page-title {
        flex: 1 1 auto;
    }

    .review-heading .review-heading-aside {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Compare fine-tune ? range end labels and drag value tip */
.compare-tuning-slider {
    display: grid;
    gap: 4px;
    width: 100%;
}

.compare-tuning-range-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    font-size: 0.68rem;
    color: #94a3b8;
}

.compare-tuning-range-labels-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.compare-tuning-range-labels span:first-child {
    text-align: left;
}

.compare-tuning-range-labels span:last-child {
    text-align: right;
}

.compare-tuning-range-labels-3 span:nth-child(2) {
    text-align: center;
}

.compare-guest-locked-tuning {
    display: grid;
    gap: 15px;
    padding: 10px 12px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #f8fafc;
}

.compare-guest-lock-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--compare-brand-blue, #1678fd);
    background: var(--compare-brand-blue, #1678fd);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    white-space: nowrap;
}

.compare-guest-locked-tuning .compare-modal-field.is-guest-locked {
    opacity: 0.72;
}

.compare-modal-field.is-guest-locked input[type="range"] {
    cursor: not-allowed;
}

/* Tree page ? /tree */
.tree-app {
    --tree-accent: #2563eb;
    --tree-new: #22c55e;
    --tree-new-text: #15803d;
    --tree-retained: #2563eb;
    --tree-removed: #94a3b8;
    --tree-card-border: #e2e8f0;
}

.tree-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tree-workspace .compare-toolbar {
    margin: 6px 0 12px;
}

.tree-board-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tree-board-stage {
    position: relative;
    display: block;
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.tree-snakes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.tree-board-stage .board-zoom-world {
    position: relative;
    min-width: max-content;
    min-height: 100%;
    padding: 8px 8px 28px;
    overflow: visible;
}

.tree-snake {
    fill: none;
    stroke: var(--tree-retained);
    stroke-width: 2;
}

.tree-snake.is-new {
    stroke: var(--tree-new);
}

.tree-snake.is-removed {
    stroke: var(--tree-removed);
}

.tree-snake-dot {
    fill: var(--tree-retained);
}

.tree-snake-dot.is-new {
    fill: var(--tree-new);
}

.tree-snake-dot.is-removed {
    fill: var(--tree-removed);
}

.tree-board {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--tree-column-gap, 28px);
    min-height: 240px;
}

.tree-depth {
    display: flex;
    flex-direction: column;
    gap: var(--tree-sibling-gap, 48px);
    flex: 0 0 auto;
    width: clamp(280px, 28vw, 340px);
    min-width: 280px;
}

.tree-app[data-tree-wide-gaps="1"] {
    --tree-column-gap: 88px;
    --tree-sibling-gap: 72px;
}

.tree-board:has(> .tree-empty) {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.tree-empty {
    display: grid;
    place-items: center;
    min-width: min(560px, 70vw);
    min-height: 280px;
    padding: 32px;
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
}

.tree-root {
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--tree-accent);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.tree-node.tree-root {
    border-color: transparent;
    border-left-color: transparent;
    background: var(--tree-accent);
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.tree-node.tree-root .tree-node-phrase {
    color: #fff;
    font-weight: 600;
}

.tree-generation {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding-left: 18px;
    box-sizing: border-box;
}

.tree-generation.is-baseline {
    padding-left: 0;
}

.tree-generation.is-dragging {
    z-index: 6;
    opacity: 0.96;
}

.tree-generation-head {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tree-generation-head:active,
.tree-app.is-dragging-generation .tree-generation-head {
    cursor: grabbing;
}

.tree-generation-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tree-generation-title-row .compare-column-index {
    flex: 0 0 auto;
}

.tree-generation-title-row h2,
.tree-generation-head h2 {
    margin: 0;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tree-generation-title-row h2 {
    flex: 1;
    min-width: 0;
}

.tree-generation-origin {
    margin: 4px 0 0;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.tree-generation-head p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 0.78rem;
}

.tree-generation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 0;
}

.tree-generation-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.86rem;
    background: #f8fafc;
}

.tree-node {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    border: 1px solid var(--tree-card-border);
    border-left-width: 3px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.tree-node.is-retained {
    border-left-color: var(--tree-retained);
}

.tree-node.is-new {
    border-color: #bbf7d0;
    border-left-color: var(--tree-new);
    color: var(--tree-new-text);
}

.tree-node.is-removed {
    border-left-color: var(--tree-removed);
    color: #64748b;
    opacity: 0.78;
}

.tree-node.is-downvoted:not(.is-removed) {
    opacity: 0.72;
    border-color: #ef4444;
    border-left-color: #ef4444;
}

.tree-node.is-struck .tree-node-phrase {
    text-decoration: line-through;
}

.tree-node-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 12px 8px 12px 10px;
}

.tree-node-marker {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--compare-brand-blue, #1678fd);
}

.tree-node-marker svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.tree-node-phrase {
    display: block;
    min-width: 0;
    line-height: 1.35;
    font-size: 0.88rem;
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: normal;
}

.tree-node-rank {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 0;
    color: var(--tree-retained);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 10px;
    padding: 8px 16px;
    width: fit-content;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 0.78rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.tree-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tree-legend b {
    font-weight: 700;
    color: #334155;
}

.tree-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tree-dot.is-new {
    background: var(--tree-new);
}

.tree-dot.is-retained {
    background: var(--tree-retained);
}

.tree-dot.is-removed {
    background: var(--tree-removed);
}

@media (max-width: 980px) {
    .tree-workspace .compare-toolbar {
        margin: 6px 0 8px;
    }

    .tree-board {
        gap: var(--tree-column-gap, 20px);
    }

    .tree-depth {
        width: clamp(240px, 70vw, 340px);
        gap: var(--tree-sibling-gap, 36px);
        min-width: 240px;
    }

    .tree-app[data-tree-wide-gaps="1"] {
        --tree-column-gap: 64px;
        --tree-sibling-gap: 56px;
    }

    .tree-root {
        font-size: 0.84rem;
    }
}


.compare-tuning-value-tip {
    position: fixed;
    z-index: 1200;
    padding: 4px 8px;
    border-radius: 6px;
    background: #0f172a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.compare-tuning-value-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    background: #0f172a;
    transform: translateX(-50%) rotate(45deg);
}

/* Explorer: phrase row context menu */
.compare-phrase-menu {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 16px));
    padding: 5px;
    border: 1px solid #334155;
    border-radius: var(--compare-radius-sm);
    background: #1e293b;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.compare-phrase-menu[hidden] {
    display: none;
}

.compare-phrase-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.compare-phrase-menu button svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-phrase-menu button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-phrase-menu button:hover,
.compare-phrase-menu button:focus-visible {
    background: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
    outline: none;
}

.compare-phrase-menu button.is-danger:hover,
.compare-phrase-menu button.is-danger:focus-visible {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

.compare-phrase-menu button:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Explorer: column header context menu */
.compare-column-menu {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    padding: 5px;
    border: 1px solid #334155;
    border-radius: var(--compare-radius-sm);
    background: #1e293b;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.compare-column-menu[hidden] {
    display: none;
}

.compare-column-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.compare-column-menu button[hidden] {
    display: none;
}

.compare-column-menu button svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-column-menu button:hover,
.compare-column-menu button:focus-visible {
    background: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
    outline: none;
}

.compare-column-menu button.is-danger:hover,
.compare-column-menu button.is-danger:focus-visible {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

.compare-column-menu button:disabled {
    opacity: 0.45;
    cursor: default;
}

.compare-column-menu button:disabled:hover,
.compare-column-menu button:disabled:focus-visible {
    background: transparent;
    color: #e2e8f0;
}


/* Map page ? /map */
.map-app {
    --map-kept-bg: #dcfce7;
    --map-kept-border: #22c55e;
    --map-kept-ink: #166534;
    --map-candidate-border: #94a3b8;
    --map-candidate-ink: #64748b;
    --map-axis: #cbd5e1;
}

.map-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.map-workspace .compare-toolbar {
    margin: 6px 0 12px;
}

.map-board-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 8px 16px 12px;
}

.map-board-stage {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04), transparent 42%),
        #f8fafc;
    overflow: hidden;
}

.map-board-stage .board-zoom-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04), transparent 42%),
        #f8fafc;
}

.map-board {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-axes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map-axis-line {
    position: absolute;
    background: repeating-linear-gradient(
        to bottom,
        var(--map-axis) 0 6px,
        transparent 6px 12px
    );
}

.map-axis-x {
    left: 168px;
    right: 168px;
    top: 50%;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        var(--map-axis) 0 6px,
        transparent 6px 12px
    );
}

.map-axis-y {
    top: 56px;
    bottom: 56px;
    left: 50%;
    width: 1px;
}

.map-axis-label {
    position: absolute;
    z-index: 3;
    color: #94a3b8;
    font-size: calc(0.72rem + 3px);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}

.map-axis-broad {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.map-axis-specific {
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.map-axis-close {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 132px;
    max-width: 132px;
    white-space: normal;
    line-height: 1.25;
}

.map-axis-related {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 132px;
    max-width: 132px;
    text-align: right;
    white-space: normal;
    line-height: 1.25;
}

.map-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #64748b;
    font-size: 0.92rem;
    text-align: center;
}

.map-empty-overlay {
    pointer-events: none;
    background: transparent;
}

.map-node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 8px 12px 8px 10px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    font-size: 0.82rem;
    line-height: 1.3;
    will-change: left, top;
}

.map-board.is-animating .map-node:not(.is-seed) {
    transition:
        left 1.7s cubic-bezier(0.22, 1, 0.36, 1),
        top 1.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .map-board.is-animating .map-node:not(.is-seed) {
        transition: none;
    }
}

.map-node.is-seed {
    z-index: 5;
    background: var(--map-kept-bg);
    border: 1.5px solid var(--map-kept-border);
    color: var(--map-kept-ink);
    font-weight: 600;
}

.map-node.is-kept:not(.is-seed) {
    background: var(--map-kept-bg);
    border: 1.5px solid var(--map-kept-border);
    color: var(--map-kept-ink);
}

.map-node.is-candidate {
    background: #fff;
    border: 1.5px dashed var(--map-candidate-border);
    color: var(--map-candidate-ink);
}

.map-node.is-removed {
    background: #f1f5f9;
    border: 1.5px dashed #94a3b8;
    color: #64748b;
    text-decoration: line-through;
}

.map-node.is-downvoted {
    background: #fff;
    border: 1.5px solid #ef4444;
    color: #b91c1c;
    text-decoration: line-through;
}

.map-node-mark {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.map-node.is-candidate .map-node-mark {
    background: #94a3b8;
}

.map-node.is-removed .map-node-mark {
    background: #ef4444;
}

.map-node.is-downvoted .map-node-mark {
    background: #ef4444;
}

.map-node-marker {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--compare-brand-blue, #1678fd);
}

.map-node-marker svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.map-node-phrase {
    min-width: 0;
}

.map-node-phrase strong {
    font-weight: 700;
    color: inherit;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 10px;
    padding: 8px 16px;
    width: fit-content;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 0.78rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.map-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.map-dot.is-kept {
    background: var(--map-kept-border);
}

.map-dot.is-candidate {
    background: #94a3b8;
}

.map-dot.is-removed {
    background: #ef4444;
}

@media (max-width: 980px) {
    .map-workspace .compare-toolbar {
        margin: 6px 0 8px;
    }

    .map-board-wrap {
        padding: 4px 10px 10px;
    }

    .map-board-stage {
        min-height: 420px;
        flex: 1 1 auto;
    }

    .map-axis-close,
    .map-axis-related {
        width: 120px;
        max-width: 120px;
        font-size: calc(0.66rem + 3px);
    }

    .map-node {
        max-width: 160px;
        font-size: 0.76rem;
    }
}

/* Shared board zoom ? Map + Tree */
.board-zoom-viewport {
    touch-action: none;
    overscroll-behavior: contain;
    cursor: grab;
}

.board-zoom-viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.board-zoom-world {
    transform-origin: 0 0;
    will-change: transform;
}

.board-zoom-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
}

.board-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #334155;
    cursor: pointer;
}

.board-zoom-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.board-zoom-btn:hover,
.board-zoom-btn:focus-visible {
    background: #f1f5f9;
    outline: none;
}

.board-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.board-zoom-label {
    min-width: 3.1rem;
    padding: 0 4px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.board-zoom-reset svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 980px) {
    .board-zoom-controls {
        right: 8px;
        bottom: 8px;
    }

    .board-zoom-btn {
        width: 38px;
        height: 38px;
    }
}

/* Map settings modal empty state */
.compare-settings-empty {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Explorer generate modal — in-progress spinner overlay */
.compare-modal-generating {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.94);
}

.compare-modal-generating[hidden] {
    display: none;
}

.compare-modal-generating p {
    margin: 0;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 500;
}

.compare-modal-generating-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: compare-modal-spin 0.75s linear infinite;
}

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

/* Export page */
.export-workspace {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

.export-banner {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: var(--compare-radius-sm);
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.84rem;
    font-weight: 600;
}

.export-empty {
    display: grid;
    gap: 12px;
    max-width: 100%;
    margin-top: 12px;
}

.export-empty p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: nowrap;
}

.export-empty-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border-radius: var(--compare-radius-sm);
    background: #2563eb;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.export-summary,
.export-destinations {
    display: grid;
    gap: 6px;
}

.export-destinations {
    margin-top: 10px;
}

.export-summary h2 {
    margin: 0;
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
}

.export-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.export-summary-grid > div,
.export-summary-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #fff;
}

.export-summary-card > svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.export-summary-card--seed > svg {
    color: #0d9488;
}

.export-summary-card--unique > svg {
    color: #2563eb;
}

.export-summary-card--saved > svg {
    color: #16a34a;
}

.export-summary-card--rejected > svg {
    color: #dc2626;
}

.export-summary-card--suggested > svg {
    color: #d97706;
}

.export-summary-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.export-summary-grid dt {
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.export-summary-grid dd {
    margin: 0;
    min-width: 0;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
    word-break: break-word;
}

.export-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    min-height: 280px;
}

.export-layout--with-explorations {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.export-explorations {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
    gap: 12px;
    height: 100%;
    min-height: 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #fff;
    overflow: hidden;
}

.export-explorations-list {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.export-explorations-list::-webkit-scrollbar {
    width: 10px;
}

.export-explorations-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

.export-explorations-list::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border: 2px solid #f1f5f9;
    border-radius: 999px;
}

.export-explorations-list::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.export-explorations-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.export-explorations-bulk-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #1678fd;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
}

.export-explorations-bulk-btn:hover {
    text-decoration: underline;
}

.export-explorations-option {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 9px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    cursor: pointer;
}

.export-explorations-option:hover {
    border-color: #bfdbfe;
}

.export-explorations-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.export-explorations-option input {
    margin-top: 2px;
}

.export-explorations-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.export-explorations-copy strong {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 700;
    word-break: break-word;
}

.export-explorations-copy span {
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.3;
    word-break: break-word;
}

.export-picker-scroll {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #fff;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.export-picker-scroll::-webkit-scrollbar {
    width: 10px;
}

.export-picker-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 0 var(--compare-radius-md) var(--compare-radius-md) 0;
}

.export-picker-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border: 2px solid #f1f5f9;
    border-radius: 999px;
}

.export-picker-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.export-configure {
    display: grid;
    align-content: start;
    gap: 12px;
    height: 100%;
    min-height: 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #fff;
}

.export-options-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.export-scope {
    display: grid;
    gap: 6px;
}

.export-scope-option {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 9px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    cursor: pointer;
}

.export-scope-option:hover {
    border-color: #bfdbfe;
}

.export-scope-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.export-scope-option input {
    margin-top: 2px;
}

.export-scope-copy {
    display: grid;
    gap: 1px;
}

.export-scope-copy strong {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 700;
}

.export-scope-copy span {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.3;
}

.export-action-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    min-height: 0;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #fff;
}

.export-action-meta {
    display: grid;
    gap: 6px;
}

.export-action-kicker {
    margin: 0;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.export-action-dest {
    margin: 0;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.25;
}

.export-action-count {
    display: grid;
    gap: 2px;
    margin: 4px 0 0;
}

.export-action-count strong {
    color: #2563eb;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.export-action-count span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.export-action-hint {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 0.76rem;
    line-height: 1.35;
}

.export-action-buttons {
    display: grid;
    gap: 8px;
}

.export-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #2563eb;
    border-radius: var(--compare-radius-sm);
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.export-submit-btn--secondary {
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
}

.export-submit-btn:hover:not(:disabled) {
    background: #1d4ed8;
    border-color: #60a5fa;
}

.export-submit-btn--secondary:hover:not(:disabled) {
    border-color: #60a5fa;
    color: #fff;
    background: #1d4ed8;
}

.export-submit-btn:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.export-submit-btn:disabled {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.export-submit-btn--secondary:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.export-action-buttons [hidden] {
    display: none !important;
}

.export-picker {
    display: grid;
    gap: 0;
}

.export-picker-option {
    display: block;
    cursor: pointer;
}

.export-picker-option + .export-picker-option {
    border-top: 1px solid #eef2f7;
}

.export-picker-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.export-picker-card {
    display: grid;
    gap: 2px;
    padding: 9px 12px;
    background: transparent;
    transition: background 120ms ease;
}

.export-picker-option:hover .export-picker-card {
    background: #f8fafc;
}

.export-picker-option input:focus-visible + .export-picker-card {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: -2px;
}

.export-picker-option input:checked + .export-picker-card {
    background: #eff6ff;
}

.export-picker-name {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
}

.export-picker-desc {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.35;
}

.export-options-empty {
    margin: 0;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.35;
}

.export-options {
    display: grid;
    gap: 6px;
}

.export-options[hidden],
.export-tags[hidden] {
    display: none;
}

.export-options-label {
    margin: 0;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.export-format-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.export-format-option {
    display: inline-flex;
    cursor: pointer;
}

.export-format-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.export-format-option span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 650;
}

.export-format-option input:checked + span {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.export-tags {
    display: grid;
    gap: 8px;
}

.export-tags-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.export-tags-option input {
    margin-top: 2px;
}

.export-tags-copy {
    display: grid;
    gap: 1px;
}

.export-tags-copy strong {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 700;
}

.export-tags-copy span {
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.3;
}

@media (max-width: 1200px) {
    .export-layout--with-explorations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .export-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .export-configure,
    .export-action-col,
    .export-picker-scroll,
    .export-explorations {
        height: auto;
        min-height: 0;
    }

    .export-explorations {
        max-height: 220px;
    }

    .export-explorations-list {
        min-height: 0;
    }

    .export-picker-scroll {
        max-height: 220px;
    }
}

@media (max-width: 640px) {
    .export-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .export-empty p {
        white-space: normal;
    }

    .export-picker-scroll {
        max-height: 180px;
    }
}

/* Admin: Download stats */
.admin-download-stats-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.admin-download-stats-summary > div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-download-stats-summary span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-download-stats-summary strong {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 700;
}

.admin-download-stats-destinations {
    margin-bottom: 8px;
}

.admin-download-stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 14px;
}

.admin-download-stats-filters label {
    display: grid;
    gap: 4px;
    min-width: 180px;
}

.admin-download-stats-filters span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-download-stats-filters select,
.admin-download-stats-filters button {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.admin-download-stats-filters button {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
    font-weight: 650;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.admin-download-stats-filters button:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.admin-download-stats-meta {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 500;
}

.admin-download-stats-pager {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    color: #64748b;
    font-size: 0.84rem;
}

.admin-download-stats-pager a {
    color: #2563eb;
    font-weight: 650;
    text-decoration: none;
}

.admin-download-stats-pager span:first-child,
.admin-download-stats-pager span:last-child {
    opacity: 0.45;
}

@media (max-width: 900px) {
    .admin-download-stats-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Admin: Keyword stats */
.admin-keyword-stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 16px;
}

.admin-keyword-stats-filters label {
    display: grid;
    gap: 4px;
    min-width: 160px;
}

.admin-keyword-stats-filters .admin-keyword-stats-search {
    flex: 1 1 220px;
}

.admin-keyword-stats-filters span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-keyword-stats-filters select,
.admin-keyword-stats-filters input[type="search"],
.admin-keyword-stats-filters button {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.admin-keyword-stats-filters input[type="search"] {
    width: 100%;
}

.admin-keyword-stats-filters button {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
    font-weight: 650;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.admin-keyword-stats-filters button:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.admin-keyword-stats-reset {
    align-self: center;
    color: #2563eb;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.admin-keyword-stats-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.admin-keyword-stats-summary > div {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-keyword-stats-summary span {
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-keyword-stats-summary strong {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
}

.admin-keyword-stats-summary em {
    color: #64748b;
    font-size: 0.7rem;
    font-style: normal;
}

.admin-keyword-stats-legend {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #64748b;
    font-size: 0.78rem;
}

.admin-keyword-stats-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border-radius: 3px;
}

.admin-keyword-stats-legend i.is-users,
.admin-keyword-stats-chart-bar span.is-users {
    background: #2563eb;
}

.admin-keyword-stats-legend i.is-guests,
.admin-keyword-stats-chart-bar span.is-guests {
    background: #93c5fd;
}

.admin-keyword-stats-chart {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 140px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-keyword-stats-chart-bar {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column-reverse;
    min-width: 0;
}

.admin-keyword-stats-chart-bar span {
    display: block;
    height: var(--bar-height, 0%);
}

.admin-keyword-stats-chart-bar span.is-users:last-child,
.admin-keyword-stats-chart-bar span:only-of-type {
    border-radius: 3px 3px 0 0;
}

.admin-keyword-stats-chart.is-hourly {
    height: 110px;
    padding-bottom: 24px;
}

.admin-keyword-stats-chart-bar em {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #94a3b8;
    font-size: 0.62rem;
    font-style: normal;
}

.admin-keyword-stats-chart-axis {
    display: flex;
    justify-content: space-between;
    margin: 4px 2px 0;
    color: #94a3b8;
    font-size: 0.7rem;
}

.admin-keyword-stats-subheading {
    margin: 18px 0 8px;
    color: #334155;
    font-size: 0.86rem;
}

.admin-keyword-stats-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.admin-keyword-stats-split.is-wide-first {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.admin-keyword-stats-gap {
    margin-top: 20px;
}

.admin-keyword-stats-meta {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 500;
}

.admin-keyword-stats-guest {
    color: #64748b;
    font-size: 0.82rem;
}

.admin-keyword-stats-code {
    display: inline-block;
    margin: 1px 2px 1px 0;
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
    cursor: help;
}

.admin-keyword-stats-share {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.admin-keyword-stats-share > span {
    display: inline-block;
    width: 44px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb var(--share, 0%), #e2e8f0 var(--share, 0%));
}

@media (max-width: 1100px) {
    .admin-keyword-stats-split,
    .admin-keyword-stats-split.is-wide-first {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .admin-keyword-stats-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-keyword-stats-chart.is-hourly .admin-keyword-stats-chart-bar:nth-child(odd) em {
        display: none;
    }
}

/* Admin: Project stats */
.admin-project-stats-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.admin-project-stats-summary > div {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-project-stats-summary span {
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-project-stats-summary strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
}

.admin-project-stats-summary em {
    color: #64748b;
    font-size: 0.7rem;
    font-style: normal;
}

.admin-project-stats-views {
    margin-bottom: 8px;
}

.admin-project-stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 14px;
}

.admin-project-stats-search {
    flex: 1 1 240px;
    min-width: 220px;
}

.admin-project-stats-filters label {
    display: grid;
    gap: 4px;
    min-width: 180px;
}

.admin-project-stats-filters span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
}

.admin-project-stats-filters select,
.admin-project-stats-filters input[type="search"],
.admin-project-stats-filters button {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.admin-project-stats-filters input[type="search"] {
    width: 100%;
}

.admin-project-stats-filters button {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
    font-weight: 650;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.admin-project-stats-filters button:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.admin-project-stats-meta {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 500;
}

.admin-project-stats-pager {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    color: #64748b;
    font-size: 0.84rem;
}

.admin-project-stats-pager a {
    color: #2563eb;
    font-weight: 650;
    text-decoration: none;
}

.admin-project-stats-pager span:first-child,
.admin-project-stats-pager span:last-child {
    opacity: 0.45;
}

@media (max-width: 1100px) {
    .admin-project-stats-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-project-stats-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Landing page */
.landing-body {
    --landing-ink: #0f172a;
    --landing-muted: #64748b;
    --landing-line: #e2e8f0;
    --landing-paper: #f8fafc;
    --landing-panel: #ffffff;
    --landing-blue: #1678fd;
    --landing-blue-deep: #0b5ed7;
    --landing-nav: #0f172a;
    --landing-font: "Figtree", ui-sans-serif, sans-serif;
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    background: var(--landing-paper);
    color: var(--landing-ink);
    font-family: var(--landing-font);
    line-height: 1.55;
}

.landing-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 18% 0%, rgba(22, 120, 253, 0.14), transparent 55%),
        linear-gradient(180deg, #eef3f9 0%, var(--landing-paper) 38%, #f1f5f9 100%);
}

.landing-nav {
    width: 100%;
    background: var(--landing-nav);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.landing-nav-inner,
.landing-section,
.landing-final,
.site-footer--landing .site-footer-inner,
.site-footer--landing .site-footer-meta {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}

.landing-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
    padding: 14px 0;
}

.landing-notice {
    width: 100%;
    margin: 16px 0 20px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--landing-blue) 25%, var(--landing-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--landing-blue) 8%, #fff);
    color: var(--landing-ink);
    font-size: 0.92rem;
    font-weight: 600;
}

main:not([class]) > .landing-notice {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}

.landing-nav-brand {
    display: flex;
    align-items: center;
}

.landing-nav-brand img {
    display: block;
    width: auto;
    height: 34px;
    mix-blend-mode: screen;
    transition: opacity 0.2s ease;
}

.landing-nav-brand:hover img {
    opacity: 0.72;
}

.landing-nav-links {
    display: flex;
    align-items: stretch;
    gap: 8px 18px;
    font-size: 0.92rem;
    font-weight: 600;
}

.landing-nav-links a,
.landing-nav-links button {
    color: #e2e8f0;
    opacity: 0.82;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.landing-nav-links button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.landing-nav-links a:hover,
.landing-nav-links button:hover,
.landing-nav-links a[aria-current="page"] {
    opacity: 1;
    color: #fff;
}

.landing-nav-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 8px 14px;
    border: 1px solid rgba(22, 120, 253, 0.55);
    border-radius: 8px;
    background: rgba(22, 120, 253, 0.16);
    color: #fff !important;
    opacity: 1 !important;
}

.landing-nav-btn:hover {
    background: rgba(22, 120, 253, 0.28);
    color: #fff !important;
}

.landing-nav-btn-secondary {
    border-color: rgba(226, 232, 240, 0.35);
    background: transparent;
    color: #e2e8f0 !important;
}

.landing-nav-btn-secondary:hover {
    border-color: rgba(226, 232, 240, 0.55);
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.15fr);
    gap: 28px 40px;
    align-items: stretch;
    width: min(1120px, calc(100% - 40px));
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 0 36px;
}

.landing-hero-copy {
    width: auto;
    max-width: 36rem;
    align-self: center;
}

.landing-hero h1 {
    margin: 0;
    max-width: 16ch;
    color: var(--landing-ink);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.landing-hero-support {
    margin: 16px 0 0;
    max-width: 36rem;
    color: var(--landing-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.landing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.landing-hero-search {
    display: flex;
    gap: 8px;
    max-width: 36rem;
    margin-top: 24px;
}

.landing-hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: #fff;
    color: var(--landing-ink);
    font: inherit;
    font-size: 1rem;
}

.landing-hero-search input:focus {
    outline: 2px solid color-mix(in srgb, var(--landing-blue) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--landing-blue);
}

.landing-hero-search .landing-btn {
    flex: 0 0 auto;
    border: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.landing-hero-search {
    flex-wrap: wrap;
}

/* Homepage ALTCHA solves in the background; the /try check page shows it when needed. */
.landing-altcha {
    display: none;
}

.landing-search-error {
    margin: 10px 0 0;
    color: #b42318;
    font-size: 0.9rem;
    font-weight: 600;
}

.landing-verify {
    max-width: 36rem;
    margin: 0 auto;
    padding: 64px 16px;
    text-align: center;
}

.landing-verify-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.landing-cta-note {
    margin: 12px 0 0;
    color: var(--landing-muted);
    font-size: 0.88rem;
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.landing-btn:hover {
    transform: translateY(-1px);
}

.landing-btn-primary {
    background: var(--landing-blue);
    color: #fff;
}

.landing-btn-primary:hover {
    background: var(--landing-blue-deep);
}

.landing-btn-secondary {
    border: 1px solid var(--landing-line);
    background: rgba(255, 255, 255, 0.85);
    color: var(--landing-ink);
}

.landing-btn-secondary:hover {
    border-color: color-mix(in srgb, var(--landing-blue) 40%, var(--landing-line));
    color: var(--landing-blue-deep);
}

.landing-btn-on-dark {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
}

.landing-btn-on-dark:hover {
    background: rgba(255, 255, 255, 0.1);
}

.landing-hero-visual {
    width: 100%;
    min-width: 0;
    min-height: 460px;
    padding: 0;
    display: flex;
}

.landing-hero-frame {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    flex: 1;
    width: 100%;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid #d8e0ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.landing-hero-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 0;
    background: #0f172a;
}

.landing-hero-rail-logo {
    width: 20px;
    height: auto;
    margin-bottom: 6px;
    mix-blend-mode: screen;
}

.landing-hero-rail-item {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.14);
}

.landing-hero-rail-item.is-active {
    background: rgba(22, 120, 253, 0.28);
    box-shadow: inset 0 0 0 1px rgba(22, 120, 253, 0.55);
}

.landing-hero-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.landing-hero-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.landing-hero-toolbar strong {
    color: var(--landing-ink);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.landing-hero-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    padding: 14px 16px 16px;
}

.landing-hero-columns section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.landing-hero-columns header {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.landing-hero-columns ul {
    display: grid;
    align-content: start;
    gap: 7px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-hero-columns li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 7px 8px 7px 10px;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.landing-hero-columns li.is-kept {
    border-left: 3px solid #1678fd;
    background: color-mix(in srgb, #1678fd 9%, #fff);
    color: var(--landing-ink);
}

.landing-hero-columns li.is-downvoted {
    opacity: 0.72;
}

.landing-hero-columns .landing-mock-icon {
    width: 22px;
    height: 22px;
}

.landing-hero-columns .landing-mock-icon svg {
    width: 16px;
    height: 16px;
}

.landing-board {
    position: relative;
    width: min(1180px, calc(100% - 24px));
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--landing-line) 80%, #94a3b8);
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.98)),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 23px,
            rgba(20, 118, 252, 0.035) 23px,
            rgba(20, 118, 252, 0.035) 24px
        );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.landing-view-media .landing-board,
.landing-board-compact {
    width: 100%;
    margin: 0;
    border-radius: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--landing-line) 80%, #94a3b8);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.landing-board-compact .landing-board-cols {
    min-height: 0;
    gap: 10px;
    padding: 12px;
}

.landing-board-compact .landing-board-col li:nth-child(n + 3) {
    display: none;
}

.landing-board-compact .landing-board-snakes {
    display: none;
}

.landing-board-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--landing-line);
    background: rgba(255, 255, 255, 0.85);
    color: var(--landing-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.landing-board-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.landing-board-dot:first-child {
    background: #f87171;
}

.landing-board-dot:nth-child(2) {
    background: #fbbf24;
}

.landing-board-dot:nth-child(3) {
    background: #34d399;
}

.landing-board-bar strong {
    margin-left: 8px;
    color: var(--landing-ink);
    font-weight: 700;
}

.landing-board-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-height: 220px;
    padding: 16px;
}

.landing-board-col {
    padding: 12px;
    border: 1px solid var(--landing-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
}

.landing-board-col header {
    margin-bottom: 10px;
    color: var(--landing-blue-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.landing-board-col ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-board-col li {
    padding: 8px 10px;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 550;
}

.landing-board-col li.is-kept {
    border-left: 3px solid var(--landing-blue);
    background: color-mix(in srgb, var(--landing-blue) 8%, #fff);
    color: var(--landing-ink);
}

.landing-board-snakes {
    position: absolute;
    inset: 58px 0 0;
    width: 100%;
    height: calc(100% - 58px);
    pointer-events: none;
    opacity: 0.55;
}

.landing-snake {
    fill: none;
    stroke: var(--landing-blue);
    stroke-width: 2;
    stroke-linecap: round;
}

.landing-snake-b {
    stroke: #0e7490;
}

.landing-section {
    padding: 88px 0 24px;
}

.landing-section-head {
    max-width: 40rem;
    margin-bottom: 36px;
}

.landing-section h2,
.landing-final h2 {
    margin: 0;
    font-family: var(--landing-font);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.landing-section-head p,
.landing-method > p,
.landing-final > p {
    margin: 12px 0 0;
    color: var(--landing-muted);
    font-size: 1.05rem;
}

.landing-feature-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--landing-line);
}

.landing-feature-list li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0;
    border-bottom: 1px solid var(--landing-line);
}

.landing-views {
    display: grid;
    gap: 18px;
}

.landing-view {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr);
    gap: 24px 28px;
    align-items: center;
    padding: 22px 22px 22px 24px;
    border: 1px solid var(--landing-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.landing-view-reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
}

.landing-view-reverse .landing-view-copy {
    order: 2;
}

.landing-view-reverse .landing-view-media {
    order: 1;
}

.landing-view-copy h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.landing-view-copy p {
    margin: 0;
    max-width: 28rem;
    color: var(--landing-muted);
    font-size: 0.98rem;
}

.landing-view-media {
    min-width: 0;
}

.landing-shot {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    overflow: hidden;
    height: 100%;
    min-height: 280px;
    border: 1px solid #d8e0ea;
    border-radius: 12px;
    background: #fff;
}

.landing-shot-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    background: #0f172a;
}

.landing-shot-logo {
    width: 16px;
    height: auto;
    margin-bottom: 4px;
    mix-blend-mode: screen;
}

.landing-shot-rail-item {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.14);
}

.landing-shot-rail-item.is-active {
    background: rgba(22, 120, 253, 0.28);
    box-shadow: inset 0 0 0 1px rgba(22, 120, 253, 0.55);
}

.landing-shot-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    background: #fff;
}

.landing-shot-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.landing-shot-toolbar strong {
    min-width: 0;
    overflow: hidden;
    color: var(--landing-ink);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-shot-toolbar span {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 650;
}

.landing-shot-body {
    min-height: 0;
    padding: 12px;
}

.landing-shot-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
}

.landing-shot-columns section {
    min-width: 0;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.landing-shot-columns header {
    display: grid;
    gap: 5px;
    margin-bottom: 7px;
}

.landing-shot-columns ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-shot-columns li {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 5px 5px 5px 7px;
    border-radius: 5px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.landing-shot-columns li.is-kept {
    border-left: 3px solid #1678fd;
    background: color-mix(in srgb, #1678fd 9%, #fff);
    color: var(--landing-ink);
}

.landing-shot-columns li.is-downvoted {
    opacity: 0.72;
}

.landing-shot-columns .landing-mock-col-label {
    font-size: 0.64rem;
}

.landing-shot-columns .landing-mock-tags span {
    padding: 2px 5px;
    font-size: 0.58rem;
}

.landing-shot-columns .landing-mock-badge {
    padding: 1px 4px;
    font-size: 0.58rem;
}

.landing-mock-col-label {
    color: #1678fd;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.landing-mock-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.landing-mock-tags span {
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.landing-mock-main {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.landing-mock-phrase {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-mock-badge {
    flex: 0 0 auto;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.landing-mock-badge.is-new {
    background: #dcfce7;
    color: #15803d;
}

.landing-mock-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1px;
    margin-left: auto;
}

.landing-mock-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: #94a3b8;
}

.landing-mock-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.landing-mock-marker {
    color: #1678fd;
}

.landing-mock-marker.is-on svg {
    fill: #1678fd;
    stroke: #1678fd;
}

.landing-mock-downvote.is-on {
    color: #dc2626;
}

.landing-mock-downvote.is-on svg {
    fill: #fecaca;
    stroke: #dc2626;
}

.landing-tree-mock {
    display: grid;
    gap: 10px;
    height: 100%;
}

.landing-tree-board {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 210px;
    overflow: hidden;
}

.landing-tree-snakes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.landing-tree-snakes path {
    fill: none;
    stroke: #2563eb;
    stroke-width: 2;
    stroke-linecap: round;
}

.landing-tree-snakes path.is-new {
    stroke: #22c55e;
}

.landing-tree-snakes path.is-removed {
    stroke: #94a3b8;
}

.landing-tree-snakes circle {
    fill: #2563eb;
}

.landing-tree-snakes circle.is-new {
    fill: #22c55e;
}

.landing-tree-snakes circle.is-removed {
    fill: #94a3b8;
}

.landing-tree-gen {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
    padding-left: 10px;
}

.landing-tree-gen.is-baseline {
    padding-left: 0;
    max-width: 150px;
}

.landing-tree-gen header h4 {
    margin: 0;
    color: #94a3b8;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-tree-gen header p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 0.68rem;
}

.landing-tree-list {
    display: grid;
    gap: 8px;
}

.landing-tree-node {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid #e2e8f0;
    border-left-width: 3px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 500;
}

.landing-tree-node span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-tree-node.is-root {
    border: 0;
    background: #2563eb;
    color: #fff;
    font-weight: 650;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.landing-tree-node.is-retained {
    border-left-color: #2563eb;
}

.landing-tree-node.is-new {
    border-color: #bbf7d0;
    border-left-color: #22c55e;
    color: #15803d;
}

.landing-tree-node.is-removed {
    border-left-color: #94a3b8;
    color: #64748b;
    opacity: 0.78;
}

.landing-tree-node.is-struck span:last-child {
    text-decoration: line-through;
}

.landing-tree-marker {
    display: inline-flex;
    flex: 0 0 auto;
    color: #1678fd;
}

.landing-tree-marker svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.landing-tree-legend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    justify-self: center;
    padding: 5px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
}

.landing-tree-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.landing-tree-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
}

.landing-tree-legend i.is-new {
    background: #22c55e;
}

.landing-tree-legend i.is-removed {
    background: #94a3b8;
}

.landing-shot-map {
    position: relative;
    height: 100%;
    min-height: 188px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background:
        linear-gradient(#e2e8f0, #e2e8f0) center / 1px calc(100% - 36px) no-repeat,
        linear-gradient(#e2e8f0, #e2e8f0) center / calc(100% - 200px) 1px no-repeat,
        #f8fafc;
}

.landing-shot-map-axis {
    position: absolute;
    z-index: 3;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.25;
    pointer-events: none;
}

.landing-shot-map-axis.is-broad {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.landing-shot-map-axis.is-specific {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.landing-shot-map-axis.is-close {
    left: 18px;
    top: 50%;
    max-width: 92px;
    transform: translateY(-50%);
}

.landing-shot-map-axis.is-new {
    right: 18px;
    top: 50%;
    max-width: 92px;
    text-align: right;
    transform: translateY(-50%);
}

.landing-shot-map-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.landing-shot-map-dot.is-kept {
    border-color: #1678fd;
    background: color-mix(in srgb, #1678fd 18%, #fff);
}

.landing-shot-map-dot.is-seed {
    width: 12px;
    height: 12px;
    border-color: var(--landing-ink);
    background: var(--landing-ink);
}

.landing-shot-map-label {
    position: absolute;
    max-width: 120px;
    padding: 3px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--landing-ink);
    font-size: 0.62rem;
    font-weight: 650;
    transform: translateY(-120%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.landing-export-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px 40px;
    align-items: center;
    padding: 28px 30px;
    border: 1px solid color-mix(in srgb, var(--landing-blue) 22%, var(--landing-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--landing-blue) 4%, #fff);
}

.landing-export-panel h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.landing-export-panel .landing-view-copy p {
    margin-top: 10px;
}

.landing-mock-export {
    padding: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.landing-mock-export ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-mock-export li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--landing-line);
    border-radius: 10px;
    background: #fff;
    color: var(--landing-ink);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.landing-mock-export li > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.landing-mock-export-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--landing-blue) 10%, #fff);
    color: var(--landing-blue);
}

.landing-mock-export-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.landing-feature-list h3 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.landing-feature-list p {
    margin: 0;
    max-width: 48rem;
    color: var(--landing-muted);
}

.landing-method {
    display: grid;
    gap: 8px;
    max-width: 44rem;
}

.landing-account-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 48px;
    margin-bottom: 8px;
}

.landing-account-split h3 {
    margin: 0 0 12px;
    font-family: var(--landing-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.landing-account-split ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-account-split li {
    position: relative;
    padding: 8px 0 8px 18px;
    border-top: 1px solid var(--landing-line);
    color: var(--landing-muted);
}

.landing-account-split li::before {
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    content: "";
}

.landing-account-member li::before {
    background: var(--landing-blue);
}

.landing-account-member {
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--landing-blue) 28%, var(--landing-line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--landing-blue) 5%, #fff);
}

.landing-final {
    margin-top: 72px;
    margin-bottom: 24px;
    padding: 48px 40px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #0b5ed7 0%, #1476fc 48%, #0e7490 100%);
    color: #fff;
}

.landing-final p {
    color: rgba(255, 255, 255, 0.86);
}

.site-footer--landing {
    margin-top: 0;
    padding: 36px 0 48px;
    border-top: 1px solid var(--landing-line);
    color: var(--landing-muted);
    font-size: 0.92rem;
    background: transparent;
}

.site-footer--landing .site-footer-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
    gap: 28px 48px;
}

.site-footer--landing .site-footer-brand > :is(strong, a) {
    color: var(--landing-ink);
    font-family: var(--landing-font, var(--landing-display));
    font-size: 1.05rem;
}

.site-footer--landing .site-footer-brand a:hover,
.site-footer--landing .site-footer-col a:hover {
    color: var(--landing-blue);
}

.site-footer--landing .site-footer-col h2,
.site-footer--landing .site-footer-col span[aria-current="page"] {
    color: var(--landing-ink);
}

.site-footer--landing .site-footer-col a,
.site-footer--landing .site-footer-col span {
    color: var(--landing-muted);
}

.site-footer--landing .site-footer-meta {
    margin-top: 28px;
    padding-top: 18px;
    border-top-color: var(--landing-line);
}

.site-footer--landing .site-footer-credit a:hover {
    color: var(--landing-blue);
}

@keyframes landing-draw {
    from {
        stroke-dasharray: 420;
        stroke-dashoffset: 420;
    }
    to {
        stroke-dasharray: 420;
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .landing-snake {
        animation: landing-draw 1.4s 0.35s ease forwards;
    }

    .landing-snake-b {
        animation-delay: 0.55s;
    }
}

@media (max-width: 860px) {
    .landing-nav-inner,
    .landing-hero,
    .landing-section,
    .landing-final,
    .site-footer--landing .site-footer-inner,
    .site-footer--landing .site-footer-meta {
        width: min(1120px, calc(100% - 28px));
    }

    main:not([class]) > .landing-notice {
        width: min(1120px, calc(100% - 28px));
    }

    .landing-nav-links > a:not(.landing-nav-btn) {
        display: none;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(1120px, calc(100% - 28px));
        margin-inline: auto;
        padding: 32px 0 8px;
    }

    .landing-hero-copy {
        max-width: none;
    }

    .landing-hero-visual,
    .landing-hero-frame {
        min-height: 340px;
    }

    .landing-hero-frame {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .landing-hero-rail {
        display: none;
    }

    .landing-hero-columns {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
    }

    .landing-board-cols {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .landing-hero-visual .landing-board-col:nth-child(n + 3),
    .landing-board-compact .landing-board-col:nth-child(n + 3) {
        display: none;
    }

    .landing-board-snakes {
        display: none;
    }

    .landing-view,
    .landing-view-reverse,
    .landing-export-panel {
        grid-template-columns: 1fr;
    }

    .landing-view-reverse .landing-view-copy,
    .landing-view-reverse .landing-view-media {
        order: unset;
    }

    .landing-tree-board {
        gap: 14px;
        min-height: 0;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .landing-tree-snakes {
        display: none;
    }

    .landing-tree-gen {
        flex: 0 0 140px;
        max-width: 140px;
        padding-left: 0;
    }

    .landing-tree-gen.is-baseline {
        flex-basis: 128px;
        max-width: 128px;
    }

    .landing-shot-columns {
        grid-template-columns: 1fr;
    }

    .landing-shot-columns section:nth-child(n + 3) {
        display: none;
    }

    .landing-account-split {
        grid-template-columns: 1fr;
    }

    .landing-final {
        padding: 36px 22px;
    }

    .site-footer--landing {
        padding: 28px 0 36px;
    }

    .site-footer--landing .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .site-footer--landing .site-footer-nav {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .landing-nav-inner,
    .landing-hero,
    .landing-section,
    .landing-final,
    .site-footer--landing .site-footer-inner,
    .site-footer--landing .site-footer-meta,
    main:not([class]) > .landing-notice {
        width: min(1120px, calc(100% - 20px));
    }

    .landing-nav-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        min-height: 0;
        padding: 12px 0;
    }

    .landing-nav-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .landing-nav-brand img {
        height: 28px;
        max-width: min(168px, 48vw);
    }

    .landing-nav-links {
        flex: 1 1 100%;
        width: 100%;
        justify-content: stretch;
        gap: 8px;
    }

    .landing-nav-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 10px;
        font-size: 0.78rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .landing-nav-btn-secondary {
        flex: 1.35 1 0;
    }

    .landing-nav-locale {
        flex: 1 1 0;
        min-width: 0;
        margin-inline-start: 0;
    }

    .landing-nav-links .landing-nav-locale-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 14px;
        font-size: 0.78rem;
        line-height: 1.2;
    }

    .landing-hero {
        gap: 20px;
        padding: 22px 0 4px;
    }

    .landing-hero h1 {
        max-width: none;
        font-size: clamp(1.55rem, 7.2vw, 2rem);
    }

    .landing-hero-support {
        margin-top: 12px;
        font-size: 0.95rem;
    }

    .landing-cta-row {
        margin-top: 18px;
        gap: 10px;
    }

    .landing-hero-search {
        flex-direction: column;
        margin-top: 18px;
    }

    .landing-btn {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 0 14px;
        font-size: 0.92rem;
    }

    .landing-hero-visual,
    .landing-hero-frame {
        min-height: 0;
    }

    .landing-hero-frame {
        min-height: 0;
    }

    .landing-hero-toolbar {
        padding: 10px 12px;
    }

    .landing-hero-toolbar strong {
        font-size: 0.82rem;
    }

    .landing-hero-columns {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 12px 12px;
    }

    .landing-hero-columns section:nth-child(n + 2) {
        display: none;
    }

    .landing-hero-columns li:nth-child(n + 6) {
        display: none;
    }

    .landing-section {
        padding-top: 36px;
    }

    .landing-view {
        gap: 16px;
        padding: 16px;
    }

    .landing-export-panel {
        gap: 18px;
        padding: 18px 14px;
    }

    .landing-mock-export {
        padding: 0;
    }

    .landing-mock-export ul {
        gap: 8px;
    }

    .landing-mock-export li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 10px;
        font-size: 0.78rem;
        letter-spacing: -0.01em;
    }

    .landing-mock-export-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }

    .landing-mock-export-icon svg {
        width: 14px;
        height: 14px;
    }

    .landing-view-copy h3 {
        font-size: 1.2rem;
    }

    .landing-shot {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .landing-shot-rail {
        display: none;
    }

    .landing-shot-body {
        padding: 10px;
    }

    .landing-shot-columns section:nth-child(n + 2) {
        display: none;
    }

    .landing-final {
        margin-top: 48px;
        padding: 28px 18px;
    }

    .landing-final .landing-cta-row .landing-btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .landing-nav-links {
        flex-direction: column;
    }

    .landing-nav-btn,
    .landing-nav-btn-secondary {
        flex: 1 1 auto;
        width: 100%;
    }

    .landing-nav-locale,
    .landing-nav-locale-btn {
        width: 100%;
        max-width: none;
    }

    .landing-cta-row {
        flex-direction: column;
    }

    .landing-cta-row .landing-btn {
        width: 100%;
    }

    .landing-export-panel {
        padding: 14px 10px;
    }

    .landing-mock-export ul {
        gap: 6px;
    }

    .landing-mock-export li {
        padding: 8px;
        font-size: 0.72rem;
    }

    .landing-mock-export-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .landing-mock-export-icon svg {
        width: 13px;
        height: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero-copy,
    .landing-hero-visual,
    .landing-board-col,
    .landing-snake,
    .landing-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
    }
}

/* Login / register two-column auth */
.auth-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.15fr);
    gap: clamp(20px, 4vw, 36px);
    align-items: stretch;
    max-width: 980px;
    margin: 30px auto;
    padding: 0 16px;
}

.auth-layout .auth-panel {
    max-width: none;
    margin: 0;
    width: 100%;
}

.auth-layout--login .auth-panel {
    display: flex;
    flex-direction: column;
}

.auth-layout--login .auth-panel form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.auth-layout--login .auth-panel .auth-links {
    margin-top: 0;
}

.auth-layout--login .auth-panel .primary-button,
.auth-layout--login .auth-register-cta-actions {
    margin-top: auto;
    width: 100%;
}

.auth-layout--login .auth-register-cta-actions {
    padding-top: 20px;
}

.auth-layout--login .auth-register-cta-usps {
    margin-bottom: 0;
}

.auth-usps {
    padding: clamp(24px, 5vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, #f8fafc 0%, #eef6ff 100%);
    box-shadow: var(--shadow);
}

.auth-usps h2 {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.auth-usps > p {
    margin: 0 0 22px;
    color: var(--muted);
}

.auth-usps-why-btn {
    margin-top: 22px;
}

.auth-register-cta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 100%;
    padding: clamp(24px, 5vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, #f8fafc 0%, #eef6ff 100%);
    box-shadow: var(--shadow);
}

.auth-register-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(1.65rem, 4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.auth-register-cta > p:not(.eyebrow) {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.45;
}

.auth-register-cta-usps {
    width: 100%;
    margin: 0 0 22px;
    grid-template-columns: 1fr 1fr;
}

.auth-register-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--green-dark);
    border-radius: var(--radius-sm);
    background: var(--green-dark);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.auth-register-cta-btn:hover {
    background: var(--green);
}

.auth-register-cta-btn-secondary {
    border-color: var(--line);
    background: #fff;
    color: var(--green-dark);
}

.auth-register-cta-btn-secondary:hover {
    border-color: var(--green-dark);
    background: color-mix(in srgb, var(--green) 8%, #fff);
}

.auth-register-cta-actions {
    display: grid;
    gap: 10px;
    width: 100%;
}

.landing-auth .auth-register-cta {
    background: linear-gradient(165deg, #ffffff 0%, #eef6ff 100%);
    border-color: var(--landing-line);
}

.compare-lock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.compare-auth-error {
    margin: 0 0 12px;
    color: #9f2f20;
    font-size: 0.9rem;
}

.compare-modal--lock .check-field:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 820px) {
    .auth-layout {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .auth-register-cta-usps {
        grid-template-columns: 1fr;
    }
}

/* Compare lock modal — guest gate with form + USPs */
.compare-modal--lock .compare-lock-card {
    position: relative;
    width: min(900px, 100%);
    padding: 0;
    overflow: hidden;
}

.compare-lock-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.compare-lock-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.compare-lock-close svg {
    width: 18px;
    height: 18px;
}

.compare-lock-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

.compare-lock-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 28px 24px;
}

.compare-lock-main header h2 {
    margin: 0;
    padding-right: 36px;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
}

.compare-lock-main header p {
    margin: 8px 0 0;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.5;
}

.compare-lock-form {
    display: grid;
    gap: 12px;
}

.compare-lock-form .compare-modal-field[hidden],
.compare-lock-form .check-field[hidden] {
    display: none !important;
}

.compare-lock-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.compare-lock-tab {
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.compare-lock-tab:hover:not(.is-active) {
    background: #eef2f7;
    color: #334155;
}

.compare-lock-tab.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.compare-lock-form .compare-modal-field {
    gap: 4px;
}

.compare-modal--lock .compare-lock-actions {
    margin-top: 4px;
}

.compare-modal--lock .compare-lock-actions .compare-modal-submit {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.86rem;
    font-weight: 600;
}

.compare-lock-usps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px 24px 18px;
    border-left: 1px solid #e2e8f0;
    background: linear-gradient(165deg, #f8fafc 0%, #eef6ff 100%);
}

.compare-lock-usps h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
}

.compare-lock-usps ul,
.compare-lock-usps-list,
.auth-register-cta-usps,
.auth-usps-list,
.why-register-usp-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compare-lock-usps li,
.compare-lock-usps-list li,
.auth-register-cta-usps li,
.auth-usps-list li,
.why-register-usp-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.compare-lock-usps-list li,
.auth-register-cta-usps li {
    align-items: center;
}

.compare-lock-usp-icon,
.auth-usp-card-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}

.compare-lock-usp-icon svg,
.auth-usp-card-icon svg {
    width: 18px;
    height: 18px;
}

.compare-lock-usp-copy,
.auth-usp-card-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.compare-lock-usp-copy strong,
.auth-usp-card-copy strong {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.3;
}

.compare-lock-usp-copy span,
.auth-usp-card-copy span {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .compare-lock-layout {
        grid-template-columns: 1fr;
    }

    .compare-lock-main {
        padding: 22px 20px 18px;
        gap: 16px;
    }

    .compare-lock-usps {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding: 18px 16px 20px;
    }

    .compare-lock-close {
        top: 10px;
        right: 10px;
    }
}

/* Auth / error pages on landing shell */
.landing-auth {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 36px 0 56px;
}

.landing-auth .auth-layout {
    margin: 0;
    padding: 0;
    max-width: none;
}

.landing-auth .auth-panel,
.landing-auth .error-panel {
    margin: 0 auto;
}

.landing-auth .auth-layout .auth-panel {
    margin: 0;
    width: 100%;
}

.landing-auth .account-page {
    margin-inline: auto;
}

.landing-auth .auth-usps {
    background: linear-gradient(165deg, #ffffff 0%, #eef6ff 100%);
    border-color: var(--landing-line);
}

@media (max-width: 820px) {
    .landing-auth {
        width: min(1120px, calc(100% - 28px));
        padding: 28px 0 44px;
    }
}

/* Help / privacy / terms pages */
.landing-legal {
    width: min(760px, calc(100% - 40px));
    margin: 0 auto;
    padding: 36px 0 64px;
}

.legal-doc {
    color: var(--landing-ink, var(--ink));
}

.legal-doc-header {
    margin-bottom: 28px;
}

.legal-doc-header .eyebrow {
    margin: 0 0 8px;
    color: var(--landing-muted, var(--muted));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-doc-header h1 {
    margin: 0 0 10px;
    font-family: var(--landing-font, var(--landing-display, inherit));
    font-size: clamp(1.85rem, 3.4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.legal-doc-updated {
    margin: 0 0 16px;
    color: var(--landing-muted, var(--muted));
    font-size: 0.88rem;
}

.legal-doc-intro {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
}

.credits-doc .legal-doc-intro a {
    color: var(--landing-blue, var(--green-dark));
}

/* Copy-area links are always underlined; buttons and card links opt out via their own classes. */
.landing-legal .legal-doc a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.landing-legal .legal-doc a:not([class]):hover {
    text-decoration-thickness: 2px;
}

.credits-notice {
    padding: 10px 14px;
    border-left: 3px solid var(--landing-line, #cbd5e1);
    color: var(--landing-muted, var(--muted));
    font-size: 0.92rem;
}

.legal-doc-toc {
    margin: 0 0 32px;
    padding: 18px 20px;
    border: 1px solid var(--landing-line, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--landing-blue, #1678fd) 5%, #fff);
}

.legal-doc-toc h2 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-doc-toc ol {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 6px;
}

.legal-doc-toc a {
    color: var(--landing-blue, #1678fd);
    font-weight: 600;
    text-decoration: none;
}

.legal-doc-toc a:hover {
    text-decoration: underline;
}

.legal-doc-section {
    margin: 0 0 28px;
    scroll-margin-top: 88px;
}

.legal-doc-section h2 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.legal-doc-section p,
.legal-doc-subsection p {
    margin: 0 0 12px;
    line-height: 1.6;
    color: var(--landing-ink, var(--ink));
}

.legal-doc-section ul,
.legal-doc-subsection ul {
    margin: 0 0 14px;
    padding-left: 1.25rem;
    display: grid;
    gap: 8px;
    line-height: 1.55;
}

.legal-doc-subsection {
    margin-top: 16px;
}

.legal-doc-subsection h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
}

.legal-doc-related {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--landing-line, var(--line));
}

.legal-doc-related h2 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-doc-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.legal-doc-related a {
    color: var(--landing-blue, #1678fd);
    font-weight: 650;
    text-decoration: none;
}

.legal-doc-related a:hover {
    text-decoration: underline;
}

@media (max-width: 820px) {
    .landing-legal {
        width: min(760px, calc(100% - 28px));
        padding: 28px 0 48px;
    }

    .legal-doc-toc {
        padding: 16px;
    }
}

/* Explorer: new keyword modal entry modes */
.compare-modal-card--new-search {
    width: min(560px, 100%);
}

.compare-new-search-modes {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 10px;
}

.compare-new-search-modes legend {
    padding: 0;
    margin: 0 0 2px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.compare-new-search-mode-list {
    display: grid;
    gap: 8px;
}

.compare-new-search-mode {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #0f172a;
}

.compare-new-search-mode:hover {
    border-color: #cbd5e1;
}

.compare-new-search-mode.is-selected,
.compare-new-search-mode:has(input:checked) {
    border-color: #1678fd;
    background: #f0f7ff;
    box-shadow: inset 0 0 0 1px #1678fd;
}

.compare-new-search-mode.is-guest-locked {
    opacity: 0.72;
}

.compare-new-search-mode input {
    margin: 3px 0 0;
    flex: 0 0 auto;
}

.compare-new-search-mode-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.compare-new-search-mode-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}

.compare-new-search-mode-title {
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.25;
}

.compare-new-search-mode-help {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: #64748b;
}

.compare-new-search-fields {
    display: grid;
    gap: 12px;
}

.compare-new-search-fields[hidden],
.compare-new-search-fields .compare-modal-field[hidden] {
    display: none !important;
}

.compare-modal-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #64748b;
    font-weight: 500;
}

.compare-new-search-fields textarea {
    width: 100%;
    resize: vertical;
    min-height: 96px;
}

/* settings modal — market select */
.compare-settings-field {
    display: grid;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #f8fafc;
}

.compare-settings-field select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 0.84rem;
}

.compare-settings-field select:focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* dark mode */
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f8fafc;
    --muted: #cbd5e1;
    --paper: #0b1220;
    --card: #1e293b;
    --line: #475569;
    --lime: #1e3a5f;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .compare-body {
    background: #0b1220;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-main,
html[data-theme="dark"] .compare-board-wrap,
html[data-theme="dark"] .app-page {
    background: #0b1220;
}

html[data-theme="dark"] .compare-topbar,
html[data-theme="dark"] .compare-heading,
html[data-theme="dark"] .compare-search,
html[data-theme="dark"] .compare-column,
html[data-theme="dark"] .compare-modal-card,
html[data-theme="dark"] .compare-phrase-filter-panel,
html[data-theme="dark"] .compare-phrase-menu,
html[data-theme="dark"] .header-menu-panel {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-search {
    box-shadow: none;
}

html[data-theme="dark"] .compare-heading h1,
html[data-theme="dark"] .compare-toolbar-page-title,
html[data-theme="dark"] .compare-search input,
html[data-theme="dark"] .compare-row-phrase,
html[data-theme="dark"] .compare-column-head h2,
html[data-theme="dark"] .compare-modal-card header h2,
html[data-theme="dark"] .compare-settings-option-copy strong,
html[data-theme="dark"] .compare-topbar-btn,
html[data-theme="dark"] .compare-icon-btn {
    color: #f8fafc;
}

html[data-theme="dark"] .compare-heading p,
html[data-theme="dark"] .compare-column-head p,
html[data-theme="dark"] .compare-column-foot p,
html[data-theme="dark"] .compare-modal-card header p,
html[data-theme="dark"] .compare-settings-option-copy span,
html[data-theme="dark"] .compare-row-rank,
html[data-theme="dark"] .compare-search-icon,
html[data-theme="dark"] .compare-search-clear,
html[data-theme="dark"] .compare-empty p,
html[data-theme="dark"] .tree-empty {
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-settings-option-copy .compare-settings-experimental {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

html[data-theme="dark"] .compare-column-head .compare-column-origin {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-column-index {
    border-color: #475569;
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-column-head,
html[data-theme="dark"] .compare-column-foot,
html[data-theme="dark"] .compare-topbar,
html[data-theme="dark"] .compare-heading {
    border-color: #475569;
}

html[data-theme="dark"] .compare-heading {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .compare-column {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .compare-row:hover {
    background: rgba(51, 65, 85, 0.55);
}

html[data-theme="dark"] .compare-row.is-drag-over {
    box-shadow: inset 0 2px 0 0 #94a3b8;
}

html[data-theme="dark"] .compare-row.is-marked {
    background: rgba(22, 101, 52, 0.35);
}

html[data-theme="dark"] .compare-row.is-marked:hover {
    background: rgba(22, 101, 52, 0.48);
}

html[data-theme="dark"] .compare-row.is-downvoted:not(.is-marked) {
    background: rgba(127, 29, 29, 0.38);
    box-shadow: none;
}

html[data-theme="dark"] .compare-badge.is-same {
    background: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-badge.is-new {
    background: #14532d;
    color: #bbf7d0;
}

html[data-theme="dark"] .compare-badge.is-removed {
    background: #334155;
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-column-tags span {
    background: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-column-order-btn {
    background: #0f172a;
    border-color: #64748b;
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-column-order-btn:hover {
    background: #1e293b;
    border-color: #94a3b8;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-column-order-btn.is-active {
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-order-switch-row {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .compare-switch-track {
    background: #475569;
}

html[data-theme="dark"] .compare-switch input:checked + .compare-switch-track {
    background: #2563eb;
}

html[data-theme="dark"] .admin-ref-test-tier {
    background: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .admin-ref-test-tier[data-tier='anchored'] {
    background: #14532d;
    color: #bbf7d0;
}

html[data-theme="dark"] .admin-ref-test-tier[data-tier='corroborated'] {
    background: #1e3a5f;
    color: #bfdbfe;
}

html[data-theme="dark"] .admin-ref-test-tier[data-tier='anchored_permutation'] {
    background: #166534;
    color: #dcfce7;
}

html[data-theme="dark"] .compare-row-badges .admin-ref-test-tier[data-tier='peripheral'] {
    background: #3f3f46;
    color: #f4f4f5;
}

html[data-theme="dark"] .compare-downvote {
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-downvote:hover:not(:disabled):not(.is-active) {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

html[data-theme="dark"] .compare-marker {
    color: #93c5fd;
}

html[data-theme="dark"] .compare-marker:hover:not(:disabled):not(.is-active) {
    background: rgba(37, 99, 235, 0.22);
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-mode-toggle.is-open,
html[data-theme="dark"] .compare-view-nav {
    background: #0f172a;
    border-color: #64748b;
    box-shadow: none;
}

html[data-theme="dark"] .compare-mode-toggle button {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-mode-toggle button:hover:not(:disabled):not(.is-active) {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-mode-toggle button.is-active {
    background: #2563eb;
    color: #fff;
}

html[data-theme="dark"] .compare-baseline select {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-baseline select:disabled {
    background: #1e293b;
    color: #94a3b8;
}

html[data-theme="dark"] .compare-icon-btn,
html[data-theme="dark"] .compare-profile-menu .header-menu-toggle,
html[data-theme="dark"] .compare-admin-link,
html[data-theme="dark"] .compare-tweak-btn,
html[data-theme="dark"] .compare-column-hide-btn,
html[data-theme="dark"] .compare-column-delete-btn,
html[data-theme="dark"] .compare-column-order-btn,
html[data-theme="dark"] .compare-phrase-filter-btn,
html[data-theme="dark"] .compare-filters-btn,
html[data-theme="dark"] .compare-use-settings {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-phrase-filter-btn.is-active,
html[data-theme="dark"] .compare-filters-btn.is-active {
    background: rgba(37, 99, 235, 0.22);
    border-color: #60a5fa;
    color: #bfdbfe;
    box-shadow: none;
}

html[data-theme="dark"] .compare-tweak-btn:hover,
html[data-theme="dark"] .compare-column-hide-btn:hover,
html[data-theme="dark"] .compare-icon-btn:hover,
html[data-theme="dark"] .compare-topbar-btn:hover,
html[data-theme="dark"] .compare-profile-menu:hover .header-menu-toggle,
html[data-theme="dark"] .compare-profile-menu[open] .header-menu-toggle,
html[data-theme="dark"] .compare-profile-menu .header-menu-toggle:hover,
html[data-theme="dark"] .compare-admin-link:hover {
    background: #334155;
    border-color: #93c5fd;
    color: #f8fafc;
    box-shadow: none;
}

html[data-theme="dark"] .compare-tweak-btn[aria-disabled="true"]:hover {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-column-delete-btn:hover {
    background: #7f1d1d;
    border-color: #f87171;
    color: #fecaca;
}

html[data-theme="dark"] .compare-icon-btn.is-active {
    background: #1e3a5f;
    border-color: #60a5fa;
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-view-export.is-active,
html[data-theme="dark"] .compare-view-export:hover:not(:disabled):not(.is-disabled) {
    background: #1e3a5f;
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-view-toggle,
html[data-theme="dark"] .compare-view-export {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-view-export {
    border-left-color: #475569;
}

html[data-theme="dark"] .compare-view-chevron {
    color: #94a3b8;
}

html[data-theme="dark"] .kc-tooltip {
    background: #0f172a;
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}

html[data-theme="dark"] .kc-tooltip-title {
    color: #f8fafc;
}

html[data-theme="dark"] .kc-tooltip-body {
    color: #cbd5e1;
}

html[data-theme="dark"] .kc-tooltip::after {
    background: #0f172a;
    border-right-color: rgba(96, 165, 250, 0.45);
    border-bottom-color: rgba(96, 165, 250, 0.45);
}

html[data-theme="dark"] .compare-view-menu-panel {
    background: #1e293b;
    border-color: #475569;
}

html[data-theme="dark"] .compare-view-menu-item {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-view-menu-item:hover,
html[data-theme="dark"] .compare-view-menu-item.is-active {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-icon-btn:disabled:hover {
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-settings-option,
html[data-theme="dark"] .compare-settings-field {
    background: #0f172a;
    border-color: #475569;
}

html[data-theme="dark"] .compare-settings-field select,
html[data-theme="dark"] .compare-modal-field input,
html[data-theme="dark"] .compare-modal-field textarea,
html[data-theme="dark"] .compare-modal-field select,
html[data-theme="dark"] .compare-phrase-filter-panel input {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-modal-field span,
html[data-theme="dark"] .compare-modal-field-hint,
html[data-theme="dark"] .compare-new-search-mode-help {
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-modal-cancel {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-modal-cancel:hover {
    background: #334155;
    border-color: #94a3b8;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-modal-submit:hover:not(:disabled) {
    background: #3b82f6;
}

html[data-theme="dark"] .compare-use-settings:hover,
html[data-theme="dark"] .compare-add-btn:hover {
    background: #334155;
    border-color: #93c5fd;
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-search-clear:hover {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-search-submit:hover {
    background: #3b82f6;
}

html[data-theme="dark"] .compare-lock-tab:hover:not(.is-active) {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-guest-locked-tuning {
    background: #0f172a;
    border-color: #475569;
}

html[data-theme="dark"] .compare-guest-lock-pill {
    border-color: var(--compare-brand-blue, #1678fd);
    background: var(--compare-brand-blue, #1678fd);
    color: #fff;
}

html[data-theme="dark"] .compare-sidebar-collapse {
    background: #1e293b;
    border-color: #64748b;
    color: #e2e8f0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .compare-sidebar-collapse:hover {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-body .header-menu-panel a,
html[data-theme="dark"] .compare-body .header-menu-panel button {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-profile-menu .header-menu-panel strong,
html[data-theme="dark"] .profile-menu-email {
    color: #94a3b8;
}

html[data-theme="dark"] .profile-menu-greeting {
    color: #f8fafc;
}

html[data-theme="dark"] .profile-menu-hello,
html[data-theme="dark"] .profile-menu-group + .profile-menu-group {
    border-color: #334155;
}

html[data-theme="dark"] .compare-profile-menu .header-menu-panel .profile-menu-logout:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

html[data-theme="dark"] .compare-profile-menu .header-menu-panel a:hover,
html[data-theme="dark"] .compare-profile-menu .header-menu-panel button:hover {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-toast {
    background: #1e293b;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-column-list {
    scrollbar-color: #64748b transparent;
}

html[data-theme="dark"] .compare-column-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.65);
}

html[data-theme="dark"] .compare-loading {
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-empty {
    background: #0f172a;
    border-color: #64748b;
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-empty-intro {
    background:
        radial-gradient(ellipse 70% 55% at 50% 28%, rgba(37, 99, 235, 0.16), transparent 70%),
        #0b1220;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-empty-intro-copy h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .compare-empty-intro-copy p {
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-filters-section h3 {
    color: #f8fafc;
}

html[data-theme="dark"] .compare-row-empty,
html[data-theme="dark"] .compare-row-empty:hover {
    background: #0f172a;
    border-color: #64748b;
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-view-menu[open] .compare-view-toggle {
    background: #1e3a5f;
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-phrase-filter-clear:hover {
    background: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] .map-board-stage,
html[data-theme="dark"] .map-board-stage .board-zoom-world {
    border-color: #475569;
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.08), transparent 42%),
        #0f172a;
}

html[data-theme="dark"] .map-axis-label {
    color: #94a3b8;
}

html[data-theme="dark"] .map-node {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .map-node.is-seed,
html[data-theme="dark"] .map-node.is-kept:not(.is-seed) {
    background: var(--map-kept-bg);
    border-color: var(--map-kept-border);
    color: var(--map-kept-ink);
}

html[data-theme="dark"] .map-node.is-candidate {
    background: #1e293b;
    color: #e7e5e4;
    border-color: #78716c;
}

html[data-theme="dark"] .map-node.is-removed {
    background: rgba(51, 65, 85, 0.55);
    color: #cbd5e1;
    border-color: #64748b;
}

html[data-theme="dark"] .map-node.is-downvoted {
    background: rgba(127, 29, 29, 0.28);
    color: #fecaca;
    border-color: #ef4444;
}

html[data-theme="dark"] .tree-app {
    --tree-new-text: #86efac;
    --tree-card-border: #475569;
}

html[data-theme="dark"] .map-app {
    --map-kept-bg: rgba(22, 101, 52, 0.35);
    --map-kept-ink: #bbf7d0;
    --map-candidate-border: #64748b;
    --map-axis: #475569;
}

html[data-theme="dark"] .tree-node {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    color: #f8fafc;
}

html[data-theme="dark"] .tree-node.is-new {
    border-color: #166534;
}

html[data-theme="dark"] .tree-node.is-downvoted:not(.is-removed) {
    border-color: #ef4444;
    border-left-color: #ef4444;
}

html[data-theme="dark"] .tree-generation-empty {
    background: #0f172a;
    border-color: #64748b;
    color: #cbd5e1;
}

html[data-theme="dark"] .tree-generation-origin {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-new-search-mode {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-new-search-mode:hover {
    border-color: #94a3b8;
}

html[data-theme="dark"] .compare-new-search-mode.is-selected,
html[data-theme="dark"] .compare-new-search-mode:has(input:checked) {
    background: rgba(22, 120, 253, 0.18);
    border-color: #60a5fa;
}

html[data-theme="dark"] .export-summary-grid > div,
html[data-theme="dark"] .export-summary-card,
html[data-theme="dark"] .export-configure,
html[data-theme="dark"] .export-explorations,
html[data-theme="dark"] .export-scope-option,
html[data-theme="dark"] .export-tags-option,
html[data-theme="dark"] .export-explorations-option {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] .export-explorations-bulk-btn {
    color: #60a5fa;
}

html[data-theme="dark"] .export-picker-option:hover .export-picker-card {
    background: #334155;
}

html[data-theme="dark"] .export-picker-option input:checked + .export-picker-card {
    background: rgba(37, 99, 235, 0.22);
}

html[data-theme="dark"] .export-picker-name,
html[data-theme="dark"] .export-summary-grid dd,
html[data-theme="dark"] .export-options-title,
html[data-theme="dark"] .export-explorations-copy strong {
    color: #f8fafc;
}

html[data-theme="dark"] .export-empty p,
html[data-theme="dark"] .export-picker-desc,
html[data-theme="dark"] .export-action-hint,
html[data-theme="dark"] .export-summary-grid dt,
html[data-theme="dark"] .export-options-label,
html[data-theme="dark"] .export-explorations-copy span {
    color: #cbd5e1;
}

html[data-theme="dark"] .landing-body {
    --landing-ink: #f8fafc;
    --landing-muted: #cbd5e1;
    --landing-line: #475569;
    --landing-paper: #0b1220;
    --landing-panel: #1e293b;
    --landing-nav: #020617;
}

html[data-theme="dark"] .landing-atmosphere {
    background: linear-gradient(180deg, #0f172a 0%, var(--landing-paper) 38%, #1e293b 100%);
}

html[data-theme="dark"] .landing-notice {
    background: color-mix(in srgb, var(--landing-blue) 14%, #1e293b);
}

/* Auth password strength meter */
.password-strength {
    display: grid;
    gap: 6px;
    margin: -6px 0 2px;
}

.password-strength[hidden] {
    display: none;
}

.password-strength-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.password-strength-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #ef4444;
    transition: width 160ms ease, background-color 160ms ease;
}

.password-strength[data-level="fair"] .password-strength-bar-fill {
    background: #f59e0b;
}

.password-strength[data-level="good"] .password-strength-bar-fill {
    background: #3b82f6;
}

.password-strength[data-level="strong"] .password-strength-bar-fill {
    background: #16a34a;
}

.password-strength-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.password-strength-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-strength-rules li {
    position: relative;
    padding-left: 12px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.3;
}

.password-strength-rules li::before {
    content: '';
    position: absolute;
    top: 0.4em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cbd5e1;
}

.password-strength-rules li.is-met {
    color: #166534;
}

.password-strength-rules li.is-met::before {
    background: #16a34a;
}

.password-strength-rules li.is-unmet {
    color: #9f2f20;
}

.password-strength-rules li.is-unmet::before {
    background: #ef4444;
}

.password-strength-error {
    margin: 0;
    color: #9f2f20;
    font-size: 0.82rem;
}

.compare-lock-form .password-strength {
    margin: 0;
}

.compare-lock-form .password-strength-bar {
    background: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .password-strength-bar {
    background: #334155;
}

html[data-theme="dark"] .password-strength-label,
html[data-theme="dark"] .password-strength-rules li {
    color: #cbd5e1;
}

html[data-theme="dark"] .password-strength-rules li.is-met {
    color: #86efac;
}

html[data-theme="dark"] .password-strength-rules li.is-unmet,
html[data-theme="dark"] .password-strength-error {
    color: #fca5a5;
}

/* Pricing page */
.landing-pricing {
    width: min(720px, calc(100% - 40px));
    margin: 0 auto;
    padding: 36px 0 64px;
}

.pricing-page {
    color: var(--landing-ink, var(--ink));
}

.pricing-header {
    margin-bottom: 28px;
}

.pricing-header .eyebrow {
    margin: 0 0 8px;
    color: var(--landing-muted, var(--muted));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-header h1 {
    margin: 0 0 12px;
    font-family: var(--landing-font, var(--landing-display, inherit));
    font-size: clamp(1.85rem, 3.4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.pricing-intro {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
}

.pricing-plan {
    margin: 0 0 28px;
    padding: 28px 26px;
    border: 1px solid var(--landing-line, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--landing-blue, #1678fd) 6%, #fff);
}

.pricing-plan-price {
    margin: 0 0 6px;
    font-family: var(--landing-font, var(--landing-display, inherit));
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--landing-blue, #1678fd);
}

.pricing-plan-note {
    margin: 0 0 22px;
    color: var(--landing-muted, var(--muted));
    font-size: 0.95rem;
}

.pricing-includes-title {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-includes {
    margin: 0 0 8px;
    padding-left: 1.2rem;
    display: grid;
    gap: 8px;
    line-height: 1.5;
}

.pricing-future {
    padding-top: 8px;
}

.pricing-future h2 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.pricing-future p {
    margin: 0 0 12px;
    line-height: 1.6;
}

.pricing-future a {
    color: var(--landing-blue, #1678fd);
    font-weight: 650;
    text-decoration: none;
}

.pricing-future a:hover {
    text-decoration: underline;
}

@media (max-width: 820px) {
    .landing-pricing {
        width: min(720px, calc(100% - 28px));
        padding: 28px 0 48px;
    }

    .pricing-plan {
        padding: 22px 18px;
    }
}

/* Why register page */
.landing-why-register {
    width: min(920px, calc(100% - 40px));
    margin: 0 auto;
    padding: 36px 0 64px;
}

.why-register-page {
    color: var(--landing-ink, var(--ink));
}

.why-register-header {
    margin-bottom: 32px;
}

.why-register-header .eyebrow {
    margin: 0 0 8px;
    color: var(--landing-muted, var(--muted));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.why-register-header h1 {
    margin: 0 0 12px;
    font-size: clamp(1.85rem, 3.4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.why-register-intro {
    margin: 0;
    max-width: 58ch;
    font-size: 1.08rem;
    line-height: 1.55;
}

.why-register-usps {
    margin: 0 0 32px;
}

.why-register-usp-list {
    gap: 16px;
}

.why-register-usp-list li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 22px 24px;
    background: #fff;
    border-color: var(--landing-line, var(--line));
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.why-register-usp-list .auth-usp-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.why-register-usp-list .auth-usp-card-icon svg {
    width: 24px;
    height: 24px;
}

.why-register-usp-list .auth-usp-card-copy {
    gap: 8px;
}

.why-register-usp-list .auth-usp-card-copy strong {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
}

.why-register-usp-list .auth-usp-card-copy span {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--landing-muted, var(--muted));
}

.why-register-cta {
    margin: 0;
}

@media (max-width: 820px) {
    .landing-why-register {
        width: min(920px, calc(100% - 28px));
        padding: 28px 0 48px;
    }

    .why-register-usp-list li {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
        padding: 18px 16px 20px;
    }

    .why-register-usp-list .auth-usp-card-icon {
        width: 42px;
        height: 42px;
    }

    .why-register-usp-list .auth-usp-card-copy strong {
        font-size: 1.05rem;
    }

    .why-register-usp-list .auth-usp-card-copy span {
        font-size: 0.94rem;
    }
}

/* Global feedback widget */
.feedback-modal .compare-modal-field[hidden] {
    display: none;
}

.feedback-pick-field[hidden] {
    display: none;
}

.feedback-pick-field {
    display: grid;
    gap: 6px;
}

.feedback-pick-btn {
    justify-self: start;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #bfdbfe;
    border-radius: var(--compare-radius-sm);
    background: #eff6ff;
    color: #1d4ed8;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.feedback-pick-btn:hover {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1e40af;
}

.feedback-pick-summary {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #f8fafc;
    color: #475569;
    font-size: 0.74rem;
    line-height: 1.4;
    display: grid;
    gap: 6px;
}

.feedback-pick-summary[hidden] {
    display: none;
}

.feedback-pick-summary-row strong {
    color: #0f172a;
    font-weight: 700;
}

.feedback-pick-error {
    margin: 0;
    color: #b91c1c;
    font-size: 0.74rem;
    line-height: 1.4;
}

.feedback-pick-error[hidden] {
    display: none;
}

.feedback-pick-modal {
    z-index: 135;
}

.feedback-pick-card {
    width: min(560px, 100%);
}

.feedback-pick-project-field[hidden] {
    display: none;
}

.feedback-pick-body {
    max-height: min(52vh, 420px);
    overflow: auto;
    padding: 2px 2px 4px;
}

.feedback-pick-status {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.feedback-pick-status.is-error {
    color: #b91c1c;
}

.feedback-pick-tree {
    display: grid;
    gap: 8px;
}

.feedback-pick-column {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: #f8fafc;
}

.feedback-pick-column > h4 {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.feedback-pick-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.feedback-pick-keyword {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin: 0;
    padding: 3px 7px 3px 5px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    color: #334155;
    font-size: 0.72rem;
    line-height: 1.25;
    cursor: pointer;
}

.feedback-pick-keyword:has(input:checked) {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1e3a8a;
}

.feedback-pick-keyword input {
    margin: 0;
    flex: 0 0 auto;
}

.feedback-pick-keyword span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="dark"] .feedback-pick-btn {
    border-color: #1e40af;
    background: #1e3a8a;
    color: #dbeafe;
}

html[data-theme="dark"] .feedback-pick-btn:hover {
    border-color: #3b82f6;
    background: #1d4ed8;
    color: #fff;
}

html[data-theme="dark"] .feedback-pick-summary,
html[data-theme="dark"] .feedback-pick-status {
    color: #94a3b8;
}

html[data-theme="dark"] .feedback-pick-summary {
    border-color: #475569;
    background: #0f172a;
}

html[data-theme="dark"] .feedback-pick-summary-row strong {
    color: #f8fafc;
}

html[data-theme="dark"] .feedback-pick-error {
    color: #fca5a5;
}

html[data-theme="dark"] .feedback-pick-column {
    border-color: #475569;
    background: #0f172a;
}

html[data-theme="dark"] .feedback-pick-column > h4 {
    color: #94a3b8;
}

html[data-theme="dark"] .feedback-pick-keyword {
    border-color: #475569;
    background: #1e293b;
    color: #e2e8f0;
}

html[data-theme="dark"] .feedback-pick-keyword:has(input:checked) {
    border-color: #3b82f6;
    background: #1e3a8a;
    color: #dbeafe;
}

.feedback-trigger {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 70;
    transform: translateY(-50%);
    margin: 0;
    padding: 18px 12px;
    border: 1px solid #1d4ed8;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #2563eb;
    color: #fff;
    box-shadow: -4px 6px 18px rgba(37, 99, 235, 0.28);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
}

.feedback-trigger-label {
    display: inline-block;
    transform: rotate(180deg);
}

.feedback-trigger:hover {
    background: #1d4ed8;
    border-color: #1e40af;
    color: #fff;
}

.feedback-toast {
    z-index: 140;
}

.feedback-toast.is-error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

html[data-theme="dark"] .feedback-toast.is-error {
    border-color: #7f1d1d;
    background: #450a0a;
    color: #fecaca;
}

html[data-theme="dark"] .feedback-trigger {
    background: #2563eb;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .feedback-trigger:hover {
    background: #3b82f6;
    border-color: #60a5fa;
    color: #fff;
}

@media (max-width: 720px) {
    .feedback-trigger {
        padding: 14px 10px;
        font-size: 0.72rem;
    }
}

/* Tree / Map: feedback-needed empty state */
.tree-board:has(.tree-feedback-empty) {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: min(68vh, 640px);
}

.tree-feedback-empty {
    width: min(100%, 560px);
    min-width: 0;
}

.map-feedback-empty {
    position: absolute;
    inset: 0;
    width: auto;
    min-height: 0;
    z-index: 3;
}

html[data-theme="dark"] .tree-feedback-empty,
html[data-theme="dark"] .map-feedback-empty {
    background:
        radial-gradient(ellipse 70% 55% at 50% 28%, rgba(37, 99, 235, 0.16), transparent 70%),
        #0b1220;
    color: #e2e8f0;
}

html[data-theme="dark"] .tree-feedback-empty .compare-empty-intro-copy h2,
html[data-theme="dark"] .map-feedback-empty .compare-empty-intro-copy h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .tree-feedback-empty .compare-empty-intro-copy p,
html[data-theme="dark"] .map-feedback-empty .compare-empty-intro-copy p {
    color: #cbd5e1;
}

/* explorer — guest result-cap notice under a full guest column */
.compare-guest-cap {
    display: block;
    margin: 8px 10px 12px;
    padding: 10px 12px;
    border: 1px dashed #94a3b8;
    border-radius: var(--radius-sm, 8px);
    background: #f8fafc;
    color: #475569;
    list-style: none;
}

.compare-guest-cap p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
}

.compare-guest-cap-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.compare-guest-cap-btn {
    appearance: none;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    padding: 6px 10px;
    cursor: pointer;
}

.compare-guest-cap-btn:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

html[data-theme="dark"] .compare-guest-cap {
    border-color: #64748b;
    background: #0f172a;
    color: #cbd5e1;
}

html[data-theme="dark"] .compare-guest-cap-btn {
    border-color: #64748b;
    background: #1e293b;
    color: #f8fafc;
}

html[data-theme="dark"] .compare-guest-cap-btn:hover {
    border-color: #94a3b8;
    background: #334155;
}

/* Admin / app shell (layouts.app) */
.compare-sidebar--app {
    gap: 18px;
    padding: 18px 18px 20px;
}

.compare-sidebar--app .compare-brand {
    padding: 4px 2px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.compare-sidebar--app .compare-brand-full {
    width: 196px;
}

.compare-sidebar--app .compare-sidebar-section h2 {
    margin: 0 0 8px;
    padding: 0 6px;
    color: #94a3b8;
    letter-spacing: 0.1em;
}

.compare-sidebar--app .compare-sidebar-list > li,
.compare-sidebar--app .compare-sidebar-section:first-of-type .compare-sidebar-list > li {
    min-height: 0;
}

.compare-sidebar--app .compare-sidebar-item {
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: var(--compare-radius-sm);
}

.compare-sidebar--app .compare-sidebar-item-icon {
    margin-top: 0;
    width: 20px;
    height: 20px;
    color: #94a3b8;
    flex-basis: 20px;
}

.compare-sidebar--app .compare-sidebar-item-icon svg {
    width: 18px;
    height: 18px;
}

.compare-sidebar--app .compare-sidebar-list > li.is-active .compare-sidebar-item-icon {
    color: #60a5fa;
}

.compare-sidebar--app .compare-sidebar-item-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.compare-sidebar--app .compare-sidebar-section + .compare-sidebar-section {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.compare-app.is-sidebar-collapsed .compare-sidebar--app {
    gap: 12px;
    padding: 16px 10px 14px;
}

.compare-app.is-sidebar-collapsed .compare-sidebar--app .compare-brand {
    padding: 0;
    border-bottom: 0;
}

.compare-app.is-sidebar-collapsed .compare-sidebar--app .compare-sidebar-section + .compare-sidebar-section {
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.compare-app.is-sidebar-collapsed .compare-sidebar--app .compare-sidebar-list > li {
    min-height: 40px;
}

.compare-app--app .compare-topbar--actions {
    min-height: 64px;
    padding: 10px 24px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.compare-app--app .app-page {
    width: min(1120px, 100%);
    padding: 28px 28px 40px;
}

.compare-app--app .app-page > section:first-child {
    margin-bottom: 0;
}

.compare-app--app .app-page > section + section {
    margin-top: 40px;
}

.compare-app--app .app-page > section:first-child .eyebrow {
    margin-bottom: 8px;
}

.compare-app--app .app-page > section:first-child h1 {
    margin-bottom: 10px;
}

.compare-app--app .app-page > section:first-child > p {
    margin: 0;
    color: var(--muted);
}

.compare-app--app .site-footer--app,
.compare-main > .site-footer--app {
    flex-shrink: 0;
    background: #fff;
}

.compare-main > .compare-workspace {
    min-height: 100dvh;
}

html[data-theme="dark"] .compare-app--app .site-footer--app,
html[data-theme="dark"] .compare-main > .site-footer--app {
    background: #0b1220;
    border-top-color: #334155;
}

@media (min-width: 981px) {
    .compare-body--app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .compare-app--app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        align-items: start;
    }

    .compare-app--app .compare-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .compare-app--app .compare-main {
        overflow: visible;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

@media (max-width: 600px) {
    .compare-app--app .app-page {
        padding: 18px 16px 32px;
    }
}

/* Admin: Tables */
.app-page .table-wrap {
    max-height: min(70vh, 680px);
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.app-page .table-wrap table {
    font-size: 0.78rem;
    line-height: 1.35;
}

.app-page .table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid #dbe3ee;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-page .table-wrap tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    vertical-align: top;
}

.app-page .table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.app-page .table-wrap tbody tr:hover td {
    background: #f8fafc;
}

.app-page .table-wrap th:last-child,
.app-page .table-wrap td:last-child {
    text-align: left;
}

.app-page .table-wrap td strong {
    font-size: 0.8rem;
    font-weight: 650;
}

.app-page .table-wrap [class$="-meta"] {
    margin-top: 1px;
}

html[data-theme="dark"] .app-page .table-wrap {
    border-color: #334155;
    background: #0f172a;
}

html[data-theme="dark"] .app-page .table-wrap thead th {
    border-bottom-color: #334155;
    background: #1e293b;
    color: #94a3b8;
}

html[data-theme="dark"] .app-page .table-wrap tbody td {
    border-bottom-color: #1e293b;
    color: #e2e8f0;
}

html[data-theme="dark"] .app-page .table-wrap tbody tr:hover td {
    background: #1e293b;
}

/* Admin: Dashboard */
.admin-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 8px;
}

.admin-dashboard-summary > div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-dashboard-summary span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-dashboard-summary strong {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
}

.admin-dashboard-summary em {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.35;
}

.admin-dashboard-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-dashboard-chart {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-dashboard-chart header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.admin-dashboard-chart h3 {
    margin: 0;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
}

.admin-dashboard-chart header span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

.admin-dashboard-chart-bars {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 140px;
}

.admin-dashboard-chart-bar {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    min-width: 0;
    height: 100%;
    gap: 6px;
}

.admin-dashboard-chart-bar > span {
    display: block;
    align-self: end;
    width: 100%;
    min-height: 2px;
    height: var(--bar-height, 0%);
    border-radius: 4px 4px 2px 2px;
    background: #2563eb;
}

.admin-dashboard-chart-bar em {
    color: #94a3b8;
    font-size: 0.58rem;
    font-style: normal;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.admin-dashboard-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-dashboard-tools a {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.admin-dashboard-tools a:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-dashboard-tools strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.admin-dashboard-tools span {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.4;
}

html[data-theme="dark"] .admin-dashboard-summary > div,
html[data-theme="dark"] .admin-dashboard-chart,
html[data-theme="dark"] .admin-dashboard-tools a {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .admin-dashboard-summary strong,
html[data-theme="dark"] .admin-dashboard-chart h3,
html[data-theme="dark"] .admin-dashboard-tools strong {
    color: #f8fafc;
}

html[data-theme="dark"] .admin-dashboard-summary span,
html[data-theme="dark"] .admin-dashboard-summary em,
html[data-theme="dark"] .admin-dashboard-chart header span,
html[data-theme="dark"] .admin-dashboard-chart-bar em,
html[data-theme="dark"] .admin-dashboard-tools span {
    color: #94a3b8;
}

html[data-theme="dark"] .admin-dashboard-chart-bar > span {
    background: #60a5fa;
}

html[data-theme="dark"] .admin-dashboard-tools a:hover {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

@media (max-width: 1100px) {
    .admin-dashboard-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-charts,
    .admin-dashboard-tools {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .admin-dashboard-summary {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-chart-bar em {
        font-size: 0;
    }

    .admin-dashboard-chart-bar:nth-child(odd) em {
        font-size: 0.55rem;
    }
}

/* Help topic index and topic pages */
.help-search {
    margin: 0 0 28px;
}

.help-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--landing-line, var(--line));
    border-radius: 12px;
    background: #fff;
    color: var(--landing-ink, var(--ink));
    font: inherit;
    font-size: 1rem;
}

.help-search input[type="search"]:focus {
    outline: 2px solid color-mix(in srgb, var(--landing-blue, #1678fd) 55%, transparent);
    outline-offset: 1px;
    border-color: var(--landing-blue, #1678fd);
}

.help-search-empty {
    margin: 12px 0 0;
    color: var(--landing-muted, var(--muted));
    font-size: 0.95rem;
}

.help-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 8px;
}

.help-topic-card {
    display: grid;
    gap: 8px;
    padding: 18px 18px 16px;
    border: 1px solid var(--landing-line, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--landing-blue, #1678fd) 4%, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-topic-card.is-search-hidden,
.help-topic-card[hidden] {
    display: none !important;
}

.help-topic-card:hover {
    border-color: var(--landing-blue, #1678fd);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-blue, #1678fd) 16%, transparent);
}

.help-topic-card h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.help-topic-card p {
    margin: 0;
    color: var(--landing-muted, var(--muted));
    font-size: 0.92rem;
    line-height: 1.45;
}

.help-topic-card span {
    margin-top: 4px;
    color: var(--landing-blue, #1678fd);
    font-size: 0.86rem;
    font-weight: 650;
}

.help-topic-crumb {
    margin: 0 0 18px;
}

.help-topic-crumb a {
    color: var(--landing-blue, #1678fd);
    font-size: 0.92rem;
    font-weight: 650;
    text-decoration: none;
}

.help-topic-crumb a:hover {
    text-decoration: underline;
}

.help-topic-body h2 {
    margin: 0 0 10px;
    font-size: 1.08rem;
    font-weight: 750;
}

.legal-doc-section ul.help-topic-links,
.help-topic-links {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.help-topic-links a {
    color: var(--landing-blue, #1678fd);
    font-weight: 650;
    text-decoration: none;
}

.help-topic-links a:hover {
    text-decoration: underline;
}

.help-feedback-open {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--landing-blue, #1678fd);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.help-feedback-open:hover {
    filter: brightness(1.05);
}

.help-topic-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 28px 0 8px;
}

.help-topic-pager a {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--landing-line, var(--line));
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.help-topic-pager a:hover {
    border-color: var(--landing-blue, #1678fd);
}

.help-topic-pager span {
    display: block;
    color: var(--landing-blue, #1678fd);
    font-weight: 650;
    line-height: 1.35;
}

.help-topic-pager-prev span::before {
    content: "← ";
}

.help-topic-pager-next {
    text-align: right;
}

.help-topic-pager-next span::after {
    content: " →";
}

html[data-theme="dark"] .help-search input[type="search"],
html[data-theme="dark"] .help-topic-card,
html[data-theme="dark"] .help-topic-pager a {
    background: #111827;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .help-topic-card p,
html[data-theme="dark"] .help-search-empty {
    color: #94a3b8;
}

html[data-theme="dark"] .help-topic-card:hover,
html[data-theme="dark"] .help-topic-pager a:hover {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

@media (max-width: 720px) {
    .help-topic-grid,
    .help-topic-pager {
        grid-template-columns: 1fr;
    }

    .help-topic-pager-next {
        text-align: left;
    }
}

/* Form honeypots (login / feedback) */
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Admin: Abuse blocks */
.admin-abuse-blocks-empty {
    margin: 0;
    color: #64748b;
}

.admin-abuse-blocks-table td form {
    margin: 0;
}

.admin-abuse-blocks-clear {
    margin: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.admin-abuse-blocks-clear:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

html[data-theme="dark"] .admin-abuse-blocks-empty {
    color: #94a3b8;
}

html[data-theme="dark"] .admin-abuse-blocks-clear {
    border-color: #334155;
    background: #111827;
    color: #e2e8f0;
}

html[data-theme="dark"] .admin-abuse-blocks-clear:hover {
    border-color: #64748b;
    background: #1e293b;
}



/* Review page */
.review-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
}

.review-heading {
    align-items: flex-start;
    gap: 16px;
}

.review-heading-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex: none;
}

.review-started {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.review-started strong {
    color: #0f172a;
    font-weight: 700;
}

.review-stats {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.review-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.review-stat strong {
    font-size: 1.55rem;
    font-weight: 750;
    line-height: 1;
}

.review-stat span {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 550;
}

.review-stat--kept strong {
    color: #16a34a;
}

.review-stat--rejected strong {
    color: #dc2626;
}

.review-stat--groups strong {
    color: #0f172a;
}

.review-empty {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.review-empty p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.review-empty-link {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: var(--compare-radius-sm);
    background: #2563eb;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: start;
}

.review-panel {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.review-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 0;
    border-bottom: 1px solid #eef2f7;
}

.review-tabs {
    display: flex;
    gap: 18px;
}

.review-tab {
    margin: 0;
    padding: 10px 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
}

.review-tab.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.review-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.review-filter input {
    width: min(220px, 36vw);
    padding: 8px 10px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 0.84rem;
}

.review-filter input:focus {
    outline: 2px solid rgba(37, 99, 235, 0.25);
    border-color: #93c5fd;
}

.review-similar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.review-similar-link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-table-wrap {
    overflow-x: auto;
}

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

.review-table th,
.review-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    vertical-align: middle;
}

.review-table th {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
}

.review-row.is-expanded {
    background: #eff6ff;
}

.review-row.is-highlight {
    background: #fef9c3;
}

.review-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 650;
    white-space: nowrap;
}

.review-status svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-status--kept {
    color: #16a34a;
}

.review-status--rejected {
    color: #dc2626;
}

.review-phrase {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
}

.review-contribution {
    color: #475569;
    font-size: 0.88rem;
}

.review-row-actions {
    width: 1%;
    white-space: nowrap;
}

.review-expand,
.review-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 0 6px;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.review-expand {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #64748b;
}

.review-expand svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 120ms ease;
}

.review-expand.is-open svg {
    transform: rotate(180deg);
}

.review-expand:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.review-action-btn {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 650;
}

.review-action-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-action-btn--reject {
    color: #dc2626;
}

.review-action-btn--restore {
    color: #16a34a;
}

.review-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.review-detail-row td {
    padding: 0 14px 14px;
    background: #eff6ff;
    border-bottom: 1px solid #dbeafe;
}

.review-detail {
    display: grid;
    gap: 12px;
    padding: 4px 0 2px;
}

.review-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.review-detail-label {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 650;
}

.review-detail strong,
.review-detail p {
    margin: 0;
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.4;
}

.review-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.review-detail-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.review-detail-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.review-filter-empty {
    margin: 0;
    padding: 18px 14px;
    color: #64748b;
    font-size: 0.88rem;
}

.review-side-col {
    display: grid;
    gap: 14px;
}

.review-side-card {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.review-side-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 750;
}

.review-side-help {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.4;
}

.review-prefs-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.review-prefs-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
}

.review-pref-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.review-pref-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-pref-icon.is-prefer {
    color: #16a34a;
}

.review-pref-icon.is-avoid {
    color: #dc2626;
}

.review-pref-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: not-allowed;
}

.review-pref-edit svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-prefs-scope {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 8px;
}

.review-prefs-scope legend {
    margin-bottom: 6px;
    color: #64748b;
    font-size: 0.8rem;
}

.review-prefs-scope label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.86rem;
}

.review-prefs-save {
    width: 100%;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid #93c5fd;
    border-radius: 10px;
    background: #fff;
    color: #2563eb;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    cursor: not-allowed;
    opacity: 0.7;
}

.review-similar-card {
    background: #fffbeb;
    border-color: #fde68a;
}

.review-similar-card.is-pulse {
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35);
}

.review-similar-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-similar-head svg {
    width: 18px;
    height: 18px;
    color: #d97706;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-similar-pair + .review-similar-pair {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #fde68a;
}

.review-similar-pair p {
    margin: 10px 0 0;
    color: #0f172a;
    font-size: 0.88rem;
    line-height: 1.4;
}

.review-similar-phrase {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.review-similar-phrase:hover {
    color: #2563eb;
}

.review-similar-note {
    color: #78716c !important;
    font-size: 0.82rem !important;
}

.review-similar-compare {
    margin-top: 10px;
    padding: 7px 10px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #fff;
    color: #2563eb;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.review-similar-empty {
    margin: 10px 0 0;
    color: #78716c;
    font-size: 0.84rem;
}

@media (max-width: 1100px) {
    .review-layout {
        grid-template-columns: 1fr;
    }

    .review-heading-aside {
        width: 100%;
        align-items: stretch;
    }

    .review-stats {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .review-panel-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .review-toolbar-right {
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .review-filter input {
        width: 100%;
    }

    .review-detail-grid {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .review-started,
html[data-theme="dark"] .review-stat span,
html[data-theme="dark"] .review-empty p,
html[data-theme="dark"] .review-tab,
html[data-theme="dark"] .review-contribution,
html[data-theme="dark"] .review-detail-label,
html[data-theme="dark"] .review-side-help,
html[data-theme="dark"] .review-filter-empty,
html[data-theme="dark"] .review-prefs-scope legend {
    color: #94a3b8;
}

html[data-theme="dark"] .review-started strong,
html[data-theme="dark"] .review-stat--groups strong,
html[data-theme="dark"] .review-phrase,
html[data-theme="dark"] .review-detail strong,
html[data-theme="dark"] .review-detail p,
html[data-theme="dark"] .review-side-card h2,
html[data-theme="dark"] .review-prefs-list li,
html[data-theme="dark"] .review-similar-phrase {
    color: #f8fafc;
}

html[data-theme="dark"] .review-panel,
html[data-theme="dark"] .review-side-card,
html[data-theme="dark"] .review-prefs-save,
html[data-theme="dark"] .review-similar-compare,
html[data-theme="dark"] .review-filter input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .review-panel-toolbar,
html[data-theme="dark"] .review-table th,
html[data-theme="dark"] .review-table td {
    border-color: #1e293b;
}

html[data-theme="dark"] .review-row.is-expanded,
html[data-theme="dark"] .review-detail-row td {
    background: rgba(37, 99, 235, 0.16);
}

html[data-theme="dark"] .review-similar-card {
    background: rgba(120, 53, 15, 0.28);
    border-color: #92400e;
}

html[data-theme="dark"] .compare-view-review.is-active,
html[data-theme="dark"] .compare-view-review:hover:not(:disabled):not(.is-disabled) {
    background: rgba(37, 99, 235, 0.22);
    color: #bfdbfe;
}

html[data-theme="dark"] .compare-view-review {
    color: #cbd5e1;
    border-left-color: #334155;
}

/* Explorer: sentence-mode topic clarify modal */
.compare-modal-card--clarify-topics {
    width: min(560px, 100%);
}

.compare-clarify-topics-phrases {
    display: grid;
    gap: 8px;
}

.compare-clarify-topics-phrases-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.compare-clarify-topics-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.compare-clarify-topics-bulk-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #1678fd;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.compare-clarify-topics-bulk-btn:hover {
    text-decoration: underline;
}

.compare-clarify-topics-list {
    display: grid;
    gap: 6px;
    max-height: min(280px, 40vh);
    overflow: auto;
    padding: 2px;
}

.compare-clarify-topics-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #0f172a;
}

.compare-clarify-topics-option:hover {
    border-color: #cbd5e1;
}

.compare-clarify-topics-option:has(input:checked) {
    border-color: #1678fd;
    background: #f0f7ff;
    box-shadow: inset 0 0 0 1px #1678fd;
}

.compare-clarify-topics-option input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: none;
    accent-color: #2563eb;
    cursor: pointer;
}

.compare-clarify-topics-option span {
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

html[data-theme="dark"] .compare-clarify-topics-phrases-head {
    color: #94a3b8;
}

html[data-theme="dark"] .compare-clarify-topics-bulk-btn {
    color: #60a5fa;
}

html[data-theme="dark"] .compare-clarify-topics-option {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-clarify-topics-option:hover {
    border-color: #475569;
}

html[data-theme="dark"] .compare-clarify-topics-option:has(input:checked) {
    border-color: #3b82f6;
    background: rgba(37, 99, 235, 0.18);
    box-shadow: inset 0 0 0 1px #3b82f6;
}

html[data-theme="dark"] .compare-modal-card--clarify-topics .compare-modal-generating {
    background: rgba(15, 23, 42, 0.94);
}

html[data-theme="dark"] .compare-modal-card--clarify-topics .compare-modal-generating p {
    color: #e2e8f0;
}

/* Project manager modal (explorer / tools sidebar) */
.compare-modal-card--project-manager {
    width: min(680px, 100%);
    gap: 14px;
    padding: 18px 18px 16px;
}

.project-manager-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.project-manager-header-copy {
    min-width: 0;
}

.project-manager-header-copy h2 {
    margin: 0;
}

.project-manager-header-copy p {
    margin: 4px 0 0;
}

.project-manager-close-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #64748b;
    cursor: pointer;
    flex: 0 0 auto;
}

.project-manager-close-icon:hover {
    color: #0f172a;
    background: rgba(148, 163, 184, 0.16);
}

.project-manager-close-icon svg {
    width: 16px;
    height: 16px;
}

.project-manager-controls {
    display: grid;
    gap: 10px;
}

.project-manager-controls[hidden] {
    display: none;
}

.project-manager-filter {
    position: relative;
    display: block;
}

.project-manager-filter-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 15px;
    height: 15px;
    color: #94a3b8;
    transform: translateY(-50%);
    pointer-events: none;
}

.project-manager-filter-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.project-manager-filter input {
    width: 100%;
    padding: 9px 36px 9px 34px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #0f172a;
    font-size: 0.84rem;
}

.project-manager-filter input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.project-manager-filter-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transform: translateY(-50%);
}

.project-manager-filter-clear[hidden] {
    display: none;
}

.project-manager-filter-clear:hover {
    color: #0f172a;
    background: rgba(148, 163, 184, 0.16);
}

.project-manager-filter-clear svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.project-manager-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 34px;
}

.project-manager-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.project-manager-select-all input {
    margin: 0;
    accent-color: #2563eb;
}

.project-manager-selected {
    color: #64748b;
    font-size: 0.74rem;
}

.project-manager-delete {
    margin-left: auto;
    border-color: #fca5a5;
    background: transparent;
    color: #b91c1c;
}

.project-manager-delete:hover:not(:disabled) {
    border-color: #f87171;
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

.project-manager-delete:disabled {
    opacity: 0.45;
    cursor: default;
}

.project-manager-status {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.4;
    padding: 4px 2px;
}

.project-manager-status.is-error {
    color: #b91c1c;
}

.project-manager-status[hidden] {
    display: none;
}

.project-manager-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    max-height: min(52vh, 440px);
    overflow: auto;
    scrollbar-gutter: stable;
}

.project-manager-list[hidden] {
    display: none;
}

.project-manager-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.project-manager-item[hidden] {
    display: none;
}

.project-manager-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.project-manager-item:has(input:checked) {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    box-shadow: inset 3px 0 0 #2563eb;
}

.project-manager-check {
    display: grid;
    place-items: start;
    padding-top: 3px;
    cursor: pointer;
}

.project-manager-check input {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
}

.project-manager-check-ui {
    display: none;
}

.project-manager-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.project-manager-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.project-manager-title-row strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 650;
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-manager-open {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
}

.project-manager-open:hover {
    text-decoration: underline;
}

.project-manager-meta,
.project-manager-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.project-manager-stats span {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
}

.compare-modal-card--project-manager > footer {
    justify-content: flex-end;
}

html[data-theme="dark"] .project-manager-close-icon:hover,
html[data-theme="dark"] .project-manager-filter-clear:hover {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .project-manager-filter input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .project-manager-filter input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

html[data-theme="dark"] .project-manager-item {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
    border-color: #334155;
}

html[data-theme="dark"] .project-manager-item:hover {
    border-color: #475569;
}

html[data-theme="dark"] .project-manager-item:has(input:checked) {
    border-color: #3b82f6;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.18) 0%, #0f172a 100%);
    box-shadow: inset 3px 0 0 #3b82f6;
}

html[data-theme="dark"] .project-manager-title-row strong {
    color: #e2e8f0;
}

html[data-theme="dark"] .project-manager-select-all,
html[data-theme="dark"] .project-manager-selected,
html[data-theme="dark"] .project-manager-meta,
html[data-theme="dark"] .project-manager-status {
    color: #94a3b8;
}

html[data-theme="dark"] .project-manager-stats span {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}

html[data-theme="dark"] .project-manager-status.is-error {
    color: #fca5a5;
}

html[data-theme="dark"] .project-manager-open {
    color: #60a5fa;
}

html[data-theme="dark"] .project-manager-delete {
    border-color: #7f1d1d;
    background: transparent;
    color: #fca5a5;
}

html[data-theme="dark"] .project-manager-delete:hover:not(:disabled) {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

html[data-theme="dark"] .compare-sidebar-manage:hover {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.16);
}

/* Admin: Schedule Log */
.admin-schedule-log-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.admin-schedule-log-summary > div {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #dbe3ee);
    border-radius: 0.5rem;
    background: var(--surface, #fff);
}

.admin-schedule-log-summary span {
    display: block;
    font-size: 0.8rem;
    color: var(--muted, #64748b);
}

.admin-schedule-log-summary strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.25rem;
}

.admin-schedule-log-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin: 0 0 1rem;
}

.admin-schedule-log-filters label {
    display: grid;
    gap: 0.35rem;
}

.admin-schedule-log-filters span {
    font-size: 0.85rem;
    color: var(--muted, #64748b);
}

.admin-schedule-log-filters select,
.admin-schedule-log-filters button {
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border, #dbe3ee);
    border-radius: 0.4rem;
    background: var(--surface, #fff);
}

.admin-schedule-log-filters button {
    cursor: pointer;
    font-weight: 600;
}

.admin-schedule-log-filters button:hover {
    background: rgba(148, 163, 184, 0.12);
}

.admin-schedule-log-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--muted, #64748b);
}

.admin-schedule-log-status {
    display: inline-block;
    font-weight: 600;
}

.admin-schedule-log-status.is-success {
    color: #15803d;
}

.admin-schedule-log-status.is-failed {
    color: #b91c1c;
}

.admin-schedule-log-status.is-running {
    color: #a16207;
}

.admin-schedule-log-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.admin-schedule-log-pager a {
    color: var(--link, #2563eb);
}

.admin-schedule-log-pager span:first-child,
.admin-schedule-log-pager span:last-child {
    color: var(--muted, #64748b);
}

html[data-theme="dark"] .admin-schedule-log-summary > div,
html[data-theme="dark"] .admin-schedule-log-filters select,
html[data-theme="dark"] .admin-schedule-log-filters button {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .admin-schedule-log-status.is-success {
    color: #4ade80;
}

html[data-theme="dark"] .admin-schedule-log-status.is-failed {
    color: #fca5a5;
}

html[data-theme="dark"] .admin-schedule-log-status.is-running {
    color: #fbbf24;
}

/* Admin: Tools */
.admin-tools-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    /* Inset shadow instead of a border so the tab underlines fit inside the strip without overflowing it. */
    box-shadow: inset 0 -1px 0 var(--line);
    scrollbar-width: thin;
}

.admin-tools-tabs [role="tab"] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.admin-tools-tabs [role="tab"]:hover {
    color: var(--ink);
}

.admin-tools-tabs [role="tab"].is-current {
    border-bottom-color: var(--green-dark);
    color: var(--green-dark);
}

.admin-tools-tab-alert {
    display: inline-grid;
    width: 1.1rem;
    height: 1.1rem;
    place-items: center;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-tool-card {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
}

.admin-tool-card[hidden] {
    display: none;
}

.admin-tool-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.admin-tool-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.admin-tool-hint,
.admin-tool-muted,
.admin-tool-empty {
    color: var(--muted);
    font-size: 0.85rem;
}

.admin-tool-hint {
    margin: 0.5rem 0 0.75rem;
}

.admin-tool-hint a,
.admin-tool-links a {
    color: var(--green-dark);
    text-decoration: underline;
}

.admin-tool-links a[aria-current="true"] {
    font-weight: 700;
    text-decoration: none;
}

.admin-tool-muted {
    display: block;
    margin-top: 0.2rem;
}

.admin-tool-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-tool-pill.is-ok {
    background: #dcfce7;
    color: #15803d;
}

.admin-tool-pill.is-warn {
    background: #fef3c7;
    color: #a16207;
}

.admin-tool-pill.is-fail {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-tool-pill.is-muted {
    background: #f1f5f9;
    color: var(--muted);
}

.admin-tool-migrations {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    font-size: 0.85rem;
}

.admin-tool-form {
    margin: 0.75rem 0;
}

.admin-tool-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 28rem;
    margin: 0.75rem 0;
}

.admin-tool-input {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-tool-input:hover {
    border-color: #94a3b8;
}

.admin-tool-input:focus {
    outline: none;
    border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.admin-tool-inline-form .primary-button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.admin-tool-lookup {
    display: grid;
    gap: 0.4rem;
    max-width: 40rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    font-size: 0.9rem;
}

.admin-tool-lookup.is-ok {
    border-color: #86efac;
    background: #f0fdf4;
}

.admin-tool-lookup.is-warn {
    border-color: #fcd34d;
    background: #fffbeb;
}

.admin-tool-lookup.is-error {
    border-color: #fca5a5;
    background: #fef2f2;
}

.admin-tool-lookup.is-loading {
    color: var(--muted);
}

.admin-tool-lookup-row {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) 1fr;
    gap: 1rem;
}

.admin-tool-lookup-row > .admin-tool-lookup-value:only-child {
    grid-column: 1 / -1;
}

.admin-tool-lookup-label {
    color: var(--muted);
}

.admin-tool-lookup-value {
    overflow-wrap: anywhere;
}

.admin-tool-lookup-note {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
}

@media (max-width: 560px) {
    .admin-tool-lookup-row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

.admin-tool-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.admin-tool-buttons form,
.admin-tool-table form {
    margin: 0;
}

.admin-tool-small-btn {
    margin: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.admin-tool-small-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.admin-tool-small-btn.is-danger {
    border-color: #fca5a5;
    color: #b91c1c;
}

.admin-tool-small-btn.is-danger:hover {
    background: #fef2f2;
}

.admin-tool-facts {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) 1fr;
    gap: 0.4rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.admin-tool-facts dt {
    color: var(--muted);
}

.admin-tool-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-tool-table tr.is-inactive td {
    opacity: 0.65;
}

.admin-tool-result {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-sm);
}

.admin-tool-result p {
    margin: 0 0 0.5rem;
}

.admin-tool-result.is-ok {
    border-color: #86efac;
    background: #f0fdf4;
}

.admin-tool-result.is-failed {
    border-color: #fca5a5;
    background: #fef2f2;
}

.admin-tool-pre {
    max-height: 24rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    overflow: auto;
    border-radius: var(--radius-xs);
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-tool-error {
    margin: 0.5rem 0;
    color: #b91c1c;
    font-size: 0.88rem;
}

.admin-tool-output {
    display: block;
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.admin-tool-jobs {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-tool-jobs > li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.admin-tool-jobs p {
    margin: 0;
}

.admin-tool-log {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.admin-tool-log > li {
    border-bottom: 1px solid var(--line);
}

.admin-tool-log summary {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0;
    cursor: pointer;
}

.admin-tool-log-time {
    flex: 0 0 auto;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.admin-tool-log-msg {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-tool-log details[open] .admin-tool-pre {
    margin: 0 0 0.6rem;
}

html[data-theme="dark"] .admin-tools-tabs [role="tab"]:hover {
    color: #e2e8f0;
}

html[data-theme="dark"] .admin-tools-tabs [role="tab"].is-current {
    border-bottom-color: #60a5fa;
    color: #93c5fd;
}

html[data-theme="dark"] .admin-tools-tabs {
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .admin-tool-card,
html[data-theme="dark"] .admin-tool-jobs > li,
html[data-theme="dark"] .admin-tool-log > li {
    border-color: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .admin-tool-card {
    background: rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .admin-tool-hint,
html[data-theme="dark"] .admin-tool-muted,
html[data-theme="dark"] .admin-tool-empty,
html[data-theme="dark"] .admin-tool-facts dt,
html[data-theme="dark"] .admin-tool-output,
html[data-theme="dark"] .admin-tool-log-time {
    color: #94a3b8;
}

html[data-theme="dark"] .admin-tool-hint a,
html[data-theme="dark"] .admin-tool-links a {
    color: #93c5fd;
}

html[data-theme="dark"] .admin-tool-pill.is-ok {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

html[data-theme="dark"] .admin-tool-pill.is-warn {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

html[data-theme="dark"] .admin-tool-pill.is-fail {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}

html[data-theme="dark"] .admin-tool-pill.is-muted {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

html[data-theme="dark"] .admin-tool-small-btn {
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
}

html[data-theme="dark"] .admin-tool-small-btn:hover {
    background: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .admin-tool-small-btn.is-danger {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

html[data-theme="dark"] .admin-tool-result.is-ok {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}

html[data-theme="dark"] .admin-tool-result.is-failed {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

html[data-theme="dark"] .admin-tool-error {
    color: #fca5a5;
}

/* landing nav language select */
.landing-nav-locale {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-inline-start: 4px;
}

.landing-nav-links .landing-nav-locale-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 8px 14px;
    border: 1px solid rgba(226, 232, 240, 0.35);
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

.landing-nav-links .landing-nav-locale-btn:hover,
.landing-nav-links .landing-nav-locale-btn[aria-expanded="true"] {
    border-color: rgba(226, 232, 240, 0.55);
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.landing-nav-locale-flag {
    display: block;
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
    flex: 0 0 auto;
}

.landing-nav-locale-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 100%;
    max-height: min(22rem, 70vh);
    margin: 0;
    padding: 6px;
    overflow: auto;
    list-style: none;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    background: #0f172a;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
}

.landing-nav-locale-menu li {
    margin: 0;
}

.landing-nav-links .landing-nav-locale-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.landing-nav-links .landing-nav-locale-menu button:hover,
.landing-nav-links .landing-nav-locale-menu button[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

html[dir="rtl"] .landing-nav-locale-menu {
    right: auto;
    left: 0;
}

/* Admin: Keyword feedback */
.admin-keyword-feedback-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 1.5rem;
}

.admin-keyword-feedback-summary > div {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
    border-radius: 8px;
    background: var(--panel, #fff);
}

.admin-keyword-feedback-summary span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--muted, #64748b);
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-keyword-feedback-summary strong {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.admin-keyword-feedback-top {
    margin-bottom: 0.5rem;
}

.admin-keyword-feedback-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    margin: 0 0 1rem;
}

.admin-keyword-feedback-filters label {
    display: grid;
    gap: 0.35rem;
    min-width: 10rem;
}

.admin-keyword-feedback-filters span {
    color: var(--muted, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-keyword-feedback-filters input,
.admin-keyword-feedback-filters select,
.admin-keyword-feedback-filters button {
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.16));
    border-radius: 6px;
    background: var(--panel, #fff);
    color: inherit;
    font: inherit;
}

.admin-keyword-feedback-filters button {
    cursor: pointer;
    font-weight: 600;
    background: var(--accent, #1678fd);
    border-color: var(--accent, #1678fd);
    color: #fff;
}

.admin-keyword-feedback-filters button:hover {
    filter: brightness(0.96);
}

.admin-keyword-feedback-meta {
    display: block;
    color: var(--muted, #64748b);
    font-size: 0.8rem;
}

.admin-keyword-feedback-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--muted, #64748b);
    font-size: 0.9rem;
}

.admin-keyword-feedback-pager a {
    color: var(--accent, #1678fd);
    font-weight: 600;
    text-decoration: none;
}

.admin-keyword-feedback-pager span:first-child,
.admin-keyword-feedback-pager span:last-child {
    min-width: 4.5rem;
}

@media (max-width: 720px) {
    .admin-keyword-feedback-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-keyword-feedback-filters label {
        min-width: 100%;
        flex: 1 1 100%;
    }
}

/* Feedback page (/feedback) */
.landing-feedback {
    width: min(640px, calc(100% - 40px));
    margin: 0 auto;
    padding: 40px 0 64px;
}

.feedback-page-header {
    margin: 0 0 28px;
}

.feedback-page-header h1 {
    margin: 8px 0 12px;
    font-size: clamp(1.85rem, 4vw, 2.4rem);
    line-height: 1.15;
}

.feedback-page-intro {
    margin: 0;
    color: var(--landing-muted, var(--muted));
    font-size: 1.05rem;
    line-height: 1.55;
}

.feedback-widget.is-embed {
    position: relative;
}

.feedback-widget.is-embed .feedback-modal {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    place-items: unset;
}

.feedback-widget.is-embed .feedback-modal[hidden] {
    display: block;
}

.feedback-widget.is-embed .compare-modal-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px 22px 18px;
}

.feedback-widget.is-embed .compare-modal-card header {
    margin-bottom: 4px;
}

.feedback-widget.is-embed .compare-modal-card footer {
    justify-content: flex-end;
}

.feedback-widget.is-embed .feedback-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 80;
}

@media (max-width: 820px) {
    .landing-feedback {
        width: min(640px, calc(100% - 28px));
        padding: 28px 0 48px;
    }

    .feedback-widget.is-embed .compare-modal-card {
        padding: 18px 16px 16px;
    }
}

/* Refine page: concept variants inside an expanded phrase row */
.review-variants {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.review-variants-concept {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
}

.review-variants-concept strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.review-variant-group + .review-variant-group {
    margin-top: 12px;
}

.review-variant-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.review-variant-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.review-variant-list li.is-added {
    border-color: #86efac;
    background: #f0fdf4;
}

.review-variant-alias {
    flex: 1;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 650;
}

.review-variant-type {
    color: #78716c;
    font-size: 0.78rem;
}

.review-variant-add,
.review-variant-add-all {
    padding: 5px 10px;
    border: 1px solid #93c5fd;
    border-radius: 7px;
    background: #fff;
    color: #2563eb;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.review-variant-add-all {
    margin-top: 8px;
}

.review-variant-add:disabled,
.review-variant-add-all:disabled {
    border-color: #cbd5e1;
    color: #94a3b8;
    cursor: default;
}

/* Refine page: coverage grid of heads against words added in this project */
.review-coverage-intro {
    margin: 14px 14px 8px;
}

.review-coverage-title {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
}

.review-coverage-explored {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 14px 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.review-coverage-ring {
    --explored-pct: 0;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background:
        radial-gradient(closest-side, #ffffff 68%, transparent 69% 100%),
        conic-gradient(#0ea5e9 calc(var(--explored-pct) * 1%), #e2e8f0 0);
}

.review-coverage-ring-value {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.review-coverage-explored-copy {
    min-width: 0;
}

.review-coverage-explored-copy strong {
    display: block;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
}

.review-coverage-explored-copy p {
    margin: 3px 0 0;
    color: #78716c;
    font-size: 0.84rem;
    line-height: 1.45;
}

.review-coverage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 14px 12px;
    padding: 0;
    list-style: none;
    color: #64748b;
    font-size: 0.78rem;
}

.review-coverage-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: help;
}

.review-cell-gap--legend {
    pointer-events: none;
    cursor: default;
}

.review-coverage-help,
.review-coverage-summary,
.review-coverage-empty {
    margin: 12px 14px;
    color: #78716c;
    font-size: 0.84rem;
    line-height: 1.5;
}

.review-coverage-intro .review-coverage-help {
    margin: 0;
}

.review-coverage-summary span {
    display: block;
    margin-top: 4px;
}

.review-coverage-table th[scope="col"] {
    cursor: help;
}

.review-coverage-table th[scope="row"] {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 650;
    text-align: left;
}

.review-coverage-table tr.is-current th[scope="row"] {
    box-shadow: inset 3px 0 0 #0ea5e9;
    padding-left: 11px;
}

.review-coverage-head {
    display: block;
}

.review-coverage-head-pct {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: help;
}

.review-coverage-cell {
    text-align: center;
}

.review-cell-kept {
    display: inline-block;
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 7px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.84rem;
    font-weight: 700;
}

.review-cell-rejected {
    color: #b91c1c;
    font-size: 0.78rem;
}

.review-cell-empty {
    color: #cbd5e1;
}

.review-cell-gap {
    padding: 3px 9px;
    border: 1px dashed #f59e0b;
    border-radius: 7px;
    background: #fffbeb;
    color: #b45309;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
}

.review-cell-gap:hover {
    border-style: solid;
    background: #fef3c7;
}

.review-gap-panel {
    margin: 0 14px 16px;
    padding: 12px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #f8fafc;
    color: #78716c;
    font-size: 0.84rem;
}

.review-gap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.review-gap-head strong {
    color: #0f172a;
    font-size: 0.92rem;
}

.review-gap-close {
    padding: 4px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.review-gap-section + .review-gap-section {
    margin-top: 12px;
}

.review-gap-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.review-gap-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.review-gap-section--ruled-out .review-gap-list li {
    border-style: dashed;
    background: transparent;
}

.review-gap-section--ruled-out .review-variant-alias {
    color: #78716c;
    font-weight: 500;
    text-decoration: line-through;
}

.review-gap-empty {
    margin: 0;
}

.review-pref-copy {
    flex: 1;
    display: grid;
    gap: 2px;
}

.review-pref-counts,
.review-prefs-empty {
    color: #78716c;
    font-size: 0.78rem;
}

@media (max-width: 720px) {
    .review-coverage-explored {
        align-items: flex-start;
    }

    .review-coverage-table {
        display: block;
        overflow-x: auto;
    }
}

html[data-theme="dark"] .review-coverage-explored {
    border-color: #334155;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

html[data-theme="dark"] .review-coverage-ring {
    background:
        radial-gradient(closest-side, #0f172a 68%, transparent 69% 100%),
        conic-gradient(#38bdf8 calc(var(--explored-pct) * 1%), #334155 0);
}

html[data-theme="dark"] .review-coverage-title,
html[data-theme="dark"] .review-coverage-ring-value,
html[data-theme="dark"] .review-coverage-explored-copy strong {
    color: #f8fafc;
}

html[data-theme="dark"] .review-variants {
    border-top-color: #1e293b;
}

html[data-theme="dark"] .review-variant-list li,
html[data-theme="dark"] .review-gap-list li,
html[data-theme="dark"] .review-variant-add,
html[data-theme="dark"] .review-variant-add-all,
html[data-theme="dark"] .review-gap-close,
html[data-theme="dark"] .review-gap-panel {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .review-variants-concept strong,
html[data-theme="dark"] .review-variant-alias,
html[data-theme="dark"] .review-coverage-table th[scope="row"],
html[data-theme="dark"] .review-gap-head strong {
    color: #f8fafc;
}

html[data-theme="dark"] .review-variant-type,
html[data-theme="dark"] .review-coverage-help,
html[data-theme="dark"] .review-coverage-summary,
html[data-theme="dark"] .review-coverage-empty,
html[data-theme="dark"] .review-coverage-explored-copy p,
html[data-theme="dark"] .review-coverage-head-pct,
html[data-theme="dark"] .review-coverage-legend,
html[data-theme="dark"] .review-pref-counts,
html[data-theme="dark"] .review-prefs-empty {
    color: #94a3b8;
}

html[data-theme="dark"] .review-cell-kept {
    background: rgba(21, 128, 61, 0.28);
    color: #86efac;
}

html[data-theme="dark"] .review-cell-gap {
    background: rgba(120, 53, 15, 0.28);
    border-color: #b45309;
    color: #fcd34d;
}

html[data-theme="dark"] .review-variant-list li.is-added {
    background: rgba(21, 128, 61, 0.2);
    border-color: #15803d;
}

/* Phrase why modal (Explorer / Tree / Map) */
.compare-modal--phrase-why {
    z-index: 135;
}

.compare-modal--phrase-why .compare-modal-card {
    width: min(440px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.phrase-why-header {
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
}

.phrase-why-kicker {
    margin: 0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.phrase-why-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.phrase-why-tier {
    justify-self: start;
}

.phrase-why-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
}

.compare-modal--phrase-why .compare-modal-card > footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 2px;
    background: #fff;
}

@media (min-width: 900px) {
    .compare-modal--phrase-why .compare-modal-card {
        width: min(720px, calc(100vw - 48px));
    }

    .phrase-why-body {
        column-count: 2;
        column-gap: 12px;
    }
}

.phrase-why-fact {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-sm, 6px);
    background: #f8fafc;
    break-inside: avoid;
}

.phrase-why-fact-label {
    margin: 0;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.phrase-why-fact-value {
    margin: 0;
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.45;
}

.phrase-why-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phrase-why-chips li {
    padding: 4px 9px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.phrase-why-fact--board {
    column-span: all;
}

.phrase-why-decisions {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phrase-why-decision {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.phrase-why-decision .compare-column-index {
    flex: 0 0 auto;
    cursor: default;
}

.phrase-why-decision-sentence {
    margin: 0;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
}

.phrase-why-decision.is-saved .compare-column-index {
    border-color: #86efac;
    background: #dcfce7;
    color: #14532d;
}

.phrase-why-decision.is-rejected .compare-column-index {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #7f1d1d;
}

.phrase-why-decision.is-omitted .compare-column-index {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

.compare-row-phrase[data-phrase-why],
.tree-node-phrase[data-phrase-why],
.map-node-phrase[data-phrase-why] {
    cursor: pointer;
}

.compare-row-phrase[data-phrase-why]:hover,
.tree-node-phrase[data-phrase-why]:hover,
.map-node-phrase[data-phrase-why]:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

html[data-theme="dark"] .phrase-why-kicker,
html[data-theme="dark"] .phrase-why-fact-label {
    color: #94a3b8;
}

html[data-theme="dark"] .phrase-why-header h2,
html[data-theme="dark"] .phrase-why-fact-value {
    color: #f1f5f9;
}

html[data-theme="dark"] .phrase-why-fact {
    border-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .compare-modal--phrase-why .compare-modal-card > footer {
    background: #1e293b;
}

html[data-theme="dark"] .phrase-why-chips li {
    background: #334155;
    color: #f1f5f9;
}

html[data-theme="dark"] .phrase-why-decision-sentence {
    color: #f1f5f9;
}

html[data-theme="dark"] .phrase-why-decision.is-saved .compare-column-index {
    border-color: #166534;
    background: rgba(22, 101, 52, 0.35);
    color: #bbf7d0;
}

html[data-theme="dark"] .phrase-why-decision.is-rejected .compare-column-index {
    border-color: #991b1b;
    background: rgba(153, 27, 27, 0.35);
    color: #fecaca;
}

html[data-theme="dark"] .phrase-why-decision.is-omitted .compare-column-index {
    border-color: #64748b;
    background: #334155;
    color: #cbd5e1;
}

/* Nested seedword projects — sidebar hierarchy */
.compare-sidebar-list > li.compare-sidebar-project,
.compare-sidebar-section:first-of-type .compare-sidebar-list > li.compare-sidebar-project {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 4px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: transparent;
    box-shadow: none;
}

.compare-sidebar-list > li.compare-sidebar-project:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.compare-sidebar-list > li.compare-sidebar-project.is-active {
    background: transparent;
    box-shadow: none;
}

.compare-sidebar-list > li.compare-sidebar-project.is-active > .compare-sidebar-project-row,
.compare-sidebar-children > li.compare-sidebar-project.is-active > .compare-sidebar-project-row {
    border-radius: var(--compare-radius-sm);
    background: rgba(22, 120, 253, 0.12);
    box-shadow: inset 3px 0 0 var(--compare-brand-blue);
}

.compare-sidebar-list > li.compare-sidebar-project.has-children.is-expanded {
    padding-bottom: 12px;
}

.compare-sidebar-project-row {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.compare-sidebar-list > li.compare-sidebar-project > .compare-sidebar-project-row {
    padding-left: 0;
}

.compare-sidebar-list > li.compare-sidebar-project > .compare-sidebar-project-row > .compare-sidebar-item {
    padding-left: 4px;
    gap: 8px;
}

.compare-sidebar-project-row > .compare-sidebar-item {
    flex: 1 1 auto;
    min-width: 0;
}

.compare-sidebar-project-row > .compare-sidebar-menu {
    flex: 0 0 auto;
}

.compare-sidebar-expand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 22px;
    margin-left: -2px;
    margin-right: -2px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}

.compare-sidebar-expand:hover,
.compare-sidebar-expand:focus-visible {
    opacity: 1;
    background: rgba(148, 163, 184, 0.16);
}

.compare-sidebar-expand svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.compare-sidebar-project.is-expanded > .compare-sidebar-project-row > .compare-sidebar-expand svg {
    transform: rotate(90deg);
}

.compare-sidebar-children {
    display: none;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 2px 0 0 6px;
    padding: 0 0 0 34px;
    width: calc(100% - 6px);
    min-width: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.22);
}

.compare-sidebar-project.is-expanded > .compare-sidebar-children {
    display: flex;
}

.compare-sidebar-children > li.compare-sidebar-project {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.compare-sidebar-project.is-child .compare-sidebar-item {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
}

.compare-sidebar-project.is-child .compare-sidebar-item-icon {
    width: 14px;
    flex-basis: 14px;
}

.compare-sidebar-project.is-child .compare-sidebar-item-icon svg {
    width: 14px;
    height: 14px;
    opacity: 0.75;
}

.compare-sidebar-project.is-child .compare-sidebar-item-title {
    font-weight: 550;
    font-size: 0.82rem;
}

.compare-sidebar-project.has-active-child:not(.is-active) > .compare-sidebar-project-row > .compare-sidebar-item {
    opacity: 0.92;
}

.compare-app.is-sidebar-collapsed .compare-sidebar-expand,
.compare-app.is-sidebar-collapsed .compare-sidebar-children {
    display: none;
}

.project-manager-item.is-child {
    padding-left: 1.5rem;
}

.project-manager-item.is-child .project-manager-title-row strong::before {
    content: '';
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.45rem;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.35;
    vertical-align: 0.05em;
}

/* New exploration modal — project picker with icons */
.compare-project-picker {
    position: relative;
    width: 100%;
}

.compare-project-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.compare-project-picker-trigger:hover,
.compare-project-picker.is-open .compare-project-picker-trigger {
    border-color: #94a3b8;
}

.compare-project-picker-trigger:focus-visible {
    outline: 2px solid rgba(22, 120, 253, 0.35);
    outline-offset: 1px;
}

.compare-project-picker-icon,
.compare-project-picker-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #64748b;
}

.compare-project-picker-icon svg,
.compare-project-picker-option-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-project-picker-label,
.compare-project-picker-option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-project-picker-chevron {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #94a3b8;
    transition: transform 0.15s ease;
}

.compare-project-picker.is-open .compare-project-picker-chevron {
    transform: rotate(180deg);
}

.compare-project-picker-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 220px;
    overflow: auto;
    border: 1px solid #dbe2ea;
    border-radius: var(--compare-radius-sm);
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.compare-project-picker-menu[hidden] {
    display: none;
}

.compare-project-picker-menu [role="option"] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #0f172a;
    cursor: pointer;
}

.compare-project-picker-menu [role="option"]:hover,
.compare-project-picker-menu [role="option"][aria-selected="true"] {
    background: rgba(22, 120, 253, 0.1);
}

.compare-project-picker-menu [role="option"][aria-selected="true"] .compare-project-picker-option-icon {
    color: #1678fd;
}

html[data-theme="dark"] .compare-project-picker-trigger,
html[data-theme="dark"] .compare-project-picker-menu {
    border-color: #334155;
    background: #0f172a;
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-project-picker-menu [role="option"] {
    color: #e2e8f0;
}

html[data-theme="dark"] .compare-project-picker-menu [role="option"]:hover,
html[data-theme="dark"] .compare-project-picker-menu [role="option"][aria-selected="true"] {
    background: rgba(96, 165, 250, 0.14);
}

html[data-theme="dark"] .compare-project-picker-icon,
html[data-theme="dark"] .compare-project-picker-option-icon,
html[data-theme="dark"] .compare-project-picker-chevron {
    color: #94a3b8;
}

/* settings modal — tabs + font size */
.compare-modal--settings .compare-modal-card {
    width: min(560px, 100%);
}

.compare-settings-tabs {
    display: flex;
    gap: 4px;
    margin: -2px 0 2px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: var(--compare-radius-md);
    background: #f8fafc;
    scrollbar-width: thin;
}

.compare-settings-tab {
    flex: 1 0 auto;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--compare-radius-sm);
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
}

.compare-settings-tab:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
}

.compare-settings-tab.is-active,
.compare-settings-tab[aria-selected="true"] {
    color: #0f172a;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.compare-settings-panels {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.compare-settings-panel {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.compare-settings-panel[hidden] {
    display: none;
}

html[data-font-size="compact"] {
    font-size: 87.5%;
}

html[data-font-size="large"] {
    font-size: 112.5%;
}

html[data-theme="dark"] .compare-settings-tabs {
    border-color: #334155;
    background: #0f172a;
}

html[data-theme="dark"] .compare-settings-tab {
    color: #94a3b8;
}

html[data-theme="dark"] .compare-settings-tab:hover {
    color: #f8fafc;
    background: rgba(148, 163, 184, 0.08);
}

html[data-theme="dark"] .compare-settings-tab.is-active,
html[data-theme="dark"] .compare-settings-tab[aria-selected="true"] {
    color: #f8fafc;
    background: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .compare-settings-empty {
    color: #94a3b8;
}