/* Extracted from user.html source; preserved for UI fidelity. */
/* Variables */
:root {
    --bg-base: #000000;
    --primary: #00f2fe; 
    --neon-green: #00ff87;
    --neon-yellow: #f6d365;
    --accent: #ff0844; 
    --course-color: #AF52DE;
    --surface: rgba(20, 20, 25, 0.8);
    --surface-solid: #151518;
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-main: #FFFFFF;
    --text-muted: #8E8E93;
    --font-tech: 'Orbitron', sans-serif;
    --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --nav-height: 75px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg-base); color: var(--text-main); font-family: var(--font-stack); overflow: hidden; overscroll-behavior-y: none; user-select: none; -webkit-user-select: none; }

/* Utilities */
.hidden { display: none !important; }
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
.view-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg-base); z-index: 10; }

/* Background Scanlines */
.scanlines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 0; }
.dark-glow-bg { background: radial-gradient(circle at center, rgba(0, 255, 135, 0.05) 0%, #000000 80%); }

/* =========================================
   1. SPLASH SCREEN
========================================== */
#view-splash { background: #000; z-index: 9999; }
.splash-container { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.avatar-ring-wrapper { position: relative; width: 220px; height: 220px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.ring-outer { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px dashed rgba(0, 242, 254, 0.4); animation: spinLeft 20s linear infinite; }
.ring-cyan { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: transparent; box-shadow: 0 0 30px rgba(0, 242, 254, 0.8), inset 0 0 20px rgba(0, 242, 254, 0.5); border: 4px solid rgba(0, 242, 254, 0.8); animation: pulseGlow 2s infinite alternate; }
.ring-green { position: absolute; width: 140px; height: 140px; border-radius: 50%; background: transparent; box-shadow: 0 0 40px rgba(0, 255, 135, 1), inset 0 0 20px rgba(0, 255, 135, 0.8); border: 8px solid rgba(0, 255, 135, 1); z-index: 2; }
.splash-avatar { position: absolute; width: 120px; height: 120px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; z-index: 3; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); overflow: hidden; }
.splash-title { font-family: var(--font-tech); font-size: 28px; font-weight: 900; letter-spacing: 4px; color: var(--primary); text-shadow: 0 0 15px rgba(0, 242, 254, 0.6); margin-bottom: 20px; text-transform: uppercase; }
.splash-loader-track { width: 200px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; position: relative; }
.splash-loader-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--neon-green), var(--primary)); border-radius: 10px; box-shadow: 0 0 10px var(--neon-green); animation: loadProgress 2.5s ease-in-out forwards; }

@keyframes spinLeft { 100% { transform: rotate(-360deg); } }
@keyframes pulseGlow { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.05); opacity: 1; } }
@keyframes loadProgress { 0% { width: 0%; } 100% { width: 100%; } }

/* =========================================
   2. LOGIN SCREEN
========================================== */
.login-card-wrapper { position: relative; width: 90%; max-width: 380px; border-radius: 26px; padding: 3px; background: linear-gradient(135deg, #00f2fe, #00ff87, #f6d365, #ff0844, #00f2fe); background-size: 400% 400%; animation: borderFlow 5s ease infinite; z-index: 2; box-shadow: 0 0 30px rgba(0, 255, 135, 0.3); }
.login-card-inner { background: #0b0f12; border-radius: 23px; padding: 40px 25px; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; }
@keyframes borderFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.multi-gradient-text { background: linear-gradient(90deg, #ff0844, #f6d365, #00ff87, #00f2fe, #ff0844); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: flowText 4s linear infinite; }
@keyframes flowText { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

.hacker-icon { font-size: 5rem; color: var(--neon-green); margin-bottom: 20px; filter: drop-shadow(0 0 15px rgba(0, 255, 135, 0.6)); transition: 0.3s; }
.login-title { font-family: var(--font-tech); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 3px; margin-bottom: 10px; text-align: center; }
.login-subtext { font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 30px; line-height: 1.5; }

.input-group { position: relative; width: 100%; margin-bottom: 25px; transition: 0.3s; }
.tech-input { width: 100%; background: #050505; border: 1px solid rgba(0, 255, 135, 0.3); color: #fff; padding: 18px 20px; border-radius: 12px; font-size: 14px; font-family: var(--font-tech); letter-spacing: 2px; outline: none; transition: 0.3s; text-align: center; }
.tech-input::placeholder { color: rgba(255,255,255,0.3); }
.tech-input:focus { border-color: var(--neon-green); box-shadow: 0 0 15px rgba(0, 255, 135, 0.3); }
.eye-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--neon-green); font-size: 1.2rem; cursor: pointer; }

.btn-tech { width: 100%; background: linear-gradient(90deg, #00f2fe 0%, #38f9d7 40%, #f6d365 100%); border: none; padding: 18px; border-radius: 14px; color: #000; font-family: var(--font-tech); font-weight: 900; font-size: 15px; letter-spacing: 2px; cursor: pointer; transition: 0.2s; box-shadow: 0 5px 20px rgba(0, 242, 254, 0.4); text-transform: uppercase; }
.btn-tech:active { transform: scale(0.96); }
.login-footer { font-family: var(--font-tech); font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 30px; letter-spacing: 2px; text-align: center; width: 100%; }

/* =========================================
   3. UNAUTHORIZED ANIMATIONS
========================================== */
@keyframes pulseAlert { 0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 69, 58, 0.5)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(255, 69, 58, 1)); } 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 69, 58, 0.5)); } }
.pulse-alert-icon { animation: pulseAlert 2s infinite ease-in-out; }

/* =========================================
   4. DASHBOARD & UI ELEMENTS
========================================== */
.glass-panel { background: var(--surface); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 25px; text-align: center; }
.app-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); z-index: 20; border-bottom: 1px solid var(--glass-border); padding-top: max(15px, env(safe-area-inset-top)); }
.app-content { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px); }
.app-content::-webkit-scrollbar { display: none; }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 15px; }
.item-card { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 20px; padding: 20px 15px; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; transition: all 0.3s ease; text-align: center; position: relative; overflow: hidden;}
.item-card:hover { transform: translateY(-5px); border-color: var(--primary); background: rgba(255,255,255,0.06); box-shadow: 0 10px 20px rgba(0,242,254,0.1); }
.item-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; font-size: 2rem; border: 1px solid var(--glass-border); overflow: hidden; }
.item-icon img { width: 100%; height: 100%; object-fit: cover; }
.item-title { font-size: 0.95rem; font-weight: 600; color: var(--text-main); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-type { position: absolute; top: 10px; right: 10px; font-size: 9px; padding: 3px 6px; border-radius: 6px; font-weight: 800; text-transform: uppercase; z-index: 2;}
.b-html { background: rgba(10, 132, 255, 0.2); color: var(--primary); }
.b-link { background: rgba(255, 159, 10, 0.2); color: var(--neon-yellow); }
.b-course { background: rgba(175, 82, 222, 0.2); color: var(--course-color); }

/* Full Cover Image for Courses */
.item-cover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; z-index: 0; transition: 0.3s; }
.item-card:hover .item-cover-img { opacity: 0.6; transform: scale(1.05); }
.item-content-z { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 12px; }

/* 4-Tab Bottom Nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: calc(var(--nav-height) + env(safe-area-inset-bottom)); background: rgba(15, 15, 20, 0.85); backdrop-filter: blur(15px); border-top: 1px solid var(--glass-border); display: flex; justify-content: space-around; align-items: center; z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted); cursor: pointer; transition: all 0.3s; padding: 10px; width: 25%; }
.nav-item.active { color: var(--primary); transform: translateY(-2px); }
.nav-item i { font-size: 1.4rem; } .nav-item span { font-size: 0.75rem; font-weight: 600; }

.search-input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: #fff; padding: 16px 16px 16px 50px; border-radius: 20px; font-size: 16px; outline: none; margin-bottom: 10px;}

.btn-primary { width: 100%; padding: 16px; border-radius: 14px; background: var(--primary); color: #000; font-weight:bold; border:none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;}
.btn-premium { width: 100%; padding: 16px; border-radius: 14px; background: linear-gradient(90deg, #f6d365, #ffb347); color: #000; font-weight:bold; border:none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;}
.btn-course { width: 100%; padding: 16px; border-radius: 14px; background: var(--course-color); color: #fff; font-weight:bold; border:none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;}
.btn-danger { width: 100%; padding: 16px; border-radius: 14px; background: rgba(255, 69, 58, 0.15); border: 1px solid var(--accent); color: var(--accent); font-weight:bold; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;}

/* Sandbox */
#view-tool-sandbox { background: var(--bg-base); z-index: 100; flex-direction: column; display: none; }
.sandbox-header { height: calc(60px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--surface-solid); color: #fff; display: flex; align-items: center; padding-left: 15px; padding-right: 15px; justify-content: space-between; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.sandbox-header button { background: rgba(255,255,255,0.1); border: none; padding: 8px 15px; border-radius: 10px; color: #fff; font-size: 0.9rem; font-weight:bold; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.sandbox-frame { flex: 1; width: 100%; border: none; background: #fff; }

/* =========================================
   5. BOTTOM SHEETS (Modals)
========================================== */
.sheet-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(5px); z-index: 9999; opacity: 0; pointer-events: none; transition: 0.3s; }
.sheet-overlay.active { opacity: 1; pointer-events: auto; }
.bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-solid); border-radius: 28px 28px 0 0; z-index: 10000; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1); border-top: 1px solid var(--glass-border); max-height: 90vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 40px rgba(0,0,0,0.8);}
.bottom-sheet.active { transform: translateY(0); }
.sheet-drag { width: 45px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 10px; margin: 15px auto; }
.sheet-content { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.sheet-close-btn { position: absolute; top: 15px; right: 20px; background: rgba(255,255,255,0.1); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border: none; }

/* Course Player Box */
.video-container { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); position: relative; margin-bottom: 10px;}
.video-container iframe, .video-container video { width: 100%; height: 100%; border: none; }

/* Toasts */
#toast-container { position: fixed; top: max(20px, env(safe-area-inset-top)); right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: 90%; max-width: 350px; left: 50%; transform: translateX(-50%); }
.toast { background: rgba(30, 30, 35, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); padding: 16px 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 12px; animation: slideDown 0.3s forwards; font-weight: 600; font-size: 14px;}
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-fade { animation: fadeIn 0.4s ease forwards; }
.animate-slide { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Dynamic iOS Background preserved from admin source */
/* Dynamic iOS Background */
.bg-blobs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background: #000; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; animation: float 20s ease-in-out infinite alternate; }
.blob-1 { width: 350px; height: 350px; background: var(--secondary); top: -100px; left: -100px; }
.blob-2 { width: 400px; height: 400px; background: var(--accent); bottom: -150px; right: -100px; animation-delay: -5s; }
.blob-3 { width: 300px; height: 300px; background: var(--primary); top: 40%; left: 20%; animation-delay: -10s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }

/* Raza Toolkit entry gateway + professional navigation */
.entry-shell{position:fixed;inset:0;background:var(--bg-base);z-index:500;overflow:hidden}
.entry-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.entry-splash{background:#000}
.splash-container{text-align:center;max-width:430px;width:100%;position:relative}
.splash-avatar img,.gateway-logo img{width:86px;height:86px;object-fit:contain}
.gateway-logo{width:104px;height:104px;border-radius:30px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);box-shadow:0 0 35px rgba(10,132,255,.2)}
.splash-welcome{color:#fff;font-size:15px;margin:-8px 0 20px}
.splash-status{color:var(--text-muted);font-size:12px;margin-top:12px;letter-spacing:.4px}
.gateway-screen{background:radial-gradient(circle at 50% 30%,rgba(10,132,255,.08),#000 72%)}
.gateway-card{width:min(100%,420px);text-align:center}
.gateway-description{color:var(--text-muted);margin-bottom:24px;line-height:1.6}
.gateway-action{margin-top:8px;text-decoration:none;display:flex;align-items:center;justify-content:center}
.gateway-error{display:flex;gap:9px;align-items:center;text-align:left;background:rgba(255,69,58,.1);border:1px solid rgba(255,69,58,.35);color:#ff9f9a;border-radius:14px;padding:12px;margin-bottom:14px;font-size:13px}

/* User bottom menu */
.view-container{padding-bottom:100px}
.bottom-nav{height:78px!important;bottom:12px!important;left:50%!important;transform:translateX(-50%);width:min(94%,620px)!important;padding:8px 10px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:24px!important;background:rgba(18,20,28,.88)!important;box-shadow:0 15px 45px rgba(0,0,0,.5),0 0 25px rgba(10,132,255,.08);gap:4px}
.bottom-nav .nav-item{border-radius:18px;position:relative;min-width:0}
.bottom-nav .nav-item i{font-size:18px;transition:.25s}
.bottom-nav .nav-item span{font-size:10px;margin-top:2px}
.bottom-nav .nav-item.active{color:#fff;background:linear-gradient(135deg,rgba(10,132,255,.22),rgba(94,92,230,.18));box-shadow:inset 0 0 0 1px rgba(10,132,255,.25),0 0 18px rgba(10,132,255,.12)}
.bottom-nav .nav-item.active i{color:var(--primary);transform:translateY(-1px);text-shadow:0 0 12px rgba(10,132,255,.7)}
@media(max-width:480px){.bottom-nav{bottom:8px!important;height:72px!important;border-radius:22px!important}.bottom-nav .nav-item i{font-size:17px}.bottom-nav .nav-item span{font-size:9px}}
@supports(padding:max(0px)){.bottom-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))!important}.admin-bottom-nav{bottom:max(8px,env(safe-area-inset-bottom))}}

/* =========================================================
   FINAL RESPONSIVE SPLASH / ACCESS GATE / DARK USER NAV FIX
   ========================================================= */
html, body { width:100%; min-height:100%; background:#000; }
body { min-height:100dvh; }

.entry-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
    z-index: 500;
}

.entry-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    display: grid !important;
    place-items: center !important;
    align-content: center;
    justify-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow: hidden;
}

.entry-splash {
    background:
        radial-gradient(circle at 50% 42%, rgba(0,242,254,.07) 0%, rgba(0,255,135,.025) 24%, #000 67%),
        #000;
}

.entry-splash .splash-container {
    width: min(92vw, 440px);
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 3;
    transform: translateZ(0);
}

.avatar-ring-wrapper {
    flex: 0 0 auto;
    width: clamp(155px, 31vw, 220px);
    height: clamp(155px, 31vw, 220px);
    margin: 0 auto clamp(18px, 3vh, 30px);
}

.ring-cyan {
    width: 82%;
    height: 82%;
}
.ring-green {
    width: 64%;
    height: 64%;
    border-width: clamp(5px, .8vw, 8px);
}
.splash-avatar {
    width: 55%;
    height: 55%;
}
.splash-avatar img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.splash-title {
    width: 100%;
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.15;
    letter-spacing: clamp(2px, 1vw, 4px);
    margin: 0 0 12px;
    text-align: center;
}

.splash-welcome {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 18px;
    color: rgba(255,255,255,.86);
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.5;
    text-align: center;
}

.splash-loader-track {
    width: min(72vw, 220px);
    height: 5px;
    margin: 0 auto;
}
.splash-status {
    text-align: center;
    width: 100%;
    margin-top: 10px;
    font-size: clamp(10px, 2.8vw, 12px);
}

.gateway-screen {
    background:
        radial-gradient(circle at 50% 35%, rgba(0,242,254,.08), rgba(0,0,0,.94) 62%),
        #000;
}

.gateway-screen > .gateway-card,
.gateway-screen > .login-card-wrapper {
    align-self: center;
    justify-self: center;
    margin: auto;
}

.gateway-card {
    width: min(92vw, 420px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    scrollbar-width: none;
}
.gateway-card::-webkit-scrollbar { display:none; }

.login-card-wrapper {
    width: min(92vw, 420px);
    max-width: 420px;
}
.login-card-inner {
    padding: clamp(25px, 5vw, 40px) clamp(18px, 5vw, 25px);
}
.gateway-logo {
    width: clamp(76px, 20vw, 104px);
    height: clamp(76px, 20vw, 104px);
    border-radius: clamp(22px, 6vw, 30px);
}
.gateway-logo img { width:72%; height:72%; }

/* Dark themed user bottom navigation. No white/light surface. */
.view-container {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(94vw, 620px) !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 7px !important;
    gap: 5px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    background: rgba(7, 10, 14, .94) !important;
    background-color: rgba(7, 10, 14, .94) !important;
    border: 1px solid rgba(0,242,254,.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.035), 0 0 28px rgba(0,242,254,.06) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    overflow: hidden;
    z-index: 1000 !important;
}
.bottom-nav .nav-item {
    flex: 1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    height:100% !important;
    padding: 7px 5px !important;
    border: 1px solid transparent;
    border-radius: 16px !important;
    background: transparent !important;
    color: #747b87 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    -webkit-appearance:none;
    appearance:none;
}
.bottom-nav .nav-item i {
    color: #747b87 !important;
    font-size: 17px !important;
    line-height:1 !important;
    text-shadow:none !important;
}
.bottom-nav .nav-item span {
    color: #747b87 !important;
    font-size: 10px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
}
.bottom-nav .nav-item.active {
    color:#fff !important;
    background: linear-gradient(145deg, rgba(0,242,254,.14), rgba(0,255,135,.07)) !important;
    border-color: rgba(0,242,254,.22) !important;
    box-shadow: inset 0 0 18px rgba(0,242,254,.045), 0 0 15px rgba(0,242,254,.08) !important;
    transform: none !important;
}
.bottom-nav .nav-item.active i { color:var(--primary) !important; text-shadow:0 0 12px rgba(0,242,254,.65) !important; }
.bottom-nav .nav-item.active span { color:#f4f7fb !important; }

@media (max-width: 600px) {
    .entry-screen { padding-left:16px; padding-right:16px; }
    .entry-splash .splash-container { width:min(94vw, 390px); }
    .bottom-nav {
        width: calc(100vw - 20px) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        height:72px !important;
        min-height:72px !important;
        border-radius:20px !important;
    }
    .bottom-nav .nav-item i { font-size:16px !important; }
    .bottom-nav .nav-item span { font-size:9px !important; }
}

@media (max-height: 650px) {
    .avatar-ring-wrapper { width:150px; height:150px; margin-bottom:14px; }
    .splash-title { margin-bottom:8px; }
    .splash-welcome { margin-bottom:12px; }
    .gateway-card .login-card-inner { padding-top:20px; padding-bottom:20px; }
    .gateway-logo { width:70px; height:70px; margin-bottom:8px; }
    .hacker-icon { font-size:3rem !important; margin-bottom:10px !important; }
    .login-subtext { margin-bottom:16px; }
}

@media (min-width: 768px) {
    .entry-screen { padding:32px; }
    .entry-splash .splash-container { width:440px; }
}

@media (min-width: 1200px) {
    .entry-screen { padding:40px; }
    .entry-splash .splash-container { width:460px; }
}


/* RAZA_TOOLKIT_FRONTEND_FINAL_UI_OVERRIDES */

/* ============================================================
   RAZA TOOLKIT — FRONTEND FINAL UI OVERRIDES
   Splash + Key/Guest Gateway + Dashboard Bottom Navigation
   ============================================================ */

:root{
  --rz-nav-bg: rgba(5, 8, 14, .94);
  --rz-nav-border: rgba(0,242,254,.18);
  --rz-nav-active: #00f2fe;
  --rz-nav-muted: rgba(255,255,255,.55);
}

/* ---------- SPLASH: TRUE CENTER ON EVERY SCREEN ---------- */
#view-splash,
.splash-screen,
#splash-screen{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,242,254,.07), transparent 30%),
    #000 !important;
}

#view-splash .splash-container,
.splash-screen .splash-container,
#splash-screen .splash-container{
  width: min(92vw, 460px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

#view-splash .avatar-ring-wrapper,
.splash-screen .avatar-ring-wrapper{
  flex: 0 0 auto !important;
  margin: 0 auto 26px !important;
}

#view-splash .splash-title,
.splash-screen .splash-title{
  width: 100% !important;
  margin: 0 0 18px !important;
  text-align: center !important;
  line-height: 1.15 !important;
}

#view-splash .splash-loader-track,
.splash-screen .splash-loader-track{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 480px){
  #view-splash .avatar-ring-wrapper,
  .splash-screen .avatar-ring-wrapper{
    transform: scale(.82);
    transform-origin: center;
    margin-bottom: 4px !important;
  }
  #view-splash .splash-title,
  .splash-screen .splash-title{
    font-size: clamp(21px, 7vw, 28px) !important;
    letter-spacing: 3px !important;
  }
}

@media (max-height: 620px){
  #view-splash .avatar-ring-wrapper,
  .splash-screen .avatar-ring-wrapper{
    transform: scale(.62);
    margin-bottom: -28px !important;
  }
  #view-splash .splash-title,
  .splash-screen .splash-title{
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
}

/* ---------- KEY / GUEST GATEWAY: TRUE CENTER ---------- */
#view-login,
#view-gateway,
.gateway-screen{
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(110px, calc(env(safe-area-inset-bottom) + 90px))
    max(20px, env(safe-area-inset-left)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
}

#view-login .login-box,
#view-gateway .login-box,
.gateway-screen .login-box{
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Make the gateway card consistently glass/dark. */
#view-login .glass-panel,
#view-gateway .glass-panel,
.gateway-screen .glass-panel{
  background: rgba(10,14,22,.78) !important;
  border-color: rgba(0,242,254,.18) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}

/* ---------- DASHBOARD BOTTOM MENU: DARK THEME ---------- */
.bottom-nav{
  background: rgba(3,6,11,.94) !important;
  background-color: rgba(3,6,11,.94) !important;
  border: 1px solid rgba(0,242,254,.16) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
  box-shadow:
    0 -10px 35px rgba(0,0,0,.42),
    0 0 25px rgba(0,242,254,.04) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  color: #fff !important;
  z-index: 5000 !important;
}

.bottom-nav .nav-item,
.bottom-nav .nav-btn{
  color: var(--rz-nav-muted) !important;
  background: transparent !important;
  border: 0 !important;
  text-shadow: none !important;
  transition: color .2s ease, transform .2s ease, filter .2s ease !important;
}

.bottom-nav .nav-item i,
.bottom-nav .nav-btn i{
  color: inherit !important;
}

.bottom-nav .nav-item.active,
.bottom-nav .nav-btn.active{
  color: var(--rz-nav-active) !important;
  background: rgba(0,242,254,.08) !important;
  text-shadow: 0 0 12px rgba(0,242,254,.45) !important;
}

.bottom-nav .nav-item.active i,
.bottom-nav .nav-btn.active i{
  color: var(--rz-nav-active) !important;
  filter: drop-shadow(0 0 7px rgba(0,242,254,.45)) !important;
}

.bottom-nav .nav-item:active,
.bottom-nav .nav-btn:active{
  transform: scale(.94) !important;
}

/* Keep dashboard content above the fixed/floating navigation. */
#view-main,
.view-container,
.app-content{
  padding-bottom: max(96px, calc(82px + env(safe-area-inset-bottom))) !important;
}

@media (min-width: 700px){
  .bottom-nav{
    width: min(680px, calc(100vw - 32px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 699px){
  .bottom-nav{
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }
}

/* ================================================================
   FINAL FIX v3 — TRUE CENTERING + DASHBOARD DARK BOTTOM NAV
   This block is intentionally last so earlier responsive rules cannot
   override the final positioning.
   ================================================================ */

/* Entry screens: center against the COMPLETE viewport, not a reduced
   content area. Safe-area padding is included inside the box. */
html, body { margin:0 !important; padding:0 !important; }
body { min-height:100dvh !important; background:#000 !important; }

.entry-shell {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100svh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  z-index:99999 !important;
}

#entry-splash.entry-screen,
#entry-gateway.entry-screen {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:20px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  place-items:initial !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#entry-splash.entry-screen.hidden,
#entry-gateway.entry-screen.hidden { display:none !important; }

#entry-splash .splash-container {
  position:relative !important;
  inset:auto !important;
  width:min(92vw,460px) !important;
  max-width:460px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:none !important;
}

#entry-splash .avatar-ring-wrapper {
  margin-left:auto !important;
  margin-right:auto !important;
}

#entry-gateway.entry-screen {
  background:radial-gradient(circle at 50% 35%,rgba(0,242,254,.08),rgba(0,0,0,.96) 68%),#000 !important;
}

#entry-gateway .gateway-card,
#entry-gateway .login-card-wrapper {
  position:relative !important;
  inset:auto !important;
  flex:0 1 auto !important;
  width:min(92vw,420px) !important;
  max-width:420px !important;
  max-height:calc(100% - 20px) !important;
  margin:0 auto !important;
  align-self:center !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
}
#entry-gateway .gateway-card::-webkit-scrollbar,
#entry-gateway .login-card-wrapper::-webkit-scrollbar { display:none !important; }

/* The verification page is NOT a dashboard content area. Give its card
   its own viewport-centred stage. */
.verification-screen {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100svh !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:9990 !important;
  background:radial-gradient(circle at 50% 35%,rgba(0,242,254,.07),#000 70%) !important;
}
.verification-screen > .verification-card {
  position:relative !important;
  width:min(92vw,420px) !important;
  max-width:420px !important;
  max-height:calc(100dvh - 40px) !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
}

/* User dashboard bottom menu: always centered, always dark. */
.view-container > .bottom-nav,
.bottom-nav {
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:min(94vw,620px) !important;
  height:74px !important;
  min-height:74px !important;
  bottom:max(10px,env(safe-area-inset-bottom)) !important;
  margin:0 !important;
  padding:7px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:space-between !important;
  gap:5px !important;
  background:#05080e !important;
  background-color:#05080e !important;
  border:1px solid rgba(0,242,254,.18) !important;
  border-radius:22px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.75),0 0 25px rgba(0,242,254,.06) !important;
  backdrop-filter:blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(140%) !important;
  z-index:9999 !important;
}

.view-container > .bottom-nav .nav-item,
.bottom-nav .nav-item,
.bottom-nav .nav-btn {
  position:relative !important;
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:5px 4px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  border:1px solid transparent !important;
  border-radius:16px !important;
  background:transparent !important;
  color:#747b87 !important;
  text-shadow:none !important;
}
.view-container > .bottom-nav .nav-item i,
.bottom-nav .nav-item i,
.bottom-nav .nav-btn i { color:#747b87 !important; }
.view-container > .bottom-nav .nav-item span,
.bottom-nav .nav-item span { color:#747b87 !important; }

.view-container > .bottom-nav .nav-item.active,
.bottom-nav .nav-item.active,
.bottom-nav .nav-btn.active {
  color:#fff !important;
  background:linear-gradient(145deg,rgba(0,242,254,.14),rgba(0,255,135,.07)) !important;
  border-color:rgba(0,242,254,.22) !important;
  box-shadow:inset 0 0 18px rgba(0,242,254,.04),0 0 15px rgba(0,242,254,.08) !important;
  transform:none !important;
}
.view-container > .bottom-nav .nav-item.active i,
.bottom-nav .nav-item.active i,
.bottom-nav .nav-btn.active i { color:#00f2fe !important; }
.view-container > .bottom-nav .nav-item.active span,
.bottom-nav .nav-item.active span { color:#fff !important; }

@media (max-width:699px) {
  .view-container > .bottom-nav,
  .bottom-nav {
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:calc(100vw - 18px) !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    height:70px !important;
    min-height:70px !important;
    border-radius:20px !important;
  }
}

@media (max-height:650px) {
  #entry-splash .avatar-ring-wrapper { width:145px !important; height:145px !important; margin-bottom:10px !important; }
  #entry-splash .splash-title { margin-bottom:7px !important; }
  #entry-splash .splash-welcome { margin-bottom:10px !important; }
}