:root{color-scheme:light;--bg:#f3f5f2;--surface:#fff;--ink:#213027;--muted:#68766c;--line:#dce3dc;--green:#285c43;--soft:#e8f2eb;--danger:#9c3827;font:14px/1.45 'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
button{border:1px solid var(--line);border-radius:7px;padding:5px 9px;color:var(--ink);background:var(--surface);cursor:pointer}
button:hover:not(:disabled){background:var(--soft)}
button:disabled{opacity:.4;cursor:not-allowed}
.primary{background:var(--green);color:white;border-color:var(--green)}
button.primary:hover:not(:disabled){background:#1f4b36}
input,select,textarea{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 7px;max-width:100%}
textarea{width:100%;resize:vertical;min-height:76px}
#connection-result:empty{display:none}
#connection-result{margin-bottom:14px;overflow-wrap:anywhere}
input[type=checkbox]{width:17px;height:17px;vertical-align:middle}
input[type=number]{appearance:textfield}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{appearance:none}
label{display:grid;gap:3px}
label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px}
h1,h2,p{margin:0}
h1{font-size:23px;letter-spacing:-.3px;font-weight:600}
h2{font-size:17px;font-weight:600}
small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.muted{color:var(--muted);font-size:13px}
.error{color:var(--danger)}
.app-header{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:2px;color:var(--green)}
.app-header nav{display:flex;flex-wrap:wrap;gap:4px}
.app-header nav button{border:0}
.active{background:var(--soft);color:var(--green)}
.account{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px}
#main{max-width:1380px;margin:auto;padding:14px 16px}
.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.heading p{margin-top:2px}
.toolbar,.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.toolbar{margin:8px 0;justify-content:space-between}
.actions label{font-size:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:10px 0}
.tabs button{border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent}
.tabs button.active{border-bottom-color:var(--green)}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px;line-height:1.3}
th,td{border-bottom:1px solid var(--line);padding:4px 8px;text-align:left}
th{font-weight:500;background:var(--bg)}
td:has(.stepper){text-align:center}
tfoot{background:var(--bg);color:var(--green)}
tfoot td{font-weight:600}
.pick-table{width:max-content;max-width:100%;min-width:0;table-layout:fixed}.pick-table th.receiver-col,.pick-table td:nth-child(n+3){width:108px}.receipt-table{width:max-content;max-width:100%;min-width:0;table-layout:fixed}.receipt-table .name{width:185px;max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.receipt-table .qty{width:112px;text-align:center}.receipt-table .format{width:158px}.receipt-table .stock{width:85px;text-align:center}
.pick-table th,.pick-table td{text-align:center;padding:3px 5px}
.pick-table .product{width:180px;max-width:180px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-table .stock{width:94px}
.pick-table .stock small{font-size:10px;line-height:1.15;margin-top:1px;white-space:nowrap}
.pick-table .product small{display:inline;margin-left:5px}
.column-head{display:grid;gap:3px}
.column-head span{font-size:11px;color:var(--muted)}
.column-head select,.column-head input{width:100%;font-size:12px;padding:3px 4px;min-width:0}
.stepper{display:inline-flex;align-items:center;gap:2px;border-radius:6px}
.stepper.chosen{background:var(--soft)}
.stepper button{width:25px;height:26px;padding:0;border:0;background:var(--bg);font-size:17px}
.stepper input{width:36px;height:26px;border:0;text-align:center;padding:1px 0;background:transparent;font-weight:600}
.metrics{display:flex;gap:16px;flex-wrap:wrap;padding:10px 0}
.metrics span{font-size:12px;color:var(--muted)}
.metrics strong{display:block;font-size:19px;font-weight:600}
.section{margin-top:14px}
.section h2{margin-bottom:7px}
.quiet{border:0;background:transparent;color:var(--green);margin-top:8px}
.sticky-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;margin-top:8px;border-top:1px solid var(--line)}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px}
.package-block{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px}
.package-line{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.package-line select{min-width:0;flex:1}
.record{border-bottom:1px solid var(--line);padding:7px 0}
.record p{margin:5px 12px}
.record table{margin-top:6px;background:var(--surface)}
summary{cursor:pointer;font-weight:500}
details table{min-width:500px}
.empty{text-align:center;color:var(--muted);padding:14px}
.auth{max-width:420px;margin:9vh auto;background:white;padding:32px;border:1px solid var(--line);border-radius:12px}
.auth h1{margin:22px 0}
.auth form{display:grid;gap:16px}
.auth .muted{margin-top:18px}
.filters{justify-content:start}
.filters select{max-width:250px}
.short{width:75px}
.notice{padding:8px;background:var(--soft);border-radius:8px;margin-bottom:12px}
dialog{width:min(460px,calc(100% - 30px));border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--surface);padding:24px}
dialog::backdrop{background:#12201966}
dialog form{display:grid;gap:14px}
dialog h2{margin-bottom:5px}
#toast{position:fixed;bottom:20px;right:20px;z-index:20;max-width:min(450px,calc(100% - 40px));padding:14px 18px;background:var(--surface);box-shadow:0 4px 25px #12201920;border:1px solid var(--line);border-radius:8px}
.loading{margin:24px}
@media(max-width:700px){.app-header{padding:10px;gap:8px}
.account{width:100%;justify-content:space-between}
#main{padding:10px}
.heading{align-items:start}
.heading .actions{width:100%}
.toolbar{justify-content:start}
.tablewrap table:not(.receipt-table){min-width:650px}.tablewrap .pick-table{min-width:700px}
.auth{margin:30px 16px}
.filters label{max-width:100%}
.metrics{gap:16px}
.metrics strong{font-size:20px}
.pack-grid{grid-template-columns:1fr}
.stepper button{width:32px;height:36px}
.stepper input{height:36px}
}

.pick-table th.receiver-col:has(input[data-other]){width:150px}
.integration-section{padding:18px 0;border-bottom:1px solid var(--line)}
.integration-section h2{margin-bottom:12px;font-size:17px}
.integration-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;max-width:1000px}
.integration-grid label{min-width:0}
.integration-grid input,.integration-grid select{width:100%;min-width:0}
.integration-schedules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.check{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.check input{width:16px;height:16px}
.time-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.time-row{display:flex;gap:4px;align-items:center}
.time-row input{width:105px}
.time-row button{width:28px;padding:0}
.lookup-row{display:flex;align-items:end;gap:12px}
.lookup-row label{flex:1;min-width:0}
.lookup-row input{width:100%}
.receipt-fix-lines{max-height:360px;overflow:auto}
.receipt-fix-lines table{width:100%}
.receipt-fix-lines input{width:90px}
#integration-form .sticky-actions{gap:16px}
dialog:has(.integration-grid){width:min(680px,calc(100% - 30px))}
@media(max-width:900px){.integration-schedules{grid-template-columns:1fr}.integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.integration-grid{grid-template-columns:1fr}.integration-section .heading .actions{flex-wrap:wrap}.app-header nav{flex-wrap:wrap}.account span{overflow-wrap:anywhere}.lookup-row{flex-wrap:wrap}}