/* =========================================================
   🎨 TITAN CORE - GLOBAL STYLESHEET
   Cyberpunk / Dark Theme Base
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Outfit:wght@300;500;700;900&family=Vazirmatn:wght@300;500;700;900&display=swap');

:root {
    --bg: #030305;
    --surface: rgba(15, 15, 20, 0.85);
    --surface-hover: rgba(25, 25, 35, 0.95);
    
    --cyan: #00eaff;
    --cyan-glow: rgba(0, 234, 255, 0.3);
    
    --magenta: #ff00aa;
    --magenta-glow: rgba(255, 0, 170, 0.3);
    
    --purple: #b000ff;
    --gold: #ffbc00;
    --red: #ff0055;
    --green: #00ff88;
    --ton: #0098ea;
    
    --text-main: #ffffff;
    --text-muted: #888899;
    
    --font-en: 'Orbitron', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-fa: 'Vazirmatn', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: var(--font-fa);
    min-height: 100vh;
    overflow-x: hidden;
}

.en-digit {
    font-family: var(--font-en) !important;
    letter-spacing: 1px;
    direction: ltr;
    display: inline-block;
}

/* =========================================================
   🔄 TITAN GLOBAL LOADER
========================================================= */
#titan-loader {
    position: fixed; inset: 0; background: var(--bg); z-index: 99999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}
.titan-spinner {
    width: 60px; height: 60px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--cyan);
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px var(--cyan-glow);
}
.titan-spinner::before {
    content: ''; position: absolute; inset: 5px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--magenta);
    animation: spin 2s linear infinite reverse;
}
.titan-loader-text {
    margin-top: 25px; font-family: var(--font-en); font-weight: 900;
    letter-spacing: 3px; font-size: 12px; color: var(--cyan);
    animation: pulseGlow 1.5s infinite alternate;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulseGlow { to { opacity: 0.5; text-shadow: 0 0 10px var(--cyan); } }

/* =========================================================
   🍞 TITAN SMART TOASTER (NOTIFICATIONS)
========================================================= */
#titan-toaster {
    position: fixed; top: 15px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 400px; z-index: 100000;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.titan-toast {
    background: rgba(5,5,10,0.95); border-left: 4px solid var(--cyan);
    border-radius: 12px; padding: 15px; color: #fff; font-size: 12px;
    backdrop-filter: blur(15px); box-shadow: 0 10px 30px var(--cyan-glow);
    pointer-events: auto; display: flex; align-items: center; gap: 10px;
    font-weight: bold; font-family: var(--font-fa);
    animation: slideDownToast 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.titan-toast.error { border-color: var(--red); box-shadow: 0 10px 30px rgba(255,0,85,0.3); }
.titan-toast.success { border-color: var(--green); box-shadow: 0 10px 30px rgba(0,255,136,0.3); }
.titan-toast.warning { border-color: var(--gold); box-shadow: 0 10px 30px rgba(255,188,0,0.3); }
@keyframes slideDownToast { from { opacity: 0; transform: translateY(-30px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* =========================================================
   🪟 GLOBAL MODAL SYSTEM
========================================================= */
.titan-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 20000;
    display: none; justify-content: center; align-items: center;
    backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease;
}
.titan-modal-box {
    width: 90%; max-width: 350px; background: var(--surface);
    border: 1px solid var(--cyan); border-radius: 20px; padding: 25px;
    box-shadow: 0 10px 40px var(--cyan-glow);
    transform: translateY(50px) scale(0.95); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column; gap: 15px;
}
.titan-modal-overlay.active { opacity: 1; }
.titan-modal-overlay.active .titan-modal-box { transform: translateY(0) scale(1); }

/* =========================================================
   🔘 GLOBAL UI COMPONENTS
========================================================= */
.btn-cyber {
    width: 100%; padding: 16px; border-radius: 14px; border: none;
    font-family: var(--font-en); font-weight: 900; font-size: 14px;
    letter-spacing: 2px; cursor: pointer; transition: 0.2s;
    display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn-cyber:active { transform: scale(0.95); }
.btn-primary { background: linear-gradient(135deg, var(--cyan), #0051ff); color: #000; box-shadow: 0 5px 20px var(--cyan-glow); }
.btn-danger { background: rgba(255,0,85,0.1); border: 1px solid var(--red); color: var(--red); box-shadow: 0 5px 20px rgba(255,0,85,0.2); }
.btn-secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; }

.inp-cyber {
    width: 100%; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1);
    padding: 14px; border-radius: 12px; color: var(--cyan); font-family: var(--font-en);
    outline: none; font-size: 14px; transition: 0.3s;
}
.inp-cyber:focus { border-color: var(--cyan); box-shadow: inset 0 0 10px var(--cyan-glow); background: #000; }