:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --accent:#D0FB44;
  --accent-ink:#000000;
  --brick:#B7472A;
  --brick-ink:#FFFFFF;
  --ink-soft:#555555;
  --line:#000000;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family:'Manrope', system-ui, sans-serif;
  min-height:100vh;
  padding-bottom:60px;
}

h1,h2,h3{ font-family:'Manrope', sans-serif; margin:0; font-weight:800; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.muted{ color: var(--ink-soft); font-size:13px; }
.opt{ text-transform:none; font-weight:500; }

/* ===== Header ===== */
header{
  padding: 22px 24px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--ink);
  position: sticky; top:0; z-index:20;
}
.header-row{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:12px; flex:1 1 240px; }
.logo{ height:38px; width:auto; }
.logo-fallback{ align-items:center; justify-content:center; }
.brand-text h1{ font-size:24px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-0.02em; }
.brand-text span{ display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; font-weight:600; }

.add-btn{
  background: var(--accent); color: var(--accent-ink); border:1px solid var(--ink); border-radius:0;
  padding: 12px 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; display:flex; align-items:center; gap:8px; transition: background .12s ease;
}
.add-btn:hover{ background:#c2ee36; }

.print-btn{
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius:0;
  padding: 12px 16px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; display:flex; align-items:center; gap:8px; transition: background .12s ease;
}
.print-btn:hover{ background:#f2f2f2; }
.scan-btn-black{ background: var(--ink); color:#fff; border-color: var(--ink); }
.scan-btn-black:hover{ background:#222; }

.toolbar{ max-width:1100px; margin:18px auto 0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.search-wrap{ position:relative; flex:1 1 220px; }
.search-wrap input{
  width:100%; padding:10px 14px 10px 36px; border-radius:0; border:1px solid var(--ink);
  background: var(--paper); font-family:'Manrope',sans-serif; font-size:14px; color:var(--ink);
}
.search-wrap input:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.search-wrap svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:0.7; }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab{
  border:1px solid var(--ink); background:var(--paper); padding:9px 14px; border-radius:0;
  font-family:'Manrope',sans-serif; font-size:13px; cursor:pointer; color:var(--ink); font-weight:700;
  transition: all .12s ease;
}
.tab.active{ background: var(--accent); color: var(--accent-ink); }

/* ===== Summary ===== */
.summary{
  max-width:1100px; margin:20px auto 0; padding:0 24px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:12px;
}
.summary-card{ background: var(--surface); border:1px solid var(--ink); border-radius:0; padding:14px 16px; }
.summary-card.alert{ background: var(--brick); border-color: var(--brick); }
.summary-card .num{ font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:700; }
.summary-card .lbl{ font-size:11px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin-top:3px; font-weight:600; }
.summary-card.alert .num, .summary-card.alert .lbl{ color: var(--brick-ink); }

/* ===== Grid & cards ===== */
main{ max-width:1100px; margin:24px auto 0; padding:0 24px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap:16px; }

.tag{
  position:relative; background: var(--surface); border:1px solid var(--ink); border-radius:0;
  padding:18px 18px 14px; transition: border-color .12s ease;
}
.tag:hover{ border-color: var(--ink); }

.tag .cat-lbl{ font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color: var(--ink-soft); font-weight:700; }
.tag h3{ font-size:18px; font-weight:800; margin:6px 0 10px; line-height:1.2; word-break:break-word; }
.tag .species-chip{
  display:inline-block; font-size:11px; background: var(--paper); color: var(--ink); border:1px solid var(--ink);
  padding:2px 8px; border-radius:0; margin-bottom:8px; font-weight:700;
}

.tag .qty-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.tag .qty-row .qty{ font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:700; }
.tag .qty-row .unit{ font-size:13px; color: var(--ink-soft); font-weight:600; }

.tag .meta{ font-size:12.5px; color: var(--ink-soft); display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.tag .meta b{ color: var(--ink); font-weight:700; }

.low-flag{
  position:absolute; top:-1px; right:-1px; background: var(--brick); color: var(--brick-ink);
  border:1px solid var(--brick);
  font-size:10px; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px;
  border-radius:0; font-weight:800;
}

.tag-actions{ display:flex; gap:8px; border-top:1px dashed var(--ink); padding-top:10px; margin-top:2px; }
.icon-btn{
  background: var(--paper); border:1px solid var(--ink); border-radius:0; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink);
  transition: all .12s ease;
}
.icon-btn:hover{ background: var(--accent); }
.icon-btn.danger:hover{ background: var(--brick); color:#fff; border-color: var(--brick); }

/* ===== Empty / loading ===== */
.empty, .loading{ text-align:center; padding:70px 20px; color: var(--ink-soft); }
.empty h2{ color: var(--ink); font-size:20px; margin:16px 0 6px; font-weight:800; }
.empty p{ font-size:14px; max-width:360px; margin:0 auto; }
.loading{ display:none; font-size:14px; }

/* ===== Modal ===== */
.overlay{
  position:fixed; inset:0; background: rgba(0,0,0,0.55); display:none;
  align-items:flex-start; justify-content:center; padding:30px 16px; overflow-y:auto; z-index:50;
}
.overlay.open{ display:flex; }
.slip{
  background: var(--surface); width:100%; max-width:440px; border-radius:0; border:1px solid var(--ink);
  margin-top:20px;
}
.slip-inner{ padding:26px 24px 22px; }
.slip h2{ font-size:20px; margin-bottom:18px; font-weight:800; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); margin-bottom:5px; font-weight:700; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:0; border:1px solid var(--ink);
  background: var(--paper); font-family:'Manrope',sans-serif; font-size:14px; color: var(--ink);
}
.field textarea{ resize:vertical; min-height:70px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }

.species-row{ display:flex; gap:8px; }
.species-row select{ flex:1; }
.mini-btn{
  background: var(--paper); border:1px solid var(--ink); border-radius:0; padding:0 12px;
  font-size:12.5px; font-weight:700; color: var(--ink); cursor:pointer; white-space:nowrap;
}
.mini-btn.primary{ background: var(--accent); color: var(--accent-ink); }
.mini-btn:hover{ background: var(--accent); }
.inline-add{ display:flex; gap:8px; margin-top:8px; }
.inline-add input{ flex:1; padding:8px 10px; border-radius:0; border:1px solid var(--ink); }

.form-actions{ display:flex; gap:10px; margin-top:20px; }
.btn{ flex:1; padding:12px; border-radius:0; border:1px solid var(--ink); cursor:pointer; font-weight:700; font-size:14px; transition: background .12s ease; }
.btn.primary{ background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover{ background:#c2ee36; }
.btn.ghost{ background: var(--paper); color: var(--ink); }
.btn.ghost:hover{ background:#f2f2f2; }

.hint{ font-size:12px; color: var(--ink-soft); }

.check-list{ max-height:320px; overflow-y:auto; border:1px solid var(--ink); border-radius:0; margin-bottom:14px; }
.check-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px dashed var(--ink); font-size:13.5px; }
.check-row:last-child{ border-bottom:none; }
.check-row input{ width:16px; height:16px; accent-color: var(--accent); flex-shrink:0; }
.check-row .cr-name{ flex:1; font-weight:600; }
.check-row .cr-cat{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); font-family:'IBM Plex Mono',monospace; }
.select-all-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.select-all-row button{ background:none; border:none; color: var(--ink); font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:underline; }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff; padding:11px 20px; border-radius:0; font-size:13px; font-weight:600;
  opacity:0; transition: all .25s ease; z-index:60; border:1px solid var(--ink);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Print labels ===== */
#printArea{ display:none; }
@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ display:block; position:absolute; top:0; left:0; width:100%; }
  @page{ margin:8mm; }
}
.label-sheet{ display:flex; flex-wrap:wrap; gap:4mm; }
.label{
  width:55mm; min-height:30mm; border:1px solid #000; border-radius:0; padding:3mm;
  display:flex; gap:3mm; align-items:center; page-break-inside:avoid; box-sizing:border-box;
  font-family:'Manrope',sans-serif;
}
.label .qr-box{ flex-shrink:0; width:22mm; height:22mm; }
.label .qr-box img, .label .qr-box canvas{ width:100% !important; height:100% !important; }
.label .label-text{ flex:1; min-width:0; }
.label .l-name{ font-weight:800; font-size:11pt; line-height:1.15; word-break:break-word; }
.label .l-cat{ font-size:7.5pt; color:#333; text-transform:uppercase; letter-spacing:0.04em; margin-top:1mm; font-weight:600; }
.label .l-qty{ font-family:'IBM Plex Mono',monospace; font-size:9pt; margin-top:1.5mm; font-weight:700; }

/* ===== Scan modal ===== */
.scan-slip{ max-width:400px; }
.scan-frame{
  position:relative; width:100%; aspect-ratio:1/1; background:#000; border-radius:0;
  overflow:hidden; margin-bottom:14px; border:1px solid var(--ink);
}
.scan-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.scan-guide{
  position:absolute; inset:14%; border:2px solid var(--accent); border-radius:0;
  box-shadow: 0 0 0 999px rgba(0,0,0,0.35);
}

@media (max-width:520px){
  .brand-text h1{ font-size:20px; }
  .add-btn span, .print-btn span{ display:none; }
  .summary{ grid-template-columns: repeat(3,1fr); }
  .logo{ height:26px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ===== Login screen ===== */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--paper); padding:20px;
}
.login-box{
  width:100%; max-width:340px; border:1px solid var(--ink); padding:32px 26px; text-align:center;
  background: var(--surface);
}
.login-box h1{ font-size:26px; margin-bottom:4px; }
.login-sub{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-soft); font-weight:600; }
.login-error{ color: var(--brick); font-size:13px; font-weight:700; margin:10px 0 0; }

/* ===== Wood calc preview ===== */
.calc-box{
  border:1px solid var(--ink); padding:10px 12px; margin-bottom:14px;
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.calc-box > div{ display:flex; flex-direction:column; gap:2px; }
.calc-box span{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); font-weight:600; }
.calc-box b{ font-family:'IBM Plex Mono',monospace; font-size:14px; }

/* ===== Species group headers ===== */
.group-block{ margin-bottom:26px; }
.group-header{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--ink); padding-bottom:8px; margin-bottom:14px;
}
.group-header h2{ font-size:18px; font-weight:800; }
.group-header .group-stats{ font-size:12px; color: var(--ink-soft); font-family:'IBM Plex Mono',monospace; }

/* ===== Consume modal ===== */
.consume-info{ border:1px solid var(--ink); padding:12px 14px; margin-bottom:14px; }
.consume-info .ci-name{ font-weight:800; font-size:16px; margin-bottom:4px; }
.consume-info .ci-row{ font-size:13px; color: var(--ink-soft); display:flex; justify-content:space-between; margin-top:2px; }
.consume-info .ci-row b{ color: var(--ink); font-family:'IBM Plex Mono',monospace; }

/* ===== Detail modal ===== */
.detail-slip{ max-width:460px; }
.detail-photos{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.detail-photos img{ width:72px; height:72px; object-fit:cover; border:1px solid var(--ink); cursor:pointer; }
.detail-rows{ border:1px solid var(--ink); margin-bottom:4px; }
.detail-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border-bottom:1px dashed var(--ink); font-size:13.5px; }
.detail-row:last-child{ border-bottom:none; }
.detail-row span{ color: var(--ink-soft); font-weight:600; }
.detail-row b{ color: var(--ink); font-family:'IBM Plex Mono',monospace; text-align:right; max-width:60%; }

/* ===== Home screen ===== */
.home-view{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:40px 20px 60px; position:relative;
}
.logo-wrap{ margin-bottom:4px; }
.home-logo{ display:block; width:240px; max-width:80vw; height:auto; }
.home-logout-btn{
  position:absolute; top:20px; right:20px; padding:8px 12px;
}
.scan-tile-home{
  width:220px; height:220px; max-width:70vw; max-height:70vw; background: var(--ink); border:2px solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  cursor:pointer; margin:28px 0; transition: opacity .12s ease;
}
.scan-tile-home:hover{ opacity:0.85; }
.scan-tile-home span{ color:#fff; font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:0.05em; }

.cat-grid-home{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; width:100%; max-width:460px;
}
.cat-tile-home{
  background:#fff; border:2px solid var(--ink); aspect-ratio:1/1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; cursor:pointer; padding:16px; transition: background .12s ease;
}
.cat-tile-home:hover{ background: var(--accent); }
.cat-tile-home span{ font-weight:700; font-size:14px; text-align:center; line-height:1.2; }

@media (max-width:480px){
  .home-logo{ width:190px; }
  .scan-tile-home{ width:180px; height:180px; }
  .home-logout-btn span{ display:none; }
}

/* ===== Box location & contents ===== */
.box-location{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700;
  background: var(--ink); color:#fff; padding:3px 9px; margin-bottom:8px;
}
.box-contents{ white-space:pre-wrap; font-size:12.5px; color: var(--ink-soft); }
.box-contents b{ color: var(--ink); }

/* ===== Photo previews ===== */
.photo-previews{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.photo-thumb{ position:relative; width:64px; height:64px; min-width:64px; min-height:64px; max-width:64px; max-height:64px; flex-shrink:0; border:1px solid var(--ink); overflow:hidden; box-sizing:border-box; }
.photo-thumb img{ width:64px; height:64px; object-fit:cover; display:block; }
.photo-thumb .rm{
  position:absolute; top:0; right:0; background: var(--ink); color:#fff; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; line-height:1;
}
.card-photos{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.card-photos img{ width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px; flex-shrink:0; object-fit:cover; border:1px solid var(--ink); cursor:pointer; box-sizing:border-box; }

/* ===== Photo lightbox ===== */
.lightbox-overlay{ align-items:center; background: rgba(0,0,0,0.85); }
.lightbox-inner{ position:relative; max-width:92vw; max-height:88vh; background:none; border:none; margin:0; }
.lightbox-inner img{ max-width:92vw; max-height:88vh; object-fit:contain; display:block; margin:0 auto; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); color:#fff;
  border:1px solid #fff; border-radius:0; width:38px; height:38px; font-size:22px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer; line-height:1;
}
.lightbox-nav.prev{ left:-4px; }
.lightbox-nav.next{ right:-4px; }
.lightbox-dots{ position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.lightbox-dots .dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35); }
.lightbox-dots .dot.active{ background:#fff; }

/* ===== Wood photo-first catalog cards ===== */
.wood-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.wood-card{ background: var(--surface); border:1px solid var(--ink); overflow:hidden; }
.wood-photo-wrap{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#f0f0f0;
  border-bottom:1px solid var(--ink); touch-action: pan-y; cursor:pointer;
}
.wood-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .15s ease; }
.wood-photo.active{ opacity:1; }
.wood-photo-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.wood-photo-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.85); border:1px solid var(--ink);
  border-radius:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-weight:800; font-size:14px; line-height:1; z-index:2;
}
.wood-photo-nav.prev{ left:5px; }
.wood-photo-nav.next{ right:5px; }
.wood-photo-dots{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:2; }
.wood-photo-dots .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55); border:1px solid rgba(0,0,0,0.4); }
.wood-photo-dots .dot.active{ background: var(--accent); border-color: var(--ink); }
.wood-card-info{ padding:10px 12px 4px; }
.wood-card .wood-size{ font-size:12px; color: var(--ink-soft); font-weight:600; }
.wood-card .wood-price{ font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:700; margin-top:2px; }
.wood-card .tag-actions{ border-top:1px dashed var(--ink); padding:8px 12px; margin-top:8px; }
.wood-card-info{ cursor:pointer; }
.show-more-btn{
  background: var(--paper); border:1px dashed var(--ink); padding:10px;
  font-weight:700; font-size:13px; cursor:pointer; margin-top:10px; width:100%;
}
.show-more-btn:hover{ background: var(--accent); }
.tag{ cursor:pointer; }
.tag .tag-actions, .tag .card-photos{ cursor:default; }

/* ===== Checkbox field ===== */
.checkbox-field{ margin-bottom:14px; }
.checkbox-label{ display:flex; align-items:center; gap:8px; cursor:pointer; text-transform:none; font-weight:600; font-size:13.5px; color: var(--ink); }
.checkbox-label input[type="checkbox"]{ width:17px; height:17px; accent-color: var(--accent); }
.listed-badge{
  display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  background: var(--accent); color: var(--accent-ink); border:1px solid var(--ink); padding:2px 8px; margin-bottom:8px;
}