/* The shared site layout and both header variants. No route-specific overrides. */
/* One frame and one background for every surface (docs/UI_RULES.md «Рамка и фон страницы»):
   the header, each top-level block of a page and the footer share these outer edges, and no
   page paints its own full-width background band. */
:root {
  --site-inset: 14px;
  --site-frame: min(calc(100% - 2 * var(--site-inset)), 1400px);
  --site-gap: 20px;
  --site-page-background: radial-gradient(circle at top left, #ffffff 0, #eef3ff 35%, #f5f7fb 100%);
  /* Spacing steps, radii and layers shared by React and static pages (docs/UI_RULES.md). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --focus-ring: 2px solid #0a6cff;
  /* One height for buttons and fields in a row; also the touch target size. */
  --control-height: 44px;
  --layer-header: 50;
  --layer-dialog: 70;
  --layer-popover: 80;
  --layer-hint: 10000;
  /* What only an administrator sees: light orange and «*» after its text (docs/UI_RULES.md
     «Только для администратора»); on the dark header — the light shade. */
  --admin-only-text: #8a5600;
  --admin-only-background: #fff6df;
  --admin-only-border: #f2d39a;
  --admin-only-on-dark: #ffcf8a;
}
@media (max-width: 640px) { :root { --site-gap: 12px; } }
.site-layout { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1 0 auto; min-width: 0; }
.site-header {
  position: relative;
  z-index: var(--layer-header);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  width: var(--site-frame);
  max-width: 1400px;
  margin: var(--site-gap) auto;
  padding: 14px 18px;
  border: 1px solid rgba(127, 160, 255, .18);
  border-radius: 22px;
  background: linear-gradient(180deg, #0d1831, #081121);
  box-shadow: 0 12px 28px rgba(5, 10, 20, .12);
  color: #e5edff;
  font: 400 14px/1.5 "Segoe UI", Arial, sans-serif;
  text-align: left;
  letter-spacing: normal;
}
.site-header, .site-header * { box-sizing: border-box; min-width: 0; }
.site-header [hidden] { display: none !important; }
.site-header a { color: #e5edff; text-decoration: none; }
.site-header button { font: inherit; cursor: pointer; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid #80d8ff; outline-offset: 3px; }
.site-header-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 44px; }
.site-header-brand strong { color: white; font: 800 17px/1.25 "Segoe UI", Arial, sans-serif; white-space: nowrap; }
.site-header-mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, #4d7cff, #244fe2); }
.site-header-mark svg { display: block; width: 40px; height: 40px; }
.site-header-panel { display: flex; flex: 1 1 600px; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.site-header-nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.site-header-nav a { display: flex; gap: 6px; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; line-height: 20px; }
/* The current section is marked by the plate, not by bold: the items keep their width and place. */
.site-header-nav a:hover, .site-header-nav a[aria-current="page"] { color: #fff; background: #253756; }
.site-header-nav a.site-header-admin-only { color: var(--admin-only-on-dark); }
.site-header-attention { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ffb34d; }
.site-header-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.site-header .site-header-button, .site-header-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 12px; border: 1px solid #445574;
  border-radius: 12px; background: transparent; color: #fff; font: 600 14px/20px "Segoe UI", Arial, sans-serif;
}
.site-header .site-header-primary { border-color: #0a6cff; background: #0a6cff; }
.site-header .site-header-button:hover, .site-header-toggle:hover { color: #fff; background: #253756; }
.site-header .site-header-primary:hover { background: #0755ce; }
.site-header .site-header-button:disabled { opacity: .65; cursor: wait; }
/* The account name and, under it, the analyses left: a link to the tariffs (site-header.mjs balanceLine). */
.site-header-who { display: flex; flex-direction: column; justify-content: center; min-height: 44px; max-width: 280px; padding: 4px; }
.site-header-account { overflow-wrap: anywhere; line-height: 20px; }
.site-header-balance { color: #aebbd4; font-size: 12px; line-height: 16px; text-decoration: underline; text-decoration-color: rgba(174, 187, 212, .45); text-underline-offset: 2px; }
.site-header-balance:hover { color: #fff; text-decoration-color: currentColor; }
.site-header-balance.is-empty { color: #ffcf8a; }
.site-header-toggle { display: none; margin-left: auto; }
/* Until the tab knows the session the header shows only the brand: a member never sees the guest
   menu on a page load, a guest never the member one. Without scripts the guest header stays. */
.site-header-panel, .site-header-toggle { transition: opacity .12s ease-out; }
@media (scripting: enabled) {
  .site-header:not([data-session]) .site-header-panel,
  .site-header:not([data-session]) .site-header-toggle { visibility: hidden; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .site-header-panel, .site-header-toggle { transition: none; } }
/* A page rendered with a known session shows its header at once. On a narrow screen the menu is a
   panel behind «Меню»: until the header script takes over the panel stays folded and the button
   already holds its place, so the header keeps one height from the first paint. */
@media (max-width: 1179px) and (scripting: enabled) {
  .site-header:not([data-enhanced="true"]) .site-header-panel { display: none; }
  .site-header:not([data-enhanced="true"]) .site-header-toggle { display: inline-flex; }
}
.site-header-status { flex: 1 0 100%; color: #ffd3d3; line-height: 1.5; }
.site-header-status button { min-height: 44px; padding: 4px 8px; color: #fff; background: transparent; border: 1px solid #445574; border-radius: 8px; }
@media (max-width: 1179px) {
  .site-header { gap: 10px; }
  .site-header[data-enhanced="true"] .site-header-toggle { display: inline-flex; }
  .site-header-panel { flex-basis: 100%; align-items: stretch; flex-direction: column; }
  .site-header[data-enhanced="true"] .site-header-panel {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    padding: 16px; border: 1px solid #445574; border-radius: 18px;
    background: #0d1831; box-shadow: 0 12px 28px rgba(5, 10, 20, .2);
    max-height: calc(100dvh - 120px); overflow: auto;
  }
  .site-header[data-enhanced="true"][data-menu-open="true"] .site-header-panel { display: flex; }
  .site-header-nav { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .site-header-actions { margin: 0; }
  .site-header-who { flex: 1 1 100%; max-width: none; }
  .site-header-balance { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
}
@media (max-width: 640px) {
  .site-header { padding: 10px 12px; border-radius: 18px; }
  .site-header-brand { gap: 8px; }
  .site-header-brand strong { font-size: 16px; }
  .site-header-mark, .site-header-mark svg { width: 36px; height: 36px; }
  .site-header-mark { flex-basis: 36px; border-radius: 10px; }
  .site-header-actions .site-header-button { flex: 1; }
}
@media print { .site-header { display: none; } .site-layout { display: block; min-height: 0; } }