@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/pasarguard/Vazirmatn-Arabic.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/pasarguard/Inter-Latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --customer-bg: #f5f7fa;
    --customer-surface: #ffffff;
    --customer-surface-muted: #f2f4f7;
    --customer-input: #ffffff;
    --customer-text: #172033;
    --customer-muted: #64748b;
    --customer-border: #d9dee7;
    --customer-border-strong: #c5ccd8;
    --customer-primary: #315f9f;
    --customer-primary-hover: #274f87;
    --customer-primary-soft: #eaf1fb;
    --customer-success: #07845d;
    --customer-success-soft: #e8f7f1;
    --customer-danger: #cf3038;
    --customer-danger-soft: #fcedee;
    --customer-warning: #a56409;
    --customer-warning-soft: #fff5df;
    --customer-shadow: 0 12px 34px rgba(29, 44, 74, .08);
}

:root[data-theme="dark"] {
    --customer-bg: #11161d;
    --customer-surface: #181f28;
    --customer-surface-muted: #202934;
    --customer-input: #151b23;
    --customer-text: #edf2f7;
    --customer-muted: #9aa8ba;
    --customer-border: #303b49;
    --customer-border-strong: #445164;
    --customer-primary: #77a7e5;
    --customer-primary-hover: #94baea;
    --customer-primary-soft: #21354d;
    --customer-success: #49caa0;
    --customer-success-soft: #173b32;
    --customer-danger: #ff7b80;
    --customer-danger-soft: #45282d;
    --customer-warning: #f2bc65;
    --customer-warning-soft: #47391e;
    --customer-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--customer-bg); color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body, button, input { font-family: "Vazirmatn", Tahoma, sans-serif; }
body { margin: 0; color: var(--customer-text); background: var(--customer-bg); font-size: 15px; }
button, input { font-size: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
bdi, [dir="ltr"], input[dir="ltr"] { font-family: "Inter", "Vazirmatn", sans-serif; }

.portal-icon-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface);
    color: var(--customer-muted);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.portal-icon-button:hover { border-color: var(--customer-border-strong); background: var(--customer-surface-muted); color: var(--customer-text); }
.portal-icon-button:focus-visible,
.portal-primary-button:focus-visible,
.portal-secondary-button:focus-visible,
.portal-segmented button:focus-visible,
input:focus-visible,
a:focus-visible { outline: 3px solid color-mix(in srgb, var(--customer-primary) 24%, transparent); outline-offset: 2px; }

.portal-alert {
    min-height: 42px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface);
    color: var(--customer-text);
    font-size: 12px;
    line-height: 1.75;
}
.portal-alert svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--customer-muted); }
.portal-alert-success { border-color: color-mix(in srgb, var(--customer-success) 30%, var(--customer-border)); background: var(--customer-success-soft); }
.portal-alert-success svg { color: var(--customer-success); }
.portal-alert-error { border-color: color-mix(in srgb, var(--customer-danger) 30%, var(--customer-border)); background: var(--customer-danger-soft); }
.portal-alert-error svg { color: var(--customer-danger); }
.portal-alert-warning { border-color: color-mix(in srgb, var(--customer-warning) 30%, var(--customer-border)); background: var(--customer-warning-soft); }
.portal-alert-warning svg { color: var(--customer-warning); }

/* Shared authentication */
.portal-auth-page {
    min-height: 100dvh;
    padding: 58px 18px 28px;
    display: grid;
    place-items: center;
    background: var(--customer-bg);
}
.portal-auth-theme { position: fixed; top: 18px; left: 18px; z-index: 5; }
.portal-auth-shell { width: min(500px, 100%); }
.portal-auth-messages { margin-bottom: 10px; display: grid; gap: 7px; }
.portal-auth-card {
    width: 100%;
    padding: 24px;
    border: 1px solid var(--customer-border);
    border-radius: 8px;
    background: var(--customer-surface);
    box-shadow: var(--customer-shadow);
}
.portal-auth-header { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.portal-brand-mark,
.customer-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--customer-border);
    border-radius: 8px;
    background: var(--customer-primary-soft);
    color: var(--customer-primary);
}
.portal-brand-mark svg { width: 22px; height: 22px; }
.portal-auth-header h1 { margin: 0; color: var(--customer-text); font-size: 20px; line-height: 1.4; }
.portal-auth-header p { margin: 4px 0 0; color: var(--customer-muted); font-size: 11px; line-height: 1.7; }
.portal-segmented {
    padding: 3px;
    display: grid;
    gap: 3px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface-muted);
}
.portal-role-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; }
.portal-method-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.portal-customer-method-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.portal-segmented button {
    min-width: 0;
    min-height: 38px;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--customer-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.portal-segmented button svg { width: 15px; height: 15px; }
.portal-segmented button.is-active { background: var(--customer-surface); color: var(--customer-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.portal-auth-panel { min-height: 252px; }
.portal-customer-login-panel { min-height: 300px; }
.portal-auth-copy { margin-bottom: 15px; }
.portal-auth-copy strong { display: block; color: var(--customer-text); font-size: 13px; }
.portal-auth-copy span { display: block; margin-top: 4px; color: var(--customer-muted); font-size: 10px; }
.portal-form { display: grid; gap: 9px; }
.portal-form label { color: var(--customer-text); font-size: 10px; font-weight: 600; }
.portal-form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.portal-form-columns > div { min-width: 0; display: grid; gap: 7px; }
.portal-form-note {
    min-height: 42px;
    padding: 9px 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface-muted);
    color: var(--customer-muted);
    font-size: 9px;
    line-height: 1.75;
}
.portal-form-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: var(--customer-primary); }
.portal-input-wrap { position: relative; }
.portal-input-wrap > svg { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--customer-muted); pointer-events: none; }
.portal-input-wrap input,
.portal-otp-input {
    width: 100%;
    height: 45px;
    padding: 9px 38px 9px 12px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-input);
    color: var(--customer-text);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.portal-input-wrap input::placeholder { color: color-mix(in srgb, var(--customer-muted) 72%, transparent); }
.portal-input-wrap input:focus,
.portal-otp-input:focus { border-color: var(--customer-primary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--customer-primary) 14%, transparent); }
.portal-primary-button,
.portal-secondary-button {
    min-height: 42px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.portal-primary-button { margin-top: 5px; border: 1px solid var(--customer-primary); background: var(--customer-primary); color: #fff; }
:root[data-theme="dark"] .portal-primary-button { color: #101923; }
.portal-primary-button:hover { border-color: var(--customer-primary-hover); background: var(--customer-primary-hover); }
.portal-primary-button svg,
.portal-secondary-button svg { width: 15px; height: 15px; }
.portal-secondary-button { border: 1px solid var(--customer-border); background: var(--customer-surface); color: var(--customer-text); }
.portal-secondary-button:hover { border-color: var(--customer-border-strong); background: var(--customer-surface-muted); }
.portal-text-link { justify-self: center; padding: 5px; color: var(--customer-primary); font-size: 10px; font-weight: 600; }
.portal-auth-footer { margin-top: 16px; padding-top: 13px; display: flex; align-items: flex-start; justify-content: center; gap: 6px; border-top: 1px solid var(--customer-border); color: var(--customer-muted); font-size: 9px; line-height: 1.7; text-align: center; }
.portal-auth-footer svg { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 1px; }
.portal-verify-card { max-width: 430px; margin-inline: auto; }
.portal-otp-input { height: 56px; padding: 8px 12px; direction: ltr; text-align: center; font-family: "Inter", sans-serif; font-size: 24px; font-weight: 650; letter-spacing: 8px; }
.portal-otp-actions { margin-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-otp-actions a,
.portal-otp-actions button { min-height: 34px; padding: 7px 8px; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--customer-primary); font-size: 10px; font-weight: 600; cursor: pointer; }
.portal-otp-actions button:disabled { color: var(--customer-muted); cursor: default; }
.portal-otp-actions svg { width: 13px; height: 13px; }
.portal-inline-status { min-height: 18px; margin: 5px 0 0; color: var(--customer-muted); font-size: 9px; text-align: center; }
.portal-password-card { max-width: 470px; margin-inline: auto; }
.portal-verified-identity {
    margin-bottom: 15px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--customer-success) 28%, var(--customer-border));
    border-radius: 7px;
    background: var(--customer-success-soft);
}
.portal-verified-identity > svg { width: 18px; height: 18px; color: var(--customer-success); }
.portal-verified-identity span,
.portal-verified-identity strong { display: block; }
.portal-verified-identity span { color: var(--customer-muted); font-size: 8px; }
.portal-verified-identity strong { margin-top: 3px; color: var(--customer-text); font-family: "Inter", sans-serif; font-size: 11px; }
.portal-password-rules { padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface-muted); }
.portal-password-rules span { min-width: 0; display: flex; align-items: center; gap: 4px; color: var(--customer-muted); font-size: 8px; line-height: 1.6; }
.portal-password-rules svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--customer-success); }

/* Customer application shell */
.customer-portal-page { min-height: 100dvh; }
.customer-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--customer-border); background: color-mix(in srgb, var(--customer-surface) 96%, transparent); backdrop-filter: blur(10px); }
.customer-header-inner { width: min(1180px, calc(100% - 32px)); min-height: 70px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.customer-brand { display: inline-flex; align-items: center; gap: 10px; }
.customer-brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
.customer-brand-mark svg { width: 18px; height: 18px; }
.customer-brand strong,
.customer-brand small { display: block; white-space: nowrap; }
.customer-brand strong { color: var(--customer-text); font-family: "Inter", sans-serif; font-size: 12px; }
.customer-brand small { margin-top: 2px; color: var(--customer-muted); font-size: 8px; }
.customer-nav { display: flex; align-items: center; justify-content: center; gap: 5px; }
.customer-nav a { min-height: 36px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; color: var(--customer-muted); font-size: 10px; font-weight: 600; }
.customer-nav a svg { width: 15px; height: 15px; }
.customer-nav a:hover { background: var(--customer-surface-muted); color: var(--customer-text); }
.customer-nav a.is-active { border-color: var(--customer-border); background: var(--customer-surface-muted); color: var(--customer-text); }
.customer-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.customer-header-actions form { display: flex; }
.customer-profile-chip { min-width: 170px; display: flex; align-items: center; gap: 8px; }
.customer-profile-chip > span { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--customer-primary-soft); color: var(--customer-primary); font-size: 10px; font-weight: 700; }
.customer-profile-chip strong,
.customer-profile-chip small { display: block; }
.customer-profile-chip strong { max-width: 125px; overflow: hidden; color: var(--customer-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-profile-chip small { margin-top: 2px; color: var(--customer-muted); font-family: "Inter", sans-serif; font-size: 8px; }
.portal-logout-button:hover { border-color: color-mix(in srgb, var(--customer-danger) 30%, var(--customer-border)); background: var(--customer-danger-soft); color: var(--customer-danger); }
.customer-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 50px; }
.customer-messages { margin-bottom: 12px; display: grid; gap: 7px; }
.customer-page-heading { min-height: 92px; margin-bottom: 14px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--customer-border); border-radius: 8px; background: var(--customer-surface); box-shadow: var(--customer-shadow); }
.customer-eyebrow { display: block; margin-bottom: 4px; color: var(--customer-primary); font-size: 9px; font-weight: 700; }
.customer-page-heading h1 { margin: 0; color: var(--customer-text); font-size: 20px; line-height: 1.5; }
.customer-page-heading p { margin: 4px 0 0; color: var(--customer-muted); font-size: 10px; line-height: 1.7; }
.customer-stat-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.customer-stat-card { min-width: 0; min-height: 104px; padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--customer-border); border-radius: 8px; background: var(--customer-surface); box-shadow: var(--customer-shadow); }
.customer-stat-icon { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface-muted); color: var(--customer-muted); }
.customer-stat-icon svg { width: 18px; height: 18px; }
.customer-stat-card div { min-width: 0; }
.customer-stat-card small { display: block; color: var(--customer-muted); font-size: 9px; }
.customer-stat-card strong { display: block; margin-top: 5px; overflow: hidden; color: var(--customer-text); font-family: "Inter", "Vazirmatn", sans-serif; font-size: 24px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.customer-stat-card .customer-stat-text { font-family: "Vazirmatn", sans-serif; font-size: 14px; }
.customer-dashboard-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; }
.customer-panel { min-width: 0; border: 1px solid var(--customer-border); border-radius: 8px; background: var(--customer-surface); box-shadow: var(--customer-shadow); }
.customer-panel-head { min-height: 66px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--customer-border); }
.customer-panel-head h2 { margin: 0; color: var(--customer-text); font-size: 13px; }
.customer-panel-head p { margin: 3px 0 0; color: var(--customer-muted); font-size: 9px; }
.customer-panel-head > svg { width: 17px; height: 17px; color: var(--customer-muted); }
.customer-service-row { margin: 12px; padding: 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-bg); }
.customer-service-row:hover { border-color: var(--customer-border-strong); }
.customer-service-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--customer-primary-soft); color: var(--customer-primary); }
.customer-service-icon svg { width: 17px; height: 17px; }
.customer-service-row strong,
.customer-service-row small { display: block; }
.customer-service-row strong { color: var(--customer-text); font-size: 11px; }
.customer-service-row small { margin-top: 3px; color: var(--customer-muted); font-size: 8px; }
.customer-service-row > svg { width: 14px; height: 14px; color: var(--customer-muted); }
.customer-live-badge { padding: 5px 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--customer-success) 25%, var(--customer-border)); border-radius: 999px; background: var(--customer-success-soft); color: var(--customer-success); font-size: 8px; font-weight: 700; white-space: nowrap; }
.customer-live-badge i,
.customer-live-state > i { width: 6px; height: 6px; border-radius: 50%; background: var(--customer-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--customer-success) 14%, transparent); }
.customer-account-meta { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.customer-account-meta > div { min-width: 0; padding: 9px; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface-muted); }
.customer-account-meta span,
.customer-account-meta strong { display: block; }
.customer-account-meta span { color: var(--customer-muted); font-size: 8px; }
.customer-account-meta strong { margin-top: 4px; overflow: hidden; color: var(--customer-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-compact-trades { padding: 5px 12px 12px; }
.customer-compact-trades > div { min-height: 48px; display: grid; grid-template-columns: 56px minmax(60px, 1fr) minmax(70px, .8fr) 76px; align-items: center; gap: 8px; border-bottom: 1px solid var(--customer-border); font-size: 9px; text-align: center; }
.customer-compact-trades > div:last-child { border-bottom: 0; }
.customer-compact-trades strong { color: var(--customer-text); font-family: "Inter", sans-serif; font-size: 10px; }
.customer-compact-trades small { color: var(--customer-muted); font-family: "Inter", sans-serif; font-size: 9px; }
.customer-trade-side,
.customer-status { min-width: 52px; padding: 4px 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--customer-border); border-radius: 999px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.customer-trade-side.is-buy { border-color: color-mix(in srgb, var(--customer-success) 25%, var(--customer-border)); background: var(--customer-success-soft); color: var(--customer-success); }
.customer-trade-side.is-sell { border-color: color-mix(in srgb, var(--customer-danger) 25%, var(--customer-border)); background: var(--customer-danger-soft); color: var(--customer-danger); }
.customer-status { background: var(--customer-surface-muted); color: var(--customer-muted); }
.customer-status.is-open { border-color: color-mix(in srgb, var(--customer-success) 25%, var(--customer-border)); color: var(--customer-success); }
.customer-status.is-pending { border-color: color-mix(in srgb, var(--customer-warning) 25%, var(--customer-border)); color: var(--customer-warning); }
.customer-status.is-cancelled { border-color: color-mix(in srgb, var(--customer-danger) 25%, var(--customer-border)); color: var(--customer-danger); }
.customer-empty-state { min-height: 180px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--customer-muted); text-align: center; }
.customer-empty-state svg { width: 26px; height: 26px; margin-bottom: 10px; }
.customer-empty-state strong { color: var(--customer-text); font-size: 11px; }
.customer-empty-state p { margin: 5px 0 0; font-size: 9px; line-height: 1.7; }
.customer-live-state { min-width: 190px; padding: 9px 11px; display: grid; grid-template-columns: 7px 1fr; align-items: center; gap: 3px 7px; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface-muted); }
.customer-live-state span { color: var(--customer-success); font-size: 9px; font-weight: 700; }
.customer-live-state small { grid-column: 1 / -1; color: var(--customer-muted); font-size: 8px; }
.customer-live-state b { color: var(--customer-text); font-family: "Inter", sans-serif; font-weight: 500; }
.customer-trades-panel { overflow: hidden; }
.customer-trades-panel .customer-panel-head .portal-icon-button.is-loading svg { animation: customer-spin .8s linear infinite; }
@keyframes customer-spin { to { transform: rotate(360deg); } }
.customer-table-wrap { overflow-x: auto; }
.customer-trades-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.customer-trades-table th,
.customer-trades-table td { height: 52px; padding: 9px 7px; border-bottom: 1px solid var(--customer-border); color: var(--customer-text); font-size: 9px; text-align: center; vertical-align: middle; }
.customer-trades-table th { height: 44px; background: var(--customer-surface-muted); color: var(--customer-muted); font-size: 8px; font-weight: 700; }
.customer-trades-table tbody tr:last-child td { border-bottom: 0; }
.customer-trades-table td strong { font-family: "Inter", sans-serif; font-size: 10px; }
.customer-pnl { color: var(--customer-muted); font-family: "Inter", sans-serif; font-weight: 650; }
.customer-pnl.is-positive { color: var(--customer-success); }
.customer-pnl.is-negative { color: var(--customer-danger); }
.customer-empty-row td { height: 210px; }
.customer-security-state { min-height: 36px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--customer-success) 28%, var(--customer-border)); border-radius: 7px; background: var(--customer-success-soft); color: var(--customer-success); font-size: 9px; font-weight: 700; }
.customer-security-state svg { width: 15px; height: 15px; }
.customer-security-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 10px; align-items: start; }
.customer-security-form { padding: 15px; display: grid; gap: 9px; }
.customer-security-form label { color: var(--customer-text); font-size: 10px; font-weight: 600; }
.customer-form-actions { padding-top: 13px; display: flex; justify-content: flex-end; border-top: 1px solid var(--customer-border); }
.customer-form-actions .portal-primary-button { min-width: 170px; }
.customer-security-summary dl { margin: 0; padding: 6px 15px 10px; }
.customer-security-summary dl > div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--customer-border); }
.customer-security-summary dl > div:last-child { border-bottom: 0; }
.customer-security-summary dt { color: var(--customer-muted); font-size: 9px; }
.customer-security-summary dd { margin: 0; color: var(--customer-text); font-family: "Inter", "Vazirmatn", sans-serif; font-size: 9px; font-weight: 600; text-align: left; }
.customer-security-summary > .portal-form-note { margin: 0 15px 15px; }

/* Live trade room */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.live-room-heading { min-height: 82px; }
.live-room-status { min-width: 210px; min-height: 46px; padding: 7px 8px 7px 11px; display: grid; grid-template-columns: 8px minmax(0, 1fr) 38px; align-items: center; gap: 8px; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface-muted); }
.live-room-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--customer-muted); }
.live-room-status.is-live .live-room-status-dot { background: var(--customer-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--customer-success) 15%, transparent); animation: live-dot 1.8s ease-in-out infinite; }
.live-room-status.is-scheduled .live-room-status-dot { background: var(--customer-warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--customer-warning) 14%, transparent); }
.live-room-status.is-reconnecting .live-room-status-dot { background: var(--customer-warning); }
.live-room-status strong, .live-room-status small { display: block; }
.live-room-status strong { color: var(--customer-text); font-size: 11px; }
.live-room-status small { margin-top: 2px; color: var(--customer-muted); font-size: 10px; }
.live-room-status .portal-icon-button { width: 34px; height: 34px; flex-basis: 34px; }
.live-room-status .portal-icon-button.is-muted { color: var(--customer-danger); }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.live-trade-room { margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); gap: 10px; align-items: start; direction: ltr; }
.live-trade-room > *, .live-trade-main-column > * { direction: rtl; }
.live-trade-main-column { min-width: 0; display: grid; gap: 10px; }
.live-stage-panel, .live-signal-panel, .live-chat-panel, .live-online-users-panel { overflow: hidden; }
.live-stage-badge { min-height: 30px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--customer-border); border-radius: 999px; background: var(--customer-surface-muted); color: var(--customer-muted); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; }
.live-stage-badge svg { width: 13px; height: 13px; }
.live-stage-badge.is-live { border-color: color-mix(in srgb, var(--customer-danger) 28%, var(--customer-border)); background: var(--customer-danger-soft); color: var(--customer-danger); }
.live-stage-badge.is-scheduled { border-color: color-mix(in srgb, var(--customer-warning) 30%, var(--customer-border)); color: var(--customer-warning); }
.customer-panel-tools { display: flex; align-items: center; gap: 7px; }
.customer-panel-tools > svg { width: 17px; height: 17px; color: var(--customer-muted); }
.panel-collapse-button { width: 30px; height: 30px; padding: 0; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--customer-border); border-radius: 6px; background: var(--customer-surface); color: var(--customer-muted); cursor: pointer; }
.panel-collapse-button:hover { background: var(--customer-surface-muted); color: var(--customer-text); }
.panel-collapse-button svg { width: 15px; height: 15px; }
.collapsible-panel.is-collapsed { min-height: 0 !important; height: auto !important; }
.collapsible-panel.is-collapsed > :not(header) { display: none !important; }
.collapsible-panel.is-collapsed > header { border-bottom: 0; }
.live-media-toolbar { min-height: 58px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--customer-border); background: var(--customer-surface); }
.live-media-quality { min-width: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 9px; }
.live-media-quality-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--customer-muted); }
.live-media-quality strong, .live-media-quality small { display: block; }
.live-media-quality strong { color: var(--customer-text); font-size: 11px; }
.live-media-quality small { margin-top: 2px; color: var(--customer-muted); font-size: 10px; }
.live-media-quality.is-excellent .live-media-quality-dot { background: var(--customer-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--customer-success) 14%, transparent); }
.live-media-quality.is-good .live-media-quality-dot { background: var(--customer-primary); }
.live-media-quality.is-average .live-media-quality-dot { background: var(--customer-warning); }
.live-media-quality.is-weak .live-media-quality-dot { background: var(--customer-danger); }
.live-media-quality.is-paused .live-media-quality-dot, .live-media-quality.is-waiting .live-media-quality-dot { background: var(--customer-muted); }
.live-media-quality.is-excellent strong { color: var(--customer-success); }
.live-media-quality.is-average strong { color: var(--customer-warning); }
.live-media-quality.is-weak strong { color: var(--customer-danger); }
.live-media-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; direction: rtl; }
.live-media-controls .portal-icon-button { width: 36px; height: 36px; flex-basis: 36px; }
.live-media-controls .portal-icon-button.is-muted { color: var(--customer-danger); }
.live-media-controls .portal-icon-button:disabled { opacity: .45; cursor: not-allowed; }
.live-stage { width: 100%; aspect-ratio: 16 / 9; min-height: 300px; display: grid; place-items: center; overflow: hidden; background: #080b10; }
.live-stage iframe, .live-stage video { width: 100%; height: 100%; display: block; border: 0; object-fit: contain; background: #080b10; }
.live-stage:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; aspect-ratio: auto; }
.live-stage-empty { min-height: 240px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aeb8c7; text-align: center; }
.live-stage-empty svg { width: 34px; height: 34px; margin-bottom: 12px; stroke-width: 1.4; }
.live-stage-empty strong { color: #edf2f7; font-size: 14px; }
.live-stage-empty span { margin-top: 5px; font-size: 11px; }
.live-countdown { min-height: 240px; padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aeb8c7; text-align: center; }
.live-countdown > svg { width: 30px; height: 30px; margin-bottom: 10px; stroke-width: 1.5; }
.live-countdown > span { font-size: 11px; }
.live-countdown > strong { margin: 10px 0 5px; color: #f8fafc; font: 700 clamp(28px, 6vw, 48px)/1 "Inter", sans-serif; letter-spacing: 0; }
.live-countdown > small { color: #8f9bac; font: 10px "Inter", "Vazirmatn", sans-serif; }

.live-signal-count { min-width: 74px; padding: 6px 8px; border: 1px solid var(--customer-border); border-radius: 999px; background: var(--customer-surface-muted); color: var(--customer-muted); font-size: 10px; text-align: center; }
.live-signal-count strong { color: var(--customer-text); font-family: "Inter", sans-serif; }
.live-signal-feed { max-height: 470px; padding: 10px; display: grid; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.live-signal-card { padding: 11px; border: 1px solid var(--customer-border); border-right: 3px solid var(--customer-muted); border-radius: 7px; background: var(--customer-bg); animation: live-card-in .22s ease-out; }
.live-signal-card.is-buy { border-right-color: var(--customer-success); }
.live-signal-card.is-sell { border-right-color: var(--customer-danger); }
.live-signal-card header, .live-signal-card header > div, .live-signal-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-signal-card header strong { color: var(--customer-text); font-family: "Inter", sans-serif; font-size: 13px; }
.live-signal-card time { color: var(--customer-muted); font-family: "Inter", sans-serif; font-size: 10px; }
.live-signal-side, .live-signal-status { min-width: 50px; padding: 4px 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--customer-border); border-radius: 999px; background: var(--customer-surface); color: var(--customer-muted); font-size: 10px; font-weight: 700; }
.live-signal-card.is-buy .live-signal-side { border-color: color-mix(in srgb, var(--customer-success) 30%, var(--customer-border)); background: var(--customer-success-soft); color: var(--customer-success); }
.live-signal-card.is-sell .live-signal-side { border-color: color-mix(in srgb, var(--customer-danger) 30%, var(--customer-border)); background: var(--customer-danger-soft); color: var(--customer-danger); }
.live-signal-values { margin-top: 9px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.live-signal-values > div { min-width: 0; padding: 7px; border: 1px solid var(--customer-border); border-radius: 6px; background: var(--customer-surface); }
.live-signal-values span, .live-signal-values bdi { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-signal-values span { color: var(--customer-muted); font-size: 9px; }
.live-signal-values bdi { margin-top: 3px; color: var(--customer-text); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 650; }
.live-signal-card > p { margin: 8px 0 0; color: var(--customer-muted); font-size: 10px; line-height: 1.8; }
.live-signal-card footer { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--customer-border); color: var(--customer-muted); font-size: 10px; }
.live-signal-status.is-active, .live-signal-status.is-updated { color: var(--customer-success); }
.live-signal-status.is-closed { color: var(--customer-primary); }
.live-signal-status.is-cancelled { color: var(--customer-danger); }
.live-feed-empty { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--customer-muted); font-size: 11px; }
.live-feed-empty svg { width: 24px; height: 24px; }
@keyframes live-card-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.live-room-side-column { min-width: 0; display: grid; gap: 10px; position: sticky; top: 82px; direction: rtl; }
.live-online-users { max-height: 178px; padding: 8px; display: grid; gap: 6px; overflow-y: auto; background: var(--customer-bg); }
.live-online-user { min-height: 42px; padding: 6px 8px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface); }
.live-online-user > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--customer-primary-soft); color: var(--customer-primary); font-style: normal; font-size: 10px; font-weight: 800; }
.live-online-user b { overflow: hidden; color: var(--customer-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.live-online-user small { display: inline-flex; align-items: center; gap: 4px; color: var(--customer-success); font-size: 9px; }
.live-online-user small::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; }
.live-online-empty { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--customer-muted); font-size: 10px; }
.live-online-empty svg { width: 20px; height: 20px; }
.live-chat-panel { height: min(570px, calc(100dvh - 350px)); min-height: 410px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.live-chat-head > svg { color: var(--customer-muted); }
.live-chat-head p { display: flex; align-items: center; gap: 5px; }
.live-chat-head p strong { color: var(--customer-text); font-family: "Inter", sans-serif; }
.live-online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--customer-success); }
.live-chat-messages { min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; overscroll-behavior: contain; background: var(--customer-bg); }
.live-chat-message { max-width: 88%; padding: 8px 9px; align-self: flex-start; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-surface); }
.live-chat-message.is-admin { align-self: flex-end; border-color: color-mix(in srgb, var(--customer-primary) 28%, var(--customer-border)); background: var(--customer-primary-soft); }
.live-chat-message.is-system { max-width: 100%; align-self: stretch; background: var(--customer-surface-muted); text-align: center; }
.live-chat-message header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.live-chat-message header strong { color: var(--customer-text); font-size: 10px; }
.live-chat-message header time { color: var(--customer-muted); font-family: "Inter", sans-serif; font-size: 9px; }
.live-chat-message p { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--customer-text); font-size: 11px; line-height: 1.8; white-space: pre-wrap; }
.live-chat-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--customer-muted); font-size: 11px; }
.live-chat-empty svg { width: 24px; height: 24px; }
.live-chat-composer { padding: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; border-top: 1px solid var(--customer-border); background: var(--customer-surface); }
.live-chat-composer textarea { width: 100%; height: 56px; min-height: 56px; max-height: 110px; padding: 8px 10px; resize: vertical; border: 1px solid var(--customer-border); border-radius: 7px; outline: 0; background: var(--customer-input); color: var(--customer-text); font: 11px/1.8 "Vazirmatn", sans-serif; }
.live-chat-composer textarea:focus { border-color: var(--customer-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--customer-primary) 13%, transparent); }
.live-chat-composer .portal-primary-button { width: 72px; margin: 0; }
.live-chat-composer :disabled { opacity: .65; cursor: not-allowed; }
.live-chat-closed { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid var(--customer-border); background: var(--customer-surface-muted); color: var(--customer-muted); font-size: 10px; }
.live-chat-closed svg { width: 14px; height: 14px; }
.customer-personal-trades { margin-top: 14px; }

.live-signal-alert { width: min(390px, calc(100% - 24px)); min-height: 64px; padding: 10px 11px; position: fixed; left: 18px; bottom: 18px; z-index: 60; display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--customer-primary) 35%, var(--customer-border)); border-radius: 8px; background: var(--customer-surface); box-shadow: var(--customer-shadow); color: var(--customer-text); transform: translateY(18px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.live-signal-alert.is-visible { transform: none; opacity: 1; }
.live-signal-alert > svg { width: 20px; height: 20px; color: var(--customer-primary); }
.live-signal-alert strong, .live-signal-alert span { display: block; }
.live-signal-alert strong { font-size: 12px; }
.live-signal-alert span { margin-top: 3px; color: var(--customer-muted); font-family: "Inter", "Vazirmatn", sans-serif; font-size: 10px; }
.live-signal-alert button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: var(--customer-surface-muted); color: var(--customer-muted); cursor: pointer; }
.live-signal-alert button svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
    .customer-header-inner { grid-template-columns: auto 1fr; gap: 12px; padding: 9px 0; }
    .customer-header-actions { justify-self: end; }
    .customer-nav { grid-column: 1 / -1; grid-row: 2; justify-content: stretch; }
    .customer-nav a { flex: 1; justify-content: center; }
    .customer-profile-chip { min-width: 0; }
    .customer-profile-chip div { display: none; }
    .customer-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-dashboard-grid { grid-template-columns: 1fr; }
    .customer-security-grid { grid-template-columns: 1fr; }
    .live-trade-room { grid-template-columns: 1fr; }
    .live-room-side-column { position: static; }
    .live-chat-panel { height: 520px; min-height: 0; position: static; }
}

@media (max-width: 620px) {
    .portal-auth-page { padding: 54px 10px 18px; align-items: start; }
    .portal-auth-theme { top: 10px; left: 10px; }
    .portal-auth-card { padding: 17px; }
    .portal-auth-header h1 { font-size: 17px; }
    .portal-auth-panel { min-height: 240px; }
    .portal-customer-login-panel { min-height: 300px; }
    .portal-customer-method-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-form-columns { grid-template-columns: 1fr; }
    .portal-password-rules { grid-template-columns: 1fr; }
    .customer-header-inner,
    .customer-main { width: min(100% - 20px, 1180px); }
    .customer-brand small { display: none; }
    .customer-header-actions { gap: 5px; }
    .customer-profile-chip { display: none; }
    .customer-main { padding-top: 10px; }
    .customer-page-heading { min-height: 0; padding: 14px; align-items: flex-start; flex-direction: column; }
    .customer-page-heading h1 { font-size: 17px; }
    .customer-page-heading .portal-secondary-button,
    .customer-live-state,
    .customer-security-state { width: 100%; }
    .customer-stat-grid { gap: 7px; }
    .customer-stat-card { min-height: 88px; padding: 11px; gap: 9px; }
    .customer-stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .customer-stat-card strong { font-size: 19px; }
    .customer-stat-card .customer-stat-text { font-size: 11px; }
    .customer-service-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .customer-service-row > svg { display: none; }
    .customer-account-meta { grid-template-columns: 1fr; }
    .customer-compact-trades > div { grid-template-columns: 48px minmax(54px, 1fr) 70px 66px; gap: 4px; }
    .customer-table-wrap { overflow: visible; }
    .customer-trades-table,
    .customer-trades-table tbody { display: block; }
    .customer-trades-table thead { display: none; }
    .customer-trades-table tr { margin: 10px; padding: 6px 11px; display: grid; border: 1px solid var(--customer-border); border-radius: 7px; background: var(--customer-bg); }
    .customer-trades-table td { height: auto; min-height: 38px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--customer-border); text-align: left; }
    .customer-trades-table td::before { content: attr(data-label); color: var(--customer-muted); font-family: "Vazirmatn", sans-serif; font-size: 8px; }
    .customer-trades-table td:last-child { border-bottom: 0; }
    .customer-trades-table .customer-empty-row { padding: 0; }
    .customer-trades-table .customer-empty-row td { height: auto; display: block; border: 0; }
    .customer-trades-table .customer-empty-row td::before { display: none; }
    .customer-form-actions .portal-primary-button { width: 100%; }
    .live-room-status { width: 100%; }
    .live-media-toolbar { align-items: stretch; flex-direction: column; }
    .live-media-controls { width: 100%; justify-content: flex-end; }
    .live-stage { min-height: 190px; }
    .live-countdown { min-height: 190px; padding: 18px 10px; }
    .live-countdown > strong { font-size: 28px; }
    .live-signal-feed { max-height: 520px; }
    .live-signal-values { grid-template-columns: 1fr; }
    .live-chat-panel { height: 480px; }
    .live-chat-composer { grid-template-columns: minmax(0, 1fr) 48px; }
    .live-chat-composer .portal-primary-button { width: 48px; padding-inline: 0; }
    .live-chat-composer .portal-primary-button span { display: none; }
    .live-signal-alert { left: 10px; bottom: 10px; }
}

@media (max-width: 380px) {
    .portal-role-switch button { padding-inline: 5px; }
    .portal-auth-header { align-items: flex-start; }
    .portal-brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .customer-brand strong { font-size: 10px; }
    .customer-compact-trades > div { grid-template-columns: 44px 1fr 60px; }
    .customer-compact-trades .customer-status { display: none; }
}

/* Live room collaboration */
.live-pin-label { min-height: 22px; padding: 3px 6px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--customer-border); border-radius: 999px; background: var(--customer-surface-muted); color: var(--customer-muted); font-size: 9px; font-weight: 650; }
.live-pin-label svg { width: 11px; height: 11px; }
.live-signal-card.is-pinned, .live-chat-message.is-pinned { box-shadow: inset -3px 0 #64748b; }
.live-pinned-messages { max-height: 92px; padding: 7px; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--customer-border); background: var(--customer-surface-muted); }
.live-pinned-messages:empty { display: none; }
.live-pinned-messages button { min-width: min(240px, 88%); padding: 6px 8px; display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid var(--customer-border); border-radius: var(--customer-radius); background: var(--customer-surface); color: var(--customer-muted); text-align: right; cursor: pointer; }
.live-pinned-messages button svg { width: 14px; height: 14px; }
.live-pinned-messages button span { min-width: 0; display: grid; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-pinned-messages button b { color: var(--customer-text); font-size: 10px; }
.live-chat-message blockquote { margin: 6px 0 0; padding: 6px 8px; display: grid; gap: 1px; border-right: 2px solid var(--customer-muted); background: var(--customer-surface-muted); color: var(--customer-muted); font-size: 9px; cursor: pointer; }
.live-chat-message blockquote b { color: var(--customer-text); }
.live-chat-message footer { min-height: 22px; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--customer-muted); font-size: 8px; }
.live-chat-message footer span { margin-right: auto; display: flex; gap: 4px; }
.live-chat-message footer button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--customer-border); border-radius: 6px; background: var(--customer-surface); color: var(--customer-muted); cursor: pointer; }
.live-chat-message footer button:hover { color: var(--customer-text); background: var(--customer-surface-muted); }
.live-chat-message footer svg { width: 12px; height: 12px; }
.live-chat-message.is-highlighted { outline: 2px solid color-mix(in srgb, var(--customer-primary) 45%, transparent); outline-offset: 2px; }
.live-chat-context { grid-column: 1 / -1; min-width: 0; padding: 6px 8px; display: grid; grid-template-columns: 15px minmax(0, 1fr) 27px; align-items: center; gap: 7px; border: 1px solid var(--customer-border); border-radius: var(--customer-radius); background: var(--customer-surface-muted); }
.live-chat-context[hidden] { display: none; }
.live-chat-context > svg { width: 14px; height: 14px; color: var(--customer-muted); }
.live-chat-context span { min-width: 0; display: grid; }
.live-chat-context b { color: var(--customer-text); font-size: 10px; }
.live-chat-context small { overflow: hidden; color: var(--customer-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-chat-context button { width: 27px; height: 27px; display: grid; place-items: center; border: 0; background: transparent; color: var(--customer-muted); cursor: pointer; }
.live-chat-context button svg { width: 13px; height: 13px; }
.live-invite-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.live-invite-meta > span { min-height: 52px; padding: 8px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 2px 7px; border: 1px solid var(--customer-border); border-radius: var(--customer-radius); background: var(--customer-surface-muted); }
.live-invite-meta svg { width: 16px; height: 16px; grid-row: 1 / 3; color: var(--customer-muted); }
.live-invite-meta b { color: var(--customer-muted); font-size: 9px; }
.live-invite-meta time, .live-invite-meta strong { color: var(--customer-text); font-size: 11px; }
.live-invite-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.live-invite-choice a, .live-invite-choice button { width: 100%; }
.live-invite-browser-form[hidden] { display: none; }
@media (max-width: 560px) {
    .live-invite-meta, .live-invite-choice { grid-template-columns: 1fr; }
    .portal-customer-method-switch button { padding-inline: 5px; font-size: 10px; }
}

/* Full-width customer shell, readable typography, and interaction feedback */
.customer-portal-page { min-height: 100dvh; display: flex; flex-direction: column; font-size: 16px; }
.customer-header { flex: 0 0 auto; }
.customer-header-inner { width: 100%; max-width: none; padding-inline: clamp(16px, 2vw, 30px); }
.customer-main { width: 100%; max-width: none; min-width: 0; flex: 1 0 auto; margin: 0; padding: clamp(18px, 2vw, 30px); }
.customer-page-heading h1 { font-size: 23px; }
.customer-page-heading p { font-size: 12px; }
.customer-eyebrow { font-size: 11px; }
.customer-nav a { min-height: 40px; padding-inline: 13px; font-size: 12px; }
.customer-brand strong { font-size: 13px; }
.customer-brand small,
.customer-profile-chip small { font-size: 10px; }
.customer-profile-chip strong { font-size: 12px; }
.customer-panel-head h2 { font-size: 15px; }
.customer-panel-head p,
.customer-stat-card small,
.customer-service-row small,
.customer-account-meta span,
.customer-empty-state p,
.customer-live-state small,
.customer-security-summary dt,
.live-room-panel p,
.live-room-panel small { font-size: 11px; line-height: 1.75; }
.customer-service-row strong,
.customer-account-meta strong,
.customer-empty-state strong,
.customer-security-summary dd { font-size: 12px; }
.customer-trades-table th { font-size: 10px; }
.customer-trades-table td,
.customer-compact-trades > div { font-size: 11px; }
.customer-trades-table td strong,
.customer-compact-trades strong { font-size: 12px; }
.customer-panel button,
.customer-panel input,
.customer-panel select,
.customer-panel textarea,
.customer-main .portal-primary-button,
.customer-main .portal-secondary-button { font-size: 13px; }
.portal-alert { font-size: 13px; }
.live-room-status strong,
.live-media-quality strong,
.live-online-user b,
.live-chat-message header strong,
.live-chat-context b,
.live-pinned-messages button b { font-size: 12px; }
.live-room-status small,
.live-media-quality small,
.live-online-user small,
.live-chat-message header time,
.live-chat-message footer,
.live-chat-context small,
.live-pinned-messages button span { font-size: 10px; }
.live-chat-message p,
.live-signal-card > p,
.live-signal-values span,
.live-signal-values bdi { font-size: 12px; }
.live-signal-card header strong { font-size: 14px; }

.customer-app-footer {
    min-height: 58px;
    padding: 12px clamp(16px, 2vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    border-top: 1px solid var(--customer-border);
    background: var(--customer-bg);
    color: var(--customer-muted);
    font-size: 12px;
}
.customer-app-footer span { display: inline-flex; align-items: center; gap: 6px; }
.customer-app-footer svg { width: 14px; height: 14px; }
.customer-app-footer b { color: var(--customer-text); font-family: "Inter", sans-serif; font-weight: 650; }
.customer-footer-status { width: 7px; height: 7px; border-radius: 50%; background: var(--customer-success); }

.customer-main > * { animation: customer-page-enter .36s cubic-bezier(.2, .75, .25, 1) both; }
.customer-main > *:nth-child(2) { animation-delay: 45ms; }
.customer-main > *:nth-child(3) { animation-delay: 80ms; }
.customer-page-heading,
.customer-panel,
.customer-stat-card,
.customer-service-row,
.live-room-panel,
.portal-auth-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
    .customer-panel:hover,
    .customer-stat-card:hover,
    .live-room-panel:hover { transform: translateY(-2px); border-color: var(--customer-border-strong); box-shadow: 0 10px 26px rgba(29, 44, 74, .1); }
}
button,
.portal-primary-button,
.portal-secondary-button,
.customer-nav a,
.customer-service-row { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
button:active:not(:disabled),
.portal-primary-button:active,
.portal-secondary-button:active,
.customer-nav a:active,
.customer-service-row:active { transform: scale(.975); }

.crm-is-loading { --crm-loader-color: var(--customer-text); position: relative !important; pointer-events: none !important; color: transparent !important; text-shadow: none !important; }
.crm-is-loading > * { opacity: 0 !important; }
.portal-primary-button.crm-is-loading { --crm-loader-color: #fff; }
:root[data-theme="dark"] .portal-primary-button.crm-is-loading { --crm-loader-color: #101923; }
button.crm-is-loading::after,
a.crm-is-loading::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    inset: 50% auto auto 50%;
    margin: -8.5px 0 0 -8.5px;
    border: 2px solid color-mix(in srgb, var(--crm-loader-color) 28%, transparent);
    border-top-color: var(--crm-loader-color);
    border-radius: 50%;
    animation: customer-loader-spin .72s linear infinite;
}
#crmRequestProgress { height: 3px; position: fixed; inset: 0 0 auto; z-index: 5000; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
#crmRequestProgress span { width: 100%; height: 100%; display: block; background: var(--customer-primary); box-shadow: 0 0 9px color-mix(in srgb, var(--customer-primary) 65%, transparent); transform: scaleX(.06); transform-origin: right; transition: transform 8s cubic-bezier(.1, .7, .2, 1); }
#crmRequestProgress.is-active { opacity: 1; }
#crmRequestProgress.is-running span { transform: scaleX(.82); }
#crmRequestProgress.is-complete span { transform: scaleX(1); transition-duration: .2s; }
.crm-dynamic-enter { animation: customer-dynamic-enter .32s cubic-bezier(.2, .75, .25, 1) both; }

@keyframes customer-page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes customer-dynamic-enter { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes customer-loader-spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
    .customer-header-inner { padding-inline: 10px; }
    .customer-main { width: 100%; padding: 12px 10px 20px; }
    .customer-page-heading h1 { font-size: 20px; }
    .customer-app-footer { min-height: 52px; padding: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .customer-main > *, .crm-dynamic-enter, button.crm-is-loading::after, a.crm-is-loading::after { animation: none !important; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Customer email verification */
.customer-email-heading .customer-security-state:not(.is-verified) {
    border-color: color-mix(in srgb, #b7791f 30%, var(--customer-border));
    background: color-mix(in srgb, #b7791f 9%, var(--customer-surface));
    color: color-mix(in srgb, #8a5a14 82%, var(--customer-text));
}
.customer-email-verification-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 12px;
    align-items: start;
}
.customer-email-verification-panel { min-width: 0; }
.customer-email-steps {
    margin: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    border-bottom: 1px solid var(--customer-border);
    background: var(--customer-surface-muted);
}
.customer-email-steps li {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: var(--customer-muted);
}
.customer-email-steps li > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--customer-border);
    border-radius: 50%;
    background: var(--customer-surface);
    color: var(--customer-muted);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
}
.customer-email-steps li > span svg { width: 15px; height: 15px; }
.customer-email-steps li div { min-width: 0; display: grid; gap: 2px; }
.customer-email-steps strong { color: var(--customer-text); font-size: 12px; }
.customer-email-steps small { color: var(--customer-muted); font-size: 10px; }
.customer-email-steps .is-complete > span,
.customer-email-steps .is-active > span {
    border-color: color-mix(in srgb, var(--customer-primary) 38%, var(--customer-border));
    background: var(--customer-primary-soft);
    color: var(--customer-primary);
}
.customer-email-destination,
.customer-current-email {
    margin: 16px 16px 0;
    padding: 12px 14px;
    display: grid;
    gap: 5px;
    border: 1px solid var(--customer-border);
    border-radius: var(--customer-radius);
    background: var(--customer-surface-muted);
}
.customer-email-destination span,
.customer-current-email span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--customer-muted);
    font-size: 10px;
}
.customer-email-destination svg,
.customer-current-email svg { width: 15px; height: 15px; color: var(--customer-primary); }
.customer-email-destination strong,
.customer-current-email strong { color: var(--customer-text); font-family: "Inter", sans-serif; font-size: 14px; overflow-wrap: anywhere; }
.customer-current-email small { color: var(--customer-muted); font-size: 10px; line-height: 1.8; }
.customer-email-code-form,
.customer-email-address-form { padding: 16px; display: grid; gap: 10px; }
.customer-email-code-form > label,
.customer-email-address-form > label { color: var(--customer-text); font-size: 11px; font-weight: 650; }
.customer-email-code-input { position: relative; }
.customer-email-code-input > svg {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--customer-muted);
    pointer-events: none;
}
.customer-email-code-input input {
    width: 100%;
    height: 58px;
    padding: 0 44px 0 16px;
    border: 1px solid var(--customer-border);
    border-radius: var(--customer-radius);
    outline: 0;
    background: var(--customer-input);
    color: var(--customer-text);
    font: 700 23px/1 "Inter", sans-serif;
    letter-spacing: 0;
    text-align: center;
}
.customer-email-code-input input:focus {
    border-color: var(--customer-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--customer-primary) 13%, transparent);
}
.customer-email-attempts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--customer-muted);
    font-size: 10px;
}
.customer-email-attempts span { display: inline-flex; align-items: center; gap: 5px; }
.customer-email-attempts svg { width: 13px; height: 13px; }
.customer-email-secondary-actions {
    padding: 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.customer-email-secondary-actions form { margin: 0; }
.customer-email-secondary-actions .portal-secondary-button { margin: 0; }
.portal-text-button {
    min-height: 38px;
    padding: 7px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: var(--customer-muted);
    font: 600 11px/1.5 "Vazirmatn", sans-serif;
    cursor: pointer;
}
.portal-text-button:hover { color: var(--customer-text); }
.portal-text-button svg { width: 15px; height: 15px; }
.customer-email-security-note ul { margin: 0; padding: 8px 14px; display: grid; list-style: none; }
.customer-email-security-note li {
    min-height: 62px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--customer-border);
}
.customer-email-security-note li:last-child { border-bottom: 0; }
.customer-email-security-note li > svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border: 1px solid var(--customer-border);
    border-radius: var(--customer-radius);
    background: var(--customer-surface-muted);
    color: var(--customer-muted);
}
.customer-email-security-note li div { display: grid; gap: 3px; }
.customer-email-security-note li strong { color: var(--customer-text); font-size: 12px; }
.customer-email-security-note li small { color: var(--customer-muted); font-size: 10px; line-height: 1.75; }
.customer-email-security-note > .portal-form-note { margin: 0 14px 14px; }
.customer-security-email { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; overflow-wrap: anywhere; }
.customer-security-email svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--customer-success); }
.customer-email-change-link { width: calc(100% - 28px); margin: 2px 14px 14px; }

@media (max-width: 900px) {
    .customer-email-verification-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .customer-email-steps { padding: 11px; gap: 6px; }
    .customer-email-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; }
    .customer-email-steps li > span { width: 30px; height: 30px; }
    .customer-email-steps small { display: none; }
    .customer-email-destination,
    .customer-current-email { margin: 12px 12px 0; }
    .customer-email-code-form,
    .customer-email-address-form { padding: 12px; }
    .customer-email-secondary-actions { padding: 0 12px 12px; align-items: stretch; flex-direction: column; }
    .customer-email-secondary-actions form,
    .customer-email-secondary-actions button { width: 100%; }
}

/* Customer app shell aligned with the administrative workspace */
.customer-portal-page {
    min-height: 100dvh;
    display: block;
    overflow-x: hidden;
    background: var(--customer-bg);
}
.customer-sidebar {
    width: 255px;
    height: 100dvh;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 80;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--customer-border);
    background: var(--customer-surface);
    box-shadow: -5px 0 24px rgba(29, 44, 74, .04);
}
.customer-sidebar-brand {
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--customer-border);
}
.customer-sidebar-brand .customer-brand { min-width: 0; }
.customer-sidebar-brand .customer-brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.customer-sidebar-brand .customer-brand strong { font-size: 14px; }
.customer-sidebar-brand .customer-brand small { font-size: 10px; }
.customer-sidebar-close { display: none; }
.customer-sidebar-nav {
    min-height: 0;
    padding: 17px 10px;
    display: grid;
    align-content: start;
    gap: 4px;
    overflow-y: auto;
}
.customer-nav-label {
    padding: 0 11px 7px;
    color: var(--customer-muted);
    font-size: 10px;
    font-weight: 600;
}
.customer-sidebar-nav a {
    min-height: 44px;
    padding: 9px 11px;
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--customer-muted);
    font-size: 13px;
    font-weight: 600;
}
.customer-sidebar-nav a > svg { width: 18px; height: 18px; stroke-width: 1.75; }
.customer-sidebar-nav a:hover { background: var(--customer-surface-muted); color: var(--customer-text); }
.customer-sidebar-nav a.is-active {
    border-color: var(--customer-border);
    background: var(--customer-surface-muted);
    color: var(--customer-text);
    box-shadow: inset -3px 0 var(--customer-primary);
}
.customer-sidebar-nav a small {
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--customer-warning) 30%, var(--customer-border));
    border-radius: 999px;
    background: var(--customer-warning-soft);
    color: var(--customer-warning);
    font-size: 8px;
}
.customer-nav-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--customer-success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--customer-success) 12%, transparent);
}
.customer-sidebar-bottom {
    margin-top: auto;
    padding: 10px;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--customer-border);
}
.customer-theme-switch {
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface-muted);
}
.customer-theme-switch button {
    min-height: 34px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--customer-muted);
    font-size: 10px;
    cursor: pointer;
}
.customer-theme-switch button svg { width: 14px; height: 14px; }
.customer-theme-switch button.is-active { background: var(--customer-surface); color: var(--customer-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .09); }
.customer-account-menu { position: relative; }
.customer-account-trigger {
    width: 100%;
    min-height: 56px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface-muted);
    color: var(--customer-text);
    text-align: right;
    cursor: pointer;
}
.customer-account-trigger > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.customer-account-trigger strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.customer-account-trigger small { color: var(--customer-muted); font-size: 9px; }
.customer-account-trigger > svg { width: 15px; height: 15px; color: var(--customer-muted); }
.customer-account-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--customer-primary) 24%, var(--customer-border));
    border-radius: 7px;
    background: var(--customer-primary-soft);
    color: var(--customer-primary);
    font-size: 11px;
    font-weight: 800;
}
.customer-account-popover {
    width: 100%;
    padding: 9px;
    position: absolute;
    inset: auto 0 calc(100% + 8px);
    z-index: 4;
    border: 1px solid var(--customer-border);
    border-radius: 8px;
    background: var(--customer-surface);
    box-shadow: var(--customer-shadow);
    animation: customer-popover-in .18s ease-out;
}
.customer-account-popover-head { padding: 4px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; }
.customer-account-popover-head div { min-width: 0; display: grid; gap: 2px; }
.customer-account-popover-head strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.customer-account-popover-head small { color: var(--customer-muted); font-size: 9px; }
.customer-account-popover dl { margin: 8px 0; padding: 5px 0; border-block: 1px solid var(--customer-border); }
.customer-account-popover dl div { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.customer-account-popover dt { color: var(--customer-muted); font-size: 9px; }
.customer-account-popover dd { margin: 0; overflow: hidden; color: var(--customer-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-account-popover form button {
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--customer-danger);
    font-size: 10px;
    cursor: pointer;
}
.customer-account-popover form button:hover { background: var(--customer-danger-soft); }
.customer-account-popover form button svg { width: 15px; height: 15px; }
.customer-app-shell {
    min-width: 0;
    min-height: 100dvh;
    margin-right: 255px;
    display: flex;
    flex-direction: column;
}
.customer-topbar {
    min-height: 64px;
    padding: 9px clamp(16px, 2vw, 28px);
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--customer-border);
    background: color-mix(in srgb, var(--customer-surface) 96%, transparent);
    backdrop-filter: blur(10px);
}
.customer-topbar-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.customer-topbar-title > div { min-width: 0; display: grid; gap: 2px; }
.customer-topbar-title strong { overflow: hidden; color: var(--customer-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.customer-topbar-title small { color: var(--customer-muted); font-size: 9px; }
.customer-mobile-menu { display: none; }
.customer-topbar-meta { display: flex; align-items: center; gap: 8px; color: var(--customer-muted); }
.customer-topbar-meta > span,
.customer-topbar-meta > time {
    min-height: 34px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--customer-border);
    border-radius: 7px;
    background: var(--customer-surface-muted);
    font-size: 10px;
}
.customer-topbar-meta svg { width: 14px; height: 14px; }
.customer-topbar-meta b { color: var(--customer-text); font-weight: 600; }
.customer-secure-state { color: var(--customer-success); }
.customer-secure-state b { color: inherit; }
.customer-app-shell .customer-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 0 auto;
    margin: 0;
    padding: clamp(14px, 1.5vw, 24px);
}
.customer-app-shell .customer-app-footer { margin: 0; }
.customer-sidebar-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(9, 15, 24, .48); backdrop-filter: blur(2px); }

/* Wider live stage and calmer, more legible collaboration rail */
.live-trade-room { grid-template-columns: minmax(0, 1fr) clamp(248px, 18.5vw, 292px); gap: 12px; }
.live-room-side-column { gap: 8px; top: 78px; }
.live-online-users-panel .customer-panel-head { min-height: 56px; padding-block: 9px; }
.live-online-users { max-height: 132px; padding: 6px; gap: 5px; }
.live-online-user {
    min-height: 36px;
    padding: 4px 6px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 6px;
    animation: live-presence-in .24s ease-out both;
}
.live-online-user > i { width: 27px; height: 27px; }
.live-chat-panel { height: min(590px, calc(100dvh - 300px)); min-height: 430px; }
.live-chat-messages {
    padding: 9px 8px 12px;
    gap: 8px;
    background-color: var(--customer-bg);
    background-image: linear-gradient(to bottom, transparent 31px, color-mix(in srgb, var(--customer-border) 23%, transparent) 32px);
    background-size: 100% 32px;
}
.live-chat-message {
    max-width: 92%;
    padding: 8px 9px 6px;
    position: relative;
    box-shadow: 0 3px 10px rgba(29, 44, 74, .045);
    transform-origin: bottom left;
}
.live-chat-message.is-admin { transform-origin: bottom right; }
.live-chat-message.is-new { animation: live-message-in .3s cubic-bezier(.2, .8, .25, 1) both; }
.live-chat-message header strong { max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-chat-message footer { opacity: .72; transition: opacity .16s ease; }
.live-chat-message:hover footer { opacity: 1; }
.live-chat-message footer button { transition: transform .14s ease, color .14s ease, background-color .14s ease; }
.live-chat-message footer button:hover { transform: translateY(-1px); }
.live-chat-composer { padding: 8px; gap: 6px; }
.live-chat-composer textarea { height: 50px; min-height: 50px; padding: 7px 9px; resize: none; }
.live-chat-composer .portal-primary-button { width: 44px; min-height: 44px; padding-inline: 0; }
.live-chat-composer .portal-primary-button span { display: none; }

@keyframes customer-popover-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes live-presence-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes live-message-in { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) and (min-width: 901px) {
    .live-trade-room { grid-template-columns: minmax(0, 1fr) 250px; }
    .customer-topbar-meta .customer-secure-state { display: none; }
}
@media (max-width: 900px) {
    .customer-sidebar { transform: translateX(105%); transition: transform .24s ease; }
    .customer-sidebar.is-open { transform: none; }
    .customer-sidebar-close,
    .customer-mobile-menu { display: inline-flex; }
    .customer-app-shell { margin-right: 0; }
    .customer-menu-open { overflow: hidden; }
    .customer-topbar { min-height: 60px; padding-inline: 12px; }
    .customer-topbar-meta .customer-secure-state { display: none; }
    .live-trade-room { grid-template-columns: 1fr; }
    .live-room-side-column { position: static; grid-template-columns: minmax(210px, .42fr) minmax(0, 1fr); align-items: stretch; }
    .live-online-users-panel { min-height: 420px; }
    .live-online-users { max-height: 346px; }
    .live-chat-panel { height: 520px; }
}
@media (max-width: 620px) {
    .customer-sidebar { width: min(286px, calc(100vw - 46px)); }
    .customer-topbar-meta > span:first-child { display: none; }
    .customer-topbar-title small { display: none; }
    .customer-topbar-meta > time { min-height: 32px; padding-inline: 7px; }
    .customer-app-shell .customer-main { padding: 10px 8px 18px; }
    .live-room-side-column { grid-template-columns: 1fr; }
    .live-online-users-panel { min-height: 0; }
    .live-online-users { max-height: 132px; }
    .live-chat-panel { height: min(520px, calc(100dvh - 90px)); }
    .live-chat-message { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
    .customer-account-popover,
    .live-online-user,
    .live-chat-message.is-new { animation: none !important; }
}