/* ==========================================================================
   Croft — bundle.css
   Все цвета, отступы, радиусы, тени и шрифты — только через токены (tokens.css).
   Префикс классов: av-. Движение — через --dur-* и --ease-*; prefers-reduced-motion гасит всё.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--signal); color: var(--on-signal); }

.av-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.av-nowrap { white-space: nowrap; }
.av-muted { color: var(--ink-3); }
.av-ink2 { color: var(--ink-2); }
.av-right { text-align: right; }
.av-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Типографика-утилиты (дублируют классы tokens.css с av-префиксом, чтобы не конфликтовать) */
.av-t-display-xl { font: 700 72px/68px var(--font-display); letter-spacing: -0.02em; }
.av-t-display-l  { font: 700 48px/48px var(--font-display); letter-spacing: -0.015em; }
.av-t-title      { font: 650 28px/32px var(--font-display); letter-spacing: -0.01em; }
.av-t-kpi        { font: 600 30px/34px var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.av-t-kpi-s      { font: 600 20px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.av-t-lead       { font: 400 18px/28px var(--font-sans); }
.av-t-heading    { font: 600 16px/22px var(--font-sans); }
.av-t-label      { font: 500 12px/16px var(--font-sans); letter-spacing: 0.01em; }
.av-t-caption    { font: 400 12px/16px var(--font-sans); }
.av-t-code       { font: 500 13px/20px var(--font-mono); }
.av-t-overline   { font: 500 11px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Layout primitives ---------- */
.av-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.av-row--between { justify-content: space-between; }
.av-row--end { justify-content: flex-end; }
.av-row--nowrap { flex-wrap: nowrap; }
.av-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.av-stack--tight { gap: var(--space-2); }
.av-stack--loose { gap: var(--space-6); }
.av-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(var(--min, 220px), 1fr)); }
.av-grid-2 { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.av-grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.av-form-grid { display: grid; gap: var(--space-4) var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.av-span-all { grid-column: 1 / -1; }
.av-divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.av-spacer { flex: 1; }

/* ---------- Motion ---------- */
@keyframes av-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes av-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-pop { 0% { opacity: 0; transform: scale(.96) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes av-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes av-spin { to { transform: rotate(360deg); } }
@keyframes av-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes av-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes av-flash { 0% { background-color: var(--signal-soft); } 100% { background-color: transparent; } }
@keyframes av-float-up { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 30% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -22px); } }
@keyframes av-line-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes av-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes av-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes av-wheel { to { transform: rotate(360deg); } }
@keyframes av-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Каскадное появление блоков страницы: оберните секции в .av-enter */
.av-enter > * { animation: av-rise var(--dur-3, 360ms) var(--ease-out, ease-out) both; }
.av-enter > *:nth-child(1) { animation-delay: 0ms; }
.av-enter > *:nth-child(2) { animation-delay: 50ms; }
.av-enter > *:nth-child(3) { animation-delay: 100ms; }
.av-enter > *:nth-child(4) { animation-delay: 150ms; }
.av-enter > *:nth-child(5) { animation-delay: 200ms; }
.av-enter > *:nth-child(6) { animation-delay: 250ms; }
.av-enter > *:nth-child(7) { animation-delay: 300ms; }
.av-enter > *:nth-child(n+8) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- Icon ---------- */
.av-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Logo ---------- */
.av-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); line-height: 0; }
.av-logo svg { display: block; }
.av-logo--inverse { color: var(--on-asphalt); }
.av-logo__tile { fill: var(--signal); }
.av-logo__a { fill: var(--on-signal); }
.av-logo__word { fill: currentColor; }
.av-logo:hover .av-logo__mark { transform: rotate(-4deg); }
.av-logo__mark { transition: transform var(--dur-2) var(--ease-spring); }

/* ---------- Avatar ---------- */
.av-avatar {
  --s: 32px;
  width: var(--s); height: var(--s); flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--ink);
  font: 600 calc(var(--s) * .38)/1 var(--font-display);
  letter-spacing: .02em;
}
.av-avatar--signal { background: var(--signal); color: var(--on-signal); }
.av-avatar--asphalt { background: var(--asphalt-2); color: var(--on-asphalt); }

/* ---------- Button ---------- */
.av-btn {
  --h: var(--control-md, 40px);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--h); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 14px/20px var(--font-sans); white-space: nowrap;
  cursor: pointer; user-select: none; text-decoration: none !important;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.av-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.av-btn:disabled { cursor: not-allowed; opacity: .5; }
.av-btn.is-loading { opacity: 1; cursor: progress; }
.av-btn--sm { --h: var(--control-sm, 32px); padding: 0 var(--space-3); font-size: 13px; gap: 6px; border-radius: 8px; }
.av-btn--lg { --h: var(--control-lg, 48px); padding: 0 var(--space-5); font-size: 15px; }
.av-btn--xl { --h: var(--control-xl, 60px); padding: 0 var(--space-5); font: 650 16px/20px var(--font-display); letter-spacing: .01em; }
.av-btn--block { display: flex; width: 100%; }
.av-btn--icon { width: var(--h); padding: 0; }

.av-btn--primary { background: var(--signal); color: var(--on-signal); }
.av-btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--on-signal); opacity: 0; transition: opacity var(--dur-1) ease; pointer-events: none; }
.av-btn--primary:hover:not(:disabled)::after { opacity: .08; }
.av-btn--dark { background: var(--asphalt); color: var(--on-asphalt); }
.av-btn--dark:hover:not(:disabled) { background: var(--asphalt-2); }
.av-btn--dark .av-icon { color: var(--signal); }
.av-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.av-btn--secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); }
.av-btn--ghost { background: transparent; color: var(--ink-2); }
.av-btn--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.av-btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.av-btn--danger:hover:not(:disabled) { background: var(--danger-soft); }
.av-btn--link { background: none; border: 0; height: auto; padding: 0; color: var(--link); font-weight: 600; }
.av-btn--link:hover .av-btn__iconR { transform: translateX(3px); }
.av-btn__iconR { transition: transform var(--dur-2) var(--ease-out); }
.av-btn--on-asphalt.av-btn--ghost { color: var(--on-asphalt-2); }
.av-btn--on-asphalt.av-btn--ghost:hover:not(:disabled) { background: var(--asphalt-2); color: var(--on-asphalt); }
.av-btn--on-asphalt.av-btn--secondary { background: transparent; color: var(--on-asphalt); border-color: var(--on-asphalt-2); }
.av-btn--on-asphalt.av-btn--secondary:hover:not(:disabled) { background: var(--asphalt-2); }

.av-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: av-spin .7s linear infinite; flex: none; }

/* ---------- Badge (StatusBadge) ---------- */
.av-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 24px; padding: 0 8px 0 6px;
  border-radius: var(--radius-xs);
  font: 500 12px/16px var(--font-sans); letter-spacing: .01em; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.av-badge .av-icon { width: 14px; height: 14px; }
.av-badge--sm { height: 20px; padding: 0 6px 0 4px; font-size: 11px; }
.av-badge--ok { background: var(--ok-soft); color: var(--ok); }
.av-badge--warn { background: var(--warn-soft); color: var(--warn); }
.av-badge--danger { background: var(--danger-soft); color: var(--danger); }
.av-badge--info { background: var(--info-soft); color: var(--info); }
.av-badge--signal { background: var(--signal-soft); color: var(--signal-ink); }
.av-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.av-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 2px; animation: av-pulse 1.8s ease-out infinite; }

/* ---------- PlanBadge ---------- */
.av-plan {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 4px;
  border-radius: var(--radius-full);
  background: var(--asphalt); color: var(--on-asphalt);
  font: 500 12px/16px var(--font-sans); white-space: nowrap;
}
.av-plan__name {
  height: 24px; display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--signal); color: var(--on-signal);
  font: 700 12px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.av-plan__meta { color: var(--on-asphalt-2); }
.av-plan--trial .av-plan__name { background: var(--on-asphalt); color: var(--asphalt); }
.av-plan--expired { background: var(--danger-soft); color: var(--danger); }
.av-plan--expired .av-plan__name { background: var(--danger); color: var(--surface); }
.av-plan--expired .av-plan__meta { color: var(--danger); }

/* ---------- Plate (госномер) ---------- */
.av-plate {
  flex: none; align-self: flex-start; width: max-content; max-width: 100%;
  display: inline-flex; align-items: stretch; box-sizing: border-box;
  height: 24px; border-radius: var(--radius-xs);
  background: var(--plate-bg); color: var(--plate-ink);
  border: 1.5px solid var(--plate-ink);
  font: 600 12px/1 var(--font-mono); letter-spacing: .04em; white-space: nowrap;
  overflow: hidden; vertical-align: middle;
}
.av-plate__kz, .av-plate__num, .av-plate__reg { flex: none; }
.av-plate__kz { display: grid; place-items: center; padding: 0 4px 0 6px; font-size: 8px; letter-spacing: .06em; font-weight: 700; border-right: 1.5px solid var(--plate-ink); }
.av-plate__num { display: grid; place-items: center; padding: 0 7px; }
.av-plate__reg { display: grid; place-items: center; padding: 0 6px; border-left: 1.5px solid var(--plate-ink); }
.av-plate--lg { height: 36px; font-size: 18px; border-radius: 8px; }
.av-plate--lg .av-plate__kz { font-size: 10px; padding: 0 6px 0 8px; }
.av-plate--lg .av-plate__num { padding: 0 12px; }
.av-plate--lg .av-plate__reg { padding: 0 10px; }

/* ---------- Mono (VIN, SKU, № чека) ---------- */
.av-mono { font: 500 13px/20px var(--font-mono); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.av-mono--sm { font-size: 11px; line-height: 16px; }
.av-mono__g + .av-mono__g { margin-left: .45em; }
.av-mono--copy { cursor: copy; border-radius: 4px; padding: 0 3px; margin: 0 -3px; transition: background-color var(--dur-1) ease; position: relative; }
.av-mono--copy:hover { background: var(--surface-3); }
.av-mono--copied::after { content: "Скопировано"; position: absolute; left: 50%; top: -4px; transform: translate(-50%, -100%); padding: 2px 6px; border-radius: 4px; background: var(--asphalt); color: var(--on-asphalt); font: 500 11px/16px var(--font-sans); letter-spacing: 0; animation: av-rise var(--dur-2) var(--ease-out); }

/* ---------- Field / Input ---------- */
.av-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.av-field__label { font: 500 12px/16px var(--font-sans); letter-spacing: .01em; color: var(--ink-2); display: flex; gap: 4px; align-items: baseline; }
.av-field__req { color: var(--danger); }
.av-field__hint { font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.av-field__error { font: 500 12px/16px var(--font-sans); color: var(--danger); display: flex; gap: 4px; align-items: flex-start; }
.av-field__error .av-icon { width: 14px; height: 14px; margin-top: 1px; }

.av-input {
  --h: var(--control-md, 40px);
  position: relative; display: flex; align-items: center;
  height: var(--h); min-width: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, background-color var(--dur-1) ease;
}
.av-input:hover { border-color: var(--ink-3); }
.av-input:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.av-input--invalid, .av-input--invalid:hover { border-color: var(--danger); }
.av-input--invalid:focus-within { box-shadow: 0 0 0 1px var(--danger); border-color: var(--danger); }
.av-input--sm { --h: var(--control-sm, 32px); border-radius: 8px; }
.av-input--lg { --h: var(--control-lg, 48px); font-size: 15px; }
.av-input--disabled { background: var(--surface-2); color: var(--ink-3); pointer-events: none; }
.av-input__el {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  padding: 0 var(--space-3);
  font: 400 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.av-input--lg .av-input__el { font-size: 15px; }
.av-input__el::placeholder { color: var(--ink-3); opacity: 1; }
.av-input__el:focus-visible { box-shadow: none; }
.av-input--mono .av-input__el { font: 500 13px/20px var(--font-mono); letter-spacing: .02em; }
.av-input__icon { margin-left: var(--space-3); color: var(--ink-3); }
.av-input__icon + .av-input__el { padding-left: var(--space-2); }
.av-input__affix { padding: 0 var(--space-3); color: var(--ink-3); font: 500 13px/20px var(--font-sans); white-space: nowrap; }
.av-input__affix--pre { padding-right: 0; }
.av-input__affix--suf { padding-left: 0; }
.av-input__kbd { margin-right: 8px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); font: 500 11px/1 var(--font-mono); }
.av-input__clear { margin-right: 6px; width: 24px; height: 24px; border: 0; background: transparent; border-radius: 6px; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.av-input__clear:hover { background: var(--surface-3); color: var(--ink); }
textarea.av-input__el { padding: 10px var(--space-3); resize: vertical; min-height: 88px; }
.av-input--area { height: auto; align-items: stretch; }
select.av-input__el { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.av-input__chev { position: absolute; right: 10px; pointer-events: none; color: var(--ink-3); }

/* ---------- Checkbox / Switch ---------- */
.av-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; line-height: 20px; }
.av-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.av-check__box {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; color: var(--on-signal);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring);
}
.av-check__box .av-icon { opacity: 0; transform: scale(.4); transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-spring); }
.av-check:hover .av-check__box { border-color: var(--ink-3); }
.av-check input:checked + .av-check__box { background: var(--signal); border-color: var(--focus); }
.av-check input:checked + .av-check__box .av-icon { opacity: 1; transform: none; }
.av-check input:focus-visible + .av-check__box { box-shadow: var(--focus-ring); }
.av-check input:active + .av-check__box { transform: scale(.9); }

.av-switch__track {
  width: 40px; height: 24px; flex: none; border-radius: var(--radius-full);
  background: var(--surface-3); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  position: relative; transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.av-switch__track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3); transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2) ease, width var(--dur-1) ease;
}
.av-check input:checked + .av-switch__track { background: var(--signal); box-shadow: inset 0 0 0 1.5px var(--focus); }
.av-check input:checked + .av-switch__track::after { transform: translateX(16px); background: var(--on-signal); }
.av-check input:focus-visible + .av-switch__track { box-shadow: var(--focus-ring); }

/* ---------- Segmented ---------- */
.av-seg {
  position: relative; display: inline-flex; align-items: stretch;
  padding: 3px; gap: 2px; height: 40px;
  background: var(--surface-3); border-radius: var(--radius-full);
  isolation: isolate; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.av-seg--sm { height: 32px; }
.av-field > .av-seg:not(.av-seg--block) { align-self: flex-start; }
.av-seg--block { display: flex; width: 100%; }
.av-seg--block .av-seg__opt { flex: 1; }
.av-seg__thumb {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0;
  width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: var(--radius-full); background: var(--surface);
  box-shadow: 0 1px 2px rgba(19, 21, 25, .12), 0 0 0 1px var(--line);
  transition: transform var(--dur-2) var(--ease-in-out), width var(--dur-2) var(--ease-in-out);
}
.av-seg__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px; border: 0; background: transparent; border-radius: var(--radius-full);
  font: 500 13px/1 var(--font-sans); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: color var(--dur-1) ease;
}
.av-seg__opt:hover { color: var(--ink); }
.av-seg__opt[aria-pressed="true"], .av-seg__opt[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.av-seg__count { font: 500 11px/1 var(--font-mono); color: var(--ink-3); }
.av-seg--dark { background: var(--asphalt-2); }
.av-seg--dark .av-seg__thumb { background: var(--signal); box-shadow: none; }
.av-seg--dark .av-seg__opt { color: var(--on-asphalt-2); }
.av-seg--dark .av-seg__opt:hover { color: var(--on-asphalt); }
.av-seg--dark .av-seg__opt[aria-pressed="true"], .av-seg--dark .av-seg__opt[aria-selected="true"] { color: var(--on-signal); }

/* ---------- FilterChip ---------- */
.av-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-2);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring);
}
.av-chip:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface); }
.av-chip .av-icon { width: 15px; height: 15px; }
.av-chip--set { border-style: solid; border-color: var(--focus); background: var(--signal-soft); color: var(--ink); padding-right: 4px; animation: av-pop var(--dur-2) var(--ease-spring); }
.av-chip--set:hover { background: var(--signal-soft); }
.av-chip__label { color: var(--ink-3); }
.av-chip--set .av-chip__label { color: var(--ink-2); }
.av-chip__value { font-weight: 600; color: var(--ink); }
.av-chip__x { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.av-chip__x:hover { background: var(--surface); color: var(--ink); }

/* ---------- Weekday picker (Schedule) ---------- */
.av-days { display: flex; gap: 6px; flex-wrap: wrap; }
.av-day {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font: 600 13px/1 var(--font-sans); cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring);
}
.av-day:hover { border-color: var(--ink-3); color: var(--ink); }
.av-day[aria-pressed="true"] { background: var(--asphalt); border-color: var(--asphalt); color: var(--signal); }
.av-day:active { transform: scale(.92); }
.av-schedule { display: flex; flex-direction: column; gap: var(--space-3); }
.av-schedule__time { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.av-schedule__time .av-input { width: 136px; }
.av-schedule--allday .av-schedule__time .av-input { opacity: .45; pointer-events: none; }

/* ---------- Steps ---------- */
.av-steps { display: flex; gap: var(--space-2); align-items: center; }
.av-step { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font: 500 12px/16px var(--font-sans); }
.av-step__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); font: 600 12px/1 var(--font-display); transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.av-step--done .av-step__n { background: var(--asphalt); color: var(--signal); }
.av-step--current { color: var(--ink); }
.av-step--current .av-step__n { background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 1.5px var(--focus); }
.av-steps__bar { flex: 1; min-width: 24px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.av-steps__bar i { display: block; height: 100%; background: var(--focus); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }

/* ---------- Card ---------- */
.av-card {
  position: relative; min-width: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.av-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; min-height: 52px; }
.av-card__title { margin: 0; font: 600 16px/22px var(--font-sans); display: flex; align-items: center; gap: 8px; }
.av-card__title .av-icon { color: var(--ink-3); }
.av-card__meta { color: var(--ink-3); font: 400 12px/16px var(--font-sans); }
.av-card__action { margin-left: auto; }
.av-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.av-card__body--flush { padding: var(--space-3) 0 0; }
.av-card__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-2); }
.av-card--sunken { background: var(--surface-2); box-shadow: none; }
.av-card--asphalt {
  background: var(--asphalt); color: var(--on-asphalt); border-color: transparent; box-shadow: none;
  border-radius: var(--radius-lg);
}
.av-card--asphalt .av-card__title { color: var(--on-asphalt); }
.av-card--asphalt .av-card__title .av-icon, .av-card--asphalt .av-card__meta { color: var(--on-asphalt-2); }
.av-card--asphalt a { color: var(--signal); }
/* Фирменная фаска: срез верхнего правого угла */
.av-notch { clip-path: polygon(0 0, calc(100% - var(--notch, 14px)) 0, 100% var(--notch, 14px), 100% 100%, 0 100%); }
.av-card--notch { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* ---------- KPI ---------- */
.av-kpi { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 132px; }
.av-kpi__top { display: flex; align-items: flex-start; gap: var(--space-2); }
.av-kpi__label { font: 500 12px/16px var(--font-sans); letter-spacing: .01em; color: var(--ink-3); flex: 1; }
.av-kpi__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.av-kpi__value { font: 600 30px/34px var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: auto; }
.av-kpi__unit { font-size: .6em; color: var(--ink-3); margin-left: .18em; font-weight: 500; }
.av-kpi__foot { display: flex; align-items: center; gap: 8px; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.av-delta { display: inline-flex; align-items: center; gap: 2px; font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-delta .av-icon { width: 14px; height: 14px; }
.av-delta--up { color: var(--ok); }
.av-delta--down { color: var(--danger); }
.av-kpi--instrument { background: var(--asphalt); color: var(--on-asphalt); border-color: transparent; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.av-kpi--instrument .av-kpi__label, .av-kpi--instrument .av-kpi__foot, .av-kpi--instrument .av-kpi__unit { color: var(--on-asphalt-2); }
.av-kpi--instrument .av-kpi__value { color: var(--signal); }
.av-kpi--instrument .av-kpi__icon { background: var(--asphalt-2); color: var(--signal); }
.av-kpi--instrument .av-delta--up { color: var(--chart-2); }
.av-kpi--warn .av-kpi__icon { background: var(--warn-soft); color: var(--warn); }
.av-kpi--warn .av-kpi__value { color: var(--warn); }

/* ---------- StatStrip ---------- */
.av-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.av-strip__item { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); min-width: 0; }
.av-strip__item:first-child { border-left: 0; }
.av-strip__label { font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.av-strip__value { font: 600 20px/24px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-strip__value small { font-size: .65em; color: var(--ink-3); margin-left: .15em; }
.av-strip__item--accent .av-strip__value { color: var(--signal-ink); }
.av-strip--asphalt .av-strip__item { border-color: var(--asphalt-2); }
.av-strip--asphalt .av-strip__label, .av-strip--asphalt .av-strip__value small { color: var(--on-asphalt-2); }
.av-strip--asphalt .av-strip__item--accent .av-strip__value { color: var(--signal); }

/* ---------- BarChart ---------- */
.av-chart { --h: 220px; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; }
.av-chart__y { display: flex; flex-direction: column; justify-content: space-between; height: var(--h); font: 500 10px/1 var(--font-mono); color: var(--on-asphalt-2); text-align: right; padding: 0 0 0 0; transform: translateY(5px); }
.av-chart__plot { position: relative; height: var(--h); display: flex; align-items: flex-end; gap: var(--gap, 8px); border-bottom: 1px solid var(--chart-grid); }
.av-chart__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.av-chart__grid i { height: 1px; background: var(--chart-grid); }
.av-chart__grid i:last-child { background: transparent; }
.av-chart__col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.av-chart__bar {
  width: 100%; max-width: 40px; min-height: 2px;
  height: var(--v); background: var(--series, var(--chart-1));
  border-radius: 6px 6px 2px 2px;
  transform-origin: bottom; animation: av-grow-y var(--dur-4, 800ms) var(--ease-out) both; animation-delay: calc(var(--i) * 40ms);
  transition: opacity var(--dur-1) ease, height var(--dur-3) var(--ease-out), background-color var(--dur-2) ease;
}
.av-chart__plot:hover .av-chart__bar { opacity: .35; }
.av-chart__plot:hover .av-chart__col:hover .av-chart__bar { opacity: 1; }
.av-chart__col--today .av-chart__bar { box-shadow: 0 0 0 2px var(--asphalt), 0 0 0 3.5px var(--series, var(--chart-1)); }
.av-chart__tip {
  position: absolute; bottom: calc(var(--v) + 10px); left: 50%; transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: 8px; background: var(--surface); color: var(--ink);
  font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; z-index: 2;
  transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.av-chart__tip small { display: block; font: 400 11px/14px var(--font-sans); color: var(--ink-3); }
.av-chart__col:hover .av-chart__tip { opacity: 1; transform: translate(-50%, 0); }
.av-chart__x { grid-column: 2; display: flex; gap: var(--gap, 8px); padding-top: 8px; }
.av-chart__x span { flex: 1; text-align: center; font: 500 10px/14px var(--font-mono); color: var(--on-asphalt-2); white-space: nowrap; overflow: hidden; }
.av-chart--profit { --series: var(--chart-2); }

/* ---------- Meter ---------- */
.av-meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.av-meter__label { font: 500 13px/18px var(--font-sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-meter__value { font: 600 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-meter__track { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.av-meter__fill { height: 100%; width: var(--p); background: var(--meter); border-radius: inherit; transform-origin: left; animation: av-grow-x var(--dur-4, 800ms) var(--ease-out) both; transition: width var(--dur-3) var(--ease-out); }
.av-meter--warn .av-meter__fill { background: var(--warn); }
.av-meter--ok .av-meter__fill { background: var(--ok); }
.av-meter--danger .av-meter__fill { background: var(--danger); }

/* ---------- Table ---------- */
.av-table-wrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; }
.av-table-scroll { overflow-x: auto; }
.av-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--font-sans); }
.av-table th {
  position: sticky; top: 0; z-index: 1;
  height: 40px; padding: 0 var(--space-4);
  background: var(--surface-2); color: var(--ink-3);
  font: 500 12px/16px var(--font-sans); letter-spacing: .01em; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.av-table th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.av-table th button:hover { color: var(--ink); }
.av-table td { height: 52px; padding: 0 var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.av-table tr:last-child td { border-bottom: 0; }
.av-table--dense td { height: 44px; }
.av-table .is-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-table .is-center { text-align: center; }
.av-table .is-nowrap { white-space: nowrap; }
.av-table .is-strong { font-weight: 600; }
.av-table tbody tr { transition: background-color var(--dur-1) ease; }
.av-table--click tbody tr { cursor: pointer; }
.av-table--click tbody tr:hover td, .av-table tbody tr.is-selected td { background: var(--surface-2); }
.av-table tbody tr.is-selected td { background: var(--signal-soft); }
.av-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--focus); }
.av-table__chev { width: 36px; padding-right: 12px !important; color: var(--ink-3); }
.av-table__chev .av-icon { opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out); }
.av-table--click tbody tr:hover .av-table__chev .av-icon { opacity: 1; transform: none; }
.av-table tbody tr { animation: av-fade var(--dur-3) ease both; }
.av-table__cellname { display: flex; flex-direction: column; min-width: 0; }
.av-table__cellname > b { font-weight: 600; }
.av-table__cellname > span { font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.av-table-state td { height: auto; padding: 0; }
.av-card__body--flush > .av-table-wrap { border: 0; border-top: 1px solid var(--line); box-shadow: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.av-table tfoot td { height: 48px; background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }

/* ---------- Pagination ---------- */
.av-pager { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.av-pager__info { font: 400 13px/18px var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-pager__info b { color: var(--ink); font-weight: 600; }
.av-pager__pages { display: flex; gap: 2px; margin-left: auto; }
.av-pager__p { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; }
.av-pager__p:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.av-pager__p[aria-current="page"] { background: var(--asphalt); color: var(--signal); font-weight: 700; }
.av-pager__p:disabled { opacity: .4; cursor: default; }
.av-pager__gap { width: 24px; text-align: center; color: var(--ink-3); align-self: center; }
.av-pager__size { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--font-sans); color: var(--ink-3); }
.av-pager__size .av-input { width: 76px; }

/* ---------- Skeleton ---------- */
.av-skel {
  display: block; height: var(--h, 14px); width: var(--w, 100%); border-radius: var(--r, 6px);
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-3) 40%, var(--surface-2) 50%, var(--surface-3) 60%, var(--surface-3) 100%);
  background-size: 300% 100%;
  animation: av-shimmer 1.4s linear infinite;
}
.av-card--asphalt .av-skel { background: linear-gradient(90deg, var(--asphalt-2) 40%, var(--chart-grid) 50%, var(--asphalt-2) 60%); background-size: 300% 100%; }

/* ---------- ListState: loading / empty / error ---------- */
.av-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); }
.av-state__art { position: relative; width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: var(--space-2); }
.av-state__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line-strong); animation: av-wheel 14s linear infinite; }
.av-state__art .av-icon { width: 28px; height: 28px; color: var(--ink-2); }
.av-state__title { margin: 0; font: 600 16px/22px var(--font-sans); }
.av-state__text { margin: 0; max-width: 380px; color: var(--ink-3); font: 400 14px/20px var(--font-sans); }
.av-state__code { font: 500 11px/16px var(--font-mono); color: var(--ink-3); background: var(--surface-2); padding: 4px 8px; border-radius: 6px; }
.av-state--error .av-state__ring { border-style: solid; border-color: var(--danger); animation: none; opacity: .5; }
.av-state--error .av-state__art { background: var(--danger-soft); border-radius: 50%; }
.av-state--error .av-state__art .av-icon { color: var(--danger); }
.av-state--compact { padding: var(--space-8) var(--space-4); }
.av-state-loading { padding: var(--space-2) 0; }
.av-state-loading__row { display: grid; grid-template-columns: 36px 1fr 96px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.av-state-loading__row:last-child { border-bottom: 0; }
.av-state-loading__row > div { display: flex; flex-direction: column; gap: 6px; }

/* ---------- RecordCard (карточки списков: продажи, долги, клиенты) ---------- */
.av-record {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); text-align: left; width: 100%; color: var(--ink);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, border-color var(--dur-1) ease;
}
button.av-record { cursor: pointer; font: inherit; }
.av-record--click:hover, button.av-record:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.av-record__top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.av-record__title { font: 600 14px/20px var(--font-sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-record__amount { margin-left: auto; font: 600 20px/24px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-record__amount small { font-size: .65em; color: var(--ink-3); margin-left: .15em; }
.av-record__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.av-record__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.av-record__meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.av-record__meta .av-icon { width: 14px; height: 14px; }
.av-record__note { font: 400 13px/18px var(--font-sans); color: var(--ink-2); background: var(--surface-2); padding: 8px 10px; border-radius: 8px; }
.av-record__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.av-record__fig { display: flex; flex-direction: column; gap: 2px; }
.av-record__fig > span { font: 400 11px/14px var(--font-sans); color: var(--ink-3); }
.av-record__fig > b { font: 600 14px/18px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-records { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.av-records > * { animation: av-rise var(--dur-3) var(--ease-out) both; }
.av-records > *:nth-child(2) { animation-delay: 40ms; } .av-records > *:nth-child(3) { animation-delay: 80ms; }
.av-records > *:nth-child(4) { animation-delay: 120ms; } .av-records > *:nth-child(5) { animation-delay: 160ms; }
.av-records > *:nth-child(n+6) { animation-delay: 200ms; }

/* ---------- Banner ---------- */
.av-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--info-soft); color: var(--ink); }
.av-banner__icon { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--info); }
.av-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-banner__title { font: 600 14px/20px var(--font-sans); margin: 0; }
.av-banner__text { font: 400 13px/18px var(--font-sans); color: var(--ink-2); margin: 0; }
.av-banner__actions { display: flex; gap: var(--space-2); align-items: center; align-self: center; flex-wrap: wrap; }
.av-banner--warn { background: var(--warn-soft); } .av-banner--warn .av-banner__icon { color: var(--warn); }
.av-banner--danger { background: var(--danger-soft); } .av-banner--danger .av-banner__icon { color: var(--danger); }
.av-banner--ok { background: var(--ok-soft); } .av-banner--ok .av-banner__icon { color: var(--ok); }
.av-banner--neutral { background: var(--surface-2); } .av-banner--neutral .av-banner__icon { color: var(--ink-2); }
.av-banner--compact { padding: var(--space-3) var(--space-4); }
.av-banner--compact .av-banner__icon { width: 28px; height: 28px; border-radius: 8px; }

/* ---------- Disclosure ---------- */
.av-disc { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.av-disc__head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; border-radius: var(--radius-md); min-height: 48px; }
.av-disc__head:hover { background: var(--surface-2); }
.av-disc__head:focus-visible { box-shadow: var(--focus-ring); }
.av-disc__title { font: 600 14px/20px var(--font-sans); flex: 1; display: flex; align-items: center; gap: 8px; }
.av-disc__title .av-icon { color: var(--ink-3); }
.av-disc__meta { font: 400 12px/16px var(--font-sans); color: var(--ink-3); white-space: nowrap; }
.av-disc__chev { color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out); }
.av-disc[data-open="true"] .av-disc__chev { transform: rotate(180deg); }
.av-disc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
.av-disc[data-open="true"] .av-disc__panel { grid-template-rows: 1fr; }
.av-disc__inner { overflow: hidden; }
.av-disc__content { padding: var(--space-2) var(--space-4) var(--space-4); }
.av-disc--flat { border: 0; background: transparent; }

/* ---------- Tree (Зарплата) ---------- */
.av-tree { display: flex; flex-direction: column; }
.av-tree__node { position: relative; }
.av-tree__row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px var(--space-4); padding-left: calc(var(--space-4) + var(--lvl, 0) * 28px); border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color var(--dur-1) ease; }
.av-tree__row:hover { background: var(--surface-2); }
.av-tree__row--leaf { cursor: default; }
.av-tree__row--leaf:hover { background: transparent; }
.av-tree__toggle { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out); }
.av-tree__node[data-open="true"] > .av-tree__row .av-tree__toggle { transform: rotate(90deg); }
.av-tree__bullet { width: 24px; flex: none; display: grid; place-items: center; }
.av-tree__bullet i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.av-tree__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.av-tree__label b { font-weight: 600; }
.av-tree__meta { color: var(--ink-3); font: 400 12px/16px var(--font-sans); white-space: nowrap; }
.av-tree__amount { font: 600 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 110px; }
.av-tree__row[data-lvl="0"] { background: var(--surface-2); }
.av-tree__row[data-lvl="0"] .av-tree__amount { font: 600 18px/22px var(--font-display); }
.av-tree__row[data-lvl="0"] .av-tree__label b { font: 600 14px/20px var(--font-display); letter-spacing: .01em; }
.av-tree__kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
.av-tree__node[data-open="true"] > .av-tree__kids { grid-template-rows: 1fr; }
.av-tree__kids > div { overflow: hidden; position: relative; }
.av-tree__kids > div::before { content: ""; position: absolute; top: 0; bottom: 24px; left: calc(var(--space-4) + var(--lvl, 0) * 28px + 11.5px); width: 1px; background: var(--line-strong); opacity: .5; }

/* ==========================================================================
   Каркас кабинета: AppShell = Sidebar + (Topbar + main) ; на узком — TabBar + Sheet
   Адаптив через container queries (контейнер .av-shell), брейкпоинт 1024px.
   ========================================================================== */
.av-shell { container: shell / inline-size; position: relative; background: var(--canvas); min-height: 100vh; }
.av-shell__grid { display: grid; grid-template-columns: var(--sidebar-w, 256px) minmax(0, 1fr); min-height: inherit; height: 100%; background: linear-gradient(90deg, var(--asphalt) var(--sidebar-w, 256px), transparent var(--sidebar-w, 256px)); }
.av-shell__main { min-width: 0; display: flex; flex-direction: column; }
.av-shell__content { flex: 1; width: 100%; max-width: var(--content-max, 1480px); padding: var(--space-6) var(--space-8) var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); container: content / inline-size; }
.av-shell--fixed-h { min-height: 0; height: 100%; }
.av-shell--fixed-h .av-shell__grid { height: 100%; }
.av-shell--fixed-h .av-shell__main { overflow-y: auto; }
.av-shell--fixed-h .av-side { height: 100%; }

/* ---------- Sidebar ---------- */
.av-side {
  position: sticky; top: 0; height: 100vh; z-index: var(--z-nav, 20);
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--asphalt); color: var(--on-asphalt);
  padding: var(--space-5) var(--space-3) var(--space-3);
  overflow: hidden; box-shadow: inset -1px 0 0 var(--asphalt-2);
}
.av-shell--fixed-h .av-side { height: 100%; }
.av-side__brand { padding: 0 var(--space-3) var(--space-4); display: flex; align-items: center; text-decoration: none; color: inherit; }
.av-side__scroll { flex: 1; overflow-y: auto; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); scrollbar-width: thin; scrollbar-color: var(--asphalt-2) transparent; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 20px; }
.av-side__nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.av-side__group { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-asphalt-2); padding: var(--space-4) var(--space-3) var(--space-2); display: flex; align-items: center; gap: 10px; }
.av-side__group::after { content: ""; flex: 1; height: 1px; background: var(--asphalt-2); }
.av-side__item {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--on-asphalt-2); font: 500 14px/20px var(--font-sans); text-decoration: none !important;
  white-space: nowrap; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.av-side__item .av-icon { transition: color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring); }
.av-side__item:hover { background: var(--asphalt-2); color: var(--on-asphalt); }
.av-side__item:hover .av-icon { transform: translateX(1px); }
.av-side__item[aria-current="page"] { background: var(--asphalt-2); color: var(--on-asphalt); font-weight: 600; }
.av-side__item[aria-current="page"] .av-icon { color: var(--signal); }
.av-side__item:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.av-side__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--signal); color: var(--on-signal); font: 700 11px/20px var(--font-mono); text-align: center; }
/* скользящий индикатор активного пункта */
.av-side__ind {
  position: absolute; left: calc(var(--space-3) * -1); top: 0; width: 4px; height: 20px;
  border-radius: 0 4px 4px 0; background: var(--signal);
  transform: translateY(var(--y, 0)); opacity: var(--o, 0);
  transition: transform var(--dur-2) var(--ease-in-out), opacity var(--dur-1) ease;
}
.av-side__foot { border-top: 1px solid var(--asphalt-2); padding: var(--space-3) var(--space-2) 0; display: flex; align-items: center; gap: var(--space-3); }
.av-side__user { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-side__name { font: 600 13px/18px var(--font-sans); color: var(--on-asphalt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-side__role { font: 400 12px/16px var(--font-sans); color: var(--on-asphalt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-side__role .av-mono { font-size: 11px; color: var(--on-asphalt-2); }

/* ---------- Topbar ---------- */
.av-top {
  position: sticky; top: 0; z-index: var(--z-sticky, 10);
  min-height: var(--topbar-h, 72px); display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.av-top__titles { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.av-top__title { margin: 0; font: 650 28px/32px var(--font-display); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 12px; }
.av-top__count { font: 500 14px/20px var(--font-mono); color: var(--ink-3); letter-spacing: 0; }
.av-top__sub { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-3); }
.av-top__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.av-top__brand { display: none; text-decoration: none; color: inherit; line-height: 0; }

/* ---------- TabBar (мобильный) ---------- */
.av-tabs {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav, 20);
  height: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px)); padding: 6px 8px env(safe-area-inset-bottom, 0px);
  background: var(--asphalt); grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.av-tab { border: 0; background: transparent; color: var(--on-asphalt-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 500 11px/14px var(--font-sans); cursor: pointer; border-radius: 12px; }
.av-tab__pill { width: 56px; height: 30px; border-radius: var(--radius-full); display: grid; place-items: center; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring); }
.av-tab[aria-current="page"] { color: var(--on-asphalt); font-weight: 600; }
.av-tab[aria-current="page"] .av-tab__pill { background: var(--signal); color: var(--on-signal); }
.av-tab:active .av-tab__pill { transform: scale(.92); }

/* ---------- Responsive shell (контейнер < 1024px) ---------- */
@container shell (max-width: 1023px) {
  .av-shell__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; background: none; }
  .av-side { display: none; }
  .av-tabs { display: grid; position: sticky; bottom: 0; }
  .av-top {
    padding: var(--space-3) var(--space-4); min-height: 60px; gap: var(--space-2) var(--space-3);
    flex-wrap: wrap; align-items: center;
  }
  .av-top__brand { display: block; flex: none; }
  .av-top__titles { flex: 1 1 0; min-width: 0; }
  .av-top__title {
    font-size: 22px; line-height: 26px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .av-top__sub { display: none; }
  .av-top__actions {
    flex: 0 0 100%;
    justify-content: flex-start;
  }
  .av-top .av-plan { flex: none; }
  .av-top .av-plan__meta { display: none; }
  .av-shell__content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-4); }
}

/* ---------- Dialog ---------- */
.av-dialog-layer { position: fixed; inset: 0; z-index: var(--z-dialog, 60); display: grid; place-items: center; padding: var(--space-6); }
.av-dialog-layer--inline { position: absolute; }
.av-scrim { position: absolute; inset: 0; background: var(--scrim); animation: av-fade var(--dur-2) ease both; backdrop-filter: blur(2px); }
.av-dialog {
  position: relative; width: min(var(--dialog-w, 560px), 100%); max-height: min(88vh, 100%);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); animation: av-pop var(--dur-3) var(--ease-out) both;
  overflow: hidden;
}
.av-dialog--lg { width: min(760px, 100%); }
.av-dialog--xl { width: min(960px, 100%); }
.av-dialog__head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--line); }
.av-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.av-dialog__title { margin: 0; font: 650 20px/24px var(--font-display); letter-spacing: -0.005em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.av-dialog__sub { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-3); }
.av-dialog__body { padding: var(--space-5) var(--space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.av-dialog__foot { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-2); }
.av-dialog__foot .av-spacer { flex: 1; }
@container (max-width: 640px) {
  .av-dialog-layer { padding: 0; align-items: end; }
  .av-dialog { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: av-sheet var(--dur-3) var(--ease-out) both; }
}

/* ---------- Sheet (мобильный «Ещё») ---------- */
.av-sheet-layer { position: fixed; inset: 0; z-index: var(--z-dialog, 60); display: flex; align-items: flex-end; }
.av-sheet-layer--inline { position: absolute; }
.av-sheet {
  position: relative; width: 100%; max-height: 86%; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-3); animation: av-sheet var(--dur-3) var(--ease-out) both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.av-sheet__grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 10px auto 4px; }
.av-sheet__head { display: flex; align-items: center; padding: var(--space-2) var(--space-5) var(--space-3); }
.av-sheet__title { margin: 0; font: 650 18px/22px var(--font-display); flex: 1; }
.av-sheet__body { overflow-y: auto; padding: 0 var(--space-4) var(--space-5); }
.av-sheet__group { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-3) var(--space-1) var(--space-2); }
.av-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.av-sheet__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 500 12px/15px var(--font-sans); text-align: center; cursor: pointer; animation: av-rise var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms + 120ms); }
.av-sheet__item .av-icon { color: var(--ink-2); }
.av-sheet__item:hover { border-color: var(--line-strong); }
.av-sheet__item[aria-current="page"] { background: var(--asphalt); color: var(--on-asphalt); border-color: var(--asphalt); }
.av-sheet__item[aria-current="page"] .av-icon { color: var(--signal); }

/* ---------- Page toolbar (фильтры над списком) ---------- */
.av-toolbar { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.av-toolbar__row { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.av-toolbar__row > .av-field { flex: 1 1 150px; }
.av-toolbar__row > .av-field--grow { flex: 3 1 280px; }
.av-toolbar__actions { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.av-section-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.av-section-head h2 { margin: 0; font: 600 16px/22px var(--font-sans); }

/* ==========================================================================
   Касса (POS): каталог слева, чек справа. Чек = «бумажная» лента + asphalt-консоль оплаты.
   ========================================================================== */
.av-pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); gap: var(--space-5); align-items: start; }
.av-pos__col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.av-pos__receipt { position: sticky; top: calc(var(--topbar-h, 72px) + var(--space-4)); }
.av-pos__full { grid-column: 1 / -1; }
@container content (max-width: 899px) {
  .av-pos { grid-template-columns: minmax(0, 1fr); }
  .av-pos__receipt { position: static; }
}

/* ---------- Product search + suggestions ---------- */
.av-search { position: relative; }
.av-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-popover, 40);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: av-pop var(--dur-2) var(--ease-out) both; transform-origin: top;
}
.av-suggest--static { position: static; box-shadow: none; animation: none; }
.av-suggest__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center;
  flex: none; height: auto; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: normal; width: 100%;
}
.av-suggest__item:hover, .av-suggest__item[aria-selected="true"] { background: var(--signal-soft); }
.av-suggest__name { display: flex; flex-direction: column; min-width: 0; }
.av-suggest__name > b { font: 500 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-suggest__name b mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--signal-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.av-suggest__name > span { font: 500 11px/16px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.av-suggest__price { font: 600 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 88px; }
.av-suggest__foot { display: flex; gap: 12px; padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; font: 400 11px/16px var(--font-sans); color: var(--ink-3); }
.av-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--surface-3); color: var(--ink-2); font: 500 10px/1 var(--font-mono); }

/* ---------- Сканер камерой (только сенсорные устройства) ---------- */
.av-input__scan {
  display: none; flex: none; margin-right: 4px; width: 44px; height: calc(var(--h) - 8px); max-height: 44px;
  border: 0; border-radius: 8px; background: var(--surface-3); color: var(--ink);
  place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.av-input__scan:active { background: var(--signal-soft); }
@media (hover: none) and (pointer: coarse) {
  .av-input__scan { display: grid; }
}

/* Оверлей всегда тёмный — поверх видео, независимо от темы. */
.av-scan {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #000; color: #fff; overflow: hidden; z-index: var(--z-dialog, 60);
}
.av-scan::backdrop { background: #000; }
.av-scan__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-scan__stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.av-scan__frame {
  position: relative; width: min(84vw, 420px); aspect-ratio: 16 / 9; border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -2px;
  transition: outline-color var(--dur-2, 180ms) ease;
}
.av-scan__frame[data-state="success"] { outline-color: #C6F43B; outline-width: 4px; }
.av-scan__frame[data-state="error"] { outline-color: #FF8B7C; }
.av-scan__line {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; border-radius: 2px;
  background: #C6F43B; box-shadow: 0 0 12px #C6F43B; opacity: 0;
}
.av-scan__frame[data-state="scanning"] .av-scan__line { opacity: 1; animation: av-scan-sweep 1.8s var(--ease-in-out, ease-in-out) infinite alternate; }
@keyframes av-scan-sweep { from { top: 14%; } to { top: 86%; } }
@media (prefers-reduced-motion: reduce) {
  .av-scan__frame[data-state="scanning"] .av-scan__line { animation: none; }
}
.av-scan__top, .av-scan__bottom { position: absolute; left: 0; right: 0; display: flex; padding: 16px; }
.av-scan__top {
  top: 0; align-items: center; gap: 12px; padding-top: max(16px, env(safe-area-inset-top));
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
}
.av-scan__title { flex: 1; font: 600 16px/22px var(--font-sans); }
.av-scan__bottom {
  bottom: 0; flex-direction: column; align-items: center; gap: 14px; padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}
.av-scan__status {
  margin: 0; max-width: 420px; min-height: 22px; text-align: center; font: 500 15px/22px var(--font-sans);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.av-scan__status[data-state="success"] { color: #C6F43B; }
.av-scan__status[data-state="error"] { color: #FF8B7C; }
.av-scan__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.av-scan__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius-full, 999px);
  background: rgba(0, 0, 0, .45); color: #fff; font: 500 14px/20px var(--font-sans); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent;
}
.av-scan__btn[hidden] { display: none; }
.av-scan__btn--icon { width: 44px; padding: 0; justify-content: center; }
.av-scan__btn[aria-pressed="true"] { background: #C6F43B; border-color: #C6F43B; color: #0A0B0D; }

/* ---------- Service tiles ---------- */
.av-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--space-2); }
.av-svc {
  position: relative; min-height: var(--control-xl, 60px); padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--radius-sm);
  text-align: left; cursor: pointer; font: inherit;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1) ease, background-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.av-svc:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.av-svc:active { transform: scale(.97); }
.av-svc__name { font: 500 13px/17px var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.av-svc__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.av-svc__price { font: 600 14px/18px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-svc__plus { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.av-svc:hover .av-svc__plus { background: var(--signal); color: var(--on-signal); }
.av-svc__fly { position: absolute; left: 50%; top: 8px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--asphalt); color: var(--signal); font: 700 12px/16px var(--font-display); pointer-events: none; animation: av-float-up 700ms var(--ease-out) forwards; }

/* ---------- Receipt (бумажная лента) ---------- */
.av-receipt { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 4px var(--radius-md) var(--radius-md); box-shadow: var(--shadow-1); }
.av-receipt::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; z-index: 1;
  background: radial-gradient(circle at 6px -1px, var(--canvas) 5px, transparent 5.5px) 0 0 / 12px 7px repeat-x;
}
.av-receipt__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-3); flex-wrap: wrap; }
.av-receipt__no { font: 600 13px/18px var(--font-mono); }
.av-receipt__time { font: 400 12px/16px var(--font-sans); color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.av-receipt__lines { display: flex; flex-direction: column; border-top: 1px dashed var(--line-strong); }
.av-rline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sum" "meta ctrl";
  gap: 6px var(--space-3); align-items: center; padding: 12px var(--space-4); border-bottom: 1px dashed var(--line);
  animation: av-line-in var(--dur-3) var(--ease-spring) both;
}
.av-rline--new { animation: av-line-in var(--dur-3) var(--ease-spring) both, av-flash 1.4s ease-out .15s both; }
.av-rline__name { grid-area: name; min-width: 0; font: 500 14px/18px var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: start; }
.av-rline__meta { grid-area: meta; display: flex; gap: 6px; align-items: center; font: 400 12px/16px var(--font-sans); color: var(--ink-3); white-space: nowrap; overflow: hidden; min-width: 0; }
.av-rline__sum { grid-area: sum; text-align: right; display: flex; flex-direction: column; align-self: start; }
.av-rline__sum b { font: 600 15px/18px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-rline__sum span { font: 400 11px/14px var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-rline__ctrl { grid-area: ctrl; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.av-rline__del { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.av-rline__del:hover { background: var(--danger-soft); color: var(--danger); }
.av-qty { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.av-qty button { width: 28px; height: 30px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; border-radius: 7px; }
.av-qty button:hover { background: var(--surface-3); color: var(--ink); }
.av-qty output { min-width: 32px; text-align: center; font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.av-receipt__sums { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.av-receipt__sum { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.av-receipt__sum b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-receipt__sum--total { padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--line-strong); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.av-receipt__sum--total b { font: 650 22px/26px var(--font-display); }
.av-receipt__client { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.av-receipt__client-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.av-receipt__client-info > b { font: 600 13px/18px var(--font-sans); }
.av-receipt__client-info > span { display: flex; gap: 8px; align-items: center; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.av-receipt__empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ---------- Payment console (asphalt) ---------- */
.av-pay {
  background: var(--asphalt); color: var(--on-asphalt);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.av-pay__due { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.av-pay__due-label { font: 500 12px/16px var(--font-sans); color: var(--on-asphalt-2); }
.av-pay__due-value { font: 650 40px/40px var(--font-display); color: var(--signal); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.av-pay__due-value small { font-size: .5em; color: var(--on-asphalt-2); margin-left: .12em; }
.av-split { display: flex; flex-direction: column; gap: 8px; }
.av-split__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--asphalt-2); gap: 2px; }
.av-split__seg { height: 100%; transition: flex-grow var(--dur-3) var(--ease-in-out); min-width: 0; }
.av-split__seg--cash { background: var(--chart-1); }
.av-split__seg--card { background: var(--chart-2); }
.av-split__legend { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 12px/16px var(--font-sans); color: var(--on-asphalt-2); }
.av-split__legend b { color: var(--on-asphalt); font-weight: 600; font-variant-numeric: tabular-nums; }
.av-split__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.av-split__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.av-split__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.av-pchip { height: 30px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--on-asphalt-2); background: transparent; color: var(--on-asphalt); font: 500 12px/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.av-pchip:hover { background: var(--asphalt-2); }
.av-pchip[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.av-pay .av-field__label { color: var(--on-asphalt-2); }
.av-input--on-asphalt { background: var(--asphalt-2); border-color: var(--on-asphalt-2); color: var(--on-asphalt); }
.av-input--on-asphalt:hover { border-color: var(--on-asphalt); }
.av-input--on-asphalt:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.av-input--on-asphalt .av-input__affix, .av-input--on-asphalt .av-input__icon, .av-input--on-asphalt .av-input__chev { color: var(--on-asphalt-2); }
.av-input--on-asphalt .av-input__el::placeholder { color: var(--on-asphalt-2); }
.av-input--on-asphalt select option { background: var(--asphalt); color: var(--on-asphalt); }
.av-pay__divider { height: 1px; background: var(--asphalt-2); }
.av-pay__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.av-pay__actions .av-btn--span { grid-column: 1 / -1; }
.av-pay__row { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.av-pay__row > .av-field { flex: 1 1 180px; }
.av-pay__row > .av-btn { flex: 1 1 auto; }
.av-pay .av-disc { background: transparent; border-color: var(--asphalt-2); }
.av-pay .av-disc__head:hover { background: var(--asphalt-2); }
.av-pay .av-disc__title, .av-pay .av-disc__chev { color: var(--on-asphalt); }
.av-pay .av-disc__title .av-icon, .av-pay .av-disc__meta { color: var(--on-asphalt-2); }
.av-pay .av-check { color: var(--on-asphalt); }

/* ---------- Fiscal ---------- */
.av-fiscal { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.av-fiscal__info { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.av-fiscal__info b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Публичные страницы: лендинг, вход/регистрация, история, онлайн-запись, оферта.
   Тот же визуальный язык, без сайдбара. Контейнер .av-public (container queries).
   ========================================================================== */
.av-public { container: public / inline-size; min-height: 100vh; background: var(--canvas); color: var(--ink); }
.av-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-8); }
.av-grid-bg {
  background-image: radial-gradient(circle, var(--line) 1.2px, transparent 1.4px);
  background-size: 24px 24px; background-position: 0 0;
}

/* ---------- Public header ---------- */
.av-pubnav { position: sticky; top: 0; z-index: var(--z-sticky, 10); background: color-mix(in srgb, var(--canvas) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.av-pubnav__in { display: flex; align-items: center; gap: var(--space-8); height: 72px; }
.av-pubnav__links { display: flex; gap: var(--space-6); }
.av-pubnav__links a { color: var(--ink-2); font: 500 14px/20px var(--font-sans); position: relative; }
.av-pubnav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--focus); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.av-pubnav__links a:hover { color: var(--ink); text-decoration: none; }
.av-pubnav__links a:hover::after { transform: scaleX(1); }
.av-pubnav__cta { margin-left: auto; }

/* ---------- Hero ---------- */
.av-hero { padding: var(--space-6) 0 var(--space-12); }
.av-hero__panel {
  position: relative; overflow: hidden;
  background: var(--asphalt); color: var(--on-asphalt); border-radius: var(--radius-lg);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-8);
  padding: var(--space-12); min-height: 560px;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}
.av-hero__panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--asphalt-2) 1.2px, transparent 1.4px); background-size: 24px 24px; pointer-events: none; }
.av-hero__copy { position: relative; display: flex; flex-direction: column; gap: var(--space-6); justify-content: center; }
.av-hero__title { margin: 0; font: 700 72px/68px var(--font-display); letter-spacing: -0.02em; }
.av-hero__title em { font-style: normal; color: var(--signal); }
.av-hero__title .av-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 4px; }
.av-hero__title .av-word > span { display: inline-block; animation: av-word-up 700ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
@keyframes av-word-up { from { transform: translateY(105%); } to { transform: none; } }
.av-hero__lead { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--on-asphalt-2); max-width: 520px; }
.av-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.av-hero__stats { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-8); justify-content: start; padding-top: var(--space-6); border-top: 1px solid var(--asphalt-2); }
.av-hero__stat b { display: block; font: 700 36px/40px var(--font-display); color: var(--signal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-hero__stat span { font: 400 13px/18px var(--font-sans); color: var(--on-asphalt-2); }
.av-hero__media { position: relative; min-height: 420px; }

/* Слот под фото: aspect + штриховка-плейсхолдер. В проде — <img class="av-photo__img"> */
.av-photo { position: relative; height: 100%; min-height: 320px; border-radius: var(--radius-md); overflow: hidden; background: var(--asphalt-2); }
.av-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-photo__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--asphalt-2) 0 10px, var(--chart-grid) 10px 11px); display: grid; place-items: center; }
.av-photo__ph span { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-asphalt-2); background: var(--asphalt); padding: 6px 10px; border-radius: 6px; }
.av-photo--light { background: var(--surface-3); }
.av-photo--light .av-photo__ph { background: repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--line) 10px 11px); }
.av-photo--light .av-photo__ph span { background: var(--surface); color: var(--ink-3); }
.av-float { position: absolute; background: var(--surface); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); animation: av-rise 600ms var(--ease-out) both, av-bob 6s ease-in-out 800ms infinite; }
@keyframes av-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Sections ---------- */
.av-section { padding: var(--space-24) 0 0; }
.av-section__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-12); max-width: 760px; }
.av-eyebrow { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 10px; }
.av-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--focus); }
.av-section__title { margin: 0; font: 700 48px/48px var(--font-display); letter-spacing: -0.015em; }
.av-section__lead { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--ink-2); }
.av-reveal { animation: av-rise 600ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

/* боли */
.av-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.av-pain { position: relative; padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease; }
.av-pain:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.av-pain__n { font: 500 12px/16px var(--font-mono); color: var(--ink-3); }
.av-pain__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
.av-pain h3 { margin: 0; font: 650 20px/24px var(--font-display); }
.av-pain p { margin: 0; color: var(--ink-2); }

/* модули */
.av-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.av-module { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-5); }
.av-module--dark { background: var(--asphalt); color: var(--on-asphalt); border-color: var(--asphalt); }
.av-module__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--signal); color: var(--on-signal); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.av-module h3 { margin: 0; font: 700 26px/28px var(--font-display); }
.av-module ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.av-module li { display: flex; gap: 10px; align-items: flex-start; }
.av-module li .av-icon { color: var(--signal-ink); margin-top: 1px; }
.av-module--dark li .av-icon { color: var(--signal); }
.av-module--dark li { color: var(--on-asphalt); }

/* почему */
.av-whys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.av-why { padding: var(--space-6) var(--space-5); border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: var(--space-3); }
.av-why__k { font: 700 44px/44px var(--font-display); color: var(--ink); }
.av-why h3 { margin: 0; font: 600 16px/22px var(--font-sans); }
.av-why p { margin: 0; color: var(--ink-2); }

/* тарифы */
.av-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.av-price { position: relative; padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-5); transition: transform var(--dur-2) var(--ease-out); }
.av-price:hover { transform: translateY(-4px); }
.av-price--pop { background: var(--asphalt); color: var(--on-asphalt); border-color: var(--asphalt); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.av-price__name { font: 700 22px/26px var(--font-display); display: flex; align-items: center; gap: 10px; }
.av-price__val { font: 700 56px/56px var(--font-display); letter-spacing: -0.02em; }
.av-price__val small { font: 500 14px/20px var(--font-sans); color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.av-price--pop .av-price__val { color: var(--signal); }
.av-price--pop .av-price__val small, .av-price--pop p { color: var(--on-asphalt-2); }
.av-price p { margin: 0; color: var(--ink-2); }
.av-price .av-btn { margin-top: auto; }

/* футер */
.av-footer { margin-top: var(--space-24); background: var(--asphalt); color: var(--on-asphalt); }
.av-footer__in { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-12); padding-bottom: var(--space-12); flex-wrap: wrap; }
.av-footer__slogan { font: 600 20px/26px var(--font-display); color: var(--on-asphalt-2); flex: 1; min-width: 260px; }

@container public (max-width: 1100px) {
  .av-hero__panel { grid-template-columns: 1fr; padding: var(--space-8); }
  .av-hero__title { font-size: 48px; line-height: 48px; }
  .av-pains, .av-modules, .av-prices { grid-template-columns: 1fr 1fr; }
  .av-whys { grid-template-columns: 1fr 1fr; }
}
@container public (max-width: 700px) {
  .av-wrap { padding: 0 var(--space-4); }
  .av-pubnav__links { display: none; }
  .av-hero__panel { padding: var(--space-6); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
  .av-hero__title { font-size: 40px; line-height: 40px; }
  .av-hero__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .av-hero__stat b { font-size: 26px; line-height: 30px; }
  .av-section { padding-top: var(--space-12); }
  .av-section__title { font-size: 34px; line-height: 36px; }
  .av-pains, .av-modules, .av-prices, .av-whys { grid-template-columns: 1fr; }
}

/* ---------- Auth ---------- */
.av-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--space-8) var(--space-4); position: relative; }
.av-auth__card { position: relative; width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); animation: av-pop var(--dur-3) var(--ease-out) both; }
.av-auth__card--wide { width: min(680px, 100%); }
.av-auth__brand { display: flex; align-items: center; justify-content: space-between; }
.av-auth__title { margin: 0; font: 650 28px/32px var(--font-display); letter-spacing: -0.01em; }
.av-auth__sub { margin: -12px 0 0; color: var(--ink-3); }
.av-auth__foot { font: 400 12px/16px var(--font-sans); color: var(--ink-3); text-align: center; }
.av-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.av-choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; text-align: left; font: 500 13px/17px var(--font-sans); color: var(--ink); transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring); }
.av-choice:hover { border-color: var(--ink-3); }
.av-choice .av-icon { color: var(--ink-3); }
.av-choice[aria-checked="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); background: var(--signal-soft); }
.av-choice[aria-checked="true"] .av-icon { color: var(--ink); }
.av-choice__tick { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 1.5px var(--focus); transform: scale(0); transition: transform var(--dur-2) var(--ease-spring); }
.av-choice[aria-checked="true"] .av-choice__tick { transform: scale(1); }
.av-choice-group { display: flex; flex-direction: column; gap: var(--space-2); }
.av-choice-group__title { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.av-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-4) 0; }
.av-wait__art { position: relative; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: var(--warn-soft); color: var(--warn); }
.av-wait__art::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed var(--warn); opacity: .6; animation: av-wheel 12s linear infinite; }
.av-wait__art--danger { background: var(--danger-soft); color: var(--danger); }
.av-wait__art--danger::before { border-style: solid; border-color: var(--danger); animation: none; opacity: .35; }
.av-wait__art .av-icon { width: 40px; height: 40px; }

/* ---------- History / Book / Offer ---------- */
.av-pubpage { padding: var(--space-12) 0 var(--space-24); display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.av-pubcard { width: min(720px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.av-pubcard__title { margin: 0; font: 700 36px/38px var(--font-display); letter-spacing: -0.015em; }
.av-pubcard__hint { margin: 0; color: var(--ink-2); font: 400 15px/22px var(--font-sans); }
.av-lookup { display: flex; gap: var(--space-2); }
.av-lookup .av-input { flex: 1; }
.av-timeline { width: min(720px, 100%); display: flex; flex-direction: column; position: relative; padding-left: 36px; }
.av-timeline::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 12px); }
.av-tl { position: relative; padding-bottom: var(--space-4); animation: av-rise var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.av-tl__dot { position: absolute; left: -36px; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: var(--asphalt); display: grid; place-items: center; color: var(--signal); }
.av-tl__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-1); }
.av-tl__top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.av-tl__date { font: 650 18px/22px var(--font-display); white-space: nowrap; }
.av-tl__km { font: 500 13px/18px var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.av-tl__works { display: flex; flex-wrap: wrap; gap: 6px; }
.av-tl__work { padding: 4px 10px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--line); font: 500 12px/16px var(--font-sans); }
.av-tl__master { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font: 400 12px/16px var(--font-sans); }
.av-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.av-slot { height: auto; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink); transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring); }
.av-slot__cap { font: 500 10px/1.2 var(--font-sans); }
.av-slot:hover:not(:disabled) { border-color: var(--ink); }
.av-slot:disabled { color: var(--ink-3); background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
.av-slot:disabled .av-slot__time { text-decoration: line-through; }
.av-slot[aria-pressed="true"] { background: var(--asphalt); border-color: var(--asphalt); color: var(--signal); transform: scale(1.04); }
.av-offer { width: min(760px, 100%); }
.av-offer h1 { font: 700 40px/42px var(--font-display); margin: 0 0 var(--space-6); }
.av-offer h2 { font: 650 20px/26px var(--font-display); margin: var(--space-8) 0 var(--space-3); }
.av-offer p, .av-offer li { font: 400 15px/24px var(--font-sans); color: var(--ink-2); }

/* ---------- ИИ-ассистент владельца ---------- */
.av-ai {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 30;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--space-3);
  pointer-events: none;
}
.av-ai__fab, .av-ai__panel { pointer-events: auto; }
.av-ai__fab {
  width: 56px; height: 56px; border: 0; border-radius: var(--radius-full);
  background: var(--signal); color: var(--on-signal); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-spring);
}
.av-ai__fab:hover { transform: translateY(-2px); }
.av-ai__fab:active { transform: scale(.96); }
.av-ai__fab:focus-visible { outline: none; box-shadow: var(--shadow-2), var(--focus-ring); }
.av-ai__panel {
  width: min(340px, calc(100vw - 32px)); max-height: min(460px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
  animation: av-pop var(--dur-3) var(--ease-out) both;
}
.av-ai__panel[hidden] { display: none; }
.av-ai__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.av-ai__title { flex: 1; font: 650 16px/20px var(--font-display); }
.av-ai__close {
  width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
}
.av-ai__close:hover { background: var(--surface-3); color: var(--ink); }
.av-ai__log { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.av-ai__msg {
  max-width: 100%; padding: var(--space-4);
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px var(--radius-md) var(--radius-md) var(--radius-md);
}
.av-ai__msg p { margin: 0; font: 400 14px/22px var(--font-sans); }
.av-ai__form {
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-3); border-top: 1px solid var(--line); background: var(--surface);
}
.av-ai__input {
  flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-3); padding: 0 var(--space-3);
  font: 400 14px/20px var(--font-sans);
}
.av-ai__input:disabled { cursor: not-allowed; }
.av-ai__send {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink-3); display: grid; place-items: center; cursor: not-allowed;
}
@container shell (max-width: 1023px) {
  .av-ai { right: var(--space-4); bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + var(--space-3)); }
}