:root { --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --panel:#ffffff; --bg:#f6f8fb; --primary:#146c94; --accent:#eab308; }
body { background:var(--bg); color:var(--ink); }
.auth-shell { min-height:70vh; display:grid; place-items:center; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; box-shadow:0 8px 24px rgba(31,41,55,.06); }
.narrow { max-width:560px; }
.medicine-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.medicine-card { min-height:150px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:8px; padding:14px; background:#fff; cursor:pointer; }
.medicine-card input { width:20px; height:20px; }
.medicine-card:has(input:checked) { outline:3px solid rgba(20,108,148,.22); border-color:var(--primary); }
.medicine-card.disabled { opacity:.55; cursor:not-allowed; }
.channel { color:var(--primary); font-weight:700; font-size:.85rem; }
.stock { margin-top:auto; color:var(--muted); }
.qr-layout { display:grid; grid-template-columns:minmax(520px,1000px) 1fr; gap:24px; align-items:start; }
.qr-image { width:100%; max-width:960px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:30px; image-rendering:pixelated; }
.payload { white-space:pre-wrap; word-break:break-word; font-size:.85rem; background:#f3f4f6; padding:12px; border-radius:6px; }
.admin-nav { display:flex; gap:8px; overflow:auto; }
.admin-nav a { text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px 12px; background:#fff; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; }
.stat span { color:var(--muted); display:block; }
.stat strong { font-size:2rem; color:var(--primary); }
.line-item { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:10px 0; }
.grid-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:center; }
@media (max-width: 700px) { .qr-layout { grid-template-columns:1fr; } .container { padding-left:14px; padding-right:14px; } }