/* ==========================================================================
   Gold Coin — design system
   Light theme (section 16 sets the visible colours), RTL-first, tuned for
   the mobile PWA shell.
   Tokens first, then layout, then components, then utilities.
   ========================================================================== */

/* Vazirmatn (Persian) — variable font, vendored under static/fonts/ so the
   page renders in the intended typeface even without CDN access (Iranian
   networks often block jsdelivr/unpkg). The `local()` line lets a user
   who already has Vazirmatn installed skip the network entirely. */
@font-face {
    font-family: "Vazirmatn";
    src: local("Vazirmatn"),
         url("../fonts/Vazirmatn.f6d31671339d.woff2") format("woff2-variations"),
         url("../fonts/Vazirmatn.f6d31671339d.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* brand */
    --accent: #dcae54;
    --accent-bright: #f3cc76;
    --accent-pale: #f8e6bd;
    --accent-deep: #a97d34;
    --accent-soft: rgb(var(--accent-rgb) / 0.28);
    --accent-line: rgb(var(--accent-rgb) / 0.16);
    --accent-glow: rgb(var(--accent-rgb) / 0.22);
    --accent-rgb: 220 174 84;

    /* surfaces */
    --bg: #070910;
    --surface: rgba(17, 23, 37, 0.72);
    --surface-solid: #131a29;
    --surface-raised: rgba(28, 37, 56, 0.85);
    --surface-sunken: rgba(8, 12, 20, 0.6);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.13);

    /* text */
    --text: #e8edf5;
    --text-dim: #a4b2c8;
    --text-faint: #7b8aa3;

    /* states */
    --green: #8fe3bd;
    --green-border: #2e7864;
    --green-bg: rgba(46, 120, 100, 0.16);
    --red: #ffadba;
    --red-border: #934558;
    --red-bg: rgba(147, 69, 88, 0.16);
    --yellow: #f2d597;
    --yellow-border: #8b7037;
    --yellow-bg: rgba(139, 112, 55, 0.16);

    /* shape */
    --r-xs: 9px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* depth */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);
    --shadow-accent: 0 10px 30px rgba(180, 132, 45, 0.28);

    /* motion */
    --ease: cubic-bezier(0.22, 0.75, 0.3, 1);
    --fast: 0.16s var(--ease);
    --slow: 0.35s var(--ease);

    /* component tokens (overridden by the light theme) */
    --text-strong: #ffffff;
    --btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), #131a29;
    --btn-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), #131a29;
    --btn-text: #eef3fb;
    --input-focus-bg: rgba(12, 18, 30, 0.8);
    --track: rgba(255, 255, 255, 0.07);
    --tick: rgba(255, 255, 255, 0.55);
    --ring-hole: #0d1422;
    --topbar-bg: rgba(9, 13, 22, 0.78);
    --bottom-nav-bg: rgba(9, 13, 22, 0.9);

    /* safe areas (PWA standalone) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

::selection { background: var(--accent-soft); color: #fff; }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Ambient light: a warm glow at the top, cool depth below. Fixed so it does
   not scroll away on long pages. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 50% -12%, rgb(var(--accent-rgb) / 0.16), transparent 62%),
        radial-gradient(700px 480px at 88% 8%, rgba(72, 108, 180, 0.13), transparent 60%),
        radial-gradient(800px 600px at 8% 30%, rgba(46, 120, 100, 0.09), transparent 62%),
        linear-gradient(180deg, #0d1220 0%, #090c15 45%, #06080e 100%);
}

h1, h2, h3, h4 { line-height: 1.5; font-weight: 700; }
h1 { font-size: clamp(21px, 5vw, 27px); }
h2 { font-size: clamp(18px, 4.2vw, 22px); }
h3 { font-size: 17px; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent-bright);
    text-decoration: none;
    transition: color var(--fast);
}
a:hover { color: var(--accent-pale); }

:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Numbers read better aligned and always LTR, even inside Persian text. */
.num, .metric .value, .wallet-card .balance, .history-date, .score-ring b {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgb(var(--accent-rgb) / 0.18);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent-rgb) / 0.32); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 22px 16px calc(84px + var(--safe-bottom));
    animation: page-in 0.4s var(--ease) both;
}

@media (min-width: 721px) {
    .container { padding-bottom: 72px; }
}

.stack > * + * { margin-top: 14px; }

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(10px + var(--safe-top)) 16px 10px;
    border-bottom: 1px solid var(--accent-line);
    background: var(--topbar-bg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 15px;
    color: #f8efdc;
    text-decoration: none;
    white-space: nowrap;
}
.topbar .brand:hover { color: #fff; }

.brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 3px 12px rgb(var(--accent-rgb) / 0.35);
    color: #2a1d06;
    font-size: 15px;
}
.brand-mark svg,
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.topbar .nav {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
}

.nav-link {
    position: relative;
    padding: 6px 10px;
    border-radius: var(--r-xs);
    color: var(--text-dim);
    transition: color var(--fast), background var(--fast);
}
.nav-link:hover { color: var(--accent-bright); background: rgb(var(--accent-rgb) / 0.08); }
.nav-link.is-active { color: var(--accent-bright); background: rgb(var(--accent-rgb) / 0.12); }

.topbar .credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.07));
    border: 1px solid var(--accent-soft);
    border-radius: var(--r-pill);
    padding: 5px 12px;
    color: var(--accent-bright);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Links that move into the bottom bar on phones. */
@media (max-width: 720px) {
    .topbar .nav .nav-link,
    .topbar .nav .logout-form { display: none; }

    /* Slim top bar on phones so more of the page is visible. */
    .topbar { padding: calc(5px + var(--safe-top)) 12px 5px; gap: 8px; }
    .topbar .brand { font-size: 14px; gap: 7px; }
    .brand-mark { width: 28px; height: 28px; }
    .topbar .credits-pill { padding: 2px 10px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   5. Bottom navigation (phones / installed PWA)
   -------------------------------------------------------------------------- */
.bottom-nav {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    padding: 8px 10px calc(8px + var(--safe-bottom));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--accent-line);
    background: var(--bottom-nav-bg);
}

@media (max-width: 720px) {
    .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
}

.bottom-nav a, .bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 6px 2px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--fast), background var(--fast);
}
/* Slimmer tab bar: 44px tap targets, smaller icon and label spacing. */
@media (max-width: 720px) {
    .bottom-nav { padding: 3px 6px calc(3px + var(--safe-bottom)); gap: 2px; }
    .bottom-nav a, .bottom-nav button { min-height: 44px; padding: 3px 2px; gap: 1px; font-size: 10.5px; }
    .bottom-nav .ico svg { width: 20px; height: 20px; }
}
.bottom-nav form { display: flex; }
.bottom-nav form button { width: 100%; }
.bottom-nav .ico { font-size: 18px; line-height: 1; display: grid; place-items: center; }
.bottom-nav .ico svg { width: 22px; height: 22px; }
.bottom-nav a.is-active .ico svg { stroke-width: 2.1; }
.bottom-nav a.is-active { color: var(--accent-bright); background: rgb(var(--accent-rgb) / 0.1); }
.bottom-nav a:hover, .bottom-nav button:hover { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */
.card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)) ,
        var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    animation: rise-in 0.45s var(--ease) both;
}

.card > h3:first-child, .card > h2:first-child { margin-top: 0; }

.hero {
    position: relative;
    overflow: hidden;
    padding: 26px 24px;
    margin-bottom: 16px;
    border: 1px solid var(--accent-soft);
    border-radius: var(--r-xl);
    background:
        radial-gradient(520px 260px at 88% -30%, rgb(var(--accent-rgb) / 0.22), transparent 70%),
        linear-gradient(125deg, #18233a, #0d1322 70%);
    box-shadow: var(--shadow-lg);
    animation: rise-in 0.45s var(--ease) both;
}
.hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -70px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgb(var(--accent-rgb) / 0.14), transparent 68%);
    pointer-events: none;
}
.hero h1 {
    margin: 0 0 10px;
    background: linear-gradient(105deg, #fff6e4 12%, var(--accent-bright) 58%, #d09f45 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p { color: var(--text-dim); margin: 0; line-height: 1.9; font-size: 14px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--accent-soft);
    background: rgb(var(--accent-rgb) / 0.1);
    color: var(--accent-bright);
    font-size: 11.5px;
    font-weight: 700;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 4px 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-line), transparent);
}

.card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-number {
    width: 38px; height: 38px; display: grid; place-items: center;
    background: rgb(var(--accent-rgb) / .12); border: 1px solid var(--accent-soft);
    border-radius: 11px; color: var(--accent-bright); font-size: 17px; font-weight: 700; flex-shrink: 0;
}
.card-heading h3 { margin: 0; font-size: 17px; }
.card-heading p { margin: 0; font-size: 11.5px; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-text);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
button:hover, .btn:hover {
    border-color: var(--accent-soft);
    background: var(--btn-bg-hover);
    transform: translateY(-1px);
}
button:active, .btn:active { transform: translateY(0); }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
    background: linear-gradient(135deg, #f6dda0 0%, #e2b45f 45%, #c2913f 100%);
    border-color: rgba(255, 236, 196, 0.55);
    color: #241903;
    font-weight: 800;
    width: 100%;
    box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #fce7b4 0%, #eec070 45%, #cf9d47 100%);
    border-color: #ffeccc;
    box-shadow: 0 14px 34px rgba(180, 132, 45, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

a.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 236, 196, 0.55);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background var(--fast), box-shadow var(--fast), transform var(--fast);
}
a.btn-primary:hover { color: #241903; transform: translateY(-1px); }
.btn-inline { width: auto; padding: 12px 30px; }
.topup-package > .btn-primary { flex: none; white-space: nowrap; padding: 10px 20px; }

/* Links inside running text get an underline so they don't rely on color alone. */
p a:not([class]), .footnote a:not([class]), .field-hint a:not([class]), .auth-alt a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent-soft);
}
.btn-ghost {
    background: transparent;
    border-color: var(--accent-soft);
    color: var(--accent-bright);
}
.btn-ghost:hover { background: rgb(var(--accent-rgb) / 0.1); }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 12px; border-radius: var(--r-xs); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.field-row { margin-bottom: 14px; }
.field-row label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 6px;
}

input[type="file"], input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="tel"], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-soft);
    background: var(--input-focus-bg);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder { color: var(--text-faint); }

input[type="file"] { padding: 9px 12px; cursor: pointer; }
input[type="file"]::file-selector-button {
    margin-inline-end: 10px;
    padding: 7px 14px;
    border: 1px solid var(--accent-soft);
    border-radius: var(--r-xs);
    background: rgb(var(--accent-rgb) / 0.12);
    color: var(--accent-bright);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.field-error { color: var(--red); font-size: 12px; margin-top: 5px; }
.field-hint { color: var(--text-faint); font-size: 11.5px; margin-top: 5px; line-height: 1.7; }

.auth-form { max-width: 400px; margin: 36px auto; }
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-head .brand-mark { width: 56px; height: 56px; margin: 0 auto 12px; }
.auth-head .brand-mark svg,
.auth-head .brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.auth-intro { font-size: 13.5px; color: var(--text-dim); line-height: 1.9; margin: 0 0 14px; text-align: center; }
.auth-intro b { color: var(--text); }
.auth-head h2 { margin: 0 0 6px; }
.auth-head p { color: var(--text-dim); font-size: 13px; margin: 0; }
.auth-alt { font-size: 13px; margin-top: 18px; text-align: center; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   9. Messages, badges, notices
   -------------------------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    margin-bottom: 8px;
    font-size: 13px;
    background: var(--surface);
    animation: slide-in 0.3s var(--ease) both;
}
.messages li.success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.messages li.error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.messages li.warning { background: var(--yellow-bg); border-color: var(--yellow-border); color: var(--yellow); }

.disclaimer-badge {
    display: flex;
    gap: 10px;
    background: rgba(235, 87, 87, 0.07);
    border: 1px solid rgba(235, 87, 87, 0.24);
    border-radius: var(--r-md);
    padding: 13px 16px;
    font-size: 12.5px;
    color: #ffb3b3;
    margin-bottom: 16px;
    line-height: 1.85;
}
.disclaimer-badge b { color: #ffd0d0; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    width: fit-content;
}
.status-badge.status-pending, .status-badge.status-processing { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
.status-badge.status-failed { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.status-badge.status-verdict-green { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.status-badge.status-verdict-red { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.status-badge.status-verdict-yellow { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }

/* --------------------------------------------------------------------------
   10. Landing
   -------------------------------------------------------------------------- */
.hero-coin {
    width: 108px;
    height: 108px;
    margin-bottom: 16px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: transparent;
    box-shadow: 0 14px 40px rgba(199, 150, 60, 0.35);
    animation: float 5s ease-in-out infinite;
}
.hero-coin svg,
.hero-coin img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } }

.feature {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color var(--slow), transform var(--slow), box-shadow var(--slow);
}
.feature:hover { border-color: var(--accent-soft); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature .ico {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 12px; font-size: 19px; margin-bottom: 11px;
    background: rgb(var(--accent-rgb) / 0.12);
    border: 1px solid var(--accent-line);
}
.feature h4 { margin: 0 0 5px; font-size: 14.5px; color: var(--accent-pale); }
.feature p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.85; }

.steps-list { display: grid; gap: 12px; }
.step-item { display: flex; gap: 13px; align-items: flex-start; }
.step-item .step-number { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
.step-item h4 { margin: 3px 0 2px; font-size: 14px; }
.step-item p { margin: 0; font-size: 12.5px; color: var(--text-dim); }

.cta-card { text-align: center; }
.cta-card .note { font-size: 12px; color: var(--text-faint); margin-top: 12px; }

/* --------------------------------------------------------------------------
   11. Analyze flow
   -------------------------------------------------------------------------- */
.flow-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 11.5px;
}
.flow-steps .fs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-faint);
    white-space: nowrap;
}
.flow-steps .fs i {
    width: 21px; height: 21px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--line-strong);
    font-style: normal; font-size: 11px; font-weight: 700;
}
.flow-steps .fs.done { color: var(--accent-bright); }
.flow-steps .fs.done i { border-color: var(--accent-soft); background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-bright); }
.flow-steps .sep { flex: 1; height: 1px; background: var(--line-strong); min-width: 8px; }

.flow-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.flow-head h3 { margin: 0; font-size: 16px; }
.flow-head .btn-sm { white-space: nowrap; flex: none; }

.coin-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
@media (max-width: 520px) { .coin-type-grid { grid-template-columns: 1fr; } }

.coin-type-btn {
    position: relative;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    min-height: 74px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border-radius: var(--r-md);
}
.coin-type-btn .sub { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.coin-type-btn:hover { border-color: var(--accent-soft); }
.coin-type-btn.selected {
    border-color: var(--accent);
    background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.06));
    color: var(--accent-pale);
    box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.25);
}
.coin-type-btn.selected::after {
    content: "✓";
    position: absolute;
    top: 8px;
    inset-inline-end: 10px;
    width: 19px; height: 19px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #241903;
    font-size: 12px;
    font-weight: 800;
}
.coin-type-btn.has-photo { padding-top: 12px; }
.coin-type-btn .coin-btn-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    background: #1a1409;
}
.coin-type-btn.is-locked,
.coin-type-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--text-faint);
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02) 8px,
        rgba(255, 255, 255, 0.05) 8px,
        rgba(255, 255, 255, 0.05) 16px
    );
    filter: grayscale(0.4);
}
.coin-type-btn.is-locked:hover,
.coin-type-btn[disabled]:hover { border-color: var(--border); }

/* Inline info callouts used on the analyze flow */
.tip-callout {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: rgb(var(--accent-rgb) / 0.10);
    border: 1px dashed var(--accent-soft);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.85;
}
.tip-callout b { color: var(--accent-bright); }
.retry-callout {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: rgb(var(--accent-rgb) / 0.10);
    border-inline-start: 4px solid var(--accent-soft);
    font-size: 13px;
    color: var(--text);
    line-height: 1.85;
}
.retry-callout b { color: var(--accent-bright); }
.coin-type-btn.recommended {
    border-color: rgba(120, 200, 140, 0.5);
    background: rgba(80, 160, 100, 0.06);
}
.coin-type-btn.recommended:hover { border-color: rgba(160, 220, 170, 0.7); }

/* Capture step: short tips above the shoot button, then the answer of the
   photo check above the circle editor. */
.shoot-tips {
    list-style: none;
    max-width: 480px;
    margin: 4px auto 14px;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-dim);
}
.shoot-tips li {
    padding: 7px 12px;
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    border-inline-start: 3px solid var(--accent-soft);
}
.shoot-tips b { color: var(--accent-bright); }
#capture-shoot-btn { max-width: 480px; margin: 0 auto; display: flex; }
#capture-status { max-width: 480px; margin: 10px auto 0; text-align: center; font-size: 13px; color: var(--text-dim); }

.check-box {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text);
}
.check-box > b { display: block; }
.check-box small { display: block; margin-top: 8px; color: var(--text-dim); font-size: 12px; }
.check-ok { background: var(--green-bg); border-color: var(--green-border); }
.check-ok > b { color: var(--green); }
.check-warn { background: var(--yellow-bg); border-color: var(--yellow-border); }
.check-warn > b { color: var(--yellow); }
.check-bad { background: var(--red-bg); border-color: var(--red-border); }
.check-bad > b { color: var(--red); }
.check-box .issues-list { color: var(--text); }

.editor-frame {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0b1120;
    box-shadow: var(--shadow-md);
}
.editor-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.editor-toolbar .btn-row { justify-content: center; flex-wrap: wrap; gap: 6px; }

/* Processing state */
.spinner-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-bright);
    font-size: 13.5px;
    padding: 18px 20px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-bottom: 16px;
}
.spinner-dot {
    width: 22px; height: 22px; flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgb(var(--accent-rgb) / 0.22);
    border-top-color: var(--accent-bright);
    background: none;
    animation: spin 0.9s linear infinite;
}

/* --------------------------------------------------------------------------
   12. Results
   -------------------------------------------------------------------------- */
.result-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    padding: 22px;
    margin: 16px 0;
    border: 1px solid;
    box-shadow: var(--shadow-md);
    animation: rise-in 0.4s var(--ease) both;
}
.result-box h2 { margin: 0 0 10px; font-size: 19px; }
.result-box .body { line-height: 1.95; font-size: 13.5px; opacity: 0.92; }
.result-green { background: linear-gradient(125deg, #102b28, #0f1c29); border-color: var(--green-border); color: var(--green); }
.result-red { background: linear-gradient(125deg, #331c28, #1c1927); border-color: var(--red-border); color: var(--red); }
.result-yellow { background: linear-gradient(125deg, #302817, #1c2029); border-color: var(--yellow-border); color: var(--yellow); }
.result-box::after {
    content: "";
    position: absolute;
    top: -60px;
    inset-inline-start: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor, transparent 68%);
    opacity: 0.08;
    pointer-events: none;
}

.metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 720px) { .metrics-row { grid-template-columns: 1fr; } }

.metric {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 16px 14px;
    text-align: center;
}
.metric .value { font-size: 23px; font-weight: 800; color: var(--text-strong); line-height: 1.3; }
.metric .label { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.metric .sub { font-size: 11px; color: var(--accent-bright); margin-top: 3px; }

/* Horizontal score meter. Value comes in as `--v` (0–100); the optional
   threshold tick uses `--t`. Fills from the start edge, so RTL-safe. */
.meter {
    position: relative;
    height: 7px;
    margin-top: 10px;
    border-radius: var(--r-pill);
    background: var(--track);
}
.meter > span {
    display: block;
    height: 100%;
    width: calc(var(--v, 0) * 1%);
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
    transition: width 0.7s var(--ease);
}
.meter.is-green > span { background: linear-gradient(90deg, #2e7864, #8fe3bd); }
.meter.is-red > span { background: linear-gradient(90deg, #934558, #ffadba); }
.meter-tick {
    position: absolute;
    top: -2px;
    inset-inline-start: calc(var(--t, 0) * 1%);
    width: 2px;
    height: 11px;
    background: var(--tick);
    border-radius: 2px;
}

/* Circular overall score */
.score-ring {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 4px auto 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--accent-bright) calc(var(--v, 0) * 1%), var(--track) 0);
}
.score-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--ring-hole);
}
.score-ring b {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   13. History
   -------------------------------------------------------------------------- */
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }

.history-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.history-card:hover { border-color: var(--accent-soft); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.history-thumbs { display: flex; background: #05070c; }
.history-thumbs img {
    width: 50%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    transition: opacity var(--fast);
}
.history-card:hover .history-thumbs img { opacity: 0.88; }

.history-meta { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; }
.history-coin-type { font-size: 12px; color: var(--accent-bright); font-weight: 700; }
.history-date { font-size: 11px; color: var(--text-faint); text-align: right; }
.history-note {
    font-size: 11.5px;
    color: var(--text-dim);
    background: rgb(var(--accent-rgb) / 0.08);
    border-inline-start: 2px solid var(--accent-soft);
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Personal note editor on the detail page. */
.user-note-card { margin-top: 18px; }
.user-note-textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: rgba(11, 17, 32, 0.55);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.7;
    resize: vertical;
    box-sizing: border-box;
}
.user-note-textarea:focus {
    outline: none;
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15);
}
.user-note-textarea::placeholder { color: var(--text-faint); }
:root[data-theme="light"] .user-note-textarea { background: #ffffff; }

.history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-dim);
}
.history-pagination a {
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
}
.history-pagination a:hover { border-color: var(--accent-soft); background: rgb(var(--accent-rgb) / 0.08); }

.history-detail-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.history-detail-images figure { margin: 0; }
.history-detail-images figcaption { font-size: 12px; color: var(--text-dim); margin-bottom: 7px; }
.history-detail-images img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: #05070c;
}
@media (max-width: 520px) { .history-detail-images { grid-template-columns: 1fr; } }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 12px;
}
.back-link:hover { color: var(--accent-bright); }

.empty-state { text-align: center; padding: 34px 20px; }
.empty-state .ico {
    width: 70px; height: 70px; margin: 0 auto 14px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.09);
    border: 1px solid var(--accent-line);
    font-size: 30px;
}
.empty-state h3 { margin: 0 0 6px; }
.empty-state p { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; }

.issues-list { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13px; color: var(--text-dim); }
.issues-list li { margin-bottom: 5px; }

/* --------------------------------------------------------------------------
   14. Wallet & top-up
   -------------------------------------------------------------------------- */
.wallet-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(420px 200px at 82% -40%, rgb(var(--accent-rgb) / 0.26), transparent 70%),
        linear-gradient(145deg, #1b2539, #0f1626);
    border: 1px solid var(--accent-soft);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 18px;
    box-shadow: var(--shadow-lg);
}
.wallet-card h4 { margin: 0; color: var(--accent-bright); font-size: 13.5px; letter-spacing: .2px; }
.wallet-card .balance {
    margin: 8px 0 4px;
    font-size: 44px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 6px 26px rgb(var(--accent-rgb) / 0.28);
}
.wallet-card p { margin: 0; font-size: 12.5px; color: var(--text-dim); }

.topup-packages { display: grid; gap: 11px; }
.topup-package {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 15px 16px;
    background: var(--surface-sunken);
    transition: border-color var(--fast), transform var(--fast);
}
.topup-package:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.topup-package.is-featured {
    border-color: var(--accent-soft);
    background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.03));
}
.topup-package .pkg-label { font-weight: 700; font-size: 14px; }
.topup-package .pkg-price { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.pkg-tag {
    display: inline-block;
    margin-inline-start: 7px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #241903;
    font-size: 10.5px;
    font-weight: 800;
}
.pkg-tag--vip { background: linear-gradient(90deg, #b98530, #efc776 55%, #b98530); color: #1a1102; }
.topup-package.is-vip {
    border-color: rgb(var(--accent-rgb) / 0.55);
    background: linear-gradient(150deg, rgb(var(--accent-rgb) / 0.14), rgba(120, 82, 20, 0.08));
}
.topup-package.is-locked-pkg {
    opacity: 0.55;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02) 8px,
        rgba(255, 255, 255, 0.05) 8px,
        rgba(255, 255, 255, 0.05) 16px
    );
    filter: grayscale(0.5);
}
.topup-package.is-locked-pkg button[disabled] { cursor: not-allowed; }
.topup-package .pkg-note { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; max-width: 340px; line-height: 1.7; }

.footnote { font-size: 11.5px; color: var(--text-faint); margin-top: 14px; line-height: 1.8; }

.grid-2-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2-lg { grid-template-columns: 1fr; } }

.disabled-input {
    width: 100%; padding: 10px 12px;
    background: rgba(11, 17, 32, 0.35);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    color: var(--text-faint);
    font: inherit; font-size: 13.5px;
    cursor: not-allowed;
    box-sizing: border-box;
}
:root[data-theme="light"] .disabled-input { background: var(--surface-sunken); }

.profile-links {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 14px;
}
.profile-link {
    display: flex; flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    transition: border-color var(--fast), background var(--fast);
}
.profile-link:hover {
    border-color: var(--accent-soft);
    background: rgb(var(--accent-rgb) / 0.08);
    text-decoration: none;
}
.profile-link .muted { font-size: 11.5px; }

.nav-icon-link {
    padding-inline: 8px !important;
    font-size: 18px !important;
    display: inline-grid;
    place-items: center;
}
.nav-icon-link svg { width: 20px; height: 20px; }
.credits-pill svg { width: 15px; height: 15px; flex: none; }

.referral-card { border: 1px solid rgb(var(--accent-rgb) / 0.35); }
.referral-card .card-heading p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); }
.ref-code-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
@media (max-width: 620px) { .ref-code-wrap { grid-template-columns: 1fr; } }
.ref-code-block {
    background: rgb(var(--accent-rgb) / 0.08);
    border: 1px dashed var(--accent-soft);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    text-align: center;
}
.ref-label { color: var(--text-dim); font-size: 11px; margin-bottom: 6px; }
.ref-code-value {
    font-family: 'Vazirmatn', 'Segoe UI', ui-monospace, monospace;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--accent-bright);
    direction: ltr;
    margin-bottom: 10px;
    user-select: all;
}
.ref-link-value {
    font-size: 12px;
    color: var(--text-dim);
    word-break: break-all;
    background: rgba(0, 0, 0, 0.15);
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    user-select: all;
    max-height: 3.6em;
    overflow: hidden;
}

.ref-progress { margin-top: 14px; }
.ref-progress-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; font-size: 12.5px; margin-bottom: 6px;
}
.ref-bar {
    height: 10px;
    background: rgb(var(--accent-rgb) / 0.12);
    border-radius: var(--r-pill);
    overflow: hidden;
    border: 1px solid rgb(var(--accent-rgb) / 0.25);
}
.ref-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #b98530, #efc776);
    transition: width var(--fast);
    min-width: 4%;
}
.ref-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; text-align: center; }

.site-footer {
    text-align: center;
    padding: 22px 20px calc(24px + var(--safe-bottom));
    font-size: 11.5px;
    color: var(--text-faint);
    border-top: 1px solid var(--line);
    background: rgba(9, 13, 22, 0.4);
}
.site-footer .footer-brand { color: var(--text-dim); margin-bottom: 10px; }
.site-footer .footer-disclaimer {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.85;
    font-size: 11px;
    color: var(--text-faint);
    opacity: 0.85;
}
.site-footer .footer-disclaimer b { color: var(--text-dim); font-weight: 700; }
/* Bottom-nav sits on top of it on phones, so keep the footer, just push it
   above the tab bar so its text doesn't hide behind. */
@media (max-width: 720px) {
    .site-footer { padding-top: 14px; padding-bottom: calc(60px + var(--safe-bottom)); font-size: 10.5px; }
    .site-footer .footer-disclaimer { font-size: 10.5px; }
    /* Guest layout has no bottom-nav, so the extra bottom padding just
       leaves a big empty gap under the footer credits — shave it back. */
    body:not(:has(.bottom-nav)) .site-footer { padding-bottom: calc(16px + var(--safe-bottom)); }
}



/* --------------------------------------------------------------------------
   Promo bar (sits above the topbar; sponsored external link)
   -------------------------------------------------------------------------- */
.promo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 10px;
    padding-top: calc(4px + var(--safe-top));
    background:
        linear-gradient(90deg, #b98530 0%, #efc776 45%, #b98530 100%);
    color: #2a1d05;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.20);
    position: relative;
    z-index: 40;
    transition: filter var(--fast);
}
.promo-bar:hover { filter: brightness(1.06); color: #1a1102; }
.promo-bar .promo-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.28);
    color: #241903;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    flex: 0 0 auto;
}
.promo-bar .promo-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.promo-bar .promo-text b { font-weight: 800; }
.promo-bar .promo-cta {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: #241903;
    color: #f3cc76;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

/* Promo bar scrolls with the page; the topbar can keep its own sticky
   behavior beneath it. */

@media (max-width: 480px) {
    .promo-bar { font-size: 11.5px; gap: 7px; padding-inline: 10px; }
    .promo-bar .promo-tag { display: none; }
}



/* --------------------------------------------------------------------------
   Sequential capture progress badges (analyze camera step)
   -------------------------------------------------------------------------- */
.capture-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-faint);
}
.capture-progress > span:not(.sep) {
    padding: 5px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.03);
    min-width: 72px;
    text-align: center;
}
.capture-progress .active {
    color: var(--accent-bright);
    border-color: var(--accent-soft);
    background: rgb(var(--accent-rgb) / 0.12);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.08);
}
.capture-progress .done {
    color: var(--green);
    border-color: var(--green-border);
    background: var(--green-bg);
}
.capture-progress .sep {
    flex: 0 0 24px;
    height: 1px;
    background: var(--line-strong);
}

/* --------------------------------------------------------------------------
   15. Utilities & motion
   -------------------------------------------------------------------------- */
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   16. Light theme — the only theme the site shows (<html data-theme="light">
   is fixed; there is no dark mode switch). White surfaces on a cool grey
   page, slate text, blue as the accent and call to action, and gold kept
   for the coin and for credit. The rules above this section still carry
   the old dark values; everything visible is set here.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;

    /* accent: blue for everything the user acts on or that marks "where am I" */
    --accent: #2563eb;
    --accent-bright: #1e40af;   /* accent text: >= 7:1 on every light surface */
    --accent-pale: #1e3a8a;
    --accent-deep: #1d4ed8;
    --accent-soft: rgb(var(--accent-rgb) / 0.32);
    --accent-line: rgb(var(--accent-rgb) / 0.16);
    --accent-glow: rgb(var(--accent-rgb) / 0.14);
    --accent-rgb: 37 99 235;
    --accent-tint: #eef4ff;     /* quiet fill behind selected / active things */

    /* credit (wallet, packages, referral, advert strip): a muted sand,
       the neutral warm counterpart of the blue (navy and beige) */
    --coin: #a08560;
    --coin-ink: #6b5537;
    --coin-bg: #f6f1e7;
    --coin-line: #e2d6c1;

    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f5f7fb;
    --line: #e3e8f0;
    --line-strong: #cdd5e1;

    --text: #0f172a;
    --text-dim: #334155;
    --text-faint: #5b6b82;

    --green: #15803d;
    --green-border: rgba(21, 128, 61, 0.35);
    --green-bg: #eef8f1;        /* solid tints: they sit on white and on grey panels alike */
    --red: #b91c1c;
    --red-border: rgba(185, 28, 28, 0.32);
    --red-bg: #fdf2f2;
    --yellow: #8a5a0b;
    --yellow-border: rgba(200, 146, 26, 0.45);
    --yellow-bg: #fff8e6;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 4px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 22px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.06), 0 18px 44px rgba(15, 23, 42, 0.09);
    --shadow-accent: 0 6px 16px rgba(29, 78, 216, 0.24);

    --text-strong: #0f172a;
    --btn-bg: #ffffff;
    --btn-bg-hover: var(--accent-tint);
    --btn-text: #0f172a;
    --input-focus-bg: #ffffff;
    --track: #e3e8f0;
    --tick: rgba(15, 23, 42, 0.5);
    --ring-hole: #ffffff;
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --bottom-nav-bg: rgba(255, 255, 255, 0.96);
}

:root[data-theme="light"] body::before {
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(37, 99, 235, 0.07), transparent 62%),
        linear-gradient(180deg, #f7f9fc 0%, #f4f6fa 100%);
}
:root[data-theme="light"] ::selection { background: rgba(37, 99, 235, 0.2); color: #0f172a; }

/* Top bar and tab bar: white, separated from the page by a hairline */
:root[data-theme="light"] .topbar {
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 4px 14px rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] .topbar .brand { color: #0f172a; }
:root[data-theme="light"] .topbar .brand:hover { color: var(--accent-bright); }
:root[data-theme="light"] .brand-mark { box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .nav-link:hover { background: var(--surface-sunken); }
:root[data-theme="light"] .nav-link.is-active { background: var(--accent-tint); }
:root[data-theme="light"] .topbar .credits-pill {
    background: var(--coin-bg);
    border-color: var(--coin-line);
    color: var(--coin-ink);
    box-shadow: none;
}
:root[data-theme="light"] .bottom-nav {
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
}
:root[data-theme="light"] .bottom-nav a.is-active { background: var(--accent-tint); }

/* Advert strip above the top bar */
:root[data-theme="light"] .promo-bar {
    background: var(--coin-bg);
    color: #4f3f28;
    border-bottom: 1px solid var(--coin-line);
    box-shadow: none;
}
:root[data-theme="light"] .promo-bar:hover { filter: none; background: #efe7d8; color: #3f3220; }
:root[data-theme="light"] .promo-bar .promo-tag { background: rgba(107, 85, 55, 0.1); color: #4f3f28; }
:root[data-theme="light"] .promo-bar .promo-cta { background: var(--accent-deep); color: #ffffff; }

/* Hero: a light panel at the top of each page */
:root[data-theme="light"] .hero {
    background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 55%, #e6eeff 100%);
    border: 1px solid #d8e3f6;
    box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .hero::after {
    background: radial-gradient(circle at 35% 30%, rgba(37, 99, 235, 0.07), transparent 68%);
}
:root[data-theme="light"] .hero h1 {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #0f172a;
}
:root[data-theme="light"] .hero .eyebrow,
:root[data-theme="light"] .eyebrow { background: #ffffff; border-color: var(--accent-soft); }

/* Content blocks: white cards with a clear border on the neutral page */
:root[data-theme="light"] .card,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .flow-steps,
:root[data-theme="light"] .metric,
:root[data-theme="light"] .history-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .feature:hover,
:root[data-theme="light"] .history-card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-md); }
:root[data-theme="light"] .feature .ico { background: var(--accent-tint); border-color: var(--accent-line); }
:root[data-theme="light"] .section-title::after { background: linear-gradient(90deg, var(--line-strong), transparent); height: 1px; opacity: 1; }

/* Step numbers */
:root[data-theme="light"] .step-number {
    background: var(--accent-tint);
    border-color: var(--accent-line);
    color: var(--accent-bright);
}

/* Buttons */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] a.btn-primary {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #ffffff;
    box-shadow: var(--shadow-accent);
}
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] a.btn-primary:hover {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3);
}
:root[data-theme="light"] .btn-ghost { border-color: var(--accent-soft); color: var(--accent-bright); }
:root[data-theme="light"] .btn-ghost:hover { background: var(--accent-tint); }

/* Choice tiles */
:root[data-theme="light"] .coin-type-btn:hover { border-color: var(--accent); }
:root[data-theme="light"] .coin-type-btn.selected {
    border: 2px solid var(--accent);
    background: var(--accent-tint);
    color: var(--accent-pale);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
:root[data-theme="light"] .coin-type-btn.selected::after { background: var(--accent-deep); color: #ffffff; }
:root[data-theme="light"] .coin-type-btn.recommended { border-color: var(--accent-soft); background: var(--accent-tint); }
:root[data-theme="light"] .flow-steps .fs.done i { background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; }

/* Inner areas */
:root[data-theme="light"] .topup-package,
:root[data-theme="light"] .profile-link { background: var(--surface-sunken); border-color: var(--line); }
:root[data-theme="light"] .topup-package:hover,
:root[data-theme="light"] .profile-link:hover { border-color: var(--accent-soft); background: var(--accent-tint); }
:root[data-theme="light"] .topup-package.is-featured,
:root[data-theme="light"] .topup-package.is-vip { background: var(--coin-bg); border-color: var(--coin-line); }
:root[data-theme="light"] .photo-recipe { background: var(--surface-sunken); border-color: var(--line); }
:root[data-theme="light"] .capture-progress > span:not(.sep) { background: var(--surface-sunken); }
:root[data-theme="light"] .ref-code-block { background: var(--coin-bg); border-color: var(--coin-line); }
:root[data-theme="light"] .ref-link-value { background: var(--surface-sunken); }
:root[data-theme="light"] .tip-callout { background: var(--accent-tint); border-color: var(--accent-line); }
:root[data-theme="light"] .site-footer { background: #eef1f6; border-top-color: var(--line); }
:root[data-theme="light"] .editor-frame { background: #e9edf4; }

/* Inputs */
:root[data-theme="light"] input[type="file"],
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: #ffffff; border-color: var(--line-strong); }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus { border-color: var(--accent); }

/* Red notice */
:root[data-theme="light"] .disclaimer-badge { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
:root[data-theme="light"] .disclaimer-badge b { color: var(--red); }

/* Trust-badge logos are gold-tinted PNGs; show them as dark marks. */
:root[data-theme="light"] .trust-badge img { filter: brightness(0) opacity(0.7); }

/* Support bot */
:root[data-theme="light"] .sb-header { background: var(--accent-tint); border-bottom-color: var(--line); }
:root[data-theme="light"] .sb-close { color: var(--text-dim); }
:root[data-theme="light"] .sb-msg--user { background: var(--accent-tint); border-color: var(--accent-line); }
:root[data-theme="light"] .sb-launcher { background: var(--accent-deep); color: #ffffff; box-shadow: var(--shadow-accent); }
:root[data-theme="light"] .sb-hint { background: var(--accent-deep); color: #ffffff; }
:root[data-theme="light"] .sb-hint::after { background: var(--accent-deep); }
:root[data-theme="light"] .sb-submit { background: var(--accent-deep); color: #ffffff; }

:root[data-theme="light"] .pkg-tag { background: var(--accent-deep); color: #ffffff; }
:root[data-theme="light"] .pkg-tag--vip { background: var(--coin-bg); border: 1px solid var(--coin-line); color: var(--coin-ink); }
:root[data-theme="light"] .ref-bar > span { background: var(--accent-deep); }
:root[data-theme="light"] .hero-coin { box-shadow: 0 0 0 1px var(--line-strong), 0 12px 30px rgba(15, 23, 42, 0.16); }
.hero.center .hero-coin { margin-inline: auto; }

/* Wallet: a light card with a sand heading */
.wallet-card {
    --text-dim: #a4b2c8;
    --accent-bright: #f3cc76;
    color: #e8edf5;
}
:root[data-theme="light"] .wallet-card {
    --text-dim: #334155;
    --accent-bright: var(--coin-ink);
    background:
        radial-gradient(420px 200px at 85% -40%, rgba(160, 133, 96, 0.16), transparent 70%),
        linear-gradient(145deg, #ffffff, #f3f7ff);
    border-color: #d8e3f6;
    color: #0f172a;
    box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .wallet-card .balance { color: #0f172a; text-shadow: none; }

/* --------------------------------------------------------------------------
   Support bot widget (floating chat + FAQ + ticket form)
   -------------------------------------------------------------------------- */
.sb-launcher {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(16px + var(--safe-bottom));
    z-index: 60;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3cc76, #b98c38 62%, #8a642a);
    color: #241903;
    font-size: 19px;
    border: none;
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    cursor: pointer;
    display: grid; place-items: center;
    transition: transform var(--fast), box-shadow var(--fast);
}
.sb-launcher:hover { transform: translateY(-2px) scale(1.04); }
.sb-launcher.is-open { transform: rotate(90deg); }
/* Pulsing ring to draw first-time visitors' attention. Removed once
   the user opens the widget for the first time (JS strips .pulse). */
.sb-launcher.pulse::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgb(var(--accent-rgb) / 0.65);
    animation: sb-pulse 1.8s ease-out infinite;
}
@keyframes sb-pulse {
    0%   { transform: scale(1); opacity: 0.9; }
    80%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* First-visit label above the launcher: fades in after ~1s, waits, then
   fades out. Clicking the launcher hides it immediately. */
.sb-hint {
    position: fixed;
    inset-inline-end: 62px;
    bottom: calc(20px + var(--safe-bottom));
    z-index: 61;
    padding: 8px 14px;
    background: linear-gradient(145deg, #f3cc76, #d4a44a);
    color: #241903;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    animation: sb-hint-in 0.5s var(--ease) both;
    cursor: pointer;
}
.sb-hint::after {
    content: "";
    position: absolute;
    inset-inline-end: -6px;
    bottom: 14px;
    width: 12px; height: 12px;
    background: #d4a44a;
    transform: rotate(45deg);
}
.sb-hint.fade-out { animation: sb-hint-out 0.4s var(--ease) forwards; }
@keyframes sb-hint-in {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes sb-hint-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(6px); pointer-events: none; }
}

.sb-panel {
    position: fixed;
    inset-inline-end: 20px;
    bottom: calc(84px + var(--safe-bottom));
    z-index: 60;
    width: 360px;
    max-width: calc(100vw - 40px);
    max-height: min(70vh, 600px);
    background: var(--surface-solid);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
}
.sb-panel.is-open { display: flex; }
@media (max-width: 480px) {
    .sb-panel { inset-inline-end: 12px; bottom: calc(76px + var(--safe-bottom)); width: calc(100vw - 24px); max-height: 76vh; }
    .sb-launcher { inset-inline-end: 14px; bottom: calc(66px + var(--safe-bottom)); }
    /* Keep the first-visit hint next to the launcher, above the tab bar. */
    .sb-hint { inset-inline-end: 66px; bottom: calc(71px + var(--safe-bottom)); }
}

.sb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(120deg, rgb(var(--accent-rgb) / 0.16), rgba(120, 82, 20, 0.04));
    border-bottom: 1px solid var(--line);
}
.sb-title { font-weight: 800; color: var(--accent-bright); font-size: 14px; }
.sb-close {
    background: transparent; border: none; color: var(--text-dim);
    font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sb-close:hover { color: var(--text); }

.sb-body {
    flex: 1; overflow-y: auto;
    padding: 14px 14px 6px;
    display: flex; flex-direction: column; gap: 10px;
    font-size: 13px; line-height: 1.75;
}

.sb-msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; white-space: pre-wrap; }
.sb-msg--bot { background: var(--surface-sunken); border: 1px solid var(--line); align-self: flex-start; }
.sb-msg--user { background: rgb(var(--accent-rgb) / 0.16); border: 1px solid var(--accent-soft); align-self: flex-end; color: var(--text); }

.sb-options { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sb-opt {
    background: transparent; border: 1px solid var(--line-strong);
    color: var(--text); text-align: right; padding: 9px 12px;
    border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 600;
    transition: border-color var(--fast), background var(--fast);
}
.sb-opt:hover { border-color: var(--accent-soft); background: rgb(var(--accent-rgb) / 0.08); }

.sb-back {
    align-self: flex-start;
    background: transparent; border: 1px dashed var(--line-strong);
    color: var(--text-dim); padding: 6px 12px; border-radius: 10px;
    font-size: 12px; cursor: pointer;
}
.sb-back:hover { border-color: var(--accent-soft); color: var(--text); }

.sb-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sb-label { font-size: 11.5px; color: var(--text-dim); font-weight: 700; margin-top: 4px; }
.sb-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.sb-input:focus { outline: none; border-color: var(--accent-soft); }
.sb-textarea { resize: vertical; min-height: 84px; }
.sb-submit {
    background: linear-gradient(140deg, #f3cc76, #b98c38);
    color: #241903; border: none; padding: 10px 14px; border-radius: 10px;
    font-weight: 800; cursor: pointer; font-size: 13px;
}
.sb-submit:hover { filter: brightness(1.05); }
.sb-submit:disabled { opacity: 0.6; cursor: wait; }

.sb-note {
    padding: 8px 14px;
    font-size: 10.5px;
    color: var(--text-faint);
    border-top: 1px solid var(--line);
    text-align: center;
}

/* --------------------------------------------------------------------------
   17. Footer credits + trust badges
   -------------------------------------------------------------------------- */
.footer-credits {
    max-width: 720px;
    margin: 10px auto 0;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.7;
    text-align: center;
}
.footer-credits b { color: var(--text); font-weight: 700; font-size: 10.5px; }
.footer-credits .credit-people {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: center;
    margin-inline-start: 4px;
    vertical-align: middle;
}
.footer-credits .credit-person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.footer-credits .credit-name { color: var(--text); font-weight: 600; font-size: 10.5px; }
.footer-credits .credit-handle {
    color: var(--accent-bright);
    font-weight: 700;
    unicode-bidi: isolate;
    margin-inline-start: 2px;
    letter-spacing: 0.2px;
}
.footer-credits .credit-links {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.footer-credits .credit-links a {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    transition: transform var(--fast), background var(--fast), border-color var(--fast);
}
.footer-credits .credit-links a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line-strong);
}
.footer-credits .credit-links svg { display: block; width: 13px; height: 13px; }

.trust-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: center;
    margin: 12px auto 0;
    max-width: 720px;
}
.trust-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 4px;
    min-width: 52px;
    min-height: 38px;
    flex: 0 1 auto;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--accent-bright);
    text-decoration: none;
    transition: border-color var(--fast), transform var(--fast), filter var(--fast);
}
.trust-badge:hover { border-color: var(--accent-soft); transform: translateY(-1px); filter: brightness(1.08); }
.trust-badge img,
.trust-badge svg { max-height: 20px; max-width: 100%; width: auto; display: block; }
.trust-badge .badge-label {
    white-space: nowrap;
    font-size: 8.5px;
    font-weight: 700;
    color: var(--accent-bright);
    letter-spacing: 0.1px;
}

@media (max-width: 520px) {
    .footer-credits .credit-people { flex-direction: row; gap: 4px 10px; }
    .footer-credits .credit-person { flex: 0 1 auto; }
    .trust-badge { flex: 0 1 auto; min-width: 46px; padding: 2px 3px; }
    .trust-badge img, .trust-badge svg { max-height: 18px; }
    .trust-badge .badge-label { font-size: 8px; }
}

/* --------------------------------------------------------------------------
   Photo guide on the analyze page: do/don't photos and the
   matching fix shown when the quality check rejects a photo.
   -------------------------------------------------------------------------- */
.photo-recipe {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-sunken);
}
#flow-input-method .coin-type-grid { margin-top: 12px; }

.guide-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.shoot-guide-lead { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.shoot-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .shoot-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* One tile = a drawn camera viewfinder over the coin on its card. */
.photo-check { margin: 0; min-width: 0; }
.photo-check-img {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1.5px solid var(--red-border);
    background: radial-gradient(circle at 50% 42%, #f6f3ee 0%, #e7e1d7 100%);
    color: #8a96a8;                       /* viewfinder corners */
}
.photo-check.ok .photo-check-img { border: 2px solid var(--green); color: var(--green); }
.vf-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.vf-coin {
    position: absolute;
    left: 50%; top: 50%;
    width: 76%; height: 76%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 5px rgba(60, 40, 10, 0.22));
}
.photo-check-img::after {
    content: "✕";
    position: absolute;
    top: 6px;
    left: 50%;                             /* between the viewfinder corners */
    transform: translateX(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--red);
    box-shadow: 0 0 0 2px #fff;
    z-index: 2;
}
.photo-check.ok .photo-check-img::after { content: "✓"; background: var(--green); }

/* right: a focus box locks onto the coin */
.vf-focus {
    position: absolute;
    left: 50%; top: 50%;
    width: 34%; height: 34%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--green);
    border-radius: 6px;
    opacity: 0;
    animation: vf-focus 3.6s var(--ease) infinite;
}
@keyframes vf-focus {
    0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
    22%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* glare: a white hot spot from the lamp wanders over the portrait */
.vf-glare {
    position: absolute;
    left: 36%; top: 26%;
    width: 38%; height: 30%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0) 100%);
    filter: blur(1px);
    animation: vf-glare 3.6s ease-in-out infinite;
}
@keyframes vf-glare {
    0%, 100% { transform: translate(0, 0) rotate(-18deg); opacity: 0.85; }
    50% { transform: translate(14%, 18%) rotate(-18deg); opacity: 1; }
}
.vf-lamp { position: absolute; top: 9%; inset-inline-end: 9%; width: 22%; height: 22%; }

/* too far: the coin is small; the dashed ring shows the size it should be */
.vf--far .vf-coin { width: 26%; height: 26%; animation: vf-far 3.6s var(--ease) infinite; }
.vf-target {
    position: absolute;
    left: 50%; top: 50%;
    width: 76%; height: 76%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dashed rgba(91, 107, 130, 0.55);
}
@keyframes vf-far {
    0%, 55%, 100% { transform: translate(-50%, -50%) scale(1); }
    75% { transform: translate(-50%, -50%) scale(1.25); }
}

/* blurry: the focus hunts in and out */
.vf--blur .vf-coin { animation: vf-blur 3.6s ease-in-out infinite; }
@keyframes vf-blur {
    0%, 100% { filter: blur(4px) drop-shadow(0 3px 5px rgba(60, 40, 10, 0.22)); }
    50% { filter: blur(1.6px) drop-shadow(0 3px 5px rgba(60, 40, 10, 0.22)); }
}

@media (prefers-reduced-motion: reduce) {
    .vf-focus { animation: none; opacity: 1; transform: translate(-50%, -50%); }
    .vf-glare, .vf--far .vf-coin { animation: none; }
    .vf--blur .vf-coin { animation: none; filter: blur(3px); }
}

.photo-check figcaption { margin-top: 8px; text-align: center; line-height: 1.5; }
.photo-check figcaption b { display: block; font-size: 13px; color: var(--red); }
.photo-check.ok figcaption b { color: var(--green); }
.photo-check figcaption small { display: block; font-size: 11.5px; color: var(--text-dim); }

/* just-in-time fix shown under a rejected photo */
.fix-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--accent-line);
}
.fix-tip .photo-check { width: 104px; flex: none; }
.fix-tip-arrow { color: var(--accent); font-size: 20px; flex: none; }
.fix-tip-text b { display: block; color: var(--accent-bright); font-size: 13.5px; margin-bottom: 3px; }
.fix-tip-text small { color: var(--text-dim); font-size: 12px; line-height: 1.75; }
@media (max-width: 520px) {
    .fix-tip { flex-wrap: wrap; justify-content: center; }
    .fix-tip-text { flex-basis: 100%; text-align: center; }
    .fix-tip-arrow { display: none; }   /* the photo sits above the fix here */
}

:root[data-theme="light"] .fix-tip { background: rgba(255, 255, 255, 0.55); }

/* Verdict boxes keep their dark gradient in light mode unless overridden,
   which left black text on a dark background. */
:root[data-theme="light"] .result-green { background: linear-gradient(125deg, #e2f3eb, #f5f9f7); }
:root[data-theme="light"] .result-red { background: linear-gradient(125deg, #f8e2e7, #fbf5f6); }
:root[data-theme="light"] .result-yellow { background: linear-gradient(125deg, #f7ebcb, #fbf7ec); }

.photo-disclaimer {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--text-faint);
    font-size: 11.5px;
    line-height: 1.9;
}

/* --------------------------------------------------------------------------
   Phones: calmer layout. Nothing is removed — secondary content is folded
   or condensed (ui-ux-pro-max: content-priority, progressive-disclosure,
   whitespace-balance, multi-step-progress).
   -------------------------------------------------------------------------- */
.hero-more, .coin-soon { display: none; }

@media (max-width: 720px) {
    /* Intro panel on app pages: title + one line, «بیشتر» for the rest */
    .hero:not(.center) { padding: 16px 16px 12px; margin-bottom: 12px; border-radius: 20px; }
    .hero:not(.center) h1 { font-size: 19px; margin-bottom: 4px; }
    .hero:not(.center) .eyebrow { margin-bottom: 8px; padding: 2px 10px; font-size: 11px; }
    .hero:not(.center) p {
        font-size: 13px;
        line-height: 1.8;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero:not(.center).is-expanded p { display: block; }
    .hero:not(.center):not(.hero-fits) p { padding-inline-end: 46px; }
    .hero .hero-more {
        display: inline-flex;
        align-items: center;
        position: absolute;
        inset-inline-end: 12px;
        bottom: 6px;
        z-index: 1;
        min-height: 32px;
        padding: 0 4px;
        border: 0;
        background: none;
        box-shadow: none;
        color: var(--accent-bright);
        font-size: 12px;
        font-weight: 700;
    }
    .hero .hero-more:hover { background: none; transform: none; color: var(--accent-pale); }
    .hero.hero-fits .hero-more { display: none; }
    /* After step 1 the flow is the focus: the panel keeps only its title */
    .hero.is-flow-active p,
    .hero.is-flow-active .eyebrow,
    .hero.is-flow-active .hero-more { display: none; }
    .hero.is-flow-active { padding-block: 12px; }

    /* Step bar: numbered dots, label only for the current step, no box */
    .flow-steps,
    :root[data-theme="light"] .flow-steps {
        padding: 2px 4px;
        margin-bottom: 10px;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        gap: 4px;
    }
    .flow-steps .fs { font-size: 0; gap: 0; }
    .flow-steps .fs i { font-size: 11px; width: 22px; height: 22px; }
    .flow-steps .fs.current { font-size: 12px; gap: 6px; font-weight: 700; }

    /* "Coming soon" coin types: one row of small chips instead of big tiles */
    #flow-coin-type .coin-type-btn.is-locked { display: none; }
    .coin-soon {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        font-size: 11.5px;
        color: var(--text-faint);
    }
    .coin-soon:not(:has(.coin-soon-chip)) { display: none; }
    .coin-soon-label { font-weight: 700; }
    .coin-soon-chip {
        padding: 3px 10px;
        border: 1px dashed var(--line-strong);
        border-radius: var(--r-pill);
        background: var(--surface-sunken);
        white-space: nowrap;
    }

    /* Fewer nested frames: outer cards drop their border, inner tiles keep theirs */
    .card,
    :root[data-theme="light"] .card { border-color: transparent; padding: 16px 14px; margin-bottom: 12px; }
    .card { box-shadow: none; }
    .photo-recipe,
    :root[data-theme="light"] .photo-recipe { padding: 14px 12px; }
}

/* Confirm / retake buttons under the photo: when scrolled into view, stay
   clear of the bottom tab bar. */
.editor-actions { scroll-margin-bottom: calc(76px + var(--safe-bottom)); flex-wrap: nowrap; }
.editor-actions button { white-space: nowrap; padding-inline: 12px; }