*{box-sizing:border-box}
body{margin:0;font-family:Arial;background:#070b18;color:#e5e7eb}
.header{max-width:1200px;margin:20px auto;padding:16px;background:#0b1324;border-radius:14px}
.container{max-width:1200px;margin:20px auto;display:grid;grid-template-columns:420px 1fr;gap:30px}
.panel{background:#0f172a;border-radius:18px;padding:20px}
.input,select{width:100%;padding:12px;margin:8px 0;background:#0b1324;color:#fff;border:none;border-radius:10px}
.btn{width:100%;padding:14px;margin-top:10px;background:#22d3ee;border:none;border-radius:14px;font-weight:bold;cursor:pointer}
.btn.dark{background:#0b1324;color:#fff}
.card-wrap{display:flex;justify-content:center}
.result-card{width:360px;background:#0b1324;padding:18px;border-radius:18px}
.line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #1e293b}
.footer{text-align:center;margin-top:10px;color:#22d3ee}
.popup{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center}
.popup-box{background:#0f172a;padding:25px;border-radius:16px;text-align:center}
.wa-btn{display:block;margin:15px 0;padding:12px;background:#25D366;color:#000;border-radius:10px;text-decoration:none}


/* =========================
   MOBILE RESPONSIVE FIX
   ========================= */

@media (max-width: 768px) {

  .container{
    grid-template-columns: 1fr;
    gap:20px;
    margin:12px;
  }

  .panel{
    padding:16px;
  }

  .header{
    margin:10px;
    padding:14px;
    text-align:center;
  }

  .card-wrap{
    justify-content:center;
  }

  .result-card{
    width:100%;
    max-width:420px;
    padding:16px;
  }

  .row{
    font-size:13px;
  }

  .row span{
    max-width:55%;
    text-align:right;
    word-break:break-word;
  }

  .btn{
    padding:13px;
    font-size:15px;
  }

  .actions{
    flex-direction:column;
    gap:10px;
  }

  .actions button{
    width:100%;
  }
}

/* EXTRA SMALL DEVICES */
@media (max-width: 480px) {

  .result-card{
    border-radius:16px;
    padding:14px;
  }

  .row{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }

  .row span{
    text-align:left;
    max-width:100%;
    font-weight:500;
  }

  .footer{
    text-align:center;
    font-size:12px;
  }
}