:root{
  --primary:#004d40;
  --accent:#c0aa83;
  --bg:#f3f2ec;
  --card:#ffffff;
  --text:#1f2a2a;
  --muted:#6b7b7b;
  --danger:#b00020;
  --ok:#0f7b3a;
  --shadow: 0 10px 28px rgba(0,0,0,.12);
  --radius: 18px;
  --font: "Tajawal", system-ui, -apple-system, Segoe UI, Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.container{max-width:1050px; margin:0 auto; padding:18px}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--card); box-shadow:var(--shadow);
  border-radius:var(--radius); margin:16px auto;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand .logo{
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(145deg, var(--primary), #0a6b5a);
  display:grid; place-items:center; color:#fff; font-weight:900;
}
.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{padding:9px 12px; border-radius:999px; background:rgba(192,170,131,.25); color:var(--primary); font-weight:700}

.grid{display:grid; gap:16px}
@media(min-width:900px){ .grid-2{grid-template-columns:1.2fr .8fr} }

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.h1{font-size:26px; margin:0 0 10px; font-weight:900}
.h2{font-size:18px; margin:0 0 10px; font-weight:900; color:var(--primary)}
.muted{color:var(--muted)}
hr{border:none; border-top:1px solid rgba(0,0,0,.08); margin:14px 0}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:var(--primary); color:#fff; font-weight:900;
  cursor:pointer;
}
.btn.secondary{background:var(--accent); color:#1c1c1c}
.btn.ghost{background:transparent; color:var(--primary)}
.btn.danger{background:var(--danger)}
.btn:disabled{opacity:.6; cursor:not-allowed}

.input, select{
  width:100%; padding:12px 12px;
  border-radius:14px; border:1px solid rgba(0,0,0,.12);
  background:#fff; font-family:var(--font);
}

.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 8px; border-bottom:1px solid rgba(0,0,0,.08); text-align:right}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px}
.badge.ok{background:rgba(15,123,58,.15); color:var(--ok)}
.badge.danger{background:rgba(176,0,32,.12); color:var(--danger)}
.badge.warn{background:rgba(192,170,131,.30); color:#6b4f1d}

.scanShell{
  background:#4b4b4b;
  min-height:100vh;
}
.scanTop{color:#fff; text-align:center; padding:18px; font-size:28px; font-weight:900}
.scanCard{
  max-width:520px; margin:18px auto; border-radius:22px;
  background:#d6d0a5; padding:18px; text-align:center;
}
.scanTime{font-size:56px; font-weight:1000; letter-spacing:.5px}
.scanSub{font-size:22px; margin-top:6px}
.readerWrap{max-width:720px; margin:22px auto; padding:12px}
#reader{background:#111; border-radius:18px; overflow:hidden}
.scanMsg{max-width:720px; margin:12px auto; text-align:center; color:#fff; font-weight:800}
.scanMsg .pill{background:#222; color:#fff}