h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   П5 (M6 prep): self-hosted fonts (Stack §2.5 — host, don't call Google Fonts
   at runtime). Only the Latin and Hebrew subsets are fetched — Cyrillic falls
   through to the system-font tail of --font below, since Heebo/Noto Sans
   Hebrew don't cover it and the interface language until M11.6 is Russian.
   Licenses: heebo-OFL.txt, noto-sans-hebrew-OFL.txt (SIL OFL 1.1),
   roboto-mono-LICENSE.txt (Apache 2.0) next to the font files.
   ========================================================================== */
@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/heebo-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/heebo-400-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/heebo-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/heebo-500-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/heebo-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/heebo-600-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/heebo-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/heebo-700-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/noto-sans-hebrew-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/noto-sans-hebrew-400-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/noto-sans-hebrew-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/noto-sans-hebrew-700-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/roboto-mono-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/roboto-mono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Task 6.1.1 (day 1 of Milestone 6, Screens §2): tokens for the client
   cabinet (/app/*). Light values first — the only definitions for a token,
   so the dark blocks below only ever override, never introduce one fresh
   (Screens §2.2 "переопределяются все токены, а не половина").
   ========================================================================== */
:root {
    --bg: #FFFFFF;
    --surface: #F6F7F9;
    --border: #DFE3E8;
    --text: #1A1A1A;
    --text-muted: #5A5A5A;
    --primary: #1557B0;
    --success: #1B7A3D;
    --danger: #C62828;
    --warning: #A85400;
    --tint-success: #E7F4EC;
    --tint-danger: #FBEAEA;
    --tint-warning: #FBF0E2;

    /* Screens §2.5: Heebo covers Hebrew and Latin in one family (Stack §2.5, П5); Cyrillic (Russian, v1's only
       interface language) isn't in either font and falls through to the system tail. */
    --font: "Heebo", "Noto Sans Hebrew", "Segoe UI", system-ui, sans-serif;
    --font-num: "Roboto Mono", ui-monospace, monospace;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-pill: 999px;
}

/* System dark theme — only when no explicit choice (data-theme) overrides it (Screens §2.2). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #16181C;
        --surface: #1E2126;
        --border: #2E333B;
        --text: #ECEDEE;
        --text-muted: #9BA1A8;
        --primary: #7FB0F0;
        --success: #67C285;
        --danger: #F08A8A;
        --warning: #E5A24D;
        --tint-success: #16301F;
        --tint-danger: #331A1A;
        --tint-warning: #2E2314;
    }
}

/* Manual dark theme — wins over the media query in both directions (Screens §2.2). */
:root[data-theme="dark"] {
    --bg: #16181C;
    --surface: #1E2126;
    --border: #2E333B;
    --text: #ECEDEE;
    --text-muted: #9BA1A8;
    --primary: #7FB0F0;
    --success: #67C285;
    --danger: #F08A8A;
    --warning: #E5A24D;
    --tint-success: #16301F;
    --tint-danger: #331A1A;
    --tint-warning: #2E2314;
}

.app-shell {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    min-height: 100vh;
}

.app-shell h1, .app-shell h2, .app-shell h3 {
    font-weight: 600;
    margin: 0;
}

.app-shell .app-amount--tabular {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.app-shell .app-amount--positive {
    color: var(--danger);
}

.app-shell .app-amount--negative {
    color: var(--success);
}

/* Task 6.1.2: ServiceCard, AlertCard, EmptyState, PromoCountdown — logical properties throughout (Screens §4),
   never left/right, so the same rules hold once Hebrew (M11.6) flips the direction. */
.app-shell .app-service-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--border);
}

.app-shell .app-service-card__icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.app-shell .app-service-card__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .app-service-card__status {
    color: var(--text-muted);
    font-size: 13px;
}

.app-shell .app-service-card__flag {
    color: var(--warning);
    display: inline-flex;
}

.app-shell .app-alert-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--tint-warning);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-3);
}

.app-shell .app-alert-card__icon {
    color: var(--warning);
    flex-shrink: 0;
}

.app-shell .app-alert-card__title {
    font-weight: 600;
    margin-block-end: var(--space-1);
}

.app-shell .app-alert-card__action {
    display: inline-block;
    margin-block-start: var(--space-2);
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* Task 7.5.5: the anomaly card's "Понятно" dismiss form — same tap target and spacing rules as the action link above. */
.app-shell .app-alert-card__dismiss-form {
    margin-block-start: var(--space-2);
}

.app-shell .app-alert-card__dismiss {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
}

.app-shell .app-promo-countdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-shell .app-promo-countdown__meta {
    color: var(--text-muted);
    font-size: 13px;
}

.app-shell .app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    color: var(--text-muted);
}

.app-shell .app-empty-state__icon {
    color: var(--border);
}

.app-shell .app-empty-state__action {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* Task 6.5.1: single column, no fixed heights — em/rem sizing throughout so a 200% OS font-size scale reflows
   instead of clipping (Screens §16). */
.app-shell--mobile {
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--space-4);
    box-sizing: border-box;
}

.app-shell--mobile * {
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Tap targets ≥ 44px (Screens §16) on every actionable element in the cabinet. */
.app-shell button,
.app-shell a.app-action,
.app-shell .app-alert-card__action,
.app-shell .app-alert-card__dismiss,
.app-shell .app-empty-state__action {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-4);
    border-radius: var(--radius-sm);
    font: inherit;
    cursor: pointer;
}

.app-shell button.app-action--primary {
    background: var(--primary);
    color: var(--bg);
    border: none;
}

.app-shell button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-shell input, .app-shell label {
    font-size: 1rem;
}

/* Task 6.1.3: the household screen itself (Screens §8). */
.app-shell .app-admin-banner {
    background: var(--tint-warning);
    color: var(--text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-3);
    font-size: 13px;
    font-weight: 600;
}

.app-shell .app-headline {
    font-size: 40px;
    font-weight: 600;
    margin-block: var(--space-2);
}

.app-shell .app-headline__unit {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-muted);
}

.app-shell .app-delta {
    color: var(--text-muted);
    margin-block-end: var(--space-6);
}

.app-shell h2 {
    font-size: 17px;
    margin-block: var(--space-6) var(--space-2);
}

/* Task 6.1.2/6.5.1: loading state — the shape of the future content, not a spinner (Screens §14). */
.app-shell .app-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-4);
}

.app-shell .app-skeleton__line {
    height: 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    width: 60%;
}

.app-shell .app-skeleton__line--wide {
    width: 90%;
    height: 2.5rem;
}

/* Task 6.2.2: service passport (Screens §9) — usage bars, extras, history rows. */
.app-shell .app-service-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.app-shell .app-passport-plan {
    color: var(--text-muted);
    margin-block: 0;
}

.app-shell .app-passport-next-plan {
    color: var(--text-muted);
    font-size: 13px;
}

.app-shell .app-usage-bar {
    margin-block-end: var(--space-3);
}

.app-shell .app-usage-bar__label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-1);
}

.app-shell .app-usage-bar__value {
    color: var(--text-muted);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.app-shell .app-usage-bar__track {
    block-size: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    overflow: hidden;
}

.app-shell .app-usage-bar__fill {
    block-size: 100%;
    background: var(--primary);
    border-radius: var(--radius-pill);
}

.app-shell .app-recurring-charge {
    margin-block-end: var(--space-1);
}

.app-shell .app-recurring-charge summary {
    cursor: pointer;
}

.app-shell .app-recurring-charge__original {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-inline-start: var(--space-3);
}

.app-shell .app-recurring-charge__amounts {
    color: var(--text-muted);
    font-size: 13px;
    margin-block-end: var(--space-3);
}

.app-shell a.app-action {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    margin-block-end: var(--space-2);
}

.app-shell .app-history-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--border);
}

.app-shell .app-history-row__period {
    flex: 1;
    color: var(--text-muted);
    font-size: 13px;
}

.app-shell .app-history-row__share {
    color: var(--text-muted);
    font-size: 13px;
}

.app-shell .app-history-baseline {
    color: var(--text-muted);
    margin-block-end: var(--space-4);
}

/* Task 6.5.2: /app/login. */
.app-shell .app-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

.app-shell .app-form label {
    display: block;
    margin-block-end: var(--space-1);
}

.app-shell .app-form input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.app-shell .app-form-error {
    color: var(--danger);
}

/* M8 Plan §3, task 8.6.3 — the dossier (Screens §10): now/will-be, market cards, arguments, script. */
.app-shell .app-now-then {
    display: flex;
    gap: var(--space-6);
    margin-block: var(--space-3);
}

.app-shell .app-now-then__block {
    flex: 1;
}

.app-shell .app-now-then__label {
    color: var(--text-muted);
    font-size: 13px;
    display: block;
}

.app-shell .app-stay-callout {
    background: var(--tint-success);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-block-end: var(--space-3);
}

.app-shell .app-offer-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-3);
}

.app-shell .app-offer-card__title {
    font-weight: 600;
}

.app-shell .app-offer-card__meta {
    color: var(--text-muted);
    font-size: 13px;
}

.app-shell .app-arguments {
    padding-inline-start: var(--space-4);
    margin-block: var(--space-2);
}

.app-shell .app-script-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: 1.1rem;
    line-height: 1.6;
}

.app-shell .app-threshold-line {
    margin-block: var(--space-1);
}

.app-shell .app-contact-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}