:root{--green: #16a34a;--amber: #d97706;--red: #dc2626;--bg: #f8fafc;--card: #ffffff;--border: #e2e8f0;--text: #0f172a;--muted: #64748b;font-family:system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.app{max-width:560px;margin:0 auto;padding:0 16px 88px}header{position:sticky;top:0;background:var(--green);color:#fff;margin:0 -16px 16px;padding:14px 16px;font-weight:600;font-size:18px}nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--border)}nav button{flex:1;border:none;background:none;padding:12px 4px;font-size:13px;color:var(--muted);cursor:pointer}nav button.active{color:var(--green);font-weight:600}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px}.card.expiring{border-color:var(--amber)}.card.expired{border-color:var(--red)}button.primary{background:var(--green);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-size:15px;width:100%;cursor:pointer}button.secondary{background:none;border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer}input,label{font-size:15px}input[type=text],input[type=date],input[type=number]{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;margin-top:4px}.field{margin-bottom:12px}.field label{display:block;color:var(--muted);font-size:13px}.row{display:flex;gap:8px}.row>*{flex:1}.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#ecfdf5;color:var(--green)}.badge.amber{background:#fffbeb;color:var(--amber)}.badge.red{background:#fef2f2;color:var(--red)}.muted{color:var(--muted);font-size:13px}.error{color:var(--red);font-size:14px;margin:8px 0}#reader{width:100%;border-radius:12px;overflow:hidden}.toggle{display:flex;align-items:center;gap:8px;margin-bottom:8px}.toggle input{width:auto}