:root{
  --bg:#f1f5f9; --card:#ffffff; --alt:#f8fafc; --border:#e2e8f0;
  --ink:#0f172a; --sub:#475569; --muted:#94a3b8;
  --accent:#0f766e; --accent-soft:#ccfbf1; --header:#0b3b36;
  --ok:#15803d; --ok-bg:#dcfce7; --low:#b45309; --low-bg:#fef3c7;
  --out:#b91c1c; --out-bg:#fee2e2;
  --radius:14px; --shadow:0 6px 18px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
.hide{display:none!important}

.app-header{
  background:linear-gradient(135deg,#0b3b36,#0f766e);
  color:#fff; padding:18px 16px 16px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; position:sticky; top:0; z-index:20;
  box-shadow:0 4px 14px rgba(11,59,54,.25);
}
.app-header h1{margin:0; font-size:20px; font-weight:800; letter-spacing:.2px}
.meta{margin:4px 0 0; font-size:12px; color:var(--accent-soft); opacity:.95}

.tabs{display:flex; gap:8px; padding:12px 12px 4px}
.tabs button{
  flex:1; padding:10px 6px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--sub); font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.tabs button:hover{transform:translateY(-2px)}
.tabs button.on{background:var(--accent); color:#fff; border-color:var(--accent)}

.stats{display:flex; gap:8px; padding:8px 12px 0}
.stat{
  flex:1; background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:10px 6px; text-align:center; box-shadow:var(--shadow);
}
.stat b{display:block; font-size:18px}
.stat span{display:block; font-size:11px; color:var(--muted); margin-top:2px}

.toolbar{display:flex; gap:8px; padding:12px 12px 6px}
.toolbar button{
  flex:1; padding:11px 8px; border-radius:12px; border:1px solid transparent;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.toolbar button:hover{transform:translateY(-2px)}
.toolbar button:active{transform:translateY(0) scale(.98)}
.primary{background:var(--accent); color:#fff}
.ghost{background:var(--card); color:var(--sub); border-color:var(--border)!important}
.danger{background:var(--out-bg); color:var(--out)}

.search-wrap{padding:6px 12px 0}
.search-wrap input{
  width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); font-family:inherit; font-size:14px; color:var(--ink);
}
.search-wrap input:focus,.field input:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,.12);
}

.list{padding:10px 12px 90px; display:flex; flex-direction:column; gap:8px}
.row{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; display:flex; gap:10px; box-shadow:var(--shadow);
  animation:fadeUp .25s ease both;
}
.row .info{flex:1; min-width:0}
.row h3{margin:0; font-size:15px; font-weight:700; word-break:break-word}
.row p{margin:3px 0 0; font-size:13px; color:var(--sub)}
.row p.small{margin-top:4px; font-size:11px; color:var(--muted)}
.row .side{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.badge{padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.low{background:var(--low-bg); color:var(--low)}
.badge.out{background:var(--out-bg); color:var(--out)}
.mini{
  border:1px solid var(--border); background:var(--alt); color:var(--accent);
  border-radius:8px; padding:5px 10px; font-family:inherit; font-size:12px;
  font-weight:700; cursor:pointer;
}
.mini.del{color:var(--out); border-color:var(--out-bg); background:var(--out-bg)}

.empty{
  text-align:center; padding:48px 20px; color:var(--sub);
  background:var(--card); border:1px dashed var(--border); border-radius:var(--radius);
}
.empty b{display:block; font-size:16px; margin-bottom:6px}
.empty span{font-size:13px; color:var(--muted)}

.modal{
  position:fixed; inset:0; background:var(--bg); z-index:40;
  display:flex; flex-direction:column; animation:fadeUp .2s ease both;
}
.modal .m-head{
  background:linear-gradient(135deg,#0b3b36,#0f766e); color:#fff; padding:16px;
}
.modal .m-head h2{margin:0; font-size:18px}
.modal .m-head p{margin:4px 0 0; font-size:12px; color:var(--accent-soft)}
.modal form{flex:1; overflow-y:auto; padding:16px 16px 100px}
.field{margin-bottom:12px}
.field label{display:block; font-size:13px; color:var(--sub); margin-bottom:6px}
.field input,.field select{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); font-family:inherit; font-size:15px; color:var(--ink);
}
.field .hint{font-size:11px; color:var(--muted); margin-top:4px}
.two{display:flex; gap:10px}
.two .field{flex:1}
.m-foot{
  position:fixed; bottom:0; inset-inline:0; background:var(--card);
  border-top:1px solid var(--border); padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:10px;
}
.m-foot button{
  flex:1; padding:12px; border-radius:12px; font-family:inherit; font-size:15px;
  font-weight:700; border:1px solid transparent; cursor:pointer;
}

.toast{
  position:fixed; bottom:24px; inset-inline:16px; background:#0f172a; color:#fff;
  padding:13px 16px; border-radius:12px; font-size:14px; z-index:60;
  box-shadow:0 10px 30px rgba(15,23,42,.35); animation:fadeUp .25s ease both;
}
.foot{
  text-align:center; font-size:11px; color:var(--muted);
  padding:0 12px 18px; margin:0;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (min-width:640px){
  .app-header,.tabs,.stats,.toolbar,.search-wrap,.list{max-width:680px; margin-inline:auto}
  .list{padding-bottom:80px}
}