::-webkit-scrollbar {
      display: none;
    }
    html,
    body {
      scrollbar-width: none;
    }
    body {
      -ms-overflow-style: none;
    }

    body {
      font-family: Arial, sans-serif;
      background: #0f172a;
      color: white;
      margin: 0;
      padding: 15px;
    }
    @media (max-width: 600px) {
        body {
          padding: 10px;
        }
      }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 15px;
    }
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:Arial, Helvetica, sans-serif;
    }
    body{
        background:#111827;
        color:white;
        min-height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        padding:20px;
    }
    body {
        background: url("https://i.imgur.com/z4guq1U.jpeg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        font-family: Arial;
        text-align: center;
        padding: 20px;
        margin: 0;
      }
      @media (max-width: 600px) {
        body {
          background: url("https://i.imgur.com/tdiVvNP.jpeg") no-repeat center center;
          background-size: cover;
          background-attachment: scroll;
          min-height: 100vh;
        }
      }
    .container{
        width:100%;
        max-width:500px;
        background:#1f2937;
        padding:30px;
        border-radius:20px;
        box-shadow:0 0 25px rgba(0,0,0,.4);
    }
    h1{
        color: #00fbff;
        text-align:center;
        margin-bottom:25px;
        font-size:30px;
    }
    .upload-box{
        border:2px dashed #4b5563;
        border-radius:15px;
        padding:40px 20px;
        text-align:center;
        cursor:pointer;
        transition:.3s;
        margin-bottom:20px;
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:150px;
    }
    .upload-box p{
    margin:0;
    font-size:18px;
    color:#9ca3af;
    }
    .upload-box:hover{
        border-color:#3b82f6;
        background:#111827;
    }
    input[type="file"]{
        display:none;
    }
    select, button{
        width:100%;
        padding:14px;
        border:none;
        border-radius:12px;
        margin-top:15px;
        font-size:16px;
    }
    select{
        background:#374151;
        color:white;
    }
    button {
      background: #333;
      color: #00fbff;
      border: 2px solid #00fbff;
      font-weight: bold;
      margin-top: 5px;
      padding: 5px;
      border-radius: 8px;
      cursor: pointer;
    }
    button:hover {
      background: #00FBFF;
      color: black;
      border-color: #00FBFF;
    }
    img{
        width:100%;
        max-width:150px;
        margin:20px auto 0;
        border-radius:12px;
        display:none;
    }
    .download-btn{
        display:none;
        text-decoration:none;
    }
    .info{
        text-align:center;
        margin-top:15px;
        color:#9ca3af;
        font-size:14px;
    }
    .about-btn {
      position: fixed;
      bottom: 5px;
      right: 5px;
      background: #333;
      color: #00fbff;
      border: 2px solid #00fbff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.3s;
      z-index: 1000;
    }
    .about-btn:hover {
      background: #00fbff;
      color: #333;
    }
    .about-panel {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000000cc;
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: 0.3s;
    }
    .about-panel.active {
      opacity: 1;
      pointer-events: all;
    }
    .about-content {
      background: #1f1f1f;
      padding: 25px;
      border-radius: 15px;
      text-align: center;
      width: 90%;
      max-width: 300px;
      border: 2px solid #00fbff;
    }
    .about-content h3 {
      color: #d000ff;
    }
    .about-content p{
    margin-bottom:30px;
    }
    .links{
        display:grid;
        grid-template-columns:repeat(4, 60px);
        justify-content:center;
        gap:15px;
        margin:20px 0;
        padding-bottom:40px;
    }
    .links a{
        text-decoration:none;
        color:#00fbff;
        background:#333;
        width:auto;
        height:auto;
        margin:auto;
        align-items:center;
        justify-content:center;
        display:flex;
        font-size:18px;
        transition:0.3s;
        position:relative;
    }
    .links a::after{
        content:attr(title);
        position:absolute;
        bottom:75px;
        left:50%;
        transform:translateX(-50%) translateY(5px);
        background:#111;
        color:#00fbff;
        padding:6px 10px;
        border-radius:8px;
        font-size:12px;
        white-space:nowrap;
        opacity:0;
        transition:0.3s;
        pointer-events:none;
        border:1px solid #00fbff;
    }
    .links a:hover::after{
        opacity:1;
         transform:translateX(-50%) translateY(0);
    }
    .links a:hover {
        background:#00fbff;
        color:#111;
        transform:scale(1.08);
    }