/* ============================================================================
   SAVE-EXPORT.CSS — Step 6 "Save & Download"
   ----------------------------------------------------------------------------
   The single save path for the Re-Production Studio. A brushed-metal rack
   chassis that matches master-rack.css, with a congratulations hero, a
   confetti/balloon stage, one song-title nameplate (the single source of
   truth for the filename AND the My Songs entry), and the save button.
   ============================================================================ */

#panel-export{ padding:0 !important; background:none !important; border:0 !important; }

/* Step 6 is a full-width celebration page, not a rail/stage/rack console.
   Override the console grid so the save rack spans the whole stage. */
body.rk-console section.panel.is-current#panel-export{
  display:block !important;
  grid-template-columns:none !important;
  padding:0 !important;
  max-width:none !important;
}
body.rk-console section.panel.is-current#panel-export .save-rack{
  width:100%;
  grid-column:auto !important;
}
/* the generic step console rail is meaningless on the celebration page */
body.rk-console #panel-export .rk-info,
body.rk-console #panel-export .rk-slot-rail{ display:none !important; }

.save-rack{
  position:relative;
  overflow:hidden;
  padding:34px 30px 26px;
  border:1px solid #07090c;
  border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(53,194,255,.14), transparent 60%),
    radial-gradient(90% 70% at 90% 110%, rgba(255,107,53,.10), transparent 60%),
    linear-gradient(180deg,#2b313c 0%,#22272f 8%,#1b1f27 46%,#15181e 82%,#12151a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 2px 0 rgba(255,255,255,.03),
    inset 0 -1px 0 rgba(0,0,0,.75),
    0 22px 50px -20px rgba(0,0,0,.9),
    0 3px 8px rgba(0,0,0,.55);
}
/* corner screws, same language as the master rack */
.save-rack::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px; z-index:0;
  background:
    radial-gradient(circle at 14px 14px, #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 14px) 14px, #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at 14px calc(100% - 14px), #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px);
}

/* ---- celebration stage --------------------------------------------------- */
.save-confetti{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3;
}
.save-balloons{
  position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden;
}
.save-balloon{
  position:absolute;
  bottom:-160px;
  width:52px; height:64px;
  border-radius:50% 50% 48% 48% / 55% 55% 45% 45%;
  box-shadow:
    inset -8px -10px 18px rgba(0,0,0,.28),
    inset 6px 8px 14px rgba(255,255,255,.35),
    0 10px 24px rgba(0,0,0,.35);
  animation:saveBalloonRise linear forwards;
  will-change:transform,opacity;
}
.save-balloon::after{
  content:""; position:absolute; left:50%; top:100%;
  width:1px; height:70px; margin-left:-.5px;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
}
@keyframes saveBalloonRise{
  0%   { transform:translate3d(0,0,0) rotate(-4deg); opacity:0; }
  8%   { opacity:1; }
  100% { transform:translate3d(var(--drift,20px),-125vh,0) rotate(6deg); opacity:0; }
}

/* ---- hero ---------------------------------------------------------------- */
.save-hero{ position:relative; z-index:4; text-align:center; margin-bottom:26px; }
.save-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; margin-bottom:14px;
  border-radius:50%;
  font-size:26px; color:#08151a;
  background:linear-gradient(135deg,#35ff9e,#35c2ff);
  box-shadow:0 0 0 6px rgba(53,255,158,.10), 0 10px 30px -8px rgba(53,194,255,.7);
  animation:saveBadgePop .7s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes saveBadgePop{
  0%{ transform:scale(.2) rotate(-30deg); opacity:0; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.save-kicker{
  margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#35c2ff;
}
.save-headline{
  margin:0 0 10px; font-size:clamp(22px,3.2vw,32px); line-height:1.15;
  font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(180deg,#ffffff,#b9c3d2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.save-sub{
  margin:0 auto; max-width:560px; font-size:13.5px; line-height:1.6; color:#9aa0ac;
}
.save-sub b{ color:#e8eaed; }

/* ---- title nameplate ----------------------------------------------------- */
.save-nameplate{
  position:relative; z-index:4;
  max-width:620px; margin:0 auto 22px;
  padding:16px 18px 14px;
  border:1px solid #0a0d12;
  border-radius:12px;
  background:linear-gradient(180deg,#12151b,#0d1014);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.6);
}
.save-label{
  display:block; margin-bottom:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#7f8896;
}
.save-input-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.save-input{
  flex:1 1 240px; min-width:0;
  padding:12px 14px;
  font-size:17px; font-weight:700; color:#e8eaed;
  border:1px solid #2a3140; border-radius:9px;
  background:#0a0d12;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
  transition:border-color .15s, box-shadow .15s;
}
.save-input::placeholder{ color:#5b6472; font-weight:600; }
.save-input:focus{
  outline:none; border-color:#35c2ff;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 3px rgba(53,194,255,.18);
}
.save-name-echo{
  flex:0 0 auto; max-width:100%;
  padding:6px 10px; border-radius:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; color:#35ff9e;
  background:rgba(53,255,158,.08);
  border:1px solid rgba(53,255,158,.22);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.save-name-hint{ margin:9px 0 0; font-size:11.5px; color:#7f8896; }
.save-name-hint.warn{ color:#ffb020; }

/* ---- actions ------------------------------------------------------------- */
.save-actions{
  position:relative; z-index:4;
  display:flex; justify-content:center; align-items:center; gap:12px;
  flex-wrap:wrap; margin:0 0 6px;
}
.save-btn{
  padding:15px 34px !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:.01em;
  border-radius:11px !important;
  background:linear-gradient(135deg,#35ff9e,#35c2ff) !important;
  color:#06121a !important;
  box-shadow:0 12px 28px -10px rgba(53,194,255,.85), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.save-btn:not(:disabled):hover{ transform:translateY(-1px); filter:brightness(1.06); }
.save-btn:disabled{
  background:linear-gradient(135deg,#2a3140,#232935) !important;
  color:#6b7482 !important; box-shadow:none !important; cursor:not-allowed;
}
.save-replay{
  padding:11px 18px; font-size:12.5px; font-weight:700;
  color:#9aa0ac; background:transparent;
  border:1px solid #2a3140; border-radius:9px; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.save-replay:hover{ color:#e8eaed; border-color:#3a4353; }

/* ---- status + foot ------------------------------------------------------- */
#panel-export .usage-note,
#panel-export .export-status{ position:relative; z-index:4; text-align:center; }
#panel-export .export-status{ margin-top:10px; }
.save-foot{
  position:relative; z-index:4;
  margin:18px 0 0; text-align:center;
  font-size:11.5px; color:#6b7482;
}
.save-foot b{ color:#9aa0ac; }

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .save-badge{ animation:none; }
  .save-balloon{ display:none; }
  .save-confetti{ display:none; }
}

@media (max-width:760px){
  .save-rack{ padding:26px 16px 20px; border-radius:14px; }
  .save-name-echo{ flex-basis:100%; }
  .save-btn{ width:100%; }
  .save-replay{ width:100%; }
}

/* ---- validation shake ---------------------------------------------------- */
.save-input.shake{ animation:saveShake .42s cubic-bezier(.36,.07,.19,.97) both; border-color:#ff6b35 !important; }
@keyframes saveShake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-7px); }
  40%,60%{ transform:translateX(7px); }
}