:root { --ink:#17212b; --muted:#647180; --line:#d7dee5; --surface:#fff; --soft:#f1f5f7; --navy:#17324d; --blue:#1769aa; --teal:#087f75; --green:#e7f5ef; --amber:#fff3d6; --red:#a43434; font-family:Inter,"Segoe UI",Arial,sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:var(--soft); color:var(--ink); }
button,input,select { font:inherit; }
.topbar { min-height:96px; padding:18px clamp(18px,4vw,52px); display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--navy); color:#fff; }
.topbar h1 { margin:0; font-size:clamp(23px,4vw,34px); }
.eyebrow { margin:0 0 5px; color:#a8c7df; font-size:11px; font-weight:800; letter-spacing:.12em; }
.eyebrow.dark { color:#537087; }
h2,h3,p { margin-top:0; }
h2 { margin-bottom:18px; font-size:21px; }
.topbar-actions { display:flex; align-items:center; gap:18px; }
.connection-state { color:#d9e8f3; font-size:13px; }
.connection-state.online { color:#a7ebd3; }
.user-block { display:flex; align-items:center; gap:10px; padding-left:18px; border-left:1px solid #567188; }
.user-block button { border:1px solid #8299ab; border-radius:5px; padding:6px 9px; background:transparent; color:#fff; cursor:pointer; }
main { width:min(1180px,calc(100% - 32px)); margin:24px auto 56px; }
.login-card { width:min(440px,100%); margin:64px auto; padding:32px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 14px 40px rgba(23,50,77,.08); }
.operator-layout { display:grid; gap:20px; }
.breadcrumb { display:flex; gap:8px; align-items:center; min-height:30px; color:var(--muted); font-size:13px; }
.breadcrumb button { border:0; padding:0; background:transparent; color:var(--blue); cursor:pointer; }
.operation-home { display:grid; gap:20px; }
.welcome-card,.operation-group,.entry-panel,.shift-panel,.history-panel { border:1px solid var(--line); border-radius:9px; background:#fff; }
.welcome-card { padding:26px 28px; }
.welcome-card h2 { margin-bottom:8px; font-size:28px; }
.welcome-card p:last-child { margin-bottom:0; color:var(--muted); }
.operation-groups { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.operation-group { position:relative; overflow:hidden; padding:28px; }
.operation-group::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--teal); }
.issue-group::before { background:#b5781d; }
.group-number { position:absolute; right:22px; top:16px; color:#dce5eb; font-size:46px; font-weight:800; }
.operation-button { width:100%; min-height:76px; margin-top:10px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; text-align:left; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); cursor:pointer; }
.operation-button:hover:not(:disabled) { border-color:var(--teal); background:#f4fbf8; }
.operation-button strong,.operation-button small { display:block; }
.operation-button small { margin-top:4px; color:var(--muted); }
.operation-button b { color:var(--teal); font-size:22px; }
.operation-button:disabled { background:#f7f8f9; color:#7d8994; cursor:not-allowed; }
.entry-view { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.7fr); gap:20px; align-items:start; }
.entry-panel,.shift-panel,.history-panel { padding:clamp(18px,3vw,28px); }
.entry-heading,.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.secondary-button { border:1px solid var(--line); border-radius:5px; padding:7px 10px; background:#fff; color:var(--blue); cursor:pointer; }
.field { display:grid; gap:7px; margin-bottom:17px; }
.field span,legend { color:#344454; font-size:13px; font-weight:700; }
input,select { width:100%; min-height:48px; padding:10px 12px; border:1px solid #b7c2cc; border-radius:6px; background:#fff; color:var(--ink); }
input:focus,select:focus,button:focus-visible { outline:3px solid rgba(23,105,170,.18); outline-offset:1px; border-color:var(--blue); }
.firm-picker { margin:0 0 18px; padding:0; border:0; }
legend { margin-bottom:8px; }
.segment { display:grid; grid-template-columns:repeat(2,1fr); overflow:hidden; border:1px solid #b7c2cc; border-radius:6px; }
.segment button { min-height:46px; border:0; border-right:1px solid #b7c2cc; background:#fff; color:#344454; font-weight:700; cursor:pointer; }
.segment button:last-child { border-right:0; }
.segment button.active { background:var(--navy); color:#fff; }
.weight-field input { min-height:66px; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.primary-button { width:100%; min-height:52px; border:0; border-radius:6px; background:var(--teal); color:#fff; font-weight:800; cursor:pointer; }
.primary-button:disabled { opacity:.55; cursor:wait; }
.form-message { min-height:24px; margin-bottom:8px; color:var(--red); font-size:14px; }
.form-message.success { color:#087454; }
.operation-notice { margin-bottom:16px; padding:12px 14px; border:1px solid #d69e2e; border-radius:6px; background:#fff8dc; color:#744210; font-weight:700; }
.text-button { border:0; padding:0; background:transparent; color:var(--blue); cursor:pointer; }
.muted { color:var(--muted); font-size:13px; }
.counters { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.counter { padding:8px 11px; border-left:3px solid var(--line); }
.counter strong,.counter span { display:block; }
.counter strong { font-size:23px; }
.counter span { color:var(--muted); font-size:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:11px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:10px; text-transform:uppercase; }
.numeric { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.badge { display:inline-block; padding:3px 7px; border-radius:4px; font-size:11px; font-weight:800; white-space:nowrap; }
.badge-synced { background:var(--green); color:#096448; }
.badge-queued,.badge-waiting_workbook { background:var(--amber); color:#8a5706; }
.badge-error { background:#fdeaea; color:var(--red); }
.badge-cancelled { background:#eceff2; color:#5b6570; }
.history-row { cursor:pointer; }
.history-row:hover,.history-row:focus { background:#f4f8fa; outline:none; }
.history-row.cancelled { color:#737d86; }
.operation-dialog { width:min(620px,calc(100% - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:10px; color:var(--ink); box-shadow:0 24px 70px rgba(10,25,40,.3); }
.operation-dialog::backdrop { background:rgba(16,30,44,.55); }
.operation-dialog > * { margin-left:24px; margin-right:24px; }
.dialog-heading { margin-top:24px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.dialog-heading h2 { margin-bottom:12px; }
.dialog-close { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--muted); font-size:25px; cursor:pointer; }
.operation-details { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr); margin-top:4px; margin-bottom:22px; border-top:1px solid var(--line); }
.operation-details dt,.operation-details dd { margin:0; padding:10px 0; border-bottom:1px solid var(--line); }
.operation-details dt { color:var(--muted); font-size:12px; font-weight:700; }
.operation-details dd { overflow-wrap:anywhere; font-weight:600; }
.dialog-actions { display:flex; gap:10px; margin-bottom:24px; }
.dialog-actions .secondary-button,.dialog-actions .danger-button { min-height:44px; padding:9px 14px; }
.danger-button { border:1px solid #d9a6a6; border-radius:5px; background:#fff; color:var(--red); cursor:pointer; }
.compact-button { width:auto; min-height:44px; padding:9px 16px; }
#edit-operation-form { margin-bottom:24px; }
.empty-state { padding:24px 0; text-align:center; color:var(--muted); }
@media(max-width:820px) { .topbar { align-items:flex-start; } .topbar-actions { align-items:flex-end; flex-direction:column-reverse; gap:7px; } main { width:min(100% - 20px,650px); margin-top:12px; } .operation-groups,.entry-view { grid-template-columns:1fr; } .shift-panel { order:2; } .operation-group { padding:22px; } }
@media(max-width:540px) {
  .topbar { min-height:86px; padding:15px; }
  .connection-state { display:none; }
  .user-block { padding-left:0; border-left:0; font-size:12px; }
  .welcome-card,.operation-group,.entry-panel,.shift-panel,.history-panel,.login-card { padding:17px; }
  .entry-heading { display:block; }
  .entry-heading .secondary-button { margin:-8px 0 18px; }
  .history-panel .table-wrap { overflow:visible; }
  .history-panel table,.history-panel tbody { display:block; }
  .history-panel thead { display:none; }
  .history-row { margin:0 0 10px; padding:12px; display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:8px 10px; border:1px solid var(--line); border-radius:7px; }
  .history-row td { padding:0; border:0; }
  .history-time { grid-column:1; }
  .history-operation { grid-column:2; font-weight:700; }
  .history-status { grid-column:3; text-align:right; }
  .history-source,.history-product { grid-column:1 / -1; }
  .history-source::before,.history-product::before { display:block; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
  .history-source::before { content:"От кого"; }
  .history-product::before { content:"Позиция"; }
  .history-weight { grid-column:3; grid-row:4; align-self:end; }
  .operation-dialog > * { margin-left:17px; margin-right:17px; }
  .operation-details { grid-template-columns:105px minmax(0,1fr); }
  .dialog-actions { flex-direction:column; }
  .compact-button { width:100%; }
}