/*
 * VaulCe Tenant Portal — Landing Page Design
 *
 * Clean dashboard UI inspired by the Crypto.com / Brale.xyz
 * design language. Uses --vc-* tokens from vaulce.css.
 */

/* ========================================
   Layout — Tenant Bar (top org switcher)
   ======================================== */
.tp-tenant-bar {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-md);
    padding: var(--vc-spacing-md) var(--vc-spacing-lg);
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
    margin-bottom: var(--vc-spacing-lg);
    box-shadow: var(--vc-shadow-sm);
}

.tp-tenant-switcher {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    flex: 1;
    min-width: 0;
}

.tp-tenant-switcher-select {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    flex: 1;
    min-width: 0;
}

.tp-tenant-switcher svg { flex-shrink: 0; color: var(--vc-color-primary); }

.tp-tenant-dropdown {
    flex: 1;
    max-width: 320px;
    padding: var(--vc-spacing-sm) var(--vc-spacing-md);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-md);
    background: var(--vc-bg-input);
    color: var(--vc-text-primary);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-medium);
    transition: border-color var(--vc-transition-fast);
    cursor: pointer;
}

.tp-tenant-dropdown:focus {
    outline: none;
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

.tp-tenant-meta {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-md);
    font-size: var(--vc-font-size-sm);
    color: var(--vc-text-secondary);
}

.tp-tenant-slug {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-muted);
    background: var(--vc-bg-hover);
    padding: 2px 8px;
    border-radius: var(--vc-radius-sm);
}

.tp-tenant-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--vc-font-size-xs);
    font-weight: var(--vc-font-weight-medium);
}

.tp-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tp-tenant-status.active .tp-status-dot { background: var(--vc-color-success); }

.tp-quick-actions {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-xs);
    margin-left: auto;
}

.tp-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-md);
    background: transparent;
    color: var(--vc-text-secondary);
    font-size: var(--vc-font-size-xs);
    font-weight: var(--vc-font-weight-medium);
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    text-decoration: none;
}

.tp-quick-btn:hover {
    background: var(--vc-bg-hover);
    color: var(--vc-color-primary);
    border-color: var(--vc-color-primary);
}

/* ========================================
   Empty State (no tenant selected)
   ======================================== */
.tp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--vc-spacing-2xl) var(--vc-spacing-xl);
    text-align: center;
}

.tp-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vc-color-primary-light), transparent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--vc-spacing-lg);
}
.tp-empty-icon svg { color: var(--vc-color-primary); }

.tp-empty-state h2 { margin: 0 0 var(--vc-spacing-sm); font-size: var(--vc-font-size-xl); font-weight: var(--vc-font-weight-bold); color: var(--vc-text-primary); }
.tp-empty-state p { margin: 0 0 var(--vc-spacing-xl); color: var(--vc-text-secondary); font-size: var(--vc-font-size-sm); }

.tp-org-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--vc-spacing-md);
    width: 100%; max-width: 800px;
}

.tp-org-card {
    display: flex; align-items: center; gap: var(--vc-spacing-md);
    padding: var(--vc-spacing-lg);
    border: 1px solid var(--vc-border-light); border-radius: var(--vc-radius-lg);
    background: var(--vc-bg-card); cursor: pointer;
    transition: all var(--vc-transition-fast);
}
.tp-org-card:hover { border-color: var(--vc-color-primary); box-shadow: var(--vc-shadow-md); transform: translateY(-1px); }

.tp-org-avatar {
    width: 44px; height: 44px; border-radius: var(--vc-radius-lg);
    background: linear-gradient(135deg, var(--vc-color-primary), var(--vc-color-info));
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: var(--vc-font-weight-bold); font-size: var(--vc-font-size-lg); flex-shrink: 0;
}
.tp-org-info { min-width: 0; }
.tp-org-name { display: block; font-weight: var(--vc-font-weight-semibold); color: var(--vc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-org-slug { display: block; font-size: var(--vc-font-size-xs); color: var(--vc-text-muted); font-family: 'SFMono-Regular', Consolas, monospace; }


/* ========================================
   Landing Page Container
   ======================================== */
.tp-landing {
    padding: var(--vc-spacing-lg) var(--vc-spacing-xl);
    max-width: 1440px;
}

/* ========================================
   Loading Skeletons
   ======================================== */
.tp-skeleton {
    background: linear-gradient(90deg, var(--vc-bg-hover) 25%, var(--vc-bg-card) 50%, var(--vc-bg-hover) 75%);
    background-size: 200% 100%;
    animation: tp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--vc-radius-lg);
}

@keyframes tp-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.tp-skeleton-welcome {
    text-align: center;
    margin-bottom: var(--vc-spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vc-spacing-sm);
}

.tp-skeleton-title { width: 320px; height: 32px; }
.tp-skeleton-subtitle { width: 240px; height: 18px; }
.tp-skeleton-hero { height: 180px; border-radius: var(--vc-radius-xl); }
.tp-skeleton-card { height: 260px; border-radius: var(--vc-radius-xl); }

/* ========================================
   Welcome Header
   ======================================== */
.tp-welcome {
    text-align: center;
    margin-bottom: var(--vc-spacing-xl);
}

.tp-welcome h1 {
    margin: 0 0 var(--vc-spacing-xs);
    font-size: 1.75rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}

.tp-welcome p {
    margin: 0;
    color: var(--vc-text-secondary);
    font-size: var(--vc-font-size-md);
}

/* ========================================
   Hero Cards — 3 gradient banner cards
   ======================================== */
.tp-hero-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vc-spacing-lg);
    margin-bottom: var(--vc-spacing-xl);
}

@media (max-width: 960px) {
    .tp-hero-row { grid-template-columns: 1fr; }
}

.tp-hero-card {
    position: relative;
    border-radius: var(--vc-radius-xl);
    overflow: hidden;
    padding: var(--vc-spacing-xl) var(--vc-spacing-lg);
    color: #fff;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tp-hero-card .tp-hero-content { position: relative; z-index: 1; }

.tp-hero-card .tp-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    opacity: 0.15;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.tp-hero-create {
    background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 50%, #0f2544 100%);
}
.tp-hero-create .tp-hero-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23ffffff' stroke-width='0.5'/%3E%3C/svg%3E");
}

.tp-hero-convert {
    background: linear-gradient(135deg, #0d1f3c 0%, #1e4a8a 50%, #0f2d5e 100%);
}
.tp-hero-convert .tp-hero-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,80 40,60 80,70 120,30 160,50 200,20' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
}

.tp-hero-transfer {
    background: linear-gradient(135deg, #061a2e 0%, #163d6a 50%, #0c2a4d 100%);
}
.tp-hero-transfer .tp-hero-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,60 50,40 100,55 150,25 200,35' fill='none' stroke='%2334d399' stroke-width='1'/%3E%3C/svg%3E");
}

.tp-hero-icon {
    width: 48px; height: 48px; border-radius: var(--vc-radius-lg);
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--vc-spacing-sm);
}

.tp-hero-card h2 {
    margin: 0 0 4px;
    font-size: var(--vc-font-size-lg);
    font-weight: var(--vc-font-weight-bold);
}

.tp-hero-card p {
    margin: 0 0 var(--vc-spacing-md);
    font-size: var(--vc-font-size-sm);
    opacity: 0.8;
}

.tp-hero-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--vc-color-primary);
    color: #fff;
    border: none;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    width: fit-content;
}

.tp-hero-btn:hover {
    background: var(--vc-color-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
    transform: translateY(-1px);
}

/* ========================================
   Shared Card
   ======================================== */
.tp-card {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tp-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--vc-spacing-md) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}

.tp-card-header h3 {
    margin: 0;
    font-size: var(--vc-font-size-md);
    font-weight: var(--vc-font-weight-semibold);
    color: var(--vc-text-primary);
}

.tp-card-link {
    font-size: var(--vc-font-size-xs);
    font-weight: var(--vc-font-weight-medium);
    color: var(--vc-color-primary);
    text-decoration: none;
    cursor: pointer;
}

.tp-card-footer {
    padding: var(--vc-spacing-md) var(--vc-spacing-lg);
    border-top: 1px solid var(--vc-border-light);
    margin-top: auto;
}

.tp-card-footer-split {
    display: flex;
    gap: var(--vc-spacing-sm);
}

.tp-empty-row {
    padding: var(--vc-spacing-xl);
    text-align: center;
    color: var(--vc-text-muted);
    font-size: var(--vc-font-size-sm);
}

/* ========================================
   Info Row — 3 columns
   ======================================== */
.tp-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vc-spacing-lg);
    margin-bottom: var(--vc-spacing-xl);
}

@media (max-width: 960px) {
    .tp-info-row { grid-template-columns: 1fr; }
}

/* Wallet Rows */
.tp-wallet-row {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-sm) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}
.tp-wallet-row:last-child { border-bottom: none; }

.tp-wallet-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vc-color-primary), var(--vc-color-info));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: var(--vc-font-weight-bold); font-size: var(--vc-font-size-xs);
    flex-shrink: 0;
}

.tp-wallet-name {
    flex: 1;
    font-size: var(--vc-font-size-sm);
    color: var(--vc-text-primary);
    font-weight: var(--vc-font-weight-medium);
}

.tp-wallet-amount {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}

.tp-wallet-ticker {
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-muted);
    font-weight: var(--vc-font-weight-medium);
    min-width: 40px;
    text-align: right;
}

/* Market Rows */
.tp-market-row {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-sm) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}
.tp-market-row:last-child { border-bottom: none; }

.tp-market-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--vc-font-weight-bold); font-size: var(--vc-font-size-xs);
    flex-shrink: 0;
}
.tp-market-icon.btc { background: rgba(247, 147, 26, 0.15); color: #f7931a; }
.tp-market-icon.eth { background: rgba(98, 126, 234, 0.15); color: #627eea; }
.tp-market-icon.bnb { background: rgba(243, 186, 47, 0.15); color: #f3ba2f; }
.tp-market-icon.sol { background: rgba(0, 255, 163, 0.12); color: #00ffa3; }

.tp-market-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: var(--vc-spacing-xs);
    min-width: 0;
}
.tp-market-name { font-size: var(--vc-font-size-sm); font-weight: var(--vc-font-weight-semibold); color: var(--vc-text-primary); }
.tp-market-ticker { font-size: var(--vc-font-size-xs); color: var(--vc-text-muted); }

.tp-market-price {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    color: var(--vc-text-primary);
    white-space: nowrap;
}

.tp-market-change {
    font-size: var(--vc-font-size-xs);
    font-weight: var(--vc-font-weight-semibold);
    min-width: 44px;
    text-align: right;
}
.tp-market-change.positive { color: var(--vc-color-success); }
.tp-market-change.negative { color: var(--vc-color-danger); }

/* Transaction mini rows */
.tp-txn-row {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-sm) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}
.tp-txn-row:last-child { border-bottom: none; }

.tp-txn-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tp-txn-icon.deposit { background: rgba(16, 185, 129, 0.12); color: var(--vc-color-success); }
.tp-txn-icon.withdrawal { background: rgba(239, 68, 68, 0.12); color: var(--vc-color-danger); }
.tp-txn-icon.transfer { background: rgba(59, 130, 246, 0.12); color: var(--vc-color-info); }
.tp-txn-icon.mint { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.tp-txn-icon.burn { background: rgba(245, 158, 11, 0.12); color: var(--vc-color-warning); }
.tp-txn-icon.swap { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.tp-txn-icon.user { background: rgba(59, 130, 246, 0.12); color: var(--vc-color-info); }

.tp-txn-name {
    flex: 1;
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-medium);
    color: var(--vc-text-primary);
}

.tp-txn-badge {
    font-size: var(--vc-font-size-xs);
    padding: 2px 10px;
    border-radius: var(--vc-radius-full);
    background: rgba(59, 130, 246, 0.1);
    color: var(--vc-color-info);
    font-weight: var(--vc-font-weight-medium);
}

/* ========================================
   Action Strip — 3 action cards
   ======================================== */
.tp-action-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vc-spacing-lg);
    margin-bottom: var(--vc-spacing-xl);
}

@media (max-width: 960px) {
    .tp-action-strip { grid-template-columns: 1fr; }
}

.tp-action-card {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tp-action-header {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-md) var(--vc-spacing-lg);
    color: #fff;
}

.tp-action-header h3 { margin: 0; font-size: var(--vc-font-size-md); font-weight: var(--vc-font-weight-semibold); }

.tp-action-header.deposit { background: linear-gradient(135deg, #059669, #10b981); }
.tp-action-header.exchange { background: linear-gradient(135deg, #0a1628, #1a3a6b); }
.tp-action-header.ramp { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

.tp-action-body {
    padding: var(--vc-spacing-md) var(--vc-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--vc-spacing-sm);
    flex: 1;
}

.tp-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vc-spacing-sm);
}

.tp-action-option {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    font-size: var(--vc-font-size-sm);
    color: var(--vc-text-secondary);
}

.tp-action-option svg { flex-shrink: 0; color: var(--vc-text-muted); }

/* ========================================
   Bottom Row — 2 columns
   ======================================== */
.tp-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vc-spacing-lg);
}

@media (max-width: 900px) {
    .tp-bottom-row { grid-template-columns: 1fr; }
}

/* Transaction detail rows */
.tp-txn-detail-row {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-sm) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}
.tp-txn-detail-row:last-child { border-bottom: none; }

.tp-txn-detail-name {
    flex: 1;
    font-size: var(--vc-font-size-sm);
    color: var(--vc-text-primary);
}

.tp-txn-detail-amount {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    color: var(--vc-text-primary);
}

/* User activity rows */
.tp-user-row {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-sm) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}
.tp-user-row:last-child { border-bottom: none; }

.tp-user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--vc-color-info);
    flex-shrink: 0;
}

.tp-user-name {
    flex: 1;
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-medium);
    color: var(--vc-text-primary);
}

.tp-user-status {
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-muted);
    font-style: italic;
}

/* ========================================
   Buttons
   ======================================== */
.tp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--vc-color-primary);
    color: var(--vc-text-inverse);
    border: none;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

.tp-btn-primary:hover {
    background: var(--vc-color-primary-hover);
    box-shadow: var(--vc-shadow-md);
    transform: translateY(-1px);
}

.tp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: transparent;
    color: var(--vc-color-primary);
    border: 1px solid var(--vc-color-primary);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

.tp-btn-outline:hover {
    background: rgba(0, 120, 212, 0.08);
    box-shadow: var(--vc-shadow-sm);
}

/* ========================================
   Status Pills
   ======================================== */
.tp-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-font-size-xs);
    font-weight: var(--vc-font-weight-semibold);
    white-space: nowrap;
}
.tp-status-pill.completed { background: rgba(16, 185, 129, 0.12); color: var(--vc-color-success); }
.tp-status-pill.failed { background: rgba(239, 68, 68, 0.12); color: var(--vc-color-danger); }
.tp-status-pill.processing { background: rgba(59, 130, 246, 0.12); color: var(--vc-color-info); }
.tp-status-pill.pending { background: rgba(245, 158, 11, 0.12); color: var(--vc-color-warning); }

/* ========================================
   Tenant Stablecoin Page
   ======================================== */

/* KPI Row */
.tsc-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--vc-spacing-md);
    margin-bottom: var(--vc-spacing-lg);
}

.tsc-kpi-card {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-lg);
    padding: var(--vc-spacing-lg) var(--vc-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--vc-spacing-xs);
}

.tsc-kpi-label {
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--vc-font-weight-medium);
}

.tsc-kpi-value {
    font-size: 1.5rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}

.tsc-kpi-value.tsc-success { color: var(--vc-color-success); }

/* Action Bar */
.tsc-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--vc-spacing-md);
}

.tsc-action-bar h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--vc-font-weight-semibold);
    color: var(--vc-text-primary);
}

.tsc-action-buttons {
    display: flex;
    gap: var(--vc-spacing-sm);
}

/* Empty State */
.tsc-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--vc-bg-card);
    border: 1px dashed var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
}

.tsc-empty svg { margin-bottom: var(--vc-spacing-md); color: var(--vc-text-secondary); }
.tsc-empty h3 { margin: 0 0 0.5rem; color: var(--vc-text-primary); }
.tsc-empty p { color: var(--vc-text-secondary); font-size: var(--vc-font-size-sm); margin-bottom: var(--vc-spacing-lg); }

/* Coin Grid */
.tsc-coin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--vc-spacing-lg);
}

/* Coin Card */
.tsc-coin-card {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
    padding: var(--vc-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--vc-spacing-md);
    transition: border-color var(--vc-transition-fast), box-shadow var(--vc-transition-fast);
}

.tsc-coin-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--vc-shadow-md);
}

.tsc-coin-card.disabled {
    opacity: 0.6;
}

.tsc-coin-header {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
}

.tsc-coin-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vc-color-primary) 0%, #3b82f6 100%);
    color: #fff;
    font-weight: var(--vc-font-weight-bold);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tsc-coin-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tsc-coin-title strong {
    font-size: 1rem;
    color: var(--vc-text-primary);
}

.tsc-coin-title span {
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-secondary);
}

/* Badge */
.tsc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--vc-font-size-xs);
    font-weight: var(--vc-font-weight-medium);
}

.tsc-badge.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--vc-color-success);
}

.tsc-badge.inactive {
    background: rgba(239, 68, 68, 0.12);
    color: var(--vc-color-danger);
}

/* Detail Rows */
.tsc-coin-details {
    display: flex;
    flex-direction: column;
    gap: var(--vc-spacing-xs);
}

.tsc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.tsc-detail-label {
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-secondary);
}

.tsc-detail-value {
    font-size: var(--vc-font-size-sm);
    color: var(--vc-text-primary);
    font-weight: var(--vc-font-weight-medium);
}

.tsc-mono { font-family: var(--vc-font-mono); }
.tsc-truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On-chain strip */
.tsc-onchain-strip {
    display: flex;
    gap: var(--vc-spacing-lg);
    padding: var(--vc-spacing-sm) var(--vc-spacing-md);
    background: rgba(0, 120, 212, 0.06);
    border-radius: var(--vc-radius-md);
    border: 1px solid rgba(0, 120, 212, 0.15);
}

.tsc-onchain-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Action buttons */
.tsc-coin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vc-spacing-xs);
    padding-top: var(--vc-spacing-sm);
    border-top: 1px solid var(--vc-border-light);
}

.tsc-btn-sm {
    padding: 4px 12px !important;
    font-size: var(--vc-font-size-xs) !important;
    min-height: unset !important;
}

.tsc-btn-danger {
    color: var(--vc-color-danger) !important;
    border-color: var(--vc-color-danger) !important;
}

.tsc-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Transaction panel inside coin card */
.tsc-txn-panel {
    border-top: 1px solid var(--vc-border-light);
    padding-top: var(--vc-spacing-md);
}

.tsc-txn-empty {
    color: var(--vc-text-secondary);
    font-size: var(--vc-font-size-sm);
    margin: 0;
}

.tsc-txn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--vc-font-size-xs);
}

.tsc-txn-table th {
    text-align: left;
    padding: 6px 8px;
    font-weight: var(--vc-font-weight-medium);
    color: var(--vc-text-secondary);
    border-bottom: 1px solid var(--vc-border-light);
}

.tsc-txn-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--vc-border-light);
    color: var(--vc-text-primary);
}

/* Optional label */
.tsc-optional {
    font-weight: normal;
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-secondary);
}

/* Toast */
.tsc-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--vc-color-success);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-medium);
    box-shadow: var(--vc-shadow-lg);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    animation: tsc-slide-in 0.3s ease-out;
}

.tsc-toast.error {
    background: var(--vc-color-danger);
}

.tsc-toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

@keyframes tsc-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ========================================
   Tenant Wallets Page (tw-*)
   ======================================== */

/* Tab bar */
.tw-tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--vc-bg-secondary, #f1f3f5);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.25rem;
}
.tw-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--vc-text-secondary, #6c757d);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.tw-tab:hover { background: rgba(0,0,0,0.04); }
.tw-tab.active {
    background: var(--vc-bg-primary, #fff);
    color: var(--vc-text-primary, #1a1f36);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tw-tab-count {
    background: var(--vc-bg-secondary, #e9ecef);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}
.tw-tab.active .tw-tab-count {
    background: var(--vc-accent, #2563eb);
    color: #fff;
}

/* Table */
.tw-table-wrap {
    background: var(--vc-bg-primary, #fff);
    border: 1px solid var(--vc-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.tw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.tw-table thead { background: var(--vc-bg-secondary, #f8f9fa); }
.tw-table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--vc-text-secondary, #6c757d);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--vc-border, #e5e7eb);
}
.tw-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--vc-border, #e5e7eb);
    vertical-align: middle;
}
.tw-table tbody tr:last-child td { border-bottom: none; }
.tw-table tbody tr:hover { background: rgba(0,0,0,0.015); }

.tw-mono { font-family: var(--vc-font-mono, 'Fira Code', monospace); font-size: 0.82rem; }

.tw-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.tw-customer-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tw-sub {
    font-size: 0.75rem;
    color: var(--vc-text-secondary, #6c757d);
}

/* ========================================
   Dark Mode
   ======================================== */
@media (prefers-color-scheme: dark) {
    .tp-hero-create { background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 50%, #0f2544 100%); }
    .tp-hero-convert { background: linear-gradient(135deg, #0d1f3c 0%, #1e4a8a 50%, #0f2d5e 100%); }
    .tp-hero-transfer { background: linear-gradient(135deg, #061a2e 0%, #163d6a 50%, #0c2a4d 100%); }
}

/* ========================================
   Action Chips Row
   ======================================== */
.tp-action-cards-row {
    display: flex;
    gap: var(--vc-spacing-md);
    margin-bottom: var(--vc-spacing-xl);
    flex-wrap: wrap;
}

.tp-action-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--vc-spacing-md) var(--vc-spacing-lg);
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    text-decoration: none;
    color: var(--vc-text-primary);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-medium);
    transition: all var(--vc-transition-fast);
    min-width: 90px;
    cursor: pointer;
}

.tp-action-chip:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--vc-shadow-md);
    transform: translateY(-2px);
    color: var(--vc-color-primary);
}

.tp-action-chip-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.tp-action-chip-icon.mint { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.tp-action-chip-icon.burn { background: rgba(245, 158, 11, 0.12); color: var(--vc-color-warning); }
.tp-action-chip-icon.send { background: rgba(59, 130, 246, 0.12); color: var(--vc-color-info); }
.tp-action-chip-icon.receive { background: rgba(16, 185, 129, 0.12); color: var(--vc-color-success); }
.tp-action-chip-icon.swap { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.tp-action-chip-icon.deposit { background: rgba(16, 185, 129, 0.12); color: var(--vc-color-success); }

/* ========================================
   Activity Feed Rows
   ======================================== */
.tp-activity-row {
    display: flex;
    align-items: center;
    gap: var(--vc-spacing-sm);
    padding: var(--vc-spacing-sm) var(--vc-spacing-lg);
    border-bottom: 1px solid var(--vc-border-light);
}
.tp-activity-row:last-child { border-bottom: none; }

.tp-activity-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tp-activity-icon.transaction { background: rgba(59, 130, 246, 0.12); color: var(--vc-color-info); }
.tp-activity-icon.customer { background: rgba(16, 185, 129, 0.12); color: var(--vc-color-success); }

.tp-activity-desc {
    flex: 1;
    font-size: var(--vc-font-size-sm);
    color: var(--vc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-activity-time {
    font-size: var(--vc-font-size-xs);
    color: var(--vc-text-muted);
    white-space: nowrap;
}

/* ========================================
   Transaction Amount Colors
   ======================================== */
.tp-txn-amount {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    white-space: nowrap;
}
.tp-txn-amount.positive { color: var(--vc-color-success); }
.tp-txn-amount.negative { color: var(--vc-text-primary); }

.tp-txn-detail-amount.positive { color: var(--vc-color-success); }

/* Extra market icon colors */
.tp-market-icon.xrp { background: rgba(35, 41, 47, 0.12); color: #23292f; }
.tp-market-icon.ada { background: rgba(0, 51, 173, 0.12); color: #0033ad; }
.tp-market-icon.bnb { background: rgba(243, 186, 47, 0.15); color: #f3ba2f; }

/* ═══════════════════════════════════════════════════════════════════════════════
   EXCHANGE MODULE — tex-* prefix
   Fiat ↔ stablecoin trading with glassmorphism design
   Uses --glass-* tokens from vaulce.css :root
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────── */
.tex-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.tex-page-title {
    font-size: 1.6rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
    margin: 0 0 4px;
}
.tex-page-subtitle {
    font-size: 0.88rem;
    color: var(--vc-text-muted);
    margin: 0;
}

/* ── KPI Grid ─────────────────────────────────────── */
.tex-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.tex-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}
.tex-kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.tex-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--vc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.tex-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.tex-kpi-label {
    font-size: 0.78rem;
    color: var(--vc-text-muted);
    font-weight: 500;
}
.tex-kpi-value {
    font-size: 1.35rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}
.tex-val-success { color: #10b981; }
.tex-val-danger  { color: #ef4444; }

/* ── Tab Bar ──────────────────────────────────────── */
.tex-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg-solid);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    width: fit-content;
}
.tex-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--vc-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--vc-text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
}
.tex-tab:hover {
    color: var(--vc-text-primary);
    background: rgba(0,120,212,0.06);
    border-color: rgba(0,120,212,0.15);
}
.tex-tab-active {
    background: var(--vc-color-primary) !important;
    color: #fff !important;
    border-color: var(--vc-color-primary) !important;
    box-shadow: 0 2px 10px rgba(0,120,212,0.35);
}
.tex-tab-badge {
    font-size: 0.72rem;
    padding: 1px 7px;
    border-radius: 100px;
    background: rgba(0,0,0,0.1);
    font-weight: 700;
}
.tex-tab-active .tex-tab-badge {
    background: rgba(255,255,255,0.3);
}

/* ── Trade Layout ─────────────────────────────────── */
.tex-trade-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

/* ── Order Card ──────────────────────────────────── */
.tex-order-card {
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.tex-order-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.tex-order-card > * { position: relative; z-index: 1; }
.tex-order-card-header {
    margin-bottom: 20px;
}
.tex-order-card-title {
    font-size: 1.1rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
    margin: 0 0 4px;
}
.tex-order-card-subtitle {
    font-size: 0.82rem;
    color: var(--vc-text-muted);
}

/* ── Direction Tabs ──────────────────────────────── */
.tex-direction-tabs {
    display: flex;
    gap: 0;
    border-radius: var(--vc-radius-md);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.15);
    background: var(--glass-bg-solid);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}
.tex-dir-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--vc-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.tex-dir-tab:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.1);
}
.tex-dir-tab:hover {
    background: rgba(0,0,0,0.04);
    color: var(--vc-text-primary);
}
.tex-dir-active.tex-dir-buy {
    background: rgba(16,185,129,0.18);
    color: #059669;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #10b981;
}
.tex-dir-active.tex-dir-sell {
    background: rgba(239,68,68,0.18);
    color: #dc2626;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #ef4444;
}
.tex-dir-active.tex-dir-swap {
    background: rgba(59,130,246,0.18);
    color: #2563eb;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #3b82f6;
}

/* ── Form ────────────────────────────────────────── */
.tex-form {
    display: grid;
    gap: 16px;
}
.tex-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tex-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vc-text-secondary);
}
.tex-field-hint {
    font-size: 0.78rem;
    color: var(--vc-text-muted);
}
.tex-field-hint strong {
    color: var(--vc-text-primary);
    font-weight: 600;
}
.tex-select,
.tex-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--vc-radius-md);
    border: 1px solid rgba(0,0,0,0.18);
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    outline: none;
    transition: all var(--vc-transition-fast);
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tex-select:hover,
.tex-input:hover {
    border-color: rgba(0,0,0,0.28);
}
.tex-select:focus,
.tex-input:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.18), 0 1px 2px rgba(0,0,0,0.06);
}
.tex-input::placeholder {
    color: var(--vc-text-muted);
}

/* ── Swap Divider ────────────────────────────────── */
.tex-swap-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}
.tex-swap-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

/* ── Quote Card ──────────────────────────────────── */
.tex-quote-card {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--vc-radius-md);
    background: rgba(59,130,246,0.04);
    border: 1px solid rgba(59,130,246,0.15);
    animation: tex-fadeIn 0.3s ease;
}
.tex-quote-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(59,130,246,0.12);
}
.tex-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
}
.tex-quote-highlight {
    background: rgba(16,185,129,0.06);
    margin: 4px -8px;
    padding: 8px !important;
    border-radius: var(--vc-radius-sm);
}
.tex-quote-val {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-weight: 600;
    color: var(--vc-text-primary);
    font-size: 0.84rem;
}

/* ── Error Message ───────────────────────────────── */
.tex-error-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--vc-radius-md);
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    color: #ef4444;
    font-size: 0.84rem;
    font-weight: 500;
}

/* ── Buttons ─────────────────────────────────────── */
.tex-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--vc-radius-md);
    border: 1px solid transparent;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.tex-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tex-btn-primary {
    background: var(--vc-color-primary);
    border-color: var(--vc-color-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,120,212,0.25);
}
.tex-btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(0,120,212,0.4);
    transform: translateY(-1px);
}
.tex-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,120,212,0.3);
}
.tex-btn-outline {
    background: var(--glass-bg-ultra);
    border: 1px solid rgba(0,0,0,0.18);
    color: var(--vc-text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tex-btn-outline:hover:not(:disabled) {
    border-color: var(--vc-color-primary);
    color: var(--vc-color-primary);
    background: rgba(0,120,212,0.08);
    box-shadow: 0 2px 6px rgba(0,120,212,0.15);
}
.tex-btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}
.tex-btn-execute {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: var(--vc-radius-md);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tex-btn-buy {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #059669;
    color: #fff;
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
}
.tex-btn-buy:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 16px rgba(16,185,129,0.45);
    transform: translateY(-1px);
}
.tex-btn-buy:active:not(:disabled) {
    transform: translateY(0);
}
.tex-btn-sell {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 2px 6px rgba(239,68,68,0.3);
}
.tex-btn-sell:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 16px rgba(239,68,68,0.45);
    transform: translateY(-1px);
}
.tex-btn-sell:active:not(:disabled) {
    transform: translateY(0);
}
.tex-btn-swap {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 2px 6px rgba(59,130,246,0.3);
}
.tex-btn-swap:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 16px rgba(59,130,246,0.45);
    transform: translateY(-1px);
}
.tex-btn-swap:active:not(:disabled) {
    transform: translateY(0);
}

/* ── Sidebar ─────────────────────────────────────── */
.tex-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Balances Card ───────────────────────────────── */
.tex-balances-card {
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    position: relative;
}
.tex-balances-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.tex-balances-header {
    padding: 16px 20px 12px;
    position: relative;
    z-index: 1;
}
.tex-balances-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vc-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tex-balance-section {
    padding: 0 20px 16px;
    position: relative;
    z-index: 1;
}
.tex-balance-section:last-child {
    padding-bottom: 12px;
}
.tex-balance-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vc-text-muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tex-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--vc-radius-sm);
    cursor: pointer;
    transition: all var(--vc-transition-fast);
}
.tex-balance-row:hover {
    background: rgba(255,255,255,0.06);
}
.tex-balance-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tex-balance-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.tex-balance-icon-fiat {
    background: rgba(124,58,237,0.12);
    color: #7c3aed;
}
.tex-balance-icon-coin {
    background: rgba(20,184,166,0.12);
    color: #14b8a6;
}
.tex-balance-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}
.tex-balance-sub {
    font-size: 0.76rem;
    color: var(--vc-text-muted);
}
.tex-balance-amount {
    text-align: right;
}
.tex-balance-value {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}
.tex-balance-currency {
    font-size: 0.72rem;
    color: var(--vc-text-muted);
}

/* ── Volume Card ─────────────────────────────────── */
.tex-volume-card {
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.tex-volume-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.tex-volume-card > * { position: relative; z-index: 1; }
.tex-volume-card h4 {
    margin: 0 0 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vc-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tex-vol-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.tex-vol-row:not(:last-child) {
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tex-vol-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
}
.tex-vol-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tex-dot-buy  { background: #10b981; }
.tex-dot-sell { background: #ef4444; }
.tex-dot-swap { background: #3b82f6; }
.tex-vol-val {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}

/* ── Toolbar (Pairs & History) ───────────────────── */
.tex-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tex-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.tex-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--vc-text-muted);
}
.tex-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border-radius: var(--vc-radius-md);
    border: 1px solid rgba(0,0,0,0.18);
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    outline: none;
    transition: all var(--vc-transition-fast);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tex-search:hover {
    border-color: rgba(0,0,0,0.28);
}
.tex-search:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.18), 0 1px 2px rgba(0,0,0,0.06);
}
.tex-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tex-pill {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(0,0,0,0.15);
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.tex-pill:hover {
    border-color: var(--vc-color-primary);
    color: var(--vc-color-primary);
    background: rgba(0,120,212,0.06);
}
.tex-pill-active {
    background: var(--vc-color-primary);
    color: #fff;
    border-color: var(--vc-color-primary);
    box-shadow: 0 2px 8px rgba(0,120,212,0.3);
    font-weight: 600;
}
.tex-pill-count {
    font-size: 0.72rem;
    opacity: 0.8;
    margin-left: 4px;
}

/* ── Table Card ──────────────────────────────────── */
.tex-table-card {
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    position: relative;
}
.tex-table-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.tex-table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    z-index: 1;
}
.tex-table thead {
    background: rgba(255,255,255,0.04);
}
.tex-table th {
    padding: 12px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vc-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tex-th-right  { text-align: right !important; }
.tex-th-center { text-align: center !important; }
.tex-table td {
    padding: 14px 16px;
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tex-td-right { text-align: right; }
.tex-td-center { text-align: center; }
.tex-td-mono {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.84rem;
}
.tex-td-date {
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
    white-space: nowrap;
}
.tex-row {
    transition: background var(--vc-transition-fast);
}
.tex-row:hover {
    background: rgba(255,255,255,0.06);
}
.tex-row:last-child td {
    border-bottom: none;
}
.tex-table-footer {
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--vc-text-muted);
    border-top: 1px solid var(--glass-border-subtle);
    background: rgba(255,255,255,0.04);
    position: relative;
    z-index: 1;
}

/* ── Pair Cell ───────────────────────────────────── */
.tex-pair-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tex-pair-base {
    font-weight: 700;
    color: var(--vc-text-primary);
}
.tex-pair-quote {
    font-weight: 600;
    color: var(--vc-text-secondary);
}
.tex-mono {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.82rem;
}
.tex-asset-label {
    font-weight: 500;
}

/* ── Badges ──────────────────────────────────────── */
.tex-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tex-badge-buy {
    background: rgba(16,185,129,0.12);
    color: #10b981;
}
.tex-badge-sell {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}
.tex-badge-swap {
    background: rgba(59,130,246,0.12);
    color: #3b82f6;
}
.tex-badge-success {
    background: rgba(16,185,129,0.12);
    color: #10b981;
}
.tex-badge-info {
    background: rgba(59,130,246,0.12);
    color: #3b82f6;
}
.tex-badge-danger {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}

/* ── Modal / Overlay ─────────────────────────────── */
.tex-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tex-fadeIn 0.2s ease;
}
.tex-modal {
    width: 480px;
    max-width: 94vw;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    animation: tex-slideUp 0.25s ease;
}
.tex-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tex-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}
.tex-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--vc-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: var(--vc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--vc-transition-fast);
}
.tex-modal-close:hover {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}
.tex-modal-body {
    padding: 20px 24px;
}
.tex-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--glass-border-subtle);
}
.tex-confirm-direction {
    text-align: center;
    margin-bottom: 16px;
}
.tex-confirm-grid {
    display: grid;
    gap: 0;
}
.tex-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tex-confirm-row:last-child {
    border-bottom: none;
}
.tex-confirm-highlight {
    background: rgba(16,185,129,0.06);
    margin: 4px -8px;
    padding: 10px 8px !important;
    border-radius: var(--vc-radius-sm);
    border-bottom: none !important;
}
.tex-confirm-label {
    font-size: 0.84rem;
    color: var(--vc-text-muted);
}
.tex-confirm-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}

/* ── Empty State ─────────────────────────────────── */
.tex-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}
.tex-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(59,130,246,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    margin-bottom: 20px;
    opacity: 0.6;
}
.tex-empty-state h3 {
    font-size: 1.1rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
    margin: 0 0 8px;
}
.tex-empty-state p {
    font-size: 0.88rem;
    color: var(--vc-text-muted);
    margin: 0;
    max-width: 360px;
}

/* ── Toast ───────────────────────────────────────── */
.tex-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--vc-radius-md);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    animation: tex-slideUp 0.3s ease;
    max-width: 420px;
}
.tex-toast-success {
    border-left: 3px solid #10b981;
}
.tex-toast-error {
    border-left: 3px solid #ef4444;
}
.tex-toast-icon {
    flex-shrink: 0;
}
.tex-toast-success .tex-toast-icon { color: #10b981; }
.tex-toast-error .tex-toast-icon   { color: #ef4444; }
.tex-toast-msg {
    font-size: 0.86rem;
    color: var(--vc-text-primary);
    font-weight: 500;
}
.tex-toast-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--vc-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0 0 8px;
}
.tex-toast-close:hover { color: var(--vc-text-primary); }

/* ── Skeleton Loading ────────────────────────────── */
.tex-skeleton-wrap {
    display: grid;
    gap: 20px;
}
.tex-skeleton {
    border-radius: var(--vc-radius-md);
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: tex-shimmer 1.5s infinite;
}
.tex-skeleton-header { height: 60px; }
.tex-skeleton-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.tex-skeleton-kpi { height: 76px; border-radius: var(--vc-radius-lg); }
.tex-skeleton-tabs { height: 44px; width: 320px; }
.tex-skeleton-body { height: 400px; border-radius: var(--vc-radius-lg); }

/* ── Spinner ─────────────────────────────────────── */
.tex-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tex-spin 0.6s linear infinite;
}

/* ── Animations ──────────────────────────────────── */
@keyframes tex-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tex-slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tex-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes tex-spin {
    to { transform: rotate(360deg); }
}

/* ── Dark Mode ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .tex-tabs {
        border-color: rgba(255,255,255,0.12);
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .tex-tab:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.12);
    }
    .tex-direction-tabs {
        border-color: rgba(255,255,255,0.12);
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .tex-dir-tab:not(:last-child) {
        border-right-color: rgba(255,255,255,0.08);
    }
    .tex-dir-tab:hover { background: rgba(255,255,255,0.06); }
    .tex-dir-active.tex-dir-buy { color: #34d399; }
    .tex-dir-active.tex-dir-sell { color: #f87171; }
    .tex-dir-active.tex-dir-swap { color: #60a5fa; }
    .tex-select,
    .tex-input,
    .tex-search {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .tex-select:hover,
    .tex-input:hover,
    .tex-search:hover {
        border-color: rgba(255,255,255,0.25);
    }
    .tex-pill {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .tex-btn-outline {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .tex-balance-row:hover { background: rgba(255,255,255,0.04); }
    .tex-row:hover { background: rgba(255,255,255,0.04); }
    .tex-skeleton {
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
        background-size: 200% 100%;
    }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
    .tex-trade-layout {
        grid-template-columns: 1fr;
    }
    .tex-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}
@media (max-width: 768px) {
    .tex-page-header { flex-direction: column; }
    .tex-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .tex-toolbar { flex-direction: column; }
    .tex-sidebar { grid-template-columns: 1fr; }
    .tex-table th:nth-child(n+6),
    .tex-table td:nth-child(n+6) { display: none; }
}
@media (max-width: 480px) {
    .tex-kpi-grid { grid-template-columns: 1fr; }
    .tex-direction-tabs { flex-direction: column; }
    .tex-dir-tab:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .tex-modal { width: 100%; max-width: 100%; border-radius: var(--vc-radius-lg) var(--vc-radius-lg) 0 0; }
    .tex-table th:nth-child(n+4),
    .tex-table td:nth-child(n+4) { display: none; }
}

/* ============================================
   Transactions Module (.ttx-*)
   ============================================ */

.ttx-new-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .ttx-new-layout {
        grid-template-columns: 1fr;
    }
}

.ttx-form-card {
    background: var(--vc-surface);
    border: 1px solid var(--vc-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.ttx-type-tabs {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--vc-border);
    margin-bottom: 1.25rem;
}

.ttx-type-tab {
    flex: 1;
    padding: 0.55rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--vc-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-right: 1px solid var(--vc-border);
}

.ttx-type-tab:last-child {
    border-right: none;
}

.ttx-type-tab:hover {
    background: rgba(20, 184, 166, 0.06);
}

.ttx-type-tab.active.deposit {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.ttx-type-tab.active.withdrawal {
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
}

.ttx-type-tab.active.transfer {
    background: rgba(20, 184, 166, 0.12);
    color: var(--vc-color-primary);
}

.ttx-type-tab.active.settlement {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.ttx-type-tab.active.treasury {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.ttx-form {
    display: grid;
    gap: 0.85rem;
}

.ttx-submit-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}

.ttx-balances-card {
    background: var(--vc-surface);
    border: 1px solid var(--vc-border);
    border-radius: 12px;
    padding: 1.25rem;
}

.ttx-balances-card h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vc-text-primary);
    margin: 0 0 0.75rem 0;
}

.ttx-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--vc-border);
}

.ttx-balance-row:last-child {
    border-bottom: none;
}

.ttx-balance-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ttx-balance-name strong {
    font-size: 0.82rem;
    color: var(--vc-text-primary);
}

.ttx-balance-amount {
    text-align: right;
}

.ttx-balance-amount strong {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.82rem;
    color: var(--vc-text-primary);
}

/* Transaction detail dialog */
.ttx-detail-grid {
    display: grid;
    gap: 0;
    margin: 1rem 0;
}

.ttx-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--vc-border);
    gap: 1rem;
}

.ttx-detail-row:last-child {
    border-bottom: none;
}

.ttx-detail-label {
    font-size: 0.78rem;
    color: var(--vc-text-secondary);
    font-weight: 500;
    min-width: 120px;
    flex-shrink: 0;
}

.ttx-detail-value {
    font-size: 0.82rem;
    color: var(--vc-text-primary);
    text-align: right;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED TENANT PORTAL UI COMPONENTS  (.tsc-*)
   Buttons, tabs, tables, dialogs, forms, alerts used across pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────── */
.tsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: transparent;
    color: var(--vc-text-secondary);
    border: 1px solid var(--vc-border-medium, var(--vc-border));
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.tsc-btn:hover {
    background: var(--vc-bg-hover, rgba(0,0,0,0.04));
    color: var(--vc-text-primary);
}
.tsc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tsc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--vc-color-primary);
    color: var(--vc-text-inverse);
    border: none;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.tsc-btn-primary:hover:not(:disabled) {
    background: var(--vc-color-primary-hover);
    box-shadow: var(--vc-shadow-md);
    transform: translateY(-1px);
}
.tsc-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tsc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: transparent;
    color: var(--vc-color-primary);
    border: 1px solid var(--vc-color-primary);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: var(--vc-font-weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.tsc-btn-outline:hover {
    background: rgba(0, 120, 212, 0.08);
    box-shadow: var(--vc-shadow-sm);
}

/* ── Tab Bar ─────────────────────────────── */
.tsc-tab-bar {
    display: flex;
    gap: 0.25rem;
    background: var(--vc-bg-secondary, #f1f3f5);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.25rem;
}
.tsc-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--vc-text-secondary, #6c757d);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.tsc-tab:hover {
    background: rgba(0,0,0,0.04);
}
.tsc-tab-active,
.tsc-tab.tsc-tab-active {
    background: var(--vc-bg-primary, #fff);
    color: var(--vc-text-primary, #1a1f36);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Tables ──────────────────────────────── */
.tsc-table-wrap {
    background: var(--vc-bg-primary, #fff);
    border: 1px solid var(--vc-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.tsc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.tsc-table thead {
    background: var(--vc-bg-secondary, #f8f9fa);
}
.tsc-table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--vc-text-secondary, #6c757d);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--vc-border, #e5e7eb);
}
.tsc-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--vc-border, #e5e7eb);
    vertical-align: middle;
}
.tsc-table tbody tr:last-child td {
    border-bottom: none;
}
.tsc-table tbody tr:hover {
    background: rgba(0,0,0,0.015);
}

/* ── Alerts ──────────────────────────────── */
.tsc-alert {
    padding: 0.65rem 1rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-font-size-sm);
    font-weight: 500;
    margin-bottom: 1rem;
}
.tsc-alert-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--vc-color-success);
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.tsc-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--vc-color-danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Dialog / Modal ──────────────────────── */
.tsc-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: vc-fade-in 150ms ease;
}
.tsc-dialog {
    background: var(--vc-bg-card, #fff);
    border: 1px solid var(--vc-border-light, #e5e7eb);
    border-radius: var(--vc-radius-xl, 16px);
    padding: 1.5rem;
    min-width: 420px;
    max-width: 560px;
    width: 90vw;
    box-shadow: var(--vc-shadow-xl);
    animation: vc-slide-up 200ms ease;
}
.tsc-dialog h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}
.tsc-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vc-border-light, #e5e7eb);
}

/* ── Form Grid ───────────────────────────── */
.tsc-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 1rem;
    align-items: center;
}
.tsc-form-grid label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vc-text-secondary, #6c757d);
}

/* ── Form Inputs ─────────────────────────── */
.tsc-input,
.tsc-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: var(--vc-font-size-sm, 0.85rem);
    font-family: inherit;
    color: var(--vc-text-primary, #1a1f36);
    background: var(--vc-bg-input, #fff);
    border: 1px solid var(--vc-border-medium, var(--vc-border, #d1d5db));
    border-radius: var(--vc-radius-md, 8px);
    transition: border-color 0.15s ease;
}
.tsc-input:focus,
.tsc-select:focus {
    outline: none;
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

@keyframes vc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes vc-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   TREASURY & LIQUIDITY MODULE  (.ttr-*)
   ═══════════════════════════════════════════════════════════════════ */

.ttr-section {
    background: var(--vc-surface);
    border: 1px solid var(--vc-border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.ttr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ttr-section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}

.ttr-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Ratio badge */
.ttr-ratio-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}

.ttr-ratio-ok {
    background: rgba(34, 197, 94, 0.12);
    color: var(--vc-color-success);
}

.ttr-ratio-warn {
    background: rgba(239, 68, 68, 0.12);
    color: var(--vc-color-danger);
}

/* Status badges */
.ttr-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}

.ttr-status-active, .ttr-status-completed {
    background: rgba(34, 197, 94, 0.12);
    color: var(--vc-color-success);
}

.ttr-status-scheduled, .ttr-status-inprogress {
    background: rgba(234, 179, 8, 0.12);
    color: var(--vc-color-warning);
}

.ttr-status-paused, .ttr-status-draining, .ttr-status-inactive {
    background: rgba(100, 116, 139, 0.12);
    color: var(--vc-text-secondary);
}

.ttr-status-failed {
    background: rgba(239, 68, 68, 0.12);
    color: var(--vc-color-danger);
}

.ttr-status-accrued {
    background: rgba(59, 130, 246, 0.12);
    color: var(--vc-color-primary);
}

.ttr-status-distributed {
    background: rgba(34, 197, 94, 0.12);
    color: var(--vc-color-success);
}

/* Pool card */
.ttr-pool-card {
    background: var(--vc-surface);
    border: 1px solid var(--vc-border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.ttr-pool-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ttr-pool-header h4 {
    margin: 0 0.5rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline;
}

.ttr-pool-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--vc-text-secondary);
    flex-wrap: wrap;
}

.ttr-pool-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Allocation bar */
.ttr-alloc-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--vc-bg);
    border: 1px solid var(--vc-border);
}

.ttr-alloc-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    transition: flex 0.3s ease;
}

.ttr-alloc-segment:nth-child(1) { background: var(--vc-color-primary); }
.ttr-alloc-segment:nth-child(2) { background: var(--vc-color-success); }
.ttr-alloc-segment:nth-child(3) { background: var(--vc-color-warning); }
.ttr-alloc-segment:nth-child(4) { background: #8b5cf6; }
.ttr-alloc-segment:nth-child(5) { background: #ec4899; }
.ttr-alloc-segment:nth-child(n+6) { background: #64748b; }

.ttr-alloc-segment span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

/* Drift indicators */
.ttr-drift-ok {
    color: var(--vc-color-success);
    font-weight: 600;
    font-size: 0.82rem;
}

.ttr-drift-warn {
    color: var(--vc-color-danger);
    font-weight: 600;
    font-size: 0.82rem;
}

/* ========================================
   Market Explorer Page (me-*)
   ======================================== */

/* Change indicators */
.me-change { font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.me-change.positive { color: var(--vc-color-success); }
.me-change.negative { color: var(--vc-color-danger); }

/* Coin table */
.me-table tbody tr { cursor: pointer; transition: background 0.15s; }
.me-table tbody tr:hover { background: rgba(0, 120, 212, 0.04) !important; }

.me-rank { font-weight: 600; color: var(--vc-text-secondary); font-size: 0.82rem; }

.me-coin-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.me-coin-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: contain;
}

.me-coin-icon-placeholder {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    color: var(--vc-color-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.me-coin-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.me-coin-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-coin-ticker {
    font-size: 0.72rem;
    color: var(--vc-text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

/* Sparkline chart */
.me-sparkline {
    width: 120px;
    height: 40px;
    display: block;
}

/* Favourite button */
.me-fav-btn {
    background: none;
    border: none;
    color: var(--vc-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}
.me-fav-btn:hover { color: #f59e0b; }
.me-fav-btn.active { color: #f59e0b; }

/* ========================================
   Asset Detail Page (ad-*)
   ======================================== */

.ad-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ad-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--vc-border-light);
    color: var(--vc-text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}
.ad-back:hover { border-color: var(--vc-color-primary); color: var(--vc-color-primary); background: rgba(0,120,212,0.06); }

.ad-coin-img { width: 48px; height: 48px; border-radius: 50%; }

.ad-coin-title { flex: 1; min-width: 0; }
.ad-coin-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vc-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-ticker { font-size: 0.9rem; color: var(--vc-text-muted); font-weight: 500; }

.ad-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.ad-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vc-text-primary);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* 2-column layout: chart + trade panel */
.ad-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .ad-layout { grid-template-columns: 1fr; }
}

.ad-chart-section { min-width: 0; }
.ad-trade-section { min-width: 0; }

/* Timeframe buttons */
.ad-timeframes { display: flex; gap: 2px; }
.ad-tf-btn {
    padding: 4px 12px;
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-md);
    background: transparent;
    color: var(--vc-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ad-tf-btn:hover { border-color: var(--vc-color-primary); color: var(--vc-color-primary); }
.ad-tf-btn.active {
    background: var(--vc-color-primary);
    color: #fff;
    border-color: var(--vc-color-primary);
}

/* Stock chart wrapper */
.ad-stock-chart-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 380px;
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    overflow: visible;
}

/* Custom chart toolbar (replaces Syncfusion's built-in period selector) */
.ad-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 4px;
}
.ad-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.ad-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--vc-border-light);
    margin: 0 4px;
}
.ad-chart-select {
    padding: 4px 8px;
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-md);
    background: transparent;
    color: var(--vc-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
    outline: none;
}
.ad-chart-select:hover,
.ad-chart-select:focus { border-color: var(--vc-color-primary); color: var(--vc-color-primary); }

/* Hide Syncfusion's internal period-selector toolbar when using SfChart
   inside the stock-chart wrapper (safety net in case SfChart renders one). */
.ad-stock-chart-wrap .e-toolbar,
.ad-stock-chart-wrap .e-period-selector {
    display: none !important;
}

.ad-chart { width: 100%; height: 380px; }
.ad-chart-empty { color: var(--vc-text-muted); font-size: 0.9rem; }

.ad-chart-range {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px 12px;
    font-size: 0.78rem;
    color: var(--vc-text-muted);
}

/* Market data grid */
.ad-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
@media (max-width: 768px) {
    .ad-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.ad-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vc-border-light);
    border-right: 1px solid var(--vc-border-light);
}
.ad-stat:nth-child(3n) { border-right: none; }

.ad-stat-label {
    font-size: 0.72rem;
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}
.ad-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}

/* Trade panel */
.ad-trade-tabs {
    display: flex;
    border-bottom: 1px solid var(--vc-border-light);
}
.ad-trade-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--vc-text-secondary);
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
}
.ad-trade-tab.active.buy { color: var(--vc-color-success); border-bottom-color: var(--vc-color-success); }
.ad-trade-tab.active.sell { color: var(--vc-color-danger); border-bottom-color: var(--vc-color-danger); }

.ad-trade-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.ad-trade-field { display: flex; flex-direction: column; gap: 4px; }
.ad-trade-field label { font-size: 0.78rem; color: var(--vc-text-secondary); font-weight: 500; }

.ad-trade-input-group { position: relative; }
.ad-trade-currency {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--vc-text-muted);
    font-size: 0.9rem;
}

.ad-quick-amounts { display: flex; gap: 6px; }
.ad-amount-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--vc-border-light);
    border-radius: var(--vc-radius-md);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vc-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.ad-amount-btn:hover { border-color: var(--vc-color-primary); color: var(--vc-color-primary); }

.ad-trade-preview {
    background: var(--vc-bg-hover);
    border-radius: var(--vc-radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ad-trade-preview-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
}

.ad-trade-btn {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
    margin-top: 4px;
}
.ad-trade-btn.buy { background: var(--vc-color-success); }
.ad-trade-btn.buy:hover { background: #059669; }
.ad-trade-btn.sell { background: var(--vc-color-danger); }
.ad-trade-btn.sell:hover { background: #dc2626; }

/* ========================================
   Portfolio Dashboard Page (pf-*)
   ======================================== */

.pf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.pf-balance-block { display: flex; flex-direction: column; gap: 4px; }
.pf-balance-label { font-size: 0.82rem; color: var(--vc-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.pf-balance-row { display: flex; align-items: baseline; gap: 12px; }
.pf-balance-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vc-text-primary);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.pf-action-btns { display: flex; gap: 8px; }

/* Allocation bar */
.pf-alloc-bar {
    display: flex;
    height: 24px;
    border-radius: var(--vc-radius-md);
    overflow: hidden;
    gap: 2px;
    margin-bottom: 8px;
}

.pf-alloc-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-alloc-segment:nth-child(1) { background: #f7931a; }
.pf-alloc-segment:nth-child(2) { background: #627eea; }
.pf-alloc-segment:nth-child(3) { background: #00ffa3; }
.pf-alloc-segment:nth-child(4) { background: #2775ca; }
.pf-alloc-segment:nth-child(5) { background: #26a17b; }

.pf-alloc-label { padding: 0 4px; }

/* Mini allocation bar in table */
.pf-alloc-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}
.pf-alloc-mini-bar {
    height: 6px;
    border-radius: 3px;
    min-width: 4px;
}
.pf-alloc-mini span {
    font-size: 0.78rem;
    color: var(--vc-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* Transaction type cell */
.pf-txn-type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   MARKET EXPLORER — Global Bar + Tabs + Filters + Table
   ═══════════════════════════════════════════════════════════ */

.me-global-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--vc-surface-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--vc-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    margin-bottom: 16px;
    overflow-x: auto;
    white-space: nowrap;
}
.me-global-item { display: inline-flex; align-items: center; gap: 4px; }
.me-global-item strong { color: var(--vc-text-primary, #fff); }
.me-global-sep { color: var(--vc-border, rgba(255,255,255,0.2)); margin: 0 4px; }
.me-fear-greed { display: inline-flex; align-items: center; gap: 6px; }
.me-fg-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.76rem;
    background: rgba(34,197,94,0.18);
    color: #4ade80;
}
.me-fg-badge.greed   { background: rgba(34,197,94,0.18); color: #4ade80; }
.me-fg-badge.fear    { background: rgba(239,68,68,0.18);  color: #f87171; }
.me-fg-badge.neutral { background: rgba(234,179,8,0.18);  color: #facc15; }

.me-section-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--vc-border, rgba(255,255,255,0.08));
    margin-bottom: 16px;
}
.me-section-tab {
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.me-section-tab:hover { color: var(--vc-text-primary, #fff); }
.me-section-tab.active {
    color: var(--vc-accent, #3b82f6);
    border-bottom-color: var(--vc-accent, #3b82f6);
}

.me-filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.me-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.me-pill {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--vc-text-muted, rgba(255,255,255,0.6));
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.me-pill:hover { border-color: var(--vc-accent, #3b82f6); color: var(--vc-text-primary, #fff); }
.me-pill.active {
    background: var(--vc-accent, #3b82f6);
    border-color: var(--vc-accent, #3b82f6);
    color: #fff;
}
.me-filters-right { display: flex; align-items: center; gap: 8px; }
.me-search-input {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: var(--vc-surface-secondary, rgba(255,255,255,0.04));
    color: var(--vc-text-primary, #fff);
    font-size: 0.82rem;
    outline: none;
    min-width: 160px;
}
.me-search-input::placeholder { color: var(--vc-text-muted, rgba(255,255,255,0.4)); }
.me-refresh-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--vc-text-muted, rgba(255,255,255,0.6));
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.me-refresh-btn:hover { color: var(--vc-text-primary, #fff); }

/* Market table column widths */
.me-col-rank  { width: 40px; text-align: center; }
.me-col-coin  { min-width: 160px; }
.me-col-right { text-align: right; white-space: nowrap; }
.me-col-chart { width: 90px; text-align: center; }

.me-change-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}
.me-change-pill.positive { background: rgba(34,197,94,0.15); color: #4ade80; }
.me-change-pill.negative { background: rgba(239,68,68,0.15);  color: #f87171; }

.me-trade-link {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--vc-accent, #3b82f6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.me-trade-link:hover { opacity: .85; color: #fff; text-decoration: none; }

.me-baskets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 10px;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    text-align: center;
}
.me-baskets-empty h4 { color: var(--vc-text-primary, #fff); margin: 0; }
.me-baskets-empty p  { margin: 0; font-size: 0.88rem; max-width: 320px; }

/* ═══════════════════════════════════════════════════════════
   ASSET DETAIL PAGE
   ═══════════════════════════════════════════════════════════ */

.ad-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    margin-bottom: 16px;
}
.ad-breadcrumb a { color: var(--vc-text-muted, rgba(255,255,255,0.5)); text-decoration: none; }
.ad-breadcrumb a:hover { color: var(--vc-text-primary, #fff); }
.ad-breadcrumb .sep { color: var(--vc-border, rgba(255,255,255,0.25)); }
.ad-breadcrumb .current { color: var(--vc-text-primary, #fff); font-weight: 600; }

.ad-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .ad-layout { grid-template-columns: 1fr; }
}
.ad-left  { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ad-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }

.ad-price-sub {
    font-size: 0.82rem;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    font-weight: 500;
    margin-left: 4px;
}
.ad-change-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ad-header-time { font-size: 0.75rem; color: var(--vc-text-muted, rgba(255,255,255,0.4)); margin-top: 2px; }

.ad-chart-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.ad-tf-btns { display: flex; gap: 4px; }
.ad-tf-btn {
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.ad-tf-btn:hover { color: var(--vc-text-primary, #fff); }
.ad-tf-btn.active {
    background: var(--vc-accent, #3b82f6);
    border-color: var(--vc-accent, #3b82f6);
    color: #fff;
}
.ad-chart-wrap {
    position: relative;
    display: flex;
    gap: 6px;
}
.ad-chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--vc-text-muted, rgba(255,255,255,0.35));
    padding-bottom: 2px;
    min-width: 52px;
    text-align: right;
}

.ad-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--vc-border, rgba(255,255,255,0.08));
    margin-bottom: 12px;
}
.ad-subtab {
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .12s;
}
.ad-subtab:hover { color: var(--vc-text-primary, #fff); }
.ad-subtab.active { color: var(--vc-accent, #3b82f6); border-bottom-color: var(--vc-accent, #3b82f6); }

.ad-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.ad-stat-item { display: flex; flex-direction: column; gap: 3px; }
.ad-stat-label { font-size: 0.73rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.ad-stat-value { font-size: 0.93rem; font-weight: 600; color: var(--vc-text-primary, #fff); }

/* Trade Card */
.ad-trade-card {
    background: var(--vc-surface, rgba(255,255,255,0.05));
    border: 1px solid var(--vc-border, rgba(255,255,255,0.09));
    border-radius: 12px;
    padding: 16px;
}
.ad-trade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.ad-trade-tabs { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--vc-border, rgba(255,255,255,0.1)); }
.ad-trade-tab {
    flex: 1;
    padding: 7px 16px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    transition: all .12s;
}
.ad-trade-tab.active.buy  { background: rgba(34,197,94,0.2); color: #4ade80; }
.ad-trade-tab.active.sell { background: rgba(239,68,68,0.2);  color: #f87171; }
.ad-order-type-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: var(--vc-surface-secondary, rgba(255,255,255,0.04));
    color: var(--vc-text-primary, #fff);
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
}

.ad-amount-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 6px;
    min-height: 52px;
}
.ad-amount-value { font-size: 2.2rem; font-weight: 700; color: var(--vc-text-primary, #fff); }
.ad-amount-currency { font-size: 1rem; font-weight: 600; color: var(--vc-text-muted, rgba(255,255,255,0.5)); }
.ad-coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.12));
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--vc-text-primary, #fff);
    background: var(--vc-surface-secondary, rgba(255,255,255,0.04));
}
.ad-coin-pill-icon { font-size: 0.65rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); }
.ad-approx-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    margin-bottom: 10px;
}
.ad-quick-amounts {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ad-quick-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--vc-text-secondary, rgba(255,255,255,0.7));
    font-size: 0.8rem;
    cursor: pointer;
    transition: all .12s;
}
.ad-quick-btn:hover { border-color: var(--vc-accent, #3b82f6); color: #fff; }
.ad-quick-btn.clear { color: var(--vc-text-muted, rgba(255,255,255,0.4)); }

.ad-pay-section { margin-bottom: 14px; }
.ad-pay-label  { font-size: 0.78rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.ad-pay-tabs   { display: flex; gap: 6px; margin-bottom: 10px; }
.ad-pay-tab {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.ad-pay-tab.active { background: var(--vc-accent, #3b82f6); border-color: var(--vc-accent, #3b82f6); color: #fff; }

.ad-pay-methods { display: flex; flex-direction: column; gap: 6px; }
.ad-pay-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.08));
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--vc-surface-secondary, rgba(255,255,255,0.03));
}
.ad-pay-method:hover { border-color: var(--vc-border-hover, rgba(255,255,255,0.2)); }
.ad-pay-method.selected { border-color: var(--vc-accent, #3b82f6); background: rgba(59,130,246,0.06); }
.ad-pay-method-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
}
.ad-pay-eur     { background: rgba(59,130,246,0.2); color: #60a5fa; }
.ad-pay-gpay    { background: rgba(234,179,8,0.2);  color: #facc15; }
.ad-pay-card    { background: rgba(139,92,246,0.2); color: #a78bfa; }
.ad-pay-wallet  { background: rgba(249,115,22,0.2); color: #fb923c; }
.ad-pay-moonpay { background: rgba(236,72,153,0.2); color: #f472b6; }
.ad-pay-method-info { flex: 1; }

/* ── Jupiter DEX Integration ─────────────────────────────── */
.jup-powered-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    background: rgba(199,146,234,0.12); border: 1px solid rgba(199,146,234,0.25);
    font-size: 0.7rem; font-weight: 600; color: #c792ea; letter-spacing: 0.02em;
}
.jup-powered-badge svg { opacity: 0.8; }
.jup-quote-box {
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.jup-quote-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.jup-quote-row .label { color: var(--vc-text-muted, rgba(255,255,255,0.5)); }
.jup-quote-row .value { color: var(--vc-text-primary, #fff); font-weight: 600; }
.jup-impact-warn { color: #f59e0b; font-size: 0.75rem; font-weight: 500; }
.jup-quote-actions { display: flex; gap: 8px; margin-top: 4px; }
.jup-quote-btn {
    flex: 1; padding: 10px; border-radius: 8px; border: none;
    font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.jup-quote-btn.quote {
    background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3);
}
.jup-quote-btn.quote:hover { background: rgba(139,92,246,0.25); }
.jup-quote-btn.execute.buy { background: var(--vc-color-success, #10b981); color: #fff; }
.jup-quote-btn.execute.buy:hover { background: #059669; }
.jup-quote-btn.execute.sell { background: var(--vc-color-danger, #ef4444); color: #fff; }
.jup-quote-btn.execute.sell:hover { background: #dc2626; }
.jup-quote-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   On-Ramp (Buy/Sell) — onr-* classes
   ============================================================ */

/* ── Layout ──────────────────────────────────────────────── */
.onr-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    margin-top: 20px;
    align-items: start;
}
@media (max-width: 960px) {
    .onr-layout { grid-template-columns: 1fr; }
}

.onr-form-col {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: 16px;
    padding: 24px;
}

.onr-section { margin-bottom: 20px; }

/* ── Form primitives ──────────────────────────────────────── */
.onr-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vc-text-secondary);
    margin-bottom: 8px;
}

.onr-select,
.onr-input {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--vc-border-light);
    border-radius: 10px;
    background: var(--vc-bg-secondary);
    color: var(--vc-text-primary);
    font-size: .88rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    appearance: auto;
}
.onr-select:focus,
.onr-input:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.onr-select:disabled,
.onr-input:disabled { opacity: .5; cursor: not-allowed; }

.onr-hint {
    font-size: .73rem;
    color: var(--vc-text-secondary);
    margin-top: 5px;
    display: block;
    line-height: 1.45;
}

/* ── Asset selector grid ──────────────────────────────────── */
.onr-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
}
.onr-asset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 11px 6px 9px;
    border: 1.5px solid var(--vc-border-light);
    border-radius: 12px;
    background: var(--vc-bg-card);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    text-align: center;
    line-height: 1.2;
}
.onr-asset-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.onr-asset-card.selected {
    border-color: var(--vc-color-primary);
    background: rgba(99,102,241,.07);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.onr-asset-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
/* Both names supported — razor uses onr-asset-symbol */
.onr-asset-sym,
.onr-asset-symbol { font-weight: 700; font-size: .78rem; color: var(--vc-text-primary); margin-top: 1px; }
.onr-asset-name   { font-size: .66rem; color: var(--vc-text-secondary); }

/* ── Payment method tabs ──────────────────────────────────── */
.onr-pm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.onr-pm-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border: 1.5px solid var(--vc-border-light);
    border-radius: 10px;
    background: var(--vc-bg-card);
    cursor: pointer;
    font-size: .82rem; font-weight: 500;
    color: var(--vc-text-primary);
    transition: border-color .15s, background .15s, color .15s;
}
.onr-pm-tab:hover  { border-color: var(--vc-color-primary); }
.onr-pm-tab.active {
    border-color: var(--vc-color-primary);
    background: rgba(99,102,241,.07);
    color: var(--vc-color-primary);
    font-weight: 600;
}
.onr-pm-badge {
    font-size: .62rem; font-weight: 700;
    background: var(--vc-bg-secondary);
    padding: 2px 7px;
    border-radius: 20px;
    color: var(--vc-text-secondary);
    letter-spacing: .02em;
}
.onr-pm-tab.active .onr-pm-badge {
    background: rgba(99,102,241,.12);
    color: var(--vc-color-primary);
}

/* ── Amount row ────────────────────────────────────────────── */
.onr-amount-row { display: flex; gap: 8px; align-items: stretch; }
.onr-amount-input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.5rem;
    font-weight: 800;
    padding: 11px 14px;
    border: 2px solid var(--vc-border-light);
    border-radius: 12px;
    background: var(--vc-bg-card);
    color: var(--vc-text-primary);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    letter-spacing: -.01em;
    width: 0;
}
.onr-amount-input:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.onr-amount-input::placeholder { color: var(--vc-text-secondary); opacity: .5; font-weight: 400; }
.onr-currency-select {
    flex-shrink: 0;
    width: 80px;
    border: 2px solid var(--vc-border-light);
    border-radius: 12px;
    background: var(--vc-bg-card, #fff);
    color: var(--vc-text-primary);
    padding: 0 10px;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onr-currency-select:focus { border-color: var(--vc-color-primary); outline: none; }

/* ── Estimated receive box ────────────────────────────────── */
.onr-receive-box {
    background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(16,185,129,.04) 100%);
    border: 1.5px solid rgba(99,102,241,.2);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 6px;
}
.onr-receive-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vc-text-secondary);
    margin-bottom: 6px;
}
.onr-receive-amount {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--vc-text-primary);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.onr-receive-symbol {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vc-color-primary);
    margin-left: 5px;
    vertical-align: middle;
}
.onr-receive-rate {
    font-size: .74rem;
    color: var(--vc-text-secondary);
    margin-top: 4px;
}

/* ── Quote box ─────────────────────────────────────────────── */
.onr-quote-box {
    background: var(--vc-bg-secondary);
    border: 1px solid var(--vc-border-light);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 10px;
}
.onr-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: .83rem;
    border-bottom: 1px solid var(--vc-border-light);
}
.onr-quote-row:last-child { border-bottom: none; }
.onr-quote-row span { color: var(--vc-text-secondary); }
.onr-quote-row strong { font-weight: 700; color: var(--vc-text-primary); }

/* ── CTA row ───────────────────────────────────────────────── */
.onr-cta-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.onr-btn-primary {
    flex: 1;
    padding: 14px 22px;
    background: var(--vc-color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: .94rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s, opacity .15s, transform .1s, box-shadow .15s;
    min-width: 150px;
    box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.onr-btn-primary:hover {
    background: var(--vc-color-primary-hover);
    box-shadow: 0 6px 20px rgba(99,102,241,.38);
    transform: translateY(-1px);
}
.onr-btn-primary:active  { transform: translateY(0); }
.onr-btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.onr-btn-ghost {
    flex: 0 0 auto;
    padding: 14px 20px;
    background: transparent;
    color: var(--vc-color-primary);
    border: 1.5px solid var(--vc-color-primary);
    border-radius: 12px;
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
}
.onr-btn-ghost:hover {
    background: rgba(99,102,241,.07);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    transform: translateY(-1px);
}
.onr-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

/* ── Info column ───────────────────────────────────────────── */
.onr-info-col { display: flex; flex-direction: column; gap: 16px; }
.onr-info-card {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: 14px;
    padding: 18px;
}
.onr-info-title {
    font-weight: 700;
    font-size: .86rem;
    margin-bottom: 12px;
    color: var(--vc-text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}
.onr-info-title::before {
    content: '';
    display: inline-block;
    width: 3px; height: 14px;
    border-radius: 2px;
    background: var(--vc-color-primary);
    flex-shrink: 0;
}
.onr-info-highlight {
    border-color: rgba(99,102,241,.3);
    background: linear-gradient(135deg, rgba(99,102,241,.05) 0%, rgba(99,102,241,.02) 100%);
}
.onr-info-note { font-size: .75rem; color: var(--vc-text-secondary); margin: 6px 0 0; line-height: 1.5; }

/* Live rates */
.onr-rate-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--vc-border-light);
    font-size: .82rem;
}
.onr-rate-row:last-child { border-bottom: none; }
.onr-rate-sym { font-weight: 700; }
.onr-rate-val { color: var(--vc-text-secondary); font-variant-numeric: tabular-nums; }

/* How it works steps */
.onr-steps { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.onr-steps li {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 0;
    font-size: .82rem;
    color: var(--vc-text-secondary);
    border-bottom: 1px solid var(--vc-border-light);
}
.onr-steps li:last-child { border-bottom: none; }
.onr-step-n {
    min-width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--vc-color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(99,102,241,.3);
}

/* ── Confirmation panel (post-payment) ───────────────────── */
.onr-confirm-panel {
    background: linear-gradient(135deg, rgba(16,185,129,.07) 0%, rgba(99,102,241,.04) 100%);
    border: 1.5px solid rgba(16,185,129,.3);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    margin-top: 8px;
}
.onr-confirm-icon {
    font-size: 1.8rem;
    color: #10b981;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}
.onr-confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vc-text-primary);
    margin-bottom: 6px;
}
.onr-confirm-text {
    font-size: .85rem;
    color: var(--vc-text-secondary);
    margin-bottom: 16px;
}

/* ── Widget modal overlay ─────────────────────────────────── */
.onr-widget-modal {
    background: var(--vc-bg-card);
    border-radius: 20px;
    width: min(520px, 94vw);
    height: 84vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
}
.onr-widget-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--vc-border-light);
    background: var(--vc-bg-secondary);
}
.onr-widget-header h3 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--vc-text-primary);
}
.onr-widget-iframe { flex: 1; border: none; width: 100%; }

/* ============================================================
   Send & Receive  — sr-* classes
   ============================================================ */

.sr-tab-bar {
    display: flex;
    gap: 0;
    margin-top: 16px;
    border-bottom: 2px solid var(--vc-border-light);
}
.sr-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 22px;
    background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: .9rem; font-weight: 600;
    color: var(--vc-text-secondary);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.sr-tab:hover  { color: var(--vc-text-primary); }
.sr-tab.active { color: var(--vc-color-primary); border-bottom-color: var(--vc-color-primary); }

/* Layout */
.sr-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 16px;
    align-items: start;
}
@media (max-width: 860px) {
    .sr-layout { grid-template-columns: 1fr; }
}
.sr-form-col {}
.sr-info-col  { display: flex; flex-direction: column; gap: 14px; }

.sr-section { margin-bottom: 16px; }
.sr-label {
    display: block;
    font-size: .76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--vc-text-secondary);
    margin-bottom: 7px;
}
.sr-opt { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Asset grid */
.sr-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.sr-asset-card {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 6px;
    border: 1.5px solid var(--vc-border-light);
    border-radius: 12px;
    background: var(--vc-bg-card);
    cursor: pointer;
    transition: border-color .15s;
    font-size: .72rem; text-align: center;
}
.sr-asset-card:hover   { border-color: var(--vc-color-primary); }
.sr-asset-card.selected{ border-color: var(--vc-color-primary); background: rgba(99,102,241,.06); }
.sr-asset-icon {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 700;
}
.sr-asset-sym  { font-weight: 700; font-size: .8rem; color: var(--vc-text-primary); }
.sr-asset-name { font-size: .65rem; color: var(--vc-text-secondary); }

/* Balance */
.sr-balance-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--vc-bg-secondary);
    border-radius: 8px; padding: 8px 12px;
    margin-bottom: 12px; font-size: .82rem;
}
.sr-balance-label { color: var(--vc-text-secondary); }
.sr-balance-val   { font-weight: 700; color: var(--vc-color-primary); }

/* Address input hint */
.sr-hint      { font-size: .74rem; color: var(--vc-text-secondary); display: block; margin-top: 3px; }
.sr-hint-ok   { color: var(--vc-color-success, #059669); }
.sr-hint-err  { color: var(--vc-color-danger, #dc2626); }

/* Amount row */
.sr-amount-row    { display: flex; gap: 8px; align-items: stretch; }
.sr-amount-input  {
    flex: 1;
    font-size: 1.3rem; font-weight: 700;
    padding: 10px 14px;
    border: 1.5px solid var(--vc-border-light);
    border-radius: 10px;
    background: var(--vc-bg-card); color: var(--vc-text-primary);
    outline: none;
}
.sr-amount-input:focus { border-color: var(--vc-color-primary); }
.sr-max-btn {
    padding: 0 16px;
    border: 1.5px solid var(--vc-color-primary);
    border-radius: 10px;
    background: transparent;
    color: var(--vc-color-primary);
    font-weight: 700; font-size: .82rem; cursor: pointer;
}
.sr-max-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Travel rule */
.sr-travel-rule-box {
    background: rgba(245,158,11,.06);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}
.sr-travel-rule-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: .82rem;
    color: #D97706;
    margin-bottom: 10px;
}
.sr-tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .sr-tr-grid { grid-template-columns: 1fr; } }

/* Fee & AML */
.sr-fee-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--vc-text-secondary);
    margin-bottom: 10px;
}
.sr-fee-label { font-weight: 600; }
.sr-fee-val   { color: var(--vc-text-primary); }
.sr-aml-row {
    display: flex; align-items: center; gap: 8px;
    border-radius: 8px; padding: 8px 12px;
    font-size: .82rem; font-weight: 600;
    margin-bottom: 12px;
}
.sr-aml-ok      { background: rgba(5,150,105,.1);  color: #059669; }
.sr-aml-blocked { background: rgba(220,38,38,.1);  color: #dc2626; }

/* CTA row */
.sr-cta-row    { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sr-btn-primary {
    padding: 12px 22px;
    background: transparent;
    color: var(--vc-color-primary);
    border: 1.5px solid var(--vc-color-primary);
    border-radius: 10px;
    font-size: .88rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.sr-btn-primary:hover    { background: rgba(99,102,241,.07); }
.sr-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.sr-btn-send {
    flex: 1;
    padding: 13px 22px;
    background: var(--vc-color-primary);
    color: #fff; border: none;
    border-radius: 10px;
    font-size: .92rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.sr-btn-send:hover    { background: var(--vc-color-primary-hover); }
.sr-btn-send:disabled { opacity: .5; cursor: not-allowed; }

/* Info card */
.sr-info-card {
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: 12px;
    padding: 16px;
}
.sr-info-title    { font-weight: 700; font-size: .86rem; margin-bottom: 10px; color: var(--vc-text-primary); }
.sr-info-note     { font-size: .74rem; color: var(--vc-text-secondary); margin: 0; line-height: 1.5; }
.sr-info-highlight{ border-color: var(--vc-color-primary); background: rgba(99,102,241,.04); }
.sr-info-warn     { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.04); }

.sr-steps { padding: 0; margin: 0; list-style: none; }
.sr-steps li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .82rem; color: var(--vc-text-secondary); }
.sr-step-n {
    min-width: 22px; height: 22px; border-radius: 50%;
    background: var(--vc-color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700;
}

.sr-network-list { display: flex; flex-direction: column; gap: 8px; }
.sr-network-row  { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--vc-text-secondary); }
.sr-network-badge {
    font-size: .68rem; font-weight: 700; color: #fff;
    padding: 2px 8px; border-radius: 5px;
    white-space: nowrap;
}

/* Wallet cards for receive */
.sr-wallet-card {
    border: 1.5px solid var(--vc-border-light);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    margin-bottom: 10px;
    background: var(--vc-bg-card);
    transition: border-color .15s;
}
.sr-wallet-card:hover   { border-color: var(--vc-color-primary); }
.sr-wallet-card.selected{ border-color: var(--vc-color-primary); background: rgba(99,102,241,.04); }
.sr-wc-header   { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sr-wc-sym      { font-weight: 800; font-size: .94rem; color: var(--vc-text-primary); }
.sr-wc-network  { font-size: .72rem; color: var(--vc-text-secondary); text-transform: uppercase; }
.sr-wc-addr     { font-family: monospace; font-size: .74rem; color: var(--vc-text-secondary); word-break: break-all; }

/* QR / copy block */
.sr-recv-block  {
    background: var(--vc-bg-secondary);
    border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-top: 8px;
}
.sr-qr-wrap   { background: #fff; padding: 10px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.sr-qr-img    { display: block; width: 180px; height: 180px; }
.sr-recv-addr-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border-light);
    border-radius: 8px; padding: 8px 12px;
    width: 100%;
}
.sr-recv-addr { flex: 1; font-family: monospace; font-size: .74rem; color: var(--vc-text-secondary); word-break: break-all; }
.sr-copy-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--vc-border-light);
    border-radius: 6px;
    background: var(--vc-bg-secondary);
    color: var(--vc-text-secondary);
    font-size: .76rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.sr-copy-btn:hover { border-color: var(--vc-color-primary); color: var(--vc-color-primary); }
.ad-pay-method-name  { font-size: 0.84rem; font-weight: 600; color: var(--vc-text-primary, #fff); }
.ad-pay-method-sub   { font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); }
.ad-pay-radio {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--vc-border, rgba(255,255,255,0.25));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ad-pay-radio.checked { border-color: var(--vc-accent, #3b82f6); }
.ad-pay-radio.checked::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vc-accent, #3b82f6); }
.ad-pay-add-btn {
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.15));
    background: transparent;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: auto;
}
.ad-pay-add-link {
    display: block;
    padding: 8px 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--vc-accent, #3b82f6);
    text-decoration: none;
    cursor: pointer;
}
.ad-pay-add-link:hover { text-decoration: underline; }
.ad-trade-preview { font-size: 0.8rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.ad-trade-preview-row { display: flex; justify-content: space-between; }
.ad-trade-preview-row span:last-child { color: var(--vc-text-primary, #fff); font-weight: 500; }
.ad-trade-cta {
    display: block;
    width: 100%;
    padding: 13px 0;
    border-radius: 8px;
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: opacity .15s;
}
.ad-trade-cta:hover { opacity: .88; }
.ad-trade-cta.buy  { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.ad-trade-cta.sell { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }

.ad-alert-card {
    background: var(--vc-surface, rgba(255,255,255,0.05));
    border: 1px solid var(--vc-border, rgba(255,255,255,0.09));
    border-radius: 10px;
    padding: 14px;
}
.ad-alert-card h4 { margin: 0 0 4px; font-size: 0.9rem; color: var(--vc-text-primary, #fff); }
.ad-alert-card p  { margin: 0 0 10px; font-size: 0.8rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); }
.ad-alert-add-btn {
    padding: 7px 16px;
    border-radius: 6px;
    border: 1px solid var(--vc-accent, #3b82f6);
    background: transparent;
    color: var(--vc-accent, #3b82f6);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.ad-alert-add-btn:hover { background: var(--vc-accent, #3b82f6); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO DASHBOARD — Two-column layout
   ═══════════════════════════════════════════════════════════ */

.pf-total-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px;
    background: var(--vc-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--vc-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    margin-bottom: 20px;
}
.pf-total-left   { display: flex; flex-direction: column; gap: 4px; }
.pf-total-label  { font-size: 0.78rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.pf-total-row    { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-total-value  { font-size: 2rem; font-weight: 700; color: var(--vc-text-primary, #fff); }
.pf-total-actions { display: flex; gap: 8px; }
.pf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity .15s;
}
.pf-action-btn:hover { opacity: .85; text-decoration: none; }
.pf-buy     { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.pf-sell    { background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.pf-deposit { background: var(--vc-surface-secondary, rgba(255,255,255,0.07)); color: var(--vc-text-primary, #fff); border: 1px solid var(--vc-border, rgba(255,255,255,0.1)); }
.pf-transfer { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); }

/* ── Total change badge ── */
.pf-total-change { font-size: 0.9rem; font-weight: 700; padding: 2px 10px; border-radius: 6px; }
.pf-total-change.positive { background: rgba(34,197,94,0.14); color: #4ade80; }
.pf-total-change.negative { background: rgba(239,68,68,0.14); color: #f87171; }
.pf-total-breakdown { display: flex; gap: 0; flex-wrap: wrap; font-size: 0.78rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); margin-top: 2px; }
.pf-total-sep { margin: 0 8px; opacity: .35; }

/* ── Skeleton loading ── */
.pf-skeleton-wrap { display: flex; flex-direction: column; gap: 14px; }
.pf-skeleton-header { height: 110px; border-radius: 12px; }
.pf-skeleton-body { display: grid; grid-template-columns: 1fr 360px; gap: 20px; }
.pf-skeleton-left { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .pf-skeleton-body { grid-template-columns: 1fr; } }

/* ── Allocation bar ── */
.pf-alloc-card { margin-bottom: 6px; border-radius: 12px; padding: 16px 20px; background: var(--vc-surface, rgba(255,255,255,0.04)); border: 1px solid var(--vc-border, rgba(255,255,255,0.08)); }
.pf-alloc-bar-wrap { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--vc-surface-secondary, rgba(255,255,255,0.06)); margin-bottom: 10px; }
.pf-alloc-segment { min-width: 4px; transition: width .3s ease; }
.pf-alloc-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-alloc-legend-item { display: flex; align-items: center; gap: 5px; }
.pf-alloc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pf-alloc-sym { font-size: 0.78rem; font-weight: 600; color: var(--vc-text-primary, #fff); }
.pf-alloc-pct { font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); }

/* ── Coin images & balance cells ── */
.pf-coin-img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.pf-balance-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pf-balance-usd { font-weight: 600; }
.pf-balance-qty { font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); }
.pf-sc-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; }

/* ── Asset row hover ── */
.pf-asset-row { transition: background .12s; }
.pf-asset-row:hover { background: var(--vc-surface-secondary, rgba(255,255,255,0.04)); }

/* ── Banners row ── */
.pf-banners-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .pf-banners-row { grid-template-columns: 1fr; } }

/* ── Transaction filter tabs ── */
.pf-txn-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.pf-txn-tab {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--vc-text-muted, rgba(255,255,255,0.5));
    transition: all .12s;
}
.pf-txn-tab:hover { background: var(--vc-surface-secondary, rgba(255,255,255,0.06)); color: var(--vc-text-primary, #fff); }
.pf-txn-tab.active { background: var(--vc-accent, #3b82f6); color: #fff; }

/* ── Transaction status badges ── */
.pf-txn-status { font-size: 0.68rem; font-weight: 600; padding: 1px 8px; border-radius: 4px; text-transform: capitalize; }
.pf-txn-status.completed { background: rgba(34,197,94,0.12); color: #4ade80; }
.pf-txn-status.pending   { background: rgba(234,179,8,0.12); color: #facc15; }

.pf-two-col {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .pf-two-col { grid-template-columns: 1fr; }
}
.pf-left-col  { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-right-col { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }

.pf-section-card {
    background: var(--vc-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--vc-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 18px 20px;
}
.pf-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}
.pf-section-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--vc-text-primary, #fff); }
.pf-section-value { font-size: 0.82rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); margin-top: 2px; display: block; }
.pf-section-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pf-section-header-inline h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--vc-text-primary, #fff); }
.pf-section-header-inline p  { margin: 2px 0 0; font-size: 0.8rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); }

.pf-link-btn {
    font-size: 0.82rem;
    color: var(--vc-accent, #3b82f6);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.pf-link-btn:hover { text-decoration: underline; color: var(--vc-accent, #3b82f6); }
.pf-promo-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
}

.pf-asset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.pf-asset-table th {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vc-text-muted, rgba(255,255,255,0.45));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.06));
}
.pf-asset-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.04));
    color: var(--vc-text-primary, #fff);
    vertical-align: middle;
}
.pf-asset-table tr:last-child td { border-bottom: none; }
.pf-col-right { text-align: right; }

.pf-cash-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
}

.pf-inline-btn {
    padding: 4px 12px;
    border-radius: 5px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--vc-accent, #3b82f6);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all .12s;
}
.pf-inline-btn:hover { background: var(--vc-accent, #3b82f6); color: #fff; border-color: var(--vc-accent, #3b82f6); text-decoration: none; }
.pf-more { color: var(--vc-text-muted, rgba(255,255,255,0.5)); letter-spacing: 0.1em; }

.pf-empty-inline {
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--vc-text-muted, rgba(255,255,255,0.45));
}
.pf-empty-inline a { color: var(--vc-accent, #3b82f6); }

.pf-promo-card { padding: 16px 20px; }
.pf-banner-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}
.pf-banner-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pf-banner-card-icon { background: rgba(59,130,246,0.18); color: #60a5fa; }
.pf-banner-nft-icon  { background: rgba(139,92,246,0.18); color: #a78bfa; }
.pf-banner-text { flex: 1; }
.pf-banner-text h4 { margin: 0 0 2px; font-size: 0.9rem; font-weight: 700; color: var(--vc-text-primary, #fff); }
.pf-banner-text p  { margin: 0; font-size: 0.78rem; color: var(--vc-text-muted, rgba(255,255,255,0.5)); }

.pf-txn-panel { height: 100%; }
.pf-txn-list  { display: flex; flex-direction: column; }
.pf-txn-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.04));
}
.pf-txn-item:last-child { border-bottom: none; }
.pf-txn-icon-wrap {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pf-txn-icon-wrap.buy     { background: rgba(34,197,94,0.15); color: #4ade80; }
.pf-txn-icon-wrap.sell    { background: rgba(239,68,68,0.15);  color: #f87171; }
.pf-txn-icon-wrap.deposit { background: rgba(59,130,246,0.15); color: #60a5fa; }
.pf-txn-icon-wrap.withdraw{ background: rgba(234,179,8,0.15);  color: #facc15; }
.pf-txn-icon-wrap.swap    { background: rgba(139,92,246,0.15); color: #a78bfa; }
.pf-txn-details   { flex: 1; min-width: 0; }
.pf-txn-name      { display: block; font-size: 0.84rem; font-weight: 600; color: var(--vc-text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-txn-date      { display: block; font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); }
.pf-txn-amounts   { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pf-txn-amount    { font-size: 0.84rem; font-weight: 700; }
.pf-txn-amount.positive { color: #4ade80; }
.pf-txn-amount.negative { color: #f87171; }
.pf-txn-value     { font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); }

/* ── Shared helper classes ─────────────────────── */
.me-change {
    font-size: 0.82rem;
    font-weight: 700;
}
.me-change.positive { color: #4ade80; }
.me-change.negative { color: #f87171; }

/* ═══════════════════════════════════════════════════════════
   WATCHLIST COMPONENT — Live Kraken prices
   ═══════════════════════════════════════════════════════════ */

.watchlist-container {
    background: var(--vc-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--vc-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    overflow: hidden;
}
.watchlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.06));
}
.watchlist-header h3   { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--vc-text-primary, #fff); }
.watchlist-header-right{ display: flex; align-items: center; gap: 12px; }
.watchlist-search input {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(255,255,255,0.1));
    background: var(--vc-surface-secondary, rgba(255,255,255,0.04));
    color: var(--vc-text-primary, #fff);
    font-size: 0.82rem;
    outline: none;
    min-width: 160px;
}
.watchlist-updated { font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.4)); white-space: nowrap; }

.watchlist-coin-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700;
    flex-shrink: 0;
    color: rgba(255,255,255,0.8);
}
.symbol-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.symbol-cell strong { font-size: 0.88rem; color: var(--vc-text-primary, #fff); }
.symbol-name { display: block; font-size: 0.72rem; color: var(--vc-text-muted, rgba(255,255,255,0.45)); }

/* ══════════════════════════════════════════════
   MARKETS PAGE – TICKER STRIP
══════════════════════════════════════════════ */
.mkt-ticker-wrap {
    display:flex;align-items:center;gap:10px;overflow:hidden;
    background:rgba(255,255,255,.03);border:1px solid var(--vc-border);
    border-radius:8px;padding:7px 14px;margin-bottom:14px;
}
.mkt-ticker-label {
    font-size:.6rem;font-weight:800;letter-spacing:.1em;color:#10b981;
    background:rgba(16,185,129,.15);border-radius:4px;padding:2px 7px;flex-shrink:0;
}
.mkt-ticker-scroll { flex:1;overflow:hidden; }
.mkt-ticker-inner {
    display:inline-flex;gap:24px;animation:ticker-scroll 42s linear infinite;
    white-space:nowrap;
}
.mkt-ticker-wrap:hover .mkt-ticker-inner { animation-play-state:paused; }
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mkt-tick-item { display:inline-flex;align-items:center;gap:6px;font-size:.78rem; }
.mkt-tick-sym { font-weight:700;color:var(--vc-text-primary); }
.mkt-tick-price { font-variant-numeric:tabular-nums;color:var(--vc-text-secondary); }
.mkt-tick-change.up  { color:#10b981; }
.mkt-tick-change.down { color:#ef4444; }

/* ── TRENDING CARDS ── */
.mkt-trending-row {
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;
}
@media(max-width:860px) { .mkt-trending-row { grid-template-columns:1fr; } }

.mkt-trend-skeleton {
    height:200px;border-radius:16px;background:var(--vc-skeleton-bg,rgba(255,255,255,.06));
    animation:skeleton-pulse 1.4s ease-in-out infinite;
}
.mkt-trend-card {
    background:var(--vc-bg-card);border:1.5px solid var(--vc-border-light);
    border-radius:16px;padding:16px;transition:border-color .15s,box-shadow .15s;
    display:flex;flex-direction:column;gap:6px;
}
.mkt-trend-card:hover {
    border-color:var(--vc-color-primary);box-shadow:0 4px 20px rgba(99,102,241,.12);
}
.mkt-trend-card.pos { border-color:rgba(16,185,129,.25); }
.mkt-trend-card.neg { border-color:rgba(239,68,68,.25); }
.mkt-trend-header { display:flex;align-items:flex-start;justify-content:space-between; }
.mkt-trend-coin { display:flex;align-items:center;gap:10px; }
.mkt-trend-icon { width:36px;height:36px;border-radius:50%;object-fit:cover; }
.mkt-trend-icon-ph {
    width:36px;height:36px;border-radius:50%;background:var(--vc-color-primary);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;
}
.mkt-trend-name { font-weight:700;font-size:.88rem;color:var(--vc-text-primary); }
.mkt-trend-sym  { font-size:.73rem;color:var(--vc-text-muted); }
.mkt-trend-price { font-size:1.15rem;font-weight:800;color:var(--vc-text-primary);font-variant-numeric:tabular-nums; }
.mkt-trend-footer { display:flex;align-items:center;justify-content:space-between;margin-top:4px; }
.mkt-trend-vol { font-size:.73rem;color:var(--vc-text-muted); }
.mkt-trade-cta {
    font-size:.75rem;font-weight:700;border:none;border-radius:6px;
    padding:5px 12px;cursor:pointer;transition:opacity .15s;
}
.mkt-trade-cta.buy  { background:rgba(16,185,129,.15);color:#10b981; }
.mkt-trade-cta.sell { background:rgba(239,68,68,.15);color:#ef4444; }
.mkt-trade-cta:hover { opacity:.75; }

/* ── TABLE TRADE BUTTON ── */
.mkt-row-trade-btn {
    font-size:.72rem;font-weight:700;background:rgba(99,102,241,.14);color:var(--vc-color-primary);
    border:none;border-radius:6px;padding:4px 10px;cursor:pointer;transition:background .15s;
    white-space:nowrap;
}
.mkt-row-trade-btn:hover { background:rgba(99,102,241,.28); }

/* ── STABLECOIN SELECTOR GRID ── */
.mkt-sc-grid { display:flex;flex-wrap:wrap;gap:8px;margin-top:6px; }
.mkt-sc-card {
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 14px;border-radius:8px;cursor:pointer;
    background:var(--vc-bg-input,rgba(255,255,255,.04));
    border:1.5px solid var(--vc-border-light);transition:border-color .15s;
    font-size:.78rem;
}
.mkt-sc-card:hover { border-color:var(--vc-color-primary); }
.mkt-sc-card.selected { border-color:var(--vc-color-primary);background:rgba(99,102,241,.12); }
.mkt-sc-sym { font-weight:800;color:var(--vc-text-primary); }
.mkt-sc-cur { font-size:.65rem;color:var(--vc-text-muted); }

/* ── CRYPTO HOLDINGS BOX ── */
.mkt-holdings-box {
    background:var(--vc-bg-input,rgba(255,255,255,.04));border:1px solid var(--vc-border-light);
    border-radius:8px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;
    margin-top:4px;
}
.mkt-holding-amount { font-weight:700;color:var(--vc-text-primary);font-size:.88rem; }
.mkt-holding-value  { font-size:.78rem;color:var(--vc-text-muted); }

/* ── QUICK TRADE MODAL ── */
.mkt-trade-modal {
    background:var(--vc-bg-surface,#161b2e);border:1px solid var(--vc-border);
    border-radius:18px;width:50vw;max-width:50vw;box-shadow:0 20px 60px rgba(0,0,0,.5);
    overflow:hidden;display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;
}
.mkt-modal-header {
    display:flex;align-items:center;gap:12px;padding:18px 20px 12px;
    border-bottom:1px solid var(--vc-border);position:relative;background:var(--vc-bg-card);
}
.mkt-modal-coin    { display:flex;align-items:center;gap:10px;flex:1; }
.mkt-modal-icon    { width:38px;height:38px;border-radius:50%;object-fit:cover; }
.mkt-modal-name    { font-weight:800;font-size:.95rem;color:var(--vc-text-primary); }
.mkt-modal-sym     { font-size:.73rem;color:var(--vc-text-muted); }
.mkt-modal-price-block { display:flex;flex-direction:column;align-items:flex-end;gap:4px; }
.mkt-modal-price   { font-weight:800;font-variant-numeric:tabular-nums;color:var(--vc-text-primary); }
.mkt-modal-close {
    position:absolute;top:14px;right:16px;background:none;border:none;
    font-size:1.3rem;color:var(--vc-text-muted);cursor:pointer;line-height:1;transition:color .15s;
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.mkt-modal-close:hover { color:var(--vc-text-primary);background:rgba(255,255,255,.08); }
.mkt-modal-tabs {
    display:flex;border-bottom:1px solid var(--vc-border);background:var(--vc-bg-card);
}
.mkt-modal-tab {
    flex:1;padding:11px;font-size:.83rem;font-weight:700;border:none;
    background:none;cursor:pointer;color:var(--vc-text-muted);transition:color .15s,border-color .15s;
    border-bottom:2px solid transparent;
}
.mkt-modal-tab.active.buy  { color:#10b981;border-bottom-color:#10b981; }
.mkt-modal-tab.active.sell { color:#ef4444;border-bottom-color:#ef4444; }
.mkt-modal-tab:hover       { color:var(--vc-text-primary); }
.mkt-modal-body { padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px; }

.mkt-modal-trend-shell {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--vc-border);
    background: linear-gradient(180deg, rgba(96,165,250,0.08), rgba(96,165,250,0.01));
}
.mkt-modal-trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.mkt-modal-trend-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vc-text-secondary);
}
.mkt-modal-range-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mkt-modal-range-tab {
    border: 1px solid var(--vc-border-light);
    background: rgba(255,255,255,0.03);
    color: var(--vc-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}
.mkt-modal-range-tab:hover {
    color: var(--vc-text-primary);
    border-color: rgba(96,165,250,0.45);
}
.mkt-modal-range-tab.active {
    color: #e2e8f0;
    border-color: rgba(96,165,250,0.7);
    background: rgba(96,165,250,0.2);
}
.mkt-modal-trend-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-text-muted);
    font-size: 0.78rem;
    border: 1px dashed var(--vc-border-light);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}

/* ── MODAL FORM FIELDS ── */
.mkt-field { display:flex;flex-direction:column;gap:6px; }
.mkt-field-label { font-size:.75rem;font-weight:700;color:var(--vc-text-secondary);letter-spacing:.03em; }

/* ── CUSTOMER SEARCH AUTOCOMPLETE ── */
.cust-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cust-search-icon {
    position: absolute;
    left: 12px;
    color: var(--vc-text-muted);
    pointer-events: none;
    z-index: 1;
}
.cust-search-input {
    padding-left: 34px !important;
    padding-right: 32px !important;
}
.cust-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--vc-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.cust-search-clear:hover {
    color: var(--vc-text-primary);
    background: var(--vc-bg-tertiary, rgba(255,255,255,.06));
}
.cust-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    background: var(--vc-bg-card, #fff);
    border: 1.5px solid var(--vc-border-light);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
}
.cust-search-dropdown-wide {
    min-width: 420px;
    width: max-content;
    max-width: 560px;
}
.cust-search-item {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.cust-search-item:hover,
.cust-search-item.selected {
    background: var(--vc-bg-tertiary, rgba(99,102,241,.08));
}
.cust-search-item-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--vc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cust-search-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--vc-text-muted);
    line-height: 1.4;
}
.cust-search-item-sep {
    color: var(--vc-border-light);
    user-select: none;
}
.cust-search-item-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.cust-search-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    background: rgba(16,185,129,.12);
    color: #10b981;
    flex-shrink: 0;
}
.cust-search-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: .8rem;
    color: var(--vc-text-muted);
}

/* ── ON-CHAIN BALANCE SYNC ── */
.oc-diff {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}
.oc-diff.positive {
    color: #10b981;
    background: rgba(16,185,129,.1);
}
.oc-diff.negative {
    color: #ef4444;
    background: rgba(239,68,68,.1);
}
.oc-synced {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    color: #10b981;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(16,185,129,.08);
    margin-top: 2px;
}
.oc-fetch-btn {
    font-size: .7rem !important;
    padding: 2px 8px !important;
    gap: 4px !important;
}
.oc-sync-btn {
    background: rgba(16,185,129,.1) !important;
    border-color: rgba(16,185,129,.3) !important;
    color: #10b981 !important;
}
.oc-sync-btn:hover {
    background: rgba(16,185,129,.2) !important;
}
.oc-refresh-all {
    border-color: rgba(59,130,246,.3) !important;
    color: #3b82f6 !important;
}
.oc-refresh-all:hover {
    background: rgba(59,130,246,.08) !important;
}

/* ── CRYPTO TRANSFER PAGE ── */
.ct-layout { display:grid; grid-template-columns:1fr 420px; gap:20px; margin-top:12px; align-items:start; }
.ct-form-col { display:flex; flex-direction:column; gap:16px; }
.ct-form-col .tp-card { overflow:visible; }
.ct-summary-col { display:flex; flex-direction:column; gap:0; position:sticky; top:16px; }

.ct-pool-box {
    background: rgba(16,185,129,.06);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: 10px;
    padding: 14px 16px;
}
.ct-pool-label { font-size:.75rem; color:var(--vc-text-muted); margin-bottom:4px; }
.ct-pool-amount { font-size:1.2rem; font-weight:800; color:#10b981; }
.ct-pool-sym { font-size:.85rem; font-weight:600; color:var(--vc-text-secondary); }
.ct-pool-value { font-size:.78rem; color:var(--vc-text-muted); margin-top:2px; }

.ct-recipient-box {
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 10px;
    padding: 12px 16px;
}
.ct-recipient-label { font-size:.72rem; color:var(--vc-text-muted); margin-bottom:4px; }
.ct-recipient-name { font-size:.95rem; font-weight:700; color:var(--vc-text-primary); }
.ct-recipient-id { font-size:.78rem; color:var(--vc-text-secondary); }

.ct-recent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ct-recent-row:last-child { border-bottom: none; }
.ct-recent-ref { font-size:.8rem; font-weight:600; color:var(--vc-text-primary); }
.ct-recent-meta { font-size:.72rem; color:var(--vc-text-muted); margin-top:2px; }
.ct-recent-status { font-size:.72rem; font-weight:600; color:var(--vc-text-muted); }
.ct-recent-status.completed { color:#10b981; }
.ct-recent-date { font-size:.68rem; color:var(--vc-text-muted); margin-top:2px; }

@media(max-width:900px) {
    .ct-layout { grid-template-columns:1fr; }
}

/* ── BASKETS / CATEGORIES EMPTY STATE ── */
.me-baskets-empty {
    min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;color:var(--vc-text-muted);text-align:center;
}
.me-baskets-empty h3 { color:var(--vc-text-secondary);font-size:1.05rem;margin:0; }
.me-baskets-empty p  { margin:0;font-size:.85rem; }

/* ── TABLE RESPONSIVE ── */
@media(max-width:640px) {
    .me-col-chart,.me-col-rank { display:none; }
    .mkt-ticker-label { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER MANAGEMENT PAGE — cust-* prefix
   Modern card-based layout with refined typography and spacing
   ═══════════════════════════════════════════════════════════════ */

/* ── Skeleton loading ── */
.cust-skeleton { display:flex;flex-direction:column;gap:20px;padding:24px 0; }
.cust-skeleton-bar { height:32px;background:var(--vc-bg-muted,#f3f4f6);border-radius:var(--vc-radius-md);width:280px;animation:cust-pulse 1.5s ease-in-out infinite; }
.cust-skeleton-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px; }
.cust-skeleton-card { height:80px;background:var(--vc-bg-muted,#f3f4f6);border-radius:var(--vc-radius-lg);animation:cust-pulse 1.5s ease-in-out infinite; }
.cust-skeleton-table { height:300px;background:var(--vc-bg-muted,#f3f4f6);border-radius:var(--vc-radius-lg);animation:cust-pulse 1.5s ease-in-out infinite; }
@keyframes cust-pulse { 0%,100%{opacity:.6} 50%{opacity:.3} }

/* ── Empty tenant ── */
.cust-empty-tenant { text-align:center;padding:80px 20px;color:var(--vc-text-secondary); }
.cust-empty-tenant svg { margin-bottom:16px;opacity:.5; }
.cust-empty-tenant h2 { font-size:1.4rem;color:var(--vc-text-primary);margin:0 0 8px; }
.cust-empty-tenant p { margin:0;font-size:.95rem; }

/* ── Toast notification ── */
.cust-toast { display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--vc-radius-lg);margin-bottom:20px;font-size:.875rem;font-weight:500;animation:cust-slideDown .3s ease; }
.cust-toast-success { background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0; }
.cust-toast-error { background:#fef2f2;color:#991b1b;border:1px solid #fecaca; }
.cust-toast svg { flex-shrink:0; }
.cust-toast span { flex:1; }
.cust-toast-close { background:none;border:none;font-size:1.2rem;cursor:pointer;color:inherit;opacity:.6;padding:0 4px; }
.cust-toast-close:hover { opacity:1; }
@keyframes cust-slideDown { from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1} }

/* ── Page header ── */
.cust-page-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:16px;flex-wrap:wrap; }
.cust-page-title { font-size:1.6rem;font-weight:700;color:var(--vc-text-primary);margin:0;letter-spacing:-.02em; }
.cust-page-subtitle { font-size:.9rem;color:var(--vc-text-secondary);margin:4px 0 0; }

/* ── KPI grid ── */
.cust-kpi-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px; }
.cust-kpi { display:flex;align-items:center;gap:14px;background:var(--vc-bg-card);border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-lg);padding:18px 20px;transition:box-shadow .2s,border-color .2s; }
.cust-kpi:hover { box-shadow:var(--vc-shadow-md);border-color:var(--vc-border-medium,#d1d5db); }
.cust-kpi-icon { width:42px;height:42px;border-radius:var(--vc-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cust-kpi-body { display:flex;flex-direction:column; }
.cust-kpi-label { font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--vc-text-secondary);font-weight:600; }
.cust-kpi-value { font-size:1.5rem;font-weight:700;color:var(--vc-text-primary);line-height:1.2;margin-top:2px; }

/* ── Toolbar (search + filters) ── */
.cust-toolbar { display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap; }
.cust-search-wrap { position:relative;flex:1;min-width:220px;max-width:400px; }
.cust-search-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%); }
.cust-search { width:100%;padding:9px 12px 9px 36px;border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-md);font-size:.875rem;background:var(--vc-bg-card);color:var(--vc-text-primary);transition:border-color .15s,box-shadow .15s; }
.cust-search:focus { outline:none;border-color:var(--vc-color-primary);box-shadow:0 0 0 3px rgba(0,120,212,.12); }
.cust-filter-pills { display:flex;gap:6px;flex-wrap:wrap; }
.cust-pill { padding:6px 14px;border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-full);font-size:.8rem;font-weight:500;background:var(--vc-bg-card);color:var(--vc-text-secondary);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px; }
.cust-pill:hover { border-color:var(--vc-color-primary);color:var(--vc-color-primary); }
.cust-pill-active { background:var(--vc-color-primary);color:#fff;border-color:var(--vc-color-primary); }
.cust-pill-count { background:rgba(255,255,255,.2);padding:1px 7px;border-radius:10px;font-size:.7rem; }
.cust-pill-active .cust-pill-count { background:rgba(255,255,255,.25); }

/* ── Customer table ── */
.cust-table-card { background:var(--vc-bg-card);border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-lg);overflow:hidden; }
.cust-table { width:100%;border-collapse:collapse; }
.cust-table thead th { padding:12px 16px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--vc-text-secondary);font-weight:600;border-bottom:1px solid var(--vc-border-light);background:var(--vc-bg-muted,#f9fafb);text-align:left;white-space:nowrap; }
.cust-table tbody td { padding:14px 16px;font-size:.875rem;color:var(--vc-text-primary);border-bottom:1px solid var(--vc-border-light);vertical-align:middle; }
.cust-table tbody tr:last-child td { border-bottom:none; }
.cust-row { cursor:pointer;transition:background .15s; }
.cust-row:hover { background:var(--vc-bg-muted,#f9fafb); }
.cust-row-arrow { opacity:.4;transition:opacity .15s,transform .15s; }
.cust-row:hover .cust-row-arrow { opacity:.8;transform:translateX(2px); }
.cust-table-footer { padding:10px 16px;font-size:.8rem;color:var(--vc-text-secondary);border-top:1px solid var(--vc-border-light);background:var(--vc-bg-muted,#f9fafb); }
.cust-table-inner { margin:0; }
.cust-table-inner thead th { background:transparent; }

/* ── Customer cell (avatar + name) ── */
.cust-cell-name { display:flex;align-items:center;gap:12px; }
.cust-avatar { width:36px;height:36px;border-radius:var(--vc-radius-full);background:linear-gradient(135deg,var(--vc-color-primary),#6366f1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;text-transform:uppercase; }
.cust-name { font-weight:600;color:var(--vc-text-primary); }
.cust-id { font-size:.75rem;color:var(--vc-text-secondary);font-family:'Cascadia Code','Fira Code',monospace; }
.cust-cell-contact { display:flex;flex-direction:column;gap:2px;font-size:.85rem; }
.cust-phone { font-size:.78rem;color:var(--vc-text-secondary); }
.cust-muted { color:var(--vc-text-muted,#9ca3af); }
.cust-segment { font-size:.8rem;color:var(--vc-text-secondary); }
.cust-date { font-size:.8rem;color:var(--vc-text-secondary);white-space:nowrap; }

/* ── Badges ── */
.cust-badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--vc-radius-full);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap; }
.cust-badge-success { background:#ecfdf5;color:#065f46; }
.cust-badge-warning { background:#fffbeb;color:#92400e; }
.cust-badge-danger  { background:#fef2f2;color:#991b1b; }
.cust-badge-info    { background:#eff6ff;color:#1e40af; }
.cust-badge-sm { font-size:.68rem;padding:2px 8px; }

/* ── Empty state ── */
.cust-empty-state { text-align:center;padding:60px 20px;background:var(--vc-bg-card);border:2px dashed var(--vc-border-light);border-radius:var(--vc-radius-lg); }
.cust-empty-state svg { margin-bottom:16px;opacity:.45; }
.cust-empty-state h3 { font-size:1.1rem;color:var(--vc-text-primary);margin:0 0 6px;font-weight:600; }
.cust-empty-state p { margin:0;font-size:.9rem;color:var(--vc-text-secondary); }
.cust-empty-inline { text-align:center;padding:40px 20px;color:var(--vc-text-secondary); }
.cust-empty-inline svg { margin-bottom:10px;opacity:.4; }
.cust-empty-inline p { margin:0;font-size:.88rem; }

/* ── Detail header ── */
.cust-detail-header { margin-bottom:16px; }
.cust-back-btn { display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--vc-text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;padding:6px 0;transition:color .15s; }
.cust-back-btn:hover { color:var(--vc-color-primary); }

/* ── Profile card (hero) ── */
.cust-profile-card { background:var(--vc-bg-card);border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-lg);padding:24px;margin-bottom:20px; }
.cust-profile-top { display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap; }
.cust-profile-avatar { width:56px;height:56px;border-radius:var(--vc-radius-full);background:linear-gradient(135deg,var(--vc-color-primary),#6366f1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;flex-shrink:0;text-transform:uppercase; }
.cust-profile-info { flex:1;min-width:200px; }
.cust-profile-name { font-size:1.3rem;font-weight:700;color:var(--vc-text-primary);margin:0; }
.cust-profile-meta { display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap; }
.cust-profile-id { font-size:.8rem;color:var(--vc-text-secondary);font-family:'Cascadia Code','Fira Code',monospace;background:var(--vc-bg-muted,#f3f4f6);padding:2px 8px;border-radius:var(--vc-radius-sm); }
.cust-profile-actions { display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start; }
.cust-verified-info { display:block;font-size:.78rem;color:var(--vc-color-success);margin-top:4px; }
.cust-rejection-banner { display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--vc-radius-md);font-size:.85rem;color:#991b1b; }
.cust-rejection-banner svg { flex-shrink:0;margin-top:1px; }

/* ── Detail tabs ── */
.cust-detail-tabs { display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--vc-border-light);padding-bottom:0; }
.cust-dtab { display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:none;background:none;font-size:.875rem;font-weight:500;color:var(--vc-text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s; }
.cust-dtab:hover { color:var(--vc-text-primary); }
.cust-dtab-active { color:var(--vc-color-primary);border-bottom-color:var(--vc-color-primary);font-weight:600; }
.cust-dtab svg { opacity:.6; }
.cust-dtab-active svg { opacity:1; }
.cust-dtab-count { background:var(--vc-bg-muted,#f3f4f6);padding:1px 7px;border-radius:10px;font-size:.7rem;font-weight:600; }
.cust-dtab-active .cust-dtab-count { background:rgba(0,120,212,.1);color:var(--vc-color-primary); }

/* ── Section cards ── */
.cust-section-card { background:var(--vc-bg-card);border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-lg);padding:24px;margin-bottom:16px; }
.cust-section-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.cust-section-header h3 { margin:0;font-size:1.05rem;font-weight:600;color:var(--vc-text-primary); }
.cust-muted-note { font-size:.8rem;color:var(--vc-text-muted,#9ca3af);font-style:italic; }

/* ── Form grid ── */
.cust-form-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px; }
.cust-field { display:flex;flex-direction:column;gap:5px; }
.cust-field label { font-size:.78rem;font-weight:600;color:var(--vc-text-secondary);text-transform:uppercase;letter-spacing:.04em; }
.cust-field-full { grid-column:1/-1; }
.cust-required { color:var(--vc-color-danger); }
.cust-input { padding:9px 12px;border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-md);font-size:.875rem;background:var(--vc-bg-card);color:var(--vc-text-primary);transition:border-color .15s,box-shadow .15s; }
.cust-input:focus { outline:none;border-color:var(--vc-color-primary);box-shadow:0 0 0 3px rgba(0,120,212,.12); }
.cust-textarea { min-height:80px;resize:vertical; }

/* ── Form actions ── */
.cust-form-actions { display:flex;gap:10px;margin-top:8px;flex-wrap:wrap; }

/* ── Document grid ── */
.cust-doc-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px; }
.cust-doc-card { background:var(--vc-bg-muted,#f9fafb);border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-md);padding:16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s; }
.cust-doc-card:hover { box-shadow:var(--vc-shadow-sm); }
.cust-doc-icon { width:40px;height:40px;background:var(--vc-bg-card);border-radius:var(--vc-radius-sm);display:flex;align-items:center;justify-content:center; }
.cust-doc-body { flex:1; }
.cust-doc-type { font-weight:600;font-size:.85rem;color:var(--vc-text-primary); }
.cust-doc-name { font-size:.78rem;color:var(--vc-text-secondary);word-break:break-all; }
.cust-doc-meta { font-size:.72rem;color:var(--vc-text-muted,#9ca3af);margin-top:2px; }
.cust-doc-status { display:flex;align-items:center; }
.cust-doc-actions { display:flex;gap:6px; }
.cust-doc-review { font-size:.72rem;color:var(--vc-text-muted,#9ca3af);font-style:italic; }

/* ── Wallet grid ── */
.cust-wallet-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px; }
.cust-wallet-card { background:var(--vc-bg-muted,#f9fafb);border:1px solid var(--vc-border-light);border-radius:var(--vc-radius-lg);padding:18px;transition:box-shadow .15s; }
.cust-wallet-card:hover { box-shadow:var(--vc-shadow-sm); }
.cust-wallet-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.cust-wallet-symbol { font-size:1.1rem;font-weight:700;color:var(--vc-text-primary); }
.cust-wallet-balance { font-size:1.2rem;font-weight:600;color:var(--vc-text-primary);font-family:'Cascadia Code','Fira Code',monospace; }
.cust-wallet-network { font-size:.75rem;color:var(--vc-text-secondary);margin-top:2px; }
.cust-wallet-address { font-size:.72rem;color:var(--vc-text-muted,#9ca3af);font-family:'Cascadia Code','Fira Code',monospace;margin-top:6px;word-break:break-all; }

/* ── Monospace cells ── */
.cust-mono { font-family:'Cascadia Code','Fira Code',monospace;font-size:.85rem; }
.cust-code { font-family:'Cascadia Code','Fira Code',monospace;font-size:.8rem;background:var(--vc-bg-muted,#f3f4f6);padding:2px 6px;border-radius:var(--vc-radius-sm); }

/* ── Buttons ── */
.cust-btn { display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:none;border-radius:var(--vc-radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap; }
.cust-btn:disabled { opacity:.55;cursor:not-allowed; }
.cust-btn-primary { background:var(--vc-color-primary);color:#fff; }
.cust-btn-primary:hover:not(:disabled) { background:#0069be;box-shadow:var(--vc-shadow-sm); }
.cust-btn-success { background:var(--vc-color-success);color:#fff; }
.cust-btn-success:hover:not(:disabled) { background:#059669; }
.cust-btn-danger { background:var(--vc-color-danger);color:#fff; }
.cust-btn-danger:hover:not(:disabled) { background:#dc2626; }
.cust-btn-warning { background:var(--vc-color-warning);color:#fff; }
.cust-btn-warning:hover:not(:disabled) { background:#d97706; }
.cust-btn-ghost { background:none;color:var(--vc-text-secondary);padding:9px 16px; }
.cust-btn-ghost:hover { background:var(--vc-bg-muted,#f3f4f6);color:var(--vc-text-primary); }
.cust-btn-outline-danger { background:none;border:1px solid var(--vc-color-danger);color:var(--vc-color-danger); }
.cust-btn-outline-danger:hover:not(:disabled) { background:#fef2f2; }
.cust-btn-sm { padding:7px 14px;font-size:.8rem; }
.cust-btn-xs { padding:4px 10px;font-size:.75rem;border-radius:var(--vc-radius-sm); }

/* ── Modal overlay ── */
.cust-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:900;animation:cust-fadeIn .2s ease; }
@keyframes cust-fadeIn { from{opacity:0}to{opacity:1} }
.cust-modal { background:var(--vc-bg-card);border-radius:var(--vc-radius-xl,16px);width:90%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--vc-shadow-xl);animation:cust-modalIn .25s ease; }
.cust-modal-sm { max-width:460px; }
@keyframes cust-modalIn { from{transform:translateY(20px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1} }
.cust-modal-header { display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0; }
.cust-modal-header h3 { margin:0;font-size:1.1rem;font-weight:700;color:var(--vc-text-primary); }
.cust-modal-close { background:none;border:none;font-size:1.4rem;color:var(--vc-text-muted,#9ca3af);cursor:pointer;padding:0 4px;transition:color .15s; }
.cust-modal-close:hover { color:var(--vc-text-primary); }
.cust-modal-body { padding:20px 24px;overflow-y:auto;flex:1; }
.cust-modal-footer { padding:16px 24px;border-top:1px solid var(--vc-border-light);display:flex;justify-content:flex-end;gap:10px; }
.cust-inline-error { margin:12px 24px 0;padding:10px 14px;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:var(--vc-radius-md);font-size:.85rem; }
.cust-hint { font-size:.85rem;color:var(--vc-text-secondary);margin:4px 0 0; }

/* ── Upload zone ── */
.cust-upload-zone { position:relative;border:2px dashed var(--vc-border-light);border-radius:var(--vc-radius-lg);padding:28px;text-align:center;transition:border-color .15s; }
.cust-upload-zone:hover { border-color:var(--vc-color-primary); }
.cust-file-input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }
.cust-upload-filename { margin:10px 0 0;font-size:.85rem;font-weight:600;color:var(--vc-text-primary); }
.cust-upload-hint { margin:10px 0 0;font-size:.85rem;color:var(--vc-text-muted,#9ca3af); }

/* ── Dark mode ── */
@media (prefers-color-scheme:dark) {
    .cust-toast-success { background:#064e3b;color:#a7f3d0;border-color:#065f46; }
    .cust-toast-error { background:#7f1d1d;color:#fecaca;border-color:#991b1b; }
    .cust-badge-success { background:#064e3b;color:#a7f3d0; }
    .cust-badge-warning { background:#78350f;color:#fde68a; }
    .cust-badge-danger  { background:#7f1d1d;color:#fecaca; }
    .cust-badge-info    { background:#1e3a5f;color:#93c5fd; }
    .cust-rejection-banner { background:#7f1d1d;color:#fecaca;border-color:#991b1b; }
    .cust-inline-error { background:#7f1d1d;color:#fecaca;border-color:#991b1b; }
}

/* ── Responsive ── */
@media(max-width:768px) {
    .cust-page-header { flex-direction:column; }
    .cust-kpi-grid { grid-template-columns:repeat(2,1fr); }
    .cust-toolbar { flex-direction:column;align-items:stretch; }
    .cust-search-wrap { max-width:none; }
    .cust-profile-top { flex-direction:column; }
    .cust-profile-actions { width:100%; }
    .cust-detail-tabs { overflow-x:auto;flex-wrap:nowrap;gap:0; }
    .cust-dtab { white-space:nowrap;flex-shrink:0; }
    .cust-form-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
    .cust-kpi-grid { grid-template-columns:1fr; }
    .cust-table thead th:nth-child(3),
    .cust-table tbody td:nth-child(3) { display:none; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM DESIGN SYSTEM — Tenant Portal
   Modern frosted-glass aesthetic applied to ALL portal components.
   Uses --glass-* tokens from vaulce.css :root
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Utility: Glass mixin via class ─────────────────────────────── */
.glass,
[class*="glass-"] {
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}

/* ── Glass Shimmer highlight (pseudo-element overlay) ────────────── */
.tp-tenant-bar::before,
.tp-card::before,
.tp-org-card::before,
.tp-action-card::before,
.tp-action-chip::before,
.tsc-kpi-card::before,
.tsc-coin-card::before,
.tsc-dialog::before,
.tsc-table-wrap::before,
.tex-order-card::before,
.tex-balances-card::before,
.ttx-form-card::before,
.ttx-balances-card::before,
.ttr-section::before,
.ttr-pool-card::before,
.onr-form-col::before,
.onr-info-card::before,
.sr-info-card::before,
.sr-wallet-card::before,
.pf-total-header::before,
.pf-section-card::before,
.pf-alloc-card::before,
.watchlist-container::before,
.mkt-trend-card::before,
.cust-table-card::before,
.cust-kpi::before,
.cust-section-card::before,
.cust-profile-card::before,
.cust-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}

/* Ensure positioned context for the pseudo-elements */
.tp-tenant-bar,
.tp-card,
.tp-org-card,
.tp-action-card,
.tp-action-chip,
.tsc-kpi-card,
.tsc-coin-card,
.tsc-dialog,
.tsc-table-wrap,
.tex-order-card,
.tex-balances-card,
.ttx-form-card,
.ttx-balances-card,
.ttr-section,
.ttr-pool-card,
.onr-form-col,
.onr-info-card,
.sr-info-card,
.sr-wallet-card,
.pf-total-header,
.pf-section-card,
.pf-alloc-card,
.watchlist-container,
.mkt-trend-card,
.cust-table-card,
.cust-kpi,
.cust-section-card,
.cust-profile-card,
.cust-modal {
    position: relative;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   1. TENANT BAR — Frosted org switcher
   ═══════════════════════════════════════════════════ */
.tp-tenant-bar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════
   2. SHARED CARDS — .tp-card, .tp-org-card
   ═══════════════════════════════════════════════════ */
.tp-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.tp-card-header {
    border-bottom: 1px solid var(--glass-border-subtle);
    background: rgba(255, 255, 255, 0.04);
}
.tp-card-footer {
    border-top: 1px solid var(--glass-border-subtle);
}

.tp-org-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: all var(--vc-transition-fast);
}
.tp-org-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   3. HERO CARDS — Glass overlay on gradient backgrounds
   ═══════════════════════════════════════════════════ */
.tp-hero-card {
    box-shadow: var(--glass-shadow-lg);
}
.tp-hero-icon {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.tp-hero-btn {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-hero-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════
   4. ACTION CARDS & CHIPS
   ═══════════════════════════════════════════════════ */
.tp-action-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.tp-action-chip {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.tp-action-chip:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
    transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════
   5. STABLECOIN MODULE — .tsc-*
   ═══════════════════════════════════════════════════ */
.tsc-kpi-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.tsc-coin-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.tsc-coin-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
}

.tsc-empty {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px dashed var(--glass-border);
}

.tsc-onchain-strip {
    background: rgba(0, 120, 212, 0.06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 120, 212, 0.12);
}

.tsc-toast {
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow-lg);
}

/* ═══════════════════════════════════════════════════
   6. SHARED UI — Buttons, Tabs, Tables, Dialogs
   ═══════════════════════════════════════════════════ */
/* Tab bar */
.tsc-tab-bar {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border-subtle);
}
.tsc-tab-active,
.tsc-tab.tsc-tab-active {
    background: var(--glass-bg-solid);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Table */
.tsc-table-wrap {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.tsc-table thead {
    background: rgba(255, 255, 255, 0.04);
}
.tsc-table th {
    border-bottom: 1px solid var(--glass-border-subtle);
}
.tsc-table td {
    border-bottom: 1px solid var(--glass-border-subtle);
}

/* Dialog / Modal */
.tsc-dialog-overlay {
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.tsc-dialog {
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}
.tsc-dialog-footer {
    border-top: 1px solid var(--glass-border-subtle);
}

/* Inputs get subtle glass */
.tsc-input,
.tsc-select {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-subtle);
}
.tsc-input:focus,
.tsc-select:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12), var(--glass-shadow-glow);
}

/* Alerts */
.tsc-alert-success {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.tsc-alert-danger {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ═══════════════════════════════════════════════════
   7. WALLETS MODULE — .tw-*
   ═══════════════════════════════════════════════════ */
.tw-tabs {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border-subtle);
}
.tw-tab.active {
    background: var(--glass-bg-solid);
}

.tw-table-wrap {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.tw-table thead {
    background: rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════
   8. EXCHANGE MODULE — .tex-*
   ═══════════════════════════════════════════════════ */
.tex-order-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.tex-direction-tabs {
    border: 1px solid var(--glass-border-subtle);
    overflow: hidden;
}
.tex-dir-tab {
    background: var(--glass-bg-light);
}

.tex-quote-preview {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border-subtle);
}

.tex-balances-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════
   9. TRANSACTIONS MODULE — .ttx-*
   ═══════════════════════════════════════════════════ */
.ttx-form-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.ttx-type-tabs {
    border: 1px solid var(--glass-border-subtle);
}
.ttx-type-tab {
    border-right: 1px solid var(--glass-border-subtle);
}

.ttx-balances-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════
   10. TREASURY MODULE — .ttr-*
   ═══════════════════════════════════════════════════ */
.ttr-section {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.ttr-pool-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.ttr-alloc-bar {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-subtle);
}

/* ═══════════════════════════════════════════════════
   11. MARKET EXPLORER — .me-*, .mkt-*
   ═══════════════════════════════════════════════════ */
.me-global-bar {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border-subtle);
}

.me-pill {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-subtle);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.me-pill:hover {
    border-color: var(--vc-color-primary);
}

.mkt-ticker-wrap {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border-subtle);
}

.mkt-trend-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.mkt-trend-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
}

.mkt-trade-modal {
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}
.mkt-modal-header {
    background: var(--glass-bg-light);
    border-bottom: 1px solid var(--glass-border-subtle);
}

.mkt-modal-trend-shell {
    background: var(--glass-bg-light);
}

.me-search-input {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-subtle);
}

/* ═══════════════════════════════════════════════════
   12. ASSET DETAIL — .ad-*
   ═══════════════════════════════════════════════════ */
.ad-trade-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: visible;
}
.ad-trade-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}

.ad-trade-tabs {
    border: 1px solid var(--glass-border-subtle);
}

.ad-trade-preview {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ad-alert-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
}

.ad-stat {
    border-bottom: 1px solid var(--glass-border-subtle);
    border-right: 1px solid var(--glass-border-subtle);
}

/* ═══════════════════════════════════════════════════
   13. ON-RAMP MODULE — .onr-*
   ═══════════════════════════════════════════════════ */
.onr-form-col {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.onr-info-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.onr-receive-box {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1.5px solid rgba(99, 102, 241, 0.15);
}

.onr-quote-box {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border-subtle);
}

.onr-asset-card {
    background: var(--glass-bg-light);
    border: 1.5px solid var(--glass-border-subtle);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.onr-asset-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-glow);
}
.onr-asset-card.selected {
    border-color: var(--vc-color-primary);
    background: rgba(99, 102, 241, 0.07);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.onr-pm-tab {
    background: var(--glass-bg-light);
    border: 1.5px solid var(--glass-border-subtle);
}

.onr-widget-modal {
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}

.onr-confirm-panel {
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
}

/* ═══════════════════════════════════════════════════
   14. SEND & RECEIVE — .sr-*
   ═══════════════════════════════════════════════════ */
.sr-info-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.sr-wallet-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1.5px solid var(--glass-border);
}
.sr-wallet-card:hover {
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-glow);
}

.sr-recv-block {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}

.sr-balance-row {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sr-travel-rule-box {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════
   15. PORTFOLIO — .pf-*
   ═══════════════════════════════════════════════════ */
.pf-total-header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.pf-section-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.pf-alloc-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.pf-alloc-bar-wrap {
    background: var(--glass-bg-light);
}

.pf-banner-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
}

.pf-txn-tab {
    background: transparent;
}
.pf-txn-tab:hover {
    background: var(--glass-bg-light);
}

/* ═══════════════════════════════════════════════════
   16. WATCHLIST
   ═══════════════════════════════════════════════════ */
.watchlist-container {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.watchlist-header {
    border-bottom: 1px solid var(--glass-border-subtle);
}
.watchlist-search input {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-subtle);
}

/* ═══════════════════════════════════════════════════
   17. CUSTOMER MANAGEMENT — .cust-*
   ═══════════════════════════════════════════════════ */
.cust-kpi {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.cust-kpi:hover {
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
    border-color: rgba(255, 255, 255, 0.5);
}

.cust-table-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.cust-table thead th {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--glass-border-subtle);
}
.cust-table tbody td {
    border-bottom: 1px solid var(--glass-border-subtle);
}
.cust-table-footer {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid var(--glass-border-subtle);
}
.cust-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cust-profile-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.cust-section-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.cust-doc-card {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border-subtle);
}
.cust-doc-card:hover {
    box-shadow: var(--glass-shadow);
    border-color: var(--glass-border);
}

.cust-wallet-card {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border-subtle);
}
.cust-wallet-card:hover {
    box-shadow: var(--glass-shadow);
    border-color: var(--glass-border);
}

/* Customer modal — strongest glass effect */
.cust-overlay {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.cust-modal {
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}
.cust-modal-footer {
    border-top: 1px solid rgba(0,0,0,0.12);
}

/* Customer form inputs */
.cust-input {
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid rgba(0,0,0,0.18);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.cust-input:hover {
    border-color: rgba(0,0,0,0.28);
}
.cust-input:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.18), 0 1px 2px rgba(0,0,0,0.06);
}

/* Upload zone */
.cust-upload-zone {
    border: 2px dashed rgba(0,0,0,0.2);
    background: var(--glass-bg-solid);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cust-upload-zone:hover {
    border-color: var(--vc-color-primary);
    background: rgba(0,120,212,0.04);
}

/* Customer filter pills */
.cust-pill {
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid rgba(0,0,0,0.15);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.cust-pill:hover {
    border-color: var(--vc-color-primary);
    color: var(--vc-color-primary);
    background: rgba(0,120,212,0.06);
}

/* Customer detail tabs */
.cust-detail-tabs {
    border-bottom: 2px solid rgba(0,0,0,0.12);
}

/* Customer search */
.cust-search {
    background: var(--glass-bg-ultra);
    border: 1px solid rgba(0,0,0,0.18);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.cust-search:hover {
    border-color: rgba(0,0,0,0.28);
}
.cust-search:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.18), 0 1px 2px rgba(0,0,0,0.06);
}

/* Toast with glass */
.cust-toast {
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}
.cust-toast-success {
    background: rgba(236, 253, 245, 0.85);
}
.cust-toast-error {
    background: rgba(254, 242, 242, 0.85);
}

/* Empty states */
.cust-empty-state {
    background: var(--glass-bg-solid);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 2px dashed rgba(0,0,0,0.18);
}

/* Profile meta ID chip */
.cust-profile-id {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Code chips */
.cust-code {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Customer dark mode overrides */
@media (prefers-color-scheme: dark) {
    .cust-input,
    .cust-search {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .cust-input:hover,
    .cust-search:hover {
        border-color: rgba(255,255,255,0.25);
    }
    .cust-pill {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .cust-detail-tabs {
        border-bottom-color: rgba(255,255,255,0.12);
    }
    .cust-modal-footer {
        border-top-color: rgba(255,255,255,0.1);
    }
    .cust-upload-zone {
        border-color: rgba(255,255,255,0.18);
    }
    .cust-empty-state {
        border-color: rgba(255,255,255,0.15);
    }
}

/* ═══════════════════════════════════════════════════
   18. ORDERS MODULE — Glass table
   ═══════════════════════════════════════════════════ */
.tsc-table-wrap .tsc-table thead {
    background: rgba(255, 255, 255, 0.04);
}
.tsc-table-wrap .tsc-table th,
.tsc-table-wrap .tsc-table td {
    border-color: var(--glass-border-subtle);
}

/* ═══════════════════════════════════════════════════
   19. STATUS PILLS — Glassmorphic badges
   ═══════════════════════════════════════════════════ */
.tp-status-pill {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.tsc-badge {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ttr-status {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.pf-txn-status {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.me-change-pill {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════
   20. BUTTONS — Glassmorphic refinements
   ═══════════════════════════════════════════════════ */
.tp-btn-primary:hover,
.tsc-btn-primary:hover:not(:disabled),
.cust-btn-primary:hover:not(:disabled) {
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
}

.tp-btn-outline,
.tsc-btn-outline {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.tp-quick-btn {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border-subtle);
}
.tp-quick-btn:hover {
    background: var(--glass-bg);
    border-color: var(--vc-color-primary);
    box-shadow: var(--glass-shadow-glow);
}

/* ═══════════════════════════════════════════════════
   21. AREA SWITCHER — Glass tabs in header
   ═══════════════════════════════════════════════════ */
.area-switcher {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border-subtle);
}
.area-switch-btn.active {
    background: var(--glass-bg-solid);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════
   22. NAV SEARCH — Glass input
   ═══════════════════════════════════════════════════ */
.nav-search {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-subtle);
}
.nav-search:focus-within {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
    background: var(--glass-bg);
}

/* Active nav link */
.nav-link.active {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════
   23. GLASSMORPHISM ANIMATION ENHANCEMENTS
   ═══════════════════════════════════════════════════ */
@keyframes glass-fade-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
    }
}

@keyframes glass-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        backdrop-filter: blur(var(--glass-blur-heavy));
        -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    }
}

/* Override existing modal animations to include blur ramp */
.cust-modal {
    animation: glass-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tsc-dialog {
    animation: glass-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mkt-trade-modal {
    animation: glass-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════
   24. DARK MODE REFINEMENTS
   ═══════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    /* Slightly stronger glass in dark mode for readability */
    .tp-card,
    .tsc-coin-card,
    .tsc-kpi-card,
    .cust-kpi,
    .cust-table-card,
    .cust-section-card,
    .cust-profile-card,
    .pf-section-card,
    .pf-total-header,
    .watchlist-container,
    .mkt-trend-card,
    .tex-order-card,
    .ttx-form-card,
    .ttr-section,
    .onr-form-col,
    .sr-info-card {
        box-shadow: var(--glass-shadow), 0 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    }

    /* Ensure table headers are visible */
    .tsc-table thead,
    .tw-table thead,
    .cust-table thead th,
    .pf-asset-table th {
        background: rgba(255, 255, 255, 0.03);
    }

    /* Dark mode toasts */
    .cust-toast-success { background: rgba(6, 78, 59, 0.8); }
    .cust-toast-error { background: rgba(127, 29, 29, 0.8); }

    /* Dark mode badges keep translucency */
    .cust-badge-success { background: rgba(6, 78, 59, 0.65); }
    .cust-badge-warning { background: rgba(120, 53, 15, 0.65); }
    .cust-badge-danger  { background: rgba(127, 29, 29, 0.65); }
    .cust-badge-info    { background: rgba(30, 58, 95, 0.65); }

    /* Dark mode rejection banner */
    .cust-rejection-banner {
        background: rgba(127, 29, 29, 0.5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    /* Empty state dashed borders */
    .cust-empty-state,
    .tsc-empty {
        border-color: var(--glass-border);
    }

    /* Dark mode hero cards get extra glass glow */
    .tp-hero-card {
        box-shadow: var(--glass-shadow-lg), 0 0 80px -20px rgba(59, 130, 246, 0.15);
    }
}

/* ═══════════════════════════════════════════════════
   25. RESPONSIVE GLASS ADJUSTMENTS
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Reduce blur on mobile for performance */
    :root {
        --glass-blur: 12px;
        --glass-blur-heavy: 16px;
        --glass-blur-light: 6px;
    }
}

@media (max-width: 480px) {
    :root {
        --glass-blur: 8px;
        --glass-blur-heavy: 12px;
        --glass-blur-light: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   USERS MODULE — usr-* prefix
   Team member management with role-based access control
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────── */
.usr-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.usr-page-title {
    font-size: 1.6rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
    margin: 0 0 4px;
}
.usr-page-subtitle {
    font-size: 0.88rem;
    color: var(--vc-text-muted);
    margin: 0;
}

/* ── KPI Grid ─────────────────────────────────────── */
.usr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.usr-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}
.usr-kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.usr-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--vc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.usr-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.usr-kpi-label {
    font-size: 0.78rem;
    color: var(--vc-text-muted);
    font-weight: 500;
}
.usr-kpi-value {
    font-size: 1.35rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}

/* ── Toolbar ─────────────────────────────────────── */
.usr-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.usr-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.usr-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.usr-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--glass-border-subtle);
    background: var(--glass-bg-light);
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    outline: none;
    transition: all var(--vc-transition-fast);
}
.usr-search:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
}
.usr-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.usr-pill {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--glass-border-subtle);
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
    cursor: pointer;
    transition: all var(--vc-transition-fast);
}
.usr-pill:hover {
    border-color: var(--vc-color-primary);
    color: var(--vc-color-primary);
}
.usr-pill-active {
    background: var(--vc-color-primary);
    color: #fff;
    border-color: var(--vc-color-primary);
}
.usr-pill-count {
    font-size: 0.72rem;
    opacity: 0.8;
    margin-left: 4px;
}

/* ── Table Card ──────────────────────────────────── */
.usr-table-card {
    border-radius: var(--vc-radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    position: relative;
}
.usr-table-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.usr-table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    z-index: 1;
}
.usr-table thead {
    background: rgba(255, 255, 255, 0.04);
}
.usr-table th {
    padding: 12px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vc-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--glass-border-subtle);
}
.usr-table td {
    padding: 14px 16px;
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    border-bottom: 1px solid var(--glass-border-subtle);
}
.usr-row {
    transition: background var(--vc-transition-fast);
}
.usr-row:hover {
    background: rgba(255, 255, 255, 0.06);
}
.usr-row:last-child td {
    border-bottom: none;
}

.usr-cell-name {
    display: flex;
    align-items: center;
    gap: 12px;
}
.usr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vc-color-primary), #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}
.usr-name {
    font-weight: 600;
    color: var(--vc-text-primary);
}
.usr-email {
    font-size: 0.8rem;
    color: var(--vc-text-muted);
}
.usr-date {
    font-size: 0.82rem;
    color: var(--vc-text-secondary);
    white-space: nowrap;
}

.usr-table-footer {
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--vc-text-muted);
    border-top: 1px solid var(--glass-border-subtle);
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 1;
}

/* ── Badges ──────────────────────────────────────── */
.usr-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.usr-badge-owner {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}
.usr-badge-admin {
    background: rgba(0, 120, 212, 0.12);
    color: var(--vc-color-primary);
}
.usr-badge-info {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}
.usr-badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--vc-color-success);
}
.usr-badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--vc-color-danger);
}
.usr-badge-default {
    background: rgba(100, 116, 139, 0.12);
    color: var(--vc-text-secondary);
}

/* ── Action Buttons ─────────────────────────────── */
.usr-actions {
    display: flex;
    gap: 6px;
}
.usr-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--glass-border-subtle);
    background: var(--glass-bg-light);
    color: var(--vc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--vc-transition-fast);
}
.usr-action-btn:hover {
    border-color: var(--vc-color-primary);
    color: var(--vc-color-primary);
    background: rgba(0, 120, 212, 0.06);
}
.usr-action-danger:hover {
    border-color: var(--vc-color-danger);
    color: var(--vc-color-danger);
    background: rgba(239, 68, 68, 0.06);
}

/* ── Buttons ─────────────────────────────────────── */
.usr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--vc-radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--vc-transition-fast);
    white-space: nowrap;
}
.usr-btn-primary {
    background: var(--vc-color-primary);
    color: #fff;
}
.usr-btn-primary:hover:not(:disabled) {
    box-shadow: var(--glass-shadow-lg), var(--glass-shadow-glow);
    filter: brightness(1.1);
}
.usr-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.usr-btn-outline {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--vc-text-primary);
    border: 1px solid var(--glass-border);
}
.usr-btn-outline:hover {
    border-color: var(--vc-color-primary);
    color: var(--vc-color-primary);
}
.usr-btn-danger {
    background: var(--vc-color-danger);
    color: #fff;
}
.usr-btn-danger:hover:not(:disabled) {
    filter: brightness(1.1);
}

/* ── Modal / Overlay ─────────────────────────────── */
.usr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: glass-fade-in 0.2s ease;
}
.usr-modal {
    width: 95%;
    max-width: 480px;
    border-radius: var(--vc-radius-xl);
    background: var(--glass-bg-ultra);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    animation: glass-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.usr-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
}
.usr-modal-sm {
    max-width: 400px;
}
.usr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border-subtle);
    position: relative;
    z-index: 1;
}
.usr-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-text-primary);
}
.usr-modal-header-danger h3 {
    color: var(--vc-color-danger);
}
.usr-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--vc-text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: var(--vc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.usr-modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--vc-color-danger);
}
.usr-modal-body {
    padding: 20px 24px;
    position: relative;
    z-index: 1;
}
.usr-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border-subtle);
    position: relative;
    z-index: 1;
}

/* ── Form ─────────────────────────────────────────── */
.usr-form-group {
    margin-bottom: 16px;
}
.usr-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vc-text-secondary);
    margin-bottom: 6px;
}
.usr-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--glass-border-subtle);
    background: var(--glass-bg-light);
    font-size: 0.88rem;
    color: var(--vc-text-primary);
    outline: none;
    transition: all var(--vc-transition-fast);
    box-sizing: border-box;
}
.usr-input:focus {
    border-color: var(--vc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12), var(--glass-shadow-glow);
}
.usr-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.usr-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--vc-text-muted);
    margin-top: 4px;
}
.usr-form-error {
    padding: 10px 14px;
    border-radius: var(--vc-radius-md);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--vc-color-danger);
    font-size: 0.84rem;
    margin-bottom: 16px;
}

/* ── Toast ────────────────────────────────────────── */
.usr-toast {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--vc-radius-lg);
    font-size: 0.88rem;
    font-weight: 500;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow-lg);
    animation: glass-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.usr-toast-success {
    background: rgba(236, 253, 245, 0.9);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.usr-toast-error {
    background: rgba(254, 242, 242, 0.9);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.usr-toast-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    margin-left: 8px;
}
.usr-toast-close:hover {
    opacity: 1;
}

/* ── Empty State ─────────────────────────────────── */
.usr-empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    backdrop-filter: blur(var(--glass-blur-light));
    border: 2px dashed var(--glass-border);
    border-radius: var(--vc-radius-lg);
}
.usr-empty-state h3 {
    margin: 16px 0 6px;
    font-size: 1.1rem;
    color: var(--vc-text-primary);
}
.usr-empty-state p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--vc-text-muted);
}
.usr-empty-tenant {
    text-align: center;
    padding: 80px 24px;
}
.usr-empty-tenant h2 {
    margin: 20px 0 8px;
    color: var(--vc-text-primary);
}
.usr-empty-tenant p {
    color: var(--vc-text-muted);
    max-width: 360px;
    margin: 0 auto;
}

/* ── Skeleton Loading ────────────────────────────── */
.usr-skeleton { padding: 0; }
.usr-skeleton-bar {
    height: 36px;
    background: var(--glass-bg-light);
    border-radius: var(--vc-radius-md);
    margin-bottom: 24px;
    animation: pulse 1.5s infinite;
}
.usr-skeleton-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.usr-skeleton-card {
    height: 80px;
    background: var(--glass-bg-light);
    border-radius: var(--vc-radius-lg);
    animation: pulse 1.5s infinite;
}
.usr-skeleton-table {
    height: 300px;
    background: var(--glass-bg-light);
    border-radius: var(--vc-radius-lg);
    animation: pulse 1.5s infinite;
}

/* ── Spinner ─────────────────────────────────────── */
.usr-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dark Mode ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .usr-toast-success { background: rgba(6, 78, 59, 0.85); color: #d1fae5; }
    .usr-toast-error { background: rgba(127, 29, 29, 0.85); color: #fecaca; }
    .usr-badge-owner { background: rgba(124, 58, 237, 0.2); }
    .usr-badge-admin { background: rgba(0, 120, 212, 0.2); }
    .usr-badge-info { background: rgba(14, 165, 233, 0.2); }
    .usr-badge-success { background: rgba(16, 185, 129, 0.2); }
    .usr-badge-danger { background: rgba(239, 68, 68, 0.2); }
    .usr-badge-default { background: rgba(100, 116, 139, 0.2); }
    .usr-row:hover { background: rgba(255, 255, 255, 0.03); }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .usr-page-header { flex-direction: column; }
    .usr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .usr-toolbar { flex-direction: column; }
    .usr-table th:nth-child(4),
    .usr-table td:nth-child(4) { display: none; }
}
@media (max-width: 480px) {
    .usr-kpi-grid { grid-template-columns: 1fr; }
    .usr-table th:nth-child(5),
    .usr-table td:nth-child(5) { display: none; }
    .usr-modal { width: 100%; max-width: 100%; border-radius: var(--vc-radius-lg) var(--vc-radius-lg) 0 0; }
}