*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Poppins', sans-serif;
  background: #fff;
}
.topbar {
  background: #172d45;
  color: #fff;
  font-size: 13px;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar-time { 
  font-weight: 600; 
  letter-spacing: .3px; 
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 auto 0 auto;
}
.topbar-links a {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .2s;
}
.topbar-links a:hover { 
  opacity: .8; 
}
.topbar-links .sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.4);
}
.topbar-links svg { 
  width: 15px; 
  height: 15px; 
  flex-shrink: 0; 
}
.main-header {
  background: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.logo {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -1px;
  user-select: none;
}
.logo span.fast { 
  color: #1a1a1a; 
}
.logo span.win  { 
  color: #e65100; 
}
.logo-underline {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  }
.logo-underline span {
  height: 3px;
  border-radius: 2px;
}
.logo-underline .u1 { 
  background: #43a047; width: 26px; 
}
.logo-underline .u2 { 
  background: #fff;    width: 4px; 
}
.logo-underline .u3 { 
  background: #e53935; width: 10px; 
}
.header-btns { 
  display: flex; 
  gap: 12px; 
}
.btn {
  padding: 9px 28px;
  border: none;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s, transform .1s;
  letter-spacing: .2px;
}
.btn:hover  { 
  filter: brightness(1.1); 
}
.btn:active { 
  transform: scale(.97); 
}
.btn-login { 
  background: #252840; 
  color: #fff; 
}
.btn-register { 
  background: #252840; 
  color: #fff; 
}
.nav-bar {
  background: #172d45;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}
.nav-bar::-webkit-scrollbar { 
  display: none; 
}
.nav-home {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
  transition: background .2s;
}
.nav-home:hover { 
  background: rgba(255,255,255,.12); 
}
.nav-home svg { 
  width: 20px; 
  height: 20px; 
  fill: #fff; 
}
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: nowrap;
}
.nav-links li {
  flex-shrink: 0;
}
.nav-links li a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
  transition: background .2s;
  letter-spacing: .2px;
}
.nav-links li a:hover { 
  background: rgba(255,255,255,.12); 
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  width: 24px;
  height: 2.5px;
  background: #1a1a1a;
  border-radius: 2px;
  transition: .3s;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  padding: 10px 0;
}
.mobile-menu a {
  color: #000;
  text-decoration: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-menu a:hover { 
  background: rgba(255,255,255,.1); 
}
.mobile-menu.open { 
  display: flex; 
}

@media (max-width: 768px) {
  .topbar { font-size: 11px; }
  .topbar-links { gap: 10px; }
  .logo { font-size: 22px; }
  .btn  { padding: 8px 18px; font-size: 13px; }
  .nav-bar { display: none; }
  .hamburger { display: flex; }
  .main-header { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .topbar { display: none; }
  .topbar { justify-content: center; }
}

.error{
  color: red;
  font-size: 14px;
}
.success{
  color: green;
  font-size: 15px;
  margin-top: 10px;
}