:root{
  /* Channels: every wash, hairline and shadow below is one of these plus an alpha,
     so the dark block flips the file by redefining the triplets. theme.js owns
     color-scheme, so it must not be pinned here. */
  --ink-rgb:33,28,29;
  --paper-rgb:255,255,255;
  --shadow-rgb:41,29,32;
  --red-rgb:230,0,35;
  --ok-rgb:32,160,90;

  --red:rgb(var(--red-rgb));
  --red-dark:#c9001f;
  --on-red:#fff;
  --ink:rgb(var(--ink-rgb));
  --ink-2:#514a4c;
  --muted:#7f7779;
  --muted-2:#aaa1a4;
  --muted-3:#a0989a;
  --line:#e9e5e6;
  --line-strong:#ddd6d8;
  --line-hover:#cfc6c9;
  --line-hover-2:#cec6c8;
  --mark-line:#d7d0d2;
  --canvas:#f7f5f5;
  --soft:#f7f5f5;
  --surface:rgb(var(--paper-rgb));
  --field:rgb(var(--paper-rgb));
  --thumb:#fff;
  --tint:#fcfbfb;
  --tint-2:#fdfbfb;
  --chip:#f3eff0;
  --chip-2:#f1eded;
  --chip-ink:#766e70;
  --red-wash:#fff0f2;
  --red-wash-soft:#fffafa;
  --red-wash-sel:#fff7f8;
  --red-chip:#ffe6ea;
  --red-chip-2:#ffe3e7;
  --ok:#16834a;
  --ok-dot:rgb(var(--ok-rgb));
  --disabled:#d9d4d5;
  --disabled-ink:#958d8f;
  --spin-ring:#edc7cd;
  --track:#cfc9cb;
  --sh-panel:0 16px 44px rgba(var(--shadow-rgb),.055);
  --sh-bar:0 -12px 24px rgba(var(--shadow-rgb),.06);
  --sh-thumb:0 2px 7px rgba(var(--shadow-rgb),.22);
  --sh-button:0 8px 20px rgba(var(--red-rgb),.19);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Dark. theme.js resolves "follow the device" into this attribute before the first paint. */
:root[data-theme="dark"]{
  --ink-rgb:233,238,244;
  /* The paper channel becomes the card surface, so translucent "white" chrome
     (the current-choice pill) tints with the card instead of glowing. */
  --paper-rgb:20,32,47;
  --shadow-rgb:0,0,0;
  --red-rgb:255,59,84;
  --ok-rgb:61,201,140;

  /* The save button keeps white text, so its hover darkens instead of lightening. */
  --red-dark:#e12645;
  --ink-2:rgba(var(--ink-rgb),.82);
  --muted:#97A3B2;
  --muted-2:rgba(var(--ink-rgb),.45);
  --muted-3:rgba(var(--ink-rgb),.45);
  --line:rgba(var(--ink-rgb),.20);
  --line-strong:rgba(var(--ink-rgb),.28);
  --line-hover:rgba(var(--ink-rgb),.38);
  --line-hover-2:rgba(var(--ink-rgb),.38);
  --mark-line:rgba(var(--ink-rgb),.34);
  --canvas:#0C1522;
  --soft:#1A2738;
  --surface:#14202F;
  /* Form controls and rows read as sunk into the panel rather than lifted off it. */
  --field:#0C1522;
  --thumb:#E9EEF4;
  --tint:#1A2738;
  --tint-2:#1A2738;
  --chip:#1A2738;
  --chip-2:#1A2738;
  --chip-ink:#97A3B2;
  --red-wash:rgba(var(--red-rgb),.16);
  --red-wash-soft:rgba(var(--red-rgb),.08);
  --red-wash-sel:rgba(var(--red-rgb),.12);
  --red-chip:rgba(var(--red-rgb),.22);
  --red-chip-2:rgba(var(--red-rgb),.22);
  --ok:#3DC98C;
  --disabled:#1A2738;
  --disabled-ink:rgba(var(--ink-rgb),.40);
  --spin-ring:rgba(var(--red-rgb),.30);
  --track:rgba(var(--ink-rgb),.22);
  --sh-panel:0 16px 44px rgba(var(--shadow-rgb),.34);
  --sh-bar:0 -12px 24px rgba(var(--shadow-rgb),.40);
  --sh-thumb:0 2px 7px rgba(var(--shadow-rgb),.45);
  --sh-button:0 8px 20px rgba(var(--red-rgb),.24);
}
:root[data-theme="dark"] ::selection{ background:rgba(var(--red-rgb),.28); }
:root[data-theme="dark"] input::placeholder{ color:rgba(var(--ink-rgb),.42); }

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{ margin:0; color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
svg{ width:20px; height:20px; display:block; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.shell{ min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }

.rail{
  position:sticky;
  top:0;
  height:100vh;
  padding:26px 18px 20px;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-inline-end:1px solid var(--line);
}
.brand{ width:151px; height:36px; margin:0 10px 30px; display:flex; align-items:center; text-decoration:none; }
.brand img{ display:block; width:151px; height:auto; }
.back,.navItem{
  display:flex;
  align-items:center;
  gap:11px;
  border-radius:11px;
  color:var(--ink-2);
  text-decoration:none;
  font-size:13.5px;
  font-weight:720;
}
.back{ padding:10px 11px; }
.back:hover{ background:var(--soft); color:var(--ink); }
.back svg{ width:18px; height:18px; }
.settingsNav{ margin-top:30px; }
.navLabel{ margin:0 11px 9px; color:var(--muted-2); font-size:10.5px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.navItem{ position:relative; padding:11px; }
.navItem.active{ background:var(--red-wash); color:var(--red); }
.navItem.active::before{ content:""; position:absolute; inset-block:8px; inset-inline-start:-18px; width:3px; border-radius:0 4px 4px 0; background:var(--red); }
.navItem svg{ width:19px; height:19px; }
.navItem:hover:not(.active){ background:var(--soft); color:var(--ink); }
.railFoot{ margin-top:auto; padding:14px 11px 0; display:flex; align-items:flex-start; gap:9px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; line-height:1.45; }
.railFoot svg{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; }

.main{ min-width:0; padding:50px clamp(28px,5vw,76px) 72px; }
.pageHead{ width:min(920px,100%); margin:0 auto 27px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.eyebrow{ color:var(--red); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
h1{ margin:5px 0 6px; font-size:34px; line-height:1.06; letter-spacing:-1.15px; }
.pageHead p{ margin:0; color:var(--muted); font-size:14.5px; }
.currentPill{ min-height:37px; padding:8px 12px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; background:rgba(var(--paper-rgb),.72); color:var(--muted); font-size:11.5px; white-space:nowrap; }
.currentPill[hidden]{ display:none; }
.currentPill strong{ color:var(--ink); font-size:12px; }
.currentDot{ width:7px; height:7px; border-radius:50%; background:var(--ok-dot); box-shadow:0 0 0 3px rgba(var(--ok-rgb),.11); }

.pageTabs{ display:none; }

.panel{ width:min(920px,100%); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--sh-panel); }
.panel[hidden]{ display:none; }
.panelHead{ padding:25px 27px 22px; display:flex; align-items:flex-start; gap:15px; border-bottom:1px solid var(--line); }
.panelIcon{ width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:var(--red-wash); color:var(--red); }
.panelIcon svg{ width:21px; height:21px; }
.panelCopy h2{ margin:1px 0 4px; font-size:18px; letter-spacing:-.25px; }
.panelCopy p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; }
.picker{ padding:24px 27px 27px; }

.choice{ position:relative; cursor:pointer; }
.choice input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.choiceMark{ width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; border:1.5px solid var(--mark-line); border-radius:50%; color:transparent; background:var(--field); transition:.14s ease; }
.choiceMark svg{ width:13px; height:13px; }
.choice:has(input:focus-visible){ outline:3px solid rgba(var(--red-rgb),.13); outline-offset:2px; }
.choice:has(input:checked) .choiceMark,.choice.isSelected .choiceMark{ border-color:var(--red); background:var(--red); color:var(--on-red); }

.autoChoice{ min-height:78px; padding:15px 17px; display:flex; align-items:center; gap:13px; border:1px solid var(--line-strong); border-radius:15px; background:var(--field); transition:border-color .14s ease,box-shadow .14s ease,background .14s ease; }
.autoChoice:hover{ border-color:var(--line-hover); background:var(--red-wash-soft); }
.autoChoice:has(input:checked),.autoChoice.isSelected{ border-color:rgba(var(--red-rgb),.55); background:var(--red-wash-sel); box-shadow:0 0 0 3px rgba(var(--red-rgb),.06); }
.autoIcon{ width:39px; height:39px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:var(--chip); color:var(--chip-ink); }
.autoChoice:has(input:checked) .autoIcon,.autoChoice.isSelected .autoIcon{ background:var(--red-chip); color:var(--red); }
.autoIcon svg{ width:19px; height:19px; }
.choiceCopy{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.choiceCopy strong{ font-size:14px; }
.choiceCopy small{ color:var(--muted); font-size:12px; line-height:1.35; }
.recommended{ margin-inline-start:auto; padding:5px 9px; border-radius:999px; background:var(--chip-2); color:var(--chip-ink); font-size:10.5px; font-weight:780; }
.autoChoice:has(input:checked) .recommended,.autoChoice.isSelected .recommended{ background:var(--red-chip-2); color:var(--red); }

.divider{ margin:24px 0 15px; display:flex; align-items:center; gap:12px; color:var(--muted-3); font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.divider::before,.divider::after{ content:""; height:1px; flex:1; background:var(--line); }
.localeGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.localeChoice{ min-height:54px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; background:var(--field); transition:border-color .14s ease,background .14s ease,transform .14s ease; }
.localeChoice:hover{ border-color:var(--line-hover-2); background:var(--tint-2); transform:translateY(-1px); }
.localeChoice:has(input:checked),.localeChoice.isSelected{ border-color:rgba(var(--red-rgb),.52); background:var(--red-wash-sel); }
.localeName{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; }
.localeCode{ margin-inline-start:auto; color:var(--muted-2); font-size:9.5px; font-weight:850; letter-spacing:.08em; }
.localeChoice:has(input:checked) .localeCode,.localeChoice.isSelected .localeCode{ color:var(--red); }

.saveBar{ min-height:77px; padding:16px 27px; display:flex; align-items:center; gap:22px; border-top:1px solid var(--line); background:var(--tint); }
.saveInfo{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.refreshNote{ color:var(--muted); font-size:11.5px; }
.status{ min-height:0; color:var(--ink-2); font-size:12px; font-weight:750; }
.status:empty{ display:none; }
.status.saved{ color:var(--ok); }
.status.error{ color:var(--red); }
.status.saving::before{ content:""; display:inline-block; width:11px; height:11px; margin-inline-end:7px; vertical-align:-2px; border:2px solid var(--spin-ring); border-top-color:var(--red); border-radius:50%; animation:spin .65s linear infinite; }
.saveButton{ margin-inline-start:auto; min-width:154px; height:43px; padding:0 18px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; background:var(--red); color:var(--on-red); font:inherit; font-size:13px; font-weight:850; cursor:pointer; box-shadow:var(--sh-button); transition:transform .14s ease,background .14s ease,opacity .14s ease; }
.saveButton svg{ width:16px; height:16px; }
.saveButton:hover:not(:disabled){ transform:translateY(-1px); background:var(--red-dark); }
.saveButton:disabled{ background:var(--disabled); color:var(--disabled-ink); box-shadow:none; cursor:default; }

.preferenceBody{ padding:24px 27px 27px; }
.accountSettings .preferenceBody,.syncSettings .preferenceBody{ display:flex; flex-direction:column; gap:16px; }
.preferenceRow{ min-height:92px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--line-strong); border-radius:16px; background:var(--field); cursor:pointer; transition:border-color .14s ease,background .14s ease,box-shadow .14s ease; }
.preferenceRow:hover{ border-color:var(--line-hover); background:var(--red-wash-soft); }
.preferenceRow:has(input:checked){ border-color:rgba(var(--red-rgb),.48); background:var(--red-wash-sel); box-shadow:0 0 0 3px rgba(var(--red-rgb),.055); }
.preferenceRow:has(input:disabled){ border-color:var(--line); background:var(--tint); box-shadow:none; cursor:default; opacity:.68; }
.preferenceRow:has(input:disabled) .switchTrack{ background:var(--track); }
.preferenceCopy{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.preferenceCopy strong{ font-size:14px; line-height:1.35; }
.preferenceCopy small{ max-width:620px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.switchControl{ position:relative; width:48px; height:28px; flex:0 0 auto; }
.switchControl input{ position:absolute; width:1px; height:1px; opacity:0; }
.switchTrack{ position:absolute; inset:0; border-radius:999px; background:var(--track); box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.06); transition:background .16s ease; }
.switchThumb{ position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:var(--thumb); box-shadow:var(--sh-thumb); transition:transform .18s ease; }
.switchControl input:checked + .switchTrack{ background:var(--red); }
.switchControl input:checked + .switchTrack .switchThumb{ transform:translateX(20px); }
.switchControl input:focus-visible + .switchTrack{ outline:3px solid rgba(var(--red-rgb),.18); outline-offset:3px; }
.accountState{ display:flex; flex-direction:column; gap:14px; }
.accountState[hidden],.accountWarning[hidden]{ display:none; }
.syncSignedIn{ display:flex; flex-direction:column; gap:18px; }
.syncSignedOut .accountOverview{ min-height:104px; }
.accountField{ display:flex; flex-direction:column; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-2); }
.accountField input{ height:43px; padding:0 14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; font-size:14px; font-weight:500; }
.accountField input:focus-visible{ border-color:rgba(var(--red-rgb),.48); outline:3px solid rgba(var(--red-rgb),.14); outline-offset:1px; }
.accountStep{ display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid var(--line-strong); border-radius:16px; background:var(--red-wash-soft); }
.accountHint{ margin:0; color:var(--muted); font-size:12.5px; line-height:1.5; }
.accountRow{ padding:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line-strong); border-radius:16px; background:var(--field); }
.accountOverview{ min-height:88px; padding:20px; border-color:rgba(var(--red-rgb),.28); background:var(--red-wash-soft); }
.accountOverview .accountCopy strong{ font-size:15px; }
.accountDevicesRow{ padding:20px; }
.accountHelpRow{ border-color:var(--line); background:var(--tint); }
.accountDangerRow{ border-color:rgba(var(--red-rgb),.30); background:var(--red-wash-soft); }
.accountCopy{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.accountCopy strong{ font-size:14px; line-height:1.35; }
.accountCopy small{ max-width:620px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.ghostButton{ min-height:38px; padding:0 15px; flex:0 0 auto; border:1px solid var(--line-strong); border-radius:999px; background:var(--field); color:var(--ink); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; transition:border-color .14s ease,background .14s ease; }
.ghostButton:hover{ border-color:var(--line-hover); background:var(--soft); }
.ghostButton:disabled{ opacity:.55; cursor:default; }
.dangerButton{ border-color:rgba(var(--red-rgb),.42); color:var(--red-dark); }
.dangerButton:hover{ border-color:var(--red); background:var(--red-wash); }

.settingsConfirmModal{ position:fixed; inset:0; z-index:1000; display:none; place-items:center; padding:20px; background:rgba(var(--shadow-rgb),.46); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.settingsConfirmModal.on{ display:grid; }
.settingsConfirmSheet{ width:min(430px,100%); display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 36px 110px rgba(var(--shadow-rgb),.30); }
.settingsConfirmIcon{ width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--red-wash); color:var(--red-dark); }
.settingsConfirmIcon svg{ width:22px; height:22px; }
.settingsConfirmCopy{ min-width:0; padding-top:2px; }
.settingsConfirmCopy h2{ margin:0; color:var(--ink); font-size:17px; line-height:1.3; letter-spacing:-.25px; }
.settingsConfirmCopy p{ margin:6px 0 0; color:var(--muted); font-size:13px; font-weight:500; line-height:1.5; white-space:pre-line; }
.settingsConfirmField{ grid-column:1/-1; display:grid; gap:7px; padding-top:3px; color:var(--ink-2); font-size:12px; font-weight:800; }
.settingsConfirmField[hidden]{ display:none; }
.settingsConfirmField input{ width:100%; height:43px; padding:0 13px; border:1px solid var(--line-strong); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; font-size:14px; letter-spacing:.08em; }
.settingsConfirmField input:focus{ border-color:rgba(var(--red-rgb),.56); outline:3px solid var(--red-wash); outline-offset:1px; }
.settingsConfirmActions{ grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; padding-top:5px; }
.settingsConfirmButton{ min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:var(--field); color:var(--ink-2); font:inherit; font-size:13px; font-weight:750; cursor:pointer; }
.settingsConfirmButton:hover{ background:var(--soft); color:var(--ink); }
.settingsConfirmButton.primary{ border-color:var(--red); background:var(--red); color:var(--on-red); box-shadow:var(--sh-button); }
.settingsConfirmButton.primary:hover{ border-color:var(--red-dark); background:var(--red-dark); }
.accountRowStack{ flex-direction:column; align-items:stretch; gap:14px; }
.deviceList{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.deviceList li{ padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--soft); color:var(--ink-2); font-size:12.5px; }
.accountWarning{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; border:1px solid rgba(var(--red-rgb),.34); border-radius:16px; background:var(--red-wash-sel); }
.accountWarning p{ margin:0; color:var(--ink-2); font-size:13px; line-height:1.55; }
.syncControls{ overflow:hidden; border:1px solid var(--line-strong); border-radius:18px; background:var(--field); }
.syncControls > .accountRow,.syncControls > .preferenceRow{ margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.syncControls > * + *{ border-top:1px solid var(--line); }
.syncControls > .preferenceRow:hover{ border-color:var(--line); background:var(--soft); }
.syncControls > .preferenceRow:has(input:checked){ border-color:var(--line); background:color-mix(in srgb,var(--surface) 97%,#e60023 3%); box-shadow:none; }
.syncControls > .preferenceRow:has(input:disabled){ border-color:var(--line); background:var(--tint); box-shadow:none; }
.syncSummary{ min-height:70px; padding-block:15px; background:var(--tint)!important; }
.syncSummary .accountCopy strong{ display:flex; align-items:center; gap:8px; }
.syncSummary .accountCopy strong::before{ content:""; width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--muted-2); box-shadow:0 0 0 4px rgba(var(--ink-rgb),.045); }
.syncSummary.isOn .accountCopy strong::before{ background:var(--ok-dot); box-shadow:0 0 0 4px rgba(var(--ok-rgb),.11); }
.syncSummary.isError .accountCopy strong::before{ background:var(--red); box-shadow:0 0 0 4px rgba(var(--red-rgb),.09); }
.syncMasterRow,.syncSecondaryRow{ min-height:86px; }
.mergeLocalRow{ min-height:82px; padding-block:16px; border-color:var(--line); background:var(--tint); }
.mergeLocalRow[hidden]{ display:none; }
.mergeLocalRow .ghostButton[hidden]{ display:none; }
.advancedRow{ margin-top:14px; padding:12px 16px; border:1px solid var(--line); border-radius:16px; background:var(--tint); }
.advancedRow summary{ cursor:pointer; color:var(--ink-2); font-size:13px; font-weight:600; list-style:none; }
.advancedRow summary::-webkit-details-marker{ display:none; }
.advancedRow summary::before{ content:"›"; display:inline-block; width:14px; color:var(--muted); transition:transform .15s ease; }
.advancedRow[open] summary::before{ transform:rotate(90deg); }
.advancedNote{ margin:10px 0 0 14px; color:var(--muted); font-size:12px; line-height:1.55; }
.advancedControl{ margin:10px 0 2px 14px; display:flex; gap:8px; flex-wrap:wrap; }
.advancedControl input{ flex:1 1 240px; min-width:0; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; font-size:13px; }
.advancedControl input:focus{ outline:none; border-color:var(--red); }
.privacyNote{ margin:15px 4px 0; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11.8px; line-height:1.45; }
.accountSettings .privacyNote,.syncSettings .privacyNote{ margin:2px 6px 0; }
.syncAccess{ display:grid; gap:10px; }
.billingCard{ display:grid; gap:14px; padding:17px 18px; border:1px solid var(--line-strong); border-radius:18px; background:var(--tint); }
.billingCard[hidden],.billingPlans[hidden],.billingPlan[hidden],.billingActions > [hidden]{ display:none; }
.billingCard.isActive{ border-color:color-mix(in srgb,#16803c 34%,var(--line)); border-inline-start:3px solid color-mix(in srgb,#16803c 72%,var(--surface)); background:color-mix(in srgb,var(--surface) 97%,#16803c 3%); }
.freeSyncAnnouncement{ padding:13px 16px; border-color:color-mix(in srgb,#e60023 22%,var(--line)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,#e60023 4%),color-mix(in srgb,var(--surface) 97%,#ffb400 3%)); }
.freeSyncAnnouncement .accountCopy strong{ font-size:14px; }
.freeSyncAnnouncement .billingBadge{ background:rgba(230,0,35,.11); color:#c4001f; }
.billingHead,.billingActions{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.billingBadge{ flex:0 0 auto; padding:5px 9px; border-radius:999px; background:rgba(230,0,35,.1); color:#c4001f; font-size:11px; font-weight:800; }
.billingCard.isActive .billingBadge{ background:rgba(22,128,60,.12); color:#137234; }
.billingPlans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.billingCard.isActive .billingPlans{ grid-template-columns:1fr; }
.billingPlan{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font:inherit; text-align:start; cursor:pointer; transition:border-color .14s ease,background .14s ease,transform .14s ease; }
.billingPlan.featured{ border-color:rgba(230,0,35,.4); box-shadow:inset 0 0 0 1px rgba(230,0,35,.08); }
.billingPlan.current{ border-color:color-mix(in srgb,#16803c 42%,var(--line)); background:color-mix(in srgb,var(--surface) 97%,#16803c 3%); box-shadow:none; }
.billingPlan > span{ display:grid; gap:3px; }.billingPlan small,.billingRetention{ color:var(--muted); font-size:11px; }.billingPlan b{ display:flex; align-items:baseline; gap:3px; white-space:nowrap; font-size:15px; }.billingPlan b small{ font-weight:500; }
.billingPlan:hover{ border-color:rgba(230,0,35,.5); transform:translateY(-1px); }.billingPlan:disabled{ opacity:.55; cursor:wait; transform:none; }.billingPlan.current:disabled{ opacity:1; cursor:default; }
.billingFooter{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.billingTax{ margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.billingActions{ justify-content:flex-end; }.dangerText{ color:#b42318!important; }.billingRetention{ min-width:0; margin:0; line-height:1.5; }
@media(max-width:620px){
  .billingPlans{ grid-template-columns:1fr; }
  .billingHead,.billingFooter{ align-items:flex-start; }
  .billingFooter{ flex-direction:column; }
  .syncControls .syncSummary,.mergeLocalRow{ align-items:stretch; flex-direction:column; }
  .syncControls .syncSummary .ghostButton,.mergeLocalRow .ghostButton{ align-self:flex-start; }
}
.privacyNote svg{ width:15px; height:15px; flex:0 0 auto; }
.preferenceFoot{ min-height:62px; padding:16px 27px; display:flex; align-items:center; border-top:1px solid var(--line); background:var(--tint); }
.preferenceFoot:has(.status:empty){ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

html[dir="rtl"] body{ direction:rtl; text-align:right; }
html[dir="rtl"] .navItem.active::before{ inset-inline-start:-18px; border-radius:4px 0 0 4px; }
html[dir="rtl"] .back svg{ transform:rotate(180deg); }
html[dir="rtl"] .switchControl input:checked + .switchTrack .switchThumb{ transform:translateX(-20px); }

@media(max-width:900px){
  .shell{ display:block; }
  .rail{ position:relative; height:auto; padding:16px 22px; flex-direction:row; align-items:center; border-inline-end:0; border-bottom:1px solid var(--line); }
  .brand{ width:132px; height:30px; margin:0; }
  .brand img{ width:132px; }
  .back{ margin-inline-start:auto; }
  .settingsNav,.railFoot{ display:none; }
  .main{ padding:34px 22px 55px; }
  .pageTabs{ width:min(920px,100%); margin:-7px auto 18px; display:flex; gap:6px; padding:4px; overflow:auto; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
  .pageTabs a{ flex:1 0 auto; padding:9px 13px; border-radius:999px; color:var(--muted); text-align:center; text-decoration:none; font-size:12px; font-weight:780; }
  .pageTabs a.active{ background:var(--red-wash); color:var(--red); }
}
@media(max-width:700px){
  .pageHead{ align-items:flex-start; }
  .currentPill{ display:none; }
  .localeGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .recommended{ display:none; }
}
@media(max-width:500px){
  .rail{ padding:14px 16px; }
  .back span{ display:none; }
  .main{ padding:27px 13px 40px; }
  h1{ font-size:30px; }
  .panelHead,.picker{ padding-inline:18px; }
  .preferenceBody,.preferenceFoot{ padding-inline:18px; }
  .preferenceRow{ align-items:flex-start; gap:16px; }
  .pageTabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:16px; overflow:visible; }
  .pageTabs a{ min-width:0; padding:8px 6px; line-height:1.25; }
  .accountSettings .accountRow,.syncSignedOut .accountRow{ align-items:stretch; flex-direction:column; }
  .accountSettings .accountRow .ghostButton,.accountSettings .accountRow .acctSlot,.syncSignedOut .acctSlot{ align-self:flex-start; }
  .accountSettings .accountOverview .acctSlot,.accountSettings .accountOverview .acctPill,.syncSignedOut .acctSlot,.syncSignedOut .acctPill{ width:100%; }
  .accountSettings .accountOverview .acctPill,.syncSignedOut .acctPill{ justify-content:center; }
  .syncSummary{ gap:12px; }
  .localeGrid{ grid-template-columns:1fr; }
  .saveBar{ position:sticky; bottom:0; z-index:5; padding:15px 18px; align-items:stretch; flex-direction:column; gap:13px; box-shadow:var(--sh-bar); }
  .saveButton{ width:100%; margin:0; }
}
@media(prefers-reduced-motion:reduce){ .status.saving::before{ animation-duration:1.4s; }.localeChoice,.saveButton{ transition:none; } }

@media(max-width:480px){
  .settingsConfirmSheet{ grid-template-columns:40px minmax(0,1fr); padding:17px; border-radius:18px; }
  .settingsConfirmIcon{ width:40px; height:40px; border-radius:13px; }
  .settingsConfirmActions{ display:grid; grid-template-columns:1fr 1fr; }
}