/* ============ Giraffe Inventory — styles ============ */
:root{
  --bg:        #fbf5ea;   /* cream */
  --bg-2:      #f5e9d3;   /* cream 2 */
  --panel:     #ffffff;
  --panel-2:   #fff8ea;
  --ink:       #3b2a17;   /* deep warm brown */
  --ink-2:     #6b533a;
  --muted:     #a08b6f;
  --line:      #e9dcc2;
  --line-2:    #efe4cf;
  --amber:     #d99441;   /* primary */
  --amber-2:   #b87527;   /* pressed */
  --amber-soft:#fbe7c4;
  --amber-ink: #7a4a10;
  --green:     #4e8c5b;
  --green-soft:#e2efd9;
  --red:       #c2432e;
  --red-soft:  #fadbd2;
  --yellow:    #e0a020;
  --yellow-soft:#fbecc2;
  --shadow-sm: 0 1px 2px rgba(80,55,20,.06), 0 1px 1px rgba(80,55,20,.04);
  --shadow-md: 0 4px 14px rgba(120,80,20,.10), 0 2px 4px rgba(120,80,20,.06);
  --shadow-lg: 0 18px 40px rgba(120,80,20,.16), 0 6px 12px rgba(120,80,20,.08);
  --radius:    14px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --tap:       48px;
  --safe-top:    env(safe-area-inset-top);
  --safe-bot:    env(safe-area-inset-bottom);
  --tab-h:       64px;
  --header-h:    56px;
  --font-jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-jp);
  color:var(--ink);
  background: var(--bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y: contain;
}
input, button, textarea, select{ font-family:inherit; color:inherit; font-size:inherit; }
button{ cursor:pointer; }
a{ color:var(--amber-2); }

/* ---------- App shell ---------- */
.app{
  min-height:100dvh;
  max-width:520px;
  margin:0 auto;
  background: var(--bg);
  position:relative;
  padding-bottom: calc(var(--tab-h) + var(--safe-bot) + 8px);
}
.app-header{
  position:sticky; top:0; z-index:20;
  background: linear-gradient(180deg, #fbf0d6, #f5e9d3);
  border-bottom:1px solid var(--line);
  padding: calc(var(--safe-top) + 10px) 16px 10px;
  display:flex; align-items:center; gap:10px;
  min-height: calc(var(--header-h) + var(--safe-top));
}
.app-header .logo{
  width:36px;height:36px;border-radius:10px;
  background: radial-gradient(circle at 30% 25%, #ffd98a, #e5a344 65%, #b87527);
  display:grid; place-items:center;
  font-size:22px; box-shadow: var(--shadow-sm);
}
.app-header h1{ font-size:16px; margin:0; font-weight:700; letter-spacing:.02em; }
.app-header .sub{ font-size:11px; color:var(--ink-2); font-weight:500; margin-top:1px;}
.app-header .spacer{ flex:1;}
.app-header .who{
  font-size:11px; color:var(--ink-2);
  display:flex; align-items:center; gap:6px;
  background:#fff5df; border:1px solid var(--line);
  padding:4px 8px; border-radius:999px;
}
.who .dot{ width:6px;height:6px;border-radius:50%; background:var(--green); }
.who.admin .dot{ background:var(--amber); }

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:center;
  padding-bottom: var(--safe-bot);
  pointer-events:none;
}
.tabbar-inner{
  pointer-events:auto;
  width:100%; max-width:520px;
  height: var(--tab-h);
  background: rgba(255,250,239,.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-top:1px solid var(--line);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
}
.tabbar button{
  border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:var(--muted); font-size:10.5px; font-weight:600;
  padding:6px 0; min-height:var(--tap);
}
.tabbar button .icn{ font-size:22px; line-height:1; }
.tabbar button.active{ color:var(--amber-2); }
.tabbar button.active .icn{ transform: translateY(-1px); }

.view{ padding: 12px 14px 20px; }
.view h2{ margin: 6px 2px 12px; font-size:20px; font-weight:800; letter-spacing:.01em;}
.view .lead{ color:var(--ink-2); font-size:13px; margin: -6px 2px 12px;}

/* ---------- Cards / list ---------- */
.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card + .card{ margin-top:10px;}
.card .card-body{ padding:14px;}
.card .card-hd{
  padding:12px 14px 6px;
  font-weight:700; font-size:13px; color:var(--ink-2);
  letter-spacing:.04em;
}

.item-card{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  gap:12px; align-items:center;
  padding:12px; margin-bottom:10px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow-sm);
  position:relative;
}
.item-card .emoji{
  width:56px;height:56px; border-radius:14px;
  background: var(--amber-soft);
  display:grid; place-items:center; font-size:30px;
  border:1px solid #f2dcae;
  overflow:hidden;
}
.item-card .emoji img{ width:100%; height:100%; object-fit:cover; border-radius:13px; }
.item-card .name{ font-weight:700; font-size:15px; margin:0; }
.item-card .meta{ font-size:11.5px; color:var(--ink-2); margin-top:2px;}
.item-card .stock{
  text-align:right;
}
.item-card .stock .num{
  font-size:22px; font-weight:800; line-height:1; color:var(--ink);
  font-variant-numeric: tabular-nums;
}
.item-card .stock .unit{ font-size:11px; color:var(--muted); margin-left:2px;}
.item-card .bar{
  grid-column: 1 / -1;
  height:6px; background:#f2ead6; border-radius:99px; overflow:hidden; margin-top:8px;
}
.item-card .bar > i{
  display:block; height:100%; border-radius:99px;
  background: var(--green);
  transition: width .3s ease;
}
.item-card .bar.warn > i{ background: var(--yellow); }
.item-card .bar.low  > i{ background: var(--red); }
.item-card.low{ border-color:#f0c9be; background: #fff6f2; }
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
}
.badge.low{ background: var(--red-soft); color:var(--red); border:1px solid #f2c1b5; }
.badge.warn{ background: var(--yellow-soft); color:#8a5a06; border:1px solid #f2d999; }
.badge.ok{ background: var(--green-soft); color:#2f6a3d; border:1px solid #cfe0c1; }

.alert-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin: 4px 2px 12px;
  background:#fff1eb; border:1px solid #f2c1b5;
  color:#8b2c1a; border-radius:12px;
  font-size:13px; font-weight:600;
}
.alert-banner .icn{ font-size:18px; }

.searchbar{
  position:relative; margin: 4px 2px 12px;
}
.searchbar input{
  width:100%; height:44px;
  padding: 0 14px 0 40px;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 12px;
  font-size:15px;
  box-shadow: var(--shadow-sm);
}
.searchbar input:focus{ outline:2px solid var(--amber-soft); border-color:var(--amber);}
.searchbar .icn{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:16px;
}

/* ---------- Buttons ---------- */
.btn{
  min-height: var(--tap);
  padding: 12px 16px;
  border-radius: 12px;
  border:1px solid transparent;
  font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .05s ease, background .15s ease;
  user-select:none;
}
.btn:active{ transform: scale(.98); }
.btn.primary{
  background: linear-gradient(180deg, #eaa758, #d68a34);
  color:#fff8ea;
  box-shadow: 0 3px 0 #a5661d, var(--shadow-sm);
}
.btn.primary:active{ box-shadow: 0 1px 0 #a5661d; transform: translateY(2px) scale(.99);}
.btn.secondary{
  background: #fff; color:var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn.ghost{ background: transparent; color:var(--amber-2); }
.btn.danger{ background:#fff; border-color:#f2c1b5; color:var(--red); }
.btn.block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn.sm{ min-height:36px; padding:8px 12px; font-size:13px; border-radius:10px; }

.fab{
  position:fixed; right:16px;
  bottom: calc(var(--tab-h) + var(--safe-bot) + 16px);
  z-index:25;
  width:60px;height:60px; border-radius:50%;
  border:0;
  background: linear-gradient(180deg, #eaa758, #b87527);
  color:#fff; font-size:28px;
  box-shadow: var(--shadow-lg);
  display:grid; place-items:center;
}
.fab:active{ transform: scale(.96); }

/* ---------- Forms ---------- */
.field{ display:block; margin-bottom:12px; }
.field > label{
  display:block; font-size:12px; color:var(--ink-2);
  font-weight:600; margin-bottom:6px; letter-spacing:.02em;
}
.field input[type=text], .field input[type=number], .field input[type=password],
.field input[type=url], .field textarea, .field select{
  width:100%;
  min-height: 44px;
  padding: 10px 12px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  font-size:15px;
}
.field textarea{ min-height: 80px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--amber-soft); border-color:var(--amber);
}
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:4px; }

.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding: 32px 20px;
  background: radial-gradient(1200px 700px at 50% -10%, #fbe6bf, #fbf5ea 60%);
}
.login-logo{
  width:96px;height:96px;border-radius:28px;
  background: radial-gradient(circle at 30% 25%, #ffdd94, #e5a344 60%, #b87527);
  display:grid; place-items:center; font-size:58px;
  box-shadow: var(--shadow-md);
  margin-bottom:14px;
}
.login-wrap h1{ margin:0 0 4px; font-size:22px; letter-spacing:.02em;}
.login-wrap .lead{ color:var(--ink-2); font-size:13px; margin: 0 0 24px; text-align:center;}
.pin-display{
  display:flex; gap:12px; margin: 6px 0 20px;
}
.pin-display .dot{
  width:16px;height:16px;border-radius:50%;
  border:2px solid #d7bd8a; background:#fff;
  transition: all .15s ease;
}
.pin-display .dot.filled{ background: var(--amber); border-color: var(--amber-2); transform: scale(1.05);}
.pin-display.err .dot{ border-color:var(--red); background:#fbdad2; animation: shake .3s;}
@keyframes shake{
  0%,100%{ transform:translateX(0);}
  25%{ transform:translateX(-6px);} 75%{ transform:translateX(6px);}
}
.pin-pad{
  display:grid; grid-template-columns: repeat(3, 72px);
  gap:14px; margin-top: 6px;
}
.pin-key{
  width:72px;height:72px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  font-size:26px; font-weight:600;
  box-shadow: var(--shadow-sm);
  display:grid; place-items:center;
}
.pin-key:active{ background: var(--amber-soft); }
.pin-key.wide{ visibility:hidden; }
.pin-key.action{ font-size:14px; font-weight:700; color:var(--ink-2); background:transparent; border:0; box-shadow:none;}
.login-note{ font-size:11.5px; color:var(--muted); margin-top:18px; text-align:center;}
.role-switch{
  display:flex; gap:8px; margin-bottom:20px;
  background:#fff; padding:4px; border-radius:999px; border:1px solid var(--line);
}
.role-switch button{
  border:0; background:transparent;
  padding: 8px 18px; border-radius:999px;
  font-weight:700; font-size:13px; color:var(--muted);
}
.role-switch button.active{
  background: var(--amber); color:#fff8ea;
  box-shadow: var(--shadow-sm);
}

/* ---------- History ---------- */
.hist-item{
  display:grid; grid-template-columns: 56px 1fr auto;
  gap:12px; align-items:center;
  padding:10px; margin-bottom:8px;
  background: var(--panel);
  border:1px solid var(--line); border-radius:12px;
}
.hist-item:has(.hist-del-btn){
  grid-template-columns: 56px 1fr auto auto;
}
.hist-item .thumb{
  width:56px;height:56px; border-radius:10px;
  background: var(--bg-2) center/cover no-repeat;
  border:1px solid var(--line);
  display:grid; place-items:center; font-size:22px; color:var(--muted);
  overflow:hidden;
}
.hist-item .thumb img{ width:100%;height:100%; object-fit:cover;}
.hist-item .name{ font-weight:700; font-size:14px;}
.hist-item .meta{ font-size:11px; color:var(--muted); margin-top:2px;}
.hist-item .delta{
  font-weight:800; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius:8px;
  font-size:13px;
}
.hist-item .delta.out{ background: var(--red-soft); color:var(--red);}
.hist-item .delta.in{ background: var(--green-soft); color: #2f6a3d;}
.hist-del-btn{
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--line); background: var(--bg-2);
  font-size:15px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0;
  color: var(--muted);
}
.hist-del-btn:active{ background: var(--red-soft); border-color: var(--red); }
.hist-del-btn:disabled{ opacity:.5; }
.hist-day{
  font-size:11px; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
  margin: 14px 4px 6px;
  text-transform:uppercase;
}

/* ---------- Count / camera ---------- */
.count-wrap{ }
.pick-list{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.pick-tile{
  background: var(--panel); border:1px solid var(--line);
  border-radius: 14px; padding:12px; text-align:left;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:8px;
  min-height: 112px;
}
.pick-tile:active{ background: var(--amber-soft); }
.pick-tile .emoji{ font-size:30px; }
.pick-tile .emoji img{ width:36px; height:36px; object-fit:cover; border-radius:10px; display:block; }
.pick-tile .name{ font-weight:700; font-size:14px; }
.pick-tile .stock{ font-size:11.5px; color:var(--ink-2);}
.pick-tile.low{ border-color:#f0c9be; background:#fff6f2;}

.camera-stage{
  background: #201810; border-radius:16px; overflow:hidden;
  min-height: 220px;
  position:relative;
  display:grid; place-items:center;
  border:1px solid #2a1e0f;
}
.camera-stage img{ width:100%; display:block; }
.camera-stage .empty{
  color:#e4c58a; padding: 40px 20px; text-align:center;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.camera-stage .empty .icn{ font-size:44px; }
.camera-stage .analyzing{
  position:absolute; inset:0;
  background: rgba(20,10,0,.55);
  color:#fff; display:grid; place-items:center;
  font-weight:700; letter-spacing:.05em;
  gap:10px; flex-direction:column;
  display:flex; align-items:center; justify-content:center;
}
.spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(1turn); }}

.count-adjust{
  display:flex; align-items:center; justify-content:center;
  gap:16px; margin: 16px 0 8px;
}
.count-adjust button{
  width:64px;height:64px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  font-size:30px; font-weight:700;
  box-shadow: var(--shadow-sm);
}
.count-adjust button:active{ background: var(--amber-soft); }
.count-adjust .value{
  font-size:56px; font-weight:800;
  min-width: 96px; text-align:center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.count-adjust .value .u{ font-size:16px; color:var(--muted); margin-left:4px;}

.count-summary{
  display:flex; justify-content:space-around;
  padding: 10px 0; margin-bottom: 10px;
  background: #fff8ea; border:1px solid var(--line-2);
  border-radius: 12px;
  font-size:13px;
}
.count-summary .k{ color:var(--ink-2); font-size:11px;}
.count-summary .v{ font-weight:800; font-size:16px; }

.ai-note{
  background: #fff5df; border:1px solid #f0dfaf;
  color: var(--amber-ink);
  padding:10px 12px; border-radius:10px; font-size:12.5px;
  display:flex; gap:8px; align-items:flex-start;
  margin-top: 6px;
}
.ai-note .icn{ font-size:16px; }

/* ---------- Admin ---------- */
.admin-section{ margin-bottom:22px; }
.admin-section h3{
  font-size:12px; letter-spacing:.06em;
  color:var(--muted); font-weight:800;
  margin: 0 4px 8px; text-transform:uppercase;
}
.list-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  margin-bottom:8px;
}
.list-row .emoji{ font-size:24px; width:32px; text-align:center;}
.list-row .emoji img{ width:32px; height:32px; object-fit:cover; border-radius:8px; display:block; }
.list-row .body{ flex:1; min-width:0; }
.list-row .name{ font-weight:700; font-size:14px; }
.list-row .sub{ font-size:11.5px; color:var(--muted); margin-top:2px;}
.list-row .icon-btn{
  border:0; background:transparent; padding:8px;
  color:var(--muted); font-size:20px;
}
.list-row .icon-btn:active{ color:var(--red); }

/* ---------- Modal / sheet ---------- */
.sheet-backdrop{
  position:fixed; inset:0; z-index:60;
  background: rgba(30,20,10,.35);
  display:flex; align-items:flex-end; justify-content:center;
  animation: fadeIn .18s ease;
}
.sheet{
  width:100%; max-width:520px;
  background: var(--panel);
  border-radius: 22px 22px 0 0;
  padding: 14px 16px calc(20px + var(--safe-bot));
  max-height: 92dvh; overflow:auto;
  animation: slideUp .22s ease;
  box-shadow: var(--shadow-lg);
}
.sheet .grip{
  width:44px;height:5px;border-radius:99px;
  background:#e2d3b0; margin:2px auto 12px;
}
.sheet h3{ margin: 0 0 8px; font-size:17px; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideUp{ from{ transform: translateY(30px); opacity:0;} to{ transform:none; opacity:1;} }

.toast-wrap{
  position:fixed; left:0; right:0; z-index:80;
  bottom: calc(var(--tab-h) + var(--safe-bot) + 16px);
  display:flex; justify-content:center; pointer-events:none;
}
.toast{
  pointer-events:auto;
  background: #2a1c0b; color:#fff8ea;
  padding: 10px 14px; border-radius: 999px;
  font-size:13px; font-weight:600;
  box-shadow: var(--shadow-lg);
  max-width: 90%;
  animation: toastIn .2s ease;
}
.toast.err{ background:#7a2717;}
.toast.ok { background:#2f6a3d;}
@keyframes toastIn{
  from{ transform: translateY(20px); opacity:0;}
  to  { transform: none; opacity:1; }
}

.empty-state{
  padding: 32px 20px; text-align:center;
  color:var(--muted);
}
.empty-state .icn{ font-size:46px; margin-bottom:8px;}
.empty-state .title{ font-weight:700; color:var(--ink-2); font-size:14px;}
.empty-state .sub{ font-size:12px; margin-top:4px;}

/* Range-safe hide (used when needed) */
.hide{ display:none !important; }

/* ---------- Loading splash (initial paint before JS mounts) ---------- */
#splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(1200px 700px at 50% -10%, #fbe6bf, #fbf5ea 60%);
}
#splash .logo{
  width:80px;height:80px;border-radius:24px;
  background: radial-gradient(circle at 30% 25%, #ffdd94, #e5a344 60%, #b87527);
  display:grid; place-items:center; font-size:48px;
  box-shadow: var(--shadow-md);
  margin-bottom:14px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
#splash .msg{ color:var(--ink-2); font-size:13px; }
; }