:root{color-scheme:light;--ink:#19231f;--muted:#758079;--paper:#f5f7f5;--line:#e2e8e3;--green:#176b50;--radius:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);min-height:100vh}.topbar{padding:22px 20px 18px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:43px;height:43px;border-radius:14px;background:#e2f1e9;color:var(--green);display:grid;place-items:center;font-size:25px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#7a867f}.topbar h1{font-size:27px;line-height:1.1;margin:3px 0 0;letter-spacing:-.8px}.icon-button{border:0;background:var(--green);color:#fff;width:44px;height:44px;border-radius:15px;font-size:29px;line-height:1;cursor:pointer}main{padding:20px 18px 110px;max-width:760px;margin:auto}.search-wrap{height:49px;background:#fff;border:1px solid var(--line);border-radius:15px;display:flex;align-items:center;gap:10px;padding:0 14px;color:#7a867f}.search-wrap>span{font-size:27px}.search-wrap input{border:0;outline:0;background:transparent;width:100%;font-size:16px;color:var(--ink)}.search-wrap button{border:0;background:none;font-size:22px;color:var(--muted)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:27px 2px 15px}.section-heading h2{font-size:17px;margin:0;letter-spacing:-.2px}.count{font-size:12px;color:var(--muted);background:#e9eeea;border-radius:20px;padding:6px 10px}.card-list{display:grid;grid-template-columns:1fr;gap:12px}.loyalty-card{color:white;min-height:144px;border:0;border-radius:20px;padding:18px 18px 15px;text-align:left;position:relative;overflow:hidden;cursor:pointer;box-shadow:0 5px 12px #14251b14;display:flex;flex-direction:column;justify-content:space-between}.loyalty-card:before,.large-card:before{content:"";position:absolute;width:170px;height:170px;border:1px solid #ffffff24;border-radius:50%;right:-40px;top:-80px;box-shadow:0 0 0 22px #ffffff0c,0 0 0 45px #ffffff08}.card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;position:relative}.retailer-name{font-size:20px;font-weight:750;letter-spacing:-.5px;overflow-wrap:anywhere}.card-chip{font-size:10px;letter-spacing:1px;background:#ffffff22;padding:6px 8px;border-radius:8px;white-space:nowrap}.card-bottom{position:relative;display:flex;justify-content:space-between;align-items:end;gap:12px}.masked-number{font-size:14px;letter-spacing:1.1px;font-variant-numeric:tabular-nums;opacity:.93}.open-hint{font-size:11px;opacity:.8}.empty-state{text-align:center;padding:40px 22px 32px}.empty-art{height:80px;display:flex;justify-content:center;align-items:center;gap:0;color:var(--green)}.empty-art span{height:58px;width:45px;border-radius:9px;background:#e1eee6;border:2px solid #c8dfd0;display:grid;place-items:center;font-size:24px;margin-left:-6px;transform:rotate(-9deg)}.empty-art span:nth-child(2){background:#dce7f8;border-color:#c5d7f1;color:#2457a7;transform:rotate(4deg) translateY(-4px)}.empty-art span:nth-child(3){background:#eee4f8;border-color:#ddccef;color:#6c45a3;transform:rotate(12deg)}.empty-state h3{margin:15px 0 8px;font-size:20px}.empty-state p{font-size:14px;color:var(--muted);line-height:1.5;max-width:300px;margin:0 auto 20px}.primary-button,.secondary-button,.danger-button{min-height:45px;border:0;border-radius:13px;padding:0 16px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.primary-button{background:var(--green);color:#fff}.secondary-button{background:#edf1ee;color:var(--ink)}.danger-button{background:#fff0ef;color:#b22d32}.privacy-note{display:flex;gap:11px;align-items:flex-start;background:#eaf2ec;border-radius:15px;padding:14px;margin-top:15px;color:var(--green)}.privacy-note>span{font-size:11px;margin-top:3px}.privacy-note strong{font-size:13px}.privacy-note p{font-size:12px;color:#65786c;margin:4px 0 0;line-height:1.4}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:55px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#ffffffed;border-top:1px solid var(--line);backdrop-filter:blur(16px);z-index:3}.nav-item{border:0;background:none;color:#8a948e;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;cursor:pointer}.nav-item span:first-child{font-size:22px}.nav-item.active{color:var(--green);font-weight:700}dialog{border:0;border-radius:24px;padding:23px;width:min(100% - 24px,500px);max-height:90dvh;overflow:auto;box-shadow:0 20px 80px #101c1640;color:var(--ink)}dialog::backdrop{background:#111b16a6;backdrop-filter:blur(3px)}dialog form{display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.modal-header h2{margin:4px 0 0;font-size:24px;letter-spacing:-.7px}.close-button{border:0;background:#eef2ef;border-radius:50%;width:38px;height:38px;font-size:22px;color:var(--ink);cursor:pointer}.field-label{font-size:13px;font-weight:700;margin:0 0 8px}.field-label:not(:first-of-type){margin-top:18px}#cardName,#cardNumber,#cardNotes{width:100%;border:1px solid #dce4de;background:#fafcfb;border-radius:12px;padding:13px;font:inherit;font-size:15px;outline-color:var(--green)}.hint{font-size:12px;color:var(--muted);line-height:1.45;margin:8px 0 0}.colour-options{display:flex;gap:9px;flex-wrap:wrap}.swatch{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--muted);cursor:pointer}.swatch input{position:absolute;opacity:0}.swatch span{width:34px;height:34px;border-radius:50%;background:var(--swatch);border:3px solid white;box-shadow:0 0 0 1px #d5ded7}.swatch input:checked+span{box-shadow:0 0 0 2px var(--green)}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}.view-dialog{padding:20px}.view-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.view-head>span{font-size:10px;font-weight:800;letter-spacing:1.7px;color:var(--muted)}.text-button{border:0;background:none;color:var(--green);font-size:14px;font-weight:700}.large-card{position:relative;overflow:hidden;min-height:190px;border-radius:20px;padding:23px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.large-retailer{font-size:26px;font-weight:800;position:relative;overflow-wrap:anywhere}.large-number{font-size:17px;letter-spacing:1px;position:relative;overflow-wrap:anywhere}.large-notes{font-size:12px;opacity:.85;position:relative}.barcode-panel{text-align:center;padding:24px 8px 15px}.barcode-panel p{font-size:12px;color:var(--muted);margin:0 0 7px}.barcode-panel strong{display:block;font-size:17px;overflow-wrap:anywhere}.barcode-panel .secondary-button{margin-top:14px}.barcode-placeholder{font-family:monospace;font-size:27px;letter-spacing:0;overflow:hidden;white-space:nowrap;color:#151515;margin:24px 0 7px;height:35px}.barcode-panel small{font-size:11px;color:var(--muted);line-height:1.4;display:block}.view-dialog>.danger-button{width:100%;margin-top:10px}.manage-description,.storage-hint{font-size:13px;color:var(--muted);line-height:1.5}.full-width{width:100%;margin:7px 0}.file-label{width:100%;cursor:pointer}.storage-hint{margin-top:18px;font-size:11px}#toast{position:fixed;bottom:calc(83px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);background:#17251e;color:#fff;padding:12px 17px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:10;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}@media(min-width:600px){.card-list{grid-template-columns:repeat(2,minmax(0,1fr))}.empty-state{padding-top:65px}.topbar{padding-left:max(22px,calc((100% - 720px)/2));padding-right:max(22px,calc((100% - 720px)/2))}}
.field-input {
  width: 100%;
  padding: 13px;
  border: 1px solid #dce4de;
  border-radius: 12px;
  background: #fafcfb;
  font: inherit;
  font-size: 15px;
}

#barcodeSvg {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px auto 7px;
  background: #fff;
}

.barcode-panel {
  background: #fff;
  border-radius: 14px;
  margin-top: 16px;
}