/* Fifsee Web Mirror — "My Fifsee" base styles (Web-Fable, P1/P2)
   TOKENS: copied from FIFSEE-WEB-TOKENS.css (light surface) per the
   2026-09-08 design contract — my/ is html[data-surface="light"]. Values are
   COPIED, never @imported, so my/ never depends on an /ai/ file. The legacy
   names below alias the --fif-* set so nothing else in my/ hard-codes hex. */
:root{
  --fif-font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fif-fs-xs:12px;--fif-fs-sm:13.5px;--fif-fs-md:15px;--fif-fs-lg:17px;--fif-fs-h3:20px;
  --fif-fs-h2:clamp(24px,2.6vw,32px);--fif-fs-h1:clamp(28px,3.4vw,42px);
  --fif-blue:#2F66E8;--fif-blue-hover:#2456CC;--fif-blue-bright:#4D8BFF;--fif-blue-tint:#EAF0FE;
  --fif-navy-500:#1E2A52;--fif-navy-600:#16203E;--fif-navy-700:#0B1A3D;--fif-navy-800:#0C1733;--fif-navy-900:#0A1020;
  --fif-green:#12B36A;--fif-green-ink:#0B7A49;--fif-green-tint:#E7F7EF;
  --fif-red:#D92D20;--fif-red-tint:#FEE4E2;--fif-amber:#F2C97A;
  --fif-r-sm:12px;--fif-r-md:18px;--fif-r-pill:999px;
  --fif-shadow-card:0 10px 30px rgba(16,19,34,.08);--fif-ease:.24s cubic-bezier(.2,.7,.2,1);
  --fif-header-h:64px;--fif-rail-w:240px;--fif-focus:0 0 0 3px rgba(47,102,232,.45);
  --fif-bg:#FFFFFF;--fif-bg-2:#F6F7F9;--fif-card:#FFFFFF;
  --fif-ink:#101322;--fif-text:#101828;--fif-body:#4A5169;--fif-text-2:#5B6472;--fif-muted:#667085;
  --fif-line:#E7E9EF;--fif-line-2:#D6DAE3;--fif-field:#FFFFFF;--fif-field-line:#D6DAE3;
  --fif-cta:var(--fif-navy-500);--fif-cta-text:#FFFFFF;--fif-cta-hover:var(--fif-navy-600);
  --fif-link:var(--fif-blue);--fif-panel:#F6F7F9;--fif-panel-2:#EEF1F6;
  /* legacy aliases used across my/ */
  --bg-page:var(--fif-bg);--card-bg:var(--fif-card);--warm-white:var(--fif-bg-2);
  --text:var(--fif-text);--text-2:var(--fif-text-2);--text-3:var(--fif-muted);
  --cta:var(--fif-cta);--cta-dark:var(--fif-cta-hover);--blue:var(--fif-blue);--blue-light:var(--fif-blue-tint);
  --green:var(--fif-green-ink);--green-light:var(--fif-green-tint);--red:var(--fif-red);--red-light:var(--fif-red-tint);
  --line:var(--fif-line);--radius:var(--fif-r-md);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{color-scheme:light}
body{background:var(--bg-page);color:var(--text);
     font-family:var(--fif-font);
     line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--fif-font);letter-spacing:-.02em;line-height:1.15}
:focus-visible{outline:none;box-shadow:var(--fif-focus)}
button,input,select,textarea{font-family:inherit}
a{color:var(--blue);text-decoration:none}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
header.site{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:16px}
.logo img{height:40px;display:block}
.site-tag{color:var(--text-3);font-size:13.5px}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 0 64px}
.card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:0 12px 40px rgba(16,24,40,.06);padding:clamp(24px,4vw,40px);width:100%;max-width:520px;text-align:center}
.card h1{font-size:clamp(24px,3vw,30px);font-weight:800;color:var(--cta);margin-bottom:8px}
.card p{color:var(--text-2);font-size:15.5px}
.card p.small{color:var(--text-3);font-size:13px}
.qr{margin:24px auto;width:min(260px,70vw);aspect-ratio:1;display:grid;place-items:center;
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;position:relative}
.qr svg{width:100%;height:100%;display:block}
.qr .veil{position:absolute;inset:0;border-radius:14px;background:rgba(255,255,255,.92);
          display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:16px}
.qr.expired .veil{display:flex}
.steps{text-align:left;margin:20px auto 0;max-width:380px;color:var(--text-2);font-size:14.5px;display:grid;gap:10px}
.steps li{list-style:none;display:flex;gap:12px;align-items:flex-start}
.steps b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--blue-light);color:var(--blue);
         display:grid;place-items:center;font-size:13px;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;
     font:inherit;font-weight:700;font-size:var(--fif-fs-md);border-radius:var(--fif-r-pill);min-height:44px;padding:0 20px;transition:background var(--fif-ease),color var(--fif-ease)}
.btn.primary{background:var(--cta);color:#fff}.btn.primary:hover{background:var(--cta-dark)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--fif-line-2)}.btn.ghost:hover{background:var(--fif-panel)}
.status{margin-top:18px;font-size:14px;color:var(--text-2);min-height:22px}
.status.ok{color:var(--green)}.status.err{color:var(--red)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--green-light);color:var(--green);border:1px solid var(--line);border-radius:var(--fif-r-pill);padding:5px 12px;font-size:var(--fif-fs-xs);font-weight:600}
.pill.dev{background:#fff4e5;color:#b25e09}
.account{display:flex;align-items:center;gap:14px;text-align:left;margin:20px 0;padding:16px;background:var(--warm-white);border-radius:14px}
.account img,.account .avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--blue-light);
                              color:var(--blue);display:grid;place-items:center;font-weight:800;flex:0 0 48px}
.account .who b{display:block;color:var(--text);font-size:16px}
.account .who span{color:var(--text-3);font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:8px 0 20px}
.tile{background:var(--warm-white);border:1px dashed var(--line);border-radius:12px;padding:14px 10px;color:var(--text-3);font-size:13px}
.tile b{display:block;color:var(--text-2);font-size:14px;margin-bottom:2px}
footer{padding:20px 0;color:var(--text-3);font-size:12.5px;text-align:center}
@media (max-width:420px){.card{padding:22px 18px}}
@media (prefers-reduced-motion:no-preference){.pulse{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}}