body, html{
      height:100%;
      margin:0;
      font-family: "Inter", sans-serif;
      background: #0f0f10;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
    }

    .screen {
      width: min(92vw, var(--container-w));
      background: var(--bg);
      border-radius: 28px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.45);
      padding: 18px 18px 26px;
      box-sizing: border-box;
      color: #222;
      overflow:hidden;
    }

    .topnav{
      display:flex;
      gap:12px;
      color: var(--accent);
      font-weight:600;
      font-size:14px;
      padding: 6px 4px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .topnav div{
      cursor:pointer;
      transition: color 0.3s ease;
    }
    .topnav div:hover{
      color:#888;
    }

    .content{
      display:none;
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding:28px 18px;
      opacity:0;
      transform: translateY(30px);
      transition: all 0.45s ease;
    }
    .content.active{
      display:flex;
      opacity:1;
      transform: translateY(0);
    }

    .gif-holder{
      width:140px;
      height:140px;
      margin: 12px 0 20px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      border-radius: 50%;
      background:#ffffff;
    }
    .gif-holder img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    h1{ font-size:18px; margin:6px 0 14px; font-weight:600; }

    .countdown{
      font-size:32px;
      color: var(--count);
      font-weight:700;
      margin: 10px 0 18px;
      letter-spacing:1px;
    }

    .explain{
      color: var(--muted);
      font-size:14px;
      line-height:1.5;
      max-width: 92%;
      margin: 0 auto 18px;
    }
    .explain b{ color:#222; }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      justify-content:center;
      margin-top:6px;
    }
    .btn{
      min-width:120px;
      padding:12px 16px;
      border-radius: 22px;
      border:0;
      font-weight:600;
      font-size:15px;
      cursor:pointer;
      transition: all 0.35s ease;
      color:white;
    }
    .btn.red{ background: linear-gradient(180deg,var(--red), #d9433a); box-shadow:0 0 12px rgba(231,76,60,0.4); }
    .btn.blue{ background: linear-gradient(180deg,var(--blue), #2d86c9); box-shadow:0 0 12px rgba(52,152,219,0.4); }
    .btn.green{ background: linear-gradient(180deg,var(--green), #27ae60); box-shadow:0 0 12px rgba(46,204,113,0.4); }

    .btn:hover{ transform: translateY(-2px) scale(1.02); box-shadow:0 0 22px rgba(255,255,255,0.6); }

    .reasons-list{
      text-align:left;
      margin:10px 0 20px;
      font-size:14px;
      color:#333;
      width:100%;
    }
    .reasons-list label{ display:block; margin:6px 0; cursor:pointer; }
    textarea{ width:100%; min-height:60px; border-radius:10px; padding:8px; border:1px solid #ccc; margin-top:8px; }

    input.code-input{
      padding:12px;
      border-radius:12px;
      border:1px solid #ccc;
      width:80%;
      text-align:center;
      font-size:16px;
      margin-bottom:16px;
    }

    .checkmark{
      font-size:64px;
      color:var(--green);
      margin:20px 0;
      animation: pop 0.6s ease;
    }
    @keyframes pop{
      0%{ transform:scale(0.5); opacity:0; }
      100%{ transform:scale(1); opacity:1; }
    }