:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #07101b;
  --color-header: rgba(7, 16, 27, .9);
  --color-nav: rgba(12, 24, 39, .96);
  --color-surface: #0e1a29;
  --color-surface-nested: #132235;
  --color-surface-elevated: #182a40;
  --color-control: #142438;
  --color-text: #f4f7fb;
  --color-text-secondary: #b6c2d2;
  --color-text-muted: #8292a8;
  --color-border: #293b52;
  --color-accent: #4b8dff;
  --color-accent-hover: #6ba2ff;
  --color-accent-active: #3378ee;
  --color-accent-ink: #ffffff;
  --color-success: #45d77a;
  --color-warning: #ffb54a;
  --color-danger: #ff6b72;
  --color-disabled: #66758a;
  --color-focus: #91b7ff;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, .32);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --control-height: 44px;
  --header-height: 70px;
  --bottom-nav-height: 84px;
  --sidebar-width: 220px;
  --content-max-width: 1120px;
  --topbar-sticky-offset: calc(var(--header-height) + env(safe-area-inset-top));
  --visual-viewport-bottom: 0px;
  --motion-feedback: 150ms;
  --motion-section: 190ms;
  --motion-list: 190ms;
  --motion-sheet: 230ms;
  --motion-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --motion-ease-emphasized: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: var(--motion-feedback);
  --motion-normal: var(--motion-section);
  --motion-modal: var(--motion-sheet);
  --motion-ease: var(--motion-ease-standard);
  --theme-transition-duration: 200ms;
  --theme-transition-easing: ease-out;
  --theme-shell-glow-dark:
    radial-gradient(circle at 20% 10%, rgba(54, 143, 255, .18), transparent 34rem),
    #07101b;
  --theme-shell-glow-light:
    radial-gradient(circle at 20% 10%, rgba(33, 112, 235, .14), transparent 34rem),
    #f1f5fa;
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f1f5fa;
  --color-header: rgba(247, 250, 253, .92);
  --color-nav: rgba(255, 255, 255, .97);
  --color-surface: #ffffff;
  --color-surface-nested: #f4f7fb;
  --color-surface-elevated: #ffffff;
  --color-control: #f5f8fc;
  --color-text: #142033;
  --color-text-secondary: #46566c;
  --color-text-muted: #607086;
  --color-border: #d7e0ea;
  --color-accent: #246de8;
  --color-accent-hover: #185dcc;
  --color-accent-active: #1454bc;
  --color-accent-ink: #ffffff;
  --color-success: #168a48;
  --color-warning: #a96100;
  --color-danger: #cc3843;
  --color-disabled: #9aa7b7;
  --color-focus: #1d64dc;
  --shadow-sm: 0 8px 22px rgba(36, 57, 82, .09);
  --shadow-lg: 0 20px 50px rgba(36, 57, 82, .16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  min-width: 0;
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--color-bg);
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    color var(--theme-transition-duration) var(--theme-transition-easing);
}
html, body { margin: 0; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--color-text);
  background-color: var(--color-bg);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    color var(--theme-transition-duration) var(--theme-transition-easing);
}
body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  transition: opacity var(--theme-transition-duration) var(--theme-transition-easing);
}
body::before {
  background: var(--theme-shell-glow-dark);
  opacity: 1;
}
body::after {
  background: var(--theme-shell-glow-light);
  opacity: 0;
}
[data-theme="light"] body::before { opacity: 0; }
[data-theme="light"] body::after { opacity: 1; }
#app { min-height: 100vh; min-height: 100dvh; }
html.modal-open,
body.modal-open { overflow: hidden; }
button, input, select, textarea { min-width: 0; font: inherit; }
input[type="date"] { min-width: 0; max-width: 100%; font-size: 16px; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.icon { width: 21px; height: 21px; flex: 0 0 auto; }

/* Верхняя панель */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--header-height) + env(safe-area-inset-top));
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) var(--space-3);
  background: var(--color-header);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  backdrop-filter: blur(18px);
}
.topbar__section { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.topbar__back, .userbar__action { width: var(--control-height); min-height: var(--control-height); padding: 0; display: grid; place-items: center; flex: 0 0 var(--control-height); color: var(--color-accent); background: var(--color-control); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.topbar__back:hover:not(:disabled), .userbar__action:hover:not(:disabled) { background: color-mix(in srgb, var(--color-control) 78%, var(--color-accent) 22%); border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-accent)); }
.topbar__back:active:not(:disabled), .userbar__action:active:not(:disabled) { transform: scale(.98); }
#section-title { min-width: 0; color: var(--color-text-secondary); font-size: clamp(.98rem, 3.2vw, 1.12rem); font-weight: 650; line-height: 1.18; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbar, .userbar__profile { display: flex; align-items: center; min-width: 0; }
.userbar { justify-content: flex-end; gap: var(--space-2); }
.notification-bell { position: relative; }
.notification-badge { position: absolute; top: -4px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: var(--color-danger); border: 2px solid var(--color-bg); border-radius: 999px; font-size: .66rem; line-height: 1; }
.userbar__profile { gap: var(--space-2); }
.userbar__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); border-radius: 50%; }
.userbar__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.18; }
.userbar__name { max-width: clamp(54px, 16vw, 110px); overflow: hidden; font-size: clamp(.76rem, 2.6vw, .875rem); font-weight: 750; line-height: 1.1; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.userbar__role { color: var(--color-text-muted); font-size: .75rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Экран входа и основная область */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login__card { width: 100%; max-width: 380px; padding: var(--space-7) var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), border-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing); }
.login__title { font-size: 1.4rem; font-weight: 800; }
.login__sub, .login__hint { color: var(--color-text-muted); font-size: .875rem; }
.login__sub { margin-top: calc(var(--space-2) * -1); }
.login__password, .login__password-change { width: 100%; }
.password-login-form, .password-change-form {
  width: 100%; display: flex; flex-direction: column; gap: var(--space-3); text-align: left;
}
.password-login-form label, .password-change-form label {
  display: flex; flex-direction: column; gap: 6px; color: var(--color-text-secondary);
  font-size: .82rem; font-weight: 650;
}
.password-login-form input, .password-change-form input {
  width: 100%; min-height: var(--control-height); padding: 10px var(--space-3);
  color: var(--color-text); background: var(--color-control);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.password-change-form p { margin: 0; color: var(--color-text-muted); font-size: .82rem; line-height: 1.45; }
.login__tg { min-height: 46px; display: flex; align-items: center; justify-content: center; }
.login__dev { width: 100%; }
.login__msg { width: 100%; padding: var(--space-3); color: var(--color-danger); font-size: .82rem; background: color-mix(in srgb, var(--color-danger) 9%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); border-radius: var(--radius-sm); }
.draft-owner-conflict { width: 100%; display: grid; gap: var(--space-3); text-align: left; }
.draft-owner-conflict h2 { margin: 0; font-size: 1.1rem; }
.draft-owner-conflict p { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.draft-owner-conflict__actions { display: grid; gap: var(--space-2); }
.devbox { width: 100%; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); padding-top: var(--space-4); border-top: 1px dashed var(--color-border); }
.devbox__label { color: var(--color-text-muted); font-size: .75rem; }
.view { width: 100%; max-width: 680px; min-width: 0; min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); margin: 0 auto; padding: var(--space-5) var(--space-4) calc(var(--bottom-nav-height) + var(--space-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-4); }
.view--enter-main { animation: viewEnterMain var(--motion-section) var(--motion-ease-standard) both; }
.view--enter-forward { animation: viewEnterForward var(--motion-section) var(--motion-ease-emphasized) both; }
.view--enter-back { animation: viewEnterBack var(--motion-section) var(--motion-ease-emphasized) both; }
@keyframes viewEnterMain { from { opacity: .86; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes viewEnterForward { from { opacity: .86; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes viewEnterBack { from { opacity: .86; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.list { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.list > .card { height: 100%; }

/* Навигация: мобильная снизу, на ПК слева */
.bottom-nav { position: fixed; z-index: 12; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; max-width: 100%; min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); overscroll-behavior: none; background: var(--color-nav); border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .24); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-transform: translate3d(0, calc(0px - var(--visual-viewport-bottom)), 0); transform: translate3d(0, calc(0px - var(--visual-viewport-bottom)), 0); will-change: transform; }
.organization-brand { display: none; }
.sidebar-language { display: none; }
.bottom-nav__item { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; min-height: 64px; padding: var(--space-1) 2px; color: var(--color-text-muted); font-size: clamp(.66rem, 3vw, .75rem); font-weight: 700; line-height: 1.1; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; transition: color var(--motion-normal) var(--motion-ease), opacity var(--motion-normal) var(--motion-ease); }
.bottom-nav__item::before { content: ""; position: absolute; inset: 3px; z-index: -1; opacity: 0; background: color-mix(in srgb, var(--color-accent) 7%, transparent); border-radius: inherit; transition: opacity var(--motion-normal) var(--motion-ease); }
.bottom-nav__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav__icon { display: grid; place-items: center; width: 42px; height: 36px; border-radius: var(--radius-sm); transition: color var(--motion-normal) var(--motion-ease), background-color var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease); }
.bottom-nav__item.is-active { color: var(--color-accent); }
.bottom-nav__item.is-active::before { opacity: 1; }
.bottom-nav__item.is-active .bottom-nav__icon { background: color-mix(in srgb, var(--color-accent) 15%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 20%, transparent); transform: scale(1.03); }
.bottom-nav__item:disabled { color: var(--color-disabled); opacity: .56; cursor: not-allowed; }
.bottom-nav__item--unavailable[aria-disabled="true"] { color: var(--color-disabled); opacity: .58; cursor: pointer; }
.bottom-nav__item--unavailable[aria-disabled="true"]::before { opacity: 0; }
.bottom-nav__item--unavailable[aria-disabled="true"] .bottom-nav__icon { color: var(--color-disabled); background: transparent; box-shadow: none; transform: none; }
.bottom-nav__item--create { color: var(--color-accent); }
.bottom-nav__create-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-top: -10px; color: var(--color-accent); background: var(--color-surface-elevated); border: 1px solid color-mix(in srgb, var(--color-accent) 48%, var(--color-border)); border-radius: 50%; box-shadow: var(--shadow-sm); transition: color var(--motion-normal) var(--motion-ease), background-color var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); }
.icon--create { width: 27px; height: 27px; }
.bottom-nav__item--create.is-active .bottom-nav__create-icon { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }

/* Карточки, кнопки и статусы */
.card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface-elevated) 90%, var(--color-accent) 3%), var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.order-card--enter { animation: orderCardEnter var(--motion-list) var(--motion-ease-emphasized) both; }
.order-card--moving { transition: transform var(--motion-list) var(--motion-ease-emphasized); }
.order-card--exit {
  transition:
    height var(--motion-list) var(--motion-ease-emphasized),
    margin var(--motion-list) var(--motion-ease-standard),
    opacity var(--motion-list) var(--motion-ease-standard);
}
@keyframes orderCardEnter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.card__code { color: var(--color-text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.card__code { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.card__number { flex: 0 0 auto; white-space: nowrap; }
.card__code .pill { margin-left: 0; flex: 0 0 auto; white-space: nowrap; }
.card__date { flex: 0 0 auto; color: var(--color-text-secondary); font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__when { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px var(--space-2); text-align: right; }
.card__time { flex: 0 0 auto; color: var(--color-text-secondary); font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__address-block,
.delivery-details__address-block { position: relative; min-width: 0; }
.card__address-block--has-call .card__address-row { padding-inline-end: calc(44px + var(--space-2)); }
.delivery-details__address-block--has-call .delivery-details__address-row { padding-inline-end: calc(44px + var(--space-3)); }
.card__address-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); }
.card__addr { min-width: 0; font-size: clamp(1.05rem, 4vw, 1.2rem); font-weight: 780; overflow-wrap: anywhere; }
.card__customer { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); color: var(--color-text-muted); font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere; }
.card__customer-identity, .card__customer-name, .card__customer-phone { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.card__customer-identity { display: inline-flex; align-items: center; gap: var(--space-1); }
.card__customer-phone-wrap { min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
/* Зона нажатия 44px остаётся полной, но не превращает строку клиента в высокий блок. */
.card__customer-phone { min-height: var(--control-height); margin-block: calc((1.4em - var(--control-height)) / 2 + 2px); padding: 10px 0; display: inline-flex; align-items: center; color: inherit; font: inherit; text-align: left; background: transparent; border: 0; border-radius: var(--radius-xs); cursor: copy; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.card__customer-phone:hover, .card__customer-phone:focus-visible { color: var(--color-accent); outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 2px; }
.card__address-block > .customer-call,
.delivery-details__address-block > .customer-call { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%); }
.customer-call { width: 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; color: var(--color-accent-ink); background: var(--color-success); border: 1px solid transparent; border-radius: 50%; box-shadow: 0 4px 12px color-mix(in srgb, var(--color-success) 24%, transparent); text-decoration: none; transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.customer-call .icon { width: 19px; height: 19px; }
.customer-call:hover { background: color-mix(in srgb, var(--color-success) 82%, var(--color-text) 18%); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-success) 30%, transparent); }
.customer-call:active { transform: translateY(-50%) scale(.96); }
.customer-call:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.card__customer-separator { flex: 0 0 auto; color: var(--color-text-muted); }
.contact-source-dot { width: 9px; height: 9px; display: inline-block; flex: 0 0 9px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.contact-source-dot--telegram { color: #45A7DB; background: #45A7DB; }
.contact-source-dot--whatsapp { color: #44D25A; background: #44D25A; }
.contact-source-dot--max { color: #7635FD; background: #7635FD; }
.card__content { min-width: 0; flex: 1 1 auto; color: var(--color-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.card__courier-comment { min-width: 0; padding: var(--space-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-nested)); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); border-left-width: 3px; border-radius: var(--radius-sm); }
.card__courier-comment-label { color: var(--color-accent); font-size: .82rem; font-weight: 800; }
.card__courier-comment-text { min-width: 0; display: -webkit-box; color: var(--color-text-secondary); font-size: .9rem; line-height: 1.45; max-height: 5.8em; white-space: pre-wrap; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
.card__courier-comment-more { justify-self: start; min-height: var(--control-height); padding: 0 var(--space-1); color: var(--color-accent); font: inherit; font-size: .84rem; font-weight: 750; background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.card__courier-comment-more:hover, .card__courier-comment-more:focus-visible { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, transparent); outline: none; }
.courier-comment-modal__text { color: var(--color-text-secondary); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.card__total { padding-top: var(--space-3); font-size: 1.05rem; font-weight: 800; border-top: 1px solid var(--color-border); }
.card__tip { color: var(--color-success); font-size: .92rem; font-weight: 800; overflow-wrap: anywhere; }
.card__business-status { min-width: 0; padding: var(--space-3); color: var(--color-text-secondary); font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.card__business-status strong { color: var(--color-text); }
.pill, .status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.pill, .status { transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.pill { margin-left: var(--space-1); padding: var(--space-1) var(--space-2); color: var(--color-accent); font-size: .75rem; font-weight: 750; vertical-align: middle; background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 42%, var(--color-border)); border-radius: var(--radius-pill); }
.pill .icon, .status .icon { width: 15px; height: 15px; }
.pill--pickup { color: #9272e8; border-color: color-mix(in srgb, #9272e8 48%, var(--color-border)); background: color-mix(in srgb, #9272e8 10%, transparent); }
.card__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status { padding: 5px var(--space-2); color: var(--color-text-secondary); font-size: .75rem; font-weight: 700; border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.status--paid { color: var(--color-success); }
.status--prepared { color: var(--color-warning); }
.status--transit, .status--ok { color: var(--color-success); }
.status--warn { color: var(--color-warning); }
.status--danger { color: var(--color-danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.card__courier { min-width: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: .84rem; font-weight: 700; }
.card__courier .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--color-accent); }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; margin-top: auto; }
.actions--manager_delivery, .actions--manager_pickup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions > .action--full-row { grid-column: 1 / -1; width: 100%; }
.btn { min-height: var(--control-height); padding: var(--space-2) var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-text); font-size: .875rem; font-weight: 750; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.actions .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.actions .btn span { min-width: 0; overflow-wrap: anywhere; }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-control) 82%, var(--color-accent) 18%); border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-accent)); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { color: var(--color-disabled); opacity: .65; cursor: not-allowed; }
.btn--primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: transparent; }
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: transparent; }
.btn--primary:active:not(:disabled) { background: var(--color-accent-active); }
.btn.on--paid { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 11%, var(--color-control)); border-color: color-mix(in srgb, var(--color-success) 50%, var(--color-border)); }
.btn.on--handed { color: #32D773; background: color-mix(in srgb, #32D773 11%, var(--color-control)); border-color: color-mix(in srgb, #32D773 50%, var(--color-border)); }
.btn.on--door { color: #E6AD76; background: color-mix(in srgb, #E6AD76 11%, var(--color-control)); border-color: color-mix(in srgb, #E6AD76 50%, var(--color-border)); }
.btn.on--prepared { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 11%, var(--color-control)); border-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-border)); }
.btn--danger { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-control)); border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border)); }
.btn--edit { color: #b99a78; background: color-mix(in srgb, #b99a78 10%, var(--color-control)); border-color: color-mix(in srgb, #b99a78 42%, var(--color-border)); }
.btn--edit:hover:not(:disabled) { background: color-mix(in srgb, #b99a78 18%, var(--color-control)); border-color: #b99a78; }
.btn--tip { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 9%, var(--color-control)); border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-border)); }

/* Фильтры, формы и строки товаров */
.segmented { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--segment-count, 2), minmax(0, 1fr)); gap: 5px; padding: 5px; overflow: hidden; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.segmented--sliding { --segment-count: 2; }
.segmented--sliding[data-segment-count="3"] { --segment-count: 3; }
.segmented--sliding::before { content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; pointer-events: none; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-active)); border-radius: calc(var(--radius-md) - 5px); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 28%, transparent); transform: translateX(0); transition: transform var(--motion-feedback) var(--motion-ease-emphasized), background-color var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard); }
.segmented--sliding[data-segment-count="2"]::before { width: calc(50% - 7.5px); }
.segmented--sliding[data-segment-count="3"]::before { width: calc((100% - 20px) / 3); }
.segmented--sliding[data-active-index="1"]::before { transform: translateX(calc(100% + 5px)); }
.segmented--sliding[data-active-index="2"]::before { transform: translateX(calc(200% + 10px)); }
.seg { position: relative; z-index: 1; min-width: 0; min-height: 46px; padding: var(--space-2); color: var(--color-text-secondary); font-weight: 760; background: transparent; border: 0; border-radius: calc(var(--radius-md) - 5px); cursor: pointer; transition: color var(--motion-normal) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.seg:active { transform: scale(.98); }
.seg.is-active { color: var(--color-accent-ink); }
.segmented:not(.segmented--sliding) .seg.is-active { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-active)); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 28%, transparent); }
.controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.control { min-height: var(--control-height); padding: 7px var(--space-3); display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-secondary); font-weight: 700; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), color var(--motion-normal) var(--motion-ease), background-color var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease), opacity var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); }
.control:hover:not(.is-muted) { border-color: color-mix(in srgb, var(--color-border) 48%, var(--color-accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 26%, transparent); }
.control:active:not(.is-muted) { transform: scale(.98); }
.control .icon { width: 19px; height: 19px; color: var(--color-accent); }
.control--date { min-width: 0; max-width: 100%; flex: 1 1 190px; }
.control__label { font-size: .75rem; }
.cdate { min-width: 0; padding: 0; color: var(--color-text); background: transparent; border: 0; font-variant-numeric: tabular-nums; }
.control.is-active { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.control.is-active .icon { color: var(--color-accent-ink); }
.control.is-muted { opacity: .58; cursor: default; }
.form { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; min-width: 0; max-width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.field label, .urow__label { color: var(--color-text-secondary); font-size: .82rem; font-weight: 650; }
.field input, .field textarea, .field select, .section-tools .list-search, .devsel, .urole, .stock-move input, .stock-move select, .recipe select, .recipe-line input, .recipe-product {
  width: 100%; min-height: var(--control-height); padding: 10px var(--space-3); color: var(--color-text); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: .9; }
input:disabled, select:disabled, textarea:disabled { color: var(--color-disabled); cursor: not-allowed; }
.field textarea { min-height: 96px; resize: vertical; }
.create-order-form .field--compact-textarea textarea { height: var(--control-height); min-height: var(--control-height); resize: none; overflow-y: hidden; }
.muted { color: var(--color-text-muted); font-size: .875rem; }
.order-items, .client-results { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.stock-choice-group { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.stock-choice-group + .stock-choice-group { margin-top: var(--space-4); }
.stock-choice-group h3 { margin: 0; font-size: .95rem; font-weight: 800; }
.selected-summary { min-width: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.selected-summary__head, .selected-summary__items > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.selected-summary__head span { color: var(--color-accent); font-weight: 800; white-space: nowrap; }
.selected-summary__items { display: flex; flex-direction: column; gap: var(--space-1); }
.selected-summary__items > div { min-height: 44px; padding-top: var(--space-1); border-top: 1px solid var(--color-border); }
.selected-summary__items span { min-width: 0; overflow-wrap: anywhere; }
.selected-summary__items button { width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; flex: 0 0 44px; color: var(--color-danger); background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer; }
.selected-summary__items .icon { width: 18px; height: 18px; }
.editor-warning { margin: 0; padding: var(--space-3); color: var(--color-warning); font-size: .84rem; line-height: 1.45; background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border)); border-radius: var(--radius-sm); }
.product-choice { min-height: 68px; padding: var(--space-2); display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: var(--space-2); color: var(--color-text); background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.product-choice__select { position: relative; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--color-text); cursor: pointer; }
.product-choice__checkbox { position: absolute; left: 0; width: 44px !important; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.product-choice__indicator { width: 24px; height: 24px; margin: 0 6px; flex: 0 0 24px; color: var(--color-text-muted); }
.product-choice__indicator-circle { fill: transparent; stroke: currentColor; stroke-width: 2; }
.product-choice__indicator-check { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.product-choice__checkbox:checked + .product-choice__indicator { color: var(--color-success); }
.product-choice__checkbox:checked + .product-choice__indicator .product-choice__indicator-circle { fill: currentColor; }
.product-choice__checkbox:checked + .product-choice__indicator .product-choice__indicator-check { opacity: 1; }
.product-choice__checkbox:focus-visible + .product-choice__indicator { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 50%; }
.product-choice__name { min-width: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.product-choice.is-unavailable,
.selected-summary__items > .is-unavailable { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); }
.product-choice.is-unavailable { background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface-nested)); }
.qty-control { width: 132px; min-height: 44px; display: grid; grid-template-columns: repeat(3, 44px); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xs); }
.qty-control__button, .qty-control__value { min-width: 0; min-height: 42px !important; margin: 0; padding: 0 !important; color: var(--color-text); font-variant-numeric: tabular-nums; background: var(--color-control); border: 0; border-radius: 0 !important; }
.qty-control__button { font-size: 1.35rem; line-height: 1; cursor: pointer; }
.qty-control__button + .qty-control__value, .qty-control__value + .qty-control__button { border-left: 1px solid var(--color-border); }
.qty-control__button:last-child { color: var(--color-accent); }
.qty-control__value { width: 44px !important; text-align: center; appearance: textfield; }
.qty-control__value::-webkit-outer-spin-button, .qty-control__value::-webkit-inner-spin-button { margin: 0; appearance: none; }
.qty-control__button:disabled, .qty-control__value:disabled { color: var(--color-disabled); cursor: default; opacity: .7; }
.client-result { padding: var(--space-3); color: var(--color-text); text-align: left; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-xs); cursor: pointer; }
.section-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.section-tools .list-search { flex: 1; }
.section-tools .btn { flex: 0 0 auto; }
.urow { display: flex; align-items: center; gap: var(--space-3); }
.urole { flex: 1; }
.user-guard { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-warning); font-size: .8rem; line-height: 1.4; }
.user-guard .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

/* Склад, модальные окна и системные состояния */
.stock-tools .list-search { flex: 1 1 240px; }
.stock-tools .btn { white-space: nowrap; }
.stock-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stock-filter { min-height: var(--control-height); padding: var(--space-2) var(--space-3); display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-text-secondary); font-weight: 750; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.stock-filter:hover { border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-accent)); }
.stock-filter.is-active { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.stock-filter .icon { width: 18px; height: 18px; }
.stock-card__head { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.stock-card__head .card__addr { padding-top: var(--space-2); }
.stock-card__edit { width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; flex: 0 0 44px; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 9%, var(--color-control)); border: 1px solid color-mix(in srgb, var(--color-warning) 32%, var(--color-border)); border-radius: var(--radius-sm); cursor: pointer; }
.stock-card__edit:hover { background: color-mix(in srgb, var(--color-warning) 16%, var(--color-control)); }
.stock-card__edit .icon { width: 19px; height: 19px; }
.stock-move, .recipe-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.stock-move .btn, .stock-move input[name="note"] { grid-column: 1 / -1; }
.stock-editor-form { min-width: 0; }
.stock-editor-delete { width: 100%; }
.recipe { gap: var(--space-3); }
.recipe-lines, .sync-log { display: flex; flex-direction: column; gap: var(--space-2); }
.recipe-line input { width: 100%; }
.recipe-line.is-archived select { color: var(--color-warning); border-color: var(--color-warning); }
.sync-log { padding: var(--space-2) 2px; }
.sync-log__title { font-weight: 750; }
.sync-log__row { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; color: var(--color-text-muted); font-size: .78rem; border: 1px solid var(--color-border); border-radius: var(--radius-xs); }
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); animation: fadeIn var(--motion-sheet) var(--motion-ease-standard) both; }
.modal__card { position: relative; width: min(680px, 100%); max-height: 88dvh; padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); }
.modal__card { animation: sheetIn var(--motion-sheet) var(--motion-ease-emphasized) both; }
.modal.is-closing .modal__backdrop { animation: fadeOut var(--motion-sheet) var(--motion-ease-standard) both; }
.modal.is-closing .modal__card { animation: sheetOut var(--motion-sheet) var(--motion-ease-emphasized) both; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.modal__title { font-size: 1.18rem; font-weight: 780; }
.modal__close { width: var(--control-height); min-height: var(--control-height); flex: 0 0 var(--control-height); padding: 0; }
.modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.order-more-sheet { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.order-more-sheet > .btn { width: 100%; justify-content: flex-start; min-height: 50px; }
.order-more-sheet__danger { margin-top: var(--space-2); border-top-width: 2px; }
.order-more-sheet__empty { margin: 0; padding: var(--space-4); color: var(--color-text-muted); text-align: center; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.order-card-image-fallback { display: grid; gap: var(--space-3); }
.order-card-image-fallback p { margin: 0; color: var(--color-text-secondary); }
.order-card-image-fallback img { display: block; width: 100%; height: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.order-card-image-fallback__save { width: 100%; }
.customer-form-step, .contact-import-step { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.disclosure-panel {
  overflow: hidden;
  transition:
    height var(--motion-section) var(--motion-ease-emphasized),
    opacity var(--motion-section) var(--motion-ease-standard);
}
.contact-import-help, .contact-import-name, .contact-import-step > p { margin: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.contact-video-toggle { width: 100%; white-space: normal; overflow-wrap: anywhere; }
.contact-video-panel { min-width: 0; padding: var(--space-3); overflow: hidden; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.contact-video { display: block; width: 100%; max-width: 360px; max-height: min(58dvh, 640px); margin: 0 auto; object-fit: contain; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.contact-video-status { min-width: 0; margin: var(--space-2) 0 0; color: var(--color-danger); white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-import-actions, .contact-duplicate-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.contact-import-step fieldset { min-width: 0; margin: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.contact-import-step legend { padding: 0 var(--space-1); color: var(--color-text-secondary); font-size: .86rem; font-weight: 750; }
.contact-import-step fieldset > div { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-choice { min-width: 0; min-height: 48px; padding: var(--space-2); display: flex; align-items: flex-start; gap: var(--space-2); background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-xs); cursor: pointer; }
.contact-choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px; }
.contact-choice span { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.contact-choice strong { font-weight: 680; white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-choice small { color: var(--color-text-muted); }
.contact-import-status { min-height: 1.45em; color: var(--color-danger) !important; white-space: pre-wrap; overflow-wrap: anywhere; }
.create-cancel { color: var(--color-disabled); background: color-mix(in srgb, var(--color-disabled) 8%, var(--color-control)); border-color: color-mix(in srgb, var(--color-disabled) 34%, var(--color-border)); transition: transform var(--motion-fast) var(--motion-ease), color var(--motion-normal) var(--motion-ease), background-color var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); }
.create-cancel[aria-disabled="true"] { cursor: pointer; }
.create-cancel[aria-disabled="true"]:hover { color: var(--color-disabled); background: color-mix(in srgb, var(--color-disabled) 12%, var(--color-control)); border-color: color-mix(in srgb, var(--color-disabled) 42%, var(--color-border)); }
.create-cancel.is-draft-active { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-control)); border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border)); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-danger) 10%, transparent); }
.create-cancel.is-draft-active:hover { background: color-mix(in srgb, var(--color-danger) 14%, var(--color-control)); border-color: color-mix(in srgb, var(--color-danger) 58%, var(--color-border)); }
.create-order-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.create-order-column { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.order-schedule-fields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.order-schedule-fields small, .field > small { color: var(--color-text-muted); line-height: 1.35; }
.create-order-actions { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.create-order-actions > .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.create-order-actions__cancel { grid-column: 1 / -1; }
.confirm-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .74); animation: fadeIn var(--motion-sheet) var(--motion-ease-standard) both; }
.confirm-modal__card { position: relative; width: min(430px, 100%); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text); background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: dialogIn var(--motion-sheet) var(--motion-ease-emphasized) both; }
.confirm-modal.is-closing .confirm-modal__backdrop { animation: fadeOut var(--motion-sheet) var(--motion-ease-standard) both; }
.confirm-modal.is-closing .confirm-modal__card { animation: dialogOut var(--motion-sheet) var(--motion-ease-emphasized) both; }
.confirm-modal__card h2, .confirm-modal__card p { margin: 0; }
.confirm-modal__card h2 { font-size: 1.12rem; }
.confirm-modal__card p { color: var(--color-text-secondary); line-height: 1.5; white-space: pre-wrap; }
.availability-modal { display: flex; flex-direction: column; gap: var(--space-4); }
.availability-quantity-toggle { width: 100%; }
.availability-quantity-toggle.is-active { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.availability-text { max-height: 50dvh; margin: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); overflow: auto; color: var(--color-text); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.availability-line { line-height: 1.45; }
.availability-quantity { font-weight: 800; white-space: nowrap; }
.clipboard-fallback { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inline-customer-create { align-self: flex-start; }
.editor-submit--reservation { border-color: var(--color-accent); color: var(--color-text); }
.stock-shortage-warning {
  border: 1px solid color-mix(in srgb, var(--color-danger) 65%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  padding: var(--space-4);
}
.stock-shortage-warning h3,
.stock-shortage-warning p { margin-block-start: 0; }
.stock-shortage-warning ul { padding-inline-start: var(--space-5); }
.stock-shortage-warning li + li { margin-block-start: var(--space-2); }
.orders-shell { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.orders-sticky-nav {
  position: sticky;
  top: var(--topbar-sticky-offset, calc(var(--header-height) + env(safe-area-inset-top)));
  z-index: 8;
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  box-shadow: 0 10px 18px -16px rgba(0, 0, 0, .72);
}
.orders-sticky-nav__inner { width: 100%; min-width: 0; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .orders-sticky-nav {
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.orders-switch { width: 100%; }
.orders-switch .seg { padding-inline: var(--space-1); font-size: clamp(.66rem, 3vw, .875rem); white-space: nowrap; }
.orders-mode-tools { min-width: 0; display: flex; justify-content: stretch; }
.orders-mode-tools > .reservation-report-open { width: 100%; }
.active-orders-tools { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.active-orders-tools > .active-orders-controls { width: 100%; }
.active-orders-tools > .active-orders-report-open { width: 100%; }
.orders-mode-content { min-width: 0; }
.orders-mode-panel { min-width: 0; }
.delivery-shell { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.delivery-sticky-nav {
  position: sticky;
  top: var(--topbar-sticky-offset, calc(var(--header-height) + env(safe-area-inset-top)));
  z-index: 8;
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  box-shadow: 0 10px 18px -16px rgba(0, 0, 0, .72);
}
.delivery-sticky-nav__inner,
.delivery-switch,
.delivery-tools,
.delivery-content,
.delivery-mode-panel { width: 100%; min-width: 0; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .delivery-sticky-nav {
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.delivery-switch .seg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: clamp(.78rem, 3.4vw, .92rem); }
.delivery-count { min-width: 1.4em; font-size: .78em; font-variant-numeric: tabular-nums; text-align: center; }
.delivery-tools { display: flex; justify-content: stretch; }
.delivery-filter-controls,
.active-orders-controls,
.completed-orders-controls { width: 100%; }
.delivery-mode-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.delivery-row {
  min-width: 0;
  min-height: 60px;
  padding: var(--space-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.delivery-row__address {
  min-width: 0;
  padding-left: var(--space-1);
  overflow: hidden;
  font-size: .94rem;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-row__time { font-variant-numeric: tabular-nums; }
.delivery-row__time.is-ready { color: var(--color-text-muted); font-weight: 680; }
.delivery-row__address-text { min-width: 0; }
.delivery-row__actions { min-width: 0; display: flex; align-items: center; gap: 6px; }
.delivery-row__action {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex: 0 0 44px;
  border-radius: var(--radius-sm);
}
.delivery-row__action .icon { width: 20px; height: 20px; }
.delivery-list-state { width: 100%; padding-block: var(--space-7); }
.delivery-details { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.delivery-details__address-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
.delivery-details__address { color: var(--color-text); font-size: 1.24rem; font-weight: 820; line-height: 1.35; overflow-wrap: anywhere; }
.delivery-details__time { color: var(--color-text-secondary); font-weight: 720; font-variant-numeric: tabular-nums; }
.delivery-details__contact { color: var(--color-text-muted); font-size: .82rem; overflow-wrap: anywhere; }
.delivery-details__contact .card__customer { color: inherit; font-size: inherit; }
.delivery-details__courier-comment {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-nested));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.delivery-details__courier-comment strong { color: var(--color-text); font-size: .82rem; }
.delivery-details__courier-comment-text { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.delivery-details__composition {
  padding: var(--space-4);
  color: var(--color-text-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--color-surface-nested);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.delivery-details__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.delivery-details__stop { width: 100%; }
.order-list-state { grid-column: 1 / -1; }
.reservation-report { display: grid; gap: var(--space-4); }
.reservation-report__groups { display: grid; gap: var(--space-3); }
.reservation-report__group {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.reservation-report__group h3 { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.reservation-report__archive { padding: 2px var(--space-2); color: var(--color-warning); font-size: .72rem; font-weight: 800; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--color-warning) 50%, var(--color-border)); border-radius: var(--radius-pill); }
.reservation-report__group ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.reservation-report__group li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
}
.reservation-report__group small {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
}
.reservation-report__copy { justify-self: start; }
.empty, .loading-state, .empty-state, .error-state { min-width: 0; padding: 46px var(--space-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-text-muted); text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.loading-state__spinner { width: 34px; height: 34px; color: var(--color-accent); animation: spin .8s linear infinite; }
.empty-state h2, .error-state h2 { margin: 0; color: var(--color-text); font-size: 1.15rem; }
.empty-state p, .error-state p { max-width: 34rem; margin: 0; }
.empty-state__icon, .error-state__icon { width: 44px; height: 44px; color: var(--color-accent); }
.error-state__icon { color: var(--color-danger); }

/* Раздел «Ещё» и настройки PWA */
.more-list { display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.more-item { width: 100%; min-height: 66px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.more-item:hover { background: var(--color-surface-nested); }
.more-item:disabled { color: var(--color-disabled); cursor: not-allowed; opacity: .7; }
.more-item:disabled:hover { background: transparent; }
.more-item:last-child { border-bottom: 0; }
.more-item__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: var(--color-accent); background: var(--color-control); border-radius: var(--radius-sm); }
.more-item__copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.more-item__title { font-weight: 750; }
.more-item__detail { overflow: hidden; color: var(--color-text-muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.more-item__chevron { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-text-muted); transform: rotate(-90deg); }
.more-item--danger { color: var(--color-danger); }
.more-item--danger .more-item__icon { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 9%, var(--color-control)); }
.pwa-settings { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.pwa-settings__head { display: flex; align-items: center; gap: var(--space-3); }
.pwa-settings__head h2, .pwa-settings__head p, .pwa-settings__guide h3, .pwa-settings__guide p { margin: 0; }
.pwa-settings__head p, .pwa-settings__guide p { color: var(--color-text-muted); }
.pwa-settings__icon { width: 44px; height: 44px; flex: 0 0 44px; color: var(--color-accent); }
.pwa-settings__status { padding: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pwa-settings__status strong { color: var(--color-success); text-align: right; }
.pwa-settings__status strong[data-status="offline"] { color: var(--color-danger); }
.pwa-settings__guide { display: flex; flex-direction: column; gap: var(--space-3); }
.pwa-settings__guide ol { margin: 0; padding-left: 1.35rem; display: flex; flex-direction: column; gap: var(--space-2); }
.pwa-settings .check-connection { align-self: flex-start; }
.notification-center { display: flex; flex-direction: column; gap: var(--space-3); }
.notification-toolbar { display: flex; justify-content: flex-end; }
.notification-list { display: flex; flex-direction: column; gap: var(--space-2); }
.notification-item { padding: var(--space-3); background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.notification-item.is-unread { border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-border)); box-shadow: inset 3px 0 var(--color-accent); }
.card.notification-target { outline: 3px solid color-mix(in srgb, var(--color-accent) 72%, transparent); outline-offset: 3px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 16%, transparent), var(--shadow-sm); }
.notification-item__content { width: 100%; padding: 0; display: flex; flex-direction: column; gap: 5px; color: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
.notification-item__content span { color: var(--color-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-item__content time { color: var(--color-text-muted); font-size: .76rem; }
.notification-item__actions { margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: .84rem; }
.notification-settings { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-copy, .settings-switches { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.settings-copy h2, .settings-copy p { margin: 0; }
.settings-copy p { margin-top: var(--space-2); color: var(--color-text-secondary); line-height: 1.5; }
.settings-copy .settings-warning { color: var(--color-danger); font-weight: 700; }
.settings-switches { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0; }
.settings-switch { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-border); cursor: pointer; }
.settings-switch:last-child { border-bottom: 0; }
.settings-switch > span { display: flex; flex-direction: column; gap: 3px; }
.settings-switch small { color: var(--color-text-muted); line-height: 1.35; }
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch i { width: 48px; height: 28px; padding: 3px; flex: 0 0 48px; background: var(--color-control); border: 1px solid var(--color-border); border-radius: 999px; transition: background-color var(--motion-fast) var(--motion-ease); }
.settings-switch i::after { content: ""; display: block; width: 20px; height: 20px; background: var(--color-text-muted); border-radius: 50%; transition: transform var(--motion-fast) var(--motion-ease); }
.settings-switch input:checked + i { background: var(--color-accent); }
.settings-switch input:checked + i::after { background: #fff; transform: translateX(20px); }
.settings-switch input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--color-accent) 40%, transparent); outline-offset: 2px; }
.settings-switch input:disabled + i { opacity: .45; }
.pwa-settings__language { min-height: 64px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pwa-settings__language > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pwa-settings__language small { color: var(--color-text-muted); line-height: 1.35; }
.pwa-settings__language select { min-height: var(--control-height); padding: 7px var(--space-3); color: var(--color-text); font: inherit; font-weight: 700; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pwa-settings__language select:focus-visible { border-color: color-mix(in srgb, var(--color-border) 45%, var(--color-accent)); outline: 3px solid color-mix(in srgb, var(--color-accent) 24%, transparent); outline-offset: 2px; }
.organization-settings { min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.organization-settings__head { min-width: 0; padding: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.organization-settings__head h2, .organization-settings__head p, .organization-settings__section-head h3, .organization-settings__section-head p { margin: 0; }
.organization-settings__head p, .organization-settings__section-head p, .organization-settings__hint { color: var(--color-text-muted); }
.organization-settings__head p { margin-top: 3px; font-size: .82rem; }
.organization-settings__tabs { padding: var(--space-2); display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
.organization-settings__tabs::-webkit-scrollbar { display: none; }
.organization-settings__tabs button { min-height: 40px; padding: 0 var(--space-3); flex: 0 0 auto; color: var(--color-text-muted); font-size: .82rem; font-weight: 750; white-space: nowrap; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.organization-settings__tabs button[aria-selected="true"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.organization-settings__pane { min-width: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.organization-settings__section-head { display: flex; flex-direction: column; gap: 3px; }
.organization-settings__section-head h3 { font-size: 1.08rem; }
.organization-settings__section-head p, .organization-settings__hint { font-size: .82rem; line-height: 1.5; }
.organization-settings__subhead { margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.organization-settings__fields { min-width: 0; display: grid; gap: var(--space-3); }
.organization-settings__fields label, .organization-alias label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--color-text-secondary); font-size: .8rem; font-weight: 700; }
.organization-settings__fields input, .organization-settings__fields select, .organization-alias input { width: 100%; min-height: var(--control-height); padding: 9px var(--space-3); color: var(--color-text); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.organization-color-field { min-width: 0; display: grid; gap: var(--space-3); }
.organization-color-field label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--color-text-secondary); font-size: .8rem; font-weight: 700; }
.organization-color-field__picker input { width: 100%; height: 52px; padding: 5px; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.organization-color-field__picker input::-webkit-color-swatch-wrapper { padding: 0; }
.organization-color-field__picker input::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-sm) - 5px); }
.organization-color-field__picker input::-moz-color-swatch { border: 0; border-radius: calc(var(--radius-sm) - 5px); }
.organization-color-field__hex input { width: 100%; min-height: var(--control-height); padding: 9px var(--space-3); color: var(--color-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.organization-color-field input:focus-visible, .organization-placement__select:focus-visible { border-color: color-mix(in srgb, var(--color-border) 45%, var(--color-accent)); outline: 3px solid color-mix(in srgb, var(--color-accent) 24%, transparent); outline-offset: 2px; }
.organization-placement-list { min-width: 0; display: flex; flex-direction: column; }
.organization-placement { min-width: 0; min-height: 70px; padding: var(--space-3) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, 168px) auto; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.organization-placement:last-child { border-bottom: 0; }
.organization-placement__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.organization-placement__copy small { color: var(--color-text-muted); font-size: .76rem; line-height: 1.35; }
.organization-placement__select { width: 100%; min-height: var(--control-height); padding: 7px var(--space-3); color: var(--color-text); font: inherit; font-size: .82rem; font-weight: 700; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.organization-placement__select:disabled { color: var(--color-text-muted); opacity: .72; cursor: default; }
.organization-module-list, .organization-navigation-list, .organization-assets, .organization-alias-list { min-width: 0; display: flex; flex-direction: column; }
.organization-module-list .settings-switch { padding: 0; }
.organization-navigation, .organization-asset { min-width: 0; min-height: 68px; padding: var(--space-3) 0; display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.organization-navigation:last-child, .organization-asset:last-child { border-bottom: 0; }
.organization-navigation > span, .organization-asset > span { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.organization-navigation small, .organization-asset small { color: var(--color-text-muted); font-size: .76rem; line-height: 1.35; }
.organization-navigation__move { display: flex; flex: 0 0 auto; gap: var(--space-1); }
.organization-navigation__move button { width: var(--control-height); height: var(--control-height); padding: 0; color: var(--color-text-secondary); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-xs); cursor: pointer; }
.organization-navigation__move button:disabled { opacity: .35; cursor: default; }
.organization-asset__preview { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 52px; overflow: hidden; color: var(--color-text-muted); background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.organization-asset__preview img { width: 100%; height: 100%; object-fit: contain; }
.organization-asset__actions { display: flex; flex: 0 0 auto; gap: var(--space-2); }
.organization-asset__actions .btn { min-height: 40px; padding: 7px var(--space-3); font-size: .8rem; cursor: pointer; }
.organization-alias { min-width: 0; padding: var(--space-4) 0; display: grid; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.organization-alias:last-child { border-bottom: 0; }
.organization-alias > strong { align-self: end; }
.organization-settings__status { min-height: 1.3em; margin: 0; padding: 0 var(--space-5); color: var(--color-danger); font-size: .82rem; }
.organization-settings__mobile-save { padding: var(--space-4) var(--space-5) var(--space-5); }
.organization-settings__mobile-save .btn { width: 100%; }
.organization-settings__head > .organization-settings__save { display: none; }
.web-push-device { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.web-push-device__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.web-push-device__head h3, .web-push-device p { margin: 0; }
.web-push-device__head strong { display: block; margin-top: var(--space-1); color: var(--color-text); }
.web-push-device__head > span, .web-push-device p { color: var(--color-text-muted); }
.web-push-device > p { margin-top: var(--space-3); line-height: 1.45; }
.web-push-device__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.web-push-device .web-push-device__error { min-height: 1.3em; color: var(--color-danger); }
.toast { position: fixed; z-index: 30; bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom)); left: 50%; max-width: min(90%, 520px); padding: var(--space-3) var(--space-5); color: var(--color-text); font-size: .875rem; text-align: center; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); transform: translateX(-50%); animation: toastIn var(--motion-normal) var(--motion-ease) both; }
.toast.is-leaving { animation: toastOut var(--motion-fast) var(--motion-ease) both; }

.pwa-offline { position: fixed; z-index: 100; inset: 0; padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); display: grid; place-items: center; color: var(--color-text); background: color-mix(in srgb, var(--color-bg) 94%, transparent); backdrop-filter: blur(12px); }
.pwa-offline__card { width: min(480px, 100%); padding: var(--space-7) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.pwa-offline__mark { width: 72px; height: 72px; display: grid; place-items: center; color: #07101b; font-size: 1.15rem; font-weight: 900; letter-spacing: -.04em; background: #45d7b6; border-radius: 22%; }
.pwa-offline h1, .pwa-offline p { margin: 0; }
.pwa-offline h1 { font-size: clamp(1.35rem, 5vw, 1.8rem); }
.pwa-offline p { max-width: 38rem; color: var(--color-text-secondary); }
.pwa-offline__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.pwa-offline__status { min-height: 1.45em; font-size: .85rem; }
.pwa-offline--stale { inset: auto var(--space-4) calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom)); padding: 0; place-items: stretch; background: transparent; backdrop-filter: none; pointer-events: none; }
.pwa-offline--stale .pwa-offline__card { width: min(620px, 100%); margin: 0 auto; padding: var(--space-4); align-items: flex-start; gap: var(--space-2); text-align: left; border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); pointer-events: auto; }
.pwa-offline--stale .pwa-offline__mark { display: none; }
.pwa-offline--stale .pwa-offline__status { min-height: 0; }
.pwa-update { position: fixed; z-index: 80; right: var(--space-4); bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom)); left: var(--space-4); max-width: 620px; margin: 0 auto; padding: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-text); background: var(--color-surface-elevated); border: 1px solid color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.pwa-update p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: .84rem; }
.pwa-update__actions { display: flex; gap: var(--space-2); }
.is-offline .pwa-update, .is-external-access .pwa-update { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheetOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }
@keyframes dialogIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
@keyframes dialogOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.98); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 5px); } }

/* Временное окно синхронного перехода повторяет motion-контракт Control Plane. */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    color var(--theme-transition-duration) var(--theme-transition-easing),
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    border-color var(--theme-transition-duration) var(--theme-transition-easing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-easing),
    opacity var(--theme-transition-duration) var(--theme-transition-easing);
}

/* Аналитика, диагностика и структурированный журнал */
.analytics-controls, .report-card, .system-card, .audit-card { min-width: 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.analytics-controls { display: flex; flex-direction: column; gap: var(--space-3); }
.analytics-controls p { margin: 0; }
.period-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.period-presets .btn { flex: 1 1 auto; }
.period-range { min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.period-range label { min-width: 1.7em; color: var(--color-text-secondary); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.period-range input { min-width: 0; width: 100%; min-height: var(--control-height); padding: var(--space-2); color: var(--color-text); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.period-range .btn { grid-column: 1 / -1; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.kpi-grid article { min-width: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.kpi-grid span { color: var(--color-text-muted); font-size: .76rem; }
.kpi-grid strong { overflow-wrap: anywhere; font-size: 1.12rem; }
.data-note { margin: 0; padding: var(--space-3); color: var(--color-warning); font-size: .82rem; background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-border)); border-radius: var(--radius-sm); }
.report-grid { display: grid; gap: var(--space-3); min-width: 0; }
.report-card, .system-card { display: flex; flex-direction: column; gap: var(--space-3); }
.report-card h2, .system-card h2 { margin: 0; font-size: 1rem; }
.mini-chart { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mini-chart__row { min-width: 0; display: grid; grid-template-columns: minmax(54px, auto) minmax(0, 1fr) minmax(42px, auto); align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: .72rem; }
.mini-chart__row > span:first-child { white-space: nowrap; }
.mini-chart__row strong { overflow-wrap: anywhere; color: var(--color-text-secondary); text-align: right; }
.mini-chart__track { height: 10px; overflow: hidden; background: var(--color-surface-nested); border-radius: var(--radius-pill); }
.mini-chart__track span { height: 100%; display: block; background: linear-gradient(90deg, var(--color-accent), var(--color-success)); border-radius: inherit; }
.split-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.split-stat span { min-width: 0; padding: var(--space-3); display: flex; flex-direction: column; overflow-wrap: anywhere; color: var(--color-text-muted); background: var(--color-surface-nested); border-radius: var(--radius-sm); }
.split-stat strong { color: var(--color-text); font-size: 1.3rem; }
.order-type-summary { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.order-type-summary > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.compact-list { min-width: 0; display: flex; flex-direction: column; }
.compact-list > div { min-width: 0; padding: var(--space-3) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.compact-list > div:last-child { border-bottom: 0; }
.compact-list span { min-width: 0; overflow-wrap: anywhere; }
.compact-list small { display: block; margin-top: 3px; color: var(--color-text-muted); }
.compact-list strong { flex: 0 1 auto; text-align: right; overflow-wrap: anywhere; }
.system-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.user-auth {
  min-width: 0; padding: var(--space-3); display: flex; flex-direction: column;
  gap: var(--space-3); background: var(--color-surface-nested);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.user-auth__head { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.user-auth__actions { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.members-shell, .members-content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.members-switch { align-self: stretch; }
.role-toolbar { padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.role-toolbar h2, .role-toolbar p, .role-capabilities h3 { margin: 0; }
.role-toolbar p { margin-top: var(--space-1); color: var(--color-text-muted); line-height: 1.4; }
.role-list { min-width: 0; display: grid; gap: var(--space-3); }
.role-card__head { min-width: 0; }
.role-card__translation { margin-top: 2px; line-height: 1.35; }
.role-card__members { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: .76rem; font-weight: 650; }
.role-card__members .icon { width: 14px; height: 14px; }
.role-card__capabilities { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.role-card__capabilities > span { padding: 4px var(--space-2); color: var(--color-text-secondary); font-size: .76rem; background: var(--color-surface-nested); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.role-card__capabilities > .role-card__more { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); }
.role-card__capabilities > .role-card__empty { color: var(--color-text-muted); font-style: italic; }
.role-editor { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.role-name-grid { min-width: 0; display: grid; gap: var(--space-3); }
.role-capabilities { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.role-capability-group { min-width: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); }
.role-capability-group:first-of-type { margin-top: var(--space-3); }
.role-capability-group h4 { margin: 0; padding: 0 0 var(--space-2); color: var(--color-text-secondary); font-size: .8rem; font-weight: 800; letter-spacing: .015em; }
.role-capability { min-height: 54px; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); }
.role-capability:last-child { border-bottom: 0; }
.role-capability__copy { min-width: 0; display: flex; align-items: center; gap: 6px; }
.role-capability__label { min-width: 0; color: var(--color-text); font-size: .9rem; font-weight: 680; line-height: 1.35; overflow-wrap: anywhere; }
.role-capability__info { width: 30px; min-width: 30px; min-height: 30px; padding: 0; display: grid; place-items: center; flex: 0 0 30px; color: var(--color-text-muted); font-size: 1rem; line-height: 1; background: transparent; border: 0; border-radius: 50%; cursor: help; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.role-capability__info:hover, .role-capability__info[aria-expanded="true"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.role-switch { position: relative; width: 46px; height: 26px; flex: 0 0 46px; cursor: pointer; }
.role-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.role-switch > span { width: 46px; height: 26px; padding: 3px; display: block; background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.role-switch > span::after { content: ""; width: 18px; height: 18px; display: block; background: var(--color-text-muted); border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.role-switch input:checked + span { background: var(--color-accent); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 12%, transparent); }
.role-switch input:checked + span::after { background: #fff; transform: translateX(20px); }
.role-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-focus) 45%, transparent); outline-offset: 2px; }
.role-info-popover { position: fixed; z-index: 80; width: max-content; max-width: min(310px, 92%); padding: 10px var(--space-3); visibility: hidden; pointer-events: none; color: var(--color-text-secondary); font-size: .8rem; line-height: 1.45; background: var(--color-surface-elevated); border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border)); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top center; transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), visibility 0s linear var(--motion-fast); }
.role-info-popover.is-measuring { visibility: hidden; transition: none; }
.role-info-popover.is-visible { visibility: visible; opacity: 1; transform: translateY(0) scale(1); transition-delay: 0s; }
.temporary-password { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.temporary-password p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }
.temporary-password code {
  padding: var(--space-3); overflow-wrap: anywhere; user-select: all;
  color: var(--color-text); background: var(--color-surface-nested);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: 1rem; line-height: 1.5;
}
.security-settings { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.security-settings h2, .security-settings h3 { margin: 0; }
.security-settings > .settings-copy,
.security-settings > .form {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.security-settings .field,
.security-settings .field label,
.security-settings .field input,
.security-settings .btn { min-width: 0; max-width: 100%; }
.security-settings .field input,
.security-settings .btn { width: 100%; }
.security-settings .form > p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }
.system-grid { min-width: 0; display: grid; gap: var(--space-3); }
.diagnostic-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-2) var(--space-3); }
.diagnostic-grid span { color: var(--color-text-muted); }
.diagnostic-grid strong { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.diagnostic-grid strong small { display: block; margin-top: 2px; color: var(--color-text-muted); font-weight: 500; }
.audit-page { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.audit-page h1 { margin: 0; font-size: 1.45rem; }
.audit-filters { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-2); }
.audit-filters label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: var(--color-text-secondary); font-size: .75rem; font-weight: 700; }
.audit-filters input { width: 100%; min-width: 0; min-height: 44px; padding: 0 var(--space-3); color: var(--color-text); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* Единый DateControl: видимую геометрию рисует wrapper, нативный iOS picker остаётся прозрачным overlay. */
.date-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
  min-height: var(--control-height);
  padding: 10px 42px 10px var(--space-3);
  color: var(--color-text);
  background: var(--color-control);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  overflow: hidden;
  transition: color var(--motion-normal) var(--motion-ease), opacity var(--motion-normal) var(--motion-ease);
}
.date-control__value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-control.is-empty .date-control__value { color: var(--color-text-muted); }
.date-control__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--space-3);
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  pointer-events: none;
  transform: translateY(-50%);
}
.date-control__icon .icon { width: 19px; height: 19px; }
.date-control > input[type="date"].date-control__native {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  inline-size: 100%;
  height: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: inherit;
  box-sizing: border-box;
  opacity: 0;
  cursor: pointer;
}
.date-control > input[type="date"].date-control__native:focus-visible { outline: none; }
.date-control:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.date-control.is-disabled { color: var(--color-disabled); opacity: .65; cursor: not-allowed; }
.date-control.is-disabled .date-control__icon { color: var(--color-disabled); }
.date-control.is-disabled > input[type="date"].date-control__native { cursor: not-allowed; }

.control--date > .date-control {
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.control--date > .date-control .date-control__icon { display: none; }
.control--date > .date-control:focus-within { outline: none; }
.control--date:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.period-range > .date-control,
.audit-filters label > .date-control,
.field > .date-control { min-width: 0; max-width: 100%; }
.audit-search, .audit-reset, .pagination button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.audit-search { color: white; background: var(--color-accent); border-color: var(--color-accent); }
.audit-reset { gap: var(--space-1); padding: 0 var(--space-3); }
.audit-search:hover, .audit-reset:hover, .pagination button:hover:not(:disabled) { border-color: var(--color-accent); transform: translateY(-1px); }
.audit-search, .audit-reset, .audit-filter-error { grid-column: 1 / -1; }
.audit-filter-error { min-height: 1.2em; margin: 0; color: var(--color-danger); font-size: .8rem; }
.audit-results { min-width: 0; scroll-margin-top: calc(var(--header-height) + var(--space-3)); }
.audit-table-wrap { display: none; min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.audit-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.audit-table th, .audit-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.audit-table th { color: var(--color-text-muted); font-size: .75rem; }
.audit-table th:first-child { width: 24%; }
.audit-table th:last-child { width: 24%; }
.audit-table tbody tr { transition: background-color var(--motion-fast) var(--motion-ease); }
.audit-table tbody tr.audit-entry--interactive:hover,
.audit-card.audit-entry--interactive:hover { background: var(--color-surface-nested); }
.audit-table tbody tr:last-child td { border-bottom: 0; }
.audit-table td { color: var(--color-text-secondary); font-size: .86rem; }
.audit-entry--interactive { cursor: pointer; }
.audit-entry--interactive:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.audit-entry--interactive[data-busy="true"] { opacity: .72; cursor: wait; }
.audit-table td strong, .audit-card strong { display: block; color: var(--color-text); }
.audit-table td small, .audit-card small { display: block; margin-top: 2px; color: var(--color-text-muted); }
.audit-table time, .audit-card time { color: var(--color-text-muted); white-space: nowrap; }
.audit-cards { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.audit-card { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-secondary); font-size: .86rem; }
.audit-card__action { margin: 0; overflow-wrap: anywhere; }
.audit-card time { font-size: .76rem; }
.audit-skeleton { display: flex; flex-direction: column; gap: var(--space-2); }
.audit-skeleton span { height: 62px; display: block; background: linear-gradient(90deg, var(--color-surface) 20%, var(--color-surface-nested) 50%, var(--color-surface) 80%); background-size: 220% 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); animation: auditSkeleton 1.2s linear infinite; }
.pagination { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); }
.pagination button { font-weight: 700; }
.pagination button[aria-current="page"] { color: white; background: var(--color-accent); border-color: var(--color-accent); }
.pagination button:disabled { opacity: .42; cursor: default; }
.pagination span { min-width: 28px; text-align: center; }
@keyframes auditSkeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 599px) {
  input, select, textarea { font-size: 16px; }
  .audit-filters { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: var(--space-2); padding-right: var(--space-3); padding-left: var(--space-3); }
  .topbar__section { gap: var(--space-1); }
  .userbar { gap: var(--space-1); }
  .userbar__profile { gap: var(--space-1); }
  .userbar__avatar { width: 32px; height: 32px; }
  .userbar__avatar .icon { width: 18px; height: 18px; }
  .userbar__name { font-size: .74rem; }
  .userbar__role { font-size: .68rem; }
  .role-toolbar { align-items: stretch; flex-direction: column; }
  .role-toolbar .btn { width: 100%; }
  .organization-settings__head { align-items: flex-start; }
  .organization-settings__pane { padding: var(--space-4); }
  .organization-placement { grid-template-columns: minmax(0, 1fr) auto; }
  .organization-placement__select { grid-column: 1; grid-row: 2; }
  .organization-placement .organization-navigation__move { grid-column: 2; grid-row: 2; }
  .organization-asset { flex-wrap: wrap; }
  .organization-asset__actions { width: 100%; padding-left: 64px; }
  .organization-asset__actions .btn { flex: 1; }
}

@media (max-width: 420px) {
  .card__head { display: grid; grid-template-columns: minmax(0, 1fr); }
  .card__when { justify-content: flex-start; text-align: left; }
  .card[data-completed="true"] .card__head { display: flex; }
  .card[data-completed="true"] .card__date {
    min-width: 0;
    max-width: 50%;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .topbar { gap: var(--space-1); padding-right: var(--space-2); padding-left: var(--space-2); }
  #section-title { font-size: .84rem; }
  .userbar__name { max-width: 64px; font-size: .7rem; }
  .userbar__role { font-size: .64rem; }
  .view { padding-right: var(--space-3); padding-left: var(--space-3); }
  .orders-sticky-nav { margin-right: calc(var(--space-3) * -1); margin-left: calc(var(--space-3) * -1); padding-right: var(--space-3); padding-left: var(--space-3); }
  .delivery-sticky-nav { margin-right: calc(var(--space-3) * -1); margin-left: calc(var(--space-3) * -1); padding-right: var(--space-3); padding-left: var(--space-3); }
  .delivery-row { padding: 6px; gap: 6px; }
  .delivery-row__actions { gap: 4px; }
  .delivery-row__address { font-size: .84rem; }
  .create-order-actions > .btn { padding-right: var(--space-1); padding-left: var(--space-1); font-size: .78rem; }
  .card { padding: var(--space-3); }
  .actions, .stock-move { grid-template-columns: 1fr; }
  .actions.actions--courier_delivery,
  .actions.actions--courier_pickup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions.actions--manager_delivery,
  .actions.actions--manager_pickup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .actions--manager_delivery .btn, .actions--manager_pickup .btn { padding-right: var(--space-1); padding-left: var(--space-1); gap: var(--space-1); font-size: .72rem; }
  .actions--manager_delivery .btn .icon, .actions--manager_pickup .btn .icon { width: 16px; height: 16px; }
  .user-auth__actions { grid-template-columns: 1fr; }
  .stock-move > * { grid-column: 1; }
  .controls { flex-direction: column; }
  .control { justify-content: flex-start; }
  .control--date { flex-basis: auto; }
  .stock-tools .btn { flex: 1 1 100%; }
  .bottom-nav { padding-right: var(--space-1); padding-left: var(--space-1); }
}

@media (min-width: 600px) {
  .period-range { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) auto; }
  .period-range .btn { grid-column: auto; }
  .view { max-width: 860px; padding: var(--space-6) var(--space-6) calc(var(--bottom-nav-height) + var(--space-7) + env(safe-area-inset-bottom)); }
  .orders-sticky-nav { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; padding: var(--space-6) var(--space-6) var(--space-3); }
  .delivery-sticky-nav { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; padding: var(--space-6) var(--space-6) var(--space-3); }
  .orders-mode-tools { justify-content: flex-end; }
  .orders-mode-tools > .reservation-report-open { width: 100%; }
  .active-orders-tools { flex-direction: row; align-items: center; justify-content: flex-end; }
  .active-orders-tools > .active-orders-controls { width: auto; flex: 1 1 auto; }
  .active-orders-tools > .active-orders-report-open { width: auto; flex: 0 0 auto; }
  .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .orders-switch, .controls, .section-tools, .sync-log { grid-column: 1 / -1; }
  .form { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
  .stock-move { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal { align-items: center; padding: var(--space-6); }
  .modal__card { border-radius: var(--radius-lg); animation-name: dialogIn; }
  .modal.is-closing .modal__card { animation-name: dialogOut; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-card--order-types { grid-column: 1 / -1; }
  .order-type-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organization-settings__head > .organization-settings__save { display: inline-flex; }
  .organization-settings__mobile-save { display: none; }
  .organization-settings__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organization-color-field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organization-alias { grid-template-columns: minmax(150px, .8fr) repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
  .order-schedule-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .pwa-offline--stale { bottom: var(--space-6); margin-left: var(--sidebar-width); }
  #app { min-height: 100vh; min-height: 100dvh; padding-left: var(--sidebar-width); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; padding-right: var(--space-7); padding-left: var(--space-7); }
  .topbar__section { grid-column: 1; }
  .userbar { grid-column: 2; }
  #section-title { color: var(--color-text); font-size: 1.3rem; font-weight: 800; }
  .userbar__name { max-width: 220px; }
  .bottom-nav { top: 0; bottom: 0; inset-inline: 0 auto; width: var(--sidebar-width); max-width: none; min-height: 100vh; min-height: 100dvh; padding: var(--space-7) var(--space-4); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-2); background: var(--color-nav); border: 0; border-right: 1px solid var(--color-border); border-radius: 0; box-shadow: 10px 0 30px rgba(0, 0, 0, .12); -webkit-transform: none; transform: none; will-change: auto; }
  .bottom-nav::before { display: none; }
  .organization-brand { min-width: 0; margin: 0 var(--space-3) var(--space-7); display: flex; align-items: center; gap: var(--space-3); }
  .organization-brand img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; border-radius: var(--radius-xs); }
  .organization-brand span { min-width: 0; overflow: hidden; font-size: 1.55rem; font-weight: 850; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-language { min-height: 44px; margin-top: auto; padding: var(--space-2) var(--space-3); display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); background: var(--color-control); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
  .sidebar-language:focus-within { border-color: color-mix(in srgb, var(--color-border) 45%, var(--color-accent)); outline: 3px solid color-mix(in srgb, var(--color-accent) 24%, transparent); outline-offset: 2px; }
  .sidebar-language select { min-width: 0; width: 100%; color: inherit; font: inherit; font-weight: 750; background: transparent; border: 0; cursor: pointer; }
  .sidebar-language select:focus { outline: 0; }
  .bottom-nav__item { width: 100%; min-height: 54px; padding: var(--space-2) var(--space-3); flex-direction: row; justify-content: flex-start; gap: var(--space-3); font-size: .94rem; border-radius: var(--radius-sm); }
  .bottom-nav__icon { width: 36px; height: 36px; margin: 0; background: transparent; border: 0; border-radius: var(--radius-xs); box-shadow: none; }
  .bottom-nav__create-icon { width: 46px; height: 46px; margin: 0; flex: 0 0 46px; color: var(--color-accent); background: transparent; border: 1px solid color-mix(in srgb, var(--color-accent) 58%, var(--color-border)); border-radius: 50%; box-shadow: none; }
  .bottom-nav__create-icon .icon { width: 22px; height: 22px; stroke-width: 2; }
  .bottom-nav__item--create { margin: var(--space-2) 0; color: var(--color-text-muted); border: 0; }
  .bottom-nav__item--create:not(.is-active):hover .bottom-nav__create-icon { background: color-mix(in srgb, var(--color-accent) 7%, transparent); border-color: color-mix(in srgb, var(--color-accent) 78%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 9%, transparent); }
  .bottom-nav__item--create:active .bottom-nav__create-icon { transform: scale(.98); }
  .bottom-nav__item--create.is-active { color: var(--color-accent); }
  .bottom-nav__item--create.is-active .bottom-nav__create-icon { color: white; background: var(--color-accent); border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
  .bottom-nav__item--create.is-active:hover .bottom-nav__create-icon { color: white; background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent); }
  .audit-filters { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(110px, 1.2fr) minmax(105px, .8fr) minmax(105px, .8fr) 44px auto; }
  .audit-filters label { flex: none; }
  .audit-search, .audit-reset { grid-column: auto; }
  .audit-filter-error { grid-column: 1 / -1; }
  .audit-table-wrap { display: block; }
  .audit-cards { display: none; }
  .view { max-width: var(--content-max-width); min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); padding: var(--space-7); }
  .view.view--orders { max-width: none; padding: 0 0 var(--space-7); }
  .view.view--delivery { max-width: none; padding: 0 0 var(--space-7); }
  .view--orders .orders-sticky-nav { margin: 0; padding: var(--space-7) 0 var(--space-3); }
  .view--delivery .delivery-sticky-nav { margin: 0; padding: var(--space-7) 0 var(--space-3); }
  .view--orders .orders-sticky-nav__inner,
  .view--orders .orders-mode-tools,
  .view--orders .orders-mode-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-7);
    padding-left: var(--space-7);
  }
  .view--delivery .delivery-sticky-nav__inner,
  .view--delivery .delivery-tools,
  .view--delivery .delivery-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-7);
    padding-left: var(--space-7);
  }
  .toast { bottom: var(--space-6); margin-left: calc(var(--sidebar-width) / 2); }
  .pwa-update { bottom: var(--space-6); margin-left: calc(var(--sidebar-width) / 2); }
  .list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { max-width: 900px; }
  .create-order-form { max-width: var(--content-max-width); }
}

@media (min-width: 1200px) {
  .create-order-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@supports (container-type: inline-size) {
  .create-order-form { container-type: inline-size; }
  @container (min-width: 820px) {
    .create-order-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@media (min-width: 1320px) {
  .view > .list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-move { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stock-move input[name="note"] { grid-column: span 3; }
  .stock-move .btn { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .view--enter-main,
  .view--enter-forward,
  .view--enter-back,
  .modal__card,
  .confirm-modal__card,
  .toast,
  .order-card--enter,
  .order-card--moving,
  .order-card--exit,
  .delivery-row,
  .bottom-nav__icon,
  .bottom-nav__item.is-active .bottom-nav__icon,
  .topbar__back:active,
  .userbar__action:active,
  .btn:active,
  .seg:active,
  .control:active {
    transform: none !important;
  }
}