@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700;800&family=DM+Mono:wght@500;700&family=Vazirmatn:wght@400;500;600;700;800&display=swap");

:root {
    color-scheme: dark;
    --ink: #12231d;
    --ink-soft: #61716a;
    --ink-faint: #87958f;
    --canvas: #edf2ef;
    --canvas-deep: #e5ece7;
    --paper: #ffffff;
    --paper-alt: #f8fbf9;
    --line: #dce5df;
    --line-strong: #c9d6ce;

    --carbon-950: #071510;
    --carbon-900: #0b2119;
    --forest-950: #102b20;
    --forest-900: #133b2b;
    --forest-800: #18513a;
    --forest-700: #237152;
    --forest-600: #2d8a64;
    --gold-600: #b98d20;
    --gold-500: #d7b751;
    --gold-400: #ebd180;
    --gold-100: #fff7dc;

    --blue-100: #e9f4fc;
    --blue-600: #1e6e9e;
    --green-100: #e8f7ee;
    --green-700: #197443;
    --amber-100: #fff5d8;
    --amber-700: #916300;
    --red-100: #fff0ee;
    --red-700: #b3362d;
    --slate-100: #eff3f1;
    --slate-600: #66736e;

    --shadow-xs: 0 1px 2px rgba(8, 29, 20, .05);
    --shadow-sm: 0 7px 18px rgba(11, 39, 27, .065);
    --shadow: 0 18px 42px rgba(11, 39, 27, .10);
    --shadow-lg: 0 28px 70px rgba(6, 27, 18, .17);
    --ring: 0 0 0 4px rgba(215, 183, 81, .22);
    --radius-xs: 8px;
    --radius-sm: 11px;
    --radius: 18px;
    --radius-lg: 26px;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 2%, rgba(215, 183, 81, .10), transparent 27rem),
        radial-gradient(circle at 96% 20%, rgba(35, 113, 82, .075), transparent 32rem),
        linear-gradient(135deg, var(--canvas), var(--canvas-deep));
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    direction: rtl;
    text-align: right;
}

body.has-app-shell {
    background:
        radial-gradient(circle at 13% 0%, rgba(215, 183, 81, .13), transparent 24rem),
        radial-gradient(circle at 92% 24%, rgba(36, 113, 82, .07), transparent 31rem),
        linear-gradient(135deg, #eff3f0 0%, #e8efea 100%);
}

body.has-public-shell {
    color: #eff8f3;
    background-color: var(--carbon-950);
    background-image:
        linear-gradient(125deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(35deg, rgba(215,183,81,.035) 1px, transparent 1px),
        radial-gradient(circle at 12% 2%, rgba(45,138,100,.28), transparent 28rem),
        radial-gradient(circle at 92% 14%, rgba(215,183,81,.13), transparent 22rem),
        linear-gradient(135deg, #071510 0%, #0a2018 52%, #0d2a1e 100%);
    background-size: 36px 36px, 36px 36px, auto, auto, auto;
}

::selection { color: var(--carbon-950); background: var(--gold-400); }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(215, 183, 81, .82);
    outline-offset: 3px;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand strong { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }

/* Shared UI */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand-mark {
    position: relative;
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    overflow: hidden;
    color: var(--carbon-950);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 12px;
    background: linear-gradient(145deg, #f4dd90, var(--gold-500) 50%, #c7992d);
    box-shadow: 0 8px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45);
    font-family: "DM Mono", "Barlow", monospace;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.brand-mark::after {
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(15,39,28,.17);
    border-radius: 8px;
    content: "";
    pointer-events: none;
}

.brand-copy { display: grid; gap: 2px; line-height: 1; }
.brand-copy strong { color: inherit; font-size: 18px; letter-spacing: .02em; }
.brand-copy small {
    color: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .035em;
    opacity: .62;
    text-transform: uppercase;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: var(--forest-700);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.25;
}

.eyebrow::before {
    width: 18px;
    height: 2px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    content: "";
    opacity: .8;
}

.muted { color: var(--ink-soft); font-size: 13px; }
.optional { color: var(--ink-soft); font-size: 11px; font-weight: 500; }

.button {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); box-shadow: none; }
.button-gold {
    color: #172217;
    border-color: rgba(255,255,255,.20);
    background: linear-gradient(135deg, #efd886, var(--gold-500) 55%, #c99c31);
    box-shadow: 0 10px 22px rgba(174, 135, 25, .26), inset 0 1px 0 rgba(255,255,255,.42);
}
.button-gold:hover { background: linear-gradient(135deg, #f7e59c, var(--gold-400) 55%, var(--gold-500)); box-shadow: 0 13px 28px rgba(174, 135, 25, .33); }
.button-dark {
    color: #fff;
    border-color: rgba(255,255,255,.06);
    background: linear-gradient(135deg, var(--forest-900), var(--forest-800));
    box-shadow: 0 9px 20px rgba(16,43,32,.18);
}
.button-dark:hover { background: linear-gradient(135deg, var(--forest-800), var(--forest-700)); }
.button-outline {
    color: #fff;
    border-color: rgba(255,255,255,.36);
    background: rgba(255,255,255,.035);
    box-shadow: none;
}
.button-outline:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.10); }
.button-outline-dark {
    color: var(--forest-900);
    border-color: var(--line-strong);
    background: var(--paper);
    box-shadow: var(--shadow-xs);
}
.button-outline-dark:hover { color: var(--forest-700); border-color: var(--forest-700); background: #f5faf7; }
.button-success { color: #fff; background: linear-gradient(135deg, #238653, var(--green-700)); }
.button-danger { color: #fff; background: linear-gradient(135deg, #ca493e, var(--red-700)); }
.button-danger-outline { color: var(--red-700); border-color: #efbbb4; background: var(--red-100); box-shadow: none; }
.button-small { min-height: 34px; padding: 7px 11px; border-radius: 9px; font-size: 11px; }
.button-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button-row-center { justify-content: center; }

/* Public and authentication shell */
.public-shell {
    position: relative;
    display: flex;
    width: min(1220px, calc(100% - 48px));
    min-height: 100vh;
    flex-direction: column;
    margin: 0 auto;
}

.public-header {
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.public-header .brand { color: #fff; }
.public-nav { display: flex; align-items: center; gap: 24px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; }
.public-nav > a:not(.button) { position: relative; padding: 6px 0; }
.public-nav > a:not(.button)::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    border-radius: 99px;
    background: var(--gold-400);
    content: "";
    transition: width .18s ease;
}
.public-nav > a:not(.button):hover { color: #fff; }
.public-nav > a:not(.button):hover::after { width: 100%; }
.public-main { display: flex; flex: 1; flex-direction: column; justify-content: center; }

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    align-items: center;
    gap: clamp(44px, 9vw, 124px);
    padding: 82px 0 70px;
}

.hero-copy { max-width: 665px; }
.hero .eyebrow, .auth-aside .eyebrow { color: var(--gold-400); }
.hero h1 {
    max-width: 690px;
    margin-bottom: 21px;
    color: #fff;
    font-size: clamp(40px, 5vw, 68px);
    letter-spacing: -.035em;
    line-height: 1.1;
    text-wrap: balance;
}

.hero-lead {
    max-width: 585px;
    margin-bottom: 29px;
    color: rgba(240,248,243,.69);
    font-size: 17px;
    line-height: 1.78;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 17px 0 0; color: rgba(240,248,243,.46); font-size: 12px; }

.hero-panel {
    position: relative;
    padding: 29px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(235,209,128,.24);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
        linear-gradient(135deg, rgba(30,94,67,.72), rgba(9,31,22,.84));
    box-shadow: 0 28px 65px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.09);
}

.hero-panel::after {
    position: absolute;
    top: -50px;
    left: -35px;
    width: 160px;
    height: 160px;
    border: 22px solid rgba(235,209,128,.055);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hero-panel > * { position: relative; z-index: 1; }
.hero-panel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 100%; background: var(--gold-400); box-shadow: 0 0 0 5px rgba(215,183,81,.13); }
.workflow-list { display: grid; gap: 21px; margin: 0; padding: 0; list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
.workflow-list li > span { color: var(--gold-400); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 700; }
.workflow-list strong, .workflow-list small { display: block; }
.workflow-list strong { font-size: 14px; }
.workflow-list small { margin-top: 4px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.65; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding-bottom: 53px; }
.feature-card {
    position: relative;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.feature-card::before { position: absolute; top: 0; right: 22px; left: 22px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); content: ""; opacity: .68; }
.feature-card:hover { border-color: rgba(235,209,128,.32); background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.028)); transform: translateY(-3px); }
.feature-number { color: var(--gold-400); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.feature-card h2 { margin: 17px 0 8px; color: #fff; font-size: 17px; }
.feature-card p { margin: 0; color: rgba(255,255,255,.60); font-size: 13px; line-height: 1.72; }

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(400px, .72fr);
    align-items: center;
    gap: clamp(45px, 10vw, 135px);
    padding: 57px 0 70px;
}

.auth-layout-wide { grid-template-columns: minmax(0, .74fr) minmax(460px, .86fr); }
.auth-aside { max-width: 470px; }
.auth-aside h1 { margin-bottom: 16px; color: #fff; font-size: clamp(34px, 4vw, 53px); letter-spacing: -.03em; line-height: 1.16; text-wrap: balance; }
.auth-aside > p:not(.eyebrow) { color: rgba(240,248,243,.66); font-size: 16px; line-height: 1.8; }
.auth-aside-card {
    display: grid;
    gap: 4px;
    margin-top: 31px;
    padding: 18px 19px;
    border: 1px solid rgba(255,255,255,.10);
    border-right: 3px solid var(--gold-500);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
}
.auth-aside-card strong { color: #fff; font-size: 14px; }
.auth-aside-card span { color: rgba(255,255,255,.61); font-size: 13px; line-height: 1.65; }
.auth-card {
    position: relative;
    width: 100%;
    padding: 35px;
    overflow: hidden;
    color: var(--ink);
    border: 1px solid rgba(255,255,255,.70);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.98);
    box-shadow: var(--shadow-lg), inset 0 1px 0 #fff;
}
.auth-card::before { position: absolute; top: 0; right: 35px; left: 35px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--forest-800), var(--gold-500), var(--forest-800)); content: ""; }
.auth-card-wide { padding: 33px 37px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.section-heading-stack { display: block; }
.section-heading h2 { margin: 0 0 5px; color: var(--forest-950); font-size: 25px; letter-spacing: -.02em; }
.section-heading p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 13px; }
.auth-switch { margin: 23px 0 0; color: var(--ink-soft); font-size: 12px; text-align: center; }
.auth-switch a, .text-link { color: var(--forest-700); font-weight: 800; }
.auth-switch a:hover, .text-link:hover { color: var(--forest-900); text-decoration: underline; text-underline-offset: 3px; }

/* Application shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    width: 258px;
    min-width: 258px;
    height: 100vh;
    flex-direction: column;
    padding: 25px 16px 18px;
    overflow: hidden;
    color: #eaf4ef;
    border-left: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 84% 3%, rgba(215,183,81,.17), transparent 12rem),
        radial-gradient(circle at 8% 74%, rgba(40,113,82,.22), transparent 15rem),
        linear-gradient(165deg, #0a2119 0%, #071711 100%);
    box-shadow: -8px 0 30px rgba(5,23,15,.11);
}
.sidebar::after {
    position: absolute;
    bottom: -84px;
    left: -76px;
    width: 200px;
    height: 200px;
    border: 25px solid rgba(215,183,81,.035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 7px; }
.sidebar .brand { color: #fff; }
.sidebar-close { display: none; color: #fff; border: 0; background: transparent; font-size: 26px; line-height: 1; }
.sidebar-nav { display: grid; gap: 4px; margin-top: 46px; }
.nav-label { margin: 0 10px 10px; color: rgba(255,255,255,.40); font-size: 10px; font-weight: 700; letter-spacing: .045em; }
.nav-link {
    position: relative;
    display: flex;
    min-height: 45px;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    color: rgba(255,255,255,.68);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: color .17s ease, background .17s ease, border-color .17s ease, transform .17s ease;
}
.nav-link:hover { color: #fff; border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.07); transform: translateX(-2px); }
.nav-link.is-active {
    color: #fff;
    border-color: rgba(235,209,128,.18);
    background: linear-gradient(90deg, rgba(215,183,81,.08), rgba(215,183,81,.18));
    box-shadow: inset -3px 0 0 var(--gold-500), 0 6px 17px rgba(0,0,0,.09);
}
.nav-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--gold-400);
    border: 1px solid rgba(235,209,128,.16);
    border-radius: 7px;
    background: rgba(215,183,81,.07);
    font-size: 13px;
    line-height: 1;
}
.nav-link.is-active .nav-icon { color: var(--carbon-950); border-color: transparent; background: var(--gold-400); }
.sidebar-bottom { margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.10); }
.account-card { display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid transparent; border-radius: 11px; transition: background .16s ease, border-color .16s ease; }
.account-card:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.07); }
.account-copy { display: grid; min-width: 0; gap: 2px; }
.account-copy strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }
.account-copy small { overflow: hidden; color: rgba(255,255,255,.51); font-size: 10px; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }
.account-actions { display: flex; align-items: center; justify-content: space-between; padding: 12px 9px 0; color: rgba(255,255,255,.53); font-size: 11px; }
.account-actions a:hover, .account-actions button:hover { color: var(--gold-400); }
.account-actions form { margin: 0; }
.account-actions button { padding: 0; color: inherit; border: 0; background: transparent; font-weight: 700; }

.app-main {
    display: flex;
    width: calc(100% - 258px);
    min-width: 0;
    min-height: 100vh;
    flex-direction: column;
}

.main-content {
    width: min(1440px, 100%);
    min-height: 0;
    flex: 1 0 auto;
    margin: 0 auto;
    padding: 47px clamp(24px, 4vw, 68px) 42px;
}

.mobile-header { display: none; }

/* Shared footer */
.platform-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
}
.platform-footer-divider { color: var(--gold-500); font-size: 13px; line-height: 1; }
.platform-footer-public {
    min-height: 58px;
    padding: 20px 0 27px;
    color: rgba(236,247,240,.50);
    border-top: 1px solid rgba(255,255,255,.08);
}
.platform-footer-app {
    width: min(1440px, calc(100% - clamp(48px, 8vw, 136px)));
    min-height: 54px;
    margin: 0 auto;
    padding: 15px 0 22px;
    color: var(--ink-faint);
    border-top: 1px solid rgba(18,35,29,.10);
}

/* Application content */
.page-heading { display: flex; gap: 25px; margin-bottom: 29px; }
.page-heading-actions { align-items: flex-end; justify-content: space-between; }
.page-heading h1 { margin: 0 0 7px; color: var(--forest-950); font-size: clamp(28px, 3.2vw, 39px); letter-spacing: -.035em; line-height: 1.18; text-wrap: balance; }
.page-heading > div > p:not(.eyebrow), .page-heading > p { max-width: 690px; margin-bottom: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.72; }
.heading-person { display: flex; align-items: center; gap: 15px; }
.heading-person .eyebrow { margin-bottom: 3px; }
.heading-person h1 { margin-bottom: 3px; }
.heading-person > div > p { margin: 0; }

.notice-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 21px;
    padding: 13px 15px;
    color: #685013;
    border: 1px solid #ead28c;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #fff7dd, #fffaf0);
    box-shadow: var(--shadow-xs);
    font-size: 13px;
}
.notice-banner a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.flash-stack { display: grid; gap: 9px; margin-bottom: 20px; }
.flash {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 14px;
    border: 1px solid;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    font-size: 13px;
    font-weight: 700;
}
.flash-success { color: #176a3c; border-color: #bee7cd; background: var(--green-100); }
.flash-error, .flash-danger { color: var(--red-700); border-color: #f2c3bd; background: var(--red-100); }
.flash-warning { color: #795800; border-color: #efd994; background: var(--amber-100); }
.flash-info { color: var(--blue-600); border-color: #c5ddf3; background: var(--blue-100); }
.flash-dismiss { padding: 0; color: currentColor; border: 0; background: none; font-size: 19px; line-height: 1; }

.stats-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.stats-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.stat-card {
    position: relative;
    min-height: 133px;
    padding: 19px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(201,214,206,.9);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #fff, #f8fbf9);
    box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 19px;
    width: 42px;
    height: 3px;
    border-radius: 99px;
    background: var(--forest-700);
    content: "";
}
.stat-card::after {
    position: absolute;
    z-index: -1;
    top: -41px;
    left: -31px;
    width: 104px;
    height: 104px;
    border: 15px solid rgba(35,113,82,.035);
    border-radius: 50%;
    content: "";
}
.stat-card:hover { border-color: rgba(35,113,82,.33); box-shadow: var(--shadow); transform: translateY(-3px); }
.stat-card-gold { border-color: #ead892; background: linear-gradient(145deg, #fff, var(--gold-100)); }
.stat-card-gold::before { background: var(--gold-600); }
.stat-card-success { border-color: #c8e6d2; background: linear-gradient(145deg, #fff, var(--green-100)); }
.stat-card-success::before { background: var(--green-700); }
.stat-card-warning { border-color: #efdda2; background: linear-gradient(145deg, #fff, var(--amber-100)); }
.stat-card-warning::before { background: var(--amber-700); }
.stat-label, .stat-note { display: block; }
.stat-label { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.stat-value { display: block; margin: 12px 0 5px; color: var(--forest-950); font-family: "Barlow Condensed", "Barlow", Arial, sans-serif; font-size: 31px; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.stat-note { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .85fr); gap: 17px; }
.profile-grid { display: grid; grid-template-columns: minmax(315px, .84fr) minmax(390px, 1.16fr); gap: 17px; }
.panel {
    position: relative;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(201,214,206,.88);
    border-radius: var(--radius);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 21px; }
.panel-heading h2 { margin: 0 0 4px; color: var(--forest-950); font-size: 19px; letter-spacing: -.02em; }
.panel-heading p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 12px; }
.panel-featured {
    color: #fff;
    border-color: rgba(235,209,128,.24);
    background:
        radial-gradient(circle at 88% 10%, rgba(215,183,81,.22), transparent 12rem),
        linear-gradient(135deg, #174a35, #0a2319 78%);
    box-shadow: 0 19px 42px rgba(8,35,24,.20), inset 0 1px 0 rgba(255,255,255,.09);
}
.panel-featured::after {
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 190px;
    height: 190px;
    border: 23px solid rgba(255,255,255,.045);
    border-radius: 50%;
    content: "";
}
.panel-featured > * { position: relative; z-index: 1; }
.panel-featured .eyebrow { color: var(--gold-400); }
.panel-featured h2 { color: #fff; }
.panel-featured .text-link { color: var(--gold-400); }
.panel-action {
    color: #fff;
    border-color: rgba(255,255,255,.06);
    background:
        linear-gradient(135deg, rgba(215,183,81,.12), transparent 55%),
        linear-gradient(135deg, var(--forest-900), #0d2f22);
    box-shadow: 0 19px 42px rgba(8,35,24,.18);
}
.panel-action .eyebrow { color: var(--gold-400); }
.panel-action h2 { margin: 0 0 8px; color: #fff; font-size: 22px; letter-spacing: -.025em; }
.panel-action p:not(.eyebrow) { margin-bottom: 23px; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.73; }
.panel-action .button-dark { color: #172217; border-color: rgba(255,255,255,.22); background: linear-gradient(135deg, #f0db90, var(--gold-500)); }
.panel-action .button-dark:hover { background: linear-gradient(135deg, #f8e8a6, var(--gold-400)); }

.leader-feature { display: flex; align-items: center; gap: 13px; }
.leader-feature > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.leader-feature > div:nth-child(2) strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.leader-feature > div:nth-child(2) span { color: rgba(255,255,255,.62); font-size: 12px; }
.leader-score { display: grid; min-width: 90px; margin-right: auto; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.18); text-align: left; }
.leader-score strong { color: var(--gold-400); font-family: "Barlow Condensed", "Barlow", Arial, sans-serif; font-size: 29px; font-variant-numeric: tabular-nums; line-height: 1; }
.leader-score span { margin-top: 5px; color: rgba(255,255,255,.60); font-size: 10px; }

.avatar {
    display: inline-grid;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--forest-900);
    border: 1px solid rgba(35,113,82,.12);
    border-radius: 50%;
    background: linear-gradient(145deg, #e6f0e9, #cfe2d6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 800;
}
.avatar-small { width: 29px; height: 29px; font-size: 10px; }
.avatar-large { width: 54px; height: 54px; color: var(--carbon-950); border-color: rgba(255,255,255,.20); background: linear-gradient(145deg, #f0dc91, var(--gold-500)); font-size: 17px; }
.panel-featured .avatar { color: var(--carbon-950); background: linear-gradient(145deg, #f0dc91, var(--gold-500)); }

/* Forms */
.narrow-page { width: min(680px, 100%); margin: 0 auto; }
.form-panel { max-width: 650px; }
.form-panel-wide { max-width: 900px; }
.form-stack { display: grid; gap: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-field { min-width: 0; margin-bottom: 2px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; margin-bottom: 8px; color: var(--forest-950); font-size: 12px; font-weight: 800; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(10,35,24,.02);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: #aec1b5; }
.form-field input[type="email"], .form-field input[type="password"] { direction: ltr; text-align: left; }
.form-field textarea { min-height: 98px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    border-color: var(--forest-700);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(35,113,82,.12);
}
.form-field input:disabled { color: var(--ink-soft); background: var(--slate-100); }
.form-field small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.input-with-action { position: relative; }
.input-with-action input { padding-left: 60px; }
.input-action {
    position: absolute;
    top: 50%;
    left: 7px;
    min-width: 44px;
    padding: 5px;
    color: var(--forest-700);
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    transform: translateY(-50%);
}
.input-action:hover { background: #edf5f0; }
.form-divider { height: 1px; margin: 6px 0; background: var(--line); }
.form-section-title h2 { margin: 0 0 3px; color: var(--forest-950); font-size: 17px; }
.form-section-title p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.code-input { direction: ltr; font-family: "DM Mono", ui-monospace, monospace; font-size: 20px; font-weight: 700; letter-spacing: .13em; text-align: center; text-transform: uppercase; unicode-bidi: plaintext; }

/* Tables, filters, and status */
.filter-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 3px;
    margin: 0 0 18px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid rgba(201,214,206,.9);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--shadow-xs);
    scrollbar-width: thin;
}
.filter-tabs a { padding: 7px 12px; color: var(--ink-soft); border-radius: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.filter-tabs a:hover { color: var(--forest-900); background: var(--slate-100); }
.filter-tabs a.is-active { color: #fff; background: linear-gradient(135deg, var(--forest-900), var(--forest-700)); box-shadow: 0 4px 10px rgba(16,43,32,.18); }
.table-search { display: flex; align-items: flex-end; gap: 9px; margin: 0 0 18px; }
.table-search label { flex: 0 0 auto; margin-bottom: 11px; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.table-search input {
    width: min(370px, 100%);
    min-height: 40px;
    padding: 8px 11px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow-xs);
    unicode-bidi: plaintext;
}
.table-search input:focus { border-color: var(--forest-700); outline: 0; box-shadow: 0 0 0 4px rgba(35,113,82,.12); }
.table-panel { padding: 0; overflow: hidden; }
.table-panel > .panel-heading { padding: 24px 25px 0; }
.table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #b4c4bb transparent; scrollbar-width: thin; }
.data-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; text-align: left; }
.data-table th {
    padding: 13px 15px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdfb, #f4f8f5);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .025em;
    white-space: nowrap;
}
.data-table td { padding: 14px 15px; border-bottom: 1px solid #e7ede9; color: var(--ink); font-size: 12px; unicode-bidi: plaintext; vertical-align: middle; }
.data-table tbody tr { transition: background .15s ease, box-shadow .15s ease; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f5faf7; }
.person-cell { display: flex; min-width: 180px; align-items: center; gap: 9px; }
.person-cell > div, .compact-person { display: grid; min-width: 0; gap: 2px; }
.person-cell strong, .compact-person strong { overflow: hidden; color: var(--forest-950); font-size: 12px; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }
.person-cell small, .compact-person small, .data-table td > small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }
.compact-person { min-width: 120px; }
.sales-code {
    direction: ltr;
    display: inline-block;
    padding: 5px 8px;
    color: var(--forest-900);
    border: 1px solid #bdd3c5;
    border-radius: 7px;
    background: linear-gradient(135deg, #f5fbf7, #e5f2e9);
    box-shadow: inset 0 1px 0 #fff;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    unicode-bidi: plaintext;
    white-space: nowrap;
}
.status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.status::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; opacity: .75; }
.status-active, .status-confirmed { color: var(--green-700); background: var(--green-100); }
.status-pending { color: var(--blue-600); background: var(--blue-100); }
.status-used { color: var(--amber-700); background: var(--amber-100); }
.status-rejected, .status-inactive, .status-cancelled { color: var(--red-700); background: var(--red-100); }
.status-expired { color: var(--slate-600); background: var(--slate-100); }
.status-unknown { color: var(--amber-700); background: var(--amber-100); }
.reason-text { display: block; max-width: 170px; margin-top: 5px; color: var(--red-700); font-size: 10px; line-height: 1.4; }
.table-actions { display: flex; align-items: center; gap: 7px; }
.table-actions form { margin: 0; }
.reject-details, .confirm-details { position: relative; }
.reject-details summary, .confirm-details summary { cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
.reject-details summary { color: var(--red-700); }
.confirm-details summary { color: var(--green-700); }
.reject-details summary::-webkit-details-marker, .confirm-details summary::-webkit-details-marker { display: none; }
.reject-details summary::after, .confirm-details summary::after { display: inline-block; margin-right: 4px; content: "⌄"; transition: transform .14s ease; }
.reject-details[open] summary::after, .confirm-details[open] summary::after { transform: rotate(180deg); }
.reject-form, .confirm-form {
    position: absolute;
    z-index: 4;
    top: 26px;
    left: 0;
    display: grid;
    width: 242px;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
}
.reject-form label, .confirm-form label { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.reject-form input, .confirm-form input { min-height: 35px; padding: 7px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }
.reset-password-details { position: relative; }
.reset-password-details > summary { list-style: none; }
.reset-password-details > summary::-webkit-details-marker { display: none; }
.reset-password-form {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: min(320px, calc(100vw - 48px));
    gap: 8px;
    padding: 14px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
}
.reset-password-form p { margin: 0 0 2px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.reset-password-form label { color: var(--forest-950); font-size: 11px; font-weight: 800; }
.reset-password-form .input-with-action input { min-height: 39px; font-size: 12px; }
.copy-inline { padding: 4px 7px; color: var(--forest-700); border: 0; border-radius: 6px; background: transparent; font-size: 11px; font-weight: 800; transition: background .15s ease, color .15s ease; }
.copy-inline:hover { color: var(--forest-900); background: var(--green-100); }
.rank-badge { direction: ltr; display: inline-flex; min-width: 34px; align-items: center; justify-content: center; padding: 5px 7px; color: var(--ink-soft); border: 1px solid transparent; border-radius: 8px; background: var(--slate-100); font-size: 11px; font-weight: 800; }
.rank-first { color: #745401; border-color: #eedb99; background: linear-gradient(135deg, #fff8df, #f8e3a0); box-shadow: 0 3px 8px rgba(185,141,32,.15); }
.leader-row { background: linear-gradient(90deg, #fffdf4, #fff9e7); }
.leaderboard-table tbody tr:nth-child(2) .rank-badge { color: #52605d; border-color: #d8e0dd; background: linear-gradient(135deg, #f7faf9, #dde5e1); }
.leaderboard-table tbody tr:nth-child(3) .rank-badge { color: #805536; border-color: #e8c6aa; background: linear-gradient(135deg, #fff4ea, #f2cfb3); }
.leaderboard-table tbody tr:nth-child(-n+3) td:first-child { position: relative; }
.current-user-row { background: linear-gradient(90deg, #eff9f2, #e4f3e9); }

/* Profile, code generation, and empty content */
.details-list { display: grid; gap: 0; margin: 0; }
.details-list > div { display: grid; grid-template-columns: 115px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.details-list > div:last-child { border-bottom: 0; }
.details-list dt { color: var(--ink-soft); font-size: 12px; }
.details-list dd { margin: 0; color: var(--forest-950); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.mini-leaderboard { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mini-leaderboard li { display: grid; grid-template-columns: 39px 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; transition: background .14s ease, border-color .14s ease; }
.mini-leaderboard li:hover { border-color: var(--line); background: var(--paper-alt); }
.mini-leaderboard li.is-you { border-color: #c6e5d1; background: var(--green-100); }
.mini-leaderboard strong { overflow: hidden; color: var(--forest-950); text-overflow: ellipsis; white-space: nowrap; }
.mini-leaderboard li > span:last-child { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.generation-panel { max-width: 620px; padding: 39px; text-align: center; }
.generation-panel h2 { margin: 0 0 10px; color: var(--forest-950); font-size: 24px; letter-spacing: -.025em; }
.generation-panel > p:not(.eyebrow) { max-width: 455px; margin: 0 auto 24px; color: var(--ink-soft); font-size: 14px; line-height: 1.76; }
.generation-panel .eyebrow { justify-content: center; }
.generation-icon {
    display: grid;
    width: 55px;
    height: 55px;
    place-items: center;
    margin: 0 auto 17px;
    color: var(--carbon-950);
    border: 1px solid #f0dc93;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff3c5, var(--gold-400));
    box-shadow: 0 10px 22px rgba(185,141,32,.17);
    font-family: "DM Mono", monospace;
    font-size: 23px;
    font-weight: 700;
}
.generated-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 23px 0;
    padding: 16px;
    border: 1px dashed #c5a339;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, rgba(255,255,255,.5), transparent),
        var(--gold-100);
}
.generated-code code, .credential-code { direction: ltr; color: var(--forest-950); font-family: "DM Mono", ui-monospace, monospace; font-size: 23px; font-weight: 700; letter-spacing: .1em; unicode-bidi: plaintext; }
.generated-code code { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.generation-panel .button-row { justify-content: center; }
.steps-list { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; color: var(--ink-soft); font-size: 13px; }
.steps-list li { display: flex; align-items: flex-start; gap: 10px; }
.steps-list span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; color: var(--forest-900); border-radius: 50%; background: var(--gold-100); font-size: 10px; font-weight: 800; }
.empty-state { display: flex; align-items: center; gap: 17px; padding: 39px 26px; color: var(--ink); }
.empty-symbol { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; color: var(--forest-700); border: 1px solid #cce6d5; border-radius: 14px; background: var(--green-100); font-size: 24px; }
.empty-state h3 { margin: 0 0 4px; color: var(--forest-950); font-size: 15px; }
.empty-state p { max-width: 490px; margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

.success-page, .error-page {
    max-width: 710px;
    margin: 50px auto;
    padding: 43px;
    text-align: center;
    border: 1px solid rgba(201,214,206,.9);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.success-icon { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 16px; color: var(--green-700); border: 1px solid #c6e5d1; border-radius: 50%; background: var(--green-100); font-size: 28px; font-weight: 800; }
.success-page h1, .error-page h1 { margin: 0 auto 11px; color: var(--forest-950); font-size: 29px; letter-spacing: -.03em; }
.success-page > p:not(.eyebrow), .error-page > p:not(.eyebrow) { max-width: 520px; margin: 0 auto 23px; color: var(--ink-soft); line-height: 1.75; }
.credential-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 26px 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); text-align: left; }
.credential-card > div { position: relative; display: grid; gap: 5px; min-width: 0; padding: 16px; background: #fbfcfb; }
.credential-card span { color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .025em; }
.credential-card strong, .credential-card code { overflow: hidden; color: var(--forest-950); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.credential-card strong { direction: ltr; text-align: left; unicode-bidi: plaintext; }
.credential-card code { font-size: 14px; }
.credential-card .copy-inline { position: absolute; left: 8px; bottom: 8px; }
.success-note { color: var(--amber-700); font-size: 12px; }
.error-code { direction: ltr; margin-bottom: 8px; color: var(--gold-600); font-family: "Barlow Condensed", "Barlow", Arial, sans-serif; font-size: 59px; font-weight: 800; line-height: 1; }

/* Performance dashboards and ranking */
.stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-icon {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--forest-700);
    border: 1px solid rgba(35,113,82,.13);
    border-radius: 9px;
    background: rgba(35,113,82,.07);
    font-family: "DM Mono", "Barlow", monospace;
    font-size: 13px;
    line-height: 1;
}
.stat-card-gold .stat-icon { color: var(--gold-600); border-color: rgba(185,141,32,.18); background: rgba(215,183,81,.13); }
.stat-card-success .stat-icon { color: var(--green-700); border-color: rgba(25,116,67,.16); background: rgba(25,116,67,.08); }
.stat-card-warning .stat-icon { color: var(--amber-700); border-color: rgba(145,99,0,.15); background: rgba(255,245,216,.85); }

.dashboard-intro { position: relative; padding: 3px 0 4px; }
.dashboard-intro::after {
    position: absolute;
    bottom: -13px;
    right: 0;
    width: min(180px, 30%);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
    content: "";
}
.dashboard-intro-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.dashboard-stat-grid { margin-top: 33px; }
.dashboard-primary-grid { margin-bottom: 17px; }
.dashboard-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.dashboard-detail-grid .panel { min-width: 0; }

.top-performer-panel { min-height: 202px; }
.leader-performance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 23px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.13);
}
.leader-performance-meta span {
    padding: 5px 8px;
    color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    font-size: 10px;
    white-space: nowrap;
}
.leader-performance-meta b { color: var(--gold-400); font-variant-numeric: tabular-nums; }

.dashboard-empty { display: flex; align-items: flex-start; gap: 12px; min-height: 96px; padding: 8px 0; }
.dashboard-empty-mark {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--forest-700);
    border: 1px solid rgba(35,113,82,.13);
    border-radius: 12px;
    background: rgba(35,113,82,.07);
    font-family: "DM Mono", monospace;
    font-size: 17px;
}
.dashboard-empty strong { display: block; margin: 2px 0 4px; color: var(--forest-950); font-size: 13px; }
.dashboard-empty p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.dashboard-empty-inverse .dashboard-empty-mark { color: var(--gold-400); border-color: rgba(235,209,128,.17); background: rgba(235,209,128,.09); }
.dashboard-empty-inverse strong { color: #fff; }
.dashboard-empty-inverse p { color: rgba(255,255,255,.62); }

.activity-list, .performance-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.activity-item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { padding-bottom: 0; border-bottom: 0; }
.activity-copy, .activity-meta { display: grid; min-width: 0; gap: 4px; }
.activity-copy > span { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; unicode-bidi: plaintext; white-space: nowrap; }
.activity-meta { flex: 0 0 auto; justify-items: end; }
.activity-time { color: var(--ink-faint); font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity-item .sales-code { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

.performance-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: rgba(248,251,249,.55);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.performance-row:hover { border-color: var(--line); background: var(--paper-alt); transform: translateY(-1px); }
.performance-row-first { border-color: #efdfa3; background: linear-gradient(135deg, #fffdf6, #fff6dc); }
.performance-row-current { border-color: #bee1c9; background: linear-gradient(135deg, #f1faf4, #e4f3e9); }
.performance-summary { display: grid; min-width: 0; gap: 2px; }
.performance-summary strong { overflow: hidden; color: var(--forest-950); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.performance-summary strong small { color: var(--forest-700); font-size: 9px; }
.performance-summary > small { overflow: hidden; color: var(--ink-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.performance-metric { color: var(--ink-soft); font-size: 10px; white-space: nowrap; }
.performance-metric b { color: var(--forest-900); font-size: 13px; font-variant-numeric: tabular-nums; }

.trainer-rank-panel { background: linear-gradient(145deg, #fff, #f3f8f4); }
.trainer-rank-spotlight { display: flex; align-items: center; gap: 14px; padding: 12px 0 5px; }
.trainer-rank-symbol {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--carbon-950);
    border: 1px solid #ead48b;
    border-radius: 17px;
    background: linear-gradient(145deg, #f6e59d, var(--gold-500));
    box-shadow: 0 9px 18px rgba(185,141,32,.17);
    font-size: 23px;
}
.trainer-rank-spotlight > div { display: grid; gap: 3px; }
.trainer-rank-spotlight strong { color: var(--forest-950); font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1; }
.trainer-rank-spotlight span, .trainer-rank-note { color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.trainer-rank-note { margin: 15px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

.leaderboard-hero { margin-bottom: 27px; }
.leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 0 0 18px; }
.podium-card {
    position: relative;
    min-width: 0;
    padding: 19px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #fff, #f7faf8);
    box-shadow: var(--shadow-sm);
}
.podium-card::after {
    position: absolute;
    top: -43px;
    left: -39px;
    width: 119px;
    height: 119px;
    border: 18px solid rgba(35,113,82,.045);
    border-radius: 50%;
    content: "";
}
.podium-rank-1 { border-color: #ead58b; background: linear-gradient(145deg, #fffdf5, #fff4d3); box-shadow: 0 15px 32px rgba(185,141,32,.14); }
.podium-rank-2 { border-color: #d8e0dd; }
.podium-rank-3 { border-color: #ead1ba; }
.podium-card-current { box-shadow: 0 0 0 2px rgba(35,113,82,.20), var(--shadow-sm); }
.podium-card > * { position: relative; z-index: 1; }
.podium-card-head, .podium-person { display: flex; align-items: center; gap: 10px; }
.podium-card-head { justify-content: space-between; margin-bottom: 16px; }
.podium-medal {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--forest-700);
    border-radius: 9px;
    background: var(--green-100);
    font-family: "DM Mono", monospace;
    font-size: 13px;
}
.podium-rank-1 .podium-medal { color: var(--carbon-950); background: linear-gradient(145deg, #f5e394, var(--gold-500)); }
.podium-rank-2 .podium-medal { color: #56635f; background: #e9efec; }
.podium-rank-3 .podium-medal { color: #815534; background: #f7e5d5; }
.podium-rank-label { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.podium-person > div { display: grid; min-width: 0; gap: 3px; }
.podium-person strong { overflow: hidden; color: var(--forest-950); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.podium-person small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.podium-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 18px 0 0; }
.podium-metrics > div { min-width: 0; padding: 8px 5px; border: 1px solid rgba(201,214,206,.75); border-radius: 9px; background: rgba(255,255,255,.52); text-align: center; }
.podium-metrics dt { overflow: hidden; color: var(--ink-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.podium-metrics dd { margin: 3px 0 0; color: var(--forest-950); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 800; }
.leaderboard-table-heading { align-items: center; }
.leaderboard-count { flex: 0 0 auto; padding: 6px 9px; color: var(--forest-700); border: 1px solid #c7e2d0; border-radius: 999px; background: var(--green-100); font-size: 10px; font-weight: 800; white-space: nowrap; }
.leaderboard-row.leaderboard-rank-1 { background: linear-gradient(90deg, #fffdf3, #fff6d9); }
.leaderboard-row.leaderboard-rank-2 { background: linear-gradient(90deg, #fbfdfc, #f1f5f3); }
.leaderboard-row.leaderboard-rank-3 { background: linear-gradient(90deg, #fffaf7, #fbf0e8); }

.code-generation-shell { width: min(720px, 100%); }
.code-generation-hero { justify-content: center; margin-bottom: 25px; text-align: center; }
.code-generation-hero > div { max-width: 580px; }
.code-generation-hero .eyebrow { justify-content: center; }
.code-generation-panel { max-width: 720px; }
.code-result-intro > p:not(.eyebrow), .code-generation-empty > p:not(.eyebrow) { max-width: 505px; margin-right: auto; margin-left: auto; }
.code-result-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 16px;
    text-align: right;
}
.code-result-meta > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-alt); }
.code-result-meta dt { margin-bottom: 4px; color: var(--ink-soft); font-size: 9px; font-weight: 800; }
.code-result-meta dd { margin: 0; overflow: hidden; color: var(--forest-950); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.code-security-note { display: flex; align-items: flex-start; justify-content: center; gap: 6px; max-width: 550px; margin: 0 auto 20px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.code-security-note > span { color: var(--gold-600); font-family: "DM Mono", monospace; }
.code-generation-empty { padding: 5px 0; }

/* Responsive */
@media (max-width: 1150px) {
    .stats-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-detail-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .hero { gap: 50px; }
    .auth-layout { gap: 55px; }
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        z-index: 30;
        right: 0;
        left: auto;
        width: 278px;
        min-width: 278px;
        transform: translateX(102%);
        transition: transform .24s cubic-bezier(.2, .8, .2, 1);
        box-shadow: -20px 0 55px rgba(0,0,0,.28);
    }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-close { display: block; }
    .app-main { width: 100%; }
    .app-main::after {
        position: fixed;
        z-index: 20;
        inset: 0;
        background: rgba(5,20,14,.46);
        content: "";
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    body.sidebar-open .app-main::after { opacity: 1; pointer-events: auto; }
    .mobile-header {
        position: sticky;
        z-index: 9;
        top: 0;
        display: flex;
        min-height: 65px;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.07);
        background: linear-gradient(135deg, #0a2119, #0e3022);
        box-shadow: 0 5px 16px rgba(6,24,16,.12);
    }
    .menu-toggle { display: grid; width: 35px; height: 35px; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.10); border-radius: 9px; background: rgba(255,255,255,.08); font-size: 17px; }
    .brand-compact { color: #fff; }
    .brand-compact .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
    .brand-compact strong { font-size: 15px; letter-spacing: .02em; }
    .main-content { min-height: calc(100vh - 65px); padding: 34px 27px 38px; }
    .platform-footer-app { width: calc(100% - 54px); }
    .hero, .auth-layout, .auth-layout-wide { grid-template-columns: 1fr; gap: 39px; }
    .hero { padding: 56px 0 46px; }
    .auth-layout { max-width: 630px; margin: 0 auto; padding: 45px 0 58px; }
    .auth-aside { max-width: 575px; }
    .feature-grid { padding-bottom: 38px; }
    .profile-grid { grid-template-columns: 1fr; }
    .leaderboard-podium { gap: 11px; }
    .podium-card { padding: 16px; }
    .podium-metrics { gap: 4px; }
    .podium-metrics > div { padding: 7px 3px; }
}

@media (max-width: 680px) {
    .public-shell { width: min(100% - 32px, 1220px); }
    .public-header { min-height: 77px; }
    .public-nav { gap: 13px; font-size: 12px; }
    .public-nav > a:first-child { display: none; }
    .brand-copy strong { font-size: 16px; }
    .hero h1 { font-size: clamp(37px, 11vw, 54px); }
    .hero-lead { font-size: 16px; }
    .hero-panel { padding: 22px; }
    .feature-grid { grid-template-columns: 1fr; }
    .auth-card, .auth-card-wide { padding: 27px 22px; border-radius: 19px; }
    .auth-card::before { right: 22px; left: 22px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .form-field-full { grid-column: auto; }
    .main-content { padding: 28px 16px 34px; }
    .mobile-header { padding: 0 16px; }
    .platform-footer { flex-wrap: wrap; gap: 7px; }
    .platform-footer-app { width: calc(100% - 32px); min-height: 58px; padding: 16px 0 21px; }
    .page-heading, .page-heading-actions { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 24px; }
    .page-heading h1 { font-size: 29px; }
    .page-heading-actions > .button, .page-heading-actions > .button-row { width: 100%; }
    .page-heading-actions > .button-row .button { flex: 1; }
    .heading-person { align-items: flex-start; }
    .stats-grid-5, .stats-grid-4, .stats-grid-3, .stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { min-height: 116px; padding: 15px; }
    .stat-card::before { right: 15px; }
    .stat-value { font-size: 27px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-detail-grid { grid-template-columns: 1fr; }
    .dashboard-detail-grid > :last-child:nth-child(odd) { grid-column: auto; }
    .dashboard-intro-actions { width: 100%; justify-content: stretch; }
    .dashboard-intro-actions .button { flex: 1 1 0; }
    .panel { padding: 20px; }
    .table-panel { padding: 0; }
    .table-panel > .panel-heading { padding: 19px 19px 0; }
    .table-actions { align-items: flex-start; flex-direction: column; }
    .reject-form, .confirm-form { right: 0; left: auto; }
    .filter-tabs { width: 100%; }
    .table-search { align-items: stretch; flex-direction: column; }
    .table-search label { margin-bottom: 0; }
    .table-search input, .table-search .button { width: 100%; }
    .generated-code { align-items: stretch; flex-direction: column; }
    .generated-code code { font-size: 19px; }
    .generation-panel { padding: 30px 20px; }
    .leader-feature { align-items: flex-start; flex-wrap: wrap; }
    .leader-score { margin-right: 65px; padding-right: 0; border-right: 0; text-align: right; }
    .activity-item { align-items: flex-start; }
    .activity-meta { align-items: end; }
    .leaderboard-podium { grid-template-columns: 1fr; }
    .podium-card { padding: 18px; }
    .podium-metrics { max-width: 360px; }
    .leaderboard-table-heading { align-items: flex-start; }
    .code-result-meta { grid-template-columns: 1fr; text-align: right; }
    .code-result-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .code-result-meta dt { margin: 0; }
    .details-list > div { grid-template-columns: 100px 1fr; }
    .credential-card { grid-template-columns: 1fr; }
    .success-page, .error-page { margin: 24px auto; padding: 31px 20px; }
    .success-page h1, .error-page h1 { font-size: 25px; }
}

@media (max-width: 400px) {
    .public-nav .button { padding: 8px 9px; }
    .stats-grid-5, .stats-grid-4, .stats-grid-3, .stats-grid-2 { grid-template-columns: 1fr; }
    .hero-actions .button { width: 100%; }
    .button-row { align-items: stretch; flex-direction: column; }
    .button-row .button, .button-row form, .button-row form .button { width: 100%; }
    .platform-footer-divider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* -------------------------------------------------------------------------
   FitAlliance — Persian-first RTL refinement layer
   This layer mirrors presentation only; all sales-code and API values retain
   their Latin/ASCII representation for reliable copying and integration.
   ------------------------------------------------------------------------- */
html,
body,
body.has-app-shell,
body.has-public-shell {
    direction: rtl;
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    text-align: right;
}

h1, h2, h3,
.stat-value,
.leader-score strong,
.trainer-rank-spotlight strong,
.section-heading h2,
.panel-heading h2,
.error-code {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    letter-spacing: -.02em;
}

.brand-copy strong,
.brand-compact strong {
    font-family: "Barlow", Arial, sans-serif;
    letter-spacing: .045em;
}

.brand-copy small,
.eyebrow,
.nav-label,
.app-context-bar,
.auth-card-brand,
.hero-performance-label {
    letter-spacing: 0;
    text-transform: none;
}
.hero-performance-card strong,
.account-copy strong,
.account-copy small { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }

.public-nav > a:not(.button)::after { right: 0; left: auto; }

.hero-brand-visual::before { inset: 7% 9% 2% 4%; }
.hero-brand-visual::after { right: auto; left: 0; }
.hero-visual-glow { right: auto; left: 12%; }
.hero-product-photo { inset: 0 11% 7% 6%; }
.hero-performance-card { right: auto; left: 0; text-align: right; }
.feature-card::before { right: 24px; left: auto; background: linear-gradient(270deg, var(--brand-primary), transparent); }

/* The visual stays on the left of the sign-in form; Persian content remains
   right-aligned inside each panel. */
.auth-layout { direction: ltr; }
.auth-visual,
.auth-card,
.auth-card-premium { direction: rtl; text-align: right; }
.auth-visual::before {
    background:
        linear-gradient(270deg, rgba(6,8,10,.96) 0%, rgba(7,10,13,.66) 42%, rgba(7,10,13,.06) 100%),
        linear-gradient(0deg, rgba(7,9,11,.94) 0%, transparent 58%);
}
.auth-visual-grid { mask-image: linear-gradient(270deg, #000, transparent 75%); }
.auth-visual-stack { right: auto; left: -10%; transform: rotate(7deg); }
.auth-card::before { right: 30px; left: auto; background: linear-gradient(270deg, var(--brand-primary), var(--brand-secondary)); }
.auth-card-brand { justify-content: flex-start; }

.app-shell { flex-direction: row-reverse; }
.sidebar {
    border-right: 0;
    border-left: 1px solid var(--border-subtle);
    box-shadow: -15px 0 35px rgba(0,0,0,.18);
}
.sidebar::before { background: linear-gradient(270deg, var(--brand-primary), var(--brand-secondary), transparent); }
.nav-link:hover { transform: translateX(-2px); }
.nav-link.is-active::before { right: -8px; left: auto; }
.app-context-bar { justify-content: flex-start; }
.page-heading-actions { align-items: flex-start; }
.dashboard-intro::before { right: auto; left: -24px; }
.dashboard-intro::after { right: auto; left: 24px; background-position: left bottom; }
.stat-card::before { right: 0; left: auto; border-radius: 4px 0 0 4px; }
.leader-score {
    margin-right: auto;
    margin-left: 0;
    padding-right: 22px;
    padding-left: 0;
    border-right: 1px solid rgba(255,255,255,.16);
    border-left: 0;
    text-align: left;
}
.performance-row-current { border-right-color: var(--brand-primary); border-left: 0; }

.form-section-title { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }
input,
textarea,
select { direction: rtl; text-align: right; font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }
input[type="email"],
input[type="password"],
input[type="number"],
.code-input,
.generated-code code,
.credential-code,
.sales-code,
.data-table code,
.credential-card strong,
.credential-card code { direction: ltr; text-align: left; unicode-bidi: plaintext; }
.input-with-action input { padding-right: 13px; padding-left: 74px; }
.input-action { right: auto; left: 8px; }
.notice-banner { box-shadow: inset -3px 0 0 var(--status-warning); }
.flash-success { border-right: 3px solid var(--status-success); border-left: 1px solid var(--border-strong); }
.flash-error { border-right: 3px solid var(--status-error); border-left: 1px solid var(--border-strong); }
.flash-warning { border-right: 3px solid var(--status-warning); border-left: 1px solid var(--border-strong); }

.data-table { direction: rtl; text-align: right; }
.data-table th,
.data-table td { text-align: right; }
.data-table th { letter-spacing: 0; text-transform: none; }
.data-table .sales-code,
.data-table code { display: inline-block; }
.confirm-form,
.reject-form,
.reset-password-form { right: auto; left: 0; }

.leaderboard-hero { background: radial-gradient(circle at 17% 25%, rgba(255,208,40,.16), transparent 21rem), linear-gradient(235deg, #242a31, #15191e); }
.leaderboard-hero::after { right: auto; left: 27px; }
.podium-card::before { right: auto; left: -42px; }
.leaderboard-row.leaderboard-rank-1 td { background: linear-gradient(270deg, rgba(255,208,40,.11), transparent); }
.leaderboard-row.leaderboard-rank-2 td { background: linear-gradient(270deg, rgba(190,207,220,.08), transparent); }
.leaderboard-row.leaderboard-rank-3 td { background: linear-gradient(270deg, rgba(236,169,125,.08), transparent); }
.current-user-row td { box-shadow: inset -3px 0 0 var(--brand-primary); }

.code-generation-hero,
.code-result-meta,
.credential-card { text-align: right; }
.code-generation-hero .eyebrow { justify-content: flex-start; }
.credential-card .copy-inline { right: 8px; left: auto; }
.details-list > div { grid-template-columns: 1fr 120px; }
.details-list dt { grid-column: 2; }
.details-list dd { grid-column: 1; }

@media (max-width: 980px) {
    .sidebar {
        right: 0;
        left: auto;
        transform: translateX(105%);
        box-shadow: -20px 0 55px rgba(0,0,0,.42);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .auth-visual-stack { right: auto; left: 2%; }
}

@media (max-width: 680px) {
    .hero-brand-visual::before { inset: 5% 1% 4% 2%; }
    .hero-product-photo { inset: 5% 5% 14% 3%; }
    .hero-performance-card { right: auto; left: 0; }
    .auth-visual-stack { right: auto; left: -8%; }
    .auth-card::before { right: 22px; left: auto; }
    .dashboard-intro::after { right: auto; left: -10px; }
    .leader-score { margin-right: 58px; margin-left: 0; padding-right: 0; border-right: 0; text-align: right; }
    .activity-meta { align-items: flex-start; }
    .confirm-form,
    .reject-form,
    .reset-password-form { right: 0; left: auto; }
    .leaderboard-hero::after { right: auto; left: 4px; }
    .code-generation-hero,
    .code-result-meta { text-align: right; }
    .code-result-meta > div { flex-direction: row-reverse; }
}

@media (max-width: 430px) {
    .auth-visual-stack { right: auto; left: -18%; }
}

.hero-performance-card strong,
.account-copy strong,
.account-copy small { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }

/* Platform and active-brand hierarchy */
.platform-brand { min-width: 0; }
.platform-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    color: #15110a;
    border: 1px solid rgba(255,235,147,.46);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff0a3, var(--brand-primary) 55%, #ff9c26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 8px 18px rgba(0,0,0,.22);
    font-family: "Barlow", Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.sidebar-brand-context {
    display: grid;
    gap: 8px;
    margin: 17px 8px 0;
    padding: 14px;
    border: 1px solid rgba(255,208,40,.18);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255,208,40,.08), rgba(255,255,255,.02));
}
.sidebar-brand-context-label { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.sidebar-active-brand,
.mobile-active-brand,
.public-active-brand,
.auth-active-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sidebar-active-brand { color: var(--text-primary); font-family: "Barlow", "Vazirmatn", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .05em; }
.sidebar-active-brand .brand-mark-image { width: 26px; height: 26px; }
.mobile-active-brand { color: var(--text-secondary); font-family: "Barlow", "Vazirmatn", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.mobile-active-brand .brand-mark-image { width: 25px; height: 25px; }
.public-active-brand { padding: 6px 9px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 10px; font-weight: 700; }
.public-active-brand .brand-mark-image { width: 20px; height: 20px; }
.public-active-brand bdi { color: var(--brand-primary); font-family: "Barlow", "Vazirmatn", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.auth-active-brand { margin: -5px 0 15px; color: var(--brand-primary); font-size: 12px; font-weight: 800; }

@media (max-width: 680px) {
    .platform-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 21px; }
    .public-active-brand > span { display: none; }
    .mobile-active-brand { gap: 5px; font-size: 11px; }
}

/* -------------------------------------------------------------------------
   FitAlliance active-brand visual layer
   Presentation is intentionally tokenized so another active brand can replace
   its assets and accents without changing workflows, data, or page structure.
   ------------------------------------------------------------------------- */
:root {
    color-scheme: dark;
    --brand-primary: #ffd028;
    --brand-primary-strong: #ffb51b;
    --brand-secondary: #fa5e36;
    --brand-tertiary: #ee244b;
    --brand-glow: rgba(255, 196, 32, .26);
    --brand-glow-soft: rgba(255, 196, 32, .10);

    --surface-canvas: #090b0e;
    --surface-base: #101317;
    --surface-raised: #15191e;
    --surface-elevated: #1b2026;
    --surface-strong: #222832;
    --surface-glass: rgba(21, 25, 30, .78);
    --surface-inverse: #f6f4ed;
    --border-subtle: rgba(232, 237, 240, .10);
    --border-strong: rgba(232, 237, 240, .19);
    --text-primary: #f7f7f3;
    --text-secondary: #b3bac1;
    --text-muted: #7e8892;
    --text-inverse: #111417;
    --status-success: #58d28b;
    --status-warning: #ffbd35;
    --status-error: #ff6d64;
    --status-info: #65b9ff;
    --status-used: #b7a6ff;
    --status-expired: #9ca5ae;
    --shadow-ambient: 0 28px 72px rgba(0, 0, 0, .34);
    --shadow-raised: 0 16px 36px rgba(0, 0, 0, .24);
    --shadow-tight: 0 7px 18px rgba(0, 0, 0, .22);
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --ring: 0 0 0 4px rgba(255, 208, 40, .22);
}

html {
    direction: rtl;
    background: var(--surface-canvas);
}

body,
body.has-app-shell,
body.has-public-shell {
    min-width: 320px;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 84% -14%, rgba(250, 94, 54, .16), transparent 30rem),
        radial-gradient(circle at 8% 12%, rgba(255, 208, 40, .08), transparent 28rem),
        linear-gradient(145deg, #080a0d 0%, #0d1014 48%, #0a0d10 100%);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    direction: rtl;
    text-align: right;
}

body.has-app-shell {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .014) 1px, transparent 1px),
        radial-gradient(circle at 76% -10%, rgba(250, 94, 54, .12), transparent 32rem),
        radial-gradient(circle at 16% 0%, rgba(255, 208, 40, .07), transparent 26rem),
        var(--surface-canvas);
    background-size: 54px 54px, 54px 54px, auto, auto, auto;
}

body.has-public-shell {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        radial-gradient(circle at 90% -4%, rgba(255, 92, 51, .18), transparent 34rem),
        radial-gradient(circle at 16% 8%, rgba(255, 208, 40, .12), transparent 28rem),
        linear-gradient(140deg, #07090c 0%, #101318 58%, #0a0c0f 100%);
    background-size: 54px 54px, 54px 54px, auto, auto, auto;
}

::selection { color: #111417; background: var(--brand-primary); }

h1, h2, h3, .brand strong, .stat-value, .leader-score strong, .trainer-rank-spotlight strong {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

h1, h2, h3 { color: var(--text-primary); letter-spacing: -.025em; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

/* Shared elements */
.brand { gap: 11px; color: var(--text-primary); }
.brand-mark-image {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(255, 195, 30, .18));
}
.brand-copy { gap: 3px; }
.brand-copy strong { color: var(--text-primary); font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 23px; font-weight: 800; letter-spacing: .065em; line-height: .85; }
.brand-copy small { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .16em; opacity: 1; }

.eyebrow {
    gap: 9px;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}
.eyebrow::before { width: 26px; height: 2px; background: currentColor; opacity: 1; }
.muted, .optional { color: var(--text-muted); }
.optional { font-size: 12px; }

.button {
    min-height: 44px;
    gap: 8px;
    padding: 11px 17px;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
    box-shadow: none;
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .025em;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.button:hover { transform: translateY(-2px); border-color: rgba(255, 208, 40, .55); background: #252c34; box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.button:active { transform: translateY(0); }
.button-gold {
    color: #141414;
    border-color: rgba(255, 239, 155, .52);
    background: linear-gradient(135deg, #ffe470, var(--brand-primary) 48%, #ffad1d 100%);
    box-shadow: 0 10px 28px rgba(255, 184, 27, .20), inset 0 1px 0 rgba(255, 255, 255, .56);
}
.button-gold:hover { color: #101214; border-color: #fff1ab; background: linear-gradient(135deg, #fff0a0, #ffcf28 48%, #ffbd2a 100%); box-shadow: 0 14px 32px rgba(255, 184, 27, .30); }
.button-dark { color: var(--text-primary); border-color: rgba(255, 255, 255, .12); background: linear-gradient(135deg, #242a32, #171b20); }
.button-dark:hover { background: linear-gradient(135deg, #2d343d, #1e242b); }
.button-outline, .button-outline-dark { color: var(--text-primary); border-color: var(--border-strong); background: rgba(255,255,255,.02); box-shadow: none; }
.button-outline:hover, .button-outline-dark:hover { color: var(--brand-primary); border-color: rgba(255, 208, 40, .58); background: rgba(255, 208, 40, .07); }
.button-success { color: #07110b; background: linear-gradient(135deg, #83efad, var(--status-success)); }
.button-danger { color: #fff; background: linear-gradient(135deg, #ff8375, #e64552); }
.button-danger-outline { color: #ff9a90; border-color: rgba(255, 109, 100, .38); background: rgba(255, 109, 100, .09); }
.button-small { min-height: 35px; padding: 7px 11px; border-radius: 9px; font-size: 12px; }

.text-link { color: var(--brand-primary); font-size: 13px; font-weight: 700; }
.text-link:hover { color: #fff0a3; }
.avatar { color: #15110a; border: 1px solid rgba(255, 235, 147, .46); background: linear-gradient(145deg, #fff0a3, var(--brand-primary) 55%, #ff9c26); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

/* Public shell and brand-led landing */
.public-shell { width: min(1360px, calc(100% - 56px)); }
.public-header { min-height: 92px; border-bottom-color: var(--border-subtle); }
.public-nav { gap: 24px; color: var(--text-secondary); font-size: 13px; }
.public-nav > a:not(.button)::after { right: auto; left: 0; background: var(--brand-primary); }
.public-nav > a:not(.button):hover { color: var(--text-primary); }
.public-main { justify-content: center; }

.hero { grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); gap: clamp(46px, 8vw, 118px); padding: clamp(66px, 9vh, 118px) 0 74px; }
.hero-copy { max-width: 640px; }
.hero .eyebrow { color: var(--brand-primary); }
.hero h1 { max-width: 650px; margin-bottom: 20px; font-size: clamp(54px, 6vw, 86px); letter-spacing: -.045em; line-height: .91; }
.hero-lead { max-width: 570px; color: var(--text-secondary); font-size: 18px; line-height: 1.66; }
.hero-actions { margin-top: 30px; }
.hero-note { color: var(--text-muted); font-size: 12px; }

.hero-brand-visual {
    position: relative;
    min-height: 580px;
    isolation: isolate;
}
.hero-brand-visual::before {
    position: absolute;
    z-index: -2;
    inset: 7% 4% 2% 9%;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015));
    box-shadow: var(--shadow-ambient), inset 0 1px 0 rgba(255,255,255,.09);
    content: "";
}
.hero-brand-visual::after {
    position: absolute;
    z-index: -1;
    top: 1%;
    right: 0;
    width: 66%;
    height: 78%;
    border: 1px solid rgba(255, 208, 40, .25);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(255, 208, 40, .035), 0 0 90px rgba(255, 94, 54, .18);
    content: "";
}
.hero-visual-glow { position: absolute; z-index: -1; top: 14%; right: 12%; width: 270px; height: 270px; border-radius: 50%; background: rgba(255, 193, 28, .16); filter: blur(30px); }
.hero-product-photo { position: absolute; inset: 0 6% 7% 11%; width: 83%; height: 86%; border-radius: 24px; object-fit: cover; object-position: 49% 62%; filter: contrast(1.08) saturate(.92); box-shadow: 0 22px 58px rgba(0,0,0,.40); }
.hero-product-photo::after { content: ""; }
.hero-performance-card {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    max-width: 310px;
    gap: 10px;
    padding: 19px 20px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius);
    background: rgba(15, 18, 22, .88);
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter: blur(15px);
}
.hero-performance-label { display: flex; align-items: center; gap: 8px; color: var(--brand-primary); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-performance-card strong { color: #fff; font-family: "Vazirmatn", Tahoma, Arial, sans-serif; font-size: 30px; line-height: .95; }
.hero-performance-card > span:last-child { color: var(--text-secondary); font-size: 12px; }
.live-dot { width: 7px; height: 7px; background: var(--status-success); box-shadow: 0 0 0 5px rgba(88,210,139,.12), 0 0 15px rgba(88,210,139,.6); }

.feature-grid { gap: 16px; padding-bottom: 70px; }
.feature-card { padding: 28px; border-color: var(--border-subtle); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.feature-card::before { right: auto; left: 24px; background: linear-gradient(90deg, var(--brand-primary), transparent); opacity: .9; }
.feature-card:hover { border-color: rgba(255, 208, 40, .34); background: linear-gradient(135deg, rgba(255, 208, 40, .10), rgba(255,255,255,.025)); transform: translateY(-4px); }
.feature-number { color: var(--brand-primary); font-family: "DM Mono", monospace; }
.feature-card h2 { margin: 18px 0 9px; color: var(--text-primary); font-family: "Barlow Condensed", sans-serif; font-size: 26px; }
.feature-card p { color: var(--text-secondary); font-size: 14px; }

/* Authentication */
.auth-layout {
    grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr);
    gap: clamp(34px, 7vw, 100px);
    min-height: calc(100vh - 178px);
    align-items: stretch;
    padding: 50px 0 72px;
}
.auth-layout-premium { max-width: 1240px; margin: 0 auto; }
.auth-visual {
    position: relative;
    display: flex;
    min-height: 640px;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(30px, 4vw, 56px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-xl);
    background: #161a1f;
    box-shadow: var(--shadow-ambient), inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-visual::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(6,8,10,.96) 0%, rgba(7,10,13,.66) 42%, rgba(7,10,13,.06) 100%), linear-gradient(0deg, rgba(7,9,11,.94) 0%, transparent 58%); content: ""; }
.auth-visual::after { position: absolute; z-index: -1; inset: 0; border: 1px solid rgba(255,255,255,.04); border-radius: inherit; background: radial-gradient(circle at 34% 18%, rgba(255,208,40,.18), transparent 23rem); content: ""; }
.auth-visual-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 75%); opacity: .38; }
.auth-visual-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; filter: saturate(.75) contrast(1.1) brightness(.82); }
.auth-visual-stack { position: absolute; z-index: -1; top: 7%; right: -10%; width: min(58%, 430px); height: auto; opacity: .90; filter: drop-shadow(0 25px 30px rgba(0,0,0,.48)); transform: rotate(-7deg); }
.auth-visual-content { position: relative; max-width: 465px; }
.auth-visual-content .eyebrow { color: var(--brand-primary); }
.auth-visual-content h1 { margin: 14px 0 17px; color: #fff; font-size: clamp(47px, 5vw, 72px); line-height: .9; }
.auth-visual-content > p:not(.eyebrow) { margin-bottom: 29px; color: #d2d8dd; font-size: 16px; line-height: 1.65; }
.auth-visual-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.auth-visual-metrics > div { display: grid; gap: 5px; padding: 12px; border-top: 1px solid rgba(255,255,255,.28); background: rgba(8,10,13,.33); }
.auth-visual-metrics strong { color: var(--brand-primary); font-family: "DM Mono", monospace; font-size: 13px; }
.auth-visual-metrics span { color: #c9d0d5; font-size: 11px; font-weight: 700; line-height: 1.15; }

.auth-card,
.auth-card-premium {
    align-self: center;
    max-width: 460px;
    margin: 0;
    padding: clamp(30px, 4vw, 48px);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, rgba(29,34,41,.97), rgba(17,20,24,.98));
    box-shadow: var(--shadow-ambient), inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-card::before { right: auto; left: 30px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); }
.auth-card-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 33px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-card-brand .brand-mark-image { width: 37px; height: 37px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2 { margin: 8px 0 9px; font-size: 42px; line-height: .94; }
.section-heading p:not(.eyebrow) { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.auth-switch { margin: 23px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }

/* Application shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    z-index: 20;
    width: 274px;
    min-width: 274px;
    min-height: 100vh;
    padding: 25px 17px 18px;
    color: var(--text-primary);
    border-right: 1px solid var(--border-subtle);
    border-left: 0;
    background: linear-gradient(180deg, rgba(18,22,27,.98), rgba(10,12,15,.98));
    box-shadow: 15px 0 35px rgba(0,0,0,.18);
}
.sidebar::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), transparent); content: ""; }
.sidebar-top { padding: 0 8px 27px; border-bottom-color: var(--border-subtle); }
.brand-sidebar .brand-mark-image { width: 43px; height: 43px; }
.sidebar-close { color: var(--text-secondary); border-color: var(--border-strong); background: rgba(255,255,255,.035); }
.sidebar-nav { padding: 25px 7px; }
.nav-label { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-link { position: relative; gap: 12px; min-height: 44px; margin: 4px 0; padding: 0 11px; color: var(--text-secondary); border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; }
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,.055); transform: translateX(2px); }
.nav-link.is-active { color: #171717; border-color: rgba(255,231,126,.52); background: linear-gradient(105deg, #ffe572, var(--brand-primary) 62%, #ffaf20); box-shadow: 0 8px 20px rgba(255,176,24,.16); }
.nav-link.is-active::before { right: auto; left: -8px; width: 3px; border-radius: 4px; background: var(--brand-primary); }
.nav-icon { display: grid; width: 18px; height: 18px; place-items: center; color: currentColor; }
.nav-icon svg { width: 18px; height: 18px; fill: currentColor; }
.sidebar-bottom { margin: auto 0 0; padding: 15px 7px 0; border-top-color: var(--border-subtle); }
.account-card { gap: 10px; padding: 11px; border: 1px solid var(--border-subtle); border-radius: 13px; background: rgba(255,255,255,.025); }
.account-card:hover { border-color: rgba(255,208,40,.34); background: rgba(255,208,40,.055); }
.account-copy strong { color: var(--text-primary); font-family: "Vazirmatn", Tahoma, Arial, sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1.1; }
.account-copy small { color: var(--text-muted); font-size: 10px; letter-spacing: .08em; }
.account-actions { margin-top: 11px; color: var(--text-muted); }
.account-actions a, .account-actions button { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.account-actions a:hover, .account-actions button:hover { color: var(--brand-primary); }

.app-main { min-width: 0; background: transparent; }
.main-content { width: min(1480px, 100%); min-height: calc(100vh - 72px); padding: 32px clamp(22px, 4vw, 64px) 44px; }
.app-context-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.app-context-status { width: 7px; height: 7px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 0 4px rgba(88,210,139,.11); }
.app-context-divider { color: rgba(255,255,255,.25); }
.mobile-header { color: var(--text-primary); border-bottom-color: var(--border-subtle); background: rgba(16,19,23,.95); backdrop-filter: blur(14px); }
.menu-toggle { gap: 4px; padding: 9px; border-color: var(--border-strong); background: rgba(255,255,255,.03); }
.menu-toggle span { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: var(--text-primary); }
.brand-compact .brand-mark-image { width: 28px; height: 28px; }
.brand-compact strong { color: var(--text-primary); font-size: 19px; }

/* Content hierarchy, metrics, and panels */
.page-heading { margin-bottom: 28px; }
.page-heading h1 { max-width: 780px; margin: 6px 0 10px; color: var(--text-primary); font-size: clamp(40px, 4vw, 58px); line-height: .92; }
.page-heading > div > p:not(.eyebrow) { max-width: 710px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.page-heading-actions { align-items: flex-end; }
.dashboard-intro { position: relative; padding: 30px 32px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: linear-gradient(115deg, rgba(27,32,38,.94), rgba(17,20,24,.80)); box-shadow: var(--shadow-tight), inset 0 1px 0 rgba(255,255,255,.06); }
.dashboard-intro::before { position: absolute; top: -40px; right: -24px; width: 225px; height: 225px; border: 1px solid rgba(255,208,40,.20); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,208,40,.025), 0 0 70px rgba(255,94,54,.10); content: ""; }
.dashboard-intro::after { position: absolute; right: 24px; bottom: 0; width: 136px; height: 145px; background: var(--brand-mark-image) right bottom / contain no-repeat; content: ""; opacity: .16; filter: grayscale(1) brightness(2); pointer-events: none; }
.dashboard-intro > * { position: relative; z-index: 1; }
.dashboard-intro h1 { max-width: 690px; margin-top: 7px; }
.dashboard-intro .eyebrow { color: var(--brand-primary); }
.dashboard-intro-actions { gap: 9px; }

.stats-grid { gap: 13px; }
.stat-card {
    position: relative;
    min-height: 150px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(30,35,42,.94), rgba(20,24,29,.93));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-tight);
}
.stat-card::before { top: 0; right: auto; left: 0; width: 3px; height: 100%; border-radius: 0 4px 4px 0; background: var(--border-strong); opacity: 1; }
.stat-card::after { position: absolute; top: -60px; right: -54px; width: 140px; height: 140px; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; content: ""; }
.stat-card:hover { border-color: rgba(255,208,40,.31); transform: translateY(-3px); }
.stat-card-gold::before { background: linear-gradient(180deg, #fff09a, var(--brand-primary), #ff9c1d); }
.stat-card-success::before { background: linear-gradient(180deg, #9af1bb, var(--status-success)); }
.stat-card-warning::before { background: linear-gradient(180deg, #ffe582, var(--status-warning)); }
.stat-card-head { position: relative; z-index: 1; }
.stat-label { color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.stat-icon { display: grid; width: 29px; height: 29px; place-items: center; color: var(--brand-primary); border: 1px solid rgba(255,208,40,.22); border-radius: 8px; background: rgba(255,208,40,.08); font-family: "DM Mono", monospace; font-size: 14px; }
.stat-value { position: relative; z-index: 1; margin: 18px 0 4px; color: var(--text-primary); font-size: 40px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: .85; }
.stat-note { position: relative; z-index: 1; color: var(--text-muted); font-size: 11px; line-height: 1.35; }

.dashboard-grid, .dashboard-detail-grid { gap: 15px; }
.panel {
    padding: 25px;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(28,33,39,.96), rgba(18,21,26,.96));
    box-shadow: var(--shadow-tight), inset 0 1px 0 rgba(255,255,255,.055);
}
.panel-featured { color: var(--text-primary); border-color: rgba(255,208,40,.28); background: radial-gradient(circle at 94% 16%, rgba(255,208,40,.14), transparent 17rem), linear-gradient(130deg, #25292a, #171b20 72%); }
.panel-action { color: var(--text-primary); border-color: rgba(250,94,54,.30); background: radial-gradient(circle at 90% 3%, rgba(250,94,54,.18), transparent 15rem), linear-gradient(135deg, #262027, #16191e); }
.panel-action .eyebrow { color: #ff9c79; }
.panel-action h2 { font-size: 31px; }
.panel-action p:not(.eyebrow) { color: var(--text-secondary); }
.panel-heading { padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.panel-heading h2 { margin: 5px 0 0; font-size: 29px; line-height: .95; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.panel-heading .text-link { align-self: center; }

.leader-feature { padding: 20px 0 17px; }
.leader-feature > div:nth-child(2) strong { color: var(--text-primary); font-size: 20px; }
.leader-feature > div:nth-child(2) span { color: var(--text-secondary); }
.leader-score { margin-left: auto; margin-right: 0; padding-left: 22px; padding-right: 0; border-left: 1px solid rgba(255,255,255,.16); border-right: 0; text-align: right; }
.leader-score strong { color: var(--brand-primary); font-size: 42px; line-height: .8; }
.leader-score span { color: var(--text-secondary); }
.leader-performance-meta { padding-top: 14px; border-top-color: rgba(255,255,255,.11); }
.leader-performance-meta span { color: var(--text-secondary); }
.leader-performance-meta b { color: var(--brand-primary); }
.dashboard-empty { color: var(--text-secondary); border-color: var(--border-subtle); background: rgba(255,255,255,.018); }
.dashboard-empty-inverse { color: var(--text-secondary); background: rgba(0,0,0,.14); }
.dashboard-empty strong { color: var(--text-primary); }
.dashboard-empty-mark { color: var(--brand-primary); border-color: rgba(255,208,40,.24); background: rgba(255,208,40,.07); }

.activity-list, .performance-list { gap: 0; }
.activity-item, .performance-row { padding: 14px 0; border-bottom-color: var(--border-subtle); }
.activity-item:last-child, .performance-row:last-child { border-bottom: 0; }
.activity-copy > span, .activity-time, .performance-summary small { color: var(--text-muted); }
.activity-meta { gap: 9px; }
.performance-row:hover { background: rgba(255,255,255,.03); }
.performance-row-first { background: linear-gradient(90deg, rgba(255,208,40,.10), transparent); }
.performance-row-current { border-left-color: var(--brand-primary); border-right: 0; background: rgba(255,208,40,.08); }
.performance-summary strong { color: var(--text-primary); }
.performance-metric { color: var(--text-secondary); }
.performance-metric b { color: var(--text-primary); }
.rank-badge { color: var(--text-secondary); border-color: var(--border-strong); background: rgba(255,255,255,.04); font-family: "DM Mono", monospace; }
.rank-first { color: #1a1509; border-color: #ffe580; background: linear-gradient(145deg, #fff2a1, var(--brand-primary)); }

/* Forms and feedback */
.form-panel, .form-panel-wide { border-color: var(--border-subtle); background: linear-gradient(145deg, rgba(28,33,39,.98), rgba(18,21,26,.98)); }
.form-section-title { color: var(--brand-primary); border-bottom-color: var(--border-subtle); font-family: "Barlow Condensed", sans-serif; font-size: 25px; }
.form-divider { border-top-color: var(--border-subtle); }
.form-field { gap: 7px; }
.form-field label { color: var(--text-primary); font-size: 13px; font-weight: 700; }
.form-field small { color: var(--text-muted); font-size: 12px; }
input, textarea, select {
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: rgba(4,6,8,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
input::placeholder, textarea::placeholder { color: #6d7781; }
input:hover, textarea:hover, select:hover { border-color: rgba(255,255,255,.28); }
input:focus, textarea:focus, select:focus { color: #fff; border-color: var(--brand-primary); background: rgba(255,208,40,.035); box-shadow: var(--ring); }
input:disabled { color: var(--text-muted); border-color: var(--border-subtle); background: rgba(255,255,255,.035); }
.input-with-action input { padding-right: 74px; padding-left: 13px; }
.input-action { right: 8px; left: auto; color: var(--brand-primary); background: transparent; font-size: 11px; font-weight: 800; }
.input-action:hover { color: #fff0a3; }

.notice-banner { color: #fff0ba; border-color: rgba(255,189,53,.35); background: rgba(255,189,53,.10); box-shadow: inset 3px 0 0 var(--status-warning); }
.notice-banner a { color: #fff3af; }
.flash-stack { right: 27px; left: auto; }
.flash { color: var(--text-primary); border-color: var(--border-strong); background: rgba(26,30,36,.96); box-shadow: var(--shadow-raised); backdrop-filter: blur(12px); }
.flash-success { border-left: 3px solid var(--status-success); border-right: 1px solid var(--border-strong); }
.flash-error { border-left: 3px solid var(--status-error); border-right: 1px solid var(--border-strong); }
.flash-warning { border-left: 3px solid var(--status-warning); border-right: 1px solid var(--border-strong); }
.flash-dismiss { color: var(--text-secondary); }
.flash-dismiss:hover { color: var(--text-primary); }

.status { gap: 6px; color: var(--text-secondary); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size: 10px; font-weight: 800; letter-spacing: .055em; }
.status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent); content: ""; }
.status-active, .status-confirmed { color: var(--status-success); border-color: rgba(88,210,139,.28); background: rgba(88,210,139,.09); }
.status-pending, .status-used { color: var(--status-warning); border-color: rgba(255,189,53,.28); background: rgba(255,189,53,.09); }
.status-rejected, .status-cancelled { color: var(--status-error); border-color: rgba(255,109,100,.28); background: rgba(255,109,100,.09); }
.status-expired, .status-inactive, .status-unknown { color: var(--status-expired); border-color: rgba(156,165,174,.25); background: rgba(156,165,174,.08); }

/* Tables, filters, and inline confirmation controls */
.filter-tabs { gap: 7px; padding: 5px; border: 1px solid var(--border-subtle); border-radius: 12px; background: rgba(255,255,255,.028); }
.filter-tabs a { color: var(--text-muted); border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 11px; font-weight: 800; }
.filter-tabs a:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.filter-tabs a.is-active { color: #171717; border-color: rgba(255,239,155,.52); background: linear-gradient(135deg, #ffe67c, var(--brand-primary)); box-shadow: 0 4px 12px rgba(255,184,27,.15); }
.table-search { padding: 13px; border: 1px solid var(--border-subtle); border-radius: 14px; background: rgba(255,255,255,.025); }
.table-search label { color: var(--text-secondary); }
.table-search input { min-height: 39px; }
.table-panel { overflow: visible; padding: 0; background: linear-gradient(145deg, rgba(28,33,39,.96), rgba(18,21,26,.96)); }
.table-panel > .panel-heading { margin: 0; padding: 22px 24px 0; }
.table-scroll { border-top-color: var(--border-subtle); }
.data-table { color: var(--text-primary); direction: ltr; font-size: 13px; text-align: left; }
.data-table th { color: var(--text-muted); border-bottom-color: var(--border-subtle); background: rgba(7,9,11,.28); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.data-table td { color: var(--text-secondary); border-bottom-color: var(--border-subtle); vertical-align: middle; text-align: left; }
.data-table tr:hover td { background: rgba(255,255,255,.035); }
.data-table strong { color: var(--text-primary); }
.data-table small { color: var(--text-muted); }
.data-table code, .sales-code, .credential-code, .generated-code code { color: #ffe471; border-color: rgba(255,208,40,.22); border-radius: 8px; background: rgba(255,208,40,.08); font-family: "DM Mono", monospace; font-variant-numeric: tabular-nums; }
.sales-code { letter-spacing: .045em; }
.person-cell { gap: 10px; }
.person-cell > div strong { color: var(--text-primary); }
.person-cell > div small { color: var(--text-muted); }
.table-actions { gap: 8px; }
.confirm-details > summary, .reject-details > summary, .reset-password-details > summary { list-style: none; }
.confirm-details > summary::-webkit-details-marker, .reject-details > summary::-webkit-details-marker, .reset-password-details > summary::-webkit-details-marker { display: none; }
.confirm-form, .reject-form, .reset-password-form { z-index: 12; color: var(--text-primary); border-color: var(--border-strong); background: #20262d; box-shadow: var(--shadow-ambient); }
.confirm-form label, .reject-form label, .reset-password-form label { color: var(--text-secondary); }
.reason-text { color: #ffaba3; }

/* Leaderboard and ranking */
.leaderboard-hero { position: relative; overflow: hidden; padding: 31px 33px; border: 1px solid rgba(255,208,40,.23); border-radius: var(--radius-lg); background: radial-gradient(circle at 83% 25%, rgba(255,208,40,.16), transparent 21rem), linear-gradient(125deg, #242a31, #15191e); }
.leaderboard-hero::after { position: absolute; right: 27px; bottom: -46px; color: rgba(255,208,40,.09); font-family: "Barlow Condensed", sans-serif; font-size: 178px; font-weight: 800; line-height: 1; content: "01"; }
.leaderboard-hero > * { position: relative; z-index: 1; }
.leaderboard-hero h1 { font-size: clamp(43px, 4vw, 61px); }
.leaderboard-hero p:not(.eyebrow) { color: var(--text-secondary); }
.leaderboard-podium { gap: 14px; }
.podium-card { overflow: hidden; border-color: var(--border-subtle); background: linear-gradient(145deg, rgba(30,35,42,.98), rgba(20,23,28,.98)); box-shadow: var(--shadow-tight), inset 0 1px 0 rgba(255,255,255,.06); }
.podium-card::before { top: -49px; right: -42px; left: auto; border-color: rgba(255,255,255,.07); }
.podium-rank-1 { border-color: rgba(255,220,93,.62); background: radial-gradient(circle at 85% 0%, rgba(255,208,40,.21), transparent 15rem), linear-gradient(145deg, #2c2a21, #1a1c1d); box-shadow: 0 18px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09); }
.podium-rank-2 { border-color: rgba(189,203,214,.30); }
.podium-rank-3 { border-color: rgba(255,158,105,.30); }
.podium-card-current { box-shadow: 0 0 0 2px rgba(255,208,40,.26), var(--shadow-tight); }
.podium-card-head { margin-bottom: 15px; }
.podium-medal { color: var(--text-secondary); border: 1px solid var(--border-strong); background: rgba(255,255,255,.055); font-family: "DM Mono", monospace; }
.podium-rank-1 .podium-medal { color: #18140a; background: linear-gradient(145deg, #fff1a1, var(--brand-primary)); }
.podium-rank-2 .podium-medal { color: #182028; background: #c8d1d9; }
.podium-rank-3 .podium-medal { color: #2a1710; background: #eca97d; }
.podium-rank-label { color: var(--text-muted); }
.podium-person strong { color: var(--text-primary); }
.podium-person small { color: var(--text-muted); }
.podium-metrics > div { border-color: var(--border-subtle); background: rgba(0,0,0,.14); }
.podium-metrics dt { color: var(--text-muted); }
.podium-metrics dd { color: var(--brand-primary); }
.leaderboard-count { color: var(--brand-primary); border-color: rgba(255,208,40,.26); background: rgba(255,208,40,.08); }
.leaderboard-row.leaderboard-rank-1 td { background: linear-gradient(90deg, rgba(255,208,40,.11), transparent); }
.leaderboard-row.leaderboard-rank-2 td { background: linear-gradient(90deg, rgba(190,207,220,.08), transparent); }
.leaderboard-row.leaderboard-rank-3 td { background: linear-gradient(90deg, rgba(236,169,125,.08), transparent); }
.current-user-row td { box-shadow: inset 3px 0 0 var(--brand-primary); }

/* Code issuance, credentials, profiles, and empty states */
.code-generation-shell { width: min(760px, 100%); }
.code-generation-hero { padding: 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: radial-gradient(circle at 76% 22%, rgba(255,208,40,.14), transparent 18rem), linear-gradient(125deg, rgba(30,35,42,.96), rgba(18,21,26,.96)); text-align: left; }
.code-generation-hero .eyebrow { justify-content: flex-start; }
.generation-panel { border-color: rgba(255,208,40,.24); background: linear-gradient(145deg, rgba(30,35,42,.98), rgba(18,21,26,.98)); }
.generation-icon { color: var(--brand-primary); border-color: rgba(255,208,40,.26); background: rgba(255,208,40,.08); box-shadow: 0 0 0 9px rgba(255,208,40,.035); }
.code-result-intro h2, .code-generation-empty h2 { margin: 10px 0; font-size: 40px; line-height: .92; }
.code-result-intro > p:not(.eyebrow), .code-generation-empty > p:not(.eyebrow) { color: var(--text-secondary); }
.generated-code { border-color: rgba(255,208,40,.30); background: rgba(4,6,8,.38); }
.generated-code code { color: #fff0a3; background: transparent; font-size: clamp(20px, 3vw, 29px); letter-spacing: .065em; }
.code-result-meta { text-align: left; }
.code-result-meta > div { border-color: var(--border-subtle); background: rgba(255,255,255,.025); }
.code-result-meta dt { color: var(--text-muted); }
.code-result-meta dd { color: var(--text-primary); }
.code-security-note { color: var(--text-secondary); }
.code-security-note > span { color: var(--brand-primary); }
.success-page, .error-page { border-color: var(--border-subtle); background: linear-gradient(145deg, rgba(30,35,42,.98), rgba(18,21,26,.98)); box-shadow: var(--shadow-ambient), inset 0 1px 0 rgba(255,255,255,.06); }
.success-icon { color: #0d1b11; border: 1px solid #a5f4c2; background: linear-gradient(145deg, #9af1b9, var(--status-success)); }
.error-code { color: var(--brand-primary); font-family: "Barlow Condensed", "Barlow", sans-serif; text-shadow: 0 0 30px rgba(255,208,40,.16); }
.success-page > p:not(.eyebrow), .error-page > p:not(.eyebrow) { color: var(--text-secondary); }
.credential-card { border-color: var(--border-subtle); background: rgba(0,0,0,.16); text-align: left; }
.credential-card > div { border-color: var(--border-subtle); }
.credential-card span { color: var(--text-muted); }
.credential-card strong { color: var(--text-primary); }
.copy-inline { color: var(--brand-primary); }
.profile-details, .details-list { border-color: var(--border-subtle); background: rgba(255,255,255,.018); }
.details-list dt { color: var(--text-muted); }
.details-list dd { color: var(--text-primary); }
.empty-state { color: var(--text-secondary); border-color: var(--border-subtle); background: rgba(255,255,255,.018); }
.empty-state h3 { color: var(--text-primary); }
.empty-symbol { color: var(--brand-primary); border-color: rgba(255,208,40,.25); background: rgba(255,208,40,.07); }

.platform-footer { color: var(--text-muted); border-top-color: var(--border-subtle); }
.platform-footer-public { border-top-color: rgba(255,255,255,.08); }
.platform-footer-divider { color: rgba(255,255,255,.25); }

/* LTR-responsive refinements */
@media (max-width: 1180px) {
    .hero { grid-template-columns: minmax(0, .95fr) minmax(380px, .9fr); gap: 44px; }
    .hero-brand-visual { min-height: 510px; }
    .auth-layout { gap: 35px; }
}

@media (max-width: 980px) {
    .sidebar {
        position: fixed;
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-105%);
        transition: transform .24s cubic-bezier(.2, .8, .2, 1);
        box-shadow: 20px 0 55px rgba(0,0,0,.42);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .app-main::after { z-index: 19; background: rgba(0,0,0,.58); }
    .mobile-header { position: sticky; top: 0; z-index: 9; min-height: 65px; padding: 0 23px; }
    .main-content { width: 100%; padding: 29px 28px 40px; }
    .platform-footer-app { width: calc(100% - 56px); }
    .hero, .auth-layout, .auth-layout-wide { grid-template-columns: 1fr; gap: 32px; }
    .hero { padding-top: 59px; }
    .hero-copy { max-width: 710px; }
    .hero-brand-visual { width: min(680px, 100%); min-height: 550px; }
    .auth-layout { max-width: 790px; padding-top: 46px; }
    .auth-card, .auth-card-premium { max-width: 600px; }
    .auth-visual { min-height: 510px; }
    .auth-visual-stack { right: 2%; width: 39%; }
    .dashboard-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .public-shell { width: min(100% - 32px, 1360px); }
    .public-header { min-height: 76px; }
    .public-nav > a:first-child { display: none; }
    .brand-copy strong { font-size: 20px; }
    .brand-mark-image { width: 36px; height: 36px; }
    .hero { padding: 49px 0 42px; }
    .hero h1 { font-size: clamp(49px, 15vw, 72px); }
    .hero-lead { font-size: 16px; }
    .hero-brand-visual { min-height: 425px; }
    .hero-brand-visual::before { inset: 5% 2% 4% 1%; }
    .hero-product-photo { inset: 5% 3% 14% 5%; width: 92%; height: 80%; }
    .hero-performance-card { right: 0; bottom: 0; max-width: 270px; padding: 15px 16px; }
    .hero-performance-card strong { font-size: 26px; }
    .feature-grid { grid-template-columns: 1fr; padding-bottom: 48px; }
    .auth-layout { padding: 29px 0 50px; }
    .auth-visual { min-height: 440px; padding: 26px; border-radius: 22px; }
    .auth-visual-content h1 { font-size: clamp(43px, 14vw, 62px); }
    .auth-visual-content > p:not(.eyebrow) { font-size: 14px; }
    .auth-visual-metrics { gap: 5px; }
    .auth-visual-metrics > div { padding: 9px 5px; }
    .auth-visual-stack { right: -8%; width: 50%; }
    .auth-card, .auth-card-premium { padding: 29px 23px; border-radius: 21px; }
    .auth-card::before { right: auto; left: 22px; }
    .section-heading h2 { font-size: 38px; }
    .main-content { padding: 25px 16px 34px; }
    .mobile-header { padding: 0 16px; }
    .platform-footer-app { width: calc(100% - 32px); }
    .app-context-bar { margin-bottom: 18px; font-size: 9px; }
    .page-heading, .page-heading-actions { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 22px; }
    .page-heading h1 { font-size: 42px; }
    .page-heading-actions > .button, .page-heading-actions > .button-row { width: 100%; }
    .dashboard-intro { padding: 24px 20px; }
    .dashboard-intro::after { right: -10px; width: 110px; }
    .dashboard-intro-actions { width: 100%; }
    .dashboard-intro-actions .button { flex: 1 1 0; }
    .stats-grid-5, .stats-grid-4, .stats-grid-3, .stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { min-height: 127px; padding: 15px; }
    .stat-value { font-size: 34px; }
    .stat-label { font-size: 10px; }
    .dashboard-grid, .dashboard-detail-grid { grid-template-columns: 1fr; }
    .dashboard-detail-grid > :last-child:nth-child(odd) { grid-column: auto; }
    .panel { padding: 20px; }
    .panel-heading h2 { font-size: 26px; }
    .panel-action h2 { font-size: 28px; }
    .leader-score { margin-left: 58px; padding-left: 0; border-left: 0; text-align: left; }
    .leader-score strong { font-size: 37px; }
    .activity-item { align-items: flex-start; }
    .activity-meta { align-items: flex-end; }
    .filter-tabs { width: 100%; overflow-x: auto; }
    .filter-tabs a { flex: 0 0 auto; }
    .table-search { align-items: stretch; flex-direction: column; }
    .table-search input, .table-search .button { width: 100%; }
    .table-panel > .panel-heading { padding: 19px 19px 0; }
    .data-table { min-width: 710px; }
    .confirm-form, .reject-form, .reset-password-form { right: auto; left: 0; max-width: min(330px, calc(100vw - 42px)); }
    .leaderboard-hero { padding: 24px 20px; }
    .leaderboard-hero::after { right: 4px; font-size: 128px; }
    .leaderboard-podium { grid-template-columns: 1fr; }
    .podium-card { padding: 19px; }
    .generated-code { align-items: stretch; flex-direction: column; }
    .generated-code code { font-size: 19px; text-align: center; }
    .generation-panel { padding: 30px 20px; }
    .code-generation-hero { padding: 24px 20px; text-align: left; }
    .code-result-meta { grid-template-columns: 1fr; text-align: left; }
    .code-result-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .code-result-meta dt { margin: 0; }
    .details-list > div { grid-template-columns: 100px 1fr; }
    .credential-card { grid-template-columns: 1fr; }
    .success-page, .error-page { margin: 24px auto; padding: 31px 20px; }
    .success-page h1, .error-page h1 { font-size: 37px; }
    .flash-stack { top: 76px; right: 16px; left: 16px; }
    .flash { width: 100%; }
}

@media (max-width: 430px) {
    .public-nav .button { padding: 8px 9px; }
    .stats-grid-5, .stats-grid-4, .stats-grid-3, .stats-grid-2 { grid-template-columns: 1fr; }
    .hero-actions .button { width: 100%; }
    .button-row { align-items: stretch; flex-direction: column; }
    .button-row .button, .button-row form, .button-row form .button { width: 100%; }
    .platform-footer-divider { display: none; }
    .auth-visual { min-height: 465px; }
    .auth-visual-metrics { grid-template-columns: 1fr; max-width: 180px; }
    .auth-visual-metrics > div { grid-template-columns: 24px 1fr; align-items: center; }
    .auth-visual-stack { top: 10%; right: -18%; width: 69%; }
    .hero-brand-visual { min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Final FitAlliance Persian RTL layer — kept after the active-brand layer so
   the approved premium visual system is mirrored consistently. */
html,
body,
body.has-app-shell,
body.has-public-shell {
    direction: rtl;
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    text-align: right;
}

h1, h2, h3,
.stat-value,
.leader-score strong,
.trainer-rank-spotlight strong,
.section-heading h2,
.panel-heading h2,
.error-code,
.form-section-title {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    letter-spacing: -.02em;
}

.brand-copy strong,
.brand-compact strong {
    font-family: "Barlow", Arial, sans-serif;
    letter-spacing: .045em;
}
.brand-copy small,
.eyebrow,
.nav-label,
.app-context-bar,
.auth-card-brand,
.hero-performance-label {
    letter-spacing: 0;
    text-transform: none;
}

/* FitAlliance owns the shell; FLAG remains a separately visible active brand. */
.platform-brand { min-width: 0; }
.platform-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    color: #15110a;
    border: 1px solid rgba(255,235,147,.46);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff0a3, var(--brand-primary) 55%, #ff9c26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 8px 18px rgba(0,0,0,.22);
    font-family: "Barlow", Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.sidebar-brand-context {
    display: grid;
    gap: 8px;
    margin: 17px 8px 0;
    padding: 14px;
    border: 1px solid rgba(255,208,40,.18);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255,208,40,.08), rgba(255,255,255,.02));
}
.sidebar-brand-context-label { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.sidebar-active-brand,
.mobile-active-brand,
.public-active-brand,
.auth-active-brand { display: inline-flex; align-items: center; gap: 8px; }
.sidebar-active-brand { color: var(--text-primary); font-family: "Barlow", "Vazirmatn", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .05em; }
.sidebar-active-brand .brand-mark-image { width: 26px; height: 26px; }
.mobile-active-brand { color: var(--text-secondary); font-family: "Barlow", "Vazirmatn", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.mobile-active-brand .brand-mark-image { width: 25px; height: 25px; }
.public-active-brand { padding: 6px 9px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 10px; font-weight: 700; }
.public-active-brand .brand-mark-image { width: 20px; height: 20px; }
.public-active-brand bdi { color: var(--brand-primary); font-family: "Barlow", "Vazirmatn", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.auth-active-brand { margin: -5px 0 15px; color: var(--brand-primary); font-size: 12px; font-weight: 800; }

.public-nav > a:not(.button)::after { right: 0; left: auto; }
.hero-brand-visual::before { inset: 7% 9% 2% 4%; }
.hero-brand-visual::after { right: auto; left: 0; }
.hero-visual-glow { right: auto; left: 12%; }
.hero-product-photo { inset: 0 11% 7% 6%; }
.hero-performance-card { right: auto; left: 0; text-align: right; }
.feature-card::before { right: 24px; left: auto; background: linear-gradient(270deg, var(--brand-primary), transparent); }

/* Source order retains the artwork at left and places the Persian form at right. */
.auth-layout { direction: ltr; }
.auth-visual,
.auth-card,
.auth-card-premium { direction: rtl; text-align: right; }
.auth-visual::before {
    background:
        linear-gradient(270deg, rgba(6,8,10,.96) 0%, rgba(7,10,13,.66) 42%, rgba(7,10,13,.06) 100%),
        linear-gradient(0deg, rgba(7,9,11,.94) 0%, transparent 58%);
}
.auth-visual-grid { mask-image: linear-gradient(270deg, #000, transparent 75%); }
.auth-visual-stack { right: auto; left: -10%; transform: rotate(7deg); }
.auth-card::before { right: 30px; left: auto; background: linear-gradient(270deg, var(--brand-primary), var(--brand-secondary)); }
.auth-card-brand { justify-content: flex-start; }

.app-shell { flex-direction: row-reverse; }
.sidebar {
    border-right: 0;
    border-left: 1px solid var(--border-subtle);
    box-shadow: -15px 0 35px rgba(0,0,0,.18);
}
.sidebar::before { background: linear-gradient(270deg, var(--brand-primary), var(--brand-secondary), transparent); }
.nav-link:hover { transform: translateX(-2px); }
.nav-link.is-active::before { right: -8px; left: auto; }
.page-heading-actions { align-items: flex-start; }
.dashboard-intro::before { right: auto; left: -24px; }
.dashboard-intro::after { right: auto; left: 24px; background-position: left bottom; }
.stat-card::before { right: 0; left: auto; border-radius: 4px 0 0 4px; }
.leader-score {
    margin-right: auto;
    margin-left: 0;
    padding-right: 22px;
    padding-left: 0;
    border-right: 1px solid rgba(255,255,255,.16);
    border-left: 0;
    text-align: left;
}
.performance-row-current { border-right-color: var(--brand-primary); border-left: 0; }

input,
textarea,
select { direction: rtl; text-align: right; font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }
input[type="email"],
input[type="password"],
input[type="number"],
.code-input,
.generated-code code,
.credential-code,
.sales-code,
.data-table code,
.credential-card strong,
.credential-card code { direction: ltr; text-align: left; unicode-bidi: plaintext; }
.input-with-action input { padding-right: 13px; padding-left: 74px; }
.input-action { right: auto; left: 8px; }
.notice-banner { box-shadow: inset -3px 0 0 var(--status-warning); }
.flash-success { border-right: 3px solid var(--status-success); border-left: 1px solid var(--border-strong); }
.flash-error { border-right: 3px solid var(--status-error); border-left: 1px solid var(--border-strong); }
.flash-warning { border-right: 3px solid var(--status-warning); border-left: 1px solid var(--border-strong); }

.data-table { direction: rtl; text-align: right; }
.data-table th,
.data-table td { text-align: right; }
.data-table th { letter-spacing: 0; text-transform: none; }
.data-table .sales-code,
.data-table code { display: inline-block; }
.confirm-form,
.reject-form,
.reset-password-form { right: auto; left: 0; }

.leaderboard-hero { background: radial-gradient(circle at 17% 25%, rgba(255,208,40,.16), transparent 21rem), linear-gradient(235deg, #242a31, #15191e); }
.leaderboard-hero::after { right: auto; left: 27px; }
.podium-card::before { right: auto; left: -42px; }
.leaderboard-row.leaderboard-rank-1 td { background: linear-gradient(270deg, rgba(255,208,40,.11), transparent); }
.leaderboard-row.leaderboard-rank-2 td { background: linear-gradient(270deg, rgba(190,207,220,.08), transparent); }
.leaderboard-row.leaderboard-rank-3 td { background: linear-gradient(270deg, rgba(236,169,125,.08), transparent); }
.current-user-row td { box-shadow: inset -3px 0 0 var(--brand-primary); }

.code-generation-hero,
.code-result-meta,
.credential-card { text-align: right; }
.code-generation-hero .eyebrow { justify-content: flex-start; }
.credential-card .copy-inline { right: 8px; left: auto; }
.details-list > div { grid-template-columns: 1fr 120px; }
.details-list dt { grid-column: 2; }
.details-list dd { grid-column: 1; }

@media (max-width: 980px) {
    .sidebar {
        right: 0;
        left: auto;
        transform: translateX(105%);
        box-shadow: -20px 0 55px rgba(0,0,0,.42);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .auth-visual-stack { right: auto; left: 2%; }
}

@media (max-width: 680px) {
    .platform-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 21px; }
    .public-active-brand > span { display: none; }
    .mobile-active-brand { gap: 5px; font-size: 11px; }
    .hero-brand-visual::before { inset: 5% 1% 4% 2%; }
    .hero-product-photo { inset: 5% 5% 14% 3%; }
    .hero-performance-card { right: auto; left: 0; }
    .auth-visual-stack { right: auto; left: -8%; }
    .auth-card::before { right: 22px; left: auto; }
    .dashboard-intro::after { right: auto; left: -10px; }
    .leader-score { margin-right: 58px; margin-left: 0; padding-right: 0; border-right: 0; text-align: right; }
    .activity-meta { align-items: flex-start; }
    .confirm-form,
    .reject-form,
    .reset-password-form { right: 0; left: auto; }
    .leaderboard-hero::after { right: auto; left: 4px; }
    .code-generation-hero,
    .code-result-meta { text-align: right; }
    .code-result-meta > div { flex-direction: row-reverse; }
}

@media (max-width: 430px) {
    .auth-visual-stack { right: auto; left: -18%; }
}

/* -------------------------------------------------------------------------
   Final dark-theme readability and KPI interaction layer.
   This must remain after the Persian RTL layer so the approved direction and
   the higher-contrast charcoal surfaces are resolved together.
   ------------------------------------------------------------------------- */
:root {
    --surface-canvas: #101419;
    --surface-base: #171c22;
    --surface-raised: #1d242c;
    --surface-elevated: #242d37;
    --surface-strong: #303a46;
    --surface-glass: rgba(25, 31, 38, .90);
    --border-subtle: rgba(233, 240, 245, .14);
    --border-strong: rgba(233, 240, 245, .27);
    --text-primary: #f8fafb;
    --text-secondary: #c6cfd7;
    --text-muted: #99a6b2;
    --brand-primary: #ffda50;
    --brand-primary-strong: #ffc43b;
    --brand-glow: rgba(255, 208, 64, .30);
    --status-success: #86e8a7;
    --status-warning: #ffd36b;
    --status-error: #ff9188;
    --status-info: #8bcaff;
    --status-used: #c7b9ff;
    --status-expired: #b2bcc6;
    --ring: 0 0 0 4px rgba(255, 218, 80, .28);
}

/* Read as three separate planes: canvas, application rail, and raised work. */
body.has-app-shell {
    background:
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px),
        radial-gradient(circle at 78% -12%, rgba(250,94,54,.13), transparent 32rem),
        radial-gradient(circle at 17% 0%, rgba(255,218,80,.09), transparent 27rem),
        var(--surface-canvas);
}
.app-main { background: linear-gradient(180deg, rgba(255,255,255,.012), transparent 250px); }

.sidebar {
    border-left-color: rgba(240,244,247,.17);
    background: linear-gradient(180deg, rgba(31,38,47,.99), rgba(17,22,28,.99) 54%, rgba(12,16,21,.99));
    box-shadow: -16px 0 38px rgba(0,0,0,.25), inset -1px 0 0 rgba(255,255,255,.025);
}
.sidebar-top,
.sidebar-bottom { border-color: rgba(240,244,247,.13); }
.nav-label,
.sidebar-brand-context-label,
.account-copy small,
.account-actions,
.account-actions a,
.account-actions button { color: #a9b5c0; }
.nav-link { color: #c0cad3; }
.nav-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-link.is-active {
    color: #171611;
    border-color: rgba(255,241,175,.72);
    box-shadow: 0 10px 24px rgba(255,190,43,.22), inset 0 1px 0 rgba(255,255,255,.48);
}
.account-card {
    border-color: rgba(240,244,247,.15);
    background: rgba(255,255,255,.045);
}
.account-card:hover {
    border-color: rgba(255,218,80,.48);
    background: rgba(255,218,80,.085);
}

.dashboard-intro,
.panel,
.form-panel,
.form-panel-wide,
.table-panel,
.success-page,
.error-page {
    border-color: rgba(240,244,247,.16);
    background: linear-gradient(145deg, rgba(39,47,57,.98), rgba(23,29,36,.99));
    box-shadow: 0 17px 34px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.075);
}
.dashboard-intro {
    background:
        radial-gradient(circle at 9% 28%, rgba(255,218,80,.095), transparent 19rem),
        linear-gradient(115deg, rgba(42,50,60,.98), rgba(24,30,37,.96));
}
.panel-featured {
    border-color: rgba(255,218,80,.40);
    background: radial-gradient(circle at 94% 16%, rgba(255,218,80,.18), transparent 17rem), linear-gradient(130deg, #30323a, #1c2229 72%);
}
.panel-action {
    border-color: rgba(255,137,104,.42);
    background: radial-gradient(circle at 90% 3%, rgba(250,94,54,.20), transparent 15rem), linear-gradient(135deg, #33272e, #1b2027);
}
.panel-heading,
.form-section-title,
.activity-item,
.performance-row,
.leader-performance-meta { border-color: rgba(240,244,247,.13); }
.page-heading > div > p:not(.eyebrow),
.dashboard-intro p,
.panel-action p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.leader-feature > div:nth-child(2) span,
.leader-score span,
.leader-performance-meta span,
.activity-copy > span,
.activity-time,
.performance-summary small,
.form-field small,
.code-result-intro > p:not(.eyebrow),
.code-generation-empty > p:not(.eyebrow),
.code-security-note,
.success-page > p:not(.eyebrow),
.error-page > p:not(.eyebrow) { color: var(--text-secondary); }

.stat-card {
    border-color: rgba(240,244,247,.17);
    background:
        radial-gradient(circle at 92% 4%, rgba(255,255,255,.06), transparent 9rem),
        linear-gradient(145deg, rgba(43,52,63,.98), rgba(25,32,40,.99));
    box-shadow: 0 13px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.085);
}
.stat-card:hover { border-color: rgba(255,218,80,.46); }
.stat-label { color: #c8d1d9; }
.stat-note { color: #aeb9c4; }
.stat-icon { border-color: rgba(255,218,80,.38); background: rgba(255,218,80,.12); }
.stat-card-success {
    border-color: rgba(134,232,167,.30);
    background: radial-gradient(circle at 92% 4%, rgba(134,232,167,.11), transparent 9rem), linear-gradient(145deg, rgba(38,58,50,.98), rgba(23,34,31,.99));
}
.stat-card-success .stat-label,
.stat-card-success .stat-note { color: #c8ead4; }
.stat-card-warning {
    border-color: rgba(255,211,107,.34);
    background: radial-gradient(circle at 92% 4%, rgba(255,211,107,.10), transparent 9rem), linear-gradient(145deg, rgba(60,53,37,.98), rgba(34,32,27,.99));
}
.stat-card-warning .stat-label,
.stat-card-warning .stat-note { color: #f4deb0; }

/* Semantic KPI links work whether the link is the card or wraps a card. */
.stat-card-link {
    display: block;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.stat-card-link > .stat-card { cursor: pointer; }
.stat-card.stat-card-link,
.stat-card-link > .stat-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.stat-card.stat-card-link:hover,
.stat-card-link:hover > .stat-card {
    border-color: rgba(255,218,80,.62);
    box-shadow: 0 20px 38px rgba(0,0,0,.28), 0 0 0 1px rgba(255,218,80,.13), inset 0 1px 0 rgba(255,255,255,.10);
    transform: translateY(-4px);
}
.stat-card.stat-card-link:active,
.stat-card-link:active > .stat-card { transform: translateY(-1px); }
.stat-card.stat-card-link:focus-visible,
.stat-card-link:focus-visible > .stat-card {
    border-color: #ffe78a;
    box-shadow: 0 0 0 3px #101419, 0 0 0 6px rgba(255,218,80,.78), 0 18px 36px rgba(0,0,0,.27);
    outline: 0;
}
.stat-card-link:focus-visible { outline: 0; }

input,
textarea,
select {
    border-color: rgba(240,244,247,.24);
    background: rgba(7,11,15,.52);
}
input::placeholder,
textarea::placeholder { color: #9ca8b3; opacity: 1; }
input:hover,
textarea:hover,
select:hover { border-color: rgba(255,255,255,.42); }
input:focus,
textarea:focus,
select:focus {
    border-color: #ffe06a;
    background: rgba(255,218,80,.055);
    box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.035);
}
.button-success {
    color: #06140b;
    border-color: rgba(183,255,208,.70);
    background: linear-gradient(135deg, #b4f8c8, var(--status-success));
    box-shadow: 0 9px 20px rgba(83,215,129,.18), inset 0 1px 0 rgba(255,255,255,.55);
}
.button-success:hover {
    color: #041008;
    border-color: #dcffe8;
    background: linear-gradient(135deg, #d0ffe0, #8eebae);
}
.notice-banner {
    color: #fff2bd;
    border-color: rgba(255,211,107,.58);
    background: linear-gradient(90deg, rgba(255,211,107,.17), rgba(255,211,107,.075));
}
.notice-banner a { color: #fff7d7; }
.flash { color: #edf2f5; border-color: rgba(240,244,247,.24); background: rgba(38,47,57,.98); }
.flash-success { color: #dcffe8; border-right-color: rgba(134,232,167,.45); background: linear-gradient(90deg, rgba(134,232,167,.16), rgba(38,47,57,.98) 55%); }
.flash-warning { color: #fff0bd; border-right-color: rgba(255,211,107,.56); background: linear-gradient(90deg, rgba(255,211,107,.16), rgba(38,47,57,.98) 55%); }
.flash-error { color: #ffe2de; border-right-color: rgba(255,145,136,.54); background: linear-gradient(90deg, rgba(255,145,136,.15), rgba(38,47,57,.98) 55%); }

.status {
    color: #d9e0e6;
    border-color: rgba(240,244,247,.24);
    background: rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.status-active,
.status-confirmed {
    color: #aaf5c1;
    border-color: rgba(134,232,167,.50);
    background: rgba(134,232,167,.16);
}
.status-pending,
.status-used {
    color: #ffe08a;
    border-color: rgba(255,211,107,.52);
    background: rgba(255,211,107,.15);
}
.status-rejected,
.status-cancelled {
    color: #ffb4ad;
    border-color: rgba(255,145,136,.48);
    background: rgba(255,145,136,.14);
}
.status-expired,
.status-inactive,
.status-unknown {
    color: #c2ccd5;
    border-color: rgba(178,188,198,.40);
    background: rgba(178,188,198,.13);
}

.table-search,
.filter-tabs { border-color: rgba(240,244,247,.17); background: rgba(255,255,255,.045); }
.table-search label { color: #d0d8df; }
.filter-tabs a { color: #b7c1ca; }
.filter-tabs a:hover { color: #fff; background: rgba(255,255,255,.085); }
.filter-tabs a.is-active { border-color: rgba(255,241,175,.70); box-shadow: 0 5px 14px rgba(255,184,27,.22), inset 0 1px 0 rgba(255,255,255,.44); }
.table-scroll { border-top-color: rgba(240,244,247,.16); }
.data-table th {
    color: #c7d0d8;
    border-bottom-color: rgba(240,244,247,.18);
    background: rgba(7,11,15,.52);
}
.data-table td {
    color: #d7dfe5;
    border-bottom-color: rgba(240,244,247,.13);
}
.data-table strong,
.person-cell > div strong { color: #fff; }
.data-table small,
.person-cell > div small { color: #b1bdc7; }
.data-table tr:hover td { background: rgba(255,255,255,.072); }
.data-table tbody tr:focus-within td { background: rgba(255,218,80,.075); }
.data-table code,
.sales-code,
.credential-code,
.generated-code code { color: #ffec9d; border-color: rgba(255,218,80,.38); background: rgba(255,218,80,.12); }

.dashboard-empty,
.dashboard-empty-inverse,
.empty-state,
.profile-details,
.details-list,
.credential-card,
.code-result-meta > div {
    color: #cbd4dc;
    border-color: rgba(240,244,247,.18);
    background: rgba(255,255,255,.052);
}
.empty-state h3,
.dashboard-empty strong,
.details-list dd,
.credential-card strong { color: #fff; }
.empty-state p,
.details-list dt,
.credential-card span,
.code-result-meta dt { color: #b7c2cb; }
.empty-symbol,
.dashboard-empty-mark {
    color: #ffdf64;
    border-color: rgba(255,218,80,.42);
    background: rgba(255,218,80,.12);
}
.leader-performance-meta b,
.podium-metrics dd,
.leaderboard-count,
.code-security-note > span,
.copy-inline { color: #ffe17a; }
.platform-footer { color: #aeb9c4; border-top-color: rgba(240,244,247,.12); }

@media (prefers-reduced-motion: reduce) {
    .stat-card.stat-card-link,
    .stat-card-link > .stat-card { transition: none; }
}

/* -------------------------------------------------------------------------
   Manual sale confirmation modal
   A reusable RTL layer kept at the true end of the stylesheet so it cleanly
   replaces the old in-table confirmation expansion without affecting it.
   ------------------------------------------------------------------------- */

/* Keep a hidden reusable dialog out of both layout and the accessibility tree. */
.confirmation-modal[hidden] { display: none !important; }

body.confirmation-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.confirmation-modal {
    position: fixed;
    z-index: 240;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 38px);
    direction: rtl;
    isolation: isolate;
    overflow: hidden auto;
    overscroll-behavior: contain;
    color: var(--text-primary);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    animation: confirmation-modal-fade .18s ease-out both;
}

.confirmation-modal__backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    cursor: default;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 8%, rgba(255,218,80,.11), transparent 29rem),
        rgba(5, 8, 12, .79);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.confirmation-modal__backdrop:hover,
.confirmation-modal__backdrop:focus-visible {
    transform: none;
    border: 0;
    background:
        radial-gradient(circle at 50% 8%, rgba(255,218,80,.11), transparent 29rem),
        rgba(5, 8, 12, .79);
    box-shadow: none;
    outline: 0;
}

.confirmation-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(558px, 100%);
    max-height: min(760px, calc(100dvh - 32px));
    overflow: hidden auto;
    border: 1px solid rgba(255, 230, 121, .32);
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,218,80,.16), transparent 18rem),
        linear-gradient(145deg, rgba(47,57,69,.99), rgba(24,30,37,.995) 74%);
    box-shadow:
        0 32px 80px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.055) inset,
        0 1px 0 rgba(255,255,255,.13) inset;
    scrollbar-color: rgba(255,218,80,.56) transparent;
    animation: confirmation-modal-enter .22s cubic-bezier(.22,.8,.28,1) both;
}

.confirmation-modal__dialog::before {
    position: absolute;
    top: 0;
    right: clamp(23px, 6vw, 34px);
    left: clamp(23px, 6vw, 34px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,239,159,.88), transparent);
    content: "";
    pointer-events: none;
}

.confirmation-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 25px clamp(22px, 5vw, 31px) 18px;
    border-bottom: 1px solid rgba(240,244,247,.14);
}

.confirmation-modal__title-group { min-width: 0; }

.confirmation-modal__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #ffe17a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
}

.confirmation-modal__header .eyebrow {
    margin: 0 0 6px;
    color: #ffe17a;
    font-size: 10px;
    letter-spacing: .07em;
    line-height: 1.2;
}

.confirmation-modal__header h2,
.confirmation-modal__title {
    margin: 0;
    color: #fff;
    font-size: clamp(19px, 2.3vw, 23px);
    font-weight: 800;
    line-height: 1.45;
}

.confirmation-modal__header p,
.confirmation-modal__subtitle {
    max-width: 430px;
    margin: 6px 0 0;
    color: #c8d2da;
    font-size: 12px;
    line-height: 1.85;
}

.confirmation-modal__close {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    margin: -3px -4px 0 0;
    padding: 0;
    color: #c9d2da;
    cursor: pointer;
    border: 1px solid rgba(240,244,247,.18);
    border-radius: 11px;
    background: rgba(255,255,255,.055);
    font-family: inherit;
    font-size: 21px;
    line-height: 1;
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.confirmation-modal__close:hover {
    color: #fff7cb;
    border-color: rgba(255,218,80,.56);
    background: rgba(255,218,80,.13);
    transform: translateY(-1px);
}

.confirmation-modal__close:focus-visible,
.confirmation-modal__copy:focus-visible,
.confirmation-modal-trigger:focus-visible,
[data-confirmation-open]:focus-visible,
[data-confirmation-trigger]:focus-visible {
    outline: 2px solid #ffe47a;
    outline-offset: 3px;
}

.confirmation-modal__content {
    display: grid;
    gap: 16px;
    padding: 19px clamp(22px, 5vw, 31px) clamp(22px, 5vw, 29px);
}

/* The reusable modal can keep summary and form as direct children as well. */
.confirmation-modal > .confirmation-modal__summary {
    margin: 19px clamp(22px, 5vw, 31px) 0;
}

.confirmation-modal > .confirmation-modal__form {
    padding: 16px clamp(22px, 5vw, 31px) clamp(22px, 5vw, 29px);
}

.confirmation-modal__summary {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,218,80,.27);
    border-radius: 15px;
    background:
        radial-gradient(circle at 5% 0%, rgba(255,218,80,.11), transparent 11rem),
        rgba(6,10,14,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.confirmation-modal__summary::after {
    position: absolute;
    top: -60px;
    left: -37px;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(255,218,80,.10);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.confirmation-modal__summary-heading {
    color: #dce4ea;
    font-size: 11px;
    font-weight: 800;
}

.confirmation-modal__summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.confirmation-modal__summary-item {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid rgba(240,244,247,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
}

.confirmation-modal__summary-item--code { grid-column: 1 / -1; }

.confirmation-modal__summary-item dt,
.confirmation-modal__summary-label {
    color: #aebac4;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
}

.confirmation-modal__summary-item dd,
.confirmation-modal__summary-value {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #f4f7f9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.confirmation-modal__summary > .confirmation-modal__summary-item > dd {
    display: flex;
    align-items: center;
    gap: 9px;
}

.confirmation-modal__summary > .confirmation-modal__summary-item > dd .confirmation-modal__code {
    flex: 1 1 auto;
}

.confirmation-modal__code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.confirmation-modal__code,
.confirmation-modal__summary code {
    display: inline-block;
    min-width: 0;
    padding: 7px 8px;
    overflow: hidden;
    color: #ffeca5;
    direction: ltr;
    border: 1px solid rgba(255,218,80,.38);
    border-radius: 8px;
    background: rgba(255,218,80,.10);
    font-family: "DM Mono", "Roboto Mono", Consolas, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .045em;
    line-height: 1.45;
    text-align: left;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
    white-space: nowrap;
}

.confirmation-modal__copy {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 9px;
    color: #ffea99;
    cursor: pointer;
    border: 1px solid rgba(255,218,80,.30);
    border-radius: 8px;
    background: rgba(255,218,80,.075);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.confirmation-modal__copy:hover {
    color: #1b1608;
    border-color: rgba(255,240,159,.85);
    background: linear-gradient(135deg, #ffe987, #ffca43);
}

.confirmation-modal__form {
    display: grid;
    gap: 14px;
}

.confirmation-modal__field {
    display: grid;
    gap: 7px;
}

.confirmation-modal__field label {
    color: #edf2f5;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.confirmation-modal__optional {
    margin-inline-start: 4px;
    color: #aebac4;
    font-size: 10px;
    font-weight: 600;
}

.confirmation-modal__field .optional { margin-inline-start: 4px; }

.confirmation-modal__field input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: #fff;
    border: 1px solid rgba(240,244,247,.25);
    border-radius: 10px;
    background: rgba(5,9,13,.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    font-size: 12px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.confirmation-modal__field input[dir="ltr"],
.confirmation-modal__field input[type="number"] {
    direction: ltr;
    font-family: "DM Mono", "Roboto Mono", Consolas, monospace;
    text-align: left;
    unicode-bidi: plaintext;
}

.confirmation-modal__field input::placeholder { color: #98a5af; opacity: 1; }

.confirmation-modal__field input:hover { border-color: rgba(255,255,255,.44); }

.confirmation-modal__field input:focus {
    border-color: #ffe06a;
    background: rgba(255,218,80,.055);
    box-shadow: 0 0 0 4px rgba(255,218,80,.20), inset 0 1px 0 rgba(255,255,255,.035);
    outline: 0;
}

.confirmation-modal__field input[aria-invalid="true"],
.confirmation-modal__field.is-invalid input {
    border-color: rgba(255,145,136,.82);
    background: rgba(255,109,100,.075);
}

.confirmation-modal__field input[aria-invalid="true"]:focus,
.confirmation-modal__field.is-invalid input:focus {
    box-shadow: 0 0 0 4px rgba(255,145,136,.19);
}

.confirmation-modal__hint {
    color: #acb8c2;
    font-size: 10px;
    line-height: 1.75;
}

.confirmation-modal__error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #ffd4d0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
}

.confirmation-modal__error::before {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: #35110e;
    border-radius: 50%;
    background: #ff9b92;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
    content: "!";
}

.confirmation-modal__error[hidden] { display: none !important; }

.confirmation-modal__info {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 11px 34px 11px 12px;
    color: #d6e3ed;
    border: 1px solid rgba(139,202,255,.27);
    border-radius: 11px;
    background: linear-gradient(90deg, rgba(139,202,255,.11), rgba(139,202,255,.045));
    font-size: 11px;
    line-height: 1.85;
}

.confirmation-modal__info strong { color: #eaf3fa; font-size: 11px; }
.confirmation-modal__info span { color: #c8d9e6; }

.confirmation-modal__info::before {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: #071522;
    border-radius: 50%;
    background: #8bcaff;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    content: "i";
}

.confirmation-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid rgba(240,244,247,.13);
}

.confirmation-modal__actions .button {
    min-height: 42px;
    margin: 0;
    padding-inline: 16px;
    font-size: 12px;
}

.confirmation-modal__submit {
    color: #181304;
    border-color: rgba(255,238,159,.82);
    background: linear-gradient(135deg, #ffeb8c, #ffc542);
    box-shadow: 0 9px 20px rgba(255,184,27,.20), inset 0 1px 0 rgba(255,255,255,.55);
}

.confirmation-modal [data-confirmation-submit] {
    color: #181304;
    border-color: rgba(255,238,159,.82);
    background: linear-gradient(135deg, #ffeb8c, #ffc542);
    box-shadow: 0 9px 20px rgba(255,184,27,.20), inset 0 1px 0 rgba(255,255,255,.55);
}

.confirmation-modal__submit:hover:not(:disabled) {
    color: #110d03;
    border-color: #fff1ac;
    background: linear-gradient(135deg, #fff0a7, #ffd25a);
    box-shadow: 0 12px 26px rgba(255,184,27,.29), inset 0 1px 0 rgba(255,255,255,.62);
}

.confirmation-modal [data-confirmation-submit]:hover:not(:disabled) {
    color: #110d03;
    border-color: #fff1ac;
    background: linear-gradient(135deg, #fff0a7, #ffd25a);
    box-shadow: 0 12px 26px rgba(255,184,27,.29), inset 0 1px 0 rgba(255,255,255,.62);
}

.confirmation-modal__submit:disabled,
.confirmation-modal [data-confirmation-submit]:disabled,
.confirmation-modal.is-submitting .confirmation-modal__submit,
.confirmation-modal.is-submitting [data-confirmation-submit] {
    color: rgba(32,26,9,.60);
    cursor: wait;
    border-color: rgba(255,232,139,.45);
    background: #d7b757;
    box-shadow: none;
    opacity: .72;
}

.confirmation-modal__cancel {
    color: #d1d9df;
    border-color: rgba(240,244,247,.22);
    background: rgba(255,255,255,.055);
}

.confirmation-modal [data-confirmation-cancel] {
    color: #d1d9df;
    border-color: rgba(240,244,247,.22);
    background: rgba(255,255,255,.055);
}

.confirmation-modal__cancel:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(255,255,255,.44);
    background: rgba(255,255,255,.10);
}

.confirmation-modal [data-confirmation-cancel]:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(255,255,255,.44);
    background: rgba(255,255,255,.10);
}

.confirmation-modal__cancel:disabled,
.confirmation-modal [data-confirmation-cancel]:disabled,
.confirmation-modal__close:disabled {
    cursor: not-allowed;
    opacity: .46;
}

/* The sales-code table retains a compact, consistently hit-sized action. */
.confirmation-modal-trigger,
[data-confirmation-open],
[data-confirmation-trigger] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 9px;
    color: #ffe889;
    cursor: pointer;
    border: 1px solid rgba(255,218,80,.42);
    border-radius: 8px;
    background: rgba(255,218,80,.11);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.confirmation-modal-trigger:hover,
[data-confirmation-open]:hover,
[data-confirmation-trigger]:hover {
    color: #171305;
    border-color: rgba(255,240,159,.85);
    background: linear-gradient(135deg, #ffed98, #ffc845);
    box-shadow: 0 7px 14px rgba(255,184,27,.19);
    transform: translateY(-1px);
}

.confirmation-modal-trigger:active,
[data-confirmation-open]:active,
[data-confirmation-trigger]:active { transform: translateY(0); }

@keyframes confirmation-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirmation-modal-enter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
    .confirmation-modal { padding: 10px; align-items: end; }
    .confirmation-modal__dialog {
        width: 100%;
        max-height: min(805px, calc(100dvh - 20px));
        border-radius: 18px;
    }
    .confirmation-modal__header { padding: 21px 19px 16px; }
    .confirmation-modal__content { gap: 14px; padding: 16px 19px 20px; }
    .confirmation-modal > .confirmation-modal__summary { margin: 16px 19px 0; }
    .confirmation-modal > .confirmation-modal__form { padding: 14px 19px 20px; }
    .confirmation-modal__summary { padding: 12px; }
    .confirmation-modal__summary-grid { gap: 8px; }
    .confirmation-modal__summary-item { padding: 8px; }
    .confirmation-modal__actions { gap: 8px; }
    .confirmation-modal__actions .button { flex: 1 1 0; padding-inline: 10px; }
}

@media (max-width: 380px) {
    .confirmation-modal__header { gap: 10px; }
    .confirmation-modal__header p { font-size: 11px; }
    .confirmation-modal__summary { grid-template-columns: 1fr; }
    .confirmation-modal__summary-item--code { grid-column: auto; }
    .confirmation-modal__code-row { align-items: stretch; flex-direction: column; }
    .confirmation-modal__copy { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .confirmation-modal,
    .confirmation-modal__dialog,
    .confirmation-modal__close,
    .confirmation-modal__copy,
    .confirmation-modal-trigger,
    [data-confirmation-open],
    [data-confirmation-trigger] {
        animation: none;
        transition: none;
    }
}