@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#1a293b;background:#f4f6f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:#14263d;color:#fff;padding:25px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:0 10px 38px}.brand-icon{width:42px;height:42px;border-radius:13px;background:#3288df;display:grid;place-items:center;font:800 25px Manrope}.brand b{font:800 17px Manrope;letter-spacing:1px}.brand small{display:block;color:#a3b7cc;font-size:9px;letter-spacing:1px;margin-top:3px}.sidebar nav{display:grid;gap:6px}.nav{border:0;text-align:left;background:transparent;color:#c3ced9;padding:12px 15px;border-radius:9px;font-size:17px;cursor:pointer}.nav span{font:500 14px 'DM Sans';margin-left:10px}.nav:hover,.nav.active{background:#233a55;color:#fff}.nav.active{box-shadow:inset 3px 0 #4aa0ff}.side-foot{margin-top:auto;padding:15px 9px;color:#c0cbd6;font-size:12px;line-height:1.7}.side-foot span{color:#87a2bc}main{margin-left:248px;padding:31px 4vw 22px;max-width:1600px}header{display:flex;align-items:center;justify-content:space-between;margin:0 0 27px}.eyebrow,.preview-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#7e8b99}h1{font:700 29px Manrope;margin:5px 0 0;color:#172a3f}h2{font:700 29px Manrope;margin:12px 0}h3{font:700 16px Manrope;margin:0 0 4px}p{color:#7d8b99;margin:4px 0;font-size:13px}.primary,.secondary,.quiet{border:0;border-radius:8px;padding:11px 17px;font:600 13px 'DM Sans';cursor:pointer}.primary{background:#1976d2;color:white;box-shadow:0 3px 8px #1976d233}.primary:hover{background:#1267bc}.secondary{border:1px solid #d8e0e8;background:#fff;color:#273c51}.quiet{background:transparent;color:#1976d2;padding:9px}.danger{color:#bb3843}.view{display:none}.view.active{display:block}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:17px}.stat,.panel,.welcome{background:white;border:1px solid #e8edf2;border-radius:12px;box-shadow:0 5px 18px #293c5010}.stat{padding:20px 22px}.stat span,.stat small{display:block;color:#7a8998;font-size:12px}.stat strong{display:block;font:700 32px Manrope;color:#1b324b;margin:12px 0 0}.stat strong.last{font-size:17px;margin:18px 0}.welcome{padding:30px 34px;display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;background:linear-gradient(105deg,#fff 65%,#ecf5ff)}.welcome p{max-width:550px;line-height:1.65}.welcome .primary{margin-top:18px}.welcome-mark{height:125px;width:220px;border:2px solid #d7e8f7;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#1976d2;font:800 25px Manrope;transform:rotate(3deg);background:#ffffffb8}.welcome-mark span{font:600 11px 'DM Sans';margin-top:5px;color:#63798e}.panel{padding:21px 23px;margin-bottom:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.recent{display:grid}.recent-row{display:grid;grid-template-columns:1fr 1.3fr 1fr 100px;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid #edf0f4;font-size:12px}.recent-row span:first-child{font-weight:700}.muted{color:#81909f}.editor-layout{display:grid;grid-template-columns:minmax(360px,1fr) minmax(360px,.92fr);gap:18px;align-items:start}.form-panel{padding:24px}.form-panel label,.settings-panel label{display:block;margin:0 0 14px;font-weight:600;font-size:12px;color:#536577}.form-panel label small{display:block;font-size:10px;color:#8794a2;font-weight:400;margin:3px 0}.form-panel input,.filters input,.settings-panel select{display:block;width:100%;height:40px;border:1px solid #dbe2e9;border-radius:7px;background:#fff;padding:0 11px;margin-top:6px;color:#1c3045;font:13px 'DM Sans';outline:none}.form-panel input:focus,.filters input:focus{border-color:#4693df;box-shadow:0 0 0 3px #1976d21a}.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #edf0f4;padding-top:17px;margin-top:6px}.preview-col{display:flex;align-items:center;flex-direction:column}.preview-label{margin:2px 0 11px}.label{width:min(100%,390px);aspect-ratio:1;background:white;border:2px solid #101010;border-radius:17px;padding:16px 17px;display:grid;grid-template-rows:1.02fr .7fr .75fr 1.35fr 1fr;box-shadow:0 8px 25px #1f34401a;color:#0c0c0c;font-family:Arial,sans-serif}.label-article,.label-name{border-bottom:2px solid #111;padding:0 2px 5px;overflow:hidden}.label-article small,.label-name small,.label-meta small,.qty small{display:block;font-weight:bold;font-size:clamp(9px,1.1vw,14px)}.label-article b{display:block;font-size:clamp(20px,3vw,35px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:clip}.label-name b{font-size:clamp(14px,2vw,24px);line-height:1.2;display:block;white-space:nowrap;overflow:hidden}.label-meta{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;border-bottom:2px solid #111}.label-meta>div+div{border-left:1px solid #111;padding-left:10px}.label-meta b{display:block;font-size:clamp(11px,1.4vw,16px);margin-top:4px}.label-bottom{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:9px}.qty{border:1.5px solid #111;min-height:85%;display:flex;align-items:center;justify-content:center;flex-direction:column}.qty b{font-size:clamp(38px,5vw,60px);line-height:1}.qr{width:88px;height:88px;display:grid;place-items:center}.qr img,.qr canvas{max-width:100%;max-height:100%}.barcode-wrap{border-top:2px solid #111;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}.barcode-wrap svg{width:95%;height:38px}.hint{font-size:11px;color:#7e8b99;max-width:390px;margin:13px 0;line-height:1.5}.dropzone{border:1.5px dashed #b9c9d8;border-radius:11px;background:#f8fbfe;min-height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:#32495e}.dropzone span{font-size:12px;color:#82909e;margin-bottom:3px}.upload-icon{width:36px;height:36px;border-radius:10px;background:#e6f2ff;color:#1976d2;display:grid;place-items:center;font-size:24px}.dropzone.drag{background:#eaf4ff;border-color:#1976d2}.notice{background:#eff6fc;border:1px solid #daeaf8;border-radius:8px;padding:12px 14px;color:#45647f;font-size:12px;line-height:1.6;margin-top:14px}.hidden{display:none!important}.actions{display:flex;gap:4px;align-items:center}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th{text-align:left;color:#778595;font-weight:600;background:#f7f9fb}th,td{padding:11px 10px;border-bottom:1px solid #edf0f3}td input:not([type=checkbox]){width:100px;border:1px solid #dce3e9;border-radius:5px;padding:6px;font:12px 'DM Sans'}td .bad{color:#bc4350}input[type=checkbox]{accent-color:#1976d2}.filters{display:grid;grid-template-columns:1fr 170px 170px;gap:10px;margin-bottom:13px}.filters input{margin:0}.settings-panel{max-width:700px}.settings-panel select{max-width:400px}hr{border:0;border-top:1px solid #e9edf1;margin:22px 0}footer{display:flex;justify-content:space-between;color:#98a3ad;font-size:10px;padding:20px 3px}#toast{position:fixed;bottom:22px;right:24px;padding:12px 17px;background:#14263d;color:white;border-radius:8px;box-shadow:0 8px 25px #0003;font-size:13px;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}
@media(max-width:1000px){.sidebar{width:205px}main{margin-left:205px;padding:25px}.editor-layout{grid-template-columns:1fr}.preview-col{align-items:flex-start}.label{width:390px}.stats{grid-template-columns:1fr 1fr}.stat:last-child{display:none}}@media(max-width:680px){.sidebar{position:static;width:auto;height:auto;padding:12px}.brand{padding:0 5px 12px}.sidebar nav{display:flex;overflow:auto}.nav{white-space:nowrap;padding:9px}.nav span{font-size:12px}.side-foot{display:none}main{margin:0;padding:19px 14px}.stats{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:14px}.stat strong{font-size:25px}.welcome{padding:21px}.welcome-mark{display:none}.panel{padding:16px}.two{gap:8px}.label{width:min(100%,390px)}.filters{grid-template-columns:1fr 1fr}.filters input:first-child{grid-column:1/3}header{gap:8px}h1{font-size:23px}}
@media print{@page{size:100mm 100mm;margin:0}body{background:#fff!important;margin:0!important}.sidebar,main>header,main>.view:not(#manual),#manual>.editor-layout>.form-panel,.preview-label,.hint,footer,#toast{display:none!important}main{margin:0!important;padding:0!important;max-width:none!important}.view#manual{display:block!important}.editor-layout{display:block!important}.preview-col{display:block!important}.label{width:100mm!important;height:100mm!important;max-width:none!important;aspect-ratio:auto!important;border-radius:4mm!important;padding:4mm!important;box-shadow:none!important;break-inside:avoid}.label-article small,.label-name small,.label-meta small,.qty small{font-size:3.3mm}.label-article b{font-size:9mm}.label-name b{font-size:6.5mm}.label-meta b{font-size:4.2mm}.label-bottom{grid-template-columns:1fr 23mm}.qr{width:22mm;height:22mm}.barcode-wrap svg{height:10mm}.qty b{font-size:15mm}}

@media print{#printArea{display:block!important}.print-label{width:100mm!important;height:100mm!important;max-width:none!important;aspect-ratio:auto!important;page-break-after:always;break-after:page}.print-label:last-child{page-break-after:auto;break-after:auto}}
/* CSV sticker library */
.label-meta .wo-value:empty{display:block;min-height:1em;width:100%;border-bottom:1px solid #111;margin-top:4px}.label-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:13px;margin:14px 0 20px}.sticker-card{border:1px solid #e1e7ed;border-radius:10px;padding:12px;background:#fbfcfd;transition:.15s}.sticker-card.selected{border-color:#4f9be0;box-shadow:0 0 0 2px #1976d218}.sticker-top,.sticker-actions{display:flex;align-items:center;justify-content:space-between}.select-sticker{display:flex;align-items:center;gap:7px;font-size:11px;color:#526578}.sticker-index{font-size:10px;color:#98a4af}.sticker-mini{margin:9px 0 8px;border:1.5px solid #263747;border-radius:8px;background:#fff;padding:10px;min-height:132px;display:flex;flex-direction:column;color:#172a3e}.sticker-mini>small{font-size:8px;letter-spacing:1px;color:#66798b}.sticker-mini>b{font:700 17px Manrope;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticker-mini>span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-divider{border-top:1px solid #bdc7d0;margin:7px 0}.mini-meta{display:flex;justify-content:space-between;font-size:9px;color:#637486}.mini-meta span{display:flex;flex-direction:column;gap:3px}.mini-meta b{color:#1d2e3e;font-size:10px}.mini-barcode{font-size:20px;letter-spacing:1px;text-align:center;line-height:22px;overflow:hidden;color:#111}.sticker-actions{border-top:1px solid #edf0f3;padding-top:7px}.sticker-actions label{font-size:10px;color:#66788a;display:flex;align-items:center;gap:7px}.sticker-actions input{width:56px;border:1px solid #d8e0e8;border-radius:5px;padding:5px}.sticker-status{font-size:10px;color:#598063}.sticker-status.bad{color:#b53c47}.edit-details{border-top:1px solid #e9edf1;padding-top:12px}.edit-details summary{font-size:12px;color:#1976d2;cursor:pointer;font-weight:600}.modal{position:fixed;z-index:5;inset:0;background:#0f1d2bbb;display:grid;place-items:center;padding:20px}.modal-card{background:#fff;border-radius:13px;padding:20px;max-height:96vh;overflow:auto}.modal-card .label{width:min(80vw,390px)}
@media print{#itemPreview{display:none!important}}
/* Revised three-line product description and measuring-unit layout */
.label{grid-template-rows:.7fr 1.3fr .65fr 1.1fr 1.25fr}
.label-name{min-height:0;display:flex;flex-direction:column;justify-content:center}
.label-name b{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:1.13;overflow-wrap:anywhere}
.qty{width:42%;min-height:84%;padding:3px 8px}
.qty-value{display:flex;align-items:baseline;gap:5px;line-height:1}
.qty b{font-size:clamp(30px,4.2vw,48px)}
.qty-value span{font-size:clamp(10px,1.25vw,14px);font-weight:bold}
.code-area{display:grid;grid-template-columns:minmax(0,1fr) 76px;align-items:center;gap:8px;border-top:0;min-height:0;padding-top:4px}
.barcode-wrap{height:100%;border:0;min-width:0}
.barcode-wrap svg{width:100%;height:66px;max-height:100%}
.code-area .qr{width:72px;height:72px}
@media print{
 .label{grid-template-rows:.7fr 1.3fr .65fr 1.1fr 1.25fr}
 .label-article b{font-size:8.5mm}
 .label-name b{font-size:5.6mm;line-height:1.12;-webkit-line-clamp:3}
 .label-meta b{font-size:4mm}
 .qty{width:42%;min-height:82%;padding:1mm 2mm}
 .qty b{font-size:10mm}.qty-value span{font-size:3.2mm}
 .code-area{grid-template-columns:minmax(0,1fr) 22mm;gap:2mm;padding-top:1mm;border-top:0}
 .code-area .qr{width:21mm;height:21mm}
 .barcode-wrap svg{height:15mm;max-height:15mm}
}


.label-bottom{grid-template-columns:42% 1fr;align-items:center;gap:8px}.qty{width:100%;height:88%;min-height:0}.location-block{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;padding:0 4px}.location-block small{display:block;font-size:clamp(8px,.9vw,11px);font-weight:bold}.location-value{display:block;min-height:1.2em;font-size:clamp(11px,1.35vw,15px);margin-top:4px}.location-value:empty{border-bottom:1px solid #111}@media print{.label-bottom{grid-template-columns:42% 1fr;gap:2mm}.location-block{gap:2mm;padding:0 1mm}.location-block small{font-size:2.8mm}.location-value{font-size:3.6mm;min-height:5mm;margin-top:1mm}.qty{height:88%;min-height:0}}

