@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

    body {
      margin: 0;
      font-family: 'Play', sans-serif;
      background: #0f0f0f url('https://distribution.faceit-cdn.net/images/3535ce60-c717-48d0-a891-990044f42c46.png') center/cover no-repeat;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding-top: 68px;
    }

    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 68px;
      background: #111;
      border-bottom: 1px solid #222;
      display: flex;
      align-items: center;
      z-index: 100;
    }

    .topbar-content {
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 20px;
    }

    .logo-left img {
      height: 22px;
    }

    .fonssp {
      outline: none;
      white-space: nowrap;
      box-sizing: border-box;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      padding: 0 18px;
      width: auto;
      font-family: Play, sans-serif;
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      color: #f1f1f1;
      background-color: #ff5c16;
      box-shadow: 0 6px 16px rgba(255, 92, 22, .25);
    }

    .nav-links {
      display: flex;
      align-items: center;
      position: relative;
    }

    .logo-left {
      left: 3vw;
      position: absolute;
    }

    .nav-links .link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgb(167, 167, 167);
      text-decoration: none;
      margin: 0 28px 0 0;
      font-weight: 800;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .02em;
      padding: 10px 6px;
      border-radius: 4px;
      transition: color .15s ease;
    }

    .nav-links .link:hover {
      color: #ffffff;
    }

    .nav-links .link-search {
      margin-left: 8px;
    }

    .nav-links .ico {
      width: 24px;
      height: 24px;
      color: #d0d0d0;
    }

    .nav-links .link:hover .ico {
      color: #ffffff;
    }

    .nav-links::after {
      content: "";
      display: block;
      width: 1px;
      height: 28px;
      background: #2a2a2a;
    }

    .nav-buttons a {
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      border-radius: 4px;
      padding: 10px 16px;
      margin-left: 8px;
    }

    .btn-create {
      background: #ff5c16;
      color: #fff;
    }

    .btn-login {
      background: #2b2b2b;
      color: #fff;
    }

    .btn-login:hover,
    .btn-create:hover {
      opacity: 0.9;
    }

    .fonssp:hover,
    .ZgcBE:hover {
      transform: translateY(-1px);
    }

    .card {
      background: #2b2b2b;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
      text-align: center;
      padding: 30px 36px;
      max-width: 440px;
      width: 90%;
    }

    .logo img {
      height: 24px;
      margin-bottom: 24px;
    }

    h1 {
      font-size: 18px;
      font-weight: 700;
      margin: 0 0 24px;
    }

    .meta {
      font-size: 11px;
      text-transform: uppercase;
      color: #bdbdbd;
      margin-bottom: 8px;
      letter-spacing: 0.1em;
    }

    .event {
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }

    .sub {
      font-size: 14px;
      color: #ccc;
      margin-bottom: 26px;
    }

    .btn {
      display: inline-block;
      background: #ff5c16;
      color: #0f0f0f;
      font-weight: 700;
      text-transform: uppercase;
      text-decoration: none;
      padding: 14px 24px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(255, 92, 22, .3);
      transition: transform 0.15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .footer {
      margin-top: 20px;
      font-size: 14px;
      color: #d0d0d0;
    }

    .footer a {
      color: #ff5c16;
      text-decoration: none;
      font-weight: 700;
      border: 1px solid #ff5c16;
      padding: 8px 18px;
      border-radius: 4px;
      margin-left: 8px;
      transition: all 0.15s ease;
    }

    .footer a:hover {
      background: #ff5c16;
      color: #0f0f0f;
    }

    .ZgcBE {
      outline: none;
      white-space: nowrap;
      box-sizing: border-box;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      padding: 0 16px;
      width: auto;
      font-family: Play, sans-serif;
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      color: #f1f1f1;
      background-color: #3a3a3a;
      border: 1px solid #4a4a4a;
    }