/* Private Facebook backup lookup. Kept entirely within the customer palette so
   light and dark modes inherit the same contrast and surface hierarchy. */
body.customer-surface .fb-backup-page {
    width: min(100% - 2rem, 1180px);
    display: grid;
    gap: 1.25rem;
    margin-block: 1.5rem 3rem;
}

body.customer-surface .fb-backup-hero,
body.customer-surface .fb-backup-search-card,
body.customer-surface .fb-backup-results-card {
    border: 1px solid var(--cx-line);
    background: var(--cx-surface);
    color: var(--cx-text);
    box-shadow: var(--cx-shadow-card);
}

body.customer-surface .fb-backup-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 18rem);
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: var(--cx-radius-stage);
}

body.customer-surface .fb-backup-hero-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--cx-primary);
    border-radius: var(--cx-radius-control);
    background: var(--cx-primary-soft);
    color: var(--cx-primary);
}

body.customer-surface .fb-backup-hero-icon .ui-icon { width: 1.45rem; height: 1.45rem; }
body.customer-surface .fb-backup-eyebrow,
body.customer-surface .fb-backup-search-card > header p,
body.customer-surface .fb-backup-results-header p {
    margin: 0 0 .3rem;
    color: var(--cx-primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
}

body.customer-surface .fb-backup-hero h1,
body.customer-surface .fb-backup-search-card h2,
body.customer-surface .fb-backup-results-card h2,
body.customer-surface .fb-backup-empty-state h3 { margin: 0; color: var(--cx-text); }
body.customer-surface .fb-backup-hero > div > p:last-child { margin: .45rem 0 0; color: var(--cx-text-muted); }

body.customer-surface .fb-backup-hero-note {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .8rem;
    border-left: 3px solid var(--cx-primary);
    border-radius: var(--cx-radius-control);
    background: var(--cx-surface-subtle);
    color: var(--cx-text);
}

body.customer-surface .fb-backup-hero-note .ui-icon { flex: 0 0 auto; width: 1.05rem; color: var(--cx-primary); }
body.customer-surface .fb-backup-hero-note span { display: grid; gap: .15rem; }
body.customer-surface .fb-backup-hero-note small { color: var(--cx-text-muted); line-height: 1.4; }

body.customer-surface .fb-backup-search-card,
body.customer-surface .fb-backup-results-card { overflow: hidden; border-radius: var(--cx-radius-panel); }
body.customer-surface .fb-backup-search-card > header,
body.customer-surface .fb-backup-results-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--cx-line);
    background: var(--cx-surface-subtle);
}

body.customer-surface .fb-backup-limit,
body.customer-surface .fb-backup-result-count {
    padding: .36rem .6rem;
    border: 1px solid var(--cx-line-strong);
    border-radius: 999px;
    background: var(--cx-surface);
    color: var(--cx-text-muted);
    font-size: .8rem;
    white-space: nowrap;
}
body.customer-surface .fb-backup-result-count b { color: var(--cx-primary); }

body.customer-surface .fb-backup-search-form { display: grid; gap: .85rem; padding: 1.25rem; }
body.customer-surface .fb-backup-search-form label { display: grid; gap: .45rem; font-weight: 700; }
body.customer-surface .fb-backup-search-form textarea { min-height: 13.5rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; }

body.customer-surface .fb-backup-form-footer { display: flex; align-items: center; gap: .8rem; }
body.customer-surface .fb-backup-form-footer p { display: flex; flex: 1 1 auto; align-items: center; gap: .35rem; margin: 0; color: var(--cx-text-muted); font-size: .875rem; }
body.customer-surface .fb-backup-form-footer p .ui-icon { width: 1rem; color: var(--cx-primary); }
body.customer-surface #backup-uid-count { color: var(--cx-text-muted); font-size: .825rem; white-space: nowrap; }

body.customer-surface .fb-backup-search-button,
body.customer-surface .fb-backup-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    border: 1px solid var(--cx-primary);
    border-radius: var(--cx-radius-control);
    background: var(--cx-primary);
    color: var(--cx-on-primary);
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--cx-primary) 20%, transparent);
}
body.customer-surface .fb-backup-search-button { padding-inline: 1rem; }
body.customer-surface .fb-backup-search-button .ui-icon,
body.customer-surface .fb-backup-download-button .ui-icon { width: 1rem; color: inherit; }
body.customer-surface .fb-backup-search-button:is(:hover, :focus-visible),
body.customer-surface .fb-backup-download-button:is(:hover, :focus-visible) { border-color: var(--cx-primary-hover); background: var(--cx-primary-hover); color: var(--cx-on-primary); }

body.customer-surface .fb-backup-empty-state,
body.customer-surface .fb-backup-message { display: flex; gap: .85rem; align-items: flex-start; margin: 1.25rem; padding: 1rem; border: 1px solid var(--cx-line-strong); border-radius: var(--cx-radius-control); background: var(--cx-surface-subtle); color: var(--cx-text-muted); }
body.customer-surface .fb-backup-empty-state { justify-content: center; min-height: 9rem; padding: 2rem; text-align: center; }
body.customer-surface .fb-backup-empty-state .ui-icon { flex: 0 0 auto; width: 1.5rem; color: var(--cx-primary); }
body.customer-surface .fb-backup-empty-state h3 { font-size: 1rem; }
body.customer-surface .fb-backup-empty-state p { margin: .35rem 0 0; color: var(--cx-text-muted); }
body.customer-surface .fb-backup-empty-state.compact { min-height: auto; }
body.customer-surface .fb-backup-message .ui-icon { flex: 0 0 auto; width: 1.1rem; }
body.customer-surface .fb-backup-message span { display: grid; gap: .2rem; }
body.customer-surface .fb-backup-message.error { border-color: color-mix(in srgb, var(--cx-danger) 40%, var(--cx-line)); background: var(--cx-danger-soft); color: var(--cx-danger); }
body.customer-surface .fb-backup-message.warning { border-color: color-mix(in srgb, var(--cx-warning) 40%, var(--cx-line)); background: var(--cx-warning-soft); color: var(--cx-warning); }

body.customer-surface .fb-backup-file-list { margin: 1.25rem; overflow-x: auto; border: 1px solid var(--cx-line); border-radius: var(--cx-radius-control); }
body.customer-surface .fb-backup-file-row { display: grid; grid-template-columns: minmax(9rem, .75fr) minmax(16rem, 1.7fr) minmax(8rem, .8fr) auto; gap: 1rem; align-items: center; min-width: 48rem; padding: .85rem 1rem; border-bottom: 1px solid var(--cx-line); color: var(--cx-text); }
body.customer-surface .fb-backup-file-row:last-child { border-bottom: 0; }
body.customer-surface .fb-backup-file-row:not(.fb-backup-file-heading):hover { background: var(--cx-surface-hover); }
body.customer-surface .fb-backup-file-heading { background: var(--cx-surface-subtle); color: var(--cx-text-muted); font-size: .76rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
body.customer-surface .fb-backup-file-row > code { color: var(--cx-primary); font-size: .85rem; overflow-wrap: anywhere; }
body.customer-surface .fb-backup-file-name { display: flex; gap: .6rem; align-items: center; min-width: 0; }
body.customer-surface .fb-backup-file-name > .ui-icon { flex: 0 0 auto; width: 1.2rem; color: var(--cx-primary); }
body.customer-surface .fb-backup-file-name > span { display: grid; min-width: 0; gap: .1rem; }
body.customer-surface .fb-backup-file-name b { overflow: hidden; color: var(--cx-text); text-overflow: ellipsis; white-space: nowrap; }
body.customer-surface .fb-backup-file-name small,
body.customer-surface .fb-backup-file-row time { color: var(--cx-text-muted); font-size: .825rem; }
body.customer-surface .fb-backup-download-button { min-height: 2.2rem; padding: .42rem .7rem; font-size: .825rem; }

body.customer-surface .fb-backup-missing-list { margin: 0 1.25rem 1.25rem; border: 1px solid var(--cx-line); border-radius: var(--cx-radius-control); background: var(--cx-surface-subtle); }
body.customer-surface .fb-backup-missing-list summary { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; color: var(--cx-text); cursor: pointer; list-style: none; }
body.customer-surface .fb-backup-missing-list summary::-webkit-details-marker { display: none; }
body.customer-surface .fb-backup-missing-list summary > .ui-icon:first-child { width: 1rem; color: var(--cx-warning); }
body.customer-surface .fb-backup-chevron { width: 1rem; margin-left: auto; color: var(--cx-text-muted); transition: transform .16s ease; }
body.customer-surface .fb-backup-missing-list[open] .fb-backup-chevron { transform: rotate(180deg); }
body.customer-surface .fb-backup-missing-list > div { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1rem 1rem; }
body.customer-surface .fb-backup-missing-list code { padding: .28rem .45rem; border: 1px solid var(--cx-line); border-radius: .35rem; background: var(--cx-surface); color: var(--cx-text-muted); font-size: .8rem; }

@media (max-width: 760px) {
    body.customer-surface .fb-backup-page { width: min(100% - 1rem, 1180px); margin-block: .75rem 2rem; gap: .85rem; }
    body.customer-surface .fb-backup-hero { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; border-radius: var(--cx-radius-panel); }
    body.customer-surface .fb-backup-hero-note { grid-column: 1 / -1; }
    body.customer-surface .fb-backup-search-card > header,
    body.customer-surface .fb-backup-results-header { align-items: flex-start; padding: 1rem; }
    body.customer-surface .fb-backup-search-form { padding: 1rem; }
    body.customer-surface .fb-backup-search-form textarea { min-height: 11rem; }
    body.customer-surface .fb-backup-form-footer { flex-wrap: wrap; }
    body.customer-surface .fb-backup-form-footer p { flex-basis: 100%; }
    body.customer-surface .fb-backup-search-button { margin-left: auto; }
    body.customer-surface .fb-backup-file-list { margin: 1rem; }
    body.customer-surface .fb-backup-missing-list { margin: 0 1rem 1rem; }
    body.customer-surface .fb-backup-empty-state,
    body.customer-surface .fb-backup-message { margin: 1rem; }
}