:root{
  --bg: #0b1020;
  --text: #eef2ff;
  --muted: #c9d2ff;
  --card: rgba(255,255,255,.08);
  --sky: #4cc9f0;           /* preferred accent color */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at -10% -10%, #ff7a7a22, transparent 60%),
    radial-gradient(1000px 800px at 110% 20%, #ffd16622, transparent 60%),
    radial-gradient(600px 600px at 80% 90%, #4cc9f022, transparent 60%),
    radial-gradient(900px 700px at 10% 80%, #845ef722, transparent 60%),
    linear-gradient(180deg,#0b1020,#0b1227 40%,#0b1020);
  min-height:100vh;
}
.wrapper{ max-width:880px; margin:0 auto; padding:40px 20px 80px; }
header{ text-align:center; margin-bottom:24px; }
.title{ font-size: clamp(34px, 6vw, 54px); font-weight:800; margin:0; letter-spacing:-.02em; }
.subtitle{ color:var(--muted); margin-top:8px; }

.card{ background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }

label{ display:block; font-weight:600; margin:8px 0; }

.upload{
  position:relative; border:2px dashed rgba(255,255,255,.35); border-radius:var(--radius);
  height:260px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer;
  transition:.2s;
}
.upload:hover{ border-color:#fff; }
.upload input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload .hint{ color:#e5ecff; opacity:.9; margin-top:8px; }
.upload img{ display:none; max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius); }
.remove-btn{
  position:absolute; right:10px; top:10px; border:none; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.55); color:#fff; display:none; cursor:pointer;
}

.controls{ display:grid; gap:14px; grid-template-columns: 1fr; margin-top:16px; }
@media(min-width:720px){ .controls{ grid-template-columns:1fr 1fr } }

select, input[type="text"]{
  width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; padding:12px 14px; font-size:16px; outline:none;
}
select:focus, input[type="text"]:focus{ box-shadow: 0 0 0 3px rgba(76,201,240,.35); }

.field{ margin-top:14px; }

.btn{
  margin-top:16px; width:100%; border:none; border-radius:12px; padding:14px 16px; font-weight:800; cursor:pointer;
  background: var(--sky); color:#06121f; letter-spacing:.3px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.btn .spinner{
  width:18px; height:18px; border:2px solid transparent; border-top-color:#06121f; border-right-color:#06121f; border-radius:50%;
  animation: spin 0.8s linear infinite; display:none;
}
.btn.loading .spinner{ display:inline-block; }
.btn.loading .btn-label{ opacity:.7; }
@keyframes spin{ to{ transform: rotate(360deg) } }

.results{ margin-top:18px; display:grid; gap:12px; }
.result-item{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px 12px; display:flex; align-items:center; gap:10px;
}
.result-item .copy-btn{ margin-left:auto; background:rgba(255,255,255,.14); border:none; color:#fff; padding:8px 10px; border-radius:10px; cursor:pointer; }
footer{ margin-top:24px; opacity:.75; text-align:center; font-size:14px; }