:root {
  scrollbar-gutter: stable;
  overflow-y: scroll;
  --brand: #0091cd;
  --brand-hover: #007dac;
  --brand-light: #55bbeb;
  --ink: #191919;
  --heading: #444;
  --muted: #777;
  --line: #d4dee3;
  --surface: #fff;
  --surface-muted: #f7f9fa;
  --canvas: #eef0f1;
  --shadow: 0 8px 28px rgba(0, 66, 93, .08);
  --inside-header-height: 0px;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; background: var(--canvas); font-size: 16px; line-height: 1.45; }
a { color: #0078aa; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(85, 187, 235, .5); outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--heading); }
h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.15; }
h2 { margin: 0 0 15px; font-size: 1.2rem; line-height: 1.25; }
h3 { margin: 18px 0 7px; font-size: .92rem; }
h4 { margin: 14px 0 6px; font-size: .88rem; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid #b9cbd3; border-radius: 8px; background: #fff; color: var(--heading); font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.button:hover { border-color: #9eb4be; background: #f5f8f9; text-decoration: none; }
.button-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.button-primary:hover { border-color: var(--brand-hover); background: var(--brand-hover); }
.button-quiet { min-height: 34px; padding: 5px 11px; }
.button:disabled { cursor: wait; opacity: .6; }
.site-header { position: static; padding: 0 clamp(16px, 3vw, 42px); background: #555; border-bottom: 1px solid #414141; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.site-header-inner { display: flex; width: min(1480px, 100%); min-height: 74px; margin: 0 auto; align-items: center; gap: 18px; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; color: #fff; font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand img { display: block; width: 174px; height: auto; object-fit: contain; }
.brand span { padding-left: 11px; border-left: 1px solid rgba(255, 255, 255, .28); white-space: nowrap; }
.brand-mobile-title, .mobile-nav-toggle { display: none; }
.mobile-nav-panel { display: contents; }
.main-nav { display: flex; flex: 1; min-width: 0; align-items: center; gap: 4px; }
.main-nav a { padding: 8px 9px; border-radius: 6px; color: rgba(255, 255, 255, .88); font-size: .89rem; font-weight: 650; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.main-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.main-nav a.is-active { background: var(--brand); color: #fff; }
.user-actions { display: flex; min-width: 0; margin-left: auto; align-items: center; gap: 10px; color: #fff; white-space: nowrap; }
.user-name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.user-divider { color: rgba(255, 255, 255, .45); }
.user-actions form { margin: 0; }
.site-header .button-quiet { border-color: rgba(255, 255, 255, .42); background: transparent; color: #fff; font-size: .9rem; }
.site-header .button-quiet:hover { background: rgba(255, 255, 255, .1); }
.page-shell { width: min(1240px, calc(100% - 32px)); margin: 28px auto 64px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; }
.page-heading p { margin: 6px 0 0; color: var(--muted); }
.orders-page-heading { margin-bottom: 0; }
.orders-page-heading + .orders-browser .orders-count-line { margin-top: -26px; }
.panel { min-width: 0; margin-bottom: 20px; padding: clamp(18px, 2.7vw, 30px); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.notice { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; border-left: 4px solid var(--brand); background: #eaf7fc; overflow-wrap: anywhere; }
.notice-error { border-color: #bc2f2f; background: #fff0f0; color: #872929; }
.orders-browser { min-width: 0; }
.orders-count-line { display: flex; min-height: 26px; margin-bottom: 6px; padding-right: 13px; justify-content: flex-end; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.orders-loading { width: 16px; height: 16px; border: 2px solid #c8d8df; border-top-color: var(--brand); border-radius: 50%; animation: orders-spin .75s linear infinite; }
@keyframes orders-spin { to { transform: rotate(360deg); } }
/* Сплошной серый фон под скруглёнными углами закреплённой панели. */
.orders-filter-form { position: sticky; top: calc(var(--inside-header-height) + 8px); z-index: 5; margin: 0; border: 1px solid transparent; border-radius: 0; background: var(--canvas); box-shadow: 0 -7px 0 2px var(--canvas); }
.orders-filter-form::before { position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: #fff; content: ""; pointer-events: none; }
.orders-toolbar { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(90px, 1fr) minmax(260px, 1.1fr) minmax(177px, .75fr) minmax(225px, 1.05fr) 244px; min-height: 56px; align-items: center; gap: 4px; padding: 8px 13px; border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; background: #fff; }
.orders-toolbar:not(:has(.status-control)) { grid-template-columns: minmax(180px, 1fr) minmax(177px, .8fr) minmax(225px, 1fr) 244px; }
.orders-primary-controls, .orders-secondary-controls { display: contents; }
.orders-mobile-search { display: contents; }
.orders-mobile-toggle { display: none; }
.filter-control { position: relative; display: inline-flex; min-width: 0; height: 42px; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9aa6ac; transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.filter-control:hover, .filter-control:focus-within, .filter-control.is-active { border-color: var(--line); background: #fff; color: var(--muted); }
.filter-control:focus-within { border-color: #79c8e8; box-shadow: 0 0 0 2px rgba(85, 187, 235, .2); }
.filter-control > svg, .period-toggle > svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filter-control input, .filter-control select { width: 100%; min-width: 0; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--heading); font-family: inherit; font-size: 1rem; font-weight: 650; line-height: 28px; }
.filter-control input::placeholder { color: #a9b2b7; opacity: 1; font: inherit; transition: opacity .15s ease; }
.filter-control input:focus::placeholder { opacity: 0; }
.filter-control input::-webkit-search-cancel-button { display: none; }
.control-arrow::after { position: absolute; top: 50%; right: 10px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; pointer-events: none; opacity: 0; content: ""; transform: translateY(-68%) rotate(45deg); transform-origin: 50% 50%; transition: opacity .15s ease, transform .15s ease; }
.control-arrow:hover::after, .control-arrow:focus-within::after { opacity: 1; }
.control-arrow:has(.period-toggle[aria-expanded="true"])::after { transform: translateY(-30%) rotate(225deg); }
@supports selector(select:open) {
  .control-arrow:has(> select:open)::after { transform: translateY(-30%) rotate(225deg); }
}
.control-arrow.is-active::after { display: none; }
.select-control select { display: flex; align-items: center; overflow: hidden; appearance: none; padding-right: 17px; color: #a9b2b7; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.select-control.is-active select { padding-right: 0; }
.select-control:hover select, .select-control:focus-within select, .select-control.is-active select { color: var(--heading); }
.select-control option { background: #f3f9fc; color: var(--ink); font-weight: 400; }
.select-control option:checked { background: var(--brand); color: #fff; }
@supports (appearance: base-select) {
  .select-control select, ::picker(select) { appearance: base-select; }
  .select-control select::picker-icon { display: none; }
  ::picker(select) { position-area: block-end span-inline-end; margin-top: 4px; border: 1px solid #9fc6d7; border-radius: 10px; background: #f3f9fc; box-shadow: 0 10px 24px rgba(0, 66, 93, .16); }
  .select-control option { padding: 8px 12px; border-radius: 6px; }
  .select-control option:hover, .select-control option:focus { background: #dff2fa; }
  .select-control option:checked { background: var(--brand); color: #fff; }
  .select-control option::checkmark { display: none; }
}
.filter-clear { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.filter-clear:hover { background: #e2f4fb; color: var(--brand-hover); }
.period-toggle { display: flex; width: 100%; min-width: 0; height: 28px; margin: 0; padding: 0 17px 0 0; align-items: center; gap: 6px; border: 0; background: transparent; color: #a9b2b7; font-size: 1rem; font-weight: 650; line-height: 28px; text-align: left; white-space: nowrap; cursor: pointer; }
.period-control:hover .period-toggle, .period-control:focus-within .period-toggle, .period-control.is-active .period-toggle { color: var(--heading); }
.period-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.period-toggle > svg { color: #9aa6ac; }
.period-control:hover .period-toggle > svg, .period-control:focus-within .period-toggle > svg, .period-control.is-active .period-toggle > svg { color: var(--muted); }
.period-control.is-active .period-toggle { padding-right: 0; }
.period-panel { position: absolute; z-index: 8; top: calc(100% + 5px); right: 0; width: 350px; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--inside-header-height) - 96px); overflow-y: auto; padding: 12px; border: 1px solid #9fc6d7; border-radius: 10px; background: #f3f9fc; box-shadow: 0 10px 24px rgba(0, 66, 93, .16); color: var(--heading); }
.period-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.period-presets button { min-height: 34px; padding: 5px 6px; border: 0; border-radius: 6px; background: #fff; color: var(--heading); font-size: .88rem; cursor: pointer; }
.period-presets button:hover, .period-presets button.is-active { background: #dff2fa; color: var(--brand-hover); }
.period-calendar { padding: 6px; border-radius: 8px; background: #fff; }
.period-month-navigation { display: flex; min-height: 40px; justify-content: space-between; align-items: center; gap: 5px; }
.period-month-navigation strong { font-size: .95rem; }
.period-month-navigation button { display: grid; width: 36px; height: 36px; place-items: center; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--brand); cursor: pointer; }
.period-month-navigation button:hover { background: #ddf3fc; }
.period-month-navigation svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.period-weekdays, .period-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.period-weekdays { padding: 5px 0; color: var(--muted); font-size: .75rem; text-align: center; }
.period-day { min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--heading); font-variant-numeric: tabular-nums; cursor: pointer; }
.period-day:hover { background: #ddf3fc; }
.period-day.is-outside { color: #a9b2b7; }
.period-day.is-range { border-radius: 0; background: #e5f5fc; }
.period-day.is-today { font-weight: 750; box-shadow: inset 0 0 0 1px #79c8e8; }
.period-day.is-start, .period-day.is-end { border-radius: 6px; background: var(--brand); color: #fff; }
.period-hint { min-height: 20px; margin: 8px 0 2px; color: var(--muted); font-size: .8rem; text-align: center; }
.period-fallback { display: flex; gap: 8px; padding: 10px 13px; }
.period-fallback label { display: flex; align-items: center; gap: 5px; }
.orders-heading-shell { overflow: hidden; background: #f4f7f8; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { min-width: 0; padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .035em; }
td { overflow-wrap: anywhere; }
.orders-table { width: 100%; table-layout: fixed; }
.order-column { width: 196px; }
.composition-column { width: auto; }
.customer-column { width: var(--inside-customer-width, auto); }
.payment-column { width: 132px; }
.amount-column { width: 100px; }
.orders-heading-table th { height: 44px; padding: 9px 13px; border-bottom: 0; background: #f4f7f8; vertical-align: middle; }
.order-heading-actions { display: flex; align-items: center; gap: 8px; }
.order-heading-label { display: flex; min-height: 24px; align-items: center; }
.sort-button { display: flex; width: fit-content; max-width: 100%; min-height: 24px; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: color .15s ease; }
.amount-heading .sort-button { margin-left: auto; }
.sort-button:hover, .sort-button.is-sorted { color: var(--brand-hover); }
.sort-button:focus-visible { border-radius: 4px; outline: 3px solid rgba(85, 187, 235, .38); outline-offset: 3px; }
.sort-button svg { position: relative; top: -1px; width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transform-box: view-box; transform-origin: 50% 50%; transition: opacity .15s ease, transform .18s ease; }
.sort-button:hover svg, .sort-button.is-sorted svg { opacity: 1; }
.sort-button.is-sorted[data-sort-direction="asc"] svg { transform: rotate(180deg); }
.amount-heading, .order-amount { text-align: right; }
.orders-results { min-width: 0; margin-top: -1px; overflow-x: auto; border: 1px solid var(--line); border-radius: 0 0 12px 12px; background: #fff; }
.orders-results > .notice { margin: 12px; }
.orders-native-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.order-summary { background: #fff; cursor: pointer; transition: background-color .15s ease; }
.order-summary:hover { background: #f3faff; }
.order-summary:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
.order-summary td { height: 82px; padding: 12px 13px; }
.order-record:last-child .order-summary td { border-bottom: 0; }
.order-number a { display: inline-flex; min-height: 28px; align-items: center; color: var(--heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.order-number a:hover { color: var(--brand-hover); }
.order-number .order-date { display: block; min-height: 0; margin: 2px 0 8px; color: var(--muted); font-size: .8rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.status, .payment-state { display: inline-flex; max-width: 100%; min-height: 29px; align-items: center; padding: 5px 10px; border: 0; border-radius: 999px; background: #e9edef; color: #53626a; font-size: .84rem; font-weight: 400; line-height: 1.35; text-align: left; }
.status-1 { color: #075c80; background: #ddf3fc; }
.status-7 { color: #246a60; background: #e1f4f1; }
.status-6 { color: #88501a; background: #fff0df; }
.status-2 { color: #6d449b; background: #f0e8fb; }
.status-3 { color: #17623b; background: #dff6e9; }
.status-5 { color: #4e4e4e; background: #ededed; }
.status-4 { color: #8b2020; background: #ffe5e5; }
.order-composition-surface { min-width: 0; padding: 5px 7px; border-radius: 7px; background: transparent; }
.order-composition-text, .order-buyer-text { min-width: 0; color: var(--heading); line-height: 1.4; overflow-wrap: anywhere; }
.composition-item + .composition-item { margin-top: 8px; }
.composition-item strong { font-weight: 500; }
.composition-item, .editor-product-content { display: flex; align-items: flex-start; gap: 10px; }
.composition-item-copy, .editor-product-description { flex: 1; min-width: 0; }
.composition-item-footer { display: contents; }
.product-photo { position: relative; display: inline-block; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border-radius: 4px; background: transparent; }
.product-photo[data-product-image=""], .product-photo.has-product-image-error { background: #e9edf2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='10' y='13' width='28' height='23' rx='2' fill='none' stroke='%23979fa5' stroke-width='2'/%3E%3Ccircle cx='32' cy='20' r='2.5' fill='%23979fa5'/%3E%3Cpath d='M11 31l9-10 8 8 4-4 5 6v4H11z' fill='%23979fa5'/%3E%3C/svg%3E") center / cover no-repeat; }
.product-photo img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.product-photo.has-product-image-error img { visibility: hidden; }
.product-photo-preview { position: fixed; z-index: 1200; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 30px rgba(35, 55, 70, .2); pointer-events: none; }
.product-photo-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.order-comment { margin-top: 12px; font-size: .88rem; }
.order-comment > span { color: #000; font-weight: 400; }
.order-comment p { margin: 4px 0 0; color: var(--muted); }
.composition-quantity { display: block; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.item-model, .item-tariff { display: block; margin-top: 3px; font-size: .85rem; }
.item-tariff { color: #075c80; }
.order-buyer-text strong { display: block; color: var(--heading); font-weight: 500; }
.order-buyer-text > span, .buyer-phone { display: block; margin-top: 4px; font-size: .88rem; }
.buyer-address { white-space: pre-line; }
.order-search-link { width: fit-content; max-width: 100%; color: var(--muted); cursor: pointer; }
.order-search-link:hover { color: var(--brand-hover); text-decoration: underline; }
.order-payment { font-size: .9rem; }
.payment-state { white-space: nowrap; }
.payment-state.is-paid { color: #fff; background: #28b05d; }
.payment-state.is-unpaid, .payment-state:not(.is-paid) { color: #fff; background: #aaaaaa; }
.payment-method { display: block; min-height: 30px; margin-top: 5px; color: var(--muted); font: inherit; text-align: left; }
.order-amount { color: var(--heading); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orders-search-match { padding: 0 1px; border-radius: 2px; background: #ffed96; color: inherit; }
.orders-text-link { color: var(--brand); font: inherit; text-decoration: none; overflow-wrap: anywhere; }
.orders-text-link:hover { text-decoration: underline; }
.order-search-reasons { display: grid; gap: 4px; margin-top: 7px; }
.order-search-reason { display: block; min-width: 0; color: var(--heading); font-size: .82rem; overflow-wrap: anywhere; }
.order-search-reason > span { color: var(--muted); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 20px 13px; }
.pagination > span { color: var(--muted); font-size: .85rem; }
.empty-state { padding: 38px 16px; text-align: center; }
.empty-state h2 { margin-bottom: 8px; }
.empty-state p { margin: 0; color: var(--muted); }
.back-link { display: inline-flex; min-height: 42px; margin-bottom: 15px; align-items: center; gap: 8px; font-size: .9rem; }
.order-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.items-table td { vertical-align: top; }
.items-table th:not(:first-child), .items-table td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.items-table tbody tr:last-child td { border-bottom: 0; }
.item-name { width: 53%; }
.item-name strong { font-weight: 500; }
.details-list { margin: 0; }
.details-list > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.details-list > div:first-child { padding-top: 0; }
.details-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.details-list .order-total { font-size: 1.08rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.order-total dt { color: var(--heading); }
.text-block { white-space: pre-wrap; overflow-wrap: anywhere; }
.panel > .text-block:last-child { margin-bottom: 0; }
.camera-list { margin: 0; padding-left: 27px; }
.camera-list li { padding: 9px 0 9px 5px; border-bottom: 1px solid var(--line); }
.camera-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.camera-list li::marker { color: var(--muted); font-size: .85rem; }
.camera-list li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.camera-list .muted { font-size: .9rem; }
.camera-id { font: 600 1rem ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #dfe3e5, #eef0f1 52%, #d8dddf); }
.login-card { width: min(420px, 100%); min-width: 0; padding: 30px; border: 1px solid #c8d0d4; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(28, 39, 44, .16); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -30px -30px 28px; padding: 18px 20px; border-radius: 13px 13px 0 0; background: #555; color: #fff; }
.login-brand img { width: 174px; max-width: calc(100% - 90px); height: auto; }
.login-brand span { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .3); font-size: .9rem; }
.login-card h1 { margin-bottom: 25px; font-size: 1.5rem; text-align: center; }
.login-card label { display: block; margin: 18px 0 7px; color: var(--heading); font-size: .9rem; font-weight: 650; }
.login-card input:not([type="hidden"]) { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #b7ccd6; border-radius: 8px; background: #fff; color: var(--ink); }
.login-card input:focus { border-color: var(--brand); outline: 3px solid rgba(85, 187, 235, .22); outline-offset: 0; }
.password-field { position: relative; }
.password-field input { padding-right: 50px !important; }
.password-toggle { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover { background: #eaf7fc; color: var(--brand); }
.password-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.login-submit { width: 100%; min-height: 46px; margin-top: 26px; }
@media (min-width: 841px) {
  .order-composition .composition-item { position: relative; left: -54px; width: calc(100% + 54px); }
  .order-summary:has(.status-2) .composition-item:first-child:has(+ .composition-item) { min-height: 80px; }
  .order-payment > .payment-state { position: relative; left: -12px; }
}
@media (max-width: 1100px) and (min-width: 841px) {
  .orders-toolbar { grid-template-columns: minmax(0, 1fr) 255px 135px 190px 244px; gap: 2px; padding-right: 8px; padding-left: 8px; }
  .orders-toolbar:not(:has(.status-control)) { grid-template-columns: minmax(110px, 1fr) 175px 212px 244px; }
  .filter-control { gap: 4px; padding-right: 6px; padding-left: 6px; }
}
@media (max-width: 960px) and (min-width: 841px) {
  .orders-toolbar { grid-template-columns: minmax(0, 1fr) 222px 110px 120px 244px; }
  .status-control > svg, .paid-control > svg, .payment-control > svg, .period-toggle > svg { display: none; }
}
@media (max-width: 980px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-layout > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .order-layout > div:last-child .panel { margin-bottom: 0; }
}
@media (max-width: 840px) {
  .composition-quantity, .order-amount { font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Arial, sans-serif; }
  .site-header { position: static; padding: 0 12px; }
  .site-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) 44px; min-height: 60px; column-gap: 0; row-gap: 8px; padding: 8px 0; }
  .brand { width: 100%; min-width: 0; }
  .brand img { width: 174px; flex: 0 0 174px; }
  .brand-product-title { display: none; }
  .brand .brand-mobile-title { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; font-size: .9rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-toggle { width: 100%; min-width: 44px; height: 44px; padding: 10px; align-items: center; justify-content: flex-end; border: 0; background: transparent; color: rgba(255, 255, 255, .9); cursor: pointer; touch-action: manipulation; }
  .js-enabled .mobile-nav-toggle { display: inline-flex; }
  .mobile-nav-toggle-icon { display: block; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; border-radius: 50%; transition: color .15s ease, background-color .15s ease; }
  .mobile-nav-toggle:hover .mobile-nav-toggle-icon, .mobile-nav-toggle:focus-visible .mobile-nav-toggle-icon { background: rgba(85, 187, 235, .2); color: #fff; }
  .mobile-nav-toggle-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 12px 12px; transition: opacity .16s ease, transform .16s ease; }
  .site-header-inner.is-mobile-nav-open .mobile-nav-toggle-line-top { transform: translateY(6px) rotate(45deg); }
  .site-header-inner.is-mobile-nav-open .mobile-nav-toggle-line-middle { opacity: 0; transform: scaleX(0); }
  .site-header-inner.is-mobile-nav-open .mobile-nav-toggle-line-bottom { transform: translateY(-6px) rotate(-45deg); }
  .mobile-nav-panel { display: grid; grid-column: 1 / -1; min-width: 0; }
  .js-enabled .mobile-nav-panel { display: none; }
  .js-enabled .site-header-inner.is-mobile-nav-open .mobile-nav-panel { display: grid; }
  .main-nav { display: grid; grid-template-columns: 1fr; width: 100%; gap: 5px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .main-nav a { width: 100%; padding: 8px; font-size: .86rem; text-align: center; }
  .user-actions { width: 100%; margin: 0; padding: 5px 0 2px; justify-content: flex-end; border-top: 1px solid rgba(255, 255, 255, .16); }
  /* Среднее прежних отступов шапка → поиск и шапка → первая карточка заказа. */
  .page-shell { margin-top: 24px; --inside-mobile-back-line: clamp(.984rem, 4.68vw, 1.44rem); --inside-mobile-content-gap: calc(((var(--inside-mobile-back-line) - 4px) * 4 / 9 + 28.67px + 16px + var(--inside-mobile-back-line) + 12px) / 2); }
  .page-shell:has(.orders-browser) { margin-top: calc(var(--inside-mobile-content-gap) - 28.67px); }
  .orders-page-heading { display: none; }
  .orders-page-heading + .orders-browser .orders-count-line { margin-top: 0; }
  .orders-count-line { margin-bottom: 2.67px; gap: 3.55px; }
  .orders-browser > .notice { margin-bottom: 8.89px; }
  .orders-results > .notice { margin: 5.33px; }
  .orders-filter-form { display: contents; }
  .orders-filter-form::before { display: none; }
  .orders-toolbar { display: contents; }
  .orders-primary-controls, .orders-secondary-controls { display: contents; }
  .filter-control { display: flex; width: 100%; min-height: 44px; margin-bottom: 4.89px; padding: 4px 9px; border: 1px solid var(--line); background: #fff; }
  .js-enabled .filter-control:not(.search-control) { display: none; }
  .js-enabled .filter-control:not(.search-control).is-active, .orders-filter-form.is-mobile-filters-open .filter-control:not(.search-control) { display: flex; }
  .orders-mobile-search { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.89px; margin-bottom: 4.89px; border-radius: 0; background: var(--canvas); }
  .js-enabled .orders-mobile-search { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .orders-mobile-search .search-control { position: relative; margin-bottom: 0; }
  .orders-mobile-search .search-control::before { display: none; }
  .filter-control:not(.search-control).is-active, .orders-mobile-search { position: sticky; top: var(--inside-filter-top, 1.78px); z-index: 5; }
  .filter-control:not(.search-control).is-active { margin-bottom: 4.89px; border-color: transparent; border-radius: 0; background: var(--canvas); box-shadow: 0 0 0 4.89px var(--canvas); }
  .filter-control:not(.search-control).is-active::before { position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--line); border-radius: 9px; background: #fff; content: ""; pointer-events: none; }
  .filter-control:not(.search-control).is-active:focus-within::before { border-color: #79c8e8; box-shadow: 0 0 0 2px rgba(85, 187, 235, .2); }
  .orders-mobile-search::before { position: absolute; inset: 0; z-index: -1; background: var(--canvas); box-shadow: 0 0 0 4.89px var(--canvas); content: ""; pointer-events: none; }
  .js-enabled .orders-mobile-toggle { display: inline-grid; width: 44px; height: 44px; padding: 10px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
  .orders-mobile-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .orders-mobile-toggle[aria-expanded="true"] { border-color: #a9d9ec; background: #eaf7fc; color: var(--brand-hover); }
  .period-control:has(.period-toggle[aria-expanded="true"]) { z-index: 6; }
  .select-control select { padding-right: 25px; }
  .control-arrow::after { opacity: 1; }
  .orders-heading-shell { margin-bottom: 3.55px; border: 0; background: transparent; }
  .js-enabled .orders-heading-shell { display: none; }
  .orders-filter-form.is-mobile-sort-open .orders-heading-shell { display: block; }
  .orders-heading-table, .orders-heading-table thead, .orders-heading-table tr { display: flex; width: 100% !important; transform: none !important; }
  .orders-heading-table tr { flex-wrap: nowrap; gap: .89px; }
  .orders-heading-table th, .orders-heading-table colgroup { display: none; }
  .orders-heading-table th:first-child, .orders-heading-table th:nth-child(3), .orders-heading-table th:nth-child(5), .orders-heading-table .order-heading-actions { display: contents; }
  .orders-heading-table .sort-button { flex: 1 1 auto; width: auto; min-height: 38px; margin: 0; padding: 7px 1px; justify-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-transform: none; letter-spacing: 0; transform: none; }
  .orders-heading-table .sort-button svg { width: 12px; height: 12px; }
  .orders-heading-table .sort-button.is-sorted { border-color: #a9d9ec; background: #eaf7fc; }
  .orders-results { margin: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .orders-table, .orders-table tbody { display: block; min-width: 0; }
  .orders-table colgroup, .orders-native-heading { display: none; }
  .order-record { margin-bottom: 6.36px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
  .orders-table .order-summary { position: relative; display: grid; grid-template-columns: max-content minmax(var(--inside-status-min-width, 0px), 1fr) minmax(0, max-content); grid-template-areas: "number status paid" "date status paid" "items items items" "buyer buyer buyer" "method method amount"; gap: 0 4px; padding: 11px 13px 6px; background: #fff; }
  .orders-table .order-summary:hover, .orders-table .order-summary:focus, .orders-table .order-summary:focus-visible, .orders-table .order-summary:active { background: #fff; outline: none; }
  .orders-table .order-summary:focus-visible { outline: 2px solid var(--muted); outline-offset: -2px; }
  .orders-table .order-summary td { display: block; width: auto; height: auto; padding: 0; border: 0; }
  .orders-table .order-summary .order-number, .orders-table .order-summary .order-payment { display: contents; }
  .order-number > .status, .order-payment > .payment-state { display: block; min-width: 0; width: fit-content; padding-inline: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order-number > [data-order-open] { grid-area: number; min-height: 0; justify-self: start; align-self: center; }
  .order-number > .status { grid-area: status; justify-self: end; align-self: center; }
  .order-number > .order-date { grid-area: date; margin: 0; overflow-wrap: normal; }
  .order-payment > .payment-state { grid-area: paid; justify-self: end; align-self: center; }
  .order-payment > .payment-method { grid-area: method; min-height: 0; margin-top: 0; padding-top: 6px; }
  .orders-table .order-summary td.order-composition { grid-area: items; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e4eaed; }
  .order-composition-surface { padding: 0; }
  .order-composition .composition-item { display: grid; grid-template-columns: minmax(0, 1fr) 63.36px; gap: 0 10px; }
  .order-composition .composition-item + .composition-item { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e4eaed; }
  .order-composition .composition-item > .product-photo { grid-column: 2; grid-row: 1 / span 2; width: 63.36px; height: 63.36px; flex-basis: 63.36px; }
  .order-composition .composition-item-copy { display: contents; }
  .order-composition .composition-item-copy > strong, .order-composition .item-model { grid-column: 1; }
  .order-composition .composition-item-copy > strong { display: block; font-size: 1rem; font-weight: 500; line-height: 1.4; }
  .order-composition .item-model { margin-top: 4px; font-size: .86rem; }
  .order-composition .composition-item-footer { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: 0 10px; }
  .order-composition .composition-item-footer:has(.item-tariff) { margin-top: 12px; }
  .order-composition .item-tariff { grid-column: 1; grid-row: 1; min-width: 0; margin-top: 0; font-size: 1rem; }
  .item-tariff-prefix { display: none; }
  .order-composition .composition-quantity { grid-column: 2; grid-row: 1; color: var(--heading); font-size: 1rem; font-weight: 400; text-align: right; white-space: nowrap; }
  .order-composition .order-comment { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e4eaed; }
  .order-composition .order-comment > span { font-size: 1rem; }
  .orders-table .order-summary td.order-customer { grid-area: buyer; margin-top: 6px; padding: 6px 0; border-top: 1px solid #e4eaed; border-bottom: 1px solid #e4eaed; }
  .orders-table .order-summary td.order-amount { grid-area: amount; align-self: start; padding-top: 6px; font-size: 1.25rem; }
  .order-amount::before { display: none; }
  .period-control { overflow: visible; }
  .period-panel { top: calc(100% + 2.22px); width: 350px; max-width: calc(100vw - 32px); }
  .period-presets { gap: 2.22px; margin-bottom: 4.45px; }
  .period-month-navigation { gap: 2.22px; }
  .period-hint { margin: 3.55px 0 .89px; }
  .period-fallback { gap: 3.55px; }
  @supports (appearance: base-select) {
    .select-control select::picker(select) { margin-top: 1.78px; }
  }
  .pagination { gap: 4.45px; padding: 8.89px 0; }
  .pagination .button { padding: 8px 12px; }
  .empty-state { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
  .order-layout { gap: 0; }
  .order-layout > div:last-child { display: block; }
  .order-layout > div:last-child .panel { margin-bottom: 20px; }
  .page-heading > .status { max-width: 45%; }
  .items-table, .items-table tbody { display: block; }
  .items-table thead { display: none; }
  .items-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .items-table tr:first-child { padding-top: 0; }
  .items-table tr:last-child { padding-bottom: 0; }
  .items-table td { display: block; padding: 0; border: 0; }
  .items-table .item-name { grid-column: 1 / -1; width: auto; }
  .items-table td:not(:first-child) { text-align: left; white-space: normal; font-size: .83rem; }
  .items-table td:last-child { text-align: right; font-weight: 650; }
  .items-table td[data-label]::before { display: block; margin-bottom: 3px; color: var(--muted); font-size: .75rem; font-weight: 400; content: attr(data-label); }
}
@media (max-width: 360px) {
  .order-number > .order-date { max-width: 85px; }
}
@media (max-width: 380px) {
  .page-shell { --inside-mobile-back-line: .96rem; }
  .panel { padding: 18px; }
  .login-page { padding: 16px; }
  .login-card { padding: 24px; }
  .login-brand { flex-direction: column; margin: -24px -24px 24px; padding: 18px 12px; gap: 10px; }
  .login-brand img { max-width: 100%; }
  .login-brand span { padding-left: 0; border-left: 0; }
  .details-list > div { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}