@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-cyrillic.woff2") format("woff2"); font-weight:200 800; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-latin.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
:root { --page:#f6f7f9; --surface:#fff; --soft:#f2f5f9; --text:#18233b; --muted:#788399; --line:#dfe5ee; --accent:#ff4b38; --accent-dark:#d93a2a; --accent-soft:#fff0ed; --blue:#2873e8; --blue-soft:#edf4ff; --green:#36a765; --green-soft:#eaf8ef; --yellow:#ad7620; --yellow-soft:#fff5df; --red:#dc413c; --red-soft:#fff0ef; font-family:"Manrope",Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { overflow:hidden; background:var(--page); color:var(--text); }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(40,115,232,.2); outline-offset:2px; }
.is-hidden { display:none !important; }
.loading-view,.login-view { min-height:100dvh; display:grid; place-items:center; }
.loading-view { gap:18px; align-content:center; }
.loading-view img { width:180px; }
.loading-line { width:178px; height:3px; overflow:hidden; border-radius:8px; background:var(--line); }
.loading-line::after { content:""; display:block; width:45%; height:100%; background:var(--accent); animation:load 1s ease-in-out infinite alternate; }
@keyframes load { from { transform:translateX(-20%); } to { transform:translateX(150%); } }
.login-view { grid-template-columns:minmax(320px,520px) minmax(340px,450px); gap:10vw; padding:40px; background:radial-gradient(circle at 18% 14%,rgba(255,75,56,.12),transparent 26%),#f6f3ef; }
.login-copy img { width:220px; margin-bottom:42px; }
.login-copy>p { margin:0 0 12px; color:var(--accent); font-weight:800; }
.login-copy h1 { margin:0 0 22px; font-size:clamp(38px,5vw,62px); line-height:1.02; letter-spacing:-.06em; }
.login-copy>span { display:block; max-width:480px; color:var(--muted); line-height:1.7; }
.login-card { width:100%; padding:38px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(38,48,70,.1); }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.login-card h2 { margin:8px 0 28px; font-size:28px; letter-spacing:-.04em; }
.login-card label:not(.remember) { display:grid; gap:8px; margin-bottom:17px; color:var(--muted); font-size:12px; font-weight:700; }
.login-card input:not([type="checkbox"]),select,input,textarea { min-width:0; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text); }
.login-card input:not([type="checkbox"]) { height:46px; padding:0 13px; }
.remember { display:flex; gap:9px; align-items:center; margin:0 0 22px; color:var(--muted); font-size:12px; }
.remember input { accent-color:var(--accent); }
.form-error { margin:-8px 0 16px; padding:10px; border-radius:8px; background:var(--red-soft); color:var(--red); font-size:12px; }
.button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:8px; padding:0 15px; cursor:pointer; font-size:12px; font-weight:800; transition:transform .15s,background .15s; }
.button:hover { transform:translateY(-1px); }
.button:disabled { opacity:.55; cursor:wait; transform:none; }
.button-primary { background:var(--accent); color:#fff; }
.button-primary:hover { background:var(--accent-dark); }
.button-secondary { border:1px solid var(--line); background:#fff; }
.button-danger { border:1px solid #ffb8b4; background:#fff; color:var(--red); }
.app { min-height:100dvh; overflow:hidden; }
.topbar { position:relative; z-index:45; height:64px; display:flex; align-items:center; gap:28px; padding:0 22px; border-bottom:1px solid var(--line); background:#fff; }
.brand { display:flex; align-items:center; gap:15px; color:inherit; text-decoration:none; }
.brand img { width:113px; }
.brand span { padding-left:15px; border-left:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:800; }
.topbar-status { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--muted); font-size:11px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#57bc78; box-shadow:0 0 0 4px rgba(87,188,120,.12); }
.live-dot.is-offline { background:#d5904b; box-shadow:0 0 0 4px rgba(213,144,75,.14); }
.operator { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:750; }
.operator-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:var(--soft); color:var(--accent); font-size:17px; }
.icon-button { width:35px; height:35px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:19px; }
.icon-button:hover { background:var(--soft); color:var(--text); }
.mobile-filter-button { position:relative; display:none; }
.mobile-filter-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff; border-radius:20px; background:var(--accent); color:#fff; font-size:8px; font-weight:800; line-height:1; }
.workspace { height:calc(100dvh - 64px); display:grid; grid-template-columns:186px minmax(760px,1fr); }
.filters { padding:18px 11px; border-right:1px solid var(--line); background:#f0f3f7; overflow:auto; }
.mobile-filters-head { display:none; }
.filters-heading { display:flex; align-items:center; justify-content:space-between; padding:0 8px 12px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.filters-heading strong { min-width:25px; padding:4px 7px; border-radius:20px; background:var(--text); color:#fff; text-align:center; font-size:10px; }
.status-filters { display:grid; gap:3px; }
.status-filter { width:100%; display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 8px; border:0; border-radius:7px; background:transparent; cursor:pointer; text-align:left; font-size:11px; font-weight:700; }
.status-filter i { font-size:17px; color:var(--muted); }
.status-filter span:last-child { color:var(--muted); font-size:9px; }
.status-filter:hover,.status-filter.is-active { background:#fff; box-shadow:0 1px 3px rgba(30,42,64,.05); }
.status-filter.is-active i { color:var(--blue); }
.filter-section { display:grid; gap:7px; margin:20px 7px 0; }
.filter-section>label { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.filter-section select { width:100%; height:38px; padding:0 8px; font-size:10px; }
.orders-column { min-width:0; padding:16px 18px 24px; overflow:auto; }
.orders-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.search { min-width:0; height:40px; display:flex; flex:1; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); }
.search input { width:100%; height:auto; padding:0; border:0; outline:0; font-size:11px; }
.new-order-button { min-width:132px; background:#34b66d; }
.new-order-button:hover { background:#29965a; }
.table-shell { width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:9px; background:#fff; overscroll-behavior-inline:contain; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.orders-table { width:100%; min-width:890px; border-collapse:collapse; table-layout:fixed; }
.orders-table th { padding:11px 9px; background:#edf3fb; color:#34425d; text-align:left; font-size:9px; font-weight:800; }
.orders-table th:nth-child(1){width:112px}.orders-table th:nth-child(2){width:72px}.orders-table th:nth-child(3){width:88px}.orders-table th:nth-child(4){width:128px}.orders-table th:nth-child(5){width:90px}.orders-table th:nth-child(6){width:210px}.orders-table th:nth-child(7){width:170px}.orders-table th:nth-child(8){width:78px}
.order-row { cursor:pointer; }
.order-row:hover,.order-row.is-active { background:#f8fbff; }
.order-row td { height:57px; padding:8px 9px; border-top:1px solid var(--line); vertical-align:top; font-size:10px; line-height:1.35; }
.order-row td:last-child { text-align:right; font-weight:800; white-space:nowrap; }
.cell-main { display:block; overflow:hidden; text-overflow:ellipsis; color:#263653; font-weight:680; }
.cell-sub { display:block; overflow:hidden; margin-top:1px; color:#8b94a5; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.order-status { width:100%; height:26px; padding:0 19px 0 7px; border:0; border-radius:5px; color:var(--blue); background:var(--blue-soft); font-size:9px; font-weight:750; cursor:pointer; }
.order-status.status-cooking,.order-status.status-confirmed { color:var(--yellow); background:var(--yellow-soft); }
.order-status.status-ready,.order-status.status-delivery,.order-status.status-sent-to-iiko { color:var(--green); background:var(--green-soft); }
.order-status.status-completed { color:var(--muted); background:var(--soft); }
.order-status.status-cancelled,.order-status.status-iiko-error { color:var(--red); background:var(--red-soft); }
.empty-list { min-height:260px; display:grid; place-items:center; align-content:center; gap:7px; color:var(--muted); text-align:center; font-size:11px; }
.empty-list i { font-size:34px; color:#b4bfce; }
.empty-list strong { color:var(--text); font-size:13px; }
.drawer-backdrop { position:fixed; z-index:30; inset:64px 0 0; border:0; background:rgba(27,36,54,.18); cursor:default; }
.order-detail { position:fixed; z-index:31; top:64px; right:0; bottom:0; width:min(510px,100vw); overflow:auto; border-left:1px solid var(--line); background:#fff; box-shadow:-18px 0 55px rgba(34,45,68,.15); }
.detail-head { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px 8px; background:#fff; }
.detail-head h2 { margin:0; font-size:18px; letter-spacing:-.035em; }
.detail-tabs { position:sticky; z-index:3; top:61px; display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 14px; padding:2px; border-radius:8px; background:#eaf2fc; }
.detail-tab { min-height:31px; border:0; border-radius:6px; background:transparent; color:#385073; cursor:pointer; font-size:9px; font-weight:800; }
.detail-tab.is-active { background:var(--blue); color:#fff; }
.detail-body { padding:13px 20px 95px; }
.detail-section { padding:14px 0; border-bottom:1px solid var(--line); }
.detail-section h3 { margin:0 0 11px; font-size:11px; }
.detail-row { display:grid; grid-template-columns:145px minmax(0,1fr); gap:12px; padding:6px 0; border-bottom:1px solid #edf0f5; font-size:9px; }
.detail-row:last-child { border-bottom:0; }
.detail-row span { color:var(--muted); }
.detail-row strong { text-align:right; font-weight:600; }
.detail-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:9px; }
.detail-item img,.detail-item-placeholder { width:44px; height:44px; display:grid; place-items:center; border-radius:7px; background:var(--soft); object-fit:cover; color:#a4afc0; font-size:18px; }
.detail-item-copy strong { display:block; margin-bottom:2px; font-size:10px; }
.detail-item-copy span { color:var(--muted); }
.detail-total { display:flex; justify-content:space-between; padding:13px 0; font-size:14px; font-weight:800; }
.detail-footer { position:sticky; z-index:3; bottom:0; display:flex; gap:8px; padding:12px 20px; border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.detail-footer .button { flex:1; }
.timeline { display:grid; gap:8px; }
.timeline-item { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:8px; font-size:9px; }
.timeline-item::before { content:""; width:6px; height:6px; margin-top:3px; border:2px solid var(--blue); border-radius:50%; }
.timeline-item span { color:var(--muted); }
.terminal-field { display:grid; gap:5px; margin-top:12px; color:var(--muted); font-size:9px; font-weight:700; }
.terminal-field select { height:38px; padding:0 9px; color:var(--text); font-size:10px; }
.modal { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; border:0; background:rgba(18,27,43,.5); backdrop-filter:blur(2px); }
.manual-dialog { position:relative; width:min(980px,96vw); max-height:92dvh; overflow:auto; border-radius:13px; background:#fff; box-shadow:0 30px 90px rgba(21,31,49,.25); }
.manual-dialog>header { position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); background:#fff; }
.manual-dialog h2 { margin:4px 0 0; font-size:20px; }
.manual-form { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); }
.manual-main { padding:17px 20px 24px; border-right:1px solid var(--line); }
.manual-side { padding:17px 20px 24px; background:#f8fafc; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.form-grid .wide { grid-column:1/-1; }
.field { position:relative; display:grid; gap:5px; color:var(--muted); font-size:9px; font-weight:750; }
.field input,.field select,.field textarea { width:100%; height:39px; padding:0 10px; color:var(--text); font-size:10px; font-weight:550; }
.field textarea { height:70px; padding:9px 10px; resize:vertical; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:8px; background:var(--soft); }
.segmented label { position:relative; }
.segmented input { position:absolute; opacity:0; }
.segmented span { min-height:34px; display:grid; place-items:center; border-radius:6px; cursor:pointer; color:var(--muted); font-size:10px; font-weight:800; }
.segmented input:checked+span { background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(30,43,65,.08); }
.product-picker { margin-top:15px; }
.product-picker-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.product-picker-head strong { font-size:11px; }
.product-picker-head span { color:var(--muted); font-size:9px; }
.manual-product-search { position:relative; display:flex; align-items:center; margin-bottom:8px; color:var(--muted); }
.manual-product-search>i { position:absolute; left:11px; z-index:1; font-size:15px; pointer-events:none; }
.manual-product-search input { width:100%; height:39px; padding:0 38px 0 34px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text); font-size:10px; font-weight:600; }
.manual-product-search input:focus { outline:0; border-color:rgba(255,75,56,.55); box-shadow:0 0 0 3px rgba(255,75,56,.09); }
.manual-product-search button { position:absolute; right:5px; width:29px; height:29px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
.manual-product-search button:hover { background:var(--soft); color:var(--text); }
.manual-product-search button.is-hidden { display:none; }
.manual-products { max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.manual-product-empty { min-height:150px; display:grid; place-items:center; align-content:center; gap:7px; padding:20px; color:var(--muted); text-align:center; }
.manual-product-empty i { font-size:24px; }
.manual-product-empty strong { font-size:10px; }
.manual-product { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; align-items:center; padding:8px; border-bottom:1px solid var(--line); }
.manual-product:last-child { border-bottom:0; }
.manual-product img,.manual-product-placeholder { width:38px; height:38px; display:grid; place-items:center; border-radius:6px; background:var(--soft); object-fit:cover; color:#a8b2c1; }
.manual-product strong { display:block; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.manual-product small { color:var(--muted); font-size:8px; }
.quantity { display:flex; align-items:center; gap:5px; }
.quantity button { width:25px; height:25px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }
.quantity strong { min-width:16px; text-align:center; }
.suggestions { position:absolute; z-index:8; top:100%; right:0; left:0; max-height:210px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 15px 35px rgba(34,45,68,.15); }
.suggestions button { width:100%; display:grid; gap:2px; padding:9px 10px; border:0; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; text-align:left; font-size:9px; }
.suggestions button:hover { background:#f6f9fd; }
.suggestions small { color:var(--muted); }
.manual-summary { display:grid; gap:8px; margin-bottom:16px; }
.summary-line { display:flex; justify-content:space-between; gap:10px; font-size:10px; }
.summary-line span { color:var(--muted); }
.summary-line.total { margin-top:7px; padding-top:12px; border-top:1px solid var(--line); font-size:15px; font-weight:800; }
.manual-note { margin:10px 0; color:var(--muted); font-size:9px; line-height:1.5; }
.checkbox-row { display:flex; gap:8px; align-items:flex-start; margin:10px 0; color:var(--text); font-size:9px; line-height:1.5; }
.checkbox-row input { margin-top:2px; accent-color:var(--accent); }
.manual-submit { width:100%; }
.toast { position:fixed; right:20px; bottom:20px; z-index:90; max-width:380px; padding:12px 15px; border-radius:8px; background:#172238; color:#fff; box-shadow:0 18px 50px rgba(0,0,0,.2); font-size:10px; font-weight:700; }
.toast.is-error { background:var(--red); }
.filter-backdrop { display:none; }
@media (max-width:900px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .mobile-filter-button { display:grid; }
  .filters { position:fixed; z-index:42; inset:64px auto 0 0; width:min(310px,calc(100vw - 48px)); display:block; padding:0 11px 18px; border-right:1px solid var(--line); box-shadow:18px 0 55px rgba(34,45,68,.18); transform:translateX(-105%); visibility:hidden; transition:transform .2s ease,visibility 0s linear .2s; }
  .filters.is-open { transform:translateX(0); visibility:visible; transition:transform .2s ease; }
  .mobile-filters-head { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; margin:0 -11px 14px; padding:12px 11px 10px 18px; border-bottom:1px solid var(--line); background:#f0f3f7; }
  .mobile-filters-head strong { font-size:15px; }
  .filter-backdrop:not(.is-hidden) { position:fixed; z-index:41; inset:64px 0 0; display:block; border:0; background:rgba(27,36,54,.28); }
  .orders-column { min-width:0; overflow-x:hidden; overflow-y:auto; }
  .manual-form { grid-template-columns:1fr; }
  .manual-main { border-right:0; }
}
@media (max-width:640px) {
  .topbar { gap:6px; padding:0 12px; }
  .brand span,.topbar-status { display:none; }
  .mobile-filter-button { margin-left:auto; }
  .operator { gap:3px; }
  .operator>span:not(.operator-mark) { display:none; }
  .orders-column { padding:10px; }
  .orders-toolbar { align-items:stretch; flex-direction:column; }
  .new-order-button { width:100%; }
  .orders-table { min-width:820px; }
  .order-detail { top:64px; width:100%; }
  .manual-dialog { width:100%; max-height:96dvh; }
  .form-grid { grid-template-columns:1fr; }
  .field.wide { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { .filters { transition:none; } }