/* Demx DV Photo — light default + dark navy/neon toggle (v0.3). Phone first, desktop below. */
/* LIGHT is the default. Dark navy + neon is the toggle (html[data-theme="dark"]). */
:root {
  --bg: #f5f8fc;
  --bg-2: #eaf1f8;
  --text: #0f1b33;
  --muted: #5a6780;
  --line: rgba(15, 27, 51, 0.11);
  --glass: rgba(255, 255, 255, 0.85);
  --glass-strong: #ffffff;
  --shadow: 0 6px 22px rgba(15, 27, 51, 0.08);
  --neon: #16a34a;            /* fills: buttons, ticks, bars */
  --neon-ink: #ffffff;        /* text on a green fill */
  --neon-text: #15803d;       /* green text on a light page */
  --neon-soft: rgba(22, 163, 74, 0.10);
  --neon-line: rgba(22, 163, 74, 0.35);
  --glow: 0 4px 14px rgba(22, 163, 74, 0.28);
  --glow-hover: 0 6px 20px rgba(22, 163, 74, 0.40);
  --text-glow: none;
  --blue: #0284c7;
  --blue-soft: rgba(2, 132, 199, 0.08);
  --blue-line: rgba(2, 132, 199, 0.25);
  --blue-glow: rgba(2, 132, 199, 0.35);
  --tip-text: #0c4a6e;
  --amber: #b45309;
  --amber-soft: rgba(245, 158, 11, 0.13);
  --amber-line: rgba(180, 83, 9, 0.35);
  --red: #dc2626;
  --red-ink: #ffffff;
  --red-soft: rgba(220, 38, 38, 0.09);
  --red-line: rgba(220, 38, 38, 0.35);
  --grey-soft: rgba(90, 103, 128, 0.12);
  --track: rgba(15, 27, 51, 0.08);
  --frame-bg: #e3e9f1;
  --disabled-bg: #d5dce6;
  --disabled-text: #7b8698;
  --topbar-bg: rgba(255, 255, 255, 0.85);
  --menu-bg: #ffffff;
  --page-glow-1: rgba(22, 163, 74, 0.07);
  --page-glow-2: rgba(2, 132, 199, 0.07);
  --radius: 20px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #070d1f;
  --bg-2: #0c1733;
  --text: #e8eef9;
  --muted: #94a3bf;
  --line: rgba(255, 255, 255, 0.09);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --neon: #2bff88;
  --neon-ink: #04140b;
  --neon-text: #2bff88;
  --neon-soft: rgba(43, 255, 136, 0.14);
  --neon-line: rgba(43, 255, 136, 0.4);
  --glow: 0 0 18px rgba(43, 255, 136, 0.45), 0 0 2px rgba(43, 255, 136, 0.9);
  --glow-hover: 0 0 28px rgba(43, 255, 136, 0.65);
  --text-glow: 0 0 10px rgba(43, 255, 136, 0.6);
  --blue: #38bdf8;
  --blue-soft: rgba(56, 189, 248, 0.08);
  --blue-line: rgba(56, 189, 248, 0.4);
  --blue-glow: rgba(56, 189, 248, 0.6);
  --tip-text: #cbe9fb;
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.14);
  --amber-line: rgba(251, 191, 36, 0.4);
  --red: #f87171;
  --red-ink: #1f0505;
  --red-soft: rgba(248, 113, 113, 0.14);
  --red-line: rgba(248, 113, 113, 0.4);
  --grey-soft: rgba(148, 163, 191, 0.16);
  --track: rgba(255, 255, 255, 0.08);
  --frame-bg: #1b2540;
  --disabled-bg: #334155;
  --disabled-text: #8392ab;
  --topbar-bg: rgba(7, 13, 31, 0.75);
  --menu-bg: rgba(12, 23, 51, 0.95);
  --page-glow-1: rgba(43, 255, 136, 0.10);
  --page-glow-2: rgba(56, 189, 248, 0.10);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, var(--page-glow-1), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, var(--page-glow-2), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  font-family: "Segoe UI", "Nyala", "Noto Sans Ethiopic", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
h2 { font-size: 17px; margin: 0; }

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.card { padding: 16px; margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--neon); color: var(--neon-ink); font-weight: 800; letter-spacing: .5px;
  box-shadow: var(--glow);
}
.brand-name { font-weight: 650; font-size: 15px; }
.top-right { display: flex; align-items: center; gap: 6px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: none; padding: 5px 11px; font-size: 14px; color: var(--muted); }
.lang button.on { background: var(--neon-soft); color: var(--neon-text); }
.theme-btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--glass-strong); color: var(--text);
}
.theme-btn .moon { display: block; }
.theme-btn .sun { display: none; }
html[data-theme="dark"] .theme-btn .moon { display: none; }
html[data-theme="dark"] .theme-btn .sun { display: block; }
.menu-btn { border: 0; background: none; padding: 6px; color: var(--text); border-radius: 8px; }
.menu {
  position: absolute; right: 16px; top: 58px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; padding: 8px;
  background: var(--menu-bg);
}
.menu span { padding: 8px 10px; color: var(--muted); }
.menu small { padding: 4px 10px; color: var(--muted); }

/* ---------- layout ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 32px; }
h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.15; text-align: center; margin: 14px 0 8px; }
.sub { text-align: center; color: var(--muted); margin: 0 0 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 650; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform .1s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--neon); color: var(--neon-ink); }
.btn.glow { box-shadow: var(--glow); }
.btn.primary:hover { box-shadow: var(--glow-hover); }
.btn.secondary { background: var(--glass-strong); color: var(--text); border-color: var(--line); }
.btn.danger { background: var(--red); color: var(--red-ink); width: 100%; margin-top: 12px; }
.btn.big { width: 100%; padding: 17px; font-size: 18px; margin-top: 14px; }
.btn.disabled { background: var(--disabled-bg); color: var(--disabled-text); box-shadow: none; pointer-events: none; }
.link { border: 0; background: none; color: var(--neon-text); padding: 4px 0; font-size: 14px; font-weight: 600; }

/* ---------- upload box ---------- */
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 16px 18px;
  border: 1.5px dashed var(--neon-line);
  transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--neon); background: var(--neon-soft); }
.drop .btn { width: 100%; max-width: 320px; }
.drop-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: var(--neon-text); background: var(--neon-soft); box-shadow: var(--glow);
}
.drop-hint { margin: 0; color: var(--muted); font-size: 14px; }
.best-tip {
  display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0;
  padding: 10px 12px; border-radius: 12px;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  color: var(--tip-text); font-size: 14px; text-align: left;
}
.best-tip svg { flex: none; color: var(--blue); margin-top: 1px; }

/* ---------- tips ---------- */
.tips { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tips li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--muted); }
.tip-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--neon-text); }
.tip-icon svg { width: 24px; height: 24px; }

/* ---------- step bar ---------- */
.steps { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; justify-content: space-between; }
.steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.steps li + li::before {            /* arrow from the previous step */
  content: ""; position: absolute; top: 21px; right: calc(50% + 24px); left: calc(-50% + 24px);
  height: 2px; background: var(--line);
}
.steps li + li::after {
  content: ""; position: absolute; top: 17px; right: calc(50% + 23px);
  border: 5px solid transparent; border-left: 6px solid var(--line); border-right: 0;
}
.steps li.done::before { background: var(--neon); box-shadow: 0 0 6px var(--neon); }
.steps li.done::after { border-left-color: var(--neon); }
.circle {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--muted); background: var(--bg-2); border: 2px solid var(--line);
  transition: all .3s;
}
.circle svg { width: 22px; height: 22px; }
.step-name { font-size: 12px; color: var(--muted); text-align: center; }
.steps li.active .circle { color: var(--blue); border-color: var(--blue); box-shadow: 0 0 14px var(--blue-glow); animation: pulse 1.2s ease-in-out infinite; }
.steps li.active .step-name { color: var(--blue); }
.steps li.done .circle { color: var(--neon-ink); background: var(--neon); border-color: var(--neon); box-shadow: var(--glow); }
.steps li.done .circle svg { display: none; }
.steps li.done .circle::after { content: "✓"; font-weight: 800; font-size: 20px; }
.steps li.done .step-name { color: var(--neon-text); }
.steps li.failed .circle { color: var(--red-ink); background: var(--red); border-color: var(--red); }
.steps li.failed .circle svg { display: none; }
.steps li.failed .circle::after { content: "✗"; font-weight: 800; font-size: 20px; }
.steps li.failed .step-name { color: var(--red); }
@keyframes pulse { 50% { box-shadow: 0 0 22px var(--blue-glow); } }

/* ---------- working: progress + face scan ---------- */
.phase { font-size: 18px; font-weight: 650; text-align: center; margin: 0 0 12px; }
.progress { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; margin-bottom: 12px; }
.progress-fill { height: 100%; width: 0; background: var(--neon); box-shadow: var(--glow); transition: width .15s; }
.scan { display: flex; justify-content: center; margin-bottom: 12px; }
.scan-box { position: relative; display: inline-block; border-radius: 14px; overflow: hidden; border: 1px solid var(--blue-line); box-shadow: 0 0 24px var(--blue-soft); }
.scan-box img { display: block; max-width: 100%; max-height: 52vh; }
.zoom { --z: 1; transform-origin: 0 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.dots { position: absolute; inset: 0; }
.dot {
  --d: calc(7px / var(--z));            /* same dot size on screen after zooming in */
  position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon), 0 0 2px #fff;
  opacity: 0; animation: dotin .35s forwards;
}
@keyframes dotin { from { opacity: 0; transform: scale(2.5); } to { opacity: 1; transform: scale(1); } }
.scanline {
  position: absolute; left: 0; right: 0; height: 3px; top: 0;
  background: var(--blue);
  box-shadow: 0 0 12px 3px rgba(56, 189, 248, 0.8), 0 0 40px 10px rgba(56, 189, 248, 0.25);
  animation: scan 2.2s ease-in-out infinite alternate;
}
@keyframes scan { from { top: 2%; } to { top: 97%; } }

/* ---------- error ---------- */
.error-card { text-align: center; padding: 26px 16px; }
.error-icon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); color: var(--red); font-size: 24px; font-weight: 800; }
.error-text { font-size: 16px; margin: 0 0 18px; }

/* ---------- result ---------- */
.status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 14px; font-size: 18px; font-weight: 700; border: 1px solid; }
.status small { display: block; font-size: 14px; font-weight: 400; color: var(--text); opacity: .85; }
.status.PASS { background: var(--neon-soft); color: var(--neon-text); border-color: var(--neon-line); }
.status.CHECK { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.status.FAIL { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }

.score { font-size: 20px; font-weight: 800; color: var(--neon-text); text-shadow: var(--text-glow); white-space: nowrap; opacity: 0; animation: fadein .3s forwards; }
.score.partial { color: var(--amber); text-shadow: none; }
.score small { font-size: 13px; font-weight: 500; color: var(--muted); text-shadow: none; }
.sub-head { margin: 14px 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); opacity: 0; animation: fadein .3s forwards; }
.checks li:last-child { border-bottom: 0; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.check-body { flex: 1; min-width: 0; }
.check-name { font-weight: 600; }
.check-value { color: var(--muted); font-size: 13px; }
.check-tip { display: block; color: var(--muted); font-size: 13px; }
.pill { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill.PASS { background: var(--neon-soft); color: var(--neon-text); }
.pill.WARN { background: var(--amber-soft); color: var(--amber); }
.pill.FAIL { background: var(--red-soft); color: var(--red); }
.pill.CONFIRM { background: var(--grey-soft); color: var(--muted); }
.pill.INFO { background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue-line); } /* 3rd level = tip (22 Oct) */

.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.compare figure { margin: 0; }
.compare figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 6px; }
.frame { aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--frame-bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.frame img { max-width: 100%; max-height: 100%; display: block; }
.frame.square { border-color: var(--neon-line); box-shadow: 0 0 14px var(--neon-soft); }
.frame.square img { width: 100%; height: 100%; }
.arrow { color: var(--neon-text); }
html[data-theme="dark"] .arrow { filter: drop-shadow(0 0 6px rgba(43, 255, 136, 0.7)); }

.confirm-title { font-weight: 650; margin: 0 0 6px; }
.confirm { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.confirm input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--neon); flex: none; }
.file-info { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.dl-hint { text-align: center; font-size: 13px; margin: 4px 0 0; color: var(--muted); }
.dl-hint.bad { color: var(--red); }

.bg-card { border-color: var(--amber-line); }
.bg-card .muted { margin: 0 0 12px; font-size: 14px; }
.bg-card .btn { width: 100%; white-space: normal; }

/* ---------- manual adjust ---------- */
.head-links { display: flex; gap: 14px; }
.adjust { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.slider { display: grid; gap: 4px; font-size: 14px; }
.slider b { color: var(--neon-text); }
.slider input { width: 100%; accent-color: var(--neon); }
.adjust-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn.small { padding: 8px 14px; font-size: 14px; }

/* ---------- family mode ---------- */
.fam-open { margin: 14px 0 0; }
.fam-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fam-head b { white-space: nowrap; }
.fam-name { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--glass-strong); color: var(--text); font: inherit; font-size: 14px; }
.fam-body { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.fam-thumb { width: 96px; }
.fam-info { display: grid; gap: 8px; justify-items: start; }
.fam-probs { margin: 0; padding-left: 18px; font-size: 13px; }
.fam-probs li.FAIL { color: var(--red); }
.fam-probs li.WARN { color: var(--amber); }
.fam-btns { display: flex; gap: 8px; flex-wrap: wrap; }
#family h1 { margin-top: 4px; }

/* ---------- help card + info sections ---------- */
.help-card .muted { margin: 0 0 12px; font-size: 14px; }
.help-card .btn { width: 100%; }
.info { margin-top: 30px; }
.info-card { scroll-margin-top: 70px; }
.info-card h2 { font-size: 20px; margin-bottom: 12px; }
.info-card a:not(.btn) { color: var(--neon-text); }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.how li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--neon-soft); }
.how b { color: var(--neon-text); }
.rules { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--neon-text); font-weight: 800; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.services { display: grid; gap: 10px; margin: 10px 0 4px; }
.service { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-strong); }
.service span { color: var(--muted); font-size: 14px; }
.service .price { color: var(--neon-text); font-weight: 700; font-size: 15px; }
.dates { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.dates li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dates b { color: var(--neon-text); }
.menu a { padding: 8px 10px; color: var(--text); text-decoration: none; border-radius: 8px; }
.menu a:hover { background: var(--neon-soft); }
.disclaimer { max-width: 560px; margin: 12px auto 0 !important; display: block !important; font-size: 12px; line-height: 1.5; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(3, 1fr); } }

/* ---------- trust line ---------- */
.trust { margin-top: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.trust p { margin: 5px 0; display: flex; justify-content: center; align-items: center; gap: 6px; }
.trust svg { flex: none; }

/* ---------- bigger screens ---------- */
@media (min-width: 640px) {
  .brand-name { font-size: 17px; }
  .wrap { padding-top: 28px; }
  .drop { padding: 36px 24px 22px; }
  .tips li { font-size: 14px; }
  .card { padding: 20px; }
  .circle { width: 52px; height: 52px; }
  .circle svg { width: 26px; height: 26px; }
  .steps li + li::before { top: 25px; right: calc(50% + 28px); left: calc(-50% + 28px); }
  .steps li + li::after { top: 21px; right: calc(50% + 27px); }
  .step-name { font-size: 14px; }
  .compare { gap: 16px; }
}


/* ---------- "Preparing your photo" (21 Oct 2026): photo + AI scan left, live real steps right ---------- */
.steps { display: none; }                      /* replaced by the live list (#ppList) */
.pp { --pp: #1F4FD8; --pp-soft: rgba(31, 79, 216, 0.10); --pp-glow: rgba(64, 128, 255, 0.55); --pp-ok: #16a34a;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center;
  width: min(1080px, calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%); padding: 8px 0 24px; align-items: center; }
html[data-theme="dark"] .pp { --pp: #7FA2FF; --pp-soft: rgba(127, 162, 255, 0.14); --pp-glow: rgba(127, 162, 255, 0.6); --pp-ok: #2bd977; }
.pp .scan { margin: 0; justify-content: center; }
.pp .scan-box { border: 0; border-radius: 26px; padding: 14px; background: var(--glass-strong); box-shadow: 0 24px 60px rgba(15, 27, 51, 0.14); overflow: visible; }
.pp-view { position: relative; overflow: hidden; border-radius: 16px; }
.pp-view img { display: block; max-width: 100%; max-height: 60vh; }
.pp-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background-image: linear-gradient(var(--pp-soft) 1px, transparent 1px), linear-gradient(90deg, var(--pp-soft) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%); mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%); }
.scanning .pp-grid { opacity: 1; }
.pp-beam { position: absolute; left: 0; right: 0; top: 0; height: 42%; transform: translateY(-100%); opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(64, 128, 255, 0) 0%, rgba(64, 128, 255, 0.05) 45%, rgba(64, 128, 255, 0.24) 100%);
  border-bottom: 2px solid var(--pp); box-shadow: 0 10px 22px -6px var(--pp-glow); }
.pp-beam::before, .pp-beam::after { content: ""; position: absolute; bottom: -7px; border: 6px solid transparent; }
.pp-beam::before { left: 0; border-left: 10px solid var(--pp); }
.pp-beam::after { right: 0; border-right: 10px solid var(--pp); }
.scanning .pp-beam { opacity: 1; animation: ppBeam 2.6s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes ppBeam { from { transform: translateY(-100%); } to { transform: translateY(240%); } }
.pp-corner { position: absolute; width: 24px; height: 24px; border: 3px solid var(--pp); opacity: .85; pointer-events: none; transition: border-color .3s; }
.pp-corner.c1 { left: 10px; top: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.pp-corner.c2 { right: 10px; top: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.pp-corner.c3 { left: 10px; bottom: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.pp-corner.c4 { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.scanning .pp-corner { animation: ppCorner 1.6s ease-in-out infinite; }
@keyframes ppCorner { 50% { opacity: .35; } }
.pp-tag { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #fff; background: rgba(15, 27, 51, 0.62); padding: 4px 10px; border-radius: 999px; }
.pp-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5b8cff; box-shadow: 0 0 8px #5b8cff; }
.scanning .pp-tag::before { animation: ppCorner 1s ease-in-out infinite; }
.finished .pp-corner { border-color: var(--pp-ok); animation: none; opacity: 1; }
.finished .pp-tag { background: var(--pp-ok); }
.finished .pp-tag::before { background: #fff; box-shadow: none; }
.stopped .pp-corner { border-color: var(--red); animation: none; }
.pp .dot { background: #5b8cff; box-shadow: 0 0 8px #5b8cff, 0 0 2px #fff; }

.pp-side { display: flex; flex-direction: column; min-width: 0; height: var(--pp-h, auto); }
.pp-title { text-align: left; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; flex: none; }
.pp .phase { display: none; }
.pp .progress { height: 6px; margin: 0 0 12px; flex: none; }
.pp .progress-fill { background: var(--pp); box-shadow: none; }
.pp-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 6px 2px; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
  scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.pp-scroll::-webkit-scrollbar { width: 5px; }
.pp-scroll::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 5px; }
.pp-note { flex: none; margin: 10px 0 0; }
.pp-list { list-style: none; margin: 0; padding: 0 0 40px; counter-reset: pp; display: flex; flex-direction: column; gap: 10px; }
.pp-list > li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--glass-strong); color: var(--muted); counter-increment: pp; opacity: .6; transition: background .3s, border-color .3s, box-shadow .3s, opacity .3s; }
.pp-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: var(--track); color: var(--muted); transition: background .25s, color .25s, box-shadow .25s; }
.pp-dot::after { content: counter(pp); }
.pp-txt { min-width: 0; flex: 1; }
.pp-name { display: block; font-size: 17px; line-height: 34px; font-weight: 700; }
.pp-detail { display: block; font-size: 14px; margin-top: -4px; color: var(--muted); }
.pp-detail:empty { display: none; }
.pp-list > li.active { opacity: 1; color: var(--text); border-color: var(--pp); box-shadow: 0 14px 34px rgba(31, 79, 216, 0.16); }
.pp-list > li.active .pp-dot { background: var(--pp); color: #fff; box-shadow: 0 0 0 5px var(--pp-soft); animation: ppRing 1.4s ease-in-out infinite; }
@keyframes ppRing { 50% { box-shadow: 0 0 0 9px var(--pp-soft); } }
.pp-list > li.done { opacity: 1; color: var(--text); background: rgba(22, 163, 74, 0.07); border-color: rgba(22, 163, 74, 0.28); }
.pp-list > li.done .pp-dot { background: var(--pp-ok); color: #fff; }
.pp-list > li.done .pp-dot::after { content: "✓"; }
.pp-list > li.done .pp-detail { color: var(--neon-text); }
.pp-list > li.failed { opacity: 1; color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.pp-list > li.failed .pp-dot { background: var(--red); color: #fff; }
.pp-list > li.failed .pp-dot::after { content: "✗"; }
.pp-checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-checks:empty { display: none; }
.pp-checks li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--line); font-size: 14px; color: var(--text); animation: ppIn .3s ease both; }
.pp-cn { flex: 1; min-width: 0; }
.pp-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.pp-checks li.run .pp-ic { border: 2px solid var(--pp); border-right-color: transparent; animation: ppSpin .7s linear infinite; }
.pp-checks li.run .pill { background: var(--pp-soft); color: var(--pp); }
.pp-checks li.PASS .pp-ic { background: var(--pp-ok); } .pp-checks li.PASS .pp-ic::after { content: "✓"; }
.pp-checks li.WARN .pp-ic { background: var(--amber); } .pp-checks li.WARN .pp-ic::after { content: "!"; }
.pp-checks li.FAIL .pp-ic { background: var(--red); } .pp-checks li.FAIL .pp-ic::after { content: "✗"; }
.pp-checks li.CONFIRM .pp-ic, .pp-checks li.INFO .pp-ic { background: var(--muted); } .pp-checks li.CONFIRM .pp-ic::after { content: "?"; }
@keyframes ppIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ppSpin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .pp { grid-template-columns: minmax(0, 1fr); gap: 22px; width: auto; left: auto; transform: none; }
  .pp-side { height: auto; }
  .pp-scroll { max-height: 52vh; }
  .pp-view img { max-height: 46vh; }
}


/* ---------- measurement guides + watermark, drawn on top of the photo (21 Oct 2026) ---------- */
.frame.square { position: relative; }
.guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }


/* ---------- result v2 (21 Oct 2026): photo first, Adjust button in the middle, captions on top, protected preview ---------- */
.adjust-row { display: flex; justify-content: center; margin: 2px 0 14px; }
.adjust-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: 999px;
  border: 2px solid var(--neon-line); background: var(--neon-soft); color: var(--neon-text); font-size: 16px; font-weight: 700; }
.adjust-btn:hover { border-color: var(--neon); box-shadow: var(--glow); }
.adjust-btn[aria-expanded="true"] { background: var(--neon); color: var(--neon-ink); border-color: var(--neon); }
.compare figcaption { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.compare figcaption.after-cap { color: var(--neon-text); }
.protect, .protect * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.protect canvas { display: block; width: 100%; height: 100%; }
.frame.square .guides { display: none; }
@keyframes attention { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } 25%, 75% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .55); } 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, .25); } }
.flash { border-radius: 10px; background: var(--red-soft) !important; animation: attention 1.2s ease 2; }
.confirm.flash { color: var(--red); padding-left: 8px; }

/* the off Download button still takes clicks so it can show WHY it is off (21 Oct) */
#downloadBtn.disabled { pointer-events: auto; cursor: not-allowed; }

/* background box v2 (21 Oct): text left, small white-background preview right, real-looking button */
.bg-row { display: flex; gap: 18px; align-items: stretch; }
.bg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bg-text .bg-btn { margin-top: auto; }
.bg-prev { flex: none; width: 150px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bg-prev canvas { width: 150px; height: 150px; border-radius: 12px; border: 1px solid var(--line); background: var(--frame-bg); display: block; }
.bg-prev figcaption { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; }
.bg-card .btn.bg-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  font-weight: 700; color: var(--text); background: linear-gradient(180deg, var(--glass-strong), var(--bg-2));
  border: 1px solid var(--line); border-bottom: 3px solid var(--amber-line);
  box-shadow: 0 4px 0 rgba(15, 27, 51, 0.10), 0 10px 22px rgba(15, 27, 51, 0.10); transition: transform .1s, box-shadow .1s; }
.bg-card .btn.bg-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 rgba(15, 27, 51, 0.12), 0 14px 26px rgba(15, 27, 51, 0.14); }
.bg-card .btn.bg-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(15, 27, 51, 0.12), 0 4px 10px rgba(15, 27, 51, 0.10); }
@media (max-width: 520px) {
  .bg-row { flex-direction: column-reverse; gap: 12px; }
  .bg-prev { width: auto; flex-direction: row; align-items: center; gap: 12px; }
  .bg-prev canvas { width: 96px; height: 96px; }
  .bg-prev figcaption { text-align: left; font-size: 13px; }
  .bg-text .bg-btn { margin-top: 4px; }
}

/* "Fix colours" card (21 Oct 2026): same layout as the background card, blue edge = a fixable light problem */
.cc-card { border-color: var(--line); border-left: 4px solid #3b82f6; }
.bg-card .btn.bg-btn:disabled { opacity: .7; cursor: progress; transform: none; }

/* 22 Oct: Fix colours / white background OFF when the photo has a red problem they cannot fix */
.bg-card.locked .btn.bg-btn:disabled { background: var(--grey-soft); color: var(--muted); border-color: transparent;
  box-shadow: none; transform: none; opacity: 1; cursor: not-allowed; }
.bg-card.locked .bg-prev { filter: grayscale(1); opacity: .55; }
.bg-card.locked .confirm-title { color: var(--muted); }
.lock-note { margin: 8px 0 0; font-size: 13px; color: var(--red); }

/* ---- pay screen (22 Oct 2026) ---- */
body.pay-open { overflow: hidden; }
.pay-modal { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.55); display: flex; align-items: flex-start;
  justify-content: center; padding: 24px 16px; overflow-y: auto; }
.pay-modal[hidden] { display: none; }
.pay-box { position: relative; width: 100%; max-width: 520px; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); margin: auto 0; }
.pay-box h2 { margin: 0 0 6px; font-size: 22px; }
.pay-head { display: flex; justify-content: space-between; align-items: center; margin: -6px -4px 8px; }
.pay-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--glass-strong);
  color: var(--text); border-radius: 12px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.pay-back:hover { border-color: var(--neon-line); }
.pay-x { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-strong);
  color: var(--text); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pay-x:hover { background: var(--grey-soft); }
.pay-amount { font-size: 17px; margin: 0 0 10px; }
.pay-amount strong { font-size: 22px; color: var(--neon-text); }
.pay-test { background: var(--amber-soft); color: var(--amber); border-radius: 10px; padding: 8px 12px; font-weight: 600; margin: 0 0 10px; }
.pay-step { margin: 12px 0 8px; font-weight: 600; }
.pay-accounts { display: grid; gap: 8px; }
.pay-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; background: var(--glass-strong); }
.pay-acc div { display: flex; flex-direction: column; min-width: 0; }
.pay-num { font-size: 18px; font-weight: 700; letter-spacing: .5px; word-break: break-all; }
.pay-banks { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.pay-banks label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pay-label { display: block; font-weight: 600; margin-bottom: 4px; }
.pay-input { width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--glass-strong); color: var(--text); text-transform: none; }
#payTxn { text-transform: uppercase; letter-spacing: .5px; }
/* receipt upload box: the main way to pay-check (22 Oct) */
.pay-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 2px dashed var(--neon-line); background: var(--neon-soft); border-radius: 16px; padding: 18px 14px; margin: 4px 0 14px;
  cursor: pointer; transition: background .2s, border-color .2s, transform .1s; }
.pay-drop:hover { border-color: var(--neon); }
.pay-drop:active { transform: scale(.99); }
.pay-drop-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--neon); color: var(--neon-ink); }
.pay-drop-icon[hidden] { display: none; }
.pay-drop-title { font-size: 17px; color: var(--neon-text); }
.pay-drop-hint { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pay-drop-thumb { max-height: 120px; max-width: 70%; border-radius: 10px; box-shadow: var(--shadow); }
.pay-drop.done { border-style: solid; border-color: var(--neon); background: var(--neon-soft); box-shadow: 0 0 0 4px var(--neon-soft); }
.pay-opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.pay-field-hint { font-size: 13px; color: var(--muted); margin: 4px 0 12px; min-height: 0; }
.pay-field-hint.ok { color: var(--neon-text); font-weight: 600; }
#payReadyHint { margin-top: 8px; }
#paySubmit:disabled { background: var(--grey-soft); color: var(--muted); box-shadow: none; cursor: not-allowed; animation: none; }
#paySubmit, #payDownload { width: 100%; justify-content: center; }
.pay-status { border-radius: 12px; padding: 10px 12px; margin: 12px 0; font-weight: 600; }
.pay-status.checking { background: var(--blue-soft); color: var(--blue); }
.pay-status.paid { background: var(--neon-soft); color: var(--neon-text); }
.pay-status.review { background: var(--amber-soft); color: var(--amber); }
.pay-status.rejected, .pay-status.error { background: var(--red-soft); color: var(--red); }
.pay-review { display: flex; gap: 8px; margin-bottom: 12px; }
.pay-review .pay-input { font-size: 13px; }
.pay-manual { display: block; margin: 10px auto 0; }
.paid-note { color: var(--neon-text); font-size: 14px; margin: 8px 0 0; text-align: center; }
@media (max-width: 520px) { .pay-box { padding: 18px 14px 16px; } .pay-acc { flex-wrap: wrap; } }
#payTxn::placeholder { text-transform: none; letter-spacing: 0; }
.pay-drop.checking { opacity: .75; pointer-events: none; }
.pay-drop.bad { border-color: var(--red); background: var(--red-soft); }
.pay-drop.bad .pay-drop-icon { background: var(--red); color: #fff; }
.pay-drop.bad .pay-drop-hint { color: var(--red); font-weight: 600; font-size: 14px; }
/* paid extra "admin check" option (22 Oct) */
.confirm.admin-opt { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 6px; color: var(--muted); font-size: 14px; }
.pay-admin { display: flex; gap: 8px; align-items: flex-start; background: var(--blue-soft); border-radius: 10px; padding: 8px 12px;
  margin: 0 0 10px; font-size: 14px; cursor: pointer; }
.pay-admin input { margin-top: 3px; }

/* ---- "My photos" cart (22 Oct 2026) ---- */
.cart-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--text); cursor: pointer; }
.cart-btn[hidden] { display: none; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--neon); color: var(--neon-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.cart-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.cart-actions[hidden] { display: none; }
.cart-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
#addCartBtn.in { border-color: var(--neon); color: var(--neon-text); }
.cart-keep { margin: 0 0 12px; font-size: 14px; }
.cart-list { display: grid; gap: 10px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; background: var(--glass-strong); }
.cart-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; -webkit-user-drag: none; user-select: none; }
.cart-mid { display: grid; gap: 6px; min-width: 0; }
.cart-mid .pay-input { font-size: 15px; padding: 7px 10px; }
.cart-rm { color: var(--red); }
.cart-empty { text-align: center; color: var(--muted); padding: 18px 0; }
.cart-more { width: 100%; margin: 12px 0; justify-content: center; }
.cart-total { font-size: 18px; font-weight: 700; margin: 6px 0 10px; }
#cartPay { width: 100%; justify-content: center; margin-top: 8px; }
#cartPay:disabled { background: var(--grey-soft); color: var(--muted); box-shadow: none; cursor: not-allowed; animation: none; }
.cart-clear { display: block; margin: 12px auto 0; color: var(--red); }
@media (max-width: 420px) { .cart-item { grid-template-columns: 60px 1fr; } .cart-item img { width: 60px; height: 60px; } .cart-rm { grid-column: 2; justify-self: start; } }

/* where is the client (22 Oct 2026) */
html[data-region="abroad"] .et-only { display: none !important; }
html:not([data-region="abroad"]) .abroad-only { display: none !important; }
.region-pick { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 9px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 700; }
/* compact: globe + "ET" / "INT"; the real list opens from the invisible select on top (full names inside) */
.region-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.region-pick select option { color: #0f1b33; }
.pay-abroad { background: var(--blue-soft); color: var(--blue); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0 0 10px; }

/* family: photo waits in line / is being checked (22 Oct) */
.fam-thumb.fam-wait { position: relative; }
.fam-thumb.fam-wait img { opacity: .55; filter: grayscale(.4); }
.fam-thumb.fam-wait::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.6); border-top-color: var(--neon); animation: famspin 0.9s linear infinite; }
.fam-thumb.fam-wait.queued::after { animation-duration: 2.4s; border-top-color: var(--muted); }
@keyframes famspin { to { transform: rotate(360deg); } }
.fam-status { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.fam-status.busy { color: var(--neon-text); }
.fam-status.queued { color: var(--muted); }

/* My photos v1.1 (22 Oct): orders being checked + paid downloads */
.cart-section { display: grid; gap: 10px; margin-bottom: 10px; }
.cart-h { font-size: 16px; margin: 14px 0 8px; }
.cart-order { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); }
.cart-order p { margin: 0 0 6px; }
.cart-order.checking { background: var(--amber-soft); border-color: rgba(180, 83, 9, .35); color: var(--amber); font-weight: 600; }
.cart-order.checking.bad { background: var(--red-soft); color: var(--red); }
.cart-order .cart-names { font-weight: 400; font-size: 13px; }
.cart-order.paid { background: var(--neon-soft); border-color: var(--neon-line); }
.cart-paid-info { color: var(--neon-text); font-weight: 600; }
.cart-paid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 8px 0; }
.cart-paid-cell { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 13px; }
.cart-paid-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.cart-paid-cell .btn { width: 100%; justify-content: center; }
.cart-zip { width: 100%; justify-content: center; margin-top: 4px; }
.cart-msg { background: var(--amber-soft); color: var(--amber); border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: 14px; }

/* family -> My photos (22 Oct) */
.fam-cart-note { text-align: center; background: var(--neon-soft); border: 1px solid var(--neon-line); color: var(--neon-text);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 auto 14px; max-width: 640px; }
.fam-cart-note .link { font-weight: 700; text-decoration: underline; }
.fam-incart { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--neon-text); }

/* family step 2: each person one by one (22 Oct) */
body:not(.fam-wiz) .fam-only { display: none !important; }
body.fam-wiz .single-only { display: none !important; }
.fam-steps { text-align: center; background: var(--neon-soft); border: 1px solid var(--neon-line); color: var(--neon-text);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 auto 14px; max-width: 680px; }
.fam-review-row { margin: 14px 0 4px; }
#famReview:disabled { background: var(--grey-soft); color: var(--muted); box-shadow: none; animation: none; cursor: not-allowed; }
.fam-wiz-bar { display: flex; align-items: center; gap: 12px; justify-content: space-between; position: sticky; top: 64px; z-index: 5; }
.fam-wiz-title { display: grid; gap: 2px; text-align: center; flex: 1; min-width: 0; }
.fam-wiz-title b { font-size: 17px; }
.fam-wiz-title .muted { font-size: 13px; }
.fam-wiz-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin: 16px 0; }
.fam-wiz-nav .big { flex: 1; justify-content: center; }
.fam-wiz-bar .btn:disabled, .fam-wiz-nav .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { .fam-wiz-bar { flex-wrap: wrap; } .fam-wiz-title { order: -1; flex-basis: 100%; } }

/* ---- family v2 (22 Oct 2026): strip of people + the same photo screen ---- */
.fam-top { margin-bottom: 10px; }
.fam-top-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fam-top-head b { font-size: 20px; }
.fam-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.fam-chip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--glass-strong); color: var(--text); font: inherit; cursor: pointer;
  scroll-snap-align: start; text-align: left; min-width: 150px; }
.fam-chip.on { border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
.fam-chip.add { min-width: 0; padding: 0 16px; height: 64px; font-weight: 700; color: var(--neon-text); border-style: dashed; justify-content: center; }
.fam-chip-img { position: relative; width: 46px; height: 46px; border-radius: 10px; background: var(--grey-soft); flex: none; }
.fam-chip-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.fam-dot { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bg); background: var(--muted); }
.fam-dot.ok { background: #16a34a; } .fam-dot.warn { background: #f59e0b; } .fam-dot.fail { background: #dc2626; }
.fam-dot.busy { background: var(--blue); animation: famblink 1s ease-in-out infinite; }
@keyframes famblink { 50% { opacity: .35; } }
.fam-chip-txt { display: grid; line-height: 1.25; }
.fam-chip-txt small { color: var(--muted); font-size: 12px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-wiz-bar { position: static; display: block; padding: 12px 16px; }
.fam-wiz-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; text-align: left; }
.fam-wiz-title b { font-size: 17px; }
.fam-wiz-title .fam-name { flex: 1; min-width: 160px; }
.fam-up-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 14px;
  border: 2px dashed var(--neon-line); background: var(--neon-soft); border-radius: 16px; cursor: pointer; }
.fam-up-drop strong { font-size: 18px; color: var(--neon-text); }
.fam-up-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--neon); color: var(--neon-ink); }
.fam-wait { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 30px 16px; font-weight: 600; }
.fam-wait-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--grey-soft); border-top-color: var(--neon); animation: famspin .9s linear infinite; }
.pp-skip { margin: 0 0 6px; font-weight: 600; }
#famPayHost { margin: 4px 0 16px; }
.fam-wiz-nav { flex-wrap: wrap; }
.fam-wiz-nav .big[hidden] { display: none; }
@media (max-width: 560px) { .fam-wiz-nav .btn { flex: 1 1 100%; justify-content: center; } }
/* family: the old big pay button is replaced by the pay button in the navigation row (22 Oct) */
body.fam-wiz #famZip { display: none; }
.fam-wiz-nav .btn.disabled { background: var(--grey-soft); color: var(--muted); box-shadow: none; animation: none; }
/* family action card (22 Oct): agree → Zizu check → Pay → Save → Previous / Next, one white card */
.fam-act .fam-pay { width: 100%; justify-content: center; margin-top: 10px; }
.fam-act .fam-save-row { margin: 10px 0 0; }
.fam-act .fam-wiz-nav { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.fam-act.nogood .fam-act-pay { display: none; }
.fam-act.nogood .fam-wiz-nav { margin-top: 0; padding-top: 0; border-top: 0; }
.fam-act #famHint:empty { display: none; }
/* Previous / Next now at the TOP of the family card (Zizu 22 Oct) */
.fam-act .fam-wiz-nav { margin: 0 0 14px; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--line); }
.fam-act.nogood .fam-wiz-nav { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.fam-clear-row { text-align: center; margin-top: 10px; }
.fam-clear-row .btn { margin-top: 6px; }

/* 23 Oct: fly-to-cart animation + cart bump */
.fly-to-cart { position: fixed; z-index: 200; object-fit: cover; border-radius: 12px; pointer-events: none;
  box-shadow: 0 10px 30px rgba(15, 27, 51, .35); transition: transform .7s cubic-bezier(.55, .06, .35, 1), opacity .7s ease-in; }
.cart-btn.bump { animation: cartBump .6s ease; }
.cart-btn.bump .cart-count { animation: cartPulse .6s ease; }
@keyframes cartBump { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-8deg); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes cartPulse { 40% { transform: scale(1.5); background: #f59e0b; } }
.cart-count[hidden] { display: none; }
.cart-msg.ok { background: var(--neon-soft); color: var(--neon-text); }
/* 23 Oct: paid box */
.pay-done { margin-top: 6px; }
.pay-done-head { display: flex; gap: 12px; align-items: center; background: var(--neon-soft); border: 1px solid var(--neon-line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.pay-done-head b { display: block; font-size: 18px; color: var(--neon-text); }
.pay-done-tick { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--neon); color: var(--neon-ink);
  display: grid; place-items: center; font-size: 22px; font-weight: 800; animation: pdPop .5s ease; }
@keyframes pdPop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.pay-done-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pay-done-cell { display: grid; gap: 5px; justify-items: center; text-align: center; font-size: 13px; }
.pay-done-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.pay-done-cell .btn { width: 100%; justify-content: center; }
.pay-done-zip { width: 100%; justify-content: center; margin-top: 12px; }
.pay-done-mail { margin-top: 12px; }
.pay-done-mailrow { display: flex; gap: 8px; }
.pay-done-mailrow .pay-input { flex: 1; min-width: 0; }
.pay-done-sent { background: var(--blue-soft); color: var(--blue); border-radius: 10px; padding: 8px 12px; font-weight: 600; margin: 0 0 8px; }
.pay-done-note { font-size: 13px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.pd-hide { display: none !important; }
.pay-done-grid.one { grid-template-columns: minmax(0, 240px); justify-content: center; }

/* 24 Oct */
.pack-has { display: block; font-size: 12px; font-weight: 500; opacity: .75; margin-top: 2px; }
.pay-done-zip { flex-direction: column; }
.cart-order .pack-has { text-align: center; margin: 4px 0 0; }
.cart-delall { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 14px; text-align: center; }
.cart-delall .btn { width: 100%; justify-content: center; }
.cart-delall p { font-size: 13px; margin: 6px 0 0; }
.fam-change-row { text-align: center; margin: 0 0 12px; }
/* homepage cart window: only the cart / pay window is shown, over the homepage */
html.embed, html.embed body { background: transparent !important; }
html.embed body * { visibility: hidden; }
html.embed .pay-modal, html.embed .pay-modal * { visibility: visible; }
html.embed .fly-to-cart { display: none; }
html.embed { color-scheme: normal !important; }

/* ---------- 24 Oct (Zizu): "Royal" gradient buttons ----------
   main buttons = deep indigo -> blue; the most important steps (pay / order) = black-indigo with a soft white shine.
   Pure CSS (no images), nothing extra to load. Disabled buttons keep their grey look. */
:root {
  --royal: linear-gradient(90deg, #1e1b4b 0%, #4338ca 50%, #2563eb 100%);
  --royal-shadow: 0 8px 22px rgba(67, 56, 202, .30);
  --royal-key: linear-gradient(135deg, #020617 0%, #1e1b4b 70%, #312e81 100%);
  --royal-key-shadow: 0 8px 20px rgba(2, 6, 23, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn.primary:not(:disabled):not(.disabled) {
  background: var(--royal); color: #fff; border-color: transparent; box-shadow: var(--royal-shadow);
  position: relative; overflow: hidden;
}
.btn.primary:not(:disabled):not(.disabled)::after {          /* soft white shine on the top half */
  content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .20), rgba(255, 255, 255, 0));
}
.btn.primary:not(:disabled):not(.disabled):hover { filter: brightness(1.1); box-shadow: 0 10px 28px rgba(67, 56, 202, .42); }
/* the most important buttons: pay / download / pay for the cart / check my payment / continue my order */
#downloadBtn:not(:disabled):not(.disabled), #famZip:not(:disabled):not(.disabled), #wizPay2:not(:disabled):not(.disabled),
#cartPay:not(:disabled):not(.disabled), #paySubmit:not(:disabled):not(.disabled) {
  background: var(--royal-key); box-shadow: var(--royal-key-shadow);
}
#downloadBtn:not(:disabled):not(.disabled):hover, #famZip:not(:disabled):not(.disabled):hover, #wizPay2:not(:disabled):not(.disabled):hover,
#cartPay:not(:disabled):not(.disabled):hover, #paySubmit:not(:disabled):not(.disabled):hover {
  filter: brightness(1.25); box-shadow: 0 10px 26px rgba(30, 27, 75, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* small brand touches that were green fills: logo, step circles, upload icons */
.logo, .fam-up-icon, .pay-drop-icon { background: var(--royal); color: #fff; }
html[data-theme="dark"] .btn.secondary { border-color: #2b3550; }

/* ---------- 24 Oct (Zizu): ALL buttons in the Royal style ----------
   white "secondary" buttons -> soft Royal (light indigo -> blue gradient, indigo text);
   the step buttons people press most (Family, Next person, Save to My photos, Add to my photos, Add spouse / child,
   Ask Demx on Telegram) -> full Royal gradient. Red "danger" buttons stay red (they delete / clear). */
.btn.secondary:not(:disabled):not(.disabled) {
  background: linear-gradient(90deg, #eef2ff 0%, #e0e7ff 50%, #dbeafe 100%); color: #312e81; border-color: #c7d2fe;
  box-shadow: 0 3px 10px rgba(67, 56, 202, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.btn.secondary:not(:disabled):not(.disabled):hover { border-color: #818cf8; box-shadow: 0 6px 16px rgba(67, 56, 202, .18); filter: brightness(1.02); }
html[data-theme="dark"] .btn.secondary:not(:disabled):not(.disabled) {
  background: linear-gradient(90deg, rgba(49, 46, 129, .55) 0%, rgba(67, 56, 202, .35) 50%, rgba(37, 99, 235, .30) 100%);
  color: #e0e7ff; border-color: #3730a3; box-shadow: none;
}
#famOpen:not(:disabled), #wizNext2:not(:disabled):not(.disabled), #famSave:not(:disabled), #addCartBtn:not(:disabled),
#addPersonBtn:not(:disabled), .btn.tg-link, #cartAddMore:not(:disabled) {
  background: var(--royal) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: var(--royal-shadow) !important; position: relative; overflow: hidden;
}
#famOpen::after, #wizNext2::after, #famSave::after, #addCartBtn::after, #addPersonBtn::after, .btn.tg-link::after, #cartAddMore::after {
  content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .20), rgba(255, 255, 255, 0));
}
#famOpen:hover, #wizNext2:hover, #famSave:hover, #addCartBtn:hover, #addPersonBtn:hover, .btn.tg-link:hover, #cartAddMore:hover { filter: brightness(1.1); }
/* person chips (Applicant / Spouse / Child): their own colour — violet -> pink */
.fam-chip.on { border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #7c3aed, #db2777) border-box;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .18); }
html[data-theme="dark"] .fam-chip.on { background: linear-gradient(#111a2e, #111a2e) padding-box, linear-gradient(90deg, #8b5cf6, #ec4899) border-box; }
.fam-chip.add { color: #6d28d9; border-color: #c4b5fd; background: linear-gradient(90deg, #f5f3ff, #fdf2f8); }
.fam-chip.add:hover { border-color: #8b5cf6; color: #5b21b6; }
html[data-theme="dark"] .fam-chip.add { color: #c4b5fd; border-color: #5b21b6; background: rgba(91, 33, 182, .15); }
/* scan beam (bug: on the FIRST family photo it only moved in the middle): animate "top" (always measured on the
   current box size) instead of a percentage transform (measured once, when the box was still small) */
.scanning .pp-beam { animation: ppBeamTop 2.6s cubic-bezier(.45, .05, .55, .95) infinite; transform: none; }
@keyframes ppBeamTop { from { top: -42%; } to { top: 100%; } }