.settingsPage { max-width:560px; gap:16px; padding-top:30px; padding-bottom:max(90px, env(safe-area-inset-bottom)); }
.settingsPage header { padding:4px 5px 14px; }
.backLink { display:inline-block; margin-bottom:22px; color:#c8eddb; font-size:14px; font-weight:650; text-decoration:none; }
.settingsPage h1 { margin:6px 0 8px; }
.settingsIntro { color:#c2d9d2; font-size:13px; line-height:1.5; }
.settingsCard { display:grid; gap:4px; padding:21px; border-radius:20px; background:#fff; border:1px solid #dce6df; box-shadow:0 8px 28px #173d3710; min-width:0; }
.settingsCardHead { margin-bottom:12px; }.settingsCardHead .eyebrow { color:#5d806d; }.settingsCardHead h2 { color:#173e38; font-size:21px; margin-top:5px; }
.settingRow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #edf1ee; cursor:pointer; }
.settingsCardHead + .settingRow { border-top:0; padding-top:4px; }
.settingColumn { display:grid; justify-content:stretch; gap:11px; cursor:default; }
.settingText { display:grid; gap:3px; min-width:0; }
.settingText strong { color:#1f3531; font-size:15px; }
.settingText small { color:#6b7d73; font-size:12px; line-height:1.4; }
.unavailable { cursor:default; }.unavailable strong { color:#8a9993; }.unavailable small { color:#9a5b1e; }
.switch { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 auto; width:50px; height:30px; margin:0; border-radius:15px; background:#cfdbd4; cursor:pointer; transition:background .15s; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0b1f1c40; transition:transform .15s; }
.switch:checked { background:#17684e; }.switch:checked::after { transform:translateX(20px); }
.switch:disabled { opacity:.45; cursor:default; }
.switch:focus-visible { outline:3px solid #d49534; outline-offset:3px; }
.segmented { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; padding:4px; border-radius:13px; background:#edf3ef; }
.segment { position:relative; display:grid; place-items:center; min-height:44px; padding:6px 4px; border-radius:10px; color:#40584f; font-weight:650; text-align:center; cursor:pointer; }
.segment input { position:absolute; opacity:0; pointer-events:none; }
.segment.size-normal { font-size:13px; }.segment.size-large { font-size:15px; }.segment.size-xlarge { font-size:17px; }
.segment:has(input:checked) { background:#fff; color:#17684e; font-weight:800; box-shadow:0 1px 4px #0b1f1c24; }
.segment:has(input:focus-visible) { outline:3px solid #d49534; outline-offset:1px; }
.settingSelect { width:100%; min-height:44px; padding:0 12px; border:1px solid #cfdcd5; border-radius:11px; background:#fff; color:#1f3531; font:inherit; font-weight:650; }
.settingSelect:focus-visible { outline:3px solid #d49534; outline-offset:2px; }
.settingsReset { display:grid; gap:8px; justify-items:center; padding:6px 5px; }
.settingsReset button { width:100%; background:#fff; color:#8a3a22; border-color:#ecc9bd; }
.settingsReset p { color:var(--page-ink); font-size:12px; text-align:center; }
.savedHint { position:fixed; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:10; padding:10px 18px; border-radius:999px; background:#163c37; color:#fff; font-size:14px; font-weight:650; box-shadow:0 10px 30px #0b1f1c40; }
.dependentOff .settingText { opacity:.55; }
#callingNumbers { color:#304d43; gap:14px; }
#callingNumbers p { margin:0; font-size:13px; line-height:1.6; }
.callingNumberForm { display:grid; gap:12px; }
.callingNumberForm label { display:grid; gap:6px; font-size:13px; font-weight:650; }
.numberHelp, .numberPeriod { color:#62776d; }
.numberHealthNote { padding:14px; border-radius:12px; background:#edf3ef; }
.numberHealthNote strong { display:block; margin-bottom:5px; font-size:14px; }
.callingNumberList { display:grid; gap:14px; }
.callingNumberCard { border:1px solid #d4e1d8; border-radius:14px; padding:16px; display:grid; gap:10px; }
.callingNumberCard h3 { margin:0; font-size:20px; overflow-wrap:anywhere; }
.numberState { font-weight:650; overflow-wrap:anywhere; }
.healthEstimate { justify-self:start; margin:0; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:750; }
.healthEstimate.steady { background:#e5f6ec; color:#17684e; }
.healthEstimate.mixed { background:#fff4df; color:#8a5a14; }
.healthEstimate.wearing { background:#fdecea; color:#8a3328; }
.healthEstimate.early { background:#eef2ef; color:#5d6f66; }
.numberMetrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; }
.numberMetrics dt { font-size:12px; color:#62776d; }
.numberMetrics dd { margin:4px 0 0; font-size:24px; font-weight:750; }
.numberActions { display:flex; flex-wrap:wrap; gap:8px; }
.numberActions button { flex:1 1 140px; min-height:44px; }
.spamRemoval { display:grid; gap:10px; margin-top:4px; padding-top:8px; border-top:1px solid #e4eee8; }
.spamRemoval summary { min-height:44px; display:flex; align-items:center; font-weight:750; color:#17684e; cursor:pointer; }
.spamRemoval button { justify-self:start; min-height:44px; padding:0 14px; }
.spamLinks { display:flex; flex-wrap:wrap; gap:8px; }
.spamLinks a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:12px; background:#edf3ef; color:#17684e; font-size:14px; font-weight:750; text-decoration:none; }
.spamHelp a { background:#f4f7f5; color:#304d43; }
#callingNumberStatus { overflow-wrap:anywhere; }
html[data-theme="dark"] #callingNumbers { color:#d8e7df; }
html[data-theme="dark"] .numberHealthNote { background:#213e35; }
html[data-theme="dark"] .callingNumberCard { border-color:#466357; }
html[data-theme="dark"] .spamRemoval { border-top-color:#466357; }
html[data-theme="dark"] .spamRemoval summary, html[data-theme="dark"] .spamLinks a { color:#d8f2e1; }
html[data-theme="dark"] .spamLinks a { background:#213e35; }
html[data-theme="dark"] .healthEstimate.steady { background:#1d4334; color:#d8f2e1; }
html[data-theme="dark"] .healthEstimate.mixed { background:#3a3120; color:#f3e2c0; }
html[data-theme="dark"] .healthEstimate.wearing { background:#3d2622; color:#f6d2cb; }
html[data-theme="dark"] .healthEstimate.early { background:#2a342e; color:#c5d5cb; }
html[data-theme="dark"] .numberHelp, html[data-theme="dark"] .numberPeriod, html[data-theme="dark"] .numberMetrics dt { color:#a9c2b5; }