/* ============================================================
   Shared modern UI kit — INTE 42312 Week 5 AR gallery
   Glassmorphism, Inter, soft shadows. Linked by every page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#f5f7fc;
  --muted:rgba(245,247,252,.68);
  --glass:rgba(18,20,28,.52);
  --glass-2:rgba(30,33,44,.62);
  --brd:rgba(255,255,255,.16);
  --accent:#7c8cff;
  --radius:20px;
  --blur:blur(20px) saturate(1.3);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); }

/* ---------- back button (top-left, glass, circular) ---------- */
.back{ position:fixed; top:max(16px,env(safe-area-inset-top)); left:16px; z-index:60;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; text-decoration:none; color:var(--ink); font-size:22px; line-height:1;
  background:var(--glass); border:1px solid var(--brd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:0 6px 24px rgba(0,0,0,.28); transition:transform .16s ease, background .16s ease; }
.back:hover{ background:var(--glass-2); }
.back:active{ transform:scale(.9); }

/* ---------- toast / hint (bottom-centre, glass, slides) ---------- */
.toast{ position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:60; display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:16px; color:var(--ink); font-weight:600; font-size:.95rem;
  background:var(--glass); border:1px solid var(--brd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:0 10px 34px rgba(0,0,0,.32); max-width:88vw; text-align:center;
  transition:opacity .3s ease, transform .3s ease; }
.toast.pulse{ animation:toastpulse 1.8s ease-in-out infinite; }
.toast.hide{ opacity:0; transform:translateX(-50%) translateY(14px); pointer-events:none; }
@keyframes toastpulse{ 0%,100%{ box-shadow:0 10px 34px rgba(0,0,0,.32); }
  50%{ box-shadow:0 10px 40px rgba(124,140,255,.4); } }

/* ---------- popup card (results, etc.) ---------- */
.popup{ position:fixed; left:50%; top:20%; transform:translate(-50%,-10px) scale(.95);
  z-index:60; padding:22px 38px; text-align:center; border-radius:24px; color:var(--ink);
  background:var(--glass); border:1px solid var(--brd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:0 16px 50px rgba(0,0,0,.42); opacity:0; pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.9,.2,1), transform .35s cubic-bezier(.2,.9,.2,1); }
.popup.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.popup .cap{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35em; }
.popup .big{ font-size:2.2rem; font-weight:800; line-height:1.05; }

/* ---------- small brand tag ---------- */
.brandtag{ position:fixed; left:14px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:60;
  color:rgba(245,247,252,.5); font-size:.6rem; letter-spacing:.12em; font-weight:500; }

/* ---------- pill chip (for small labels — not the old pill hint) ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.12); border:1px solid var(--brd); color:var(--ink); }