/*
 * Focused UI surfaces for the current public-product polish round.
 * These rules are intentionally route-scoped instead of extending the legacy
 * catch-all stylesheet, so each page owns one clear visual contract.
 */

/* Wiki search is a task state, not the documentation home with results below it. */
.wiki-search-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    padding: 2px 0 26px;
    border-bottom: 1px solid var(--border, #dbe3ee);
}
.wiki-search-page-head h1 { margin: 4px 0 0; color: var(--ink, #172033); font-size: clamp(1.8rem, 2.2vw, 2.35rem); }
.wiki-search-page-head .wiki-library-search { width: min(100%, 520px); margin: 0; }
.wiki-result-section { padding-top: 28px; }
.wiki-result-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #dbe3ee); }
.wiki-result-head h2 { margin: 0; font-size: 1.15rem; }
.wiki-result-head p, .wiki-result-updated { margin: 5px 0 0; color: var(--muted, #64748b); font-size: .84rem; }
.wiki-result-list { display: grid; }
.wiki-result-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--border, #dbe3ee); }
.wiki-result-row h3 { margin: 7px 0 6px; font-size: 1.05rem; }
.wiki-result-row h3 a { color: var(--ink, #172033); text-decoration: none; }
.wiki-result-row h3 a:hover { color: var(--link, #2563eb); text-decoration: underline; text-underline-offset: 3px; }
.wiki-result-row p { margin: 0; color: var(--muted, #64748b); line-height: 1.65; }
.wiki-result-row mark { padding: 0 .12em; border-radius: 2px; background: color-mix(in srgb, var(--link, #2563eb) 13%, transparent); color: inherit; }
.wiki-search-node-matches { display: grid; gap: 0; margin: 0; border-bottom: 1px solid var(--border, #dbe3ee); }
.wiki-search-node-matches a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; color: var(--link, #2563eb); text-decoration: none; }
.wiki-search-node-matches a + a { border-top: 1px solid color-mix(in srgb, var(--border, #dbe3ee) 70%, transparent); }
.wiki-search-node-matches a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.wiki-search-node-matches small { color: var(--muted, #64748b); font-size: .78rem; }

/* Notification Center
   ---------------------------------------------------------------------------
   The list reads as a document, not a dashboard: the surface owns the
   boundary, the rows own spacing and one divider, and no row grows its own
   card, radius or elevation. Hierarchy comes from three things instead — a day
   break between groups, a category chip that says what a row is about, and a
   spine on the rows you have not dealt with.

   Each mark answers exactly one question and no two of them overlap:

     · the spine down the surface's left edge is unread state — the only mark
       that describes the reader rather than the row;
     · the filled chip is the category: the one property of a row that is
       stable, scannable and present on every row, which is why the eye should
       land on it first;
     · the severity word after it, tinted but unboxed, is urgency. It keeps a
       colour and the word itself, so it still reads for someone who cannot
       separate the hues — but it is a word, not a second chip, so the two
       never compete for the same glance.

   Two corrections are baked in here, and both were defects rather than taste.

   The first: a read row used to be dimmed to 76% ink at weight 540 against a
   full-strength unread one, so an account that reads its notifications — every
   account, most of the time — saw nothing but the dimmed state and the page
   came out washed out end to end. Read is the baseline at full strength now;
   unread is what adds marks.

   The second: this block asked for --muted, --link, --danger and the --*-text
   tokens, and not one of them exists on this surface. Each fell through to its
   literal fallback in both themes, which is why the dark theme rendered its
   body copy as the light theme's #64748b — about 3.5:1 on this surface, under
   the 4.5:1 floor, and visibly muddy. Everything below reads a token that
   actually resolves. The two things no existing token serves well — a
   secondary ink that stays legible in both themes, and the eight category
   hues — are declared on this page, beside the rules that use them. */
body:is(.route-notifications-index, .route-notifications-settings)[data-theme-area="frontend"] {
    /* The theme's own --ink-muted is tuned for a one-line subtitle under a
       heading, where short text at 3.3:1 is comfortable. This page is mostly
       running copy at .87rem, so its secondary ink is a step darker here and a
       step lighter in the dark theme. */
    --notif-ink-2: #55637a;
    --notif-ink-3: #64748b;
    /* Identity, not severity: eight categories that have to be told apart at a
       glance, so they are spread around the wheel rather than around one
       family. The chip tint is 13% of these over the surface and the hue is
       also the text colour, which makes the tint a participant in its own
       contrast: every one of these is dark enough to hold 4.8:1 in light
       against both the plain surface and the unread row's 5% wash. They were
       solved for that rather than picked by eye — the first pass looked right
       and measured 3.9:1 on four of the eight. */
    --notif-hue-platform: #546279;
    --notif-hue-security: #b6241d;
    --notif-hue-contest: #9d4808;
    --notif-hue-content: #2157cf;
    --notif-hue-gamification: #7537df;
    --notif-hue-organization: #0c6e56;
    --notif-hue-learning: #0d6a83;
    --notif-hue-system: #a8306f;
}
body:is(.route-notifications-index, .route-notifications-settings).theme-dark[data-theme-area="frontend"] {
    --notif-ink-2: #a6b4c8;
    --notif-ink-3: #8695ab;
    --notif-hue-platform: #9aa8bd;
    --notif-hue-security: #ff8a95;
    --notif-hue-contest: #f2a154;
    --notif-hue-content: #6ea8ff;
    --notif-hue-gamification: #b39bff;
    --notif-hue-organization: #3fd0a0;
    --notif-hue-learning: #45d0e5;
    --notif-hue-system: #ef9ec6;
}
.notification-center-page, .notification-settings-page { width: min(100%, 1040px); margin: 0 auto; }
.notification-breadcrumbs { margin: 0 0 18px; }
.notification-center-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 4px 0 22px; border-bottom: 1px solid var(--border, #dbe3ee); }
.notification-center-head h1 { margin: 4px 0 6px; color: var(--ink, #172033); font-size: clamp(1.75rem, 2.1vw, 2.25rem); }
.notification-center-head p { margin: 0; color: var(--notif-ink-2); }
.notification-center-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.notification-center-actions form { margin: 0; }
.notification-center-surface { margin-top: 20px; overflow: visible; border: 1px solid var(--border, var(--account-border)); border-radius: 9px; background: var(--surface, var(--account-surface)); box-shadow: none; }
.notification-tabs { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--border, #dbe3ee); }
.notification-tabs a { padding: 16px 0 11px; border-bottom: 2px solid transparent; color: var(--notif-ink-3); font-size: .92rem; font-weight: 600; text-decoration: none; }
.notification-tabs a.is-active { border-bottom-color: var(--accent); color: var(--ink, #172033); }
.notification-tabs small { margin-left: 3px; color: inherit; font-size: .78rem; font-weight: 500; }
/* The controls are one toolbar, so they sit on one band rather than floating
   over the list. Mixed toward --ink rather than a fixed grey because --ink
   flips with the theme: 2% of it is a lift on white and on near-black alike. */
.notification-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border, #dbe3ee); background: color-mix(in srgb, var(--ink, #172033) 3%, transparent); }
.notification-filter-form { display: flex; flex: 1; align-items: end; flex-wrap: wrap; gap: 10px; }
.notification-filter-form > label:not(.notification-search-field) { display: grid; gap: 4px; color: var(--notif-ink-3); font-size: .76rem; }
.notification-search-field { flex: 1 1 220px; }
.notification-filter-form .form-control, .notification-filter-form .form-select { min-height: 34px; font-size: .86rem; }
/* The controls sit on one baseline: .btn-sm is a couple of pixels shorter than
   the selects it stands beside, which reads as a misalignment on a toolbar. */
.notification-filter-form .btn { min-height: 34px; }
.notification-clear-filter { align-self: center; color: var(--notif-ink-2); font-size: .82rem; text-decoration: none; }
.notification-clear-filter:hover { color: var(--accent); text-decoration: underline; }
.notification-bulk-menu, .notification-row-menu { position: relative; flex: 0 0 auto; }
.notification-bulk-menu summary, .notification-row-menu summary { cursor: pointer; list-style: none; }
.notification-bulk-menu summary::-webkit-details-marker, .notification-row-menu summary::-webkit-details-marker { display: none; }
/* Progressive disclosure needs to look like a control, not like a stray label. */
.notification-bulk-menu summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border, #dbe3ee); border-radius: 6px; background: var(--surface, #fff); color: var(--ink, #172033); font-size: .82rem; white-space: nowrap; }
.notification-bulk-menu summary::after { color: var(--notif-ink-3); font-size: .7rem; content: "▾"; }
.notification-bulk-menu summary:hover, .notification-bulk-menu[open] summary { border-color: color-mix(in srgb, var(--accent) 45%, var(--border, #dbe3ee)); color: var(--accent); }
.notification-bulk-menu > div, .notification-row-menu > div { position: absolute; right: 0; z-index: 5; display: grid; min-width: 136px; padding: 5px; border: 1px solid var(--border, #dbe3ee); border-radius: 7px; background: var(--surface, #fff); box-shadow: 0 10px 24px color-mix(in srgb, #0f172a 14%, transparent); }
.notification-bulk-menu > div { top: 38px; }
.notification-bulk-menu form, .notification-row-menu form { margin: 0; }
.notification-bulk-menu button, .notification-row-menu button { width: 100%; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--ink, #172033); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.notification-bulk-menu button:hover, .notification-row-menu button:hover { background: color-mix(in srgb, var(--ink, #172033) 5%, transparent); }
.notification-bulk-menu button:disabled { color: var(--notif-ink-3); cursor: default; }
.notification-bulk-menu button:disabled:hover { background: transparent; }
.notification-bulk-menu .is-danger, .notification-row-menu .is-danger { color: var(--negative); }
.notification-stream { display: grid; }

/* The day break. A tinted band rather than another divider: the list is long
   enough that a hairline between groups reads as just another row edge. */
.notification-daygroup-head { display: flex; align-items: center; gap: 9px; margin: 0; padding: 13px 20px 9px; background: color-mix(in srgb, var(--ink, #172033) 2.5%, transparent); }
.notification-daygroup-label { color: var(--ink, #172033); font-size: .8rem; font-weight: 650; letter-spacing: .01em; }
.notification-daygroup-count { color: var(--notif-ink-3); font-size: .74rem; font-variant-numeric: tabular-nums; }
.notification-daygroup-head::after { flex: 1; height: 1px; background: color-mix(in srgb, var(--border, #dbe3ee) 75%, transparent); content: ""; }

.notification-row { --row-tone: var(--notif-ink-3); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 14px; padding: 17px 20px 18px; border-bottom: 1px solid var(--border, #dbe3ee); }
/* The severity word's ink. Every row carries one of these four classes, and
   info is the quiet default, so a row with nothing urgent to say stays quiet.
   Success is deliberately not --positive: a badge award is good news, not an
   alarm, and it should not be the loudest thing on the page. */
.notification-row.tone-info { --row-tone: var(--notif-ink-3); }
.notification-row.tone-success { --row-tone: var(--positive); }
.notification-row.tone-warning { --row-tone: var(--warning); }
.notification-row.tone-danger { --row-tone: var(--negative); }
.notification-row.is-unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* Unread state, drawn on the surface's own edge. One colour for every unread
   row, not the row's level: a spine that changes hue from row to row stops
   reading as a spine and starts reading as decoration. Severity is the word's
   job. There is no dot column — it left the title indented away from the day
   label above it and, being mostly a faint speck, said less than the spine. */
.notification-row.is-unread::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--accent); content: ""; }
/* Only rows that lead somewhere light up under the cursor — the other two
   shapes have nothing to click. */
.notification-row:has(.notification-row-main > button:hover) { background: color-mix(in srgb, var(--ink, #172033) 4%, transparent); }
.notification-row-main { display: grid; min-width: 0; margin: 0; }
/* Every shape of the row lays out identically. `.notification-row-main` is a
   <div> for a read row with no target and a <form> otherwise, and only the
   <button> inside the form ever declared this grid — which is why those rows
   collapsed their message onto the title's line. */
.notification-row-main > button { display: grid; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notification-row-main > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.notification-row-title { color: var(--ink, #172033); font-size: .95rem; font-weight: 600; line-height: 1.45; }
/* Read is the baseline and keeps full ink; unread is what adds a mark, rather
   than read being a mark that subtracts one. The weight step is small on
   purpose — the spine and the wash already say "unread", and a row you have
   dealt with is still a row you have to be able to read. */
.notification-row.is-unread .notification-row-title { font-weight: 700; }
.notification-row-text { margin-top: 5px; color: var(--notif-ink-2); font-size: .87rem; line-height: 1.6; }
.notification-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; color: var(--notif-ink-3); font-size: .76rem; }
/* The category chip. Not .chip / .badge / .soft-badge — metadata-system.css
   flattens that whole vocabulary to bare inline text with !important on every
   frontend page, so a new tag has to bring its own class name. The base rule
   carries the neutral hue so an unrecognised category still gets a chip rather
   than an unstyled span. */
.notification-cat { --cat-tone: var(--notif-hue-platform); padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--cat-tone) 13%, transparent); color: var(--cat-tone); font-size: .73rem; font-weight: 640; }
.notification-cat-platform { --cat-tone: var(--notif-hue-platform); }
.notification-cat-security { --cat-tone: var(--notif-hue-security); }
.notification-cat-contest { --cat-tone: var(--notif-hue-contest); }
.notification-cat-content { --cat-tone: var(--notif-hue-content); }
.notification-cat-gamification { --cat-tone: var(--notif-hue-gamification); }
.notification-cat-organization { --cat-tone: var(--notif-hue-organization); }
.notification-cat-learning { --cat-tone: var(--notif-hue-learning); }
.notification-cat-system { --cat-tone: var(--notif-hue-system); }
/* Severity: the same tint family the tag used, without the box, so it reads as
   a word beside the chip instead of a second chip beside it. */
.notification-sev { color: var(--row-tone); font-size: .73rem; font-weight: 640; }
.notification-row-snooze { color: var(--notif-ink-3); }
/* Snoozing is a deferral, not a resolution, so the row keeps its unread spine
   but stops claiming the same attention as one you have not put off. */
.notification-row.is-snoozed.is-unread::before { background: var(--notif-ink-3); }
.notification-row-time { padding-top: 2px; color: var(--notif-ink-3); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notification-row-menu summary { display: grid; width: 26px; height: 26px; margin-top: -2px; place-items: center; border-radius: 6px; color: var(--notif-ink-3); font-size: 1rem; line-height: 1; }
.notification-row-menu summary:hover, .notification-row-menu[open] summary { background: color-mix(in srgb, var(--ink, #172033) 7%, transparent); color: var(--ink, #172033); }
.notification-row-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notification-row-menu > div { top: 28px; }
.bulletin-title-link { color: inherit; text-decoration: none; }
.bulletin-title-link:hover { color: var(--link, #2563eb); text-decoration: underline; text-underline-offset: 3px; }
.bulletin-title-link:focus-visible { outline: 2px solid var(--link, #2563eb); outline-offset: 3px; border-radius: 2px; }
.announcement-reading-document > .prose { max-width: 840px; }
.notification-pagination { padding: 16px 20px 20px; }
.notification-pagination > nav { margin: 0; }
.notification-settings-list { padding: 0 20px; }
.notification-settings-list section { padding: 20px 0; border-bottom: 1px solid var(--border, #dbe3ee); }
.notification-settings-list h2 { margin: 0; font-size: 1rem; }
.notification-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; cursor: pointer; }
.notification-setting-row > span { display: grid; gap: 3px; }
.notification-setting-row strong { color: var(--ink, #172033); font-size: .92rem; font-weight: 600; }
.notification-setting-row small { color: var(--notif-ink-2); font-size: .82rem; }
.notification-setting-row input { position: absolute; opacity: 0; }
.notification-setting-row i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: color-mix(in srgb, var(--notif-ink-3) 42%, transparent); transition: background-color 160ms ease; }
.notification-setting-row i::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; content: ""; transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
.notification-setting-row input:checked + i { background: var(--accent); }
.notification-setting-row input:checked + i::after { transform: translateX(14px); }
.notification-setting-row input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }
.notification-setting-row.is-fixed { cursor: default; }
.notification-setting-row em { color: var(--notif-ink-3); font-size: .8rem; font-style: normal; }
.notification-settings-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 0; }

/* Account security and the local 2FA enrollment surface. */
body[data-theme-area="frontend"] .security-overview-panel,
body[data-theme-area="frontend"] .security-section { border-color: color-mix(in srgb, var(--border, #dbe3ee) 88%, transparent); border-radius: 9px; box-shadow: none; }
body[data-theme-area="frontend"] .security-overview-panel { background: var(--surface, #fff); }
body[data-theme-area="frontend"] .security-status-grid { border-color: color-mix(in srgb, var(--border, #dbe3ee) 88%, transparent); }
body[data-theme-area="frontend"] .security-status-grid > div { border-color: color-mix(in srgb, var(--border, #dbe3ee) 88%, transparent); }
.security-status-text { align-self: start; color: var(--muted, #64748b); font-size: .84rem; }
.security-two-factor-cta { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.security-two-factor-cta p { margin: 0 0 7px; }
.two-factor-auth-layout.auth-layout { display: block; width: min(100%, 720px); min-height: 0; margin: 42px auto; }
.two-factor-auth-layout .auth-panel { width: 100%; padding: clamp(22px, 4vw, 38px); border-color: var(--border, #dbe3ee); border-radius: 9px; box-shadow: none; }
.two-factor-verify { max-width: 520px; margin: 0 auto; }
.two-factor-verify-head { padding-bottom: 22px; border-bottom: 1px solid var(--border, #dbe3ee); }
.two-factor-verify-head .section-kicker { margin: 0 0 7px; }
.two-factor-verify-head h1 { margin: 0 0 8px; color: var(--ink, #172033); font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.24; letter-spacing: -.025em; }
.two-factor-verify-head p:last-child { max-width: 36rem; margin: 0; color: var(--muted, #64748b); font-size: .94rem; line-height: 1.7; }
.two-factor-verify-form { display: grid; gap: 20px; margin-top: 26px; }
.two-factor-verify-form .form-label { margin-bottom: 8px; color: var(--ink, #172033); font-size: .9rem; font-weight: 650; }
.two-factor-code-input { min-height: 48px; font-size: 1.05rem; letter-spacing: .08em; }
.two-factor-verify-form .two-factor-hint { margin: 8px 0 0; }
.two-factor-verify-submit { width: 100%; min-height: 46px; }
.two-factor-verify-exit { margin-top: 15px; text-align: center; }
.two-factor-setup-head { padding-bottom: 22px; border-bottom: 1px solid var(--border, #dbe3ee); }
.two-factor-setup-head h1, .two-factor-recovery h1 { margin: 5px 0 8px; color: var(--ink, #172033); font-size: clamp(1.6rem, 2.4vw, 2rem); }
.two-factor-setup-head p, .two-factor-recovery > p { margin: 0; color: var(--muted, #64748b); line-height: 1.65; }
.two-factor-setup-form { display: grid; gap: 0; margin: 6px 0 22px; }
.two-factor-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 23px 0; border-bottom: 1px solid var(--border, #dbe3ee); }
.two-factor-step-number { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--link, #2563eb) 12%, transparent); color: var(--link, #2563eb); font-size: .78rem; font-weight: 700; }
.two-factor-step h2 { margin: 0 0 5px; color: var(--ink, #172033); font-size: 1rem; }
.two-factor-step p { margin: 0 0 14px; color: var(--muted, #64748b); font-size: .88rem; line-height: 1.6; }
.two-factor-step .form-control { width: min(100%, 420px); }
.two-factor-qr { display: block; width: 196px; height: 196px; margin: 16px 0; padding: 8px; border: 1px solid var(--border, #dbe3ee); border-radius: 6px; background: #fff; }
.two-factor-manual-setup { width: min(100%, 500px); }
.two-factor-manual-setup > summary, .two-factor-manual-setup details > summary { color: var(--link, #2563eb); cursor: pointer; font-size: .86rem; }
.two-factor-manual-setup > div { padding-top: 14px; }
.two-factor-copy-field { display: flex; width: min(100%, 420px); gap: 8px; }
.two-factor-copy-field .form-control { flex: 1; min-width: 0; }
.two-factor-manual-setup textarea { width: 100%; margin-top: 9px; resize: vertical; }
.two-factor-otp-input { max-width: 220px; letter-spacing: .16em; }
.two-factor-step .btn-primary { display: block; margin-top: 14px; }
.two-factor-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0; }
.two-factor-recovery-codes code { padding: 10px 12px; border: 1px solid var(--border, #dbe3ee); border-radius: 5px; color: var(--ink, #172033); background: color-mix(in srgb, var(--surface, #fff) 92%, var(--muted, #64748b) 8%); font-size: .84rem; }
.two-factor-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
    .wiki-search-page-head, .notification-center-head { display: grid; align-items: start; }
    .wiki-search-page-head .wiki-library-search { width: 100%; }
    .wiki-result-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .notification-center-actions { justify-content: flex-start; }
    .notification-tabs { padding-inline: 16px; gap: 16px; }
    .notification-filter-bar, .notification-row, .notification-pagination, .notification-settings-list, .notification-daygroup-head { padding-inline: 16px; }
    .notification-filter-bar { align-items: end; }
    .notification-filter-form { display: grid; grid-template-columns: 1fr 1fr; }
    .notification-search-field { grid-column: 1 / -1; }
    .notification-filter-form .btn, .notification-clear-filter { justify-self: start; }
    .notification-row { grid-template-columns: minmax(0, 1fr) auto; gap: 11px; padding-block: 15px 16px; }
    .notification-row-time { grid-column: 1; grid-row: 2; padding-top: 0; }
    .notification-row-menu { grid-column: 2; grid-row: 1; }
    .notification-settings-actions { justify-content: stretch; }
    .notification-settings-actions .btn { flex: 1; }
    .security-two-factor-cta { display: grid; align-items: start; }
    .two-factor-auth-layout.auth-layout { width: min(100%, calc(100vw - 24px)); margin: 20px auto 28px; }
    .two-factor-auth-layout .auth-panel { padding: 22px 18px; }
    .two-factor-verify-head { padding-bottom: 18px; }
    .two-factor-verify-form { gap: 18px; margin-top: 22px; }
    .two-factor-step { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
    .two-factor-step .form-control, .two-factor-copy-field { width: 100%; }
    .two-factor-qr { width: 180px; height: 180px; }
    .two-factor-recovery-codes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .notification-setting-row :is(i, i::after) { transition: none; }
}