/* Layout principale */
.shell{
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px;
  display:flex;
  min-height:100%;
  flex-direction:column;
  gap:18px;
  position:relative;
  z-index:1;
}

/* Topbar: nero/rosso animato */
.topbar{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border:1px solid rgba(255,21,53,.22);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    radial-gradient(1200px 120px at 50% 0%, rgba(255,21,53,.10), transparent 70%),
    rgba(12,16,24,.70);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateZ(0);
}

.topbar::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,21,53,.16),
      rgba(255,21,53,.04),
      transparent
    );
  opacity:.45;
  transform: translateX(-40%);
  animation: sheen 6.8s ease-in-out infinite;
  pointer-events:none;
}

.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,21,53,.14), 0 0 26px rgba(255,21,53,.12);
  opacity:.9;
  pointer-events:none;
  animation: glowBreath 4.8s ease-in-out infinite;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,21,53,.95);
  box-shadow: 0 0 18px rgba(255,21,53,.55), 0 0 40px rgba(255,21,53,.18);
  animation: dotPulse 2.7s ease-in-out infinite;
}
.brand .name{
  letter-spacing:.22em;
  text-shadow: 0 0 18px rgba(255,21,53,.20);
}

.hint{ opacity:.9; }

.center{
  flex:1;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

/* Panel / Results */
.panel, .results{
  position:relative;
  border:1px solid rgba(255,21,53,.22);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    radial-gradient(900px 240px at 50% 0%, rgba(255,21,53,.10), transparent 70%),
    rgba(12,16,24,.72);
  box-shadow: var(--shadow);
  padding:16px;
  overflow:hidden;
  transform: translateZ(0);
}

.panel::before, .results::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,21,53,.00) 0px,
      rgba(255,21,53,.00) 9px,
      rgba(255,21,53,.06) 10px
    );
  opacity:.18;
  pointer-events:none;
}

.panel::after, .results::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(255,21,53,.12),
    0 0 22px rgba(255,21,53,.12);
  opacity:.85;
  pointer-events:none;
  animation: glowBreath 5.2s ease-in-out infinite;
}

.panel-title, .results-title{
  letter-spacing:.18em;
  font-size:.9rem;
  margin-bottom:10px;
  opacity:.95;
}

/* Searchbar */
.searchbar{
  display:grid;
  grid-template-columns: 200px 1fr 120px;
  gap:10px;
  align-items:stretch;
}

.select, .input{
  width:100%;
  border:1px solid rgba(255,21,53,.18);
  background: rgba(10,14,21,.92);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 12px;
  outline:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}

.input::placeholder{ color: rgba(142,160,187,.60); }

.select:focus, .input:focus{
  border-color: rgba(255,21,53,.42);
  box-shadow: var(--ring);
  transform: translateY(-1px);
}

.btn{
  position:relative;
  border:1px solid rgba(255,21,53,.45);
  background:
    radial-gradient(200px 60px at 50% 0%, rgba(255,21,53,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,21,53,.18), rgba(255,21,53,.07));
  color: var(--text);
  border-radius: 14px;
  padding: 12px 12px;
  cursor:pointer;
  box-shadow: var(--ringSoft), 0 14px 40px rgba(0,0,0,.55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  text-shadow: 0 0 16px rgba(255,21,53,.22);
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-55%) rotate(8deg);
  opacity:.55;
  animation: btnSheen 3.8s ease-in-out infinite;
  pointer-events:none;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--ring), 0 18px 60px rgba(0,0,0,.62);
  filter: saturate(1.1);
}

.btn:active{
  transform: translateY(0px) scale(.99);
}

/* Token row + status */
.row{ margin-top: 12px; display:flex; flex-direction:column; gap:6px; }

.status{
  margin-top: 10px;
  min-height: 18px;
  opacity:.92;
  transition: opacity .2s ease;
}

/* Output cards */
.out{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.card{
  border:1px solid rgba(255,21,53,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 12px;
  position:relative;
  overflow:hidden;
  animation: cardIn .26s ease-out both;
}

.card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, rgba(255,21,53,.85), rgba(255,21,53,.10));
  opacity:.85;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(500px 160px at 20% 0%, rgba(255,21,53,.08), transparent 70%);
  opacity:.8;
  pointer-events:none;
}

.card .k{ color: var(--muted); font-size:.85rem; }
.card .v{ margin-top: 4px; }

/* Footer */
.footer{
  padding: 10px 2px;
  font-size: .85rem;
  opacity: .9;
}

/* Desktop split */
@media (min-width: 920px){
  .center{ grid-template-columns: 1.05fr .95fr; }
}

/* Mobile: zero bug / zero overflow */
@media (max-width: 680px){
  .shell{ padding: 14px; gap:14px; }
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding: 14px;
  }
  .hint{ display:none; }

  .panel, .results{ padding:14px; }

  .searchbar{
    grid-template-columns: 1fr;
    gap:10px;
  }

  .select, .input, .btn{
    border-radius: 16px;
    padding: 13px 12px;
  }

  .btn{
    width:100%;
  }
}

/* Animazioni */
@keyframes glowBreath{
  0%   { opacity:.70; }
  50%  { opacity:1; }
  100% { opacity:.70; }
}

@keyframes dotPulse{
  0%   { transform: scale(1);   box-shadow: 0 0 16px rgba(255,21,53,.45), 0 0 36px rgba(255,21,53,.16); }
  50%  { transform: scale(1.2); box-shadow: 0 0 22px rgba(255,21,53,.70), 0 0 60px rgba(255,21,53,.22); }
  100% { transform: scale(1);   box-shadow: 0 0 16px rgba(255,21,53,.45), 0 0 36px rgba(255,21,53,.16); }
}

@keyframes sheen{
  0%   { transform: translateX(-45%) skewX(-12deg); opacity:.28; }
  40%  { opacity:.55; }
  100% { transform: translateX(55%) skewX(-12deg); opacity:.22; }
}

@keyframes btnSheen{
  0%   { transform: translateX(-60%) rotate(8deg); opacity:.35; }
  40%  { opacity:.65; }
  100% { transform: translateX(60%) rotate(8deg); opacity:.30; }
}

@keyframes cardIn{
  from { transform: translateY(6px); opacity:0; }
  to   { transform: translateY(0);   opacity:1; }
}

/* Riduci motion */
@media (prefers-reduced-motion: reduce){
  .topbar::before,
  .topbar::after,
  .brand .dot,
  .panel::after,
  .results::after,
  .btn::before,
  .card{
    animation: none !important;
  }
  .btn, .select, .input{ transition:none !important; }
}

/* iOS Safari: prevent input zoom */
input, select, textarea, button { font-size: 16px; }