/* App-screen values sampled from Figma node 7908:46259:
   screen #eae6e2, text #141414, panel #fbfaf8, muted #70706f, dots #978a7a,
   Inter (Semi Bold title, Bold button), Mulish ExtraBlack "PAYMENTS",
   screen radius 160/1950, panel radius 160/1950, pill buttons stroke #141414. */
/* MilX web design system tokens (Avery / Black / accents). */
:root {
  color-scheme: light;
  --avery-100: #FBFAF8; --avery-300: #F2F0EE; --avery-400: #EDEBE8; --avery-500: #EAE6E2; --avery-900: #9A9086;
  --black-0: #FFFFFF; --black-300: #E4E3E1; --black-500: #9F9E9D; --black-600: #70706F; --black-800: #141414;
  --green: #B2F86C; --green-hover: #9FF647; --focus: #45B7B7;
  --page-bg: var(--avery-500); --block-bg: var(--avery-300); --card-bg: var(--avery-100);
  --text: var(--black-800); --muted: var(--black-600); --line: var(--black-300); --selected: var(--black-800);
  /* app mockup is always the light MilX app */
  --app-bg: #EAE6E2; --app-panel: #FBFAF8; --app-text: #141414; --app-muted: #70706F; --app-dot: #978A7A;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Mulish", "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page-bg: #353230; --block-bg: #1a1816; --card-bg: #2c2927;
    --text: #eeeae5; --muted: #9e9a93; --line: #33302c; --selected: #eeeae5; --black-500: #6d6964;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #353230; --block-bg: #1a1816; --card-bg: #2c2927;
  --text: #eeeae5; --muted: #9e9a93; --line: #33302c; --selected: #eeeae5; --black-500: #6d6964;
}
* { box-sizing: border-box; }
body { background: var(--page-bg); color: var(--text); font: 400 14px/24px var(--font); padding: 0 16px; padding-block-end: 96px; overflow-x: hidden; }
.top { padding-block: 28px 8px; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.top h1 { margin: 0; font: 1000 28px/32px var(--display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.sub { margin: 0; color: var(--muted); }
.layout { display: grid; gap: 16px; padding-block: 16px; max-width: 1440px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .layout { grid-template-columns: 250px 250px minmax(0, 1fr); align-items: start; }
  .col-list, .col-picker { position: sticky; top: calc(16px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 128px); overflow: auto; scrollbar-width: thin; }
}
.col { background: var(--block-bg); border-radius: 24px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.col-title { font: 1000 14px/20px var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); margin: 8px 12px 4px; }
.collection-list { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; background: var(--card-bg); border-radius: 16px; }
@media (max-width: 1023px) {
  /* Phone/tablet: horizontal strip of tiles — big card, full name, color count. */
  .collection-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 156px; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 8px; scrollbar-width: none; }
  .collection-list::-webkit-scrollbar { display: none; }
  .collection-list li { scroll-snap-align: start; }
  .collection-list .coll-btn { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; height: 100%; }
  .collection-list .coll-btn img { width: 100%; border-radius: 4% / 6.3%; }
  .collection-list .coll-btn span { flex: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 600 14px/18px var(--font); }
  .collection-list .coll-count { color: var(--muted); font: 500 12px/16px var(--font) !important; }
  .coll-count::after { content: " colors"; }
}
.coll-btn { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: 500 14px/20px var(--font); text-align: left; cursor: pointer; transition: background .15s ease; }
.coll-btn:hover { background: var(--block-bg); }
.coll-btn[aria-current="true"] { border-color: var(--selected); background: var(--block-bg); }
.coll-btn img { width: 52px; aspect-ratio: 1750 / 1104; border-radius: 4px; object-fit: cover; flex: none; }
.coll-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-count { flex: none !important; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.card-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; background: var(--card-bg); border-radius: 16px; }
@media (max-width: 1023px) { .card-picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.swatch { padding: 3px; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; color: var(--muted); font: 600 10px/16px var(--font); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; transition: border-color .15s ease; }
.swatch:hover { border-color: var(--line); }
.swatch img { display: block; width: 100%; aspect-ratio: 1750 / 1104; object-fit: cover; border-radius: 4% / 6.3%; }
.swatch[aria-checked="true"] { border-color: var(--selected); }
.swatch.voted::after { content: "Your vote"; display: block; padding: 4px 4px 0; color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vote-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--card-bg); border-top: 1px solid var(--line); z-index: 5; }
.vote-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#vote-selected { font: 1000 16px/24px var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-status { font-size: 12px; line-height: 16px; color: var(--muted); }
.btn-primary { flex: none; height: 48px; padding: 12px 24px; background: var(--green); color: #141414; border: 0; border-radius: 32px; font: 700 14px/24px var(--font); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: background .15s ease; }
.btn-primary:hover:not(:disabled) { background: var(--green-hover); }
.btn-primary:disabled { background: var(--block-bg); color: var(--black-500); cursor: not-allowed; }
.img-missing { background: repeating-linear-gradient(45deg, var(--block-bg) 0 8px, var(--line) 8px 16px); }
.col-mockups { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mock-block { background: var(--block-bg); border-radius: 24px; padding: 8px; }
.mockups { background: var(--card-bg); border-radius: 16px; padding: 24px 16px; }

/* Mockups */
.mockups { display: grid; gap: 24px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .mockups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .mockups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mock { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.mock figcaption { font: 600 10px/16px var(--font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* Device frame: bezel around a 390:844 screen */
.phone { width: 100%; max-width: 232px; padding: 2.6%; border-radius: 15% / 7%; background: #0d0d0d; box-shadow: 0 20px 40px -20px rgba(0,0,0,.45), inset 0 0 0 1px #2a2a2a; }
.phone .screen { position: relative; aspect-ratio: 390 / 844; max-width: 100%; border-radius: 13% / 6%; overflow: hidden; background: #000; }

/* ===== True-size iPhone canvas (points). Scaled with `zoom` by screens.js ===== */
.ios { position: relative; width: 390px; height: 844px; overflow: hidden; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.ios .svg { display: inline-flex; line-height: 0; }
.ios.is-scaled { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.ios .ic { display: block; }
.ios-status { position: absolute; top: 0; left: 0; right: 0; height: 44px; color: #000; z-index: 3; }
.ios-status.on-dark { color: #fff; }
.ios-time { position: absolute; left: 29.5px; top: 14px; font: 600 15px/18px -apple-system, "SF Pro Text", var(--font); letter-spacing: -0.055em; }
.ios-status-icons { position: absolute; left: 308.5px; top: 17.2px; display: flex; align-items: center; gap: 5px; }
.ios-home { position: absolute; left: 127px; top: 831px; width: 135px; height: 5px; border-radius: 100px; background: #141414; z-index: 3; }
.ios-home.on-dark { background: #fff; }
/* System font for Apple's own screens */
.ios-wallet, .ios-pay { font-family: -apple-system, "SF Pro Display", "SF Pro Text", var(--font); color: #fff; background: #000; }

/* MilX "My card" — values from Figma node 7908:46259 ÷ 5 */
.ios-app { background: #EAE6E2; color: #141414; }
.mx-nav { position: absolute; top: 44px; left: 0; right: 0; height: 64px; padding: 20px; display: flex; align-items: center; gap: 20px; }
.mx-back { width: 24px; height: 24px; padding: 0; border: 0; background: none; flex: none; cursor: pointer; }
.mx-back .ic { width: 24px; height: 24px; }
.mx-title { flex: 1; text-align: center; font: 600 18px/24px var(--font); }
.mx-nav-end { width: 24px; flex: none; }
.mx-body { position: absolute; top: 124px; left: 0; right: 0; display: flex; flex-direction: column; }
.mx-carousel { display: flex; gap: 12px; padding: 0 20px; margin-top: -2.5px; overflow: hidden; }
.mx-carousel.is-live { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.mx-carousel.is-live::-webkit-scrollbar { display: none; }
.mx-card { flex: none; width: 350px; height: 220.8px; object-fit: cover; border-radius: 13.1px; scroll-snap-align: start; background: #d8d2cb; }
.mx-carousel.is-live .mx-card:last-child { margin-right: 20px; }
.mx-dots { display: flex; justify-content: center; gap: 6px; height: 8px; align-items: center; margin-top: 12px; }
.mx-dots i { width: 7px; height: 7px; border-radius: 4px; background: #978A7A; opacity: .4; transition: width .2s ease, opacity .2s ease; }
.mx-dots i.on { width: 26px; opacity: 1; }
.mx-actions { display: flex; gap: 8px; margin: 21.4px 20px 0; }
.mx-btn { height: 56px; border: 1px solid #141414; border-radius: 32px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.mx-btn .ic { width: 24px; height: 24px; }
.mx-freeze { width: 286px; font: 700 14px/24px var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.mx-brush { width: 56px; }
.mx-table { margin: 24px 20px 0; height: 254px; background: #FBFAF8; border-radius: 32px; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
.mx-table-head { display: flex; justify-content: space-between; align-items: center; height: 24px; }
.mx-table-head b { font: 900 17px/24px var(--display); text-transform: uppercase; }
.mx-viewall { display: flex; align-items: center; gap: 2px; font: 400 14px/20px var(--font); }
.mx-viewall .ic { width: 20px; height: 20px; }
.mx-list { display: flex; flex-direction: column; gap: 20px; }
.mx-row { display: flex; align-items: center; gap: 16px; height: 42px; }
.mx-method { width: 36px; height: 36px; flex: none; }
.mx-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-name { font: 400 16px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-sub { font: 400 12px/16px var(--font); color: #70706F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-amt { font: 400 16px/24px var(--font); align-self: flex-start; white-space: nowrap; flex: none; }

/* Apple Wallet — iOS 17 home with card stack */
.wl-head { position: absolute; top: 56px; left: 20px; right: 20px; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.wl-title { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.01em; }
.wl-btns { display: flex; gap: 12px; }
.wl-round { width: 34px; height: 34px; border-radius: 50%; background: rgba(118,118,128,.28); display: grid; place-items: center; font-size: 24px; font-weight: 400; line-height: 1; }
.wl-more { font-size: 10px; letter-spacing: 1px; }
.wl-stack { position: absolute; top: 116px; left: 20px; width: 350px; }
.wl-card { position: relative; height: 220.8px; margin-bottom: -164.8px; border-radius: 13.1px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; font-size: 15px; font-weight: 600; box-shadow: 0 -1px 0 rgba(255,255,255,.08) inset, 0 -6px 16px rgba(0,0,0,.35); }
.wl-card-val { font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }
.wl-c1 { background: linear-gradient(160deg, #3a3a3c, #1c1c1e); }
.wl-c2 { background: linear-gradient(160deg, #2f5fb8, #1d3c7a); }
.wl-c3 { background: linear-gradient(160deg, #2e7d5b, #1a4d37); }
.wl-front { padding: 0; overflow: hidden; background: #111; }
.wl-stack > .wl-card:last-child { margin-bottom: 0; }
.wl-milx { display: block; width: 350px; height: 220.8px; object-fit: cover; border-radius: 13.1px; }

/* Apple Pay in store — after a double click on the side button */
.ap-side { position: absolute; right: 0; top: 112px; z-index: 2; padding-right: 14px; display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; line-height: 19px; font-weight: 600; animation: ap-auth 6s infinite; }
.ap-side::after { content: ""; position: absolute; right: 0; top: -14px; width: 4px; height: 66px; border-radius: 4px 0 0 4px; background: #fff; }
.ap-card { position: absolute; top: 176px; left: 20px; width: 350px; }
.ap-milx { display: block; width: 350px; height: 220.8px; object-fit: cover; border-radius: 13.1px; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.ap-phase { position: absolute; left: 0; right: 0; top: 500px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ap-label { font-size: 17px; line-height: 22px; font-weight: 600; }
.ap-auth { color: #fff; animation: ap-auth 6s infinite; }
.ap-reader { animation: ap-reader 6s infinite; }
.ap-ok { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #8E8E93; }
.ap-w1, .ap-w2, .ap-w3 { animation: ap-wave 1.6s infinite; }
.ap-w2 { animation-delay: .2s; } .ap-w3 { animation-delay: .4s; }
.ap-peek { position: absolute; left: 20px; right: 20px; top: 770px; }
.ap-peek i { display: block; height: 40px; border-radius: 13.1px 13.1px 0 0; margin-bottom: -26px; }
.ap-peek .p1 { background: #2c2c2e; } .ap-peek .p2 { background: #3a3a3c; }
@keyframes ap-auth { 0%, 38% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes ap-reader { 0%, 40% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes ap-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ap-side, .ap-auth { animation: none; opacity: 0; }
  .ap-reader, .ap-w1, .ap-w2, .ap-w3 { animation: none; opacity: 1; }
}

/* Physical */
.physical-stage { width: 100%; max-width: 300px; aspect-ratio: 9 / 10; display: grid; place-items: center; perspective: 900px; border-radius: 20px; background: radial-gradient(90% 70% at 50% 40%, var(--block-bg), var(--card-bg)); position: relative; overflow: hidden; }
.phys-card { --rx: 18deg; --ry: -14deg; --sx: 30%; position: relative; width: 82%; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-4deg); transform-style: preserve-3d; transition: transform .25s ease-out; }
.phys-img { display: block; width: 100%; aspect-ratio: 1750 / 1104; object-fit: cover; border-radius: 4% / 6.3%; }
.phys-sheen { position: absolute; inset: 0; border-radius: 4% / 6.3%; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) var(--sx), transparent calc(var(--sx) + 22%)); mix-blend-mode: soft-light; }
.phys-edge { position: absolute; inset: 0; border-radius: 4% / 6.3%; transform: translateZ(-3px); background: #111; }
.phys-shadow { position: absolute; bottom: 18%; width: 70%; height: 14%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(14px); }
@media (prefers-reduced-motion: reduce) { .phys-card { transition: none; } }

/* Results (owner only) */
.results { background: var(--block-bg); border-radius: 24px; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.res-card { background: var(--card-bg); border-radius: 16px; padding: 12px 16px; }
.results h3 { font: 1000 12px/16px var(--display); text-transform: uppercase; margin: 0 0 8px; }
.res-cards, .res-colls { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.res-cards li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; }
.res-cards img { width: 64px; aspect-ratio: 1750 / 1104; object-fit: cover; border-radius: 4px; }
.res-colls li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
.results b { font-variant-numeric: tabular-nums; }
.res-empty { color: var(--muted); margin: 4px; }

/* Outline pill button (MilX secondary) */
.btn-outline { height: 40px; padding: 8px 20px; border-radius: 32px; border: 1px solid var(--line); background: var(--card-bg); color: var(--text); font: 700 12px/24px var(--font); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: background .15s ease; }
.btn-outline:hover { background: var(--block-bg); }

/* Full-screen phone preview */
.pv { position: fixed; inset: 0; z-index: 50; background: var(--page-bg); display: flex; }
.pv-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 24px 16px; min-height: 0; }
.pv-device { position: relative; height: min(864px, calc(100vh - 48px)); aspect-ratio: 410 / 864; border-radius: 13% / 6.2%; padding: 10px; background: #0d0d0d; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); flex: none; }
.pv-app { position: relative; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; background: #EAE6E2; }
.pv-qr { width: 280px; display: flex; flex-direction: column; gap: 12px; background: var(--block-bg); border-radius: 24px; padding: 16px; }
.pv-qr .col-title { margin: 0; }
.pv-qr-code { align-self: center; background: #FBFAF8; border-radius: 16px; padding: 16px; line-height: 0; }
.pv-qr-code img, .pv-qr-code canvas { width: 180px; height: 180px; }
.pv-qr-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.pv-link-row { display: flex; gap: 8px; }
.pv-link { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card-bg); color: var(--text); font: 400 12px var(--font); }
.pv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 28px 20px 26px; background: linear-gradient(to top, #EAE6E2 72%, rgba(234,230,226,0)); color: #141414; z-index: 4; }
.pv-bar-info { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/16px var(--font); color: #70706F; }
.pv-bar-info b { font: 1000 14px/16px var(--display); text-transform: uppercase; color: #141414; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-bar-row { display: flex; gap: 8px; }
.pv-vote { flex: 1; }
.pv-vote:disabled { background: #F2F0EE; color: #9F9E9D; }
.pv-close { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: #F2F0EE; color: #141414; font-size: 18px; cursor: pointer; }
@media (max-width: 760px) {
  .pv-stage { padding: 0; }
  .pv-qr { display: none; }
  .pv-device { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; padding: 0; box-shadow: none; background: #EAE6E2; }
  .pv-app { border-radius: 0; overflow: hidden auto; }
  .pv-app .ios { height: max(844px, 100%); }
  .pv-app .ios-status { display: none; } /* the real phone draws its own status bar */
  .pv-bar { position: fixed; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
.pv[hidden] { display: none; }
.results[hidden] { display: none; }

/* iPhone / Android switch */
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 4px 12px 0; }
.mock-head .col-title { margin: 4px 12px; }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 32px; background: var(--card-bg); }
.seg button { height: 26px; padding: 0 12px; border: 0; border-radius: 32px; background: transparent; color: var(--muted); font: 700 10px/26px var(--font); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background .15s ease, color .15s ease; }
.seg button[aria-pressed="true"] { background: var(--selected); color: var(--page-bg); }

/* Android device: slimmer bezel, squarer corners, 20:9 screen */
.phone.is-android { padding: 1.8%; border-radius: 9% / 4.2%; }
.phone.is-android .screen { aspect-ratio: 390 / 866; border-radius: 8% / 3.6%; }
.ios.is-android { height: 866px; font-family: "Roboto", var(--font); }
.ios-app.is-android { font-family: var(--font); } /* the MilX app keeps its own fonts */
.an-status { position: absolute; top: 0; left: 0; right: 0; height: 44px; color: #1F1F1F; z-index: 3; font: 500 14px/20px "Roboto", var(--font); }
.an-status.on-dark { color: #fff; }
.an-time { position: absolute; left: 24px; top: 14px; }
.an-camera { position: absolute; left: 50%; top: 12px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #0b0b0b; box-shadow: 0 0 0 2px #1a1a1a; }
.an-status-icons { position: absolute; right: 22px; top: 14px; display: flex; align-items: center; gap: 6px; }
.an-gesture { position: absolute; left: 50%; bottom: 10px; width: 108px; height: 4px; margin-left: -54px; border-radius: 4px; background: #1F1F1F; z-index: 3; opacity: .8; }
.an-gesture.on-dark { background: #fff; }

/* Google Wallet — Material 3 home */
.gw { background: #F8FAFD; color: #1F1F1F; }
.gw-top { position: absolute; top: 52px; left: 20px; right: 20px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.gw-title { font: 400 24px/32px "Roboto", var(--font); }
.gw-avatar { width: 36px; height: 36px; border-radius: 50%; background: #7D5260; color: #fff; display: grid; place-items: center; font: 500 16px "Roboto", var(--font); }
.gw-stack { top: 116px; }
.gw .wl-card { color: #fff; box-shadow: 0 -1px 0 rgba(255,255,255,.1) inset, 0 -4px 12px rgba(0,0,0,.18); border-radius: 16px; font-family: "Roboto", var(--font); font-weight: 500; }
.gw .wl-milx { border-radius: 16px; }
.gw-c1 { background: linear-gradient(160deg, #3C4043, #202124); }
.gw-c2 { background: linear-gradient(160deg, #1A73E8, #174EA6); }
.gw-c3 { background: linear-gradient(160deg, #188038, #0D652D); }
.gw-hint { position: absolute; left: 20px; right: 20px; top: 560px; padding: 16px; border-radius: 16px; background: #E9EEF6; display: flex; flex-direction: column; gap: 2px; font: 400 14px/20px "Roboto", var(--font); color: #444746; }
.gw-hint b { font-weight: 500; color: #1F1F1F; font-size: 16px; line-height: 24px; }
.gw-fab { position: absolute; right: 20px; bottom: 44px; height: 56px; padding: 0 20px 0 16px; border-radius: 16px; background: #D3E3FD; color: #041E49; display: flex; align-items: center; gap: 12px; font: 500 14px/20px "Roboto", var(--font); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gw-plus { font-size: 26px; line-height: 1; font-weight: 400; }

/* Google Wallet tap to pay */
.gp { background: #FFFFFF; color: #1F1F1F; }
.gp-card { position: absolute; top: 120px; left: 20px; width: 350px; }
.gp-milx { display: block; width: 350px; height: 220.8px; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.gp-phase { position: absolute; left: 0; right: 0; top: 470px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gp-label { font: 400 24px/32px "Roboto", var(--font); }
.gp-sub { font: 400 14px/20px "Roboto", var(--font); color: #444746; }
.gp-hold { color: #0B57D0; animation: gp-hold 6s infinite; }
.gp-hold .gp-label { color: #1F1F1F; }
.gp-done { animation: gp-done 6s infinite; }
.gp-w1, .gp-w2, .gp-w3 { animation: ap-wave 1.6s infinite; }
.gp-w2 { animation-delay: .2s; } .gp-w3 { animation-delay: .4s; }
@keyframes gp-hold { 0%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes gp-done { 0%, 58% { opacity: 0; } 65%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gp-hold, .gp-w1, .gp-w2, .gp-w3 { animation: none; opacity: 1; }
  .gp-done { animation: none; opacity: 0; }
}

/* Full-screen preview on desktop, Android device */
.pv.is-android .pv-device { aspect-ratio: 406 / 882; border-radius: 9% / 4.2%; padding: 8px; }
.pv.is-android .pv-app { border-radius: 8% / 3.6%; }
@media (max-width: 760px) {
  .pv-app .an-status { display: none; }
  .pv.is-android .pv-device { aspect-ratio: auto; border-radius: 0; padding: 0; }
  .pv.is-android .pv-app { border-radius: 0; }
}

/* Self-hosted vote details dialog (MilX modal: overlay + card, underline fields) */
.dlg { position: fixed; inset: 0; z-index: 60; background: rgba(66,66,66,.4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg[hidden] { display: none; }
.dlg-card { width: 100%; max-width: 420px; background: var(--card-bg); color: var(--text); border-radius: 24px; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
.dlg-title { margin: 0; font: 1000 18px/24px var(--display); text-transform: uppercase; }
.dlg-for { margin: 0; color: var(--muted); }
.dlg-for b { color: var(--text); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 2px; }
.field label { font: 800 11px/20px var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.field input { height: 40px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: 800 18px/24px var(--display); padding: 0; outline: none; border-radius: 0; }
.field input:focus { border-bottom-color: var(--text); }
.dlg-note { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.dlg-error { margin: 0; min-height: 20px; font-size: 13px; line-height: 20px; color: #DB381F; }
.dlg-row { display: flex; gap: 8px; justify-content: flex-end; }
.dlg-row .btn-outline { height: 48px; }

/* Self-hosted join screen: shown before the cards until name, email and code are confirmed */
.gate { position: fixed; inset: 0; z-index: 70; overflow: auto; background: var(--page-bg); color: var(--text); display: flex; }
.gate[hidden] { display: none; }
.gate-inner { margin: auto; width: 100%; max-width: 1040px; padding: 32px 16px; padding-block: calc(32px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .gate-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; } }
.gate-intro { display: flex; flex-direction: column; gap: 12px; }
.gate-eyebrow { margin: 0; font: 600 11px/16px var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.gate-title { margin: 0; font: 1000 clamp(30px, 5vw, 48px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.gate-lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 24px; color: var(--muted); }
.gate-fan { position: relative; height: clamp(150px, 22vw, 230px); margin-top: 20px; }
.gate-fan img { position: absolute; left: 50%; top: 0; width: min(62%, 300px); aspect-ratio: 1750 / 1104; object-fit: cover; border-radius: 4% / 6.3%; box-shadow: 0 18px 36px -18px rgba(0,0,0,.5); transform-origin: 50% 120%; }
.gate-fan img:nth-child(1) { transform: translateX(-80%) rotate(-12deg); }
.gate-fan img:nth-child(2) { transform: translateX(-50%) rotate(0deg) translateY(-8px); }
.gate-fan img:nth-child(3) { transform: translateX(-20%) rotate(12deg); }
@media (min-width: 900px) { .gate-fan img { left: 42%; } }
.gate-card { background: var(--block-bg); border-radius: 24px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.gate-submit { width: 100%; margin-top: 4px; }