@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-var.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --lapis-900: #06142a;
    --lapis-800: #0a2146;
    --lapis-600: #16407a;
    --teal: #2ec4b6;
    --teal-soft: #7fe3da;
    --gold: #f2b84b;
    --copper: #e8894a;
    --ivory: #f6f1e6;
    --mist: rgba(246, 241, 230, .72);
    --glass-fill: rgba(255, 255, 255, .07);
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-top: rgba(255, 255, 255, .38);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 17px;
    line-height: 1.85;
    color: var(--ivory);
    background: var(--lapis-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }

/* ---------- صحنه‌ی پس‌زمینه (لایه‌های عمق) ---------- */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% -10%, var(--lapis-600) 0%, transparent 60%),
        radial-gradient(90% 60% at 50% 110%, #0b3a52 0%, transparent 65%),
        linear-gradient(180deg, var(--lapis-800), var(--lapis-900));
}
.scene__pattern { position: absolute; inset: -10%; opacity: .13; background-size: 120px 120px;
    -webkit-mask-image: radial-gradient(60% 55% at 50% 38%, #000 0%, transparent 100%);
            mask-image: radial-gradient(60% 55% at 50% 38%, #000 0%, transparent 100%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.orb--teal   { width: 460px; height: 460px; background: var(--teal);   top: -140px; left: -120px; opacity: .35; }
.orb--gold   { width: 380px; height: 380px; background: var(--gold);   top: 30%;   right: -160px; opacity: .22; }
.orb--copper { width: 420px; height: 420px; background: var(--copper); bottom: -200px; left: 20%; opacity: .2; }

/* ---------- شیشه ---------- */
.glass {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
            backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 1px 0 var(--glass-top),
        inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 30px 60px -25px rgba(0, 0, 0, .7),
        0 12px 24px -12px rgba(0, 0, 0, .5);
}

/* ---------- نوار بالا ---------- */
.topbar { margin: 18px auto 0; width: min(1080px, calc(100% - 32px)); border-radius: 20px;
    padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; }

/* ---------- قهرمان ---------- */
.page { flex: 1; width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 32px; }

.hero { text-align: center; margin-bottom: 56px; }
.hero__emblem { display: inline-block; margin-bottom: 8px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(242, 184, 75, .25)); }
.hero__title {
    font-size: clamp(3rem, 8vw, 5.4rem);
    font-weight: 900;
    line-height: 1.15;
    background: linear-gradient(180deg, #fffaf0 0%, #f7e2b4 55%, #d9a24a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
.hero__lead { margin-top: 10px; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 300; color: var(--mist); }

/* انیمیشن یک‌باره‌ی ترسیم نشان + چرخش آرام */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.6, .1, .2, 1) forwards; }
.draw:nth-child(2) { animation-delay: .25s; }
.draw:nth-child(3) { animation-delay: .5s; }
.draw:nth-child(4) { animation-delay: .75s; }
.draw:nth-child(5) { animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__emblem .spin { transform-origin: 0 0; animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- دو مسیر ---------- */
.paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; perspective: 1200px; }

.path {
    --mx: 50%; --my: 0%;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 44px 32px 36px; border-radius: 30px; overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.path__shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 45%); }
.path:hover .path__shine { opacity: 1; }
.path::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .55;
    background: radial-gradient(80% 60% at 50% 0%, var(--tint), transparent 70%); }
.path--needy { --tint: rgba(232, 137, 74, .32); }
.path--donor { --tint: rgba(46, 196, 182, .32); }
.path--needy:hover { border-color: rgba(232, 137, 74, .55); }
.path--donor:hover { border-color: rgba(46, 196, 182, .55); }

.path__icon {
    width: 124px; height: 124px; display: grid; place-items: center; border-radius: 34px; margin-bottom: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02));
    border: 1px solid var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-top), 0 18px 30px -14px rgba(0, 0, 0, .7);
    transform: translateZ(40px);
}
.path__icon svg { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.path__title { font-size: 1.6rem; font-weight: 800; line-height: 1.4; transform: translateZ(28px); }
.path--needy .path__title { color: #ffd6b0; }
.path--donor .path__title { color: #c9fbf5; }
.path__text { margin: 12px auto 28px; max-width: 34ch; color: var(--mist); font-size: 1rem; transform: translateZ(18px); }

/* ---------- دکمه‌ی شیشه‌ای ---------- */
.glass-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 34px; border-radius: 999px; overflow: hidden;
    font-weight: 700; font-size: 1.02rem; color: #fff; letter-spacing: 0;
    background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 -8px 16px -6px rgba(0, 0, 0, .35),
        0 12px 28px -8px var(--btn-glow);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transform: translateZ(34px);
    transition: box-shadow .3s, filter .3s;
}
.glass-btn::before { content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 999px 999px 14px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05)); pointer-events: none; }
.glass-btn--copper { --btn-a: rgba(240, 150, 84, .85); --btn-b: rgba(170, 80, 30, .85); --btn-glow: rgba(232, 137, 74, .65); }
.glass-btn--teal   { --btn-a: rgba(64, 214, 200, .8);  --btn-b: rgba(12, 110, 106, .85); --btn-glow: rgba(46, 196, 182, .6); }
.path:hover .glass-btn, .glass-btn:hover { filter: brightness(1.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -8px 16px -6px rgba(0, 0, 0, .3), 0 16px 40px -6px var(--btn-glow); }

/* ---------- تعهدها ---------- */
.promises { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px;
    margin-top: 48px; color: var(--mist); font-size: .95rem; }
.promises li { display: flex; align-items: center; gap: 10px; }
.promises svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- صفحه‌ی اطلاع‌رسانی ---------- */
.notice { max-width: 560px; margin: 20px auto; padding: 44px 32px; border-radius: 30px; text-align: center; }
.notice__emblem { margin-bottom: 8px; }
.notice__title { font-size: 1.8rem; font-weight: 800; }
.notice__text { color: var(--mist); margin: 10px 0 28px; }
.notice .glass-btn { transform: none; }

.footer { text-align: center; padding: 22px; color: rgba(246, 241, 230, .5); font-size: .88rem; }

/* ---------- موبایل ---------- */
@media (max-width: 760px) {
    body { font-size: 16px; }
    .page { padding-top: 28px; }
    .hero { margin-bottom: 36px; }
    .hero__emblem svg { width: 190px; height: 190px; }
    .paths { grid-template-columns: 1fr; gap: 20px; }
    .path { padding: 34px 22px 30px; }
    .path__icon { width: 104px; height: 104px; }
    .promises { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .draw { animation: none; stroke-dashoffset: 0; }
    .hero__emblem .spin { animation: none; }
    .path { transition: none; }
}

/* ================= مرحله‌ی ۲: ورود و فرم‌ها ================= */
.topbar__nav { display: flex; align-items: center; gap: 12px; }
.topbar__user { font-size: .9rem; color: var(--mist); }
.chip-btn {
    font: inherit; font-size: .92rem; font-weight: 700; color: var(--ivory); cursor: pointer;
    padding: 6px 18px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
    border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top);
    transition: background .2s;
}
.chip-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08)); }

.toasts { width: min(560px, calc(100% - 32px)); margin: 16px auto 0; display: grid; gap: 10px; }
.toast { padding: 12px 18px; border-radius: 16px; font-size: .95rem; }
.toast--success { border-color: rgba(46, 196, 182, .55); }
.toast--error { border-color: rgba(255, 120, 100, .6); }
.toast--info { border-color: rgba(242, 184, 75, .5); }

.form-card { width: min(480px, 100%); margin: 8px auto; padding: 40px 32px 34px; border-radius: 30px; }
.form-card--wide { width: min(720px, 100%); }
.form-card__emblem { display: flex; justify-content: center; margin-bottom: 6px; }
.form-card__title { text-align: center; font-size: 1.65rem; font-weight: 800; line-height: 1.5; }
.form-card__text { text-align: center; color: var(--mist); margin: 8px auto 28px; max-width: 46ch; font-size: .98rem; }
.form-card__links { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.nowrap { white-space: nowrap; }

.field { margin-bottom: 20px; }
.field__label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.field input:not([type="file"]), .field select {
    width: 100%; min-height: 54px; padding: 0 18px; font: inherit; font-size: 1.05rem; color: var(--ivory);
    background: rgba(4, 14, 32, .45); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .2s, box-shadow .2s; appearance: none;
}
.field input::placeholder { color: rgba(246, 241, 230, .32); }
.field input[dir="ltr"] { text-align: left; }
.field input:focus, .field select:focus {
    outline: none; border-color: rgba(46, 196, 182, .7);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 4px rgba(46, 196, 182, .15);
}
.field select {
    cursor: pointer; padding-left: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b84b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 16px center; background-size: 18px;
}
.field select option { background: var(--lapis-800); color: var(--ivory); }
.field--error input, .field--error select, .field--error .upload__drop { border-color: rgba(255, 120, 100, .75); }
.field__error { color: #ffb4a6; font-size: .88rem; margin-top: 6px; }
.field__help { color: var(--mist); font-size: .85rem; margin-top: 6px; }
.form-alert { padding: 12px 16px; border-radius: 14px; margin-bottom: 18px; color: #ffd0c6;
    background: rgba(255, 100, 80, .12); border: 1px solid rgba(255, 120, 100, .4); }

.code-input { text-align: center !important; font-size: 1.8rem !important; letter-spacing: .6em; font-weight: 800; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center;
    padding: 26px 18px; border-radius: 20px; border: 1.5px dashed rgba(242, 184, 75, .45);
    background: rgba(4, 14, 32, .35); transition: border-color .2s, background .2s;
}
.upload__drop:hover { border-color: var(--gold); background: rgba(242, 184, 75, .06); }
.upload__drop svg { width: 46px; height: 46px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.upload__text { font-weight: 700; }
.upload__hint { color: var(--mist); font-size: .85rem; }
.upload--done .upload__drop { border-style: solid; border-color: var(--teal); background: rgba(46, 196, 182, .08); }
.upload__input:focus-visible + .upload__drop, .upload__drop:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }

.glass-btn--block { width: 100%; transform: none; margin-top: 8px; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.glass-btn:disabled { opacity: .6; cursor: wait; }
.link-btn { font: inherit; font-size: .92rem; color: var(--teal-soft); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.link-btn:disabled { color: var(--mist); cursor: default; }
.link-btn:not(:disabled):hover { text-decoration: underline; }

.steps { list-style: none; position: relative; margin-top: 8px; }
.steps::before { content: ""; position: absolute; top: 14px; bottom: 14px; right: 13px; width: 2px;
    background: linear-gradient(180deg, rgba(46, 196, 182, .6), rgba(255, 255, 255, .1)); }
.step { position: relative; display: flex; gap: 18px; padding: 10px 0 18px; }
.step__dot { flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: 2px; position: relative; z-index: 1;
    background: var(--lapis-800); border: 2px solid rgba(255, 255, 255, .25); }
.step strong { font-size: 1.05rem; }
.step p { color: var(--mist); font-size: .95rem; }
.step--done .step__dot { border-color: var(--teal);
    background: radial-gradient(circle at 35% 30%, #b8fff6, var(--teal) 55%, #0b4f63); box-shadow: 0 0 16px rgba(46, 196, 182, .55); }
.step--active .step__dot { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(242, 184, 75, .15); }
.step--warn .step__dot { border-color: var(--copper);
    background: radial-gradient(circle at 35% 30%, #ffd08a, var(--copper) 60%, #7a3510); }
.step:not(.step--done):not(.step--active):not(.step--warn) { opacity: .5; }

@media (max-width: 760px) {
    .form-card { padding: 32px 20px 28px; }
    .field-grid { grid-template-columns: 1fr; }
    .topbar__user { display: none; }
}

/* ================= مرحله‌ی ۳: ثبت گره ================= */
.field textarea {
    width: 100%; padding: 14px 18px; font: inherit; font-size: 1rem; line-height: 1.9; color: var(--ivory); resize: vertical;
    background: rgba(4, 14, 32, .45); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}
.field textarea:focus { outline: none; border-color: rgba(46, 196, 182, .7); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 4px rgba(46, 196, 182, .15); }
.field textarea::placeholder { color: rgba(246, 241, 230, .32); }
.field--error textarea { border-color: rgba(255, 120, 100, .75); }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cat-tile__box {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; cursor: pointer;
    border-radius: 18px; font-weight: 700; font-size: .95rem; text-align: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
    border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.cat-tile__box:hover { transform: translateY(-2px); }
.cat-icon { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cat-tile input:checked + .cat-tile__box {
    border-color: var(--copper); background: linear-gradient(160deg, rgba(232, 137, 74, .28), rgba(232, 137, 74, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px rgba(232, 137, 74, .7);
}
.cat-tile input:checked + .cat-tile__box .cat-icon { stroke: #ffd6b0; }
.cat-tile input:focus-visible + .cat-tile__box { outline: 2px solid var(--gold); outline-offset: 3px; }

.money-words { margin: -12px 0 18px; color: var(--gold); font-weight: 700; font-size: .95rem; min-height: 1em; }

.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; margin: 6px 0 18px; }
.switch input { position: absolute; opacity: 0; }
.switch__track { flex: none; width: 52px; height: 30px; border-radius: 999px; position: relative;
    background: rgba(4, 14, 32, .55); border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); transition: background .25s; }
.switch__thumb { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #cfd8e3); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: right .25s; }
.switch input:checked + .switch__track { background: linear-gradient(180deg, rgba(64, 214, 200, .8), rgba(12, 110, 106, .9)); }
.switch input:checked + .switch__track .switch__thumb { right: 25px; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--gold); outline-offset: 3px; }
.switch__label { font-weight: 700; font-size: .95rem; }

.beneficiary { border: 1px solid rgba(46, 196, 182, .35); border-radius: 20px; padding: 18px 18px 4px; margin-bottom: 20px;
    background: rgba(46, 196, 182, .05); }
.beneficiary legend { padding: 0 8px; font-weight: 800; color: #c9fbf5; }
.beneficiary .field__help { margin: 0 0 14px; }
.js .beneficiary:not(.beneficiary--open) { display: none; }

.file-list { list-style: none; margin-top: 10px; display: grid; gap: 6px; font-size: .88rem; color: var(--mist); }
.file-list li { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); direction: ltr; text-align: left; }

.admin-note { margin: 18px 0; padding: 14px 18px; border-radius: 16px; background: rgba(242, 184, 75, .1);
    border: 1px solid rgba(242, 184, 75, .4); }
.admin-note strong { color: var(--gold); }

.case-box { margin-top: 24px; }
.case-box__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.case-box__cat { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; }
.case-box__amount { font-size: 1.9rem; font-weight: 900; margin-top: 14px;
    background: linear-gradient(180deg, #fffaf0, #d9a24a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-box__meta { color: var(--mist); font-size: .9rem; }

.badge { padding: 4px 14px; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1px solid; }
.badge--pending, .badge--needs_info { color: var(--gold); border-color: rgba(242, 184, 75, .5); background: rgba(242, 184, 75, .1); }
.badge--published, .badge--funded, .badge--paid_out, .badge--closed { color: #c9fbf5; border-color: rgba(46, 196, 182, .55); background: rgba(46, 196, 182, .12); }
.badge--rejected { color: #ffb4a6; border-color: rgba(255, 120, 100, .5); background: rgba(255, 100, 80, .1); }

.track { list-style: none; display: flex; margin: 22px 0 6px; }
.track__step { flex: 1; position: relative; text-align: center; font-size: .82rem; color: var(--mist); padding-top: 26px; }
.track__step span { position: absolute; top: 0; right: 50%; transform: translateX(50%); width: 16px; height: 16px; border-radius: 50%;
    background: var(--lapis-800); border: 2px solid rgba(255, 255, 255, .25); z-index: 1; }
.track__step::before { content: ""; position: absolute; top: 7px; left: 50%; width: 100%; height: 2px; background: rgba(255, 255, 255, .12); }
.track__step:first-child::before { display: none; }
.track__step--done { color: #c9fbf5; }
.track__step--done span { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 10px rgba(46, 196, 182, .6); }
.track__step--done::before, .track__step--active::before { background: var(--teal); }
.track__step--active { color: var(--ivory); font-weight: 700; }
.track__step--active span { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 184, 75, .18); }

@media (max-width: 760px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .track__step { font-size: .72rem; }
}
.case-box__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ================= مرحله‌ی ۳ب: انواع کمک، فوریت، خیرها ================= */
[hidden] { display: none !important; }
.cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cat-tile input:checked + .cat-tile__box--teal {
    border-color: var(--teal); background: linear-gradient(160deg, rgba(46, 196, 182, .28), rgba(46, 196, 182, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px rgba(46, 196, 182, .7);
}
.cat-tile input:checked + .cat-tile__box--teal .cat-icon { stroke: #c9fbf5; }
.beneficiary--gold { border-color: rgba(242, 184, 75, .4); background: rgba(242, 184, 75, .05); }
.beneficiary--gold legend { color: #ffe3a3; }
.date-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 10px; margin-bottom: 8px; }
.date-row select {
    width: 100%; min-height: 50px; padding: 0 14px 0 36px; font: inherit; color: var(--ivory); cursor: pointer; appearance: none;
    background: rgba(4, 14, 32, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b84b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 12px center / 16px;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}
.date-row select option { background: var(--lapis-800); }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-pill { position: relative; cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; }
.choice-pill span { display: inline-block; padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-edge); transition: all .2s; }
.choice-pill input:checked + span { border-color: var(--teal); background: rgba(46, 196, 182, .2); color: #c9fbf5; }
.choice-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.panel-block { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.panel-block:first-of-type { border-top: 0; }
.panel-block__title { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.panel-block__text { color: var(--mist); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: 700;
    background: rgba(46, 196, 182, .12); border: 1px solid rgba(46, 196, 182, .4); }
.tag .cat-icon { width: 20px; height: 20px; stroke: #c9fbf5; }

.history { list-style: none; display: grid; gap: 8px; }
.history li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, .04); font-size: .92rem; }
.history time { color: var(--mist); font-size: .85rem; }

.urgent-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 800;
    color: #ffd6b0; background: rgba(232, 137, 74, .16); border: 1px solid rgba(232, 137, 74, .55); }

.dedication { max-width: 640px; margin: 10px auto 0; line-height: 2; font-size: .92rem; color: #f2d79b;
    display: flex; align-items: center; justify-content: center; gap: 10px; }
.dedication svg { flex: none; opacity: .85; }
.topbar__links { display: flex; gap: 8px; }

@media (max-width: 760px) {
    .cat-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cat-grid--3 .cat-tile__box { font-size: .8rem; padding: 14px 6px; }
    .topbar__links { display: none; }
}
.case-box__meta .cat-icon { width: 18px; height: 18px; vertical-align: -3px; }
details.panel-block summary { cursor: pointer; list-style: none; }
details.panel-block summary::before { content: "▸ "; color: var(--gold); }
details.panel-block[open] summary::before { content: "▾ "; }

/* ================= مرحله‌ی ۴: ویترین گره‌ها ================= */
.vitrine-head { text-align: center; margin-bottom: 26px; }
.vitrine-head__emblem { display: flex; justify-content: center; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)); }
.vitrine-head__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.3;
    background: linear-gradient(180deg, #f0fffd, #7fe3da); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vitrine-head__lead { color: var(--mist); margin-top: 6px; }
.vitrine-head__actions { margin-top: 16px; }
.chip-btn--glow { border-color: rgba(46, 196, 182, .6); box-shadow: inset 0 1px 0 var(--glass-top), 0 0 22px rgba(46, 196, 182, .35); }

.filters { border-radius: 24px; padding: 16px; margin-bottom: 28px; display: grid; gap: 10px; }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fchip { position: relative; cursor: pointer; }
.fchip input { position: absolute; opacity: 0; }
.fchip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: .9rem; font-weight: 700;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); transition: all .2s; }
.fchip .cat-icon { width: 18px; height: 18px; }
.fchip span:hover { background: rgba(255, 255, 255, .1); }
.fchip input:checked + span { border-color: var(--gold); background: rgba(242, 184, 75, .16); color: #ffe9b8; }
.fchip--teal input:checked + span { border-color: var(--teal); background: rgba(46, 196, 182, .18); color: #c9fbf5; }
.fchip--copper input:checked + span { border-color: var(--copper); background: rgba(232, 137, 74, .2); color: #ffd6b0; }
.fchip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.fselect { min-height: 38px; padding: 0 14px 0 34px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 700; color: var(--ivory); cursor: pointer; appearance: none;
    background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b84b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center / 14px;
    border: 1px solid rgba(255, 255, 255, .12); }
.fselect option { background: var(--lapis-800); }

.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.gcard { --mx: 50%; --my: 0%; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 26px; overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.gcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; border-radius: inherit;
    background: radial-gradient(90% 55% at 50% 0%, var(--tint), transparent 70%); }
.gcard--money { --tint: rgba(242, 184, 75, .22); }
.gcard--item { --tint: rgba(46, 196, 182, .24); }
.gcard--service { --tint: rgba(232, 137, 74, .24); }
.gcard:hover { border-color: rgba(255, 255, 255, .3); }
.gcard:hover .path__shine { opacity: 1; }
.gcard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.gcard__cat { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .95rem; }
.gcard__cat .cat-icon { width: 22px; height: 22px; }
.gcard__title { font-size: 1.2rem; font-weight: 800; line-height: 1.6; position: relative; }
.gcard__text { color: var(--mist); font-size: .93rem; line-height: 1.9; flex: 1; position: relative; }
.gcard__need { position: relative; padding: 12px 14px; border-radius: 16px; background: rgba(4, 14, 32, .4); border: 1px solid rgba(255, 255, 255, .08); }
.gcard__type { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--mist); margin-bottom: 8px; }
.gcard__type .cat-icon { width: 16px; height: 16px; }
.gcard__nums { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.gcard__nums strong { font-size: 1.1rem; font-weight: 900; color: #ffe9b8; }
.gcard__nums small { color: var(--mist); font-size: .82rem; }
.gcard__foot { display: flex; justify-content: space-between; gap: 8px; color: var(--mist); font-size: .84rem; position: relative; }
.gcard__foot span { display: inline-flex; align-items: center; gap: 4px; }
.pin { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; }

.progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.progress span { display: block; height: 100%; min-width: 0; border-radius: inherit;
    background: linear-gradient(90deg, #0e6e6a, var(--teal), #b8fff6); box-shadow: 0 0 12px rgba(46, 196, 182, .7); }
.progress--lg { height: 16px; }

.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; color: var(--mist); }

.opened { margin-top: 44px; }
.opened__title { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; text-align: center; color: #c9fbf5; }
.opened__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.opened__item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: .9rem; }
.opened__item .cat-icon { width: 18px; height: 18px; }
.opened__item b { color: var(--teal); }

.gdetail { max-width: 760px; margin: 0 auto; padding: 30px 32px; border-radius: 30px; display: grid; gap: 16px; overflow: hidden; }
.gdetail::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; border-radius: inherit;
    background: radial-gradient(90% 40% at 50% 0%, var(--tint), transparent 70%); }
.gdetail > * { position: relative; }
.gdetail__back { justify-self: start; }
.gdetail__title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; line-height: 1.5; }
.gdetail__text { color: var(--mist); font-size: 1.05rem; line-height: 2.1; }
.gdetail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.gdetail__facts div { padding: 12px 14px; border-radius: 16px; background: rgba(4, 14, 32, .4); border: 1px solid rgba(255, 255, 255, .08); }
.gdetail__facts small { display: block; color: var(--mist); font-size: .8rem; }
.gdetail__facts strong { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; }
.gdetail__facts .cat-icon { width: 18px; height: 18px; }
.gdetail__progress p { margin-top: 8px; color: var(--mist); font-size: .92rem; }
.gdetail__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gdetail__actions .glass-btn { transform: none; }
.is-soon { opacity: .55; cursor: not-allowed; }
.gdetail__soon { text-align: center; color: var(--gold); font-size: .9rem; margin-top: -6px; }
.gdetail__privacy { display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center; color: var(--mist); font-size: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; }

@media (max-width: 760px) {
    .filters__row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .filters__row::-webkit-scrollbar { display: none; }
    .fchip span, .fselect { white-space: nowrap; }
    .gdetail { padding: 24px 18px; }
}

/* ================= مرحله‌ی ۵: کمک نقدی ================= */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.field__help--gold { color: #ffe3a3; }
.admin-note--teal { background: rgba(46, 196, 182, .1); border-color: rgba(46, 196, 182, .45); }
.pay-steps { list-style: none; counter-reset: s; display: grid; gap: 22px; margin-top: 10px; }
.pay-steps > li { counter-increment: s; position: relative; padding-right: 44px; }
.pay-steps > li::before { content: counter(s); position: absolute; right: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 900; color: var(--lapis-900);
    background: radial-gradient(circle at 35% 30%, #fff3d0, var(--gold)); box-shadow: 0 0 14px rgba(242, 184, 75, .5); }
.pay-steps > li > strong { display: block; margin-bottom: 12px; font-size: 1.05rem; }
.bank-card { border-radius: 22px; padding: 22px; margin-bottom: 10px; overflow: hidden;
    background: linear-gradient(135deg, rgba(46, 196, 182, .35), rgba(22, 64, 122, .55) 55%, rgba(242, 184, 75, .25)); }
.bank-card__chip { width: 44px; height: 32px; border-radius: 7px; margin-bottom: 16px;
    background: linear-gradient(135deg, #fff1c4, #c9953c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.bank-card__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bank-card__num { font-size: clamp(1.25rem, 4.5vw, 1.7rem); font-weight: 800; letter-spacing: .08em; font-family: "Vazirmatn", monospace; }
.bank-card__sheba { font-size: .95rem; opacity: .9; word-break: break-all; }
.bank-card__holder { color: var(--mist); font-size: .95rem; }
.bank-card__holder strong { color: var(--ivory); }
.countdown { color: var(--gold); margin-bottom: 12px; }
.countdown b { font-size: 1.2rem; }
.history li { align-items: center; }
.history a { color: #c9fbf5; }
.badge--muted { color: var(--mist); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }