/* _content/AITranslationPlatform.Web/Components/Account/Pages/CompleteRegistration.razor.rz.scp.css */
.registration-page[b-e8zl9n57b3] {
    --ink: #30291e;
    --muted: #8e826f;
    --gold: #dca523;
    --gold-light: #f9d361;
    --line: #e8dac1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    padding: 42px 20px;
    overflow: hidden;
    color: var(--ink);
    background: radial-gradient(circle at 50% 0, #fff8e9, #f5f0e6 70%);
    font-family: "IRANSansX", Tahoma, sans-serif;
}

.registration-page[dir="ltr"][b-e8zl9n57b3] { font-family: Inter, "Segoe UI", Arial, sans-serif; }

.registration-background[b-e8zl9n57b3] { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.registration-background[b-e8zl9n57b3]::before, .registration-background[b-e8zl9n57b3]::after {
    content: ""; position: absolute; width: 120vw; height: 380px; left: -10vw;
    border: 1px solid rgba(220, 165, 35, .2); border-radius: 50%;
}
.registration-background[b-e8zl9n57b3]::before { top: -337px; }
.registration-background[b-e8zl9n57b3]::after { bottom: -337px; }

.registration-card[b-e8zl9n57b3] {
    width: min(100%, 560px);
    padding: 32px 42px 28px;
    border: 1px solid rgba(224, 207, 173, .55);
    border-radius: 28px;
    background: rgba(255, 253, 249, .96);
    box-shadow: 0 24px 70px rgba(91, 69, 28, .1);
    animation: registration-enter-b-e8zl9n57b3 .45s ease-out both;
}

@keyframes registration-enter-b-e8zl9n57b3 {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.registration-visual[b-e8zl9n57b3] {
    width: 132px; height: 132px; margin: 4px auto 18px; position: relative;
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle, #fff8e8 40%, #f4e9cf 100%);
}
.visual-orbit[b-e8zl9n57b3] { position: absolute; border: 1px solid rgba(220,165,35,.16); border-radius: 50%; }
.orbit-one[b-e8zl9n57b3] { inset: -12px; }
.orbit-two[b-e8zl9n57b3] { inset: -24px; }
.visual-envelope[b-e8zl9n57b3] {
    width: 95px; height: 72px; transform: rotate(-5deg);
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 11px 12px; border: 1px solid #eee4d2; border-radius: 12px;
    background: #fff; box-shadow: 0 12px 22px rgba(91,69,28,.1);
}
.envelope-mark[b-e8zl9n57b3] { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 5px; background: var(--gold); color: #4b3709; font-size: 10px; font-weight: 900; }
.envelope-line[b-e8zl9n57b3] { width: 62px; height: 3px; border-radius: 3px; background: #e9e1d4; }
.envelope-line.short[b-e8zl9n57b3] { width: 43px; }
.envelope-dots[b-e8zl9n57b3] { align-self: center; margin-top: -3px; color: #bd8414; font-size: 11px; letter-spacing: 3px; }
.visual-check[b-e8zl9n57b3] {
    position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px;
    display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%;
    background: var(--gold); color: #30291e; font-weight: 900; box-shadow: 0 4px 10px rgba(91,69,28,.15);
}
.registration-heading[b-e8zl9n57b3] { text-align: center; }
.eyebrow[b-e8zl9n57b3] { color: #b87b12; font-size: .72rem; font-weight: 800; }
.registration-heading h1[b-e8zl9n57b3] { margin: 8px 0 9px; font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.4; }
.registration-heading p[b-e8zl9n57b3] { max-width: 410px; margin: 0 auto 22px; color: var(--muted); font-size: .83rem; line-height: 1.9; }

.registration-card[b-e8zl9n57b3]  .registration-form,
.registration-card[b-e8zl9n57b3]  .code-form { display: grid; gap: 15px; }
.name-row[b-e8zl9n57b3] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.registration-field[b-e8zl9n57b3] { min-width: 0; display: grid; gap: 7px; }
.registration-field label[b-e8zl9n57b3] { color: #5f513d; font-size: .78rem; font-weight: 700; }
.registration-field label span[b-e8zl9n57b3] { color: #b7770d; }
.registration-field[b-e8zl9n57b3]  input {
    width: 100%; height: 48px; padding: 0 17px; box-sizing: border-box;
    border: 1px solid #e1d4c1; border-radius: 18px; outline: none;
    background: linear-gradient(180deg, #fffefb, #fcf8f1);
    box-shadow: 0 8px 24px rgba(82, 57, 22, .045);
    color: var(--ink); font: inherit; font-size: .88rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.registration-field[b-e8zl9n57b3]  input:hover { border-color: rgba(197, 138, 22, .34); }
.registration-field[b-e8zl9n57b3]  input:focus {
    border-color: rgba(197, 138, 22, .72);
    background: #fffefb;
    box-shadow: 0 0 0 4px rgba(197, 138, 22, .09), 0 12px 30px rgba(91, 62, 22, .08);
}
.registration-field[b-e8zl9n57b3]  input[dir="ltr"] { text-align: left; }
.registration-field[b-e8zl9n57b3]  input::placeholder { color: #a99d8d; }
.registration-field[b-e8zl9n57b3]  .validation-message { color: #b94734; font-size: .72rem; }
.registration-button[b-e8zl9n57b3] {
    min-height: 52px; width: 100%; border: 0; border-radius: 13px;
    background: linear-gradient(100deg, #f2c854, #dfa31e);
    color: #3a2a0d; font: inherit; font-size: .9rem; font-weight: 800;
    cursor: pointer; box-shadow: 0 12px 24px rgba(205,148,29,.2);
    transition: filter .18s ease, transform .18s ease;
}
.registration-button:hover[b-e8zl9n57b3] { filter: brightness(1.04); transform: translateY(-1px); }
.registration-button:active[b-e8zl9n57b3] { transform: translateY(0); }
.registration-button:focus-visible[b-e8zl9n57b3] { outline: 3px solid rgba(182,117,13,.55); outline-offset: 3px; }
.registration-message[b-e8zl9n57b3] { margin-bottom: 17px; padding: 11px 13px; border-radius: 12px; font-size: .79rem; line-height: 1.8; }
.registration-message.error[b-e8zl9n57b3] { background: #fff1ec; color: #a33d2d; border: 1px solid #efc8bc; }
.registration-message.success[b-e8zl9n57b3] { background: #eff7eb; color: #326a38; border: 1px solid #cfe4c9; }
.code-section[b-e8zl9n57b3] { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.code-intro[b-e8zl9n57b3] { display: grid; gap: 4px; margin-bottom: 14px; }
.code-intro strong[b-e8zl9n57b3] { font-size: .88rem; }
.code-intro span[b-e8zl9n57b3] { color: var(--muted); font-size: .77rem; line-height: 1.9; }
.code-intro b[b-e8zl9n57b3] { color: #ad7110; overflow-wrap: anywhere; }
.code-section .registration-field[b-e8zl9n57b3]  input { letter-spacing: .32em; text-align: center; font-size: 1.15rem; font-weight: 800; }
.registration-footer[b-e8zl9n57b3] { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; color: #aa9c86; font-size: .7rem; line-height: 1.8; }

:root[data-theme="dark"] .registration-page[b-e8zl9n57b3] {
    --ink: #f6eede; --muted: #b7a98f; --line: #574831;
    background: radial-gradient(circle at 50% 0, #30291e, #1d1b19 75%);
}
:root[data-theme="dark"] .registration-card[b-e8zl9n57b3] { background: #282520; border-color: #4b4031; }
:root[data-theme="dark"] .registration-field label[b-e8zl9n57b3] { color: #e5d8c3; }
:root[data-theme="dark"] .registration-field[b-e8zl9n57b3]  input { color: #f6eede; background: #332e27; border-color: #62523b; }
:root[data-theme="dark"] .visual-envelope[b-e8zl9n57b3] { background: #eee8dd; }
:root[data-theme="dark"] .registration-message.error[b-e8zl9n57b3] { background: #412722; color: #ffb5a5; border-color: #744139; }
:root[data-theme="dark"] .registration-message.success[b-e8zl9n57b3] { background: #253d2b; color: #a9e0af; border-color: #3e6845; }

@media (max-width: 560px) {
    .registration-page[b-e8zl9n57b3] { padding: 20px 14px; }
    .registration-card[b-e8zl9n57b3] { padding: 28px 22px 24px; border-radius: 24px; }
    .registration-visual[b-e8zl9n57b3] { width: 110px; height: 110px; margin-bottom: 15px; }
    .name-row[b-e8zl9n57b3] { grid-template-columns: 1fr; }
}

/* Goftito logo instead of the letter. */
.envelope-mark[b-e8zl9n57b3] { background: #fffdf8; }
.envelope-mark .goftito-mark[b-e8zl9n57b3] { display: block; width: 86%; height: 86%; object-fit: contain; }
/* _content/AITranslationPlatform.Web/Components/Account/Pages/Home.razor.rz.scp.css */
/* =========================================================
   AI TRANSLATION — PUBLIC LANDING V1
   Token-driven Light / Warm Dark marketing surface.
   ========================================================= */

.home-page[b-w2nmzbtm49] {
    --bg: var(--ui-page,#f7f3ec);
    --surface: var(--ui-surface,#fff);
    --raised: var(--ui-surface-raised,#fffdf8);
    --soft: var(--ui-surface-sunken,#f4eee4);
    --ink: var(--text,#28231d);
    --text2: var(--text-secondary,#655e53);
    --muted: var(--muted,#958a7b);
    --line: var(--ui-line,rgba(73,59,42,.10));
    --line2: var(--ui-line-strong,rgba(73,59,42,.16));
    --accent: var(--ui-accent,#efbf45);
    --accent2: var(--ui-accent-strong,#dca52d);
    --accentSoft: var(--ui-accent-soft,rgba(226,175,46,.13));
    --accentTint: var(--ui-accent-tint,rgba(226,175,46,.075));
    --success: var(--ui-success,#4f9869);
    --successSoft: var(--ui-success-tint,rgba(79,152,105,.10));
    --danger: var(--ui-danger,#b85c59);
    --shadowSm: var(--ui-shadow-sm,0 10px 28px rgba(45,36,25,.07));
    --shadowMd: var(--ui-shadow-md,0 22px 56px rgba(45,36,25,.10));
    min-height: 100vh;
    overflow: hidden;
    color: var(--ink);
    background: radial-gradient(950px 600px at 7% 0%,var(--accentTint),transparent 62%),radial-gradient(850px 560px at 98% 18%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 63%),var(--bg)
}

    .home-page*[b-w2nmzbtm49], .home-page *[b-w2nmzbtm49]::before, .home-page *[b-w2nmzbtm49]::after {
        box-sizing: border-box
    }

    .home-page a[b-w2nmzbtm49] {
        color: inherit
    }

.container[b-w2nmzbtm49] {
    width: min(1240px,calc(100% - 42px));
    margin-inline: auto
}

.public-header[b-w2nmzbtm49] {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb,var(--bg) 84%,transparent);
    backdrop-filter: blur(20px) saturate(1.15)
}

.public-header__inner[b-w2nmzbtm49] {
    width: min(1320px,calc(100% - 30px));
    min-height: 72px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px
}

.brand[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none
}

.brand__mark[b-w2nmzbtm49] {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb,var(--accent2) 28%,transparent);
    border-radius: 14px;
    background: linear-gradient(145deg,var(--accent),var(--accent2));
    color: #34270f;
    box-shadow: 0 12px 26px color-mix(in srgb,var(--accent) 22%,transparent)
}

    .brand__mark[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset: -50%;
        background: linear-gradient(120deg,transparent 35%,rgba(255,255,255,.44) 50%,transparent 65%);
        transform: translateX(-90%) rotate(12deg);
        animation: logo-shine-b-w2nmzbtm49 7s ease-in-out infinite
    }

    .brand__mark svg[b-w2nmzbtm49] {
        position: relative;
        z-index: 1;
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.brand__copy[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column
}

    .brand__copy strong[b-w2nmzbtm49] {
        font-size: .72rem;
        font-weight: 900
    }

    .brand__copy small[b-w2nmzbtm49] {
        margin-top: 2px;
        color: var(--muted);
        font-size: .47rem;
        font-weight: 700;
        white-space: nowrap
    }

.public-nav[b-w2nmzbtm49] {
    display: flex;
    justify-content: center;
    gap: 25px
}

    .public-nav a[b-w2nmzbtm49] {
        position: relative;
        padding: 9px 0;
        color: var(--text2);
        font-size: .81rem;
        font-weight: 760;
        text-decoration: none
    }

        .public-nav a[b-w2nmzbtm49]::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 3px;
            width: 0;
            height: 2px;
            border-radius: 99px;
            background: var(--accent2);
            transform: translateX(-50%);
            transition: .18s
        }

        .public-nav a:hover[b-w2nmzbtm49] {
            color: var(--ink)
        }

            .public-nav a:hover[b-w2nmzbtm49]::after {
                width: 70%
            }

.public-header__actions[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 7px
}

.lang-button[b-w2nmzbtm49], .signin-button[b-w2nmzbtm49], .header-cta[b-w2nmzbtm49] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 11px;
    text-decoration: none;
    font-size: .57rem;
    font-weight: 820;
    transition: .17s
}

.lang-button[b-w2nmzbtm49] {
    min-width: 40px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text2)
}

.signin-button[b-w2nmzbtm49] {
    padding-inline: 13px;
    border: 1px solid var(--line);
    background: color-mix(in srgb,var(--surface) 78%,transparent);
    color: var(--text2)
}

.header-cta[b-w2nmzbtm49] {
    padding-inline: 15px;
    border: 1px solid color-mix(in srgb,var(--accent2) 30%,transparent);
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    color: #34270f;
    box-shadow: 0 9px 22px color-mix(in srgb,var(--accent) 18%,transparent)
}

    .lang-button:hover[b-w2nmzbtm49], .signin-button:hover[b-w2nmzbtm49], .header-cta:hover[b-w2nmzbtm49] {
        transform: translateY(-1px)
    }

.section[b-w2nmzbtm49] {
    padding: 100px 0
}

.section--soft[b-w2nmzbtm49] {
    background: radial-gradient(760px 500px at 96% 8%,var(--accentTint),transparent 62%),color-mix(in srgb,var(--soft) 72%,var(--bg) 28%)
}

.section-heading[b-w2nmzbtm49] {
    max-width: 880px;
    margin: 0 auto 44px;
    text-align: center
}

.section-kicker[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent2);
    font-size: .61rem;
    font-weight: 880
}

    .section-kicker[b-w2nmzbtm49]::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent2);
        box-shadow: 0 0 0 5px var(--accentSoft)
    }

.section-heading h2[b-w2nmzbtm49], .workflow-copy h2[b-w2nmzbtm49], .preservation-copy h2[b-w2nmzbtm49], .pricing-heading h2[b-w2nmzbtm49] {
    margin: 12px 0 13px;
    font-size: clamp(2rem,4vw,3.45rem);
    font-weight: 930;
    line-height: 1.16;
    letter-spacing: -.045em
}

.home-page[dir=rtl] .section-heading h2[b-w2nmzbtm49], .home-page[dir=rtl] .workflow-copy h2[b-w2nmzbtm49], .home-page[dir=rtl] .preservation-copy h2[b-w2nmzbtm49], .home-page[dir=rtl] .pricing-heading h2[b-w2nmzbtm49] {
    letter-spacing: -.015em
}

.section-heading p[b-w2nmzbtm49], .workflow-copy p[b-w2nmzbtm49], .preservation-copy p[b-w2nmzbtm49], .pricing-heading p[b-w2nmzbtm49] {
    margin: 0;
    color: var(--text2);
    font-size: .80rem;
    line-height: 1.95
}

/* HERO */
.hero[b-w2nmzbtm49] {
    position: relative;
    isolation: isolate;
    padding: 92px 0 34px
}

.hero__ambient[b-w2nmzbtm49] {
    position: absolute;
    z-index: -4;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px)
}

.hero__ambient--one[b-w2nmzbtm49] {
    left: -200px;
    top: -60px;
    background: color-mix(in srgb,var(--accent) 18%,transparent);
    animation: ambient-a-b-w2nmzbtm49 10s ease-in-out infinite alternate
}

.hero__ambient--two[b-w2nmzbtm49] {
    right: -210px;
    bottom: -110px;
    background: color-mix(in srgb,var(--success) 10%,transparent);
    animation: ambient-b-b-w2nmzbtm49 12s ease-in-out infinite alternate
}

.hero__layout[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: minmax(0,.93fr) minmax(560px,1.07fr);
    align-items: center;
    gap: 56px
}

.hero__copy[b-w2nmzbtm49] {
    max-width: 670px
}

.eyebrow[b-w2nmzbtm49] {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb,var(--accent2) 24%,var(--line));
    border-radius: 999px;
    background: color-mix(in srgb,var(--raised) 88%,transparent);
    color: var(--accent2);
    font-size: .61rem;
    font-weight: 850
}

    .eyebrow span[b-w2nmzbtm49] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 0 5px var(--successSoft);
        animation: pulse-b-w2nmzbtm49 2.2s ease-in-out infinite
    }

.hero h1[b-w2nmzbtm49] {
    margin: 23px 0 19px;
    font-size: clamp(3rem,5.65vw,5.35rem);
    font-weight: 950;
    line-height: 1.055;
    letter-spacing: -.065em
}

.home-page[dir=rtl] .hero h1[b-w2nmzbtm49] {
    letter-spacing: -.025em
}

.hero h1 strong[b-w2nmzbtm49] {
    display: block;
    margin-top: 3px;
    color: transparent;
    background: linear-gradient(110deg,color-mix(in srgb,var(--accent2) 76%,#8d5f18),var(--accent),color-mix(in srgb,var(--accent2) 80%,#9b6d25));
    background-clip: text;
    -webkit-background-clip: text
}

.hero__copy > p[b-w2nmzbtm49] {
    max-width: 650px;
    margin: 0;
    color: var(--text2);
    font-size: .88rem;
    line-height: 2
}

.hero__actions[b-w2nmzbtm49] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px
}

.button[b-w2nmzbtm49] {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    border-radius: 14px;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 860;
    transition: .18s
}

    .button:hover[b-w2nmzbtm49] {
        transform: translateY(-2px)
    }

.button--primary[b-w2nmzbtm49] {
    border: 1px solid color-mix(in srgb,var(--accent2) 30%,transparent);
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    color: #34270f;
    box-shadow: 0 14px 30px color-mix(in srgb,var(--accent) 22%,transparent)
}

.button--ghost[b-w2nmzbtm49] {
    border: 1px solid var(--line2);
    background: color-mix(in srgb,var(--surface) 78%,transparent);
    color: var(--text2)
}

    .button--ghost i[b-w2nmzbtm49] {
        width: 23px;
        height: 23px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--accentSoft);
        color: var(--accent2);
        font-style: normal;
        font-size: .43rem
    }

.hero__trust[b-w2nmzbtm49] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    margin-top: 23px;
    color: var(--muted);
    font-size: .55rem;
    font-weight: 720
}

    .hero__trust span[b-w2nmzbtm49] {
        padding: 5px 7px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: color-mix(in srgb,var(--surface) 76%,transparent)
    }

.hero-visual[b-w2nmzbtm49] {
    position: relative;
    min-height: 560px
}

.hero-visual__frame[b-w2nmzbtm49] {
    position: absolute;
    inset: 80px 34px 44px 44px;
    border: 1px solid var(--line);
    border-radius: 44px;
    background: radial-gradient(circle at 22% 18%,var(--accentTint),transparent 34%),color-mix(in srgb,var(--raised) 64%,transparent);
    box-shadow: var(--shadowMd);
    transform: rotate(-1.5deg)
}

.doc-card[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    border: 1px solid var(--line2);
    border-radius: 19px;
    background: var(--surface);
    box-shadow: var(--shadowMd)
}

.doc-card--source[b-w2nmzbtm49] {
    width: 280px;
    height: 366px;
    left: 4px;
    top: 112px;
    opacity: .86;
    transform: rotate(-5deg);
    animation: float-source-b-w2nmzbtm49 6s ease-in-out infinite
}

.home-page[dir=rtl] .doc-card--source[b-w2nmzbtm49] {
    left: auto;
    right: 4px;
    transform: rotate(5deg)
}

.doc-card--target[b-w2nmzbtm49] {
    width: 322px;
    height: 420px;
    right: 2px;
    top: 70px;
    z-index: 7;
    transform: rotate(2deg);
    animation: float-target-b-w2nmzbtm49 7s ease-in-out infinite
}

.home-page[dir=rtl] .doc-card--target[b-w2nmzbtm49] {
    right: auto;
    left: 2px;
    transform: rotate(-2deg)
}

.doc-bar[b-w2nmzbtm49] {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-bottom: 1px solid var(--line);
    background: var(--soft)
}

    .doc-bar > i[b-w2nmzbtm49] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        opacity: .35
    }

        .doc-bar > i:first-child[b-w2nmzbtm49] {
            background: var(--accent2);
            opacity: .85
        }

    .doc-bar b[b-w2nmzbtm49] {
        margin-inline-start: 6px;
        color: var(--muted);
        font-size: .42rem
    }

.doc-page[b-w2nmzbtm49] {
    padding: 23px 21px
}

    .doc-page > strong[b-w2nmzbtm49] {
        display: block;
        width: 56%;
        height: 10px;
        margin-bottom: 21px;
        border-radius: 99px;
        background: color-mix(in srgb,var(--ink) 24%,transparent)
    }

.doc-page--target > strong[b-w2nmzbtm49] {
    margin-inline-start: auto;
    background: color-mix(in srgb,var(--accent2) 38%,transparent)
}

.doc-columns[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 14px;
    align-items: end
}

.doc-columns--target[b-w2nmzbtm49] {
    grid-template-columns: .88fr 1.12fr
}

.doc-lines i[b-w2nmzbtm49] {
    display: block;
    height: 6px;
    margin-bottom: 8px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--text2) 15%,transparent)
}

.doc-chart[b-w2nmzbtm49], .big-chart[b-w2nmzbtm49] {
    height: 95px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    padding: 11px 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft)
}

    .doc-chart b[b-w2nmzbtm49], .big-chart b[b-w2nmzbtm49] {
        width: 12px;
        height: var(--h);
        border-radius: 4px 4px 2px 2px;
        background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 65%,#fff),var(--accent2))
    }

.doc-table[b-w2nmzbtm49], .big-table[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    margin-top: 19px;
    border: 1px solid var(--line);
    border-radius: 8px
}

    .doc-table span[b-w2nmzbtm49], .big-table span[b-w2nmzbtm49] {
        min-height: 23px;
        border-inline-end: 1px solid var(--line);
        border-bottom: 1px solid var(--line)
    }

.doc-page > em[b-w2nmzbtm49] {
    display: block;
    width: 46%;
    height: 4px;
    margin-top: 17px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--muted) 26%,transparent)
}

.ready-badge[b-w2nmzbtm49] {
    position: absolute;
    z-index: 3;
    right: 10px;
    top: 44px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb,var(--success) 16%,transparent);
    border-radius: 7px;
    background: var(--successSoft);
    color: var(--success);
    font-size: .44rem;
    font-weight: 880
}

.home-page[dir=rtl] .ready-badge[b-w2nmzbtm49] {
    right: auto;
    left: 10px
}

.analysis-core[b-w2nmzbtm49] {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 49%;
    width: 82px;
    height: 178px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: translate(-50%,-50%)
}

.analysis-core__beam[b-w2nmzbtm49] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb,var(--accent2) 17%,transparent)
}

    .analysis-core__beam[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        top: -60px;
        width: 100%;
        height: 65px;
        background: linear-gradient(180deg,transparent,var(--accent2),transparent);
        animation: beam-b-w2nmzbtm49 2.35s linear infinite
    }

.analysis-core > b[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb,var(--accent2) 25%,transparent);
    border-radius: 18px;
    background: var(--surface);
    color: var(--accent2);
    box-shadow: var(--shadowSm);
    font-size: .65rem
}

.analysis-core small[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    width: 110px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb,var(--surface) 92%,transparent);
    color: var(--muted);
    font-size: .33rem;
    text-align: center
}

.float-card[b-w2nmzbtm49] {
    position: absolute;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb,var(--surface) 92%,transparent);
    box-shadow: var(--shadowSm);
    backdrop-filter: blur(12px);
    animation: badge-float-b-w2nmzbtm49 5.8s ease-in-out infinite
}

    .float-card b[b-w2nmzbtm49] {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: var(--accentSoft);
        color: var(--accent2);
        font-size: .60rem
    }

    .float-card span[b-w2nmzbtm49] {
        font-size: .46rem;
        font-weight: 800
    }

.float-card--layout[b-w2nmzbtm49] {
    right: 9px;
    top: 28px
}

.float-card--qa[b-w2nmzbtm49] {
    left: 44px;
    bottom: 15px;
    animation-delay: -1.6s
}

.home-page[dir=rtl] .float-card--layout[b-w2nmzbtm49] {
    right: auto;
    left: 9px
}

.home-page[dir=rtl] .float-card--qa[b-w2nmzbtm49] {
    left: auto;
    right: 44px
}

.stream[b-w2nmzbtm49] {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 49%;
    width: 104px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translate(-50%,-50%)
}

    .stream i[b-w2nmzbtm49] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent2);
        animation: stream-b-w2nmzbtm49 1.35s ease-in-out infinite
    }

        .stream i:nth-child(2)[b-w2nmzbtm49] {
            animation-delay: .13s
        }

        .stream i:nth-child(3)[b-w2nmzbtm49] {
            animation-delay: .26s
        }

        .stream i:nth-child(4)[b-w2nmzbtm49] {
            animation-delay: .39s
        }

        .stream i:nth-child(5)[b-w2nmzbtm49] {
            animation-delay: .52s
        }

.hero-metrics[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 42px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: color-mix(in srgb,var(--surface) 76%,transparent);
    box-shadow: var(--shadowSm);
    backdrop-filter: blur(16px)
}

    .hero-metrics > div[b-w2nmzbtm49] {
        min-height: 94px;
        padding: 17px 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        border-inline-end: 1px solid var(--line)
    }

        .hero-metrics > div:last-child[b-w2nmzbtm49] {
            border: 0
        }

    .hero-metrics strong[b-w2nmzbtm49] {
        font-size: 1.25rem;
        font-weight: 930
    }

    .hero-metrics span[b-w2nmzbtm49] {
        color: var(--muted);
        font-size: .52rem
    }

/* DIFFERENCE */
.difference-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 17px
}

.difference-card[b-w2nmzbtm49] {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadowSm)
}

.difference-card--plain[b-w2nmzbtm49] {
    background: linear-gradient(180deg,color-mix(in srgb,var(--soft) 72%,var(--surface) 28%),var(--surface))
}

.difference-card--pro[b-w2nmzbtm49] {
    border-color: color-mix(in srgb,var(--accent2) 28%,var(--line));
    background: radial-gradient(circle at 88% 6%,var(--accentSoft),transparent 30%),linear-gradient(145deg,var(--raised),var(--surface));
    box-shadow: var(--shadowMd)
}

.pro-shine[b-w2nmzbtm49] {
    position: absolute;
    width: 230px;
    height: 230px;
    top: -120px;
    right: -80px;
    border: 35px solid color-mix(in srgb,var(--accent) 9%,transparent);
    border-radius: 50%
}

.difference-card header[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px
}

    .difference-card header > span:first-child[b-w2nmzbtm49] {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: var(--soft);
        color: var(--accent2);
        font-weight: 900
    }

    .difference-card header small[b-w2nmzbtm49] {
        display: block;
        color: var(--muted);
        font-size: .47rem
    }

    .difference-card header h3[b-w2nmzbtm49] {
        margin: 2px 0 0;
        font-size: .95rem
    }

    .difference-card header > b[b-w2nmzbtm49] {
        margin-inline-start: auto;
        padding: 6px 8px;
        border: 1px solid color-mix(in srgb,var(--accent2) 22%,transparent);
        border-radius: 999px;
        background: var(--accentSoft);
        color: var(--accent2);
        font-size: .43rem
    }

.plain-visual[b-w2nmzbtm49], .pro-visual[b-w2nmzbtm49] {
    min-height: 290px;
    display: grid;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--soft)
}

.plain-visual[b-w2nmzbtm49] {
    grid-template-columns: 1fr 34px 1fr
}

.pro-visual[b-w2nmzbtm49] {
    grid-template-columns: 1fr 48px 1fr;
    background: radial-gradient(circle at 50% 50%,var(--accentSoft),transparent 42%),var(--soft)
}

.mini-page[b-w2nmzbtm49], .mini-text[b-w2nmzbtm49] {
    min-height: 220px;
    padding: 20px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadowSm)
}

    .mini-page > b[b-w2nmzbtm49] {
        display: block;
        width: 52%;
        height: 8px;
        margin-bottom: 18px;
        border-radius: 99px;
        background: color-mix(in srgb,var(--text2) 20%,transparent)
    }

    .mini-page > i[b-w2nmzbtm49], .mini-text > i[b-w2nmzbtm49] {
        display: block;
        height: 5px;
        margin-bottom: 7px;
        border-radius: 99px;
        background: color-mix(in srgb,var(--text2) 14%,transparent)
    }

.mini-grid[b-w2nmzbtm49] {
    height: 70px;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size: 100% 23px,33% 100%
}

.mini-text[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .mini-text em[b-w2nmzbtm49] {
        margin-top: 17px;
        color: var(--danger);
        font-size: .45rem;
        font-style: normal;
        font-weight: 800
    }

.mini-page--full[b-w2nmzbtm49] {
    position: relative
}

    .mini-page--full label[b-w2nmzbtm49] {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 4px 6px;
        border-radius: 6px;
        background: var(--ink);
        color: var(--surface);
        font-size: .37rem
    }

.home-page[dir=rtl] .mini-page--full label[b-w2nmzbtm49] {
    left: auto;
    right: 8px
}

.mini-split[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr 62px;
    gap: 9px
}

.mini-split--rtl[b-w2nmzbtm49] {
    grid-template-columns: 62px 1fr
}

.mini-split i[b-w2nmzbtm49] {
    height: 62px;
    background: repeating-linear-gradient(to bottom,color-mix(in srgb,var(--text2) 14%,transparent) 0 4px,transparent 4px 10px)
}

.mini-split span[b-w2nmzbtm49] {
    height: 62px;
    border-radius: 8px;
    background: linear-gradient(135deg,var(--accentTint),var(--soft))
}

.pro-bridge[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px
}

    .pro-bridge i[b-w2nmzbtm49] {
        width: 2px;
        height: 38px;
        background: color-mix(in srgb,var(--accent2) 18%,transparent)
    }

    .pro-bridge b[b-w2nmzbtm49] {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb,var(--accent2) 25%,transparent);
        border-radius: 13px;
        background: var(--surface);
        color: var(--accent2);
        box-shadow: var(--shadowSm);
        font-size: .52rem
    }

.difference-card ul[b-w2nmzbtm49] {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none
}

.difference-card li[b-w2nmzbtm49] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text2);
    font-size: .57rem;
    line-height: 1.6
}

    .difference-card li[b-w2nmzbtm49]::before {
        content: "✓";
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--successSoft);
        color: var(--success);
        font-size: .46rem;
        font-weight: 950
    }

.difference-card--plain li[b-w2nmzbtm49]::before {
    content: "–";
    background: var(--soft);
    color: var(--muted)
}

/* BENTO */
.bento-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 14px
}

.bento[b-w2nmzbtm49] {
    position: relative;
    min-height: 275px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(180deg,var(--surface),var(--raised));
    box-shadow: var(--shadowSm)
}

.bento--layout[b-w2nmzbtm49] {
    grid-column: span 7;
    min-height: 350px
}

.bento--ocr[b-w2nmzbtm49] {
    grid-column: span 5;
    min-height: 350px
}

.bento:not(.bento--layout):not(.bento--ocr)[b-w2nmzbtm49] {
    grid-column: span 4
}

.bento header[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 10px
}

    .bento header > span[b-w2nmzbtm49] {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb,var(--accent2) 20%,transparent);
        border-radius: 12px;
        background: var(--accentSoft);
        color: var(--accent2);
        font-weight: 900
    }

.bento small[b-w2nmzbtm49] {
    display: block;
    color: var(--muted);
    font-size: .41rem;
    font-weight: 830;
    letter-spacing: .08em
}

.bento h3[b-w2nmzbtm49] {
    margin: 2px 0 0;
    font-size: .85rem
}

.bento > p[b-w2nmzbtm49] {
    max-width: 620px;
    margin: 13px 0 0;
    color: var(--text2);
    font-size: .59rem;
    line-height: 1.75
}

.layout-demo[b-w2nmzbtm49] {
    position: absolute;
    width: 310px;
    height: 190px;
    right: 24px;
    bottom: 20px
}

.home-page[dir=rtl] .layout-demo[b-w2nmzbtm49] {
    right: auto;
    left: 24px
}

.layout-demo > div[b-w2nmzbtm49] {
    position: absolute;
    inset: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadowSm)
}

.layout-demo b[b-w2nmzbtm49] {
    display: block;
    width: 48%;
    height: 8px;
    margin-bottom: 16px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--accent2) 28%,transparent)
}

.layout-demo i[b-w2nmzbtm49] {
    display: inline-block;
    width: 44%;
    height: 45px;
    margin-inline-end: 5%;
    background: repeating-linear-gradient(to bottom,color-mix(in srgb,var(--text2) 14%,transparent) 0 4px,transparent 4px 10px)
}

.layout-demo span[b-w2nmzbtm49] {
    display: block;
    height: 44px;
    margin-top: 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size: 100% 14px,25% 100%
}

.layout-demo em[b-w2nmzbtm49] {
    display: block;
    width: 38%;
    height: 3px;
    margin-top: 10px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--muted) 25%,transparent)
}

.layout-demo > strong[b-w2nmzbtm49] {
    position: absolute;
    left: 8px;
    right: 8px;
    top: -20px;
    height: 28px;
    background: linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 20%,transparent),transparent);
    animation: scan-b-w2nmzbtm49 4.4s ease-in-out infinite
}

.ocr-demo[b-w2nmzbtm49] {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 21px;
    min-height: 170px;
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
    align-items: center;
    gap: 10px
}

    .ocr-demo > div[b-w2nmzbtm49] {
        height: 135px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: linear-gradient(135deg,var(--accentTint),transparent),repeating-linear-gradient(45deg,var(--soft) 0 8px,var(--raised) 8px 16px);
        box-shadow: var(--shadowSm)
    }

    .ocr-demo > b[b-w2nmzbtm49] {
        width: 2px;
        height: 116px;
        justify-self: center;
        border-radius: 99px;
        background: color-mix(in srgb,var(--accent2) 18%,transparent);
        box-shadow: 0 0 18px color-mix(in srgb,var(--accent) 24%,transparent);
        animation: pulse-b-w2nmzbtm49 1.8s ease-in-out infinite
    }

    .ocr-demo > span[b-w2nmzbtm49] {
        height: 135px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: var(--surface)
    }

    .ocr-demo i[b-w2nmzbtm49] {
        height: 5px;
        margin-bottom: 8px;
        border-radius: 99px;
        background: color-mix(in srgb,var(--text2) 15%,transparent)
    }

.term-demo[b-w2nmzbtm49] {
    display: grid;
    gap: 8px;
    margin-top: 22px
}

    .term-demo span[b-w2nmzbtm49] {
        min-height: 42px;
        padding: 0 10px;
        display: grid;
        grid-template-columns: 72px 1fr;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--soft)
    }

    .term-demo b[b-w2nmzbtm49] {
        color: var(--accent2);
        font-size: .53rem
    }

    .term-demo i[b-w2nmzbtm49] {
        font-style: normal;
        color: var(--text2);
        font-size: .50rem
    }

.memory-demo[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 24px
}

    .memory-demo span[b-w2nmzbtm49] {
        min-height: 82px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--soft);
        color: var(--muted);
        font-size: .45rem
    }

    .memory-demo b[b-w2nmzbtm49] {
        color: var(--success);
        font-size: 1rem
    }

.qa-demo[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 24px
}

    .qa-demo span[b-w2nmzbtm49] {
        min-height: 39px;
        padding: 0 9px;
        display: flex;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--soft);
        color: var(--text2);
        font-size: .48rem
    }

.chip-demo[b-w2nmzbtm49] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 25px
}

    .chip-demo span[b-w2nmzbtm49] {
        min-width: 44px;
        height: 35px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--soft);
        color: var(--accent2);
        font-size: .44rem;
        font-weight: 900
    }

.quality-demo[b-w2nmzbtm49] {
    display: grid;
    gap: 7px;
    margin-top: 22px
}

    .quality-demo span[b-w2nmzbtm49] {
        min-height: 38px;
        padding: 0 9px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--soft);
        color: var(--text2);
        font-size: .48rem;
        font-weight: 760
    }

    .quality-demo i[b-w2nmzbtm49] {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: var(--accentSoft);
        color: var(--accent2);
        font-size: .36rem;
        font-style: normal;
        font-weight: 900
    }

.language-demo[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 22px
}

    .language-demo span[b-w2nmzbtm49] {
        min-height: 42px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--soft);
        color: var(--ink);
        font-size: .50rem;
        font-weight: 850
    }

    .language-demo i[b-w2nmzbtm49] {
        padding: 4px 6px;
        border-radius: 7px;
        background: var(--accentSoft);
        color: var(--accent2);
        font-size: .35rem;
        font-style: normal
    }

/* WORKFLOW */
.workflow-section[b-w2nmzbtm49] {
    color: #f4ede3;
    background: radial-gradient(760px 520px at 8% 10%,rgba(226,175,46,.11),transparent 66%),radial-gradient(680px 500px at 92% 80%,rgba(190,155,90,.07),transparent 68%),#1e1914
}

.workflow-shell[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 66px;
    align-items: start
}

.workflow-copy[b-w2nmzbtm49] {
    position: sticky;
    top: 115px
}

    .workflow-copy .section-kicker[b-w2nmzbtm49] {
        color: #e7ba4b
    }

    .workflow-copy h2[b-w2nmzbtm49] {
        color: #f4ede3
    }

    .workflow-copy p[b-w2nmzbtm49] {
        color: #afa596
    }

    .workflow-copy > a[b-w2nmzbtm49] {
        display: inline-flex;
        gap: 7px;
        margin-top: 22px;
        color: #e7ba4b;
        font-size: .61rem;
        font-weight: 820;
        text-decoration: none
    }

.workflow-list[b-w2nmzbtm49] {
    position: relative;
    display: grid;
    gap: 10px;
    padding-inline-start: 36px
}

.workflow-line[b-w2nmzbtm49] {
    position: absolute;
    left: 12px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.08)
}

.home-page[dir=rtl] .workflow-line[b-w2nmzbtm49] {
    left: auto;
    right: 12px
}

.workflow-line b[b-w2nmzbtm49] {
    position: absolute;
    top: -90px;
    width: 100%;
    height: 95px;
    background: linear-gradient(180deg,transparent,#e5b548,transparent);
    animation: workflow-line-b-w2nmzbtm49 4.2s linear infinite
}

.workflow-list article[b-w2nmzbtm49] {
    position: relative;
    min-height: 112px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255,236,198,.09);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.016));
    transition: .18s
}

    .workflow-list article[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: -29px;
        top: 50%;
        width: 10px;
        height: 10px;
        border: 2px solid #1e1914;
        border-radius: 50%;
        background: #dca52d;
        box-shadow: 0 0 0 5px rgba(220,165,45,.10);
        transform: translateY(-50%)
    }

.home-page[dir=rtl] .workflow-list article[b-w2nmzbtm49]::before {
    left: auto;
    right: -29px
}

.workflow-list article:hover[b-w2nmzbtm49] {
    transform: translateX(4px);
    border-color: rgba(229,181,72,.18);
    background: linear-gradient(145deg,rgba(229,181,72,.075),rgba(255,255,255,.018))
}

.home-page[dir=rtl] .workflow-list article:hover[b-w2nmzbtm49] {
    transform: translateX(-4px)
}

.workflow-list article > strong[b-w2nmzbtm49] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(229,181,72,.14);
    border-radius: 13px;
    background: rgba(229,181,72,.08);
    color: #e7ba4b;
    font-size: .55rem
}

.workflow-list small[b-w2nmzbtm49] {
    display: block;
    color: #807769;
    font-size: .39rem;
    font-weight: 850;
    letter-spacing: .08em
}

.workflow-list h3[b-w2nmzbtm49] {
    margin: 3px 0 5px;
    color: #f0e8db;
    font-size: .77rem
}

.workflow-list p[b-w2nmzbtm49] {
    margin: 0;
    color: #9f9587;
    font-size: .52rem;
    line-height: 1.65
}

.workflow-list article > span[b-w2nmzbtm49] {
    min-width: 41px;
    height: 31px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border: 1px solid rgba(229,181,72,.13);
    border-radius: 9px;
    background: rgba(229,181,72,.07);
    color: #d9b75e;
    font-size: .42rem;
    font-weight: 900
}

/* PRESERVATION */
.preservation-shell[b-w2nmzbtm49] {
    min-height: 590px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 60px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: radial-gradient(circle at 4% 0%,var(--accentSoft),transparent 32%),linear-gradient(145deg,var(--raised),var(--surface));
    box-shadow: var(--shadowMd)
}

.preservation-window[b-w2nmzbtm49] {
    overflow: hidden;
    border: 1px solid var(--line2);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 30px 70px rgba(45,36,25,.15)
}

.preservation-bar[b-w2nmzbtm49] {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid var(--line);
    background: var(--soft)
}

    .preservation-bar i[b-w2nmzbtm49] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        opacity: .35
    }

        .preservation-bar i:first-child[b-w2nmzbtm49] {
            background: var(--accent2);
            opacity: .8
        }

    .preservation-bar span[b-w2nmzbtm49] {
        margin-inline-start: 7px;
        color: var(--muted);
        font-size: .44rem
    }

.preservation-page[b-w2nmzbtm49] {
    position: relative;
    min-height: 410px;
    padding: 36px 34px;
    overflow: hidden
}

.preservation-cols[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 24px
}

.big-chart[b-w2nmzbtm49] {
    height: 125px
}

    .big-chart b[b-w2nmzbtm49] {
        width: 20px
    }

.big-table[b-w2nmzbtm49] {
    grid-template-columns: repeat(5,1fr);
    margin-top: 27px
}

    .big-table span[b-w2nmzbtm49] {
        min-height: 31px
    }

.footnotes[b-w2nmzbtm49] {
    margin-top: 23px;
    padding-top: 13px;
    border-top: 1px solid var(--line)
}

    .footnotes i[b-w2nmzbtm49] {
        display: block;
        width: 55%;
        height: 4px;
        margin-bottom: 6px;
        border-radius: 99px;
        background: color-mix(in srgb,var(--muted) 24%,transparent)
    }

        .footnotes i:last-child[b-w2nmzbtm49] {
            width: 39%
        }

.preservation-page label[b-w2nmzbtm49] {
    position: absolute;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb,var(--accent2) 24%,transparent);
    border-radius: 7px;
    background: color-mix(in srgb,var(--surface) 92%,transparent);
    color: var(--accent2);
    box-shadow: var(--shadowSm);
    font-size: .39rem;
    font-weight: 850
}

.label-chart[b-w2nmzbtm49] {
    right: 20px;
    top: 82px
}

.label-table[b-w2nmzbtm49] {
    left: 21px;
    top: 205px
}

.label-foot[b-w2nmzbtm49] {
    right: 25px;
    bottom: 45px
}

.home-page[dir=rtl] .label-chart[b-w2nmzbtm49] {
    right: auto;
    left: 20px
}

.home-page[dir=rtl] .label-table[b-w2nmzbtm49] {
    left: auto;
    right: 21px
}

.home-page[dir=rtl] .label-foot[b-w2nmzbtm49] {
    right: auto;
    left: 25px
}

.preservation-scan[b-w2nmzbtm49] {
    position: absolute;
    z-index: 5;
    left: 10px;
    right: 10px;
    top: -35px;
    height: 45px;
    background: linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent),transparent);
    animation: preservation-scan-b-w2nmzbtm49 5.2s ease-in-out infinite
}

.preservation-points[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 24px
}

    .preservation-points span[b-w2nmzbtm49] {
        min-height: 46px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--soft);
        color: var(--text2);
        font-size: .53rem;
        font-weight: 720
    }

/* FORMAT STRIP */
.format-strip[b-w2nmzbtm49] {
    overflow: hidden;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb,var(--soft) 65%,var(--bg) 35%)
}

.format-track[b-w2nmzbtm49] {
    width: max-content;
    display: flex;
    gap: 8px;
    animation: marquee-b-w2nmzbtm49 38s linear infinite
}

.home-page[dir=rtl] .format-track[b-w2nmzbtm49] {
    animation-direction: reverse
}

.format-track > div[b-w2nmzbtm49] {
    min-width: 150px;
    min-height: 56px;
    padding: 0 11px;
    display: grid;
    grid-template-columns: 32px auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadowSm)
}

.fmt-icon[b-w2nmzbtm49] {
    grid-row: 1/3;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--soft);
    font-size: .44rem;
    font-weight: 950
}

.format-track b[b-w2nmzbtm49] {
    font-size: .52rem
}

.format-track small[b-w2nmzbtm49] {
    color: var(--muted);
    font-size: .40rem
}

.fmt-pdf[b-w2nmzbtm49] {
    color: #bd4242
}

.fmt-docx[b-w2nmzbtm49] {
    color: #3f72c9
}

.fmt-pptx[b-w2nmzbtm49] {
    color: #cc6f35
}

.fmt-txt[b-w2nmzbtm49] {
    color: #687a86
}

.fmt-jpg[b-w2nmzbtm49] {
    color: #2d8d70
}

.fmt-png[b-w2nmzbtm49] {
    color: #2280a8
}

.fmt-webp[b-w2nmzbtm49] {
    color: #7258ad
}

.fmt-tiff[b-w2nmzbtm49] {
    color: #8a6e3f
}

.fmt-html[b-w2nmzbtm49] {
    color: #cd6b2f
}

.fmt-vtt[b-w2nmzbtm49] {
    color: #7353b3
}

.fmt-srt[b-w2nmzbtm49] {
    color: #3d8d91
}

/* PRICING */
.pricing-section[b-w2nmzbtm49] {
    background: radial-gradient(800px 500px at 0 0,var(--accentSoft),transparent 62%),color-mix(in srgb,var(--soft) 55%,var(--bg) 45%)
}

.pricing-heading[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 30px;
    margin-bottom: 34px
}

    .pricing-heading > div[b-w2nmzbtm49] {
        max-width: 840px
    }

.live-badge[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb,var(--success) 18%,var(--line));
    border-radius: 999px;
    background: var(--successSoft);
    color: var(--success);
    font-size: .49rem;
    font-weight: 810
}

    .live-badge i[b-w2nmzbtm49] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 5px color-mix(in srgb,var(--success) 10%,transparent);
        animation: pulse-b-w2nmzbtm49 2s ease-in-out infinite
    }

.package-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(285px,1fr));
    gap: 14px;
    align-items: stretch
}

.package-card[b-w2nmzbtm49] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: radial-gradient(120% 100% at 0 0,var(--accentTint),transparent 44%),linear-gradient(180deg,var(--surface),var(--raised));
    box-shadow: var(--shadowSm);
    transition: .18s
}

    .package-card[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
        opacity: .65
    }

    .package-card:hover[b-w2nmzbtm49] {
        transform: translateY(-6px);
        border-color: color-mix(in srgb,var(--accent2) 25%,var(--line));
        box-shadow: var(--shadowMd)
    }

.package-card--featured[b-w2nmzbtm49] {
    border-color: color-mix(in srgb,var(--accent2) 40%,var(--line));
    box-shadow: 0 18px 44px color-mix(in srgb,var(--accent) 10%,transparent),var(--shadowSm)
}

.featured-badge[b-w2nmzbtm49] {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    color: #35270f;
    font-size: .43rem;
    font-weight: 880
}

.home-page[dir=rtl] .featured-badge[b-w2nmzbtm49] {
    right: auto;
    left: 14px
}

.package-card header[b-w2nmzbtm49] {
    min-height: 110px;
    padding-inline-end: 82px
}

.home-page[dir=rtl] .package-card header[b-w2nmzbtm49] {
    padding-inline-end: 0;
    padding-inline-start: 82px
}

.package-card header small[b-w2nmzbtm49] {
    color: var(--accent2);
    font-size: .41rem;
    font-weight: 860;
    letter-spacing: .08em
}

.package-card header h3[b-w2nmzbtm49] {
    margin: 7px 0 6px;
    font-size: 1.02rem
}

.package-card header p[b-w2nmzbtm49] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: .52rem;
    line-height: 1.65
}

.package-credits[b-w2nmzbtm49] {
    min-height: 82px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--soft)
}

    .package-credits strong[b-w2nmzbtm49] {
        font-size: 1.78rem;
        font-weight: 950;
        letter-spacing: -.04em
    }

    .package-credits > span[b-w2nmzbtm49] {
        color: var(--muted);
        font-size: .47rem
    }

    .package-credits > b[b-w2nmzbtm49] {
        margin-inline-start: auto;
        padding: 5px 7px;
        border-radius: 8px;
        background: var(--successSoft);
        color: var(--success);
        font-size: .43rem
    }

.package-price[b-w2nmzbtm49] {
    padding: 12px 2px;
    border-bottom: 1px solid var(--line)
}

    .package-price strong[b-w2nmzbtm49] {
        font-size: 1rem
    }

    .package-price > span[b-w2nmzbtm49] {
        margin-inline-start: 4px;
        color: var(--muted);
        font-size: .47rem
    }

    .package-price small[b-w2nmzbtm49] {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: .44rem
    }

.package-cap[b-w2nmzbtm49] {
    display: grid;
    gap: 7px;
    padding: 12px 0;
    flex: 1
}

    .package-cap > label[b-w2nmzbtm49] {
        color: var(--muted);
        font-size: .43rem;
        font-weight: 820
    }

    .package-cap > div[b-w2nmzbtm49] {
        display: flex;
        flex-wrap: wrap;
        gap: 5px
    }

        .package-cap > div > b[b-w2nmzbtm49] {
            padding: 5px 7px;
            border-radius: 8px;
            background: var(--soft);
            color: var(--text2);
            font-size: .42rem
        }

.package-formats[b-w2nmzbtm49] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(62px,1fr));
    gap: 5px !important
}

    .package-formats > span[b-w2nmzbtm49] {
        min-height: 31px;
        padding: 4px 5px;
        display: flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--surface);
        color: var(--text2);
        font-size: .39rem;
        font-weight: 780
    }

    .package-formats i[b-w2nmzbtm49] {
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        border-radius: 6px;
        background: var(--soft);
        font-style: normal;
        font-size: .34rem;
        font-weight: 930
    }

.package-limit[b-w2nmzbtm49] {
    min-height: 53px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--soft)
}

    .package-limit > span[b-w2nmzbtm49] {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: var(--accentSoft);
        color: var(--accent2);
        font-weight: 900
    }

    .package-limit small[b-w2nmzbtm49] {
        display: block;
        color: var(--muted);
        font-size: .41rem
    }

    .package-limit strong[b-w2nmzbtm49] {
        display: block;
        margin-top: 1px;
        font-size: .50rem
    }

.package-action[b-w2nmzbtm49] {
    min-height: 43px;
    margin-top: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb,var(--accent2) 27%,transparent);
    border-radius: 12px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    color: #34270f;
    text-decoration: none;
    font-size: .57rem;
    font-weight: 870;
    box-shadow: 0 10px 24px color-mix(in srgb,var(--accent) 18%,transparent)
}

.package-state[b-w2nmzbtm49] {
    min-height: 150px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    text-align: center
}

    .package-state > i[b-w2nmzbtm49] {
        width: 28px;
        height: 28px;
        border: 3px solid var(--accentSoft);
        border-top-color: var(--accent2);
        border-radius: 50%;
        animation: spin-b-w2nmzbtm49 .8s linear infinite
    }

    .package-state b[b-w2nmzbtm49] {
        font-size: .67rem
    }

.pricing-note[b-w2nmzbtm49] {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: .47rem;
    text-align: center
}

/* FINAL */
.final-section[b-w2nmzbtm49] {
    padding-bottom: 65px
}

.final-cta[b-w2nmzbtm49] {
    position: relative;
    min-height: 420px;
    padding: 58px 56px;
    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 35px;
    overflow: hidden;
    border: 1px solid rgba(255,236,198,.11);
    border-radius: 30px;
    background: radial-gradient(circle at 90% 10%,rgba(229,181,72,.14),transparent 35%),linear-gradient(145deg,#211b15,#30271d);
    color: #f5ede0;
    box-shadow: 0 34px 78px rgba(34,27,20,.24)
}

    .final-cta > div[b-w2nmzbtm49] {
        position: relative;
        z-index: 2
    }

        .final-cta > div > span[b-w2nmzbtm49] {
            color: #e2b74f;
            font-size: .60rem;
            font-weight: 850
        }

    .final-cta h2[b-w2nmzbtm49] {
        margin: 13px 0 15px;
        color: #f7efe4;
        font-size: clamp(2.25rem,4.7vw,4.3rem);
        font-weight: 930;
        line-height: 1.12;
        letter-spacing: -.045em
    }

.home-page[dir=rtl] .final-cta h2[b-w2nmzbtm49] {
    letter-spacing: -.015em
}

.final-cta p[b-w2nmzbtm49] {
    max-width: 680px;
    margin: 0;
    color: #b9ad9d;
    font-size: .71rem;
    line-height: 1.85
}

.final-cta > div > div[b-w2nmzbtm49] {
    display: flex;
    gap: 9px;
    margin-top: 24px
}

.button--light[b-w2nmzbtm49] {
    background: #f4eade;
    color: #211b15
}

.button--glass[b-w2nmzbtm49] {
    border: 1px solid rgba(255,236,198,.12);
    background: rgba(255,255,255,.035);
    color: #ded3c2
}

.final-cta aside[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    min-height: 260px
}

    .final-cta aside > b[b-w2nmzbtm49] {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 85px;
        height: 85px;
        display: grid;
        place-items: center;
        border-radius: 25px;
        background: linear-gradient(145deg,#efbf45,#dca52d);
        color: #35270f;
        box-shadow: 0 20px 42px rgba(0,0,0,.18);
        transform: translate(-50%,-50%);
        animation: ai-pulse-b-w2nmzbtm49 3s ease-in-out infinite
    }

    .final-cta aside > span[b-w2nmzbtm49] {
        position: absolute;
        width: 102px;
        height: 132px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,236,198,.12);
        border-radius: 18px;
        background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
        color: #efe5d7;
        box-shadow: 0 20px 42px rgba(0,0,0,.18);
        font-size: .53rem;
        font-weight: 900
    }

        .final-cta aside > span:nth-child(2)[b-w2nmzbtm49] {
            left: 10px;
            top: 66px;
            transform: rotate(-11deg);
            animation: file-a-b-w2nmzbtm49 6s ease-in-out infinite
        }

        .final-cta aside > span:nth-child(3)[b-w2nmzbtm49] {
            right: 13px;
            top: 24px;
            transform: rotate(8deg);
            animation: file-b-b-w2nmzbtm49 7s ease-in-out infinite
        }

        .final-cta aside > span:nth-child(4)[b-w2nmzbtm49] {
            right: 37px;
            bottom: 0;
            transform: rotate(-3deg);
            animation: file-c-b-w2nmzbtm49 6.5s ease-in-out infinite
        }

/* FOOTER */
.public-footer[b-w2nmzbtm49] {
    padding: 0 0 38px
}

    .public-footer > .container[b-w2nmzbtm49] {
        min-height: 86px;
        padding-top: 22px;
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 25px;
        border-top: 1px solid var(--line)
    }

.footer-brand[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 10px
}

    .footer-brand .brand__mark[b-w2nmzbtm49] {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 11px
    }

        .footer-brand .brand__mark svg[b-w2nmzbtm49] {
            width: 22px;
            height: 22px
        }

    .footer-brand strong[b-w2nmzbtm49] {
        display: block;
        font-size: .56rem
    }

    .footer-brand small[b-w2nmzbtm49] {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: .41rem
    }

.public-footer nav[b-w2nmzbtm49] {
    display: flex;
    gap: 15px
}

    .public-footer nav a[b-w2nmzbtm49] {
        color: var(--muted);
        font-size: .47rem;
        text-decoration: none
    }

.public-footer > .container > span[b-w2nmzbtm49] {
    color: var(--muted);
    font-size: .44rem
}

/* RESPONSIVE */
@media(max-width:1120px) {
    .public-nav[b-w2nmzbtm49] {
        display: none
    }

    .public-header__inner[b-w2nmzbtm49] {
        grid-template-columns: 1fr auto
    }

    .hero__layout[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .hero__copy[b-w2nmzbtm49] {
        max-width: 820px;
        margin: auto;
        text-align: center
    }

        .eyebrow[b-w2nmzbtm49], .hero__copy > p[b-w2nmzbtm49] {
            margin-inline: auto
        }

    .hero__actions[b-w2nmzbtm49], .hero__trust[b-w2nmzbtm49] {
        justify-content: center
    }

    .hero-visual[b-w2nmzbtm49] {
        width: min(690px,100%);
        margin: auto
    }

    .difference-grid[b-w2nmzbtm49], .workflow-shell[b-w2nmzbtm49], .preservation-shell[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .workflow-copy[b-w2nmzbtm49] {
        position: static
    }

    .bento--layout[b-w2nmzbtm49], .bento--ocr[b-w2nmzbtm49], .bento:not(.bento--layout):not(.bento--ocr)[b-w2nmzbtm49] {
        grid-column: span 6
    }

    .pricing-heading[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        align-items: start
    }

    .final-cta[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

        .final-cta aside[b-w2nmzbtm49] {
            width: min(430px,100%);
            margin: auto
        }
}

@media(max-width:820px) {
    .section[b-w2nmzbtm49] {
        padding: 78px 0
    }

    .hero[b-w2nmzbtm49] {
        padding-top: 70px
    }

    .hero-visual[b-w2nmzbtm49] {
        transform: scale(.88);
        transform-origin: center top;
        margin-bottom: -48px
    }

    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: 1fr 1fr
    }

        .hero-metrics > div:nth-child(2)[b-w2nmzbtm49] {
            border-inline-end: 0
        }

        .hero-metrics > div:nth-child(-n+2)[b-w2nmzbtm49] {
            border-bottom: 1px solid var(--line)
        }

    .bento-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .bento--layout[b-w2nmzbtm49], .bento--ocr[b-w2nmzbtm49], .bento:not(.bento--layout):not(.bento--ocr)[b-w2nmzbtm49] {
        grid-column: auto
    }

    .preservation-shell[b-w2nmzbtm49] {
        padding: 28px
    }

    .public-footer > .container[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center
    }

    .public-footer nav[b-w2nmzbtm49] {
        flex-wrap: wrap;
        justify-content: center
    }
}

@media(max-width:620px) {
    .container[b-w2nmzbtm49] {
        width: min(100% - 24px,1240px)
    }

    .public-header__inner[b-w2nmzbtm49] {
        min-height: 64px;
        width: min(100% - 18px,1320px);
        gap: 8px
    }

    .brand__copy small[b-w2nmzbtm49], .signin-button[b-w2nmzbtm49] {
        display: none
    }

    .header-cta[b-w2nmzbtm49] {
        padding-inline: 11px;
        font-size: .51rem
    }

    .hero[b-w2nmzbtm49] {
        padding-top: 58px
    }

        .hero h1[b-w2nmzbtm49] {
            font-size: clamp(2.6rem,13vw,4rem)
        }

    .hero__copy > p[b-w2nmzbtm49] {
        font-size: .74rem
    }

    .hero__actions[b-w2nmzbtm49] {
        flex-direction: column
    }

        .hero__actions .button[b-w2nmzbtm49] {
            width: 100%
        }

    .hero-visual[b-w2nmzbtm49] {
        width: 640px;
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%) scale(.67);
        margin-bottom: -150px
    }

    .home-page[dir=rtl] .hero-visual[b-w2nmzbtm49] {
        margin-left: 0;
        margin-right: 50%;
        transform: translateX(50%) scale(.67)
    }

    .hero-metrics > div[b-w2nmzbtm49] {
        min-height: 78px;
        padding: 13px 14px
    }

    .difference-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .difference-card[b-w2nmzbtm49] {
        min-height: 0;
        padding: 17px
    }

    .plain-visual[b-w2nmzbtm49], .pro-visual[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 11px
    }

        .plain-visual > strong[b-w2nmzbtm49] {
            transform: rotate(90deg)
        }

    .pro-bridge[b-w2nmzbtm49] {
        flex-direction: row
    }

        .pro-bridge i[b-w2nmzbtm49] {
            width: 48px;
            height: 2px
        }

    .section-heading h2[b-w2nmzbtm49], .workflow-copy h2[b-w2nmzbtm49], .preservation-copy h2[b-w2nmzbtm49], .pricing-heading h2[b-w2nmzbtm49] {
        font-size: clamp(1.8rem,10vw,2.6rem)
    }

    .layout-demo[b-w2nmzbtm49], .ocr-demo[b-w2nmzbtm49] {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 22px
    }

    .bento--layout[b-w2nmzbtm49], .bento--ocr[b-w2nmzbtm49] {
        min-height: 420px
    }

    .workflow-list[b-w2nmzbtm49] {
        padding-inline-start: 26px
    }

        .workflow-list article[b-w2nmzbtm49] {
            grid-template-columns: 40px 1fr
        }

            .workflow-list article > span[b-w2nmzbtm49] {
                display: none
            }

    .preservation-shell[b-w2nmzbtm49] {
        padding: 18px;
        border-radius: 22px
    }

    .preservation-page[b-w2nmzbtm49] {
        padding: 26px 18px
    }

    .preservation-cols[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .preservation-points[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .package-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .package-card[b-w2nmzbtm49] {
        min-height: 0
    }

    .final-cta[b-w2nmzbtm49] {
        min-height: 520px;
        padding: 38px 24px;
        border-radius: 23px
    }

        .final-cta h2[b-w2nmzbtm49] {
            font-size: clamp(2rem,11vw,3rem)
        }

        .final-cta > div > div[b-w2nmzbtm49] {
            flex-direction: column
        }

        .final-cta .button[b-w2nmzbtm49] {
            width: 100%
        }
}

/* MOTION */
@keyframes logo-shine-b-w2nmzbtm49 {
    0%,74% {
        transform: translateX(-90%) rotate(12deg)
    }

    88%,100% {
        transform: translateX(90%) rotate(12deg)
    }
}

@keyframes ambient-a-b-w2nmzbtm49 {
    to {
        transform: translate3d(90px,40px,0) scale(1.12)
    }
}

@keyframes ambient-b-b-w2nmzbtm49 {
    to {
        transform: translate3d(-70px,-30px,0) scale(1.1)
    }
}

@keyframes pulse-b-w2nmzbtm49 {
    0%,100% {
        opacity: .72;
        transform: scale(.94)
    }

    50% {
        opacity: 1;
        transform: scale(1.08)
    }
}

@keyframes float-source-b-w2nmzbtm49 {
    50% {
        translate: 0 -8px
    }
}

@keyframes float-target-b-w2nmzbtm49 {
    50% {
        translate: 0 9px
    }
}

@keyframes beam-b-w2nmzbtm49 {
    to {
        transform: translateY(240px)
    }
}

@keyframes badge-float-b-w2nmzbtm49 {
    50% {
        transform: translateY(-7px)
    }
}

@keyframes stream-b-w2nmzbtm49 {
    0%,100% {
        opacity: .18;
        transform: scale(.72)
    }

    50% {
        opacity: 1;
        transform: scale(1.12)
    }
}

@keyframes scan-b-w2nmzbtm49 {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    50% {
        transform: translateY(195px);
        opacity: 1
    }

    70%,100% {
        transform: translateY(195px);
        opacity: 0
    }
}

@keyframes workflow-line-b-w2nmzbtm49 {
    to {
        transform: translateY(760px)
    }
}

@keyframes preservation-scan-b-w2nmzbtm49 {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    50% {
        transform: translateY(450px);
        opacity: 1
    }

    70%,100% {
        transform: translateY(450px);
        opacity: 0
    }
}

@keyframes marquee-b-w2nmzbtm49 {
    to {
        transform: translateX(-50%)
    }
}

@keyframes spin-b-w2nmzbtm49 {
    to {
        transform: rotate(360deg)
    }
}

@keyframes ai-pulse-b-w2nmzbtm49 {
    50% {
        transform: translate(-50%,-50%) scale(1.05);
        box-shadow: 0 24px 55px rgba(229,181,72,.20)
    }
}

@keyframes file-a-b-w2nmzbtm49 {
    50% {
        transform: rotate(-8deg) translateY(-10px)
    }
}

@keyframes file-b-b-w2nmzbtm49 {
    50% {
        transform: rotate(4deg) translateY(9px)
    }
}

@keyframes file-c-b-w2nmzbtm49 {
    50% {
        transform: rotate(1deg) translateY(-8px)
    }
}

@supports(animation-timeline:view()) {
    .landing-reveal[b-w2nmzbtm49] {
        animation: reveal-b-w2nmzbtm49 linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 28%
    }

    @keyframes reveal-b-w2nmzbtm49 {
        from {
            opacity: .3;
            transform: translateY(22px) scale(.992)
        }

        to {
            opacity: 1;
            transform: none
        }
    }
}

@media(prefers-reduced-motion:reduce) {
    .home-page *[b-w2nmzbtm49], .home-page *[b-w2nmzbtm49]::before, .home-page *[b-w2nmzbtm49]::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero h1[b-w2nmzbtm49],
    .home-page .hero h1 strong[b-w2nmzbtm49] {
        animation-name: heroGoldShimmer-b-w2nmzbtm49 !important;
        animation-duration: 4s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
}

/* V1 HERO WEBM MOTION V1.1 - START */

.hero-video-stage[b-w2nmzbtm49] {
    position: relative;
    min-height: 500px;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: visible;
}

    .hero-video-stage[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        width: 78%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: radial-gradient( circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68% );
        filter: blur(28px);
        transform: translate(-50%, -50%);
    }

.hero-motion-video[b-w2nmzbtm49] {
    display: block;
    width: min(520px, 88%);
    transform: translateX(-35px);
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background: transparent;
    transform: translateZ(0);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1120px) {
    .hero-video-stage[b-w2nmzbtm49] {
        width: min(540px, 90%);
        min-height: auto;
        aspect-ratio: 1 / 1;
        margin-inline: auto;
    }

    .hero-motion-video[b-w2nmzbtm49] {
        width: min(680px, 100%);
    }
}

@media (max-width: 620px) {
    .hero-video-stage[b-w2nmzbtm49] {
        width: 112%;
        margin-inline-start: -6%;
    }

    .hero-motion-video[b-w2nmzbtm49] {
        width: 100%;
    }
}

/* V1 HERO WEBM MOTION V1.1 - END */


@media (min-width: 1121px) {
    .hero-motion-video[b-w2nmzbtm49] {
        position: relative !important;
        left: -140px !important;
    }
}



/* ===== LANDING / COMPARE TRANSLATION MODES / START ===== */

.landing-compare-section[b-w2nmzbtm49] {
    margin-top: 42px;
    display: grid;
    gap: 24px;
}

.landing-compare-head[b-w2nmzbtm49] {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.landing-section-kicker[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(226, 179, 63, .34);
    border-radius: 999px;
    background: rgba(242, 197, 79, .14);
    color: #b78507;
    font-size: .78rem;
    font-weight: 800;
}

.landing-compare-head h2[b-w2nmzbtm49] {
    margin: 12px 0 10px;
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    line-height: 1.22;
    color: var(--text, #1d1b19);
}

.landing-compare-head p[b-w2nmzbtm49] {
    margin: 0;
    color: var(--muted, #716b62);
    font-size: 1rem;
    line-height: 1.95;
}

.landing-compare-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.landing-compare-card[b-w2nmzbtm49] {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(77, 63, 24, .12);
    border-radius: 30px;
    overflow: hidden;
    background: radial-gradient(circle at top right, rgb(187 172 135 / 32%), #8f897294 34%), linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 247, 239, .95));
    box-shadow: 0 20px 45px rgba(59, 48, 23, .06);
}

    .landing-compare-card[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(130deg, rgba(240, 198, 74, .055), transparent 38%);
    }

.landing-compare-card--premium[b-w2nmzbtm49] {
    border-color: rgba(226, 179, 63, .26);
    box-shadow: 0 22px 50px rgba(186, 144, 31, .11);
}

.landing-compare-card-head[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.landing-compare-card-title[b-w2nmzbtm49] {
    display: grid;
    gap: 5px;
}

.landing-compare-eyebrow[b-w2nmzbtm49] {
    color: #98824d;
    font-size: .78rem;
    font-weight: 700;
}

.landing-compare-card-title h3[b-w2nmzbtm49] {
    margin: 0;
    color: var(--text, #1d1b19);
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 900;
}

.landing-compare-icon[b-w2nmzbtm49] {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(211, 175, 80, .28);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244, 233, 196, .58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

    .landing-compare-icon span[b-w2nmzbtm49] {
        color: #d19a00;
        font-size: 1.55rem;
        font-weight: 900;
        line-height: 1;
    }

.landing-compare-stage[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    padding: 18px;
    border: 1px solid rgba(77, 63, 24, .10);
    border-radius: 24px;
    background: rgba(255,255,255,.68);
}

.landing-compare-canvas[b-w2nmzbtm49] {
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.landing-compare-pane[b-w2nmzbtm49] {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgba(72, 62, 43, .14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,247,241,.90));
    box-shadow: 0 12px 26px rgba(43, 35, 18, .05);
}

    .landing-compare-pane img[b-w2nmzbtm49] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 16px;
    }

.landing-compare-pane-badge[b-w2nmzbtm49] {
    position: absolute;
    top: 12px;
    left: 12px;
    min-height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(214, 177, 84, .24);
    border-radius: 999px;
    background: rgba(255, 248, 224, .96);
    color: #9b7414;
    font-size: .74rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(92, 72, 22, .08);
}

.landing-compare-arrow[b-w2nmzbtm49] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(215, 177, 74, .24);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,239,199,.86));
    box-shadow: 0 14px 24px rgba(82, 62, 19, .08);
}

    .landing-compare-arrow span[b-w2nmzbtm49] {
        color: #af7f0e;
        font-size: 1.4rem;
        font-weight: 900;
    }

.landing-compare-arrow--ai span[b-w2nmzbtm49] {
    font-size: 1rem;
    letter-spacing: .08em;
}

.landing-compare-points[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.landing-compare-point[b-w2nmzbtm49] {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 14px 16px 14px 56px;
    border-radius: 18px;
    border: 1px solid rgba(77, 63, 24, .09);
    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(251,248,241,.92));
    box-shadow: 0 10px 20px rgba(57, 44, 16, .04);
}

    .landing-compare-point[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        border-radius: 50%;
        display: block;
    }

    .landing-compare-point strong[b-w2nmzbtm49] {
        color: #2b271f;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.45;
    }

    .landing-compare-point span[b-w2nmzbtm49] {
        color: #6f695f;
        font-size: .90rem;
        font-weight: 700;
        line-height: 1.8;
    }

.landing-compare-point--success[b-w2nmzbtm49] {
    border-color: rgba(115, 174, 122, .22);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247, 252, 247, .95));
}

    .landing-compare-point--success[b-w2nmzbtm49]::before {
        background: radial-gradient(circle at center, rgba(92, 179, 108, .18), rgba(92, 179, 108, .18)), linear-gradient(180deg, #dff1e2, #eff8ef);
        box-shadow: inset 0 0 0 1px rgba(95, 156, 101, .20);
    }

    .landing-compare-point--success strong[b-w2nmzbtm49] {
        color: #214e29;
    }

.landing-compare-point--danger[b-w2nmzbtm49] {
    border-color: rgba(196, 116, 90, .17);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255, 249, 247, .95));
}

    .landing-compare-point--danger[b-w2nmzbtm49]::before {
        background: radial-gradient(circle at center, rgba(215, 135, 108, .18), rgba(215, 135, 108, .18)), linear-gradient(180deg, #f8e9e4, #fff3ef);
        box-shadow: inset 0 0 0 1px rgba(193, 124, 101, .16);
    }

    .landing-compare-point--danger strong[b-w2nmzbtm49] {
        color: #7d4030;
    }

/* ---------- Dark theme ---------- */

html[data-theme="dark"] .landing-section-kicker[b-w2nmzbtm49] {
    background: rgba(232, 180, 47, .12);
    border-color: rgba(232, 180, 47, .24);
    color: #f0c86b;
}

html[data-theme="dark"] .landing-compare-head h2[b-w2nmzbtm49] {
    color: #f5efe3;
}

html[data-theme="dark"] .landing-compare-head p[b-w2nmzbtm49] {
    color: #c4bcaf;
}

html[data-theme="dark"] .landing-compare-card[b-w2nmzbtm49] {
    border-color: rgba(232, 195, 111, .15);
    background: radial-gradient(circle at top right, rgba(229, 182, 59, .10), transparent 36%), linear-gradient(180deg, rgba(31,25,18,.96), rgba(22,18,14,.97));
    box-shadow: 0 22px 46px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .landing-compare-card-title h3[b-w2nmzbtm49] {
    color: #fff8ec;
}

html[data-theme="dark"] .landing-compare-eyebrow[b-w2nmzbtm49] {
    color: #d1ba8b;
}

html[data-theme="dark"] .landing-compare-icon[b-w2nmzbtm49] {
    border-color: rgba(236, 195, 93, .18);
    background: linear-gradient(180deg, rgba(72,58,31,.75), rgba(47,37,22,.85));
}

    html[data-theme="dark"] .landing-compare-icon span[b-w2nmzbtm49] {
        color: #efc350;
    }

html[data-theme="dark"] .landing-compare-stage[b-w2nmzbtm49] {
    border-color: rgba(232, 195, 111, .10);
    background: rgba(255,255,255,.025);
}

html[data-theme="dark"] .landing-compare-pane[b-w2nmzbtm49] {
    border-color: rgba(224, 192, 121, .12);
    background: linear-gradient(180deg, rgba(37,31,24,.95), rgba(25,21,17,.95));
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

html[data-theme="dark"] .landing-compare-pane-badge[b-w2nmzbtm49] {
    background: rgba(48, 38, 22, .92);
    border-color: rgba(232, 190, 88, .18);
    color: #f3ca70;
}

html[data-theme="dark"] .landing-compare-arrow[b-w2nmzbtm49] {
    border-color: rgba(232, 195, 111, .16);
    background: linear-gradient(180deg, rgba(64,50,28,.92), rgba(42,32,20,.95));
}

    html[data-theme="dark"] .landing-compare-arrow span[b-w2nmzbtm49] {
        color: #efc453;
    }

html[data-theme="dark"] .landing-compare-point[b-w2nmzbtm49] {
    border-color: rgba(232, 195, 111, .10);
    background: linear-gradient(180deg, rgba(33,27,20,.95), rgba(24,20,15,.96));
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

    html[data-theme="dark"] .landing-compare-point strong[b-w2nmzbtm49] {
        color: #f5ecd9;
    }

    html[data-theme="dark"] .landing-compare-point span[b-w2nmzbtm49] {
        color: #c5bcad;
    }

html[data-theme="dark"] .landing-compare-point--success strong[b-w2nmzbtm49] {
    color: #90d79f;
}

html[data-theme="dark"] .landing-compare-point--danger strong[b-w2nmzbtm49] {
    color: #efb09d;
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
    .landing-compare-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .landing-compare-card[b-w2nmzbtm49] {
        padding: 18px;
        border-radius: 24px;
    }

    .landing-compare-card-title h3[b-w2nmzbtm49] {
        font-size: 1.55rem;
    }

    .landing-compare-canvas[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .landing-compare-arrow[b-w2nmzbtm49] {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .landing-compare-pane[b-w2nmzbtm49] {
        min-height: 240px;
    }
}

@media (max-width: 640px) {
    .landing-compare-head p[b-w2nmzbtm49] {
        font-size: .92rem;
        line-height: 1.9;
    }

    .landing-compare-point[b-w2nmzbtm49] {
        padding: 13px 14px 13px 50px;
    }

        .landing-compare-point strong[b-w2nmzbtm49] {
            font-size: .94rem;
        }

        .landing-compare-point span[b-w2nmzbtm49] {
            font-size: .84rem;
        }
}

/* ===== LANDING / COMPARE TRANSLATION MODES / END ===== */

/* LANDING COMPARE COMPACT V2 - START */

.landing-compare-section[b-w2nmzbtm49] {
    width: min(1180px, calc(100% - 32px)) !important;
    margin-inline: auto !important;
    margin-top: 34px !important;
    gap: 18px !important;
}

.landing-compare-head[b-w2nmzbtm49] {
    max-width: 760px !important;
}

    .landing-compare-head h2[b-w2nmzbtm49] {
        margin: 9px 0 7px !important;
        font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
    }

    .landing-compare-head p[b-w2nmzbtm49] {
        font-size: .9rem !important;
        line-height: 1.75 !important;
    }

.landing-compare-grid[b-w2nmzbtm49] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.landing-compare-card[b-w2nmzbtm49] {
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 24px !important;
}

.landing-compare-card-head[b-w2nmzbtm49] {
    min-height: 58px !important;
    gap: 12px !important;
}

.landing-compare-card-title[b-w2nmzbtm49] {
    gap: 2px !important;
}

.landing-compare-eyebrow[b-w2nmzbtm49] {
    font-size: .67rem !important;
}

.landing-compare-card-title h3[b-w2nmzbtm49] {
    font-size: 1.45rem !important;
    line-height: 1.12 !important;
}

.landing-compare-icon[b-w2nmzbtm49] {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 14px !important;
}

    .landing-compare-icon span[b-w2nmzbtm49] {
        font-size: 1.12rem !important;
    }

.landing-compare-stage[b-w2nmzbtm49] {
    padding: 10px !important;
    border-radius: 18px !important;
}

.landing-compare-canvas[b-w2nmzbtm49] {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
    gap: 8px !important;
}

.landing-compare-pane[b-w2nmzbtm49] {
    min-height: 0 !important;
    height: 245px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

    .landing-compare-pane img[b-w2nmzbtm49] {
        width: auto !important;
        max-width: 88% !important;
        height: auto !important;
        max-height: 218px !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 10px !important;
    }

.landing-compare-pane-badge[b-w2nmzbtm49] {
    top: 8px !important;
    left: 8px !important;
    min-height: 25px !important;
    padding: 0 9px !important;
    font-size: .62rem !important;
}

.landing-compare-arrow[b-w2nmzbtm49] {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
}

    .landing-compare-arrow span[b-w2nmzbtm49] {
        font-size: 1rem !important;
    }

.landing-compare-arrow--ai span[b-w2nmzbtm49] {
    font-size: .72rem !important;
}

.landing-compare-points[b-w2nmzbtm49] {
    gap: 8px !important;
}

.landing-compare-point[b-w2nmzbtm49] {
    gap: 2px !important;
    min-height: 58px !important;
    padding: 9px 12px 9px 44px !important;
    border-radius: 14px !important;
}

    .landing-compare-point[b-w2nmzbtm49]::before {
        left: 12px !important;
        width: 22px !important;
        height: 22px !important;
        margin-top: -11px !important;
    }

    .landing-compare-point strong[b-w2nmzbtm49] {
        font-size: .82rem !important;
        line-height: 1.4 !important;
        font-weight: 900 !important;
    }

    .landing-compare-point span[b-w2nmzbtm49] {
        font-size: .70rem !important;
        line-height: 1.55 !important;
        font-weight: 650 !important;
    }

.landing-compare-card--premium .landing-compare-point--success strong[b-w2nmzbtm49] {
    color: #2d6a39 !important;
}

.landing-compare-card--basic .landing-compare-point--danger strong[b-w2nmzbtm49] {
    color: #914b38 !important;
}

@media (max-width: 1100px) {
    .landing-compare-section[b-w2nmzbtm49] {
        width: min(940px, calc(100% - 28px)) !important;
    }

    .landing-compare-pane[b-w2nmzbtm49] {
        height: 220px !important;
    }

        .landing-compare-pane img[b-w2nmzbtm49] {
            max-height: 194px !important;
        }
}

@media (max-width: 820px) {
    .landing-compare-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr !important;
    }

    .landing-compare-card[b-w2nmzbtm49] {
        max-width: 680px !important;
        width: 100% !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 620px) {
    .landing-compare-section[b-w2nmzbtm49] {
        width: min(100% - 20px, 620px) !important;
    }

    .landing-compare-card[b-w2nmzbtm49] {
        padding: 12px !important;
        border-radius: 20px !important;
    }

    .landing-compare-canvas[b-w2nmzbtm49] {
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .landing-compare-pane[b-w2nmzbtm49] {
        height: 176px !important;
        padding: 7px !important;
    }

        .landing-compare-pane img[b-w2nmzbtm49] {
            max-width: 95% !important;
            max-height: 156px !important;
        }

    .landing-compare-arrow[b-w2nmzbtm49] {
        width: 30px !important;
        height: 30px !important;
        transform: none !important;
    }

    .landing-compare-pane-badge[b-w2nmzbtm49] {
        top: 5px !important;
        left: 5px !important;
        min-height: 20px !important;
        padding: 0 6px !important;
        font-size: .52rem !important;
    }

    .landing-compare-card-title h3[b-w2nmzbtm49] {
        font-size: 1.25rem !important;
    }

    .landing-compare-point[b-w2nmzbtm49] {
        min-height: 54px !important;
        padding: 8px 10px 8px 40px !important;
    }

        .landing-compare-point strong[b-w2nmzbtm49] {
            font-size: .77rem !important;
        }

        .landing-compare-point span[b-w2nmzbtm49] {
            font-size: .66rem !important;
        }
}

/* LANDING COMPARE COMPACT V2 - END */

/* LANDING HERO EXACT POLISH V3 - START */

/* Exact V1 selectors:
   .hero__copy
   .hero-video-stage
   .hero-metrics
   The user's WebM remains untouched.
*/

.hero[b-w2nmzbtm49] {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: 58px 0 34px !important;
}

    .hero[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 18px 18px 8px;
        z-index: -3;
        border: 1px solid color-mix(in srgb, var(--accent2) 16%, var(--line));
        border-radius: 36px;
        background: radial-gradient(circle at 10% 18%, color-mix(in srgb, #ffffff 17%, transparent), transparent 28% 28%), radial-gradient(circle at 88% 20%, color-mix(in srgb, #ffffff 8%, #d1be8ab5), #bba47382 24%), linear-gradient(145deg, color-mix(in srgb, rgb(255 255 255 / 80%) 86%, #ffffff70), color-mix(in srgb, rgb(111 103 89 / 0%) 58%, #4d4223));
        box-shadow: 0 26px 70px rgba(70, 52, 14, .07), inset 0 1px 0 rgba(255,255,255,.72);
    }

    .hero[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset-inline-end: 5.5%;
        top: 10%;
        z-index: -2;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
        filter: blur(20px);
        animation: hero-v3-breathe-b-w2nmzbtm49 6.5s ease-in-out infinite;
    }

.hero__layout[b-w2nmzbtm49] {
    position: relative;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr) !important;
    gap: 34px !important;
    align-items: center !important;
}

.hero__copy[b-w2nmzbtm49] {
    position: relative;
    max-width: 690px !important;
    padding: 22px 8px 18px !important;
}

    .hero__copy[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset-inline-start: -18px;
        top: 64px;
        width: 4px;
        height: 122px;
        border-radius: 999px;
        background: linear-gradient( 180deg, transparent, var(--accent2), var(--accent), transparent);
        opacity: .65;
        box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
    }

.eyebrow[b-w2nmzbtm49] {
    min-height: 36px !important;
    padding: 0 13px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--accentTint) 46%, var(--surface))) !important;
    border-color: color-mix(in srgb, var(--accent2) 24%, var(--line)) !important;
    color: color-mix(in srgb, var(--accent2) 78%, #6b4a11) !important;
    font-size: .64rem !important;
    font-weight: 900 !important;
    box-shadow: 0 9px 24px rgba(67, 49, 12, .06), inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.hero h1[b-w2nmzbtm49] {
    margin: 18px 0 18px !important;
    font-size: clamp(3.25rem, 5.8vw, 3.45rem) !important;
    line-height: 1.02 !important;
    font-weight: 980 !important;
    letter-spacing: -.055em !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    /* IMPORTANT:
       Do NOT use the background shorthand here.
       An old background: ... !important freezes background-position
       and prevents the shimmer keyframes from moving it.
    */
    background-image: linear-gradient( 110deg, #9b6a0e 0%, #c88710 22%, #e8ad26 38%, #ffd85e 46%, #fff4c4 50%, #ffd85e 54%, #e8ad26 62%, #c88710 78%, #9b6a0e 100% ) !important;
    background-size: 260% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-shadow: 0 14px 42px rgba(211, 158, 35, .12) !important;
    animation: heroGoldShimmer-b-w2nmzbtm49 4.2s linear infinite !important;
}

.home-page[dir="rtl"] .hero h1[b-w2nmzbtm49] {
    letter-spacing: -.025em !important;
}

.hero h1 strong[b-w2nmzbtm49] {
    display: block !important;
    margin-top: 5px !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient( 110deg, #ad730c 0%, #d79614 22%, #f0bb35 38%, #ffe16f 46%, #fff7ce 50%, #ffe16f 54%, #f0bb35 62%, #d79614 78%, #ad730c 100% ) !important;
    background-size: 260% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: heroGoldShimmer-b-w2nmzbtm49 4.2s linear infinite !important;
    animation-delay: -1.05s !important;
}

.hero__copy > p[b-w2nmzbtm49] {
    max-width: 650px !important;
    margin: 0 !important;
    color: var(--text2) !important;
    font-size: .93rem !important;
    line-height: 2.05 !important;
    font-weight: 610 !important;
}

.hero__actions[b-w2nmzbtm49] {
    margin-top: 25px !important;
    gap: 10px !important;
}

    .hero__actions .button[b-w2nmzbtm49] {
        min-height: 53px !important;
        padding-inline: 20px !important;
        border-radius: 16px !important;
        font-size: .69rem !important;
        font-weight: 900 !important;
        box-shadow: 0 12px 28px rgba(53, 41, 11, .06);
    }

    .hero__actions .button--primary[b-w2nmzbtm49] {
        background: linear-gradient(135deg, #f4cd58, #e6ad25) !important;
        border-color: rgba(170, 119, 10, .18) !important;
        color: #2b210d !important;
        box-shadow: 0 14px 32px rgba(214, 159, 34, .18), inset 0 1px 0 rgba(255,255,255,.4) !important;
    }

.hero__trust[b-w2nmzbtm49] {
    margin-top: 18px !important;
    gap: 8px !important;
}

    .hero__trust span[b-w2nmzbtm49] {
        min-height: 33px !important;
        padding: 0 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--surface) 84%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--accent2) 15%, var(--line)) !important;
        color: color-mix(in srgb, var(--text2) 90%, var(--accent2)) !important;
        font-size: .58rem !important;
        font-weight: 820 !important;
        box-shadow: 0 8px 18px rgba(55, 43, 15, .04) !important;
    }


/* USER WEBM — keep media itself intact, enrich only its stage */
.hero-video-stage[b-w2nmzbtm49] {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

    .hero-video-stage[b-w2nmzbtm49]::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        z-index: -2 !important;
        width: min(470px, 82%) !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 42% !important;
        transform: translate(-50%, -50%) rotate(-5deg) !important;
        background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 61%) !important;
        border: 1px dashed color-mix(in srgb, var(--accent2) 17%, transparent) !important;
        animation: hero-v3-orbit-b-w2nmzbtm49 10s linear infinite !important;
    }

    .hero-video-stage[b-w2nmzbtm49]::after {
        content: "PDF  •  DOCX  •  PPTX  →  AI  →  سند آماده" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 14px !important;
        z-index: 5 !important;
        transform: translateX(-50%) !important;
        min-height: 34px !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid color-mix(in srgb, var(--accent2) 20%, var(--line)) !important;
        background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
        color: color-mix(in srgb, var(--accent2) 78%, #664611) !important;
        font-size: .56rem !important;
        font-weight: 900 !important;
        letter-spacing: .03em !important;
        white-space: nowrap !important;
        box-shadow: 0 12px 28px rgba(62, 45, 11, .08), inset 0 1px 0 rgba(255,255,255,.78) !important;
        backdrop-filter: blur(12px) !important;
    }


/* METRICS — replace empty strip with four real premium cards */
.hero-metrics[b-w2nmzbtm49] {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

    .hero-metrics > div[b-w2nmzbtm49] {
        position: relative !important;
        min-height: 104px !important;
        padding: 18px 16px 16px 66px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 6px !important;
        overflow: hidden !important;
        border: 1px solid color-mix(in srgb, var(--accent2) 15%, var(--line)) !important;
        border-radius: 20px !important;
        background: radial-gradient(circle at 14% 15%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 35%), linear-gradient(180deg, color-mix(in srgb, var(--surface) 93%, transparent), color-mix(in srgb, var(--raised) 80%, transparent)) !important;
        box-shadow: 0 14px 34px rgba(53, 42, 13, .055), inset 0 1px 0 rgba(255,255,255,.8) !important;
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    }

        .hero-metrics > div:last-child[b-w2nmzbtm49] {
            border: 1px solid color-mix(in srgb, var(--accent2) 15%, var(--line)) !important;
        }

        .hero-metrics > div:hover[b-w2nmzbtm49] {
            transform: translateY(-4px) !important;
            border-color: color-mix(in srgb, var(--accent2) 31%, var(--line)) !important;
            box-shadow: 0 20px 42px rgba(79, 58, 10, .09), inset 0 1px 0 rgba(255,255,255,.88) !important;
        }

        .hero-metrics > div[b-w2nmzbtm49]::before {
            position: absolute !important;
            inset-inline-start: 17px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 36px !important;
            height: 36px !important;
            display: grid !important;
            place-items: center !important;
            border-radius: 13px !important;
            border: 1px solid color-mix(in srgb, var(--accent2) 21%, var(--line)) !important;
            background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 15%, var(--surface)), color-mix(in srgb, var(--accentTint) 70%, var(--surface))) !important;
            color: color-mix(in srgb, var(--accent2) 84%, #60400a) !important;
            font-size: .66rem !important;
            font-weight: 950 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
        }

        .hero-metrics > div:nth-child(1)[b-w2nmzbtm49]::before {
            content: "11";
        }

        .hero-metrics > div:nth-child(2)[b-w2nmzbtm49]::before {
            content: "IN";
        }

        .hero-metrics > div:nth-child(3)[b-w2nmzbtm49]::before {
            content: "Q";
        }

        .hero-metrics > div:nth-child(4)[b-w2nmzbtm49]::before {
            content: "AI";
        }

        .hero-metrics > div[b-w2nmzbtm49]::after {
            content: "" !important;
            position: absolute !important;
            inset-inline-start: 0 !important;
            inset-inline-end: 0 !important;
            bottom: 0 !important;
            height: 3px !important;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent2) 70%, var(--accent)), transparent) !important;
            opacity: .68 !important;
        }

    .hero-metrics strong[b-w2nmzbtm49] {
        font-size: 1.38rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .hero-metrics span[b-w2nmzbtm49] {
        color: #43391b !important;
        font-size: .61rem !important;
        line-height: 1.55 !important;
        font-weight: 760 !important;
    }


/* Dark */
html[data-theme="dark"] .hero[b-w2nmzbtm49]::before {
    background: radial-gradient(circle at 10% 18%, rgba(222, 174, 53, .12), transparent 28%), radial-gradient(circle at 88% 20%, rgba(222, 174, 53, .07), transparent 24%), linear-gradient(145deg, rgba(40, 33, 23, .91), rgba(26, 22, 17, .91)) !important;
    border-color: rgba(221, 178, 68, .13) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .hero__copy > p[b-w2nmzbtm49] {
    color: #c8beaf !important;
}

html[data-theme="dark"] .eyebrow[b-w2nmzbtm49],
html[data-theme="dark"] .hero__trust span[b-w2nmzbtm49],
html[data-theme="dark"] .hero-video-stage[b-w2nmzbtm49]::after {
    background: rgba(42, 35, 24, .88) !important;
    color: #e7c573 !important;
    border-color: rgba(221, 178, 68, .15) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .hero-metrics > div[b-w2nmzbtm49] {
    background: radial-gradient(circle at 14% 15%, rgba(219, 171, 50, .08), transparent 34%), linear-gradient(180deg, rgba(39, 32, 23, .96), rgba(28, 23, 18, .97)) !important;
    border-color: rgba(221, 178, 68, .12) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

    html[data-theme="dark"] .hero-metrics > div:last-child[b-w2nmzbtm49] {
        border-color: rgba(221, 178, 68, .12) !important;
    }

    html[data-theme="dark"] .hero-metrics > div[b-w2nmzbtm49]::before {
        background: linear-gradient(145deg, rgba(88, 68, 28, .74), rgba(55, 42, 24, .82)) !important;
        border-color: rgba(221, 178, 68, .16) !important;
        color: #efcb70 !important;
        box-shadow: none !important;
    }

html[data-theme="dark"] .hero-metrics strong[b-w2nmzbtm49] {
    color: #f5eee1 !important;
}

html[data-theme="dark"] .hero-metrics span[b-w2nmzbtm49] {
    color: #bfb3a1 !important;
}


/* Responsive */
@media (max-width: 1100px) {
    .hero__layout[b-w2nmzbtm49] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .hero__copy[b-w2nmzbtm49] {
        margin-inline: auto !important;
        text-align: center !important;
    }

        .hero__copy[b-w2nmzbtm49]::before {
            display: none !important;
        }

    .eyebrow[b-w2nmzbtm49] {
        margin-inline: auto !important;
    }

    .hero__copy > p[b-w2nmzbtm49] {
        margin-inline: auto !important;
    }

    .hero__actions[b-w2nmzbtm49],
    .hero__trust[b-w2nmzbtm49] {
        justify-content: center !important;
    }

    .hero-video-stage[b-w2nmzbtm49] {
        width: min(720px, 100%) !important;
        margin-inline: auto !important;
    }

    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(760px, 100%) !important;
        margin-inline: auto !important;
        margin-top: 12px !important;
    }
}

@media (max-width: 680px) {
    .hero[b-w2nmzbtm49] {
        padding: 48px 0 28px !important;
    }

        .hero[b-w2nmzbtm49]::before {
            inset: 10px 8px 6px !important;
            border-radius: 28px !important;
        }

        .hero h1[b-w2nmzbtm49] {
            font-size: clamp(2.5rem, 12vw, 4rem) !important;
        }

    .hero__copy > p[b-w2nmzbtm49] {
        font-size: .82rem !important;
    }

    .hero-metrics[b-w2nmzbtm49] {
        gap: 9px !important;
    }

        .hero-metrics > div[b-w2nmzbtm49] {
            min-height: 90px !important;
            padding: 14px 12px 12px 54px !important;
            border-radius: 16px !important;
        }

            .hero-metrics > div[b-w2nmzbtm49]::before {
                inset-inline-start: 12px !important;
                width: 31px !important;
                height: 31px !important;
                border-radius: 11px !important;
                font-size: .58rem !important;
            }

        .hero-metrics strong[b-w2nmzbtm49] {
            font-size: 1.12rem !important;
        }

        .hero-metrics span[b-w2nmzbtm49] {
            font-size: .55rem !important;
        }

    .hero-video-stage[b-w2nmzbtm49]::after {
        bottom: 8px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: .49rem !important;
    }
}

@media (max-width: 470px) {
    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: 1fr !important;
    }
}

@keyframes hero-v3-gold-b-w2nmzbtm49 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes hero-v3-breathe-b-w2nmzbtm49 {
    0%,100% {
        transform: scale(.96);
        opacity: .72;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes hero-v3-orbit-b-w2nmzbtm49 {
    0% {
        transform: translate(-50%, -50%) rotate(-5deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(3deg) scale(1.025);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-5deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero[b-w2nmzbtm49]::after,
    .hero-video-stage[b-w2nmzbtm49]::before {
        animation: none !important;
    }
}

/* LANDING HERO EXACT POLISH V3 - END */

/* LANDING HERO POLISH V3.3 - START */

/* Hero title: slightly smaller and more balanced */
.hero h1[b-w2nmzbtm49] {
    font-size: clamp(2.55rem, 4.6vw, 4.15rem) !important;
    line-height: 1.06 !important;
}

/* Remove the capsule text over the WebM area */
.hero-video-stage[b-w2nmzbtm49]::after {
    content: none !important;
    display: none !important;
}

/* Rebuild the four metric cards so they read clearly in RTL */
.hero-metrics[b-w2nmzbtm49] {
    gap: 14px !important;
    margin-top: 20px !important;
}

    .hero-metrics > div[b-w2nmzbtm49] {
        position: relative !important;
        overflow: hidden !important;
        min-height: 128px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
        gap: 6px !important;
        padding-block: 18px !important;
        padding-inline-start: 18px !important;
        padding-inline-end: 88px !important;
        background: radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--raised) 86%, transparent)) !important;
        border: 1px solid color-mix(in srgb, var(--line) 85%, var(--accent) 15%) !important;
        box-shadow: 0 10px 26px rgba(34, 27, 18, .05) !important;
    }

        .hero-metrics > div > *[b-w2nmzbtm49] {
            position: relative !important;
            z-index: 2 !important;
            width: min(52%, 180px) !important;
        }

        .hero-metrics > div[b-w2nmzbtm49]::before {
            content: "" !important;
            position: absolute !important;
            top: 16px !important;
            inset-inline-end: 16px !important;
            z-index: 2 !important;
            width: 40px !important;
            height: 40px !important;
            border-radius: 14px !important;
            border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
            background-color: color-mix(in srgb, var(--accent) 11%, var(--surface)) !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 20px 20px !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.4) !important;
        }

        .hero-metrics > div[b-w2nmzbtm49]::after {
            position: absolute !important;
            inset-inline-start: 16px !important;
            top: 18px !important;
            bottom: 18px !important;
            z-index: 1 !important;
            width: calc(100% - 196px) !important;
            min-width: 118px !important;
            max-width: 46% !important;
            padding-inline-end: 14px !important;
            border-inline-end: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%) !important;
            white-space: pre-line !important;
            text-align: left !important;
            color: color-mix(in srgb, var(--accent2) 68%, var(--text2)) !important;
            font-size: .60rem !important;
            line-height: 1.9 !important;
            font-weight: 850 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            opacity: .98 !important;
        }

    .hero-metrics strong[b-w2nmzbtm49] {
        margin: 0 !important;
        font-size: 1.52rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
    }

    .hero-metrics span[b-w2nmzbtm49],
    .hero-metrics small[b-w2nmzbtm49],
    .hero-metrics em[b-w2nmzbtm49],
    .hero-metrics p[b-w2nmzbtm49] {
        margin: 0 !important;
        font-size: .70rem !important;
        line-height: 1.6 !important;
        font-weight: 780 !important;
        font-style: normal !important;
    }

    /* meaningful SVG icons */
    .hero-metrics > div:nth-child(1)[b-w2nmzbtm49]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23b88918' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M12 3l1.4 3.7L17 8l-3.6 1.3L12 13l-1.4-3.7L7 8l3.6-1.3L12 3zM6 14l.9 2.1L9 17l-2.1.9L6 20l-.9-2.1L3 17l2.1-.9L6 14zm12 0l.9 2.1L21 17l-2.1.9L18 20l-.9-2.1L15 17l2.1-.9L18 14z'/%3E%3C/svg%3E") !important;
    }

    .hero-metrics > div:nth-child(2)[b-w2nmzbtm49]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23b88918' stroke-width='1.9' stroke-linecap='round' d='M5 7h14M5 12h14M5 17h14'/%3E%3Ccircle cx='9' cy='7' r='1.7' fill='%23b88918'/%3E%3Ccircle cx='15' cy='12' r='1.7' fill='%23b88918'/%3E%3Ccircle cx='11' cy='17' r='1.7' fill='%23b88918'/%3E%3C/svg%3E") !important;
    }

    .hero-metrics > div:nth-child(3)[b-w2nmzbtm49]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='6' height='6' rx='1.4' fill='none' stroke='%23b88918' stroke-width='1.8'/%3E%3Crect x='14' y='5' width='6' height='6' rx='1.4' fill='none' stroke='%23b88918' stroke-width='1.8'/%3E%3Crect x='9' y='13' width='6' height='6' rx='1.4' fill='none' stroke='%23b88918' stroke-width='1.8'/%3E%3Cpath d='M10 8h4M12 11v2' fill='none' stroke='%23b88918' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .hero-metrics > div:nth-child(4)[b-w2nmzbtm49]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h7l4 4v12H7z' fill='none' stroke='%23b88918' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 4v4h4' fill='none' stroke='%23b88918' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9.5 12h6M9.5 15h6M9.5 18h4' fill='none' stroke='%23b88918' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    /* per-card details shown as left-side stacked column */
    .hero-metrics > div:nth-child(1)[b-w2nmzbtm49]::after {
        content: "• تحلیل هوشمند\A• واژه‌نامه زنده\A• بازبینی خودکار" !important;
    }

    .hero-metrics > div:nth-child(2)[b-w2nmzbtm49]::after {
        content: "• استاندارد\A• حرفه‌ای\A• تخصصی پیشرفته" !important;
    }

    .hero-metrics > div:nth-child(3)[b-w2nmzbtm49]::after {
        content: "• سند متنی\A• تصویر و اسکن\A• صفحه وب" !important;
    }

    .hero-metrics > div:nth-child(4)[b-w2nmzbtm49]::after {
        content: "• PDF\A• DOCX\A• PPTX" !important;
    }

html[data-theme="dark"] .hero-metrics > div[b-w2nmzbtm49] {
    background: radial-gradient(circle at 16% 22%, rgba(219, 171, 50, .09), transparent 36%), linear-gradient(180deg, rgba(39, 32, 23, .96), rgba(28, 23, 18, .98)) !important;
    border-color: rgba(221, 178, 68, .22) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.24) !important;
}

    html[data-theme="dark"] .hero-metrics > div[b-w2nmzbtm49]::before {
        border-color: rgba(221, 178, 68, .24) !important;
        background-color: rgba(221, 178, 68, .10) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

html[data-theme="dark"] .hero-metrics span[b-w2nmzbtm49],
html[data-theme="dark"] .hero-metrics small[b-w2nmzbtm49],
html[data-theme="dark"] .hero-metrics em[b-w2nmzbtm49],
html[data-theme="dark"] .hero-metrics p[b-w2nmzbtm49] {
    color: #cdbfab !important;
}

html[data-theme="dark"] .hero-metrics > div[b-w2nmzbtm49]::after {
    color: #e5c36e !important;
    border-inline-end-color: rgba(221, 178, 68, .20) !important;
}

@media (max-width: 860px) {
    .hero-metrics > div[b-w2nmzbtm49] {
        min-height: 120px !important;
        padding-inline-end: 76px !important;
    }

        .hero-metrics > div > *[b-w2nmzbtm49] {
            width: min(56%, 180px) !important;
        }

        .hero-metrics > div[b-w2nmzbtm49]::after {
            width: calc(100% - 174px) !important;
            max-width: 44% !important;
            font-size: .55rem !important;
            line-height: 1.8 !important;
        }
}

@media (max-width: 680px) {
    .hero h1[b-w2nmzbtm49] {
        font-size: clamp(2.25rem, 10.8vw, 3.5rem) !important;
    }

    .hero-metrics > div[b-w2nmzbtm49] {
        min-height: 110px !important;
        padding-block: 14px !important;
        padding-inline-start: 14px !important;
        padding-inline-end: 64px !important;
    }

        .hero-metrics > div > *[b-w2nmzbtm49] {
            width: min(58%, 160px) !important;
        }

        .hero-metrics > div[b-w2nmzbtm49]::before {
            top: 14px !important;
            inset-inline-end: 14px !important;
            width: 34px !important;
            height: 34px !important;
            border-radius: 12px !important;
            background-size: 16px 16px !important;
        }

    .hero-metrics strong[b-w2nmzbtm49] {
        font-size: 1.18rem !important;
    }

    .hero-metrics span[b-w2nmzbtm49],
    .hero-metrics small[b-w2nmzbtm49],
    .hero-metrics em[b-w2nmzbtm49],
    .hero-metrics p[b-w2nmzbtm49] {
        font-size: .62rem !important;
    }

    .hero-metrics > div[b-w2nmzbtm49]::after {
        width: calc(100% - 146px) !important;
        max-width: 42% !important;
        padding-inline-end: 10px !important;
        font-size: .48rem !important;
        line-height: 1.7 !important;
    }
}

/* LANDING HERO POLISH V3.3 - END */


.hero-metrics[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.hero-metric-card[b-w2nmzbtm49] {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    border: 1px solid rgb(47 43 33 / 52%);
    border-radius: 24px;
    background: radial-gradient(circle at 18% 22%, rgba(238, 197, 87, .10), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,249,243,.98));
    box-shadow: 0 10px 24px rgba(38, 28, 12, .05);
}

    .hero-metric-card[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, #f2e1a7 0%, #efc24a 50%, #d79a12 100%);
    }

.hero-metric-notes[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 18px 18px 18px 22px;
    border-inline-end: 1px solid rgba(213, 181, 102, .24);
}

    .hero-metric-notes span[b-w2nmzbtm49] {
        display: block;
        font-size: .70rem;
        font-weight: 800;
        line-height: 1.55;
        color: #b88918;
        text-align: left;
        white-space: nowrap;
    }

.hero-metric-main[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 18px 22px;
}

.hero-metric-icon[b-w2nmzbtm49] {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(213, 181, 102, .42);
    background: rgba(239, 194, 74, .12);
    color: #c08d18;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

    .hero-metric-icon svg[b-w2nmzbtm49] {
        width: 20px;
        height: 20px;
    }

.hero-metric-copy[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    text-align: right;
    flex: 1;
}

    .hero-metric-copy strong[b-w2nmzbtm49] {
        margin: 0;
        font-size: 1.95rem;
        line-height: 1;
        font-weight: 950;
        color: #514c35;
    }

    .hero-metric-copy small[b-w2nmzbtm49] {
        margin: 0;
        font-size: .78rem;
        line-height: 1.5;
        font-weight: 780;
    }

/* اگر کارت اول AI+QA بود، عدد نیست؛ بهتر دیده شود */
.hero-metric-card:first-child .hero-metric-copy strong[b-w2nmzbtm49] {
    font-size: 1.55rem;
}

/* دارک تم */
html[data-theme="dark"] .hero-metric-card[b-w2nmzbtm49] {
    background: radial-gradient(circle at 18% 22%, rgba(219, 171, 50, .09), transparent 38%), linear-gradient(180deg, rgba(41, 34, 25, .98), rgba(30, 24, 18, .98));
    border-color: rgba(217, 179, 78, .18);
    box-shadow: 0 14px 28px rgba(0,0,0,.25);
}

html[data-theme="dark"] .hero-metric-notes[b-w2nmzbtm49] {
    border-inline-end-color: rgba(217, 179, 78, .18);
}

    html[data-theme="dark"] .hero-metric-notes span[b-w2nmzbtm49] {
        color: #e0bb63;
    }

html[data-theme="dark"] .hero-metric-icon[b-w2nmzbtm49] {
    border-color: rgba(217, 179, 78, .24);
    background: rgba(217, 179, 78, .09);
    color: #e0bb63;
    box-shadow: none;
}

html[data-theme="dark"] .hero-metric-copy strong[b-w2nmzbtm49] {
    color: #fff5df;
}

html[data-theme="dark"] .hero-metric-copy small[b-w2nmzbtm49] {
    color: #cbbda8;
}

/* ریسپانسیو */
@media (max-width: 1100px) {
    .hero-metric-card[b-w2nmzbtm49] {
        grid-template-columns: minmax(0, 1fr) 210px;
    }
}

@media (max-width: 860px) {
    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hero-metric-card[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }

    .hero-metric-notes[b-w2nmzbtm49] {
        order: 2;
        border-inline-end: 0;
        border-top: 1px solid rgba(213, 181, 102, .22);
        padding-top: 14px;
        text-align: right;
    }

        .hero-metric-notes span[b-w2nmzbtm49] {
            text-align: right;
        }

    .hero-metric-main[b-w2nmzbtm49] {
        order: 1;
    }
}

/* ==========================================================
   HERO METRICS — STRUCTURE FIX ONLY
   IMPORTANT: NO COLOR / BACKGROUND / BORDER-COLOR VALUES
   ARE CHANGED IN THIS BLOCK.
   ========================================================== */

/*
   The current file contains older .hero-metrics > div rules with !important.
   This block only normalizes layout for the newer semantic markup:
   .hero-metric-card
     .hero-metric-notes
     .hero-metric-main
       .hero-metric-icon
       .hero-metric-copy
*/

/* Keep the whole metrics grid inside its container. */
.hero-metrics[b-w2nmzbtm49] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

    /* Each card must be allowed to shrink inside one grid track. */
    .hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 132px !important;
        /*
       Force PHYSICAL columns:
       left  = notes
       right = icon + main value/title
       direction:ltr here is only for physical grid placement.
       Persian direction is restored inside both columns.
    */
        direction: ltr !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas: "notes main" !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

        /*
   Cancel the old generic width rule:
   .hero-metrics > div > * { width:min(... ) !important; }
*/
        .hero-metrics > .hero-metric-card > *[b-w2nmzbtm49] {
            position: relative !important;
            z-index: 2 !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        /* LEFT COLUMN — three explanatory lines. */
        .hero-metrics > .hero-metric-card > .hero-metric-notes[b-w2nmzbtm49] {
            grid-area: notes !important;
            direction: rtl !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: stretch !important;
            gap: 8px !important;
            padding: 18px 20px !important;
            text-align: right !important;
            overflow: hidden !important;
        }

            /* Prevent a long note from forcing the card wider than its grid cell. */
            .hero-metrics > .hero-metric-card > .hero-metric-notes span[b-w2nmzbtm49] {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                word-break: normal !important;
            }

        /* RIGHT COLUMN — SVG icon + main value/title + subtitle. */
        .hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49] {
            grid-area: main !important;
            direction: rtl !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 14px !important;
            padding: 18px 20px !important;
            min-width: 0 !important;
            overflow: hidden !important;
        }

        /* Real SVG icon only. */
        .hero-metrics > .hero-metric-card .hero-metric-icon[b-w2nmzbtm49] {
            position: relative !important;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            max-width: 42px !important;
            display: grid !important;
            place-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

            .hero-metrics > .hero-metric-card .hero-metric-icon svg[b-w2nmzbtm49] {
                display: block !important;
                width: 20px !important;
                height: 20px !important;
                max-width: 20px !important;
                max-height: 20px !important;
                flex: 0 0 auto !important;
            }

        /* Main copy must never push the card wider. */
        .hero-metrics > .hero-metric-card .hero-metric-copy[b-w2nmzbtm49] {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            width: auto !important;
            max-width: none !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: center !important;
            gap: 6px !important;
            margin: 0 !important;
            padding: 0 !important;
            direction: rtl !important;
            text-align: right !important;
        }

            .hero-metrics > .hero-metric-card .hero-metric-copy strong[b-w2nmzbtm49],
            .hero-metrics > .hero-metric-card .hero-metric-copy small[b-w2nmzbtm49] {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                text-align: right !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
            }

        /*
   Disable the OLD generated pseudo-icon.
   The semantic .hero-metric-icon SVG is the only icon now.
*/
        .hero-metrics > .hero-metric-card[b-w2nmzbtm49]::before {
            content: none !important;
            display: none !important;
        }

        /*
   Reclaim ::after exclusively for the existing bottom accent line.
   No background/color value is declared here, so YOUR existing
   line color/gradient remains exactly as defined above.
*/
        .hero-metrics > .hero-metric-card[b-w2nmzbtm49]::after {
            content: "" !important;
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            top: auto !important;
            bottom: 0 !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            height: 3px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            display: block !important;
            opacity: 1 !important;
            transform: none !important;
            white-space: normal !important;
            pointer-events: none !important;
        }

/* Desktop/tablet: do not let four narrow cards overflow. */
@media (max-width: 1180px) {
    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Phone: one card per row. */
@media (max-width: 700px) {
    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

        .hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
            min-height: 122px !important;
        }
}

/* Very small phones: stack the two internal columns. */
@media (max-width: 460px) {
    .hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "main"
            "notes" !important;
    }

        .hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49],
        .hero-metrics > .hero-metric-card > .hero-metric-notes[b-w2nmzbtm49] {
            padding: 14px 16px !important;
        }
}

/* ==========================================================
   END HERO METRICS — STRUCTURE FIX ONLY
   ========================================================== */

/* HERO METRICS COMPACT FINAL - START */

/*
   STRUCTURE + SIZE ONLY.
   Existing card colors/backgrounds are intentionally untouched.
*/

/* Restore the original compact V1 footprint. */
.container.hero-metrics[b-w2nmzbtm49] {
    width: min(1240px, calc(100% - 42px)) !important;
    max-width: 1240px !important;
    min-width: 0 !important;
    margin: 18px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

    /* Compact card: close to the original ~94px metrics strip. */
    .container.hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 96px !important;
        min-height: 96px !important;
        direction: ltr !important;
        display: grid !important;
        grid-template-columns: 46% 54% !important;
        grid-template-areas: "notes main" !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

        /* Kill the old generated pseudo-icon: real SVG already exists in Razor. */
        .container.hero-metrics > .hero-metric-card[b-w2nmzbtm49]::before {
            content: none !important;
            display: none !important;
        }

        /*
   Keep ::after only as the existing bottom accent line.
   No color/background is declared here, so your current gold stays untouched.
*/
        .container.hero-metrics > .hero-metric-card[b-w2nmzbtm49]::after {
            content: "" !important;
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            top: auto !important;
            bottom: 0 !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            height: 3px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            display: block !important;
            transform: none !important;
            opacity: 1 !important;
            pointer-events: none !important;
        }

        /* Cancel old generic child width rules from V3/V3.3. */
        .container.hero-metrics > .hero-metric-card > *[b-w2nmzbtm49] {
            position: relative !important;
            z-index: 2 !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        /* LEFT COLUMN: exactly three compact explanation rows. */
        .container.hero-metrics > .hero-metric-card > .hero-metric-notes[b-w2nmzbtm49] {
            grid-area: notes !important;
            direction: rtl !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: center !important;
            gap: 2px !important;
            padding: 10px 14px !important;
            border-inline-end: 0 !important;
            overflow: hidden !important;
            text-align: right !important;
        }

            .container.hero-metrics > .hero-metric-card > .hero-metric-notes span[b-w2nmzbtm49] {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                font-size: .75rem !important;
                line-height: 1.42 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

        /*
   RIGHT COLUMN:
   icon + primary value/title.
   Physical separator is the LEFT edge of this right column.
*/
        .container.hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49] {
            grid-area: main !important;
            direction: rtl !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            min-width: 0 !important;
            padding: 10px 14px !important;
            border-left: 1px solid var(--line) !important;
            background: linear-gradient(181deg, #fffbec 0%, #d3cbb6 50%, #b7a888 100%);
            overflow: hidden !important;
        }

    /* Real SVG icon: compact. */
    .container.hero-metrics .hero-metric-icon[b-w2nmzbtm49] {
        position: relative !important;
        flex: 0 0 34px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 11px !important;
        background: linear-gradient(90deg, #fffbf3f0 0%, #f5eddaf5 50%, #fdf5e3de 100%);
        border: 1px solid rgb(107 88 43 / 55%);
        overflow: hidden !important;
    }

        .container.hero-metrics .hero-metric-icon svg[b-w2nmzbtm49] {
            display: block !important;
            width: 38px !important;
            height: 38px !important;
            max-width: 38px !important;
            max-height: 38px !important;
            flex: 0 0 auto !important;
        }

    /* Main number/title + subtitle. */
    .container.hero-metrics .hero-metric-copy[b-w2nmzbtm49] {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        text-align: right !important;
    }

        .container.hero-metrics .hero-metric-copy strong[b-w2nmzbtm49],
        .container.hero-metrics .hero-metric-copy small[b-w2nmzbtm49] {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            text-align: right !important;
        }

        .container.hero-metrics .hero-metric-copy strong[b-w2nmzbtm49] {
            font-size: 1.32rem !important;
            line-height: 1.05 !important;
        }

    .container.hero-metrics .hero-metric-card:first-child .hero-metric-copy strong[b-w2nmzbtm49] {
        font-size: 1.32rem !important;
        color: #514c35;
    }

    .container.hero-metrics .hero-metric-copy small[b-w2nmzbtm49] {
        font-size: .75rem !important;
        line-height: 1.55 !important;
        color: #674800;
    }

/* Tablet: 2 x 2, still compact. */
@media (max-width: 980px) {
    .container.hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(760px, calc(100% - 28px)) !important;
    }
}

/* Phone: one per row. */
@media (max-width: 560px) {
    .container.hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: 1fr !important;
        width: min(100% - 20px, 520px) !important;
        gap: 9px !important;
    }

        .container.hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
            height: 90px !important;
            min-height: 90px !important;
        }
}

/* HERO METRICS COMPACT FINAL - END */


.hero h1[b-w2nmzbtm49] {
    margin: 18px 0 18px !important;
    font-size: clamp(3.25rem, 5.8vw, 3.45rem) !important;
    line-height: 1.02 !important;
    font-weight: 980 !important;
    letter-spacing: -.055em !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    /* مهم: background shorthand استفاده نکن */
    background-image: linear-gradient( 105deg, #9b6a0e 0%, #d49a1c 18%, #f5c84d 34%, #fff0a2 47%, #ffffff 50%, #fff0a2 53%, #f5c84d 66%, #d49a1c 82%, #9b6a0e 100% ) !important;
    background-size: 320% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    /*
       روی background-position به هیچ وجه !important نگذار.
       باید keyframe بتواند آن را تغییر دهد.
    */
    background-position: -160% 50%;
    text-shadow: 0 14px 42px rgba(211, 158, 35, .12) !important;
    animation-name: heroGoldShimmer-b-w2nmzbtm49;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


    .hero h1 strong[b-w2nmzbtm49] {
        display: block !important;
        margin-top: 5px !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 105deg, #a96f08 0%, #dc9e19 18%, #f7cb50 34%, #fff09d 47%, #ffffff 50%, #fff09d 53%, #f7cb50 66%, #dc9e19 82%, #a96f08 100% ) !important;
        background-size: 320% 100% !important;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        background-position: -160% 50%;
        animation-name: heroGoldShimmer-b-w2nmzbtm49;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-delay: -1.1s;
    }

/* ==========================================================
   HERO TITLE — VERIFIED MOVING GOLD
   ========================================================== */

/*
   The older V3 rule originally used:
       background: ... !important;
   That shorthand also makes background-position !important.
   CSS animations cannot override an author !important value,
   so the gold appeared frozen.

   The V3 rules above now use background-image only.
   Therefore this keyframe can actually animate background-position.
*/

@keyframes heroGoldShimmer-b-w2nmzbtm49 {
    0% {
        background-position: -190% 50%;
    }

    100% {
        background-position: 90% 50%;
    }
}

/*
   The global reduced-motion rule in this file sets every animation
   to .001ms !important. Keep the user's requested title animation
   alive even when that media query is active.
*/
@media (prefers-reduced-motion: reduce) {
    .home-page .hero h1[b-w2nmzbtm49],
    .home-page .hero h1 strong[b-w2nmzbtm49] {
        animation-name: heroGoldShimmer-b-w2nmzbtm49 !important;
        animation-duration: 4.2s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }

        .home-page .hero h1 strong[b-w2nmzbtm49] {
            animation-delay: -1.05s !important;
        }
}

/* ==========================================================
   END HERO TITLE — VERIFIED MOVING GOLD
   ========================================================== */

/* =========================================================
   HERO TITLE — FIXED TEXT / MOVING GOLD SHINE ONLY
   ========================================================= */

.home-page .hero h1[b-w2nmzbtm49],
.home-page .hero h1 strong[b-w2nmzbtm49] {
    /* خود نوشته همیشه ثابت و قابل مشاهده بماند */
    opacity: 1 !important;
    transform: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    /*
       Layer 1 = نور متحرک
       Layer 2 = طلایی ثابت
    */
    background-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 235, 155, 0.15) 44%, rgba(255, 250, 210, 0.95) 50%, rgba(255, 235, 155, 0.15) 56%, transparent 62%, transparent 100%), linear-gradient(115deg, #b98800 0%, #ab7e00 22%, #cb9500 45%, #bf8d00 68%, #a77b00 100%) !important;
    /*
       لایه اول بزرگ و متحرک
       لایه دوم همیشه 100% ثابت
    */
    background-size: 240% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 180% 50%, 0 50%;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: heroGoldLightSweep-b-w2nmzbtm49 4.8s linear infinite !important;
    will-change: background-position;
}


    /* خط دوم همان رنگ، فقط نور کمی دیرتر عبور کند */
    .home-page .hero h1 strong[b-w2nmzbtm49] {
        animation-delay: -1.2s !important;
    }


/* فقط Layer اول حرکت می‌کند؛ طلایی اصلی ثابت است */
@keyframes heroGoldLightSweep-b-w2nmzbtm49 {
    0% {
        background-position: -80% 50%, 0 50%;
    }

    100% {
        background-position: 180% 50%, 0 50%;
    }
}


/*
   CSS فعلی پروژه در Reduce Motion همه animationها را می‌کشد.
   فقط همین shine را دوباره فعال می‌کنیم.
*/
@media (prefers-reduced-motion: reduce) {

    .home-page .hero h1[b-w2nmzbtm49],
    .home-page .hero h1 strong[b-w2nmzbtm49] {
        animation: heroGoldLightSweep-b-w2nmzbtm49 4.8s linear infinite !important;
    }

        .home-page .hero h1 strong[b-w2nmzbtm49] {
            animation-delay: -1.2s !important;
        }
}



/* =========================================================
   HERO BACKGROUND RINGS — FINAL UNIFORM INFINITE WAVES
   Fixed spacing / continuous loop / late fade / full gold
   ========================================================= */


/* =========================================================
   HERO BOUNDARY
   حلقه‌ها نباید از کادر اصلی Hero خارج شوند
   مقادیر دقیقاً مطابق قاب فعلی Hero هستند
   ========================================================= */

.hero[b-w2nmzbtm49] {
    overflow: hidden !important;
    /*
       قاب فعلی Hero:
       inset: 18px 18px 8px;
       border-radius: 36px;
    */
    clip-path: inset( 18px 18px 8px 18px round 36px ) !important;
}


/* =========================================================
   STAGE
   ========================================================= */

.hero-video-stage[b-w2nmzbtm49] {
    position: relative !important;
    isolation: isolate !important;
    /*
       داخل stage آزاد است تا حلقه‌ها پشت وکتور
       به اندازه کافی باز شوند.
       clipping در سطح خود Hero انجام می‌شود.
    */
    overflow: visible !important;
}


/* وکتور اصلی همیشه روی موج‌ها */
.hero-motion-video[b-w2nmzbtm49] {
    position: relative !important;
    z-index: 5 !important;
}


/* مرکز تمام موج‌ها */
.hero-circles-bg[b-w2nmzbtm49] {
    position: absolute !important;
    left: calc(50% - 90px) !important;
    top: 50% !important;
    width: 1px !important;
    height: 1px !important;
    z-index: 1 !important;
    overflow: visible !important;
    pointer-events: none !important;
}



/* =========================================================
   GOLDEN GLOW
   رنگ‌ها عین نسخه فعلی
   ========================================================= */

.hero-glow[b-w2nmzbtm49] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}


.hero-glow-1[b-w2nmzbtm49] {
    width: 470px !important;
    height: 470px !important;
    background: radial-gradient( circle, rgba(246, 193, 53, .34) 0%, rgba(232, 166, 25, .20) 35%, rgba(213, 143, 12, .09) 58%, transparent 76% ) !important;
    filter: blur(16px) !important;
    animation: heroGoldenGlow1-b-w2nmzbtm49 6.6s ease-in-out infinite !important;
}


.hero-glow-2[b-w2nmzbtm49] {
    width: 650px !important;
    height: 650px !important;
    background: radial-gradient( circle, rgba(240, 181, 38, .22) 0%, rgba(220, 150, 14, .12) 42%, transparent 73% ) !important;
    filter: blur(24px) !important;
    animation: heroGoldenGlow2-b-w2nmzbtm49 8.5s ease-in-out infinite !important;
}



/* =========================================================
   ALL RINGS
   هر سه حلقه یک اندازه و یک Motion دارند
   ========================================================= */

.hero-ring[b-w2nmzbtm49] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 700px !important;
    height: 700px !important;
    border-radius: 50% !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
    /*
       رنگ طلایی عین نسخه فعلی
    */
    border: 2px solid rgba(218, 157, 21, .72) !important;
    box-shadow: 0 0 14px rgba(224, 163, 29, .22), 0 0 34px rgba(224, 163, 29, .10), inset 0 0 14px rgba(255, 225, 137, .13) !important;
    animation: heroInfiniteGoldWave-b-w2nmzbtm49 6.6s linear infinite !important;
}



/* =========================================================
   FIXED PHASE

   6.6 / 3 = 2.2s

   بنابراین سه موج همیشه با فاصله زمانی کاملاً ثابت
   در جریان هستند.
   ========================================================= */

.hero-ring-1[b-w2nmzbtm49] {
    animation-delay: 0s !important;
}


.hero-ring-2[b-w2nmzbtm49] {
    animation-delay: -2.2s !important;
    border-color: rgba(224, 166, 30, .68) !important;
}


.hero-ring-3[b-w2nmzbtm49] {
    animation-delay: -4.4s !important;
    border-color: rgba(211, 145, 12, .62) !important;
}



/* =========================================================
   GOLD HIGHLIGHT
   رنگ‌ها و Gradient عین نسخه فعلی
   ========================================================= */

.hero-ring[b-w2nmzbtm49]::before {
    content: "" !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    background: conic-gradient( from 0deg, rgba(230, 169, 30, .34) 0deg, rgba(249, 202, 74, .70) 80deg, rgba(255, 232, 145, .92) 145deg, rgba(238, 180, 38, .62) 220deg, rgba(215, 146, 13, .36) 300deg, rgba(230, 169, 30, .34) 360deg ) !important;
    -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px) ) !important;
    mask: radial-gradient( farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px) ) !important;
    pointer-events: none !important;
}



/* =========================================================
   MAIN WAVE

   تغییر اصلی فاصله حلقه‌ها اینجاست.

   قبلاً:
       .045  →  1.12

   حالا:
       .045  →  .96

   چون سه حلقه همچنان با فاصله زمانی 2.2s حرکت می‌کنند،
   Loop کاملاً یکنواخت می‌ماند ولی فاصله فیزیکی حلقه‌ها
   کمتر می‌شود.
   ========================================================= */

@keyframes heroInfiniteGoldWave-b-w2nmzbtm49 {
    /* -------------------------
       مرکز
       ------------------------- */

    0% {
        transform: translate(-50%, -50%) scale(.045);
        opacity: 0;
    }
    /* -------------------------
       ظاهر شدن سریع
       ------------------------- */

    5% {
        opacity: .30;
    }


    10% {
        opacity: .82;
    }


    16% {
        opacity: 1;
    }
    /* -------------------------
       حرکت اصلی
       ------------------------- */

    30% {
        opacity: 1;
    }


    50% {
        opacity: .98;
    }


    68% {
        opacity: .94;
    }
    /*
       حلقه تقریباً تا انتهای مسیر
       واضح باقی می‌ماند.
    */
    80% {
        opacity: .84;
    }
    /* -------------------------
       Fade دیرهنگام
       ------------------------- */

    88% {
        opacity: .48;
    }


    94% {
        opacity: .18;
    }
    /* -------------------------
       پایان موج
       ------------------------- */

    100% {
        transform: translate(-50%, -50%) scale(.96);
        opacity: 0;
    }
}



/* =========================================================
   GOLD GLOW MOTION
   بدون تغییر نسبت به نسخه فعلی
   ========================================================= */

@keyframes heroGoldenGlow1-b-w2nmzbtm49 {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.94);
        opacity: .62;
    }


    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: .90;
    }
}


@keyframes heroGoldenGlow2-b-w2nmzbtm49 {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.96);
        opacity: .42;
    }


    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: .68;
    }
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

    .hero-circles-bg[b-w2nmzbtm49] {
        left: 50% !important;
    }


    .hero-ring[b-w2nmzbtm49] {
        width: 620px !important;
        height: 620px !important;
    }


    .hero-glow-1[b-w2nmzbtm49] {
        width: 430px !important;
        height: 430px !important;
    }


    .hero-glow-2[b-w2nmzbtm49] {
        width: 570px !important;
        height: 570px !important;
    }
}



/* =========================================================
   MOBILE HERO BOUNDARY

   قاب موبایل Hero در CSS اصلی:
       inset: 10px 8px 6px
       radius: 28px
   ========================================================= */

@media (max-width: 680px) {

    .hero[b-w2nmzbtm49] {
        clip-path: inset( 10px 8px 6px 8px round 28px ) !important;
    }
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .hero-circles-bg[b-w2nmzbtm49] {
        left: 50% !important;
    }


    .hero-ring[b-w2nmzbtm49] {
        width: 450px !important;
        height: 450px !important;
    }


    .hero-glow-1[b-w2nmzbtm49] {
        width: 320px !important;
        height: 320px !important;
    }


    .hero-glow-2[b-w2nmzbtm49] {
        width: 420px !important;
        height: 420px !important;
    }
}



/* =========================================================
   OVERRIDE PROJECT REDUCED-MOTION RULE
   فقط همین Motion زنده می‌ماند
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-page .hero-ring[b-w2nmzbtm49] {
        animation: heroInfiniteGoldWave-b-w2nmzbtm49 6.6s linear infinite !important;
    }


    .home-page .hero-ring-1[b-w2nmzbtm49] {
        animation-delay: 0s !important;
    }


    .home-page .hero-ring-2[b-w2nmzbtm49] {
        animation-delay: -2.2s !important;
    }


    .home-page .hero-ring-3[b-w2nmzbtm49] {
        animation-delay: -4.4s !important;
    }


    .home-page .hero-glow-1[b-w2nmzbtm49] {
        animation: heroGoldenGlow1-b-w2nmzbtm49 6.6s ease-in-out infinite !important;
    }


    .home-page .hero-glow-2[b-w2nmzbtm49] {
        animation: heroGoldenGlow2-b-w2nmzbtm49 8.5s ease-in-out infinite !important;
    }
}



/* HERO METRICS — LEFT COLUMN RTL */

.container.hero-metrics > .hero-metric-card > .hero-metric-notes[b-w2nmzbtm49] {
    direction: rtl !important;
    text-align: right !important;
}

    .container.hero-metrics > .hero-metric-card > .hero-metric-notes span[b-w2nmzbtm49] {
        direction: rtl !important;
        text-align: right !important;
    }


/* HERO — MORE SPACE BELOW METRIC CARDS */

.hero[b-w2nmzbtm49] {
    padding-bottom: 64px !important;
}


/* =========================================================
   HERO METRIC CARDS — PREMIUM GOLD HOVER
   ========================================================= */


/* Transition پایه */
.container.hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
    transition: transform .32s cubic-bezier(.22,.8,.28,1), box-shadow .32s ease, border-color .32s ease !important;
}


    /* کارت هنگام Hover */
    .container.hero-metrics > .hero-metric-card:hover[b-w2nmzbtm49] {
        transform: translateY(-6px) scale(1.015) !important;
        border-color: rgba(166, 121, 24, .72) !important;
        box-shadow: 0 18px 34px rgba(99, 73, 19, .16), 0 6px 16px rgba(184, 137, 29, .10), inset 0 1px 0 rgba(255,255,255,.72) !important;
        z-index: 10 !important;
    }


    /* =========================================================
   RIGHT SIDE
   بخش آیکون + عنوان
   ========================================================= */

    .container.hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49] {
        position: relative !important;
        isolation: isolate !important;
        transition: box-shadow .32s ease, filter .32s ease !important;
        overflow: hidden !important;
    }


    /* کمی عمق بیشتر هنگام Hover */
    .container.hero-metrics > .hero-metric-card:hover > .hero-metric-main[b-w2nmzbtm49] {
        filter: brightness(1.035) saturate(1.08) !important;
        box-shadow: inset 12px 0 28px rgba(255, 227, 151, .12) !important;
    }


    /* =========================================================
   MOVING GOLD LIGHT
   نور طلایی که روی بخش اصلی رد می‌شود
   ========================================================= */

    .container.hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49]::after {
        content: "" !important;
        position: absolute !important;
        top: -40% !important;
        bottom: -40% !important;
        left: -55% !important;
        width: 34% !important;
        z-index: -1 !important;
        pointer-events: none !important;
        background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.02) 25%, rgba(255,238,183,.32) 50%, rgba(255,255,255,.03) 72%, transparent 100% ) !important;
        transform: skewX(-18deg) translateX(0);
        opacity: 0 !important;
    }


    /* فقط موقع Hover حرکت کند */
    .container.hero-metrics > .hero-metric-card:hover > .hero-metric-main[b-w2nmzbtm49]::after {
        animation: heroMetricGoldSweep-b-w2nmzbtm49 .85s cubic-bezier(.2,.72,.3,1) forwards !important;
    }


@keyframes heroMetricGoldSweep-b-w2nmzbtm49 {

    0% {
        left: -55%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: .85;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}



/* =========================================================
   ICON
   ========================================================= */

.container.hero-metrics .hero-metric-icon[b-w2nmzbtm49] {
    transition: transform .32s cubic-bezier(.22,.8,.28,1), box-shadow .32s ease, filter .32s ease !important;
}


.container.hero-metrics > .hero-metric-card:hover
.hero-metric-icon[b-w2nmzbtm49] {
    transform: translateY(-2px) scale(1.08) rotate(-3deg) !important;
    filter: brightness(1.06) saturate(1.12) !important;
    box-shadow: 0 8px 18px rgba(124, 91, 24, .15), 0 0 0 4px rgba(222, 174, 53, .08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}


/* SVG داخل آیکون */
.container.hero-metrics .hero-metric-icon svg[b-w2nmzbtm49] {
    transition: transform .32s cubic-bezier(.22,.8,.28,1) !important;
}


.container.hero-metrics > .hero-metric-card:hover
.hero-metric-icon svg[b-w2nmzbtm49] {
    transform: scale(1.08) !important;
}



/* =========================================================
   MAIN TEXT
   ========================================================= */

.container.hero-metrics
.hero-metric-copy[b-w2nmzbtm49] {
    transition: transform .32s ease !important;
}


.container.hero-metrics > .hero-metric-card:hover
.hero-metric-copy[b-w2nmzbtm49] {
    transform: translateX(-2px) !important;
}



/* =========================================================
   LEFT NOTES
   ========================================================= */

.container.hero-metrics
.hero-metric-notes span[b-w2nmzbtm49] {
    transition: transform .25s ease, filter .25s ease !important;
}


.container.hero-metrics > .hero-metric-card:hover
.hero-metric-notes span[b-w2nmzbtm49] {
    transform: translateX(-3px) !important;
    filter: brightness(1.08) saturate(1.08) !important;
}


    /* کمی stagger برای سه خط */
    .container.hero-metrics > .hero-metric-card:hover
    .hero-metric-notes span:nth-child(2)[b-w2nmzbtm49] {
        transition-delay: .035s !important;
    }


    .container.hero-metrics > .hero-metric-card:hover
    .hero-metric-notes span:nth-child(3)[b-w2nmzbtm49] {
        transition-delay: .07s !important;
    }



/* =========================================================
   BOTTOM GOLD LINE
   ========================================================= */

.container.hero-metrics > .hero-metric-card[b-w2nmzbtm49]::after {
    transition: opacity .3s ease, box-shadow .3s ease !important;
}


.container.hero-metrics > .hero-metric-card:hover[b-w2nmzbtm49]::after {
    opacity: 1 !important;
    box-shadow: 0 -2px 10px rgba(214, 160, 35, .28), 0 -5px 20px rgba(214, 160, 35, .10) !important;
}



/* =========================================================
   ACCESSIBILITY / TOUCH
   ========================================================= */

@media (hover: none) {

    .container.hero-metrics > .hero-metric-card:hover[b-w2nmzbtm49] {
        transform: none !important;
    }
}


/* HERO EYEBROW — POSITION + BROWN DOT */

/* لیبل کمی بالاتر */
.hero__copy .eyebrow[b-w2nmzbtm49] {
    position: relative !important;
    top: -28px !important;
}

    /* دایره داخل لیبل از سبز به قهوه‌ای */
    .hero__copy .eyebrow span[b-w2nmzbtm49] {
        background: #8a6730 !important;
        box-shadow: 0 0 0 5px rgba(138, 103, 48, .14) !important;
    }


/* HERO TITLE SIDE LINE — REMOVE */

.hero__copy[b-w2nmzbtm49]::before {
    content: none !important;
    display: none !important;
}








/* =========================================================
   LANDING FEATURES — REDESIGNED
   ========================================================= */

/* =========================================================
   LANDING FEATURES — WIDTH FIX
   هم‌عرض با Hero و سایر بخش‌های اصلی
   ========================================================= */

.landing-features[b-w2nmzbtm49] {
    position: relative;
    width: min(1240px, calc(100% - 42px)) !important;
    max-width: 1240px !important;
    margin: 44px auto 0 !important;
    padding: 34px 0 14px !important;
    box-sizing: border-box !important;
}

.landing-features__head[b-w2nmzbtm49] {
    max-width: 900px;
    margin: 0 auto 24px;
    text-align: center;
}

.landing-features__eyebrow[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(205, 163, 71, .45);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,244,225,.92));
    color: #bb8b18;
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 14px;
    box-shadow: 0 10px 25px rgba(86, 63, 14, .06);
}

.landing-features__head h2[b-w2nmzbtm49] {
    margin: 0 0 10px;
    color: #221d18;
    font-size: clamp(1.9rem, 2.7vw, 3rem);
    line-height: 1.25;
    font-weight: 900;
}

.landing-features__head p[b-w2nmzbtm49] {
    margin: 0 auto;
    max-width: 780px;
    color: #6e6252;
    font-size: 1rem;
    line-height: 2;
}

.landing-features__grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-card[b-w2nmzbtm49] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 20px;
    border-radius: 28px;
    border: 1px solid rgba(155, 125, 48, .24);
    background: radial-gradient(circle at top right, rgb(255 216 111 / 20%), #e7dbbe9e 34%), linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgb(183 171 138 / 98%) 100%);
    box-shadow: 0 18px 38px rgba(87, 64, 22, .08), inset 0 1px 0 rgba(255,255,255,.75);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

    .feature-card[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset-inline: 18px;
        bottom: 0;
        height: 3px;
        border-radius: 999px 999px 0 0;
        background: linear-gradient(90deg, #eac24f 0%, #d79a12 100%);
        opacity: .92;
    }

    .feature-card:hover[b-w2nmzbtm49] {
        transform: translateY(-6px);
        border-color: rgba(176, 133, 31, .42);
        box-shadow: 0 24px 44px rgba(87, 64, 22, .13), inset 0 1px 0 rgba(255,255,255,.8);
    }

.feature-card__top[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.feature-card__icon[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(211, 175, 90, .45);
    background: linear-gradient(180deg, #cbab5c 0%, #fbe4a0 100%);
    color: #4b4027;
    font-size: 1.85rem;
    font-weight: 900;

}

.feature-card__titles[b-w2nmzbtm49] {
    min-width: 0;
}

.feature-card__kicker[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 5px;
    color: #9a8b73;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.feature-card__titles h3[b-w2nmzbtm49] {
    margin: 0 0 8px;
    color: #211d18;
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.3;
}

.feature-card__titles p[b-w2nmzbtm49] {
    margin: 0;
    color: #6f6352;
    font-size: .95rem;
    line-height: 1.9;
}

.feature-card__body[b-w2nmzbtm49] {
    margin-top: 8px;
    margin-bottom: 16px;
    flex: 1;
    display: flex;
    align-items: center;
}

.feature-card__foot[b-w2nmzbtm49] {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgb(111 91 44 / 43%);
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,248,242,.96));
}

    .feature-card__foot strong[b-w2nmzbtm49] {
        color: #6f8c44;
        font-size: 1rem;
        font-weight: 900;
    }

    .feature-card__foot span[b-w2nmzbtm49] {
        color: #5e5a54;
        font-size: .9rem;
        line-height: 1.75;
    }

/* =========================================================
   VISUAL BLOCKS
   ========================================================= */

.feature-tags[b-w2nmzbtm49] {
    display: grid;
    width: 100%;
    gap: 10px;
}

.feature-tags--2col[b-w2nmzbtm49] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-tags span[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 16px;
    border: 1px solid rgb(111 91 44 / 43%);
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,244,231,.95));
    color: #6e6558;
    font-size: .9rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.feature-stats[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 12px;
}

.feature-stat[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 98px;
    border-radius: 18px;
    border: 1px solid rgb(111 91 44 / 43%);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,238,.96));
    text-align: center;
}

    .feature-stat strong[b-w2nmzbtm49] {
        color: #5f9147;
        font-size: 2rem;
        font-weight: 900;
        line-height: 1;
    }

    .feature-stat span[b-w2nmzbtm49] {
        margin-top: 8px;
        color: #6e665b;
        font-size: .88rem;
        font-weight: 700;
    }

.feature-terms[b-w2nmzbtm49] {
    display: grid;
    width: 100%;
    gap: 10px;
}

    .feature-terms > div[b-w2nmzbtm49] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        padding: 0 14px;
        border-radius: 16px;
        border: 1px solid rgb(111 91 44 / 43%);
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,245,234,.95));
    }

        .feature-terms > div span[b-w2nmzbtm49] {
            color: #655b4e;
            font-size: .92rem;
            font-weight: 700;
        }

        .feature-terms > div b[b-w2nmzbtm49] {
            color: #d29a11;
            font-size: .82rem;
            font-weight: 900;
        }

.feature-language-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
}

    .feature-language-grid span[b-w2nmzbtm49] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        border-radius: 16px;
        border: 1px solid rgb(111 91 44 / 43%);
        background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(251,247,238,.95));
        color: #5b554b;
        font-weight: 900;
    }

        .feature-language-grid span b[b-w2nmzbtm49] {
            font-size: .95rem;
            color: #2d271f;
        }

        .feature-language-grid span small[b-w2nmzbtm49] {
            color: #d09a14;
            font-size: .9rem;
            font-weight: 900;
        }

.feature-levels[b-w2nmzbtm49] {
    display: grid;
    width: 100%;
    gap: 10px;
}

    .feature-levels > div[b-w2nmzbtm49] {
        display: grid;
        grid-template-columns: 1fr 34px;
        align-items: center;
        gap: 12px;
        min-height: 50px;
        padding: 0 14px;
        border-radius: 16px;
        border: 1px solid rgb(111 91 44 / 43%);
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,245,234,.95));
    }

        .feature-levels > div span[b-w2nmzbtm49] {
            color: #60574b;
            font-size: .92rem;
            font-weight: 800;
        }

        .feature-levels > div i[b-w2nmzbtm49] {
            width: 18px;
            height: 18px;
            border-radius: 8px;
            background: linear-gradient(180deg, #f2d06c 0%, #d59b16 100%);
            box-shadow: 0 4px 10px rgba(181, 126, 16, .18);
        }

.feature-pills[b-w2nmzbtm49] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

    .feature-pills span[b-w2nmzbtm49] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgb(111 91 44 / 43%);
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,246,236,.96));
        color: #9b7920;
        font-size: .84rem;
        font-weight: 900;
    }

/* =========================================================
   CARD COLOR HINTS
   ========================================================= */

.feature-card--qa .feature-card__foot strong[b-w2nmzbtm49] {
    color: #5f9147;
}

.feature-card--memory .feature-card__foot strong[b-w2nmzbtm49] {
    color: #6e8750;
}

.feature-card--glossary .feature-card__foot strong[b-w2nmzbtm49] {
    color: #9a7618;
}

.feature-card--rtl .feature-card__foot strong[b-w2nmzbtm49] {
    color: #7d6a33;
}

.feature-card--levels .feature-card__foot strong[b-w2nmzbtm49] {
    color: #8b6c14;
}

.feature-card--input .feature-card__foot strong[b-w2nmzbtm49] {
    color: #a17a14;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .landing-features__grid[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .landing-features[b-w2nmzbtm49] {
        margin-top: 28px;
        padding-top: 24px;
    }

    .landing-features__head[b-w2nmzbtm49] {
        margin-bottom: 18px;
    }

        .landing-features__head h2[b-w2nmzbtm49] {
            font-size: 1.6rem;
        }

        .landing-features__head p[b-w2nmzbtm49] {
            font-size: .92rem;
            line-height: 1.9;
        }

    .landing-features__grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .feature-card[b-w2nmzbtm49] {
        min-height: auto;
        padding: 18px;
        border-radius: 22px;
    }

    .feature-card__top[b-w2nmzbtm49] {
        grid-template-columns: 52px 1fr;
    }

    .feature-card__icon[b-w2nmzbtm49] {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.1rem;
    }

    .feature-card__titles h3[b-w2nmzbtm49] {
        font-size: 1.1rem;
    }

    .feature-card__titles p[b-w2nmzbtm49],
    .feature-card__foot span[b-w2nmzbtm49],
    .feature-terms > div span[b-w2nmzbtm49],
    .feature-levels > div span[b-w2nmzbtm49] {
        font-size: .88rem;
    }

    .feature-stat strong[b-w2nmzbtm49] {
        font-size: 1.7rem;
    }
}

html[data-theme="dark"] .landing-features__eyebrow[b-w2nmzbtm49] {
    background: linear-gradient(180deg, rgba(45,36,22,.94), rgba(35,30,23,.95));
    border-color: rgba(215, 175, 82, .35);
    color: #efc455;
    box-shadow: 0 12px 25px rgba(0,0,0,.25);
}

html[data-theme="dark"] .landing-features__head h2[b-w2nmzbtm49] {
    color: #f4ede2;
}

html[data-theme="dark"] .landing-features__head p[b-w2nmzbtm49] {
    color: #cabda8;
}

html[data-theme="dark"] .feature-card[b-w2nmzbtm49] {
    border-color: rgba(214, 173, 80, .18);
    background: radial-gradient(circle at top right, rgba(223, 178, 73, .10), transparent 34%), linear-gradient(180deg, rgba(34,29,24,.98) 0%, rgba(27,24,21,.98) 100%);
    box-shadow: 0 20px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}

    html[data-theme="dark"] .feature-card:hover[b-w2nmzbtm49] {
        box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    }

html[data-theme="dark"] .feature-card__icon[b-w2nmzbtm49],
html[data-theme="dark"] .feature-card__foot[b-w2nmzbtm49],
html[data-theme="dark"] .feature-tags span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-stat[b-w2nmzbtm49],
html[data-theme="dark"] .feature-terms > div[b-w2nmzbtm49],
html[data-theme="dark"] .feature-language-grid span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-levels > div[b-w2nmzbtm49],
html[data-theme="dark"] .feature-pills span[b-w2nmzbtm49] {
    background: linear-gradient(180deg, rgba(43,37,31,.98), rgba(31,28,24,.98));
    border-color: rgba(214, 173, 80, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

html[data-theme="dark"] .feature-card__titles h3[b-w2nmzbtm49] {
    color: #f5efe4;
}

html[data-theme="dark"] .feature-card__titles p[b-w2nmzbtm49],
html[data-theme="dark"] .feature-card__foot span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-terms > div span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-levels > div span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-stat span[b-w2nmzbtm49] {
    color: #c8bca8;
}

html[data-theme="dark"] .feature-card__kicker[b-w2nmzbtm49] {
    color: #a9997d;
}

html[data-theme="dark"] .feature-language-grid span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-pills span[b-w2nmzbtm49],
html[data-theme="dark"] .feature-terms > div b[b-w2nmzbtm49] {
    color: #f0c34f;
}

    html[data-theme="dark"] .feature-language-grid span b[b-w2nmzbtm49],
    html[data-theme="dark"] .feature-stat strong[b-w2nmzbtm49] {
        color: #f7efe2;
    }



/* =========================================================
   INPUT FORMATS — ICON + LABEL
   ========================================================= */

.feature-pills[b-w2nmzbtm49] {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
}


    /* هر فرمت */
    .feature-pills span[b-w2nmzbtm49] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 92px !important;
        min-height: 86px !important;
        padding: 10px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(186, 157, 91, .30) !important;
        background: linear-gradient( 180deg, rgba(255,255,255,.98), rgba(251,246,236,.96) ) !important;
        box-shadow: 0 7px 16px rgba(83, 61, 18, .05), inset 0 1px 0 rgba(255,255,255,.90) !important;
        overflow: hidden !important;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }


        /* PNG */
        .feature-pills span img[b-w2nmzbtm49] {
            display: block !important;
            width: 50px !important;
            height: 50px !important;
            max-width: 50px !important;
            max-height: 50px !important;
            object-fit: contain !important;
            flex: 0 0 50px !important;
            pointer-events: none !important;
        }


        /* PDF / DOCX / ... */
        .feature-pills span b[b-w2nmzbtm49] {
            margin: 0 !important;
            color: #9b7920 !important;
            font-size: .76rem !important;
            line-height: 1 !important;
            font-weight: 900 !important;
            white-space: nowrap !important;
        }


        /* Hover */
        .feature-pills span:hover[b-w2nmzbtm49] {
            transform: translateY(-4px) !important;
            border-color: rgba(189, 141, 25, .48) !important;
            box-shadow: 0 12px 22px rgba(116, 82, 14, .10), inset 0 1px 0 rgba(255,255,255,.95) !important;
        }


        .feature-pills span img[b-w2nmzbtm49] {
            transition: transform .22s ease !important;
        }


        .feature-pills span:hover img[b-w2nmzbtm49] {
            transform: translateY(-2px) scale(1.08) !important;
        }


/* موبایل */
@media (max-width: 620px) {

    .feature-pills[b-w2nmzbtm49] {
        gap: 6px !important;
    }

        .feature-pills span[b-w2nmzbtm49] {
            min-height: 74px !important;
            padding: 8px 4px !important;
            border-radius: 14px !important;
        }

            .feature-pills span img[b-w2nmzbtm49] {
                width: 30px !important;
                height: 30px !important;
                max-width: 30px !important;
                max-height: 30px !important;
                flex-basis: 30px !important;
            }

            .feature-pills span b[b-w2nmzbtm49] {
                font-size: .66rem !important;
            }
}


/* =========================================================
   WORKFLOW PREMIUM — CLEAN FINAL BASE
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.workflow-premium[b-w2nmzbtm49] {
    position: relative;
    overflow: hidden;
    padding: 90px 0 82px;
    color: #f6efe3;
    background: radial-gradient( 900px 560px at 5% 12%, rgba(224, 170, 39, .12), transparent 67% ), radial-gradient( 800px 560px at 95% 88%, rgba(194, 137, 27, .08), transparent 70% ), linear-gradient( 145deg, #1c1711 0%, #241d15 48%, #18130f 100% );
}


    /* texture */
    .workflow-premium[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .13;
        background-image: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.014) 1px, transparent 1px );
        background-size: 52px 52px;
    }


    /* ambient gold */
    .workflow-premium[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -420px;
        width: 980px;
        height: 740px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient( circle, rgba(220,163,28,.085), transparent 68% );
        filter: blur(30px);
        pointer-events: none;
    }



.workflow-premium__inner[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min( 1240px, calc(100% - 42px) );
    margin-inline: auto;
}



/* =========================================================
   HEADER
   ========================================================= */

.workflow-premium__header[b-w2nmzbtm49] {
    width: min(920px, 100%);
    margin-inline: auto;
    margin-bottom: 52px;
    text-align: center;
}



.workflow-premium__eyebrow[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid rgba(223,171,45,.24);
    border-radius: 999px;
    background: rgba(223,171,45,.07);
    color: #edbb3d;
    font-size: .82rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}



    .workflow-premium__eyebrow > span[b-w2nmzbtm49] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e3ab25;
        box-shadow: 0 0 0 5px rgba(227,171,37,.10), 0 0 17px rgba(227,171,37,.30);
    }



.workflow-premium__header h2[b-w2nmzbtm49] {
    max-width: 820px;
    margin: 18px auto 14px;
    color: #f8f0e4;
    font-size: clamp( 2.75rem, 4vw, 4.45rem );
    line-height: 1.14;
    font-weight: 950;
    opacity: 1 !important;
    transform: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 235, 155, 0.15) 44%, rgba(255, 250, 210, 0.95) 50%, rgba(255, 235, 155, 0.15) 56%, transparent 62%, transparent 100%), linear-gradient(115deg, #8b7129 0%, #b19443 22%, #f5d57e 45%, #99791c 68%, #ffd358 100%) !important;
    background-size: 240% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 180% 50%, 0 50%;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: heroGoldLightSweep-b-w2nmzbtm49 4.8s linear infinite !important;
    will-change: background-position;
}



.home-page[dir="rtl"]
.workflow-premium__header h2[b-w2nmzbtm49] {
    letter-spacing: -.015em;
}



.workflow-premium__header > p[b-w2nmzbtm49] {
    max-width: 790px;
    margin-inline: auto;
    color: #b9ac9a;
    font-size: 1.02rem;
    line-height: 2.05;
    font-weight: 600;
}



/* =========================================================
   MINI FLOW
   ========================================================= */

.workflow-premium__mini-flow[b-w2nmzbtm49] {
    width: min(540px, 100%);
    margin: 25px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}



    .workflow-premium__mini-flow span[b-w2nmzbtm49] {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        border: 1px solid rgba(224,174,48,.24);
        background: linear-gradient( 145deg, rgba(224,174,48,.12), rgba(224,174,48,.045) );
        color: #e9b73c;
        font-size: .68rem;
        font-weight: 950;
    }



    .workflow-premium__mini-flow i[b-w2nmzbtm49] {
        flex: 1;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(226,176,51,.30), transparent );
    }



.workflow-premium__cta[b-w2nmzbtm49] {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #e7b439;
    font-size: .84rem;
    font-weight: 900;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}



    .workflow-premium__cta:hover[b-w2nmzbtm49] {
        color: #ffd86d;
        transform: translateY(-2px);
    }



/* =========================================================
   TRACK
   ========================================================= */

.workflow-track[b-w2nmzbtm49] {
    position: relative;
    isolation: isolate;
    /*
       جای Rail و Connector
    */
    padding-bottom: 92px;
    overflow: visible;
}



/* =========================================================
   FIVE CARDS
   ========================================================= */

.workflow-cards[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat( 5, minmax(0,1fr) );
    gap: 16px;
}



/* =========================================================
   CARD
   ========================================================= */

.workflow-step[b-w2nmzbtm49] {
    position: relative;
    min-width: 0;
    min-height: 242px;
    padding: 20px 20px 22px;
    overflow: hidden;
    border: 1px solid rgba(225,177,61,.24);
    border-radius: 26px;
    background: radial-gradient(circle at 84% 4%, rgba(225, 175, 48, .14), transparent 38%), radial-gradient(circle at 12% 94%, rgba(225, 175, 48, .055), transparent 34%), linear-gradient(150deg, rgb(119 103 82 / 82%), rgb(85 78 59 / 97%) 48%, rgb(73 65 47 / 99%)); box-shadow: 0 15px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
    /*
       فقط JS این Variable را تغییر می‌دهد.
    */
    transform: translate3d( 0, var(--wf-lift, 0px), 0 );
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}



    .workflow-step:hover[b-w2nmzbtm49] {
        border-color: rgba(235,187,66,.42);
        box-shadow: 0 22px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
    }



/* =========================================================
   CARD TOP
   ========================================================= */

.workflow-step__top[b-w2nmzbtm49] {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 19px;
}



.workflow-step__number[b-w2nmzbtm49] {
    min-width: 66px;
    height: 50px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(227,177,49,.35);
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(226,173,42,.20), rgba(151,105,15,.10) );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 7px 17px rgba(0,0,0,.10);
}



    .workflow-step__number small[b-w2nmzbtm49] {
        color: #a18451;
        font-size: .40rem;
        font-weight: 900;
        letter-spacing: .08em;
    }



    .workflow-step__number strong[b-w2nmzbtm49] {
        color: #f0bd3b;
        font-size: .92rem;
        line-height: 1;
        font-weight: 950;
    }



.workflow-step__icon[b-w2nmzbtm49] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(228,179,55,.32);
    background: radial-gradient( circle at 30% 25%, rgba(255,224,135,.14), transparent 55% ), rgba(225,174,44,.10);
    color: #efbc3a;
    font-size: .60rem;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 18px rgba(0,0,0,.10);
}



.workflow-step__icon--done[b-w2nmzbtm49] {
    font-size: 1rem;
}



/* =========================================================
   TEXT
   ========================================================= */

.workflow-step__content[b-w2nmzbtm49] {
    position: relative;
    z-index: 8;
    min-width: 0;
}



.home-page[dir="rtl"]
.workflow-step__content[b-w2nmzbtm49] {
    direction: rtl;
    text-align: right;
}



.home-page[dir="ltr"]
.workflow-step__content[b-w2nmzbtm49] {
    direction: ltr;
    text-align: left;
}



.workflow-step__label[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 9px;
    color: #d3a535;
    font-size: .59rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .10em;
}



.workflow-step__content h3[b-w2nmzbtm49] {
    margin: 0 0 9px;
    color: #fff0c4;
    font-size: 1.13rem;
    line-height: 1.45;
    font-weight: 950;
}



.workflow-step__content p[b-w2nmzbtm49] {
    margin: 0;
    color: #c2b5a3;
    font-size: .76rem;
    line-height: 1.95;
    font-weight: 600;
}



/* =========================================================
   SVG MOTION
   ========================================================= */

.workflow-motion-svg[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
}



/* =========================================================
   STATIC RAIL
   ========================================================= */

.wf-rail-base[b-w2nmzbtm49] {
    fill: none;
    stroke: rgba(228,177,54,.36);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}



/* =========================================================
   STATIC CONNECTOR
   ========================================================= */

.wf-connector-bases line[b-w2nmzbtm49] {
    stroke: rgba(221,164,34,.25);
    stroke-width: 1.55;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}



/* =========================================================
   INTERSECTION NODE
   ========================================================= */

.wf-node-outer[b-w2nmzbtm49] {
    fill: #21180e;
    stroke: rgba(236,186,62,.78);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}



.wf-node-core[b-w2nmzbtm49] {
    fill: #e0aa28;
    stroke: rgba(255,235,173,.72);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}



.wf-node-halo[b-w2nmzbtm49] {
    fill: rgba(241,191,70,.24);
    opacity: 0;
}



/* =========================================================
   MEASURE PATHS
   ========================================================= */

.wf-measure-group[b-w2nmzbtm49] {
    opacity: 0;
    pointer-events: none;
}



    .wf-measure-group path[b-w2nmzbtm49] {
        fill: none;
        stroke: none;
    }



/* =========================================================
   CONNECTOR GOLD TRAIL
   ========================================================= */

.wf-active-connector[b-w2nmzbtm49] {
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}



.wf-active-connector--glow[b-w2nmzbtm49] {
    stroke: #e9b43a;
    stroke-width: 7;
}



.wf-active-connector--core[b-w2nmzbtm49] {
    stroke: #efbb44;
    stroke-width: 2.25;
}



/* =========================================================
   BORDER GOLD TRAIL
   ========================================================= */

.wf-active-border[b-w2nmzbtm49] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}



.wf-active-border--glow[b-w2nmzbtm49] {
    stroke: #eab63a;
    stroke-width: 6.5;
}



.wf-active-border--core[b-w2nmzbtm49] {
    stroke: #e7ad2c;
    stroke-width: 2.25;
}



/* =========================================================
   THE ONE LIGHT
   ========================================================= */

.wf-light-head[b-w2nmzbtm49] {
    opacity: 0;
    will-change: transform, opacity;
}



/*
   نور پهن Fade
   */
/* =========================================================
   MOVING LIGHT — PURE FADE GLOW
   فقط ظاهر نور؛ Motion دست‌نخورده
   ========================================================= */

.wf-light-head[b-w2nmzbtm49] {
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}


/* هاله‌ی خارجی */
.wf-light-head__fade-wide[b-w2nmzbtm49] {
    opacity: .74;
    pointer-events: none;
}


/* نور اصلی */
.wf-light-head__fade-soft[b-w2nmzbtm49] {
    opacity: .94;
    pointer-events: none;
}


/* مرکز نرم، بدون خط سفید تیز */
.wf-light-head__fade-center[b-w2nmzbtm49] {
    opacity: .72;
    pointer-events: none;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .workflow-cards[b-w2nmzbtm49] {
        grid-template-columns: repeat( 2, minmax(0,1fr) );
    }


    .workflow-track[b-w2nmzbtm49] {
        padding-bottom: 0;
    }


    /*
       Rail افقی فقط برای 5 کارت تک‌ردیفه.
    */
    .workflow-motion-svg[b-w2nmzbtm49] {
        display: none;
    }


    .workflow-step[b-w2nmzbtm49] {
        transform: none !important;
    }
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .workflow-premium[b-w2nmzbtm49] {
        padding: 70px 0 64px;
    }


    .workflow-premium__inner[b-w2nmzbtm49] {
        width: min( calc(100% - 24px), 1240px );
    }


    .workflow-premium__header[b-w2nmzbtm49] {
        margin-bottom: 36px;
    }


        .workflow-premium__header h2[b-w2nmzbtm49] {
            font-size: clamp( 2.15rem, 10vw, 3.2rem );
        }


        .workflow-premium__header > p[b-w2nmzbtm49] {
            font-size: .91rem;
        }


    .workflow-cards[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }


    .workflow-step[b-w2nmzbtm49] {
        min-height: 190px;
        padding: 18px;
        border-radius: 21px;
    }


    .workflow-step__content h3[b-w2nmzbtm49] {
        font-size: 1.04rem;
    }


    .workflow-step__content p[b-w2nmzbtm49] {
        font-size: .70rem;
    }


    .workflow-premium__mini-flow[b-w2nmzbtm49] {
        gap: 5px;
    }


        .workflow-premium__mini-flow span[b-w2nmzbtm49] {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
            border-radius: 10px;
            font-size: .54rem;
        }
}




/* =========================================================
   WORKFLOW TRACK — REQUIRED FOR SVG GEOMETRY
   ========================================================= */

.workflow-track[b-w2nmzbtm49] {
    position: relative !important;
    isolation: isolate !important;
    /*
       فضای مخصوص Rail و Nodeهای زیر کارت‌ها
    */
    padding-bottom: 92px !important;
    overflow: visible !important;
}


/* =========================================================
   WORKFLOW CARDS LAYER
   ========================================================= */

.workflow-cards[b-w2nmzbtm49] {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat( 5, minmax(0, 1fr) ) !important;
    gap: 16px !important;
}


/* =========================================================
   WORKFLOW SVG LAYER
   ========================================================= */

.workflow-motion-svg[b-w2nmzbtm49] {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
    overflow: visible !important;
    pointer-events: none !important;
}


/* حذف کامل ردیف 01 تا 05 بالای Workflow */
.workflow-premium__mini-flow[b-w2nmzbtm49] {
    display: none !important;
}

.home-page a[b-w2nmzbtm49] {
    display: none !important;
}


/* فاصله بیشتر بین بخش قبلی و Workflow */
.workflow-premium[b-w2nmzbtm49] {
    margin-top: 36px !important;
}

@media (max-width: 720px) {
    .workflow-premium[b-w2nmzbtm49] {
        margin-top: 24px !important;
    }
}




/* =========================================================
   DOCUMENT PRESERVATION
   ========================================================= */

.preserve-section[b-w2nmzbtm49] {
    position: relative;
    width: min( 1240px, calc(100% - 42px) );
    margin: 58px auto 0;
    overflow: hidden;
    border: 1px solid rgba(128, 93, 34, .16);
    border-radius: 34px;
    background: radial-gradient( 680px 560px at 0% 0%, rgba(247, 192, 47, .17), transparent 68% ), linear-gradient( 135deg, #fffaf0 0%, #fffefa 44%, #f8f6f1 100% );
    box-shadow: 0 26px 65px rgba(72, 49, 15, .09), inset 0 1px 0 rgba(255,255,255,.9);
}



    .preserve-section[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        right: -220px;
        bottom: -290px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(213, 159, 35, .11), transparent 67% );
        filter: blur(28px);
        pointer-events: none;
    }



.preserve-section__inner[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: center;
    gap: 58px;
    padding: 58px 54px;
    direction: ltr;
}



/* =========================================================
   COPY
   ========================================================= */

.preserve-copy[b-w2nmzbtm49] {
    direction: rtl;
    text-align: right;
}



.home-page[dir="ltr"] .preserve-copy[b-w2nmzbtm49] {
    direction: ltr;
    text-align: left;
}



.preserve-copy__eyebrow[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(211, 154, 22, .22);
    border-radius: 999px;
    background: rgba(232, 174, 35, .08);
    color: #af7810;
    font-size: .72rem;
    font-weight: 950;
}



    .preserve-copy__eyebrow > span[b-w2nmzbtm49] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e7aa1e;
        box-shadow: 0 0 0 5px rgba(231,170,30,.10);
    }



.preserve-copy h2[b-w2nmzbtm49] {
    margin: 20px 0 16px;
    color: #271f17;
    font-size: clamp( 2.4rem, 3.25vw, 3.75rem );
    line-height: 1.34;
    letter-spacing: -.028em;
    font-weight: 950;
}



.preserve-copy__lead[b-w2nmzbtm49] {
    margin: 0;
    max-width: 530px;
    color: #75695c;
    font-size: .96rem;
    line-height: 2.05;
    font-weight: 600;
}



/* =========================================================
   POINTS
   ========================================================= */

.preserve-points[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0,1fr) );
    gap: 11px;
    margin-top: 28px;
}



    .preserve-points article[b-w2nmzbtm49] {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 78px;
        padding: 12px 13px;
        border: 1px solid rgba(97, 74, 42, .13);
        border-radius: 18px;
        background: rgba(255,255,255,.65);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }



        .preserve-points article:hover[b-w2nmzbtm49] {
            transform: translateY(-3px);
            border-color: rgba(212,158,32,.30);
            box-shadow: 0 12px 26px rgba(80,57,25,.07);
        }



        .preserve-points article > span[b-w2nmzbtm49] {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            border: 1px solid rgba(211,156,27,.22);
            background: linear-gradient( 145deg, rgba(236,181,45,.18), rgba(236,181,45,.06) );
            color: #b67d0c;
            font-size: .62rem;
            font-weight: 950;
        }



    .preserve-points strong[b-w2nmzbtm49] {
        display: block;
        color: #49392b;
        font-size: .78rem;
        line-height: 1.45;
        font-weight: 950;
    }



    .preserve-points p[b-w2nmzbtm49] {
        margin: 3px 0 0;
        color: #998b79;
        font-size: .61rem;
        line-height: 1.6;
        font-weight: 600;
    }



/* =========================================================
   STATEMENT
   ========================================================= */

.preserve-copy__statement[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid rgba(211,156,28,.20);
    border-radius: 18px;
    background: linear-gradient( 135deg, rgba(237,181,42,.10), rgba(255,255,255,.48) );
}



    .preserve-copy__statement > span[b-w2nmzbtm49] {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #e7ac25;
        color: white;
        font-size: .75rem;
        font-weight: 950;
    }



    .preserve-copy__statement strong[b-w2nmzbtm49] {
        color: #55412c;
        font-size: .73rem;
        font-weight: 950;
    }



    .preserve-copy__statement p[b-w2nmzbtm49] {
        margin: 2px 0 0;
        color: #8b7a66;
        font-size: .62rem;
    }



/* =========================================================
   VISUAL
   ========================================================= */

.preserve-visual[b-w2nmzbtm49] {
    min-width: 0;
    direction: ltr;
}



.document-studio[b-w2nmzbtm49] {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(92,70,39,.16);
    border-radius: 28px;
    background: linear-gradient( 145deg, #fff, #f5f1e9 );
    box-shadow: 0 28px 58px rgba(68,47,17,.15), inset 0 1px 0 rgba(255,255,255,.96);
}



/* =========================================================
   TOP BAR
   ========================================================= */

.document-studio__topbar[b-w2nmzbtm49] {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px 0 3px;
}



.document-studio__title[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 10px;
}



    .document-studio__title > span[b-w2nmzbtm49] {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #e7aa1e;
        box-shadow: 0 0 0 5px rgba(231,170,30,.10), 0 0 15px rgba(231,170,30,.20);
    }



    .document-studio__title strong[b-w2nmzbtm49] {
        display: block;
        color: #40362a;
        font-size: .69rem;
        font-weight: 950;
    }



    .document-studio__title small[b-w2nmzbtm49] {
        display: block;
        margin-top: 1px;
        color: #aaa093;
        font-size: .48rem;
    }



.document-studio__state[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 29px;
    padding: 0 11px;
    border-radius: 999px;
    background: #272017;
    color: #fff1ca;
    font-size: .51rem;
    font-weight: 850;
}



    .document-studio__state > span[b-w2nmzbtm49] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #e9b12c;
        box-shadow: 0 0 0 4px rgba(233,177,44,.11);
    }



/* =========================================================
   CANVAS
   ========================================================= */

.document-studio__canvas[b-w2nmzbtm49] {
    position: relative;
    height: 470px;
    overflow: hidden;
    border: 1px solid rgba(94,75,48,.15);
    border-radius: 22px;
    background: linear-gradient( 145deg, #ece7dd, #f7f4ed );
}



.document-studio__grid[b-w2nmzbtm49] {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient( rgba(85,65,38,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(85,65,38,.035) 1px, transparent 1px );
    background-size: 34px 34px;
}



/* =========================================================
   DOCUMENT PAGE
   ========================================================= */

.document-page[b-w2nmzbtm49] {
    position: absolute;
    left: 29px;
    top: 29px;
    width: 67%;
    height: 410px;
    overflow: hidden;
    border: 1px solid rgba(96,78,52,.17);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 24px 45px rgba(66,48,23,.15);
}



.document-page__header[b-w2nmzbtm49] {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #ece8e1;
}



    .document-page__header > div[b-w2nmzbtm49] {
        display: flex;
        gap: 5px;
    }



    .document-page__header span[b-w2nmzbtm49] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d7d2cb;
    }



        .document-page__header span:first-child[b-w2nmzbtm49] {
            background: #e7ae28;
        }



    .document-page__header i[b-w2nmzbtm49] {
        width: 78px;
        height: 5px;
        border-radius: 999px;
        background: #e6e3de;
    }



.document-page__body[b-w2nmzbtm49] {
    position: relative;
    height: calc(100% - 42px);
    padding: 26px;
}



/* =========================================================
   DOCUMENT ELEMENTS
   ========================================================= */

.doc-text span[b-w2nmzbtm49] {
    display: block;
    height: 6px;
    margin-bottom: 9px;
    border-radius: 999px;
    background: #e7e4df;
}



.doc-text--top[b-w2nmzbtm49] {
    width: 47%;
    margin-left: auto;
}



    .doc-text--top span:nth-child(2)[b-w2nmzbtm49] {
        width: 88%;
    }



    .doc-text--top span:nth-child(3)[b-w2nmzbtm49] {
        width: 67%;
    }



.doc-chart[b-w2nmzbtm49] {
    position: absolute;
    left: 26px;
    top: 27px;
    width: 39%;
    height: 120px;
    border: 1px solid #e3dfd8;
    border-radius: 13px;
    background: #fdfcf9;
}



.doc-chart__bars[b-w2nmzbtm49] {
    position: absolute;
    left: 19%;
    right: 17%;
    bottom: 15px;
    height: 80px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}



    .doc-chart__bars i[b-w2nmzbtm49] {
        flex: 1;
        border-radius: 5px 5px 2px 2px;
        background: linear-gradient( 180deg, #ffda75, #e8a81e );
    }



        .doc-chart__bars i:nth-child(1)[b-w2nmzbtm49] {
            height: 78%;
        }



        .doc-chart__bars i:nth-child(2)[b-w2nmzbtm49] {
            height: 46%;
        }



        .doc-chart__bars i:nth-child(3)[b-w2nmzbtm49] {
            height: 64%;
        }



        .doc-chart__bars i:nth-child(4)[b-w2nmzbtm49] {
            height: 36%;
        }



.doc-text--side[b-w2nmzbtm49] {
    position: absolute;
    right: 26px;
    top: 112px;
    width: 45%;
}



    .doc-text--side span:nth-child(2)[b-w2nmzbtm49] {
        width: 92%;
    }



    .doc-text--side span:nth-child(3)[b-w2nmzbtm49] {
        width: 76%;
    }



    .doc-text--side span:nth-child(4)[b-w2nmzbtm49] {
        width: 58%;
    }



.doc-table[b-w2nmzbtm49] {
    position: absolute;
    left: 26px;
    right: 26px;
    top: 183px;
    height: 100px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border: 1px solid #dedad4;
    border-radius: 10px;
    overflow: hidden;
}



    .doc-table span[b-w2nmzbtm49] {
        border-right: 1px solid #e7e3de;
        border-bottom: 1px solid #e7e3de;
    }



.doc-footnote[b-w2nmzbtm49] {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 22px;
    display: flex;
    gap: 11px;
    padding-top: 12px;
    border-top: 1px solid #e0dcd5;
}



    .doc-footnote > i[b-w2nmzbtm49] {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        margin-top: 2px;
        border-radius: 50%;
        background: #e6ab25;
    }



    .doc-footnote div[b-w2nmzbtm49] {
        flex: 1;
    }



    .doc-footnote span[b-w2nmzbtm49] {
        display: block;
        width: 74%;
        height: 4px;
        margin-bottom: 6px;
        border-radius: 99px;
        background: #ebe8e3;
    }



        .doc-footnote span:last-child[b-w2nmzbtm49] {
            width: 48%;
        }



/* =========================================================
   PAGE SCAN
   ========================================================= */

.document-page__scan[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    right: 0;
    top: -70px;
    height: 85px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient( 180deg, transparent, rgba(235,177,39,.04), rgba(241,188,54,.17), rgba(255,224,143,.10), transparent );
    animation: preserveScan-b-w2nmzbtm49 7.5s ease-in-out infinite;
}



/* =========================================================
   STRUCTURE MAP
   ========================================================= */

.structure-map[b-w2nmzbtm49] {
    position: absolute;
    right: 25px;
    top: 69px;
    width: 28%;
    padding: 14px;
    border: 1px solid rgba(102,80,49,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.91);
    box-shadow: 0 18px 34px rgba(66,49,25,.10);
    backdrop-filter: blur(10px);
}



.structure-map__head[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ece7df;
}



    .structure-map__head > span[b-w2nmzbtm49] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e6aa22;
    }



    .structure-map__head strong[b-w2nmzbtm49] {
        display: block;
        color: #4b4032;
        font-size: .57rem;
        font-weight: 950;
    }



    .structure-map__head small[b-w2nmzbtm49] {
        display: block;
        margin-top: 1px;
        color: #aaa092;
        font-size: .43rem;
    }



.structure-map__items[b-w2nmzbtm49] {
    display: grid;
    gap: 8px;
    margin-top: 11px;
}



    .structure-map__items > div[b-w2nmzbtm49] {
        display: grid;
        grid-template-columns: 23px 1fr 26px;
        align-items: center;
        gap: 7px;
    }



    .structure-map__items span[b-w2nmzbtm49] {
        width: 23px;
        height: 23px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: rgba(230,171,35,.11);
        color: #ad780e;
        font-size: .43rem;
        font-weight: 950;
    }



    .structure-map__items p[b-w2nmzbtm49] {
        margin: 0;
        color: #766a5c;
        font-size: .49rem;
        font-weight: 750;
    }



    .structure-map__items i[b-w2nmzbtm49] {
        height: 4px;
        border-radius: 999px;
        background: linear-gradient( 90deg, #e8ad24 70%, #ece8e1 70% );
    }



/* =========================================================
   FLOATING BADGE
   ========================================================= */

.document-studio__badge[b-w2nmzbtm49] {
    position: absolute;
    right: 38px;
    bottom: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 130px;
    padding: 10px 12px;
    border: 1px solid rgba(222,167,35,.26);
    border-radius: 14px;
    background: #292117;
    box-shadow: 0 15px 30px rgba(55,38,14,.18);
}



    .document-studio__badge > span[b-w2nmzbtm49] {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #e5a91f;
        color: #fff;
        font-size: .62rem;
        font-weight: 950;
    }



    .document-studio__badge small[b-w2nmzbtm49] {
        display: block;
        color: #aa9879;
        font-size: .42rem;
    }



    .document-studio__badge strong[b-w2nmzbtm49] {
        display: block;
        margin-top: 1px;
        color: #fff0c8;
        font-size: .57rem;
        font-weight: 950;
    }



/* =========================================================
   METRICS
   ========================================================= */

.document-studio__metrics[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 61px;
    padding-top: 5px;
    text-align: center;
}



    .document-studio__metrics > div[b-w2nmzbtm49] {
        min-width: 92px;
    }



    .document-studio__metrics small[b-w2nmzbtm49] {
        display: block;
        color: #a19586;
        font-size: .48rem;
    }



    .document-studio__metrics strong[b-w2nmzbtm49] {
        display: block;
        margin-top: 3px;
        color: #554530;
        font-size: .62rem;
        font-weight: 950;
    }



    .document-studio__metrics > span[b-w2nmzbtm49] {
        width: 1px;
        height: 29px;
        background: linear-gradient( transparent, #ddd6cb, transparent );
    }



/* =========================================================
   MOTION
   ========================================================= */

@keyframes preserveScan-b-w2nmzbtm49 {

    0%, 12% {
        opacity: 0;
        transform: translateY(0);
    }

    22% {
        opacity: .9;
    }

    76% {
        opacity: .9;
    }

    90%, 100% {
        opacity: 0;
        transform: translateY(430px);
    }
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {

    .preserve-section__inner[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 46px 38px;
    }


    .preserve-visual[b-w2nmzbtm49] {
        width: min( 760px, 100% );
        margin-inline: auto;
    }
}



@media (max-width: 650px) {

    .preserve-section[b-w2nmzbtm49] {
        width: calc(100% - 24px);
        border-radius: 25px;
    }


    .preserve-section__inner[b-w2nmzbtm49] {
        padding: 32px 18px;
    }


    .preserve-copy h2[b-w2nmzbtm49] {
        font-size: clamp( 2rem, 10vw, 2.8rem );
    }


    .preserve-points[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }


    .document-studio[b-w2nmzbtm49] {
        padding: 10px;
    }


    .document-studio__canvas[b-w2nmzbtm49] {
        height: 380px;
    }


    .document-page[b-w2nmzbtm49] {
        left: 16px;
        top: 20px;
        width: 76%;
        height: 330px;
    }


    .structure-map[b-w2nmzbtm49] {
        right: 11px;
        top: 55px;
        width: 34%;
        padding: 9px;
    }


    .document-studio__badge[b-w2nmzbtm49] {
        right: 18px;
        bottom: 25px;
    }
}



@media (prefers-reduced-motion: reduce) {

    .document-page__scan[b-w2nmzbtm49] {
        animation: none !important;
    }
}



/* =========================================================
   FILE FORMATS
   REFERENCE-MATCHED / REAL 3D EDGES / INFINITE LOOP
   ========================================================= */

.formats-reference[b-w2nmzbtm49] {
    --format-card-width: 112px;
    --format-card-height: 152px;
    --format-gap: 11px;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 56px 0 64px;
    background: radial-gradient( 850px 430px at 50% 43%, rgba(238,188,61,.105), transparent 69% ), linear-gradient( 180deg, #fffefa 0%, #fffdf9 100% );
}



/* =========================================================
   HEADER
   ========================================================= */

.formats-reference__header[b-w2nmzbtm49] {
    position: relative;
    z-index: 10;
    width: min( 1040px, calc(100% - 32px) );
    margin-inline: auto;
    text-align: center;
}



.formats-reference__eyebrow[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(219,163,37,.22);
    border-radius: 999px;
    background: linear-gradient( 180deg, rgba(255,255,255,.96), rgba(255,248,231,.88) );
    color: #ad7408;
    font-size: .76rem;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(118,80,14,.07), inset 0 1px 0 rgba(255,255,255,.98);
}



.formats-reference__eyebrow-icon[b-w2nmzbtm49] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    color: #c8890c;
}



    .formats-reference__eyebrow-icon svg[b-w2nmzbtm49] {
        width: 100%;
        height: 100%;
    }



.formats-reference__header h2[b-w2nmzbtm49] {
    margin: 22px auto 13px;
    color: #22282d;
    font-size: clamp( 2.7rem, 4.3vw, 4.6rem );
    line-height: 1.18;
    letter-spacing: -.035em;
    font-weight: 950;
}



@media (min-width: 1080px) {

    .formats-reference__header h2[b-w2nmzbtm49] {
        white-space: nowrap;
    }
}



.formats-reference__header h2 span[b-w2nmzbtm49] {
    background: linear-gradient( 180deg, #da9912, #ae7002 );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}



.formats-reference__header p[b-w2nmzbtm49] {
    width: min( 800px, 100% );
    margin: 0 auto;
    color: #73716d;
    font-size: .98rem;
    line-height: 1.95;
    font-weight: 600;
}



/* =========================================================
   STAGE
   ========================================================= */

.formats-reference__stage[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min( 1500px, 100% );
    height: 350px;
    margin: 28px auto 0;
    overflow: hidden;
}



/* =========================================================
   AMBIENT CENTER LIGHT
   ========================================================= */

.formats-reference__ambient[b-w2nmzbtm49] {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 320px;
    transform: translate( -50%, -50% );
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(237,185,55,.13), rgba(237,185,55,.045) 47%, transparent 73% );
    filter: blur(25px);
    pointer-events: none;
}



/* =========================================================
   CURVE SVG
   ========================================================= */

.formats-reference__curves[b-w2nmzbtm49] {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}



/* fine outside curve */

.formats-curve__outer[b-w2nmzbtm49] {
    fill: none;
    stroke-width: 1.05;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}



/* broad soft ribbon behind main ribbon */

.formats-curve__ribbon-ambient[b-w2nmzbtm49] {
    fill: none;
    stroke-width: 24;
    stroke-linecap: round;
    opacity: .23;
    vector-effect: non-scaling-stroke;
}



/* middle glow */

.formats-curve__ribbon-glow[b-w2nmzbtm49] {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    opacity: .58;
    vector-effect: non-scaling-stroke;
}



/* thin bright center */

.formats-curve__ribbon-core[b-w2nmzbtm49] {
    fill: none;
    stroke-width: 1.55;
    stroke-linecap: round;
    opacity: .92;
    vector-effect: non-scaling-stroke;
}



/* fixed strong highlights */

.formats-curve__shine-glow[b-w2nmzbtm49] {
    fill: none;
    stroke: rgba(233,170,29,.62);
    stroke-width: 10;
    stroke-linecap: round;
    opacity: .72;
    vector-effect: non-scaling-stroke;
}



.formats-curve__shine[b-w2nmzbtm49] {
    fill: none;
    stroke: #ffd96f;
    stroke-width: 1.85;
    stroke-linecap: round;
    opacity: .96;
    vector-effect: non-scaling-stroke;
}



/* glowing points */

.formats-curve__point-glow[b-w2nmzbtm49] {
    fill: rgba(235,171,31,.72);
}



.formats-curve__point[b-w2nmzbtm49] {
    fill: #fff3ad;
    stroke: rgba(219,151,14,.52);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}



.formats-curve__point-glow-small[b-w2nmzbtm49] {
    fill: rgba(237,176,39,.58);
}



.formats-curve__point-small[b-w2nmzbtm49] {
    fill: #ffec9c;
    stroke: rgba(218,151,15,.42);
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
}



/* =========================================================
   VIEWPORT
   ========================================================= */

.formats-reference__viewport[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 101px;
    height: 166px;
    overflow: hidden;
    direction: ltr;
}



/* =========================================================
   LOOP
   IMPORTANT:
   این قسمت همان Loop فعلی است.
   منطقش تغییر نکرده.
   ========================================================= */

.formats-reference__track[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    top: 7px;
    display: flex;
    align-items: center;
    width: max-content;
    direction: ltr;
    will-change: transform;
    transform: translate3d( 0, 0, 0 );
    animation: formatsReferenceInfinite-b-w2nmzbtm49 36s linear infinite;
    transform-style: preserve-3d;
}



.formats-reference__group[b-w2nmzbtm49] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--format-gap);
    padding-right: var(--format-gap);
    box-sizing: content-box;
    direction: ltr;
    transform-style: preserve-3d;
}



@keyframes formatsReferenceInfinite-b-w2nmzbtm49 {

    from {
        transform: translate3d( 0, 0, 0 );
    }

    to {
        transform: translate3d( -25%, 0, 0 );
    }
}



/* =========================================================
   SLOT

   Slot هیچ‌وقت rotate نمی‌شود.
   JS موقعیت واقعی Slot را اندازه می‌گیرد.
   ========================================================= */

.format-ref-slot[b-w2nmzbtm49] {
    position: relative;
    width: var(--format-card-width);
    height: var(--format-card-height);
    flex: 0 0 var(--format-card-width);
    transform-style: preserve-3d;
}



/* =========================================================
   REAL 3D CARD WRAPPER

   نه Scale
   نه Fade
   نه Blur
   نه کوچک‌شدن

   فقط rotateY.
   ========================================================= */

.format-ref-card[b-w2nmzbtm49] {
    --format-turn: 0deg;
    --format-origin: center center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: var(--format-origin);
    transform: perspective(760px) rotateY( var(--format-turn) );
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}



/* =========================================================
   FRONT FACE
   ========================================================= */

.format-ref-card__front[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 17px 9px 13px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(139,110,66,.115);
    border-radius: 22px;
    background: radial-gradient( circle at 50% -10%, rgba(255,255,255,1), transparent 48% ), linear-gradient( 160deg, rgba(255,255,255,.995), rgba(255,253,248,.97) );
    box-shadow: 0 20px 33px rgba(89,62,19,.095), 0 6px 13px rgba(89,62,19,.04), inset 0 1px 0 rgba(255,255,255,1);
    transform: translateZ(7px);
    backface-visibility: hidden;
}



    .format-ref-card__front[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 150deg, rgba(255,255,255,.42), transparent 37% );
        pointer-events: none;
    }



/* =========================================================
   REAL CARD THICKNESS

   با rotateY این دو سطح نمایان می‌شوند
   و حس چرخیدن واقعی کارت ایجاد می‌شود.
   ========================================================= */

.format-ref-card__side[b-w2nmzbtm49] {
    position: absolute;
    z-index: 2;
    top: 12px;
    bottom: 12px;
    width: 14px;
    background: linear-gradient( 180deg, #fffefa, #eee7da );
    border: 1px solid rgba(136,105,54,.11);
    box-shadow: inset 0 0 8px rgba(126,94,42,.055);
    backface-visibility: hidden;
}



.format-ref-card__side--left[b-w2nmzbtm49] {
    left: 0;
    transform-origin: left center;
    transform: translateZ(7px) rotateY(-90deg);
}



.format-ref-card__side--right[b-w2nmzbtm49] {
    right: 0;
    transform-origin: right center;
    transform: translateZ(7px) rotateY(90deg);
}



/* =========================================================
   FILE ICON
   ========================================================= */

.format-ref-card__file[b-w2nmzbtm49] {
    --format-a: #aaa;
    --format-b: #777;
    position: relative;
    z-index: 5;
    width: 43px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px 9px 11px 11px;
    background: linear-gradient( 145deg, var(--format-a), var(--format-b) );
    box-shadow: 0 9px 17px rgba(52,36,16,.16), 0 2px 5px rgba(52,36,16,.08), inset 0 1px 1px rgba(255,255,255,.34), inset 0 -4px 8px rgba(0,0,0,.05);
    transform: translateZ(14px);
}



    /* icon shine */

    .format-ref-card__file[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        z-index: 2;
        left: -19px;
        top: -25px;
        width: 34px;
        height: 100px;
        transform: rotate(28deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.27), transparent );
    }



/* =========================================================
   FOLDED CORNER
   ========================================================= */

.format-ref-card__fold[b-w2nmzbtm49] {
    position: absolute;
    z-index: 6;
    right: 0;
    top: 0;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,.64);
    clip-path: polygon( 0 0, 100% 100%, 0 100% );
}



/* =========================================================
   ICON COLORS
   ========================================================= */

.format-ref-card__file--html[b-w2nmzbtm49] {
    --format-a: #ffc083;
    --format-b: #ff8345;
}



.format-ref-card__file--tiff[b-w2nmzbtm49] {
    --format-a: #c883fb;
    --format-b: #914de8;
}



.format-ref-card__file--webp[b-w2nmzbtm49] {
    --format-a: #92e171;
    --format-b: #4bbb32;
}



.format-ref-card__file--png[b-w2nmzbtm49] {
    --format-a: #77cbff;
    --format-b: #3d94ec;
}



.format-ref-card__file--jpg[b-w2nmzbtm49] {
    --format-a: #ad91ff;
    --format-b: #745be4;
}



.format-ref-card__file--txt[b-w2nmzbtm49] {
    --format-a: #eef3f8;
    --format-b: #cedae5;
    color: #718295;
}



.format-ref-card__file--pptx[b-w2nmzbtm49] {
    --format-a: #ffa36e;
    --format-b: #f5653c;
}



.format-ref-card__file--docx[b-w2nmzbtm49] {
    --format-a: #68bcff;
    --format-b: #2c82dd;
}



.format-ref-card__file--pdf[b-w2nmzbtm49] {
    --format-a: #ff7a80;
    --format-b: #ef3a40;
}



.format-ref-card__file--srt[b-w2nmzbtm49] {
    --format-a: #d59bff;
    --format-b: #a164ea;
}



/* =========================================================
   ICON MARK
   ========================================================= */

.format-ref-card__mark[b-w2nmzbtm49] {
    position: relative;
    z-index: 5;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: .60rem;
    font-weight: 950;
    text-shadow: 0 1px 2px rgba(0,0,0,.09);
}



.format-ref-card__file--html
.format-ref-card__mark[b-w2nmzbtm49] {
    font-size: .87rem;
}



.format-ref-card__file--docx
.format-ref-card__mark[b-w2nmzbtm49] {
    font-size: 1rem;
}



.format-ref-card__file--srt
.format-ref-card__mark[b-w2nmzbtm49] {
    font-size: .75rem;
}



.format-ref-card__file--pdf
.format-ref-card__mark[b-w2nmzbtm49] {
    font-size: .45rem;
}



/* =========================================================
   IMAGE GLYPH
   ========================================================= */

.format-ref-card__image[b-w2nmzbtm49] {
    position: relative;
    z-index: 5;
    width: 23px;
    height: 18px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 4px;
}



.format-ref-card__sun[b-w2nmzbtm49] {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}



.format-ref-card__mountain[b-w2nmzbtm49] {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 9px;
    background: #fff;
    clip-path: polygon( 0 100%, 29% 38%, 48% 69%, 70% 22%, 100% 100% );
}



/* =========================================================
   TXT GLYPH
   ========================================================= */

.format-ref-card__lines[b-w2nmzbtm49] {
    position: relative;
    z-index: 5;
    width: 22px;
    display: grid;
    gap: 4px;
}



    .format-ref-card__lines i[b-w2nmzbtm49] {
        height: 2.7px;
        border-radius: 99px;
        background: currentColor;
    }



        .format-ref-card__lines i:nth-child(2)[b-w2nmzbtm49] {
            width: 80%;
        }



        .format-ref-card__lines i:nth-child(3)[b-w2nmzbtm49] {
            width: 61%;
        }



/* =========================================================
   PPT GLYPH
   ========================================================= */

.format-ref-card__pie[b-w2nmzbtm49] {
    position: relative;
    z-index: 5;
    width: 21px;
    height: 21px;
    border: 2px solid rgba(255,255,255,.97);
    border-radius: 50%;
}



    .format-ref-card__pie[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        right: -3px;
        top: -3px;
        width: 11px;
        height: 11px;
        background: #fff;
        clip-path: polygon( 0 0, 100% 0, 100% 100% );
    }



/* =========================================================
   CARD TEXT
   ========================================================= */

.format-ref-card__front > strong[b-w2nmzbtm49] {
    position: relative;
    z-index: 5;
    display: block;
    margin-top: 11px;
    color: #292e33;
    font-size: .88rem;
    line-height: 1;
    font-weight: 950;
}



.format-ref-card__front > small[b-w2nmzbtm49] {
    position: relative;
    z-index: 5;
    display: block;
    margin-top: 8px;
    color: #817d76;
    font-size: .56rem;
    line-height: 1.5;
    font-weight: 650;
}



/* =========================================================
   EDGE MASK

   کارت خودش Fade نمی‌شود.
   فقط Frame در چند پیکسل آخر نرم تمام می‌شود.
   ========================================================= */

.formats-reference__edge[b-w2nmzbtm49] {
    position: absolute;
    z-index: 7;
    top: 96px;
    bottom: 78px;
    width: 46px;
    pointer-events: none;
}



.formats-reference__edge--left[b-w2nmzbtm49] {
    left: 0;
    background: linear-gradient( 90deg, #fffdfa, rgba(255,253,250,.40) 52%, transparent 100% );
}



.formats-reference__edge--right[b-w2nmzbtm49] {
    right: 0;
    background: linear-gradient( 270deg, #fffdfa, rgba(255,253,250,.40) 52%, transparent 100% );
}



/* =========================================================
   ARROWS
   ========================================================= */

.formats-reference__arrow[b-w2nmzbtm49] {
    position: absolute;
    z-index: 9;
    top: 52%;
    width: 43px;
    height: 43px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(210,151,24,.10);
    border-radius: 50%;
    background: linear-gradient( 145deg, #fff9ef, #f5e5bd );
    color: #a96f08;
    font-family: Arial, sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: 0 12px 25px rgba(112,76,15,.10), inset 0 1px 0 rgba(255,255,255,.98);
    pointer-events: none;
}



.formats-reference__arrow--left[b-w2nmzbtm49] {
    left: 57px;
}



.formats-reference__arrow--right[b-w2nmzbtm49] {
    right: 57px;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .formats-reference[b-w2nmzbtm49] {
        --format-card-width: 108px;
        --format-card-height: 148px;
        --format-gap: 10px;
    }


    .formats-reference__header h2[b-w2nmzbtm49] {
        font-size: clamp( 2.35rem, 5.5vw, 4rem );
    }
}



@media (max-width: 760px) {

    .formats-reference[b-w2nmzbtm49] {
        --format-card-width: 100px;
        --format-card-height: 142px;
        --format-gap: 9px;
        padding: 44px 0 48px;
    }


    .formats-reference__header[b-w2nmzbtm49] {
        width: calc(100% - 24px);
    }


        .formats-reference__header h2[b-w2nmzbtm49] {
            font-size: clamp( 2rem, 9vw, 3rem );
            white-space: normal;
        }


        .formats-reference__header p[b-w2nmzbtm49] {
            font-size: .84rem;
            line-height: 1.85;
        }


    .formats-reference__stage[b-w2nmzbtm49] {
        height: 310px;
    }


    .formats-reference__viewport[b-w2nmzbtm49] {
        top: 91px;
        height: 158px;
    }


    .formats-reference__track[b-w2nmzbtm49] {
        animation-duration: 30s;
    }


    .formats-reference__arrow[b-w2nmzbtm49] {
        display: none;
    }


    .formats-reference__edge[b-w2nmzbtm49] {
        width: 28px;
    }
}



/* =========================================================
   ACCESSIBILITY

   فقط Loop در reduce-motion متوقف می‌شود.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .formats-reference__track[b-w2nmzbtm49] {
        animation: none !important;
    }
}




/* =========================================================
   FORMAT RING
   Camera-inside-circle perspective
   ========================================================= */

.format-ring[b-w2nmzbtm49] {
    --ring-card-width: 138px;
    --ring-card-height: 160px;
    --ring-gap: 4px;
    position: relative;
    width: 100%;

    padding: 58px 0 68px;
    overflow: hidden;
    background: radial-gradient( 760px 360px at 50% 61%, rgba(232,176,45,.085), transparent 70% ), linear-gradient( 180deg, #fffefa, #fffdf9 );
}



/* =========================================================
   HEADER
   ========================================================= */

.format-ring__header[b-w2nmzbtm49] {
    position: relative;
    z-index: 10;
    width: min( 1040px, calc(100% - 32px) );
    margin-inline: auto;
    text-align: center;
}


.format-ring__badge[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(215,156,30,.21);
    border-radius: 999px;
    background: linear-gradient( 180deg, rgba(255,255,255,.97), rgba(255,248,232,.88) );
    color: #ad7307;
    font-size: .76rem;
    font-weight: 900;
    box-shadow: 0 7px 20px rgba(112,76,14,.055), inset 0 1px 0 white;
}


.format-ring__badge-icon[b-w2nmzbtm49] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    color: #c4870b;
}


    .format-ring__badge-icon svg[b-w2nmzbtm49] {
        width: 100%;
        height: 100%;
    }


.format-ring__header h2[b-w2nmzbtm49] {
    margin: 22px auto 13px;
    color: #22282d;
    font-size: clamp( 2.7rem, 4.4vw, 4.7rem );
    line-height: 1.18;
    letter-spacing: -.035em;
    font-weight: 950;
}


@media (min-width: 1080px) {

    .format-ring__header h2[b-w2nmzbtm49] {
        white-space: nowrap;
    }
}


.format-ring__header h2 span[b-w2nmzbtm49] {
    background: linear-gradient( 180deg, #d99a14, #aa6d01 );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.format-ring__header p[b-w2nmzbtm49] {
    width: min( 800px, 100% );
    margin: 0 auto;
    color: #73716d;
    font-size: .98rem;
    line-height: 1.95;
    font-weight: 600;
}



/* =========================================================
   SCENE

   Perspective اینجا اعمال می‌شود.
   ========================================================= */

.format-ring__scene[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min(1500px, 100%);
    height: 330px;
    margin: 30px auto 0;
    overflow: hidden;
    perspective: 900px;
    /* دوربین دقیقاً روی خط افق */
    perspective-origin: 50% 50%;
}



/* =========================================================
   BACKGROUND LIGHT
   ========================================================= */

.format-ring__ambient[b-w2nmzbtm49] {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 52%;
    width: 850px;
    height: 250px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(237,186,58,.13), rgba(237,186,58,.035) 48%, transparent 73% );
    filter: blur(22px);
    pointer-events: none;
}



/* =========================================================
   ORBIT GUIDES

   فقط برای اینکه کاربر ناخودآگاه مسیر دایره‌ای را حس کند.
   ========================================================= */

.format-ring__orbit[b-w2nmzbtm49] {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 108%;
    height: 180px;
    transform: translateX(-50%);
    pointer-events: none;
}


.format-ring__orbit--top[b-w2nmzbtm49] {
    top: -125px;
    border-bottom: 1px solid rgba(215,151,20,.36);
    border-radius: 0 0 50% 50%;
}


.format-ring__orbit--bottom[b-w2nmzbtm49] {
    bottom: -124px;
    border-top: 1px solid rgba(215,151,20,.36);
    border-radius: 50% 50% 0 0;
}



/* =========================================================
   LOOP VIEWPORT
   ========================================================= */

.format-ring
.formats-reference__viewport[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 54px;
    height: 235px;
    overflow: hidden;
    direction: ltr;
    perspective: 900px;
    /* دوربین دقیقاً روبه‌روی مرکز کارت‌ها */
    perspective-origin: 50% 50%;
}



/* =========================================================
   TRACK

   IMPORTANT:
   هیچ Animation یا Transform جدیدی اینجا نداریم.

   workflow-motion-v4.js همچنان Track را حرکت می‌دهد.
   ========================================================= */

.format-ring
.formats-reference__track[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    top: 25px;
    display: flex;
    align-items: center;
    width: max-content;
    direction: ltr;
    will-change: transform;
    transform-style: preserve-3d;
}



.format-ring
.formats-reference__group[b-w2nmzbtm49] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ring-gap);
    padding-right: var(--ring-gap);
    direction: ltr;
    transform-style: preserve-3d;
}



/* =========================================================
   SLOT

   Slot توسط Loop حرکت می‌کند اما خودش Perspective ندارد.
   ========================================================= */

.format-ring__slot[b-w2nmzbtm49] {
    position: relative;
    flex: 0 0 var(--ring-card-width);
    width: var(--ring-card-width);
    height: var(--ring-card-height);
    transform-style: preserve-3d;
}



/* =========================================================
   CARD

   اندازه ظاهری کارت با translateZ ایجاد می‌شود،
   نه با scale مصنوعی.
   ========================================================= */

.format-ring-card[b-w2nmzbtm49] {
    --ring-x: 0px;
    --ring-y: 0px;
    --ring-z: -240px;
    --ring-yaw: 0deg;
    /* جدید */
    --ring-opacity: 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--ring-opacity);
    transform: translate3d( var(--ring-x), var(--ring-y), var(--ring-z) ) rotateY( var(--ring-yaw) );
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}



/* =========================================================
   CARD FRONT
   ========================================================= */

.format-ring-card__front[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    inset: 0;
    box-sizing: border-box;
    padding: 18px 9px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(128,99,56,.11);
    border-radius: 22px;
    background: radial-gradient( circle at 50% -8%, rgba(255,255,255,1), transparent 46% ), linear-gradient( 160deg, #ffffff, #fffdf8 );
    box-shadow: 0 19px 31px rgba(83,58,18,.09), 0 5px 12px rgba(83,58,18,.035), inset 0 1px 0 #fff;
    transform: translateZ(6px);
    backface-visibility: hidden;
}



/* =========================================================
   CARD SIDES

   وقتی کارت در دو طرف می‌چرخد،
   این سطح کناری واقعاً دیده می‌شود.
   ========================================================= */

.format-ring-card__side[b-w2nmzbtm49] {
    position: absolute;
    z-index: 2;
    top: 12px;
    bottom: 12px;
    width: 12px;
    border: 1px solid rgba(124,95,48,.10);
    background: linear-gradient( 180deg, #fffefa, #eee7db );
    box-shadow: inset 0 0 7px rgba(111,79,28,.045);
    backface-visibility: hidden;
}


.format-ring-card__side--left[b-w2nmzbtm49] {
    left: 0;
    transform-origin: left center;
    transform: translateZ(6px) rotateY(-90deg);
}


.format-ring-card__side--right[b-w2nmzbtm49] {
    right: 0;
    transform-origin: right center;
    transform: translateZ(6px) rotateY(90deg);
}



/* =========================================================
   FILE ICON
   ========================================================= */

.format-ring-card__file[b-w2nmzbtm49] {
    --file-a: #aaa;
    --file-b: #777;
    position: relative;
    z-index: 5;
    width: 44px;
    height: 51px;
    flex: 0 0 51px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px 9px 11px 11px;
    background: linear-gradient( 145deg, var(--file-a), var(--file-b) );
    box-shadow: 0 9px 17px rgba(50,34,14,.16), inset 0 1px 1px rgba(255,255,255,.34);
    transform: translateZ(12px);
}


    .format-ring-card__file[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        left: -18px;
        top: -24px;
        width: 33px;
        height: 96px;
        transform: rotate(28deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.27), transparent );
    }



/* fold */

.format-ring-card__fold[b-w2nmzbtm49] {
    position: absolute;
    z-index: 6;
    right: 0;
    top: 0;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,.64);
    clip-path: polygon( 0 0, 100% 100%, 0 100% );
}



/* =========================================================
   ICON COLORS
   ========================================================= */

.format-ring-card__file--html[b-w2nmzbtm49] {
    --file-a: #ffc083;
    --file-b: #ff8345;
}


.format-ring-card__file--tiff[b-w2nmzbtm49] {
    --file-a: #c883fb;
    --file-b: #914de8;
}


.format-ring-card__file--webp[b-w2nmzbtm49] {
    --file-a: #92e171;
    --file-b: #4bbb32;
}


.format-ring-card__file--png[b-w2nmzbtm49] {
    --file-a: #77cbff;
    --file-b: #3d94ec;
}


.format-ring-card__file--jpg[b-w2nmzbtm49] {
    --file-a: #ad91ff;
    --file-b: #745be4;
}


.format-ring-card__file--txt[b-w2nmzbtm49] {
    --file-a: #eef3f8;
    --file-b: #cedae5;
    color: #718295;
}


.format-ring-card__file--pptx[b-w2nmzbtm49] {
    --file-a: #ffa36e;
    --file-b: #f5653c;
}


.format-ring-card__file--docx[b-w2nmzbtm49] {
    --file-a: #68bcff;
    --file-b: #2c82dd;
}


.format-ring-card__file--pdf[b-w2nmzbtm49] {
    --file-a: #ff7a80;
    --file-b: #ef3a40;
}


.format-ring-card__file--srt[b-w2nmzbtm49] {
    --file-a: #d59bff;
    --file-b: #a164ea;
}



/* =========================================================
   MARK
   ========================================================= */

.format-ring-card__mark[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: .60rem;
    font-weight: 950;
}


.format-ring-card__file--html
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: .87rem;
}


.format-ring-card__file--docx
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: 1rem;
}


.format-ring-card__file--srt
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: .75rem;
}


.format-ring-card__file--pdf
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: .45rem;
}



/* =========================================================
   IMAGE ICON
   ========================================================= */

.format-ring-card__image[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    width: 23px;
    height: 18px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 4px;
}


.format-ring-card__sun[b-w2nmzbtm49] {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}


.format-ring-card__mountain[b-w2nmzbtm49] {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 9px;
    background: #fff;
    clip-path: polygon( 0 100%, 29% 38%, 48% 69%, 70% 22%, 100% 100% );
}



/* =========================================================
   TXT
   ========================================================= */

.format-ring-card__lines[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    width: 22px;
    display: grid;
    gap: 4px;
}


    .format-ring-card__lines i[b-w2nmzbtm49] {
        height: 2.7px;
        border-radius: 99px;
        background: currentColor;
    }


        .format-ring-card__lines i:nth-child(2)[b-w2nmzbtm49] {
            width: 80%;
        }


        .format-ring-card__lines i:nth-child(3)[b-w2nmzbtm49] {
            width: 61%;
        }



/* =========================================================
   PPT
   ========================================================= */

.format-ring-card__pie[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    width: 21px;
    height: 21px;
    border: 2px solid rgba(255,255,255,.97);
    border-radius: 50%;
}


    .format-ring-card__pie[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        right: -3px;
        top: -3px;
        width: 11px;
        height: 11px;
        background: #fff;
        clip-path: polygon( 0 0, 100% 0, 100% 100% );
    }



/* =========================================================
   CARD TEXT
   ========================================================= */

.format-ring-card__front > strong[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    display: block;
    margin-top: 11px;
    color: #292e33;
    font-size: .88rem;
    line-height: 1;
    font-weight: 950;
}


.format-ring-card__front > small[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    display: block;
    margin-top: 8px;
    color: #817d76;
    font-size: .56rem;
    line-height: 1.5;
    font-weight: 650;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .format-ring[b-w2nmzbtm49] {
        --ring-card-width: 103px;
        --ring-card-height: 146px;
        --ring-gap: 10px;
        padding: 46px 0 50px;
    }


    .format-ring__header[b-w2nmzbtm49] {
        width: calc(100% - 24px);
    }


        .format-ring__header h2[b-w2nmzbtm49] {
            font-size: clamp( 2rem, 9vw, 3rem );
            white-space: normal;
        }


        .format-ring__header p[b-w2nmzbtm49] {
            font-size: .84rem;
            line-height: 1.85;
        }


    .format-ring__scene[b-w2nmzbtm49] {
        height: 290px;
    }


    .format-ring
    .formats-reference__viewport[b-w2nmzbtm49] {
        top: 48px;
        height: 215px;
    }
}



/* =========================================================
   FORMAT RING — ORBIT FRAME V2
   فقط طراحی بالا و پایین
   کارت‌ها / Loop / Perspective / Fade دست‌نخورده
   ========================================================= */


/* =========================================================
   SCENE
   ========================================================= */

.format-ring .format-ring__scene[b-w2nmzbtm49] {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
}


/* پشت کارت‌ها کاملاً خالی */
.format-ring .format-ring__ambient[b-w2nmzbtm49] {
    display: none !important;
}



/* =========================================================
   OUTER CURVES
   این دو خط کاملاً بیرون محدوده کارت‌ها هستند
   ========================================================= */

.format-ring .format-ring__scene[b-w2nmzbtm49]::before,
.format-ring .format-ring__scene[b-w2nmzbtm49]::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 108% !important;
    height: 190px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    background: transparent !important;
    z-index: 1 !important;
    filter: none !important;
}


/* خط خارجی بالا
   border در حدود y = 38 قرار می‌گیرد */
.format-ring .format-ring__scene[b-w2nmzbtm49]::before {
    top: -132px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(205, 137, 8, .60) !important;
    border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}


/* خط خارجی پایین
   border در حدود y = 292 قرار می‌گیرد */
.format-ring .format-ring__scene[b-w2nmzbtm49]::after {
    bottom: -132px !important;
    border: 0 !important;
    border-top: 1px solid rgba(205, 137, 8, .60) !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.65) !important;
}



/* =========================================================
   INNER ORBITS
   اینها هم کاملاً از کارت‌ها فاصله دارند
   ========================================================= */

.format-ring .format-ring__orbit[b-w2nmzbtm49] {
    position: absolute !important;
    left: 50% !important;
    width: 91% !important;
    height: 78px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    overflow: visible !important;
    z-index: 2 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   INNER TOP

   قبلاً تقریباً y=95 بود و رفت زیر کارت.
   الان خط در حدود y=58 قرار می‌گیرد.
   --------------------------------------------------------- */

.format-ring .format-ring__orbit--top[b-w2nmzbtm49] {
    top: -2px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(230, 178, 61, .30) !important;
    border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.74), 0 5px 15px rgba(218,157,28,.025) !important;
}


/* ---------------------------------------------------------
   INNER BOTTOM

   خط در حدود y=272 قرار می‌گیرد.
   --------------------------------------------------------- */

.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49] {
    bottom: -2px !important;
    border: 0 !important;
    border-top: 1px solid rgba(230, 178, 61, .30) !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.74), 0 -5px 15px rgba(218,157,28,.025) !important;
}



/* =========================================================
   GOLD ENERGY DETAILS

   فقط روی خود خط‌های بالا و پایین.
   دیگر وارد محدوده کارت‌ها نمی‌شوند.
   ========================================================= */

.format-ring .format-ring__orbit[b-w2nmzbtm49]::before,
.format-ring .format-ring__orbit[b-w2nmzbtm49]::after {
    content: "" !important;
    position: absolute !important;
    width: 155px !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    background: radial-gradient( circle at 31% 50%, #fff7ce 0 2px, rgba(246,194,66,.95) 2.5px 4px, rgba(229,161,24,.20) 5px 9px, transparent 10px ), linear-gradient( 90deg, transparent 0%, rgba(224,155,17,.03) 13%, rgba(231,169,40,.14) 30%, rgba(248,207,101,.55) 46%, rgba(255,239,168,.95) 54%, rgba(248,207,101,.43) 63%, rgba(231,169,40,.10) 80%, transparent 100% ) !important;
    box-shadow: 0 0 8px rgba(224,157,22,.08), 0 0 16px rgba(224,157,22,.035) !important;
    filter: none !important;
    opacity: .90 !important;
}



/* =========================================================
   TOP DETAILS
   ========================================================= */

.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::before {
    left: 8% !important;
    bottom: -5px !important;
    transform: rotate(3deg) !important;
    transform-origin: right center !important;
}


.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::after {
    right: 8% !important;
    bottom: -5px !important;
    transform: rotate(-3deg) scaleX(-1) !important;
    transform-origin: left center !important;
}



/* =========================================================
   BOTTOM DETAILS
   ========================================================= */

.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::before {
    left: 8% !important;
    top: -5px !important;
    transform: rotate(-3deg) !important;
    transform-origin: right center !important;
}


.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::after {
    right: 8% !important;
    top: -5px !important;
    transform: rotate(3deg) scaleX(-1) !important;
    transform-origin: left center !important;
}



/* =========================================================
   IMPORTANT
   فضای وسط را کاملاً خالی نگه می‌داریم
   ========================================================= */

.format-ring .formats-reference__viewport[b-w2nmzbtm49] {
    z-index: 5 !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .format-ring .format-ring__scene[b-w2nmzbtm49]::before,
    .format-ring .format-ring__scene[b-w2nmzbtm49]::after {
        width: 138% !important;
    }


    .format-ring .format-ring__orbit[b-w2nmzbtm49] {
        width: 108% !important;
    }


        .format-ring .format-ring__orbit[b-w2nmzbtm49]::before,
        .format-ring .format-ring__orbit[b-w2nmzbtm49]::after {
            width: 105px !important;
        }
}


/* =========================================================
   FORMAT RING — SOFT FADED LINES
   فقط افکت‌های بالا و پایین سکشن آیکون‌ها
   بدون دایره / بدون نقطه / فقط خطوط محو و ظریف
   ========================================================= */

/* اگر قبلاً glow یا dot یا انرژی دایره‌ای داده بودی، خاموشش کن */
.format-ring .format-ring__orbit[b-w2nmzbtm49]::before,
.format-ring .format-ring__orbit[b-w2nmzbtm49]::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    width: 330px !important;
    height: 3px !important;
    border-radius: 999px !important;
    border: none !important;
    /* خط محو و کشیده */
    background: linear-gradient( 90deg, rgba(214, 156, 31, 0) 0%, rgba(214, 156, 31, 0.03) 8%, rgba(230, 176, 58, 0.10) 22%, rgba(241, 196, 91, 0.28) 40%, rgba(255, 229, 158, 0.72) 50%, rgba(241, 196, 91, 0.28) 60%, rgba(230, 176, 58, 0.10) 78%, rgba(214, 156, 31, 0.03) 92%, rgba(214, 156, 31, 0) 100% ) !important;
    box-shadow: 0 0 12px rgba(232, 184, 72, 0.10), 0 0 24px rgba(232, 184, 72, 0.06) !important;
    filter: blur(0.4px) !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
    animation: none !important;
    z-index: 1 !important;
}


/* =========================
   خطوط بالایی
   ========================= */

.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::before {
    left: 1% !important;
    bottom: -10px !important;
    transform: rotate(1.6deg) !important;
}

.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::after {
    right: 1% !important;
    bottom: -10px !important;
    transform: rotate(-1.6deg) !important;
}


/* =========================
   خطوط پایینی
   ========================= */

.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::before {
    left: 1% !important;
    top: -16px !important;
    transform: rotate(-1.6deg) !important;
}

.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::after {
    right: 1% !important;
    top: -16px !important;
    transform: rotate(1.6deg) !important;
}


/* =========================================================
   FORMAT RING — SOFT BACKGROUND BEHIND CARDS
   selector corrected
   ========================================================= */


/* خود viewport */
.format-ring .formats-reference__viewport[b-w2nmzbtm49] {
    position: absolute !important;
    isolation: isolate !important;
}


    /* =========================================================
   BACKGROUND LAYER
   فقط پشت کارت‌ها
   ========================================================= */

    .format-ring .formats-reference__viewport[b-w2nmzbtm49]::before {
        content: "" !important;
        position: absolute !important;
        /* عمداً از خود viewport کمی داخل‌تر */
        left: 2% !important;
        right: 2% !important;
        top: 16px !important;
        bottom: 16px !important;
        z-index: 0 !important;
        pointer-events: none !important;
        border-radius: 999px !important;
        /* =====================================================
       رنگ پس‌زمینه
       الان عمداً واضح گذاشتم که تغییر را حتماً ببینی
       بعداً می‌توانیم ظریف‌ترش کنیم
       ===================================================== */

        background: radial-gradient( ellipse at center, rgba(222, 176, 75, .52) 0%, rgba(229, 193, 112, .15) 34%, rgba(239, 217, 164, .09) 60%, rgba(255, 250, 236, .03) 78%, transparent 100% ), linear-gradient( 180deg, rgba(247, 234, 199, .20), rgba(238, 214, 156, .13), rgba(247, 234, 199, .20) ) !important;
        box-shadow: inset 0 0 28px rgba(255,255,255,.48), 0 0 35px rgba(209,155,40,.07) !important;
        /* =====================================================
       FADE کامل از چپ و راست
       ===================================================== */

        -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.62) 18%, #000 36%, #000 64%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.08) 95%, transparent 100% ) !important;
        mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.62) 18%, #000 36%, #000 64%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.08) 95%, transparent 100% ) !important;
    }


/* =========================================================
   کارت‌ها حتماً بالای Background باشند
   ========================================================= */

.format-ring .formats-reference__track[b-w2nmzbtm49] {
    position: absolute !important;
    z-index: 2 !important;
}




/* =========================================================
   PREMIUM PRICING SECTION
   ========================================================= */

.pricing-premium-section[b-w2nmzbtm49] {
    position: relative;
    padding: 72px 28px 110px;
    overflow: hidden;
}

.pricing-premium-shell[b-w2nmzbtm49] {
    max-width: 1380px;
    margin: 0 auto;
    position: relative;
}

/* پس‌زمینه نرم */
.pricing-premium-section[b-w2nmzbtm49]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(233, 190, 74, 0.12), transparent 38%), radial-gradient(circle at 50% 100%, rgba(224, 170, 42, 0.08), transparent 34%);
    opacity: .9;
}

/* =========================================================
   HEADING
   ========================================================= */

.pricing-premium-heading[b-w2nmzbtm49] {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 42px;
    position: relative;
    z-index: 2;
}

.pricing-premium-kicker[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(235, 242, 230, 0.85);
    color: #5f7758;
    border: 1px solid rgba(127, 150, 120, 0.20);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.pricing-premium-kicker-dot[b-w2nmzbtm49] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #87a07d;
    box-shadow: 0 0 0 5px rgba(135, 160, 125, 0.16);
}

.pricing-premium-heading h2[b-w2nmzbtm49] {
    margin: 0 0 14px;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.03em;
    color: #232323;
}

    .pricing-premium-heading h2 span[b-w2nmzbtm49] {
        color: #232323;
    }

    .pricing-premium-heading h2 strong[b-w2nmzbtm49] {
        color: #b97b07;
        font-weight: 950;
    }

.pricing-premium-heading p[b-w2nmzbtm49] {
    margin: 0 auto;
    max-width: 840px;
    color: #666158;
    font-size: 18px;
    line-height: 2;
}

/* =========================================================
   GRID
   ========================================================= */

.pricing-premium-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    position: relative;
    z-index: 2;
}

/* =========================================================
   CARD
   ========================================================= */

.pricing-card[b-w2nmzbtm49] {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.93));
    border: 1px solid rgba(215, 189, 125, 0.55);
    border-radius: 34px;
    padding: 20px 20px 20px;
    box-shadow: 0 16px 36px rgba(110, 87, 29, 0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

    .pricing-card[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top left, rgba(241, 214, 148, 0.14), transparent 34%), radial-gradient(circle at bottom right, rgba(222, 182, 84, 0.10), transparent 36%);
        pointer-events: none;
        opacity: .9;
    }

    .pricing-card:hover[b-w2nmzbtm49] {
        transform: translateY(-10px);
        box-shadow: 0 26px 54px rgba(133, 102, 30, 0.13), 0 8px 18px rgba(160, 124, 44, 0.08);
        border-color: rgba(214, 173, 68, 0.78);
    }

.pricing-card__glow[b-w2nmzbtm49] {
    position: absolute;
    inset-inline: 12%;
    top: -120px;
    height: 180px;
    background: radial-gradient(circle, rgba(229, 190, 92, 0.18), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
}

.pricing-card__topline[b-w2nmzbtm49],
.pricing-card__head[b-w2nmzbtm49],
.pricing-card__pricebox[b-w2nmzbtm49],
.pricing-card__meta[b-w2nmzbtm49],
.pricing-card__formats[b-w2nmzbtm49],
.pricing-card__benefits[b-w2nmzbtm49],
.pricing-card__footer[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
}

.pricing-card__topline[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    min-height: 30px;
}

.pricing-card__plan-label[b-w2nmzbtm49] {
    font-size: 11px;
    font-weight: 800;
    color: #d29b29;
    letter-spacing: .02em;
}

.pricing-card__badge[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f6d36f, #ebb93f);
    color: #5e4205;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(232, 177, 38, 0.26);
}

.pricing-card__head[b-w2nmzbtm49] {
    text-align: center;
    margin-bottom: 18px;
}

    .pricing-card__head h3[b-w2nmzbtm49] {
        margin: 0 0 10px;
        font-size: 38px;
        font-weight: 900;
        color: #3b3b3b;
        line-height: 1.1;
    }

    .pricing-card__head p[b-w2nmzbtm49] {
        margin: 0;
        font-size: 15px;
        line-height: 1.9;
        color: #777166;
    }

/* =========================================================
   PRICE BOX
   ========================================================= */

.pricing-card__pricebox[b-w2nmzbtm49] {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(205, 197, 182, 0.65);
    border-radius: 22px;
    padding: 18px 18px 16px;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.pricing-card__credits[b-w2nmzbtm49] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pricing-card__credits-label[b-w2nmzbtm49] {
    font-size: 13px;
    color: #8a8478;
    font-weight: 700;
}

.pricing-card__credits strong[b-w2nmzbtm49] {
    font-size: 46px;
    line-height: 1;
    font-weight: 950;
    color: #4c4842;
}

.pricing-card__price[b-w2nmzbtm49] {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 6px;
    color: #4d4a45;
}

    .pricing-card__price strong[b-w2nmzbtm49] {
        font-size: 26px;
        font-weight: 900;
    }

    .pricing-card__price span[b-w2nmzbtm49] {
        font-size: 14px;
        color: #7c766d;
        font-weight: 700;
    }

.pricing-card__subprice[b-w2nmzbtm49] {
    font-size: 12px;
    color: #9c9487;
    line-height: 1.8;
}

/* =========================================================
   META
   ========================================================= */

.pricing-card__meta[b-w2nmzbtm49] {
    border-top: 1px solid rgba(214, 206, 191, 0.7);
    border-bottom: 1px solid rgba(214, 206, 191, 0.7);
    padding: 16px 0;
    margin-bottom: 18px;
}

.pricing-meta-row[b-w2nmzbtm49] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 0;
}

.pricing-meta-row__label[b-w2nmzbtm49] {
    font-size: 13px;
    font-weight: 800;
    color: #6d675d;
}

.pricing-meta-row__value[b-w2nmzbtm49] {
    font-size: 13px;
    line-height: 1.9;
    color: #4f4b45;
    text-align: left;
    max-width: 70%;
}

/* =========================================================
   FORMATS
   ========================================================= */

.pricing-card__formats[b-w2nmzbtm49] {
    margin-bottom: 18px;
}

.pricing-card__formats-title[b-w2nmzbtm49] {
    font-size: 13px;
    font-weight: 900;
    color: #6a655d;
    margin-bottom: 12px;
}

.pricing-chip-list[b-w2nmzbtm49] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pricing-chip[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(211, 201, 185, 0.8);
    background: rgba(255,255,255,.82);
    color: #7a7368;
    font-size: 12px;
    font-weight: 800;
    transition: all .25s ease;
}

.pricing-card:hover .pricing-chip[b-w2nmzbtm49] {
    border-color: rgba(224, 181, 70, 0.52);
    color: #86610d;
    background: #fffdf8;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.pricing-card__benefits[b-w2nmzbtm49] {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.pricing-benefit[b-w2nmzbtm49] {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(217, 208, 191, 0.75);
    color: #615c54;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.pricing-benefit--featured[b-w2nmzbtm49] {
    color: #8a5c00;
    border-color: rgba(224, 180, 66, 0.5);
    background: linear-gradient(180deg, rgba(255,250,239,.96), rgba(255,245,219,.86));
}

/* =========================================================
   FOOTER
   ========================================================= */

.pricing-card__footer[b-w2nmzbtm49] {
    margin-top: auto;
    display: grid;
    gap: 14px;
}

.pricing-card__limit[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(216, 207, 191, 0.72);
}

.pricing-card__limit-icon[b-w2nmzbtm49] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f6d468, #ebbb42);
    color: #7b5405;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(229, 177, 37, 0.22);
    flex: 0 0 38px;
}

.pricing-card__limit small[b-w2nmzbtm49] {
    display: block;
    font-size: 11px;
    color: #9a9183;
    margin-bottom: 4px;
}

.pricing-card__limit strong[b-w2nmzbtm49] {
    font-size: 15px;
    color: #4f4a44;
    font-weight: 900;
}

.pricing-card__cta[b-w2nmzbtm49] {
    width: 100%;
    min-height: 54px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: all .28s ease;
    border: none;
}

.pricing-card__cta--primary[b-w2nmzbtm49] {
    background: linear-gradient(180deg, #f3c84f, #e8b32d);
    color: #543b06;
    box-shadow: 0 14px 28px rgba(226, 173, 36, 0.28);
}

    .pricing-card__cta--primary:hover[b-w2nmzbtm49] {
        transform: translateY(-2px);
        box-shadow: 0 18px 32px rgba(226, 173, 36, 0.34);
    }

.pricing-card__cta--ghost[b-w2nmzbtm49] {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(214, 195, 152, 0.76);
    color: #7a621e;
}

    .pricing-card__cta--ghost:hover[b-w2nmzbtm49] {
        background: #fffaf0;
        border-color: rgba(224, 177, 56, 0.78);
    }

/* =========================================================
   FEATURED CARD
   ========================================================= */

.pricing-card--featured[b-w2nmzbtm49] {
    transform: translateY(-10px);
    border-color: rgba(226, 179, 56, 0.84);
    box-shadow: 0 22px 46px rgba(163, 118, 19, 0.13), 0 8px 20px rgba(210, 166, 61, 0.08);
}

    .pricing-card--featured:hover[b-w2nmzbtm49] {
        transform: translateY(-18px);
    }

.pricing-card__featured-ring[b-w2nmzbtm49] {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(243, 206, 107, 0.95), rgba(226, 175, 44, 0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .pricing-premium-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 760px;
        margin: 0 auto;
    }

    .pricing-card--featured[b-w2nmzbtm49] {
        transform: none;
    }

        .pricing-card--featured:hover[b-w2nmzbtm49] {
            transform: translateY(-10px);
        }
}

@media (max-width: 768px) {
    .pricing-premium-section[b-w2nmzbtm49] {
        padding: 58px 16px 84px;
    }

    .pricing-premium-heading h2[b-w2nmzbtm49] {
        font-size: 36px;
    }

    .pricing-premium-heading p[b-w2nmzbtm49] {
        font-size: 15px;
        line-height: 2;
    }

    .pricing-card[b-w2nmzbtm49] {
        padding: 18px 16px;
        border-radius: 26px;
    }

    .pricing-card__head h3[b-w2nmzbtm49] {
        font-size: 30px;
    }

    .pricing-card__credits strong[b-w2nmzbtm49] {
        font-size: 38px;
    }

    .pricing-card__price strong[b-w2nmzbtm49] {
        font-size: 22px;
    }

    .pricing-chip[b-w2nmzbtm49] {
        min-width: 58px;
        padding: 7px 10px;
        font-size: 11px;
    }
}



/* =========================================================
   DATABASE PRICING — SMALL ADDITIONS
   ========================================================= */

.pricing-card__bonus[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: -3px 0 13px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(230, 240, 224, .88);
    border: 1px solid rgba(133, 156, 122, .16);
    color: #687d60;
    font-size: 11px;
    font-weight: 800;
}

    .pricing-card__bonus span[b-w2nmzbtm49] {
        color: #56704d;
        font-weight: 950;
    }


.pricing-card__credit-breakdown[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin: -2px 0 18px;
    padding: 11px 15px;
    border: 1px solid rgba(215, 203, 180, .58);
    border-radius: 16px;
    background: rgba(255, 253, 248, .58);
}

    .pricing-card__credit-breakdown > span[b-w2nmzbtm49] {
        width: 1px;
        height: 28px;
        background: rgba(198, 181, 145, .36);
    }

    .pricing-card__credit-breakdown div[b-w2nmzbtm49] {
        display: grid;
        gap: 3px;
    }

    .pricing-card__credit-breakdown small[b-w2nmzbtm49] {
        color: #9a9182;
        font-size: 10px;
    }

    .pricing-card__credit-breakdown strong[b-w2nmzbtm49] {
        color: #5d5549;
        font-size: 13px;
        font-weight: 900;
    }


.pricing-card__formats-title[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .pricing-card__formats-title > span[b-w2nmzbtm49] {
        min-width: 26px;
        height: 26px;
        display: inline-grid;
        place-items: center;
        border-radius: 9px;
        background: rgba(235, 188, 69, .10);
        color: #aa790e;
        font-size: 10px;
        font-weight: 900;
    }


.pricing-chip[b-w2nmzbtm49] {
    gap: 7px;
}

    .pricing-chip i[b-w2nmzbtm49] {
        font-style: normal;
        min-width: 18px;
        color: #ba861b;
        font-size: 8px;
        font-weight: 950;
    }

    .pricing-chip b[b-w2nmzbtm49] {
        font-size: inherit;
        font-weight: 850;
    }


.pricing-benefit[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .pricing-benefit strong[b-w2nmzbtm49] {
        font-size: 12px;
        font-weight: 850;
    }

    .pricing-benefit span[b-w2nmzbtm49] {
        color: #8d8578;
        font-size: 11px;
        text-align: left;
    }


.pricing-card__cta[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .pricing-card__cta span[b-w2nmzbtm49] {
        transition: transform .25s ease;
    }

    .pricing-card__cta:hover span[b-w2nmzbtm49] {
        transform: translate(2px, -2px);
    }


/* loading / error / empty */

.pricing-premium-state[b-w2nmzbtm49] {
    width: min(720px, 100%);
    min-height: 170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
    border: 1px solid rgba(216, 194, 143, .48);
    border-radius: 28px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 16px 38px rgba(105, 79, 25, .05), inset 0 1px 0 white;
}

    .pricing-premium-state strong[b-w2nmzbtm49] {
        color: #514b42;
        font-size: 16px;
    }

    .pricing-premium-state small[b-w2nmzbtm49] {
        color: #918a7e;
        font-size: 12px;
    }

.pricing-premium-state--error[b-w2nmzbtm49] {
    border-color: rgba(180, 110, 80, .20);
}


.pricing-premium-state__spinner[b-w2nmzbtm49] {
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
    border: 2px solid rgba(201, 151, 34, .15);
    border-top-color: #c48c13;
    border-radius: 50%;
    animation: pricingCatalogSpin-b-w2nmzbtm49 .75s linear infinite;
}

@keyframes pricingCatalogSpin-b-w2nmzbtm49 {
    to {
        transform: rotate(360deg);
    }
}



/* =========================================================
   PRICING — COMPACT OVERRIDE
   فقط کارت‌های پکیج را جمع‌وجورتر می‌کند
   ========================================================= */


/* کارت‌ها دیگر مجبور نیستند هم‌ارتفاع باشند */
.pricing-premium-grid[b-w2nmzbtm49] {
    align-items: start !important;
}


/* ارتفاع مصنوعی کارت حذف شود */
.pricing-card[b-w2nmzbtm49] {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 18px 16px !important;
}


/* مهم‌ترین اصلاح:
   Footer دیگر فضای خالی را به زور پر نمی‌کند */
.pricing-card__footer[b-w2nmzbtm49] {
    margin-top: 10px !important;
    gap: 10px !important;
}


/* عنوان کارت کمی جمع‌تر */
.pricing-card__head[b-w2nmzbtm49] {
    margin-bottom: 13px !important;
}

    .pricing-card__head h3[b-w2nmzbtm49] {
        margin-bottom: 7px !important;
        font-size: 34px !important;
    }

    .pricing-card__head p[b-w2nmzbtm49] {
        line-height: 1.65 !important;
    }


/* بخش قیمت */
.pricing-card__pricebox[b-w2nmzbtm49] {
    padding: 15px 16px 13px !important;
    margin-bottom: 13px !important;
}

.pricing-card__credits[b-w2nmzbtm49] {
    margin-bottom: 10px !important;
}

    .pricing-card__credits strong[b-w2nmzbtm49] {
        font-size: 40px !important;
    }

.pricing-card__price[b-w2nmzbtm49] {
    margin-bottom: 3px !important;
}


/* Base / Bonus */
.pricing-card__credit-breakdown[b-w2nmzbtm49] {
    margin: -1px 0 12px !important;
    padding: 9px 13px !important;
}


/* Quality + Input */
.pricing-card__meta[b-w2nmzbtm49] {
    padding: 11px 0 !important;
    margin-bottom: 13px !important;
}

.pricing-meta-row[b-w2nmzbtm49] {
    padding: 5px 0 !important;
}


/* Formats */
.pricing-card__formats[b-w2nmzbtm49] {
    margin-bottom: 12px !important;
}

.pricing-card__formats-title[b-w2nmzbtm49] {
    margin-bottom: 9px !important;
}

.pricing-chip-list[b-w2nmzbtm49] {
    gap: 6px !important;
}

.pricing-chip[b-w2nmzbtm49] {
    min-width: 58px !important;
    padding: 6px 9px !important;
    border-radius: 12px !important;
}


/* سه ردیف پایین کارت */
.pricing-card__benefits[b-w2nmzbtm49] {
    gap: 7px !important;
    margin: 10px 0 0 !important;
}

.pricing-benefit[b-w2nmzbtm49] {
    padding: 9px 12px !important;
    min-height: 0 !important;
    border-radius: 13px !important;
    line-height: 1.5 !important;
}


/* Max upload */
.pricing-card__limit[b-w2nmzbtm49] {
    padding: 10px 13px !important;
    border-radius: 15px !important;
}

.pricing-card__limit-icon[b-w2nmzbtm49] {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 12px !important;
}


/* فاصله بالای کارت */
.pricing-card__topline[b-w2nmzbtm49] {
    min-height: 24px !important;
    margin-bottom: 11px !important;
}


/* Featured همچنان خاص بماند ولی بیش از حد بالا نرود */
.pricing-card--featured[b-w2nmzbtm49] {
    transform: translateY(-6px) !important;
}

    .pricing-card--featured:hover[b-w2nmzbtm49] {
        transform: translateY(-11px) !important;
    }



/* =========================================================
   PRICING — COMPACT + EQUAL + ALIGNED
   نسخه اصلاح‌شده
   ========================================================= */


/* سه کارت هم‌قد */
.pricing-premium-grid[b-w2nmzbtm49] {
    align-items: stretch !important;
}


/* =========================================================
   CARD
   ========================================================= */

.pricing-card[b-w2nmzbtm49] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    gap: 0 !important;
    grid-template-rows: none !important;
}


/* کارت Featured اندازه متفاوت نداشته باشد */
.pricing-card--featured[b-w2nmzbtm49] {
    transform: none !important;
}

    .pricing-card--featured:hover[b-w2nmzbtm49] {
        transform: translateY(-6px) !important;
    }


/* =========================================================
   TOP LABEL
   ========================================================= */

.pricing-card__topline[b-w2nmzbtm49] {
    min-height: 30px !important;
    height: auto !important;
    margin: 0 0 8px !important;
    flex: 0 0 auto !important;
}


/* =========================================================
   TITLE
   همه عنوان‌ها تقریباً روی یک خط
   ========================================================= */

.pricing-card__head[b-w2nmzbtm49] {
    min-height: 66px !important;
    height: auto !important;
    margin: 0 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

    .pricing-card__head h3[b-w2nmzbtm49] {
        margin: 0 0 5px !important;
        font-size: 34px !important;
        line-height: 1.1 !important;
    }

    .pricing-card__head p[b-w2nmzbtm49] {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }


/* =========================================================
   PRICE BOX
   ========================================================= */

.pricing-card__pricebox[b-w2nmzbtm49] {
    min-height: 150px !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    padding: 13px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.pricing-card__credits[b-w2nmzbtm49] {
    margin-bottom: 7px !important;
}

    .pricing-card__credits strong[b-w2nmzbtm49] {
        font-size: 39px !important;
    }

.pricing-card__price[b-w2nmzbtm49] {
    margin-bottom: 2px !important;
}


/* Bonus داخل price box */
.pricing-card__bonus[b-w2nmzbtm49] {
    margin: 0 0 6px !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
}


/* =========================================================
   BASE / BONUS BREAKDOWN
   ========================================================= */

.pricing-card__credit-breakdown[b-w2nmzbtm49] {
    min-height: 48px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    padding: 7px 12px !important;
    flex: 0 0 48px !important;
}


/* اگر bonus ندارد فقط جای آن حفظ شود */
.pricing-card__credit-breakdown--empty[b-w2nmzbtm49] {
    visibility: hidden !important;
}


/* =========================================================
   QUALITY + INPUT
   ========================================================= */

.pricing-card__meta[b-w2nmzbtm49] {
    min-height: 82px !important;
    height: 82px !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 0 0 82px !important;
}

.pricing-meta-row[b-w2nmzbtm49] {
    min-height: 30px !important;
    padding: 3px 0 !important;
}


/* =========================================================
   FORMATS
   این Slot برای هر سه کارت یکسان است
   ولی عمداً خیلی بلند نیست
   ========================================================= */

.pricing-card__formats[b-w2nmzbtm49] {
    min-height: 122px !important;
    height: 122px !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    padding: 5px 0 0 !important;
    overflow: hidden !important;
    flex: 0 0 122px !important;
}

.pricing-card__formats-title[b-w2nmzbtm49] {
    margin-bottom: 8px !important;
}

.pricing-chip-list[b-w2nmzbtm49] {
    gap: 5px !important;
    align-content: flex-start !important;
}

.pricing-chip[b-w2nmzbtm49] {
    min-width: 55px !important;
    padding: 5px 8px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
}


/* =========================================================
   MAX FILE
   ========================================================= */

.pricing-card__footer[b-w2nmzbtm49] {
    margin: 0 0 9px !important;
    padding: 0 !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

.pricing-card__limit[b-w2nmzbtm49] {
    min-height: 56px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
}

.pricing-card__limit-icon[b-w2nmzbtm49] {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 11px !important;
}


/* =========================================================
   SUMMARY ROWS
   سه ردیف پایانی
   ========================================================= */

.pricing-card__benefits[b-w2nmzbtm49] {
    margin: 0 !important;
    display: grid !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
}

.pricing-benefit[b-w2nmzbtm49] {
    min-height: 34px !important;
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
}

    .pricing-benefit strong[b-w2nmzbtm49] {
        font-size: 11px !important;
    }

    .pricing-benefit span[b-w2nmzbtm49] {
        font-size: 10px !important;
    }


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1181px) {

    .pricing-premium-grid[b-w2nmzbtm49] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   TABLET / MOBILE
   در تک ستون دیگر Equal Height لازم نیست
   ========================================================= */

@media (max-width: 1180px) {

    .pricing-card[b-w2nmzbtm49] {
        height: auto !important;
    }

    .pricing-card__head[b-w2nmzbtm49],
    .pricing-card__pricebox[b-w2nmzbtm49],
    .pricing-card__credit-breakdown[b-w2nmzbtm49],
    .pricing-card__meta[b-w2nmzbtm49],
    .pricing-card__formats[b-w2nmzbtm49] {
        min-height: 0 !important;
        height: auto !important;
        flex-basis: auto !important;
    }

    .pricing-card__credit-breakdown--empty[b-w2nmzbtm49] {
        display: none !important;
    }
}



/* =========================================================
   PUBLIC HEADER — HARD RESTORE
   این بلوک جایگزین Force Restore قبلی شود
   ========================================================= */

.home-page > .public-header[b-w2nmzbtm49] {
    position: relative !important;
    inset: auto !important;
    z-index: 5000 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: rgba(255, 253, 248, .94) !important;
    border-bottom: 1px solid rgba(177, 137, 65, .15) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}


    /* =========================================================
   INNER
   ========================================================= */

    .home-page > .public-header > .public-header__inner[b-w2nmzbtm49] {
        position: relative !important;
        inset: auto !important;
        width: min(1440px, calc(100% - 48px)) !important;
        max-width: 1440px !important;
        min-height: 82px !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 10px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        clip-path: none !important;
    }


/* =========================================================
   BRAND
   ========================================================= */

.home-page .public-header .brand[b-w2nmzbtm49] {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    text-decoration: none !important;
}


.home-page .public-header .brand__mark[b-w2nmzbtm49] {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border: 1px solid rgba(189,139,43,.22) !important;
    border-radius: 14px !important;
    background: linear-gradient( 145deg, #fffdf8, #f5e8ca ) !important;
    color: #b57808 !important;
}


    .home-page .public-header .brand__mark svg[b-w2nmzbtm49] {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        fill: none !important;
        stroke: currentColor !important;
        opacity: 1 !important;
    }


.home-page .public-header .brand__copy[b-w2nmzbtm49] {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}


    .home-page .public-header .brand__copy strong[b-w2nmzbtm49] {
        color: #292621 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }


    .home-page .public-header .brand__copy small[b-w2nmzbtm49] {
        color: #958b7b !important;
        font-size: 9px !important;
    }


/* =========================================================
   CENTER NAV
   ========================================================= */

.home-page .public-header .public-nav[b-w2nmzbtm49] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
}


    .home-page .public-header .public-nav > a[b-w2nmzbtm49] {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        white-space: nowrap !important;
        color: #655d51 !important;
        -webkit-text-fill-color: currentColor !important;
        background: transparent !important;
        border-radius: 999px !important;
        font-size: 16px !important;
        font-weight: 750 !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        clip-path: none !important;
    }


        .home-page .public-header .public-nav > a:hover[b-w2nmzbtm49] {
            color: #9a690b !important;
            background: rgba(216,166,52,.09) !important;
        }


/* =========================================================
   ACTIONS
   زبان + ورود + شروع ترجمه
   ========================================================= */

.home-page .public-header .public-header__actions[b-w2nmzbtm49] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: auto !important;
}


    /* هر سه لینک */

    .home-page .public-header .public-header__actions > a[b-w2nmzbtm49] {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        clip: auto !important;
        clip-path: none !important;
        -webkit-mask: none !important;
        mask: none !important;
        pointer-events: auto !important;
        text-decoration: none !important;
        -webkit-text-fill-color: currentColor !important;
    }


/* زبان + ورود */

.home-page .public-header .lang-button[b-w2nmzbtm49],
.home-page .public-header .signin-button[b-w2nmzbtm49] {
    min-height: 40px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(188,157,99,.24) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.82) !important;
    color: #625a4d !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}


/* شروع ترجمه */

.home-page .public-header .header-cta[b-w2nmzbtm49] {
    min-height: 42px !important;
    padding: 0 16px !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient( 180deg, #f2c951, #e5ad27 ) !important;
    color: #553a04 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(214,161,32,.18) !important;
}


    .home-page .public-header .header-cta > span[b-w2nmzbtm49] {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }


/* =========================================================
   DESKTOP — هیچ‌چیز مخفی نشود
   ========================================================= */

@media (min-width: 901px) {

    .home-page .public-header .public-nav[b-w2nmzbtm49] {
        display: flex !important;
    }

    .home-page .public-header .public-header__actions[b-w2nmzbtm49] {
        display: flex !important;
    }

    .home-page .public-header .lang-button[b-w2nmzbtm49],
    .home-page .public-header .signin-button[b-w2nmzbtm49],
    .home-page .public-header .header-cta[b-w2nmzbtm49] {
        display: inline-flex !important;
    }
}





/* =========================================================
   LANDING — BUY CREDITS PACKAGE CLONE
   Based directly on BuyCredits premium package V3
   ========================================================= */


/* =========================================================
   GRID
   ========================================================= */

.landing-buy-grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    direction: rtl;
}


/* =========================================================
   CARD
   ========================================================= */

.landing-buy-card[b-w2nmzbtm49] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 18px 16px;
    border: 1px solid rgba(193, 170, 125, .42);
    border-radius: 22px;
    background: radial-gradient( 120% 100% at 0% 0%, rgba(236, 193, 90, .10) 0%, transparent 46% ), linear-gradient( 180deg, rgba(255,255,255,.96) 0%, rgba(255,253,248,.94) 100% );
    box-shadow: 0 8px 20px rgba(78, 59, 24, .05), inset 0 1px 0 rgba(255,255,255,.82);
    overflow: hidden;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}


    /* طلایی باریک بالای کارت */
    .landing-buy-card[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-start: 0;
        height: 3px;
        background: linear-gradient( 90deg, transparent 0%, rgba(232,183,63,.45) 14%, #e1aa27 50%, rgba(232,183,63,.45) 86%, transparent 100% );
        opacity: .75;
    }


    .landing-buy-card:hover[b-w2nmzbtm49] {
        transform: translateY(-5px);
        border-color: rgba(215,167,49,.52);
        box-shadow: 0 14px 32px rgba(78,59,24,.10), inset 0 1px 0 rgba(255,255,255,.9);
    }


    /* =========================================================
   FEATURED
   ========================================================= */

    .landing-buy-card.is-featured[b-w2nmzbtm49] {
        border-color: rgba(226,175,46,.62);
        background: radial-gradient( 120% 95% at 50% -15%, rgba(240,199,93,.19) 0%, transparent 60% ), radial-gradient( 95% 70% at 100% 0%, rgba(226,175,46,.10) 0%, transparent 60% ), linear-gradient( 180deg, #fffefa 0%, #fffaf0 100% );
        box-shadow: 0 16px 36px rgba(176,127,21,.10), inset 0 1px 0 rgba(255,255,255,.90);
    }


.landing-buy-ribbon[b-w2nmzbtm49] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 16px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient( 140deg, #ffd361 0%, #eeb62f 100% );
    color: #664603;
    font-size: .58rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(226,175,46,.20);
}


/* =========================================================
   HEADER
   ========================================================= */

.landing-buy-card-head[b-w2nmzbtm49] {
    min-height: 48px;
    margin-bottom: 12px;
    padding-inline-start: 92px;
    text-align: center;
}


    .landing-buy-card-head h3[b-w2nmzbtm49] {
        margin: 0 0 5px;
        color: #37332d;
        font-size: 1.32rem;
        font-weight: 900;
        line-height: 1.35;
    }


    .landing-buy-card-head p[b-w2nmzbtm49] {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #8b8376;
        font-size: .74rem;
        line-height: 1.72;
    }


/* =========================================================
   CREDIT + PRICE BOXES
   ========================================================= */

.landing-buy-card-credits[b-w2nmzbtm49],
.landing-buy-card-price[b-w2nmzbtm49] {
    position: relative;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid rgba(200,191,176,.58);
    border-radius: 16px;
    background: linear-gradient( 180deg, rgba(255,255,255,.92), rgba(253,249,241,.72) );
    overflow: hidden;
}


    /* خط طلایی خیلی ظریف بالای باکس */
    .landing-buy-card-credits[b-w2nmzbtm49]::after,
    .landing-buy-card-price[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(226,175,46,.26), transparent );
        pointer-events: none;
    }


/* =========================================================
   CREDITS
   ========================================================= */

.landing-buy-credit-line[b-w2nmzbtm49] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}


    .landing-buy-credit-line strong[b-w2nmzbtm49] {
        color: #34302a;
        font-size: 1.95rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -.03em;
        font-variant-numeric: tabular-nums;
    }


.landing-buy-credit-plus[b-w2nmzbtm49] {
    color: #aaa293;
    font-size: 1.22rem;
    font-weight: 800;
}


.landing-buy-credit-bonus[b-w2nmzbtm49] {
    color: #557b50 !important;
}


.landing-buy-credit-bonus-word[b-w2nmzbtm49] {
    align-self: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e9f1e5;
    color: #597852;
    font-size: .60rem;
    font-weight: 900;
}


.landing-buy-credit-unit[b-w2nmzbtm49] {
    display: block;
    margin-top: 6px;
    color: #8d8579;
    font-size: .70rem;
    font-weight: 650;
}


    .landing-buy-credit-unit b[b-w2nmzbtm49] {
        color: #59534b;
        font-weight: 900;
    }


/* =========================================================
   PRICE
   ========================================================= */

.landing-buy-card-price strong[b-w2nmzbtm49] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #a26d08;
    font-size: 1.04rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}


    .landing-buy-card-price strong small[b-w2nmzbtm49] {
        color: #81796d;
        font-size: .66rem;
        font-weight: 700;
    }


.landing-buy-card-price > span[b-w2nmzbtm49] {
    display: block;
    margin-top: 4px;
    color: #a49c90;
    font-size: .68rem;
    font-weight: 650;
}


/* =========================================================
   BODY
   ========================================================= */

.landing-buy-card-body[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 4px 0 16px;
    flex: 1;
}


.landing-buy-spec[b-w2nmzbtm49],
.landing-buy-limit[b-w2nmzbtm49] {
    min-width: 0;
    padding: 12px 12px 11px;
    border: 1px solid rgba(199,190,175,.58);
    border-radius: 16px;
    background: linear-gradient( 180deg, rgba(255,255,255,.88), rgba(255,253,248,.76) );
}


/* formats + file limit کل عرض */
.landing-buy-spec--formats[b-w2nmzbtm49],
.landing-buy-limit[b-w2nmzbtm49] {
    grid-column: 1 / -1;
}


/* =========================================================
   SPEC TITLES
   ========================================================= */

.landing-buy-spec-title[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 8px;
    color: #9e6e12;
    font-size: .58rem;
    font-weight: 900;
}


/* =========================================================
   QUALITY / INPUT LIST
   ========================================================= */

.landing-buy-spec-list[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}


    .landing-buy-spec-list li[b-w2nmzbtm49] {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 7px;
        font-size: .75rem;
        font-weight: 700;
        line-height: 1.35;
    }


        .landing-buy-spec-list li.on[b-w2nmzbtm49] {
            color: #4e4941;
        }


        .landing-buy-spec-list li.off[b-w2nmzbtm49] {
            color: #b2aba0;
        }


/* =========================================================
   CHECK / DASH
   ========================================================= */

.landing-buy-mark[b-w2nmzbtm49] {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
}


    .landing-buy-mark svg[b-w2nmzbtm49] {
        width: 11px;
        height: 11px;
    }


    .landing-buy-mark.on[b-w2nmzbtm49] {
        background: #e9f1e5;
        color: #63815d;
        box-shadow: inset 0 0 0 1px rgba(81,117,74,.04);
    }


    .landing-buy-mark.off[b-w2nmzbtm49] {
        background: #faf9f6;
        color: #c3bdb3;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
    }


/* =========================================================
   FORMAT CHIPS
   ========================================================= */

.landing-buy-format-chips[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 7px;
}


.landing-buy-chip[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .65rem;
    font-weight: 850;
    cursor: default;
}


.landing-buy-chip-glyph[b-w2nmzbtm49] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 8px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    font-size: .54rem;
    font-weight: 950;
    line-height: 1;
}


.landing-buy-chip-text[b-w2nmzbtm49] {
    line-height: 1;
    font-size: .62rem;
    font-weight: 850;
}


/* ENABLED FORMAT */
.landing-buy-chip.on[b-w2nmzbtm49] {
    background: #edf4e9;
    border-color: rgba(94,130,87,.24);
    color: #557850;
}


/* DISABLED FORMAT */
.landing-buy-chip.off[b-w2nmzbtm49] {
    background: rgba(255,255,255,.72);
    border-color: rgba(204,197,186,.58);
    color: #b5aea3;
    opacity: .92;
}


    .landing-buy-chip.off .landing-buy-chip-text[b-w2nmzbtm49] {
        text-decoration: line-through;
        text-decoration-thickness: 1px;
    }


    .landing-buy-chip.off .landing-buy-chip-glyph[b-w2nmzbtm49] {
        opacity: .58;
        filter: saturate(.45);
    }


/* format glyph colours */

.landing-buy-chip--pdf .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #c83b3b;
}

.landing-buy-chip--docx .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #2f6bcf;
}

.landing-buy-chip--pptx .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #d16b2f;
}

.landing-buy-chip--txt .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #607080;
}

.landing-buy-chip--jpg .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #2d8d70;
}

.landing-buy-chip--png .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #2280a8;
}

.landing-buy-chip--webp .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #6c58a7;
}

.landing-buy-chip--tiff .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #8c6d3a;
}

.landing-buy-chip--html .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #d16426;
    font-size: .49rem;
}

.landing-buy-chip--vtt .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #7452b8;
    font-size: .51rem;
}

.landing-buy-chip--srt .landing-buy-chip-glyph[b-w2nmzbtm49] {
    color: #3f8f92;
}


/* =========================================================
   FILE SIZE LIMIT
   ========================================================= */

.landing-buy-limit[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}


.landing-buy-limit-glyph[b-w2nmzbtm49] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 10px;
    background: #fff2c8;
    color: #a26d08;
}


    .landing-buy-limit-glyph svg[b-w2nmzbtm49] {
        width: 17px;
        height: 17px;
    }


.landing-buy-limit-copy small[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 1px;
    color: #938b7e;
    font-size: .62rem;
    font-weight: 650;
}


.landing-buy-limit-copy strong[b-w2nmzbtm49] {
    color: #444038;
    font-size: .85rem;
    font-weight: 900;
}


/* =========================================================
   ACTION
   ========================================================= */

.landing-buy-card-action[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: auto;
    padding: 11px 16px;
    border: 1px solid rgba(187,175,152,.66);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: #4f4940;
    font-size: .80rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}


    .landing-buy-card-action:hover[b-w2nmzbtm49] {
        transform: translateY(-2px);
        border-color: rgba(215,166,46,.62);
        background: #fffaf0;
    }


/* Featured button exactly like Buy Credits */
.landing-buy-card.is-featured
.landing-buy-card-action[b-w2nmzbtm49] {
    border-color: transparent;
    background: linear-gradient( 140deg, #ffd361 0%, #efb52e 100% );
    color: #5a3d04;
    box-shadow: 0 10px 22px rgba(226,175,46,.20);
}


/* =========================================================
   IMPORTANT:
   EQUAL HEIGHT + ALIGNED BANDS
   same principle as BuyCredits subgrid
   ========================================================= */

@supports (grid-template-rows: subgrid) {

    .landing-buy-grid[b-w2nmzbtm49] {
        grid-template-rows: auto auto auto 1fr auto;
    }


    .landing-buy-card[b-w2nmzbtm49] {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
    }


    .landing-buy-card-body[b-w2nmzbtm49] {
        flex: none;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .landing-buy-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }


    @supports (grid-template-rows: subgrid) {

        .landing-buy-grid[b-w2nmzbtm49] {
            grid-template-rows: none;
        }


        .landing-buy-card[b-w2nmzbtm49] {
            display: flex;
            grid-row: auto;
        }
    }
}


@media (max-width: 700px) {

    .landing-buy-card[b-w2nmzbtm49] {
        padding: 17px 16px 15px;
    }


    .landing-buy-card-head[b-w2nmzbtm49] {
        padding-inline-start: 0;
        padding-top: 28px;
    }


    .landing-buy-card-body[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }


    .landing-buy-spec--formats[b-w2nmzbtm49],
    .landing-buy-limit[b-w2nmzbtm49] {
        grid-column: auto;
    }


    .landing-buy-spec-list[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }


    .landing-buy-format-chips[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}






/* =========================================================
   LANDING FOOTER V2
   Dark warm premium footer
   ========================================================= */

.landing-footer-v2[b-w2nmzbtm49] {
    position: relative;
    margin-top: 18px;
    padding: 42px 0 22px;
    overflow: hidden;
    background: radial-gradient( 65% 120% at 85% 0%, rgba(223, 169, 54, .11) 0%, transparent 64% ), radial-gradient( 55% 100% at 5% 100%, rgba(183, 121, 29, .07) 0%, transparent 68% ), linear-gradient( 145deg, #211b15 0%, #19140f 100% );
    color: #f4eee4;
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.landing-footer-v2__ambient[b-w2nmzbtm49] {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: .14;
}


.landing-footer-v2__ambient--right[b-w2nmzbtm49] {
    top: -250px;
    right: -80px;
    background: #d59a25;
}


.landing-footer-v2__ambient--left[b-w2nmzbtm49] {
    bottom: -300px;
    left: -120px;
    background: #8c5f18;
}


/* =========================================================
   SHELL
   ========================================================= */

.landing-footer-v2__shell[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   TOP GOLD LINE
   ========================================================= */

.landing-footer-v2__topline[b-w2nmzbtm49] {
    position: relative;
    height: 18px;
    margin-bottom: 26px;
}


    .landing-footer-v2__topline[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 8px;
        height: 1px;
        background: linear-gradient( 90deg, transparent 0%, rgba(224, 170, 55, .18) 12%, rgba(224, 170, 55, .65) 50%, rgba(224, 170, 55, .18) 88%, transparent 100% );
    }


    .landing-footer-v2__topline span[b-w2nmzbtm49] {
        position: absolute;
        left: 50%;
        top: 4px;
        width: 9px;
        height: 9px;
        transform: translateX(-50%) rotate(45deg);
        border: 1px solid rgba(239, 192, 85, .85);
        background: #251c10;
        box-shadow: 0 0 14px rgba(226, 171, 52, .18);
    }


/* =========================================================
   MAIN GRID
   ========================================================= */

.landing-footer-v2__grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1.35fr .72fr .72fr 1fr;
    gap: 26px;
    align-items: stretch;
}


/* =========================================================
   BRAND
   ========================================================= */

.landing-footer-v2__brand[b-w2nmzbtm49] {
    min-width: 0;
    padding-inline-end: 20px;
}


.landing-footer-v2__brand-head[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
    text-decoration: none;
}


.landing-footer-v2__mark[b-w2nmzbtm49] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(235, 184, 70, .26);
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(240, 191, 75, .16), rgba(240, 191, 75, .04) );
    color: #edbd53;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.14);
}


    .landing-footer-v2__mark svg[b-w2nmzbtm49] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.landing-footer-v2__brand-copy[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .landing-footer-v2__brand-copy strong[b-w2nmzbtm49] {
        color: #fff9ef;
        font-size: 1rem;
        font-weight: 900;
    }


    .landing-footer-v2__brand-copy small[b-w2nmzbtm49] {
        color: #a99f91;
        font-size: .68rem;
        font-weight: 650;
    }


.landing-footer-v2__brand > p[b-w2nmzbtm49] {
    max-width: 410px;
    margin: 0 0 18px;
    color: #aaa093;
    font-size: .82rem;
    line-height: 1.9;
}


/* =========================================================
   STATUS
   ========================================================= */

.landing-footer-v2__status[b-w2nmzbtm49] {
    display: flex;
}


    .landing-footer-v2__status > span[b-w2nmzbtm49] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid rgba(157, 176, 135, .14);
        border-radius: 999px;
        background: rgba(107, 132, 89, .08);
        color: #b8c6a9;
        font-size: .68rem;
        font-weight: 750;
    }


    .landing-footer-v2__status i[b-w2nmzbtm49] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #91a97d;
        box-shadow: 0 0 0 4px rgba(145,169,125,.08);
    }


/* =========================================================
   COLUMNS
   ========================================================= */

.landing-footer-v2__column[b-w2nmzbtm49] {
    padding-top: 3px;
}


.landing-footer-v2__column-title[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 13px;
    color: #d9b662;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .02em;
}


.landing-footer-v2__links[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


    .landing-footer-v2__links a[b-w2nmzbtm49] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 10px;
        color: #c4baad;
        text-decoration: none;
        font-size: .78rem;
        font-weight: 700;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }


        .landing-footer-v2__links a i[b-w2nmzbtm49] {
            color: #7d7163;
            font-style: normal;
            font-size: .7rem;
            opacity: 0;
            transform: translate(-3px, 2px);
            transition: opacity .2s ease, transform .2s ease;
        }


        .landing-footer-v2__links a:hover[b-w2nmzbtm49] {
            color: #f0c45c;
            background: rgba(255,255,255,.025);
            transform: translateX(-2px);
        }


            .landing-footer-v2__links a:hover i[b-w2nmzbtm49] {
                opacity: 1;
                transform: translate(0,0);
            }


/* =========================================================
   ACTION PANEL
   ========================================================= */

.landing-footer-v2__action-panel[b-w2nmzbtm49] {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(226, 175, 46, .15);
    border-radius: 18px;
    background: radial-gradient( 120% 120% at 100% 0%, rgba(226, 175, 46, .10), transparent 55% ), rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}


.landing-footer-v2__action-kicker[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 9px;
    color: #d7aa46;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
}


.landing-footer-v2__action-panel > strong[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 7px;
    color: #fbf4e8;
    font-size: .95rem;
    line-height: 1.7;
    font-weight: 850;
}


.landing-footer-v2__action-panel > p[b-w2nmzbtm49] {
    margin: 0 0 16px;
    color: #9f9588;
    font-size: .72rem;
    line-height: 1.8;
}


.landing-footer-v2__action[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(230, 179, 57, .18);
    border-radius: 12px;
    background: linear-gradient( 135deg, rgba(226,175,46,.14), rgba(226,175,46,.07) );
    color: #efc35d;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 850;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}


    .landing-footer-v2__action i[b-w2nmzbtm49] {
        font-style: normal;
        font-size: .75rem;
    }


    .landing-footer-v2__action:hover[b-w2nmzbtm49] {
        transform: translateY(-2px);
        border-color: rgba(230,179,57,.34);
        background: linear-gradient( 135deg, rgba(226,175,46,.20), rgba(226,175,46,.10) );
    }


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.landing-footer-v2__bottom[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #7f766a;
    font-size: .65rem;
    font-weight: 650;
}


.landing-footer-v2__bottom-links[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 12px;
}


    .landing-footer-v2__bottom-links > span[b-w2nmzbtm49] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(224,174,59,.38);
    }


    .landing-footer-v2__bottom-links a[b-w2nmzbtm49] {
        color: #92887b;
        text-decoration: none;
        transition: color .2s ease;
    }


        .landing-footer-v2__bottom-links a:hover[b-w2nmzbtm49] {
            color: #e4b64e;
        }


/* =========================================================
   RTL / LTR
   ========================================================= */

.home-page[dir="ltr"]
.landing-footer-v2__brand[b-w2nmzbtm49] {
    padding-inline-end: 0;
    padding-inline-start: 20px;
}


.home-page[dir="ltr"]
.landing-footer-v2__links a:hover[b-w2nmzbtm49] {
    transform: translateX(2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1.25fr .75fr .75fr;
    }


    .landing-footer-v2__action-panel[b-w2nmzbtm49] {
        grid-column: 1 / -1;
    }
}


@media (max-width: 720px) {

    .landing-footer-v2[b-w2nmzbtm49] {
        padding: 34px 0 18px;
    }


    .landing-footer-v2__shell[b-w2nmzbtm49] {
        width: calc(100% - 28px);
    }


    .landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }


    .landing-footer-v2__brand[b-w2nmzbtm49] {
        padding-inline: 0;
        margin-bottom: 5px;
    }


    .landing-footer-v2__column[b-w2nmzbtm49] {
        padding: 14px 0;
        border-top: 1px solid rgba(255,255,255,.05);
    }


    .landing-footer-v2__action-panel[b-w2nmzbtm49] {
        grid-column: auto;
    }


    .landing-footer-v2__bottom[b-w2nmzbtm49] {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* =========================================================
   FOOTER V2 — VISIBILITY FIX
   ========================================================= */

.landing-footer-v2 .landing-footer-v2__brand-head[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__brand-copy[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__column[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__links[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__links a[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__action-panel[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__action[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__bottom[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__bottom-links[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__bottom-links a[b-w2nmzbtm49] {
    opacity: 1 !important;
    visibility: visible !important;
}

.landing-footer-v2 .landing-footer-v2__brand-head[b-w2nmzbtm49] {
    display: inline-flex !important;
}

.landing-footer-v2 .landing-footer-v2__links[b-w2nmzbtm49] {
    display: flex !important;
    flex-direction: column !important;
}

    .landing-footer-v2 .landing-footer-v2__links a[b-w2nmzbtm49] {
        display: flex !important;
        color: #c4baad !important;
        -webkit-text-fill-color: #c4baad !important;
    }

        .landing-footer-v2 .landing-footer-v2__links a > span[b-w2nmzbtm49] {
            display: inline !important;
            opacity: 1 !important;
            visibility: visible !important;
            color: inherit !important;
        }

.landing-footer-v2 .landing-footer-v2__brand-copy strong[b-w2nmzbtm49] {
    display: block !important;
    color: #fff9ef !important;
}

.landing-footer-v2 .landing-footer-v2__brand-copy small[b-w2nmzbtm49] {
    display: block !important;
    color: #a99f91 !important;
}

.landing-footer-v2 .landing-footer-v2__action-panel[b-w2nmzbtm49] {
    display: block !important;
}

.landing-footer-v2 .landing-footer-v2__action[b-w2nmzbtm49] {
    display: flex !important;
}

.landing-footer-v2 .landing-footer-v2__bottom[b-w2nmzbtm49] {
    display: flex !important;
}

/* LANDING HERO GOFTITO V1
   Brand above title; legacy eyebrow/trust removed in Razor. */
.hero__copy[b-w2nmzbtm49] {
    transform: translateY(34px) !important;
}

.hero__brand[b-w2nmzbtm49] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: -40px !important;

}

.hero__brand-logo[b-w2nmzbtm49] {
    display: block;
    width: clamp(116px, 20vw, 280px);
    height: auto;
    max-height: 280px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    
    margin-bottom: 40px;
}

.hero__brand + h1[b-w2nmzbtm49] {
    margin-top: 8px !important;
}

@media (max-width: 1100px) {
    .hero__copy[b-w2nmzbtm49] {
        transform: translateY(20px) !important;
    }

    .hero__brand[b-w2nmzbtm49] {
        justify-content: center;
        margin-bottom: 8px !important;
    }

    .hero__brand-logo[b-w2nmzbtm49] {
        width: clamp(112px, 17vw, 146px);
    }
}

@media (max-width: 680px) {
    .hero__copy[b-w2nmzbtm49] {
        transform: translateY(12px) !important;
    }

    .hero__brand[b-w2nmzbtm49] {
        margin-bottom: 6px !important;
    }

    .hero__brand-logo[b-w2nmzbtm49] {
        width: 112px;
        max-height: 92px;
    }

    .hero__brand + h1[b-w2nmzbtm49] {
        margin-top: 4px !important;
    }
}





/* =========================================================
   GOFTITO — ULTRA SMOOTH MOTION
   ========================================================= */

.hero__brand-logo[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    /* کمک به compositor */
    will-change: transform, filter;
    translate: 0 0;
    /*
       دو انیمیشن جدا:
       1. فقط حرکت
       2. فقط انعکاس
    */
    animation: goftitoSmoothSway-b-w2nmzbtm49 7s cubic-bezier(.45, 0, .55, 1) infinite, goftitoSurfaceReflection-b-w2nmzbtm49 7s linear infinite !important;
}


/* =========================================================
   MOTION
   فقط Transform — بدون Filter
   ========================================================= */

@keyframes goftitoSmoothSway-b-w2nmzbtm49 {

    0% {
        transform: translate3d(0, 0, 0) perspective(1000px) rotateY(-12deg) rotateZ(-0.6deg);
    }

    50% {
        transform: translate3d(0, 0, 0) perspective(1000px) rotateY(12deg) rotateZ(0.6deg);
    }

    100% {
        transform: translate3d(0, 0, 0) perspective(1000px) rotateY(-12deg) rotateZ(-0.6deg);
    }
}


/* =========================================================
   REFLECTION
   تغییر بسیار محدود brightness
   بدون drop-shadow
   ========================================================= */

@keyframes goftitoSurfaceReflection-b-w2nmzbtm49 {

    0% {
        filter: brightness(.97);
    }

    18% {
        filter: brightness(1);
    }

    27% {
        filter: brightness(1.07);
    }

    32% {
        filter: brightness(1.18);
    }

    37% {
        filter: brightness(1.07);
    }

    45% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(.99);
    }

    63% {
        filter: brightness(1);
    }

    68% {
        filter: brightness(1.07);
    }

    72% {
        filter: brightness(1.18);
    }

    77% {
        filter: brightness(1.07);
    }

    84% {
        filter: brightness(1);
    }

    100% {
        filter: brightness(.97);
    }
}


@media (prefers-reduced-motion: reduce) {

    .hero__brand-logo[b-w2nmzbtm49] {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}



/* =========================================================
   GOFTITO — PREMIUM DYNAMIC GOLD SHADOW
   ========================================================= */

.hero__brand[b-w2nmzbtm49] {
    position: relative;
    overflow: visible !important;
}


.hero__logo-stage[b-w2nmzbtm49] {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    line-height: 0;
    overflow: visible !important;
    /*
       برای اینکه rotateY سایه واقعاً عمق داشته باشد
    */
    perspective: 1000px;
    isolation: isolate;
}


/* =========================================================
   SHADOW BODY
   ========================================================= */

.hero__logo-shadow[b-w2nmzbtm49] {
    position: absolute;
    /*
       دقیقاً مرکز خود لوگو
    */
    left: 50%;
    /*
       سایه نزدیک پایین لوگو
    */
    bottom: -2px;
    /*
       تقریباً هم‌عرض خود لوگو
    */
    width: 116%;
    height: 25px;
    z-index: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    /*
       دقیقاً همان مدت و easing لوگو
    */
    animation: goftitoShadow3D-b-w2nmzbtm49 7s cubic-bezier(.45, 0, .55, 1) infinite;
}


    /* =========================================================
   MAIN DARK SHADOW

   بخش تیره و نسبتاً مشخص سایه
   ========================================================= */

    .hero__logo-shadow[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: 2%;
        right: 2%;
        top: 30%;
        height: 25px;
        transform: translateY(-50%);
        border-radius: 50%;
        background: radial-gradient( ellipse at center, rgba(55, 39, 12, .42) 0%, rgba(55, 39, 12, .32) 20%, rgba(55, 39, 12, .19) 40%, rgba(55, 39, 12, .085) 58%, rgba(55, 39, 12, .025) 73%, transparent 88% );
        filter: blur(4px);
        opacity: .60;
        pointer-events: none;
    }


    /* =========================================================
   GOLDEN LIGHT SPILL

   رنگ طلایی خود لوگو روی سطح
   ========================================================= */

    .hero__logo-shadow[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        left: -2%;
        top: -5px;
        width: 124%;
        height: 40px;
        border-radius: 50%;
        background: radial-gradient( ellipse at center, rgba(255, 194, 40, .34) 0%, rgba(245, 174, 17, .25) 23%, rgba(231, 154, 8, .14) 43%, rgba(221, 142, 0, .060) 61%, rgba(221, 142, 0, .018) 74%, transparent 88% );
        filter: blur(9px);
        opacity: .42;
        pointer-events: none;
    }


/* =========================================================
   SECONDARY GOLD GLOW

   هاله وسیع‌تر و خیلی نرم‌تر
   ========================================================= */

.hero__shadow-gold[b-w2nmzbtm49] {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    width: 112%;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( ellipse at center, rgba(255, 205, 76, .20) 0%, rgba(244, 178, 30, .13) 30%, rgba(230, 155, 10, .055) 54%, transparent 82% );
    filter: blur(12px);
    opacity: .40;
    pointer-events: none;
}


/* =========================================================
   SHADOW 3D MOTION
   ---------------------------------------------------------
   لوگو:
       -12deg → +12deg → -12deg

   سایه هم دقیقاً همان زاویه را دنبال می‌کند.
   ========================================================= */

@keyframes goftitoShadow3D-b-w2nmzbtm49 {

    0% {
        transform: translate3d(-50%, 0, 0) perspective(1000px) rotateY(-12deg) rotateZ(-0.6deg) scaleX(.94);
        opacity: .88;
    }


    50% {
        transform: translate3d(-50%, 0, 0) perspective(1000px) rotateY(12deg) rotateZ(0.6deg) scaleX(.94);
        opacity: .96;
    }


    100% {
        transform: translate3d(-50%, 0, 0) perspective(1000px) rotateY(-12deg) rotateZ(-0.6deg) scaleX(.94);
        opacity: .88;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero__logo-shadow[b-w2nmzbtm49] {
        animation: none !important;
        transform: translate3d(-50%, 0, 0) scaleX(.94);
        opacity: .92;
    }
}


/* =========================================================
   PHONE — FINAL LAYER
   =========================================================
   The header above is a stack of !important overrides, so
   this layer prefixes "html body" to win on specificity
   instead of editing them; desktop is untouched.

   What a phone got before this:
   - the header kept four nav links, the language, sign-in and
     the call to action on one 375px row: the links overlapped
     the brand and the button ran off the screen;
   - the five workflow steps stayed five columns (a later
     !important rule beat the one-column phone rule), one word
     per line;
   - the three packages were three screens of scrolling.

   Now: a sticky compact header with a menu, the steps as a
   vertical timeline, packages as a swipeable row, and the
   call to action in a bar under the thumb.
   ========================================================= */

.public-mobile-menu[b-w2nmzbtm49],
.landing-mobile-cta[b-w2nmzbtm49] {
    display: none;
}

/* the compare section is the target of "#difference" */
.home-page section[id][b-w2nmzbtm49] {
    scroll-margin-top: 76px;
}


@media (max-width: 900px) {

    /* sticky needs no scrolling ancestor: hidden makes one, clip does not */
    html body .home-page[b-w2nmzbtm49] {
        overflow: clip !important;
        overflow-x: clip !important;
    }

    html body .home-page > .public-header[b-w2nmzbtm49] {
        position: sticky !important;
        top: 0 !important;
        min-height: 0 !important;
    }

        html body .home-page > .public-header > .public-header__inner[b-w2nmzbtm49] {
            width: calc(100% - 28px) !important;
            min-height: 64px !important;
            padding: 8px 0 !important;
            gap: 10px !important;
        }

    html body .home-page .public-header .public-nav[b-w2nmzbtm49],
    html body .home-page .public-header .signin-button[b-w2nmzbtm49] {
        display: none !important;
    }

    html body .home-page .public-header .public-header__actions[b-w2nmzbtm49] {
        min-width: 0 !important;
        margin-inline-start: auto !important;
    }

    html body .home-page .public-header .brand__mark[b-w2nmzbtm49] {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 13px !important;
    }

    html body .home-page .public-header .brand__copy small[b-w2nmzbtm49] {
        display: none !important;
    }

    html body .home-page .public-header .lang-button[b-w2nmzbtm49] {
        min-height: 40px !important;
        min-width: 44px !important;
    }


    /* ---- menu ---- */

    html body .home-page .public-mobile-menu[b-w2nmzbtm49] {
        display: block;
        flex: none;
    }

        html body .home-page .public-mobile-menu > summary[b-w2nmzbtm49] {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(188, 157, 99, .24);
            border-radius: 12px;
            background: rgba(255, 255, 255, .82);
            color: #4f473b;
            list-style: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

            html body .home-page .public-mobile-menu > summary[b-w2nmzbtm49]::-webkit-details-marker {
                display: none;
            }

            html body .home-page .public-mobile-menu > summary svg[b-w2nmzbtm49] {
                width: 21px;
                height: 21px;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.9;
                stroke-linecap: round;
            }

        html body .home-page .public-mobile-menu .public-mobile-menu__close[b-w2nmzbtm49],
        html body .home-page .public-mobile-menu[open] .public-mobile-menu__open[b-w2nmzbtm49] {
            display: none;
        }

        html body .home-page .public-mobile-menu[open] .public-mobile-menu__close[b-w2nmzbtm49] {
            display: block;
        }

        html body .home-page .public-mobile-menu[open] > summary[b-w2nmzbtm49] {
            border-color: transparent;
            background: #3b2f23;
            color: #fcd166;
        }

    html body .home-page .public-mobile-menu__panel[b-w2nmzbtm49] {
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 8px);
        z-index: 10;
        display: grid;
        gap: 12px;
        padding: 10px;
        border: 1px solid rgba(177, 137, 65, .18);
        border-radius: 22px;
        background: #fffdf8;
        box-shadow: 0 24px 60px rgba(45, 36, 25, .18);
        animation: landing-menu-in-b-w2nmzbtm49 .32s cubic-bezier(.16, 1, .3, 1) both;
    }

    html body .home-page .public-mobile-menu__links[b-w2nmzbtm49] {
        display: grid;
        gap: 2px;
    }

        html body .home-page .public-mobile-menu__links a[b-w2nmzbtm49],
        html body .home-page .public-mobile-menu__actions a[b-w2nmzbtm49] {
            display: flex !important;
            align-items: center;
            min-height: 48px;
            padding: 0 14px;
            border-radius: 14px;
            color: #3d362c;
            font-size: .92rem;
            font-weight: 800;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }

            html body .home-page .public-mobile-menu__links a:active[b-w2nmzbtm49] {
                background: rgba(216, 166, 52, .12);
            }

    html body .home-page .public-mobile-menu__actions[b-w2nmzbtm49] {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(177, 137, 65, .14);
    }

        html body .home-page .public-mobile-menu__actions a[b-w2nmzbtm49] {
            justify-content: center;
            border: 1px solid rgba(188, 157, 99, .24);
            font-size: .82rem;
        }

        html body .home-page .public-mobile-menu__actions .public-mobile-menu__signin[b-w2nmzbtm49] {
            border-color: transparent;
            background: #3b2f23;
            color: #fcd166;
        }


    /* ---- workflow: a vertical timeline ---- */

    html body .home-page .workflow-track[b-w2nmzbtm49] {
        padding-bottom: 0 !important;
    }

    html body .home-page .workflow-motion-svg[b-w2nmzbtm49] {
        display: none !important;
    }

    html body .home-page .workflow-cards[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 720px) {

    html body .home-page[b-w2nmzbtm49] {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    /* the bottom bar carries it on a phone */
    html body .home-page .public-header .header-cta[b-w2nmzbtm49] {
        display: none !important;
    }

    html body .home-page .workflow-cards[b-w2nmzbtm49] {
        position: relative !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

        /* the line the steps hang from */
        html body .home-page .workflow-cards[b-w2nmzbtm49]::before {
            content: "";
            position: absolute;
            top: 28px;
            bottom: 28px;
            inset-inline-start: 33px;
            width: 2px;
            border-radius: 2px;
            background: linear-gradient(180deg, rgba(242, 201, 81, .7), rgba(242, 201, 81, .15));
        }

    html body .home-page .workflow-step[b-w2nmzbtm49] {
        position: relative;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        padding: 16px !important;
        transform: none !important;
    }

    html body .home-page .workflow-step__top[b-w2nmzbtm49] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html body .home-page .workflow-step__number[b-w2nmzbtm49] {
        position: static !important;
        inset: auto !important;
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
    }

        html body .home-page .workflow-step__number small[b-w2nmzbtm49] {
            display: none !important;
        }

    html body .home-page .workflow-step__icon[b-w2nmzbtm49] {
        position: static !important;
        inset: auto !important;
        min-width: 44px !important;
        width: auto !important;
        height: 26px !important;
        padding: 0 7px !important;
        font-size: .58rem !important;
    }

    html body .home-page .workflow-step__content[b-w2nmzbtm49] {
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }

        html body .home-page .workflow-step__content h3[b-w2nmzbtm49] {
            margin: 4px 0 6px !important;
            font-size: 1rem !important;
            line-height: 1.6 !important;
            word-break: normal !important;
        }

        html body .home-page .workflow-step__content p[b-w2nmzbtm49] {
            font-size: .78rem !important;
            line-height: 1.9 !important;
            word-break: normal !important;
        }


    /* ---- packages: swipe sideways, as an app store does ---- */

    html body .home-page .landing-buy-grid[b-w2nmzbtm49] {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 84% !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 12px !important;
        margin-inline: -14px;
        padding: 6px 14px 18px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 14px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        html body .home-page .landing-buy-grid[b-w2nmzbtm49]::-webkit-scrollbar {
            display: none;
        }

    html body .home-page .landing-buy-card[b-w2nmzbtm49] {
        scroll-snap-align: start;
        grid-row: auto !important;
    }


    /* ---- bottom action bar ---- */

    html body .home-page .landing-mobile-cta[b-w2nmzbtm49] {
        position: fixed;
        inset-inline: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 6000;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(177, 137, 65, .2);
        border-radius: 22px;
        background: rgba(255, 253, 248, .9);
        -webkit-backdrop-filter: saturate(1.5) blur(20px);
        backdrop-filter: saturate(1.5) blur(20px);
        box-shadow: 0 16px 40px rgba(45, 36, 25, .18);
        animation: landing-cta-in-b-w2nmzbtm49 .5s .2s cubic-bezier(.16, 1, .3, 1) both;
    }

        html body .home-page .landing-mobile-cta a[b-w2nmzbtm49] {
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 0 18px;
            border-radius: 15px;
            font-size: .9rem;
            font-weight: 900;
            text-decoration: none;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }

    html body .home-page .landing-mobile-cta__secondary[b-w2nmzbtm49] {
        border: 1px solid rgba(188, 157, 99, .28);
        background: #fff;
        color: #4f473b !important;
    }

    html body .home-page .landing-mobile-cta__primary[b-w2nmzbtm49] {
        background: linear-gradient(180deg, #f2c951, #e5ad27);
        color: #553a04 !important;
        box-shadow: 0 10px 22px rgba(214, 161, 32, .25);
    }

        html body .home-page .landing-mobile-cta__primary svg[b-w2nmzbtm49] {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    html body .home-page[dir="rtl"] .landing-mobile-cta__primary svg[b-w2nmzbtm49] {
        transform: scaleX(-1);
    }
}


/* the header itself stays light after dark (its colours are literal),
   so its menu button does too; the panel and the bar follow the theme */

html[data-theme="dark"] body .home-page .public-mobile-menu__panel[b-w2nmzbtm49] {
    border-color: rgba(255, 226, 178, .14);
    background: #17120c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] body .home-page .public-mobile-menu__links a[b-w2nmzbtm49],
html[data-theme="dark"] body .home-page .public-mobile-menu__actions a[b-w2nmzbtm49] {
    color: #f6f2e8;
}

html[data-theme="dark"] body .home-page .landing-mobile-cta[b-w2nmzbtm49] {
    border-color: rgba(255, 226, 178, .14);
    background: rgba(24, 19, 12, .9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] body .home-page .landing-mobile-cta__secondary[b-w2nmzbtm49] {
    border-color: rgba(255, 226, 178, .18);
    background: rgba(255, 226, 178, .06);
    color: #f6f2e8 !important;
}


@keyframes landing-menu-in-b-w2nmzbtm49 {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes landing-cta-in-b-w2nmzbtm49 {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    html body .home-page .public-mobile-menu__panel[b-w2nmzbtm49],
    html body .home-page .landing-mobile-cta[b-w2nmzbtm49] {
        animation: none;
    }
}


/* =========================================================
   PACKAGE CARDS — QUALITY / INPUT LISTS
   =========================================================
   Each list was two columns inside a box that is itself half
   the card, so a column was ~110px: "تصویر / اسکن" and
   "تخصصی پیشرفته" broke onto two lines and the rows of the two
   columns stopped lining up. One item per row, never wrapped,
   with a fixed row height, so both boxes read as two tidy
   checklists of the same rhythm.
   ========================================================= */

.home-page .landing-buy-spec-list[b-w2nmzbtm49] {
    grid-template-columns: 1fr;
    gap: 2px;
}

    .home-page .landing-buy-spec-list li[b-w2nmzbtm49] {
        min-height: 28px;
        gap: 9px;
        padding: 0 4px;
        border-radius: 9px;
        white-space: nowrap;
    }

        .home-page .landing-buy-spec-list li > span:last-child[b-w2nmzbtm49] {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .home-page .landing-buy-spec-list li.on[b-w2nmzbtm49] {
            font-weight: 800;
        }

        .home-page .landing-buy-spec-list li.off[b-w2nmzbtm49] {
            font-weight: 600;
        }

.home-page .landing-buy-mark[b-w2nmzbtm49] {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
}

.home-page .landing-buy-spec-title[b-w2nmzbtm49] {
    margin-bottom: 6px;
    padding-bottom: 7px;
    border-bottom: 1px dashed rgba(199, 190, 175, .6);
}

/* the grid is right-to-left so the cards keep their order in both
   languages; inside a card, English reads left to right */
.home-page[dir="ltr"] .landing-buy-card[b-w2nmzbtm49] {
    direction: ltr;
}

/* Goftito logo in the header and footer brand boxes. */
.brand__mark .goftito-mark[b-w2nmzbtm49],
.landing-footer-v2__mark .goftito-mark[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}

/* =========================================================
   SERVICES MENU AND FOOTER COLUMN
   The links to the service pages. The menu opens on hover and
   on keyboard focus, with no script: the page is prerendered.
   ========================================================= */

.home-page .public-header .public-nav__services[b-w2nmzbtm49] {
    position: relative;
}

.home-page .public-header .public-nav__services-trigger[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #655d51;
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

    .home-page .public-header .public-nav__services-trigger svg[b-w2nmzbtm49] {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s ease;
    }

.home-page .public-header .public-nav__services:hover .public-nav__services-trigger[b-w2nmzbtm49],
.home-page .public-header .public-nav__services:focus-within .public-nav__services-trigger[b-w2nmzbtm49] {
    color: #9a690b;
    background: rgba(216,166,52,.09);
}

    .home-page .public-header .public-nav__services:hover .public-nav__services-trigger svg[b-w2nmzbtm49],
    .home-page .public-header .public-nav__services:focus-within .public-nav__services-trigger svg[b-w2nmzbtm49] {
        transform: rotate(180deg);
    }

.home-page .public-header .public-nav__services-menu[b-w2nmzbtm49] {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 40;
    display: grid;
    gap: 4px;
    min-width: 290px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid rgba(155,125,48,.22);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 24px 50px rgba(59,48,23,.18);
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
}

    .home-page .public-header .public-nav__services-menu[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: -12px 0 auto;
        height: 12px;
    }

.home-page .public-header .public-nav__services:hover .public-nav__services-menu[b-w2nmzbtm49],
.home-page .public-header .public-nav__services:focus-within .public-nav__services-menu[b-w2nmzbtm49] {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

.home-page .public-header .public-nav__services-menu a[b-w2nmzbtm49] {
    display: grid !important;
    gap: 2px;
    padding: 11px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .2s ease;
}

    .home-page .public-header .public-nav__services-menu a:hover[b-w2nmzbtm49] {
        background: rgba(242,197,79,.12);
    }

    .home-page .public-header .public-nav__services-menu a strong[b-w2nmzbtm49] {
        color: #221d18;
        font-size: 13px;
        font-weight: 750;
    }

    .home-page .public-header .public-nav__services-menu a small[b-w2nmzbtm49] {
        color: #958b7b;
        font-size: 11.5px;
        font-weight: 600;
    }

.home-page .public-mobile-menu__group[b-w2nmzbtm49] {
    display: block;
    margin-top: 8px;
    padding: 10px 14px 4px;
    border-top: 1px solid rgba(155,125,48,.18);
    color: #b78507;
    font-size: 12px;
    font-weight: 800;
}

.landing-footer-v2__grid[b-w2nmzbtm49] {
    grid-template-columns: 1.35fr .9fr .72fr .72fr 1fr;
}

@media (max-width: 1050px) {

    .landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1.25fr .9fr .75fr .75fr;
    }
}

@media (max-width: 720px) {

    .landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FORMAT RING — PHONE
   The section was 645px tall for a 215px row of cards, and the
   cards were tall and narrow. A shorter scene, cards closer to
   square, and the decorative curves moved out of the cards' way.
   ========================================================= */

@media (max-width: 760px) {

    html body .home-page .format-ring[b-w2nmzbtm49] {
        --ring-card-width: 92px;
        --ring-card-height: 118px;
        --ring-gap: 8px;
        padding: 34px 0 26px !important;
    }

    html body .home-page .format-ring__scene[b-w2nmzbtm49] {
        height: 196px !important;
        margin-top: 12px !important;
    }

    html body .home-page .format-ring .formats-reference__viewport[b-w2nmzbtm49] {
        top: 10px !important;
        height: 176px !important;
        /* 900px is the desktop camera; on a 375px screen it flattens the ring */
        perspective: 420px !important;
    }

    html body .home-page .format-ring .formats-reference__track[b-w2nmzbtm49] {
        top: 26px !important;
    }

    html body .home-page .format-ring .format-ring__orbit[b-w2nmzbtm49] {
        display: none !important;
    }

    /* half as tall, so half as curved; the line stays where it was */
    html body .home-page .format-ring .format-ring__scene[b-w2nmzbtm49]::before {
        height: 96px !important;
        top: -64px !important;
    }

    html body .home-page .format-ring .format-ring__scene[b-w2nmzbtm49]::after {
        height: 96px !important;
        bottom: -64px !important;
    }

    html body .home-page .format-ring-card__front[b-w2nmzbtm49] {
        padding: 12px 6px 9px !important;
        border-radius: 18px !important;
    }
}

/* the services menu closes right after a choice, until the pointer leaves (public-pages.js) */
.home-page .public-header .public-nav__services.is-closed .public-nav__services-menu[b-w2nmzbtm49] {
    opacity: 0 !important;
    visibility: hidden !important;
    translate: -50% 6px !important;
}

/* WebKit (iPhone, iPad, Mac Safari) drops the WebM's alpha and draws it on black;
   hero-alpha-video.js plays the stacked-alpha MP4 on a canvas there instead. */
@supports (background: -webkit-named-image(i)) {
    video.hero-motion-video[data-stacked-alpha][b-w2nmzbtm49] {
        display: none !important;
    }
}


/* =========================================================
   WORKFLOW — PHONE AND TABLET LIGHT
   On a desktop workflow-motion-v4.js runs a light along the
   rail from step to step; that drawing is built for the row
   of five and is hidden below 1180px, where the steps sit
   two to a row (tablet) or one under another (phone).
   Here the light goes round the border of one step at a
   time, 01 to 05, and starts again: each step is lit for
   2.2s of an 11s turn.
   ========================================================= */

@property --wfm-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes wfm-sweep-b-w2nmzbtm49 {
    to {
        --wfm-angle: 360deg;
    }
}

@keyframes wfm-turn-b-w2nmzbtm49 {
    0% { opacity: 0; }
    3% { opacity: 1; }
    19% { opacity: 1; }
    23% { opacity: 0; }
    100% { opacity: 0; }
}

@media (max-width: 1180px) {

    html body .home-page .workflow-step[b-w2nmzbtm49] {
        --wfm-i: 0;
        isolation: isolate;
    }

    html body .home-page .workflow-step[data-workflow-step="1"][b-w2nmzbtm49] { --wfm-i: 1; }
    html body .home-page .workflow-step[data-workflow-step="2"][b-w2nmzbtm49] { --wfm-i: 2; }
    html body .home-page .workflow-step[data-workflow-step="3"][b-w2nmzbtm49] { --wfm-i: 3; }
    html body .home-page .workflow-step[data-workflow-step="4"][b-w2nmzbtm49] { --wfm-i: 4; }

    /* the light running round the border */
    html body .home-page .workflow-step[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 1.6px;
        border-radius: inherit;
        background: conic-gradient(
            from var(--wfm-angle),
            transparent 0deg,
            transparent 220deg,
            rgba(252, 209, 102, .35) 270deg,
            #fcd166 318deg,
            #fff3c9 338deg,
            rgba(252, 209, 102, .2) 352deg,
            transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        filter: drop-shadow(0 0 5px rgba(252, 209, 102, .75));
        opacity: 0;
        pointer-events: none;
        animation:
            wfm-sweep-b-w2nmzbtm49 2.2s linear infinite,
            wfm-turn-b-w2nmzbtm49 11s ease-in-out calc(var(--wfm-i) * 2.2s) infinite both;
    }

    /* a soft gold wash inside the step while it is lit */
    html body .home-page .workflow-step[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(120% 90% at 85% 0%, rgba(252, 209, 102, .16), transparent 60%);
        box-shadow: 0 14px 34px rgba(252, 209, 102, .14);
        opacity: 0;
        pointer-events: none;
        animation: wfm-turn-b-w2nmzbtm49 11s ease-in-out calc(var(--wfm-i) * 2.2s) infinite both;
    }
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {

    html body .home-page .workflow-step[b-w2nmzbtm49]::after,
    html body .home-page .workflow-step[b-w2nmzbtm49]::before {
        animation: none;
        opacity: 0;
    }
}

/* ENGLISH PAGE (dir=ltr) - START */

/*
   The Persian page is untouched by everything below: each rule is
   scoped to the English page.
*/

/*
   Hero title: Latin letters reach further above and below the line
   than the Persian font, and the gold is painted only inside the
   element's box (background-clip: text), so at line-height 1.02 the
   lines ran into each other and the tail of "g" in "language" was cut.
*/
.home-page[dir="ltr"] .hero h1[b-w2nmzbtm49] {
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
}

    .home-page[dir="ltr"] .hero h1 strong[b-w2nmzbtm49] {
        padding-bottom: .16em !important;
    }

/*
   Hero metric cards: the same card mirrored, so the icon and the
   number come first, at the left, and the notes read from the left.
*/
.home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card[b-w2nmzbtm49] {
    grid-template-columns: 56% 44% !important;
    grid-template-areas: "main notes" !important;
}

    .home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card > .hero-metric-notes[b-w2nmzbtm49],
    .home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card > .hero-metric-notes span[b-w2nmzbtm49],
    .home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49],
    .home-page[dir="ltr"] .container.hero-metrics .hero-metric-copy[b-w2nmzbtm49] {
        direction: ltr !important;
        text-align: left !important;
    }

    /* Latin is wider than the Persian font: a little more room for the words. */
    .home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card > .hero-metric-notes[b-w2nmzbtm49],
    .home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49] {
        padding-inline: 12px !important;
    }

    .home-page[dir="ltr"] .container.hero-metrics .hero-metric-card:first-child .hero-metric-copy strong[b-w2nmzbtm49] {
        font-size: 1.2rem !important;
    }

    .home-page[dir="ltr"] .container.hero-metrics > .hero-metric-card > .hero-metric-main[b-w2nmzbtm49] {
        border-left: 0 !important;
        border-right: 1px solid var(--line) !important;
    }

    .home-page[dir="ltr"] .container.hero-metrics .hero-metric-copy strong[b-w2nmzbtm49],
    .home-page[dir="ltr"] .container.hero-metrics .hero-metric-copy small[b-w2nmzbtm49] {
        text-align: left !important;
    }

/*
   "Translate every file type, without limitations" is a third longer
   than the Persian heading and was kept on one line, so it ran past
   the page. A size that fits one line, and a break before the gold
   words if a wider font still needs it.
*/
@media (min-width: 1080px) {
    .home-page[dir="ltr"] .format-ring__header h2[b-w2nmzbtm49] {
        font-size: min(3.1rem, 3.6vw);
        white-space: normal;
        text-wrap: balance;
    }

        .home-page[dir="ltr"] .format-ring__header h2 span[b-w2nmzbtm49] {
            white-space: nowrap;
        }
}

/* Comparison: the input on the left, the output on the right. */
.home-page[dir="ltr"] .landing-compare-pane--input[b-w2nmzbtm49] {
    order: -1;
}

.home-page[dir="ltr"] .landing-compare-pane--output[b-w2nmzbtm49] {
    order: 1;
}

/*
   The English title is longer than the Persian one and runs close to
   the animation beside it: move the animation, with its rings, a
   little towards the right while the two sit side by side.
*/
@media (min-width: 1101px) {
    .home-page[dir="ltr"] .hero-video-stage[b-w2nmzbtm49] {
        translate: clamp(40px, 6vw, 90px) 0;
    }
}

/* ENGLISH PAGE (dir=ltr) - END */
/* _content/AITranslationPlatform.Web/Components/Account/Pages/Login.razor.rz.scp.css */
/* =========================================================
   DESIGN TOKENS
   ========================================================= */

.auth-page[b-zcntmlmtst] {
    --page-bg: #f7f8f9;
    --card-bg: #ffffff;
    --text: #182033;
    --text-secondary: #454d5e;
    --muted: #a1a8b4;
    --primary: #1138b3;
    --primary-hover: #0d2e99;
    --primary-soft: #eef2ff;
    --primary-medium: #dce4ff;
    --border: #e8ebf0;
    --input-bg: #fafbfc;
    --danger: #d14343;
    --danger-soft: #fff3f3;
    --shadow: 0 30px 70px rgba(32, 42, 68, .10);
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--page-bg);
    color: var(--text);
}


    /* =========================================================
   DIRECTION
   ========================================================= */

    .auth-page[dir="rtl"][b-zcntmlmtst] {
        direction: rtl;
        text-align: right;
        font-family: "IRANSansX", Tahoma, "Segoe UI", Arial, sans-serif;
    }

    .auth-page[dir="ltr"][b-zcntmlmtst] {
        direction: ltr;
        text-align: left;
        font-family: Inter, "Segoe UI", Arial, sans-serif;
    }


/* =========================================================
   BACKGROUND
   ========================================================= */

.auth-background[b-zcntmlmtst] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.background-shape[b-zcntmlmtst] {
    position: absolute;
    border-radius: 999px;
    filter: blur(.1px);
}

.shape-a[b-zcntmlmtst] {
    width: 500px;
    height: 500px;
    top: -300px;
    left: -230px;
    background: radial-gradient( circle, rgba(31, 76, 197, .10), rgba(31, 76, 197, 0) 70%);
}

.shape-b[b-zcntmlmtst] {
    width: 560px;
    height: 560px;
    right: -280px;
    bottom: -340px;
    background: radial-gradient( circle, rgba(17, 56, 179, .075), rgba(17, 56, 179, 0) 70%);
}

.background-dot[b-zcntmlmtst] {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .2;
}

.dot-a[b-zcntmlmtst] {
    top: 20%;
    left: 17%;
}

.dot-b[b-zcntmlmtst] {
    right: 15%;
    bottom: 24%;
}


/* =========================================================
   HEADER
   ========================================================= */

.auth-header[b-zcntmlmtst] {
    width: min(100% - 64px, 1360px);
    height: 88px;
    margin-inline: auto;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-brand[b-zcntmlmtst] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.brand-symbol[b-zcntmlmtst] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: var(--primary);
    box-shadow: 0 9px 22px rgba(17, 56, 179, .20);
}

    .brand-symbol svg[b-zcntmlmtst] {
        width: 24px;
    }

.brand-name[b-zcntmlmtst] {
    font-size: .93rem;
    font-weight: 720;
    letter-spacing: -.025em;
}

.auth-page[dir="rtl"] .brand-name[b-zcntmlmtst] {
    letter-spacing: 0;
}

.header-actions[b-zcntmlmtst] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.header-control[b-zcntmlmtst] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .68);
    color: var(--text-secondary);
    text-decoration: none;
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}

    .header-control:hover[b-zcntmlmtst] {
        color: var(--primary);
        border-color: rgba(17, 56, 179, .25);
        transform: translateY(-1px);
    }

.language-control[b-zcntmlmtst] {
    min-width: 44px;
    padding-inline: 12px;
    font-size: .72rem;
    font-weight: 700;
}

.theme-control[b-zcntmlmtst] {
    width: 40px;
    padding: 0;
}

    .theme-control svg[b-zcntmlmtst] {
        width: 17px;
        height: 17px;
    }

.theme-dark-icon[b-zcntmlmtst] {
    display: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.auth-content[b-zcntmlmtst] {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 50px;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.interaction-card[b-zcntmlmtst] {
    width: min(100%, 480px);
    position: relative;
    overflow: hidden;
    padding: 42px 42px 25px;
    border: 1px solid rgba(226, 230, 237, .92);
    border-radius: 28px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    animation: cardAppear-b-zcntmlmtst .55s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes cardAppear-b-zcntmlmtst {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.interaction-step[b-zcntmlmtst] {
    animation: stepEnter-b-zcntmlmtst .48s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes stepEnter-b-zcntmlmtst {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.auth-page[dir="rtl"] .interaction-step[b-zcntmlmtst] {
    animation-name: stepEnterRtl-b-zcntmlmtst;
}

@keyframes stepEnterRtl-b-zcntmlmtst {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   VISUAL
   ========================================================= */

.visual-area[b-zcntmlmtst] {
    height: 176px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.visual-circle[b-zcntmlmtst] {
    width: 146px;
    height: 146px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #f0f3ff, #fafbff);
}

.visual-ring[b-zcntmlmtst] {
    position: absolute;
    border: 1px solid rgba(17, 56, 179, .10);
    border-radius: 50%;
}

.ring-one[b-zcntmlmtst] {
    inset: -10px;
    animation: ringPulse-b-zcntmlmtst 3.2s ease-in-out infinite;
}

.ring-two[b-zcntmlmtst] {
    inset: -23px;
    opacity: .45;
    animation: ringPulse-b-zcntmlmtst 3.2s .45s ease-in-out infinite;
}

@keyframes ringPulse-b-zcntmlmtst {
    0%, 100% {
        transform: scale(.96);
        opacity: .35;
    }

    50% {
        transform: scale(1.035);
        opacity: .9;
    }
}


/* =========================================================
   PHONE ART
   ========================================================= */

.phone-device[b-zcntmlmtst] {
    width: 67px;
    height: 108px;
    position: relative;
    padding: 10px 7px 8px;
    border: 2px solid var(--text);
    border-radius: 15px;
    background: white;
    box-shadow: 0 12px 25px rgba(32, 42, 68, .13);
    transform: rotate(-4deg);
    animation: phoneFloat-b-zcntmlmtst 4s ease-in-out infinite;
}

.auth-page[dir="rtl"] .phone-device[b-zcntmlmtst] {
    transform: rotate(4deg);
}

@keyframes phoneFloat-b-zcntmlmtst {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -5px;
    }
}

.phone-speaker[b-zcntmlmtst] {
    width: 19px;
    height: 3px;
    margin: 0 auto 13px;
    border-radius: 999px;
    background: #d3d7df;
}

.phone-screen[b-zcntmlmtst] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-message-line[b-zcntmlmtst] {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: #dfe3ea;
}

    .phone-message-line.line-one[b-zcntmlmtst] {
        width: 39px;
        margin-bottom: 6px;
    }

    .phone-message-line.line-two[b-zcntmlmtst] {
        width: 28px;
        margin-bottom: 16px;
    }

.phone-code-dots[b-zcntmlmtst] {
    display: flex;
    gap: 4px;
}

    .phone-code-dots span[b-zcntmlmtst] {
        width: 6px;
        height: 6px;
        border-radius: 2px;
        background: var(--primary);
        animation: codeDot-b-zcntmlmtst 1.6s ease-in-out infinite;
    }

        .phone-code-dots span:nth-child(2)[b-zcntmlmtst] {
            animation-delay: .12s;
        }

        .phone-code-dots span:nth-child(3)[b-zcntmlmtst] {
            animation-delay: .24s;
        }

        .phone-code-dots span:nth-child(4)[b-zcntmlmtst] {
            animation-delay: .36s;
        }

@keyframes codeDot-b-zcntmlmtst {
    0%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.floating-check[b-zcntmlmtst] {
    width: 34px;
    height: 34px;
    position: absolute;
    right: 3px;
    bottom: 16px;
    display: grid;
    place-items: center;
    border: 4px solid white;
    border-radius: 50%;
    color: white;
    background: var(--primary);
    box-shadow: 0 7px 15px rgba(17, 56, 179, .22);
    animation: checkPop-b-zcntmlmtst 2.7s ease-in-out infinite;
}

    .floating-check svg[b-zcntmlmtst] {
        width: 17px;
    }

@keyframes checkPop-b-zcntmlmtst {
    0%, 70%, 100% {
        transform: scale(1);
    }

    80% {
        transform: scale(1.12);
    }
}


/* =========================================================
   OTP VISUAL
   ========================================================= */

.message-card[b-zcntmlmtst] {
    width: 108px;
    padding: 14px 13px;
    border: 1px solid #e8ebf0;
    border-radius: 15px;
    background: white;
    box-shadow: 0 14px 25px rgba(32, 42, 68, .11);
    transform: rotate(3deg);
    animation: messageFloat-b-zcntmlmtst 4s ease-in-out infinite;
}

.auth-page[dir="rtl"] .message-card[b-zcntmlmtst] {
    transform: rotate(-3deg);
}

@keyframes messageFloat-b-zcntmlmtst {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -5px;
    }
}

.message-header[b-zcntmlmtst] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 13px;
    direction: ltr;
    color: var(--text-secondary);
    font-size: .43rem;
    font-weight: 700;
}

.message-app-icon[b-zcntmlmtst] {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--primary);
    color: white;
    font-size: .48rem;
}

.message-lines[b-zcntmlmtst] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

    .message-lines span[b-zcntmlmtst] {
        height: 4px;
        border-radius: 999px;
        background: #e2e5eb;
    }

        .message-lines span:first-child[b-zcntmlmtst] {
            width: 100%;
        }

        .message-lines span:last-child[b-zcntmlmtst] {
            width: 66%;
        }

.message-card strong[b-zcntmlmtst] {
    display: block;
    text-align: center;
    direction: ltr;
    color: var(--primary);
    font-size: .8rem;
    letter-spacing: .14em;
}

.floating-sms[b-zcntmlmtst] {
    width: 34px;
    height: 34px;
    position: absolute;
    left: 4px;
    bottom: 16px;
    display: grid;
    place-items: center;
    border: 4px solid white;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    box-shadow: 0 7px 15px rgba(17, 56, 179, .22);
}

    .floating-sms svg[b-zcntmlmtst] {
        width: 16px;
    }


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.step-copy[b-zcntmlmtst] {
    margin-bottom: 27px;
    text-align: center;
}

.step-label[b-zcntmlmtst] {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: .66rem;
    font-weight: 760;
    letter-spacing: .08em;
}

.auth-page[dir="rtl"] .step-label[b-zcntmlmtst] {
    letter-spacing: 0;
}

.step-copy h1[b-zcntmlmtst] {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 1.72rem;
    line-height: 1.35;
    font-weight: 760;
    letter-spacing: -.035em;
}

.auth-page[dir="rtl"] .step-copy h1[b-zcntmlmtst] {
    letter-spacing: 0;
}

.step-copy p[b-zcntmlmtst] {
    max-width: 365px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: .79rem;
    line-height: 1.85;
}

.verified-phone[b-zcntmlmtst] {
    display: block;
    width: fit-content;
    margin: 9px auto 0;
    direction: ltr;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: .035em;
}


/* =========================================================
   FORM
   ========================================================= */

.auth-form[b-zcntmlmtst] {
    width: 100%;
}

.field[b-zcntmlmtst] {
    margin-bottom: 16px;
}

    .field label[b-zcntmlmtst] {
        display: block;
        margin-bottom: 8px;
        color: var(--text-secondary);
        font-size: .72rem;
        font-weight: 650;
    }

.auth-page[dir="rtl"] .field label[b-zcntmlmtst] {
    text-align: right;
}

.auth-page[dir="ltr"] .field label[b-zcntmlmtst] {
    text-align: left;
}


/* =========================================================
   PHONE INPUT
   Country code ALWAYS on the left
   ========================================================= */

.phone-field[b-zcntmlmtst] {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    /*
       خیلی مهم:
       شماره و +98 چه در فارسی و چه انگلیسی
       همیشه از چپ به راست چیده می‌شوند.
    */
    direction: ltr !important;
    flex-direction: row !important;
    position: relative;
    overflow: hidden;
    border: 1px solid #dde3ec;
    border-radius: 18px;
    background: linear-gradient( 180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 2px 3px rgba(16, 24, 40, .02), 0 7px 20px rgba(16, 24, 40, .035);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}


    /* subtle highlight */
    .phone-field[b-zcntmlmtst]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient( 110deg, rgba(17, 56, 179, .035), transparent 34%);
        opacity: 0;
        transition: opacity .22s ease;
    }


    .phone-field:hover[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .25);
        box-shadow: 0 3px 5px rgba(16, 24, 40, .025), 0 10px 25px rgba(16, 24, 40, .055);
    }


        .phone-field:hover[b-zcntmlmtst]::before {
            opacity: 1;
        }


    .phone-field:focus-within[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .72);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(17, 56, 179, .075), 0 10px 30px rgba(17, 56, 179, .08);
        transform: translateY(-1px);
    }


/* =========================================================
   COUNTRY PREFIX
   ========================================================= */

.country-section[b-zcntmlmtst] {
    height: 100%;
    min-width: 105px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    /*
       Prefix هم مستقل از زبان همیشه LTR
    */
    direction: ltr !important;
    position: relative;
    background: linear-gradient( 135deg, rgba(17, 56, 179, .055), rgba(31, 76, 197, .025));
    color: var(--text);
}


    /* separator */
    .country-section[b-zcntmlmtst]::after {
        content: "";
        position: absolute;
        right: 0;
        top: 14px;
        bottom: 14px;
        width: 1px;
        background: linear-gradient( to bottom, transparent, #dce1e9 20%, #dce1e9 80%, transparent);
    }


/* flag gets its own small surface */
.country-flag[b-zcntmlmtst] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(16, 24, 40, .055);
    border-radius: 9px;
    background: #ffffff;
    font-size: .94rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .045);
}


.country-number[b-zcntmlmtst] {
    color: #273142;
    font-size: .86rem;
    font-weight: 750;
    letter-spacing: .015em;
}


/*
   دیگر country-divider قبلی لازم نیست
   چون separator را با ::after ساختیم.
*/
.country-divider[b-zcntmlmtst] {
    display: none;
}


/* =========================================================
   NUMBER INPUT
   ========================================================= */

[b-zcntmlmtst] .phone-number {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text);
    direction: ltr !important;
    text-align: left !important;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .075em;
    caret-color: var(--primary);
    appearance: none !important;
    -webkit-appearance: none !important;
}


    [b-zcntmlmtst] .phone-number:focus,
    [b-zcntmlmtst] .phone-number:focus-visible,
    [b-zcntmlmtst] .phone-number:hover {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }


    [b-zcntmlmtst] .phone-number.valid,
    [b-zcntmlmtst] .phone-number.modified,
    [b-zcntmlmtst] .phone-number.invalid {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }


    [b-zcntmlmtst] .phone-number::placeholder {
        color: #b4bbc7;
        font-size: .96rem;
        font-weight: 450;
        letter-spacing: .065em;
        opacity: 1;
    }


/* Blazor validation classes */
.phone-number.valid[b-zcntmlmtst],
.phone-number.modified[b-zcntmlmtst],
.phone-number.invalid[b-zcntmlmtst] {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.continue-button[b-zcntmlmtst] {
    width: 100%;
    height: 57px;
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(17, 56, 179, .17);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .continue-button:hover[b-zcntmlmtst] {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 15px 29px rgba(17, 56, 179, .23);
    }

    .continue-button:active[b-zcntmlmtst] {
        transform: translateY(0);
    }

.button-content[b-zcntmlmtst] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: .82rem;
    font-weight: 700;
}

    .button-content svg[b-zcntmlmtst] {
        width: 17px;
        height: 17px;
    }

.auth-page[dir="rtl"] .button-content svg[b-zcntmlmtst] {
    transform: scaleX(-1);
}

.button-loading[b-zcntmlmtst] {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.continue-button.is-loading .button-content[b-zcntmlmtst] {
    visibility: hidden;
}

.continue-button.is-loading .button-loading[b-zcntmlmtst] {
    display: flex;
}

.button-spinner[b-zcntmlmtst] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.36);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-zcntmlmtst .7s linear infinite;
}

@keyframes spin-b-zcntmlmtst {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   PRIVACY
   ========================================================= */

.privacy-note[b-zcntmlmtst] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    font-size: .66rem;
}

    .privacy-note svg[b-zcntmlmtst] {
        width: 14px;
        height: 14px;
    }


/* =========================================================
   ERROR
   ========================================================= */

.auth-message[b-zcntmlmtst] {
    margin-bottom: 17px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 11px;
    font-size: .7rem;
    line-height: 1.6;
}

.auth-error[b-zcntmlmtst] {
    border: 1px solid rgba(209, 67, 67, .14);
    background: var(--danger-soft);
    color: var(--danger);
}

.message-symbol[b-zcntmlmtst] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(209, 67, 67, .10);
    font-size: .68rem;
    font-weight: 800;
}


/* =========================================================
   BACK
   ========================================================= */

.back-control[b-zcntmlmtst] {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -4px;
    color: var(--muted);
    text-decoration: none;
    font-size: .67rem;
    transition: color .2s ease;
}

    .back-control:hover[b-zcntmlmtst] {
        color: var(--primary);
    }

    .back-control svg[b-zcntmlmtst] {
        width: 15px;
    }

.auth-page[dir="rtl"] .back-control svg[b-zcntmlmtst] {
    transform: scaleX(-1);
}


/* =========================================================
   SIX OTP BOXES
   ========================================================= */

.otp-input-area[b-zcntmlmtst] {
    margin-bottom: 17px;
}

/* =========================================================
   REAL OTP INPUT - MUST STAY HIDDEN
   ========================================================= */

[b-zcntmlmtst] .otp-hidden-input {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

    [b-zcntmlmtst] .otp-hidden-input:focus,
    [b-zcntmlmtst] .otp-hidden-input:focus-visible,
    [b-zcntmlmtst] .otp-hidden-input:hover,
    [b-zcntmlmtst] .otp-hidden-input.valid,
    [b-zcntmlmtst] .otp-hidden-input.modified,
    [b-zcntmlmtst] .otp-hidden-input.invalid {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

/* =========================================================
   SIX OTP BOXES - IMPROVED LAYOUT
   ========================================================= */

.otp-input-area[b-zcntmlmtst] {
    margin-bottom: 19px;
}

.otp-digits[b-zcntmlmtst] {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: ltr;
}

.otp-digit[b-zcntmlmtst] {
    width: 52px;
    height: 58px;
    flex: 0 0 52px;
    border: 1px solid var(--border);
    border-radius: 14px;
    outline: none;
    background: var(--input-bg);
    color: var(--text);
    text-align: center;
    font-size: 1.18rem;
    font-weight: 750;
    caret-color: var(--primary);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

    .otp-digit:hover[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .24);
    }

    .otp-digit:focus[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .68);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(17, 56, 179, .08);
        transform: translateY(-2px);
    }

    .otp-digit.has-value[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .34);
        background: var(--primary-soft);
        color: var(--primary);
    }

    .otp-digit:hover[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .23);
    }

    .otp-digit:focus[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .62);
        background: white;
        box-shadow: 0 0 0 3px rgba(17, 56, 179, .07);
        transform: translateY(-2px);
    }

    .otp-digit.has-value[b-zcntmlmtst] {
        border-color: rgba(17, 56, 179, .35);
        background: var(--primary-soft);
        color: var(--primary);
    }


/* =========================================================
   REMEMBER
   ========================================================= */

.remember-device[b-zcntmlmtst] {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: .68rem;
    cursor: pointer;
}

    .remember-device input[b-zcntmlmtst] {
        width: 15px;
        height: 15px;
        accent-color: var(--primary);
    }


/* =========================================================
   RESEND
   ========================================================= */

.resend-section[b-zcntmlmtst] {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    font-size: .67rem;
}

    .resend-section form[b-zcntmlmtst] {
        margin: 0;
    }

.resend-button[b-zcntmlmtst] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .resend-button:hover:not(:disabled)[b-zcntmlmtst] {
        text-decoration: underline;
    }

    .resend-button:disabled[b-zcntmlmtst] {
        color: var(--muted);
        cursor: default;
    }


/* =========================================================
   FOOTERS
   ========================================================= */

.card-footer[b-zcntmlmtst] {
    margin-top: 27px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    text-align: center;
    font-size: .59rem;
    line-height: 1.8;
}

.page-footer[b-zcntmlmtst] {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--muted);
    font-size: .59rem;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.validation-message[b-zcntmlmtst] {
    display: block;
    margin-top: 7px;
    color: var(--danger);
    font-size: .65rem;
}





/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .auth-header[b-zcntmlmtst] {
        width: calc(100% - 32px);
        height: 70px;
    }

    .brand-symbol[b-zcntmlmtst] {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .brand-name[b-zcntmlmtst] {
        display: none;
    }

    .auth-content[b-zcntmlmtst] {
        align-items: flex-start;
        padding: 22px 14px 35px;
    }

    .interaction-card[b-zcntmlmtst] {
        width: 100%;
        padding: 31px 22px 21px;
        border-radius: 24px;
    }

    .visual-area[b-zcntmlmtst] {
        height: 150px;
        margin-bottom: 14px;
    }

    .visual-circle[b-zcntmlmtst] {
        width: 126px;
        height: 126px;
    }

    .step-copy h1[b-zcntmlmtst] {
        font-size: 1.48rem;
    }

    .step-copy p[b-zcntmlmtst] {
        font-size: .74rem;
    }

    .phone-field[b-zcntmlmtst] {
        height: 56px;
    }

    .otp-digits[b-zcntmlmtst] {
        gap: 6px;
    }

    .otp-digit[b-zcntmlmtst] {
        border-radius: 10px;
        font-size: 1.08rem;
    }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (max-width: 370px) {

    .interaction-card[b-zcntmlmtst] {
        padding-inline: 17px;
    }

    .country-section[b-zcntmlmtst] {
        padding-inline: 10px 7px;
    }

    .phone-number[b-zcntmlmtst] {
        padding-inline: 10px;
    }

    .otp-digits[b-zcntmlmtst] {
        gap: 4px;
    }
}



/* =========================================================
   AUTH STATE TRANSITIONS
   ========================================================= */

.interaction-card[b-zcntmlmtst] {
    width: 100%;
    max-width: 480px;
    transition: max-width .55s cubic-bezier(.22, 1, .36, 1), transform .38s cubic-bezier(.22, 1, .36, 1), opacity .30s ease, padding .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}


    /* PHONE -> OTP */

    .interaction-card.phone-state[b-zcntmlmtst] {
        max-width: 480px;
    }

    .interaction-card.otp-state[b-zcntmlmtst] {
        max-width: 560px;
        animation: otpCardMorph-b-zcntmlmtst .58s cubic-bezier(.22, 1, .36, 1) both;
    }


@keyframes otpCardMorph-b-zcntmlmtst {

    0% {
        opacity: .25;
        transform: scaleX(.86) scaleY(.97) translateY(7px);
    }

    55% {
        opacity: 1;
        transform: scaleX(1.015) scaleY(1);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* CONTENT ENTER */

.otp-state .otp-step[b-zcntmlmtst] {
    animation: otpContentEnter-b-zcntmlmtst .62s .09s cubic-bezier(.22, 1, .36, 1) both;
}


@keyframes otpContentEnter-b-zcntmlmtst {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* OTP illustration comes in separately */

.otp-state .otp-visual[b-zcntmlmtst] {
    animation: otpIllustrationEnter-b-zcntmlmtst .72s .12s cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes otpIllustrationEnter-b-zcntmlmtst {

    0% {
        opacity: 0;
        transform: translateX(34px) rotate(4deg) scale(.82);
    }

    65% {
        opacity: 1;
        transform: translateX(-3px) rotate(-1deg) scale(1.025);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
    }
}


.auth-page[dir="rtl"]
.otp-state .otp-visual[b-zcntmlmtst] {
    animation-name: otpIllustrationEnterRtl-b-zcntmlmtst;
}


@keyframes otpIllustrationEnterRtl-b-zcntmlmtst {

    0% {
        opacity: 0;
        transform: translateX(-34px) rotate(-4deg) scale(.82);
    }

    65% {
        opacity: 1;
        transform: translateX(3px) rotate(1deg) scale(1.025);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
    }
}





/* =========================================================
   SUCCESS STATE
   ========================================================= */

.interaction-card.success-state[b-zcntmlmtst] {
    max-width: 390px;
    padding: 46px 38px 34px;
    animation: successCardMorph-b-zcntmlmtst .58s cubic-bezier(.22, 1, .36, 1) both;
}


@keyframes successCardMorph-b-zcntmlmtst {

    0% {
        opacity: .35;
        transform: scaleX(1.18) scaleY(.97);
    }

    70% {
        opacity: 1;
        transform: scaleX(.985) scaleY(1.01);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.success-step[b-zcntmlmtst] {
    text-align: center;
}


.success-visual[b-zcntmlmtst] {
    width: 112px;
    height: 112px;
    position: relative;
    margin: 6px auto 29px;
    display: grid;
    place-items: center;
}


.success-ring[b-zcntmlmtst] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(36, 174, 125, .16);
}


.success-ring-1[b-zcntmlmtst] {
    inset: 5px;
    animation: successRing-b-zcntmlmtst 1.8s ease-in-out infinite;
}


.success-ring-2[b-zcntmlmtst] {
    inset: -9px;
    opacity: .55;
    animation: successRing-b-zcntmlmtst 1.8s .2s ease-in-out infinite;
}


@keyframes successRing-b-zcntmlmtst {

    0%, 100% {
        transform: scale(.94);
        opacity: .25;
    }

    50% {
        transform: scale(1.04);
        opacity: .8;
    }
}


.success-check[b-zcntmlmtst] {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #43bf91;
    color: white;
    box-shadow: 0 12px 30px rgba(67, 191, 145, .25);
    animation: successCheckPop-b-zcntmlmtst .62s .16s cubic-bezier(.34, 1.56, .64, 1) both;
}


    .success-check svg[b-zcntmlmtst] {
        width: 31px;
        height: 31px;
    }


    .success-check path[b-zcntmlmtst] {
        stroke-dasharray: 28;
        stroke-dashoffset: 28;
        animation: drawSuccessCheck-b-zcntmlmtst .42s .50s ease forwards;
    }


@keyframes successCheckPop-b-zcntmlmtst {

    from {
        opacity: 0;
        transform: scale(.25) rotate(-12deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}


@keyframes drawSuccessCheck-b-zcntmlmtst {

    to {
        stroke-dashoffset: 0;
    }
}


.success-copy[b-zcntmlmtst] {
    animation: successTextEnter-b-zcntmlmtst .48s .34s ease-out both;
}


@keyframes successTextEnter-b-zcntmlmtst {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.success-copy h1[b-zcntmlmtst] {
    margin: 0 0 9px;
    color: var(--text);
    font-size: 1.55rem;
}


.success-copy p[b-zcntmlmtst] {
    max-width: 310px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: .75rem;
    line-height: 1.9;
}


.success-loading-line[b-zcntmlmtst] {
    width: 150px;
    height: 3px;
    margin: 27px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(17, 56, 179, .08);
}


    .success-loading-line span[b-zcntmlmtst] {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: var(--primary);
        transform-origin: left;
        animation: successLoading-b-zcntmlmtst 1.35s .15s linear both;
    }


.auth-page[dir="rtl"]
.success-loading-line span[b-zcntmlmtst] {
    transform-origin: right;
}


@keyframes successLoading-b-zcntmlmtst {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


/* before final redirect */

.success-state.success-leaving[b-zcntmlmtst] {
    animation: successLeave-b-zcntmlmtst .30s ease forwards;
}


@keyframes successLeave-b-zcntmlmtst {

    to {
        opacity: 0;
        transform: scale(.96) translateY(-7px);
    }
}

/* =========================================================
   2026-09-25 — LANDING-THEME AUTH OVERRIDE
   Palette/surfaces only. Existing motion/keyframes remain intact.
   ========================================================= */

.auth-page[b-zcntmlmtst] {
    --page-bg: #f7f2e9;
    --card-bg: rgba(255, 253, 248, .94);
    --text: #2a241d;
    --text-secondary: #746858;
    --muted: #a39787;
    --primary: #c58a16;
    --primary-hover: #a96f07;
    --primary-soft: #fff5dc;
    --primary-medium: #f3dfa8;
    --border: #eadfcd;
    --input-bg: #fffdf9;
    --danger: #c94f4f;
    --danger-soft: #fff2ef;
    --success: #6f9462;
    --success-soft: #eff6eb;
    --shadow: 0 30px 80px rgba(73, 52, 24, .12);
    background: radial-gradient(55% 44% at 50% 15%, rgba(224, 169, 49, .10), transparent 72%), linear-gradient(180deg, #faf7f0 0%, #f5efe5 100%);
}

/* Warm architectural lines inspired by the landing page. */
.auth-background[b-zcntmlmtst]::before,
.auth-background[b-zcntmlmtst]::after {
    content: "";
    position: absolute;
    left: 50%;
    width: min(1180px, 86vw);
    height: 260px;
    transform: translateX(-50%);
    border: 1px solid rgba(201, 142, 24, .18);
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    pointer-events: none;
}

.auth-background[b-zcntmlmtst]::before {
    top: -154px;
    box-shadow: 0 18px 60px rgba(206, 151, 31, .035);
}

.auth-background[b-zcntmlmtst]::after {
    bottom: -178px;
    box-shadow: 0 -18px 60px rgba(206, 151, 31, .035);
}

.shape-a[b-zcntmlmtst] {
    background: radial-gradient(circle, rgba(217, 157, 35, .11), rgba(217, 157, 35, 0) 70%);
}

.shape-b[b-zcntmlmtst] {
    background: radial-gradient(circle, rgba(161, 105, 20, .08), rgba(161, 105, 20, 0) 70%);
}

.background-dot[b-zcntmlmtst] {
    background: #d39a26;
    box-shadow: 0 0 0 5px rgba(211, 154, 38, .07), 0 0 20px rgba(211, 154, 38, .22);
}

.auth-brand[b-zcntmlmtst] {
    color: var(--text);
}

.brand-symbol[b-zcntmlmtst] {
    color: #2d2417;
    background: linear-gradient(145deg, #f5ca61 0%, #d79b20 100%);
    box-shadow: 0 12px 28px rgba(188, 127, 11, .24), inset 0 1px 0 rgba(255,255,255,.55);
}

.header-control[b-zcntmlmtst] {
    border-color: rgba(168, 126, 62, .18);
    background: rgba(255, 252, 246, .72);
    color: #6f6252;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

    .header-control:hover[b-zcntmlmtst] {
        color: #a76e08;
        border-color: rgba(197, 138, 22, .34);
        background: #fffaf0;
    }

.interaction-card[b-zcntmlmtst] {
    border-color: rgba(183, 137, 68, .20);
    background: radial-gradient(100% 70% at 50% 0%, rgba(232, 181, 64, .055), transparent 58%), var(--card-bg);
    box-shadow: 0 34px 80px rgba(68, 48, 20, .12), 0 1px 0 rgba(255,255,255,.86) inset;
    backdrop-filter: blur(16px);
}

    .interaction-card[b-zcntmlmtst]::before {
        content: "";
        position: absolute;
        inset: 0 28px auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(218, 158, 37, .44), transparent);
        pointer-events: none;
    }

.visual-circle[b-zcntmlmtst] {
    background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.92), transparent 28%), linear-gradient(145deg, #fff8e8 0%, #f8edcf 100%);
    box-shadow: inset 0 0 0 1px rgba(201, 145, 31, .08);
}

.visual-ring[b-zcntmlmtst] {
    border-color: rgba(197, 138, 22, .16);
}

.phone-device[b-zcntmlmtst],
.message-card[b-zcntmlmtst] {
    border-color: rgba(135, 101, 54, .18);
    background: #fffdf9;
    box-shadow: 0 16px 34px rgba(78, 55, 22, .13);
}

.phone-device[b-zcntmlmtst] {
    border-color: #4b4034;
}

.phone-speaker[b-zcntmlmtst] {
    background: #d9cdbb;
}

.phone-message-line[b-zcntmlmtst] {
    background: #e9dfd0;
}

.phone-code-dots span[b-zcntmlmtst] {
    background: #c58a16;
}

.floating-check[b-zcntmlmtst],
.floating-sms[b-zcntmlmtst],
.message-app-icon[b-zcntmlmtst] {
    background: linear-gradient(145deg, #efbd4e, #c98b12);
    color: #2d2417;
    box-shadow: 0 8px 20px rgba(190, 126, 8, .22);
}

.message-header[b-zcntmlmtst] {
    color: #766957;
}

.message-lines span[b-zcntmlmtst] {
    background: #ece3d5;
}

.message-card strong[b-zcntmlmtst] {
    color: #b5790c;
}

.step-label[b-zcntmlmtst] {
    color: #b87b0d;
}

.step-copy h1[b-zcntmlmtst] {
    color: #2a241d;
}

.step-copy p[b-zcntmlmtst] {
    color: #756a5b;
}

.verified-phone[b-zcntmlmtst] {
    color: #ad7309;
}

.phone-field[b-zcntmlmtst] {
    border-color: #e1d4c1;
    background: linear-gradient(180deg, #fffefb 0%, #fcf8f1 100%);
    box-shadow: 0 8px 24px rgba(82, 57, 22, .045);
}

    .phone-field[b-zcntmlmtst]::before {
        background: linear-gradient(110deg, rgba(197, 138, 22, .055), transparent 38%);
    }

    .phone-field:hover[b-zcntmlmtst] {
        border-color: rgba(197, 138, 22, .34);
        box-shadow: 0 10px 26px rgba(82, 57, 22, .07);
    }

    .phone-field:focus-within[b-zcntmlmtst] {
        border-color: rgba(197, 138, 22, .72);
        background: #fffefb;
        box-shadow: 0 0 0 4px rgba(197, 138, 22, .09), 0 12px 30px rgba(91, 62, 22, .08);
    }

.country-section[b-zcntmlmtst] {
    background: linear-gradient(135deg, rgba(215, 160, 48, .10), rgba(215, 160, 48, .035));
}

    .country-section[b-zcntmlmtst]::after {
        background: linear-gradient(to bottom, transparent, #dfd1bc 20%, #dfd1bc 80%, transparent);
    }

.country-flag[b-zcntmlmtst] {
    border-color: rgba(152, 110, 46, .10);
    background: #fffdfa;
}

.country-number[b-zcntmlmtst] {
    color: #3b3329;
}

[b-zcntmlmtst] .phone-number {
    color: #2d271f;
    caret-color: #c58a16;
}

    [b-zcntmlmtst] .phone-number::placeholder {
        color: #b7aa98;
    }

.continue-button[b-zcntmlmtst] {
    background: linear-gradient(135deg, #edbd50 0%, #d89b22 100%);
    color: #2f2617;
    box-shadow: 0 12px 28px rgba(186, 125, 12, .23), inset 0 1px 0 rgba(255,255,255,.38);
}

    .continue-button:hover[b-zcntmlmtst] {
        background: linear-gradient(135deg, #f3c65d 0%, #c98a16 100%);
        box-shadow: 0 16px 34px rgba(186, 125, 12, .28);
    }

.button-spinner[b-zcntmlmtst] {
    border-color: rgba(47,38,23,.22);
    border-top-color: #2f2617;
}

.privacy-note[b-zcntmlmtst],
.card-footer[b-zcntmlmtst],
.page-footer[b-zcntmlmtst],
.resend-section[b-zcntmlmtst] {
    color: #9a8e7e;
}

.back-control[b-zcntmlmtst] {
    color: #9a8e7e;
}

    .back-control:hover[b-zcntmlmtst],
    .resend-button[b-zcntmlmtst] {
        color: #b5790c;
    }

.auth-error[b-zcntmlmtst] {
    border-color: rgba(193, 76, 65, .16);
    background: #fff2ee;
    color: #bd4d45;
}

/* OTP boxes — warm normal state */
.otp-digit[b-zcntmlmtst] {
    border-color: #e1d5c4;
    background: #fffdf9;
    color: #30291f;
    caret-color: #c58a16;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

    .otp-digit:hover[b-zcntmlmtst] {
        border-color: rgba(197, 138, 22, .34);
    }

    .otp-digit:focus[b-zcntmlmtst] {
        border-color: rgba(197, 138, 22, .72);
        background: #fffefb;
        box-shadow: 0 0 0 3px rgba(197, 138, 22, .09);
    }

    .otp-digit.has-value[b-zcntmlmtst] {
        border-color: rgba(197, 138, 22, .43);
        background: #fff7e5;
        color: #a96f07;
    }

.remember-device[b-zcntmlmtst] {
    color: #756a5b;
}

    .remember-device input[b-zcntmlmtst] {
        accent-color: #c58a16;
    }

.card-footer[b-zcntmlmtst] {
    border-top-color: #eadfcd;
}

.validation-message[b-zcntmlmtst] {
    color: #bd4d45;
}

/* =========================================================
   OTP VERIFICATION FEEDBACK
   ========================================================= */

/* =========================================================
   OTP — VERIFYING / SUCCESS / ERROR
   ========================================================= */

.otp-digits[b-zcntmlmtst] {
    position: relative;
}


    /* ---------------------------------------------------------
   CHECKING
   --------------------------------------------------------- */

    .otp-digits.is-checking .otp-digit[b-zcntmlmtst] {
        border-color: rgba(197, 138, 22, .60) !important;
        background: #fff9e9 !important;
        color: #a96f07 !important;
        animation: otpVerifyPulse-b-zcntmlmtst .52s ease-in-out infinite alternate;
    }


        .otp-digits.is-checking
        .otp-digit:nth-child(2)[b-zcntmlmtst] {
            animation-delay: .04s;
        }

        .otp-digits.is-checking
        .otp-digit:nth-child(3)[b-zcntmlmtst] {
            animation-delay: .08s;
        }

        .otp-digits.is-checking
        .otp-digit:nth-child(4)[b-zcntmlmtst] {
            animation-delay: .12s;
        }

        .otp-digits.is-checking
        .otp-digit:nth-child(5)[b-zcntmlmtst] {
            animation-delay: .16s;
        }

        .otp-digits.is-checking
        .otp-digit:nth-child(6)[b-zcntmlmtst] {
            animation-delay: .20s;
        }


@keyframes otpVerifyPulse-b-zcntmlmtst {

    from {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 rgba(197,138,22,0);
    }

    to {
        transform: translateY(-2px) scale(1.015);
        box-shadow: 0 0 0 4px rgba(197,138,22,.075);
    }
}


/* ---------------------------------------------------------
   SUCCESS
   --------------------------------------------------------- */

.otp-digits.is-valid[b-zcntmlmtst] {
    animation: otpSuccessGroup-b-zcntmlmtst .44s cubic-bezier(.22,1,.36,1) both;
}


    .otp-digits.is-valid .otp-digit[b-zcntmlmtst] {
        border-color: #7aa36d !important;
        background: linear-gradient( 180deg, #f7fcf4, #edf7e9 ) !important;
        color: #527448 !important;
        box-shadow: 0 0 0 3px rgba(111,148,98,.11), 0 9px 22px rgba(83,119,73,.09) !important;
        animation: otpSuccessDigit-b-zcntmlmtst .48s cubic-bezier(.18,1.5,.36,1) both;
    }


        .otp-digits.is-valid
        .otp-digit:nth-child(2)[b-zcntmlmtst] {
            animation-delay: .045s;
        }

        .otp-digits.is-valid
        .otp-digit:nth-child(3)[b-zcntmlmtst] {
            animation-delay: .09s;
        }

        .otp-digits.is-valid
        .otp-digit:nth-child(4)[b-zcntmlmtst] {
            animation-delay: .135s;
        }

        .otp-digits.is-valid
        .otp-digit:nth-child(5)[b-zcntmlmtst] {
            animation-delay: .18s;
        }

        .otp-digits.is-valid
        .otp-digit:nth-child(6)[b-zcntmlmtst] {
            animation-delay: .225s;
        }


@keyframes otpSuccessDigit-b-zcntmlmtst {

    0% {
        transform: translateY(0) scale(1);
    }

    48% {
        transform: translateY(-6px) scale(1.055);
    }

    72% {
        transform: translateY(1px) scale(.99);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}


@keyframes otpSuccessGroup-b-zcntmlmtst {

    0% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.012);
    }

    100% {
        transform: scale(1);
    }
}


/* ---------------------------------------------------------
   INVALID
   --------------------------------------------------------- */

.otp-digits.is-invalid[b-zcntmlmtst] {
    animation: otpWrongCodeShake-b-zcntmlmtst .48s cubic-bezier(.36,.07,.19,.97) both;
}


    .otp-digits.is-invalid .otp-digit[b-zcntmlmtst] {
        border-color: #d55c55 !important;
        background: linear-gradient( 180deg, #fff9f7, #fff0ed ) !important;
        color: #bd4d47 !important;
        box-shadow: 0 0 0 3px rgba(201,79,79,.09), 0 8px 18px rgba(177,68,62,.06) !important;
        animation: otpWrongDigit-b-zcntmlmtst .42s ease both;
    }


@keyframes otpWrongCodeShake-b-zcntmlmtst {

    0%, 100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-7px);
    }

    30% {
        transform: translateX(6px);
    }

    45% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }
}


@keyframes otpWrongDigit-b-zcntmlmtst {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(.965);
    }

    70% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .otp-digits.is-checking .otp-digit[b-zcntmlmtst],
    .otp-digits.is-valid[b-zcntmlmtst],
    .otp-digits.is-valid .otp-digit[b-zcntmlmtst],
    .otp-digits.is-invalid[b-zcntmlmtst],
    .otp-digits.is-invalid .otp-digit[b-zcntmlmtst] {
        animation: none !important;
    }
}

/* =========================================================
   WARM DARK MODE
   ========================================================= */

:root[data-theme="dark"] .auth-page[b-zcntmlmtst] {
    --page-bg: #18130e;
    --card-bg: rgba(35, 28, 20, .94);
    --text: #f4ede2;
    --text-secondary: #c1b4a3;
    --muted: #8f8374;
    --primary: #e2ad39;
    --primary-hover: #f0bf54;
    --primary-soft: rgba(226, 173, 57, .12);
    --primary-medium: rgba(226, 173, 57, .22);
    --border: rgba(230, 188, 104, .14);
    --input-bg: #241c14;
    --danger-soft: rgba(194, 74, 67, .12);
    --shadow: 0 34px 90px rgba(0,0,0,.32);
    background: radial-gradient(55% 44% at 50% 12%, rgba(226, 173, 57, .08), transparent 70%), linear-gradient(180deg, #1c1711 0%, #15110d 100%);
}

:root[data-theme="dark"] .header-control[b-zcntmlmtst] {
    border-color: rgba(226, 184, 96, .14);
    background: rgba(41, 32, 22, .72);
    color: #bdb09f;
}

:root[data-theme="dark"] .interaction-card[b-zcntmlmtst] {
    border-color: rgba(226, 177, 75, .16);
    background: radial-gradient(100% 70% at 50% 0%, rgba(226, 173, 57, .07), transparent 58%), rgba(34, 27, 19, .94);
}

:root[data-theme="dark"] .visual-circle[b-zcntmlmtst] {
    background: linear-gradient(145deg, #2b2117, #211a13);
}

:root[data-theme="dark"] .phone-device[b-zcntmlmtst],
:root[data-theme="dark"] .message-card[b-zcntmlmtst] {
    background: #2a2118;
    border-color: rgba(237, 205, 143, .14);
}

:root[data-theme="dark"] .phone-device[b-zcntmlmtst] {
    border-color: #d8cbb9;
}

:root[data-theme="dark"] .phone-speaker[b-zcntmlmtst],
:root[data-theme="dark"] .phone-message-line[b-zcntmlmtst],
:root[data-theme="dark"] .message-lines span[b-zcntmlmtst] {
    background: #514638;
}

:root[data-theme="dark"] .phone-field[b-zcntmlmtst],
:root[data-theme="dark"] .otp-digit[b-zcntmlmtst] {
    background: #241c14;
    border-color: rgba(224, 184, 105, .16);
    color: #f2eadf;
}

:root[data-theme="dark"] .country-section[b-zcntmlmtst] {
    background: rgba(226, 173, 57, .07);
}

:root[data-theme="dark"] .country-flag[b-zcntmlmtst] {
    background: #2c2319;
    border-color: rgba(224, 184, 105, .13);
}

:root[data-theme="dark"] .country-number[b-zcntmlmtst],
:root[data-theme="dark"][b-zcntmlmtst]  .phone-number {
    color: #f1e9dd;
}

:root[data-theme="dark"] .otp-digit:focus[b-zcntmlmtst] {
    background: #2b2117;
}

:root[data-theme="dark"] .otp-digit.has-value[b-zcntmlmtst] {
    background: rgba(226, 173, 57, .10);
}

:root[data-theme="dark"] .auth-error[b-zcntmlmtst] {
    background: rgba(197, 79, 72, .10);
}

@media (prefers-reduced-motion: reduce) {
    .otp-digits.is-checking .otp-digit[b-zcntmlmtst],
    .otp-digits.is-valid .otp-digit[b-zcntmlmtst],
    .otp-digits.is-invalid[b-zcntmlmtst],
    .otp-digits.is-invalid .otp-digit[b-zcntmlmtst] {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* The six code boxes were fixed at 52px each: 352px with the gaps,
   wider than the card on a 375px phone, so the last box sat off
   screen. They share the row now and stop growing at the old size. */
.otp-digit[b-zcntmlmtst] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 52px;
}

/* Goftito logo: a light box, so the gold mark is not lost on a gold one. */
.brand-symbol[b-zcntmlmtst] {
    border: 1px solid rgba(189, 139, 43, .22);
    background: linear-gradient(145deg, #fffdf8, #f5e8ca);
}

.brand-symbol .goftito-mark[b-zcntmlmtst] {
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.message-app-icon[b-zcntmlmtst] {
    background: #fffdf8;
}

.message-app-icon .goftito-mark[b-zcntmlmtst] {
    display: block;
    width: 86%;
    height: 86%;
    object-fit: contain;
}

/* Two-factor step: signing in with a recovery code instead of the app. */
.recovery-code-section[b-zcntmlmtst] {
    margin-top: 18px;
    color: #9a8e7e;
    font-size: .78rem;
    text-align: center;
}

    .recovery-code-section > summary[b-zcntmlmtst] {
        cursor: pointer;
        list-style: none;
        color: #b5790c;
    }

        .recovery-code-section > summary[b-zcntmlmtst]::-webkit-details-marker {
            display: none;
        }

.recovery-code-form[b-zcntmlmtst] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

    .recovery-code-form input[b-zcntmlmtst] {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid #e1d5c4;
        border-radius: 12px;
        background: #fffdf9;
        color: #30291f;
        font: inherit;
        letter-spacing: .06em;
        text-align: center;
    }

        .recovery-code-form input:focus[b-zcntmlmtst] {
            outline: none;
            border-color: rgba(197, 138, 22, .72);
            box-shadow: 0 0 0 3px rgba(197, 138, 22, .09);
        }

    .recovery-code-form button[b-zcntmlmtst] {
        padding: 10px 14px;
        border: 1px solid rgba(197, 138, 22, .34);
        border-radius: 12px;
        background: #fff7e5;
        color: #8a5a08;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }

@media (max-width: 420px) {
    .recovery-code-form[b-zcntmlmtst] {
        flex-direction: column;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/AiConfiguration/AdminAiConfiguration.razor.rz.scp.css */
/* ============================================================
   ADMIN AI CONFIGURATION V2
   ============================================================ */

.ai-configuration[b-eitab9td6n] {
    --ai-accent: #5f70e8;
    --ai-accent-hover: #4f60d6;
    --ai-accent-soft: rgba(95,112,232,.08);
    --ai-accent-border: rgba(95,112,232,.18);
    --ai-green: #238267;
    --ai-green-soft: rgba(35,130,103,.09);
    --ai-red: #c94f5d;
    --ai-red-soft: rgba(201,79,93,.085);
    --ai-amber: #a9781e;
    --ai-amber-soft: rgba(169,120,30,.09);
    --ai-violet: #7659b5;
    --ai-violet-soft: rgba(118,89,181,.09);
    --ai-panel: #fff;
    --ai-panel-soft: #f8faff;
    --ai-panel-muted: #f4f7fb;
    --ai-border: #e3e9f3;
    --ai-border-strong: #d7e0ee;
    --ai-text: #1c2940;
    --ai-secondary: #5d6c84;
    --ai-muted: #8490a4;
    --ai-shadow: 0 14px 38px rgba(36,52,86,.055);
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 30px 28px 56px;
    color: var(--ai-text);
}

.page-header[b-eitab9td6n],
.section-heading[b-eitab9td6n],
.routing-quality-header[b-eitab9td6n],
.quality-profile-header[b-eitab9td6n] {
    display: flex;
    justify-content: space-between;
    gap: 22px;
}

.page-header[b-eitab9td6n] {
    align-items: flex-end;
    margin-bottom: 22px;
}

.page-header-copy[b-eitab9td6n] {
    min-width: 0;
    max-width: 850px;
}

.eyebrow[b-eitab9td6n] {
    display: block;
    margin-bottom: 7px;
    color: var(--ai-accent);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.ai-configuration[dir="rtl"] .eyebrow[b-eitab9td6n] {
    letter-spacing: 0;
}

.page-header h1[b-eitab9td6n] {
    margin: 0;
    font-size: clamp(1.65rem,2.3vw,2.4rem);
    font-weight: 820;
    line-height: 1.25;
}

.page-header p[b-eitab9td6n],
.section-heading p[b-eitab9td6n] {
    margin: 8px 0 0;
    color: var(--ai-secondary);
    font-size: .76rem;
    line-height: 1.9;
}

.provider-link[b-eitab9td6n] {
    min-width: 210px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--ai-border);
    border-radius: 15px;
    color: var(--ai-text);
    background: var(--ai-panel);
    box-shadow: 0 8px 20px rgba(36,52,86,.035);
    text-decoration: none;
}

.provider-link-icon[b-eitab9td6n],
.overview-icon[b-eitab9td6n],
.processing-card-icon[b-eitab9td6n],
.input-glyph[b-eitab9td6n],
.operation-icon[b-eitab9td6n],
.model-avatar[b-eitab9td6n],
.new-model-plus[b-eitab9td6n],
.catalog-sync-icon[b-eitab9td6n],
.feedback-icon[b-eitab9td6n],
.routing-info-icon[b-eitab9td6n],
.test-center-icon[b-eitab9td6n] {
    display: grid;
    place-items: center;
}

.provider-link-icon[b-eitab9td6n] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
}

.provider-link > span:last-child[b-eitab9td6n] {
    display: grid;
    gap: 2px;
}

.provider-link strong[b-eitab9td6n] {
    font-size: .66rem;
}

.provider-link small[b-eitab9td6n] {
    color: var(--ai-muted);
    font-size: .52rem;
}

.feedback-banner[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 14px;
}

    .feedback-banner.success[b-eitab9td6n] {
        color: #1f725b;
        border-color: rgba(35,130,103,.18);
        background: rgba(35,130,103,.065);
    }

    .feedback-banner.danger[b-eitab9td6n] {
        color: #b54451;
        border-color: rgba(201,79,93,.18);
        background: rgba(201,79,93,.06);
    }

.feedback-icon[b-eitab9td6n] {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: rgba(255,255,255,.62);
    font-weight: 900;
}

.feedback-banner > div[b-eitab9td6n] {
    display: grid;
    gap: 2px;
}

.feedback-banner strong[b-eitab9td6n] {
    font-size: .69rem;
}

.feedback-banner small[b-eitab9td6n] {
    font-size: .57rem;
    opacity: .82;
}

.loading-state[b-eitab9td6n] {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--ai-border);
    border-radius: 18px;
    color: var(--ai-muted);
    background: var(--ai-panel);
}

.loading-spinner[b-eitab9td6n] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(95,112,232,.15);
    border-top-color: var(--ai-accent);
    border-radius: 50%;
    animation: ai-spin-b-eitab9td6n .8s linear infinite;
}

@keyframes ai-spin-b-eitab9td6n {
    to {
        transform: rotate(360deg);
    }
}

.overview-grid[b-eitab9td6n] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 11px;
    margin-bottom: 14px;
}

.overview-card[b-eitab9td6n] {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--ai-border);
    border-radius: 17px;
    background: var(--ai-panel);
    box-shadow: 0 7px 20px rgba(36,52,86,.03);
}

.overview-icon[b-eitab9td6n] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-size: .62rem;
    font-weight: 900;
}

    .overview-icon.violet[b-eitab9td6n] {
        color: var(--ai-violet);
        background: var(--ai-violet-soft);
    }

    .overview-icon.green[b-eitab9td6n] {
        color: var(--ai-green);
        background: var(--ai-green-soft);
    }

    .overview-icon.amber[b-eitab9td6n] {
        color: var(--ai-amber);
        background: var(--ai-amber-soft);
    }

.overview-card > div[b-eitab9td6n] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.overview-card small[b-eitab9td6n] {
    color: var(--ai-muted);
    font-size: .52rem;
}

.overview-card strong[b-eitab9td6n] {
    font-size: .84rem;
}

.overview-meta[b-eitab9td6n], .overview-link[b-eitab9td6n] {
    color: var(--ai-muted);
    font-size: .5rem;
    text-decoration: none;
}

.status-dot[b-eitab9td6n] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .status-dot.on[b-eitab9td6n] {
        background: #2c9a79;
        box-shadow: 0 0 0 4px rgba(44,154,121,.09);
    }

    .status-dot.off[b-eitab9td6n] {
        background: #d45c68;
        box-shadow: 0 0 0 4px rgba(212,92,104,.08);
    }

.state-positive[b-eitab9td6n] {
    color: var(--ai-green) !important;
}

.state-negative[b-eitab9td6n] {
    color: var(--ai-red) !important;
}

.state-warning[b-eitab9td6n] {
    color: var(--ai-amber) !important;
}

.processing-card[b-eitab9td6n] {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) auto minmax(180px,.55fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 19px;
    border: 1px solid var(--ai-border);
    border-radius: 19px;
    background: linear-gradient(135deg,rgba(95,112,232,.035),transparent 42%),var(--ai-panel);
    box-shadow: var(--ai-shadow);
}

.processing-card-main[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.processing-card-icon[b-eitab9td6n] {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 14px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-size: .7rem;
    font-weight: 900;
}

.processing-card h2[b-eitab9td6n] {
    margin: 0;
    font-size: .9rem;
}

.processing-card p[b-eitab9td6n] {
    margin: 5px 0 0;
    color: var(--ai-muted);
    font-size: .57rem;
    line-height: 1.65;
}

.primary-button[b-eitab9td6n],
.secondary-primary-button[b-eitab9td6n],
.danger-secondary-button[b-eitab9td6n] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid;
    border-radius: 10px;
    font: inherit;
    font-size: .61rem;
    font-weight: 760;
    cursor: pointer;
    white-space: nowrap;
}

.primary-button[b-eitab9td6n] {
    color: #fff;
    border-color: var(--ai-accent);
    background: var(--ai-accent);
    box-shadow: 0 7px 18px rgba(95,112,232,.19);
}

    .primary-button:hover[b-eitab9td6n] {
        background: var(--ai-accent-hover);
    }

.secondary-primary-button[b-eitab9td6n] {
    color: var(--ai-accent);
    border-color: var(--ai-accent-border);
    background: var(--ai-accent-soft);
}

.danger-secondary-button[b-eitab9td6n] {
    color: var(--ai-red);
    border-color: rgba(201,79,93,.2);
    background: var(--ai-red-soft);
}

    .danger-secondary-button:disabled[b-eitab9td6n] {
        opacity: .4;
        cursor: not-allowed;
    }

.audit-field[b-eitab9td6n],
.routing-field[b-eitab9td6n],
.global-route-card > label[b-eitab9td6n],
.global-route-controls > label[b-eitab9td6n],
.pipeline-field-grid label[b-eitab9td6n],
.test-form label[b-eitab9td6n],
.model-field-grid label[b-eitab9td6n] {
    display: grid;
    gap: 5px;
}

    .audit-field.compact[b-eitab9td6n] {
        min-width: 180px;
    }

    .audit-field > span[b-eitab9td6n],
    .routing-field > span[b-eitab9td6n],
    .global-route-card label > span[b-eitab9td6n],
    .pipeline-field-grid label > span[b-eitab9td6n],
    .test-form label > span[b-eitab9td6n],
    .model-field-grid label > span[b-eitab9td6n] {
        color: var(--ai-secondary);
        font-size: .52rem;
        font-weight: 680;
    }

    .audit-field input[b-eitab9td6n],
    .routing-field select[b-eitab9td6n],
    .routing-field input[b-eitab9td6n],
    .global-route-card select[b-eitab9td6n],
    .global-route-card input[type="number"][b-eitab9td6n],
    .pipeline-field-grid input[b-eitab9td6n],
    .test-form select[b-eitab9td6n],
    .test-form textarea[b-eitab9td6n],
    .model-field-grid input[b-eitab9td6n] {
        box-sizing: border-box;
        width: 100%;
        min-height: 36px;
        border: 1px solid var(--ai-border-strong);
        border-radius: 9px;
        outline: none;
        padding: 0 9px;
        color: var(--ai-text);
        background: var(--ai-panel-soft);
        font: inherit;
        font-size: .59rem;
    }

.test-form textarea[b-eitab9td6n] {
    min-height: 60px;
    padding: 8px 9px;
    resize: vertical;
}

.switch-control[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.switch-copy[b-eitab9td6n] {
    display: grid;
    gap: 2px;
    text-align: end;
}

    .switch-copy strong[b-eitab9td6n] {
        font-size: .6rem;
    }

    .switch-copy small[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .47rem;
    }

.switch-control input[b-eitab9td6n],
.mini-switch input[b-eitab9td6n],
.route-switch input[b-eitab9td6n] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control i[b-eitab9td6n],
.mini-switch-ui[b-eitab9td6n],
.route-switch-ui[b-eitab9td6n] {
    position: relative;
    border-radius: 999px;
    background: #cfd7e3;
}

.switch-control i[b-eitab9td6n] {
    width: 42px;
    height: 23px;
}

    .switch-control i[b-eitab9td6n]::after,
    .mini-switch-ui i[b-eitab9td6n],
    .route-switch-ui i[b-eitab9td6n] {
        content: "";
        position: absolute;
        top: 3px;
        inset-inline-start: 3px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 4px rgba(31,45,70,.16);
    }

    .switch-control i[b-eitab9td6n]::after {
        width: 17px;
        height: 17px;
    }

.switch-control input:checked + i[b-eitab9td6n],
.mini-switch input:checked + .mini-switch-ui[b-eitab9td6n],
.route-switch input:checked + .route-switch-ui[b-eitab9td6n] {
    background: var(--ai-accent);
}

    .switch-control input:checked + i[b-eitab9td6n]::after {
        transform: translateX(19px);
    }

.ai-configuration[dir="rtl"] .switch-control input:checked + i[b-eitab9td6n]::after {
    transform: translateX(-19px);
}

.section-jump-nav[b-eitab9td6n] {
    position: sticky;
    top: 10px;
    z-index: 12;
    display: flex;
    gap: 6px;
    margin: 18px 0 4px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid rgba(227,233,243,.82);
    border-radius: 13px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(36,52,86,.04);
}

    .section-jump-nav a[b-eitab9td6n] {
        flex: 0 0 auto;
        padding: 7px 10px;
        border-radius: 8px;
        color: var(--ai-secondary);
        font-size: .55rem;
        font-weight: 700;
        text-decoration: none;
    }

        .section-jump-nav a:hover[b-eitab9td6n] {
            color: var(--ai-accent);
            background: var(--ai-accent-soft);
        }

.configuration-section[b-eitab9td6n] {
    scroll-margin-top: 74px;
    margin-top: 30px;
}

.section-heading[b-eitab9td6n] {
    align-items: flex-end;
    margin-bottom: 14px;
}

    .section-heading > div:first-child[b-eitab9td6n] {
        max-width: 900px;
    }

    .section-heading h2[b-eitab9td6n] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 790;
    }

.section-heading-badges[b-eitab9td6n],
.catalog-summary[b-eitab9td6n],
.model-badges[b-eitab9td6n] {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .soft-badge[b-eitab9td6n],
    .inheritance-badge[b-eitab9td6n],
    .profile-state[b-eitab9td6n],
    .model-badges em[b-eitab9td6n],
    .model-badges b[b-eitab9td6n] {
        padding: 5px 7px;
        border-radius: 999px;
        font-size: .46rem;
        font-weight: 760;
        white-space: nowrap;
    }

.soft-badge[b-eitab9td6n] {
    color: var(--ai-secondary);
    border: 1px solid var(--ai-border);
    background: var(--ai-panel);
}

    .soft-badge.accent[b-eitab9td6n] {
        color: var(--ai-accent);
        border-color: var(--ai-accent-border);
        background: var(--ai-accent-soft);
    }

.routing-info[b-eitab9td6n],
.catalog-sync-note[b-eitab9td6n] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid var(--ai-border);
    border-radius: 13px;
    background: var(--ai-panel-soft);
}

.routing-info-icon[b-eitab9td6n],
.catalog-sync-icon[b-eitab9td6n] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-weight: 850;
}

.routing-info strong[b-eitab9td6n],
.catalog-sync-note strong[b-eitab9td6n] {
    display: block;
    margin-bottom: 2px;
    font-size: .58rem;
}

.routing-info p[b-eitab9td6n],
.catalog-sync-note p[b-eitab9td6n] {
    margin: 0;
    color: var(--ai-muted);
    font-size: .5rem;
    line-height: 1.65;
}

.routing-quality-stack[b-eitab9td6n] {
    display: grid;
    gap: 14px;
}

.routing-quality-card[b-eitab9td6n],
.quality-profile-card[b-eitab9td6n],
.test-center-card[b-eitab9td6n],
.new-model-card[b-eitab9td6n],
.model-item[b-eitab9td6n] {
    overflow: hidden;
    border: 1px solid var(--ai-border);
    border-radius: 18px;
    background: var(--ai-panel);
    box-shadow: var(--ai-shadow);
}

.routing-quality-card[b-eitab9td6n],
.quality-profile-card[b-eitab9td6n] {
    --quality-accent: var(--ai-accent);
    --quality-soft: var(--ai-accent-soft);
    --quality-border: var(--ai-accent-border);
}

.quality-professional[b-eitab9td6n] {
    --quality-accent: #4b83cc;
    --quality-soft: rgba(75,131,204,.08);
    --quality-border: rgba(75,131,204,.18);
}

.quality-expert[b-eitab9td6n] {
    --quality-accent: #7358b4;
    --quality-soft: rgba(115,88,180,.085);
    --quality-border: rgba(115,88,180,.18);
}

.routing-quality-header[b-eitab9td6n],
.quality-profile-header[b-eitab9td6n] {
    align-items: center;
    padding: 15px 17px;
    border-bottom: 1px solid var(--ai-border);
    background: linear-gradient(90deg,var(--quality-soft),transparent 36%),var(--ai-panel);
}

.ai-configuration[dir="rtl"] .routing-quality-header[b-eitab9td6n],
.ai-configuration[dir="rtl"] .quality-profile-header[b-eitab9td6n] {
    background: linear-gradient(270deg,var(--quality-soft),transparent 36%),var(--ai-panel);
}

.quality-identity[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quality-mark[b-eitab9td6n] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--quality-border);
    border-radius: 12px;
    color: var(--quality-accent);
    background: var(--quality-soft);
    font-size: .72rem;
    font-weight: 900;
}

.quality-kicker[b-eitab9td6n] {
    display: block;
    margin-bottom: 2px;
    color: var(--quality-accent);
    font-size: .44rem;
    font-weight: 850;
}

.quality-identity h3[b-eitab9td6n] {
    margin: 0;
    font-size: .77rem;
}

.quality-identity p[b-eitab9td6n] {
    margin: 3px 0 0;
    color: var(--ai-muted);
    font-size: .5rem;
}

.profile-state[b-eitab9td6n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .profile-state i[b-eitab9td6n] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .profile-state.enabled[b-eitab9td6n] {
        color: var(--ai-green);
        background: var(--ai-green-soft);
    }

    .profile-state.disabled[b-eitab9td6n] {
        color: var(--ai-red);
        background: var(--ai-red-soft);
    }

.routing-table-shell[b-eitab9td6n] {
    overflow-x: auto;
}

.routing-table-head[b-eitab9td6n],
.routing-row[b-eitab9td6n] {
    min-width: 980px;
    display: grid;
    grid-template-columns: minmax(255px,1.45fr) minmax(185px,1fr) minmax(185px,1fr) 105px 105px;
    gap: 10px;
    align-items: center;
}

.routing-table-head[b-eitab9td6n] {
    padding: 8px 15px;
    color: var(--ai-muted);
    background: var(--ai-panel-muted);
    font-size: .47rem;
    font-weight: 760;
}

.routing-row[b-eitab9td6n] {
    padding: 11px 15px;
    border-top: 1px solid var(--ai-border);
}

.input-type-cell[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.input-glyph[b-eitab9td6n] {
    width: 39px;
    height: 33px;
    flex: 0 0 39px;
    border-radius: 9px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-size: .43rem;
    font-weight: 900;
}

    .input-glyph.image[b-eitab9td6n] {
        color: #8c5d23;
        background: rgba(157,101,34,.08);
    }

    .input-glyph.website[b-eitab9td6n] {
        color: #277969;
        background: rgba(39,121,105,.08);
    }

    .input-glyph.subtitle[b-eitab9td6n] {
        color: #7757ac;
        background: rgba(119,87,172,.08);
    }

    .input-glyph.plaintext[b-eitab9td6n] {
        color: #4b6680;
        background: rgba(75,102,128,.08);
    }

.input-type-copy[b-eitab9td6n] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

    .input-type-copy strong[b-eitab9td6n] {
        font-size: .59rem;
    }

    .input-type-copy small[b-eitab9td6n] {
        overflow: hidden;
        color: var(--ai-muted);
        font-size: .45rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.inheritance-badge.inherited[b-eitab9td6n] {
    color: #6b7890;
    background: rgba(107,120,144,.08);
}

.inheritance-badge.override[b-eitab9td6n] {
    color: var(--quality-accent);
    background: var(--quality-soft);
}

.routing-field.multiplier input[b-eitab9td6n] {
    text-align: center;
}

.route-switch[b-eitab9td6n] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 6px;
    align-items: center;
    cursor: pointer;
}

.route-switch-ui[b-eitab9td6n] {
    width: 34px;
    height: 19px;
}

    .route-switch-ui i[b-eitab9td6n] {
        width: 13px;
        height: 13px;
    }

.route-switch input:checked + .route-switch-ui[b-eitab9td6n] {
    background: var(--quality-accent);
}

    .route-switch input:checked + .route-switch-ui i[b-eitab9td6n] {
        transform: translateX(15px);
    }

.ai-configuration[dir="rtl"] .route-switch input:checked + .route-switch-ui i[b-eitab9td6n] {
    transform: translateX(-15px);
}

.route-switch-label[b-eitab9td6n] {
    grid-column: 1/-1;
    color: var(--ai-muted);
    font-size: .45rem;
}

.routing-quality-footer[b-eitab9td6n] {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(220px,.65fr) auto;
    gap: 12px;
    align-items: end;
    padding: 13px 15px;
    border-top: 1px solid var(--ai-border);
    background: var(--ai-panel-soft);
}

.route-footer-note[b-eitab9td6n] {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    color: var(--ai-muted);
    font-size: .47rem;
    line-height: 1.55;
}

.route-footer-note-icon[b-eitab9td6n] {
    color: var(--quality-accent);
}

.quality-profile-grid[b-eitab9td6n] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px;
}

.mini-switch[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ai-secondary);
    font-size: .48rem;
    cursor: pointer;
}

.mini-switch-ui[b-eitab9td6n] {
    width: 34px;
    height: 19px;
}

    .mini-switch-ui i[b-eitab9td6n] {
        width: 13px;
        height: 13px;
    }

.mini-switch input:checked + .mini-switch-ui[b-eitab9td6n] {
    background: var(--quality-accent);
}

    .mini-switch input:checked + .mini-switch-ui i[b-eitab9td6n] {
        transform: translateX(15px);
    }

.ai-configuration[dir="rtl"] .mini-switch input:checked + .mini-switch-ui i[b-eitab9td6n] {
    transform: translateX(-15px);
}

.global-route-list[b-eitab9td6n] {
    display: grid;
    gap: 8px;
    padding: 11px;
}

.global-route-card[b-eitab9td6n] {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--ai-border);
    border-radius: 12px;
    background: var(--ai-panel-soft);
}

.global-route-title[b-eitab9td6n] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.operation-icon[b-eitab9td6n] {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    color: var(--quality-accent);
    background: var(--quality-soft);
    font-size: .52rem;
    font-weight: 850;
}

.global-route-title > div[b-eitab9td6n] {
    display: grid;
    gap: 2px;
}

.global-route-title strong[b-eitab9td6n] {
    font-size: .58rem;
}

.global-route-title small[b-eitab9td6n] {
    color: var(--ai-muted);
    font-size: .44rem;
}

.global-route-controls[b-eitab9td6n] {
    display: grid;
    grid-template-columns: minmax(90px,.45fr) 1fr;
    gap: 8px;
    align-items: end;
}

.inline-check[b-eitab9td6n] {
    min-height: 36px;
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid var(--ai-border);
    border-radius: 9px;
    background: var(--ai-panel);
    font-size: .5rem;
}

.pipeline-settings[b-eitab9td6n] {
    padding: 12px 13px;
    border-top: 1px solid var(--ai-border);
    background: var(--ai-panel-muted);
}

.pipeline-settings-title[b-eitab9td6n] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

    .pipeline-settings-title span[b-eitab9td6n] {
        font-size: .55rem;
        font-weight: 750;
    }

    .pipeline-settings-title small[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .43rem;
    }

.pipeline-field-grid[b-eitab9td6n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.feature-toggle-grid[b-eitab9td6n] {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

    .feature-toggle-grid label[b-eitab9td6n] {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        padding: 7px 8px;
        border: 1px solid var(--ai-border);
        border-radius: 9px;
        background: var(--ai-panel);
    }

        .feature-toggle-grid label > span[b-eitab9td6n] {
            display: grid;
            gap: 2px;
        }

    .feature-toggle-grid strong[b-eitab9td6n] {
        color: var(--ai-secondary);
        font-size: .49rem;
    }

    .feature-toggle-grid small[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .41rem;
    }

.quality-profile-footer[b-eitab9td6n] {
    display: grid;
    gap: 8px;
    padding: 12px 13px;
    border-top: 1px solid var(--ai-border);
}

    .quality-profile-footer button[b-eitab9td6n] {
        width: 100%;
    }

.test-center-copy[b-eitab9td6n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 18px 13px;
}

.test-center-icon[b-eitab9td6n] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-weight: 900;
}

.test-center-copy h2[b-eitab9td6n] {
    margin: 0;
    font-size: .88rem;
}

.test-center-copy p[b-eitab9td6n] {
    margin: 5px 0 0;
    color: var(--ai-muted);
    font-size: .56rem;
    line-height: 1.7;
}

.test-form[b-eitab9td6n] {
    display: grid;
    grid-template-columns: 180px minmax(0,1fr) auto;
    gap: 9px;
    align-items: end;
    padding: 13px 18px 17px;
    border-top: 1px solid var(--ai-border);
    background: var(--ai-panel-soft);
}

.test-button[b-eitab9td6n] {
    min-height: 60px;
}

.test-result[b-eitab9td6n] {
    margin: 0 18px 17px;
    border-radius: 13px;
}

    .test-result.success[b-eitab9td6n] {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 8px;
        padding: 11px;
        border: 1px solid rgba(35,130,103,.15);
        background: rgba(35,130,103,.045);
    }

.test-metric[b-eitab9td6n],
.test-translation[b-eitab9td6n] {
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(255,255,255,.65);
}

    .test-metric small[b-eitab9td6n], .test-translation small[b-eitab9td6n] {
        color: #5f7d72;
        font-size: .45rem;
    }

    .test-metric strong[b-eitab9td6n], .test-metric code[b-eitab9td6n] {
        color: #205f4c;
        font-size: .57rem;
    }

.test-translation[b-eitab9td6n] {
    grid-column: 1/-1;
}

    .test-translation p[b-eitab9td6n] {
        margin: 4px 0 0;
        color: #214f42;
        font-size: .6rem;
        line-height: 1.7;
        white-space: pre-wrap;
    }

.test-result.failed[b-eitab9td6n] {
    display: flex;
    gap: 8px;
    padding: 11px;
    color: #ad404d;
    border: 1px solid rgba(201,79,93,.16);
    background: rgba(201,79,93,.055);
}

    .test-result.failed > div[b-eitab9td6n] {
        display: grid;
        gap: 2px;
    }

    .test-result.failed strong[b-eitab9td6n] {
        font-size: .58rem;
    }

    .test-result.failed small[b-eitab9td6n] {
        font-size: .49rem;
    }

.catalog-summary > span[b-eitab9td6n] {
    min-width: 66px;
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid var(--ai-border);
    border-radius: 10px;
    background: var(--ai-panel);
    text-align: center;
}

.catalog-summary strong[b-eitab9td6n] {
    font-size: .67rem;
}

.catalog-summary small[b-eitab9td6n] {
    color: var(--ai-muted);
    font-size: .41rem;
}

.new-model-card[b-eitab9td6n] {
    margin-bottom: 10px;
}

    .new-model-card > summary[b-eitab9td6n],
    .model-item > summary[b-eitab9td6n] {
        list-style: none;
        cursor: pointer;
    }

        .new-model-card > summary[b-eitab9td6n]::-webkit-details-marker,
        .model-item > summary[b-eitab9td6n]::-webkit-details-marker {
            display: none;
        }

    .new-model-card > summary[b-eitab9td6n] {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 12px 13px;
    }

.new-model-plus[b-eitab9td6n] {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-size: .9rem;
}

.new-model-card > summary > span:nth-child(2)[b-eitab9td6n] {
    flex: 1;
    display: grid;
    gap: 2px;
}

.new-model-card summary strong[b-eitab9td6n] {
    font-size: .6rem;
}

.new-model-card summary small[b-eitab9td6n] {
    color: var(--ai-muted);
    font-size: .46rem;
}

.summary-chevron[b-eitab9td6n] {
    color: var(--ai-muted);
}

details[open] > summary .summary-chevron[b-eitab9td6n] {
    transform: rotate(180deg);
}

.model-editor-form[b-eitab9td6n] {
    border-top: 1px solid var(--ai-border);
}

.model-field-grid[b-eitab9td6n] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 12px 13px;
    background: var(--ai-panel-soft);
}

    .model-field-grid .wide[b-eitab9td6n] {
        grid-column: span 2;
    }

.model-active-field[b-eitab9td6n] {
    min-height: 36px;
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid var(--ai-border);
    border-radius: 9px;
    background: var(--ai-panel);
}

    .model-active-field > span[b-eitab9td6n] {
        display: grid;
        gap: 1px;
    }

    .model-active-field strong[b-eitab9td6n] {
        font-size: .47rem;
    }

    .model-active-field small[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .39rem;
    }

.model-form-actions[b-eitab9td6n] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 13px 12px;
}

.model-list[b-eitab9td6n] {
    display: grid;
    gap: 8px;
}

.model-item > summary[b-eitab9td6n] {
    display: grid;
    grid-template-columns: auto minmax(180px,1fr) auto minmax(110px,auto) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 13px;
}

.model-avatar[b-eitab9td6n] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    font-size: .48rem;
    font-weight: 900;
}

.model-summary-copy[b-eitab9td6n] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

    .model-summary-copy strong[b-eitab9td6n],
    .model-summary-copy code[b-eitab9td6n] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .model-summary-copy strong[b-eitab9td6n] {
        font-size: .6rem;
    }

    .model-summary-copy code[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .46rem;
    }

.model-badges em[b-eitab9td6n],
.model-badges b[b-eitab9td6n] {
    font-style: normal;
}

    .model-badges em.active[b-eitab9td6n] {
        color: var(--ai-green);
        background: var(--ai-green-soft);
    }

    .model-badges em.inactive[b-eitab9td6n] {
        color: var(--ai-red);
        background: var(--ai-red-soft);
    }

.model-badges b[b-eitab9td6n] {
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
}

.model-cost-preview[b-eitab9td6n] {
    display: grid;
    gap: 2px;
    text-align: end;
}

    .model-cost-preview small[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .4rem;
    }

    .model-cost-preview strong[b-eitab9td6n] {
        color: var(--ai-secondary);
        font-size: .5rem;
    }

.model-item-body[b-eitab9td6n] {
    border-top: 1px solid var(--ai-border);
}

.model-state-form[b-eitab9td6n] {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(180px,.5fr) auto;
    gap: 10px;
    align-items: end;
    padding: 11px 13px;
    border-top: 1px solid var(--ai-border);
}

    .model-state-form > div[b-eitab9td6n] {
        display: grid;
        gap: 2px;
    }

    .model-state-form strong[b-eitab9td6n] {
        font-size: .54rem;
    }

    .model-state-form small[b-eitab9td6n] {
        color: var(--ai-muted);
        font-size: .45rem;
        line-height: 1.55;
    }

html[data-theme="dark"] .ai-configuration[b-eitab9td6n] {
    --ai-panel: #151d2b;
    --ai-panel-soft: #111925;
    --ai-panel-muted: #101722;
    --ai-border: #263246;
    --ai-border-strong: #314058;
    --ai-text: #e8edf5;
    --ai-secondary: #a8b4c7;
    --ai-muted: #77859b;
    --ai-shadow: 0 14px 38px rgba(0,0,0,.14);
}

html[data-theme="dark"] .section-jump-nav[b-eitab9td6n] {
    border-color: rgba(38,50,70,.88);
    background: rgba(17,25,37,.88);
}

html[data-theme="dark"] .test-metric[b-eitab9td6n],
html[data-theme="dark"] .test-translation[b-eitab9td6n],
html[data-theme="dark"] .feedback-icon[b-eitab9td6n] {
    background: rgba(255,255,255,.035);
}

@media (max-width:1180px) {
    .overview-grid[b-eitab9td6n] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .processing-card[b-eitab9td6n] {
        grid-template-columns: minmax(0,1fr) auto;
    }

        .processing-card .audit-field[b-eitab9td6n] {
            grid-column: 1;
        }

        .processing-card > button[b-eitab9td6n] {
            grid-column: 2;
            grid-row: 2;
        }

    .quality-profile-grid[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

    .model-field-grid[b-eitab9td6n] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:860px) {
    .ai-configuration[b-eitab9td6n] {
        padding: 24px 18px 46px;
    }

    .page-header[b-eitab9td6n], .section-heading[b-eitab9td6n] {
        align-items: stretch;
        flex-direction: column;
    }

    .provider-link[b-eitab9td6n] {
        width: fit-content;
        min-width: 0;
    }

    .routing-quality-footer[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

        .routing-quality-footer button[b-eitab9td6n] {
            width: 100%;
        }

    .test-form[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

    .test-button[b-eitab9td6n] {
        min-height: 40px;
    }

    .test-result.success[b-eitab9td6n] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .model-item > summary[b-eitab9td6n] {
        grid-template-columns: auto minmax(0,1fr) auto;
    }

    .model-badges[b-eitab9td6n] {
        grid-column: 2;
    }

    .model-cost-preview[b-eitab9td6n] {
        display: none;
    }

    .model-state-form[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }
}

@media (max-width:620px) {
    .ai-configuration[b-eitab9td6n] {
        padding: 20px 13px 40px;
    }

    .overview-grid[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

    .processing-card[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

        .processing-card .audit-field[b-eitab9td6n], .processing-card > button[b-eitab9td6n] {
            grid-column: auto;
            grid-row: auto;
        }

        .processing-card > button[b-eitab9td6n] {
            width: 100%;
        }

    .routing-quality-header[b-eitab9td6n] {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-state[b-eitab9td6n] {
        margin-inline-start: 48px;
    }

    .test-result.success[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

    .model-field-grid[b-eitab9td6n] {
        grid-template-columns: 1fr;
    }

        .model-field-grid .wide[b-eitab9td6n] {
            grid-column: auto;
        }

    .model-form-actions button[b-eitab9td6n] {
        width: 100%;
    }

    .catalog-summary[b-eitab9td6n] {
        width: 100%;
        flex-wrap: wrap;
    }

        .catalog-summary > span[b-eitab9td6n] {
            flex: 1;
        }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminAiProvider.razor.rz.scp.css */
/* ============================================================
   AI ECONOMICS, PROVIDER & USAGE V2
   ============================================================ */

.ai-economics[b-gpvsle509j] {
    --eco-accent: #5f70e8;
    --eco-accent-hover: #4f60d4;
    --eco-accent-soft: rgba(95, 112, 232, .08);
    --eco-accent-border: rgba(95, 112, 232, .18);
    --eco-green: #238267;
    --eco-green-soft: rgba(35, 130, 103, .085);
    --eco-red: #c64f5b;
    --eco-red-soft: rgba(198, 79, 91, .08);
    --eco-amber: #a8761c;
    --eco-amber-soft: rgba(168, 118, 28, .09);
    --eco-violet: #7458b5;
    --eco-violet-soft: rgba(116, 88, 181, .09);
    --eco-blue: #347bb7;
    --eco-blue-soft: rgba(52, 123, 183, .085);
    --eco-panel: #ffffff;
    --eco-panel-soft: #f8faff;
    --eco-panel-muted: #f4f7fb;
    --eco-border: #e2e8f2;
    --eco-border-strong: #d5deec;
    --eco-text: #1c2940;
    --eco-secondary: #5e6c82;
    --eco-muted: #8591a4;
    --eco-shadow: 0 13px 34px rgba(36, 52, 86, .045);
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 28px 58px;
    color: var(--eco-text);
}


/* ============================================================
   HEADER
   ============================================================ */

.economics-header[b-gpvsle509j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 19px;
}

.economics-header-copy[b-gpvsle509j] {
    min-width: 0;
    max-width: 850px;
}

.economics-eyebrow[b-gpvsle509j],
.panel-kicker[b-gpvsle509j],
.detail-kicker[b-gpvsle509j] {
    display: block;
    margin-bottom: 7px;
    color: var(--eco-accent);
    font-size: .61rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: .11em;
}

.ai-economics[dir="rtl"] .economics-eyebrow[b-gpvsle509j],
.ai-economics[dir="rtl"] .panel-kicker[b-gpvsle509j],
.ai-economics[dir="rtl"] .detail-kicker[b-gpvsle509j] {
    letter-spacing: 0;
}

.economics-header h1[b-gpvsle509j] {
    margin: 0;
    color: var(--eco-text);
    font-size: clamp(1.7rem, 2.4vw, 2.45rem);
    font-weight: 820;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.ai-economics[dir="rtl"] .economics-header h1[b-gpvsle509j] {
    letter-spacing: 0;
}

.economics-header p[b-gpvsle509j] {
    max-width: 820px;
    margin: 9px 0 0;
    color: var(--eco-secondary);
    font-size: .76rem;
    line-height: 1.9;
}

.economics-header-actions[b-gpvsle509j] {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 10px;
}

.secondary-action[b-gpvsle509j] {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--eco-border);
    border-radius: 13px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: 0 7px 20px rgba(36, 52, 86, .03);
    text-decoration: none;
}

    .secondary-action:hover[b-gpvsle509j] {
        border-color: var(--eco-accent-border);
    }

.action-icon[b-gpvsle509j] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .72rem;
}

.secondary-action > span:last-child[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.secondary-action strong[b-gpvsle509j] {
    font-size: .62rem;
}

.secondary-action small[b-gpvsle509j] {
    color: var(--eco-muted);
    font-size: .48rem;
}

.period-switcher[b-gpvsle509j] {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--eco-border);
    border-radius: 11px;
    background: var(--eco-panel);
}

    .period-switcher a[b-gpvsle509j] {
        padding: 6px 8px;
        border-radius: 7px;
        color: var(--eco-secondary);
        font-size: .52rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

        .period-switcher a:hover[b-gpvsle509j] {
            color: var(--eco-accent);
            background: var(--eco-accent-soft);
        }

        .period-switcher a.active[b-gpvsle509j] {
            color: #fff;
            background: var(--eco-accent);
        }


/* ============================================================
   FEEDBACK + LOADING
   ============================================================ */

.feedback-banner[b-gpvsle509j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 13px;
}

    .feedback-banner.success[b-gpvsle509j] {
        border-color: rgba(35, 130, 103, .17);
        color: #22735c;
        background: rgba(35, 130, 103, .055);
    }

    .feedback-banner.danger[b-gpvsle509j] {
        border-color: rgba(198, 79, 91, .17);
        color: #ad4652;
        background: rgba(198, 79, 91, .055);
    }

.feedback-symbol[b-gpvsle509j] {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .62);
    font-size: .68rem;
    font-weight: 900;
}

.feedback-banner > div[b-gpvsle509j] {
    display: grid;
    gap: 2px;
}

.feedback-banner strong[b-gpvsle509j] {
    font-size: .64rem;
}

.feedback-banner small[b-gpvsle509j],
.feedback-banner code[b-gpvsle509j] {
    color: inherit;
    font-size: .51rem;
}

.economics-loading[b-gpvsle509j] {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    color: var(--eco-muted);
    background: var(--eco-panel);
    font-size: .65rem;
}

.economics-spinner[b-gpvsle509j] {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(95, 112, 232, .15);
    border-top-color: var(--eco-accent);
    border-radius: 50%;
    animation: economics-spin-b-gpvsle509j .8s linear infinite;
}

@keyframes economics-spin-b-gpvsle509j {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   CORE STATUS
   ============================================================ */

.economics-status-strip[b-gpvsle509j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
    padding: 11px 13px;
    border: 1px solid var(--eco-accent-border);
    border-radius: 14px;
    background: linear-gradient( 90deg, rgba(95, 112, 232, .045), rgba(95, 112, 232, .015) );
}

.status-strip-copy[b-gpvsle509j] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.status-strip-icon[b-gpvsle509j] {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .58rem;
    font-weight: 850;
}

.status-strip-copy > div[b-gpvsle509j] {
    min-width: 0;
}

.status-strip-copy strong[b-gpvsle509j] {
    display: block;
    color: var(--eco-text);
    font-size: .59rem;
}

.status-strip-copy p[b-gpvsle509j] {
    margin: 2px 0 0;
    color: var(--eco-secondary);
    font-size: .50rem;
    line-height: 1.6;
}

.economics-stage-badge[b-gpvsle509j] {
    flex: 0 0 auto;
    padding: 5px 7px;
    border-radius: 999px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .48rem;
    font-weight: 850;
}


/* ============================================================
   ECONOMICS KPIs
   ============================================================ */

.economics-kpi-grid[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.economics-kpi-card[b-gpvsle509j] {
    min-width: 0;
    min-height: 118px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--eco-border);
    border-radius: 16px;
    background: var(--eco-panel);
    box-shadow: 0 8px 22px rgba(36, 52, 86, .03);
}

.kpi-icon[b-gpvsle509j] {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .66rem;
    font-weight: 900;
}

.economics-kpi-card.credits .kpi-icon[b-gpvsle509j] {
    color: var(--eco-blue);
    background: var(--eco-blue-soft);
}

.economics-kpi-card.cost-per-credit .kpi-icon[b-gpvsle509j] {
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
}

.economics-kpi-card.savings .kpi-icon[b-gpvsle509j] {
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.economics-kpi-card.jobs .kpi-icon[b-gpvsle509j] {
    color: #55708b;
    background: rgba(85, 112, 139, .08);
}

.economics-kpi-card.revenue .kpi-icon[b-gpvsle509j] {
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.kpi-copy[b-gpvsle509j] {
    min-width: 0;
    flex: 1;
    display: grid;
}

    .kpi-copy > span[b-gpvsle509j] {
        color: var(--eco-secondary);
        font-size: .52rem;
        font-weight: 700;
    }

    .kpi-copy strong[b-gpvsle509j] {
        overflow: hidden;
        margin-top: 10px;
        color: var(--eco-text);
        font-size: .95rem;
        font-weight: 820;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kpi-copy small[b-gpvsle509j] {
        margin-top: 5px;
        color: var(--eco-muted);
        font-size: .44rem;
        line-height: 1.45;
    }


/* ============================================================
   SECTIONS
   ============================================================ */

.economics-section[b-gpvsle509j] {
    margin-top: 29px;
    scroll-margin-top: 20px;
}

.section-heading[b-gpvsle509j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

    .section-heading > div:first-child[b-gpvsle509j] {
        min-width: 0;
        max-width: 910px;
    }

    .section-heading h2[b-gpvsle509j] {
        margin: 0;
        color: var(--eco-text);
        font-size: 1.04rem;
        font-weight: 790;
    }

    .section-heading p[b-gpvsle509j] {
        margin: 6px 0 0;
        color: var(--eco-muted);
        font-size: .58rem;
        line-height: 1.7;
    }

.section-summary[b-gpvsle509j] {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

    .section-summary > span[b-gpvsle509j] {
        min-width: 76px;
        display: grid;
        gap: 2px;
        padding: 7px 9px;
        border: 1px solid var(--eco-border);
        border-radius: 10px;
        background: var(--eco-panel);
        text-align: center;
    }

    .section-summary strong[b-gpvsle509j] {
        font-size: .66rem;
    }

    .section-summary small[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .40rem;
    }


/* ============================================================
   EMPTY STATES
   ============================================================ */

.empty-state[b-gpvsle509j],
.mini-empty[b-gpvsle509j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid var(--eco-border);
    border-radius: 15px;
    color: var(--eco-muted);
    background: var(--eco-panel);
}

.empty-state[b-gpvsle509j] {
    min-height: 130px;
    padding: 18px;
}

.empty-state-icon[b-gpvsle509j] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--eco-muted);
    background: var(--eco-panel-muted);
    font-size: .85rem;
}

.empty-state strong[b-gpvsle509j] {
    display: block;
    color: var(--eco-text);
    font-size: .63rem;
}

.empty-state p[b-gpvsle509j] {
    max-width: 600px;
    margin: 4px 0 0;
    font-size: .50rem;
    line-height: 1.6;
}

.mini-empty[b-gpvsle509j] {
    min-height: 95px;
    padding: 14px;
    font-size: .52rem;
    text-align: center;
}


/* ============================================================
   JOB ECONOMICS TABLE
   ============================================================ */

.job-table-shell[b-gpvsle509j] {
    overflow-x: auto;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.job-table-head[b-gpvsle509j] {
    min-width: 1080px;
    display: grid;
    grid-template-columns: minmax(265px, 1.6fr) minmax(145px, .75fr) minmax(170px, .9fr) minmax(155px, .82fr) minmax(130px, .65fr) minmax(155px, .78fr);
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--eco-border);
    color: var(--eco-muted);
    background: var(--eco-panel-muted);
    font-size: .47rem;
    font-weight: 760;
}

.job-economics-list[b-gpvsle509j] {
    min-width: 1080px;
}

.job-economics-item[b-gpvsle509j] {
    border-bottom: 1px solid var(--eco-border);
}

    .job-economics-item:last-child[b-gpvsle509j] {
        border-bottom: 0;
    }

    .job-economics-item > summary[b-gpvsle509j] {
        position: relative;
        display: grid;
        grid-template-columns: minmax(265px, 1.6fr) minmax(145px, .75fr) minmax(170px, .9fr) minmax(155px, .82fr) minmax(130px, .65fr) minmax(155px, .78fr);
        gap: 10px;
        align-items: center;
        padding: 12px 36px 12px 14px;
        list-style: none;
        cursor: pointer;
        transition: background-color .15s ease;
    }

.ai-economics[dir="rtl"] .job-economics-item > summary[b-gpvsle509j] {
    padding: 12px 14px 12px 36px;
}

.job-economics-item > summary[b-gpvsle509j]::-webkit-details-marker {
    display: none;
}

.job-economics-item > summary:hover[b-gpvsle509j] {
    background: rgba(95, 112, 232, .018);
}

.job-economics-item[open] > summary[b-gpvsle509j] {
    background: rgba(95, 112, 232, .025);
}

.details-chevron[b-gpvsle509j] {
    position: absolute;
    inset-inline-end: 13px;
    color: var(--eco-muted);
    font-size: .68rem;
    transition: transform .16s ease;
}

.job-economics-item[open] .details-chevron[b-gpvsle509j] {
    transform: rotate(180deg);
}

.job-identity[b-gpvsle509j] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.job-type-icon[b-gpvsle509j] {
    width: 40px;
    height: 34px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .42rem;
    font-weight: 900;
}

    .job-type-icon.image[b-gpvsle509j] {
        color: #906021;
        background: rgba(144, 96, 33, .08);
    }

    .job-type-icon.website[b-gpvsle509j] {
        color: #237b68;
        background: rgba(35, 123, 104, .08);
    }

    .job-type-icon.subtitle[b-gpvsle509j] {
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
    }

    .job-type-icon.text[b-gpvsle509j] {
        color: #4d6b86;
        background: rgba(77, 107, 134, .08);
    }

.job-identity-copy[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

    .job-identity-copy > strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .58rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .job-identity-copy > small[b-gpvsle509j],
    .job-user[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-muted);
        font-size: .43rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.job-user[b-gpvsle509j] {
    max-width: 190px;
    color: var(--eco-secondary);
}

.job-route[b-gpvsle509j] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.quality-badge[b-gpvsle509j],
.input-label[b-gpvsle509j],
.ocr-badge[b-gpvsle509j],
.cost-origin[b-gpvsle509j],
.pending-badge[b-gpvsle509j] {
    padding: 4px 6px;
    border-radius: 999px;
    font-size: .42rem;
    font-weight: 760;
    white-space: nowrap;
}

    .quality-badge.standard[b-gpvsle509j] {
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
    }

    .quality-badge.professional[b-gpvsle509j] {
        color: var(--eco-blue);
        background: var(--eco-blue-soft);
    }

    .quality-badge.expert[b-gpvsle509j] {
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
    }

.input-label[b-gpvsle509j] {
    color: var(--eco-secondary);
    background: rgba(94, 108, 130, .07);
}

.ocr-badge[b-gpvsle509j] {
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.job-ai-usage[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 6px;
}

    .job-ai-usage > strong[b-gpvsle509j],
    .job-ai-usage > span[b-gpvsle509j] {
        display: grid;
        gap: 1px;
        color: var(--eco-text);
        font-size: .53rem;
    }

    .job-ai-usage small[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .37rem;
    }

.job-cost[b-gpvsle509j],
.job-credits[b-gpvsle509j],
.job-revenue[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    gap: 3px;
    justify-items: start;
}

    .job-cost > strong[b-gpvsle509j],
    .job-credits > strong[b-gpvsle509j],
    .job-revenue > strong[b-gpvsle509j] {
        color: var(--eco-text);
        font-size: .58rem;
    }

.cost-origin.actual[b-gpvsle509j] {
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.cost-origin.estimated[b-gpvsle509j] {
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.job-cost .saving[b-gpvsle509j] {
    color: var(--eco-green);
    font-size: .41rem;
}

.job-credits > span[b-gpvsle509j] {
    color: var(--eco-muted);
    font-size: .42rem;
}

.ledger-warning[b-gpvsle509j] {
    color: var(--eco-red);
    font-size: .40rem;
}

.pending-badge[b-gpvsle509j] {
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.profit-value[b-gpvsle509j] {
    font-size: .45rem;
    font-weight: 750;
}

    .profit-value.positive[b-gpvsle509j] {
        color: var(--eco-green);
    }

    .profit-value.negative[b-gpvsle509j] {
        color: var(--eco-red);
    }


/* ============================================================
   JOB DETAILS
   ============================================================ */

.job-details[b-gpvsle509j] {
    display: grid;
    grid-template-columns: 1.12fr 1fr 1.08fr;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--eco-border);
    background: var(--eco-panel-soft);
}

.job-detail-block[b-gpvsle509j] {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--eco-border);
    border-radius: 13px;
    background: var(--eco-panel);
}

    .job-detail-block h3[b-gpvsle509j] {
        margin: 0 0 10px;
        color: var(--eco-text);
        font-size: .63rem;
    }

.detail-kicker[b-gpvsle509j] {
    margin-bottom: 3px;
    font-size: .43rem;
}

.detail-metric-grid[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

    .detail-metric-grid > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 3px;
        padding: 7px 8px;
        border-radius: 8px;
        background: var(--eco-panel-soft);
    }

    .detail-metric-grid span[b-gpvsle509j],
    .money-lines span[b-gpvsle509j],
    .billing-ledger-row span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .43rem;
    }

    .detail-metric-grid strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .53rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.models-value[b-gpvsle509j] {
    grid-column: 1 / -1;
}

.value-danger[b-gpvsle509j] {
    color: var(--eco-red) !important;
}

.value-positive[b-gpvsle509j] {
    color: var(--eco-green) !important;
}

.money-lines[b-gpvsle509j] {
    display: grid;
    gap: 7px;
}

    .money-lines > div[b-gpvsle509j],
    .billing-ledger-row[b-gpvsle509j] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 0;
        border-bottom: 1px solid var(--eco-border);
    }

        .money-lines > div:last-child[b-gpvsle509j] {
            border-bottom: 0;
        }

        .money-lines strong[b-gpvsle509j],
        .billing-ledger-row strong[b-gpvsle509j] {
            color: var(--eco-text);
            font-size: .52rem;
        }

.money-total[b-gpvsle509j] {
    margin-top: 2px;
    padding: 8px !important;
    border: 1px solid var(--eco-accent-border) !important;
    border-radius: 9px;
    background: var(--eco-accent-soft);
}

    .money-total strong[b-gpvsle509j] {
        color: var(--eco-accent);
    }

.muted-money[b-gpvsle509j] {
    color: var(--eco-muted) !important;
}

.saving-line strong[b-gpvsle509j] {
    color: var(--eco-green);
}

.cost-policy-note[b-gpvsle509j] {
    margin: 9px 0 0;
    padding: 8px;
    border-radius: 8px;
    color: var(--eco-muted);
    background: var(--eco-panel-muted);
    font-size: .43rem;
    line-height: 1.55;
}

.ledger-alert[b-gpvsle509j],
.revenue-pending-card[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 9px;
}

.ledger-alert[b-gpvsle509j] {
    border: 1px solid rgba(198, 79, 91, .13);
    color: var(--eco-red);
    background: var(--eco-red-soft);
}

    .ledger-alert > span[b-gpvsle509j],
    .revenue-pending-icon[b-gpvsle509j] {
        width: 23px;
        height: 23px;
        flex: 0 0 23px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        font-size: .52rem;
        font-weight: 900;
    }

    .ledger-alert > span[b-gpvsle509j] {
        background: rgba(198, 79, 91, .08);
    }

    .ledger-alert p[b-gpvsle509j],
    .revenue-pending-card p[b-gpvsle509j] {
        margin: 0;
        font-size: .43rem;
        line-height: 1.55;
    }

.revenue-pending-card[b-gpvsle509j] {
    border: 1px solid rgba(168, 118, 28, .14);
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.revenue-pending-icon[b-gpvsle509j] {
    background: rgba(168, 118, 28, .09);
}

.revenue-pending-card strong[b-gpvsle509j] {
    display: block;
    margin-bottom: 3px;
    color: #876019;
    font-size: .51rem;
}

.revenue-ready[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 9px;
}

    .revenue-ready > div[b-gpvsle509j] {
        display: grid;
        gap: 3px;
        padding: 7px;
        border-radius: 8px;
        background: var(--eco-green-soft);
    }

    .revenue-ready span[b-gpvsle509j] {
        color: #52796d;
        font-size: .40rem;
    }

    .revenue-ready strong[b-gpvsle509j] {
        color: var(--eco-green);
        font-size: .52rem;
    }


/* ============================================================
   PROVIDER METRICS
   ============================================================ */

.provider-health[b-gpvsle509j] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--eco-border);
    border-radius: 10px;
    background: var(--eco-panel);
}

.health-dot[b-gpvsle509j] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

    .health-dot.on[b-gpvsle509j] {
        background: var(--eco-green);
        box-shadow: 0 0 0 4px var(--eco-green-soft);
    }

    .health-dot.off[b-gpvsle509j] {
        background: var(--eco-red);
        box-shadow: 0 0 0 4px var(--eco-red-soft);
    }

.provider-health > div[b-gpvsle509j] {
    display: grid;
    gap: 1px;
}

.provider-health strong[b-gpvsle509j] {
    font-size: .52rem;
}

.provider-health small[b-gpvsle509j] {
    color: var(--eco-muted);
    font-size: .40rem;
}

.provider-metrics-grid[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}

    .provider-metrics-grid article[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 11px 12px;
        border: 1px solid var(--eco-border);
        border-radius: 13px;
        background: var(--eco-panel);
    }

    .provider-metrics-grid span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .46rem;
    }

    .provider-metrics-grid strong[b-gpvsle509j] {
        color: var(--eco-text);
        font-size: .74rem;
    }

    .provider-metrics-grid small[b-gpvsle509j] {
        color: var(--eco-secondary);
        font-size: .41rem;
    }

.provider-grid[b-gpvsle509j] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
    gap: 10px;
}

.provider-panel[b-gpvsle509j] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 16px;
    background: var(--eco-panel);
    box-shadow: 0 8px 24px rgba(36, 52, 86, .03);
}

.panel-heading[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--eco-border);
}

    .panel-heading h3[b-gpvsle509j] {
        margin: 0;
        color: var(--eco-text);
        font-size: .66rem;
    }

.panel-kicker[b-gpvsle509j] {
    margin-bottom: 2px;
    font-size: .42rem;
}

.error-count-badge[b-gpvsle509j] {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--eco-red);
    background: var(--eco-red-soft);
    font-size: .45rem;
    font-weight: 800;
}

.model-usage-list[b-gpvsle509j] {
    display: grid;
}

.model-usage-row[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(160px, 1.3fr) minmax(125px, .85fr) minmax(115px, .7fr) minmax(95px, .55fr);
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--eco-border);
}

    .model-usage-row:last-child[b-gpvsle509j] {
        border-bottom: 0;
    }

.model-avatar[b-gpvsle509j] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .44rem;
    font-weight: 900;
}

.model-usage-name[b-gpvsle509j],
.model-token-summary[b-gpvsle509j],
.model-cost[b-gpvsle509j],
.model-latency[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

    .model-usage-name strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .53rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .model-usage-name small[b-gpvsle509j],
    .model-token-summary small[b-gpvsle509j],
    .model-cost small[b-gpvsle509j],
    .model-latency small[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .39rem;
    }

    .model-token-summary strong[b-gpvsle509j],
    .model-cost strong[b-gpvsle509j],
    .model-latency strong[b-gpvsle509j] {
        color: var(--eco-secondary);
        font-size: .48rem;
    }

.error-list[b-gpvsle509j] {
    display: grid;
}

.error-row[b-gpvsle509j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 9px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--eco-border);
}

    .error-row:last-child[b-gpvsle509j] {
        border-bottom: 0;
    }

.error-code[b-gpvsle509j] {
    overflow: hidden;
    color: var(--eco-red);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .47rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-occurrences[b-gpvsle509j] {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

    .error-occurrences strong[b-gpvsle509j] {
        color: var(--eco-text);
        font-size: .52rem;
    }

    .error-occurrences small[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .39rem;
    }

.error-date[b-gpvsle509j] {
    grid-column: 1 / -1;
    color: var(--eco-muted);
    font-size: .39rem;
}

.healthy-empty[b-gpvsle509j] {
    min-height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
}

    .healthy-empty > span[b-gpvsle509j] {
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: var(--eco-green);
        background: var(--eco-green-soft);
        font-size: .64rem;
        font-weight: 900;
    }

    .healthy-empty > div[b-gpvsle509j] {
        display: grid;
        gap: 2px;
    }

    .healthy-empty strong[b-gpvsle509j] {
        color: var(--eco-text);
        font-size: .53rem;
    }

    .healthy-empty small[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .42rem;
    }


/* ============================================================
   TRANSPORT SETTINGS
   ============================================================ */

.transport-layout[b-gpvsle509j] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .58fr);
    gap: 10px;
}

.transport-form[b-gpvsle509j],
.economics-roadmap[b-gpvsle509j] {
    border: 1px solid var(--eco-border);
    border-radius: 16px;
    background: var(--eco-panel);
    box-shadow: 0 8px 24px rgba(36, 52, 86, .03);
}

.transport-form[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 13px;
}

    .transport-form label[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

        .transport-form label.wide[b-gpvsle509j] {
            grid-column: 1 / -1;
        }

        .transport-form label > span[b-gpvsle509j] {
            color: var(--eco-secondary);
            font-size: .48rem;
            font-weight: 700;
        }

        .transport-form label > small[b-gpvsle509j] {
            color: var(--eco-muted);
            font-size: .40rem;
        }

    .transport-form input[b-gpvsle509j],
    .transport-form select[b-gpvsle509j] {
        width: 100%;
        min-height: 36px;
        box-sizing: border-box;
        padding: 0 9px;
        border: 1px solid var(--eco-border-strong);
        border-radius: 9px;
        outline: none;
        color: var(--eco-text);
        background: var(--eco-panel-soft);
        font: inherit;
        font-size: .54rem;
    }

        .transport-form input:focus[b-gpvsle509j],
        .transport-form select:focus[b-gpvsle509j] {
            border-color: rgba(95, 112, 232, .44);
            background: var(--eco-panel);
            box-shadow: 0 0 0 3px rgba(95, 112, 232, .07);
        }

.transport-form-footer[b-gpvsle509j] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.transport-security-note[b-gpvsle509j] {
    color: var(--eco-muted);
    font-size: .43rem;
}

.primary-button[b-gpvsle509j] {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--eco-accent);
    border-radius: 9px;
    color: #fff;
    background: var(--eco-accent);
    font: inherit;
    font-size: .54rem;
    font-weight: 760;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(95, 112, 232, .18);
}

    .primary-button:hover[b-gpvsle509j] {
        background: var(--eco-accent-hover);
    }

.economics-roadmap[b-gpvsle509j] {
    padding: 13px;
}

    .economics-roadmap h3[b-gpvsle509j] {
        margin: 0 0 10px;
        font-size: .64rem;
    }

.roadmap-item[b-gpvsle509j] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--eco-border);
}

    .roadmap-item:last-child[b-gpvsle509j] {
        border-bottom: 0;
    }

    .roadmap-item > span[b-gpvsle509j] {
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        color: var(--eco-muted);
        background: var(--eco-panel-muted);
        font-size: .44rem;
        font-weight: 850;
    }

    .roadmap-item.active > span[b-gpvsle509j] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

    .roadmap-item.next > span[b-gpvsle509j] {
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
    }

    .roadmap-item > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .roadmap-item strong[b-gpvsle509j] {
        font-size: .51rem;
    }

    .roadmap-item small[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .40rem;
    }

    .roadmap-item b[b-gpvsle509j] {
        color: var(--eco-green);
        font-size: .57rem;
    }


/* ============================================================
   HISTORICAL ECONOMICS RECONSTRUCTION
   ============================================================ */

.reconstruction-panel[b-gpvsle509j] {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.reconstruction-panel-heading[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--eco-border);
    background: linear-gradient( 115deg, rgba(95,112,232,.045), rgba(95,112,232,.008) );
}

.reconstruction-title[b-gpvsle509j] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.reconstruction-icon[b-gpvsle509j] {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .48rem;
    font-weight: 900;
}

.reconstruction-title > div[b-gpvsle509j] {
    min-width: 0;
}

.reconstruction-title h2[b-gpvsle509j] {
    margin: 0;
    color: var(--eco-text);
    font-size: .82rem;
}

.reconstruction-title p[b-gpvsle509j] {
    max-width: 900px;
    margin: 5px 0 0;
    color: var(--eco-muted);
    font-size: .50rem;
    line-height: 1.7;
}

.reconstruction-status[b-gpvsle509j] {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .44rem;
    font-weight: 800;
}

    .reconstruction-status.ready[b-gpvsle509j] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

    .reconstruction-status.done[b-gpvsle509j] {
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
    }

    .reconstruction-status.blocked[b-gpvsle509j] {
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }

.reconstruction-loading[b-gpvsle509j] {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--eco-muted);
    font-size: .52rem;
}

.reconstruction-complete[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 13px;
    padding: 12px;
    border: 1px solid rgba(35,130,103,.14);
    border-radius: 12px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

    .reconstruction-complete > span[b-gpvsle509j],
    .reconstruction-blocked > span[b-gpvsle509j] {
        width: 29px;
        height: 29px;
        flex: 0 0 29px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        font-size: .62rem;
        font-weight: 900;
    }

    .reconstruction-complete > span[b-gpvsle509j] {
        background: rgba(35,130,103,.08);
    }

    .reconstruction-complete strong[b-gpvsle509j],
    .reconstruction-blocked strong[b-gpvsle509j] {
        display: block;
        font-size: .56rem;
    }

    .reconstruction-complete p[b-gpvsle509j],
    .reconstruction-blocked p[b-gpvsle509j] {
        margin: 3px 0 0;
        font-size: .44rem;
        line-height: 1.6;
    }

.reconstruction-metrics[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 13px 13px 0;
}

    .reconstruction-metrics article[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--eco-border);
        border-radius: 11px;
        background: var(--eco-panel-soft);
    }

    .reconstruction-metrics span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .42rem;
    }

    .reconstruction-metrics strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .62rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.value-warning[b-gpvsle509j] {
    color: var(--eco-amber) !important;
}

.reconstruction-blocked[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 10px 13px 0;
    padding: 10px;
    border: 1px solid rgba(198,79,91,.15);
    border-radius: 11px;
    color: var(--eco-red);
    background: var(--eco-red-soft);
}

    .reconstruction-blocked > span[b-gpvsle509j] {
        background: rgba(198,79,91,.08);
    }

    .reconstruction-blocked code[b-gpvsle509j] {
        display: inline-block;
        margin-top: 4px;
        font-size: .43rem;
    }

.reconstruction-warnings[b-gpvsle509j] {
    margin: 10px 13px 0;
    border: 1px solid rgba(168,118,28,.14);
    border-radius: 11px;
    background: var(--eco-amber-soft);
}

    .reconstruction-warnings > summary[b-gpvsle509j] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 10px;
        list-style: none;
        color: var(--eco-amber);
        cursor: pointer;
        font-size: .48rem;
        font-weight: 760;
    }

        .reconstruction-warnings > summary[b-gpvsle509j]::-webkit-details-marker {
            display: none;
        }

        .reconstruction-warnings > summary strong[b-gpvsle509j] {
            min-width: 24px;
            padding: 3px 6px;
            border-radius: 999px;
            background: rgba(168,118,28,.09);
            text-align: center;
            font-size: .42rem;
        }

    .reconstruction-warnings > div[b-gpvsle509j] {
        max-height: 240px;
        overflow: auto;
        padding: 0 10px 9px;
    }

    .reconstruction-warnings p[b-gpvsle509j] {
        margin: 0;
        padding: 5px 0;
        border-top: 1px solid rgba(168,118,28,.10);
        color: #88601a;
        font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
        font-size: .40rem;
        line-height: 1.55;
    }

    .reconstruction-warnings small[b-gpvsle509j] {
        display: block;
        margin-top: 6px;
        color: var(--eco-muted);
        font-size: .40rem;
    }

.reconstruction-actions[b-gpvsle509j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
}

.reconstruction-preview-button[b-gpvsle509j],
.reconstruction-execute-button[b-gpvsle509j] {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 11px;
    border-radius: 9px;
    font: inherit;
    font-size: .49rem;
    font-weight: 760;
    text-decoration: none;
}

.reconstruction-preview-button[b-gpvsle509j] {
    border: 1px solid var(--eco-border);
    color: var(--eco-secondary);
    background: var(--eco-panel);
}

    .reconstruction-preview-button:hover[b-gpvsle509j] {
        border-color: var(--eco-accent-border);
        color: var(--eco-accent);
    }

.reconstruction-execute-form[b-gpvsle509j] {
    min-width: min(640px,100%);
    display: grid;
    grid-template-columns: minmax(260px,1fr) auto;
    gap: 8px;
    align-items: end;
}

    .reconstruction-execute-form label[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

        .reconstruction-execute-form label > span[b-gpvsle509j] {
            color: var(--eco-secondary);
            font-size: .44rem;
            font-weight: 700;
        }

    .reconstruction-execute-form input[b-gpvsle509j] {
        width: 100%;
        min-height: 37px;
        box-sizing: border-box;
        padding: 0 9px;
        border: 1px solid var(--eco-border-strong);
        border-radius: 9px;
        outline: none;
        color: var(--eco-text);
        background: var(--eco-panel-soft);
        font: inherit;
        font-size: .48rem;
    }

        .reconstruction-execute-form input:focus[b-gpvsle509j] {
            border-color: rgba(95,112,232,.44);
            box-shadow: 0 0 0 3px rgba(95,112,232,.07);
        }

.reconstruction-execute-button[b-gpvsle509j] {
    border: 1px solid var(--eco-accent);
    color: #fff;
    background: var(--eco-accent);
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(95,112,232,.17);
}

    .reconstruction-execute-button:hover[b-gpvsle509j] {
        background: var(--eco-accent-hover);
    }


/* ============================================================
   DARK THEME
   ============================================================ */

html[data-theme="dark"] .ai-economics[b-gpvsle509j] {
    --eco-panel: #151d2b;
    --eco-panel-soft: #111925;
    --eco-panel-muted: #101722;
    --eco-border: #273246;
    --eco-border-strong: #32415a;
    --eco-text: #e8edf5;
    --eco-secondary: #a7b3c6;
    --eco-muted: #78869b;
    --eco-shadow: 0 13px 34px rgba(0, 0, 0, .14);
}

html[data-theme="dark"] .feedback-symbol[b-gpvsle509j] {
    background: rgba(255, 255, 255, .035);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1280px) {

    .economics-kpi-grid[b-gpvsle509j] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .provider-metrics-grid[b-gpvsle509j] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 1020px) {

    .economics-header[b-gpvsle509j] {
        align-items: stretch;
        flex-direction: column;
    }

    .economics-header-actions[b-gpvsle509j] {
        justify-items: start;
    }

    .provider-grid[b-gpvsle509j],
    .transport-layout[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .job-details[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 900px) {
    .reconstruction-metrics[b-gpvsle509j] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .reconstruction-actions[b-gpvsle509j] {
        align-items: stretch;
        flex-direction: column;
    }

    .reconstruction-execute-form[b-gpvsle509j] {
        width: 100%;
    }
}


@media (max-width: 760px) {

    .ai-economics[b-gpvsle509j] {
        padding: 23px 17px 46px;
    }

    .economics-kpi-grid[b-gpvsle509j],
    .provider-metrics-grid[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-heading[b-gpvsle509j] {
        align-items: flex-start;
        flex-direction: column;
    }

    .transport-form[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

        .transport-form label.wide[b-gpvsle509j],
        .transport-form-footer[b-gpvsle509j] {
            grid-column: auto;
        }

    .transport-form-footer[b-gpvsle509j] {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-button[b-gpvsle509j] {
        width: 100%;
    }

    .section-summary[b-gpvsle509j] {
        width: 100%;
    }

        .section-summary > span[b-gpvsle509j] {
            flex: 1;
        }
}


@media (max-width: 520px) {

    .ai-economics[b-gpvsle509j] {
        padding: 20px 12px 40px;
    }

    .economics-kpi-grid[b-gpvsle509j],
    .provider-metrics-grid[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .economics-header-actions[b-gpvsle509j],
    .secondary-action[b-gpvsle509j] {
        width: 100%;
    }

    .period-switcher[b-gpvsle509j] {
        width: 100%;
        overflow-x: auto;
    }

        .period-switcher a[b-gpvsle509j] {
            flex: 1;
            text-align: center;
        }

    .economics-status-strip[b-gpvsle509j] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 560px) {
    .reconstruction-panel-heading[b-gpvsle509j] {
        flex-direction: column;
    }

    .reconstruction-metrics[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .reconstruction-execute-form[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .reconstruction-preview-button[b-gpvsle509j],
    .reconstruction-execute-button[b-gpvsle509j] {
        width: 100%;
    }
}


/* ============================================================
   REALIZED REVENUE & PROFITABILITY
   ============================================================ */

.economics-kpi-grid-financial[b-gpvsle509j] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.economics-kpi-card.realized-revenue .kpi-icon[b-gpvsle509j] {
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.economics-kpi-card.gross-profit .kpi-icon[b-gpvsle509j] {
    color: #2f8067;
    background: rgba(47, 128, 103, .08);
}

.economics-kpi-card.gross-margin .kpi-icon[b-gpvsle509j] {
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
}

.economics-kpi-card.basis-health .kpi-icon[b-gpvsle509j] {
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.economics-state-summary[b-gpvsle509j] {
    flex-wrap: wrap;
}

    .economics-state-summary .summary-known[b-gpvsle509j] {
        border-color: rgba(35, 130, 103, .15);
        background: var(--eco-green-soft);
    }

        .economics-state-summary .summary-known strong[b-gpvsle509j] {
            color: var(--eco-green);
        }

    .economics-state-summary .summary-pending[b-gpvsle509j] {
        border-color: rgba(168, 118, 28, .14);
        background: var(--eco-amber-soft);
    }

        .economics-state-summary .summary-pending strong[b-gpvsle509j] {
            color: var(--eco-amber);
        }

    .economics-state-summary .summary-unknown[b-gpvsle509j] {
        border-color: rgba(198, 79, 91, .13);
        background: var(--eco-red-soft);
    }

        .economics-state-summary .summary-unknown strong[b-gpvsle509j] {
            color: var(--eco-red);
        }

.revenue-status-badge[b-gpvsle509j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: .40rem;
    font-weight: 800;
    white-space: nowrap;
}

    .revenue-status-badge.complete[b-gpvsle509j] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

    .revenue-status-badge.pending[b-gpvsle509j] {
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }

    .revenue-status-badge.unknown[b-gpvsle509j] {
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }

    .revenue-status-badge.no-charge[b-gpvsle509j] {
        color: var(--eco-secondary);
        background: rgba(94, 108, 130, .08);
    }

.revenue-cell-note[b-gpvsle509j] {
    max-width: 150px;
    overflow: hidden;
    color: var(--eco-muted);
    font-size: .38rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.revenue-allocation-metrics[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}

    .revenue-allocation-metrics > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 3px;
        padding: 7px;
        border: 1px solid var(--eco-border);
        border-radius: 8px;
        background: var(--eco-panel-soft);
    }

    .revenue-allocation-metrics span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .39rem;
    }

    .revenue-allocation-metrics strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .49rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.revenue-state-card[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 9px;
    border: 1px solid;
    border-radius: 10px;
}

.revenue-state-icon[b-gpvsle509j] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: .50rem;
    font-weight: 900;
}

.revenue-state-card > div[b-gpvsle509j] {
    min-width: 0;
}

.revenue-state-card strong[b-gpvsle509j] {
    display: block;
    font-size: .49rem;
}

.revenue-state-card p[b-gpvsle509j] {
    margin: 3px 0 0;
    font-size: .41rem;
    line-height: 1.58;
}

.revenue-state-card.complete[b-gpvsle509j] {
    border-color: rgba(35, 130, 103, .14);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

    .revenue-state-card.complete .revenue-state-icon[b-gpvsle509j] {
        background: rgba(35, 130, 103, .08);
    }

.revenue-state-card.pending[b-gpvsle509j] {
    border-color: rgba(168, 118, 28, .14);
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

    .revenue-state-card.pending .revenue-state-icon[b-gpvsle509j] {
        background: rgba(168, 118, 28, .09);
    }

.revenue-state-card.unknown[b-gpvsle509j] {
    border-color: rgba(198, 79, 91, .14);
    color: var(--eco-red);
    background: var(--eco-red-soft);
}

    .revenue-state-card.unknown .revenue-state-icon[b-gpvsle509j] {
        background: rgba(198, 79, 91, .08);
    }

.revenue-state-card.no-charge[b-gpvsle509j] {
    border-color: var(--eco-border);
    color: var(--eco-secondary);
    background: var(--eco-panel-soft);
}

    .revenue-state-card.no-charge .revenue-state-icon[b-gpvsle509j] {
        background: rgba(94, 108, 130, .08);
    }

.known-revenue-strip[b-gpvsle509j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px dashed var(--eco-border-strong);
    border-radius: 9px;
    background: var(--eco-panel-soft);
}

    .known-revenue-strip span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .41rem;
    }

    .known-revenue-strip strong[b-gpvsle509j] {
        color: var(--eco-text);
        font-size: .51rem;
    }

@media (max-width: 1280px) {
    .economics-kpi-grid-financial[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .revenue-allocation-metrics[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .economics-kpi-grid-financial[b-gpvsle509j],
    .revenue-allocation-metrics[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   READABILITY SCALE V3
   Coordinated with AdminTranslationPricingPanel
   ============================================================ */

/*
 * The original Economics UI was intentionally compact and many labels were
 * below comfortable desktop reading size. These overrides keep the existing
 * layout/branding while bringing typography, controls and spacing in line with
 * the larger Pricing Policy panel.
 */

/* ---- Page / header ---- */

.ai-economics[b-gpvsle509j] {
    padding: 34px 30px 64px;
}

.economics-header[b-gpvsle509j] {
    gap: 30px;
    margin-bottom: 24px;
}

.economics-eyebrow[b-gpvsle509j],
.panel-kicker[b-gpvsle509j],
.detail-kicker[b-gpvsle509j] {
    font-size: .76rem;
    line-height: 1.45;
}

.economics-header h1[b-gpvsle509j] {
    font-size: clamp(2rem, 2.6vw, 2.75rem);
}

.economics-header p[b-gpvsle509j] {
    margin-top: 11px;
    font-size: 1rem;
    line-height: 1.9;
}

.secondary-action[b-gpvsle509j] {
    min-width: 235px;
    gap: 11px;
    padding: 12px 14px;
}

.action-icon[b-gpvsle509j] {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: .92rem;
}

.secondary-action strong[b-gpvsle509j] {
    font-size: .9rem;
}

.secondary-action small[b-gpvsle509j] {
    font-size: .76rem;
}

.period-switcher[b-gpvsle509j] {
    gap: 5px;
    padding: 5px;
}

    .period-switcher a[b-gpvsle509j] {
        padding: 8px 11px;
        font-size: .78rem;
    }


/* ---- Feedback / loading ---- */

.feedback-banner[b-gpvsle509j] {
    gap: 12px;
    margin-bottom: 15px;
    padding: 14px 16px;
}

.feedback-symbol[b-gpvsle509j] {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: .9rem;
}

.feedback-banner strong[b-gpvsle509j] {
    font-size: .95rem;
}

.feedback-banner small[b-gpvsle509j],
.feedback-banner code[b-gpvsle509j] {
    font-size: .78rem;
}

.economics-loading[b-gpvsle509j] {
    min-height: 200px;
    gap: 11px;
    font-size: .95rem;
}


/* ---- Economics status ---- */

.economics-status-strip[b-gpvsle509j] {
    gap: 18px;
    margin-bottom: 17px;
    padding: 14px 16px;
}

.status-strip-icon[b-gpvsle509j] {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: .82rem;
}

.status-strip-copy strong[b-gpvsle509j] {
    font-size: .9rem;
}

.status-strip-copy p[b-gpvsle509j] {
    margin-top: 4px;
    font-size: .78rem;
    line-height: 1.75;
}

.economics-stage-badge[b-gpvsle509j] {
    padding: 7px 10px;
    font-size: .7rem;
}


/* ---- KPI cards ---- */

.economics-kpi-grid[b-gpvsle509j] {
    gap: 12px;
    margin-top: 20px;
}

.economics-kpi-card[b-gpvsle509j] {
    min-height: 135px;
    gap: 12px;
    padding: 16px;
}

.kpi-icon[b-gpvsle509j] {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: .85rem;
}

.kpi-copy > span[b-gpvsle509j] {
    font-size: .78rem;
}

.kpi-copy strong[b-gpvsle509j] {
    margin-top: 11px;
    font-size: 1.18rem;
}

.kpi-copy small[b-gpvsle509j] {
    margin-top: 7px;
    font-size: .7rem;
    line-height: 1.55;
}


/* ---- Generic section headings ---- */

.economics-section[b-gpvsle509j] {
    margin-top: 34px;
}

.section-heading[b-gpvsle509j] {
    gap: 24px;
    margin-bottom: 17px;
}

    .section-heading h2[b-gpvsle509j] {
        font-size: 1.36rem;
    }

    .section-heading p[b-gpvsle509j] {
        margin-top: 8px;
        font-size: .86rem;
        line-height: 1.8;
    }

.section-summary[b-gpvsle509j] {
    gap: 8px;
}

    .section-summary > span[b-gpvsle509j] {
        min-width: 96px;
        gap: 3px;
        padding: 9px 11px;
    }

    .section-summary strong[b-gpvsle509j] {
        font-size: .9rem;
    }

    .section-summary small[b-gpvsle509j] {
        font-size: .66rem;
    }


/* ---- Empty states ---- */

.empty-state[b-gpvsle509j] {
    min-height: 150px;
    padding: 22px;
}

.empty-state-icon[b-gpvsle509j] {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    font-size: 1rem;
}

.empty-state strong[b-gpvsle509j] {
    font-size: .95rem;
}

.empty-state p[b-gpvsle509j] {
    margin-top: 6px;
    font-size: .78rem;
    line-height: 1.7;
}

.mini-empty[b-gpvsle509j] {
    min-height: 110px;
    padding: 17px;
    font-size: .8rem;
}


/* ---- Job economics table ---- */

.job-table-head[b-gpvsle509j] {
    min-width: 1120px;
    padding: 11px 16px;
    font-size: .72rem;
}

.job-economics-list[b-gpvsle509j] {
    min-width: 1120px;
}

.job-economics-item > summary[b-gpvsle509j] {
    padding: 15px 40px 15px 16px;
}

.ai-economics[dir="rtl"] .job-economics-item > summary[b-gpvsle509j] {
    padding: 15px 16px 15px 40px;
}

.details-chevron[b-gpvsle509j] {
    font-size: .95rem;
}

.job-identity[b-gpvsle509j] {
    gap: 11px;
}

.job-type-icon[b-gpvsle509j] {
    width: 46px;
    height: 40px;
    flex-basis: 46px;
    font-size: .65rem;
}

.job-identity-copy[b-gpvsle509j] {
    gap: 3px;
}

    .job-identity-copy > strong[b-gpvsle509j] {
        font-size: .88rem;
    }

    .job-identity-copy > small[b-gpvsle509j],
    .job-user[b-gpvsle509j] {
        font-size: .68rem;
    }

.quality-badge[b-gpvsle509j],
.input-label[b-gpvsle509j],
.ocr-badge[b-gpvsle509j],
.cost-origin[b-gpvsle509j],
.pending-badge[b-gpvsle509j] {
    padding: 5px 8px;
    font-size: .66rem;
}

.job-ai-usage[b-gpvsle509j] {
    gap: 8px;
}

    .job-ai-usage > strong[b-gpvsle509j],
    .job-ai-usage > span[b-gpvsle509j] {
        font-size: .8rem;
    }

    .job-ai-usage small[b-gpvsle509j] {
        font-size: .58rem;
    }

.job-cost[b-gpvsle509j],
.job-credits[b-gpvsle509j],
.job-revenue[b-gpvsle509j] {
    gap: 4px;
}

    .job-cost > strong[b-gpvsle509j],
    .job-credits > strong[b-gpvsle509j],
    .job-revenue > strong[b-gpvsle509j] {
        font-size: .88rem;
    }

    .job-cost .saving[b-gpvsle509j],
    .job-credits > span[b-gpvsle509j],
    .ledger-warning[b-gpvsle509j] {
        font-size: .64rem;
    }

.profit-value[b-gpvsle509j] {
    font-size: .7rem;
}


/* ---- Job detail cards ---- */

.job-details[b-gpvsle509j] {
    gap: 12px;
    padding: 15px 16px 17px;
}

.job-detail-block[b-gpvsle509j] {
    padding: 15px;
}

    .job-detail-block h3[b-gpvsle509j] {
        margin-bottom: 12px;
        font-size: .95rem;
    }

.detail-kicker[b-gpvsle509j] {
    font-size: .66rem;
}

.detail-metric-grid[b-gpvsle509j] {
    gap: 8px;
}

    .detail-metric-grid > div[b-gpvsle509j] {
        gap: 4px;
        padding: 9px 10px;
    }

    .detail-metric-grid span[b-gpvsle509j],
    .money-lines span[b-gpvsle509j],
    .billing-ledger-row span[b-gpvsle509j] {
        font-size: .68rem;
    }

    .detail-metric-grid strong[b-gpvsle509j] {
        font-size: .82rem;
    }

.money-lines[b-gpvsle509j] {
    gap: 9px;
}

    .money-lines > div[b-gpvsle509j],
    .billing-ledger-row[b-gpvsle509j] {
        padding: 9px 0;
    }

        .money-lines strong[b-gpvsle509j],
        .billing-ledger-row strong[b-gpvsle509j] {
            font-size: .82rem;
        }

.money-total[b-gpvsle509j] {
    padding: 10px !important;
}

.cost-policy-note[b-gpvsle509j] {
    margin-top: 11px;
    padding: 10px;
    font-size: .68rem;
    line-height: 1.7;
}

.ledger-alert[b-gpvsle509j],
.revenue-pending-card[b-gpvsle509j] {
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
}

    .ledger-alert > span[b-gpvsle509j],
    .revenue-pending-icon[b-gpvsle509j] {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: .75rem;
    }

    .ledger-alert p[b-gpvsle509j],
    .revenue-pending-card p[b-gpvsle509j] {
        font-size: .68rem;
        line-height: 1.7;
    }

    .revenue-pending-card strong[b-gpvsle509j] {
        font-size: .8rem;
    }

.revenue-ready[b-gpvsle509j] {
    gap: 8px;
    margin-top: 11px;
}

    .revenue-ready > div[b-gpvsle509j] {
        gap: 4px;
        padding: 9px;
    }

    .revenue-ready span[b-gpvsle509j] {
        font-size: .64rem;
    }

    .revenue-ready strong[b-gpvsle509j] {
        font-size: .82rem;
    }


/* ---- Provider health / usage ---- */

.provider-health[b-gpvsle509j] {
    gap: 10px;
    padding: 9px 11px;
}

.health-dot[b-gpvsle509j] {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
}

.provider-health strong[b-gpvsle509j] {
    font-size: .82rem;
}

.provider-health small[b-gpvsle509j] {
    font-size: .64rem;
}

.provider-metrics-grid[b-gpvsle509j] {
    gap: 11px;
    margin-bottom: 12px;
}

    .provider-metrics-grid article[b-gpvsle509j] {
        gap: 6px;
        padding: 14px;
    }

    .provider-metrics-grid span[b-gpvsle509j] {
        font-size: .72rem;
    }

    .provider-metrics-grid strong[b-gpvsle509j] {
        font-size: 1rem;
    }

    .provider-metrics-grid small[b-gpvsle509j] {
        font-size: .66rem;
    }

.provider-grid[b-gpvsle509j] {
    gap: 12px;
}

.panel-heading[b-gpvsle509j] {
    gap: 12px;
    padding: 15px 16px;
}

    .panel-heading h3[b-gpvsle509j] {
        font-size: 1rem;
    }

.panel-kicker[b-gpvsle509j] {
    font-size: .66rem;
}

.error-count-badge[b-gpvsle509j] {
    padding: 5px 8px;
    font-size: .7rem;
}

.model-usage-row[b-gpvsle509j] {
    gap: 11px;
    padding: 13px 15px;
}

.model-avatar[b-gpvsle509j] {
    width: 38px;
    height: 38px;
    font-size: .68rem;
}

.model-usage-name strong[b-gpvsle509j] {
    font-size: .82rem;
}

.model-usage-name small[b-gpvsle509j],
.model-token-summary small[b-gpvsle509j],
.model-cost small[b-gpvsle509j],
.model-latency small[b-gpvsle509j] {
    font-size: .62rem;
}

.model-token-summary strong[b-gpvsle509j],
.model-cost strong[b-gpvsle509j],
.model-latency strong[b-gpvsle509j] {
    font-size: .74rem;
}

.error-row[b-gpvsle509j] {
    gap: 7px 11px;
    padding: 13px 15px;
}

.error-code[b-gpvsle509j] {
    font-size: .72rem;
}

.error-occurrences strong[b-gpvsle509j] {
    font-size: .82rem;
}

.error-occurrences small[b-gpvsle509j],
.error-date[b-gpvsle509j] {
    font-size: .62rem;
}

.healthy-empty[b-gpvsle509j] {
    min-height: 130px;
    gap: 10px;
    padding: 16px;
}

    .healthy-empty > span[b-gpvsle509j] {
        width: 37px;
        height: 37px;
        font-size: .85rem;
    }

    .healthy-empty strong[b-gpvsle509j] {
        font-size: .82rem;
    }

    .healthy-empty small[b-gpvsle509j] {
        font-size: .66rem;
    }


/* ---- Transport settings ---- */

.transport-layout[b-gpvsle509j] {
    gap: 12px;
}

.transport-form[b-gpvsle509j] {
    gap: 11px;
    padding: 16px;
}

    .transport-form label[b-gpvsle509j] {
        gap: 6px;
    }

        .transport-form label > span[b-gpvsle509j] {
            font-size: .78rem;
        }

        .transport-form label > small[b-gpvsle509j] {
            font-size: .66rem;
        }

    .transport-form input[b-gpvsle509j],
    .transport-form select[b-gpvsle509j] {
        min-height: 44px;
        padding: 0 12px;
        font-size: .88rem;
    }

.transport-form-footer[b-gpvsle509j] {
    gap: 14px;
    padding-top: 7px;
}

.transport-security-note[b-gpvsle509j] {
    font-size: .68rem;
    line-height: 1.6;
}

.primary-button[b-gpvsle509j] {
    min-height: 46px;
    padding: 0 16px;
    font-size: .86rem;
}

.economics-roadmap[b-gpvsle509j] {
    padding: 16px;
}

    .economics-roadmap h3[b-gpvsle509j] {
        margin-bottom: 13px;
        font-size: 1rem;
    }

.roadmap-item[b-gpvsle509j] {
    gap: 10px;
    padding: 11px 0;
}

    .roadmap-item > span[b-gpvsle509j] {
        width: 31px;
        height: 31px;
        font-size: .7rem;
    }

    .roadmap-item > div[b-gpvsle509j] {
        gap: 3px;
    }

    .roadmap-item strong[b-gpvsle509j] {
        font-size: .8rem;
    }

    .roadmap-item small[b-gpvsle509j] {
        font-size: .64rem;
        line-height: 1.5;
    }

    .roadmap-item b[b-gpvsle509j] {
        font-size: .82rem;
    }


/* ---- Historical reconstruction ---- */

.reconstruction-panel[b-gpvsle509j] {
    margin-bottom: 22px;
}

.reconstruction-panel-heading[b-gpvsle509j] {
    gap: 21px;
    padding: 18px 19px;
}

.reconstruction-title[b-gpvsle509j] {
    gap: 13px;
}

.reconstruction-icon[b-gpvsle509j] {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    font-size: .72rem;
}

.reconstruction-title h2[b-gpvsle509j] {
    font-size: 1.18rem;
}

.reconstruction-title p[b-gpvsle509j] {
    margin-top: 7px;
    font-size: .78rem;
    line-height: 1.8;
}

.reconstruction-status[b-gpvsle509j] {
    padding: 7px 10px;
    font-size: .68rem;
}

.reconstruction-loading[b-gpvsle509j] {
    min-height: 105px;
    gap: 10px;
    font-size: .8rem;
}

.reconstruction-complete[b-gpvsle509j] {
    gap: 12px;
    margin: 16px;
    padding: 15px;
}

    .reconstruction-complete > span[b-gpvsle509j],
    .reconstruction-blocked > span[b-gpvsle509j] {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        font-size: .86rem;
    }

    .reconstruction-complete strong[b-gpvsle509j],
    .reconstruction-blocked strong[b-gpvsle509j] {
        font-size: .86rem;
    }

    .reconstruction-complete p[b-gpvsle509j],
    .reconstruction-blocked p[b-gpvsle509j] {
        margin-top: 5px;
        font-size: .7rem;
        line-height: 1.7;
    }

.reconstruction-metrics[b-gpvsle509j] {
    gap: 10px;
    padding: 16px 16px 0;
}

    .reconstruction-metrics article[b-gpvsle509j] {
        gap: 6px;
        padding: 12px;
    }

    .reconstruction-metrics span[b-gpvsle509j] {
        font-size: .68rem;
    }

    .reconstruction-metrics strong[b-gpvsle509j] {
        font-size: .92rem;
    }

.reconstruction-blocked[b-gpvsle509j] {
    gap: 11px;
    margin: 12px 16px 0;
    padding: 13px;
}

    .reconstruction-blocked code[b-gpvsle509j] {
        margin-top: 6px;
        font-size: .66rem;
    }

.reconstruction-warnings[b-gpvsle509j] {
    margin: 12px 16px 0;
}

    .reconstruction-warnings > summary[b-gpvsle509j] {
        padding: 11px 12px;
        font-size: .74rem;
    }

        .reconstruction-warnings > summary strong[b-gpvsle509j] {
            min-width: 29px;
            font-size: .66rem;
        }

    .reconstruction-warnings > div[b-gpvsle509j] {
        max-height: 280px;
        padding: 0 12px 11px;
    }

    .reconstruction-warnings p[b-gpvsle509j] {
        padding: 7px 0;
        font-size: .64rem;
        line-height: 1.65;
    }

    .reconstruction-warnings small[b-gpvsle509j] {
        font-size: .64rem;
    }

.reconstruction-actions[b-gpvsle509j] {
    gap: 14px;
    padding: 16px;
}

.reconstruction-preview-button[b-gpvsle509j],
.reconstruction-execute-button[b-gpvsle509j] {
    min-height: 44px;
    padding: 0 14px;
    font-size: .76rem;
}

.reconstruction-execute-form[b-gpvsle509j] {
    gap: 10px;
}

    .reconstruction-execute-form label[b-gpvsle509j] {
        gap: 6px;
    }

        .reconstruction-execute-form label > span[b-gpvsle509j] {
            font-size: .7rem;
        }

    .reconstruction-execute-form input[b-gpvsle509j] {
        min-height: 44px;
        padding: 0 12px;
        font-size: .76rem;
    }


/* ---- Revenue / profitability ---- */

.revenue-status-badge[b-gpvsle509j] {
    padding: 5px 8px;
    font-size: .64rem;
}

.revenue-cell-note[b-gpvsle509j] {
    max-width: 180px;
    font-size: .6rem;
    line-height: 1.5;
}

.revenue-allocation-metrics[b-gpvsle509j] {
    gap: 8px;
    margin-top: 11px;
}

    .revenue-allocation-metrics > div[b-gpvsle509j] {
        gap: 4px;
        padding: 9px;
    }

    .revenue-allocation-metrics span[b-gpvsle509j] {
        font-size: .64rem;
    }

    .revenue-allocation-metrics strong[b-gpvsle509j] {
        font-size: .78rem;
    }

.revenue-state-card[b-gpvsle509j] {
    gap: 10px;
    margin-top: 10px;
    padding: 11px;
}

.revenue-state-icon[b-gpvsle509j] {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: .74rem;
}

.revenue-state-card strong[b-gpvsle509j] {
    font-size: .78rem;
}

.revenue-state-card p[b-gpvsle509j] {
    margin-top: 5px;
    font-size: .66rem;
    line-height: 1.7;
}

.known-revenue-strip[b-gpvsle509j] {
    gap: 10px;
    margin-top: 10px;
    padding: 10px 11px;
}

    .known-revenue-strip span[b-gpvsle509j] {
        font-size: .66rem;
    }

    .known-revenue-strip strong[b-gpvsle509j] {
        font-size: .8rem;
    }


/* ============================================================
   READABILITY RESPONSIVE TUNING
   ============================================================ */

@media (max-width: 1280px) {
    .economics-kpi-grid-financial[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    .job-details[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .provider-grid[b-gpvsle509j],
    .transport-layout[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .ai-economics[b-gpvsle509j] {
        padding: 25px 18px 50px;
    }

    .economics-header h1[b-gpvsle509j] {
        font-size: 1.85rem;
    }

    .economics-header p[b-gpvsle509j] {
        font-size: .94rem;
    }

    .economics-kpi-grid[b-gpvsle509j],
    .provider-metrics-grid[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-heading h2[b-gpvsle509j] {
        font-size: 1.2rem;
    }

    .section-heading p[b-gpvsle509j] {
        font-size: .82rem;
    }

    .transport-form input[b-gpvsle509j],
    .transport-form select[b-gpvsle509j],
    .reconstruction-execute-form input[b-gpvsle509j] {
        font-size: .9rem;
    }
}

@media (max-width: 520px) {
    .ai-economics[b-gpvsle509j] {
        padding: 21px 13px 42px;
    }

    .economics-kpi-grid[b-gpvsle509j],
    .economics-kpi-grid-financial[b-gpvsle509j],
    .provider-metrics-grid[b-gpvsle509j],
    .revenue-allocation-metrics[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .section-summary[b-gpvsle509j] {
        flex-wrap: wrap;
    }

        .section-summary > span[b-gpvsle509j] {
            min-width: calc(50% - 4px);
        }
}

/* ============================================================
   JOB-LEVEL SHADOW PRICING COMPARISON
   ============================================================ */

.economics-state-summary .summary-shadow[b-gpvsle509j] {
    border-color: rgba(116, 88, 181, .15);
    background: var(--eco-violet-soft);
}

    .economics-state-summary .summary-shadow strong[b-gpvsle509j] {
        color: var(--eco-violet);
    }

.shadow-inline-badge[b-gpvsle509j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
}

    .shadow-inline-badge.up[b-gpvsle509j] {
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
    }

    .shadow-inline-badge.down[b-gpvsle509j] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

/*
 * Four detail cards now exist: Provider, Cost, Billing and Shadow Pricing.
 * A 2�2 desktop layout keeps all four readable instead of squeezing them into
 * four narrow columns.
 */
.job-details[b-gpvsle509j] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shadow-pricing-breakdown[b-gpvsle509j] {
    border-color: rgba(116, 88, 181, .17);
    background: linear-gradient( 145deg, rgba(116, 88, 181, .035), var(--eco-panel) 42%);
}

.shadow-job-heading[b-gpvsle509j] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
}

    .shadow-job-heading > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 2px;
        margin-inline-end: auto;
    }

        .shadow-job-heading > div > span[b-gpvsle509j] {
            color: var(--eco-muted);
            font-size: .66rem;
        }

        .shadow-job-heading > div > strong[b-gpvsle509j] {
            color: var(--eco-text);
            font-size: .9rem;
        }

.shadow-mode-badge[b-gpvsle509j],
.shadow-guardrail-badge[b-gpvsle509j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 850;
    white-space: nowrap;
}

.shadow-mode-badge[b-gpvsle509j] {
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
}

.shadow-guardrail-badge[b-gpvsle509j] {
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.shadow-credit-comparison[b-gpvsle509j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 11px;
    padding: 11px;
    border: 1px solid rgba(116, 88, 181, .13);
    border-radius: 11px;
    background: rgba(116, 88, 181, .045);
}

    .shadow-credit-comparison > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

        .shadow-credit-comparison > div > span[b-gpvsle509j] {
            color: var(--eco-muted);
            font-size: .65rem;
        }

        .shadow-credit-comparison > div > strong[b-gpvsle509j] {
            color: var(--eco-text);
            font-size: 1rem;
        }

.shadow-comparison-arrow[b-gpvsle509j] {
    color: var(--eco-muted);
    font-size: .88rem;
}

.shadow-delta[b-gpvsle509j] {
    min-width: 48px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
}

    .shadow-delta.up[b-gpvsle509j] {
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
    }

    .shadow-delta.down[b-gpvsle509j] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

.shadow-pricing-metrics[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

    .shadow-pricing-metrics > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 9px;
        border: 1px solid var(--eco-border);
        border-radius: 9px;
        background: var(--eco-panel-soft);
    }

    .shadow-pricing-metrics span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .62rem;
        line-height: 1.45;
    }

    .shadow-pricing-metrics strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.shadow-multiplier-strip[b-gpvsle509j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

    .shadow-multiplier-strip > span[b-gpvsle509j] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 7px;
        border: 1px solid var(--eco-border);
        border-radius: 999px;
        color: var(--eco-muted);
        background: var(--eco-panel-soft);
        font-size: .61rem;
    }

    .shadow-multiplier-strip strong[b-gpvsle509j] {
        color: var(--eco-secondary);
        font-size: .66rem;
    }

.shadow-snapshot-note[b-gpvsle509j] {
    margin: 10px 0 0;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--eco-muted);
    background: var(--eco-panel-muted);
    font-size: .65rem;
    line-height: 1.65;
}

.shadow-snapshot-warning[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(168, 118, 28, .15);
    border-radius: 9px;
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

    .shadow-snapshot-warning > span[b-gpvsle509j] {
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: rgba(168, 118, 28, .09);
        font-size: .68rem;
        font-weight: 900;
    }

    .shadow-snapshot-warning p[b-gpvsle509j] {
        margin: 0;
        font-size: .65rem;
        line-height: 1.65;
    }

.shadow-missing-state[b-gpvsle509j] {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 16px;
    border: 1px dashed var(--eco-border-strong);
    border-radius: 11px;
    color: var(--eco-muted);
    background: var(--eco-panel-soft);
}

    .shadow-missing-state > span[b-gpvsle509j] {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
        font-size: .85rem;
    }

    .shadow-missing-state > div[b-gpvsle509j] {
        min-width: 0;
    }

    .shadow-missing-state strong[b-gpvsle509j] {
        display: block;
        color: var(--eco-secondary);
        font-size: .8rem;
    }

    .shadow-missing-state p[b-gpvsle509j] {
        margin: 5px 0 0;
        font-size: .66rem;
        line-height: 1.65;
    }

@media (max-width: 1180px) {
    .shadow-pricing-metrics[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    .job-details[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .shadow-credit-comparison[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }

    .shadow-comparison-arrow[b-gpvsle509j] {
        transform: rotate(90deg);
        justify-self: center;
    }

    .shadow-delta[b-gpvsle509j] {
        justify-self: start;
    }

    .shadow-pricing-metrics[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   JOB INTERNAL COST SNAPSHOT
   Phase 4.4B-3C
   ============================================================ */

.job-cost-heading[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}


    .job-cost-heading > div[b-gpvsle509j] {
        min-width: 0;
    }


    .job-cost-heading h3[b-gpvsle509j] {
        margin-bottom: 3px !important;
    }


    .job-cost-heading small[b-gpvsle509j] {
        display: block;
        color: var(--eco-muted);
        font-size: .64rem;
        line-height: 1.55;
    }


.job-cost-policy-badge[b-gpvsle509j] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 850;
    white-space: nowrap;
}


    .job-cost-policy-badge.active[b-gpvsle509j] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }


    .job-cost-policy-badge.legacy[b-gpvsle509j] {
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }


    .job-cost-policy-badge.missing[b-gpvsle509j] {
        color: var(--eco-secondary);
        background: var(--eco-panel-muted);
    }


/* ============================================================
   INTERNAL COST COMPONENTS
   ============================================================ */

.internal-cost-section[b-gpvsle509j] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--eco-border);
}


.internal-cost-heading[b-gpvsle509j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}


    .internal-cost-heading > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 3px;
    }


        .internal-cost-heading > div > strong[b-gpvsle509j] {
            color: var(--eco-text);
            font-size: .79rem;
        }


        .internal-cost-heading > div > small[b-gpvsle509j] {
            color: var(--eco-muted);
            font-size: .62rem;
        }


.internal-cost-total[b-gpvsle509j] {
    flex: 0 0 auto;
    color: var(--eco-accent);
    font-size: .85rem;
    font-weight: 900;
}


.internal-cost-grid[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}


    .internal-cost-grid > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 9px;
        border: 1px solid var(--eco-border);
        border-radius: 9px;
        background: var(--eco-panel-soft);
    }


    .internal-cost-grid span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .62rem;
    }


    .internal-cost-grid strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .76rem;
        font-weight: 820;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* ============================================================
   COST ENGINE MEASUREMENTS
   ============================================================ */

.cost-measurements[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}


    .cost-measurements > div[b-gpvsle509j] {
        min-width: 0;
        display: grid;
        gap: 3px;
        padding: 8px;
        border-radius: 8px;
        background: var(--eco-panel-muted);
    }


    .cost-measurements span[b-gpvsle509j] {
        color: var(--eco-muted);
        font-size: .58rem;
    }


    .cost-measurements strong[b-gpvsle509j] {
        overflow: hidden;
        color: var(--eco-secondary);
        font-size: .7rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* ============================================================
   COST SNAPSHOT STATES
   ============================================================ */

.cost-policy-note.verified[b-gpvsle509j] {
    border: 1px solid rgba(35, 130, 103, .12);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}


.cost-snapshot-warning[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 11px;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
}


    .cost-snapshot-warning > span[b-gpvsle509j] {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        font-size: .72rem;
        font-weight: 900;
    }


    .cost-snapshot-warning > div[b-gpvsle509j] {
        min-width: 0;
    }


    .cost-snapshot-warning strong[b-gpvsle509j] {
        display: block;
        font-size: .74rem;
    }


    .cost-snapshot-warning p[b-gpvsle509j] {
        margin: 4px 0 0;
        font-size: .64rem;
        line-height: 1.65;
    }


    .cost-snapshot-warning.legacy[b-gpvsle509j] {
        border-color: rgba(168, 118, 28, .15);
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }


        .cost-snapshot-warning.legacy > span[b-gpvsle509j] {
            background: rgba(168, 118, 28, .08);
        }


    .cost-snapshot-warning.missing[b-gpvsle509j] {
        border-color: var(--eco-border);
        color: var(--eco-secondary);
        background: var(--eco-panel-soft);
    }


        .cost-snapshot-warning.missing > span[b-gpvsle509j] {
            background: var(--eco-panel-muted);
        }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {

    .job-cost-heading[b-gpvsle509j] {
        align-items: stretch;
        flex-direction: column;
    }


    .job-cost-policy-badge[b-gpvsle509j] {
        align-self: flex-start;
    }


    .cost-measurements[b-gpvsle509j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 520px) {

    .internal-cost-grid[b-gpvsle509j],
    .cost-measurements[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }


    .internal-cost-heading[b-gpvsle509j] {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   ADMIN ECONOMICS COMMERCIAL-FIRST FIX 2026-08-31
   ============================================================ */

.commercial-first-kpis .commercial-value .kpi-icon[b-gpvsle509j],
.commercial-first-kpis .commercial-profit .kpi-icon[b-gpvsle509j],
.commercial-first-kpis .commercial-margin .kpi-icon[b-gpvsle509j],
.commercial-first-kpis .unified-jobs .kpi-icon[b-gpvsle509j] {
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.commercial-first-kpis .commercial-provider-cost .kpi-icon[b-gpvsle509j] {
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
}

.economics-state-summary .summary-commercial[b-gpvsle509j] {
    border-color: rgba(35, 130, 103, .15);
    background: var(--eco-green-soft);
}

.economics-state-summary .summary-commercial strong[b-gpvsle509j] {
    color: var(--eco-green);
}

.revenue-status-badge.commercial[b-gpvsle509j] {
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.commercial-revenue > strong[b-gpvsle509j] {
    color: var(--eco-text);
}

.unified-commercial-breakdown[b-gpvsle509j] {
    border-color: rgba(35, 130, 103, .18);
    background: linear-gradient(145deg, rgba(35, 130, 103, .035), var(--eco-panel) 45%);
}

.unified-commercial-grid[b-gpvsle509j],
.unified-cash-grid[b-gpvsle509j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.unified-commercial-grid > div[b-gpvsle509j],
.unified-cash-grid > div[b-gpvsle509j] {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--eco-border);
    border-radius: 9px;
    background: var(--eco-panel-soft);
}

.unified-commercial-grid span[b-gpvsle509j],
.unified-cash-grid span[b-gpvsle509j] {
    color: var(--eco-muted);
    font-size: .66rem;
}

.unified-commercial-grid strong[b-gpvsle509j],
.unified-cash-grid strong[b-gpvsle509j] {
    overflow: hidden;
    color: var(--eco-text);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unified-commercial-note[b-gpvsle509j],
.unified-fifo-note[b-gpvsle509j] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--eco-border);
    border-radius: 10px;
}

.unified-commercial-note[b-gpvsle509j] {
    border-color: rgba(35, 130, 103, .14);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.unified-commercial-note > span[b-gpvsle509j],
.unified-fifo-note > span[b-gpvsle509j] {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 900;
}

.unified-commercial-note > span[b-gpvsle509j] {
    background: rgba(35, 130, 103, .08);
}

.unified-commercial-note p[b-gpvsle509j],
.unified-fifo-note p[b-gpvsle509j] {
    margin: 0;
    font-size: .66rem;
    line-height: 1.7;
}

.unified-fifo-accounting[b-gpvsle509j] {
    border-color: var(--eco-border-strong);
    background: linear-gradient(145deg, rgba(52, 123, 183, .025), var(--eco-panel) 48%);
}

.unified-fifo-metrics strong.value-warning[b-gpvsle509j],
.unified-fifo-metrics strong[b-gpvsle509j] {
    color: var(--eco-text) !important;
}

.unified-cash-grid[b-gpvsle509j] {
    margin-top: 9px;
}

.unified-fifo-note.diagnostic[b-gpvsle509j] {
    border-color: rgba(52, 123, 183, .15);
    color: var(--eco-secondary);
    background: var(--eco-blue-soft);
}

.unified-fifo-note.diagnostic > span[b-gpvsle509j] {
    color: var(--eco-blue);
    background: rgba(52, 123, 183, .08);
}

.unified-fifo-note.complete[b-gpvsle509j] {
    border-color: rgba(35, 130, 103, .14);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.unified-fifo-note.complete > span[b-gpvsle509j] {
    background: rgba(35, 130, 103, .08);
}

@media (max-width: 620px) {
    .unified-commercial-grid[b-gpvsle509j],
    .unified-cash-grid[b-gpvsle509j] {
        grid-template-columns: 1fr;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminTranslationCostPolicyPanel.razor.rz.scp.css */
.cost-policy-panel[b-9f21grxwdf] {
    margin-top: 32px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 20px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.cost-policy-heading[b-9f21grxwdf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 22px;
    border-bottom: 1px solid var(--eco-border);
    background: linear-gradient(115deg, rgba(35,130,103,.055), rgba(35,130,103,.008));
}

.cost-policy-title[b-9f21grxwdf] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cost-policy-icon[b-9f21grxwdf] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
    font-size: .95rem;
    font-weight: 900;
}

.cost-policy-title > div[b-9f21grxwdf] {
    min-width: 0;
}

.cost-policy-eyebrow[b-9f21grxwdf] {
    display: block;
    margin-bottom: 6px;
    color: var(--eco-green);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.cost-policy-panel[dir="rtl"] .cost-policy-eyebrow[b-9f21grxwdf] {
    letter-spacing: 0;
}

.cost-policy-title h2[b-9f21grxwdf],
.cost-history-heading h3[b-9f21grxwdf] {
    margin: 0;
    color: var(--eco-text);
}

.cost-policy-title h2[b-9f21grxwdf] {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.3;
}

.cost-policy-title p[b-9f21grxwdf] {
    max-width: 980px;
    margin: 8px 0 0;
    color: var(--eco-muted);
    font-size: 1rem;
    line-height: 1.9;
}

.cost-policy-heading-status[b-9f21grxwdf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-shadow-badge[b-9f21grxwdf],
.cost-version-badge[b-9f21grxwdf],
.cost-version-active[b-9f21grxwdf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
}

.cost-shadow-badge[b-9f21grxwdf] {
    padding: 8px 12px;
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
    font-size: .78rem;
}

.cost-version-badge[b-9f21grxwdf] {
    padding: 8px 10px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
    font-size: .78rem;
}

.cost-feedback[b-9f21grxwdf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 18px 0;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 14px;
}

    .cost-feedback > span[b-9f21grxwdf] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-weight: 900;
    }

    .cost-feedback > div[b-9f21grxwdf] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .cost-feedback strong[b-9f21grxwdf] {
        font-size: 1rem;
        line-height: 1.6;
    }

    .cost-feedback small[b-9f21grxwdf],
    .cost-feedback code[b-9f21grxwdf] {
        color: inherit;
        font-size: .85rem;
    }

    .cost-feedback.success[b-9f21grxwdf] {
        border-color: rgba(35,130,103,.16);
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

    .cost-feedback.danger[b-9f21grxwdf] {
        border-color: rgba(198,79,91,.16);
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }

.cost-loading[b-9f21grxwdf] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--eco-muted);
}

.cost-spinner[b-9f21grxwdf] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(35,130,103,.15);
    border-top-color: var(--eco-green);
    border-radius: 50%;
    animation: cost-spin-b-9f21grxwdf .8s linear infinite;
}

@keyframes cost-spin-b-9f21grxwdf {
    to {
        transform: rotate(360deg);
    }
}

.cost-blocked[b-9f21grxwdf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px;
    padding: 16px;
    border: 1px solid rgba(198,79,91,.16);
    border-radius: 14px;
    color: var(--eco-red);
    background: var(--eco-red-soft);
}

    .cost-blocked > span[b-9f21grxwdf] {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(198,79,91,.08);
        font-weight: 900;
    }

    .cost-blocked strong[b-9f21grxwdf] {
        display: block;
    }

    .cost-blocked p[b-9f21grxwdf] {
        margin: 6px 0 0;
        font-size: .88rem;
        line-height: 1.75;
    }

.cost-active-overview[b-9f21grxwdf] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    padding: 18px 18px 0;
}

    .cost-active-overview article[b-9f21grxwdf] {
        min-width: 0;
        display: grid;
        gap: 6px;
        padding: 14px;
        border: 1px solid var(--eco-border);
        border-radius: 12px;
        background: var(--eco-panel-soft);
    }

    .cost-active-overview span[b-9f21grxwdf],
    .cost-active-overview small[b-9f21grxwdf] {
        color: var(--eco-muted);
    }

    .cost-active-overview span[b-9f21grxwdf] {
        font-size: .82rem;
        font-weight: 700;
    }

    .cost-active-overview strong[b-9f21grxwdf] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: 1.08rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cost-active-overview small[b-9f21grxwdf] {
        font-size: .78rem;
    }

.cost-policy-layout[b-9f21grxwdf] {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(340px,.55fr);
    gap: 14px;
    padding: 18px;
}

.cost-policy-form[b-9f21grxwdf],
.cost-history[b-9f21grxwdf] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 16px;
    background: var(--eco-panel);
}

.cost-form-section[b-9f21grxwdf] {
    padding: 18px;
    border-bottom: 1px solid var(--eco-border);
}

    .cost-form-section:last-child[b-9f21grxwdf] {
        border-bottom: 0;
    }

.cost-section-heading[b-9f21grxwdf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

    .cost-section-heading > span[b-9f21grxwdf] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--eco-green);
        background: var(--eco-green-soft);
        font-size: .82rem;
        font-weight: 850;
    }

    .cost-section-heading > div[b-9f21grxwdf] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .cost-section-heading strong[b-9f21grxwdf] {
        font-size: 1.08rem;
    }

    .cost-section-heading small[b-9f21grxwdf] {
        color: var(--eco-muted);
        font-size: .86rem;
        line-height: 1.75;
    }

.cost-fields[b-9f21grxwdf] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

    .cost-fields label[b-9f21grxwdf],
    .cost-audit-reason[b-9f21grxwdf] {
        min-width: 0;
        display: grid;
        gap: 6px;
    }

        .cost-fields label.wide[b-9f21grxwdf] {
            grid-column: 1 / -1;
        }

        .cost-fields label > span[b-9f21grxwdf],
        .cost-audit-reason > span[b-9f21grxwdf] {
            color: var(--eco-secondary);
            font-size: .92rem;
            font-weight: 800;
        }

        .cost-fields label > small[b-9f21grxwdf] {
            color: var(--eco-muted);
            font-size: .78rem;
            line-height: 1.65;
        }

        .cost-fields input[b-9f21grxwdf],
        .cost-audit-reason textarea[b-9f21grxwdf] {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--eco-border-strong);
            border-radius: 11px;
            outline: none;
            color: var(--eco-text);
            background: var(--eco-panel-soft);
            font: inherit;
            font-size: .98rem;
        }

    .cost-fields input[b-9f21grxwdf] {
        min-height: 46px;
        padding: 0 12px;
    }

.cost-audit-reason textarea[b-9f21grxwdf] {
    min-height: 110px;
    resize: vertical;
    padding: 12px;
    line-height: 1.8;
}

    .cost-fields input:focus[b-9f21grxwdf],
    .cost-audit-reason textarea:focus[b-9f21grxwdf] {
        border-color: rgba(35,130,103,.45);
        background: var(--eco-panel);
        box-shadow: 0 0 0 3px rgba(35,130,103,.07);
    }

.cost-safety-box[b-9f21grxwdf] {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
    background: var(--eco-panel-soft);
}

    .cost-safety-box > strong[b-9f21grxwdf] {
        margin-bottom: 3px;
        font-size: .92rem;
    }

    .cost-safety-box > div[b-9f21grxwdf] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

        .cost-safety-box > div > span[b-9f21grxwdf] {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            display: grid;
            place-items: center;
            border-radius: 7px;
            color: var(--eco-green);
            background: var(--eco-green-soft);
            font-size: .72rem;
            font-weight: 900;
        }

        .cost-safety-box > div.negative > span[b-9f21grxwdf] {
            color: var(--eco-muted);
            background: var(--eco-panel-muted);
        }

    .cost-safety-box p[b-9f21grxwdf] {
        margin: 1px 0 0;
        color: var(--eco-secondary);
        font-size: .80rem;
        line-height: 1.6;
    }

.cost-form-footer[b-9f21grxwdf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.cost-linked-epoch[b-9f21grxwdf] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cost-linked-epoch > span[b-9f21grxwdf] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
    }

    .cost-linked-epoch > div[b-9f21grxwdf] {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .cost-linked-epoch strong[b-9f21grxwdf] {
        font-size: .88rem;
    }

    .cost-linked-epoch small[b-9f21grxwdf] {
        overflow: hidden;
        color: var(--eco-muted);
        font-size: .76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.cost-save-button[b-9f21grxwdf] {
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--eco-green);
    border-radius: 11px;
    color: #fff;
    background: var(--eco-green);
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
}

    .cost-save-button:hover[b-9f21grxwdf] {
        filter: brightness(.94);
    }

.cost-history-heading[b-9f21grxwdf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--eco-border);
}

    .cost-history-heading h3[b-9f21grxwdf] {
        font-size: 1.14rem;
    }

    .cost-history-heading > span[b-9f21grxwdf] {
        min-width: 34px;
        padding: 6px 8px;
        border-radius: 999px;
        color: var(--eco-green);
        background: var(--eco-green-soft);
        font-size: .82rem;
        font-weight: 850;
        text-align: center;
    }

.cost-history-empty[b-9f21grxwdf] {
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--eco-muted);
    font-size: .88rem;
    text-align: center;
}

.cost-history-list[b-9f21grxwdf] {
    max-height: 720px;
    overflow: auto;
    display: grid;
}

.cost-version-card[b-9f21grxwdf] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--eco-border);
}

    .cost-version-card:last-child[b-9f21grxwdf] {
        border-bottom: 0;
    }

    .cost-version-card.active[b-9f21grxwdf] {
        background: linear-gradient(115deg, rgba(35,130,103,.045), transparent);
    }

.cost-version-top[b-9f21grxwdf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cost-version-number[b-9f21grxwdf] {
    font-size: 1rem;
    font-weight: 900;
}

.cost-version-active[b-9f21grxwdf] {
    padding: 4px 7px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
    font-size: .72rem;
}

.cost-version-card > strong[b-9f21grxwdf] {
    display: block;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: .94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cost-version-metrics[b-9f21grxwdf] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    margin-bottom: 8px;
}

    .cost-version-metrics > span[b-9f21grxwdf] {
        min-width: 0;
        display: grid;
        gap: 3px;
        padding: 8px;
        border-radius: 9px;
        background: var(--eco-panel-soft);
    }

    .cost-version-metrics small[b-9f21grxwdf] {
        color: var(--eco-muted);
        font-size: .70rem;
    }

    .cost-version-metrics b[b-9f21grxwdf] {
        overflow: hidden;
        color: var(--eco-secondary);
        font-size: .82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.cost-version-date[b-9f21grxwdf] {
    display: block;
    margin-top: 3px;
    color: var(--eco-muted);
    font-size: .76rem;
}

    .cost-version-date.retired[b-9f21grxwdf] {
        color: var(--eco-secondary);
    }

.cost-version-details[b-9f21grxwdf] {
    margin-top: 10px;
    border-top: 1px dashed var(--eco-border);
}

    .cost-version-details > summary[b-9f21grxwdf] {
        padding-top: 8px;
        color: var(--eco-green);
        font-size: .84rem;
        font-weight: 750;
        cursor: pointer;
    }

    .cost-version-details > div[b-9f21grxwdf] {
        display: grid;
        gap: 6px;
        margin-top: 8px;
    }

    .cost-version-details p[b-9f21grxwdf] {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        font-size: .80rem;
        line-height: 1.7;
    }

        .cost-version-details p span[b-9f21grxwdf] {
            color: var(--eco-muted);
        }

        .cost-version-details p strong[b-9f21grxwdf] {
            color: var(--eco-secondary);
            text-align: end;
        }

    .cost-version-details .cost-history-audit[b-9f21grxwdf] {
        align-items: flex-start;
        flex-direction: column;
    }

        .cost-version-details .cost-history-audit strong[b-9f21grxwdf] {
            color: var(--eco-muted);
            font-weight: 500;
            text-align: start;
        }

@media (max-width: 1100px) {
    .cost-policy-layout[b-9f21grxwdf] {
        grid-template-columns: 1fr;
    }

    .cost-history-list[b-9f21grxwdf] {
        max-height: 480px;
    }
}

@media (max-width: 820px) {
    .cost-policy-heading[b-9f21grxwdf],
    .cost-form-footer[b-9f21grxwdf] {
        align-items: stretch;
        flex-direction: column;
    }

    .cost-active-overview[b-9f21grxwdf] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .cost-save-button[b-9f21grxwdf] {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cost-active-overview[b-9f21grxwdf],
    .cost-fields[b-9f21grxwdf] {
        grid-template-columns: 1fr;
    }

    .cost-policy-title[b-9f21grxwdf] {
        flex-direction: column;
    }

        .cost-policy-title h2[b-9f21grxwdf] {
            font-size: 1.35rem;
        }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminTranslationPricingCalibrationPanel.razor.rz.scp.css */
/* ============================================================
   PRICING POLICY CALIBRATION
   Phase 4.4B-3B
   ============================================================ */

.pricing-calibration-panel[b-tm6n68tzyi] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}


/* ============================================================
   HEADER
   ============================================================ */

.pricing-calibration-heading[b-tm6n68tzyi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-bottom: 1px solid var(--eco-border);
    background: linear-gradient( 115deg, rgba(116, 88, 181, .055), transparent );
}


    .pricing-calibration-heading > div:first-child[b-tm6n68tzyi] {
        min-width: 0;
    }


.pricing-calibration-kicker[b-tm6n68tzyi] {
    display: block;
    margin-bottom: 5px;
    color: var(--eco-violet);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .06em;
}


.pricing-calibration-panel[dir="rtl"]
.pricing-calibration-kicker[b-tm6n68tzyi] {
    letter-spacing: 0;
}


.pricing-calibration-heading h2[b-tm6n68tzyi] {
    margin: 0;
    color: var(--eco-text);
    font-size: 1.45rem;
    font-weight: 850;
    line-height: 1.35;
}


.pricing-calibration-heading p[b-tm6n68tzyi] {
    max-width: 980px;
    margin: 7px 0 0;
    color: var(--eco-muted);
    font-size: .9rem;
    line-height: 1.8;
}


/* ============================================================
   POLICY CHIP
   ============================================================ */

.calibration-policy-chip[b-tm6n68tzyi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}


    .calibration-policy-chip span[b-tm6n68tzyi],
    .calibration-policy-chip strong[b-tm6n68tzyi],
    .target-margin-chip[b-tm6n68tzyi] {
        padding: 7px 9px;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 800;
        white-space: nowrap;
    }


    .calibration-policy-chip span[b-tm6n68tzyi] {
        color: var(--eco-violet);
        background: var(--eco-violet-soft);
    }


    .calibration-policy-chip strong[b-tm6n68tzyi] {
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
    }


/* ============================================================
   LOADING / EMPTY / FEEDBACK
   ============================================================ */

.calibration-loading[b-tm6n68tzyi],
.calibration-empty[b-tm6n68tzyi] {
    min-height: 110px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--eco-muted);
    font-size: .9rem;
    text-align: center;
}


.calibration-feedback[b-tm6n68tzyi] {
    display: grid;
    gap: 4px;
    margin: 16px;
    padding: 13px;
    border: 1px solid;
    border-radius: 11px;
}


    .calibration-feedback.danger[b-tm6n68tzyi] {
        border-color: rgba(198, 79, 91, .15);
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }


    .calibration-feedback strong[b-tm6n68tzyi] {
        font-size: .86rem;
    }


    .calibration-feedback small[b-tm6n68tzyi] {
        font-size: .75rem;
        line-height: 1.6;
    }


/* ============================================================
   READINESS
   ============================================================ */

.calibration-readiness[b-tm6n68tzyi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px;
    padding: 14px;
    border: 1px solid;
    border-radius: 12px;
}


    .calibration-readiness > div[b-tm6n68tzyi] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }


.readiness-label[b-tm6n68tzyi] {
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}


.calibration-readiness strong[b-tm6n68tzyi] {
    font-size: .88rem;
    line-height: 1.6;
}


.calibration-readiness.blocked[b-tm6n68tzyi] {
    border-color: rgba(198, 79, 91, .16);
    color: var(--eco-red);
    background: var(--eco-red-soft);
}


.calibration-readiness.partial[b-tm6n68tzyi] {
    border-color: rgba(168, 118, 28, .16);
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}


.calibration-readiness.review[b-tm6n68tzyi] {
    border-color: rgba(35, 130, 103, .16);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}


.calibration-readiness.neutral[b-tm6n68tzyi] {
    border-color: var(--eco-border);
    color: var(--eco-secondary);
    background: var(--eco-panel-soft);
}


.target-margin-chip[b-tm6n68tzyi] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
}


    .target-margin-chip b[b-tm6n68tzyi] {
        color: inherit;
        font-weight: 900;
    }


/* ============================================================
   DATA QUALITY WARNINGS
   ============================================================ */

.calibration-warning[b-tm6n68tzyi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 16px 10px;
    padding: 12px 13px;
    border: 1px solid rgba(168, 118, 28, .14);
    border-radius: 11px;
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}


    .calibration-warning.provider[b-tm6n68tzyi] {
        border-color: rgba(198, 79, 91, .12);
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }


    /*
 * A missing Cost Policy is not equivalent to actual zero internal cost.
 * Historical snapshots intentionally remain immutable.
 */
    .calibration-warning.cost-policy[b-tm6n68tzyi] {
        border-color: rgba(168, 118, 28, .16);
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }


    .calibration-warning > span[b-tm6n68tzyi] {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, .28);
        font-weight: 900;
    }


    .calibration-warning > div[b-tm6n68tzyi] {
        min-width: 0;
    }


    .calibration-warning strong[b-tm6n68tzyi] {
        display: block;
        font-size: .84rem;
    }


    .calibration-warning p[b-tm6n68tzyi] {
        margin: 4px 0 0;
        font-size: .74rem;
        line-height: 1.7;
    }


/* ============================================================
   PRIMARY CALIBRATION KPI
   ============================================================ */

.calibration-kpis[b-tm6n68tzyi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 6px 16px 16px;
}


    .calibration-kpis article[b-tm6n68tzyi],
    .calibration-economics article[b-tm6n68tzyi] {
        min-width: 0;
        display: grid;
        gap: 5px;
        padding: 13px;
        border: 1px solid var(--eco-border);
        border-radius: 11px;
        background: var(--eco-panel-soft);
    }


    .calibration-kpis span[b-tm6n68tzyi],
    .calibration-economics span[b-tm6n68tzyi] {
        color: var(--eco-muted);
        font-size: .74rem;
        line-height: 1.5;
    }


    .calibration-kpis strong[b-tm6n68tzyi],
    .calibration-economics strong[b-tm6n68tzyi] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: 1rem;
        font-weight: 850;
        line-height: 1.35;
        text-overflow: ellipsis;
    }


    .calibration-kpis small[b-tm6n68tzyi] {
        color: var(--eco-muted);
        font-size: .66rem;
        line-height: 1.5;
    }


.danger-value[b-tm6n68tzyi] {
    color: var(--eco-red) !important;
}


.positive-value[b-tm6n68tzyi] {
    color: var(--eco-green) !important;
}


/* ============================================================
   PRICE DIRECTION
   ============================================================ */

.calibration-direction[b-tm6n68tzyi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0 16px 10px;
}


    .calibration-direction article[b-tm6n68tzyi] {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 12px;
        border: 1px solid var(--eco-border);
        border-radius: 10px;
        background: var(--eco-panel);
    }


    .calibration-direction span[b-tm6n68tzyi] {
        color: var(--eco-muted);
        font-size: .74rem;
    }


    .calibration-direction strong[b-tm6n68tzyi] {
        font-size: .95rem;
        font-weight: 900;
    }


    .calibration-direction .higher strong[b-tm6n68tzyi] {
        color: var(--eco-amber);
    }


    .calibration-direction .equal strong[b-tm6n68tzyi] {
        color: var(--eco-secondary);
    }


    .calibration-direction .lower strong[b-tm6n68tzyi] {
        color: var(--eco-green);
    }


/* ============================================================
   PRICE CHANGE DISTRIBUTION
   ============================================================ */

.calibration-range[b-tm6n68tzyi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 0 16px 16px;
}


    .calibration-range > div[b-tm6n68tzyi] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border: 1px dashed var(--eco-border-strong);
        border-radius: 10px;
        background: var(--eco-panel);
    }


    .calibration-range span[b-tm6n68tzyi] {
        color: var(--eco-muted);
        font-size: .68rem;
    }


    .calibration-range strong[b-tm6n68tzyi] {
        color: var(--eco-text);
        font-size: .88rem;
        font-weight: 850;
    }


/* ============================================================
   ECONOMIC TOTALS
   ============================================================ */

/*
 * The previous version had five cards.
 *
 * Cost Policy visibility expands this section to:
 *
 * Provider
 * Internal
 * Platform
 * Base
 * Processing
 * Storage
 * OCR
 * Current Reference
 * Shadow Billable
 * Projected Profit
 * Portfolio Margin
 */
.calibration-economics[b-tm6n68tzyi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 0 16px 16px;
}


    .calibration-economics article[b-tm6n68tzyi] {
        transition: border-color .15s ease, background-color .15s ease;
    }


        /*
 * Total Platform Cost is the economic cost used by Pricing:
 *
 * Provider Cost
 * +
 * Internal Cost
 */
        .calibration-economics article.total-platform[b-tm6n68tzyi] {
            border-color: rgba(95, 112, 232, .18);
            background: var(--eco-accent-soft);
        }


            .calibration-economics
            article.total-platform span[b-tm6n68tzyi] {
                color: var(--eco-accent);
            }


            .calibration-economics
            article.total-platform strong[b-tm6n68tzyi] {
                color: var(--eco-accent);
                font-weight: 900;
            }


/* ============================================================
   QUALITY / INPUT BREAKDOWNS
   ============================================================ */

.calibration-breakdowns[b-tm6n68tzyi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 16px 16px;
}


.calibration-breakdown-card[b-tm6n68tzyi] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
    background: var(--eco-panel);
}


    .calibration-breakdown-card h3[b-tm6n68tzyi] {
        margin: 0;
        padding: 12px 13px;
        border-bottom: 1px solid var(--eco-border);
        color: var(--eco-text);
        background: linear-gradient( 90deg, var(--eco-panel-soft), var(--eco-panel) );
        font-size: .92rem;
        font-weight: 850;
    }


/* ============================================================
   BREAKDOWN TABLE
   ============================================================ */

.breakdown-table[b-tm6n68tzyi] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}


/*
 * New 9-column layout:
 *
 * Group
 * Jobs
 * Actual
 * Shadow
 * Delta
 * Provider
 * Internal
 * Platform
 * Margin
 */
.breakdown-head[b-tm6n68tzyi],
.breakdown-row[b-tm6n68tzyi] {
    min-width: 900px;
    display: grid;
    grid-template-columns: 1.25fr .50fr .65fr .65fr .55fr .90fr .90fr .95fr .65fr;
    gap: 7px;
    align-items: center;
}


.breakdown-head[b-tm6n68tzyi] {
    padding: 8px 10px;
    color: var(--eco-muted);
    background: var(--eco-panel-soft);
    font-size: .66rem;
    font-weight: 800;
}


    .breakdown-head > span[b-tm6n68tzyi] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.breakdown-row[b-tm6n68tzyi] {
    padding: 10px;
    border-top: 1px solid var(--eco-border);
    color: var(--eco-secondary);
    font-size: .72rem;
    transition: background-color .15s ease;
}


    .breakdown-row:hover[b-tm6n68tzyi] {
        background: rgba(95, 112, 232, .018);
    }


    .breakdown-row:first-of-type[b-tm6n68tzyi] {
        border-top: 0;
    }


    .breakdown-row > strong[b-tm6n68tzyi],
    .breakdown-row > span[b-tm6n68tzyi] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .breakdown-row > strong[b-tm6n68tzyi] {
        color: var(--eco-text);
        font-weight: 800;
    }


/*
 * Highlight Total Platform Cost because this is the cost base used
 * by margin-floor economics.
 */
.platform-cost-value[b-tm6n68tzyi] {
    color: var(--eco-accent) !important;
    font-weight: 850;
}


.breakdown-empty[b-tm6n68tzyi] {
    padding: 20px;
    color: var(--eco-muted);
    font-size: .8rem;
    text-align: center;
}


/* ============================================================
   RTL
   ============================================================ */

.pricing-calibration-panel[dir="rtl"]
.breakdown-head[b-tm6n68tzyi],
.pricing-calibration-panel[dir="rtl"]
.breakdown-row[b-tm6n68tzyi] {
    text-align: right;
}


.pricing-calibration-panel[dir="ltr"]
.breakdown-head[b-tm6n68tzyi],
.pricing-calibration-panel[dir="ltr"]
.breakdown-row[b-tm6n68tzyi] {
    text-align: left;
}


/* ============================================================
   DARK THEME SUPPORT
   ============================================================ */

/*
 * Most colors are inherited from AdminAiProvider CSS variables.
 * These selectors only refine translucent elements where useful.
 */

html[data-theme="dark"]
.pricing-calibration-panel
.calibration-warning > span[b-tm6n68tzyi] {
    background: rgba(255, 255, 255, .035);
}


html[data-theme="dark"]
.pricing-calibration-panel
.breakdown-row:hover[b-tm6n68tzyi] {
    background: rgba(95, 112, 232, .035);
}


html[data-theme="dark"]
.pricing-calibration-panel
.calibration-economics article.total-platform[b-tm6n68tzyi] {
    background: rgba(95, 112, 232, .09);
}


/* ============================================================
   RESPONSIVE � LARGE TABLET
   ============================================================ */

@media (max-width: 1180px) {

    .calibration-economics[b-tm6n68tzyi] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .calibration-breakdowns[b-tm6n68tzyi] {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   RESPONSIVE � TABLET
   ============================================================ */

@media (max-width: 820px) {

    .pricing-calibration-heading[b-tm6n68tzyi] {
        align-items: stretch;
        flex-direction: column;
    }


    .calibration-policy-chip[b-tm6n68tzyi] {
        align-self: flex-start;
    }


    .calibration-readiness[b-tm6n68tzyi] {
        align-items: stretch;
        flex-direction: column;
    }


    .target-margin-chip[b-tm6n68tzyi] {
        align-self: flex-start;
    }


    .calibration-kpis[b-tm6n68tzyi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .calibration-direction[b-tm6n68tzyi] {
        grid-template-columns: 1fr;
    }


    .calibration-range[b-tm6n68tzyi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .calibration-economics[b-tm6n68tzyi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   RESPONSIVE � MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .pricing-calibration-heading[b-tm6n68tzyi] {
        padding: 16px;
    }


        .pricing-calibration-heading h2[b-tm6n68tzyi] {
            font-size: 1.25rem;
        }


        .pricing-calibration-heading p[b-tm6n68tzyi] {
            font-size: .84rem;
        }


    .calibration-readiness[b-tm6n68tzyi] {
        margin: 12px;
    }


    .calibration-warning[b-tm6n68tzyi] {
        margin-inline: 12px;
    }


    .calibration-kpis[b-tm6n68tzyi] {
        grid-template-columns: 1fr;
        padding-inline: 12px;
    }


    .calibration-direction[b-tm6n68tzyi] {
        margin-inline: 12px;
    }


    .calibration-range[b-tm6n68tzyi] {
        grid-template-columns: 1fr;
        margin-inline: 12px;
    }


    .calibration-economics[b-tm6n68tzyi] {
        grid-template-columns: 1fr;
        margin-inline: 12px;
    }


    .calibration-breakdowns[b-tm6n68tzyi] {
        grid-template-columns: 1fr;
        margin-inline: 12px;
    }


    .breakdown-head[b-tm6n68tzyi],
    .breakdown-row[b-tm6n68tzyi] {
        /*
         * Keep the economic columns readable instead of crushing them.
         * The table intentionally becomes horizontally scrollable.
         */
        min-width: 860px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminTranslationPricingHealthPanel.razor.rz.scp.css */
/* ============================================================
   AUTOMATIC PRICING EVALUATION HEALTH
   ============================================================ */

.pricing-health-panel[b-rv4lpriaxh] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}


.pricing-health-heading[b-rv4lpriaxh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-bottom: 1px solid var(--eco-border);
    background: linear-gradient( 115deg, rgba(35, 130, 103, .045), rgba(95, 112, 232, .02), transparent);
}


.pricing-health-heading-copy[b-rv4lpriaxh] {
    min-width: 0;
}


.pricing-health-kicker[b-rv4lpriaxh] {
    display: block;
    margin-bottom: 5px;
    color: var(--eco-accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
}


.pricing-health-panel[dir="rtl"] .pricing-health-kicker[b-rv4lpriaxh] {
    letter-spacing: 0;
}


.pricing-health-heading h2[b-rv4lpriaxh] {
    margin: 0;
    color: var(--eco-text);
    font-size: 1.45rem;
}


.pricing-health-heading p[b-rv4lpriaxh] {
    max-width: 980px;
    margin: 7px 0 0;
    color: var(--eco-muted);
    font-size: .92rem;
    line-height: 1.8;
}


.pricing-health-state[b-rv4lpriaxh] {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}


    .pricing-health-state.healthy[b-rv4lpriaxh] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }


    .pricing-health-state.attention[b-rv4lpriaxh] {
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }


    .pricing-health-state.inactive[b-rv4lpriaxh] {
        color: var(--eco-muted);
        background: var(--eco-panel-muted);
    }


/* ============================================================
   LOAD / EMPTY / FEEDBACK
   ============================================================ */

.pricing-health-loading[b-rv4lpriaxh] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--eco-muted);
    font-size: .88rem;
}


.pricing-health-spinner[b-rv4lpriaxh] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(95, 112, 232, .16);
    border-top-color: var(--eco-accent);
    border-radius: 50%;
    animation: pricing-health-spin-b-rv4lpriaxh .8s linear infinite;
}


@keyframes pricing-health-spin-b-rv4lpriaxh {
    to {
        transform: rotate(360deg);
    }
}


.pricing-health-feedback[b-rv4lpriaxh],
.pricing-health-summary[b-rv4lpriaxh],
.pricing-health-empty[b-rv4lpriaxh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px;
    padding: 13px;
    border: 1px solid;
    border-radius: 12px;
}


    .pricing-health-feedback > span[b-rv4lpriaxh],
    .pricing-health-summary > span[b-rv4lpriaxh],
    .pricing-health-empty > span[b-rv4lpriaxh] {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        font-weight: 900;
    }


    .pricing-health-feedback > div[b-rv4lpriaxh],
    .pricing-health-summary > div[b-rv4lpriaxh],
    .pricing-health-empty > div[b-rv4lpriaxh] {
        min-width: 0;
    }


    .pricing-health-feedback strong[b-rv4lpriaxh],
    .pricing-health-summary strong[b-rv4lpriaxh],
    .pricing-health-empty strong[b-rv4lpriaxh] {
        display: block;
        font-size: .9rem;
    }


    .pricing-health-feedback small[b-rv4lpriaxh] {
        display: block;
        margin-top: 3px;
        font-size: .74rem;
        line-height: 1.6;
    }


    .pricing-health-feedback.danger[b-rv4lpriaxh] {
        border-color: rgba(198, 79, 91, .15);
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }


        .pricing-health-feedback.danger > span[b-rv4lpriaxh] {
            background: rgba(198, 79, 91, .08);
        }


    .pricing-health-summary p[b-rv4lpriaxh],
    .pricing-health-empty p[b-rv4lpriaxh] {
        margin: 4px 0 0;
        font-size: .75rem;
        line-height: 1.7;
    }


    .pricing-health-summary.healthy[b-rv4lpriaxh] {
        border-color: rgba(35, 130, 103, .15);
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }


        .pricing-health-summary.healthy > span[b-rv4lpriaxh] {
            background: rgba(35, 130, 103, .08);
        }


    .pricing-health-summary.attention[b-rv4lpriaxh] {
        border-color: rgba(168, 118, 28, .16);
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }


        .pricing-health-summary.attention > span[b-rv4lpriaxh] {
            background: rgba(168, 118, 28, .09);
        }


.pricing-health-empty[b-rv4lpriaxh] {
    border-color: var(--eco-border);
    color: var(--eco-muted);
    background: var(--eco-panel-soft);
}


    .pricing-health-empty > span[b-rv4lpriaxh] {
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
    }


    .pricing-health-empty.compact[b-rv4lpriaxh] {
        margin: 0;
        border: 0;
        border-radius: 0;
    }


/* ============================================================
   POLICY
   ============================================================ */

.pricing-health-policy-strip[b-rv4lpriaxh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 16px 0;
}


    .pricing-health-policy-strip > div[b-rv4lpriaxh] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 11px 12px;
        border: 1px solid var(--eco-border);
        border-radius: 10px;
        background: var(--eco-panel-soft);
    }


    .pricing-health-policy-strip span[b-rv4lpriaxh] {
        color: var(--eco-muted);
        font-size: .7rem;
    }


    .pricing-health-policy-strip strong[b-rv4lpriaxh] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: .86rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* ============================================================
   KPI
   ============================================================ */

.pricing-health-kpis[b-rv4lpriaxh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 0 16px 16px;
}


    .pricing-health-kpis article[b-rv4lpriaxh] {
        min-width: 0;
        display: grid;
        gap: 5px;
        padding: 13px;
        border: 1px solid var(--eco-border);
        border-radius: 11px;
        background: var(--eco-panel-soft);
    }


        .pricing-health-kpis article.coverage[b-rv4lpriaxh] {
            border-color: rgba(95, 112, 232, .15);
        }


        .pricing-health-kpis article.missing[b-rv4lpriaxh] {
            border-color: rgba(168, 118, 28, .14);
        }


    .pricing-health-kpis span[b-rv4lpriaxh] {
        color: var(--eco-muted);
        font-size: .74rem;
    }


    .pricing-health-kpis strong[b-rv4lpriaxh] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: 1.02rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .pricing-health-kpis small[b-rv4lpriaxh] {
        color: var(--eco-muted);
        font-size: .67rem;
        line-height: 1.5;
    }


.positive[b-rv4lpriaxh] {
    color: var(--eco-green) !important;
}


.warning[b-rv4lpriaxh] {
    color: var(--eco-amber) !important;
}


.danger[b-rv4lpriaxh] {
    color: var(--eco-red) !important;
}


/* ============================================================
   TIMELINE / FAILURE
   ============================================================ */

.pricing-health-timeline[b-rv4lpriaxh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 16px 16px;
}


    .pricing-health-timeline > div[b-rv4lpriaxh] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 11px 12px;
        border: 1px solid var(--eco-border);
        border-radius: 10px;
    }


        .pricing-health-timeline > div.failure[b-rv4lpriaxh] {
            border-color: rgba(198, 79, 91, .13);
        }


    .pricing-health-timeline span[b-rv4lpriaxh] {
        color: var(--eco-muted);
        font-size: .68rem;
    }


    .pricing-health-timeline strong[b-rv4lpriaxh] {
        color: var(--eco-text);
        font-size: .82rem;
    }


    .pricing-health-timeline small[b-rv4lpriaxh] {
        overflow: hidden;
        color: var(--eco-muted);
        font-size: .64rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.pricing-health-last-error[b-rv4lpriaxh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 16px 16px;
    padding: 11px 12px;
    border: 1px solid rgba(198, 79, 91, .14);
    border-radius: 11px;
    color: var(--eco-red);
    background: var(--eco-red-soft);
}


    .pricing-health-last-error > span[b-rv4lpriaxh] {
        width: 29px;
        height: 29px;
        flex: 0 0 29px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: rgba(198, 79, 91, .08);
        font-weight: 900;
    }


    .pricing-health-last-error > div[b-rv4lpriaxh] {
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }


    .pricing-health-last-error strong[b-rv4lpriaxh] {
        width: 100%;
        font-size: .82rem;
    }


    .pricing-health-last-error code[b-rv4lpriaxh],
    .pricing-health-last-error small[b-rv4lpriaxh] {
        font-size: .68rem;
    }


/* ============================================================
   RECOVERY
   ============================================================ */

.pricing-health-recovery[b-rv4lpriaxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 16px 16px;
    padding: 14px;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
    background: linear-gradient( 115deg, rgba(95, 112, 232, .035), transparent);
}


    .pricing-health-recovery > div[b-rv4lpriaxh] {
        min-width: 0;
        max-width: 1000px;
    }


    .pricing-health-recovery strong[b-rv4lpriaxh] {
        display: block;
        color: var(--eco-text);
        font-size: .9rem;
    }


    .pricing-health-recovery p[b-rv4lpriaxh] {
        margin: 5px 0 0;
        color: var(--eco-muted);
        font-size: .74rem;
        line-height: 1.65;
    }


.pricing-health-recovery-note[b-rv4lpriaxh] {
    display: block;
    margin-top: 7px;
    color: var(--eco-amber);
    font-size: .66rem;
    line-height: 1.6;
}


.pricing-health-recovery form[b-rv4lpriaxh] {
    flex: 0 0 auto;
}


.pricing-health-recovery button[b-rv4lpriaxh] {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--eco-accent);
    border-radius: 10px;
    color: #fff;
    background: var(--eco-accent);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}


    .pricing-health-recovery button:hover[b-rv4lpriaxh] {
        background: var(--eco-accent-hover);
    }


    .pricing-health-recovery button:disabled[b-rv4lpriaxh] {
        border-color: var(--eco-border-strong);
        color: var(--eco-muted);
        background: var(--eco-panel-soft);
        cursor: default;
    }


/* ============================================================
   MISSING TABLE
   ============================================================ */

.pricing-health-missing[b-rv4lpriaxh] {
    margin: 0 16px 16px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
}


.pricing-health-missing-heading[b-rv4lpriaxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--eco-border);
}


    .pricing-health-missing-heading h3[b-rv4lpriaxh] {
        margin: 0;
        color: var(--eco-text);
        font-size: 1rem;
    }


.pricing-health-count[b-rv4lpriaxh] {
    min-width: 32px;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
}


.pricing-health-table[b-rv4lpriaxh] {
    overflow-x: auto;
}


.pricing-health-table-head[b-rv4lpriaxh],
.pricing-health-row[b-rv4lpriaxh] {
    min-width: 900px;
    display: grid;
    grid-template-columns: 120px 185px 185px 145px minmax(220px, 1fr);
    gap: 10px;
    align-items: center;
}


.pricing-health-table-head[b-rv4lpriaxh] {
    padding: 10px 12px;
    color: var(--eco-muted);
    background: var(--eco-panel-soft);
    font-size: .7rem;
    font-weight: 800;
}


.pricing-health-row[b-rv4lpriaxh] {
    padding: 11px 12px;
    border-top: 1px solid var(--eco-border);
    color: var(--eco-secondary);
    font-size: .75rem;
}


    .pricing-health-row .job-id[b-rv4lpriaxh] {
        color: var(--eco-text);
        font-weight: 800;
    }


    .pricing-health-row .error-code[b-rv4lpriaxh] {
        overflow: hidden;
        color: var(--eco-red);
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.outcome[b-rv4lpriaxh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    white-space: nowrap;
}


    .outcome.created[b-rv4lpriaxh],
    .outcome.existing[b-rv4lpriaxh] {
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }


    .outcome.failed[b-rv4lpriaxh] {
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }


    .outcome.cancelled[b-rv4lpriaxh],
    .outcome.skipped[b-rv4lpriaxh] {
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }


    .outcome.never[b-rv4lpriaxh],
    .outcome.unknown[b-rv4lpriaxh] {
        color: var(--eco-muted);
        background: var(--eco-panel-muted);
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {

    .pricing-health-kpis[b-rv4lpriaxh],
    .pricing-health-timeline[b-rv4lpriaxh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .pricing-health-heading[b-rv4lpriaxh],
    .pricing-health-recovery[b-rv4lpriaxh] {
        align-items: stretch;
        flex-direction: column;
    }


    .pricing-health-state[b-rv4lpriaxh] {
        align-self: flex-start;
    }


    .pricing-health-policy-strip[b-rv4lpriaxh] {
        grid-template-columns: 1fr;
    }


    .pricing-health-recovery button[b-rv4lpriaxh] {
        width: 100%;
    }
}


@media (max-width: 560px) {

    .pricing-health-kpis[b-rv4lpriaxh],
    .pricing-health-timeline[b-rv4lpriaxh] {
        grid-template-columns: 1fr;
    }


    .pricing-health-heading[b-rv4lpriaxh] {
        padding: 16px;
    }


        .pricing-health-heading h2[b-rv4lpriaxh] {
            font-size: 1.2rem;
        }


        .pricing-health-heading p[b-rv4lpriaxh] {
            font-size: .82rem;
        }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminTranslationPricingPanel.razor.rz.scp.css */
/* ============================================================
   TRANSLATION PRICING POLICY · SHADOW
   Larger / More Readable Version
   ============================================================ */

.pricing-policy-panel[b-pm7kpj9014] {
    margin-top: 32px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 20px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.pricing-heading[b-pm7kpj9014] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 22px;
    border-bottom: 1px solid var(--eco-border);
    background: linear-gradient( 115deg, rgba(95,112,232,.05), rgba(95,112,232,.008));
}

.pricing-title[b-pm7kpj9014] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pricing-icon[b-pm7kpj9014] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .95rem;
    font-weight: 900;
}

.pricing-title > div[b-pm7kpj9014] {
    min-width: 0;
}

.pricing-eyebrow[b-pm7kpj9014] {
    display: block;
    margin-bottom: 6px;
    color: var(--eco-accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.pricing-policy-panel[dir="rtl"] .pricing-eyebrow[b-pm7kpj9014] {
    letter-spacing: 0;
}

.pricing-title h2[b-pm7kpj9014],
.pricing-history-heading h3[b-pm7kpj9014] {
    margin: 0;
    color: var(--eco-text);
}

.pricing-title h2[b-pm7kpj9014] {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.3;
}

.pricing-title p[b-pm7kpj9014] {
    max-width: 980px;
    margin: 8px 0 0;
    color: var(--eco-muted);
    font-size: 1rem;
    line-height: 1.9;
}

.pricing-heading-status[b-pm7kpj9014] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shadow-badge[b-pm7kpj9014],
.version-badge[b-pm7kpj9014],
.version-mode[b-pm7kpj9014],
.version-active[b-pm7kpj9014] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
}

.shadow-badge[b-pm7kpj9014] {
    padding: 8px 12px;
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
    font-size: .78rem;
}

.version-badge[b-pm7kpj9014] {
    min-width: 42px;
    padding: 8px 10px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .78rem;
}

.pricing-feedback[b-pm7kpj9014] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 18px 0;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 14px;
}

    .pricing-feedback > span[b-pm7kpj9014] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-size: .95rem;
        font-weight: 900;
    }

    .pricing-feedback > div[b-pm7kpj9014] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .pricing-feedback strong[b-pm7kpj9014] {
        font-size: 1rem;
        line-height: 1.6;
    }

    .pricing-feedback small[b-pm7kpj9014],
    .pricing-feedback code[b-pm7kpj9014] {
        color: inherit;
        font-size: .85rem;
        line-height: 1.6;
    }

    .pricing-feedback.success[b-pm7kpj9014] {
        border-color: rgba(35,130,103,.16);
        color: var(--eco-green);
        background: var(--eco-green-soft);
    }

        .pricing-feedback.success > span[b-pm7kpj9014] {
            background: rgba(35,130,103,.08);
        }

    .pricing-feedback.danger[b-pm7kpj9014] {
        border-color: rgba(198,79,91,.16);
        color: var(--eco-red);
        background: var(--eco-red-soft);
    }

        .pricing-feedback.danger > span[b-pm7kpj9014] {
            background: rgba(198,79,91,.08);
        }

.pricing-loading[b-pm7kpj9014] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--eco-muted);
    font-size: 1rem;
}

.pricing-spinner[b-pm7kpj9014] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(95,112,232,.15);
    border-top-color: var(--eco-accent);
    border-radius: 50%;
    animation: pricing-spin-b-pm7kpj9014 .8s linear infinite;
}

@keyframes pricing-spin-b-pm7kpj9014 {
    to {
        transform: rotate(360deg);
    }
}

.pricing-empty-policy[b-pm7kpj9014] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px;
    padding: 16px;
    border: 1px solid rgba(168,118,28,.14);
    border-radius: 14px;
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

    .pricing-empty-policy > span[b-pm7kpj9014] {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(168,118,28,.09);
        font-size: 1rem;
        font-weight: 900;
    }

    .pricing-empty-policy strong[b-pm7kpj9014] {
        display: block;
        font-size: 1rem;
    }

    .pricing-empty-policy p[b-pm7kpj9014] {
        margin: 6px 0 0;
        font-size: .92rem;
        line-height: 1.8;
    }

.active-policy-overview[b-pm7kpj9014] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    padding: 18px 18px 0;
}

    .active-policy-overview article[b-pm7kpj9014] {
        min-width: 0;
        display: grid;
        gap: 6px;
        padding: 14px;
        border: 1px solid var(--eco-border);
        border-radius: 12px;
        background: var(--eco-panel-soft);
    }

    .active-policy-overview span[b-pm7kpj9014],
    .active-policy-overview small[b-pm7kpj9014] {
        color: var(--eco-muted);
    }

    .active-policy-overview span[b-pm7kpj9014] {
        font-size: .82rem;
        font-weight: 700;
    }

    .active-policy-overview strong[b-pm7kpj9014] {
        overflow: hidden;
        color: var(--eco-text);
        font-size: 1.12rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .active-policy-overview small[b-pm7kpj9014] {
        font-size: .78rem;
        line-height: 1.55;
    }

.pricing-layout[b-pm7kpj9014] {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(340px,.55fr);
    gap: 14px;
    padding: 18px;
}

.pricing-form[b-pm7kpj9014],
.pricing-history[b-pm7kpj9014] {
    min-width: 0;
    border: 1px solid var(--eco-border);
    border-radius: 16px;
    background: var(--eco-panel);
}

.pricing-form[b-pm7kpj9014] {
    overflow: hidden;
}

.pricing-form-section[b-pm7kpj9014] {
    padding: 18px;
    border-bottom: 1px solid var(--eco-border);
}

    .pricing-form-section:last-child[b-pm7kpj9014] {
        border-bottom: 0;
    }

.pricing-form-section-heading[b-pm7kpj9014] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

    .pricing-form-section-heading > span[b-pm7kpj9014] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
        font-size: .82rem;
        font-weight: 850;
    }

    .pricing-form-section-heading > div[b-pm7kpj9014] {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .pricing-form-section-heading strong[b-pm7kpj9014] {
        font-size: 1.08rem;
        line-height: 1.5;
    }

    .pricing-form-section-heading small[b-pm7kpj9014] {
        color: var(--eco-muted);
        font-size: .86rem;
        line-height: 1.75;
    }

.pricing-fields[b-pm7kpj9014] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

    .pricing-fields.three[b-pm7kpj9014] {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .pricing-fields.five[b-pm7kpj9014] {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }

    .pricing-fields label[b-pm7kpj9014],
    .pricing-audit-reason[b-pm7kpj9014] {
        min-width: 0;
        display: grid;
        gap: 6px;
    }

        .pricing-fields label.wide[b-pm7kpj9014] {
            grid-column: 1 / -1;
        }

        .pricing-fields label > span[b-pm7kpj9014],
        .pricing-audit-reason > span[b-pm7kpj9014] {
            color: var(--eco-secondary);
            font-size: .92rem;
            font-weight: 800;
            line-height: 1.5;
        }

        .pricing-fields label > small[b-pm7kpj9014] {
            color: var(--eco-muted);
            font-size: .78rem;
            line-height: 1.65;
        }

        .pricing-fields input[b-pm7kpj9014],
        .pricing-fields select[b-pm7kpj9014],
        .pricing-audit-reason textarea[b-pm7kpj9014] {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--eco-border-strong);
            border-radius: 11px;
            outline: none;
            color: var(--eco-text);
            background: var(--eco-panel-soft);
            font: inherit;
            font-size: .98rem;
        }

    .pricing-fields input[b-pm7kpj9014],
    .pricing-fields select[b-pm7kpj9014] {
        min-height: 46px;
        padding: 0 12px;
    }

.pricing-audit-reason textarea[b-pm7kpj9014] {
    min-height: 110px;
    resize: vertical;
    padding: 12px;
    line-height: 1.8;
}

    .pricing-fields input:focus[b-pm7kpj9014],
    .pricing-fields select:focus[b-pm7kpj9014],
    .pricing-audit-reason textarea:focus[b-pm7kpj9014] {
        border-color: rgba(95,112,232,.44);
        background: var(--eco-panel);
        box-shadow: 0 0 0 3px rgba(95,112,232,.07);
    }

.pricing-toggle-grid[b-pm7kpj9014] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.pricing-toggle[b-pm7kpj9014] {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
    background: var(--eco-panel-soft);
    cursor: pointer;
}

    .pricing-toggle input[b-pm7kpj9014] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.toggle-switch[b-pm7kpj9014] {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: var(--eco-border-strong);
    transition: background-color .15s ease;
}

    .toggle-switch[b-pm7kpj9014]::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.12);
        transition: transform .15s ease;
    }

.pricing-toggle input:checked + .toggle-switch[b-pm7kpj9014] {
    background: var(--eco-accent);
}

    .pricing-toggle input:checked + .toggle-switch[b-pm7kpj9014]::after {
        transform: translateX(16px);
    }

.pricing-policy-panel[dir="rtl"] .toggle-switch[b-pm7kpj9014]::after {
    left: auto;
    right: 3px;
}

.pricing-policy-panel[dir="rtl"] .pricing-toggle input:checked + .toggle-switch[b-pm7kpj9014]::after {
    transform: translateX(-16px);
}

.toggle-copy[b-pm7kpj9014] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

    .toggle-copy strong[b-pm7kpj9014] {
        font-size: .92rem;
        line-height: 1.5;
    }

    .toggle-copy small[b-pm7kpj9014] {
        overflow: hidden;
        color: var(--eco-muted);
        font-size: .78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pricing-form-section.audit[b-pm7kpj9014] {
    background: linear-gradient( 115deg, rgba(95,112,232,.025), transparent);
}

.pricing-form-footer[b-pm7kpj9014] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}

.shadow-safety-note[b-pm7kpj9014] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .shadow-safety-note > span[b-pm7kpj9014] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--eco-green);
        background: var(--eco-green-soft);
        font-size: 1rem;
    }

    .shadow-safety-note > div[b-pm7kpj9014] {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .shadow-safety-note strong[b-pm7kpj9014] {
        font-size: .92rem;
        line-height: 1.5;
    }

    .shadow-safety-note small[b-pm7kpj9014] {
        color: var(--eco-muted);
        font-size: .80rem;
        line-height: 1.6;
    }

.pricing-save-button[b-pm7kpj9014] {
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--eco-accent);
    border-radius: 11px;
    color: #fff;
    background: var(--eco-accent);
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(95,112,232,.18);
}

    .pricing-save-button:hover[b-pm7kpj9014] {
        background: var(--eco-accent-hover);
    }

.pricing-history[b-pm7kpj9014] {
    overflow: hidden;
}

.pricing-history-heading[b-pm7kpj9014] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--eco-border);
}

    .pricing-history-heading h3[b-pm7kpj9014] {
        font-size: 1.14rem;
        line-height: 1.4;
    }

    .pricing-history-heading > span[b-pm7kpj9014] {
        min-width: 34px;
        padding: 6px 8px;
        border-radius: 999px;
        color: var(--eco-accent);
        background: var(--eco-accent-soft);
        font-size: .82rem;
        font-weight: 850;
        text-align: center;
    }

.pricing-history-empty[b-pm7kpj9014] {
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--eco-muted);
    font-size: .88rem;
    text-align: center;
    line-height: 1.8;
}

.pricing-history-list[b-pm7kpj9014] {
    max-height: 760px;
    overflow: auto;
    display: grid;
}

.pricing-version-card[b-pm7kpj9014] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--eco-border);
    background: var(--eco-panel);
}

    .pricing-version-card:last-child[b-pm7kpj9014] {
        border-bottom: 0;
    }

    .pricing-version-card.active[b-pm7kpj9014] {
        background: linear-gradient( 115deg, rgba(95,112,232,.045), transparent);
    }

.pricing-version-top[b-pm7kpj9014] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.version-number[b-pm7kpj9014] {
    color: var(--eco-text);
    font-size: 1rem;
    font-weight: 900;
}

.version-mode[b-pm7kpj9014] {
    padding: 4px 7px;
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
    font-size: .74rem;
}

.version-active[b-pm7kpj9014] {
    padding: 4px 7px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
    font-size: .74rem;
}

.pricing-version-card > strong[b-pm7kpj9014] {
    display: block;
    overflow: hidden;
    margin-bottom: 8px;
    color: var(--eco-text);
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.version-mini-metrics[b-pm7kpj9014] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    margin-bottom: 8px;
}

    .version-mini-metrics > span[b-pm7kpj9014] {
        min-width: 0;
        display: grid;
        gap: 3px;
        padding: 8px;
        border-radius: 9px;
        background: var(--eco-panel-soft);
    }

    .version-mini-metrics small[b-pm7kpj9014] {
        color: var(--eco-muted);
        font-size: .70rem;
    }

    .version-mini-metrics b[b-pm7kpj9014] {
        overflow: hidden;
        color: var(--eco-secondary);
        font-size: .82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.version-date[b-pm7kpj9014] {
    display: block;
    margin-top: 3px;
    color: var(--eco-muted);
    font-size: .76rem;
    line-height: 1.6;
}

    .version-date.retired[b-pm7kpj9014] {
        color: var(--eco-secondary);
    }

.version-details[b-pm7kpj9014] {
    margin-top: 10px;
    border-top: 1px dashed var(--eco-border);
}

    .version-details > summary[b-pm7kpj9014] {
        padding-top: 8px;
        color: var(--eco-accent);
        font-size: .84rem;
        font-weight: 750;
        cursor: pointer;
    }

    .version-details > div[b-pm7kpj9014] {
        display: grid;
        gap: 6px;
        margin-top: 8px;
    }

    .version-details p[b-pm7kpj9014] {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        font-size: .80rem;
        line-height: 1.7;
    }

        .version-details p span[b-pm7kpj9014] {
            color: var(--eco-muted);
        }

        .version-details p strong[b-pm7kpj9014] {
            color: var(--eco-secondary);
            text-align: end;
        }

    .version-details .history-audit[b-pm7kpj9014] {
        align-items: flex-start;
        flex-direction: column;
    }

        .version-details .history-audit strong[b-pm7kpj9014] {
            max-width: 100%;
            color: var(--eco-muted);
            font-weight: 500;
            line-height: 1.7;
            text-align: start;
        }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1400px) {
    .active-policy-overview[b-pm7kpj9014] {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .pricing-fields.five[b-pm7kpj9014] {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 1100px) {
    .pricing-layout[b-pm7kpj9014] {
        grid-template-columns: 1fr;
    }

    .pricing-history-list[b-pm7kpj9014] {
        max-height: 480px;
    }
}

@media (max-width: 820px) {
    .pricing-heading[b-pm7kpj9014],
    .pricing-form-footer[b-pm7kpj9014] {
        align-items: stretch;
        flex-direction: column;
    }

    .pricing-heading-status[b-pm7kpj9014] {
        align-self: flex-start;
    }

    .active-policy-overview[b-pm7kpj9014],
    .pricing-fields.three[b-pm7kpj9014],
    .pricing-fields.five[b-pm7kpj9014] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .pricing-save-button[b-pm7kpj9014] {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .active-policy-overview[b-pm7kpj9014],
    .pricing-fields[b-pm7kpj9014],
    .pricing-fields.three[b-pm7kpj9014],
    .pricing-fields.five[b-pm7kpj9014],
    .pricing-toggle-grid[b-pm7kpj9014] {
        grid-template-columns: 1fr;
    }

    .pricing-title[b-pm7kpj9014] {
        flex-direction: column;
    }

    .version-mini-metrics[b-pm7kpj9014] {
        grid-template-columns: 1fr;
    }

    .pricing-title h2[b-pm7kpj9014] {
        font-size: 1.35rem;
    }

    .pricing-title p[b-pm7kpj9014] {
        font-size: .92rem;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminTranslationPricingShadowAnalysisPanel.razor.rz.scp.css */
/* ============================================================
   SHADOW PRICING ANALYSIS
   ============================================================ */

.shadow-analysis-panel[b-v20b2hwe2n] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.shadow-analysis-heading[b-v20b2hwe2n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-bottom: 1px solid var(--eco-border);
    background:
        linear-gradient(
            115deg,
            rgba(95,112,232,.045),
            transparent);
}

.shadow-analysis-heading > div:first-child[b-v20b2hwe2n] {
    min-width: 0;
}

.shadow-analysis-kicker[b-v20b2hwe2n] {
    display: block;
    margin-bottom: 5px;
    color: var(--eco-accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.shadow-analysis-panel[dir="rtl"] .shadow-analysis-kicker[b-v20b2hwe2n] {
    letter-spacing: 0;
}

.shadow-analysis-heading h2[b-v20b2hwe2n],
.shadow-analysis-table-heading h3[b-v20b2hwe2n] {
    margin: 0;
    color: var(--eco-text);
}

.shadow-analysis-heading h2[b-v20b2hwe2n] {
    font-size: 1.45rem;
}

.shadow-analysis-heading p[b-v20b2hwe2n] {
    max-width: 980px;
    margin: 7px 0 0;
    color: var(--eco-muted);
    font-size: .92rem;
    line-height: 1.8;
}

.shadow-policy-chip[b-v20b2hwe2n] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shadow-policy-chip span[b-v20b2hwe2n],
.shadow-policy-chip strong[b-v20b2hwe2n] {
    padding: 7px 9px;
    border-radius: 999px;
    font-size: .72rem;
}

.shadow-policy-chip span[b-v20b2hwe2n] {
    color: var(--eco-violet);
    background: var(--eco-violet-soft);
}

.shadow-policy-chip strong[b-v20b2hwe2n] {
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
}

.shadow-analysis-feedback[b-v20b2hwe2n] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 12px 13px;
    border: 1px solid;
    border-radius: 11px;
}

.shadow-analysis-feedback > span[b-v20b2hwe2n] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-weight: 900;
}

.shadow-analysis-feedback > div[b-v20b2hwe2n] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.shadow-analysis-feedback strong[b-v20b2hwe2n] {
    font-size: .88rem;
}

.shadow-analysis-feedback small[b-v20b2hwe2n] {
    font-size: .75rem;
    line-height: 1.6;
}

.shadow-analysis-feedback.success[b-v20b2hwe2n] {
    border-color: rgba(35,130,103,.15);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.shadow-analysis-feedback.danger[b-v20b2hwe2n] {
    border-color: rgba(198,79,91,.15);
    color: var(--eco-red);
    background: var(--eco-red-soft);
}

.shadow-analysis-loading[b-v20b2hwe2n],
.shadow-analysis-empty[b-v20b2hwe2n] {
    min-height: 110px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--eco-muted);
    font-size: .88rem;
    text-align: center;
}

.shadow-analysis-empty strong[b-v20b2hwe2n] {
    display: block;
    color: var(--eco-secondary);
    font-size: .95rem;
}

.shadow-analysis-empty p[b-v20b2hwe2n] {
    margin: 6px 0 0;
    line-height: 1.7;
}

.shadow-analysis-empty.compact[b-v20b2hwe2n] {
    min-height: 90px;
}

.shadow-analysis-kpis[b-v20b2hwe2n] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
    padding: 16px;
}

.shadow-analysis-kpis article[b-v20b2hwe2n] {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid var(--eco-border);
    border-radius: 11px;
    background: var(--eco-panel-soft);
}

.shadow-analysis-kpis span[b-v20b2hwe2n] {
    color: var(--eco-muted);
    font-size: .74rem;
}

.shadow-analysis-kpis strong[b-v20b2hwe2n] {
    overflow: hidden;
    color: var(--eco-text);
    font-size: 1.02rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shadow-analysis-kpis small[b-v20b2hwe2n] {
    color: var(--eco-muted);
    font-size: .67rem;
    line-height: 1.5;
}

.positive[b-v20b2hwe2n] {
    color: var(--eco-green) !important;
}

.negative[b-v20b2hwe2n] {
    color: var(--eco-red) !important;
}

.shadow-analysis-kpis article.platform-cost[b-v20b2hwe2n] {
    border-color: rgba(95,112,232,.18);
    background: var(--eco-accent-soft);
}

    .shadow-analysis-kpis article.platform-cost strong[b-v20b2hwe2n] {
        color: var(--eco-accent);
    }

.shadow-analysis-kpis article.cost-coverage[b-v20b2hwe2n] {
    border-color: rgba(35,130,103,.16);
    background: var(--eco-green-soft);
}

    .shadow-analysis-kpis article.cost-coverage strong[b-v20b2hwe2n] {
        color: var(--eco-green);
    }


/* ============================================================
   INTERNAL COST COMPOSITION
   ============================================================ */

.shadow-cost-composition[b-v20b2hwe2n] {
    margin: 0 16px 16px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
    background: var(--eco-panel);
}

.shadow-cost-composition-heading[b-v20b2hwe2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--eco-border);
    background: var(--eco-panel-soft);
}

    .shadow-cost-composition-heading > div[b-v20b2hwe2n] {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .shadow-cost-composition-heading strong[b-v20b2hwe2n] {
        font-size: .9rem;
    }

    .shadow-cost-composition-heading small[b-v20b2hwe2n] {
        color: var(--eco-muted);
        font-size: .72rem;
    }

    .shadow-cost-composition-heading > span[b-v20b2hwe2n] {
        flex: 0 0 auto;
        color: var(--eco-accent);
        font-size: .94rem;
        font-weight: 850;
    }

.shadow-cost-composition-grid[b-v20b2hwe2n] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 12px;
}

    .shadow-cost-composition-grid article[b-v20b2hwe2n] {
        min-width: 0;
        display: grid;
        gap: 5px;
        padding: 10px;
        border: 1px solid var(--eco-border);
        border-radius: 9px;
        background: var(--eco-panel-soft);
    }

    .shadow-cost-composition-grid span[b-v20b2hwe2n] {
        color: var(--eco-muted);
        font-size: .68rem;
    }

    .shadow-cost-composition-grid strong[b-v20b2hwe2n] {
        overflow: hidden;
        font-size: .86rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.shadow-cost-warning[b-v20b2hwe2n] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 9px 10px;
    border: 1px solid rgba(168,118,28,.15);
    border-radius: 9px;
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

    .shadow-cost-warning > span[b-v20b2hwe2n] {
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: rgba(168,118,28,.08);
        font-weight: 900;
    }

    .shadow-cost-warning p[b-v20b2hwe2n] {
        margin: 2px 0 0;
        font-size: .7rem;
        line-height: 1.65;
    }

.shadow-cost-policy-badge[b-v20b2hwe2n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
    font-size: .64rem;
    font-weight: 850;
}

    .shadow-cost-policy-badge.legacy[b-v20b2hwe2n] {
        color: var(--eco-amber);
        background: var(--eco-amber-soft);
    }

.platform-cost-value[b-v20b2hwe2n] {
    color: var(--eco-accent);
    font-weight: 800;
}


.shadow-analysis-actions[b-v20b2hwe2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 16px 16px;
    padding: 13px 14px;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
    background:
        linear-gradient(
            115deg,
            rgba(95,112,232,.03),
            transparent);
}

.shadow-analysis-actions > div[b-v20b2hwe2n] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.shadow-analysis-actions strong[b-v20b2hwe2n] {
    font-size: .9rem;
}

.shadow-analysis-actions small[b-v20b2hwe2n] {
    color: var(--eco-muted);
    font-size: .75rem;
    line-height: 1.6;
}

.shadow-analysis-actions button[b-v20b2hwe2n] {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--eco-accent);
    border-radius: 10px;
    color: #fff;
    background: var(--eco-accent);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.shadow-analysis-actions button:disabled[b-v20b2hwe2n] {
    border-color: var(--eco-border-strong);
    color: var(--eco-muted);
    background: var(--eco-panel-soft);
    cursor: default;
}

.shadow-analysis-table-wrap[b-v20b2hwe2n] {
    margin: 0 16px 16px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
}

.shadow-analysis-table-heading[b-v20b2hwe2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--eco-border);
}

.shadow-analysis-table-heading h3[b-v20b2hwe2n] {
    font-size: 1rem;
}

.shadow-analysis-table-heading > span[b-v20b2hwe2n] {
    min-width: 30px;
    padding: 5px 7px;
    border-radius: 999px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
}

.shadow-analysis-table[b-v20b2hwe2n] {
    overflow-x: auto;
}

.shadow-analysis-table-head[b-v20b2hwe2n],
.shadow-analysis-row[b-v20b2hwe2n] {
    min-width: 1420px;
    display: grid;
    grid-template-columns: 90px 105px 85px 85px 70px 95px 130px 130px 140px 145px 90px;
    gap: 8px;
    align-items: center;
}

.shadow-analysis-table-head[b-v20b2hwe2n] {
    padding: 9px 12px;
    color: var(--eco-muted);
    background: var(--eco-panel-soft);
    font-size: .7rem;
    font-weight: 800;
}

.shadow-analysis-row[b-v20b2hwe2n] {
    padding: 11px 12px;
    border-top: 1px solid var(--eco-border);
    color: var(--eco-secondary);
    font-size: .76rem;
}

.shadow-analysis-row:first-of-type[b-v20b2hwe2n] {
    border-top: 0;
}

.shadow-analysis-row .job-id[b-v20b2hwe2n] {
    color: var(--eco-text);
    font-weight: 800;
}

.shadow-credit[b-v20b2hwe2n] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shadow-credit small[b-v20b2hwe2n] {
    padding: 2px 4px;
    border-radius: 999px;
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
    font-size: .52rem;
    font-weight: 850;
}

@media (max-width: 1180px) {
    .shadow-analysis-kpis[b-v20b2hwe2n] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .shadow-analysis-heading[b-v20b2hwe2n],
    .shadow-analysis-actions[b-v20b2hwe2n] {
        align-items: stretch;
        flex-direction: column;
    }

    .shadow-policy-chip[b-v20b2hwe2n] {
        align-self: flex-start;
    }

    .shadow-analysis-actions button[b-v20b2hwe2n] {
        width: 100%;
    }

    .shadow-cost-composition-heading[b-v20b2hwe2n] {
        align-items: stretch;
        flex-direction: column;
    }

    .shadow-cost-composition-grid[b-v20b2hwe2n] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 560px) {
    .shadow-analysis-kpis[b-v20b2hwe2n] {
        grid-template-columns: 1fr;
    }

    .shadow-cost-composition-grid[b-v20b2hwe2n] {
        grid-template-columns: 1fr;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminUnifiedCommercialEconomicsPanel.razor.rz.scp.css */
/* ============================================================
   UNIFIED REAL JOB ECONOMICS
   ============================================================ */

.unified-commercial-economics[b-f8fs2hv8od] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.uce-heading[b-f8fs2hv8od] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border-bottom: 1px solid var(--eco-border);
    background: linear-gradient(115deg, rgba(35, 130, 103, .045), rgba(95, 112, 232, .02), transparent);
}

.uce-heading > div[b-f8fs2hv8od] {
    min-width: 0;
    max-width: 1050px;
}

.uce-eyebrow[b-f8fs2hv8od] {
    display: block;
    margin-bottom: 4px;
    color: var(--eco-green);
    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.unified-commercial-economics[dir="rtl"] .uce-eyebrow[b-f8fs2hv8od] {
    letter-spacing: 0;
}

.uce-heading h2[b-f8fs2hv8od] {
    margin: 0;
    color: var(--eco-text);
    font-size: .95rem;
}

.uce-heading p[b-f8fs2hv8od] {
    margin: 6px 0 0;
    color: var(--eco-muted);
    font-size: .55rem;
    line-height: 1.75;
}

.uce-badge[b-f8fs2hv8od] {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--eco-green);
    background: var(--eco-green-soft);
    font-size: .48rem;
    font-weight: 900;
}

.uce-empty[b-f8fs2hv8od] {
    min-height: 90px;
    display: grid;
    place-items: center;
    padding: 15px;
    color: var(--eco-muted);
    font-size: .55rem;
}

.uce-kpis[b-f8fs2hv8od] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 13px;
}

.uce-kpis article[b-f8fs2hv8od] {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--eco-border);
    border-radius: 11px;
    background: var(--eco-panel-soft);
}

.uce-kpis span[b-f8fs2hv8od] {
    color: var(--eco-muted);
    font-size: .43rem;
}

.uce-kpis strong[b-f8fs2hv8od] {
    overflow: hidden;
    color: var(--eco-text);
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.positive[b-f8fs2hv8od] {
    color: var(--eco-green) !important;
}

.negative[b-f8fs2hv8od] {
    color: var(--eco-red) !important;
}

.uce-table-shell[b-f8fs2hv8od] {
    margin: 0 13px 13px;
    overflow-x: auto;
    border: 1px solid var(--eco-border);
    border-radius: 12px;
}

.uce-table-head[b-f8fs2hv8od],
.uce-row[b-f8fs2hv8od] {
    min-width: 1000px;
    display: grid;
    grid-template-columns: minmax(240px, 1.45fr) minmax(130px, .7fr) minmax(105px, .55fr) minmax(165px, .85fr) minmax(150px, .8fr) minmax(160px, .82fr);
    gap: 9px;
    align-items: center;
}

.uce-table-head[b-f8fs2hv8od] {
    padding: 9px 11px;
    color: var(--eco-muted);
    background: var(--eco-panel-muted);
    font-size: .43rem;
    font-weight: 800;
}

.uce-row[b-f8fs2hv8od] {
    padding: 10px 11px;
    border-top: 1px solid var(--eco-border);
}

.uce-row > div[b-f8fs2hv8od] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.uce-row strong[b-f8fs2hv8od] {
    overflow: hidden;
    color: var(--eco-text);
    font-size: .52rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uce-row small[b-f8fs2hv8od] {
    overflow: hidden;
    color: var(--eco-muted);
    font-size: .39rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uce-identity strong[b-f8fs2hv8od] {
    font-size: .56rem;
}

.uce-note[b-f8fs2hv8od] {
    margin: 0 13px 13px;
    padding: 10px 11px;
    border: 1px solid var(--eco-accent-border);
    border-radius: 10px;
    color: var(--eco-secondary);
    background: var(--eco-accent-soft);
}

.uce-note strong[b-f8fs2hv8od] {
    display: block;
    color: var(--eco-text);
    font-size: .50rem;
}

.uce-note p[b-f8fs2hv8od] {
    margin: 3px 0 0;
    font-size: .43rem;
    line-height: 1.65;
}

@media (max-width: 1050px) {
    .uce-kpis[b-f8fs2hv8od] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .uce-heading[b-f8fs2hv8od] {
        flex-direction: column;
    }

    .uce-kpis[b-f8fs2hv8od] {
        grid-template-columns: 1fr;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Ai/AdminUnifiedTranslationPricingPanel.razor.rz.scp.css */
/* ============================================================
   UNIFIED REAL CUSTOMER PRICING
   Scoped styles for AdminUnifiedTranslationPricingPanel.razor
   ============================================================ */

.unified-pricing[b-e3hlq25ce7] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    color: var(--eco-text);
    background: var(--eco-panel);
    box-shadow: var(--eco-shadow);
}

.unified-pricing[dir="rtl"][b-e3hlq25ce7] {
    text-align: right;
}

.unified-pricing[dir="ltr"][b-e3hlq25ce7] {
    text-align: left;
}

/* ============================================================
   HEADER
   ============================================================ */

.up-header[b-e3hlq25ce7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 22px 19px;
    border-bottom: 1px solid var(--eco-border);
    background:
        linear-gradient(115deg,
            rgba(95, 112, 232, .055),
            rgba(52, 123, 183, .025),
            transparent 70%);
}

.up-header > div[b-e3hlq25ce7] {
    min-width: 0;
    max-width: 1000px;
}

.up-eyebrow[b-e3hlq25ce7] {
    display: block;
    margin-bottom: 6px;
    color: var(--eco-accent);
    font-size: .70rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: .09em;
}

.unified-pricing[dir="rtl"] .up-eyebrow[b-e3hlq25ce7] {
    letter-spacing: 0;
}

.up-header h2[b-e3hlq25ce7] {
    margin: 0;
    color: var(--eco-text);
    font-size: clamp(1.35rem, 2vw, 1.72rem);
    font-weight: 820;
    line-height: 1.35;
}

.up-header p[b-e3hlq25ce7] {
    max-width: 980px;
    margin: 8px 0 0;
    color: var(--eco-secondary);
    font-size: .82rem;
    line-height: 1.9;
}

.up-live-badge[b-e3hlq25ce7],
.up-unconfigured-badge[b-e3hlq25ce7] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid;
    border-radius: 999px;
    font-size: .70rem;
    font-weight: 850;
    white-space: nowrap;
}

.up-live-badge[b-e3hlq25ce7] {
    border-color: rgba(35, 130, 103, .18);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.up-unconfigured-badge[b-e3hlq25ce7] {
    border-color: rgba(168, 118, 28, .20);
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

/* ============================================================
   FORMULA / FEEDBACK / STATE
   ============================================================ */

.up-formula[b-e3hlq25ce7] {
    display: grid;
    gap: 7px;
    margin: 16px 18px 0;
    padding: 14px 16px;
    border: 1px solid var(--eco-accent-border);
    border-radius: 13px;
    background: var(--eco-accent-soft);
}

.up-formula strong[b-e3hlq25ce7] {
    color: var(--eco-text);
    font-size: .79rem;
}

.up-formula code[b-e3hlq25ce7] {
    display: block;
    overflow-x: auto;
    padding: 2px 0;
    color: var(--eco-accent);
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .76rem;
    line-height: 1.8;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
}

.up-feedback[b-e3hlq25ce7],
.up-warning[b-e3hlq25ce7] {
    display: grid;
    gap: 5px;
    margin: 14px 18px 0;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 12px;
}

.up-feedback strong[b-e3hlq25ce7],
.up-warning strong[b-e3hlq25ce7] {
    font-size: .80rem;
    line-height: 1.6;
}

.up-feedback small[b-e3hlq25ce7],
.up-warning span[b-e3hlq25ce7] {
    font-size: .72rem;
    line-height: 1.7;
}

.up-feedback.success[b-e3hlq25ce7] {
    border-color: rgba(35, 130, 103, .16);
    color: var(--eco-green);
    background: var(--eco-green-soft);
}

.up-feedback.danger[b-e3hlq25ce7] {
    border-color: rgba(198, 79, 91, .16);
    color: var(--eco-red);
    background: var(--eco-red-soft);
}

.up-feedback code[b-e3hlq25ce7] {
    color: inherit;
}

.up-warning[b-e3hlq25ce7] {
    border-color: rgba(168, 118, 28, .18);
    color: var(--eco-amber);
    background: var(--eco-amber-soft);
}

.up-loading[b-e3hlq25ce7] {
    min-height: 110px;
    display: grid;
    place-items: center;
    color: var(--eco-muted);
    font-size: .80rem;
}

/* ============================================================
   ACTIVE SUMMARY
   ============================================================ */

.up-summary[b-e3hlq25ce7] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 18px 0;
}

.up-summary article[b-e3hlq25ce7] {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--eco-border);
    border-radius: 11px;
    background: var(--eco-panel-soft);
}

.up-summary span[b-e3hlq25ce7],
.up-summary small[b-e3hlq25ce7] {
    color: var(--eco-muted);
    font-size: .66rem;
    line-height: 1.45;
}

.up-summary strong[b-e3hlq25ce7] {
    overflow: hidden;
    color: var(--eco-text);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   FORM / SECTIONS
   ============================================================ */

.up-form[b-e3hlq25ce7] {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.up-section[b-e3hlq25ce7] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--eco-border);
    border-radius: 14px;
    background: var(--eco-panel);
}

.up-section-title[b-e3hlq25ce7] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--eco-border);
    background: var(--eco-panel-soft);
}

.up-section-title > span[b-e3hlq25ce7] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--eco-accent);
    background: var(--eco-accent-soft);
    font-size: .69rem;
    font-weight: 900;
}

.up-section-title > div[b-e3hlq25ce7] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.up-section-title strong[b-e3hlq25ce7] {
    color: var(--eco-text);
    font-size: .88rem;
    line-height: 1.45;
}

.up-section-title small[b-e3hlq25ce7] {
    color: var(--eco-muted);
    font-size: .70rem;
    line-height: 1.7;
}

/* ============================================================
   FIELD GRIDS / CONTROLS
   ============================================================ */

.up-grid[b-e3hlq25ce7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 11px;
    padding: 15px;
}

.up-grid.prices[b-e3hlq25ce7] {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.unified-pricing label[b-e3hlq25ce7] {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
}

.unified-pricing label > span[b-e3hlq25ce7] {
    color: var(--eco-secondary);
    font-size: .70rem;
    font-weight: 720;
    line-height: 1.55;
}

.unified-pricing input[b-e3hlq25ce7],
.unified-pricing select[b-e3hlq25ce7],
.unified-pricing textarea[b-e3hlq25ce7] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--eco-border-strong);
    border-radius: 10px;
    outline: none;
    color: var(--eco-text);
    background: var(--eco-panel-soft);
    font: inherit;
    font-size: .78rem;
    transition:
        border-color .14s ease,
        box-shadow .14s ease,
        background-color .14s ease;
}

.unified-pricing input[b-e3hlq25ce7],
.unified-pricing select[b-e3hlq25ce7] {
    min-height: 42px;
    padding: 0 11px;
}

.unified-pricing textarea[b-e3hlq25ce7] {
    min-height: 105px;
    resize: vertical;
    padding: 10px 11px;
    line-height: 1.7;
}

.unified-pricing input:hover[b-e3hlq25ce7],
.unified-pricing select:hover[b-e3hlq25ce7],
.unified-pricing textarea:hover[b-e3hlq25ce7] {
    border-color: var(--eco-border-strong);
    background: var(--eco-panel);
}

.unified-pricing input:focus[b-e3hlq25ce7],
.unified-pricing select:focus[b-e3hlq25ce7],
.unified-pricing textarea:focus[b-e3hlq25ce7] {
    border-color: rgba(95, 112, 232, .48);
    background: var(--eco-panel);
    box-shadow: 0 0 0 3px rgba(95, 112, 232, .08);
}

.unified-pricing input[type="number"][b-e3hlq25ce7] {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   TABLES: MODEL TOKEN RATES + PACKAGE/INPUT MATRIX
   ============================================================ */

.up-section table[b-e3hlq25ce7] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    table-layout: fixed;
}

.up-section table thead[b-e3hlq25ce7] {
    background: var(--eco-panel-muted);
}

.up-section table th[b-e3hlq25ce7],
.up-section table td[b-e3hlq25ce7] {
    padding: 10px 11px;
    border-bottom: 1px solid var(--eco-border);
    vertical-align: middle;
}

.up-section table th[b-e3hlq25ce7] {
    color: var(--eco-muted);
    font-size: .67rem;
    font-weight: 800;
    line-height: 1.55;
}

.up-section table td[b-e3hlq25ce7] {
    color: var(--eco-secondary);
    font-size: .72rem;
}

.up-section table tbody tr:last-child th[b-e3hlq25ce7],
.up-section table tbody tr:last-child td[b-e3hlq25ce7] {
    border-bottom: 0;
}

.up-section table tbody tr:hover[b-e3hlq25ce7] {
    background: rgba(95, 112, 232, .025);
}

.up-section table td input[b-e3hlq25ce7] {
    min-height: 38px;
    padding-inline: 9px;
    font-size: .73rem;
}

.up-model-table[b-e3hlq25ce7] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.up-model-table table[b-e3hlq25ce7],
table.up-model-table[b-e3hlq25ce7] {
    min-width: 900px;
}

.up-model-table strong[b-e3hlq25ce7],
.up-section table td strong[b-e3hlq25ce7] {
    color: var(--eco-text);
    font-size: .76rem;
}

.up-model-table small[b-e3hlq25ce7],
.up-section table td small[b-e3hlq25ce7] {
    color: var(--eco-muted);
    font-size: .64rem;
    line-height: 1.5;
}

/* When the markup uses a div wrapper rather than the table itself. */
.up-section:has(table)[b-e3hlq25ce7] {
    overflow-x: auto;
}

/* ============================================================
   AUDIT / SAVE
   ============================================================ */

.up-section.audit[b-e3hlq25ce7] {
    overflow: visible;
}

.up-audit[b-e3hlq25ce7] {
    margin: 15px 15px 0;
}

.up-save[b-e3hlq25ce7] {
    min-height: 44px;
    margin: 13px 15px 15px;
    padding: 0 17px;
    border: 1px solid var(--eco-accent);
    border-radius: 10px;
    color: #fff;
    background: var(--eco-accent);
    font: inherit;
    font-size: .78rem;
    font-weight: 820;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(95, 112, 232, .17);
    transition:
        transform .12s ease,
        background-color .12s ease,
        box-shadow .12s ease;
}

.up-save:hover[b-e3hlq25ce7] {
    background: var(--eco-accent-hover);
    box-shadow: 0 10px 22px rgba(95, 112, 232, .22);
}

.up-save:active[b-e3hlq25ce7] {
    transform: translateY(1px);
}

.up-save:focus-visible[b-e3hlq25ce7],
.unified-pricing input:focus-visible[b-e3hlq25ce7],
.unified-pricing select:focus-visible[b-e3hlq25ce7],
.unified-pricing textarea:focus-visible[b-e3hlq25ce7] {
    outline: 2px solid var(--eco-accent);
    outline-offset: 2px;
}

/* ============================================================
   VERSION HISTORY
   ============================================================ */

.up-history[b-e3hlq25ce7] {
    margin: 0 18px 18px;
    padding: 15px;
    border: 1px solid var(--eco-border);
    border-radius: 14px;
    background: var(--eco-panel-soft);
}

.up-history h3[b-e3hlq25ce7] {
    margin: 0 0 11px;
    color: var(--eco-text);
    font-size: .90rem;
}

.up-history-list[b-e3hlq25ce7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.up-history-list article[b-e3hlq25ce7] {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--eco-border);
    border-radius: 10px;
    background: var(--eco-panel);
}

.up-history-list strong[b-e3hlq25ce7] {
    overflow: hidden;
    color: var(--eco-text);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-history-list span[b-e3hlq25ce7] {
    color: var(--eco-accent);
    font-size: .72rem;
    font-weight: 760;
}

.up-history-list small[b-e3hlq25ce7] {
    color: var(--eco-muted);
    font-size: .64rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1280px) {
    .up-summary[b-e3hlq25ce7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .up-header[b-e3hlq25ce7] {
        align-items: stretch;
        flex-direction: column;
    }

    .up-live-badge[b-e3hlq25ce7],
    .up-unconfigured-badge[b-e3hlq25ce7] {
        align-self: flex-start;
    }

    .up-summary[b-e3hlq25ce7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .up-grid[b-e3hlq25ce7],
    .up-grid.prices[b-e3hlq25ce7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .up-header[b-e3hlq25ce7] {
        padding: 18px 15px 16px;
    }

    .up-header h2[b-e3hlq25ce7] {
        font-size: 1.30rem;
    }

    .up-header p[b-e3hlq25ce7] {
        font-size: .76rem;
    }

    .up-formula[b-e3hlq25ce7],
    .up-feedback[b-e3hlq25ce7],
    .up-warning[b-e3hlq25ce7],
    .up-summary[b-e3hlq25ce7],
    .up-history[b-e3hlq25ce7] {
        margin-inline: 13px;
    }

    .up-form[b-e3hlq25ce7] {
        padding: 13px;
    }

    .up-summary[b-e3hlq25ce7],
    .up-grid[b-e3hlq25ce7],
    .up-grid.prices[b-e3hlq25ce7] {
        grid-template-columns: 1fr;
    }

    .up-section-title[b-e3hlq25ce7] {
        padding: 12px;
    }

    .up-grid[b-e3hlq25ce7] {
        padding: 12px;
    }

    .up-audit[b-e3hlq25ce7] {
        margin: 12px 12px 0;
    }

    .up-save[b-e3hlq25ce7] {
        width: calc(100% - 24px);
        margin: 12px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Audit/AdminAuditLog.razor.rz.scp.css */
.admin-audit-page[b-x6fbrkpn88] {
    display: grid;
    gap: 16px;
    color: var(--admin-text);
}

.admin-audit-hero[b-x6fbrkpn88] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
}

.admin-audit-hero > div[b-x6fbrkpn88] {
    min-width: 0;
}

.admin-audit-hero span[b-x6fbrkpn88] {
    color: var(--admin-accent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.admin-audit-hero h1[b-x6fbrkpn88] {
    margin: 6px 0 7px;
    font-size: 22px;
}

.admin-audit-hero p[b-x6fbrkpn88] {
    max-width: 820px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 10px;
    line-height: 1.8;
}

.admin-audit-hero > a[b-x6fbrkpn88],
.admin-audit-filter-actions a[b-x6fbrkpn88],
.admin-audit-filter-actions button[b-x6fbrkpn88] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    color: var(--admin-text-2);
    background: var(--admin-surface);
    text-decoration: none;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.admin-audit-filter[b-x6fbrkpn88] {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
}

.admin-audit-filter label[b-x6fbrkpn88] {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.admin-audit-filter label > span[b-x6fbrkpn88] {
    color: var(--admin-muted);
    font-size: 7px;
    font-weight: 800;
}

.admin-audit-filter input[b-x6fbrkpn88],
.admin-audit-filter select[b-x6fbrkpn88] {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    outline: none;
    color: var(--admin-text);
    background: var(--admin-surface-soft);
    font: inherit;
    font-size: 8px;
}

.admin-audit-filter input:focus[b-x6fbrkpn88],
.admin-audit-filter select:focus[b-x6fbrkpn88] {
    border-color: color-mix(in srgb, var(--admin-accent) 45%, var(--admin-line));
}

.admin-audit-filter-actions[b-x6fbrkpn88] {
    display: flex;
    gap: 6px;
}

.admin-audit-filter-actions button[b-x6fbrkpn88] {
    border-color: transparent;
    color: white;
    background: var(--admin-accent);
}

.admin-audit-summary[b-x6fbrkpn88] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.admin-audit-summary article[b-x6fbrkpn88] {
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface);
}

.admin-audit-summary span[b-x6fbrkpn88],
.admin-audit-summary strong[b-x6fbrkpn88] {
    display: block;
}

.admin-audit-summary span[b-x6fbrkpn88] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-audit-summary strong[b-x6fbrkpn88] {
    margin-top: 4px;
    font-size: 15px;
}

.admin-audit-list[b-x6fbrkpn88] {
    display: grid;
    gap: 8px;
}

.admin-audit-item[b-x6fbrkpn88] {
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface);
}

.admin-audit-item > summary[b-x6fbrkpn88] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.admin-audit-item > summary[b-x6fbrkpn88]::-webkit-details-marker {
    display: none;
}

.admin-audit-item-main[b-x6fbrkpn88],
.admin-audit-item-reference[b-x6fbrkpn88] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-audit-item-reference[b-x6fbrkpn88] {
    justify-items: end;
    text-align: end;
}

.admin-audit-action[b-x6fbrkpn88] {
    width: fit-content;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 6.4px;
    font-weight: 900;
}

.admin-audit-item strong[b-x6fbrkpn88] {
    font-size: 9px;
}

.admin-audit-item small[b-x6fbrkpn88],
.admin-audit-item time[b-x6fbrkpn88] {
    color: var(--admin-muted);
    font-size: 6.5px;
}

.admin-audit-item code[b-x6fbrkpn88] {
    color: var(--admin-text-2);
    font-size: 6.5px;
    overflow-wrap: anywhere;
}

.admin-audit-detail[b-x6fbrkpn88] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--admin-line);
    background: var(--admin-surface-soft);
}

.admin-audit-detail > div[b-x6fbrkpn88] {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    background: var(--admin-surface);
}

.admin-audit-detail > div.is-wide[b-x6fbrkpn88] {
    grid-column: 1 / -1;
}

.admin-audit-detail span[b-x6fbrkpn88],
.admin-audit-detail strong[b-x6fbrkpn88],
.admin-audit-detail a[b-x6fbrkpn88] {
    display: block;
}

.admin-audit-detail span[b-x6fbrkpn88] {
    margin-bottom: 4px;
    color: var(--admin-muted);
    font-size: 6.5px;
}

.admin-audit-detail strong[b-x6fbrkpn88],
.admin-audit-detail a[b-x6fbrkpn88] {
    color: var(--admin-text-2);
    font-size: 7.2px;
    overflow-wrap: anywhere;
}

.admin-audit-detail a[b-x6fbrkpn88] {
    color: var(--admin-accent);
    text-decoration: none;
}

.admin-audit-detail pre[b-x6fbrkpn88] {
    max-height: 220px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--admin-text-2);
    font: inherit;
    font-size: 7px;
    line-height: 1.6;
}

.admin-audit-state[b-x6fbrkpn88] {
    padding: 24px;
    border: 1px dashed var(--admin-line);
    border-radius: 14px;
    color: var(--admin-muted);
    background: var(--admin-surface);
    text-align: center;
    font-size: 9px;
}

@media (max-width: 1180px) {
    .admin-audit-filter[b-x6fbrkpn88] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-audit-filter .is-search[b-x6fbrkpn88] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .admin-audit-hero[b-x6fbrkpn88],
    .admin-audit-item > summary[b-x6fbrkpn88] {
        flex-direction: column;
    }

    .admin-audit-item-reference[b-x6fbrkpn88] {
        justify-items: start;
        text-align: start;
    }

    .admin-audit-summary[b-x6fbrkpn88],
    .admin-audit-filter[b-x6fbrkpn88],
    .admin-audit-detail[b-x6fbrkpn88] {
        grid-template-columns: 1fr;
    }

    .admin-audit-filter .is-search[b-x6fbrkpn88],
    .admin-audit-detail > div.is-wide[b-x6fbrkpn88] {
        grid-column: auto;
    }

    .admin-audit-filter-actions[b-x6fbrkpn88] {
        width: 100%;
    }

    .admin-audit-filter-actions > *[b-x6fbrkpn88] {
        flex: 1;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Auth/AdminAccessDenied.razor.rz.scp.css */
.admin-access-denied-page[b-84il0j4qh5] {
    min-height: 100dvh;
    padding: 28px;
    display: grid;
    place-items: center;
    color: #171c26;
    background:
        radial-gradient(circle at 18% 15%, rgba(24,68,198,.10), transparent 28rem),
        #eef2f8;
}

.admin-access-denied-card[b-84il0j4qh5] {
    width: min(560px, 100%);
    padding: 42px;
    border: 1px solid rgba(25,34,52,.08);
    border-radius: 26px;
    text-align: center;
    background: rgba(255,255,255,.92);
    box-shadow: 0 34px 90px rgba(33,51,86,.13);
}

.admin-access-denied-icon[b-84il0j4qh5] {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #c7464d;
    background: rgba(199,70,77,.08);
}

.admin-access-denied-icon svg[b-84il0j4qh5] {
    width: 29px;
    height: 29px;
}

.admin-access-denied-eyebrow[b-84il0j4qh5] {
    color: #1844c6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.admin-access-denied-card h1[b-84il0j4qh5] {
    margin: 8px 0 10px;
    font-size: clamp(25px, 4vw, 34px);
    line-height: 1.3;
}

.admin-access-denied-card p[b-84il0j4qh5] {
    margin: 0;
    color: #687181;
    font-size: 12.5px;
    line-height: 1.9;
}

.admin-access-denied-actions[b-84il0j4qh5] {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-access-denied-actions a[b-84il0j4qh5] {
    min-height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
}

.admin-access-denied-actions .is-primary[b-84il0j4qh5] {
    color: #fff;
    background: #1844c6;
}

.admin-access-denied-actions .is-secondary[b-84il0j4qh5] {
    border: 1px solid rgba(25,34,52,.10);
    color: #536072;
    background: #f8f9fb;
}

:global(html[data-theme="dark"]) .admin-access-denied-page[b-84il0j4qh5] {
    color: #edf1f8;
    background:
        radial-gradient(circle at 18% 15%, rgba(95,128,235,.12), transparent 28rem),
        #0c101a;
}

:global(html[data-theme="dark"]) .admin-access-denied-card[b-84il0j4qh5] {
    border-color: rgba(255,255,255,.07);
    background: #151b28;
    box-shadow: 0 38px 90px rgba(0,0,0,.34);
}

:global(html[data-theme="dark"]) .admin-access-denied-card p[b-84il0j4qh5] {
    color: #aeb7c7;
}

:global(html[data-theme="dark"]) .admin-access-denied-actions .is-secondary[b-84il0j4qh5] {
    border-color: rgba(255,255,255,.075);
    color: #b4bdcc;
    background: #192130;
}

@media (max-width: 600px) {
    .admin-access-denied-page[b-84il0j4qh5] {
        padding: 16px;
    }

    .admin-access-denied-card[b-84il0j4qh5] {
        padding: 30px 20px;
        border-radius: 21px;
    }

    .admin-access-denied-actions[b-84il0j4qh5] {
        display: grid;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Auth/AdminLogin.razor.rz.scp.css */
.admin-login-page[b-0yki17hsta] {
    --admin-login-primary: #1844c6;
    --admin-login-primary-hover: #123aa9;
    --admin-login-primary-soft: rgba(24, 68, 198, .09);
    --admin-login-bg: #eef2f8;
    --admin-login-surface: rgba(255, 255, 255, .90);
    --admin-login-surface-strong: #ffffff;
    --admin-login-text: #141923;
    --admin-login-text-2: #596273;
    --admin-login-muted: #8b93a2;
    --admin-login-border: rgba(25, 34, 52, .09);
    --admin-login-border-strong: rgba(25, 34, 52, .14);
    --admin-login-danger: #c7464d;
    --admin-login-danger-soft: rgba(199, 70, 77, .08);
    --admin-login-shadow: 0 38px 100px rgba(33, 51, 86, .14);

    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    color: var(--admin-login-text);
    background: var(--admin-login-bg);
}

.admin-login-background[b-0yki17hsta] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.admin-login-orb[b-0yki17hsta] {
    position: absolute;
    border-radius: 999px;
    filter: blur(1px);
}

.orb-a[b-0yki17hsta] {
    width: 520px;
    height: 520px;
    inset-inline-start: -170px;
    top: -170px;
    background: radial-gradient(circle, rgba(24, 68, 198, .14), rgba(24, 68, 198, 0) 70%);
}

.orb-b[b-0yki17hsta] {
    width: 620px;
    height: 620px;
    inset-inline-end: -230px;
    bottom: -250px;
    background: radial-gradient(circle, rgba(83, 115, 223, .11), rgba(83, 115, 223, 0) 72%);
}

.admin-login-grid[b-0yki17hsta] {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(31, 48, 80, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 48, 80, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
}

.admin-login-topbar[b-0yki17hsta] {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 48px));
    min-height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-login-brand[b-0yki17hsta] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.admin-login-brand-mark[b-0yki17hsta] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--admin-login-border);
    border-radius: 14px;
    color: var(--admin-login-primary);
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 24px rgba(26, 46, 84, .06);
}

.admin-login-brand-mark svg[b-0yki17hsta] {
    width: 24px;
    height: 24px;
}

.admin-login-brand > span:last-child[b-0yki17hsta] {
    display: grid;
    gap: 2px;
}

.admin-login-brand strong[b-0yki17hsta] {
    font-size: 14px;
    letter-spacing: -.01em;
}

.admin-login-brand small[b-0yki17hsta] {
    color: var(--admin-login-muted);
    font-size: 10px;
    font-weight: 700;
}

.admin-login-top-actions[b-0yki17hsta] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-login-top-button[b-0yki17hsta] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 1px solid var(--admin-login-border);
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #5c6574;
    background: rgba(255,255,255,.68);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.admin-login-top-button:hover[b-0yki17hsta] {
    border-color: rgba(24,68,198,.24);
    color: var(--admin-login-primary);
    background: #fff;
    transform: translateY(-1px);
}

.admin-login-language[b-0yki17hsta] {
    font-size: 11px;
    font-weight: 900;
}

.admin-login-top-button svg[b-0yki17hsta] {
    width: 18px;
    height: 18px;
}

.admin-login-theme-dark[b-0yki17hsta] {
    display: none;
}

.admin-login-shell[b-0yki17hsta] {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 48px));
    margin: 38px auto 70px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(310px, .82fr);
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.46);
    box-shadow: var(--admin-login-shadow);
    backdrop-filter: blur(28px);
}

.admin-login-card[b-0yki17hsta] {
    padding: clamp(28px, 4vw, 52px);
    background: var(--admin-login-surface);
}

.admin-login-card-heading[b-0yki17hsta] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 30px;
}

.admin-login-security-mark[b-0yki17hsta] {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--admin-login-primary);
    background: var(--admin-login-primary-soft);
}

.admin-login-security-mark svg[b-0yki17hsta] {
    width: 25px;
    height: 25px;
}

.admin-login-eyebrow[b-0yki17hsta],
.admin-login-side-eyebrow[b-0yki17hsta] {
    color: var(--admin-login-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.admin-login-card h1[b-0yki17hsta] {
    margin: 6px 0 8px;
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.25;
    letter-spacing: -.035em;
}

.admin-login-card-heading p[b-0yki17hsta],
.admin-login-side-card p[b-0yki17hsta] {
    margin: 0;
    color: var(--admin-login-text-2);
    font-size: 13px;
    line-height: 1.9;
}

.admin-login-alert[b-0yki17hsta] {
    margin-bottom: 22px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    border: 1px solid rgba(199,70,77,.16);
    border-radius: 14px;
    color: #a33a41;
    background: var(--admin-login-danger-soft);
    font-size: 12px;
    line-height: 1.7;
}

.admin-login-alert-icon[b-0yki17hsta] {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
}

.admin-login-alert-icon svg[b-0yki17hsta] {
    width: 17px;
    height: 17px;
}

.admin-login-form[b-0yki17hsta] {
    display: grid;
    gap: 18px;
}

.admin-login-field[b-0yki17hsta] {
    display: grid;
    gap: 8px;
}

.admin-login-field > span[b-0yki17hsta] {
    color: #3f4858;
    font-size: 11px;
    font-weight: 850;
}

.admin-login-input-shell[b-0yki17hsta] {
    min-height: 50px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--admin-login-border-strong);
    border-radius: 15px;
    background: rgba(249,250,253,.88);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-login-input-shell:focus-within[b-0yki17hsta] {
    border-color: rgba(24,68,198,.48);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(24,68,198,.08);
}

.admin-login-input-icon[b-0yki17hsta] {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #8c94a2;
}

.admin-login-input-icon svg[b-0yki17hsta] {
    width: 18px;
    height: 18px;
}

.admin-login-input-shell input[b-0yki17hsta] {
    width: 100%;
    height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--admin-login-text);
    background: transparent;
    font: inherit;
    font-size: 13px;
}

.admin-login-input-shell input[b-0yki17hsta]::placeholder {
    color: #aab0bb;
}

.admin-login-submit[b-0yki17hsta] {
    min-height: 50px;
    margin-top: 3px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: var(--admin-login-primary);
    box-shadow: 0 15px 30px rgba(24,68,198,.20);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.admin-login-submit:hover[b-0yki17hsta] {
    background: var(--admin-login-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(24,68,198,.24);
}

.admin-login-submit svg[b-0yki17hsta] {
    width: 18px;
    height: 18px;
}

[dir="rtl"] .admin-login-submit svg[b-0yki17hsta] {
    transform: scaleX(-1);
}

.admin-login-security-note[b-0yki17hsta] {
    margin-top: 22px;
    padding-top: 19px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    border-top: 1px solid var(--admin-login-border);
    color: var(--admin-login-muted);
    font-size: 10.5px;
    line-height: 1.75;
}

.admin-login-security-note svg[b-0yki17hsta] {
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

.admin-login-side-card[b-0yki17hsta] {
    position: relative;
    padding: clamp(30px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ecf1ff;
    background:
        radial-gradient(circle at 80% 14%, rgba(101,129,230,.22), transparent 30%),
        linear-gradient(155deg, #202c46 0%, #151d2d 64%, #121926 100%);
}

.admin-login-side-card[b-0yki17hsta]::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 22px;
    pointer-events: none;
}

.admin-login-side-card > *[b-0yki17hsta] {
    position: relative;
    z-index: 1;
}

.admin-login-side-eyebrow[b-0yki17hsta] {
    color: #94abff;
}

.admin-login-side-card h2[b-0yki17hsta] {
    margin: 10px 0 13px;
    font-size: clamp(23px, 2.8vw, 31px);
    line-height: 1.38;
    letter-spacing: -.035em;
}

.admin-login-side-card p[b-0yki17hsta] {
    color: #aeb9cd;
}

.admin-login-feature-list[b-0yki17hsta] {
    margin-top: 26px;
    display: grid;
    gap: 12px;
}

[b-0yki17hsta] .admin-login-feature {
    min-height: 38px;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: center;
    color: #dce5f7;
}

[b-0yki17hsta] .admin-login-feature span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #9db0fb;
    background: rgba(130,153,236,.10);
}

[b-0yki17hsta] .admin-login-feature svg {
    width: 15px;
    height: 15px;
}

[b-0yki17hsta] .admin-login-feature strong {
    font-size: 11px;
    font-weight: 750;
}

.admin-login-user-link[b-0yki17hsta] {
    width: fit-content;
    margin-top: 32px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(157,176,251,.35);
    color: #aebfff;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 800;
}

:global(html[data-theme="dark"]) .admin-login-page[b-0yki17hsta] {
    --admin-login-bg: #0c101a;
    --admin-login-surface: rgba(20, 26, 39, .94);
    --admin-login-surface-strong: #151b28;
    --admin-login-text: #edf1f8;
    --admin-login-text-2: #aeb7c7;
    --admin-login-muted: #737e90;
    --admin-login-border: rgba(255,255,255,.065);
    --admin-login-border-strong: rgba(255,255,255,.095);
    --admin-login-primary: #708df1;
    --admin-login-primary-hover: #8099f3;
    --admin-login-primary-soft: rgba(95,128,235,.12);
    --admin-login-shadow: 0 42px 110px rgba(0,0,0,.38);
}

:global(html[data-theme="dark"]) .admin-login-grid[b-0yki17hsta] {
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
}

:global(html[data-theme="dark"]) .admin-login-brand-mark[b-0yki17hsta],
:global(html[data-theme="dark"]) .admin-login-top-button[b-0yki17hsta] {
    border-color: rgba(255,255,255,.075);
    color: #b3bdd0;
    background: rgba(21,27,40,.76);
}

:global(html[data-theme="dark"]) .admin-login-top-button:hover[b-0yki17hsta] {
    color: #91a8fb;
    background: #181f2e;
}

:global(html[data-theme="dark"]) .admin-login-shell[b-0yki17hsta] {
    border-color: rgba(255,255,255,.055);
    background: rgba(9,13,21,.56);
}

:global(html[data-theme="dark"]) .admin-login-field > span[b-0yki17hsta] {
    color: #c6cddd;
}

:global(html[data-theme="dark"]) .admin-login-input-shell[b-0yki17hsta] {
    background: rgba(255,255,255,.035);
}

:global(html[data-theme="dark"]) .admin-login-input-shell:focus-within[b-0yki17hsta] {
    background: rgba(255,255,255,.055);
}

:global(html[data-theme="dark"]) .admin-login-theme-light[b-0yki17hsta] {
    display: none;
}

:global(html[data-theme="dark"]) .admin-login-theme-dark[b-0yki17hsta] {
    display: block;
}

@media (max-width: 900px) {
    .admin-login-shell[b-0yki17hsta] {
        grid-template-columns: 1fr;
        width: min(680px, calc(100% - 36px));
        margin-top: 20px;
    }

    .admin-login-side-card[b-0yki17hsta] {
        min-height: 360px;
    }
}

@media (max-width: 600px) {
    .admin-login-topbar[b-0yki17hsta] {
        width: calc(100% - 28px);
        min-height: 72px;
    }

    .admin-login-brand small[b-0yki17hsta] {
        display: none;
    }

    .admin-login-shell[b-0yki17hsta] {
        width: calc(100% - 24px);
        margin: 12px auto 34px;
        border-radius: 22px;
    }

    .admin-login-card[b-0yki17hsta],
    .admin-login-side-card[b-0yki17hsta] {
        padding: 24px 20px;
    }

    .admin-login-card-heading[b-0yki17hsta] {
        grid-template-columns: 1fr;
    }

    .admin-login-security-mark[b-0yki17hsta] {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .admin-login-side-card[b-0yki17hsta] {
        min-height: 330px;
    }
}

/* Goftito logo in the brand box. */
.admin-login-brand-mark .goftito-mark[b-0yki17hsta] {
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}
/* _content/AITranslationPlatform.Web/Components/Admin/Backups/AdminBackups.razor.rz.scp.css */
.admin-backups[b-56e6txy0ns] { max-width: 1260px; margin: 0 auto; padding: 34px 30px 48px; color: #1a2740; }

.page-header[b-56e6txy0ns] { margin-bottom: 24px; }
.eyebrow[b-56e6txy0ns] { display: block; color: #506de5; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.page-header h1[b-56e6txy0ns] { margin: 8px 0 10px; font-size: 30px; }
.page-header p[b-56e6txy0ns] { margin: 0; color: #73819a; line-height: 1.8; }

.cards[b-56e6txy0ns] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.card[b-56e6txy0ns] { background: #fff; border: 1px solid #e2e8f3; border-radius: 16px; box-shadow: 0 8px 25px rgba(37, 55, 94, .045); padding: 22px; }
.card + .card[b-56e6txy0ns], .cards + .card[b-56e6txy0ns], .card.inspection[b-56e6txy0ns], .card.report[b-56e6txy0ns], .card.files[b-56e6txy0ns] { margin-top: 18px; }
.cards > .card[b-56e6txy0ns] { margin-top: 0; }
.card-heading[b-56e6txy0ns] { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #edf1f7; }
.card-heading h2[b-56e6txy0ns] { font-size: 17px; margin: 0 0 5px; }
.card-heading p[b-56e6txy0ns] { margin: 0; color: #74829a; font-size: 12px; line-height: 1.8; }
.card-icon[b-56e6txy0ns] { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #eaf0ff; color: #4563dd; font-size: 19px; flex: none; }
.card-icon.purple[b-56e6txy0ns] { background: #f2ecff; color: #7b5cdb; }
.card-icon.green[b-56e6txy0ns] { background: #e9f8ef; color: #1f8a52; }
.card-icon.amber[b-56e6txy0ns] { background: #fff0d6; color: #ba7414; }
.card-icon.red[b-56e6txy0ns] { background: #fff0f1; color: #b83442; }

.scope[b-56e6txy0ns] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 16px; }
.scope h3[b-56e6txy0ns] { margin: 0 0 8px; font-size: 13px; color: #3d4c65; }
.scope ul[b-56e6txy0ns] { margin: 0; padding-inline-start: 18px; color: #5d6b84; font-size: 12px; line-height: 1.9; }

.card-action[b-56e6txy0ns], .upload-form[b-56e6txy0ns], .restore-form[b-56e6txy0ns], .password-form[b-56e6txy0ns], .unlock-form[b-56e6txy0ns] { margin-top: 18px; }
.upload-row[b-56e6txy0ns] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.upload-row input[type="file"][b-56e6txy0ns] { flex: 1 1 220px; min-width: 0; font-size: 12px; color: #3d4c65; }
.upload-form .progress[hidden][b-56e6txy0ns], .upload-form .warning[hidden][b-56e6txy0ns] { display: none; }

button[b-56e6txy0ns] { border: 0; border-radius: 10px; background: #3156db; color: #fff; padding: 11px 18px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(49, 86, 219, .2); }
button.danger[b-56e6txy0ns] { background: #c4384a; box-shadow: 0 8px 18px rgba(196, 56, 74, .2); }
button:disabled[b-56e6txy0ns] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.password-form[b-56e6txy0ns], .unlock-form[b-56e6txy0ns] { display: grid; gap: 10px; max-width: 420px; }
.password-form label[b-56e6txy0ns], .unlock-form label[b-56e6txy0ns] { display: grid; gap: 5px; font-size: 12px; color: #3d4c65; }
.password-form input[b-56e6txy0ns], .unlock-form input[b-56e6txy0ns] { border: 1px solid #d8e0ec; border-radius: 10px; padding: 9px 12px; font: inherit; background: #fff; color: inherit; }
.password-form button[b-56e6txy0ns], .unlock-form button[b-56e6txy0ns] { justify-self: start; }
.password-change[b-56e6txy0ns] { margin-top: 14px; }
.password-change summary[b-56e6txy0ns] { color: #3156db; font-weight: 700; font-size: 12px; cursor: pointer; }

.card.operation[b-56e6txy0ns] { margin-bottom: 18px; }
.card.operation.running[b-56e6txy0ns] { border-color: #c9d6fb; }
.card.operation.failed[b-56e6txy0ns] { border-color: #f3c6cc; }
.progress[b-56e6txy0ns] { margin-top: 16px; }
.progress-label[b-56e6txy0ns] { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #3d4c65; margin-bottom: 8px; }
.progress-track[b-56e6txy0ns] { height: 10px; border-radius: 999px; background: #edf1f7; overflow: hidden; }
.progress-bar[b-56e6txy0ns] { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3156db, #6f8cf0); transition: width .6s ease; }

.facts[b-56e6txy0ns] { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.facts li[b-56e6txy0ns] { background: #f6f8fc; border-radius: 11px; padding: 10px 12px; display: grid; gap: 4px; font-size: 12px; }
.facts li span[b-56e6txy0ns] { color: #74829a; }
.facts li strong[b-56e6txy0ns] { color: #1a2740; font-size: 14px; }

.lock[b-56e6txy0ns] { margin-inline-start: 6px; font-size: 11px; }
.account[b-56e6txy0ns] { display: inline-block; margin-inline-end: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.muted-inline[b-56e6txy0ns] { color: #74829a; font-size: 12px; }
tr.legacy td[b-56e6txy0ns] { color: #8a96ab; }

.warning.strong[b-56e6txy0ns] { display: grid; gap: 10px; border: 1px solid #f0c98a; }
.warning.strong p[b-56e6txy0ns] { margin: 0; }
.warning.strong form button[b-56e6txy0ns] { background: #ba7414; box-shadow: none; }
.notice-inline[b-56e6txy0ns] { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #eaf0ff; color: #2c45a8; font-size: 12px; line-height: 1.8; }

.recovery[b-56e6txy0ns] { margin-top: 14px; }
.recovery summary[b-56e6txy0ns] { color: #3156db; font-weight: 700; font-size: 12px; cursor: pointer; }
.recovery ol[b-56e6txy0ns] { margin: 10px 0 0; padding-inline-start: 20px; color: #5d6b84; font-size: 12px; line-height: 1.9; list-style-type: persian; }

.schedule-form[b-56e6txy0ns] { margin-top: 18px; display: grid; gap: 12px; }
.schedule-form .toggle[b-56e6txy0ns] { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: #3d4c65; cursor: pointer; }
.schedule-form .fields[b-56e6txy0ns] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.schedule-form .fields label[b-56e6txy0ns] { display: grid; gap: 5px; font-size: 12px; color: #3d4c65; }
.schedule-form input[type="number"][b-56e6txy0ns], .schedule-form select[b-56e6txy0ns] { border: 1px solid #d8e0ec; border-radius: 10px; padding: 9px 12px; font: inherit; background: #fff; color: inherit; min-width: 0; }
.schedule-form button[b-56e6txy0ns] { justify-self: start; }
.facts li strong a[b-56e6txy0ns] { color: #3156db; text-decoration: none; overflow-wrap: anywhere; }
.facts li strong a bdi[b-56e6txy0ns], .pruned[b-56e6txy0ns] { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.pruned[b-56e6txy0ns] { display: inline-block; margin-inline-start: 8px; }
.warning small[b-56e6txy0ns] { display: block; margin-top: 4px; opacity: .8; overflow-wrap: anywhere; }

.confirm[b-56e6txy0ns] { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 12px; line-height: 1.8; color: #3d4c65; cursor: pointer; }
.confirm input[b-56e6txy0ns] { margin-top: 5px; flex: none; }

.grid[b-56e6txy0ns] { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12px; }
.grid th[b-56e6txy0ns] { text-align: start; color: #74829a; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #e2e8f3; white-space: nowrap; }
.grid td[b-56e6txy0ns] { padding: 9px 10px; border-bottom: 1px solid #f0f3f8; color: #23324b; vertical-align: top; }
.grid td bdi[b-56e6txy0ns] { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }

.actions[b-56e6txy0ns] { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.actions a[b-56e6txy0ns] { color: #3156db; font-weight: 700; text-decoration: none; }
.actions a:hover[b-56e6txy0ns] { text-decoration: underline; }
.delete summary[b-56e6txy0ns] { color: #c4384a; font-weight: 700; cursor: pointer; list-style: none; }
.delete summary[b-56e6txy0ns]::-webkit-details-marker { display: none; }
.delete form[b-56e6txy0ns] { margin-top: 8px; }
.delete button[b-56e6txy0ns] { padding: 7px 12px; font-size: 11px; }

.secrets[b-56e6txy0ns] { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.secrets li[b-56e6txy0ns] { padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.8; }
.secrets li strong[b-56e6txy0ns] { margin-inline-end: 6px; }
.secrets li.ok[b-56e6txy0ns] { background: #eaf8ef; color: #176e40; }
.secrets li.bad[b-56e6txy0ns] { background: #fff4e5; color: #9a5d0a; }

.muted[b-56e6txy0ns] { margin: 12px 0 0; color: #74829a; font-size: 12px; line-height: 1.8; }
.warning[b-56e6txy0ns] { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #9a5d0a; font-size: 12px; line-height: 1.8; }

.notice[b-56e6txy0ns], .error[b-56e6txy0ns], .loading-state[b-56e6txy0ns] { padding: 13px 15px; border-radius: 11px; margin-bottom: 16px; line-height: 1.8; }
.notice[b-56e6txy0ns] { background: #eaf8ef; color: #176e40; }
.notice a[b-56e6txy0ns] { color: #176e40; font-weight: 800; margin-inline-start: 8px; }
.notice small[b-56e6txy0ns], .error small[b-56e6txy0ns] { display: block; margin-top: 4px; opacity: .8; overflow-wrap: anywhere; }
.error[b-56e6txy0ns] { background: #fff0f1; color: #b83442; }
.loading-state[b-56e6txy0ns] { background: #fff; color: #73819a; border: 1px solid #e2e8f3; }


/* ===== dark ===== */

[data-theme="dark"] .admin-backups[b-56e6txy0ns] { color: #e4ebf8; }
[data-theme="dark"] .page-header p[b-56e6txy0ns],
[data-theme="dark"] .card-heading p[b-56e6txy0ns],
[data-theme="dark"] .muted[b-56e6txy0ns],
[data-theme="dark"] .grid th[b-56e6txy0ns] { color: #8b98b1; }
[data-theme="dark"] .card[b-56e6txy0ns],
[data-theme="dark"] .loading-state[b-56e6txy0ns] { background: #161d2c; border-color: #26324a; box-shadow: none; }
[data-theme="dark"] .card-heading[b-56e6txy0ns] { border-color: #26324a; }
[data-theme="dark"] .card-icon[b-56e6txy0ns] { background: #1b2540; color: #7d97f5; }
[data-theme="dark"] .card-icon.purple[b-56e6txy0ns] { background: #241c3d; color: #a58bf0; }
[data-theme="dark"] .card-icon.green[b-56e6txy0ns] { background: #10281c; color: #5fd598; }
[data-theme="dark"] .card-icon.amber[b-56e6txy0ns] { background: #3a2c12; color: #e2b563; }
[data-theme="dark"] .card-icon.red[b-56e6txy0ns] { background: #3a1820; color: #f08a97; }
[data-theme="dark"] .password-form label[b-56e6txy0ns],
[data-theme="dark"] .unlock-form label[b-56e6txy0ns],
[data-theme="dark"] .progress-label[b-56e6txy0ns] { color: #b6c2d8; }
[data-theme="dark"] .password-form input[b-56e6txy0ns],
[data-theme="dark"] .unlock-form input[b-56e6txy0ns],
[data-theme="dark"] .schedule-form input[type="number"][b-56e6txy0ns],
[data-theme="dark"] .schedule-form select[b-56e6txy0ns] { background: #0f1522; border-color: #26324a; }
[data-theme="dark"] .schedule-form .toggle[b-56e6txy0ns],
[data-theme="dark"] .schedule-form .fields label[b-56e6txy0ns] { color: #b6c2d8; }
[data-theme="dark"] .facts li strong a[b-56e6txy0ns] { color: #7d97f5; }
[data-theme="dark"] .password-change summary[b-56e6txy0ns],
[data-theme="dark"] .recovery summary[b-56e6txy0ns] { color: #7d97f5; }
[data-theme="dark"] .recovery ol[b-56e6txy0ns] { color: #c9d3e6; }
[data-theme="dark"] .notice-inline[b-56e6txy0ns] { background: #1b2540; color: #9fb4f7; }
[data-theme="dark"] .warning.strong[b-56e6txy0ns] { border-color: #6b4e1d; }
[data-theme="dark"] tr.legacy td[b-56e6txy0ns],
[data-theme="dark"] .muted-inline[b-56e6txy0ns] { color: #6f7c94; }
[data-theme="dark"] .progress-track[b-56e6txy0ns] { background: #26324a; }
[data-theme="dark"] .facts li[b-56e6txy0ns] { background: #1b2336; }
[data-theme="dark"] .facts li strong[b-56e6txy0ns] { color: #e4ebf8; }
[data-theme="dark"] .card.operation.running[b-56e6txy0ns] { border-color: #2f3f66; }
[data-theme="dark"] .card.operation.failed[b-56e6txy0ns] { border-color: #5a2630; }
[data-theme="dark"] .scope h3[b-56e6txy0ns],
[data-theme="dark"] .confirm[b-56e6txy0ns],
[data-theme="dark"] .upload-row input[type="file"][b-56e6txy0ns] { color: #b6c2d8; }
[data-theme="dark"] .scope ul[b-56e6txy0ns],
[data-theme="dark"] .grid td[b-56e6txy0ns] { color: #c9d3e6; }
[data-theme="dark"] .grid th[b-56e6txy0ns],
[data-theme="dark"] .grid td[b-56e6txy0ns] { border-color: #26324a; }
[data-theme="dark"] .actions a[b-56e6txy0ns] { color: #7d97f5; }
[data-theme="dark"] .warning[b-56e6txy0ns],
[data-theme="dark"] .secrets li.bad[b-56e6txy0ns] { background: #3a2c12; color: #e2b563; }
[data-theme="dark"] .secrets li.ok[b-56e6txy0ns],
[data-theme="dark"] .notice[b-56e6txy0ns] { background: #10281c; color: #5fd598; }
[data-theme="dark"] .notice a[b-56e6txy0ns] { color: #5fd598; }
[data-theme="dark"] .error[b-56e6txy0ns] { background: #3a1820; color: #f08a97; }


@media (max-width: 900px) {
    .cards[b-56e6txy0ns], .scope[b-56e6txy0ns] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .schedule-form .fields[b-56e6txy0ns] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .admin-backups[b-56e6txy0ns] { padding: 22px 16px; }
    .grid[b-56e6txy0ns] { display: block; overflow-x: auto; }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Billing/AdminBilling.razor.rz.scp.css */
.admin-billing[b-5fa6zg8vmg]{max-width:1480px;margin:auto;padding:26px;color:var(--admin-text,#172033)}.billing-hero[b-5fa6zg8vmg]{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:22px}.billing-hero span[b-5fa6zg8vmg]{color:#526ee8;font-size:12px;font-weight:800;letter-spacing:.1em}.billing-hero h1[b-5fa6zg8vmg]{margin:8px 0;font-size:30px}.billing-hero p[b-5fa6zg8vmg]{max-width:750px;color:#64748b;line-height:1.9}.billing-hero nav[b-5fa6zg8vmg]{display:flex;gap:7px;white-space:nowrap}.billing-hero nav a[b-5fa6zg8vmg],.billing-filters button[b-5fa6zg8vmg],.billing-filters a[b-5fa6zg8vmg]{border:1px solid #dbe3f2;border-radius:10px;padding:9px 12px;background:#fff;color:#34415e;text-decoration:none;font:inherit;font-size:13px;cursor:pointer}.billing-hero nav a.active[b-5fa6zg8vmg],.billing-filters button[b-5fa6zg8vmg]{background:#3156db;color:#fff;border-color:#3156db}.billing-filters[b-5fa6zg8vmg]{display:flex;align-items:end;flex-wrap:wrap;gap:10px;padding:14px;background:#fff;border:1px solid #e4e9f3;border-radius:15px;margin-bottom:16px}.billing-filters label[b-5fa6zg8vmg]{display:grid;gap:5px;font-size:12px;font-weight:700;color:#526078}.billing-filters input[b-5fa6zg8vmg],.billing-filters select[b-5fa6zg8vmg]{min-height:36px;border:1px solid #dbe3f2;border-radius:8px;padding:0 9px;background:#fbfcff;color:#18243a;font:inherit}.billing-metrics[b-5fa6zg8vmg]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.billing-metrics article[b-5fa6zg8vmg],.billing-panel[b-5fa6zg8vmg]{background:#fff;border:1px solid #e4e9f3;border-radius:16px;padding:16px}.billing-metrics span[b-5fa6zg8vmg],.billing-metrics small[b-5fa6zg8vmg]{display:block;color:#71809a;font-size:12px}.billing-metrics strong[b-5fa6zg8vmg]{display:block;font-size:22px;margin:9px 0;color:#172033}.billing-panel[b-5fa6zg8vmg]{margin-bottom:16px}.billing-panel h2[b-5fa6zg8vmg]{font-size:17px;margin:0 0 12px}.panel-heading[b-5fa6zg8vmg]{display:flex;justify-content:space-between;gap:16px}.panel-heading p[b-5fa6zg8vmg]{font-size:12px;color:#71809a;margin:0 0 12px}.billing-panel-link[b-5fa6zg8vmg]{align-self:flex-start;border:1px solid #cdd9ef;border-radius:9px;padding:8px 11px;background:#fbfcff;color:#3555bc;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}.billing-trend[b-5fa6zg8vmg]{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.billing-trend article[b-5fa6zg8vmg]{padding:10px;background:#f7f9fe;border-radius:10px}.billing-trend strong[b-5fa6zg8vmg],.billing-trend span[b-5fa6zg8vmg],.billing-trend small[b-5fa6zg8vmg]{display:block}.billing-trend strong[b-5fa6zg8vmg]{font-size:13px}.billing-trend span[b-5fa6zg8vmg],.billing-trend small[b-5fa6zg8vmg]{font-size:11px;color:#71809a;margin-top:4px}.billing-grid[b-5fa6zg8vmg]{display:grid;grid-template-columns:1fr 1fr;gap:16px}.billing-table[b-5fa6zg8vmg]{display:grid;gap:6px;max-height:570px;overflow:auto}.billing-table>div[b-5fa6zg8vmg]{display:grid;grid-template-columns:1.15fr .8fr .8fr .8fr 1fr;gap:8px;align-items:center;padding:10px;background:#f8faff;border-radius:9px;font-size:12px}.billing-table strong[b-5fa6zg8vmg],.billing-table small[b-5fa6zg8vmg]{display:block}.billing-table small[b-5fa6zg8vmg]{font-size:10px;color:#71809a;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status[b-5fa6zg8vmg]{font-weight:800}.status.paid[b-5fa6zg8vmg]{color:#158143}.status.failed[b-5fa6zg8vmg]{color:#c23945}.status.pending[b-5fa6zg8vmg]{color:#9a6500}.positive[b-5fa6zg8vmg]{color:#138242;font-weight:800}.negative[b-5fa6zg8vmg]{color:#c23945;font-weight:800}.table-empty[b-5fa6zg8vmg],.billing-state[b-5fa6zg8vmg]{padding:30px;color:#71809a;text-align:center}@media(max-width:1050px){.billing-metrics[b-5fa6zg8vmg]{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-grid[b-5fa6zg8vmg]{grid-template-columns:1fr}}@media(max-width:650px){.admin-billing[b-5fa6zg8vmg]{padding:16px}.billing-hero[b-5fa6zg8vmg]{align-items:stretch;flex-direction:column}.billing-metrics[b-5fa6zg8vmg]{grid-template-columns:1fr}.billing-table>div[b-5fa6zg8vmg]{grid-template-columns:1fr 1fr}.billing-table>div span:last-child[b-5fa6zg8vmg]{grid-column:1/-1}.billing-hero nav[b-5fa6zg8vmg]{overflow:auto}.panel-heading[b-5fa6zg8vmg]{flex-direction:column}.billing-panel-link[b-5fa6zg8vmg]{align-self:flex-start}}
/* _content/AITranslationPlatform.Web/Components/Admin/Billing/AdminCreditPackages.razor.rz.scp.css */
.credit-packages-page[b-mioi4ul9j5]{max-width:1600px;margin:0 auto;padding:28px;color:var(--admin-text,#16213a)}
.packages-hero[b-mioi4ul9j5]{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 20px}.packages-hero>div[b-mioi4ul9j5]{max-width:910px}.packages-hero span[b-mioi4ul9j5],.section-heading>div>span[b-mioi4ul9j5]{display:block;color:#526ee8;font-size:11px;font-weight:800;letter-spacing:.12em}.packages-hero h1[b-mioi4ul9j5]{margin:8px 0 10px;font-size:30px;line-height:1.2}.packages-hero p[b-mioi4ul9j5]{margin:0;color:#64748b;line-height:1.9}.primary-action[b-mioi4ul9j5],.save-package[b-mioi4ul9j5]{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:1px solid #3156db;border-radius:11px;background:#3156db;color:#fff;text-decoration:none;font:inherit;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(49,86,219,.17)}
.page-notice[b-mioi4ul9j5],.page-error[b-mioi4ul9j5],.loading-state[b-mioi4ul9j5]{margin-bottom:16px;padding:14px 16px;border-radius:13px;border:1px solid}.page-notice[b-mioi4ul9j5]{background:#ebf9f0;border-color:#c3ead1;color:#157143}.page-notice small[b-mioi4ul9j5]{margin-inline-start:9px;opacity:.7}.page-error[b-mioi4ul9j5]{background:#fff2f3;border-color:#ffd2d6;color:#b42335}.loading-state[b-mioi4ul9j5]{background:#fff;border-color:#e4eaf4;color:#687791;text-align:center}
.package-editor[b-mioi4ul9j5],.packages-panel[b-mioi4ul9j5]{background:var(--admin-card,#fff);border:1px solid #e2e8f3;border-radius:18px;box-shadow:0 8px 24px rgba(32,53,90,.035)}.package-editor[b-mioi4ul9j5]{margin-bottom:18px;padding:20px}.packages-panel[b-mioi4ul9j5]{padding:20px}.section-heading[b-mioi4ul9j5]{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:17px}.section-heading h2[b-mioi4ul9j5]{margin:7px 0;font-size:19px}.section-heading p[b-mioi4ul9j5]{margin:0;color:#71809a;font-size:13px;line-height:1.75}.report-link[b-mioi4ul9j5]{display:inline-flex;padding:9px 12px;border:1px solid #dce4f2;border-radius:10px;color:#40517c;background:#fbfcff;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.report-link:hover[b-mioi4ul9j5]{border-color:#9dafdb;color:#3156db}
.package-table-wrap[b-mioi4ul9j5]{overflow:auto;border:1px solid #e5ebf5;border-radius:14px}.package-table[b-mioi4ul9j5]{min-width:1280px}.package-table-head[b-mioi4ul9j5],.package-row[b-mioi4ul9j5]{display:grid;grid-template-columns:1.7fr .78fr .68fr .78fr 1fr 1.13fr 2.05fr .85fr .74fr 1.2fr;gap:12px;align-items:center}.package-table-head[b-mioi4ul9j5]{padding:12px 14px;background:#f5f7fd;border-bottom:1px solid #e3e9f3;color:#6b7890;font-size:11px;font-weight:800}.package-row[b-mioi4ul9j5]{padding:14px;border-bottom:1px solid #edf1f7;background:#fff;font-size:12px}.package-row:last-child[b-mioi4ul9j5]{border-bottom:0}.package-row:hover[b-mioi4ul9j5]{background:#fcfdff}.package-row>div[b-mioi4ul9j5]{min-width:0}.package-row strong[b-mioi4ul9j5]{display:block;color:#1c2a44;font-size:13px}.package-row small[b-mioi4ul9j5],.package-name span[b-mioi4ul9j5],.package-name code[b-mioi4ul9j5]{display:block;margin-top:3px;color:#71809a;font-size:10px}.package-name code[b-mioi4ul9j5]{width:max-content;max-width:100%;padding:2px 5px;border-radius:5px;background:#f1f4fa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4d5f83}.capability-cells[b-mioi4ul9j5]{display:grid;gap:5px}.badge-group[b-mioi4ul9j5]{display:flex;flex-wrap:wrap;gap:4px}.capability-badge[b-mioi4ul9j5],.status-badge[b-mioi4ul9j5],.featured-badge[b-mioi4ul9j5]{display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:800;line-height:1.2}.capability-badge.quality[b-mioi4ul9j5]{background:#e9edff;color:#3c52bd}.capability-badge.input[b-mioi4ul9j5]{background:#edf8f3;color:#1c7850}.capability-badge.format[b-mioi4ul9j5]{background:#fff4e8;color:#975a16}.capability-badge.size[b-mioi4ul9j5]{background:#eef3ff;color:#3156db}.status-badge.active[b-mioi4ul9j5]{background:#e9f8ee;color:#177442}.status-badge.inactive[b-mioi4ul9j5]{background:#f1f3f7;color:#6d798d}.featured-badge[b-mioi4ul9j5]{background:#fff4d8;color:#926400}.muted[b-mioi4ul9j5]{color:#a0aaba}.row-actions[b-mioi4ul9j5]{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.edit-details[b-mioi4ul9j5]{position:relative}.edit-details>summary[b-mioi4ul9j5],.status-form button[b-mioi4ul9j5]{border:1px solid #d6dfef;border-radius:8px;background:#fff;color:#34466f;padding:7px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}.edit-details>summary[b-mioi4ul9j5]{list-style:none}.edit-details>summary[b-mioi4ul9j5]::-webkit-details-marker{display:none}.edit-details[open]>summary[b-mioi4ul9j5]{background:#eff3ff;border-color:#b8c7ef;color:#3156db}.status-form[b-mioi4ul9j5]{margin:0}.status-form button.deactivate[b-mioi4ul9j5]{color:#b3293a;border-color:#ffc5cd;background:#fffafb}.status-form button.activate[b-mioi4ul9j5]{color:#177442;border-color:#bfe8cf;background:#fbfffd}.edit-drawer[b-mioi4ul9j5]{position:fixed;z-index:110;top:clamp(16px,7vh,76px);left:50%;box-sizing:border-box;width:min(920px,calc(100vw - 40px));max-height:min(86vh,840px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:18px;border:1px solid #ced9ed;border-radius:16px;background:#fff;box-shadow:0 28px 76px rgba(21,37,72,.3);transform:translateX(-50%)}.edit-drawer .package-form[b-mioi4ul9j5]{max-height:none;overflow:visible;padding-inline-end:0}.edit-drawer .form-layout[b-mioi4ul9j5]{grid-template-columns:1fr}.edit-drawer .package-preview[b-mioi4ul9j5]{display:none}
.package-form[b-mioi4ul9j5]{display:grid;gap:16px}.form-layout[b-mioi4ul9j5]{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}.form-section[b-mioi4ul9j5]{border:1px solid #e5ebf5;border-radius:13px;padding:15px;background:#fcfdff}.form-layout>.form-section[b-mioi4ul9j5]{grid-column:1}.form-section-heading[b-mioi4ul9j5]{display:flex;gap:10px;margin-bottom:13px}.form-section-heading>span[b-mioi4ul9j5]{display:flex;width:25px;height:25px;align-items:center;justify-content:center;flex:0 0 auto;border-radius:8px;background:#eaf0ff;color:#3657c8;font-size:10px;font-weight:900}.form-section-heading h3[b-mioi4ul9j5]{margin:0 0 3px;font-size:14px}.form-section-heading p[b-mioi4ul9j5]{margin:0;color:#748198;font-size:11px;line-height:1.6}.field-grid[b-mioi4ul9j5]{display:grid;gap:10px}.field-grid.two-columns[b-mioi4ul9j5]{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.three-columns[b-mioi4ul9j5]{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid+ .field-grid[b-mioi4ul9j5]{margin-top:10px}.field-grid label[b-mioi4ul9j5],.audit-reason[b-mioi4ul9j5]{display:grid;gap:5px;color:#52627c;font-size:11px;font-weight:800}.field-grid input[b-mioi4ul9j5],.field-grid textarea[b-mioi4ul9j5],.audit-reason input[b-mioi4ul9j5]{width:100%;box-sizing:border-box;border:1px solid #d9e2f0;border-radius:9px;background:#fff;color:#1d2b45;font:inherit;font-size:13px;padding:8px 10px;outline:none}.field-grid input[b-mioi4ul9j5]{min-height:38px}.field-grid textarea[b-mioi4ul9j5]{resize:vertical;line-height:1.65}.field-grid input:focus[b-mioi4ul9j5],.field-grid textarea:focus[b-mioi4ul9j5],.audit-reason input:focus[b-mioi4ul9j5]{border-color:#718be7;box-shadow:0 0 0 3px rgba(80,111,222,.1)}
.checkbox-matrix[b-mioi4ul9j5]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.input-matrix[b-mioi4ul9j5]{grid-template-columns:repeat(5,minmax(0,1fr))}.format-matrix[b-mioi4ul9j5]{grid-template-columns:repeat(4,minmax(0,1fr))}.package-upload-limit[b-mioi4ul9j5]{margin-top:12px}.limit-note[b-mioi4ul9j5]{display:grid;gap:4px;align-content:center;padding:10px;border:1px dashed #ccd8ec;border-radius:10px;background:#fff;color:#6f7e96;font-size:10px;line-height:1.55}.limit-note strong[b-mioi4ul9j5]{color:#334666;font-size:11px}.capability-option[b-mioi4ul9j5]{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:10px;border:1px solid #dfe7f4;border-radius:10px;background:#fff;cursor:pointer;transition:.16s ease}.capability-option:hover[b-mioi4ul9j5]{border-color:#afc0e9;background:#fbfcff}.capability-option input[b-mioi4ul9j5]{position:absolute;opacity:0;pointer-events:none}.checkbox-mark[b-mioi4ul9j5]{display:flex;width:18px;height:18px;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid #cbd7ea;border-radius:6px;background:#fff;color:transparent;font-size:12px;font-weight:900}.capability-option input:checked+.checkbox-mark[b-mioi4ul9j5]{border-color:#3156db;background:#3156db;color:#fff}.capability-option strong[b-mioi4ul9j5],.capability-option small[b-mioi4ul9j5]{display:block}.capability-option strong[b-mioi4ul9j5]{color:#293954;font-size:12px}.capability-option small[b-mioi4ul9j5]{margin-top:3px;color:#7a879c;font-size:10px;line-height:1.35}.status-controls[b-mioi4ul9j5]{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-option[b-mioi4ul9j5]{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid #dfe7f4;border-radius:10px;background:#fff;cursor:pointer}.toggle-option input[type=checkbox][b-mioi4ul9j5]{width:17px;height:17px;accent-color:#3156db;margin:1px 0 0}.toggle-option strong[b-mioi4ul9j5],.toggle-option small[b-mioi4ul9j5]{display:block}.toggle-option strong[b-mioi4ul9j5]{color:#293954;font-size:12px}.toggle-option small[b-mioi4ul9j5]{margin-top:3px;color:#7a879c;font-size:10px;line-height:1.4}.audit-reason[b-mioi4ul9j5]{grid-column:1/-1}
.package-preview[b-mioi4ul9j5]{position:sticky;top:18px;grid-column:2;grid-row:1 / span 5;padding:16px;border:1px solid #dce5fb;border-radius:14px;background:linear-gradient(155deg,#f8faff,#edf2ff)}.package-preview>span[b-mioi4ul9j5]{display:block;color:#596fca;font-size:10px;font-weight:900;letter-spacing:.1em}.package-preview h3[b-mioi4ul9j5]{margin:9px 0 5px;font-size:17px}.package-preview>p[b-mioi4ul9j5]{margin:0;color:#687791;font-size:11px;line-height:1.7}.package-preview dl[b-mioi4ul9j5]{display:grid;gap:8px;margin:14px 0}.package-preview dl div[b-mioi4ul9j5]{display:flex;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid #dfe6f5}.package-preview dt[b-mioi4ul9j5]{color:#6e7d98;font-size:11px}.package-preview dd[b-mioi4ul9j5]{margin:0;color:#243554;font-size:11px;font-weight:900}.preview-capabilities[b-mioi4ul9j5]{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.preview-capabilities strong[b-mioi4ul9j5]{display:block;width:100%;font-size:11px;color:#52627c}.preview-capabilities span[b-mioi4ul9j5]{padding:3px 6px;border-radius:6px;background:#fff;color:#3d548b;font-size:10px;font-weight:700}.form-footer[b-mioi4ul9j5]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px}.form-footer>span[b-mioi4ul9j5]{color:#728099;font-size:11px;line-height:1.65}.save-package[b-mioi4ul9j5]{border:0;cursor:pointer}.empty-state[b-mioi4ul9j5]{display:grid;gap:5px;justify-items:center;padding:48px 16px;color:#71809a;text-align:center}.empty-state strong[b-mioi4ul9j5]{color:#42516d}
@media(max-width:1320px){.form-layout[b-mioi4ul9j5]{grid-template-columns:1fr}.package-preview[b-mioi4ul9j5]{position:static;grid-column:1;grid-row:auto}.input-matrix[b-mioi4ul9j5],.format-matrix[b-mioi4ul9j5]{grid-template-columns:repeat(3,minmax(0,1fr))}.package-table[b-mioi4ul9j5]{min-width:1200px}}
@media(max-width:850px){.credit-packages-page[b-mioi4ul9j5]{padding:18px}.packages-hero[b-mioi4ul9j5]{align-items:stretch;flex-direction:column}.primary-action[b-mioi4ul9j5]{align-self:flex-start}.section-heading[b-mioi4ul9j5]{align-items:stretch;flex-direction:column}.report-link[b-mioi4ul9j5]{align-self:flex-start}.field-grid.two-columns[b-mioi4ul9j5],.field-grid.three-columns[b-mioi4ul9j5],.checkbox-matrix[b-mioi4ul9j5],.input-matrix[b-mioi4ul9j5],.format-matrix[b-mioi4ul9j5],.status-controls[b-mioi4ul9j5]{grid-template-columns:1fr 1fr}.edit-drawer[b-mioi4ul9j5]{top:12px;left:12px;width:calc(100vw - 24px);max-height:calc(100vh - 24px);padding:14px;transform:none}.form-footer[b-mioi4ul9j5]{align-items:stretch;flex-direction:column}.save-package[b-mioi4ul9j5]{width:100%}}
@media(max-width:540px){.credit-packages-page[b-mioi4ul9j5]{padding:14px}.packages-hero h1[b-mioi4ul9j5]{font-size:25px}.package-editor[b-mioi4ul9j5],.packages-panel[b-mioi4ul9j5]{padding:14px}.field-grid.two-columns[b-mioi4ul9j5],.field-grid.three-columns[b-mioi4ul9j5],.checkbox-matrix[b-mioi4ul9j5],.input-matrix[b-mioi4ul9j5],.format-matrix[b-mioi4ul9j5],.status-controls[b-mioi4ul9j5]{grid-template-columns:1fr}.package-preview[b-mioi4ul9j5]{display:none}.new-package-editor .package-preview[b-mioi4ul9j5]{display:block}.package-table-wrap[b-mioi4ul9j5]{margin-inline:-2px}.page-notice[b-mioi4ul9j5],.page-error[b-mioi4ul9j5]{font-size:12px}}

html[data-theme="dark"] .credit-packages-page[b-mioi4ul9j5] {
    color: var(--admin-text);
}

html[data-theme="dark"] .package-editor[b-mioi4ul9j5],
html[data-theme="dark"] .packages-panel[b-mioi4ul9j5],
html[data-theme="dark"] .edit-drawer[b-mioi4ul9j5],
html[data-theme="dark"] .loading-state[b-mioi4ul9j5] {
    border-color: var(--admin-line-strong);
    background: var(--admin-surface-elevated);
    box-shadow: none;
}

html[data-theme="dark"] .packages-hero p[b-mioi4ul9j5],
html[data-theme="dark"] .section-heading p[b-mioi4ul9j5],
html[data-theme="dark"] .package-row small[b-mioi4ul9j5],
html[data-theme="dark"] .package-name span[b-mioi4ul9j5],
html[data-theme="dark"] .package-name code[b-mioi4ul9j5],
html[data-theme="dark"] .form-section-heading p[b-mioi4ul9j5],
html[data-theme="dark"] .field-grid label[b-mioi4ul9j5],
html[data-theme="dark"] .audit-reason[b-mioi4ul9j5],
html[data-theme="dark"] .capability-option small[b-mioi4ul9j5],
html[data-theme="dark"] .toggle-option small[b-mioi4ul9j5],
html[data-theme="dark"] .form-footer > span[b-mioi4ul9j5],
html[data-theme="dark"] .empty-state[b-mioi4ul9j5] {
    color: var(--admin-text-2);
}

html[data-theme="dark"] .package-table-wrap[b-mioi4ul9j5],
html[data-theme="dark"] .form-section[b-mioi4ul9j5],
html[data-theme="dark"] .capability-option[b-mioi4ul9j5],
html[data-theme="dark"] .toggle-option[b-mioi4ul9j5],
html[data-theme="dark"] .limit-note[b-mioi4ul9j5] {
    border-color: var(--admin-line-strong);
    background: var(--admin-surface);
}

html[data-theme="dark"] .package-table-head[b-mioi4ul9j5] {
    border-color: var(--admin-line);
    background: rgba(255, 255, 255, .045);
    color: var(--admin-text-2);
}

html[data-theme="dark"] .package-row[b-mioi4ul9j5] {
    border-color: var(--admin-line);
    background: var(--admin-surface-elevated);
}

html[data-theme="dark"] .package-row:hover[b-mioi4ul9j5],
html[data-theme="dark"] .capability-option:hover[b-mioi4ul9j5] {
    background: rgba(120, 147, 243, .075);
}

html[data-theme="dark"] .package-row strong[b-mioi4ul9j5],
html[data-theme="dark"] .capability-option strong[b-mioi4ul9j5],
html[data-theme="dark"] .toggle-option strong[b-mioi4ul9j5],
html[data-theme="dark"] .empty-state strong[b-mioi4ul9j5] {
    color: var(--admin-text);
}

html[data-theme="dark"] .package-name code[b-mioi4ul9j5],
html[data-theme="dark"] .checkbox-mark[b-mioi4ul9j5],
html[data-theme="dark"] .preview-capabilities span[b-mioi4ul9j5],
html[data-theme="dark"] .edit-details > summary[b-mioi4ul9j5],
html[data-theme="dark"] .status-form button[b-mioi4ul9j5],
html[data-theme="dark"] .report-link[b-mioi4ul9j5],
html[data-theme="dark"] .field-grid input[b-mioi4ul9j5],
html[data-theme="dark"] .field-grid textarea[b-mioi4ul9j5],
html[data-theme="dark"] .audit-reason input[b-mioi4ul9j5] {
    border-color: var(--admin-line-strong);
    background: var(--admin-surface);
    color: var(--admin-text);
}

html[data-theme="dark"] .package-preview[b-mioi4ul9j5] {
    border-color: rgba(120, 147, 243, .32);
    background: linear-gradient(155deg, rgba(120, 147, 243, .14), rgba(120, 147, 243, .045));
}

html[data-theme="dark"] .package-preview > p[b-mioi4ul9j5],
html[data-theme="dark"] .package-preview dt[b-mioi4ul9j5],
html[data-theme="dark"] .preview-capabilities strong[b-mioi4ul9j5] {
    color: var(--admin-text-2);
}

html[data-theme="dark"] .package-preview h3[b-mioi4ul9j5],
html[data-theme="dark"] .package-preview dd[b-mioi4ul9j5] {
    color: var(--admin-text);
}

html[data-theme="dark"] .page-notice[b-mioi4ul9j5] {
    border-color: rgba(74, 192, 133, .28);
    background: rgba(39, 132, 103, .15);
    color: #8edcbb;
}

html[data-theme="dark"] .page-error[b-mioi4ul9j5] {
    border-color: rgba(224, 105, 117, .3);
    background: rgba(201, 74, 82, .14);
    color: #ffb4bc;
}


/* =====================================================
   THE STARTER PACKAGE

   Set apart from the sold packages on purpose: it is the
   one card on this page that has no price, and an
   administrator should be able to see that at a glance
   rather than read the form to find out.
   ===================================================== */

.free-package-editor[b-mioi4ul9j5] {
    border-color: #cfe3d6;
    background: linear-gradient(155deg, #fbfffc, #f2faf5);
}

.free-package-editor .section-heading > div > span[b-mioi4ul9j5] {
    color: #1c7850;
}

.free-package-empty[b-mioi4ul9j5] {
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px dashed #bcd8c7;
    border-radius: 10px;
    background: #fff;
    color: #5d7568;
    font-size: 12px;
    line-height: 1.7;
}

/* the price slot, saying plainly that there is no price */
.free-price-note[b-mioi4ul9j5] {
    display: grid;
    gap: 4px;
    align-content: center;
    padding: 10px;
    border: 1px dashed #bcd8c7;
    border-radius: 10px;
    background: #fff;
}

.free-price-note > span[b-mioi4ul9j5] {
    color: #52627c;
    font-size: 11px;
    font-weight: 800;
}

.free-price-note > strong[b-mioi4ul9j5] {
    color: #177442;
    font-size: 15px;
}

.free-price-note > small[b-mioi4ul9j5] {
    color: #7a879c;
    font-size: 10px;
    line-height: 1.5;
}

html[data-theme="dark"] .free-package-editor[b-mioi4ul9j5] {
    border-color: var(--admin-line-strong);
    background: var(--admin-surface-elevated);
}

html[data-theme="dark"] .free-package-empty[b-mioi4ul9j5],
html[data-theme="dark"] .free-price-note[b-mioi4ul9j5] {
    border-color: var(--admin-line-strong);
    background: var(--admin-surface);
    color: var(--admin-text-muted, #9aa7b8);
}

html[data-theme="dark"] .free-price-note > span[b-mioi4ul9j5],
html[data-theme="dark"] .free-price-note > strong[b-mioi4ul9j5] {
    color: var(--admin-text);
}
/* _content/AITranslationPlatform.Web/Components/Admin/Billing/AdminPaymentGateway.razor.rz.scp.css */
.admin-payment-gateway[b-zeghcvij3h] {
    max-width: 1260px;
    margin: 0 auto;
    padding: 34px 30px 48px;
    color: #1a2740;
}

.page-header[b-zeghcvij3h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 26px;
}

.eyebrow[b-zeghcvij3h] {
    display: block;
    color: #506de5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.page-header h1[b-zeghcvij3h] {
    margin: 8px 0 10px;
    font-size: 30px;
}

.page-header p[b-zeghcvij3h] {
    margin: 0;
    color: #73819a;
    max-width: 70ch;
    line-height: 1.75;
}

.status-badge[b-zeghcvij3h] {
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge span[b-zeghcvij3h] {
    margin-inline-end: 6px;
}

.status-badge.is-live[b-zeghcvij3h] {
    border: 1px solid #cdebdc;
    background: #f0fbf5;
    color: #19774b;
}

.status-badge.is-off[b-zeghcvij3h] {
    border: 1px solid #e6dcc4;
    background: #fffaf3;
    color: #92651a;
}

.reason-card[b-zeghcvij3h] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fffaf3;
    border: 1px solid #f3dfbd;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.reason-icon[b-zeghcvij3h] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff0d6;
    color: #ba7414;
    font-weight: 900;
}

.reason-card strong[b-zeghcvij3h] {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.reason-card p[b-zeghcvij3h] {
    margin: 0;
    color: #7d6b4c;
    font-size: 12px;
    line-height: 1.7;
}

.setting-cards[b-zeghcvij3h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.setting-card[b-zeghcvij3h],
.audit-card[b-zeghcvij3h],
.test-card[b-zeghcvij3h] {
    background: #fff;
    border: 1px solid #e2e8f3;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(37,55,94,.045);
    padding: 22px;
}

.card-heading[b-zeghcvij3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f7;
}

.card-heading h2[b-zeghcvij3h] {
    font-size: 17px;
    margin: 0 0 5px;
}

.card-heading p[b-zeghcvij3h] {
    margin: 0;
    color: #74829a;
    font-size: 12px;
    line-height: 1.7;
}

.card-icon[b-zeghcvij3h] {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #eaf0ff;
    color: #4563dd;
    font-size: 20px;
}

.card-icon.purple[b-zeghcvij3h] {
    background: #f2ecff;
    color: #7b5cdb;
}

.card-icon.green[b-zeghcvij3h] {
    background: #e9f8ef;
    color: #1f8a52;
}

.fields[b-zeghcvij3h] {
    display: grid;
    gap: 17px;
    padding-top: 19px;
}

.fields label[b-zeghcvij3h] {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
}

.fields label > span[b-zeghcvij3h] {
    color: #3d4c65;
}

.fields small[b-zeghcvij3h] {
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}

.fields input[b-zeghcvij3h],
.fields select[b-zeghcvij3h],
.fields textarea[b-zeghcvij3h] {
    box-sizing: border-box;
    width: 100%;
    padding: 0 11px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.fields input[b-zeghcvij3h],
.fields select[b-zeghcvij3h] {
    height: 40px;
}

.fields textarea[b-zeghcvij3h] {
    padding: 11px;
    line-height: 1.7;
    resize: vertical;
}

.fields input:focus[b-zeghcvij3h],
.fields select:focus[b-zeghcvij3h],
.fields textarea:focus[b-zeghcvij3h] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.provider-row[b-zeghcvij3h] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}

.provider-row > span[b-zeghcvij3h] {
    color: #3d4c65;
}

.provider-row b[b-zeghcvij3h] {
    padding: 3px 10px;
    border-radius: 100px;
    background: #eef2ff;
    color: #4965dd;
    font-size: 12px;
}

.provider-row small[b-zeghcvij3h] {
    grid-column: 1 / -1;
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}

.merchant-id b.installed[b-zeghcvij3h] {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 100px;
    background: #eef2ff;
    color: #4965dd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.mode-block[b-zeghcvij3h] {
    display: grid;
    gap: 15px;
    padding: 16px;
    border: 1px dashed #dde4f1;
    border-radius: 12px;
    background: #fbfcff;
}

.mode-block h3[b-zeghcvij3h] {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: #4c5b74;
    letter-spacing: .02em;
}

.toggle-row[b-zeghcvij3h] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
}

.toggle-row > span[b-zeghcvij3h] {
    display: grid;
    gap: 4px;
}

.toggle-row strong[b-zeghcvij3h] {
    font-size: 13px;
}

.toggle-row small[b-zeghcvij3h] {
    color: #7c899f;
    font-size: 11px;
    line-height: 1.5;
}

.toggle-row input[b-zeghcvij3h] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-row i[b-zeghcvij3h] {
    position: relative;
    display: block;
    flex: none;
    width: 42px;
    height: 23px;
    background: #cbd4e2;
    border-radius: 100px;
    transition: .2s;
}

.toggle-row i[b-zeghcvij3h]:after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    inset-inline-start: 3px;
    box-shadow: 0 1px 3px #889;
    transition: .2s;
}

.toggle-row input:checked + i[b-zeghcvij3h] {
    background: #4867e7;
}

.toggle-row input:checked + i[b-zeghcvij3h]:after {
    inset-inline-start: 22px;
}

.toggle-row.danger input:checked + i[b-zeghcvij3h] {
    background: #d9534f;
}

.audit-card[b-zeghcvij3h] {
    margin-top: 18px;
}

.audit-card label[b-zeghcvij3h] {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #3d4c65;
}

.audit-card input[b-zeghcvij3h] {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 11px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.audit-card input:focus[b-zeghcvij3h] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.form-footer[b-zeghcvij3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.form-footer p[b-zeghcvij3h] {
    margin: 0;
    color: #8190a7;
    font-size: 12px;
    line-height: 1.7;
}

.form-footer button[b-zeghcvij3h] {
    flex: none;
    border: 0;
    border-radius: 10px;
    background: #3156db;
    color: #fff;
    padding: 12px 18px;
    font: inherit;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(49,86,219,.2);
    cursor: pointer;
}

.form-footer button span[b-zeghcvij3h] {
    font-size: 16px;
    margin-inline-end: 5px;
}

.test-card[b-zeghcvij3h] {
    margin-top: 18px;
}

.test-form[b-zeghcvij3h] {
    display: flex;
    gap: 10px;
    padding-top: 19px;
}

.test-form input[b-zeghcvij3h] {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    outline: none;
    direction: ltr;
    text-align: start;
}

.test-form input:focus[b-zeghcvij3h] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.test-form button[b-zeghcvij3h] {
    flex: none;
    border: 0;
    border-radius: 10px;
    background: #1f8a52;
    color: #fff;
    padding: 0 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.last-run[b-zeghcvij3h] {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
}

.last-run.ok[b-zeghcvij3h] {
    color: #19774b;
}

.last-run.bad[b-zeghcvij3h] {
    color: #b83442;
}

.last-run span[b-zeghcvij3h] {
    color: #8793a8;
}

.notice[b-zeghcvij3h],
.error[b-zeghcvij3h],
.loading-state[b-zeghcvij3h] {
    padding: 13px 15px;
    border-radius: 11px;
    margin-bottom: 16px;
    line-height: 1.7;
}

.notice small[b-zeghcvij3h],
.error small[b-zeghcvij3h] {
    display: block;
    margin-top: 5px;
    opacity: .8;
    font-size: 11px;
}

.notice[b-zeghcvij3h] {
    background: #eaf8ef;
    color: #176e40;
}

.error[b-zeghcvij3h] {
    background: #fff0f1;
    color: #b83442;
}

.loading-state[b-zeghcvij3h] {
    background: #fff;
    color: #73819a;
    border: 1px solid #e2e8f3;
}


/* =====================================================
   DARK
   ===================================================== */

[data-theme="dark"] .admin-payment-gateway[b-zeghcvij3h] {
    color: #dbe3f2;
}

[data-theme="dark"] .page-header p[b-zeghcvij3h],
[data-theme="dark"] .card-heading p[b-zeghcvij3h],
[data-theme="dark"] .fields small[b-zeghcvij3h],
[data-theme="dark"] .form-footer p[b-zeghcvij3h],
[data-theme="dark"] .toggle-row small[b-zeghcvij3h],
[data-theme="dark"] .last-run span[b-zeghcvij3h] {
    color: #8b98b1;
}

[data-theme="dark"] .setting-card[b-zeghcvij3h],
[data-theme="dark"] .audit-card[b-zeghcvij3h],
[data-theme="dark"] .test-card[b-zeghcvij3h],
[data-theme="dark"] .loading-state[b-zeghcvij3h] {
    background: #161d2c;
    border-color: #26314a;
    box-shadow: none;
}

[data-theme="dark"] .card-heading[b-zeghcvij3h] {
    border-bottom-color: #26314a;
}

[data-theme="dark"] .fields label > span[b-zeghcvij3h],
[data-theme="dark"] .audit-card label[b-zeghcvij3h],
[data-theme="dark"] .mode-block h3[b-zeghcvij3h] {
    color: #b6c2d8;
}

[data-theme="dark"] .fields input[b-zeghcvij3h],
[data-theme="dark"] .fields select[b-zeghcvij3h],
[data-theme="dark"] .fields textarea[b-zeghcvij3h],
[data-theme="dark"] .audit-card input[b-zeghcvij3h],
[data-theme="dark"] .test-form input[b-zeghcvij3h] {
    background: #101623;
    border-color: #2b3752;
    color: #e4ebf8;
}

[data-theme="dark"] .fields input:focus[b-zeghcvij3h],
[data-theme="dark"] .fields select:focus[b-zeghcvij3h],
[data-theme="dark"] .fields textarea:focus[b-zeghcvij3h],
[data-theme="dark"] .audit-card input:focus[b-zeghcvij3h],
[data-theme="dark"] .test-form input:focus[b-zeghcvij3h] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px rgba(87,115,231,.18);
}

[data-theme="dark"] .mode-block[b-zeghcvij3h] {
    background: #121926;
    border-color: #2b3752;
}

[data-theme="dark"] .toggle-row i[b-zeghcvij3h] {
    background: #38455f;
}

[data-theme="dark"] .status-badge.is-live[b-zeghcvij3h] {
    background: #10281c;
    border-color: #1f5138;
    color: #5fd598;
}

[data-theme="dark"] .status-badge.is-off[b-zeghcvij3h],
[data-theme="dark"] .reason-card[b-zeghcvij3h] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #e2b563;
}

[data-theme="dark"] .reason-card p[b-zeghcvij3h] {
    color: #c2a273;
}

[data-theme="dark"] .reason-icon[b-zeghcvij3h] {
    background: #3a2c12;
    color: #e2b563;
}

[data-theme="dark"] .card-icon[b-zeghcvij3h] {
    background: #1b2540;
    color: #7d97f5;
}

[data-theme="dark"] .card-icon.purple[b-zeghcvij3h] {
    background: #241c3d;
    color: #a58bf0;
}

[data-theme="dark"] .card-icon.green[b-zeghcvij3h] {
    background: #10281c;
    color: #5fd598;
}

[data-theme="dark"] .merchant-id b.installed[b-zeghcvij3h],
[data-theme="dark"] .provider-row b[b-zeghcvij3h] {
    background: #1b2540;
    color: #7d97f5;
}

[data-theme="dark"] .provider-row > span[b-zeghcvij3h] {
    color: #b6c2d8;
}

[data-theme="dark"] .provider-row small[b-zeghcvij3h] {
    color: #8b98b1;
}

[data-theme="dark"] .notice[b-zeghcvij3h] {
    background: #10281c;
    color: #5fd598;
}

[data-theme="dark"] .error[b-zeghcvij3h] {
    background: #2a1418;
    color: #f08a95;
}

[data-theme="dark"] .last-run.ok[b-zeghcvij3h] {
    color: #5fd598;
}

[data-theme="dark"] .last-run.bad[b-zeghcvij3h] {
    color: #f08a95;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 850px) {
    .setting-cards[b-zeghcvij3h] {
        grid-template-columns: 1fr;
    }

    .page-header[b-zeghcvij3h] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .admin-payment-gateway[b-zeghcvij3h] {
        padding: 22px 16px;
    }

    .form-footer[b-zeghcvij3h],
    .test-form[b-zeghcvij3h] {
        flex-direction: column;
        align-items: stretch;
    }

    .test-form button[b-zeghcvij3h] {
        height: 42px;
    }
}

/* =====================================================
   DELIVERY DIAGNOSTICS
   ===================================================== */

.diagnostics-form[b-zeghcvij3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #edf1f7;
}

.diagnostics-form button[b-zeghcvij3h] {
    flex: none;
    border: 1px solid #d8dcfb;
    border-radius: 10px;
    background: #f6f7ff;
    color: #4a63d8;
    padding: 10px 15px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.diagnostics-form button:hover[b-zeghcvij3h] {
    background: #eef1ff;
}

.diagnostics-form small[b-zeghcvij3h] {
    color: #8793a8;
    font-size: 11px;
}

.diagnostics-result[b-zeghcvij3h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #e2e8f3;
    border-radius: 12px;
    background: #fbfcff;
}

.diagnostics-result > div[b-zeghcvij3h] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.diagnostics-result span[b-zeghcvij3h] {
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 700;
}

.diagnostics-result strong[b-zeghcvij3h] {
    font-size: 13px;
    color: #26304a;
}

.diagnostics-result strong.ok[b-zeghcvij3h] {
    color: #19774b;
}

.diagnostics-result strong.bad[b-zeghcvij3h] {
    color: #b83442;
}

.diagnostics-result em[b-zeghcvij3h],
.diagnostics-note[b-zeghcvij3h] {
    font-style: normal;
    font-size: 10.5px;
    color: #8793a8;
    line-height: 1.7;
}

.diagnostics-hint[b-zeghcvij3h] {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #f3dfbd;
    border-radius: 11px;
    background: #fffaf3;
    color: #7d6b4c;
    font-size: 11.5px;
    line-height: 1.8;
}

[data-theme="dark"] .diagnostics-form[b-zeghcvij3h] {
    border-top-color: #26314a;
}

[data-theme="dark"] .diagnostics-form button[b-zeghcvij3h] {
    background: #161c2e;
    border-color: #2c3556;
    color: #8ba3f7;
}

[data-theme="dark"] .diagnostics-result[b-zeghcvij3h] {
    background: #121926;
    border-color: #26314a;
}

[data-theme="dark"] .diagnostics-result strong[b-zeghcvij3h] {
    color: #dfe6f6;
}

[data-theme="dark"] .diagnostics-result strong.ok[b-zeghcvij3h] {
    color: #5fd598;
}

[data-theme="dark"] .diagnostics-result strong.bad[b-zeghcvij3h] {
    color: #f08a95;
}

[data-theme="dark"] .diagnostics-result span[b-zeghcvij3h],
[data-theme="dark"] .diagnostics-result em[b-zeghcvij3h],
[data-theme="dark"] .diagnostics-note[b-zeghcvij3h],
[data-theme="dark"] .diagnostics-form small[b-zeghcvij3h] {
    color: #8b98b1;
}

[data-theme="dark"] .diagnostics-hint[b-zeghcvij3h] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #c2a273;
}

@media (max-width: 620px) {
    .diagnostics-result[b-zeghcvij3h] {
        grid-template-columns: 1fr;
    }

    .diagnostics-form[b-zeghcvij3h] {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================================
   PAYMENT-SPECIFIC
   ===================================================== */

.status-badge.is-test[b-zeghcvij3h] {
    border: 1px solid #e6dcc4;
    background: #fffaf3;
    color: #92651a;
}

.reason-card ul[b-zeghcvij3h] {
    margin: 6px 0 0;
    padding-inline-start: 18px;
    color: #7d6b4c;
    font-size: 12px;
    line-height: 1.9;
}

.reason-card:not(.is-blocking)[b-zeghcvij3h] {
    border-color: #d8dcfb;
    background: linear-gradient(180deg, #f6f7ff 0%, #fbfbff 100%);
}

.reason-card:not(.is-blocking) .reason-icon[b-zeghcvij3h] {
    background: #e7ebff;
    color: #4a63d8;
}

.reason-card:not(.is-blocking) p[b-zeghcvij3h] {
    color: #77819a;
}

.toggle-row.is-locked[b-zeghcvij3h] {
    opacity: .55;
    cursor: not-allowed;
}

[data-theme="dark"] .status-badge.is-test[b-zeghcvij3h] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #e2b563;
}

[data-theme="dark"] .reason-card ul[b-zeghcvij3h] {
    color: #c2a273;
}

[data-theme="dark"] .reason-card:not(.is-blocking)[b-zeghcvij3h] {
    border-color: #2c3556;
    background: #161c2e;
}

[data-theme="dark"] .reason-card:not(.is-blocking) .reason-icon[b-zeghcvij3h] {
    background: #1e2745;
    color: #8ba3f7;
}

[data-theme="dark"] .reason-card:not(.is-blocking) p[b-zeghcvij3h] {
    color: #8b98b1;
}

/* ---- payment mode: one control, three states ---- */

.mode-choice[b-zeghcvij3h] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.mode-choice legend[b-zeghcvij3h] {
    padding: 0 0 8px;
    color: #3d4c65;
    font-size: 12px;
    font-weight: 700;
}

.mode-choice label[b-zeghcvij3h] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid #dfe4ee;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.mode-choice label:hover[b-zeghcvij3h] {
    border-color: #b9c4dd;
}

.mode-choice label.is-selected[b-zeghcvij3h] {
    border-color: #5773e7;
    background: #f6f8ff;
}

.mode-choice label.is-locked[b-zeghcvij3h] {
    background: #f5f6f9;
    cursor: not-allowed;
    opacity: .62;
}

.mode-choice input[b-zeghcvij3h] {
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: #5773e7;
}

.mode-choice strong[b-zeghcvij3h] {
    display: block;
    color: #1f2a3d;
    font-size: 13px;
    font-weight: 700;
}

.mode-choice small[b-zeghcvij3h] {
    display: block;
    margin-top: 3px;
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}
/* _content/AITranslationPlatform.Web/Components/Admin/Cache/AdminTranslationCache.razor.rz.scp.css */
.admin-cache[b-xh5lztvvic]{max-width:1200px;margin:auto;padding:26px}.admin-cache span[b-xh5lztvvic]{color:#71809a}.metrics[b-xh5lztvvic]{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}.metrics article[b-xh5lztvvic],.panel[b-xh5lztvvic]{padding:16px;border:1px solid #e2e8f3;border-radius:14px;background:#fff}.metrics strong[b-xh5lztvvic]{display:block;font-size:21px;margin-top:8px}.pair[b-xh5lztvvic]{display:flex;justify-content:space-between;padding:10px;background:#f8faff;margin:6px 0;border-radius:8px}.warning[b-xh5lztvvic]{background:#fff9ed}.warning button[b-xh5lztvvic]{padding:9px 13px;border:0;border-radius:8px;background:#c2410c;color:#fff}@media(max-width:800px){.metrics[b-xh5lztvvic]{grid-template-columns:repeat(2,1fr)}}
/* _content/AITranslationPlatform.Web/Components/Admin/Dashboard/AdminDashboard.razor.rz.scp.css */
.admin-dashboard-page[b-2d1zp7kp82] {
    display: grid;
    gap: 24px;
}

.admin-dashboard-hero[b-2d1zp7kp82] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 32px;
    border: 1px solid var(--admin-line);
    border-radius: 24px;
    background: radial-gradient(circle at 90% 0%, rgba(24, 68, 198, .08), transparent 32%), var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

    .admin-dashboard-hero[b-2d1zp7kp82]::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        inset-inline-end: -90px;
        inset-block-end: -140px;
        border: 1px solid rgba(24, 68, 198, .08);
        border-radius: 50%;
        pointer-events: none;
    }

.admin-dashboard-hero-copy[b-2d1zp7kp82] {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.admin-dashboard-eyebrow[b-2d1zp7kp82],
.admin-section-heading span[b-2d1zp7kp82],
.admin-card-heading > div > span[b-2d1zp7kp82],
.admin-metric-group-header small[b-2d1zp7kp82] {
    color: var(--admin-accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
}

.admin-dashboard-hero h1[b-2d1zp7kp82] {
    margin: 9px 0 0;
    color: var(--admin-text);
    font-size: clamp(25px, 2.5vw, 38px);
    line-height: 1.24;
    letter-spacing: -.035em;
}

.admin-dashboard-hero p[b-2d1zp7kp82] {
    max-width: 750px;
    margin: 12px 0 0;
    color: var(--admin-text-2);
    font-size: 13px;
    line-height: 1.85;
}

.admin-dashboard-hero-actions[b-2d1zp7kp82] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-dashboard-live-badge[b-2d1zp7kp82],
.admin-refresh-button[b-2d1zp7kp82] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 800;
}

.admin-dashboard-live-badge[b-2d1zp7kp82] {
    border: 1px solid rgba(39, 132, 103, .13);
    color: var(--admin-success);
    background: rgba(39, 132, 103, .07);
}

    .admin-dashboard-live-badge small[b-2d1zp7kp82] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 700;
    }

.admin-dashboard-live-dot[b-2d1zp7kp82] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(39, 132, 103, .08);
}

.admin-refresh-button[b-2d1zp7kp82] {
    border: 1px solid var(--admin-line-strong);
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    cursor: pointer;
    transition: 160ms ease;
}

    .admin-refresh-button:hover:not(:disabled)[b-2d1zp7kp82] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .16);
        background: var(--admin-accent-soft);
    }

    .admin-refresh-button:disabled[b-2d1zp7kp82] {
        opacity: .58;
        cursor: wait;
    }

    .admin-refresh-button svg[b-2d1zp7kp82] {
        width: 17px;
        height: 17px;
    }

.is-spinning[b-2d1zp7kp82] {
    animation: admin-spin-b-2d1zp7kp82 1s linear infinite;
}

@keyframes admin-spin-b-2d1zp7kp82 {
    to {
        transform: rotate(360deg);
    }
}

.admin-dashboard-loading[b-2d1zp7kp82],
.admin-dashboard-error[b-2d1zp7kp82] {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 34px;
    border: 1px solid var(--admin-line);
    border-radius: 20px;
    background: var(--admin-surface);
    text-align: center;
}

.admin-dashboard-spinner[b-2d1zp7kp82] {
    width: 34px;
    height: 34px;
    border: 3px solid var(--admin-line);
    border-top-color: var(--admin-accent);
    border-radius: 50%;
    animation: admin-spin-b-2d1zp7kp82 .85s linear infinite;
}

.admin-dashboard-loading strong[b-2d1zp7kp82],
.admin-dashboard-error strong[b-2d1zp7kp82] {
    color: var(--admin-text);
    font-size: 13px;
}

.admin-dashboard-loading p[b-2d1zp7kp82],
.admin-dashboard-error p[b-2d1zp7kp82] {
    max-width: 620px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 10px;
    line-height: 1.8;
}

.admin-dashboard-error[b-2d1zp7kp82] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    place-items: initial;
    align-items: center;
    min-height: 0;
    text-align: start;
}

.admin-error-icon[b-2d1zp7kp82] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--admin-danger);
    background: rgba(201, 74, 82, .08);
}

    .admin-error-icon svg[b-2d1zp7kp82] {
        width: 21px;
        height: 21px;
    }

.admin-dashboard-error button[b-2d1zp7kp82] {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(201, 74, 82, .16);
    border-radius: 11px;
    color: var(--admin-danger);
    background: rgba(201, 74, 82, .06);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.admin-inline-warning[b-2d1zp7kp82] {
    padding: 10px 13px;
    border: 1px solid rgba(169, 115, 31, .15);
    border-radius: 12px;
    color: var(--admin-warning);
    background: rgba(169, 115, 31, .07);
    font-size: 9px;
    font-weight: 700;
}

.admin-dashboard-section[b-2d1zp7kp82] {
    display: grid;
    gap: 16px;
}

.admin-section-heading[b-2d1zp7kp82],
.admin-card-heading[b-2d1zp7kp82] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

    .admin-section-heading h2[b-2d1zp7kp82],
    .admin-card-heading h2[b-2d1zp7kp82] {
        margin: 5px 0 0;
        color: var(--admin-text);
        font-size: 18px;
        line-height: 1.35;
    }

    .admin-section-heading p[b-2d1zp7kp82] {
        max-width: 540px;
        margin: 0;
        color: var(--admin-muted);
        font-size: 10px;
        line-height: 1.7;
        text-align: end;
    }

.admin-metric-groups[b-2d1zp7kp82] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-metric-group[b-2d1zp7kp82],
.admin-dashboard-card[b-2d1zp7kp82] {
    min-width: 0;
    border: 1px solid var(--admin-line);
    border-radius: 20px;
    background: var(--admin-surface);
    box-shadow: 0 12px 28px rgba(24, 32, 55, .035);
}

.admin-metric-group[b-2d1zp7kp82] {
    padding: 18px;
}

.admin-metric-group-header[b-2d1zp7kp82] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-metric-group-icon[b-2d1zp7kp82] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

    .admin-metric-group-icon svg[b-2d1zp7kp82] {
        width: 20px;
        height: 20px;
    }

.admin-metric-group-header > div[b-2d1zp7kp82] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-metric-group-header strong[b-2d1zp7kp82] {
    color: var(--admin-text);
    font-size: 12px;
    font-weight: 800;
}

.admin-metric-list[b-2d1zp7kp82] {
    display: grid;
    padding-top: 6px;
}

.admin-metric-row[b-2d1zp7kp82] {
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px dashed var(--admin-line);
}

    .admin-metric-row:last-child[b-2d1zp7kp82] {
        border-bottom: 0;
    }

.admin-metric-label[b-2d1zp7kp82] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

    .admin-metric-label > span[b-2d1zp7kp82] {
        color: var(--admin-text-2);
        font-size: 10px;
        font-weight: 650;
    }

    .admin-metric-label small[b-2d1zp7kp82] {
        color: var(--admin-muted);
        font-size: 7.5px;
        line-height: 1.35;
    }

.admin-metric-row > strong[b-2d1zp7kp82] {
    flex: 0 0 auto;
    color: var(--admin-text);
    font-size: 14px;
    font-weight: 850;
    text-align: end;
}

    .admin-metric-row > strong.is-success[b-2d1zp7kp82] {
        color: var(--admin-success);
    }

    .admin-metric-row > strong.is-warning[b-2d1zp7kp82] {
        color: var(--admin-warning);
    }

    .admin-metric-row > strong.is-danger[b-2d1zp7kp82] {
        color: var(--admin-danger);
    }

    .admin-metric-row > strong.is-info[b-2d1zp7kp82] {
        color: var(--admin-accent);
    }

.admin-dashboard-insights-grid[b-2d1zp7kp82],
.admin-dashboard-lower-grid[b-2d1zp7kp82] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 16px;
}

.admin-dashboard-card[b-2d1zp7kp82] {
    padding: 20px;
}

.admin-card-heading[b-2d1zp7kp82] {
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-card-heading-meta[b-2d1zp7kp82] {
    display: grid;
    justify-items: end;
    gap: 1px;
}

    .admin-card-heading-meta strong[b-2d1zp7kp82] {
        color: var(--admin-text);
        font-size: 18px;
        font-weight: 850;
    }

    .admin-card-heading-meta small[b-2d1zp7kp82] {
        color: var(--admin-muted);
        font-size: 8px;
    }

.admin-card-status[b-2d1zp7kp82] {
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 8px;
    font-weight: 800;
}

    .admin-card-status.is-success[b-2d1zp7kp82] {
        color: var(--admin-success);
        background: rgba(39, 132, 103, .08);
    }

    .admin-card-status.is-warning[b-2d1zp7kp82] {
        color: var(--admin-warning);
        background: rgba(169, 115, 31, .08);
    }

.admin-activity-chart[b-2d1zp7kp82] {
    min-height: 230px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    padding: 26px 4px 8px;
}

.admin-activity-day[b-2d1zp7kp82] {
    min-width: 0;
    display: grid;
    gap: 8px;
    justify-items: center;
}

.admin-activity-bar-wrap[b-2d1zp7kp82] {
    width: min(38px, 72%);
    height: 170px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(to top, var(--admin-surface-soft), transparent);
}

.admin-activity-bar[b-2d1zp7kp82] {
    width: 100%;
    min-height: 6px;
    display: block;
    border-radius: 9px 9px 5px 5px;
    background: linear-gradient(180deg, rgba(24, 68, 198, .95), rgba(24, 68, 198, .56));
    box-shadow: 0 8px 18px rgba(24, 68, 198, .12);
    transition: height 220ms ease;
}

.admin-activity-value[b-2d1zp7kp82] {
    position: absolute;
    inset-block-start: -18px;
    color: var(--admin-text-2);
    font-size: 8px;
    font-weight: 800;
}

.admin-activity-date[b-2d1zp7kp82] {
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 750;
}

.admin-activity-summary[b-2d1zp7kp82] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--admin-line);
}

    .admin-activity-summary > div[b-2d1zp7kp82] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 10px;
        border-radius: 12px;
        background: var(--admin-surface-soft);
    }

    .admin-activity-summary span[b-2d1zp7kp82] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 700;
    }

    .admin-activity-summary strong[b-2d1zp7kp82] {
        color: var(--admin-text);
        font-size: 11px;
        font-weight: 850;
        overflow-wrap: anywhere;
    }

.admin-efficiency-primary[b-2d1zp7kp82] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 18px 0 16px;
}

.admin-efficiency-icon[b-2d1zp7kp82] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--admin-success);
    background: rgba(39, 132, 103, .08);
}

    .admin-efficiency-icon svg[b-2d1zp7kp82] {
        width: 22px;
        height: 22px;
    }

.admin-efficiency-primary > div[b-2d1zp7kp82] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-efficiency-primary span[b-2d1zp7kp82] {
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 700;
}

.admin-efficiency-primary strong[b-2d1zp7kp82] {
    color: var(--admin-success);
    font-size: 20px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-efficiency-primary small[b-2d1zp7kp82] {
    color: var(--admin-muted);
    font-size: 8px;
    line-height: 1.6;
}

.admin-efficiency-grid[b-2d1zp7kp82] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-efficiency-item[b-2d1zp7kp82] {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 11px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: var(--admin-surface-elevated);
}

    .admin-efficiency-item span[b-2d1zp7kp82] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 700;
    }

    .admin-efficiency-item strong[b-2d1zp7kp82] {
        color: var(--admin-text);
        font-size: 13px;
        font-weight: 850;
    }

.admin-empty-state[b-2d1zp7kp82] {
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
}

    .admin-empty-state.is-success .admin-empty-icon[b-2d1zp7kp82] {
        color: var(--admin-success);
        background: rgba(39, 132, 103, .08);
    }

.admin-empty-icon[b-2d1zp7kp82] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--admin-warning);
    background: rgba(169, 115, 31, .08);
}

    .admin-empty-icon svg[b-2d1zp7kp82] {
        width: 23px;
        height: 23px;
    }

.admin-empty-state strong[b-2d1zp7kp82] {
    color: var(--admin-text);
    font-size: 13px;
}

.admin-empty-state p[b-2d1zp7kp82] {
    max-width: 620px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 10px;
    line-height: 1.8;
}

.admin-attention-list[b-2d1zp7kp82] {
    display: grid;
    gap: 7px;
    padding-top: 14px;
}

.admin-attention-item[b-2d1zp7kp82] {
    min-height: 50px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: var(--admin-surface-elevated);
}

.admin-attention-indicator[b-2d1zp7kp82] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--admin-muted);
}

    .admin-attention-indicator.is-danger[b-2d1zp7kp82] {
        background: var(--admin-danger);
    }

    .admin-attention-indicator.is-warning[b-2d1zp7kp82] {
        background: var(--admin-warning);
    }

.admin-attention-label[b-2d1zp7kp82] {
    color: var(--admin-text-2);
    font-size: 9px;
    font-weight: 700;
}

.admin-attention-item strong[b-2d1zp7kp82] {
    min-width: 28px;
    padding: 4px 7px;
    border-radius: 999px;
    text-align: center;
    font-size: 9px;
    font-weight: 850;
}

    .admin-attention-item strong.is-danger[b-2d1zp7kp82] {
        color: var(--admin-danger);
        background: rgba(201, 74, 82, .08);
    }

    .admin-attention-item strong.is-warning[b-2d1zp7kp82] {
        color: var(--admin-warning);
        background: rgba(169, 115, 31, .08);
    }

.admin-quick-actions[b-2d1zp7kp82] {
    display: grid;
    gap: 8px;
    padding-top: 14px;
}

.admin-quick-action[b-2d1zp7kp82] {
    min-height: 58px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    text-decoration: none;
    transition: 150ms ease;
}

    .admin-quick-action.is-active:hover[b-2d1zp7kp82] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .14);
        background: var(--admin-accent-soft);
    }

    .admin-quick-action.is-disabled[b-2d1zp7kp82] {
        opacity: .48;
    }

.admin-quick-icon[b-2d1zp7kp82] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--admin-surface-soft);
}

    .admin-quick-icon svg[b-2d1zp7kp82] {
        width: 18px;
        height: 18px;
    }

.admin-quick-action > span:last-child[b-2d1zp7kp82] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-quick-action strong[b-2d1zp7kp82] {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}

.admin-quick-action small[b-2d1zp7kp82] {
    color: var(--admin-muted);
    font-size: 8px;
    line-height: 1.4;
}

html[data-theme="dark"] .admin-dashboard-hero[b-2d1zp7kp82] {
    background: radial-gradient(circle at 90% 0%, rgba(95, 128, 235, .11), transparent 34%), var(--admin-surface);
}

html[data-theme="dark"] .admin-metric-group[b-2d1zp7kp82],
html[data-theme="dark"] .admin-dashboard-card[b-2d1zp7kp82],
html[data-theme="dark"] .admin-dashboard-loading[b-2d1zp7kp82],
html[data-theme="dark"] .admin-dashboard-error[b-2d1zp7kp82] {
    box-shadow: none;
}

@media (max-width: 1280px) {
    .admin-metric-groups[b-2d1zp7kp82] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-insights-grid[b-2d1zp7kp82],
    .admin-dashboard-lower-grid[b-2d1zp7kp82] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-dashboard-hero[b-2d1zp7kp82] {
        align-items: flex-start;
        flex-direction: column;
        padding: 26px;
    }

    .admin-dashboard-hero-actions[b-2d1zp7kp82] {
        width: 100%;
        justify-content: space-between;
    }

    .admin-section-heading[b-2d1zp7kp82] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

        .admin-section-heading p[b-2d1zp7kp82] {
            text-align: start;
        }

    .admin-activity-summary[b-2d1zp7kp82] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .admin-dashboard-page[b-2d1zp7kp82] {
        gap: 20px;
    }

    .admin-dashboard-hero[b-2d1zp7kp82] {
        padding: 22px 20px;
        border-radius: 18px;
    }

        .admin-dashboard-hero h1[b-2d1zp7kp82] {
            font-size: 24px;
        }

        .admin-dashboard-hero p[b-2d1zp7kp82] {
            font-size: 11px;
        }

    .admin-dashboard-hero-actions[b-2d1zp7kp82] {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-dashboard-live-badge[b-2d1zp7kp82],
    .admin-refresh-button[b-2d1zp7kp82] {
        width: 100%;
        justify-content: center;
    }

    .admin-metric-groups[b-2d1zp7kp82] {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-card[b-2d1zp7kp82],
    .admin-metric-group[b-2d1zp7kp82],
    .admin-dashboard-loading[b-2d1zp7kp82],
    .admin-dashboard-error[b-2d1zp7kp82] {
        border-radius: 17px;
    }

    .admin-dashboard-error[b-2d1zp7kp82] {
        grid-template-columns: 1fr;
    }

        .admin-dashboard-error button[b-2d1zp7kp82] {
            width: 100%;
        }

    .admin-section-heading h2[b-2d1zp7kp82],
    .admin-card-heading h2[b-2d1zp7kp82] {
        font-size: 16px;
    }

    .admin-activity-chart[b-2d1zp7kp82] {
        gap: 5px;
        padding-inline: 0;
    }

    .admin-activity-bar-wrap[b-2d1zp7kp82] {
        width: 70%;
    }

    .admin-activity-value[b-2d1zp7kp82],
    .admin-activity-date[b-2d1zp7kp82] {
        font-size: 7px;
    }

    .admin-activity-summary[b-2d1zp7kp82],
    .admin-efficiency-grid[b-2d1zp7kp82] {
        grid-template-columns: 1fr;
    }

    .admin-empty-state[b-2d1zp7kp82] {
        min-height: 220px;
        padding: 24px 12px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Diagnostics/AdminErrorCenter.razor.rz.scp.css */
.admin-error-page[b-ir8xb4vxxg] {
    display: grid;
    gap: 16px;
    color: var(--admin-text);
}

.admin-error-hero[b-ir8xb4vxxg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
}

.admin-error-hero > div[b-ir8xb4vxxg] {
    min-width: 0;
}

.admin-error-hero span[b-ir8xb4vxxg],
.admin-operational-incidents > header span[b-ir8xb4vxxg],
.admin-error-panel > header span[b-ir8xb4vxxg] {
    color: var(--admin-accent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.admin-error-hero h1[b-ir8xb4vxxg] {
    margin: 6px 0 7px;
    font-size: 22px;
}

.admin-error-hero p[b-ir8xb4vxxg] {
    max-width: 900px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 10px;
    line-height: 1.8;
}

.admin-error-hero > a[b-ir8xb4vxxg],
.admin-error-filter-actions a[b-ir8xb4vxxg],
.admin-error-filter-actions button[b-ir8xb4vxxg],
.admin-operational-incidents article > a[b-ir8xb4vxxg] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    color: var(--admin-text-2);
    background: var(--admin-surface);
    text-decoration: none;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.admin-observability-summary[b-ir8xb4vxxg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.admin-observability-summary article[b-ir8xb4vxxg],
.admin-error-summary article[b-ir8xb4vxxg] {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface);
}

.admin-observability-summary article.is-good[b-ir8xb4vxxg] {
    border-color: color-mix(in srgb, var(--admin-success) 28%, var(--admin-line));
    background: color-mix(in srgb, var(--admin-success) 4%, var(--admin-surface));
}

.admin-observability-summary article.is-warn[b-ir8xb4vxxg] {
    border-color: color-mix(in srgb, var(--admin-warning) 30%, var(--admin-line));
    background: color-mix(in srgb, var(--admin-warning) 5%, var(--admin-surface));
}

.admin-observability-summary article.is-bad[b-ir8xb4vxxg] {
    border-color: color-mix(in srgb, var(--admin-danger) 30%, var(--admin-line));
    background: color-mix(in srgb, var(--admin-danger) 5%, var(--admin-surface));
}

.admin-observability-summary span[b-ir8xb4vxxg],
.admin-observability-summary strong[b-ir8xb4vxxg],
.admin-observability-summary small[b-ir8xb4vxxg],
.admin-error-summary span[b-ir8xb4vxxg],
.admin-error-summary strong[b-ir8xb4vxxg] {
    display: block;
}

.admin-observability-summary span[b-ir8xb4vxxg],
.admin-error-summary span[b-ir8xb4vxxg] {
    color: var(--admin-muted);
    font-size: 6.5px;
}

.admin-observability-summary strong[b-ir8xb4vxxg] {
    margin-top: 4px;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.admin-observability-summary small[b-ir8xb4vxxg] {
    margin-top: 3px;
    color: var(--admin-muted);
    font-size: 6.4px;
}

.admin-operational-incidents[b-ir8xb4vxxg],
.admin-error-panel[b-ir8xb4vxxg] {
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
}

.admin-operational-incidents > header[b-ir8xb4vxxg],
.admin-error-panel > header[b-ir8xb4vxxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-operational-incidents > header h2[b-ir8xb4vxxg],
.admin-error-panel > header h2[b-ir8xb4vxxg] {
    margin: 4px 0 0;
    font-size: 12px;
}

.admin-operational-incidents > header > strong[b-ir8xb4vxxg] {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--admin-text-2);
    background: var(--admin-surface-soft);
    font-size: 7px;
}

.admin-operational-incidents > div[b-ir8xb4vxxg] {
    display: grid;
}

.admin-operational-incidents article[b-ir8xb4vxxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--admin-line);
}

.admin-operational-incidents article:first-child[b-ir8xb4vxxg] {
    border-top: 0;
}

.admin-operational-incidents article.is-critical[b-ir8xb4vxxg] {
    background: color-mix(in srgb, var(--admin-danger) 4%, transparent);
}

.admin-operational-incidents article.is-warning[b-ir8xb4vxxg] {
    background: color-mix(in srgb, var(--admin-warning) 4%, transparent);
}

.admin-operational-incidents article > div[b-ir8xb4vxxg] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-operational-incidents article span[b-ir8xb4vxxg],
.admin-operational-incidents article small[b-ir8xb4vxxg] {
    color: var(--admin-muted);
    font-size: 6.3px;
}

.admin-operational-incidents article strong[b-ir8xb4vxxg] {
    color: var(--admin-text);
    font-size: 7.5px;
    overflow-wrap: anywhere;
}

.admin-operational-incidents article > a[b-ir8xb4vxxg] {
    flex: 0 0 auto;
    min-height: 30px;
}

.admin-error-filter[b-ir8xb4vxxg] {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
}

.admin-error-filter label[b-ir8xb4vxxg] {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.admin-error-filter label > span[b-ir8xb4vxxg] {
    color: var(--admin-muted);
    font-size: 7px;
    font-weight: 800;
}

.admin-error-filter input[b-ir8xb4vxxg],
.admin-error-filter select[b-ir8xb4vxxg] {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    outline: none;
    color: var(--admin-text);
    background: var(--admin-surface-soft);
    font: inherit;
    font-size: 8px;
}

.admin-error-filter-actions[b-ir8xb4vxxg] {
    display: flex;
    gap: 6px;
}

.admin-error-filter-actions button[b-ir8xb4vxxg] {
    border-color: transparent;
    color: white;
    background: var(--admin-accent);
}

.admin-error-summary[b-ir8xb4vxxg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.admin-error-summary strong[b-ir8xb4vxxg] {
    margin-top: 4px;
    font-size: 15px;
}

.admin-error-severity-totals[b-ir8xb4vxxg] {
    display: flex;
    gap: 5px;
}

.admin-error-severity-totals span[b-ir8xb4vxxg] {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 6.3px;
    font-weight: 900;
}

.admin-error-severity-totals .is-critical[b-ir8xb4vxxg],
.admin-error-severity-totals .is-error[b-ir8xb4vxxg] {
    color: var(--admin-danger);
    background: color-mix(in srgb, var(--admin-danger) 8%, transparent);
}

.admin-error-severity-totals .is-warning[b-ir8xb4vxxg] {
    color: var(--admin-warning);
    background: color-mix(in srgb, var(--admin-warning) 9%, transparent);
}

.admin-error-list[b-ir8xb4vxxg] {
    display: grid;
}

.admin-error-item[b-ir8xb4vxxg] {
    border-top: 1px solid var(--admin-line);
}

.admin-error-item:first-child[b-ir8xb4vxxg] {
    border-top: 0;
}

.admin-error-item > summary[b-ir8xb4vxxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
}

.admin-error-item > summary[b-ir8xb4vxxg]::-webkit-details-marker {
    display: none;
}

.admin-error-item-main[b-ir8xb4vxxg],
.admin-error-item-context[b-ir8xb4vxxg] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-error-item-context[b-ir8xb4vxxg] {
    justify-items: end;
    text-align: end;
}

.admin-error-item strong[b-ir8xb4vxxg] {
    font-size: 8px;
    overflow-wrap: anywhere;
}

.admin-error-item small[b-ir8xb4vxxg],
.admin-error-item time[b-ir8xb4vxxg],
.admin-error-item-context code[b-ir8xb4vxxg] {
    color: var(--admin-muted);
    font-size: 6.3px;
}

.admin-error-severity[b-ir8xb4vxxg] {
    width: fit-content;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 6.2px;
    font-weight: 900;
}

.admin-error-severity.is-critical[b-ir8xb4vxxg],
.admin-error-severity.is-error[b-ir8xb4vxxg] {
    color: var(--admin-danger);
    background: color-mix(in srgb, var(--admin-danger) 9%, transparent);
}

.admin-error-severity.is-warning[b-ir8xb4vxxg] {
    color: var(--admin-warning);
    background: color-mix(in srgb, var(--admin-warning) 10%, transparent);
}

.admin-error-detail[b-ir8xb4vxxg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--admin-line);
    background: var(--admin-surface-soft);
}

.admin-error-detail > div[b-ir8xb4vxxg] {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    background: var(--admin-surface);
}

.admin-error-detail > div.is-wide[b-ir8xb4vxxg] {
    grid-column: 1 / -1;
}

.admin-error-detail span[b-ir8xb4vxxg],
.admin-error-detail strong[b-ir8xb4vxxg],
.admin-error-detail code[b-ir8xb4vxxg],
.admin-error-detail a[b-ir8xb4vxxg] {
    display: block;
}

.admin-error-detail span[b-ir8xb4vxxg] {
    margin-bottom: 4px;
    color: var(--admin-muted);
    font-size: 6.3px;
}

.admin-error-detail strong[b-ir8xb4vxxg],
.admin-error-detail code[b-ir8xb4vxxg],
.admin-error-detail a[b-ir8xb4vxxg] {
    color: var(--admin-text-2);
    font-size: 7px;
    overflow-wrap: anywhere;
}

.admin-error-detail a[b-ir8xb4vxxg] {
    color: var(--admin-accent);
    text-decoration: none;
}

.admin-error-stack pre[b-ir8xb4vxxg] {
    max-height: 300px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--admin-text-2);
    font-family: Consolas, monospace;
    font-size: 6.5px;
    line-height: 1.55;
}

.admin-error-state[b-ir8xb4vxxg] {
    padding: 24px;
    border: 1px dashed var(--admin-line);
    border-radius: 14px;
    color: var(--admin-muted);
    background: var(--admin-surface);
    text-align: center;
    font-size: 9px;
}

@media (max-width: 1180px) {
    .admin-error-filter[b-ir8xb4vxxg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-error-filter .is-search[b-ir8xb4vxxg] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .admin-observability-summary[b-ir8xb4vxxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-error-hero[b-ir8xb4vxxg],
    .admin-operational-incidents article[b-ir8xb4vxxg],
    .admin-error-item > summary[b-ir8xb4vxxg] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-error-item-context[b-ir8xb4vxxg] {
        justify-items: start;
        text-align: start;
    }
}

@media (max-width: 680px) {
    .admin-observability-summary[b-ir8xb4vxxg],
    .admin-error-summary[b-ir8xb4vxxg],
    .admin-error-filter[b-ir8xb4vxxg],
    .admin-error-detail[b-ir8xb4vxxg] {
        grid-template-columns: 1fr;
    }

    .admin-error-filter .is-search[b-ir8xb4vxxg],
    .admin-error-detail > div.is-wide[b-ir8xb4vxxg] {
        grid-column: auto;
    }

    .admin-error-filter-actions[b-ir8xb4vxxg] {
        width: 100%;
    }

    .admin-error-filter-actions > *[b-ir8xb4vxxg] {
        flex: 1;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Diagnostics/AdminSystemHealth.razor.rz.scp.css */
.admin-diagnostics[b-x3jmwwzcar]{max-width:1450px;margin:auto;padding:30px;color:#17223b}.admin-diagnostics>header[b-x3jmwwzcar]{display:flex;justify-content:space-between;gap:20px}.admin-diagnostics header span[b-x3jmwwzcar]{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#71809a}.admin-diagnostics h1[b-x3jmwwzcar]{margin:8px 0;font-size:2rem}.admin-diagnostics p[b-x3jmwwzcar]{margin:0;color:#67758d;line-height:1.8}.admin-diagnostics>header>a[b-x3jmwwzcar]{height:max-content;padding:10px 15px;border-radius:9px;background:#eaf0ff;color:#244cc6;text-decoration:none;font-weight:800}.admin-diag-grid[b-x3jmwwzcar]{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:25px 0}.admin-diag-card[b-x3jmwwzcar],.admin-diag-panel[b-x3jmwwzcar]{background:#fff;border:1px solid #e3e9f4;border-radius:14px;box-shadow:0 8px 24px rgba(34,55,95,.05)}.admin-diag-card[b-x3jmwwzcar]{padding:19px}.admin-diag-card span[b-x3jmwwzcar],.admin-diag-card strong[b-x3jmwwzcar]{display:block}.admin-diag-card span[b-x3jmwwzcar]{color:#748199;font-size:.82rem}.admin-diag-card strong[b-x3jmwwzcar]{margin-top:9px;font-size:1.55rem}.admin-diag-card.is-good[b-x3jmwwzcar]{border-color:#9adab6}.admin-diag-card.is-warn[b-x3jmwwzcar]{border-color:#efd27f}.admin-diag-card.is-bad[b-x3jmwwzcar]{border-color:#efabab}.admin-diag-panel[b-x3jmwwzcar]{padding:21px}.admin-diag-panel h2[b-x3jmwwzcar]{margin:0 0 18px;font-size:1.12rem}.admin-diag-panel dl[b-x3jmwwzcar]{display:grid;grid-template-columns:220px 1fr;gap:12px;margin:0}.admin-diag-panel dt[b-x3jmwwzcar]{color:#71809a}.admin-diag-panel dd[b-x3jmwwzcar]{margin:0;overflow-wrap:anywhere}.admin-diag-state[b-x3jmwwzcar]{padding:35px 0;color:#6a7891}@media(max-width:760px){.admin-diagnostics[b-x3jmwwzcar]{padding:18px}.admin-diag-grid[b-x3jmwwzcar]{grid-template-columns:1fr 1fr}.admin-diagnostics>header[b-x3jmwwzcar]{flex-direction:column}.admin-diag-panel dl[b-x3jmwwzcar]{grid-template-columns:1fr}}@media(max-width:460px){.admin-diag-grid[b-x3jmwwzcar]{grid-template-columns:1fr}}
/* _content/AITranslationPlatform.Web/Components/Admin/Efficiency/AdminTranslationEfficiency.razor.rz.scp.css */
.admin-efficiency[b-17zw1xa7fz]{max-width:1450px;margin:auto;padding:30px;color:#17223b}.admin-efficiency>header[b-17zw1xa7fz]{display:flex;justify-content:space-between;gap:20px}.admin-efficiency header span[b-17zw1xa7fz]{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#71809a}.admin-efficiency h1[b-17zw1xa7fz]{margin:8px 0;font-size:2rem}.admin-efficiency p[b-17zw1xa7fz]{max-width:750px;margin:0;color:#68758d;line-height:1.8}.admin-efficiency nav[b-17zw1xa7fz]{display:flex;gap:7px;flex-wrap:wrap}.admin-efficiency nav a[b-17zw1xa7fz]{padding:8px 11px;border:1px solid #dce4f2;border-radius:8px;color:#52617b;text-decoration:none;font-size:.85rem}.admin-efficiency nav a.active[b-17zw1xa7fz]{background:#1844c6;border-color:#1844c6;color:#fff}.metrics[b-17zw1xa7fz]{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin:25px 0}.metrics article[b-17zw1xa7fz],.panel[b-17zw1xa7fz]{background:#fff;border:1px solid #e2e9f4;border-radius:14px;box-shadow:0 8px 24px rgba(34,55,95,.05)}.metrics article[b-17zw1xa7fz]{padding:17px}.metrics span[b-17zw1xa7fz],.metrics small[b-17zw1xa7fz]{display:block;color:#71809a;font-size:.79rem}.metrics strong[b-17zw1xa7fz]{display:block;margin:8px 0;font-size:1.38rem}.panel[b-17zw1xa7fz]{padding:20px}.panel h2[b-17zw1xa7fz]{margin-top:0}.trend[b-17zw1xa7fz]{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.trend article[b-17zw1xa7fz]{padding:13px;border-radius:10px;background:#f7f9fd}.trend strong[b-17zw1xa7fz],.trend span[b-17zw1xa7fz],.trend small[b-17zw1xa7fz]{display:block}.trend strong[b-17zw1xa7fz]{font-size:1.35rem;color:#1844c6}.trend span[b-17zw1xa7fz]{font-size:.78rem}.trend small[b-17zw1xa7fz]{margin-top:8px;color:#748199}.note[b-17zw1xa7fz]{margin-top:18px!important;font-size:.85rem}.state[b-17zw1xa7fz]{padding:35px 0;color:#6c7a91}@media(max-width:950px){.metrics[b-17zw1xa7fz]{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.admin-efficiency[b-17zw1xa7fz]{padding:18px}.admin-efficiency>header[b-17zw1xa7fz]{flex-direction:column}.metrics[b-17zw1xa7fz]{grid-template-columns:1fr 1fr}}@media(max-width:420px){.metrics[b-17zw1xa7fz]{grid-template-columns:1fr}}
 .filters[b-17zw1xa7fz]{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:24px 0;padding:14px;background:#fff;border:1px solid #e2e9f4;border-radius:14px}.filters label[b-17zw1xa7fz]{display:grid;gap:5px;color:#62708a;font-size:.78rem}.filters select[b-17zw1xa7fz],.filters input[b-17zw1xa7fz]{min-width:145px;padding:8px 10px;border:1px solid #ccd7e9;border-radius:8px;background:#fbfcff;color:#1d2a43}.filters button[b-17zw1xa7fz],.filters>a[b-17zw1xa7fz]{padding:9px 13px;border:0;border-radius:8px;background:#1844c6;color:#fff;text-decoration:none;font:inherit;cursor:pointer}.filters>a[b-17zw1xa7fz]{background:#edf1f8;color:#45536d}@media(max-width:650px){.filters[b-17zw1xa7fz]{align-items:stretch}.filters label[b-17zw1xa7fz]{width:100%}.filters select[b-17zw1xa7fz],.filters input[b-17zw1xa7fz]{width:100%}}
/* _content/AITranslationPlatform.Web/Components/Admin/Email/AdminEmailSettings.razor.rz.scp.css */
.admin-email[b-htq12h7tax] {
    max-width: 1260px;
    margin: 0 auto;
    padding: 34px 30px 48px;
    color: #1a2740;
}

.page-header[b-htq12h7tax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 26px;
}

.eyebrow[b-htq12h7tax] {
    display: block;
    color: #506de5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.page-header h1[b-htq12h7tax] {
    margin: 8px 0 10px;
    font-size: 30px;
}

.page-header p[b-htq12h7tax] {
    margin: 0;
    color: #73819a;
    max-width: 70ch;
    line-height: 1.75;
}

.status-badge[b-htq12h7tax] {
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge span[b-htq12h7tax] {
    margin-inline-end: 6px;
}

.status-badge.is-live[b-htq12h7tax] {
    border: 1px solid #cdebdc;
    background: #f0fbf5;
    color: #19774b;
}

.status-badge.is-off[b-htq12h7tax] {
    border: 1px solid #e6dcc4;
    background: #fffaf3;
    color: #92651a;
}

.reason-card[b-htq12h7tax] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fffaf3;
    border: 1px solid #f3dfbd;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.reason-icon[b-htq12h7tax] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff0d6;
    color: #ba7414;
    font-weight: 900;
}

.reason-card strong[b-htq12h7tax] {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.reason-card p[b-htq12h7tax] {
    margin: 0;
    color: #7d6b4c;
    font-size: 12px;
    line-height: 1.7;
}

.setting-cards[b-htq12h7tax] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.setting-card[b-htq12h7tax],
.audit-card[b-htq12h7tax],
.test-card[b-htq12h7tax] {
    background: #fff;
    border: 1px solid #e2e8f3;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(37,55,94,.045);
    padding: 22px;
}

.card-heading[b-htq12h7tax] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f7;
}

.card-heading h2[b-htq12h7tax] {
    font-size: 17px;
    margin: 0 0 5px;
}

.card-heading p[b-htq12h7tax] {
    margin: 0;
    color: #74829a;
    font-size: 12px;
    line-height: 1.7;
}

.card-icon[b-htq12h7tax] {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #eaf0ff;
    color: #4563dd;
    font-size: 20px;
}

.card-icon.purple[b-htq12h7tax] {
    background: #f2ecff;
    color: #7b5cdb;
}

.card-icon.green[b-htq12h7tax] {
    background: #e9f8ef;
    color: #1f8a52;
}

.fields[b-htq12h7tax] {
    display: grid;
    gap: 17px;
    padding-top: 19px;
}

.fields label[b-htq12h7tax] {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
}

.fields label > span[b-htq12h7tax] {
    color: #3d4c65;
}

.fields small[b-htq12h7tax] {
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}

.fields input[b-htq12h7tax],
.fields select[b-htq12h7tax],
.fields textarea[b-htq12h7tax] {
    box-sizing: border-box;
    width: 100%;
    padding: 0 11px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.fields input[b-htq12h7tax],
.fields select[b-htq12h7tax] {
    height: 40px;
}

.fields textarea[b-htq12h7tax] {
    padding: 11px;
    line-height: 1.7;
    resize: vertical;
}

.fields input:focus[b-htq12h7tax],
.fields select:focus[b-htq12h7tax],
.fields textarea:focus[b-htq12h7tax] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.provider-row[b-htq12h7tax] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}

.provider-row > span[b-htq12h7tax] {
    color: #3d4c65;
}

.provider-row b[b-htq12h7tax] {
    padding: 3px 10px;
    border-radius: 100px;
    background: #eef2ff;
    color: #4965dd;
    font-size: 12px;
}

.provider-row small[b-htq12h7tax] {
    grid-column: 1 / -1;
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}

.api-key b.installed[b-htq12h7tax] {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 100px;
    background: #eef2ff;
    color: #4965dd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.mode-block[b-htq12h7tax] {
    display: grid;
    gap: 15px;
    padding: 16px;
    border: 1px dashed #dde4f1;
    border-radius: 12px;
    background: #fbfcff;
}

.mode-block h3[b-htq12h7tax] {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: #4c5b74;
    letter-spacing: .02em;
}

.toggle-row[b-htq12h7tax] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
}

.toggle-row > span[b-htq12h7tax] {
    display: grid;
    gap: 4px;
}

.toggle-row strong[b-htq12h7tax] {
    font-size: 13px;
}

.toggle-row small[b-htq12h7tax] {
    color: #7c899f;
    font-size: 11px;
    line-height: 1.5;
}

.toggle-row input[b-htq12h7tax] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-row i[b-htq12h7tax] {
    position: relative;
    display: block;
    flex: none;
    width: 42px;
    height: 23px;
    background: #cbd4e2;
    border-radius: 100px;
    transition: .2s;
}

.toggle-row i[b-htq12h7tax]:after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    inset-inline-start: 3px;
    box-shadow: 0 1px 3px #889;
    transition: .2s;
}

.toggle-row input:checked + i[b-htq12h7tax] {
    background: #4867e7;
}

.toggle-row input:checked + i[b-htq12h7tax]:after {
    inset-inline-start: 22px;
}

.toggle-row.danger input:checked + i[b-htq12h7tax] {
    background: #d9534f;
}

.audit-card[b-htq12h7tax] {
    margin-top: 18px;
}

.audit-card label[b-htq12h7tax] {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #3d4c65;
}

.audit-card input[b-htq12h7tax] {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 11px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.audit-card input:focus[b-htq12h7tax] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.form-footer[b-htq12h7tax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.form-footer p[b-htq12h7tax] {
    margin: 0;
    color: #8190a7;
    font-size: 12px;
    line-height: 1.7;
}

.form-footer button[b-htq12h7tax] {
    flex: none;
    border: 0;
    border-radius: 10px;
    background: #3156db;
    color: #fff;
    padding: 12px 18px;
    font: inherit;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(49,86,219,.2);
    cursor: pointer;
}

.form-footer button span[b-htq12h7tax] {
    font-size: 16px;
    margin-inline-end: 5px;
}

.test-card[b-htq12h7tax] {
    margin-top: 18px;
}

.test-form[b-htq12h7tax] {
    display: flex;
    gap: 10px;
    padding-top: 19px;
}

.test-form input[b-htq12h7tax] {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    outline: none;
    direction: ltr;
    text-align: start;
}

.test-form input:focus[b-htq12h7tax] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.test-form button[b-htq12h7tax] {
    flex: none;
    border: 0;
    border-radius: 10px;
    background: #1f8a52;
    color: #fff;
    padding: 0 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.last-run[b-htq12h7tax] {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
}

.last-run.ok[b-htq12h7tax] {
    color: #19774b;
}

.last-run.bad[b-htq12h7tax] {
    color: #b83442;
}

.last-run span[b-htq12h7tax] {
    color: #8793a8;
}

.notice[b-htq12h7tax],
.error[b-htq12h7tax],
.loading-state[b-htq12h7tax] {
    padding: 13px 15px;
    border-radius: 11px;
    margin-bottom: 16px;
    line-height: 1.7;
}

.notice small[b-htq12h7tax],
.error small[b-htq12h7tax] {
    display: block;
    margin-top: 5px;
    opacity: .8;
    font-size: 11px;
}

.notice[b-htq12h7tax] {
    background: #eaf8ef;
    color: #176e40;
}

.error[b-htq12h7tax] {
    background: #fff0f1;
    color: #b83442;
}

.loading-state[b-htq12h7tax] {
    background: #fff;
    color: #73819a;
    border: 1px solid #e2e8f3;
}


/* =====================================================
   DARK
   ===================================================== */

[data-theme="dark"] .admin-email[b-htq12h7tax] {
    color: #dbe3f2;
}

[data-theme="dark"] .page-header p[b-htq12h7tax],
[data-theme="dark"] .card-heading p[b-htq12h7tax],
[data-theme="dark"] .fields small[b-htq12h7tax],
[data-theme="dark"] .form-footer p[b-htq12h7tax],
[data-theme="dark"] .toggle-row small[b-htq12h7tax],
[data-theme="dark"] .last-run span[b-htq12h7tax] {
    color: #8b98b1;
}

[data-theme="dark"] .setting-card[b-htq12h7tax],
[data-theme="dark"] .audit-card[b-htq12h7tax],
[data-theme="dark"] .test-card[b-htq12h7tax],
[data-theme="dark"] .loading-state[b-htq12h7tax] {
    background: #161d2c;
    border-color: #26314a;
    box-shadow: none;
}

[data-theme="dark"] .card-heading[b-htq12h7tax] {
    border-bottom-color: #26314a;
}

[data-theme="dark"] .fields label > span[b-htq12h7tax],
[data-theme="dark"] .audit-card label[b-htq12h7tax],
[data-theme="dark"] .mode-block h3[b-htq12h7tax] {
    color: #b6c2d8;
}

[data-theme="dark"] .fields input[b-htq12h7tax],
[data-theme="dark"] .fields select[b-htq12h7tax],
[data-theme="dark"] .fields textarea[b-htq12h7tax],
[data-theme="dark"] .audit-card input[b-htq12h7tax],
[data-theme="dark"] .test-form input[b-htq12h7tax] {
    background: #101623;
    border-color: #2b3752;
    color: #e4ebf8;
}

[data-theme="dark"] .fields input:focus[b-htq12h7tax],
[data-theme="dark"] .fields select:focus[b-htq12h7tax],
[data-theme="dark"] .fields textarea:focus[b-htq12h7tax],
[data-theme="dark"] .audit-card input:focus[b-htq12h7tax],
[data-theme="dark"] .test-form input:focus[b-htq12h7tax] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px rgba(87,115,231,.18);
}

[data-theme="dark"] .mode-block[b-htq12h7tax] {
    background: #121926;
    border-color: #2b3752;
}

[data-theme="dark"] .toggle-row i[b-htq12h7tax] {
    background: #38455f;
}

[data-theme="dark"] .status-badge.is-live[b-htq12h7tax] {
    background: #10281c;
    border-color: #1f5138;
    color: #5fd598;
}

[data-theme="dark"] .status-badge.is-off[b-htq12h7tax],
[data-theme="dark"] .reason-card[b-htq12h7tax] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #e2b563;
}

[data-theme="dark"] .reason-card p[b-htq12h7tax] {
    color: #c2a273;
}

[data-theme="dark"] .reason-icon[b-htq12h7tax] {
    background: #3a2c12;
    color: #e2b563;
}

[data-theme="dark"] .card-icon[b-htq12h7tax] {
    background: #1b2540;
    color: #7d97f5;
}

[data-theme="dark"] .card-icon.purple[b-htq12h7tax] {
    background: #241c3d;
    color: #a58bf0;
}

[data-theme="dark"] .card-icon.green[b-htq12h7tax] {
    background: #10281c;
    color: #5fd598;
}

[data-theme="dark"] .api-key b.installed[b-htq12h7tax],
[data-theme="dark"] .provider-row b[b-htq12h7tax] {
    background: #1b2540;
    color: #7d97f5;
}

[data-theme="dark"] .provider-row > span[b-htq12h7tax] {
    color: #b6c2d8;
}

[data-theme="dark"] .provider-row small[b-htq12h7tax] {
    color: #8b98b1;
}

[data-theme="dark"] .notice[b-htq12h7tax] {
    background: #10281c;
    color: #5fd598;
}

[data-theme="dark"] .error[b-htq12h7tax] {
    background: #2a1418;
    color: #f08a95;
}

[data-theme="dark"] .last-run.ok[b-htq12h7tax] {
    color: #5fd598;
}

[data-theme="dark"] .last-run.bad[b-htq12h7tax] {
    color: #f08a95;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 850px) {
    .setting-cards[b-htq12h7tax] {
        grid-template-columns: 1fr;
    }

    .page-header[b-htq12h7tax] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .admin-email[b-htq12h7tax] {
        padding: 22px 16px;
    }

    .form-footer[b-htq12h7tax],
    .test-form[b-htq12h7tax] {
        flex-direction: column;
        align-items: stretch;
    }

    .test-form button[b-htq12h7tax] {
        height: 42px;
    }
}

/* =====================================================
   DELIVERY DIAGNOSTICS
   ===================================================== */

.diagnostics-form[b-htq12h7tax] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #edf1f7;
}

.diagnostics-form button[b-htq12h7tax] {
    flex: none;
    border: 1px solid #d8dcfb;
    border-radius: 10px;
    background: #f6f7ff;
    color: #4a63d8;
    padding: 10px 15px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.diagnostics-form button:hover[b-htq12h7tax] {
    background: #eef1ff;
}

.diagnostics-form small[b-htq12h7tax] {
    color: #8793a8;
    font-size: 11px;
}

.diagnostics-result[b-htq12h7tax] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #e2e8f3;
    border-radius: 12px;
    background: #fbfcff;
}

.diagnostics-result > div[b-htq12h7tax] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.diagnostics-result span[b-htq12h7tax] {
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 700;
}

.diagnostics-result strong[b-htq12h7tax] {
    font-size: 13px;
    color: #26304a;
}

.diagnostics-result strong.ok[b-htq12h7tax] {
    color: #19774b;
}

.diagnostics-result strong.bad[b-htq12h7tax] {
    color: #b83442;
}

.diagnostics-result em[b-htq12h7tax],
.diagnostics-note[b-htq12h7tax] {
    font-style: normal;
    font-size: 10.5px;
    color: #8793a8;
    line-height: 1.7;
}

.diagnostics-hint[b-htq12h7tax] {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #f3dfbd;
    border-radius: 11px;
    background: #fffaf3;
    color: #7d6b4c;
    font-size: 11.5px;
    line-height: 1.8;
}

[data-theme="dark"] .diagnostics-form[b-htq12h7tax] {
    border-top-color: #26314a;
}

[data-theme="dark"] .diagnostics-form button[b-htq12h7tax] {
    background: #161c2e;
    border-color: #2c3556;
    color: #8ba3f7;
}

[data-theme="dark"] .diagnostics-result[b-htq12h7tax] {
    background: #121926;
    border-color: #26314a;
}

[data-theme="dark"] .diagnostics-result strong[b-htq12h7tax] {
    color: #dfe6f6;
}

[data-theme="dark"] .diagnostics-result strong.ok[b-htq12h7tax] {
    color: #5fd598;
}

[data-theme="dark"] .diagnostics-result strong.bad[b-htq12h7tax] {
    color: #f08a95;
}

[data-theme="dark"] .diagnostics-result span[b-htq12h7tax],
[data-theme="dark"] .diagnostics-result em[b-htq12h7tax],
[data-theme="dark"] .diagnostics-note[b-htq12h7tax],
[data-theme="dark"] .diagnostics-form small[b-htq12h7tax] {
    color: #8b98b1;
}

[data-theme="dark"] .diagnostics-hint[b-htq12h7tax] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #c2a273;
}

@media (max-width: 620px) {
    .diagnostics-result[b-htq12h7tax] {
        grid-template-columns: 1fr;
    }

    .diagnostics-form[b-htq12h7tax] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Features/AdminFeatureFlags.razor.rz.scp.css */
.admin-feature-flags[b-recy8lacgb]{max-width:1260px;margin:auto;padding:34px 30px;color:#1a2740}.admin-feature-flags header[b-recy8lacgb]{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.admin-feature-flags header>div>span[b-recy8lacgb]{font-size:11px;letter-spacing:.12em;font-weight:800;color:#526ee8}.admin-feature-flags h1[b-recy8lacgb]{font-size:30px;margin:8px 0}.admin-feature-flags header p[b-recy8lacgb]{margin:0;color:#75839a}.guard[b-recy8lacgb]{padding:10px 13px;border:1px solid #d7e0ff;background:#f0f3ff;color:#4866d9;border-radius:10px;font-size:12px}.flag-grid[b-recy8lacgb]{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.flag-card[b-recy8lacgb]{background:#fff;border:1px solid #e2e8f3;border-radius:15px;padding:20px;box-shadow:0 8px 24px rgba(31,49,89,.045)}.flag-top[b-recy8lacgb]{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #edf1f7;padding-bottom:16px}.flag-card h2[b-recy8lacgb]{font-size:16px;margin:0 0 7px}.flag-card p[b-recy8lacgb]{margin:0;color:#74829a;font-size:12px;line-height:1.65}.toggle[b-recy8lacgb]{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}.toggle input[b-recy8lacgb]{position:absolute;opacity:0}.toggle i[b-recy8lacgb]{position:relative;width:38px;height:21px;border-radius:99px;background:#cbd4e2}.toggle i[b-recy8lacgb]:after{content:"";position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:white;transition:.2s}.toggle input:checked+i[b-recy8lacgb]{background:#4867e7}.toggle input:checked+i[b-recy8lacgb]:after{right:20px}.pilot[b-recy8lacgb]{display:grid;gap:7px;padding-top:16px;font-size:12px;font-weight:700}.pilot input[b-recy8lacgb]{height:39px;border:1px solid #d9e1ef;border-radius:8px;padding:0 10px;direction:ltr;text-align:left}.pilot small[b-recy8lacgb]{font-weight:400;color:#8793a8;font-size:10px}.admin-feature-flags footer[b-recy8lacgb]{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.admin-feature-flags footer p[b-recy8lacgb]{font-size:12px;color:#8190a7}.admin-feature-flags button[b-recy8lacgb]{border:0;background:#3156db;color:white;border-radius:10px;padding:12px 18px;font-weight:700}.notice[b-recy8lacgb],.error[b-recy8lacgb]{padding:13px 15px;border-radius:11px;margin:0 0 16px}.notice[b-recy8lacgb]{background:#eaf8ef;color:#176e40}.error[b-recy8lacgb]{background:#fff0f1;color:#b83442}@media(max-width:800px){.flag-grid[b-recy8lacgb]{grid-template-columns:1fr}.admin-feature-flags header[b-recy8lacgb],.admin-feature-flags footer[b-recy8lacgb]{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.admin-feature-flags[b-recy8lacgb]{padding:22px 16px}.flag-top[b-recy8lacgb]{flex-direction:column}}
/* _content/AITranslationPlatform.Web/Components/Admin/Knowledge/AdminKnowledgeAnalytics.razor.rz.scp.css */
.admin-knowledge[b-xcjvuavbgc]{max-width:1300px;margin:auto;padding:26px;color:#172033}.admin-knowledge header span[b-xcjvuavbgc]{font-size:11px;color:#526ee8;font-weight:800}.admin-knowledge h1[b-xcjvuavbgc]{margin:8px 0}.admin-knowledge p[b-xcjvuavbgc]{color:#71809a;max-width:760px}.admin-knowledge nav[b-xcjvuavbgc]{display:flex;gap:7px}.admin-knowledge nav a[b-xcjvuavbgc]{border:1px solid #dce4f3;padding:8px 11px;border-radius:8px;text-decoration:none;color:#34415e}.admin-knowledge nav a.active[b-xcjvuavbgc]{background:#3156db;color:#fff}.metrics[b-xcjvuavbgc]{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.metrics article[b-xcjvuavbgc],.panel[b-xcjvuavbgc]{background:#fff;border:1px solid #e2e8f3;border-radius:14px;padding:16px}.metrics span[b-xcjvuavbgc]{display:block;color:#71809a;font-size:12px}.metrics strong[b-xcjvuavbgc]{font-size:25px;display:block;margin-top:9px}.panel[b-xcjvuavbgc]{margin-top:15px}.panel h2[b-xcjvuavbgc]{font-size:17px;margin-top:0}.pairs[b-xcjvuavbgc],.growth[b-xcjvuavbgc]{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px}.pairs div[b-xcjvuavbgc],.growth div[b-xcjvuavbgc]{padding:10px;background:#f7f9fe;border-radius:9px}.pairs strong[b-xcjvuavbgc],.pairs span[b-xcjvuavbgc],.pairs small[b-xcjvuavbgc],.growth strong[b-xcjvuavbgc],.growth small[b-xcjvuavbgc]{display:block}.pairs span[b-xcjvuavbgc],.pairs small[b-xcjvuavbgc],.growth small[b-xcjvuavbgc]{font-size:11px;color:#71809a;margin-top:4px}.state[b-xcjvuavbgc]{padding:30px;color:#71809a}@media(max-width:600px){.admin-knowledge[b-xcjvuavbgc]{padding:16px}.metrics[b-xcjvuavbgc]{grid-template-columns:1fr}}
/* _content/AITranslationPlatform.Web/Components/Admin/Languages/AdminLanguages.razor.rz.scp.css */
.admin-languages[b-0drmcnxlnv]{max-width:1200px;margin:auto;padding:26px}.admin-languages p[b-0drmcnxlnv]{color:#71809a}.admin-languages header span[b-0drmcnxlnv]{font-size:11px;color:#526ee8;font-weight:800}.languages details[b-0drmcnxlnv],.create[b-0drmcnxlnv]{background:#fff;border:1px solid #e2e8f3;border-radius:12px;margin:10px 0}.languages summary[b-0drmcnxlnv],.create summary[b-0drmcnxlnv]{padding:14px;display:flex;gap:12px;cursor:pointer}.languages summary span[b-0drmcnxlnv]{margin-inline-start:auto;color:#71809a}.fields[b-0drmcnxlnv]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}.fields label[b-0drmcnxlnv]{display:grid;gap:5px;font-size:12px}.fields input[b-0drmcnxlnv]{padding:8px;border:1px solid #dce4f3;border-radius:7px}.fields .check[b-0drmcnxlnv]{display:flex;align-items:center;gap:6px}.admin-languages button[b-0drmcnxlnv]{margin:0 14px 14px;padding:9px 13px;border:0;border-radius:8px;background:#3156db;color:white}.notice[b-0drmcnxlnv],.error[b-0drmcnxlnv]{padding:12px;border-radius:9px;margin:12px 0}.notice[b-0drmcnxlnv]{background:#eaf8ef;color:#176e40}.error[b-0drmcnxlnv]{background:#fff0f1;color:#b83442}@media(max-width:700px){.fields[b-0drmcnxlnv]{grid-template-columns:1fr}}
/* _content/AITranslationPlatform.Web/Components/Admin/Layout/AdminAuthLayout.razor.rz.scp.css */
.admin-auth-layout[b-o1jsfvepg0] {
    min-height: 100dvh;
}
/* _content/AITranslationPlatform.Web/Components/Admin/Layout/AdminLayout.razor.rz.scp.css */
.admin-surface[b-snx0tuc2ec] {
    --admin-accent: #1844c6;
    --admin-accent-hover: #123ba9;
    --admin-accent-soft: rgba(24, 68, 198, .08);
    --admin-text: #171a20;
    --admin-text-2: #505763;
    --admin-muted: #8a9099;
    --admin-surface: #ffffff;
    --admin-surface-soft: #f5f6f8;
    --admin-surface-elevated: #fbfbfc;
    --admin-line: rgba(28, 34, 46, .075);
    --admin-line-strong: rgba(28, 34, 46, .12);
    --admin-success: #278467;
    --admin-warning: #a9731f;
    --admin-danger: #c94a52;
    --admin-shadow: 0 18px 44px rgba(24, 32, 55, .075);
    min-height: 100vh;
    background: var(--admin-surface-soft);
    color: var(--admin-text);
}

.admin-frame[b-snx0tuc2ec] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
}

.admin-sidebar[b-snx0tuc2ec] {
    min-width: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--admin-surface);
    border-inline-end: 1px solid var(--admin-line);
}

.admin-sidebar-brand[b-snx0tuc2ec] {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-brand-link[b-snx0tuc2ec] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.admin-brand-mark[b-snx0tuc2ec] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

    .admin-brand-mark svg[b-snx0tuc2ec] {
        width: 25px;
        height: 25px;
    }

.admin-brand-copy[b-snx0tuc2ec] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

    .admin-brand-copy strong[b-snx0tuc2ec] {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .admin-brand-copy small[b-snx0tuc2ec] {
        color: var(--admin-muted);
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

.admin-sidebar-close[b-snx0tuc2ec] {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-elevated);
    color: var(--admin-text-2);
    cursor: pointer;
}

    .admin-sidebar-close svg[b-snx0tuc2ec] {
        width: 18px;
        height: 18px;
    }

.admin-sidebar-scroll[b-snx0tuc2ec] {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 12px 24px;
    scrollbar-width: thin;
}

.admin-navigation[b-snx0tuc2ec] {
    display: grid;
    gap: 22px;
}

.admin-nav-group[b-snx0tuc2ec] {
    display: grid;
    gap: 5px;
}

.admin-nav-heading[b-snx0tuc2ec] {
    padding: 0 10px 6px;
    color: var(--admin-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.admin-nav-link[b-snx0tuc2ec],
.admin-return-link[b-snx0tuc2ec] {
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--admin-text-2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: 160ms ease;
}

    .admin-nav-link:hover[b-snx0tuc2ec],
    .admin-return-link:hover[b-snx0tuc2ec] {
        color: var(--admin-accent);
        background: var(--admin-accent-soft);
    }

    .admin-nav-link.active[b-snx0tuc2ec] {
        color: var(--admin-accent);
        background: var(--admin-accent-soft);
        border-color: rgba(24, 68, 198, .11);
    }

    .admin-nav-link.is-disabled[b-snx0tuc2ec] {
        opacity: .48;
        cursor: default;
        user-select: none;
    }

        .admin-nav-link.is-disabled:hover[b-snx0tuc2ec] {
            color: var(--admin-text-2);
            background: transparent;
        }

    .admin-nav-link small[b-snx0tuc2ec] {
        padding: 3px 6px;
        border-radius: 999px;
        background: var(--admin-surface-soft);
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 800;
    }

.admin-nav-icon[b-snx0tuc2ec] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
}

    .admin-nav-icon svg[b-snx0tuc2ec] {
        width: 19px;
        height: 19px;
    }

.admin-sidebar-footer[b-snx0tuc2ec] {
    padding: 12px;
    border-top: 1px solid var(--admin-line);
    background: var(--admin-surface);
}

.admin-return-link[b-snx0tuc2ec] {
    grid-template-columns: 28px minmax(0, 1fr);
}

.admin-main-panel[b-snx0tuc2ec] {
    min-width: 0;
    min-height: 100vh;
}

.admin-header[b-snx0tuc2ec] {
    min-height: 76px;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--admin-line);
    background: color-mix(in srgb, var(--admin-surface) 92%, transparent);
    backdrop-filter: blur(18px);
}

.admin-header-start[b-snx0tuc2ec],
.admin-header-actions[b-snx0tuc2ec] {
    display: flex;
    align-items: center;
}

.admin-header-start[b-snx0tuc2ec] {
    min-width: 0;
    gap: 12px;
}

.admin-header-actions[b-snx0tuc2ec] {
    gap: 8px;
}

.admin-header-title[b-snx0tuc2ec] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

    .admin-header-title strong[b-snx0tuc2ec] {
        font-size: 14px;
        font-weight: 850;
    }

    .admin-header-title span[b-snx0tuc2ec] {
        color: var(--admin-muted);
        font-size: 10px;
        font-weight: 600;
    }

.admin-header-icon[b-snx0tuc2ec] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: var(--admin-surface);
    color: var(--admin-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: 160ms ease;
}

    .admin-header-icon:not(:disabled):hover[b-snx0tuc2ec] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .16);
        background: var(--admin-accent-soft);
    }

    .admin-header-icon:disabled[b-snx0tuc2ec],
    .admin-search-shell:disabled[b-snx0tuc2ec] {
        opacity: .46;
        cursor: default;
    }

    .admin-header-icon svg[b-snx0tuc2ec] {
        width: 18px;
        height: 18px;
    }

.admin-language-button[b-snx0tuc2ec] {
    font-size: 11px;
    font-weight: 900;
}

.admin-mobile-menu[b-snx0tuc2ec] {
    display: none;
}

.admin-search-shell[b-snx0tuc2ec] {
    width: 210px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: var(--admin-surface);
    color: var(--admin-muted);
    text-align: start;
}

    .admin-search-shell svg[b-snx0tuc2ec] {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    .admin-search-shell span[b-snx0tuc2ec] {
        font-size: 10px;
        font-weight: 700;
    }

.admin-environment[b-snx0tuc2ec] {
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

    .admin-environment.is-development[b-snx0tuc2ec] {
        color: #8b5a13;
        background: rgba(192, 132, 38, .11);
        border: 1px solid rgba(192, 132, 38, .14);
    }

    .admin-environment.is-staging[b-snx0tuc2ec] {
        color: #7554aa;
        background: rgba(117, 84, 170, .10);
        border: 1px solid rgba(117, 84, 170, .14);
    }

    .admin-environment.is-production[b-snx0tuc2ec] {
        color: #237059;
        background: rgba(39, 132, 103, .10);
        border: 1px solid rgba(39, 132, 103, .14);
    }

.admin-profile-chip[b-snx0tuc2ec] {
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface);
}

.admin-profile-avatar[b-snx0tuc2ec] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}

    .admin-profile-avatar svg[b-snx0tuc2ec] {
        width: 17px;
        height: 17px;
    }

.admin-profile-copy[b-snx0tuc2ec] {
    min-width: 0;
    max-width: 138px;
    display: grid;
    gap: 1px;
}

    .admin-profile-copy small[b-snx0tuc2ec] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 700;
    }

    .admin-profile-copy strong[b-snx0tuc2ec] {
        overflow: hidden;
        color: var(--admin-text);
        font-size: 10px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.admin-logout-form[b-snx0tuc2ec] {
    margin: 0;
}

.admin-logout-button:hover[b-snx0tuc2ec] {
    color: var(--admin-danger) !important;
    border-color: rgba(201, 74, 82, .16) !important;
    background: rgba(201, 74, 82, .07) !important;
}

.admin-theme-dark-icon[b-snx0tuc2ec] {
    display: none;
}

.admin-content[b-snx0tuc2ec] {
    min-width: 0;
    width: min(1580px, 100%);
    margin: 0 auto;
    padding: 28px;
}

.admin-mobile-backdrop[b-snx0tuc2ec] {
    display: none;
}

html[data-theme="dark"] .admin-surface[b-snx0tuc2ec] {
    --admin-text: #eef1f7;
    --admin-text-2: #b0b8c7;
    --admin-muted: #747e8f;
    --admin-surface: #131824;
    --admin-surface-soft: #0c101a;
    --admin-surface-elevated: #171d2a;
    --admin-line: rgba(255, 255, 255, .065);
    --admin-line-strong: rgba(255, 255, 255, .10);
    --admin-accent: #7893f3;
    --admin-accent-hover: #89a0f5;
    --admin-accent-soft: rgba(95, 128, 235, .105);
    --admin-shadow: 0 24px 55px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .admin-header[b-snx0tuc2ec] {
    background: rgba(12, 16, 26, .86);
}

html[data-theme="dark"] .admin-theme-light-icon[b-snx0tuc2ec] {
    display: none;
}

html[data-theme="dark"] .admin-theme-dark-icon[b-snx0tuc2ec] {
    display: block;
}

html[data-theme="dark"] .admin-environment.is-development[b-snx0tuc2ec] {
    color: #d8ad62;
    background: rgba(192, 132, 38, .12);
}

html[data-theme="dark"] .admin-environment.is-production[b-snx0tuc2ec] {
    color: #69c5a7;
    background: rgba(39, 132, 103, .12);
}

@media (max-width: 1180px) {
    .admin-search-shell[b-snx0tuc2ec] {
        display: none;
    }

    .admin-profile-copy[b-snx0tuc2ec] {
        display: none;
    }

    .admin-profile-chip[b-snx0tuc2ec] {
        width: 38px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 960px) {
    .admin-frame[b-snx0tuc2ec] {
        display: block;
    }

    .admin-sidebar[b-snx0tuc2ec] {
        width: min(290px, 88vw);
        position: fixed;
        inset-block: 0;
        z-index: 70;
        box-shadow: 0 28px 80px rgba(0, 0, 0, .18);
        transition: transform 180ms ease;
    }

    .admin-surface[dir="ltr"] .admin-sidebar[b-snx0tuc2ec] {
        left: 0;
        right: auto;
        transform: translateX(-105%);
    }

    .admin-surface[dir="rtl"] .admin-sidebar[b-snx0tuc2ec] {
        right: 0;
        left: auto;
        transform: translateX(105%);
    }

    .admin-sidebar.mobile-open[b-snx0tuc2ec] {
        transform: translateX(0) !important;
    }

    .admin-surface.mobile-nav-open .admin-sidebar[b-snx0tuc2ec] {
        transform: translateX(0) !important;
    }

    .admin-sidebar-close[b-snx0tuc2ec],
    .admin-mobile-menu[b-snx0tuc2ec] {
        display: grid;
        place-items: center;
    }

    .admin-mobile-backdrop[b-snx0tuc2ec] {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: none;
        border: 0;
        background: rgba(8, 12, 20, .34);
        backdrop-filter: blur(2px);
    }

    .admin-surface.mobile-nav-open .admin-mobile-backdrop[b-snx0tuc2ec] {
        display: block;
    }

    .admin-header[b-snx0tuc2ec] {
        min-height: 70px;
        padding: 10px 18px;
    }

    .admin-content[b-snx0tuc2ec] {
        padding: 22px 18px;
    }
}

@media (max-width: 700px) {
    .admin-header-title span[b-snx0tuc2ec],
    .admin-environment[b-snx0tuc2ec],
    .admin-profile-chip[b-snx0tuc2ec] {
        display: none;
    }

    .admin-header[b-snx0tuc2ec] {
        gap: 10px;
        padding-inline: 14px;
    }

    .admin-header-actions[b-snx0tuc2ec] {
        gap: 6px;
    }

    .admin-header-icon[b-snx0tuc2ec] {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .admin-content[b-snx0tuc2ec] {
        padding: 18px 14px 28px;
    }
}

@media (max-width: 430px) {
    .admin-header-title strong[b-snx0tuc2ec] {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-header-actions .admin-header-icon:disabled[b-snx0tuc2ec] {
        display: none;
    }
}

/* ============================================================
   ADMIN SIDEBAR V2
   Professional SaaS navigation
   ============================================================ */

.admin-frame[b-snx0tuc2ec] {
    grid-template-columns: 284px minmax(0, 1fr);
}


/* ------------------------------------------------------------
   RTL SHELL
   Keep physical grid positioning predictable
   ------------------------------------------------------------ */

.admin-surface[dir="rtl"] .admin-frame[b-snx0tuc2ec] {
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) 284px;
}

.admin-surface[dir="rtl"] .admin-sidebar[b-snx0tuc2ec] {
    grid-column: 2;
    grid-row: 1;
    direction: rtl;
    border-inline-end: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, .065);
    box-shadow: -18px 0 45px rgba(15, 23, 42, .055);
}

.admin-surface[dir="rtl"] .admin-main-panel[b-snx0tuc2ec] {
    grid-column: 1;
    grid-row: 1;
    direction: rtl;
}


/* ============================================================
   SIDEBAR SURFACE
   ============================================================ */

.admin-sidebar[b-snx0tuc2ec] {
    --sidebar-bg-top: #172239;
    --sidebar-bg-bottom: #0d1525;
    --sidebar-text: #d6deeb;
    --sidebar-text-muted: #8490a5;
    --sidebar-heading: #69768d;
    --sidebar-accent: #8198ff;
    --sidebar-accent-bright: #a9b8ff;
    --sidebar-hover: rgba(255, 255, 255, .055);
    --sidebar-active: rgba(111, 137, 245, .14);
    --sidebar-border: rgba(255, 255, 255, .07);
    color: var(--sidebar-text);
    background: radial-gradient( circle at 30% -5%, rgba(104, 127, 235, .20), transparent 28% ), linear-gradient( 180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100% );
    border-inline-end: 1px solid var(--sidebar-border);
    box-shadow: 18px 0 45px rgba(15, 23, 42, .055);
    isolation: isolate;
}


    /* subtle sidebar texture */

    .admin-sidebar[b-snx0tuc2ec]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient( 180deg, rgba(255, 255, 255, .025), transparent 18% );
    }


/* ============================================================
   BRAND
   ============================================================ */

.admin-sidebar-brand[b-snx0tuc2ec] {
    height: 82px;
    padding-inline: 17px;
    border-bottom: 1px solid var(--sidebar-border);
    background: rgba(255, 255, 255, .012);
}


.admin-brand-link[b-snx0tuc2ec] {
    gap: 12px;
}


.admin-brand-mark[b-snx0tuc2ec] {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 14px;
    color: var(--sidebar-accent-bright);
    border: 1px solid rgba(171, 187, 255, .18);
    background: linear-gradient( 145deg, rgba(126, 151, 255, .16), rgba(255, 255, 255, .045) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 25px rgba(0, 0, 0, .10);
}


    .admin-brand-mark svg[b-snx0tuc2ec] {
        width: 25px;
        height: 25px;
    }


.admin-brand-copy[b-snx0tuc2ec] {
    gap: 3px;
}


    .admin-brand-copy strong[b-snx0tuc2ec] {
        color: #ffffff;
        font-size: 13.5px;
        font-weight: 800;
        letter-spacing: -.015em;
        white-space: nowrap;
    }


    .admin-brand-copy small[b-snx0tuc2ec] {
        color: #929db1;
        font-size: 9px;
        font-weight: 600;
        white-space: nowrap;
    }


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.admin-sidebar-close[b-snx0tuc2ec] {
    border: 1px solid rgba(255, 255, 255, .08);
    color: #b9c4d5;
    background: rgba(255, 255, 255, .045);
}

    .admin-sidebar-close:hover[b-snx0tuc2ec] {
        color: #ffffff;
        background: rgba(255, 255, 255, .08);
    }


/* ============================================================
   SCROLL AREA
   ============================================================ */

.admin-sidebar-scroll[b-snx0tuc2ec] {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 17px 11px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}


    .admin-sidebar-scroll[b-snx0tuc2ec]::-webkit-scrollbar {
        width: 4px;
    }


    .admin-sidebar-scroll[b-snx0tuc2ec]::-webkit-scrollbar-track {
        background: transparent;
    }


    .admin-sidebar-scroll[b-snx0tuc2ec]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, .15);
    }


        .admin-sidebar-scroll[b-snx0tuc2ec]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, .24);
        }


/* ============================================================
   NAVIGATION GROUPS
   ============================================================ */

.admin-navigation[b-snx0tuc2ec] {
    display: grid;
    gap: 17px;
}


.admin-nav-group[b-snx0tuc2ec] {
    display: grid;
    gap: 4px;
}


    /* subtle divider between navigation categories */

    .admin-nav-group + .admin-nav-group[b-snx0tuc2ec] {
        position: relative;
        padding-top: 14px;
    }


        .admin-nav-group + .admin-nav-group[b-snx0tuc2ec]::before {
            content: "";
            position: absolute;
            inset-inline: 8px;
            top: 0;
            height: 1px;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .065), transparent );
        }


/* ============================================================
   SECTION HEADING
   ============================================================ */

.admin-nav-heading[b-snx0tuc2ec] {
    display: block;
    padding: 0 11px 5px;
    color: var(--sidebar-heading);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.4;
    text-transform: uppercase;
    user-select: none;
}


/* ============================================================
   IMPORTANT:
   NavLink is a CHILD COMPONENT.
   ::deep is required for CSS isolation to style its <a>.
   ============================================================ */

.admin-sidebar[b-snx0tuc2ec]  .admin-nav-link {
    min-width: 0;
    min-height: 41px;
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--sidebar-text) !important;
    background: transparent;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}


    .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link:visited {
        color: var(--sidebar-text) !important;
        text-decoration: none !important;
    }


    /* link label */

    .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link > span:not(.admin-nav-icon) {
        min-width: 0;
        overflow: hidden;
        color: inherit;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
    }


    /* ============================================================
   ICON
   ============================================================ */

    .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link .admin-nav-icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .035);
        border-radius: 10px;
        color: #8997ad;
        background: rgba(255, 255, 255, .032);
        transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
    }


        .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link .admin-nav-icon svg {
            width: 17px;
            height: 17px;
            display: block;
        }


    /* ============================================================
   HOVER
   ============================================================ */

    .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link:hover {
        color: #ffffff !important;
        background: var(--sidebar-hover);
        border-color: rgba(255, 255, 255, .045);
        text-decoration: none !important;
    }


        .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link:hover .admin-nav-icon {
            color: #b9c6ff;
            border-color: rgba(142, 163, 255, .10);
            background: rgba(127, 151, 255, .09);
            transform: translateY(-1px);
        }


    /* ============================================================
   ACTIVE ITEM
   ============================================================ */

    .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link.active {
        color: #ffffff !important;
        background: linear-gradient( 90deg, rgba(107, 132, 239, .20), rgba(107, 132, 239, .095) );
        border-color: rgba(133, 155, 255, .14);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
        text-decoration: none !important;
    }


        /* active indicator */

        .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link.active::before {
            content: "";
            position: absolute;
            inset-block: 9px;
            inset-inline-start: -1px;
            width: 3px;
            border-radius: 0 999px 999px 0;
            background: var(--sidebar-accent);
            box-shadow: 0 0 14px rgba(129, 152, 255, .48);
        }


.admin-surface[dir="rtl"]
.admin-sidebar[b-snx0tuc2ec]
 .admin-nav-link.active::before {
    border-radius: 999px 0 0 999px;
}


.admin-sidebar[b-snx0tuc2ec]  .admin-nav-link.active .admin-nav-icon {
    color: #ffffff;
    border-color: rgba(157, 176, 255, .22);
    background: linear-gradient( 145deg, rgba(112, 139, 255, .36), rgba(91, 115, 226, .19) );
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}


/* ============================================================
   DISABLED ITEM
   ============================================================ */

.admin-nav-link.is-disabled[b-snx0tuc2ec] {
    opacity: .44;
    cursor: default;
}


    .admin-nav-link.is-disabled small[b-snx0tuc2ec] {
        display: none;
    }


/* ============================================================
   SIDEBAR FOOTER
   ============================================================ */

.admin-sidebar-footer[b-snx0tuc2ec] {
    padding: 11px;
    border-top: 1px solid var(--sidebar-border);
    background: rgba(3, 8, 17, .19);
    backdrop-filter: blur(12px);
}


.admin-return-link[b-snx0tuc2ec] {
    min-height: 43px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #c4cedd;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: .16s ease;
}


    .admin-return-link:visited[b-snx0tuc2ec] {
        color: #c4cedd;
        text-decoration: none !important;
    }


    .admin-return-link .admin-nav-icon[b-snx0tuc2ec] {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        color: #8997ad;
        background: rgba(255, 255, 255, .035);
    }


    .admin-return-link:hover[b-snx0tuc2ec] {
        color: #ffffff;
        border-color: rgba(255, 255, 255, .05);
        background: rgba(255, 255, 255, .055);
        text-decoration: none !important;
    }


        .admin-return-link:hover .admin-nav-icon[b-snx0tuc2ec] {
            color: #b9c6ff;
            background: rgba(127, 151, 255, .09);
        }


/* ============================================================
   DARK THEME
   Sidebar remains dark but gets slightly deeper
   ============================================================ */

html[data-theme="dark"] .admin-sidebar[b-snx0tuc2ec] {
    --sidebar-bg-top: #111a2b;
    --sidebar-bg-bottom: #080f1c;
    background: radial-gradient( circle at 30% -5%, rgba(101, 127, 238, .17), transparent 28% ), linear-gradient( 180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100% );
}


/* ============================================================
   MOBILE SIDEBAR
   ============================================================ */

@media (max-width: 960px) {

    .admin-frame[b-snx0tuc2ec],
    .admin-surface[dir="rtl"] .admin-frame[b-snx0tuc2ec] {
        display: block;
        direction: inherit;
    }


    .admin-surface[dir="rtl"] .admin-sidebar[b-snx0tuc2ec],
    .admin-surface[dir="rtl"] .admin-main-panel[b-snx0tuc2ec] {
        grid-column: auto;
        grid-row: auto;
    }


    .admin-sidebar[b-snx0tuc2ec] {
        width: min(292px, 88vw);
        box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    }


    .admin-sidebar-brand[b-snx0tuc2ec] {
        height: 76px;
    }


    .admin-sidebar-scroll[b-snx0tuc2ec] {
        padding-top: 13px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    .admin-sidebar[b-snx0tuc2ec] {
        width: min(286px, 91vw);
    }


        .admin-sidebar[b-snx0tuc2ec]  .admin-nav-link {
            min-height: 42px;
            font-size: 11px;
        }
}

/* ============================================================
   SUPPORT TICKET BADGE
   ============================================================ */

.admin-sidebar[b-snx0tuc2ec]  .admin-nav-link .admin-ticket-badge {
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #c94a52;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(201, 74, 82, .22);
}

/* Goftito logo in the sidebar brand box. */
.admin-brand-mark .goftito-mark[b-snx0tuc2ec] {
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}
/* _content/AITranslationPlatform.Web/Components/Admin/Operations/AdminAttentionCenter.razor.rz.scp.css */
.admin-attention[b-7s0bntdlli]{max-width:1200px;margin:auto;padding:32px;color:#1a2740}.admin-attention header span[b-7s0bntdlli]{font-size:11px;font-weight:800;color:#526ee8;letter-spacing:.12em}.admin-attention h1[b-7s0bntdlli]{margin:8px 0}.admin-attention header p[b-7s0bntdlli]{color:#74829a}.items[b-7s0bntdlli]{display:grid;gap:13px;margin:24px 0}.items a[b-7s0bntdlli]{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid #e2e8f3;border-radius:13px;padding:16px;text-decoration:none;color:inherit}.items b[b-7s0bntdlli]{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#fff0f1;color:#c23a45}.items.warning b[b-7s0bntdlli]{background:#fff6df;color:#a06a08}.items div[b-7s0bntdlli]{display:grid;gap:4px}.items span[b-7s0bntdlli]{color:#74829a;font-size:12px}.items em[b-7s0bntdlli]{margin-inline-start:auto;color:#4665df;font-style:normal;font-size:12px}.clear[b-7s0bntdlli]{margin-top:22px;padding:18px;background:#edfaf2;color:#187648;border-radius:12px}
/* _content/AITranslationPlatform.Web/Components/Admin/Operations/AdminReports.razor.rz.scp.css */
.admin-reports[b-so52etzfvd]{max-width:1200px;margin:auto;padding:32px;color:#1a2740}.admin-reports header span[b-so52etzfvd]{font-size:11px;font-weight:800;color:#526ee8;letter-spacing:.12em}.admin-reports h1[b-so52etzfvd]{margin:8px 0}.admin-reports header p[b-so52etzfvd],.report-grid p[b-so52etzfvd]{color:#74829a}.filters[b-so52etzfvd]{display:flex;gap:10px;align-items:end;background:#fff;border:1px solid #e2e8f3;padding:15px;border-radius:13px}.filters label[b-so52etzfvd]{display:grid;gap:5px;font-size:12px}.filters input[b-so52etzfvd]{height:36px;border:1px solid #d9e1ef;border-radius:8px;padding:0 9px}.filters button[b-so52etzfvd],.report-grid a[b-so52etzfvd]{border:0;background:#3156db;color:#fff;border-radius:8px;padding:10px 13px;text-decoration:none}.report-grid[b-so52etzfvd]{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:24px 0}.report-grid article[b-so52etzfvd]{background:#fff;border:1px solid #e2e8f3;border-radius:13px;padding:17px}.report-grid h2[b-so52etzfvd]{font-size:16px;margin:0}.report-grid p[b-so52etzfvd]{font-size:12px;min-height:38px}.report-grid a[b-so52etzfvd]{display:inline-block;font-size:12px}@media(max-width:700px){.report-grid[b-so52etzfvd]{grid-template-columns:1fr}.filters[b-so52etzfvd]{align-items:stretch;flex-direction:column}}
/* _content/AITranslationPlatform.Web/Components/Admin/Readiness/AdminFinalReadiness.razor.rz.scp.css */
.admin-readiness-page[b-lwq00ju8r9] {
    display: grid;
    gap: 16px;
    color: var(--admin-text);
}

.admin-readiness-hero[b-lwq00ju8r9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
}

.admin-readiness-hero.is-good[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-success) 30%, var(--admin-line));
}

.admin-readiness-hero.is-warning[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-warning) 34%, var(--admin-line));
}

.admin-readiness-hero.is-danger[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-danger) 34%, var(--admin-line));
}

.admin-readiness-hero > div:first-child[b-lwq00ju8r9] {
    min-width: 0;
    max-width: 920px;
}

.admin-readiness-hero > div:first-child > span[b-lwq00ju8r9],
.admin-readiness-panel > header span[b-lwq00ju8r9],
.admin-readiness-release-gate span[b-lwq00ju8r9] {
    color: var(--admin-accent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.admin-readiness-hero h1[b-lwq00ju8r9] {
    margin: 6px 0 8px;
    font-size: 22px;
}

.admin-readiness-hero p[b-lwq00ju8r9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 10px;
    line-height: 1.8;
}

.admin-readiness-state[b-lwq00ju8r9] {
    min-width: 190px;
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface-soft);
}

.admin-readiness-state small[b-lwq00ju8r9] {
    color: var(--admin-muted);
    font-size: 7px;
    text-transform: uppercase;
}

.admin-readiness-state strong[b-lwq00ju8r9] {
    font-size: 11px;
}

.admin-readiness-state span[b-lwq00ju8r9] {
    color: var(--admin-muted);
    font-size: 7px;
    line-height: 1.55;
}

.admin-readiness-kpis[b-lwq00ju8r9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.admin-readiness-kpis article[b-lwq00ju8r9],
.admin-readiness-components article[b-lwq00ju8r9] {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface);
}

.admin-readiness-kpis article.is-warning[b-lwq00ju8r9] {
    background: color-mix(in srgb, var(--admin-warning) 5%, var(--admin-surface));
}

.admin-readiness-kpis article.is-danger[b-lwq00ju8r9] {
    background: color-mix(in srgb, var(--admin-danger) 5%, var(--admin-surface));
}

.admin-readiness-kpis span[b-lwq00ju8r9],
.admin-readiness-kpis strong[b-lwq00ju8r9] {
    display: block;
}

.admin-readiness-kpis span[b-lwq00ju8r9] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-readiness-kpis strong[b-lwq00ju8r9] {
    margin-top: 4px;
    font-size: 15px;
}

.admin-readiness-components[b-lwq00ju8r9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.admin-readiness-components article[b-lwq00ju8r9] {
    display: grid;
    gap: 5px;
}

.admin-readiness-components article.is-good[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-success) 25%, var(--admin-line));
}

.admin-readiness-components article.is-warning[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-warning) 28%, var(--admin-line));
}

.admin-readiness-components article.is-danger[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-danger) 28%, var(--admin-line));
}

.admin-readiness-components span[b-lwq00ju8r9] {
    color: var(--admin-muted);
    font-size: 6.5px;
    font-weight: 800;
}

.admin-readiness-components strong[b-lwq00ju8r9] {
    font-size: 9px;
    overflow-wrap: anywhere;
}

.admin-readiness-components small[b-lwq00ju8r9] {
    color: var(--admin-muted);
    font-size: 6.5px;
}

.admin-readiness-components a[b-lwq00ju8r9] {
    width: fit-content;
    margin-top: 3px;
    color: var(--admin-accent);
    font-size: 7px;
    font-weight: 800;
    text-decoration: none;
}

.admin-readiness-alert[b-lwq00ju8r9] {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface);
    font-size: 8px;
    line-height: 1.7;
}

.admin-readiness-alert.is-warning[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-warning) 30%, var(--admin-line));
    background: color-mix(in srgb, var(--admin-warning) 5%, var(--admin-surface));
}

.admin-readiness-alert.is-danger[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-danger) 30%, var(--admin-line));
    background: color-mix(in srgb, var(--admin-danger) 5%, var(--admin-surface));
}

.admin-readiness-panel[b-lwq00ju8r9] {
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
}

.admin-readiness-panel > header[b-lwq00ju8r9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-readiness-panel > header h2[b-lwq00ju8r9] {
    margin: 4px 0 0;
    font-size: 12px;
}

.admin-readiness-panel > header > strong[b-lwq00ju8r9] {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--admin-text-2);
    background: var(--admin-surface-soft);
    font-size: 7px;
}

.admin-readiness-checks[b-lwq00ju8r9] {
    display: grid;
}

.admin-readiness-checks article[b-lwq00ju8r9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--admin-line);
}

.admin-readiness-checks article:first-child[b-lwq00ju8r9] {
    border-top: 0;
}

.admin-readiness-checks article.is-danger[b-lwq00ju8r9] {
    background: color-mix(in srgb, var(--admin-danger) 4%, transparent);
}

.admin-readiness-checks article.is-warning[b-lwq00ju8r9] {
    background: color-mix(in srgb, var(--admin-warning) 4%, transparent);
}

.admin-readiness-checks article > div:first-child[b-lwq00ju8r9] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-readiness-checks article > div:first-child > span[b-lwq00ju8r9],
.admin-readiness-checks article small[b-lwq00ju8r9] {
    color: var(--admin-muted);
    font-size: 6.3px;
}

.admin-readiness-checks article strong[b-lwq00ju8r9] {
    color: var(--admin-text);
    font-size: 7.5px;
    overflow-wrap: anywhere;
}

.admin-readiness-check-state[b-lwq00ju8r9] {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 3px;
}

.admin-readiness-check-state > span[b-lwq00ju8r9] {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 6px;
    font-weight: 900;
}

.admin-readiness-check-state > span.is-success[b-lwq00ju8r9] {
    color: var(--admin-success);
    background: color-mix(in srgb, var(--admin-success) 9%, transparent);
}

.admin-readiness-check-state > span.is-warning[b-lwq00ju8r9] {
    color: var(--admin-warning);
    background: color-mix(in srgb, var(--admin-warning) 10%, transparent);
}

.admin-readiness-check-state > span.is-danger[b-lwq00ju8r9] {
    color: var(--admin-danger);
    background: color-mix(in srgb, var(--admin-danger) 9%, transparent);
}

.admin-readiness-evidence-grid[b-lwq00ju8r9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-readiness-panel-note[b-lwq00ju8r9] {
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--admin-line);
    color: var(--admin-muted);
    font-size: 7px;
    line-height: 1.7;
}

.admin-readiness-evidence-list[b-lwq00ju8r9] {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
}

.admin-readiness-evidence-list code[b-lwq00ju8r9] {
    display: block;
    padding: 6px 7px;
    border: 1px solid var(--admin-line);
    border-radius: 7px;
    color: var(--admin-text-2);
    background: var(--admin-surface-soft);
    font-size: 6.5px;
    overflow-wrap: anywhere;
}

.admin-readiness-release-gate[b-lwq00ju8r9] {
    display: grid;
    grid-template-columns: minmax(180px, .35fr) 1fr;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
}

.admin-readiness-release-gate.is-good[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-success) 30%, var(--admin-line));
}

.admin-readiness-release-gate.is-warning[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-warning) 30%, var(--admin-line));
}

.admin-readiness-release-gate.is-danger[b-lwq00ju8r9] {
    border-color: color-mix(in srgb, var(--admin-danger) 30%, var(--admin-line));
}

.admin-readiness-release-gate h2[b-lwq00ju8r9] {
    margin: 4px 0 0;
    font-size: 13px;
}

.admin-readiness-release-gate p[b-lwq00ju8r9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 8px;
    line-height: 1.75;
}

.admin-readiness-empty[b-lwq00ju8r9] {
    padding: 28px;
    border: 1px dashed var(--admin-line);
    border-radius: 14px;
    color: var(--admin-muted);
    background: var(--admin-surface);
    text-align: center;
    font-size: 9px;
}

@media (max-width: 900px) {
    .admin-readiness-kpis[b-lwq00ju8r9],
    .admin-readiness-components[b-lwq00ju8r9],
    .admin-readiness-evidence-grid[b-lwq00ju8r9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-readiness-components article:last-child[b-lwq00ju8r9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .admin-readiness-hero[b-lwq00ju8r9],
    .admin-readiness-checks article[b-lwq00ju8r9] {
        flex-direction: column;
    }

    .admin-readiness-state[b-lwq00ju8r9] {
        width: 100%;
        min-width: 0;
    }

    .admin-readiness-kpis[b-lwq00ju8r9],
    .admin-readiness-components[b-lwq00ju8r9],
    .admin-readiness-evidence-grid[b-lwq00ju8r9],
    .admin-readiness-release-gate[b-lwq00ju8r9] {
        grid-template-columns: 1fr;
    }

    .admin-readiness-components article:last-child[b-lwq00ju8r9] {
        grid-column: auto;
    }

    .admin-readiness-check-state[b-lwq00ju8r9] {
        justify-items: start;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Settings/AdminDataRetention.razor.rz.scp.css */
.admin-data-retention[b-1qi4ex1ral] { max-width: 1260px; margin: 0 auto; padding: 34px 30px 48px; color: #1a2740; }

.page-header[b-1qi4ex1ral] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.eyebrow[b-1qi4ex1ral] { display: block; color: #506de5; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.page-header h1[b-1qi4ex1ral] { margin: 8px 0 10px; font-size: 30px; }
.page-header p[b-1qi4ex1ral] { margin: 0; color: #73819a; line-height: 1.8; }

.state-badge[b-1qi4ex1ral] { border-radius: 10px; padding: 10px 13px; font-size: 12px; white-space: nowrap; border: 1px solid; }
.state-badge span[b-1qi4ex1ral] { display: inline-grid; place-items: center; color: #fff; border-radius: 50%; width: 18px; height: 18px; margin-left: 6px; }
.state-badge.on[b-1qi4ex1ral] { border-color: #cdebdc; background: #f0fbf5; color: #19774b; }
.state-badge.on span[b-1qi4ex1ral] { background: #27a765; }
.state-badge.off[b-1qi4ex1ral] { border-color: #e2e8f3; background: #f6f8fc; color: #5d6b84; }
.state-badge.off span[b-1qi4ex1ral] { background: #9aa6ba; }

.setting-cards[b-1qi4ex1ral] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.setting-card[b-1qi4ex1ral], .switch-card[b-1qi4ex1ral], .status-card[b-1qi4ex1ral] { background: #fff; border: 1px solid #e2e8f3; border-radius: 16px; box-shadow: 0 8px 25px rgba(37, 55, 94, .045); padding: 22px; }
.card-heading[b-1qi4ex1ral] { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #edf1f7; }
.card-heading h2[b-1qi4ex1ral], .switch-card h2[b-1qi4ex1ral] { font-size: 17px; margin: 0 0 5px; }
.card-heading p[b-1qi4ex1ral], .switch-card p[b-1qi4ex1ral] { margin: 0; color: #74829a; font-size: 12px; line-height: 1.7; }
.card-icon[b-1qi4ex1ral] { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #eaf0ff; color: #4563dd; font-size: 21px; flex: none; }
.card-icon.purple[b-1qi4ex1ral] { background: #f2ecff; color: #7b5cdb; }

.fields[b-1qi4ex1ral] { display: grid; gap: 17px; padding-top: 19px; }
.fields label[b-1qi4ex1ral] { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.fields label > span[b-1qi4ex1ral] { color: #3d4c65; }
.fields small[b-1qi4ex1ral] { color: #8793a8; font-size: 11px; font-weight: 400; line-height: 1.7; }
.fields input[b-1qi4ex1ral] { box-sizing: border-box; width: 100%; height: 40px; padding: 0 11px; background: #fbfcff; border: 1px solid #d9e1ef; border-radius: 9px; color: #23324b; outline: none; }
.fields input:focus[b-1qi4ex1ral] { border-color: #5773e7; box-shadow: 0 0 0 3px #edf1ff; }
.unit-input[b-1qi4ex1ral] { position: relative; }
.unit-input input[b-1qi4ex1ral] { padding-left: 46px; }
.unit-input em[b-1qi4ex1ral] { position: absolute; left: 11px; top: 12px; color: #7e8aa0; font-size: 11px; font-style: normal; }

.switch-card[b-1qi4ex1ral] { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; background: #fffaf3; border-color: #f3dfbd; }
.switch-card > div[b-1qi4ex1ral] { display: flex; align-items: center; gap: 13px; }
.warning-icon[b-1qi4ex1ral] { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff0d6; color: #ba7414; font-weight: 900; font-size: 20px; flex: none; }

.toggle-row[b-1qi4ex1ral] { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; cursor: pointer; }
.toggle-row span[b-1qi4ex1ral] { display: grid; gap: 4px; }
.toggle-row strong[b-1qi4ex1ral] { font-size: 13px; }
.toggle-row small[b-1qi4ex1ral] { color: #7c899f; font-size: 11px; line-height: 1.45; }
.toggle-row input[b-1qi4ex1ral] { position: absolute; opacity: 0; }
.toggle-row i[b-1qi4ex1ral] { position: relative; display: block; width: 42px; height: 23px; background: #cbd4e2; border-radius: 100px; transition: .2s; flex: none; }
.toggle-row i[b-1qi4ex1ral]:after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; top: 3px; right: 3px; box-shadow: 0 1px 3px #889; transition: .2s; }
.toggle-row input:checked + i[b-1qi4ex1ral] { background: #4867e7; }
.toggle-row input:checked + i[b-1qi4ex1ral]:after { right: 22px; }
.toggle-row input:focus-visible + i[b-1qi4ex1ral] { box-shadow: 0 0 0 3px #edf1ff; }
.switch-toggle[b-1qi4ex1ral] { min-width: 130px; padding: 0; }

.status-cards[b-1qi4ex1ral] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.status-card h3[b-1qi4ex1ral] { margin: 0 0 4px; font-size: 15px; }
.status-card > small[b-1qi4ex1ral] { color: #8793a8; font-size: 11px; }
.status-card dl[b-1qi4ex1ral] { display: grid; gap: 8px; margin: 14px 0 0; }
.status-card dl div[b-1qi4ex1ral] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #f7f9fd; }
.status-card dt[b-1qi4ex1ral] { color: #5d6b84; font-size: 12px; }
.status-card dd[b-1qi4ex1ral] { margin: 0; font-size: 16px; font-weight: 800; color: #23324b; }
.muted[b-1qi4ex1ral] { margin: 12px 0 0; color: #74829a; font-size: 12px; line-height: 1.7; }
.warning[b-1qi4ex1ral] { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #fff4e5; color: #9a5d0a; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }

.form-footer[b-1qi4ex1ral] { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 20px; }
.form-footer p[b-1qi4ex1ral] { color: #8190a7; font-size: 12px; margin: 0; }
.form-footer button[b-1qi4ex1ral] { border: 0; border-radius: 10px; background: #3156db; color: #fff; padding: 12px 18px; font-weight: 700; box-shadow: 0 8px 18px rgba(49, 86, 219, .2); cursor: pointer; }
.form-footer button span[b-1qi4ex1ral] { font-size: 16px; margin-left: 5px; }

.notice[b-1qi4ex1ral], .error[b-1qi4ex1ral], .loading-state[b-1qi4ex1ral] { padding: 13px 15px; border-radius: 11px; margin-bottom: 16px; }
.notice[b-1qi4ex1ral] { background: #eaf8ef; color: #176e40; }
.error[b-1qi4ex1ral] { background: #fff0f1; color: #b83442; }
.loading-state[b-1qi4ex1ral] { background: #fff; color: #73819a; border: 1px solid #e2e8f3; }

@media (max-width: 850px) {
    .setting-cards[b-1qi4ex1ral], .status-cards[b-1qi4ex1ral] { grid-template-columns: 1fr; }
    .page-header[b-1qi4ex1ral] { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .admin-data-retention[b-1qi4ex1ral] { padding: 22px 16px; }
    .switch-card[b-1qi4ex1ral], .form-footer[b-1qi4ex1ral] { align-items: flex-start; flex-direction: column; }
    .switch-toggle[b-1qi4ex1ral] { width: 100%; }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Settings/AdminSystemSettings.razor.rz.scp.css */
.admin-system-settings[b-1ygwavh298]{max-width:1260px;margin:0 auto;padding:34px 30px 48px;color:#1a2740}.page-header[b-1ygwavh298]{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}.eyebrow[b-1ygwavh298]{display:block;color:#506de5;font-size:11px;font-weight:800;letter-spacing:.12em}.page-header h1[b-1ygwavh298]{margin:8px 0 10px;font-size:30px}.page-header p[b-1ygwavh298]{margin:0;color:#73819a}.safe-badge[b-1ygwavh298]{border:1px solid #cdebdc;background:#f0fbf5;color:#19774b;border-radius:10px;padding:10px 13px;font-size:12px;white-space:nowrap}.safe-badge span[b-1ygwavh298]{display:inline-grid;place-items:center;background:#27a765;color:#fff;border-radius:50%;width:18px;height:18px;margin-left:6px}.setting-cards[b-1ygwavh298]{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setting-card[b-1ygwavh298],.maintenance-card[b-1ygwavh298]{background:#fff;border:1px solid #e2e8f3;border-radius:16px;box-shadow:0 8px 25px rgba(37,55,94,.045);padding:22px}.card-heading[b-1ygwavh298]{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid #edf1f7}.card-heading h2[b-1ygwavh298],.maintenance-card h2[b-1ygwavh298]{font-size:17px;margin:0 0 5px}.card-heading p[b-1ygwavh298],.maintenance-card p[b-1ygwavh298]{margin:0;color:#74829a;font-size:12px;line-height:1.7}.card-icon[b-1ygwavh298]{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eaf0ff;color:#4563dd;font-size:21px}.card-icon.purple[b-1ygwavh298]{background:#f2ecff;color:#7b5cdb}.fields[b-1ygwavh298]{display:grid;gap:17px;padding-top:19px}.two-columns[b-1ygwavh298]{grid-template-columns:1fr 1fr}.fields label[b-1ygwavh298],.similarity[b-1ygwavh298]{display:grid;gap:7px;font-size:12px;font-weight:700}.fields label>span[b-1ygwavh298],.similarity>span[b-1ygwavh298]{color:#3d4c65}.fields small[b-1ygwavh298],.similarity small[b-1ygwavh298]{color:#8793a8;font-size:10px;font-weight:400}.fields input[b-1ygwavh298],.fields select[b-1ygwavh298],.similarity input[b-1ygwavh298]{box-sizing:border-box;width:100%;height:40px;padding:0 11px;background:#fbfcff;border:1px solid #d9e1ef;border-radius:9px;color:#23324b;outline:none}.fields input:focus[b-1ygwavh298],.fields select:focus[b-1ygwavh298],.similarity input:focus[b-1ygwavh298]{border-color:#5773e7;box-shadow:0 0 0 3px #edf1ff}.unit-input[b-1ygwavh298]{position:relative}.unit-input input[b-1ygwavh298]{padding-left:43px}.unit-input em[b-1ygwavh298]{position:absolute;left:11px;top:12px;color:#7e8aa0;font-size:11px;font-style:normal}.toggle-list[b-1ygwavh298]{padding:14px 0 8px}.toggle-row[b-1ygwavh298]{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;cursor:pointer}.toggle-row span[b-1ygwavh298]{display:grid;gap:4px}.toggle-row strong[b-1ygwavh298]{font-size:13px}.toggle-row small[b-1ygwavh298]{color:#7c899f;font-size:11px;line-height:1.45}.toggle-row input[b-1ygwavh298]{position:absolute;opacity:0}.toggle-row i[b-1ygwavh298]{position:relative;display:block;width:42px;height:23px;background:#cbd4e2;border-radius:100px;transition:.2s;flex:none}.toggle-row i[b-1ygwavh298]:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:3px;right:3px;box-shadow:0 1px 3px #889}.toggle-row input:checked+i[b-1ygwavh298]{background:#4867e7}.toggle-row input:checked+i[b-1ygwavh298]:after{right:22px}.similarity[b-1ygwavh298]{padding-top:13px;border-top:1px solid #edf1f7}.similarity>div[b-1ygwavh298]{display:flex;align-items:center;gap:9px}.similarity b[b-1ygwavh298]{min-width:47px;padding:10px 6px;border-radius:8px;background:#eef2ff;color:#4965dd;text-align:center;font-size:12px}.maintenance-card[b-1ygwavh298]{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:18px;background:#fffaf3;border-color:#f3dfbd}.maintenance-card>div[b-1ygwavh298]{display:flex;align-items:center;gap:13px}.warning-icon[b-1ygwavh298]{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff0d6;color:#ba7414;font-weight:900;font-size:20px}.maintenance-toggle[b-1ygwavh298]{min-width:130px;padding:0}.form-footer[b-1ygwavh298]{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.form-footer p[b-1ygwavh298]{color:#8190a7;font-size:12px}.form-footer button[b-1ygwavh298]{border:0;border-radius:10px;background:#3156db;color:#fff;padding:12px 18px;font-weight:700;box-shadow:0 8px 18px rgba(49,86,219,.2);cursor:pointer}.form-footer button span[b-1ygwavh298]{font-size:16px;margin-left:5px}.notice[b-1ygwavh298],.error[b-1ygwavh298],.loading-state[b-1ygwavh298]{padding:13px 15px;border-radius:11px;margin-bottom:16px}.notice[b-1ygwavh298]{background:#eaf8ef;color:#176e40}.error[b-1ygwavh298]{background:#fff0f1;color:#b83442}.loading-state[b-1ygwavh298]{background:#fff;color:#73819a;border:1px solid #e2e8f3}@media(max-width:850px){.setting-cards[b-1ygwavh298]{grid-template-columns:1fr}.page-header[b-1ygwavh298]{align-items:flex-start;flex-direction:column}.two-columns[b-1ygwavh298]{grid-template-columns:1fr}}@media(max-width:560px){.admin-system-settings[b-1ygwavh298]{padding:22px 16px}.maintenance-card[b-1ygwavh298],.form-footer[b-1ygwavh298]{align-items:flex-start;flex-direction:column}.maintenance-toggle[b-1ygwavh298]{width:100%}}
/* _content/AITranslationPlatform.Web/Components/Admin/Sms/AdminSmsSettings.razor.rz.scp.css */
.admin-sms[b-r2vmykulwo] {
    max-width: 1260px;
    margin: 0 auto;
    padding: 34px 30px 48px;
    color: #1a2740;
}

.page-header[b-r2vmykulwo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 26px;
}

.eyebrow[b-r2vmykulwo] {
    display: block;
    color: #506de5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.page-header h1[b-r2vmykulwo] {
    margin: 8px 0 10px;
    font-size: 30px;
}

.page-header p[b-r2vmykulwo] {
    margin: 0;
    color: #73819a;
    max-width: 70ch;
    line-height: 1.75;
}

.status-badge[b-r2vmykulwo] {
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge span[b-r2vmykulwo] {
    margin-inline-end: 6px;
}

.status-badge.is-live[b-r2vmykulwo] {
    border: 1px solid #cdebdc;
    background: #f0fbf5;
    color: #19774b;
}

.status-badge.is-off[b-r2vmykulwo] {
    border: 1px solid #e6dcc4;
    background: #fffaf3;
    color: #92651a;
}

.reason-card[b-r2vmykulwo] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fffaf3;
    border: 1px solid #f3dfbd;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.reason-icon[b-r2vmykulwo] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff0d6;
    color: #ba7414;
    font-weight: 900;
}

.reason-card strong[b-r2vmykulwo] {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.reason-card p[b-r2vmykulwo] {
    margin: 0;
    color: #7d6b4c;
    font-size: 12px;
    line-height: 1.7;
}

.setting-cards[b-r2vmykulwo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.setting-card[b-r2vmykulwo],
.audit-card[b-r2vmykulwo],
.test-card[b-r2vmykulwo] {
    background: #fff;
    border: 1px solid #e2e8f3;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(37,55,94,.045);
    padding: 22px;
}

.card-heading[b-r2vmykulwo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f7;
}

.card-heading h2[b-r2vmykulwo] {
    font-size: 17px;
    margin: 0 0 5px;
}

.card-heading p[b-r2vmykulwo] {
    margin: 0;
    color: #74829a;
    font-size: 12px;
    line-height: 1.7;
}

.card-icon[b-r2vmykulwo] {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #eaf0ff;
    color: #4563dd;
    font-size: 20px;
}

.card-icon.purple[b-r2vmykulwo] {
    background: #f2ecff;
    color: #7b5cdb;
}

.card-icon.green[b-r2vmykulwo] {
    background: #e9f8ef;
    color: #1f8a52;
}

.fields[b-r2vmykulwo] {
    display: grid;
    gap: 17px;
    padding-top: 19px;
}

.fields label[b-r2vmykulwo] {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
}

.fields label > span[b-r2vmykulwo] {
    color: #3d4c65;
}

.fields small[b-r2vmykulwo] {
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}

/* where the new-user SMS goes, or why it cannot go anywhere yet */
.recipient-note[b-r2vmykulwo] {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f7f9fd;
    color: #5d6b84;
    font-size: 11px;
    line-height: 1.8;
}

.recipient-note bdi[b-r2vmykulwo] {
    font-weight: 700;
    color: #3d4c65;
}

.recipient-note.missing[b-r2vmykulwo] {
    background: #fff4e5;
    color: #9a5d0a;
}

.fields input[b-r2vmykulwo],
.fields select[b-r2vmykulwo],
.fields textarea[b-r2vmykulwo] {
    box-sizing: border-box;
    width: 100%;
    padding: 0 11px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.fields input[b-r2vmykulwo],
.fields select[b-r2vmykulwo] {
    height: 40px;
}

.fields textarea[b-r2vmykulwo] {
    padding: 11px;
    line-height: 1.7;
    resize: vertical;
}

.fields input:focus[b-r2vmykulwo],
.fields select:focus[b-r2vmykulwo],
.fields textarea:focus[b-r2vmykulwo] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.provider-row[b-r2vmykulwo] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}

.provider-row > span[b-r2vmykulwo] {
    color: #3d4c65;
}

.provider-row b[b-r2vmykulwo] {
    padding: 3px 10px;
    border-radius: 100px;
    background: #eef2ff;
    color: #4965dd;
    font-size: 12px;
}

.provider-row small[b-r2vmykulwo] {
    grid-column: 1 / -1;
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.7;
}

.api-key b.installed[b-r2vmykulwo] {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 100px;
    background: #eef2ff;
    color: #4965dd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.mode-block[b-r2vmykulwo] {
    display: grid;
    gap: 15px;
    padding: 16px;
    border: 1px dashed #dde4f1;
    border-radius: 12px;
    background: #fbfcff;
}

.mode-block h3[b-r2vmykulwo] {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: #4c5b74;
    letter-spacing: .02em;
}

.toggle-row[b-r2vmykulwo] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
}

.toggle-row > span[b-r2vmykulwo] {
    display: grid;
    gap: 4px;
}

.toggle-row strong[b-r2vmykulwo] {
    font-size: 13px;
}

.toggle-row small[b-r2vmykulwo] {
    color: #7c899f;
    font-size: 11px;
    line-height: 1.5;
}

.toggle-row input[b-r2vmykulwo] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-row i[b-r2vmykulwo] {
    position: relative;
    display: block;
    flex: none;
    width: 42px;
    height: 23px;
    background: #cbd4e2;
    border-radius: 100px;
    transition: .2s;
}

.toggle-row i[b-r2vmykulwo]:after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    inset-inline-start: 3px;
    box-shadow: 0 1px 3px #889;
    transition: .2s;
}

.toggle-row input:checked + i[b-r2vmykulwo] {
    background: #4867e7;
}

.toggle-row input:checked + i[b-r2vmykulwo]:after {
    inset-inline-start: 22px;
}

.toggle-row.danger input:checked + i[b-r2vmykulwo] {
    background: #d9534f;
}

.audit-card[b-r2vmykulwo] {
    margin-top: 18px;
}

.audit-card label[b-r2vmykulwo] {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #3d4c65;
}

.audit-card input[b-r2vmykulwo] {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 11px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.audit-card input:focus[b-r2vmykulwo] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.form-footer[b-r2vmykulwo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.form-footer p[b-r2vmykulwo] {
    margin: 0;
    color: #8190a7;
    font-size: 12px;
    line-height: 1.7;
}

.form-footer button[b-r2vmykulwo] {
    flex: none;
    border: 0;
    border-radius: 10px;
    background: #3156db;
    color: #fff;
    padding: 12px 18px;
    font: inherit;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(49,86,219,.2);
    cursor: pointer;
}

.form-footer button span[b-r2vmykulwo] {
    font-size: 16px;
    margin-inline-end: 5px;
}

.test-card[b-r2vmykulwo] {
    margin-top: 18px;
}

.test-form[b-r2vmykulwo] {
    display: flex;
    gap: 10px;
    padding-top: 19px;
}

.test-form input[b-r2vmykulwo] {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    background: #fbfcff;
    border: 1px solid #d9e1ef;
    border-radius: 9px;
    color: #23324b;
    font: inherit;
    outline: none;
    direction: ltr;
    text-align: start;
}

.test-form input:focus[b-r2vmykulwo] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px #edf1ff;
}

.test-form button[b-r2vmykulwo] {
    flex: none;
    border: 0;
    border-radius: 10px;
    background: #1f8a52;
    color: #fff;
    padding: 0 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.last-run[b-r2vmykulwo] {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
}

.last-run.ok[b-r2vmykulwo] {
    color: #19774b;
}

.last-run.bad[b-r2vmykulwo] {
    color: #b83442;
}

.last-run span[b-r2vmykulwo] {
    color: #8793a8;
}

.notice[b-r2vmykulwo],
.error[b-r2vmykulwo],
.loading-state[b-r2vmykulwo] {
    padding: 13px 15px;
    border-radius: 11px;
    margin-bottom: 16px;
    line-height: 1.7;
}

.notice small[b-r2vmykulwo],
.error small[b-r2vmykulwo] {
    display: block;
    margin-top: 5px;
    opacity: .8;
    font-size: 11px;
}

.notice[b-r2vmykulwo] {
    background: #eaf8ef;
    color: #176e40;
}

.error[b-r2vmykulwo] {
    background: #fff0f1;
    color: #b83442;
}

.loading-state[b-r2vmykulwo] {
    background: #fff;
    color: #73819a;
    border: 1px solid #e2e8f3;
}


/* =====================================================
   DARK
   ===================================================== */

[data-theme="dark"] .admin-sms[b-r2vmykulwo] {
    color: #dbe3f2;
}

[data-theme="dark"] .page-header p[b-r2vmykulwo],
[data-theme="dark"] .card-heading p[b-r2vmykulwo],
[data-theme="dark"] .fields small[b-r2vmykulwo],
[data-theme="dark"] .form-footer p[b-r2vmykulwo],
[data-theme="dark"] .toggle-row small[b-r2vmykulwo],
[data-theme="dark"] .last-run span[b-r2vmykulwo] {
    color: #8b98b1;
}

[data-theme="dark"] .setting-card[b-r2vmykulwo],
[data-theme="dark"] .audit-card[b-r2vmykulwo],
[data-theme="dark"] .test-card[b-r2vmykulwo],
[data-theme="dark"] .loading-state[b-r2vmykulwo] {
    background: #161d2c;
    border-color: #26314a;
    box-shadow: none;
}

[data-theme="dark"] .card-heading[b-r2vmykulwo] {
    border-bottom-color: #26314a;
}

[data-theme="dark"] .fields label > span[b-r2vmykulwo],
[data-theme="dark"] .audit-card label[b-r2vmykulwo],
[data-theme="dark"] .mode-block h3[b-r2vmykulwo] {
    color: #b6c2d8;
}

[data-theme="dark"] .fields input[b-r2vmykulwo],
[data-theme="dark"] .fields select[b-r2vmykulwo],
[data-theme="dark"] .fields textarea[b-r2vmykulwo],
[data-theme="dark"] .audit-card input[b-r2vmykulwo],
[data-theme="dark"] .test-form input[b-r2vmykulwo] {
    background: #101623;
    border-color: #2b3752;
    color: #e4ebf8;
}

[data-theme="dark"] .recipient-note[b-r2vmykulwo] {
    background: #101623;
    color: #8b98b1;
}

[data-theme="dark"] .recipient-note bdi[b-r2vmykulwo] {
    color: #e4ebf8;
}

[data-theme="dark"] .recipient-note.missing[b-r2vmykulwo] {
    background: #3a2c12;
    color: #e2b563;
}

[data-theme="dark"] .fields input:focus[b-r2vmykulwo],
[data-theme="dark"] .fields select:focus[b-r2vmykulwo],
[data-theme="dark"] .fields textarea:focus[b-r2vmykulwo],
[data-theme="dark"] .audit-card input:focus[b-r2vmykulwo],
[data-theme="dark"] .test-form input:focus[b-r2vmykulwo] {
    border-color: #5773e7;
    box-shadow: 0 0 0 3px rgba(87,115,231,.18);
}

[data-theme="dark"] .mode-block[b-r2vmykulwo] {
    background: #121926;
    border-color: #2b3752;
}

[data-theme="dark"] .toggle-row i[b-r2vmykulwo] {
    background: #38455f;
}

[data-theme="dark"] .status-badge.is-live[b-r2vmykulwo] {
    background: #10281c;
    border-color: #1f5138;
    color: #5fd598;
}

[data-theme="dark"] .status-badge.is-off[b-r2vmykulwo],
[data-theme="dark"] .reason-card[b-r2vmykulwo] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #e2b563;
}

[data-theme="dark"] .reason-card p[b-r2vmykulwo] {
    color: #c2a273;
}

[data-theme="dark"] .reason-icon[b-r2vmykulwo] {
    background: #3a2c12;
    color: #e2b563;
}

[data-theme="dark"] .card-icon[b-r2vmykulwo] {
    background: #1b2540;
    color: #7d97f5;
}

[data-theme="dark"] .card-icon.purple[b-r2vmykulwo] {
    background: #241c3d;
    color: #a58bf0;
}

[data-theme="dark"] .card-icon.green[b-r2vmykulwo] {
    background: #10281c;
    color: #5fd598;
}

[data-theme="dark"] .api-key b.installed[b-r2vmykulwo],
[data-theme="dark"] .provider-row b[b-r2vmykulwo] {
    background: #1b2540;
    color: #7d97f5;
}

[data-theme="dark"] .provider-row > span[b-r2vmykulwo] {
    color: #b6c2d8;
}

[data-theme="dark"] .provider-row small[b-r2vmykulwo] {
    color: #8b98b1;
}

[data-theme="dark"] .notice[b-r2vmykulwo] {
    background: #10281c;
    color: #5fd598;
}

[data-theme="dark"] .error[b-r2vmykulwo] {
    background: #2a1418;
    color: #f08a95;
}

[data-theme="dark"] .last-run.ok[b-r2vmykulwo] {
    color: #5fd598;
}

[data-theme="dark"] .last-run.bad[b-r2vmykulwo] {
    color: #f08a95;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 850px) {
    .setting-cards[b-r2vmykulwo] {
        grid-template-columns: 1fr;
    }

    .page-header[b-r2vmykulwo] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .admin-sms[b-r2vmykulwo] {
        padding: 22px 16px;
    }

    .form-footer[b-r2vmykulwo],
    .test-form[b-r2vmykulwo] {
        flex-direction: column;
        align-items: stretch;
    }

    .test-form button[b-r2vmykulwo] {
        height: 42px;
    }
}

/* =====================================================
   DELIVERY DIAGNOSTICS
   ===================================================== */

.diagnostics-form[b-r2vmykulwo] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #edf1f7;
}

.diagnostics-form button[b-r2vmykulwo] {
    flex: none;
    border: 1px solid #d8dcfb;
    border-radius: 10px;
    background: #f6f7ff;
    color: #4a63d8;
    padding: 10px 15px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.diagnostics-form button:hover[b-r2vmykulwo] {
    background: #eef1ff;
}

.diagnostics-form small[b-r2vmykulwo] {
    color: #8793a8;
    font-size: 11px;
}

.diagnostics-result[b-r2vmykulwo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #e2e8f3;
    border-radius: 12px;
    background: #fbfcff;
}

.diagnostics-result > div[b-r2vmykulwo] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.diagnostics-result span[b-r2vmykulwo] {
    color: #8793a8;
    font-size: 10.5px;
    font-weight: 700;
}

.diagnostics-result strong[b-r2vmykulwo] {
    font-size: 13px;
    color: #26304a;
}

.diagnostics-result strong.ok[b-r2vmykulwo] {
    color: #19774b;
}

.diagnostics-result strong.bad[b-r2vmykulwo] {
    color: #b83442;
}

.diagnostics-result em[b-r2vmykulwo],
.diagnostics-note[b-r2vmykulwo] {
    font-style: normal;
    font-size: 10.5px;
    color: #8793a8;
    line-height: 1.7;
}

.diagnostics-hint[b-r2vmykulwo] {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #f3dfbd;
    border-radius: 11px;
    background: #fffaf3;
    color: #7d6b4c;
    font-size: 11.5px;
    line-height: 1.8;
}

[data-theme="dark"] .diagnostics-form[b-r2vmykulwo] {
    border-top-color: #26314a;
}

[data-theme="dark"] .diagnostics-form button[b-r2vmykulwo] {
    background: #161c2e;
    border-color: #2c3556;
    color: #8ba3f7;
}

[data-theme="dark"] .diagnostics-result[b-r2vmykulwo] {
    background: #121926;
    border-color: #26314a;
}

[data-theme="dark"] .diagnostics-result strong[b-r2vmykulwo] {
    color: #dfe6f6;
}

[data-theme="dark"] .diagnostics-result strong.ok[b-r2vmykulwo] {
    color: #5fd598;
}

[data-theme="dark"] .diagnostics-result strong.bad[b-r2vmykulwo] {
    color: #f08a95;
}

[data-theme="dark"] .diagnostics-result span[b-r2vmykulwo],
[data-theme="dark"] .diagnostics-result em[b-r2vmykulwo],
[data-theme="dark"] .diagnostics-note[b-r2vmykulwo],
[data-theme="dark"] .diagnostics-form small[b-r2vmykulwo] {
    color: #8b98b1;
}

[data-theme="dark"] .diagnostics-hint[b-r2vmykulwo] {
    background: #241c0f;
    border-color: #4c3a18;
    color: #c2a273;
}

@media (max-width: 620px) {
    .diagnostics-result[b-r2vmykulwo] {
        grid-template-columns: 1fr;
    }

    .diagnostics-form[b-r2vmykulwo] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Storage/AdminStorage.razor.rz.scp.css */
.admin-storage-page[b-4o0414mbam] { max-width: 1500px; margin: 0 auto; padding: 30px; color: #17223b; }
.admin-storage-hero[b-4o0414mbam], .admin-storage-panel > header[b-4o0414mbam], .admin-storage-cleanup[b-4o0414mbam] { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.admin-storage-hero > div > span[b-4o0414mbam], .admin-storage-panel header span[b-4o0414mbam], .admin-storage-cleanup span[b-4o0414mbam] { color: #61708e; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.admin-storage-hero h1[b-4o0414mbam] { margin: 8px 0; font-size: 2rem; }.admin-storage-hero p[b-4o0414mbam] { max-width: 760px; margin: 0; color: #60708c; line-height: 1.8; }
.admin-storage-refresh[b-4o0414mbam] { padding: 11px 16px; border-radius: 10px; background: #eaf0ff; color: #244cc6; text-decoration: none; font-weight: 700; white-space: nowrap; }
.admin-storage-summary[b-4o0414mbam] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }.admin-storage-metric[b-4o0414mbam], .admin-storage-panel[b-4o0414mbam], .admin-storage-cleanup[b-4o0414mbam] { background: #fff; border: 1px solid #e3e9f4; border-radius: 14px; box-shadow: 0 8px 24px rgba(34, 55, 95, .05); }
.admin-storage-metric[b-4o0414mbam] { padding: 18px; }.admin-storage-metric span[b-4o0414mbam], .admin-storage-metric small[b-4o0414mbam] { display: block; color: #6d7b94; font-size: .8rem; }.admin-storage-metric strong[b-4o0414mbam] { display: block; margin: 8px 0 3px; font-size: 1.6rem; }.admin-storage-metric.is-warning[b-4o0414mbam] { border-color: #f0c56c; }.admin-storage-metric.is-danger[b-4o0414mbam] { border-color: #ef9b9b; }
.admin-storage-panel[b-4o0414mbam] { padding: 20px; }.admin-storage-panel > p[b-4o0414mbam] { color: #66748d; line-height: 1.8; margin: 14px 0 0; }.admin-storage-panel h2[b-4o0414mbam], .admin-storage-cleanup h2[b-4o0414mbam] { margin: 6px 0 0; font-size: 1.1rem; }.admin-storage-panel header code[b-4o0414mbam] { display: block; margin-top: 8px; color: #42516d; overflow-wrap: anywhere; }.admin-storage-panel header > small[b-4o0414mbam] { color: #75829a; white-space: nowrap; }
.admin-storage-grid[b-4o0414mbam] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }.admin-storage-empty[b-4o0414mbam], .admin-storage-state[b-4o0414mbam] { padding: 30px 0; color: #68758d; }.admin-storage-state.is-error[b-4o0414mbam], .admin-storage-notice.is-error[b-4o0414mbam] { color: #a43030; }.admin-storage-notice[b-4o0414mbam] { margin: 18px 0; padding: 13px 16px; border-radius: 10px; }.admin-storage-notice.is-success[b-4o0414mbam] { color: #17724b; background: #e9f8f0; }.admin-storage-notice.is-error[b-4o0414mbam] { background: #fff0f0; }
.admin-storage-table-wrap[b-4o0414mbam] { overflow: auto; margin-top: 16px; }.admin-storage-table-wrap table[b-4o0414mbam] { width: 100%; border-collapse: collapse; font-size: .84rem; }.admin-storage-table-wrap th[b-4o0414mbam], .admin-storage-table-wrap td[b-4o0414mbam] { padding: 10px 8px; text-align: start; border-bottom: 1px solid #edf0f6; vertical-align: top; }.admin-storage-table-wrap th[b-4o0414mbam] { color: #71809a; font-size: .72rem; }.admin-storage-table-wrap code[b-4o0414mbam] { overflow-wrap: anywhere; color: #40506c; }.admin-storage-table-wrap small[b-4o0414mbam] { display: block; color: #9a5a24; margin-top: 4px; }
.admin-storage-cleanup[b-4o0414mbam] { margin-top: 18px; padding: 22px; background: #fffaf0; border-color: #f1d49b; }.admin-storage-cleanup p[b-4o0414mbam] { color: #6c6656; line-height: 1.8; max-width: 670px; }.admin-storage-cleanup form[b-4o0414mbam] { width: min(430px, 100%); }.admin-storage-cleanup label[b-4o0414mbam] { display: block; font-size: .82rem; font-weight: 700; }.admin-storage-cleanup textarea[b-4o0414mbam] { box-sizing: border-box; display: block; width: 100%; min-height: 82px; padding: 10px; margin: 8px 0 10px; border: 1px solid #d7cda9; border-radius: 9px; font: inherit; resize: vertical; }.admin-storage-cleanup button[b-4o0414mbam] { border: 0; border-radius: 9px; background: #b42318; color: #fff; padding: 11px 14px; font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 900px) { .admin-storage-summary[b-4o0414mbam], .admin-storage-grid[b-4o0414mbam] { grid-template-columns: 1fr 1fr; }.admin-storage-hero[b-4o0414mbam], .admin-storage-cleanup[b-4o0414mbam] { flex-direction: column; }.admin-storage-cleanup form[b-4o0414mbam] { width: 100%; } }
@media (max-width: 560px) { .admin-storage-page[b-4o0414mbam] { padding: 18px; }.admin-storage-summary[b-4o0414mbam], .admin-storage-grid[b-4o0414mbam] { grid-template-columns: 1fr; }.admin-storage-hero h1[b-4o0414mbam] { font-size: 1.55rem; } }
/* _content/AITranslationPlatform.Web/Components/Admin/Support/AdminTickets.razor.rz.scp.css */
.admin-tickets[b-zwf8i61d8x]{display:grid;gap:18px;color:var(--admin-text)}
.admin-ticket-head[b-zwf8i61d8x],.admin-ticket-toolbar[b-zwf8i61d8x],.admin-ticket-list[b-zwf8i61d8x],.admin-ticket-detail[b-zwf8i61d8x]{border:1px solid var(--admin-line);background:var(--admin-surface);box-shadow:var(--admin-shadow)}
.admin-ticket-head[b-zwf8i61d8x]{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;border-radius:20px}
.admin-ticket-head h1[b-zwf8i61d8x]{margin:4px 0 6px;font-size:1.45rem}.admin-ticket-head p[b-zwf8i61d8x]{max-width:760px;margin:0;color:var(--admin-muted);font-size:11px;line-height:1.8}
.eyebrow[b-zwf8i61d8x]{color:var(--admin-accent);font-size:8px;font-weight:900;letter-spacing:.14em}
.queue-metrics[b-zwf8i61d8x]{display:grid;grid-template-columns:repeat(2,112px);gap:8px}.queue-metrics>div[b-zwf8i61d8x]{display:grid;gap:3px;padding:13px 14px;border:1px solid var(--admin-line);border-radius:15px;background:var(--admin-surface-elevated)}
.queue-metrics strong[b-zwf8i61d8x]{font-size:18px}.queue-metrics span[b-zwf8i61d8x]{color:var(--admin-muted);font-size:8px;font-weight:700}
.admin-ticket-toolbar[b-zwf8i61d8x]{min-height:62px;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:16px}
.search-box[b-zwf8i61d8x]{flex:1;min-width:180px;height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--admin-line);border-radius:12px;background:var(--admin-surface-elevated);color:var(--admin-muted)}
.search-box svg[b-zwf8i61d8x]{width:16px;flex:0 0 16px}.search-box input[b-zwf8i61d8x],.status-filter[b-zwf8i61d8x],.admin-reply textarea[b-zwf8i61d8x]{font-family:inherit}.search-box input[b-zwf8i61d8x]{width:100%;border:0;outline:0;background:transparent;color:var(--admin-text);font-size:10px}
.status-filter[b-zwf8i61d8x],.refresh-button[b-zwf8i61d8x]{height:40px;border:1px solid var(--admin-line);border-radius:12px;background:var(--admin-surface-elevated);color:var(--admin-text-2);font-size:9px;font-weight:700}
.status-filter[b-zwf8i61d8x]{min-width:150px;padding:0 10px}.refresh-button[b-zwf8i61d8x]{padding:0 14px;cursor:pointer}
.admin-ticket-workspace[b-zwf8i61d8x]{min-height:650px;display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:15px}
.admin-ticket-list[b-zwf8i61d8x],.admin-ticket-detail[b-zwf8i61d8x]{min-width:0;min-height:0;border-radius:18px;overflow:hidden}.admin-ticket-list[b-zwf8i61d8x]{display:flex;flex-direction:column;gap:5px;padding:9px;overflow-y:auto}
.admin-ticket-row[b-zwf8i61d8x]{position:relative;display:grid;gap:7px;width:100%;padding:13px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--admin-text);text-align:start;font-family:inherit;cursor:pointer;transition:160ms ease}
.admin-ticket-row:hover[b-zwf8i61d8x]{border-color:var(--admin-line);background:var(--admin-surface-elevated)}.admin-ticket-row.is-active[b-zwf8i61d8x]{border-color:color-mix(in srgb,var(--admin-accent) 18%,transparent);background:var(--admin-accent-soft)}
.admin-ticket-row.has-unread[b-zwf8i61d8x]{box-shadow:inset 3px 0 0 var(--admin-accent)}
.row-title[b-zwf8i61d8x],.row-customer[b-zwf8i61d8x],.row-foot[b-zwf8i61d8x],.detail-meta[b-zwf8i61d8x],.admin-message>div[b-zwf8i61d8x]{display:flex;align-items:center}.row-title[b-zwf8i61d8x]{justify-content:space-between;gap:8px}
.row-title strong[b-zwf8i61d8x]{min-width:0;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.row-title i[b-zwf8i61d8x]{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--admin-accent);box-shadow:0 0 0 4px var(--admin-accent-soft)}
.row-customer[b-zwf8i61d8x],.row-foot[b-zwf8i61d8x]{justify-content:space-between;gap:8px;color:var(--admin-muted);font-size:8px}.row-customer b[b-zwf8i61d8x]{color:var(--admin-text-2);font-size:8px}
.admin-ticket-row p[b-zwf8i61d8x]{display:-webkit-box;margin:0;overflow:hidden;color:var(--admin-text-2);font-size:9px;line-height:1.6;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.status[b-zwf8i61d8x],.priority[b-zwf8i61d8x]{display:inline-flex;align-items:center;justify-content:center;padding:3px 6px;border-radius:999px;font-size:7px;font-weight:900}
.wait-support[b-zwf8i61d8x]{color:#a16d18;background:rgba(192,132,38,.10)}.wait-customer[b-zwf8i61d8x]{color:#73631d;background:rgba(212,172,52,.10)}.resolved[b-zwf8i61d8x]{color:var(--admin-success);background:rgba(39,132,103,.09)}.closed[b-zwf8i61d8x]{color:var(--admin-muted);background:var(--admin-surface-soft)}
.priority.low[b-zwf8i61d8x]{color:#3c7b63;background:rgba(39,132,103,.08)}.priority.normal[b-zwf8i61d8x]{color:var(--admin-text-2);background:var(--admin-surface-soft)}.priority.high[b-zwf8i61d8x]{color:var(--admin-warning);background:rgba(169,115,31,.09)}.priority.urgent[b-zwf8i61d8x]{color:var(--admin-danger);background:rgba(201,74,82,.09)}
.admin-ticket-detail[b-zwf8i61d8x]{display:flex;flex-direction:column}.detail-head[b-zwf8i61d8x]{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--admin-line)}
.ticket-id[b-zwf8i61d8x]{color:var(--admin-accent);font-size:9px;font-weight:900}.detail-head h2[b-zwf8i61d8x]{margin:5px 0 8px;font-size:16px}.detail-meta[b-zwf8i61d8x]{flex-wrap:wrap;gap:7px;color:var(--admin-muted);font-size:8px}
.status-actions[b-zwf8i61d8x]{display:flex;flex-wrap:wrap;justify-content:end;gap:6px}.status-button[b-zwf8i61d8x]{min-height:34px;padding:0 9px;border:1px solid var(--admin-line);border-radius:10px;font-family:inherit;font-size:8px;font-weight:800;cursor:pointer}
.detail-status-line[b-zwf8i61d8x]{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 22px;border-bottom:1px solid var(--admin-line);color:var(--admin-muted);font-size:8px}.detail-status-line strong[b-zwf8i61d8x]{font-size:9px}
.admin-message-stream[b-zwf8i61d8x]{flex:1;min-height:360px;display:flex;flex-direction:column;gap:11px;padding:20px;overflow-y:auto;background:var(--admin-surface-elevated)}
.admin-message[b-zwf8i61d8x]{width:min(78%,760px);display:grid;gap:7px;padding:13px 14px;border:1px solid var(--admin-line);border-radius:15px;background:var(--admin-surface)}
.admin-message.customer[b-zwf8i61d8x]{align-self:flex-start;border-end-start-radius:4px}.admin-message.staff[b-zwf8i61d8x]{align-self:flex-end;border-end-end-radius:4px;border-color:color-mix(in srgb,var(--admin-accent) 14%,transparent);background:var(--admin-accent-soft)}
.admin-message>div[b-zwf8i61d8x]{justify-content:space-between;gap:12px}.admin-message strong[b-zwf8i61d8x]{font-size:9px}.admin-message span[b-zwf8i61d8x]{color:var(--admin-muted);font-size:7px}.admin-message p[b-zwf8i61d8x]{margin:0;white-space:pre-wrap;color:var(--admin-text-2);font-size:10px;line-height:1.85}
.admin-reply[b-zwf8i61d8x]{display:grid;gap:9px;padding:14px 16px 16px;border-top:1px solid var(--admin-line);background:var(--admin-surface)}.admin-reply textarea[b-zwf8i61d8x]{width:100%;padding:12px 13px;border:1px solid var(--admin-line);outline:0;border-radius:12px;background:var(--admin-surface-elevated);color:var(--admin-text);font-size:10px;line-height:1.8;resize:vertical;box-sizing:border-box}
.admin-reply textarea:focus[b-zwf8i61d8x]{border-color:color-mix(in srgb,var(--admin-accent) 35%,transparent);box-shadow:0 0 0 3px var(--admin-accent-soft)}.admin-reply>div[b-zwf8i61d8x]{display:flex;align-items:center;justify-content:space-between;gap:12px}
.send-reply[b-zwf8i61d8x]{min-height:38px;padding:0 15px;border:0;border-radius:11px;background:var(--admin-accent);color:#fff;font-family:inherit;font-size:9px;font-weight:900;cursor:pointer}.send-reply:disabled[b-zwf8i61d8x]{opacity:.55;cursor:wait}.action-error[b-zwf8i61d8x]{color:var(--admin-danger);font-size:8px;font-weight:800}
.admin-empty[b-zwf8i61d8x],.detail-empty[b-zwf8i61d8x]{min-height:260px;display:grid;place-content:center;justify-items:center;gap:7px;padding:24px;color:var(--admin-muted);font-size:10px;text-align:center}.detail-empty[b-zwf8i61d8x]{flex:1}.detail-empty span[b-zwf8i61d8x]{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--admin-accent-soft);color:var(--admin-accent);font-size:20px}
@media(max-width:1080px){.admin-ticket-workspace[b-zwf8i61d8x]{grid-template-columns:1fr}.admin-ticket-list[b-zwf8i61d8x]{max-height:430px}}
@media(max-width:700px){.admin-ticket-head[b-zwf8i61d8x]{align-items:stretch;flex-direction:column}.queue-metrics[b-zwf8i61d8x]{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-ticket-toolbar[b-zwf8i61d8x]{align-items:stretch;flex-direction:column}.search-box[b-zwf8i61d8x],.status-filter[b-zwf8i61d8x],.refresh-button[b-zwf8i61d8x]{width:100%;box-sizing:border-box}.detail-head[b-zwf8i61d8x]{align-items:stretch;flex-direction:column}.status-actions[b-zwf8i61d8x]{justify-content:start}.admin-message[b-zwf8i61d8x]{width:92%}}


/* ============================================================
   TICKETING STATIC-SSR ACTION FIX
   ============================================================ */

.admin-ticket-row[b-zwf8i61d8x],
.refresh-button[b-zwf8i61d8x] {
    text-decoration: none;
}

.status-actions form[b-zwf8i61d8x] {
    margin: 0;
}

.admin-ticket-error[b-zwf8i61d8x] {
    padding: 11px 14px;
    border: 1px solid rgba(201, 74, 82, .16);
    border-radius: 13px;
    background: rgba(201, 74, 82, .07);
    color: var(--admin-danger);
    font-size: 9px;
    font-weight: 800;
}

.reply-hint[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 8px;
    line-height: 1.6;
}


/* ============================================================
   TICKETING V1.1 — CUSTOMER GROUPING
   ============================================================ */

.admin-ticket-workspace.grouped[b-zwf8i61d8x] {
    grid-template-columns:
        minmax(220px, 280px)
        minmax(280px, 340px)
        minmax(0, 1fr);
}

.admin-customer-list[b-zwf8i61d8x] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.column-heading[b-zwf8i61d8x] {
    min-height: 66px;
    display: flex;
    align-items: center;
    padding: 13px 14px;
    border-bottom: 1px solid var(--admin-line);
}

.column-heading > div[b-zwf8i61d8x] {
    display: grid;
    gap: 3px;
}

.column-heading strong[b-zwf8i61d8x] {
    color: var(--admin-text);
    font-size: 10px;
}

.column-heading span[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 7.5px;
}

.customer-list-scroll[b-zwf8i61d8x] {
    display: grid;
    gap: 5px;
    padding: 8px;
    overflow-y: auto;
}

.customer-row[b-zwf8i61d8x] {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--admin-text);
    text-decoration: none;
    transition: 150ms ease;
}

.customer-row:hover[b-zwf8i61d8x] {
    border-color: var(--admin-line);
    background: var(--admin-surface-elevated);
}

.customer-row.is-active[b-zwf8i61d8x] {
    border-color: color-mix(in srgb, var(--admin-accent) 18%, transparent);
    background: var(--admin-accent-soft);
}

.customer-avatar[b-zwf8i61d8x] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 10px;
    font-weight: 900;
}

.customer-copy[b-zwf8i61d8x] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.customer-copy strong[b-zwf8i61d8x],
.customer-copy small[b-zwf8i61d8x],
.customer-copy em[b-zwf8i61d8x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-copy strong[b-zwf8i61d8x] {
    color: var(--admin-text);
    font-size: 9px;
}

.customer-copy small[b-zwf8i61d8x] {
    color: var(--admin-text-2);
    font-size: 7.5px;
}

.customer-copy em[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 7px;
    font-style: normal;
}

.customer-unread[b-zwf8i61d8x] {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #c94a52;
    color: #fff;
    font-size: 7px;
    font-weight: 900;
}

.detail-empty small[b-zwf8i61d8x] {
    max-width: 360px;
    color: var(--admin-muted);
    font-size: 8px;
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 1320px) {
    .admin-ticket-workspace.grouped[b-zwf8i61d8x] {
        grid-template-columns: 230px 300px minmax(0, 1fr);
    }
}

@media (max-width: 1120px) {
    .admin-ticket-workspace.grouped[b-zwf8i61d8x] {
        grid-template-columns: 1fr 1fr;
    }

    .admin-ticket-detail[b-zwf8i61d8x] {
        grid-column: 1 / -1;
        min-height: 620px;
    }
}

@media (max-width: 760px) {
    .admin-ticket-workspace.grouped[b-zwf8i61d8x] {
        grid-template-columns: 1fr;
    }

    .admin-ticket-detail[b-zwf8i61d8x] {
        grid-column: auto;
    }

    .admin-customer-list[b-zwf8i61d8x],
    .admin-ticket-list[b-zwf8i61d8x] {
        max-height: 390px;
    }
}


/* ============================================================
   TICKETING ATTACHMENTS V1 — ADMIN
   ============================================================ */

.admin-ticket-attachments[b-zwf8i61d8x] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--admin-line);
    background: var(--admin-surface);
}

.attachment-section-head > div[b-zwf8i61d8x] {
    display: grid;
    gap: 3px;
}

.attachment-section-head strong[b-zwf8i61d8x] {
    color: var(--admin-text);
    font-size: 9px;
}

.attachment-section-head span[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-attachment-grid[b-zwf8i61d8x] {
    display: grid;
    gap: 7px;
}

.admin-attachment-card[b-zwf8i61d8x] {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid var(--admin-line);
    border-radius: 13px;
    background: var(--admin-surface-elevated);
}

.admin-attachment-preview[b-zwf8i61d8x],
.admin-attachment-file-icon[b-zwf8i61d8x] {
    width: 58px;
    height: 46px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    text-decoration: none;
    font-size: 7px;
    font-weight: 900;
}

.admin-attachment-preview img[b-zwf8i61d8x] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-attachment-info[b-zwf8i61d8x] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-attachment-info strong[b-zwf8i61d8x] {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-attachment-info span[b-zwf8i61d8x],
.admin-attachment-info small[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 6.8px;
}

.admin-attachment-download[b-zwf8i61d8x] {
    padding: 7px 9px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    color: var(--admin-text-2);
    background: var(--admin-surface);
    text-decoration: none;
    font-size: 7px;
    font-weight: 850;
}

.admin-attachment-upload[b-zwf8i61d8x] {
    display: flex;
    align-items: end;
    gap: 8px;
}

.admin-file-picker[b-zwf8i61d8x] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 5px;
    color: var(--admin-text-2);
    font-size: 7px;
    font-weight: 800;
}

.admin-file-picker input[type="file"][b-zwf8i61d8x] {
    width: 100%;
    min-height: 39px;
    padding: 7px 9px;
    border: 1px dashed var(--admin-line-strong);
    border-radius: 10px;
    background: var(--admin-surface-elevated);
    color: var(--admin-muted);
    font: inherit;
}

@media(max-width:760px) {
    .admin-attachment-card[b-zwf8i61d8x] {
        grid-template-columns: 52px minmax(0,1fr);
    }

    .admin-attachment-download[b-zwf8i61d8x] {
        grid-column: 1 / -1;
        text-align: center;
    }

    .admin-attachment-upload[b-zwf8i61d8x] {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   TICKETING SOCIAL CONVERSATION V1 — ADMIN
   ============================================================ */

.admin-social-stream[b-zwf8i61d8x] {
    flex: 1;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px 20px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb,var(--admin-accent) 4%,transparent), transparent 30%),
        var(--admin-surface-elevated);
}

.admin-social-row[b-zwf8i61d8x] {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    direction: ltr;
}

.admin-social-row.mine[b-zwf8i61d8x] {
    justify-content: flex-end;
}

.admin-social-row.other[b-zwf8i61d8x] {
    justify-content: flex-start;
}

.admin-social-avatar[b-zwf8i61d8x] {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border: 1px solid var(--admin-line);
    border-radius: 50%;
    background: var(--admin-surface);
    color: var(--admin-muted);
    font-size: 7px;
    font-weight: 950;
}

.admin-social-row.mine .admin-social-avatar[b-zwf8i61d8x] {
    order: 2;
    border-color: color-mix(in srgb,var(--admin-accent) 18%,var(--admin-line));
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}

.admin-social-stack[b-zwf8i61d8x] {
    max-width: min(74%, 760px);
    display: grid;
    gap: 4px;
}

.admin-tickets[dir="rtl"] .admin-social-stack[b-zwf8i61d8x] {
    direction: rtl;
    text-align: right;
}

.admin-tickets[dir="ltr"] .admin-social-stack[b-zwf8i61d8x] {
    direction: ltr;
    text-align: left;
}

.admin-social-author[b-zwf8i61d8x] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-inline: 4px;
}

.admin-social-row.mine .admin-social-author[b-zwf8i61d8x] {
    justify-content: flex-end;
}

.admin-social-author strong[b-zwf8i61d8x] {
    color: var(--admin-text-2);
    font-size: 7.5px;
}

.admin-social-author span[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 6.4px;
}

.admin-social-text[b-zwf8i61d8x] {
    padding: 11px 13px;
    border: 1px solid var(--admin-line);
    border-radius: 15px 15px 15px 5px;
    background: var(--admin-surface);
    box-shadow: 0 7px 18px rgba(8,18,36,.035);
}

.admin-social-row.mine .admin-social-text[b-zwf8i61d8x] {
    border-color: color-mix(in srgb,var(--admin-accent) 16%,var(--admin-line));
    border-radius: 15px 15px 5px 15px;
    background: var(--admin-accent-soft);
}

.admin-social-text p[b-zwf8i61d8x] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--admin-text-2);
    font-size: 9.5px;
    line-height: 1.85;
}

.admin-social-media[b-zwf8i61d8x] {
    width: min(340px, 58vw);
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
    box-shadow: 0 8px 20px rgba(8,18,36,.05);
}

.admin-social-row.mine .admin-social-media[b-zwf8i61d8x] {
    border-color: color-mix(in srgb,var(--admin-accent) 16%,var(--admin-line));
}

.admin-social-media > a:first-child[b-zwf8i61d8x] {
    display: block;
    overflow: hidden;
    background: var(--admin-surface-soft);
}

.admin-social-media img[b-zwf8i61d8x] {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    transition: transform 160ms ease;
}

.admin-social-media > a:first-child:hover img[b-zwf8i61d8x] {
    transform: scale(1.012);
}

.admin-social-media > div[b-zwf8i61d8x] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 8px 10px 9px;
}

.admin-social-media > div > span[b-zwf8i61d8x] {
    min-width: 0;
    overflow: hidden;
    color: var(--admin-text-2);
    font-size: 7px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-social-media > div > a[b-zwf8i61d8x] {
    flex: 0 0 auto;
    color: var(--admin-accent);
    text-decoration: none;
    font-size: 6.8px;
    font-weight: 900;
}

.admin-social-file[b-zwf8i61d8x] {
    width: min(350px, 62vw);
    min-height: 62px;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    background: var(--admin-surface);
    color: var(--admin-text);
    text-decoration: none;
    box-shadow: 0 7px 18px rgba(8,18,36,.035);
    transition: 150ms ease;
}

.admin-social-row.mine .admin-social-file[b-zwf8i61d8x] {
    border-color: color-mix(in srgb,var(--admin-accent) 16%,var(--admin-line));
    background: var(--admin-accent-soft);
}

.admin-social-file:hover[b-zwf8i61d8x] {
    transform: translateY(-1px);
    border-color: var(--admin-line-strong);
}

.admin-social-file-icon[b-zwf8i61d8x] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}

.admin-social-file-icon svg[b-zwf8i61d8x] {
    width: 20px;
    height: 20px;
}

.admin-social-file-copy[b-zwf8i61d8x] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-social-file-copy strong[b-zwf8i61d8x] {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-social-file-copy small[b-zwf8i61d8x] {
    color: var(--admin-muted);
    font-size: 6.5px;
}

.admin-social-file-action[b-zwf8i61d8x] {
    color: var(--admin-accent);
    font-size: 6.7px;
    font-weight: 900;
}

.admin-social-composer[b-zwf8i61d8x] {
    display: grid;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--admin-line);
    background: var(--admin-surface);
}

.admin-social-composer textarea[b-zwf8i61d8x] {
    width: 100%;
    min-height: 72px;
    max-height: 170px;
    padding: 11px 12px;
    border: 1px solid var(--admin-line);
    outline: 0;
    border-radius: 14px;
    box-sizing: border-box;
    resize: vertical;
    background: var(--admin-surface-elevated);
    color: var(--admin-text);
    font-family: inherit;
    font-size: 9px;
    line-height: 1.8;
    transition: 150ms ease;
}

.admin-social-composer textarea:focus[b-zwf8i61d8x] {
    border-color: color-mix(in srgb,var(--admin-accent) 36%,var(--admin-line));
    box-shadow: 0 0 0 3px var(--admin-accent-soft);
}

.admin-social-actions[b-zwf8i61d8x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-social-attach[b-zwf8i61d8x],
.admin-social-send[b-zwf8i61d8x] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 7.5px;
    font-weight: 900;
}

.admin-social-attach[b-zwf8i61d8x] {
    position: relative;
    min-width: 92px;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    background: var(--admin-surface-elevated);
    color: var(--admin-text-2);
    cursor: pointer;
}

.admin-social-attach:hover[b-zwf8i61d8x] {
    border-color: var(--admin-line-strong);
    color: var(--admin-accent);
}

.admin-social-attach input[type="file"][b-zwf8i61d8x] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.admin-social-attach svg[b-zwf8i61d8x],
.admin-social-send svg[b-zwf8i61d8x] {
    width: 15px;
    height: 15px;
}

.admin-social-note[b-zwf8i61d8x] {
    flex: 1;
    color: var(--admin-muted);
    font-size: 6.8px;
}

.admin-social-send[b-zwf8i61d8x] {
    min-width: 76px;
    padding: 0 12px;
    border: 0;
    background: var(--admin-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 7px 18px color-mix(in srgb,var(--admin-accent) 18%,transparent);
}

.admin-social-send:hover[b-zwf8i61d8x] {
    transform: translateY(-1px);
}

@media(max-width:760px) {
    .admin-social-stream[b-zwf8i61d8x] {
        padding: 14px 10px;
    }

    .admin-social-stack[b-zwf8i61d8x] {
        max-width: calc(100% - 38px);
    }

    .admin-social-media[b-zwf8i61d8x],
    .admin-social-file[b-zwf8i61d8x] {
        width: min(320px, 76vw);
    }

    .admin-social-actions[b-zwf8i61d8x] {
        flex-wrap: wrap;
    }

    .admin-social-note[b-zwf8i61d8x] {
        order: 3;
        flex-basis: 100%;
    }

    .admin-social-attach[b-zwf8i61d8x],
    .admin-social-send[b-zwf8i61d8x] {
        flex: 1;
    }
}
/* _content/AITranslationPlatform.Web/Components/Admin/Translations/AdminTranslations.razor.rz.scp.css */
.admin-translations-page[b-kmqrk9xbx4],
.admin-translation-details-page[b-kmqrk9xbx4] {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.admin-translations-hero[b-kmqrk9xbx4],
.admin-translation-details-hero[b-kmqrk9xbx4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px;
    padding: 26px 28px;
    border: 1px solid var(--admin-line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0%, rgba(24, 68, 198, .075), transparent 34%),
        var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.admin-translation-eyebrow[b-kmqrk9xbx4],
.admin-translations-panel-heading > div > span[b-kmqrk9xbx4],
.admin-translation-section-header > div > span[b-kmqrk9xbx4],
.admin-translation-section-title span[b-kmqrk9xbx4],
.admin-translation-error-panel > header > span[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.admin-translations-hero h1[b-kmqrk9xbx4],
.admin-translation-details-title h1[b-kmqrk9xbx4] {
    margin: 7px 0 0;
    color: var(--admin-text);
    font-size: clamp(24px, 2.2vw, 35px);
    line-height: 1.25;
    letter-spacing: -.03em;
}

.admin-translations-hero p[b-kmqrk9xbx4],
.admin-translation-details-title p[b-kmqrk9xbx4] {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--admin-text-2);
    font-size: 11px;
    line-height: 1.85;
}

.admin-translations-refresh[b-kmqrk9xbx4],
.admin-translations-search-button[b-kmqrk9xbx4],
.admin-translations-clear-button[b-kmqrk9xbx4],
.admin-translation-state button[b-kmqrk9xbx4],
.admin-translations-pagination button[b-kmqrk9xbx4] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--admin-line-strong);
    border-radius: 11px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: 150ms ease;
}

.admin-translations-refresh:hover:not(:disabled)[b-kmqrk9xbx4],
.admin-translations-search-button:hover[b-kmqrk9xbx4],
.admin-translations-clear-button:hover[b-kmqrk9xbx4],
.admin-translation-state button:hover[b-kmqrk9xbx4],
.admin-translations-pagination button:hover:not(:disabled)[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    border-color: rgba(24, 68, 198, .16);
    background: var(--admin-accent-soft);
}

.admin-translations-refresh:disabled[b-kmqrk9xbx4],
.admin-translations-pagination button:disabled[b-kmqrk9xbx4] {
    opacity: .45;
    cursor: not-allowed;
}

.admin-translations-refresh svg[b-kmqrk9xbx4] {
    width: 17px;
    height: 17px;
}

.is-spinning[b-kmqrk9xbx4] {
    animation: admin-translation-spin-b-kmqrk9xbx4 .9s linear infinite;
}

@keyframes admin-translation-spin-b-kmqrk9xbx4 {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   SUMMARY
   ========================================================= */

.admin-translations-summary[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-translations-summary-card[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--admin-line);
    border-radius: 17px;
    background: var(--admin-surface);
    box-shadow: 0 10px 25px rgba(24, 32, 55, .03);
}

.admin-translations-summary-icon[b-kmqrk9xbx4] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.admin-translations-summary-card.is-success .admin-translations-summary-icon[b-kmqrk9xbx4] {
    color: var(--admin-success);
    background: rgba(39, 132, 103, .08);
}

.admin-translations-summary-card.is-danger .admin-translations-summary-icon[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    background: rgba(201, 74, 82, .08);
}

.admin-translations-summary-card.is-ai .admin-translations-summary-icon[b-kmqrk9xbx4] {
    color: #725dc2;
    background: rgba(114, 93, 194, .08);
}

.admin-translations-summary-icon svg[b-kmqrk9xbx4] {
    width: 19px;
    height: 19px;
}

.admin-translations-summary-card > span:last-child[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-translations-summary-card small[b-kmqrk9xbx4],
.admin-translations-summary-card em[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 750;
    font-style: normal;
    line-height: 1.45;
}

.admin-translations-summary-card strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 19px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

/* =========================================================
   LIST PANEL / FILTERS
   ========================================================= */

.admin-translations-panel[b-kmqrk9xbx4] {
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 20px;
    background: var(--admin-surface);
    box-shadow: 0 12px 28px rgba(24, 32, 55, .035);
}

.admin-translations-panel-heading[b-kmqrk9xbx4] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-translations-panel-heading h2[b-kmqrk9xbx4] {
    margin: 4px 0 0;
    color: var(--admin-text);
    font-size: 17px;
}

.admin-translations-panel-heading > small[b-kmqrk9xbx4] {
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 8px;
    font-weight: 750;
}

.admin-translations-toolbar[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns:
        minmax(230px, 1.25fr)
        repeat(4, minmax(120px, .55fr));
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--admin-line);
    background: var(--admin-surface-soft);
}

.admin-translations-search[b-kmqrk9xbx4] {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-elevated);
}

.admin-translations-search:focus-within[b-kmqrk9xbx4] {
    border-color: rgba(24, 68, 198, .22);
    box-shadow: 0 0 0 3px rgba(24, 68, 198, .06);
}

.admin-translations-search svg[b-kmqrk9xbx4] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--admin-muted);
}

.admin-translations-search input[b-kmqrk9xbx4] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--admin-text);
    background: transparent;
    font: inherit;
    font-size: 9px;
}

.admin-translations-search input[b-kmqrk9xbx4]::placeholder {
    color: var(--admin-muted);
}

.admin-translations-toolbar select[b-kmqrk9xbx4] {
    min-height: 40px;
    width: 100%;
    min-width: 0;
    padding: 0 9px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    outline: 0;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    font: inherit;
    font-size: 8.5px;
    font-weight: 700;
}

.admin-translations-search-button[b-kmqrk9xbx4],
.admin-translations-clear-button[b-kmqrk9xbx4] {
    width: 100%;
}

.admin-translations-clear-button[b-kmqrk9xbx4] {
    color: var(--admin-muted);
}

/* =========================================================
   TABLE
   ========================================================= */

.admin-translations-table-wrap[b-kmqrk9xbx4] {
    overflow-x: auto;
}

.admin-translations-table[b-kmqrk9xbx4] {
    width: 100%;
    min-width: 1160px;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin-translations-table th[b-kmqrk9xbx4] {
    padding: 10px 9px;
    border-bottom: 1px solid var(--admin-line);
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 7.3px;
    font-weight: 850;
    text-align: start;
    white-space: nowrap;
}

.admin-translations-table td[b-kmqrk9xbx4] {
    padding: 10px 9px;
    border-bottom: 1px solid var(--admin-line);
    color: var(--admin-text-2);
    vertical-align: middle;
}

.admin-translations-table tbody tr[b-kmqrk9xbx4] {
    transition: background 120ms ease;
}

.admin-translations-table tbody tr:hover[b-kmqrk9xbx4] {
    background: rgba(24, 68, 198, .025);
}

.admin-translations-table tbody tr:last-child td[b-kmqrk9xbx4] {
    border-bottom: 0;
}

.admin-translations-table th:nth-child(1)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(1)[b-kmqrk9xbx4] {
    width: 17%;
}

.admin-translations-table th:nth-child(2)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(2)[b-kmqrk9xbx4] {
    width: 13%;
}

.admin-translations-table th:nth-child(3)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(3)[b-kmqrk9xbx4] {
    width: 9%;
}

.admin-translations-table th:nth-child(4)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(4)[b-kmqrk9xbx4] {
    width: 10%;
}

.admin-translations-table th:nth-child(5)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(5)[b-kmqrk9xbx4] {
    width: 13%;
}

.admin-translations-table th:nth-child(6)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(6)[b-kmqrk9xbx4] {
    width: 9%;
}

.admin-translations-table th:nth-child(7)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(7)[b-kmqrk9xbx4] {
    width: 12%;
}

.admin-translations-table th:nth-child(8)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(8)[b-kmqrk9xbx4] {
    width: 10%;
}

.admin-translations-table th:nth-child(9)[b-kmqrk9xbx4],
.admin-translations-table td:nth-child(9)[b-kmqrk9xbx4] {
    width: 7%;
    text-align: center;
}

.admin-translation-source-cell[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.admin-translation-source-icon[b-kmqrk9xbx4] {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(24, 68, 198, .10);
    border-radius: 10px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 6.5px;
    font-weight: 900;
}

.admin-translation-source-cell > span:last-child[b-kmqrk9xbx4],
.admin-translation-value-cell[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-translation-source-cell strong[b-kmqrk9xbx4],
.admin-translation-value-cell strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 8.5px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-translation-source-cell small[b-kmqrk9xbx4],
.admin-translation-value-cell small[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 6.8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-translation-language-cell[b-kmqrk9xbx4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.admin-translation-language-cell span[b-kmqrk9xbx4] {
    min-width: 29px;
    display: inline-flex;
    justify-content: center;
    padding: 4px 5px;
    border: 1px solid var(--admin-line);
    border-radius: 7px;
    color: var(--admin-text-2);
    background: var(--admin-surface-soft);
    font-size: 6.7px;
    font-weight: 850;
}

.admin-translation-language-cell span.is-target[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    border-color: rgba(24, 68, 198, .10);
    background: var(--admin-accent-soft);
}

.admin-translation-language-cell svg[b-kmqrk9xbx4] {
    width: 12px;
    height: 12px;
    color: var(--admin-muted);
}

.admin-translations-page[dir="rtl"] .admin-translation-language-cell svg[b-kmqrk9xbx4] {
    transform: rotate(180deg);
}

.admin-translation-status-cell[b-kmqrk9xbx4] {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.admin-translation-status[b-kmqrk9xbx4] {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 6.8px;
    font-weight: 850;
    white-space: nowrap;
}

.admin-translation-status.is-active[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.admin-translation-status.is-success[b-kmqrk9xbx4] {
    color: var(--admin-success);
    background: rgba(39, 132, 103, .08);
}

.admin-translation-status.is-warning[b-kmqrk9xbx4] {
    color: var(--admin-warning);
    background: rgba(169, 115, 31, .08);
}

.admin-translation-status.is-danger[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    background: rgba(201, 74, 82, .08);
}

.admin-translation-progress[b-kmqrk9xbx4] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-translation-progress > span[b-kmqrk9xbx4] {
    width: 54px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(125, 130, 140, .13);
}

.admin-translation-progress > span i[b-kmqrk9xbx4] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--admin-accent);
}

.admin-translation-progress small[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 6.3px;
}

.admin-translation-actions[b-kmqrk9xbx4] {
    text-align: center;
}

.admin-translation-details-link[b-kmqrk9xbx4] {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--admin-line-strong);
    border-radius: 10px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    text-decoration: none;
    transition: 140ms ease;
}

.admin-translation-details-link:hover[b-kmqrk9xbx4] {
    transform: translateY(-1px);
    color: var(--admin-accent);
    border-color: rgba(24, 68, 198, .18);
    background: var(--admin-accent-soft);
}

.admin-translation-details-link svg[b-kmqrk9xbx4] {
    width: 15px;
    height: 15px;
}

/* =========================================================
   STATE / PAGINATION
   ========================================================= */

.admin-translation-state[b-kmqrk9xbx4] {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
}

.admin-translation-state strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 12px;
}

.admin-translation-state p[b-kmqrk9xbx4] {
    max-width: 560px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 9px;
    line-height: 1.7;
}

.admin-translation-state.is-error strong[b-kmqrk9xbx4] {
    color: var(--admin-danger);
}

.admin-translation-state a[b-kmqrk9xbx4] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    text-decoration: none;
    font-size: 8px;
    font-weight: 800;
}

.admin-translation-spinner[b-kmqrk9xbx4] {
    width: 30px;
    height: 30px;
    border: 3px solid var(--admin-line);
    border-top-color: var(--admin-accent);
    border-radius: 50%;
    animation: admin-translation-spin-b-kmqrk9xbx4 .85s linear infinite;
}

.admin-translations-pagination[b-kmqrk9xbx4] {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--admin-line);
}

.admin-translations-pagination span[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 750;
}

/* =========================================================
   DETAILS HERO
   ========================================================= */

.admin-translation-details-title[b-kmqrk9xbx4] {
    min-width: 0;
    max-width: 780px;
}

.admin-translation-back-link[b-kmqrk9xbx4] {
    width: fit-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 0 11px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    transition: 140ms ease;
}

.admin-translation-back-link:hover[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    border-color: rgba(24, 68, 198, .16);
    background: var(--admin-accent-soft);
}

.admin-translation-back-link svg[b-kmqrk9xbx4] {
    width: 15px;
    height: 15px;
}

.admin-translation-details-page[dir="rtl"] .admin-translation-back-link svg[b-kmqrk9xbx4] {
    transform: rotate(180deg);
}

.admin-translation-job-chip[b-kmqrk9xbx4] {
    min-width: 300px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface-elevated);
}

.admin-translation-job-mark[b-kmqrk9xbx4] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.admin-translation-job-mark svg[b-kmqrk9xbx4] {
    width: 21px;
    height: 21px;
}

.admin-translation-job-chip > div[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-translation-job-chip small[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-translation-job-chip strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 10px;
}

/* =========================================================
   DETAILS CARDS
   ========================================================= */

.admin-translation-details-grid[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-translation-detail-card[b-kmqrk9xbx4],
.admin-translation-ai-log-card[b-kmqrk9xbx4],
.admin-translation-error-panel[b-kmqrk9xbx4] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
    box-shadow: 0 10px 26px rgba(24, 32, 55, .028);
}

.admin-translation-section-header[b-kmqrk9xbx4] {
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 17px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-translation-section-header h2[b-kmqrk9xbx4],
.admin-translation-section-title h2[b-kmqrk9xbx4],
.admin-translation-error-panel > header h2[b-kmqrk9xbx4] {
    margin: 4px 0 0;
    color: var(--admin-text);
    font-size: 15px;
}

.admin-translation-input-type[b-kmqrk9xbx4],
.admin-translation-count-badge[b-kmqrk9xbx4] {
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 7px;
    font-weight: 850;
}

.admin-translation-info-grid[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 15px 17px 17px;
}

.admin-translation-info-grid > div[b-kmqrk9xbx4] {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-soft);
}

.admin-translation-info-grid > div.is-wide[b-kmqrk9xbx4] {
    grid-column: 1 / -1;
}

.admin-translation-info-grid dt[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7.2px;
    font-weight: 750;
}

.admin-translation-info-grid dd[b-kmqrk9xbx4] {
    margin: 5px 0 0;
    color: var(--admin-text);
    font-size: 9px;
    font-weight: 760;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.admin-translation-wrap[b-kmqrk9xbx4] {
    word-break: break-all;
}

.admin-translation-user-link[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    text-decoration: none;
}

.admin-translation-user-link:hover[b-kmqrk9xbx4] {
    text-decoration: underline;
}

.admin-translation-language-flow[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    align-items: center;
    gap: 9px;
    padding: 16px 17px 4px;
}

.admin-translation-language-flow > div[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 13px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: var(--admin-surface-soft);
}

.admin-translation-language-flow span[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-translation-language-flow strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 11px;
}

.admin-translation-language-flow small[b-kmqrk9xbx4] {
    color: var(--admin-accent);
    font-size: 7px;
    font-weight: 850;
}

.admin-translation-language-flow > svg[b-kmqrk9xbx4] {
    width: 18px;
    height: 18px;
    color: var(--admin-muted);
}

.admin-translation-details-page[dir="rtl"] .admin-translation-language-flow > svg[b-kmqrk9xbx4] {
    transform: rotate(180deg);
}

.admin-translation-config-grid[b-kmqrk9xbx4] {
    padding-top: 10px;
}

/* =========================================================
   DETAILS METRICS
   ========================================================= */

.admin-translation-metrics-section[b-kmqrk9xbx4] {
    display: grid;
    gap: 12px;
}

.admin-translation-section-title[b-kmqrk9xbx4] {
    padding: 0 3px;
}

.admin-translation-metrics-grid[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.admin-translation-metric-card[b-kmqrk9xbx4] {
    min-width: 0;
    min-height: 112px;
    display: grid;
    align-content: space-between;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
    box-shadow: 0 8px 20px rgba(24, 32, 55, .025);
}

.admin-translation-metric-card > span[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7.5px;
    font-weight: 780;
}

.admin-translation-metric-card > strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 16px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-translation-metric-card > small[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-translation-metric-card.is-progress > strong[b-kmqrk9xbx4],
.admin-translation-metric-card.is-ai > strong[b-kmqrk9xbx4],
.admin-translation-metric-card.is-cache > strong[b-kmqrk9xbx4] {
    color: var(--admin-accent);
}

.admin-translation-metric-card.is-credits > strong[b-kmqrk9xbx4],
.admin-translation-metric-card.is-saving > strong[b-kmqrk9xbx4] {
    color: var(--admin-success);
}

/* =========================================================
   SEGMENTS / ECONOMICS
   ========================================================= */

.admin-translation-segment-grid[b-kmqrk9xbx4],
.admin-translation-economics-grid[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 15px 17px;
}

.admin-translation-segment-stat[b-kmqrk9xbx4],
.admin-translation-economics-grid > div[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 11px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-soft);
}

.admin-translation-segment-stat span[b-kmqrk9xbx4],
.admin-translation-economics-grid span[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
    font-weight: 750;
}

.admin-translation-segment-stat strong[b-kmqrk9xbx4],
.admin-translation-economics-grid strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 12px;
    font-weight: 900;
}

.admin-translation-segment-stat.is-success strong[b-kmqrk9xbx4] {
    color: var(--admin-success);
}

.admin-translation-segment-stat.is-danger strong[b-kmqrk9xbx4],
.admin-translation-economics-grid strong.is-danger[b-kmqrk9xbx4] {
    color: var(--admin-danger);
}

.admin-translation-segment-stat.is-active strong[b-kmqrk9xbx4],
.admin-translation-segment-stat.is-review strong[b-kmqrk9xbx4] {
    color: var(--admin-accent);
}

.admin-translation-segment-footer[b-kmqrk9xbx4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 11px 17px 15px;
    border-top: 1px solid var(--admin-line);
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-translation-segment-footer strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
}

/* =========================================================
   ERROR PANEL
   ========================================================= */

.admin-translation-error-panel[b-kmqrk9xbx4] {
    padding-bottom: 14px;
    border-color: rgba(201, 74, 82, .15);
}

.admin-translation-error-panel > header[b-kmqrk9xbx4] {
    padding: 14px 17px;
    border-bottom: 1px solid rgba(201, 74, 82, .10);
    background: rgba(201, 74, 82, .04);
}

.admin-translation-error-panel > header > span[b-kmqrk9xbx4],
.admin-translation-error-panel > header h2[b-kmqrk9xbx4] {
    color: var(--admin-danger);
}

.admin-translation-error-panel > div[b-kmqrk9xbx4] {
    display: grid;
    gap: 5px;
    margin: 12px 14px 0;
    padding: 10px 11px;
    border-radius: 10px;
    background: var(--admin-surface-soft);
}

.admin-translation-error-panel > div > span[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
    font-weight: 750;
}

.admin-translation-error-panel code[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    font-size: 8px;
}

.admin-translation-error-panel p[b-kmqrk9xbx4] {
    margin: 0;
    color: var(--admin-text-2);
    font-size: 8px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* =========================================================
   AI LOG
   ========================================================= */

.admin-translation-ai-log-card[b-kmqrk9xbx4] {
    overflow: hidden;
}

.admin-translation-ai-log[b-kmqrk9xbx4] {
    overflow-x: auto;
}

.admin-translation-ai-log-head[b-kmqrk9xbx4],
.admin-translation-ai-log-row[b-kmqrk9xbx4] {
    min-width: 850px;
    display: grid;
    grid-template-columns: 1.1fr 1.7fr .8fr 1fr .8fr .8fr 1.15fr;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
}

.admin-translation-ai-log-head[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 7px;
    font-weight: 850;
}

.admin-translation-ai-log-row[b-kmqrk9xbx4] {
    min-height: 48px;
    border-top: 1px solid var(--admin-line);
    color: var(--admin-text-2);
    font-size: 7.5px;
}

.admin-translation-ai-log-row strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
}

.admin-translation-ai-log-row .is-success[b-kmqrk9xbx4] {
    color: var(--admin-success);
    font-weight: 850;
}

.admin-translation-ai-log-row .is-danger[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    font-weight: 850;
}

.admin-translation-empty-log[b-kmqrk9xbx4] {
    margin: 0;
    padding: 24px 17px;
    color: var(--admin-muted);
    font-size: 8px;
    text-align: center;
}

.admin-translation-readonly-note[b-kmqrk9xbx4] {
    padding: 10px 12px;
    border: 1px solid rgba(169, 115, 31, .12);
    border-radius: 11px;
    color: var(--admin-warning);
    background: rgba(169, 115, 31, .06);
    font-size: 8px;
    line-height: 1.65;
}

/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .admin-translations-hero[b-kmqrk9xbx4],
html[data-theme="dark"] .admin-translation-details-hero[b-kmqrk9xbx4],
html[data-theme="dark"] .admin-translations-summary-card[b-kmqrk9xbx4],
html[data-theme="dark"] .admin-translations-panel[b-kmqrk9xbx4],
html[data-theme="dark"] .admin-translation-detail-card[b-kmqrk9xbx4],
html[data-theme="dark"] .admin-translation-metric-card[b-kmqrk9xbx4],
html[data-theme="dark"] .admin-translation-ai-log-card[b-kmqrk9xbx4] {
    box-shadow: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1350px) {
    .admin-translations-toolbar[b-kmqrk9xbx4] {
        grid-template-columns:
            minmax(220px, 1.2fr)
            repeat(3, minmax(125px, .55fr));
    }
}

@media (max-width: 1180px) {
    .admin-translations-summary[b-kmqrk9xbx4],
    .admin-translation-metrics-grid[b-kmqrk9xbx4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-translation-details-hero[b-kmqrk9xbx4] {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-translation-job-chip[b-kmqrk9xbx4] {
        width: 100%;
        min-width: 0;
    }

    .admin-translation-details-grid[b-kmqrk9xbx4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-translations-hero[b-kmqrk9xbx4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-translations-refresh[b-kmqrk9xbx4] {
        width: 100%;
    }

    .admin-translations-toolbar[b-kmqrk9xbx4] {
        grid-template-columns: 1fr 1fr;
    }

    .admin-translations-search[b-kmqrk9xbx4] {
        grid-column: 1 / -1;
    }

    .admin-translations-table[b-kmqrk9xbx4] {
        min-width: 0;
    }

    .admin-translations-table[b-kmqrk9xbx4],
    .admin-translations-table tbody[b-kmqrk9xbx4],
    .admin-translations-table tr[b-kmqrk9xbx4],
    .admin-translations-table td[b-kmqrk9xbx4] {
        display: block;
        width: 100%;
    }

    .admin-translations-table thead[b-kmqrk9xbx4] {
        display: none;
    }

    .admin-translations-table tbody[b-kmqrk9xbx4] {
        display: grid;
        gap: 10px;
        padding: 12px;
        background: var(--admin-surface-soft);
    }

    .admin-translations-table tr[b-kmqrk9xbx4] {
        overflow: hidden;
        border: 1px solid var(--admin-line);
        border-radius: 14px;
        background: var(--admin-surface);
    }

    .admin-translations-table td[b-kmqrk9xbx4] {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .admin-translations-table td[b-kmqrk9xbx4]::before {
        content: attr(data-label);
        color: var(--admin-muted);
        font-size: 7px;
        font-weight: 800;
    }

    .admin-translations-table td:first-child[b-kmqrk9xbx4] {
        display: block;
        background: var(--admin-surface-soft);
    }

    .admin-translations-table td:first-child[b-kmqrk9xbx4]::before,
    .admin-translations-table td:last-child[b-kmqrk9xbx4]::before {
        display: none;
    }

    .admin-translations-table td:last-child[b-kmqrk9xbx4] {
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 650px) {
    .admin-translations-summary[b-kmqrk9xbx4],
    .admin-translations-toolbar[b-kmqrk9xbx4],
    .admin-translation-metrics-grid[b-kmqrk9xbx4],
    .admin-translation-info-grid[b-kmqrk9xbx4],
    .admin-translation-segment-grid[b-kmqrk9xbx4],
    .admin-translation-economics-grid[b-kmqrk9xbx4] {
        grid-template-columns: 1fr;
    }

    .admin-translations-hero[b-kmqrk9xbx4],
    .admin-translation-details-hero[b-kmqrk9xbx4] {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .admin-translations-search[b-kmqrk9xbx4] {
        grid-column: auto;
    }

    .admin-translation-info-grid > div.is-wide[b-kmqrk9xbx4] {
        grid-column: auto;
    }

    .admin-translation-language-flow[b-kmqrk9xbx4] {
        grid-template-columns: 1fr;
    }

    .admin-translation-language-flow > svg[b-kmqrk9xbx4] {
        justify-self: center;
        transform: rotate(90deg);
    }

    .admin-translation-details-page[dir="rtl"] .admin-translation-language-flow > svg[b-kmqrk9xbx4] {
        transform: rotate(90deg);
    }

    .admin-translation-job-chip[b-kmqrk9xbx4] {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .admin-translation-job-chip > .admin-translation-status[b-kmqrk9xbx4] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* =========================================================
   STAGE 4.2 — SENSITIVE JOB OPERATIONS
   ========================================================= */

.admin-translation-actions-card[b-kmqrk9xbx4],
.admin-translation-audit-card[b-kmqrk9xbx4] {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
}

.admin-translation-actions-card > p[b-kmqrk9xbx4] {
    margin: 10px 0 0;
    color: var(--admin-muted);
    font-size: 8.5px;
    line-height: 1.75;
}

.admin-translation-action-buttons[b-kmqrk9xbx4] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.admin-translation-action-buttons button[b-kmqrk9xbx4],
.admin-translation-action-buttons a[b-kmqrk9xbx4],
.admin-translation-modal-confirm[b-kmqrk9xbx4],
.admin-translation-modal-cancel[b-kmqrk9xbx4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}

.admin-translation-action-buttons .is-primary[b-kmqrk9xbx4],
.admin-translation-modal-confirm[b-kmqrk9xbx4] {
    color: #fff;
    background: var(--admin-accent);
}

.admin-translation-action-buttons .is-warning[b-kmqrk9xbx4] {
    color: #fff;
    background: var(--admin-warning);
}

.admin-translation-action-buttons .is-danger[b-kmqrk9xbx4] {
    color: #fff;
    background: var(--admin-danger);
}

.admin-translation-action-buttons a[b-kmqrk9xbx4],
.admin-translation-modal-cancel[b-kmqrk9xbx4] {
    text-decoration: none;
}

.admin-translation-action-buttons button:disabled[b-kmqrk9xbx4],
.admin-translation-modal-confirm:disabled[b-kmqrk9xbx4],
.admin-translation-modal-cancel:disabled[b-kmqrk9xbx4] {
    cursor: not-allowed;
    opacity: .55;
}

.admin-translation-actions-unavailable[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 8px;
}

.admin-translation-action-success[b-kmqrk9xbx4],
.admin-translation-action-error[b-kmqrk9xbx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 8px;
}

.admin-translation-action-success[b-kmqrk9xbx4] {
    color: var(--admin-success);
    background: color-mix(in srgb, var(--admin-success) 8%, transparent);
}

.admin-translation-action-success code[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-translation-audit-list[b-kmqrk9xbx4] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.admin-translation-audit-list article[b-kmqrk9xbx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-soft);
}

.admin-translation-audit-list article > div[b-kmqrk9xbx4] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-translation-audit-list article > div:last-child[b-kmqrk9xbx4] {
    justify-items: end;
    text-align: end;
}

.admin-translation-audit-list strong[b-kmqrk9xbx4] {
    color: var(--admin-text);
    font-size: 8px;
}

.admin-translation-audit-list small[b-kmqrk9xbx4],
.admin-translation-audit-list code[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 7px;
}

.admin-translation-action-modal-backdrop[b-kmqrk9xbx4] {
    display: block;
    position: fixed;
    z-index: 80;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(13, 23, 42, .5);
}

.admin-translation-action-modal[b-kmqrk9xbx4] {
    position: fixed;
    z-index: 81;
    top: 50%;
    left: 50%;
    width: min(460px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
    box-shadow: 0 24px 70px rgba(16, 24, 40, .26);
    transform: translate(-50%, -50%);
}

.admin-translation-action-modal > header[b-kmqrk9xbx4],
.admin-translation-action-modal > footer[b-kmqrk9xbx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-translation-action-modal > header span[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .07em;
}

.admin-translation-action-modal > header h2[b-kmqrk9xbx4] {
    margin: 5px 0 0;
    color: var(--admin-text);
    font-size: 15px;
}

.admin-translation-action-modal > header > button[b-kmqrk9xbx4],
.admin-translation-action-modal > header > a[b-kmqrk9xbx4] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    cursor: pointer;
    text-decoration: none;
}

.admin-translation-action-modal-body[b-kmqrk9xbx4] {
    padding: 18px;
}

.admin-translation-action-modal-body > p[b-kmqrk9xbx4] {
    margin: 0 0 14px;
    color: var(--admin-text-2);
    font-size: 8.5px;
    line-height: 1.8;
}

.admin-translation-action-modal label[b-kmqrk9xbx4] {
    display: grid;
    gap: 7px;
    color: var(--admin-text);
    font-size: 8px;
    font-weight: 800;
}

.admin-translation-action-modal textarea[b-kmqrk9xbx4] {
    min-height: 98px;
    resize: vertical;
    padding: 10px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    outline: none;
    color: var(--admin-text);
    background: var(--admin-surface-soft);
    font: inherit;
    font-size: 9px;
}

.admin-translation-action-error[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    background: color-mix(in srgb, var(--admin-danger) 8%, transparent);
}

.admin-translation-action-modal > footer[b-kmqrk9xbx4] {
    justify-content: end;
    border-top: 1px solid var(--admin-line);
    border-bottom: 0;
}

.admin-translation-modal-cancel[b-kmqrk9xbx4] {
    color: var(--admin-text-2);
    background: var(--admin-surface-soft);
}

@media (max-width: 650px) {
    .admin-translation-audit-list article[b-kmqrk9xbx4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-translation-audit-list article > div:last-child[b-kmqrk9xbx4] {
        justify-items: start;
        text-align: start;
    }
}

/* =========================================================
   PHASE 5.2 — ADMIN TRANSLATION UX FINALIZATION
   ========================================================= */

.admin-translation-command-bar[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--admin-line);
    border-radius: 16px;
    background: var(--admin-surface);
    box-shadow: 0 10px 24px rgba(24, 32, 55, .025);
}

.admin-translation-command-bar > div[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-soft);
}

.admin-translation-command-bar > div > span:first-child[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .055em;
}

.admin-translation-command-bar strong[b-kmqrk9xbx4] {
    min-width: 0;
    color: var(--admin-text);
    font-size: 9px;
    overflow-wrap: anywhere;
}

.admin-translation-command-bar small[b-kmqrk9xbx4] {
    min-width: 0;
    color: var(--admin-muted);
    font-size: 7px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.admin-translation-command-state > .admin-translation-status[b-kmqrk9xbx4] {
    width: fit-content;
    margin-top: 1px;
}

.admin-translation-action-grid[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-translation-action-grid > a[b-kmqrk9xbx4],
.admin-translation-action-grid > .admin-translation-action-disabled[b-kmqrk9xbx4] {
    min-width: 0;
    min-height: 58px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 11px;
}

.admin-translation-action-grid > a strong[b-kmqrk9xbx4],
.admin-translation-action-grid > .admin-translation-action-disabled strong[b-kmqrk9xbx4] {
    font-size: 8.5px;
}

.admin-translation-action-grid > a small[b-kmqrk9xbx4],
.admin-translation-action-grid > .admin-translation-action-disabled small[b-kmqrk9xbx4] {
    font-size: 6.7px;
    line-height: 1.45;
    text-align: start;
}

.admin-translation-action-grid > a small[b-kmqrk9xbx4] {
    color: rgba(255, 255, 255, .82);
}

.admin-translation-action-disabled[b-kmqrk9xbx4] {
    border: 1px dashed var(--admin-line-strong);
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    cursor: not-allowed;
}

.admin-translation-action-disabled strong[b-kmqrk9xbx4] {
    color: var(--admin-text-2);
    opacity: .78;
}

.admin-translation-action-disabled small[b-kmqrk9xbx4] {
    color: var(--admin-muted);
}

.admin-translation-actions-unavailable[b-kmqrk9xbx4] {
    display: block;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px dashed var(--admin-line);
    border-radius: 9px;
    background: var(--admin-surface-soft);
    line-height: 1.65;
}

.admin-translation-row-flags[b-kmqrk9xbx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.admin-translation-row-flags > span[b-kmqrk9xbx4],
.admin-translation-row-flags > em[b-kmqrk9xbx4] {
    padding: 2px 5px;
    border-radius: 999px;
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 5.8px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
}

.admin-translation-row-flags > em.is-danger[b-kmqrk9xbx4] {
    color: var(--admin-danger);
    background: color-mix(in srgb, var(--admin-danger) 8%, transparent);
}

.admin-translation-row-flags > em.is-success[b-kmqrk9xbx4] {
    color: var(--admin-success);
    background: color-mix(in srgb, var(--admin-success) 8%, transparent);
}

.admin-translation-credit-stack[b-kmqrk9xbx4] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-translation-credit-stack > div[b-kmqrk9xbx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.admin-translation-credit-stack > div > span[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 5.9px;
    font-weight: 750;
}

.admin-translation-credit-stack > div > strong[b-kmqrk9xbx4] {
    color: var(--admin-text-2);
    font-size: 7.6px;
    font-weight: 900;
}

.admin-translation-credit-stack > div.has-reservation[b-kmqrk9xbx4] {
    padding: 3px 5px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--admin-warning) 7%, transparent);
}

.admin-translation-credit-stack > div.has-reservation > span[b-kmqrk9xbx4],
.admin-translation-credit-stack > div.has-reservation > strong[b-kmqrk9xbx4] {
    color: var(--admin-warning);
}

.admin-translation-credit-stack > small[b-kmqrk9xbx4] {
    color: var(--admin-muted);
    font-size: 5.9px;
}

.admin-translation-details-link[b-kmqrk9xbx4] {
    width: auto;
    min-width: 58px;
    height: 34px;
    grid-auto-flow: column;
    gap: 5px;
    padding: 0 8px;
}

.admin-translation-details-link > span[b-kmqrk9xbx4] {
    font-size: 6.4px;
    font-weight: 850;
}

.admin-translation-operation-trace[b-kmqrk9xbx4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0 14px;
}

.admin-translation-operation-trace > div[b-kmqrk9xbx4] {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    background: var(--admin-surface-soft);
}

.admin-translation-operation-trace > div:first-child[b-kmqrk9xbx4] {
    grid-column: 1 / -1;
}

.admin-translation-operation-trace span[b-kmqrk9xbx4],
.admin-translation-operation-trace strong[b-kmqrk9xbx4],
.admin-translation-operation-trace code[b-kmqrk9xbx4] {
    display: block;
}

.admin-translation-operation-trace span[b-kmqrk9xbx4] {
    margin-bottom: 4px;
    color: var(--admin-muted);
    font-size: 6.2px;
    font-weight: 800;
}

.admin-translation-operation-trace strong[b-kmqrk9xbx4],
.admin-translation-operation-trace code[b-kmqrk9xbx4] {
    color: var(--admin-text-2);
    font-size: 7px;
    overflow-wrap: anywhere;
}

.admin-translation-action-modal-body label > small[b-kmqrk9xbx4] {
    display: block;
    margin-top: 5px;
    color: var(--admin-muted);
    font-size: 6.5px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .admin-translation-command-bar[b-kmqrk9xbx4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-translation-action-grid[b-kmqrk9xbx4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-translation-command-bar[b-kmqrk9xbx4],
    .admin-translation-operation-trace[b-kmqrk9xbx4] {
        grid-template-columns: 1fr;
    }

    .admin-translation-operation-trace > div:first-child[b-kmqrk9xbx4] {
        grid-column: auto;
    }

    .admin-translation-details-link[b-kmqrk9xbx4] {
        min-width: 44px;
    }

    .admin-translation-details-link > span[b-kmqrk9xbx4] {
        display: none;
    }
}

/* _content/AITranslationPlatform.Web/Components/Admin/Users/AdminUsers.razor.rz.scp.css */

.admin-users-page[b-nyan6ze6yd] {
    display: grid;
    gap: 18px;
}

.admin-users-hero[b-nyan6ze6yd],
.admin-users-panel[b-nyan6ze6yd],
.admin-users-summary-card[b-nyan6ze6yd],
.admin-user-profile-card[b-nyan6ze6yd],
.admin-user-detail-metric[b-nyan6ze6yd] {
    border: 1px solid var(--admin-line);
    background: var(--admin-surface);
}

.admin-users-hero[b-nyan6ze6yd] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border-radius: 22px;
    background: radial-gradient(circle at 90% 0%, rgba(24, 68, 198, .075), transparent 34%), var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.admin-users-eyebrow[b-nyan6ze6yd],
.admin-users-panel-heading > div > span[b-nyan6ze6yd],
.admin-user-drawer > header span[b-nyan6ze6yd] {
    color: var(--admin-accent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.admin-users-hero h1[b-nyan6ze6yd] {
    margin: 7px 0 0;
    color: var(--admin-text);
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.25;
    letter-spacing: -.03em;
}

.admin-users-hero p[b-nyan6ze6yd] {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--admin-text-2);
    font-size: 11px;
    line-height: 1.8;
}

.admin-users-refresh[b-nyan6ze6yd],
.admin-users-primary[b-nyan6ze6yd],
.admin-users-secondary[b-nyan6ze6yd],
.admin-users-state button[b-nyan6ze6yd],
.admin-users-pagination button[b-nyan6ze6yd] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--admin-line-strong);
    border-radius: 11px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: 150ms ease;
}

    .admin-users-refresh:hover:not(:disabled)[b-nyan6ze6yd],
    .admin-users-primary:hover[b-nyan6ze6yd],
    .admin-users-secondary:hover[b-nyan6ze6yd],
    .admin-users-state button:hover[b-nyan6ze6yd],
    .admin-users-pagination button:hover:not(:disabled)[b-nyan6ze6yd] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .16);
        background: var(--admin-accent-soft);
    }

    .admin-users-refresh:disabled[b-nyan6ze6yd],
    .admin-users-pagination button:disabled[b-nyan6ze6yd] {
        opacity: .45;
        cursor: not-allowed;
    }

    .admin-users-refresh svg[b-nyan6ze6yd] {
        width: 17px;
        height: 17px;
    }

.is-spinning[b-nyan6ze6yd] {
    animation: admin-users-spin-b-nyan6ze6yd .9s linear infinite;
}

@keyframes admin-users-spin-b-nyan6ze6yd {
    to {
        transform: rotate(360deg);
    }
}

.admin-users-summary[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-users-summary-card[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 15px;
    border-radius: 17px;
    box-shadow: 0 10px 25px rgba(24, 32, 55, .03);
}

.admin-users-summary-icon[b-nyan6ze6yd] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

    .admin-users-summary-icon svg[b-nyan6ze6yd] {
        width: 19px;
        height: 19px;
    }

.admin-users-summary-card > span:last-child[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-users-summary-card small[b-nyan6ze6yd],
.admin-users-summary-card em[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 750;
    font-style: normal;
    line-height: 1.4;
}

.admin-users-summary-card strong[b-nyan6ze6yd] {
    color: var(--admin-text);
    font-size: 19px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-users-panel[b-nyan6ze6yd] {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(24, 32, 55, .035);
}

.admin-users-panel-heading[b-nyan6ze6yd] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--admin-line);
}

    .admin-users-panel-heading h2[b-nyan6ze6yd] {
        margin: 4px 0 0;
        color: var(--admin-text);
        font-size: 17px;
    }

    .admin-users-panel-heading > small[b-nyan6ze6yd] {
        padding: 6px 10px;
        border-radius: 999px;
        color: var(--admin-muted);
        background: var(--admin-surface-soft);
        font-size: 8px;
        font-weight: 750;
    }

.admin-users-toolbar[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 190px auto auto;
    gap: 9px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--admin-line);
    background: var(--admin-surface-soft);
}

.admin-users-search[b-nyan6ze6yd] {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-elevated);
}

    .admin-users-search:focus-within[b-nyan6ze6yd] {
        border-color: rgba(24, 68, 198, .22);
        box-shadow: 0 0 0 3px rgba(24, 68, 198, .06);
    }

    .admin-users-search svg[b-nyan6ze6yd] {
        width: 16px;
        height: 16px;
        color: var(--admin-muted);
    }

    .admin-users-search input[b-nyan6ze6yd] {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        color: var(--admin-text);
        background: transparent;
        font: inherit;
        font-size: 9px;
    }

.admin-users-toolbar select[b-nyan6ze6yd] {
    min-height: 40px;
    width: 100%;
    padding: 0 10px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    outline: 0;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    font: inherit;
    font-size: 9px;
    font-weight: 700;
}

.admin-users-secondary[b-nyan6ze6yd] {
    color: var(--admin-muted);
}

.admin-users-state[b-nyan6ze6yd] {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
}

    .admin-users-state strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 12px;
    }

    .admin-users-state p[b-nyan6ze6yd] {
        max-width: 560px;
        margin: 0;
        color: var(--admin-muted);
        font-size: 9px;
    }

    .admin-users-state.is-error strong[b-nyan6ze6yd] {
        color: var(--admin-danger);
    }

.admin-users-spinner[b-nyan6ze6yd] {
    width: 30px;
    height: 30px;
    border: 3px solid var(--admin-line);
    border-top-color: var(--admin-accent);
    border-radius: 50%;
    animation: admin-users-spin-b-nyan6ze6yd .85s linear infinite;
}

.admin-users-table-wrap[b-nyan6ze6yd] {
    overflow-x: auto;
}

.admin-users-table[b-nyan6ze6yd] {
    width: 100%;
    border-collapse: collapse;
}

    .admin-users-table th[b-nyan6ze6yd] {
        padding: 10px 11px;
        border-bottom: 1px solid var(--admin-line);
        color: var(--admin-muted);
        background: var(--admin-surface-soft);
        font-size: 7.5px;
        font-weight: 850;
        text-align: start;
        white-space: nowrap;
    }

    .admin-users-table td[b-nyan6ze6yd] {
        padding: 11px;
        border-bottom: 1px solid var(--admin-line);
        color: var(--admin-text-2);
        vertical-align: middle;
    }

    .admin-users-table tbody tr[b-nyan6ze6yd] {
        transition: 120ms ease;
    }

        .admin-users-table tbody tr:hover[b-nyan6ze6yd] {
            background: rgba(24, 68, 198, .025);
        }

        .admin-users-table tbody tr:last-child td[b-nyan6ze6yd] {
            border-bottom: 0;
        }

    .admin-users-table td > strong[b-nyan6ze6yd],
    .admin-users-table td > small[b-nyan6ze6yd] {
        display: block;
    }

    .admin-users-table td > strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 9px;
        font-weight: 820;
    }

    .admin-users-table td > small[b-nyan6ze6yd] {
        margin-top: 2px;
        color: var(--admin-muted);
        font-size: 7px;
    }

.admin-user-identity[b-nyan6ze6yd] {
    min-width: 175px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.admin-user-avatar[b-nyan6ze6yd],
.admin-user-profile-avatar[b-nyan6ze6yd] {
    display: grid;
    place-items: center;
    border: 1px solid rgba(24, 68, 198, .10);
    border-radius: 11px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 9px;
    font-weight: 900;
}

.admin-user-avatar[b-nyan6ze6yd] {
    width: 34px;
    height: 34px;
}

.admin-user-identity > span:last-child[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-user-identity strong[b-nyan6ze6yd] {
    color: var(--admin-text);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-identity small[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-status[b-nyan6ze6yd] {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
    font-size: 7px;
    font-weight: 850;
    white-space: nowrap;
}

    .admin-user-status.is-success[b-nyan6ze6yd] {
        color: var(--admin-success);
        background: rgba(39, 132, 103, .08);
    }

    .admin-user-status.is-warning[b-nyan6ze6yd] {
        color: var(--admin-warning);
        background: rgba(169, 115, 31, .08);
    }

    .admin-user-status.is-danger[b-nyan6ze6yd] {
        color: var(--admin-danger);
        background: rgba(201, 74, 82, .08);
    }

.admin-user-actions[b-nyan6ze6yd] {
    text-align: end;
    white-space: nowrap;
}

.admin-user-actions-heading[b-nyan6ze6yd] {
    width: 92px;
    text-align: center !important;
}

.admin-user-details-link[b-nyan6ze6yd] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--admin-line-strong);
    border-radius: 10px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 27, 46, .025);
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

    .admin-user-details-link:hover[b-nyan6ze6yd] {
        transform: translateY(-1px);
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .18);
        background: var(--admin-accent-soft);
        box-shadow: 0 5px 12px rgba(24, 68, 198, .07);
    }

    .admin-user-details-link:focus-visible[b-nyan6ze6yd] {
        outline: 0;
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .20);
        box-shadow: 0 0 0 3px rgba(24, 68, 198, .08);
    }

    .admin-user-details-link svg[b-nyan6ze6yd] {
        width: 15px;
        height: 15px;
    }

.admin-user-drawer-close[b-nyan6ze6yd] {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    color: var(--admin-muted);
    background: var(--admin-surface-elevated);
    text-decoration: none;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: 140ms ease;
}

    .admin-user-drawer-close:hover[b-nyan6ze6yd] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .14);
        background: var(--admin-accent-soft);
    }

.admin-users-pagination[b-nyan6ze6yd] {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--admin-line);
}

    .admin-users-pagination span[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 750;
    }

.admin-user-drawer-backdrop[b-nyan6ze6yd] {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: block;
    border: 0;
    background: rgba(10, 17, 30, .28);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    cursor: default;
}

.admin-user-drawer[b-nyan6ze6yd] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 140;
    width: min(560px, 94vw);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    color: var(--admin-text);
    background: var(--admin-surface);
    border-left: 1px solid var(--admin-line);
    border-right: 0;
    box-shadow: -22px 0 54px rgba(17, 27, 46, .14);
    animation: admin-user-drawer-in-b-nyan6ze6yd 180ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes admin-user-drawer-in-b-nyan6ze6yd {
    from {
        opacity: .75;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.admin-user-drawer > header[b-nyan6ze6yd] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 17px;
    border-bottom: 1px solid var(--admin-line);
}

    .admin-user-drawer > header h2[b-nyan6ze6yd] {
        margin: 4px 0 0;
        color: var(--admin-text);
        font-size: 16px;
    }

.admin-user-drawer-close[b-nyan6ze6yd] {
    font-size: 19px;
}

.admin-user-drawer-content[b-nyan6ze6yd] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    background: var(--admin-surface-soft);
    scrollbar-gutter: stable;
}

.admin-user-profile-card[b-nyan6ze6yd] {
    padding: 15px;
    border-radius: 16px;
}

.admin-user-profile-head[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-user-profile-avatar[b-nyan6ze6yd] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 12px;
}

.admin-user-profile-head h3[b-nyan6ze6yd] {
    margin: 0;
    color: var(--admin-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.admin-user-profile-head p[b-nyan6ze6yd] {
    margin: 3px 0 0;
    color: var(--admin-muted);
    font-size: 8px;
}

.admin-user-profile-card dl[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0 0;
}

    .admin-user-profile-card dl > div[b-nyan6ze6yd] {
        min-width: 0;
        padding: 9px;
        border-radius: 10px;
        background: var(--admin-surface-soft);
    }

.admin-user-profile-card dt[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 7px;
    font-weight: 750;
}

.admin-user-profile-card dd[b-nyan6ze6yd] {
    margin: 4px 0 0;
    color: var(--admin-text);
    font-size: 8px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.admin-user-readonly-note[b-nyan6ze6yd] {
    margin: 12px 0 0;
    padding: 9px 10px;
    border: 1px solid rgba(169, 115, 31, .12);
    border-radius: 10px;
    color: var(--admin-warning);
    background: rgba(169, 115, 31, .06);
    font-size: 7.5px;
    line-height: 1.6;
}

.admin-user-detail-grid[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.admin-user-detail-metric[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 12px;
}

    .admin-user-detail-metric span[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 7px;
        font-weight: 700;
    }

    .admin-user-detail-metric strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 10px;
        font-weight: 850;
        overflow-wrap: anywhere;
    }

html[data-theme="dark"] .admin-users-hero[b-nyan6ze6yd],
html[data-theme="dark"] .admin-users-summary-card[b-nyan6ze6yd],
html[data-theme="dark"] .admin-users-panel[b-nyan6ze6yd] {
    box-shadow: none;
}

@media (max-width: 1280px) {
    .admin-users-summary[b-nyan6ze6yd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-toolbar[b-nyan6ze6yd] {
        grid-template-columns: minmax(220px, 1fr) 160px 170px;
    }
}

@media (max-width: 900px) {
    .admin-users-hero[b-nyan6ze6yd] {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-users-refresh[b-nyan6ze6yd] {
        width: 100%;
    }

    .admin-users-toolbar[b-nyan6ze6yd] {
        grid-template-columns: 1fr 1fr;
    }

    .admin-users-search[b-nyan6ze6yd] {
        grid-column: 1 / -1;
    }

    .admin-users-table[b-nyan6ze6yd],
    .admin-users-table tbody[b-nyan6ze6yd],
    .admin-users-table tr[b-nyan6ze6yd],
    .admin-users-table td[b-nyan6ze6yd] {
        display: block;
        width: 100%;
    }

        .admin-users-table thead[b-nyan6ze6yd] {
            display: none;
        }

        .admin-users-table tbody[b-nyan6ze6yd] {
            display: grid;
            gap: 10px;
            padding: 12px;
            background: var(--admin-surface-soft);
        }

        .admin-users-table tr[b-nyan6ze6yd] {
            overflow: hidden;
            border: 1px solid var(--admin-line);
            border-radius: 14px;
            background: var(--admin-surface);
        }

        .admin-users-table td[b-nyan6ze6yd] {
            display: grid;
            grid-template-columns: 120px minmax(0, 1fr);
            align-items: center;
            gap: 10px;
        }

            .admin-users-table td[b-nyan6ze6yd]::before {
                content: attr(data-label);
                color: var(--admin-muted);
                font-size: 7px;
                font-weight: 800;
            }

            .admin-users-table td:first-child[b-nyan6ze6yd] {
                display: block;
                background: var(--admin-surface-soft);
            }

                .admin-users-table td:first-child[b-nyan6ze6yd]::before,
                .admin-users-table td:last-child[b-nyan6ze6yd]::before {
                    display: none;
                }

            .admin-users-table td:last-child[b-nyan6ze6yd] {
                display: flex;
                justify-content: flex-end;
            }
}

@media (max-width: 620px) {
    .admin-users-summary[b-nyan6ze6yd],
    .admin-users-toolbar[b-nyan6ze6yd],
    .admin-user-profile-card dl[b-nyan6ze6yd],
    .admin-user-detail-grid[b-nyan6ze6yd] {
        grid-template-columns: 1fr;
    }

    .admin-users-hero[b-nyan6ze6yd] {
        padding: 21px 19px;
        border-radius: 18px;
    }

    .admin-users-toolbar[b-nyan6ze6yd] {
        padding: 11px;
    }

    .admin-users-search[b-nyan6ze6yd] {
        grid-column: auto;
    }

    .admin-user-profile-head[b-nyan6ze6yd] {
        grid-template-columns: 44px minmax(0, 1fr);
    }

        .admin-user-profile-head > .admin-user-status[b-nyan6ze6yd] {
            grid-column: 1 / -1;
            justify-self: start;
        }
}


/* =========================================================
   STAGE 3.2 — ADMIN USER ACTIONS
   ========================================================= */

.admin-user-action-success[b-nyan6ze6yd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(39, 132, 103, .14);
    border-radius: 12px;
    color: var(--admin-success);
    background: rgba(39, 132, 103, .07);
}

    .admin-user-action-success strong[b-nyan6ze6yd] {
        font-size: 8.5px;
    }

    .admin-user-action-success small[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 7px;
    }

.admin-user-admin-actions[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.admin-user-action-button[b-nyan6ze6yd] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--admin-line-strong);
    border-radius: 11px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    font: inherit;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
    transition: 150ms ease;
}

    .admin-user-action-button:hover:not(:disabled)[b-nyan6ze6yd] {
        transform: translateY(-1px);
    }

    .admin-user-action-button:disabled[b-nyan6ze6yd] {
        opacity: .5;
        cursor: not-allowed;
    }

    .admin-user-action-button.is-primary[b-nyan6ze6yd] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .14);
        background: var(--admin-accent-soft);
    }

    .admin-user-action-button.is-danger[b-nyan6ze6yd] {
        color: var(--admin-danger);
        border-color: rgba(201, 74, 82, .15);
        background: rgba(201, 74, 82, .07);
    }

    .admin-user-action-button.is-success[b-nyan6ze6yd] {
        color: var(--admin-success);
        border-color: rgba(39, 132, 103, .15);
        background: rgba(39, 132, 103, .07);
    }

.admin-user-security-note[b-nyan6ze6yd] {
    margin: 9px 0 0;
    padding: 9px 10px;
    border: 1px solid rgba(24, 68, 198, .10);
    border-radius: 10px;
    color: var(--admin-muted);
    background: var(--admin-accent-soft);
    font-size: 7.2px;
    line-height: 1.65;
}

.admin-user-audit-card[b-nyan6ze6yd] {
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 16px;
    background: var(--admin-surface);
}

    .admin-user-audit-card > header[b-nyan6ze6yd] {
        min-height: 57px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 13px;
        border-bottom: 1px solid var(--admin-line);
    }

        .admin-user-audit-card > header span[b-nyan6ze6yd] {
            color: var(--admin-accent);
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .10em;
        }

        .admin-user-audit-card > header h3[b-nyan6ze6yd] {
            margin: 3px 0 0;
            color: var(--admin-text);
            font-size: 12px;
        }

        .admin-user-audit-card > header > strong[b-nyan6ze6yd] {
            min-width: 28px;
            padding: 4px 7px;
            border-radius: 999px;
            color: var(--admin-accent);
            background: var(--admin-accent-soft);
            font-size: 8px;
            text-align: center;
        }

.admin-user-audit-empty[b-nyan6ze6yd] {
    margin: 0;
    padding: 18px 13px;
    color: var(--admin-muted);
    font-size: 8px;
    text-align: center;
}

.admin-user-audit-list[b-nyan6ze6yd] {
    display: grid;
}

    .admin-user-audit-list article[b-nyan6ze6yd] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 13px;
        border-bottom: 1px solid var(--admin-line);
    }

        .admin-user-audit-list article:last-child[b-nyan6ze6yd] {
            border-bottom: 0;
        }

        .admin-user-audit-list article > div[b-nyan6ze6yd] {
            min-width: 0;
            display: grid;
            gap: 3px;
        }

            .admin-user-audit-list article > div:last-child[b-nyan6ze6yd] {
                justify-items: end;
                text-align: end;
            }

    .admin-user-audit-list strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 8px;
    }

    .admin-user-audit-list small[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 7px;
        line-height: 1.5;
    }

    .admin-user-audit-list code[b-nyan6ze6yd] {
        color: var(--admin-accent);
        font-family: Consolas, "SFMono-Regular", monospace;
        font-size: 6.8px;
    }

/* Modal */

.admin-user-action-modal-backdrop[b-nyan6ze6yd] {
    position: fixed;
    inset: 0;
    z-index: 160;
    border: 0;
    background: rgba(12, 18, 30, .48);
    backdrop-filter: blur(3px);
}

.admin-user-action-modal[b-nyan6ze6yd] {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 170;
    width: min(520px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 30px));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    transform: translate(-50%, -50%);
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    color: var(--admin-text);
    background: var(--admin-surface);
    box-shadow: 0 28px 80px rgba(13, 22, 40, .22);
}

    .admin-user-action-modal > header[b-nyan6ze6yd] {
        min-height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 13px 15px;
        border-bottom: 1px solid var(--admin-line);
    }

        .admin-user-action-modal > header span[b-nyan6ze6yd] {
            color: var(--admin-accent);
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .10em;
        }

        .admin-user-action-modal > header h3[b-nyan6ze6yd] {
            margin: 4px 0 0;
            color: var(--admin-text);
            font-size: 14px;
        }

        .admin-user-action-modal > header > button[b-nyan6ze6yd] {
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            padding: 0;
            border: 1px solid var(--admin-line);
            border-radius: 10px;
            color: var(--admin-muted);
            background: var(--admin-surface-elevated);
            font: inherit;
            font-size: 18px;
            cursor: pointer;
        }

.admin-user-action-modal-body[b-nyan6ze6yd] {
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--admin-surface-soft);
}

.admin-user-action-target[b-nyan6ze6yd] {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface);
}

    .admin-user-action-target span[b-nyan6ze6yd],
    .admin-user-action-field > span[b-nyan6ze6yd],
    .admin-credit-current-grid span[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 7px;
        font-weight: 750;
    }

    .admin-user-action-target strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 10px;
    }

    .admin-user-action-target small[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 7px;
    }

.admin-credit-current-grid[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

    .admin-credit-current-grid > div[b-nyan6ze6yd] {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 9px;
        border: 1px solid var(--admin-line);
        border-radius: 10px;
        background: var(--admin-surface);
    }

    .admin-credit-current-grid strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 10px;
        overflow-wrap: anywhere;
    }

.admin-credit-direction[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 4px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    background: var(--admin-surface);
}

    .admin-credit-direction button[b-nyan6ze6yd] {
        min-height: 36px;
        border: 0;
        border-radius: 9px;
        color: var(--admin-muted);
        background: transparent;
        font: inherit;
        font-size: 8px;
        font-weight: 800;
        cursor: pointer;
    }

        .admin-credit-direction button.is-selected[b-nyan6ze6yd] {
            color: var(--admin-success);
            background: rgba(39, 132, 103, .08);
        }

            .admin-credit-direction button.is-selected.is-remove[b-nyan6ze6yd] {
                color: var(--admin-danger);
                background: rgba(201, 74, 82, .08);
            }

.admin-user-action-field[b-nyan6ze6yd] {
    display: grid;
    gap: 6px;
}

    .admin-user-action-field input[b-nyan6ze6yd],
    .admin-user-action-field textarea[b-nyan6ze6yd] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--admin-line);
        border-radius: 10px;
        outline: 0;
        color: var(--admin-text);
        background: var(--admin-surface);
        font: inherit;
        font-size: 9px;
        transition: 120ms ease;
    }

    .admin-user-action-field input[b-nyan6ze6yd] {
        min-height: 41px;
        padding: 0 10px;
    }

    .admin-user-action-field textarea[b-nyan6ze6yd] {
        resize: vertical;
        min-height: 92px;
        padding: 9px 10px;
        line-height: 1.65;
    }

        .admin-user-action-field input:focus[b-nyan6ze6yd],
        .admin-user-action-field textarea:focus[b-nyan6ze6yd] {
            border-color: rgba(24, 68, 198, .22);
            box-shadow: 0 0 0 3px rgba(24, 68, 198, .06);
        }

    .admin-user-action-field small[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 7px;
    }

.admin-user-suspension-warning[b-nyan6ze6yd] {
    padding: 11px;
    border: 1px solid rgba(201, 74, 82, .14);
    border-radius: 11px;
    color: var(--admin-danger);
    background: rgba(201, 74, 82, .06);
}

    .admin-user-suspension-warning.is-reactivate[b-nyan6ze6yd] {
        border-color: rgba(39, 132, 103, .14);
        color: var(--admin-success);
        background: rgba(39, 132, 103, .06);
    }

    .admin-user-suspension-warning strong[b-nyan6ze6yd] {
        font-size: 8.5px;
    }

    .admin-user-suspension-warning p[b-nyan6ze6yd] {
        margin: 5px 0 0;
        color: var(--admin-muted);
        font-size: 7px;
        line-height: 1.6;
    }

.admin-user-action-error[b-nyan6ze6yd] {
    padding: 9px 10px;
    border: 1px solid rgba(201, 74, 82, .15);
    border-radius: 10px;
    color: var(--admin-danger);
    background: rgba(201, 74, 82, .07);
    font-size: 8px;
    line-height: 1.6;
}

.admin-user-action-modal > footer[b-nyan6ze6yd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--admin-line);
    background: var(--admin-surface);
}

.admin-action-cancel[b-nyan6ze6yd],
.admin-action-confirm[b-nyan6ze6yd] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    background: var(--admin-surface-elevated);
    font: inherit;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}

.admin-action-cancel[b-nyan6ze6yd] {
    color: var(--admin-muted);
}

.admin-action-confirm.is-primary[b-nyan6ze6yd] {
    color: var(--admin-accent);
    border-color: rgba(24, 68, 198, .15);
    background: var(--admin-accent-soft);
}

.admin-action-confirm.is-danger[b-nyan6ze6yd] {
    color: var(--admin-danger);
    border-color: rgba(201, 74, 82, .16);
    background: rgba(201, 74, 82, .07);
}

.admin-action-cancel:disabled[b-nyan6ze6yd],
.admin-action-confirm:disabled[b-nyan6ze6yd] {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 620px) {
    .admin-user-admin-actions[b-nyan6ze6yd],
    .admin-credit-current-grid[b-nyan6ze6yd],
    .admin-credit-direction[b-nyan6ze6yd] {
        grid-template-columns: 1fr;
    }

    .admin-user-action-modal > footer[b-nyan6ze6yd] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-user-audit-list article[b-nyan6ze6yd] {
        align-items: flex-start;
        flex-direction: column;
    }

        .admin-user-audit-list article > div:last-child[b-nyan6ze6yd] {
            justify-items: start;
            text-align: start;
        }
}


/* =========================================================
   USERS UI POLISH — latest Codex-compatible correction
   ========================================================= */

@media (max-width: 620px) {
    .admin-user-drawer[b-nyan6ze6yd] {
        width: 100vw;
        max-width: 100vw;
        border-left: 0;
        box-shadow: none;
    }
}

html[data-theme="dark"] .admin-user-details-link[b-nyan6ze6yd] {
    box-shadow: none;
}

html[data-theme="dark"] .admin-user-drawer[b-nyan6ze6yd] {
    box-shadow: -22px 0 54px rgba(0, 0, 0, .30);
}


/* =========================================================
   USERS — FULL MAIN-CONTENT DETAILS VIEW
   Replaces the compact overlay drawer visually while keeping
   the latest Codex SSR/query-string flow.
   ========================================================= */

.admin-user-details-page[b-nyan6ze6yd] {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.admin-user-details-hero[b-nyan6ze6yd] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 28px;
    border: 1px solid var(--admin-line);
    border-radius: 22px;
    background: radial-gradient(circle at 88% 0%, rgba(24, 68, 198, .08), transparent 34%), var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.admin-user-details-title[b-nyan6ze6yd] {
    min-width: 0;
    max-width: 760px;
}

.admin-user-back-link[b-nyan6ze6yd] {
    width: fit-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 0 11px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    transition: 140ms ease;
}

    .admin-user-back-link:hover[b-nyan6ze6yd] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .16);
        background: var(--admin-accent-soft);
    }

    .admin-user-back-link svg[b-nyan6ze6yd] {
        width: 15px;
        height: 15px;
    }

.admin-user-details-page[dir="rtl"] .admin-user-back-link svg[b-nyan6ze6yd] {
    transform: rotate(180deg);
}

.admin-user-details-eyebrow[b-nyan6ze6yd],
.admin-user-section-header span[b-nyan6ze6yd],
.admin-user-section-title span[b-nyan6ze6yd] {
    color: var(--admin-accent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.admin-user-details-title h1[b-nyan6ze6yd] {
    margin: 7px 0 0;
    color: var(--admin-text);
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.25;
    letter-spacing: -.03em;
}

.admin-user-details-title p[b-nyan6ze6yd] {
    max-width: 720px;
    margin: 10px 0 0;
    color: var(--admin-text-2);
    font-size: 11px;
    line-height: 1.85;
}

.admin-user-details-hero-status[b-nyan6ze6yd] {
    min-width: 300px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--admin-line);
    border-radius: 16px;
    background: var(--admin-surface-elevated);
}

.admin-user-details-avatar[b-nyan6ze6yd] {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(24, 68, 198, .12);
    border-radius: 16px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 14px;
    font-weight: 900;
}

.admin-user-details-hero-status > div[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

    .admin-user-details-hero-status > div strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-user-details-hero-status > div small[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.admin-user-details-loading[b-nyan6ze6yd],
.admin-user-details-error[b-nyan6ze6yd] {
    min-height: 320px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 32px;
    border: 1px solid var(--admin-line);
    border-radius: 20px;
    background: var(--admin-surface);
    text-align: center;
}

    .admin-user-details-loading strong[b-nyan6ze6yd],
    .admin-user-details-error strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 13px;
    }

    .admin-user-details-error strong[b-nyan6ze6yd] {
        color: var(--admin-danger);
    }

    .admin-user-details-error p[b-nyan6ze6yd] {
        margin: 0;
        color: var(--admin-muted);
        font-size: 10px;
    }

    .admin-user-details-error a[b-nyan6ze6yd] {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        border-radius: 10px;
        color: var(--admin-accent);
        background: var(--admin-accent-soft);
        text-decoration: none;
        font-size: 9px;
        font-weight: 800;
    }

.admin-user-action-success-wide[b-nyan6ze6yd] {
    padding: 13px 15px;
    border-radius: 14px;
}

    .admin-user-action-success-wide strong[b-nyan6ze6yd] {
        font-size: 10px;
    }

.admin-user-details-layout[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
    gap: 14px;
    align-items: stretch;
}

.admin-user-details-card[b-nyan6ze6yd] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: var(--admin-surface);
    box-shadow: 0 10px 26px rgba(24, 32, 55, .028);
}

.admin-user-section-header[b-nyan6ze6yd] {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--admin-line);
}

    .admin-user-section-header h2[b-nyan6ze6yd],
    .admin-user-section-title h2[b-nyan6ze6yd] {
        margin: 4px 0 0;
        color: var(--admin-text);
        font-size: 16px;
    }

.admin-user-information-grid[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 16px 18px 18px;
}

    .admin-user-information-grid > div[b-nyan6ze6yd] {
        min-width: 0;
        padding: 13px 14px;
        border: 1px solid var(--admin-line);
        border-radius: 12px;
        background: var(--admin-surface-soft);
    }

    .admin-user-information-grid dt[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 750;
    }

    .admin-user-information-grid dd[b-nyan6ze6yd] {
        margin: 6px 0 0;
        color: var(--admin-text);
        font-size: 10px;
        font-weight: 780;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

.admin-user-id-value[b-nyan6ze6yd] {
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 8.5px !important;
}

.admin-user-management-card[b-nyan6ze6yd] {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.admin-user-management-actions[b-nyan6ze6yd] {
    display: grid;
    gap: 10px;
    padding: 16px 18px 10px;
}

.admin-user-management-button[b-nyan6ze6yd] {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--admin-line-strong);
    border-radius: 13px;
    color: var(--admin-text-2);
    background: var(--admin-surface-elevated);
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition: 150ms ease;
}

    .admin-user-management-button:hover:not(:disabled)[b-nyan6ze6yd] {
        transform: translateY(-1px);
    }

    .admin-user-management-button:disabled[b-nyan6ze6yd] {
        opacity: .5;
        cursor: not-allowed;
    }

    .admin-user-management-button.is-primary[b-nyan6ze6yd] {
        color: var(--admin-accent);
        border-color: rgba(24, 68, 198, .14);
        background: var(--admin-accent-soft);
    }

    .admin-user-management-button.is-danger[b-nyan6ze6yd] {
        color: var(--admin-danger);
        border-color: rgba(201, 74, 82, .15);
        background: rgba(201, 74, 82, .06);
    }

    .admin-user-management-button.is-success[b-nyan6ze6yd] {
        color: var(--admin-success);
        border-color: rgba(39, 132, 103, .15);
        background: rgba(39, 132, 103, .06);
    }

.admin-user-management-button-icon[b-nyan6ze6yd] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .46);
}

html[data-theme="dark"] .admin-user-management-button-icon[b-nyan6ze6yd] {
    background: rgba(255, 255, 255, .04);
}

.admin-user-management-button-icon svg[b-nyan6ze6yd] {
    width: 21px;
    height: 21px;
}

.admin-user-management-button > span:last-child[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-user-management-button strong[b-nyan6ze6yd] {
    color: currentColor;
    font-size: 10px;
}

.admin-user-management-button small[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 8px;
    line-height: 1.55;
}

.admin-user-management-note[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin: 0 18px 18px;
    padding: 10px 11px;
    border: 1px solid rgba(24, 68, 198, .10);
    border-radius: 11px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

    .admin-user-management-note svg[b-nyan6ze6yd] {
        width: 20px;
        height: 20px;
    }

    .admin-user-management-note p[b-nyan6ze6yd] {
        margin: 0;
        color: var(--admin-muted);
        font-size: 8px;
        line-height: 1.65;
    }

.admin-user-statistics-section[b-nyan6ze6yd] {
    display: grid;
    gap: 12px;
}

.admin-user-section-title[b-nyan6ze6yd] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 3px;
}

.admin-user-details-metrics[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.admin-user-large-metric[b-nyan6ze6yd] {
    min-width: 0;
    min-height: 116px;
    display: grid;
    align-content: space-between;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: var(--admin-surface);
    box-shadow: 0 8px 20px rgba(24, 32, 55, .025);
}

.admin-user-large-metric-label[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 780;
}

.admin-user-large-metric strong[b-nyan6ze6yd] {
    color: var(--admin-text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.admin-user-large-metric small[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 7.5px;
    line-height: 1.45;
}

.admin-user-large-metric.is-failed strong[b-nyan6ze6yd] {
    color: var(--admin-danger);
}

.admin-user-large-metric.is-credit strong[b-nyan6ze6yd],
.admin-user-large-metric.is-payment strong[b-nyan6ze6yd] {
    color: var(--admin-success);
}

.admin-user-large-metric.is-ai strong[b-nyan6ze6yd] {
    color: var(--admin-accent);
}

.admin-user-data-layout[b-nyan6ze6yd] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.admin-user-resource-grid[b-nyan6ze6yd],
.admin-user-storage-values[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px 18px;
}

    .admin-user-resource-grid > div[b-nyan6ze6yd],
    .admin-user-storage-values > div[b-nyan6ze6yd] {
        min-width: 0;
        display: grid;
        gap: 6px;
        padding: 14px;
        border: 1px solid var(--admin-line);
        border-radius: 12px;
        background: var(--admin-surface-soft);
    }

    .admin-user-resource-grid span[b-nyan6ze6yd],
    .admin-user-storage-values span[b-nyan6ze6yd] {
        color: var(--admin-muted);
        font-size: 8px;
        font-weight: 750;
    }

    .admin-user-resource-grid strong[b-nyan6ze6yd],
    .admin-user-storage-values strong[b-nyan6ze6yd] {
        color: var(--admin-text);
        font-size: 14px;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    .admin-user-storage-values > div.is-total[b-nyan6ze6yd] {
        border-color: rgba(24, 68, 198, .13);
        background: var(--admin-accent-soft);
    }

.admin-user-audit-card-wide[b-nyan6ze6yd] {
    border-radius: 18px;
}

    .admin-user-audit-card-wide > header[b-nyan6ze6yd] {
        min-height: 68px;
        padding: 15px 18px;
    }

        .admin-user-audit-card-wide > header h3[b-nyan6ze6yd] {
            font-size: 16px;
        }

    .admin-user-audit-card-wide .admin-user-audit-list article[b-nyan6ze6yd] {
        min-height: 62px;
        padding: 12px 18px;
    }

    .admin-user-audit-card-wide .admin-user-audit-list strong[b-nyan6ze6yd] {
        font-size: 9.5px;
    }

    .admin-user-audit-card-wide .admin-user-audit-list small[b-nyan6ze6yd] {
        font-size: 8px;
    }

    .admin-user-audit-card-wide .admin-user-audit-list code[b-nyan6ze6yd] {
        font-size: 7.5px;
    }

html[data-theme="dark"] .admin-user-details-hero[b-nyan6ze6yd],
html[data-theme="dark"] .admin-user-details-card[b-nyan6ze6yd],
html[data-theme="dark"] .admin-user-large-metric[b-nyan6ze6yd] {
    box-shadow: none;
}

@media (max-width: 1180px) {
    .admin-user-details-hero[b-nyan6ze6yd] {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-user-details-hero-status[b-nyan6ze6yd] {
        width: 100%;
        min-width: 0;
    }

    .admin-user-details-layout[b-nyan6ze6yd] {
        grid-template-columns: 1fr;
    }

    .admin-user-details-metrics[b-nyan6ze6yd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-user-details-hero[b-nyan6ze6yd] {
        padding: 20px;
        border-radius: 18px;
    }

    .admin-user-details-hero-status[b-nyan6ze6yd] {
        grid-template-columns: 48px minmax(0, 1fr);
    }

        .admin-user-details-hero-status > .admin-user-status[b-nyan6ze6yd] {
            grid-column: 1 / -1;
            justify-self: start;
        }

    .admin-user-information-grid[b-nyan6ze6yd],
    .admin-user-resource-grid[b-nyan6ze6yd],
    .admin-user-storage-values[b-nyan6ze6yd],
    .admin-user-details-metrics[b-nyan6ze6yd] {
        grid-template-columns: 1fr;
    }

    .admin-user-details-title h1[b-nyan6ze6yd] {
        font-size: 26px;
    }

    .admin-user-large-metric[b-nyan6ze6yd] {
        min-height: 104px;
    }
}

/* =========================================================
   PHASE 5.3 — ADMIN USER FINANCIAL VISIBILITY
   ========================================================= */

.admin-user-financial-section[b-nyan6ze6yd] {
    display: grid;
    gap: 12px;
}

.admin-user-financial-overview[b-nyan6ze6yd],
.admin-user-financial-subgrid[b-nyan6ze6yd],
.admin-user-commercial-grid[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-user-financial-card[b-nyan6ze6yd],
.admin-user-financial-list-card[b-nyan6ze6yd] {
    min-width: 0;
    border: 1px solid var(--admin-line);
    border-radius: 17px;
    background: var(--admin-surface);
    box-shadow: 0 10px 24px rgba(24, 32, 55, .03);
}

.admin-user-financial-card[b-nyan6ze6yd] {
    padding: 15px;
}

.admin-user-financial-card > header[b-nyan6ze6yd],
.admin-user-financial-list-card > header[b-nyan6ze6yd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.admin-user-financial-card > header > span[b-nyan6ze6yd],
.admin-user-financial-list-card > header span[b-nyan6ze6yd] {
    color: var(--admin-accent);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .09em;
}

.admin-user-financial-card > header > strong[b-nyan6ze6yd],
.admin-user-financial-list-card > header > strong[b-nyan6ze6yd] {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--admin-text-2);
    background: var(--admin-surface-soft);
    font-size: 7px;
    font-weight: 850;
}

.admin-user-financial-list-card[b-nyan6ze6yd] {
    overflow: hidden;
}

.admin-user-financial-list-card > header[b-nyan6ze6yd] {
    padding: 13px 14px;
    border-bottom: 1px solid var(--admin-line);
}

.admin-user-financial-list-card > header h3[b-nyan6ze6yd] {
    margin: 4px 0 0;
    color: var(--admin-text);
    font-size: 12px;
}

.admin-user-financial-metrics[b-nyan6ze6yd],
.admin-user-fifo-projection[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.admin-user-financial-metrics > div[b-nyan6ze6yd],
.admin-user-fifo-projection > div[b-nyan6ze6yd] {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    background: var(--admin-surface-soft);
}

.admin-user-financial-metrics span[b-nyan6ze6yd],
.admin-user-fifo-projection span[b-nyan6ze6yd] {
    display: block;
    color: var(--admin-muted);
    font-size: 6.5px;
    font-weight: 750;
}

.admin-user-financial-metrics strong[b-nyan6ze6yd],
.admin-user-fifo-projection strong[b-nyan6ze6yd] {
    display: block;
    margin-top: 4px;
    color: var(--admin-text);
    font-size: 10px;
    overflow-wrap: anywhere;
}

.admin-user-fifo-projection strong[b-nyan6ze6yd] {
    font-size: 8px;
}

.admin-user-entitlement-name[b-nyan6ze6yd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    padding: 11px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: var(--admin-surface-soft);
}

.admin-user-entitlement-name strong[b-nyan6ze6yd] {
    color: var(--admin-text);
    font-size: 12px;
}

.admin-user-entitlement-name code[b-nyan6ze6yd] {
    padding: 3px 6px;
    border-radius: 6px;
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
    font-size: 7px;
}

.admin-user-entitlement-grid[b-nyan6ze6yd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
}

.admin-user-entitlement-grid > div[b-nyan6ze6yd] {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
}

.admin-user-entitlement-grid dt[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 6.3px;
}

.admin-user-entitlement-grid dd[b-nyan6ze6yd] {
    margin: 4px 0 0;
    color: var(--admin-text-2);
    font-size: 7px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-user-financial-alert[b-nyan6ze6yd] {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 10px;
    color: var(--admin-danger);
    background: rgba(239, 68, 68, .055);
    font-size: 7px;
    line-height: 1.65;
}

.admin-user-financial-alert strong[b-nyan6ze6yd],
.admin-user-financial-alert span[b-nyan6ze6yd] {
    display: block;
}

.admin-user-financial-card > .admin-user-financial-alert[b-nyan6ze6yd] {
    margin-top: 10px;
}

.admin-user-financial-list[b-nyan6ze6yd],
.admin-user-commercial-list[b-nyan6ze6yd] {
    display: grid;
}

.admin-user-financial-list > article[b-nyan6ze6yd],
.admin-user-commercial-list > article[b-nyan6ze6yd] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--admin-line);
}

.admin-user-financial-list > article:first-child[b-nyan6ze6yd],
.admin-user-commercial-list > article:first-child[b-nyan6ze6yd] {
    border-top: 0;
}

.admin-user-financial-list > article.is-manual[b-nyan6ze6yd] {
    background: color-mix(in srgb, var(--admin-warning) 5%, transparent);
}

.admin-user-financial-list > article > div[b-nyan6ze6yd],
.admin-user-commercial-list > article > div[b-nyan6ze6yd] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.admin-user-financial-list > article > div:last-child[b-nyan6ze6yd],
.admin-user-commercial-list > article > div:last-child[b-nyan6ze6yd] {
    justify-items: end;
    text-align: end;
}

.admin-user-financial-list strong[b-nyan6ze6yd],
.admin-user-commercial-list strong[b-nyan6ze6yd] {
    color: var(--admin-text);
    font-size: 8px;
    overflow-wrap: anywhere;
}

.admin-user-financial-list small[b-nyan6ze6yd],
.admin-user-commercial-list small[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 6.3px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-user-financial-list code[b-nyan6ze6yd],
.admin-user-commercial-list code[b-nyan6ze6yd] {
    color: var(--admin-muted);
    font-size: 6.2px;
    overflow-wrap: anywhere;
}

.admin-user-credit-ledger strong.is-credit[b-nyan6ze6yd] {
    color: var(--admin-success);
}

.admin-user-credit-ledger strong.is-debit[b-nyan6ze6yd] {
    color: var(--admin-danger);
}

.admin-user-money-status[b-nyan6ze6yd] {
    display: inline-flex;
    width: fit-content;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 6.2px;
    font-weight: 850;
}

.admin-user-money-status.is-success[b-nyan6ze6yd] {
    color: var(--admin-success);
    background: color-mix(in srgb, var(--admin-success) 9%, transparent);
}

.admin-user-money-status.is-warning[b-nyan6ze6yd] {
    color: var(--admin-warning);
    background: color-mix(in srgb, var(--admin-warning) 10%, transparent);
}

.admin-user-money-status.is-danger[b-nyan6ze6yd] {
    color: var(--admin-danger);
    background: color-mix(in srgb, var(--admin-danger) 9%, transparent);
}

.admin-user-money-status.is-neutral[b-nyan6ze6yd] {
    color: var(--admin-muted);
    background: var(--admin-surface-soft);
}

.admin-user-financial-empty[b-nyan6ze6yd] {
    margin: 0;
    padding: 18px 14px;
    color: var(--admin-muted);
    font-size: 7px;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .admin-user-financial-overview[b-nyan6ze6yd],
    .admin-user-financial-subgrid[b-nyan6ze6yd],
    .admin-user-commercial-grid[b-nyan6ze6yd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-user-financial-metrics[b-nyan6ze6yd],
    .admin-user-fifo-projection[b-nyan6ze6yd],
    .admin-user-entitlement-grid[b-nyan6ze6yd] {
        grid-template-columns: 1fr;
    }

    .admin-user-financial-list > article[b-nyan6ze6yd],
    .admin-user-commercial-list > article[b-nyan6ze6yd] {
        flex-direction: column;
    }

    .admin-user-financial-list > article > div:last-child[b-nyan6ze6yd],
    .admin-user-commercial-list > article > div:last-child[b-nyan6ze6yd] {
        justify-items: start;
        text-align: start;
    }
}

/* _content/AITranslationPlatform.Web/Components/Billing/Billing.razor.rz.scp.css */
/* =========================================================
   USER BILLING / CREDITS — PREMIUM WORKSPACE V2
   Unified with Dashboard / Translation / Documents / Glossaries
   ========================================================= */

.billing-page[b-zq2e6k3gnk] {
    --bill-accent: var(--ui-accent, #f2bd43);
    --bill-accent-strong: var(--ui-accent-strong, #dfa62c);
    --bill-accent-soft: var(--ui-accent-soft, rgba(226,175,46,.12));
    --bill-accent-tint: var(--ui-accent-tint, rgba(226,175,46,.065));

    --bill-text: var(--text, #28241e);
    --bill-text-2: var(--text-secondary, #625d54);
    --bill-muted: var(--muted, #918a7f);

    --bill-surface: var(--surface, #ffffff);
    --bill-surface-raised: var(--ui-surface-raised, #ffffff);
    --bill-surface-strong: var(--ui-surface-strong, #fffdf9);
    --bill-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --bill-line: var(--ui-line, rgba(48,43,34,.10));
    --bill-line-strong: var(--ui-line-strong, rgba(48,43,34,.16));

    --bill-success: var(--ui-success, #4a8c61);
    --bill-success-soft: var(--ui-success-tint, rgba(74,140,97,.10));
    --bill-warning: var(--ui-warning, #b97814);
    --bill-warning-soft: var(--ui-warning-tint, rgba(185,120,20,.10));
    --bill-purple: #8d78b8;
    --bill-purple-soft: rgba(141,120,184,.10);
    --bill-danger: var(--ui-danger, #b65050);
    --bill-danger-soft: var(--ui-danger-tint, rgba(182,80,80,.10));

    --bill-shadow-sm: var(--ui-shadow-sm, 0 8px 22px rgba(32,28,22,.055));
    --bill-shadow-md: var(--ui-shadow-md, 0 18px 46px rgba(32,28,22,.085));

    --border-color: var(--bill-line);

    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 0 0 30px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    color: var(--bill-text);
}


/* =========================================================
   HERO
   ========================================================= */

.billing-hero[b-zq2e6k3gnk] {
    position: relative;

    min-height: 210px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--bill-line);
    border-radius: 28px;

    background:
        radial-gradient(115% 145% at 8% -18%, var(--bill-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, rgba(130,121,103,.07), transparent 56%),
        linear-gradient(135deg, var(--bill-surface-strong), var(--bill-surface));

    box-shadow: var(--bill-shadow-md);

    animation: billing-card-in-b-zq2e6k3gnk .62s cubic-bezier(.2,.8,.2,1) .03s backwards;
}

.billing-page[dir="rtl"] .billing-hero[b-zq2e6k3gnk] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--bill-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(130,121,103,.07), transparent 56%),
        linear-gradient(225deg, var(--bill-surface-strong), var(--bill-surface));
}

.billing-hero[b-zq2e6k3gnk]::before,
.billing-hero[b-zq2e6k3gnk]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.billing-hero[b-zq2e6k3gnk]::before {
    width: 285px;
    height: 285px;

    inset-block-start: -184px;
    inset-inline-end: -94px;

    border: 42px solid var(--bill-accent-soft);
    opacity: .78;
}

.billing-hero[b-zq2e6k3gnk]::after {
    width: 154px;
    height: 154px;

    inset-block-end: -101px;
    inset-inline-start: -44px;

    border: 26px solid var(--bill-line-strong);
    opacity: .62;
}

.billing-hero-copy[b-zq2e6k3gnk] {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.billing-eyebrow[b-zq2e6k3gnk],
.billing-section-kicker[b-zq2e6k3gnk] {
    display: block;

    color: #a86e11;

    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .07em;
}

.billing-eyebrow[b-zq2e6k3gnk] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 9px;
    padding: 6px 11px;

    border: 1px solid rgba(226,175,46,.28);
    border-radius: 999px;

    background: var(--bill-surface-raised);
}

.billing-eyebrow[b-zq2e6k3gnk]::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--bill-accent-strong);
    box-shadow: 0 0 0 4px var(--bill-accent-soft);
}

.billing-page[dir="rtl"] .billing-eyebrow[b-zq2e6k3gnk],
.billing-page[dir="rtl"] .billing-section-kicker[b-zq2e6k3gnk] {
    letter-spacing: 0;
}

.billing-hero h1[b-zq2e6k3gnk] {
    margin: 0;

    color: var(--bill-text);

    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.billing-page[dir="rtl"] .billing-hero h1[b-zq2e6k3gnk] {
    letter-spacing: 0;
}

.billing-hero p[b-zq2e6k3gnk] {
    max-width: 760px;

    margin: 11px 0 0;

    color: var(--bill-text-2);

    font-size: .82rem;
    line-height: 1.9;
}


/* =========================================================
   PAYMENT RESULT / INFO STRIPS
   ========================================================= */

.billing-payment-result[b-zq2e6k3gnk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid var(--bill-line);
    border-radius: 15px;

    background:
        linear-gradient(145deg, var(--bill-accent-tint), transparent 80%),
        var(--bill-surface-strong);

    box-shadow: var(--bill-shadow-sm);
}

.billing-payment-result-icon[b-zq2e6k3gnk] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--bill-accent-soft);
    color: #9a6b19;

    font-size: .68rem;
    font-weight: 900;
}

.billing-payment-result strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .64rem;
    font-weight: 830;
}

.billing-payment-result p[b-zq2e6k3gnk] {
    margin: 4px 0 0;

    color: var(--bill-muted);

    font-size: .53rem;
    line-height: 1.65;
}

.billing-payment-result small[b-zq2e6k3gnk] {
    display: block;

    margin-top: 7px;

    color: var(--bill-muted);

    font-size: .49rem;
}

.billing-payment-result code[b-zq2e6k3gnk] {
    margin-inline-start: 4px;

    color: var(--bill-text);

    font-size: .50rem;
}

.billing-payment-result.success[b-zq2e6k3gnk] {
    border-color: rgba(74,140,97,.17);

    background:
        linear-gradient(145deg, var(--bill-success-soft), transparent 82%),
        var(--bill-surface-strong);
}

.billing-payment-result.success .billing-payment-result-icon[b-zq2e6k3gnk] {
    background: var(--bill-success-soft);
    color: var(--bill-success);
}

.billing-payment-result.cancelled[b-zq2e6k3gnk] {
    border-color: rgba(185,120,20,.17);

    background:
        linear-gradient(145deg, var(--bill-warning-soft), transparent 82%),
        var(--bill-surface-strong);
}

.billing-payment-result.cancelled .billing-payment-result-icon[b-zq2e6k3gnk] {
    background: var(--bill-warning-soft);
    color: var(--bill-warning);
}

.billing-payment-result.failed[b-zq2e6k3gnk] {
    border-color: rgba(182,80,80,.17);

    background:
        linear-gradient(145deg, var(--bill-danger-soft), transparent 82%),
        var(--bill-surface-strong);
}

.billing-payment-result.failed .billing-payment-result-icon[b-zq2e6k3gnk] {
    background: var(--bill-danger-soft);
    color: var(--bill-danger);
}


/* =========================================================
   SUMMARY — SAME LANGUAGE AS TRANSLATION CARDS
   ========================================================= */

.billing-summary-grid[b-zq2e6k3gnk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.billing-summary-card[b-zq2e6k3gnk] {
    position: relative;

    min-width: 0;
    min-height: 94px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 12px 80px 11px 15px;

    overflow: hidden;

    border: 1px solid var(--bill-line);
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #f6e6b7 0%,
            #fbf2d8 48%,
            #ffffff 100%
        );

    box-shadow:
        0 2px 8px rgba(16,24,40,.05),
        inset 0 1px 0 rgba(255,255,255,.50);

    transition: .16s ease;
}

.billing-summary-card:hover[b-zq2e6k3gnk] {
    transform: translateY(-1px);

    border-color: var(--bill-line-strong);

    box-shadow:
        0 4px 12px rgba(16,24,40,.07),
        inset 0 1px 0 rgba(255,255,255,.52);
}

.billing-summary-card[b-zq2e6k3gnk]::after {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    right: 64px;

    width: 1px;

    background: var(--bill-line);
}

.billing-summary-icon[b-zq2e6k3gnk] {
    position: absolute;

    top: 50%;
    right: 15px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    color: #7f7357;
}

.billing-summary-icon svg[b-zq2e6k3gnk] {
    width: 21px;
    height: 21px;
}

.billing-summary-label[b-zq2e6k3gnk] {
    display: block;

    margin: 0 0 4px;

    color: var(--bill-text-2);

    font-size: .58rem;
    font-weight: 780;
    line-height: 1.35;

    text-align: right;
}

.billing-summary-card strong[b-zq2e6k3gnk] {
    display: block;

    margin: 0;

    color: #eea000;

    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.05;

    font-variant-numeric: tabular-nums;

    text-align: right;
}

.billing-summary-card small[b-zq2e6k3gnk] {
    display: block;

    margin-top: 5px;

    color: var(--bill-muted);

    font-size: .50rem;
    line-height: 1.45;

    text-align: right;
}

.billing-page[dir="ltr"] .billing-summary-card[b-zq2e6k3gnk] {
    padding-left: 80px;
    padding-right: 15px;
}

.billing-page[dir="ltr"] .billing-summary-card[b-zq2e6k3gnk]::after {
    right: auto;
    left: 64px;
}

.billing-page[dir="ltr"] .billing-summary-icon[b-zq2e6k3gnk] {
    right: auto;
    left: 15px;
}

.billing-page[dir="ltr"] .billing-summary-label[b-zq2e6k3gnk],
.billing-page[dir="ltr"] .billing-summary-card strong[b-zq2e6k3gnk],
.billing-page[dir="ltr"] .billing-summary-card small[b-zq2e6k3gnk] {
    text-align: left;
}


/* =========================================================
   LOADING / ERROR
   ========================================================= */

.billing-state-card[b-zq2e6k3gnk] {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    padding: 26px;

    border: 1px solid var(--bill-line);
    border-radius: 22px;

    background: var(--bill-surface);

    box-shadow: var(--bill-shadow-sm);
}

.billing-state-card strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .75rem;
    font-weight: 820;
}

.billing-state-card p[b-zq2e6k3gnk] {
    max-width: 620px;

    margin: 5px 0 0;

    color: var(--bill-muted);

    font-size: .60rem;
    line-height: 1.7;
}

.billing-spinner[b-zq2e6k3gnk] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border: 3px solid var(--bill-accent-soft);
    border-top-color: var(--bill-accent-strong);
    border-radius: 50%;

    animation: billing-spin-b-zq2e6k3gnk .75s linear infinite;
}

.billing-error-card[b-zq2e6k3gnk] {
    min-height: 0;
    justify-content: flex-start;
}

.billing-error-icon[b-zq2e6k3gnk] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--bill-danger-soft);
    color: var(--bill-danger);

    font-weight: 900;
}

.billing-secondary-button[b-zq2e6k3gnk] {
    min-height: 36px;

    margin-top: 11px;
    padding: 0 13px;

    border: 1px solid var(--bill-line-strong);
    border-radius: 11px;

    background: var(--bill-surface-raised);

    color: var(--bill-text-2);

    font-family: inherit;
    font-size: .59rem;
    font-weight: 800;

    cursor: pointer;

    transition: .16s ease;
}

.billing-secondary-button:hover[b-zq2e6k3gnk] {
    transform: translateY(-1px);

    border-color: var(--bill-accent-strong);

    color: #9c6b16;
}


/* =========================================================
   PACKAGE / CREDIT SOURCES
   ========================================================= */

.billing-package-card[b-zq2e6k3gnk] {
    --border-color: var(--bill-line);

    overflow: hidden;

    border: 1px solid var(--bill-line);
    border-radius: 24px;

    background: var(--bill-surface);

    box-shadow: var(--bill-shadow-sm);
}

.billing-package-heading[b-zq2e6k3gnk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px 17px;

    border-bottom: 1px solid var(--bill-line);
}

.billing-package-heading h2[b-zq2e6k3gnk] {
    margin: 0;

    color: var(--bill-text);

    font-size: 1.05rem;
    font-weight: 840;
}

.billing-package-heading p[b-zq2e6k3gnk] {
    max-width: 900px;

    margin: 5px 0 0;

    color: var(--bill-muted);

    font-size: .58rem;
    line-height: 1.7;
}

.billing-package-status[b-zq2e6k3gnk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;

    padding: 7px 10px;

    border: 1px solid rgba(74,140,97,.12);
    border-radius: 999px;

    background: var(--bill-success-soft);

    color: var(--bill-success);

    font-size: .55rem;
    font-weight: 800;
}

.billing-package-status i[b-zq2e6k3gnk] {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.billing-package-card > .billing-payment-result[b-zq2e6k3gnk] {
    margin: 14px 22px 0 !important;
    box-shadow: none;
}

.billing-package-overview[b-zq2e6k3gnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 18px 22px;

    border-bottom: 1px solid var(--bill-line);

    background:
        linear-gradient(145deg, var(--bill-accent-tint), transparent 76%);
}

.billing-package-name[b-zq2e6k3gnk] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.billing-package-symbol[b-zq2e6k3gnk] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 14px;

    background: var(--bill-accent-soft);
    color: #8b681f;
}

.billing-package-symbol svg[b-zq2e6k3gnk] {
    width: 21px;
    height: 21px;
}

.billing-package-name > div[b-zq2e6k3gnk] {
    min-width: 0;
}

.billing-package-name strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .78rem;
    font-weight: 850;
}

.billing-package-name span[b-zq2e6k3gnk] {
    display: block;

    margin-top: 5px;

    color: var(--bill-muted);

    font-size: .53rem;
    line-height: 1.55;
}

.billing-balance-detail[b-zq2e6k3gnk] {
    flex: 0 0 auto;
    text-align: end;
}

.billing-balance-detail > span[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-muted);

    font-size: .51rem;
    font-weight: 700;
}

.billing-balance-detail strong[b-zq2e6k3gnk] {
    display: inline-block;

    margin-top: 3px;

    color: #e9a70f;

    font-size: 1.22rem;
    font-weight: 880;
}

.billing-balance-detail small[b-zq2e6k3gnk] {
    margin-inline-start: 5px;

    color: var(--bill-muted);

    font-size: .49rem;
}


/* =========================================================
   PACKAGE METRICS
   ========================================================= */

.billing-package-card > div > .billing-usage-metrics[b-zq2e6k3gnk],
.billing-usage-metrics[b-zq2e6k3gnk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;

    padding: 12px 22px 0;

    border-top: 0;
}

.billing-usage-metrics > div[b-zq2e6k3gnk] {
    min-width: 0;

    padding: 10px 11px;

    border: 1px solid var(--bill-line);
    border-radius: 11px;

    background: var(--bill-surface-soft);
}

.billing-usage-metrics span[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-muted);

    font-size: .48rem;
}

.billing-usage-metrics strong[b-zq2e6k3gnk] {
    display: block;

    margin-top: 4px;

    color: var(--bill-text);

    font-size: .72rem;
    font-weight: 820;
}


/* =========================================================
   CAPABILITIES / CHIPS / LIMIT
   ========================================================= */

.billing-capability-section[b-zq2e6k3gnk] {
    padding: 17px 22px 20px;
}

.billing-capability-section + .billing-capability-section[b-zq2e6k3gnk] {
    border-top: 1px solid var(--bill-line);
}

.billing-capability-heading[b-zq2e6k3gnk] {
    margin-bottom: 12px;
}

.billing-capability-heading strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .66rem;
    font-weight: 820;
}

.billing-capability-heading span[b-zq2e6k3gnk] {
    display: block;

    max-width: 920px;

    margin-top: 4px;

    color: var(--bill-muted);

    font-size: .51rem;
    line-height: 1.65;
}

.billing-format-chips[b-zq2e6k3gnk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 0;
}

.billing-format-chip[b-zq2e6k3gnk] {
    padding: 5px 9px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .015em;
}

.billing-format-chip.enabled[b-zq2e6k3gnk] {
    border-color: rgba(74,140,97,.11);

    background: var(--bill-success-soft);

    color: var(--bill-success);
}

.billing-format-chip.locked[b-zq2e6k3gnk] {
    border-color: var(--bill-line);

    background: transparent;

    color: var(--bill-muted);

    text-decoration: line-through;
}

.billing-size-limit[b-zq2e6k3gnk] {
    width: max-content;
    max-width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 10px !important;
    padding: 9px 11px;

    border: 1px solid var(--bill-line);
    border-radius: 11px;

    background: var(--bill-surface-soft);
}

.billing-size-limit-glyph[b-zq2e6k3gnk] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--bill-accent-soft);
    color: #9a6b19;
}

.billing-size-limit-glyph svg[b-zq2e6k3gnk] {
    width: 16px;
    height: 16px;
}

.billing-size-limit small[b-zq2e6k3gnk] {
    display: block;

    margin-bottom: 2px;

    color: var(--bill-muted);

    font-size: .49rem;
}

.billing-size-limit strong[b-zq2e6k3gnk] {
    color: var(--bill-text);

    font-size: .66rem;
    font-weight: 820;
}


/* Legacy package feature components kept compatible */
.package-mini-feature[b-zq2e6k3gnk] {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 5px 0;
}

.package-mini-feature span[b-zq2e6k3gnk] {
    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background: rgba(120,126,137,.08);
    color: var(--bill-muted);

    font-size: .52rem;
    font-weight: 900;
}

.package-mini-feature.enabled span[b-zq2e6k3gnk] {
    background: var(--bill-success-soft);
    color: var(--bill-success);
}

.package-mini-feature.locked[b-zq2e6k3gnk] {
    opacity: .5;
}

.package-mini-feature strong[b-zq2e6k3gnk] {
    color: var(--bill-text-2);

    font-size: .54rem;
    font-weight: 700;
}


/* =========================================================
   NO PACKAGE
   ========================================================= */

.billing-no-package[b-zq2e6k3gnk] {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 26px;
}

.billing-no-package-icon[b-zq2e6k3gnk] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: var(--bill-warning-soft);
    color: var(--bill-warning);
}

.billing-no-package-icon svg[b-zq2e6k3gnk] {
    width: 20px;
    height: 20px;
}

.billing-no-package strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .72rem;
    font-weight: 820;
}

.billing-no-package p[b-zq2e6k3gnk] {
    max-width: 580px;

    margin: 5px 0 0;

    color: var(--bill-muted);

    font-size: .56rem;
    line-height: 1.65;
}


/* =========================================================
   INSIGHTS
   ========================================================= */

.billing-insights-grid[b-zq2e6k3gnk] {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 12px;
}

.billing-panel[b-zq2e6k3gnk] {
    min-width: 0;

    padding: 18px 20px;

    border: 1px solid var(--bill-line);
    border-radius: 20px;

    background:
        linear-gradient(145deg, var(--bill-accent-tint), transparent 78%),
        var(--bill-surface);

    box-shadow: var(--bill-shadow-sm);
}

.billing-panel-heading[b-zq2e6k3gnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 16px;
}

.billing-panel-heading h2[b-zq2e6k3gnk] {
    margin: 0;

    color: var(--bill-text);

    font-size: .88rem;
    font-weight: 830;
}

.billing-panel-icon[b-zq2e6k3gnk] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border: 1px solid var(--bill-line);
    border-radius: 12px;

    background: var(--bill-surface-raised);
}

.billing-panel-icon svg[b-zq2e6k3gnk] {
    width: 18px;
    height: 18px;
}

.billing-panel-icon.usage[b-zq2e6k3gnk] {
    color: var(--bill-purple);
}

.billing-panel-icon.reserved[b-zq2e6k3gnk] {
    color: var(--bill-warning);
}

.billing-monthly-value[b-zq2e6k3gnk] {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.billing-monthly-value strong[b-zq2e6k3gnk] {
    color: #e9a70f;

    font-size: 1.78rem;
    font-weight: 880;
    letter-spacing: -.025em;
}

.billing-monthly-value span[b-zq2e6k3gnk] {
    color: var(--bill-muted);

    font-size: .52rem;
    font-weight: 700;
}

.billing-panel-description[b-zq2e6k3gnk] {
    max-width: 620px;

    margin: 8px 0 15px;

    color: var(--bill-muted);

    font-size: .54rem;
    line-height: 1.7;
}

.billing-panel .billing-usage-metrics[b-zq2e6k3gnk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    padding: 12px 0 0;

    border-top: 1px solid var(--bill-line);
}

.billing-reserved-total[b-zq2e6k3gnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.billing-reserved-total > div[b-zq2e6k3gnk] {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.billing-reserved-total strong[b-zq2e6k3gnk] {
    color: #e9a70f;

    font-size: 1.52rem;
    font-weight: 870;
}

.billing-reserved-total > div > span[b-zq2e6k3gnk] {
    color: var(--bill-muted);

    font-size: .49rem;
}

.billing-active-jobs[b-zq2e6k3gnk] {
    padding: 6px 9px;

    border: 1px solid rgba(185,120,20,.12);
    border-radius: 999px;

    background: var(--bill-warning-soft);

    color: var(--bill-warning);

    font-size: .49rem;
    font-weight: 800;
}

.billing-reserved-list[b-zq2e6k3gnk] {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 13px;
}

.billing-reserved-item[b-zq2e6k3gnk] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;

    border: 1px solid var(--bill-line);
    border-radius: 11px;

    background: var(--bill-surface-soft);
}

.billing-reserved-file-icon[b-zq2e6k3gnk] {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--bill-warning-soft);
    color: var(--bill-warning);
}

.billing-reserved-file-icon svg[b-zq2e6k3gnk] {
    width: 15px;
    height: 15px;
}

.billing-reserved-copy[b-zq2e6k3gnk] {
    min-width: 0;
}

.billing-reserved-copy strong[b-zq2e6k3gnk] {
    display: block;

    overflow: hidden;

    color: var(--bill-text);

    font-size: .56rem;
    font-weight: 790;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-reserved-copy span[b-zq2e6k3gnk] {
    display: block;

    margin-top: 3px;

    color: var(--bill-muted);

    font-size: .47rem;
}

.billing-reserved-amount[b-zq2e6k3gnk] {
    text-align: end;
}

.billing-reserved-amount strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-warning);

    font-size: .64rem;
    font-weight: 850;
}

.billing-reserved-amount small[b-zq2e6k3gnk] {
    color: var(--bill-muted);

    font-size: .44rem;
}

.billing-reserved-empty[b-zq2e6k3gnk] {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 13px;
    padding: 11px 12px;

    border: 1px solid rgba(74,140,97,.12);
    border-radius: 12px;

    background: var(--bill-success-soft);
}

.billing-reserved-empty > span[b-zq2e6k3gnk] {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: rgba(74,140,97,.10);
    color: var(--bill-success);
}

.billing-reserved-empty svg[b-zq2e6k3gnk] {
    width: 15px;
    height: 15px;
}

.billing-reserved-empty strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .56rem;
}

.billing-reserved-empty small[b-zq2e6k3gnk] {
    display: block;

    margin-top: 3px;

    color: var(--bill-muted);

    font-size: .47rem;
    line-height: 1.5;
}


/* =========================================================
   ACTIVITY / PURCHASE TABLES
   ========================================================= */

.billing-activity-card[b-zq2e6k3gnk],
.billing-purchases-card[b-zq2e6k3gnk] {
    overflow: hidden;

    border: 1px solid var(--bill-line);
    border-radius: 22px;

    background: var(--bill-surface);

    box-shadow: var(--bill-shadow-sm);
}

.billing-activity-heading[b-zq2e6k3gnk],
.billing-purchases-heading[b-zq2e6k3gnk] {
    padding: 19px 22px 16px;

    border-bottom: 1px solid var(--bill-line);
}

.billing-activity-heading h2[b-zq2e6k3gnk],
.billing-purchases-heading h2[b-zq2e6k3gnk] {
    margin: 0;

    color: var(--bill-text);

    font-size: .92rem;
    font-weight: 830;
}

.billing-activity-heading p[b-zq2e6k3gnk],
.billing-purchases-heading p[b-zq2e6k3gnk] {
    margin: 5px 0 0;

    color: var(--bill-muted);

    font-size: .54rem;
    line-height: 1.6;
}

.billing-activity-table-wrap[b-zq2e6k3gnk],
.billing-purchases-table-wrap[b-zq2e6k3gnk] {
    overflow-x: auto;
}

.billing-activity-table[b-zq2e6k3gnk],
.billing-purchases-table[b-zq2e6k3gnk] {
    width: 100%;

    border-collapse: collapse;
}

.billing-purchases-table[b-zq2e6k3gnk] {
    min-width: 850px;
}

.billing-activity-table th[b-zq2e6k3gnk],
.billing-purchases-table th[b-zq2e6k3gnk] {
    padding: 10px 16px;

    text-align: start;

    border-bottom: 1px solid var(--bill-line);

    background: var(--bill-surface-soft);

    color: var(--bill-muted);

    font-size: .49rem;
    font-weight: 800;

    white-space: nowrap;
}

.billing-activity-table td[b-zq2e6k3gnk],
.billing-purchases-table td[b-zq2e6k3gnk] {
    padding: 11px 16px;

    border-bottom: 1px solid var(--bill-line);

    vertical-align: middle;
}

.billing-activity-table tbody tr:last-child td[b-zq2e6k3gnk],
.billing-purchases-table tbody tr:last-child td[b-zq2e6k3gnk] {
    border-bottom: 0;
}

.billing-activity-table tbody tr[b-zq2e6k3gnk],
.billing-purchases-table tbody tr[b-zq2e6k3gnk] {
    transition: background .15s ease;
}

.billing-activity-table tbody tr:hover[b-zq2e6k3gnk],
.billing-purchases-table tbody tr:hover[b-zq2e6k3gnk] {
    background: var(--bill-accent-tint);
}

.billing-activity-type[b-zq2e6k3gnk] {
    min-width: 190px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.billing-activity-icon[b-zq2e6k3gnk] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--bill-surface-soft);
    color: var(--bill-muted);

    font-size: .64rem;
    font-weight: 900;
}

.billing-activity-icon.positive[b-zq2e6k3gnk] {
    background: var(--bill-success-soft);
    color: var(--bill-success);
}

.billing-activity-icon.negative[b-zq2e6k3gnk] {
    background: var(--bill-danger-soft);
    color: var(--bill-danger);
}

.billing-activity-icon.reserved[b-zq2e6k3gnk] {
    background: var(--bill-warning-soft);
    color: var(--bill-warning);
}

.billing-activity-icon.adjustment[b-zq2e6k3gnk] {
    background: var(--bill-purple-soft);
    color: var(--bill-purple);
}

.billing-activity-type strong[b-zq2e6k3gnk],
.billing-activity-related strong[b-zq2e6k3gnk] {
    display: block;

    max-width: 280px;

    overflow: hidden;

    color: var(--bill-text);

    font-size: .55rem;
    font-weight: 790;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-activity-type small[b-zq2e6k3gnk] {
    display: block;

    max-width: 300px;

    margin-top: 3px;

    overflow: hidden;

    color: var(--bill-muted);

    font-size: .45rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-activity-related span[b-zq2e6k3gnk],
.billing-activity-date[b-zq2e6k3gnk] {
    color: var(--bill-muted);

    font-size: .50rem;

    white-space: nowrap;
}

.billing-activity-amount-column[b-zq2e6k3gnk] {
    text-align: end !important;
}

.billing-activity-amount[b-zq2e6k3gnk] {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 8px;

    font-size: .55rem;
    font-weight: 850;

    direction: ltr;
}

.billing-activity-amount.positive[b-zq2e6k3gnk] {
    background: var(--bill-success-soft);
    color: var(--bill-success);
}

.billing-activity-amount.negative[b-zq2e6k3gnk] {
    background: var(--bill-danger-soft);
    color: var(--bill-danger);
}

.billing-activity-amount.neutral[b-zq2e6k3gnk] {
    background: var(--bill-surface-soft);
    color: var(--bill-muted);
}

.billing-activity-empty[b-zq2e6k3gnk],
.billing-purchases-empty[b-zq2e6k3gnk] {
    min-height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 22px;
}

.billing-activity-empty-icon[b-zq2e6k3gnk],
.billing-purchases-empty > span[b-zq2e6k3gnk] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: var(--bill-accent-soft);
    color: #9a6b19;
}

.billing-activity-empty-icon svg[b-zq2e6k3gnk],
.billing-purchases-empty svg[b-zq2e6k3gnk] {
    width: 18px;
    height: 18px;
}

.billing-activity-empty strong[b-zq2e6k3gnk],
.billing-purchases-empty strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .61rem;
}

.billing-activity-empty p[b-zq2e6k3gnk],
.billing-purchases-empty p[b-zq2e6k3gnk] {
    margin: 4px 0 0;

    color: var(--bill-muted);

    font-size: .49rem;
}


/* =========================================================
   PURCHASE HISTORY
   ========================================================= */

.billing-purchase-package[b-zq2e6k3gnk] {
    min-width: 190px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.billing-purchase-package-icon[b-zq2e6k3gnk] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--bill-accent-soft);
    color: #9a6b19;
}

.billing-purchase-package-icon svg[b-zq2e6k3gnk] {
    width: 15px;
    height: 15px;
}

.billing-purchase-package strong[b-zq2e6k3gnk],
.billing-purchase-credits strong[b-zq2e6k3gnk] {
    display: block;

    color: var(--bill-text);

    font-size: .55rem;
    font-weight: 800;
}

.billing-purchase-package small[b-zq2e6k3gnk],
.billing-purchase-credits small[b-zq2e6k3gnk] {
    display: block;

    margin-top: 2px;

    color: var(--bill-muted);

    font-size: .44rem;
}

.billing-purchase-credits small[b-zq2e6k3gnk] {
    color: var(--bill-success);
}

.billing-purchase-price[b-zq2e6k3gnk] {
    color: var(--bill-text);

    font-size: .55rem;
}

.billing-purchase-price small[b-zq2e6k3gnk] {
    color: var(--bill-muted);

    font-size: .41rem;
}

.billing-payment-status[b-zq2e6k3gnk] {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: .46rem;
    font-weight: 820;
}

.billing-payment-status.paid[b-zq2e6k3gnk] {
    background: var(--bill-success-soft);
    color: var(--bill-success);
}

.billing-payment-status.pending[b-zq2e6k3gnk] {
    background: var(--bill-warning-soft);
    color: var(--bill-warning);
}

.billing-payment-status.failed[b-zq2e6k3gnk],
.billing-payment-status.cancelled[b-zq2e6k3gnk] {
    background: var(--bill-danger-soft);
    color: var(--bill-danger);
}

.billing-payment-status.refunded[b-zq2e6k3gnk] {
    background: var(--bill-purple-soft);
    color: var(--bill-purple);
}

.billing-purchase-date[b-zq2e6k3gnk] {
    color: var(--bill-muted);

    font-size: .48rem;

    white-space: nowrap;
}

.billing-purchase-reference[b-zq2e6k3gnk] {
    padding: 5px 7px;

    border-radius: 7px;

    background: var(--bill-surface-soft);

    color: var(--bill-text-2);

    font-size: .45rem;
}

.billing-recovery-form[b-zq2e6k3gnk] {
    margin-top: 7px;
}

.billing-recovery-button[b-zq2e6k3gnk] {
    min-height: 30px;

    padding: 5px 9px;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 8px;

    background: var(--bill-accent-soft);

    color: #9a6b19;

    font: inherit;
    font-size: .48rem;
    font-weight: 760;

    cursor: pointer;

    transition: .16s ease;
}

.billing-recovery-button:hover[b-zq2e6k3gnk] {
    transform: translateY(-1px);

    border-color: rgba(226,175,46,.30);

    background: rgba(226,175,46,.15);
}


/* =========================================================
   BUY CREDITS CTA
   ========================================================= */

.billing-buy-cta[b-zq2e6k3gnk] {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 23px 26px;

    overflow: hidden;

    border: 1px solid rgba(226,175,46,.20);
    border-radius: 22px;

    background:
        radial-gradient(115% 130% at 90% -30%, var(--bill-accent-soft), transparent 60%),
        var(--bill-surface-strong);

    box-shadow: var(--bill-shadow-sm);
}

.billing-buy-cta[b-zq2e6k3gnk]::after {
    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    inset-block-end: -98px;
    inset-inline-end: -38px;

    border: 24px solid var(--bill-accent-soft);
    border-radius: 50%;

    pointer-events: none;
}

.billing-buy-cta > *[b-zq2e6k3gnk] {
    position: relative;
    z-index: 1;
}

.billing-buy-cta h2[b-zq2e6k3gnk] {
    margin: 0 0 5px;

    color: var(--bill-text);

    font-size: 1rem;
    font-weight: 830;
}

.billing-buy-cta p[b-zq2e6k3gnk] {
    max-width: 65ch;

    margin: 0;

    color: var(--bill-text-2);

    font-size: .62rem;
    line-height: 1.75;
}

.billing-buy-cta-action[b-zq2e6k3gnk] {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;

    padding: 0 17px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--bill-accent),
            var(--bill-accent-strong)
        );

    color: #34270f;

    font-size: .61rem;
    font-weight: 830;

    text-decoration: none;

    box-shadow: 0 10px 24px rgba(226,175,46,.20);

    transition: .17s ease;
}

.billing-buy-cta-action:hover[b-zq2e6k3gnk] {
    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(226,175,46,.27);
}

.billing-buy-cta-glyph[b-zq2e6k3gnk] {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: rgba(74,54,8,.10);
}

.billing-buy-cta-glyph svg[b-zq2e6k3gnk] {
    width: 14px;
    height: 14px;
}


/* =========================================================
   OLD BUY CLASSES KEPT SAFE IF REUSED
   ========================================================= */

.billing-packages-card[b-zq2e6k3gnk],
.billing-selected-package-card[b-zq2e6k3gnk],
.billing-compare-card[b-zq2e6k3gnk] {
    border: 1px solid var(--bill-line);
    border-radius: 22px;

    background: var(--bill-surface);

    box-shadow: var(--bill-shadow-sm);
}

.billing-feature-grid[b-zq2e6k3gnk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.billing-feature[b-zq2e6k3gnk] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 66px;

    padding: 11px 12px;

    border: 1px solid var(--bill-line);
    border-radius: 13px;

    background: var(--bill-surface-soft);
}

.billing-feature.enabled[b-zq2e6k3gnk] {
    border-color: rgba(74,140,97,.12);
    background: var(--bill-success-soft);
}

.billing-feature.locked[b-zq2e6k3gnk] {
    opacity: .58;
}

.billing-input-grid[b-zq2e6k3gnk] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.billing-input-feature[b-zq2e6k3gnk] {
    min-height: 84px;

    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 24px;
    align-items: center;
    gap: 9px;

    padding: 12px;

    border: 1px solid var(--bill-line);
    border-radius: 14px;

    background: var(--bill-surface-soft);
}


/* =========================================================
   DARK MODE — WARM / EXPLICIT
   ========================================================= */

html[data-theme="dark"] .billing-page[b-zq2e6k3gnk] {
    --bill-text: #f3eee5;
    --bill-text-2: #d2c8b7;
    --bill-muted: #9d9487;

    --bill-surface: #211b15;
    --bill-surface-raised: #292219;
    --bill-surface-strong: #2d251c;
    --bill-surface-soft: #19140f;

    --bill-line: rgba(255,236,198,.09);
    --bill-line-strong: rgba(255,236,198,.15);

    --bill-success: #94c981;
    --bill-success-soft: rgba(111,161,91,.14);
    --bill-warning: #e4b44a;
    --bill-warning-soft: rgba(196,145,52,.13);
    --bill-purple: #b09bd7;
    --bill-purple-soft: rgba(141,120,184,.14);
    --bill-danger: #e28a83;
    --bill-danger-soft: rgba(200,92,84,.12);

    --bill-shadow-sm: 0 12px 28px rgba(0,0,0,.13);
    --bill-shadow-md: 0 22px 50px rgba(0,0,0,.20);

    color: var(--bill-text);
}

html[data-theme="dark"] .billing-hero[b-zq2e6k3gnk] {
    border-color: var(--bill-line-strong);

    background:
        radial-gradient(115% 145% at 92% -18%, rgba(226,175,46,.11), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(255,236,198,.035), transparent 56%),
        linear-gradient(225deg, #2c241b, #211b15);
}

html[data-theme="dark"] .billing-eyebrow[b-zq2e6k3gnk] {
    border-color: rgba(226,175,46,.18);

    background: #2a231b;

    color: #e5b84e;
}

html[data-theme="dark"] .billing-summary-card[b-zq2e6k3gnk] {
    border-color: rgba(255,236,198,.12);

    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.16) 0%,
            rgba(226,175,46,.085) 48%,
            rgba(255,255,255,.025) 100%
        );

    box-shadow:
        0 8px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.02);
}

html[data-theme="dark"] .billing-summary-card[b-zq2e6k3gnk]::after {
    background: rgba(255,236,198,.11);
}

html[data-theme="dark"] .billing-summary-icon[b-zq2e6k3gnk] {
    color: #c8b68f;
}

html[data-theme="dark"] .billing-summary-card strong[b-zq2e6k3gnk] {
    color: #f0b637;
}

html[data-theme="dark"] .billing-package-card[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-panel[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-activity-card[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-purchases-card[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-state-card[b-zq2e6k3gnk] {
    border-color: var(--bill-line-strong);

    background:
        linear-gradient(
            180deg,
            #272018 0%,
            #211b15 100%
        );
}

html[data-theme="dark"] .billing-package-overview[b-zq2e6k3gnk] {
    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.07),
            rgba(226,175,46,.015) 76%
        );
}

html[data-theme="dark"] .billing-usage-metrics > div[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-reserved-item[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-size-limit[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-purchase-reference[b-zq2e6k3gnk] {
    border-color: rgba(255,236,198,.08);

    background: #19140f;
}

html[data-theme="dark"] .billing-payment-result[b-zq2e6k3gnk] {
    border-color: rgba(255,236,198,.10);

    background:
        linear-gradient(145deg, rgba(226,175,46,.055), transparent 82%),
        #211b15;
}

html[data-theme="dark"] .billing-payment-result.success[b-zq2e6k3gnk] {
    border-color: rgba(111,161,91,.16);

    background:
        linear-gradient(145deg, rgba(111,161,91,.11), transparent 82%),
        #211b15;
}

html[data-theme="dark"] .billing-payment-result.cancelled[b-zq2e6k3gnk] {
    border-color: rgba(196,145,52,.18);

    background:
        linear-gradient(145deg, rgba(196,145,52,.10), transparent 82%),
        #211b15;
}

html[data-theme="dark"] .billing-payment-result.failed[b-zq2e6k3gnk] {
    border-color: rgba(200,92,84,.17);

    background:
        linear-gradient(145deg, rgba(200,92,84,.10), transparent 82%),
        #211b15;
}

html[data-theme="dark"] .billing-activity-table th[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-purchases-table th[b-zq2e6k3gnk] {
    border-bottom-color: var(--bill-line);

    background: #18130f;

    color: #b9ae9e;
}

html[data-theme="dark"] .billing-activity-table td[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-purchases-table td[b-zq2e6k3gnk] {
    border-bottom-color: rgba(255,236,198,.06);
}

html[data-theme="dark"] .billing-activity-table tbody tr:hover[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-purchases-table tbody tr:hover[b-zq2e6k3gnk] {
    background: rgba(226,175,46,.045);
}

html[data-theme="dark"] .billing-buy-cta[b-zq2e6k3gnk] {
    border-color: rgba(226,175,46,.16);

    background:
        radial-gradient(115% 130% at 90% -30%, rgba(226,175,46,.11), transparent 60%),
        #272018;
}

html[data-theme="dark"] .billing-secondary-button[b-zq2e6k3gnk],
html[data-theme="dark"] .billing-recovery-button[b-zq2e6k3gnk] {
    border-color: rgba(255,236,198,.12);

    background: #17120e;

    color: #dfd4c3;
}

html[data-theme="dark"] .billing-format-chip.enabled[b-zq2e6k3gnk] {
    border-color: rgba(111,161,91,.12);
}

html[data-theme="dark"] .billing-package-card > div[style*="border-bottom"][b-zq2e6k3gnk] {
    border-bottom-color: var(--bill-line) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .billing-summary-grid[b-zq2e6k3gnk] {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .billing-usage-metrics[b-zq2e6k3gnk] {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .billing-insights-grid[b-zq2e6k3gnk] {
        grid-template-columns: 1fr;
    }

    .billing-input-grid[b-zq2e6k3gnk] {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .billing-page[b-zq2e6k3gnk] {
        gap: 14px;
    }

    .billing-hero[b-zq2e6k3gnk] {
        min-height: 0;

        padding: 23px 20px;

        border-radius: 22px;
    }

    .billing-summary-grid[b-zq2e6k3gnk] {
        grid-template-columns: 1fr;
    }

    .billing-package-heading[b-zq2e6k3gnk],
    .billing-package-overview[b-zq2e6k3gnk] {
        align-items: flex-start;
        flex-direction: column;
    }

    .billing-package-heading[b-zq2e6k3gnk],
    .billing-package-overview[b-zq2e6k3gnk],
    .billing-capability-section[b-zq2e6k3gnk] {
        padding-inline: 18px;
    }

    .billing-package-card > .billing-payment-result[b-zq2e6k3gnk] {
        margin-inline: 18px !important;
    }

    .billing-balance-detail[b-zq2e6k3gnk] {
        text-align: start;
    }

    .billing-page[dir="rtl"] .billing-balance-detail[b-zq2e6k3gnk] {
        text-align: right;
    }

    .billing-usage-metrics[b-zq2e6k3gnk] {
        grid-template-columns: 1fr;
        padding-inline: 18px;
    }

    .billing-panel .billing-usage-metrics[b-zq2e6k3gnk] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        padding-inline: 0;
    }

    .billing-buy-cta[b-zq2e6k3gnk] {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-buy-cta-action[b-zq2e6k3gnk] {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 520px) {
    .billing-panel .billing-usage-metrics[b-zq2e6k3gnk] {
        grid-template-columns: 1fr;
    }

    .billing-input-grid[b-zq2e6k3gnk],
    .billing-feature-grid[b-zq2e6k3gnk] {
        grid-template-columns: 1fr;
    }

    .billing-payment-result[b-zq2e6k3gnk] {
        padding: 12px;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes billing-card-in-b-zq2e6k3gnk {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.995);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes billing-spin-b-zq2e6k3gnk {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .billing-hero[b-zq2e6k3gnk],
    .billing-summary-card[b-zq2e6k3gnk],
    .billing-package-card[b-zq2e6k3gnk],
    .billing-panel[b-zq2e6k3gnk],
    .billing-activity-card[b-zq2e6k3gnk],
    .billing-purchases-card[b-zq2e6k3gnk],
    .billing-buy-cta[b-zq2e6k3gnk] {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 760px) {

    .billing-summary-grid[b-zq2e6k3gnk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .billing-summary-grid > :last-child:nth-child(odd)[b-zq2e6k3gnk] {
            grid-column: 1 / -1;
        }

    .billing-summary-card[b-zq2e6k3gnk] {
        min-height: 82px;
        padding: 11px 56px 10px 12px;
    }

        .billing-summary-card[b-zq2e6k3gnk]::after {
            right: 48px;
        }

    .billing-summary-icon[b-zq2e6k3gnk] {
        right: 9px;
        width: 34px;
        height: 34px;
    }

    .billing-page[dir="ltr"] .billing-summary-card[b-zq2e6k3gnk] {
        padding-left: 56px;
        padding-right: 12px;
    }

        .billing-page[dir="ltr"] .billing-summary-card[b-zq2e6k3gnk]::after {
            left: 48px;
        }

    .billing-page[dir="ltr"] .billing-summary-icon[b-zq2e6k3gnk] {
        left: 9px;
    }
}


/* =========================================================
   PHONE: TABLES AS CARDS
   =========================================================
   Both ledgers were tables wider than the phone inside a
   horizontal scroller; in a right-to-left page the scroller
   starts at the right, so the description and the amount -
   the parts on the left - were simply off screen. On a phone
   each row becomes a small card: what happened and how much
   on the first line, what it relates to and when on the next.
   ========================================================= */

@media (max-width: 760px) {

    .billing-activity-table-wrap[b-zq2e6k3gnk],
    .billing-purchases-table-wrap[b-zq2e6k3gnk] {
        overflow: visible;
    }

    .billing-activity-table[b-zq2e6k3gnk],
    .billing-purchases-table[b-zq2e6k3gnk],
    .billing-activity-table tbody[b-zq2e6k3gnk],
    .billing-purchases-table tbody[b-zq2e6k3gnk] {
        display: block;
        min-width: 0;
        width: 100%;
    }

        .billing-activity-table thead[b-zq2e6k3gnk],
        .billing-purchases-table thead[b-zq2e6k3gnk] {
            display: none;
        }

        .billing-activity-table tbody tr[b-zq2e6k3gnk],
        .billing-purchases-table tbody tr[b-zq2e6k3gnk] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 6px 12px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--bill-line);
        }

        .billing-activity-table tbody tr:last-child[b-zq2e6k3gnk],
        .billing-purchases-table tbody tr:last-child[b-zq2e6k3gnk] {
            border-bottom: 0;
        }

        .billing-activity-table td[b-zq2e6k3gnk],
        .billing-purchases-table td[b-zq2e6k3gnk] {
            min-width: 0;
            padding: 0;
            border: 0;
        }

    /* activity: type | amount, then related | date */
    .billing-activity-table td:nth-child(1)[b-zq2e6k3gnk] {
        grid-column: 1;
        grid-row: 1;
    }

    .billing-activity-table td:nth-child(4)[b-zq2e6k3gnk] {
        grid-column: 2;
        grid-row: 1;
    }

    .billing-activity-table td:nth-child(2)[b-zq2e6k3gnk] {
        grid-column: 1;
        grid-row: 2;
        padding-inline-start: 39px;
    }

    .billing-activity-table td:nth-child(3)[b-zq2e6k3gnk] {
        grid-column: 2;
        grid-row: 2;
        text-align: end;
    }

    .billing-activity-type[b-zq2e6k3gnk] {
        min-width: 0;
    }

        .billing-activity-type > div[b-zq2e6k3gnk] {
            min-width: 0;
        }

    .billing-activity-type strong[b-zq2e6k3gnk],
    .billing-activity-related strong[b-zq2e6k3gnk] {
        max-width: 100%;
        font-size: .66rem;
    }

    .billing-activity-type small[b-zq2e6k3gnk] {
        max-width: 100%;
        font-size: .56rem;
    }

    .billing-activity-related span[b-zq2e6k3gnk],
    .billing-activity-date[b-zq2e6k3gnk] {
        font-size: .58rem;
    }

    /* purchases: package full, then credits | amount, status | date, reference */
    .billing-purchases-table td:nth-child(1)[b-zq2e6k3gnk],
    .billing-purchases-table td:nth-child(6)[b-zq2e6k3gnk] {
        grid-column: 1 / -1;
    }

    .billing-purchases-table td:nth-child(3)[b-zq2e6k3gnk],
    .billing-purchases-table td:nth-child(5)[b-zq2e6k3gnk] {
        text-align: end;
    }
}
/* _content/AITranslationPlatform.Web/Components/Billing/BuyCredits.razor.rz.scp.css */
/* =========================================================
   BUY CREDITS

   Built on the token layer in app.css, so it follows the
   warm palette in both themes without a second set of rules.

   The shop has one job: make three packages comparable at a
   glance and make the difference between them legible before
   the reader has to read anything. Everything below serves
   that - the price is the largest thing on a card, the
   capability rows are the same order everywhere, and the
   comparison table repeats nothing the cards already said in
   a different arrangement.
   ========================================================= */

.buy-page[b-9ljrcga8tj] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 40px;
}


/* ---- the kicker, as everywhere else in the panel ---- */

.buy-eyebrow[b-9ljrcga8tj] {
    --badge-size: .6rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 11px 5px 9px;
    border: 1px solid rgba(226, 175, 46, .34);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--accent-text);
    font-size: var(--badge-size);
    font-weight: 800;
    letter-spacing: .075em;
    white-space: nowrap;
}

.buy-page[dir="rtl"] .buy-eyebrow[b-9ljrcga8tj] {
    padding: 5px 9px 5px 11px;
    letter-spacing: 0;
}

.buy-eyebrow-dot[b-9ljrcga8tj] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ui-accent-strong);
    animation: ui-pulse 2.4s var(--ui-ease) infinite;
}


/* =========================================================
   HERO
   ========================================================= */

.buy-hero[b-9ljrcga8tj] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: clip;
    padding: 26px 30px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    background:
        radial-gradient(120% 150% at 88% -30%, var(--ui-bloom-warm) 0%, transparent 62%),
        var(--ui-surface-strong);
    box-shadow: var(--ui-shadow-md);
    animation: ui-card-in .6s var(--ui-ease-out) backwards;
}

.buy-hero[b-9ljrcga8tj]::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    inset-block-start: -122px;
    inset-inline-end: -70px;
    border: 46px solid var(--ui-accent-soft);
    border-radius: 50%;
    animation: ui-hero-ring 1.1s var(--ui-ease-out) .08s backwards;
    pointer-events: none;
}

.buy-hero-copy[b-9ljrcga8tj] {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.buy-hero h1[b-9ljrcga8tj] {
    margin: 0 0 10px;
    color: var(--text);
    font-size: clamp(1.5rem, 2vw, 2.05rem);
    font-weight: 800;
    line-height: 1.25;
    animation: ui-reveal-up .6s var(--ui-ease-out) .18s backwards;
}

.buy-hero p[b-9ljrcga8tj] {
    margin: 0;
    max-width: 62ch;
    color: var(--ui-muted);
    font-size: .88rem;
    line-height: 1.9;
    animation: ui-rise .55s var(--ui-ease-out) .28s backwards;
}

.buy-hero-back[b-9ljrcga8tj] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 10px 18px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-strong);
    color: var(--ui-ink-2);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--ui-t);
}

    .buy-hero-back:hover[b-9ljrcga8tj] {
        transform: translateY(-2px);
        border-color: var(--ui-clay);
        background: var(--ui-surface-hover);
    }

    .buy-hero-back svg[b-9ljrcga8tj] {
        width: 15px;
        height: 15px;
    }

/* the chevron points the way the reader travels */
.buy-page[dir="ltr"] .buy-hero-back svg[b-9ljrcga8tj] {
    transform: scaleX(1);
}

.buy-page[dir="rtl"] .buy-hero-back svg[b-9ljrcga8tj] {
    transform: scaleX(-1);
}


/* =========================================================
   THE CARDS
   =========================================================
   Equal-height columns with the action pinned to the floor,
   so three packages of different description lengths still
   line their buttons up.
   ========================================================= */

.buy-grid[b-9ljrcga8tj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    align-items: stretch;
}



.buy-card[b-9ljrcga8tj] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-dur-2) var(--ui-ease),
                box-shadow var(--ui-dur-2) var(--ui-ease),
                border-color var(--ui-dur-2) var(--ui-ease);
    /* backwards, not both: `both` holds the final transform and would
       outrank the hover lift below it */
    animation: ui-card-in .55s var(--ui-ease-out) var(--card-delay, 0ms) backwards;
}

    .buy-card:hover[b-9ljrcga8tj] {
        transform: translateY(-4px);
        border-color: var(--ui-clay-soft);
        box-shadow: var(--ui-shadow-md);
    }


/* The recommended one is raised rather than recoloured: a
   second accent colour on a page that already has one reads
   as a different kind of thing, not a better one. */

.buy-card.is-featured[b-9ljrcga8tj] {
    border-color: var(--ui-accent-strong);
    background:
        radial-gradient(120% 90% at 50% -10%, var(--ui-accent-soft) 0%, transparent 60%),
        var(--ui-surface-strong);
    box-shadow: var(--ui-shadow-md);
}

.buy-card.is-selected[b-9ljrcga8tj] {
    border-color: var(--ui-accent-strong);
    box-shadow: 0 0 0 3px var(--ui-accent-tint), var(--ui-shadow-md);
}

.buy-ribbon[b-9ljrcga8tj] {
    position: absolute;
    inset-block-start: -11px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border-radius: var(--ui-r-pill);
    background: linear-gradient(140deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
    color: var(--ui-on-accent);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
    box-shadow: var(--ui-shadow-accent);
}

.buy-page[dir="rtl"] .buy-ribbon[b-9ljrcga8tj] {
    letter-spacing: 0;
}


/* ---- identity ---- */

.buy-card-head[b-9ljrcga8tj] {
    margin-bottom: 18px;
}

.buy-card-head h2[b-9ljrcga8tj] {
    margin: 0 0 7px;
    color: var(--text);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.35;
}

.buy-card-head p[b-9ljrcga8tj] {
    margin: 0;
    color: var(--ui-muted);
    font-size: .81rem;
    line-height: 1.8;
}


/* ---- credits: the largest number on the card ---- */

.buy-card-credits[b-9ljrcga8tj] {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ui-line);
}

.buy-credit-line[b-9ljrcga8tj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

    /* base and bonus at the same size. A bonus set in smaller
       type is a bonus being played down, and it is the reason
       one package is better value than another. */
    .buy-credit-line strong[b-9ljrcga8tj] {
        color: var(--text);
        font-size: 2.4rem;
        font-weight: 820;
        line-height: 1;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

.buy-credit-plus[b-9ljrcga8tj] {
    color: var(--ui-faint);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.buy-credit-bonus[b-9ljrcga8tj] {
    color: var(--ui-success) !important;
}

.buy-credit-bonus-word[b-9ljrcga8tj] {
    align-self: center;
    padding: 3px 9px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-success-tint);
    color: var(--ui-success);
    font-size: .68rem;
    font-weight: 800;
}

.buy-credit-unit[b-9ljrcga8tj] {
    display: block;
    margin-top: 9px;
    color: var(--ui-muted);
    font-size: .78rem;
    font-weight: 600;
}

    .buy-credit-unit b[b-9ljrcga8tj] {
        color: var(--ui-ink-2);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }


/* ---- price ---- */

.buy-card-price[b-9ljrcga8tj] {
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--ui-line);
}

    .buy-card-price strong[b-9ljrcga8tj] {
        display: flex;
        align-items: baseline;
        gap: 6px;
        color: var(--text);
        font-size: 1.28rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

        .buy-card-price strong small[b-9ljrcga8tj] {
            color: var(--ui-muted);
            font-size: .72rem;
            font-weight: 700;
        }

    .buy-card-price > span[b-9ljrcga8tj] {
        display: block;
        margin-top: 5px;
        color: var(--ui-faint);
        font-size: .72rem;
        font-weight: 600;
    }


/* ---- capabilities ---- */

.buy-card-body[b-9ljrcga8tj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 0 20px;
    /* takes the slack, so the button below sits on the floor */
    flex: 1;
}

.buy-spec-title[b-9ljrcga8tj] {
    display: block;
    margin-bottom: 9px;
    color: var(--ui-faint);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.buy-page[dir="rtl"] .buy-spec-title[b-9ljrcga8tj] {
    letter-spacing: 0;
}

.buy-spec-list[b-9ljrcga8tj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .buy-spec-list li[b-9ljrcga8tj] {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: .83rem;
        font-weight: 600;
    }

    .buy-spec-list li.on[b-9ljrcga8tj] {
        color: var(--ui-ink-2);
    }

    .buy-spec-list li.off[b-9ljrcga8tj] {
        color: var(--ui-faint);
    }


/* ---- the tick / the dash ---- */

.buy-mark[b-9ljrcga8tj] {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    flex: none;
    border-radius: 50%;
}

    .buy-mark svg[b-9ljrcga8tj] {
        width: 12px;
        height: 12px;
    }

    .buy-mark.on[b-9ljrcga8tj] {
        background: var(--ui-success-tint);
        color: var(--ui-success);
    }

    /* a dash, not a cross: what is absent is simply not included,
       and a red X reads as something having gone wrong */
    .buy-mark.off[b-9ljrcga8tj] {
        background: var(--ui-surface-sunken);
        color: var(--ui-faint);
    }


/* ---- format chips ---- */

.buy-format-chips[b-9ljrcga8tj] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.buy-chip[b-9ljrcga8tj] {
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: var(--ui-r-xs);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: default;
}

    .buy-chip.on[b-9ljrcga8tj] {
        border-color: var(--ui-success-tint);
        background: var(--ui-success-tint);
        color: var(--ui-success);
    }

    /* struck through rather than hidden: the reader has to be able
       to see that a format was considered and is not included */
    .buy-chip.off[b-9ljrcga8tj] {
        border-color: var(--ui-line);
        background: transparent;
        color: var(--ui-faint);
        text-decoration: line-through;
        text-decoration-thickness: 1px;
        opacity: .75;
    }


/* ---- the size ceiling ---- */

.buy-limit[b-9ljrcga8tj] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
}

.buy-limit-glyph[b-9ljrcga8tj] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--ui-r-xs);
    background: var(--ui-accent-tint);
    color: var(--accent-text);
}

    .buy-limit-glyph svg[b-9ljrcga8tj] {
        width: 17px;
        height: 17px;
    }

.buy-limit-copy small[b-9ljrcga8tj] {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-muted);
    font-size: .66rem;
    font-weight: 600;
}

.buy-limit-copy strong[b-9ljrcga8tj] {
    color: var(--text);
    font-size: .92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}


/* ---- the action ---- */

.buy-card-action[b-9ljrcga8tj] {
    width: 100%;
    padding: 13px 20px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-strong);
    color: var(--ui-ink-2);
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--ui-t);
}

    .buy-card-action:hover[b-9ljrcga8tj] {
        transform: translateY(-2px);
        border-color: var(--ui-clay);
        background: var(--ui-surface-hover);
    }

.buy-card.is-featured .buy-card-action[b-9ljrcga8tj],
.buy-card.is-selected .buy-card-action[b-9ljrcga8tj] {
    border-color: transparent;
    background: linear-gradient(140deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

    .buy-card.is-featured .buy-card-action:hover[b-9ljrcga8tj],
    .buy-card.is-selected .buy-card-action:hover[b-9ljrcga8tj] {
        box-shadow: 0 14px 30px rgba(226, 175, 46, .34);
    }


/* =========================================================
   THE DIVIDERS LINE UP ACROSS CARDS

   Each card is a stack of five bands - name, credits, price,
   capabilities, action - and the rules between them are the
   card's own borders. Laid out card by card, every band is
   as tall as its own contents, so a package with a longer
   description pushes its rules down and the three cards read
   as three different shapes.

   Subgrid fixes it at the source: the cards borrow the row
   tracks of the grid they sit in, so a band is as tall as
   the tallest one in that row and every rule falls on the
   same line. Nothing has to be measured, and no height is
   hard-coded to be wrong at the next font size.

   Guarded, because without subgrid `grid-row: span 5` would
   place the cards into rows that do not exist. Where it is
   missing the cards simply stay as they are - stacked, and
   slightly out of line.
   ========================================================= */

@supports (grid-template-rows: subgrid) {

    .buy-grid[b-9ljrcga8tj] {
        /* name / credits / price / capabilities / action */
        grid-template-rows: auto auto auto 1fr auto;
    }

    .buy-card[b-9ljrcga8tj] {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
    }

    /* the row track does the stretching now */
    .buy-card-body[b-9ljrcga8tj] {
        flex: none;
    }
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.buy-checkout[b-9ljrcga8tj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border: 1px solid var(--ui-accent-strong);
    border-radius: var(--ui-r-lg);
    background:
        radial-gradient(100% 140% at 92% -20%, var(--ui-accent-soft) 0%, transparent 62%),
        var(--ui-surface-strong);
    box-shadow: var(--ui-shadow-md);
    animation: ui-card-in .45s var(--ui-ease-out);
}

.buy-checkout h2[b-9ljrcga8tj] {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
}

.buy-checkout-facts[b-9ljrcga8tj] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin: 0;
}

    .buy-checkout-facts dt[b-9ljrcga8tj] {
        margin-bottom: 4px;
        color: var(--ui-muted);
        font-size: .69rem;
        font-weight: 700;
    }

    .buy-checkout-facts dd[b-9ljrcga8tj] {
        margin: 0;
        color: var(--text);
        font-size: 1.02rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

        .buy-checkout-facts dd.is-bonus[b-9ljrcga8tj] {
            color: var(--ui-success);
        }

        .buy-checkout-facts dd.is-price[b-9ljrcga8tj] {
            color: var(--accent-text);
        }

.buy-checkout-actions[b-9ljrcga8tj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.buy-checkout-form[b-9ljrcga8tj] {
    margin: 0;
}

.buy-pay-action[b-9ljrcga8tj] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: var(--ui-r-pill);
    background: linear-gradient(140deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
    color: var(--ui-on-accent);
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--ui-shadow-accent);
    transition: var(--ui-t);
}

    .buy-pay-action:hover:not(:disabled)[b-9ljrcga8tj] {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(226, 175, 46, .36);
    }

    .buy-pay-action:disabled[b-9ljrcga8tj] {
        opacity: .55;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

.buy-pay-glyph[b-9ljrcga8tj] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 8px;
    background: rgba(74, 54, 8, .13);
}

    .buy-pay-glyph svg[b-9ljrcga8tj] {
        width: 15px;
        height: 15px;
    }

.buy-cancel-action[b-9ljrcga8tj] {
    padding: 13px 20px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    background: transparent;
    color: var(--ui-muted);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ui-t);
}

    .buy-cancel-action:hover[b-9ljrcga8tj] {
        color: var(--ui-ink-2);
        border-color: var(--ui-clay);
    }


/* =========================================================
   COMPARISON TABLE
   =========================================================
   The first column is sticky: on a narrow screen the table
   scrolls sideways, and a row of ticks with the label gone
   says nothing at all.
   ========================================================= */

.buy-compare[b-9ljrcga8tj] {
    padding: 26px 28px 22px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    animation: ui-card-in .55s var(--ui-ease-out) .1s backwards;
}

.buy-compare-head[b-9ljrcga8tj] {
    margin-bottom: 20px;
}

    .buy-compare-head h2[b-9ljrcga8tj] {
        margin: 0 0 7px;
        color: var(--text);
        font-size: 1.28rem;
        font-weight: 800;
    }

    .buy-compare-head p[b-9ljrcga8tj] {
        margin: 0;
        max-width: 70ch;
        color: var(--ui-muted);
        font-size: .84rem;
        line-height: 1.85;
    }

.buy-compare-scroll[b-9ljrcga8tj] {
    overflow-x: auto;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
}

.buy-compare-table[b-9ljrcga8tj] {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}


/* ---- head ---- */

.buy-compare-table thead th[b-9ljrcga8tj] {
    position: relative;
    padding: 18px 16px;
    border-bottom: 1px solid var(--ui-line-strong);
    background: var(--ui-surface-strong);
    text-align: center;
    vertical-align: bottom;
}

.buy-compare-table thead th strong[b-9ljrcga8tj] {
    display: block;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.buy-compare-flag[b-9ljrcga8tj] {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: var(--ui-r-pill);
    background: linear-gradient(140deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
    color: var(--ui-on-accent);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.buy-page[dir="rtl"] .buy-compare-flag[b-9ljrcga8tj] {
    letter-spacing: 0;
}

.buy-compare-corner[b-9ljrcga8tj] {
    inset-inline-start: 0;
    z-index: 2;
    min-width: 190px;
    color: var(--ui-faint);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.buy-compare-table thead th.buy-compare-corner[b-9ljrcga8tj] {
    position: sticky;
    text-align: start;
}


/* ---- the featured column, tinted end to end ---- */

.buy-compare-table thead th.is-featured[b-9ljrcga8tj],
.buy-compare-table tbody td.is-featured[b-9ljrcga8tj] {
    background: var(--ui-accent-tint);
}

.buy-compare-table thead th.is-featured[b-9ljrcga8tj] {
    border-start-start-radius: var(--ui-r-sm);
    border-start-end-radius: var(--ui-r-sm);
}


/* ---- section dividers ---- */

.buy-compare-section th[b-9ljrcga8tj] {
    padding: 10px 16px;
    border-block: 1px solid var(--ui-line);
    background: var(--ui-surface-sunken);
    color: var(--accent-text);
    text-align: start;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.buy-page[dir="rtl"] .buy-compare-section th[b-9ljrcga8tj] {
    letter-spacing: 0;
}


/* ---- body ---- */

.buy-compare-table tbody th[scope="row"][b-9ljrcga8tj] {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    padding: 13px 16px;
    background: var(--ui-surface-strong);
    color: var(--ui-ink-2);
    text-align: start;
    font-size: .82rem;
    font-weight: 700;
}

    .buy-compare-table tbody th[scope="row"] small[b-9ljrcga8tj] {
        display: block;
        margin-top: 2px;
        color: var(--ui-faint);
        font-size: .65rem;
        font-weight: 600;
    }

.buy-compare-format[b-9ljrcga8tj] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--ui-r-xs);
    background: var(--ui-surface-sunken);
    color: var(--ui-ink-2);
    font-size: .68rem;
    font-weight: 800;
}

.buy-compare-table tbody td[b-9ljrcga8tj] {
    padding: 13px 16px;
    border-top: 1px solid var(--ui-line);
    color: var(--ui-ink-2);
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .buy-compare-table tbody td small[b-9ljrcga8tj] {
        margin-inline-start: 4px;
        color: var(--ui-faint);
        font-size: .66rem;
        font-weight: 600;
    }

    .buy-compare-table tbody td .buy-mark[b-9ljrcga8tj] {
        margin: 0 auto;
    }

/* alternating bands, so the eye holds a row across a wide table */
.buy-compare-table tbody tr:nth-of-type(even):not(.buy-compare-section) td[b-9ljrcga8tj],
.buy-compare-table tbody tr:nth-of-type(even):not(.buy-compare-section) th[scope="row"][b-9ljrcga8tj] {
    background: var(--ui-surface-sunken);
}

.buy-compare-table tbody tr:nth-of-type(even):not(.buy-compare-section) td.is-featured[b-9ljrcga8tj] {
    background: var(--ui-accent-tint);
}

.buy-compare-price[b-9ljrcga8tj] {
    color: var(--text);
    font-size: .95rem;
    font-weight: 800;
}

.buy-compare-strong[b-9ljrcga8tj] {
    display: block;
    color: var(--text);
    font-size: .98rem;
    font-weight: 800;
}

.buy-compare-bonus[b-9ljrcga8tj] {
    color: var(--ui-success);
    font-weight: 800;
}

.buy-compare-dash[b-9ljrcga8tj] {
    color: var(--ui-faint);
}


/* ---- the credit bar ---- */

.buy-compare-bar[b-9ljrcga8tj] {
    display: block;
    width: min(100%, 130px);
    height: 5px;
    margin: 7px auto 0;
    border-radius: var(--ui-r-pill);
    background: var(--ui-line);
    overflow: hidden;
}

    .buy-compare-bar i[b-9ljrcga8tj] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
    }


/* ---- the closing row of buttons ---- */

.buy-compare-actions td[b-9ljrcga8tj] {
    padding: 18px 16px;
}

.buy-compare-select[b-9ljrcga8tj] {
    width: 100%;
    max-width: 170px;
    padding: 10px 18px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-strong);
    color: var(--ui-ink-2);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--ui-t);
}

    .buy-compare-select:hover[b-9ljrcga8tj] {
        transform: translateY(-2px);
        border-color: var(--ui-clay);
        background: var(--ui-surface-hover);
    }

    .buy-compare-select.is-selected[b-9ljrcga8tj] {
        border-color: transparent;
        background: linear-gradient(140deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
        color: var(--ui-on-accent);
        box-shadow: var(--ui-shadow-accent);
    }


/* =========================================================
   STATES
   ========================================================= */

.buy-panel[b-9ljrcga8tj] {
    padding: 30px 26px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
}

.buy-empty[b-9ljrcga8tj] {
    margin: 0;
    color: var(--ui-muted);
    text-align: center;
    font-size: .9rem;
}

.buy-notice[b-9ljrcga8tj] {
    padding: 16px 20px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
}

    .buy-notice.danger[b-9ljrcga8tj] {
        border-color: var(--ui-danger-tint);
        background: var(--ui-danger-tint);
        color: var(--ui-danger);
    }


/* =========================================================
   NARROW
   ========================================================= */

@media (max-width: 760px) {

    .buy-hero[b-9ljrcga8tj],
    .buy-compare[b-9ljrcga8tj] {
        padding: 22px 18px;
    }

    .buy-card[b-9ljrcga8tj] {
        padding: 24px 20px 20px;
    }

    .buy-card-credits strong[b-9ljrcga8tj] {
        font-size: 2.1rem;
    }

    .buy-checkout[b-9ljrcga8tj] {
        padding: 20px 18px;
    }

    .buy-checkout-actions[b-9ljrcga8tj],
    .buy-checkout-form[b-9ljrcga8tj],
    .buy-pay-action[b-9ljrcga8tj] {
        width: 100%;
    }

    .buy-pay-action[b-9ljrcga8tj] {
        justify-content: center;
    }

    .buy-compare-corner[b-9ljrcga8tj] {
        min-width: 150px;
    }
}


/* =========================================================
   NO ANTIFORGERY TOKEN

   Shown only when the page arrived by enhanced navigation,
   which every link into it now prevents. It exists so that
   if it ever happens the user has a sentence and a way out
   rather than a payment button that does nothing.
   ========================================================= */

.buy-token-missing[b-9ljrcga8tj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border: 1px solid var(--ui-warning-tint);
    border-radius: var(--ui-r-sm);
    background: var(--ui-warning-tint);
    color: var(--ui-warning);
    font-size: .82rem;
    font-weight: 700;
}

    .buy-token-missing a[b-9ljrcga8tj] {
        padding: 7px 14px;
        border-radius: var(--ui-r-pill);
        background: var(--ui-surface-strong);
        color: var(--accent-text);
        text-decoration: none;
        font-weight: 800;
    }

/* BUY CREDITS PREMIUM V2 - START */
/* =========================================================
   BUY CREDITS — PREMIUM POLISH + WARM DARK V2
   ========================================================= */

.buy-page[b-9ljrcga8tj] {
    width: min(100%, 1480px);
    margin: 0 auto;
    gap: 18px;
    padding-bottom: 34px;
}

.buy-hero[b-9ljrcga8tj] {
    min-height: 205px;
    padding: 30px 32px;
    border-radius: 28px;
}

.buy-grid[b-9ljrcga8tj] {
    gap: 14px;
}

.buy-card[b-9ljrcga8tj] {
    border-radius: 20px;
    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 78%),
        var(--ui-surface);
}

.buy-card.is-featured[b-9ljrcga8tj] {
    background:
        radial-gradient(120% 95% at 50% -15%, var(--ui-accent-soft) 0%, transparent 60%),
        var(--ui-surface-strong);
}

.buy-card-price strong[b-9ljrcga8tj],
.buy-checkout-facts dd.is-price[b-9ljrcga8tj] {
    color: var(--accent-text);
}

.buy-card-action[b-9ljrcga8tj] {
    min-height: 42px;
}

.buy-checkout[b-9ljrcga8tj] {
    border-radius: 22px;
}

.buy-compare[b-9ljrcga8tj] {
    border-radius: 22px;
}

.buy-compare-scroll[b-9ljrcga8tj] {
    border-radius: 14px;
}


/* Warm explicit dark mode */
html[data-theme="dark"] .buy-page[b-9ljrcga8tj] {
    --buy-dark-surface: #211b15;
    --buy-dark-raised: #292219;
    --buy-dark-strong: #2d251c;
    --buy-dark-soft: #19140f;
    --buy-dark-line: rgba(255,236,198,.09);
    --buy-dark-line-strong: rgba(255,236,198,.15);
}

html[data-theme="dark"] .buy-hero[b-9ljrcga8tj] {
    border-color: var(--buy-dark-line-strong);

    background:
        radial-gradient(120% 150% at 88% -30%, rgba(226,175,46,.12) 0%, transparent 62%),
        linear-gradient(145deg, #2c241b, #211b15);

    box-shadow:
        0 22px 50px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.02);
}

html[data-theme="dark"] .buy-eyebrow[b-9ljrcga8tj],
html[data-theme="dark"] .buy-hero-back[b-9ljrcga8tj] {
    border-color: rgba(255,236,198,.13);
    background: #2a231b;
}

html[data-theme="dark"] .buy-hero-back[b-9ljrcga8tj] {
    color: #d8cebf;
}

html[data-theme="dark"] .buy-card[b-9ljrcga8tj] {
    border-color: var(--buy-dark-line);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.008)
        ),
        #211b15;

    box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

html[data-theme="dark"] .buy-card:hover[b-9ljrcga8tj] {
    border-color: rgba(226,175,46,.16);
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

html[data-theme="dark"] .buy-card.is-featured[b-9ljrcga8tj] {
    border-color: rgba(226,175,46,.34);

    background:
        radial-gradient(120% 95% at 50% -15%, rgba(226,175,46,.13) 0%, transparent 60%),
        #272018;
}

html[data-theme="dark"] .buy-card.is-selected[b-9ljrcga8tj] {
    border-color: #d7a52e;
    box-shadow: 0 0 0 3px rgba(226,175,46,.08), 0 18px 36px rgba(0,0,0,.18);
}

html[data-theme="dark"] .buy-card-credits[b-9ljrcga8tj],
html[data-theme="dark"] .buy-card-price[b-9ljrcga8tj] {
    border-bottom-color: var(--buy-dark-line);
}

html[data-theme="dark"] .buy-mark.off[b-9ljrcga8tj],
html[data-theme="dark"] .buy-limit[b-9ljrcga8tj],
html[data-theme="dark"] .buy-format-chips .buy-chip.off[b-9ljrcga8tj] {
    border-color: var(--buy-dark-line);
    background-color: #19140f;
}

html[data-theme="dark"] .buy-card-action[b-9ljrcga8tj],
html[data-theme="dark"] .buy-compare-select[b-9ljrcga8tj],
html[data-theme="dark"] .buy-cancel-action[b-9ljrcga8tj] {
    border-color: var(--buy-dark-line-strong);
    background: #19140f;
    color: #ded4c4;
}

html[data-theme="dark"] .buy-card-action:hover[b-9ljrcga8tj],
html[data-theme="dark"] .buy-compare-select:hover[b-9ljrcga8tj],
html[data-theme="dark"] .buy-cancel-action:hover[b-9ljrcga8tj] {
    border-color: rgba(226,175,46,.25);
    background: #211a13;
    color: #efbf4a;
}

html[data-theme="dark"] .buy-checkout[b-9ljrcga8tj] {
    border-color: rgba(226,175,46,.34);

    background:
        radial-gradient(100% 140% at 92% -20%, rgba(226,175,46,.13) 0%, transparent 62%),
        #272018;

    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

html[data-theme="dark"] .buy-compare[b-9ljrcga8tj],
html[data-theme="dark"] .buy-panel[b-9ljrcga8tj] {
    border-color: var(--buy-dark-line-strong);
    background: #211b15;
    box-shadow: 0 16px 36px rgba(0,0,0,.15);
}

html[data-theme="dark"] .buy-compare-scroll[b-9ljrcga8tj] {
    border-color: var(--buy-dark-line);
}

html[data-theme="dark"] .buy-compare-table thead th[b-9ljrcga8tj] {
    border-bottom-color: var(--buy-dark-line-strong);
    background: #292219;
}

html[data-theme="dark"] .buy-compare-section th[b-9ljrcga8tj] {
    border-block-color: var(--buy-dark-line);
    background: #19140f;
}

html[data-theme="dark"] .buy-compare-table tbody th[scope="row"][b-9ljrcga8tj] {
    background: #252018;
}

html[data-theme="dark"] .buy-compare-table tbody td[b-9ljrcga8tj] {
    border-top-color: var(--buy-dark-line);
}

html[data-theme="dark"] .buy-compare-table tbody tr:nth-of-type(even):not(.buy-compare-section) td[b-9ljrcga8tj],
html[data-theme="dark"] .buy-compare-table tbody tr:nth-of-type(even):not(.buy-compare-section) th[scope="row"][b-9ljrcga8tj] {
    background: #19140f;
}

html[data-theme="dark"] .buy-compare-table thead th.is-featured[b-9ljrcga8tj],
html[data-theme="dark"] .buy-compare-table tbody td.is-featured[b-9ljrcga8tj],
html[data-theme="dark"] .buy-compare-table tbody tr:nth-of-type(even):not(.buy-compare-section) td.is-featured[b-9ljrcga8tj] {
    background: rgba(226,175,46,.07);
}

html[data-theme="dark"] .buy-compare-format[b-9ljrcga8tj] {
    background: #19140f;
}

html[data-theme="dark"] .buy-token-missing[b-9ljrcga8tj] {
    border-color: rgba(196,145,52,.18);
    background: rgba(196,145,52,.10);
}

html[data-theme="dark"] .buy-token-missing a[b-9ljrcga8tj] {
    background: #292219;
}

/* BUY CREDITS PREMIUM V2 - END */

/* BUY CREDITS PREMIUM PACKAGE REDESIGN V3 - START */
/*
 * Premium redesign for package cards.
 * Objective:
 * - make the cards more compact
 * - increase scanability
 * - visually differentiate formats with mini icon chips
 * - preserve both light and dark themes by staying on the token layer
 */

.buy-grid[b-9ljrcga8tj] {
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch;
}

.buy-card[b-9ljrcga8tj] {
    padding: 18px 18px 16px !important;
    border-radius: calc(var(--ui-r-lg) + 2px) !important;
    background:
        radial-gradient(120% 100% at 0% 0%, var(--ui-accent-soft) 0%, transparent 46%),
        linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface-strong) 100%) !important;
    box-shadow:
        0 8px 20px rgba(26, 35, 52, .05),
        inset 0 1px 0 rgba(255, 255, 255, .24) !important;
    overflow: hidden;
}

.buy-card[b-9ljrcga8tj]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ui-accent) 14%,
        var(--ui-accent-strong) 50%,
        transparent 100%
    );
    opacity: .75;
}

.buy-card:hover[b-9ljrcga8tj] {
    transform: translateY(-5px) !important;
    box-shadow:
        0 14px 32px rgba(26, 35, 52, .10),
        inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}

.buy-card.is-featured[b-9ljrcga8tj] {
    border-color: rgba(226, 175, 46, .42) !important;
    background:
        radial-gradient(120% 110% at 0% 0%, var(--ui-accent-soft) 0%, transparent 44%),
        radial-gradient(95% 70% at 100% 0%, rgba(226, 175, 46, .10) 0%, transparent 60%),
        linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface-strong) 100%) !important;
    box-shadow:
        0 16px 36px rgba(226, 175, 46, .10),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.buy-card.is-selected[b-9ljrcga8tj] {
    border-color: var(--ui-accent-strong) !important;
    box-shadow:
        0 0 0 3px var(--ui-accent-tint),
        0 16px 34px rgba(226, 175, 46, .11),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.buy-ribbon[b-9ljrcga8tj] {
    inset-block-start: 12px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 16px !important;
    transform: none !important;
    padding: 5px 12px !important;
    font-size: .58rem !important;
    box-shadow: 0 10px 22px rgba(226, 175, 46, .20) !important;
}

.buy-card-head[b-9ljrcga8tj] {
    margin-bottom: 12px !important;
    padding-inline-end: 92px;
}

.buy-page[dir="rtl"] .buy-card-head[b-9ljrcga8tj] {
    padding-inline-end: 0;
    padding-inline-start: 92px;
}

.buy-card-head h2[b-9ljrcga8tj] {
    margin: 0 0 5px !important;
    font-size: 1.06rem !important;
    line-height: 1.35 !important;
}

.buy-card-head p[b-9ljrcga8tj] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .74rem !important;
    line-height: 1.72 !important;
}

.buy-card-credits[b-9ljrcga8tj],
.buy-card-price[b-9ljrcga8tj] {
    margin: 0 0 10px;
    padding: 12px 14px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-md);
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface-sunken));
}

.buy-card-credits[b-9ljrcga8tj] {
    position: relative;
}

.buy-card-credits[b-9ljrcga8tj]::after,
.buy-card-price[b-9ljrcga8tj]::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226,175,46,.26), transparent);
    pointer-events: none;
}

.buy-credit-line strong[b-9ljrcga8tj] {
    font-size: 1.95rem !important;
    letter-spacing: -.03em;
}

.buy-credit-plus[b-9ljrcga8tj] {
    font-size: 1.22rem !important;
}

.buy-credit-bonus-word[b-9ljrcga8tj] {
    padding: 2px 8px !important;
    font-size: .60rem !important;
}

.buy-credit-unit[b-9ljrcga8tj] {
    margin-top: 6px !important;
    font-size: .70rem !important;
}

.buy-card-price strong[b-9ljrcga8tj] {
    font-size: 1.04rem !important;
}

.buy-card-price strong small[b-9ljrcga8tj] {
    font-size: .66rem !important;
}

.buy-card-price > span[b-9ljrcga8tj] {
    margin-top: 4px !important;
    font-size: .68rem !important;
}

.buy-card-body[b-9ljrcga8tj] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    padding: 4px 0 16px !important;
    flex: none !important;
}

.buy-card-body > .buy-spec[b-9ljrcga8tj],
.buy-card-body > .buy-limit[b-9ljrcga8tj] {
    min-width: 0;
}

.buy-card-body > .buy-spec[b-9ljrcga8tj],
.buy-card-body > .buy-limit[b-9ljrcga8tj] {
    padding: 12px 12px 11px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-raised));
}

.buy-card-body > .buy-spec:nth-child(3)[b-9ljrcga8tj],
.buy-card-body > .buy-limit[b-9ljrcga8tj] {
    grid-column: 1 / -1;
}

.buy-spec-title[b-9ljrcga8tj] {
    margin-bottom: 8px !important;
    color: var(--accent-text) !important;
    font-size: .58rem !important;
    letter-spacing: .08em;
}

.buy-spec-list[b-9ljrcga8tj] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px !important;
}

.buy-spec-list li[b-9ljrcga8tj] {
    gap: 7px !important;
    font-size: .75rem !important;
    line-height: 1.35 !important;
    min-width: 0;
}

.buy-spec-list li span[b-9ljrcga8tj] {
    display: block;
    overflow-wrap: anywhere;
}

.buy-mark[b-9ljrcga8tj] {
    width: 17px !important;
    height: 17px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}

.buy-mark svg[b-9ljrcga8tj] {
    width: 11px !important;
    height: 11px !important;
}

.buy-format-chips[b-9ljrcga8tj] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 7px !important;
}

.buy-chip[b-9ljrcga8tj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 5px 7px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    font-size: .65rem !important;
    font-weight: 800 !important;
}

.buy-chip-glyph[b-9ljrcga8tj] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    font-size: .54rem;
    font-weight: 900;
    line-height: 1;
}

.buy-chip-text[b-9ljrcga8tj] {
    line-height: 1;
    font-size: .62rem;
    font-weight: 800;
}

.buy-chip.on[b-9ljrcga8tj] {
    background: color-mix(in srgb, var(--ui-success-tint) 78%, var(--ui-surface) 22%) !important;
    border-color: color-mix(in srgb, var(--ui-success) 18%, var(--ui-line) 82%) !important;
    color: var(--ui-success) !important;
}

.buy-chip.off[b-9ljrcga8tj] {
    background: var(--ui-surface) !important;
    color: var(--ui-faint) !important;
    opacity: .92 !important;
    text-decoration: none !important;
}

.buy-chip.off .buy-chip-text[b-9ljrcga8tj] {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.buy-chip.off .buy-chip-glyph[b-9ljrcga8tj] {
    opacity: .62;
    filter: saturate(.55);
}

.buy-chip.fmt-pdf .buy-chip-glyph[b-9ljrcga8tj]  { color: #c83b3b; }
.buy-chip.fmt-docx .buy-chip-glyph[b-9ljrcga8tj] { color: #2f6bcf; }
.buy-chip.fmt-pptx .buy-chip-glyph[b-9ljrcga8tj] { color: #d16b2f; }
.buy-chip.fmt-txt .buy-chip-glyph[b-9ljrcga8tj]  { color: #607080; }
.buy-chip.fmt-jpg .buy-chip-glyph[b-9ljrcga8tj]  { color: #2d8d70; }
.buy-chip.fmt-png .buy-chip-glyph[b-9ljrcga8tj]  { color: #2280a8; }
.buy-chip.fmt-webp .buy-chip-glyph[b-9ljrcga8tj] { color: #6c58a7; }
.buy-chip.fmt-tiff .buy-chip-glyph[b-9ljrcga8tj] { color: #8c6d3a; }
.buy-chip.fmt-html .buy-chip-glyph[b-9ljrcga8tj] { color: #d16426; font-size: .49rem; }
.buy-chip.fmt-vtt .buy-chip-glyph[b-9ljrcga8tj]  { color: #7452b8; font-size: .51rem; }
.buy-chip.fmt-srt .buy-chip-glyph[b-9ljrcga8tj]  { color: #3f8f92; }

.buy-limit[b-9ljrcga8tj] {
    gap: 10px !important;
    padding: 10px 12px !important;
}

.buy-limit-glyph[b-9ljrcga8tj] {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
}

.buy-limit-copy small[b-9ljrcga8tj] {
    margin-bottom: 1px !important;
    font-size: .62rem !important;
}

.buy-limit-copy strong[b-9ljrcga8tj] {
    font-size: .85rem !important;
}

.buy-card-action[b-9ljrcga8tj] {
    padding: 11px 16px !important;
    font-size: .80rem !important;
    border-radius: var(--ui-r-pill) !important;
}

.buy-page[dir="rtl"] .buy-card-credits[b-9ljrcga8tj],
.buy-page[dir="rtl"] .buy-card-price[b-9ljrcga8tj],
.buy-page[dir="rtl"] .buy-card-body > .buy-spec[b-9ljrcga8tj],
.buy-page[dir="rtl"] .buy-page[dir="rtl"] .buy-card-body > .buy-limit[b-9ljrcga8tj] {
    text-align: right;
}

@media (max-width: 860px) {
    .buy-card-body[b-9ljrcga8tj] {
        grid-template-columns: 1fr !important;
    }

    .buy-card-body > .buy-spec:nth-child(3)[b-9ljrcga8tj],
    .buy-card-body > .buy-limit[b-9ljrcga8tj] {
        grid-column: auto !important;
    }

    .buy-spec-list[b-9ljrcga8tj] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .buy-grid[b-9ljrcga8tj] {
        grid-template-columns: 1fr !important;
    }

    .buy-card[b-9ljrcga8tj] {
        padding: 17px 16px 15px !important;
    }

    .buy-ribbon[b-9ljrcga8tj] {
        inset-inline-end: 14px !important;
    }

    .buy-card-head[b-9ljrcga8tj],
    .buy-page[dir="rtl"] .buy-card-head[b-9ljrcga8tj] {
        padding-inline-start: 0;
        padding-inline-end: 0;
        padding-top: 28px;
    }

    .buy-credit-line strong[b-9ljrcga8tj] {
        font-size: 1.7rem !important;
    }

    .buy-format-chips[b-9ljrcga8tj] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* BUY CREDITS PREMIUM PACKAGE REDESIGN V3 - END */
/* _content/AITranslationPlatform.Web/Components/Dashboard/Dashboard.razor.rz.scp.css */
/* ============================================================
   USER DASHBOARD V2
   ============================================================ */

.dashboard-page[b-fzw080b9w9] {
    width: 100%;
    display: grid;
    gap: 22px;
}

/* HERO */

/*
 * Three layers make the card rather than one flat fill: a warm bloom in
 * the leading corner, a cooler one trailing, and the surface underneath.
 * The RTL rule only moves the bloom to the other corner - the reading
 * eye should meet it first in either direction.
 */
.dashboard-hero[b-fzw080b9w9] {
    min-height: 196px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 34px 36px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    background: radial-gradient(120% 150% at 8% -20%, var(--ui-bloom-warm), transparent 48%), radial-gradient(90% 120% at 96% 120%, var(--ui-bloom-cool), transparent 55%), linear-gradient(135deg, var(--ui-surface-strong), var(--ui-surface));
    box-shadow: var(--ui-shadow-md);
}

.dashboard-page[dir="rtl"] .dashboard-hero[b-fzw080b9w9] {
    background: radial-gradient(120% 150% at 92% -20%, var(--ui-bloom-warm), transparent 48%), radial-gradient(90% 120% at 4% 120%, var(--ui-bloom-cool), transparent 55%), linear-gradient(225deg, var(--ui-surface-strong), var(--ui-surface));
}

/* a wide ring drifting out of the top corner */
.dashboard-hero[b-fzw080b9w9]::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    inset-block-start: -172px;
    inset-inline-end: -104px;
    border: 46px solid var(--ui-accent-soft);
    border-radius: 50%;
    animation: ui-hero-ring 1.1s var(--ui-ease-out) .08s backwards;
    pointer-events: none;
}

/* and a second, smaller one low on the other side */
.dashboard-hero[b-fzw080b9w9]::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    inset-block-end: -108px;
    inset-inline-start: -46px;
    border: 30px solid var(--ui-line-strong);
    border-radius: 50%;
    animation: ui-hero-ring 1.1s var(--ui-ease-out) .18s backwards;
    pointer-events: none;
}


/* ---- the copy arrives a line at a time ---- */

.dashboard-hero .dashboard-eyebrow[b-fzw080b9w9] {
    --badge-size: .66rem;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 13px 6px 11px;
    animation: ui-rise .55s var(--ui-ease-out) .12s backwards;
}

.dashboard-page[dir="rtl"] .dashboard-hero .dashboard-eyebrow[b-fzw080b9w9] {
    padding: 6px 11px 6px 13px;
}

.dashboard-eyebrow-dot[b-fzw080b9w9] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ui-accent-strong);
    box-shadow: 0 0 0 0 rgba(226, 175, 46, .55);
    animation: ui-pulse 2.4s var(--ui-ease) infinite;
}

.dashboard-hero .dashboard-eyebrow-dot[b-fzw080b9w9] {
    width: 7px;
    height: 7px;
}

.dashboard-hero h1[b-fzw080b9w9] {
    animation: ui-reveal-up .6s var(--ui-ease-out) .2s backwards;
}

.dashboard-hero p[b-fzw080b9w9] {
    animation: ui-rise .55s var(--ui-ease-out) .3s backwards;
}

.dashboard-hero-actions[b-fzw080b9w9] {
    animation: ui-rise .55s var(--ui-ease-out) .38s backwards;
}

.dashboard-hero-copy[b-fzw080b9w9] {
    min-width: 0;
    max-width: 720px;
    position: relative;
    z-index: 1;
}

/*
 * One badge, used by every section label on the page.
 *
 * It began as the hero's alone; the panels below carried the same words
 * as plain ochre text, so the page had two ways of saying the same
 * thing. --badge-size is the only difference between them now, and the
 * hero simply sets a larger one.
 */
.dashboard-eyebrow[b-fzw080b9w9],
.dashboard-section-kicker[b-fzw080b9w9] {
    --badge-size: .6rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 5px 11px 5px 9px;
    border: 1px solid rgba(226, 175, 46, .34);
    border-radius: var(--ui-r-pill);
    /* a token, not white: this pill has to darken with the page, or the
       amber label on it drops to 1.6:1 after dark */
    background: var(--ui-surface-raised);
    color: var(--accent-text);
    font-size: var(--badge-size);
    font-weight: 800;
    letter-spacing: .075em;
    white-space: nowrap;
}

.dashboard-page[dir="rtl"] .dashboard-eyebrow[b-fzw080b9w9],
.dashboard-page[dir="rtl"] .dashboard-section-kicker[b-fzw080b9w9] {
    padding: 5px 9px 5px 11px;
}

.dashboard-page[dir="rtl"] .dashboard-eyebrow[b-fzw080b9w9],
.dashboard-page[dir="rtl"] .dashboard-section-kicker[b-fzw080b9w9] {
    letter-spacing: 0;
}

.dashboard-hero h1[b-fzw080b9w9] {
    margin: 0 0 11px;
    color: var(--text);
    font-size: clamp(1.75rem, 2.2vw, 2.55rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.dashboard-page[dir="rtl"] .dashboard-hero h1[b-fzw080b9w9] {
    letter-spacing: 0;
}

.dashboard-hero p[b-fzw080b9w9] {
    max-width: 650px;
    margin: 0;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.9;
}

.dashboard-hero-actions[b-fzw080b9w9] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================================
   HERO ACTIONS
   =========================================================
   Both buttons are pills with a glyph in a disc of their own,
   and both answer the pointer on more than colour: the disc
   turns, the label shifts toward its edge, and the primary one
   takes a single sheen across it.
   ========================================================= */

.dashboard-primary-action[b-fzw080b9w9],
.dashboard-secondary-action[b-fzw080b9w9] {
    min-height: 52px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px 0 8px;
    overflow: hidden;
    border-radius: var(--ui-r-pill);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ui-t);
}

.dashboard-page[dir="rtl"] .dashboard-primary-action[b-fzw080b9w9],
.dashboard-page[dir="rtl"] .dashboard-secondary-action[b-fzw080b9w9] {
    padding: 0 8px 0 20px;
}

.action-glyph[b-fzw080b9w9] {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: transform var(--ui-dur-2) var(--ui-ease-spring), background-color var(--ui-dur-2) var(--ui-ease);
}

    .action-glyph svg[b-fzw080b9w9] {
        width: 17px;
        height: 17px;
    }

.dashboard-primary-action:hover .action-glyph[b-fzw080b9w9],
.dashboard-secondary-action:hover .action-glyph[b-fzw080b9w9] {
    transform: rotate(90deg) scale(1.08);
}


/* ---- primary ---- */

.dashboard-primary-action[b-fzw080b9w9] {
    border: 1px solid #ad996c6b;
    border-radius: 17px;
    background: linear-gradient(140deg, #f6dc98 0%, #cfb063 100%);
    /* The label is dark. This button carries the accent, and the accent
       is amber - white on it is barely legible, where it was fine on the
       blue this was first written for. */
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

    .dashboard-primary-action .action-glyph[b-fzw080b9w9] {
        background: rgba(74, 54, 8, .16);
        color: var(--ui-on-accent);
    }

    .dashboard-primary-action:hover[b-fzw080b9w9] {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(226, 175, 46, .42);
    }

        .dashboard-primary-action:hover .action-glyph[b-fzw080b9w9] {
            background: rgba(74, 54, 8, .24);
        }

    /* one light crossing the button, per hover */
    .dashboard-primary-action[b-fzw080b9w9]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .55) 50%, transparent 66%);
        opacity: 0;
        pointer-events: none;
    }

    .dashboard-primary-action:hover[b-fzw080b9w9]::before {
        animation: ui-sheen .8s var(--ui-ease-out);
    }


/* ---- secondary ---- */

.dashboard-secondary-action[b-fzw080b9w9] {
    border: 1px solid var(--ui-line-strong);
    background: var(--ui-surface-raised);
    color: var(--ui-ink);
}

    .dashboard-secondary-action .action-glyph[b-fzw080b9w9] {
        background: var(--ui-surface-sunken);
        color: var(--ui-ink-2);
    }

    .dashboard-secondary-action:hover[b-fzw080b9w9] {
        transform: translateY(-2px);
        border-color: var(--ui-accent-strong);
        background: var(--ui-surface-strong);
        box-shadow: var(
            );
    }

        .dashboard-secondary-action:hover .action-glyph[b-fzw080b9w9] {
            background: var(--ui-accent-soft);
            color: var(--ui-warning);
        }


.dashboard-notice[b-fzw080b9w9] {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-md);
    background: var(--surface);
}

    .dashboard-notice.warning[b-fzw080b9w9] {
        border-color: var(--ui-warning-soft);
        background: var(--ui-warning-soft);
    }

    .dashboard-notice.danger[b-fzw080b9w9] {
        border-color: var(--ui-danger-soft);
        background: var(--ui-danger-soft);
        border: 1px solid rgb(128 28 28 / 42%);
    }

.dashboard-notice-icon[b-fzw080b9w9] {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
}

.dashboard-notice.warning .dashboard-notice-icon[b-fzw080b9w9] {
    color: var(--ui-warning);
    background: var(--ui-warning-soft);
}

.dashboard-notice.danger .dashboard-notice-icon[b-fzw080b9w9] {
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
}

.dashboard-notice-icon svg[b-fzw080b9w9] {
    width: 17px;
    height: 17px;
}

.dashboard-notice > div[b-fzw080b9w9] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.dashboard-notice strong[b-fzw080b9w9] {
    color: var(--text);
    font-size: .74rem;
}

.dashboard-notice span[b-fzw080b9w9] {
    color: var(--text-secondary);
    font-size: .66rem;
    line-height: 1.55;
}

.dashboard-notice > a[b-fzw080b9w9] {
    flex: 0 0 auto;
    color: var(--accent-text);
    font-size: .68rem;
    font-weight: 750;
    text-decoration: none;
}

/* KPI */

.dashboard-kpi-grid[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

/*
 * Each card names its role in three variables and everything below
 * reads from them - the wash, the corner glow and the icon. Adding a
 * fifth metric means one variable block, not four more rules.
 */
.dashboard-kpi-card[b-fzw080b9w9] {
    --kpi-ink: var(--ui-warning);
    --kpi-soft: var(--ui-accent-soft);
    --kpi-tint: var(--ui-accent-tint);
    min-width: 0;
    min-height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 17px 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-lg);
    background: linear-gradient(155deg, var(--kpi-tint) 0%, transparent 62%), var(--surface);
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

    .dashboard-kpi-card:hover[b-fzw080b9w9] {
        transform: translateY(-4px);
        box-shadow: var(--ui-shadow-lg);
    }

    /* the glow in the corner, in the card's own colour */
    .dashboard-kpi-card[b-fzw080b9w9]::after {
        content: "";
        position: absolute;
        width: 116px;
        height: 116px;
        inset-block-start: -50px;
        inset-inline-end: -34px;
        border-radius: 50%;
        background: var(--kpi-ink);
        opacity: .09;
        transform-origin: 50% 0;
        transition: transform var(--ui-dur-3) var(--ui-ease), opacity var(--ui-dur-2) var(--ui-ease);
        pointer-events: none;
    }

    .dashboard-kpi-card:hover[b-fzw080b9w9]::after {
        opacity: .15;
        transform: scale(1.3);
    }

    /*
     * A light passing over the card, once per hover. The card already
     * clips its overflow, so the sweep stays inside its corners.
     */
    .dashboard-kpi-card[b-fzw080b9w9]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .55) 48%, transparent 64%);
        opacity: 0;
        pointer-events: none;
    }

    .dashboard-kpi-card:hover[b-fzw080b9w9]::before {
        animation: ui-sheen .85s var(--ui-ease-out);
    }

    .dashboard-kpi-card.reserved[b-fzw080b9w9] {
        --kpi-ink: var(--ui-warning);
        --kpi-soft: var(--ui-warning-soft);
        --kpi-tint: var(--ui-warning-tint);
    }

    .dashboard-kpi-card.active[b-fzw080b9w9] {
        --kpi-ink: var(--ui-success);
        --kpi-soft: var(--ui-success-soft);
        --kpi-tint: var(--ui-success-tint);
    }

    .dashboard-kpi-card.usage[b-fzw080b9w9] {
        --kpi-ink: var(--ui-info);
        --kpi-soft: var(--ui-info-soft);
        --kpi-tint: var(--ui-info-tint);
    }


    /* ---- the headline metric is the filled card, as in the reference ---- */

    .dashboard-kpi-card.available[b-fzw080b9w9] {
        border-color: transparent;
        background: linear-gradient(140deg, #f6dc98 0%, #cfb063 100%);
        box-shadow: 0 6px 8px rgba(62, 54, 30, .18);
    }

        .dashboard-kpi-card.available[b-fzw080b9w9]::after {
            background: #fff;
            opacity: .30;
        }

        .dashboard-kpi-card.available .dashboard-kpi-label[b-fzw080b9w9],
        .dashboard-kpi-card.available .dashboard-kpi-value[b-fzw080b9w9] {
            color: var(--ui-on-accent);
        }

        .dashboard-kpi-card.available .dashboard-kpi-caption[b-fzw080b9w9] {
            color: rgba(74, 54, 8, .78);
        }

        .dashboard-kpi-card.available .dashboard-kpi-icon[b-fzw080b9w9] {
            border-color: rgba(74, 54, 8, .18);
            background: rgba(255, 255, 255, .62);
            color: var(--ui-on-accent);
        }


.dashboard-kpi-top[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-kpi-icon[b-fzw080b9w9] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--ui-r-sm);
    background: var(--kpi-soft);
    color: var(--kpi-ink);
    transition: var(--ui-t);
    animation: ui-pop-in .5s var(--ui-ease-spring) calc(var(--card-in) + .06s) backwards;
}

.dashboard-kpi-card:hover .dashboard-kpi-icon[b-fzw080b9w9] {
    transform: translateY(-2px) scale(1.09) rotate(-5deg);
}

.dashboard-kpi-icon svg[b-fzw080b9w9] {
    width: 19px;
    height: 19px;
}

.dashboard-kpi-label[b-fzw080b9w9] {
    color: var(--text-secondary);
    font-size: .67rem;
    font-weight: 700;
}

.dashboard-kpi-value[b-fzw080b9w9] {
    margin-top: 15px;
    color: var(--text);
    font-size: 1.62rem;
    font-weight: 820;
    line-height: 1;
    letter-spacing: -.01em;
    /* digits keep one width, so a changing number does not shuffle
       the characters beside it on every refresh */
    font-variant-numeric: tabular-nums;
    animation: ui-reveal-up .55s var(--ui-ease-out) calc(var(--card-in) + .2s) backwards;
}

.dashboard-kpi-caption[b-fzw080b9w9] {
    margin-top: 9px;
    color: var(--muted);
    font-size: .61rem;
    line-height: 1.5;
}

/* GENERIC PANELS */

.dashboard-panel[b-fzw080b9w9] {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-lg);
    background: var(--surface);
    box-shadow: var(--ui-shadow-sm);
}

.dashboard-panel-heading[b-fzw080b9w9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

    .dashboard-panel-heading h2[b-fzw080b9w9] {
        margin: 0;
        color: var(--text);
        font-size: 1.08rem;
        font-weight: 780;
    }

    .dashboard-panel-heading p[b-fzw080b9w9] {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: .66rem;
        line-height: 1.65;
    }

.dashboard-panel-link[b-fzw080b9w9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .65rem;
    font-weight: 700;
    text-decoration: none;
}

    .dashboard-panel-link:hover[b-fzw080b9w9] {
        color: var(--accent-text);
    }

    .dashboard-panel-link svg[b-fzw080b9w9] {
        width: 13px;
        height: 13px;
    }

.dashboard-page[dir="rtl"] .dashboard-panel-link svg[b-fzw080b9w9],
.dashboard-page[dir="rtl"] .package-manage-link svg[b-fzw080b9w9] {
    transform: rotate(180deg);
}

/* PRIMARY GRID */

.dashboard-primary-grid[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr) minmax(0, .92fr);
    align-items: stretch;
    gap: 15px;
}

/*
 * The three dashboard cards now share one row:
 * active work | package summary | credit activity.
 * This is layout-only; the existing panel visuals remain untouched.
 */
.dashboard-workspace-grid > .active-jobs-panel[b-fzw080b9w9],
.dashboard-workspace-grid > .package-panel[b-fzw080b9w9],
.dashboard-workspace-grid > .mini-panel[b-fzw080b9w9] {
    min-width: 0;
    height: 100%;
}

.dashboard-workspace-grid > .mini-panel[b-fzw080b9w9] {
    align-self: stretch;
}

/*
 * The three panels of this row arrive in sequence, the way the cards of
 * the KPI row already do. The grid itself is a child of the page and so
 * already rises as one block; without this the panels inside it appeared
 * all at once, which read as a jump rather than an arrival.
 *
 * Reading order, so in Persian the rightmost panel leads.
 */
.dashboard-workspace-grid > *[b-fzw080b9w9] {
    --card-in: .14s;
    animation: ui-card-in .6s var(--ui-ease-out) var(--card-in) backwards;
}

.dashboard-workspace-grid > :nth-child(2)[b-fzw080b9w9] {
    --card-in: .21s;
}

.dashboard-workspace-grid > :nth-child(3)[b-fzw080b9w9] {
    --card-in: .28s;
}


/* =========================================================
   ARRIVING
   =========================================================

   Every card on this page waits until it is looked at. The first
   screenful cascades in on load; everything further down arrives as it
   is scrolled to, which is the point - a card that finished its
   entrance while it was still off screen may as well not have had one.

   The targets are the cards themselves rather than the sections that
   hold them, so scrolling through a column reveals it card by card
   instead of a whole block at once.

   These states apply only to elements the script has marked. If the
   script never runs, nothing is hidden and the page keeps the load
   animation it has always had - which is why the hidden state is keyed
   off an attribute rather than being the default.
   ========================================================= */

/*
 * A fade is not an arrival. This lifts, settles slightly past its
 * resting place and comes back - the spring easing is what makes it
 * read as something placed rather than something switched on - and
 * sharpens out of a blur so it gathers rather than appears.
 */
@keyframes dashboard-arrive-b-fzw080b9w9 {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(.93);
        filter: blur(9px);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* rows are small and there are many: quick, and only upward */
@keyframes dashboard-row-arrive-b-fzw080b9w9 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dashboard-page [data-reveal="pending"][b-fzw080b9w9] {
    animation: none;
    opacity: 0;
}

/*
 * --reveal-i is set by the script as it releases a batch, so the first
 * screenful cascades and a card scrolled to on its own arrives at once.
 */
.dashboard-page [data-reveal="in"][b-fzw080b9w9] {
    animation: dashboard-arrive-b-fzw080b9w9 .68s var(--ui-ease-spring)
               calc(var(--reveal-i, 0) * .075s) both;
}

.dashboard-page .recent-row[data-reveal="in"][b-fzw080b9w9] {
    animation: dashboard-row-arrive-b-fzw080b9w9 .44s var(--ui-ease-out)
               calc(var(--reveal-i, 0) * .05s) both;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-page [data-reveal="pending"][b-fzw080b9w9] {
        opacity: 1;
    }

    .dashboard-page [data-reveal="in"][b-fzw080b9w9],
    .dashboard-page .recent-row[data-reveal="in"][b-fzw080b9w9] {
        animation: none;
    }
}

.active-jobs-panel[b-fzw080b9w9] {
    padding: 21px;
}

.active-jobs-list[b-fzw080b9w9] {
    display: grid;
    gap: 9px;
}

.active-job-card[b-fzw080b9w9] {
    min-width: 0;
    display: grid;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-md);
    color: var(--text);
    background: var(--ui-surface-sunken);
    text-decoration: none;
    transition: var(--ui-t);
}

    .active-job-card:hover[b-fzw080b9w9] {
        transform: translateY(-1px);
        border-color: var(--border-accent);
        box-shadow: var(--ui-shadow-md);
    }

.active-job-main[b-fzw080b9w9] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.active-job-file-icon[b-fzw080b9w9] {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: var(--accent-soft);
    color: var(--accent-text);
}

    .active-job-file-icon svg[b-fzw080b9w9] {
        width: 17px;
        height: 17px;
    }

.active-job-copy[b-fzw080b9w9] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px;
}

    .active-job-copy strong[b-fzw080b9w9] {
        overflow: hidden;
        color: var(--text);
        font-size: .72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .active-job-copy span[b-fzw080b9w9] {
        color: var(--muted);
        font-size: .60rem;
    }

.dashboard-status[b-fzw080b9w9] {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: var(--ui-r-pill);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .58rem;
    font-weight: 760;
    white-space: nowrap;
}

    .dashboard-status.is-completed[b-fzw080b9w9] {
        color: var(--ui-success);
        background: var(--ui-success-soft);
    }

    .dashboard-status.is-failed[b-fzw080b9w9] {
        color: var(--ui-danger);
        background: var(--ui-danger-soft);
    }

    .dashboard-status.is-reviewing[b-fzw080b9w9] {
        color: var(--ui-info);
        background: var(--ui-info-soft);
    }

    .dashboard-status.is-formatting[b-fzw080b9w9] {
        color: var(--ui-warning);
        background: var(--ui-warning-soft);
    }

    .dashboard-status.is-queued[b-fzw080b9w9],
    .dashboard-status.is-preparing[b-fzw080b9w9] {
        color: var(--text-secondary);
        background: var(--ui-surface-sunken);
    }

.active-job-progress-row[b-fzw080b9w9] {
    display: grid;
    gap: 6px;
}

.active-job-progress-meta[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .active-job-progress-meta span[b-fzw080b9w9] {
        color: var(--muted);
        font-size: .56rem;
    }

    .active-job-progress-meta strong[b-fzw080b9w9] {
        color: var(--text-secondary);
        font-size: .60rem;
    }

.active-job-progress-track[b-fzw080b9w9] {
    height: 5px;
    overflow: hidden;
    border-radius: var(--ui-r-pill);
    background: var(--ui-progress-track);
}

    .active-job-progress-track span[b-fzw080b9w9] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--ui-progress-fill);
    }

.active-job-footer[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: .56rem;
}

    .active-job-footer strong[b-fzw080b9w9] {
        color: var(--text-secondary);
    }

/* PACKAGE */

.package-panel[b-fzw080b9w9] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.package-panel-top[b-fzw080b9w9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .package-panel-top h2[b-fzw080b9w9] {
        margin: 0;
        color: var(--text);
        font-size: 1.03rem;
    }

.package-state[b-fzw080b9w9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: var(--ui-r-pill);
    color: var(--ui-success);
    background: var(--ui-success-soft);
    font-size: .56rem;
    font-weight: 750;
}

    .package-state i[b-fzw080b9w9] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

.package-identity[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
}

.package-large-icon[b-fzw080b9w9] {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
}

    .package-large-icon svg[b-fzw080b9w9] {
        width: 21px;
        height: 21px;
    }

.package-identity > div[b-fzw080b9w9] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.package-identity strong[b-fzw080b9w9] {
    overflow: hidden;
    color: var(--text);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.package-identity span[b-fzw080b9w9] {
    color: var(--muted);
    font-size: .58rem;
}

.package-wallet-summary[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3px 10px;
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
}

    .package-wallet-summary span[b-fzw080b9w9] {
        color: var(--muted);
        font-size: .58rem;
    }

    .package-wallet-summary strong[b-fzw080b9w9] {
        grid-column: 1;
        color: var(--text);
        font-size: 1.14rem;
    }

    .package-wallet-summary small[b-fzw080b9w9] {
        grid-column: 2;
        grid-row: 2;
        color: var(--muted);
        font-size: .53rem;
    }

.package-capability-block[b-fzw080b9w9] {
    margin-top: 15px;
}

.package-capability-label[b-fzw080b9w9] {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: .58rem;
    font-weight: 700;
}

.package-chip-list[b-fzw080b9w9] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .package-chip-list span[b-fzw080b9w9] {
        padding: 5px 7px;
        border-radius: var(--ui-r-pill);
        background: var(--accent-soft);
        color: var(--accent-text);
        font-size: .53rem;
        font-weight: 700;
    }

    .package-chip-list.input span[b-fzw080b9w9] {
        background: var(--ui-surface-sunken);
        color: var(--text-secondary);
    }

.package-manage-link[b-fzw080b9w9] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 18px;
    color: var(--accent-text);
    font-size: .64rem;
    font-weight: 750;
    text-decoration: none;
}

    .package-manage-link svg[b-fzw080b9w9] {
        width: 14px;
        height: 14px;
    }

.package-empty[b-fzw080b9w9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 12px 12px;
    text-align: center;
}

    .package-empty strong[b-fzw080b9w9] {
        margin-top: 13px;
        color: var(--text);
        font-size: .80rem;
    }

    .package-empty p[b-fzw080b9w9] {
        max-width: 260px;
        margin: 7px 0 14px;
        color: var(--muted);
        font-size: .62rem;
        line-height: 1.7;
    }

    .package-empty a[b-fzw080b9w9] {
        color: var(--accent-text);
        font-size: .63rem;
        font-weight: 750;
        text-decoration: none;
    }









/* SECONDARY GRID */

.dashboard-secondary-grid[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
}

.dashboard-recent-full-grid > .recent-translations-panel[b-fzw080b9w9] {
    width: 100%;
}

.recent-translations-panel[b-fzw080b9w9] {
    padding: 21px;
}

/* =========================================================
   RECENT TRANSLATIONS
   =========================================================
   A list of rows, not a table. Every cell in the table
   carried the same weight, so the file name - the thing
   being looked for - read no louder than the credit count.

   Each row takes its colour from the status it already
   carries, through one variable, so a new status is a
   variable block rather than a set of new rules.
   ========================================================= */

.recent-list[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.recent-row[b-fzw080b9w9] {
    --row-ink: var(--ui-info);
    --row-tint: var(--ui-info-tint);
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 13px 15px 13px 13px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: rgb(183 172 139 / 46%);
    text-decoration: none;
    transition: var(--ui-t);
    animation: ui-rise .45s var(--ui-ease-out) calc(.12s + var(--i, 0) * .05s) backwards;
}

.dashboard-page[dir="rtl"] .recent-row[b-fzw080b9w9] {
    padding: 13px 13px 13px 15px;
}

.recent-row:hover[b-fzw080b9w9] {
    transform: translateY(-2px);
    border-color: var(--row-ink);
    background: linear-gradient(90deg, var(--row-tint), transparent 42%), var(--ui-surface-strong);
    box-shadow: var(--ui-shadow-md);
}

.recent-row.is-completed[b-fzw080b9w9] {
    --row-ink: var(--ui-success);
    --row-tint: var(--ui-success-tint);
}

.recent-row.is-failed[b-fzw080b9w9] {
    --row-ink: var(--ui-danger);
    --row-tint: var(--ui-danger-tint);
}

.recent-row.is-translating[b-fzw080b9w9],
.recent-row.is-formatting[b-fzw080b9w9] {
    --row-ink: var(--ui-warning);
    --row-tint: var(--ui-warning-tint);
}


/* the rail: the row's status, read before anything is read */

.recent-rail[b-fzw080b9w9] {
    width: 4px;
    align-self: stretch;
    border-radius: var(--ui-r-pill);
    background: var(--row-ink);
    opacity: .55;
    transition: var(--ui-t);
}

.recent-row:hover .recent-rail[b-fzw080b9w9] {
    opacity: 1;
}


.recent-file-icon[b-fzw080b9w9] {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .04em;
    transition: var(--ui-t);
}

.recent-row:hover .recent-file-icon[b-fzw080b9w9] {
    transform: scale(1.06) rotate(-4deg);
    background: var(--ui-accent);
    color: var(--ui-on-accent);
}


.recent-main[b-fzw080b9w9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .recent-main strong[b-fzw080b9w9] {
        overflow: hidden;
        color: var(--text);
        font-size: .78rem;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.recent-meta[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .6rem;
}

    /* a dot between the parts, so they need no separator characters */
    .recent-meta > i[b-fzw080b9w9] {
        width: 3px;
        height: 3px;
        flex: none;
        border-radius: 50%;
        background: currentColor;
        opacity: .55;
    }

.recent-language-pair[b-fzw080b9w9] {
    padding: 3px 8px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--ui-ink-2);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
}


.recent-trailing[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.recent-credit[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

    .recent-credit small[b-fzw080b9w9] {
        color: var(--muted);
        font-size: .52rem;
        font-weight: 600;
    }


/* the chevron only appears when the row is being considered */

.recent-go[b-fzw080b9w9] {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--row-ink);
    opacity: 0;
    transform: translateX(-6px);
    transition: var(--ui-t);
}

.dashboard-page[dir="rtl"] .recent-go[b-fzw080b9w9] {
    transform: translateX(6px) scaleX(-1);
}

.recent-go svg[b-fzw080b9w9] {
    width: 16px;
    height: 16px;
}

.recent-row:hover .recent-go[b-fzw080b9w9] {
    opacity: 1;
    transform: none;
}

.dashboard-page[dir="rtl"] .recent-row:hover .recent-go[b-fzw080b9w9] {
    transform: scaleX(-1);
}


@media (max-width: 900px) {
    .recent-row[b-fzw080b9w9] {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }

    .recent-go[b-fzw080b9w9] {
        display: none;
    }
}


/* SIDE STACK */

/*
 * stretch, not start. With the documents panel gone the ledger is the
 * only thing in this column, and packing it to the top left the column
 * half empty beside a tall list of translations.
 */
.dashboard-side-stack[b-fzw080b9w9] {
    min-width: 0;
    display: grid;
    align-content: stretch;
    gap: 15px;
}

.mini-panel[b-fzw080b9w9] {
    padding: 17px;
}

.mini-panel-heading[b-fzw080b9w9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

    .mini-panel-heading h3[b-fzw080b9w9] {
        margin: 0;
        color: var(--text);
        font-size: .82rem;
    }

    .mini-panel-heading a[b-fzw080b9w9] {
        margin-top: 4px;
        color: var(--accent-text);
        font-size: .56rem;
        font-weight: 700;
        text-decoration: none;
    }

.credit-activity-list[b-fzw080b9w9] {
    display: grid;
    /*
     * No gap. The rows are separated by their own padding instead, so
     * the spine between two nodes is unbroken - with a gap it stopped at
     * each row's edge and the ledger read as five detached segments.
     */
    gap: 0;
}






/* =========================================================
   CREDIT ACTIVITY
   =========================================================
   A ledger rather than a list. The icons sit on one spine
   running down the panel, so five entries read as a sequence
   in time instead of five unrelated rows, and the amount
   carries the colour rather than the row.
   ========================================================= */

.credit-activity-item[b-fzw080b9w9] {
    --act-ink: var(--ui-muted);
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 8px 9px 0;
    border-radius: var(--ui-r-xs);
    transition: var(--ui-t);
    animation: ui-rise .45s var(--ui-ease-out) calc(.15s + var(--i, 0) * .06s) backwards;
}

.dashboard-page[dir="rtl"] .credit-activity-item[b-fzw080b9w9] {
    padding: 9px 0 9px 8px;
}

.credit-activity-item:hover[b-fzw080b9w9] {
    background: var(--ui-surface-hover);
}

/*
     * The spine. It joins each node to the one below, so the last entry
     * draws none - otherwise the line would run off the end of the
     * ledger into nothing. Positioned on the icon's centre line, which
     * is half of its 29px.
     */
.credit-activity-item:not(:last-child)[b-fzw080b9w9]::before {
    content: "";
    width: 2px;
    position: absolute;
    inset-inline-start: 13.5px;
    /*
         * From this node's centre to the next one's. Both sit the same
         * distance from their row's top - the padding plus half the node
         * - so one offset serves both ends and nothing depends on the
         * row's total height.
         */
    top: 25px;
    bottom: -25px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-line);
}

/*
 * A node, not a tile. The ring is painted in the panel's own surface so
 * the spine appears to pass behind it rather than stopping at its edge.
 */
.credit-activity-icon[b-fzw080b9w9] {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    border: 2px solid var(--ui-surface-strong);
    border-radius: 50%;
    background: var(--ui-accent-soft);
    color: var(--accent-text);
    font-size: .64rem;
    font-weight: 800;
    transition: var(--ui-t);
}

.credit-activity-item:hover .credit-activity-icon[b-fzw080b9w9] {
    transform: scale(1.12);
}

.credit-activity-icon.positive[b-fzw080b9w9] {
    color: var(--ui-success);
    background: var(--ui-success-soft);
}

.credit-activity-icon.negative[b-fzw080b9w9] {
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
}

.credit-activity-icon.reserved[b-fzw080b9w9] {
    color: var(--ui-warning);
    background: var(--ui-warning-soft);
}

.credit-activity-copy[b-fzw080b9w9] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

    .credit-activity-copy strong[b-fzw080b9w9] {
        overflow: hidden;
        color: var(--text);
        font-size: .60rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .credit-activity-copy small[b-fzw080b9w9] {
        overflow: hidden;
        color: var(--muted);
        font-size: .48rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.credit-activity-amount[b-fzw080b9w9] {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: var(--ui-r-pill);
    font-size: .72rem;
    font-weight: 800;
    /* digits keep one width, so a column of amounts stays aligned */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .credit-activity-amount.positive[b-fzw080b9w9] {
        color: var(--ui-success);
        background: var(--ui-success-soft);
    }

    .credit-activity-amount.negative[b-fzw080b9w9] {
        color: var(--ui-danger);
        background: var(--ui-danger-soft);
    }

    .credit-activity-amount.neutral[b-fzw080b9w9] {
        color: var(--ui-ink-2);
        background: var(--ui-surface-sunken);
    }

/* LOADING + EMPTY */

.dashboard-panel-loading[b-fzw080b9w9],
.dashboard-mini-loading[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--muted);
    font-size: .64rem;
}

.dashboard-panel-loading[b-fzw080b9w9] {
    min-height: 220px;
}

.dashboard-mini-loading[b-fzw080b9w9] {
    min-height: 90px;
}

.package-loading[b-fzw080b9w9] {
    flex: 1;
}

.dashboard-spinner[b-fzw080b9w9] {
    width: 17px;
    height: 17px;
    border: 2px solid var(--ui-line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: dashboard-spin-b-fzw080b9w9 .8s linear infinite;
}

@keyframes dashboard-spin-b-fzw080b9w9 {
    to {
        transform: rotate(360deg);
    }
}

.dashboard-empty-state[b-fzw080b9w9] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
}

    .dashboard-empty-state.compact[b-fzw080b9w9] {
        min-height: 200px;
    }

.dashboard-empty-icon[b-fzw080b9w9] {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border-radius: var(--ui-r-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
}

    .dashboard-empty-icon svg[b-fzw080b9w9] {
        width: 20px;
        height: 20px;
    }

.dashboard-empty-state strong[b-fzw080b9w9] {
    color: var(--text);
    font-size: .74rem;
}

.dashboard-empty-state p[b-fzw080b9w9] {
    max-width: 390px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .59rem;
    line-height: 1.7;
}

.dashboard-empty-state a[b-fzw080b9w9] {
    margin-top: 11px;
    color: var(--accent-text);
    font-size: .60rem;
    font-weight: 750;
    text-decoration: none;
}

.mini-empty[b-fzw080b9w9] {
    min-height: 75px;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: var(--ui-r-xs);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .56rem;
    text-align: center;
}

/* RTL */

.dashboard-page[dir="rtl"][b-fzw080b9w9] {
    text-align: right;
}

/* DARK */

/*
 * No dark overrides here any more.
 *
 * These three used to paint their own blue-grey for dark mode. Every
 * rule they were overriding now reads --ui-surface, --ui-surface-strong
 * or --ui-surface-sunken, and those are already dark under the dark
 * tokens - so an override would only be a second, hand-kept copy of the
 * same intent, free to drift from it.
 */


/* =========================================================
   ENTRANCE
   =========================================================
   The page arrives a band at a time rather than all at once.
   Each direct child of the page gets its turn from its own
   position, so adding or reordering a section needs no change
   here and no index in the markup.

   The reduced-motion guard in app.css covers this: it zeroes
   every duration, which leaves the final state - visible -
   rather than leaving the page blank.
   ========================================================= */

/*
 * backwards, not both.
 *
 * With `both` the animation keeps hold of its final transform after it
 * ends, and a held transform outranks any later declaration - so the
 * hover lift on the cards below simply never applied. `backwards` gives
 * the same hidden start and then hands the element back to its own
 * rules.
 */
.dashboard-page > *[b-fzw080b9w9] {
    animation: ui-rise .5s var(--ui-ease-out) backwards;
}

.dashboard-page > :nth-child(1)[b-fzw080b9w9] {
    animation-delay: .02s;
}

.dashboard-page > :nth-child(2)[b-fzw080b9w9] {
    animation-delay: .08s;
}

.dashboard-page > :nth-child(3)[b-fzw080b9w9] {
    animation-delay: .14s;
}

.dashboard-page > :nth-child(4)[b-fzw080b9w9] {
    animation-delay: .20s;
}

.dashboard-page > :nth-child(5)[b-fzw080b9w9] {
    animation-delay: .26s;
}

.dashboard-page > :nth-child(6)[b-fzw080b9w9] {
    animation-delay: .32s;
}

.dashboard-page > :nth-child(n+7)[b-fzw080b9w9] {
    animation-delay: .38s;
}


/* cards inside a grid arrive in sequence too, left to right */

.dashboard-kpi-grid > *[b-fzw080b9w9] {
    /* one value: when this card arrives, and when everything inside it
       follows. Keeping them apart let them drift out of step. */
    --card-in: .10s;
    animation: ui-card-in .62s var(--ui-ease-out) var(--card-in) backwards;
}

.dashboard-kpi-grid > :nth-child(2)[b-fzw080b9w9] {
    --card-in: .16s;
}

.dashboard-kpi-grid > :nth-child(3)[b-fzw080b9w9] {
    --card-in: .22s;
}

.dashboard-kpi-grid > :nth-child(4)[b-fzw080b9w9] {
    --card-in: .28s;
}


/* =========================================================
   STAT CARD GLYPHS
   =========================================================
   The same treatment as the sidebar: outline first, then the
   interior strokes in order, each carrying its own --i. The
   draw is timed off --card-in so a glyph starts as its card
   settles rather than on a clock of its own, and it replays
   under the pointer.
   ========================================================= */

.dashboard-kpi-icon svg .ico-frame[b-fzw080b9w9],
.dashboard-kpi-icon svg .ico-detail[b-fzw080b9w9] {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.dashboard-kpi-icon .ico-frame[b-fzw080b9w9] {
    animation: ui-draw .52s var(--ui-ease-out) calc(var(--card-in) + .14s) backwards;
}

.dashboard-kpi-icon .ico-detail[b-fzw080b9w9] {
    animation: ui-draw .3s var(--ui-ease-out) calc(var(--card-in) + var(--ico-delay, .42s) + var(--i, 0) * .09s) backwards;
}

/*
 * ui-redraw, not ui-draw. These glyphs already carry ui-draw from the
 * rule above, and an animation restarts only when its name changes - so
 * naming ui-draw again here did nothing at all, and hovering a card left
 * its icon sitting still.
 */
.dashboard-kpi-card:hover .dashboard-kpi-icon .ico-frame[b-fzw080b9w9] {
    animation: ui-redraw .52s var(--ui-ease-out) both;
}

.dashboard-kpi-card:hover .dashboard-kpi-icon .ico-detail[b-fzw080b9w9] {
    animation: ui-redraw .3s var(--ui-ease-out) calc(var(--ico-delay, .34s) + var(--i, 0) * .09s) both;
}


/* =========================================================
   CHARTS
   =========================================================
   Drawn as inline SVG from data the page already has. The
   viewBox is a flat 0..100 square with preserveAspectRatio
   off, so the card can be any width and the chart simply
   stretches - no measuring, no resize listener, and nothing
   to keep in step with a layout change.
   ========================================================= */

.dashboard-chart-grid[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
}

/*
 * Panels in this file carry their own padding - .dashboard-panel sets
 * none - and this one was added without any, so its heading sat one
 * pixel from the border and read as text outside the card.
 */
.chart-panel[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 21px;
}

.chart-range[b-fzw080b9w9] {
    align-self: center;
    padding: 5px 11px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}

.chart-empty[b-fzw080b9w9] {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 168px;
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .72rem;
}


/* ---- area chart ---- */

.chart-figure[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.chart-svg[b-fzw080b9w9] {
    width: 100%;
    height: 168px;
    display: block;
    overflow: visible;
}

.chart-fill-top[b-fzw080b9w9] {
    stop-color: var(--ui-accent);
    stop-opacity: .55;
}

.chart-fill-bottom[b-fzw080b9w9] {
    stop-color: var(--ui-accent);
    stop-opacity: 0;
}

.chart-area[b-fzw080b9w9] {
    fill: url(#usageFill);
    stroke: none;
    animation: ui-fade .7s var(--ui-ease-out) .35s both;
}

/*
 * vector-effect keeps the stroke 2px however far the box is
 * stretched horizontally. Without it the non-uniform scale
 * squashes the line to a hairline on a wide card.
 */
.chart-line[b-fzw080b9w9] {
    fill: none;
    stroke: var(--ui-accent-strong);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    animation: ui-draw .9s var(--ui-ease-out) .2s both;
}

/*
 * The SVG plots the oldest day at x=0, which is the left edge whatever
 * the text direction. The axis labels below it are a flex row, so in
 * Persian they run right to left and put the oldest day on the RIGHT -
 * the curve and its own dates end up mirrored against each other.
 *
 * Mirroring the drawing puts them back in agreement. The fill gradient
 * is vertical, so it is unaffected, and the bar chart needs nothing:
 * each bar carries its own label in the same flex item, so the two move
 * together whichever way the row runs.
 */
.dashboard-page[dir="rtl"] .chart-svg[b-fzw080b9w9] {
    transform: scaleX(-1);
}


.chart-axis[b-fzw080b9w9] {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: .64rem;
    font-weight: 600;
}

.chart-legend[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .68rem;
}

    .chart-legend strong[b-fzw080b9w9] {
        margin-inline-start: 5px;
        color: var(--text);
    }

.chart-legend-dot[b-fzw080b9w9] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ui-accent-strong);
}


/* ---- bar chart ---- */

.chart-bars[b-fzw080b9w9] {
    flex: 1;
    min-height: 190px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.chart-bar-slot[b-fzw080b9w9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

/*
 * The bar measures against this, not against the slot. Sized against
 * the slot, a full-height bar leaves nothing for the value above it and
 * pushes it out of the card.
 */
.chart-bar-track[b-fzw080b9w9] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    /* the line the bars stand on */
    box-shadow: inset 0 -1px 0 var(--ui-line);
}

.chart-bar-value[b-fzw080b9w9] {
    height: 17px;
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
    animation: ui-fade .4s var(--ui-ease-out) calc(.45s + var(--i) * .06s) both;
}

/*
 * Grown from the baseline with transform-origin at the bottom, so
 * the bar rises out of the axis instead of appearing at full height.
 */
.chart-bar[b-fzw080b9w9] {
    width: 100%;
    height: var(--h);
    border-radius: var(--ui-r-xs) var(--ui-r-xs) 5px 5px;
    background: var(--ui-clay);
    transform-origin: bottom;
    animation: ui-grow .55s var(--ui-ease-out) calc(.28s + var(--i) * .06s) both;
    transition: background-color var(--ui-dur-2) var(--ui-ease);
}

.chart-bar-slot:hover .chart-bar[b-fzw080b9w9] {
    background: var(--ui-accent-strong);
}

.chart-bar-slot.is-empty .chart-bar[b-fzw080b9w9] {
    background: var(--ui-clay-faint);
}

.chart-bar-slot.is-empty:hover .chart-bar[b-fzw080b9w9] {
    background: var(--ui-clay-soft);
}

.chart-bar-label[b-fzw080b9w9] {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
}


@media (max-width: 1100px) {
    .dashboard-chart-grid[b-fzw080b9w9] {
        grid-template-columns: 1fr;
    }
}

/* RESPONSIVE */

@media (max-width: 1280px) {

    .dashboard-secondary-grid[b-fzw080b9w9] {
        grid-template-columns: 1fr;
    }

    .dashboard-side-stack[b-fzw080b9w9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .dashboard-primary-grid[b-fzw080b9w9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-workspace-grid > .mini-panel[b-fzw080b9w9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1080px) {
    .dashboard-kpi-grid[b-fzw080b9w9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-primary-grid[b-fzw080b9w9] {
        grid-template-columns: 1fr;
    }

    .dashboard-workspace-grid > .mini-panel[b-fzw080b9w9] {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .dashboard-page[b-fzw080b9w9] {
        gap: 16px;
    }

    .dashboard-hero[b-fzw080b9w9] {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        padding: 22px 20px;
    }

    .dashboard-hero-actions[b-fzw080b9w9] {
        width: 100%;
    }

    .dashboard-primary-action[b-fzw080b9w9],
    .dashboard-secondary-action[b-fzw080b9w9] {
        flex: 1;
    }


    .dashboard-side-stack[b-fzw080b9w9] {
        grid-template-columns: 1fr;
    }

    .dashboard-notice[b-fzw080b9w9] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

        .dashboard-notice > a[b-fzw080b9w9] {
            width: 100%;
            padding-inline-start: 47px;
        }
}

@media (max-width: 520px) {
    .dashboard-kpi-grid[b-fzw080b9w9],
    .dashboard-hero-actions[b-fzw080b9w9] {
        flex-direction: column;
    }

    .dashboard-primary-action[b-fzw080b9w9],
    .dashboard-secondary-action[b-fzw080b9w9] {
        width: 100%;
    }

    .active-job-main[b-fzw080b9w9] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-status[b-fzw080b9w9] {
        margin-inline-start: 47px;
    }
}

/* =========================================================
   MY PACKAGES
   =========================================================

   Written entirely in the semantic tokens, which is why there is
   no dark block anywhere below: --surface, --text, --muted and the
   rest are redefined once under html[data-theme="dark"], so both
   themes come out of the same rules. A colour written literally
   here would be the one thing that stops following the theme.

   One thing is allowed to shout. The balance is the number people
   open this card for, so it carries the only amber fill; every
   other block stays neutral, and the eye lands where the money is
   rather than being pulled six ways.
   ========================================================= */

.pkgx-panel[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.pkgx-head[b-fzw080b9w9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .pkgx-head h2[b-fzw080b9w9] {
        margin: 0;
        color: var(--text);
        font-size: 1.03rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

.pkgx-count[b-fzw080b9w9] {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    font-size: .58rem;
    font-weight: 750;
    white-space: nowrap;
}


/* ---- the two summary blocks ---- */

.pkgx-overview[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 10px;
}

.pkgx-overline[b-fzw080b9w9] {
    display: block;
    color: var(--muted);
    font-size: .56rem;
    font-weight: 750;
    letter-spacing: .04em;
}

.pkgx-balance[b-fzw080b9w9],
.pkgx-access-card[b-fzw080b9w9] {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-md);
}

.pkgx-balance[b-fzw080b9w9] {
    /* the one amber block on the card */
    border-color: var(--border-accent);
    background: var(--credit-bg);
}

.pkgx-balance-value[b-fzw080b9w9] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 6px 0 4px;
}

    .pkgx-balance-value strong[b-fzw080b9w9] {
        color: var(--text);
        font-size: 1.6rem;
        font-weight: 820;
        line-height: 1;
        letter-spacing: -.02em;
        /* figures in a column have to line up or the card reads as a
           poster rather than a statement */
        font-variant-numeric: tabular-nums;
    }

    .pkgx-balance-value small[b-fzw080b9w9] {
        color: var(--text-secondary);
        font-size: .6rem;
        font-weight: 700;
    }

.pkgx-balance-note[b-fzw080b9w9] {
    display: block;
    color: var(--text-secondary);
    font-size: .57rem;
    font-weight: 650;
}

.pkgx-access-card[b-fzw080b9w9] {
    background: var(--ui-surface-sunken);
}

.pkgx-access-name[b-fzw080b9w9] {
    display: block;
    margin: 6px 0 4px;
    color: var(--text);
    font-size: .86rem;
    font-weight: 780;
    line-height: 1.25;
}

.pkgx-access-date[b-fzw080b9w9] {
    display: block;
    color: var(--muted);
    font-size: .56rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}


/* ---- the list heading ---- */

.pkgx-section-title[b-fzw080b9w9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-block-start: 12px;
    border-top: 1px solid var(--border);
}

    .pkgx-section-title span[b-fzw080b9w9] {
        color: var(--text);
        font-size: .72rem;
        font-weight: 780;
    }

    .pkgx-section-title small[b-fzw080b9w9] {
        color: var(--muted);
        font-size: .56rem;
        font-weight: 650;
    }


/* ---- one owned package ---- */

.pkgx-package-list[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pkgx-package-item[b-fzw080b9w9] {
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-md);
    background: rgb(185 175 151 / 46%);
    transition: var(--ui-t);
}

    .pkgx-package-item:hover[b-fzw080b9w9] {
        border-color: var(--border-accent);
        background: rgb(245 237 217 / 46%);
    }

.pkgx-package-top[b-fzw080b9w9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pkgx-package-title strong[b-fzw080b9w9] {
    display: block;
    color: var(--text);
    font-size: .82rem;
    font-weight: 780;
    line-height: 1.3;
}

.pkgx-package-title span[b-fzw080b9w9] {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .55rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.pkgx-status[b-fzw080b9w9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--ui-r-pill);
    font-size: .54rem;
    font-weight: 750;
    white-space: nowrap;
}

    .pkgx-status i[b-fzw080b9w9] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .pkgx-status.is-funded[b-fzw080b9w9] {
        color: var(--ui-success);
        background: var(--ui-success-soft);
    }

    .pkgx-status.is-exhausted[b-fzw080b9w9] {
        color: var(--muted);
        background: var(--ui-surface-raised);
    }

    .pkgx-status.is-refunded[b-fzw080b9w9] {
        color: var(--ui-danger);
        background: var(--ui-danger-soft);
    }


/* ---- the three figures ---- */

/*
 * Painted, not left transparent.
 *
 * Every token in this theme is an alpha overlay, so an element with no
 * background of its own shows whatever happens to be behind it - and
 * behind this row, on the dark theme, something is white. That is how a
 * row of dark tiles came out pale grey and the amber one came out cream:
 * rgba(0,0,0,.32) over white is grey, and rgba(251,205,92,.18) over
 * white is cream. Nothing was wrong with the colours; they were
 * compositing onto the wrong ground.
 *
 * Painting it with the same surface its own card uses ends that. It
 * still reads as no slab at all, because the card underneath is the same
 * colour - but now it is opaque to whatever is below, and it cannot
 * disagree with the text sitting on it.
 */
.pkgx-metrics[b-fzw080b9w9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 0;
    margin: 12px 0 10px;
    padding: 10px 4px;
    border-block: 1px solid var(--border);
    border-radius: var(--ui-r-xs);
    background: var(--ui-surface-sunken);
}

/*
 * No fill behind a figure.
 *
 * These were three tinted slabs, and on the dark theme they came out as
 * pale grey blocks with the amber one washing out the number inside it.
 * A filled tile also has to pick a surface token, and the one that suits
 * a chip is wrong at this size - it is meant for something small sitting
 * on a panel, not for a third of the width of a card.
 *
 * Figures separated by hairlines carry the same grouping with none of
 * that, and read as a statement rather than as three buttons. The one
 * that matters is marked by its own colour and weight, which needs no
 * background at all and cannot wash anything out.
 */
.pkgx-metric[b-fzw080b9w9] {
    min-width: 0;
    text-align: center;
    padding: 2px 4px;
    border-inline-start: 1px solid var(--border);
}

    /* the first figure has nothing to its inline start */
    .pkgx-metric:first-child[b-fzw080b9w9] {
        border-inline-start: 0;
    }

    .pkgx-metric span[b-fzw080b9w9] {
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: .53rem;
        font-weight: 700;
    }

    .pkgx-metric strong[b-fzw080b9w9] {
        display: block;
        color: var(--text-secondary);
        font-size: .84rem;
        font-weight: 800;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    /* what is left is the figure people came for */
    .pkgx-metric.primary strong[b-fzw080b9w9] {
        color: var(--accent-text);
        font-size: 1.02rem;
    }

    .pkgx-metric.primary span[b-fzw080b9w9] {
        color: var(--text-secondary);
    }


/* ---- how much of it has been spent ---- */

.pkgx-progress[b-fzw080b9w9] {
    height: 5px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}

    .pkgx-progress > span[b-fzw080b9w9] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--ui-accent-strong);
        transition: width var(--ui-dur-3) var(--ui-ease-out);
    }


/* ---- what the package allows ---- */

.pkgx-package-meta[b-fzw080b9w9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 11px;
}

    .pkgx-package-meta span[b-fzw080b9w9] {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        color: var(--text-secondary);
        font-size: .57rem;
        font-weight: 650;
    }

    .pkgx-package-meta b[b-fzw080b9w9] {
        color: var(--muted);
        font-size: .53rem;
        font-weight: 750;
    }

.pkgx-package-formats[b-fzw080b9w9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
}

.pkgx-formats-label[b-fzw080b9w9] {
    flex: 0 0 auto;
    padding-top: 2px;
    color: var(--muted);
    font-size: .53rem;
    font-weight: 750;
}

.pkgx-format-list[b-fzw080b9w9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

    .pkgx-format-list span[b-fzw080b9w9] {
        padding: 2px 6px;
        border: 1px solid var(--border);
        border-radius: var(--ui-r-xs);
        background: var(--ui-surface-raised);
        color: var(--text-secondary);
        font-size: .5rem;
        font-weight: 750;
        letter-spacing: .03em;
    }


/* ---- the tail of the card ---- */

.pkgx-more[b-fzw080b9w9] {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--accent-text);
    font-size: .57rem;
    font-weight: 750;
    text-decoration: none;
    transition: var(--ui-t);
}

    .pkgx-more:hover[b-fzw080b9w9] {
        background: var(--surface-hover);
    }

.pkgx-non-package[b-fzw080b9w9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--ui-r-sm);
    color: var(--text-secondary);
    font-size: .58rem;
    font-weight: 650;
}

    .pkgx-non-package strong[b-fzw080b9w9] {
        color: var(--text);
        font-size: .74rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

.pkgx-manage[b-fzw080b9w9] {
    /* the card is a grid cell of fixed height, so the action sits on
       the floor of it however few packages there are */
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-raised);
    color: var(--text);
    font-size: .63rem;
    font-weight: 780;
    text-decoration: none;
    transition: var(--ui-t);
}

    .pkgx-manage:hover[b-fzw080b9w9] {
        border-color: var(--border-accent);
        background: var(--credit-bg);
    }

    .pkgx-manage svg[b-fzw080b9w9] {
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
        color: var(--accent-text);
        transition: var(--ui-t);
    }

    .pkgx-manage:hover svg[b-fzw080b9w9] {
        transform: translateX(2px);
    }

/* the arrow points the way the text runs */
.dashboard-page[dir="rtl"] .pkgx-manage svg[b-fzw080b9w9] {
    transform: scaleX(-1);
}

.dashboard-page[dir="rtl"] .pkgx-manage:hover svg[b-fzw080b9w9] {
    transform: scaleX(-1) translateX(2px);
}


/* ---- nothing to show ---- */

.pkgx-empty[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
}

    .pkgx-empty strong[b-fzw080b9w9] {
        color: var(--text-secondary);
        font-size: .66rem;
        font-weight: 700;
    }

    .pkgx-empty a[b-fzw080b9w9] {
        color: var(--accent-text);
        font-size: .58rem;
        font-weight: 750;
        text-decoration: none;
        transition: var(--ui-t);
    }

        .pkgx-empty a:hover[b-fzw080b9w9] {
            text-decoration: underline;
        }

.pkgx-empty-compact[b-fzw080b9w9] {
    padding: 13px 14px;
}


/* ---- narrow: the two summary blocks stop being a row ---- */

/* the card is one column of three, so it keeps its two summary blocks
   side by side until the whole page has stopped being a three-column
   page at all */
@media (max-width: 720px) {
    .pkgx-overview[b-fzw080b9w9] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pkgx-metrics[b-fzw080b9w9] {
        gap: 6px;
    }
}
/* DASHBOARD WORKSPACE REARRANGEMENT - CANONICAL V4 - 2026-09-19 */
/*
 * Layout only.
 *
 * Desktop RTL visual order:
 *   right  = Active translations + Credit activity
 *   center = Packages
 *   left   = Recent translations
 *
 * Important: the right column is a real stretched grid item, but its two
 * cards SHARE the available height instead of making Credit Activity absorb
 * every spare pixel. This keeps the three column bottoms aligned without
 * producing the huge empty ledger card seen in V3.
 */
.dashboard-workspace-grid[b-fzw080b9w9] {
    align-items: stretch;
}

.dashboard-workspace-grid > .dashboard-workspace-stack[b-fzw080b9w9],
.dashboard-workspace-grid > .package-panel[b-fzw080b9w9],
.dashboard-workspace-grid > .recent-translations-panel[b-fzw080b9w9] {
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

.dashboard-workspace-stack[b-fzw080b9w9] {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(max-content, .86fr) minmax(max-content, 1.14fr);
    gap: 22px;
}

.dashboard-workspace-stack > .active-jobs-panel[b-fzw080b9w9],
.dashboard-workspace-stack > .mini-panel[b-fzw080b9w9] {
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
}

/* Keep LIVE WORK compact internally while the grid controls the card height. */
.dashboard-workspace-stack > .active-jobs-panel .dashboard-empty-state.compact[b-fzw080b9w9] {
    min-height: 118px;
    padding-block: 16px;
}

.dashboard-workspace-stack > .active-jobs-panel .dashboard-panel-loading[b-fzw080b9w9] {
    min-height: 118px;
}

/* Preserve the same entrance timing used by the original cards. */
.dashboard-workspace-grid > .dashboard-workspace-stack[b-fzw080b9w9] {
    animation: none;
}

.dashboard-workspace-stack > .active-jobs-panel[b-fzw080b9w9] {
    --card-in: .14s;
    animation: ui-card-in .6s var(--ui-ease-out) var(--card-in) backwards;
}

.dashboard-workspace-stack > .mini-panel[b-fzw080b9w9] {
    --card-in: .28s;
    animation: ui-card-in .6s var(--ui-ease-out) var(--card-in) backwards;
}

/* Recent translations now lives in the narrow desktop column. */
.dashboard-workspace-grid > .recent-translations-panel .recent-meta[b-fzw080b9w9] {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Two-column/tablet layout: return the right stack to natural card heights. */
@media (max-width: 1180px) {
    .dashboard-workspace-stack[b-fzw080b9w9] {
        grid-template-rows: auto auto;
        gap: 15px;
    }

    .dashboard-workspace-grid > .recent-translations-panel[b-fzw080b9w9] {
        grid-column: 1 / -1;
    }
}

/* Single-column layout: everything flows naturally again. */
@media (max-width: 1080px) {
    .dashboard-workspace-grid > .recent-translations-panel[b-fzw080b9w9] {
        grid-column: auto;
    }
}

/* DASHBOARD CREDIT USAGE CHART POLISH V1 - START */

/*
 * The visible plot gets its own quiet stage. All colours still come
 * from the dashboard semantic tokens, so light/dark behavior is unchanged.
 */
.area-figure[b-fzw080b9w9] {
    position: relative;
    padding: 10px 10px 7px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background:
        radial-gradient(
            70% 100% at 86% 0%,
            var(--ui-accent-tint),
            transparent 68%
        ),
        linear-gradient(
            180deg,
            var(--ui-surface-strong),
            var(--ui-surface-sunken)
        );
}

.area-figure[b-fzw080b9w9]::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    inset-block-start: -132px;
    inset-inline-end: -68px;
    border-radius: 50%;
    background: var(--ui-accent);
    opacity: .06;
    pointer-events: none;
}

.area-figure .chart-svg[b-fzw080b9w9],
.area-figure .chart-axis[b-fzw080b9w9] {
    position: relative;
    z-index: 1;
}

.area-figure .chart-svg[b-fzw080b9w9] {
    height: 178px;
}

/*
 * Four quiet reference lines make the trend easier to read without
 * turning the compact dashboard card into an analytical charting screen.
 */
.chart-grid line[b-fzw080b9w9] {
    stroke: var(--ui-line-strong);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    opacity: .42;
    vector-effect: non-scaling-stroke;
}

/* richer depth while remaining fully token-driven */
.chart-fill-top[b-fzw080b9w9] {
    stop-color: var(--ui-accent);
    stop-opacity: .34;
}

.chart-fill-mid[b-fzw080b9w9] {
    stop-color: var(--ui-accent);
    stop-opacity: .13;
}

.chart-fill-bottom[b-fzw080b9w9] {
    stop-color: var(--ui-accent);
    stop-opacity: .015;
}

.chart-area[b-fzw080b9w9] {
    fill: url(#usageFill);
    stroke: none;
    animation: chart-area-reveal-b-fzw080b9w9 .72s var(--ui-ease-out) .08s both;
}

/*
 * A broad, low-opacity stroke sits underneath the real line. It gives
 * the trend separation from the fill without changing the theme colour.
 */
.chart-line-glow[b-fzw080b9w9] {
    fill: none;
    stroke: var(--ui-accent);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .13;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/*
 * Important: no normalized dash mask here.
 * The old pathLength + stroke-dasharray animation could leave portions
 * of the line visually absent on some SVG/browser combinations.
 */
.chart-line[b-fzw080b9w9] {
    fill: none;
    stroke: var(--ui-accent-strong);
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 2px 3px var(--ui-accent-soft));
    animation: chart-line-reveal-b-fzw080b9w9 .68s var(--ui-ease-out) .12s both;
}

.chart-axis[b-fzw080b9w9] {
    padding-inline: 2px;
    color: var(--muted);
}

.chart-axis > span[b-fzw080b9w9] {
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.chart-legend[b-fzw080b9w9] {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    margin-top: 1px;
    padding: 7px 10px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
}

.chart-legend-dot[b-fzw080b9w9] {
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
}

@keyframes chart-line-reveal-b-fzw080b9w9 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes chart-area-reveal-b-fzw080b9w9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .area-figure[b-fzw080b9w9] {
        padding-inline: 7px;
    }

    .area-figure .chart-svg[b-fzw080b9w9] {
        height: 160px;
    }

    .chart-grid line[b-fzw080b9w9] {
        opacity: .30;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chart-line[b-fzw080b9w9],
    .chart-area[b-fzw080b9w9] {
        animation: none;
    }
}

/* DASHBOARD CREDIT USAGE CHART POLISH V1 - END */

/* DASHBOARD CREDIT USAGE CHART LAYOUT TUNE V1 - START */

/*
 * Fine-tune only the chart card layout:
 * - remove dependence on the lower "total" summary row
 * - let the plot occupy more of the available card height
 * - reduce the top breathing room so the drawing feels better fitted
 */

.chart-panel[b-fzw080b9w9] {
    gap: 10px;
}

.chart-panel .dashboard-panel-heading[b-fzw080b9w9] {
    margin-bottom: 8px;
}

.chart-panel .dashboard-panel-heading p[b-fzw080b9w9] {
    margin-top: 4px;
}

.chart-figure[b-fzw080b9w9] {
    flex: 1;
    min-height: 0;
    gap: 6px;
}

.area-figure[b-fzw080b9w9] {
    flex: 1;
    min-height: 0;
    padding: 4px 10px 5px;
}

.area-figure[b-fzw080b9w9]::before {
    inset-block-start: -148px;
    inset-inline-end: -74px;
}

.area-figure .chart-svg[b-fzw080b9w9] {
    height: 202px;
}

.chart-axis[b-fzw080b9w9] {
    padding-inline: 0;
    margin-top: -1px;
}

@media (max-width: 760px) {
    .chart-panel[b-fzw080b9w9] {
        gap: 8px;
    }

    .chart-panel .dashboard-panel-heading[b-fzw080b9w9] {
        margin-bottom: 6px;
    }

    .area-figure[b-fzw080b9w9] {
        padding: 3px 7px 4px;
    }

    .area-figure .chart-svg[b-fzw080b9w9] {
        height: 176px;
    }
}

/* DASHBOARD CREDIT USAGE CHART LAYOUT TUNE V1 - END */


/* =========================================================
   PHONE
   =========================================================
   The rows of recent work gave the file name what was left
   after the status pill and the credit had taken theirs; on a
   375px screen that was "pdf..." and the meta line stacked one
   word per line. On a phone the trailing pair stacks instead,
   and the meta line wraps as a line.
   ========================================================= */

@media (max-width: 720px) {

    .dashboard-hero[b-fzw080b9w9] {
        padding: 20px 18px;
        border-radius: var(--ui-r-lg);
    }

    .active-jobs-panel[b-fzw080b9w9],
    .recent-translations-panel[b-fzw080b9w9],
    .mini-panel[b-fzw080b9w9],
    .chart-panel[b-fzw080b9w9],
    .pkgx-panel[b-fzw080b9w9] {
        padding: 16px;
    }

    .recent-row[b-fzw080b9w9],
    .dashboard-page[dir="rtl"] .recent-row[b-fzw080b9w9] {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 10px;
        padding: 11px 12px;
    }

    .recent-file-icon[b-fzw080b9w9] {
        width: 38px;
        height: 38px;
    }

    .recent-main strong[b-fzw080b9w9] {
        font-size: .82rem;
    }

    .recent-meta[b-fzw080b9w9],
    .dashboard-workspace-grid > .recent-translations-panel .recent-meta[b-fzw080b9w9] {
        flex-wrap: wrap;
        gap: 4px 7px;
        font-size: .64rem;
        white-space: nowrap;
    }

    .recent-trailing[b-fzw080b9w9] {
        flex-direction: column;
        align-items: flex-end;
        gap: 7px;
    }

        .recent-trailing .dashboard-status[b-fzw080b9w9] {
            margin: 0;
        }

    .recent-credit[b-fzw080b9w9] {
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
        font-size: .85rem;
    }
}


/* =========================================================
   WEEKLY TRANSLATIONS
   The week at a glance: the total and how it compares with
   the week before, the busiest day and the daily average,
   then seven bars against a dashed average line. Today is
   the dark bar; the busiest day is the full-gold one.
   ========================================================= */

.wk-panel[b-fzw080b9w9] {
    --wk-plot: 168px;
    --wk-head: 24px;
    --wk-today: var(--ui-dark);
    --wk-today-ink: #fff;
    position: relative;
    overflow: hidden;
}

/* a soft gold light behind the chart, as on the other dashboard cards */
.wk-panel[b-fzw080b9w9]::before {
    content: "";
    position: absolute;
    inset-block-end: -120px;
    inset-inline-start: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ui-accent) 22%, transparent), transparent 70%);
    pointer-events: none;
}

html[data-theme="dark"] .wk-panel[b-fzw080b9w9] {
    --wk-today: var(--ui-ink);
    --wk-today-ink: var(--ui-dark);
}

.wk-summary[b-fzw080b9w9] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: -2px;
}

.wk-total[b-fzw080b9w9] {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.wk-total strong[b-fzw080b9w9] {
    font-size: 2.3rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ui-ink);
    animation: ui-fade .5s var(--ui-ease-out) .1s both;
}

.wk-total span[b-fzw080b9w9] {
    color: var(--ui-muted);
    font-size: .72rem;
    font-weight: 600;
}

.wk-trend[b-fzw080b9w9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--ui-r-pill);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    background: var(--ui-surface-sunken);
    color: var(--ui-ink-2);
}

.wk-trend i[b-fzw080b9w9] {
    font-style: normal;
    font-size: .6rem;
}

.wk-trend small[b-fzw080b9w9] {
    font-size: .64rem;
    font-weight: 600;
    opacity: .8;
}

.wk-trend.is-up[b-fzw080b9w9] {
    background: color-mix(in srgb, var(--ui-success) 13%, transparent);
    color: var(--ui-success);
}

.wk-trend.is-down[b-fzw080b9w9] {
    background: color-mix(in srgb, var(--ui-danger) 12%, transparent);
    color: var(--ui-danger);
}

.wk-facts[b-fzw080b9w9] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ui-muted);
    font-size: .7rem;
    font-weight: 600;
}

.wk-facts b[b-fzw080b9w9] {
    margin-inline-start: 4px;
    color: var(--ui-ink);
    font-weight: 800;
}

.wk-sep[b-fzw080b9w9] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ui-clay-soft);
}

/* ---- the chart ---- */

.wk-chart[b-fzw080b9w9] {
    position: relative;
    margin-top: 6px;
}

/* gridlines and the average line, drawn over the same height the bars use */
.wk-stage[b-fzw080b9w9] {
    position: absolute;
    inset-inline: 0;
    top: var(--wk-head);
    height: calc(var(--wk-plot) - var(--wk-head));
    pointer-events: none;
}

.wk-grid[b-fzw080b9w9] {
    position: absolute;
    inset-inline: 0;
    bottom: calc(var(--g) * 100%);
    border-top: 1px dashed color-mix(in srgb, var(--ui-line) 70%, transparent);
}

.wk-stage[b-fzw080b9w9]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    border-top: 1px solid var(--ui-line);
}

.wk-avg[b-fzw080b9w9] {
    position: absolute;
    inset-inline: 0;
    bottom: calc(var(--a) * 100%);
    border-top: 1.5px dashed var(--ui-accent-strong);
    z-index: 2;
    animation: ui-fade .5s var(--ui-ease-out) .9s both;
}

.wk-avg span[b-fzw080b9w9] {
    position: absolute;
    inset-inline-start: 0;
    top: -9px;
    padding: 1px 8px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-accent);
    color: #3b2f23;
    font-size: .6rem;
    font-weight: 800;
    box-shadow: var(--ui-shadow-sm);
}

.wk-cols[b-fzw080b9w9] {
    position: relative;
    display: flex;
    gap: 8px;
    /* room for the average tag, so it never sits on a bar */
    padding-inline-start: 50px;
}

.wk-col[b-fzw080b9w9] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    outline: none;
    cursor: default;
}

.wk-plot[b-fzw080b9w9] {
    position: relative;
    width: 100%;
    height: var(--wk-plot);
}

/* height from the busiest day; a zero day keeps a small stub so the week still reads as seven days */
.wk-bar[b-fzw080b9w9] {
    position: absolute;
    inset-inline: 14%;
    bottom: 0;
    height: max(6px, calc((var(--wk-plot) - var(--wk-head)) * var(--r)));
    border-radius: 9px 9px 4px 4px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-accent) 78%, transparent),
        color-mix(in srgb, var(--ui-accent-strong) 55%, transparent));
    transform-origin: bottom;
    animation: ui-grow .7s var(--ui-ease-spring) calc(.25s + var(--i) * .07s) both;
    transition: box-shadow var(--ui-dur-2) var(--ui-ease), filter var(--ui-dur-2) var(--ui-ease);
}

.wk-col.is-peak .wk-bar[b-fzw080b9w9] {
    background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-strong));
    box-shadow: var(--ui-shadow-accent);
}

.wk-col.is-today .wk-bar[b-fzw080b9w9] {
    background: var(--wk-today);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--wk-today) 30%, transparent);
}

.wk-col.is-zero .wk-bar[b-fzw080b9w9] {
    background: var(--ui-clay-faint);
    box-shadow: none;
}

.wk-val[b-fzw080b9w9] {
    position: absolute;
    inset-inline: 0;
    bottom: calc(max(6px, calc((var(--wk-plot) - var(--wk-head)) * var(--r))) + 5px);
    text-align: center;
    color: var(--ui-ink-2);
    font-size: .74rem;
    font-weight: 800;
    animation: ui-fade .4s var(--ui-ease-out) calc(.6s + var(--i) * .07s) both;
}

.wk-col.is-today .wk-val[b-fzw080b9w9] {
    color: var(--ui-ink);
}

.wk-col:hover .wk-bar[b-fzw080b9w9],
.wk-col:focus-visible .wk-bar[b-fzw080b9w9] {
    filter: brightness(1.07) saturate(1.12);
}

.wk-col:focus-visible .wk-plot[b-fzw080b9w9] {
    border-radius: var(--ui-r-xs);
    box-shadow: 0 0 0 2px var(--ui-accent-strong);
}

.wk-day[b-fzw080b9w9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.2;
}

.wk-day b[b-fzw080b9w9] {
    color: var(--ui-ink-2);
    font-size: .7rem;
    font-weight: 800;
}

.wk-day small[b-fzw080b9w9] {
    color: var(--ui-muted);
    font-size: .6rem;
    font-weight: 600;
}

.wk-col.is-today .wk-day b[b-fzw080b9w9] {
    padding: 1px 8px;
    border-radius: var(--ui-r-pill);
    background: var(--wk-today);
    color: var(--wk-today-ink);
}

/* the day in full, just above its bar, while the pointer or focus is on it */
.wk-tip[b-fzw080b9w9] {
    position: absolute;
    left: 50%;
    bottom: calc(100% - var(--wk-plot) + max(6px, calc((var(--wk-plot) - var(--wk-head)) * var(--r))) + 26px);
    z-index: 3;
    display: grid;
    gap: 2px;
    min-width: 108px;
    padding: 8px 11px;
    border-radius: var(--ui-r-sm);
    background: var(--ui-dark);
    color: #f6f2e8;
    text-align: center;
    font-size: .66rem;
    white-space: nowrap;
    box-shadow: var(--ui-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease), visibility var(--ui-dur-1);
    pointer-events: none;
}

html[data-theme="dark"] .wk-tip[b-fzw080b9w9] {
    background: #f6f2e8;
    color: #1c1b17;
}

.wk-tip b[b-fzw080b9w9] {
    font-weight: 800;
}

.wk-tip span[b-fzw080b9w9] {
    opacity: .8;
}

.wk-col:hover .wk-tip[b-fzw080b9w9],
.wk-col:focus-visible .wk-tip[b-fzw080b9w9] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 720px) {
    .wk-panel[b-fzw080b9w9] {
        --wk-plot: 150px;
    }

    .wk-total strong[b-fzw080b9w9] {
        font-size: 1.9rem;
    }

    .wk-cols[b-fzw080b9w9] {
        gap: 5px;
        padding-inline-start: 44px;
    }

    .wk-bar[b-fzw080b9w9] {
        inset-inline: 10%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wk-bar[b-fzw080b9w9],
    .wk-val[b-fzw080b9w9],
    .wk-avg[b-fzw080b9w9],
    .wk-total strong[b-fzw080b9w9] {
        animation: none;
    }
}
/* _content/AITranslationPlatform.Web/Components/Documents/Documents.razor.rz.scp.css */
/* =========================================================
   DOCUMENTS — PREMIUM WORKSPACE V1
   Unified with Dashboard / Translation workflow
   ========================================================= */

.documents-page[b-fhb4gjxqc9] {
    --doc-accent: var(--ui-accent, #f4bd3f);
    --doc-accent-strong: var(--ui-accent-strong, #e1a72b);
    --doc-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));
    --doc-accent-tint: var(--ui-accent-tint, rgba(226, 175, 46, .07));

    --doc-text: var(--text, #26231f);
    --doc-text-2: var(--text-secondary, #625d54);
    --doc-muted: var(--muted, #918a7f);

    --doc-surface: var(--surface, #ffffff);
    --doc-surface-raised: var(--ui-surface-raised, #ffffff);
    --doc-surface-strong: var(--ui-surface-strong, #fffdf9);
    --doc-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --doc-line: var(--ui-line, rgba(48, 43, 34, .10));
    --doc-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --doc-success: var(--ui-success, #4a8c61);
    --doc-success-soft: var(--ui-success-tint, rgba(74, 140, 97, .10));
    --doc-warning: var(--ui-warning, #b97814);
    --doc-warning-soft: var(--ui-warning-tint, rgba(185, 120, 20, .10));
    --doc-danger: var(--ui-danger, #b65050);
    --doc-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));

    --doc-shadow-sm: var(--ui-shadow-sm, 0 8px 22px rgba(32, 28, 22, .055));
    --doc-shadow-md: var(--ui-shadow-md, 0 18px 46px rgba(32, 28, 22, .085));

    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 0 0 28px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    color: var(--doc-text);
}


/* =========================================================
   HERO
   ========================================================= */

.documents-hero[b-fhb4gjxqc9] {
    position: relative;

    min-height: 208px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--doc-line);
    border-radius: 28px;

    background:
        radial-gradient(115% 145% at 8% -18%, var(--doc-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(135deg, var(--doc-surface-strong), var(--doc-surface));

    box-shadow: var(--doc-shadow-md);

    animation: documents-card-in-b-fhb4gjxqc9 .62s cubic-bezier(.2,.8,.2,1) .03s backwards;
}

.documents-page[dir="rtl"] .documents-hero[b-fhb4gjxqc9] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--doc-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(225deg, var(--doc-surface-strong), var(--doc-surface));
}

.documents-hero[b-fhb4gjxqc9]::before,
.documents-hero[b-fhb4gjxqc9]::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.documents-hero[b-fhb4gjxqc9]::before {
    width: 285px;
    height: 285px;

    inset-block-start: -184px;
    inset-inline-end: -94px;

    border: 42px solid var(--doc-accent-soft);

    opacity: .78;
}

.documents-hero[b-fhb4gjxqc9]::after {
    width: 154px;
    height: 154px;

    inset-block-end: -101px;
    inset-inline-start: -44px;

    border: 26px solid var(--doc-line-strong);

    opacity: .62;
}

.documents-hero-copy[b-fhb4gjxqc9] {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.documents-eyebrow[b-fhb4gjxqc9] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 9px;
    padding: 6px 11px;

    border: 1px solid rgba(226, 175, 46, .28);
    border-radius: 999px;

    background: var(--doc-surface-raised);

    color: var(--doc-warning);

    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .055em;
}

.documents-eyebrow[b-fhb4gjxqc9]::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--doc-accent-strong);

    box-shadow: 0 0 0 4px var(--doc-accent-soft);
}

.documents-page[dir="rtl"] .documents-eyebrow[b-fhb4gjxqc9] {
    letter-spacing: 0;
}

.documents-hero h1[b-fhb4gjxqc9] {
    margin: 0;

    color: var(--doc-text);

    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.documents-page[dir="rtl"] .documents-hero h1[b-fhb4gjxqc9] {
    letter-spacing: 0;
}

.documents-hero p[b-fhb4gjxqc9] {
    max-width: 760px;

    margin: 11px 0 0;

    color: var(--doc-text-2);

    font-size: .82rem;
    line-height: 1.9;
}

.documents-primary-action[b-fhb4gjxqc9] {
    position: relative;
    z-index: 3;

    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    flex: 0 0 auto;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--doc-accent),
            var(--doc-accent-strong)
        );

    color: #34270f !important;

    font-family: inherit;
    font-size: .68rem;
    font-weight: 850;
    text-decoration: none;

    box-shadow:
        0 12px 26px rgba(226, 175, 46, .22),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.documents-primary-action:hover[b-fhb4gjxqc9] {
    transform: translateY(-2px);

    filter: saturate(1.03);

    box-shadow:
        0 17px 34px rgba(226, 175, 46, .28),
        inset 0 1px 0 rgba(255,255,255,.38);
}

.documents-primary-action svg[b-fhb4gjxqc9] {
    width: 18px;
    height: 18px;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.documents-summary-grid[b-fhb4gjxqc9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.documents-summary-card[b-fhb4gjxqc9] {
    position: relative;

    min-width: 0;
    min-height: 108px;

    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 13px;

    padding: 15px 16px;

    overflow: hidden;

    border: 1px solid var(--doc-line);
    border-radius: 18px;

    background:
        linear-gradient(145deg, var(--doc-accent-tint), transparent 72%),
        var(--doc-surface);

    box-shadow: var(--doc-shadow-sm);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.documents-summary-card[b-fhb4gjxqc9]::after {
    content: "";

    position: absolute;

    width: 78px;
    height: 78px;

    inset-block-start: -38px;
    inset-inline-end: -25px;

    border-radius: 50%;

    background: currentColor;

    opacity: .035;

    pointer-events: none;
}

.documents-summary-card:hover[b-fhb4gjxqc9] {
    transform: translateY(-2px);

    border-color: var(--doc-line-strong);

    box-shadow: var(--doc-shadow-md);
}

.documents-summary-icon[b-fhb4gjxqc9] {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid var(--doc-line);
    border-radius: 14px;

    background: var(--doc-surface-raised);

    color: var(--doc-warning);

    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.documents-summary-card.active .documents-summary-icon[b-fhb4gjxqc9] {
    color: var(--doc-warning);
    background: var(--doc-warning-soft);
}

.documents-summary-card.completed .documents-summary-icon[b-fhb4gjxqc9] {
    color: var(--doc-success);
    background: var(--doc-success-soft);
}

.documents-summary-card.storage .documents-summary-icon[b-fhb4gjxqc9] {
    color: #7b6b4f;
    background: rgba(123,107,79,.10);
}

.documents-summary-icon svg[b-fhb4gjxqc9] {
    width: 21px;
    height: 21px;
}

.documents-summary-card > div:last-child[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-summary-label[b-fhb4gjxqc9] {
    display: block;

    margin-bottom: 3px;

    color: var(--doc-text-2);

    font-size: .60rem;
    font-weight: 760;
}

.documents-summary-card strong[b-fhb4gjxqc9] {
    display: block;

    color: var(--doc-text);

    font-size: 1.42rem;
    font-weight: 880;
    line-height: 1.12;

    font-variant-numeric: tabular-nums;
}

.documents-summary-card .documents-summary-size[b-fhb4gjxqc9] {
    font-size: 1.05rem;
}

.documents-summary-card small[b-fhb4gjxqc9] {
    display: block;

    margin-top: 5px;

    color: var(--doc-muted);

    font-size: .54rem;
    line-height: 1.45;
}


/* =========================================================
   STATE CARDS
   ========================================================= */

.documents-state-card[b-fhb4gjxqc9] {
    min-height: 140px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;

    padding: 24px 26px;

    border: 1px solid var(--doc-line);
    border-radius: 22px;

    background: var(--doc-surface);

    box-shadow: var(--doc-shadow-sm);
}

.documents-state-card > div[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-state-card strong[b-fhb4gjxqc9] {
    display: block;

    color: var(--doc-text);

    font-size: .78rem;
    font-weight: 820;
}

.documents-state-card p[b-fhb4gjxqc9] {
    max-width: 640px;

    margin: 5px 0 0;

    color: var(--doc-muted);

    font-size: .61rem;
    line-height: 1.75;
}

.documents-spinner[b-fhb4gjxqc9] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border: 3px solid var(--doc-accent-soft);
    border-top-color: var(--doc-accent-strong);
    border-radius: 50%;

    animation: documents-spin-b-fhb4gjxqc9 .75s linear infinite;
}

@keyframes documents-spin-b-fhb4gjxqc9 {
    to {
        transform: rotate(360deg);
    }
}

.documents-error-card[b-fhb4gjxqc9] {
    align-items: flex-start;
    min-height: 0;
}

.documents-error-icon[b-fhb4gjxqc9] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--doc-danger-soft);

    color: var(--doc-danger);

    font-size: 1rem;
    font-weight: 900;
}

.documents-secondary-button[b-fhb4gjxqc9] {
    min-height: 36px;

    margin-top: 11px;
    padding: 0 13px;

    border: 1px solid var(--doc-line-strong);
    border-radius: 11px;

    background: var(--doc-surface-raised);

    color: var(--doc-text-2);

    font-family: inherit;
    font-size: .60rem;
    font-weight: 800;

    cursor: pointer;

    transition: .17s ease;
}

.documents-secondary-button:hover:not(:disabled)[b-fhb4gjxqc9] {
    transform: translateY(-1px);

    border-color: var(--doc-accent-strong);

    color: var(--doc-warning);

    box-shadow: var(--doc-shadow-sm);
}


/* =========================================================
   LIBRARY
   ========================================================= */

.documents-library-card[b-fhb4gjxqc9] {
    overflow: hidden;

    border: 1px solid var(--doc-line);
    border-radius: 24px;

    background: var(--doc-surface);

    box-shadow: var(--doc-shadow-sm);

    animation: documents-card-in-b-fhb4gjxqc9 .58s cubic-bezier(.2,.8,.2,1) .12s backwards;
}

.documents-library-heading[b-fhb4gjxqc9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px 17px;

    border-bottom: 1px solid var(--doc-line);
}

.documents-section-kicker[b-fhb4gjxqc9] {
    display: block;

    margin-bottom: 6px;

    color: var(--doc-warning);

    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .07em;
}

.documents-page[dir="rtl"] .documents-section-kicker[b-fhb4gjxqc9] {
    letter-spacing: 0;
}

.documents-library-heading h2[b-fhb4gjxqc9] {
    margin: 0;

    color: var(--doc-text);

    font-size: 1.05rem;
    font-weight: 840;
}

.documents-library-heading p[b-fhb4gjxqc9] {
    margin: 5px 0 0;

    color: var(--doc-muted);

    font-size: .63rem;
    line-height: 1.65;
}

.documents-library-heading-actions[b-fhb4gjxqc9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;
}

.documents-result-count[b-fhb4gjxqc9] {
    flex: 0 0 auto;

    padding: 7px 10px;

    border: 1px solid var(--doc-line);
    border-radius: 999px;

    background: var(--doc-surface-soft);

    color: var(--doc-text-2);

    font-size: .58rem;
    font-weight: 760;
}

.documents-refresh-button[b-fhb4gjxqc9] {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--doc-line);
    border-radius: 10px;

    background: var(--doc-surface-raised);

    color: var(--doc-text-2);

    cursor: pointer;

    transition: .17s ease;
}

.documents-refresh-button:hover:not(:disabled)[b-fhb4gjxqc9] {
    transform: translateY(-1px);

    border-color: var(--doc-accent-strong);

    background: var(--doc-accent-soft);

    color: var(--doc-warning);
}

.documents-refresh-button:disabled[b-fhb4gjxqc9] {
    opacity: .5;
    cursor: default;
}

.documents-refresh-button svg[b-fhb4gjxqc9] {
    width: 16px;
    height: 16px;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.documents-toolbar[b-fhb4gjxqc9] {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.2fr)
        minmax(145px, .34fr)
        minmax(135px, .32fr)
        minmax(145px, .34fr);
    gap: 9px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--doc-line);

    background:
        linear-gradient(180deg, var(--doc-surface-soft), transparent);
}

.documents-search[b-fhb4gjxqc9],
.documents-filter[b-fhb4gjxqc9] {
    min-width: 0;

    display: flex;
    align-items: center;

    border: 1px solid var(--doc-line);
    border-radius: 12px;

    background: var(--doc-surface-raised);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.documents-search:focus-within[b-fhb4gjxqc9],
.documents-filter:focus-within[b-fhb4gjxqc9] {
    border-color: var(--doc-accent-strong);

    box-shadow: 0 0 0 3px var(--doc-accent-soft);
}

.documents-search[b-fhb4gjxqc9] {
    min-height: 42px;

    gap: 8px;

    padding: 0 11px;
}

.documents-search svg[b-fhb4gjxqc9] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;

    color: var(--doc-muted);
}

.documents-search input[b-fhb4gjxqc9] {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--doc-text);

    font-family: inherit;
    font-size: .68rem;
}

.documents-search input[b-fhb4gjxqc9]::placeholder {
    color: var(--doc-muted);
}

.documents-filter[b-fhb4gjxqc9] {
    position: relative;

    min-height: 42px;
}

.documents-filter > span[b-fhb4gjxqc9] {
    position: absolute;

    inset-inline-start: 10px;
    top: 5px;

    pointer-events: none;

    color: var(--doc-muted);

    font-size: .45rem;
    font-weight: 700;
}

.documents-filter select[b-fhb4gjxqc9] {
    width: 100%;
    height: 100%;

    padding: 15px 38px 2px 10px;
    padding-inline-start: 10px;
    padding-inline-end: 38px;

    border: 0;
    outline: 0;

    appearance: none;

    background: transparent;

    color: var(--doc-text);

    font-family: inherit;
    font-size: .62rem;
    font-weight: 720;
}

.documents-filter-arrow[b-fhb4gjxqc9] {
    position: absolute;

    inset-inline-end: 12px;
    top: 50%;

    width: 14px;
    height: 14px;

    color: var(--doc-text-2);

    transform: translateY(-45%);

    pointer-events: none;
}


/* =========================================================
   BULK SELECTION
   ========================================================= */

.documents-bulk-actions[b-fhb4gjxqc9] {
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;

    padding: 8px 14px;

    border-bottom: 1px solid var(--doc-line);

    background: var(--doc-surface-soft);

    transition:
        background .18s ease,
        border-color .18s ease;
}

.documents-bulk-actions.has-selection[b-fhb4gjxqc9] {
    border-bottom-color: rgba(226, 175, 46, .20);

    background:
        linear-gradient(90deg, var(--doc-accent-tint), transparent 70%);
}

.documents-bulk-selection-group[b-fhb4gjxqc9],
.documents-bulk-command-group[b-fhb4gjxqc9] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}

.documents-bulk-command-group[b-fhb4gjxqc9] {
    flex: 0 0 auto;
}

.documents-select-all[b-fhb4gjxqc9] {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 5px 7px;
    margin: -5px -7px;

    border-radius: 10px;

    color: var(--doc-text-2);

    cursor: pointer;

    transition: .16s ease;
}

.documents-select-all:hover[b-fhb4gjxqc9] {
    background: var(--doc-accent-soft);
    color: var(--doc-warning);
}

.documents-select-all input[b-fhb4gjxqc9],
.documents-row-select input[b-fhb4gjxqc9] {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;
}

.documents-checkmark[b-fhb4gjxqc9] {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;

    display: grid;
    place-items: center;

    border: 1px solid var(--doc-line-strong);
    border-radius: 6px;

    background: var(--doc-surface-raised);

    color: transparent;

    box-shadow: 0 2px 6px rgba(25,31,42,.035);

    transition: .16s ease;
}

.documents-checkmark svg[b-fhb4gjxqc9] {
    width: 12px;
    height: 12px;
}

.documents-select-all input:checked + .documents-checkmark[b-fhb4gjxqc9],
.documents-row-select input:checked + .documents-checkmark[b-fhb4gjxqc9] {
    border-color: var(--doc-accent-strong);

    background:
        linear-gradient(
            135deg,
            var(--doc-accent),
            var(--doc-accent-strong)
        );

    color: #34270f;

    box-shadow: 0 4px 10px rgba(226,175,46,.18);
}

.documents-select-all-copy[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-select-all-copy strong[b-fhb4gjxqc9] {
    display: block;

    color: var(--doc-text);

    font-size: .60rem;
    font-weight: 800;
    line-height: 1.2;
}

.documents-select-all-copy small[b-fhb4gjxqc9] {
    display: block;

    margin-top: 3px;

    color: var(--doc-muted);

    font-size: .47rem;
    font-weight: 650;
    line-height: 1.2;
}

.documents-selection-divider[b-fhb4gjxqc9] {
    width: 1px;
    height: 24px;
    flex: 0 0 1px;

    background: var(--doc-line-strong);
}

.documents-selection-count[b-fhb4gjxqc9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 5px 9px;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 10px;

    background: var(--doc-accent-tint);

    color: var(--doc-warning);
}

.documents-selection-count-icon[b-fhb4gjxqc9] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--doc-accent-soft);

    color: var(--doc-warning);
}

.documents-selection-count-icon svg[b-fhb4gjxqc9] {
    width: 14px;
    height: 14px;
}

.documents-selection-count strong[b-fhb4gjxqc9] {
    display: inline;

    color: var(--doc-warning);

    font-size: .64rem;
    font-weight: 850;
}

.documents-selection-count small[b-fhb4gjxqc9] {
    margin-inline-start: 4px;

    color: var(--doc-text-2);

    font-size: .52rem;
    font-weight: 700;
}

.documents-clear-selection[b-fhb4gjxqc9],
.documents-bulk-delete[b-fhb4gjxqc9] {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 11px;

    border-radius: 10px;

    font-family: inherit;
    font-size: .56rem;
    font-weight: 800;

    cursor: pointer;

    transition: .16s ease;
}

.documents-clear-selection[b-fhb4gjxqc9] {
    border: 1px solid var(--doc-line-strong);

    background: var(--doc-surface-raised);

    color: var(--doc-text-2);
}

.documents-clear-selection:hover[b-fhb4gjxqc9] {
    transform: translateY(-1px);

    border-color: var(--doc-accent-strong);

    color: var(--doc-warning);
}

.documents-bulk-delete[b-fhb4gjxqc9] {
    border: 1px solid rgba(182,80,80,.20);

    background: var(--doc-danger-soft);

    color: var(--doc-danger);
}

.documents-bulk-delete:hover[b-fhb4gjxqc9] {
    transform: translateY(-1px);

    border-color: rgba(182,80,80,.30);

    box-shadow: 0 7px 15px rgba(182,80,80,.08);
}

.documents-bulk-delete svg[b-fhb4gjxqc9] {
    width: 15px;
    height: 15px;
}


/* =========================================================
   TABLE / WORKSPACE
   ========================================================= */

.documents-table[b-fhb4gjxqc9] {
    width: 100%;

    display: grid;
    gap: 8px;

    padding: 0 10px 11px;
}

.documents-table-head[b-fhb4gjxqc9],
.documents-row[b-fhb4gjxqc9] {
    display: grid;
    grid-template-columns:
        minmax(250px, 1.7fr)
        minmax(100px, .70fr)
        minmax(100px, .70fr)
        minmax(145px, .92fr)
        minmax(90px, .55fr)
        minmax(110px, .66fr)
        122px;
    align-items: center;
    gap: 11px;
}

.documents-table-head[b-fhb4gjxqc9] {
    min-height: 40px;

    margin: 0 -10px 0;
    padding: 0 18px;

    border-bottom: 1px solid var(--doc-line);

    background: var(--doc-surface-soft);

    color: var(--doc-muted);

    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .035em;
}

.documents-page[dir="rtl"] .documents-table-head[b-fhb4gjxqc9] {
    letter-spacing: 0;
}

.documents-table-head-action[b-fhb4gjxqc9] {
    text-align: center;
}

.documents-row[b-fhb4gjxqc9] {
    position: relative;

    min-height: 78px;

    padding: 11px 12px;

    border: 1px solid transparent;
    border-radius: 15px;

    background: transparent;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.documents-row:hover[b-fhb4gjxqc9] {
    transform: translateY(-1px);

    border-color: var(--doc-line);

    background:
        linear-gradient(90deg, var(--doc-accent-tint), transparent 72%),
        var(--doc-surface-strong);

    box-shadow: var(--doc-shadow-sm);
}

.documents-row.is-selected[b-fhb4gjxqc9] {
    border-color: rgba(226,175,46,.24);

    background:
        linear-gradient(90deg, var(--doc-accent-soft), transparent 72%),
        var(--doc-surface-strong);

    box-shadow:
        inset 3px 0 0 var(--doc-accent-strong),
        var(--doc-shadow-sm);
}

.documents-page[dir="rtl"] .documents-row.is-selected[b-fhb4gjxqc9] {
    box-shadow:
        inset -3px 0 0 var(--doc-accent-strong),
        var(--doc-shadow-sm);
}


/* =========================================================
   FILE
   ========================================================= */

.documents-file-cell[b-fhb4gjxqc9] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.documents-row-select[b-fhb4gjxqc9] {
    width: 28px;
    height: 32px;
    flex: 0 0 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    cursor: pointer;

    transition: .16s ease;
}

.documents-row-select:hover[b-fhb4gjxqc9] {
    background: var(--doc-accent-soft);
}

.documents-row-select .documents-checkmark[b-fhb4gjxqc9] {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.documents-row-select input:disabled + .documents-checkmark[b-fhb4gjxqc9] {
    opacity: .34;
    background: var(--doc-surface-soft);
    box-shadow: none;
}

.documents-row-select:has(input:disabled)[b-fhb4gjxqc9] {
    cursor: not-allowed;
}

.documents-file-icon[b-fhb4gjxqc9] {
    position: relative;

    width: 43px;
    height: 47px;
    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border: 1px solid var(--doc-line);
    border-radius: 12px;

    background: var(--doc-surface-soft);

    color: #7f7357;
}

.documents-file-icon svg[b-fhb4gjxqc9] {
    width: 20px;
    height: 20px;

    transform: translateY(-5px);
}

.documents-file-icon small[b-fhb4gjxqc9] {
    position: absolute;

    inset-inline: 5px;
    bottom: 4px;

    overflow: hidden;

    color: currentColor;

    font-size: .42rem;
    font-weight: 900;
    line-height: 1;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-pdf[b-fhb4gjxqc9] {
    background: rgba(182,80,80,.08);
    color: #b65050;
}

.file-word[b-fhb4gjxqc9] {
    background: rgba(69,101,160,.08);
    color: #526d9d;
}

.file-powerpoint[b-fhb4gjxqc9] {
    background: rgba(177,102,54,.08);
    color: #a66b43;
}

.file-text[b-fhb4gjxqc9] {
    background: rgba(102,96,84,.08);
    color: #716b61;
}

.file-subtitle[b-fhb4gjxqc9] {
    background: rgba(110,88,146,.08);
    color: #776590;
}

.documents-file-copy[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-file-copy strong[b-fhb4gjxqc9] {
    display: block;

    overflow: hidden;

    color: var(--doc-text);

    font-size: .68rem;
    font-weight: 820;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-file-copy span[b-fhb4gjxqc9] {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: var(--doc-muted);

    font-size: .53rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   LANGUAGE / DETAILS
   ========================================================= */

.documents-language-cell[b-fhb4gjxqc9] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--doc-text-2);

    font-size: .57rem;
    font-weight: 800;
}

.documents-language-cell span[b-fhb4gjxqc9] {
    min-width: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 7px;

    border: 1px solid var(--doc-line);
    border-radius: 8px;

    background: var(--doc-surface-soft);
}

.documents-language-cell .documents-language-target[b-fhb4gjxqc9] {
    border-color: rgba(226,175,46,.18);

    background: var(--doc-accent-soft);

    color: var(--doc-warning);
}

.documents-language-cell svg[b-fhb4gjxqc9] {
    width: 13px;
    height: 13px;

    color: var(--doc-muted);
}

.documents-detail-cell[b-fhb4gjxqc9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    color: var(--doc-text-2);

    font-size: .57rem;
    font-weight: 650;
}

.documents-ocr-badge[b-fhb4gjxqc9] {
    padding: 3px 6px;

    border-radius: 6px;

    background: rgba(110,88,146,.08);

    color: #776590;

    font-size: .45rem;
    font-weight: 850;
}


/* =========================================================
   STATUS
   ========================================================= */

.documents-status-cell[b-fhb4gjxqc9] {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.documents-status[b-fhb4gjxqc9] {
    width: max-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 8px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: .52rem;
    font-weight: 800;

    white-space: nowrap;
}

.documents-status i[b-fhb4gjxqc9] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;

    border-radius: 50%;

    background: currentColor;
}

.documents-status.active[b-fhb4gjxqc9] {
    border-color: rgba(185,120,20,.12);
    background: var(--doc-warning-soft);
    color: var(--doc-warning);
}

.documents-status.completed[b-fhb4gjxqc9] {
    border-color: rgba(74,140,97,.12);
    background: var(--doc-success-soft);
    color: var(--doc-success);
}

.documents-status.failed[b-fhb4gjxqc9] {
    border-color: rgba(182,80,80,.12);
    background: var(--doc-danger-soft);
    color: var(--doc-danger);
}

.documents-status.cancelled[b-fhb4gjxqc9] {
    border-color: var(--doc-line);
    background: var(--doc-surface-soft);
    color: var(--doc-muted);
}

.documents-status.ready[b-fhb4gjxqc9] {
    border-color: rgba(226,175,46,.16);
    background: var(--doc-accent-soft);
    color: var(--doc-warning);
}

.documents-progress[b-fhb4gjxqc9] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 6px;
}

.documents-progress > span[b-fhb4gjxqc9] {
    width: 76px;
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--doc-line);
}

.documents-progress > span i[b-fhb4gjxqc9] {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--ui-progress-fill);
}

.documents-progress small[b-fhb4gjxqc9] {
    color: var(--doc-muted);

    font-size: .47rem;
}


/* =========================================================
   CREDITS / DATE
   ========================================================= */

.documents-credits-cell[b-fhb4gjxqc9],
.documents-date-cell[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-credits-cell strong[b-fhb4gjxqc9],
.documents-date-cell strong[b-fhb4gjxqc9] {
    display: block;

    color: var(--doc-text);

    font-size: .60rem;
    font-weight: 820;
}

.documents-credits-cell small[b-fhb4gjxqc9],
.documents-date-cell small[b-fhb4gjxqc9] {
    display: block;

    margin-top: 3px;

    color: var(--doc-muted);

    font-size: .49rem;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.documents-actions-cell[b-fhb4gjxqc9] {
    min-width: 0;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding-inline: 3px;
}

.documents-row-action[b-fhb4gjxqc9] {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;

    display: grid;
    place-items: center;

    padding: 0;
    margin: 0;

    border: 1px solid var(--doc-line);
    border-radius: 10px;

    background: var(--doc-surface-raised);

    color: var(--doc-text-2);

    font-family: inherit;
    font-size: 0;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition: .16s ease;
}

.documents-row-action svg[b-fhb4gjxqc9] {
    width: 15px;
    height: 15px;
}

.documents-row-action:hover[b-fhb4gjxqc9] {
    transform: translateY(-1px);

    border-color: var(--doc-accent-strong);

    background: var(--doc-accent-soft);

    color: var(--doc-warning);
}

.documents-row-download:hover[b-fhb4gjxqc9] {
    border-color: rgba(74,140,97,.22);

    background: var(--doc-success-soft);

    color: var(--doc-success);
}

.documents-row-delete:hover:not(:disabled)[b-fhb4gjxqc9] {
    border-color: rgba(182,80,80,.22);

    background: var(--doc-danger-soft);

    color: var(--doc-danger);
}

.documents-row-delete:disabled[b-fhb4gjxqc9] {
    opacity: .34;
    cursor: not-allowed;
}


/* =========================================================
   EMPTY
   ========================================================= */

.documents-empty[b-fhb4gjxqc9] {
    min-height: 265px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 30px;

    text-align: center;
}

.documents-empty-icon[b-fhb4gjxqc9] {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 18px;

    background: var(--doc-accent-soft);

    color: var(--doc-warning);

    box-shadow: var(--doc-shadow-sm);
}

.documents-empty-icon svg[b-fhb4gjxqc9] {
    width: 26px;
    height: 26px;
}

.documents-empty h3[b-fhb4gjxqc9] {
    margin: 0;

    color: var(--doc-text);

    font-size: .95rem;
    font-weight: 830;
}

.documents-empty p[b-fhb4gjxqc9] {
    max-width: 520px;

    margin: -4px 0 2px;

    color: var(--doc-muted);

    font-size: .63rem;
    line-height: 1.7;
}

.documents-empty-filtered[b-fhb4gjxqc9] {
    min-height: 220px;
}


/* =========================================================
   DELETE DIALOG
   ========================================================= */

.documents-modal-backdrop[b-fhb4gjxqc9] {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 24px;

    background: rgba(20,18,14,.38);

    backdrop-filter: blur(8px);
}

.documents-delete-dialog[b-fhb4gjxqc9] {
    width: min(100%, 520px);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 17px;

    padding: 23px;

    border: 1px solid var(--doc-line-strong);
    border-radius: 22px;

    background: var(--doc-surface-raised);

    color: var(--doc-text);

    box-shadow: 0 28px 80px rgba(20,18,14,.24);

    animation: documents-dialog-in-b-fhb4gjxqc9 .30s cubic-bezier(.2,.8,.2,1) both;
}

.documents-delete-dialog-icon[b-fhb4gjxqc9] {
    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: var(--doc-danger-soft);

    color: var(--doc-danger);
}

.documents-delete-dialog-icon svg[b-fhb4gjxqc9] {
    width: 21px;
    height: 21px;
}

.documents-delete-dialog-copy[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-delete-dialog-kicker[b-fhb4gjxqc9] {
    display: block;

    margin-bottom: 5px;

    color: var(--doc-danger);

    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.documents-delete-dialog h3[b-fhb4gjxqc9] {
    margin: 0;

    color: var(--doc-text);

    font-size: 1.02rem;
    font-weight: 850;
}

.documents-delete-dialog p[b-fhb4gjxqc9] {
    margin: 8px 0 0;

    color: var(--doc-text-2);

    font-size: .64rem;
    line-height: 1.8;
}

.documents-delete-file[b-fhb4gjxqc9],
.documents-bulk-delete-summary[b-fhb4gjxqc9] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 16px;
    padding: 11px 12px;

    border: 1px solid var(--doc-line);
    border-radius: 14px;

    background: var(--doc-surface-soft);
}

.documents-bulk-delete-summary[b-fhb4gjxqc9] {
    border-color: rgba(182,80,80,.12);

    background:
        linear-gradient(135deg, var(--doc-danger-soft), var(--doc-surface-soft));
}

.documents-bulk-delete-summary-icon[b-fhb4gjxqc9] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: var(--doc-danger-soft);

    color: var(--doc-danger);
}

.documents-bulk-delete-summary-icon svg[b-fhb4gjxqc9] {
    width: 18px;
    height: 18px;
}

.documents-delete-file .documents-file-icon[b-fhb4gjxqc9] {
    width: 40px;
    height: 44px;
}

.documents-delete-file > div[b-fhb4gjxqc9],
.documents-bulk-delete-summary > div[b-fhb4gjxqc9] {
    min-width: 0;
}

.documents-delete-file strong[b-fhb4gjxqc9],
.documents-bulk-delete-summary strong[b-fhb4gjxqc9] {
    display: block;

    overflow: hidden;

    color: var(--doc-text);

    font-size: .66rem;
    font-weight: 820;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-delete-file > div > span[b-fhb4gjxqc9],
.documents-bulk-delete-summary span:not(.documents-bulk-delete-summary-icon)[b-fhb4gjxqc9] {
    display: block;

    margin-top: 4px;

    color: var(--doc-muted);

    font-size: .52rem;
    line-height: 1.55;
}

.documents-delete-error[b-fhb4gjxqc9] {
    margin-top: 12px;
    padding: 10px 11px;

    border: 1px solid rgba(182,80,80,.16);
    border-radius: 10px;

    background: var(--doc-danger-soft);

    color: var(--doc-danger);

    font-size: .58rem;
    font-weight: 700;
    line-height: 1.7;
}

.documents-delete-dialog-actions[b-fhb4gjxqc9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 18px;
}

.documents-delete-cancel[b-fhb4gjxqc9],
.documents-delete-confirm[b-fhb4gjxqc9] {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 14px;

    border-radius: 11px;

    font-family: inherit;
    font-size: .61rem;
    font-weight: 800;

    cursor: pointer;
}

.documents-delete-cancel[b-fhb4gjxqc9] {
    border: 1px solid var(--doc-line-strong);

    background: var(--doc-surface-raised);

    color: var(--doc-text-2);
}

.documents-delete-confirm[b-fhb4gjxqc9] {
    border: 1px solid rgba(182,80,80,.28);

    background:
        linear-gradient(180deg, #c86565, #b84d4d);

    color: #fff;

    box-shadow: 0 9px 20px rgba(182,80,80,.18);
}

.documents-delete-confirm svg[b-fhb4gjxqc9] {
    width: 16px;
    height: 16px;
}

.documents-delete-cancel:disabled[b-fhb4gjxqc9],
.documents-delete-confirm:disabled[b-fhb4gjxqc9] {
    opacity: .58;
    cursor: wait;
}

.documents-delete-spinner[b-fhb4gjxqc9] {
    width: 14px;
    height: 14px;

    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;

    animation: documents-spin-b-fhb4gjxqc9 .7s linear infinite;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .documents-page[b-fhb4gjxqc9] {
    --doc-text: var(--text, #f1eee8);
    --doc-text-2: var(--text-secondary, #c6bfb3);
    --doc-muted: var(--muted, #918a7f);

    --doc-surface: var(--surface, rgba(255,255,255,.025));
    --doc-surface-raised: var(--ui-surface-raised, rgba(255,255,255,.04));
    --doc-surface-strong: var(--ui-surface-strong, rgba(255,255,255,.035));
    --doc-surface-soft: var(--ui-surface-sunken, rgba(255,255,255,.022));

    --doc-line: var(--ui-line, rgba(255,255,255,.07));
    --doc-line-strong: var(--ui-line-strong, rgba(255,255,255,.11));

    --doc-shadow-sm: 0 12px 28px rgba(0,0,0,.13);
    --doc-shadow-md: 0 22px 50px rgba(0,0,0,.20);
}

html[data-theme="dark"] .documents-hero[b-fhb4gjxqc9],
html[data-theme="dark"] .documents-summary-card[b-fhb4gjxqc9],
html[data-theme="dark"] .documents-library-card[b-fhb4gjxqc9],
html[data-theme="dark"] .documents-state-card[b-fhb4gjxqc9] {
    background-color: transparent;
}

html[data-theme="dark"] .documents-filter select option[b-fhb4gjxqc9] {
    background: #26231f;
    color: #f1eee8;
}

html[data-theme="dark"] .documents-modal-backdrop[b-fhb4gjxqc9] {
    background: rgba(6,5,4,.62);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .documents-summary-grid[b-fhb4gjxqc9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .documents-toolbar[b-fhb4gjxqc9] {
        grid-template-columns:
            minmax(240px, 1fr)
            repeat(3, minmax(125px, .38fr));
    }

    .documents-table-head[b-fhb4gjxqc9],
    .documents-row[b-fhb4gjxqc9] {
        grid-template-columns:
            minmax(220px, 1.55fr)
            minmax(95px, .7fr)
            minmax(130px, .85fr)
            minmax(86px, .55fr)
            minmax(105px, .68fr)
            122px;
    }

    .documents-table-head > :nth-child(3)[b-fhb4gjxqc9],
    .documents-row > :nth-child(3)[b-fhb4gjxqc9] {
        display: none;
    }
}

@media (max-width: 900px) {
    .documents-hero[b-fhb4gjxqc9] {
        min-height: 0;

        align-items: flex-start;
    }

    .documents-toolbar[b-fhb4gjxqc9] {
        grid-template-columns: 1fr 1fr;
    }

    .documents-search[b-fhb4gjxqc9] {
        grid-column: 1 / -1;
    }

    .documents-table-head[b-fhb4gjxqc9] {
        display: none;
    }

    .documents-table[b-fhb4gjxqc9] {
        gap: 9px;
        padding: 12px;
    }

    .documents-row[b-fhb4gjxqc9] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 13px;

        min-height: 0;

        padding: 14px;

        border-color: var(--doc-line);

        background: var(--doc-surface-strong);
    }

    .documents-file-cell[b-fhb4gjxqc9] {
        grid-column: 1 / -1;
    }

    .documents-actions-cell[b-fhb4gjxqc9] {
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .documents-bulk-actions[b-fhb4gjxqc9] {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;

        padding: 10px 12px;
    }

    .documents-bulk-selection-group[b-fhb4gjxqc9] {
        width: 100%;
        flex-wrap: wrap;
    }

    .documents-bulk-command-group[b-fhb4gjxqc9] {
        width: 100%;
    }

    .documents-clear-selection[b-fhb4gjxqc9],
    .documents-bulk-delete[b-fhb4gjxqc9] {
        flex: 1 1 0;
    }
}

@media (max-width: 650px) {
    .documents-page[b-fhb4gjxqc9] {
        gap: 14px;
    }

    .documents-hero[b-fhb4gjxqc9] {
        flex-direction: column;

        padding: 22px 19px;

        border-radius: 21px;
    }

    .documents-hero p[b-fhb4gjxqc9] {
        font-size: .76rem;
    }

    .documents-primary-action[b-fhb4gjxqc9] {
        width: 100%;
    }

    .documents-summary-grid[b-fhb4gjxqc9] {
        grid-template-columns: 1fr;
    }

    .documents-summary-card[b-fhb4gjxqc9] {
        min-height: 94px;
    }

    .documents-library-heading[b-fhb4gjxqc9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .documents-library-heading-actions[b-fhb4gjxqc9] {
        width: 100%;
        justify-content: space-between;
    }

    .documents-toolbar[b-fhb4gjxqc9] {
        grid-template-columns: 1fr;
    }

    .documents-search[b-fhb4gjxqc9],
    .documents-sort[b-fhb4gjxqc9] {
        grid-column: auto;
    }

    .documents-row[b-fhb4gjxqc9] {
        grid-template-columns: 1fr 1fr;
    }

    .documents-file-cell[b-fhb4gjxqc9],
    .documents-status-cell[b-fhb4gjxqc9],
    .documents-actions-cell[b-fhb4gjxqc9] {
        grid-column: 1 / -1;
    }

    .documents-actions-cell[b-fhb4gjxqc9] {
        justify-content: flex-start;

        padding-top: 3px;
    }

    .documents-progress > span[b-fhb4gjxqc9] {
        width: 110px;
    }

    .documents-modal-backdrop[b-fhb4gjxqc9] {
        padding: 14px;
    }

    .documents-delete-dialog[b-fhb4gjxqc9] {
        grid-template-columns: 1fr;
        gap: 13px;

        padding: 19px;
    }

    .documents-delete-dialog-actions[b-fhb4gjxqc9] {
        flex-direction: column-reverse;
    }

    .documents-delete-cancel[b-fhb4gjxqc9],
    .documents-delete-confirm[b-fhb4gjxqc9] {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .documents-selection-divider[b-fhb4gjxqc9] {
        display: none;
    }

    .documents-selection-count[b-fhb4gjxqc9] {
        width: 100%;
    }

    .documents-bulk-command-group[b-fhb4gjxqc9] {
        flex-direction: column-reverse;
    }

    .documents-clear-selection[b-fhb4gjxqc9],
    .documents-bulk-delete[b-fhb4gjxqc9] {
        width: 100%;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes documents-card-in-b-fhb4gjxqc9 {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.995);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes documents-dialog-in-b-fhb4gjxqc9 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .documents-hero[b-fhb4gjxqc9],
    .documents-library-card[b-fhb4gjxqc9],
    .documents-primary-action[b-fhb4gjxqc9],
    .documents-summary-card[b-fhb4gjxqc9],
    .documents-row[b-fhb4gjxqc9],
    .documents-row-action[b-fhb4gjxqc9],
    .documents-delete-dialog[b-fhb4gjxqc9] {
        animation: none !important;
        transition: none !important;
    }

    .documents-spinner[b-fhb4gjxqc9] {
        animation-duration: 1.6s;
    }
}


/* =========================================================
   RETENTION NOTICE
   Shown only while automatic deletion is on.
   ========================================================= */

.documents-retention-notice[b-fhb4gjxqc9] {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;

    border: 1px solid var(--doc-line);
    border-radius: 16px;

    background: var(--doc-warning-soft);
}

.documents-retention-icon[b-fhb4gjxqc9] {
    display: grid;
    place-items: center;
    flex: none;

    width: 30px;
    height: 30px;

    color: var(--doc-warning);
}

.documents-retention-icon svg[b-fhb4gjxqc9] {
    width: 20px;
    height: 20px;
}

.documents-retention-notice p[b-fhb4gjxqc9] {
    margin: 0;

    color: var(--doc-text-2);

    font-size: .64rem;
    line-height: 1.8;
}


/* =========================================================
   PHONE
   =========================================================
   Each document was a column of seven stacked rows - a phone
   showed about one and a half per screen. The cells keep the
   same content but sit in three lines: the file, its language
   pair and status, then credits, date and the actions.
   The four counters go two to a row and the three filters
   share one, so the list starts on the first screen.
   ========================================================= */

@media (max-width: 650px) {

    .documents-summary-grid[b-fhb4gjxqc9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .documents-summary-card[b-fhb4gjxqc9] {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
    }

    .documents-toolbar[b-fhb4gjxqc9] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .documents-search[b-fhb4gjxqc9] {
        grid-column: 1 / -1;
    }

    .documents-sort[b-fhb4gjxqc9] {
        grid-column: auto;
    }

    .documents-filter select[b-fhb4gjxqc9] {
        padding-inline-start: 9px;
        padding-inline-end: 26px;
        font-size: .68rem;
        text-overflow: ellipsis;
    }

    .documents-filter-arrow[b-fhb4gjxqc9] {
        inset-inline-end: 8px;
        width: 12px;
        height: 12px;
    }

    .documents-table[b-fhb4gjxqc9] {
        padding: 10px;
    }

    .documents-row[b-fhb4gjxqc9] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "file file file"
            "lang lang status"
            "credits date actions";
        align-items: center;
        gap: 10px 12px;
        padding: 13px;
    }

    .documents-file-cell[b-fhb4gjxqc9] {
        grid-area: file;
    }

    .documents-language-cell[b-fhb4gjxqc9] {
        grid-area: lang;
        justify-self: start;
    }

    .documents-status-cell[b-fhb4gjxqc9] {
        grid-area: status;
        grid-column: auto;
        justify-self: end;
        align-items: flex-end;
    }

    .documents-credits-cell[b-fhb4gjxqc9] {
        grid-area: credits;
    }

    .documents-date-cell[b-fhb4gjxqc9] {
        grid-area: date;
    }

    .documents-actions-cell[b-fhb4gjxqc9] {
        grid-area: actions;
        grid-column: auto;
        justify-content: flex-end;
        padding-top: 0;
    }

    .documents-detail-cell[b-fhb4gjxqc9] {
        display: none;
    }

    .documents-row-action[b-fhb4gjxqc9] {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Glossaries/Glossaries.razor.rz.scp.css */
/* =========================================================
   GLOSSARIES — PREMIUM WORKSPACE V1
   Unified with Dashboard / Documents / Translation workflow
   ========================================================= */

.glossary-page[b-l8e8f2c5b7] {
    --g-accent: var(--ui-accent, #f2bd43);
    --g-accent-strong: var(--ui-accent-strong, #dfa62c);
    --g-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));
    --g-accent-tint: var(--ui-accent-tint, rgba(226, 175, 46, .065));

    --g-text: var(--text, #28241e);
    --g-text-2: var(--text-secondary, #625d54);
    --g-muted: var(--muted, #918a7f);

    --g-surface: var(--surface, #ffffff);
    --g-surface-raised: var(--ui-surface-raised, #ffffff);
    --g-surface-strong: var(--ui-surface-strong, #fffdf9);
    --g-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --g-line: var(--ui-line, rgba(48, 43, 34, .10));
    --g-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --g-success: var(--ui-success, #4a8c61);
    --g-success-soft: var(--ui-success-tint, rgba(74, 140, 97, .10));
    --g-danger: var(--ui-danger, #b65050);
    --g-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));

    --g-shadow-sm: var(--ui-shadow-sm, 0 8px 22px rgba(32, 28, 22, .055));
    --g-shadow-md: var(--ui-shadow-md, 0 18px 46px rgba(32, 28, 22, .085));

    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 0 0 28px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    color: var(--g-text);
}


/* =========================================================
   HERO
   ========================================================= */

.glossary-hero[b-l8e8f2c5b7] {
    position: relative;

    min-height: 210px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--g-line);
    border-radius: 28px;

    background:
        radial-gradient(115% 145% at 8% -18%, var(--g-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(135deg, var(--g-surface-strong), var(--g-surface));

    box-shadow: var(--g-shadow-md);

    animation: glossary-card-in-b-l8e8f2c5b7 .62s cubic-bezier(.2,.8,.2,1) .03s backwards;
}

.glossary-page[dir="rtl"] .glossary-hero[b-l8e8f2c5b7] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--g-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(225deg, var(--g-surface-strong), var(--g-surface));
}

.glossary-hero[b-l8e8f2c5b7]::before,
.glossary-hero[b-l8e8f2c5b7]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.glossary-hero[b-l8e8f2c5b7]::before {
    width: 285px;
    height: 285px;

    inset-block-start: -184px;
    inset-inline-end: -94px;

    border: 42px solid var(--g-accent-soft);
    opacity: .78;
}

.glossary-hero[b-l8e8f2c5b7]::after {
    width: 154px;
    height: 154px;

    inset-block-end: -101px;
    inset-inline-start: -44px;

    border: 26px solid var(--g-line-strong);
    opacity: .62;
}

.glossary-hero > div[b-l8e8f2c5b7] {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.glossary-hero > div > span[b-l8e8f2c5b7] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 9px;
    padding: 6px 11px;

    border: 1px solid rgba(226, 175, 46, .28);
    border-radius: 999px;

    background: var(--g-surface-raised);

    color: #a86e11;

    font-size: .60rem;
    font-weight: 850;
    letter-spacing: .055em;
}

.glossary-hero > div > span[b-l8e8f2c5b7]::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--g-accent-strong);

    box-shadow: 0 0 0 4px var(--g-accent-soft);
}

.glossary-page[dir="rtl"] .glossary-hero > div > span[b-l8e8f2c5b7] {
    letter-spacing: 0;
}

.glossary-hero h1[b-l8e8f2c5b7] {
    margin: 0;

    color: var(--g-text);

    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.glossary-page[dir="rtl"] .glossary-hero h1[b-l8e8f2c5b7] {
    letter-spacing: 0;
}

.glossary-hero p[b-l8e8f2c5b7] {
    max-width: 760px;

    margin: 11px 0 0;

    color: var(--g-text-2);

    font-size: .82rem;
    line-height: 1.9;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.glossary-primary[b-l8e8f2c5b7] {
    position: relative;
    z-index: 3;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex: 0 0 auto;

    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--g-accent),
            var(--g-accent-strong)
        );

    color: #34270f;

    font-family: inherit;
    font-size: .66rem;
    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 12px 26px rgba(226, 175, 46, .22),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition: .18s ease;
}

.glossary-primary:hover:not(:disabled)[b-l8e8f2c5b7] {
    transform: translateY(-2px);

    box-shadow:
        0 17px 34px rgba(226,175,46,.28),
        inset 0 1px 0 rgba(255,255,255,.38);
}

.glossary-primary b[b-l8e8f2c5b7] {
    font-size: 1rem;
    line-height: 1;
}


/* =========================================================
   STATES
   ========================================================= */

.glossary-state[b-l8e8f2c5b7] {
    min-height: 140px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;

    padding: 24px 26px;

    border: 1px solid var(--g-line);
    border-radius: 22px;

    background: var(--g-surface);

    box-shadow: var(--g-shadow-sm);
}

.glossary-state > i[b-l8e8f2c5b7] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border: 3px solid var(--g-accent-soft);
    border-top-color: var(--g-accent-strong);
    border-radius: 50%;

    animation: glossary-spin-b-l8e8f2c5b7 .75s linear infinite;
}

.glossary-state > div[b-l8e8f2c5b7] {
    min-width: 0;
}

.glossary-state strong[b-l8e8f2c5b7] {
    display: block;

    color: var(--g-text);

    font-size: .78rem;
    font-weight: 820;
}

.glossary-state p[b-l8e8f2c5b7] {
    max-width: 640px;

    margin: 5px 0 0;

    color: var(--g-muted);

    font-size: .61rem;
    line-height: 1.75;
}

.glossary-state.error[b-l8e8f2c5b7] {
    border-color: rgba(182,80,80,.16);
    background: var(--g-danger-soft);
}

.glossary-state.error button[b-l8e8f2c5b7] {
    min-height: 36px;

    margin-top: 11px;
    padding: 0 13px;

    border: 1px solid var(--g-line-strong);
    border-radius: 11px;

    background: var(--g-surface-raised);

    color: var(--g-text-2);

    font-family: inherit;
    font-size: .60rem;
    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.glossary-summary[b-l8e8f2c5b7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.glossary-summary article[b-l8e8f2c5b7] {
    position: relative;

    min-width: 0;
    min-height: 108px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 15px 17px 15px 72px;
    padding-inline-start: 72px;
    padding-inline-end: 17px;

    overflow: hidden;

    border: 1px solid var(--g-line);
    border-radius: 18px;

    background:
        linear-gradient(145deg, var(--g-accent-tint), transparent 72%),
        var(--g-surface);

    box-shadow: var(--g-shadow-sm);

    transition: .18s ease;
}

.glossary-summary article:hover[b-l8e8f2c5b7] {
    transform: translateY(-2px);

    border-color: var(--g-line-strong);

    box-shadow: var(--g-shadow-md);
}

.glossary-summary article[b-l8e8f2c5b7]::before {
    position: absolute;

    inset-inline-start: 15px;
    top: 50%;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    border: 1px solid var(--g-line);
    border-radius: 13px;

    background: var(--g-surface-raised);

    color: #7f7357;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
}

.glossary-summary article:nth-child(1)[b-l8e8f2c5b7]::before { content: "G"; }
.glossary-summary article:nth-child(2)[b-l8e8f2c5b7]::before { content: "✓"; color: var(--g-success); }
.glossary-summary article:nth-child(3)[b-l8e8f2c5b7]::before { content: "T"; }
.glossary-summary article:nth-child(4)[b-l8e8f2c5b7]::before { content: "↔"; }

.glossary-summary article[b-l8e8f2c5b7]::after {
    content: "";

    position: absolute;

    inset-block: 18px;
    inset-inline-start: 61px;

    width: 1px;

    background: var(--g-line);
}

.glossary-summary small[b-l8e8f2c5b7] {
    display: block;

    margin-bottom: 3px;

    color: var(--g-text-2);

    font-size: .59rem;
    font-weight: 760;
}

.glossary-summary strong[b-l8e8f2c5b7] {
    display: block;

    color: var(--g-text);

    font-size: 1.42rem;
    font-weight: 880;
    line-height: 1.12;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   LIBRARY
   ========================================================= */

.glossary-library[b-l8e8f2c5b7] {
    overflow: hidden;

    border: 1px solid var(--g-line);
    border-radius: 24px;

    background: var(--g-surface);

    box-shadow: var(--g-shadow-sm);

    animation: glossary-card-in-b-l8e8f2c5b7 .58s cubic-bezier(.2,.8,.2,1) .12s backwards;
}

.glossary-title[b-l8e8f2c5b7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px 17px;

    border-bottom: 1px solid var(--g-line);
}

.glossary-title > div > span[b-l8e8f2c5b7] {
    display: block;

    margin-bottom: 6px;

    color: #a86e11;

    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .07em;
}

.glossary-page[dir="rtl"] .glossary-title > div > span[b-l8e8f2c5b7] {
    letter-spacing: 0;
}

.glossary-title h2[b-l8e8f2c5b7] {
    margin: 0;

    color: var(--g-text);

    font-size: 1.05rem;
    font-weight: 840;
}

.glossary-title > b[b-l8e8f2c5b7] {
    padding: 7px 10px;

    border: 1px solid var(--g-line);
    border-radius: 999px;

    background: var(--g-surface-soft);

    color: var(--g-text-2);

    font-size: .57rem;
    font-weight: 760;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.glossary-toolbar[b-l8e8f2c5b7] {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.25fr)
        repeat(4, minmax(130px, .46fr));
    gap: 9px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--g-line);

    background:
        linear-gradient(180deg, var(--g-surface-soft), transparent);
}

.glossary-toolbar input[b-l8e8f2c5b7],
.glossary-toolbar select[b-l8e8f2c5b7] {
    width: 100%;
    min-height: 42px;

    box-sizing: border-box;

    border: 1px solid var(--g-line);
    border-radius: 12px;
    outline: 0;

    background: var(--g-surface-raised);

    color: var(--g-text);

    font-family: inherit;
    font-size: .63rem;
    font-weight: 680;

    transition: .16s ease;
}

.glossary-toolbar input[b-l8e8f2c5b7] {
    padding: 0 12px;
}

.glossary-toolbar select[b-l8e8f2c5b7] {
    padding: 0 10px;
}

.glossary-toolbar input[b-l8e8f2c5b7]::placeholder {
    color: var(--g-muted);
}

.glossary-toolbar input:focus[b-l8e8f2c5b7],
.glossary-toolbar select:focus[b-l8e8f2c5b7] {
    border-color: var(--g-accent-strong);

    box-shadow: 0 0 0 3px var(--g-accent-soft);
}


/* =========================================================
   EMPTY
   ========================================================= */

.glossary-empty[b-l8e8f2c5b7] {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 30px;

    text-align: center;
}

.glossary-empty[b-l8e8f2c5b7]::before {
    content: "G";

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 18px;

    background: var(--g-accent-soft);

    color: #8b7a58;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    font-weight: 900;

    box-shadow: var(--g-shadow-sm);
}

.glossary-empty h3[b-l8e8f2c5b7] {
    margin: 0;

    color: var(--g-text);

    font-size: .95rem;
    font-weight: 830;
}

.glossary-empty p[b-l8e8f2c5b7] {
    max-width: 520px;

    margin: -3px 0 2px;

    color: var(--g-muted);

    font-size: .62rem;
    line-height: 1.7;
}


/* =========================================================
   GLOSSARY CARDS
   ========================================================= */

.glossary-grid[b-l8e8f2c5b7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    padding: 14px;
}

.glossary-card[b-l8e8f2c5b7] {
    position: relative;

    min-width: 0;
    min-height: 218px;

    display: flex;
    flex-direction: column;

    padding: 15px;

    overflow: hidden;

    border: 1px solid var(--g-line);
    border-radius: 18px;

    background:
        linear-gradient(145deg, var(--g-accent-tint), transparent 72%),
        var(--g-surface-strong);

    box-shadow: 0 4px 14px rgba(32,28,22,.025);

    transition: .18s ease;
}

.glossary-card[b-l8e8f2c5b7]::after {
    content: "G";

    position: absolute;

    inset-block-end: -12px;
    inset-inline-end: 9px;

    color: #7f7357;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 4.6rem;
    font-weight: 900;
    line-height: 1;

    opacity: .035;

    pointer-events: none;
}

.glossary-card:hover[b-l8e8f2c5b7] {
    transform: translateY(-3px);

    border-color: rgba(226,175,46,.28);

    box-shadow: var(--g-shadow-md);
}

.glossary-card-top[b-l8e8f2c5b7] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.glossary-card-top > span[b-l8e8f2c5b7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 8px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: .51rem;
    font-weight: 820;
}

.glossary-card-top > span[b-l8e8f2c5b7]::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.glossary-card-top > span.active[b-l8e8f2c5b7] {
    border-color: rgba(74,140,97,.12);

    background: var(--g-success-soft);

    color: var(--g-success);
}

.glossary-card-top > span.inactive[b-l8e8f2c5b7] {
    border-color: var(--g-line);

    background: var(--g-surface-soft);

    color: var(--g-muted);
}

.glossary-card-top > small[b-l8e8f2c5b7] {
    color: var(--g-muted);

    font-size: .51rem;
    font-weight: 720;
}

.glossary-card h3[b-l8e8f2c5b7] {
    position: relative;
    z-index: 1;

    margin: 15px 0 6px;

    color: var(--g-text);

    font-size: .82rem;
    font-weight: 850;
    line-height: 1.45;
}

.glossary-card > p[b-l8e8f2c5b7] {
    position: relative;
    z-index: 1;

    min-height: 42px;

    margin: 0;

    color: var(--g-text-2);

    font-size: .56rem;
    line-height: 1.7;
}

.glossary-pair[b-l8e8f2c5b7] {
    position: relative;
    z-index: 1;

    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 13px;
    padding: 7px 10px;

    border: 1px solid rgba(226,175,46,.16);
    border-radius: 10px;

    background: var(--g-accent-soft);

    color: #8b641d;

    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.glossary-pair b[b-l8e8f2c5b7] {
    color: var(--g-accent-strong);
}

.glossary-card > footer[b-l8e8f2c5b7] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: auto;
    padding-top: 13px;

    border-top: 1px solid var(--g-line);
}

.glossary-card > footer > small[b-l8e8f2c5b7] {
    color: var(--g-muted);

    font-size: .49rem;
}

.glossary-card > footer > div[b-l8e8f2c5b7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.glossary-card > footer button[b-l8e8f2c5b7] {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--g-line);
    border-radius: 9px;

    background: var(--g-surface-raised);

    color: var(--g-text-2);

    font-family: inherit;
    font-size: .82rem;
    line-height: 1;

    cursor: pointer;

    transition: .16s ease;
}

.glossary-card > footer button:hover[b-l8e8f2c5b7] {
    transform: translateY(-1px);

    border-color: var(--g-accent-strong);

    background: var(--g-accent-soft);

    color: #9c6b16;
}

.glossary-card > footer button.danger:hover[b-l8e8f2c5b7] {
    border-color: rgba(182,80,80,.22);

    background: var(--g-danger-soft);

    color: var(--g-danger);
}


/* =========================================================
   MODAL
   ========================================================= */

.glossary-modal[b-l8e8f2c5b7] {
    position: fixed;
    inset: 0;
    z-index: 2100;

    display: grid;
    place-items: center;

    padding: 22px;

    background: rgba(20,18,14,.38);

    backdrop-filter: blur(8px);
}

.glossary-modal section[b-l8e8f2c5b7] {
    width: min(100%, 560px);

    padding: 23px;

    border: 1px solid var(--g-line-strong);
    border-radius: 22px;

    background: var(--g-surface-raised);

    color: var(--g-text);

    box-shadow: 0 28px 80px rgba(20,18,14,.24);

    animation: glossary-dialog-in-b-l8e8f2c5b7 .30s cubic-bezier(.2,.8,.2,1) both;
}

.glossary-modal h3[b-l8e8f2c5b7] {
    margin: 0 0 14px;

    color: var(--g-text);

    font-size: 1rem;
    font-weight: 850;
}

.glossary-modal > section > p[b-l8e8f2c5b7] {
    margin: 0;

    color: var(--g-text-2);

    font-size: .64rem;
    line-height: 1.8;
}

.glossary-modal label[b-l8e8f2c5b7] {
    display: grid;
    gap: 6px;

    margin-top: 12px;

    color: var(--g-text-2);

    font-size: .62rem;
    font-weight: 760;
}

.glossary-modal input:not([type="checkbox"])[b-l8e8f2c5b7],
.glossary-modal textarea[b-l8e8f2c5b7],
.glossary-modal select[b-l8e8f2c5b7] {
    width: 100%;
    min-height: 43px;

    box-sizing: border-box;

    margin: 0;
    padding: 10px 11px;

    border: 1px solid var(--g-line-strong);
    border-radius: 11px;
    outline: 0;

    background: var(--g-surface-soft);

    color: var(--g-text);

    font: inherit;
    font-size: .66rem;

    transition: .16s ease;
}

.glossary-modal textarea[b-l8e8f2c5b7] {
    min-height: 88px;
    resize: vertical;
}

.glossary-modal input:not([type="checkbox"]):focus[b-l8e8f2c5b7],
.glossary-modal textarea:focus[b-l8e8f2c5b7],
.glossary-modal select:focus[b-l8e8f2c5b7] {
    border-color: var(--g-accent-strong);

    background: var(--g-surface-raised);

    box-shadow: 0 0 0 3px var(--g-accent-soft);
}

.form-grid[b-l8e8f2c5b7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.glossary-modal .toggle[b-l8e8f2c5b7] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;

    padding: 10px 11px;

    border: 1px solid var(--g-line);
    border-radius: 11px;

    background: var(--g-surface-soft);

    cursor: pointer;
}

.glossary-modal .toggle input[b-l8e8f2c5b7] {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: var(--g-accent-strong);
}

.form-error[b-l8e8f2c5b7] {
    margin: 11px 0 0;

    padding: 9px 10px;

    border: 1px solid rgba(182,80,80,.14);
    border-radius: 10px;

    background: var(--g-danger-soft);

    color: var(--g-danger);

    font-size: .58rem;
    line-height: 1.65;
}

.glossary-modal-actions[b-l8e8f2c5b7] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 18px;
}

.glossary-modal-cancel[b-l8e8f2c5b7],
.glossary-modal-submit[b-l8e8f2c5b7] {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border-radius: 11px;

    font-family: inherit;
    font-size: .61rem;
    font-weight: 800;

    cursor: pointer;
}

.glossary-modal-cancel[b-l8e8f2c5b7] {
    border: 1px solid var(--g-line-strong);

    background: var(--g-surface-raised);

    color: var(--g-text-2);
}

.glossary-modal-submit[b-l8e8f2c5b7] {
    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            var(--g-accent),
            var(--g-accent-strong)
        );

    color: #34270f;

    box-shadow: 0 9px 20px rgba(226,175,46,.18);
}

.glossary-modal-submit:disabled[b-l8e8f2c5b7] {
    opacity: .58;
    cursor: wait;
}


/* =========================================================
   DARK
   ========================================================= */

/* =========================================================
   GLOSSARIES PAGE — DARK THEME FIX
   ========================================================= */

html[data-theme="dark"] .glossary-page[b-l8e8f2c5b7] {
    --g-text: #f3eee5;
    --g-text-2: #d3cbbb;
    --g-muted: #a69e90;
    --g-line: rgba(255, 236, 198, .08);
    --g-line-strong: rgba(255, 236, 198, .14);
    --g-surface: #1f1a15;
    --g-surface-2: #262019;
    --g-surface-3: #2d261f;
    --g-accent: #f0c14b;
    --g-accent-strong: #e0aa2d;
    --g-accent-soft: rgba(240, 193, 75, .12);
    color: var(--g-text);
    background: transparent;
}

/* ---------- top summary cards ---------- */

html[data-theme="dark"] .glossary-summary article[b-l8e8f2c5b7] {
    border-color: var(--g-line-strong) !important;
    background: linear-gradient( 90deg, rgba(224, 170, 45, .16) 0%, rgba(224, 170, 45, .08) 40%, rgba(255, 255, 255, .03) 100% ) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

    html[data-theme="dark"] .glossary-summary article[b-l8e8f2c5b7]::after {
        background: var(--g-line-strong) !important;
    }

    html[data-theme="dark"] .glossary-summary article small[b-l8e8f2c5b7] {
        color: var(--g-text-2) !important;
    }

    html[data-theme="dark"] .glossary-summary article strong[b-l8e8f2c5b7] {
        color: #f3bc35 !important;
    }

    html[data-theme="dark"] .glossary-summary article[b-l8e8f2c5b7]::before {
        color: #c7b490 !important;
    }

/* ---------- main workspace container ---------- */

html[data-theme="dark"] .glossary-library[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-workspace[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-panel[b-l8e8f2c5b7] {
    border: 1px solid var(--g-line-strong) !important;
    border-radius: 26px !important;
    background: linear-gradient( 180deg, rgba(36, 30, 23, .96) 0%, rgba(30, 25, 20, .98) 100% ) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* ---------- hero / headings ---------- */

html[data-theme="dark"] .glossary-hero[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-library-header[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-workspace-header[b-l8e8f2c5b7] {
    background: transparent !important;
    color: var(--g-text) !important;
}

    html[data-theme="dark"] .glossary-hero h1[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-library h2[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-workspace h2[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-library-header h2[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-workspace-header h2[b-l8e8f2c5b7] {
        color: var(--g-text) !important;
    }

    html[data-theme="dark"] .glossary-hero p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-library p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-workspace p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-library-header p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-workspace-header p[b-l8e8f2c5b7] {
        color: var(--g-text-2) !important;
    }

/* ---------- toolbar / filters ---------- */

html[data-theme="dark"] .glossary-toolbar[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-filters[b-l8e8f2c5b7] {
    border-top-color: var(--g-line) !important;
    background: transparent !important;
}

    html[data-theme="dark"] .glossary-toolbar input[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-toolbar select[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-filters input[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-filters select[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-search[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-filter[b-l8e8f2c5b7] {
        border: 1px solid var(--g-line-strong) !important;
        background: #191510 !important;
        color: var(--g-text) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
    }

        html[data-theme="dark"] .glossary-toolbar input[b-l8e8f2c5b7]::placeholder,
        html[data-theme="dark"] .glossary-filters input[b-l8e8f2c5b7]::placeholder,
        html[data-theme="dark"] .glossary-search[b-l8e8f2c5b7]::placeholder {
            color: #938979 !important;
        }

        html[data-theme="dark"] .glossary-toolbar input:focus[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-toolbar select:focus[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-filters input:focus[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-filters select:focus[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-search:focus[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-filter:focus[b-l8e8f2c5b7] {
            border-color: rgba(240, 193, 75, .48) !important;
            background: #1d1813 !important;
            box-shadow: 0 0 0 3px rgba(240, 193, 75, .10) !important;
        }

/* ---------- glossary cards ---------- */

html[data-theme="dark"] .glossary-card[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-item[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-entry[b-l8e8f2c5b7] {
    border: 1px solid var(--g-line-strong) !important;
    border-radius: 22px !important;
    background: linear-gradient( 180deg, rgba(35, 29, 23, .92) 0%, rgba(28, 24, 19, .96) 100% ) !important;
    color: var(--g-text) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.02) !important;
}

    html[data-theme="dark"] .glossary-card:hover[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item:hover[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry:hover[b-l8e8f2c5b7] {
        border-color: rgba(240, 193, 75, .18) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 0 1px rgba(240,193,75,.04) inset !important;
    }

    html[data-theme="dark"] .glossary-card h3[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item h3[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry h3[b-l8e8f2c5b7] {
        color: var(--g-text) !important;
    }

    html[data-theme="dark"] .glossary-card p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry p[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-card small[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item small[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry small[b-l8e8f2c5b7] {
        color: var(--g-text-2) !important;
    }

    /* language chip */
    html[data-theme="dark"] .glossary-card .lang-chip[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item .lang-chip[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry .lang-chip[b-l8e8f2c5b7] {
        border: 1px solid rgba(240,193,75,.16) !important;
        background: rgba(240,193,75,.10) !important;
        color: #e8b742 !important;
    }

    /* active badge */
    html[data-theme="dark"] .glossary-card .status-badge[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item .status-badge[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry .status-badge[b-l8e8f2c5b7] {
        background: rgba(129, 180, 98, .14) !important;
        color: #9fd07f !important;
        border: 1px solid rgba(129, 180, 98, .16) !important;
    }

    /* ---------- action buttons inside cards ---------- */

    html[data-theme="dark"] .glossary-card .icon-btn[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-item .icon-btn[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-entry .icon-btn[b-l8e8f2c5b7],
    html[data-theme="dark"] .glossary-actions button[b-l8e8f2c5b7] {
        border: 1px solid var(--g-line-strong) !important;
        background: #17130f !important;
        color: #e7dcc6 !important;
    }

        html[data-theme="dark"] .glossary-card .icon-btn:hover[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-item .icon-btn:hover[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-entry .icon-btn:hover[b-l8e8f2c5b7],
        html[data-theme="dark"] .glossary-actions button:hover[b-l8e8f2c5b7] {
            border-color: rgba(240, 193, 75, .24) !important;
            background: #1d1813 !important;
            color: #f0c14b !important;
        }

/* ---------- chips / count pills ---------- */

html[data-theme="dark"] .glossary-chip[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-count[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-pill[b-l8e8f2c5b7] {
    border: 1px solid var(--g-line-strong) !important;
    background: rgba(255,255,255,.03) !important;
    color: var(--g-text) !important;
}

/* ---------- empty / loading / state ---------- */

html[data-theme="dark"] .glossary-empty[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-state[b-l8e8f2c5b7] {
    border: 1px dashed var(--g-line-strong) !important;
    background: rgba(255,255,255,.02) !important;
    color: var(--g-text-2) !important;
}

/* ---------- primary button ---------- */

html[data-theme="dark"] .glossary-primary[b-l8e8f2c5b7],
html[data-theme="dark"] .term-primary[b-l8e8f2c5b7],
html[data-theme="dark"] .glossary-create-btn[b-l8e8f2c5b7] {
    background: linear-gradient(135deg, #f0c14b, #dfa62c) !important;
    color: #34270f !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(226,175,46,.18) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .glossary-summary[b-l8e8f2c5b7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .glossary-toolbar[b-l8e8f2c5b7] {
        grid-template-columns: minmax(230px, 1fr) repeat(2, minmax(130px, .48fr));
    }

    .glossary-toolbar select:last-child[b-l8e8f2c5b7] {
        grid-column: auto;
    }

    .glossary-grid[b-l8e8f2c5b7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .glossary-hero[b-l8e8f2c5b7] {
        min-height: 0;

        flex-direction: column;
        align-items: stretch;

        padding: 23px 20px;

        border-radius: 22px;
    }

    .glossary-primary[b-l8e8f2c5b7] {
        width: 100%;
    }

    .glossary-toolbar[b-l8e8f2c5b7] {
        grid-template-columns: 1fr 1fr;
    }

    .glossary-toolbar input[b-l8e8f2c5b7] {
        grid-column: 1 / -1;
    }

    .glossary-grid[b-l8e8f2c5b7] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-l8e8f2c5b7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .glossary-page[b-l8e8f2c5b7] {
        gap: 14px;
    }

    .glossary-summary[b-l8e8f2c5b7] {
        grid-template-columns: 1fr;
    }

    .glossary-toolbar[b-l8e8f2c5b7] {
        grid-template-columns: 1fr;
    }

    .glossary-toolbar input[b-l8e8f2c5b7] {
        grid-column: auto;
    }

    .glossary-title[b-l8e8f2c5b7] {
        align-items: flex-start;
        flex-direction: column;
    }

    .glossary-modal[b-l8e8f2c5b7] {
        padding: 14px;
    }

    .glossary-modal section[b-l8e8f2c5b7] {
        padding: 19px;
    }

    .glossary-modal-actions[b-l8e8f2c5b7] {
        flex-direction: column-reverse;
    }

    .glossary-modal-cancel[b-l8e8f2c5b7],
    .glossary-modal-submit[b-l8e8f2c5b7] {
        width: 100%;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes glossary-spin-b-l8e8f2c5b7 {
    to { transform: rotate(360deg); }
}

@keyframes glossary-card-in-b-l8e8f2c5b7 {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.995);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes glossary-dialog-in-b-l8e8f2c5b7 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glossary-hero[b-l8e8f2c5b7],
    .glossary-library[b-l8e8f2c5b7],
    .glossary-summary article[b-l8e8f2c5b7],
    .glossary-card[b-l8e8f2c5b7],
    .glossary-primary[b-l8e8f2c5b7],
    .glossary-modal section[b-l8e8f2c5b7] {
        animation: none !important;
        transition: none !important;
    }

    .glossary-state > i[b-l8e8f2c5b7] {
        animation-duration: 1.6s;
    }
}


/* GLOSSARY SUMMARY EXACT TRANSLATION CARD V2 - START */

/*
 * Match Stage-2 translation reference cards:
 * - thin neutral border
 * - warm cream -> white gradient
 * - plain brown icon on the physical RIGHT
 * - vertical divider beside icon
 * - title above
 * - amber main value
 * - compact helper text below
 */

.glossary-summary[b-l8e8f2c5b7] {
    gap: 8px;
}

.glossary-summary article[b-l8e8f2c5b7] {
    position: relative;

    min-width: 0;
    min-height: 86px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 11px 78px 10px 14px !important;

    overflow: hidden;

    border: 1px solid var(--g-line) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            90deg,
            #f6e6b7 0%,
            #fbf2d8 48%,
            #ffffff 100%
        ) !important;

    box-shadow:
        0 2px 8px rgba(16,24,40,.05),
        inset 0 1px 0 rgba(255,255,255,.50) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.glossary-summary article:hover[b-l8e8f2c5b7] {
    transform: translateY(-1px);

    border-color: var(--g-line-strong) !important;

    box-shadow:
        0 4px 12px rgba(16,24,40,.07),
        inset 0 1px 0 rgba(255,255,255,.52) !important;
}

/* plain icon on physical RIGHT */
.glossary-summary article[b-l8e8f2c5b7]::before {
    position: absolute !important;

    top: 50% !important;
    right: 15px !important;
    left: auto !important;

    width: 42px !important;
    height: 42px !important;

    display: grid !important;
    place-items: center !important;

    transform: translateY(-50%) !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #7f7357 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 900 !important;

    box-shadow: none !important;

    opacity: 1 !important;

    z-index: 2;
}

/* divider immediately to the LEFT of icon */
.glossary-summary article[b-l8e8f2c5b7]::after {
    content: "" !important;

    position: absolute !important;

    top: 13px !important;
    bottom: 13px !important;

    right: 62px !important;
    left: auto !important;

    width: 1px !important;
    height: auto !important;

    border-radius: 0 !important;

    background: var(--g-line) !important;

    opacity: 1 !important;

    pointer-events: none;
}

/* icon glyphs */
.glossary-summary article:nth-child(1)[b-l8e8f2c5b7]::before {
    content: "G";
}

.glossary-summary article:nth-child(2)[b-l8e8f2c5b7]::before {
    content: "✓";
    color: #7f7357 !important;
}

.glossary-summary article:nth-child(3)[b-l8e8f2c5b7]::before {
    content: "T";
}

.glossary-summary article:nth-child(4)[b-l8e8f2c5b7]::before {
    content: "↔";
}

/* title */
.glossary-summary article small[b-l8e8f2c5b7] {
    display: block;

    margin: 0 0 4px !important;

    color: var(--g-text-2) !important;

    font-size: .58rem !important;
    font-weight: 780 !important;
    line-height: 1.35 !important;

    text-align: right;
}

/* main value */
.glossary-summary article strong[b-l8e8f2c5b7] {
    display: block;

    margin: 0 !important;

    color: #eea000 !important;

    font-size: 1.25rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;

    font-variant-numeric: tabular-nums;

    text-align: right;
}

/* Persian / RTL: keep icon physically right, text aligned right */
.glossary-page[dir="rtl"] .glossary-summary article[b-l8e8f2c5b7] {
    padding-right: 78px !important;
    padding-left: 14px !important;
}

.glossary-page[dir="rtl"] .glossary-summary article[b-l8e8f2c5b7]::before {
    right: 15px !important;
    left: auto !important;
}

.glossary-page[dir="rtl"] .glossary-summary article[b-l8e8f2c5b7]::after {
    right: 62px !important;
    left: auto !important;
}

/* LTR: mirror the same card structure */
.glossary-page[dir="ltr"] .glossary-summary article[b-l8e8f2c5b7] {
    padding-left: 78px !important;
    padding-right: 14px !important;
}

.glossary-page[dir="ltr"] .glossary-summary article[b-l8e8f2c5b7]::before {
    left: 15px !important;
    right: auto !important;
}

.glossary-page[dir="ltr"] .glossary-summary article[b-l8e8f2c5b7]::after {
    left: 62px !important;
    right: auto !important;
}

.glossary-page[dir="ltr"] .glossary-summary article small[b-l8e8f2c5b7],
.glossary-page[dir="ltr"] .glossary-summary article strong[b-l8e8f2c5b7] {
    text-align: left;
}

/* Dark mode preserves the same hierarchy without a bright white panel */
html[data-theme="dark"] .glossary-summary article[b-l8e8f2c5b7] {
    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.13) 0%,
            rgba(226,175,46,.065) 48%,
            rgba(255,255,255,.025) 100%
        ) !important;

    border-color: var(--g-line) !important;
}

html[data-theme="dark"] .glossary-summary article[b-l8e8f2c5b7]::before {
    color: #b5a98e !important;
}

html[data-theme="dark"] .glossary-summary article strong[b-l8e8f2c5b7] {
    color: #f1b43a !important;
}

@media (max-width: 760px) {
    .glossary-summary article[b-l8e8f2c5b7] {
        min-height: 80px;
        padding-top: 10px !important;
        padding-bottom: 9px !important;
    }

    .glossary-page[dir="rtl"] .glossary-summary article[b-l8e8f2c5b7] {
        padding-right: 72px !important;
    }

    .glossary-page[dir="ltr"] .glossary-summary article[b-l8e8f2c5b7] {
        padding-left: 72px !important;
    }

    .glossary-summary article[b-l8e8f2c5b7]::before {
        width: 36px !important;
        height: 36px !important;

        font-size: 1rem !important;
    }

    .glossary-page[dir="rtl"] .glossary-summary article[b-l8e8f2c5b7]::after {
        right: 57px !important;
    }

    .glossary-page[dir="ltr"] .glossary-summary article[b-l8e8f2c5b7]::after {
        left: 57px !important;
    }

    .glossary-summary article strong[b-l8e8f2c5b7] {
        font-size: 1.15rem !important;
    }
}

/* GLOSSARY SUMMARY EXACT TRANSLATION CARD V2 - END */


/* GLOSSARY EDIT MODAL MATCH TERM V3 - START */

/*
 * Make Create/Edit Glossary modal visually match the Add/Edit Term modal.
 * Important: .glossary-modal is rendered outside .glossary-page, so the
 * design tokens are re-declared here intentionally.
 */

.glossary-modal[b-l8e8f2c5b7] {
    --g-accent: var(--ui-accent, #f2bd43);
    --g-accent-strong: var(--ui-accent-strong, #dfa62c);
    --g-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));

    --g-text: var(--text, #28241e);
    --g-text-2: var(--text-secondary, #625d54);
    --g-muted: var(--muted, #918a7f);

    --g-surface-raised: var(--ui-surface-raised, #ffffff);
    --g-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --g-line: var(--ui-line, rgba(48, 43, 34, .10));
    --g-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --g-danger: var(--ui-danger, #b65050);
    --g-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));

    position: fixed !important;
    inset: 0 !important;
    z-index: 2100 !important;

    display: grid !important;
    place-items: center !important;

    padding: 24px !important;

    background: rgba(20, 18, 14, .38) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.glossary-modal > section[b-l8e8f2c5b7] {
    width: min(100%, 560px) !important;
    max-height: min(88vh, 760px) !important;
    overflow: auto !important;

    box-sizing: border-box !important;

    padding: 24px !important;

    border: 1px solid var(--g-line-strong) !important;
    border-radius: 24px !important;

    background: var(--g-surface-raised) !important;
    color: var(--g-text) !important;

    box-shadow: 0 28px 80px rgba(20, 18, 14, .24) !important;
}

.glossary-modal h3[b-l8e8f2c5b7] {
    margin: 0 0 16px !important;

    color: var(--g-text) !important;

    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
}

/* delete confirmation copy */
.glossary-modal > section > p:not(.form-error)[b-l8e8f2c5b7] {
    margin: 0 0 8px !important;

    color: var(--g-text-2) !important;

    font-size: .66rem !important;
    line-height: 1.9 !important;
}

/* normal form fields */
.glossary-modal label:not(.toggle)[b-l8e8f2c5b7] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;

    width: 100% !important;

    margin-top: 14px !important;

    color: var(--g-text) !important;

    font-size: .64rem !important;
    font-weight: 780 !important;
    line-height: 1.7 !important;
}

.glossary-modal input:not([type="checkbox"])[b-l8e8f2c5b7],
.glossary-modal textarea[b-l8e8f2c5b7],
.glossary-modal select[b-l8e8f2c5b7] {
    display: block !important;

    width: 100% !important;
    min-height: 46px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 11px 13px !important;

    border: 1px solid var(--g-line-strong) !important;
    border-radius: 12px !important;
    outline: none !important;

    background: var(--g-surface-soft) !important;
    color: var(--g-text) !important;

    font: inherit !important;
    font-size: .68rem !important;
    line-height: 1.7 !important;

    box-shadow: none !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

.glossary-modal textarea[b-l8e8f2c5b7] {
    min-height: 96px !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;

    resize: vertical !important;
}

.glossary-modal input:not([type="checkbox"]):focus[b-l8e8f2c5b7],
.glossary-modal textarea:focus[b-l8e8f2c5b7],
.glossary-modal select:focus[b-l8e8f2c5b7] {
    border-color: var(--g-accent-strong) !important;

    background: var(--g-surface-raised) !important;

    box-shadow: 0 0 0 3px var(--g-accent-soft) !important;
}

/* source/target languages */
.glossary-modal .form-grid[b-l8e8f2c5b7] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    margin-top: 0 !important;
}

.glossary-modal .form-grid > label[b-l8e8f2c5b7] {
    min-width: 0 !important;
}

/* active glossary checkbox row = term modal checkbox rows */
.glossary-modal .toggle[b-l8e8f2c5b7] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;
    min-height: 46px !important;

    box-sizing: border-box !important;

    margin-top: 12px !important;
    padding: 10px 12px !important;

    border: 1px solid var(--g-line) !important;
    border-radius: 12px !important;

    background: var(--g-surface-soft) !important;

    color: var(--g-text) !important;

    font-size: .64rem !important;
    font-weight: 740 !important;

    cursor: pointer !important;

    transition:
        border-color .16s ease,
        background .16s ease !important;
}

.glossary-modal .toggle:hover[b-l8e8f2c5b7] {
    border-color: var(--g-accent-strong) !important;
    background: var(--g-surface-raised) !important;
}

.glossary-modal .toggle input[type="checkbox"][b-l8e8f2c5b7] {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;

    margin: 0 !important;

    accent-color: var(--g-accent-strong) !important;
}

/* error */
.glossary-modal .form-error[b-l8e8f2c5b7] {
    margin: 13px 0 0 !important;

    padding: 10px 12px !important;

    border: 1px solid rgba(182, 80, 80, .16) !important;
    border-radius: 11px !important;

    background: var(--g-danger-soft) !important;
    color: var(--g-danger) !important;

    font-size: .60rem !important;
    line-height: 1.75 !important;
}

/* footer exactly like term modal */
.glossary-modal .glossary-modal-actions[b-l8e8f2c5b7] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    flex-wrap: wrap !important;

    margin-top: 18px !important;
    padding-top: 2px !important;
}

/* cancel */
.glossary-modal .glossary-modal-cancel[b-l8e8f2c5b7] {
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 16px !important;

    border: 1px solid var(--g-line-strong) !important;
    border-radius: 11px !important;

    background: var(--g-surface-raised) !important;
    color: var(--g-text-2) !important;

    font-family: inherit !important;
    font-size: .62rem !important;
    font-weight: 800 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        color .16s ease !important;
}

.glossary-modal .glossary-modal-cancel:hover:not(:disabled)[b-l8e8f2c5b7] {
    transform: translateY(-1px) !important;

    border-color: var(--g-accent-strong) !important;

    color: #9c6b16 !important;
}

/* save */
.glossary-modal .glossary-modal-submit[b-l8e8f2c5b7] {
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 16px !important;

    border: 1px solid transparent !important;
    border-radius: 11px !important;

    background:
        linear-gradient(
            135deg,
            var(--g-accent),
            var(--g-accent-strong)
        ) !important;

    color: #34270f !important;

    font-family: inherit !important;
    font-size: .62rem !important;
    font-weight: 820 !important;

    box-shadow: 0 10px 22px rgba(226, 175, 46, .20) !important;

    cursor: pointer !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease !important;
}

.glossary-modal .glossary-modal-submit:hover:not(:disabled)[b-l8e8f2c5b7] {
    transform: translateY(-1px) !important;

    box-shadow: 0 14px 28px rgba(226, 175, 46, .26) !important;
}

.glossary-modal .glossary-modal-submit:disabled[b-l8e8f2c5b7],
.glossary-modal .glossary-modal-cancel:disabled[b-l8e8f2c5b7] {
    opacity: .58 !important;
    cursor: wait !important;
}

/* compact scrollbar */
.glossary-modal > section[b-l8e8f2c5b7]::-webkit-scrollbar {
    width: 10px;
}

.glossary-modal > section[b-l8e8f2c5b7]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background: rgba(127,115,87,.24);
    background-clip: padding-box;
}

.glossary-modal > section[b-l8e8f2c5b7]::-webkit-scrollbar-track {
    background: transparent;
}

/* dark mode */
html[data-theme="dark"] .glossary-modal[b-l8e8f2c5b7] {
    --g-text: var(--text, #f1eee8);
    --g-text-2: var(--text-secondary, #c6bfb3);

    --g-surface-raised: var(--ui-surface-raised, #24211d);
    --g-surface-soft: var(--ui-surface-sunken, rgba(255,255,255,.022));

    --g-line: var(--ui-line, rgba(255,255,255,.07));
    --g-line-strong: var(--ui-line-strong, rgba(255,255,255,.11));

    background: rgba(6, 5, 4, .62) !important;
}

html[data-theme="dark"] .glossary-modal > section[b-l8e8f2c5b7] {
    box-shadow: 0 28px 80px rgba(0,0,0,.42) !important;
}

html[data-theme="dark"] .glossary-modal select option[b-l8e8f2c5b7] {
    background: #26231f;
    color: #f1eee8;
}

/* responsive */
@media (max-width: 640px) {
    .glossary-modal[b-l8e8f2c5b7] {
        padding: 14px !important;
    }

    .glossary-modal > section[b-l8e8f2c5b7] {
        width: 100% !important;
        max-height: 90vh !important;

        padding: 18px !important;

        border-radius: 20px !important;
    }

    .glossary-modal .form-grid[b-l8e8f2c5b7] {
        grid-template-columns: 1fr !important;
    }

    .glossary-modal .glossary-modal-actions[b-l8e8f2c5b7] {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .glossary-modal .glossary-modal-cancel[b-l8e8f2c5b7],
    .glossary-modal .glossary-modal-submit[b-l8e8f2c5b7] {
        width: 100% !important;
    }
}

/* GLOSSARY EDIT MODAL MATCH TERM V3 - END */


/* =========================================================
   PHONE
   =========================================================
   Four counters one per row pushed the library a whole screen
   down. Two to a row, with the glyph tucked closer, and the
   four filters in two pairs under the search.
   ========================================================= */

@media (max-width: 540px) {

    .glossary-summary[b-l8e8f2c5b7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .glossary-summary article[b-l8e8f2c5b7] {
        min-height: 82px;
        padding: 12px;
        padding-inline-start: 56px;
        padding-inline-end: 12px;
    }

        .glossary-summary article[b-l8e8f2c5b7]::before {
            inset-inline-start: 11px;
            width: 34px;
            height: 34px;
        }

    .glossary-toolbar[b-l8e8f2c5b7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .glossary-toolbar input[b-l8e8f2c5b7] {
            grid-column: 1 / -1;
        }

    .glossary-card[b-l8e8f2c5b7] {
        min-height: 0;
        gap: 10px;
    }

        .glossary-card p[b-l8e8f2c5b7] {
            min-height: 0;
        }
}
/* _content/AITranslationPlatform.Web/Components/Glossaries/GlossaryDetails.razor.rz.scp.css */
/* =========================================================
   GLOSSARY DETAILS / TERMS — PREMIUM WORKSPACE V1
   ========================================================= */

.term-page[b-odh6li5zji] {
    --t-accent: var(--ui-accent, #f2bd43);
    --t-accent-strong: var(--ui-accent-strong, #dfa62c);
    --t-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));
    --t-accent-tint: var(--ui-accent-tint, rgba(226, 175, 46, .065));

    --t-text: var(--text, #28241e);
    --t-text-2: var(--text-secondary, #625d54);
    --t-muted: var(--muted, #918a7f);

    --t-surface: var(--surface, #ffffff);
    --t-surface-raised: var(--ui-surface-raised, #ffffff);
    --t-surface-strong: var(--ui-surface-strong, #fffdf9);
    --t-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --t-line: var(--ui-line, rgba(48, 43, 34, .10));
    --t-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --t-success: var(--ui-success, #4a8c61);
    --t-success-soft: var(--ui-success-tint, rgba(74, 140, 97, .10));
    --t-danger: var(--ui-danger, #b65050);
    --t-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));

    --t-shadow-sm: var(--ui-shadow-sm, 0 8px 22px rgba(32, 28, 22, .055));
    --t-shadow-md: var(--ui-shadow-md, 0 18px 46px rgba(32, 28, 22, .085));

    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 0 0 28px;

    display: grid;
    gap: 18px;

    color: var(--t-text);
}


/* =========================================================
   STATE
   ========================================================= */

.term-state[b-odh6li5zji] {
    min-height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 24px;

    border: 1px solid var(--t-line);
    border-radius: 22px;

    background: var(--t-surface);

    color: var(--t-text-2);

    box-shadow: var(--t-shadow-sm);

    font-size: .65rem;
}

.term-state strong[b-odh6li5zji] {
    color: var(--t-text);
}

.term-state button[b-odh6li5zji] {
    min-height: 36px;

    padding: 0 13px;

    border: 1px solid var(--t-line-strong);
    border-radius: 10px;

    background: var(--t-surface-raised);

    color: var(--t-text-2);

    font-family: inherit;
    font-size: .58rem;
    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   HERO
   ========================================================= */

.term-hero[b-odh6li5zji] {
    position: relative;

    min-height: 220px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;

    padding: 29px 31px;

    overflow: hidden;

    border: 1px solid var(--t-line);
    border-radius: 28px;

    background:
        radial-gradient(115% 145% at 8% -18%, var(--t-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(135deg, var(--t-surface-strong), var(--t-surface));

    box-shadow: var(--t-shadow-md);

    animation: term-card-in-b-odh6li5zji .62s cubic-bezier(.2,.8,.2,1) .03s backwards;
}

.term-page[dir="rtl"] .term-hero[b-odh6li5zji] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--t-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(225deg, var(--t-surface-strong), var(--t-surface));
}

.term-hero[b-odh6li5zji]::before,
.term-hero[b-odh6li5zji]::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.term-hero[b-odh6li5zji]::before {
    width: 280px;
    height: 280px;

    inset-block-start: -180px;
    inset-inline-end: -92px;

    border: 42px solid var(--t-accent-soft);

    opacity: .78;
}

.term-hero[b-odh6li5zji]::after {
    width: 150px;
    height: 150px;

    inset-block-end: -98px;
    inset-inline-start: -42px;

    border: 26px solid var(--t-line-strong);

    opacity: .62;
}

.term-back[b-odh6li5zji] {
    position: relative;
    z-index: 3;

    grid-column: 1 / -1;

    width: max-content;
    min-height: 33px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: -1px;
    padding: 0 10px;

    border: 1px solid var(--t-line);
    border-radius: 999px;

    background: var(--t-surface-raised);

    color: var(--t-text-2);

    font-family: inherit;
    font-size: .58rem;
    font-weight: 760;

    cursor: pointer;

    transition: .17s ease;
}

.term-back:hover[b-odh6li5zji] {
    transform: translateY(-1px);

    border-color: var(--t-accent-strong);

    color: #9c6b16;

    box-shadow: var(--t-shadow-sm);
}

.term-hero > div[b-odh6li5zji] {
    position: relative;
    z-index: 2;

    min-width: 0;
    max-width: 860px;
}

.term-hero > div > span[b-odh6li5zji] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border: 1px solid rgba(74,140,97,.12);
    border-radius: 999px;

    background: var(--t-success-soft);

    color: var(--t-success);

    font-size: .54rem;
    font-weight: 850;
    letter-spacing: .055em;
}

.term-page[dir="rtl"] .term-hero > div > span[b-odh6li5zji] {
    letter-spacing: 0;
}

.term-hero h1[b-odh6li5zji] {
    margin: 10px 0 6px;

    color: var(--t-text);

    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    font-weight: 850;
    line-height: 1.2;
}

.term-hero p[b-odh6li5zji] {
    margin: 0;

    color: var(--t-text-2);

    font-size: .72rem;
    line-height: 1.8;
}

.term-hero > div > div[b-odh6li5zji] {
    width: max-content;

    margin-top: 13px;
    padding: 7px 10px;

    border: 1px solid rgba(226,175,46,.16);
    border-radius: 10px;

    background: var(--t-accent-soft);

    color: #8b641d;

    font-size: .57rem;
    font-weight: 850;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.term-primary[b-odh6li5zji],
.term-danger[b-odh6li5zji],
.term-select[b-odh6li5zji] {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 13px;

    border-radius: 11px;

    font-family: inherit;
    font-size: .60rem;
    font-weight: 800;

    cursor: pointer;

    transition: .17s ease;
}

.term-primary[b-odh6li5zji] {
    position: relative;
    z-index: 3;

    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            var(--t-accent),
            var(--t-accent-strong)
        );

    color: #34270f;

    box-shadow: 0 10px 22px rgba(226,175,46,.20);
}

.term-primary:hover:not(:disabled)[b-odh6li5zji] {
    transform: translateY(-1px);

    box-shadow: 0 14px 28px rgba(226,175,46,.26);
}

.term-danger[b-odh6li5zji] {
    border: 1px solid rgba(182,80,80,.18);

    background: var(--t-danger-soft);

    color: var(--t-danger);
}

.term-danger:hover:not(:disabled)[b-odh6li5zji] {
    transform: translateY(-1px);

    border-color: rgba(182,80,80,.28);
}

.term-select[b-odh6li5zji] {
    border: 1px solid var(--t-line);

    background: var(--t-surface-raised);

    color: var(--t-text-2);
}

.term-select:hover[b-odh6li5zji] {
    transform: translateY(-1px);

    border-color: var(--t-accent-strong);

    color: #9c6b16;
}


/* =========================================================
   LIBRARY / TOOLBAR
   ========================================================= */

.term-library[b-odh6li5zji] {
    padding: 0;

    overflow: hidden;

    border: 1px solid var(--t-line);
    border-radius: 24px;

    background: var(--t-surface);

    box-shadow: var(--t-shadow-sm);

    animation: term-card-in-b-odh6li5zji .58s cubic-bezier(.2,.8,.2,1) .10s backwards;
}

.term-toolbar[b-odh6li5zji] {
    min-height: 66px;

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    margin: 0;
    padding: 12px 14px;

    border-bottom: 1px solid var(--t-line);

    background:
        linear-gradient(180deg, var(--t-surface-soft), transparent);
}

.term-toolbar input[b-odh6li5zji] {
    min-width: 240px;
    min-height: 40px;

    flex: 1;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid var(--t-line);
    border-radius: 11px;
    outline: 0;

    background: var(--t-surface-raised);

    color: var(--t-text);

    font-family: inherit;
    font-size: .64rem;

    transition: .16s ease;
}

.term-toolbar input:focus[b-odh6li5zji] {
    border-color: var(--t-accent-strong);

    box-shadow: 0 0 0 3px var(--t-accent-soft);
}

.term-toolbar input[b-odh6li5zji]::placeholder {
    color: var(--t-muted);
}

.term-toolbar > span[b-odh6li5zji] {
    padding: 6px 9px;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 999px;

    background: var(--t-accent-soft);

    color: #9c6b16;

    font-size: .54rem;
    font-weight: 780;
}


/* =========================================================
   EMPTY
   ========================================================= */

.term-empty[b-odh6li5zji] {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 30px;

    text-align: center;
}

.term-empty[b-odh6li5zji]::before {
    content: "T";

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(226,175,46,.18);
    border-radius: 18px;

    background: var(--t-accent-soft);

    color: #8b7a58;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    font-weight: 900;

    box-shadow: var(--t-shadow-sm);
}

.term-empty h3[b-odh6li5zji] {
    margin: 0;

    color: var(--t-text);

    font-size: .90rem;
    font-weight: 830;
}


/* =========================================================
   TERM TABLE / CARDS
   ========================================================= */

.term-table[b-odh6li5zji] {
    display: grid;
    gap: 8px;

    padding: 12px;
}

.term-row[b-odh6li5zji] {
    position: relative;

    display: grid;
    grid-template-columns:
        24px
        minmax(160px, 1fr)
        minmax(160px, 1fr)
        minmax(120px, .7fr)
        auto;
    align-items: center;
    gap: 13px;

    min-height: 82px;

    padding: 12px 13px;

    overflow: hidden;

    border: 1px solid var(--t-line);
    border-radius: 15px;

    background:
        linear-gradient(145deg, var(--t-accent-tint), transparent 78%),
        var(--t-surface-strong);

    transition: .17s ease;
}

.term-row[b-odh6li5zji]::after {
    content: "";

    position: absolute;

    width: 76px;
    height: 76px;

    inset-block-start: -44px;
    inset-inline-end: -24px;

    border-radius: 50%;

    background: var(--t-accent);

    opacity: .025;

    pointer-events: none;
}

.term-row:hover[b-odh6li5zji] {
    transform: translateY(-1px);

    border-color: var(--t-line-strong);

    box-shadow: var(--t-shadow-sm);
}

.term-row.selected[b-odh6li5zji] {
    border-color: rgba(226,175,46,.28);

    background:
        linear-gradient(90deg, var(--t-accent-soft), transparent 72%),
        var(--t-surface-strong);

    box-shadow: inset 3px 0 0 var(--t-accent-strong);
}

.term-page[dir="rtl"] .term-row.selected[b-odh6li5zji] {
    box-shadow: inset -3px 0 0 var(--t-accent-strong);
}

.term-row > label[b-odh6li5zji] {
    display: grid;
    place-items: center;
}

.term-row input[type="checkbox"][b-odh6li5zji] {
    width: 17px;
    height: 17px;

    accent-color: var(--t-accent-strong);
}

.term-row small[b-odh6li5zji] {
    display: block;

    color: var(--t-muted);

    font-size: .48rem;
    font-weight: 760;
}

.term-row strong[b-odh6li5zji] {
    display: block;

    margin-top: 4px;

    color: var(--t-text);

    font-size: .68rem;
    font-weight: 820;
    line-height: 1.45;
}

.term-row em[b-odh6li5zji] {
    display: block;

    margin-top: 5px;

    color: var(--t-muted);

    font-size: .53rem;
    font-style: normal;
    line-height: 1.55;
}

.term-flags[b-odh6li5zji] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.term-flags span[b-odh6li5zji] {
    padding: 5px 7px;

    border: 1px solid rgba(226,175,46,.14);
    border-radius: 8px;

    background: var(--t-accent-soft);

    color: #936718;

    font-size: .48rem;
    font-weight: 760;
}

.term-actions[b-odh6li5zji] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.term-actions button[b-odh6li5zji] {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--t-line);
    border-radius: 9px;

    background: var(--t-surface-raised);

    color: var(--t-text-2);

    font-family: inherit;
    font-size: .82rem;
    line-height: 1;

    cursor: pointer;

    transition: .16s ease;
}

.term-actions button:hover[b-odh6li5zji] {
    transform: translateY(-1px);

    border-color: var(--t-accent-strong);

    background: var(--t-accent-soft);

    color: #9c6b16;
}

.term-actions .term-danger[b-odh6li5zji] {
    min-height: 31px;
    padding: 0;

    border-color: var(--t-line);

    background: var(--t-surface-raised);

    color: var(--t-text-2);
}

.term-actions .term-danger:hover[b-odh6li5zji] {
    border-color: rgba(182,80,80,.22);

    background: var(--t-danger-soft);

    color: var(--t-danger);
}


/* =========================================================
   MODAL
   ========================================================= */

/* =========================================================
   TERM MODAL — FULL FIX
   ========================================================= */

.term-modal[b-odh6li5zji] {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 18, 14, .38);
    backdrop-filter: blur(10px);
}

    .term-modal section[b-odh6li5zji] {
        width: min(100%, 560px);
        max-height: min(88vh, 760px);
        overflow: auto;
        box-sizing: border-box;
        padding: 24px;
        border: 1px solid var(--t-line-strong);
        border-radius: 24px;
        background: var(--t-surface-raised);
        color: var(--t-text);
        box-shadow: 0 28px 80px rgba(20, 18, 14, .24);
        animation: term-dialog-in-b-odh6li5zji .30s cubic-bezier(.2,.8,.2,1) both;
    }

    .term-modal h3[b-odh6li5zji] {
        margin: 0 0 16px;
        color: var(--t-text);
        font-size: 1rem;
        font-weight: 850;
        line-height: 1.4;
    }

    .term-modal section > p[b-odh6li5zji] {
        margin: 0 0 8px;
        color: var(--t-text-2);
        font-size: .66rem;
        line-height: 1.9;
    }

    /* ---------- normal field labels ---------- */

    .term-modal label:not(.term-check)[b-odh6li5zji] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 14px !important;
        color: var(--t-text-2);
        font-size: .64rem;
        font-weight: 760;
        line-height: 1.7;
    }

        .term-modal label:not(.term-check) > span[b-odh6li5zji] {
            display: block;
            color: var(--t-text);
            font-size: .64rem;
            font-weight: 780;
        }

    /* ---------- text inputs ---------- */

    .term-modal input:not([type="checkbox"])[b-odh6li5zji],
    .term-modal textarea[b-odh6li5zji] {
        display: block !important;
        width: 100% !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 11px 13px !important;
        border: 1px solid var(--t-line-strong) !important;
        border-radius: 12px !important;
        outline: none !important;
        background: var(--t-surface-soft) !important;
        color: var(--t-text) !important;
        font: inherit !important;
        font-size: .68rem !important;
        line-height: 1.7 !important;
        transition: .16s ease;
    }

    .term-modal textarea[b-odh6li5zji] {
        min-height: 96px !important;
        resize: vertical !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

        .term-modal input:not([type="checkbox"]):focus[b-odh6li5zji],
        .term-modal textarea:focus[b-odh6li5zji] {
            border-color: var(--t-accent-strong) !important;
            background: var(--t-surface-raised) !important;
            box-shadow: 0 0 0 3px var(--t-accent-soft) !important;
        }

    /* ---------- checkbox rows ---------- */

    .term-modal .term-check[b-odh6li5zji] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
        margin-top: 12px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--t-line) !important;
        border-radius: 12px !important;
        background: var(--t-surface-soft) !important;
        color: var(--t-text) !important;
        font-size: .64rem !important;
        font-weight: 740 !important;
        cursor: pointer;
    }

        .term-modal .term-check input[b-odh6li5zji] {
            width: 18px !important;
            height: 18px !important;
            flex: 0 0 18px !important;
            margin: 0 !important;
            accent-color: var(--t-accent-strong);
        }

        .term-modal .term-check:hover[b-odh6li5zji] {
            border-color: var(--t-accent-strong) !important;
            background: var(--t-surface-raised) !important;
        }

/* ---------- error ---------- */

.term-error[b-odh6li5zji] {
    margin: 13px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(182,80,80,.16) !important;
    border-radius: 11px !important;
    background: var(--t-danger-soft) !important;
    color: var(--t-danger) !important;
    font-size: .60rem !important;
    line-height: 1.75 !important;
}

/* ---------- footer ---------- */

.term-modal footer[b-odh6li5zji] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    flex-wrap: wrap !important;
    margin-top: 18px !important;
    padding-top: 2px !important;
}

    .term-modal footer > button:first-child[b-odh6li5zji] {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        border: 1px solid var(--t-line-strong) !important;
        border-radius: 11px !important;
        background: var(--t-surface-raised) !important;
        color: var(--t-text-2) !important;
        font-family: inherit !important;
        font-size: .62rem !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        transition: .16s ease;
    }

        .term-modal footer > button:first-child:hover[b-odh6li5zji] {
            border-color: var(--t-accent-strong) !important;
            color: #9c6b16 !important;
        }

.term-modal .term-primary[b-odh6li5zji] {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: linear-gradient( 135deg, var(--t-accent), var(--t-accent-strong) ) !important;
    color: #34270f !important;
    font-family: inherit !important;
    font-size: .62rem !important;
    font-weight: 820 !important;
    box-shadow: 0 10px 22px rgba(226,175,46,.20) !important;
    cursor: pointer !important;
}

    .term-modal .term-primary:hover:not(:disabled)[b-odh6li5zji] {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(226,175,46,.26) !important;
    }

    .term-modal .term-primary:disabled[b-odh6li5zji] {
        opacity: .58 !important;
        cursor: wait !important;
    }

/* ---------- scrollbar ---------- */

.term-modal section[b-odh6li5zji]::-webkit-scrollbar {
    width: 10px;
}

.term-modal section[b-odh6li5zji]::-webkit-scrollbar-thumb {
    background: rgba(127,115,87,.24);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.term-modal section[b-odh6li5zji]::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- dark mode ---------- */

html[data-theme="dark"] .term-modal[b-odh6li5zji] {
    background: rgba(6, 5, 4, .62);
}

    html[data-theme="dark"] .term-modal section[b-odh6li5zji] {
        box-shadow: 0 28px 80px rgba(0,0,0,.42);
    }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
    .term-modal[b-odh6li5zji] {
        padding: 14px;
    }

        .term-modal section[b-odh6li5zji] {
            width: 100%;
            max-height: 90vh;
            padding: 18px;
            border-radius: 20px;
        }

        .term-modal footer[b-odh6li5zji] {
            flex-direction: column-reverse !important;
            align-items: stretch !important;
        }

            .term-modal footer > button:first-child[b-odh6li5zji],
            .term-modal .term-primary[b-odh6li5zji] {
                width: 100%;
            }
}



/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"] .term-page[b-odh6li5zji] {
    --t-text: var(--text, #f1eee8);
    --t-text-2: var(--text-secondary, #c6bfb3);
    --t-muted: var(--muted, #918a7f);

    --t-surface: var(--surface, rgba(255,255,255,.025));
    --t-surface-raised: var(--ui-surface-raised, #24211d);
    --t-surface-strong: var(--ui-surface-strong, rgba(255,255,255,.035));
    --t-surface-soft: var(--ui-surface-sunken, rgba(255,255,255,.022));

    --t-line: var(--ui-line, rgba(255,255,255,.07));
    --t-line-strong: var(--ui-line-strong, rgba(255,255,255,.11));

    --t-shadow-sm: 0 12px 28px rgba(0,0,0,.13);
    --t-shadow-md: 0 22px 50px rgba(0,0,0,.20);
}

html[data-theme="dark"] .term-modal[b-odh6li5zji] {
    background: rgba(6,5,4,.62);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .term-hero[b-odh6li5zji] {
        min-height: 0;

        grid-template-columns: 1fr;

        padding: 24px 21px;
    }

    .term-primary[b-odh6li5zji] {
        width: 100%;
    }

    .term-row[b-odh6li5zji] {
        grid-template-columns: 24px minmax(0, 1fr) auto;
    }

    .term-row > div:nth-of-type(2)[b-odh6li5zji],
    .term-flags[b-odh6li5zji] {
        grid-column: 2 / -1;
    }

    .term-actions[b-odh6li5zji] {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 650px) {
    .term-page[b-odh6li5zji] {
        gap: 14px;
    }

    .term-toolbar[b-odh6li5zji] {
        align-items: stretch;
        flex-direction: column;
    }

    .term-toolbar input[b-odh6li5zji],
    .term-toolbar .term-select[b-odh6li5zji],
    .term-toolbar .term-danger[b-odh6li5zji] {
        width: 100%;
        min-width: 0;
    }

    .term-row[b-odh6li5zji] {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .term-row > div[b-odh6li5zji],
    .term-flags[b-odh6li5zji],
    .term-actions[b-odh6li5zji] {
        grid-column: 2;
    }

    .term-actions[b-odh6li5zji] {
        grid-row: auto;
        justify-content: flex-end;
    }

    .term-modal[b-odh6li5zji] {
        padding: 14px;
    }

    .term-modal section[b-odh6li5zji] {
        padding: 19px;
    }

    .term-modal footer[b-odh6li5zji] {
        flex-direction: column-reverse;
    }

    .term-modal footer > button[b-odh6li5zji] {
        width: 100%;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes term-card-in-b-odh6li5zji {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.995);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes term-dialog-in-b-odh6li5zji {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .term-hero[b-odh6li5zji],
    .term-library[b-odh6li5zji],
    .term-row[b-odh6li5zji],
    .term-primary[b-odh6li5zji],
    .term-modal section[b-odh6li5zji] {
        animation: none !important;
        transition: none !important;
    }
}
/* _content/AITranslationPlatform.Web/Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-layout[b-5o6zbgjft9] {
    width: 100%;
    min-height: 100vh;
    background: var(--ui-page, #f7f3ec);
    color: var(--text, #28231d);
}
/* _content/AITranslationPlatform.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   APP BACKGROUND
   ========================================================= */

.app-surface[b-364ay9lxgb] {
    /* =====================================================
       MODERN LIGHT COLOR SYSTEM
       ===================================================== */
    /* =====================================================
       WARM LIGHT SYSTEM

       These names are kept so the 600 lines below need no
       edit; only what they point at changed. Every value is a
       token from app.css - see the note there before altering
       one.

       The sidebar used to be a dark navy slab. In this design
       it is part of the same warm ground as the page, and the
       ACTIVE ITEM carries the contrast instead. Reintroducing a
       dark panel here breaks that.
       ===================================================== */

    --accent: var(--ui-accent);
    /*
     * The accent as INK, which is not the same colour as the accent as
     * a fill. The old accent was a mid blue that worked for both; amber
     * does not. Every `color: var(--accent-text)` in the panel became text
     * at 1.4:1 - present in the DOM and invisible on screen.
     */
    --accent-text: var(--ui-warning);
    --accent-hover: var(--ui-accent-strong);
    --accent-soft: var(--ui-accent-soft);
    --page-bg-start: var(--ui-bg-1);
    --page-bg-end: var(--ui-bg-2);
    --frame-bg: rgb(139 132 108 / 56%);
    --frame-border: rgb(255 255 255);
    --sidebar-bg-start: var(--ui-surface);
    --sidebar-bg-end: var(--ui-surface);
    --sidebar-text: var(--ui-ink-2);
    --sidebar-text-active: var(--ui-ink);
    --sidebar-icon-bg: rgba(255, 255, 255, .92);
    --sidebar-hover-bg: rgba(255, 255, 255, .96);
    --sidebar-active-bg: var(--ui-accent-soft);
    --panel-bg: rgb(225 221 204);
    --surface: rgb(255 255 255 / 72%);
    --surface-solid: var(--ui-surface-strong);
    --surface-hover: var(--ui-surface-hover);
    --text: var(--ui-ink);
    --text-secondary: var(--ui-ink-2);
    --muted: var(--ui-muted);
    --border: var(--ui-line);
    --border-accent: rgba(226, 175, 46, .34);
    --credit-bg: var(--ui-accent-soft);
    --danger: var(--ui-danger);
    --danger-border: rgba(180, 80, 63, .20);
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 28px;
    overflow: hidden;
    background: var(--ui-ground);
    color: var(--text);
}


/* =========================================================
   MAIN APP FRAME
   ========================================================= */

.app-frame[b-364ay9lxgb] {
    width: min(100%, 1640px);
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--frame-border);
    border-radius: 42px;
    background: var(--frame-bg);
    box-shadow: var(--ui-shadow-lg), inset 0 1px 0 var(--ui-line-bright);
    overflow: hidden;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.app-sidebar[b-364ay9lxgb] {
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    padding: 20px 13px 18px;
    border: 1px solid var(--ui-line);
    border-radius: 32px;
    background: linear-gradient( 180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    box-shadow: var(--ui-shadow-sm), inset 0 1px 0 var(--ui-line-bright);
    overflow: hidden;
}


.sidebar-logo[b-364ay9lxgb] {
    height: 72px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.sidebar-logo-link[b-364ay9lxgb] {
    display: block;
    text-decoration: none;
}


.logo-mark[b-364ay9lxgb] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-dark);
    color: var(--ui-accent);
    box-shadow: var(--ui-shadow-md);
}


    .logo-mark svg[b-364ay9lxgb] {
        width: 26px;
        height: 26px;
    }


.mobile-sidebar-close[b-364ay9lxgb] {
    display: none;
}


/* =========================================================
   SIDEBAR NAVIGATION
   ========================================================= */

.sidebar-navigation[b-364ay9lxgb] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    /*
     * Six items clear a 900px window; an administrator has a seventh
     * and does not, so this list can scroll. The default bar is a
     * grey slab down the side of a warm panel, which looks like a
     * defect - thin and near-invisible is the right weight for
     * something that only appears sometimes.
     */
    scrollbar-width: thin;
    scrollbar-color: var(--ui-line-strong) transparent;
}


    .sidebar-navigation[b-364ay9lxgb]::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-navigation[b-364ay9lxgb]::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-navigation[b-364ay9lxgb]::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: var(--ui-line-strong);
    }


/* =========================================================
   NAVIGATION TRACK
   =========================================================
   Scrolling and bouncing are separate jobs, and putting both
   on one element makes them fight: the block eases on a spring,
   a spring runs past its target by design, and anything that
   sticks out below the last item is scrollable content. Going
   from the first section to the last therefore flashed a
   scrollbar for the length of the animation.

   overflow: clip does not create a scroll container, and
   overflow-clip-margin lets the block paint beyond the track.
   The scroller is the nav above; the track only holds the items
   and the block that moves over them.

   The negative bottom margin is not a nudge. A clip margin is
   added to the scrollable area of the ancestor, so declaring one
   moved 17px of permanent scrollbar in where there had been a
   momentary one - measured 598px of items reported as 670. The
   margin gives back exactly what the clip margin took, so the
   block paints 72px past the track and none of it is scrollable.
   The two values have to stay equal, which is why they are one
   variable.
   ========================================================= */

.sidebar-nav-track[b-364ay9lxgb] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nav-gap);
    padding-top: var(--nav-top);
    overflow: clip;
    overflow-clip-margin: var(--nav-clip);
    margin-bottom: calc(-1 * var(--nav-clip));
    --nav-clip: 72px;

    /* the indicator is placed by arithmetic on these three, so they
       are named once and never written as literals below */
    --nav-item: 90px;
    --nav-gap: 8px;
    --nav-top: 18px;
}


/* =========================================================
   SLIDING ACTIVE BLOCK
   =========================================================
   One element that travels, rather than a background switched
   on and off per item. A background cannot animate between two
   different elements - it can only appear - so moving from one
   section to another used to be an instant jump.

   Its position comes from --nav-active, set in the markup from
   the current route. That means the items must all be exactly
   --nav-item tall: min-height would let a wrapped label push a
   row taller and the block would drift further out of line with
   every item below it.
   ========================================================= */

.nav-indicator[b-364ay9lxgb] {
    height: 84px;
    position: absolute;
    inset-inline: 0;
    top: 64px;
    z-index: 0;
    border-radius: var(--ui-r-lg);
    background: var(--ui-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(226, 175, 46, .38);
    transform: translateY(calc(var(--nav-active, 0) * (var(--nav-item) + var(--nav-gap))));
    transition: transform var(--ui-dur-3) var(--ui-ease-spring);
    pointer-events: none;
}


    /* no item owns this page, so the block has nowhere to be */
    .sidebar-nav-track[style*="--nav-active: -1"] .nav-indicator[b-364ay9lxgb] {
        opacity: 0;
    }


/*
 * Glyph above label. A row layout was tried and left the column
 * looking half-empty; the stack fills it and is what this panel
 * was designed around.
 */
[b-364ay9lxgb] .sidebar-link {
    height: var(--nav-item);
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 4px;
    border-radius: var(--ui-r-lg);
    color: var(--sidebar-text);
    text-decoration: none !important;
    font-size: .78rem;
    font-weight: 700;
    transition: var(--ui-t);
}


    [b-364ay9lxgb] .sidebar-link:hover {
        color: var(--sidebar-text-active);
        background: var(--sidebar-hover-bg);
    }

        /*
         * Hover lifts the disc and rings it in amber. Moving the whole
         * row instead makes five items jitter as the pointer crosses
         * them; moving only the disc reads as the icon responding.
         */
        [b-364ay9lxgb] .sidebar-link:hover .sidebar-link-icon {
            border-color: var(--ui-accent);
            /* a token, not white: after dark this disc has to stay
               darker than the glyph sitting on it */
            background: var(--ui-surface-strong);
            color: var(--ui-ink);
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 8px 18px rgba(226, 175, 46, .30);
        }


    /*
     * Colour only. The amber is the travelling block behind it, so
     * painting a background here as well would leave a second one
     * flashing on at the destination while the first slid over.
     */
    [b-364ay9lxgb] .sidebar-link.active {
        color: var(--sidebar-text-active);
        background: transparent;
    }


/*
 * The glyph used to be painted rgba(240,244,252,.88) for a dark
 * slab. On a light sidebar that is white on white, so it now
 * takes its colour from the ink scale and sits on a bright disc.
 */
.sidebar-link-icon[b-364ay9lxgb] {
    width: 44px;
    height: 44px;
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--ui-line);
    border-radius: 50%;
    background: var(--sidebar-icon-bg);
    color: var(--ui-ink-2);
    transition: var(--ui-t);
}


[b-364ay9lxgb] .sidebar-link.active
.sidebar-link-icon {
    border-color: transparent;
    background: var(--ui-dark);
    color: var(--ui-accent);
    box-shadow: var(--ui-shadow-sm);
    transform: scale(1.07);
    /* backwards: `both` would hold this transform and block the
       hover lift on the same disc */
    animation: ui-pop var(--ui-dur-3) var(--ui-ease-spring) backwards;
}


    /*
     * A ring thrown off the disc as it lands. It replaces the bar
     * that used to grow on the panel edge - with the amber block
     * now sliding to the item, a second marker beside it was one
     * signal too many for the same event.
     */
    [b-364ay9lxgb] .sidebar-link.active .sidebar-link-icon::after {
        content: "";
        position: absolute;
        inset: -5px;
        border: 2px solid var(--ui-accent-strong);
        border-radius: 50%;
        animation: ui-ripple .72s var(--ui-ease-out) both;
        pointer-events: none;
    }


/* =========================================================
   SIDEBAR GLYPH DRAW-IN
   =========================================================
   Every glyph here is stroked, never filled, and each element
   carries pathLength="1" in the markup. That normalisation is
   what lets a single rule draw any of them: without it the dash
   length would have to match each path's real length and every
   icon would need its own number.

   The glyphs are cut into an outline and its interior strokes so
   they can arrive in order - the sheet is drawn, then its fold,
   then each of its lines - rather than the whole icon appearing
   at once. Each interior stroke carries its own --i, so one rule
   spaces all eighteen of them.

   --ico-delay is when the interior starts. It defaults to just
   before the outline finishes, and drops to 0s on the two icons
   that have no outline, where waiting for one would be waiting
   for nothing.
   ========================================================= */

.sidebar-link-icon svg .ico-frame[b-364ay9lxgb],
.sidebar-link-icon svg .ico-detail[b-364ay9lxgb] {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}


/*
 * Hover replays it as well as activation. The icon is the only
 * thing in the row that reacts, so letting it redraw under the
 * pointer is what makes the column feel alive rather than merely
 * highlighted.
 */
[b-364ay9lxgb] .sidebar-link.active .sidebar-link-icon .ico-frame,
[b-364ay9lxgb] .sidebar-link:hover .sidebar-link-icon .ico-frame {
    animation: ui-draw .52s var(--ui-ease-out) both;
}


[b-364ay9lxgb] .sidebar-link.active .sidebar-link-icon .ico-detail,
[b-364ay9lxgb] .sidebar-link:hover .sidebar-link-icon .ico-detail {
    animation: ui-draw .3s var(--ui-ease-out) both;
    animation-delay: calc(var(--ico-delay, .34s) + var(--i, 0) * .09s);
}


.sidebar-link-icon svg[b-364ay9lxgb] {
    width: 22px;
    height: 22px;
}


/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer[b-364ay9lxgb] {
    padding-top: 16px;
    border-top: 1px solid var(--ui-line);
}


.sidebar-user-button[b-364ay9lxgb] {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--ui-r-lg);
    color: var(--sidebar-text);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--ui-t);
}


    .sidebar-user-button:hover[b-364ay9lxgb] {
        background: var(--sidebar-hover-bg);
        color: var(--ui-ink);
    }

        .sidebar-user-button:hover .sidebar-user-avatar[b-364ay9lxgb] {
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 8px 18px rgba(34, 35, 30, .26);
        }


/*
 * Same white-on-white trap the nav glyphs had: this was painted
 * rgba(240,244,252,.88) for a dark sidebar. Here the disc is the
 * dark element and the glyph sits on it, matching the avatar in
 * the reference.
 */
.sidebar-user-avatar[b-364ay9lxgb] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: var(--ui-dark);
    color: var(--ui-on-dark);
    transition: var(--ui-t);
}


    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 22px;
    }


/* =========================
   SIDEBAR LINK - ENGLISH
   ========================= */

.app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link {
    font-size: .8rem;
    font-weight: 700;
}


/* =========================
   SIDEBAR LINK - PERSIAN
   ========================= */

.app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link {
    font-size: .9rem;
    font-weight: 900;
}


/* =========================
   PROFILE LABEL - ENGLISH
   ========================= */

.app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
    font-size: .8rem;
    font-weight: 700;
}


/* =========================
   PROFILE LABEL - PERSIAN
   ========================= */

.app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
    font-size: .9rem;
    font-weight: 900;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.app-main-panel[b-364ay9lxgb] {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 32px;
    background: var(--panel-bg);
    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header[b-364ay9lxgb] {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
}


.header-left[b-364ay9lxgb] {
    display: flex;
    align-items: center;
    gap: 13px;
}


.header-brand[b-364ay9lxgb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


    .header-brand strong[b-364ay9lxgb] {
        color: var(--text);
        font-size: 1.2rem;
        font-weight: 700;
    }


    .header-brand span[b-364ay9lxgb] {
        color: var(--muted);
        font-size: .8rem;
    }


.mobile-menu-button[b-364ay9lxgb] {
    display: none;
}


.header-actions[b-364ay9lxgb] {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   CREDIT
   ========================================================= */

.header-credit[b-364ay9lxgb] {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(41, 54, 82, .045);
}


.header-credit-icon[b-364ay9lxgb] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--credit-bg);
    color: var(--accent-text);
}


    .header-credit-icon svg[b-364ay9lxgb] {
        width: 16px;
    }


.header-credit-copy[b-364ay9lxgb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}


    .header-credit-copy small[b-364ay9lxgb] {
        color: var(--muted);
        font-size: .56rem;
    }


    .header-credit-copy strong[b-364ay9lxgb] {
        color: var(--text);
        font-size: .66rem;
        font-weight: 700;
    }


/* =========================================================
   BUY CREDITS
   =========================================================
   The one filled control in the header, and deliberately so:
   everything else up there is a switch or a readout, while
   this one is the action a user reaches for the moment the
   balance beside it tells them to.

   Sized to the credit pill it stands next to rather than to
   the square icon buttons, so the two read as one group.
   ========================================================= */

.header-buy-credit[b-364ay9lxgb] {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid #ad996c6b;
    border-radius: 17px;
    background: linear-gradient(140deg, #f6dc98 0%, #cfb063 100%);
    color: var(--ui-on-accent);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--ui-shadow-accent);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .header-buy-credit:hover[b-364ay9lxgb] {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(226, 175, 46, .34);
    }

    .header-buy-credit:active[b-364ay9lxgb] {
        transform: translateY(0);
    }


.header-buy-credit-glyph[b-364ay9lxgb] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 8px;
    /* a wash of the ink, so the plus reads as part of the button
       rather than a second colour pasted onto it */
    background: rgba(74, 54, 8, .13);
}

    .header-buy-credit-glyph svg[b-364ay9lxgb] {
        width: 14px;
        height: 14px;
    }


/* Narrow: the label goes, the plus stays. A credit balance and
   a way to top it up both have to survive on a phone. */

@media (max-width: 720px) {

    .header-buy-credit[b-364ay9lxgb] {
        padding: 0 13px;
        gap: 0;
    }

        .header-buy-credit span:last-child[b-364ay9lxgb] {
            display: none;
        }
}


/* =========================================================
   HEADER ACTION BUTTONS
   ========================================================= */

.header-action-button[b-364ay9lxgb] {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}


    .header-action-button:hover[b-364ay9lxgb] {
        transform: translateY(-2px);
        color: var(--accent-text);
        border-color: var(--border-accent);
        background: var(--surface-hover);
    }


    .header-action-button svg[b-364ay9lxgb] {
        width: 18px;
        height: 18px;
    }


.header-logout-form[b-364ay9lxgb] {
    display: flex;
    margin: 0;
}


.logout-action:hover[b-364ay9lxgb] {
    color: var(--danger);
    border-color: var(--danger-border);
    background: rgba(224, 93, 105, .065);
}


.theme-dark-icon[b-364ay9lxgb] {
    display: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.app-content[b-364ay9lxgb] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 32px;
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================================
   MOBILE
   ========================================================= */

.mobile-backdrop[b-364ay9lxgb] {
    display: none;
}


@media (max-width: 1000px) {

    .app-surface[b-364ay9lxgb] {
        height: 100vh;
        padding: 12px;
        overflow: hidden;
    }


    .app-frame[b-364ay9lxgb] {
        height: 100%;
        grid-template-columns: minmax(0, 1fr);
        padding: 8px;
        border-radius: 28px;
    }


    .app-main-panel[b-364ay9lxgb] {
        border-radius: 22px;
    }


    .app-sidebar[b-364ay9lxgb] {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 20px 13px 18px;
        box-sizing: border-box;
        border-radius: 32px;
        background: linear-gradient( 180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
        box-shadow: inset 0 1px 0 var(--ui-line-bright), var(--ui-shadow-lg);
        overflow: hidden;
    }


        .app-sidebar.mobile-open[b-364ay9lxgb] {
            transform: translateX(0);
        }


    .mobile-sidebar-close[b-364ay9lxgb] {
        width: 31px;
        height: 31px;
        position: absolute;
        right: 0;
        top: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 10px;
        background: var(--ui-surface-strong);
        color: var(--ui-ink);
    }


        .mobile-sidebar-close svg[b-364ay9lxgb] {
            width: 16px;
        }


    .mobile-menu-button[b-364ay9lxgb] {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        color: var(--text-secondary);
    }


        .mobile-menu-button svg[b-364ay9lxgb] {
            width: 19px;
        }


    .mobile-backdrop[b-364ay9lxgb] {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        border: 0;
        background: rgba(19, 28, 48, .32);
        backdrop-filter: blur(3px);
    }
}


@media (max-width: 600px) {

    .app-header[b-364ay9lxgb] {
        min-height: 74px;
        padding: 13px 14px;
    }


    .header-brand span[b-364ay9lxgb] {
        display: none;
    }


    .header-credit-copy[b-364ay9lxgb] {
        display: none;
    }


    .header-credit[b-364ay9lxgb] {
        width: 45px;
        padding: 0;
        justify-content: center;
    }


    .header-credit-icon[b-364ay9lxgb] {
        background: transparent;
    }


    .app-content[b-364ay9lxgb] {
        padding: 18px 14px 30px;
    }
}




.header-logout-form[b-364ay9lxgb] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.header-logout-button[b-364ay9lxgb] {
    appearance: none;
    -webkit-appearance: none;
}

    .header-logout-button svg[b-364ay9lxgb] {
        width: 20px;
        height: 20px;
        display: block;
    }

/* =========================================================
   SUPPORT TICKET BADGE
   ========================================================= */

.sidebar-link-badge[b-364ay9lxgb] {
    min-width: 22px;
    height: 22px;
    position: absolute;
    inset-inline-end: 7px;
    top: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid var(--sidebar-bg-start);
    border-radius: 999px;
    background: var(--ui-danger);
    color: #fff;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(156, 59, 48, .25);
}

/* ============================================================
   USER SIDEBAR COMPACT FIT V1
   Goal:
   - keep every navigation icon + label visible after adding Tickets
   - remove ordinary desktop sidebar scrolling
   - preserve the existing visual language / hover / icon animation
   ============================================================ */

@media (min-width: 901px) {
    .app-sidebar[b-364ay9lxgb] {
        padding: 13px 11px 12px;
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 52px;
        flex: 0 0 52px;
    }

    .logo-mark[b-364ay9lxgb] {
        width: 45px;
        height: 45px;
    }

    .logo-mark svg[b-364ay9lxgb] {
        width: 23px;
        height: 23px;
    }

    .sidebar-navigation[b-364ay9lxgb] {
        min-height: 0;
        gap: 3px;
        padding-top: 7px;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    [b-364ay9lxgb] .sidebar-link {
        min-height: 56px;
        flex: 0 0 auto;
        gap: 4px;
        padding: 4px 3px;
        border-radius: 17px;
        line-height: 1.12;
    }

    [b-364ay9lxgb] .sidebar-link > span:last-child {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        text-align: center;
        line-height: 1.12;
        white-space: nowrap;
        text-overflow: clip;
    }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .sidebar-link-icon svg[b-364ay9lxgb] {
        width: 17px;
        height: 17px;
    }

    .app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link {
        font-size: .69rem;
        font-weight: 720;
        letter-spacing: -.01em;
    }

    .app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link {
        font-size: .76rem;
        font-weight: 850;
    }

    .sidebar-footer[b-364ay9lxgb] {
        flex: 0 0 auto;
        padding-top: 8px;
        margin-top: 6px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 54px;
        gap: 4px;
        border-radius: 17px;
        font-size: .7rem;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 17px;
        height: 17px;
    }

    .app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .69rem;
        font-weight: 720;
    }

    .app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .76rem;
        font-weight: 850;
    }
}


/* Medium-height laptops: tighten vertically before any scroll is needed. */
@media (min-width: 901px) and (max-height: 760px) {
    .app-sidebar[b-364ay9lxgb] {
        padding-block: 10px;
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 46px;
        flex-basis: 46px;
    }

    .logo-mark[b-364ay9lxgb] {
        width: 40px;
        height: 40px;
    }

    .logo-mark svg[b-364ay9lxgb] {
        width: 21px;
        height: 21px;
    }

    .sidebar-navigation[b-364ay9lxgb] {
        gap: 2px;
        padding-top: 5px;
    }

    [b-364ay9lxgb] .sidebar-link {
        min-height: 51px;
        gap: 3px;
        padding-block: 3px;
        border-radius: 15px;
    }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .sidebar-link-icon svg[b-364ay9lxgb] {
        width: 16px;
        height: 16px;
    }

    .app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .65rem;
    }

    .app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .71rem;
    }

    .sidebar-footer[b-364ay9lxgb] {
        padding-top: 6px;
        margin-top: 4px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 48px;
        gap: 3px;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 16px;
        height: 16px;
    }
}


/* Short desktop windows: keep the entire menu visible without a scrollbar. */
@media (min-width: 901px) and (max-height: 650px) {
    .app-sidebar[b-364ay9lxgb] {
        padding: 7px 10px 8px;
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 40px;
        flex-basis: 40px;
    }

    .logo-mark[b-364ay9lxgb] {
        width: 35px;
        height: 35px;
    }

    .logo-mark svg[b-364ay9lxgb] {
        width: 19px;
        height: 19px;
    }

    .sidebar-navigation[b-364ay9lxgb] {
        gap: 1px;
        padding-top: 3px;
    }

    [b-364ay9lxgb] .sidebar-link {
        min-height: 45px;
        gap: 2px;
        padding-block: 2px;
        border-radius: 13px;
    }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .sidebar-link-icon svg[b-364ay9lxgb] {
        width: 14px;
        height: 14px;
    }

    .app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .60rem;
    }

    .app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .66rem;
    }

    .sidebar-footer[b-364ay9lxgb] {
        padding-top: 4px;
        margin-top: 3px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 43px;
        gap: 2px;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 14px;
        height: 14px;
    }
}


/* Mobile drawer keeps its normal touch-friendly sizing and scrolling. */
@media (max-width: 900px) {
    .sidebar-navigation[b-364ay9lxgb] {
        overflow-y: auto;
    }
}

/* ============================================================
   USER SIDEBAR COMPACT FIT V2
   Runtime correction after screenshot review:
   - keep icon discs visually substantial
   - reduce the REAL row height via --nav-item
   - tighten distance between rows via --nav-gap
   - preserve the sliding active indicator geometry
   ============================================================ */

@media (min-width: 901px) {
    /*
     * The canonical sidebar sizes every row with:
     *   height: var(--nav-item)
     * so changing only min-height (V1) could not make the menu shorter.
     * These variables are the authoritative geometry for BOTH the rows
     * and the sliding active block.
     */
    .sidebar-nav-track[b-364ay9lxgb] {
        --nav-item: 74px;
        --nav-gap: 8px;
        --nav-top: 70px;
        --nav-clip: 54px;
    }

    .app-sidebar[b-364ay9lxgb] {
        padding: 11px 11px 10px;
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 50px;
        flex: 0 0 50px;
    }

    .logo-mark[b-364ay9lxgb] {
        width: 45px;
        height: 45px;
    }

    .logo-mark svg[b-364ay9lxgb] {
        width: 23px;
        height: 23px;
    }

    .sidebar-navigation[b-364ay9lxgb] {
        min-height: 0;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    [b-364ay9lxgb] .sidebar-link {
        height: var(--nav-item);
        min-height: var(--nav-item);
        flex: 0 0 var(--nav-item);

        padding: 13px 13px;
        border-radius: 16px;
        line-height: 1.08;
    }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;

    }

    .sidebar-link-icon svg[b-364ay9lxgb] {
        width: 20px;
        height: 20px;
    }

    [b-364ay9lxgb] .sidebar-link > span:last-child {
        max-width: 100%;
        line-height: 1.08;
        white-space: nowrap;
        margin-top:5px;
    }

    .app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link {
        font-size: .70rem;
        font-weight: 720;
    }

    .app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link {
        font-size: .86rem;
        font-weight: 850;
    }

    .sidebar-footer[b-364ay9lxgb] {
        flex: 0 0 auto;
        margin-top: 4px;
        padding-top: 7px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 52px;
        gap: 3px;
        border-radius: 16px;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 18px;
        height: 18px;
    }

    .app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .69rem;
        font-weight: 720;
    }

    .app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .75rem;
        font-weight: 850;
    }
}


/* Normal laptop heights: slightly denser, without shrinking icons to V1 size. */
@media (min-width: 901px) and (max-height: 760px) {
    .sidebar-nav-track[b-364ay9lxgb] {
        --nav-item: 59px;
        --nav-gap: 2px;
        --nav-top: 4px;
        --nav-clip: 50px;
    }

    .app-sidebar[b-364ay9lxgb] {
        padding-block: 8px;
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 45px;
        flex-basis: 45px;
    }

    .logo-mark[b-364ay9lxgb] {
        width: 41px;
        height: 41px;
    }

    .logo-mark svg[b-364ay9lxgb] {
        width: 21px;
        height: 21px;
    }

    [b-364ay9lxgb] .sidebar-link {
        gap: 2px;
        padding-block: 2px;
        border-radius: 15px;
    }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sidebar-link-icon svg[b-364ay9lxgb] {
        width: 19px;
        height: 19px;
    }

    .app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .66rem;
    }

    .app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .72rem;
    }

    .sidebar-footer[b-364ay9lxgb] {
        margin-top: 3px;
        padding-top: 5px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 47px;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 17px;
        height: 17px;
    }
}


/* Very short desktop windows: geometry compresses before scrolling is needed. */
@media (min-width: 901px) and (max-height: 650px) {
    .sidebar-nav-track[b-364ay9lxgb] {
        --nav-item: 53px;
        --nav-gap: 1px;
        --nav-top: 2px;
        --nav-clip: 46px;
    }

    .app-sidebar[b-364ay9lxgb] {
        padding: 6px 9px 7px;
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 39px;
        flex-basis: 39px;
    }

    .logo-mark[b-364ay9lxgb] {
        width: 36px;
        height: 36px;
    }

    .logo-mark svg[b-364ay9lxgb] {
        width: 19px;
        height: 19px;
    }

    [b-364ay9lxgb] .sidebar-link {
        gap: 1px;
        padding-block: 1px;
        border-radius: 13px;
    }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .sidebar-link-icon svg[b-364ay9lxgb] {
        width: 18px;
        height: 18px;
    }

    .app-surface[dir="ltr"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="ltr"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .62rem;
    }

    .app-surface[dir="rtl"][b-364ay9lxgb]  .sidebar-link,
    .app-surface[dir="rtl"] .sidebar-user-label[b-364ay9lxgb] {
        font-size: .68rem;
    }

    .sidebar-footer[b-364ay9lxgb] {
        margin-top: 2px;
        padding-top: 4px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 42px;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .sidebar-user-avatar svg[b-364ay9lxgb] {
        width: 16px;
        height: 16px;
    }
}


/* Mobile remains touch-friendly and independently scrollable. */
@media (max-width: 900px) {
    .sidebar-navigation[b-364ay9lxgb] {
        overflow-y: auto;
    }
}

/* GOFTITO SIDEBAR BRAND */
.logo-mark.logo-mark-goftito[b-364ay9lxgb] {
    width: 130px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;

}

.sidebar-brand-logo[b-364ay9lxgb] {
    width: 130px;
    height: 90px;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
    border-radius: 0;
    margin-top:60px;
}

/* =========================================================
   RESPONSIVE SHELL
   =========================================================
   Three shapes of the same panel:

   - above 1000px: the sidebar with labels, as designed;
   - 721-1000px (tablet, small laptop): the sidebar becomes a
     rail of icons, so the page keeps nearly all the width;
   - up to 720px (phone): no sidebar at all. A tab bar along
     the bottom edge carries the four destinations a user
     reaches for, and a sheet carries the rest - the way a
     native app does it.

   Before this, under 1000px the sidebar stayed in the grid as
   a full-width row and the page was pushed below it: on a
   phone the first screen was nothing but navigation.

   Everything here reads the --ui-* tokens, so the dark theme
   follows without rules of its own except where a surface has
   to be opaque (the bar and the sheet sit over moving content).
   ========================================================= */

.mobile-tabbar[b-364ay9lxgb],
.mobile-sheet[b-364ay9lxgb],
.mobile-sheet-backdrop[b-364ay9lxgb],
.header-mobile-logo[b-364ay9lxgb] {
    display: none;
}


/* ---------- tablet: icon rail ---------- */

@media (min-width: 721px) and (max-width: 1000px) {

    .app-surface[b-364ay9lxgb] {
        padding: 12px;
    }

    .app-frame[b-364ay9lxgb] {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 10px;
        padding: 8px;
        border-radius: 30px;
    }

    .app-sidebar[b-364ay9lxgb] {
        height: 100%;
        min-height: 0;
        padding: 10px 8px;
        border-radius: 24px;
        box-shadow: var(--ui-shadow-sm), inset 0 1px 0 var(--ui-line-bright);
    }

    .sidebar-logo[b-364ay9lxgb] {
        height: 56px;
        flex: 0 0 56px;
    }

    .logo-mark.logo-mark-goftito[b-364ay9lxgb],
    .sidebar-brand-logo[b-364ay9lxgb] {
        width: 54px;
        height: 50px;
        margin-top: 0;
    }

    .mobile-sidebar-close[b-364ay9lxgb],
    .mobile-menu-button[b-364ay9lxgb],
    .mobile-backdrop[b-364ay9lxgb] {
        display: none !important;
    }

    .sidebar-navigation[b-364ay9lxgb] {
        overflow-y: auto;
        scrollbar-width: none;
    }

        .sidebar-navigation[b-364ay9lxgb]::-webkit-scrollbar {
            display: none;
        }

    .sidebar-nav-track[b-364ay9lxgb] {
        --nav-item: 58px;
        --nav-gap: 6px;
        --nav-top: 8px;
        --nav-clip: 40px;
    }

    .nav-indicator[b-364ay9lxgb] {
        height: var(--nav-item);
        top: var(--nav-top);
        border-radius: 18px;
    }

    [b-364ay9lxgb] .sidebar-link {
        height: var(--nav-item);
        min-height: var(--nav-item);
        flex: 0 0 var(--nav-item);
        padding: 0;
        gap: 0;
        border-radius: 18px;
    }

        /* the label stays for screen readers; the rail shows the glyph */
        [b-364ay9lxgb] .sidebar-link > span:not(.sidebar-link-icon):not(.sidebar-link-badge),
        .sidebar-user-label[b-364ay9lxgb] {
            position: absolute !important;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

    .sidebar-link-icon[b-364ay9lxgb] {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

        .sidebar-link-icon svg[b-364ay9lxgb] {
            width: 20px;
            height: 20px;
        }

    .sidebar-link-badge[b-364ay9lxgb] {
        inset-inline-end: 2px;
        top: 2px;
    }

    .sidebar-footer[b-364ay9lxgb] {
        padding-top: 8px;
    }

    .sidebar-user-button[b-364ay9lxgb] {
        min-height: 54px;
    }

    .sidebar-user-avatar[b-364ay9lxgb] {
        width: 40px;
        height: 40px;
    }

    .app-main-panel[b-364ay9lxgb] {
        border-radius: 24px;
    }

    .app-header[b-364ay9lxgb] {
        min-height: 72px;
        padding: 12px 20px;
    }

    .app-content[b-364ay9lxgb] {
        padding: 22px 20px 28px;
    }
}


/* ---------- phone: app shell ---------- */

@media (max-width: 720px) {

    .app-surface[b-364ay9lxgb] {
        padding: 0;
    }

    .app-frame[b-364ay9lxgb] {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .app-sidebar[b-364ay9lxgb],
    .mobile-backdrop[b-364ay9lxgb],
    .mobile-menu-button[b-364ay9lxgb] {
        display: none !important;
    }

    .app-main-panel[b-364ay9lxgb] {
        height: 100%;
        border-radius: 0;
        background: transparent;
    }


    /* ---- header ---- */

    .app-header[b-364ay9lxgb] {
        min-height: 0;
        gap: 10px;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
        border-bottom: 1px solid var(--ui-line);
        background: var(--ui-surface-strong);
        -webkit-backdrop-filter: saturate(1.4) blur(18px);
        backdrop-filter: saturate(1.4) blur(18px);
    }

    .header-left[b-364ay9lxgb] {
        min-width: 0;
        gap: 10px;
    }

    .header-mobile-logo[b-364ay9lxgb] {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: none;
    }

        .header-mobile-logo img[b-364ay9lxgb] {
            width: 44px;
            height: 40px;
            object-fit: contain;
        }

    .header-brand[b-364ay9lxgb] {
        min-width: 0;
    }

        .header-brand strong[b-364ay9lxgb] {
            overflow: hidden;
            font-size: .98rem;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .header-brand span[b-364ay9lxgb] {
            display: none;
        }

    .header-actions[b-364ay9lxgb] {
        flex: none;
        gap: 8px;
    }

    /* language, theme and log-out live in the sheet on a phone */
    .header-actions > .header-action-button[b-364ay9lxgb],
    .header-actions > .header-logout-form[b-364ay9lxgb] {
        display: none;
    }

    .header-credit[b-364ay9lxgb] {
        width: auto;
        height: 42px;
        gap: 7px;
        padding: 0 12px 0 6px;
        border-radius: 15px;
        background: var(--ui-surface-strong);
        box-shadow: var(--ui-shadow-sm);
    }

    .app-surface[dir="rtl"] .header-credit[b-364ay9lxgb] {
        padding: 0 6px 0 12px;
    }

    .header-credit-icon[b-364ay9lxgb] {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        background: var(--credit-bg);
    }

    .header-credit-copy[b-364ay9lxgb] {
        display: flex;
    }

        .header-credit-copy small[b-364ay9lxgb] {
            display: none;
        }

        .header-credit-copy strong[b-364ay9lxgb] {
            font-size: .8rem;
            font-weight: 800;
            white-space: nowrap;
        }

    .header-buy-credit[b-364ay9lxgb] {
        width: 42px;
        height: 42px;
        justify-content: center;
        padding: 0;
        border-radius: 15px;
    }

    .header-buy-credit-glyph[b-364ay9lxgb] {
        background: transparent;
    }


    /* ---- content: room for the tab bar ---- */

    .app-content[b-364ay9lxgb] {
        padding: 16px 14px calc(104px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .app-content[b-364ay9lxgb]::-webkit-scrollbar {
            display: none;
        }


    /* ---- tab bar ---- */

    .mobile-tabbar[b-364ay9lxgb] {
        position: fixed;
        inset-inline: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 90;
        height: 68px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        padding: 0 4px;
        border: 1px solid var(--ui-line);
        border-radius: 26px;
        background: rgba(253, 251, 246, .86);
        -webkit-backdrop-filter: saturate(1.6) blur(22px);
        backdrop-filter: saturate(1.6) blur(22px);
        box-shadow: 0 14px 40px rgba(62, 54, 30, .18), inset 0 1px 0 var(--ui-line-bright);
    }

    .mobile-tab[b-364ay9lxgb] {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ui-muted);
        font-family: inherit;
        font-size: .66rem;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--ui-dur-2) var(--ui-ease);
    }

    .app-surface[dir="rtl"] .mobile-tab[b-364ay9lxgb] {
        font-size: .7rem;
        font-weight: 800;
    }

    .mobile-tab-icon[b-364ay9lxgb] {
        position: relative;
        width: 52px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        transition: background var(--ui-dur-2) var(--ui-ease), transform var(--ui-dur-3) var(--ui-ease-spring);
    }

        .mobile-tab-icon svg[b-364ay9lxgb] {
            width: 22px;
            height: 22px;
        }

    .mobile-tab:active .mobile-tab-icon[b-364ay9lxgb] {
        transform: scale(.9);
    }

    .mobile-tab.is-active[b-364ay9lxgb] {
        color: var(--ui-ink);
    }

        .mobile-tab.is-active .mobile-tab-icon[b-364ay9lxgb] {
            background: var(--ui-accent-soft);
            box-shadow: inset 0 0 0 1px rgba(226, 175, 46, .35);
            animation: mobile-tab-in-b-364ay9lxgb var(--ui-dur-3) var(--ui-ease-spring) both;
        }

    .mobile-tab-label[b-364ay9lxgb] {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-tab-dot[b-364ay9lxgb] {
        position: absolute;
        top: 2px;
        inset-inline-end: 10px;
        width: 9px;
        height: 9px;
        border: 2px solid var(--ui-surface-strong);
        border-radius: 50%;
        background: var(--ui-danger);
    }


    /* the centre tab: the one action the product exists for */

    .mobile-tab-primary[b-364ay9lxgb] {
        justify-content: flex-end;
        padding-bottom: 9px;
        color: var(--ui-ink);
    }

    .mobile-tab-fab[b-364ay9lxgb] {
        position: absolute;
        top: -20px;
        left: 50%;
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border: 4px solid rgba(253, 251, 246, .96);
        border-radius: 20px;
        background: linear-gradient(140deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
        color: var(--ui-on-accent);
        box-shadow: var(--ui-shadow-accent);
        transform: translateX(-50%);
        transition: transform var(--ui-dur-3) var(--ui-ease-spring), box-shadow var(--ui-dur-2) var(--ui-ease);
    }

        .mobile-tab-fab svg[b-364ay9lxgb] {
            width: 24px;
            height: 24px;
        }

    .mobile-tab-primary:active .mobile-tab-fab[b-364ay9lxgb] {
        transform: translateX(-50%) scale(.92);
    }

    .mobile-tab-primary.is-active .mobile-tab-fab[b-364ay9lxgb] {
        background: var(--ui-dark);
        color: var(--ui-accent);
    }


    /* ---- "more" sheet ---- */

    .mobile-sheet-backdrop[b-364ay9lxgb] {
        position: fixed;
        inset: 0;
        z-index: 84;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(20, 16, 10, .34);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        animation: mobile-fade-in-b-364ay9lxgb var(--ui-dur-2) var(--ui-ease) both;
    }

    .mobile-sheet[b-364ay9lxgb] {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 85;
        max-height: 82dvh;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 10px 16px calc(98px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border: 1px solid var(--ui-line);
        border-bottom: 0;
        border-radius: 28px 28px 0 0;
        background: #fbf9f3;
        box-shadow: 0 -18px 50px rgba(62, 54, 30, .18);
        animation: mobile-sheet-in-b-364ay9lxgb var(--ui-dur-3) var(--ui-ease-out) both;
    }

    .mobile-sheet-grip[b-364ay9lxgb] {
        width: 42px;
        height: 5px;
        flex: none;
        margin: 0 auto 2px;
        border-radius: 99px;
        background: var(--ui-line-strong);
    }

    .mobile-sheet-profile[b-364ay9lxgb] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--ui-line);
        border-radius: 20px;
        background: var(--ui-surface-strong);
        color: var(--ui-ink);
        text-decoration: none;
    }

    .mobile-sheet-avatar[b-364ay9lxgb] {
        width: 46px;
        height: 46px;
        flex: none;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--ui-dark);
        color: var(--ui-on-dark);
    }

        .mobile-sheet-avatar svg[b-364ay9lxgb] {
            width: 22px;
            height: 22px;
        }

    .mobile-sheet-profile-copy[b-364ay9lxgb] {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .mobile-sheet-profile-copy strong[b-364ay9lxgb] {
            font-size: .95rem;
            font-weight: 800;
        }

        .mobile-sheet-profile-copy small[b-364ay9lxgb] {
            color: var(--ui-muted);
            font-size: .76rem;
            font-weight: 700;
            text-align: start;
        }

    .mobile-sheet-chevron[b-364ay9lxgb] {
        color: var(--ui-faint);
    }

        .mobile-sheet-chevron svg[b-364ay9lxgb] {
            width: 20px;
            height: 20px;
        }

    .app-surface[dir="ltr"] .mobile-sheet-chevron svg[b-364ay9lxgb] {
        transform: scaleX(-1);
    }

    .mobile-sheet-grid[b-364ay9lxgb] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-sheet-tile[b-364ay9lxgb] {
        min-height: 92px;
        line-height: 1.35;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 4px;
        border: 1px solid var(--ui-line);
        border-radius: 20px;
        background: var(--ui-surface-strong);
        color: var(--ui-ink-2);
        font-size: .7rem;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform var(--ui-dur-2) var(--ui-ease), background var(--ui-dur-2) var(--ui-ease);
    }

        .mobile-sheet-tile:active[b-364ay9lxgb] {
            transform: scale(.96);
        }

        .mobile-sheet-tile.is-active[b-364ay9lxgb] {
            border-color: rgba(226, 175, 46, .45);
            background: var(--ui-accent-soft);
            color: var(--ui-ink);
        }

    .mobile-sheet-tile-icon[b-364ay9lxgb] {
        position: relative;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--ui-line);
        border-radius: 50%;
        background: var(--ui-surface-strong);
        color: var(--ui-ink-2);
    }

        .mobile-sheet-tile-icon svg[b-364ay9lxgb] {
            width: 21px;
            height: 21px;
        }

    .mobile-sheet-tile.is-active .mobile-sheet-tile-icon[b-364ay9lxgb] {
        border-color: transparent;
        background: var(--ui-dark);
        color: var(--ui-accent);
    }

    .mobile-sheet-tile-accent .mobile-sheet-tile-icon[b-364ay9lxgb] {
        border-color: transparent;
        background: linear-gradient(140deg, var(--ui-accent), var(--ui-accent-strong));
        color: var(--ui-on-accent);
        box-shadow: var(--ui-shadow-accent);
    }

    .mobile-sheet-badge[b-364ay9lxgb] {
        position: absolute;
        top: -6px;
        inset-inline-end: -8px;
        min-width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        padding: 0 5px;
        border: 2px solid #fbf9f3;
        border-radius: 99px;
        background: var(--ui-danger);
        color: #fff;
        font-size: .6rem;
        font-weight: 900;
    }

    .mobile-sheet-settings[b-364ay9lxgb] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-sheet-logout-form[b-364ay9lxgb] {
        display: contents;
    }

    .mobile-sheet-setting[b-364ay9lxgb] {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 8px;
        border: 1px solid var(--ui-line);
        border-radius: 16px;
        background: transparent;
        color: var(--ui-ink-2);
        font-family: inherit;
        font-size: .76rem;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-sheet-setting-icon[b-364ay9lxgb] {
        display: grid;
        place-items: center;
        min-width: 22px;
        font-size: .7rem;
        font-weight: 900;
    }

        .mobile-sheet-setting-icon svg[b-364ay9lxgb] {
            width: 19px;
            height: 19px;
        }

    .mobile-sheet-logout[b-364ay9lxgb] {
        color: var(--ui-danger);
        border-color: var(--ui-danger-tint);
    }
}


/* opaque surfaces after dark: the bar and the sheet sit over content */

html[data-theme="dark"] .mobile-tabbar[b-364ay9lxgb] {
    background: rgba(24, 19, 12, .88);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 var(--ui-line-bright);
}

html[data-theme="dark"] .mobile-tab-fab[b-364ay9lxgb] {
    border-color: rgba(24, 19, 12, .96);
}

html[data-theme="dark"] .mobile-tab-primary.is-active .mobile-tab-fab[b-364ay9lxgb] {
    background: var(--ui-accent-soft);
}

html[data-theme="dark"] .mobile-sheet[b-364ay9lxgb] {
    background: #15110b;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .mobile-sheet-badge[b-364ay9lxgb] {
    border-color: #15110b;
}


@keyframes mobile-sheet-in-b-364ay9lxgb {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mobile-fade-in-b-364ay9lxgb {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mobile-tab-in-b-364ay9lxgb {
    from {
        transform: scale(.7);
        opacity: .4;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


@media (prefers-reduced-motion: reduce) {

    .mobile-sheet[b-364ay9lxgb],
    .mobile-sheet-backdrop[b-364ay9lxgb],
    .mobile-tab.is-active .mobile-tab-icon[b-364ay9lxgb] {
        animation: none;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/PublicFooter.razor.rz.scp.css */
.pub-footer[b-6aqizvhmp2] {
    margin-top: 40px;
    padding: 64px 0 28px;
    background:
        radial-gradient(65% 120% at 85% 0%, rgba(223, 169, 54, .11) 0%, transparent 64%),
        radial-gradient(55% 100% at 5% 100%, rgba(183, 121, 29, .07) 0%, transparent 68%),
        linear-gradient(145deg, #211b15 0%, #19140f 100%);
    color: #c9b99c;
}

.pub-footer__inner[b-6aqizvhmp2] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 36px;
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.pub-brand[b-6aqizvhmp2] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #f6ecd8;
    text-decoration: none;
}

.pub-brand__mark[b-6aqizvhmp2] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(235, 184, 70, .26);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(240, 191, 75, .16), rgba(240, 191, 75, .04));
}

    .pub-brand__mark img[b-6aqizvhmp2] {
        width: 72%;
        height: 72%;
        object-fit: contain;
    }

.pub-brand__copy[b-6aqizvhmp2] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

    .pub-brand__copy strong[b-6aqizvhmp2] {
        font-weight: 700;
    }

    .pub-brand__copy small[b-6aqizvhmp2] {
        color: #a99f91;
        font-size: .7rem;
        font-weight: 600;
    }

.pub-footer__brand p[b-6aqizvhmp2] {
    max-width: 380px;
    margin: 18px 0 0;
    line-height: 2;
    font-size: .9rem;
}

.pub-footer__col[b-6aqizvhmp2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .pub-footer__col h2[b-6aqizvhmp2] {
        margin: 0 0 6px;
        color: #f0c85c;
        font-size: .86rem;
        font-weight: 700;
    }

    .pub-footer__col a[b-6aqizvhmp2] {
        color: #d8cab0;
        font-size: .9rem;
        text-decoration: none;
        transition: color .25s ease;
    }

        .pub-footer__col a:hover[b-6aqizvhmp2] {
            color: #f4cd58;
        }

.pub-footer__bottom[b-6aqizvhmp2] {
    width: min(1180px, calc(100% - 32px));
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(235, 184, 70, .14);
    color: #8f8270;
    font-size: .8rem;
}

@media (max-width: 860px) {
    .pub-footer__inner[b-6aqizvhmp2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-footer__brand[b-6aqizvhmp2] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pub-footer__inner[b-6aqizvhmp2] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/PublicHeader.razor.rz.scp.css */
/* =========================================================
   The public pages' header. Every size and colour here is the
   home page header's, measured from it, so the two read as one;
   like the home page's, the header stays light in the dark theme.
   ========================================================= */

.pub-header[b-fj4mfzm9cu] {
    position: relative;
    z-index: 30;
    border-bottom: 1px solid rgba(177, 137, 65, .15);
    background: rgba(255, 253, 248, .94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: #28231d;
}

.pub-header__inner[b-fj4mfzm9cu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(1440px, calc(100% - 48px));
    min-height: 82px;
    margin-inline: auto;
    padding: 10px 0;
}

/* ---------- brand ---------- */

.pub-brand[b-fj4mfzm9cu] {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: #292621;
    text-decoration: none;
}

.pub-brand__mark[b-fj4mfzm9cu] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid rgba(189, 139, 43, .22);
    border-radius: 14px;
    background: linear-gradient(145deg, #fffdf8, #f5e8ca);
    box-shadow: 0 12px 26px rgba(252, 209, 102, .22);
    transition: transform .3s ease;
}

    .pub-brand__mark img[b-fj4mfzm9cu] {
        display: block;
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

.pub-brand:hover .pub-brand__mark[b-fj4mfzm9cu] {
    transform: rotate(-6deg);
}

.pub-brand__copy[b-fj4mfzm9cu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .pub-brand__copy strong[b-fj4mfzm9cu] {
        color: #292621;
        font-size: 18px;
        font-weight: 900;
    }

    .pub-brand__copy small[b-fj4mfzm9cu] {
        color: #958b7b;
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
    }

/* ---------- navigation ---------- */

.pub-nav[b-fj4mfzm9cu] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

    .pub-nav > a[b-fj4mfzm9cu],
    .pub-nav__trigger[b-fj4mfzm9cu] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-height: 38px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #655d51;
        font: inherit;
        font-size: 16px;
        font-weight: 750;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color .2s ease, background-color .2s ease;
    }

        .pub-nav > a:hover[b-fj4mfzm9cu],
        .pub-nav__group:hover .pub-nav__trigger[b-fj4mfzm9cu],
        .pub-nav__group:focus-within .pub-nav__trigger[b-fj4mfzm9cu] {
            color: #9a690b;
            background: rgba(216, 166, 52, .09);
        }

        .pub-nav > a.is-current[b-fj4mfzm9cu],
        .pub-nav__trigger.is-current[b-fj4mfzm9cu] {
            color: #9a690b;
            background: rgba(216, 166, 52, .14);
        }

.pub-nav__group[b-fj4mfzm9cu] {
    position: relative;
}

.pub-nav__trigger svg[b-fj4mfzm9cu] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.pub-nav__group:hover .pub-nav__trigger svg[b-fj4mfzm9cu],
.pub-nav__group:focus-within .pub-nav__trigger svg[b-fj4mfzm9cu] {
    transform: rotate(180deg);
}

.pub-nav__menu[b-fj4mfzm9cu] {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 40;
    display: grid;
    gap: 4px;
    min-width: 290px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid rgba(155, 125, 48, .22);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 24px 50px rgba(59, 48, 23, .18);
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
}

    .pub-nav__menu[b-fj4mfzm9cu]::before {
        content: "";
        position: absolute;
        inset: -12px 0 auto;
        height: 12px;
    }

.pub-nav__group:hover .pub-nav__menu[b-fj4mfzm9cu],
.pub-nav__group:focus-within .pub-nav__menu[b-fj4mfzm9cu] {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

/* closed right after a choice, until the pointer leaves (public-pages.js) */
.pub-nav__group.is-closed .pub-nav__menu[b-fj4mfzm9cu] {
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
}

.pub-nav__group.is-closed .pub-nav__trigger svg[b-fj4mfzm9cu] {
    transform: none;
}

.pub-nav__menu a[b-fj4mfzm9cu] {
    display: grid;
    gap: 2px;
    padding: 11px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .2s ease;
}

    .pub-nav__menu a:hover[b-fj4mfzm9cu] {
        background: rgba(242, 197, 79, .12);
    }

    .pub-nav__menu a strong[b-fj4mfzm9cu] {
        color: #221d18;
        font-size: 13px;
        font-weight: 750;
    }

    .pub-nav__menu a small[b-fj4mfzm9cu] {
        color: #958b7b;
        font-size: 11.5px;
        font-weight: 600;
    }

    .pub-nav__menu a.is-current strong[b-fj4mfzm9cu] {
        color: #9a690b;
    }

/* ---------- actions ---------- */

.pub-header__actions[b-fj4mfzm9cu] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.pub-lang[b-fj4mfzm9cu],
.pub-signin[b-fj4mfzm9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(188, 157, 99, .24);
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    color: #625a4d;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.pub-cta[b-fj4mfzm9cu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    background: linear-gradient(180deg, #f2c951, #e5ad27);
    color: #553a04;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(214, 161, 32, .18);
    transition: transform .25s ease;
}

    .pub-cta:hover[b-fj4mfzm9cu] {
        transform: translateY(-2px);
    }

/* ---------- phone menu ---------- */

.pub-menu[b-fj4mfzm9cu],
.pub-mobilebar[b-fj4mfzm9cu] {
    display: none;
}

.pub-menu summary[b-fj4mfzm9cu] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(188, 157, 99, .24);
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    color: #4f473b;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .pub-menu summary[b-fj4mfzm9cu]::-webkit-details-marker {
        display: none;
    }

    .pub-menu summary svg[b-fj4mfzm9cu] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
    }

.pub-menu .pub-menu__close[b-fj4mfzm9cu],
.pub-menu[open] .pub-menu__open[b-fj4mfzm9cu] {
    display: none;
}

.pub-menu[open] .pub-menu__close[b-fj4mfzm9cu] {
    display: block;
}

.pub-menu[open] summary[b-fj4mfzm9cu] {
    border-color: transparent;
    background: #3b2f23;
    color: #fcd166;
}

.pub-menu__panel[b-fj4mfzm9cu] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    z-index: 10;
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(177, 137, 65, .18);
    border-radius: 22px;
    background: #fffdf8;
    box-shadow: 0 24px 60px rgba(45, 36, 25, .18);
    animation: pub-menu-in-b-fj4mfzm9cu .32s cubic-bezier(.16, 1, .3, 1) both;
}

.pub-menu__links[b-fj4mfzm9cu] {
    display: grid;
    gap: 2px;
}

    .pub-menu__links a[b-fj4mfzm9cu],
    .pub-menu__actions a[b-fj4mfzm9cu] {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 14px;
        color: #3d362c;
        font-size: .92rem;
        font-weight: 800;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

        .pub-menu__links a:active[b-fj4mfzm9cu] {
            background: rgba(216, 166, 52, .12);
        }

.pub-menu__group[b-fj4mfzm9cu] {
    display: block;
    margin-top: 8px;
    padding: 10px 14px 4px;
    border-top: 1px solid rgba(155, 125, 48, .18);
    color: #b78507;
    font-size: 12px;
    font-weight: 800;
}

.pub-menu__actions[b-fj4mfzm9cu] {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(177, 137, 65, .14);
}

    .pub-menu__actions a[b-fj4mfzm9cu] {
        justify-content: center;
        border: 1px solid rgba(188, 157, 99, .24);
        font-size: .82rem;
    }

    .pub-menu__actions .pub-menu__signin[b-fj4mfzm9cu] {
        border-color: transparent;
        background: #3b2f23;
        color: #fcd166;
    }

html[data-theme="dark"] .pub-menu__panel[b-fj4mfzm9cu] {
    border-color: rgba(255, 226, 178, .14);
    background: #17120c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

    html[data-theme="dark"] .pub-menu__links a[b-fj4mfzm9cu],
    html[data-theme="dark"] .pub-menu__actions a[b-fj4mfzm9cu] {
        color: #f6f2e8;
    }

html[data-theme="dark"] .pub-menu__actions .pub-menu__signin[b-fj4mfzm9cu] {
    color: #fcd166;
}

/* ---------- the bar under the thumb ---------- */

.pub-mobilebar a[b-fj4mfzm9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.pub-mobilebar__secondary[b-fj4mfzm9cu] {
    border: 1px solid rgba(188, 157, 99, .28);
    background: #fff;
    color: #4f473b;
}

.pub-mobilebar__primary[b-fj4mfzm9cu] {
    background: linear-gradient(180deg, #f2c951, #e5ad27);
    color: #553a04;
    box-shadow: 0 10px 22px rgba(214, 161, 32, .25);
}

    .pub-mobilebar__primary svg[b-fj4mfzm9cu] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

[dir="rtl"] .pub-mobilebar__primary svg[b-fj4mfzm9cu] {
    transform: scaleX(-1);
}

html[data-theme="dark"] .pub-mobilebar[b-fj4mfzm9cu] {
    border-color: rgba(255, 226, 178, .14);
    background: rgba(24, 19, 12, .9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .pub-mobilebar__secondary[b-fj4mfzm9cu] {
    border-color: rgba(255, 226, 178, .18);
    background: rgba(255, 226, 178, .06);
    color: #f6f2e8;
}

@keyframes pub-menu-in-b-fj4mfzm9cu {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-bar-in-b-fj4mfzm9cu {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* the same breakpoints as the home page header */

@media (max-width: 900px) {
    /* as on the home page: it scrolls away on a desktop, stays on a phone */
    .pub-header[b-fj4mfzm9cu] {
        position: sticky;
        top: 0;
    }

    .pub-header__inner[b-fj4mfzm9cu] {
        width: calc(100% - 28px);
        min-height: 64px;
        padding: 8px 0;
        gap: 10px;
    }

    .pub-nav[b-fj4mfzm9cu],
    .pub-signin[b-fj4mfzm9cu],
    .pub-brand__copy small[b-fj4mfzm9cu] {
        display: none;
    }

    .pub-header__actions[b-fj4mfzm9cu] {
        margin-inline-start: auto;
    }

    .pub-brand__mark[b-fj4mfzm9cu] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }

    .pub-lang[b-fj4mfzm9cu] {
        min-width: 44px;
    }

    .pub-menu[b-fj4mfzm9cu] {
        display: block;
        flex: none;
    }
}

@media (max-width: 720px) {
    .pub-cta[b-fj4mfzm9cu] {
        display: none;
    }

    .pub-mobilebar[b-fj4mfzm9cu] {
        position: fixed;
        inset-inline: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 6000;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(177, 137, 65, .2);
        border-radius: 22px;
        background: rgba(255, 253, 248, .9);
        -webkit-backdrop-filter: saturate(1.5) blur(20px);
        backdrop-filter: saturate(1.5) blur(20px);
        box-shadow: 0 16px 40px rgba(45, 36, 25, .18);
        animation: pub-bar-in-b-fj4mfzm9cu .5s .2s cubic-bezier(.16, 1, .3, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-menu__panel[b-fj4mfzm9cu],
    .pub-mobilebar[b-fj4mfzm9cu] {
        animation: none;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/ServicePage.razor.rz.scp.css */
/* =========================================================
   Public service pages. The look follows the home page:
   warm paper, gold, rounded cards, the same type.
   Every colour is a token here, redefined for the dark theme.
   ========================================================= */

.pub-page[b-5c82jfh2nm] {
    --pub-bg: #f7f3ec;
    --pub-ink: #221d18;
    --pub-text: #655e53;
    --pub-muted: #958b7b;
    --pub-line: rgba(155, 125, 48, .22);
    --pub-line-strong: rgba(77, 63, 24, .32);
    --pub-card: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(252, 249, 243, .97));
    --pub-card-solid: #fffdf8;
    --pub-gold-1: #f4cd58;
    --pub-gold-2: #e6ad25;
    --pub-gold-ink: #b78507;
    --pub-gold-soft: rgba(242, 197, 79, .14);
    --pub-gold-text: linear-gradient(115deg, #b98800 0%, #ab7e00 22%, #cb9500 45%, #bf8d00 68%, #a77b00 100%);
    --pub-shadow: 0 18px 40px rgba(87, 64, 22, .08);
    --pub-shadow-lift: 0 26px 54px rgba(87, 64, 22, .14);
    --pub-dark: linear-gradient(145deg, #211b15 0%, #19140f 100%);
    --pub-dark-ink: #f6ecd8;
    --pub-dark-text: #c9b99c;

    min-height: 100vh;
    overflow-x: clip;
    background:
        radial-gradient(950px 600px at 7% 0%, rgba(252, 209, 102, .3), transparent 62%),
        radial-gradient(850px 560px at 98% 18%, rgba(252, 209, 102, .07), transparent 63%),
        var(--pub-bg);
    color: var(--pub-ink);
    font-family: IRANSansX, Tahoma, Arial, sans-serif;
}

    .pub-page[lang="en"][b-5c82jfh2nm] {
        font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    }

html[data-theme="dark"] .pub-page[b-5c82jfh2nm] {
    --pub-bg: #15110d;
    --pub-ink: #f4ead7;
    --pub-text: #c8b99f;
    --pub-muted: #9a8b72;
    --pub-line: rgba(226, 179, 63, .16);
    --pub-line-strong: rgba(226, 179, 63, .3);
    --pub-card: linear-gradient(180deg, rgba(38, 31, 24, .96), rgba(30, 24, 18, .96));
    --pub-card-solid: #241d16;
    --pub-gold-ink: #f0c85c;
    --pub-gold-soft: rgba(242, 197, 79, .12);
    --pub-gold-text: linear-gradient(115deg, #f6cf5f 0%, #e8b432 30%, #ffd977 52%, #e6ad25 76%, #f2c34a 100%);
    --pub-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    --pub-shadow-lift: 0 26px 54px rgba(0, 0, 0, .42);
    --pub-dark: linear-gradient(145deg, #2b2219 0%, #1f1912 100%);

    background:
        radial-gradient(950px 600px at 7% 0%, rgba(214, 160, 40, .14), transparent 62%),
        var(--pub-bg);
}

.pub-container[b-5c82jfh2nm] {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

/* ---------- shared pieces ---------- */

.pub-kicker[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(226, 179, 63, .34);
    border-radius: 999px;
    background: var(--pub-gold-soft);
    color: var(--pub-gold-ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}

    .pub-page[lang="en"] .pub-kicker[b-5c82jfh2nm] {
        letter-spacing: .06em;
    }

.pub-button[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 16px;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.pub-button--primary[b-5c82jfh2nm] {
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    box-shadow: 0 14px 32px rgba(214, 159, 34, .22), inset 0 1px 0 rgba(255, 255, 255, .4);
}

    .pub-button--primary:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(214, 159, 34, .32), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

.pub-button--ghost[b-5c82jfh2nm] {
    border: 1px solid var(--pub-line-strong);
    background: rgba(255, 255, 255, .62);
    color: var(--pub-ink);
}

    .pub-button--ghost:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .9);
    }

    .pub-button--ghost i[b-5c82jfh2nm] {
        font-style: normal;
        font-size: .72rem;
        color: var(--pub-gold-ink);
    }

html[data-theme="dark"] .pub-button--ghost[b-5c82jfh2nm] {
    background: rgba(255, 255, 255, .05);
}

    html[data-theme="dark"] .pub-button--ghost:hover[b-5c82jfh2nm] {
        background: rgba(255, 255, 255, .1);
    }

.pub-button:focus-visible[b-5c82jfh2nm],
.pub-samples__labels label:focus-visible[b-5c82jfh2nm] {
    outline: 3px solid rgba(230, 173, 37, .55);
    outline-offset: 3px;
}

/* ---------- hero ---------- */

.pub-hero[b-5c82jfh2nm] {
    position: relative;
    padding: 44px 0 72px;
}

.pub-hero__glow[b-5c82jfh2nm] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.pub-hero__glow--one[b-5c82jfh2nm] {
    inset-block-start: -60px;
    inset-inline-end: 8%;
    width: 380px;
    height: 380px;
    background: rgba(252, 209, 102, .32);
    animation: pub-drift-a-b-5c82jfh2nm 14s ease-in-out infinite alternate;
}

.pub-hero__glow--two[b-5c82jfh2nm] {
    inset-block-end: -40px;
    inset-inline-start: 4%;
    width: 300px;
    height: 300px;
    background: rgba(230, 173, 37, .16);
    animation: pub-drift-b-b-5c82jfh2nm 16s ease-in-out infinite alternate;
}

.pub-hero__layout[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 48px;
    padding: 46px 48px;
    border: 1px solid rgba(77, 63, 24, .14);
    border-radius: 34px;
    background:
        radial-gradient(circle at 100% 0%, rgba(252, 209, 102, .18), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(250, 245, 234, .72));
    box-shadow: 0 30px 70px rgba(59, 48, 23, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
}

html[data-theme="dark"] .pub-hero__layout[b-5c82jfh2nm] {
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 160, 40, .12), transparent 42%),
        linear-gradient(180deg, rgba(40, 32, 24, .82), rgba(28, 22, 17, .82));
    border-color: var(--pub-line);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.pub-crumbs[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--pub-muted);
    font-size: .82rem;
    animation: pub-rise-b-5c82jfh2nm .7s cubic-bezier(.2, .8, .2, 1) both;
}

    .pub-crumbs a[b-5c82jfh2nm] {
        color: inherit;
        text-decoration: none;
    }

        .pub-crumbs a:hover[b-5c82jfh2nm] {
            color: var(--pub-gold-ink);
        }

.pub-hero__copy .pub-kicker[b-5c82jfh2nm] {
    animation: pub-rise-b-5c82jfh2nm .7s .05s cubic-bezier(.2, .8, .2, 1) both;
}

.pub-hero__title[b-5c82jfh2nm] {
    margin: 18px 0 18px;
    font-size: clamp(2.1rem, 4.2vw, 3.45rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--pub-ink);
    animation: pub-rise-b-5c82jfh2nm .8s .12s cubic-bezier(.2, .8, .2, 1) both;
}

    .pub-hero__title span[b-5c82jfh2nm] {
        display: block;
    }

    .pub-hero__title strong[b-5c82jfh2nm] {
        display: block;
        font-weight: 700;
        background:
            linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 250, 210, .95) 50%, transparent 62%, transparent 100%),
            var(--pub-gold-text);
        background-size: 250% 100%, 100% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: pub-shine-b-5c82jfh2nm 6.5s ease-in-out 1.2s infinite;
    }

.pub-hero__lead[b-5c82jfh2nm] {
    max-width: 560px;
    margin: 0 0 30px;
    color: var(--pub-text);
    font-size: 1.04rem;
    line-height: 2;
    animation: pub-rise-b-5c82jfh2nm .8s .2s cubic-bezier(.2, .8, .2, 1) both;
}

.pub-page[lang="en"] .pub-hero__lead[b-5c82jfh2nm] {
    line-height: 1.75;
}

.pub-hero__actions[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: pub-rise-b-5c82jfh2nm .8s .28s cubic-bezier(.2, .8, .2, 1) both;
}

/* the page that becomes its translation */

.pub-hero__stage[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 460px;
    animation: pub-rise-b-5c82jfh2nm 1s .18s cubic-bezier(.2, .8, .2, 1) both;
}

.pub-stage__ring[b-5c82jfh2nm] {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(201, 150, 26, .35);
}

.pub-stage__ring--one[b-5c82jfh2nm] {
    width: 430px;
    height: 430px;
    animation: pub-spin-b-5c82jfh2nm 60s linear infinite;
}

.pub-stage__ring--two[b-5c82jfh2nm] {
    width: 330px;
    height: 330px;
    border-style: solid;
    border-color: rgba(201, 150, 26, .18);
    animation: pub-spin-b-5c82jfh2nm 40s linear infinite reverse;
}

.pub-morph[b-5c82jfh2nm] {
    position: relative;
    width: min(330px, 100%);
    overflow: hidden;
    border: 1px solid rgba(77, 63, 24, .18);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 34px 70px rgba(59, 48, 23, .22), 0 2px 0 rgba(255, 255, 255, .7) inset;
    transform: rotate(-2.5deg);
    animation: pub-hover-b-5c82jfh2nm 7s ease-in-out infinite;
}

/* a landscape page (a poster, a slide) is as wide as the stage, not a portrait page's width */
.pub-morph--wide[b-5c82jfh2nm] {
    width: min(520px, 100%);
}

.pub-morph__page[b-5c82jfh2nm] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-morph__page--after[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 100% 0 0);
    animation: pub-reveal-b-5c82jfh2nm 8s cubic-bezier(.6, 0, .3, 1) .6s infinite;
}

.pub-morph__scan[b-5c82jfh2nm] {
    position: absolute;
    inset-block: -4%;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, #f4cd58 18%, #fff3c4 50%, #f4cd58 82%, transparent);
    box-shadow: 0 0 22px 6px rgba(244, 205, 88, .55);
    opacity: 0;
    animation: pub-scan-b-5c82jfh2nm 8s cubic-bezier(.6, 0, .3, 1) .6s infinite;
}

.pub-chip[b-5c82jfh2nm] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(226, 179, 63, .36);
    border-radius: 14px;
    background: var(--pub-card-solid);
    color: var(--pub-ink);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 16px 34px rgba(59, 48, 23, .14);
    z-index: 2;
}

    .pub-chip svg[b-5c82jfh2nm] {
        width: 18px;
        height: 18px;
        padding: 3px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        fill: none;
        stroke: #2b210d;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-chip--1[b-5c82jfh2nm] {
    inset-block-start: 16%;
    inset-inline-start: -2%;
    animation: pub-float-b-5c82jfh2nm 5.5s ease-in-out infinite;
}

.pub-chip--2[b-5c82jfh2nm] {
    inset-block-end: 20%;
    inset-inline-end: -4%;
    animation: pub-float-b-5c82jfh2nm 6.5s ease-in-out .8s infinite;
}

.pub-chip--3[b-5c82jfh2nm] {
    inset-block-end: 4%;
    inset-inline-start: 6%;
    animation: pub-float-b-5c82jfh2nm 6s ease-in-out 1.6s infinite;
}

/* ---------- sections ---------- */

.pub-page[b-5c82jfh2nm] {
    interpolate-size: allow-keywords;
}

.pub-section[b-5c82jfh2nm] {
    padding: 80px 0;
}

.pub-section__head[b-5c82jfh2nm] {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

    .pub-section__head h2[b-5c82jfh2nm] {
        margin: 16px 0 12px;
        font-size: clamp(1.65rem, 3vw, 2.35rem);
        font-weight: 700;
        line-height: 1.35;
        color: var(--pub-ink);
    }

    .pub-section__head p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-text);
        line-height: 1.9;
    }

.pub-section__head--dark h2[b-5c82jfh2nm] {
    color: var(--pub-dark-ink);
}

.pub-section__head--dark p[b-5c82jfh2nm] {
    color: var(--pub-dark-text);
}

.pub-kicker--dark[b-5c82jfh2nm] {
    border-color: rgba(240, 200, 92, .34);
    background: rgba(240, 200, 92, .1);
    color: #f0c85c;
}

.pub-button--glass[b-5c82jfh2nm] {
    border: 1px solid rgba(255, 236, 190, .2);
    background: rgba(255, 255, 255, .06);
    color: var(--pub-dark-ink);
    backdrop-filter: blur(8px);
}

    .pub-button--glass:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .12);
    }

/* ================= ribbon: what it is made for ================= */

.pub-ribbon[b-5c82jfh2nm] {
    padding: 0 0 12px;
    margin-top: -36px;
    position: relative;
    z-index: 2;
}

.pub-ribbon__inner[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 12px 12px 20px;
    border: 1px solid var(--pub-line);
    border-radius: 22px;
    background: var(--pub-card-solid);
    box-shadow: var(--pub-shadow);
}

.pub-page[dir="rtl"] .pub-ribbon__inner[b-5c82jfh2nm] {
    padding: 12px 20px 12px 12px;
}

.pub-ribbon__label[b-5c82jfh2nm] {
    flex: 0 0 auto;
    padding-inline-end: 18px;
    border-inline-end: 1px solid var(--pub-line);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    background: var(--pub-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pub-ribbon__viewport[b-5c82jfh2nm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.pub-ribbon__track[b-5c82jfh2nm] {
    display: flex;
    width: max-content;
    animation: pub-marquee-b-5c82jfh2nm 36s linear infinite;
}

.pub-page[dir="rtl"] .pub-ribbon__track[b-5c82jfh2nm] {
    animation-name: pub-marquee-rtl-b-5c82jfh2nm;
}

.pub-ribbon:hover .pub-ribbon__track[b-5c82jfh2nm] {
    animation-play-state: paused;
}

.pub-ribbon ul[b-5c82jfh2nm] {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    padding-inline-end: 10px;
    list-style: none;
}

.pub-ribbon li[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--pub-line);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(250, 243, 228, .7));
    color: var(--pub-ink);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

html[data-theme="dark"] .pub-ribbon li[b-5c82jfh2nm] {
    background: rgba(255, 255, 255, .04);
}

    .pub-ribbon li svg[b-5c82jfh2nm] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: var(--pub-gold-2);
        stroke-width: 1.8;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

/* ================= showcase: real samples ================= */

.pub-showcase[b-5c82jfh2nm] {
    position: relative;
    width: min(1400px, calc(100% - 24px));
    margin: 56px auto 0;
    padding: 88px 0 96px;
    overflow: hidden;
    border-radius: 44px;
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(240, 191, 75, .16), transparent 70%),
        linear-gradient(180deg, #211a14 0%, #15110d 100%);
    box-shadow: 0 40px 90px rgba(33, 27, 21, .28);
    isolation: isolate;
}

    .pub-showcase[b-5c82jfh2nm]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: radial-gradient(rgba(255, 225, 150, .1) 1px, transparent 1.2px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
        mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
    }

.pub-showcase__glow[b-5c82jfh2nm] {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.pub-showcase__glow--one[b-5c82jfh2nm] {
    top: 22%;
    inset-inline-start: -8%;
    width: 420px;
    height: 420px;
    background: rgba(230, 173, 37, .18);
    animation: pub-drift-a-b-5c82jfh2nm 18s ease-in-out infinite alternate;
}

.pub-showcase__glow--two[b-5c82jfh2nm] {
    bottom: -12%;
    inset-inline-end: -6%;
    width: 480px;
    height: 480px;
    background: rgba(183, 121, 29, .16);
    animation: pub-drift-b-b-5c82jfh2nm 20s ease-in-out infinite alternate;
}

.pub-showcase__body[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.pub-showcase__radio[b-5c82jfh2nm] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* the rail of samples */

.pub-showcase__rail[b-5c82jfh2nm] {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pub-thumb[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 236, 190, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
    color: var(--pub-dark-text);
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

    .pub-thumb:hover[b-5c82jfh2nm] {
        transform: translateX(0) translateY(-2px);
        border-color: rgba(240, 200, 92, .3);
        background: rgba(255, 255, 255, .06);
    }

.pub-thumb__img[b-5c82jfh2nm] {
    display: block;
    height: 72px;
    overflow: hidden;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

    .pub-thumb__img img[b-5c82jfh2nm] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform .5s cubic-bezier(.2, .8, .2, 1);
    }

.pub-thumb__copy[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .pub-thumb__copy small[b-5c82jfh2nm] {
        color: #9a8b72;
        font-size: .74rem;
        font-weight: 700;
    }

    .pub-thumb__copy strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: .95rem;
        font-weight: 700;
    }

.pub-thumb__format[b-5c82jfh2nm] {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(226, 92, 70, .2);
    color: #f29a86;
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 1px;
}

.pub-thumb__format--docx[b-5c82jfh2nm] {
    background: rgba(77, 140, 230, .2);
    color: #8fb8f2;
}

.pub-thumb__format--pptx[b-5c82jfh2nm] {
    background: rgba(230, 120, 60, .2);
    color: #f2ad86;
}

/* a slide is wider than tall: its thumbnail shows the whole of it */
.pub-thumb__img--wide img[b-5c82jfh2nm] {
    object-fit: contain;
    object-position: center;
}

.pub-thumb__arrow[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.pub-page[dir="ltr"] .pub-thumb__arrow[b-5c82jfh2nm] {
    transform: translateX(-6px) scaleX(-1);
}

    .pub-thumb__arrow svg[b-5c82jfh2nm] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #f0c85c;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__rail .pub-thumb:nth-child(1)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__rail .pub-thumb:nth-child(2)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__rail .pub-thumb:nth-child(3)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__rail .pub-thumb:nth-child(4)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__rail .pub-thumb:nth-child(5)[b-5c82jfh2nm] {
    border-color: rgba(240, 200, 92, .6);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(240, 191, 75, .22), transparent 60%),
        rgba(255, 255, 255, .06);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(240, 200, 92, .12);
}

    .pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__rail .pub-thumb:nth-child(1) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__rail .pub-thumb:nth-child(2) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__rail .pub-thumb:nth-child(3) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__rail .pub-thumb:nth-child(4) .pub-thumb__arrow[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__rail .pub-thumb:nth-child(5) .pub-thumb__arrow[b-5c82jfh2nm] {
        opacity: 1;
        transform: none;
    }

.pub-page[dir="ltr"] .pub-showcase__radio:checked ~ .pub-showcase__rail .pub-thumb .pub-thumb__arrow[b-5c82jfh2nm] {
    transform: scaleX(-1);
}

    .pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__rail .pub-thumb:nth-child(1) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__rail .pub-thumb:nth-child(2) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__rail .pub-thumb:nth-child(3) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__rail .pub-thumb:nth-child(4) img[b-5c82jfh2nm],
    .pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__rail .pub-thumb:nth-child(5) img[b-5c82jfh2nm] {
        transform: scale(1.12);
    }

.pub-showcase__radio:nth-of-type(1):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(1)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(2):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(2)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(3):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(3)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(4):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(4)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(5):focus-visible ~ .pub-showcase__rail .pub-thumb:nth-child(5)[b-5c82jfh2nm] {
    outline: 3px solid rgba(230, 173, 37, .6);
    outline-offset: 3px;
}

/* one sample: the viewer and its notes */

.pub-sample[b-5c82jfh2nm] {
    display: none;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 30px;
    margin: 0;
}

.pub-showcase__radio:nth-of-type(1):checked ~ .pub-showcase__panels .pub-sample:nth-child(1)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(2):checked ~ .pub-showcase__panels .pub-sample:nth-child(2)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(3):checked ~ .pub-showcase__panels .pub-sample:nth-child(3)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(4):checked ~ .pub-showcase__panels .pub-sample:nth-child(4)[b-5c82jfh2nm],
.pub-showcase__radio:nth-of-type(5):checked ~ .pub-showcase__panels .pub-sample:nth-child(5)[b-5c82jfh2nm] {
    display: grid;
    animation: pub-swap-b-5c82jfh2nm .6s cubic-bezier(.2, .8, .2, 1) both;
}

/* a slide beside the notes would be a strip; it takes the whole width
   and the notes go under it, two to a row */
.pub-sample--wide[b-5c82jfh2nm] {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

    .pub-sample--wide .pub-viewer[b-5c82jfh2nm] {
        width: 100%;
    }

    .pub-sample--wide .pub-notes[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-sample--wide .pub-switch[b-5c82jfh2nm] {
        max-width: 360px;
    }

.pub-viewer[b-5c82jfh2nm] {
    justify-self: center;
    width: min(540px, 100%);
    padding: 10px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(58, 47, 36, .9), rgba(36, 29, 22, .9));
    box-shadow:
        0 50px 90px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.pub-viewer__chrome[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    padding: 0 6px 8px;
    color: #c9b99c;
    font-size: .78rem;
    font-weight: 700;
}

.pub-viewer__dots[b-5c82jfh2nm] {
    display: inline-flex;
    gap: 6px;
}

    .pub-viewer__dots i[b-5c82jfh2nm] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #5a4a38;
    }

        .pub-viewer__dots i:first-child[b-5c82jfh2nm] {
            background: #e0795f;
        }

        .pub-viewer__dots i:nth-child(2)[b-5c82jfh2nm] {
            background: #f0c85c;
        }

        .pub-viewer__dots i:nth-child(3)[b-5c82jfh2nm] {
            background: #7fc48a;
        }

.pub-viewer__file[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    direction: ltr;
}

    .pub-viewer__file svg[b-5c82jfh2nm] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: #f0c85c;
        stroke-width: 1.8;
        stroke-linejoin: round;
    }

.pub-viewer__live[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f0c85c;
}

    .pub-viewer__live i[b-5c82jfh2nm] {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #7fc48a;
    }

        .pub-viewer__live i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 1.5px solid #7fc48a;
            animation: pub-ping-b-5c82jfh2nm 2s ease-out infinite;
        }

/* the before / after slider */

.pub-compare[b-5c82jfh2nm] {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    user-select: none;
    animation: pub-sweep-b-5c82jfh2nm 3.4s cubic-bezier(.65, 0, .35, 1) .7s 1;
}

    .pub-compare.is-touched[b-5c82jfh2nm] {
        animation: none;
    }

.pub-compare__img[b-5c82jfh2nm] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-compare__img--after[b-5c82jfh2nm],
.pub-compare__pins[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--pos));
}

.pub-compare__pins[b-5c82jfh2nm] {
    pointer-events: none;
}

.pub-pin[b-5c82jfh2nm] {
    position: absolute;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(120, 82, 6, .45);
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s ease;
    animation: pub-pin-in-b-5c82jfh2nm .6s cubic-bezier(.3, 1.6, .5, 1) both;
    animation-delay: calc(1.2s + var(--d, 0) * .18s);
}

    .pub-pin[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: -6px;
        border: 2px solid rgba(240, 191, 75, .8);
        border-radius: 50%;
        animation: pub-ping-b-5c82jfh2nm 2.4s ease-out infinite;
        animation-delay: calc(var(--d, 0) * .5s);
    }

.pub-sample:has(.pub-notes li:nth-child(1):hover) .pub-pin:nth-child(1)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(2):hover) .pub-pin:nth-child(2)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(3):hover) .pub-pin:nth-child(3)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(4):hover) .pub-pin:nth-child(4)[b-5c82jfh2nm],
.pub-sample:has(.pub-notes li:nth-child(5):hover) .pub-pin:nth-child(5)[b-5c82jfh2nm] {
    transform: translate(-50%, -50%) scale(1.4);
    background: #fff;
}

.pub-compare__handle[b-5c82jfh2nm] {
    position: absolute;
    inset-block: 0;
    left: var(--pos);
    width: 2px;
    background: linear-gradient(180deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 0 18px rgba(244, 205, 88, .7);
    transform: translateX(-1px);
    pointer-events: none;
}

    .pub-compare__handle span[b-5c82jfh2nm] {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        box-shadow: 0 10px 26px rgba(120, 82, 6, .45);
        transform: translate(-50%, -50%);
    }

    .pub-compare__handle svg[b-5c82jfh2nm] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-compare__tag[b-5c82jfh2nm] {
    position: absolute;
    inset-block-start: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(28, 23, 17, .8);
    color: #fff7e5;
    font-size: .74rem;
    font-weight: 700;
    pointer-events: none;
    backdrop-filter: blur(6px);
}

.pub-compare__tag--before[b-5c82jfh2nm] {
    left: 12px;
}

.pub-compare__tag--after[b-5c82jfh2nm] {
    right: 12px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
}

.pub-compare__range[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
}

.pub-compare:has(.pub-compare__range:focus-visible)[b-5c82jfh2nm] {
    outline: 3px solid rgba(230, 173, 37, .6);
    outline-offset: 4px;
}

/* the notes beside the viewer */

.pub-sample__aside[b-5c82jfh2nm] {
    position: relative;
    padding: 28px 26px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(240, 191, 75, .12), transparent 60%),
        rgba(255, 255, 255, .04);
    color: var(--pub-dark-text);
    backdrop-filter: blur(10px);
}

.pub-sample__index[b-5c82jfh2nm] {
    color: #f0c85c;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}

    .pub-sample__index i[b-5c82jfh2nm] {
        font-style: normal;
        opacity: .45;
        margin-inline: 2px;
    }

.pub-sample__aside h3[b-5c82jfh2nm] {
    margin: 10px 0 10px;
    color: var(--pub-dark-ink);
    font-size: 1.45rem;
    font-weight: 700;
}

.pub-sample__aside p[b-5c82jfh2nm] {
    margin: 0 0 20px;
    font-size: .93rem;
    line-height: 1.95;
}

.pub-notes[b-5c82jfh2nm] {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

    .pub-notes li[b-5c82jfh2nm] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 236, 190, .08);
        border-radius: 14px;
        background: rgba(0, 0, 0, .18);
        color: var(--pub-dark-ink);
        font-size: .88rem;
        font-weight: 600;
        cursor: default;
        transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
        animation: pub-note-in-b-5c82jfh2nm .5s cubic-bezier(.2, .8, .2, 1) both;
        animation-delay: calc(.25s + var(--d, 0) * .09s);
    }

        .pub-notes li:hover[b-5c82jfh2nm] {
            border-color: rgba(240, 200, 92, .45);
            background: rgba(240, 191, 75, .1);
            transform: translateX(-3px);
        }

.pub-page[dir="ltr"] .pub-notes li:hover[b-5c82jfh2nm] {
    transform: translateX(3px);
}

.pub-notes b[b-5c82jfh2nm] {
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-size: .75rem;
}

.pub-switch[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 14px;
    background: rgba(0, 0, 0, .25);
}

    .pub-switch button[b-5c82jfh2nm] {
        min-height: 36px;
        padding: 0 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--pub-dark-text);
        font: inherit;
        font-size: .84rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .25s ease, color .25s ease;
    }

        .pub-switch button:hover[b-5c82jfh2nm] {
            color: var(--pub-dark-ink);
        }

        .pub-switch button.is-active[b-5c82jfh2nm] {
            background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
            color: #2b210d;
            box-shadow: 0 6px 16px rgba(214, 159, 34, .3);
        }

        .pub-switch button:focus-visible[b-5c82jfh2nm] {
            outline: 2px solid #f0c85c;
            outline-offset: 2px;
        }

/* ================= bento: what it does ================= */

.pub-bento[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 18px;
}

.pub-bento__card[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 28px;
    background: var(--pub-card);
    box-shadow: var(--pub-shadow);
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

    .pub-bento__card[b-5c82jfh2nm]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(380px circle at var(--mx) var(--my), rgba(244, 205, 88, .16), transparent 45%);
        opacity: 0;
        transition: opacity .35s ease;
    }

    .pub-bento__card[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1.5px;
        border-radius: inherit;
        background: radial-gradient(240px circle at var(--mx) var(--my), rgba(240, 191, 75, .95), transparent 60%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
    }

    .pub-bento__card:hover[b-5c82jfh2nm] {
        transform: translateY(-5px);
        box-shadow: var(--pub-shadow-lift);
    }

        .pub-bento__card:hover[b-5c82jfh2nm]::before,
        .pub-bento__card:hover[b-5c82jfh2nm]::after {
            opacity: 1;
        }

    /* the first card is the big one */
    .pub-bento__card:nth-child(1)[b-5c82jfh2nm] {
        grid-column: span 3;
        grid-row: span 2;
        border-color: rgba(226, 179, 63, .2);
        background:
            radial-gradient(90% 70% at 100% 0%, rgba(240, 191, 75, .2), transparent 60%),
            var(--pub-dark);
    }

        .pub-bento__card:nth-child(1) h3[b-5c82jfh2nm] {
            color: var(--pub-dark-ink);
            font-size: 1.4rem;
        }

        .pub-bento__card:nth-child(1) p[b-5c82jfh2nm] {
            color: var(--pub-dark-text);
        }

        .pub-bento__card:nth-child(1) .pub-art[b-5c82jfh2nm] {
            flex: 1 1 auto;
            min-height: 300px;
            background:
                radial-gradient(60% 60% at 50% 50%, rgba(240, 191, 75, .14), transparent 70%),
                rgba(255, 255, 255, .03);
            border-color: rgba(255, 236, 190, .08);
        }

    /* the next two lie on their side */
    .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
        grid-column: span 3;
        flex-direction: row;
        align-items: stretch;
    }

        .pub-bento__card:nth-child(2) .pub-art[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3) .pub-art[b-5c82jfh2nm] {
            flex: 0 0 42%;
            margin: 10px;
            margin-inline-end: 0;
        }

        .pub-bento__card:nth-child(2) .pub-bento__copy[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3) .pub-bento__copy[b-5c82jfh2nm] {
            align-self: center;
        }

.pub-bento__copy[b-5c82jfh2nm] {
    padding: 22px 26px 26px;
}

.pub-bento__icon[b-5c82jfh2nm] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 10px 22px rgba(214, 159, 34, .25);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

    .pub-bento__icon[b-5c82jfh2nm]  svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-bento__card:hover .pub-bento__icon[b-5c82jfh2nm] {
    transform: rotate(-8deg) scale(1.08);
}

.pub-bento__copy h3[b-5c82jfh2nm] {
    margin: 0 0 8px;
    color: var(--pub-ink);
    font-size: 1.12rem;
    font-weight: 700;
}

.pub-bento__copy p[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-text);
    font-size: .93rem;
    line-height: 1.95;
}

/* ---------- the little moving pictures ---------- */

.pub-art[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 168px;
    margin: 10px 10px 0;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 20px;
    background:
        linear-gradient(rgba(155, 125, 48, .07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, rgba(155, 125, 48, .07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(180deg, rgba(255, 249, 235, .8), rgba(250, 242, 224, .6));
}

html[data-theme="dark"] .pub-art[b-5c82jfh2nm] {
    background:
        linear-gradient(rgba(240, 200, 92, .06) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, rgba(240, 200, 92, .06) 1px, transparent 1px) 0 0 / 18px 18px,
        rgba(255, 255, 255, .03);
}

.art-icon[b-5c82jfh2nm]  svg {
    width: 56px;
    height: 56px;
    fill: none;
    stroke: var(--pub-gold-2);
    stroke-width: 1.4;
}

/* layout: a translation layer lands on the original page */

.pub-art--layout[b-5c82jfh2nm] {
    perspective: 900px;
}

.art-sheet[b-5c82jfh2nm] {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    width: 196px;
    height: 262px;
    padding: 14px;
    border-radius: 12px;
    translate: -50% -50%;
}

.art-sheet--base[b-5c82jfh2nm] {
    background: #fbf7ee;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.art-band[b-5c82jfh2nm] {
    align-self: stretch;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(90deg, #2c4a5a, #3d6d7e);
}

.art-block[b-5c82jfh2nm] {
    border-radius: 6px;
}

.art-block--photo[b-5c82jfh2nm] {
    width: 58%;
    height: 62px;
    background: linear-gradient(135deg, #7fb7c4, #3d6d7e);
}

.art-block--chart[b-5c82jfh2nm] {
    align-self: stretch;
    height: 46px;
    margin-top: auto;
    background:
        linear-gradient(0deg, #e6ad25 0 40%, transparent 40%) 10% 100% / 12% 100% no-repeat,
        linear-gradient(0deg, #e6ad25 0 70%, transparent 70%) 32% 100% / 12% 100% no-repeat,
        linear-gradient(0deg, #e6ad25 0 55%, transparent 55%) 54% 100% / 12% 100% no-repeat,
        linear-gradient(0deg, #e6ad25 0 85%, transparent 85%) 76% 100% / 12% 100% no-repeat,
        #f3ead6;
}

.art-line[b-5c82jfh2nm] {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background: #cfc5b3;
}

.art-line--s[b-5c82jfh2nm] {
    width: 72%;
}

.art-line--m[b-5c82jfh2nm] {
    width: 86%;
}

.art-sheet--base .art-line[b-5c82jfh2nm] {
    animation: pub-art-fade-b-5c82jfh2nm 6s ease-in-out infinite;
}

.art-sheet--layer[b-5c82jfh2nm] {
    padding-top: calc(14px + 18px + 7px + 62px + 7px);
    border: 1.5px dashed rgba(240, 191, 75, .8);
    background: rgba(240, 191, 75, .06);
    animation: pub-art-land-b-5c82jfh2nm 6s cubic-bezier(.3, .8, .2, 1) infinite;
}

    .art-sheet--layer .art-line[b-5c82jfh2nm] {
        background: linear-gradient(90deg, #e6ad25, #ffd977);
        box-shadow: 0 0 10px rgba(244, 205, 88, .5);
    }

.art-tag[b-5c82jfh2nm] {
    position: absolute;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.art-tag--one[b-5c82jfh2nm] {
    bottom: 12%;
    inset-inline-start: 7%;
    background: #fbf7ee;
    color: #3a2f22;
    animation: pub-float-b-5c82jfh2nm 5s ease-in-out infinite;
}

.art-tag--two[b-5c82jfh2nm] {
    top: 11%;
    inset-inline-end: 7%;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    animation: pub-float-b-5c82jfh2nm 6s ease-in-out .8s infinite;
}

/* mirror: the picture and the text change sides */

.art-mirror[b-5c82jfh2nm] {
    position: relative;
    width: 80%;
    max-width: 230px;
}

.art-mirror__page[b-5c82jfh2nm] {
    position: relative;
    display: block;
    height: 124px;
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 18px 36px rgba(87, 64, 22, .16);
}

.art-mirror__pic[b-5c82jfh2nm],
.art-mirror__text[b-5c82jfh2nm] {
    position: absolute;
    top: 14px;
    bottom: 14px;
    width: 38%;
    animation: pub-art-swap-b-5c82jfh2nm 5s cubic-bezier(.7, 0, .3, 1) infinite;
}

.art-mirror__pic[b-5c82jfh2nm] {
    left: 8%;
    border-radius: 8px;
    background: linear-gradient(135deg, #f4cd58, #d89a1c);
}

.art-mirror__text[b-5c82jfh2nm] {
    left: 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    animation-name: pub-art-swap-back-b-5c82jfh2nm;
}

    .art-mirror__text b[b-5c82jfh2nm] {
        display: block;
        height: 7px;
        border-radius: 4px;
        background: #cfc5b3;
    }

        .art-mirror__text b:nth-child(2)[b-5c82jfh2nm] {
            width: 70%;
        }

        .art-mirror__text b:nth-child(4)[b-5c82jfh2nm] {
            width: 82%;
        }

.art-mirror__axis[b-5c82jfh2nm] {
    position: absolute;
    inset-block: -14px;
    left: 50%;
    border-left: 1.5px dashed rgba(201, 150, 26, .7);
}

    .art-mirror__axis[b-5c82jfh2nm]::after {
        content: "⇄";
        position: absolute;
        bottom: -12px;
        left: 50%;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        color: #2b210d;
        font-size: .85rem;
        font-style: normal;
        font-weight: 700;
        transform: translateX(-50%);
        box-shadow: 0 6px 14px rgba(214, 159, 34, .35);
    }

/* scan: a beam reads the page */

.art-scan[b-5c82jfh2nm] {
    position: relative;
    width: 70%;
    max-width: 200px;
    height: 130px;
    padding: 16px;
    border-radius: 12px;
    background: #f5efe2;
    box-shadow: 0 18px 36px rgba(87, 64, 22, .16);
}

.art-scan__layer[b-5c82jfh2nm] {
    position: absolute;
    inset: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .art-scan__layer i[b-5c82jfh2nm] {
        display: block;
        height: 7px;
        border-radius: 4px;
    }

        .art-scan__layer i:nth-child(2n)[b-5c82jfh2nm] {
            width: 78%;
        }

.art-scan__layer--faint i[b-5c82jfh2nm] {
    background: repeating-linear-gradient(90deg, #cdbfa3 0 6px, transparent 6px 10px);
    opacity: .7;
}

.art-scan__layer--read[b-5c82jfh2nm] {
    clip-path: inset(0 0 100% 0);
    animation: pub-art-read-b-5c82jfh2nm 3.6s ease-in-out infinite;
}

    .art-scan__layer--read i[b-5c82jfh2nm] {
        background: #3a2f22;
    }

.art-scan__beam[b-5c82jfh2nm] {
    position: absolute;
    left: -6%;
    right: -6%;
    top: 18px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #f4cd58 20%, #fff3c4 50%, #f4cd58 80%, transparent);
    box-shadow: 0 0 18px 5px rgba(244, 205, 88, .55);
    animation: pub-art-beam-b-5c82jfh2nm 3.6s ease-in-out infinite;
}

/* formula: table marks pop into their cells; the formula stays */

.pub-art--formula[b-5c82jfh2nm] {
    grid-auto-flow: column;
    gap: 18px;
}

.art-grid[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(4, 26px);
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 14px 30px rgba(87, 64, 22, .14);
}

    .art-grid i[b-5c82jfh2nm] {
        display: grid;
        place-items: center;
        height: 22px;
        border-radius: 5px;
        background: #f3ead6;
        color: #b78507;
        font-size: .72rem;
        font-style: normal;
        font-weight: 700;
        animation: pub-art-pop-b-5c82jfh2nm 4s ease-out infinite;
        animation-delay: calc(var(--c) * .1s);
    }

        .art-grid i:nth-child(4n + 2)[b-5c82jfh2nm] {
            color: #c4573d;
        }

.art-formula[b-5c82jfh2nm] {
    padding: 10px 14px;
    border: 1px solid rgba(226, 179, 63, .45);
    border-radius: 12px;
    background: var(--pub-card-solid);
    color: var(--pub-ink);
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: 1.05rem;
    font-style: italic;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(87, 64, 22, .12);
    animation: pub-float-b-5c82jfh2nm 5s ease-in-out infinite;
}

/* figure: the labels of a chart change language */

.art-flow[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 22px;
    direction: ltr;
}

.art-flow__node[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    width: 70px;
    height: 36px;
    border: 1.5px solid rgba(226, 179, 63, .7);
    border-radius: 10px;
    background: var(--pub-card-solid);
    box-shadow: 0 10px 22px rgba(87, 64, 22, .12);
}

    .art-flow__node:not(:last-child)[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: 22px;
        height: 2px;
        background: linear-gradient(90deg, rgba(226, 179, 63, .7), #e6ad25);
    }

    .art-flow__node b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        place-self: center;
        font-size: .74rem;
        font-weight: 700;
        color: var(--pub-ink);
        animation: pub-art-lang-b-5c82jfh2nm 5s ease-in-out infinite;
        animation-delay: calc(var(--n) * .35s);
    }

    .art-flow__node .art-flow__fa[b-5c82jfh2nm] {
        font-family: IRANSansX, Tahoma, sans-serif;
        color: var(--pub-gold-ink);
        animation-name: pub-art-lang-in-b-5c82jfh2nm;
    }

/* check: a ring fills while each figure is ticked */

.art-check[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 22px;
}

.art-check__ring[b-5c82jfh2nm] {
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
}

    .art-check__ring circle[b-5c82jfh2nm] {
        fill: none;
        stroke: rgba(226, 179, 63, .2);
        stroke-width: 6;
    }

    .art-check__ring .art-check__arc[b-5c82jfh2nm] {
        stroke: #e6ad25;
        stroke-linecap: round;
        stroke-dasharray: 164;
        stroke-dashoffset: 164;
        animation: pub-art-ring-b-5c82jfh2nm 4s ease-in-out infinite;
    }

.art-check__rows[b-5c82jfh2nm] {
    display: grid;
    gap: 7px;
}

    .art-check__rows span[b-5c82jfh2nm] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .art-check__rows code[b-5c82jfh2nm] {
        min-width: 86px;
        padding: 5px 9px;
        border-radius: 8px;
        background: var(--pub-card-solid);
        color: var(--pub-ink);
        font-size: .74rem;
        box-shadow: 0 6px 14px rgba(87, 64, 22, .1);
    }

    .art-check__rows i[b-5c82jfh2nm] {
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #6fb57c;
        color: #fff;
        font-size: .7rem;
        font-style: normal;
        animation: pub-art-pop-b-5c82jfh2nm 4s ease-out infinite;
        animation-delay: calc(.6s + var(--r) * .5s);
    }

/* header: the header, a footnote and the footer light up in turn */

.art-doc[b-5c82jfh2nm] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 64%;
    max-width: 176px;
    padding: 10px;
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 18px 36px rgba(87, 64, 22, .16);
}

.art-doc__zone[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1.5px dashed transparent;
    border-radius: 7px;
    animation: pub-art-focus-b-5c82jfh2nm 4.5s ease-in-out infinite;
    animation-delay: calc(var(--z) * 1.5s);
}

    .art-doc__zone b[b-5c82jfh2nm] {
        display: block;
        flex: 1;
        height: 6px;
        border-radius: 3px;
        background: #cfc5b3;
    }

.art-doc__zone--head[b-5c82jfh2nm] {
    background: #f3ead6;
}

    .art-doc__zone--head b[b-5c82jfh2nm] {
        flex: 0 0 46%;
        background: #3d6d7e;
    }

.art-doc__zone--note sup[b-5c82jfh2nm] {
    color: #b78507;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.art-doc__zone--note b[b-5c82jfh2nm] {
    flex: 0 0 60%;
    height: 5px;
}

.art-doc__zone--foot[b-5c82jfh2nm] {
    border-top-color: rgba(155, 125, 48, .25);
}

    .art-doc__zone--foot b[b-5c82jfh2nm] {
        flex: 0 0 30%;
        margin-inline: auto;
        height: 5px;
    }

.art-doc__lines[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 7px;
}

    .art-doc__lines b[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: #e3dac8;
    }

        .art-doc__lines b:nth-child(2n)[b-5c82jfh2nm] {
            width: 80%;
        }

/* runs: bold, italic and links keep their look in the new language */

.art-runs[b-5c82jfh2nm] {
    display: grid;
    gap: 12px;
    width: 82%;
    max-width: 240px;
}

.art-runs__line[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .art-runs__line > i[b-5c82jfh2nm] {
        display: block;
        flex: 1;
        height: 7px;
        border-radius: 4px;
        background: #d6ccb9;
    }

        .art-runs__line > i:last-child[b-5c82jfh2nm] {
            flex: .6;
        }

.art-runs__chip[b-5c82jfh2nm] {
    display: grid;
    min-width: 70px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--pub-card-solid);
    box-shadow: 0 6px 14px rgba(87, 64, 22, .12);
}

    .art-runs__chip b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        place-self: center;
        color: var(--pub-ink);
        font-size: .78rem;
        font-weight: 400;
        animation: pub-art-lang-b-5c82jfh2nm 5s ease-in-out infinite;
        animation-delay: calc(var(--n) * .35s);
    }

    .art-runs__chip .art-runs__fa[b-5c82jfh2nm] {
        font-family: IRANSansX, Tahoma, sans-serif;
        animation-name: pub-art-lang-in-b-5c82jfh2nm;
    }

.art-runs__chip--bold b[b-5c82jfh2nm] {
    font-weight: 800;
}

.art-runs__chip--italic b[b-5c82jfh2nm] {
    font-style: italic;
}

.art-runs__chip--link b[b-5c82jfh2nm] {
    color: #2f6fb0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* memory: a sentence travels from an old document into the new one */

.art-memory[b-5c82jfh2nm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 34px;
}

.art-memory__page[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 76px;
    padding: 12px 10px;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 14px 30px rgba(87, 64, 22, .15);
}

    .art-memory__page:first-child[b-5c82jfh2nm] {
        opacity: .75;
        transform: rotate(-4deg);
    }

    .art-memory__page b[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: #d6ccb9;
    }

        .art-memory__page b:nth-child(2n)[b-5c82jfh2nm] {
            width: 78%;
        }

.art-memory__hit[b-5c82jfh2nm] {
    background: linear-gradient(90deg, #e6ad25, #ffd977) !important;
}

.art-memory__slot[b-5c82jfh2nm] {
    animation: pub-art-fill-b-5c82jfh2nm 4s ease-in-out infinite;
}

.art-memory__fly[b-5c82jfh2nm] {
    position: absolute;
    top: 26px;
    left: 10px;
    width: 52px;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e6ad25, #ffd977);
    box-shadow: 0 0 12px rgba(244, 205, 88, .7);
    animation: pub-art-fly-b-5c82jfh2nm 4s cubic-bezier(.6, 0, .3, 1) infinite;
}

.art-memory__badge[b-5c82jfh2nm] {
    position: absolute;
    top: -26px;
    left: 50%;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-family: IRANSansX, "Segoe UI", sans-serif;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    translate: -50% 0;
    box-shadow: 0 8px 18px rgba(214, 159, 34, .3);
    animation: pub-float-b-5c82jfh2nm 4s ease-in-out infinite;
}

@keyframes pub-art-focus-b-5c82jfh2nm {
    0%, 4% {
        border-color: transparent;
        box-shadow: none;
    }

    10%, 28% {
        border-color: rgba(230, 173, 37, .9);
        box-shadow: 0 0 0 3px rgba(244, 205, 88, .22);
    }

    36%, 100% {
        border-color: transparent;
        box-shadow: none;
    }
}

@keyframes pub-art-fly-b-5c82jfh2nm {
    0%, 10% {
        opacity: 0;
        transform: translate(0, 0);
    }

    16% {
        opacity: 1;
    }

    52% {
        opacity: 1;
        transform: translate(112px, 0);
    }

    58%, 100% {
        opacity: 0;
        transform: translate(112px, 0);
    }
}

@keyframes pub-art-fill-b-5c82jfh2nm {
    0%, 50% {
        background: #d6ccb9;
    }

    56%, 90% {
        background: #f0c85c;
        box-shadow: 0 0 10px rgba(244, 205, 88, .6);
    }

    100% {
        background: #d6ccb9;
    }
}

/* ================= gallery: posters side by side ================= */

.pub-gallery[b-5c82jfh2nm] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    max-width: 1060px;
    margin-inline: auto;
    padding-top: 20px;
}

.pub-poster[b-5c82jfh2nm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

    .pub-poster:nth-child(3n + 2)[b-5c82jfh2nm] {
        translate: 0 -28px;
    }

.pub-poster__frame[b-5c82jfh2nm] {
    position: relative;
    padding: 9px;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(58, 47, 36, .92), rgba(36, 29, 22, .92));
    box-shadow:
        0 44px 80px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

    .pub-poster__frame[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: auto 12% -26px;
        z-index: -1;
        height: 60px;
        border-radius: 50%;
        background: rgba(240, 191, 75, .28);
        filter: blur(30px);
        opacity: .5;
        transition: opacity .5s ease;
    }

.pub-poster:hover .pub-poster__frame[b-5c82jfh2nm] {
    transform: translateY(-8px) rotate(-.6deg);
    box-shadow:
        0 56px 96px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(240, 200, 92, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

    .pub-poster:hover .pub-poster__frame[b-5c82jfh2nm]::after {
        opacity: 1;
    }

.pub-compare--poster[b-5c82jfh2nm] {
    border-radius: 18px;
    animation-delay: calc(.8s + var(--i, 0) * .7s);
}

.pub-poster__caption[b-5c82jfh2nm] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 10px;
    text-align: center;
}

    .pub-poster__caption strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.12rem;
        font-weight: 700;
    }

    .pub-poster__caption p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-dark-text);
        font-size: .9rem;
        line-height: 1.9;
    }

.pub-poster__route[b-5c82jfh2nm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(240, 200, 92, .3);
    border-radius: 999px;
    background: rgba(240, 191, 75, .08);
    color: #f0c85c;
    font-size: .74rem;
    letter-spacing: .08em;
}

    .pub-poster__route i[b-5c82jfh2nm] {
        position: relative;
        width: 34px;
        height: 2px;
        overflow: hidden;
        border-radius: 2px;
        background: rgba(240, 200, 92, .25);
    }

        .pub-poster__route i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 50%;
            background: linear-gradient(90deg, transparent, #f4cd58);
            animation: pub-route-b-5c82jfh2nm 1.6s linear infinite;
        }

@keyframes pub-route-b-5c82jfh2nm {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(200%);
    }
}

@supports (animation-timeline: view()) {
    .pub-poster[b-5c82jfh2nm] {
        animation: pub-tilt-in-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

@media (max-width: 900px) {
    .pub-gallery[b-5c82jfh2nm] {
        grid-auto-columns: min(78%, 340px);
        gap: 18px;
        overflow-x: auto;
        padding: 10px 4px 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .pub-poster[b-5c82jfh2nm] {
        scroll-snap-align: center;
    }

        .pub-poster:nth-child(3n + 2)[b-5c82jfh2nm] {
            translate: none;
        }
}

/* repaint: the words on a poster are wiped away and written again */

.art-poster[b-5c82jfh2nm] {
    position: relative;
    width: 216px;
    height: 286px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(165deg, #2c3240, #14171e);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.art-poster__photo[b-5c82jfh2nm] {
    position: absolute;
    inset: 0 0 52%;
    background:
        linear-gradient(115deg, transparent 55%, rgba(155, 95, 210, .7) 55% 62%, transparent 62%),
        linear-gradient(115deg, transparent 66%, rgba(60, 160, 220, .6) 66% 71%, transparent 71%),
        linear-gradient(180deg, #d9dde3, #9aa2ad);
}

.art-poster__title[b-5c82jfh2nm] {
    position: absolute;
    top: 52%;
    left: 12px;
    right: 12px;
    display: grid;
    height: 34px;
    place-items: center;
}

    .art-poster__title b[b-5c82jfh2nm] {
        grid-area: 1 / 1;
        color: #3fa2e8;
        font-size: 1.25rem;
        font-weight: 800;
        white-space: nowrap;
    }

.art-poster__en[b-5c82jfh2nm] {
    font-family: "Segoe UI", Arial, sans-serif;
    animation: pub-art-old-b-5c82jfh2nm 6s ease-in-out infinite;
}

.art-poster__fa[b-5c82jfh2nm] {
    font-family: IRANSansX, Tahoma, sans-serif;
    animation: pub-art-new-b-5c82jfh2nm 6s ease-in-out infinite;
}

.art-poster__brush[b-5c82jfh2nm] {
    position: absolute;
    inset: 2px -4px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f4cd58, #ffe9a6, #e6ad25);
    box-shadow: 0 0 18px rgba(244, 205, 88, .6);
    transform-origin: left center;
    animation: pub-art-brush-b-5c82jfh2nm 6s cubic-bezier(.6, 0, .3, 1) infinite;
}

.art-poster__lines[b-5c82jfh2nm] {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 9px;
}

    .art-poster__lines i[b-5c82jfh2nm] {
        display: block;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .35);
        justify-self: end;
        width: 100%;
    }

        .art-poster__lines i:nth-child(2n)[b-5c82jfh2nm] {
            width: 74%;
        }

/* textfile: the translated text also comes as a plain text file */

.art-txt[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.art-txt__img[b-5c82jfh2nm] {
    display: grid;
    align-content: end;
    gap: 6px;
    width: 64px;
    height: 92px;
    padding: 10px 8px;
    border-radius: 9px;
    background:
        linear-gradient(180deg, #9aa2ad 0 38%, transparent 38%),
        linear-gradient(165deg, #2c3240, #14171e);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
}

    .art-txt__img i[b-5c82jfh2nm] {
        display: block;
        height: 5px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .5);
    }

.art-txt__arrow[b-5c82jfh2nm] {
    position: relative;
    width: 40px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #e6ad25 0 6px, transparent 6px 10px);
    background-size: 20px 2px;
    animation: pub-art-dash-b-5c82jfh2nm 1s linear infinite;
}

    .art-txt__arrow[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        right: -2px;
        top: -4px;
        border: 5px solid transparent;
        border-left: 7px solid #e6ad25;
        border-right: 0;
    }

.art-txt__file[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    width: 76px;
    height: 96px;
    padding: 26px 10px 10px;
    border-radius: 9px;
    background: #fffdf8;
    box-shadow: 0 14px 28px rgba(87, 64, 22, .16);
}

    .art-txt__file em[b-5c82jfh2nm] {
        position: absolute;
        top: 7px;
        left: 8px;
        padding: 1px 6px;
        border-radius: 4px;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        color: #2b210d;
        font-size: .6rem;
        font-style: normal;
        font-weight: 800;
    }

    .art-txt__file b[b-5c82jfh2nm] {
        display: block;
        height: 5px;
        border-radius: 3px;
        background: #b9ad97;
        transform-origin: left center;
        animation: pub-art-type-b-5c82jfh2nm 4s ease-out infinite;
    }

        .art-txt__file b:nth-of-type(2)[b-5c82jfh2nm] {
            width: 80%;
            animation-delay: .35s;
        }

        .art-txt__file b:nth-of-type(3)[b-5c82jfh2nm] {
            animation-delay: .7s;
        }

        .art-txt__file b:nth-of-type(4)[b-5c82jfh2nm] {
            width: 60%;
            animation-delay: 1.05s;
        }

@keyframes pub-art-brush-b-5c82jfh2nm {
    0%, 18% {
        transform: scaleX(0);
        transform-origin: left center;
    }

    34% {
        transform: scaleX(1);
        transform-origin: left center;
    }

    35% {
        transform: scaleX(1);
        transform-origin: right center;
    }

    52%, 100% {
        transform: scaleX(0);
        transform-origin: right center;
    }
}

@keyframes pub-art-old-b-5c82jfh2nm {
    0%, 33% {
        opacity: 1;
    }

    34%, 92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pub-art-new-b-5c82jfh2nm {
    0%, 34% {
        opacity: 0;
    }

    36%, 90% {
        opacity: 1;
    }

    96%, 100% {
        opacity: 0;
    }
}

@keyframes pub-art-dash-b-5c82jfh2nm {
    to {
        background-position: 20px 0;
    }
}

@keyframes pub-art-type-b-5c82jfh2nm {
    0%, 8% {
        transform: scaleX(0);
    }

    24%, 86% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

/* ================= marks: a term and its translation ================= */

.pub-mark[b-5c82jfh2nm] {
    --mark: 240, 191, 75;
    padding: 0 3px;
    border-radius: 5px;
    background:
        linear-gradient(rgba(var(--mark), .28), rgba(var(--mark), .28)) no-repeat left bottom / 100% 100%;
    box-shadow: inset 0 -2px 0 rgba(var(--mark), .9);
    color: inherit;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.pub-mark--number[b-5c82jfh2nm] {
    --mark: 111, 196, 140;
}

.pub-mark--ref[b-5c82jfh2nm] {
    --mark: 96, 160, 240;
}

.pub-mark--name[b-5c82jfh2nm] {
    --mark: 186, 140, 245;
}

.pub-mark--hedge[b-5c82jfh2nm] {
    --mark: 240, 128, 160;
}

/* ================= hero: a live translation ================= */

.pub-live[b-5c82jfh2nm] {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: 18px 20px 22px;
    border: 1px solid rgba(77, 63, 24, .16);
    border-radius: 22px;
    background: var(--pub-card-solid);
    box-shadow: 0 34px 70px rgba(59, 48, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
    transform: rotate(-1.5deg);
    animation: pub-hover-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-live__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pub-live__text[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-ink);
    font-size: .92rem;
    line-height: 1.95;
}

.pub-live__text--source[b-5c82jfh2nm] {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    color: var(--pub-text);
}

.pub-live__text--target[b-5c82jfh2nm] {
    clip-path: inset(0 0 0 100%);
    animation: pub-live-rtl-b-5c82jfh2nm 9s cubic-bezier(.6, 0, .3, 1) .8s infinite;
}

.pub-live__text--ltr[b-5c82jfh2nm] {
    clip-path: inset(0 100% 0 0);
    animation-name: pub-live-ltr-b-5c82jfh2nm;
}

.pub-live__divider[b-5c82jfh2nm] {
    position: relative;
    display: block;
    height: 2px;
    margin: 14px 0;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(226, 179, 63, .2);
}

    .pub-live__divider i[b-5c82jfh2nm] {
        position: absolute;
        inset: 0;
        width: 40%;
        background: linear-gradient(90deg, transparent, #f4cd58, transparent);
        animation: pub-route-b-5c82jfh2nm 2.2s linear infinite;
    }

.pub-live .pub-poster__route[b-5c82jfh2nm] {
    color: var(--pub-gold-ink);
}

@keyframes pub-live-rtl-b-5c82jfh2nm {
    0%, 10% {
        clip-path: inset(0 0 0 100%);
    }

    45%, 88% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes pub-live-ltr-b-5c82jfh2nm {
    0%, 10% {
        clip-path: inset(0 100% 0 0);
    }

    45%, 88% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

/* ================= notice ================= */

.pub-notice[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 20px;
    border: 1px solid rgba(226, 92, 70, .28);
    border-radius: 18px;
    background: rgba(226, 92, 70, .07);
}

    .pub-notice p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-ink);
        font-size: .92rem;
        line-height: 1.9;
    }

.pub-notice__icon svg[b-5c82jfh2nm] {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #d2604b;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* ================= passages ================= */

.pub-legend[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin: -18px 0 34px;
    padding: 0;
    list-style: none;
    color: var(--pub-dark-text);
    font-size: .84rem;
}

    .pub-legend li[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .pub-legend i[b-5c82jfh2nm] {
        display: inline-block;
        width: 22px;
        height: 12px;
        padding: 0;
    }

.pub-passages[b-5c82jfh2nm] {
    display: grid;
    gap: 22px;
    max-width: 1040px;
    margin-inline: auto;
}

.pub-passage[b-5c82jfh2nm] {
    position: relative;
    padding: 22px 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(240, 191, 75, .1), transparent 60%),
        rgba(255, 255, 255, .04);
    backdrop-filter: blur(10px);
    transition: border-color .35s ease, transform .35s ease;
}

    .pub-passage:hover[b-5c82jfh2nm] {
        border-color: rgba(240, 200, 92, .35);
    }

.pub-passage__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.pub-passage__index[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-weight: 800;
    font-size: .9rem;
}

.pub-passage__title[b-5c82jfh2nm] {
    display: grid;
    gap: 2px;
    margin-inline-end: auto;
}

    .pub-passage__title strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.05rem;
    }

    .pub-passage__title small[b-5c82jfh2nm] {
        color: #9a8b72;
        font-size: .8rem;
        font-weight: 600;
    }

.pub-passage__body[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.pub-passage__side[b-5c82jfh2nm] {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(0, 0, 0, .22);
}

.pub-passage__side--target[b-5c82jfh2nm] {
    background: rgba(240, 191, 75, .07);
    box-shadow: inset 0 0 0 1px rgba(240, 191, 75, .16);
}

.pub-passage__lang[b-5c82jfh2nm] {
    display: block;
    margin-bottom: 8px;
    color: #9a8b72;
    font-size: .74rem;
    font-weight: 700;
}

.pub-passage__side--target .pub-passage__lang[b-5c82jfh2nm] {
    color: #f0c85c;
}

.pub-passage__text[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-dark-ink);
    font-size: .95rem;
    line-height: 2.05;
}

    .pub-passage__text[dir="ltr"][b-5c82jfh2nm] {
        font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
        line-height: 1.85;
    }

.pub-passage__arrow[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    place-items: center;
}

    .pub-passage__arrow i[b-5c82jfh2nm] {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
        box-shadow: 0 0 0 6px rgba(240, 191, 75, .12), 0 10px 22px rgba(214, 159, 34, .3);
        animation: pub-pulse-b-5c82jfh2nm 2.6s ease-in-out infinite;
    }

        .pub-passage__arrow i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 9px;
            height: 9px;
            border-top: 2.4px solid #2b210d;
            border-right: 2.4px solid #2b210d;
            transform: translate(-65%, -50%) rotate(45deg);
        }

.pub-page[dir="rtl"] .pub-passage__arrow i[b-5c82jfh2nm]::after {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.pub-passage__credit[b-5c82jfh2nm] {
    margin-top: 14px;
    color: #8f8270;
    font-size: .76rem;
}

.pub-passage .pub-mark[b-5c82jfh2nm] {
    cursor: default;
}

/* point at a term, and its pair lights up on the other side */
.pub-passage:has(.pub-mark[data-k="0"]:hover) .pub-mark[data-k="0"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="1"]:hover) .pub-mark[data-k="1"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="2"]:hover) .pub-mark[data-k="2"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="3"]:hover) .pub-mark[data-k="3"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="4"]:hover) .pub-mark[data-k="4"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="5"]:hover) .pub-mark[data-k="5"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="6"]:hover) .pub-mark[data-k="6"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="7"]:hover) .pub-mark[data-k="7"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="8"]:hover) .pub-mark[data-k="8"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="9"]:hover) .pub-mark[data-k="9"][b-5c82jfh2nm] {
    background-color: rgba(var(--mark), .55);
    box-shadow: inset 0 -2px 0 rgba(var(--mark), 1), 0 0 0 2px rgba(var(--mark), .9), 0 0 18px rgba(var(--mark), .6);
}

/* while some term is pointed at, the rest step back */
.pub-passage:has(.pub-mark:hover) .pub-mark[b-5c82jfh2nm] {
    opacity: .45;
}

.pub-passage:has(.pub-mark[data-k="0"]:hover) .pub-mark[data-k="0"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="1"]:hover) .pub-mark[data-k="1"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="2"]:hover) .pub-mark[data-k="2"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="3"]:hover) .pub-mark[data-k="3"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="4"]:hover) .pub-mark[data-k="4"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="5"]:hover) .pub-mark[data-k="5"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="6"]:hover) .pub-mark[data-k="6"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="7"]:hover) .pub-mark[data-k="7"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="8"]:hover) .pub-mark[data-k="8"][b-5c82jfh2nm],
.pub-passage:has(.pub-mark[data-k="9"]:hover) .pub-mark[data-k="9"][b-5c82jfh2nm] {
    opacity: 1;
}

/* the marks light up one by one as the passage scrolls in */
@supports (animation-timeline: view()) {
    .pub-passage .pub-mark[b-5c82jfh2nm] {
        animation: pub-mark-in-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry calc(20% + var(--m, 0) * 6%) cover calc(30% + var(--m, 0) * 4%);
    }
}

@keyframes pub-mark-in-b-5c82jfh2nm {
    from {
        background-size: 0% 100%;
    }

    to {
        background-size: 100% 100%;
    }
}

@keyframes pub-pulse-b-5c82jfh2nm {
    0%, 100% {
        box-shadow: 0 0 0 6px rgba(240, 191, 75, .12), 0 10px 22px rgba(214, 159, 34, .3);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(240, 191, 75, .05), 0 10px 22px rgba(214, 159, 34, .3);
    }
}

/* ================= drawings: pairs and kept ================= */

.art-pairs[b-5c82jfh2nm] {
    display: grid;
    gap: 10px;
    width: min(90%, 340px);
}

.art-pairs__row[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

    .art-pairs__row b[b-5c82jfh2nm] {
        padding: 7px 10px;
        overflow: hidden;
        border-radius: 10px;
        font-size: .8rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.art-pairs__from[b-5c82jfh2nm] {
    background: var(--pub-card-solid);
    color: var(--pub-text);
    font-family: "Segoe UI", Arial, sans-serif;
    box-shadow: 0 6px 14px rgba(87, 64, 22, .1);
}

.art-pairs__to[b-5c82jfh2nm] {
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    box-shadow: 0 8px 18px rgba(214, 159, 34, .28);
    font-family: IRANSansX, Tahoma, sans-serif;
    animation: pub-pair-to-b-5c82jfh2nm 6s ease-out infinite;
    animation-delay: calc(var(--r) * .45s);
}

.art-pairs__row i[b-5c82jfh2nm] {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: rgba(226, 179, 63, .3);
}

    .art-pairs__row i[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #e6ad25;
        transform-origin: left center;
        animation: pub-pair-line-b-5c82jfh2nm 6s ease-out infinite;
        animation-delay: calc(var(--r) * .45s);
    }

.pub-page[dir="rtl"] .art-pairs__row[b-5c82jfh2nm] {
    direction: ltr;
}

.pub-bento__card:nth-child(1) .art-pairs__from[b-5c82jfh2nm] {
    background: rgba(255, 255, 255, .08);
    color: var(--pub-dark-text);
    box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .12);
}

.art-kept[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 12px;
}

.art-kept__chip[b-5c82jfh2nm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid rgba(226, 179, 63, .4);
    border-radius: 11px;
    background: var(--pub-card-solid);
    box-shadow: 0 8px 18px rgba(87, 64, 22, .1);
}

    .art-kept__chip code[b-5c82jfh2nm] {
        color: var(--pub-ink);
        font-size: .8rem;
        font-weight: 700;
    }

    .art-kept__chip svg[b-5c82jfh2nm] {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: #b78507;
        stroke-width: 2;
        stroke-linecap: round;
        animation: pub-art-pop-b-5c82jfh2nm 4.5s ease-out infinite;
        animation-delay: calc(.4s + var(--r) * .35s);
    }

    .art-kept__chip[b-5c82jfh2nm]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 35%, rgba(244, 205, 88, .35) 50%, transparent 65%);
        background-size: 250% 100%;
        animation: pub-shine-b-5c82jfh2nm 4.5s ease-in-out infinite;
        animation-delay: calc(var(--r) * .35s);
    }

@keyframes pub-pair-to-b-5c82jfh2nm {
    0%, 12% {
        opacity: 0;
        transform: translateX(-10px) scale(.9);
    }

    24%, 86% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pub-pair-line-b-5c82jfh2nm {
    0%, 4% {
        transform: scaleX(0);
    }

    16%, 86% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@media (max-width: 760px) {
    .pub-passage[b-5c82jfh2nm] {
        padding: 18px 16px 20px;
    }

    .pub-passage__body[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-passage__arrow[b-5c82jfh2nm] {
        height: 34px;
    }

        .pub-passage__arrow i[b-5c82jfh2nm]::after,
        .pub-page[dir="rtl"] .pub-passage__arrow i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -65%) rotate(135deg);
        }

    .pub-passage__head .pub-poster__route[b-5c82jfh2nm] {
        display: none;
    }
}

/* ================= pricing: the credit meter in the hero ================= */

.pub-meter[b-5c82jfh2nm] {
    position: relative;
    z-index: 1;
    width: min(400px, 100%);
    padding: 18px 20px 20px;
    border: 1px solid rgba(77, 63, 24, .16);
    border-radius: 22px;
    background: var(--pub-card-solid);
    box-shadow: 0 34px 70px rgba(59, 48, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
    transform: rotate(-1.5deg);
    animation: pub-hover-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-meter__head[b-5c82jfh2nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    color: var(--pub-muted);
    font-size: .78rem;
    font-weight: 700;
}

.pub-meter__bar[b-5c82jfh2nm] {
    position: relative;
    height: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 179, 63, .14);
}

.pub-meter__reserved[b-5c82jfh2nm],
.pub-meter__used[b-5c82jfh2nm] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 999px;
}

.pub-meter__reserved[b-5c82jfh2nm] {
    width: 82%;
    background: repeating-linear-gradient(45deg, rgba(230, 173, 37, .35) 0 6px, rgba(230, 173, 37, .18) 6px 12px);
    transform-origin: right center;
    animation: pub-meter-reserve-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-page[dir="ltr"] .pub-meter__reserved[b-5c82jfh2nm] {
    transform-origin: left center;
}

.pub-meter__used[b-5c82jfh2nm] {
    width: 74.5%;
    background: linear-gradient(90deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 0 12px rgba(244, 205, 88, .6);
    transform-origin: right center;
    animation: pub-meter-use-b-5c82jfh2nm 8s ease-in-out infinite;
}

.pub-page[dir="ltr"] .pub-meter__used[b-5c82jfh2nm] {
    transform-origin: left center;
}

.pub-meter__rows[b-5c82jfh2nm] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pub-meter__rows li[b-5c82jfh2nm] {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 13px;
        background: rgba(226, 179, 63, .07);
        color: var(--pub-text);
        font-size: .86rem;
        font-weight: 600;
        animation: pub-meter-row-b-5c82jfh2nm 8s ease-in-out infinite;
        animation-delay: calc(var(--r) * .9s);
    }

        .pub-meter__rows li b[b-5c82jfh2nm] {
            color: var(--pub-ink);
            font-size: 1rem;
        }

.pub-meter__back[b-5c82jfh2nm] {
    background: rgba(111, 196, 140, .14) !important;
}

    .pub-meter__back b[b-5c82jfh2nm] {
        color: #3f9a5c !important;
    }

.pub-meter__icon[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
}

    .pub-meter__icon[b-5c82jfh2nm]  svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@keyframes pub-meter-reserve-b-5c82jfh2nm {
    0%, 12% {
        transform: scaleX(0);
    }

    26%, 90% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes pub-meter-use-b-5c82jfh2nm {
    0%, 30% {
        transform: scaleX(0);
    }

    55%, 90% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes pub-meter-row-b-5c82jfh2nm {
    0%, 4% {
        opacity: .35;
        transform: translateY(4px);
    }

    12%, 92% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: .35;
    }
}

/* ================= pricing: the packages ================= */

.pub-packs[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
    gap: 20px;
}

.pub-pack[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 22px 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 236, 190, .12);
    border-radius: 26px;
    background:
        radial-gradient(260px circle at var(--mx) var(--my), rgba(244, 205, 88, .12), transparent 55%),
        rgba(255, 255, 255, .04);
    color: var(--pub-dark-text);
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .4s ease;
}

    .pub-pack:hover[b-5c82jfh2nm] {
        transform: translateY(-6px);
        border-color: rgba(240, 200, 92, .35);
    }

    .pub-pack.is-featured[b-5c82jfh2nm] {
        border-color: transparent;
        background:
            radial-gradient(90% 70% at 100% 0%, rgba(240, 191, 75, .22), transparent 60%),
            radial-gradient(260px circle at var(--mx) var(--my), rgba(244, 205, 88, .16), transparent 55%),
            rgba(255, 255, 255, .07);
        box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
        transform: translateY(-10px);
    }

        .pub-pack.is-featured:hover[b-5c82jfh2nm] {
            transform: translateY(-16px);
        }

.pub-pack__border[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--pub-angle), rgba(244, 205, 88, .25) 0 55%, rgba(244, 205, 88, 1) 78%, rgba(244, 205, 88, .25) 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pub-rotate-b-5c82jfh2nm 6s linear infinite;
    pointer-events: none;
}

.pub-pack__ribbon[b-5c82jfh2nm] {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    color: #2b210d;
    font-size: .72rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(214, 159, 34, .35);
}

.pub-pack__head h3[b-5c82jfh2nm] {
    margin: 0 0 6px;
    padding-inline-end: 90px;
    color: var(--pub-dark-ink);
    font-size: 1.2rem;
    font-weight: 700;
}

.pub-pack:not(.is-featured) .pub-pack__head h3[b-5c82jfh2nm] {
    padding-inline-end: 0;
}

.pub-pack__head p[b-5c82jfh2nm] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.85;
}

.pub-pack__credits[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

    .pub-pack__credits strong[b-5c82jfh2nm] {
        background: linear-gradient(115deg, #f6cf5f, #e8b432 40%, #ffd977 60%, #e6ad25);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 2.3rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .pub-pack__credits span[b-5c82jfh2nm] {
        color: var(--pub-dark-text);
        font-weight: 700;
    }

    .pub-pack__credits em[b-5c82jfh2nm] {
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(111, 196, 140, .16);
        color: #8fd6a6;
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

.pub-pack__price[b-5c82jfh2nm] {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .22);
}

    .pub-pack__price strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.25rem;
        font-weight: 800;
    }

        .pub-pack__price strong small[b-5c82jfh2nm] {
            color: var(--pub-dark-text);
            font-size: .78rem;
            font-weight: 600;
        }

    .pub-pack__price span[b-5c82jfh2nm] {
        color: #9a8b72;
        font-size: .78rem;
    }

.pub-pack__group[b-5c82jfh2nm] {
    display: grid;
    gap: 8px;
}

.pub-pack__label[b-5c82jfh2nm] {
    color: #9a8b72;
    font-size: .74rem;
    font-weight: 700;
}

.pub-pack__levels[b-5c82jfh2nm],
.pub-pack__formats[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pub-pack__levels li[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 10px;
        font-size: .78rem;
        font-weight: 700;
    }

        .pub-pack__levels li i[b-5c82jfh2nm] {
            font-style: normal;
        }

        .pub-pack__levels li.is-on[b-5c82jfh2nm] {
            background: rgba(240, 191, 75, .14);
            color: #f0c85c;
        }

        .pub-pack__levels li.is-off[b-5c82jfh2nm] {
            background: rgba(255, 255, 255, .03);
            color: #6f6556;
            text-decoration: line-through;
        }

    .pub-pack__formats li[b-5c82jfh2nm] {
        padding: 4px 9px;
        border: 1px solid rgba(255, 236, 190, .12);
        border-radius: 8px;
        color: var(--pub-dark-text);
        font-size: .74rem;
        font-weight: 700;
    }

.pub-pack__limit[b-5c82jfh2nm] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 236, 190, .14);
    font-size: .82rem;
}

    .pub-pack__limit b[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
    }

.pub-pack .pub-button[b-5c82jfh2nm] {
    margin-top: auto;
}

.pub-button--pack[b-5c82jfh2nm] {
    border: 1px solid rgba(255, 236, 190, .2);
    background: rgba(255, 255, 255, .06);
    color: var(--pub-dark-ink);
}

    .pub-button--pack:hover[b-5c82jfh2nm] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .12);
    }

.pub-packs__state[b-5c82jfh2nm] {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px;
    border: 1px solid rgba(255, 236, 190, .14);
    border-radius: 18px;
    color: var(--pub-dark-text);
    text-align: center;
}

/* ================= pricing: the quality levels ================= */

.pub-levels[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pub-level[b-5c82jfh2nm] {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 26px;
    background:
        radial-gradient(300px circle at var(--mx) var(--my), rgba(244, 205, 88, .14), transparent 50%),
        var(--pub-card);
    box-shadow: var(--pub-shadow);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

    .pub-level:hover[b-5c82jfh2nm] {
        transform: translateY(-5px);
        box-shadow: var(--pub-shadow-lift);
    }

    .pub-level h3[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-ink);
        font-size: 1.2rem;
        font-weight: 700;
    }

    .pub-level p[b-5c82jfh2nm] {
        margin: 0;
        color: var(--pub-text);
        line-height: 1.95;
    }

.pub-level__bars[b-5c82jfh2nm] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 34px;
    margin-bottom: 6px;
}

    .pub-level__bars i[b-5c82jfh2nm] {
        width: 12px;
        border-radius: 4px;
        background: rgba(226, 179, 63, .18);
    }

        .pub-level__bars i:nth-child(1)[b-5c82jfh2nm] {
            height: 40%;
        }

        .pub-level__bars i:nth-child(2)[b-5c82jfh2nm] {
            height: 70%;
        }

        .pub-level__bars i:nth-child(3)[b-5c82jfh2nm] {
            height: 100%;
        }

        .pub-level__bars i.is-on[b-5c82jfh2nm] {
            background: linear-gradient(180deg, var(--pub-gold-1), var(--pub-gold-2));
            box-shadow: 0 6px 14px rgba(214, 159, 34, .3);
            animation: pub-bar-grow-b-5c82jfh2nm .8s cubic-bezier(.2, .8, .2, 1) both;
        }

.pub-level__fit[b-5c82jfh2nm] {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--pub-line);
    color: var(--pub-gold-ink);
    font-size: .84rem;
    font-weight: 700;
}

.pub-closing__card--solo[b-5c82jfh2nm] {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    text-align: center;
}

    .pub-closing__card--solo .pub-closing__copy p[b-5c82jfh2nm] {
        margin-inline: auto;
    }

    .pub-closing__card--solo .pub-closing__actions[b-5c82jfh2nm] {
        justify-content: center;
    }

@keyframes pub-bar-grow-b-5c82jfh2nm {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

@media (max-width: 900px) {
    .pub-levels[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-pack.is-featured[b-5c82jfh2nm],
    .pub-pack.is-featured:hover[b-5c82jfh2nm] {
        transform: none;
    }
}

/* ================= flow: four steps ================= */

.pub-flow__body[b-5c82jfh2nm] {
    position: relative;
}

.pub-flow__track[b-5c82jfh2nm] {
    position: absolute;
    top: 38px;
    inset-inline: 12.5%;
    height: 2px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(226, 179, 63, .15), rgba(226, 179, 63, .5), rgba(226, 179, 63, .15));
}

.pub-flow__comet[b-5c82jfh2nm] {
    position: absolute;
    top: 0;
    inset-inline-start: -90px;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f4cd58);
    box-shadow: 0 0 12px 2px rgba(244, 205, 88, .7);
    animation: pub-comet-b-5c82jfh2nm 6s linear infinite;
}

.pub-page[dir="rtl"] .pub-flow__comet[b-5c82jfh2nm] {
    background: linear-gradient(270deg, transparent, #f4cd58);
}

.pub-flow__list[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pub-flow__step[b-5c82jfh2nm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 26px;
    text-align: center;
    isolation: isolate;
}

    .pub-flow__step[b-5c82jfh2nm]::before {
        content: "";
        position: absolute;
        inset: 38px 0 0;
        z-index: -1;
        border: 1px solid var(--pub-line);
        border-radius: 26px;
        background: var(--pub-card);
        box-shadow: var(--pub-shadow);
        transition: border-color .35s ease, transform .35s ease;
    }

    .pub-flow__step:hover[b-5c82jfh2nm]::before {
        border-color: rgba(226, 179, 63, .55);
        transform: translateY(-4px);
    }

.pub-flow__node[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
    border: 1px solid rgba(226, 179, 63, .5);
    border-radius: 24px;
    background: var(--pub-card-solid);
    color: var(--pub-gold-ink);
    box-shadow: 0 0 0 8px var(--pub-bg), var(--pub-shadow);
    animation: pub-step-active-b-5c82jfh2nm 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1.5s);
}

    .pub-flow__node[b-5c82jfh2nm]  svg {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-flow__num[b-5c82jfh2nm] {
    margin-bottom: 8px;
    color: var(--pub-gold-ink);
    font-size: .78rem;
    font-weight: 700;
}

.pub-flow__step h3[b-5c82jfh2nm] {
    margin: 0 0 8px;
    color: var(--pub-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.pub-flow__step p[b-5c82jfh2nm] {
    margin: 0;
    color: var(--pub-text);
    font-size: .9rem;
    line-height: 1.85;
}

/* ================= faq ================= */

.pub-faq__layout[b-5c82jfh2nm] {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 48px;
}

.pub-faq__side[b-5c82jfh2nm] {
    position: sticky;
    top: 100px;
}

    .pub-faq__side h2[b-5c82jfh2nm] {
        margin: 16px 0 12px;
        color: var(--pub-ink);
        font-size: clamp(1.7rem, 3vw, 2.4rem);
        font-weight: 700;
        line-height: 1.35;
    }

    .pub-faq__side > p[b-5c82jfh2nm] {
        margin: 0 0 26px;
        color: var(--pub-text);
        line-height: 1.9;
    }

.pub-faq__help[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 26px;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(240, 191, 75, .22), transparent 60%),
        var(--pub-dark);
    color: var(--pub-dark-text);
    font-size: .92rem;
    line-height: 1.85;
    box-shadow: 0 26px 54px rgba(33, 27, 21, .22);
}

    .pub-faq__help strong[b-5c82jfh2nm] {
        color: var(--pub-dark-ink);
        font-size: 1.1rem;
    }

    .pub-faq__help a[b-5c82jfh2nm] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        margin-top: 6px;
        color: #f4cd58;
        font-weight: 700;
        text-decoration: none;
    }

        .pub-faq__help a span[b-5c82jfh2nm] {
            transition: transform .25s ease;
        }

        .pub-faq__help a:hover span[b-5c82jfh2nm] {
            transform: translateX(-4px);
        }

.pub-page[dir="ltr"] .pub-faq__help a:hover span[b-5c82jfh2nm] {
    transform: translateX(4px);
}

.pub-faq__help-icon[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    box-shadow: 0 12px 26px rgba(214, 159, 34, .3);
}

    .pub-faq__help-icon svg[b-5c82jfh2nm] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: #2b210d;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pub-faq__list[b-5c82jfh2nm] {
    display: grid;
    gap: 12px;
}

.pub-faq__item[b-5c82jfh2nm] {
    border: 1px solid var(--pub-line);
    border-radius: 22px;
    background: var(--pub-card);
    box-shadow: var(--pub-shadow);
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

    .pub-faq__item:hover[b-5c82jfh2nm] {
        border-color: rgba(226, 179, 63, .4);
    }

    .pub-faq__item[open][b-5c82jfh2nm] {
        border-color: rgba(226, 179, 63, .6);
        box-shadow: var(--pub-shadow-lift);
    }

    .pub-faq__item summary[b-5c82jfh2nm] {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 30px;
        align-items: center;
        gap: 14px;
        padding: 20px 22px;
        color: var(--pub-ink);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

        .pub-faq__item summary[b-5c82jfh2nm]::-webkit-details-marker {
            display: none;
        }

        .pub-faq__item summary em[b-5c82jfh2nm] {
            color: var(--pub-muted);
            font-size: .85rem;
            font-style: normal;
            transition: color .3s ease;
        }

    .pub-faq__item[open] summary em[b-5c82jfh2nm] {
        color: var(--pub-gold-ink);
    }

    .pub-faq__item summary i[b-5c82jfh2nm] {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--pub-gold-soft);
        transition: transform .4s cubic-bezier(.2, .8, .2, 1), background-color .3s ease;
    }

        .pub-faq__item summary i[b-5c82jfh2nm]::before,
        .pub-faq__item summary i[b-5c82jfh2nm]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 2px;
            border-radius: 2px;
            background: var(--pub-gold-ink);
            transform: translate(-50%, -50%);
        }

        .pub-faq__item summary i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -50%) rotate(90deg);
            transition: transform .4s cubic-bezier(.2, .8, .2, 1);
        }

    .pub-faq__item[open] summary i[b-5c82jfh2nm] {
        transform: rotate(180deg);
        background: linear-gradient(135deg, var(--pub-gold-1), var(--pub-gold-2));
    }

        .pub-faq__item[open] summary i[b-5c82jfh2nm]::before,
        .pub-faq__item[open] summary i[b-5c82jfh2nm]::after {
            background: #2b210d;
        }

        .pub-faq__item[open] summary i[b-5c82jfh2nm]::after {
            transform: translate(-50%, -50%) rotate(0deg);
        }

    .pub-faq__item[b-5c82jfh2nm]::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .45s cubic-bezier(.2, .8, .2, 1), content-visibility .45s allow-discrete;
    }

    .pub-faq__item[open][b-5c82jfh2nm]::details-content {
        block-size: auto;
    }

.pub-faq__answer p[b-5c82jfh2nm] {
    margin: 0;
    padding: 0 22px 22px;
    padding-inline-start: calc(22px + 34px + 14px);
    color: var(--pub-text);
    line-height: 2;
}

/* ================= closing ================= */

.pub-closing[b-5c82jfh2nm] {
    padding-top: 30px;
}

.pub-closing__card[b-5c82jfh2nm] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 30px;
    min-height: 380px;
    padding: 56px 60px;
    overflow: hidden;
    border-radius: 38px;
    background:
        radial-gradient(65% 120% at 85% 0%, rgba(223, 169, 54, .24) 0%, transparent 64%),
        radial-gradient(55% 100% at 5% 100%, rgba(183, 121, 29, .14) 0%, transparent 68%),
        var(--pub-dark);
    box-shadow: 0 40px 80px rgba(33, 27, 21, .28);
    isolation: isolate;
}

.pub-closing__border[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--pub-angle), transparent 0 62%, rgba(244, 205, 88, .95) 80%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pub-rotate-b-5c82jfh2nm 7s linear infinite;
    pointer-events: none;
}

.pub-closing__shine[b-5c82jfh2nm] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 223, 140, .1) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: pub-shine-b-5c82jfh2nm 7s ease-in-out infinite;
    pointer-events: none;
}

.pub-closing__copy h2[b-5c82jfh2nm] {
    margin: 16px 0 12px;
    color: var(--pub-dark-ink);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
}

.pub-closing__copy p[b-5c82jfh2nm] {
    margin: 0 0 28px;
    max-width: 480px;
    color: var(--pub-dark-text);
    line-height: 1.95;
}

.pub-closing__actions[b-5c82jfh2nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pub-closing__fan[b-5c82jfh2nm] {
    position: relative;
    height: 290px;
}

    .pub-closing__fan img[b-5c82jfh2nm] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44%;
        height: auto;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
        translate: -50% -50%;
        transition: rotate .5s cubic-bezier(.2, .8, .2, 1), translate .5s cubic-bezier(.2, .8, .2, 1);
        animation: pub-float-b-5c82jfh2nm 7s ease-in-out infinite;
    }

        .pub-closing__fan img:nth-child(1)[b-5c82jfh2nm] {
            rotate: -13deg;
            translate: -102% -46%;
            animation-delay: .6s;
        }

        .pub-closing__fan img:nth-child(2)[b-5c82jfh2nm] {
            z-index: 2;
            rotate: 2deg;
            translate: -50% -54%;
        }

        .pub-closing__fan img:nth-child(3)[b-5c82jfh2nm] {
            rotate: 14deg;
            translate: 2% -46%;
            animation-delay: 1.2s;
        }

.pub-closing__card:hover .pub-closing__fan img:nth-child(1)[b-5c82jfh2nm] {
    rotate: -18deg;
    translate: -112% -44%;
}

.pub-closing__card:hover .pub-closing__fan img:nth-child(3)[b-5c82jfh2nm] {
    rotate: 19deg;
    translate: 12% -44%;
}

/* not found */

.pub-missing[b-5c82jfh2nm] {
    display: grid;
    place-items: center;
    gap: 24px;
    min-height: 50vh;
    padding: 80px 16px;
    text-align: center;
}

/* ---------- reveal on scroll ----------
   Driven by the scroll position itself where the browser can
   (no script, nothing to fail); elsewhere everything is simply shown. */

@supports (animation-timeline: view()) {
    .pub-reveal[b-5c82jfh2nm] {
        animation: pub-rise-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }

    .pub-viewer[b-5c82jfh2nm] {
        animation: pub-tilt-in-b-5c82jfh2nm linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

/* ---------- keyframes ---------- */

@property --pos {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

@property --pub-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes pub-rise-b-5c82jfh2nm {
    from {
        opacity: 0;
        translate: 0 26px;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes pub-swap-b-5c82jfh2nm {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-tilt-in-b-5c82jfh2nm {
    from {
        opacity: .2;
        transform: perspective(1400px) rotateX(16deg) translateY(40px) scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-sweep-b-5c82jfh2nm {
    0% {
        --pos: 50%;
    }

    30% {
        --pos: 6%;
    }

    66% {
        --pos: 94%;
    }

    100% {
        --pos: 50%;
    }
}

@keyframes pub-pin-in-b-5c82jfh2nm {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pub-note-in-b-5c82jfh2nm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-shine-b-5c82jfh2nm {
    0%, 30% {
        background-position: 120% 0, 0 0;
    }

    70%, 100% {
        background-position: -120% 0, 0 0;
    }
}

@keyframes pub-reveal-b-5c82jfh2nm {
    0%, 12% {
        clip-path: inset(0 100% 0 0);
    }

    44%, 78% {
        clip-path: inset(0 0 0 0);
    }

    92%, 100% {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes pub-scan-b-5c82jfh2nm {
    0%, 12% {
        left: 0;
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    42% {
        opacity: 1;
    }

    44%, 100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes pub-float-b-5c82jfh2nm {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pub-hover-b-5c82jfh2nm {
    0%, 100% {
        transform: rotate(-2.5deg) translateY(0);
    }

    50% {
        transform: rotate(-1.5deg) translateY(-10px);
    }
}

@keyframes pub-spin-b-5c82jfh2nm {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pub-rotate-b-5c82jfh2nm {
    to {
        --pub-angle: 360deg;
    }
}

@keyframes pub-drift-a-b-5c82jfh2nm {
    to {
        transform: translate(-40px, 30px) scale(1.08);
    }
}

@keyframes pub-drift-b-b-5c82jfh2nm {
    to {
        transform: translate(40px, -20px) scale(1.1);
    }
}

@keyframes pub-ping-b-5c82jfh2nm {
    0% {
        opacity: .9;
        transform: scale(.9);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes pub-marquee-b-5c82jfh2nm {
    to {
        transform: translateX(-50%);
    }
}

@keyframes pub-marquee-rtl-b-5c82jfh2nm {
    to {
        transform: translateX(50%);
    }
}

@keyframes pub-comet-b-5c82jfh2nm {
    0% {
        inset-inline-start: -90px;
    }

    75%, 100% {
        inset-inline-start: 100%;
    }
}

@keyframes pub-step-active-b-5c82jfh2nm {
    0%, 22% {
        border-color: #e6ad25;
        background-color: #f2c34a;
        color: #2b210d;
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 0 0 8px var(--pub-bg), 0 16px 34px rgba(214, 159, 34, .38);
    }

    32%, 100% {
        transform: none;
    }
}

@keyframes pub-art-land-b-5c82jfh2nm {
    0% {
        opacity: 0;
        transform: translate(46px, -56px) rotateX(18deg) rotateZ(7deg);
    }

    34%, 82% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translate(-30px, 40px) rotateZ(-4deg);
    }
}

@keyframes pub-art-fade-b-5c82jfh2nm {
    0%, 30% {
        opacity: 1;
    }

    40%, 82% {
        opacity: .12;
    }

    95%, 100% {
        opacity: 1;
    }
}

@keyframes pub-art-swap-b-5c82jfh2nm {
    0%, 30% {
        left: 8%;
    }

    50%, 80% {
        left: 54%;
    }

    100% {
        left: 8%;
    }
}

@keyframes pub-art-swap-back-b-5c82jfh2nm {
    0%, 30% {
        left: 54%;
    }

    50%, 80% {
        left: 8%;
    }

    100% {
        left: 54%;
    }
}

@keyframes pub-art-read-b-5c82jfh2nm {
    0%, 8% {
        clip-path: inset(0 0 100% 0);
    }

    70%, 88% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 100% 0);
    }
}

@keyframes pub-art-beam-b-5c82jfh2nm {
    0%, 8% {
        top: 18px;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    70% {
        top: calc(100% - 20px);
        opacity: 1;
    }

    78%, 100% {
        top: calc(100% - 20px);
        opacity: 0;
    }
}

@keyframes pub-art-pop-b-5c82jfh2nm {
    0%, 6% {
        opacity: 0;
        transform: scale(.3);
    }

    16%, 86% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.8);
    }
}

@keyframes pub-art-lang-b-5c82jfh2nm {
    0%, 40% {
        opacity: 1;
        transform: none;
    }

    50%, 90% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes pub-art-lang-in-b-5c82jfh2nm {
    0%, 40% {
        opacity: 0;
        transform: translateY(8px);
    }

    50%, 90% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes pub-art-ring-b-5c82jfh2nm {
    0%, 10% {
        stroke-dashoffset: 164;
    }

    60%, 88% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 164;
    }
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .pub-showcase__body[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-showcase__rail[b-5c82jfh2nm] {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .pub-thumb[b-5c82jfh2nm] {
        flex: 1 0 210px;
    }
}

@media (max-width: 1020px) {
    .pub-hero__layout[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        padding: 34px 26px;
    }

    .pub-hero__stage[b-5c82jfh2nm] {
        min-height: 400px;
    }

    .pub-bento[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-bento__card[b-5c82jfh2nm],
    .pub-bento__card:nth-child(1)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
        grid-column: span 1;
        grid-row: auto;
    }

        .pub-bento__card:nth-child(1)[b-5c82jfh2nm],
        .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
            grid-column: span 2;
        }

    .pub-flow__list[b-5c82jfh2nm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 22px;
    }

    .pub-flow__track[b-5c82jfh2nm] {
        display: none;
    }

    .pub-faq__layout[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .pub-faq__side[b-5c82jfh2nm] {
        position: static;
    }

    .pub-closing__card[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        padding: 48px 34px 20px;
        text-align: center;
    }

    .pub-closing__copy p[b-5c82jfh2nm] {
        margin-inline: auto;
    }

    .pub-closing__actions[b-5c82jfh2nm] {
        justify-content: center;
    }
}

@media (max-width: 860px) {
    .pub-sample[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .pub-sample--wide .pub-notes[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .pub-hero[b-5c82jfh2nm] {
        padding: 18px 0 40px;
    }

    .pub-hero__layout[b-5c82jfh2nm] {
        padding: 26px 18px;
        border-radius: 26px;
        gap: 28px;
    }

    .pub-hero__actions .pub-button[b-5c82jfh2nm] {
        flex: 1 1 100%;
    }

    .pub-hero__stage[b-5c82jfh2nm] {
        min-height: 340px;
    }

    .pub-stage__ring--one[b-5c82jfh2nm] {
        width: 320px;
        height: 320px;
    }

    .pub-stage__ring--two[b-5c82jfh2nm] {
        width: 250px;
        height: 250px;
    }

    .pub-morph[b-5c82jfh2nm] {
        width: min(240px, 70%);
    }

    .pub-morph--wide[b-5c82jfh2nm] {
        width: 100%;
    }

    .pub-chip[b-5c82jfh2nm] {
        font-size: .74rem;
        padding: 8px 11px;
    }

    .pub-chip--1[b-5c82jfh2nm] {
        inset-inline-start: 0;
    }

    .pub-chip--2[b-5c82jfh2nm] {
        inset-inline-end: 0;
    }

    .pub-ribbon[b-5c82jfh2nm] {
        margin-top: -20px;
    }

    .pub-ribbon__inner[b-5c82jfh2nm] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .pub-ribbon__label[b-5c82jfh2nm] {
        padding: 0;
        border: 0;
        text-align: center;
    }

    .pub-section[b-5c82jfh2nm] {
        padding: 60px 0;
    }

    .pub-showcase[b-5c82jfh2nm] {
        width: calc(100% - 12px);
        padding: 56px 0 60px;
        border-radius: 28px;
    }

    .pub-thumb[b-5c82jfh2nm] {
        flex-basis: 170px;
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .pub-thumb__img[b-5c82jfh2nm] {
        height: 54px;
    }

    .pub-thumb__arrow[b-5c82jfh2nm] {
        display: none;
    }

    .pub-viewer[b-5c82jfh2nm] {
        padding: 7px;
        border-radius: 18px;
    }

    .pub-viewer__live[b-5c82jfh2nm] {
        display: none;
    }

    .pub-compare__tag[b-5c82jfh2nm] {
        inset-block-start: 8px;
        padding: 4px 9px;
        font-size: .64rem;
    }

    .pub-compare__tag--before[b-5c82jfh2nm] {
        left: 8px;
    }

    .pub-compare__tag--after[b-5c82jfh2nm] {
        right: 8px;
    }

    .pub-pin[b-5c82jfh2nm] {
        width: 22px;
        height: 22px;
        font-size: .68rem;
    }

    .pub-bento[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-bento__card[b-5c82jfh2nm],
    .pub-bento__card:nth-child(1)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
    .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
        grid-column: span 1;
    }

        .pub-bento__card:nth-child(2)[b-5c82jfh2nm],
        .pub-bento__card:nth-child(3)[b-5c82jfh2nm] {
            flex-direction: column;
        }

            .pub-bento__card:nth-child(2) .pub-art[b-5c82jfh2nm],
            .pub-bento__card:nth-child(3) .pub-art[b-5c82jfh2nm] {
                flex-basis: auto;
                margin: 10px 10px 0;
            }

    .pub-flow__list[b-5c82jfh2nm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pub-faq__item summary[b-5c82jfh2nm] {
        grid-template-columns: 26px minmax(0, 1fr) 28px;
        gap: 10px;
        padding: 18px;
    }

    .pub-faq__answer p[b-5c82jfh2nm] {
        padding: 0 18px 20px;
        padding-inline-start: calc(18px + 26px + 10px);
    }

    .pub-closing__card[b-5c82jfh2nm] {
        padding: 40px 20px 10px;
        border-radius: 28px;
    }

    .pub-closing__fan[b-5c82jfh2nm] {
        height: 220px;
    }
}

/* room for the bar under the thumb (PublicHeader) */
@media (max-width: 720px) {
    .pub-page[b-5c82jfh2nm] {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-page *[b-5c82jfh2nm],
    .pub-page *[b-5c82jfh2nm]::before,
    .pub-page *[b-5c82jfh2nm]::after {
        animation: none !important;
        transition: none !important;
    }

    .pub-morph__page--after[b-5c82jfh2nm] {
        clip-path: inset(0 0 0 50%);
    }
}
/* _content/AITranslationPlatform.Web/Components/Support/Tickets.razor.rz.scp.css */
.tickets-page[b-tiohh5dm70]{display:grid;gap:24px;color:var(--text)}
.tickets-head[b-tiohh5dm70],.new-ticket-card[b-tiohh5dm70],.ticket-list-panel[b-tiohh5dm70],.ticket-conversation-panel[b-tiohh5dm70]{border:1px solid var(--border);background:var(--surface);box-shadow:var(--ui-shadow-sm)}
.tickets-head[b-tiohh5dm70]{min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:28px;background:radial-gradient(circle at 12% 0%,rgba(226,175,46,.12),transparent 30%),var(--surface)}
.tickets-head h1[b-tiohh5dm70]{margin:5px 0 7px;font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:1.2}
.tickets-head p[b-tiohh5dm70]{max-width:720px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.8}
.tickets-eyebrow[b-tiohh5dm70]{color:var(--accent-text);font-size:.67rem;font-weight:900;letter-spacing:.12em}
.tickets-primary[b-tiohh5dm70],.tickets-secondary[b-tiohh5dm70],.icon-close[b-tiohh5dm70]{font-family:inherit;cursor:pointer;transition:var(--ui-t)}
.tickets-primary[b-tiohh5dm70]{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border:0;border-radius:15px;background:linear-gradient(140deg,var(--ui-accent),var(--ui-accent-strong));color:var(--ui-on-accent);font-size:.82rem;font-weight:900;box-shadow:var(--ui-shadow-accent)}
.tickets-primary:hover:not(:disabled)[b-tiohh5dm70]{transform:translateY(-2px)}
.tickets-primary:disabled[b-tiohh5dm70]{opacity:.55;cursor:wait}
.tickets-primary>span[b-tiohh5dm70]{font-size:1.25rem;line-height:1}
.tickets-secondary[b-tiohh5dm70]{min-height:42px;padding:0 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-solid);color:var(--text-secondary);font-size:.76rem;font-weight:800}
.tickets-secondary:hover[b-tiohh5dm70]{border-color:var(--border-accent);color:var(--text)}
.danger-soft[b-tiohh5dm70]{color:var(--danger)}
.new-ticket-card[b-tiohh5dm70]{display:grid;gap:20px;padding:24px;border-radius:24px}
.new-ticket-head[b-tiohh5dm70]{display:flex;align-items:start;justify-content:space-between;gap:16px}
.new-ticket-head>div[b-tiohh5dm70]{display:grid;gap:4px}
.new-ticket-head strong[b-tiohh5dm70]{font-size:1rem}
.new-ticket-head span[b-tiohh5dm70]{color:var(--muted);font-size:.77rem}
.icon-close[b-tiohh5dm70]{width:34px;height:34px;border:1px solid var(--border);border-radius:11px;background:var(--surface-solid);color:var(--muted);font-size:1.2rem}
.new-ticket-grid[b-tiohh5dm70]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field[b-tiohh5dm70]{display:grid;gap:7px}.field-wide[b-tiohh5dm70]{grid-column:1/-1}.field>span[b-tiohh5dm70]{color:var(--text-secondary);font-size:.72rem;font-weight:800}
.field input[b-tiohh5dm70],.field select[b-tiohh5dm70],.field textarea[b-tiohh5dm70],.reply-box textarea[b-tiohh5dm70]{width:100%;border:1px solid var(--border);outline:0;border-radius:14px;background:var(--surface-solid);color:var(--text);font:inherit;font-size:.82rem;transition:var(--ui-t);box-sizing:border-box}
.field input[b-tiohh5dm70],.field select[b-tiohh5dm70]{height:46px;padding:0 13px}.field textarea[b-tiohh5dm70],.reply-box textarea[b-tiohh5dm70]{padding:13px 14px;resize:vertical;line-height:1.85}
.field input:focus[b-tiohh5dm70],.field select:focus[b-tiohh5dm70],.field textarea:focus[b-tiohh5dm70],.reply-box textarea:focus[b-tiohh5dm70]{border-color:var(--ui-accent);box-shadow:0 0 0 4px var(--ui-accent-soft)}
.new-ticket-actions[b-tiohh5dm70],.reply-actions[b-tiohh5dm70]{display:flex;align-items:center;gap:10px}.ticket-error[b-tiohh5dm70],.reply-error[b-tiohh5dm70]{color:var(--danger);font-size:.75rem;font-weight:800}
.tickets-workspace[b-tiohh5dm70]{min-height:590px;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px}
.ticket-list-panel[b-tiohh5dm70],.ticket-conversation-panel[b-tiohh5dm70]{min-width:0;min-height:0;border-radius:26px;overflow:hidden}
.ticket-list-panel[b-tiohh5dm70]{display:flex;flex-direction:column}.panel-title[b-tiohh5dm70]{min-height:76px;display:flex;align-items:center;padding:17px 18px;border-bottom:1px solid var(--border)}
.panel-title>div[b-tiohh5dm70]{display:grid;gap:2px}.panel-title strong[b-tiohh5dm70]{font-size:.92rem}.panel-title span[b-tiohh5dm70]{color:var(--muted);font-size:.68rem}
.ticket-list[b-tiohh5dm70]{display:grid;gap:7px;padding:10px;overflow-y:auto}
.ticket-row[b-tiohh5dm70]{position:relative;width:100%;display:grid;gap:8px;padding:14px;border:1px solid transparent;border-radius:17px;background:transparent;color:var(--text);text-align:start;font-family:inherit;cursor:pointer;transition:var(--ui-t)}
.ticket-row:hover[b-tiohh5dm70]{background:var(--surface-hover);border-color:var(--border)}.ticket-row.is-active[b-tiohh5dm70]{border-color:var(--border-accent);background:var(--ui-accent-soft)}
.ticket-row.has-unread[b-tiohh5dm70]{box-shadow:inset 3px 0 0 var(--ui-accent)}
.ticket-row-top[b-tiohh5dm70],.ticket-row-meta[b-tiohh5dm70],.ticket-row-foot[b-tiohh5dm70],.conversation-meta[b-tiohh5dm70],.message-author[b-tiohh5dm70]{display:flex;align-items:center}
.ticket-row-top[b-tiohh5dm70]{justify-content:space-between;gap:8px}.ticket-row-top strong[b-tiohh5dm70]{min-width:0;overflow:hidden;font-size:.8rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.unread-dot[b-tiohh5dm70]{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ui-accent-strong);box-shadow:0 0 0 5px var(--ui-accent-soft)}
.ticket-row-meta[b-tiohh5dm70],.ticket-row-foot[b-tiohh5dm70]{justify-content:space-between;gap:8px;color:var(--muted);font-size:.62rem}
.ticket-row p[b-tiohh5dm70]{display:-webkit-box;margin:0;overflow:hidden;color:var(--text-secondary);font-size:.7rem;line-height:1.65;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.status-pill[b-tiohh5dm70],.priority-chip[b-tiohh5dm70]{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:999px;font-size:.58rem;font-weight:900;white-space:nowrap}
.status-pill.wait-support[b-tiohh5dm70]{color:#8b5a13;background:rgba(192,132,38,.11)}.status-pill.wait-customer[b-tiohh5dm70]{color:#795f14;background:rgba(226,175,46,.13)}
.status-pill.resolved[b-tiohh5dm70]{color:#237059;background:rgba(39,132,103,.11)}.status-pill.closed[b-tiohh5dm70]{color:var(--muted);background:rgba(125,125,125,.10)}
.priority-chip.low[b-tiohh5dm70]{color:#3e7562;background:rgba(61,129,103,.08)}.priority-chip.normal[b-tiohh5dm70]{color:var(--text-secondary);background:var(--surface-hover)}
.priority-chip.high[b-tiohh5dm70]{color:#a46716;background:rgba(207,139,31,.10)}.priority-chip.urgent[b-tiohh5dm70]{color:var(--danger);background:rgba(180,80,63,.10)}
.ticket-conversation-panel[b-tiohh5dm70]{display:flex;flex-direction:column}.conversation-head[b-tiohh5dm70]{min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--border)}
.conversation-number[b-tiohh5dm70]{color:var(--accent-text);font-size:.65rem;font-weight:900;letter-spacing:.05em}.conversation-head h2[b-tiohh5dm70]{margin:5px 0 8px;font-size:1.05rem}
.conversation-meta[b-tiohh5dm70]{flex-wrap:wrap;gap:6px;color:var(--muted);font-size:.66rem}
.conversation-stream[b-tiohh5dm70]{flex:1;min-height:330px;display:flex;flex-direction:column;gap:13px;padding:22px;overflow-y:auto;background:linear-gradient(180deg,rgba(226,175,46,.025),transparent 20%)}
.message-bubble[b-tiohh5dm70]{width:min(76%,720px);display:grid;gap:8px;padding:14px 15px;border:1px solid var(--border);border-radius:18px;background:var(--surface-solid)}
.message-bubble.mine[b-tiohh5dm70]{align-self:flex-end;border-end-end-radius:5px;background:var(--ui-accent-soft);border-color:var(--border-accent)}
.message-bubble.staff[b-tiohh5dm70]{align-self:flex-start;border-end-start-radius:5px}
.message-author[b-tiohh5dm70]{justify-content:space-between;gap:15px}.message-author strong[b-tiohh5dm70]{font-size:.7rem}.message-author span[b-tiohh5dm70]{color:var(--muted);font-size:.58rem}
.message-bubble p[b-tiohh5dm70]{margin:0;white-space:pre-wrap;color:var(--text-secondary);font-size:.8rem;line-height:1.9}
.reply-box[b-tiohh5dm70]{display:grid;gap:10px;padding:16px 18px 18px;border-top:1px solid var(--border);background:var(--surface)}
.reply-actions[b-tiohh5dm70]{justify-content:space-between}.conversation-closed[b-tiohh5dm70]{padding:10px 18px;border-top:1px solid var(--border);background:rgba(125,125,125,.06);color:var(--muted);font-size:.68rem;text-align:center}
.ticket-empty[b-tiohh5dm70],.conversation-empty[b-tiohh5dm70]{flex:1;min-height:280px;display:grid;place-content:center;justify-items:center;gap:8px;padding:28px;color:var(--muted);text-align:center}
.ticket-empty p[b-tiohh5dm70],.conversation-empty p[b-tiohh5dm70]{max-width:330px;margin:0;font-size:.72rem;line-height:1.8}
.empty-glyph[b-tiohh5dm70],.conversation-icon[b-tiohh5dm70]{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:var(--ui-accent-soft);color:var(--accent-text);font-size:1.2rem}
@media(max-width:900px){.tickets-workspace[b-tiohh5dm70]{grid-template-columns:1fr}.ticket-list-panel[b-tiohh5dm70]{max-height:430px}.ticket-conversation-panel[b-tiohh5dm70]{min-height:580px}}
@media(max-width:650px){.tickets-head[b-tiohh5dm70]{align-items:stretch;flex-direction:column;padding:22px 18px}.tickets-head .tickets-primary[b-tiohh5dm70]{width:100%}.new-ticket-grid[b-tiohh5dm70]{grid-template-columns:1fr}.field-wide[b-tiohh5dm70]{grid-column:auto}.conversation-head[b-tiohh5dm70]{align-items:stretch;flex-direction:column}.message-bubble[b-tiohh5dm70]{width:92%}}


/* ============================================================
   TICKETING ATTACHMENTS V1 — USER
   ============================================================ */

.ticket-attachment-section[b-tiohh5dm70] {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.ticket-attachment-heading[b-tiohh5dm70] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ticket-attachment-heading > div[b-tiohh5dm70] {
    display: grid;
    gap: 3px;
}

.ticket-attachment-heading strong[b-tiohh5dm70] {
    color: var(--text);
    font-size: .82rem;
}

.ticket-attachment-heading span[b-tiohh5dm70] {
    color: var(--muted);
    font-size: .67rem;
}

.ticket-attachment-grid[b-tiohh5dm70] {
    display: grid;
    gap: 8px;
}

.ticket-attachment-card[b-tiohh5dm70] {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-solid);
}

.ticket-attachment-preview[b-tiohh5dm70],
.ticket-attachment-file-icon[b-tiohh5dm70] {
    width: 64px;
    height: 52px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--ui-accent-soft);
    color: var(--accent-text);
    text-decoration: none;
    font-size: .63rem;
    font-weight: 900;
}

.ticket-attachment-preview img[b-tiohh5dm70] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-attachment-info[b-tiohh5dm70] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ticket-attachment-info strong[b-tiohh5dm70] {
    overflow: hidden;
    color: var(--text);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-attachment-info span[b-tiohh5dm70],
.ticket-attachment-info small[b-tiohh5dm70] {
    color: var(--muted);
    font-size: .62rem;
}

.ticket-attachment-download[b-tiohh5dm70] {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--surface);
    text-decoration: none;
    font-size: .66rem;
    font-weight: 850;
}

.ticket-attachment-upload[b-tiohh5dm70] {
    display: flex;
    align-items: end;
    gap: 10px;
    padding-top: 3px;
}

.ticket-file-picker[b-tiohh5dm70] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 800;
}

.ticket-file-picker input[type="file"][b-tiohh5dm70] {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px dashed var(--border-accent);
    border-radius: 12px;
    background: var(--surface-solid);
    color: var(--muted);
    font: inherit;
}

@media(max-width:650px) {
    .ticket-attachment-card[b-tiohh5dm70] {
        grid-template-columns: 52px minmax(0,1fr);
    }

    .ticket-attachment-preview[b-tiohh5dm70],
    .ticket-attachment-file-icon[b-tiohh5dm70] {
        width: 52px;
        height: 46px;
    }

    .ticket-attachment-download[b-tiohh5dm70] {
        grid-column: 1 / -1;
        text-align: center;
    }

    .ticket-attachment-upload[b-tiohh5dm70] {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   TICKETING SOCIAL CONVERSATION V1 — USER
   ============================================================ */

.social-conversation-stream[b-tiohh5dm70] {
    flex: 1;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 18% 0%, rgba(226,175,46,.045), transparent 28%),
        linear-gradient(180deg, rgba(226,175,46,.018), transparent 22%);
}

.social-chat-row[b-tiohh5dm70] {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    direction: ltr;
}

.social-chat-row.mine[b-tiohh5dm70] {
    justify-content: flex-end;
}

.social-chat-row.other[b-tiohh5dm70] {
    justify-content: flex-start;
}

.social-avatar[b-tiohh5dm70] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-solid);
    color: var(--muted);
    font-size: .62rem;
    font-weight: 950;
    box-shadow: 0 5px 14px rgba(77,58,25,.06);
}

.social-chat-row.mine .social-avatar[b-tiohh5dm70] {
    order: 2;
    border-color: var(--border-accent);
    background: var(--ui-accent-soft);
    color: var(--accent-text);
}

.social-bubble-stack[b-tiohh5dm70] {
    max-width: min(72%, 720px);
    display: grid;
    gap: 5px;
}

.tickets-page[dir="rtl"] .social-bubble-stack[b-tiohh5dm70] {
    direction: rtl;
    text-align: right;
}

.tickets-page[dir="ltr"] .social-bubble-stack[b-tiohh5dm70] {
    direction: ltr;
    text-align: left;
}

.social-author-line[b-tiohh5dm70] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 5px;
    color: var(--muted);
}

.social-chat-row.mine .social-author-line[b-tiohh5dm70] {
    justify-content: flex-end;
}

.social-author-line strong[b-tiohh5dm70] {
    color: var(--text-secondary);
    font-size: .64rem;
    font-weight: 900;
}

.social-author-line span[b-tiohh5dm70] {
    font-size: .56rem;
}

.social-text-bubble[b-tiohh5dm70] {
    position: relative;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 19px 19px 19px 6px;
    background: var(--surface-solid);
    box-shadow: 0 8px 22px rgba(62,47,20,.045);
}

.social-chat-row.mine .social-text-bubble[b-tiohh5dm70] {
    border-color: var(--border-accent);
    border-radius: 19px 19px 6px 19px;
    background:
        linear-gradient(145deg, var(--ui-accent-soft), var(--surface-solid));
}

.social-text-bubble p[b-tiohh5dm70] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
    font-size: .81rem;
    line-height: 1.92;
}

.social-media-bubble[b-tiohh5dm70] {
    width: min(360px, 64vw);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: 0 10px 25px rgba(62,47,20,.06);
}

.social-chat-row.mine .social-media-bubble[b-tiohh5dm70] {
    border-color: var(--border-accent);
}

.social-image-link[b-tiohh5dm70] {
    display: block;
    overflow: hidden;
    background: var(--surface-hover);
}

.social-image-link img[b-tiohh5dm70] {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    transition: transform .22s ease;
}

.social-image-link:hover img[b-tiohh5dm70] {
    transform: scale(1.012);
}

.social-media-caption[b-tiohh5dm70] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px 10px;
}

.social-media-caption > span[b-tiohh5dm70] {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: .65rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-download-link[b-tiohh5dm70] {
    flex: 0 0 auto;
    color: var(--accent-text);
    text-decoration: none;
    font-size: .62rem;
    font-weight: 900;
}

.social-file-bubble[b-tiohh5dm70] {
    width: min(360px, 68vw);
    min-height: 68px;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-solid);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(62,47,20,.045);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.social-chat-row.mine .social-file-bubble[b-tiohh5dm70] {
    border-color: var(--border-accent);
    background:
        linear-gradient(145deg, var(--ui-accent-soft), var(--surface-solid));
}

.social-file-bubble:hover[b-tiohh5dm70] {
    transform: translateY(-1px);
    border-color: var(--border-accent);
    box-shadow: 0 11px 26px rgba(62,47,20,.07);
}

.social-file-icon[b-tiohh5dm70] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--ui-accent-soft);
    color: var(--accent-text);
}

.social-file-icon svg[b-tiohh5dm70] {
    width: 22px;
    height: 22px;
}

.social-file-copy[b-tiohh5dm70] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.social-file-copy strong[b-tiohh5dm70] {
    overflow: hidden;
    color: var(--text);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-file-copy small[b-tiohh5dm70] {
    color: var(--muted);
    font-size: .6rem;
}

.social-file-action[b-tiohh5dm70] {
    color: var(--accent-text);
    font-size: .61rem;
    font-weight: 900;
}

.social-composer[b-tiohh5dm70] {
    display: grid;
    gap: 8px;
    padding: 13px 15px 14px;
    border-top: 1px solid var(--border);
    background:
        linear-gradient(180deg, var(--surface), var(--surface-solid));
}

.social-composer-input[b-tiohh5dm70] {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.social-composer-input:focus-within[b-tiohh5dm70] {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
}

.social-composer textarea[b-tiohh5dm70] {
    width: 100%;
    min-height: 46px;
    max-height: 160px;
    padding: 10px 11px;
    border: 0;
    outline: 0;
    resize: vertical;
    box-sizing: border-box;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    line-height: 1.8;
}

.social-composer-actions[b-tiohh5dm70] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.social-attach-button[b-tiohh5dm70],
.social-send-button[b-tiohh5dm70] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 13px;
    font-family: inherit;
    font-size: .67rem;
    font-weight: 900;
}

.social-attach-button[b-tiohh5dm70] {
    position: relative;
    min-width: 98px;
    padding: 0 11px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text-secondary);
    cursor: pointer;
}

.social-attach-button:hover[b-tiohh5dm70] {
    border-color: var(--border-accent);
    color: var(--accent-text);
}

.social-attach-button svg[b-tiohh5dm70],
.social-send-button svg[b-tiohh5dm70] {
    width: 17px;
    height: 17px;
}

.social-attach-button input[type="file"][b-tiohh5dm70] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.social-send-button[b-tiohh5dm70] {
    min-width: 84px;
    padding: 0 13px;
    border: 0;
    background: linear-gradient(140deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);
    cursor: pointer;
    box-shadow: var(--ui-shadow-accent);
}

.social-send-button:hover[b-tiohh5dm70] {
    transform: translateY(-1px);
}

.social-composer-note[b-tiohh5dm70] {
    padding-inline: 8px;
    color: var(--muted);
    font-size: .59rem;
    line-height: 1.6;
}

.social-composer-error[b-tiohh5dm70] {
    margin: 10px 18px 0;
}

@media(max-width:650px) {
    .social-conversation-stream[b-tiohh5dm70] {
        padding: 16px 12px;
    }

    .social-bubble-stack[b-tiohh5dm70] {
        max-width: calc(100% - 42px);
    }

    .social-media-bubble[b-tiohh5dm70],
    .social-file-bubble[b-tiohh5dm70] {
        width: min(330px, 78vw);
    }

    .social-composer-input[b-tiohh5dm70] {
        grid-template-columns: 1fr;
    }

    .social-composer-actions[b-tiohh5dm70] {
        justify-content: space-between;
    }

    .social-attach-button[b-tiohh5dm70],
    .social-send-button[b-tiohh5dm70] {
        flex: 1;
    }
}


/* ============================================================
   TICKETING USER PREMIUM THEME V1
   Dashboard-aligned user support workspace
   ============================================================ */

.tickets-page[b-tiohh5dm70] {
    width: 100%;
    display: grid;
    gap: 22px;
    color: var(--text);
}

/* ============================================================
   HERO — same visual language as Dashboard
   ============================================================ */

.tickets-hero[b-tiohh5dm70] {
    min-height: 196px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 34px 36px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    background:
        radial-gradient(120% 150% at 8% -20%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(90% 120% at 96% 120%, var(--ui-bloom-cool), transparent 55%),
        linear-gradient(135deg, var(--ui-surface-strong), var(--ui-surface));
    box-shadow: var(--ui-shadow-md);
}

.tickets-page[dir="rtl"] .tickets-hero[b-tiohh5dm70] {
    background:
        radial-gradient(120% 150% at 92% -20%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(90% 120% at 4% 120%, var(--ui-bloom-cool), transparent 55%),
        linear-gradient(225deg, var(--ui-surface-strong), var(--ui-surface));
}

.tickets-hero[b-tiohh5dm70]::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    inset-block-start: -172px;
    inset-inline-end: -104px;
    border: 46px solid var(--ui-accent-soft);
    border-radius: 50%;
    animation: ui-hero-ring 1.1s var(--ui-ease-out) .08s backwards;
    pointer-events: none;
}

.tickets-hero[b-tiohh5dm70]::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    inset-block-end: -108px;
    inset-inline-start: -46px;
    border: 30px solid var(--ui-line-strong);
    border-radius: 50%;
    animation: ui-hero-ring 1.1s var(--ui-ease-out) .18s backwards;
    pointer-events: none;
}

.tickets-hero-copy[b-tiohh5dm70] {
    min-width: 0;
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.tickets-hero-eyebrow[b-tiohh5dm70],
.tickets-section-kicker[b-tiohh5dm70] {
    --badge-size: .6rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 5px 11px 5px 9px;
    border: 1px solid rgba(226, 175, 46, .34);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--accent-text);
    font-size: var(--badge-size);
    font-weight: 800;
    letter-spacing: .075em;
    white-space: nowrap;
}

.tickets-hero .tickets-hero-eyebrow[b-tiohh5dm70] {
    --badge-size: .66rem;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 13px 6px 11px;
    animation: ui-rise .55s var(--ui-ease-out) .12s backwards;
}

.tickets-page[dir="rtl"] .tickets-hero-eyebrow[b-tiohh5dm70],
.tickets-page[dir="rtl"] .tickets-section-kicker[b-tiohh5dm70] {
    padding: 5px 9px 5px 11px;
    letter-spacing: 0;
}

.tickets-page[dir="rtl"] .tickets-hero .tickets-hero-eyebrow[b-tiohh5dm70] {
    padding: 6px 11px 6px 13px;
}

.tickets-hero-eyebrow-dot[b-tiohh5dm70] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ui-accent-strong);
    box-shadow: 0 0 0 0 rgba(226, 175, 46, .55);
    animation: ui-pulse 2.4s var(--ui-ease) infinite;
}

.tickets-hero .tickets-hero-eyebrow-dot[b-tiohh5dm70] {
    width: 7px;
    height: 7px;
}

.tickets-hero h1[b-tiohh5dm70] {
    margin: 0 0 11px;
    color: var(--text);
    font-size: clamp(1.75rem, 2.2vw, 2.55rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.025em;
    animation: ui-reveal-up .6s var(--ui-ease-out) .2s backwards;
}

.tickets-page[dir="rtl"] .tickets-hero h1[b-tiohh5dm70] {
    letter-spacing: 0;
}

.tickets-hero p[b-tiohh5dm70] {
    max-width: 650px;
    margin: 0;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.9;
    animation: ui-rise .55s var(--ui-ease-out) .3s backwards;
}

.tickets-hero-actions[b-tiohh5dm70] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: ui-rise .55s var(--ui-ease-out) .38s backwards;
}

.tickets-hero-primary[b-tiohh5dm70],
.tickets-hero-secondary[b-tiohh5dm70] {
    min-height: 52px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px 0 8px;
    overflow: hidden;
    border-radius: var(--ui-r-pill);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--ui-t);
}

.tickets-page[dir="rtl"] .tickets-hero-primary[b-tiohh5dm70],
.tickets-page[dir="rtl"] .tickets-hero-secondary[b-tiohh5dm70] {
    padding: 0 8px 0 20px;
}

.tickets-action-glyph[b-tiohh5dm70] {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition:
        transform var(--ui-dur-2) var(--ui-ease-spring),
        background-color var(--ui-dur-2) var(--ui-ease);
}

.tickets-action-glyph svg[b-tiohh5dm70] {
    width: 17px;
    height: 17px;
}

.tickets-hero-primary:hover .tickets-action-glyph[b-tiohh5dm70] {
    transform: rotate(90deg) scale(1.08);
}

.tickets-hero-secondary:hover .tickets-action-glyph[b-tiohh5dm70] {
    transform: rotate(180deg) scale(1.08);
}

.tickets-hero-primary[b-tiohh5dm70] {
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-strong) 100%);
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

.tickets-hero-primary .tickets-action-glyph[b-tiohh5dm70] {
    background: rgba(74, 54, 8, .16);
    color: var(--ui-on-accent);
}

.tickets-hero-primary:hover[b-tiohh5dm70] {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(226, 175, 46, .42);
}

.tickets-hero-primary[b-tiohh5dm70]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            115deg,
            transparent 34%,
            rgba(255, 255, 255, .55) 50%,
            transparent 66%
        );
    opacity: 0;
    pointer-events: none;
}

.tickets-hero-primary:hover[b-tiohh5dm70]::before {
    animation: ui-sheen .8s var(--ui-ease-out);
}

.tickets-hero-secondary[b-tiohh5dm70] {
    border: 1px solid var(--ui-line-strong);
    background: var(--ui-surface-raised);
    color: var(--ui-ink);
}

.tickets-hero-secondary .tickets-action-glyph[b-tiohh5dm70] {
    background: var(--ui-surface-sunken);
    color: var(--ui-ink-2);
}

.tickets-hero-secondary:hover:not(:disabled)[b-tiohh5dm70] {
    transform: translateY(-2px);
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    box-shadow: var(--ui-shadow-md);
}

.tickets-hero-secondary:hover:not(:disabled) .tickets-action-glyph[b-tiohh5dm70] {
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
}

.tickets-hero-secondary:disabled[b-tiohh5dm70] {
    opacity: .58;
    cursor: wait;
}

/* ============================================================
   KPI SUMMARY
   ============================================================ */

.tickets-kpi-grid[b-tiohh5dm70] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.tickets-kpi-card[b-tiohh5dm70] {
    --kpi-ink: var(--ui-warning);
    --kpi-soft: var(--ui-accent-soft);
    --kpi-tint: var(--ui-accent-tint);
    min-width: 0;
    min-height: 142px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 17px 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-lg);
    background:
        linear-gradient(155deg, var(--kpi-tint) 0%, transparent 62%),
        var(--surface);
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

.tickets-kpi-card:hover[b-tiohh5dm70] {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-lg);
}

.tickets-kpi-card[b-tiohh5dm70]::after {
    content: "";
    position: absolute;
    width: 116px;
    height: 116px;
    inset-block-start: -50px;
    inset-inline-end: -34px;
    border-radius: 50%;
    background: var(--kpi-ink);
    opacity: .09;
    transform-origin: 50% 0;
    transition:
        transform var(--ui-dur-3) var(--ui-ease),
        opacity var(--ui-dur-2) var(--ui-ease);
    pointer-events: none;
}

.tickets-kpi-card:hover[b-tiohh5dm70]::after {
    opacity: .15;
    transform: scale(1.3);
}

.tickets-kpi-card[b-tiohh5dm70]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            115deg,
            transparent 32%,
            rgba(255, 255, 255, .55) 48%,
            transparent 64%
        );
    opacity: 0;
    pointer-events: none;
}

.tickets-kpi-card:hover[b-tiohh5dm70]::before {
    animation: ui-sheen .85s var(--ui-ease-out);
}

.tickets-kpi-card.waiting[b-tiohh5dm70] {
    --kpi-ink: var(--ui-warning);
    --kpi-soft: var(--ui-warning-soft);
    --kpi-tint: var(--ui-warning-tint);
}

.tickets-kpi-card.action[b-tiohh5dm70] {
    --kpi-ink: var(--ui-info);
    --kpi-soft: var(--ui-info-soft);
    --kpi-tint: var(--ui-info-tint);
}

.tickets-kpi-card.done[b-tiohh5dm70] {
    --kpi-ink: var(--ui-success);
    --kpi-soft: var(--ui-success-soft);
    --kpi-tint: var(--ui-success-tint);
}

.tickets-kpi-card.total[b-tiohh5dm70] {
    border-color: transparent;
    background:
        linear-gradient(
            150deg,
            var(--ui-accent) 0%,
            var(--ui-accent-strong) 100%
        );
    box-shadow: var(--ui-shadow-accent);
}

.tickets-kpi-card.total[b-tiohh5dm70]::after {
    background: #fff;
    opacity: .30;
}

.tickets-kpi-card.total .tickets-kpi-label[b-tiohh5dm70],
.tickets-kpi-card.total .tickets-kpi-value[b-tiohh5dm70] {
    color: var(--ui-on-accent);
}

.tickets-kpi-card.total .tickets-kpi-caption[b-tiohh5dm70] {
    color: rgba(74, 54, 8, .78);
}

.tickets-kpi-card.total .tickets-kpi-icon[b-tiohh5dm70] {
    border-color: rgba(74, 54, 8, .18);
    background: rgba(255, 255, 255, .62);
    color: var(--ui-on-accent);
}

.tickets-kpi-top[b-tiohh5dm70] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tickets-kpi-icon[b-tiohh5dm70] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
    border: 1px solid transparent;
    border-radius: var(--ui-r-sm);
    background: var(--kpi-soft);
    color: var(--kpi-ink);
    transition: var(--ui-t);
}

.tickets-kpi-card:hover .tickets-kpi-icon[b-tiohh5dm70] {
    transform: translateY(-2px) scale(1.09) rotate(-5deg);
}

.tickets-kpi-icon svg[b-tiohh5dm70] {
    width: 19px;
    height: 19px;
}

.tickets-kpi-icon .ico-frame[b-tiohh5dm70],
.tickets-kpi-icon .ico-detail[b-tiohh5dm70] {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.tickets-kpi-icon .ico-frame[b-tiohh5dm70] {
    animation: ui-draw .52s var(--ui-ease-out) .18s backwards;
}

.tickets-kpi-icon .ico-detail[b-tiohh5dm70] {
    animation: ui-draw .34s var(--ui-ease-out) .45s backwards;
}

.tickets-kpi-card:hover .tickets-kpi-icon .ico-frame[b-tiohh5dm70],
.tickets-kpi-card:hover .tickets-kpi-icon .ico-detail[b-tiohh5dm70] {
    animation: ui-redraw .42s var(--ui-ease-out) both;
}

.tickets-kpi-label[b-tiohh5dm70] {
    color: var(--text-secondary);
    font-size: .67rem;
    font-weight: 700;
}

.tickets-kpi-value[b-tiohh5dm70] {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    color: var(--text);
    font-size: 1.62rem;
    font-weight: 820;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    animation: ui-reveal-up .55s var(--ui-ease-out) .24s backwards;
}

.tickets-kpi-caption[b-tiohh5dm70] {
    position: relative;
    z-index: 2;
    margin-top: 9px;
    color: var(--muted);
    font-size: .61rem;
    line-height: 1.5;
}

/* ============================================================
   GENERIC SECTION HEADING
   ============================================================ */

.tickets-section-heading[b-tiohh5dm70],
.tickets-panel-heading[b-tiohh5dm70] {
    min-width: 0;
}

.tickets-section-heading h2[b-tiohh5dm70],
.tickets-panel-heading h2[b-tiohh5dm70] {
    margin: 0;
    color: var(--text);
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.35;
}

.tickets-section-heading p[b-tiohh5dm70],
.tickets-panel-heading p[b-tiohh5dm70] {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.7;
}

/* ============================================================
   CREATE TICKET
   ============================================================ */

.tickets-page .new-ticket-card[b-tiohh5dm70] {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-lg);
    background:
        radial-gradient(
            70% 130% at 100% 0%,
            var(--ui-accent-tint),
            transparent 58%
        ),
        var(--surface);
    box-shadow: var(--ui-shadow-sm);
    animation: ticket-create-in-b-tiohh5dm70 .46s var(--ui-ease-spring) backwards;
}

.tickets-page .new-ticket-card[b-tiohh5dm70]::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    inset-block-start: -106px;
    inset-inline-end: -44px;
    border: 24px solid var(--ui-accent-soft);
    border-radius: 50%;
    pointer-events: none;
}

.tickets-page .new-ticket-head[b-tiohh5dm70] {
    position: relative;
    z-index: 1;
    align-items: flex-start;
}

.tickets-page .icon-close[b-tiohh5dm70] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-raised);
    color: var(--muted);
    transition: var(--ui-t);
}

.tickets-page .icon-close:hover[b-tiohh5dm70] {
    transform: rotate(6deg) scale(1.04);
    border-color: var(--ui-danger);
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.tickets-page .new-ticket-grid[b-tiohh5dm70] {
    position: relative;
    z-index: 1;
    gap: 14px;
}

.tickets-page .field[b-tiohh5dm70] {
    gap: 7px;
}

.tickets-page .field > span[b-tiohh5dm70] {
    color: var(--text-secondary);
    font-size: .66rem;
    font-weight: 750;
}

.tickets-page .field input[b-tiohh5dm70],
.tickets-page .field select[b-tiohh5dm70],
.tickets-page .field textarea[b-tiohh5dm70] {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
    color: var(--text);
    transition: var(--ui-t);
}

.tickets-page .field input:hover[b-tiohh5dm70],
.tickets-page .field select:hover[b-tiohh5dm70],
.tickets-page .field textarea:hover[b-tiohh5dm70] {
    border-color: var(--ui-line-strong);
    background: var(--ui-surface-raised);
}

.tickets-page .field input:focus[b-tiohh5dm70],
.tickets-page .field select:focus[b-tiohh5dm70],
.tickets-page .field textarea:focus[b-tiohh5dm70] {
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
}

.tickets-page .new-ticket-actions[b-tiohh5dm70] {
    position: relative;
    z-index: 1;
    justify-content: flex-start;
    padding-top: 4px;
}

.tickets-page .tickets-primary[b-tiohh5dm70] {
    min-height: 44px;
    border-radius: var(--ui-r-pill);
    background:
        linear-gradient(
            135deg,
            var(--ui-accent),
            var(--ui-accent-strong)
        );
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

.tickets-page .tickets-secondary[b-tiohh5dm70] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-inline: 14px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    transition: var(--ui-t);
}

.tickets-page .tickets-secondary:hover[b-tiohh5dm70] {
    transform: translateY(-1px);
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    color: var(--text);
}

.tickets-page .conversation-close-action[b-tiohh5dm70] {
    flex: 0 0 auto;
}

.tickets-page .conversation-close-action svg[b-tiohh5dm70] {
    width: 16px;
    height: 16px;
}

.tickets-page .conversation-close-action:hover[b-tiohh5dm70] {
    border-color: var(--ui-danger);
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

/* ============================================================
   WORKSPACE
   ============================================================ */

.tickets-page .tickets-workspace[b-tiohh5dm70] {
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
}

.tickets-page .ticket-list-panel[b-tiohh5dm70],
.tickets-page .ticket-conversation-panel[b-tiohh5dm70] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-lg);
    background: var(--surface);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--ui-dur-2) var(--ui-ease);
}

.tickets-page .ticket-list-panel:hover[b-tiohh5dm70],
.tickets-page .ticket-conversation-panel:hover[b-tiohh5dm70] {
    box-shadow: var(--ui-shadow-md);
}

.tickets-page .panel-title[b-tiohh5dm70] {
    min-height: 92px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px 15px;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(
            180deg,
            var(--ui-surface-strong),
            var(--surface)
        );
}

.tickets-page .tickets-count-badge[b-tiohh5dm70] {
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    font-size: .58rem;
    font-weight: 750;
    white-space: nowrap;
}

/* ============================================================
   TICKET LIST
   ============================================================ */

.tickets-page .ticket-list[b-tiohh5dm70] {
    gap: 8px;
    padding: 10px;
}

.tickets-page .ticket-row[b-tiohh5dm70] {
    --row-ink: var(--ui-info);
    --row-tint: var(--ui-info-tint);
    position: relative;
    gap: 8px;
    padding: 14px 14px 13px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
    transition: var(--ui-t);
}

.tickets-page .ticket-row[b-tiohh5dm70]::before {
    content: "";
    width: 4px;
    position: absolute;
    inset-block: 11px;
    inset-inline-start: 0;
    border-radius: 0 var(--ui-r-pill) var(--ui-r-pill) 0;
    background: var(--row-ink);
    opacity: .42;
    transition: var(--ui-t);
}

.tickets-page[dir="rtl"] .ticket-row[b-tiohh5dm70]::before {
    border-radius: var(--ui-r-pill) 0 0 var(--ui-r-pill);
}

.tickets-page .ticket-row:hover[b-tiohh5dm70] {
    transform: translateY(-2px);
    border-color: var(--row-ink);
    background:
        linear-gradient(
            90deg,
            var(--row-tint),
            transparent 48%
        ),
        var(--ui-surface-strong);
    box-shadow: var(--ui-shadow-md);
}

.tickets-page[dir="rtl"] .ticket-row:hover[b-tiohh5dm70] {
    background:
        linear-gradient(
            270deg,
            var(--row-tint),
            transparent 48%
        ),
        var(--ui-surface-strong);
}

.tickets-page .ticket-row:hover[b-tiohh5dm70]::before,
.tickets-page .ticket-row.is-active[b-tiohh5dm70]::before {
    opacity: 1;
}

.tickets-page .ticket-row.is-active[b-tiohh5dm70] {
    border-color: var(--ui-accent-strong);
    background:
        linear-gradient(
            145deg,
            var(--ui-accent-tint),
            var(--ui-surface-strong)
        );
    box-shadow:
        inset 0 0 0 1px var(--ui-accent-soft),
        var(--ui-shadow-sm);
}

.tickets-page .ticket-row.has-unread[b-tiohh5dm70] {
    box-shadow:
        inset 0 0 0 1px var(--ui-accent-soft),
        var(--ui-shadow-sm);
}

.tickets-page .ticket-row-top strong[b-tiohh5dm70] {
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
}

.tickets-page .ticket-row-meta[b-tiohh5dm70],
.tickets-page .ticket-row-foot[b-tiohh5dm70] {
    color: var(--muted);
    font-size: .58rem;
}

.tickets-page .ticket-row p[b-tiohh5dm70] {
    color: var(--text-secondary);
    font-size: .66rem;
    line-height: 1.7;
}

.tickets-page .unread-dot[b-tiohh5dm70] {
    width: 7px;
    height: 7px;
    flex-basis: 7px;
    background: var(--ui-accent-strong);
    box-shadow: 0 0 0 5px var(--ui-accent-soft);
    animation: ui-pulse 2.2s var(--ui-ease) infinite;
}

.tickets-page .status-pill[b-tiohh5dm70],
.tickets-page .priority-chip[b-tiohh5dm70] {
    border: 1px solid transparent;
    padding: 4px 8px;
    font-size: .55rem;
}

.tickets-page .status-pill.wait-support[b-tiohh5dm70] {
    color: var(--ui-warning);
    background: var(--ui-warning-soft);
}

.tickets-page .status-pill.wait-customer[b-tiohh5dm70] {
    color: var(--ui-info);
    background: var(--ui-info-soft);
}

.tickets-page .status-pill.resolved[b-tiohh5dm70] {
    color: var(--ui-success);
    background: var(--ui-success-soft);
}

.tickets-page .status-pill.closed[b-tiohh5dm70] {
    color: var(--muted);
    background: var(--ui-surface-raised);
}

.tickets-page .priority-chip.low[b-tiohh5dm70] {
    color: var(--ui-success);
    background: var(--ui-success-soft);
}

.tickets-page .priority-chip.normal[b-tiohh5dm70] {
    color: var(--text-secondary);
    background: var(--ui-surface-raised);
}

.tickets-page .priority-chip.high[b-tiohh5dm70] {
    color: var(--ui-warning);
    background: var(--ui-warning-soft);
}

.tickets-page .priority-chip.urgent[b-tiohh5dm70] {
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
}

/* ============================================================
   CONVERSATION HEADER + EMPTY
   ============================================================ */

.tickets-page .ticket-conversation-panel[b-tiohh5dm70] {
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            180deg,
            var(--ui-surface-strong) 0,
            var(--surface) 118px
        );
}

.tickets-page .conversation-head[b-tiohh5dm70] {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.tickets-page .conversation-head-main[b-tiohh5dm70] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tickets-page .conversation-ticket-icon[b-tiohh5dm70] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-accent);
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
    color: var(--accent-text);
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

.tickets-page .conversation-head:hover .conversation-ticket-icon[b-tiohh5dm70] {
    transform: translateY(-2px) rotate(-4deg);
}

.tickets-page .conversation-ticket-icon svg[b-tiohh5dm70] {
    width: 21px;
    height: 21px;
}

.tickets-page .conversation-head-copy[b-tiohh5dm70] {
    min-width: 0;
}

.tickets-page .conversation-number[b-tiohh5dm70] {
    margin-bottom: 4px;
    color: var(--accent-text);
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .05em;
}

.tickets-page .conversation-head h2[b-tiohh5dm70] {
    max-width: 720px;
    margin: 0 0 7px;
    overflow: hidden;
    color: var(--text);
    font-size: 1.03rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tickets-page .conversation-meta[b-tiohh5dm70] {
    gap: 6px;
}

.tickets-page .conversation-meta > span:first-child[b-tiohh5dm70] {
    padding: 4px 8px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    font-size: .56rem;
    font-weight: 700;
}

.tickets-page .ticket-empty[b-tiohh5dm70],
.tickets-page .conversation-empty[b-tiohh5dm70] {
    min-height: 320px;
    gap: 9px;
}

.tickets-page .conversation-empty[b-tiohh5dm70] {
    background:
        radial-gradient(
            55% 75% at 50% 45%,
            var(--ui-accent-tint),
            transparent 72%
        );
}

.tickets-page .empty-glyph[b-tiohh5dm70],
.tickets-page .conversation-icon[b-tiohh5dm70] {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border: 1px solid var(--border-accent);
    border-radius: var(--ui-r-md);
    background: var(--ui-accent-soft);
    color: var(--accent-text);
    box-shadow: var(--ui-shadow-sm);
    animation: ticket-empty-float-b-tiohh5dm70 3.2s var(--ui-ease) infinite;
}

.tickets-page .conversation-icon svg[b-tiohh5dm70] {
    width: 24px;
    height: 24px;
}

.tickets-page .ticket-empty strong[b-tiohh5dm70],
.tickets-page .conversation-empty strong[b-tiohh5dm70] {
    color: var(--text);
    font-size: .78rem;
}

.tickets-page .ticket-empty p[b-tiohh5dm70],
.tickets-page .conversation-empty p[b-tiohh5dm70] {
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.75;
}

/* ============================================================
   SOCIAL CONVERSATION — premium refinement
   ============================================================ */

.tickets-page .social-conversation-stream[b-tiohh5dm70] {
    flex: 1;
    min-height: 390px;
    gap: 16px;
    padding: 24px 24px 26px;
    background:
        radial-gradient(
            45% 55% at 15% 0%,
            var(--ui-accent-tint),
            transparent 66%
        ),
        linear-gradient(
            180deg,
            var(--ui-surface-sunken),
            var(--surface) 22%
        );
    scrollbar-color: var(--ui-line-strong) transparent;
}

.tickets-page .social-chat-row[b-tiohh5dm70] {
    animation: ticket-message-in-b-tiohh5dm70 .42s var(--ui-ease-out) backwards;
}

.tickets-page .social-chat-row:nth-child(2)[b-tiohh5dm70] {
    animation-delay: .035s;
}

.tickets-page .social-chat-row:nth-child(3)[b-tiohh5dm70] {
    animation-delay: .07s;
}

.tickets-page .social-chat-row:nth-child(4)[b-tiohh5dm70] {
    animation-delay: .105s;
}

.tickets-page .social-chat-row:nth-child(5)[b-tiohh5dm70] {
    animation-delay: .14s;
}

.tickets-page .social-chat-row:nth-child(n+6)[b-tiohh5dm70] {
    animation-delay: .175s;
}

.tickets-page .social-avatar[b-tiohh5dm70] {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border: 2px solid var(--ui-surface-strong);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

.tickets-page .social-chat-row:hover .social-avatar[b-tiohh5dm70] {
    transform: scale(1.06);
}

.tickets-page .social-chat-row.mine .social-avatar[b-tiohh5dm70] {
    border-color: var(--ui-surface-strong);
    background:
        linear-gradient(
            145deg,
            var(--ui-accent),
            var(--ui-accent-strong)
        );
    color: var(--ui-on-accent);
}

.tickets-page .social-author-line[b-tiohh5dm70] {
    gap: 7px;
    padding-inline: 6px;
}

.tickets-page .social-author-line strong[b-tiohh5dm70] {
    color: var(--text-secondary);
    font-size: .60rem;
    font-weight: 800;
}

.tickets-page .social-author-line span[b-tiohh5dm70] {
    color: var(--muted);
    font-size: .52rem;
    font-variant-numeric: tabular-nums;
}

.tickets-page .social-text-bubble[b-tiohh5dm70] {
    padding: 12px 15px;
    border: 1px solid var(--ui-line);
    border-radius: 20px 20px 20px 7px;
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

.tickets-page .social-chat-row.other:hover .social-text-bubble[b-tiohh5dm70] {
    border-color: var(--ui-line-strong);
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-md);
}

.tickets-page .social-chat-row.mine .social-text-bubble[b-tiohh5dm70] {
    border-color: var(--border-accent);
    border-radius: 20px 20px 7px 20px;
    background:
        linear-gradient(
            145deg,
            var(--ui-accent-soft),
            var(--ui-surface-strong)
        );
}

.tickets-page .social-chat-row.mine:hover .social-text-bubble[b-tiohh5dm70] {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-md);
}

.tickets-page .social-text-bubble p[b-tiohh5dm70] {
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.9;
}

.tickets-page .social-media-bubble[b-tiohh5dm70],
.tickets-page .social-file-bubble[b-tiohh5dm70] {
    border-color: var(--ui-line);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tickets-page .social-media-bubble[b-tiohh5dm70] {
    border-radius: var(--ui-r-lg);
}

.tickets-page .social-image-link[b-tiohh5dm70] {
    background: var(--ui-surface-sunken);
}

.tickets-page .social-image-link img[b-tiohh5dm70] {
    transition:
        transform var(--ui-dur-3) var(--ui-ease-out),
        filter var(--ui-dur-2) var(--ui-ease);
}

.tickets-page .social-image-link:hover img[b-tiohh5dm70] {
    transform: scale(1.025);
    filter: saturate(1.035);
}

.tickets-page .social-media-caption[b-tiohh5dm70] {
    padding: 10px 12px 11px;
}

.tickets-page .social-download-link[b-tiohh5dm70],
.tickets-page .social-file-action[b-tiohh5dm70] {
    color: var(--accent-text);
}

.tickets-page .social-file-bubble[b-tiohh5dm70] {
    border-radius: var(--ui-r-md);
}

.tickets-page .social-file-bubble:hover[b-tiohh5dm70] {
    transform: translateY(-2px);
    border-color: var(--ui-accent-strong);
    box-shadow: var(--ui-shadow-md);
}

.tickets-page .social-file-icon[b-tiohh5dm70] {
    border: 1px solid var(--border-accent);
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
    color: var(--accent-text);
    transition: var(--ui-t);
}

.tickets-page .social-file-bubble:hover .social-file-icon[b-tiohh5dm70] {
    transform: rotate(-4deg) scale(1.05);
}

/* ============================================================
   COMPOSER
   ============================================================ */

.tickets-page .conversation-closed[b-tiohh5dm70] {
    padding: 10px 18px;
    border-top: 1px solid var(--ui-line);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .62rem;
}

.tickets-page .social-composer[b-tiohh5dm70] {
    gap: 8px;
    padding: 13px 15px 14px;
    border-top: 1px solid var(--ui-line);
    background:
        linear-gradient(
            180deg,
            var(--ui-surface-strong),
            var(--surface)
        );
}

.tickets-page .social-composer-input[b-tiohh5dm70] {
    padding: 7px;
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

.tickets-page .social-composer-input:focus-within[b-tiohh5dm70] {
    transform: translateY(-1px);
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    box-shadow:
        0 0 0 4px var(--ui-accent-soft),
        var(--ui-shadow-md);
}

.tickets-page .social-composer textarea[b-tiohh5dm70] {
    color: var(--text);
    font-size: .76rem;
}

.tickets-page .social-attach-button[b-tiohh5dm70],
.tickets-page .social-send-button[b-tiohh5dm70] {
    min-height: 42px;
    border-radius: var(--ui-r-pill);
    font-size: .63rem;
    transition: var(--ui-t);
}

.tickets-page .social-attach-button[b-tiohh5dm70] {
    min-width: 104px;
    border-color: var(--ui-line);
    background: var(--ui-surface-sunken);
    color: var(--text-secondary);
}

.tickets-page .social-attach-button:hover[b-tiohh5dm70] {
    transform: translateY(-1px);
    border-color: var(--ui-accent-strong);
    background: var(--ui-accent-soft);
    color: var(--accent-text);
}

.tickets-page .social-send-button[b-tiohh5dm70] {
    min-width: 88px;
    background:
        linear-gradient(
            135deg,
            var(--ui-accent),
            var(--ui-accent-strong)
        );
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

.tickets-page .social-send-button:hover[b-tiohh5dm70] {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(226, 175, 46, .32);
}

.tickets-page .social-send-button svg[b-tiohh5dm70] {
    transition: transform var(--ui-dur-2) var(--ui-ease-spring);
}

.tickets-page .social-send-button:hover svg[b-tiohh5dm70] {
    transform: translateX(-2px) rotate(-4deg);
}

.tickets-page[dir="ltr"] .social-send-button:hover svg[b-tiohh5dm70] {
    transform: translateX(2px) rotate(4deg);
}

.tickets-page .social-composer-note[b-tiohh5dm70] {
    padding-inline: 9px;
    color: var(--muted);
    font-size: .55rem;
}

/* ============================================================
   ERROR
   ============================================================ */

.tickets-page .ticket-error[b-tiohh5dm70] {
    padding: 9px 11px;
    border: 1px solid var(--ui-danger-soft);
    border-radius: var(--ui-r-sm);
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
    font-size: .64rem;
    font-weight: 750;
}

.tickets-page .social-composer-error[b-tiohh5dm70] {
    margin: 10px 18px 0;
}

/* ============================================================
   MOTION
   ============================================================ */

@keyframes ticket-create-in-b-tiohh5dm70 {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(.985);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

@keyframes ticket-message-in-b-tiohh5dm70 {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ticket-empty-float-b-tiohh5dm70 {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.tickets-page > *[b-tiohh5dm70] {
    animation: ui-rise .5s var(--ui-ease-out) backwards;
}

.tickets-page > :nth-child(1)[b-tiohh5dm70] {
    animation-delay: .02s;
}

.tickets-page > :nth-child(2)[b-tiohh5dm70] {
    animation-delay: .08s;
}

.tickets-page > :nth-child(3)[b-tiohh5dm70] {
    animation-delay: .14s;
}

.tickets-page > :nth-child(4)[b-tiohh5dm70] {
    animation-delay: .20s;
}

.tickets-page > :nth-child(n+5)[b-tiohh5dm70] {
    animation-delay: .26s;
}

.tickets-kpi-grid > *[b-tiohh5dm70] {
    --card-in: .10s;
    animation:
        ui-card-in .62s var(--ui-ease-out) var(--card-in) backwards;
}

.tickets-kpi-grid > :nth-child(2)[b-tiohh5dm70] {
    --card-in: .16s;
}

.tickets-kpi-grid > :nth-child(3)[b-tiohh5dm70] {
    --card-in: .22s;
}

.tickets-kpi-grid > :nth-child(4)[b-tiohh5dm70] {
    --card-in: .28s;
}

.tickets-page .ticket-row[b-tiohh5dm70] {
    animation: ticket-message-in-b-tiohh5dm70 .4s var(--ui-ease-out) backwards;
}

.tickets-page .ticket-row:nth-child(2)[b-tiohh5dm70] {
    animation-delay: .035s;
}

.tickets-page .ticket-row:nth-child(3)[b-tiohh5dm70] {
    animation-delay: .07s;
}

.tickets-page .ticket-row:nth-child(4)[b-tiohh5dm70] {
    animation-delay: .105s;
}

.tickets-page .ticket-row:nth-child(5)[b-tiohh5dm70] {
    animation-delay: .14s;
}

.tickets-page .ticket-row:nth-child(n+6)[b-tiohh5dm70] {
    animation-delay: .175s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
    .tickets-kpi-grid[b-tiohh5dm70] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tickets-page .tickets-workspace[b-tiohh5dm70] {
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .tickets-page .tickets-workspace[b-tiohh5dm70] {
        grid-template-columns: 1fr;
    }

    .tickets-page .ticket-list-panel[b-tiohh5dm70] {
        max-height: 440px;
    }

    .tickets-page .ticket-conversation-panel[b-tiohh5dm70] {
        min-height: 610px;
    }
}

@media (max-width: 760px) {
    .tickets-page[b-tiohh5dm70] {
        gap: 16px;
    }

    .tickets-hero[b-tiohh5dm70] {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        padding: 22px 20px;
    }

    .tickets-hero-actions[b-tiohh5dm70] {
        width: 100%;
    }

    .tickets-hero-primary[b-tiohh5dm70],
    .tickets-hero-secondary[b-tiohh5dm70] {
        flex: 1;
    }

    .tickets-page .conversation-head[b-tiohh5dm70] {
        align-items: flex-start;
        flex-direction: column;
    }

    .tickets-page .conversation-close-action[b-tiohh5dm70] {
        align-self: flex-end;
    }
}

@media (max-width: 650px) {
    .tickets-kpi-grid[b-tiohh5dm70] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .tickets-kpi-card[b-tiohh5dm70] {
        min-height: 130px;
        padding: 14px;
    }

    .tickets-page .new-ticket-grid[b-tiohh5dm70] {
        grid-template-columns: 1fr;
    }

    .tickets-page .field-wide[b-tiohh5dm70] {
        grid-column: auto;
    }

    .tickets-page .social-conversation-stream[b-tiohh5dm70] {
        padding: 16px 12px 20px;
    }

    .tickets-page .social-composer-input[b-tiohh5dm70] {
        grid-template-columns: 1fr;
    }

    .tickets-page .social-composer-actions[b-tiohh5dm70] {
        justify-content: space-between;
    }

    .tickets-page .social-attach-button[b-tiohh5dm70],
    .tickets-page .social-send-button[b-tiohh5dm70] {
        flex: 1;
    }
}

@media (max-width: 520px) {
    .tickets-kpi-grid[b-tiohh5dm70],
    .tickets-hero-actions[b-tiohh5dm70] {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .tickets-hero-primary[b-tiohh5dm70],
    .tickets-hero-secondary[b-tiohh5dm70] {
        width: 100%;
    }

    .tickets-kpi-grid[b-tiohh5dm70] {
        grid-template-columns: 1fr;
    }

    .tickets-page .panel-title[b-tiohh5dm70] {
        align-items: flex-start;
    }

    .tickets-page .conversation-head-main[b-tiohh5dm70] {
        align-items: flex-start;
    }

    .tickets-page .conversation-ticket-icon[b-tiohh5dm70] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .tickets-page .conversation-head h2[b-tiohh5dm70] {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tickets-page *[b-tiohh5dm70],
    .tickets-page *[b-tiohh5dm70]::before,
    .tickets-page *[b-tiohh5dm70]::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 520px) {

    .tickets-kpi-grid[b-tiohh5dm70] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .tickets-kpi-card[b-tiohh5dm70] {
        min-height: 0;
        padding: 13px;
    }

    .tickets-page .ticket-conversation-panel[b-tiohh5dm70] {
        min-height: 520px;
    }
}


/* rows never shrink to fit the scroller: overflow:hidden drops their
   automatic minimum height, and in a full list each one collapsed to
   its title with the status and preview cut off */
.tickets-page .ticket-row[b-tiohh5dm70] {
    flex-shrink: 0;
}

.tickets-page .conversation-back[b-tiohh5dm70] {
    display: none;
}


/* =========================================================
   PHONE: LIST, THEN CONVERSATION
   =========================================================
   Stacked, the conversation sat under the whole list - an
   empty "select a ticket" card the height of a screen, and
   after a tap the reply was somewhere below. On a phone the
   two take turns, the way a messaging app does: the list,
   and once a ticket is open, only that conversation with a
   way back.
   ========================================================= */

@media (max-width: 900px) {

    .tickets-page .tickets-workspace:not(.has-selection) .ticket-conversation-panel[b-tiohh5dm70] {
        display: none;
    }

    .tickets-page .tickets-workspace.has-selection .ticket-list-panel[b-tiohh5dm70] {
        display: none;
    }

    .tickets-page .ticket-list-panel[b-tiohh5dm70] {
        max-height: none;
    }

    .tickets-page .conversation-back[b-tiohh5dm70] {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        gap: 4px;
        min-height: 34px;
        padding: 0 12px 0 8px;
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-r-pill);
        background: var(--ui-surface-raised);
        color: var(--text-secondary);
        font-family: inherit;
        font-size: .7rem;
        font-weight: 800;
        cursor: pointer;
    }

        .tickets-page .conversation-back svg[b-tiohh5dm70] {
            width: 16px;
            height: 16px;
        }

    .tickets-page[dir="ltr"] .conversation-back svg[b-tiohh5dm70] {
        transform: scaleX(-1);
    }
}
/* _content/AITranslationPlatform.Web/Components/TranslationMemory/TranslationMemory.razor.rz.scp.css */
/* =========================================================
   TRANSLATION MEMORY — PREMIUM WORKSPACE V1
   Unified with Dashboard / Documents / Glossaries
   ========================================================= */

.tm-page[b-m64u6pjkg9] {
    --tm-accent: var(--ui-accent, #f2bd43);
    --tm-accent-strong: var(--ui-accent-strong, #dfa62c);
    --tm-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));
    --tm-accent-tint: var(--ui-accent-tint, rgba(226, 175, 46, .065));

    --tm-text: var(--text, #28241e);
    --tm-text-2: var(--text-secondary, #625d54);
    --tm-muted: var(--muted, #918a7f);

    --tm-surface: var(--surface, #ffffff);
    --tm-surface-raised: var(--ui-surface-raised, #ffffff);
    --tm-surface-strong: var(--ui-surface-strong, #fffdf9);
    --tm-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --tm-line: var(--ui-line, rgba(48, 43, 34, .10));
    --tm-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --tm-success: var(--ui-success, #4a8c61);
    --tm-success-soft: var(--ui-success-tint, rgba(74, 140, 97, .10));
    --tm-danger: var(--ui-danger, #b65050);
    --tm-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));

    --tm-shadow-sm: var(--ui-shadow-sm, 0 8px 22px rgba(32, 28, 22, .055));
    --tm-shadow-md: var(--ui-shadow-md, 0 18px 46px rgba(32, 28, 22, .085));

    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 0 0 28px;

    display: grid;
    gap: 18px;

    color: var(--tm-text);
}


/* =========================================================
   HERO
   ========================================================= */

.tm-hero[b-m64u6pjkg9] {
    position: relative;

    min-height: 210px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    margin: 0;
    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--tm-line);
    border-radius: 28px;

    background:
        radial-gradient(115% 145% at 8% -18%, var(--tm-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(135deg, var(--tm-surface-strong), var(--tm-surface));

    box-shadow: var(--tm-shadow-md);

    animation: tm-card-in-b-m64u6pjkg9 .62s cubic-bezier(.2,.8,.2,1) .03s backwards;
}

.tm-page[dir="rtl"] .tm-hero[b-m64u6pjkg9] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--tm-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(225deg, var(--tm-surface-strong), var(--tm-surface));
}

.tm-hero[b-m64u6pjkg9]::before,
.tm-hero[b-m64u6pjkg9]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tm-hero[b-m64u6pjkg9]::before {
    width: 285px;
    height: 285px;

    inset-block-start: -184px;
    inset-inline-end: -94px;

    border: 42px solid var(--tm-accent-soft);

    opacity: .78;
}

.tm-hero[b-m64u6pjkg9]::after {
    width: 154px;
    height: 154px;

    inset-block-end: -101px;
    inset-inline-start: -44px;

    border: 26px solid var(--tm-line-strong);

    opacity: .62;
}

.tm-hero > div[b-m64u6pjkg9] {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.tm-hero > div > span[b-m64u6pjkg9] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 9px;
    padding: 6px 11px;

    border: 1px solid rgba(226, 175, 46, .28);
    border-radius: 999px;

    background: var(--tm-surface-raised);

    color: #a86e11;

    font-size: .60rem;
    font-weight: 850;
    letter-spacing: .055em;
}

.tm-hero > div > span[b-m64u6pjkg9]::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--tm-accent-strong);

    box-shadow: 0 0 0 4px var(--tm-accent-soft);
}

.tm-page[dir="rtl"] .tm-hero > div > span[b-m64u6pjkg9] {
    letter-spacing: 0;
}

.tm-hero h1[b-m64u6pjkg9] {
    margin: 0;

    color: var(--tm-text);

    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.tm-page[dir="rtl"] .tm-hero h1[b-m64u6pjkg9] {
    letter-spacing: 0;
}

.tm-hero p[b-m64u6pjkg9] {
    max-width: 760px;

    margin: 11px 0 0;

    color: var(--tm-text-2);

    font-size: .82rem;
    line-height: 1.9;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.tm-primary[b-m64u6pjkg9],
.tm-page button[b-m64u6pjkg9] {
    font: inherit;
}

.tm-primary[b-m64u6pjkg9] {
    position: relative;
    z-index: 3;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex: 0 0 auto;

    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--tm-accent),
            var(--tm-accent-strong)
        );

    color: #34270f;

    font-size: .66rem;
    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 12px 26px rgba(226, 175, 46, .22),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition: .18s ease;
}

.tm-primary:hover:not(:disabled)[b-m64u6pjkg9] {
    transform: translateY(-2px);

    box-shadow:
        0 17px 34px rgba(226,175,46,.28),
        inset 0 1px 0 rgba(255,255,255,.38);
}


/* =========================================================
   SUMMARY — SAME LANGUAGE AS TRANSLATION CARDS
   ========================================================= */

.tm-summary[b-m64u6pjkg9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;

    margin: 0;
}

.tm-summary article[b-m64u6pjkg9] {
    position: relative;

    min-width: 0;
    min-height: 88px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 11px 78px 10px 14px;

    overflow: hidden;

    border: 1px solid var(--tm-line);
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #f6e6b7 0%,
            #fbf2d8 48%,
            #ffffff 100%
        );

    box-shadow:
        0 2px 8px rgba(16,24,40,.05),
        inset 0 1px 0 rgba(255,255,255,.50);

    transition: .16s ease;
}

.tm-summary article:hover[b-m64u6pjkg9] {
    transform: translateY(-1px);

    border-color: var(--tm-line-strong);

    box-shadow:
        0 4px 12px rgba(16,24,40,.07),
        inset 0 1px 0 rgba(255,255,255,.52);
}

.tm-summary article[b-m64u6pjkg9]::before {
    position: absolute;

    top: 50%;
    right: 15px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    color: #7f7357;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
}

.tm-summary article[b-m64u6pjkg9]::after {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    right: 62px;

    width: 1px;

    background: var(--tm-line);
}

.tm-summary article:nth-child(1)[b-m64u6pjkg9]::before { content: "M"; }
.tm-summary article:nth-child(2)[b-m64u6pjkg9]::before { content: "↔"; }
.tm-summary article:nth-child(3)[b-m64u6pjkg9]::before { content: "≡"; }
.tm-summary article:nth-child(4)[b-m64u6pjkg9]::before { content: "AI"; font-size: .76rem; }
.tm-summary article:nth-child(5)[b-m64u6pjkg9]::before { content: "C"; }
.tm-summary article:nth-child(6)[b-m64u6pjkg9]::before { content: "↻"; }
.tm-summary article:nth-child(7)[b-m64u6pjkg9]::before { content: "◷"; }

.tm-summary small[b-m64u6pjkg9] {
    display: block;

    margin: 0 0 4px;

    color: var(--tm-text-2);

    font-size: .56rem;
    font-weight: 780;
    line-height: 1.35;

    text-align: right;
}

.tm-summary strong[b-m64u6pjkg9] {
    display: block;

    margin: 0;

    color: #eea000;

    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.08;

    font-variant-numeric: tabular-nums;

    text-align: right;
}

.tm-page[dir="ltr"] .tm-summary article[b-m64u6pjkg9] {
    padding-left: 78px;
    padding-right: 14px;
}

.tm-page[dir="ltr"] .tm-summary article[b-m64u6pjkg9]::before {
    right: auto;
    left: 15px;
}

.tm-page[dir="ltr"] .tm-summary article[b-m64u6pjkg9]::after {
    right: auto;
    left: 62px;
}

.tm-page[dir="ltr"] .tm-summary small[b-m64u6pjkg9],
.tm-page[dir="ltr"] .tm-summary strong[b-m64u6pjkg9] {
    text-align: left;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.tm-panel[b-m64u6pjkg9] {
    min-width: 0;

    padding: 0;

    overflow: hidden;

    border: 1px solid var(--tm-line);
    border-radius: 24px;

    background: var(--tm-surface);

    box-shadow: var(--tm-shadow-sm);

    animation: tm-card-in-b-m64u6pjkg9 .58s cubic-bezier(.2,.8,.2,1) .10s backwards;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.tm-toolbar[b-m64u6pjkg9] {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.35fr)
        repeat(3, minmax(145px, .42fr));
    gap: 9px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--tm-line);

    background:
        linear-gradient(180deg, var(--tm-surface-soft), transparent);
}

.tm-toolbar input[b-m64u6pjkg9],
.tm-toolbar select[b-m64u6pjkg9] {
    width: 100%;
    min-height: 42px;

    box-sizing: border-box;

    border: 1px solid var(--tm-line);
    border-radius: 12px;
    outline: 0;

    background: var(--tm-surface-raised);

    color: var(--tm-text);

    font-family: inherit;
    font-size: .63rem;
    font-weight: 680;

    transition: .16s ease;
}

.tm-toolbar input[b-m64u6pjkg9] {
    padding: 0 12px;
}

.tm-toolbar select[b-m64u6pjkg9] {
    padding: 0 10px;
}

.tm-toolbar input[b-m64u6pjkg9]::placeholder {
    color: var(--tm-muted);
}

.tm-toolbar input:focus[b-m64u6pjkg9],
.tm-toolbar select:focus[b-m64u6pjkg9] {
    border-color: var(--tm-accent-strong);

    box-shadow: 0 0 0 3px var(--tm-accent-soft);
}


/* =========================================================
   BULK
   ========================================================= */

.tm-bulk[b-m64u6pjkg9] {
    min-height: 52px;

    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;

    margin: 0;
    padding: 9px 14px;

    border-bottom: 1px solid rgba(226,175,46,.18);

    background:
        linear-gradient(90deg, var(--tm-accent-tint), transparent 75%);
}

.tm-bulk b[b-m64u6pjkg9] {
    color: #9c6b16;

    font-size: .58rem;
    font-weight: 820;
}

.tm-bulk button[b-m64u6pjkg9],
.tm-actions button[b-m64u6pjkg9],
.tm-state button[b-m64u6pjkg9],
.tm-modal footer button[b-m64u6pjkg9] {
    min-height: 34px;

    border: 1px solid var(--tm-line);
    border-radius: 10px;

    background: var(--tm-surface-raised);

    color: var(--tm-text-2);

    padding: 0 11px;

    font-family: inherit;
    font-size: .55rem;
    font-weight: 780;

    cursor: pointer;

    transition: .16s ease;
}

.tm-bulk button:hover[b-m64u6pjkg9],
.tm-actions button:hover[b-m64u6pjkg9],
.tm-state button:hover[b-m64u6pjkg9] {
    transform: translateY(-1px);

    border-color: var(--tm-accent-strong);

    color: #9c6b16;

    background: var(--tm-accent-soft);
}

.tm-danger[b-m64u6pjkg9] {
    border-color: rgba(182,80,80,.18) !important;

    background: var(--tm-danger-soft) !important;

    color: var(--tm-danger) !important;
}

.tm-danger:hover[b-m64u6pjkg9] {
    border-color: rgba(182,80,80,.28) !important;

    color: var(--tm-danger) !important;
}


/* =========================================================
   TABLE
   ========================================================= */

.tm-table[b-m64u6pjkg9] {
    display: grid;
    gap: 8px;

    margin: 0;

    padding: 0 10px 11px;

    overflow: visible;
}

.tm-row[b-m64u6pjkg9] {
    position: relative;

    display: grid;
    grid-template-columns:
        28px
        minmax(0, 1.35fr)
        minmax(0, 1.35fr)
        96px
        130px
        140px
        118px;
    gap: 11px;
    align-items: center;

    min-height: 78px;

    padding: 11px 12px;

    border: 1px solid transparent;
    border-radius: 15px;

    background: transparent;

    color: var(--tm-text);

    font-size: .62rem;

    transition: .16s ease;
}

.tm-row.tm-head[b-m64u6pjkg9] {
    min-height: 40px;

    margin: 0 -10px;
    padding: 0 18px;

    border: 0;
    border-bottom: 1px solid var(--tm-line);
    border-radius: 0;

    background: var(--tm-surface-soft);

    color: var(--tm-muted);

    font-size: .51rem;
    font-weight: 800;

    text-transform: none;
}

.tm-row:not(.tm-head):hover[b-m64u6pjkg9] {
    transform: translateY(-1px);

    border-color: var(--tm-line);

    background:
        linear-gradient(90deg, var(--tm-accent-tint), transparent 72%),
        var(--tm-surface-strong);

    box-shadow: var(--tm-shadow-sm);
}

.tm-row.selected[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.24);

    background:
        linear-gradient(90deg, var(--tm-accent-soft), transparent 72%),
        var(--tm-surface-strong);

    box-shadow:
        inset 3px 0 0 var(--tm-accent-strong),
        var(--tm-shadow-sm);
}

.tm-page[dir="rtl"] .tm-row.selected[b-m64u6pjkg9] {
    box-shadow:
        inset -3px 0 0 var(--tm-accent-strong),
        var(--tm-shadow-sm);
}

.tm-row > div[b-m64u6pjkg9] {
    min-width: 0;
}

.tm-row small[b-m64u6pjkg9] {
    display: block;

    margin-top: 4px;

    color: var(--tm-muted);

    font-size: .49rem;
    line-height: 1.5;
}

.tm-row strong[b-m64u6pjkg9] {
    color: var(--tm-text);

    font-size: .58rem;
    font-weight: 810;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.tm-check[b-m64u6pjkg9] {
    position: relative;

    width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tm-check input[b-m64u6pjkg9] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.tm-check i[b-m64u6pjkg9] {
    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    border: 1px solid var(--tm-line-strong);
    border-radius: 6px;

    background: var(--tm-surface-raised);

    transition: .16s ease;
}

.tm-check input:checked + i[b-m64u6pjkg9] {
    border-color: var(--tm-accent-strong);

    background:
        linear-gradient(
            135deg,
            var(--tm-accent),
            var(--tm-accent-strong)
        );

    box-shadow: 0 4px 10px rgba(226,175,46,.18);
}

.tm-check input:checked + i[b-m64u6pjkg9]::after {
    content: "✓";

    display: block;

    color: #34270f;

    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}


/* =========================================================
   MEMORY TEXT
   ========================================================= */

.tm-memory-text[b-m64u6pjkg9] {
    max-height: 7.6em;

    overflow: auto;

    padding-inline-end: 4px;

    color: var(--tm-text);

    font-size: .60rem;
    line-height: 1.65;

    overflow-wrap: anywhere;
    word-break: break-word;

    scrollbar-width: thin;
}

.tm-memory-text[b-m64u6pjkg9]::-webkit-scrollbar {
    width: 7px;
}

.tm-memory-text[b-m64u6pjkg9]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background: rgba(127,115,87,.24);
    background-clip: padding-box;
}


/* =========================================================
   STATUS
   ========================================================= */

.tm-status[b-m64u6pjkg9] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 7px;

    border: 1px solid var(--tm-line);
    border-radius: 999px;

    background: var(--tm-surface-soft);

    color: var(--tm-muted);

    font-size: .49rem;
    font-weight: 820;
}

.tm-status[b-m64u6pjkg9]::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.tm-status.approved[b-m64u6pjkg9] {
    border-color: rgba(74,140,97,.12);

    background: var(--tm-success-soft);

    color: var(--tm-success);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.tm-actions[b-m64u6pjkg9] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tm-actions button[b-m64u6pjkg9] {
    min-height: 32px;

    padding: 0 9px;

    font-size: .51rem;
}


/* =========================================================
   STATES / EMPTY
   ========================================================= */

.tm-state[b-m64u6pjkg9] {
    min-height: 132px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 24px;

    color: var(--tm-muted);

    font-size: .62rem;
    line-height: 1.7;

    text-align: center;
}

.tm-panel.tm-state[b-m64u6pjkg9] {
    border-radius: 22px;
}


/* =========================================================
   MODAL — SELF CONTAINED TOKENS
   Modal is outside .tm-page in current Razor
   ========================================================= */

.tm-modal[b-m64u6pjkg9] {
    --tm-accent: var(--ui-accent, #f2bd43);
    --tm-accent-strong: var(--ui-accent-strong, #dfa62c);
    --tm-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));

    --tm-text: var(--text, #28241e);
    --tm-text-2: var(--text-secondary, #625d54);

    --tm-surface-raised: var(--ui-surface-raised, #ffffff);
    --tm-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --tm-line: var(--ui-line, rgba(48, 43, 34, .10));
    --tm-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --tm-danger: var(--ui-danger, #b65050);
    --tm-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));

    position: fixed;
    inset: 0;
    z-index: 2100;

    display: grid;
    place-items: center;

    padding: 24px;

    background: rgba(20,18,14,.38);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tm-modal section[b-m64u6pjkg9] {
    width: min(100%, 590px);
    max-height: min(88vh, 780px);

    overflow: auto;

    box-sizing: border-box;

    padding: 24px;

    border: 1px solid var(--tm-line-strong);
    border-radius: 24px;

    background: var(--tm-surface-raised);

    color: var(--tm-text);

    box-shadow: 0 28px 80px rgba(20,18,14,.24);

    animation: tm-dialog-in-b-m64u6pjkg9 .30s cubic-bezier(.2,.8,.2,1) both;
}

.tm-modal h2[b-m64u6pjkg9] {
    margin: 0 0 16px;

    color: var(--tm-text);

    font-size: 1rem;
    font-weight: 850;
    line-height: 1.4;
}

.tm-modal section > p:not(.tm-error)[b-m64u6pjkg9] {
    margin: 0 0 8px;

    color: var(--tm-text-2);

    font-size: .65rem;
    line-height: 1.8;
}

.tm-modal label:not(.tm-toggle)[b-m64u6pjkg9] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;

    width: 100%;

    margin: 13px 0 0;

    color: var(--tm-text);

    font-size: .62rem;
    font-weight: 770;
}

.tm-modal textarea[b-m64u6pjkg9],
.tm-modal select[b-m64u6pjkg9] {
    width: 100%;
    min-height: 45px;

    box-sizing: border-box;

    margin: 0;
    padding: 10px 12px;

    border: 1px solid var(--tm-line-strong);
    border-radius: 12px;
    outline: 0;

    background: var(--tm-surface-soft);

    color: var(--tm-text);

    font: inherit;
    font-size: .66rem;
    line-height: 1.7;

    transition: .16s ease;
}

.tm-modal textarea[b-m64u6pjkg9] {
    min-height: 96px;

    resize: vertical;
}

.tm-modal textarea:focus[b-m64u6pjkg9],
.tm-modal select:focus[b-m64u6pjkg9] {
    border-color: var(--tm-accent-strong);

    background: var(--tm-surface-raised);

    box-shadow: 0 0 0 3px var(--tm-accent-soft);
}

.tm-modal .tm-toggle[b-m64u6pjkg9] {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 46px;

    box-sizing: border-box;

    margin: 12px 0 0;
    padding: 10px 12px;

    border: 1px solid var(--tm-line);
    border-radius: 12px;

    background: var(--tm-surface-soft);

    color: var(--tm-text);

    font-size: .62rem;
    font-weight: 740;

    cursor: pointer;
}

.tm-modal .tm-toggle input[b-m64u6pjkg9] {
    width: 18px;
    height: 18px;

    margin: 0;

    accent-color: var(--tm-accent-strong);
}

.tm-error[b-m64u6pjkg9] {
    margin: 12px 0 0;

    padding: 9px 10px;

    border: 1px solid rgba(182,80,80,.14);
    border-radius: 10px;

    background: var(--tm-danger-soft);

    color: var(--tm-danger);

    font-size: .58rem;
    line-height: 1.65;
}

.tm-modal footer[b-m64u6pjkg9] {
    display: flex;
    justify-content: flex-start;
    gap: 8px;

    margin-top: 18px;
}

.tm-modal footer > button:first-child[b-m64u6pjkg9] {
    min-height: 40px;

    padding: 0 15px;

    border: 1px solid var(--tm-line-strong);
    border-radius: 11px;

    background: var(--tm-surface-raised);

    color: var(--tm-text-2);

    font-family: inherit;
    font-size: .61rem;
    font-weight: 800;

    cursor: pointer;
}

.tm-modal footer .tm-primary[b-m64u6pjkg9] {
    min-height: 40px;

    padding: 0 16px;

    border-radius: 11px;

    font-size: .61rem;
}

.tm-modal footer .tm-primary:disabled[b-m64u6pjkg9] {
    opacity: .58;
    cursor: wait;
}


/* =========================================================
   DARK MODE — WARM, NOT NAVY/BLACK
   ========================================================= */

html[data-theme="dark"] .tm-page[b-m64u6pjkg9] {
    --tm-text: var(--text, #f1eee8);
    --tm-text-2: var(--text-secondary, #c6bfb3);
    --tm-muted: var(--muted, #9b9386);

    --tm-surface: #1f1a15;
    --tm-surface-raised: #24201a;
    --tm-surface-strong: #262019;
    --tm-surface-soft: #191510;

    --tm-line: rgba(255,236,198,.08);
    --tm-line-strong: rgba(255,236,198,.14);

    --tm-shadow-sm: 0 12px 28px rgba(0,0,0,.13);
    --tm-shadow-md: 0 22px 50px rgba(0,0,0,.20);
}

html[data-theme="dark"] .tm-summary article[b-m64u6pjkg9] {
    border-color: var(--tm-line);

    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.16) 0%,
            rgba(226,175,46,.08) 48%,
            rgba(255,255,255,.025) 100%
        );

    box-shadow:
        0 6px 20px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="dark"] .tm-summary article[b-m64u6pjkg9]::before {
    color: #c6b490;
}

html[data-theme="dark"] .tm-summary strong[b-m64u6pjkg9] {
    color: #f1b43a;
}

html[data-theme="dark"] .tm-toolbar select option[b-m64u6pjkg9],
html[data-theme="dark"] .tm-modal select option[b-m64u6pjkg9] {
    background: #262019;
    color: #f1eee8;
}

html[data-theme="dark"] .tm-modal[b-m64u6pjkg9] {
    --tm-text: var(--text, #f1eee8);
    --tm-text-2: var(--text-secondary, #c6bfb3);

    --tm-surface-raised: #24201a;
    --tm-surface-soft: #191510;

    --tm-line: rgba(255,236,198,.08);
    --tm-line-strong: rgba(255,236,198,.14);

    background: rgba(6,5,4,.62);
}

html[data-theme="dark"] .tm-modal section[b-m64u6pjkg9] {
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .tm-summary[b-m64u6pjkg9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tm-toolbar[b-m64u6pjkg9] {
        grid-template-columns: minmax(230px, 1fr) repeat(2, minmax(130px, .48fr));
    }

    .tm-toolbar select:last-child[b-m64u6pjkg9] {
        grid-column: auto;
    }

    .tm-row[b-m64u6pjkg9] {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            minmax(0, 1fr)
            92px
            120px
            118px;
    }

    .tm-row > :nth-child(6)[b-m64u6pjkg9],
    .tm-row.tm-head > :nth-child(6)[b-m64u6pjkg9] {
        display: none;
    }
}

@media (max-width: 900px) {
    .tm-toolbar[b-m64u6pjkg9] {
        grid-template-columns: 1fr 1fr;
    }

    .tm-toolbar input[b-m64u6pjkg9] {
        grid-column: 1 / -1;
    }

    .tm-row.tm-head[b-m64u6pjkg9] {
        display: none;
    }

    .tm-table[b-m64u6pjkg9] {
        gap: 9px;

        padding: 12px;
    }

    .tm-row:not(.tm-head)[b-m64u6pjkg9] {
        grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;

        padding: 14px;

        border-color: var(--tm-line);

        background: var(--tm-surface-strong);
    }

    .tm-row:not(.tm-head) > div[b-m64u6pjkg9]::before {
        content: attr(data-label);

        display: block;

        margin-bottom: 4px;

        color: var(--tm-muted);

        font-size: .47rem;
        font-weight: 800;
    }

    .tm-row:not(.tm-head) > div:nth-of-type(n+3)[b-m64u6pjkg9] {
        grid-column: 2 / -1;
    }

    .tm-actions[b-m64u6pjkg9] {
        grid-column: 2 / -1;
    }
}

@media (max-width: 650px) {
    .tm-page[b-m64u6pjkg9] {
        gap: 14px;
    }

    .tm-hero[b-m64u6pjkg9] {
        min-height: 0;

        flex-direction: column;
        align-items: stretch;

        padding: 23px 20px;

        border-radius: 22px;
    }

    .tm-primary[b-m64u6pjkg9] {
        width: 100%;
    }

    .tm-summary[b-m64u6pjkg9] {
        grid-template-columns: 1fr;
    }

    .tm-toolbar[b-m64u6pjkg9] {
        grid-template-columns: 1fr;
    }

    .tm-toolbar input[b-m64u6pjkg9] {
        grid-column: auto;
    }

    .tm-bulk[b-m64u6pjkg9] {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-bulk button[b-m64u6pjkg9] {
        width: 100%;
    }

    .tm-row:not(.tm-head)[b-m64u6pjkg9] {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .tm-row:not(.tm-head) > div[b-m64u6pjkg9] {
        grid-column: 2;
    }

    .tm-actions[b-m64u6pjkg9] {
        grid-column: 2;
    }

    .tm-modal[b-m64u6pjkg9] {
        padding: 14px;
    }

    .tm-modal section[b-m64u6pjkg9] {
        width: 100%;
        max-height: 90vh;

        padding: 19px;

        border-radius: 20px;
    }

    .tm-modal footer[b-m64u6pjkg9] {
        flex-direction: column-reverse;
    }

    .tm-modal footer > button[b-m64u6pjkg9] {
        width: 100%;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes tm-card-in-b-m64u6pjkg9 {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.995);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tm-dialog-in-b-m64u6pjkg9 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tm-spin-b-m64u6pjkg9 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-hero[b-m64u6pjkg9],
    .tm-panel[b-m64u6pjkg9],
    .tm-summary article[b-m64u6pjkg9],
    .tm-row[b-m64u6pjkg9],
    .tm-primary[b-m64u6pjkg9],
    .tm-modal section[b-m64u6pjkg9] {
        animation: none !important;
        transition: none !important;
    }
}


/* TRANSLATION MEMORY DARK THEME V2 - START */

/*
 * Warm dark theme override.
 * Removes cold navy/black surfaces from Translation Memory
 * and aligns them with the warm Dashboard / Glossary theme.
 */

html[data-theme="dark"] .tm-page[b-m64u6pjkg9] {
    --tm-text: #f3eee5 !important;
    --tm-text-2: #d2c8b7 !important;
    --tm-muted: #9d9487 !important;

    --tm-surface: #211b15 !important;
    --tm-surface-raised: #292219 !important;
    --tm-surface-strong: #2d251c !important;
    --tm-surface-soft: #19140f !important;

    --tm-line: rgba(255, 236, 198, .09) !important;
    --tm-line-strong: rgba(255, 236, 198, .15) !important;

    --tm-success: #8fc67d !important;
    --tm-success-soft: rgba(111, 161, 91, .14) !important;

    --tm-danger: #e28a83 !important;
    --tm-danger-soft: rgba(200, 92, 84, .12) !important;

    color: var(--tm-text) !important;
}

/* Hero */
html[data-theme="dark"] .tm-hero[b-m64u6pjkg9] {
    border-color: var(--tm-line-strong) !important;

    background:
        radial-gradient(115% 145% at 92% -18%, rgba(226,175,46,.11), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(255,236,198,.035), transparent 56%),
        linear-gradient(225deg, #2c241b, #211b15) !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.02) !important;
}

html[data-theme="dark"] .tm-hero > div > span[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.18) !important;
    background: #2a231b !important;
    color: #e5b84e !important;
}

html[data-theme="dark"] .tm-hero h1[b-m64u6pjkg9] {
    color: #f6f0e7 !important;
}

html[data-theme="dark"] .tm-hero p[b-m64u6pjkg9] {
    color: #c8beaf !important;
}

/* Summary cards */
html[data-theme="dark"] .tm-summary article[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.12) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.16) 0%,
            rgba(226,175,46,.085) 48%,
            rgba(255,255,255,.025) 100%
        ) !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.02) !important;
}

html[data-theme="dark"] .tm-summary article[b-m64u6pjkg9]::after {
    background: rgba(255,236,198,.11) !important;
}

html[data-theme="dark"] .tm-summary article[b-m64u6pjkg9]::before {
    color: #c8b68f !important;
}

html[data-theme="dark"] .tm-summary small[b-m64u6pjkg9] {
    color: #c6bcad !important;
}

html[data-theme="dark"] .tm-summary strong[b-m64u6pjkg9] {
    color: #f0b637 !important;
}

/* Main library panel — remove navy */
html[data-theme="dark"] .tm-panel[b-m64u6pjkg9] {
    border-color: var(--tm-line-strong) !important;

    background:
        linear-gradient(
            180deg,
            #272018 0%,
            #211b15 100%
        ) !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Toolbar */
html[data-theme="dark"] .tm-toolbar[b-m64u6pjkg9] {
    border-bottom-color: var(--tm-line) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,0)
        ) !important;
}

html[data-theme="dark"] .tm-toolbar input[b-m64u6pjkg9],
html[data-theme="dark"] .tm-toolbar select[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.14) !important;
    background: #18130f !important;
    color: #efe8dc !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015) !important;
}

html[data-theme="dark"] .tm-toolbar input[b-m64u6pjkg9]::placeholder {
    color: #8f8578 !important;
}

html[data-theme="dark"] .tm-toolbar input:focus[b-m64u6pjkg9],
html[data-theme="dark"] .tm-toolbar select:focus[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.48) !important;
    background: #1d1712 !important;

    box-shadow:
        0 0 0 3px rgba(226,175,46,.10) !important;
}

html[data-theme="dark"] .tm-toolbar select option[b-m64u6pjkg9] {
    background: #211b15 !important;
    color: #f1ebe2 !important;
}

/* Bulk bar */
html[data-theme="dark"] .tm-bulk[b-m64u6pjkg9] {
    border-bottom-color: rgba(226,175,46,.14) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.10),
            rgba(226,175,46,.025) 72%,
            transparent
        ) !important;
}

html[data-theme="dark"] .tm-bulk b[b-m64u6pjkg9] {
    color: #e9b846 !important;
}

/* Table header — warm dark instead of black/navy */
html[data-theme="dark"] .tm-row.tm-head[b-m64u6pjkg9] {
    border-bottom-color: rgba(255,236,198,.08) !important;

    background: #18130f !important;

    color: #c0b4a3 !important;
}

/* Table rows — warm charcoal */
html[data-theme="dark"] .tm-row:not(.tm-head)[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.035) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.008)
        ) !important;

    color: #eee7db !important;
}

html[data-theme="dark"] .tm-row:not(.tm-head):hover[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.16) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.065),
            rgba(226,175,46,.018) 72%,
            rgba(255,255,255,.01)
        ) !important;

    box-shadow:
        0 9px 22px rgba(0,0,0,.13) !important;
}

html[data-theme="dark"] .tm-row.selected[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.26) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226,175,46,.11),
            rgba(226,175,46,.025) 72%,
            rgba(255,255,255,.01)
        ) !important;
}

/* Text */
html[data-theme="dark"] .tm-memory-text[b-m64u6pjkg9],
html[data-theme="dark"] .tm-row strong[b-m64u6pjkg9] {
    color: #f0e9dd !important;
}

html[data-theme="dark"] .tm-row small[b-m64u6pjkg9] {
    color: #9e9588 !important;
}

/* Language code column */
html[data-theme="dark"] .tm-row > div[dir="ltr"][b-m64u6pjkg9] {
    color: #e8dfd0 !important;
    font-weight: 780 !important;
}

/* Checkboxes */
html[data-theme="dark"] .tm-check i[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.17) !important;
    background: #17120e !important;
}

html[data-theme="dark"] .tm-check input:checked + i[b-m64u6pjkg9] {
    border-color: #d9a72d !important;

    background:
        linear-gradient(
            135deg,
            #efc14b,
            #d8a229
        ) !important;
}

/* Status */
html[data-theme="dark"] .tm-status[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.10) !important;

    background: rgba(255,255,255,.025) !important;

    color: #a79d8f !important;
}

html[data-theme="dark"] .tm-status.approved[b-m64u6pjkg9] {
    border-color: rgba(125,180,102,.16) !important;

    background: rgba(100,155,80,.13) !important;

    color: #9dcc83 !important;
}

/* Buttons */
html[data-theme="dark"] .tm-bulk button[b-m64u6pjkg9],
html[data-theme="dark"] .tm-actions button[b-m64u6pjkg9],
html[data-theme="dark"] .tm-state button[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.12) !important;

    background: #17120e !important;

    color: #e2d8c8 !important;
}

html[data-theme="dark"] .tm-bulk button:hover[b-m64u6pjkg9],
html[data-theme="dark"] .tm-actions button:hover[b-m64u6pjkg9],
html[data-theme="dark"] .tm-state button:hover[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.23) !important;

    background: #201912 !important;

    color: #efbf4a !important;
}

html[data-theme="dark"] .tm-danger[b-m64u6pjkg9] {
    border-color: rgba(213,110,101,.18) !important;

    background: rgba(180,74,68,.12) !important;

    color: #e28b83 !important;
}

/* State / empty */
html[data-theme="dark"] .tm-state[b-m64u6pjkg9] {
    color: #b8afa2 !important;

    background: transparent !important;
}

/* Modal */
html[data-theme="dark"] .tm-modal[b-m64u6pjkg9] {
    --tm-text: #f3eee5 !important;
    --tm-text-2: #d2c8b7 !important;

    --tm-surface-raised: #292219 !important;
    --tm-surface-soft: #19140f !important;

    --tm-line: rgba(255,236,198,.09) !important;
    --tm-line-strong: rgba(255,236,198,.15) !important;

    background: rgba(6,5,4,.68) !important;
}

html[data-theme="dark"] .tm-modal section[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.14) !important;

    background:
        linear-gradient(
            180deg,
            #2a231b,
            #211b15
        ) !important;

    box-shadow:
        0 30px 85px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html[data-theme="dark"] .tm-modal h2[b-m64u6pjkg9] {
    color: #f5efe6 !important;
}

html[data-theme="dark"] .tm-modal label[b-m64u6pjkg9] {
    color: #e8dfd2 !important;
}

html[data-theme="dark"] .tm-modal textarea[b-m64u6pjkg9],
html[data-theme="dark"] .tm-modal select[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.14) !important;

    background: #17120e !important;

    color: #f0e9dd !important;
}

html[data-theme="dark"] .tm-modal textarea:focus[b-m64u6pjkg9],
html[data-theme="dark"] .tm-modal select:focus[b-m64u6pjkg9] {
    border-color: rgba(226,175,46,.48) !important;

    background: #1d1712 !important;

    box-shadow:
        0 0 0 3px rgba(226,175,46,.10) !important;
}

html[data-theme="dark"] .tm-modal .tm-toggle[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.11) !important;

    background: #19140f !important;

    color: #ece3d6 !important;
}

html[data-theme="dark"] .tm-modal footer > button:first-child[b-m64u6pjkg9] {
    border-color: rgba(255,236,198,.13) !important;

    background: #17120e !important;

    color: #ded4c4 !important;
}

/* Scrollbars */
html[data-theme="dark"] .tm-memory-text[b-m64u6pjkg9] {
    scrollbar-color: rgba(226,175,46,.22) transparent;
}

html[data-theme="dark"] .tm-memory-text[b-m64u6pjkg9]::-webkit-scrollbar-thumb {
    background: rgba(226,175,46,.22) !important;
    background-clip: padding-box !important;
}

/* TRANSLATION MEMORY DARK THEME V2 - END */


/* =========================================================
   RETENTION NOTICE
   Shown only while automatic deletion is on.
   ========================================================= */

.tm-retention[b-m64u6pjkg9] {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;

    border: 1px solid var(--tm-line);
    border-radius: 16px;

    background: var(--ui-warning-tint, rgba(185, 120, 20, .10));
}

.tm-retention > span[b-m64u6pjkg9] {
    display: grid;
    place-items: center;
    flex: none;

    width: 30px;
    height: 30px;

    color: var(--ui-warning, #b97814);
}

.tm-retention svg[b-m64u6pjkg9] {
    width: 20px;
    height: 20px;
}

.tm-retention p[b-m64u6pjkg9] {
    margin: 0;

    color: var(--tm-text-2);

    font-size: .66rem;
    line-height: 1.8;
}


/* =========================================================
   PHONE
   =========================================================
   Counters two to a row, as on the other library pages; the
   glyph and its divider move in to leave the number room.
   ========================================================= */

@media (max-width: 650px) {

    .tm-summary[b-m64u6pjkg9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tm-summary article[b-m64u6pjkg9] {
        min-height: 78px;
        padding: 10px 54px 10px 12px;
    }

        .tm-summary article[b-m64u6pjkg9]::before {
            right: 8px;
            width: 34px;
            height: 34px;
        }

        .tm-summary article[b-m64u6pjkg9]::after {
            right: 46px;
        }

    .tm-page[dir="ltr"] .tm-summary article[b-m64u6pjkg9] {
        padding: 10px 12px 10px 54px;
    }

        .tm-page[dir="ltr"] .tm-summary article[b-m64u6pjkg9]::before {
            right: auto;
            left: 8px;
        }

        .tm-page[dir="ltr"] .tm-summary article[b-m64u6pjkg9]::after {
            right: auto;
            left: 46px;
        }

    .tm-toolbar[b-m64u6pjkg9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .tm-toolbar input[b-m64u6pjkg9] {
            grid-column: 1 / -1;
        }
}


/* each cell carried a two-column grid (label | text) from the
   desktop table; at phone width that left the sentence 120px
   wide. The label goes above, in the page's direction. */
@media (max-width: 650px) {

    .tm-summary > article:last-child:nth-child(odd)[b-m64u6pjkg9] {
        grid-column: 1 / -1;
    }

    .tm-row:not(.tm-head) > div[b-m64u6pjkg9] {
        display: block;
    }

        .tm-row:not(.tm-head) > div[b-m64u6pjkg9]::before {
            direction: inherit;
            margin-bottom: 4px;
            text-align: start;
        }

    .tm-page[dir="rtl"] .tm-row:not(.tm-head) > div[b-m64u6pjkg9]::before {
        direction: rtl;
        text-align: right;
    }

    .tm-memory-text[b-m64u6pjkg9] {
        font-size: .7rem;
    }

    .tm-row:not(.tm-head) > div[data-label]:not(.tm-memory-text)[b-m64u6pjkg9] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }

        .tm-row:not(.tm-head) > div[data-label]:not(.tm-memory-text)[b-m64u6pjkg9]::before {
            width: 100%;
            margin-bottom: 0;
        }
}
/* _content/AITranslationPlatform.Web/Components/Translation/AnalyzeTranslation.razor.rz.scp.css */
/* ============================================================
   SMART ANALYSIS - DASHBOARD DESIGN SYSTEM
   Stage 2 canonical stylesheet
   ============================================================ */

.smart-analysis-page[b-swvbuns20o] {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    color: var(--text);
}


/* =========================================================
   HERO
   ========================================================= */

.analysis-page-header[b-swvbuns20o] {
    min-height: 244px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 32px;
    padding: 30px 32px 92px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    background:
        radial-gradient(115% 145% at 8% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(135deg, var(--ui-surface-strong), var(--ui-surface));
    box-shadow: var(--ui-shadow-md);
    animation: ui-card-in .62s var(--ui-ease-out) .04s backwards;
}

.smart-analysis-page[dir="rtl"] .analysis-page-header[b-swvbuns20o] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(225deg, var(--ui-surface-strong), var(--ui-surface));
}

.analysis-page-header[b-swvbuns20o]::before,
.analysis-page-header[b-swvbuns20o]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.analysis-page-header[b-swvbuns20o]::before {
    width: 286px;
    height: 286px;
    inset-block-start: -180px;
    inset-inline-end: -94px;
    border: 42px solid var(--ui-accent-soft);
    opacity: .70;
    animation: ui-hero-ring 1.05s var(--ui-ease-out) .08s backwards;
}

.analysis-page-header[b-swvbuns20o]::after {
    width: 154px;
    height: 154px;
    inset-block-end: -100px;
    inset-inline-start: -44px;
    border: 27px solid var(--ui-line-strong);
    opacity: .70;
    animation: ui-hero-ring 1.05s var(--ui-ease-out) .18s backwards;
}

.analysis-header-copy[b-swvbuns20o],
.analysis-project-reference[b-swvbuns20o] {
    position: relative;
    z-index: 2;
}

.analysis-header-copy[b-swvbuns20o] {
    min-width: 0;
    max-width: 820px;
}

.analysis-back-button[b-swvbuns20o] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 13px;
    padding: 0 11px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: .60rem;
    font-weight: 750;
    transition: var(--ui-t);
    animation: ui-rise .48s var(--ui-ease-out) .08s backwards;
}

.analysis-back-button:hover[b-swvbuns20o] {
    transform: translateY(-1px);
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    color: var(--ui-warning);
    box-shadow: var(--ui-shadow-sm);
}

.analysis-back-button svg[b-swvbuns20o] {
    width: 15px;
    height: 15px;
    transition: transform var(--ui-dur-2) var(--ui-ease);
}

.analysis-back-button:hover svg[b-swvbuns20o] {
    transform: translateX(-2px);
}

.smart-analysis-page[dir="rtl"] .analysis-back-button svg[b-swvbuns20o] {
    transform: rotate(180deg);
}

.smart-analysis-page[dir="rtl"] .analysis-back-button:hover svg[b-swvbuns20o] {
    transform: rotate(180deg) translateX(-2px);
}

.analysis-eyebrow[b-swvbuns20o] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    padding: 6px 12px;
    border: 1px solid rgba(226, 175, 46, .34);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--accent-text);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .075em;
    animation: ui-rise .5s var(--ui-ease-out) .13s backwards;
}

.smart-analysis-page[dir="rtl"] .analysis-eyebrow[b-swvbuns20o] {
    letter-spacing: 0;
}

.analysis-ai-dot[b-swvbuns20o] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--ui-accent-strong);
    box-shadow: 0 0 0 0 rgba(226, 175, 46, .55);
    animation: ui-pulse 2.4s var(--ui-ease) infinite;
}

.analysis-header-copy h1[b-swvbuns20o] {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.8rem, 2.4vw, 2.65rem);
    font-weight: 820;
    line-height: 1.22;
    letter-spacing: -.025em;
    animation: ui-reveal-up .58s var(--ui-ease-out) .20s backwards;
}

.smart-analysis-page[dir="rtl"] .analysis-header-copy h1[b-swvbuns20o] {
    letter-spacing: 0;
}

.analysis-header-copy > p[b-swvbuns20o] {
    max-width: 720px;
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.9;
    animation: ui-rise .52s var(--ui-ease-out) .28s backwards;
}

.analysis-project-reference[b-swvbuns20o] {
    min-width: 156px;
    padding: 11px 13px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
    animation: ui-rise .52s var(--ui-ease-out) .30s backwards;
}

.analysis-project-reference span[b-swvbuns20o] {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .56rem;
    font-weight: 750;
}

.analysis-project-reference strong[b-swvbuns20o] {
    display: block;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.smart-analysis-page[b-swvbuns20o]  .translation-workflow-progress {
    position: relative;
    z-index: 4;
    margin-block-start: -84px;
    margin-block-end: 8px;
    margin-inline-start: auto;
    margin-inline-end: 24px;
}


/* =========================================================
   RUNNING ANALYSIS
   ========================================================= */

.analysis-running-card[b-swvbuns20o] {
    position: relative;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background:
        radial-gradient(95% 130% at 100% 0%, var(--ui-accent-tint), transparent 54%),
        var(--surface);
    box-shadow: var(--ui-shadow-sm);
    animation: ui-card-in .58s var(--ui-ease-out) .12s backwards;
}

.analysis-running-card[b-swvbuns20o]::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    inset-block-start: -112px;
    inset-inline-end: -62px;
    border-radius: 50%;
    border: 28px solid var(--ui-accent-soft);
    opacity: .52;
    pointer-events: none;
}

.analysis-running-top[b-swvbuns20o] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.analysis-running-icon[b-swvbuns20o] {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226, 175, 46, .22);
    border-radius: var(--ui-r-md);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
    box-shadow: inset 0 1px 0 var(--ui-line-bright);
    animation: analysis-breathe-b-swvbuns20o 2.2s var(--ui-ease) infinite;
}

.analysis-running-icon[b-swvbuns20o]::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px dashed rgba(226, 175, 46, .34);
    border-radius: calc(var(--ui-r-md) + 5px);
    animation: analysis-orbit-b-swvbuns20o 8s linear infinite;
}

.analysis-running-icon svg[b-swvbuns20o] {
    width: 30px;
    height: 30px;
}

.analysis-running-copy[b-swvbuns20o] {
    min-width: 0;
    flex: 1;
}

.analysis-running-copy > span[b-swvbuns20o] {
    color: var(--ui-warning);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .075em;
}

.smart-analysis-page[dir="rtl"] .analysis-running-copy > span[b-swvbuns20o] {
    letter-spacing: 0;
}

.analysis-running-copy h2[b-swvbuns20o] {
    margin: 4px 0;
    color: var(--text);
    font-size: .96rem;
    font-weight: 820;
}

.analysis-running-copy p[b-swvbuns20o] {
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.65;
}

.analysis-progress-percent[b-swvbuns20o] {
    flex: none;
    min-width: 64px;
    color: var(--ui-warning);
    font-size: 1.18rem;
    font-weight: 850;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.analysis-progress-track[b-swvbuns20o] {
    height: 8px;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border-radius: var(--ui-r-pill);
    background: var(--ui-progress-track);
}

.analysis-progress-track span[b-swvbuns20o] {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: var(--ui-progress-fill);
    box-shadow: var(--ui-progress-glow);
    transition: width .35s var(--ui-ease);
}

.analysis-progress-track span[b-swvbuns20o]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 36%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
    animation: analysis-progress-shine-b-swvbuns20o 1.8s var(--ui-ease) infinite;
}

.analysis-progress-stages[b-swvbuns20o] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.analysis-progress-stage[b-swvbuns20o] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .60rem;
    transition: var(--ui-t);
}

.analysis-progress-stage > span[b-swvbuns20o] {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-surface-raised);
    color: var(--muted);
    font-size: .58rem;
    font-weight: 850;
}

.analysis-progress-stage.completed[b-swvbuns20o] {
    border-color: rgba(63, 106, 57, .22);
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

.analysis-progress-stage.completed > span[b-swvbuns20o] {
    background: var(--ui-success-soft);
    color: var(--ui-success);
}


/* =========================================================
   SUCCESS BANNER
   ========================================================= */

.analysis-success-banner[b-swvbuns20o] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid rgba(63, 106, 57, .22);
    border-radius: var(--ui-r-md);
    background:
        linear-gradient(90deg, var(--ui-success-tint), transparent 52%),
        var(--surface);
    box-shadow: var(--ui-shadow-sm);
    animation: ui-card-in .52s var(--ui-ease-out) .08s backwards;
}

.smart-analysis-page[dir="rtl"] .analysis-success-banner[b-swvbuns20o] {
    background:
        linear-gradient(270deg, var(--ui-success-tint), transparent 52%),
        var(--surface);
}

.analysis-success-icon[b-swvbuns20o] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.analysis-success-icon svg[b-swvbuns20o] {
    width: 20px;
    height: 20px;
}

.analysis-success-banner > div[b-swvbuns20o] {
    min-width: 0;
    flex: 1;
}

.analysis-success-banner > div span[b-swvbuns20o] {
    display: block;
    color: var(--text-secondary);
    font-size: .61rem;
}

.analysis-success-banner > div strong[b-swvbuns20o] {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--text);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-ready-badge[b-swvbuns20o] {
    flex: none;
    padding: 6px 9px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-success-soft);
    color: var(--ui-success);
    font-size: .58rem;
    font-weight: 850;
}


/* =========================================================
   RESULT LAYOUT / CARDS
   ========================================================= */

.analysis-result-layout[b-swvbuns20o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    align-items: start;
    gap: 15px;
}

.analysis-results-main[b-swvbuns20o] {
    display: grid;
    gap: 15px;
}

.analysis-section-card[b-swvbuns20o],
.analysis-summary-card[b-swvbuns20o] {
    min-width: 0;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: var(--surface);
    box-shadow: var(--ui-shadow-sm);
}

.analysis-section-card[b-swvbuns20o] {
    padding: 20px;
    transition: var(--ui-t);
    animation: ui-card-in .55s var(--ui-ease-out) var(--card-in, .10s) backwards;
}

.analysis-section-card:nth-child(2)[b-swvbuns20o] {
    --card-in: .16s;
}

.analysis-section-card:nth-child(3)[b-swvbuns20o] {
    --card-in: .22s;
}

.analysis-section-card:hover[b-swvbuns20o] {
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-shadow-md);
}

.analysis-section-heading[b-swvbuns20o] {
    margin-bottom: 15px;
}

.analysis-section-heading > div[b-swvbuns20o] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.analysis-section-number[b-swvbuns20o] {
    min-width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226, 175, 46, .20);
    border-radius: var(--ui-r-xs);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
    font-size: .62rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.analysis-section-heading h2[b-swvbuns20o] {
    margin: 0;
    color: var(--text);
    font-size: .88rem;
    font-weight: 820;
}

.analysis-section-heading p[b-swvbuns20o] {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .63rem;
    line-height: 1.65;
}


/* =========================================================
   METRICS
   ========================================================= */

.analysis-metric-grid[b-swvbuns20o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.analysis-metric-card[b-swvbuns20o] {
    min-width: 0;
    min-height: 114px;
    position: relative;
    padding: 13px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background:
        linear-gradient(150deg, var(--ui-accent-tint), transparent 68%),
        var(--ui-surface-sunken);
    transition: var(--ui-t);
}

.analysis-metric-card[b-swvbuns20o]::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    inset-block-start: -42px;
    inset-inline-end: -24px;
    border-radius: 50%;
    background: var(--ui-accent);
    opacity: .07;
    transition: var(--ui-t);
}

.analysis-metric-card:hover[b-swvbuns20o] {
    transform: translateY(-2px);
    border-color: var(--border-accent);
    box-shadow: var(--ui-shadow-sm);
}

.analysis-metric-card:hover[b-swvbuns20o]::after {
    transform: scale(1.25);
    opacity: .12;
}

.analysis-metric-card > span[b-swvbuns20o] {
    display: block;
    color: var(--text-secondary);
    font-size: .59rem;
    font-weight: 750;
}

.analysis-metric-card > strong[b-swvbuns20o] {
    display: block;
    margin: 7px 0 4px;
    color: var(--text);
    font-size: 1.28rem;
    font-weight: 840;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    animation: ui-reveal-up .5s var(--ui-ease-out) .18s backwards;
}

.analysis-metric-card > small[b-swvbuns20o] {
    display: block;
    color: var(--muted);
    font-size: .55rem;
    line-height: 1.55;
}


/* =========================================================
   TEXT PREVIEW
   ========================================================= */

.extracted-text-preview[b-swvbuns20o] {
    max-height: 330px;
    padding: 15px 16px;
    overflow: auto;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
    color: var(--text-secondary);
    font-size: .72rem;
    line-height: 2;
    text-align: start;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    scrollbar-color: var(--ui-line-strong) transparent;
}

.extracted-text-preview:focus-within[b-swvbuns20o],
.extracted-text-preview:hover[b-swvbuns20o] {
    border-color: var(--ui-line-strong);
}

.extracted-text-preview.is-mixed-direction[b-swvbuns20o] {
    unicode-bidi: plaintext;
}

.preview-limit-note[b-swvbuns20o] {
    margin-top: 7px;
    color: var(--muted);
    font-size: .56rem;
}


/* =========================================================
   FUTURE / DETECTION
   ========================================================= */

.future-analysis-grid[b-swvbuns20o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.future-analysis-grid > div[b-swvbuns20o] {
    padding: 12px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
}

.future-analysis-grid span[b-swvbuns20o] {
    display: block;
    color: var(--muted);
    font-size: .57rem;
}

.future-analysis-grid strong[b-swvbuns20o] {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: .66rem;
}

.detection-unavailable[b-swvbuns20o] {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.75;
}

.detection-confidence[b-swvbuns20o] {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .53rem;
    font-style: normal;
}

.detection-brief[b-swvbuns20o] {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(226, 175, 46, .22);
    border-radius: var(--ui-r-sm);
    background:
        linear-gradient(135deg, var(--ui-accent-tint), transparent 72%),
        var(--ui-surface-sunken);
}

.detection-brief > span[b-swvbuns20o] {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-warning);
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .045em;
}

.smart-analysis-page[dir="rtl"] .detection-brief > span[b-swvbuns20o] {
    letter-spacing: 0;
}

.detection-brief p[b-swvbuns20o] {
    margin: 0 0 5px;
    color: var(--text);
    font-size: .67rem;
    line-height: 1.8;
}

.detection-brief small[b-swvbuns20o] {
    color: var(--muted);
    font-size: .54rem;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.analysis-summary-card[b-swvbuns20o] {
    position: sticky;
    top: 10px;
    padding: 17px;
    overflow: hidden;
    background: radial-gradient(105% 85% at 100% 0%, rgb(255 232 176 / 30%), transparent 52%), rgb(255 246 215 / 0%);
    animation: ui-card-in .58s var(--ui-ease-out) .16s backwards;
}

.analysis-summary-card[b-swvbuns20o]::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    inset-block-start: -76px;
    inset-inline-end: -42px;
    border-radius: 50%;

    opacity: .07;
    pointer-events: none;
}

.analysis-summary-header[b-swvbuns20o] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ui-line);
}

.analysis-summary-header > span[b-swvbuns20o] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226,175,46,.18);
    border-radius: var(--ui-r-xs);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
}

.analysis-summary-header svg[b-swvbuns20o] {
    width: 20px;
    height: 20px;
}

.analysis-summary-header > div[b-swvbuns20o] {
    min-width: 0;
}

.analysis-summary-header small[b-swvbuns20o] {
    display: block;
    color: var(--muted);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.smart-analysis-page[dir="rtl"] .analysis-summary-header small[b-swvbuns20o] {
    letter-spacing: 0;
}

.analysis-summary-header strong[b-swvbuns20o] {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--text);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-summary-row[b-swvbuns20o] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--ui-line);
}

.analysis-summary-row span[b-swvbuns20o] {
    color: var(--muted);
    font-size: .60rem;
}

.analysis-summary-row strong[b-swvbuns20o] {
    color: var(--text);
    font-size: .62rem;
    font-weight: 800;
    text-align: end;
}

.analysis-summary-divider[b-swvbuns20o] {
    height: 1px;
    margin: 8px 0;
    background: var(--ui-line);
}

.analysis-next-info[b-swvbuns20o] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 11px;
    padding: 11px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
}

.analysis-next-icon[b-swvbuns20o] {
    flex: none;
    color: var(--ui-warning);
    font-size: 1rem;
}

.analysis-next-info strong[b-swvbuns20o] {
    color: var(--text);
    font-size: .62rem;
}

.analysis-next-info p[b-swvbuns20o] {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .56rem;
    line-height: 1.65;
}


/* =========================================================
   CONTINUE CTA
   ========================================================= */

.analysis-continue-btn[b-swvbuns20o],
.analysis-primary-button[b-swvbuns20o] {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
    transition: var(--ui-t);
}

.analysis-continue-btn[b-swvbuns20o] {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 13px;
    padding: 10px 16px;
    border-radius: var(--ui-r-sm);
    font: inherit;
    font-size: .64rem;
    font-weight: 850;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
}

.analysis-continue-btn[b-swvbuns20o]::before,
.analysis-primary-button[b-swvbuns20o]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
    opacity: 0;
    pointer-events: none;
}

.analysis-continue-btn:hover[b-swvbuns20o],
.analysis-primary-button:hover[b-swvbuns20o] {
    transform: translateY(-2px);
    color: var(--ui-on-accent);
    box-shadow: 0 16px 34px rgba(226, 175, 46, .34);
}

.analysis-continue-btn:hover[b-swvbuns20o]::before,
.analysis-primary-button:hover[b-swvbuns20o]::before {
    animation: ui-sheen .8s var(--ui-ease-out);
}

.analysis-continue-btn:visited[b-swvbuns20o] {
    color: var(--ui-on-accent);
}

.analysis-continue-btn:focus-visible[b-swvbuns20o],
.analysis-primary-button:focus-visible[b-swvbuns20o] {
    outline: none;
    box-shadow: 0 0 0 4px var(--ui-accent-soft), var(--ui-shadow-accent);
}

.analysis-continue-btn-arrow[b-swvbuns20o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: transform var(--ui-dur-2) var(--ui-ease);
}

.smart-analysis-page[dir="rtl"] .analysis-continue-btn:hover .analysis-continue-btn-arrow[b-swvbuns20o] {
    transform: translateX(-3px);
}

.smart-analysis-page[dir="ltr"] .analysis-continue-btn:hover .analysis-continue-btn-arrow[b-swvbuns20o] {
    transform: translateX(3px);
}

.analysis-continue-button[b-swvbuns20o] {
    width: 100%;
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    padding: 10px 15px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font: inherit;
    font-size: .62rem;
    font-weight: 800;
    cursor: not-allowed;
}

.analysis-next-disabled-note[b-swvbuns20o] {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .54rem;
    line-height: 1.6;
    text-align: center;
}


/* =========================================================
   ERROR
   ========================================================= */

.analysis-error-card[b-swvbuns20o] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
    border: 1px solid rgba(157, 66, 49, .22);
    border-radius: var(--ui-r-lg);
    background:
        linear-gradient(135deg, var(--ui-danger-tint), transparent 76%),
        var(--surface);
    box-shadow: var(--ui-shadow-sm);
    animation: ui-card-in .52s var(--ui-ease-out) .08s backwards;
}

.analysis-error-icon[b-swvbuns20o] {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-sm);
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.analysis-error-icon svg[b-swvbuns20o] {
    width: 23px;
    height: 23px;
}

.analysis-error-card h2[b-swvbuns20o] {
    margin: 0;
    color: var(--ui-danger);
    font-size: .86rem;
}

.analysis-error-card p[b-swvbuns20o] {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: .66rem;
    line-height: 1.75;
}

.analysis-error-actions[b-swvbuns20o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.analysis-primary-button[b-swvbuns20o],
.analysis-secondary-button[b-swvbuns20o] {
    min-height: 40px;
    padding: 0 13px;
    border-radius: var(--ui-r-xs);
    font: inherit;
    font-size: .61rem;
    font-weight: 800;
    cursor: pointer;
}

.analysis-secondary-button[b-swvbuns20o] {
    border: 1px solid var(--ui-line-strong);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    transition: var(--ui-t);
}

.analysis-secondary-button:hover[b-swvbuns20o] {
    transform: translateY(-1px);
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    color: var(--ui-warning);
    box-shadow: var(--ui-shadow-sm);
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes analysis-breathe-b-swvbuns20o {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-2px) scale(1.03);
    }
}

@keyframes analysis-orbit-b-swvbuns20o {
    to {
        transform: rotate(360deg);
    }
}

@keyframes analysis-progress-shine-b-swvbuns20o {
    from {
        transform: translateX(-160%);
    }

    to {
        transform: translateX(340%);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {
    .analysis-result-layout[b-swvbuns20o] {
        grid-template-columns: 1fr;
    }

    .analysis-summary-card[b-swvbuns20o] {
        position: static;
    }
}

@media (max-width: 860px) {
    .analysis-page-header[b-swvbuns20o] {
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 26px 24px 96px;
        border-radius: var(--ui-r-lg);
    }

    .analysis-project-reference[b-swvbuns20o] {
        width: max-content;
        max-width: 100%;
    }

    .smart-analysis-page[b-swvbuns20o]  .translation-workflow-progress {
        width: calc(100% - 32px);
        max-width: none;
        margin-block-start: -84px;
        margin-inline: 16px;
    }

    .analysis-progress-stages[b-swvbuns20o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analysis-metric-grid[b-swvbuns20o],
    .future-analysis-grid[b-swvbuns20o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .smart-analysis-page[b-swvbuns20o] {
        gap: 14px;
    }

    .analysis-page-header[b-swvbuns20o] {
        padding: 22px 18px 84px;
    }

    .analysis-header-copy h1[b-swvbuns20o] {
        font-size: 1.65rem;
    }

    .analysis-running-top[b-swvbuns20o] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .analysis-progress-percent[b-swvbuns20o] {
        margin-inline-start: auto;
    }

    .analysis-progress-stages[b-swvbuns20o],
    .analysis-metric-grid[b-swvbuns20o],
    .future-analysis-grid[b-swvbuns20o] {
        grid-template-columns: 1fr;
    }

    .analysis-section-card[b-swvbuns20o],
    .analysis-running-card[b-swvbuns20o] {
        padding: 16px;
        border-radius: var(--ui-r-md);
    }

    .analysis-ready-badge[b-swvbuns20o] {
        display: none;
    }

    .analysis-error-card[b-swvbuns20o] {
        flex-direction: column;
    }
}



/* ANALYZE STAGE 2 HEADER MATCH V4 - START */

/*
 * Stage 2 header now uses the same geometry as Stage 1:
 * same height, padding, radius, hero treatment and in-header stepper.
 */

.analysis-page-header[b-swvbuns20o] {
    min-height: 220px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 500px);
    align-items: center;
    gap: 34px;
    padding: 32px 34px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    background:
        radial-gradient(115% 145% at 8% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(135deg, var(--ui-surface-strong), var(--ui-surface));
    box-shadow: var(--ui-shadow-md);
}

.smart-analysis-page[dir="rtl"] .analysis-page-header[b-swvbuns20o] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(225deg, var(--ui-surface-strong), var(--ui-surface));
}

.analysis-page-header[b-swvbuns20o]::before {
    width: 280px;
    height: 280px;
    inset-block-start: -178px;
    inset-inline-end: -92px;
    inset-inline-start: auto;
    border: 42px solid var(--ui-accent-soft);
    opacity: .72;
}

.analysis-page-header[b-swvbuns20o]::after {
    width: 150px;
    height: 150px;
    inset-block-end: -98px;
    inset-inline-start: -42px;
    inset-inline-end: auto;
    border: 26px solid var(--ui-line-strong);
    opacity: .72;
}

.analysis-header-copy[b-swvbuns20o] {
    min-width: 0;
    max-width: 760px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 3;
}

.analysis-header-copy h1[b-swvbuns20o] {
    margin: 0 0 10px;
    color: var(--text);
    font-size: clamp(1.8rem, 2.4vw, 2.65rem);
    font-weight: 820;
    line-height: 1.22;
}

.analysis-header-copy > p[b-swvbuns20o] {
    max-width: 700px;
    margin: 0;
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.9;
}

.analysis-back-button[b-swvbuns20o] {
    min-height: 32px;
    margin: 0 6px 11px 0;
}

.smart-analysis-page[dir="rtl"] .analysis-back-button[b-swvbuns20o] {
    margin: 0 0 11px 6px;
}

.analysis-eyebrow[b-swvbuns20o] {
    margin-bottom: 11px;
}

/*
 * Project reference is informational, not a third column.
 * Keep it compact in the upper corner so it does not change hero height.
 */
.analysis-project-reference[b-swvbuns20o] {
    position: absolute;
    z-index: 4;
    inset-block-start: 18px;
    inset-inline-start: 24px;
    min-width: 138px;
    max-width: 180px;
    margin: 0;
    padding: 9px 12px;
}

/* The stepper is now a real child of the hero, exactly like Stage 1. */
.analysis-page-header[b-swvbuns20o]  .translation-workflow-progress {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: 500px;
    margin: 0;
    position: relative;
    z-index: 3;
}

/* Neutralize all previous pull-up positioning rules. */
.smart-analysis-page[b-swvbuns20o] >  .translation-workflow-progress {
    margin: 0;
}

@media (max-width: 1280px) {
    .analysis-page-header[b-swvbuns20o] {
        grid-template-columns: 1fr;
        align-items: start;
        min-height: 0;
        padding: 28px 28px;
    }

    .analysis-header-copy[b-swvbuns20o] {
        grid-column: 1;
        grid-row: auto;
        padding-top: 38px;
    }

    .analysis-page-header[b-swvbuns20o]  .translation-workflow-progress {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: none;
        margin-top: 12px;
    }

    .analysis-project-reference[b-swvbuns20o] {
        inset-block-start: 18px;
        inset-inline-start: 24px;
    }
}

@media (max-width: 820px) {
    .analysis-page-header[b-swvbuns20o] {
        padding: 24px 22px;
        border-radius: var(--ui-r-lg);
    }

    .analysis-header-copy[b-swvbuns20o] {
        padding-top: 42px;
    }
}

@media (max-width: 540px) {
    .analysis-page-header[b-swvbuns20o] {
        padding: 22px 18px;
    }

    .analysis-project-reference[b-swvbuns20o] {
        inset-block-start: 14px;
        inset-inline-start: 16px;
        min-width: 120px;
    }

    .analysis-header-copy h1[b-swvbuns20o] {
        font-size: 1.65rem;
    }
}

/* ANALYZE STAGE 2 HEADER MATCH V4 - END */


/* ANALYZE EXACT STRUCTURAL MERGE V4 - START */

.analysis-smart-merged-card[b-swvbuns20o] {
    padding: 20px;
}

.analysis-smart-merged-card .analysis-section-heading[b-swvbuns20o] {
    margin-bottom: 16px;
}

.analysis-smart-merged-stack[b-swvbuns20o] {
    display: grid;
    gap: 16px;
}

.analysis-smart-merged-cluster[b-swvbuns20o] {
    min-width: 0;
}

.analysis-smart-merged-cluster--insights[b-swvbuns20o] {
    padding-top: 16px;
    border-top: 1px solid var(--ui-line);
}

.analysis-smart-merged-cluster--metrics .analysis-metric-grid[b-swvbuns20o],
.analysis-smart-merged-cluster--insights .future-analysis-grid[b-swvbuns20o] {
    gap: 12px;
}

.analysis-smart-merged-cluster--insights .detection-brief[b-swvbuns20o],
.analysis-smart-merged-cluster--insights .detection-unavailable[b-swvbuns20o] {
    margin-top: 14px;
}

/*
 * Extracted Text Preview is intentionally independent.
 * No nth-child hacks, negative margins, or fake pseudo headings.
 */
@media (max-width: 560px) {
    .analysis-smart-merged-card[b-swvbuns20o] {
        padding: 16px;
    }

    .analysis-smart-merged-stack[b-swvbuns20o] {
        gap: 14px;
    }

    .analysis-smart-merged-cluster--insights[b-swvbuns20o] {
        padding-top: 14px;
    }
}

/* ANALYZE EXACT STRUCTURAL MERGE V4 - END */


/* ANALYZE EXACT REFERENCE CARD THEME V11 - START */

/*
 * V11 fine-tune from user's latest feedback:
 * - more distance between separator line and text block
 * - softer / paler yellow card gradient
 * - keep V10 structure: icon, divider, title top, value vertically centered,
 *   helper text bottom, all copy right-aligned in RTL
 */

.analysis-smart-merged-card[b-swvbuns20o] {
    padding: 16px;
}

.analysis-smart-merged-card .analysis-section-heading[b-swvbuns20o] {
    margin-bottom: 12px;
}

.analysis-smart-merged-stack[b-swvbuns20o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analysis-smart-merged-cluster--insights[b-swvbuns20o] {
    display: contents;
}

.analysis-smart-merged-cluster--insights .future-analysis-grid[b-swvbuns20o] {
    order: 1;
}

.analysis-smart-merged-cluster--metrics[b-swvbuns20o] {
    order: 2;
}

.analysis-smart-merged-cluster--insights .detection-brief[b-swvbuns20o],
.analysis-smart-merged-cluster--insights .detection-unavailable[b-swvbuns20o] {
    order: 3;
}

.analysis-smart-merged-cluster--metrics .analysis-metric-grid[b-swvbuns20o],
.analysis-smart-merged-cluster--insights .future-analysis-grid[b-swvbuns20o] {
    gap: 10px;
}

/* =========================================================
   CARD SHELL
   ========================================================= */

.analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief[b-swvbuns20o],
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
    min-height: 78px;
    position: relative;
    overflow: hidden;
    /* larger reserved gap after divider so text no longer sticks to it */
    padding-block: 10px;
    padding-inline-start: 86px;
    padding-inline-end: 14px;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: linear-gradient(90deg, #fff6dc 0%, #fff9e7 48%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05), inset 0 1px 0 rgba(255,255,255,.50);
    color: var(--text);
    direction: rtl !important;
    text-align: right !important;
}

.analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o]::before,
.analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o]::before,
.analysis-smart-merged-card .detection-brief[b-swvbuns20o]::before,
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::before {
    content: "";
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 70px;
    width: 2px;
    background: var(--ui-line);
    pointer-events: none;
}

.analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o]::after,
.analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o]::after,
.analysis-smart-merged-card .detection-brief[b-swvbuns20o]::after,
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::after {
    display: grid !important;
    place-items: center;

    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    color: #7f7357;
    background: transparent;
    border: 0;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.95rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;

    opacity: 1;
    text-shadow: none;
    box-shadow: none;
    pointer-events: none;
}

/* smart-analysis icons */
.analysis-smart-merged-card .future-analysis-grid > div:nth-child(1)[b-swvbuns20o]::after { content: "A"; }
.analysis-smart-merged-card .future-analysis-grid > div:nth-child(2)[b-swvbuns20o]::after { content: "▤"; font-size: 1.82rem; }
.analysis-smart-merged-card .future-analysis-grid > div:nth-child(3)[b-swvbuns20o]::after { content: "✦"; font-size: 1.78rem; }
.analysis-smart-merged-card .future-analysis-grid > div:nth-child(4)[b-swvbuns20o]::after { content: "⇄"; font-size: 1.82rem; }
.analysis-smart-merged-card .future-analysis-grid > div:nth-child(5)[b-swvbuns20o]::after { content: "◆"; font-size: 1.68rem; }
.analysis-smart-merged-card .future-analysis-grid > div:nth-child(6)[b-swvbuns20o]::after { content: "≋"; font-size: 1.76rem; }

/* metrics icons */
.analysis-smart-merged-card .analysis-metric-card:nth-child(1)[b-swvbuns20o]::after { content: "W"; }
.analysis-smart-merged-card .analysis-metric-card:nth-child(2)[b-swvbuns20o]::after { content: "A"; }
.analysis-smart-merged-card .analysis-metric-card:nth-child(3)[b-swvbuns20o]::after { content: "¶"; font-size: 1.86rem; }
.analysis-smart-merged-card .analysis-metric-card:nth-child(4)[b-swvbuns20o]::after { content: "▤"; font-size: 1.82rem; }
.analysis-smart-merged-card .analysis-metric-card:nth-child(5)[b-swvbuns20o]::after { content: "◫"; font-size: 1.82rem; }

.analysis-smart-merged-card .detection-brief[b-swvbuns20o]::after,
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::after {
    content: "⇄";
    font-size: 1.82rem;
}

/* =========================================================
   INTERNAL LAYOUT
   ========================================================= */

.analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
}

.analysis-smart-merged-card .future-analysis-grid span[b-swvbuns20o],
.analysis-smart-merged-card .future-analysis-grid strong[b-swvbuns20o],
.analysis-smart-merged-card .future-analysis-grid em[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card > span[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card > strong[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card > small[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief > span[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief p[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief small[b-swvbuns20o],
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
    position: relative;
    z-index: 2;
    width: 100%;
    direction: rtl !important;
    text-align: right !important;
}

/* title pinned to the top */
.analysis-smart-merged-card .future-analysis-grid span[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card > span[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief > span[b-swvbuns20o] {
    align-self: start;
    margin: 0 0 4px;
    color: #342f25;
    font-size: .60rem;
    font-weight: 800;
    line-height: 1.35;
}

/* main value vertically centered */
.analysis-smart-merged-card .future-analysis-grid strong[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card > strong[b-swvbuns20o] {
    align-self: center;
    justify-self: stretch;
    margin: 0;
    color: #eda100;
    font-weight: 900;
    line-height: 1.14;
    unicode-bidi: plaintext;
}

.analysis-smart-merged-card .future-analysis-grid strong[b-swvbuns20o] {
    font-size: .82rem;
}

.analysis-smart-merged-card .analysis-metric-card > strong[b-swvbuns20o] {
    font-size: 1.32rem;
    font-variant-numeric: tabular-nums;
}

/* helper line at bottom */
.analysis-smart-merged-card .analysis-metric-card > small[b-swvbuns20o],
.analysis-smart-merged-card .future-analysis-grid em[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief small[b-swvbuns20o] {
    align-self: end;
    margin: 4px 0 0;
    color: #5d5648;
    font-size: .57rem;
    font-style: normal;
    font-weight: 560;
    line-height: 1.42;
}

.analysis-smart-merged-card .future-analysis-grid em[b-swvbuns20o] {
    display: block;
}

.analysis-smart-merged-card .future-analysis-grid strong[b-swvbuns20o],
.analysis-smart-merged-card .detection-brief p[b-swvbuns20o] {
    overflow-wrap: anywhere;
}

/* bottom translation brief */
.analysis-smart-merged-card .detection-brief[b-swvbuns20o],
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
    min-height: 84px;
    padding-block: 12px;
}

.analysis-smart-merged-card .detection-brief p[b-swvbuns20o] {
    margin: 0;
    color: #2f2b23;
    font-size: .66rem;
    line-height: 1.68;
    unicode-bidi: plaintext;
}

.analysis-smart-merged-card .detection-brief small[b-swvbuns20o],
.analysis-smart-merged-card .detection-confidence[b-swvbuns20o],
.analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
    color: #5d5648;
    font-size: .57rem;
    line-height: 1.5;
}

.analysis-smart-merged-card .future-analysis-grid > div:hover[b-swvbuns20o],
.analysis-smart-merged-card .analysis-metric-card:hover[b-swvbuns20o] {
    transform: translateY(-1px);
    border-color: var(--ui-line);
    background: linear-gradient(
        90deg,
        #f6e6b7 0%,
        #fbf2d8 48%,
        #ffffff 100%
    );
    box-shadow:
        0 4px 10px rgba(16, 24, 40, .07),
        inset 0 1px 0 rgba(255,255,255,.54);
}

/* ltr safety */
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .detection-brief[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
    direction: ltr !important;
}

.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .future-analysis-grid span[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .future-analysis-grid strong[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .future-analysis-grid em[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .analysis-metric-card > span[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .analysis-metric-card > strong[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .analysis-metric-card > small[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .detection-brief > span[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .detection-brief p[b-swvbuns20o],
.smart-analysis-page[dir="ltr"] .analysis-smart-merged-card .detection-brief small[b-swvbuns20o] {
    text-align: left !important;
}

/* responsive */
@media (max-width: 560px) {
    .analysis-smart-merged-card[b-swvbuns20o] {
        padding: 14px;
    }

    .analysis-smart-merged-stack[b-swvbuns20o] {
        gap: 8px;
    }

    .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o],
    .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o],
    .analysis-smart-merged-card .detection-brief[b-swvbuns20o],
    .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
        min-height: 74px;
        padding-inline-start: 78px;
        padding-inline-end: 12px;
        padding-block: 9px;
    }

    .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o]::before,
    .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o]::before,
    .analysis-smart-merged-card .detection-brief[b-swvbuns20o]::before,
    .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::before {
        inset-inline-start: 64px;
        inset-block: 12px;
    }

    .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o]::after,
    .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o]::after,
    .analysis-smart-merged-card .detection-brief[b-swvbuns20o]::after,
    .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::after {
        inset-inline-start: 14px;
        width: 36px;
        height: 36px;
        font-size: 1.62rem;
    }
}

/* ANALYZE EXACT REFERENCE CARD THEME V11 - END */


/* ANALYZE HEADER PROJECT ID INLINE V12 - START */

/*
 * Project reference:
 * - physical left side of the hero
 * - one single line
 * - "label : id"
 * - compact, no stacked layout
 */

/* =========================================================
   PROJECT ID — HEADER LEFT
   ========================================================= */

.analysis-page-header[b-swvbuns20o] {
    position: relative;
}


    .analysis-page-header > .analysis-project-reference[b-swvbuns20o] {
        position: absolute;
        top: 20px;
        left: 24px;
        right: auto;
        z-index: 10;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 7px 11px;
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-r-sm);
        background: var(--ui-surface-raised);
        box-shadow: var(--ui-shadow-sm);
        white-space: nowrap;
    }


        /* عنوان شناسه پروژه */
        .analysis-page-header > .analysis-project-reference span[b-swvbuns20o] {
            display: inline;
            width: auto;
            margin: 0;
            color: var(--muted);
            font-size: .56rem;
            font-weight: 750;
            white-space: nowrap;
        }


            /* دو نقطه بین عنوان و شناسه */
            .analysis-page-header > .analysis-project-reference span[b-swvbuns20o]::after {
                content: " :";
            }


        /* خود شناسه */
        .analysis-page-header > .analysis-project-reference strong[b-swvbuns20o] {
            display: inline;
            width: auto;
            margin: 0;
            color: var(--text-secondary);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .61rem;
            font-weight: 700;
            direction: ltr;
            text-align: left;
            white-space: nowrap;
        }


/* فارسی */
.smart-analysis-page[dir="rtl"]
.analysis-page-header > .analysis-project-reference[b-swvbuns20o] {
    direction: rtl;
}


/* انگلیسی */
.smart-analysis-page[dir="ltr"]
.analysis-page-header > .analysis-project-reference[b-swvbuns20o] {
    direction: ltr;
}


/* Tablet / Mobile */
@media (max-width: 820px) {

    .analysis-page-header > .analysis-project-reference[b-swvbuns20o] {
        top: 14px;
        left: 16px;
        padding: 6px 9px;
    }
}

.analysis-project-reference span[b-swvbuns20o],
.analysis-project-reference strong[b-swvbuns20o] {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.analysis-project-reference span[b-swvbuns20o] {
    color: var(--muted);
    font-size: .56rem;
    font-weight: 750;
}

.analysis-project-reference span[b-swvbuns20o]::after {
    content: " :";
}

.analysis-project-reference strong[b-swvbuns20o] {
    color: var(--text-secondary);
    font-size: .61rem;
    font-weight: 700;
    direction: ltr !important;
    text-align: left !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Keep the visual order correct in Persian: label on the right, id on the left. */
.smart-analysis-page[dir="rtl"] .analysis-project-reference[b-swvbuns20o] {
    direction: rtl !important;
}

/* English stays naturally left-to-right. */
.smart-analysis-page[dir="ltr"] .analysis-project-reference[b-swvbuns20o] {
    direction: ltr !important;
}

@media (max-width: 820px) {
    .analysis-project-reference[b-swvbuns20o] {
        top: 14px !important;
        left: 16px !important;
        padding: 6px 9px !important;
    }
}

/* ANALYZE HEADER PROJECT ID INLINE V12 - END */

/* TRANSLATION ANALYZE WARM DARK CARDS V1 - START */
/*
 * Dark-mode correction for the exact-reference cards in Stage 2.
 * The light theme deliberately uses a cream-to-white gradient.
 * In dark mode those same fixed colors were still being rendered,
 * producing bright cream cards inside the dark workspace.
 */

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid > div[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-brief[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-unavailable[b-swvbuns20o] {
    border-color: rgba(255, 236, 198, .12) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 175, 46, .13) 0%,
            rgba(226, 175, 46, .065) 48%,
            rgba(255, 255, 255, .018) 100%
        ),
        #272018 !important;

    color: #f1eadf !important;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .13),
        inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid > div[b-swvbuns20o]::before,

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card[b-swvbuns20o]::before,

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-brief[b-swvbuns20o]::before,

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-unavailable[b-swvbuns20o]::before {
    background: rgba(255, 236, 198, .11) !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid > div[b-swvbuns20o]::after,

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card[b-swvbuns20o]::after,

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-brief[b-swvbuns20o]::after,

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-unavailable[b-swvbuns20o]::after {
    color: #c8b68f !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid span[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card > span[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-brief > span[b-swvbuns20o] {
    color: #e7ded0 !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid strong[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card > strong[b-swvbuns20o] {
    color: #f0b637 !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card > small[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid em[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-brief small[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-confidence[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-unavailable[b-swvbuns20o] {
    color: #a79d8f !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.detection-brief p[b-swvbuns20o] {
    color: #e8dfd2 !important;
}

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.future-analysis-grid > div:hover[b-swvbuns20o],

html[data-theme="dark"]
.smart-analysis-page
.analysis-smart-merged-card
.analysis-metric-card:hover[b-swvbuns20o] {
    border-color: rgba(226, 175, 46, .18) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 175, 46, .16) 0%,
            rgba(226, 175, 46, .075) 48%,
            rgba(255, 255, 255, .022) 100%
        ),
        #2a2219 !important;

    box-shadow:
        0 10px 23px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.022) !important;
}
/* TRANSLATION ANALYZE WARM DARK CARDS V1 - END */


/* =========================================================
   PHONE
   =========================================================
   The five counts (words, characters, paragraphs, pages,
   images) are short numbers; two to a row they read as a
   dashboard instead of a page-long column. The insight
   cards keep the full width - their values are sentences.
   ========================================================= */

@media (max-width: 560px) {

    .analysis-smart-merged-cluster--metrics .analysis-metric-grid[b-swvbuns20o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

        .analysis-smart-merged-cluster--metrics .analysis-metric-grid > .analysis-metric-card:last-child:nth-child(odd)[b-swvbuns20o] {
            grid-column: 1 / -1;
        }

    .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o] {
        min-height: 0;
        padding-block: 11px;
        padding-inline-start: 46px;
        padding-inline-end: 11px;
    }

        .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o]::before {
            inset-inline-start: 38px;
            inset-block: 12px;
        }

        .analysis-smart-merged-card .analysis-metric-card[b-swvbuns20o]::after {
            inset-inline-start: 6px;
            width: 28px;
            height: 28px;
            font-size: 1.3rem !important;
        }

    .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o],
    .analysis-smart-merged-card .detection-brief[b-swvbuns20o],
    .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o] {
        padding-inline-start: 64px;
    }

        .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o]::before,
        .analysis-smart-merged-card .detection-brief[b-swvbuns20o]::before,
        .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::before {
            inset-inline-start: 52px;
        }

        .analysis-smart-merged-card .future-analysis-grid > div[b-swvbuns20o]::after,
        .analysis-smart-merged-card .detection-brief[b-swvbuns20o]::after,
        .analysis-smart-merged-card .detection-unavailable[b-swvbuns20o]::after {
            inset-inline-start: 8px;
            width: 36px;
            font-size: 1.5rem !important;
        }
}
/* _content/AITranslationPlatform.Web/Components/Translation/FileDropZone.razor.rz.scp.css */
/* ============================================================
   FILE DROP ZONE — DASHBOARD DESIGN SYSTEM
   Stage 1 canonical stylesheet
   ============================================================ */

.universal-dropzone[b-cj87nm7rub] {
    min-height: 360px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r-lg);
    background:
        radial-gradient(70% 88% at 50% 42%, var(--ui-accent-tint), transparent 68%),
        linear-gradient(180deg, var(--ui-surface-sunken), transparent),
        var(--ui-surface-sunken);
    transition: var(--ui-t);
}

.universal-dropzone[b-cj87nm7rub]::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid transparent;
    border-radius: calc(var(--ui-r-lg) - 8px);
    pointer-events: none;
    transition: var(--ui-t);
}

.universal-dropzone:hover[b-cj87nm7rub],
.universal-dropzone:focus-within[b-cj87nm7rub] {
    transform: translateY(-2px);
    border-color: var(--ui-accent-strong);
    background:
        radial-gradient(76% 94% at 50% 42%, var(--ui-accent-tint), transparent 70%),
        var(--ui-surface-sunken);
    box-shadow: var(--ui-shadow-md);
}

.universal-dropzone:hover[b-cj87nm7rub]::before,
.universal-dropzone:focus-within[b-cj87nm7rub]::before {
    border-color: rgba(226, 175, 46, .18);
}

[b-cj87nm7rub] .universal-file-input {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-ring[b-cj87nm7rub] {
    position: absolute;
    border: 1px solid rgba(226, 175, 46, .16);
    border-radius: 50%;
    pointer-events: none;
    transition: transform var(--ui-dur-3) var(--ui-ease), opacity var(--ui-dur-2) var(--ui-ease);
}

.ring-one[b-cj87nm7rub] {
    width: 310px;
    height: 310px;
    opacity: .72;
}

.ring-two[b-cj87nm7rub] {
    width: 226px;
    height: 226px;
    opacity: .78;
}

.universal-dropzone:hover .ring-one[b-cj87nm7rub],
.universal-dropzone:focus-within .ring-one[b-cj87nm7rub] {
    transform: scale(1.06);
}

.universal-dropzone:hover .ring-two[b-cj87nm7rub],
.universal-dropzone:focus-within .ring-two[b-cj87nm7rub] {
    transform: scale(.96);
}

.dropzone-content[b-cj87nm7rub] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px;
    text-align: center;
    pointer-events: none;
}

.dropzone-main-icon[b-cj87nm7rub] {
    width: 94px;
    height: 94px;
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 19px;
    border: 1px solid var(--ui-line);
    border-radius: 28px;
    background: var(--ui-surface-strong);
    color: var(--ui-warning);
    box-shadow: var(--ui-shadow-md);
    transition: var(--ui-t);
}

.universal-dropzone:hover .dropzone-main-icon[b-cj87nm7rub],
.universal-dropzone:focus-within .dropzone-main-icon[b-cj87nm7rub] {
    transform: translateY(-4px) rotate(-2deg);
    box-shadow: var(--ui-shadow-lg);
}

.dropzone-main-icon > svg[b-cj87nm7rub] {
    width: 44px;
    height: 44px;
}

.dropzone-main-icon > span[b-cj87nm7rub] {
    width: 32px;
    height: 32px;
    position: absolute;
    inset-inline-end: -7px;
    bottom: -6px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
    transition: var(--ui-t);
}

.universal-dropzone:hover .dropzone-main-icon > span[b-cj87nm7rub],
.universal-dropzone:focus-within .dropzone-main-icon > span[b-cj87nm7rub] {
    transform: translateY(-2px) scale(1.06);
}

.dropzone-main-icon > span svg[b-cj87nm7rub] {
    width: 16px;
    height: 16px;
}

.dropzone-content h3[b-cj87nm7rub] {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 820;
}

.dropzone-content > p[b-cj87nm7rub] {
    max-width: 520px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.75;
}

.browse-file-button[b-cj87nm7rub] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text);
    font-size: .67rem;
    font-weight: 800;
    box-shadow: var(--ui-shadow-sm);
    transition: var(--ui-t);
}

.universal-dropzone:hover .browse-file-button[b-cj87nm7rub],
.universal-dropzone:focus-within .browse-file-button[b-cj87nm7rub] {
    border-color: var(--ui-accent-strong);
    background: var(--ui-surface-strong);
    color: var(--ui-warning);
    transform: translateY(-1px);
}

.browse-file-button svg[b-cj87nm7rub] {
    width: 16px;
    height: 16px;
}

.dropzone-supported[b-cj87nm7rub] {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    margin-top: 17px;
}

.dropzone-supported strong[b-cj87nm7rub] {
    color: var(--ui-warning);
    font-size: .59rem;
    font-weight: 800;
}

.dropzone-supported span[b-cj87nm7rub] {
    color: var(--muted);
    font-size: .54rem;
}

@media (max-width: 700px) {
    .universal-dropzone[b-cj87nm7rub] {
        min-height: 310px;
        border-radius: var(--ui-r-md);
    }

    .dropzone-content[b-cj87nm7rub] {
        padding: 28px 20px;
    }

    .dropzone-main-icon[b-cj87nm7rub] {
        width: 82px;
        height: 82px;
        border-radius: 24px;
    }

    .dropzone-main-icon > svg[b-cj87nm7rub] {
        width: 38px;
        height: 38px;
    }

    .ring-one[b-cj87nm7rub] {
        width: 260px;
        height: 260px;
    }

    .ring-two[b-cj87nm7rub] {
        width: 190px;
        height: 190px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Translation/NewTranslation.razor.rz.scp.css */
/* ============================================================
   NEW TRANSLATION — DASHBOARD DESIGN SYSTEM
   Stage 1 canonical stylesheet
   ============================================================ */

.translation-workspace[b-6461hta7ue] {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    color: var(--text);
}


/* =========================================================
   HERO / PAGE HEADER
   ========================================================= */

.translation-header[b-6461hta7ue] {
    min-height: 220px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    padding: 32px 34px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    background:
        radial-gradient(115% 145% at 8% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(135deg, var(--ui-surface-strong), var(--ui-surface));
    box-shadow: var(--ui-shadow-md);
    animation: ui-card-in .62s var(--ui-ease-out) .04s backwards;
}

.translation-workspace[dir="rtl"] .translation-header[b-6461hta7ue] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(225deg, var(--ui-surface-strong), var(--ui-surface));
}

.translation-header[b-6461hta7ue]::before,
.translation-header[b-6461hta7ue]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.translation-header[b-6461hta7ue]::before {
    width: 280px;
    height: 280px;
    inset-block-start: -178px;
    inset-inline-end: -92px;
    border: 42px solid var(--ui-accent-soft);
    opacity: .72;
    animation: ui-hero-ring 1.05s var(--ui-ease-out) .08s backwards;
}

.translation-header[b-6461hta7ue]::after {
    width: 150px;
    height: 150px;
    inset-block-end: -98px;
    inset-inline-start: -42px;
    border: 26px solid var(--ui-line-strong);
    opacity: .72;
    animation: ui-hero-ring 1.05s var(--ui-ease-out) .18s backwards;
}

.translation-header-copy[b-6461hta7ue],
.workflow-progress[b-6461hta7ue] {
    position: relative;
    z-index: 1;
}

.translation-header-copy[b-6461hta7ue] {
    min-width: 0;
    max-width: 760px;
}

.translation-eyebrow[b-6461hta7ue] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 12px;
    border: 1px solid rgba(226, 175, 46, .34);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--accent-text);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .075em;
    animation: ui-rise .5s var(--ui-ease-out) .12s backwards;
}

.translation-eyebrow[b-6461hta7ue]::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--ui-accent-strong);
    animation: ui-pulse 2.4s var(--ui-ease) infinite;
}

.translation-workspace[dir="rtl"] .translation-eyebrow[b-6461hta7ue] {
    letter-spacing: 0;
}

.translation-header h1[b-6461hta7ue] {
    margin: 0 0 10px;
    color: var(--text);
    font-size: clamp(1.8rem, 2.4vw, 2.65rem);
    font-weight: 820;
    line-height: 1.22;
    letter-spacing: -.025em;
    animation: ui-reveal-up .58s var(--ui-ease-out) .19s backwards;
}

.translation-workspace[dir="rtl"] .translation-header h1[b-6461hta7ue] {
    letter-spacing: 0;
}

.translation-header-copy p[b-6461hta7ue] {
    max-width: 700px;
    margin: 0;
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.9;
    animation: ui-rise .52s var(--ui-ease-out) .28s backwards;
}


/* =========================================================
   SHARED SECTION / CARD LANGUAGE
   ========================================================= */

.quality-level-section[b-6461hta7ue],
.source-type-section[b-6461hta7ue],
.workspace-card[b-6461hta7ue],
.next-phase-card[b-6461hta7ue] {
    border: 1px solid var(--ui-line);
    background: var(--surface);
    box-shadow: var(--ui-shadow-sm);
}

.quality-level-section[b-6461hta7ue],
.source-type-section[b-6461hta7ue] {
    padding: 21px;
    border-radius: var(--ui-r-lg);
}

.quality-level-section[b-6461hta7ue] {
    animation: ui-card-in .58s var(--ui-ease-out) .10s backwards;
}

.source-type-section[b-6461hta7ue] {
    animation: ui-card-in .58s var(--ui-ease-out) .16s backwards;
}

.section-heading[b-6461hta7ue] {
    margin-bottom: 16px;
}

.section-heading > div[b-6461hta7ue],
.workspace-heading[b-6461hta7ue] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-number[b-6461hta7ue],
.workspace-number[b-6461hta7ue],
.next-phase-number[b-6461hta7ue] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226, 175, 46, .22);
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
    font-size: .59rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.section-heading h2[b-6461hta7ue],
.workspace-heading h2[b-6461hta7ue] {
    margin: 0 0 3px;
    color: var(--text);
    font-size: .94rem;
    font-weight: 800;
}

.section-heading p[b-6461hta7ue],
.workspace-heading p[b-6461hta7ue] {
    margin: 0;
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.65;
}


/* =========================================================
   QUALITY LEVEL
   ========================================================= */

.quality-level-grid[b-6461hta7ue] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 11px;
}

.quality-level-card[b-6461hta7ue] {
    min-width: 0;
    min-height: 148px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background:
        linear-gradient(155deg, var(--ui-accent-tint), transparent 72%),
        var(--ui-surface-sunken);
    color: var(--text);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: var(--ui-t);
}

.quality-level-card[b-6461hta7ue]::before,
.source-type-card[b-6461hta7ue]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.46) 50%, transparent 66%);
    opacity: 0;
    pointer-events: none;
}

.quality-level-card:hover[b-6461hta7ue],
.source-type-card:hover[b-6461hta7ue] {
    transform: translateY(-3px);
    border-color: var(--border-accent);
    box-shadow: var(--ui-shadow-md);
}

.quality-level-card:hover[b-6461hta7ue]::before,
.source-type-card:hover[b-6461hta7ue]::before {
    animation: ui-sheen .78s var(--ui-ease-out);
}

.quality-level-card.is-chosen[b-6461hta7ue] {
    border-color: var(--ui-accent-strong);
    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 68%),
        var(--ui-surface-strong);
    box-shadow: 0 0 0 1px rgba(226, 175, 46, .18), var(--ui-shadow-md);
}

.quality-level-card.is-empty[b-6461hta7ue] {
    opacity: .68;
}

.quality-level-head[b-6461hta7ue] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.quality-level-head strong[b-6461hta7ue] {
    color: var(--text);
    font-size: .88rem;
    font-weight: 820;
}

.quality-level-check[b-6461hta7ue] {
    width: 23px;
    height: 23px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-accent);
    color: var(--ui-on-accent);
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
    animation: ui-pop-in .42s var(--ui-ease-spring) both;
}

.quality-level-check svg[b-6461hta7ue] {
    width: 13px;
    height: 13px;
}

.quality-level-credit[b-6461hta7ue] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
}

.quality-level-credit b[b-6461hta7ue] {
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 840;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.quality-level-credit small[b-6461hta7ue] {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 650;
}

.quality-level-held[b-6461hta7ue],
.quality-level-empty[b-6461hta7ue],
.quality-level-inputs[b-6461hta7ue] {
    font-size: .62rem;
    line-height: 1.65;
}

.quality-level-held[b-6461hta7ue] {
    color: var(--muted);
}

.quality-level-empty[b-6461hta7ue] {
    color: var(--ui-danger);
    font-weight: 750;
}

.quality-level-inputs[b-6461hta7ue] {
    color: var(--text-secondary);
}

.quality-level-shared[b-6461hta7ue] {
    margin: 11px 0 0;
    padding: 10px 13px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
    color: var(--text-secondary);
    font-size: .66rem;
    line-height: 1.7;
}

.quality-level-shared b[b-6461hta7ue] {
    color: var(--text);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   SOURCE TYPE
   ========================================================= */

.source-type-grid[b-6461hta7ue] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.source-type-card[b-6461hta7ue] {
    min-width: 0;
    min-height: 126px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
    color: var(--text);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: var(--ui-t);
}

.source-type-card.selected[b-6461hta7ue] {
    border-color: var(--ui-accent-strong);
    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 70%),
        var(--ui-surface-strong);
    box-shadow: 0 0 0 1px rgba(226,175,46,.14), var(--ui-shadow-sm);
}

.source-type-card.locked[b-6461hta7ue] {
    cursor: not-allowed;
    opacity: .46;
    filter: grayscale(.25);
}

.source-type-card.locked:hover[b-6461hta7ue] {
    transform: none;
    border-color: var(--ui-line);
    box-shadow: none;
}

.source-card-icon[b-6461hta7ue] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-ink-2);
    transition: var(--ui-t);
}

.source-type-card:hover .source-card-icon[b-6461hta7ue] {
    transform: rotate(-4deg) scale(1.05);
}

.source-type-card.selected .source-card-icon[b-6461hta7ue] {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

.source-card-icon svg[b-6461hta7ue] {
    width: 19px;
    height: 19px;
}

.source-card-copy[b-6461hta7ue] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.source-card-copy strong[b-6461hta7ue] {
    color: var(--text);
    font-size: .69rem;
    font-weight: 800;
}

.source-card-copy small[b-6461hta7ue] {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: .54rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-check[b-6461hta7ue] {
    width: 22px;
    height: 22px;
    position: absolute;
    inset-block-start: 11px;
    inset-inline-end: 11px;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-accent);
    color: var(--ui-on-accent);
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
}

.source-check svg[b-6461hta7ue] {
    width: 12px;
    height: 12px;
}

.source-type-card.selected .source-check[b-6461hta7ue] {
    display: grid;
    animation: ui-pop-in .42s var(--ui-ease-spring) both;
}

.package-access-notice[b-6461hta7ue] {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--ui-warning-soft);
    border-radius: var(--ui-r-sm);
    background: var(--ui-warning-tint);
    color: var(--text-secondary);
    font-size: .61rem;
    line-height: 1.7;
}

.package-access-notice strong[b-6461hta7ue] {
    color: var(--text);
}


/* =========================================================
   MAIN WORKSPACE
   ========================================================= */

.translation-main-grid[b-6461hta7ue] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, .5fr);
    align-items: stretch;
    gap: 16px;
    animation: ui-card-in .58s var(--ui-ease-out) .22s backwards;
}

.workspace-card[b-6461hta7ue] {
    min-width: 0;
    border-radius: var(--ui-r-lg);
}

.intake-card[b-6461hta7ue] {
    height: 100%;
    padding: 22px;
}

.workspace-card-header[b-6461hta7ue] {
    margin-bottom: 17px;
}

.analyzer-card[b-6461hta7ue] {
    position: relative;
    top: auto;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    background: radial-gradient(120% 95% at 100% 0%, rgb(255 233 178 / 30%), transparent 54%), var(--surface);
}

.analyzer-card[b-6461hta7ue]::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    inset-block-start: -72px;
    inset-inline-end: -42px;
    border-radius: 50%;

    opacity: .08;
    pointer-events: none;
}


/* =========================================================
   OCR / SUBTITLE NOTICES
   ========================================================= */

.ocr-notice[b-6461hta7ue],
.subtitle-notice[b-6461hta7ue] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
    padding: 11px 13px;
    border: 1px solid rgba(226,175,46,.18);
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-tint);
}

.ocr-notice > span[b-6461hta7ue],
.notice-icon[b-6461hta7ue] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: var(--ui-surface-raised);
    color: var(--ui-warning);
}

.ocr-notice svg[b-6461hta7ue],
.notice-icon svg[b-6461hta7ue] {
    width: 17px;
    height: 17px;
}

.ocr-notice strong[b-6461hta7ue],
.subtitle-notice strong[b-6461hta7ue] {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: .63rem;
}

.ocr-notice p[b-6461hta7ue],
.subtitle-notice p[b-6461hta7ue] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .55rem;
    line-height: 1.6;
}


/* =========================================================
   WEBSITE
   ========================================================= */

.website-source-switch[b-6461hta7ue] {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 15px;
    padding: 4px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
}

.website-source-switch button[b-6461hta7ue] {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: .62rem;
    font-weight: 750;
    cursor: pointer;
    transition: var(--ui-t);
}

.website-source-switch button:hover:not(:disabled)[b-6461hta7ue] {
    color: var(--text);
    background: var(--ui-surface-raised);
}

.website-source-switch button.active[b-6461hta7ue] {
    background: var(--ui-surface-strong);
    color: var(--ui-warning);
    box-shadow: var(--ui-shadow-sm);
}

.website-source-switch button:disabled[b-6461hta7ue] {
    opacity: .42;
    cursor: not-allowed;
}

.website-source-switch svg[b-6461hta7ue] {
    width: 15px;
    height: 15px;
}

.website-url-panel[b-6461hta7ue],
.plain-text-panel[b-6461hta7ue] {
    padding: 18px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-sunken);
}

.website-url-panel label[b-6461hta7ue],
.plain-text-header label[b-6461hta7ue] {
    display: block;
    color: var(--text-secondary);
    font-size: .62rem;
    font-weight: 750;
}

.website-url-panel label[b-6461hta7ue] {
    margin-bottom: 7px;
}

.website-url-input[b-6461hta7ue] {
    min-height: 54px;
    display: flex;
    align-items: center;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-strong);
    transition: var(--ui-t);
}

.website-url-input:focus-within[b-6461hta7ue] {
    border-color: var(--ui-accent-strong);
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
}

.website-url-input > span[b-6461hta7ue] {
    width: 48px;
    display: grid;
    place-items: center;
    color: var(--ui-warning);
}

.website-url-input svg[b-6461hta7ue] {
    width: 18px;
    height: 18px;
}

.website-url-input input[b-6461hta7ue] {
    min-width: 0;
    flex: 1;
    height: 52px;
    padding-inline-end: 15px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: .72rem;
    direction: ltr;
    text-align: left;
}

.website-features[b-6461hta7ue] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.website-features span[b-6461hta7ue] {
    padding: 5px 8px;
    border: 1px solid rgba(226,175,46,.15);
    border-radius: var(--ui-r-pill);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
    font-size: .52rem;
    font-weight: 750;
}


/* =========================================================
   PLAIN TEXT
   ========================================================= */

.plain-text-header[b-6461hta7ue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

.plain-text-header span[b-6461hta7ue] {
    color: var(--muted);
    font-size: .55rem;
    font-variant-numeric: tabular-nums;
}

.plain-text-panel textarea[b-6461hta7ue] {
    width: 100%;
    min-height: 290px;
    resize: vertical;
    padding: 15px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    outline: 0;
    background: var(--ui-surface-strong);
    color: var(--text);
    font-family: inherit;
    font-size: .74rem;
    line-height: 1.85;
    transition: var(--ui-t);
}

.plain-text-panel textarea:hover[b-6461hta7ue] {
    border-color: var(--ui-line-strong);
}

.plain-text-panel textarea:focus[b-6461hta7ue] {
    border-color: var(--ui-accent-strong);
    box-shadow: 0 0 0 4px var(--ui-accent-soft);
}


/* =========================================================
   SELECTED FILE
   ========================================================= */

.selected-file-card[b-6461hta7ue] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
    padding: 12px 13px;
    border: 1px solid var(--ui-success-soft);
    border-radius: var(--ui-r-sm);
    background: var(--ui-success-tint);
    animation: ui-rise .42s var(--ui-ease-out) both;
}

.selected-file-type[b-6461hta7ue] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: var(--ui-surface-raised);
    color: var(--ui-warning);
    font-size: .55rem;
    font-weight: 800;
}

.selected-file-copy[b-6461hta7ue] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px;
}

.selected-file-copy strong[b-6461hta7ue] {
    overflow: hidden;
    color: var(--text);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-file-copy span[b-6461hta7ue] {
    color: var(--muted);
    font-size: .54rem;
}

.selected-file-ready[b-6461hta7ue] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ui-success);
    font-size: .56rem;
    font-weight: 800;
}

.selected-file-ready svg[b-6461hta7ue] {
    width: 14px;
    height: 14px;
}

.remove-file-button[b-6461hta7ue] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--ui-r-xs);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: var(--ui-t);
}

.remove-file-button:hover[b-6461hta7ue] {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
    transform: rotate(4deg);
}

.remove-file-button svg[b-6461hta7ue] {
    width: 15px;
    height: 15px;
}


/* =========================================================
   VALIDATION / PRIVACY
   ========================================================= */

.input-validation-error[b-6461hta7ue],
.intake-submit-error[b-6461hta7ue] {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(157,66,49,.20);
    border-radius: var(--ui-r-sm);
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    font-size: .60rem;
    line-height: 1.65;
}

.intake-submit-error[b-6461hta7ue] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.intake-submit-error .material-symbols-rounded[b-6461hta7ue] {
    flex: 0 0 auto;
    margin-top: .05rem;
    font-size: 1.2rem;
}

.privacy-strip[b-6461hta7ue] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
}

.privacy-strip > span[b-6461hta7ue] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
}

.privacy-strip svg[b-6461hta7ue] {
    width: 16px;
    height: 16px;
}

.privacy-strip strong[b-6461hta7ue] {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: .59rem;
}

.privacy-strip p[b-6461hta7ue] {
    margin: 0;
    color: var(--muted);
    font-size: .53rem;
    line-height: 1.65;
}


/* =========================================================
   ANALYZER
   ========================================================= */

.analyzer-header[b-6461hta7ue] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.analyzer-icon[b-6461hta7ue] {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226,175,46,.18);
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
    box-shadow: inset 0 1px 0 var(--ui-line-bright);
}

.analyzer-icon svg[b-6461hta7ue] {
    width: 21px;
    height: 21px;
}

.analyzer-header > div > span[b-6461hta7ue] {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-warning);
    font-size: .50rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.translation-workspace[dir="rtl"] .analyzer-header > div > span[b-6461hta7ue] {
    letter-spacing: 0;
}

.analyzer-header h2[b-6461hta7ue] {
    margin: 0;
    color: var(--text);
    font-size: .86rem;
    font-weight: 800;
}

.analyzer-description[b-6461hta7ue] {
    position: relative;
    z-index: 1;
    margin: 0 0 13px;
    color: var(--muted);
    font-size: .58rem;
    line-height: 1.7;
}

.analyzer-source-badge[b-6461hta7ue] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(226,175,46,.16);
    border-radius: var(--ui-r-xs);
    background: var(--ui-accent-tint);
}

.analyzer-source-badge span[b-6461hta7ue] {
    color: var(--ui-warning);
    font-size: .55rem;
    font-weight: 800;
}

.analyzer-source-badge strong[b-6461hta7ue] {
    max-width: 185px;
    overflow: hidden;
    color: var(--text);
    font-size: .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-capabilities[b-6461hta7ue] {
    position: relative;
    z-index: 1;
}

[b-6461hta7ue] .analysis-capability {
    min-height: 53px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--ui-line);
}

[b-6461hta7ue] .capability-symbol {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: var(--ui-surface-sunken);
    color: var(--ui-ink-2);
}

[b-6461hta7ue] .capability-symbol svg {
    width: 14px;
    height: 14px;
}

[b-6461hta7ue] .capability-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

[b-6461hta7ue] .capability-copy span {
    color: var(--text-secondary);
    font-size: .58rem;
}

[b-6461hta7ue] .capability-copy strong {
    color: var(--text);
    font-size: .58rem;
}

.analysis-waiting[b-6461hta7ue] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px 4px;
    text-align: center;
}

.waiting-circle[b-6461hta7ue] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: 50%;
    background: var(--ui-surface-sunken);
}

.waiting-circle > span[b-6461hta7ue] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-accent-strong);
    animation: ui-pulse 2.2s var(--ui-ease) infinite;
}

.analysis-waiting strong[b-6461hta7ue] {
    margin-bottom: 3px;
    color: var(--text);
    font-size: .63rem;
}

.analysis-waiting p[b-6461hta7ue] {
    margin: 0;
    color: var(--muted);
    font-size: .54rem;
    line-height: 1.55;
}

.analysis-ready[b-6461hta7ue] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 8px 9px;
    border-radius: var(--ui-r-xs);
    background: var(--ui-success-tint);
    color: var(--ui-success);
    font-size: .54rem;
}

.analysis-ready svg[b-6461hta7ue] {
    width: 14px;
    height: 14px;
}


/* =========================================================
   PRIMARY CTA
   ========================================================= */

.analyze-button[b-6461hta7ue] {
    width: 100%;
    min-height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 9px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--ui-r-md);
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--ui-shadow-accent);
    transition: var(--ui-t);
}

.analyze-button[b-6461hta7ue]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
    opacity: 0;
    pointer-events: none;
}

.analyze-button:hover:not(:disabled)[b-6461hta7ue] {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(226,175,46,.34);
}

.analyze-button:hover:not(:disabled)[b-6461hta7ue]::before {
    animation: ui-sheen .8s var(--ui-ease-out);
}

.analyze-button:disabled[b-6461hta7ue] {
    opacity: .60;
    cursor: wait;
}

.analyze-button-icon[b-6461hta7ue] {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-r-xs);
    background: rgba(74,54,8,.13);
    color: var(--ui-on-accent);
}

.analyze-button-icon svg[b-6461hta7ue] {
    width: 17px;
    height: 17px;
}

.analyze-button-copy[b-6461hta7ue] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.translation-workspace[dir="rtl"] .analyze-button-copy[b-6461hta7ue] {
    align-items: flex-end;
}

.analyze-button-copy strong[b-6461hta7ue] {
    font-size: .62rem;
}

.analyze-button-copy small[b-6461hta7ue] {
    color: rgba(74,54,8,.72);
    font-size: .51rem;
}

.analyze-arrow[b-6461hta7ue] {
    width: 17px;
    height: 17px;
    transition: transform var(--ui-dur-2) var(--ui-ease);
}

.analyze-button:hover:not(:disabled) .analyze-arrow[b-6461hta7ue] {
    transform: translateX(3px);
}

.translation-workspace[dir="rtl"] .analyze-arrow[b-6461hta7ue] {
    transform: rotate(180deg);
}

.translation-workspace[dir="rtl"] .analyze-button:hover:not(:disabled) .analyze-arrow[b-6461hta7ue] {
    transform: rotate(180deg) translateX(3px);
}

.intake-button-spinner[b-6461hta7ue] {
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: intake-spin-b-6461hta7ue .7s linear infinite;
}

@keyframes intake-spin-b-6461hta7ue {
    to { transform: rotate(360deg); }
}


/* =========================================================
   NEXT PHASE
   ========================================================= */

.next-phase-card[b-6461hta7ue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 16px;
    border-radius: var(--ui-r-md);
    background:
        linear-gradient(90deg, var(--ui-accent-tint), transparent 48%),
        var(--surface);
    animation: ui-card-in .58s var(--ui-ease-out) .28s backwards;
}

.translation-workspace[dir="rtl"] .next-phase-card[b-6461hta7ue] {
    background:
        linear-gradient(270deg, var(--ui-accent-tint), transparent 48%),
        var(--surface);
}

.next-phase-card > div:first-child[b-6461hta7ue] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.next-phase-card strong[b-6461hta7ue] {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: .62rem;
}

.next-phase-card p[b-6461hta7ue] {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: .52rem;
    line-height: 1.6;
}

.next-phase-tags[b-6461hta7ue] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.next-phase-tags span[b-6461hta7ue] {
    padding: 5px 8px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface-raised);
    color: var(--text-secondary);
    font-size: .51rem;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    .translation-header[b-6461hta7ue] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .workflow-progress[b-6461hta7ue] {
        min-width: 0;
        width: 100%;
        justify-content: space-between;
    }

    .source-type-grid[b-6461hta7ue] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .translation-main-grid[b-6461hta7ue] {
        grid-template-columns: 1fr;
    }

    .analyzer-card[b-6461hta7ue] {
        position: static;
    }
}

@media (max-width: 820px) {
    .translation-header[b-6461hta7ue] {
        min-height: 0;
        padding: 26px 24px;
        border-radius: var(--ui-r-lg);
    }

    .workflow-progress[b-6461hta7ue] {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .workflow-progress[b-6461hta7ue]::-webkit-scrollbar {
        display: none;
    }

    .workflow-step[b-6461hta7ue] {
        flex: 0 0 auto;
    }

    .quality-level-section[b-6461hta7ue],
    .source-type-section[b-6461hta7ue],
    .intake-card[b-6461hta7ue],
    .analyzer-card[b-6461hta7ue] {
        padding: 18px;
    }

    .source-type-grid[b-6461hta7ue] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .next-phase-card[b-6461hta7ue] {
        align-items: flex-start;
        flex-direction: column;
    }

    .next-phase-tags[b-6461hta7ue] {
        justify-content: flex-start;
    }
}

@media (max-width: 540px) {
    .translation-workspace[b-6461hta7ue] {
        gap: 14px;
    }

    .translation-header[b-6461hta7ue] {
        padding: 22px 18px;
    }

    .translation-header h1[b-6461hta7ue] {
        font-size: 1.65rem;
    }

    .workflow-progress[b-6461hta7ue] {
        display: none;
    }

    .quality-level-grid[b-6461hta7ue],
    .source-type-grid[b-6461hta7ue] {
        grid-template-columns: 1fr;
    }

    .quality-level-section[b-6461hta7ue],
    .source-type-section[b-6461hta7ue],
    .intake-card[b-6461hta7ue],
    .analyzer-card[b-6461hta7ue] {
        padding: 15px;
        border-radius: var(--ui-r-md);
    }

    .source-type-card[b-6461hta7ue] {
        min-height: 112px;
    }

    .plain-text-panel textarea[b-6461hta7ue] {
        min-height: 230px;
    }
}

/* NEW TRANSLATION STAGE 1 REFINEMENT V2 - START */

/* Both cards in the input/analyzer row now share the same grid-row height. */
.translation-main-grid[b-6461hta7ue] {
    align-items: stretch;
}

.translation-main-grid > .workspace-card[b-6461hta7ue] {
    height: 100%;
}

.intake-card[b-6461hta7ue],
.analyzer-card[b-6461hta7ue] {
    align-self: stretch;
}

.analyzer-card[b-6461hta7ue] {
    position: relative;
    top: auto;
}

/* The old preview/notice blocks are removed from markup; keep no reserved space. */
.package-access-notice[b-6461hta7ue],
.next-phase-card[b-6461hta7ue] {
    display: none !important;
}

/* NEW TRANSLATION STAGE 1 REFINEMENT V2 - END */

/* Level picked for the user because of their credits */
.quality-level-notice[b-6461hta7ue] {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--ui-warning, #7d5a10);
    background: var(--ui-warning-soft, #f7e8c8);
    color: var(--ui-warning, #7d5a10);
    font-size: 0.9rem;
    line-height: 1.7;
}


/* =========================================================
   PHONE
   =========================================================
   One card per row made the source list five screens of
   mostly-empty cards; two to a row reads as a picker. The
   tier cards drop their desktop height for the same reason.
   ========================================================= */

@media (max-width: 540px) {

    .translation-header h1[b-6461hta7ue] {
        font-size: 1.4rem;
        line-height: 1.45;
    }

    .quality-level-notice[b-6461hta7ue] {
        font-size: .76rem;
        line-height: 1.8;
    }

    .quality-level-grid[b-6461hta7ue] {
        gap: 9px;
    }

    .quality-level-card[b-6461hta7ue] {
        min-height: 0;
        gap: 6px;
        padding: 13px 14px;
    }

    .quality-level-credit b[b-6461hta7ue] {
        font-size: 1.35rem;
    }

    .source-type-grid[b-6461hta7ue] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .source-type-card[b-6461hta7ue] {
        min-height: 104px;
        gap: 8px;
        padding: 12px;
    }

    .source-card-icon[b-6461hta7ue] {
        width: 38px;
        height: 38px;
    }

    .source-card-copy strong[b-6461hta7ue] {
        font-size: .74rem;
    }
}
/* _content/AITranslationPlatform.Web/Components/Translation/TranslationProcess.razor.rz.scp.css */
.translation-process-page[b-jn97xx7xat] {
    width: 100%;
    min-height: 100%;
    padding: 34px;
}

.process-shell[b-jn97xx7xat] {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.process-header[b-jn97xx7xat] {
    margin-bottom: 26px;
}

.process-eyebrow[b-jn97xx7xat] {
    margin-bottom: 8px;
    color: #5775ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.process-header h1[b-jn97xx7xat] {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
}

.process-header p[b-jn97xx7xat] {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.7;
}

.process-grid[b-jn97xx7xat] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.process-main[b-jn97xx7xat] {
    display: grid;
    gap: 20px;
}

.process-card[b-jn97xx7xat] {
    border: 1px solid var(--border-color, #e4e8ef);
    border-radius: 18px;
    background: var(--surface, #fff);
    padding: 23px;
}

.summary-card[b-jn97xx7xat] {
    position: sticky;
    top: 24px;
}

.current-status[b-jn97xx7xat] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .current-status h2[b-jn97xx7xat] {
        margin: 3px 0 4px;
        font-size: 19px;
    }

    .current-status p[b-jn97xx7xat] {
        margin: 0;
        color: var(--text-secondary, #64748b);
        font-size: 13px;
    }

.status-caption[b-jn97xx7xat] {
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-icon[b-jn97xx7xat] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
}

    .status-icon.working[b-jn97xx7xat] {
        color: #4f73ff;
        background: rgba(79, 115, 255, .10);
    }

    .status-icon.success[b-jn97xx7xat] {
        color: #16a34a;
        background: rgba(22, 163, 74, .10);
    }

    .status-icon.error[b-jn97xx7xat] {
        color: #dc2626;
        background: rgba(220, 38, 38, .09);
    }

    .status-icon.cancelled[b-jn97xx7xat] {
        color: #64748b;
        background: rgba(100, 116, 139, .10);
    }

.progress-area[b-jn97xx7xat] {
    margin-top: 32px;
}

.progress-header[b-jn97xx7xat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

    .progress-header strong[b-jn97xx7xat] {
        color: #4f73ff;
        font-size: 15px;
    }

.progress-track[b-jn97xx7xat] {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(100, 116, 139, .12);
}

.progress-fill[b-jn97xx7xat] {
    height: 100%;
    border-radius: inherit;
    background: #4f73ff;
    transition: width .35s ease;
}

.progress-scale[b-jn97xx7xat] {
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary, #94a3b8);
    font-size: 10px;
}

.live-operation[b-jn97xx7xat] {
    margin-top: 23px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(79, 115, 255, .055);
}

    .live-operation > div:last-child[b-jn97xx7xat] {
        display: grid;
        gap: 3px;
    }

    .live-operation strong[b-jn97xx7xat] {
        font-size: 13px;
    }

    .live-operation span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
    }

.live-dot[b-jn97xx7xat] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #4f73ff;
    box-shadow: 0 0 0 5px rgba(79, 115, 255, .11);
    animation: live-pulse-b-jn97xx7xat 1.4s ease-in-out infinite;
}

@keyframes live-pulse-b-jn97xx7xat {
    50% {
        box-shadow: 0 0 0 9px rgba(79, 115, 255, .03);
    }
}

.translation-stage-success[b-jn97xx7xat],
.execution-error[b-jn97xx7xat],
.cancelled-message[b-jn97xx7xat] {
    margin-top: 22px;
    border-radius: 13px;
    padding: 15px;
}

.translation-stage-success[b-jn97xx7xat] {
    display: flex;
    gap: 12px;
    background: rgba(22, 163, 74, .07);
    border: 1px solid rgba(22, 163, 74, .18);
}

.success-check[b-jn97xx7xat] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-weight: 900;
}

.translation-stage-success p[b-jn97xx7xat] {
    margin: 4px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.6;
}

.execution-error[b-jn97xx7xat] {
    background: rgba(220, 38, 38, .06);
    border: 1px solid rgba(220, 38, 38, .17);
}

    .execution-error strong[b-jn97xx7xat] {
        color: #b91c1c;
    }

    .execution-error p[b-jn97xx7xat] {
        margin: 7px 0;
        font-size: 13px;
    }

    .execution-error span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
    }

.cancelled-message[b-jn97xx7xat] {
    background: rgba(100, 116, 139, .07);
}

.execution-retry[b-jn97xx7xat] {
    margin-top: 22px;
    border-radius: 13px;
    padding: 15px;
    background: rgba(217, 119, 6, .07);
    border: 1px solid rgba(217, 119, 6, .2);
}

    .execution-retry strong[b-jn97xx7xat] {
        color: #b45309;
    }

    .execution-retry p[b-jn97xx7xat] {
        margin: 5px 0 0;
        color: var(--text-secondary, #64748b);
        font-size: 13px;
        line-height: 1.6;
    }

    .cancelled-message p[b-jn97xx7xat] {
        margin: 5px 0 0;
        color: var(--text-secondary, #64748b);
        font-size: 13px;
    }

.process-actions[b-jn97xx7xat] {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.process-btn[b-jn97xx7xat] {
    min-height: 46px;
    padding: 0 17px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.process-btn-primary[b-jn97xx7xat] {
    border: 1px solid #4f73ff;
    background: #4f73ff;
    color: #fff;
}

.process-btn-secondary[b-jn97xx7xat] {
    border: 1px solid var(--border-color, #dbe1e9);
    background: transparent;
    color: inherit;
}

.process-btn:disabled[b-jn97xx7xat] {
    opacity: .5;
    cursor: not-allowed;
}

.button-spinner[b-jn97xx7xat] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: process-spin-b-jn97xx7xat .7s linear infinite;
}

.large-spinner[b-jn97xx7xat] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(79, 115, 255, .18);
    border-top-color: #4f73ff;
    border-radius: 50%;
    animation: process-spin-b-jn97xx7xat .8s linear infinite;
}

@keyframes process-spin-b-jn97xx7xat {
    to {
        transform: rotate(360deg);
    }
}

.loading-card[b-jn97xx7xat] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.error-card[b-jn97xx7xat] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

    .error-card h2[b-jn97xx7xat] {
        margin: 0;
        font-size: 17px;
    }

    .error-card p[b-jn97xx7xat] {
        margin: 6px 0 0;
        color: #b91c1c;
        font-size: 13px;
    }

.section-title[b-jn97xx7xat] {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 800;
}

.pipeline[b-jn97xx7xat] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.pipeline-step[b-jn97xx7xat] {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e9ef);
    border-radius: 12px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    opacity: .55;
}

    .pipeline-step.active[b-jn97xx7xat] {
        opacity: 1;
        border-color: #7891ff;
        background: rgba(79, 115, 255, .055);
    }

    .pipeline-step.completed[b-jn97xx7xat] {
        opacity: 1;
        border-color: rgba(22, 163, 74, .25);
        background: rgba(22, 163, 74, .045);
    }

.pipeline-number[b-jn97xx7xat] {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(100, 116, 139, .09);
    font-size: 11px;
    font-weight: 800;
}

.pipeline-step.active .pipeline-number[b-jn97xx7xat] {
    background: #4f73ff;
    color: #fff;
}

.pipeline-step.completed .pipeline-number[b-jn97xx7xat] {
    background: #16a34a;
    color: #fff;
}

.pipeline-step > div[b-jn97xx7xat] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pipeline-step strong[b-jn97xx7xat] {
    font-size: 12px;
}

.pipeline-step small[b-jn97xx7xat] {
    color: var(--text-secondary, #64748b);
    font-size: 10px;
    line-height: 1.45;
}

.summary-row[b-jn97xx7xat] {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #edf0f4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
}

    .summary-row span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
    }

    .summary-row strong[b-jn97xx7xat] {
        text-align: end;
    }

.format-preservation-info[b-jn97xx7xat] {
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(22, 163, 74, .07);
}

.preservation-icon[b-jn97xx7xat] {
    color: #16a34a;
    font-size: 20px;
}

.format-preservation-info strong[b-jn97xx7xat] {
    color: #15803d;
    font-size: 12px;
}

.format-preservation-info p[b-jn97xx7xat] {
    margin: 5px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    line-height: 1.6;
}

@media (max-width: 1050px) {
    .process-grid[b-jn97xx7xat] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-jn97xx7xat] {
        position: static;
    }

    .pipeline[b-jn97xx7xat] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .translation-process-page[b-jn97xx7xat] {
        padding: 20px 14px;
    }

    .process-card[b-jn97xx7xat] {
        padding: 18px;
    }

    .process-actions[b-jn97xx7xat] {
        flex-direction: column;
    }

    .process-btn[b-jn97xx7xat] {
        width: 100%;
    }
}



/* =========================================================
   QUALITY REVIEW ACTION
   ========================================================= */

.quality-review-action[b-jn97xx7xat] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color, #e6eaf0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.quality-review-action-content[b-jn97xx7xat] {
    min-width: 0;
    display: grid;
    gap: 5px;
}


    .quality-review-action-content strong[b-jn97xx7xat] {
        font-size: 13px;
    }


    .quality-review-action-content span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
        line-height: 1.6;
    }


.quality-review-button[b-jn97xx7xat] {
    flex: 0 0 auto;
    margin: 0;
}


.quality-review-failed[b-jn97xx7xat] {
    margin-top: 16px;
    padding: 15px;
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 12px;
    background: rgba(220, 38, 38, .05);
}


.quality-review-failed-header[b-jn97xx7xat] {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
}


    .quality-review-failed-header strong[b-jn97xx7xat] {
        color: #b91c1c;
        font-size: 13px;
    }


    .quality-review-failed-header span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
    }


.quality-review-issue[b-jn97xx7xat] {
    padding: 8px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    border-top: 1px solid rgba(220, 38, 38, .10);
    font-size: 11px;
}


    .quality-review-issue strong[b-jn97xx7xat] {
        color: #b91c1c;
    }


    .quality-review-issue span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
    }


@media (max-width: 700px) {

    .quality-review-action[b-jn97xx7xat] {
        align-items: stretch;
        flex-direction: column;
    }


    .quality-review-button[b-jn97xx7xat] {
        width: 100%;
    }
}


/* =========================================================
   OUTPUT READY
   ========================================================= */

.output-ready-card[b-jn97xx7xat] {
    margin-top: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(22, 163, 74, .22);
    border-radius: 14px;
    background: rgba(22, 163, 74, .065);
}


.output-ready-icon[b-jn97xx7xat] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #16a34a;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}


.output-ready-content[b-jn97xx7xat] {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}


    .output-ready-content > strong[b-jn97xx7xat] {
        color: #15803d;
        font-size: 14px;
    }


    .output-ready-content > span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
        line-height: 1.6;
    }


.output-file-meta[b-jn97xx7xat] {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}


.output-file-name[b-jn97xx7xat] {
    color: inherit;
    font-weight: 700;
    overflow-wrap: anywhere;
}


.output-download-button[b-jn97xx7xat] {
    flex: 0 0 auto;
    text-decoration: none !important;
}


    .output-download-button:visited[b-jn97xx7xat] {
        color: #fff;
    }


@media (max-width: 760px) {

    .output-ready-card[b-jn97xx7xat] {
        align-items: stretch;
        flex-direction: column;
    }


    .output-download-button[b-jn97xx7xat] {
        width: 100%;
    }
}


.formatting-start-button[b-jn97xx7xat],
.download-output-button[b-jn97xx7xat] {
    margin: 0;
}


.download-output-button[b-jn97xx7xat] {
    text-decoration: none !important;
}


.output-ready-card[b-jn97xx7xat] {
    margin-top: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(22, 163, 74, .22);
    border-radius: 13px;
    background: rgba(22, 163, 74, .065);
}


.output-ready-icon[b-jn97xx7xat] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-weight: 900;
}


.output-ready-content[b-jn97xx7xat] {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 5px;
}


    .output-ready-content > strong[b-jn97xx7xat] {
        color: #15803d;
    }


    .output-ready-content > span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
    }


.output-file-info[b-jn97xx7xat] {
    margin-top: 5px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
}


@media (max-width: 700px) {

    .output-ready-card[b-jn97xx7xat] {
        align-items: stretch;
        flex-direction: column;
    }
}



/* =========================================================
   QUALITY REVIEW REPAIR
   ========================================================= */

.quality-review-failed[b-jn97xx7xat] {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 13px;
    background: rgba(220, 38, 38, .045);
}

.quality-review-failed-header[b-jn97xx7xat] {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
}

    .quality-review-failed-header strong[b-jn97xx7xat] {
        color: #b91c1c;
        font-size: 13px;
    }

    .quality-review-failed-header span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 12px;
        line-height: 1.65;
    }

.quality-review-issue-detail[b-jn97xx7xat] {
    padding: 12px 0;
    border-top: 1px solid rgba(220, 38, 38, .10);
}

.quality-review-issue-title[b-jn97xx7xat] {
    display: grid;
    gap: 4px;
}

    .quality-review-issue-title strong[b-jn97xx7xat] {
        color: #b91c1c;
        font-size: 11px;
    }

    .quality-review-issue-title span[b-jn97xx7xat] {
        color: var(--text-secondary, #64748b);
        font-size: 11px;
    }

.quality-review-text-row[b-jn97xx7xat] {
    margin-top: 9px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(100, 116, 139, .055);
}

    .quality-review-text-row > span[b-jn97xx7xat] {
        display: block;
        margin-bottom: 4px;
        color: var(--text-secondary, #64748b);
        font-size: 10px;
        font-weight: 700;
    }

    .quality-review-text-row p[b-jn97xx7xat] {
        margin: 0;
        font-size: 12px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

.quality-review-repair-actions[b-jn97xx7xat] {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.quality-review-action-error[b-jn97xx7xat] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(220, 38, 38, .07);
    color: #b91c1c;
    font-size: 11px;
    line-height: 1.65;
}

@media (max-width: 700px) {
    .quality-review-repair-actions[b-jn97xx7xat] {
        align-items: stretch;
        flex-direction: column;
    }

        .quality-review-repair-actions .process-btn[b-jn97xx7xat] {
            width: 100%;
        }
}


/* =========================================================
   COMPLETED OUTPUT ACTIONS
   ========================================================= */

.output-ready-actions[b-jn97xx7xat] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


.output-rebuild-button[b-jn97xx7xat],
.output-download-button[b-jn97xx7xat] {
    margin: 0;
    white-space: nowrap;
}


.output-download-button[b-jn97xx7xat] {
    text-decoration: none !important;
}


@media (max-width: 820px) {

    .output-ready-actions[b-jn97xx7xat] {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }


        .output-ready-actions .process-btn[b-jn97xx7xat] {
            width: 100%;
        }
}
.reuse-summary-card[b-jn97xx7xat]{margin-top:16px}.reuse-summary-card p[b-jn97xx7xat],.reuse-summary-card small[b-jn97xx7xat]{display:block;margin:8px 0;color:var(--text-muted,#6f7d92);line-height:1.65;font-size:.82rem}


/* TRANSLATION PROCESS STAGE 4 PREMIUM V1 - START */

/* =========================================================
   PAGE
   ========================================================= */

.translation-process-page[b-jn97xx7xat] {
    width: 100%;
    min-height: 100%;
    padding: 0;
    color: var(--text);
}

.process-shell[b-jn97xx7xat] {
    width: min(1480px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}


/* =========================================================
   HERO — MATCH PREVIOUS STAGES
   ========================================================= */

.process-header[b-jn97xx7xat] {
    min-height: 220px;
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 500px);
    grid-template-rows: auto auto 1fr;
    column-gap: 34px;
    row-gap: 0;
    align-items: center;

    margin: 0;
    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);

    background:
        radial-gradient(115% 145% at 8% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(135deg, var(--ui-surface-strong), var(--ui-surface));

    box-shadow: var(--ui-shadow-md);

    animation: ui-card-in .62s var(--ui-ease-out) .04s backwards;
}

.translation-process-page[dir="rtl"] .process-header[b-jn97xx7xat] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--ui-bloom-warm), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, var(--ui-bloom-cool), transparent 56%),
        linear-gradient(225deg, var(--ui-surface-strong), var(--ui-surface));
}

.process-header[b-jn97xx7xat]::before,
.process-header[b-jn97xx7xat]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.process-header[b-jn97xx7xat]::before {
    width: 280px;
    height: 280px;

    inset-block-start: -178px;
    inset-inline-end: -92px;

    border: 42px solid var(--ui-accent-soft);
    opacity: .72;
}

.process-header[b-jn97xx7xat]::after {
    width: 150px;
    height: 150px;

    inset-block-end: -98px;
    inset-inline-start: -42px;

    border: 26px solid var(--ui-line-strong);
    opacity: .68;
}

.process-eyebrow[b-jn97xx7xat],
.process-header > h1[b-jn97xx7xat],
.process-header > p[b-jn97xx7xat] {
    position: relative;
    z-index: 3;
    grid-column: 1;
}

.process-eyebrow[b-jn97xx7xat] {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 9px;
    padding: 6px 11px;

    border: 1px solid rgba(226, 175, 46, .30);
    border-radius: var(--ui-r-pill);

    background: var(--ui-surface-raised);

    color: var(--accent-text);

    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .05em;
}

.process-eyebrow[b-jn97xx7xat]::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;

    border-radius: 50%;
    background: var(--ui-accent-strong);

    animation: live-pulse-b-jn97xx7xat 2.2s var(--ui-ease) infinite;
}

.translation-process-page[dir="rtl"] .process-eyebrow[b-jn97xx7xat] {
    letter-spacing: 0;
}

.process-header h1[b-jn97xx7xat] {
    margin: 0 0 10px;

    color: var(--text);

    font-size: clamp(1.8rem, 2.4vw, 2.65rem);
    font-weight: 830;
    line-height: 1.22;
    letter-spacing: -.025em;
}

.translation-process-page[dir="rtl"] .process-header h1[b-jn97xx7xat] {
    letter-spacing: 0;
}

.process-header > p[b-jn97xx7xat] {
    max-width: 720px;
    margin: 0;

    color: var(--text-secondary);

    font-size: .81rem;
    line-height: 1.9;
}

.process-header[b-jn97xx7xat]  .translation-workflow-progress {
    grid-column: 2;
    grid-row: 1 / 4;

    width: 100%;
    max-width: 500px;

    align-self: center;
    justify-self: stretch;

    margin: 0;

    position: relative;
    z-index: 3;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.process-grid[b-jn97xx7xat] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
}

.process-main[b-jn97xx7xat] {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.process-side[b-jn97xx7xat] {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.process-card[b-jn97xx7xat] {
    min-width: 0;

    padding: 18px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);

    background: var(--surface);

    box-shadow: var(--ui-shadow-sm);

    transition:
        border-color var(--ui-dur-2) var(--ui-ease),
        box-shadow var(--ui-dur-2) var(--ui-ease);
}

.process-card:hover[b-jn97xx7xat] {
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-shadow-md);
}

.main-progress-card[b-jn97xx7xat] {
    position: relative;
    overflow: hidden;
}

.main-progress-card[b-jn97xx7xat]::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    inset-block-start: -132px;
    inset-inline-end: -70px;

    border-radius: 50%;

    background: var(--ui-accent);
    opacity: .045;

    pointer-events: none;
}


/* =========================================================
   CURRENT STATUS
   ========================================================= */

.current-status[b-jn97xx7xat] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 15px;
    border-bottom: 1px solid var(--ui-line);
}

.current-status > div:last-child[b-jn97xx7xat] {
    min-width: 0;
}

.current-status h2[b-jn97xx7xat] {
    margin: 3px 0 4px;

    color: var(--text);

    font-size: 1rem;
    font-weight: 830;
}

.current-status p[b-jn97xx7xat] {
    margin: 0;

    color: var(--text-secondary);

    font-size: .62rem;
    line-height: 1.65;
}

.status-caption[b-jn97xx7xat] {
    color: var(--muted);

    font-size: .54rem;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: none;
}

.status-icon[b-jn97xx7xat] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    font-size: 1.12rem;
    font-weight: 900;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}

.status-icon.working[b-jn97xx7xat] {
    color: var(--ui-warning);
    background: var(--ui-accent-soft);
}

.status-icon.success[b-jn97xx7xat] {
    color: var(--ui-success);
    background: var(--ui-success-tint);
}

.status-icon.error[b-jn97xx7xat] {
    color: var(--ui-danger);
    background: var(--ui-danger-tint);
}

.status-icon.cancelled[b-jn97xx7xat] {
    color: var(--muted);
    background: var(--ui-surface-sunken);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-area[b-jn97xx7xat] {
    position: relative;
    z-index: 1;

    margin-top: 17px;
    padding: 14px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);

    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 72%),
        var(--ui-surface-sunken);
}

.progress-header[b-jn97xx7xat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-bottom: 10px;

    color: var(--text-secondary);

    font-size: .60rem;
    font-weight: 760;
}

.progress-header strong[b-jn97xx7xat] {
    color: var(--ui-warning);
    font-size: .78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.progress-track[b-jn97xx7xat] {
    width: 100%;
    height: 9px;

    position: relative;

    overflow: hidden;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);

    background: var(--ui-surface-raised);

    box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
}

.progress-fill[b-jn97xx7xat] {
    height: 100%;

    position: relative;

    border-radius: inherit;

    background: var(--ui-progress-fill);

    box-shadow: var(--ui-progress-glow);

    transition: width .38s var(--ui-ease-out);
}

.progress-fill[b-jn97xx7xat]::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 28%,
            rgba(255,255,255,.45) 50%,
            transparent 72%
        );

    animation: process-progress-sheen-b-jn97xx7xat 1.9s linear infinite;
}

@keyframes process-progress-sheen-b-jn97xx7xat {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.progress-scale[b-jn97xx7xat] {
    margin-top: 7px;

    display: flex;
    justify-content: space-between;

    color: var(--muted);

    font-size: .49rem;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   LIVE OPERATION
   ========================================================= */

.live-operation[b-jn97xx7xat] {
    margin-top: 12px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 12px;

    border: 1px solid rgba(226, 175, 46, .20);
    border-radius: var(--ui-r-sm);

    background: var(--ui-accent-tint);
}

.live-operation > div:last-child[b-jn97xx7xat] {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.live-operation strong[b-jn97xx7xat] {
    color: var(--text);

    font-size: .61rem;
    font-weight: 800;
}

.live-operation span[b-jn97xx7xat] {
    color: var(--text-secondary);

    font-size: .54rem;
    line-height: 1.55;
}

.live-dot[b-jn97xx7xat] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--ui-accent-strong);

    box-shadow: 0 0 0 5px var(--ui-accent-soft);

    animation: live-pulse-b-jn97xx7xat 1.5s ease-in-out infinite;
}


/* =========================================================
   SUCCESS / ERROR / CANCEL
   ========================================================= */

.translation-stage-success[b-jn97xx7xat],
.execution-error[b-jn97xx7xat],
.cancelled-message[b-jn97xx7xat] {
    margin-top: 12px;
    padding: 12px;

    border-radius: var(--ui-r-sm);
}

.translation-stage-success[b-jn97xx7xat] {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    border: 1px solid rgba(63, 106, 57, .18);

    background: var(--ui-success-tint);
}

.success-check[b-jn97xx7xat] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--ui-success);
    color: #fff;

    font-size: .58rem;
    font-weight: 900;
}

.translation-stage-success strong[b-jn97xx7xat] {
    color: var(--ui-success);

    font-size: .61rem;
    font-weight: 830;
}

.translation-stage-success p[b-jn97xx7xat] {
    margin: 3px 0 0;

    color: var(--text-secondary);

    font-size: .54rem;
    line-height: 1.6;
}

.execution-error[b-jn97xx7xat] {
    border: 1px solid rgba(157, 66, 49, .18);

    background: var(--ui-danger-tint);
}

.execution-error strong[b-jn97xx7xat] {
    color: var(--ui-danger);
}

.execution-error p[b-jn97xx7xat],
.execution-error span[b-jn97xx7xat] {
    color: var(--text-secondary);
    font-size: .55rem;
    line-height: 1.6;
}

.cancelled-message[b-jn97xx7xat] {
    border: 1px solid var(--ui-line);

    background: var(--ui-surface-sunken);
}

.cancelled-message p[b-jn97xx7xat] {
    color: var(--text-secondary);
    font-size: .55rem;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.process-actions[b-jn97xx7xat] {
    margin-top: 14px;

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.process-btn[b-jn97xx7xat] {
    min-height: 42px;

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 14px;

    overflow: hidden;

    border-radius: var(--ui-r-xs);

    font: inherit;
    font-size: .59rem;
    font-weight: 820;

    cursor: pointer;

    transition: var(--ui-t);
}

.process-btn-primary[b-jn97xx7xat] {
    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            var(--ui-accent),
            var(--ui-accent-strong)
        );

    color: var(--ui-on-accent);

    box-shadow: var(--ui-shadow-accent);
}

.process-btn-primary:hover:not(:disabled)[b-jn97xx7xat] {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(226,175,46,.26);
}

.process-btn-secondary[b-jn97xx7xat] {
    border: 1px solid var(--ui-line);

    background: var(--ui-surface-raised);

    color: var(--text-secondary);
}

.process-btn-secondary:hover:not(:disabled)[b-jn97xx7xat] {
    transform: translateY(-1px);

    border-color: var(--ui-line-strong);

    color: var(--text);

    box-shadow: var(--ui-shadow-sm);
}

.process-btn:disabled[b-jn97xx7xat] {
    opacity: .48;
    cursor: not-allowed;
}


/* =========================================================
   PIPELINE
   ========================================================= */

.section-title[b-jn97xx7xat] {
    margin-bottom: 12px;

    color: var(--text);

    font-size: .70rem;
    font-weight: 840;
}

.pipeline[b-jn97xx7xat] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.pipeline-step[b-jn97xx7xat] {
    min-width: 0;
    min-height: 76px;

    position: relative;

    display: flex;
    gap: 8px;
    align-items: flex-start;

    padding: 10px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);

    background: var(--ui-surface-sunken);

    opacity: .60;

    transition: var(--ui-t);
}

.pipeline-step.active[b-jn97xx7xat] {
    opacity: 1;

    border-color: rgba(226,175,46,.34);

    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 70%),
        var(--ui-surface-strong);

    box-shadow: var(--ui-shadow-sm);
}

.pipeline-step.completed[b-jn97xx7xat] {
    opacity: 1;

    border-color: rgba(63,106,57,.18);

    background: var(--ui-success-tint);
}

.pipeline-number[b-jn97xx7xat] {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--ui-surface-raised);

    color: var(--muted);

    font-size: .51rem;
    font-weight: 900;
}

.pipeline-step.active .pipeline-number[b-jn97xx7xat] {
    background:
        linear-gradient(
            135deg,
            var(--ui-accent),
            var(--ui-accent-strong)
        );

    color: var(--ui-on-accent);

    box-shadow: var(--ui-shadow-accent);
}

.pipeline-step.completed .pipeline-number[b-jn97xx7xat] {
    background: var(--ui-success);
    color: #fff;
}

.pipeline-step > div[b-jn97xx7xat] {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.pipeline-step strong[b-jn97xx7xat] {
    color: var(--text);

    font-size: .57rem;
    font-weight: 800;
}

.pipeline-step small[b-jn97xx7xat] {
    color: var(--muted);

    font-size: .48rem;
    line-height: 1.45;
}


/* =========================================================
   SIDE SUMMARY
   ========================================================= */

.summary-card[b-jn97xx7xat] {
    position: sticky;
    top: 10px;

    overflow: hidden;

    background:
        radial-gradient(105% 85% at 100% 0%, var(--ui-accent-tint), transparent 52%),
        var(--surface);
}

.summary-card[b-jn97xx7xat]::after {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    inset-block-start: -76px;
    inset-inline-end: -42px;

    border-radius: 50%;

    background: var(--ui-accent);
    opacity: .05;

    pointer-events: none;
}

.summary-card > *[b-jn97xx7xat] {
    position: relative;
    z-index: 1;
}

.summary-row[b-jn97xx7xat] {
    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid var(--ui-line);

    font-size: .58rem;
}

.summary-row span[b-jn97xx7xat] {
    color: var(--muted);
}

.summary-row strong[b-jn97xx7xat] {
    color: var(--text);

    font-size: .61rem;
    font-weight: 820;

    text-align: end;
}

.format-preservation-info[b-jn97xx7xat] {
    margin-top: 12px;
    padding: 11px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    border: 1px solid rgba(63,106,57,.17);
    border-radius: var(--ui-r-sm);

    background: var(--ui-success-tint);
}

.preservation-icon[b-jn97xx7xat] {
    color: var(--ui-success);
    font-size: .95rem;
}

.format-preservation-info strong[b-jn97xx7xat] {
    color: var(--ui-success);

    font-size: .57rem;
    font-weight: 830;
}

.format-preservation-info p[b-jn97xx7xat] {
    margin: 4px 0 0;

    color: var(--text-secondary);

    font-size: .51rem;
    line-height: 1.58;
}

.reuse-summary-card[b-jn97xx7xat] {
    margin-top: 0 !important;
}

.reuse-summary-card p[b-jn97xx7xat],
.reuse-summary-card small[b-jn97xx7xat] {
    display: block;

    margin: 7px 0;

    color: var(--text-secondary);

    font-size: .54rem;
    line-height: 1.6;
}


/* =========================================================
   QUALITY REVIEW
   ========================================================= */

.quality-review-action[b-jn97xx7xat] {
    margin-top: 14px;
    padding-top: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    border-top: 1px solid var(--ui-line);
}

.quality-review-action-content[b-jn97xx7xat] {
    min-width: 0;

    display: grid;
    gap: 3px;
}

.quality-review-action-content strong[b-jn97xx7xat] {
    color: var(--text);

    font-size: .61rem;
    font-weight: 820;
}

.quality-review-action-content span[b-jn97xx7xat] {
    color: var(--text-secondary);

    font-size: .54rem;
    line-height: 1.55;
}

.quality-review-failed[b-jn97xx7xat] {
    margin-top: 12px;
    padding: 13px;

    border: 1px solid rgba(157,66,49,.18);
    border-radius: var(--ui-r-sm);

    background: var(--ui-danger-tint);
}

.quality-review-failed-header[b-jn97xx7xat] {
    display: grid;
    gap: 3px;

    margin-bottom: 10px;
}

.quality-review-failed-header strong[b-jn97xx7xat] {
    color: var(--ui-danger);

    font-size: .61rem;
    font-weight: 830;
}

.quality-review-failed-header span[b-jn97xx7xat] {
    color: var(--text-secondary);

    font-size: .54rem;
    line-height: 1.55;
}

.quality-review-issue-detail[b-jn97xx7xat] {
    padding: 10px 0;

    border-top: 1px solid rgba(157,66,49,.12);
}

.quality-review-issue-title[b-jn97xx7xat] {
    display: grid;
    gap: 3px;
}

.quality-review-issue-title strong[b-jn97xx7xat] {
    color: var(--ui-danger);
    font-size: .52rem;
}

.quality-review-issue-title span[b-jn97xx7xat] {
    color: var(--text-secondary);
    font-size: .52rem;
}

.quality-review-text-row[b-jn97xx7xat] {
    margin-top: 7px;
    padding: 9px 10px;

    border: 1px solid var(--ui-line);
    border-radius: 9px;

    background: var(--ui-surface-sunken);
}

.quality-review-text-row > span[b-jn97xx7xat] {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: .49rem;
    font-weight: 760;
}

.quality-review-text-row p[b-jn97xx7xat] {
    margin: 0;

    color: var(--text);

    font-size: .55rem;
    line-height: 1.65;
}


/* =========================================================
   OUTPUT READY
   ========================================================= */

.output-ready-card[b-jn97xx7xat] {
    margin-top: 12px;
    padding: 13px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(63,106,57,.20);
    border-radius: var(--ui-r-md);

    background:
        linear-gradient(145deg, var(--ui-success-tint), transparent 76%),
        var(--ui-surface-sunken);
}

.output-ready-icon[b-jn97xx7xat] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--ui-success);
    color: #fff;

    font-size: .80rem;
    font-weight: 900;

    box-shadow: 0 7px 16px rgba(63,106,57,.18);
}

.output-ready-content[b-jn97xx7xat] {
    min-width: 0;
    flex: 1;

    display: grid;
    gap: 3px;
}

.output-ready-content > strong[b-jn97xx7xat] {
    color: var(--ui-success);

    font-size: .66rem;
    font-weight: 840;
}

.output-ready-content > span[b-jn97xx7xat] {
    color: var(--text-secondary);

    font-size: .54rem;
    line-height: 1.55;
}

.output-file-meta[b-jn97xx7xat],
.output-file-info[b-jn97xx7xat] {
    margin-top: 4px;

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    color: var(--muted);

    font-size: .50rem;
}

.output-file-name[b-jn97xx7xat] {
    color: var(--text-secondary);
    font-weight: 760;
    overflow-wrap: anywhere;
}

.output-ready-actions[b-jn97xx7xat] {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   LOADING / PAGE ERROR
   ========================================================= */

.loading-card[b-jn97xx7xat],
.error-card[b-jn97xx7xat] {
    min-height: 96px;

    display: flex;
    align-items: center;
    gap: 12px;
}

.large-spinner[b-jn97xx7xat] {
    width: 26px;
    height: 26px;

    border: 3px solid var(--ui-accent-soft);
    border-top-color: var(--ui-accent-strong);
    border-radius: 50%;

    animation: process-spin-b-jn97xx7xat .8s linear infinite;
}

.error-card h2[b-jn97xx7xat] {
    margin: 0;

    color: var(--text);

    font-size: .78rem;
}

.error-card p[b-jn97xx7xat] {
    margin: 4px 0 0;

    color: var(--ui-danger);

    font-size: .56rem;
    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    .process-header[b-jn97xx7xat] {
        min-height: 0;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        padding: 27px;
    }

    .process-eyebrow[b-jn97xx7xat],
    .process-header > h1[b-jn97xx7xat],
    .process-header > p[b-jn97xx7xat],
    .process-header[b-jn97xx7xat]  .translation-workflow-progress {
        grid-column: 1;
        grid-row: auto;
    }

    .process-header[b-jn97xx7xat]  .translation-workflow-progress {
        width: 100%;
        max-width: none;

        margin-top: 16px;
    }
}

@media (max-width: 1050px) {
    .process-grid[b-jn97xx7xat] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-jn97xx7xat] {
        position: static;
    }
}

@media (max-width: 760px) {
    .process-header[b-jn97xx7xat] {
        padding: 23px 20px;
        border-radius: var(--ui-r-lg);
    }

    .process-card[b-jn97xx7xat] {
        padding: 15px;
    }

    .pipeline[b-jn97xx7xat] {
        grid-template-columns: 1fr;
    }

    .quality-review-action[b-jn97xx7xat],
    .output-ready-card[b-jn97xx7xat],
    .output-ready-actions[b-jn97xx7xat] {
        align-items: stretch;
        flex-direction: column;
    }

    .process-actions[b-jn97xx7xat] {
        flex-direction: column;
    }

    .process-btn[b-jn97xx7xat],
    .quality-review-button[b-jn97xx7xat],
    .output-ready-actions .process-btn[b-jn97xx7xat] {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .process-shell[b-jn97xx7xat] {
        gap: 14px;
    }

    .process-header[b-jn97xx7xat] {
        padding: 21px 17px;
    }

    .process-header h1[b-jn97xx7xat] {
        font-size: 1.65rem;
    }

    .current-status[b-jn97xx7xat] {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-header[b-jn97xx7xat],
    .progress-fill[b-jn97xx7xat]::after,
    .live-dot[b-jn97xx7xat] {
        animation: none !important;
    }
}

/* TRANSLATION PROCESS STAGE 4 PREMIUM V1 - END */

/* INSUFFICIENT CREDIT - START */
.execution-error-action[b-jn97xx7xat]{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:7px 16px;border-radius:var(--ui-r-sm);background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-strong));color:var(--ui-on-accent);font-size:.6rem;font-weight:850;text-decoration:none;box-shadow:var(--ui-shadow-accent);transition:var(--ui-t)}
.execution-error-action:hover[b-jn97xx7xat]{transform:translateY(-1px)}
/* INSUFFICIENT CREDIT - END */

/* =========================================================
   TEXT INSIDE PICTURES
   =========================================================
   Built from the --ui-* tokens only, like the rest of the page:
   app.css redefines them under html[data-theme="dark"], so the
   card follows both themes without a rule of its own. Sizes
   follow the output card above it (.66rem title, .54rem text).
   ========================================================= */

.picture-text-card[b-jn97xx7xat] {
    /* Only what does not move the layout: --ui-t is "all", and a thumbnail
       that animates its width lags behind every breakpoint. */
    --picture-text-transition:
        color var(--ui-dur-2) var(--ui-ease),
        background var(--ui-dur-2) var(--ui-ease),
        border-color var(--ui-dur-2) var(--ui-ease),
        box-shadow var(--ui-dur-2) var(--ui-ease),
        transform var(--ui-dur-2) var(--ui-ease);

    position: relative;

    margin-top: 12px;
    padding: 14px;

    display: grid;
    gap: 12px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);

    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 46%),
        var(--ui-surface-sunken);
}


/* ---- head ---- */

.picture-text-head[b-jn97xx7xat] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.picture-text-icon[b-jn97xx7xat] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);

    box-shadow: var(--ui-shadow-accent);
}

    .picture-text-icon svg[b-jn97xx7xat] {
        width: 20px;
        height: 20px;
    }

.picture-text-heading[b-jn97xx7xat] {
    min-width: 0;

    display: grid;
    gap: 3px;
}

    .picture-text-heading > strong[b-jn97xx7xat] {
        color: var(--text);

        font-size: .66rem;
        font-weight: 840;
    }

    .picture-text-heading > span[b-jn97xx7xat] {
        color: var(--text-secondary);

        font-size: .54rem;
        line-height: 1.6;
    }


/* ---- counters and the choice for all ---- */

.picture-text-toolbar[b-jn97xx7xat] {
    padding-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;

    border-top: 1px solid var(--ui-line);
}

.picture-text-stats[b-jn97xx7xat] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.picture-text-stat[b-jn97xx7xat] {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 10px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);

    background: var(--ui-surface-raised);
    color: var(--text-secondary);

    font-size: .5rem;
    font-weight: 700;
}

    .picture-text-stat > b[b-jn97xx7xat] {
        color: var(--text);
        font-weight: 850;
    }

    .picture-text-stat.is-translated[b-jn97xx7xat] {
        border-color: transparent;
        background: var(--ui-success-tint);
        color: var(--ui-success);
    }

        .picture-text-stat.is-translated > b[b-jn97xx7xat] {
            color: var(--ui-success);
        }

.picture-text-bulk[b-jn97xx7xat] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .picture-text-bulk > span[b-jn97xx7xat] {
        color: var(--muted);

        font-size: .5rem;
        font-weight: 760;
    }

.picture-text-chip[b-jn97xx7xat] {
    padding: 5px 11px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);

    background: var(--ui-surface-raised);
    color: var(--text-secondary);

    font: inherit;
    font-size: .5rem;
    font-weight: 760;

    cursor: pointer;

    transition: var(--picture-text-transition);
}

    .picture-text-chip:hover:not(:disabled)[b-jn97xx7xat] {
        border-color: var(--ui-line-strong);
        background: var(--ui-surface-hover);
        color: var(--text);
    }


/* ---- the list ---- */

.picture-text-list[b-jn97xx7xat] {
    margin: 0;
    padding: 0;

    display: grid;
    gap: 8px;

    list-style: none;
}

    /* Every picture shown: the list scrolls inside the card. */
    .picture-text-list.is-expanded[b-jn97xx7xat] {
        max-height: min(640px, 70vh);
        overflow-y: auto;
        overscroll-behavior: contain;

        padding-inline-end: 4px;

        scrollbar-width: thin;
        scrollbar-color: var(--ui-line-strong) transparent;
    }

.picture-text-item[b-jn97xx7xat] {
    padding: 8px;

    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);

    background: var(--ui-surface-raised);

    transition:
        border-color var(--ui-dur-2) var(--ui-ease),
        background var(--ui-dur-2) var(--ui-ease),
        box-shadow var(--ui-dur-2) var(--ui-ease);
}

    .picture-text-item:hover[b-jn97xx7xat] {
        border-color: var(--ui-line-strong);
        box-shadow: var(--ui-shadow-sm);
    }

    /* A choice made and not applied yet. */
    .picture-text-item.is-staged[b-jn97xx7xat] {
        border-color: var(--ui-accent-strong);

        background:
            linear-gradient(145deg, var(--ui-accent-tint), transparent 72%),
            var(--ui-surface-raised);
    }

.picture-text-thumb[b-jn97xx7xat] {
    width: 104px;
    height: 72px;

    padding: 4px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xs);

    background: var(--ui-surface-strong);

    cursor: zoom-in;

    transition: var(--picture-text-transition);
}

    .picture-text-thumb:hover[b-jn97xx7xat] {
        border-color: var(--ui-line-strong);
        box-shadow: var(--ui-shadow-sm);
        transform: translateY(-1px);
    }

    .picture-text-thumb > img[b-jn97xx7xat] {
        max-width: 100%;
        max-height: 100%;

        display: block;

        object-fit: contain;

        border-radius: calc(var(--ui-r-xs) - 4px);
    }

.picture-text-body[b-jn97xx7xat] {
    min-width: 0;

    display: grid;
    gap: 4px;
}

.picture-text-title[b-jn97xx7xat] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .picture-text-title > strong[b-jn97xx7xat] {
        color: var(--text);

        font-size: .58rem;
        font-weight: 820;
    }

.picture-text-kind[b-jn97xx7xat] {
    padding: 2px 8px;

    border-radius: var(--ui-r-pill);

    background: var(--ui-info-soft);
    color: var(--ui-info);

    font-size: .46rem;
    font-weight: 760;
}

.picture-text-sample[b-jn97xx7xat] {
    overflow: hidden;

    color: var(--muted);

    font-size: .5rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.picture-text-foot[b-jn97xx7xat] {
    margin-top: 2px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.picture-text-status[b-jn97xx7xat] {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--text-secondary);

    font-size: .5rem;
    font-weight: 700;
}

    .picture-text-status[b-jn97xx7xat]::before {
        content: "";

        width: 7px;
        height: 7px;
        flex: none;

        border-radius: 50%;

        background: var(--ui-faint);
    }

    .picture-text-status.is-translated[b-jn97xx7xat]::before {
        background: var(--ui-success);
    }

    .picture-text-status.is-partial[b-jn97xx7xat]::before {
        background: var(--ui-warning);
    }

    .picture-text-status.is-kept[b-jn97xx7xat]::before {
        background: var(--ui-clay);
    }

.picture-text-item.is-staged .picture-text-status[b-jn97xx7xat] {
    color: var(--accent-text, var(--ui-warning));
}


/* ---- the three-way switch ---- */

.picture-text-segmented[b-jn97xx7xat] {
    padding: 3px;

    display: inline-flex;
    gap: 2px;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-pill);

    background: var(--ui-surface-sunken);
}

    .picture-text-segmented > button[b-jn97xx7xat] {
        min-height: 26px;
        padding: 0 11px;

        border: 0;
        border-radius: var(--ui-r-pill);

        background: transparent;
        color: var(--text-secondary);

        font: inherit;
        font-size: .5rem;
        font-weight: 760;
        white-space: nowrap;

        cursor: pointer;

        transition: var(--picture-text-transition);
    }

        .picture-text-segmented > button:hover:not(:disabled):not(.is-active)[b-jn97xx7xat] {
            background: var(--ui-surface-hover);
            color: var(--text);
        }

        .picture-text-segmented > button.is-active[b-jn97xx7xat] {
            background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
            color: var(--ui-on-accent);

            box-shadow: var(--ui-shadow-sm);
        }

.picture-text-chip:disabled[b-jn97xx7xat],
.picture-text-segmented > button:disabled[b-jn97xx7xat] {
    opacity: .5;
    cursor: not-allowed;
}

.picture-text-chip:focus-visible[b-jn97xx7xat],
.picture-text-segmented > button:focus-visible[b-jn97xx7xat],
.picture-text-thumb:focus-visible[b-jn97xx7xat],
.picture-text-more:focus-visible[b-jn97xx7xat] {
    outline: 2px solid var(--ui-accent-strong);
    outline-offset: 2px;
}


/* ---- show all ---- */

.picture-text-more[b-jn97xx7xat] {
    justify-self: center;

    padding: 6px 14px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r-pill);

    background: transparent;
    color: var(--text-secondary);

    font: inherit;
    font-size: .52rem;
    font-weight: 760;

    cursor: pointer;

    transition: var(--picture-text-transition);
}

    .picture-text-more:hover[b-jn97xx7xat] {
        border-style: solid;
        background: var(--ui-surface-raised);
        color: var(--text);
    }

.picture-text-more-icon[b-jn97xx7xat] {
    width: 14px;
    height: 14px;

    transition: transform var(--ui-dur-2) var(--ui-ease);
}

    .picture-text-more-icon.is-open[b-jn97xx7xat] {
        transform: rotate(180deg);
    }


/* ---- changes not applied yet ---- */

.picture-text-apply[b-jn97xx7xat] {
    position: sticky;
    bottom: 10px;
    z-index: 2;

    padding: 10px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    border: 1px solid var(--ui-accent-strong);
    border-radius: var(--ui-r-sm);

    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 80%),
        var(--ui-surface-strong);

    box-shadow: var(--ui-shadow-md);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.picture-text-apply-text[b-jn97xx7xat] {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--text);

    font-size: .54rem;
    font-weight: 760;
}

.picture-text-apply-actions[b-jn97xx7xat] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .picture-text-apply-actions .process-btn[b-jn97xx7xat] {
        min-height: 34px;
    }


@media (max-width: 540px) {

    .picture-text-item[b-jn97xx7xat] {
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
    }

    .picture-text-thumb[b-jn97xx7xat] {
        width: 76px;
        height: 56px;
    }

    .picture-text-segmented[b-jn97xx7xat],
    .picture-text-apply-actions[b-jn97xx7xat],
    .picture-text-apply-actions .process-btn[b-jn97xx7xat] {
        width: 100%;
    }

        .picture-text-segmented > button[b-jn97xx7xat] {
            flex: 1;
            padding: 0 6px;
        }
}

@media (prefers-reduced-motion: reduce) {

    .picture-text-item[b-jn97xx7xat],
    .picture-text-thumb[b-jn97xx7xat],
    .picture-text-chip[b-jn97xx7xat],
    .picture-text-more[b-jn97xx7xat],
    .picture-text-more-icon[b-jn97xx7xat],
    .picture-text-segmented > button[b-jn97xx7xat] {
        transition: none;
    }
}
/* _content/AITranslationPlatform.Web/Components/Translation/TranslationSetup.razor.rz.scp.css */
.translation-setup-page[b-4aogmbm9ue] {
    width: 100%;
    min-height: 100%;
    padding: 34px;
}

.setup-shell[b-4aogmbm9ue] {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.setup-header[b-4aogmbm9ue] {
    margin-bottom: 28px;
}

.setup-back[b-4aogmbm9ue] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 22px;
    text-decoration: none;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
}

.setup-eyebrow[b-4aogmbm9ue] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #7c5cff;
    margin-bottom: 8px;
}

.setup-header h1[b-4aogmbm9ue] {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
}

.setup-header p[b-4aogmbm9ue] {
    margin: 10px 0 0;
    color: var(--text-secondary, #64748b);
}

.setup-grid[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.setup-main[b-4aogmbm9ue] {
    display: grid;
    gap: 20px;
}

.setup-card[b-4aogmbm9ue],
.summary-sticky[b-4aogmbm9ue] {
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
}

.setup-card[b-4aogmbm9ue] {
    padding: 24px;
}

.setup-card-header[b-4aogmbm9ue] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

    .setup-card-header h2[b-4aogmbm9ue] {
        margin: 0;
        font-size: 18px;
    }

    .setup-card-header p[b-4aogmbm9ue] {
        margin: 5px 0 0;
        color: var(--text-secondary, #64748b);
        font-size: 14px;
    }

.setup-step-number[b-4aogmbm9ue] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-weight: 800;
    color: #6d4aff;
    background: rgba(109, 74, 255, .10);
}

.language-grid[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: 1fr 42px 1fr;
    gap: 12px;
    align-items: end;
}

.setup-field[b-4aogmbm9ue] {
    display: grid;
    gap: 8px;
}

    .setup-field label[b-4aogmbm9ue] {
        font-size: 13px;
        font-weight: 700;
    }

    .setup-field select[b-4aogmbm9ue] {
        width: 100%;
        min-height: 48px;
        padding: 0 13px;
        border-radius: 12px;
        border: 1px solid var(--border-color, #dbe2ea);
        background: var(--surface, #fff);
        color: inherit;
        outline: none;
    }

        .setup-field select:focus[b-4aogmbm9ue] {
            border-color: #7c5cff;
            box-shadow: 0 0 0 3px rgba(124, 92, 255, .10);
        }

.language-arrow[b-4aogmbm9ue] {
    min-height: 48px;
    display: grid;
    place-items: center;
    color: #7c5cff;
    font-size: 20px;
}

.inline-warning[b-4aogmbm9ue],
.rtl-notice[b-4aogmbm9ue] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
}

.inline-warning[b-4aogmbm9ue] {
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
}

.rtl-notice[b-4aogmbm9ue] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: rgba(14, 165, 233, .08);
}

    .rtl-notice strong[b-4aogmbm9ue] {
        color: #0284c7;
    }

.mode-grid[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mode-card[b-4aogmbm9ue],
.quality-card[b-4aogmbm9ue] {
    position: relative;
    border: 1px solid var(--border-color, #dbe2ea);
    background: transparent;
    color: inherit;
    border-radius: 14px;
    cursor: pointer;
    text-align: inherit;
    transition: .2s ease;
}

.quality-card.locked[b-4aogmbm9ue] { cursor:not-allowed; opacity:.52; filter:grayscale(.35); }
.quality-card.locked:hover[b-4aogmbm9ue] { transform:none; border-color:var(--border-color, #dbe2ea); }

.setup-package-access-notice[b-4aogmbm9ue] {
    display: grid;
    gap: 4px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(184, 124, 25, .22);
    border-radius: 12px;
    background: rgba(184, 124, 25, .08);
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.65;
}

.setup-package-access-notice strong[b-4aogmbm9ue] { color: var(--text, #172033); }

.mode-card[b-4aogmbm9ue] {
    min-height: 92px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 13px;
}

    .mode-card:hover[b-4aogmbm9ue],
    .quality-card:hover[b-4aogmbm9ue] {
        border-color: #a997ff;
        transform: translateY(-1px);
    }

    .mode-card.selected[b-4aogmbm9ue],
    .quality-card.selected[b-4aogmbm9ue] {
        border-color: #7c5cff;
        background: rgba(124, 92, 255, .055);
        box-shadow: 0 0 0 1px #7c5cff;
    }

.mode-icon[b-4aogmbm9ue] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-weight: 800;
    background: rgba(124, 92, 255, .10);
    color: #6d4aff;
}

.mode-content[b-4aogmbm9ue] {
    display: grid;
    gap: 4px;
}

    .mode-content strong[b-4aogmbm9ue] {
        font-size: 14px;
    }

    .mode-content small[b-4aogmbm9ue] {
        color: var(--text-secondary, #64748b);
        line-height: 1.5;
    }

.mode-check[b-4aogmbm9ue],
.quality-check[b-4aogmbm9ue] {
    display: none;
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #7c5cff;
    color: #fff;
    place-items: center;
    font-size: 12px;
}

.mode-check[b-4aogmbm9ue] {
    top: 10px;
    inset-inline-end: 10px;
}

.mode-card.selected .mode-check[b-4aogmbm9ue],
.quality-card.selected .quality-check[b-4aogmbm9ue] {
    display: grid;
}

.quality-grid[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.quality-card[b-4aogmbm9ue] {
    padding: 18px;
    min-height: 142px;
}

.quality-top[b-4aogmbm9ue] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.quality-card p[b-4aogmbm9ue] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    line-height: 1.65;
}

.quality-lock-note[b-4aogmbm9ue] {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(184, 124, 25, .28);
    color: #946317;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.quality-check[b-4aogmbm9ue] {
    bottom: 12px;
    inset-inline-end: 12px;
}

.recommended-badge[b-4aogmbm9ue] {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .10);
    color: #16a34a;
    font-size: 10px;
    font-weight: 800;
}

.setup-summary[b-4aogmbm9ue] {
    min-width: 0;
}

.summary-sticky[b-4aogmbm9ue] {
    position: sticky;
    top: 24px;
    padding: 22px;
}

.summary-title[b-4aogmbm9ue] {
    font-weight: 800;
    margin-bottom: 20px;
}

.summary-row[b-4aogmbm9ue] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-color, #edf0f4);
    font-size: 13px;
}

    .summary-row span[b-4aogmbm9ue] {
        color: var(--text-secondary, #64748b);
    }

    .summary-row strong[b-4aogmbm9ue] {
        text-align: end;
    }

.preservation-box[b-4aogmbm9ue] {
    margin-top: 20px;
    padding: 14px;
    border-radius: 13px;
    background: rgba(34, 197, 94, .08);
}

    .preservation-box strong[b-4aogmbm9ue] {
        color: #15803d;
        font-size: 13px;
    }

    .preservation-box p[b-4aogmbm9ue] {
        margin: 6px 0 0;
        font-size: 12px;
        color: var(--text-secondary, #64748b);
        line-height: 1.6;
    }

.create-job-button[b-4aogmbm9ue] {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 13px;
    margin-top: 18px;
    padding: 0 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #6d4aff;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

    .create-job-button:disabled[b-4aogmbm9ue] {
        opacity: .45;
        cursor: not-allowed;
    }

.setup-loading[b-4aogmbm9ue],
.setup-error[b-4aogmbm9ue],
.setup-success[b-4aogmbm9ue] {
    padding: 20px;
    border-radius: 15px;
}

.setup-loading[b-4aogmbm9ue] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.setup-error[b-4aogmbm9ue] {
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .20);
}

    .setup-error p[b-4aogmbm9ue],
    .setup-success p[b-4aogmbm9ue] {
        margin: 5px 0 0;
    }

.setup-success[b-4aogmbm9ue] {
    display: flex;
    gap: 13px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .22);
}

.success-icon[b-4aogmbm9ue] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #16a34a;
    color: #fff;
    font-weight: 900;
    flex: 0 0 auto;
}

.setup-spinner[b-4aogmbm9ue],
.button-spinner[b-4aogmbm9ue] {
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: setup-spin-b-4aogmbm9ue .7s linear infinite;
}

.setup-spinner[b-4aogmbm9ue] {
    width: 24px;
    height: 24px;
}

.button-spinner[b-4aogmbm9ue] {
    width: 17px;
    height: 17px;
}

@keyframes setup-spin-b-4aogmbm9ue {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .setup-grid[b-4aogmbm9ue] {
        grid-template-columns: 1fr;
    }

    .summary-sticky[b-4aogmbm9ue] {
        position: static;
    }
}

@media (max-width: 700px) {
    .translation-setup-page[b-4aogmbm9ue] {
        padding: 20px 14px;
    }

    .language-grid[b-4aogmbm9ue] {
        grid-template-columns: 1fr;
    }

    .language-arrow[b-4aogmbm9ue] {
        min-height: auto;
        transform: rotate(90deg);
    }

    .mode-grid[b-4aogmbm9ue],
    .quality-grid[b-4aogmbm9ue] {
        grid-template-columns: 1fr;
    }

    .setup-card[b-4aogmbm9ue] {
        padding: 18px;
    }
}

/* =====================================================
   SMART DETECTION BANNER
   ===================================================== */

.mode-detected[b-4aogmbm9ue] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #d8dcfb;
    border-radius: 14px;
    background: linear-gradient(180deg, #f6f7ff 0%, #fbfbff 100%);
}

.mode-detected > div[b-4aogmbm9ue] {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.mode-detected-icon[b-4aogmbm9ue] {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e7ebff;
    color: #4a63d8;
    font-size: 15px;
}

.mode-detected strong[b-4aogmbm9ue] {
    font-size: 13.5px;
    color: #26304a;
}

.mode-detected small[b-4aogmbm9ue] {
    font-size: 11.5px;
    line-height: 1.7;
    color: #77819a;
}

.mode-detected-reset[b-4aogmbm9ue] {
    flex: none;
    align-self: center;
    border: 1px solid #d8dcfb;
    border-radius: 9px;
    background: #fff;
    color: #4a63d8;
    padding: 8px 12px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.mode-detected-reset:hover[b-4aogmbm9ue] {
    background: #f2f4ff;
}

[data-theme="dark"] .mode-detected[b-4aogmbm9ue] {
    border-color: #2c3556;
    background: #161c2e;
}

[data-theme="dark"] .mode-detected strong[b-4aogmbm9ue] {
    color: #dfe6f6;
}

[data-theme="dark"] .mode-detected small[b-4aogmbm9ue] {
    color: #8b98b1;
}

[data-theme="dark"] .mode-detected-icon[b-4aogmbm9ue] {
    background: #1e2745;
    color: #8ba3f7;
}

[data-theme="dark"] .mode-detected-reset[b-4aogmbm9ue] {
    .analysis-smart-merged-card background: #101623;
    border-color: #2c3556;
    color: #8ba3f7;
}

@media (max-width: 620px) {
    .mode-detected[b-4aogmbm9ue] {
        flex-wrap: wrap;
    }

    .mode-detected-reset[b-4aogmbm9ue] {
        width: 100%;
    }
}


/* TRANSLATION SETUP STAGE 3 PREMIUM V1 - START */

.translation-setup-page[b-4aogmbm9ue]{width:100%;min-height:100%;padding:0;color:var(--text)}
.setup-shell[b-4aogmbm9ue]{width:min(1480px,100%);margin:0 auto;display:grid;gap:18px}

/* HERO */
.setup-header[b-4aogmbm9ue]{min-height:220px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,500px);grid-template-rows:auto auto auto 1fr;align-items:start;column-gap:34px;margin:0;padding:28px 32px;overflow:hidden;border:1px solid var(--ui-line);border-radius:var(--ui-r-xl);background:radial-gradient(115% 145% at 8% -18%,var(--ui-bloom-warm),transparent 48%),radial-gradient(85% 115% at 96% 118%,var(--ui-bloom-cool),transparent 56%),linear-gradient(135deg,var(--ui-surface-strong),var(--ui-surface));box-shadow:var(--ui-shadow-md);animation:ui-card-in .62s var(--ui-ease-out) .04s backwards}
.translation-setup-page[dir="rtl"] .setup-header[b-4aogmbm9ue]{background:radial-gradient(115% 145% at 92% -18%,var(--ui-bloom-warm),transparent 48%),radial-gradient(85% 115% at 4% 118%,var(--ui-bloom-cool),transparent 56%),linear-gradient(225deg,var(--ui-surface-strong),var(--ui-surface))}
.setup-header[b-4aogmbm9ue]::before,.setup-header[b-4aogmbm9ue]::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.setup-header[b-4aogmbm9ue]::before{width:280px;height:280px;inset-block-start:-178px;inset-inline-end:-92px;border:42px solid var(--ui-accent-soft);opacity:.72}
.setup-header[b-4aogmbm9ue]::after{width:150px;height:150px;inset-block-end:-98px;inset-inline-start:-42px;border:26px solid var(--ui-line-strong);opacity:.68}
.setup-back[b-4aogmbm9ue],.setup-eyebrow[b-4aogmbm9ue],.setup-header>h1[b-4aogmbm9ue],.setup-header>p[b-4aogmbm9ue]{position:relative;z-index:3;grid-column:1}
.setup-back[b-4aogmbm9ue]{width:max-content;min-height:33px;display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:0 11px;border:1px solid var(--ui-line);border-radius:var(--ui-r-pill);background:var(--ui-surface-raised);color:var(--text-secondary);text-decoration:none;font-size:.60rem;font-weight:760;transition:var(--ui-t)}
.setup-back:hover[b-4aogmbm9ue]{transform:translateY(-1px);border-color:var(--ui-accent-strong);color:var(--ui-warning);box-shadow:var(--ui-shadow-sm)}
.translation-setup-page[dir="rtl"] .setup-back>span[b-4aogmbm9ue]{transform:rotate(180deg)}
.setup-eyebrow[b-4aogmbm9ue]{width:max-content;display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;padding:6px 11px;border:1px solid rgba(226,175,46,.30);border-radius:var(--ui-r-pill);background:var(--ui-surface-raised);color:var(--accent-text);font-size:.61rem;font-weight:850}
.setup-eyebrow[b-4aogmbm9ue]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ui-accent-strong);animation:ui-pulse 2.4s var(--ui-ease) infinite}
.setup-header h1[b-4aogmbm9ue]{margin:0 0 9px;color:var(--text);font-size:clamp(1.8rem,2.4vw,2.65rem);font-weight:830;line-height:1.22}
.setup-header>p[b-4aogmbm9ue]{max-width:700px;margin:0;color:var(--text-secondary);font-size:.82rem;line-height:1.9}
.setup-header[b-4aogmbm9ue]  .translation-workflow-progress{grid-column:2;grid-row:1/5;width:100%;max-width:500px;align-self:center;justify-self:stretch;margin:0;position:relative;z-index:3}

/* MAIN GRID */
.setup-grid[b-4aogmbm9ue]{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.setup-main[b-4aogmbm9ue]{min-width:0;display:grid;gap:14px}
.setup-card[b-4aogmbm9ue],.summary-sticky[b-4aogmbm9ue]{min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-r-lg);background:var(--surface);box-shadow:var(--ui-shadow-sm)}
.setup-card[b-4aogmbm9ue]{padding:19px;transition:var(--ui-t)}
.setup-card:hover[b-4aogmbm9ue]{border-color:var(--ui-line-strong);box-shadow:var(--ui-shadow-md)}
.setup-card-header[b-4aogmbm9ue]{display:flex;align-items:flex-start;gap:11px;margin-bottom:15px}
.setup-card-header h2[b-4aogmbm9ue]{margin:0 0 3px;color:var(--text);font-size:.88rem;font-weight:820}
.setup-card-header p[b-4aogmbm9ue]{margin:0;color:var(--muted);font-size:.62rem;line-height:1.65}
.setup-step-number[b-4aogmbm9ue]{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid rgba(226,175,46,.22);border-radius:var(--ui-r-xs);background:var(--ui-accent-soft);color:var(--ui-warning);font-size:.61rem;font-weight:900}

/* LANGUAGE + FIELDS */
.language-grid[b-4aogmbm9ue]{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:10px;align-items:end}
.setup-field[b-4aogmbm9ue]{min-width:0;display:grid;gap:7px;color:var(--text)}
.setup-field>label[b-4aogmbm9ue],.setup-field>span:first-child[b-4aogmbm9ue]{color:var(--text-secondary);font-size:.60rem;font-weight:780}
.setup-field select[b-4aogmbm9ue]{width:100%;min-height:48px;padding:0 13px;border:1px solid var(--ui-line);border-radius:var(--ui-r-sm);outline:0;background:var(--ui-surface-strong);color:var(--text);font:inherit;font-size:.68rem;transition:var(--ui-t)}
.setup-field select:hover[b-4aogmbm9ue]{border-color:var(--ui-line-strong)}
.setup-field select:focus[b-4aogmbm9ue]{border-color:var(--ui-accent-strong);box-shadow:0 0 0 4px var(--ui-accent-soft)}
.language-arrow[b-4aogmbm9ue]{width:36px;height:36px;display:grid;place-items:center;align-self:end;margin-bottom:6px;border:1px solid var(--ui-line);border-radius:50%;background:var(--ui-surface-raised);color:var(--ui-warning);font-size:1rem;box-shadow:var(--ui-shadow-sm)}
.inline-warning[b-4aogmbm9ue],.rtl-notice[b-4aogmbm9ue]{margin-top:11px;padding:10px 12px;border-radius:var(--ui-r-sm);font-size:.59rem;line-height:1.7}
.inline-warning[b-4aogmbm9ue]{border:1px solid rgba(157,66,49,.20);background:var(--ui-danger-tint);color:var(--ui-danger)}
.rtl-notice[b-4aogmbm9ue]{display:flex;gap:9px;border:1px solid var(--ui-line);background:var(--ui-surface-sunken);color:var(--text-secondary)}
.rtl-notice strong[b-4aogmbm9ue]{padding:3px 6px;border-radius:7px;background:var(--ui-accent-soft);color:var(--ui-warning);font-size:.56rem}

/* DETECTED MODE */
.mode-detected[b-4aogmbm9ue]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:12px;padding:11px 12px;border:1px solid rgba(226,175,46,.22);border-radius:var(--ui-r-sm);background:linear-gradient(135deg,var(--ui-accent-tint),transparent 68%),var(--ui-surface-sunken)}
.mode-detected-icon[b-4aogmbm9ue]{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--ui-r-xs);background:var(--ui-accent-soft);color:var(--ui-warning)}
.mode-detected strong[b-4aogmbm9ue]{display:block;color:var(--text);font-size:.62rem;line-height:1.55}
.mode-detected small[b-4aogmbm9ue]{display:block;margin-top:3px;color:var(--muted);font-size:.54rem;line-height:1.55}
.mode-detected-reset[b-4aogmbm9ue]{min-height:33px;padding:0 9px;border:1px solid var(--ui-line);border-radius:var(--ui-r-pill);background:var(--ui-surface-raised);color:var(--text-secondary);font:inherit;font-size:.54rem;font-weight:760;cursor:pointer}

/* MODE */
.mode-grid[b-4aogmbm9ue]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mode-card[b-4aogmbm9ue]{min-width:0;min-height:88px;position:relative;display:flex;align-items:center;gap:11px;padding:13px;overflow:hidden;border:1px solid var(--ui-line);border-radius:var(--ui-r-md);background:linear-gradient(155deg,var(--ui-accent-tint),transparent 74%),var(--ui-surface-sunken);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:var(--ui-t)}
.mode-card:hover[b-4aogmbm9ue]{transform:translateY(-2px);border-color:var(--border-accent);box-shadow:var(--ui-shadow-sm)}
.mode-card.selected[b-4aogmbm9ue]{border-color:var(--ui-accent-strong);background:linear-gradient(145deg,var(--ui-accent-tint),transparent 68%),var(--ui-surface-strong);box-shadow:0 0 0 1px rgba(226,175,46,.16),var(--ui-shadow-sm)}
.mode-icon[b-4aogmbm9ue]{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid var(--ui-line);border-radius:var(--ui-r-sm);background:var(--ui-surface-raised);color:var(--ui-ink-2);font-size:.78rem;font-weight:900}
.mode-card.selected .mode-icon[b-4aogmbm9ue]{border-color:transparent;background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-strong));color:var(--ui-on-accent);box-shadow:var(--ui-shadow-accent)}
.mode-content[b-4aogmbm9ue]{min-width:0;flex:1;display:grid;gap:3px}
.mode-content strong[b-4aogmbm9ue]{color:var(--text);font-size:.66rem;font-weight:820}
.mode-content small[b-4aogmbm9ue]{color:var(--muted);font-size:.54rem;line-height:1.55}
.mode-check[b-4aogmbm9ue],.quality-check[b-4aogmbm9ue]{width:21px;height:21px;position:absolute;display:none;place-items:center;border-radius:50%;background:var(--ui-accent);color:var(--ui-on-accent);font-size:.55rem;font-weight:900;box-shadow:0 0 0 4px var(--ui-accent-soft)}
.mode-check[b-4aogmbm9ue]{inset-block-start:9px;inset-inline-end:9px}
.mode-card.selected .mode-check[b-4aogmbm9ue],.quality-card.selected .quality-check[b-4aogmbm9ue]{display:grid}

/* PACKAGE NOTICE */
.setup-package-access-notice[b-4aogmbm9ue]{display:grid;gap:3px;margin-top:11px;padding:10px 12px;border:1px solid var(--ui-warning-soft);border-radius:var(--ui-r-sm);background:var(--ui-warning-tint);color:var(--text-secondary);font-size:.56rem;line-height:1.65}
.setup-package-access-notice strong[b-4aogmbm9ue]{color:var(--text)}

/* QUALITY */
.quality-grid[b-4aogmbm9ue]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quality-card[b-4aogmbm9ue]{min-width:0;min-height:126px;position:relative;padding:14px;overflow:hidden;border:1px solid var(--ui-line);border-radius:var(--ui-r-md);background:linear-gradient(155deg,var(--ui-accent-tint),transparent 72%),var(--ui-surface-sunken);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:var(--ui-t)}
.quality-card:hover[b-4aogmbm9ue]{transform:translateY(-2px);border-color:var(--border-accent);box-shadow:var(--ui-shadow-sm)}
.quality-card.selected[b-4aogmbm9ue]{border-color:var(--ui-accent-strong);background:linear-gradient(145deg,var(--ui-accent-tint),transparent 68%),var(--ui-surface-strong);box-shadow:0 0 0 1px rgba(226,175,46,.16),var(--ui-shadow-sm)}
.quality-card.locked[b-4aogmbm9ue]{cursor:not-allowed;opacity:.48;filter:grayscale(.32)}
.quality-top[b-4aogmbm9ue]{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:9px}
.quality-top strong[b-4aogmbm9ue]{color:var(--text);font-size:.68rem;font-weight:830}
.quality-card p[b-4aogmbm9ue]{margin:0;color:var(--muted);font-size:.56rem;line-height:1.65}
.recommended-badge[b-4aogmbm9ue]{padding:4px 7px;border:1px solid rgba(63,106,57,.16);border-radius:var(--ui-r-pill);background:var(--ui-success-tint);color:var(--ui-success);font-size:.49rem;font-weight:850}
.quality-lock-note[b-4aogmbm9ue]{display:block;margin-top:9px;padding-top:7px;border-top:1px dashed var(--ui-line-strong);color:var(--ui-warning);font-size:.51rem;font-weight:760;line-height:1.45}
.quality-check[b-4aogmbm9ue]{inset-inline-end:11px;inset-block-end:11px}

/* MEMORY / GLOSSARY */
.setup-card .setup-field + .setup-field[b-4aogmbm9ue]{margin-top:13px}
.setup-card label.setup-field:has(input[type="checkbox"])[b-4aogmbm9ue]{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:start!important;gap:10px!important;margin-top:13px!important;padding:12px 13px;border:1px solid var(--ui-line);border-radius:var(--ui-r-sm);background:var(--ui-surface-sunken);cursor:pointer}
.setup-card input[type="checkbox"][b-4aogmbm9ue]{width:18px;height:18px;margin-top:1px;accent-color:var(--ui-accent-strong)}
.setup-card label.setup-field:has(input[type="checkbox"]) strong[b-4aogmbm9ue]{color:var(--text);font-size:.62rem}
.setup-card label.setup-field:has(input[type="checkbox"]) small[b-4aogmbm9ue]{color:var(--muted);font-size:.54rem;line-height:1.6}

/* SUMMARY */
.setup-summary[b-4aogmbm9ue]{min-width:0}
.summary-sticky[b-4aogmbm9ue]{position:sticky;top:10px;padding:17px;overflow:hidden;background:radial-gradient(105% 85% at 100% 0%,var(--ui-accent-tint),transparent 52%),var(--surface)}
.summary-sticky[b-4aogmbm9ue]::after{content:"";position:absolute;width:120px;height:120px;inset-block-start:-76px;inset-inline-end:-42px;border-radius:50%;background:var(--ui-accent);opacity:.06;pointer-events:none}
.summary-title[b-4aogmbm9ue]{position:relative;z-index:1;margin-bottom:10px;padding-bottom:12px;border-bottom:1px solid var(--ui-line);color:var(--text);font-size:.76rem;font-weight:850}
.summary-row[b-4aogmbm9ue]{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 1px;border-bottom:1px solid var(--ui-line);font-size:.59rem}
.summary-row span[b-4aogmbm9ue]{color:var(--muted)}.summary-row strong[b-4aogmbm9ue]{color:var(--text);font-size:.61rem;font-weight:800;text-align:end}
.preservation-box[b-4aogmbm9ue]{position:relative;z-index:1;margin-top:12px;padding:11px;border:1px solid rgba(63,106,57,.18);border-radius:var(--ui-r-sm);background:var(--ui-success-tint)}
.preservation-box strong[b-4aogmbm9ue]{display:block;color:var(--ui-success);font-size:.59rem}.preservation-box p[b-4aogmbm9ue]{margin:4px 0 0;color:var(--text-secondary);font-size:.53rem;line-height:1.6}
.create-job-button[b-4aogmbm9ue]{width:100%;min-height:52px;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;padding:9px 14px;border:1px solid transparent;border-radius:var(--ui-r-sm);background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-strong));color:var(--ui-on-accent);font:inherit;font-size:.62rem;font-weight:850;cursor:pointer;box-shadow:var(--ui-shadow-accent);transition:var(--ui-t)}
.create-job-button:hover:not(:disabled)[b-4aogmbm9ue]{transform:translateY(-2px);box-shadow:0 16px 34px rgba(226,175,46,.30)}
.create-job-button:disabled[b-4aogmbm9ue]{opacity:.50;cursor:not-allowed}

/* STATES */
.setup-loading[b-4aogmbm9ue],.setup-error[b-4aogmbm9ue],.setup-success[b-4aogmbm9ue]{padding:16px;border-radius:var(--ui-r-md);box-shadow:var(--ui-shadow-sm)}
.setup-loading[b-4aogmbm9ue]{display:flex;align-items:center;gap:10px;border:1px solid var(--ui-line);background:var(--surface);color:var(--text-secondary)}
.setup-error[b-4aogmbm9ue]{border:1px solid rgba(157,66,49,.20);background:var(--ui-danger-tint);color:var(--ui-danger)}
.setup-success[b-4aogmbm9ue]{display:flex;align-items:flex-start;gap:11px;border:1px solid rgba(63,106,57,.20);background:var(--ui-success-tint)}
.success-icon[b-4aogmbm9ue]{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:var(--ui-success);color:#fff;font-weight:900}
.setup-spinner[b-4aogmbm9ue],.button-spinner[b-4aogmbm9ue]{border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:setup-spin-b-4aogmbm9ue .7s linear infinite}
.setup-spinner[b-4aogmbm9ue]{width:22px;height:22px}.button-spinner[b-4aogmbm9ue]{width:16px;height:16px}
@keyframes setup-spin-b-4aogmbm9ue{to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:1280px){.setup-header[b-4aogmbm9ue]{min-height:0;grid-template-columns:1fr;grid-template-rows:auto;padding:27px}.setup-back[b-4aogmbm9ue],.setup-eyebrow[b-4aogmbm9ue],.setup-header>h1[b-4aogmbm9ue],.setup-header>p[b-4aogmbm9ue],.setup-header[b-4aogmbm9ue]  .translation-workflow-progress{grid-column:1;grid-row:auto}.setup-header[b-4aogmbm9ue]  .translation-workflow-progress{width:100%;max-width:none;margin-top:16px}}
@media(max-width:1020px){.setup-grid[b-4aogmbm9ue]{grid-template-columns:1fr}.summary-sticky[b-4aogmbm9ue]{position:static}}
@media(max-width:760px){.setup-header[b-4aogmbm9ue]{padding:24px 20px;border-radius:var(--ui-r-lg)}.language-grid[b-4aogmbm9ue]{grid-template-columns:1fr}.language-arrow[b-4aogmbm9ue]{justify-self:center;margin:0;transform:rotate(90deg)}.mode-grid[b-4aogmbm9ue],.quality-grid[b-4aogmbm9ue]{grid-template-columns:1fr}.setup-card[b-4aogmbm9ue]{padding:16px}.mode-detected[b-4aogmbm9ue]{grid-template-columns:auto minmax(0,1fr)}.mode-detected-reset[b-4aogmbm9ue]{grid-column:1/-1;justify-self:start}}
@media(max-width:540px){.setup-shell[b-4aogmbm9ue]{gap:14px}.setup-header[b-4aogmbm9ue]{padding:22px 18px}.setup-header h1[b-4aogmbm9ue]{font-size:1.65rem}.setup-card[b-4aogmbm9ue],.summary-sticky[b-4aogmbm9ue]{border-radius:var(--ui-r-md)}}

/* TRANSLATION SETUP STAGE 3 PREMIUM V1 - END */


/* TRANSLATION SETUP COMPACT REFERENCE CARDS V2 - START */

/*
 * Goal:
 * - bring Stage 3 selection cards visually closer to Stage 2 reference cards
 * - more compact cards
 * - soft yellow -> white gradient
 * - 1px light-gray border
 * - plain brown icon on the right with one vertical divider
 * - title + helper packed tighter, less empty space
 */

.mode-grid[b-4aogmbm9ue],
.quality-grid[b-4aogmbm9ue] {
    gap: 8px;
}

.mode-card[b-4aogmbm9ue],
.quality-card[b-4aogmbm9ue] {
    position: relative;
    overflow: hidden;

    padding-block: 9px;
    padding-inline-start: 14px;
    padding-inline-end: 78px;

    border: 1px solid var(--ui-line);
    border-radius: 16px;

    background: linear-gradient(
        90deg,
        #f6e6b7 0%,
        #fbf2d8 48%,
        #ffffff 100%
    );

    box-shadow:
        0 2px 8px rgba(16, 24, 40, .05),
        inset 0 1px 0 rgba(255,255,255,.50);
}

.mode-card[b-4aogmbm9ue] {
    min-height: 72px;
    align-items: stretch;
    gap: 0;
}

.quality-card[b-4aogmbm9ue] {
    min-height: 108px;
}

.mode-card[b-4aogmbm9ue]::after,
.quality-card[b-4aogmbm9ue]::after {
    content: "";
    position: absolute;
    inset-block: 13px;
    inset-inline-end: 66px;
    width: 1px;
    background: var(--ui-line);
    pointer-events: none;
}

.mode-icon[b-4aogmbm9ue] {
    width: 40px;
    height: 40px;
    flex: none;

    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 0;
    background: transparent;

    box-shadow: none;

    color: #7f7357;
    font-size: 1.2rem;
    font-weight: 900;
}

.mode-card.selected .mode-icon[b-4aogmbm9ue] {
    border: 0;
    background: transparent;
    color: #7f7357;
    box-shadow: none;
}

.mode-content[b-4aogmbm9ue] {
    min-width: 0;
    flex: 1;

    display: grid;
    grid-template-rows: 1fr auto;
    align-content: center;
    gap: 2px;
}

.mode-content strong[b-4aogmbm9ue] {
    margin: 0;

    color: var(--text);

    font-size: .72rem;
    font-weight: 820;
    line-height: 1.35;
}

.mode-content small[b-4aogmbm9ue] {
    margin: 0;

    color: var(--muted);

    font-size: .56rem;
    line-height: 1.55;
}

.mode-card.selected[b-4aogmbm9ue],
.quality-card.selected[b-4aogmbm9ue] {
    border-color: rgba(226, 175, 46, .42);

    background: linear-gradient(
        90deg,
        #f5e1a2 0%,
        #faedc5 48%,
        #ffffff 100%
    );

    box-shadow:
        0 0 0 1px rgba(226, 175, 46, .10),
        0 4px 12px rgba(16, 24, 40, .07),
        inset 0 1px 0 rgba(255,255,255,.52);
}

.mode-card.selected .mode-content strong[b-4aogmbm9ue],
.quality-card.selected .quality-top strong[b-4aogmbm9ue] {
    color: #eea000;
}

.mode-card:hover[b-4aogmbm9ue],
.quality-card:hover[b-4aogmbm9ue] {
    transform: translateY(-1px);
    border-color: var(--ui-line-strong);
    box-shadow:
        0 4px 12px rgba(16, 24, 40, .07),
        inset 0 1px 0 rgba(255,255,255,.52);
}

.mode-check[b-4aogmbm9ue],
.quality-check[b-4aogmbm9ue] {
    width: 18px;
    height: 18px;

    inset-block-start: 9px;
    inset-inline-start: 9px;
    inset-inline-end: auto;
    inset-block-end: auto;

    box-shadow: 0 0 0 3px var(--ui-accent-soft);
    font-size: .50rem;
}

.quality-top[b-4aogmbm9ue] {
    margin-bottom: 7px;
    padding-inline-end: 0;
}

.quality-top strong[b-4aogmbm9ue] {
    color: var(--text);
    font-size: .72rem;
    font-weight: 820;
}

.quality-card p[b-4aogmbm9ue] {
    font-size: .55rem;
    line-height: 1.58;
}

.recommended-badge[b-4aogmbm9ue] {
    padding: 4px 6px;
    font-size: .47rem;
}

.quality-lock-note[b-4aogmbm9ue] {
    margin-top: 7px;
    padding-top: 6px;
    font-size: .50rem;
}

.setup-card[b-4aogmbm9ue] {
    padding: 16px;
}

.setup-card-header[b-4aogmbm9ue] {
    margin-bottom: 12px;
}

@media (max-width: 760px) {
    .mode-card[b-4aogmbm9ue] {
        min-height: 68px;
        padding-inline-end: 70px;
        padding-inline-start: 12px;
    }

    .quality-card[b-4aogmbm9ue] {
        min-height: 98px;
        padding-inline-end: 70px;
        padding-inline-start: 12px;
    }

    .mode-card[b-4aogmbm9ue]::after,
    .quality-card[b-4aogmbm9ue]::after {
        inset-inline-end: 59px;
        inset-block: 11px;
    }

    .mode-icon[b-4aogmbm9ue] {
        width: 34px;
        height: 34px;
        inset-inline-end: 13px;
        font-size: 1.05rem;
    }

    .mode-content strong[b-4aogmbm9ue],
    .quality-top strong[b-4aogmbm9ue] {
        font-size: .68rem;
    }
}

/* TRANSLATION SETUP COMPACT REFERENCE CARDS V2 - END */


/* TRANSLATION SETUP MODE CARD FIX V3 - START */

/*
 * User-requested refinement:
 * 1) ONLY translation-type cards get the Stage-2-like card treatment tweaks.
 * 2) Quality cards return to their previous premium style.
 * 3) Mode-card icon goes to the RIGHT.
 * 4) Mode-card checkmark goes to the LEFT.
 * 5) Title and helper text become closer together.
 * 6) Both title and helper text become slightly larger.
 */

/* -----------------------------------------
   TYPE / MODE CARDS
   ----------------------------------------- */

.mode-grid[b-4aogmbm9ue] {
    gap: 8px;
}

.mode-card[b-4aogmbm9ue] {
    min-width: 0;
    min-height: 72px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding-block: 10px;
    padding-inline-start: 16px;
    padding-inline-end: 80px;
    overflow: hidden;

    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;

    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: linear-gradient(90deg, #fff6dc 0%, #fff9e7 48%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05), inset 0 1px 0 rgba(255, 255, 255, .50);
    transition: var(--ui-t);
}

.mode-card[b-4aogmbm9ue]::after {
    content: "";
    position: absolute;
    inset-block: 13px;
    inset-inline-end: 66px;
    width: 1px;
    background: var(--ui-line);
    pointer-events: none;
}

.mode-card:hover[b-4aogmbm9ue] {
    transform: translateY(-1px);
    border-color: var(--ui-line-strong);
    box-shadow:
        0 4px 12px rgba(16, 24, 40, .07),
        inset 0 1px 0 rgba(255,255,255,.52);
}

.mode-card.selected[b-4aogmbm9ue] {
    border-color: rgba(226, 175, 46, .42);

    background: linear-gradient(
        90deg,
        #f5e1a2 0%,
        #faedc5 48%,
        #ffffff 100%
    );

    box-shadow:
        0 0 0 1px rgba(226, 175, 46, .10),
        0 4px 12px rgba(16, 24, 40, .07),
        inset 0 1px 0 rgba(255,255,255,.52);
}

/* icon on the RIGHT */
.mode-icon[b-4aogmbm9ue] {
    width: 40px;
    height: 40px;
    flex: none;

    position: absolute;
    inset-inline-end: 14px;
    inset-inline-start: auto;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    color: #7f7357;
    font-size: 1.2rem;
    font-weight: 900;
}

.mode-card.selected .mode-icon[b-4aogmbm9ue] {
    border: 0;
    background: transparent;
    color: #7f7357;
    box-shadow: none;
}

/* checkmark on the LEFT */
.mode-check[b-4aogmbm9ue] {
    width: 18px;
    height: 18px;

    position: absolute;

    inset-inline-start: 9px;
    inset-inline-end: auto;
    inset-block-start: 9px;
    inset-block-end: auto;

    box-shadow: 0 0 0 3px var(--ui-accent-soft);
    font-size: .50rem;
}

/* copy tighter + slightly larger */
.mode-content[b-4aogmbm9ue] {
    min-width: 0;
    flex: 1;

    display: grid;
    align-content: center;
    gap: 1px;
}

.mode-content strong[b-4aogmbm9ue] {
    margin: 0;

    color: var(--text);

    font-size: .76rem;
    font-weight: 830;
    line-height: 1.30;
}

.mode-content small[b-4aogmbm9ue] {
    margin: 0;

    color: var(--muted);

    font-size: .59rem;
    line-height: 1.45;
}

.mode-card.selected .mode-content strong[b-4aogmbm9ue] {
    color: #eea000;
}

/* -----------------------------------------
   QUALITY CARDS — RESTORE PREVIOUS PREMIUM STYLE
   ----------------------------------------- */

.quality-grid[b-4aogmbm9ue] {
    gap: 10px;
}

.quality-card[b-4aogmbm9ue] {
    min-width: 0;
    min-height: 126px;

    position: relative;

    padding: 14px;

    overflow: hidden;

    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);

    background:
        linear-gradient(155deg, var(--ui-accent-tint), transparent 72%),
        var(--ui-surface-sunken);

    color: var(--text);

    font: inherit;
    text-align: start;
    cursor: pointer;

    box-shadow: none;
    transition: var(--ui-t);
}

.quality-card[b-4aogmbm9ue]::after {
    display: none !important;
}

.quality-card:hover[b-4aogmbm9ue] {
    transform: translateY(-2px);
    border-color: var(--border-accent);
    box-shadow: var(--ui-shadow-sm);
}

.quality-card.selected[b-4aogmbm9ue] {
    border-color: var(--ui-accent-strong);

    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 68%),
        var(--ui-surface-strong);

    box-shadow:
        0 0 0 1px rgba(226, 175, 46, .16),
        var(--ui-shadow-sm);
}

.quality-card.selected .quality-top strong[b-4aogmbm9ue] {
    color: var(--text);
}

.quality-card.locked[b-4aogmbm9ue] {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.32);
}

.quality-card.locked:hover[b-4aogmbm9ue] {
    transform: none;
    border-color: var(--ui-line);
    box-shadow: none;
}

.quality-top[b-4aogmbm9ue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;

    margin-bottom: 9px;
    padding-inline-end: 0;
}

.quality-top strong[b-4aogmbm9ue] {
    color: var(--text);
    font-size: .68rem;
    font-weight: 830;
}

.quality-card p[b-4aogmbm9ue] {
    margin: 0;

    color: var(--muted);
    font-size: .56rem;
    line-height: 1.65;
}

.recommended-badge[b-4aogmbm9ue] {
    padding: 4px 7px;

    border: 1px solid rgba(63, 106, 57, .16);
    border-radius: var(--ui-r-pill);

    background: var(--ui-success-tint);
    color: var(--ui-success);

    font-size: .49rem;
    font-weight: 850;
}

.quality-lock-note[b-4aogmbm9ue] {
    display: block;

    margin-top: 9px;
    padding-top: 7px;

    border-top: 1px dashed var(--ui-line-strong);

    color: var(--ui-warning);
    font-size: .51rem;
    font-weight: 760;
    line-height: 1.45;
}

.quality-check[b-4aogmbm9ue] {
    width: 21px;
    height: 21px;

    inset-inline-end: 11px;
    inset-inline-start: auto;
    inset-block-end: 11px;
    inset-block-start: auto;

    box-shadow: 0 0 0 4px var(--ui-accent-soft);
    font-size: .55rem;
}

/* section spacing */
.setup-card[b-4aogmbm9ue] {
    padding: 16px;
}

.setup-card-header[b-4aogmbm9ue] {
    margin-bottom: 12px;
}

@media (max-width: 760px) {
    .mode-card[b-4aogmbm9ue] {
        min-height: 68px;
        padding-inline-start: 14px;
        padding-inline-end: 72px;
    }

    .mode-card[b-4aogmbm9ue]::after {
        inset-inline-end: 59px;
        inset-block: 11px;
    }

    .mode-icon[b-4aogmbm9ue] {
        width: 34px;
        height: 34px;
        inset-inline-end: 13px;
        font-size: 1.05rem;
    }

    .mode-content strong[b-4aogmbm9ue] {
        font-size: .72rem;
    }

    .mode-content small[b-4aogmbm9ue] {
        font-size: .57rem;
    }

    .quality-card[b-4aogmbm9ue] {
        min-height: 118px;
    }
}

/* TRANSLATION SETUP MODE CARD FIX V3 - END */



/* =========================================================
   TRANSLATION MODE CARDS — PHYSICAL POSITION FIX
   ========================================================= */

.mode-card[b-4aogmbm9ue] {
    position: relative;
    /* فضای آیکون از سمت راست */
    padding-right: 80px !important;
    padding-left: 16px !important;
}


    /* آیکون — حتماً سمت راست */
    .mode-card .mode-icon[b-4aogmbm9ue] {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        transform: translateY(-50%) !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #7f7357 !important;
        z-index: 2;
    }


    /* خط جداکننده — سمت چپ آیکون */
    .mode-card[b-4aogmbm9ue]::after {
        content: "";
        position: absolute !important;
        top: 13px !important;
        bottom: 13px !important;
        right: 66px !important;
        left: auto !important;
        width: 1px !important;
        background: var(--ui-line) !important;
        pointer-events: none;
    }


    /* چک‌مارک — حتماً سمت چپ */
    .mode-card .mode-check[b-4aogmbm9ue] {
        position: absolute !important;
        top: 9px !important;
        left: 9px !important;
        right: auto !important;
        bottom: auto !important;
        width: 18px !important;
        height: 18px !important;
        z-index: 4;
    }


    /* متن کارت */
    .mode-card .mode-content[b-4aogmbm9ue] {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        text-align: right !important;
        direction: rtl !important;
    }


        /* تیتر */
        .mode-card .mode-content strong[b-4aogmbm9ue] {
            margin: 0 !important;
            font-size: .96rem !important;
            font-weight: 830 !important;
            line-height: 1.3 !important;
            text-align: right !important;
        }


        /* توضیح */
        .mode-card .mode-content small[b-4aogmbm9ue] {
            margin: 0 !important;
            font-size: .79rem !important;
            line-height: 1.4 !important;
            text-align: right !important;
        }


    /* حالت انتخاب‌شده */
    .mode-card.selected .mode-icon[b-4aogmbm9ue] {
        right: 14px !important;
        left: auto !important;
        background: transparent !important;
        color: #7f7357 !important;
    }


/* موبایل */
@media (max-width: 760px) {

    .mode-card[b-4aogmbm9ue] {
        padding-right: 72px !important;
        padding-left: 14px !important;
    }

        .mode-card .mode-icon[b-4aogmbm9ue] {
            right: 13px !important;
            left: auto !important;
            width: 34px !important;
            height: 34px !important;
        }

        .mode-card[b-4aogmbm9ue]::after {
            right: 59px !important;
            left: auto !important;
        }

        .mode-card .mode-check[b-4aogmbm9ue] {
            left: 8px !important;
            right: auto !important;
        }
}


/* TRANSLATION SETUP TOP LANGUAGE TOOLS V4.1 - START */

.setup-top-grid[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .95fr);
    gap: 14px;
    align-items: start;
}

.setup-top-column[b-4aogmbm9ue] {
    min-width: 0;
}

.compact-language-grid[b-4aogmbm9ue] {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.compact-field[b-4aogmbm9ue] {
    gap: 6px;
}

.compact-field > label[b-4aogmbm9ue],
.compact-field > span:first-child[b-4aogmbm9ue] {
    font-size: .58rem;
    font-weight: 780;
    color: var(--text-secondary);
}

.compact-field select[b-4aogmbm9ue] {
    min-height: 44px;
    padding-inline: 12px;
    border-radius: 14px;
    background: var(--ui-surface-strong);
    font-size: .67rem;
}

.compact-language-arrow[b-4aogmbm9ue] {
    width: 38px;
    height: 38px;
    margin-bottom: 3px;
    border-radius: 50%;
}

.compact-tools-card[b-4aogmbm9ue] {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background:
        linear-gradient(145deg, var(--ui-accent-tint), transparent 68%),
        var(--ui-surface-sunken);
    box-shadow: var(--ui-shadow-sm);
}

.compact-tools-header[b-4aogmbm9ue] {
    display: grid;
    gap: 3px;
}

.compact-tools-header strong[b-4aogmbm9ue] {
    color: var(--text);
    font-size: .69rem;
    font-weight: 840;
}

.compact-tools-header span[b-4aogmbm9ue] {
    color: var(--muted);
    font-size: .55rem;
    line-height: 1.6;
}

.toggle-stack[b-4aogmbm9ue] {
    display: grid;
    gap: 10px;
}

.toggle-item[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: var(--surface);
}

.toggle-copy[b-4aogmbm9ue] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.toggle-copy strong[b-4aogmbm9ue] {
    color: var(--text);
    font-size: .65rem;
    font-weight: 820;
}

.toggle-copy small[b-4aogmbm9ue] {
    color: var(--muted);
    font-size: .54rem;
    line-height: 1.55;
}

.mini-switch[b-4aogmbm9ue] {
    position: relative;
    width: 66px;
    height: 38px;
    flex: none;
    display: inline-block;
}

.mini-switch input[b-4aogmbm9ue] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.mini-switch-track[b-4aogmbm9ue] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #b8c0c2;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 8px 16px rgba(15, 23, 42, .08);
    transition: background var(--ui-dur-2) var(--ui-ease);
}

.mini-switch-track[b-4aogmbm9ue]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef1f2;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .18);
    transition: transform var(--ui-dur-2) var(--ui-ease), background var(--ui-dur-2) var(--ui-ease);
}

.mini-switch input:checked + .mini-switch-track[b-4aogmbm9ue] {
    background: #29a055;
}

.mini-switch input:checked + .mini-switch-track[b-4aogmbm9ue]::before {
    transform: translateX(28px);
    background: #36d06d;
}

.toggle-panel[b-4aogmbm9ue] {
    margin-top: -2px;
    /* the field inside had 2px below it and touched the dashed border */
    padding: 12px 14px 14px;
    border: 1px dashed var(--ui-line-strong);
    border-radius: 16px;
    background: var(--surface);
}

.setup-card:first-of-type[b-4aogmbm9ue] {
    padding: 15px 16px;
}

.setup-card:first-of-type .setup-card-header[b-4aogmbm9ue] {
    margin-bottom: 11px;
}

.setup-package-access-notice[b-4aogmbm9ue] {
    display: none !important;
}

@media (max-width: 980px) {
    .setup-top-grid[b-4aogmbm9ue] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .compact-tools-card[b-4aogmbm9ue] {
        padding: 12px;
        border-radius: 16px;
    }

    .toggle-item[b-4aogmbm9ue] {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .mini-switch[b-4aogmbm9ue] {
        width: 62px;
        height: 36px;
    }

    .mini-switch-track[b-4aogmbm9ue]::before {
        width: 28px;
        height: 28px;
    }

    .mini-switch input:checked + .mini-switch-track[b-4aogmbm9ue]::before {
        transform: translateX(26px);
    }
}

/* TRANSLATION SETUP TOP LANGUAGE TOOLS V4.1 - END */


/* TRANSLATION SETUP TOP COLUMNS V5 - START */

/*
 * Two real sibling cards:
 * RIGHT (RTL): Language
 * LEFT  (RTL): Glossary + Translation Memory
 * Equal widths.
 */

.setup-top-pair[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.setup-language-card[b-4aogmbm9ue],
.setup-tools-card-section[b-4aogmbm9ue] {
    min-width: 0;
    height: 100%;
    padding: 16px;
}

.setup-language-card .setup-card-header[b-4aogmbm9ue],
.setup-tools-card-section .setup-card-header[b-4aogmbm9ue] {
    margin-bottom: 12px;
}


/* =========================================================
   LANGUAGE — vertical / compact
   ========================================================= */

.language-stack[b-4aogmbm9ue] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.language-stack .compact-field[b-4aogmbm9ue] {
    gap: 5px;
}

.language-stack .compact-field > label[b-4aogmbm9ue] {
    font-size: .59rem;
    font-weight: 790;
}

.language-stack .compact-field select[b-4aogmbm9ue] {
    min-height: 43px;
    padding-inline: 12px;

    border: 1px solid var(--ui-line);
    border-radius: 14px;

    background: var(--ui-surface-strong);
    color: var(--text);

    font-size: .66rem;
}

.language-stack-arrow[b-4aogmbm9ue] {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    justify-self: center;

    margin: -1px 0;

    border: 1px solid var(--ui-line);
    border-radius: 50%;

    background: var(--ui-surface-raised);
    color: var(--ui-warning);

    font-size: .82rem;
    font-weight: 850;

    box-shadow: var(--ui-shadow-sm);
}

.setup-language-card .inline-warning[b-4aogmbm9ue],
.setup-language-card .rtl-notice[b-4aogmbm9ue] {
    margin-top: 9px;
}

.compact-rtl-notice[b-4aogmbm9ue] {
    padding: 9px 11px;
}


/* =========================================================
   GLOSSARY + MEMORY
   ========================================================= */

.setup-tools-card-header[b-4aogmbm9ue] {
    align-items: center;
}

.setup-tools-header-icon[b-4aogmbm9ue] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(226, 175, 46, .24);
    border-radius: 12px;

    background: var(--ui-accent-soft);
    color: var(--ui-warning);

    font-size: .76rem;
    font-weight: 900;
}

.setup-tools-card-section .toggle-stack[b-4aogmbm9ue] {
    display: grid;
    gap: 10px;
}

.setup-tools-card-section .toggle-item[b-4aogmbm9ue] {
    min-height: 68px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    padding: 11px 12px;

    border: 1px solid var(--ui-line);
    border-radius: 15px;

    background: var(--ui-surface-sunken);
}

.setup-tools-card-section .toggle-copy[b-4aogmbm9ue] {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.setup-tools-card-section .toggle-copy strong[b-4aogmbm9ue] {
    color: var(--text);

    font-size: .65rem;
    font-weight: 830;
}

.setup-tools-card-section .toggle-copy small[b-4aogmbm9ue] {
    color: var(--muted);

    font-size: .54rem;
    line-height: 1.5;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.setup-tools-card-section .mini-switch[b-4aogmbm9ue] {
    width: 64px;
    height: 36px;

    position: relative;

    display: inline-block;
    flex: none;
}

.setup-tools-card-section .mini-switch input[b-4aogmbm9ue] {
    position: absolute;
    inset: 0;

    z-index: 2;

    opacity: 0;
    cursor: pointer;
}

.setup-tools-card-section .mini-switch-track[b-4aogmbm9ue] {
    position: absolute;
    inset: 0;

    border-radius: 999px;

    background: #b8c0c2;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.05),
        0 5px 12px rgba(15,23,42,.08);

    transition: background var(--ui-dur-2) var(--ui-ease);
}

.setup-tools-card-section .mini-switch-track[b-4aogmbm9ue]::before {
    content: "";

    position: absolute;

    top: 4px;
    left: 4px;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #edf1f2;

    box-shadow: 0 4px 10px rgba(15,23,42,.18);

    transition:
        transform var(--ui-dur-2) var(--ui-ease),
        background var(--ui-dur-2) var(--ui-ease);
}

.setup-tools-card-section .mini-switch input:checked + .mini-switch-track[b-4aogmbm9ue] {
    background: #29a055;
}

.setup-tools-card-section .mini-switch input:checked + .mini-switch-track[b-4aogmbm9ue]::before {
    transform: translateX(28px);
    background: #36d06d;
}


/* =========================================================
   GLOSSARY SELECT — fix cramped spacing
   ========================================================= */

.glossary-select-panel[b-4aogmbm9ue] {
    margin: 0;
    padding: 12px;

    border: 1px dashed var(--ui-line-strong);
    border-radius: 15px;

    background: var(--surface);
}

.glossary-select-panel .setup-field[b-4aogmbm9ue] {
    display: grid;
    gap: 8px;
}

.glossary-select-panel .setup-field > span[b-4aogmbm9ue] {
    display: block;

    margin: 0;

    color: var(--text-secondary);

    font-size: .58rem;
    font-weight: 780;
}

.glossary-select-panel .setup-field select[b-4aogmbm9ue] {
    min-height: 43px;

    margin: 0;
    padding-inline: 12px;

    border: 1px solid var(--ui-line);
    border-radius: 13px;

    background: var(--ui-surface-strong);

    font-size: .65rem;
}


/* kill old nested top-grid styles, if still present in CSS */
.setup-top-grid[b-4aogmbm9ue] {
    display: contents;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
    .setup-top-pair[b-4aogmbm9ue] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .setup-top-pair[b-4aogmbm9ue] {
        gap: 10px;
    }

    .setup-language-card[b-4aogmbm9ue],
    .setup-tools-card-section[b-4aogmbm9ue] {
        padding: 14px;
    }

    .setup-tools-card-section .toggle-item[b-4aogmbm9ue] {
        grid-template-columns: 1fr auto;
        padding: 10px;
    }
}

/* TRANSLATION SETUP TOP COLUMNS V5 - END */


.language-stack-arrow[b-4aogmbm9ue] {
    display: none !important;
}

/* TRANSLATION SETUP WARM DARK MODE CARDS V1 - START */
/*
 * Dark-mode correction for Stage 3 translation-type cards.
 * The exact-reference light cards use hard-coded cream/white fills;
 * dark mode must replace those fills rather than merely changing
 * surrounding tokens.
 */

html[data-theme="dark"]
.translation-setup-page
.mode-card[b-4aogmbm9ue] {
    border-color: rgba(255, 236, 198, .12) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 175, 46, .12) 0%,
            rgba(226, 175, 46, .055) 48%,
            rgba(255, 255, 255, .018) 100%
        ),
        #272018 !important;

    color: #f1eadf !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-card[b-4aogmbm9ue]::after {
    background: rgba(255, 236, 198, .11) !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-icon[b-4aogmbm9ue] {
    color: #c8b68f !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-content strong[b-4aogmbm9ue] {
    color: #ece3d6 !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-content small[b-4aogmbm9ue] {
    color: #a79d8f !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-card:hover[b-4aogmbm9ue] {
    border-color: rgba(226, 175, 46, .18) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 175, 46, .145) 0%,
            rgba(226, 175, 46, .067) 48%,
            rgba(255, 255, 255, .022) 100%
        ),
        #2a2219 !important;

    box-shadow:
        0 10px 23px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.022) !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-card.selected[b-4aogmbm9ue] {
    border-color: rgba(226, 175, 46, .40) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 175, 46, .22) 0%,
            rgba(226, 175, 46, .105) 48%,
            rgba(255, 255, 255, .028) 100%
        ),
        #2c241a !important;

    box-shadow:
        0 0 0 1px rgba(226,175,46,.09),
        0 10px 24px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-card.selected
.mode-content strong[b-4aogmbm9ue] {
    color: #f0b637 !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-card.selected
.mode-icon[b-4aogmbm9ue] {
    color: #d4bf91 !important;
}

html[data-theme="dark"]
.translation-setup-page
.mode-check[b-4aogmbm9ue] {
    background: linear-gradient(
        135deg,
        #efc14b,
        #d8a229
    ) !important;

    color: #34270f !important;

    box-shadow: 0 0 0 3px rgba(226,175,46,.12) !important;
}

/* Keep unavailable/locked choices visibly disabled, but not washed white. */
html[data-theme="dark"]
.translation-setup-page
.mode-card:disabled[b-4aogmbm9ue],

html[data-theme="dark"]
.translation-setup-page
.mode-card.locked[b-4aogmbm9ue],

html[data-theme="dark"]
.translation-setup-page
.mode-card.disabled[b-4aogmbm9ue] {
    opacity: .52 !important;

    filter: none !important;
}
/* TRANSLATION SETUP WARM DARK MODE CARDS V1 - END */

/* INSUFFICIENT CREDIT - START */
.submit-error-action[b-4aogmbm9ue]{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:7px 16px;border-radius:var(--ui-r-sm);background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-strong));color:var(--ui-on-accent);font-size:.6rem;font-weight:850;text-decoration:none;box-shadow:var(--ui-shadow-accent);transition:var(--ui-t)}
.submit-error-action:hover[b-4aogmbm9ue]{transform:translateY(-1px)}
/* INSUFFICIENT CREDIT - END */


/* =========================================================
   PHONE
   =========================================================
   The tier cards drop the height they kept for desktop, so the
   quality choice and the summary come up sooner. The modes stay
   one per row: two to a row was tried and their descriptions
   broke one word per line.
   ========================================================= */

@media (max-width: 560px) {

    .quality-card[b-4aogmbm9ue] {
        min-height: 0;
        padding: 13px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Translation/TranslationWorkflowProgress.razor.rz.scp.css */
.translation-workflow-progress[b-rzxl2aqyjc] {
    width: min(100%, 540px);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
    backdrop-filter: blur(16px);
    animation: ui-rise .55s var(--ui-ease-out) .22s backwards;
}

.translation-workflow-step[b-rzxl2aqyjc] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: .46;
    transition: var(--ui-t);
}

.translation-workflow-step.active[b-rzxl2aqyjc],
.translation-workflow-step.completed[b-rzxl2aqyjc] {
    opacity: 1;
}

.workflow-step-number[b-rzxl2aqyjc] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-sunken);
    color: var(--muted);
    font-size: .62rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    transition: var(--ui-t);
}

.translation-workflow-step.active .workflow-step-number[b-rzxl2aqyjc] {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong));
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-accent);
}

.translation-workflow-step.completed .workflow-step-number[b-rzxl2aqyjc] {
    border-color: rgba(226, 175, 46, .22);
    background: var(--ui-accent-soft);
    color: var(--ui-warning);
}

.translation-workflow-step > div[b-rzxl2aqyjc] {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.translation-workflow-step strong[b-rzxl2aqyjc] {
    color: var(--text);
    font-size: .61rem;
    font-weight: 800;
    white-space: nowrap;
}

.translation-workflow-step small[b-rzxl2aqyjc] {
    color: var(--muted);
    font-size: .50rem;
    white-space: nowrap;
}

.translation-workflow-line[b-rzxl2aqyjc] {
    width: 18px;
    height: 1px;
    flex: 0 0 18px;
    background: var(--ui-line-strong);
}

.translation-workflow-line.completed[b-rzxl2aqyjc] {
    background: var(--ui-accent-strong);
}

@media (max-width: 820px) {
    .translation-workflow-progress[b-rzxl2aqyjc] {
        width: 100%;
        max-width: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .translation-workflow-progress[b-rzxl2aqyjc]::-webkit-scrollbar {
        display: none;
    }

    .translation-workflow-step[b-rzxl2aqyjc] {
        flex: 0 0 auto;
    }
}

@media (max-width: 540px) {
    .translation-workflow-progress[b-rzxl2aqyjc] {
        padding: 8px;
    }

    .translation-workflow-step > div[b-rzxl2aqyjc] {
        display: none;
    }

    .translation-workflow-line[b-rzxl2aqyjc] {
        flex: 1 1 18px;
    }
}
/* _content/AITranslationPlatform.Web/Components/UserProfile/Profile.razor.rz.scp.css */
/* =========================================================
   PROFILE — PREMIUM WORKSPACE V1
   Unified with Dashboard / Translation / Documents / Billing
   ========================================================= */

.profile-page[b-wjbsa1faco] {
    --profile-accent: var(--ui-accent, #f2bd43);
    --profile-accent-strong: var(--ui-accent-strong, #dfa62c);
    --profile-accent-soft: var(--ui-accent-soft, rgba(226, 175, 46, .12));
    --profile-accent-tint: var(--ui-accent-tint, rgba(226, 175, 46, .065));

    --profile-text: var(--text, #28241e);
    --profile-text-2: var(--text-secondary, #625d54);
    --profile-muted: var(--muted, #918a7f);

    --profile-surface: var(--surface, #ffffff);
    --profile-surface-raised: var(--ui-surface-raised, #ffffff);
    --profile-surface-strong: var(--ui-surface-strong, #fffdf9);
    --profile-surface-soft: var(--ui-surface-sunken, #faf8f3);

    --profile-line: var(--ui-line, rgba(48, 43, 34, .10));
    --profile-line-strong: var(--ui-line-strong, rgba(48, 43, 34, .16));

    --profile-success: var(--ui-success, #4a8c61);
    --profile-success-soft: var(--ui-success-tint, rgba(74, 140, 97, .10));
    --profile-warning: var(--ui-warning, #b97814);
    --profile-warning-soft: var(--ui-warning-tint, rgba(185, 120, 20, .10));
    --profile-danger: var(--ui-danger, #b65050);
    --profile-danger-soft: var(--ui-danger-tint, rgba(182, 80, 80, .10));
    --profile-info: var(--ui-info, #657aa8);
    --profile-info-soft: var(--ui-info-tint, rgba(101, 122, 168, .10));

    --profile-shadow-sm: var(--ui-shadow-sm, 0 8px 22px rgba(32, 28, 22, .055));
    --profile-shadow-md: var(--ui-shadow-md, 0 18px 46px rgba(32, 28, 22, .085));

    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 0 0 30px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    color: var(--profile-text);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.profile-eyebrow[b-wjbsa1faco] {
    width: max-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 8px;
    padding: 6px 11px;

    border: 1px solid rgba(226, 175, 46, .28);
    border-radius: 999px;

    background: var(--profile-surface-raised);

    color: #a86e11;

    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .055em;
    white-space: nowrap;
}

.profile-page[dir="rtl"] .profile-eyebrow[b-wjbsa1faco] {
    letter-spacing: 0;
}

.profile-eyebrow-dot[b-wjbsa1faco] {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--profile-accent-strong);

    box-shadow: 0 0 0 4px var(--profile-accent-soft);

    animation: profile-pulse-b-wjbsa1faco 2.4s ease-in-out infinite;
}


/* =========================================================
   HERO
   ========================================================= */

.profile-hero[b-wjbsa1faco] {
    position: relative;

    min-height: 220px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .56fr);
    align-items: center;
    gap: 30px;

    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--profile-line);
    border-radius: 28px;

    background:
        radial-gradient(115% 145% at 8% -18%, var(--profile-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 96% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(135deg, var(--profile-surface-strong), var(--profile-surface));

    box-shadow: var(--profile-shadow-md);

    animation: profile-card-in-b-wjbsa1faco .62s cubic-bezier(.2,.8,.2,1) .03s backwards;
}

.profile-page[dir="rtl"] .profile-hero[b-wjbsa1faco] {
    background:
        radial-gradient(115% 145% at 92% -18%, var(--profile-accent-soft), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(130, 121, 103, .07), transparent 56%),
        linear-gradient(225deg, var(--profile-surface-strong), var(--profile-surface));
}

.profile-hero[b-wjbsa1faco]::before,
.profile-hero[b-wjbsa1faco]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.profile-hero[b-wjbsa1faco]::before {
    width: 285px;
    height: 285px;

    inset-block-start: -184px;
    inset-inline-end: -94px;

    border: 42px solid var(--profile-accent-soft);
    opacity: .78;
}

.profile-hero[b-wjbsa1faco]::after {
    width: 154px;
    height: 154px;

    inset-block-end: -101px;
    inset-inline-start: -44px;

    border: 26px solid var(--profile-line-strong);
    opacity: .62;
}

.profile-hero-identity[b-wjbsa1faco] {
    position: relative;
    z-index: 2;

    min-width: 0;

    display: flex;
    align-items: center;
    gap: 18px;
}

.profile-avatar[b-wjbsa1faco] {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(226,175,46,.28);
    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            var(--profile-accent),
            var(--profile-accent-strong)
        );

    color: #35270e;

    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: .01em;

    box-shadow:
        0 14px 30px rgba(226,175,46,.24),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.profile-hero-copy[b-wjbsa1faco] {
    min-width: 0;
}

.profile-hero h1[b-wjbsa1faco] {
    margin: 0 0 11px;

    color: var(--profile-text);

    font-size: clamp(1.8rem, 2.7vw, 2.55rem);
    font-weight: 860;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.profile-page[dir="rtl"] .profile-hero h1[b-wjbsa1faco] {
    letter-spacing: 0;
}

.profile-hero-badges[b-wjbsa1faco] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-badge[b-wjbsa1faco] {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 9px;

    border: 1px solid var(--profile-line);
    border-radius: 999px;

    background: var(--profile-surface-raised);

    color: var(--profile-text-2);

    font-size: .52rem;
    font-weight: 800;
    line-height: 1;
}

.profile-badge svg[b-wjbsa1faco] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.profile-badge.verified[b-wjbsa1faco] {
    border-color: rgba(74,140,97,.13);
    background: var(--profile-success-soft);
    color: var(--profile-success);
}

.profile-badge.pending[b-wjbsa1faco] {
    border-color: rgba(185,120,20,.13);
    background: var(--profile-warning-soft);
    color: var(--profile-warning);
}

.profile-badge.shield[b-wjbsa1faco] {
    border-color: rgba(101,122,168,.13);
    background: var(--profile-info-soft);
    color: var(--profile-info);
}


/* =========================================================
   HERO FACTS
   ========================================================= */

.profile-hero-facts[b-wjbsa1faco] {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;

    margin: 0;
}

.profile-hero-facts > div[b-wjbsa1faco] {
    min-width: 0;
    min-height: 84px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 13px 14px;

    border: 1px solid var(--profile-line);
    border-radius: 15px;

    background:
        linear-gradient(145deg, var(--profile-accent-tint), transparent 74%),
        var(--profile-surface-raised);

    box-shadow: var(--profile-shadow-sm);
}

.profile-hero-facts dt[b-wjbsa1faco] {
    margin: 0 0 5px;

    color: var(--profile-muted);

    font-size: .50rem;
    font-weight: 760;
}

.profile-hero-facts dd[b-wjbsa1faco] {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    color: var(--profile-text);

    font-size: .67rem;
    font-weight: 820;

    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   NOTICE
   ========================================================= */

.profile-notice[b-wjbsa1faco] {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid var(--profile-line);
    border-radius: 16px;

    background: var(--profile-surface-strong);

    box-shadow: var(--profile-shadow-sm);

    animation: profile-card-in-b-wjbsa1faco .45s cubic-bezier(.2,.8,.2,1) backwards;
}

.profile-notice-icon[b-wjbsa1faco] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;
}

.profile-notice-icon svg[b-wjbsa1faco] {
    width: 18px;
    height: 18px;
}

.profile-notice strong[b-wjbsa1faco] {
    display: block;

    margin-bottom: 4px;

    color: var(--profile-text);

    font-size: .64rem;
    font-weight: 830;
}

.profile-notice span[b-wjbsa1faco] {
    color: var(--profile-text-2);

    font-size: .54rem;
    line-height: 1.65;
}

.profile-notice.warning[b-wjbsa1faco] {
    border-color: rgba(185,120,20,.16);

    background:
        linear-gradient(145deg, var(--profile-warning-soft), transparent 82%),
        var(--profile-surface-strong);
}

.profile-notice.warning .profile-notice-icon[b-wjbsa1faco] {
    background: var(--profile-warning-soft);
    color: var(--profile-warning);
}

.profile-notice.danger[b-wjbsa1faco] {
    border-color: rgba(182,80,80,.16);

    background:
        linear-gradient(145deg, var(--profile-danger-soft), transparent 82%),
        var(--profile-surface-strong);
}

.profile-notice.danger .profile-notice-icon[b-wjbsa1faco] {
    background: var(--profile-danger-soft);
    color: var(--profile-danger);
}


/* =========================================================
   PANELS
   ========================================================= */

.profile-panel[b-wjbsa1faco] {
    position: relative;

    padding: 19px 21px;

    overflow: hidden;

    border: 1px solid var(--profile-line);
    border-radius: 21px;

    background:
        linear-gradient(145deg, var(--profile-accent-tint), transparent 82%),
        var(--profile-surface);

    box-shadow: var(--profile-shadow-sm);

    animation: profile-card-in-b-wjbsa1faco .55s cubic-bezier(.2,.8,.2,1) backwards;
}

.profile-panel:nth-of-type(2)[b-wjbsa1faco] { animation-delay: .05s; }
.profile-panel:nth-of-type(3)[b-wjbsa1faco] { animation-delay: .10s; }
.profile-panel:nth-of-type(4)[b-wjbsa1faco] { animation-delay: .15s; }

.profile-panel[b-wjbsa1faco]::after {
    content: "";

    position: absolute;

    width: 118px;
    height: 118px;

    inset-block-start: -82px;
    inset-inline-end: -42px;

    border-radius: 50%;

    background: var(--profile-accent);
    opacity: .025;

    pointer-events: none;
}

.profile-panel > *[b-wjbsa1faco] {
    position: relative;
    z-index: 1;
}

.profile-panel-head[b-wjbsa1faco] {
    display: grid;
    gap: 3px;

    margin-bottom: 14px;
    padding-bottom: 13px;

    border-bottom: 1px solid var(--profile-line);
}

.profile-panel-head .profile-eyebrow[b-wjbsa1faco] {
    margin-bottom: 2px;
}

.profile-panel-head p[b-wjbsa1faco] {
    max-width: 850px;

    margin: 0;

    color: var(--profile-muted);

    font-size: .56rem;
    line-height: 1.7;
}


/* =========================================================
   FIELDS
   ========================================================= */

.profile-field-row[b-wjbsa1faco] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-field[b-wjbsa1faco] {
    display: grid;
    gap: 6px;

    min-width: 0;
}

.profile-field + .profile-field-row[b-wjbsa1faco],
.profile-field-row + .profile-field[b-wjbsa1faco] {
    margin-top: 12px;
}

.profile-field > span[b-wjbsa1faco] {
    color: var(--profile-text-2);

    font-size: .58rem;
    font-weight: 780;
}

.profile-field input[b-wjbsa1faco] {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid var(--profile-line-strong);
    border-radius: 12px;
    outline: 0;

    background: var(--profile-surface-soft);

    color: var(--profile-text);

    font: inherit;
    font-size: .66rem;

    transition: .16s ease;
}

.profile-field input:hover[b-wjbsa1faco] {
    border-color: rgba(226,175,46,.30);
}

.profile-field input:focus[b-wjbsa1faco] {
    border-color: var(--profile-accent-strong);

    background: var(--profile-surface-raised);

    box-shadow: 0 0 0 3px var(--profile-accent-soft);
}

.profile-field input[b-wjbsa1faco]::placeholder {
    color: var(--profile-muted);
}

.profile-field.code[b-wjbsa1faco] {
    max-width: 270px;

    margin-top: 12px;
}

.profile-field.code input[b-wjbsa1faco] {
    min-height: 48px;

    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .26em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   READOUTS
   ========================================================= */

.profile-readout[b-wjbsa1faco] {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;

    min-height: 68px;

    padding: 11px 12px;

    border: 1px solid var(--profile-line);
    border-radius: 13px;

    background: var(--profile-surface-soft);
}

.profile-readout + .profile-readout[b-wjbsa1faco],
.profile-readout + .profile-field[b-wjbsa1faco] {
    margin-top: 9px;
}

.profile-readout.pending[b-wjbsa1faco] {
    border-color: rgba(185,120,20,.15);

    background:
        linear-gradient(145deg, var(--profile-warning-soft), transparent 88%),
        var(--profile-surface-soft);
}

.profile-readout-label[b-wjbsa1faco] {
    display: block;

    margin-bottom: 4px;

    color: var(--profile-muted);

    font-size: .49rem;
    font-weight: 760;
}

.profile-readout-value[b-wjbsa1faco] {
    display: block;

    color: var(--profile-text);

    font-size: .64rem;
    font-weight: 820;
    line-height: 1.55;

    word-break: break-word;
}

.profile-readout-value.ok[b-wjbsa1faco] {
    color: var(--profile-success);
}

.profile-readout-value.warn[b-wjbsa1faco] {
    color: var(--profile-warning);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.profile-actions[b-wjbsa1faco] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 13px;
}

.profile-primary-action[b-wjbsa1faco],
.profile-ghost-action[b-wjbsa1faco] {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 14px;

    border-radius: 11px;

    font-family: inherit;
    font-size: .59rem;
    font-weight: 820;

    cursor: pointer;

    transition: .16s ease;
}

.profile-primary-action[b-wjbsa1faco] {
    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            var(--profile-accent),
            var(--profile-accent-strong)
        );

    color: #34270f;

    box-shadow: 0 10px 22px rgba(226,175,46,.18);
}

.profile-primary-action:hover:not(:disabled)[b-wjbsa1faco] {
    transform: translateY(-1px);

    box-shadow: 0 14px 28px rgba(226,175,46,.25);
}

.profile-ghost-action[b-wjbsa1faco] {
    border: 1px solid var(--profile-line-strong);

    background: var(--profile-surface-raised);

    color: var(--profile-text-2);
}

.profile-ghost-action:hover:not(:disabled)[b-wjbsa1faco] {
    transform: translateY(-1px);

    border-color: var(--profile-accent-strong);

    color: #9c6b16;
}

.profile-ghost-action.danger[b-wjbsa1faco] {
    border-color: rgba(182,80,80,.17);

    background: var(--profile-danger-soft);

    color: var(--profile-danger);
}

.profile-primary-action:disabled[b-wjbsa1faco],
.profile-ghost-action:disabled[b-wjbsa1faco] {
    opacity: .48;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.profile-inline-message[b-wjbsa1faco] {
    margin: 11px 0 0;
    padding: 9px 11px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: .56rem;
    font-weight: 700;
    line-height: 1.65;
}

.profile-inline-message.ok[b-wjbsa1faco] {
    border-color: rgba(74,140,97,.14);

    background: var(--profile-success-soft);

    color: var(--profile-success);
}

.profile-inline-message.bad[b-wjbsa1faco] {
    border-color: rgba(182,80,80,.14);

    background: var(--profile-danger-soft);

    color: var(--profile-danger);
}

.profile-empty[b-wjbsa1faco] {
    margin: 0;
    padding: 28px;

    color: var(--profile-muted);

    text-align: center;

    font-size: .62rem;
}


/* =========================================================
   TWO FACTOR ENROLMENT
   ========================================================= */

.profile-enrolment[b-wjbsa1faco] {
    padding: 15px;

    border: 1px dashed var(--profile-line-strong);
    border-radius: 14px;

    background:
        linear-gradient(145deg, var(--profile-accent-tint), transparent 82%),
        var(--profile-surface-soft);
}

.profile-steps[b-wjbsa1faco] {
    margin: 0;
    padding-inline-start: 21px;

    color: var(--profile-text-2);

    font-size: .58rem;
    line-height: 1.95;
}

.profile-steps code[b-wjbsa1faco],
.profile-recovery code[b-wjbsa1faco] {
    display: inline-block;

    margin-top: 7px;
    padding: 7px 10px;

    border: 1px solid var(--profile-line);
    border-radius: 8px;

    background: var(--profile-surface-raised);

    color: #9a6b19;

    font-family: "Consolas", "Menlo", monospace;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .08em;

    user-select: all;
}


/* =========================================================
   RECOVERY CODES
   ========================================================= */

.profile-recovery[b-wjbsa1faco] {
    margin-top: 13px;
    padding: 14px;

    border: 1px solid rgba(185,120,20,.15);
    border-radius: 14px;

    background:
        linear-gradient(145deg, var(--profile-warning-soft), transparent 84%),
        var(--profile-surface-soft);
}

.profile-recovery strong[b-wjbsa1faco] {
    display: block;

    margin-bottom: 11px;

    color: var(--profile-warning);

    font-size: .57rem;
    font-weight: 820;
    line-height: 1.7;
}

.profile-recovery ul[b-wjbsa1faco] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.profile-recovery code[b-wjbsa1faco] {
    display: block;

    margin: 0;

    text-align: center;

    letter-spacing: .055em;
}


/* =========================================================
   DARK MODE — WARM / EXPLICIT
   ========================================================= */

html[data-theme="dark"] .profile-page[b-wjbsa1faco] {
    --profile-text: #f3eee5;
    --profile-text-2: #d2c8b7;
    --profile-muted: #9d9487;

    --profile-surface: #211b15;
    --profile-surface-raised: #292219;
    --profile-surface-strong: #2d251c;
    --profile-surface-soft: #19140f;

    --profile-line: rgba(255,236,198,.09);
    --profile-line-strong: rgba(255,236,198,.15);

    --profile-success: #94c981;
    --profile-success-soft: rgba(111,161,91,.14);
    --profile-warning: #e4b44a;
    --profile-warning-soft: rgba(196,145,52,.13);
    --profile-danger: #e28a83;
    --profile-danger-soft: rgba(200,92,84,.12);
    --profile-info: #a6b7de;
    --profile-info-soft: rgba(105,130,181,.14);

    --profile-shadow-sm: 0 12px 28px rgba(0,0,0,.13);
    --profile-shadow-md: 0 22px 50px rgba(0,0,0,.20);
}

html[data-theme="dark"] .profile-hero[b-wjbsa1faco] {
    border-color: var(--profile-line-strong);

    background:
        radial-gradient(115% 145% at 92% -18%, rgba(226,175,46,.11), transparent 48%),
        radial-gradient(85% 115% at 4% 118%, rgba(255,236,198,.035), transparent 56%),
        linear-gradient(225deg, #2c241b, #211b15);

    box-shadow:
        0 20px 50px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.02);
}

html[data-theme="dark"] .profile-eyebrow[b-wjbsa1faco] {
    border-color: rgba(226,175,46,.18);

    background: #2a231b;

    color: #e5b84e;
}

html[data-theme="dark"] .profile-hero-facts > div[b-wjbsa1faco] {
    border-color: rgba(255,236,198,.10);

    background:
        linear-gradient(145deg, rgba(226,175,46,.06), transparent 75%),
        #272018;
}

html[data-theme="dark"] .profile-badge[b-wjbsa1faco] {
    border-color: rgba(255,236,198,.08);

    background: #292219;

    color: #d9d0c2;
}

html[data-theme="dark"] .profile-badge.verified[b-wjbsa1faco] {
    border-color: rgba(111,161,91,.15);

    background: rgba(111,161,91,.13);

    color: #9dcc83;
}

html[data-theme="dark"] .profile-badge.pending[b-wjbsa1faco] {
    border-color: rgba(196,145,52,.16);

    background: rgba(196,145,52,.12);

    color: #e4b44a;
}

html[data-theme="dark"] .profile-badge.shield[b-wjbsa1faco] {
    border-color: rgba(105,130,181,.16);

    background: rgba(105,130,181,.13);

    color: #a6b7de;
}

html[data-theme="dark"] .profile-panel[b-wjbsa1faco] {
    border-color: var(--profile-line-strong);

    background:
        linear-gradient(145deg, rgba(226,175,46,.045), transparent 82%),
        linear-gradient(180deg, #272018, #211b15);
}

html[data-theme="dark"] .profile-field input[b-wjbsa1faco],
html[data-theme="dark"] .profile-readout[b-wjbsa1faco],
html[data-theme="dark"] .profile-enrolment[b-wjbsa1faco] {
    border-color: rgba(255,236,198,.11);

    background: #19140f;

    color: #f1eadd;
}

html[data-theme="dark"] .profile-field input:hover[b-wjbsa1faco] {
    border-color: rgba(226,175,46,.24);
}

html[data-theme="dark"] .profile-field input:focus[b-wjbsa1faco] {
    border-color: rgba(226,175,46,.46);

    background: #1d1712;

    box-shadow: 0 0 0 3px rgba(226,175,46,.10);
}

html[data-theme="dark"] .profile-readout.pending[b-wjbsa1faco] {
    border-color: rgba(196,145,52,.16);

    background:
        linear-gradient(145deg, rgba(196,145,52,.10), transparent 86%),
        #19140f;
}

html[data-theme="dark"] .profile-ghost-action[b-wjbsa1faco] {
    border-color: rgba(255,236,198,.13);

    background: #17120e;

    color: #dfd4c3;
}

html[data-theme="dark"] .profile-ghost-action:hover:not(:disabled)[b-wjbsa1faco] {
    border-color: rgba(226,175,46,.24);

    background: #211a13;

    color: #efbf4a;
}

html[data-theme="dark"] .profile-ghost-action.danger[b-wjbsa1faco] {
    border-color: rgba(200,92,84,.16);

    background: rgba(180,74,68,.11);

    color: #e28a83;
}

html[data-theme="dark"] .profile-notice.warning[b-wjbsa1faco] {
    border-color: rgba(196,145,52,.16);

    background:
        linear-gradient(145deg, rgba(196,145,52,.10), transparent 82%),
        #211b15;
}

html[data-theme="dark"] .profile-notice.danger[b-wjbsa1faco] {
    border-color: rgba(200,92,84,.16);

    background:
        linear-gradient(145deg, rgba(200,92,84,.10), transparent 82%),
        #211b15;
}

html[data-theme="dark"] .profile-recovery[b-wjbsa1faco] {
    border-color: rgba(196,145,52,.16);

    background:
        linear-gradient(145deg, rgba(196,145,52,.10), transparent 84%),
        #19140f;
}

html[data-theme="dark"] .profile-steps code[b-wjbsa1faco],
html[data-theme="dark"] .profile-recovery code[b-wjbsa1faco] {
    border-color: rgba(255,236,198,.10);

    background: #17120e;

    color: #edbc4a;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .profile-hero[b-wjbsa1faco] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .profile-hero-facts[b-wjbsa1faco] {
        max-width: 620px;
    }
}

@media (max-width: 760px) {
    .profile-page[b-wjbsa1faco] {
        gap: 14px;
    }

    .profile-hero[b-wjbsa1faco] {
        padding: 23px 20px;

        border-radius: 22px;
    }

    .profile-hero-identity[b-wjbsa1faco] {
        align-items: flex-start;
    }

    .profile-avatar[b-wjbsa1faco] {
        width: 62px;
        height: 62px;
        flex-basis: 62px;

        border-radius: 18px;

        font-size: 1.25rem;
    }

    .profile-field-row[b-wjbsa1faco] {
        grid-template-columns: 1fr;
    }

    .profile-panel[b-wjbsa1faco] {
        padding: 17px;

        border-radius: 18px;
    }
}

@media (max-width: 560px) {
    .profile-hero[b-wjbsa1faco] {
        gap: 19px;
    }

    .profile-hero-identity[b-wjbsa1faco] {
        flex-direction: column;
    }

    .profile-hero-facts[b-wjbsa1faco] {
        grid-template-columns: 1fr;
    }

    .profile-readout[b-wjbsa1faco] {
        grid-template-columns: 1fr;
    }

    .profile-actions[b-wjbsa1faco] {
        flex-direction: column;
    }

    .profile-primary-action[b-wjbsa1faco],
    .profile-ghost-action[b-wjbsa1faco] {
        width: 100%;
    }

    .profile-field.code[b-wjbsa1faco] {
        max-width: none;
    }

    .profile-recovery ul[b-wjbsa1faco] {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes profile-card-in-b-wjbsa1faco {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.995);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes profile-pulse-b-wjbsa1faco {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--profile-accent-soft);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(226,175,46,.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-hero[b-wjbsa1faco],
    .profile-panel[b-wjbsa1faco],
    .profile-notice[b-wjbsa1faco],
    .profile-primary-action[b-wjbsa1faco],
    .profile-ghost-action[b-wjbsa1faco] {
        animation: none !important;
        transition: none !important;
    }
}


/* PROFILE THREE COLUMN COMPACT V2 - START */

/*
 * Desktop profile layout:
 * hero + notices stay full width,
 * the three account sections become three compact columns.
 */

@media (min-width: 1101px) {

    .profile-page[b-wjbsa1faco] {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 14px !important;
    }

    .profile-page > .profile-hero[b-wjbsa1faco],
    .profile-page > .profile-notice[b-wjbsa1faco] {
        grid-column: 1 / -1 !important;
    }

    .profile-page > .profile-panel[b-wjbsa1faco] {
        min-width: 0 !important;
        align-self: start !important;

        padding: 16px !important;

        border-radius: 18px !important;
    }

    /*
     * The temporary loading state contains only one panel.
     * Keep it full width instead of leaving it in one third.
     */
    .profile-page:has(> .profile-panel > .profile-empty)
        > .profile-panel[b-wjbsa1faco] {
        grid-column: 1 / -1 !important;
    }

    .profile-panel-head[b-wjbsa1faco] {
        min-height: 78px !important;

        margin-bottom: 12px !important;
        padding-bottom: 11px !important;
    }

    .profile-panel-head .profile-eyebrow[b-wjbsa1faco] {
        margin-bottom: 1px !important;
    }

    .profile-panel-head p[b-wjbsa1faco] {
        font-size: .51rem !important;
        line-height: 1.65 !important;
    }

    /*
     * Two name fields beside each other become too narrow inside
     * one-third of the page, so keep them vertically stacked.
     */
    .profile-panel .profile-field-row[b-wjbsa1faco] {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .profile-panel .profile-field[b-wjbsa1faco] {
        gap: 5px !important;
    }

    .profile-panel .profile-field > span[b-wjbsa1faco] {
        font-size: .53rem !important;
    }

    .profile-panel .profile-field input[b-wjbsa1faco] {
        min-height: 40px !important;

        padding-inline: 10px !important;

        border-radius: 10px !important;

        font-size: .60rem !important;
    }

    .profile-panel .profile-field.code[b-wjbsa1faco] {
        max-width: 100% !important;

        margin-top: 10px !important;
    }

    .profile-panel .profile-field.code input[b-wjbsa1faco] {
        min-height: 43px !important;

        font-size: .94rem !important;
    }

    .profile-readout[b-wjbsa1faco] {
        min-height: 58px !important;

        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 9px !important;

        padding: 9px 10px !important;

        border-radius: 11px !important;
    }

    .profile-readout-label[b-wjbsa1faco] {
        font-size: .46rem !important;
    }

    .profile-readout-value[b-wjbsa1faco] {
        font-size: .58rem !important;
    }

    .profile-actions[b-wjbsa1faco] {
        gap: 7px !important;

        margin-top: 11px !important;
    }

    .profile-primary-action[b-wjbsa1faco],
    .profile-ghost-action[b-wjbsa1faco] {
        min-height: 36px !important;

        padding-inline: 12px !important;

        border-radius: 10px !important;

        font-size: .54rem !important;
    }

    .profile-inline-message[b-wjbsa1faco] {
        margin-top: 9px !important;
        padding: 8px 9px !important;

        font-size: .51rem !important;
    }

    .profile-enrolment[b-wjbsa1faco] {
        padding: 12px !important;

        border-radius: 12px !important;
    }

    .profile-steps[b-wjbsa1faco] {
        padding-inline-start: 18px !important;

        font-size: .52rem !important;
        line-height: 1.8 !important;
    }

    .profile-steps code[b-wjbsa1faco],
    .profile-recovery code[b-wjbsa1faco] {
        padding: 6px 8px !important;

        font-size: .56rem !important;
    }

    .profile-recovery[b-wjbsa1faco] {
        margin-top: 10px !important;
        padding: 11px !important;

        border-radius: 12px !important;
    }

    .profile-recovery strong[b-wjbsa1faco] {
        margin-bottom: 8px !important;

        font-size: .51rem !important;
    }

    .profile-recovery ul[b-wjbsa1faco] {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}


/*
 * Tablet:
 * two columns are more useful than forcing three narrow cards.
 */
@media (min-width: 761px) and (max-width: 1100px) {

    .profile-page[b-wjbsa1faco] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 14px !important;
    }

    .profile-page > .profile-hero[b-wjbsa1faco],
    .profile-page > .profile-notice[b-wjbsa1faco] {
        grid-column: 1 / -1 !important;
    }

    .profile-page > .profile-panel[b-wjbsa1faco] {
        min-width: 0 !important;
        align-self: start !important;
    }

    /*
     * The third card spans both columns on tablet.
     */
    .profile-page > .profile-panel:last-child[b-wjbsa1faco] {
        grid-column: 1 / -1 !important;
    }

    .profile-page:has(> .profile-panel > .profile-empty)
        > .profile-panel[b-wjbsa1faco] {
        grid-column: 1 / -1 !important;
    }
}


/*
 * Mobile remains one column.
 */
@media (max-width: 760px) {

    .profile-page[b-wjbsa1faco] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
}

/* PROFILE THREE COLUMN COMPACT V2 - END */

/* QR code for the authenticator app: always on white, so a phone can read it in the dark theme too. */
.profile-qr[b-wjbsa1faco] {
    display: block;
    width: fit-content;
    margin: 10px 0 12px;
    padding: 10px;

    border: 1px solid var(--profile-line-strong);
    border-radius: 12px;

    background: #fff;
}

.profile-qr img[b-wjbsa1faco] {
    display: block;
    width: 176px;
    height: 176px;

    image-rendering: pixelated;
}