* {
            box-sizing: border-box;
          }

          html,
          body {
            margin: 0;
            min-height: 100%;
          }

          body {
            font-family:
              Arial,
              Helvetica,
              sans-serif;

            background: #101010;
            color: #ffffff;

            display: flex;
            flex-direction: column;
            min-height: 100vh;
          }

          .hero {
            width: 100%;
            padding: 20px 0;

            background:
              linear-gradient(
                135deg,
                #181818,
                #262626
              );

            display: flex;
            align-items: center;
            justify-content: center;

            overflow: hidden;
            position: relative;
          }

          .hero-inner {
            width: min(
              1400px,
              calc(100% - 40px)
            );

            border-radius: 18px;

            background:
              linear-gradient(
                135deg,
                #202020,
                #151515
              );

            display: flex;
            align-items: center;
            justify-content: center;

            text-align: center;

            padding: 0;
          }

          .hero-banner-link {
            display: block;
            width: 100%;
          }

          .hero-banner-image {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            border-radius: 18px;
            background: #111111;
          }

          .hero-placeholder {
            color: #777;
          }

          .hero-placeholder strong {
            display: block;

            color: #ffffff;

            font-size: clamp(
              28px,
              5vw,
              54px
            );

            margin-bottom: 12px;
          }

          .content {
            flex: 1;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 80px 20px;
          }

          .home-intro {
            width: min(
              1000px,
              100%
            );

            text-align: center;
          }

          .home-intro h1 {
            margin: 0 0 20px;

            font-size: clamp(
              36px,
              6vw,
              64px
            );

            line-height: 1.05;
          }

          .home-intro-lead {
            width: min(
              760px,
              100%
            );

            margin: 0 auto;

            color: #b5b5b5;

            font-size: clamp(
              18px,
              2.2vw,
              22px
            );

            line-height: 1.6;
          }

          .home-actions {
            display: flex;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;

            margin-top: 32px;
          }

          .home-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-width: 170px;

            padding: 13px 22px;

            border-radius: 10px;

            border: 1px solid #3b3b3b;

            background: #202020;
            color: #ffffff;

            text-decoration: none;
            font-weight: bold;
          }

          .home-action-primary {
            background: #ffffff;
            color: #111111;
            border-color: #ffffff;
          }

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

          .home-intro-secondary {
            width: min(720px,100%);
            margin: 20px auto 0;
            color: #8f9baa;
            font-size: 16px;
            line-height: 1.65;
          }

          .home-beta-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 22px;
            padding: 7px 14px;
            border: 1px solid rgba(68,210,255,.48);
            border-radius: 999px;
            background: rgba(36,113,160,.12);
            color: #8de6ff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .16em;
            box-shadow: 0 0 22px rgba(39,190,255,.08);
          }

          .home-intro-note {
            width: min(650px,100%);
            margin: 28px auto 0;
            padding: 13px 18px;
            border: 1px solid #293444;
            border-radius: 12px;
            background: rgba(18,26,38,.72);
            color: #9ba8b7;
            font-size: 14px;
            line-height: 1.55;
          }

          footer {
            background: #181818;

            border-top:
              1px solid #2b2b2b;

            padding: 28px 20px;
          }

          .footer-inner {
            width: min(
              1200px,
              100%
            );

            margin: 0 auto;

            display: flex;
            gap: 20px;

            justify-content:
              space-between;

            align-items: center;

            flex-wrap: wrap;
          }

          .copyright {
            color: #888;
            font-size: 14px;
          }

          .footer-links {
            display: flex;
            gap: 18px;

            flex-wrap: wrap;
          }

          .footer-links a {
            color: #bbbbbb;
            text-decoration: none;
            font-size: 14px;
          }

          .footer-links a:hover {
            color: #ffffff;
          }

          .nav-logout {
            margin: 0;
          }

          .nav-logout button {
            border: 0;
            padding: 0;

            background: transparent;
            color: #bbbbbb;

            font:
              inherit;

            font-size: 14px;

            cursor: pointer;
          }

          .nav-logout button:hover {
            color: #ffffff;
          }

          .dj-search {
            width: 100%;
            margin-top: 22px;
          }

          .dj-search-label {
            color: #aaaaaa;
            font-size: 14px;
            margin-bottom: 8px;
          }

          .dj-search-row {
            display: flex;
            gap: 10px;
            max-width: 520px;
          }

          .dj-search input {
            flex: 1;

            border: 1px solid #333;
            background: #101010;
            color: #ffffff;

            padding: 12px 14px;
            border-radius: 10px;

            font-size: 15px;
          }

          .dj-search button {
            border: 0;
            border-radius: 10px;

            padding: 12px 18px;

            background: #ffffff;
            color: #111111;

            font-weight: bold;
            cursor: pointer;
          }

          .dj-results {
            margin-top: 10px;
            max-width: 520px;
          }

          .dj-result {
            display: block;

            padding: 10px 12px;

            color: #ffffff;
            text-decoration: none;

            border-radius: 8px;

            background: #222222;

            margin-bottom: 6px;
          }

          .dj-result:hover {
            background: #2d2d2d;
          }

          .dj-result small {
            display: block;
            color: #888888;
            margin-top: 3px;
          }

          @media (max-width:650px) {
            body{overflow-x:hidden}
            .hero{padding:10px 0}
            .hero-inner{width:calc(100% - 20px);border-radius:12px}
            .hero-banner-image{border-radius:12px}
            .content{padding:48px 14px}
            .home-intro h1{font-size:clamp(32px,10vw,44px)}
            .home-intro-lead{font-size:17px;line-height:1.55}
            .home-actions{display:grid;grid-template-columns:1fr;width:100%;gap:10px;margin-top:26px}
            .home-action{width:100%;min-width:0;min-height:48px;padding:13px 16px}
            .dj-search-row{flex-direction:column}
            .dj-search input,.dj-search button{width:100%;min-height:46px}
            .footer-inner{flex-direction:column;text-align:center}
            .footer-links{justify-content:center}
          }