.account-auth { --auth-ink: #f1eee7; --auth-muted: #b9b5ad; display: block; position: relative; isolation: isolate; min-height: calc(100dvh / var(--ui-zoom, 1)); padding: 0; color: var(--auth-ink); background: #0b0c0d url('/assets/auth-forge-background-v3.webp') right center / cover no-repeat; }
.account-auth-header { height: 64px; padding: 0 clamp(24px, 6.4vw, 100px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c49d6033; background: #0b0c0d80; }
.account-auth-header .brand { width: auto; padding: 0; border: 0; margin: 0; gap: 12px; }
.account-auth-header .brand-copy { display: flex; gap: 6px; font-size: 25px; }
.account-auth-header .brand-mark svg { width: 30px; height: 30px; }
.account-auth-about { border: 0; padding: 10px 0 10px 20px; color: var(--auth-muted); background: transparent; cursor: pointer; font: 17px var(--serif); }
.account-auth-aside { position: absolute; top: 32%; left: 9.8%; padding: 0; background: none; }
.account-auth-aside p { white-space: pre-line; font: 400 21px/1.4 var(--serif); color: #c5c0b6; letter-spacing: .02em; }
.account-auth-aside::after { content: ''; display: block; width: 30px; height: 1px; margin-top: 22px; background: #c4a36d; }
.account-auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 64px); padding: 38px 16px 20px; background: none; }
.account-auth-form { width: min(390px, 100%); padding: 20px 34px 24px; border: 1px solid #b3946247; border-radius: 8px; background: #101112ed; box-shadow: 0 18px 65px #0005; }
.account-auth-tabs { display: flex; gap: 0; margin: 0 0 20px; border-bottom: 1px solid #ffffff15; }
.account-auth-tabs button { flex: 1; min-height: 38px; margin: 0 0 -1px; padding: 6px 8px 12px; border: 0; border-bottom: 1px solid transparent; background: none; font: 17px var(--serif); color: var(--auth-muted); cursor: pointer; }
.account-auth-tabs button.active { color: var(--auth-ink); border-bottom-color: #d5ad70; }
.account-auth-title { margin: 0; text-align: center; font: 500 32px/1.15 var(--serif); text-wrap: balance; }
.account-auth-form > .account-auth-subtitle { max-width: 27ch; margin: 8px auto 20px; text-align: center; color: var(--auth-muted); font: 17px/1.35 var(--serif); }
.account-auth-fields .field { margin: 0 0 15px; gap: 6px; }
.account-auth-fields .field label { margin: 0; color: #d1ccc3; font-size: 13px; line-height: 1.35; }
.account-auth-fields input { min-width: 0; width: 100%; min-height: 42px; font-size: 14px; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; border-color: #ffffff20; background: #18191a; color: var(--auth-ink); }
.account-auth-fields input::placeholder { color: #a29e97; }
.account-auth-input { display: flex; align-items: center; position: relative; border: 1px solid #ffffff20; border-radius: 5px; background: #18191a; }
.account-auth-input > svg { flex: none; margin-left: 12px; color: #a29e97; }
.account-auth-input input { border: 0; background: transparent; padding-left: 10px; }
.account-auth-input:focus-within { border-color: #d7b37a; }
.account-auth-reveal { display: grid; place-items: center; flex: none; width: 42px; height: 42px; color: #b9b5ad; background: transparent; border: 0; cursor: pointer; }
.account-auth .account-auth-submit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 0; width: 100%; min-height: 46px; margin: 8px 0 0; border: 1px solid #d7b579; border-radius: 5px; color: #21170c; background: linear-gradient(#d1b27a22, #57381922), #c59d63 url('/assets/auth-bronze-button.webp') center / cover; box-shadow: inset 0 1px 0 #fff6, 0 2px 8px #0005; font: 600 20px var(--serif); transition: filter 150ms ease; }
.account-auth-submit::before { content: ''; }
.account-auth-submit::after { content: '→'; justify-self: start; margin-left: 16px; }
.account-auth .account-auth-submit:hover:not(:disabled) { filter: brightness(1.08); }
.account-auth-divider { display: flex; align-items: center; gap: 14px; margin: 17px 0 12px; color: var(--auth-muted); font: 14px var(--serif); }
.account-auth-divider::before, .account-auth-divider::after { content: ''; flex: 1; height: 1px; background: #ffffff20; }
.account-auth .account-auth-google { width: 100%; min-height: 42px; border: 1px solid #ffffff29; border-radius: 5px; background: transparent; color: #dedad2; font: 16px var(--serif); }
.account-auth-google::before { content: 'G'; margin-right: 12px; font: 600 19px var(--sans); }
.account-auth-link, .account-auth-switch { border: 0; padding: 3px 0; background: none; color: #e0bc83; cursor: pointer; font: inherit; text-underline-offset: 3px; }
.account-auth-fields > .account-auth-link { display: block; margin: -9px 0 9px auto; font-size: 12px; }
.account-auth-form > .account-auth-footer { margin: 20px 0 0; color: var(--auth-muted); font: 14px/1.5 var(--serif); text-align: center; }
.account-auth-switch:hover, .account-auth-link:hover { text-decoration: underline; }
.account-auth-skip { margin: 13px 0 0; padding: 8px; color: #c8c1b6; border: 0; background: #0b0c0d80; border-radius: 4px; font-size: 12px; cursor: pointer; }
.account-auth-note { color: var(--auth-muted); font-size: 13px; }
.account-auth :is(button, a, input):focus-visible { outline: 2px solid #edbf86; outline-offset: 3px; }
.account-auth .notice[hidden] { display: none; margin: 0; }
.account-auth .notice { margin: 12px 0; color: #ffb7ae; font-size: 13px; }
.account-auth-dialog { max-width: min(440px, calc(100% - 32px)); padding: 28px; border: 1px solid #a88a59; border-radius: 8px; background: #101112; color: var(--auth-ink); }
.account-auth-dialog::backdrop { background: #000b; }
.account-auth-dialog h2 { margin-top: 0; font: 30px var(--serif); }
.account-auth-dialog p { line-height: 1.6; color: var(--auth-muted); }
@media (max-width: 900px) { .account-auth-aside { display: none; } .account-auth { background-position: 62% center; } }
@media (max-width: 540px) { .account-auth { background-image: linear-gradient(#080a0bd9, #080a0bb3), url('/assets/auth-forge-background-v3.webp'); } .account-auth-header { height: 60px; padding: 0 20px; } .account-auth-header .brand-copy { font-size: 22px; gap: 5px; } .account-auth-about { font-size: 15px; } .account-auth-main { min-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 60px); padding: 24px 16px; } .account-auth-form { padding: 20px 24px 24px; } }
.pref-high-contrast .account-auth { background: #000; }
.pref-high-contrast .account-auth-form { background: #000; border-color: #fff; }
.pref-high-contrast .account-auth .account-auth-submit { background: #edbf86; }

.account-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; }
.account-settings-main, .account-settings-side { display: grid; gap: 12px; min-width: 0; }
.account-card, .account-security-card { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.account-card-head, .account-security-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; }
.account-card-icon { flex: 0 0 29px; display: grid; place-items: center; width: 29px; height: 29px; color: var(--gold); font: 23px/1 var(--serif); }
.account-card-head h2, .account-security-heading h2 { margin: 0 0 3px; font-size: 21px; }
.account-card-head p, .account-security-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.account-profile-setting-body { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.1fr); gap: 16px 22px; align-items: start; }
.account-profile-setting-body form .field { margin-top: 0; }
.account-profile-setting-body form .btn { margin-top: 1px; }
.account-fact-grid { display: grid; gap: 10px; }
.account-fact { min-height: 65px; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.account-fact span, .account-fact small { color: var(--muted); font-size: 12px; }
.account-fact strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.account-settings-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-preference, .account-size-control { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.account-toggle { position: relative; display: flex; min-height: 42px; gap: 14px; align-items: center; justify-content: space-between; cursor: pointer; }
.account-toggle-copy { display: grid; gap: 3px; }
.account-toggle-copy strong { font-size: 13px; font-weight: 500; }
.account-toggle-copy small { max-width: 270px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.account-toggle input { position: absolute; right: 0; width: 44px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.account-toggle:focus-within .account-switch { outline: 2px solid var(--gold); outline-offset: 3px; }
.account-switch { position: relative; flex: 0 0 42px; width: 42px; height: 23px; border: 1px solid var(--subtle); border-radius: 99px; background: var(--panel-raised); transition: background .18s, border-color .18s; }
.account-switch::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); content: ""; transition: transform .18s; }
.account-toggle input:checked + .account-switch { border-color: var(--gold); background: var(--gold); }
.account-toggle input:checked + .account-switch::after { transform: translateX(18px); background: var(--ground); }
.account-size-control { display: grid; gap: 7px; color: var(--ink); font-size: 12px; }
.account-size-control select { min-height: 38px; padding: 6px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.account-unavailable { padding: 11px 12px; border-left: 2px solid var(--gold); background: var(--panel-raised); }
.account-unavailable p { margin: 0 0 4px; color: var(--ink); font-size: 14px; }
.account-unavailable small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.account-security-card { padding: 18px; }
.account-security-heading { margin-bottom: 13px; }
.account-security-note { margin: 13px 0; }
.account-security-note strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 14px; font-weight: 500; }
.account-export-button { width: 100%; margin: 2px 0 8px; }
.account-security-card > p { line-height: 1.45; }
.account-signout { width: 100%; margin-top: 9px; }
.account-support-card { padding-bottom: 15px; }
.account-profile-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 15px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); }
.account-profile-avatar { flex: 0 0 76px; width: 76px; height: 76px; border: 2px solid var(--gold); background: var(--panel-raised); font-size: 22px; }
.account-profile-identity { min-width: 0; flex: 1; }
.account-profile-identity h2 { margin: 4px 0 3px; font-size: 25px; }
.account-profile-identity p { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.account-profile-settings { flex: 0 0 auto; }
.account-profile-stats { margin-bottom: 18px; }
.account-profile-edit { margin-bottom: 24px; }
.account-section-title .eyebrow { margin-bottom: 4px; }
.account-section-title h2 { margin-bottom: 12px; font-size: 22px; }
.account-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-profile-fields .field { min-width: 0; }
.account-profile-edit > .muted { margin: -2px 0 14px; }
.account-list-section { margin-top: 24px; }
.account-list-section > h2 { margin-bottom: 12px; font-size: 22px; }
.account-history-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 9px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.account-history-row h3 { margin: 4px 0 3px; font: 500 17px/1.35 var(--serif); }
.account-history-row p { margin: 0; }
.account-report-row { align-items: flex-start; }
.account-report-row .badge { margin: 5px 0; }

html[data-text-size="small"] .main-inner { zoom: .96; width: calc(100% / .96); }
html[data-text-size="large"] .main-inner { zoom: 1.08; width: calc(100% / 1.08); }
body.pref-reduced-motion *, body.pref-reduced-motion *::before, body.pref-reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
body.pref-high-contrast { --ink: #fffdf4; --muted: #e1e6e7; --subtle: #bcc7cc; }
body.pref-high-contrast .account-card, body.pref-high-contrast .account-security-card, body.pref-high-contrast .account-profile-hero, body.pref-high-contrast .account-history-row { border-color: #97978e; }
body.pref-high-contrast .account-unavailable, body.pref-high-contrast .account-fact, body.pref-high-contrast .account-preference, body.pref-high-contrast .account-size-control { border-color: #888980; }

@media (max-width: 920px) {
  .account-settings-grid { grid-template-columns: minmax(0, 1fr) 240px; }
  .account-profile-setting-body { grid-template-columns: 1fr; gap: 15px; }
}
@media (max-width: 700px) {
  .account-settings-grid { grid-template-columns: 1fr; }
  .account-settings-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-profile-setting-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .account-settings-side, .account-settings-control-grid, .account-profile-setting-body, .account-profile-fields { grid-template-columns: 1fr; }
  .account-card, .account-security-card { padding: 15px; }
  .account-profile-hero { flex-wrap: wrap; padding: 14px; }
  .account-profile-avatar { flex-basis: 58px; width: 58px; height: 58px; }
  .account-profile-identity { flex: 1 1 calc(100% - 85px); }
  .account-profile-settings { margin-left: 74px; }
  .account-history-row { align-items: flex-start; flex-direction: column; }
  .account-history-row .btn { width: 100%; }
}

.account-settings-avatar { width: 104px; height: 104px; border: 1px solid var(--gold); border-radius: 50%; overflow: hidden; }
.account-settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-profile-setting-body { grid-template-columns: 104px minmax(150px, 1fr) minmax(180px, 1fr); align-items: center; }
@media (max-width: 1150px) { .account-profile-setting-body { grid-template-columns: 84px minmax(0, 1fr); } .account-settings-avatar { width: 84px; height: 84px; } .account-fact-grid { grid-column: 1 / -1; } }
@media (max-width: 540px) { .account-profile-setting-body { grid-template-columns: 72px minmax(0, 1fr); } .account-settings-avatar { width: 72px; height: 72px; } }
body.pref-high-contrast { background-image: none; --ground: #080c0f; --panel: #11181d; --line: #849097; --gold: #f1c48b; --gold-soft: #ffe2ba; }
body.pref-high-contrast .game-question, body.pref-high-contrast .lobby-rail-card, body.pref-high-contrast .panel { background: #11181d; border-color: #849097; }

.opening-screen { display:grid; justify-items:center; align-content:center; gap:16px; min-height:calc(100dvh / var(--ui-zoom, 1)); padding:24px; text-align:center; }
.opening-screen h1,.opening-screen p { margin:0; }

/* Password change: rare action behind disclosure inside the account card. */
.account-security-details { margin: 9px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); }
.account-security-details > summary { min-height: 44px; display: flex; align-items: center; padding: 0 13px; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 500; }
.account-security-details > summary:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; border-radius: 8px; }
.account-password-form { display: grid; gap: 10px; padding: 0 13px 13px; }
.account-password-form .field { margin-top: 0; }
.account-password-form p { margin: 0; line-height: 1.45; }

/* Firebase sign-in: Google button and quiet text links in the auth form. */
.notice .account-auth-link { margin-top: 0; padding: 0; color: inherit; }

.account-auth-skip-link { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 12px; background: #101112; color: #edbf86; transform: translateY(-150%); }
.account-auth-skip-link:focus { transform: translateY(0); }
.account-auth-dialog { overscroll-behavior: contain; }
.account-auth :is(button, a) { touch-action: manipulation; }
.account-auth :is(.account-auth-about, .account-auth-reveal, .account-auth-skip):hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .account-auth .account-auth-submit { transition: none; } }

/* Auth fields with an icon: the whole box takes the focus ring; browser autofill keeps the field colours (29.10.2026). */
.account-auth .account-auth-input input:focus-visible { outline: none; }
.account-auth-input:focus-within { border-color: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold-soft); }
.account-auth-fields input:-webkit-autofill,
.account-auth-fields input:-webkit-autofill:hover,
.account-auth-fields input:-webkit-autofill:focus { -webkit-text-fill-color: var(--auth-ink); caret-color: var(--auth-ink); -webkit-box-shadow: 0 0 0 1000px #18191a inset; box-shadow: 0 0 0 1000px #18191a inset; transition: background-color 9999s ease-out; }
.account-auth-input input:-webkit-autofill { border-radius: 0 5px 5px 0; }
/* "Сменить пароль" matches the neighbouring account buttons (29.10.2026). */
.account-security-details { border-color: var(--line-strong); background: color-mix(in srgb, var(--ground) 70%, transparent); }
.account-security-details > summary { justify-content: center; list-style: none; }
.account-security-details > summary::-webkit-details-marker { display: none; }
.account-security-details > summary:hover { background: var(--panel-raised); border-radius: 7px; }
.account-security-details[open] > summary { border-bottom: 1px solid var(--line); }

/* Inline field errors replace the browser's validation bubble (30.10.2026). */
.account-auth-field-error { margin: 6px 0 0; color: var(--red); font-size: 13px; line-height: 1.4; }
.account-auth-field-error[hidden] { display: none; }
.account-auth-input.is-invalid { border-color: color-mix(in srgb, var(--red) 70%, transparent); }

/* Profile and Settings, rebuilt 31.10.2026: one quiet column, editing in place,
   the duel record as a single ledger line of serif figures. */
.profile-page, .settings-page { max-width: 820px; }
.profile-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: center; padding: 8px 0 32px; }
.profile-avatar { width: 112px; height: 112px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 50%; background: var(--panel-raised); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity { min-width: 0; }
.profile-name { margin: 0; color: var(--ink); font: 400 clamp(36px, 4vw, 52px)/1.05 var(--serif); overflow-wrap: anywhere; }
.profile-email { margin: 8px 0 0; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; }
.profile-text-action { min-height: 32px; padding: 0; border: 0; color: var(--gold-soft); background: none; font: 14px var(--sans); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; cursor: pointer; transition: text-decoration-color .15s ease, color .15s ease; }
.profile-text-action:hover { color: var(--ink); text-decoration-color: currentColor; }
.profile-text-action:focus-visible, .settings-segment:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }
.profile-text-action[hidden] { display: none; }
.profile-name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.profile-name-input { width: min(420px, 100%); min-height: 52px; font: 400 30px/1.1 var(--serif); }
.profile-field-error { flex-basis: 100%; margin: 0; color: var(--red); font-size: 13px; }
.profile-field-error[hidden] { display: none; }
.profile-photo-form { display: grid; gap: 8px; max-width: 560px; margin: -12px 0 32px 140px; }
.profile-photo-form[hidden] { display: none; }
.profile-photo-label { color: var(--muted); font-size: 13px; }
.profile-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.profile-photo-row .input { flex: 1 1 260px; min-width: 0; }
.profile-photo-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.profile-photo-hint.is-error { color: var(--red); }

.profile-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-ledger-item { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; padding: 22px 24px 20px; border-left: 1px solid var(--line); }
.profile-ledger-item:first-child { padding-left: 0; border-left: 0; }
.profile-ledger dt { color: var(--muted); font-size: 13px; }
.profile-ledger dd { margin: 0; color: var(--ink); font: 400 44px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }

.profile-section { margin: 0 0 48px; }
.profile-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.profile-section-head h2 { margin: 0; font: 400 28px/1.2 var(--serif); }
.profile-matches, .profile-reports { margin: 0; padding: 0; list-style: none; }
.profile-match { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.profile-match-result { color: var(--muted); font-size: 14px; }
.profile-match.is-won .profile-match-result { color: var(--green); }
.profile-match.is-lost .profile-match-result { color: color-mix(in srgb, var(--red) 80%, var(--ink)); }
.profile-match-copy { display: grid; gap: 2px; min-width: 0; }
.profile-match-copy strong { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.profile-match-copy span { color: var(--muted); font-size: 13px; }
.profile-match-score { color: var(--ink); font: 400 22px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.profile-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-empty p { margin: 0; color: var(--muted); font-size: 15px; }
.profile-report { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.profile-report p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.profile-report-meta { color: var(--muted); font-size: 13px; }

.settings-page .topline { margin-bottom: 8px; }
.settings-group { margin: 0 0 36px; }
.settings-group > h2 { margin: 0 0 12px; font: 400 24px/1.2 var(--serif); }
.settings-list { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; min-height: 64px; padding: 14px 20px; border-top: 1px solid var(--line); }
.settings-list > :first-child { border-top: 0; }
label.settings-row { cursor: pointer; }
.settings-row-copy { display: grid; gap: 3px; min-width: 0; }
.settings-row-label { color: var(--ink); font-size: 15px; }
.settings-row-hint { max-width: 56ch; color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-row-control { display: flex; justify-content: flex-end; min-width: 0; }
.settings-value { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; text-align: right; }
.settings-select { width: min(280px, 100%); }
.settings-switch { position: relative; display: inline-flex; }
.settings-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.settings-switch input:focus-visible + .account-switch { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.settings-switch input:checked + .account-switch { border-color: var(--gold); background: var(--gold); }
.settings-switch input:checked + .account-switch::after { transform: translateX(18px); background: var(--ground); }
.settings-segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.settings-segment { min-height: 36px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); color: var(--muted); background: transparent; font: 14px var(--sans); cursor: pointer; }
.settings-segment:first-child { border-left: 0; }
.settings-segment:hover { color: var(--ink); }
.settings-segment[aria-pressed="true"] { color: var(--gold-soft); background: var(--accent-surface); }
.settings-expand { padding: 0 20px 20px; }
.settings-expand[hidden] { display: none; }
.settings-password-form { display: grid; gap: 12px; max-width: 420px; }
.settings-password-form .field { margin: 0; }
.settings-password-form .btn { justify-self: start; }
.settings-inline-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-guest-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.pref-high-contrast .settings-list, body.pref-high-contrast .profile-ledger, body.pref-high-contrast .profile-match, body.pref-high-contrast .settings-row { border-color: #979791; }
@media (prefers-reduced-motion: reduce) { .profile-text-action { transition: none; } }
@media (max-width: 760px) {
  .profile-head { grid-template-columns: 80px minmax(0, 1fr); gap: 18px; }
  .profile-avatar { width: 80px; height: 80px; }
  .profile-photo-form { margin-left: 0; }
  .profile-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-ledger-item { padding: 18px 16px; }
  .profile-ledger-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .profile-ledger-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .profile-ledger dd { font-size: 36px; }
  .profile-match { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .profile-match-result { grid-column: 1; }
  .profile-match-copy { grid-column: 1; }
  .profile-match-score { grid-column: 2; grid-row: 1 / span 2; }
  .profile-match .profile-text-action { grid-column: 1 / -1; justify-self: start; }
  .settings-row { gap: 8px 16px; padding: 14px 16px; }
  /* Wide controls go under their label; short buttons and switches stay on the right. */
  .settings-row:has(.settings-value, .settings-select, .settings-segmented, .settings-guest-actions) { grid-template-columns: minmax(0, 1fr); }
  .settings-row:has(.settings-value, .settings-select, .settings-segmented, .settings-guest-actions) .settings-row-control { justify-content: flex-start; }
  .settings-value { text-align: left; }
  .settings-select { width: 100%; }
  .settings-expand { padding: 0 16px 16px; }
}