body {
  font-family: Arial;
  background:#f6f7fb;
  margin:0;
  padding:20px;
}

.container {
  max-width:800px;
  margin:auto;
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

input, button {
  padding:8px;
  font-size:15px;
}

button {
  cursor:pointer;
  background:#007bff;
  border:none;
  color:#fff;
  border-radius:6px;
}

.alert {
  background:#def;
  border-left:4px solid #06f;
  padding:8px;
  margin:10px 0;
}

.wallet-box { margin-top:25px; }

.wallet-item {
  background:#f9f9f9;
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
}

details {
  background:#fff;
  padding:6px;
  border-radius:6px;
  margin-top:4px;
}

summary {
  cursor:pointer;
  font-size:13px;
  color:#007bff;
}

.footer {
  text-align:center;
  margin-top:30px;
  font-size:13px;
  color:#555;
}

#preview {
  display:none;
  max-width:100%;
  margin-top:10px;
}

.result-box {
  border:1px solid #ccc;
  border-radius:8px;
  padding:10px;
  background:#f9f9f9;
  margin-top:15px;
}

.balance {
  font-weight:bold;
  color:#006600;
  margin-bottom:10px;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {

  body {
    padding: 0;
    background: #f6f7fb;
  }

  .container {
    max-width: 100%;
    border-radius: 0;
    min-height: 100vh;
    padding: 16px;
    box-shadow: none;
  }

  h1 {
    font-size: 20px;
    text-align: center;
  }

  .balance {
    text-align: center;
    font-size: 16px;
  }

  input[type="text"],
  input[type="file"] {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    margin-bottom: 12px;
  }

  button {
    width: 100%;
    font-size: 16px;
    padding: 12px;
  }

  .wallet-item {
    font-size: 14px;
  }

  summary {
    font-size: 14px;
  }

  .footer {
    padding: 10px;
  }
}

.session {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  word-break: break-all;
}

.session code {
  background: #f1f1f1;
  padding: 2px 6px;
  border-radius: 4px;
}