/* =========================================================
   FONTS
   ========================================================= */

@font-face {
    font-family: "IRANSansX";
    src: url("/fonts/IRANSansX-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: "IRANSansX";
    src: url("/fonts/IRANSansX-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html,
body {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* English */

[dir="ltr"],
[dir="ltr"] button,
[dir="ltr"] input,
[dir="ltr"] textarea,
[dir="ltr"] select {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}


/* Persian */

[dir="rtl"],
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    font-family: "IRANSansX", Tahoma, Arial, sans-serif !important;
}


/*
 * An ltr island inside a Persian page is still Persian.
 *
 * The two rules above choose the typeface by DIRECTION, and direction is
 * not language. A signed number, a file name or a language code has to
 * be isolated as ltr so the bidirectional algorithm does not reorder it
 * - and the moment it is, it matched the Latin rule and changed
 * typeface mid-sentence. Persian digits in a signed amount were being
 * drawn in Segoe UI beside a title in IRANSansX.
 *
 * The face follows the page; only the direction of the island changes.
 */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] bdi {
    font-family: "IRANSansX", Tahoma, Arial, sans-serif;
}


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


/* =========================================================
   DESIGN TOKENS — the one place the user panel gets its look
   =========================================================

   Every colour here was sampled from the reference recording,
   not chosen by eye. Two facts about that design drive the whole
   system and are easy to lose:

   1. The ground is a warm gradient, cool grey at the top and
      buttered at the bottom-left, not a flat fill.
   2. Cards are TRANSLUCENT white laid over it. That is why the
      same card reads #f2f0e4 near the top and warmer lower down.
      Painting them a solid colour kills the effect and makes the
      panel look flat and dirty.

   Anything the user panel styles should reach for a token here.
   A hard-coded colour in a page stylesheet is how the panel
   drifted into 307 distinct hexes before.
   ========================================================= */

:root {
    /* ---- ground ---- */
    --ui-bg-1: #e7e5de; /* cool grey, top edge      */
    --ui-bg-2: #f2eeda; /* centre                   */
    --ui-bg-3: #ecd9a4; /* warm butter, lower glow  */
    --ui-ground: radial-gradient(120% 100% at 18% 108%, var(--ui-bg-3) 0%, var(--ui-bg-2) 46%, var(--ui-bg-1) 100%);
    /* ---- surfaces: translucent, but they must still read as panels ----
       The first pass sat at .62 and every panel dissolved into the
       ground. Translucency is what keeps the warm gradient alive
       through the cards; it is not a licence to make them vanish. */
    --ui-surface: rgba(255, 255, 255, .80);
    --ui-surface-strong: rgba(255, 255, 255, .94);
    --ui-surface-sunken: rgb(155 142 119 / 22%);
    --ui-surface-hover: rgba(255, 255, 255, .90);
    /* a chip or control sitting ON a surface, brighter than it */
    --ui-surface-raised: rgba(255, 255, 255, .62);
    /* the two blooms behind the hero card */
    --ui-bloom-warm: rgba(252, 209, 102, .62);
    --ui-bloom-cool: rgba(179, 161, 137, .28);
    /* ---- ink ---- */
    --ui-ink: #1c1b17;
    --ui-ink: #1c1b17;
    --ui-ink-2: #46433a;
    --ui-muted: #6d6759;
    --ui-faint: #9b9587;
    /* ---- accent: amber ---- */
    --ui-accent: #fcd166;
    --ui-accent-strong: #f6c243;
    --ui-accent-soft: #fdefc6;
    --ui-on-accent: #4a3608;
    /* ---- dark control: pills, avatars, active chips ----
       Espresso rather than the near-black the reference uses. A
       neutral black sits outside this palette and reads as a hole
       punched in it; the brown belongs to the same family as the
       clay and the amber. */
    --ui-dark: #3b2f23;
    --ui-dark-hover: #50412f;
    --ui-on-dark: #f6f4ea;
    /* ---- clay: charts and secondary blocks ---- */
    --ui-clay: #b3a189;
    --ui-clay-soft: #cec1ac;
    --ui-clay-faint: #e2dacc;
    /* ---- status, kept warm so nothing shouts ---- */
    /* These are inks, not fills. Each sits on its own pale -soft
       background at around 9px, so it has to clear 4.5:1 there; the
       first pass was chosen by eye and measured 3.9. */
    --ui-success: #3f6a39;
    --ui-success-soft: #e3edda;
    --ui-danger: #9d4231;
    --ui-danger-soft: #f7e0d9;
    --ui-info: #3d5e6f;
    --ui-info-soft: #dee9ee;
    --ui-warning: #7d5a10;
    --ui-warning-soft: #f7e8c8;
    /* Washes, for laying a role's colour over a surface without
       hiding the ground behind it. Written as rgba rather than mixed
       from the inks above so they work without color-mix. */
    --ui-accent-tint: rgba(252, 209, 102, .30);
    --ui-warning-tint: rgba(190, 140, 30, .15);
    --ui-success-tint: rgba(79, 127, 72, .14);
    --ui-info-tint: rgba(74, 111, 130, .14);
    --ui-danger-tint: rgba(157, 66, 49, .14);
    /* --ui-accent is too bright to read as text; warning states need a
       darker ochre of the same family */
    --ui-warning: #8a6516;
    --ui-warning-soft: #f7e8c8;
    /* ---- lines ---- */
    --ui-line: rgba(28, 27, 23, .13);
    --ui-line-strong: rgba(28, 27, 23, .22);
    --ui-line-bright: rgba(255, 255, 255, .70);
    /* ---- radii: five steps, replacing 38 ad-hoc values ---- */
    --ui-r-xs: 10px;
    --ui-r-sm: 14px;
    --ui-r-md: 18px;
    --ui-r-lg: 24px;
    --ui-r-xl: 32px;
    --ui-r-pill: 17px;
    /* ---- elevation: warm-tinted, never neutral grey ---- */
    --ui-shadow-sm: 0 6px 8px rgba(62, 54, 30, .18);
    --ui-shadow-md: 0 6px 10px rgba(62, 54, 30, .18);
    --ui-shadow-lg: 0 26px 70px rgba(62, 54, 30, .13);
    --ui-shadow-accent: 0 10px 26px rgba(226, 175, 46, .28);
    /* ---- motion ---- */
    --ui-ease: cubic-bezier(.2, .8, .25, 1);
    --ui-ease-out: cubic-bezier(.16, 1, .3, 1);
    /* overshoots past the target and settles - for things that
       should feel picked up rather than faded in */
    --ui-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ui-dur-1: .16s;
    --ui-dur-2: .26s;
    --ui-dur-3: .42s;
    --ui-t: all var(--ui-dur-2) var(--ui-ease);
}


/* =========================================================
   DARK
   =========================================================
   The same palette after dark, not a different one. Only the
   tokens above are redefined, so every rule in the panel that
   reads one follows without being touched - that is the whole
   return on having a token layer.

   Two things are inverted rather than dimmed:

   - The ground is warm brown, never neutral black. A grey-black
     under amber reads as a rendering fault; the whole point of
     this palette is that everything belongs to one family.
   - --ui-dark is the CONTROL colour, not a literal colour. On a
     light page it is espresso on cream; here it has to be cream
     on espresso, or the active nav item and the avatar vanish
     into the panel behind them.

   Text inks brighten and the -soft fills become translucent
   rather than pale, since a pale fill on a dark ground is a
   patch of light, not a tint.
   ========================================================= */

html[data-theme="dark"] {
    /* ---- ground: near black, warmed - not brown ----
       The first attempt put a mid-brown behind everything and the whole
       panel went one colour. A dark ground has to be dark, or every
       accent laid on it is competing with the background instead of
       standing out from it. */
    --ui-bg-1: #040403;
    --ui-bg-2: #090705;
    --ui-bg-3: #160f07;
    --ui-ground: radial-gradient(120% 100% at 18% 108%, var(--ui-bg-3) 0%, var(--ui-bg-2) 44%, var(--ui-bg-1) 100%);

    /* ---- surfaces: panels have to read as panels ----
       Against a near-black ground these can be stronger than they were
       and still look like glass rather than paint, which is what gives
       a card its edge without a heavy border. */
    /*
     * These alphas COMPOUND. A panel sits inside the frame, which sits
     * on the surface, so three overlays stack before anything is drawn
     * on top - at a quarter each the cards came out a pale mud. Read
     * them as "how much lighter than whatever is already behind me",
     * not as a final colour.
     */
    --ui-surface: rgba(255, 226, 178, .15);
    --ui-surface-strong: rgba(255, 226, 178, .225);
    --ui-surface-sunken: rgba(0, 0, 0, .45);
    --ui-surface-hover: rgba(255, 226, 178, .20);
    /* the badge pill carries amber TEXT, so it has to stay darker than
       the panel it sits on, not lighter */
    --ui-surface-raised: rgba(0, 0, 0, .32);

    --ui-bloom-warm: rgba(251, 205, 92, .20);
    --ui-bloom-cool: rgba(147, 185, 203, .10);

    /* ---- ink ---- */
    --ui-ink: #f6f2e8;
    --ui-ink-2: #d2cab8;
    --ui-muted: #cec5b4;
    --ui-faint: #8a8171;

    /* ---- accent ---- */
    --ui-accent: #fbcd5c;
    --ui-accent-strong: #f7c243;
    --ui-accent-soft: rgba(251, 205, 92, .18);
    --ui-on-accent: #35260a;

    /* ---- the control colour ----
       Still dark. It backs the logo mark and the active nav disc, and
       the glyph sitting on it is amber - a cream disc under an amber
       glyph leaves the glyph invisible, which is exactly what the first
       attempt did. Against the near-black ground a lifted espresso disc
       separates on its own. */
    --ui-dark: #1c1710;
    --ui-dark-hover: #2a2318;
    --ui-on-dark: #f6f2e8;

    /* ---- clay ---- */
    --ui-clay: #b5a68c;
    --ui-clay-soft: #8a7d6a;
    --ui-clay-faint: #4e4638;

    /* ---- status: stronger fills, so four cards read as four colours
       rather than four browns ---- */
    --ui-success: #9ad286;
    --ui-success-soft: rgba(154, 210, 134, .18);
    --ui-danger: #ef9880;
    --ui-danger-soft: rgba(239, 152, 128, .18);
    --ui-info: #97c3d8;
    --ui-info-soft: rgba(151, 195, 216, .18);
    --ui-warning: #eec575;
    --ui-warning-soft: rgba(238, 197, 117, .18);

    --ui-accent-tint: rgba(251, 205, 92, .22);
    --ui-warning-tint: rgba(238, 197, 117, .17);
    --ui-success-tint: rgba(154, 210, 134, .17);
    --ui-info-tint: rgba(151, 195, 216, .17);
    --ui-danger-tint: rgba(239, 152, 128, .17);

    /* ---- lines: a touch brighter, so a card edge is visible ---- */
    --ui-line: rgba(255, 226, 178, .16);
    --ui-line-strong: rgba(255, 226, 178, .28);
    --ui-line-bright: rgba(255, 226, 178, .10);

    /* ---- elevation ---- */
    --ui-shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);
    --ui-shadow-md: 0 12px 30px rgba(0, 0, 0, .55);
    --ui-shadow-lg: 0 28px 74px rgba(0, 0, 0, .65);
    --ui-shadow-accent: 0 10px 26px rgba(226, 175, 46, .26);
}


/* =========================================================
   SHARED MOTION
   =========================================================
   One entrance for the whole panel so pages do not each invent
   their own. Honour the reader's reduced-motion setting: this
   is decoration, and a vestibular disorder is not a preference.
   ========================================================= */

@keyframes ui-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


@keyframes ui-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes ui-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}


/* a ring easing outward as the card settles */
@keyframes ui-hero-ring {
    from {
        opacity: 0;
        transform: scale(.72);
    }

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


/*
 * A slow ring pushing out of a dot. box-shadow spread is used rather
 * than a scaled pseudo-element so it costs no layout and cannot add to
 * anything's scrollable area.
 */
@keyframes ui-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(226, 175, 46, .55);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(226, 175, 46, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(226, 175, 46, 0);
    }
}


@keyframes ui-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.965);
    }

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


/*
 * A number that rises out from behind its own baseline. The end inset is
 * negative rather than zero so descenders and the odd tall glyph are not
 * shaved off once the reveal has finished.
 */
@keyframes ui-reveal-up {
    from {
        clip-path: inset(110% 0 -20% 0);
        transform: translateY(9px);
    }

    to {
        clip-path: inset(-20% 0 -20% 0);
        transform: none;
    }
}


@keyframes ui-pop-in {
    0% {
        opacity: 0;
        transform: scale(.55);
    }

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

    100% {
        transform: scale(1);
    }
}


/*
 * A light sweeping across a surface, once, on hover.
 */
@keyframes ui-sheen {
    0% {
        opacity: 0;
        transform: translateX(-130%);
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(130%);
    }
}


/*
 * Identical to ui-draw, and that is the whole point.
 *
 * A CSS animation restarts only when its NAME changes. An element that
 * already carries `animation-name: ui-draw` from its resting rule will
 * not replay if a :hover rule names ui-draw again - the browser sees no
 * change and does nothing. The hover needs a name of its own.
 */
@keyframes ui-redraw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}


@keyframes ui-grow {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}


@keyframes ui-ripple {
    from {
        transform: scale(.72);
        opacity: .8;
    }

    to {
        transform: scale(1.8);
        opacity: 0;
    }
}


@keyframes ui-pop {
    0% {
        transform: scale(.72);
    }

    60% {
        transform: scale(1.16);
    }

    100% {
        transform: scale(1.07);
    }
}


.ui-rise {
    animation: ui-rise var(--ui-dur-3) var(--ui-ease-out) both;
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
        /*
         * Delays too, not just durations. Staggered entrances use
         * animation-fill-mode: backwards, which holds the element in its
         * hidden starting state until its delay elapses - so zeroing
         * only the duration would still leave a reader who asked for no
         * motion staring at blank space for a third of a second while
         * each row waited its turn.
         */
        animation-delay: 0s !important;
        transition-delay: 0s !important;
    }
}


/* =========================================================
   BLAZOR ERROR UI
   ========================================================= */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 20px;
    z-index: 99999;
    padding: 14px 48px 14px 18px;
    border: 1px solid rgba(224, 93, 105, .22);
    border-radius: 14px;
    background: #FFF4F5;
    color: #BB3544;
    font-family: inherit;
    font-size: .82rem;
    box-shadow: 0 15px 40px rgba(30, 39, 61, .15);
}


    #blazor-error-ui .reload {
        margin-inline-start: 8px;
        color: #BB3544;
        font-weight: 700;
        text-decoration: underline;
    }


    #blazor-error-ui .dismiss {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1rem;
    }


/* =========================================================
   GLOBAL THEME
   ========================================================= */

html {
    color-scheme: light;
}


    html[data-theme="dark"] {
        color-scheme: dark;
    }


        /* =========================================================
   LOGIN - DARK THEME
   ========================================================= */

        html[data-theme="dark"] .auth-page {
            --page-bg: #0B1020;
            --card-bg: #151D2D;
            --text: #F3F6FC;
            --text-secondary: #B4BDCE;
            --muted: #7D879A;
            --primary: #7D96FF;
            --primary-hover: #90A6FF;
            --primary-soft: rgba(125, 150, 255, .12);
            --primary-medium: rgba(125, 150, 255, .19);
            --border: rgba(163, 177, 204, .10);
            --input-bg: rgba(255, 255, 255, .04);
            --danger: #FF7D89;
            --danger-soft: rgba(255, 125, 137, .09);
            --shadow: 0 36px 90px rgba(0, 0, 0, .44);
            background: var(--page-bg);
            color: var(--text);
        }


        html[data-theme="dark"] .interaction-card {
            border-color: rgba(163, 177, 204, .09);
            background: var(--card-bg);
            box-shadow: 0 34px 90px rgba(0, 0, 0, .40);
        }


        html[data-theme="dark"] .header-control {
            border-color: rgba(163, 177, 204, .10);
            background: rgba(24, 33, 50, .76);
            color: var(--text-secondary);
        }


            html[data-theme="dark"] .header-control:hover {
                border-color: rgba(125, 150, 255, .34);
                color: var(--primary);
            }


        html[data-theme="dark"] .visual-circle {
            background: linear-gradient( 145deg, rgba(125, 150, 255, .12), rgba(125, 150, 255, .025));
        }


        html[data-theme="dark"] .visual-ring {
            border-color: rgba(125, 150, 255, .16);
        }


        html[data-theme="dark"] .phone-device,
        html[data-theme="dark"] .message-card {
            background: #1C2638;
            border-color: rgba(163, 177, 204, .10);
        }


        html[data-theme="dark"] .phone-speaker {
            background: #566176;
        }


        html[data-theme="dark"] .phone-message-line,
        html[data-theme="dark"] .message-lines span {
            background: #354158;
        }


        html[data-theme="dark"] .floating-check,
        html[data-theme="dark"] .floating-sms {
            border-color: #151D2D;
        }


        html[data-theme="dark"] .phone-field {
            border-color: rgba(163, 177, 204, .10);
            background: linear-gradient( 180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
            box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
        }


            html[data-theme="dark"] .phone-field:hover {
                border-color: rgba(125, 150, 255, .30);
            }


            html[data-theme="dark"] .phone-field:focus-within {
                border-color: rgba(125, 150, 255, .74);
                background: rgba(255, 255, 255, .055);
                box-shadow: 0 0 0 4px rgba(125, 150, 255, .10), 0 12px 32px rgba(0, 0, 0, .25);
            }


        html[data-theme="dark"] .country-section {
            background: linear-gradient( 135deg, rgba(125, 150, 255, .14), rgba(125, 150, 255, .04));
        }


            html[data-theme="dark"] .country-section::after {
                background: linear-gradient( to bottom, transparent, rgba(163, 177, 204, .12) 20%, rgba(163, 177, 204, .12) 80%, transparent);
            }


        html[data-theme="dark"] .country-flag {
            border-color: rgba(163, 177, 204, .09);
            background: rgba(255, 255, 255, .06);
        }


        html[data-theme="dark"] .country-number {
            color: #F1F4FB;
        }


        html[data-theme="dark"] .otp-digit {
            border-color: rgba(163, 177, 204, .10);
            background: rgba(255, 255, 255, .04);
            color: var(--text);
        }


            html[data-theme="dark"] .otp-digit:hover {
                border-color: rgba(125, 150, 255, .30);
            }


            html[data-theme="dark"] .otp-digit:focus {
                border-color: rgba(125, 150, 255, .70);
                background: rgba(255, 255, 255, .055);
                box-shadow: 0 0 0 3px rgba(125, 150, 255, .09);
            }


            html[data-theme="dark"] .otp-digit.has-value {
                border-color: rgba(125, 150, 255, .38);
                background: rgba(125, 150, 255, .12);
                color: #9AAEFF;
            }


        html[data-theme="dark"] .auth-error {
            background: rgba(255, 125, 137, .09);
        }


        html[data-theme="dark"] .card-footer {
            border-color: rgba(163, 177, 204, .08);
        }


        /* =========================================================
   THEME ICONS
   ========================================================= */

        html[data-theme="dark"] .theme-light-icon {
            display: none;
        }


        html[data-theme="dark"] .theme-dark-icon {
            display: block;
        }


    html[data-theme="light"] .theme-light-icon {
        display: block;
    }


    html[data-theme="light"] .theme-dark-icon {
        display: none;
    }


/* =========================================================
   DEFAULT VALIDATION
   ========================================================= */

h1:focus {
    outline: none;
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #28B879;
}


.invalid {
    outline: 1px solid #E05D69;
}


.validation-message {
    color: #D84F5C;
}


/* =========================================================
   BLAZOR ERROR BOUNDARY
   ========================================================= */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cub3JnLzIwMDAvc3ZnIiBvdmVyZmxvdz0iaGlkZGVuIj48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB4PSIyMzUiIHk9IjUxIiB3aWR0aD0iNTYiIGhlaWdodD0iNDkiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjM1IC01MSkiPjxwYXRoIGQ9Ik0yNjMuNTA2IDUxQzI2NC43MTcgNTEgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDYgNTIuMjY1OEwyNjcuMDUyIDUyLjc5ODcgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NSAyOTAuNjU2IDkyLjk5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiA5NC42NzgyIDIzNiA5NC4zNzk5IDIzNi4wMzEgOTQuMDg4NiAyMzYuMDg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44NTggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVpNMjYzLjU4NiA2Ni4wMTgzQzI2MC43MzcgNjYuMDE4MyAyNTkuMzEzIDY3LjEyNDUgMjU5LjMxMyA2OS4zMzcgMjU5LjMxMyA2OS42MTAyIDI1OS4zMzIgNjkuODYwOCAyNTkuMzcxIDcwLjA4ODdMMjYxLjc5NSA4NC4wMTYxIDI2NS4zOCA4NC4wMTYxIDI2Ny44MjEgNjkuNzQ3NUMyNjcuODYgNjkuNzMwOSAyNjcuODc5IDY5LjU4NzcgMjY3Ljg3OSA2OS4zMTc5IDI2Ny44NzkgNjcuMTE4MiAyNjYuNDQ4IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA5Mi4yODM3IDI2MS4wNDkgOTMuNTI5NSAyNjMuNTc2IDkzLjUyOTUgMjY2LjExNiA5My41Mjk1IDI2Ny4zODcgOTIuMjgzNyAyNjcuMzg3IDg5Ljc5MjEgMjY3LjM4NyA4Ny4zMDA1IDI2Ni4xMTYgODYuMDU0NyAyNjMuNTc2IDg2LjA1NDdaIiBmaWxsPSIjRkZFNTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+) no-repeat 1rem / 1.8rem, #B73242;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}


    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }


.darker-border-checkbox.form-check-input {
    border-color: #8993A5;
}


/* =========================================================
   MODERN APP SHELL - DARK MODE
   ========================================================= */

/*
 * The shell after dark. Same names, same job as the light block in
 * MainLayout: only what they point at differs, so the six hundred rules
 * beneath them need no dark counterpart.
 *
 * --accent-text is the amber itself here. On a light page the accent has
 * to darken to be legible as text; on this ground it already is, and
 * dimming it would only make it harder to read.
 */
html[data-theme="dark"] .app-surface {
    --accent: var(--ui-accent);
    --accent-text: var(--ui-accent);
    --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(129 115 90 / 75%);
    --frame-border: var(--ui-line-bright);
    --sidebar-bg-start: rgb(65 55 40);
    --sidebar-bg-end: rgb(45 38 26);
    --sidebar-text: var(--ui-ink-2);
    --sidebar-text-active: var(--ui-ink);
    --sidebar-icon-bg: rgba(255, 238, 209, .07);
    --sidebar-hover-bg: rgba(255, 238, 209, .10);
    --sidebar-active-bg: var(--ui-accent-soft);
    --panel-bg: rgb(45 38 26 / 83%);
    --surface: rgb(137 123 100 / 41%);
    --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(251, 205, 92, .34);
    --credit-bg: var(--ui-accent-soft);
    --danger: var(--ui-danger);
    --danger-border: rgba(231, 144, 121, .24);
    color: var(--text);
}


/* =========================================================
   DARK FRAME
   ========================================================= */

html[data-theme="dark"] .app-frame {
    box-shadow: 0 35px 100px rgba(0, 0, 0, .50), inset 0 1px 0 rgba(255, 255, 255, .035);
}


/* =========================================================
   DARK SIDEBAR
   ========================================================= */

html[data-theme="dark"] .app-sidebar {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 50px rgba(0, 0, 0, .30);
}


/* =========================================================
   DARK HEADER / CREDIT / BUTTONS
   ========================================================= */

html[data-theme="dark"] .header-credit {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}


html[data-theme="dark"] .header-credit-icon {
    color: #9AABFF;
}


html[data-theme="dark"] .header-action-button:hover {
    color: #9AABFF;
}


html[data-theme="dark"] .mobile-menu-button {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-secondary);
}


/* =========================================================
   DARK BLAZOR ERROR
   ========================================================= */

html[data-theme="dark"] #blazor-error-ui {
    border-color: rgba(255, 124, 136, .18);
    background: #271A22;
    color: #FF9AA4;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .30);
}


    html[data-theme="dark"] #blazor-error-ui .reload {
        color: #FF9AA4;
    }


/* =========================================================
   LOCK BROWSER SCROLL WHILE APP SHELL IS ACTIVE
   ========================================================= */

html:has(.app-surface),
body:has(.app-surface) {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: none;
}


html[data-theme="dark"] .header-logout-button {
    color: var(--text-primary);
}

html[data-theme="dark"] .header-logout-button:hover {
    color: #ff7b8b;
    border-color: rgba(255, 123, 139, 0.28);
    background: rgba(255, 123, 139, 0.08);
}

/* =========================================================
   GLOSSARY FALLBACK STYLES
   These rules live in the main bundle as well as component CSS
   so interactive navigation never renders the glossary as raw HTML.
   ========================================================= */

.glossary-page { --g:#1844c6; --line:rgba(30,45,75,.14); --muted:#6f7786; display:grid; gap:20px; color:#202633; }
.glossary-hero,.glossary-library,.glossary-summary article,.glossary-state { border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 12px 30px rgba(25,38,70,.05); }
.glossary-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 32px; background:linear-gradient(135deg,#fff,#f7f9ff); }
.glossary-hero h1,.glossary-title h2 { margin:7px 0; color:#1f2940; }.glossary-hero>div>span,.glossary-title>div>span { color:var(--g); font-size:.62rem; font-weight:800; letter-spacing:.1em; }.glossary-hero p{max-width:700px;margin:0;color:var(--muted);font-size:.76rem;line-height:1.9}
.glossary-primary{border:0;border-radius:12px;padding:11px 15px;background:var(--g);color:#fff;font:inherit;font-size:.68rem;font-weight:800;cursor:pointer;white-space:nowrap}.glossary-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.glossary-summary article{padding:18px}.glossary-summary small{display:block;color:var(--muted);font-size:.62rem}.glossary-summary strong{display:block;margin-top:9px;font-size:1.42rem}.glossary-library{padding:24px}.glossary-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.glossary-title h2{font-size:1rem}.glossary-toolbar{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:9px;margin-bottom:18px}
.glossary-toolbar input,.glossary-toolbar select,.glossary-modal input:not([type="checkbox"]),.glossary-modal textarea,.glossary-modal select{width:100%;min-height:42px;box-sizing:border-box;border:1px solid rgba(39,55,85,.28);border-radius:10px;padding:10px;background:#f7f9fd;color:#202633;font:inherit;font-size:.66rem;box-shadow:inset 0 1px 2px rgba(20,34,61,.03)}.glossary-toolbar input:focus,.glossary-modal input:focus,.glossary-modal textarea:focus,.glossary-modal select:focus{outline:none;border-color:var(--g);background:#fff;box-shadow:0 0 0 3px rgba(24,68,198,.12)}.glossary-modal textarea{min-height:88px;resize:vertical}

/* =========================================================
   GLOSSARY (minified block)
   =========================================================
   The two state rules at the end of this block used to be bare
   `.active` and `.inactive` selectors in global scope, so they
   coloured any element anywhere in the application that used
   either class name - a dashboard card marked `active` picked
   up glossary green through inheritance. They are scoped to the
   glossary page now, and their colours come from the tokens.

   Nothing else in this block is scoped either; adding a single
   -word class selector here reaches the whole application.
   ========================================================= */
.glossary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.glossary-card{padding:17px;border:1px solid var(--line);border-radius:17px;background:#fff}.glossary-card-top,.glossary-card footer{display:flex;justify-content:space-between;align-items:center}.glossary-card h3{margin:15px 0 6px;font-size:.84rem}.glossary-card p{height:34px;margin:0;color:var(--muted);font-size:.64rem;line-height:1.7;overflow:hidden}.glossary-pair{margin:15px 0;color:var(--g);font-size:.65rem;font-weight:800}.glossary-card footer{border-top:1px solid var(--line);padding-top:11px}.glossary-card button{border:0;background:transparent;color:var(--g);cursor:pointer}.glossary-card button.danger{color:#c84d52}.glossary-page .active{color:var(--ui-success)}.glossary-page .inactive{color:var(--ui-warning)}
.glossary-empty,.glossary-state{text-align:center;padding:50px}.glossary-modal{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:18px;background:rgba(16,22,34,.4);backdrop-filter:blur(7px)}.glossary-modal section{width:min(100%,510px);padding:23px;border:1px solid rgba(24,68,198,.14);border-radius:20px;background:#fff;color:#202633;box-shadow:0 28px 70px rgba(0,0,0,.2)}.glossary-modal h3{margin:0 0 15px}.glossary-modal label{display:block;margin-top:11px;color:#303a4d;font-size:.64rem;font-weight:750}.glossary-modal label input,.glossary-modal label textarea,.glossary-modal label select{margin-top:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.glossary-modal .toggle{display:flex;align-items:center;gap:7px;padding:10px 11px;border:1px solid rgba(39,55,85,.18);border-radius:10px;background:#f7f9fd}.glossary-modal .toggle input{width:auto;margin:0}.glossary-modal footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.glossary-modal footer>button:first-child{border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:#fff;font:inherit;cursor:pointer}.form-error{color:#c84d52;font-size:.65rem}
html[data-theme="dark"] .glossary-page{--line:rgba(255,255,255,.09);--muted:#a3aab7;color:#edf0f5}html[data-theme="dark"] .glossary-hero,html[data-theme="dark"] .glossary-library,html[data-theme="dark"] .glossary-summary article,html[data-theme="dark"] .glossary-state,html[data-theme="dark"] .glossary-card,html[data-theme="dark"] .glossary-modal section{background:#20242c;color:#edf0f5}html[data-theme="dark"] .glossary-hero h1,html[data-theme="dark"] .glossary-title h2,html[data-theme="dark"] .glossary-modal label{color:#f1f3f7}html[data-theme="dark"] .glossary-toolbar input,html[data-theme="dark"] .glossary-toolbar select,html[data-theme="dark"] .glossary-modal input:not([type="checkbox"]),html[data-theme="dark"] .glossary-modal textarea,html[data-theme="dark"] .glossary-modal select,html[data-theme="dark"] .glossary-modal .toggle{border-color:rgba(255,255,255,.16);background:#171b22;color:#edf0f5}
@media(max-width:900px){.glossary-summary{grid-template-columns:repeat(2,1fr)}.glossary-toolbar{grid-template-columns:1fr 1fr}.glossary-toolbar input{grid-column:1/-1}.glossary-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.glossary-hero{align-items:flex-start;flex-direction:column;padding:22px}.glossary-primary{width:100%}.glossary-summary,.glossary-grid,.form-grid{grid-template-columns:1fr}.glossary-library{padding:16px}.glossary-toolbar{grid-template-columns:1fr}.glossary-modal section{padding:19px}.glossary-modal footer{flex-direction:column-reverse}.glossary-modal footer button{width:100%}}

/* The modal actions deliberately use independent classes so global button rules cannot hide the submit action. */
.glossary-modal .glossary-modal-actions { display:flex; align-items:center; width:100%; gap:10px; margin-top:20px; }
.glossary-modal .glossary-modal-cancel { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border:1px solid #ccd4e1; border-radius:10px; background:#fff; color:#283247; font:inherit; cursor:pointer; }
.glossary-modal .glossary-modal-submit { display:inline-flex !important; visibility:visible !important; align-items:center; justify-content:center; min-height:42px; margin-inline-start:auto; padding:10px 18px; border:1px solid #1844c6; border-radius:10px; background:#1844c6 !important; color:#fff !important; font:inherit; font-weight:800; cursor:pointer; opacity:1; }
.glossary-modal .glossary-modal-submit:disabled { cursor:wait; opacity:.65; }
@media(max-width:600px){.glossary-modal .glossary-modal-actions{flex-direction:column-reverse}.glossary-modal .glossary-modal-actions button{width:100%}.glossary-modal .glossary-modal-submit{margin-inline-start:0}}

.tm-page{--tm:#1844c6;--tmline:#dfe5ef;color:#202633}.tm-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 32px;background:linear-gradient(135deg,#fff,#f7f9ff)}.tm-hero span{font-size:.65rem;color:var(--tm);font-weight:800;letter-spacing:.08em}.tm-hero h1{margin:7px 0;color:#1f2940}.tm-hero p{max-width:720px;margin:0;color:#687386;line-height:1.85}.tm-primary{border:0;border-radius:10px;padding:11px 16px;background:var(--tm);color:#fff;font:inherit;font-weight:800;cursor:pointer}.tm-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:20px 0}.tm-summary article,.tm-panel{padding:19px;border:1px solid var(--tmline);border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(19,37,72,.04)}.tm-summary small{display:block;color:#697487}.tm-summary strong{display:block;margin-top:8px;font-size:1.35rem}.tm-toolbar{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:9px}.tm-toolbar input,.tm-toolbar select,.tm-modal select,.tm-modal textarea{box-sizing:border-box;width:100%;min-height:42px;border:1px solid #cbd4e1;border-radius:10px;padding:9px;background:#f8faff;color:#202633;font:inherit}.tm-bulk{display:flex;align-items:center;gap:10px;padding:14px 0}.tm-bulk button,.tm-row button{border:0;background:transparent;color:var(--tm);font:inherit;cursor:pointer}.tm-danger{color:#bc3f4c!important}.tm-table{margin-top:9px}.tm-row{display:grid;grid-template-columns:28px 1.7fr 1.7fr .7fr .35fr .7fr;gap:12px;align-items:center;padding:13px 8px;border-bottom:1px solid var(--tmline);font-size:.78rem}.tm-row.selected{background:#eef3ff}.tm-head{font-size:.68rem;color:#667287}.tm-state{text-align:center;padding:40px}.tm-modal{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:18px;background:rgba(18,25,40,.43);backdrop-filter:blur(6px)}.tm-modal section{width:min(100%,540px);padding:24px;border-radius:18px;background:#fff;box-shadow:0 28px 70px rgba(0,0,0,.25)}.tm-modal h2{margin-top:0}.tm-modal label{display:block;margin-top:12px;font-size:.75rem;font-weight:700}.tm-modal textarea{min-height:82px;margin-top:5px;resize:vertical}.tm-toggle{display:flex!important;gap:8px;align-items:center}.tm-modal footer{display:flex;gap:10px;margin-top:20px}.tm-modal footer>button:first-child{border:1px solid #ccd5e2;border-radius:10px;padding:10px 16px;background:#fff;font:inherit;cursor:pointer}.tm-modal footer .tm-primary{margin-inline-start:auto}.tm-error{color:#bb3647}@media(max-width:800px){.tm-summary{grid-template-columns:repeat(2,1fr)}.tm-toolbar{grid-template-columns:1fr 1fr}.tm-toolbar input{grid-column:1/-1}.tm-head{display:none}.tm-row{grid-template-columns:28px 1fr;padding:14px 0}.tm-row>div{display:grid;grid-template-columns:105px 1fr;gap:9px}.tm-row>div:before{content:attr(data-label);color:#667287;font-size:.65rem}.tm-row>div:nth-last-child(-n+2):before{content:""}}@media(max-width:600px){.tm-hero{align-items:flex-start;flex-direction:column;padding:22px}.tm-hero .tm-primary{width:100%}.tm-summary{grid-template-columns:1fr}.tm-toolbar{grid-template-columns:1fr}.tm-modal footer{flex-direction:column-reverse}.tm-modal footer button{width:100%}.tm-modal footer .tm-primary{margin-inline-start:0}}
html[data-theme="dark"] .tm-page{--tmline:rgba(255,255,255,.12);color:#eef1f6}html[data-theme="dark"] .tm-hero,html[data-theme="dark"] .tm-summary article,html[data-theme="dark"] .tm-panel,html[data-theme="dark"] .tm-modal section{background:#20242c;color:#eef1f6}html[data-theme="dark"] .tm-hero h1{color:#fff}html[data-theme="dark"] .tm-toolbar input,html[data-theme="dark"] .tm-toolbar select,html[data-theme="dark"] .tm-modal select,html[data-theme="dark"] .tm-modal textarea{background:#161a21;color:#eef1f6;border-color:#4a5362}

/* =========================================================
   ROUTE NOT FOUND
   ========================================================= */

.route-not-found { display:grid; justify-items:center; gap:14px; padding:80px 24px; text-align:center; }
.route-not-found h1 { margin:0; font-size:3rem; color:#1844c6; letter-spacing:.04em; }
.route-not-found p { margin:0; color:#687386; font-size:.85rem; }
.route-not-found a { display:inline-flex; align-items:center; min-height:42px; padding:10px 20px; border-radius:10px; background:#1844c6; color:#fff; font-weight:800; font-size:.72rem; text-decoration:none; }
html[data-theme="dark"] .route-not-found p { color:#a3aab7; }

/* file-download.js: shown when the one-byte check says the file is not ready. */
.file-download-toast { position:fixed; inset-inline:16px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:10000; max-width:420px; margin-inline:auto; padding:12px 16px; border-radius:12px; background:var(--ui-ink, #1c1b17); color:#fff; font-size:.85rem; line-height:1.6; box-shadow:0 12px 32px rgba(0,0,0,.25); }
html[data-theme="dark"] .file-download-toast { background:#f5efe3; color:#1c1b17; }


/* =========================================================
   SELECT ARROWS IN THE USER PANEL
   The browser's own arrow sits a few pixels from the edge of
   the field and cannot be moved, so in every page of the user
   panel it is replaced by a chevron 14px in from the end side
   of the field: the left edge in Persian, the right in English.
   !important because each page sets the field's background as
   a shorthand, which would take the chevron away again. The
   documents filter draws an arrow of its own and keeps it.
   ========================================================= */

.app-surface select:not([multiple]):not([size]):not(.documents-filter select) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6759' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    background-position: right 14px center !important;
    padding-inline-end: 40px !important;
    cursor: pointer;
}

.app-surface[dir="rtl"] select:not([multiple]):not([size]):not(.documents-filter select) {
    background-position: left 14px center !important;
}

html[data-theme="dark"] .app-surface select:not([multiple]):not([size]):not(.documents-filter select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cec5b4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}



/* =========================================================
   NO SCROLLBARS IN THE USER PANEL
   Everything still scrolls (wheel, touch, keyboard); only the
   bars are not drawn. !important because the sidebar and some
   pages style a thin bar of their own in scoped CSS.
   ========================================================= */

.app-surface,
.app-surface *,
html:has(.app-surface),
body:has(.app-surface) {
    scrollbar-width: none !important;
}

.app-surface::-webkit-scrollbar,
.app-surface *::-webkit-scrollbar,
html:has(.app-surface)::-webkit-scrollbar,
body:has(.app-surface)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* =========================================================
   PROGRESS BARS
   One colour for every progress bar of the user panel
   (analysis, translation, the dashboard and the documents
   list): brown on the light theme, where the gold was faint
   against the cream cards, and the gold on the dark theme.
   ========================================================= */

:root {
    --ui-progress-fill: linear-gradient(90deg, #8a6a46, #4a3929);
    --ui-progress-track: rgba(74, 57, 41, .13);
    --ui-progress-glow: 0 4px 14px rgba(74, 57, 41, .24);
}

html[data-theme="dark"] {
    --ui-progress-fill: linear-gradient(90deg, var(--ui-accent-strong), var(--ui-accent));
    --ui-progress-track: var(--ui-accent-soft);
    --ui-progress-glow: var(--ui-shadow-accent);
}