/* * 💎 CASHFORGE MASTER STYLESHEET
 * =================================
 * Theme: Future Fintech (Cyan/White/Glass)
 * Architecture: Mobile-First, SPA-Ready, Physics-Based Animations
 */

/* --- 1. CORE IMPORTS & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Color Palette */
    --primary: #00FFFF;
    --primary-dim: #00e6e6;
    --primary-dark: #008b8b;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;

    /* Glass Effects (The "Ultra-Glass" Recipe) */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --glass-input: rgba(255, 255, 255, 0.5);

    /* Gradients */
    --bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #dcfcfc 40%, #00FFFF 50%, #dcfcfc 60%, #FFFFFF 100%);
    --header-gradient: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(200,255,255,0.95) 50%, rgba(255,255,255,0.95) 100%);
    
    /* Animation Physics */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
    --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);       /* iOS Slide */
    --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);        /* Quick Snap */
}

/* --- 2. GLOBAL RESET & LAYOUT --- */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Removes blue tap box on mobile */
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-gradient);
    background-attachment: fixed; /* Keeps background static while scrolling */
    overflow-x: hidden;
    /* Default spacing for fixed bars */
    padding-top: 80px; 
    padding-bottom: 110px;
    overscroll-behavior-y: none; /* Prevents pull-to-refresh on mobile web apps */
}

/* Utility Classes for Typography */
.font-heading { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Custom Scrollbar (Hidden for cleaner UI) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- 3. BACKGROUND FX SYSTEM --- */
.bg-dots {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Subtle dot grid pattern */
    background-image: radial-gradient(var(--primary-dark) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.12;
    z-index: -2;
    pointer-events: none;
}

.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.5;
    animation: float 10s infinite ease-in-out;
    pointer-events: none;
}
/* Blob Positions */
.blob-1 { top: 10%; left: -10%; width: 250px; height: 250px; background: var(--primary); }
.blob-2 { bottom: 20%; right: -10%; width: 300px; height: 300px; background: var(--primary); animation-delay: 2s; }

/* --- 4. COMPONENT CLASSES --- */

/* Glass Panel (Cards, Modals) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: transform 0.2s var(--ease-smooth);
}
.glass-panel:active { transform: scale(0.99); }

/* The Header/Nav Bar Gradient */
.gradient-bar {
    background: var(--header-gradient);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.8);
}

/* Inputs (Ultra-Glass Style) */
.input-group { position: relative; margin-bottom: 16px; transition: all 0.2s; }
.input-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 20px; transition: color 0.2s;
}

.input-glass {
    background: var(--glass-input);
    border: 1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    outline: none;
    transition: all 0.2s ease;
}
/* Adjust padding if icon exists */
.input-glass:not(:placeholder-shown) { background: #ffffff; }
.input-group .input-glass { padding-left: 48px; }

.input-glass:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.15);
}
.input-glass:focus + .input-icon { color: var(--primary-dark); }
.input-glass::placeholder { color: #94a3b8; font-weight: 400; }

.toggle-password {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; cursor: pointer; padding: 4px;
}

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    background: #1e293b;
    color: white;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 10px 20px -5px rgba(30, 41, 59, 0.3);
    transition: all 0.2s var(--ease-smooth);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: relative; overflow: hidden;
}
.btn-primary:active { transform: scale(0.96); }
.btn-loading { pointer-events: none; opacity: 0.8; }

/* Tabs (History/Support) */
.tab-btn { transition: all 0.3s ease; border-bottom: 2px solid transparent; opacity: 0.6; }
.tab-btn.active { border-color: var(--primary); opacity: 1; color: var(--primary-dark); font-weight: 700; }

/* --- 5. ANIMATIONS (Keyframes) --- */

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

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

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

/* Helpers */
.animate-shake { animation: shake 0.5s var(--ease-spring) both; }
.animate-fade-up { animation: slideUp 0.8s var(--ease-smooth) forwards; opacity: 0; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* --- 6. PAGE SPECIFIC STYLES --- */

/* SPA View Containers (The Page Slider) */
.view-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    padding-top: 20px; padding-bottom: 110px;
    overflow-y: auto;
    background: transparent; 
    transition: transform 0.4s var(--ease-smooth), opacity 0.4s ease;
    opacity: 0; transform: translateX(30%);
    pointer-events: none; z-index: 10;
    display: none; 
}
.view-container.active {
    display: block; opacity: 1; transform: translateX(0); pointer-events: auto; position: relative; z-index: 1;
}

/* Settings Sub-Pages Transition */
.sub-view { display: none; animation: slideInRight 0.3s var(--ease-smooth); }
.sub-view.active { display: block; }

/* Nav Bar Active Bubble */
.nav-item { position: relative; transition: all 0.3s var(--ease-smooth); }
.nav-icon-box {
    width: auto; height: auto; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease-spring);
}
.nav-icon { font-size: 24px; color: #94a3b8; transition: color 0.3s; }
.nav-text { font-size: 10px; font-weight: 500; color: #94a3b8; margin-top: 4px; transition: all 0.3s; }

.nav-item.active .nav-icon-box {
    width: 56px; height: 56px;
    background: linear-gradient(to top right, #67e8f9, #06b6d4);
    border-radius: 50%;
    transform: translateY(-24px);
    border: 4px solid white;
    box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.5);
}
.nav-item.active .nav-icon { color: white; font-size: 26px; }
.nav-item.active .nav-text { color: #0891b2; font-weight: 700; transform: translateY(-12px); }

/* Auth Page: Liquid Forms */
.form-slider { display: flex; width: 200%; transition: transform 0.5s var(--ease-smooth); }
.form-view { width: 50%; padding: 4px; opacity: 1; transition: opacity 0.3s ease; }
.form-view.inactive { opacity: 0; pointer-events: none; }
.strength-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; transition: background 0.3s; }
.strength-dot.active { background: var(--primary); box-shadow: 0 0 10px var(--primary); }

/* Intro Page: Vertical Info Cards */
.info-card {
    background: var(--glass-bg); backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 24px; overflow: hidden;
    margin-bottom: 16px;
    transition: all 0.3s var(--ease-smooth);
}
.info-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--primary);
    background: rgba(255,255,255,0.85);
}
.card-header { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; gap: 12px; }
.card-icon {
    width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 255, 255, 0.1); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.3s ease;
}
.info-card:hover .card-icon { transform: rotate(10deg) scale(1.1); background: var(--primary); color: #0f172a; }
.card-body { padding: 16px 20px; font-size: 13px; line-height: 1.6; color: var(--text-light); }

/* Home: Carousel & Accordion */
.carousel-track { display: flex; transition: transform 0.6s var(--ease-smooth); }
.carousel-slide { min-width: 100%; box-sizing: border-box; opacity: 0.4; transform: scale(0.9); transition: all 0.6s ease; }
.carousel-slide.active { opacity: 1; transform: scale(1); }
.progress-bar { height: 3px; background: var(--primary-dark); width: 0%; border-radius: 2px; }
.progress-active { animation: fillProgress 12s linear forwards; }
.accordion-content { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s var(--ease-smooth); }
.accordion-content.open { max-height: 500px; opacity: 1; }

/* Home: Receipt Modal */
.receipt-slip {
    background: #ffffff; width: 90%; max-width: 340px; border-radius: 24px; padding: 24px;
    position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px); opacity: 0;
    transition: all 0.3s var(--ease-smooth);
}
.dashed-line { border-bottom: 2px dashed #cbd5e1; margin: 16px 0; width: 100%; }

/* Trade: Specifics */
.trade-card {
    background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s var(--ease-smooth); position: relative; overflow: hidden;
}
.trade-card:active { transform: scale(0.98); }
.countdown-container { position: relative; width: 220px; height: 220px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(0,255,255,0.3); animation: pulse-glow 3s infinite; }
.trade-input-box { transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.8); }
.trade-input-box:focus-within { border-color: var(--primary); background: rgba(255,255,255,0.9); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2); }
.trade-input-box.error { border-color: var(--danger); background: rgba(254, 242, 242, 0.8); animation: shake 0.4s ease-in-out; }

/* Tasks: Progress */
.task-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); transition: all 0.3s var(--ease-smooth); }
.task-card.locked { opacity: 0.6; filter: grayscale(0.8); pointer-events: none; }
.progress-track { background: rgba(0, 255, 255, 0.1); border-radius: 99px; overflow: hidden; height: 8px; margin-top: 10px; }
.progress-fill { height: 100%; background: var(--primary-dark); width: 0%; transition: width 1s linear; }
.weekend-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(12px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.weekend-overlay.active { opacity: 1; pointer-events: auto; }

/* Teams: Salary Bar */
.salary-track { background: rgba(0, 0, 0, 0.05); border-radius: 99px; overflow: hidden; height: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.salary-fill {
    height: 100%; background: linear-gradient(90deg, #00FFFF 0%, #06b6d4 100%);
    width: 0%; border-radius: 99px; transition: width 1.5s var(--ease-smooth); position: relative;
}
.salary-fill::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg) translateX(-100%); animation: shimmer 2s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%) skewX(-20deg); } to { transform: translateX(200%) skewX(-20deg); } }
.locked-grayscale { filter: grayscale(1); opacity: 0.7; transition: all 0.3s var(--ease-smooth); }

/* Withdraw: Presets & Wallets */
.preset-btn {
    background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 16px 0; border-radius: 16px; font-weight: 700; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif;
    transition: all 0.2s var(--ease-smooth); position: relative; overflow: hidden;
}
.preset-btn:active { transform: scale(0.96); }
.preset-btn.active {
    background: linear-gradient(135deg, #00FFFF, #06b6d4); border-color: transparent; color: white;
    box-shadow: 0 8px 20px -4px rgba(6, 182, 212, 0.4); transform: translateY(-2px);
}
.wallet-option {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
    border: 1px solid transparent; transition: all 0.2s; cursor: pointer; background: rgba(255,255,255,0.4);
}
.wallet-option.selected { background: rgba(0, 255, 255, 0.1); border-color: var(--primary); }
.radio-circle {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1;
    display: flex; align-items: center; justify-content: center;
}
.wallet-option.selected .radio-circle { border-color: var(--primary-dark); }
.wallet-option.selected .radio-circle::after { content: ''; width: 10px; height: 10px; background: var(--primary-dark); border-radius: 50%; }

/* Deposit: Network Cards */
.net-card {
    border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.4);
    padding: 16px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; transition: all 0.2s var(--ease-smooth);
}
.net-card.active { background: rgba(0, 255, 255, 0.1); border-color: var(--primary); box-shadow: 0 4px 15px rgba(0, 255, 255, 0.15); }
.upload-box {
    border: 2px dashed #cbd5e1; border-radius: 16px; background: rgba(255,255,255,0.3);
    min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.2s; cursor: pointer; position: relative; overflow: hidden;
}
.upload-box:hover { border-color: var(--primary); background: rgba(0,255,255,0.05); }
.upload-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Profile: Support & Avatar */
.chat-container { display: flex; flex-direction: column; height: 65vh; }
.chat-messages { flex: 1; overflow-y: auto; padding: 10px; scroll-behavior: smooth; }
.chat-bubble {
    max-width: 80%; padding: 14px; border-radius: 18px; font-size: 13px; line-height: 1.5;
    position: relative; margin-bottom: 12px; animation: slideUp 0.3s var(--ease-smooth);
}
.bubble-bot { background: white; border-bottom-left-radius: 4px; color: var(--text-dark); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.bubble-user { background: linear-gradient(135deg, #00FFFF, #06b6d4); border-bottom-right-radius: 4px; color: white; margin-left: auto; font-weight: 600; text-align: right; box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2); }
.avatar-ring {
    position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent;
    background: linear-gradient(to right, #00FFFF, #00e6e6) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 10s linear infinite;
}
.upload-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.4); border-radius: 999px;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; cursor: pointer;
}
.avatar-container:hover .upload-overlay { opacity: 1; }

/* Modals & Overlays */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px);
    z-index: 1000; display: none; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-overlay.active .receipt-slip { transform: scale(1) translateY(0); opacity: 1; }

/* PIN Pad */
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cbd5e1; transition: all 0.2s var(--ease-spring); }
.pin-dot.filled { background: var(--primary-dark); border-color: var(--primary-dark); transform: scale(1.2); }
.keypad-btn {
    width: 68px; height: 68px; border-radius: 50%; font-size: 24px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1); color: white; transition: all 0.1s; cursor: pointer; user-select: none;
}
.keypad-btn:active { background: var(--primary); color: var(--text-dark); transform: scale(0.9); }

/* Toasts */
.toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px);
    padding: 12px 24px; border-radius: 99px; font-weight: 600; font-size: 13px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 8px;
    opacity: 0; transition: all 0.4s var(--ease-snappy); z-index: 2000; border: 1px solid transparent;
}
.toast.active { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.toast.error { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.toast.info { background: #ffffff; color: var(--text-dark); border-color: #e2e8f0; }

/* Loaders */
.loader-spinner {
    width: 24px; height: 24px; border: 3px solid rgba(0, 255, 255, 0.3);
    border-top-color: var(--primary-dark); border-radius: 50%; animation: spin 1s linear infinite;
}
.btn-loader {
    width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite;
}