/* Connected Accounts on the phone (the import library's accounts panel,
 * [data-mobile-import-library-accounts], rendered by renderConnectedAccounts
 * in static/js/mobile-import-library.js).
 *
 * An owner tool, drawn as a compact dashboard: section headers, one bordered
 * list per group, one row per platform with a status and its actions. The
 * rows use nca-* classes so none of the older account-row sweeps reach them.
 *
 * Colours are tokens on the panel (--ca-*), set here for light, dark and an
 * owner page colour (--pc-*); Glass sets its own in mobile-glass.css. Every
 * selector carries #mobile-import-library:not(#nca) so it outranks the
 * panel's own `html body #mobile-import-library.mobile-import-library.is-light`
 * rules and the theme sweeps ([data-theme=light] * * *), and text sets
 * -webkit-text-fill-color alongside color for the sweeps that force both.
 * Loaded late in mobile.html (just before the Glass sheets).
 */

html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] {
    --ca-bg: #f5f6f8;
    --ca-panel: #ffffff;
    --ca-ink: #0f172a;
    --ca-dim: #5b6576;
    --ca-faint: #8a93a3;
    --ca-line: #e3e6eb;
    --ca-soft: #eef0f3;
    --ca-field: #ffffff;
    --ca-field-ink: #0f172a;
    --ca-btn: #0f172a;
    --ca-on-btn: #ffffff;
    --ca-good: #15803d;
    --ca-good-bg: #e7f6ec;
    --ca-warn: #a15c07;
    --ca-warn-bg: #fdf1dc;
    --ca-info: #1d4ed8;
    --ca-info-bg: #e6eefc;
    --ca-bad: #b42318;
    --ca-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ca-panel-filter: none;
    background: var(--ca-bg) !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html[data-theme="dark"] body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] {
    --ca-bg: #0b0b0c;
    --ca-panel: #161618;
    --ca-ink: #f4f4f5;
    --ca-dim: #a1a1aa;
    --ca-faint: #7c7c85;
    --ca-line: #2a2a2f;
    --ca-soft: #1f1f23;
    --ca-field: #0f0f11;
    --ca-field-ink: #f4f4f5;
    --ca-btn: #f4f4f5;
    --ca-on-btn: #0b0b0c;
    --ca-good: #86efac;
    --ca-good-bg: rgba(34, 197, 94, 0.14);
    --ca-warn: #fcd34d;
    --ca-warn-bg: rgba(245, 158, 11, 0.16);
    --ca-info: #93c5fd;
    --ca-info-bg: rgba(59, 130, 246, 0.16);
    --ca-bad: #fca5a5;
    --ca-shadow: none;
}

/* An owner page colour: the same palette the rest of the app uses. */
html[data-page-color] body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] {
    --ca-bg: var(--pc-page);
    --ca-panel: var(--pc-card);
    --ca-ink: var(--pc-ink);
    --ca-dim: var(--pc-dim);
    --ca-faint: var(--pc-faint);
    --ca-line: var(--pc-line);
    --ca-soft: var(--pc-soft);
    --ca-field: var(--pc-field);
    --ca-field-ink: var(--pc-field-ink);
    --ca-btn: var(--pc-btn);
    --ca-on-btn: var(--pc-on-btn);
    --ca-good: var(--pc-good);
    --ca-good-bg: var(--pc-soft);
    --ca-warn: var(--pc-warn);
    --ca-warn-bg: var(--pc-soft);
    --ca-info: var(--pc-ink);
    --ca-info-bg: var(--pc-soft);
    --ca-bad: var(--pc-bad);
    --ca-shadow: none;
}

/* ------------------------------------------------------------ header */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .mobile-import-library__accounts-top {
    padding: 4px 2px 0 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .mobile-import-library__accounts-title {
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .mobile-import-library__accounts-subtitle {
    max-width: none !important;
    margin: 6px 0 0 !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 13.5px !important;
    font-weight: 450 !important;
    line-height: 1.45 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .mobile-import-library__accounts-list {
    gap: 16px !important;
    margin-top: 18px !important;
}

/* ------------------------------------------------------------ group tabs */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--ca-soft) !important;
    border: 1px solid var(--ca-line);
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-tab {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 6px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-tab.is-active {
    background: var(--ca-panel) !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--ca-line) !important;
}

/* ------------------------------------------------------------ sections */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-section {
    display: grid;
    gap: 6px;
    margin: 0;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-section + .nca-section {
    margin-top: 12px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-section__head h3 {
    margin: 0;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-section__head span {
    color: var(--ca-faint) !important;
    -webkit-text-fill-color: var(--ca-faint) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-section__note {
    margin: 0 2px 6px;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 12.5px !important;
    font-weight: 450 !important;
    line-height: 1.45 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-list {
    overflow: hidden;
    border: 1px solid var(--ca-line) !important;
    border-radius: 12px !important;
    background: var(--ca-panel) !important;
    box-shadow: var(--ca-shadow) !important;
    -webkit-backdrop-filter: var(--ca-panel-filter);
    backdrop-filter: var(--ca-panel-filter);
}

/* ------------------------------------------------------------ rows */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row {
    display: grid;
    gap: 10px;
    padding: 13px 14px;
    margin: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row + .nca-row {
    border-top: 1px solid var(--ca-line) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__main {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__text b {
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__text > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    line-height: 1.3 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row.is-none .nca-row__text > span {
    color: var(--ca-faint) !important;
    -webkit-text-fill-color: var(--ca-faint) !important;
}

/* Platform icon: the brand's own colour, a white mark. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    overflow: hidden;
    background: #334155 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 17px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon :is(i, svg) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg {
    width: 19px;
    height: 19px;
}
/* The light sweep ([data-theme=light] * * *) blackens svg leaves; the marks
   draw in currentColor, so hand that back to white. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg :is(path, rect, circle, g) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    stroke: none !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg [fill="currentColor"] { fill: #ffffff !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg [fill="none"] { fill: none !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg [stroke="currentColor"] { stroke: #ffffff !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg [fill="#24f4ee"] { fill: #24f4ee !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg [fill="#fe2c55"] { fill: #fe2c55 !important; }
/* YouTube's play mark is cut out of the white glyph in the tile's red. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon svg [fill^="var("] { fill: #ff0000 !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon.is-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon.is-facebook { background: #1877f2 !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon.is-youtube { background: #ff0000 !important; }
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon:is(.is-tiktok, .is-x, .is-threads) { background: #000000 !important; }
html[data-theme="dark"] body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon:is(.is-tiktok, .is-x, .is-threads) {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
/* Film and recruiting services: their favicon on a white tile. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon:is(.is-hudl, .is-maxpreps, .is-247, .is-on3) {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon .mobile-import-library__badge-word {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon .mobile-import-library__badge-word.has-icon {
    font-size: 0 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon .mobile-import-library__badge-word img {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon .mobile-import-library__badge-word.has-icon {
    position: relative !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-icon .mobile-import-library__badge-word:not(.has-icon) img {
    display: none;
}

/* Status */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--ca-soft) !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status .nca-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: 11px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status.is-connected {
    background: var(--ca-good-bg) !important;
    color: var(--ca-good) !important;
    -webkit-text-fill-color: var(--ca-good) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status.is-reconnect {
    background: var(--ca-warn-bg) !important;
    color: var(--ca-warn) !important;
    -webkit-text-fill-color: var(--ca-warn) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status:is(.is-importing, .is-queued) {
    background: var(--ca-info-bg) !important;
    color: var(--ca-info) !important;
    -webkit-text-fill-color: var(--ca-info) !important;
}

/* The failed import behind "Needs reconnect". */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__alert {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 0 48px;
    color: var(--ca-warn) !important;
    -webkit-text-fill-color: var(--ca-warn) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__alert :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__alert i {
    margin-top: 2px;
    font-size: 12px !important;
}

/* Connected handles under a platform. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-srcs {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ca-line) !important;
    border-radius: 9px;
    overflow: hidden;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 8px 8px 8px 11px;
    background: var(--ca-soft) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src + .nca-src {
    border-top: 1px solid var(--ca-line) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__text {
    display: grid;
    gap: 1px;
    min-width: 0;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__text b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__text em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 11.5px !important;
    font-style: normal !important;
    font-weight: 450 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__acts {
    display: flex;
    flex: none;
    gap: 6px;
}

/* ------------------------------------------------------------ actions */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0 48px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--ca-line) !important;
    border-radius: 8px !important;
    background: var(--ca-panel) !important;
    box-shadow: none !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
    transform: none !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: inherit !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn i {
    font-size: 11px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn.is-primary {
    border-color: var(--ca-btn) !important;
    background: var(--ca-btn) !important;
    color: var(--ca-on-btn) !important;
    -webkit-text-fill-color: var(--ca-on-btn) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn.is-quiet {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    padding: 0 8px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn.is-small {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn.is-danger {
    color: var(--ca-bad) !important;
    -webkit-text-fill-color: var(--ca-bad) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn:active {
    opacity: 0.7;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* A page-wide button sweep adds backdrop-filter: blur() saturate() to
   buttons, which lifts a tinted page colour into a box behind flat buttons
   and tabs. None of these want it. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] :is(.nca-tab, .nca-btn, .nca-body button) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ------------------------------------------------------------ add account */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 48px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-form__field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    max-height: 64px;
    overflow: auto;
    padding: 8px 10px;
    border: 1px solid var(--ca-line) !important;
    border-radius: 8px !important;
    background: var(--ca-field) !important;
    color: var(--ca-field-ink) !important;
    -webkit-text-fill-color: var(--ca-field-ink) !important;
    caret-color: var(--ca-field-ink);
    font-size: 16px !important;
    font-weight: 450 !important;
    line-height: 1.1 !important;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: text;
    user-select: text;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-form__field:focus {
    border-color: var(--ca-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-form__field:empty::before {
    content: attr(data-placeholder);
    color: var(--ca-faint) !important;
    -webkit-text-fill-color: var(--ca-faint) !important;
    pointer-events: none;
}

/* ------------------------------------------------------------ loading */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 0 14px;
    border: 1px solid var(--ca-line);
    border-radius: 12px;
    background: var(--ca-panel) !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-loading :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ------------------------------------------------------------ business + contact */
/* Business and Contact are forms (a listing search, links, phone and email),
   still drawn with the older account-row markup. Inside the panel they take
   the same tokens as the rows above, so they read as one screen in light,
   dark, a page colour and Glass. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body:is(.is-business, .is-contact) {
    display: grid;
    gap: 10px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-row {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    border: 1px solid var(--ca-line) !important;
    border-radius: 12px !important;
    background: var(--ca-panel) !important;
    box-shadow: var(--ca-shadow) !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-head {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__platform-badge {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    border: 0 !important;
    background: var(--ca-soft) !important;
    box-shadow: inset 0 0 0 1px var(--ca-line) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__platform-badge i {
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 15px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-title {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-title b {
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-title span {
    justify-self: start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-row.is-connected .mobile-import-library__account-title span {
    color: var(--ca-good) !important;
    -webkit-text-fill-color: var(--ca-good) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-copy {
    margin: 0 0 0 48px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-copy p {
    margin: 0 !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 12.5px !important;
    font-weight: 450 !important;
    line-height: 1.45 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__source-add {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 0 48px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__source-entry {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border: 1px solid var(--ca-line) !important;
    border-radius: 8px !important;
    background: var(--ca-field) !important;
    box-shadow: none !important;
    color: var(--ca-field-ink) !important;
    -webkit-text-fill-color: var(--ca-field-ink) !important;
    font-size: 16px !important;
    font-weight: 450 !important;
    line-height: 1.1 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__source-entry:empty::before {
    content: attr(data-placeholder) !important;
    color: var(--ca-faint) !important;
    -webkit-text-fill-color: var(--ca-faint) !important;
}
/* Save, Add, Find, Remove: the same buttons as the rows above. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body :is(.mobile-import-library__source-add, .mobile-import-library__account-head) > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--ca-btn) !important;
    border-radius: 8px !important;
    background: var(--ca-btn) !important;
    box-shadow: none !important;
    color: var(--ca-on-btn) !important;
    -webkit-text-fill-color: var(--ca-on-btn) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body :is(.mobile-import-library__source-add, .mobile-import-library__account-head) > button * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: inherit !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__source-add > button i {
    font-size: 11px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__account-head > button {
    height: 28px !important;
    padding: 0 10px !important;
    border-color: var(--ca-line) !important;
    background: var(--ca-panel) !important;
    color: var(--ca-bad) !important;
    -webkit-text-fill-color: var(--ca-bad) !important;
    font-size: 12.5px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__sms-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 0 48px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__sms-toggle :is(i, span) {
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__sms-toggle.is-on :is(i, span) {
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__contact-heading {
    margin: 8px 2px 0 !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__contact-choice p {
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__contact-choice-option {
    border: 1px solid var(--ca-line) !important;
    border-radius: 8px !important;
    background: var(--ca-panel) !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__contact-choice-option.is-active {
    border-color: var(--ca-btn) !important;
    background: var(--ca-btn) !important;
    color: var(--ca-on-btn) !important;
    -webkit-text-fill-color: var(--ca-on-btn) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body :is(.mobile-import-library__place-results, .mobile-import-library__place-preview, .mobile-import-library__place-photos) {
    margin-left: 48px !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body :is(.mobile-import-library__place-hit, .mobile-import-library__place-empty, .mobile-import-library__place-photos-label) :is(b, span, em, p, strong) {
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-body .mobile-import-library__place-hit b {
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
}

/* ------------------------------------------------------------ disconnect confirm */
/* Disconnect opens the existing source sheet (Keep Source / Remove All
   Posts). Its buttons were white with white labels in dark and Glass, so the
   confirm read as two blank bars. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-source-sheet] .mobile-import-library__source-sheet-actions button {
    --ca-sheet-btn: #ffffff;
    --ca-sheet-ink: #0f172a;
    --ca-sheet-line: #e3e6eb;
    --ca-sheet-bad: #b42318;
    border: 1px solid var(--ca-sheet-line) !important;
    background: var(--ca-sheet-btn) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-theme="dark"] body #mobile-import-library:not(#nca) [data-mobile-import-library-source-sheet] .mobile-import-library__source-sheet-actions button {
    --ca-sheet-btn: #232326;
    --ca-sheet-ink: #f4f4f5;
    --ca-sheet-line: #34343a;
    --ca-sheet-bad: #fca5a5;
}
html[data-page-color] body #mobile-import-library:not(#nca) [data-mobile-import-library-source-sheet] .mobile-import-library__source-sheet-actions button {
    --ca-sheet-btn: var(--pc-card);
    --ca-sheet-ink: var(--pc-ink);
    --ca-sheet-line: var(--pc-line);
    --ca-sheet-bad: var(--pc-bad);
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-source-sheet] .mobile-import-library__source-sheet-actions button :is(i, span) {
    color: var(--ca-sheet-ink) !important;
    -webkit-text-fill-color: var(--ca-sheet-ink) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-source-sheet] .mobile-import-library__source-sheet-actions button.is-danger :is(i, span) {
    color: var(--ca-sheet-bad) !important;
    -webkit-text-fill-color: var(--ca-sheet-bad) !important;
}

/* ------------------------------------------------------------ import progress
   The live line under a platform while its import runs (importProgressView in
   mobile-import-library.js): what the scrape found, how far the import is,
   and a thin bar. Stays on the row after it ends as the result. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress {
    display: grid;
    gap: 6px;
    margin: 0 0 0 48px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress p {
    margin: 0 !important;
    color: var(--ca-ink) !important;
    -webkit-text-fill-color: var(--ca-ink) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    line-height: 1.35 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress p.nca-progress__detail {
    margin-top: -3px !important;
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
    font-size: 12px !important;
    font-weight: 450 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress:is(.is-empty) p {
    color: var(--ca-dim) !important;
    -webkit-text-fill-color: var(--ca-dim) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress:is(.is-error, .is-stalled) p {
    color: var(--ca-bad) !important;
    -webkit-text-fill-color: var(--ca-bad) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress:is(.is-done) p {
    color: var(--ca-good) !important;
    -webkit-text-fill-color: var(--ca-good) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress__bar {
    position: relative;
    display: block;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--ca-line) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress__bar i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 3px;
    background: var(--ca-info) !important;
    transition: width 0.4s ease;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress.is-done .nca-progress__bar i {
    background: var(--ca-good) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress__bar.is-indeterminate i {
    animation: nca-progress-slide 1.2s ease-in-out infinite;
}
@keyframes nca-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
    html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress__bar.is-indeterminate i {
        animation: none;
        width: 100% !important;
        opacity: 0.35;
    }
}

/* Result pills beside the platform name. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status.is-done {
    background: var(--ca-good-bg) !important;
    color: var(--ca-good) !important;
    -webkit-text-fill-color: var(--ca-good) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status.is-stalled,
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status.is-reconnect {
    background: var(--ca-warn-bg) !important;
    color: var(--ca-bad) !important;
    -webkit-text-fill-color: var(--ca-bad) !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-status.is-importing {
    font-variant-numeric: tabular-nums;
}

/* Row cleanup: one button height everywhere, Import is the primary action
   on a handle, Disconnect a quiet red word beside it. */
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn.is-small {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__acts .nca-btn.is-primary {
    min-width: 76px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-btn.is-danger.is-text {
    border-color: transparent !important;
    background: transparent !important;
    padding: 0 4px !important;
    font-weight: 500 !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src {
    padding: 10px 10px 10px 12px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__text {
    gap: 2px;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__text b {
    font-size: 14px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-src__text em {
    font-size: 12px !important;
}
html body #mobile-import-library:not(#nca) [data-mobile-import-library-accounts] .nca-progress__retry {
    justify-self: start;
    margin-top: 2px !important;
}