/* ============================================
   CRYPTEX PRO v3.0 - Ultimate Crypto Exchange
   Binance-Level Premium Design System
   ============================================ */

/* === CORE ANIMATIONS === */
@keyframes slideUp { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes slideDown { 0%{opacity:0;transform:translateY(-20px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes slideRight { 0%{opacity:0;transform:translateX(-20px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes fadeScale { 0%{opacity:0;transform:scale(0.92)} 100%{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 8px rgba(59,130,246,0.2)} 50%{box-shadow:0 0 24px rgba(59,130,246,0.5)} }
@keyframes pulseRing { 0%{transform:scale(0.85);opacity:0.8} 100%{transform:scale(1.6);opacity:0} }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.8)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes breathe { 0%,100%{opacity:0.3} 50%{opacity:0.7} }
@keyframes borderPulse { 0%,100%{border-color:rgba(59,130,246,0.12)} 50%{border-color:rgba(59,130,246,0.35)} }
@keyframes countUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes glowPulse { 0%,100%{text-shadow:0 0 10px rgba(59,130,246,0.3)} 50%{text-shadow:0 0 25px rgba(59,130,246,0.6),0 0 50px rgba(59,130,246,0.2)} }

/* Animation Classes */
.anim-up { animation: slideUp 0.55s cubic-bezier(.16,1,.3,1) both; }
.anim-down { animation: slideDown 0.5s cubic-bezier(.16,1,.3,1) both; }
.anim-right { animation: slideRight 0.5s cubic-bezier(.16,1,.3,1) both; }
.anim-scale { animation: fadeScale 0.45s cubic-bezier(.16,1,.3,1) both; }
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-breathe { animation: breathe 3s ease-in-out infinite; }
.anim-count { animation: countUp 0.7s cubic-bezier(.16,1,.3,1) both; }

/* Stagger */
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}.d7{animation-delay:.35s}.d8{animation-delay:.4s}

/* === GLASSMORPHISM === */
.glass{background:rgba(13,17,28,0.72);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,0.05)}
.glass-brand{background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(6,182,212,0.04));backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,0.12)}
.glass-surface{background:rgba(17,24,39,0.8);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.04)}
.glass-ultra{background:rgba(10,14,24,0.75);backdrop-filter:blur(28px) saturate(2);-webkit-backdrop-filter:blur(28px) saturate(2);border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 40px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.03)}

/* === GLOW TEXT === */
.text-glow{color:#3b82f6;text-shadow:0 0 20px rgba(59,130,246,0.4),0 0 40px rgba(59,130,246,0.1);animation:glowPulse 3s ease-in-out infinite}
.text-glow-cyan{color:#22d3ee;text-shadow:0 0 20px rgba(34,211,238,0.4)}
.text-glow-green{color:#22c55e;text-shadow:0 0 20px rgba(34,197,94,0.3)}
.shimmer-text{background:linear-gradient(90deg,#3b82f6,#22d3ee,#a855f7,#3b82f6);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite}

/* === PREMIUM CARDS === */
.card-glow{position:relative;border-radius:20px;overflow:hidden}
.card-glow::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(59,130,246,0.3),transparent 40%,transparent 60%,rgba(34,211,238,0.2));z-index:0;pointer-events:none}
.card-glow>*{position:relative;z-index:1}

.card-lift{transition:all 0.35s cubic-bezier(.16,1,.3,1)}
.card-lift:hover{transform:translateY(-3px);border-color:rgba(59,130,246,0.18)!important;box-shadow:0 16px 48px rgba(0,0,0,0.35),0 0 30px rgba(59,130,246,0.06)}
@media(max-width:480px){.card-lift:hover{transform:none}}

.crypto-card{position:relative;overflow:hidden;border-radius:20px;transition:all 0.4s cubic-bezier(.16,1,.3,1)}
.crypto-card::after{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,0.03) 0%,transparent 70%);pointer-events:none}
.crypto-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 50px rgba(0,0,0,0.4),0 0 40px rgba(59,130,246,0.08)}

/* === BUTTONS === */
.btn-3d{position:relative;transition:all 0.2s cubic-bezier(.16,1,.3,1);overflow:hidden}
.btn-3d::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,0.15) 0%,transparent 50%);pointer-events:none}
.btn-3d::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);transition:0.6s}
.btn-3d:hover::before{left:100%}
.btn-3d:active{transform:translateY(2px) scale(0.97)}

.btn-glow{position:relative;overflow:hidden;transition:all 0.3s ease}
.btn-glow::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;box-shadow:0 0 20px rgba(59,130,246,0.5);transition:opacity 0.3s}
.btn-glow:hover::after{opacity:1}

/* === LIVE INDICATOR === */
.live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:livePulse 2s ease-in-out infinite}
.live-dot-blue{width:6px;height:6px;border-radius:50%;background:#3b82f6;animation:livePulse 2s ease-in-out infinite}

/* === AMBIENT ORBS === */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}

/* === TICKER === */
.ticker-strip{overflow:hidden}
.ticker-track{display:flex;animation:ticker 40s linear infinite}

/* === ORDER BOOK === */
.ob-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:3px 8px;font-size:11px;font-family:'JetBrains Mono',monospace;transition:background 0.15s;position:relative}
.ob-row:hover{background:rgba(255,255,255,0.03)}
.ob-depth{position:absolute;right:0;top:0;bottom:0;opacity:0.06}

/* === TOGGLE SWITCH === */
.toggle-switch{position:relative;width:52px;height:28px;border-radius:14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.3s ease}
.toggle-switch.active{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:rgba(34,197,94,0.5);box-shadow:0 0 20px rgba(34,197,94,0.2)}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:white;transition:transform 0.3s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.toggle-switch.active::after{transform:translateX(24px)}

/* === NOTIFICATION BADGE === */
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #050a18}

/* === SKELETON LOADING === */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:12px}

/* === PAGE LOADER === */
.page-loader{position:fixed;inset:0;background:#050a18;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.4s ease}
.page-loader.loaded{opacity:0;pointer-events:none}
.loader-ring{width:40px;height:40px;border:3px solid rgba(59,130,246,0.1);border-top-color:#3b82f6;border-radius:50%;animation:spin 0.8s linear infinite}

/* === PROFANITY FILTER === */
.profanity-warning{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:12px;padding:10px 14px;color:#fca5a5;font-size:12px;animation:slideUp 0.3s ease;display:none}
.profanity-warning.show{display:flex;align-items:center;gap:8px}

/* === SCROLLBAR === */
.custom-scroll{scrollbar-width:thin;scrollbar-color:rgba(59,130,246,0.2) transparent}
.custom-scroll::-webkit-scrollbar{display:block;width:4px}
.custom-scroll::-webkit-scrollbar-track{background:transparent}
.custom-scroll::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.2);border-radius:4px}

/* === COPY ANIMATION === */
.copyInput{display:inline-block;line-height:50px;position:absolute;top:0;right:0;width:40px;text-align:center;font-size:14px;cursor:pointer;transition:all .3s}
.copied::after{position:absolute;top:8px;right:12%;width:100px;display:block;content:"COPIED";font-size:1em;padding:5px 5px;color:#fff;background-color:#3b82f6;border-radius:8px;opacity:0;will-change:opacity,transform;animation:showcopied 1.5s ease}
@keyframes showcopied{0%{opacity:0;transform:translateX(100%)}50%{opacity:0.7;transform:translateX(40%)}70%{opacity:1;transform:translateX(0)}100%{opacity:0}}

/* === FORM INPUTS === */
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:rgba(59,130,246,0.4)!important;box-shadow:0 0 0 3px rgba(59,130,246,0.1),0 0 20px rgba(59,130,246,0.05)!important;outline:none!important}
.input-pro{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px 16px 14px 44px;color:white;font-size:14px;outline:none;transition:all 0.2s}
.input-pro::placeholder{color:rgba(255,255,255,0.15)}
.input-pro:focus{border-color:rgba(59,130,246,0.4);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}

/* === MISC === */
.logNav.disabled{opacity:0.4;cursor:default}
.d-none{display:none}
.modal-backdrop.show{display:none!important}
.intl-tel-input{position:relative;display:inline-block;width:100%!important}
.profile-thumb{position:relative;width:7rem;height:7rem;border-radius:50%;display:inline-flex;overflow:visible}
.profile-thumb .profilePicPreview{width:7rem;height:7rem;border-radius:50%;display:block;border:3px solid rgba(59,130,246,0.4);box-shadow:0 0 20px rgba(59,130,246,0.15);background-size:cover;background-position:center}
.profile-thumb .avatar-edit{position:absolute;bottom:0;right:0;z-index:10}
.profile-thumb .avatar-edit label{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#06b6d4);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #050a18;cursor:pointer;color:#fff;font-size:14px}
.profile-thumb .profilePicUpload{font-size:0;opacity:0;position:absolute;left:0;bottom:0;width:100%;height:100%;cursor:pointer}

/* Tooltip */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(0.9);background:rgba(13,17,28,0.95);border:1px solid rgba(255,255,255,0.08);color:white;padding:6px 12px;border-radius:8px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:all 0.2s}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

/* Page Entrance */
#main{animation:slideUp 0.4s cubic-bezier(.16,1,.3,1) both}

/* === INPUT TEXT COLOR FIX === */
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
    color: #ffffff !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 12px !important;
}
input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,0.3) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(13,17,28,0.9) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}