:root { --bg:#f4f5ef; --ink:#242820; --muted:#838b79; --line:#e0e4d8; --accent:#e65f32; --accent-light:#fff0e9; --green:#508267; }
* { box-sizing:border-box; }
body { margin:0; height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:12px "Segoe UI",Arial,sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.4; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid #ed956f; outline-offset:2px; }
svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
[hidden] { display:none !important; }
.header { flex-shrink:0; height:50px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; gap:12px; }
.identity { display:flex; gap:9px; align-items:center; text-decoration:none; color:var(--ink); font-size:15px; }
.identity img { width:30px; height:30px; } .identity b { font-weight:600; }
.identity small { display:block; color:var(--muted); font-size:8px; letter-spacing:1.4px; margin-top:1px; }
.header-right { display:flex; align-items:center; gap:14px; }
.connection { display:flex; align-items:center; gap:6px; color:var(--green); font-size:11px; }
.connection i { width:6px; height:6px; background:currentColor; border-radius:50%; } .connection.offline { color:#9a7b50; }
.icon-button { width:30px; height:30px; border:1px solid var(--line); background:white; border-radius:6px; display:grid; place-items:center; }
main { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 12px; }
.intro { display:flex; align-items:center; justify-content:space-between; padding:10px 2px; gap:12px; flex-shrink:0; }
h1 { display:inline; font-size:20px; line-height:1.2; font-weight:650; margin:0; letter-spacing:-.5px; }
.intro p { display:inline; margin:0 0 0 14px; color:var(--muted); font-size:11px; }
.format-badge { display:flex; gap:9px; align-items:center; color:#6e745f; font-size:11px; white-space:nowrap; }
.format-badge b { font-weight:600; } .format-badge small { font-size:10px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); flex:1; min-height:0; gap:8px; }
.panel { background:white; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 8px; flex-shrink:0; }
h2 { font-size:14px; font-weight:650; margin:0; } .panel-heading p { color:var(--muted); font-size:10px; margin:4px 0 0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; border-radius:6px; padding:7px 9px; font-size:11px; font-weight:600; min-height:30px; white-space:nowrap; }
.button-light { background:white; border-color:var(--line); color:#626956; } .button-light:hover { background:#f4f6ef; }
.button-primary { background:var(--accent); color:white; font-size:12px; } .button-primary:hover { background:#d85226; }
.full-width { width:100%; }
.filters { display:flex; padding:0 12px 8px; flex-shrink:0; }
.search { display:flex; align-items:center; gap:7px; background:#fafbf8; border:1px solid var(--line); border-radius:5px; padding:7px 9px; flex:1; min-width:0; color:#969c8b; }
.search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:11px; }
.search:focus-within { border-color:var(--accent); } input::placeholder { color:#9b9f94; }
.catalog-toolbar { padding:8px 12px; background:#fafbf8; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:#8b9180; font-size:10px; gap:6px; flex-shrink:0; }
.catalog-toolbar>div { display:flex; align-items:center; gap:7px; } .tree-tools { gap:9px !important; }
.text-button { color:var(--accent); background:transparent; border:0; padding:0; font-size:10px; font-weight:600; white-space:nowrap; }
.text-button:hover { text-decoration:underline; } .muted { color:#7f8873; } .separator { color:#c4c8bb; }
.tree-wrap { overflow:auto; flex:1; min-height:100px; scrollbar-width:thin; scrollbar-color:#cbd2bf transparent; }
.goods-tree,.tree-children { list-style:none; margin:0; padding:0; } .goods-tree { padding:4px 6px; }
.tree-children { margin-left:15px; padding-left:3px; border-left:1px solid #eef0e7; }
.tree-row { display:flex; align-items:center; gap:6px; padding:5px 6px; min-height:31px; border-radius:4px; }
.tree-row:hover { background:#f5f7f0; } .tree-row:has(input:checked),.tree-row:has(input:indeterminate) { background:#fff2e9; }
.category-row { font-weight:600; color:#59634c; }
.tree-toggle { border:0; background:transparent; padding:1px; width:18px; height:22px; display:grid; place-items:center; color:#9aa38a; flex-shrink:0; }
.tree-toggle svg { width:12px; height:12px; } .tree-toggle.expanded svg { transform:rotate(90deg); } .tree-spacer { width:18px; flex-shrink:0; }
input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; margin:0; cursor:pointer; flex-shrink:0; }
input[type=checkbox]:disabled { cursor:not-allowed; }
.tree-icon { color:#a7b68d; display:flex; flex-shrink:0; } .good-row>.tree-icon { color:#bac2af; }
.tree-category-name { flex:1; min-width:0; padding:0; text-align:left; background:transparent; border:0; font:inherit; color:inherit; overflow-wrap:anywhere; }
.tree-count { color:#8a947c; font-size:10px; font-weight:400; background:#f0f3e9; border-radius:4px; padding:2px 6px; flex-shrink:0; }
.tree-text { flex:1; min-width:0; }
.row-title { border:0; background:transparent; padding:0; text-align:left; color:#394031; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.row-title:hover { color:var(--accent); } .row-meta { display:block; color:#929c84; font-size:9px; margin-top:2px; }
.tree-price { width:72px; text-align:right; flex-shrink:0; white-space:nowrap; color:#58644a; font-size:11px; font-weight:600; }
.row-qty { width:43px; height:25px; flex-shrink:0; border:1px solid var(--line); border-radius:4px; padding:3px 0 3px 4px; background:white; text-align:center; font-size:11px; color:#626956; }
.unpriced { color:#b3836b; font-size:10px; font-weight:400; }
.catalog-footer { padding:6px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#929d82; font-size:9px; border-top:1px solid var(--line); flex-shrink:0; }
.empty-state { text-align:center; padding:35px 12px; color:var(--muted); }
.empty-icon { display:none; } .empty-state h3 { font-size:14px; color:#737d63; font-weight:600; margin:0 0 8px; }
.empty-state p { line-height:1.6; font-size:11px; margin:0 auto 14px; max-width:350px; }
.transfer-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.transfer-button { width:42px; min-height:47px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px solid #e4c5b2; border-radius:7px; color:var(--accent); background:var(--accent-light); }
.transfer-button:hover:enabled { color:white; background:var(--accent); border-color:var(--accent); } .transfer-button svg { width:22px; height:22px; }
.transfer-button span { font-size:9px; font-weight:600; }
.count-badge { display:inline-block; background:var(--accent-light); color:var(--accent); font-size:10px; font-weight:650; border-radius:4px; padding:2px 6px; margin-left:4px; }
.job-footer { border-top:1px solid var(--line); padding:8px 12px; background:#fcfdf9; flex-shrink:0; }
.job-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.print-summary { display:flex; gap:12px; color:#8b937c; font-size:10px; } .print-summary b { color:#4c5740; font-weight:650; margin-left:4px; }
.copies-all { display:flex; align-items:center; gap:6px; color:#8b937c; font-size:10px; margin-left:auto; }
.copies-all input { width:38px; height:26px; border:1px solid var(--line); border-radius:4px; text-align:center; font-size:11px; color:#626956; }
.job-preview { border-top:1px solid var(--line); margin-top:8px; padding-top:7px; }
.job-preview>summary { cursor:pointer; color:#7d896c; font-size:10px; }
.preview-content { display:flex; gap:12px; align-items:center; padding-top:8px; }
.preview-content>div:last-child { flex:1; min-width:0; } #preview-caption { color:#879376; font-size:11px; line-height:1.5; margin:0 0 10px; }
.preview-stage { background:#eff2e6; background-image:radial-gradient(#dce0d1 .75px,transparent .75px); background-size:10px 10px; border:1px solid #e4e7d9; border-radius:5px; padding:6px; flex-shrink:0; }
.preview-paper { background:white; border-radius:5px; box-shadow:0 2px 4px #333d251c; overflow:hidden; }
.print-hint { color:#98a18a; font-size:9px; line-height:1.7; margin:10px 0 0; }
.footer { display:flex; justify-content:space-between; gap:12px; color:#9ba58d; font-size:9px; padding:7px 2px; flex-shrink:0; }
.notice { background:#fff4df; color:#8d651f; border:1px solid #ebddbb; border-radius:5px; padding:7px 10px; margin-bottom:8px; font-size:11px; line-height:1.5; flex-shrink:0; }
.notice.error { background:#fff0e9; color:#a54c2b; border-color:#f0d0be; } .notice.success { background:#edf5ed; color:#47754c; border-color:#d3e4d1; }
dialog { border:1px solid var(--line); border-radius:12px; width:460px; max-width:calc(100vw - 24px); padding:22px; box-shadow:0 20px 70px #15201630; color:var(--ink); }
dialog::backdrop { background:#1f271b50; backdrop-filter:blur(2px); } .dialog-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dialog-heading h2 { font-size:20px; } .eyebrow { font-size:9px; font-weight:650; letter-spacing:1.5px; color:#939586; margin-bottom:7px; }
.close-button { border:0; background:#f2f4ed; border-radius:50%; font-size:23px; line-height:1; width:30px; height:30px; color:#7d866b; }
.field { display:flex; flex-direction:column; gap:7px; font-size:12px; color:#727d62; margin-bottom:16px; }
.field input { width:100%; border:1px solid #dde2d4; border-radius:6px; padding:9px 10px; color:var(--ink); background:white; }
.field small { color:#a0a68f; font-size:10px; line-height:1.5; } .checkbox-label { display:flex; align-items:center; gap:8px; font-size:12px; color:#727d62; margin-bottom:18px; }
.offset-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.dialog-note { font-size:11px; line-height:1.7; color:#929b81; margin:0 0 18px; } .dialog-actions { display:flex; gap:9px; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; }
.form-error { color:#b34f2b; background:#fff1e8; border-radius:5px; padding:9px; font-size:12px; line-height:1.5; }
.token-details { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; font-size:11px; color:#879376; } .token-details summary { cursor:pointer; margin-bottom:12px; }
@media (max-width:1100px) { .intro p { display:block; margin:4px 0 0; } .format-badge small { display:none; } .catalog-toolbar { flex-wrap:wrap; row-gap:6px; } .panel-heading { align-items:flex-start; } .panel-heading p { max-width:240px; } .tree-children { margin-left:10px; } .tree-price { width:60px; } .job-actions { gap:8px; } }
@media (max-width:760px) { body { height:auto; min-height:100dvh; } main { flex:none; padding:0 8px; } .header { padding:0 10px; } .intro { padding:10px 2px; } .intro p { max-width:300px; } .workspace { grid-template-columns:1fr; gap:8px; } .catalog-tree,.job-tree { height:45dvh; flex:auto; min-height:220px; max-height:500px; } .job-tree:has(#job-empty:not([hidden])) { height:auto; min-height:100px; flex:none; } .transfer-panel { flex-direction:row; gap:16px; } .transfer-button { flex-direction:row; width:66px; min-height:32px; } .transfer-button svg { transform:rotate(90deg); } .footer { flex-direction:column; gap:4px; } }
@media (max-width:420px) { .identity { font-size:13px; gap:6px; } .identity small { font-size:7px; letter-spacing:1px; } .header-right { gap:8px; } .connection { font-size:9px; } .format-badge { font-size:10px; } .panel-heading { padding:9px; } .panel-heading p { font-size:9px; } .button { padding:6px 7px; font-size:10px; } .filters { padding:0 9px 7px; } .catalog-toolbar { padding:7px 9px; } .tree-row { gap:4px; padding:5px 3px; } .tree-icon { display:none; } .tree-price { width:59px; font-size:10px; } .row-title { font-size:11px; } .row-qty { width:37px; } .tree-children { margin-left:8px; } .preview-content { flex-wrap:wrap; justify-content:center; } .preview-content>div:last-child { text-align:center; } .job-footer { padding:8px 9px; } .job-actions .button-primary { flex:1; } }
@media print { .header,main,dialog { display:none !important; } }