/* ============================================================================
   EMERALD THEME - LANDING (Phase 305)
   Ported mechanically from the approved static design Areas/Landing/Pages/EmeraldIndex.html and scoped under
   body.em-landing (the Emerald landing layout puts class "emerald-theme em-landing" on <body>).
   Tokens/keyframes: emerald-tokens.css.  Inline-colour remap of the login pages: emerald-landing-remap.css.
   ========================================================================= */
/* ── PREVIEW-ONLY: Inter از خودِ پروژه (مسیرِ سایت، و مسیرِ نسبی برای بازکردنِ مستقیمِ فایل) ── */
        /* ═════════════════════════════ TOKENS ═════════════════════════════ */

        /* ═════════════════════════════ BASE ═════════════════════════════ */
        body.em-landing *, body.em-landing *::before, body.em-landing *::after { box-sizing: border-box; }
        html[data-ui-theme="emerald"] { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #8f7440 #030b08; }
        body.em-landing {
            margin: 0; min-height: 100vh; overflow-x: hidden;
            font-family: var(--em-sans); font-size: 16px; line-height: 1.7;
            color: var(--em-ink); background: #030b08;
            -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
        }
        body.em-landing ::selection { background: rgba(198, 169, 107, .9); color: #06130f; }
        body.em-landing ::-webkit-scrollbar { width: 10px; height: 10px; }
        body.em-landing ::-webkit-scrollbar-track { background: #030b08; }
        body.em-landing ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c6a96b, #6d5628); border-radius: 10px; border: 2px solid #030b08; }
        body.em-landing a { color: var(--em-champ-300); }
        body.em-landing :focus-visible { outline: 2px solid var(--em-emerald-400); outline-offset: 3px; }

        /* پس‌زمینه: نورِ زمردی از بالا، گرمایِ شامپاین، شبکهٔ ظریفِ لوزی، حاشیهٔ تیره و دانهٔ کاغذیِ ملایم */
        body.em-landing .em-backdrop {
            position: fixed; inset: 0; z-index: 0; pointer-events: none;
            background:
                radial-gradient(1100px 640px at 50% -10%, rgba(18, 184, 134, .22), transparent 62%),
                radial-gradient(700px 520px at 106% 40%, rgba(198, 169, 107, .10), transparent 62%),
                radial-gradient(760px 560px at -6% 72%, rgba(12, 143, 107, .13), transparent 62%),
                linear-gradient(180deg, #05130e 0%, #030b08 58%, #020706 100%);
        }
        body.em-landing .em-backdrop::before {
            content: ''; position: absolute; inset: 0;
            background-image:
                repeating-linear-gradient(45deg, rgba(198, 169, 107, .05) 0 1px, transparent 1px 15px),
                repeating-linear-gradient(-45deg, rgba(198, 169, 107, .05) 0 1px, transparent 1px 15px);
            -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
        }
        body.em-landing .em-backdrop::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(0, 0, 0, .6) 100%);
        }
        body.em-landing .em-grain {
            position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .075;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        }
        body.em-landing .content-wrapper { position: relative; z-index: 1; }

        /* ═════════════════════════════ LOADER ═════════════════════════════ */
        body.em-landing .loading {
            position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
            background: radial-gradient(circle at 50% 45%, #0a2a21, #020706 72%);
            opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s, visibility .6s;
        }
        body.em-landing .loading.is-initial, body.em-landing .loading.htmx-request { opacity: 1; visibility: visible; pointer-events: auto; }
        body.em-landing .loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        body.em-landing .loader { position: relative; width: 74px; height: 74px; border-radius: 50%; box-shadow: 0 0 34px rgba(52, 211, 163, .2); }
        body.em-landing .loader::before {
            content: ''; position: absolute; inset: 0; border-radius: 50%;
            background: conic-gradient(from 0deg, rgba(198, 169, 107, 0) 0 35%, #c6a96b 72%, #fbf1d4 92%, rgba(198, 169, 107, 0));
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            animation: em-spin 1.1s linear infinite;
        }
        body.em-landing .loader::after {
            content: ''; position: absolute; inset: 12px; border-radius: 50%;
            border: 1px solid rgba(52, 211, 163, .22); border-top-color: var(--em-emerald-400);
            animation: em-spin .9s linear infinite reverse;
        }

        /* ═════════════════════════════ NAV ═════════════════════════════ */
        body.em-landing .em-nav {
            position: sticky; top: 0; z-index: 50; height: var(--em-nav-h); display: flex; align-items: center;
            background: linear-gradient(180deg, rgba(3, 12, 9, .94), rgba(4, 17, 12, .74));
            -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
        }
        body.em-landing .em-nav::after {
            content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(52, 211, 163, .4) 14%, rgba(198, 169, 107, .8) 50%, rgba(52, 211, 163, .4) 86%, transparent);
        }
        body.em-landing .em-nav__in {
            width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px);
            display: flex; align-items: center; justify-content: space-between; gap: 16px;
        }
        body.em-landing .em-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
        body.em-landing .em-brand__mark { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 0 12px rgba(52, 211, 163, .35)); }
        body.em-landing .em-brand__mark svg { display: block; width: 100%; height: 100%; }
        body.em-landing .em-brand__txt { display: flex; flex-direction: column; line-height: 1; gap: 6px; }
        body.em-landing .em-brand__word {
            font-family: var(--em-serif); font-size: 1.16rem; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
            background-image: var(--em-metal-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
        }
        body.em-landing .em-brand__tag { font-size: .6rem; font-weight: 600; letter-spacing: .62em; text-transform: uppercase; color: var(--em-emerald-400); }

        body.em-landing .wallet-btn {
            position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            min-height: 44px; padding: 10px 24px; border-radius: 999px;
            font: 600 .74rem/1 var(--em-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
            color: var(--em-champ-200) !important; text-decoration: none !important;
            background: linear-gradient(180deg, rgba(198, 169, 107, .10), rgba(198, 169, 107, .02));
            border: 1px solid var(--em-line-strong); overflow: hidden;
            transition: color .25s, border-color .25s, box-shadow .25s, background .25s, transform .25s;
        }
        body.em-landing .wallet-btn::after {
            content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 244, 214, .35) 50%, transparent 65%);
            transform: translateX(-120%); transition: transform .7s ease;
        }
        body.em-landing .wallet-btn:hover { color: #06130f !important; background: var(--em-metal-h); border-color: transparent; box-shadow: 0 8px 26px rgba(198, 169, 107, .28); transform: translateY(-1px); }
        body.em-landing .wallet-btn:hover::after { transform: translateX(120%); }
        body.em-landing .wallet-btn svg { width: 16px; height: 16px; flex: none; }

        /* ═════════════════════════════ HERO ═════════════════════════════ */
        body.em-landing .em-hero {
            position: relative; isolation: isolate; overflow: hidden; text-align: center;
            display: grid; place-items: center;
            min-height: calc(100vh - var(--em-nav-h)); min-height: calc(100svh - var(--em-nav-h));
            padding: clamp(32px, 5.5vh, 72px) clamp(16px, 5vw, 48px) clamp(60px, 8vh, 88px);
        }
        body.em-landing .em-hero__rings {
            position: absolute; z-index: 0; left: 50%; top: 40%; width: min(1500px, 190vw); aspect-ratio: 1;
            transform: translate(-50%, -50%); pointer-events: none;
            background:
                repeating-radial-gradient(circle at center, transparent 0 54px, rgba(198, 169, 107, .075) 55px 56px),
                radial-gradient(circle, rgba(18, 184, 134, .10), transparent 46%);
            -webkit-mask: radial-gradient(circle, #000 0 26%, transparent 60%); mask: radial-gradient(circle, #000 0 26%, transparent 60%);
        }
        body.em-landing .em-corner { position: absolute; z-index: 1; width: clamp(34px, 5vw, 64px); aspect-ratio: 1; pointer-events: none; opacity: .85; }
        body.em-landing .em-corner::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--em-line-strong); }
        body.em-landing .em-corner::after { content: ''; position: absolute; width: 7px; height: 7px; background: var(--em-metal-v); transform: rotate(45deg); box-shadow: 0 0 10px rgba(198, 169, 107, .5); }
        body.em-landing .em-corner--tl { top: 22px; inset-inline-start: clamp(14px, 3vw, 40px); }
        body.em-landing .em-corner--tl::before { border-width: 1px 0 0 1px; }
        body.em-landing .em-corner--tl::after { top: -4px; inset-inline-start: -4px; }
        body.em-landing .em-corner--tr { top: 22px; inset-inline-end: clamp(14px, 3vw, 40px); }
        body.em-landing .em-corner--tr::before { border-width: 1px 1px 0 0; }
        body.em-landing .em-corner--tr::after { top: -4px; inset-inline-end: -4px; }
        body.em-landing .em-corner--bl { bottom: 22px; inset-inline-start: clamp(14px, 3vw, 40px); }
        body.em-landing .em-corner--bl::before { border-width: 0 0 1px 1px; }
        body.em-landing .em-corner--bl::after { bottom: -4px; inset-inline-start: -4px; }
        body.em-landing .em-corner--br { bottom: 22px; inset-inline-end: clamp(14px, 3vw, 40px); }
        body.em-landing .em-corner--br::before { border-width: 0 1px 1px 0; }
        body.em-landing .em-corner--br::after { bottom: -4px; inset-inline-end: -4px; }

        body.em-landing .em-hero__content { position: relative; z-index: 2; width: 100%; max-width: 980px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }

        /* مدالیونِ گیوشه */
        body.em-landing .em-medal { position: relative; width: clamp(200px, 22vw, 296px); aspect-ratio: 1; animation: em-float 9s ease-in-out infinite; }
        body.em-landing .em-medal__aura { position: absolute; inset: -26%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(18, 184, 134, .34), rgba(18, 184, 134, .07) 48%, transparent 68%); animation: em-pulse 6s ease-in-out infinite; }
        body.em-landing .em-medal__base { position: absolute; inset: 1.5%; z-index: 0; border-radius: 50%; background: #030f0b; box-shadow: 0 30px 46px rgba(0, 0, 0, .62), 0 0 34px rgba(52, 211, 163, .2); }
        body.em-landing .em-medal__layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
        body.em-landing .em-spin { will-change: transform; animation: em-spin 140s linear infinite; }
        body.em-landing .em-spin--b { animation-duration: 220s; animation-direction: reverse; }
        body.em-landing .em-spin--c { animation-duration: 260s; }
        body.em-landing .em-medal__sheen {
            position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
            background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 246, 220, 0) 40deg, rgba(255, 246, 220, .42) 62deg, rgba(255, 246, 220, 0) 92deg, transparent 180deg, rgba(111, 227, 191, 0) 230deg, rgba(111, 227, 191, .32) 258deg, rgba(111, 227, 191, 0) 288deg, transparent 360deg);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px), #000 calc(100% - 3px), transparent calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px), #000 calc(100% - 3px), transparent calc(100% - 2px));
            animation: em-spin 18s linear infinite;
        }

        body.em-landing .em-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(22px, 3.6vh, 38px) 0 clamp(10px, 1.8vh, 18px); width: min(420px, 80%); }
        body.em-landing .em-rule::before, body.em-landing .em-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--em-champ-400)); }
        body.em-landing .em-rule::after { background: linear-gradient(270deg, transparent, var(--em-champ-400)); }
        body.em-landing .em-rule i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--em-metal-v); box-shadow: 0 0 0 4px rgba(52, 211, 163, .14), 0 0 14px rgba(198, 169, 107, .55); }

        /* تیتر: خطِ اولِ ریزِ ایتالیکِ حروف‌باز، خطِ دومِ بزرگِ فلزی (بدونِ span تا landing-app.js سالم بماند) */
        body.em-landing .em-hero h1 {
            width: 100%; margin: 0 0 clamp(14px, 2.2vh, 22px);
            font-family: var(--em-serif); font-weight: 500; font-size: clamp(2.6rem, 6.8vw, 5.4rem); line-height: 1.04; letter-spacing: -.012em;
            background-image: var(--em-metal); background-size: 100% 100%; background-repeat: no-repeat;
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
            filter: drop-shadow(0 1px 0 rgba(60, 44, 14, .9)) drop-shadow(0 16px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(198, 169, 107, .14));
        }
        body.em-landing .em-hero h1::first-line { font-size: .3em; font-style: italic; font-weight: 400; letter-spacing: .38em; text-transform: uppercase; }
        body.em-landing .em-hero__desc { max-width: 760px; margin: 0 auto clamp(24px, 3.6vh, 34px); font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--em-ink-2); }

        body.em-landing .em-cta-wrap { position: relative; display: inline-block; }
        body.em-landing .em-cta-wrap::before { content: ''; position: absolute; inset: -7px; border-radius: 999px; border: 1px solid rgba(52, 211, 163, .38); pointer-events: none; transition: inset .3s, border-color .3s; }
        body.em-landing .em-cta-wrap:hover::before { inset: -10px; border-color: rgba(52, 211, 163, .7); }
        body.em-landing .em-cta {
            position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
            min-height: 58px; padding: 16px 40px 16px 34px; border-radius: 999px; cursor: pointer;
            font: 700 .8rem/1 var(--em-sans); letter-spacing: .24em; text-transform: uppercase; color: #06130f;
            background: var(--em-metal-h); border: 1px solid rgba(255, 240, 200, .65);
            box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 40px rgba(198, 169, 107, .22), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(110, 82, 30, .38);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        body.em-landing .em-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
        body.em-landing .em-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 56px rgba(198, 169, 107, .38), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(110, 82, 30, .38); }
        body.em-landing .em-cta:hover::after { transform: translateX(120%); transition: transform .8s ease; }
        body.em-landing .em-cta svg { width: 19px; height: 19px; }
        body.em-landing .em-cta__arrow { animation: em-nudge 2.4s ease-in-out infinite; }

        body.em-landing .em-scroll { position: absolute; z-index: 2; bottom: 18px; inset-inline: 0; display: grid; place-items: center; pointer-events: none; }
        body.em-landing .em-scroll i { display: block; width: 1px; height: 38px; background: linear-gradient(180deg, rgba(198, 169, 107, 0), var(--em-champ-300)); position: relative; }
        body.em-landing .em-scroll i::after { content: ''; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--em-champ-300); box-shadow: 0 0 10px rgba(198, 169, 107, .8); animation: em-drop 2.4s ease-in-out infinite; }

        /* ═════════════════════════════ STATS ═════════════════════════════ */
        body.em-landing .em-stats {
            position: relative; z-index: 2; max-width: 1120px; margin: clamp(8px, 2vw, 16px) auto clamp(24px, 5vw, 60px);
            padding-inline: clamp(16px, 4vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 28px);
        }
        body.em-landing .em-stat {
            position: relative; min-width: 0; padding: 36px 20px 30px; text-align: center;
            background:
                repeating-linear-gradient(45deg, rgba(198, 169, 107, .035) 0 1px, transparent 1px 9px),
                var(--em-panel);
            border: 1px solid var(--em-line);
            box-shadow: 0 24px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 244, 214, .06);
            transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
        }
        body.em-landing .em-stat::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(198, 169, 107, .16); pointer-events: none; transition: border-color .35s; }
        body.em-landing .em-stat::after {
            content: ''; position: absolute; top: -1px; left: 50%; width: 46%; height: 2px; transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, var(--em-champ-300), transparent);
        }
        body.em-landing .em-stat:hover { transform: translateY(-6px); border-color: var(--em-line-strong); box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(18, 184, 134, .14), inset 0 1px 0 rgba(255, 244, 214, .08); }
        body.em-landing .em-stat:hover::before { border-color: rgba(198, 169, 107, .34); }
        body.em-landing .em-stat__ico {
            position: relative; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--em-emerald-300);
            background: radial-gradient(circle at 50% 35%, rgba(18, 184, 134, .26), rgba(5, 20, 15, .9) 72%);
            box-shadow: 0 0 0 1px rgba(198, 169, 107, .5), 0 0 0 5px rgba(5, 20, 15, .9), 0 0 0 6px rgba(198, 169, 107, .22), 0 0 22px rgba(18, 184, 134, .25);
        }
        body.em-landing .em-stat__ico svg { width: 22px; height: 22px; }
        body.em-landing .em-stat__num {
            margin: 16px 0 6px; font-family: var(--em-serif); font-weight: 500; font-size: clamp(2.5rem, 4.6vw, 3.7rem); line-height: 1; letter-spacing: -.01em;
            font-variant-numeric: lining-nums tabular-nums;
            background-image: var(--em-metal-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
            filter: drop-shadow(0 2px 0 rgba(50, 36, 10, .85)) drop-shadow(0 0 18px rgba(198, 169, 107, .18));
        }
        body.em-landing .em-stat__label { font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--em-muted); }
        body.em-landing .em-stat__orn { display: block; width: 7px; height: 7px; margin: 16px auto 0; transform: rotate(45deg); background: var(--em-metal-v); opacity: .85; }

        /* ═════════════════════════════ SECTION HEAD ═════════════════════════════ */
        body.em-landing .em-section { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) clamp(16px, 4vw, 40px); }
        body.em-landing .em-head { text-align: center; margin-bottom: clamp(34px, 5.4vw, 64px); }
        body.em-landing .em-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 20px; }
        body.em-landing .em-ornament::before, body.em-landing .em-ornament::after { content: ''; width: clamp(54px, 9vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--em-champ-400)); }
        body.em-landing .em-ornament::after { background: linear-gradient(270deg, transparent, var(--em-champ-400)); }
        body.em-landing .em-ornament i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--em-metal-v); box-shadow: 0 0 0 4px rgba(52, 211, 163, .14), 0 0 14px rgba(198, 169, 107, .55); }
        body.em-landing .em-title {
            margin: 0 0 12px; font-family: var(--em-serif); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; letter-spacing: .005em;
            background-image: var(--em-metal-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
            filter: drop-shadow(0 2px 0 rgba(50, 36, 10, .8)) drop-shadow(0 0 22px rgba(198, 169, 107, .12));
        }
        body.em-landing .em-sub { max-width: 600px; margin: 0 auto; font-family: var(--em-serif); font-style: italic; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--em-muted); }

        /* ═════════════════════════════ FEATURES (فهرستِ سرمقاله‌ای) ═════════════════════════════ */
        body.em-landing .em-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 6vw, 84px); }
        body.em-landing .em-feature {
            position: relative; display: flex; align-items: flex-start; gap: 24px; min-width: 0;
            padding: 36px 0 34px; border-top: 1px solid var(--em-line);
        }
        body.em-landing .em-feature::before {
            content: ''; position: absolute; top: -1px; inset-inline-start: 0; height: 1px; width: 0;
            background: linear-gradient(90deg, var(--em-emerald-400), var(--em-champ-300)); box-shadow: 0 0 12px rgba(52, 211, 163, .6);
            transition: width .6s cubic-bezier(.2, .7, .2, 1);
        }
        body.em-landing .em-feature:hover::before { width: 100%; }
        body.em-landing .em-feature__no {
            position: absolute; top: 24px; inset-inline-end: 0; font-family: var(--em-serif); font-style: italic; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1;
            color: transparent; -webkit-text-stroke: 1px rgba(198, 169, 107, .34); transition: -webkit-text-stroke-color .4s, color .4s;
        }
        body.em-landing .em-feature:hover .em-feature__no { -webkit-text-stroke-color: rgba(198, 169, 107, .7); color: rgba(198, 169, 107, .06); }
        body.em-landing .em-feature__ico {
            position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--em-champ-200);
            background: radial-gradient(circle at 50% 30%, rgba(18, 184, 134, .3), rgba(5, 20, 15, .95) 72%);
            box-shadow: 0 0 0 1px rgba(198, 169, 107, .52), 0 0 0 6px rgba(5, 20, 15, .85), 0 0 0 7px rgba(198, 169, 107, .2), 0 10px 26px rgba(0, 0, 0, .5);
            transition: box-shadow .4s, color .4s;
        }
        body.em-landing .em-feature:hover .em-feature__ico { color: var(--em-emerald-300); box-shadow: 0 0 0 1px rgba(52, 211, 163, .7), 0 0 0 6px rgba(5, 20, 15, .85), 0 0 0 7px rgba(52, 211, 163, .3), 0 0 30px rgba(18, 184, 134, .35); }
        body.em-landing .em-feature__ico svg { width: 28px; height: 28px; }
        body.em-landing .em-feature h3 { margin: 4px 0 8px; padding-inline-end: 56px; font-family: var(--em-serif); font-weight: 500; font-size: 1.42rem; line-height: 1.25; color: var(--em-champ-100); }
        body.em-landing .em-feature p { margin: 0; max-width: 46ch; font-size: .98rem; line-height: 1.75; color: var(--em-muted); }

        /* ═════════════════════════════ TRACK RECORD (دفتر کل) ═════════════════════════════ */
        body.em-landing #trackRecord .em-title::before {
            content: ''; display: inline-block; width: .26em; height: .26em; margin-inline-end: .42em; vertical-align: .24em; border-radius: 50%;
            background: var(--em-win); box-shadow: 0 0 0 .12em rgba(61, 220, 171, .18), 0 0 12px rgba(61, 220, 171, .8);
            animation: em-live 1.8s ease-in-out infinite; -webkit-text-fill-color: initial;
        }
        body.em-landing .em-ledger {
            position: relative; padding: clamp(20px, 3.2vw, 38px);
            background: repeating-linear-gradient(45deg, rgba(198, 169, 107, .03) 0 1px, transparent 1px 10px), var(--em-panel);
            border: 1px solid var(--em-line); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 244, 214, .06);
        }
        body.em-landing .em-ledger::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(198, 169, 107, .15); pointer-events: none; }
        body.em-landing .em-ledger > * { position: relative; }

        body.em-landing #trackRecord .tr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 34px); margin-bottom: 26px; border-bottom: 1px solid var(--em-line); }
        body.em-landing #trackRecord .tr-chip {
            position: relative; padding: 12px 6px 14px; min-height: 44px; background: none; border: 0; cursor: pointer;
            font: 600 .74rem/1 var(--em-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--em-muted); transition: color .25s;
        }
        body.em-landing #trackRecord .tr-chip::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--em-metal-h); transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
        body.em-landing #trackRecord .tr-chip:hover:not(:disabled) { color: var(--em-champ-100); }
        body.em-landing #trackRecord .tr-chip.active { color: var(--em-champ-200); }
        body.em-landing #trackRecord .tr-chip.active::after { transform: scaleX(1); }
        body.em-landing #trackRecord .tr-chip:disabled { opacity: .36; cursor: not-allowed; }

        body.em-landing #trackRecord .tr-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(16px, 3vw, 30px); margin-bottom: 26px; }
        body.em-landing #trackRecord .tr-field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1 1 170px; max-width: 250px; }
        body.em-landing #trackRecord .tr-field label { font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--em-champ-400); }
        body.em-landing #trackRecord .tr-field input {
            width: 100%; padding: 10px 2px 11px; background: transparent; border: 0; border-bottom: 1px solid var(--em-line-strong); border-radius: 0;
            font: 500 1rem var(--em-serif); color: var(--em-ink); color-scheme: dark; transition: border-color .25s, box-shadow .25s;
        }
        body.em-landing #trackRecord .tr-field input:focus { outline: none; border-bottom-color: var(--em-emerald-400); box-shadow: 0 1px 0 var(--em-emerald-400); }
        body.em-landing #trackRecord .tr-field input::-webkit-calendar-picker-indicator { cursor: pointer; filter: sepia(1) saturate(2.4) hue-rotate(5deg) brightness(1.05); opacity: .85; }
        body.em-landing #trackRecord .tr-apply {
            position: relative; overflow: hidden; min-height: 46px; padding: 13px 34px; border-radius: 999px; cursor: pointer;
            font: 700 .74rem/1 var(--em-sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: #06130f;
            background: var(--em-metal-h); border: 1px solid rgba(255, 240, 200, .6);
            box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(110, 82, 30, .35);
            transition: transform .2s, box-shadow .2s;
        }
        body.em-landing #trackRecord .tr-apply:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .5), 0 0 30px rgba(198, 169, 107, .3), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(110, 82, 30, .35); }
        body.em-landing #trackRecord .tr-apply:disabled { opacity: .55; cursor: default; }

        body.em-landing #trackRecord .tr-note {
            margin-bottom: 24px; padding: 14px 20px; font-size: .86rem; line-height: 1.9; color: var(--em-muted);
            background: linear-gradient(90deg, rgba(18, 184, 134, .10), rgba(18, 184, 134, .02));
            border-inline-start: 2px solid var(--em-champ-400);
        }
        body.em-landing #trackRecord .tr-note strong { font-family: var(--em-serif); font-size: 1.02rem; font-weight: 500; letter-spacing: .02em; color: var(--em-champ-200); }

        body.em-landing #trackRecord .tr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 26px; border-block: 1px solid var(--em-line); }
        body.em-landing #trackRecord .tr-stat { min-width: 0; padding: 20px 14px 18px; text-align: center; }
        body.em-landing #trackRecord .tr-stat + .tr-stat { border-inline-start: 1px solid var(--em-line); }
        body.em-landing #trackRecord .tr-stat h4 { margin: 0 0 8px; font-size: .62rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--em-champ-400); }
        body.em-landing #trackRecord .tr-stat .v { font-family: var(--em-serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
        body.em-landing #trackRecord .tr-stat small { display: block; margin-top: 6px; font-size: .72rem; color: var(--em-faint); }

        body.em-landing #trackRecord .tr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--em-line); background: rgba(2, 9, 6, .5); scrollbar-width: thin; scrollbar-color: rgba(198, 169, 107, .45) transparent; }
        body.em-landing #trackRecord table { width: 100%; min-width: 780px; border-collapse: collapse; }
        body.em-landing #trackRecord thead th {
            padding: 15px 14px; white-space: nowrap; text-align: start; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--em-champ-300);
            background: linear-gradient(180deg, rgba(198, 169, 107, .10), rgba(198, 169, 107, .03)); border-bottom: 1px solid var(--em-line-strong);
        }
        body.em-landing #trackRecord tbody td { padding: 13px 14px; white-space: nowrap; font-size: .88rem; color: #dfe8e1; border-top: 1px solid rgba(198, 169, 107, .09); }
        body.em-landing #trackRecord tbody tr:hover td { background: rgba(18, 184, 134, .07); }
        body.em-landing #trackRecord .mono { font-family: var(--em-mono); font-variant-numeric: tabular-nums; }
        body.em-landing #trackRecord .tr-badge { display: inline-block; padding: 3px 11px; border: 1px solid transparent; border-radius: 3px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; }
        body.em-landing #trackRecord .b-buy, body.em-landing #trackRecord .b-tp { background: rgba(61, 220, 171, .10); color: var(--em-win); border-color: rgba(61, 220, 171, .34); }
        body.em-landing #trackRecord .b-sell, body.em-landing #trackRecord .b-sl { background: rgba(255, 112, 137, .10); color: var(--em-loss); border-color: rgba(255, 112, 137, .34); }
        body.em-landing #trackRecord .b-other { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .66); border-color: rgba(255, 255, 255, .12); }
        body.em-landing #trackRecord .tr-empty { text-align: center; padding: 28px; color: var(--em-faint); font-family: var(--em-serif); font-style: italic; }

        /* ═════════════════════════════ FOOTER ═════════════════════════════ */
        body.em-landing .em-footer { position: relative; margin-top: clamp(16px, 3vw, 40px); padding: 54px clamp(16px, 4vw, 40px) calc(38px + env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(180deg, rgba(3, 11, 8, 0), rgba(3, 11, 8, .92) 36%); }
        body.em-landing .em-footer::before { content: ''; position: absolute; top: 0; inset-inline: clamp(16px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, rgba(52, 211, 163, .4) 18%, rgba(198, 169, 107, .8) 50%, rgba(52, 211, 163, .4) 82%, transparent); }
        body.em-landing .em-footer__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; }
        body.em-landing .em-footer__brand .em-brand__mark { width: 40px; height: 40px; }
        body.em-landing .em-footer p { margin: 0 0 6px; font-size: .92rem; color: var(--em-muted); }
        body.em-landing .em-footer #footerWarning { font-size: .82rem; color: var(--em-faint); }

        /* ═════════════════════════════ MOTION ═════════════════════════════ */




        body.em-landing .em-hero__content > * { animation: em-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
        body.em-landing .em-hero__content > .em-medal { animation: em-rise .9s cubic-bezier(.2, .7, .2, 1) both, em-float 9s ease-in-out .9s infinite; }
        body.em-landing .em-hero__content > :nth-child(2) { animation-delay: .12s; }
        body.em-landing .em-hero__content > :nth-child(3) { animation-delay: .22s; }
        body.em-landing .em-hero__content > :nth-child(4) { animation-delay: .32s; }
        body.em-landing .em-hero__content > :nth-child(5) { animation-delay: .44s; }

        @media (prefers-reduced-motion: reduce) {
            html[data-ui-theme="emerald"] { scroll-behavior: auto; }
            body.em-landing *, body.em-landing *::before, body.em-landing *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
            body.em-landing .em-reveal { opacity: 1; transform: none; }
        }

        /* ═════════════════════════════ RESPONSIVE ═════════════════════════════ */
        @media (max-width: 991.98px) { body.em-landing .em-features { grid-template-columns: 1fr; } }
        @media (max-width: 860px) {
            body.em-landing #trackRecord .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body.em-landing #trackRecord .tr-stat:nth-child(3) { border-inline-start: 0; }
            body.em-landing #trackRecord .tr-stat:nth-child(n+3) { border-top: 1px solid var(--em-line); }
        }
        @media (max-width: 767.98px) {
            body.em-landing { --em-nav-h: 68px; }
            body.em-landing .em-corner { opacity: .55; }
            body.em-landing .em-stats { grid-template-columns: 1fr; max-width: 460px; }
            body.em-landing .em-feature { gap: 18px; padding: 30px 0 28px; }
            body.em-landing .em-feature__ico { width: 56px; height: 56px; }
            body.em-landing .em-feature h3 { font-size: 1.25rem; }
            body.em-landing #trackRecord .tr-field { flex: 1 1 100%; max-width: none; }
            body.em-landing #trackRecord .tr-apply { width: 100%; }
            body.em-landing .wallet-btn { padding-inline: 18px; }
        }
        @media (max-width: 420px) {
            body.em-landing .em-brand__word { font-size: 1rem; letter-spacing: .2em; }
            body.em-landing .em-brand__tag { letter-spacing: .5em; }
            body.em-landing .em-cta { padding-inline: 26px 30px; letter-spacing: .18em; }
            body.em-landing .em-corner--tl, body.em-landing .em-corner--tr { top: 12px; }
            body.em-landing .em-corner--bl, body.em-landing .em-corner--br { bottom: 12px; }
        }
    
/* ---- reveal (contract with wwwroot/js/themes/emerald/emerald-landing.js) -------------------------------------------
   Hidden until the observer adds .is-in. Timer fail-safe: if the script never runs, the content appears after ~3.6s.
   emerald-landing.js adds body.em-js-on once its observer is alive, which cancels the timer. */
body.em-landing .em-reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s ease, transform .85s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); animation: em-failsafe .01s linear 3.6s forwards; }
body.em-landing.em-js-on .em-reveal:not(.is-in) { animation: none; }
body.em-landing .em-reveal.is-in { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { body.em-landing .em-reveal { opacity: 1; transform: none; } }

/* ============================================================================
   NAV: Bootstrap navbar-expand-lg contract (collapse + toggler), auth area, AA contrast
   ========================================================================== */
body.em-landing { --em-faint: rgba(205, 222, 212, .64); }
body.em-landing .em-nav { height: auto; min-height: var(--em-nav-h); padding-block: 0; }
body.em-landing .em-nav__in { flex-wrap: wrap; }
body.em-landing .em-brand { margin: 0; padding: 0; font-size: inherit; }
body.em-landing .em-toggler {
    place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
    color: var(--em-champ-200); background: linear-gradient(180deg, rgba(198, 169, 107, .10), rgba(198, 169, 107, .02));
    border: 1px solid var(--em-line-strong); transition: border-color .25s, background .25s, color .25s;
}
@media (max-width: 991.98px) { body.em-landing .em-toggler { display: inline-grid; } }
body.em-landing .em-toggler:hover { color: var(--em-champ-100); border-color: var(--em-champ-300); }
body.em-landing .em-toggler:focus { box-shadow: none; }
body.em-landing .em-toggler:focus-visible { outline: 2px solid var(--em-emerald-400); outline-offset: 3px; }
body.em-landing .em-toggler svg { width: 22px; height: 22px; }
body.em-landing .em-nav .navbar-collapse { flex-grow: 1; }
body.em-landing .em-nav .at-auth-area { flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
body.em-landing .em-nav .auth-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
body.em-landing .wallet-btn--ghost { background: transparent; border-color: rgba(198, 169, 107, .38); color: var(--em-muted) !important; }
body.em-landing .wallet-btn--ghost:hover { color: #06130f !important; }
@media (max-width: 991.98px) {
    body.em-landing .em-nav__in { padding-block: 10px; }
    body.em-landing .em-nav .navbar-collapse { flex-basis: 100%; }
    body.em-landing .em-nav .navbar-collapse.show,
    body.em-landing .em-nav .navbar-collapsing { margin-top: 12px; padding: 16px 0 6px; border-top: 1px solid var(--em-line); }
    body.em-landing .em-nav .at-auth-area, body.em-landing .em-nav .auth-nav { justify-content: flex-start; width: 100%; }
    body.em-landing .em-nav .wallet-btn { flex: 1 1 200px; }
}

/* ============================================================================
   LOGIN PAGES  (/landing/login, /landing/userlogin)
   Markup and inline <style> belong to the pages (classic colours); the body.em-landing prefix out-ranks them.
   Hard-coded inline colours (icons, links) are handled by emerald-landing-remap.css.
   ========================================================================== */
body.em-landing .login-page {
    min-height: calc(100vh - var(--em-nav-h) - 170px); min-height: calc(100svh - var(--em-nav-h) - 170px);
    padding: clamp(28px, 5vw, 64px) 16px;
}
/* Bootstrap reboot gives headings/paragraphs margins that the classic layout reset away */
body.em-landing :where(.login-page) :where(p, h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: 0; }

body.em-landing .login-page .login-card {
    position: relative; max-width: 460px; padding: 50px 40px 36px; color: var(--em-ink);
    background: repeating-linear-gradient(45deg, rgba(198, 169, 107, .035) 0 1px, transparent 1px 9px), var(--em-panel);
    border: 1px solid var(--em-line); border-radius: 0;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 244, 214, .06);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    animation: em-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
body.em-landing .login-page .login-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(198, 169, 107, .16); pointer-events: none; }
body.em-landing .login-page .login-card::after {
    content: ''; position: absolute; top: -1px; left: 50%; width: 46%; height: 2px; transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--em-champ-300), transparent);
}
body.em-landing .login-page .login-card > * { position: relative; z-index: 1; }

/* medallion badge */
body.em-landing .login-page .logo-section .logo-icon {
    width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; font-size: 26px; color: var(--em-champ-200);
    background: radial-gradient(circle at 50% 30%, rgba(18, 184, 134, .3), rgba(5, 20, 15, .95) 72%);
    box-shadow: 0 0 0 1px rgba(198, 169, 107, .55), 0 0 0 6px rgba(5, 20, 15, .9), 0 0 0 7px rgba(198, 169, 107, .24), 0 0 28px rgba(18, 184, 134, .25);
}
body.em-landing .login-page .logo-section h1 {
    margin-bottom: 8px; font-family: var(--em-serif); font-weight: 500; font-size: 2rem; line-height: 1.15; letter-spacing: .005em;
    background: var(--em-metal-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(50, 36, 10, .8)) drop-shadow(0 0 20px rgba(198, 169, 107, .14));
}
body.em-landing .login-page .logo-section p { font-family: var(--em-serif); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--em-muted); }

/* primary buttons: champagne pill with sheen */
body.em-landing .login-page :is(.login-wallet-btn, .login-btn) {
    min-height: 54px; border-radius: 999px; color: #06130f;
    font: 700 .8rem/1.2 var(--em-sans); letter-spacing: .2em; text-transform: uppercase;
    background: var(--em-metal-h); border: 1px solid rgba(255, 240, 200, .65);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 34px rgba(198, 169, 107, .18), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(110, 82, 30, .38);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.em-landing .login-page :is(.login-wallet-btn, .login-btn)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%);
}
body.em-landing .login-page :is(.login-wallet-btn, .login-btn):hover:not(:disabled):not(.connecting) {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 46px rgba(198, 169, 107, .34), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(110, 82, 30, .38);
}
body.em-landing .login-page :is(.login-wallet-btn, .login-btn):hover:not(:disabled):not(.connecting)::after { transform: translateX(120%); transition: transform .8s ease; }
body.em-landing .login-page :is(.login-wallet-btn, .login-btn):active:not(:disabled) { transform: translateY(0); }
body.em-landing .login-page :is(.login-wallet-btn, .login-btn) i { font-size: 1.1rem; }
body.em-landing .login-page .login-wallet-btn.connecting,
body.em-landing .login-page .login-btn:disabled {
    color: var(--em-champ-200); background: linear-gradient(180deg, #0c2219, #07140f); border-color: var(--em-line-strong); box-shadow: none; opacity: 1;
}
body.em-landing .login-page .login-wallet-btn.connected {
    color: #04140c; letter-spacing: .06em; text-transform: none;
    background: linear-gradient(180deg, #8af7c8, #34d3a3 55%, #12b886); border-color: rgba(190, 255, 230, .6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 34px rgba(52, 211, 163, .3), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(4, 60, 38, .4);
}
body.em-landing .login-page :is(.login-wallet-btn, .login-btn):focus-visible,
body.em-landing .login-page .alt-wallet-btn:focus-visible { outline: 2px solid var(--em-emerald-400); outline-offset: 4px; }

body.em-landing .login-page .spinner {
    border: 2px solid rgba(198, 169, 107, .3); border-top-color: var(--em-champ-300); animation: em-spin .8s linear infinite;
}

/* divider, links, footer */
body.em-landing .login-page .divider { color: var(--em-muted); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
body.em-landing .login-page .divider::before,
body.em-landing .login-page .divider::after { background: linear-gradient(90deg, transparent, rgba(198, 169, 107, .5), transparent); }
body.em-landing .login-page a[hx-get],
body.em-landing .login-page .login-footer a { display: inline-block; min-height: 44px; padding-block: 10px; line-height: 1.7; }
body.em-landing .login-page a[hx-get] i,
body.em-landing .login-page .login-footer a i { margin-inline-end: 6px; }
body.em-landing .login-page .login-footer { border-top: 1px solid rgba(198, 169, 107, .2); }
body.em-landing .login-page .login-footer a { color: var(--em-champ-300); text-decoration: none; font-size: 14px; }
body.em-landing .login-page .login-footer a:hover { color: var(--em-champ-100); text-decoration: underline; }
body.em-landing .login-page .login-footer p { color: var(--em-faint); font-size: 12px; margin-top: 10px; }
body.em-landing .login-page [style*="#22d3ee"] { color: var(--em-champ-300) !important; }
body.em-landing .login-page a[style*="#22d3ee"]:hover { color: var(--em-champ-100) !important; }
body.em-landing .login-page [style*="#94a3b8"] { color: var(--em-muted) !important; }

/* secondary wallet buttons */
body.em-landing .login-page .alt-wallet-btn {
    min-height: 48px; background: rgba(2, 9, 6, .55); border: 1px solid var(--em-line); border-radius: 4px;
    color: var(--em-ink-2); font: 600 .8rem/1.2 var(--em-sans); letter-spacing: .04em;
}
body.em-landing .login-page .alt-wallet-btn:hover { background: rgba(198, 169, 107, .08); border-color: var(--em-line-strong); box-shadow: 0 0 22px rgba(198, 169, 107, .12); transform: translateY(-2px); }

/* status messages */
body.em-landing .login-page .status-msg { border-radius: 4px; font-size: 14px; line-height: 1.5; }
body.em-landing .login-page .status-msg.error { background: rgba(255, 112, 137, .10); color: var(--em-loss); border: 1px solid rgba(255, 112, 137, .36); }
body.em-landing .login-page .status-msg.success { background: rgba(61, 220, 171, .10); color: var(--em-win); border: 1px solid rgba(61, 220, 171, .36); }
body.em-landing .login-page .status-msg.loading { background: rgba(198, 169, 107, .08); color: var(--em-champ-200); border: 1px solid var(--em-line-strong); }

/* notice + wallet box */
body.em-landing .login-page .security-notice {
    background: linear-gradient(90deg, rgba(18, 184, 134, .10), rgba(18, 184, 134, .02));
    border: 1px solid rgba(198, 169, 107, .16); border-inline-start: 2px solid var(--em-champ-400); border-radius: 0; color: var(--em-muted); font-size: 12.5px;
}
body.em-landing .login-page .security-notice i { color: var(--em-emerald-400); }
body.em-landing .login-page .wallet-info { background: rgba(2, 9, 6, .55); border: 1px solid var(--em-line-strong); border-radius: 4px; }
body.em-landing .login-page .wallet-address { color: var(--em-champ-200); font-family: var(--em-mono); }
body.em-landing .login-page .wallet-info .badge { background: rgba(61, 220, 171, .10); color: var(--em-win); border: 1px solid rgba(61, 220, 171, .34); }

/* user-login form: ledger underline inputs */
body.em-landing .login-page .form-group label { color: var(--em-champ-400); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
body.em-landing .login-page .form-group input {
    min-height: 48px; padding: 11px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--em-line-strong); border-radius: 0;
    color: var(--em-ink); color-scheme: dark; box-shadow: none;
}
body.em-landing .login-page .form-group input::placeholder { color: rgba(205, 222, 212, .55); }
body.em-landing .login-page .form-group input:focus { background: rgba(18, 184, 134, .05); border-bottom-color: var(--em-emerald-400); box-shadow: 0 1px 0 var(--em-emerald-400); }
body.em-landing .login-page .form-group input:focus-visible { outline: 2px solid var(--em-emerald-400); outline-offset: 2px; }
body.em-landing .login-page .form-group .hint { color: var(--em-faint); }

@media (max-width: 480px) {
    body.em-landing .login-page .login-card { padding: 40px 22px 28px; }
    body.em-landing .login-page .logo-section h1 { font-size: 1.65rem; }
    body.em-landing .login-page :is(.login-wallet-btn, .login-btn) { letter-spacing: .12em; font-size: .74rem; }
}

/* ============================================================================
   Phase 317 - right-to-left (Persian). Everything above already uses logical properties; these are the few
   direction-bearing details. The Persian font itself is switched in emerald-landing-i18n.css.
   ========================================================================= */
/* the light sweep on buttons runs from the inline start (right) to the inline end (left) */
html[dir="rtl"] body.em-landing .em-cta::after,
html[dir="rtl"] body.em-landing .wallet-btn::after,
html[dir="rtl"] body.em-landing .login-page :is(.login-wallet-btn, .login-btn)::after { transform: translateX(120%); }
html[dir="rtl"] body.em-landing .em-cta:hover::after,
html[dir="rtl"] body.em-landing .wallet-btn:hover::after,
html[dir="rtl"] body.em-landing .login-page :is(.login-wallet-btn, .login-btn):hover:not(:disabled):not(.connecting)::after { transform: translateX(-120%); }
/* the hero kicker line: Persian has no italic and breaks under letter-spacing (::first-line is not reached by i18n.css) */
html[lang="fa"] body.em-landing .em-hero h1::first-line { font-style: normal; letter-spacing: 0; text-transform: none; }