/* ==========================================================================
   Gold Coin — design system
   Dark "obsidian + gold" theme, 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 */
    --gold: #dcae54;
    --gold-bright: #f3cc76;
    --gold-pale: #f8e6bd;
    --gold-deep: #a97d34;
    --gold-soft: rgba(220, 174, 84, 0.28);
    --gold-line: rgba(220, 174, 84, 0.16);
    --gold-glow: rgba(220, 174, 84, 0.22);

    /* 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-gold: 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);

    /* 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(--gold-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%, rgba(220, 174, 84, 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(--gold-bright);
    text-decoration: none;
    transition: color var(--fast);
}
a:hover { color: var(--gold-pale); }

:focus-visible {
    outline: 2px solid var(--gold-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: rgba(220, 174, 84, 0.18);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(220, 174, 84, 0.32); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 22px 16px calc(96px + 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(--gold-line);
    background: rgba(9, 13, 22, 0.78);
    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 rgba(220, 174, 84, 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(--gold-bright); background: rgba(220, 174, 84, 0.08); }
.nav-link.is-active { color: var(--gold-bright); background: rgba(220, 174, 84, 0.12); }

.topbar .credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(140deg, rgba(220, 174, 84, 0.2), rgba(220, 174, 84, 0.07));
    border: 1px solid var(--gold-soft);
    border-radius: var(--r-pill);
    padding: 5px 12px;
    color: var(--gold-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; }
}

/* --------------------------------------------------------------------------
   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));
    background: rgba(9, 13, 22, 0.9);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--gold-line);
}

@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);
}
.bottom-nav form { display: flex; }
.bottom-nav form button { width: 100%; }
.bottom-nav .ico { font-size: 18px; line-height: 1; }
.bottom-nav a.is-active { color: var(--gold-bright); background: rgba(220, 174, 84, 0.1); }
.bottom-nav a:hover, .bottom-nav button:hover { color: var(--gold-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(--gold-soft);
    border-radius: var(--r-xl);
    background:
        radial-gradient(520px 260px at 88% -30%, rgba(220, 174, 84, 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%, rgba(243, 204, 118, 0.14), transparent 68%);
    pointer-events: none;
}
.hero h1 {
    margin: 0 0 10px;
    background: linear-gradient(105deg, #fff6e4 12%, var(--gold-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(--gold-soft);
    background: rgba(220, 174, 84, 0.1);
    color: var(--gold-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(--gold-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: rgba(229, 184, 93, .12); border: 1px solid var(--gold-soft);
    border-radius: 11px; color: var(--gold-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: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), var(--surface-solid);
    color: #eef3fb;
    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(--gold-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), var(--surface-solid);
    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-gold), 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);
}

.btn-inline { width: auto; padding: 12px 30px; }
.btn-ghost {
    background: transparent;
    border-color: var(--gold-soft);
    color: var(--gold-bright);
}
.btn-ghost:hover { background: rgba(220, 174, 84, 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(--gold-soft);
    background: rgba(12, 18, 30, 0.8);
    box-shadow: 0 0 0 3px rgba(220, 174, 84, 0.13);
}
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(--gold-soft);
    border-radius: var(--r-xs);
    background: rgba(220, 174, 84, 0.12);
    color: var(--gold-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(--gold-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: rgba(220, 174, 84, 0.12);
    border: 1px solid var(--gold-line);
}
.feature h4 { margin: 0 0 5px; font-size: 14.5px; color: var(--gold-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(--gold-bright); }
.flow-steps .fs.done i { border-color: var(--gold-soft); background: rgba(220, 174, 84, 0.14); color: var(--gold-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; }

.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(--gold-soft); }
.coin-type-btn.selected {
    border-color: var(--gold);
    background: linear-gradient(160deg, rgba(220, 174, 84, 0.2), rgba(220, 174, 84, 0.06));
    color: var(--gold-pale);
    box-shadow: inset 0 0 0 1px rgba(243, 204, 118, 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(--gold);
    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 rgba(220, 174, 84, 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); }

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

.guide-box {
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 15px;
    transition: border-color var(--slow), transform var(--slow);
}
.guide-box:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.guide-title { color: var(--gold-pale); font-size: 14px; font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.guide-desc { color: var(--text-dim); font-size: 12.5px; line-height: 1.85; margin: 0; }

details.guide-details {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 14px;
}
details.guide-details > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: var(--gold-bright);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
details.guide-details > summary::-webkit-details-marker { display: none; }
details.guide-details > summary::after {
    content: "▾";
    margin-inline-start: auto;
    transition: transform var(--fast);
    color: var(--text-faint);
}
details.guide-details[open] > summary::after { transform: rotate(180deg); }

/* Inline info callouts used on the analyze flow */
.tip-callout {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: rgba(220, 174, 84, 0.10);
    border: 1px dashed var(--gold-soft);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.85;
}
.tip-callout b { color: var(--gold-bright); }
.retry-callout {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: rgba(240, 191, 85, 0.10);
    border-inline-start: 4px solid var(--gold-soft);
    font-size: 13px;
    color: var(--text);
    line-height: 1.85;
}
.retry-callout b { color: var(--gold-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); }
:root[data-theme="light"] .tip-callout,
:root[data-theme="light"] .retry-callout { color: #000; }

.camera-stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #05070c;
    border: 1px solid var(--gold-soft);
    box-shadow: var(--shadow-lg), inset 0 0 40px rgba(0, 0, 0, 0.6);
}
.camera-stage video { display: none; }
.camera-stage canvas { display: block; width: 100%; height: 100%; }

/* Corner brackets, purely decorative framing over the live preview. */
.camera-stage::before, .camera-stage::after {
    content: "";
    position: absolute;
    width: 34px; height: 34px;
    border: 2px solid rgba(243, 204, 118, 0.5);
    pointer-events: none;
}
.camera-stage::before { top: 12px; inset-inline-start: 12px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.camera-stage::after { bottom: 12px; inset-inline-end: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
html[dir="rtl"] .camera-stage::before { border-left: 2px solid rgba(243, 204, 118, 0.5); border-right: 0; border-radius: 10px 0 0 0; }
html[dir="rtl"] .camera-stage::after { border-right: 2px solid rgba(243, 204, 118, 0.5); border-left: 0; border-radius: 0 0 10px 0; }

.camera-flash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 43, 40, 0.85);
    color: var(--green);
    font-size: 22px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.camera-flash.show { opacity: 1; }

.camera-hint {
    max-width: 480px;
    margin: 12px auto 0;
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
}

#camera-capture-btn { max-width: 480px; margin: 14px auto 0; display: flex; }

#camera-confirm { max-width: 480px; margin: 12px auto 0; }
.capture-preview-wrap {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #0b1120;
    box-shadow: var(--shadow-md);
}
.capture-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#camera-confirm .btn-row { max-width: 480px; margin-inline: auto; }

.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: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.editor-coords { color: var(--text-faint); font: 11px/1.4 ui-monospace, monospace; direction: ltr; }

/* Processing state */
.spinner-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold-bright);
    font-size: 13.5px;
    padding: 18px 20px;
    border: 1px solid var(--gold-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 rgba(220, 174, 84, 0.22);
    border-top-color: var(--gold-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: #fff; line-height: 1.3; }
.metric .label { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.metric .sub { font-size: 11px; color: var(--gold-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: rgba(255, 255, 255, 0.07);
}
.meter > span {
    display: block;
    height: 100%;
    width: calc(var(--v, 0) * 1%);
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-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: rgba(255, 255, 255, 0.55);
    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(--gold-bright) calc(var(--v, 0) * 1%), rgba(255, 255, 255, 0.07) 0);
}
.score-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #0d1422;
}
.score-ring b {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

/* --------------------------------------------------------------------------
   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(--gold-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(--gold-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: rgba(220, 174, 84, 0.08);
    border-inline-start: 2px solid var(--gold-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(--gold-soft);
    box-shadow: 0 0 0 3px rgba(220, 174, 84, 0.15);
}
.user-note-textarea::placeholder { color: var(--text-faint); }
:root[data-theme="light"] .user-note-textarea {
    background: #fff;
    color: #000;
    border-color: rgba(0, 0, 0, 0.2);
}
:root[data-theme="light"] .history-note { color: #000; }

.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(--gold-soft); background: rgba(220, 174, 84, 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(--gold-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: rgba(220, 174, 84, 0.09);
    border: 1px solid var(--gold-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%, rgba(220, 174, 84, 0.26), transparent 70%),
        linear-gradient(145deg, #1b2539, #0f1626);
    border: 1px solid var(--gold-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(--gold-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 rgba(220, 174, 84, 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(--gold-soft); transform: translateY(-2px); }
.topup-package.is-featured {
    border-color: var(--gold-soft);
    background: linear-gradient(140deg, rgba(220, 174, 84, 0.14), rgba(220, 174, 84, 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(--gold);
    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: rgba(243, 204, 118, 0.55);
    background: linear-gradient(150deg, rgba(243, 204, 118, 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: #f0f0f0; color: #666; }

.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(--gold-soft);
    background: rgba(220, 174, 84, 0.08);
    text-decoration: none;
}
.profile-link .muted { font-size: 11.5px; }

.nav-icon-link {
    padding-inline: 8px !important;
    font-size: 18px !important;
}

.referral-card { border: 1px solid rgba(220, 174, 84, 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: rgba(220, 174, 84, 0.08);
    border: 1px dashed var(--gold-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(--gold-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: rgba(220, 174, 84, 0.12);
    border-radius: var(--r-pill);
    overflow: hidden;
    border: 1px solid rgba(220, 174, 84, 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; }
:root[data-theme="light"] .ref-code-value { color: #000; }
:root[data-theme="light"] .ref-link-value { color: #000; background: rgba(0, 0, 0, 0.05); }

.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(64px + 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 rgba(220, 174, 84, 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(--gold-bright);
    border-color: var(--gold-soft);
    background: rgba(220, 174, 84, 0.12);
    box-shadow: 0 0 0 3px rgba(220, 174, 84, 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 — token overrides only, so every existing rule works
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f2e7;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-solid: #ffffff;
    --surface-raised: rgba(255, 255, 255, 0.96);
    --surface-sunken: rgba(240, 232, 214, 0.85);
    --line: rgba(20, 20, 20, 0.16);
    --line-strong: rgba(20, 20, 20, 0.28);
    --text: #000000;
    --text-dim: #000000;
    --text-faint: #000000;
    --gold-bright: #6b4a12;
    --gold-pale: #4a2f08;
    --gold-soft: rgba(180, 132, 45, 0.22);
    --gold-line: rgba(180, 132, 45, 0.28);
    --gold-glow: rgba(180, 132, 45, 0.18);
    --green-bg: rgba(46, 120, 100, 0.12);
    --red-bg: rgba(147, 69, 88, 0.12);
    --yellow-bg: rgba(139, 112, 55, 0.14);
    --shadow-sm: 0 2px 10px rgba(60, 40, 10, 0.10);
    --shadow-md: 0 10px 30px rgba(60, 40, 10, 0.12);
    --shadow-lg: 0 22px 60px rgba(60, 40, 10, 0.16);
    --shadow-gold: 0 10px 30px rgba(180, 132, 45, 0.20);
}
:root[data-theme="light"] body::before {
    background:
        radial-gradient(900px 520px at 50% -12%, rgba(220, 174, 84, 0.22), transparent 62%),
        radial-gradient(700px 480px at 88% 8%, rgba(255, 219, 156, 0.35), transparent 60%),
        radial-gradient(800px 600px at 8% 30%, rgba(200, 220, 240, 0.30), transparent 62%),
        linear-gradient(180deg, #fbf7ec 0%, #f2ead6 45%, #ebe0c5 100%);
}
:root[data-theme="light"] .site-footer { background: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .capture-progress > span:not(.sep) { background: rgba(90, 66, 20, 0.05); }
/* Force pure-black text everywhere in light mode — the gradient headings
   and gold accents that read fine on a dark background disappear on the
   warm cream one, so this overrides them uniformly. */
:root[data-theme="light"] .hero h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #000;
}
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .feature h4,
:root[data-theme="light"] .feature p,
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .step-item h4,
:root[data-theme="light"] .step-item p,
:root[data-theme="light"] .step-number,
:root[data-theme="light"] .topbar .brand,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link.is-active,
:root[data-theme="light"] .credits-pill,
:root[data-theme="light"] .credits-pill .num,
:root[data-theme="light"] .footer-brand,
:root[data-theme="light"] .footer-disclaimer,
:root[data-theme="light"] .footer-disclaimer b,
:root[data-theme="light"] .footer-credits,
:root[data-theme="light"] .footer-credits b,
:root[data-theme="light"] .credit-name,
:root[data-theme="light"] .credit-handle,
:root[data-theme="light"] .history-date,
:root[data-theme="light"] .history-coin-type,
:root[data-theme="light"] .history-detail-images figcaption,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .faint,
:root[data-theme="light"] .small,
:root[data-theme="light"] .field-hint,
:root[data-theme="light"] .field-row label,
:root[data-theme="light"] .field-error,
:root[data-theme="light"] .auth-alt,
:root[data-theme="light"] .auth-head h2,
:root[data-theme="light"] .auth-head p,
:root[data-theme="light"] .note,
:root[data-theme="light"] label,
:root[data-theme="light"] p,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .num,
:root[data-theme="light"] .metric .value,
:root[data-theme="light"] .metric .label,
:root[data-theme="light"] .metric .sub,
:root[data-theme="light"] .score-ring b,
:root[data-theme="light"] .wallet-card,
:root[data-theme="light"] .wallet-card h4,
:root[data-theme="light"] .wallet-card p,
:root[data-theme="light"] .wallet-card .balance,
:root[data-theme="light"] .balance,
:root[data-theme="light"] .flow-steps .fs,
:root[data-theme="light"] .flow-steps .fs.done,
:root[data-theme="light"] .flow-steps .fs.done i,
:root[data-theme="light"] .coin-type-btn,
:root[data-theme="light"] .coin-type-btn .sub,
:root[data-theme="light"] .coin-type-btn.selected,
:root[data-theme="light"] .guide-title,
:root[data-theme="light"] .guide-desc,
:root[data-theme="light"] .guide-details summary,
:root[data-theme="light"] .result-box,
:root[data-theme="light"] .result-box h2,
:root[data-theme="light"] .result-box .body,
:root[data-theme="light"] .disclaimer-badge,
:root[data-theme="light"] .disclaimer-badge b,
:root[data-theme="light"] .back-link,
:root[data-theme="light"] .card,
:root[data-theme="light"] .card p,
:root[data-theme="light"] .card h3,
:root[data-theme="light"] .card h4,
:root[data-theme="light"] .card b,
:root[data-theme="light"] .card strong,
:root[data-theme="light"] .cta-card h3,
:root[data-theme="light"] .card-heading h3,
:root[data-theme="light"] .card-heading p,
:root[data-theme="light"] .topup-package,
:root[data-theme="light"] .topup-package .pkg-label,
:root[data-theme="light"] .topup-package .pkg-price,
:root[data-theme="light"] .pkg-note,
:root[data-theme="light"] .footnote,
:root[data-theme="light"] .messages li,
:root[data-theme="light"] .messages li span,
:root[data-theme="light"] .status-badge,
:root[data-theme="light"] .capture-progress > span:not(.sep),
:root[data-theme="light"] .camera-hint,
:root[data-theme="light"] .issues-list li,
:root[data-theme="light"] .sb-title,
:root[data-theme="light"] .sb-msg,
:root[data-theme="light"] .sb-msg--bot,
:root[data-theme="light"] .sb-msg--user,
:root[data-theme="light"] .sb-opt,
:root[data-theme="light"] .sb-back,
:root[data-theme="light"] .sb-label,
:root[data-theme="light"] .sb-note,
:root[data-theme="light"] .bottom-nav a,
:root[data-theme="light"] .bottom-nav a.is-active,
:root[data-theme="light"] .bottom-nav button { color: #000; }

:root[data-theme="light"] .eyebrow {
    color: #000;
    background: rgba(220, 174, 84, 0.22);
    border-color: rgba(107, 74, 18, 0.42);
}
:root[data-theme="light"] a { color: #000; text-decoration: underline; }
:root[data-theme="light"] a:hover { color: #6b4a12; }

/* Trust-badge logos are gold-tinted PNGs — invert them to solid black
   on the light cream background so اینماد/شاپرک/بانک مرکزی are readable. */
:root[data-theme="light"] .trust-badge img { filter: brightness(0); }

/* Support bot floating panel: darker plate + dark text on the cream page. */
:root[data-theme="light"] .sb-panel { background: #ffffff; }
:root[data-theme="light"] .sb-header { background: rgba(220, 174, 84, 0.18); }
:root[data-theme="light"] .sb-input, :root[data-theme="light"] .sb-textarea {
    background: #fff; color: #000; border-color: rgba(0, 0, 0, 0.28);
}
:root[data-theme="light"] .sb-msg--bot { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.14); }
:root[data-theme="light"] .sb-msg--user { background: rgba(220, 174, 84, 0.24); border-color: rgba(107, 74, 18, 0.35); }

/* Metric meter bars stay gold on both themes (they're a data viz). */
:root[data-theme="light"] .meter { background: rgba(0, 0, 0, 0.08); }

/* Coin type button when selected — the gold border+text stays, but the
   base "not-selected" text was gray on gold — force it black. */
:root[data-theme="light"] .coin-type-btn.selected {
    color: #000;
    background: linear-gradient(160deg, rgba(220, 174, 84, 0.28), rgba(220, 174, 84, 0.08));
}

/* Bottom nav: gold-active becomes black-on-gold-ish tint for legibility. */
:root[data-theme="light"] .bottom-nav {
    background: rgba(255, 255, 255, 0.92);
    border-top-color: rgba(0, 0, 0, 0.14);
}
:root[data-theme="light"] .bottom-nav a.is-active { background: rgba(220, 174, 84, 0.24); }

/* Cards on light theme need a slightly stronger surface so black text
   pops off the cream body background. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .history-card,
:root[data-theme="light"] .topup-package {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.14);
}
:root[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Analyze camera stage: the frame is fine dark, but the fallback
   status text and the hint under the camera need contrast. */
:root[data-theme="light"] .camera-hint,
:root[data-theme="light"] #fallback-status { color: #000; }

/* Hero panels (the top card on analyze / history / topup / login / landing)
   were baked with a dark navy gradient background — swap to a warm cream
   panel so the black text on top is readable in light mode. */
:root[data-theme="light"] .hero {
    background:
        radial-gradient(520px 260px at 88% -30%, rgba(220, 174, 84, 0.28), transparent 70%),
        linear-gradient(125deg, #fbf3df, #fff8e8 70%);
    border-color: rgba(107, 74, 18, 0.34);
    box-shadow: 0 12px 32px rgba(60, 40, 10, 0.10);
}
:root[data-theme="light"] .hero::after {
    background: radial-gradient(circle at 35% 30%, rgba(180, 132, 45, 0.18), transparent 68%);
}

/* Generic button + .btn had hardcoded off-white text (#eef3fb) that
   disappears on white; force black text and a slightly darker plate so
   "خروج" / "بازگشت" / cancel / retake stay legible. */
:root[data-theme="light"] button,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .btn-sm {
    color: #000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.00)), #ffffff;
    border-color: rgba(0, 0, 0, 0.22);
}
:root[data-theme="light"] button:hover,
:root[data-theme="light"] .btn:hover {
    background: linear-gradient(180deg, rgba(220, 174, 84, 0.14), rgba(220, 174, 84, 0.04)), #ffffff;
    border-color: rgba(107, 74, 18, 0.45);
}
/* Primary + ghost keep their gold, but ghost text needs to be dark. */
:root[data-theme="light"] .btn-primary { color: #1a1102; }
:root[data-theme="light"] .btn-ghost {
    background: transparent;
    color: #000;
    border-color: rgba(107, 74, 18, 0.45);
}
:root[data-theme="light"] .btn-ghost:hover { background: rgba(220, 174, 84, 0.14); }

/* Text inputs used a dark navy sunken background. On light theme use
   a plain white plate so typed text (black by default) is legible. */
: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;
    color: #000;
    border-color: rgba(0, 0, 0, 0.22);
}
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus {
    background: #ffffff;
    border-color: rgba(107, 74, 18, 0.55);
    box-shadow: 0 0 0 3px rgba(220, 174, 84, 0.20);
}
:root[data-theme="light"] input::placeholder { color: rgba(0, 0, 0, 0.45); }

/* Auth-form heading + login panel need dark text. */
:root[data-theme="light"] .auth-form,
:root[data-theme="light"] .auth-form h2 { color: #000; }

/* Theme toggle chip */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-dim);
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.theme-toggle:hover { border-color: var(--gold-soft); color: var(--gold-bright); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: 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 rgba(243, 204, 118, 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(78px + var(--safe-bottom)); }
}

.sb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(120deg, rgba(243, 204, 118, 0.16), rgba(120, 82, 20, 0.04));
    border-bottom: 1px solid var(--line);
}
.sb-title { font-weight: 800; color: var(--gold-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: rgba(220, 174, 84, 0.16); border: 1px solid var(--gold-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(--gold-soft); background: rgba(220, 174, 84, 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(--gold-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(--gold-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(--gold-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(--gold-bright);
    text-decoration: none;
    transition: border-color var(--fast), transform var(--fast), filter var(--fast);
}
.trust-badge:hover { border-color: var(--gold-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(--gold-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; }
}