*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --orange: #F59E0B; --gold: #D97706; --dark: #0A0A0A; --darker: #050505;
      --gray: #1A1A1A; --light-gray: #2A2A2A; --green: #22C55E; --red: #EF4444;
      --blue: #3B82F6; --purple: #A855F7; --yellow: #EAB308;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Roboto', sans-serif; background-color: var(--darker);
      color: #e5e5e5; overflow-x: hidden; min-height: 100vh;
      scrollbar-width: thin; scrollbar-color: var(--orange) var(--gray);
    }
    body::-webkit-scrollbar { width: 8px; }
    body::-webkit-scrollbar-track { background: var(--gray); }
    body::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 4px; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; outline: none; font-family: inherit; }
    input, select { font-family: inherit; }
    .text-gta { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
    .bg-pattern {
      background-image:
        radial-gradient(circle at 20% 50%, rgba(245,158,11,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245,158,11,0.02) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(217,119,6,0.02) 0%, transparent 50%);
    }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 5px rgba(245,158,11,0.3); }
      50% { box-shadow: 0 0 20px rgba(245,158,11,0.6); }
    }
    @keyframes slide-up {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    .animate-slide-up { animation: slide-up 0.6s ease-out forwards; }
    .animate-fade-in { animation: fade-in 0.4s ease-out forwards; }
    .glow-orange { animation: pulse-glow 2s infinite; }

    .scanline { position: relative; }
    .scanline::after {
      content: ''; position: absolute; inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
      pointer-events: none; border-radius: inherit;
    }

    /* NAVBAR */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      background: rgba(10,10,10,0.95); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(245,158,11,0.15);
	  display: unset;
    }
    .navbar-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 64px; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
    }
    .logo { display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .logo-icon {
      width: 40px; height: 40px; background: linear-gradient(135deg, var(--orange), var(--gold));
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      color: black; font-size: 18px;
    }
    .logo-text h1 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: var(--orange); line-height: 1; letter-spacing: 0.05em; }
    .logo-text p { font-size: 10px; color: #6b7280; letter-spacing: 0.15em; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: 4px; }
    .nav-link {
      display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 10px;
      font-size: 14px; font-weight: 500; color: #9ca3af; background: transparent;
      border: 1px solid transparent; transition: all 0.2s;
    }
    .nav-link:hover { color: white; background: rgba(255,255,255,0.05); }
    .nav-link.active { background: rgba(245,158,11,0.1); color: var(--orange); border-color: rgba(245,158,11,0.2); }
    .nav-auth { display: flex; align-items: center; gap: 12px; }
    /*.btn-login {
      padding: 6px 18px; background: linear-gradient(135deg, var(--orange), var(--gold));
      color: black; font-weight: 600; border-radius: 10px; font-size: 14px; transition: opacity 0.2s;
    }
    .btn-login:hover { opacity: 0.9; }*/
	.btn-login {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 6px 18px;
	background: linear-gradient(135deg, var(--orange), var(--gold));
	color: black;
	font-weight: 600;
	font-size: 14px;
	border-radius: 10px;

	text-decoration: none; /* убираем подчеркивание для <a> */
	border: none;           /* убираем рамку для <button> */
	cursor: pointer;

	transition: opacity 0.2s;
	}

	.btn-login:hover {
	opacity: 0.9;
	text-decoration: none; /* на случай <a> */
	color: black;           /* на случай <a> */
	}
    .user-badge {
      display: flex; align-items: center; gap: 8px; padding: 6px 14px;
      background: var(--gray); border-radius: 10px; border: 1px solid var(--light-gray);
    }
    .user-badge i { color: var(--orange); }
    .user-badge span { font-size: 14px; color: #d1d5db; }
    .btn-logout {
      display: flex; align-items: center; gap: 8px; padding: 6px 14px;
      background: rgba(239,68,68,0.1); color: var(--red); border-radius: 10px;
      border: 1px solid rgba(239,68,68,0.2); font-size: 14px; transition: background 0.2s;
    }
    .btn-logout:hover { background: rgba(239,68,68,0.2); }
    .mobile-toggle { display: none; background: none; color: #9ca3af; font-size: 24px; }
    .mobile-menu { display: none; background: var(--dark); border-top: 1px solid rgba(245,158,11,0.1); padding: 12px 16px; }
    .mobile-menu.open { display: block; }
    .mobile-menu a, .mobile-menu button {
      width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
      border-radius: 10px; font-size: 14px; color: #9ca3af; background: transparent;
      transition: all 0.2s; margin-bottom: 4px; text-decoration: none;
    }
    .mobile-menu a:hover, .mobile-menu button:hover { color: white; }
    .mobile-menu a.active { background: rgba(245,158,11,0.1); color: var(--orange); }
    @media (max-width: 768px) {
      .nav-links, .nav-auth { display: none; }
      .mobile-toggle { display: block; }
    }

    /* HERO */
    .hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; padding-top: 64px; }
    .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--dark), var(--darker), var(--dark)); }
    .hero-glow1 { position: absolute; top: 0; right: 0; width: 600px; height: 600px; background: rgba(245,158,11,0.05); border-radius: 50%; filter: blur(120px); }
    .hero-glow2 { position: absolute; bottom: 0; left: 0; width: 400px; height: 400px; background: rgba(217,119,6,0.03); border-radius: 50%; filter: blur(100px); }
    .hero-grid {
      position: absolute; inset: 0; opacity: 0.03;
      background-image: linear-gradient(rgba(245,158,11,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(245,158,11,0.5) 1px, transparent 1px);
      background-size: 50px 50px;
    }
    .hero-content {
      position: relative; max-width: 1280px; margin: 0 auto; padding: 5rem 1.5rem; width: 100%;
      display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    }
    .hero-left { animation: slide-up 0.6s ease-out; }
    .server-status {
      display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
      background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2);
      border-radius: 50px; margin-bottom: 1.5rem;
    }
    .status-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse-dot 1.5s infinite; }
    .server-status span { font-size: 12px; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
    .server-status.offline { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); }
    .server-status.offline .status-dot { background: #ef4444; animation: none; }
    .server-status.offline span { color: #ef4444; }
    .hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 8vw, 6rem); color: white; line-height: 0.95; letter-spacing: 0.05em; }
    .hero-title span { color: var(--orange); }
    .hero-subtitle { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.5rem, 4vw, 3rem); color: #6b7280; line-height: 1; margin-top: 4px; letter-spacing: 0.05em; }
    .hero-desc { color: #9ca3af; font-size: 1.1rem; max-width: 500px; line-height: 1.7; margin: 2rem 0; }
    .hero-desc span { color: var(--orange); }
    .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
    /*.btn-primary {
      display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
      background: linear-gradient(135deg, var(--orange), var(--gold)); color: black;
      font-weight: 700; border-radius: 12px; font-size: 14px; text-transform: uppercase;
      letter-spacing: 0.1em; transition: all 0.2s;
    }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn-primary i { transition: transform 0.2s; }
    .btn-primary:hover i { transform: translateX(4px); }*/
	.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;

	background: linear-gradient(135deg, var(--orange), var(--gold));
	color: black;

	font-weight: 700;
	border-radius: 12px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;

	text-decoration: none; /* убирает подчеркивание */
	cursor: pointer;

	transition: all 0.2s;
	}

	/* убираем стандартные стили ссылок */
	.btn-primary:link,
	.btn-primary:visited {
	color: black;
	text-decoration: none;
	}

	.btn-primary:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	text-decoration: none;
	color: black;
	}

	.btn-primary i {
	transition: transform 0.2s;
	}

	.btn-primary:hover i {
	transform: translateX(4px);
	}
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
      background: var(--gray); border: 1px solid var(--light-gray); color: #d1d5db;
      border-radius: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.2s;
    }
    .btn-secondary:hover { border-color: rgba(245,158,11,0.3); }
    .server-ip { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(26,26,26,0.5); border: 1px solid var(--light-gray); border-radius: 12px; }
    .server-ip i { color: var(--orange); font-size: 1.25rem; }
    .server-ip-info p:first-child { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em; }
    .server-ip-info p:last-child { color: white; font-family: monospace; font-size: 1.1rem; }
    .btn-copy {
      margin-left: auto; padding: 6px 14px; background: rgba(245,158,11,0.1); color: var(--orange);
      border: 1px solid rgba(245,158,11,0.2); border-radius: 8px; font-size: 12px; font-weight: 500; transition: all 0.2s;
    }
    .btn-copy:hover { background: rgba(245,158,11,0.2); }
    .hero-right { animation: slide-up 0.6s ease-out 0.2s both; }
    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .stat-card { padding: 1.5rem; border-radius: 1rem; border: 1px solid; backdrop-filter: blur(4px); }
    .stat-card.orange { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05)); border-color: rgba(245,158,11,0.2); }
    .stat-card.gold { background: linear-gradient(135deg, rgba(217,119,6,0.1), rgba(217,119,6,0.05)); border-color: rgba(217,119,6,0.2); }
    .stat-card.blue { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05)); border-color: rgba(59,130,246,0.2); }
    .stat-card.green { background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.05)); border-color: rgba(34,197,94,0.2); }
    .stat-card.red { background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.05)); border-color: rgba(239,68,68,0.2); }
    .stat-card .icon { font-size: 1.5rem; margin-bottom: 0.75rem; opacity: 0.7; }
    .stat-card.orange .icon { color: var(--orange); }
    .stat-card.gold .icon { color: var(--gold); }
    .stat-card.blue .icon { color: var(--blue); }
    .stat-card.green .icon { color: var(--green); }
    .stat-card.red .icon { color: #ef4444; }
    .stat-card .value { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.5rem, 3vw, 2.5rem); color: white; letter-spacing: 0.05em; }
    .stat-card .label { color: #6b7280; font-size: 14px; margin-top: 4px; }
    @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; } .hero-right { max-width: 500px; } }
    @media (max-width: 640px) { .stats-grid { gap: 0.75rem; } .stat-card { padding: 1rem; } }

    /* SECTIONS */
    .section { padding: 6rem 0; position: relative; }
    .section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 4vw, 3rem); color: white; text-align: center; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
    .section-title span { color: var(--orange); }
    .section-subtitle { color: #6b7280; text-align: center; max-width: 600px; margin: 0 auto 3rem; }
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .feature-card { padding: 1.5rem; background: rgba(26,26,26,0.3); border: 1px solid var(--light-gray); border-radius: 1rem; transition: all 0.3s; }
    .feature-card:hover { border-color: rgba(245,158,11,0.2); transform: translateY(-4px); }
    .feature-icon {
      width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center;
      justify-content: center; color: white; font-size: 1.5rem; margin-bottom: 1.25rem; transition: transform 0.3s;
    }
    .feature-card:hover .feature-icon { transform: scale(1.1); }
    .feature-icon.orange { background: linear-gradient(135deg, #f97316, #d97706); }
    .feature-icon.blue { background: linear-gradient(135deg, #3b82f6, #0891b2); }
    .feature-icon.green { background: linear-gradient(135deg, #22c55e, #059669); }
    .feature-icon.red { background: linear-gradient(135deg, #ef4444, #e11d48); }
    .feature-icon.purple { background: linear-gradient(135deg, #a855f7, #7c3aed); }
    .feature-icon.yellow { background: linear-gradient(135deg, #eab308, #f97316); }
    .feature-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: white; margin-bottom: 0.5rem; letter-spacing: 0.05em; }
    .feature-card p { color: #6b7280; font-size: 14px; line-height: 1.6; }
    @media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

    .section-dark { background: rgba(10,10,10,0.5); }
    .players-list { max-width: 800px; margin: 0 auto; }
    .player-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(26,26,26,0.5); border: 1px solid var(--light-gray); border-radius: 12px; margin-bottom: 0.75rem; transition: all 0.2s; }
    .player-row:hover { border-color: rgba(245,158,11,0.2); }
    .player-rank { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
    .player-rank.gold { background: rgba(234,179,8,0.1); color: #eab308; }
    .player-rank.silver { background: rgba(156,163,175,0.1); color: #9ca3af; }
    .player-rank.bronze { background: rgba(249,115,22,0.1); color: #f97316; }
    .player-rank.normal { background: var(--light-gray); color: #6b7280; }
    .player-info { flex: 1; min-width: 0; }
    .player-info .name { color: white; font-weight: 500; }
    .player-stats { display: flex; align-items: center; gap: 2rem; }
    .player-stat { text-align: center; }
    .player-stat .stat-label { font-size: 12px; color: #6b7280; }
    .player-stat .stat-value { color: white; font-weight: 500; font-size: 14px; }
    .player-stat .stat-value.green { color: var(--green); }
    .player-stat .stat-value.orange { color: var(--orange); }
    .player-row .star { color: #4b5563; font-size: 14px; transition: color 0.2s; }
    .player-row:hover .star { color: var(--orange); }
    @media (max-width: 640px) { .player-stats { display: none; } }

    .cta { padding: 6rem 0; position: relative; overflow: hidden; text-align: center; }
    .cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,158,11,0.05), rgba(217,119,6,0.05)); }
    .cta-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); color: white; margin-bottom: 1.5rem; letter-spacing: 0.05em; position: relative; }
    .cta-title span { color: var(--orange); }
    .cta p { color: #9ca3af; font-size: 1.1rem; max-width: 600px; margin: 0 auto 2.5rem; position: relative; }
    .cta .btn-primary { position: relative; }
    .footer { padding: 2rem 0; border-top: 1px solid rgba(245,158,11,0.1); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: revert-layer; }
    .footer-inner p { color: #4b5563; font-size: 14px; margin-bottom: 0rem; }
    .footer-links { display: flex; gap: 1.5rem; }
    .footer-links a { color: #6b7280; font-size: 14px; transition: color 0.2s; }
    .footer-links a:hover { color: var(--orange); }

    /* LOGIN MODAL */
    .modal-overlay { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 1rem; }
    .modal-overlay.open { display: flex; animation: fade-in 0.3s; }
    .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); }
    .modal-box { position: relative; width: 100%; max-width: 440px; background: var(--dark); border: 1px solid rgba(245,158,11,0.2); border-radius: 1rem; box-shadow: 0 25px 50px rgba(245,158,11,0.1); animation: slide-up 0.4s ease-out; }
    .modal-header { padding: 1.5rem; border-bottom: 1px solid rgba(245,158,11,0.1); display: flex; align-items: center; gap: 12px; position: relative; }
    .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; color: #6b7280; font-size: 1.25rem; transition: color 0.2s; }
    .modal-close:hover { color: white; }
    .modal-logo { width: 48px; height: 48px; background: linear-gradient(135deg, var(--orange), var(--gold)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: black; font-size: 1.5rem; }
    .modal-header-text h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--orange); letter-spacing: 0.05em; }
    .modal-header-text p { font-size: 12px; color: #6b7280; }
    .modal-body { padding: 1.5rem; }
    .form-error { padding: 10px 16px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: 10px; color: var(--red); font-size: 14px; margin-bottom: 1rem; display: none; }
    .form-error.show { display: block; }
    .form-group { margin-bottom: 1rem; }
    .form-label { display: block; font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 6px; }
    .form-input-wrap { position: relative; }
    .form-input-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 14px; }
    .form-input { width: 100%; padding: 12px 16px 12px 40px; background: var(--gray); border: 1px solid var(--light-gray); border-radius: 10px; color: white; font-size: 14px; transition: all 0.2s; outline: none; }
    .form-input::placeholder { color: #4b5563; }
    .form-input:focus { border-color: rgba(245,158,11,0.5); box-shadow: 0 0 0 2px rgba(245,158,11,0.1); }
    .btn-toggle-pw { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; color: #6b7280; font-size: 14px; }
    .btn-toggle-pw:hover { color: #d1d5db; }
    .btn-submit { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--orange), var(--gold)); color: black; font-weight: 700; border-radius: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; transition: opacity 0.2s; margin-bottom: 1rem; }
    .btn-submit:hover { opacity: 0.9; }
    .btn-switch-mode { display: block; width: 100%; background: none; color: #6b7280; font-size: 14px; text-align: center; transition: color 0.2s; }
    .btn-switch-mode:hover { color: var(--orange); }
    .form-group-email { display: none; }
    .form-group-email.show { display: block; animation: slide-up 0.3s; }

    /* PAGES */
    .page { display: none; }
    .page.active { display: block; }

    /* UCP */
    .ucp { padding-top: 64px; min-height: 100vh; }
    .ucp-inner { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem; }
    .ucp-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; animation: slide-up 0.6s ease-out; }
    .ucp-user { display: flex; align-items: center; gap: 1rem; }
    .ucp-avatar { width: 64px; height: 64px; background: linear-gradient(135deg, var(--orange), var(--gold)); border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: black; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; }
    .ucp-user-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; color: white; letter-spacing: 0.05em; }
    .ucp-user-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
    .ucp-user-meta .online { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--green); }
    .ucp-user-meta .online .dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse-dot 1.5s infinite; }
    .ucp-user-meta .uid { font-size: 12px; color: #6b7280; }
    .ucp-user-meta .vip { padding: 2px 10px; background: rgba(245,158,11,0.1); color: var(--orange); font-size: 12px; border-radius: 50px; border: 1px solid rgba(245,158,11,0.2); }
    .ucp-actions { display: flex; align-items: center; gap: 12px; }
    .btn-notif { position: relative; padding: 10px; background: var(--gray); border: 1px solid var(--light-gray); border-radius: 12px; color: #9ca3af; font-size: 18px; transition: color 0.2s; }
    .btn-notif:hover { color: white; }
    .notif-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--red); border-radius: 50%; font-size: 10px; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; }
    .ucp-tabs { display: flex; gap: 4px; margin-bottom: 2rem; overflow-x: auto; padding-bottom: 8px; animation: slide-up 0.6s ease-out 0.1s both; }
    .ucp-tabs::-webkit-scrollbar { height: 4px; }
    .ucp-tabs::-webkit-scrollbar-thumb { background: var(--light-gray); border-radius: 4px; }
    .ucp-tab { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #6b7280; background: transparent; border: 1px solid transparent; transition: all 0.2s; }
    .ucp-tab:hover { color: white; background: var(--gray); }
    .ucp-tab.active { background: rgba(245,158,11,0.1); color: var(--orange); border-color: rgba(245,158,11,0.2); }
    .ucp-content > div { display: none; }
    .ucp-content > div.active { display: block; animation: fade-in 0.3s; }
    .ucp-card { padding: 1.5rem; background: rgba(26,26,26,0.5); border: 1px solid var(--light-gray); border-radius: 1rem; }
    .ucp-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: white; display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; letter-spacing: 0.05em; }
    .ucp-card-title i { color: var(--orange); }

    .quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
    .quick-stat { padding: 1rem; border-radius: 1rem; border: 1px solid; }
    .quick-stat.orange { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05)); border-color: rgba(245,158,11,0.2); }
    .quick-stat.green { background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.05)); border-color: rgba(34,197,94,0.2); }
    .quick-stat.red { background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.05)); border-color: rgba(239,68,68,0.2); }
    .quick-stat.blue { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05)); border-color: rgba(59,130,246,0.2); }
    .quick-stat .qs-header { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 12px; margin-bottom: 8px; }
    .quick-stat .qs-value { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: white; letter-spacing: 0.05em; }
    @media (max-width: 768px) { .quick-stats { grid-template-columns: repeat(2, 1fr); } }

    .info-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(42,42,42,0.3); }
    .info-row:last-child { border-bottom: none; }
    .info-row .label { color: #6b7280; font-size: 14px; }
    .info-row .value { color: white; font-size: 14px; font-weight: 500; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .grid-23 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
    .col-span-2 { grid-column: span 2; }
    @media (max-width: 1024px) { .grid-23 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .col-span-2 { grid-column: span 1; } }
    .gap-6 { gap: 1.5rem; }
    .mb-6 { margin-bottom: 1.5rem; }

    .skill-bar { margin-bottom: 12px; }
    .skill-bar-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
    .skill-bar-header .skill-name { color: #9ca3af; }
    .skill-bar-header .skill-level { color: var(--orange); }
    .skill-bar-track { height: 8px; background: var(--dark); border-radius: 50px; overflow: hidden; }
    .skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); border-radius: 50px; transition: width 1s ease-out; }

    .stat-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .stat-item { padding: 12px; background: rgba(5,5,5,0.5); border-radius: 12px; text-align: center; }
    .stat-item .si-header { display: flex; align-items: center; justify-content: center; gap: 6px; color: #6b7280; font-size: 12px; margin-bottom: 4px; }
    .stat-item .si-value { font-size: 1.1rem; font-weight: 700; color: white; }
    .stat-item .si-value.highlight { color: var(--orange); }
    @media (max-width: 640px) { .stat-items { grid-template-columns: repeat(2, 1fr); } }

    .notif-item { padding: 12px; border-radius: 12px; border: 1px solid; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 0.75rem; }
    .notif-item.success { border-color: rgba(34,197,94,0.2); background: rgba(34,197,94,0.05); }
    .notif-item.warning { border-color: rgba(234,179,8,0.2); background: rgba(234,179,8,0.05); }
    .notif-item.info { border-color: rgba(59,130,246,0.2); background: rgba(59,130,246,0.05); }
    .notif-item .notif-text { color: white; font-size: 14px; }
    .notif-item .notif-time { color: #4b5563; font-size: 12px; margin-top: 2px; }

    .activity-item { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 0.75rem; }
    .activity-item .time { color: #4b5563; font-family: monospace; font-size: 12px; min-width: 40px; }
    .activity-item .text { color: #9ca3af; }

    .quick-action { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px; background: rgba(5,5,5,0.5); border-radius: 12px; color: #9ca3af; font-size: 14px; transition: all 0.2s; margin-bottom: 8px; }
    .quick-action:hover { background: rgba(42,42,42,0.5); color: white; }
    .quick-action .qa-left { display: flex; align-items: center; gap: 8px; }
    .quick-action:hover .qa-arrow { color: var(--orange); }
    .qa-arrow { color: #4b5563; transition: color 0.2s; }

    .inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
    .inv-slot { padding: 12px; background: var(--dark); border: 1px solid var(--light-gray); border-radius: 12px; text-align: center; transition: border-color 0.2s; }
    .inv-slot:hover { border-color: rgba(245,158,11,0.2); }
    .inv-slot .inv-name { color: white; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inv-slot .inv-count { color: #6b7280; font-size: 12px; margin-top: 4px; }
    @media (max-width: 1024px) { .inventory-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 640px) { .inventory-grid { grid-template-columns: repeat(3, 1fr); } }

    .vehicle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .vehicle-card { padding: 1.25rem; background: rgba(26,26,26,0.5); border: 1px solid var(--light-gray); border-radius: 1rem; transition: all 0.2s; }
    .vehicle-card:hover { border-color: rgba(245,158,11,0.2); }
    .vehicle-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
    .vehicle-header h4 { color: white; font-size: 1.1rem; font-weight: 500; }
    .vehicle-header .plate { color: #6b7280; font-size: 14px; font-family: monospace; }
    .vehicle-header i { color: rgba(245,158,11,0.4); font-size: 1.5rem; transition: color 0.2s; }
    .vehicle-card:hover .vehicle-header i { color: var(--orange); }
    .progress-bar { margin-bottom: 12px; }
    .progress-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
    .progress-header .p-label { color: #6b7280; }
    .progress-track { height: 6px; background: var(--dark); border-radius: 50px; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 50px; transition: width 0.8s ease-out; }
    .progress-fill.green { background: var(--green); }
    .progress-fill.yellow { background: var(--yellow); }
    .progress-fill.red { background: var(--red); }
    .vehicle-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
    .vehicle-meta span { display: flex; align-items: center; gap: 6px; color: #6b7280; }
    .vehicle-meta span.insured { color: var(--green); }
    .vehicle-meta span.no-insurance { color: var(--red); }
    @media (max-width: 1024px) { .vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .vehicle-grid { grid-template-columns: 1fr; } }

    .prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .prop-card { padding: 1.5rem; background: rgba(26,26,26,0.5); border: 1px solid var(--light-gray); border-radius: 1rem; }
    .prop-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
    .prop-header h4 { color: white; font-size: 1.1rem; font-weight: 500; }
    .prop-header .addr { color: #6b7280; font-size: 14px; }
    @media (max-width: 768px) { .prop-grid { grid-template-columns: 1fr; } }

    .faction-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
    .faction-logo { width: 64px; height: 64px; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 2rem; }
    .faction-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: white; letter-spacing: 0.05em; }
    .faction-type { color: var(--blue); font-size: 14px; }
    .member-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(5,5,5,0.5); border-radius: 12px; margin-bottom: 8px; }
    .member-dot { width: 8px; height: 8px; border-radius: 50%; }
    .member-dot.on { background: var(--green); }
    .member-dot.off { background: #4b5563; }
    .member-name { color: white; font-size: 14px; flex: 1; }
    .member-rank { color: #6b7280; font-size: 12px; }

    .balance-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
    .balance-card { padding: 1.5rem; border-radius: 1rem; border: 1px solid; }
    .balance-card.green { background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.05)); border-color: rgba(34,197,94,0.2); }
    .balance-card.blue { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05)); border-color: rgba(59,130,246,0.2); }
    .balance-card.orange { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05)); border-color: rgba(245,158,11,0.2); }
    .balance-card i { font-size: 1.5rem; margin-bottom: 12px; }
    .balance-card.green i { color: var(--green); }
    .balance-card.blue i { color: var(--blue); }
    .balance-card.orange i { color: var(--orange); }
    .balance-card .bc-label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em; }
    .balance-card .bc-value { font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; color: white; margin-top: 4px; letter-spacing: 0.05em; }
    @media (max-width: 768px) { .balance-cards { grid-template-columns: 1fr; } }

    .tx-item { display: flex; align-items: center; gap: 1rem; padding: 12px; background: rgba(5,5,5,0.5); border-radius: 12px; margin-bottom: 8px; }
    .tx-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .tx-icon.income { background: rgba(34,197,94,0.1); color: var(--green); }
    .tx-icon.expense { background: rgba(239,68,68,0.1); color: var(--red); }
    .tx-info { flex: 1; }
    .tx-info .tx-desc { color: white; font-size: 14px; }
    .tx-info .tx-time { color: #4b5563; font-size: 12px; }
    .tx-amount { font-family: monospace; font-size: 14px; font-weight: 500; }
    .tx-amount.income { color: var(--green); }
    .tx-amount.expense { color: var(--red); }

    .settings-section { max-width: 700px; }
    .setting-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: rgba(5,5,5,0.5); border-radius: 12px; margin-bottom: 1rem; }
    .setting-left { display: flex; align-items: center; gap: 12px; }
    .setting-left i { color: #6b7280; font-size: 1.25rem; }
    .setting-left .s-title { color: white; font-size: 14px; }
    .setting-left .s-desc { color: #4b5563; font-size: 12px; }
    .btn-setting { padding: 8px 18px; background: rgba(245,158,11,0.1); color: var(--orange); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px; font-size: 14px; transition: background 0.2s; }
    .btn-setting:hover { background: rgba(245,158,11,0.2); }
    .setting-verified { display: flex; align-items: center; gap: 4px; color: var(--green); font-size: 12px; }
    .toggle { width: 44px; height: 24px; border-radius: 50px; background: var(--light-gray); position: relative; cursor: pointer; transition: background 0.3s; flex-shrink: 0; }
    .toggle.on { background: var(--orange); }
    .toggle .toggle-dot { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.3s; }
    .toggle.on .toggle-dot { left: 22px; }
    .select-lang { background: var(--gray); border: 1px solid var(--light-gray); border-radius: 8px; padding: 6px 12px; color: white; font-size: 14px; outline: none; }
    .select-lang:focus { border-color: rgba(245,158,11,0.5); }
    .danger-zone { padding: 1.5rem; background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.2); border-radius: 1rem; }
    .danger-zone h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: var(--red); display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; letter-spacing: 0.05em; }
    .danger-zone p { color: #6b7280; font-size: 14px; margin-bottom: 1rem; }
    .danger-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-danger { padding: 8px 18px; background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; font-size: 14px; transition: background 0.2s; }
    .btn-danger:hover { background: rgba(239,68,68,0.2); }
    .skin-preview { width: 128px; height: 160px; background: var(--dark); border: 2px solid rgba(245,158,11,0.2); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .skin-preview i { font-size: 3rem; color: rgba(245,158,11,0.3); }
    .skin-preview p { font-size: 12px; color: #4b5563; margin-top: 8px; }
    @media (max-width: 640px) { .hide-mobile { display: none; } }

	.logo {
	height: 100px;
	width: auto;
	}

	.cookie-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem 1.5rem;
		background: rgba(15, 15, 15, 0.98);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
	}
	.cookie-bar-text {
		font-family: 'ProximaNova', sans-serif;
		font-size: 0.9375rem;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.5;
	}
	.cookie-bar-link {
		color: var(--accent-color) !important;
		text-decoration: underline !important;
	}
	.cookie-bar-link:hover {
		color: #f5b540 !important;
	}
	.cookie-bar-btn {
		flex-shrink: 0;
		padding: 0.6rem 1.5rem;
		font-family: 'ProximaNova', sans-serif;
		font-size: 0.9375rem;
		font-weight: 700;
		color: #0a0a0a;
		background: var(--accent-color);
		border: none;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.2s ease, transform 0.15s ease;
	}
	.cookie-bar-btn:hover {
		background: #e5a028;
		transform: translateY(-1px);
	}

.footer-legal {
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.8125rem;
}
.footer-legal a:hover {
    color: var(--accent-color);
}
.footer-copy {
    font-family: 'ProximaNova', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
}