:root{
  --bg:#EEF4FB; --surface:#FFFFFF; --surface-2:#F6F9FE;
  --primary:#1E6FD9; --primary-d:#1557AB; --primary-soft:#DCEAFB;
  --ink:#14283C; --muted:#5E7590; --line:#D8E3F0;
  --amber:#E39A16; --amber-soft:#FCEFD3;
  --blue:#1E6FD9; --blue-soft:#DCEAFB;
  --green:#1F9D63; --green-soft:#D7F0E3;
  --danger:#D64545;
  --radius:18px; --shadow:0 8px 26px rgba(21,87,171,.12);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  min-height:100dvh;
}
.wrap{max-width:480px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column}
button{font-family:inherit; cursor:pointer}
.hidden{display:none !important}

/* ---------- Login ---------- */
.login{flex:1; display:flex; flex-direction:column; justify-content:center; padding:28px 22px calc(28px + env(safe-area-inset-bottom))}
.brand{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:28px}
.brand img{width:76px; height:76px; border-radius:20px; box-shadow:var(--shadow)}
.brand h1{font-size:20px; margin:0; text-align:center; letter-spacing:.2px}
.brand p{margin:2px 0 0; color:var(--muted); font-size:13px; text-align:center}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
label.fld{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:0 0 6px; letter-spacing:.3px; text-transform:uppercase}
input,select,textarea{
  width:100%; padding:14px 14px; font-size:16px; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; outline:none;
  -webkit-appearance:none; appearance:none;
}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235E7590' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px}
input:focus,select:focus,textarea:focus{border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-soft)}
.field + .field{margin-top:14px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:none; border-radius:14px; padding:15px; font-size:16px; font-weight:700; background:var(--primary); color:#fff; transition:transform .06s ease, background .15s}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.6}
.btn.secondary{background:var(--primary-soft); color:var(--primary-d)}
.btn.ghost{background:transparent; color:var(--primary-d); box-shadow:none}
.btn.danger{background:#fff; color:var(--danger); border:1.5px solid var(--line)}
.err{color:var(--danger); font-size:13.5px; margin-top:12px; text-align:center; min-height:18px}

/* ---------- App shell ---------- */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px; background:rgba(238,244,251,.9); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.topbar img{width:34px; height:34px; border-radius:9px}
.topbar .t{flex:1; min-width:0}
.topbar .t b{display:block; font-size:14.5px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .t span{display:block; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon-btn{width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); border-radius:11px; color:var(--primary-d)}
.icon-btn svg{width:20px; height:20px}
.mode-badge{flex:none; font-size:10.5px; font-weight:700; letter-spacing:.3px; padding:4px 8px; border-radius:999px; white-space:nowrap; display:flex; align-items:center; gap:5px}
.mode-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.mode-badge.live{background:var(--green-soft); color:#136B41}
.mode-badge.demo{background:var(--amber-soft); color:#8A5A0B}

.content{flex:1; padding:16px 16px calc(28px + env(safe-area-inset-bottom))}

.presence{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.pres{display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.pres .dot{width:11px; height:11px; border-radius:50%; flex:none}
.pres b{display:block; font-size:13.5px; line-height:1.15}
.pres small{font-size:11px; color:var(--muted)}
.pres.on{background:var(--green-soft); border-color:#B9E3CC}
.pres.on .dot{background:var(--green); box-shadow:0 0 0 3px rgba(31,157,99,.18)}
.pres.on b{color:#136B41}
.pres.no{background:#FCE9E9; border-color:#F2C9C9}
.pres.no .dot{background:var(--danger)}
.pres.no b{color:#A32A2A}
.pres.off .dot{background:#B4C0CE}
.pres.off b{color:var(--muted)}

.submit-cta{width:100%; border:none; border-radius:20px; padding:22px 18px; color:#fff;
  background:linear-gradient(160deg,var(--primary),var(--primary-d)); box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px; text-align:left; transition:transform .07s}
.submit-cta:active{transform:scale(.99)}
.submit-cta .plus{width:46px; height:46px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.18); border-radius:14px}
.submit-cta .plus svg{width:26px; height:26px}
.submit-cta b{font-size:18px; display:block}
.submit-cta small{opacity:.85; font-size:12.5px}

.banner{margin-top:14px; display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; background:var(--amber-soft); border:1px solid #F3DFB0; color:#7A5410}
.banner svg{width:18px; height:18px; flex:none}
.banner .bt{flex:1; font-size:13.5px; font-weight:600}
.banner button{border:none; background:#fff; color:#7A5410; font-weight:700; font-size:12.5px; padding:8px 11px; border-radius:9px; white-space:nowrap}

.sec-head{display:flex; align-items:baseline; justify-content:space-between; margin:22px 2px 10px}
.sec-head h2{font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:0}
.sec-head .count{font-size:12px; color:var(--muted)}

.empty{text-align:center; color:var(--muted); padding:34px 16px; background:var(--surface); border:1px dashed var(--line); border-radius:16px}
.empty svg{width:40px; height:40px; opacity:.5; margin-bottom:8px}
.empty p{margin:0; font-size:14.5px}

.list{display:flex; flex-direction:column; gap:12px}
.req{background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 3px 12px rgba(21,87,171,.05)}
.req.new-dot{box-shadow:0 0 0 2px #F3DFB0, 0 3px 12px rgba(21,87,171,.05)}

/* приключени: зелен фон + свиване до един ред */
.req.done{background:var(--green-soft); border-color:#B9E3CC; border-left-color:#5FBF8E !important; padding:0}
.req.done .req-head{display:flex; align-items:center; gap:9px; width:100%; padding:12px 14px; background:none; border:none; text-align:left; color:var(--ink)}
.req.done .req-head .zag{flex:1; font-weight:700; font-size:14.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.req.done .req-head .dot{width:9px; height:9px; border-radius:50%; flex:none}
.req.done .chev{width:18px; height:18px; color:#136B41; flex:none; transition:transform .2s}
.req.done.collapsed .chev{transform:rotate(-90deg)}
.req.done.collapsed .req-body{display:none}
.req.done .req-body{padding:0 14px 14px}
.req.done .foot{border-top-color:#BFE6D0}

/* архивна секция */
.arch-toggle{display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:16px 2px 6px; color:var(--muted); font-size:13px; letter-spacing:.6px; text-transform:uppercase; font-weight:700}
.arch-toggle .chev{width:16px; height:16px; transition:transform .2s}
.arch-toggle.open .chev{transform:rotate(90deg)}
.arch-list{display:flex; flex-direction:column; gap:10px}
.empty.small{padding:20px 16px; font-size:13.5px}

/* Бутон Архив на главния екран */
.archive-open{margin-top:14px; display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--line); color:var(--primary-d); font-weight:700; font-size:14.5px}
.archive-open svg{width:20px; height:20px; color:var(--muted); flex:none}
.archive-open b{margin-left:auto; background:var(--primary-soft); color:var(--primary-d); font-size:12.5px; padding:3px 10px; border-radius:999px}

/* Архивен екран: контроли, филтри, месеци */
.arch-controls{display:flex; flex-direction:column; gap:10px; margin-bottom:6px}
.arch-filters{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.arch-filters #fltMonth{grid-column:1 / -1}
.arch-controls select{font-size:14px; padding:12px 34px 12px 12px}
.month-head{font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); font-weight:700; margin:16px 2px 2px}
#archResults{display:flex; flex-direction:column; gap:10px}
.req .r1{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.req .r1 .zag{font-weight:700; font-size:15.5px; flex:1; line-height:1.25}
.badge{font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap}
.badge.b-new{background:var(--amber-soft); color:#8A5A0B}
.badge.b-prog{background:var(--blue-soft); color:var(--primary-d)}
.badge.b-done{background:var(--green-soft); color:#136B41}
.meta{display:flex; flex-wrap:wrap; gap:6px 8px; margin-bottom:4px}
.chip{font-size:12px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); padding:4px 9px; border-radius:8px}
.chip b{color:var(--muted); font-weight:600}
.req .note{font-size:13.5px; color:#34506B; margin:8px 0 0; white-space:pre-wrap}
.req .foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.req .foot .when{font-size:12px; color:var(--muted)}
.req .foot select{width:auto; padding:8px 30px 8px 11px; font-size:13px; border-radius:9px}

/* ---------- Sheet ---------- */
.scrim{position:fixed; inset:0; background:rgba(15,33,54,.42); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s}
.scrim.open{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:50; max-width:480px; margin:0 auto;
  background:var(--surface); border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(15,33,54,.25);
  transform:translateY(100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:92dvh; display:flex; flex-direction:column}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:42px; height:5px; border-radius:3px; background:var(--line); margin:10px auto 4px}
.sheet .sh-head{display:flex; align-items:center; gap:10px; padding:6px 18px 12px; border-bottom:1px solid var(--line)}
.sheet .sh-head h3{margin:0; font-size:17px; flex:1}
.sheet .sh-body{padding:16px 18px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto}
.step{opacity:0; max-height:0; overflow:hidden; transition:opacity .25s, max-height .3s}
.step.show{opacity:1; max-height:400px; margin-bottom:16px}
.close-x{width:34px;height:34px;border:none;background:var(--surface-2);border-radius:9px;color:var(--muted);display:grid;place-items:center}
.close-x svg{width:18px;height:18px}
.hint{font-size:12px; color:var(--muted); margin:6px 2px 0}

/* Settings (admin) */
.opt-group{margin-bottom:20px}
.opt-group > h4{margin:0 0 8px; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
.opt-row{display:flex; align-items:center; gap:8px; padding:9px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; margin-bottom:7px}
.opt-row.inactive{opacity:.5}
.opt-row .oname{flex:1; border:none; background:transparent; font-size:14.5px; padding:4px 2px}
.opt-row .oname:focus{background:#fff; border-radius:6px; box-shadow:0 0 0 2px var(--primary-soft)}
.mini{width:32px; height:32px; border:none; border-radius:8px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--muted)}
.mini svg{width:16px; height:16px}
.mini.on{color:var(--green); border-color:var(--green-soft); background:var(--green-soft)}
.mini.del{color:var(--danger)}
.add-row{display:flex; gap:8px; margin-top:8px}
.add-row input{padding:11px 12px; font-size:14.5px}
.add-row button{flex:none; padding:0 16px; border:none; border-radius:11px; background:var(--primary); color:#fff; font-weight:700}
.numtoggle{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); user-select:none}

.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600; z-index:70; opacity:0; transition:.25s; box-shadow:var(--shadow); max-width:90%}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.spin{display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}

/* ---------- Склад (admin) ---------- */
.stock-cta-row{display:flex; gap:10px; margin-bottom:22px}
.stock-cta-row .btn{flex:1}
.btn.issue{background:var(--amber-soft); color:#8A5A0B}
.stock-add{margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.stock-add h4{margin:0 0 8px; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
.stock-add .row2{display:flex; gap:8px}
.stock-add .row2 input{flex:1}
.cam-row{display:flex; gap:8px; margin-top:8px}
.cam-row button{flex:1; padding:11px; border:none; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); color:var(--primary-d); font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:6px}
.cam-row button svg{width:17px;height:17px}
.cam-row button:disabled{opacity:.6}
.stock-add .add-row{margin-top:10px}
.stock-list h4{margin:0 0 10px; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
.stock-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px}
.stock-item.inactive{opacity:.5}
.stock-item .si-head{display:flex; align-items:flex-start; gap:8px; margin-bottom:10px}
.stock-item .si-t{flex:1; min-width:0}
.stock-item .si-code{font-weight:700; font-size:14.5px; display:block}
.stock-item .si-name{font-size:12.5px; color:var(--muted); display:block}
.stock-item .si-cat{display:inline-block; margin-top:3px; font-size:10.5px; color:var(--primary-d); background:var(--primary-soft); padding:2px 7px; border-radius:999px}
.stock-qty{display:flex; gap:8px; margin-bottom:10px}
.stock-qty .q{flex:1; display:flex; flex-direction:column; align-items:center; padding:8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.stock-qty .q b{font-size:17px; line-height:1.3}
.stock-qty .q small{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px}
.stock-qty .q.zero b{color:var(--danger)}
.stock-actions{display:flex; gap:8px}
.stock-actions button{flex:1; border:none; border-radius:10px; padding:9px; font-weight:700; font-size:13px}
.stock-actions .mv-in{background:var(--green-soft); color:#136B41}
.stock-actions .mv-out{background:var(--amber-soft); color:#8A5A0B}
.stock-item .mini{width:30px; height:30px}
.mv-ctx{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:14px; font-size:13.5px}
.mv-ctx b{display:block; font-size:14.5px}
/* ===== СКЛАД — допълнителни стилове ===== */
.stock-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.stock-cta-row .btn {
  padding: 12px 6px;
  font-size: 14px;
}
.stock-cta-row .btn.secondary {
  background: #EEF4FB;
  color: #1E6FD9;
}

.cam-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 12px;
}
.cam-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid #1E6FD9;
  border-radius: 10px;
  background: #fff;
  color: #1E6FD9;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cam-row button svg {
  width: 18px;
  height: 18px;
}
.cam-row button:active {
  background: #EEF4FB;
}

.stock-add .hint {
  font-size: 12px;
  color: #6C8AA8;
  margin: 4px 0 10px;
}

.month-head {
  font-size: 13px;
  font-weight: 700;
  color: #1E6FD9;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #D6E3F0;
}

/* ===== БАРКОД/QR СКЕНЕР ===== */
.scanner-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.scanner-overlay.hidden {
  display: none;
}
.scanner-box {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.scanner-header b {
  font-size: 16px;
  color: #0D2A4C;
}
.scanner-header .close-x {
  width: 32px;
  height: 32px;
  border: none;
  background: #EEF4FB;
  border-radius: 50%;
  color: #1E6FD9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.scanner-header .close-x svg {
  width: 18px;
  height: 18px;
}
#scannerTarget video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}