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;
}

/* ==========================================================================
   BASE.CSS — скелет: раскладка, сетка, навигация, тема, отступы
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:calc(var(--header-h) + 1rem);background-color:var(--color-bg)}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-inline-size:100%;block-size:auto}
input,button,textarea,select{font:inherit;color:inherit}
a{color:var(--color-accent);text-decoration-thickness:.08em;text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:.25rem}

/* --- Токены и тема ------------------------------------------------------- */
:root{
  color-scheme:light dark;
  --layout-max:1920px;
  --header-h:4.5rem;
  --radius:.75rem;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --color-bg:#f4f6f9;
  --color-surface:#fff;
  --color-surface-2:#eef1f6;
  --color-text:#14181d;
  --color-muted:#5b6675;
  --color-border:#d7dde5;
  --color-accent:#2f6fed;
  --color-accent-text:#fff;
  --color-backdrop:rgb(10 16 26 / .55);
  --shadow-md:0 .75rem 1.75rem rgb(16 24 40 / .18);
  --transition:220ms ease;
}
@supports (color:light-dark(#000,#fff)){
  :root{
    --color-bg:light-dark(#f4f6f9,#0e1116);
    --color-surface:light-dark(#fff,#161b22);
    --color-surface-2:light-dark(#eef1f6,#1d242d);
    --color-text:light-dark(#14181d,#e7ecf3);
    --color-muted:light-dark(#5b6675,#9aa7b8);
    --color-border:light-dark(#d7dde5,#2a323d);
    --color-accent:light-dark(#2f6fed,#6ea8ff);
    --color-accent-text:light-dark(#fff,#0b1220);
    --color-backdrop:light-dark(rgb(10 16 26 / .55),rgb(0 0 0 / .65));
    --shadow-md:0 .75rem 1.75rem light-dark(#1018282e,#0009);
  }
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* --- Страница = grid ----------------------------------------------------- */
body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"header" "main" "footer";
  min-block-size:100dvh;
  max-inline-size:var(--layout-max);
  margin-inline:auto;
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.6;
  background-color:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--transition),color var(--transition);
}

.sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Шапка --------------------------------------------------------------- */
header{
  grid-area:header;
  position:sticky;
  inset-block-start:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-block-size:var(--header-h);
  padding-block:.75rem;
  padding-inline:clamp(1rem,3vw,2rem);
  background-color:var(--color-surface);
  border-block-end:1px solid var(--color-border);
}
.brand{display:inline-flex;align-items:center;gap:.625rem;min-block-size:44px;color:var(--color-text);font-weight:700;letter-spacing:.01em;text-decoration:none}
.brand img{inline-size:2rem;block-size:2rem}

/* --- Переключатель темы -------------------------------------------------- */
.theme-switch{display:flex;align-items:center;gap:.25rem;margin:0;margin-inline-start:auto;padding:.25rem;border:1px solid var(--color-border);border-radius:.625rem;background-color:var(--color-surface-2)}
.theme-switch input{position:absolute;inline-size:1px;block-size:1px;margin:-1px;clip-path:inset(50%);overflow:hidden}
.theme-switch label{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:.375rem;cursor:pointer;color:var(--color-muted);transition:background-color var(--transition),color var(--transition)}
.theme-switch label:hover{background-color:var(--color-border)}
.theme-switch input:checked + label{background-color:var(--color-accent);color:var(--color-accent-text)}
.theme-switch input:focus-visible + label{outline:2px solid var(--color-accent);outline-offset:2px}

/* --- Гамбургер ----------------------------------------------------------- */
.nav-toggle{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-toggle-label{display:grid;place-items:center;inline-size:44px;block-size:44px;border:1px solid var(--color-border);border-radius:.625rem;background-color:var(--color-surface-2);color:var(--color-text);cursor:pointer;user-select:none}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;inline-size:1.25rem;block-size:.125rem;border-radius:999px;background-color:currentColor;transition:transform var(--transition),top var(--transition),background-color var(--transition)}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;inset-inline-start:0}
.nav-toggle-bars::before{top:-.4375rem}
.nav-toggle-bars::after{top:.4375rem}
body:has(.nav-toggle:checked) .nav-toggle-bars{background-color:transparent}
body:has(.nav-toggle:checked) .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
body:has(.nav-toggle:checked) .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}
.nav-toggle:focus-visible + .nav-toggle-label{outline:3px solid var(--color-accent);outline-offset:2px}

/* --- Боковая панель (off-canvas) ---------------------------------------- */
aside{
  position:fixed;
  inset-block-start:var(--header-h);
  inset-block-end:0;
  inset-inline-start:0;
  z-index:40;
  inline-size:min(85vw,20rem);
  padding:1.5rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  background-color:var(--color-surface);
  border-inline-end:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
  transform:translateX(-100%);
  visibility:hidden;
  transition:transform var(--transition),visibility 0s linear var(--transition);
}
body:has(.nav-toggle:checked) aside{transform:translateX(0);visibility:visible;transition:transform var(--transition),visibility 0s}

.nav-backdrop{display:block;position:fixed;inset:0;z-index:30;background-color:var(--color-backdrop);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--transition),visibility 0s linear var(--transition)}
body:has(.nav-toggle:checked) .nav-backdrop{opacity:1;visibility:visible;transition:opacity var(--transition),visibility 0s}
body:has(.nav-toggle:checked){overflow:hidden}

aside h2{margin-block-end:1rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
aside ul{display:grid;gap:.25rem}
aside a{display:flex;align-items:center;min-block-size:44px;padding:.6rem .75rem;border-radius:.5rem;color:var(--color-text);font-size:.95rem;text-decoration:none;transition:background-color var(--transition),color var(--transition)}
aside a:hover{background-color:var(--color-surface-2)}
aside a.active{background-color:var(--color-accent);color:var(--color-accent-text);font-weight:600}

/* --- Контент ------------------------------------------------------------- */
main{
  grid-area:main;
  min-inline-size:0;
  padding-block:clamp(1.5rem,4vw,3rem);
  padding-inline:clamp(1rem,4vw,3rem);
}
article > * + *,
article section > * + *{margin-block-start:1.25rem}
article h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);line-height:1.2;letter-spacing:-.02em}
article h2{margin-block-start:1.75rem;margin-block-end:.75rem;font-size:1.35rem;line-height:1.3}
.lead{max-inline-size:62ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:var(--color-muted)}

/* --- Подвал -------------------------------------------------------------- */
footer{
  grid-area:footer;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  align-items:center;
  justify-content:space-between;
  padding-block:1.5rem;
  padding-inline:clamp(1rem,3vw,2rem);
  background-color:var(--color-surface);
  border-block-start:1px solid var(--color-border);
  color:var(--color-muted);
  font-size:.875rem;
}
footer a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--color-muted);text-decoration:none}
footer a:hover{color:var(--color-text);text-decoration:underline}
footer nav ul{display:flex;flex-wrap:wrap;gap:1rem}

/* --- Десктоп ------------------------------------------------------------- */
@media (min-width:60rem){
  body{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"header header" "aside main" "aside footer"}
  body:has(.nav-toggle:checked){overflow:visible}
  header{padding-inline:2rem}
  .nav-toggle,.nav-toggle-label,.nav-backdrop{display:none}
  aside{
    grid-area:aside;
    position:sticky;
    inset-block-start:var(--header-h);
    inset-block-end:auto;
    align-self:start;
    max-block-size:calc(100dvh - var(--header-h));
    inline-size:auto;
    box-shadow:none;
    transform:none;
    visibility:visible;
    transition:none;
  }
  body:has(.nav-toggle:checked) aside{transform:none}
  main{padding-block:2.5rem;padding-inline:clamp(2rem,4vw,3rem)}
}