/* Main plugin page only. Shared wizard and floating-widget styles stay independent. */
.smartsync-settings { --settings-ink: #192e4a; --settings-muted: #4d6079; --settings-blue: #1761c5; --settings-line: #e8edf3; margin-block: 28px 48px; padding-inline: 0 20px; color: var(--settings-ink); }
.smartsync-settings .settings-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.smartsync-settings .settings-brand { display: flex; align-items: center; gap: 12px; }
.smartsync-settings .settings-brand-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, #2678d9, #164fab); color: #fff; box-shadow: 0 4px 10px #1761c526, inset 0 1px 0 #ffffff38; }
.smartsync-settings .settings-brand-icon { width: 25px; height: 25px; }
.smartsync-settings h1 { margin: 0; padding: 0; color: var(--settings-ink); font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; }
.smartsync-settings .settings-connection-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 20px; background: #e9edf3; color: #52657b; font-size: 12px; font-weight: 500; }
.smartsync-settings .settings-connection-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a3adba; }
.smartsync-settings .settings-connection-badge[data-connected="true"] { background: #e4f4ec; color: #216b4d; }
.smartsync-settings .settings-connection-badge[data-connected="true"]::before { background: #39a477; }
.smartsync-settings .settings-tabs { display: inline-flex; width: fit-content; max-width: 100%; gap: 4px; margin: 0 0 24px; padding: 4px; border: 0; border-radius: 11px; background: #e5ebf3; }
.smartsync-settings .settings-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 24px; }
.smartsync-settings .settings-navigation .settings-tabs { margin: 0; }
.smartsync-settings .settings-destination { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: min(100%, 480px); color: var(--settings-muted); font-size: 13px; line-height: 1.6; }
.smartsync-settings .settings-destination-icon { flex: 0 0 17px; width: 17px; height: 17px; color: #6485ac; }
.smartsync-settings .settings-destination-provider { color: #35577f; font-weight: 600; }
.smartsync-settings .settings-destination-divider { color: #b0bdcd; }
.smartsync-settings .settings-destination-storage { min-width: 0; overflow-wrap: anywhere; }
.smartsync-settings .settings-destination a { color: var(--settings-blue); text-underline-offset: 3px; }
.smartsync-settings .settings-tabs .tab-button { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--settings-muted); font-size: 13px; font-weight: 500; box-shadow: none; transition: color .18s, background-color .18s, box-shadow .18s; }
.smartsync-settings .settings-tabs .tab-button:hover { color: var(--settings-ink); background: #f0f4f9; }
.smartsync-settings .settings-tabs .tab-button.active { color: #1a5bb2; background: #fff; box-shadow: 0 1px 5px #203b6014; }
.smartsync-settings .settings-tab-icon { width: 15px; height: 15px; flex-shrink: 0; }
.smartsync-settings .settings-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.smartsync-settings .settings-card { min-width: 0; padding: 24px; border: 1px solid #dfe7f1; border-radius: 14px; background: #fff; box-shadow: 0 4px 18px #173b6806; }
.smartsync-settings .settings-overview-grid { align-items: stretch; }
.smartsync-settings .settings-connection-card { background: linear-gradient(135deg, #f0f6ff, #fff 68%); }
.smartsync-settings .settings-usage-card { background: linear-gradient(135deg, #f4fbf9, #fff 65%); }
.smartsync-settings .settings-delivery-card { background: linear-gradient(150deg, #f4f8ff, #fff 60%); }
.smartsync-settings .settings-sync-card { background: linear-gradient(150deg, #f5fbfa, #fff 55%); }
.smartsync-settings .settings-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.smartsync-settings h2 { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; color: var(--settings-ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.smartsync-settings .settings-section-icon { width: 19px; height: 19px; flex-shrink: 0; color: #3878c3; }
.smartsync-settings :is(.settings-usage-card,.settings-sync-card) .settings-section-icon { color: #288675; }
.smartsync-settings .settings-action-icon { display: block; flex: 0 0 16px; width: 16px; height: 16px; stroke-width: 1.8; }
.smartsync-settings #stop-all-processes .settings-action-icon path { fill: currentColor; stroke: none; }
.smartsync-settings #fetch-analytics-button { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; line-height: 1.4; }
.smartsync-settings #fetch-analytics-button:disabled { color: var(--settings-muted); cursor: wait; text-decoration: none; }
.smartsync-settings #fetch-analytics-button.is-loading .settings-action-icon { animation: settings-usage-spin 1.4s linear infinite; }
.smartsync-settings .settings-text-link { display: inline; flex-shrink: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--settings-blue); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; box-shadow: none; cursor: pointer; }
.smartsync-settings .settings-text-link:hover { color: #124f9f; text-decoration: underline; text-underline-offset: 3px; }
.smartsync-settings .settings-provider-title { margin: 0 0 20px; color: #173b68; font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.6px; }
.smartsync-settings .settings-connection-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; margin: 0; }
.smartsync-settings .settings-connection-details .settings-delivery-url { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #e1eaf5; }
.smartsync-settings dt { margin-bottom: 5px; color: var(--settings-muted); font-size: 13px; line-height: 1.4; }
.smartsync-settings dd { margin: 0; color: var(--settings-ink); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.smartsync-settings .settings-usage-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 6px 0 20px; }
.smartsync-settings .settings-usage-metrics > div { min-width: 0; padding: 14px 16px; border-radius: 10px; background: #edf4ff; }
.smartsync-settings .settings-usage-metrics > div:nth-child(2) { background: #eaf6f2; }
.smartsync-settings .settings-usage-metrics dt { color: #4e6e99; font-size: 12px; font-weight: 500; }
.smartsync-settings .settings-usage-metrics > div:nth-child(2) dt { color: #4a7a6f; }
.smartsync-settings .settings-usage-metrics dd { min-height: 39px; color: #255da6; font-size: 30px; font-weight: 600; letter-spacing: -.7px; line-height: 1.3; }
.smartsync-settings .settings-usage-metrics > div:nth-child(2) dd { color: #257b68; }
.smartsync-settings .settings-usage-metrics dd.settings-metric-loading { position: relative; box-sizing: border-box; padding-top: 3px; font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 16px; }
.smartsync-settings .settings-metric-loading::after { content: ''; display: block; width: 72%; max-width: 120px; height: 12px; margin-top: 6px; border-radius: 4px; background: linear-gradient(100deg, #255da614 20%, #ffffffb3 45%, #255da614 70%); background-size: 240% 100%; animation: settings-usage-shimmer 1.8s ease-in-out infinite; }
.smartsync-settings .settings-usage-metrics > div:nth-child(2) .settings-metric-loading::after { background-image: linear-gradient(100deg, #257b6817 20%, #ffffffb3 45%, #257b6817 70%); }
@keyframes settings-usage-spin { to { transform: rotate(360deg); } }
@keyframes settings-usage-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.smartsync-settings .settings-help { margin: 6px 0 0; color: var(--settings-muted); font-size: 13px; line-height: 1.65; font-style: normal; overflow-wrap: anywhere; }
.smartsync-settings .settings-empty-title { margin: 0 0 8px; color: var(--settings-ink); font-size: 20px; font-weight: 600; }
.smartsync-settings .settings-empty-title + .settings-help { margin-bottom: 20px; }
.smartsync-settings .settings-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 0 0 22px; }
.smartsync-settings .settings-toggle-row + .settings-toggle-row { padding-top: 22px; border-top: 1px solid var(--settings-line); }
.smartsync-settings .settings-toggle-row:last-child { padding-bottom: 0; }
.smartsync-settings .settings-toggle-row label { display: block; margin: 0; color: #293b54; font-size: 14px; font-weight: 500; line-height: 1.6; }
.smartsync-settings input.settings-toggle { appearance: none; position: relative; display: block; flex: 0 0 42px; width: 42px; min-width: 42px; height: 24px; min-height: 24px; margin: 2px 0 0; padding: 0; border: 0; border-radius: 20px; background: #c5cdd8; box-shadow: none; cursor: pointer; transition: background-color .2s; }
.smartsync-settings input.settings-toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #172b4d26; transform: translateX(0); transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.smartsync-settings input.settings-toggle:checked { background: var(--settings-blue); }
.smartsync-settings input.settings-toggle:checked::before { content: ''; transform: translateX(18px); }
.smartsync-settings input.settings-toggle:disabled { opacity: .5; cursor: wait; }
.smartsync-settings .smartsync-upload-mode { margin-bottom: 18px; }
.smartsync-settings .smartsync-upload-mode label { margin-bottom: 8px; color: #293b54; font-size: 13px; font-weight: 500; }
.smartsync-settings .settings-mode-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.smartsync-settings .settings-mode-picker legend { margin: 0 0 8px; padding: 0; color: #293b54; font-size: 13px; font-weight: 500; }
.smartsync-settings .settings-mode-options { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px; padding: 4px; border-radius: 10px; background: #eaf0f7; }
.smartsync-settings .settings-mode-options .settings-mode-option { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.smartsync-settings .settings-mode-option input { position: absolute; width: 1px; min-width: 0; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.smartsync-settings .settings-mode-option > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; gap: 1px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; color: #65758b; text-align: center; line-height: 1.4; transition: background-color .18s, color .18s, box-shadow .18s; }
.smartsync-settings .settings-mode-option strong { font-size: 13px; font-weight: 500; }
.smartsync-settings .settings-mode-option small { color: #52657f; font-size: 12px; font-weight: 400; }
.smartsync-settings .settings-mode-option:hover > span { background: #f4f7fb; }
.smartsync-settings .settings-mode-option input:checked + span { background: #fff; color: #1a5bb2; box-shadow: 0 1px 5px #203b6014; }
.smartsync-settings .settings-mode-option input:focus-visible + span { border-color: #8da8ca; outline: none; box-shadow: 0 0 0 3px rgb(23 97 197 / 10%); }
.smartsync-settings .settings-mode-picker:disabled { opacity: .6; }
.smartsync-settings .settings-mode-picker:disabled label { cursor: wait; }
.smartsync-settings .settings-mode-picker:disabled label:hover > span { background: transparent; }
.smartsync-settings .settings-mode-picker:disabled input:checked + span { background: #f8fafc; }
.smartsync-settings :is(select, input[type="text"], input[type="url"], input[type="password"]) { width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background-color: #f2f5f9; color: #24364e; box-shadow: none; font-size: 14px; line-height: 1.5; outline: none; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.smartsync-settings select { padding-inline-end: 32px; }
.smartsync-settings :is(select, input[type="text"], input[type="url"], input[type="password"]):enabled:hover { background-color: #ebf0f6; }
.smartsync-settings :is(select, input[type="text"], input[type="url"], input[type="password"]):focus { border-color: #8da8ca; outline: none; box-shadow: 0 0 0 3px rgb(23 97 197 / 7%); background-color: #fff; }
.smartsync-settings :is(select, input[type="text"], input[type="url"], input[type="password"]):focus-visible { border-color: #507caf; outline: none; box-shadow: 0 0 0 3px rgb(23 97 197 / 10%); }
.smartsync-settings select:disabled { color: #79879a; background-color: #f5f7fa; cursor: wait; }
.smartsync-settings .settings-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; gap: 8px; margin: 0; padding: 9px 15px; border: 1px solid transparent; border-radius: 8px; background-color: #195fb9; background-image: linear-gradient(180deg, #ffffff12, #ffffff00); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; box-shadow: 0 3px 8px #1761c51c; transform: none; cursor: pointer; transition: background-color .18s, box-shadow .18s; }
.smartsync-settings .settings-button:hover { background-color: #124f9f; background-image: linear-gradient(180deg, #ffffff12, #ffffff00); box-shadow: 0 4px 12px #1761c52b; transform: none; }
.smartsync-settings .settings-button:active { transform: none; }
.smartsync-settings .settings-button-secondary { background: #f0f4f8; color: #344761; box-shadow: none; }
.smartsync-settings .settings-button-secondary:hover { background: #e5ecf4; }
.smartsync-settings .settings-button-danger { min-height: 34px; padding: 6px 11px; background: #fff4f2; color: #a13c31; font-weight: 500; box-shadow: none; }
.smartsync-settings .settings-button-danger:hover { background: #ffe8e4; }
.smartsync-settings :is(.settings-button-secondary,.settings-button-danger):hover { box-shadow: none; }
.smartsync-settings :is(.settings-button, .settings-text-link, .tab-button, .settings-toggle, summary, #clear-logs-button):focus-visible { outline: 2px solid #7096c6; outline-offset: 3px; box-shadow: none; }
.smartsync-settings .settings-disclosure { margin-top: 18px; color: var(--settings-muted); }
.smartsync-settings .settings-disclosure summary, .smartsync-settings .settings-maintenance summary { width: fit-content; color: var(--settings-muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.smartsync-settings .settings-disclosure summary:hover { color: var(--settings-blue); }
.smartsync-settings .settings-disclosure[open] > summary { margin-bottom: 12px; }
.smartsync-settings .settings-restore { padding-top: 16px; border-top: 1px solid var(--settings-line); }
.smartsync-settings .settings-restore .settings-button, .smartsync-settings .settings-maintenance .settings-button { margin-top: 12px; }
.smartsync-settings .settings-maintenance { margin-top: 20px; }
.smartsync-settings .settings-activity { margin-top: 20px; }
.smartsync-settings .settings-activity-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.smartsync-settings .settings-activity-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.smartsync-settings .settings-activity-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.smartsync-settings .settings-activity-actions .settings-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; margin: 0; padding: 7px 11px; font-size: 13px; line-height: 1.4; }
.smartsync-settings #clear-logs-button { color: #50647c; background: #f2f5f9; border: 1px solid transparent; box-shadow: none; }
.smartsync-settings #clear-logs-button:hover { color: #244975; background: #e8eef6; transform: none; }
.smartsync-settings #settings-activity-details > summary { padding-block: 4px; font-size: 14px; font-weight: 500; }
.smartsync-settings .settings-activity-status { padding: 3px 8px; border-radius: 5px; background: #eff3f8; color: var(--settings-muted); font-size: 12px; font-weight: 500; }
.smartsync-settings .settings-activity-status[data-state="processing"] { background: #edf4ff; color: var(--settings-blue); }
.smartsync-settings .settings-activity-status[data-state="busy"] { background: #fff4df; color: #8b6126; }
.smartsync-settings .settings-activity-status[data-state="failed"], .smartsync-settings .settings-activity-status[data-state="unknown"] { background: #fff0ec; color: #a13c31; }
.smartsync-settings .settings-activity-status[data-state="completed"] { background: #eaf6ef; color: #287452; }
.smartsync-settings #settings-progress-slot:empty { display: none; }
.smartsync-settings .smartsync-progress-container { margin: 18px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
.smartsync-settings .smartsync-progress-bar { height: 8px; margin-bottom: 0; background: #eaf0f7; }
.smartsync-settings .smartsync-progress-bar-inner { background: linear-gradient(90deg, #2679d9, #195ebd); }
.smartsync-settings .smartsync-progress-text { align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; color: var(--settings-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.smartsync-settings .smartsync-progress-percentage { color: #205fac; font-size: 20px; font-weight: 600; line-height: 1.3; }
.smartsync-settings .smartsync-progress-files { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.smartsync-settings .smartsync-progress-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; background: #e9f0fc; color: #3874be; }
.smartsync-settings .smartsync-progress-icon svg { display: block; flex-shrink: 0; }
.smartsync-settings .smartsync-progress-files .smartsync-progress-icon { flex-basis: 16px; width: 16px; height: 18px; background: none; }
.smartsync-settings .smartsync-progress-files svg { width: 16px; height: 16px; }
.smartsync-settings .smartsync-progress-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: #f5f8fc; }
.smartsync-settings .smartsync-progress-stat { display: flex; min-width: 0; align-items: center; gap: 11px; text-align: start; }
.smartsync-settings .smartsync-progress-stat-copy { min-width: 0; }
.smartsync-settings .smartsync-progress-stat:last-child .smartsync-progress-icon { background: #e5f3ef; color: #33806e; }
.smartsync-settings .smartsync-progress-stat:first-child { display: none; }
.smartsync-settings .smartsync-progress-stat-value { display: block; color: #284867; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
.smartsync-settings .smartsync-progress-stat-label { margin-top: 2px; color: var(--settings-muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
@media (max-width: 480px) { .smartsync-settings .smartsync-progress-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.smartsync-settings #sync-log-container { height: auto; max-height: 300px; min-height: 0; margin: 12px 0 0; padding: 6px; border: 1px solid #e8edf4; border-radius: 11px; background: #f7f9fc; box-shadow: none; overflow: auto; scrollbar-width: thin; font-family: inherit; }
.smartsync-settings #sync-log-container p { position: relative; display: grid; grid-template-columns: 5px 108px minmax(0, 1fr); align-items: start; column-gap: 12px; margin: 0; padding: 12px; border: 0; border-radius: 7px; background: transparent; color: #41546c; font-family: inherit; font-size: 14px; line-height: 22px; }
.smartsync-settings #sync-log-container p + p { margin-top: 3px; }
.smartsync-settings #sync-log-container p::before { content: ''; grid-column: 1; grid-row: 1; width: 5px; height: 5px; margin-top: 8.5px; border-radius: 50%; background: #97a8bd; }
.smartsync-settings #sync-log-container p.info { background: #edf3fc; color: #2f6099; }
.smartsync-settings #sync-log-container p.info::before { background: #4c85cd; }
.smartsync-settings #sync-log-container p.error { background: #fff0ee; color: #a33d32; }
.smartsync-settings #sync-log-container p.error::before { background: #c55145; }
.smartsync-settings #sync-log-container p.success { background: #eaf5ef; color: #2b7051; }
.smartsync-settings #sync-log-container p.success::before { background: #38986b; }
.smartsync-settings #sync-log-container p.warning { background: #fff6e5; color: #8c601e; }
.smartsync-settings #sync-log-container p.warning::before { background: #b77a20; }
.smartsync-settings #sync-log-container .log-timestamp { grid-column: 2; grid-row: 1; color: #52657b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.smartsync-settings #sync-log-container .log-message { grid-column: 3; grid-row: 1; min-width: 0; line-height: 22px; overflow-wrap: anywhere; white-space: pre-wrap; }
.smartsync-settings #sync-log-container #sync-log-placeholder { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 16px; color: #52657b; text-align: center; font-size: 13px; }
.smartsync-settings #sync-log-container #sync-log-placeholder::before { display: none; }
@media (max-width: 600px) { .smartsync-settings .settings-activity-actions .settings-button { min-height: 44px; } .smartsync-settings #sync-log-container p { grid-template-columns: 5px minmax(0, 1fr); row-gap: 2px; } .smartsync-settings #sync-log-container .log-message { grid-column: 2; grid-row: 2; } }
@media (max-width: 900px) { .smartsync-settings .settings-panel-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .smartsync-settings { margin-top: 18px; padding-inline-end: 10px; } .smartsync-settings .settings-page-header { margin-bottom: 20px; } .smartsync-settings h1 { font-size: 26px; } .smartsync-settings .settings-card { padding: 20px; } .smartsync-settings .settings-card-heading { flex-wrap: wrap; margin-bottom: 20px; } .smartsync-settings .settings-usage-metrics dd { font-size: 26px; } .smartsync-settings .settings-button { min-height: 44px; } .smartsync-settings .settings-toggle-row { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .smartsync-settings *, .smartsync-settings *::before, .smartsync-settings *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .smartsync-settings .settings-metric-loading::after { background: Canvas; border: 1px solid GrayText; } }
@media (prefers-reduced-motion: reduce) { .smartsync-settings .settings-button:hover { transform: none; } }
@media (forced-colors: active) { .smartsync-settings .settings-tabs .tab-button.active { background: Highlight; color: HighlightText; forced-color-adjust: none; } }
@media (forced-colors: active) { .smartsync-settings .settings-mode-option > span { border-color: ButtonText; } .smartsync-settings .settings-mode-option input:checked + span { background: Highlight; color: HighlightText; forced-color-adjust: none; } .smartsync-settings .settings-mode-option input:checked + span small { color: HighlightText; } .smartsync-settings .settings-mode-option input:focus-visible + span { outline: 2px solid Highlight; outline-offset: 2px; } }
@media (forced-colors: active) { .smartsync-settings :is(select, input[type="text"], input[type="url"], input[type="password"]):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } .smartsync-settings input.settings-toggle { border: 1px solid ButtonText; background: Canvas; } .smartsync-settings input.settings-toggle::before { background: ButtonText; } .smartsync-settings input.settings-toggle:checked { background: Highlight; } .smartsync-settings input.settings-toggle:checked::before { background: HighlightText; } }