:root{--bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#7a8499;--primary:#5b5cf0;--dark:#12182b;--line:#e8ecf3}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app{display:grid;grid-template-columns:245px 1fr;min-height:100vh}.side{background:linear-gradient(180deg,#11182b,#1b2440);color:white;padding:24px 16px}
.brand{font-size:24px;font-weight:800;padding:8px 12px 26px}.brand b{color:#8b8cff}.nav button{width:100%;border:0;background:transparent;color:#bfc8dd;text-align:left;padding:13px 14px;margin:4px 0;border-radius:12px;font-size:15px;cursor:pointer}
.nav button:hover,.nav button.active{background:#ffffff16;color:#fff}.main{padding:26px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.top h1{margin:0;font-size:27px}.top small{color:var(--muted)}
.badge{background:#e9eaff;color:#5051d8;padding:9px 12px;border-radius:20px;font-weight:700}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:19px;box-shadow:0 8px 30px #26334d0a}
.stat strong{display:block;font-size:26px;margin-top:8px}.stat span{color:var(--muted);font-size:13px}.panel{margin-top:18px}.panel h3{margin:0 0 16px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);font-size:14px}th{color:var(--muted)}
.page{display:none}.page.active{display:block}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.btn{border:0;background:var(--primary);color:white;padding:11px 15px;border-radius:11px;font-weight:700;cursor:pointer}.btn.alt{background:#eef0f7;color:#343b50}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:13px;color:var(--muted)}input,select,textarea{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;font:inherit}textarea{min-height:90px}
.status{padding:6px 9px;border-radius:12px;background:#edf8f2;color:#24835a;font-size:12px;font-weight:700}
@media(max-width:850px){.app{grid-template-columns:76px 1fr}.brand{font-size:0}.brand:after{content:"MGT";font-size:18px}.nav button{font-size:0}.nav button:before{content:attr(data-short);font-size:13px}.main{padding:16px}.grid{grid-template-columns:1fr 1fr}.formgrid{grid-template-columns:1fr}}

.main{min-width:0}.sale-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.checkout{align-self:start}.field{margin-bottom:12px}.scroll{overflow:auto}.muted,small{color:var(--muted);font-size:13px;line-height:1.6}.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:16px 0 26px}.product{background:#f8f9fe;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;cursor:pointer;color:var(--text)}.product strong,.product span{display:block;margin-bottom:6px}.product:hover{border-color:var(--primary)}button:disabled{opacity:.45;cursor:not-allowed}.wide{width:100%;margin-top:12px}#productSearch{width:100%;margin-top:8px}.sum{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.sum.total{font-size:22px;font-weight:800}.qty{display:flex;align-items:center;gap:6px}.qty input{width:66px;padding:8px}.mini{border:1px solid var(--line);background:#eef0f7;border-radius:8px;padding:7px 10px;cursor:pointer}.danger{color:#b53a50}.empty{text-align:center;padding:30px;color:var(--muted)}#notice{position:fixed;bottom:24px;right:24px;max-width:420px;padding:16px 22px;background:#172033;color:#fff;border-radius:12px;z-index:10;box-shadow:0 8px 30px #0003}dialog{border:1px solid var(--line);border-radius:18px;padding:26px;width:440px;max-width:90vw}dialog::backdrop{background:#12182b80}dialog input{width:100%}.demo{margin:0 0 20px;color:var(--muted);font-size:13px}input:focus,select:focus,button:focus-visible{outline:2px solid #8b8cff;outline-offset:2px}@media(max-width:1100px){.sale-layout{grid-template-columns:1fr}}@media(max-width:520px){.main{padding:12px}.top{gap:10px}.top h1{font-size:22px}.badge{font-size:11px}.grid{grid-template-columns:1fr}.card{padding:14px}.side{padding:18px 8px}}@media print{.side,.top,.demo,.actions,#notice{display:none!important}.app{display:block}.main{padding:0}.card{box-shadow:none}.page:not(.active){display:none!important}}
dialog{width:600px;max-height:90vh;overflow:auto} .row-actions{display:flex;gap:6px;flex-wrap:wrap}.summary{display:flex;gap:24px;flex-wrap:wrap;padding:18px;background:#f4f5fe;border-radius:12px;margin:18px 0}.quote-line input{min-width:70px;width:100%}.quote-line td:first-child{min-width:220px}.print-only{display:none}#quoteWorkspace h3{margin-top:0}.warn{background:#fff3df;color:#9a620b}@media print{body.printing .app,body.printing dialog,body.printing #notice{display:none!important}body.printing #printArea{display:block!important;padding:25px;color:#172033}#printArea h1{font-size:28px}#printArea table{margin:20px 0}#printArea .print-note{white-space:pre-wrap}} 
[hidden]{display:none!important}
:root[data-accent=blue]{--primary:#2563eb}
:root[data-accent=green]{--primary:#16815b}
:root[data-theme=light]{--bg:#f7f8fc;--card:#fff;--dark:#edf0f8}
[data-theme=light] .side{background:#fff;color:var(--text);border-right:1px solid var(--line)}
[data-theme=light] .nav button{color:#566078}
[data-theme=light] .nav button.active,[data-theme=light] .nav button:hover{background:#eef0ff;color:var(--primary)}
:root[data-theme=dark]{color-scheme:dark;--bg:#101522;--card:#1b2335;--text:#e8edf8;--muted:#a6b3cb;--line:#344058;--dark:#0c1120}
[data-theme=dark] .side{background:linear-gradient(#0b1020,#151f34)}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea,[data-theme=dark] dialog{background:#202b40;color:var(--text);border-color:var(--line)}
[data-theme=dark] .btn.alt,[data-theme=dark] .mini,[data-theme=dark] .product,[data-theme=dark] .summary,[data-theme=dark] .qty{background:#29354d;color:var(--text);border-color:var(--line)}
[data-theme=dark] .badge{background:#30335b;color:#c7c8ff}
[data-theme=dark] .status{background:#183e34;color:#94e0bd}
[data-theme=dark] .status.warn{background:#514127;color:#ffdaa0}
[data-theme=dark] .danger{color:#ffacb7}
.permission-grid{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.permission-grid label{font-size:13px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.permission-grid input{accent-color:var(--primary);flex-shrink:0;width:auto}
@media(max-width:600px){.permission-grid{grid-template-columns:1fr}}
@media print{[data-theme] body,[data-theme] #printArea,[data-theme] dialog{background:white!important;color:#172033!important;color-scheme:light}[data-theme] #printArea *{color:#172033!important;border-color:#ddd!important}}

.label-preview{overflow:auto;background:#e8ecf3;padding:12px;margin:15px 0;max-height:450px}
.labels-grid{display:flex;flex-wrap:wrap;gap:2mm;align-content:flex-start;max-width:190mm}
.barcode-label{box-sizing:border-box;flex:none;overflow:hidden;background:#fff!important;color:#000!important;padding:2mm 3mm;text-align:center;border:1px dashed #ccd0d8;break-inside:avoid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1mm;font:10px Arial,sans-serif;line-height:1.15}
.label-company,.label-title,.label-subtitle{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.label-company{font-size:10px}.label-title{font-weight:bold;font-size:11px}.label-subtitle{font-size:9px}.label-code{font:11px Consolas,monospace;white-space:nowrap;max-width:100%;overflow:hidden}
.label-barcode{display:block;width:100%;height:14mm;flex:none;background:#fff}
.roll-labels{display:block}.roll-labels .barcode-label{margin-bottom:2mm}
@media print{body.label-printing #printArea{padding:0!important;margin:0!important}.barcode-label{border:0!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.roll-labels .barcode-label{margin:0;break-after:page}.roll-labels .barcode-label:last-child{break-after:auto}body.label-printing .labels-grid{gap:2mm}body.label-printing .roll-labels{display:block}}

.adjustable-label{justify-content:flex-start;gap:1.5mm;font-size:var(--label-font);padding:3mm;overflow:hidden}
.adjustable-label .label-company,.adjustable-label .label-title,.adjustable-label .label-subtitle{font-size:var(--label-font);white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip;line-height:1.15;flex-shrink:0}
.adjustable-label .label-code{font-size:var(--code-font);overflow:visible;flex-shrink:0}
.adjustable-label .label-barcode{height:var(--bar-height)}
.template-panel{margin-bottom:18px}.template-line{display:grid;grid-template-columns:1.3fr 1fr 70px 100px auto;gap:8px;border-bottom:1px solid var(--line);padding:12px 0;min-width:600px}.template-line label{display:flex;flex-direction:column;font-size:12px;gap:5px}.template-line input,.template-line select{min-width:0;width:100%}
details{margin:12px 0}summary{cursor:pointer;font-weight:700;margin-bottom:12px}details input[type=checkbox]{width:auto}
.mobile-menu-button{display:none}.camera-video{width:100%;max-height:50vh;object-fit:contain;background:#000;border-radius:14px}.camera-actions{margin-top:12px}
.nav button,.btn,.mini{touch-action:manipulation}
@media(max-width:900px){.app{display:block}.side{position:sticky;top:0;z-index:5;padding:10px 12px;min-height:0}.side .brand{font-size:21px;padding:3px 0 8px}.nav{display:flex;overflow-x:auto;gap:4px;scrollbar-width:thin}.nav button{flex:none;width:auto;white-space:nowrap;padding:12px 14px;font-size:14px;margin:0}.main{padding:14px;overflow-wrap:anywhere}.top{align-items:flex-start}.top h1{font-size:23px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sale-layout{grid-template-columns:minmax(0,1fr)}.checkout{position:static}.card{padding:15px}.row-actions{min-width:160px}.actions{gap:8px}dialog{max-width:calc(100vw - 20px)!important;max-height:92dvh;padding:16px}.btn,.mini{min-height:44px}input,select,textarea{font-size:16px;max-width:100%;min-height:44px}input[type=checkbox]{min-height:20px;width:20px}table{min-width:550px}.scroll{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}.formgrid{grid-template-columns:1fr 1fr}.products{grid-template-columns:repeat(2,minmax(0,1fr))}.permission-grid{grid-template-columns:1fr}.label-preview{max-width:100%;padding:8px}.label-preview .labels-grid{width:max-content;min-width:100%}#notice{left:12px;right:12px;bottom:12px;max-width:none}.main>.card.actions{align-items:stretch!important}.main>.card.actions form{margin-left:0!important}.main>.card.actions .btn{font-size:12px;padding:8px 10px}}
@media(max-width:520px){.formgrid{grid-template-columns:1fr}.main{padding:10px}.grid{gap:8px}.stat strong{font-size:22px}.top{gap:8px}.badge{font-size:10px;padding:7px}.actions .field{width:100%}.product{padding:12px}.summary{gap:12px;padding:12px}.sum.total{font-size:20px}.side .brand{display:none}.nav button{font-size:13px;padding:12px 10px}.template-line{min-width:550px}.label-preview{max-height:300px}#contactDialog .actions a{display:block;text-align:center}.template-panel .actions button{flex:1 1 130px}}
@media print{.side,.main>.card.actions{display:none!important}}

#profileLabelFields input[type=checkbox]{width:20px;min-height:20px}.page,.card,.sale-layout>*{min-width:0}

@media(max-width:900px){.nav button:before{content:none}.demo{display:none}.main>.top{margin-bottom:12px}.main>.card.actions{padding:10px}}