:root{
  --bg:#F5F2EA;
  --ink:#20291F;
  --ink-soft:#5B6459;
  --accent:#C1752E;
  --accent-ink:#FFFFFF;
  --olive:#4C6B4A;
  --line:#DCD5C4;
  --card:#FFFFFF;
  --danger:#AA4A30;
  --stamp:#8C7A54;
}
*{box-sizing:border-box;}
body{margin:0;}
html,body{background:#2A2F27;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  display:flex;
  justify-content:center;
  min-height:100vh;
}

/* ---- Login screen ---- */
.login-wrap{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  padding:20px;
}
.login-card{
  width:100%;
  max-width:340px;
  background:var(--bg);
  border-radius:16px;
  padding:28px 24px;
  text-align:center;
}
.login-logo{width:64px;height:64px;object-fit:contain;margin-bottom:10px;background:#fff;border-radius:14px;padding:4px;}
.login-card h1{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 2px;}
.login-sub{font-size:12px;color:var(--ink-soft);margin:0 0 18px;}
.login-card label{display:block;text-align:left;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft);margin:12px 0 6px;}
.login-card input{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
}
.login-error{color:var(--danger);font-size:12.5px;margin-top:10px;min-height:16px;}

/* ---- App shell ---- */
#app{
  width:100%;
  max-width:480px;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,0.4);
}
header{
  padding:22px 20px 16px;
  background:var(--ink);
  color:#F5F2EA;
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:0.02em;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{width:38px;height:38px;border-radius:9px;background:#fff;object-fit:contain;padding:2px;}
.brand .txt{display:flex;flex-direction:column;line-height:1.15;}
.brand .txt span{
  font-family:'Inter',sans-serif;font-weight:500;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);
}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
header .sub{font-size:11.5px;color:#B9C2AF;letter-spacing:0.02em;text-align:right;}
.logout-btn{
  background:none;border:1px solid #4B5A50;color:#C7CEC1;font-size:10.5px;
  padding:4px 10px;border-radius:20px;letter-spacing:0.04em;text-transform:uppercase;
}
main{flex:1;padding:16px 16px 90px;overflow-y:auto;}
nav{
  position:fixed;bottom:0;width:100%;max-width:480px;background:var(--ink);
  display:flex;padding:8px 6px calc(8px + env(safe-area-inset-bottom));gap:4px;z-index:10;
}
nav button{
  flex:1;background:none;border:none;color:#9AA593;font-family:'Inter',sans-serif;
  font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;
  padding:9px 2px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:4px;
}
nav button .ic{font-size:16px;}
nav button.active{color:var(--accent-ink);background:var(--accent);}

h2.section{
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin:0 0 12px;
  display:flex;align-items:center;justify-content:space-between;
}
h2.section .tag{
  font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--line);padding:3px 8px;border-radius:20px;
}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;}
.stock-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.stock-row .name{font-weight:600;font-size:14px;}
.stock-row .empty-note{font-size:11px;color:var(--ink-soft);margin-top:2px;}
.stock-row .qty{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;text-align:right;}
.stock-row .qty .unit{
  font-family:'Inter',sans-serif;font-size:10px;font-weight:600;color:var(--ink-soft);
  display:block;text-align:right;letter-spacing:0.05em;text-transform:uppercase;
}
.cost-line{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;
  color:var(--ink-soft);display:flex;justify-content:space-between;
}
.cost-line b{color:var(--ink);font-family:'Space Grotesk',sans-serif;}
label{
  display:block;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink-soft);margin:14px 0 6px;
}
label:first-child{margin-top:0;}
select,input{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
}
select:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.row2{display:flex;gap:10px;}
.row2>div{flex:1;}
.btn{
  width:100%;padding:13px;border-radius:11px;border:none;font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:14.5px;margin-top:18px;background:var(--accent);color:#fff;
}
.computed{
  margin-top:14px;background:#F0EBDB;border:1px dashed var(--stamp);border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--stamp);
}
.computed b{font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);}
.batch-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:9px;position:relative;}
.batch-card .top{display:flex;justify-content:space-between;align-items:baseline;}
.batch-card .date{font-size:11px;color:var(--ink-soft);}
.batch-card .landed{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;}
.batch-card .breakdown{margin-top:6px;font-size:11.5px;color:var(--ink-soft);display:flex;gap:14px;}
.batch-card .remaining{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--olive);}
.stamp-corner{
  position:absolute;top:10px;right:12px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--stamp);border:1px solid var(--stamp);border-radius:6px;padding:2px 6px;opacity:0.75;
}
.hist-item{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--olive);
  border-radius:10px;padding:10px 13px;margin-bottom:8px;font-size:12.5px;
}
.hist-item.in{border-left-color:var(--accent);}
.hist-item .h-top{display:flex;justify-content:space-between;font-weight:600;font-size:13.5px;}
.hist-item .h-meta{color:var(--ink-soft);margin-top:3px;}
.empty-state{text-align:center;padding:40px 16px;color:var(--ink-soft);font-size:13px;}
.empty-state .big{font-size:30px;margin-bottom:8px;}
.group-label{
  font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-soft);margin:16px 0 8px;
}
.group-label:first-child{margin-top:0;}
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:#fff;padding:10px 18px;border-radius:30px;font-size:12.5px;z-index:20;max-width:90%;text-align:center;
}
a.remove-link{font-size:10.5px;color:var(--danger);text-decoration:underline;cursor:pointer;}