/* Scoped to the shortcode output only */
.ucp-outer{
  min-height: 100vh;
  padding: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.35), transparent 30%),
    radial-gradient(circle at bottom right, rgba(34,197,94,.25), transparent 28%),
    linear-gradient(135deg, #0f172a, #111827);
  color:#e5e7eb;
  overflow-x:hidden;
}

.ucp-app{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:20px;
}

.ucp-hero, .ucp-converter{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  border-radius:24px;
  overflow:hidden;
  position:relative;
}

.ucp-hero{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:520px;
}

.ucp-hidden{display:none !important;}

.ucp-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  background:#ffffff12;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  color:#d1d5db;
  letter-spacing:.2px;
}

.ucp-badge span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, #7c3aed, #22c55e);
  box-shadow:0 0 0 6px rgba(124,58,237,.14);
}

.ucp-hero h1{
  margin:18px 0 12px;
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:1.02;
  letter-spacing:-.04em;
  color:#fff;
}

.ucp-hero p{
  margin:0;
  max-width:48ch;
  color:#9ca3af;
  font-size:15px;
  line-height:1.7;
}

.ucp-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:28px;
}

.ucp-stat{
  background:#ffffff10;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:16px;
}

.ucp-stat .num{
  font-size:20px;
  font-weight:700;
  margin-bottom:6px;
  color:#fff;
}

.ucp-stat .label{
  color:#9ca3af;
  font-size:13px;
}

.ucp-converter{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ucp-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ucp-title-row h2{
  margin:0;
  font-size:20px;
  letter-spacing:-.02em;
  color:#fff;
}

.ucp-pill{
  font-size:12px;
  color:#ddd;
  background:#ffffff10;
  border:1px solid rgba(255,255,255,.1);
  padding:8px 12px;
  border-radius:999px;
}

.ucp-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ucp-field label{
  font-size:13px;
  color:#cbd5e1;
}

.ucp-app input,
.ucp-app select,
.ucp-app button{
  font:inherit;
  outline:none;
  box-sizing:border-box;
}

.ucp-app input,
.ucp-app select{
  width:100%;
  border:none;
  border:1px solid rgba(255,255,255,.1);
  background:#0b1220aa;
  color:#e5e7eb;
  padding:15px 16px;
  border-radius:16px;
  transition:.2s ease;
}

.ucp-app input::placeholder{color:#6b7280}

.ucp-app input:focus,
.ucp-app select:focus{
  border-color:rgba(124,58,237,.7);
  box-shadow:0 0 0 4px rgba(124,58,237,.15);
}

.ucp-unit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.ucp-swap-row{
  display:flex;
  justify-content:center;
  margin:-2px 0;
}

.ucp-swap-btn{
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  color:white;
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 12px 28px rgba(124,58,237,.35);
  transition:transform .2s ease, filter .2s ease;
}

.ucp-swap-btn:hover{transform:translateY(-2px)}
.ucp-swap-btn:active{transform:translateY(0) scale(.98)}

.ucp-result{
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(34,197,94,.12));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:18px;
}

.ucp-result .small{
  font-size:13px;
  color:#d1d5db;
  margin-bottom:8px;
}

.ucp-result .value{
  font-size:clamp(1.8rem, 4vw, 2.7rem);
  font-weight:800;
  letter-spacing:-.04em;
  word-break:break-word;
  color:#fff;
}

.ucp-result .sub{
  margin-top:8px;
  color:#9ca3af;
  font-size:13px;
  line-height:1.6;
}

.ucp-footer-actions{
  display:flex;
  gap:12px;
}

.ucp-footer-actions .btn{
  flex:1;
  border:none;
  cursor:pointer;
  padding:14px 16px;
  border-radius:16px;
  font-weight:700;
  transition:.2s ease;
}

.ucp-footer-actions .btn.primary{
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  color:white;
}

.ucp-footer-actions .btn.ghost{
  background:#ffffff10;
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.1);
}

.ucp-footer-actions .btn:hover{transform:translateY(-1px)}
.ucp-footer-actions .btn:active{transform:translateY(0)}

.ucp-note{
  color:#9ca3af;
  font-size:12px;
  line-height:1.6;
  margin-top:-4px;
}

@media (max-width: 860px){
  .ucp-app{grid-template-columns:1fr}
  .ucp-hero{min-height:auto}
  .ucp-stats{grid-template-columns:1fr}
  .ucp-unit-grid{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .ucp-outer{padding:14px}
  .ucp-hero, .ucp-converter{border-radius:20px}
  .ucp-hero{padding:24px}
  .ucp-converter{padding:18px}
  .ucp-footer-actions{flex-direction:column}
}