/* The shop owner's app (fidelite_edit.html). Opened from the home screen, so it
   is built like one: a top bar, three tabs, a bottom bar, a short splash.
   Colours come from app.css (dark by default, light by choice) so the theme
   button keeps working. No inline styles anywhere: the CSP forbids them. */

.fa { margin: 0; font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: radial-gradient(120% 55% at 50% -8%, rgba(20,184,166,.16), transparent 62%), var(--bg);
  color: var(--fg); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
:root[data-theme="light"] .fa {
  background: radial-gradient(120% 55% at 50% -8%, rgba(13,148,136,.12), transparent 62%), var(--bg); }
.fa * { box-sizing: border-box; }
.fa button, .fa input { font: inherit; color: inherit; }
.fa a { color: inherit; }
.fa :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.fa-num { font-variant-numeric: tabular-nums; }

/* ---- shell ---- */
.fa-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 12px; max-width: 520px; margin: 0 auto;
  background: linear-gradient(var(--bg) 70%, transparent); }
.fa-top h1 { margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-top p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fa-top > div { flex: 1; min-width: 0; }
.fa-icon-btn { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--panel); display: grid; place-items: center; cursor: pointer; flex: none;
  transition: transform .15s, background .2s; }
.fa-icon-btn:active { transform: scale(.94); }
.fa-icon-btn::after { content: "☀"; font-size: 1.05rem; }
:root[data-theme="light"] .fa-icon-btn::after { content: "☾"; }

.fa main { max-width: 520px; margin: 0 auto; padding: 4px 20px calc(110px + env(safe-area-inset-bottom)); }
.js .fa-tab { display: none; }
.js .fa-tab.on { display: block; animation: fa-rise .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fa-rise { from { opacity: 0; transform: translateY(10px); } }

.fa-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.fa-bar-in { display: flex; gap: 6px; width: 100%; max-width: 480px; }
.fa-tabbtn { flex: 1; border: 0; background: transparent; padding: 8px 4px 6px; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .74rem; font-weight: 500;
  color: var(--muted); transition: color .2s, background .2s, transform .15s; }
.fa-tabbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.fa-tabbtn:active { transform: scale(.95); }
.fa-tabbtn.on { color: var(--accent); background: var(--accent-soft); }

/* ---- home ---- */
.fa-hero { position: relative; padding: 22px 20px 16px; border-radius: 28px; margin-top: 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel) 62%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 60%, transparent); }
.fa-eyebrow { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }
.fa-big { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.fa-big b { font-size: 4.6rem; line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.fa-big span { font-size: 1.05rem; color: var(--muted); }
.fa-week { font-size: .9rem; color: var(--muted); margin: 0 0 14px; }
.fa-week b { color: var(--fg); font-weight: 600; }
.fa-chart { width: 100%; height: auto; display: block; overflow: visible; }
.fa-b { fill: var(--accent); opacity: .42; }
.fa-b.now { opacity: 1; }
.fa-b.z { fill: var(--line-strong); opacity: 1; }
.fa-dow { fill: var(--muted); font-size: 8px; font-family: inherit; text-anchor: middle; }
.fa-dow.now { fill: var(--fg); font-weight: 700; }

.fa-alert { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 20px;
  background: var(--accent); color: var(--accent-fg); }
.fa-alert svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.fa-alert b { display: block; font-size: 1.05rem; font-weight: 650; }
.fa-alert span { font-size: .85rem; opacity: .85; }
.fa-near { margin: 12px 4px 0; font-size: .9rem; color: var(--muted); }
.fa-near b { color: var(--fg); }

.fa-h2 { margin: 26px 4px 8px; font-size: .95rem; font-weight: 600; color: var(--muted); }
.fa-list { margin: 0; padding: 0; list-style: none; border-radius: 22px; background: var(--panel);
  border: 1px solid var(--line); overflow: hidden; }
.fa-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; }
.fa-list li + li { border-top: 1px solid var(--line); }
.fa-list span { color: var(--muted); font-size: .95rem; }
.fa-list b { font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- activity ---- */
.fa-day { margin: 22px 4px 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.fa-day:first-child { margin-top: 8px; }
.fa-act { margin: 0; padding: 0; list-style: none; border-radius: 22px; background: var(--panel);
  border: 1px solid var(--line); overflow: hidden; }
.fa-act li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.fa-act li + li { border-top: 1px solid var(--line); }
.fa-act i { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent); font-style: normal; }
.fa-act i.gift { background: var(--accent); color: var(--accent-fg); }
.fa-act i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.fa-act div { flex: 1; min-width: 0; }
.fa-act strong { display: block; font-weight: 550; font-size: .98rem; }
.fa-act small { color: var(--muted); font-size: .8rem; }
.fa-act time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.fa-empty { text-align: center; padding: 56px 24px; color: var(--muted); }
.fa-empty svg { width: 64px; height: 64px; fill: none; stroke: var(--accent); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; opacity: .8; margin-bottom: 14px; }
.fa-empty b { display: block; color: var(--fg); font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }

/* ---- settings ---- */
.fa-form { margin-top: 8px; display: grid; gap: 16px; }
.fa-field label { display: block; font-size: .85rem; color: var(--muted); margin: 0 4px 6px; }
.fa-field input { width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line-strong);
  background: var(--panel); font-size: 1.05rem; transition: border-color .2s, box-shadow .2s; }
.fa-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.fa-step { display: flex; gap: 8px; }
.fa-step input { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.fa-step button { width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line-strong);
  background: var(--panel); font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none;
  transition: transform .15s, background .2s; }
.fa-step button:active { transform: scale(.94); background: var(--accent-soft); }
.fa-hint { font-size: .8rem; color: var(--muted); margin: 6px 4px 0; }
.fa-save { height: 56px; border: 0; border-radius: 18px; background: var(--accent); color: var(--accent-fg);
  font-size: 1.05rem; font-weight: 650; cursor: pointer; transition: transform .15s, filter .2s;
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--accent) 80%, transparent); }
.fa-save:hover { filter: brightness(1.06); }
.fa-save:active { transform: scale(.98); }
.fa-links { margin: 22px 0 0; padding: 0; list-style: none; border-radius: 22px; background: var(--panel);
  border: 1px solid var(--line); overflow: hidden; }
.fa-links li + li { border-top: 1px solid var(--line); }
.fa-links a, .fa-links button { display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 16px 18px; border: 0; background: transparent; text-align: left; text-decoration: none; cursor: pointer;
  font-size: .98rem; transition: background .2s; }
.fa-links a:active, .fa-links button:active { background: var(--accent-soft); }
.fa-links small { color: var(--muted); }
.fa-links .copied::after { content: " ✓"; color: var(--accent); }
.fa-note { margin: 18px 6px 0; font-size: .82rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.fa-pow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 6px;
  color: var(--muted); font-size: .8rem; }
.fa-pow svg { width: 22px; height: 22px; }
.fa-pow b { color: var(--fg); font-weight: 600; letter-spacing: -.01em; }

/* ---- toast ---- */
.fa-toast { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 90; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 16px; background: var(--fg); color: var(--bg); font-size: .92rem; font-weight: 550;
  box-shadow: 0 16px 36px -14px #000a; animation: fa-toast 3.2s both; max-width: 90vw; }
.fa-toast.err { background: var(--danger); color: #fff; }
@keyframes fa-toast { 0% { opacity: 0; transform: translate(-50%, -16px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); visibility: hidden; } }

/* ---- the 3-second splash: a stamp lands three times, then the name ---- */
#fa-splash { display: none; }
.js #fa-splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; grid-template-rows: 1fr auto;
  background: radial-gradient(90% 60% at 50% 38%, #12423f, #0a1a1d 70%); color: #eafaf7;
  animation: fa-sp-in .25s both, fa-sp-out .4s 2.7s forwards; overflow: hidden; }
@keyframes fa-sp-in { from { opacity: 0; } }
@keyframes fa-sp-out { to { opacity: 0; visibility: hidden; } }
.fa-sp-main { display: grid; place-items: center; gap: 4px; padding: 0 24px; text-align: center; }
.fa-sp-card { width: min(74vw, 330px); height: auto; overflow: visible; }
.fa-sp-card .card { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.fa-sp-card .ring { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2.4; }
.fa-sp-card .fill { fill: #2dd4bf; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fa-sp-card .burst { fill: none; stroke: #2dd4bf; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fa-sp-card .fill { animation: fa-fill .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.fa-sp-card .burst { animation: fa-burst .6s ease-out forwards; }
/* after the shorthands above, or they would reset these delays to 0 */
.fa-sp-card .f1, .fa-sp-card .b1 { animation-delay: .85s; }
.fa-sp-card .f2, .fa-sp-card .b2 { animation-delay: 1.32s; }
.fa-sp-card .f3, .fa-sp-card .b3 { animation-delay: 1.8s; }
@keyframes fa-fill { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fa-burst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.fa-sp-card .stamp { fill: #eafaf7; opacity: 0; transform-box: view-box; transform: translate(52px, -70px) rotate(-10deg);
  animation: fa-stamp 2.2s .3s cubic-bezier(.45,.05,.3,1) forwards; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.fa-sp-card .stamp .tip { fill: #2dd4bf; }
@keyframes fa-stamp {
  0%   { opacity: 0; transform: translate(52px, -70px) rotate(-10deg); }
  8%   { opacity: 1; }
  18%  { transform: translate(52px, 50px) rotate(-3deg); }
  24%  { transform: translate(52px, 100px) rotate(0) scale(1, .93); }
  31%  { transform: translate(52px, 56px) rotate(2deg); }
  40%  { transform: translate(96px, 52px) rotate(-2deg); }
  46%  { transform: translate(96px, 100px) rotate(0) scale(1, .93); }
  53%  { transform: translate(96px, 56px) rotate(2deg); }
  62%  { transform: translate(140px, 52px) rotate(-2deg); }
  68%  { transform: translate(140px, 100px) rotate(0) scale(1, .93); }
  77%  { opacity: 1; transform: translate(140px, 40px) rotate(3deg); }
  100% { opacity: 0; transform: translate(196px, -86px) rotate(14deg); }
}
.fa-sp-title { margin: 18px 0 0; font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  opacity: 0; animation: fa-sp-text .6s .5s cubic-bezier(.2,.8,.2,1) forwards; }
.fa-sp-shop { margin: 6px 0 0; font-size: 1.05rem; color: #9fd8d1; opacity: 0; max-width: 80vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: fa-sp-text .6s 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fa-sp-text { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fa-sp-pow { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 0 calc(30px + env(safe-area-inset-bottom)); font-size: .85rem; color: #8fbdb7;
  opacity: 0; animation: fa-sp-text .6s .4s both; animation-fill-mode: forwards; }
.fa-sp-pow svg { width: 26px; height: 26px; }
.fa-sp-pow b { color: #eafaf7; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { #fa-splash { display: none !important; } .fa-tab.on { animation: none; } }

/* ---- sign-in and password pages */
.fc-brand { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 1.05rem; letter-spacing: -.02em; }
.fc-brand svg { width: 28px; height: 28px; }
.fa-gate { max-width: 440px; margin: 0 auto; padding: 18px 22px calc(40px + env(safe-area-inset-bottom)); }
.fa-gate-h { margin: 8px 0 6px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.fa-gate-p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.fa-gate-p b { color: var(--fg); font-weight: 600; }
.fa-id { font-variant-numeric: tabular-nums; letter-spacing: .08em; background: var(--accent-soft); color: var(--accent);
  padding: 2px 10px; border-radius: 10px; }
.fa-err { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; font-size: .92rem;
  background: color-mix(in srgb, var(--danger) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.fa-pass { margin-top: 26px; }
.fa-out { margin-top: 12px; }
.fa-out button { width: 100%; height: 50px; border-radius: 16px; border: 1px solid var(--line-strong); background: transparent;
  cursor: pointer; font-size: .98rem; transition: background .2s, transform .15s; }
.fa-out button:active { transform: scale(.98); background: var(--accent-soft); }

/* ---- a page to read: the privacy policy */
.fa-doc { max-width: 680px; margin: 0 auto; padding: 8px 22px calc(48px + env(safe-area-inset-bottom)); line-height: 1.65; }
.fa-doc h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: 8px 0 12px; }
.fa-doc .lead { color: var(--muted); font-size: 1.05rem; margin: 0 0 8px; text-wrap: pretty; }
.fa-doc h2 { font-size: 1.1rem; font-weight: 650; margin: 28px 0 6px; }
.fa-doc p, .fa-doc li { color: color-mix(in srgb, var(--fg) 88%, transparent); text-wrap: pretty; }
.fa-doc ul { padding-inline-start: 1.2rem; }
.fa-doc li { margin-bottom: 8px; }

.fa-top a { text-decoration: none; }

/* ---- the owner's brand form: swatches, the picker, a preview of the card */
.fa-sws { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fa-sw { width: 38px; height: 38px; border-radius: 12px; border: 3px solid transparent; cursor: pointer; transition: transform .15s, border-color .2s; }
.fa-sw:active { transform: scale(.92); }
.fa-sw.on { border-color: var(--fg); }
.fa-sw[data-color="#14b8a6"] { background: #14b8a6; } .fa-sw[data-color="#16a34a"] { background: #16a34a; }
.fa-sw[data-color="#2563eb"] { background: #2563eb; } .fa-sw[data-color="#7c3aed"] { background: #7c3aed; }
.fa-sw[data-color="#db2777"] { background: #db2777; } .fa-sw[data-color="#e11d48"] { background: #e11d48; }
.fa-sw[data-color="#ea580c"] { background: #ea580c; } .fa-sw[data-color="#d97706"] { background: #d97706; }
.fa-sw[data-color="#92400e"] { background: #92400e; } .fa-sw[data-color="#374151"] { background: #374151; }
.fa-field #color { width: 38px; height: 38px; padding: 0; border: 2px solid var(--line-strong); border-radius: 12px; background: none; cursor: pointer; }
.fa-prev { margin-top: 12px; height: 76px; border-radius: 22px; display: grid; place-items: center; font-weight: 650; font-size: 1.1rem; color: #fff;
  background: linear-gradient(155deg, #1bb5a6 0%, #14b8a6 52%, #0a6c62 100%); transition: background .25s, color .25s; }
.fa-logo-prev { display: block; width: 72px; height: 72px; object-fit: contain; border-radius: 16px; background: #fff; padding: 6px; margin: 0 0 10px; }
.fa-check { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--muted); }
.fa-field input[type="file"] { height: auto; padding: 12px 14px; font-size: .92rem; }
.fa-check { justify-content: flex-start; }
.fa-check input { width: 20px; height: 20px; flex: none; margin: 0; }

.fa-wa { margin-inline-start: auto; padding: 8px 14px; border-radius: 12px; background: #25d366; color: #052e16;
  font-weight: 600; font-size: 14px; text-decoration: none; }
.fa-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 14px; line-height: 1.4; }
.fa-check input { margin-top: 3px; flex: none; }

/* Dimatap mark: ring follows the text colour, the tap dot is lime */
.fc-brand .dot, .fa-pow .dot { fill: #C6FF3D; }