/* styles.css - Kaspa Bank Mobile-First Styles (Updated) */

/* ============ CSS VARIABLES ============ */
:root {
     /* Colors - Boring Edition */
    --primary: #1a365d;
    --primary-dark: #14284a;
    --secondary: #1a365d;
    --success: #276749;
    --danger: #c53030;
    --warning: #b7791f;
    --dark: #1a202c;
    --gray: #4a5568;
    --light-gray: #e2e8f0;
    --white: #ffffff;
    --bg: #f7fafc;
    /* Safe areas for iPhone */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
}

/* ============ RESET ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ============ BASE ============ */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    background: var(--bg);
    color: var(--dark);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    padding-top: var(--safe-top);
    -webkit-font-smoothing: antialiased;
    touch-action: pan-y;
    overscroll-behavior: contain;
}


/* ============ NEW: APP STRUCTURE FOR UNIFIED LAYOUT ============ */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Global header - hidden by default, shown when logged in */
    .global-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100; /* Higher than sidebar */
        height: 66px;
        background: white; /* Ensure background is set */
    }

.app.logged-in .global-header {
    display: block;
}

/* Main content wrapper - ADD PADDING TOP */
.app-content {
    display: flex;
    flex: 1;
    position: relative;
    padding-top: 66px; /* Add space for fixed header */
}

/* Main navigation - hidden by default, shown when logged in */
.main-nav {
    display: none;
}

.app.logged-in .main-nav {
    display: flex;
}

/* Screens container */
.screens-container {
    flex: 1;
    width: 100%;
    position: relative; /* Add this */
}

/* Make sure screens don't have absolute positioning */
.screen {
    display: none;
    width: 100%;
    position: relative; /* Change from absolute if it was */
}

.screen.active {
    display: block;
}

/* Auth screens special handling */
.auth-screen {
    position: relative;
}

.auth-screen.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: white;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Mobile: header is sticky, not fixed */
    .global-header {
        position: sticky;
        top: 0;
        z-index: 100;
        height: auto;
    }
    
    /* No padding needed on mobile since header is sticky */
    .app-content {
        padding-top: 0;
    }
	
	.screen .screen-header {
        padding-top: 8px;
        padding-bottom: 16px;
        background: white;
        position: sticky;
        top: 0; /* Or whatever your mobile header height is */
        z-index: 50;
    }
    
    /* Add padding to main content on mobile */
    .screen .main-content {
        padding-top: 8px;
    }
}

/* ============ TOP BAR ============ */
.top-bar {
    background: var(--white);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.balance-display {
    text-align: center;
    flex: 1;
    cursor: pointer;
}

.balance-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
}

.balance-converted {
    font-size: 12px;
    color: var(--gray);
    margin-top: 2px;
}

/* ============ MAIN CONTENT ============ */
.main-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
}


/* for desktop */
@media (min-width: 769px) {
    .main-content {
        padding-bottom: 40px; /* Less padding on desktop */
    }
}

@media (max-width: 768px) {
    .main-content {
        padding-bottom: 120px; /* More space on mobile for bottom nav */
    }
}

/* ============ QUICK ACTIONS ============ */
.quick-actions {
    padding: 20px 16px;
    display: flex;
    flex-direction: row; /* Explicitly set horizontal */
    gap: 12px;
}

/* Quick actions should stay flex on mobile */
.quick-actions.mobile-only {
    display: flex;
}

.action-btn {
    flex: 1;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px 12px; /* Add horizontal padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Increase gap */
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    min-width: 80px; /* Allow shrinking if needed */
}

.action-btn:hover {
    background: #f7fafc;
}

.action-btn:active {
    background: var(--light-gray);
}

/* Force icon sizing - add !important flags */
.action-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

.action-icon img {
    width: 48px !important;
    height: 48px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 48px !important;
    min-height: 48px !important;
    object-fit: contain !important;
}

.action-btn {
}

/* Fix for icon images */
.action-icon img,
.action-icon .nav-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.action-btn.pay .action-icon {
    background: rgba(26, 54, 93, 0.08);
}

.action-btn.transfer .action-icon {
    background: rgba(26, 54, 93, 0.08);
}

.action-btn.receive .action-icon {
    background: rgba(39, 103, 73, 0.08);
}

.action-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

/* ============ SECTIONS ============ */
.section {
    padding: 0 16px;
    margin-bottom: 24px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.see-all {
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
}

/* ============ TRANSACTIONS ============ */
.transaction-list {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.transaction-item:active {
    background: var(--light-gray);
}

.transaction-item:last-child {
    border-bottom: none;
}

/* Transaction amount colors - Neutral */
.amount-positive {
    color: #276749 !important;  /* Muted green for received */
    font-weight: 600;
}

.amount-negative {
    color: #2d3748 !important;  /* Dark gray for sent - not alarming */
    font-weight: 600;
}

/* Alternative class names your code might use */
.received {
    color: #276749 !important;
}

.sent {
    color: #2d3748 !important;
}

/* Transaction item styles */
.transaction-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s;
    cursor: pointer;
}

.transaction-item:hover {
    background-color: #f7fafc;
}

.transaction-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 20px;
}

.transaction-details {
    flex: 1;
    min-width: 0;
}

.transaction-name {
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.transaction-time {
    font-size: 0.75rem;
    color: #9ca3af;
}

.transaction-wallet {
    font-size: 0.75rem;
    color: #6b7280;
}

.transaction-amount {
    text-align: right;
    margin-left: 12px;
}


.amount-kas {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
}

/* Pending transaction */
.transaction-item.pending {
    opacity: 0.7;
}

.transaction-item.pending::after {
    content: '⏳';
    margin-left: 8px;
}

/* ============ FILTER BAR ============ */
.filter-bar {
    padding: 12px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    gap: 12px;
    position: sticky;
    top: 66px;
    z-index: 40;
}

.filter-bar input[type="text"] {
    flex: 3;
    padding: 10px 14px;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    font-size: 15px;
    background: var(--white);
}

.filter-bar input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-bar input[type="text"]::placeholder {
    color: #a0aec0;
}

.filter-bar select {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    font-size: 15px;
    background: var(--white);
}

.filter-bar select:focus {
    outline: none;
    border-color: var(--primary);
}
/* Add mobile override */
@media (max-width: 768px) {
    .filter-bar {
        top: 100px; /* Header is sticky on mobile, filter stacks below naturally */
    }
}

/* ============ SETTINGS SCREEN ============ */
.settings-section {
    background: var(--white);
    border-radius: 16px;
    margin: 16px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.settings-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--light-gray);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

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

.settings-item:active {
    opacity: 0.7;
}

.settings-item span:first-child {
    font-size: 16px;
    color: var(--dark);
}

.settings-item span:last-child {
    font-size: 14px;
    color: var(--gray);
}

/* ============ MODAL ============ */
/* Modal overlay */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
}


.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--white);
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

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

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dark);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--light-gray);
}

.modal-body {
    padding: 20px;
}

.modal-body .form-group {
    margin-bottom: 20px;
}

.modal-body .form-group:last-child {
    margin-bottom: 0;
}

/* ============ BUTTONS (Additional) ============ */
.btn-secondary {
    width: 100%;
    padding: 14px;
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-danger {
    width: 100%;
    padding: 14px;
    background: var(--danger);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-danger:hover {
    background: #dc2626;
}

/* ============ BOTTOM NAVIGATION ============ */
.main-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	border-top: 1px solid #e5e7eb;
	flex-direction: row; /* Horizontal for mobile */
	justify-content: space-around;
	padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
	z-index: 100;
	height: auto;
	width: 100%;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    color: var(--gray);
}

    .nav-icon-img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        opacity: 0.6;
    }
    
	.nav-item.active .nav-icon-img {
		opacity: 1;
	}
	
    
    /* Hide emoji icons on mobile too */
    .nav-icon {
        display: none;
    }

.nav-label {
    font-size: 11px;
    font-weight: 500;
}

/* ============ SCREEN HEADER ============ */
.screen-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--light-gray);
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 50;
}

.back-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
}

.screen-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-right: 32px;
}

/* ============ SEARCH ============ */

.search-container {
    padding: 16px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.search-input {
    flex: 1;
    padding: 14px 16px;
    border: none;
    font-size: 16px;
    outline: none;
}

.search-button {
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-button:hover {
    background: #f0f0f0;
    color: #333;
}

.search-button:active {
    transform: scale(0.95);
}

.search-input:focus {
    outline: none;
    box-shadow: var(--shadow-md);
}

.search-status {
    margin-top: 8px;
    font-size: 14px;
    padding: 0 12px;
}

.search-status .searching {
    color: #666;
}

.search-status .verified {
    color: #00b386;
    font-weight: 500;
}

.search-status .not-found {
    color: #e74c3c;
}

.search-status .error {
    color: #f39c12;
}

.search-results {
    padding: 12px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid #00b386;
}

.verified-badge {
    display: inline-block;
    background: #00b386;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    margin-left: 4px;
}

.search-message {
    padding: 20px;
    text-align: center;
    color: #666;
}

.search-message .hint {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
}

/* ============ CONTACTS ============ */
.contacts-section {
    padding: 16px;
}

.contacts-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 4px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.contact-item:active {
    background: var(--light-gray);
}

.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 18px;
}

.contact-info {
    flex: 1;
}

.contact-name {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 2px;
}

.contact-detail {
    font-size: 14px;
    color: var(--gray);
}

.add-contact-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border: 2px dashed var(--gray);
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    margin-top: 12px;
    transition: all var(--transition-fast);
}

.add-contact-btn:active {
    background: var(--light-gray);
}

.add-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--gray);
}

/* ============ AMOUNT INPUT SCREEN ============ */
.amount-input-container {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 57px);
}

.recipient-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 24px;
}

.recipient-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 20px;
}

.recipient-info {
    flex: 1;
}

.amount-display {
    text-align: center;
    margin: 32px 0;
}

.currency-symbol {
    font-size: 32px;
    color: var(--gray);
    margin-right: 4px;
}

.amount-input {
    font-size: 48px;
    font-weight: 700;
    border: none;
    background: none;
    text-align: center;
    width: auto;
    max-width: 100%;
    color: var(--dark);
}

.amount-input:focus {
    outline: none;
}

.amount-converted {
    font-size: 16px;
    color: var(--gray);
    margin-top: 8px;
}

.note-input {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    font-size: 16px;
    margin-bottom: 24px;
}

.note-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* ============ NUMPAD ============ */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    flex: 1;
}

.numpad-btn {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    font-size: 24px;
    font-weight: 500;
    padding: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.numpad-btn:active {
    background: var(--light-gray);
}

.send-btn {
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.send-btn:not(:disabled):active {
    background: var(--primary-dark);
}

/* ============ WELCOME SCREEN (Updated) ============ */
.welcome-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 32px 24px;
    text-align: center;
    background: var(--primary);
    color: var(--white);
}

.welcome-logo {
    font-size: 64px;
    margin-bottom: 5px;
}

.welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.welcome-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
    line-height: 1.5;
}

.welcome-benefits {
    background: rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    text-align: left;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-icon {
    font-size: 24px;
}

.benefit-text {
    flex: 1;
    font-size: 16px;
}

/* Updated welcome auth buttons */
.welcome-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
	z-index: 10;
}

.welcome-btn {
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
}

.welcome-btn.primary {
    background: var(--white);
    color: var(--primary);
}

.welcome-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.welcome-btn.secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.welcome-btn.secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* ============ DROPDOWN MENU ============ */
.dropdown-trigger {
    cursor: pointer;
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 200;
    overflow: hidden;
}

.dropdown-header {
    padding: 16px;
    background: var(--light-gray);
}

.dropdown-user-name {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.dropdown-user-email {
    font-size: 12px;
    color: var(--gray);
}

.dropdown-divider {
    height: 1px;
    background: var(--light-gray);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--dark);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--light-gray);
}

.dropdown-item.danger {
    color: var(--danger);
}

.dropdown-icon {
    font-size: 18px;
}

/* ============ WELCOME BANNER ============ */
.welcome-banner {
    background: var(--primary);
    color: var(--white);
    padding: 24px;
    border-radius: 16px;
    margin: 16px;
    text-align: center;
}

.welcome-banner h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.welcome-banner p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.welcome-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-small {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-small.primary {
    background: var(--white);
    color: var(--primary);
}

.btn-small.secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}


/* ============ EMPTY STATES (Improved) ============ */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray);
}

.empty-state.friendly {
    padding: 32px 24px;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.empty-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray);
}

/* ============ INVITE MODAL STYLES ============ */
.invite-message {
    margin-bottom: 20px;
}

.invite-message p {
    font-size: 16px;
    color: var(--dark);
}

.invite-link-container {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.invite-link-container input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    font-size: 14px;
    font-family: monospace;
}

.btn-copy {
    padding: 12px 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.social-share {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-social {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-social.whatsapp {
    background: #25D366;
    color: white;
}

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

.btn-social.sms {
    background: var(--gray);
    color: white;
}

/* ============ AUTH SCREENS ============ */
.auth-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-height: 100%;
    padding-bottom: 40px;
}

/* Add this new section for gradient header */
.auth-header {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 40px 24px 32px;
    position: relative;
}

.auth-back {
    position: absolute;
    top: calc(16px + var(--safe-top));
    left: 16px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.2); /* Subtle white background */
    color: var(--white); /* White arrow */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.auth-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center */
    padding: 0; /* Remove padding, header has its own */
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    margin-bottom: 16px;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--white); /* White text on gradient */
}

.auth-subtitle {
    font-size: 16px;
    color: var(--white); /* White text on gradient */
    opacity: 0.9;
}

.auth-form {
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    margin: -20px 24px 24px; /* Negative top margin creates overlap effect */
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: var(--white);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dark);
    cursor: pointer;
    margin-bottom: 20px;
}

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

.link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.link:hover {
    text-decoration: underline;
}

.btn-primary {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary:active {
    background: var(--primary-dark);
}

.divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
}

.divider span {
    background: var(--white);
    padding: 0 16px;
    position: relative;
    color: var(--gray);
    font-size: 14px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--gray);
}

.auth-footer a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.password-strength {
    height: 4px;
    background: var(--light-gray);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: all var(--transition-normal);
}

.strength-bar.weak {
    width: 33%;
    background: var(--danger);
}

.strength-bar.medium {
    width: 66%;
    background: var(--warning);
}

.strength-bar.strong {
    width: 100%;
    background: var(--success);
}

/* ============ FANCY TOAST SYSTEM ============ */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast-fancy {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 16px;
    animation: fancySlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
    min-width: 300px;
    max-width: 400px;
}

.toast-fancy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1a365d;
    animation: progressBar 2s linear;
}

.toast-fancy .icon-fancy {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    animation: bounce 0.6s ease;
    flex-shrink: 0;
}

.toast-fancy.success .icon-fancy {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.toast-fancy.error .icon-fancy {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.toast-fancy.warning .icon-fancy {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.toast-fancy.info .icon-fancy {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.toast-fancy .toast-content {
    flex: 1;
}

.toast-fancy .toast-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: #1f2937;
}

.toast-fancy .toast-message {
    font-size: 13px;
    color: #6b7280;
}

.toast-fancy .toast-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

@keyframes fancySlideIn {
    0% {
        transform: translateX(100%) rotate(10deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

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

@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}

.toast-fancy.toast-exit {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .toast-container {
        top: 70px;
        right: 16px;
        left: 16px;
    }
    
    .toast-fancy {
        min-width: auto;
        max-width: none;
    }
}

/* ============ TOGGLE SWITCH ============ */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray);
    transition: var(--transition-fast);
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--white);
    transition: var(--transition-fast);
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* ============ UTILITIES ============ */
.hidden {
    display: none !important;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-text {
    font-size: 16px;
    line-height: 1.5;
}

/* ============ TABLET & DESKTOP ============ */
@media (min-width: 768px) {
    .app {
        max-width: 428px;
        margin: 0 auto;
        box-shadow: var(--shadow-lg);
        border-left: 1px solid var(--light-gray);
        border-right: 1px solid var(--light-gray);
    }
    
    .bottom-nav {
        max-width: 428px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .modal-content {
        margin: 20px auto;
    }
}

/* ============ RECIPIENT TYPE SELECTOR ============ */
.recipient-type-selector {
    padding: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    gap: 12px;
}

.recipient-type-selector label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    white-space: nowrap;
}

.recipient-type-select {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 16px;
    background: var(--white);
    color: var(--dark);
    font-weight: 500;
}

.recipient-type-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ============ FROM ACCOUNT SELECTOR ============ */
.from-account-selector {
    padding: 16px;
    background: var(--light-gray);
    border-radius: 12px;
    margin-bottom: 20px;
}

.from-account-selector label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    display: block;
    margin-bottom: 12px;
}

.account-selector-buttons {
    display: flex;
    gap: 12px;
}

.account-select-btn {
    flex: 1;
    padding: 12px;
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-select-btn.active {
    border-color: var(--primary);
    background: rgba(26, 54, 93, 0.05);
}

.account-select-btn:hover {
    border-color: var(--primary);
}

.account-select-balance {
    font-size: 12px;
    color: var(--gray);
}

/* ============ TRANSFER SCREEN ============ */
.transfer-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 16px;
}

.transfer-container .screen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.transfer-container .back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #1a365d;
}

.transfer-container .screen-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.transfer-title {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 24px;
}

.transfer-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.transfer-form-group {
    display: flex;
    flex-direction: column;
}

.transfer-form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.transfer-select {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.transfer-select option {
    padding: 12px;
}

.transfer-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transfer-amount-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    flex: 1;
    overflow: hidden;
}

.transfer-currency-toggle {
    background: #f5f5f5;
    border: none;
    border-right: 1px solid #ddd;
    border-radius: 0;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    color: #1a365d;
    cursor: pointer;
    transition: background 0.2s;
}

.transfer-currency-toggle:hover {
    background: #eee;
}

#transfer-currency-symbol {
    min-width: 28px;
    display: inline-block;
    text-align: center;
}

.transfer-amount-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 12px;
    min-width: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.transfer-amount-input-wrapper .max-btn {
    background: none;
    border: none;
    border-left: 1px solid #ddd;
    color: #1a365d;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 14px;
    transition: background 0.2s;
}

.transfer-amount-input-wrapper .max-btn:hover {
    background: #f5f5f5;
}

.transfer-conversion-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

.transfer-available {
    color: #1a365d;
    font-weight: 500;
}

.transfer-note-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.transfer-note-input:focus {
    outline: none;
    border-color: #1a365d;
}

.transfer-btn {
    margin-top: 12px;
    padding: 14px;
    font-size: 16px;
}

.transfer-amount-input-wrapper input::-webkit-outer-spin-button,
.transfer-amount-input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.transfer-amount-input-wrapper input[type=number] {
    -moz-appearance: textfield;
}

.max-btn-inline {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #1a365d;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 8px;
    margin-left: 8px;
}

.max-btn-inline:hover {
    background: #eee;
}

/* ============ BALANCE DISPLAY UPDATE ============ */
.balance-label {
    font-size: 11px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* ============ QR MODAL ============ */
#qr-modal {
    z-index: 1000;
}

#qr-modal .modal-content {
    max-width: 360px;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
}

#qr-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--light-gray);
}

#qr-modal .modal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

#qr-modal .modal-body {
    text-align: center;
    padding: 32px 24px;
}

#qr-code-display {
    background: white;
    padding: 16px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#qr-code-display img {
    display: block;
}

#qr-modal .modal-body p {
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 20px;
}

#qr-modal .address-display {
    background: var(--light-gray);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    word-break: break-all;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    color: var(--dark);
    text-align: left;
}

#qr-modal #copy-address-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
}

/* Mobile adjustments for QR modal */
@media (max-width: 768px) {
    #qr-modal .modal-content {
        max-width: calc(100% - 32px);
        margin: 16px;
    }
    
    #qr-modal .modal-body {
        padding: 24px 16px;
    }
}

/* Add padding to receive container for mobile navbar */
@media (max-width: 768px) {
    .receive-container {
        padding-bottom: 100px;  /* Space for bottom nav */
    }
}

/* ============ UPDATED ACCOUNTS SECTION ============ */
.accounts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding: 0 16px;
}

.account-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Checking Account - Blue Border */
.account-card#checking-account {
    border: 2px solid #1a365d;
}

/* Savings Account - Green Border */
.account-card#savings-account {
    border: 2px solid #10b981;
}

.account-card:hover {
    background: #f7fafc;
}

.account-card:active {
    background: #f7fafc;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.account-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.account-info {
    flex: 1;
}

.account-name {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.account-type {
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

.account-balance {
    margin-bottom: 12px;
    text-align: right;
}

#from-account-balance {
    text-align: left;
}

#to-account-balance {
    text-align: left;
}

.account-balance-amount {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    line-height: 1;
}

.account-balance-converted {
    font-size: 14px;
    color: #6b7280;
    font-weight: 400;
}

/* Account Number - Like Kaspa */
.account-number {
    font-size: 12px;
    color: #6b7280;
    font-family: 'SF Mono', Monaco, monospace;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 8px;
    word-break: break-all;
    letter-spacing: 0.3px;
    margin-top: 12px;
}



/* ============ PAY SCREEN ACTION BUTTONS ============ */
.pay-screen-actions {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
}

.pay-screen-actions .btn-secondary {
    flex: 1;
    padding: 12px 24px;
    background: var(--white);
    color: var(--gray);
    border: 2px solid var(--light-gray);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pay-screen-actions .btn-secondary:hover {
    background: var(--light-gray);
}

.pay-screen-actions .btn-primary {
    flex: 2;
    padding: 12px 24px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pay-screen-actions .btn-primary:hover {
    background: var(--primary-dark);
}

.pay-screen-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ PAY SCREEN - AVAILABLE BALANCE ============ */
.available-balance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--light-gray);
    border-radius: 8px;
    margin: 12px 16px;
}

.available-label {
    font-size: 13px;
    color: var(--gray);
}

.available-amount {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.max-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.max-btn:hover {
    background: rgba(102, 126, 234, 0.2);
}

.max-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--gray);
    background: rgba(0, 0, 0, 0.05);
}

/* Scan QR Button - mobile only */
.scan-qr-btn {
    display: none;  /* Hidden by default (web) */
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--gray);
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.scan-qr-btn:hover {
    color: var(--primary);
}

@media (max-width: 768px) {
    .scan-qr-btn {
        display: flex;  /* Show on mobile */
    }
}

/* ============ IMPROVED USER AVATAR ============ */


.notification-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 10;
}


.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    transition: background var(--transition-fast);
}

.user-avatar:hover {
    background: var(--primary-dark);
}

.user-avatar:active {
    background: var(--primary-dark);
}

/* Style for avatar with icon instead of text */
.user-avatar.has-icon {
    font-size: 20px;
}

#user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
	overflow: visible !important;
}

#user-avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#avatar-initials {
    color: white;
    font-weight: 600;
    font-size: 14px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============ PROFILE EDIT MODAL ============ */
#profile-edit-modal .modal-content {
    max-width: 500px;
}

#profile-edit-modal .form-group {
    margin-bottom: 20px;
}

#profile-edit-modal .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

#profile-edit-modal .form-group input,
#profile-edit-modal .form-group select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    background: var(--white);
    transition: all var(--transition-fast);
}

#profile-edit-modal .form-group input:focus,
#profile-edit-modal .form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#profile-edit-modal .btn-primary {
    width: 100%;
    margin-top: 12px;
}

/* ============ DROPDOWN IMPROVEMENTS ============ */
.dropdown-menu {
    animation: slideDown 0.2s ease;
}

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

.dropdown-item {
    position: relative;
}

.dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--light-gray);
}

.dropdown-item:last-child::after {
    display: none;
}

/* ============ ELEGANT RECEIVE SCREEN ============ */
.receive-method-card {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.receive-method-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.receive-method-label {
    font-size: 13px;
    color: var(--gray);
    min-width: 60px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.receive-method-value {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--dark);
    padding: 0 12px;
    word-break: break-all;
}

.copy-btn {
    padding: 6px 14px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.copy-btn:hover {
    background: var(--primary-dark);
}

.copy-btn:active {
    transform: scale(0.95);
}

/* Special styling for KNS cards */
.receive-method-card.kns-method-card {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    animation: slideIn 0.3s ease;
}

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

/* Phone card special color */
#phone-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #e6ffed 100%);
}

/* Small status indicator */
.kns-status {
    text-align: center;
    padding: 8px;
    margin-top: 12px;
}

.kns-status .status-text {
    font-size: 12px;
    color: var(--gray);
    font-style: italic;
}

/* Remove the large sync button styles */
#sync-kns-btn {
    display: none !important;
}

/* Smooth transitions for dynamically added elements */
.receive-methods > * {
    transition: all 0.3s ease;
}

/* Make the receive container cleaner */
.receive-container {
    padding: 20px 16px;
}

.receive-methods {
    margin-bottom: 24px;
}

.receive-methods h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Account selector improvements */
.receive-account-selector {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--light-gray);
    border-radius: 12px;
}

.receive-account-selector label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    display: block;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Improve address section */
.receive-address-section {
    padding: 20px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.receive-address-section label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    display: block;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.address-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.address-text {
    flex: 1;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    word-break: break-all;
    color: #374151;
}

.copy-address-btn {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.copy-address-btn:hover {
    background: #f9fafb;
    border-color: #1a365d;
}

.copy-address-btn:active {
    transform: scale(0.95);
}

.copy-address-btn svg {
    color: #6b7280;
}

.copy-address-btn:hover svg {
    color: #1a365d;
}

/* ============ CLEAN TRANSACTION DISPLAY CSS ============ */

/* Transaction List Container */
#recent-transactions,
#transaction-history {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

/* Transaction Item - Clean Banking Layout */
.bank-transaction-item {
    display: flex;
    align-items: center; 
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.bank-transaction-item:hover {
    background-color: #fafafa;
}

.bank-transaction-item:last-child {
    border-bottom: none;
}


/* Date Section - Fixed Width */
.date-section {
    width: 50px;
    flex-shrink: 0;
}

.date-text {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
}

/* Details Section - Takes Available Space */
.details-section {
    flex: 1;
    padding: 0 12px;
}

.description-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.description-text {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.wallet-tag {
    font-size: 11px;
    padding: 2px 6px;
    background: #e8eaf6;
    color: #3949ab;
    border-radius: 4px;
    font-weight: 500;
}

.time-text {
    font-size: 12px;
    color: #666;
}

/* Amount Section - Right Aligned */
.amount-section {
    text-align: right;
    flex-shrink: 0;
    min-width: 100px;
}

.usd-amount {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

/* THE COLORS THAT ACTUALLY WORK */
.amount-in {
    color: #276749 !important;  /* Muted green for received */
}

.amount-out {
    color: #2d3748 !important;  /* Dark gray for sent */
}

.kas-amount {
    font-size: 11px;
    color: #999;
}


/* Empty State */
.empty-state {
    padding: 60px 20px;
    text-align: center;
    width: 100%;
}

.empty-title {
    font-size: 16px;
    color: #999;
}

.amount-sent {
    color: #dc2626;
}


/* Empty State */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.empty-state .empty-text {
    font-size: 14px;
    color: #666;
}

/* Internal Transfer Styling */
.bank-transaction-item.internal-transfer {
    background: #fafafa;
}


#payment-success-modal {
    display: none;
    /* other modal styles */
}

#payment-success-modal.active {
    display: flex;
}

/* If you have a pending transaction state */
.bank-transaction-item.pending {
    opacity: 0.7;
}

/* If you want the "friendly" empty state variant */
.empty-state.friendly {
    padding: 80px 20px;
}

/* Load More button if you have pagination */
#load-more-transactions {
    display: block;
    width: calc(100% - 32px);
    margin: 16px;
    padding: 12px 24px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1a365d;
    cursor: pointer;
    transition: all 0.2s;
}

#load-more-transactions:hover {
    background: #1a365d;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* Section headers if you use them */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.see-all {
    font-size: 14px;
    color: #1a365d;
    text-decoration: none;
    font-weight: 600;
}

.see-all:hover {
    color: #5a67d8;
}

/* Activity screen specific styling */
#activity-screen .main-content {
    padding-top: 0;
}

#activity-screen #transaction-history {
    margin-top: 0; /* Remove top margin to prevent overlap */
    padding-top: 0; /* Remove top padding */
    background: transparent; /* No background since individual cards have their own */
    border-radius: 0;
    box-shadow: none;
}

/* Transaction list general class if needed */
.transaction-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}


/* Transaction Container */
#recent-transactions,
#transaction-history {
    background: white;
    width: 100%;
}

/* Transaction Row - FULL WIDTH */
.transaction-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    background: white;
}

.transaction-row:hover {
    background-color: #fafafa;
}

/* Date Section - Fixed Width */
.date-section {
    width: 50px;
    flex-shrink: 0;
}

.date-text {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
}

/* Details Section - Takes Available Space */
.details-section {
    flex: 1;
    padding: 0 12px;
}

.description-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.description-text {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.wallet-tag {
    font-size: 11px;
    padding: 2px 6px;
    background: #e8eaf6;
    color: #3949ab;
    border-radius: 4px;
    font-weight: 500;
}

.time-text {
    font-size: 12px;
    color: #666;
}

/* Amount Section - Right Aligned */
.amount-section {
    text-align: right;
    flex-shrink: 0;
    min-width: 100px;
}

.usd-amount {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

/* THE COLORS THAT ACTUALLY WORK */
.amount-in {
    color: #276749 !important;  /* Muted green for received */
}

.amount-out {
    color: #2d3748 !important;  /* Dark gray for sent */
}

.kas-amount {
    font-size: 11px;
    color: #999;
}

/* Empty State */
.empty-state {
    padding: 60px 20px;
    text-align: center;
    width: 100%;
}

.empty-title {
    font-size: 16px;
    color: #999;
}


/* ============ TRANSACTION PROGRESS MODAL ============ */
#transaction-overlay {
    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: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#transaction-overlay.active {
    opacity: 1;
    visibility: visible;
}

.txprogress-modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

.txprogress-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a365d;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

.txprogress-modal.success .tx-spinner {
    width: 80px;  /* Increased from 60px */
    height: 80px; /* Increased from 60px */
    border: 5px solid #10b981; /* Thicker border */
    animation: none;
    position: relative;
}

.txprogress-modal.success .tx-spinner:after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px; /* Increased from 32px */
    color: #10b981;
    font-weight: bold;
    animation: checkPop 0.5s ease-out;
}

@keyframes checkPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.txprogress-modal.error .tx-spinner {
    border: 4px solid #ef4444;
    border-top: 4px solid #ef4444;
    animation: none;
    position: relative;
}

.txprogress-modal.error .tx-spinner:after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #ef4444;
}

.txprogress-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1f2937;
}

.txprogress-status {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

txprogress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

txprogress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    opacity: 0.4;
    transition: opacity 0.3s;
}

txprogress-step.active,
txprogress-step.completed {
    opacity: 1;
}

txprogress-step .step-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6b7280;
    transition: all 0.3s;
}

txprogress-step.active .step-icon {
    background: #1a365d;
    color: white;
}

txprogress-step.completed .step-icon {
    background: #10b981;
    color: white;
}

txprogress-step span:last-child {
    font-size: 12px;
    color: #6b7280;
}

.txprogress-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.txprogress-hash {
    font-size: 12px;
    color: #6b7280;
    font-family: monospace;
    word-break: break-all;
}

/* ============ TRANSACTION PROGRESS MODAL (RENAMED) ============ */
.txprogress-modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

.txprogress-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a365d;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

.txprogress-modal.success .txprogress-spinner {
    width: 80px;
    height: 80px;
    border: 5px solid #10b981;
    animation: none;
    position: relative;
}

.txprogress-modal.success .txprogress-spinner:after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #10b981;
    font-weight: bold;
    animation: checkPop 0.5s ease-out;
}

.txprogress-modal.error .txprogress-spinner {
    border: 4px solid #ef4444;
    border-top: 4px solid #ef4444;
    animation: none;
    position: relative;
}

.txprogress-modal.error .txprogress-spinner:after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #ef4444;
}

.txprogress-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1f2937;
}

.txprogress-status {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* THESE ARE THE IMPORTANT STEP STYLES YOU'RE MISSING */
.txprogress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.txprogress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.txprogress-step.active,
.txprogress-step.completed {
    opacity: 1;
}

.txprogress-step .step-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6b7280;
    transition: all 0.3s;
}

.txprogress-step.active .step-icon {
    background: #1a365d;
    color: white;
}

.txprogress-step.completed .step-icon {
    background: #10b981;
    color: white;
}

.txprogress-step span:last-child {
    font-size: 12px;
    color: #6b7280;
}

.txprogress-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.txprogress-hash {
    font-size: 12px;
    color: #6b7280;
    font-family: monospace;
    word-break: break-all;
}

/* ============================================
   ANIMATIONS
============================================ */

@keyframes stroke {
    to {
        stroke-dashoffset: 0;
    }
}

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

.modal-overlay.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

/* ============================================
   LOADING STATE
============================================ */

.transaction-item.pending::after {
    content: 'Processing';
    font-size: 11px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

/* ============================================
   RESPONSIVE
============================================ */

.contact-card.external {
    border-color: #95a5a6;
    background: #f8f9fa;
}

.contact-card.external .contact-avatar {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}

.kns-address {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    font-family: monospace;
}

.contact-card.self {
    border-color: #f39c12;
    background: #fef5e7;
}

.self-badge {
    display: inline-block;
    background: #f39c12;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 4px;
}

.self-send-message {
    margin-top: 12px;
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #856404;
    font-size: 14px;
}

.self-send-message p {
    margin: 0 0 4px 0;
}

.self-send-message .hint {
    font-size: 13px;
    opacity: 0.9;
}

/* ============= PAY SECTION ============= */
.recipient-found {
    padding: 0 16px;
    margin-bottom: 20px;
}

.recipient-dropdown {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #00b386;
    border-radius: 12px;
    padding: 12px;
    gap: 12px;
}

.recipient-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.recipient-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.recipient-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.recipient-details {
    flex: 1;
}

.recipient-name {
    font-weight: 600;
    color: #333;
}

.recipient-address {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.add-quick-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.add-quick-send:hover {
    background: #e0e0e0;
}

.amount-section {
    padding: 0 16px;
    margin-bottom: 24px;
}

.amount-input-wrapper {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.amount-input-wrapper label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.amount-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
}

.currency-symbol {
    color: #666;
}

.amount-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 24px;
    font-weight: 600;
}

.currency-label {
    color: #666;
    font-size: 16px;
}

.amount-conversion {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}

.send-button {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
}

.quick-send-section {
    padding: 16px;
}

.section-label {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.quick-send-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 4px;
}

.quick-send-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e0e0e0;
}

.quick-send-card:hover {
    border-color: #00b386;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}

.quick-send-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 20px;
    color: white;
    overflow: hidden;
}

.quick-send-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-send-avatar span {
    font-size: 20px;
}

.quick-avatar {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.quick-name {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.no-quick-sends {
    grid-column: 1 / -1;
    text-align: center;
    color: #999;
    padding: 24px;
}

/* Confirmation Modal */
.confirmation-modal {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.modal-body {
    padding: 20px;
}

.confirm-recipient,
.confirm-amount,
.confirm-fee,
.confirm-total {
    margin-bottom: 20px;
}

.modal-body .label {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.modal-body .value {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.modal-body .sub-value {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.amount-kas {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.amount-usd {
    font-size: 14px;
    color: #666;
}

.confirm-total {
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.confirm-total .value {
    font-size: 20px;
    color: #00b386;
}

.modal-actions {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
}

.modal-actions button {
    flex: 1;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
}

.btn-loading {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.send-search-container {
    padding: 16px;
    background: #f8f9fa;
}


.search-status-line {
    margin-top: 8px;
    font-size: 14px;
    padding: 0 4px;
    min-height: 20px;
}

.search-status-line .verified {
    color: #00b386;
}

.search-status-line .not-found {
    color: #e74c3c;
}

/* Quick Send Cards */
.quick-send-container {
    padding: 0 16px 16px;
    background: #f8f9fa;
}

.quick-send-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.quick-send-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
}

.quick-send-scroll::-webkit-scrollbar {
    display: none;
}

.quick-send-row {
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
}

.quick-send-card {
    flex: 0 0 auto;
    width: 80px;
    background: white;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.quick-send-card:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.quick-send-avatar {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.quick-send-name {
    font-size: 11px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.show-all-link {
    display: block;
    text-align: center;
    color: #007aff;
    font-size: 14px;
    margin-top: 8px;
    text-decoration: none;
}

/* Send Form Section */
.send-form-section {
    padding: 20px 16px;
}

.send-to-section {
    margin-bottom: 24px;
}

.send-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    display: block;
}

.recipient-card {
    background: white;
    border: 2px solid #007aff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.recipient-card-icon {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.recipient-card-info {
    flex: 1;
}

.recipient-card-name {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.recipient-card-detail {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

/* Amount Display */
.amount-display-section {
    text-align: center;
    margin-bottom: 24px;
}

.amount-display {
    font-size: 48px;
    font-weight: 300;
    color: #333;
    margin-bottom: 4px;
}

.currency-symbol {
    color: #999;
    font-size: 36px;
}

.amount-value {
    color: #333;
}

.kas-conversion {
    font-size: 14px;
    color: #666;
}

/* Numpad Grid */
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.numpad-btn.send-numpad {
    padding: 20px;
    font-size: 24px;
    background: #f8f9fa;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 400;
}

.numpad-btn.send-numpad:active {
    background: #e9ecef;
    transform: scale(0.95);
}

/* Send Button */
.send-money-btn {
    width: 100%;
    padding: 18px;
    background: #1a365d;
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

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

.send-money-btn:not(:disabled):active {
    transform: scale(0.98);
}

/* Empty State */
.send-empty-state {
    padding: 60px 20px;
    text-align: center;
}

.send-empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.send-empty-state .empty-text {
color: #999;
font-size: 16px;
}

.password-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.password-modal {
    background: white;
    padding: 24px;
    border-radius: 16px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.password-modal h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.password-modal p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #666;
    word-break: break-word;
}

.password-modal input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 16px;
}

.modal-buttons {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.modal-buttons button {
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
}
#confirm-password {
	background: #4CAF50;
	color: white;
}
#cancel-password {
	background: #f0f0f0;
}

/* ============================================
   MODAL SYSTEM - SHARED STYLES
============================================ */

/* Base Modal Overlay - Used by ALL modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

#profile-edit-modal.hidden {
    display: none !important;
}


.modal-overlay.active,
.modal-overlay:not(.hidden) {
    display: flex !important;
}

.modal-overlay.hidden {
    display: none !important;
}

/* ============================================
   TRANSFER SUCCESS MODAL
============================================ */
/* Payment Success Modal Styles */
.transfer-success-modal {
    background: white;
    border-radius: 16px;
    max-width: 420px;
    width: 90%;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease-out;
}

.transfer-success-modal .modal-header {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.transfer-success-modal h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.transfer-success-modal h3 {
    margin: 0 0 24px 0;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

.success-animation {
    width: 60px;
    height: 60px;
    margin: 24px auto;
}

.success-animation .checkmark {
    width: 60px;
    height: 60px;
    stroke-width: 3;
    stroke: #10b981;
    stroke-miterlimit: 10;
}

.checkmark {
    width: 60px;
    height: 60px;
    stroke-width: 3;
    stroke: #10b981;
    stroke-miterlimit: 10;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

.transfer-confirmation-details {
    padding: 0 20px 20px;
}

.account-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
}

.section-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.account-info {
    font-size: 15px;
}

.account-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.account-balance {
    font-size: 13px;
    color: #666;
}

.detail-line {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.detail-line .label {
    font-size: 14px;
    color: #666;
}

.detail-line .value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: right;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
}

.btn-done {
    width: 100%;
    padding: 14px;
    background: #1a365d;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.btn-done:active {
    transform: scale(0.98);
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   PROFILE EDIT MODAL
============================================ */

/* Profile Edit Modal - Styling Fixes */
.profile-modal-header {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
}

.profile-modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* Fix button layout - same row, smaller */
.profile-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.profile-modal-actions button {
    flex: 1;
    padding: 12px 24px;  /* Reduced from 14px 24px */
    border-radius: 8px;   /* Smaller radius */
    font-size: 15px;      /* Slightly smaller */
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-modal-actions .btn-secondary {
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.profile-modal-actions .btn-secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.profile-modal-actions .btn-primary {
    background: linear-gradient(135deg, #1a365d 0%, #1a365d 100%);
    color: white;
}

.profile-modal-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#profile-edit-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: 10000;
}

#profile-edit-modal.hidden {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.profile-modal-container {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
    z-index: 10001; /* Above overlay */
    position: relative; /* Ensure it's positioned */	
}

.profile-modal-container .modal-header {
    padding: 24px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

.profile-modal-container .modal-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.profile-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.profile-modal-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.profile-modal-body {
    padding: 24px;
}

/* Profile Avatar Section */
.profile-avatar-section {
    text-align: center;
    margin-bottom: 30px;
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a365d 0%, #1a365d 100%);
    position: relative;
    overflow: hidden;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    background: white;
    transition: all 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #1a365d;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control:disabled {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.form-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

/* Select Dropdown */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.modal-actions button {
    flex: 1;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-actions .btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.modal-actions .btn-secondary:hover {
    background: #e5e7eb;
}

.modal-actions .btn-primary {
    background: linear-gradient(135deg, #1a365d 0%, #1a365d 100%);
    color: white;
}

.modal-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ============================================
   ANIMATIONS
============================================ */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   MOBILE RESPONSIVENESS FOR MODALS
============================================ */
@media (max-width: 640px) {
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .modal-container {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
    }
    
    .transfer-success-modal {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }
    
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}


.logo-small {
    width: 40px;
    height: 40px;
}

.logo-large {
    width: 120px;
    height: 120px;
}

.connected-app-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.app-header {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.app-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.app-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.app-info {
    flex: 1;
}

.app-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.app-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 4px;
}

.app-connected-date {
    color: #999;
    font-size: 12px;
}

.app-permissions {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.app-permissions h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.permission-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.permission-list li {
    color: #666;
    font-size: 13px;
    padding: 4px 0;
}

.app-actions {
    display: flex;
    justify-content: flex-end;
}

.revoke-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
}

.info-banner {
    background: #e8f4fd;
    border-left: 4px solid #2196f3;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.info-banner p {
    color: #1976d2;
    font-size: 14px;
    margin: 0;
}

/************** Show transactions modal ***************/

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.txprogress-modal-content {
    background: #ffffff;
    border-radius: 16px;
    color: #1a1a2e;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

@media (max-width: 480px) {
    .txprogress-modal-content {
        width: calc(100% - 30px);
        max-width: none;
    }
}

.modal-body {
    padding: 0;
    width: 100%;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    flex-grow: 1;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.tx-method {
    text-align: center;
    padding: 16px 20px;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tx-flow-container {
    background: #f8f9fa;
    padding: 16px 20px;
}

.tx-flow-section {
    margin-bottom: 12px;
}

.tx-flow-section:last-child {
    margin-bottom: 0;
}

.tx-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    display: block;
}

.tx-value {
    font-size: 15px;
    color: #333;
    word-break: break-word;
    line-height: 1.4;
    font-weight: 500;
    display: block;
}

.tx-amount-section {
    text-align: center;
    padding: 24px 20px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.tx-amount-primary {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1px;
}

.tx-amount-secondary {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

/* FIX: Reset all divs inside details section */
.tx-details-section {
    width: 100%;
    padding: 0;
    margin: 0;
}

.tx-details-section > div {
    width: 100% !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

.tx-details-section > div:last-child {
    border-bottom: none;
}

/* FIX: Force label and value to use full container width */
.tx-details-section .tx-label {
    width: 100% !important;
    display: block !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.tx-details-section .tx-value {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Special styling for memo */
#txMemo {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tx-status {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

/* FIX: Explorer link visibility and styling */
.tx-explorer-link {
    padding: 16px 20px !important;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    background: #f8f9fa;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important; /* Force display */
}

.tx-explorer-link a {
    color: #1a365d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

.tx-explorer-link a:hover {
    text-decoration: underline;
}

/* Kaspa address styling */
.tx-value.kaspa-address {
    font-family: monospace;
    font-size: 11px;
    background: #f5f5f5;
    padding: 8px;
    border-radius: 6px;
    margin-top: 4px;
    word-break: break-all;
}

/* ============================================
   SEND SCREEN STYLES
   ============================================ */

/* Base mobile-first styles */
.mobile-only {
    display: block;
}

/* Override for quick-actions to maintain flex layout */
.quick-actions.mobile-only {
    display: flex;
    flex-direction: row;
}

.desktop-only {
    display: none;
}

/* Desktop Header */
.desktop-header {
    padding: 24px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.desktop-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: inline-block;
}

.desktop-back {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    display: block;
    transition: color 0.2s;
}

.desktop-back:hover {
    color: #111827;
}

/* Search Container */
.send-search-container {
    padding: 16px;
    background: white;
    border-bottom: 1px solid #f3f4f6;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.send-search-input {
    flex: 1;
    padding: 12px 48px 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

.send-search-input:focus {
    border-color: #1a365d;
}

.search-icon-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.2s;
}

.search-icon-btn:hover {
    color: #111827;
}

.search-status-line {
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
    min-height: 20px;
}

.search-status-line.error {
    color: #ef4444;
}

.search-status-line.success {
    color: #10b981;
}

.search-status-line.searching {
    color: #1a365d;
}

/* Quick Send Section */
.quick-send-container {
    padding: 16px;
    background: white;
    border-bottom: 1px solid #f3f4f6;
}

.quick-send-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-send-scroll {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
    scrollbar-width: none;
}

.quick-send-scroll::-webkit-scrollbar {
    display: none;
}

.quick-send-row {
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
}

.quick-send-card {
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.2s;
}

.quick-send-card:hover {
    background: #f9fafb;
}

.quick-send-avatar {
    width: 56px;
    height: 56px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
}

.quick-send-name {
    font-size: 12px;
    color: #374151;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.show-all-link {
    display: inline-block;
    margin-top: 12px;
    color: #1a365d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* Send Form Section */
.send-form-section {
    padding: 16px;
    background: white;
}

.send-to-section {
    margin-bottom: 24px;
}

.send-label {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 12px;
    display: block;
}

.recipient-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    position: relative;
}

/* Add to Quick Send Button */
.add-quick-send-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a365d;
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-quick-send-btn:hover {
    background: #5a67d8;
    transform: translateY(-50%) scale(1.1);
}

.add-quick-send-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.recipient-card-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 16px;
}

.recipient-card-info {
    flex: 1;
}

.recipient-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.recipient-card-detail {
    font-size: 14px;
    color: #6b7280;
}

/* Mobile Amount Section */
.mobile-amount-section {
    margin-bottom: 24px;
}

.amount-display-section {
    text-align: center;
    margin-bottom: 24px;
}

.amount-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 8px;
}

.currency-symbol {
    font-size: 24px;
    color: #6b7280;
    margin-right: 4px;
}

.amount-value {
    font-size: 48px;
    font-weight: 600;
    color: #111827;
}

.kas-conversion {
    font-size: 14px;
    color: #6b7280;
}

/* Mobile Numpad */
.numpad-container {
    margin-bottom: 24px;
}

.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.numpad-btn {
    padding: 20px;
    font-size: 24px;
    background: #f8f9fa;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 400;
}

.numpad-btn:not(:disabled):active {
    background: #e9ecef;
    transform: scale(0.95);
}

.numpad-btn:disabled {
    background: #f3f4f6;
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Desktop Amount Section - FIXED */
.desktop-amount-section {
    margin-bottom: 32px;
    width: 100%;
}

.amount-input-wrapper {
    background: white;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    width: 100%;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.desktop-amount-input {
    display: flex;
    align-items: center;
    margin: 16px 0;
    width: 100%;
    box-sizing: border-box;
}

.desktop-amount-input .currency-symbol {
    font-size: 32px;
    color: #6b7280;
    margin-right: 8px;
    flex-shrink: 0; /* Prevent symbol from shrinking */
}

.amount-input-field {
    flex: 1;
    font-size: 48px;
    font-weight: 600;
    border: none;
    outline: none;
    color: #111827;
    padding: 0;
    background: transparent;
    width: 100%;
    min-width: 0; /* Allow field to shrink */
    max-width: 100%; /* Prevent overflow */
}

.amount-input-field::placeholder {
    color: #d1d5db;
}

.amount-input-field:disabled {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Remove spinner arrows from number input */
.amount-input-field::-webkit-inner-spin-button,
.amount-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amount-input-field[type=number] {
    -moz-appearance: textfield;
}

#desktop-kas-conversion {
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

/* ============ SEND ACTION BUTTONS - FIXED ============ */
.send-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
	margin-bottom: 80px;
    align-items: stretch;
}

#send-cancel-btn,
#send-money-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px; /* FIXED height, not min-height */
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
    border-radius: 12px;
    border: none; /* Reset border first */
}

#send-cancel-btn {
    flex: 1;
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

#send-money-btn {
    flex: 2;
    background: #1a365d;
    color: white;
}

#send-cancel-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

#send-money-btn:not(:disabled):hover {
    background: #5a67d8;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#send-money-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Cancel Button */
.cancel-btn {
    flex: 1;
    padding: 16px;
    background: white;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
	min-height: 56px;
}

.cancel-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Send Button */
.send-money-btn {
    flex: 2;
    padding: 16px;
    background: #1a365d;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
	min-height: 56px;
}

.send-money-btn:not(:disabled):hover {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.send-money-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Empty State - REMOVED */
.send-empty-state {
    display: none !important;
}

/* ============================================
   DESKTOP STYLES (768px and up)
   ============================================ */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only {
        display: block !important;
    }
    
    #pay-screen {
        max-width: 600px;
        margin: 0 auto;
        padding: 32px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .send-search-container {
        padding: 0;
        margin-bottom: 24px;
        background: transparent;
        border: none;
    }
    
    .quick-send-container {
        padding: 24px 0;
        background: transparent;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .send-form-section {
        padding: 24px 0;
        background: transparent;
    }
    
    .desktop-amount-section {
        display: block !important;
    }
    
    .mobile-amount-section {
        display: none !important;
    }
    
    .numpad-container {
        display: none !important;
    }
    
    /* Better hover states on desktop */
    .quick-send-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .send-money-btn {
        margin-top: 24px;
    }
}

/* ============================================
   LARGE DESKTOP (1024px and up)
   ============================================ */
@media (min-width: 1024px) {
    #pay-screen {
        max-width: 700px;
    }
}

/* ============ SCREENS WITH HEADER ============ */
.screen.with-header {
    padding-top: 0; /* Remove default padding */
}

.screen .top-bar + .main-content,
.screen .top-bar + .screen-header + .main-content,
.screen .top-bar + div:not(.screen-header) {
    /* Ensure content below header has proper spacing */
    margin-top: 0;
}

.status-badge.status-accepted::before,
.status-badge.status-confirmed::before {
    content: '●';
    color: #00C851;
    margin-right: 5px;
}

/* ============================================
   IMPROVED TRANSACTION CARDS
============================================ */

.transaction-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.transaction-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* Transaction card left border indicators */
.transaction-card.sent,
.transaction-card[data-type="send"] {
    border-left: 4px solid #e53e3e;
}

.transaction-card.received,
.transaction-card[data-type="receive"] {
    border-left: 4px solid #38a169;
}

.transaction-card.transfer,
.transaction-card[data-type="transfer"] {
    border-left: 4px solid #3182ce;
}

.transaction-card[data-type="transfer"],
.transaction-card[data-type="transfer_in"],
.transaction-card[data-type="transfer_out"] {
    border-left: 4px solid #3182ce;
}

/* Date Column */
.tx-date-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 8px;
    min-width: 48px;
}

.tx-month {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tx-day {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-top: 2px;
}

.tx-time {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

/* Main Content */
.tx-main-content {
    flex: 1;
    min-width: 0; /* Allow flex shrinking on mobile */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Transaction Type Badge */
.tx-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tx-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tx-type-badge.sent {
    background: #e2e8f0;
    color: #4a5568;
}

.tx-type-badge.received {
    background: #c6f6d5;
    color: #276749;
}

.tx-type-badge.transfer {
    background: #e2e8f0;
    color: #4a5568;
}

/* Party Info */
.tx-party-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.tx-party-label {
    font-size: 12px;
    color: #666;
    min-width: 32px;
}

.tx-party-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 6px;
}

.party-icon {
    font-size: 14px;
}

/* External Address */
.external-address {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    color: #999;
    background: #f9f9f9;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

/* Amount Section */
.tx-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 120px;
}

.tx-amount {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.amount-primary {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

/* Amount Colors - Neutral outgoing, muted green incoming */
.tx-amount.debit .amount-primary {
    color: #2d3748;
}

.tx-amount.credit .amount-primary {
    color: #276749;
}

.amount-secondary {
    font-size: 12px;
    color: #718096;
    font-weight: 400;
}

/* Badge in amount column */
.tx-amount .tx-type-badge {
    font-size: 10px;
    padding: 2px 6px;
    margin-top: 2px;
}

/* Balance After */
.tx-balance-after {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 11px;
    color: #999;
    text-align: right;
}

.tx-balance-after strong {
    color: #666;
    font-weight: 600;
}

/* Memo/Note */
.tx-memo {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
    padding: 6px 10px;
    background: #f9f9f9;
    border-radius: 6px;
    border-left: 3px solid #ddd;
}

/* Kaspa address in memo - single line with truncation */
.tx-memo.tx-address-memo {
    font-family: 'SF Mono', Monaco, monospace;
    font-style: normal;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pending State */
.transaction-card.pending {
    opacity: 0.8;
}

.pending-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff9800;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Remove old bank-transaction-item styles */
#recent-transactions .bank-transaction-item,
#transaction-history .bank-transaction-item {
    display: none;
}

/* Container updates */
#recent-transactions,
#transaction-history {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .transaction-card {
        padding: 14px;
    }
    
    .tx-date-column {
        min-width: 44px;
        padding: 6px;
    }
    
    .tx-day {
        font-size: 16px;
    }
    
    .amount-primary {
        font-size: 14px;
    }
    
    .amount-secondary {
        font-size: 12px;
    }
    
    
    /* Single line kaspa address with clean truncation */
    .tx-memo.tx-address-memo {
        font-family: 'SF Mono', Monaco, monospace;
        font-style: normal;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 4px 8px;
    }
    
    /* Give address more room by reducing amounts column */
    .tx-amounts {
        min-width: 90px;
    }
}

.modal-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.modal-account-badge.checking {
    background: linear-gradient(135deg, #1a365d 0%, #1a365d 100%);
    color: white;
}

.modal-account-badge.savings {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

/* Status badges in modal */
.status-pending {
    color: #ff9800;
    font-weight: 600;
}

.status-complete {
    color: #00c851;
    font-weight: 600;
}

/* External address in modal */
#txDetailsModal .external-address {
    display: block;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    color: #999;
    background: #f9f9f9;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
    word-break: break-all;
}

.tx-address-subtext {
    font-size: 11px;
    color: #999;
    font-family: 'SF Mono', Monaco, monospace;
    margin-top: 2px;
}

/* Enhanced Transaction Details Modal */
#txDetailsModal .modal-content {
    max-width: 500px;
    padding: 0;
}

#txDetailsModal .modal-header {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Make modal taller to avoid scrollbar */
#txDetailsModal .tx-modal-content {
    max-height: 90vh;  /* Increase from default */
    min-height: 600px;  /* Ensure minimum height */
}

#txDetailsModal .modal-body {
    padding: 0;
	max-height: 90vh;  /* Account for header/footer */
    overflow-y: auto;  /* Only scroll if absolutely needed */
}

/* If you want to remove scroll completely */
#txDetailsModal .tx-hash-value code {
    max-width: none;  /* Remove width restriction */
    overflow-x: visible;  /* No horizontal scroll */
    font-size: 10px;  /* Slightly smaller to fit */
}

/* Detail Sections */
.detail-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-section.highlight {
    background: #f9f9f9;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

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

.detail-row .label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-row .value {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 600;
    text-align: right;
}

/* Transaction type badge in modal */
.value.tx-type-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
}

.value.tx-type-badge.send,
.value.tx-type-badge.sent {
    background: #ffe5e5;
    color: #d32f2f;
}

.value.tx-type-badge.receive,
.value.tx-type-badge.received {
    background: #e5f5e5;
    color: #388e3c;
}

.value.tx-type-badge.transfer {
    background: #e3f2fd;
    color: #1976d2;
}

/* Amount display in modal */
.amount-display {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.amount-display.credit {
    color: #00c851;
}

.amount-display.debit {
    color: #ff4444;
}

.amount-local {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    margin-top: 4px;
}

/* Status indicators */
.status-confirmed {
    color: #00c851;
}

.status-confirming {
    color: #ff9800;
}

.status-accepted {
    color: #2196f3;
}

.status-pending {
    color: #ff9800;
}

/* Transaction hash */
.tx-hash {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tx-hash code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 4px;
    color: #666;
}

.tx-hash button {
    padding: 4px 8px;
    background: #1a365d;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.tx-hash button:hover {
    background: #5a67d8;
}

/* Modal footer */
#txDetailsModal .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

.btn-explorer {
    display: inline-block;
    padding: 10px 20px;
    background: #1a365d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.btn-explorer:hover {
    opacity: 0.9;
}

/* Type and Method Section */
.tx-type-method-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.tx-type-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tx-type-badge.send,
.tx-type-badge.sent {
    background: #ffe5e5;
    color: #d32f2f;
}

.tx-type-badge.receive,
.tx-type-badge.received {
    background: #e5f5e5;
    color: #388e3c;
}

.tx-type-badge.transfer {
    background: #e3f2fd;
    color: #1976d2;
}

.tx-method {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Fee styling */
.tx-fee {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

/* Transaction Hash Section */
.tx-hash-section {
    padding: 16px;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
}

.tx-hash-section .tx-label {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tx-hash-value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tx-hash-value code {
    flex: 1;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px; 
    background: white;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    color: #333;
    word-break: break-all;
    max-width: 400px; 
    overflow-x: auto; 
}

/* Copy Button */
#txCopyBtn {
    padding: 6px 16px;
    background: #1a365d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#txCopyBtn:hover {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#txCopyBtn:active {
    transform: translateY(0);
}

/* Explorer Link */
.tx-explorer-link {
    padding: 16px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}

.tx-explorer-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1a365d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.tx-explorer-link a:hover {
    text-decoration: underline;
}

/* Identifier Row */
#txIdentifierRow .tx-value {
    font-family: monospace;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

/* ============================================
   KASPA TRANSFER MODAL STYLES
============================================ */

.modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.modal-close-btn:hover {
    color: #1a1a1a;
}

/* Transfer modal should have lower z-index than password modal */
#transfer-modal {
    z-index: 1000;
}

/* Mobile adjustments for transfer modal */
@media (max-width: 768px) {
    #transfer-modal {
        align-items: flex-start;
        padding: 20px 16px;
    }
    
    #transfer-modal .transfer-success-modal {
        margin-top: 20px;
        width: 100%;
        max-width: none;
    }
}

.modal-body-transfer {
    padding: 24px;
}

.transfer-direction {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: #f3f4f6;
    border-radius: 12px;
}

.transfer-account-select {
    flex: 1;
    text-align: center;
}

.transfer-select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    background: white;
    cursor: pointer;
    margin-bottom: 8px;
}

.transfer-select:focus {
    outline: none;
    border-color: #1a365d;
}

.transfer-balance-display {
    font-size: 12px;
    color: #6b7280;
}

.transfer-arrow {
    font-size: 24px;
    color: #1a365d;
}

.transfer-form-group {
    margin-bottom: 20px;
}

.transfer-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.transfer-form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
}

.transfer-form-group input:focus {
    outline: none;
    border-color: #1a365d;
}

.transfer-tip {
    font-size: 14px;
    color: #6b7280;
    margin-top: 16px;
    text-align: center;
    line-height: 1.5;
}

.kas-conversion {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
}

/* ============ ROBUST PASSWORD MODAL ============ */
.password-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
}

.password-modal-overlay.hidden {
    display: none;
}

.password-modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.password-modal-header {
    padding: 32px 24px 24px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.password-modal-logo {
    margin-bottom: 16px;
}

.password-modal-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.password-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.password-modal-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.password-modal-body {
    padding: 24px;
}

.transaction-summary {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

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

.summary-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.summary-value {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.recipient-address {
    margin-top: 12px;
    padding: 12px;
    background: #e5e7eb;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

.recipient-address code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 11px;
    color: #374151;
    word-break: break-all;
    line-height: 1.6;
    display: block;
}

.transaction-message {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    margin: 0;
}

.password-modal-body .form-group {
    margin-bottom: 24px;
}

.password-modal-body .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.password-modal-body input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.password-modal-body input[type="password"]:focus {
    outline: none;
    border-color: #1a365d;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-modal-actions {
    display: flex;
    gap: 12px;
}

.password-modal-actions .btn-secondary,
.password-modal-actions .btn-primary {
    flex: 1;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.password-modal-actions .btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.password-modal-actions .btn-secondary:hover {
    background: #e5e7eb;
}

.password-modal-actions .btn-primary {
    background: #1a365d;
    color: white;
}

.password-modal-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.password-modal-actions .btn-primary:active,
.password-modal-actions .btn-secondary:active {
    transform: translateY(0);
}

.summary-value-secondary {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.recipient-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}


/* ============ RECIPIENT PROFILE MODAL ============ */
#recipientProfileModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#recipientProfileModal .recipient-profile-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#recipientProfileModal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#recipientProfileModal .modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
}

#recipientProfileModal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

#recipientProfileModal .modal-body {
    padding: 0;
    max-height: calc(85vh - 60px);
    overflow-y: auto;
}

/* Profile Header */
.recipient-profile-header {
    padding: 24px 20px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-bottom: 1px solid #e5e5e5;
}

.recipient-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f0f0f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    overflow: hidden;
}

.recipient-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipient-profile-avatar .avatar-emoji {
    font-size: 42px;
    line-height: 1;
}

.recipient-profile-avatar.avatar-icon {
    background: #f0f0f5;
}

.recipient-profile-avatar.avatar-icon img {
    object-fit: contain;
}

.recipient-profile-avatar.avatar-icon .avatar-emoji {
    filter: none;
}

.recipient-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.recipient-profile-type {
    font-size: 13px;
    color: #1a365d;
    font-weight: 500;
    text-transform: capitalize;
}

.recipient-profile-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.profile-action-btn {
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    min-width: 120px;
    text-align: center;
}

.profile-action-btn.send-btn {
    background: #1a365d;
    color: white;
}

.profile-action-btn.send-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.profile-action-btn.cancel-btn {
    background: #e8e8e8;
    color: #333;
}

.profile-action-btn.cancel-btn:hover {
    background: #e5e5e5;
}

/* Remove section at bottom */
.profile-remove-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    text-align: center;
}

.profile-remove-section.hidden {
    display: none;
}

.profile-remove-btn {
    background: #ff4444;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.profile-remove-btn:hover {
    background: #cc0000;
}

/* Profile Sections */
.profile-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-section:last-child {
    border-bottom: none;
}

.profile-section-title {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* Identifiers */
.profile-identifiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-identifier-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f9f9f9;
    border-radius: 8px;
}

.profile-identifier-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.profile-identifier-value {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 500;
}

/* Address Display */
.profile-address {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f5f5;
    padding: 10px 12px;
    border-radius: 8px;
}

.profile-address code {
    flex: 1;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    color: #666;
    word-break: break-all;
    line-height: 1.4;
}

.profile-address .copy-btn {
    padding: 6px 12px;
    background: #1a365d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-address .copy-btn:hover {
    background: #5a67d8;
}

/* Transaction List */
.profile-transactions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-loading {
    text-align: center;
    color: #999;
    padding: 20px;
    font-size: 14px;
}

.profile-no-transactions {
    text-align: center;
    color: #999;
    padding: 20px;
    font-size: 14px;
}

.profile-tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.profile-tx-item:hover {
    background: #f0f0f0;
}

.profile-tx-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.profile-tx-icon.send {
    background: #ffe5e5;
}

.profile-tx-icon.receive {
    background: #e5f5e5;
}

.profile-tx-details {
    flex: 1;
    min-width: 0;
}

.profile-tx-type {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 2px;
}

.profile-tx-date {
    font-size: 12px;
    color: #999;
}

.profile-tx-amount {
    text-align: right;
}

.profile-tx-kas {
    font-size: 14px;
    font-weight: 600;
}

.profile-tx-kas.send {
    color: #d32f2f;
}

.profile-tx-kas.receive {
    color: #388e3c;
}

.profile-tx-local {
    font-size: 11px;
    color: #999;
}

/* ============ RECIPIENT PROFILE MODAL ============ */
.recipient-profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.recipient-profile-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.recipient-profile-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recipient-profile-modal .modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.recipient-profile-modal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.recipient-profile-modal .modal-body {
    padding: 0;
    max-height: calc(85vh - 60px);
    overflow-y: auto;
}

/****  User @handle input ****/

.input-with-prefix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-prefix .input-prefix {
    color: #666;
    font-size: 16px;
    font-weight: 500;
}

.input-with-prefix input {
    flex: 1;
}

.input-with-prefix.handle-taken input {
    border-color: #e74c3c;
}

.input-with-prefix.handle-available input {
    border-color: #27ae60;
}
.handle-status {
    font-size: 12px;
    margin-top: 4px;
}

.handle-status.taken {
    color: #e74c3c;
}

.handle-status.available {
    color: #27ae60;
}

/* Seed Phrase Modal Fixes */
#seed-phrase-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: 10000;
}

#seed-phrase-modal .modal-content {
    background: white;
    border-radius: 12px;
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

#seed-phrase-modal .modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#seed-phrase-modal .modal-header h2 {
    margin: 0;
    font-size: 18px;
}

#seed-phrase-modal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

#seed-phrase-modal .modal-body {
    padding: 24px;
}

#seed-phrase-modal .form-group {
    margin-top: 20px;
}

#seed-phrase-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

#seed-phrase-modal .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

#seed-phrase-modal .btn-primary {
    width: 100%;
    margin-top: 20px;
}

#seed-phrase-modal.hidden {
    display: none !important;
}

/* Seed Phrase Display */
.seed-phrase-box {
    background: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 24px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 2;
    word-spacing: 12px;
    text-align: center;
    margin: 20px 0;
    user-select: all;
    color: #333;
}

.seed-display {
    text-align: center;
    padding: 10px;
}

.seed-display .btn-secondary {
    margin-top: 16px;
}

/* Currency Modal */
#currency-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: 10000;
}

#currency-modal .modal-content {
    background: white;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

#currency-modal .modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#currency-modal .modal-header h2 {
    margin: 0;
    font-size: 18px;
}

#currency-modal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

#currency-modal .modal-body {
    padding: 0;
}

#currency-modal .currency-list {
    max-height: 400px;
    overflow-y: auto;
}

#currency-modal .currency-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    gap: 12px;
    transition: background 0.15s;
}

#currency-modal .currency-item:hover {
    background: #f9f9f9;
}

#currency-modal .currency-item.selected {
    background: #e8f5e9;
}

#currency-modal .currency-symbol {
    font-size: 18px;
    font-weight: 600;
    width: 36px;
    color: #333;
}

#currency-modal .currency-name {
    flex: 1;
    color: #333;
}

#currency-modal .currency-code {
    color: #888;
    font-size: 14px;
}

#currency-modal .checkmark {
    color: #27ae60;
    font-weight: bold;
}

#currency-modal.hidden {
    display: none !important;
}

/* Search related stuff */

.search-status-line.prompt {
    background: #f0f4ff;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 8px;
}

.quick-send-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #555;
}

.prompt-btn {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.prompt-btn.yes {
    background: #1a365d;
    color: white;
}

.prompt-btn.yes:hover {
    background: #5a6fd6;
}

.prompt-btn.no {
    background: #e5e5e5;
    color: #666;
}

.prompt-btn.no:hover {
    background: #d5d5d5;
}

.recipient-card {
    position: relative;
}

.recipient-card-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e5e5;
    color: #666;
    border: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.recipient-card-clear:hover {
    background: #ff4444;
    color: white;
}

.recipient-card-clear.hidden {
    display: none;
}

/* ============ SUPPORT SCREEN ============ */
#support-screen .main-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
    padding: 0;
}

.support-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.support-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-secondary, #f8f9fa);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-secondary, #718096);
}

.support-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.support-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin-bottom: 8px;
}

.support-empty-text {
    font-size: 14px;
    max-width: 260px;
}

/* Message Bubbles */
.support-message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    position: relative;
}

.support-message.user {
    align-self: flex-end;
    background: var(--accent-gradient, linear-gradient(135deg, #1a365d 0%, #1a365d 100%));
    color: white;
    border-bottom-right-radius: 4px;
}

.support-message.admin {
    align-self: flex-start;
    background: white;
    color: var(--text-primary, #1a1a2e);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.support-message-content {
    margin-bottom: 4px;
    line-height: 1.4;
}

.support-message-time {
    font-size: 11px;
    opacity: 0.7;
}

.support-message.user .support-message-time {
    text-align: right;
}

/* Input Area */
.support-input-area {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-top: 1px solid var(--border-color, #e2e8f0);
    align-items: flex-end;
}

#support-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 24px;
    font-size: 15px;
    resize: none;
    max-height: 120px;
    line-height: 1.4;
    font-family: inherit;
}

#support-input:focus {
    outline: none;
    border-color: var(--accent-color, #1a365d);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.support-send-btn {
    padding: 12px 24px;
    background: var(--accent-gradient, linear-gradient(135deg, #1a365d 0%, #1a365d 100%));
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.support-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.support-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.support-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary, #718096);
}

/* System Messages */
.support-system-message {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #718096);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    align-self: center;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    #support-screen .main-content {
        height: calc(100vh - 140px);
    }
    
    .support-messages {
        padding: 16px;
    }
    
    .support-message {
        max-width: 85%;
    }
    
    .support-input-area {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    }
    
    .support-send-btn {
        padding: 12px 18px;
    }
}

/* Support Badge in Dropdown */
#dropdown-support {
    position: relative;
}

.support-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #ef4444;
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 0 5px;
}

/* Mobile fixes for Support Screen */
@media (max-width: 768px) {
    #support-screen .main-content {
        height: calc(100vh - 200px); /* Account for header + bottom nav */
        padding-bottom: 80px; /* Extra space for bottom nav */
    }
    
    #support-screen .support-content {
        height: 100%;
    }
    
    .support-messages {
        padding: 12px;
        padding-bottom: 100px; /* Ensure last messages aren't hidden */
    }
    
    .support-message {
        max-width: 75%;
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .support-message-time {
        font-size: 10px;
    }
    
    .support-input-area {
        position: fixed;
        bottom: 70px; /* Above the bottom nav */
        left: 0;
        right: 0;
        padding: 10px 12px;
        background: white;
        border-top: 1px solid var(--border-color, #e2e8f0);
        z-index: 100;
    }
    
    #support-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 10px 14px;
    }
    
    .support-send-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* Chat message links */
.support-message a,
.message a {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
}

.support-message.user a {
    color: #e0e7ff;
}

.support-message.admin a,
.message.user a {
    color: #4f46e5;
}

/* ============================================
   PAY SCREEN - TWO STEP FLOW
   ============================================ */

/* Pay Step Container */
.pay-step {
    display: none;
}

.pay-step.active {
    display: block;
}

/* Pay Step Header */
.pay-step-header {
    padding: 20px 16px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.pay-step-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* Pay Sections */
.pay-section {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.pay-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pay-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.pay-section-header .pay-section-label {
    margin-bottom: 0;
}

.add-recipient-btn {
    background: none;
    border: none;
    color: #1a365d;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
}

.add-recipient-btn:hover {
    text-decoration: underline;
}

/* Recipients List */
.recipients-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recipient-list-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.recipient-list-item:hover {
    background: #f5f5f5;
}

.recipient-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.recipient-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipient-list-info {
    flex: 1;
    min-width: 0;
}

.recipient-list-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.recipient-list-detail {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-list-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.recipient-action-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.recipient-action-btn.edit {
    background: white;
    border: 1px solid #ddd;
    color: #333;
}

.recipient-action-btn.edit:hover {
    border-color: #bbb;
}

.recipient-action-btn.delete {
    background: white;
    border: 1px solid #ddd;
    color: #333;
}

.recipient-action-btn.delete:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.recipient-action-btn.pay {
    background: #1a365d;
    border: none;
    color: white;
}

.recipient-action-btn.pay:hover {
    background: #5a67d8;
}

/* ========== STEP 2 STYLES ========== */

/* Recipient Summary */
.pay-recipient-summary {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
}
.recipient-summary-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 20px;
    margin-right: 16px;
    flex-shrink: 0;
    overflow: hidden;
}
.recipient-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recipient-summary-avatar span {
    width: 100%;
    height: 100%;
}
.recipient-summary-info {
    flex: 1;
}

.recipient-summary-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.recipient-summary-detail {
    font-size: 14px;
    color: #666;
}

/* Available Balance Display */
.pay-balance-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.pay-balance-label {
    color: #666;
}

.pay-balance-amount {
    font-weight: 600;
    color: #1a1a1a;
}

/* Pay Form Groups */
.pay-form-group {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.pay-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

/* Amount Input with Currency Toggle */
.pay-amount-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    overflow: hidden;
}

.pay-currency-toggle {
    background: #f5f5f5;
    border: none;
    border-right: 1px solid #ddd;
    border-radius: 0;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    color: #1a365d;
    cursor: pointer;
    transition: background 0.2s;
}

.pay-currency-toggle:hover {
    background: #eee;
}

.pay-amount-input {
    flex: 1;
    border: none;
    font-size: 24px;
    font-weight: 500;
    padding: 10px 8px;
    outline: none;
    min-width: 0;
}

.pay-amount-input::placeholder {
    color: #ccc;
}

.pay-currency-toggle svg {
    opacity: 0.6;
}

.pay-amount-conversion {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}

/* Note Input */
.pay-note-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.pay-note-input:focus {
    border-color: #1a365d;
}

/* Pay Numpad (Mobile) */
.pay-numpad {
    padding: 16px;
    background: #f9fafb;
}

.pay-numpad .numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

.pay-numpad .numpad-btn {
    height: 56px;
    border: none;
    background: white;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pay-numpad .numpad-btn:hover {
    background: #f5f5f5;
}

.pay-numpad .numpad-btn:active {
    transform: scale(0.95);
    background: #eee;
}

/* Save to Quick Send Toggle */
.pay-save-toggle {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.save-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.toggle-text {
    user-select: none;
}

.quick-send-switch {
    position: relative;
    width: 48px;
    height: 24px;
    flex-shrink: 0;
}

.quick-send-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.quick-send-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.2s;
    border-radius: 24px;
}

.quick-send-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
}

.quick-send-switch input:checked + .quick-send-slider {
    background-color: #1a365d;
}

.quick-send-switch input:checked + .quick-send-slider:before {
    transform: translateX(24px);
}

/* Pay Step Actions */
.pay-step-actions {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: white;
    border-top: 1px solid #f0f0f0;
}

.pay-step-actions .btn-secondary,
.pay-step-actions .btn-outline {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pay-step-actions .btn-secondary {
    background: white;
    border: 1px solid #ddd;
    color: #666;
}

.pay-step-actions .btn-secondary:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.pay-step-actions .btn-outline {
    background: white;
    border: 1px solid #1a365d;
    color: #1a365d;
}

.pay-step-actions .btn-outline:hover {
    background: #f0f3ff;
}

.pay-step-actions .btn-primary {
    flex: 1;
    padding: 14px 20px;
    background: #1a365d;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.pay-step-actions .btn-primary:hover:not(:disabled) {
    background: #5a67d8;
}

.pay-step-actions .btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Empty state for recipients */
.recipients-empty {
    text-align: center;
    padding: 32px 16px;
    color: #888;
}

.recipients-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.recipients-empty-text {
    font-size: 14px;
}

/* Desktop adjustments */
@media (min-width: 768px) {
    .pay-step-header {
        padding: 24px 24px 20px;
    }
    
    .pay-section {
        padding: 20px 24px;
    }
    
    .pay-form-group {
        padding: 20px 24px;
    }
    
    .pay-recipient-summary {
        padding: 24px;
    }
    
    .pay-balance-display {
        padding: 12px 24px;
    }
    
    .pay-step-actions {
        padding: 20px 24px;
    }
    
    .pay-save-toggle {
        padding: 12px 24px;
    }
    
    .recipient-list-item {
        padding: 14px 16px;
    }
}

@media (max-width: 767px) {
    .pay-step-content {
        padding-bottom: 120px !important;
    }
}

/* Disclaimer - centered at bottom */
.welcome-disclaimer {
    margin-top: auto;
    padding-top: 2rem;
    padding-bottom: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.6;
}

/* ============ Backup Modal Styles ============ */

/* Intro text */
.backup-intro {
    background: rgba(255, 193, 7, 0.15);
    border-radius: 8px;
    padding: 14px 16px;
    color: #ffc107 !important;
    font-size: 0.9rem;
    margin: 0;
}

/* Backup Sections */
.backup-section {
    background: rgba(102, 126, 234, 0.08);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.backup-section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.backup-section-icon {
    font-size: 1.5rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.backup-section-header > div {
    flex: 1;
}

.backup-section-header h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333 !important;
}

.backup-section-header p {
    margin: 0;
    font-size: 0.85rem;
    color: #666 !important;
}

/* Dark mode overrides */
.dark-mode .backup-section-header h3,
body.dark .backup-section-header h3 {
    color: #fff !important;
}

.dark-mode .backup-section-header p,
body.dark .backup-section-header p {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Form Elements */
.backup-section .form-group label {
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 6px;
    display: block;
}

.dark-mode .backup-section .form-group label,
body.dark .backup-section .form-group label {
    color: rgba(255, 255, 255, 0.8);
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #888 !important;
}

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
}

.dark-mode .checkbox-label,
body.dark .checkbox-label {
    color: rgba(255, 255, 255, 0.9);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1a365d;
    flex-shrink: 0;
}

/* Seed Phrase Box */
.seed-phrase-box {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 16px;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    word-spacing: 4px;
    color: #333;
}

.dark-mode .seed-phrase-box,
body.dark .seed-phrase-box {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Button Loading State */
#export-btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#export-btn-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-top-color: #1a365d;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Buttons in backup sections */
.backup-section .btn-secondary {
    background: #fff;
    border: 1px solid #ddd;
    color: #1a365d;
    font-weight: 500;
}

.backup-section .btn-secondary:hover {
    background: #f5f5f5;
    border-color: #1a365d;
}

.dark-mode .backup-section .btn-secondary,
body.dark .backup-section .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.dark-mode .backup-section .btn-secondary:hover,
body.dark .backup-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Legal modal content styling */
#legal-modal .modal-body {
    padding: 24px;
}

#legal-modal-body h3 {
    margin: 0 0 8px 0;
    color: var(--primary);
    font-size: 18px;
}

#legal-modal-body h4 {
    margin: 24px 0 8px 0;
    font-size: 15px;
    color: var(--primary);
}

#legal-modal-body p {
    margin: 0 0 12px 0;
    color: #444;
}

#legal-modal-body ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

#legal-modal-body li {
    margin-bottom: 2px;
    padding: 0;
    color: #444;
    line-height: 1.5;
}

#legal-modal-body strong {
    color: #333;
}

#legal-modal-body hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 24px 0;
}

#txNote {
    background: #f0f4ff;
    border-left: 3px solid #1a365d;
    padding: 10px;
    border-radius: 6px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kas-balance-note {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

.syncing {
    display: inline-block;
    animation: spin 1s ease-in-out infinite;
}

/* ============ CONFIRMATION MODAL ============ */

/* Content container - narrower than standard modals */
.confirm-modal-content {
    background: var(--white);
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: confirmModalIn 0.2s ease-out;
}

@keyframes confirmModalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.confirm-modal-style {
    display: block;
}

/* Body - shared between styles */
.confirm-modal-body {
    padding: 24px 24px 20px;
    text-align: center;
}

.confirm-modal-body h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.confirm-modal-body p {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--gray);
    line-height: 1.5;
}

/* Style 1: Split button actions (iOS-style) */
.confirm-modal-actions-split {
    display: flex;
    border-top: 1px solid #e5e7eb;
}

.confirm-modal-actions-split button {
    flex: 1;
    padding: 16px;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.confirm-modal-actions-split button:active {
    background: var(--light-gray);
}

.confirm-modal-actions-split .confirm-btn-cancel {
    color: var(--gray);
    font-weight: 500;
    border-right: 1px solid #e5e7eb;
}

.confirm-modal-actions-split .confirm-btn-confirm {
    color: var(--primary);
    font-weight: 600;
}

.confirm-modal-actions-split .confirm-btn-confirm.danger {
    color: var(--danger);
}

/* Style 2: Unlink modal icon */
.confirm-modal-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: 3px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    position: relative;
}

.confirm-modal-icon-wrap span {
    font-size: 32px;
}

.confirm-modal-icon-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: var(--danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    color: white;
    font-size: 12px;
    font-weight: 700;
}

/* Style 2: Side-by-side button actions */
.confirm-modal-actions {
    display: flex;
    gap: 12px;
    padding: 0 24px 24px;
}

.confirm-modal-actions button {
    flex: 1;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.confirm-modal-actions .btn-secondary {
    background: white;
    border: 1px solid #e5e7eb;
    color: var(--gray);
    border-radius: 12px;
}

.confirm-modal-actions .btn-secondary:hover {
    background: var(--light-gray);
    color: var(--gray);
}

.confirm-modal-actions .btn-danger {
    border-radius: 12px;
}

@media (max-width: 768px) {
    .transfer-container {
        padding-bottom: 120px;
    }
}

/* Transaction Security Cards */
.modal-body {
    box-sizing: border-box;
}

.security-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.security-card {
    padding: 14px;
    padding-right: 70px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-sizing: border-box;
    width: 95%;
}

.security-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.security-card span {
    font-size: 13px;
    color: #666;
}

.security-card.security-high {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid rgba(34, 197, 94, 0.2);
}

.security-card.security-high.selected {
    border-color: rgba(34, 197, 94, 0.8);
}

.security-card.security-medium {
    background: rgba(245, 158, 15, 0.1);
    border: 2px solid rgba(245, 158, 15, 0.2);
}

.security-card.security-medium.selected {
    border-color: rgba(245, 158, 15, 0.8);
}

.security-card.security-low {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.2);
}

.security-card.security-low.selected {
    border-color: rgba(239, 68, 68, 0.8);
}

/* Security intro note */
.security-intro {
    background: #f5f5f5;
    color: #666;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Selected badge */
.security-card::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
}

.security-card.selected::after {
    content: '✓ Selected';
    font-size: 11px;
    font-weight: 600;
    opacity: 1;
    color: #666;
}

.tx-info-note {
    background: #f0f4f8;
    color: #666;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============ LOADING SCREEN ============ */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a365d 0%, #1a365d 100%);
    display: none;  /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#loading-screen.active {
    display: flex;  /* Only show when active */
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.loading-logo {
    width: 120px;
    height: auto;
    animation: logoPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.2));
}

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

.loading-spinner {
    width: 48px;
    height: 48px;
}

.spinner-ring {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinnerRotate 1s linear infinite;
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

/* Scrollable recipients list */
.recipients-list {
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.recipients-list::-webkit-scrollbar {
    width: 6px;
}

.recipients-list::-webkit-scrollbar-track {
    background: transparent;
}

.recipients-list::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/** Currency Select search bar **/
.currency-search-container {
    padding: 12px;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 1;
}

.currency-search-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.currency-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

#currency-items {
    overflow-y: auto;
    max-height: 350px;
}

.currency-no-results {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
}

.currency-flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
}

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

.currency-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.checkmark, .checkmark-placeholder {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark {
    color: #00c851;
    font-weight: 600;
}

.tx-arrow {
    font-size: 1.1em;
    margin-left: 4px;
}

.tx-arrow.received {
    color: #00c851;
}

.tx-arrow.sent {
    color: #ff4444;
}

.tx-arrow.transfer {
    color: #1a365d;
}

/* ============================================
   ONBOARDING STYLES
   ============================================ */

.onboarding-container {
    width: 100%;
    max-width: 400px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin: 0 auto;
    position: relative;
}

.onboarding-header {
    text-align: center;
    margin-bottom: 30px;
}

.onboarding-header .logo-large {
    width: 60px;
    height: 60px;
}

/* Progress dots */
.progress-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.progress-dot.active {
    background: #1a365d;
    width: 24px;
    border-radius: 4px;
}

.progress-dot.completed {
    background: #00c851;
}

/* Step container */
.onboarding-step {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    animation: onboardingFadeIn 0.4s ease;
}

.onboarding-step.active {
    display: flex;
}

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

/* Step content */
.step-question {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #fff;
}

.step-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 36px;
    max-width: 300px;
}

/* Minimal input styling */
.input-container {
    width: 100%;
    max-width: 300px;
    position: relative;
    margin-bottom: 28px;
}

.input-minimal {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding: 12px 0;
    font-size: 18px;
    font-family: inherit;
    color: #fff;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease;
}

.input-minimal::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.input-minimal:focus {
    border-color: #1a365d;
}

/* Glow effect on focus */
.input-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #1a365d, #1a365d);
    transition: width 0.3s ease;
    box-shadow: 0 0 20px #1a365d;
}

.input-minimal.input-invalid + .input-glow {
    width: 0 !important;
    opacity: 0;
}

/* Handle prefix */
.handle-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.handle-prefix {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 2px;
}

.handle-input {
    text-align: left;
    padding-left: 0;
}

/* Validation states */
.input-valid {
    border-color: #00c851 !important;
}

.input-invalid {
    border-color: #ff4444 !important;
}

.validation-message {
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.validation-message.error {
    color: #ff4444;
}

.validation-message.success {
    color: #00c851;
}

/* Verification code inputs */
.verification-code {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}

.code-input {
    width: 46px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 22px;
    font-family: inherit;
    color: #fff;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.code-input:focus {
    border-color: #1a365d;
    background: rgba(102, 126, 234, 0.1);
}

.resend-link {
    color: #1a365d;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 20px;
}

.resend-link:hover {
    text-decoration: underline;
}

/* Verification code error shake */
.verification-code.shake {
    animation: shake 0.5s ease;
}

.verification-code.shake .code-input {
    border-color: #ff4444;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* Password requirements */
.password-requirements {
    text-align: left;
    max-width: 280px;
    margin-bottom: 18px;
    width: 100%;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 0;
}

.requirement.met {
    color: #00c851;
}

.requirement-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.requirement.met .requirement-icon {
    background: #00c851;
    border-color: #00c851;
    color: #fff;
}

/* Avatar upload */
.avatar-upload {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    overflow: hidden;
}

.avatar-upload:hover {
    border-color: #1a365d;
    background: rgba(102, 126, 234, 0.1);
}

.avatar-upload.has-image {
    border-style: solid;
    border-color: #00c851;
}

.avatar-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.avatar-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Country/Currency selectors */
.dual-select {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 28px;
}

.select-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.select-box:hover {
    border-color: #1a365d;
    background: rgba(102, 126, 234, 0.1);
}

.select-box.selected {
    border-color: #1a365d;
    background: rgba(102, 126, 234, 0.15);
}

.select-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.select-flag {
    margin-bottom: 6px;
}

.select-flag img {
    width: 36px;
    height: 27px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.select-value {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* Buttons */
.onboarding-btn-container {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.onboarding-btn-container .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}

.onboarding-btn-container .btn-skip,
.btn-skip {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
}

.btn-skip:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

.onboarding-btn-container .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}

.onboarding-btn-container .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.onboarding-step .btn-primary {
    background: white;
    color: var(--primary);
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}

.onboarding-step .btn-primary:hover {
    background: #f0f0f0;
}

.onboarding-step .btn-primary:disabled {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* Help button */
.help-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Help modal */
.help-modal-content {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 28px;
    max-width: 340px;
    width: 100%;
    position: relative;
}

.help-modal-content .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.help-modal-content .modal-close:hover {
    color: #fff;
}

.help-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.help-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.help-example {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.help-example-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* Welcome complete screen */
.welcome-complete {
    text-align: center;
    width: 100%;
}

.welcome-checkmark {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #00c851 0%, #22C55E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 36px;
    color: #fff;
    animation: checkmarkScale 0.5s ease;
    box-shadow: 0 4px 14px rgba(0, 200, 81, 0.4);
}

@keyframes checkmarkScale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.welcome-complete .welcome-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #fff;
}

.welcome-complete .welcome-message {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 32px;
}

.welcome-summary {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 28px;
    text-align: left;
}

.welcome-summary .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.welcome-summary .summary-row:last-child {
    border-bottom: none;
}
.welcome-summary .summary-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.welcome-summary .summary-value {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.welcome-summary .summary-value img {
    width: 20px;
    height: 15px;
    border-radius: 2px;
}
#register-screen.auth-screen {
    background: linear-gradient(135deg, #1a365d 0%, #1a365d 100%);
}

#country-modal {
    z-index: 9999;
}

#country-modal .modal-content {
    z-index: 10000;
}

#country-modal .currency-item {
    cursor: pointer;
    pointer-events: auto;
}

#country-modal .modal-close {
    cursor: pointer;
    pointer-events: auto;
}

/* ============================================
   CUSTOM SELECT DROPDOWN (Transfer Screen)
============================================ */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-select-trigger:hover {
    border-color: #bbb;
}

.custom-select-trigger:focus,
.custom-select-wrapper.open .custom-select-trigger {
    border-color: #1a365d;
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

.trigger-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trigger-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.trigger-account-name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 15px;
}

.trigger-arrow {
    color: #666;
    transition: transform 0.2s;
}

.custom-select-wrapper.open .trigger-arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.custom-select-option {
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.custom-select-option:last-child {
    border-bottom: none;
}

.custom-select-option:hover {
    background: #f5f8ff;
}

.custom-select-option.selected {
    background: #eef2ff;
}

.option-name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 15px;
    margin-bottom: 3px;
}

.option-balance {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

.custom-select-option.disabled {
    opacity: 0.5;
    pointer-events: none;
    background: #f9f9f9;
}

.trigger-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trigger-account-name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 15px;
}

.trigger-account-balance {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

.trigger-account-kas {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

/* Transaction Note Edit */
.edit-note-btn {
    cursor: pointer;
    opacity: 0.6;
    font-size: 14px;
    margin-left: 8px;
}

.edit-note-btn:hover {
    opacity: 1;
}

#txNoteEdit {
    margin-top: 8px;
}

#txNoteInput {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

#txNoteInput:focus {
    outline: none;
    border-color: #1a365d;
}

.note-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-save-note, .btn-cancel-note {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.btn-save-note {
    background: #1a365d;
    color: white;
}

.btn-cancel-note {
    background: #e5e7eb;
    color: #374151;
}

.btn-save-note:hover {
    background: #2d4a7c;
}

.btn-cancel-note:hover {
    background: #d1d5db;
}

/* Suspended/Banned Modals */
.modal-suspended,
.modal-banned {
    text-align: center;
    padding: 40px;
    max-width: 450px;
    background: white;
    border-radius: 12px;
    margin: 20px;
}

.suspended-icon,
.banned-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.modal-suspended h2 {
    color: #f59e0b;
    margin-bottom: 16px;
}

.modal-banned h2 {
    color: #dc2626;
    margin-bottom: 16px;
}

.suspended-message,
.banned-message {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.suspended-reason,
.banned-reason {
    font-size: 14px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-style: italic;
}

.suspended-reason:empty,
.banned-reason:empty {
    display: none;
}

.suspended-info,
.banned-info {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Suspended modal - force visible */
#suspended-modal.visible {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Suspended state - grey out app content */
body.suspended .app-content {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(50%);
}

body.suspended .global-header {
    pointer-events: none;
    opacity: 0.5;
}

/* Block scroll when modal open */
body.modal-open {
    overflow: hidden;
}

/* Keep support accessible */
body.suspended #support-fab,
body.suspended .support-btn {
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
}

#suspended-modal,
#banned-modal {
    display: none;
}

#suspended-modal.visible {
    display: flex !important;
    /* ... rest of your visible styles */
}

#banned-modal.visible {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}