*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  background: #0a000f;
  color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Background */
.bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 60%, #1e0435 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 20%, #2d0550 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 55% 90%, #16022e 0%, transparent 45%),
    #0a000f;
}
.orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.orb1 { width:380px;height:380px;left:-100px;top:35%;background:rgba(109,40,217,.18);animation:drift1 13s ease-in-out infinite; }
.orb2 { width:260px;height:260px;right:-60px;top:8%;background:rgba(147,51,234,.14);animation:drift2 16s ease-in-out infinite; }
.orb3 { width:200px;height:200px;right:22%;bottom:4%;background:rgba(168,85,247,.11);animation:drift3 11s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-32px) scale(1.07)} }
@keyframes drift2 { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(28px) scale(0.93)} }
@keyframes drift3 { 0%,100%{transform:translateX(0)}50%{transform:translateX(-22px)} }

/* Navbar FISSA */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  height: 62px;
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  backdrop-filter: blur(16px);
}
.logo { display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:#fff;letter-spacing:-.3px;user-select:none; }
.logo-dot { width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#a855f7);box-shadow:0 0 8px rgba(139,92,246,.7);animation:logopulse 2.6s ease-in-out infinite; }
@keyframes logopulse { 0%,100%{box-shadow:0 0 8px rgba(139,92,246,.7)}50%{box-shadow:0 0 18px rgba(168,85,247,1)} }
.nav-btns { display:flex;align-items:center;gap:6px; }
.nav-btn {
  display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;
  font-size:13px;font-weight:500;font-family:'Inter',sans-serif;line-height:1;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.nav-btn i { font-size:14px;line-height:1; }
.nav-btn:active { transform:scale(.97)!important; }
.nb-replace,.nb-status { background:transparent;color:rgba(196,180,255,.7);border-color:rgba(139,92,246,.22); }
.nb-replace:hover,.nb-status:hover { background:rgba(139,92,246,.12);color:#c4b5fd;border-color:rgba(139,92,246,.42);transform:translateY(-1px); }
.nb-redeem { background:rgba(124,58,237,.88);color:#fff;border-color:rgba(139,92,246,.6);box-shadow:0 2px 12px rgba(109,40,217,.35); }
.nb-redeem:hover { background:#7c3aed;box-shadow:0 4px 22px rgba(109,40,217,.55);transform:translateY(-2px); }

/* MAIN per la pagina REDEEM */
.main {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 80px 20px 40px 20px;
}

.card {
  width:100%;
  max-width:480px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(139,92,246,.2);
  border-radius:20px;
  padding:32px 30px 28px;
  backdrop-filter:blur(20px);
  overflow:hidden;
  animation:cardIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)} }

.upgrade-section {
  background: rgba(139,92,246,.05);
  border-radius: 16px;
  padding: 8px 0 4px 0;
  margin-bottom: 8px;
}

.section-header {
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.section-icon {
  width:36px;height:36px;border-radius:10px;
  background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.section-icon i { font-size:18px;color:#a78bfa; }
.section-title { font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px; }

.divider { height:1px;background:rgba(139,92,246,.12);margin:20px 0; }

.field-label {
  display:block;font-size:11px;font-weight:600;
  color:rgba(196,180,255,.55);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:7px;
}
.field-inner { position:relative;display:flex;align-items:center; }
.field-inner .fi {
  position:absolute;left:12px;font-size:15px;
  color:rgba(139,92,246,.5);pointer-events:none;line-height:1;transition:color .2s;
}
.field-inner:focus-within .fi { color:#a78bfa; }
.field-inner input {
  width:100%;padding:11px 12px 11px 38px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(139,92,246,.18);
  border-radius:10px;color:#e9d5ff;
  font-size:13.5px;font-family:'Inter',sans-serif;font-weight:400;line-height:1;
  outline:none;transition:border-color .2s,background .2s,box-shadow .2s;
}
.field-inner input::placeholder { color:rgba(196,180,255,.28); }
.field-inner input:focus {
  background:rgba(139,92,246,.08);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 0 3px rgba(109,40,217,.15);
}
.field-inner input.has-eye { padding-right:40px; }
.eye-btn {
  position:absolute;right:10px;background:none;border:none;cursor:pointer;
  color:rgba(139,92,246,.45);padding:4px;display:flex;align-items:center;transition:color .2s;
}
.eye-btn:hover { color:#a78bfa; }
.eye-btn i { font-size:15px;line-height:1; }

.tab-bar {
  display:flex;gap:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(139,92,246,.15);
  border-radius:12px;padding:4px;
  margin-bottom:18px;
}
.tab-btn {
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;border-radius:9px;border:none;
  font-size:13px;font-weight:500;font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .22s ease;color:rgba(196,180,255,.55);
  background:transparent;line-height:1;
}
.tab-btn i { font-size:14px;line-height:1; }
.tab-btn.active {
  background:rgba(139,92,246,.22);
  color:#e9d5ff;
  box-shadow:0 1px 6px rgba(109,40,217,.2);
}
.tab-btn .badge {
  font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(139,92,246,.35);color:#c4b5fd;
  padding:2px 6px;border-radius:4px;line-height:1.4;
}
.tab-btn.active .badge { background:rgba(139,92,246,.5);color:#e9d5ff; }

.tab-panel { display:none;flex-direction:column;gap:14px; }
.tab-panel.active { display:flex; }

.submit-btn {
  width:100%;padding:12.5px;margin-top:20px;
  background:linear-gradient(135deg,#7c3aed 0%,#8b5cf6 50%,#a855f7 100%);
  color:#fff;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;
  line-height:1;border:none;border-radius:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .2s ease,opacity .2s;
  box-shadow:0 4px 18px rgba(109,40,217,.4);
}
.submit-btn i { font-size:16px;line-height:1; }
.submit-btn:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(109,40,217,.55); }
.submit-btn:active { transform:scale(.98); }
.submit-btn:disabled { opacity:.75;cursor:not-allowed;transform:none; }

.footer-row {
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:12px;color:rgba(196,180,255,.35);line-height:1;margin-top:14px;
}
.footer-row a { color:#8b5cf6;text-decoration:none;font-weight:500; }
.footer-row a:hover { color:#a78bfa;text-decoration:underline; }

.step2-wrap {
  max-height:0;overflow:hidden;
  transition:max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  opacity:0;
}
.step2-wrap.open { max-height:600px;opacity:1; }

.key-status {
  font-size: 12px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  display: none;
  align-items: center;
  gap: 6px;
}
.key-status.show { display: flex; }
.key-status.valid { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; }
.key-status.invalid { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; }
.key-status i { font-size: 14px; }

.success-rectangle {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.05));
  border: 2px solid rgba(139, 92, 246, 0.4);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  animation: successGlow 2s ease-in-out infinite;
}
@keyframes successGlow {
  0%, 100% { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 0 20px rgba(139, 92, 246, 0.1); }
  50% { border-color: rgba(168, 85, 247, 0.8); box-shadow: 0 0 30px rgba(168, 85, 247, 0.3); }
}
.success-icon {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: iconPop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes iconPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.success-icon i { font-size: 32px; color: white; }
.success-title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.success-message { font-size: 14px; color: rgba(196, 180, 255, 0.8); margin-bottom: 20px; }
.success-details { background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 12px; margin-bottom: 24px; font-size: 13px; color: #c4b5fd; }
.success-status-btn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 12px;
  transition: all 0.2s ease;
}
.success-status-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4); }
.success-reset-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 12px;
  transition: all 0.2s ease;
}
.success-reset-btn:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.6); }

/* Toast */
.toast {
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:rgba(18,4,36,.96);border:1px solid rgba(139,92,246,.4);
  border-radius:10px;padding:11px 20px;
  font-size:13px;font-family:'Inter',sans-serif;font-weight:500;color:#e9d5ff;
  display:flex;align-items:center;gap:8px;z-index:999;opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s;
  white-space:nowrap;pointer-events:none;backdrop-filter:blur(12px);
}
.toast.show { transform:translateX(-50%) translateY(0);opacity:1; }
.toast i { font-size:16px;line-height:1; }
.toast.err { border-color:rgba(239,68,68,.5);color:#fca5a5; }
.toast.err i { color:#f87171; }
.toast.ok  { border-color:rgba(34,197,94,.5);color:#86efac; }
.toast.ok  i { color:#4ade80; }

@keyframes spin { to{transform:rotate(360deg)} }
.spin { animation:spin .7s linear infinite;display:inline-block; }

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal.show { display: flex; }
.modal-content {
  background: rgba(20, 10, 40, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
}
.modal-content h3 { margin-bottom: 16px; color: #e9d5ff; }
.modal-content input { width: 100%; margin-bottom: 16px; }
.modal-buttons { display: flex; gap: 12px; justify-content: flex-end; }
.modal-buttons button { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; }
.modal-buttons .modal-confirm { background: #7c3aed; color: white; }
.modal-buttons .modal-cancel { background: rgba(255, 255, 255, 0.1); color: #c4b5fd; }