@font-face {
    font-family: "pingAR";
    src: url("../../fonts/ar/broker-font.TTF") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "pingAR";
    src: url("../../fonts/ar/broker-font.TTF") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
/* ===== CSS Variables ===== */
:root {
    --color-brand: #052139;
    --color-brand-light: rgba(168, 119, 88, 0.082);
    --color-brand-border: rgba(168, 119, 88, 0.2);
    --color-silver: rgb(107, 113, 117);
    --color-silver-light: rgba(107, 113, 117, 0.082);
    --color-silver-border: rgba(107, 113, 117, 0.2);
    --color-text-primary: rgb(31, 22, 18);
    --color-text-dark: rgb(26, 20, 16);
    --color-text-muted: rgba(60, 40, 30, 0.6);
    --color-text-faint: rgba(60, 40, 30, 0.45);
    --color-border: rgba(120, 90, 60, 0.12);
    --color-border-dashed: rgba(120, 90, 60, 0.12);
    --color-bg-glass: rgba(255, 255, 255, 0.7);
    --color-green: rgb(91, 138, 90);
    --color-green-light: rgba(91, 138, 90, 0.082);
    --color-green-border: rgba(91, 138, 90, 0.2);
    --color-muted-tag: rgb(139, 125, 117);
    --color-muted-tag-light: rgba(139, 125, 117, 0.082);
    --color-muted-tag-border: rgba(139, 125, 117, 0.2);
    --shadow-card: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --shadow-sm: rgba(255, 255, 255, 0.8) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --backdrop: blur(20px) saturate(180%);
    --radius-card: 16px;
    --radius-sm: 12px;
    --radius-xs: 9px;
    --radius-pill: 99px;
    --font: 'pingAR', sans-serif;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background: #f5efe8;
    margin: 0;
    padding: 0;
    direction: rtl;
}

/* ===== Layout ===== */
.dashboard-scroll {
    flex: 1 1 0%;
    overflow: hidden auto;
    font-family: var(--font);
}
.mainColor
{
    color: var(--color-brand);
}
.dashboard-container {
    padding: 24px 32px 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    gap: 12px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgb(223 224 253);
    color: var(--color-brand);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.breadcrumb-sep {
    opacity: 0.4;
}

.breadcrumb-current {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ===== Welcome Card ===== */
.welcome-card {
    background: linear-gradient(115deg, rgb(49 48 238 / 26%) 0%, rgb(255 255 255) 42%, rgb(231 223 255) 100%);
    box-shadow: rgba(30, 27, 58, 0.04) 0px 1px 2px, rgba(79, 70, 229, 0.35) 0px 18px 44px -28px;
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 20px;
    padding: 55px 28px;
    backdrop-filter: var(--backdrop);
    transition: 0.22s;
    cursor: default;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

.welcome-card-glow {
    position: absolute;
    top: -80px;
    inset-inline-start: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 113, 117, 0.133), transparent 70%);
    pointer-events: none;
}

.welcome-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    position: relative;
}

.welcome-card-info {
    flex: 1 1 0px;
    min-width: 0px;
}

.welcome-label {
    font-size: 11px;
    color: var(--safa-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}

.welcome-heading {
    margin: 0px;
    font-size: 30px;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
}

.welcome-heading .gradient-text {
    background: var(--safa-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.welcome-meta-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.welcome-meta-divider {
    width: 0.5px;
    height: 14px;
    background: var(--color-border);
}

.welcome-meta-level {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
}
.welcome-meta-level.silver
{
    background: var(--color-silver-light);
    color: var(--color-silver);
    border: 0.5px solid var(--color-silver-border);
}
.welcome-meta-level.bronze
{
    background: #ffe8da;
    color: #8a5d3f;
    border: 0.5px solid #ffe8da;
}
.welcome-meta-level.gold
{
    background: #ffe9bd6e;
    color: goldenrod;
    border: 0.5px solid #ffe9bd6e;
}

/* ===== Progress Ring Widget ===== */
.progress-widget {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(168, 119, 88, 0.024), rgba(107, 113, 117, 0.024));
    border: 0.5px solid var(--color-border);
    box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 2px 8px;
}

.progress-ring-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-svg {
    transform: rotate(-90deg);
}

.progress-ring-track {
    fill: none;
    stroke: rgba(120, 90, 60, 0.15);
    stroke-width: 8;
}

.progress-ring-fill {
    fill: none;
    stroke: url(#cdg-92-6b7175);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 179.45 263.89;
    filter: drop-shadow(rgba(107, 113, 117, 0.4) 0px 0px 6px);
    transition: stroke-dasharray 1s;
}

.progress-ring-label {
    position: absolute;
    inset: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.progress-ring-days {
    font-size: 20px;
    font-weight: 700;
    color: rgb(26, 20, 16);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.progress-ring-days span {
    font-size: 12px;
    opacity: 0.6;
    margin-inline-start: 2px;
}

.progress-ring-time {
    font-size: 9.2px;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.progress-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 140px;
}

.progress-stats-label {
    font-size: 10.5px;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

.progress-stats-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: 4px;
}

.progress-stats-upgrade {
    font-size: 14px;
    font-weight: 700;
    color: rgb(138, 106, 69);
    line-height: 1;
    margin-top: 4px;
}

/* ===== Action Buttons ===== */
.actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.actions-bar .spacer {
    flex: 1 1 0%;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font);
    cursor: pointer;
    opacity: 1;
    width: auto;
    outline: none;
    transition: 0.18s;
    padding: 12px 24px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

.btn-icon {
    display: inline-flex;
}

.btn-primary {
    background: var(--safa-primary);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: rgba(168, 119, 88, 0.25) 0px 4px 16px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}
.btn-primary:hover {
    background: var(--safa-ink);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-text-primary);
    border: 0.5px solid var(--color-border);
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.btn-outline {
    background: rgba(168, 119, 88, 0.03);
    color: var(--color-brand);
    border: 0.5px solid var(--color-brand-border);
    font-weight: 600;
}

/* ===== Stats Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    flex: 1 1 0%;
    min-width: 0px;
    padding: 40px 16px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgb(255, 255, 255) 0%, rgb(251, 250, 255) 55%, rgb(239, 234, 255) 100%);
    border: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: rgba(79, 70, 229, 0.7) 0px 14px 34px -26px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.25s;
    transform: translateY(0px);
}

.stat-card-accent {
    position: absolute;
    top: 0px;
    inset-inline-start: 0px;
    width: 24px;
    height: 2px;
    border-radius: var(--radius-pill);
}

.stat-card-accent--brand {
    background: var(--color-brand);
    box-shadow: rgba(168, 119, 88, 0.667) 0px 0px 12px;
}

.stat-card-accent--silver {
    background: var(--color-silver);
    box-shadow: rgba(107, 113, 117, 0.667) 0px 0px 12px;
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.stat-card-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat-card-icon--brand {
    background: #f0effd;
    color: var(--safa-primary);
}

.stat-card-icon--silver {
    background: #f0effd;
    color: var(--safa-primary);
}

.stat-card-more {
    color: rgba(60, 40, 30, 0.3);
}

.stat-card-label {
    font-size: 11.5px;
    color: var(--safa-muted);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.stat-card-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-card-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--safa-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-card-unit {
    font-size: 11px;
    color: rgba(60, 40, 30, 0.5);
}

/* ===== AI Tip Banner ===== */
.ai-tip {
    margin-bottom: 18px;
}

.ai-tip-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.08), rgba(124, 29, 46, 0.05));
    border: 0.5px solid rgba(194, 65, 12, 0.25);
    font-size: 12px;
    color: rgba(40, 25, 15, 0.85);
    cursor: pointer;
    transition: 0.2s;
    transform: translateY(0px);
}

.ai-tip-icon {
    color: var(--color-brand);
    display: inline-flex;
    flex-shrink: 0;
}

.ai-tip-text {
    flex: 1 1 0%;
    text-wrap: pretty;
}

.ai-tip-action {
    font-size: 10.5px;
    color: var(--color-brand);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Main Grid ===== */
.main-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    align-items: start;
}

/* ===== Glass Card ===== */
.glass-card {
    border-radius: var(--radius-card);
    padding: 18px 20px;
    backdrop-filter: var(--backdrop);
    background: linear-gradient(160deg, rgb(255, 255, 255) 0%, rgb(251, 250, 255) 55%, rgb(239, 234, 255) 100%);
    border: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: rgba(79, 70, 229, 0.7) 0px 14px 34px -26px;
    transition: 0.22s;
    cursor: default;
}

.glass-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--color-border-dashed);
}

.glass-card-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.glass-card-icon--brand {
    background: var(--safa-primary-light);
    color: var(--color-brand);
}

.glass-card-icon--silver {
    background: var(--color-silver-light);
    color: var(--color-silver);
}

.glass-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-brand);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

.glass-card-action {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-brand);
    font-size: 11.5px;
    font-weight: 700;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.glass-card-action:hover
{
    color: #a27458;
}

/* ===== Client List ===== */
.client-list {
    display: flex;
    flex-direction: column;
}

.client-divider {
    height: 0.5px;
    background: var(--color-border);
    margin: 4px 0px;
}

.client-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0px;
    cursor: pointer;
}

.client-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand), rgba(168, 119, 88, 0.667));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: rgba(168, 119, 88, 0.333) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;
}

.client-info {
    flex: 1 1 0%;
    min-width: 0px;
}

.client-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.client-location {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.client-status {
    text-align: left;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge--new {
    background: var(--safa-primary-light);
    color: var(--color-brand);
    border: 0.5px solid var(--safa-primary-light);
}
.status-badge--new .status-dot {
    background: var(--color-brand);
    box-shadow: var(--color-brand) 0px 0px 6px;
}

.status-badge--qualified {
    background: var(--color-green-light);
    color: var(--color-green);
    border: 0.5px solid var(--color-green-border);
}
.status-badge--qualified .status-dot {
    background: var(--color-green);
    box-shadow: var(--color-green) 0px 0px 6px;
}

.status-badge--review {
    background: var(--color-silver-light);
    color: var(--color-silver);
    border: 0.5px solid var(--color-silver-border);
}
.status-badge--review .status-dot {
    background: var(--color-silver);
    box-shadow: var(--color-silver) 0px 0px 6px;
}

.status-badge--closed {
    background: var(--color-muted-tag-light);
    color: var(--color-muted-tag);
    border: 0.5px solid var(--color-muted-tag-border);
}
.status-badge--closed .status-dot {
    background: var(--color-muted-tag);
    box-shadow: var(--color-muted-tag) 0px 0px 6px;
}

.client-amount {
    font-size: 11px;
    color: var(--color-text-faint);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ===== Right Column ===== */
.right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Conversion Rate Card ===== */
.conversion-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.conversion-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.conversion-label {
    font-size: 11px;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.conversion-pct {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversion-pct span {
    font-size: 11px;
    opacity: 0.5;
}

.progress-bar-wrap {
    position: relative;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}

.progress-bar-fill {
    position: absolute;
    inset: 0;
    width: 68%;
    background: var(--safa-primary);
    box-shadow: var(--Brand-400-Safa-bronze-dark) 0px 0px 12px;
    border-radius: var(--safa-primary);
    transition: width 1s;
}

.progress-bar-legend {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: rgba(60, 40, 30, 0.4);
    font-variant-numeric: tabular-nums;
}

.conversion-stats {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 0.5px dashed var(--color-border-dashed);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.conversion-stat-box {
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
}

.conversion-stat-box--brand {
    background: rgba(168, 119, 88, 0.03);
    border: 0.5px solid rgba(168, 119, 88, 0.133);
}

.conversion-stat-box--silver {
    background: rgba(107, 113, 117, 0.03);
    border: 0.5px solid rgba(107, 113, 117, 0.133);
}

.conversion-stat-label {
    font-size: 10px;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

.conversion-stat-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.conversion-stat-value--brand { color: var(--color-brand); }
.conversion-stat-value--silver { color: var(--color-silver); }

.conversion-stat-value span {
    font-size: 11px;
    opacity: 0.6;
    margin-inline-start: 3px;
}

/* ===== Activity Timeline ===== */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.activity-item {
    display: flex;
    gap: 10px;
    position: relative;
}

.activity-item--has-line {
    padding-bottom: 14px;
}

.activity-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
}

.activity-dot--active {
    background: var(--color-brand);
    box-shadow: rgba(168, 119, 88, 0.533) 0px 0px 8px;
}

.activity-dot--inactive {
    background: rgba(120, 90, 60, 0.3);
}

.activity-line {
    position: absolute;
    top: 14px;
    bottom: -14px;
    width: 1.5px;
    background: var(--color-border);
}

.activity-content {
    flex: 1 1 0%;
    min-width: 0px;
}

.activity-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.activity-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(20, 12, 8, 0.9);
}

.activity-time {
    font-size: 10px;
    color: var(--color-text-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.activity-desc {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
    text-wrap: pretty;
}
#sidebar-toggle:focus,
#sidebar-toggle:active,
#sidebar-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ===== CSS Variables ===== */
:root {
    --clr-copper: var(--safa-primary);
    --clr-copper-wash: #052139;
    --clr-copper-edge: #052139;
    --clr-slate: rgb(107, 113, 117);
    --clr-slate-wash: rgba(107, 113, 117, 0.082);
    --clr-slate-edge: rgba(107, 113, 117, 0.2);
    --clr-ink: #052139;
    --clr-ink-deep: #052139;
    --clr-ink-soft: #052139;
    --clr-ink-ghost: #052139;
    --clr-ink-dim: #052139;
    --clr-divider: rgba(120, 90, 60, 0.12);
    --clr-frosted: rgba(255, 255, 255, 0.7);
    --clr-sage: rgb(91, 138, 90);
    --clr-sage-wash: rgba(91, 138, 90, 0.082);
    --clr-sage-edge: rgba(91, 138, 90, 0.2);
    --clr-dust: rgb(139, 125, 117);
    --clr-dust-wash: rgba(139, 125, 117, 0.082);
    --clr-dust-edge: rgba(139, 125, 117, 0.2);
    --clr-twig: rgba(120, 90, 60, 0.06);
    --clr-twig-icon: #052139;
    --elevation-panel: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --elevation-float: rgba(255, 255, 255, 0.6) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 2px 8px;
    --frosted-blur: blur(20px) saturate(180%);
    --rounding-panel: 16px;
    --rounding-card: 18px;
    --rounding-chip: 90px;
    --rounding-tag: 99px;
    --rounding-icon: 8px;
    --type: 'pingAR', sans-serif;
}

/* ===== Page Shell ===== */
.pipe-shell {
    flex: 1 1 0%;
    overflow: hidden auto;
    font-family: var(--type);
}

.pipe-wrap {
    padding: 24px 32px 32px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ===== Top Bar ===== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--clr-ink-soft);
    flex-wrap: wrap;
    gap: 12px;
}

.topbar-trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-tag {
    padding: 4px 10px;
    border-radius: var(--rounding-tag);
    background: rgba(168, 119, 88, 0.07);
    color: var(--clr-copper);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.topbar-sep { opacity: 0.4; }

.topbar-page {
    color: var(--clr-ink);
    font-weight: 600;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-count {
    font-variant-numeric: tabular-nums;
}

/* ===== Buttons ===== */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--type);
    cursor: pointer;
    outline: none;
    transition: 0.18s;
    letter-spacing: 0.02em;
}

.cta-icon { display: inline-flex; }

.cta--primary {
    padding: 12px 24px;
    font-size: 13px;
    border-radius: var(--rounding-chip);
    background: var(--safa-primary);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: rgba(168, 119, 88, 0.25) 0px 4px 16px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.cta--primary-sm {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 9px;
    background: var(--safa-primary);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: rgba(168, 119, 88, 0.25) 0px 4px 16px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.cta--green {
    padding: 12px 24px;
    font-size: 13px;
    border-radius: var(--rounding-chip);
    background: linear-gradient(135deg, rgb(107, 162, 106) 0%, var(--clr-sage) 100%);
    color: #fff;
    border: 0.5px solid rgba(91, 138, 90, 0.333);
    font-weight: 700;
    box-shadow: rgba(91, 138, 90, 0.35) 0px 4px 14px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.cta--ghost {
    padding: 12px 24px;
    font-size: 13px;
    border-radius: var(--rounding-chip);
    background: rgba(255, 255, 255, 0.5);
    color: var(--clr-ink);
    border: 0.5px solid var(--clr-divider);
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* ===== Filter Tabs ===== */
.filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 6px 14px;
    border-radius: var(--rounding-tag);
    font-family: var(--type);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
    backdrop-filter: blur(10px);
}

.filter-tab--active {
    border: 0.5px solid var(--clr-copper);
    background: var(--clr-copper-wash);
    color: var(--clr-copper);
}

.filter-tab--idle {
    border: 0.5px solid var(--clr-divider);
    background: rgba(255, 255, 255, 0.5);
    color: var(--clr-ink-soft);
}

.filter-tab-count { opacity: 0.6; }

/* ===== Two-Column Layout ===== */
.pipe-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    align-items: start;
}

/* ===== Sidebar List ===== */
.lead-sidebar {
    background: var(--clr-frosted);
    border: 0.5px solid var(--clr-divider);
    border-radius: var(--rounding-panel);
    padding: 6px;
    backdrop-filter: var(--frosted-blur);
    box-shadow: var(--elevation-panel);
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.lead-row {
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: 0.15s;
}

.lead-row--active {
    background: var(--safa-primary-light);
    border: 0.5px solid var(--safa-primary-light);
}

.lead-row--idle {
    background: transparent;
    border: 0.5px solid transparent;
}

.lead-row:last-child { margin-bottom: 0; }

.lead-row-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lead-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--safa-grad);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: rgb(94 54 241 / 53%) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;
}

.lead-meta {
    flex: 1 1 0%;
    min-width: 0;
}

.lead-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.lead-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-loc {
    font-size: 11px;
    color: var(--clr-ink-ghost);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lead-budget {
    font-size: 11.5px;
    color: var(--clr-ink);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ===== Status Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--rounding-tag);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--type);
    white-space: nowrap;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.badge--new {
    background: var(--safa-primary);
    color: #fff;
    border: 0.5px solid var(--safa-primary);
}
.badge--new .badge-dot {
    background: #fff;
    box-shadow: #fff 0px 0px 6px;
}

.badge--qualified {
    background: var(--clr-sage-wash);
    color: var(--clr-sage);
    border: 0.5px solid var(--clr-sage-edge);
}
.badge--qualified .badge-dot {
    background: var(--clr-sage);
    box-shadow: var(--clr-sage) 0px 0px 6px;
}

.badge--review {
    background: var(--clr-slate-wash);
    color: var(--clr-slate);
    border: 0.5px solid var(--clr-slate-edge);
}
.badge--review .badge-dot {
    background: var(--clr-slate);
    box-shadow: var(--clr-slate) 0px 0px 6px;
}

.badge--closed {
    background: var(--clr-dust-wash);
    color: var(--clr-dust);
    border: 0.5px solid var(--clr-dust-edge);
}
.badge--closed .badge-dot {
    background: var(--clr-dust);
    box-shadow: var(--clr-dust) 0px 0px 6px;
}

/* ===== Detail Panel ===== */
.detail-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Profile Header Card ===== */
.profile-card {
    background: var(--clr-frosted);
    border: 0.5px solid var(--clr-divider);
    border-radius: var(--rounding-card);
    padding: 20px 24px;
    backdrop-filter: var(--frosted-blur);
    box-shadow: var(--elevation-panel);
}

.profile-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--safa-grad);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 21px;
    flex-shrink: 0;
    box-shadow: rgb(94 54 241 / 53%) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;
}

.profile-info { flex: 1 1 0%; }

.profile-eyebrow {
    font-size: 11px;
    color: var(--clr-ink-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 3px;
}

.profile-name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--clr-ink);
    letter-spacing: -0.02em;
}

.profile-contacts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--clr-ink-soft);
    flex-wrap: wrap;
}

.profile-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.profile-contact-item--ltr { direction: ltr; }

.profile-divider {
    width: 0.5px;
    height: 12px;
    background: var(--clr-divider);
}

/* ===== Pipeline Stepper ===== */
.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 4px 0;
}

.step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex-shrink: 0;
    min-width: 0;
}

.step-bubble {
    border-radius: 50%;
    transition: 0.3s;
    flex-shrink: 0;
}

.step-bubble--active {
    width: 14px;
    height: 14px;
    background: var(--clr-copper);
    box-shadow: var(--safa-primary-light);
}

.step-bubble--pending {
    width: 10px;
    height: 10px;
    background: rgba(120, 90, 60, 0.18);
}

.step-label {
    font-size: 9.5px;
    white-space: nowrap;
}

.step-label--active {
    color: var(--clr-copper);
    font-weight: 600;
    text-shadow: rgba(168, 119, 88, 0.333) 0px 0px 12px;
}

.step-label--pending {
    color: rgba(60, 40, 30, 0.4);
    font-weight: 400;
}

.step-connector {
    flex: 1 1 0%;
    height: 1.5px;
    margin: 0 4px 24px;
    background: rgba(120, 90, 60, 0.15);
}
.step-connector.step-connector--active
{
    background: var(--safa-primary);
}
/* ===== Info Grid ===== */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ===== Info Panel ===== */
.info-panel {
    background: var(--clr-frosted);
    border: 0.5px solid var(--clr-divider);
    border-radius: var(--rounding-panel);
    padding: 18px 20px;
    backdrop-filter: var(--frosted-blur);
    box-shadow: var(--elevation-panel);
}

.info-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--clr-divider);
}

.info-panel-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info-panel-icon--copper {
    background: var(--clr-copper-wash);
    color: var(--clr-copper);
}

.info-panel-icon--slate {
    background: var(--clr-slate-wash);
    color: var(--clr-slate);
}

.info-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--clr-ink);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

/* ===== Info Row ===== */
.info-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
}

.info-row-divider {
    height: 0.5px;
    background: var(--clr-divider);
    margin: 4px 0;
}

.info-row-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--rounding-icon);
    flex-shrink: 0;
    background: var(--clr-twig);
    color: var(--clr-twig-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info-row-body { flex: 1 1 0%; min-width: 0; }

.info-row-label {
    font-size: 10.5px;
    color: rgba(60, 40, 30, 0.5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 500;
}

.info-row-value {
    font-size: 13.5px;
    color: var(--clr-ink-dim);
    font-weight: 500;
    word-break: break-word;
}

.info-row-value--ltr {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    display: inline-block;
}

.info-row-value strong {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

/* ===== Notes Panel ===== */
.notes-panel {
    background: var(--clr-frosted);
    border: 0.5px solid var(--clr-divider);
    border-radius: var(--rounding-panel);
    padding: 18px 20px;
    backdrop-filter: var(--frosted-blur);
    box-shadow: var(--elevation-panel);
}

.notes-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--clr-divider);
}

.notes-panel-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--clr-copper-wash);
    color: var(--clr-copper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notes-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--clr-ink);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

.notes-body {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--clr-ink);
    line-height: 1.7;
}

/* ===== Action Bar ===== */
.action-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* ===== CSS Variables ===== */
:root {
    --hue-amber: var(--safa-primary);
    --hue-amber-tint: rgba(168, 119, 88, 0.082);
    --hue-amber-rim: rgba(168, 119, 88, 0.2);
    --hue-stone: rgb(107, 113, 117);
    --hue-stone-tint: rgba(107, 113, 117, 0.082);
    --hue-stone-rim: rgba(107, 113, 117, 0.2);
    --hue-forest: rgb(91, 138, 90);
    --hue-forest-tint: rgba(91, 138, 90, 0.082);
    --hue-forest-rim: rgba(91, 138, 90, 0.2);
    --hue-text: rgb(31, 22, 18);
    --hue-text-dim: rgba(60, 40, 30, 0.6);
    --hue-seam: rgba(120, 90, 60, 0.12);
    --hue-glass: rgba(255, 255, 255, 0.7);
    --lift-card: rgba(255, 255, 255, 0.8) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 2px 8px;
    --glass-blur: blur(20px) saturate(180%);
    --r-card: 16px;
    --r-pill: 99px;
    --font-ar: 'pingAR', sans-serif;
}


/* ===== Listings Grid ===== */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* ===== Property Card ===== */
.prop-card {
    background: var(--hue-glass);
    border: 0.5px solid var(--hue-seam);
    border-radius: var(--r-card);
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--lift-card);
    transform: none;
    transition: 0.22s;
}

.prop-card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px inset, rgba(60, 40, 30, 0.1) 0px 8px 24px;
}

/* ===== Card Thumbnail ===== */
.prop-thumb {
    height: 160px;
    background: linear-gradient(135deg, var(--hue-amber) 0%, var(--hue-stone) 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 14px 16px;
}

.prop-thumb-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.22;
}

.prop-thumb-match {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
}

.prop-match-tag {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--hue-amber);
    border: none;
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.prop-thumb-status {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
}

.prop-avail-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: rgb(239, 204, 183);
    color: rgba(195, 138, 103);
    border: 0.5px solid rgb(239, 204, 183);
    font-size: 11px;
    font-weight: 400;
    font-family: var(--font-ar);
}

.prop-avail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(195, 138, 103);
    box-shadow: rgba(195, 138, 103) 0px 0px 6px;
}

.prop-thumb-caption {
    position: relative;
    color: #fff;
    width: 100%;
}

.prop-type-label {
    font-size: 11px;
    opacity: 0.85;
    margin-bottom: 3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.prop-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ===== Card Body ===== */
.prop-body {
    padding: 14px 16px;
}

.prop-location {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--hue-text-dim);
}

.prop-pricing {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.prop-pricing-label {
    font-size: 11px;
    color: var(--hue-text-dim);
}

.prop-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--hue-amber);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.prop-price-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--hue-text-dim);
}

/* ===== Card Footer / Specs ===== */
.prop-specs {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 0.5px dashed var(--hue-seam);
}

.prop-spec {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--hue-text-dim);
}

.prop-spec-icon {
    color: var(--hue-stone);
}

.prop-spec-val {
    color: var(--hue-text);
}


/* ===== CSS Variables ===== */
:root {
    --tone-gold: var(--safa-primary);
    --tone-gold-wash: rgba(168, 119, 88, 0.082);
    --tone-gold-rim: rgba(168, 119, 88, 0.2);
    --tone-gold-faint: rgba(168, 119, 88, 0.063);
    --tone-iron: rgb(107, 113, 117);
    --tone-iron-wash: rgba(107, 113, 117, 0.082);
    --tone-iron-rim: rgba(107, 113, 117, 0.2);
    --tone-mint: rgb(91, 138, 90);
    --tone-mint-wash: rgba(91, 138, 90, 0.082);
    --tone-mint-rim: rgba(91, 138, 90, 0.2);
    --tone-ink: var(--safa-primary);
    --tone-ink-deep: var(--safa-muted);
    --tone-ink-soft: var(--safa-primary);
    --tone-ink-pale: var(--safa-primary);
    --tone-ink-hint: var(--safa-muted);
    --tone-seam: rgba(120, 90, 60, 0.12);
    --tone-seam-light: rgba(120, 90, 60, 0.1);
    --tone-frost: rgba(255, 255, 255, 0.7);
    --shade-panel: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --shade-tile: rgba(255, 255, 255, 0.8) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --shade-raised: rgba(60, 40, 30, 0.08) 0px 8px 24px, rgba(107, 113, 117, 0.2) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.8) 0px 1px 0px inset;
    --fog: blur(20px) saturate(180%);
    --fog-light: blur(20px);
    --round-tile: 14px;
    --round-panel: 16px;
    --round-icon: 9px;
    --round-pill: 99px;
    --round-chip: 6px;
    --typeface: 'pingAR', sans-serif;
}


/* ===== Page Shell ===== */
.finance-shell {
    flex: 1 1 0%;
    overflow: hidden auto;
    font-family: var(--typeface);
}

.finance-wrap {
    padding: 24px 32px 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ===== Top Bar ===== */
.fin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--tone-ink-soft);
    flex-wrap: wrap;
    gap: 12px;
}

.fin-trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fin-trail-badge {
    padding: 4px 10px;
    border-radius: var(--round-pill);
    background: rgba(168, 119, 88, 0.07);
    color: var(--tone-gold);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.fin-trail-sep { opacity: 0.4; }

.fin-trail-page {
    color: var(--tone-ink);
    font-weight: 600;
}

.fin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ===== Export Button ===== */
.export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--typeface);
    cursor: pointer;
    outline: none;
    transition: 0.18s;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--tone-ink);
    border: 0.5px solid var(--tone-seam);
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.export-btn-icon { display: inline-flex; }

/* ===== KPI Tiles ===== */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.kpi-tile {
    flex: 1 1 0%;
    min-width: 0;
    padding: 14px 16px;
    border-radius: var(--round-tile);
    background: rgba(255, 255, 255, 0.7);
    border: 0.5px solid var(--tone-seam-light);
    box-shadow: var(--shade-tile);
    backdrop-filter: var(--fog-light);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.25s;
    transform: translateY(0px);
}

.kpi-tile--lifted {
    box-shadow: var(--shade-raised);
    transform: translateY(-2px);
}

.kpi-tile-streak {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 24px;
    height: 2px;
    border-radius: var(--round-pill);
}

.kpi-tile-streak--gold {
    background: var(--tone-gold);
    box-shadow: rgba(168, 119, 88, 0.667) 0px 0px 12px;
}

.kpi-tile-streak--mint {
    background: var(--tone-mint);
    box-shadow: rgba(91, 138, 90, 0.667) 0px 0px 12px;
}

.kpi-tile-streak--iron {
    background: var(--tone-iron);
    box-shadow: rgba(107, 113, 117, 0.667) 0px 0px 12px;
}

.kpi-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kpi-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--round-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kpi-tile-icon--gold { background: var(--tone-gold-wash); color: var(--tone-gold); }
.kpi-tile-icon--mint { background: var(--tone-mint-wash); color: var(--tone-mint); }
.kpi-tile-icon--iron { background: var(--tone-iron-wash); color: var(--tone-iron); }

.kpi-tile-more { color: rgba(60, 40, 30, 0.3); }

.kpi-tile-label {
    font-size: 11.5px;
    color: var(--tone-ink-soft);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.kpi-tile-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.kpi-tile-number {
    font-size: 22px;
    font-weight: 700;
    color: var(--tone-ink-deep);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-tile-currency {
    font-size: 11px;
    color: var(--tone-ink-pale);
}

/* ===== Rate Banner ===== */
.rate-banner {
    background: var(--tone-frost);
    border: 0.5px solid var(--tone-seam);
    border-radius: var(--round-panel);
    padding: 18px 24px;
    backdrop-filter: var(--fog);
    box-shadow: var(--shade-panel);
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

.rate-banner-glow {
    position: absolute;
    top: -60px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 119, 88, 0.082), transparent 70%);
    pointer-events: none;
}

.rate-banner-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
}

.rate-banner-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--tone-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: rgba(168, 119, 88, 0.267) 0px 8px 20px;
    flex-shrink: 0;
}

.rate-banner-body { flex: 1 1 0%; }

.rate-banner-eyebrow {
    font-size: 11px;
    color: var(--tone-ink-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.rate-banner-desc {
    font-size: 14px;
    color: var(--tone-ink);
    font-weight: 600;
}

.rate-banner-desc .silver { color: var(--tone-iron); }
.rate-banner-desc .bronze { color: #8a5d3f; }
.rate-banner-desc .gold { color: goldenrod; }

.rate-banner-pct {
    font-size: 42px;
    font-weight: 900;
    color: var(--tone-gold);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tx-rate-pct
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-banner-pct-unit {
    font-size: 18px;
    color: var(--tone-ink-soft);
    font-weight: 600;
}

/* ===== AI Nudge ===== */
.nudge-bar {
    margin-bottom: 18px;
}

.nudge-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--round-pill);
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.08), rgba(124, 29, 46, 0.05));
    border: 0.5px solid rgba(194, 65, 12, 0.25);
    font-size: 12px;
    color: var(--tone-ink-hint);
    cursor: pointer;
    transition: 0.2s;
}

.nudge-icon {
    color: var(--tone-iron);
    display: inline-flex;
    flex-shrink: 0;
}

.nudge-text {
    flex: 1 1 0%;
    text-wrap: pretty;
}

.nudge-cta {
    font-size: 10.5px;
    color: var(--tone-iron);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Transactions Table Panel ===== */
.tx-panel {
    background: var(--tone-frost);
    border: 0.5px solid var(--tone-seam);
    border-radius: var(--round-panel);
    padding: 18px 20px;
    backdrop-filter: var(--fog);
    box-shadow: var(--shade-panel);
}

.tx-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--tone-seam);
}

.tx-panel-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--tone-gold-wash);
    color: var(--tone-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tx-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--tone-ink);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

.tx-panel-summary {
    font-size: 11px;
    color: var(--tone-ink-soft);
    font-variant-numeric: tabular-nums;
}

.tx-panel-summary strong { color: var(--tone-gold); }

.tx-sync-note {
    font-size: 10.5px;
    color: var(--tone-ink-soft);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Table ===== */
.tx-scroll { overflow: auto; }

.tx-table {
    width: 100%;
    border-collapse: collapse;
}

.tx-table thead th {
    padding: 10px 14px;
    text-align: right;
    font-size: 10.5px;
    color: var(--tone-ink-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 0.5px solid var(--tone-seam);
    font-family: var(--typeface);
    white-space: nowrap;
}

.tx-table tbody tr {
    cursor: default;
    transition: background 0.12s;
}

.tx-table tbody tr:hover { background: rgba(168, 119, 88, 0.025); }

.tx-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--tone-ink);
    border-bottom: 0.5px solid var(--tone-seam);
}

/* ===== Table Cell Variants ===== */
.tx-deal-id {
    font-family: monospace;
    font-size: 12px;
    color: var(--tone-ink-soft);
    direction: ltr;
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--round-chip);
    background: var(--tone-gold-faint);
}

.tx-client-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tx-client-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tone-gold), rgba(168, 119, 88, 0.667));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11.76px;
    flex-shrink: 0;
    box-shadow: rgba(168, 119, 88, 0.333) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;
}

.tx-client-name {
    font-size: 13px;
    font-weight: 600;
}

.tx-sale-price {
    font-variant-numeric: tabular-nums;
    color: var(--tone-ink);
    font-weight: 600;
}

.tx-rate-pct {
    font-variant-numeric: tabular-nums;
    color: var(--tone-ink-soft);
}

.tx-amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--tone-gold);
    font-variant-numeric: tabular-nums;
}

.tx-date {
    font-size: 11.5px;
    color: var(--tone-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* ===== Status Pills ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--round-pill);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--typeface);
    white-space: nowrap;
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pill--approved {
    background: var(--tone-mint-wash);
    color: var(--tone-mint);
    border: 0.5px solid var(--tone-mint-rim);
}
.pill--approved .pill-dot {
    background: var(--tone-mint);
    box-shadow: var(--tone-mint) 0px 0px 6px;
}

.pill--refused {
    background: #ff00000d;
    color: red;
    border: 0.5px solid red;
}
.pill--refused .pill-dot {
    background: red;
    box-shadow: red 0px 0px 6px;
}

.pill--draft {
    background: var(--tone-iron-wash);
    color: var(--tone-iron);
    border: 0.5px solid var(--tone-iron-rim);
}
.pill--draft .pill-dot {
    background: var(--tone-iron);
    box-shadow: var(--tone-iron) 0px 0px 6px;
}


/* ===== CSS Variables ===== */
:root {
    --swatch-copper: var(--safa-primary);
    --swatch-copper-soft: rgba(168, 119, 88, 0.082);
    --swatch-copper-edge: rgba(168, 119, 88, 0.6);
    --swatch-copper-faint: rgba(168, 119, 88, 0.07);
    --swatch-copper-pale: rgba(168, 119, 88, 0.03);
    --swatch-copper-border: rgba(168, 119, 88, 0.133);
    --swatch-pewter: rgb(107, 113, 117);
    --swatch-pewter-soft: rgba(107, 113, 117, 0.082);
    --swatch-pewter-edge: rgba(107, 113, 117, 0.2);
    --swatch-pewter-pale: rgba(107, 113, 117, 0.03);
    --swatch-pewter-border: rgba(107, 113, 117, 0.133);
    --swatch-pewter-dark: rgb(74, 79, 83);
    --swatch-amber: rgb(138, 106, 69);
    --swatch-amber-light: rgb(184, 149, 104);
    --swatch-amber-soft: rgba(138, 106, 69, 0.082);
    --swatch-amber-edge: rgba(138, 106, 69, 0.2);
    --swatch-amber-pale: rgba(138, 106, 69, 0.03);
    --swatch-amber-border: rgba(138, 106, 69, 0.133);
    --swatch-ink: rgb(31, 22, 18);
    --swatch-ink-mute: rgba(60, 40, 30, 0.6);
    --swatch-ink-ghost: rgba(60, 40, 30, 0.6);
    --swatch-crack: rgba(120, 90, 60, 0.12);
    --swatch-frosted: rgba(255, 255, 255, 0.7);
    --glow-panel: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --glow-card: rgba(255, 255, 255, 0.8) 0px 1px 0px inset;
    --glass: blur(20px) saturate(180%);
    --glass-lite: blur(10px);
    --curve-hero: 20px;
    --curve-card: 16px;
    --curve-box: 12px;
    --curve-icon: 14px;
    --curve-dot: 11px;
    --curve-pill: 99px;
    --stack: 'pingAR', sans-serif;
}



/* ===== Page Shell ===== */
.loyalty-shell {
    flex: 1 1 0%;
    overflow: hidden auto;
    font-family: var(--stack);
}

.loyalty-wrap {
    padding: 24px 32px 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ===== Top Bar ===== */
.loy-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--swatch-ink-mute);
    flex-wrap: wrap;
    gap: 12px;
}

.loy-trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.loy-trail-tag {
    padding: 4px 10px;
    border-radius: var(--curve-pill);
    background: var(--swatch-copper-faint);
    color: var(--swatch-copper);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.loy-trail-sep { opacity: 0.4; }

.loy-trail-page {
    color: var(--swatch-ink);
    font-weight: 600;
}

/* ===== Hero Card ===== */
.hero-card {
    background: var(--swatch-frosted);
    border: 0.5px solid var(--swatch-crack);
    border-radius: var(--curve-hero);
    padding: 0;
    backdrop-filter: var(--glass);
    box-shadow: var(--glow-panel);
    margin-bottom: 18px;
    overflow: hidden;
}

.hero-banner {
    padding: 32px 36px;
    position: relative;
    background: linear-gradient(135deg, var(--swatch-pewter) 0%, var(--swatch-pewter-dark) 100%);
}
.hero-banner.bronze {
    background: linear-gradient(135deg, #cea180 0%, #8a5d3f 100%);
}
.hero-banner.gold {
    background: linear-gradient(135deg, #ffcd44 0%, goldenrod 100%);
}

.hero-banner-orb {
    position: absolute;
    top: -60px;
    inset-inline-start: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-banner-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
}

.hero-rank-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    flex-shrink: 0;
}

.hero-rank-info {}

.hero-rank-eyebrow {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}

.hero-rank-name {
    margin: 0;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.025em;
}

.hero-rank-meta {
    margin-top: 10px;
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.hero-rank-meta strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ===== Countdown Ring ===== */
.rtl .hero-ring-wrap {
    margin-right: auto;
    text-align: center;
    margin-left: 0;
}
.hero-ring-wrap {
    margin-left: auto;
    text-align: center;
}

.hero-ring-inner {
    position: relative;
    width: 110px;
    height: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-ring-svg {
    transform: rotate(-90deg);
}

.hero-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 8;
}

.hero-ring-fill {
    fill: none;
    stroke: url(#cdg-110-fff);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 217.9 320.44;
    transition: stroke-dasharray 1s;
}

.hero-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hero-ring-days {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.hero-ring-days span {
    font-size: 14px;
    opacity: 0.6;
    margin-inline-start: 2px;
}

.hero-ring-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.hero-ring-caption {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

/* ===== Progress Bar (inside hero) ===== */
.hero-progress {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.15);
}

.hero-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.hero-progress-need {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.hero-progress-need strong { color: #fff; }

.hero-progress-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}

.hero-progress-track {
    height: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--curve-pill);
    overflow: hidden;
}

.hero-progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--curve-pill);
    transition: width 1s;
}

/* ===== Tier Cards Grid ===== */
.tiers-grid {
    display: grid;

    gap: 14px;
    margin-bottom: 18px;
}

/* ===== Tier Card ===== */
.tier-card {
    background: var(--swatch-frosted);
    border-radius: var(--curve-card);
    padding: 22px;
    backdrop-filter: var(--glass);
    box-shadow: var(--glow-card);
    transition: 0.22s;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.tier-card--default {
    border: 0.5px solid var(--swatch-crack);
}

.tier-card--active {
    border: 1.5px solid var(--swatch-pewter);
    box-shadow: rgba(107, 113, 117, 0.133) 0px 12px 32px;
}

.tier-card-crown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--swatch-pewter) 0%, var(--swatch-pewter-dark) 100%);
}

.tier-card-badge {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    padding: 3px 10px;
    border-radius: var(--curve-pill);
    background: var(--swatch-pewter);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tier-card-head {
    text-align: center;
    margin-bottom: 16px;
}

.tier-card-head--spaced { margin-top: 14px; }

.tier-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--curve-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 10px;
}

.tier-icon--light_grey {
    background: linear-gradient(135deg, #b9b9b9 0%, #6b6b6b 100%);
    box-shadow: #6b6b6b 0px 8px 20px;
}
.tier-icon--copper {
    background: linear-gradient(135deg, #ffba9e 0%, #b07b65 100%);
    box-shadow: #ffba9e 0px 8px 20px;
}

.tier-icon--bronze {
    background: linear-gradient(135deg, var(--swatch-copper-edge) 0%, rgb(138, 93, 63) 100%);
    box-shadow: rgba(168, 119, 88, 0.2) 0px 8px 20px;
}

.tier-icon--silver {
    background: linear-gradient(135deg, var(--swatch-pewter) 0%, var(--swatch-pewter-dark) 100%);
    box-shadow: rgba(107, 113, 117, 0.2) 0px 8px 20px;
}

.tier-icon--gold {
    background: linear-gradient(135deg, #ffcd44 0%, goldenrod 100%);
    box-shadow: #e0c37e 0px 8px 20px;
}

.tier-name {
    font-size: 20px;
    font-weight: 800;
}

.tier-name--light_grey { color: #b9b9b9; }
.tier-name--copper { color: #ffba9e; }
.tier-name--bronze { color: var(--swatch-copper-edge); }
.tier-name--silver { color: var(--swatch-pewter); }
.tier-name--gold   { color: goldenrod; }

.tier-range {
    font-size: 11px;
    color: var(--swatch-ink-mute);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ===== Commission Box ===== */
.tier-rate-box {
    text-align: center;
    padding: 14px 16px;
    border-radius: var(--curve-box);
    margin-bottom: 16px;
    background: var(--safa-primary-light) !important;
    border: 0.5px solid var(--safa-primary-light) !important;
}

.tier-rate-box--bronze {
    background: var(--swatch-copper-pale);
    border: 0.5px solid var(--swatch-copper-border);
}
.tier-rate-box--light_grey {
    background: #b9b9b9;
    border: 0.5px solid #b9b9b9;
}
.tier-rate-box--copper {
    background: #ffba9e;
    border: 0.5px solid #ffba9e;
}
.tier-rate-box--silver {
    background: var(--swatch-pewter-pale);
    border: 0.5px solid var(--swatch-pewter-border);
}

.tier-rate-box--gold {
    background: var(--swatch-amber-pale);
    border: 0.5px solid var(--swatch-amber-border);
}

.tier-rate-label {
    font-size: 11px;
    color: var(--swatch-ink-mute);
    margin-bottom: 4px;
}

.tier-rate-number {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tier-rate-number--light_grey {
    color: #b9b9b9;
}
.tier-rate-number--copper {
    color: #ffba9e;
}
.tier-rate-number--bronze { color: var(--swatch-copper-edge); }
.tier-rate-number--silver { color: var(--swatch-pewter); }
.tier-rate-number--gold   { color: goldenrod; }

.tier-rate-unit {
    font-size: 14px;
    color: var(--swatch-ink-mute);
}
@media (max-width: 900px) { .tiers-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 580px)  { .tiers-grid { grid-template-columns: repeat(1, 1fr) !important; } }
/* ===== Perks List ===== */
.perks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perk-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.perk-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perk-check--light_grey {
    background: #b9b9b9;
    border: 1px solid #b9b9b9;
    color: #696969;
}
.perk-check--copper {
    background: #ffba9e;
    border: 1px solid #ffba9e;
    color: #9f705d;
}

.perk-check--bronze {
    background: var(--swatch-copper-soft);
    border: 1px solid var(--swatch-copper-edge);
    color: var(--swatch-copper);
}

.perk-check--silver {
    background: var(--swatch-pewter-soft);
    border: 1px solid var(--swatch-pewter-edge);
    color: var(--swatch-pewter);
}

.perk-check--gold {
    background: var(--swatch-amber-soft);
    border: 1px solid var(--swatch-amber-edge);
    color: var(--swatch-amber);
}

.perk-text {
    font-size: 13px;
    color: var(--swatch-ink);
    line-height: 1.5;
}

/* ===== Points Panel ===== */
.pts-panel {
    background: var(--swatch-frosted);
    border: 0.5px solid var(--swatch-crack);
    border-radius: var(--curve-card);
    padding: 18px 20px;
    backdrop-filter: var(--glass);
    box-shadow: var(--glow-panel);
}

.pts-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--swatch-crack);
}

.pts-panel-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--swatch-copper-soft);
    color: var(--swatch-copper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pts-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--swatch-ink);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

/* ===== Earn Actions Grid ===== */
.earn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.earn-item {
    padding: 16px 14px;
    border-radius: var(--curve-box);
    text-align: center;
    background: var(--swatch-frosted);
    border: 0.5px solid var(--swatch-crack);
    backdrop-filter: var(--glass-lite);
}

.earn-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    margin: 0 auto 10px;
    background: var(--swatch-copper-faint);
    color: var(--swatch-copper);
    display: flex;
    align-items: center;
    justify-content: center;
}

.earn-item-pts {
    font-size: 24px;
    font-weight: 900;
    color: var(--swatch-copper);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.earn-item-label {
    font-size: 12px;
    color: var(--swatch-ink-mute);
}
/* ===== CSS Variables ===== */
:root {
    --ink-terra: var(--safa-primary);
    --ink-terra-veil: rgba(168, 119, 88, 0.082);
    --ink-terra-line: rgba(168, 119, 88, 0.2);
    --ink-terra-fog: rgba(168, 119, 88, 0.07);
    --ink-moss: rgb(91, 138, 90);
    --ink-moss-veil: rgba(91, 138, 90, 0.082);
    --ink-moss-line: rgba(91, 138, 90, 0.2);
    --ink-ash: rgb(107, 113, 117);
    --ink-ash-veil: rgba(107, 113, 117, 0.082);
    --ink-ash-line: rgba(107, 113, 117, 0.2);
    --ink-ember: rgb(181, 72, 72);
    --ink-ember-veil: rgba(181, 72, 72, 0.082);
    --ink-ember-line: rgba(181, 72, 72, 0.2);
    --ink-dark: rgb(31, 22, 18);
    --ink-dim: rgba(60, 40, 30, 0.6);
    --ink-faint: rgba(60, 40, 30, 0.45);
    --ink-seam: rgba(120, 90, 60, 0.12);
    --ink-seam-soft: rgba(120, 90, 60, 0.18);
    --ink-canvas: rgba(255, 255, 255, 0.7);
    --ink-canvas-light: rgba(255, 255, 255, 0.6);
    --rise-panel: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --rise-card: rgba(255, 255, 255, 0.8) 0px 1px 0px inset;
    --haze: blur(20px) saturate(180%);
    --r-wrap: 18px;
    --r-card: 16px;
    --r-row: 10px;
    --r-btn: 9px;
    --r-msg: 14px;
    --r-input: 10px;
    --r-pill: 99px;
    --face: 'pingAR', sans-serif;
}


/* ===== Page Shell ===== */
.support-shell {
    flex: 1 1 0%;
    overflow: hidden auto;
    font-family: var(--face);
}

.support-wrap {
    padding: 24px 32px 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ===== Top Bar ===== */
.sup-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--ink-dim);
    flex-wrap: wrap;
    gap: 12px;
}

.sup-trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sup-trail-tag {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--ink-terra-fog);
    color: var(--ink-terra);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.sup-trail-sep { opacity: 0.4; }

.sup-trail-page {
    color: var(--ink-dark);
    font-weight: 600;
}

.sup-topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ===== New Ticket Button ===== */
.new-ticket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--face);
    cursor: pointer;
    outline: none;
    transition: 0.18s;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: var(--r-btn);
    background: linear-gradient(135deg, var(--ink-terra) 0%, var(--ink-ash) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: rgba(168, 119, 88, 0.25) 0px 4px 16px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.new-ticket-btn-icon { display: inline-flex; }

/* ===== Two-Column Layout ===== */
.sup-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    align-items: start;
}

/* ===== Ticket Sidebar ===== */
.ticket-sidebar {
    background: var(--ink-canvas);
    border: 0.5px solid var(--ink-seam);
    border-radius: var(--r-card);
    padding: 6px;
    backdrop-filter: var(--haze);
    box-shadow: var(--rise-panel);
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.ticket-row {
    padding: 12px;
    border-radius: var(--r-row);
    cursor: pointer;
    margin-bottom: 4px;
    transition: 0.15s;
}

.ticket-row--active {
    background: var(--ink-terra-fog);
    border: 0.5px solid var(--ink-terra-line);
}

.ticket-row--idle {
    background: transparent;
    border: 0.5px solid transparent;
}

.ticket-row:last-child { margin-bottom: 0; }

.ticket-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.ticket-row-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-dark);
    line-height: 1.4;
}

.ticket-row-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ticket-row-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticket-row-id { direction: ltr; }

/* ===== Tag / Status Pills ===== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--face);
    white-space: nowrap;
}

.tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.tag--terra {
    background: var(--ink-terra-veil);
    color: var(--ink-terra);
    border: 0.5px solid var(--ink-terra-line);
}
.tag--terra .tag-dot {
    background: var(--ink-terra);
    box-shadow: var(--ink-terra) 0px 0px 6px;
}

.tag--moss {
    background: var(--ink-moss-veil);
    color: var(--ink-moss);
    border: 0.5px solid var(--ink-moss-line);
}
.tag--moss .tag-dot {
    background: var(--ink-moss);
    box-shadow: var(--ink-moss) 0px 0px 6px;
}

.tag--ash {
    background: var(--ink-ash-veil);
    color: var(--ink-ash);
    border: 0.5px solid var(--ink-ash-line);
}

.tag--ember {
    background: var(--ink-ember-veil);
    color: var(--ink-ember);
    border: 0.5px solid var(--ink-ember-line);
}
.tag--ember .tag-dot {
    background: var(--ink-ember);
    box-shadow: var(--ink-ember) 0px 0px 6px;
}

/* ===== Detail Column ===== */
.ticket-detail-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Ticket Header Card ===== */
.ticket-header-card {
    background: var(--ink-canvas);
    border: 0.5px solid var(--ink-seam);
    border-radius: var(--r-wrap);
    padding: 20px 24px;
    backdrop-filter: var(--haze);
    box-shadow: var(--rise-panel);
}

.ticket-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}

.ticket-header-body {
    flex: 1 1 0%;
    min-width: 0;
}

.ticket-header-eyebrow {
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.ticket-header-eyebrow span { direction: ltr; }

.ticket-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink-dark);
}

.ticket-header-tags {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ticket-header-date {
    font-size: 11px;
    color: var(--ink-dim);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ===== Close Ticket Button ===== */
.close-ticket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--face);
    cursor: pointer;
    outline: none;
    transition: 0.18s;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: var(--r-btn);
    background: rgba(255, 255, 255, 0.5);
    color: var(--ink-dark);
    border: 0.5px solid var(--ink-seam);
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.close-ticket-btn-icon { display: inline-flex; }

/* ===== Chat Card ===== */
.chat-card {
    background: var(--ink-canvas);
    border: 0.5px solid var(--ink-seam);
    border-radius: var(--r-wrap);
    padding: 20px 24px;
    backdrop-filter: var(--haze);
    box-shadow: var(--rise-panel);
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Chat Bubbles ===== */
.bubble-wrap--incoming { display: flex; justify-content: flex-start; }
.bubble-wrap--outgoing { display: flex; justify-content: flex-end; }

.bubble {
    max-width: 75%;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    border-radius: var(--r-msg);
}

.bubble--incoming {
    background: var(--ink-canvas);
    color: var(--ink-dark);
    border-radius: 14px 14px 14px 4px;
    border: 0.5px solid var(--ink-seam);
}

.bubble--outgoing {
    background: var(--ink-terra);
    color: #fff;
    border-radius: 14px 14px 4px;
    border: none;
}

.bubble-sender {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
    font-weight: 700;
}

.bubble-time {
    font-size: 10px;
    margin-top: 5px;
}

.bubble--incoming .bubble-time {
    color: var(--ink-faint);
    text-align: left;
}

.bubble--outgoing .bubble-time {
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}

/* ===== Reply Area ===== */
.reply-area {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 0.5px dashed var(--ink-seam);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.reply-input {
    flex: 1 1 0%;
    border: 0.5px solid var(--ink-seam-soft);
    border-radius: var(--r-input);
    padding: 9px 14px;
    font-size: 13px;
    font-family: var(--face);
    resize: none;
    outline: none;
    background: var(--ink-canvas-light);
    color: var(--ink-dark);
}

.reply-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--face);
    outline: none;
    transition: 0.18s;
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ink-terra) 0%, var(--ink-ash) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: rgba(168, 119, 88, 0.25) 0px 4px 16px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.reply-send-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.reply-send-btn-icon { display: inline-flex; }


/* ===== CSS Variables ===== */
:root {
    --vein-sand: var(--safa-primary);
    --vein-sand-film: rgba(168, 119, 88, 0.082);
    --vein-sand-wire: rgba(168, 119, 88, 0.2);
    --vein-sand-haze: rgba(168, 119, 88, 0.07);
    --vein-slate: rgb(107, 113, 117);
    --vein-slate-film: rgba(107, 113, 117, 0.082);
    --vein-slate-wire: rgba(107, 113, 117, 0.2);
    --vein-leaf: rgb(91, 138, 90);
    --vein-leaf-film: rgba(91, 138, 90, 0.12);
    --vein-leaf-wire: rgba(91, 138, 90, 0.333);
    --vein-char: rgb(58, 52, 49);
    --vein-char-deep: rgb(42, 36, 34);
    --vein-twig: rgba(120, 90, 60, 0.06);
    --vein-twig-icon: rgba(60, 40, 30, 0.55);
    --vein-twig-pending: rgba(120, 90, 60, 0.08);
    --vein-twig-pending-wire: rgba(120, 90, 60, 0.18);
    --vein-text: rgb(31, 22, 18);
    --vein-text-soft: rgba(60, 40, 30, 0.6);
    --vein-text-pale: rgba(60, 40, 30, 0.5);
    --vein-text-deep: rgba(20, 12, 8, 0.92);
    --vein-crack: rgba(120, 90, 60, 0.12);
    --vein-pane: rgba(255, 255, 255, 0.7);
    --vein-pane-half: rgba(255, 255, 255, 0.5);
    --lift-main: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --lift-card: rgba(255, 255, 255, 0.8) 0px 1px 0px inset;
    --mist: blur(20px) saturate(180%);
    --mist-light: blur(10px);
    --arc-hero: 20px;
    --arc-panel: 16px;
    --arc-btn: 9px;
    --arc-tab: 9px;
    --arc-icon: 8px;
    --arc-dot: 50%;
    --arc-pill: 99px;
    --font-body: 'pingAR', sans-serif;
}

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

body {
    font-family: var(--font-body);
    background: #f5efe8;
    margin: 0;
    padding: 0;
    direction: rtl;
}

/* ===== Page Shell ===== */
.account-shell {
    flex: 1 1 0%;
    overflow: hidden auto;
    font-family: var(--font-body);
}

.account-wrap {
    padding: 24px 32px 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ===== Top Bar ===== */
.acct-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--vein-text-soft);
    flex-wrap: wrap;
    gap: 12px;
}

.acct-trail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acct-trail-tag {
    padding: 4px 10px;
    border-radius: var(--arc-pill);
    background: var(--vein-sand-haze);
    color: var(--vein-sand);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.acct-trail-sep { opacity: 0.4; }

.acct-trail-page {
    color: var(--vein-text);
    font-weight: 600;
}

/* ===== Profile Hero ===== */
.profile-hero {
    background: var(--safa-muted);
    border: 0.5px solid var(--vein-crack);
    border-radius: var(--arc-hero);
    padding: 0;
    backdrop-filter: var(--mist);
    margin-bottom: 18px;
    overflow: hidden;
}

.profile-hero-banner {
    padding: 28px 32px;
    position: relative;
    background: linear-gradient(135deg, var(--safa-primary) 0%, var(--safa-muted) 100%);
}

.profile-hero-glow {
    position: absolute;
    top: -80px;
    inset-inline-start: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 119, 88, 0.2), transparent 70%);
    pointer-events: none;
}

.profile-hero-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.profile-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--vein-sand), var(--vein-slate));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    box-shadow: rgba(168, 119, 88, 0.333) 0px 12px 32px;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.profile-hero-info { flex: 1 1 0%; }

.profile-hero-role {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-hero-name {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.profile-hero-ids {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.profile-hero-ids strong {
    color: #fff;
    direction: ltr;
}

/* ===== Completion Ring ===== */
.completion-ring-wrap {
    text-align: center;
}

.completion-ring-inner {
    position: relative;
    width: 92px;
    height: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.completion-ring-svg {
    transform: rotate(-90deg);
}

.completion-ring-track {
    fill: none;
    stroke: rgb(255, 255, 255);
    stroke-width: 7;
}

.completion-ring-fill {
    fill: none;
    stroke: var(--safa-primary);
    stroke-width: 7;
    stroke-linecap: round;
    /*stroke-dasharray: 213.63 267.04;*/
    filter: drop-shadow(rgba(168, 119, 88, 0.4) 0px 0px 6px);
    transition: stroke-dasharray 1s;
}

.completion-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.completion-ring-time {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.completion-ring-unit {
    font-size: 8px;
    color: #fff;
    margin-top: 4px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.completion-ring-caption {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

/* ===== Profile Tab Bar ===== */
.profile-tabs {
    display: flex;
    padding: 4px;
    margin-bottom: 18px;
    width: fit-content;
    background: var(--vein-pane-half);
    border-radius: 12px;
    border: 0.5px solid var(--vein-crack);
    backdrop-filter: var(--mist-light);
}

.profile-tab {
    padding: 9px 18px;
    border-radius: var(--arc-tab);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}

.profile-tab--active {
    background: #fff;
    color: var(--vein-text);
    box-shadow: rgba(60, 40, 30, 0.08) 0px 2px 8px;
}

.profile-tab--active .profile-tab-icon { color: var(--vein-sand); }

.profile-tab--idle {
    background: transparent;
    color: var(--vein-text-soft);
    box-shadow: none;
}

.profile-tab--idle .profile-tab-icon { color: var(--vein-text-soft); }

.profile-tab-icon { display: inline-flex; }

/* ===== Content Grid ===== */
.profile-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
}
.profile-grid.panel
{
    display: block;
}
/* ===== Data Panel ===== */
.data-panel {
    background: var(--vein-pane);
    border: 0.5px solid var(--vein-crack);
    border-radius: var(--arc-panel);
    padding: 18px 20px;
    backdrop-filter: var(--mist);
    box-shadow: var(--lift-main);
}

.data-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--vein-crack);
}

.data-panel-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.data-panel-icon--sand {
    background: var(--vein-sand-film);
    color: var(--vein-sand);
}

.data-panel-icon--slate {
    background: var(--vein-slate-film);
    color: var(--vein-slate);
}

.data-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--vein-text);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

.data-panel-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-body);
    cursor: pointer;
    outline: none;
    transition: 0.18s;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: var(--arc-btn);
    background: var(--vein-pane-half);
    color: var(--vein-text);
    border: 0.5px solid var(--vein-crack);
    font-weight: 600;
    backdrop-filter: var(--mist-light);
}

.data-panel-edit-icon { display: inline-flex; }

/* ===== Field Row ===== */
.field-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
}

.field-row-divider {
    height: 0.5px;
    background: var(--vein-crack);
    margin: 4px 0;
}

.field-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--arc-icon);
    flex-shrink: 0;
    background: var(--safa-primary-light);
    color: var(--safa-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.field-body { flex: 1 1 0%; min-width: 0; }

.field-label {
    font-size: 10.5px;
    color: var(--vein-text-pale);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 500;
}

.field-value {
    font-size: 13.5px;
    color: var(--vein-text-deep);
    font-weight: 500;
    word-break: break-word;
}

.field-value--ltr {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    display: inline-block;
}

/* ===== Completion Panel ===== */
.completion-panel {
    background: var(--vein-pane);
    border: 0.5px solid var(--vein-crack);
    border-radius: var(--arc-panel);
    padding: 18px 20px;
    backdrop-filter: var(--mist);
    box-shadow: var(--lift-main);
}

.completion-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 0.5px dashed var(--vein-crack);
}

.completion-panel-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--vein-slate-film);
    color: var(--vein-slate);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.completion-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--vein-text);
    letter-spacing: 0.01em;
    flex: 1 1 0%;
}

/* ===== Progress Bar ===== */
.progress-row {
    margin-bottom: 14px;
}

.progress-row-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.progress-row-label-text {
    font-size: 12px;
    color: var(--vein-text-soft);
}

.progress-row-pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--vein-sand);
    font-variant-numeric: tabular-nums;
}

.progress-track {
    height: 6px;
    background: var(--vein-crack);
    border-radius: var(--arc-pill);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vein-sand), var(--vein-slate));
    border-radius: var(--arc-pill);
    transition: width 1s;
}

/* ===== Checklist ===== */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.checklist-mark {
    width: 22px;
    height: 22px;
    border-radius: var(--arc-dot);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist-mark--done {
    background: var(--vein-leaf-film);
    border: 1px solid var(--vein-leaf-wire);
    color: var(--vein-leaf);
}

.checklist-mark--pending {
    background: var(--vein-twig-pending);
    border: 1px solid var(--vein-twig-pending-wire);
}

.checklist-label {
    font-size: 12.5px;
    flex: 1 1 0%;
}

.checklist-label--done {
    color: var(--vein-text);
    font-weight: 600;
}

.checklist-label--pending {
    color: var(--vein-text-soft);
    font-weight: 400;
}

.checklist-flag {
    font-size: 10.5px;
    color: var(--vein-sand);
    font-weight: 700;
}
#page-opportunities .filter-tab:hover
{
    color: var(--vein-sand);
}
#page-opportunities .cta--primary-sm:hover
{
    color: #936a51;
}


/* ===== CSS Variables ===== */
:root {
    --petal-sand: var(--safa-primary);
    --petal-sand-film: var(--safa-muted);
    --petal-sand-wire: var(--safa-muted);
    --petal-sand-mist: rgba(168, 119, 88, 0.024);
    --petal-sand-glow: var(--safa-muted);
    --petal-grove: rgb(91, 138, 90);
    --petal-grove-film: rgba(91, 138, 90, 0.12);
    --petal-grove-mist: rgba(91, 138, 90, 0.05);
    --petal-grove-wire: rgba(91, 138, 90, 0.25);
    --petal-grove-deep: rgb(61, 104, 64);
    --petal-grove-bg: rgba(91, 138, 90, 0.08);
    --petal-grove-border: rgba(91, 138, 90, 0.3);
    --petal-ash: rgb(107, 113, 117);
    --petal-text: rgb(31, 22, 18);
    --petal-text-dim: var(--safa-muted);
    --petal-text-ghost: var(--safa-muted);
    --petal-seam: rgba(120, 90, 60, 0.12);
    --petal-seam-dash: rgba(120, 90, 60, 0.18);
    --petal-canvas: rgba(255, 255, 255, 0.7);
    --petal-canvas-pale: rgba(255, 255, 255, 0.4);
    --float-panel: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(60, 40, 30, 0.04) 0px 1px 3px;
    --blur-panel: blur(20px) saturate(180%);
    --blur-lite: blur(10px);
    --r-wrap: 16px;
    --r-row: 12px;
    --r-icon: 10px;
    --r-btn: 9px;
    --r-pill: 99px;
    --face: 'Tajawal', sans-serif;
}


/* ===== Shared Panel Shell ===== */
.sub-panel {
    background: var(--petal-canvas);
    border: 0.5px solid var(--petal-seam);
    border-radius: var(--r-wrap);
    padding: 24px 28px;
    backdrop-filter: var(--blur-panel);
    box-shadow: var(--float-panel);
    transition: 0.22s;
    cursor: default;
}

.sub-panel-title {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 800;
    color: var(--petal-text);
}

/* ============================================================
   PANEL 1 — DOCUMENTS
   ============================================================ */

.docs-panel { max-width: 680px; }

.docs-panel .sub-panel-title { margin-bottom: 20px; }

.docs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--r-row);
}

.doc-item--verified {
    background: var(--petal-grove-mist);
    border: 0.5px solid var(--petal-grove-wire);
}

.doc-item--pending {
    background: var(--petal-sand-mist);
    border: 0.5px solid var(--petal-sand-wire);
}

.doc-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-item-icon--verified {
    background: var(--petal-grove-film);
    color: var(--petal-grove);
}

.doc-item-icon--pending {
    background: var(--petal-sand-film);
    color: var(--petal-sand);
}

.doc-item-body { flex: 1 1 0%; }

.doc-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--petal-text);
}

.doc-item-status {
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 2px;
}

.doc-item-status--verified { color: var(--petal-grove); }
.doc-item-status--pending  { color: var(--petal-sand); }

.doc-item-check { color: var(--petal-grove); }

.doc-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--face);
    cursor: pointer;
    outline: none;
    transition: 0.18s;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: var(--r-btn);
    background: linear-gradient(135deg, var(--petal-sand) 0%, var(--petal-ash) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    white-space: nowrap;
}

.doc-upload-btn-icon { display: inline-flex; }

/* ============================================================
   PANEL 2 — IBAN
   ============================================================ */

.iban-panel { max-width: 560px; }

.iban-panel .sub-panel-title { margin-bottom: 4px; }

.iban-subtitle {
    margin: 0 0 20px;
    font-size: 12.5px;
    color: var(--petal-text-dim);
}

.iban-box {
    padding: 16px 18px;
    border-radius: var(--r-row);
    margin-bottom: 18px;
    background: var(--petal-sand-mist);
    border: 0.5px solid var(--petal-sand-wire);
}

.iban-box-label {
    font-size: 10.5px;
    color: var(--petal-text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}

.iban-number {
    font-size: 18px;
    font-weight: 800;
    color: var(--petal-text);
    font-family: monospace;
    letter-spacing: 1px;
    direction: ltr;
    text-align: right;
}

.iban-verified-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.iban-verified-icon { color: var(--petal-grove); display: inline-flex; }

.iban-verified-text {
    font-size: 11.5px;
    color: var(--petal-grove-deep);
    font-weight: 700;
}

.iban-upload-section {}

.iban-upload-label {
    font-size: 10.5px;
    color: var(--petal-text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.iban-dropzone {
    border: 1px dashed var(--petal-seam-dash);
    border-radius: var(--r-row);
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--petal-canvas-pale);
    transition: 0.2s;
    backdrop-filter: var(--blur-lite);
}

.iban-dropzone:hover {
    background: rgba(168, 119, 88, 0.03);
    border-color: rgba(168, 119, 88, 0.3);
}

.iban-dropzone input[type="file"] { display: none; }

.iban-dropzone-icon {
    margin-bottom: 6px;
    display: inline-flex;
    color: var(--petal-sand);
}

.iban-dropzone-main {
    margin: 4px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--petal-text);
}

.iban-dropzone-hint {
    margin: 0;
    font-size: 11px;
    color: var(--petal-text-ghost);
}

/* ============================================================
   PANEL 3 — PRIVACY
   ============================================================ */

.privacy-panel { max-width: 680px; }

.privacy-panel .sub-panel-title { margin-bottom: 16px; }

.privacy-scroll {
    background: var(--petal-sand-mist);
    border-radius: var(--r-row);
    padding: 20px 22px;
    margin-bottom: 18px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 13px;
    color: var(--petal-text);
    line-height: 1.9;
    border: 0.5px solid var(--petal-seam);
}

.privacy-clause {
    margin: 0 0 12px;
}

.privacy-clause:last-child { margin-bottom: 0; }

.privacy-clause-title { color: var(--petal-sand); }

.privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 18px;
}

.privacy-consent-check {
    margin-top: 3px;
    accent-color: var(--petal-sand);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.privacy-consent-text {
    font-size: 13.5px;
    color: var(--petal-text);
    line-height: 1.7;
}

.privacy-confirmed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 11px;
    background: var(--petal-grove-bg);
    border: 0.5px solid var(--petal-grove-border);
}

.privacy-confirmed-icon { color: var(--petal-grove); }

.privacy-confirmed-text {
    font-size: 13px;
    color: var(--petal-grove-deep);
    font-weight: 600;
}


.properties-loader{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(4px);
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
}

.loader-content{
    text-align:center;
}

.building-loader{
    display:flex;
    gap:8px;
    align-items:flex-end;
    justify-content:center;
    height:60px;
}

.building-loader span{
    width:18px;
    border-radius:4px 4px 0 0;
    background:linear-gradient(
        180deg,
        var(--safa-primary),
        var(--safa-primary)
    );
    animation:buildingWave 1s infinite ease-in-out;
}

.building-loader span:nth-child(1){
    height:25px;
    animation-delay:0s;
}

.building-loader span:nth-child(2){
    height:45px;
    animation-delay:.15s;
}

.building-loader span:nth-child(3){
    height:35px;
    animation-delay:.3s;
}

.loader-text{
    margin-top:14px;
    color:#8a6a53;
    font-size:14px;
    font-weight:600;
}

@keyframes buildingWave{
    0%,100%{
        transform:translateY(0);
        opacity:.7;
    }
    50%{
        transform:translateY(-10px);
        opacity:1;
    }
}

.skeleton-card{
    border-radius:20px;
    overflow:hidden;
    background:#fff;
}

.skeleton-image,
.skeleton-line{
    position:relative;
    overflow:hidden;
}

.skeleton-image{
    height:180px;
    margin-bottom:15px;
    background:#eee;
}

.skeleton-line{
    height:14px;
    background:#eee;
    margin:10px;
    border-radius:10px;
}

.skeleton-line.short{
    width:60%;
}

.skeleton-image::after,
.skeleton-line::after{
    content:'';
    position:absolute;
    top:0;
    left:-150%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );
    animation:shimmer 1.2s infinite;
}

@keyframes shimmer{
    100%{
        left:150%;
    }
}

.empty-properties-card{
    grid-column:1/-1;
    background:#fff;
    border:1px solid #eee5df;
    border-radius:24px;
    padding:60px 30px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.04);
}

.empty-properties-icon{
    width:100px;
    height:100px;
    margin:0 auto 20px;
    border-radius:50%;
    background:var(--safa-primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--safa-primary);
}

.empty-properties-card h4{
    margin-bottom:10px;
    font-weight:700;
    color:#2f2f2f;
}

.empty-properties-card p{
    max-width:500px;
    margin:auto;
    color:#7b7b7b;
    font-size:14px;
    line-height:1.8;
}

.empty-reset-btn{
    margin-top:24px;
    border:none;
    border-radius:999px;
    padding:12px 28px;
    color:#fff;
    font-weight:600;
    background:linear-gradient(
        135deg,
        var(--safa-primary),
        var(--safa-primary)
    );
    transition:.3s;
}

.empty-reset-btn:hover{
    transform:translateY(-2px);
}


.pagination-box .pagination
{
    justify-content: center;
}
.pagination-box .page-item.active .page-link {
    background-color: var(--safa-primary);
    border-color: var(--safa-primary);
}
.pagination-box .page-link {
    color: var(--safa-primary);
    padding: 10px 20px;
    border-radius: 5px;
    margin: 0 7px;
}
.cta--primary:hover
{
    color: var(--safa-primary-light);
}


/* ─── شجرة الوسطاء — page-scoped (relies on safa.css tokens) ─────────── */
.net-shell { padding: 22px 26px 60px; max-width: 1180px; margin-inline: auto; }
.net-trail { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--safa-muted); margin-bottom:18px; }
.net-trail-tag { padding:4px 10px; border-radius:99px; background:rgba(168,119,88,.12); color:var(--safa-primary); font-weight:600; font-size:11px; }
.net-trail-page { color:var(--safa-ink); font-weight:600; }
.net-trail-sep { opacity:.4; }

.ref-hero { border-radius:20px; overflow:hidden; box-shadow:0 18px 44px rgba(60,40,30,.14); margin-bottom:18px; }
.ref-hero-banner { position:relative; background:var(--safa-grad); padding:30px 34px; color:#fff; }
.ref-hero-orb { position:absolute; inset-inline-start:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.ref-hero-inner { position:relative; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.ref-hero-eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.82; font-weight:700; }
.ref-hero-title { font-size:24px; font-weight:900; margin:4px 0 6px; }
.ref-hero-sub { font-size:13px; opacity:.85; max-width:430px; line-height:1.7; }
.ref-code-box { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:16px; padding:16px 18px; min-width:250px; }
.ref-code-label { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; font-weight:700; margin-bottom:6px; }
.ref-code-value { font-family:'Courier New',monospace; font-size:26px; font-weight:800; letter-spacing:.12em; direction:ltr; }
.ref-btns { display:flex; gap:8px; margin-top:12px; }
.ref-btn { flex:1; border:none; border-radius:10px; padding:9px 12px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all .15s; }
.ref-btn--solid { background:#fff; color:var(--safa-primary); }
.ref-btn--ghost { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); }
.ref-btn.copied { background:#5b8a5a; color:#fff; }
.ref-kpis { display:grid; grid-template-columns:repeat(3,1fr); background:var(--safa-card); }
.ref-kpi { padding:16px 18px; text-align:center; border-inline-start:0.5px solid var(--safa-hairline); }
.ref-kpi:first-child { border-inline-start:0; }
.ref-kpi-num { font-size:22px; font-weight:900; color:var(--safa-ink); }
.ref-kpi-num small { font-size:12px; font-weight:600; color:var(--safa-muted); }
.ref-kpi-label { font-size:11.5px; color:var(--safa-muted); margin-top:2px; }

.parent-card { display:flex; align-items:center; gap:14px; background:var(--safa-card); border:0.5px solid var(--safa-hairline); border-radius:16px; padding:14px 18px; margin-bottom:22px; }
.parent-badge { font-size:10.5px; font-weight:700; color:var(--safa-primary); background:rgba(168,119,88,.1); border:0.5px solid rgba(168,119,88,.3); border-radius:99px; padding:4px 12px; white-space:nowrap; }
.parent-none { color:var(--safa-muted); font-size:13px; }

.net-sec-head { display:flex; align-items:center; gap:10px; margin:6px 0 14px; }
.net-sec-icon { width:34px; height:34px; border-radius:10px; background:rgba(168,119,88,.12); color:var(--safa-primary); display:flex; align-items:center; justify-content:center; }
.net-sec-title { font-size:16px; font-weight:800; }
.net-sec-sub { font-size:12px; color:var(--safa-muted); }

.orgwrap { overflow-x:auto; padding:10px 4px 24px; }
.orgtree { text-align:center; white-space:nowrap; }
.orgtree ul { position:relative; padding-top:26px; padding-right: 0; margin:0; display:inline-flex; justify-content:center; list-style:none; }
.orgtree li { list-style:none; position:relative; padding:26px 10px 0; display:flex; flex-direction:column; align-items:center; }
.orgtree li::before, .orgtree li::after { content:''; position:absolute; top:0; right:50%; border-top:2px solid var(--safa-hairline); width:50%; height:26px; }
.orgtree li::after { right:auto; left:50%; border-left:2px solid var(--safa-hairline); }
.orgtree li:only-child::after, .orgtree li:only-child::before { display:none; }
.orgtree li:only-child { padding-top:0; }
.orgtree li:first-child::before, .orgtree li:last-child::after { border:0 none; }
.orgtree li:last-child::before { border-right:2px solid var(--safa-hairline); border-radius:0 8px 0 0; }
.orgtree li:first-child::after { border-radius:8px 0 0 0; }
.orgtree ul ul::before { content:''; position:absolute; top:0; left:50%; border-left:2px solid var(--safa-hairline); width:0; height:26px; }
.orgtree > ul { padding-top:0; }
.orgtree > ul > li::before, .orgtree > ul > li::after { display:none; }

.node { display:inline-flex; flex-direction:column; align-items:center; gap:8px; background:var(--safa-card); border:0.5px solid var(--safa-hairline); border-radius:16px; padding:14px 16px; min-width:220px; box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 6px 16px rgba(60,40,30,.05); transition:all .18s; position:relative; }
.node:hover { transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px rgba(60,40,30,.1); }
.node--me { border:2px solid #ececec;  }
.node-avatar { width:46px; height:46px; border-radius:50%; background:var(--safa-grad); color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; }
.node-avatar--bronze { background:var(--safa-muted); }
.node-avatar--bronze-light { background:var(--safa-grad); }
.node-avatar--silver { background:linear-gradient(135deg,#6b7175,#4a4f53); }
.node-avatar--gold   { background:linear-gradient(135deg,#b89568,#8a6a45); }
.node-name { font-size:13.5px; font-weight:800; line-height:1.2; }
.node-num { font-size:10.5px; color:var(--safa-muted); direction:ltr; }
.node-tier { font-size:10px; font-weight:700; padding:2px 10px; border-radius:99px; }
.node-tier--bronze { color:#8a5d3f; background:rgba(168,119,88,.15); }
.node-tier--silver { color:#4a4f53; background:rgba(107,113,117,.16); }
.node-tier--gold   { color:#8a6a45; background:rgba(184,149,104,.22); }
.node-stats { display:flex; gap:12px; padding:8px 0; width:100%; justify-content:space-around; }
.node-stat { text-align:center; }
.node-stat-num { font-size:17px; font-weight:800; color:var(--safa-ink); }
.node-stat-lbl { font-size:9.5px; color:var(--safa-muted); }
.node-earn { font-size:11px; font-weight:800; color:#3d6840; background:rgba(91,138,90,.1); border-radius:8px; padding:3px 10px; white-space:nowrap; }
.node-toggle { position:absolute; bottom:-12px; inset-inline-start:50%; transform:translateX(50%); width:24px; height:24px; border-radius:50%; background:#fff; border:1.5px solid var(--safa-hairline); color:var(--safa-primary); cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:800; z-index:3; box-shadow:0 3px 8px rgba(60,40,30,.14); }
.orgtree li.collapsed > ul { display:none; }

.net-note { display:flex; gap:12px; align-items:flex-start; background:rgba(168,119,88,.06); border:0.5px solid rgba(168,119,88,.2); border-radius:14px; padding:14px 16px; margin-top:20px; font-size:12.5px; line-height:1.75; }
.net-note svg { flex-shrink:0; color:var(--safa-primary); margin-top:2px; }
.levels-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.level-pill { font-size:11.5px; font-weight:700; background:#fff; border:0.5px solid var(--safa-hairline); border-radius:99px; padding:5px 13px; }
.level-pill b { color:var(--safa-primary); }
@media (max-width:768px){ .ref-hero-inner{ flex-direction:column; align-items:stretch } .ref-code-box{ min-width:0 } }

.rtl .orgtree li::before,
.rtl .orgtree li::after
{
    transform: scaleX(-1);
}
.rtl .orgtree li::after
{
    left: 0;
}
.rtl .orgtree li::before
{
    right: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SAFA — Gradient Theme Enhancement (buttons / headings / numbers / cards)
   Palette: #052139 → #8a93f7 → #b6bcfc → #cdd0fd
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --sg-1: #052139;
    --sg-2: #8a93f7;
    --sg-3: #b6bcfc;
    --sg-4: #cdd0fd;
    --sg-brand:       linear-gradient(120deg, rgb(0 5 247) 0%, rgb(128 115 226) 45%, rgb(64 0 255) 100%);
    --sg-brand-flow:  linear-gradient(120deg, rgb(0 5 247) 0%, rgb(128 115 226) 45%, rgb(64 0 255) 100%);
    --sg-soft:       linear-gradient(135deg, var(--sg-2) 0%, var(--sg-3) 55%, var(--sg-4) 100%);
    --sg-text:       linear-gradient(120deg, rgb(0 5 247) 0%, rgb(128 115 226) 45%, rgb(64 0 255) 100%);
    --sg-number:     linear-gradient(120deg, rgb(0 5 247) 0%, rgb(128 115 226) 45%, rgb(64 0 255) 100%);
    --sg-ring:       linear-gradient(120deg, rgb(0 5 247) 0%, rgb(128 115 226) 45%, rgb(64 0 255) 100%);
}

/* ── Buttons ── everything gets a gradient, intensity scaled to its role ── */
.btn,
.btn-primary,
.btn.btn-primary,
#sidebar-toggle {
    background: var(--sg-brand-flow) !important;
    background-size: 200% auto !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(5, 33, 57, .22), 0 1px 0 rgba(255, 255, 255, .18) inset !important;
    transition: background-position .5s ease, box-shadow .25s ease, transform .2s ease !important;
}
.btn:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
    background-position: right center !important;
    box-shadow: 0 10px 26px rgba(5, 33, 57, .32) !important;
    transform: translateY(-1px);
}
.btn-secondary {
    background: linear-gradient(135deg, rgba(138, 147, 247, .12), rgba(205, 208, 253, .18)) !important;
    border: 1px solid rgba(138, 147, 247, .35) !important;
    color: var(--sg-1) !important;
}
.btn-outline {
    background: linear-gradient(135deg, rgba(138, 147, 247, .06), rgba(205, 208, 253, .1)) !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
    position: relative;
    color: var(--sg-1) !important;
}
.btn-outline::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--sg-soft);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ── Headings / titles ── */
.welcome-heading,
.glass-card-title,
.breadcrumb-current,
.safa-card .card-section-title span,
h1:not(.text-white), h2:not(.text-white), h3:not(.text-white) {
    background: var(--sg-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.welcome-heading .gradient-text {
    background: var(--sg-brand-flow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Numbers / stats ── */
.stat-card-number,
.progress-stats-value,
.progress-ring-days,
.conversion-pct,
.conversion-stat-value,
.node-stat-num {
    background: var(--sg-number) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800;
}
.conversion-pct span,
.conversion-stat-value span { -webkit-text-fill-color: initial; color: var(--color-text-muted); background: none; }
.progress-ring-fill { stroke: var(--sg-2); }

/* ── Cards ── */
.stat-card,
.glass-card,
.welcome-card {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card::before{
    content: '';
    position: absolute;
    inset-inline-start: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--sg-brand-flow);
    background-size: 200% auto;
}
.stat-card:hover,
.glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(138, 147, 247, .22) !important;
}
.stat-card-accent--brand,
.stat-card-accent--silver {
    background: var(--sg-brand) !important;
    box-shadow: 0 0 12px rgba(138, 147, 247, .65) !important;
}
.client-avatar {
    background: var(--sg-brand) !important;
}

.bg-main-light
{
    background: #f0effd;
}
.total_deals
{
    display: flex;
    flex-direction: column;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 10px;
}
.total_deals strong
{
    font-size: 17px;
    color: var(--safa-primary);
}
.node-stats .direct_amount
{
    padding: 5px 20px;
    border-radius: 10px;
    color: var(--safa-primary);
    font-weight: bold;
}

.form_registered{
    display:flex;justify-content:center;padding:24px;
    direction:rtl;
}
.form_registered .fr-card{
    width:100%;max-width:720px;border-radius:28px;padding:56px 35px 40px;
    background:linear-gradient(160deg,rgba(30,40,92,.72),rgba(18,25,64,.86));
    border:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    box-shadow:0 40px 90px -30px rgba(4,8,30,.85);
}
.form_registered .content{display:flex;flex-direction:column;align-items:center;text-align:center}

/* أيقونة التحقق */
.fr-check{position:relative;width:104px;height:104px;display:grid;place-items:center;
    animation:frPop .5s cubic-bezier(.2,.9,.3,1.4) both}
.fr-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(45,212,150,.28);
    animation:frRing 2.6s ease-out infinite}
.fr-halo{position:absolute;inset:8px;border-radius:50%;background:rgba(45,212,150,.14);
    border:1px solid rgba(45,212,150,.35)}
.fr-badge{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(150deg,#34e0a1,#12b981);
    box-shadow:0 14px 34px -10px rgba(18,185,129,.75)}
.fr-badge svg{width:34px;height:34px}
.fr-badge path{stroke-dasharray:34;stroke-dashoffset:34;animation:frTick .5s .32s ease-out forwards}

/* شارة الحالة */
.fr-status{margin-top:28px;display:inline-flex;align-items:center;gap:9px;padding:7px 16px;
    border-radius:999px;font-size:13px;font-weight:500;color:#b9c2ff;
    background:rgba(124,138,255,.14);border:1px solid rgba(124,138,255,.32);
    animation:frRise .5s .1s both}
.fr-status i{width:7px;height:7px;border-radius:50%;background:#8b9bff;
    box-shadow:0 0 0 4px rgba(139,155,255,.18)}

.form_registered h3{margin:18px 0 0;font-size:34px;line-height:1.35;font-weight:700;color:#fff;
    animation:frRise .5s .16s both}
.form_registered .content p{margin:14px 0 0;max-width:460px;font-size:16px;line-height:1.85;
    color:rgba(226,231,255,.68);text-wrap:pretty;animation:frRise .5s .22s both}

/* صفوف المعلومات */
.fr-row{margin-top:14px;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
    animation:frRise .5s .36s both}
.fr-row:first-of-type{margin-top:36px}
.fr-row small{font-size:14.5px;line-height:1.7;color:rgba(226,231,255,.72)}
.fr-row .fr-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
    background:rgba(139,155,255,.16);color:#a5b0ff}
.fr-row .fr-ico svg{width:19px;height:19px}
.fr-row--green{background:rgba(45,212,150,.08);border-color:rgba(45,212,150,.24);
    animation-delay:.3s}
.fr-row--green small{color:#bff0dc}
.fr-row--green .fr-ico{background:rgba(45,212,150,.16);color:#34e0a1}

/* التذييل */
.fr-foot{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:13.5px;color:rgba(226,231,255,.5);animation:frRise .5s .42s both}
.fr-foot a{color:#a5b4ff;font-weight:600;text-decoration:none}
.fr-foot a:hover{color:#c7d0ff}
.fr-btn{padding:12px 26px;border-radius:999px;font-size:14.5px;font-weight:600;
    color:#0e1436!important;background:linear-gradient(135deg,#c3caff,#8b9bff);
    box-shadow:0 12px 28px -12px rgba(139,155,255,.9);transition:filter .2s}
.fr-btn:hover{filter:brightness(1.06)}

@keyframes frRing{0%{transform:scale(.9);opacity:.55}70%,100%{transform:scale(1.35);opacity:0}}
@keyframes frPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes frTick{to{stroke-dashoffset:0}}
@keyframes frRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:576px){
    .form_registered .fr-card{padding:40px 22px 28px}
    .form_registered h3{font-size:26px}
    .fr-foot{justify-content:center;text-align:center}
}


/* ── Deal Outcome (win/lost) ───────────────────────────────── */
:root {
    --clr-win: rgb(91, 138, 90);
    --clr-win-wash: rgba(91, 138, 90, 0.082);
    --clr-win-edge: rgba(91, 138, 90, 0.2);
    --clr-lost: #b54848;
    --clr-lost-wash: rgba(181, 72, 72, 0.1);
    --clr-lost-edge: rgba(181, 72, 72, 0.25);
}

/* Sidebar avatar jewel */
.lead-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.lead-outcome-jewel {
    position: absolute;
    bottom: -2px;
    inset-inline-end: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    color: #fff;
}
.lead-outcome-jewel svg {
    width: 8px;
    height: 8px;
}
.lead-outcome-jewel--win { background: var(--clr-win); }
.lead-outcome-jewel--lost { background: var(--clr-lost); }

/* Sidebar outcome pill */
.lead-outcome-row {
    margin: 4px 0 2px;
}
.outcome-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--rounding-tag);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
}
.outcome-pill svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}
.outcome-pill--win {
    background: var(--clr-win-wash);
    color: var(--clr-win);
    border: 0.5px solid var(--clr-win-edge);
}
.outcome-pill--lost {
    background: var(--clr-lost-wash);
    color: var(--clr-lost);
    border: 0.5px solid var(--clr-lost-edge);
}

/* Detail column outcome banner */
.outcome-banner {
    border-radius: var(--rounding-panel);
    padding: 16px 20px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 0.5px solid;
}
.outcome-banner--win {
    background: var(--clr-win-wash);
    border-color: var(--clr-win-edge);
}
.outcome-banner--lost {
    background: var(--clr-lost-wash);
    border-color: var(--clr-lost-edge);
}
.outcome-banner-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.outcome-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.outcome-banner--win .outcome-badge-icon {
    background: var(--clr-win);
    box-shadow: 0 4px 14px rgba(91, 138, 90, .35);
}
.outcome-banner--lost .outcome-badge-icon {
    background: var(--clr-lost);
    box-shadow: 0 4px 14px rgba(181, 72, 72, .35);
}
.outcome-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.outcome-badge-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(60, 40, 30, .5);
    font-weight: 600;
}
.outcome-badge-label {
    font-size: 18px;
    font-weight: 800;
}
.outcome-banner--win .outcome-badge-label { color: var(--clr-win); }
.outcome-banner--lost .outcome-badge-label { color: var(--clr-lost); }

.outcome-reason {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, .55);
    border: 0.5px solid var(--clr-lost-edge);
    border-radius: 12px;
    padding: 14px 16px;
}
.outcome-reason-quote {
    font-size: 32px;
    line-height: .6;
    font-weight: 800;
    color: var(--clr-lost-edge);
    font-family: Georgia, serif;
    flex-shrink: 0;
}
.outcome-reason-body {
    flex: 1;
    min-width: 0;
}
.outcome-reason-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(60, 40, 30, .5);
    font-weight: 600;
    margin-bottom: 4px;
}
.outcome-reason-text {
    font-size: 13.5px;
    color: var(--clr-ink-dim);
    line-height: 1.6;
    white-space: pre-line;
    word-break: break-word;
}