body {
   margin: 0;
   background:
     radial-gradient(circle at top right, rgba(210, 225, 0, .12), transparent 28%),
     radial-gradient(circle at bottom left, rgba(210, 225, 0, .08), transparent 25%),
     #050607;
   color: #f2f2f2;
   font-family: Inter, system-ui, sans-serif;
 }

 .wrap {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px 16px;
 }

 .card {
   width: min(1100px, 100%);
   border-radius: 24px;
   padding: 50px 50px 30px;
   background: linear-gradient(135deg, #0b0e11, #050607);
   border: 1px solid rgba(215, 230, 0, .15);
   box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
   position: relative;
 }

 .logo {
   font-size: clamp(48px, 8vw, 90px);
   font-weight: 1000;
   letter-spacing: -4px;
   text-transform: uppercase;
 }

 .logo span {
   color: #d7e600;
 }

 .tagline {
   margin-top: 18px;
   font-family: monospace;
   font-size: 20px;
 }

 .tagline mark {
   background: #d7e600;
   color: #000;
   padding: 2px 6px;
 }

 .meta {
   margin-top: 25px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 20px;
 }

 .bundle {
   font-size: 14px;
   text-transform: uppercase;
   color: #aaa;
 }

 .bundle span {
   color: #d7e600;
 }

 .controls {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .select-pill {
   padding: 14px 22px;
   border-radius: 999px;
   background: #0a0d11;
   color: #f2f2f2;
   border: 1px solid rgba(255, 255, 255, .15);
   font-weight: 900;
   cursor: pointer;
 }

 .input {
   box-sizing: border-box;
   width: 100%;
   margin-top: 20px;
   padding: 26px;
   font-size: 26px;
   border-radius: 12px;
   border: 1px solid #d7e600;
   background: #07090c;
   color: #fff;
 }

 .action-row {
   margin-top: 18px;
   display: grid;
   grid-template-columns: 220px 1fr 220px;
   gap: 14px;
   align-items: center;
 }

 .playlist-toggle {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 900;
   color: #d7e600;
 }

 .playlist-toggle input {
   width: 18px;
   height: 18px;
 }

 .btn {
   height: 65px;
   border-radius: 999px;
   font-size: 20px;
   font-weight: 900;
   border: none;
   cursor: pointer;
 }

 .surprise {
   background: #d7e600;
   color: #000;
 }

 .playlist-btn {
   background: #11161b;
   color: #d7e600;
   border: 1px solid rgba(215, 230, 0, .45);
 }

 .results {
   margin-top: 28px;
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding-top: 18px;
   min-height: 420px;
   max-height: 420px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
 }

 .result-row {
   display: grid;
   grid-template-columns: 54px 1fr auto;
   gap: 16px;
   align-items: center;
   padding: 16px 18px;
   margin-bottom: 12px;
   border-radius: 18px;
   background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .play-icon {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: #d7e600;
   color: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 1000;
   text-decoration: none;
   font-size: 18px;
 }

 .result-title {
   font-size: 18px;
   font-weight: 1000;
   color: #fff;
 }

 .result-artist {
   color: #aaa;
   margin-top: 4px;
   font-size: 15px;
 }

 .spotify-link {
   color: #d7e600;
   text-decoration: none;
   font-weight: 900;
   white-space: nowrap;
 }

 .status {
   color: #aaa;
   font-family: monospace;
   padding: 12px 0;
 }

 .footer {
   margin-top: 34px;
   text-align: center;
   color: #888;
 }

 .footer a {
   color: #d7e600;
   text-decoration: none;
   margin: 0 10px;
 }

 .sticker {
   position: absolute;
   top: 20px;
   right: 20px;
   background: #d7e600;
   color: #000;
   padding: 12px;
   font-weight: 900;
   transform: rotate(-5deg);
 }

 @media(max-width:700px) {
   .card {
     padding: 30px 20px;
   }

   .input {
     font-size: 18px;
     padding: 20px;
   }

   .action-row {
     grid-template-columns: 1fr;
   }

   .result-row {
     grid-template-columns: 46px 1fr;
   }

   .spotify-link {
     grid-column: 2;
   }

   .sticker {
     position: static;
     display: inline-block;
     margin-bottom: 20px;
   }
 }

 .action-row {
   margin-top: 18px;
   display: grid;
   grid-template-columns: 1fr;
 }

 .surprise {
   width: 100%;
   background: #d7e600;
   color: #000;
 }

 .playlist-success {
   display: none;
   margin-top: 20px;
   padding: 22px;
   border-radius: 20px;
   background: rgba(215, 230, 0, .08);
   border: 1px solid rgba(215, 230, 0, .35);
 }

 .playlist-success h2 {
   margin: 0 0 10px;
   color: #d7e600;
 }

 .playlist-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 16px;
 }

 .playlist-actions a,
 .playlist-actions button {
   padding: 14px 18px;
   border-radius: 999px;
   border: none;
   background: #d7e600;
   color: #000;
   font-weight: 900;
   cursor: pointer;
   text-decoration: none;
 }

 .playlist-success {
   display: none;
   margin-top: 24px;
   padding: 30px;
   border-radius: 28px;
   background:
     radial-gradient(circle at top right, rgba(215, 230, 0, .18), transparent 35%),
     linear-gradient(135deg, #11161b, #050607);
   border: 1px solid rgba(215, 230, 0, .35);
   box-shadow: 0 25px 70px rgba(0, 0, 0, .55);
   text-align: center;
 }

 .playlist-success h2 {
   margin: 0;
   font-size: 38px;
   color: #d7e600;
 }

 .playlist-success p {
   color: #aaa;
   font-size: 17px;
 }

 .playlist-url-box {
   margin: 20px auto;
   padding: 16px;
   border-radius: 14px;
   background: #07090c;
   border: 1px solid rgba(255, 255, 255, .12);
   color: #ddd;
   word-break: break-all;
   max-width: 760px;
   font-family: monospace;
 }

 .playlist-actions {
   display: flex;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
 }

 .playlist-actions a,
 .playlist-actions button {
   padding: 15px 22px;
   border-radius: 999px;
   border: none;
   background: #d7e600;
   color: #000;
   font-weight: 950;
   text-decoration: none;
   cursor: pointer;
 }

 .playlist-success {
   display: none;

   position: fixed;
   inset: 0;

   z-index: 9999;

   background: rgba(0, 0, 0, .72);

   backdrop-filter: blur(8px);

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

   padding: 20px;
 }

 .playlist-success-inner {
   width: min(920px, 100%);

   padding: 42px;

   border-radius: 34px;

   background:
     radial-gradient(circle at top right, rgba(215, 230, 0, .14), transparent 35%),
     linear-gradient(135deg, #11161b, #050607);

   border: 1px solid rgba(215, 230, 0, .25);

   box-shadow:
     0 40px 120px rgba(0, 0, 0, .75);

   text-align: center;
 }

 .playlist-success h2 {
   margin: 0;
   font-size: clamp(42px, 5vw, 68px);
   color: #d7e600;
 }

 .playlist-success p {
   margin-top: 16px;
   color: #aaa;
   font-size: 22px;
 }

 .playlist-url-box {
   margin: 30px auto;
   padding: 18px 24px;

   border-radius: 18px;

   background: #050607;

   border: 1px solid rgba(255, 255, 255, .08);

   color: #ddd;

   font-size: 18px;

   font-family: monospace;

   word-break: break-all;
 }

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

 .playlist-actions a,
 .playlist-actions button {
   padding: 18px 28px;

   border-radius: 999px;

   border: none;

   background: #d7e600;

   color: #000;

   font-weight: 900;

   font-size: 18px;

   cursor: pointer;

   text-decoration: none;

   transition: .18s ease;
 }

 .playlist-actions a:hover,
 .playlist-actions button:hover {
   transform: translateY(-2px);
 }

 @media(max-width:700px) {

   .playlist-success-inner {
     padding: 28px 20px;
   }

   .playlist-actions {
     flex-direction: column;
   }

   .playlist-actions a,
   .playlist-actions button {
     width: 100%;
   }

   .playlist-url-box {
     font-size: 14px;
   }
 }

 .playlist-success-inner {
   position: relative;
   width: min(560px, 92%);
   padding: 34px 28px;
   border-radius: 30px;
 }

 .playlist-success h2 {
   font-size: clamp(36px, 4vw, 58px);
 }

 .playlist-url-box {
   margin: 24px auto;
   padding: 14px 18px;
   border-radius: 16px;
   font-size: 15px;
 }

 .playlist-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .1);
   background: rgba(255, 255, 255, .04);
   color: #fff;
   font-size: 22px;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .playlist-close:hover {
   background: #d7e600;
   color: #000;
   transform: rotate(90deg);
 }

 .playlist-success-inner {
   position: relative;
   width: min(420px, 88%);
   padding: 22px 20px;
   border-radius: 24px;
 }

 .playlist-success h2 {
   font-size: clamp(28px, 3vw, 40px);
 }

 .playlist-success p {
   font-size: 15px;
   margin-top: 8px;
 }

 .playlist-url-box {
   margin: 16px auto;
   padding: 11px 14px;
   font-size: 12px;
 }

 .playlist-actions {
   gap: 8px;
 }

 .playlist-actions a,
 .playlist-actions button {
   padding: 12px 16px;
   font-size: 14px;
 }

 .playlist-close {
   width: 34px;
   height: 34px;
   top: 10px;
   right: 10px;
   font-size: 18px;
 }

 .playlist-success-inner {
   position: relative;
   width: min(420px, 88%);
   padding: 22px 20px;
   border-radius: 24px;
 }

 .playlist-success h2 {
   font-size: clamp(28px, 3vw, 40px);
 }

 .playlist-success p {
   font-size: 15px;
   margin-top: 8px;
 }

 .playlist-url-box {
   margin: 16px auto;
   padding: 11px 14px;
   font-size: 12px;
 }

 .playlist-actions {
   gap: 8px;
 }

 .playlist-actions a,
 .playlist-actions button {
   padding: 12px 16px;
   font-size: 14px;
 }

 .playlist-close {
   width: 34px;
   height: 34px;
   top: 10px;
   right: 10px;
   font-size: 18px;
 }

 .playlist-success-inner {
   position: relative;
   width: min(420px, 88%);
   padding: 22px 20px;
   border-radius: 24px;
 }

 .playlist-success h2 {
   font-size: clamp(28px, 3vw, 40px);
 }

 .playlist-success p {
   font-size: 15px;
   margin-top: 8px;
 }

 .playlist-url-box {
   margin: 16px auto;
   padding: 11px 14px;
   font-size: 12px;
 }

 .playlist-actions {
   gap: 8px;
 }

 .playlist-actions a,
 .playlist-actions button {
   padding: 12px 16px;
   font-size: 14px;
 }

 .playlist-close {
   width: 34px;
   height: 34px;
   top: 10px;
   right: 10px;
   font-size: 18px;
 }

 .playlist-success {
   display: none;

   position: fixed;
   inset: 0;

   z-index: 9999;

   background: rgba(0, 0, 0, .72);

   backdrop-filter: blur(8px);

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

   padding: 20px;
 }

 .playlist-success-inner {
   position: relative;

   width: min(420px, 88%);

   padding: 22px 20px;

   border-radius: 24px;

   background:
     radial-gradient(circle at top right, rgba(215, 230, 0, .12), transparent 35%),
     linear-gradient(135deg, #11161b, #050607);

   border: 1px solid rgba(215, 230, 0, .22);

   box-shadow:
     0 30px 90px rgba(0, 0, 0, .72);

   text-align: center;
 }