:root{
  --paper:#eef0e9;      --card:#fbfbf7;    --ink:#161f1b;
  --pine:#0e3b2e;       --pine-2:#155c46;  --accent:#ff7a1a;
  --amber:#ffb020;      --line:#d7dbcf;    --muted:#5b6a61;
  --num-tint:#f2f7ef;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:400 15px/1.5 'IBM Plex Sans',system-ui,sans-serif;
  min-height:100vh;
}
::selection{background:var(--accent);color:#fff}

body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 400px at 85% -10%, rgba(14,59,46,.08), transparent 60%),
    linear-gradient(transparent 31px, rgba(14,59,46,.055) 32px) 0 0/100% 32px,
    linear-gradient(90deg, transparent 31px, rgba(14,59,46,.055) 32px) 0 0/32px 100%;
}
body::after{
  content:"№"; position:fixed; right:-60px; bottom:-110px; z-index:-1;
  font:900 430px/1 'Unbounded',sans-serif; color:rgba(14,59,46,.05);
  pointer-events:none;
}

.topbar{
  background:var(--pine); color:#e8f1ea; position:relative;
  padding:30px 44px 26px;
}
.topbar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--amber) 45%, transparent 90%);
}
.kicker{
  font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.24em;
  text-transform:uppercase; color:#ffb15e; display:inline-flex; align-items:center; gap:12px;
}
.kicker::before,.kicker::after{content:""; width:34px; height:2px; background:var(--accent)}
h1{
  margin:10px 0 8px; font:900 clamp(26px,3.4vw,42px)/1.05 'Unbounded',sans-serif;
  letter-spacing:-.01em;
}
h1 em{font-style:normal; color:#ffb15e}
.brand-sub{margin:0; font-size:13px; color:rgba(232,241,234,.72); max-width:560px}

main{max-width:1060px; margin:0 auto; padding:26px 24px 60px}

.toolbar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:16px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font:500 11px/1 'JetBrains Mono',monospace; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:7px 10px;
}
kbd{
  font:700 10px 'JetBrains Mono',monospace; background:var(--paper);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:2px 5px;
}

.btn{
  font:600 13px 'IBM Plex Sans',sans-serif; padding:10px 16px; border-radius:7px;
  border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pine); color:#fff}
.btn-primary:hover{background:var(--pine-2); transform:translateY(-1px);
                   box-shadow:0 8px 18px rgba(14,59,46,.28)}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--pine); color:var(--pine); transform:translateY(-1px);
                 box-shadow:0 6px 14px rgba(22,31,27,.1)}

.fab-bar{
  position:fixed; left:16px; bottom:16px; z-index:90;
  display:flex; gap:10px;
}
.btn-scan{
  background:var(--accent); color:#fff; padding:13px 18px;
  box-shadow:0 10px 24px rgba(255,122,26,.45);
}

.btn-scan:hover{background:#e5660a; transform:translateY(-2px);
                box-shadow:0 14px 30px rgba(255,122,26,.55)}

.btn-logout{
  position:absolute; top:14px; right:16px;
  background:transparent; color:rgba(232,241,234,.75);
  border:1px solid rgba(232,241,234,.35); padding:8px 14px;
}
.btn-logout:hover{color:#fff; border-color:#fff; background:rgba(255,255,255,.08);
                  transform:none; box-shadow:none}

.sheet{
  background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 12px 32px rgba(22,31,27,.09), inset 0 1px 0 #fff;
}
.table-scroll{max-height:64vh; overflow:auto}
table{width:100%; border-collapse:collapse; table-layout:auto}

thead th{
  position:sticky; top:0; z-index:2; background:var(--pine); color:#dcebe2;
  font:600 11px/1 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.14em;
  text-align:left; padding:13px 14px; white-space:nowrap;
}
thead th.c-seq, thead th.c-table, thead th.c-qty, thead th.c-date{
  box-shadow:inset 3px 0 0 var(--accent); width:1%;
}
thead th.c-act{width:46px}

tbody td{border-bottom:1px solid var(--line); padding:0; transition:background .15s}
td.c-seq, td.c-table, td.c-qty, td.c-date{background:var(--num-tint); width:1%; white-space:nowrap}

.qty-x{
  font:700 13px/1 'JetBrains Mono',monospace; color:var(--muted);
  padding-left:12px; user-select:none;
}
td.c-qty input{padding-left:6px}

tbody tr{transition:background .15s, box-shadow .15s; box-shadow:inset 3px 0 0 transparent}
tbody tr:hover{background:#f3f6ee; box-shadow:inset 3px 0 0 var(--accent)}

#tbody.bind-mode tr{cursor:crosshair}
#tbody.bind-mode tr:hover{background:#ffe9d3; box-shadow:inset 3px 0 0 var(--amber)}

td input{
  width:auto; border:0; outline:none; background:transparent;
  padding:13px 12px; color:var(--ink);
  font:500 15px/1.3 'JetBrains Mono',monospace; letter-spacing:.06em;
  transition:background .15s, box-shadow .15s;
}
td.c-qty input, td.c-date input{font-size:13.5px}
td textarea{
  display:block; width:100%; border:0; outline:none; background:transparent;
  padding:13px 12px; color:var(--ink); resize:none; overflow:hidden;
  font:400 14.5px/1.45 'IBM Plex Sans',sans-serif; min-height:46px;
  transition:background .15s, box-shadow .15s;
}
td textarea:focus{background:#fff; box-shadow:inset 0 -2px 0 var(--accent)}
td input::placeholder, td textarea::placeholder{color:#a9b3a5; letter-spacing:.04em}
td input:focus{background:#fff; box-shadow:inset 0 -2px 0 var(--accent)}
td.warn input{box-shadow:inset 0 -2px 0 var(--amber)}

.del{
  width:28px; height:28px; border:0; border-radius:6px; cursor:pointer;
  background:transparent; color:#9aa79b; display:grid; place-items:center;
  opacity:0; transition:opacity .15s, background .15s, color .15s; margin:0 auto;
}
tr:hover .del{opacity:1}
.del:hover{background:#fde8e8; color:#c92a2a}

.row-enter{animation:rowIn .3s ease}
@keyframes rowIn{from{opacity:0; transform:translateY(-8px)}}
.row-exit{animation:rowOut .18s ease forwards}
@keyframes rowOut{to{opacity:0; transform:translateX(16px)}}
tr.flash{animation:flashBg .8s ease}
@keyframes flashBg{0%{background:#ffe9d3}100%{background:transparent}}
tr.found{animation:foundPulse 2.4s ease}
@keyframes foundPulse{
  0%,100%{background:transparent; box-shadow:inset 3px 0 0 transparent}
  10%,70%{background:#ffe3c2; box-shadow:inset 3px 0 0 var(--accent)}
}

tr.overdue td.c-date input{color:#c92a2a; font-weight:600}
tr.overdue{box-shadow:inset 3px 0 0 #e04a4a}
tr.overdue:hover{box-shadow:inset 3px 0 0 #c92a2a}

.foot{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  margin-top:14px; font:400 12px 'JetBrains Mono',monospace; color:var(--muted);
}

/* ── окно сканера ── */
.scan-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(12,22,17,.8);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.scan-overlay.show{opacity:1; pointer-events:auto}
.scan-card{
  width:min(94vw,430px); background:var(--card); border-radius:12px; padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.97); transition:transform .22s;
}
.scan-overlay.show .scan-card{transform:none}
.scan-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.scan-title{
  font:700 12px/1 'JetBrains Mono',monospace; text-transform:uppercase;
  letter-spacing:.16em; color:var(--pine);
}
.scan-close{
  border:0; background:transparent; font-size:15px; cursor:pointer; color:var(--muted);
  width:30px; height:30px; border-radius:6px; transition:background .15s, color .15s;
}
.scan-close:hover{background:var(--paper); color:var(--ink)}

#qr-reader{
  width:min(100%, 340px); height:230px;
  margin:0 auto; position:relative;
  border-radius:10px; overflow:hidden; background:#000;
}
#qr-reader__dashboard_section{display:none!important}
#qr-reader__scan_region{width:100%!important; height:100%!important}
#qr-reader video{
  width:100%!important; height:100%!important;
  object-fit:cover; display:block;
}

.scan-zoom{display:flex; align-items:center; gap:10px; margin-top:10px;
           font:500 11px 'JetBrains Mono',monospace; color:var(--muted)}
.scan-zoom input[type=range]{flex:1; accent-color:var(--accent)}

.scan-manual{display:flex; gap:8px; margin-top:10px}
.scan-manual input{
  flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:7px;
  font:500 14px 'JetBrains Mono',monospace; background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.scan-manual input:focus{border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,122,26,.18)}

.scan-status{margin:12px 2px 0; font:500 13px 'JetBrains Mono',monospace;
             color:var(--muted); min-height:19px}
.scan-status.ok{color:#1c7c3f}
.scan-status.miss{color:#c2410c}
.scan-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.hidden{display:none!important}

/* ── экран ввода пароля ── */
.login-overlay{
  position:fixed; inset:0; z-index:200; background:var(--pine);
  display:flex; align-items:center; justify-content:center; padding:20px;
  transition:opacity .3s;
}
.login-overlay.hide{opacity:0; pointer-events:none}
.login-overlay::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
}
.login-card{
  position:relative; width:min(92vw,360px); background:var(--card);
  border-radius:12px; padding:30px 26px 24px; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.login-card.shake{animation:shake .4s}
@keyframes shake{
  20%{transform:translateX(-9px)} 40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}
.login-icon{display:block; margin:0 auto 12px}
.login-title{font:700 19px/1.2 'Unbounded',sans-serif; color:var(--pine)}
.login-sub{font:400 11px/1.4 'JetBrains Mono',monospace; color:var(--muted);
           letter-spacing:.08em; margin:8px 0 20px; text-transform:uppercase}
.login-card input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  font:500 16px 'JetBrains Mono',monospace; text-align:center; letter-spacing:.25em;
  color:var(--ink); background:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.login-card input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,26,.18)}
.login-btn{width:100%; justify-content:center; margin-top:12px; padding:12px 16px}
.login-error{color:#c92a2a; font:500 12px 'JetBrains Mono',monospace;
             min-height:16px; margin-top:12px}

.toast{
  position:fixed; right:24px; bottom:24px; z-index:150; pointer-events:none;
  background:var(--ink); color:#f2f5ef; border-left:3px solid var(--accent);
  font:500 13px 'JetBrains Mono',monospace; padding:12px 18px; border-radius:8px;
  opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:none}

/* ══════════ МОБИЛЬНАЯ ВЕРСИЯ ══════════ */
@media (max-width:760px){
  .topbar{padding:24px 20px}
  main{padding:20px 12px 80px}

  .sheet{background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible}
  .table-scroll{max-height:none; overflow:visible}
  thead{display:none}

  tbody, table, table tbody{display:block}
  tbody tr{
    display:block; position:relative;
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    margin:0 0 12px; padding:8px 44px 8px 10px;
    box-shadow:0 2px 8px rgba(22,31,27,.06);
  }
  tbody tr:hover{background:var(--card)}

  tbody td{
    display:flex; align-items:center; gap:8px;
    border-bottom:0; padding:3px 4px;
  }
  td.c-seq, td.c-table, td.c-qty, td.c-date{width:auto; white-space:normal; background:transparent}
  tbody td:not(.c-act)::before{
    content:attr(data-label);
    flex:0 0 92px;
    font:600 9px/1.25 'JetBrains Mono',monospace;
    text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  }
  td input, td textarea{width:100%; padding:10px 8px; border-radius:6px; background:#fff;
           border:1px solid var(--line)}
  td input:focus, td textarea:focus{border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,122,26,.18)}
  td.warn input{border-color:var(--amber)}
  .qty-x{padding-left:0}
  td.c-qty input{flex:0 0 64px}
  td.c-note{margin-top:4px; border-top:1px dashed var(--line); padding-top:8px}
  td.c-note::before{flex-basis:92px}
  td.c-note, td.c-note textarea{align-items:flex-start}

  td.c-act{position:absolute; top:6px; right:6px; padding:0}
  .del{opacity:.7}

  .foot{flex-direction:column; align-items:flex-start; gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}