* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #0e0e0e; color: #e5e2e1; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Montserrat', sans-serif;} .hardware-accel { transform: translateZ(0); will-change: transform, opacity; } .glass-hull { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } .glass-console { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); box-shadow: 0 0 20px rgba(102, 26, 163, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;} .glass-console-dark { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(40px); box-shadow: 0 0 15px rgba(68, 109, 246, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;} .btn-ignition { background-color: #ff5e00; box-shadow: 0 0 15px rgba(255, 94, 0, 0.5); transition: all 0.3s ease; border:none; cursor:pointer; font-family:'Space Mono'; color:#fff;} .btn-ignition:hover { box-shadow: 0 0 30px rgba(255, 94, 0, 0.8); transform: translateY(-2px); } .btn-hud { border: 1px solid rgba(102, 26, 163, 0.8); background: linear-gradient(180deg, rgba(102, 26, 163, 0.1) 0%, rgba(102, 26, 163, 0.0) 100%); transition: all 0.3s ease; cursor:pointer;} .btn-hud:hover { background: rgba(102, 26, 163, 0.2); box-shadow: 0 0 15px rgba(102, 26, 163, 0.4); } .laser-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(68, 109, 246, 0.8), transparent); width: 100%; } .card-3d-wrapper { perspective: 1000px; } .card-3d-inner { transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; } .card-3d-wrapper:hover .card-3d-inner { transform: rotateY(10deg) rotateX(5deg); box-shadow: -10px 10px 30px rgba(68, 109, 246, 0.3); border-color: rgba(68, 109, 246, 0.8); } .scanline-bg { background-image: repeating-linear-gradient( to bottom, transparent, transparent 1px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px ); } .fade-in-section { opacity: 0; animation: fadeIn 0.8s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .os-loader { position: fixed; inset: 0; background: #0e0e0e; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; } .os-loader.hidden { opacity: 0; pointer-events: none; } .spinner { width: 50px; height: 50px; border: 4px solid rgba(102, 26, 163, 0.2); border-top-color: #dfb7ff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .os-container { padding: 100px 5% 50px; flex: 1; max-width: 1440px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 24px; position:relative; z-index:10;} ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #45474a; border-radius: 4px; } .custom-input { width: 100%; padding: 15px 20px; border-radius: 8px; border: 1px solid rgba(102,26,163,0.5); background: rgba(0,0,0,0.6); color: #fff; outline: none; transition: border-color 0.3s; font-family:'Space Mono', monospace; box-shadow: inset 0 0 10px rgba(0,0,0,0.5);} .custom-input:focus { border-color: #ff4d00; box-shadow: 0 0 10px rgba(255,77,0,0.2); } #map { border-radius: 12px; z-index: 1; border: 1px solid rgba(102,26,163,0.5); box-shadow: 0 0 15px rgba(0,242,255,0.1);} .leaflet-container { font-family: 'Space Mono', monospace; background: #05070a; } .leaflet-popup-content-wrapper { background: rgba(32, 31, 32, 0.95) !important; color: #dfb7ff !important; border: 1px solid #661aa3; border-radius: 8px; } .leaflet-popup-tip { background: rgba(32, 31, 32, 0.95) !important; } .news-modal-fs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #05070a; z-index: 100000; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .news-modal-fs.active { opacity: 1; pointer-events: auto; } .news-modal-header { padding: 15px 5%; background: rgba(32,31,32,0.9); border-bottom: 1px solid rgba(102,26,163,0.5); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 20px rgba(102,26,163,0.2);} .news-modal-close { background: #ff5e00; color: #fff; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-family:'Space Mono'; font-weight: bold;} .news-modal-body { flex: 1; overflow-y: auto; padding: 30px 5%; width: 100%; max-width: 900px; margin: 0 auto; color: #e1e2e7; font-family:'Montserrat', sans-serif;} .news-video-container { width: 100%; aspect-ratio: 16/9; margin-bottom: 30px; background: #000; border-radius: 10px; overflow:hidden;} .news-video-container iframe { width: 100%; height: 100%; border: none;}
.drag-area { border: 2px dashed rgba(255,255,255,0.12); border-radius: 12px; padding: 40px 20px; text-align: center; transition: all 0.3s ease; background: rgba(10,12,16,0.6); cursor: pointer;} .drag-area.active { border-color: #00f2ff; background: rgba(0, 242, 255, 0.05); } .custom-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300f2ff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 20px; }
/* Auth Modal */
.auth-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 100000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.auth-modal.active { opacity: 1; pointer-events: auto; }
.auth-box { background: rgba(10,12,16,0.95); border: 1px solid rgba(102,26,163,0.5); border-radius: 16px; padding: 30px; width: 100%; max-width: 400px; box-shadow: 0 0 30px rgba(102,26,163,0.3); position: relative;}
.auth-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px;}
.auth-tab { flex: 1; text-align: center; padding: 10px; cursor: pointer; font-family: 'Space Mono'; font-size: 14px; color: #888; transition: all 0.3s;}
.auth-tab.active { color: #00f2ff; border-bottom: 2px solid #00f2ff;}