/* Component Styles - Cards, Transactions, Help, About */

/* Transactions Table */
.transactions-table-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.transactions-table thead {
    background: var(--zillion-blue);
    color: white;
}

.transactions-table th {
    padding: var(--space-md);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.transactions-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.transactions-table tbody tr:hover {
    background: var(--bg-secondary);
}

.transactions-table tbody tr:last-child td {
    border-bottom: none;
}

.transactions-table .empty-row td {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-2xl);
}

.transactions-table-container {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}

/* Entry column needs adequate width */
.transactions-table .txn-entry,
.transactions-table .th-entry {
    min-width: 75px;
}

/* Currency column */
.transactions-table .txn-currency {
    text-align: center;
}

.currency-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ========================================
   MOBILE RESPONSIVE TRANSACTION LIST
   ======================================== */

/* All 17 columns always visible above 600px via horizontal scroll
   Table container has overflow-x: auto for tablets/small screens */

/* Mobile Card Layout - Below 600px */
@media (max-width: 600px) {
    .transactions-table-container {
        overflow-x: visible;
        max-height: none;
    }
    
    .transactions-table {
        display: block;
    }
    
    .transactions-table thead {
        display: none;
    }
    
    .transactions-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .transactions-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
        padding: 12px;
        box-shadow: var(--shadow-sm);
        border-left: 4px solid var(--zillion-blue);
        gap: 8px;
    }
    
    .transactions-table tbody tr.approved {
        border-left-color: var(--success);
    }
    
    .transactions-table tbody tr.declined {
        border-left-color: var(--error);
    }
    
    .transactions-table tbody tr.reversed {
        border-left-color: var(--warning);
    }
    
    .transactions-table tbody tr.timeout {
        border-left-color: #e65100;
    }
    
    .transactions-table td {
        display: block;
        padding: 4px 0;
        border-bottom: none;
        white-space: normal;
    }
    
    /* Show all columns in mobile card view */
    .transactions-table .txn-3ds,
    .transactions-table .txn-mcc,
    .transactions-table .txn-entry,
    .transactions-table .txn-auth,
    .transactions-table .txn-terminal,
    .transactions-table .txn-network,
    .transactions-table .txn-rrn,
    .transactions-table .txn-stan,
    .transactions-table .txn-mti,
    .transactions-table .txn-currency {
        display: block;
    }
    
    /* Mobile card layout - key fields prominently displayed */
    .transactions-table .txn-time {
        width: 100%;
        font-size: 11px;
        color: var(--text-muted);
        order: 1;
    }
    
    .transactions-table .txn-type {
        font-weight: 600;
        font-size: 14px;
        order: 2;
        flex: 1;
    }

    .transactions-table .txn-currency {
        font-size: 11px;
        color: var(--text-muted);
        order: 3;
    }
    
    .transactions-table .txn-amount {
        font-weight: 700;
        font-size: 14px;
        order: 3;
        text-align: right;
    }
    
    .transactions-table .txn-channel {
        order: 4;
    }
    
    .transactions-table .txn-status {
        order: 5;
    }
    
    .transactions-table .txn-card {
        width: 100%;
        font-size: 12px;
        color: var(--text-secondary);
        order: 6;
    }
    
    /* Secondary info in a row */
    .transactions-table .txn-mti,
    .transactions-table .txn-network,
    .transactions-table .txn-terminal,
    .transactions-table .txn-stan,
    .transactions-table .txn-rrn,
    .transactions-table .txn-auth,
    .transactions-table .txn-entry,
    .transactions-table .txn-3ds,
    .transactions-table .txn-mcc {
        font-size: 10px;
        color: var(--text-muted);
        order: 10;
    }
    
    .transactions-table .txn-mti::before { content: 'MTI: '; font-weight: 600; }
    .transactions-table .txn-network::before { content: ''; }
    .transactions-table .txn-terminal::before { content: 'TID: '; font-weight: 600; }
    .transactions-table .txn-stan::before { content: 'STAN: '; font-weight: 600; }
    .transactions-table .txn-rrn::before { content: 'RRN: '; font-weight: 600; }
    .transactions-table .txn-auth::before { content: 'Auth: '; font-weight: 600; }
    .transactions-table .txn-entry::before { content: 'Entry: '; font-weight: 600; }
    
    /* Empty state in mobile */
    .transactions-table .empty-row,
    .transactions-table .no-results-row {
        display: block;
        text-align: center;
    }
    
    .transactions-table .empty-row td,
    .transactions-table .no-results-row td {
        width: 100%;
        padding: var(--space-xl);
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .transactions-table tbody tr {
        padding: 10px;
    }
    
    .transactions-table .txn-type {
        font-size: 13px;
    }
    
    .transactions-table .txn-amount {
        font-size: 13px;
    }
    
    /* Hide some secondary fields on very small screens */
    .transactions-table .txn-3ds,
    .transactions-table .txn-mcc,
    .transactions-table .txn-entry {
        display: none;
    }
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.status-badge.approved {
    background: var(--success-light);
    color: var(--success);
}

.status-badge.declined {
    background: var(--error-light);
    color: var(--error);
}

.status-badge.reversed {
    background: var(--warning-light);
    color: var(--warning);
}

.status-badge.timeout {
    background: #fff3e0;
    color: #e65100;
}

.status-badge.pending {
    background: var(--info-light);
    color: var(--info);
}

/* Enhanced Status Display - Industry Standard Format */
.status-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: help;
}

.status-display.approved {
    background: var(--success-light);
    color: var(--success);
}

.status-display.declined {
    background: var(--error-light);
    color: var(--error);
}

.status-display.timeout {
    background: #fff3e0;
    color: #e65100;
}

.status-display.reversed {
    background: var(--warning-light);
    color: var(--warning);
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.status-icon.approved {
    background: var(--success);
    color: white;
}

.status-icon.declined {
    background: var(--error);
    color: white;
}

.status-icon.timeout {
    background: #e65100;
    color: white;
    font-size: 9px;
}

.status-icon.reversed {
    background: var(--warning);
    color: white;
}

.status-code {
    font-weight: 600;
    font-size: 11px;
}

.status-desc {
    font-weight: 500;
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Separator between code and description */
.status-separator {
    opacity: 0.5;
    margin: 0 1px;
}

/* Linked Transaction Indicator */
.linked-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    cursor: help;
    opacity: 0.8;
}

.linked-indicator:hover {
    opacity: 1;
}

/* Transaction row styling for linked transactions */
.transaction-row.linked-txn {
    background: linear-gradient(90deg, rgba(255, 170, 77, 0.08) 0%, transparent 20%);
    border-left: 3px solid var(--pay-orange);
}

.transaction-row.timeout {
    background: linear-gradient(90deg, rgba(230, 81, 0, 0.08) 0%, transparent 30%);
}

.transaction-row.reversed {
    background: linear-gradient(90deg, rgba(255, 152, 0, 0.08) 0%, transparent 30%);
}

/* Date/Time Cell - Industry Standard Stacked Format */
.datetime-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.2;
}

.date-part {
    font-size: 10px;
    color: #666;
    font-weight: 500;
}

.time-part {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #333;
}

/* Network Badge */
.network-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* MTI Badge */
.mti-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    background: var(--zillion-blue);
    color: white;
}

/* MCC Badge */
.mcc-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    background: #f0f0f0;
    color: #333;
    cursor: help;
}

/* 3DS Badge — acquiring switch style */
.threeds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: #f0f0f0;
    color: #999;
    white-space: nowrap;
}

.threeds-badge .threeds-shield {
    font-size: 11px;
    line-height: 1;
}

.threeds-badge.success {
    background: var(--success-light, #d4edda);
    color: var(--success, #28a745);
}

.threeds-badge.failed {
    background: #fde8e8;
    color: #dc3545;
}

.threeds-badge.skipped {
    background: #f0f0f0;
    color: #999;
}

.threeds-na {
    color: #ccc;
    font-size: 14px;
}

/* 3DS Failed transaction row styling */
.transaction-row.threeds-failed {
    background: rgba(220, 53, 69, 0.04);
}

.transaction-row.threeds-failed:hover {
    background: rgba(220, 53, 69, 0.08) !important;
}

.status-display.threeds-failed {
    color: #c53030;
}

.status-display.threeds-failed .status-icon {
    font-size: 12px;
}

.rc-badge.threeds-failed {
    background: #f0f0f0;
    color: #999;
    border: 1px solid #e0e0e0;
}

/* Compact table cells for new columns */
.txn-terminal, .txn-3ds, .txn-mcc {
    white-space: nowrap;
    text-align: center;
}

.txn-terminal {
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* Export Buttons */
.export-buttons {
    display: flex;
    gap: var(--space-sm);
}

.export-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--zillion-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 6px rgba(0, 56, 106, 0.2);
}

.export-btn:hover {
    background: var(--zillion-blue-light);
    box-shadow: 0 4px 10px rgba(0, 56, 106, 0.3);
    transform: translateY(-1px);
}

.export-btn.danger {
    background: var(--error);
}

.export-btn.danger:hover {
    background: #c0392b;
}

/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.card-profile {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-profile:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Card Visual - Proper credit card aspect ratio 85.6mm x 53.98mm = 1.586:1 */
.card-visual {
    aspect-ratio: 1.586 / 1;
    width: 100%;
    max-width: 340px;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: var(--space-lg) 0;
}

.card-visual.generic {
    background: linear-gradient(135deg, #1a1f71 0%, #003087 50%, #00579f 100%);
}

.card-visual::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
}

/* Chip - positioned in upper-left area (matching real card layout) */
.card-chip {
    width: 45px;
    height: 34px;
    background: linear-gradient(135deg, #e8c547 0%, #d4af37 25%, #f5d87e 50%, #d4af37 75%, #b8972e 100%);
    border-radius: 5px;
    position: absolute;
    top: 32%;
    left: 20px;
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3);
    border: 1px solid rgba(180, 150, 60, 0.4);
}

.card-chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 24px;
    background: 
        linear-gradient(to right, transparent 40%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.12) 42%, transparent 42%, transparent 58%, rgba(0,0,0,0.12) 58%, rgba(0,0,0,0.12) 60%, transparent 60%),
        linear-gradient(to bottom, transparent 28%, rgba(0,0,0,0.12) 28%, rgba(0,0,0,0.12) 30%, transparent 30%, transparent 68%, rgba(0,0,0,0.12) 68%, rgba(0,0,0,0.12) 70%, transparent 70%);
}

.card-chip::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 3px;
    border: 1px solid rgba(180, 150, 60, 0.25);
}

.card-contactless {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
}

.card-contactless .wave {
    border-color: rgba(255, 255, 255, 0.6);
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* Card number - larger font */
.card-number {
    font-family: 'Consolas', monospace;
    font-size: 18px;
    color: white;
    letter-spacing: 3px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

/* Card bottom - contains expiry and cardholder */
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}

/* Cardholder on left */
.card-holder {
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Expiry - positioned in middle-right area */
.card-expiry {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.card-expiry-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-expiry-value {
    color: white;
    font-size: 14px;
    font-family: 'Consolas', monospace;
    font-weight: 500;
}

/* Network logo - positioned at bottom-right */
.card-network-logo {
    position: absolute;
    bottom: 14px;
    right: 16px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Generic card styling */
.card-visual.generic .card-network-logo {
    font-size: 16px;
}

/* Generic network logo */
.network-logo-generic {
    font-size: 18px;
    color: white;
}

/* ========================================
   CARD PROFILE & TYPE BADGES
   ======================================== */

.card-profile-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--zillion-blue-subtle);
    color: var(--zillion-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-type-badge.debit {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.card-type-badge.credit {
    background: rgba(59, 130, 246, 0.15);
    color: #2563EB;
}

.card-type-badge.charge {
    background: rgba(139, 92, 246, 0.15);
    color: #7C3AED;
}

.card-type-badge.prepaid {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

/* ========================================
   CHANNEL BADGES — Card Capabilities
   ======================================== */

.card-channel-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.channel-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 16px;
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
}

.channel-badge.enabled {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.channel-badge.disabled {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    opacity: 0.5;
    filter: grayscale(0.5);
}

/* ========================================
   PIN REVEAL TOGGLE
   ======================================== */

.pin-masked {
    cursor: pointer;
    user-select: none;
}

.pin-masked .pin-actual {
    display: none;
}

.pin-masked.pin-revealed .pin-value {
    display: none;
}

.pin-masked.pin-revealed .pin-actual {
    display: inline;
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: var(--zillion-blue);
}

/* ========================================
   RESET CARD BUTTON
   ======================================== */

.editor-btn.reset-card-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.editor-btn.reset-card-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.card-name {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.card-status-indicator {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.card-status-indicator.active {
    background: var(--success-light);
    color: var(--success);
}

.card-status-indicator.expired {
    background: var(--warning-light);
    color: var(--warning);
}

.card-status-indicator.blocked {
    background: var(--error-light);
    color: var(--error);
}

.card-status-indicator.stolen {
    background: rgba(220, 38, 38, 0.2);
    color: #DC2626;
}

.card-status-indicator.lost {
    background: rgba(220, 38, 38, 0.2);
    color: #DC2626;
}

.card-status-indicator.restricted {
    background: rgba(234, 88, 12, 0.2);
    color: #EA580C;
}

/* Card Full Details - CVV, PAN, PIN visible */
.card-full-details {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
}

.card-detail-row {
    display: grid;
    grid-template-columns: 85px 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 0;
}

.card-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

.card-detail-label {
    font-size: 12px;
    color: var(--text-muted);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.card-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Consolas', monospace;
    letter-spacing: 0.5px;
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.copy-btn:hover {
    background: var(--border-light);
}

.copy-btn.copied {
    color: var(--success);
}

.card-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.card-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-info-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.card-info-value {
    font-size: var(--text-sm);
    font-weight: 500;
}

.card-details {
    width: 100%;
    padding: 0 var(--space-lg) var(--space-lg);
}

.card-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

.card-action-btn {
    min-width: 120px;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.card-action-btn:hover {
    background: var(--zillion-blue-subtle);
    border-color: var(--zillion-blue);
    color: var(--zillion-blue);
}

/* Card Editor Modal */
.card-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.card-editor-modal.active {
    opacity: 1;
    visibility: visible;
}

.card-editor-modal .modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9);
    transition: transform var(--transition-normal);
}

.card-editor-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--zillion-blue);
    color: white;
}

.modal-header h3 {
    color: white;
    margin: 0;
    font-size: var(--text-lg);
}

.modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: var(--text-xl);
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: var(--space-sm) var(--space-md);
    max-height: calc(95vh - 80px);
    overflow-y: auto;
}

/* Compact form styling for modal - reduce spacing for smaller screens */
.modal-body .editor-form-group {
    margin-bottom: 6px;
}

.modal-body .editor-label {
    margin-bottom: 2px;
    font-size: var(--text-sm);
}

.modal-body .editor-input,
.modal-body .editor-select {
    padding: 6px var(--space-sm);
    font-size: var(--text-sm);
}

.modal-body .editor-row {
    gap: var(--space-sm);
}

.modal-body .editor-actions {
    margin-top: var(--space-sm);
    gap: var(--space-sm);
}

.modal-body .editor-btn {
    padding: var(--space-sm);
    font-size: var(--text-sm);
}

.editor-form-group {
    margin-bottom: var(--space-lg);
}

.editor-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.editor-input,
.editor-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

.editor-input:focus,
.editor-select:focus {
    outline: none;
    border-color: var(--zillion-blue);
}

.editor-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
    font-style: italic;
}

/* Channel Restrictions Grid */
.channel-restrictions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.channel-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.channel-checkbox:hover {
    border-color: var(--zillion-blue);
    background: var(--bg-secondary);
}

.channel-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.channel-checkbox span {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.channel-checkbox input:not(:checked) + span {
    color: var(--text-primary);
}

.editor-row {
    display: flex;
    gap: var(--space-md);
}

.editor-row .editor-form-group {
    flex: 1;
}

.editor-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.editor-btn {
    flex: 1;
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.editor-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.editor-btn.cancel:hover {
    background: var(--bg-tertiary);
}

.editor-btn.save {
    background: linear-gradient(135deg, var(--zillion-blue) 0%, var(--zillion-blue-light) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 56, 106, 0.2);
}

.editor-btn.save:hover {
    background: linear-gradient(135deg, var(--zillion-blue-light) 0%, var(--zillion-blue) 100%);
    box-shadow: 0 4px 12px rgba(0, 56, 106, 0.3);
}

/* Help Section */
.help-container {
    display: flex;
    gap: var(--space-xl);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    min-height: 600px;
}

.help-sidebar {
    width: 250px;
    background: var(--bg-secondary);
    padding: var(--space-lg);
    border-right: 1px solid var(--border-light);
    flex-shrink: 0;
}

.help-sidebar h3 {
    margin-bottom: var(--space-md);
    color: var(--zillion-blue);
}

.help-nav {
    list-style: none;
}

.help-nav li {
    margin-bottom: var(--space-xs);
}

.help-nav a,
.help-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.help-nav a:hover,
.help-nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--zillion-blue);
}

.help-nav a.active,
.help-nav-item.active {
    background: var(--zillion-blue);
    color: white;
}

.help-nav-icon {
    font-size: var(--text-base);
}

.help-nav-title {
    flex: 1;
}

.help-no-results {
    padding: var(--space-md);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.help-content {
    flex: 1;
    padding: var(--space-xl);
    overflow-y: auto;
}

.help-section {
    margin-bottom: var(--space-2xl);
}

.help-section h2 {
    color: var(--zillion-blue);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--pay-orange);
}

.help-section h3 {
    color: var(--text-primary);
    margin: var(--space-lg) 0 var(--space-md);
}

.help-section p {
    color: var(--text-secondary);
    line-height: 1.8;
}

.help-section ul,
.help-section ol {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
    color: var(--text-secondary);
}

.help-section li {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
}

.help-table th,
.help-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border: 1px solid var(--border-light);
}

.help-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--zillion-blue);
}

.help-table tr:nth-child(even) {
    background: var(--bg-secondary);
}

.help-code {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-family: 'Consolas', monospace;
    font-size: var(--text-sm);
    overflow-x: auto;
    margin: var(--space-md) 0;
    display: block;
}

code.help-code {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) 0;
}

.help-topic-body code:not(.help-code) {
    background: #e8e8e8;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 0.9em;
}

.help-tip {
    background: var(--info-light);
    border-left: 4px solid var(--info);
    padding: var(--space-md);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: var(--space-md) 0;
}

.help-tip strong {
    color: var(--info);
}

.help-warning {
    background: var(--warning-light);
    border-left: 4px solid var(--warning);
    padding: var(--space-md);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: var(--space-md) 0;
}

.help-warning strong {
    color: var(--warning);
}

/* About Section */
.about-container {
    max-width: 900px;
    margin: 0 auto;
}

.about-hero {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    box-shadow: 0 10px 30px rgba(0, 56, 106, 0.2);
}

.about-hero .about-logo {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.about-hero .logo-pay {
    color: var(--pay-orange);
}

.about-hero .logo-zillion {
    color: white;
}

.about-tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-lg);
    margin-bottom: var(--space-xl);
}

.visit-btn {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--pay-orange) 0%, var(--pay-orange-dark) 100%);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(255, 170, 77, 0.3);
}

.visit-btn:hover {
    background: linear-gradient(135deg, var(--pay-orange-light) 0%, var(--pay-orange) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 170, 77, 0.4);
}

.about-social {
    background: var(--bg-primary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.about-social h3 {
    margin-bottom: var(--space-lg);
    color: var(--zillion-blue);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.social-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.social-link:hover {
    transform: translateY(-2px);
}

.social-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
}

.social-link.linkedin {
    background: #e8f4fd;
    color: #0077b5;
}

.social-link.linkedin .social-icon {
    background: #0077b5;
    color: white;
}

.social-link.facebook {
    background: #e8f0fe;
    color: #1877f2;
}

.social-link.facebook .social-icon {
    background: #1877f2;
    color: white;
}

.social-link.youtube {
    background: #fce8e8;
    color: #ff0000;
}

.social-link.youtube .social-icon {
    background: #ff0000;
    color: white;
}

.social-link.telegram {
    background: #e5f6fb;
    color: #0088cc;
}

.social-link.telegram .social-icon {
    background: #0088cc;
    color: white;
}

.about-email {
    color: var(--text-secondary);
}

.about-email a {
    color: var(--zillion-blue);
    font-weight: 500;
}

/* About this Simulator section */
.about-simulator {
    background: var(--bg-primary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-xl);
}

.about-simulator h3 {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--zillion-blue);
}

.about-simulator-text {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
    text-align: left;
}

.about-simulator-text:last-child {
    margin-bottom: 0;
}

.about-books {
    background: var(--bg-primary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.about-books h3 {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--zillion-blue);
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.book-card {
    background: var(--bg-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-fast);
}

.book-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.book-cover {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.book-placeholder {
    font-size: 64px;
}

.book-card h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.book-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

/* Receipt Modal */
.receipt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.receipt-modal.active {
    opacity: 1;
    visibility: visible;
}

.receipt-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.receipt-paper-large {
    background: #f5f5f0;
    padding: var(--space-lg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xl);
    font-family: 'Courier New', monospace;
    font-size: var(--text-sm);
    color: #333;
    min-width: 280px;
    max-width: 350px;
}

.receipt-close-btn {
    padding: var(--space-sm) var(--space-xl);
    background: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.receipt-close-btn:hover {
    background: var(--bg-secondary);
}

/* Receipt Styles */
.receipt-header {
    text-align: center;
    border-bottom: 1px dashed #999;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.receipt-logo {
    font-weight: bold;
    font-size: var(--text-base);
}

.receipt-body {
    margin-bottom: var(--space-sm);
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.receipt-divider {
    border-top: 1px dashed #999;
    margin: var(--space-sm) 0;
}

/* Timeout Notice in Receipt */
.timeout-notice {
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    font-size: var(--text-sm);
    color: #e65100;
    line-height: 1.5;
}

/* Linked Transaction Info */
.linked-info {
    background: linear-gradient(90deg, rgba(255, 170, 77, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--pay-orange);
    padding-left: var(--space-sm);
    margin-left: calc(-1 * var(--space-sm));
}

.receipt-footer {
    text-align: center;
    border-top: 1px dashed #999;
    padding-top: var(--space-sm);
    font-size: var(--text-xs);
    color: #666;
}

.receipt-barcode {
    margin-top: var(--space-sm);
    text-align: center;
}

.receipt-barcode-img {
    height: 30px;
    background: repeating-linear-gradient(
        90deg,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 4px
    );
    margin-bottom: 4px;
}

.receipt-barcode-text {
    font-size: 10px;
    letter-spacing: 2px;
}

/* ===== SETTINGS PANEL ===== */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
    margin-right: var(--space-md);
}

.header-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.settings-panel {
    position: fixed;
    top: 60px;
    right: -350px;
    width: 320px;
    max-width: 90vw;
    height: calc(100vh - 60px);
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    transition: right var(--transition-normal);
    overflow-y: auto;
}

.settings-panel.active {
    right: 0;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--zillion-blue);
    color: white;
    position: sticky;
    top: 0;
}

.settings-header h3 {
    margin: 0;
    font-size: var(--text-lg);
    color: white;
}

.settings-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 16px;
}

.settings-content {
    padding: var(--space-md);
}

.settings-group {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.settings-group:last-child {
    border-bottom: none;
}

.settings-group h4 {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
}

.settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    cursor: pointer;
}

.settings-toggle span:first-child {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.settings-toggle input[type="checkbox"] {
    display: none;
}

.settings-toggle .toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 12px;
    position: relative;
    transition: background var(--transition-fast);
}

.settings-toggle .toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.settings-toggle input:checked + .toggle-slider {
    background: var(--zillion-blue);
}

.settings-toggle input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

.volume-control {
    display: none;
    padding: var(--space-sm) 0;
}

.volume-control.active {
    display: block;
}

.volume-control label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.volume-control input[type="range"] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.volume-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--zillion-blue);
    border-radius: 50%;
    cursor: pointer;
}

/* ===== KEYBOARD SHORTCUTS OVERLAY ===== */
.shortcuts-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.shortcuts-overlay.active {
    display: flex;
}

.shortcuts-panel {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--zillion-blue);
    color: white;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.shortcuts-header h3 {
    margin: 0;
    color: white;
}

.shortcuts-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 16px;
}

.shortcuts-content {
    padding: var(--space-md);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.shortcuts-section h4 {
    font-size: var(--text-sm);
    color: var(--zillion-blue);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 4px;
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--text-sm);
}

.shortcut-row kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-family: monospace;
    font-size: var(--text-xs);
    min-width: 60px;
    text-align: center;
}

.shortcut-row span {
    color: var(--text-secondary);
}

/* ===== TRANSACTION FLOW VISUALIZATION ===== */
.flow-visualization {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-md);
}

.flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    overflow-x: auto;
}

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    position: relative;
}

.flow-node-icon {
    width: 50px;
    height: 50px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all var(--transition-normal);
}

.flow-node.active .flow-node-icon {
    background: var(--zillion-blue);
    border-color: var(--zillion-blue);
    box-shadow: 0 0 20px rgba(0, 56, 106, 0.5);
    animation: pulse 1s infinite;
}

.flow-node.success .flow-node-icon {
    background: var(--success);
    border-color: var(--success);
}

.flow-node.error .flow-node-icon {
    background: var(--error);
    border-color: var(--error);
}

.flow-node-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: center;
}

.flow-connector {
    flex: 1;
    height: 3px;
    background: var(--border-color);
    position: relative;
    min-width: 30px;
    margin: 0 4px;
}

.flow-connector.active {
    background: var(--zillion-blue);
}

.flow-connector.active::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: var(--pay-orange);
    animation: flowPulse 0.8s infinite;
}

@keyframes flowPulse {
    0% { left: 0; }
    100% { left: calc(100% - 20px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.flow-status {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.flow-timing {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== SCENARIO LIBRARY ===== */
.scenario-library {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    max-width: 600px;
    width: 90%;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.scenario-library.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.scenario-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.scenario-library-header h3 {
    margin: 0;
}

.scenario-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-muted);
}

.scenario-close:hover {
    color: var(--danger-color);
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}

.scenario-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.scenario-card:hover {
    border-color: var(--zillion-blue);
    box-shadow: var(--shadow-md);
}

.scenario-card-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.scenario-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.scenario-card-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== ISO FIELD REFERENCE PANEL ===== */
.iso-reference-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 2px solid var(--zillion-blue);
    max-height: 300px;
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    z-index: 900;
}

.iso-reference-panel.active {
    transform: translateY(0);
}

.iso-reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--zillion-blue);
    color: white;
}

.iso-reference-content {
    padding: var(--space-md);
    overflow-y: auto;
    max-height: 250px;
}

.iso-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-sm);
}

.iso-field-item {
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--zillion-blue);
}

.iso-field-num {
    font-weight: 700;
    color: var(--zillion-blue);
}

.iso-field-name {
    font-weight: 600;
    color: var(--text-primary);
}

.iso-field-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== EXPORT BUTTONS ===== */
/* Styles moved to main export-buttons section above */

/* ===== QUIZ MODE ===== */
.quiz-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.quiz-modal.active {
    display: flex;
}

.quiz-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    padding: var(--space-lg);
}

.quiz-progress {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-md);
}

.quiz-progress-dot {
    width: 10px;
    height: 10px;
    background: var(--border-color);
    border-radius: 50%;
}

.quiz-progress-dot.completed {
    background: var(--success);
}

.quiz-progress-dot.current {
    background: var(--zillion-blue);
}

.quiz-question {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.quiz-option {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.quiz-option:hover {
    border-color: var(--zillion-blue);
}

.quiz-option.selected {
    border-color: var(--zillion-blue);
    background: var(--zillion-blue-subtle);
}

.quiz-option.correct {
    border-color: var(--success);
    background: var(--success-light);
}

.quiz-option.incorrect {
    border-color: var(--error);
    background: var(--error-light);
}

.quiz-score {
    text-align: center;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--zillion-blue);
}

/* ===== BALANCE ANIMATION ===== */
.balance-animated {
    transition: all var(--transition-normal);
}

.balance-animated.updating {
    animation: balanceUpdate 0.5s ease;
}

@keyframes balanceUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: var(--pay-orange); }
    100% { transform: scale(1); }
}

/* ===== TUTORIAL TOOLTIPS ===== */
.tutorial-tooltip {
    position: absolute;
    background: var(--zillion-blue);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    max-width: 250px;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    animation: tooltipFadeIn 0.3s ease;
}

.tutorial-tooltip::after {
    content: '';
    position: absolute;
    border: 8px solid transparent;
    border-top-color: var(--zillion-blue);
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
}

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

/* ===== NETWORK BRANDING ===== */
.card-network-logo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.network-generic { color: #00386A; }

/* ===== ISO REFERENCE TABLE ===== */
.iso-reference-section {
    margin-bottom: var(--space-md);
}

.iso-reference-section h4 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--text-sm);
    color: var(--zillion-blue);
}

.iso-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.iso-ref-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-light);
}

.iso-ref-table td:first-child {
    width: 60px;
    font-family: var(--font-mono);
    color: var(--zillion-blue);
    font-weight: 600;
}

.iso-reference-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.iso-reference-close:hover {
    opacity: 0.8;
}

/* ===== QUIZ MODAL ===== */
.quiz-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.quiz-modal.active {
    opacity: 1;
    visibility: visible;
}

.quiz-modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.quiz-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.quiz-modal-header h3 {
    margin: 0;
}

.quiz-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
}

.quiz-close:hover {
    color: var(--danger-color);
}

#quiz-container {
    padding: var(--space-md);
}

.quiz-progress {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.quiz-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
}

.quiz-progress-dot.completed {
    background: var(--success-color);
}

.quiz-progress-dot.current {
    background: var(--zillion-blue);
    transform: scale(1.2);
}

.quiz-question {
    font-size: var(--text-md);
    font-weight: 500;
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.quiz-option {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
}

.quiz-option:hover:not(:disabled) {
    border-color: var(--zillion-blue);
    background: var(--bg-hover);
}

.quiz-option.correct {
    background: var(--success-bg);
    border-color: var(--success-color);
    color: var(--success-color);
}

.quiz-option.incorrect {
    background: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.quiz-score {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    color: var(--zillion-blue);
}

/* ===========================
   ISO 8583 Log Toggle Controls
   =========================== */
.log-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s;
    user-select: none;
}

.log-toggle:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.log-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--zillion-blue-light, #4da6ff);
    cursor: pointer;
}

/* ===========================
   Compliance Scorecard
   =========================== */
.compliance-scorecard {
    padding: 12px;
    font-size: 12px;
}

.compliance-grade-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.compliance-grade {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.compliance-score-text {
    flex-shrink: 0;
}

.score-percentage {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.score-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compliance-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary, #e0e0e0);
    border-radius: 4px;
    overflow: hidden;
}

.compliance-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.compliance-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compliance-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.compliance-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.compliance-item {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.compliance-item.present {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

.compliance-item.missing {
    background: rgba(198, 40, 40, 0.15);
    color: #c62828;
}

.compliance-item.issue {
    background: rgba(255, 143, 0, 0.15);
    color: #ff8f00;
}

.compliance-na {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 12px;
}

/* ===========================
   Hex Dump Display
   =========================== */
.hex-dump-section .hex-dump-content {
    overflow-x: auto;
}

.hex-dump-section .hex-dump-content.hidden {
    display: none;
}

.hex-dump-display {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.5;
    color: #00ff41;
    background: #0a0a0a;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid #333;
}

/* Dark mode overrides */
[data-theme="dark"] .compliance-item.present {
    background: rgba(0, 200, 83, 0.2);
}

[data-theme="dark"] .compliance-item.missing {
    background: rgba(198, 40, 40, 0.2);
}

[data-theme="dark"] .compliance-item.issue {
    background: rgba(255, 143, 0, 0.2);
}

/* ===========================
   TPDU and Message Length Headers
   =========================== */
.log-transport-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(76, 175, 80, 0.1);
    border-left: 3px solid #4caf50;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    margin-bottom: 4px;
}

.log-transport-label {
    font-weight: 700;
    color: #4caf50;
    min-width: 45px;
}

.log-transport-value {
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 1px;
}

.log-transport-desc {
    font-size: 10px;
    color: var(--text-secondary);
    font-style: italic;
}

[data-theme="dark"] .log-transport-header {
    background: rgba(76, 175, 80, 0.15);
}

[data-theme="dark"] .log-transport-value {
    background: rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   CARD MANAGEMENT — Mobile-First Professional Layout
   Patterns: Revolut, Monzo, Chase, Apple Wallet UX
   ═══════════════════════════════════════════════════════════════ */

/* CMS Header */
.cms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cms-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

.cms-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* CMS Buttons */
.cms-btn {
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    white-space: nowrap;
}

.cms-btn-icon { font-size: 13px; }

.cms-btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.cms-btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.cms-btn-primary {
    background: var(--zillion-blue);
    color: white;
    border: 1px solid var(--zillion-blue);
}
.cms-btn-primary:hover { background: var(--zillion-blue-dark); }

.cms-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.cms-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

.cms-btn-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.cms-btn-success:hover { background: rgba(16, 185, 129, 0.2); }

.cms-btn-sm { padding: 5px 10px; font-size: 11px; }

/* ─── Dashboard Statistics ─── */
.cms-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.cms-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
    min-width: 0;
}
.cms-stat-card:hover { box-shadow: var(--shadow-sm); }

.cms-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.cms-stat-icon.active { background: rgba(16, 185, 129, 0.12); color: #059669; }
.cms-stat-icon.portfolio { background: rgba(59, 130, 246, 0.12); color: #2563EB; }
.cms-stat-icon.credit { background: rgba(139, 92, 246, 0.12); color: #7C3AED; }
.cms-stat-icon.alerts { background: rgba(245, 158, 11, 0.12); color: #D97706; }

.cms-stat-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.cms-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

/* ─── Main Content Split ─── */
.cms-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 500px;
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ─── Card List (Left / Mobile: Full) ─── */
.cms-card-list {
    border-right: 1px solid var(--border-light);
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cms-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.cms-list-header h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cms-card-count {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.cms-list-items {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* ─── Card List Item — Rich Tile ─── */
.cms-list-item {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.cms-list-item:hover { background: var(--bg-secondary); }
.cms-list-item:active { background: rgba(37, 99, 235, 0.04); }

.cms-list-item.selected {
    background: rgba(37, 99, 235, 0.06);
    border-left: 3px solid var(--zillion-blue);
    padding-left: 13px;
}

/* Mini card icon */
.cms-list-item-icon {
    width: 42px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    align-self: flex-start;
    margin-top: 2px;
}
.cms-list-item-icon.generic { background: linear-gradient(135deg, #1a1f71, #003087); }

.cms-list-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cms-list-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cms-list-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-list-item-status {
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.cms-list-item-status.active { background: rgba(16, 185, 129, 0.12); color: #059669; }
.cms-list-item-status.blocked { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.cms-list-item-status.lost { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.cms-list-item-status.stolen { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.cms-list-item-status.expired { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.cms-list-item-status.restricted { background: rgba(234, 88, 12, 0.12); color: #EA580C; }

.cms-list-item-pan {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.3px;
}

/* Balance display in card list — industry standard */
.cms-list-item-balance {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.cms-list-item-balance-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.cms-list-item-balance-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Credit card: show both limit and available */
.cms-list-item-credit-info {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.cms-list-item-credit-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cms-list-item-credit-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cms-list-item-credit-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.cms-list-item-credit-value.available {
    color: #059669;
}

/* Arrow indicator for tapping */
.cms-list-item-arrow {
    display: none;
    align-self: center;
    color: var(--text-muted);
    font-size: 16px;
    opacity: 0.4;
    flex-shrink: 0;
}

/* ─── Mobile Back Button ─── */
.cms-back-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: none;
    border-bottom: 1px solid var(--border-light);
    color: var(--zillion-blue);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.cms-back-btn:hover { background: var(--bg-secondary); }

/* ─── Detail Panel (Right / Mobile: Full) ─── */
.cms-detail-panel {
    background: var(--bg-primary);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

.cms-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--text-muted);
    padding: 40px 20px;
}
.cms-placeholder-icon { font-size: 40px; opacity: 0.3; }
.cms-placeholder-text { font-size: 13px; opacity: 0.6; text-align: center; }

.cms-detail-content {
    display: flex;
    flex-direction: column;
}

/* ─── Card Header in Detail ─── */
.cms-card-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    overflow: hidden;
}

.cms-card-visual-wrap {
    flex-shrink: 0;
    width: clamp(220px, 22vw, 320px);
}

.cms-card-visual-wrap .card-visual {
    width: 100%;
    max-width: 320px;
    margin: 0;
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 22px);
}

/* Scale card internal elements within CMS wrapper */
.cms-card-visual-wrap .card-number {
    font-size: clamp(12px, 1.4vw, 18px);
    letter-spacing: clamp(1px, 0.3vw, 3px);
    margin-bottom: clamp(6px, 0.8vw, 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cms-card-visual-wrap .card-holder {
    font-size: clamp(9px, 1vw, 13px);
}
.cms-card-visual-wrap .card-expiry-value {
    font-size: clamp(10px, 1.1vw, 14px);
}
.cms-card-visual-wrap .card-expiry-label {
    font-size: clamp(6px, 0.7vw, 8px);
}
.cms-card-visual-wrap .card-chip {
    width: clamp(28px, 3vw, 40px);
    height: clamp(20px, 2.2vw, 30px);
    top: 30%;
    left: clamp(10px, 1.2vw, 20px);
}
.cms-card-visual-wrap .card-contactless {
    width: clamp(18px, 2vw, 26px);
    height: clamp(18px, 2vw, 26px);
    top: 10px;
    right: 10px;
}
.cms-card-visual-wrap .card-network-logo {
    font-size: clamp(10px, 1.2vw, 16px);
    bottom: 10px;
    right: 12px;
}

.cms-card-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
    min-width: 0;
}

.cms-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cms-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.cms-card-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cms-card-type-badge.debit { background: rgba(16, 185, 129, 0.12); color: #059669; }
.cms-card-type-badge.credit { background: rgba(59, 130, 246, 0.12); color: #2563EB; }

.cms-card-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.cms-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cms-meta-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.cms-meta-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.3px;
}

.cms-meta-value.currency {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    color: #059669;
}

.cms-card-actions-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ─── Tabs ─── */
.cms-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    padding: 0 16px;
    gap: 0;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cms-tabs::-webkit-scrollbar { display: none; }

.cms-tab {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.cms-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.cms-tab.active {
    color: var(--zillion-blue);
    border-bottom-color: var(--zillion-blue);
}

/* Tab Panels */
.cms-tab-panel { display: none; padding: 16px 20px; }
.cms-tab-panel.active { display: block; }

/* ─── Section Groups ─── */
.cms-section { margin-bottom: 16px; }

.cms-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cms-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* ─── Data Grid ─── */
.cms-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.cms-data-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.cms-data-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    min-width: 0;
}

.cms-data-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.cms-data-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}
.cms-data-value.mono {
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.3px;
}
.cms-data-value.success { color: #059669; }
.cms-data-value.danger { color: #DC2626; }
.cms-data-value.warning { color: #D97706; }
.cms-data-value.info { color: #2563EB; }

/* ─── Toggle Switches ─── */
.cms-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    margin-bottom: 8px;
    transition: all var(--transition-fast);
    gap: 12px;
}
.cms-toggle-row:hover { border-color: var(--zillion-blue); }

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

.cms-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.cms-toggle-desc {
    font-size: 10px;
    color: var(--text-muted);
}

/* Toggle Switch Control */
.cms-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.cms-switch input { opacity: 0; width: 0; height: 0; }

.cms-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.3s;
}
.cms-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cms-switch input:checked + .cms-switch-slider { background: #059669; }
.cms-switch input:checked + .cms-switch-slider::before { transform: translateX(18px); }

/* ─── Risk Meter ─── */
.cms-risk-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.cms-risk-bar {
    flex: 1;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.cms-risk-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.cms-risk-fill.low { background: #059669; }
.cms-risk-fill.medium { background: #D97706; }
.cms-risk-fill.high { background: #DC2626; }

.cms-risk-label { font-size: 11px; font-weight: 600; min-width: 40px; }
.cms-risk-label.low { color: #059669; }
.cms-risk-label.medium { color: #D97706; }
.cms-risk-label.high { color: #DC2626; }

/* ─── Usage Bars ─── */
.cms-usage-bar { display: flex; flex-direction: column; gap: 4px; }

.cms-usage-track {
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.cms-usage-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--zillion-blue);
    transition: width 0.5s ease;
}
.cms-usage-fill.warning { background: #D97706; }
.cms-usage-fill.danger { background: #DC2626; }

.cms-usage-info {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
}

/* ─── Activity List ─── */
.cms-activity-list { display: flex; flex-direction: column; }

.cms-activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.cms-activity-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.cms-activity-icon.debit { background: rgba(239, 68, 68, 0.1); }
.cms-activity-icon.credit { background: rgba(16, 185, 129, 0.1); }
.cms-activity-icon.info { background: rgba(59, 130, 246, 0.1); }

.cms-activity-info { flex: 1; min-width: 0; }
.cms-activity-desc { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.cms-activity-time { font-size: 10px; color: var(--text-muted); }

.cms-activity-amount {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Consolas', 'Courier New', monospace;
    flex-shrink: 0;
}
.cms-activity-amount.debit { color: #DC2626; }
.cms-activity-amount.credit { color: #059669; }

/* ─── Dark Theme ─── */
[data-theme="dark"] .cms-header { background: var(--bg-primary); }
[data-theme="dark"] .cms-stat-card { background: var(--bg-primary); border-color: var(--border-color); }
[data-theme="dark"] .cms-card-list { background: var(--bg-primary); }
[data-theme="dark"] .cms-detail-panel { background: var(--bg-primary); }
[data-theme="dark"] .cms-data-item { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .cms-toggle-row { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .cms-list-item.selected { background: rgba(37, 99, 235, 0.1); }
[data-theme="dark"] .cms-card-header { background: var(--bg-secondary); }
[data-theme="dark"] .cms-back-btn { background: var(--bg-primary); color: var(--zillion-blue); }