/* ── tokens ─────────────────────────────── */
:root{
  --paper:#F8F4F4; --surface:#FFFFFF; --surface2:#F1E9E9;
  --ink:#2B1416; --ink2:#5E4447; --ink3:#98807F;
  --rule:#E8DCDC; --rule2:#D6C4C4;
  --reg:#C1121F; --reg-d:#9B0E19; --reg-t:rgba(193,18,31,.10);
  --ochre:#C8842B; --ochre-t:rgba(200,132,43,.13);
  --brick:#7A0F16; --brick-t:rgba(122,15,22,.12);
  --plum:#6B4E9E; --plum-t:rgba(107,78,158,.12);
  --ui:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --num:'IBM Plex Mono',ui-monospace,monospace;
  --r:12px; --r-sm:9px;
  --lift:0 1px 2px rgba(43,20,22,.06),0 6px 20px rgba(43,20,22,.05);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#140C0D; --surface:#1E1315; --surface2:#281A1D;
    --ink:#F3E9EA; --ink2:#B9A4A7; --ink3:#85706F;
    --rule:#342225; --rule2:#432D31;
    --reg:#FF4D5A; --reg-d:#E63946; --reg-t:rgba(255,77,90,.13);
    --ochre:#E0A455; --ochre-t:rgba(224,164,85,.14);
    --brick:#E06A5F; --brick-t:rgba(224,106,95,.13);
    --plum:#A98BDC; --plum-t:rgba(169,139,220,.14);
    --lift:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#140C0D; --surface:#1E1315; --surface2:#281A1D;
  --ink:#F3E9EA; --ink2:#B9A4A7; --ink3:#85706F;
  --rule:#342225; --rule2:#432D31;
  --reg:#FF4D5A; --reg-d:#E63946; --reg-t:rgba(255,77,90,.13);
  --ochre:#E0A455; --ochre-t:rgba(224,164,85,.14);
  --brick:#E06A5F; --brick-t:rgba(224,106,95,.13);
  --plum:#A98BDC; --plum-t:rgba(169,139,220,.14);
  --lift:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);
}
*,*::before,*::after{box-sizing:inherit;-webkit-tap-highlight-color:transparent}
body,h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  background:var(--paper); color:var(--ink); font-family:var(--ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100%;
}
:focus-visible{outline:2.5px solid var(--reg); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── shell ──────────────────────────────── */
#app{max-width:680px;margin:0 auto;padding:0 0 92px}
.view{display:none;padding:14px 16px 8px}
.view.on{display:block}

.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px;
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.mark{
  width:30px;height:30px;border-radius:8px;background:var(--reg);
  display:grid;place-items:center;flex-shrink:0;
}
.mark svg{width:17px;height:17px;display:block}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-.3px;white-space:nowrap}
.shopname{font-size:11.5px;color:var(--ink3);font-weight:500;margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier{
  font-family:var(--num);font-size:10.5px;font-weight:600;
  padding:4px 9px;border-radius:99px;border:1px solid currentColor;
  background:transparent;cursor:pointer;flex-shrink:0;
}

/* ── bottom nav ─────────────────────────── */
.dock{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; max-width:680px; z-index:60;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  padding:7px 8px calc(8px + env(safe-area-inset-bottom,0px));
}
.dock button{
  appearance:none;border:none;background:none;cursor:pointer;
  font-family:var(--ui);font-size:10.5px;font-weight:600;color:var(--ink3);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:9px;transition:color .15s,background .15s;
}
.dock button svg{width:20px;height:20px;stroke-width:1.9}
.dock button.on{color:var(--reg);background:var(--reg-t)}

/* ── receipt tape (hero) ────────────────── */
.tape{
  background:var(--surface); border-radius:2px;
  box-shadow:var(--lift); padding:20px 18px 22px;
  position:relative; margin-bottom:16px;
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}
.tape::before,.tape::after{
  content:''; position:absolute; left:0; right:0; height:9px;
  background:
    repeating-linear-gradient(-45deg,var(--surface) 0 7px,transparent 7px 14px);
  filter:drop-shadow(0 0 0 var(--surface));
}
.tape::before{top:-8px}
.tape::after{bottom:-8px;transform:scaleY(-1)}
.tape-head{text-align:center;border-bottom:1.5px dashed var(--rule2);padding-bottom:13px;margin-bottom:14px}
.tape-shop{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.5px}
.tape-date{font-family:var(--num);font-size:11px;color:var(--ink3);margin-top:3px}
.tape-total{text-align:center;padding:4px 0 14px}
.tape-total-lbl{font-size:12.5px;color:var(--ink2);font-weight:500}
.tape-total-val{
  font-family:var(--num);font-weight:700;font-size:40px;letter-spacing:-1.5px;
  line-height:1.1;margin-top:2px;color:var(--reg);
}
.tape-rows{display:flex;flex-direction:column;gap:9px;border-top:1.5px dashed var(--rule2);padding-top:13px}
.tape-row{display:flex;align-items:baseline;gap:8px;font-family:var(--num);font-size:12.5px}
.tape-row .lbl{color:var(--ink2);white-space:nowrap}
.tape-row .dots{flex:1;border-bottom:1.5px dotted var(--rule2);transform:translateY(-3px)}
.tape-row .val{font-weight:600;white-space:nowrap}
.tape-row .val.pos{color:var(--reg)}
.tape-row .val.warn{color:var(--ochre)}

/* ── print-in motion (one orchestrated moment) ── */
@keyframes feed{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.tape.feed{animation:feed .65s cubic-bezier(.22,.9,.3,1) both}

/* ── generic blocks ─────────────────────── */
.block{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:15px;margin-bottom:13px}
.block-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.block-t{font-weight:700;font-size:14.5px;letter-spacing:-.1px}
h2.screen-t{font-weight:800;font-size:21px;letter-spacing:-.5px;margin-bottom:3px}
.screen-sub{font-size:13px;color:var(--ink3);margin-bottom:15px}

/* ── buttons ────────────────────────────── */
.btn{
  appearance:none;font-family:var(--ui);font-weight:650;font-size:14px;
  padding:11px 15px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:filter .15s,background .15s;line-height:1.2;
}
.btn:active{filter:brightness(.94)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-fill{background:var(--reg);color:#fff}
.btn-quiet{background:var(--surface2);color:var(--ink);border-color:var(--rule)}
.btn-line{background:transparent;color:var(--reg);border-color:var(--reg)}
.btn-risk{background:var(--brick-t);color:var(--brick);border-color:transparent}
.btn-ochre{background:var(--ochre-t);color:var(--ochre)}
.btn-wide{width:100%}
.btn-sm{padding:8px 11px;font-size:12.5px;border-radius:8px}
.btn-icon{padding:8px;width:34px;height:34px}
.btn-icon svg{width:16px;height:16px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ── forms ──────────────────────────────── */
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
input,select,textarea{
  width:100%;font-family:var(--ui);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule2);border-radius:var(--r-sm);
  padding:11px 12px;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--reg);box-shadow:0 0 0 3px var(--reg-t)}
input.mono{font-family:var(--num);letter-spacing:.4px}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:11.5px;color:var(--ink3);margin-top:5px;line-height:1.45}

/* ── notices ────────────────────────────── */
.notice{border-radius:var(--r-sm);padding:11px 13px;font-size:13px;line-height:1.5;display:flex;gap:9px;align-items:flex-start}
.notice svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.n-warn{background:var(--ochre-t);color:var(--ochre)}
.n-risk{background:var(--brick-t);color:var(--brick)}
.n-ok{background:var(--reg-t);color:var(--reg-d)}
.n-info{background:var(--surface2);color:var(--ink2)}

/* ── empty state ────────────────────────── */
.empty{text-align:center;padding:34px 18px;color:var(--ink3)}
.empty h3{font-size:15px;font-weight:700;color:var(--ink2);margin-bottom:5px}
.empty p{font-size:13px;line-height:1.55;max-width:34ch;margin:0 auto 14px}

/* ── tags ───────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--num);font-size:10.5px;font-weight:600;
  padding:3px 7px;border-radius:5px;white-space:nowrap;
}
.t-reg{background:var(--reg-t);color:var(--reg-d)}
.t-ochre{background:var(--ochre-t);color:var(--ochre)}
.t-brick{background:var(--brick-t);color:var(--brick)}
.t-plum{background:var(--plum-t);color:var(--plum)}
.t-mute{background:var(--surface2);color:var(--ink3)}

/* BYRcode ek stiller */
.thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;flex-shrink:0;border:1px solid var(--rule);background:var(--surface2)}
#splash{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 40%,#E5202E 0,#9B0E19 55%,#4A060B 100%);
 display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:opacity .5s,visibility .5s}
#splash.out{opacity:0;visibility:hidden}
.sp-bars{display:flex;gap:6px;align-items:flex-end;height:64px;margin-bottom:18px}
.sp-bars i{width:7px;background:#fff;border-radius:2px;height:100%;transform-origin:bottom;transform:scaleY(0);animation:barUp .6s cubic-bezier(.2,.9,.3,1.2) forwards}
.sp-bars i:nth-child(2n){height:72%}.sp-bars i:nth-child(3n){height:88%}
.sp-bars i:nth-child(1){animation-delay:.05s}.sp-bars i:nth-child(2){animation-delay:.12s}.sp-bars i:nth-child(3){animation-delay:.19s}
.sp-bars i:nth-child(4){animation-delay:.26s}.sp-bars i:nth-child(5){animation-delay:.33s}.sp-bars i:nth-child(6){animation-delay:.40s}.sp-bars i:nth-child(7){animation-delay:.47s}
@keyframes barUp{to{transform:scaleY(1)}}
.sp-name{font-size:38px;font-weight:800;letter-spacing:-1px;opacity:0;transform:translateY(10px);animation:nameIn .6s .55s forwards}
.sp-name b{font-weight:800;opacity:.75}
.sp-tag{font-size:13px;opacity:0;margin-top:6px;letter-spacing:.4px;animation:nameIn .6s .8s forwards}
@keyframes nameIn{to{opacity:1;transform:none}}
.sp-prog{width:150px;height:3px;background:rgba(255,255,255,.25);border-radius:9px;margin-top:30px;overflow:hidden}
.sp-prog i{display:block;height:100%;width:40%;background:#fff;border-radius:9px;animation:slide 1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
#loader{position:fixed;inset:0;z-index:9000;background:rgba(20,12,13,.55);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:#fff;font-weight:600;backdrop-filter:blur(3px)}
#loader.on{display:flex}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
#paywall{position:fixed;inset:0;z-index:8000;background:var(--paper);overflow-y:auto;padding:26px 16px 40px;display:none}
#paywall.on{display:block}
.pw{max-width:480px;margin:0 auto}
.pw h1{font-size:25px;font-weight:800;letter-spacing:-.6px;margin:12px 0 4px}
.pw p{color:var(--ink2);font-size:14px;margin:0 0 16px}
.plan-c{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:2px solid var(--rule2);border-radius:13px;padding:15px;margin-bottom:10px;cursor:pointer;position:relative}
.plan-c.best{border-color:var(--reg)}
.plan-c .pn{font-weight:800;font-size:15px}.plan-c .pd{font-size:12px;color:var(--ink3)}
.plan-c .pp{white-space:nowrap;flex-shrink:0;margin-left:10px;font-family:var(--num);font-weight:700;font-size:18px;color:var(--reg)}
.plan-c .bd{position:absolute;top:-9px;right:12px;background:var(--reg);color:#fff;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);display:inline-block;margin-right:6px}
.sync-dot.on{background:#1FA45B;box-shadow:0 0 0 3px rgba(31,164,91,.2)}
/* ── search + filter ────────────────────── */
.searchbar{position:relative;margin-bottom:10px}
.searchbar input{padding-left:36px;font-size:14.5px}
.searchbar svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink3);pointer-events:none}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;margin-bottom:12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  appearance:none;border:1px solid var(--rule2);background:var(--surface);
  color:var(--ink2);font-family:var(--ui);font-size:12.5px;font-weight:600;
  padding:6px 11px;border-radius:99px;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.chip.on{background:var(--reg);border-color:var(--reg);color:#fff}

/* ── product rows ───────────────────────── */
.rows{display:flex;flex-direction:column;gap:8px}
.row{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:12px 13px;display:flex;gap:11px;align-items:flex-start;
}
.row.low{border-left:3px solid var(--ochre)}
.row.out{border-left:3px solid var(--brick)}
.row-main{flex:1;min-width:0;cursor:pointer}
.row-name{font-weight:650;font-size:14.5px;line-height:1.3;word-break:break-word}
.row-code{font-family:var(--num);font-size:11.5px;color:var(--ink3);margin-top:3px;letter-spacing:.3px}
.row-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;align-items:center}
.row-side{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.row-price{font-family:var(--num);font-weight:700;font-size:15px;white-space:nowrap}
.row-stock{font-family:var(--num);font-size:12px;font-weight:600;color:var(--ink2)}
.row-stock.low{color:var(--ochre)}
.row-stock.out{color:var(--brick)}

/* ── cart (POS) ─────────────────────────── */
.cart-item{
  display:flex;gap:10px;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--rule);
}
.cart-item:last-child{border-bottom:none}
.cart-info{flex:1;min-width:0}
.cart-name{font-weight:600;font-size:14px;line-height:1.3}
.cart-unit{font-family:var(--num);font-size:11.5px;color:var(--ink3);margin-top:2px}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--rule2);border-radius:8px;overflow:hidden;flex-shrink:0}
.qty button{
  appearance:none;border:none;background:var(--surface2);color:var(--ink);
  width:30px;height:30px;font-size:17px;font-weight:600;cursor:pointer;line-height:1;
  display:grid;place-items:center;font-family:var(--ui);
}
.qty button:active{background:var(--rule)}
.qty span{
  min-width:34px;text-align:center;font-family:var(--num);font-weight:700;font-size:14px;
  background:var(--surface);
}
.cart-sum{font-family:var(--num);font-weight:700;font-size:14.5px;min-width:74px;text-align:right;flex-shrink:0}
.checkout{
  position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px;box-shadow:var(--lift);margin-top:14px;
}
.checkout-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.checkout-total .l{font-size:14px;font-weight:600;color:var(--ink2)}
.checkout-total .v{font-family:var(--num);font-weight:700;font-size:28px;letter-spacing:-1px;color:var(--reg)}

/* ── scanner ────────────────────────────── */
.scanwrap{
  position:relative;background:#0A0F0D;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center;margin-bottom:11px;
}
.scanwrap video{width:100%;height:100%;object-fit:cover;display:block}
.scan-off{color:#8C9A94;font-size:13px;text-align:center;padding:22px;line-height:1.55}
.reticle{
  position:absolute;inset:18% 12%;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 2000px rgba(10,15,13,.42);
}
.reticle::before,.reticle::after{content:'';position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.5)}
.reticle::before{top:0}.reticle::after{bottom:0}
.reticle span{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.5)}
.reticle span:first-child{left:0}.reticle span:last-child{right:0}
@keyframes sweep{0%,100%{top:8%}50%{top:90%}}
.beam{position:absolute;left:4%;right:4%;height:2px;background:var(--reg);box-shadow:0 0 10px var(--reg);animation:sweep 2.4s ease-in-out infinite;border-radius:2px}

/* ── movement log ───────────────────────── */
.move{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--rule)}
.move:last-child{border-bottom:none}
.move-dot{width:8px;height:8px;border-radius:99px;margin-top:6px;flex-shrink:0}
.move-body{flex:1;min-width:0}
.move-name{font-weight:600;font-size:14px;line-height:1.3}
.move-when{font-family:var(--num);font-size:11px;color:var(--ink3);margin-top:3px}
.move-qty{font-family:var(--num);font-weight:700;font-size:14px;flex-shrink:0}

/* ── bars (report) ──────────────────────── */
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;margin:6px 0 8px}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.bar{width:100%;background:var(--reg);border-radius:4px 4px 2px 2px;min-height:3px;transition:height .35s cubic-bezier(.22,.9,.3,1)}
.bar.dim{background:var(--rule2)}
.bar-lbl{font-family:var(--num);font-size:9.5px;color:var(--ink3);white-space:nowrap}
.legend{display:flex;justify-content:space-between;font-family:var(--num);font-size:11.5px;color:var(--ink2);border-top:1px solid var(--rule);padding-top:10px}

/* ── license tiers ──────────────────────── */
.tier-card{border:1px solid var(--rule);border-radius:var(--r);padding:15px;margin-bottom:11px;background:var(--surface);border-top:3px solid var(--rule)}
.tier-card.basic{border-top-color:var(--reg)}
.tier-card.plus{border-top-color:var(--ochre)}
.tier-card.premium{border-top-color:var(--plum)}
.tier-top{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px}
.tier-name{font-weight:800;font-size:16.5px;letter-spacing:-.3px}
.tier-list li{font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:flex-start;line-height:1.45;padding:3.5px 0}
.tier-list li svg{width:14px;height:14px;flex-shrink:0;margin-top:3px}
.dur-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:11px}
.dur{font-family:var(--num);font-size:11px;text-align:center;padding:6px 2px;border:1px solid var(--rule);border-radius:7px;color:var(--ink2)}
.meter{height:5px;background:var(--surface2);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.meter i{display:block;height:100%;background:var(--reg);border-radius:99px;transition:width .4s}
.meter i.warn{background:var(--ochre)}
.meter i.full{background:var(--brick)}

/* ── modal ──────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:200;background:rgba(43,20,22,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:none;align-items:flex-end;justify-content:center;padding:0;
}
.scrim.on{display:flex}
@media(min-width:560px){.scrim{align-items:center;padding:20px}}
.sheet{
  background:var(--surface);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 40px rgba(43,20,22,.25);
}
@media(min-width:560px){.sheet{border-radius:16px;padding-bottom:22px}}
@keyframes rise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
.scrim.on .sheet{animation:rise .24s cubic-bezier(.22,.9,.3,1)}
.sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.sheet-t{font-weight:800;font-size:18px;letter-spacing:-.3px}
.sheet-x{appearance:none;border:none;background:var(--surface2);color:var(--ink2);width:30px;height:30px;border-radius:99px;cursor:pointer;font-size:16px;line-height:1;flex-shrink:0}

/* ── toast ──────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(14px);z-index:300;
  background:var(--ink);color:var(--paper);padding:11px 17px;border-radius:99px;
  font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.risk{background:var(--brick);color:#fff}
#toast.warn{background:var(--ochre);color:#1a1205}

/* ── label sheet + print ────────────────── */
.labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.label{border:1px dashed var(--rule2);border-radius:8px;padding:9px;text-align:center;background:#fff;color:#111}
.label .ln{font-size:11px;font-weight:700;line-height:1.25;margin-bottom:3px;color:#111}
.label .lp{font-family:var(--num);font-weight:700;font-size:14px;color:#111}
.label svg{max-width:100%;height:auto}
#printArea{display:none}
@media print{
  body{background:#fff}
  #app,.dock,.topbar,#toast,.scrim{display:none!important}
  #printArea{display:block!important;padding:8mm}
  .labels{grid-template-columns:repeat(3,1fr);gap:4mm}
  .label{border:1px dashed #999;break-inside:avoid;page-break-inside:avoid}
  .receipt{font-family:var(--num);max-width:76mm;margin:0 auto;color:#000}
}
.tabular{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ hesap · giriş · yönetici · galeri · QR ═══ */
body:not(.is-admin) .adm-only{display:none!important}
html.auth-open,html.auth-open body{overflow:hidden}
#auth{position:fixed;inset:0;z-index:8500;background:var(--paper);overflow-y:auto;padding:28px 16px 40px;display:none;
  padding-top:max(28px,env(safe-area-inset-top,0px));-webkit-overflow-scrolling:touch}
#auth.on{display:block}
.auth-card{max-width:420px;margin:0 auto}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.auth-name{font-size:21px;font-weight:800;letter-spacing:-.5px}
.auth-name b{color:var(--reg);font-weight:800}
.auth-card h1{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0 0 4px}
.auth-sub{color:var(--ink2);font-size:14px;margin:0 0 18px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface2);padding:4px;border-radius:12px;margin-bottom:18px}
.auth-tabs button{appearance:none;border:none;background:transparent;color:var(--ink2);font:inherit;font-weight:700;font-size:14px;padding:10px 8px;border-radius:9px;cursor:pointer}
.auth-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--lift)}
#auth .reg-only{display:none}
#auth.reg .reg-only{display:block}
#auth #au-msg{margin:4px 0 12px}
.auth-foot{margin-top:16px}

/* ürün galerisi + otomatik kodlar */
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;border-radius:12px;background:var(--surface2);margin-bottom:6px;-webkit-overflow-scrolling:touch}
.gal img{flex:0 0 100%;width:100%;max-height:300px;object-fit:contain;scroll-snap-align:center;display:block;background:#fff}
.gal-dots{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.gal-dots i{width:7px;height:7px;border-radius:99px;background:var(--rule2)}
.gal-dots i.on{background:var(--reg)}
.pdesc{font-size:14px;color:var(--ink2);line-height:1.55;margin:8px 0 14px;white-space:pre-wrap}
.codes{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}
@media(max-width:380px){.codes{grid-template-columns:1fr}}
.code-box{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:8px;display:flex;align-items:center;justify-content:center;min-width:0}
.code-box svg{max-width:100%;height:auto}
.code-box.qr{padding:6px}
.label .lq{display:flex;justify-content:center;margin-top:3px}

/* ürün formu: fotoğraf ızgarası, referans seçimi */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pgrid:empty{display:none}
.pth{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface2);border:1px solid var(--rule)}
.pth img{width:100%;height:100%;object-fit:cover;display:block}
.pth button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:99px;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:11px;cursor:pointer;line-height:1}
.field textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--rule2);border-radius:var(--r-sm);padding:10px 12px;resize:vertical;min-height:70px}
.refpick{display:flex;flex-direction:column;gap:2px;max-height:150px;overflow-y:auto;border:1px solid var(--rule);border-radius:10px;padding:4px 10px}
.refpick label{display:flex;gap:9px;align-items:center;padding:7px 0;margin:0;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer}
.refpick input{width:17px;height:17px;accent-color:var(--reg);flex-shrink:0}
.refpick em{color:var(--ink3);font-style:normal;font-size:12.5px}

/* havale QR */
.havale{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface2);border-radius:12px;padding:12px}
.qrbox{background:#fff;padding:6px;border-radius:10px;border:1px solid var(--rule);flex-shrink:0;line-height:0}
.havale-info{flex:1;min-width:170px}
.havale-info .hn{font-weight:700;font-size:14px}
.havale-info .hi{font-size:12.5px;color:var(--ink2);word-break:break-all;margin:2px 0 4px}
.havale-info .ha{font-size:13.5px;color:var(--ink2)}
.havale-info .ha b{color:var(--ink);font-family:var(--num)}