:root{
  --pink:#ff6bc8;
  --magenta:#cc00ff;
  --coral:#ff7b6b;
  --grad:linear-gradient(135deg,#ff7b6b,#ff6bc8,#cc00ff);
  --grad2:linear-gradient(135deg,#cc00ff,#ff6bc8);
  --bg:#0f0a1a;
  --surface:#1a1028;
  --surface2:#231535;
  --surface3:#2d1c42;
  --surface4:#382251;
  --border:rgba(255,107,200,0.18);
  --border2:rgba(255,107,200,0.38);
  --text:#f0e8ff;
  --dim:rgba(240,232,255,0.72);
  --dimmer:rgba(240,232,255,0.42);
  --green:#00e5a0;
  --red:#ff4f6a;
  --yellow:#ffd166;
  --blue:#64b5f6;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{min-height:100%}

body{
  font-family:'Outfit',sans-serif;
  background:radial-gradient(circle at top right,rgba(204,0,255,0.12),transparent 34%),var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  top:-30%;
  right:-20%;
  width:60vw;
  height:60vw;
  background:radial-gradient(circle,rgba(204,0,255,0.07) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

header{
  position:relative;
  z-index:10;
  padding:.95rem 1.25rem;
  border-bottom:1px solid var(--border);
  background:rgba(15,10,26,.97);
  backdrop-filter:blur(20px);
  display:flex;
  align-items:center;
  gap:1rem;
}

.hicon{
  width:44px;
  height:44px;
  background:var(--grad);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  box-shadow:0 0 18px rgba(204,0,255,.4);
  flex-shrink:0;
}

.htext h1{
  font-size:1.15rem;
  font-weight:700;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.htext p{font-size:.76rem;color:var(--dim);margin-top:2px}

.hpills{
  margin-left:auto;
  display:flex;
  gap:.45rem;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.32rem .8rem;
  font-size:.76rem;
  color:var(--dim);
}

.pill strong{color:var(--pink);font-weight:700}

.banner{
  position:relative;
  z-index:10;
  padding:.6rem 1.25rem;
  font-size:.8rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}

.banner.setup{
  background:rgba(100,181,246,.1);
  border-bottom:1px solid rgba(100,181,246,.3);
  color:var(--blue);
}

.banner.helper{
  background:rgba(255,209,102,.08);
  border-bottom:1px solid rgba(255,209,102,.2);
  color:var(--yellow);
}

.toolbar{
  position:relative;
  z-index:10;
  padding:.7rem 1.25rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
}

.tl{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dimmer);
}

.tsep{
  width:1px;
  height:24px;
  background:var(--border);
  margin:0 .1rem;
}

.upload-zone{
  position:relative;
  display:flex;
  align-items:center;
  gap:.65rem;
  background:var(--surface2);
  border:1.5px dashed var(--border2);
  border-radius:12px;
  padding:.55rem .95rem;
  cursor:pointer;
  transition:all .2s;
  overflow:hidden;
  min-width:min(100%,350px);
}

.upload-zone:hover{
  border-color:var(--pink);
  background:rgba(255,107,200,.07);
}

.upload-zone.drag-over{
  border-color:var(--green);
  background:rgba(0,229,160,.08);
}

.upload-zone input[type=file]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
}

.uz-icon{font-size:1.15rem}
.uz-t{font-size:.85rem;font-weight:700}
.uz-s{font-size:.7rem;color:var(--dim)}

.btn{
  font-family:'Outfit',sans-serif;
  font-size:.8rem;
  font-weight:600;
  border-radius:9px;
  padding:.5rem .9rem;
  cursor:pointer;
  transition:all .15s;
  border:1px solid var(--border);
  background:transparent;
  color:var(--dim);
}

.btn:hover{border-color:var(--pink);color:var(--pink)}
.btn.red:hover{border-color:var(--red);color:var(--red)}
.btn.green{border-color:rgba(0,229,160,.4);color:var(--green);background:rgba(0,229,160,.07)}
.btn.green:hover{background:rgba(0,229,160,.15)}
.btn-strong{border-color:rgba(255,107,200,.35);color:var(--text);background:rgba(255,107,200,.08)}

.btn-print{
  background:var(--grad);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:.5rem 1.2rem;
  font-family:'Outfit',sans-serif;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 18px rgba(204,0,255,.35);
  display:flex;
  align-items:center;
  gap:.45rem;
}

.btn-print:hover:not(:disabled){
  opacity:.93;
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(204,0,255,.5);
}

.btn-print:disabled{
  opacity:.28;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.bpc{
  background:rgba(255,255,255,.22);
  border-radius:5px;
  padding:.07rem .42rem;
  font-size:.74rem;
}

.app-body{
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(380px,480px) 1fr;
  min-height:calc(100vh - 170px);
}

.panel-left{
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.search-wrap{
  padding:.95rem 1rem;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.search-main{position:relative}

.search-main input,
.search-wrap select,
.form-group input,
.form-group select{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-family:'Outfit',sans-serif;
  font-size:.92rem;
  outline:none;
  transition:border-color .2s, background .2s;
}

.search-main input{
  padding:.75rem .95rem .75rem 2.45rem;
}

.search-wrap select{
  padding:.72rem .85rem;
}

.search-main input:focus,
.search-wrap select:focus,
.form-group input:focus,
.form-group select:focus{
  border-color:var(--pink);
  background:rgba(255,255,255,.04);
}

.si{
  position:absolute;
  left:.85rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--dim);
  font-size:.95rem;
  pointer-events:none;
}

.filter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}

.filter-group label{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dim);
}

.quick-cats{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--dim);
  border-radius:999px;
  padding:.34rem .72rem;
  cursor:pointer;
  font-family:'Outfit',sans-serif;
  font-size:.76rem;
  transition:all .15s;
}

.chip:hover{border-color:var(--pink);color:var(--pink)}
.chip.active{background:rgba(255,107,200,.12);border-color:rgba(255,107,200,.42);color:#fff}

.sinfo{
  font-size:.72rem;
  color:var(--dimmer);
  font-family:'Space Mono',monospace;
}

.import-feedback{
  margin:.85rem 1rem 0;
  border:1px solid rgba(100,181,246,.32);
  background:rgba(100,181,246,.08);
  border-radius:12px;
  padding:.9rem 1rem;
  font-size:.8rem;
  line-height:1.55;
}

.import-feedback.is-warning{
  border-color:rgba(255,209,102,.35);
  background:rgba(255,209,102,.08);
}

.import-feedback strong{color:#fff}

.import-feedback .import-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem .8rem;
  margin-top:.55rem;
}

.import-feedback .import-errors{
  margin-top:.7rem;
  color:var(--dim);
}

.sel-bar{
  padding:.6rem 1rem;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:.6rem;
}

.sbt{font-size:.78rem;color:var(--dim);flex:1}
.sbt strong{color:var(--pink)}
.sbt-sep{margin:0 .25rem;color:var(--dimmer)}

.bsm{
  font-size:.72rem;
  color:var(--dimmer);
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.3rem .6rem;
  cursor:pointer;
  font-family:'Outfit',sans-serif;
  transition:all .12s;
}

.bsm:hover{border-color:var(--red);color:var(--red)}

.bsm:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.bsm:disabled:hover{
  border-color:var(--border);
  color:var(--dimmer);
  background:none;
}

.bsm.danger{
  border-color:rgba(255,79,106,.28);
  color:#ffd7df;
  background:rgba(255,79,106,.08);
}

.bsm.danger:hover{
  border-color:var(--red);
  color:#fff;
  background:rgba(255,79,106,.16);
}

.product-list{
  flex:1;
  overflow-y:auto;
  padding:.45rem;
}

.product-list::-webkit-scrollbar{width:5px}
.product-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

.empty-list{
  padding:1.5rem;
  text-align:center;
  color:var(--dimmer);
  font-size:.84rem;
}

.product-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem .65rem;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .12s, border-color .12s;
}

.product-item:hover{background:var(--surface2)}
.product-item.selected{background:rgba(204,0,255,.08);border-color:rgba(204,0,255,.22)}

.product-item input[type=checkbox]{
  accent-color:var(--magenta);
  width:16px;
  height:16px;
  cursor:pointer;
  flex-shrink:0;
}

.pi-info{flex:1;min-width:0;cursor:pointer}

.pi-name{
  font-size:.82rem;
  font-weight:700;
  line-height:1.25;
  word-break:break-word;
}

.pi-sub{
  font-size:.67rem;
  color:var(--dim);
  font-family:'Space Mono',monospace;
  margin-top:3px;
}

.pi-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:.64rem;
  padding:.18rem .48rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--dim);
}

.pi-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.pi-pw{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-shrink:0;
}

.pi-price{
  background:var(--grad2);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  padding:.22rem .5rem;
  border-radius:7px;
  cursor:pointer;
  transition:opacity .15s;
  white-space:nowrap;
}

.pi-price:hover{opacity:.8}

.pi-edit{
  font-size:.8rem;
  color:var(--dimmer);
  cursor:pointer;
  transition:color .12s;
}

.pi-edit:hover{color:var(--yellow)}

.pi-delete{
  font-size:.8rem;
  color:var(--dimmer);
  cursor:pointer;
  transition:color .12s;
}

.pi-delete:hover{color:var(--red)}

.pi-inp{
  width:72px;
  background:var(--surface3);
  border:1.5px solid var(--pink);
  border-radius:7px;
  padding:.22rem .35rem;
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  font-family:'Outfit',sans-serif;
  outline:none;
  text-align:right;
}

.qty-ctrl{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}

.selection-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.qb{
  width:20px;
  height:20px;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
  cursor:pointer;
  font-size:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .12s;
}

.qb:hover{background:rgba(204,0,255,.25)}

.qv{
  min-width:18px;
  text-align:center;
  font-size:.74rem;
  font-weight:700;
  font-family:'Space Mono',monospace;
  color:var(--pink);
}

.qb-remove{
  border:1px solid rgba(255,79,106,.28);
  background:rgba(255,79,106,.08);
  color:#ffd7df;
  border-radius:999px;
  padding:.28rem .62rem;
  font-family:'Outfit',sans-serif;
  font-size:.68rem;
  cursor:pointer;
  transition:all .12s;
  white-space:nowrap;
}

.qb-remove:hover{
  border-color:var(--red);
  color:#fff;
  background:rgba(255,79,106,.16);
}

.pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.8rem 1rem 1rem;
  border-top:1px solid var(--border);
}

.pagination-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.pagination-meta{
  flex:1;
  text-align:center;
  font-size:.76rem;
  color:var(--dim);
  font-family:'Space Mono',monospace;
}

.panel-right{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:rgba(15,10,26,.4);
}

.prev-hdr{
  padding:.7rem 1.2rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:.7rem;
  background:rgba(15,10,26,.6);
}

.prev-hdr h2{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}

.pind{
  margin-left:auto;
  font-size:.7rem;
  color:var(--dimmer);
  font-family:'Space Mono',monospace;
}

.preview-area{
  flex:1;
  overflow-y:auto;
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}

.preview-area::-webkit-scrollbar{width:5px}
.preview-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

.empty-state{
  margin:auto;
  text-align:center;
  color:var(--dim);
}

.ei{font-size:2.7rem;opacity:.28;margin-bottom:.8rem}
.empty-state p{font-size:.9rem;line-height:1.6}

.hint{
  display:inline-block;
  margin-top:.7rem;
  font-size:.74rem;
  color:var(--dimmer);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.36rem .8rem;
}

.pgbadge{
  color:var(--dimmer);
  font-size:.68rem;
  font-family:'Space Mono',monospace;
  letter-spacing:.06em;
  align-self:flex-start;
  margin-left:8px;
}

.a4-page{
  width:794px;
  background:#fff;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  border-radius:3px;
  padding:28px;
  flex-shrink:0;
}

.labels-grid{display:grid;grid-template-columns:repeat(3,246px);gap:0}
.label-cell{width:246px;height:144px;box-sizing:border-box;border:.5px dashed #c8a8e8;position:relative}
.label-inner{position:absolute;inset:2px;background:#fff;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border:1.5px solid #f0e0ff;border-radius:3px}
.lbl-top{display:flex;align-items:center;justify-content:center;padding:2px 6px 2px;gap:8px;border-bottom:1px solid #f5eeff;min-height:0}
.lbl-logo{width:50px;height:36px;object-fit:contain;flex-shrink:0}
.lbl-name{flex:1;font-family:'Outfit',sans-serif;font-size:14px;font-weight:900;color:#1a1028;line-height:1.1;text-transform:uppercase;letter-spacing:.02em;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.lbl-price-wrap{display:flex;align-items:center;justify-content:center;padding:0 4px 0;margin-top:-5px}
.lbl-price{font-family:'Outfit',sans-serif;font-size:42px;font-weight:900;background:linear-gradient(135deg,#ff7b6b,#ff6bc8,#cc00ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:.95;letter-spacing:-.03em}
.lbl-bottom{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 6px 4px;gap:0}
.lbl-bw{width:50%;display:flex;justify-content:center;align-items:center}
.lbl-bw svg{width:100%!important;max-width:100%;height:28px}
.lbl-ref{
  width:50%;
  text-align:center;
  font-family:'Space Mono',monospace;
  font-size:12px;
  font-weight:700;
  background:linear-gradient(135deg,#cc00ff,#ff6bc8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  white-space:normal;
  word-break:break-all;
  line-height:1.2;
  padding:0 3px;
}

.loading{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,10,26,.6);
  z-index:300;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1rem;
}

.loading.active{display:flex}

.loading-text{color:var(--dim);font-size:.9rem}

.spinner{
  width:40px;
  height:40px;
  border:3px solid var(--border2);
  border-top-color:var(--pink);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed;
  bottom:1.4rem;
  right:1.4rem;
  z-index:200;
  background:var(--surface3);
  border:1px solid var(--green);
  color:var(--green);
  border-radius:12px;
  padding:.8rem 1rem;
  font-size:.84rem;
  font-weight:600;
  box-shadow:0 8px 28px rgba(0,229,160,.2);
  transform:translateY(80px);
  opacity:0;
  transition:transform .3s,opacity .3s;
  pointer-events:none;
  max-width:420px;
}

.toast.show{transform:translateY(0);opacity:1}

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  z-index:100;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.modal-overlay.open{display:flex}

.modal{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:18px;
  padding:1.5rem;
  width:480px;
  max-width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.modal h3{
  font-size:1.08rem;
  font-weight:700;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.modal-help{
  margin-top:.35rem;
  margin-bottom:1.1rem;
  font-size:.8rem;
  color:var(--dim);
}

.form-group{margin-bottom:.9rem}

.form-group label{
  display:block;
  font-size:.74rem;
  font-weight:700;
  color:var(--dim);
  margin-bottom:.35rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.form-group input,
.form-group select{
  padding:.76rem .85rem;
}

.modal-btns{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top:1.3rem;
  flex-wrap:wrap;
}

.modal-err{
  font-size:.78rem;
  color:var(--red);
  margin-top:.25rem;
  display:none;
}

.hist-section{margin-top:.9rem}
.hist-title{font-size:.74rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

.hist-list{
  margin-top:.55rem;
  max-height:160px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
}

.hist-item{
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  padding:.65rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.74rem;
}

.hist-item:last-child{border-bottom:none}
.hist-old{color:var(--dim)}
.hist-new{color:var(--yellow);font-weight:700}
.hist-date{color:var(--dimmer);font-family:'Space Mono',monospace}

@media (max-width:1320px){
  .app-body{grid-template-columns:minmax(360px,460px) 1fr}
  .a4-page{transform:scale(.88);transform-origin:top center;margin-bottom:-45px}
}

@media (max-width:1180px){
  .app-body{grid-template-columns:1fr}
  .panel-right{display:none}
}

@media (max-width:760px){
  header,
  .toolbar,
  .banner{padding-left:.9rem;padding-right:.9rem}

  .filter-grid{grid-template-columns:1fr}

  .upload-zone{
    min-width:100%;
  }

  .pagination{
    flex-direction:column;
  }

  .pagination-meta{order:-1}

  .modal-btns > *{
    width:100%;
    justify-content:center;
  }
}