@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

html, body { margin: 0; padding: 0; width: 100%; min-height: 100vh; background-color: #f4f4f5; color: #09090b; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }

/* Typography */
h1, h2, h3, h4 { font-weight: 700; color: #09090b; margin: 0; }
p, span, label { color: #52525b; font-size: 14px; margin: 0; }
.text-primary { color: #4f46e5; } .text-success { color: #10b981; } .text-danger { color: #ef4444; }

/* Layout & Flex Utilities */
.container { max-width: 1280px; margin: 0 auto; padding: 24px; width: 100%; }
.flex { display: flex; display: -webkit-box; display: -ms-flexbox; }
.flex-col { display: flex; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; }
.justify-between { justify-content: space-between; -webkit-box-pack: justify; }
.items-center { align-items: center; -webkit-box-align: center; }
.justify-center { justify-content: center; -webkit-box-pack: center; }

/* Margins instead of GAP for cPanel safety */
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.ml-2 { margin-left: 8px; } .mr-2 { margin-right: 8px; }

/* Grid System */
.grid { display: flex; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; -ms-flex-wrap: wrap; }
.grid > div { flex: 1 1 320px; -webkit-box-flex: 1; -ms-flex: 1 1 320px; margin-bottom: 24px; margin-right: 24px; }
.grid > div:last-child { margin-right: 0; }
.span-2 { flex: 1 1 100% !important; -webkit-box-flex: 1; -ms-flex: 1 1 100% !important; width: 100%; margin-right: 0 !important; }

/* Elite Glass Cards */
.glass-card {
    background-color: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 16px; -webkit-border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.glass-card:hover { border-color: #d4d4d8; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-3px); }
.premium-card { border: 2px solid #4f46e5; background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%); box-shadow: 0 10px 40px rgba(79, 70, 229, 0.15); }

/* Forms & Buttons */
input, select {
    display: block; width: 100%; padding: 14px 16px;
    border: 1px solid #d4d4d8; border-radius: 8px;
    background-color: #fafafa; color: #09090b;
    font-size: 14px; transition: 0.3s; margin-bottom: 12px;
}
input:focus, select:focus { border-color: #4f46e5; background-color: #ffffff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }

.btn {
    display: flex; justify-content: center; align-items: center;
    width: 100%; padding: 14px 24px;
    border: none; border-radius: 8px;
    font-weight: 600; font-size: 14px; letter-spacing: 0.5px;
    cursor: pointer; transition: 0.3s; margin-bottom: 8px;
}
.btn i { margin-right: 8px; }
.btn-primary { background-color: #4f46e5; color: #ffffff; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2); }
.btn-primary:hover { background-color: #4338ca; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); }
.btn-vip { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #ffffff; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); }
.btn-vip:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }
.btn-outline { background-color: transparent; border: 1px solid #d4d4d8; color: #09090b; }
.btn-outline:hover { background-color: #f4f4f5; border-color: #4f46e5; color: #4f46e5; }

/* Center Auth Pages */
.auth-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 24px; background-color: #09090b; }
.auth-wrapper .glass-card { background-color: #18181b; border-color: #27272a; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.auth-wrapper h2 { color: #ffffff; }
.auth-wrapper input { background-color: #27272a; border-color: #3f3f46; color: #ffffff; }

/* Progress & Skeletons */
.reward-box { background-color: #fafafa; border: 1px solid #e4e4e7; padding: 16px; border-radius: 8px; margin-bottom: 16px; }
.reward-bar-bg { width: 100%; height: 8px; background-color: #e4e4e7; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.reward-fill { height: 100%; background-color: #10b981; width: 0%; transition: width 0.5s ease; }
.skeleton { background: linear-gradient(90deg, #e4e4e7 25%, #f4f4f5 50%, #e4e4e7 75%); background-size: 200% 100%; animation: skeletonLoad 1.5s infinite; border-radius: 8px; }
.skeleton-box { height: 150px; width: 100%; margin-bottom: 16px; }
@keyframes skeletonLoad { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Hyper-Realistic Terminal */
.terminal-container { display: none; margin-top: 16px; border-radius: 8px; padding: 16px; background-color: #09090b; border: 1px solid #27272a; box-shadow: inset 0 4px 20px rgba(0,0,0,0.8); }
.terminal-header { border-bottom: 1px solid #27272a; padding-bottom: 8px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #71717a; text-transform: uppercase; letter-spacing: 1px; }
.terminal-body { height: 250px; overflow-y: auto; display: flex; flex-direction: column; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.5; color: #e4e4e7; }
.log-line { margin-bottom: 4px; word-wrap: break-word; }
.log-sys { color: #38bdf8; } .log-success { color: #34d399; text-shadow: 0 0 5px rgba(52, 211, 153, 0.3); } .log-err { color: #f87171; } .log-warn { color: #fbbf24; }

/* Modals & Nav */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(9, 9, 11, 0.8); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal { background-color: #ffffff; padding: 32px; border-radius: 16px; max-width: 450px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px rgba(0,0,0,0.25); animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.navbar { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e4e4e7; background-color: #ffffff; position: sticky; top: 0; z-index: 100; }
.nav-links { display: flex; align-items: center; }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
.badge-free { background-color: #f4f4f5; color: #52525b; } .badge-pro { background-color: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }

#toast-container { position: fixed; bottom: 80px; right: 24px; display: flex; flex-direction: column; z-index: 2000; }
.toast { background-color: #ffffff; padding: 14px 24px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid #e4e4e7; border-left: 4px solid #4f46e5; font-weight: 600; font-size: 14px; margin-top: 8px; animation: slideInRight 0.3s ease forwards; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; border-top: 1px solid #e4e4e7; padding: 12px 0; z-index: 100; justify-content: space-around; }
.mobile-nav a { color: #71717a; text-decoration: none; font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; width: 25%; }
.mobile-nav a.active { color: #4f46e5; } .mobile-nav a i { font-size: 22px; margin-bottom: 4px; }

@media (max-width: 768px) {
    .navbar .nav-links { display: none; } .mobile-nav { display: flex; } body { padding-bottom: 80px; }
    .grid > div { width: 100%; margin-right: 0; flex: 1 1 100% !important; }
}