/* ── Advanced Alpha / AARC Global Styles ───────────────────── */

:root {
    /* Brand palette */
    --aa-navy-dark:   #071B35;
    --aa-navy:        #123B63;
    --aa-navy-mid:    #1A4A7A;
    --aa-blue:        #1F86D9;
    --aa-blue-light:  #36C3FF;
    --aa-gold:        #DCA73A;
    --aa-gold-light:  #F5C74D;
    --aa-gold-pale:   #FFF4E0;
    --aa-green:       #29B67A;

    /* Semantic aliases (used by components) */
    --aarc-primary:   #1F86D9;
    --aarc-secondary: #DCA73A;
    --aarc-success:   #29B67A;
    --aarc-warning:   #F5C74D;
    --aarc-error:     #C62828;
    --aarc-bg:        #F2F4F8;
    --aarc-surface:   #FFFFFF;
    --aarc-radius-xl: 16px;
    --aarc-shadow-sm: 0 1px 4px rgba(7,27,53,0.10);
    --aarc-shadow-md: 0 4px 20px rgba(7,27,53,0.15);
    --aarc-shadow-lg: 0 8px 40px rgba(7,27,53,0.22);
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--aarc-bg);
    color: #1A1A2E;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

/* ── Utility ── */
.fw-bold   { font-weight: 700 !important; }
.fw-medium { font-weight: 500 !important; }
.rounded-xl { border-radius: var(--aarc-radius-xl) !important; }
.h-100 { height: 100% !important; }

/* ── Mobile-first layout ── */
@media (max-width: 959px) {
    .mud-main-content {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Cards ── */
.mud-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.mud-card:hover {
    box-shadow: var(--aarc-shadow-md) !important;
    transform: translateY(-2px);
}

/* ── Status badge colors ── */
.status-pending    { background-color: #FFF3E0; color: #E65100; }
.status-available  { background-color: #E8F5E9; color: #2E7D32; }
.status-paid       { background-color: #E3F2FD; color: #1F86D9; }
.status-reversed   { background-color: #FCE4EC; color: #C62828; }
.status-blocked    { background-color: #FCE4EC; color: #C62828; }

/* ── Bottom nav bar ── */
.mud-bottom-navigation {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.10) !important;
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* ── Loading spinner ── */
#app > div {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Blazor error UI ── */
#blazor-error-ui {
    background: #ffeded;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Growth Center tree ── */
.gc-slot {
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
}
.gc-slot--filled { background: var(--aa-blue); color: white; }
.gc-slot--empty  { background: #EAF4FF; color: var(--aa-blue); border: 2px dashed var(--aa-blue); }

/* ── Responsive table → card on mobile ── */
@media (max-width: 599px) {
    .responsive-table-row {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 8px;
        background: white;
    }
    .responsive-table-row td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: #666;
        display: block;
    }
}

/* ── Referral link input ── */
.referral-input input {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/* ── Home page hero ── */
.aa-hero {
    position: relative;
    background: var(--aa-navy-dark);
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
}
.aa-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/images/hero-learning.png');
    background-size: cover;
    background-position: center 30%;
    opacity: 0.18;
}
.aa-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7,27,53,0.95) 0%, rgba(18,59,99,0.80) 60%, rgba(31,134,217,0.30) 100%);
}
.aa-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4rem 1rem 3rem;
}
.aa-gold-text {
    color: var(--aa-gold) !important;
}
.aa-gold-badge {
    display: inline-block;
    background: rgba(220,167,58,0.15);
    border: 1px solid rgba(220,167,58,0.40);
    color: var(--aa-gold-light);
    border-radius: 100px;
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.aa-btn-gold {
    background: linear-gradient(135deg, var(--aa-gold) 0%, var(--aa-gold-light) 100%) !important;
    color: var(--aa-navy-dark) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(220,167,58,0.40) !important;
    border: none !important;
}
.aa-btn-gold:hover {
    box-shadow: 0 6px 24px rgba(220,167,58,0.55) !important;
    transform: translateY(-1px);
}
.aa-btn-outline-white {
    border: 2px solid rgba(255,255,255,0.50) !important;
    color: white !important;
    background: transparent !important;
}
.aa-btn-outline-white:hover {
    border-color: rgba(255,255,255,0.90) !important;
    background: rgba(255,255,255,0.08) !important;
}

/* ── Feature cards ── */
.aa-feature-card {
    background: #FFFFFF;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.75rem 1.5rem;
    height: 100%;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.aa-feature-card:hover {
    box-shadow: var(--aarc-shadow-md);
    transform: translateY(-3px);
    border-color: rgba(220,167,58,0.35);
}
.aa-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #EAF4FF 0%, #D7E8F8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.aa-feature-icon .mud-icon-root {
    color: var(--aa-blue) !important;
    font-size: 1.6rem !important;
}

/* ── Stats strip ── */
.aa-stats-strip {
    background: var(--aa-navy-dark);
    padding: 2.5rem 1rem;
}
.aa-stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--aa-gold);
    line-height: 1;
}
.aa-stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* ── Affiliate CTA section ── */
.aa-affiliate-cta {
    position: relative;
    background: linear-gradient(135deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    border-radius: var(--aarc-radius-xl);
    overflow: hidden;
}
.aa-affiliate-cta__img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    background-image: url('/images/growth-tree.png');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}
.aa-affiliate-cta__img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--aa-navy) 0%, transparent 100%);
}
.aa-affiliate-cta__content {
    position: relative;
    z-index: 1;
    padding: 3.5rem 2.5rem;
    max-width: 620px;
}

/* ── Sidebar logo ── */
.aa-sidebar-logo {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(31,134,217,0.12);
    margin-bottom: 0.5rem;
}
.aa-sidebar-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

/* ── Dashboard greeting banner ── */
.aa-dash-greeting {
    position: relative;
    background: linear-gradient(120deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 2rem 2rem 2rem 2.25rem;
    overflow: hidden;
    margin-bottom: 1.75rem;
}
.aa-dash-greeting::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,167,58,0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Dashboard metric cards ── */
.aa-metric-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.5rem;
    height: 100%;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    display: flex;
    flex-direction: column;
}
.aa-metric-card:hover {
    box-shadow: var(--aarc-shadow-md);
    transform: translateY(-2px);
    border-color: rgba(31,134,217,0.22);
}
.aa-metric-card--dark {
    background: linear-gradient(135deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    border-color: transparent;
}
.aa-metric-card--dark:hover {
    border-color: rgba(220,167,58,0.30);
}

/* ── Usage history table ── */
.aa-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.aa-usage-table thead tr {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.aa-usage-table thead th {
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}
.aa-usage-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.aa-usage-table tbody tr:last-child {
    border-bottom: none;
}
.aa-usage-table tbody tr:hover {
    background: #f8fafc;
}
.aa-usage-table tbody td {
    padding: 0.75rem 1.25rem;
    color: #1e293b;
    vertical-align: middle;
}
.aa-usage-date {
    color: #64748b !important;
    font-size: 0.8rem;
    white-space: nowrap;
}
.aa-usage-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.aa-usage-badge--success { background: #dcfce7; color: #166534; }
.aa-usage-badge--error   { background: #fee2e2; color: #991b1b; }
.aa-usage-badge--warning { background: #fef3c7; color: #92400e; }
.aa-usage-badge--neutral { background: #f1f5f9; color: #475569; }

.aa-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aa-metric-icon--blue   { background: linear-gradient(135deg,#EAF4FF,#D7E8F8); }
.aa-metric-icon--gold   { background: linear-gradient(135deg,#FFF4E0,#FFEBBF); }
.aa-metric-icon--green  { background: linear-gradient(135deg,#EAF7F1,#C8EFE0); }
.aa-metric-icon--blue   .mud-icon-root { color: var(--aa-blue)  !important; }
.aa-metric-icon--gold   .mud-icon-root { color: var(--aa-gold)  !important; }
.aa-metric-icon--green  .mud-icon-root { color: var(--aa-green) !important; }
.aa-metric-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--aa-navy-dark);
    line-height: 1.1;
    margin-top: 0.75rem;
}
.aa-metric-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7B8794;
    margin-bottom: 0.25rem;
}

/* ── Dashboard content cards ── */
.aa-content-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.aa-content-card:hover {
    box-shadow: var(--aarc-shadow-sm);
    transform: translateY(-1px);
    border-color: rgba(220,167,58,0.30);
}
.aa-content-type-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aa-progress-bar {
    height: 4px;
    border-radius: 4px;
    background: #EEF7FF;
    margin-top: 0.5rem;
    overflow: hidden;
}
.aa-progress-bar__fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--aa-blue) 0%, var(--aa-blue-light) 100%);
    transition: width 0.6s ease;
}

/* ── Section heading ── */
.aa-section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--aa-navy-dark);
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

/* ══════════════════════════════════════════════════════════════
   AFFILIATE REFERRALS
   ══════════════════════════════════════════════════════════════ */

/* ── Referral code display ── */
.aa-referral-code-display {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--aa-gold);
    line-height: 1;
    word-break: break-all;
}

/* ── QR code card ── */
.aa-qr-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    height: 100%;
}
.aa-qr-wrapper {
    background: white;
    border-radius: 14px;
    padding: 1rem;
    border: 1.5px solid rgba(31,134,217,0.12);
    display: inline-block;
    line-height: 0;
}

/* ── Share channel buttons ── */
.aa-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1.5px solid rgba(31,134,217,0.10);
    padding: 1.25rem 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    text-decoration: none;
    width: 100%;
}
.aa-share-btn:hover {
    box-shadow: var(--aarc-shadow-sm);
    border-color: rgba(220,167,58,0.30);
    transform: translateY(-2px);
}
.aa-share-btn__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aa-share-btn__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--aa-navy-dark);
}

/* ── How it works steps ── */
.aa-how-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.aa-how-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aa-blue), var(--aa-blue-light));
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(31,134,217,0.30);
}

/* ══════════════════════════════════════════════════════════════
   AFFILIATE ONBOARDING
   ══════════════════════════════════════════════════════════════ */

/* ── Progress header ── */
.aa-onboarding-progress {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
}
.aa-onboarding-track {
    height: 8px;
    border-radius: 8px;
    background: #EEF7FF;
    overflow: hidden;
    margin-top: 0.75rem;
}
.aa-onboarding-track__fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--aa-blue) 0%, var(--aa-green) 100%);
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Step cards ── */
.aa-step-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1.5px solid rgba(31,134,217,0.10);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.aa-step-card:last-child { margin-bottom: 0; }
.aa-step-card--done {
    border-color: rgba(41,182,122,0.25);
    background: rgba(41,182,122,0.02);
}
.aa-step-card--active {
    border-color: var(--aa-blue);
    box-shadow: 0 0 0 3px rgba(31,134,217,0.08);
}
.aa-step-card--pending {
    border-color: rgba(0,0,0,0.07);
    opacity: 0.75;
}

/* ── Step number circle ── */
.aa-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: background 0.2s;
}
.aa-step-circle--done {
    background: linear-gradient(135deg, var(--aa-green), #1da060);
    color: white;
}
.aa-step-circle--active {
    background: linear-gradient(135deg, var(--aa-blue), var(--aa-blue-light));
    color: white;
    box-shadow: 0 3px 12px rgba(31,134,217,0.35);
}
.aa-step-circle--pending {
    background: #F2F4F8;
    color: #9CA3AF;
}
.aa-step-circle--warning {
    background: linear-gradient(135deg, #E65100, #FF7043);
    color: white;
}

/* ── Completion banner ── */
.aa-completion-banner {
    background: linear-gradient(135deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 1.75rem;
}
.aa-completion-banner::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(41,182,122,0.18) 0%, transparent 65%);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   AFFILIATE DASHBOARD
   ══════════════════════════════════════════════════════════════ */

/* ── Available balance hero card ── */
.aa-balance-hero {
    background: linear-gradient(135deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 1.5rem 1.75rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.aa-balance-hero::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,167,58,0.20) 0%, transparent 70%);
    pointer-events: none;
}
.aa-balance-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--aa-gold);
    line-height: 1;
    letter-spacing: -0.02em;
}
.aa-balance-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.50);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

/* ── Rank badge ── */
.aa-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 100px;
    padding: 0.3rem 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.aa-rank--starter  { background: rgba(124,131,148,0.12); color: #7B8794; }
.aa-rank--silver   { background: rgba(148,163,184,0.15); color: #64748B; }
.aa-rank--gold     { background: rgba(220,167,58,0.18);  color: #A07820; }
.aa-rank--platinum { background: rgba(31,134,217,0.14);  color: var(--aa-blue); }
.aa-rank--diamond  { background: rgba(7,27,53,0.10);     color: var(--aa-navy); }

/* ── Growth center progress ── */
.aa-gc-bar-track {
    height: 10px;
    border-radius: 10px;
    background: #EEF7FF;
    overflow: hidden;
    margin: 0.5rem 0;
}
.aa-gc-bar-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--aa-blue) 0%, var(--aa-blue-light) 100%);
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aa-gc-milestones {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
}
.aa-gc-milestone {
    font-size: 0.68rem;
    color: #9CA3AF;
    font-weight: 600;
}
.aa-gc-milestone--reached { color: var(--aa-blue); }

/* ── Compliance / status indicator ── */
.aa-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
}
.aa-status-indicator--ok      { color: var(--aa-green); }
.aa-status-indicator--warn    { color: #DCA73A; }
.aa-status-indicator--blocked { color: #C62828; }
.aa-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.aa-status-dot--ok      { background: var(--aa-green); }
.aa-status-dot--warn    { background: #DCA73A; }
.aa-status-dot--blocked { background: #C62828; }

/* ── Referral link card ── */
.aa-referral-card {
    background: linear-gradient(135deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 1.75rem 2rem;
    position: relative;
    overflow: hidden;
}
.aa-referral-card::before {
    content: '';
    position: absolute;
    left: -40px;
    bottom: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,167,58,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.aa-referral-url {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    cursor: text;
}
.aa-referral-url span {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Disclosure strip ── */
.aa-disclosure-strip {
    background: rgba(31,134,217,0.06);
    border: 1px solid rgba(31,134,217,0.14);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

/* ── Onboarding alert ── */
.aa-onboarding-alert {
    background: linear-gradient(135deg, rgba(220,167,58,0.10), rgba(245,196,77,0.08));
    border: 1px solid rgba(220,167,58,0.30);
    border-radius: var(--aarc-radius-xl);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Profile avatar circle ── */
.aa-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    border: 3px solid var(--aa-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--aa-gold);
    flex-shrink: 0;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 16px rgba(220,167,58,0.25);
}

/* ── Profile summary card ── */
.aa-profile-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    overflow: hidden;
    height: 100%;
}
.aa-profile-card__header {
    background: linear-gradient(135deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    padding: 1.75rem 1.5rem 1.25rem;
    position: relative;
}
.aa-profile-card__header::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,167,58,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.aa-profile-card__body {
    padding: 1.25rem 1.5rem;
}

/* ── Read-only info rows ── */
.aa-info-row {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.aa-info-row:last-child { border-bottom: none; }
.aa-info-row__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.2rem;
}
.aa-info-row__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--aa-navy-dark);
    word-break: break-all;
}
.aa-info-row__value--mono {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    background: #F2F4F8;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    display: inline-block;
    letter-spacing: 0.04em;
}

/* ── Form section card ── */
.aa-form-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.75rem;
    height: 100%;
}

/* ── Role chip ── */
.aa-role-chip {
    display: inline-block;
    background: rgba(31,134,217,0.10);
    color: var(--aa-blue);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 0.18rem 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0.15rem 0.15rem 0 0;
}
.aa-role-chip--admin {
    background: rgba(220,167,58,0.15);
    color: #A07820;
}

/* ── Sign-out strip ── */
.aa-signout-strip {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(198,40,40,0.12);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   ORDER HISTORY PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Order row card ── */
.aa-order-row {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(31,134,217,0.09);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    margin-bottom: 0.6rem;
}
.aa-order-row:hover {
    box-shadow: var(--aarc-shadow-sm);
    border-color: rgba(31,134,217,0.18);
}
.aa-order-row:last-child { margin-bottom: 0; }

/* ── Order type icon badge ── */
.aa-order-type-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Order status pill ── */
.aa-order-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.aa-order-status--complete  { background: rgba(41,182,122,0.12); color: #29B67A; }
.aa-order-status--pending   { background: rgba(31,134,217,0.10); color: var(--aa-blue); }
.aa-order-status--refunded  { background: rgba(245,196,77,0.18); color: #B8860B; }
.aa-order-status--disputed  { background: rgba(198,40,40,0.10);  color: #C62828; }
.aa-order-status--cancelled { background: rgba(0,0,0,0.06);      color: #7B8794; }

/* ── Order amount ── */
.aa-order-amount {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--aa-navy-dark);
    white-space: nowrap;
}
.aa-order-amount--zero { color: #9CA3AF; font-weight: 400; }

/* ══════════════════════════════════════════════════════════════
   COMMISSION LEDGER PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Column header row ── */
.aa-order-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

/* ── Commission icon badge (reuses order-row layout) ── */
.aa-order-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Status filter pills ── */
.aa-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    border: 1px solid rgba(31,134,217,0.18);
    background: #ffffff;
    color: #506174;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.aa-filter-pill:hover {
    border-color: var(--aa-blue);
    color: var(--aa-blue);
}
.aa-filter-pill--active {
    background: var(--aa-blue);
    border-color: var(--aa-blue);
    color: #ffffff;
}
.aa-filter-pill__count {
    background: rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
}
.aa-filter-pill:not(.aa-filter-pill--active) .aa-filter-pill__count {
    background: rgba(31,134,217,0.10);
    color: var(--aa-blue);
}

/* ── Commission status badge ── */
.aa-commission-status {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.aa-commission-status--available   { background: rgba(41,182,122,0.12); color: #29B67A; }
.aa-commission-status--pending     { background: rgba(220,167,58,0.14); color: #B8860B; }
.aa-commission-status--processing  { background: rgba(31,134,217,0.10); color: var(--aa-blue); }
.aa-commission-status--paid        { background: rgba(18,59,99,0.08);   color: var(--aa-navy); }
.aa-commission-status--reversed    { background: rgba(198,40,40,0.10);  color: #C62828; }

/* ══════════════════════════════════════════════════════════════
   PAYOUTS PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Available balance hero ── */
.aa-payout-hero {
    background: linear-gradient(135deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 2rem 2.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.aa-payout-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(31,134,217,0.15) 0%, transparent 65%);
    pointer-events: none;
}

/* ── Inline request form card ── */
.aa-payout-request-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 2px solid rgba(31,134,217,0.25);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 24px rgba(31,134,217,0.08);
}

/* ══════════════════════════════════════════════════════════════
   BONUSES PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Bonus type card ── */
.aa-bonus-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.aa-bonus-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.aa-bonus-card__rate {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.6rem;
}

/* ── Bonus checklist item ── */
.aa-bonus-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #9CA3AF;
    font-weight: 500;
}
.aa-bonus-check--done {
    color: var(--aa-green);
}
.aa-bonus-check--fail {
    color: #C62828;
}

/* ── Rank multiplier table row ── */
.aa-rank-table-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    align-items: center;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid rgba(31,134,217,0.07);
    transition: background 0.15s;
}
.aa-rank-table-row:hover {
    background: #F8FAFC;
}
.aa-rank-table-row--current {
    background: rgba(41,182,122,0.04);
    border-left: 3px solid var(--aa-green);
    padding-left: calc(1.5rem - 3px);
}

/* ══════════════════════════════════════════════════════════════
   RANK PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Rank hero banner ── */
.aa-rank-hero {
    background: linear-gradient(135deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
}
.aa-rank-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(31,134,217,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.aa-rank-hero--gold::before    { background: radial-gradient(ellipse at 15% 50%, rgba(220,167,58,0.20) 0%, transparent 60%); }
.aa-rank-hero--platinum::before { background: radial-gradient(ellipse at 15% 50%, rgba(31,134,217,0.22) 0%, transparent 60%); }
.aa-rank-hero--diamond::before  { background: radial-gradient(ellipse at 15% 50%, rgba(129,140,248,0.22) 0%, transparent 60%); }

/* ── Rank emblem circle ── */
.aa-rank-emblem {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Requirement card ── */
.aa-rank-req-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 1.5rem;
    height: 100%;
}

/* ── Rank ladder ── */
.aa-rank-ladder {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    padding: 2rem 1.5rem;
    margin-bottom: 1.75rem;
    overflow-x: auto;
}
.aa-rank-ladder__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 80px;
    position: relative;
}
.aa-rank-ladder__line {
    position: absolute;
    top: 20px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: #E5E9EF;
    z-index: 0;
}
.aa-rank-ladder__line--done {
    background: var(--aa-green);
}
.aa-rank-ladder__circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.aa-rank-ladder__node--past .aa-rank-ladder__circle {
    background: var(--aa-green);
    border: 2px solid var(--aa-green);
}
.aa-rank-ladder__node--current .aa-rank-ladder__circle {
    background: var(--aa-navy-dark);
    border: 3px solid var(--aa-gold);
    box-shadow: 0 0 0 4px rgba(220,167,58,0.20);
}
.aa-rank-ladder__node--future .aa-rank-ladder__circle {
    background: #F2F4F8;
    border: 2px solid #D1D5DB;
}
.aa-rank-ladder__label {
    margin-top: 0.6rem;
    text-align: center;
    padding: 0 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   PROFIT SHARING PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Period card (dark navy) ── */
.aa-ps-period-card {
    background: linear-gradient(135deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.aa-ps-period-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 90% 20%, rgba(220,167,58,0.12) 0%, transparent 55%);
    pointer-events: none;
}

/* ── Period status badge ── */
.aa-ps-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    padding: 0.3rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
}
.aa-ps-status--distributed { background: rgba(41,182,122,0.20);  color: #6EE7B7; }
.aa-ps-status--approved    { background: rgba(31,134,217,0.20);   color: #93C5FD; }
.aa-ps-status--review      { background: rgba(220,167,58,0.22);   color: var(--aa-gold-light); }
.aa-ps-status--calculating { background: rgba(255,255,255,0.10);  color: rgba(255,255,255,0.70); }
.aa-ps-status--closed      { background: rgba(255,255,255,0.07);  color: rgba(255,255,255,0.40); }

/* ── Point input row (icon + label + value) ── */
.aa-ps-input-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

/* ══════════════════════════════════════════════════════════════
   B2B PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Pipeline stage pill ── */
.aa-b2b-stage-pill {
    flex: 1;
    min-width: 72px;
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* ── Company avatar ── */
.aa-b2b-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* ── Deal status badge ── */
.aa-b2b-status {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.aa-b2b-status--won         { background: rgba(41,182,122,0.12); color: var(--aa-green); }
.aa-b2b-status--lost        { background: rgba(198,40,40,0.10);  color: #C62828; }
.aa-b2b-status--proposal    { background: rgba(220,167,58,0.14); color: #B8860B; }
.aa-b2b-status--negotiation { background: rgba(220,167,58,0.20); color: #B8860B; }
.aa-b2b-status--qualified   { background: rgba(31,134,217,0.10); color: var(--aa-blue); }
.aa-b2b-status--hold        { background: rgba(0,0,0,0.06);      color: #9CA3AF; }
.aa-b2b-status--lead        { background: rgba(156,163,175,0.12); color: #506174; }

/* ══════════════════════════════════════════════════════════════
   COMPLIANCE PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Status hero banner ── */
.aa-compliance-hero {
    border-radius: var(--aarc-radius-xl);
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
}
.aa-compliance-hero--clear {
    background: linear-gradient(135deg, #0A3D2B 0%, #0F5438 100%);
}
.aa-compliance-hero--clear::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(41,182,122,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.aa-compliance-hero--flagged {
    background: linear-gradient(135deg, #3D0A0A 0%, #5C1010 100%);
}
.aa-compliance-hero--flagged::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(198,40,40,0.18) 0%, transparent 60%);
    pointer-events: none;
}

/* ── Compliance flag status badge ── */
.aa-compliance-flag-status {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.aa-compliance-flag--open      { background: rgba(198,40,40,0.12); color: #C62828; }
.aa-compliance-flag--review    { background: rgba(220,167,58,0.14); color: #B8860B; }
.aa-compliance-flag--escalated { background: rgba(198,40,40,0.18); color: #B91C1C; font-weight: 800; }
.aa-compliance-flag--resolved  { background: rgba(41,182,122,0.12); color: var(--aa-green); }
.aa-compliance-flag--dismissed { background: rgba(0,0,0,0.06);      color: #9CA3AF; }

/* ── Orders summary strip ── */
.aa-orders-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--aa-navy-dark);
    border-radius: var(--aarc-radius-xl);
    padding: 1.5rem 2rem;
    margin-bottom: 1.75rem;
}
.aa-orders-summary-item { flex: 1; min-width: 100px; }
.aa-orders-summary-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--aa-gold);
    line-height: 1;
}
.aa-orders-summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0.2rem;
}

/* ── Reference badge ── */
.aa-ref-badge {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: #7B8794;
    background: #F2F4F8;
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    max-width: 120px;
    text-overflow: ellipsis;
}

/* ── Empty / error state ── */
.aa-empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.09);
}

/* ══════════════════════════════════════════════════════════════
   SUBSCRIPTION & PRICING PAGES
   ══════════════════════════════════════════════════════════════ */

/* ── Page header strip (shared) ── */
.aa-page-header {
    background: linear-gradient(120deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.aa-page-header::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,167,58,0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Current plan hero card ── */
.aa-current-plan {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.12);
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
}
.aa-current-plan--active {
    border-color: var(--aa-blue);
    box-shadow: 0 0 0 3px rgba(31,134,217,0.08);
}
.aa-plan-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}
.aa-plan-stat {
    border-right: 1px solid rgba(0,0,0,0.07);
    padding: 0 1.5rem;
}
.aa-plan-stat:first-child { padding-left: 0; }
.aa-plan-stat:last-child  { border-right: none; }

/* ── Billing toggle pills ── */
.aa-billing-toggle {
    display: inline-flex;
    background: #F2F4F8;
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}
.aa-billing-pill {
    padding: 0.4rem 1.4rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #7B8794;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
.aa-billing-pill--active {
    background: #ffffff;
    color: var(--aa-navy-dark);
    box-shadow: 0 1px 6px rgba(7,27,53,0.12);
}
.aa-save-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--aa-green), #1da060);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 0.15rem 0.55rem;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.04em;
}

/* ── Plan tier cards ── */
.aa-plan-tier {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1.5px solid rgba(31,134,217,0.12);
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    overflow: hidden;
}
.aa-plan-tier:hover {
    box-shadow: var(--aarc-shadow-md);
    transform: translateY(-3px);
}
.aa-plan-tier--featured {
    background: linear-gradient(160deg, var(--aa-navy) 0%, var(--aa-navy-dark) 100%);
    border-color: var(--aa-gold);
    box-shadow: var(--aarc-shadow-lg);
}
.aa-plan-tier--featured:hover {
    box-shadow: 0 12px 48px rgba(7,27,53,0.35);
}
.aa-plan-tier--current {
    border-color: var(--aa-blue);
    box-shadow: 0 0 0 3px rgba(31,134,217,0.10);
}
.aa-plan-header {
    padding: 1.75rem 1.75rem 1.25rem;
}
.aa-plan-price {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--aa-navy-dark);
}
.aa-plan-tier--featured .aa-plan-price { color: white; }
.aa-plan-tier--featured .aa-plan-name  { color: white; }
.aa-plan-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aa-navy-dark);
    letter-spacing: -0.01em;
}
.aa-plan-desc {
    font-size: 0.82rem;
    color: #7B8794;
    margin-top: 0.2rem;
    line-height: 1.5;
}
.aa-plan-tier--featured .aa-plan-desc { color: rgba(255,255,255,0.55); }
.aa-plan-divider {
    height: 1px;
    background: rgba(31,134,217,0.10);
    margin: 0 1.75rem;
}
.aa-plan-tier--featured .aa-plan-divider { background: rgba(255,255,255,0.12); }
.aa-plan-features {
    padding: 1.25rem 1.75rem;
    flex: 1;
    list-style: none;
    margin: 0;
}
.aa-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #4A5568;
    margin-bottom: 0.65rem;
    line-height: 1.4;
}
.aa-plan-tier--featured .aa-plan-features li { color: rgba(255,255,255,0.80); }
.aa-plan-features li::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aa-blue), var(--aa-blue-light));
    flex-shrink: 0;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}
.aa-plan-tier--featured .aa-plan-features li::before {
    background-color: var(--aa-gold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23071B35'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}
.aa-plan-footer {
    padding: 1.25rem 1.75rem 1.75rem;
}
.aa-plan-popular-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, var(--aa-gold), var(--aa-gold-light));
    color: var(--aa-navy-dark);
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 100px;
    padding: 0.2rem 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.aa-plan-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(31,134,217,0.12);
    color: var(--aa-blue);
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 100px;
    padding: 0.2rem 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* ── Pricing page hero ── */
.aa-pricing-hero {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
    background: linear-gradient(160deg, var(--aa-navy-dark) 0%, var(--aa-navy) 100%);
    border-radius: var(--aarc-radius-xl);
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}
.aa-pricing-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,167,58,0.12) 0%, transparent 65%);
    pointer-events: none;
}

/* ── Value stack strip ── */
.aa-value-strip {
    background: var(--aa-navy-dark);
    border-radius: var(--aarc-radius-xl);
    padding: 2rem 2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
.aa-value-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.80);
    font-size: 0.875rem;
    font-weight: 500;
}
.aa-value-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aa-gold);
    flex-shrink: 0;
}

/* ── Cancel alert ── */
.aa-cancel-alert {
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: #C62828;
    font-size: 0.875rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.aa-info-alert {
    background: rgba(31,134,217,0.08);
    border: 1px solid rgba(31,134,217,0.20);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: var(--aa-navy);
    font-size: 0.875rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════
   CONTENT LIBRARY
   ══════════════════════════════════════════════════════════════ */

/* ── Library card ── */
.aa-library-card {
    background: #ffffff;
    border-radius: var(--aarc-radius-xl);
    border: 1px solid rgba(31,134,217,0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}
.aa-library-card:hover {
    box-shadow: var(--aarc-shadow-md);
    transform: translateY(-3px);
    border-color: rgba(220,167,58,0.30);
}

/* ── Thumbnail area ── */
.aa-library-card__thumb {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    overflow: hidden;
}
/* When an actual <img> is used (to avoid CSS url() + &amp; encoding bug) */
.aa-library-card__thumb--img {
    display: block;
}
.aa-library-card__thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.aa-library-card__thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(7,27,53,0.20) 0%, rgba(7,27,53,0.55) 100%);
}
/* Per-type gradients (no thumbnail) */
.aa-library-thumb--video   { background: linear-gradient(135deg, #0F3460, #16213E); }
.aa-library-thumb--podcast { background: linear-gradient(135deg, #1B4332, #0D2818); }
.aa-library-thumb--ebook   { background: linear-gradient(135deg, #1A237E, #283593); }
.aa-library-thumb--cert    { background: linear-gradient(135deg, #4A1942, #6A1B9A); }
.aa-library-thumb--course  { background: linear-gradient(135deg, #0D3B52, #1565C0); }
.aa-library-thumb--default { background: linear-gradient(135deg, #1A2A3A, #243447); }

/* ── Status badge (floated top-right of thumb) ── */
.aa-library-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
    z-index: 1;
}
.aa-library-badge--new      { background: rgba(31,134,217,0.90);   color: #fff; }
.aa-library-badge--progress { background: rgba(220,167,58,0.90);   color: #071B35; }
.aa-library-badge--done     { background: rgba(41,182,122,0.90);   color: #fff; }

/* ── Card body ── */
.aa-library-card__body {
    padding: 1rem 1.1rem 0.5rem;
    flex: 1;
}
.aa-library-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--aa-navy-dark);
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aa-library-card__desc {
    font-size: 0.78rem;
    color: #7B8794;
    line-height: 1.45;
    margin-top: 2px;
}

/* ── Progress bar variants ── */
.aa-progress-bar__fill--green {
    background: linear-gradient(90deg, var(--aa-green) 0%, #52d9a0 100%) !important;
}

/* ── Card footer CTA ── */
.aa-library-card__footer {
    padding: 0.6rem 1.1rem 0.85rem;
    border-top: 1px solid rgba(31,134,217,0.07);
    margin-top: auto;
}
.aa-library-card__cta {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--aa-blue);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    letter-spacing: 0.01em;
    transition: gap 0.2s;
}
.aa-library-card:hover .aa-library-card__cta {
    gap: 6px;
}

/* ── Content-type chip (inline, not MudChip) ── */
.aa-library-type-chip {
    display: inline-block;
    background: rgba(31,134,217,0.10);
    color: var(--aa-blue);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 0.18rem 0.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ── Tag chips (author editor + reader view) ── */
.aa-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(220,167,58,0.12);
    border: 1px solid rgba(220,167,58,0.30);
    color: #8A6000;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.aa-tag-chip--sm {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
}
.aa-tag-chip__remove {
    background: none;
    border: none;
    padding: 0 0 0 2px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #A07820;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.aa-tag-chip__remove:hover { opacity: 1; }

/* ── Tag filter pills (library page) ── */
.aa-tag-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
    border: 1px solid rgba(220,167,58,0.28);
    background: rgba(220,167,58,0.06);
    color: #8A6000;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.aa-tag-filter-pill:hover {
    background: rgba(220,167,58,0.16);
    border-color: var(--aa-gold);
}
.aa-tag-filter-pill--active {
    background: var(--aa-gold);
    border-color: var(--aa-gold);
    color: var(--aa-navy-dark);
}
.aa-tag-filter-pill--clear {
    background: transparent;
    border-color: rgba(0,0,0,0.15);
    color: #7B8794;
    font-size: 0.7rem;
}
.aa-tag-filter-pill--clear:hover {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.20);
    color: #374151;
}

/* ── MARKETING REVIEW PAGE ─────────────────────────────────── */

/* Platform quick-select chips */
.aa-platform-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1.5px solid rgba(18,59,99,0.20);
    background: #fff;
    color: var(--aa-navy);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}
.aa-platform-chip:hover {
    border-color: var(--aa-blue);
    color: var(--aa-blue);
}
.aa-platform-chip--active {
    background: var(--aa-navy);
    border-color: var(--aa-navy);
    color: #fff;
}

/* Review row accent */
.aa-mr-row {
    border-left: 3px solid transparent;
    transition: border-color 0.15s;
}
.aa-mr-row--pending  { border-left-color: var(--aa-gold); }
.aa-mr-row--rejected { border-left-color: #C62828; }
.aa-mr-row--approved { border-left-color: var(--aa-green); }

/* Status badge */
.aa-mr-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.aa-mr-status--pending  { background: rgba(220,167,58,0.15);  color: #9A6F00; }
.aa-mr-status--approved { background: rgba(41,182,122,0.15);  color: #1A7A52; }
.aa-mr-status--rejected { background: rgba(198,40,40,0.12);   color: #C62828; }

/* ── EasyMDE / Markdown Editor toolbar ───────────────────────────────────── */
.editor-toolbar button,
.editor-toolbar button::before,
.editor-toolbar i.separator {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.15) !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.editor-toolbar {
    border-color: rgba(255,255,255,0.12) !important;
    background: rgba(7,27,53,0.6) !important;
}

/* ── Book Reader Panel ────────────────────────────────────────────────────── */
.aa-reader-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    position: relative;
}
.aa-reader-iframe-wrap {
    flex: 1;
    min-width: 0;
    transition: margin-right 0.25s ease;
}
.aa-reader-panel {
    width: 300px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #E2E8F0;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.aa-reader-panel__tabs {
    display: flex;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}
.aa-reader-panel__tab {
    flex: 1;
    padding: 0.6rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.aa-reader-panel__tab--active {
    color: var(--aa-blue);
    border-bottom-color: var(--aa-blue);
    background: #fff;
}
.aa-reader-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}
.aa-reader-panel__empty {
    text-align: center;
    color: #94A3B8;
    font-size: 0.8rem;
    padding: 2rem 0.5rem;
}
.aa-reader-item {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.aa-reader-item:hover { background: #F1F5F9; }
.aa-reader-item__pos {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.aa-reader-item__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.3;
}
.aa-reader-item__note {
    font-size: 0.78rem;
    color: #475569;
    margin-top: 3px;
    line-height: 1.4;
}
.aa-reader-item__quote {
    font-size: 0.75rem;
    color: #64748B;
    font-style: italic;
    border-left: 2px solid #FDE68A;
    padding-left: 6px;
    margin-top: 3px;
    line-height: 1.4;
    word-break: break-word;
}
.aa-reader-item__del {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: #CBD5E1;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.15s;
}
.aa-reader-item__del:hover { color: #EF4444; }

/* Floating selection toolbar */
.aa-selection-toolbar {
    position: fixed;
    z-index: 9999;
    display: flex;
    gap: 4px;
    background: #1E293B;
    border-radius: 8px;
    padding: 5px 7px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
}
.aa-selection-toolbar::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1E293B;
    border-bottom: none;
}
.aa-selection-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}
.aa-selection-btn:hover { background: rgba(255,255,255,0.12); }
.aa-annotation-input-box {
    position: fixed;
    z-index: 9998;
    background: #fff;
    border-radius: 10px;
    padding: 0.75rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    width: 260px;
    transform: translateX(-50%);
}