@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ───── GENERAL BASE ───── */
* { box-sizing: border-box; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(140deg, #f6fbff 0%, #d6f2ff 50%, #f3fcff 100%);
  min-height: 100vh;
  color: #234;
  margin: 0;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed; z-index: 0;
  top: -20vh; left: 0; right: 0;
  width: 100vw; height: 50vh;
  background: radial-gradient(ellipse at 50% 0, #c3edff 0%, #b8e4fa 55%, transparent 85%);
  pointer-events: none;
  opacity: .6;
  filter: blur(10px);
}

/* ───── CONTAINER ───── */
.container {
  max-width: 880px;
  margin: 36px auto;
  padding: 30px 24px;
  background: linear-gradient(120deg, #fafdff 75%, #ecf7fc 100%);
  border-radius: 32px;
  box-shadow: 0 8px 40px 8px #beeaff2c, 0 2px 24px #b0e4ff20;
  position: relative;
  overflow: visible;
  z-index: 3;
}

/* ───── HEADER ───── */
.app-header {
  text-align: center;
  margin-bottom: 32px;
}
.app-header h1 {
  margin: 0;
  font-size: 2.2rem;
  color: #6bbdf4;
  letter-spacing: .02em;
  font-weight: 600;
  text-shadow: 0 2px 12px #b6e9ff88;
}

/* ───── STEPS BUBBLES & BAR ───── */
.steps-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
  position: relative;
  z-index: 1;
  min-height: 64px;
  user-select: none;
  overflow: visible;
}

.progress-bar-bg {
  position: absolute;
  left: 38px; right: 38px; top: 50%;
  height: 12px;
  background: #d0efff;
  border-radius: 7px;
  z-index: 0;
  transform: translateY(-50%);
  box-shadow: 0 1px 6px #bbe5ff18;
  pointer-events: none;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3ad8ff 0%, #11adff 85%);
  border-radius: 7px;
  width: 0;
  box-shadow: 0 2px 10px #38c7fc88;
  transition: width 0.9s cubic-bezier(.56,0,.33,1);
}

.steps-indicator .step {
  position: relative; z-index: 2; flex: 1; text-align: center;
  cursor: pointer; transition: all .43s cubic-bezier(.55,0,.16,1);
  margin-bottom: 10px; min-width: 75px;
}
.steps-indicator .step span {
  display: inline-block; width: 46px; height: 46px; line-height: 46px;
  border-radius: 50%;
  background: linear-gradient(160deg, #e8f8ff 60%, #bbecff 100%);
  color: #34a6ff; border: 2.5px solid #e7f4fa;
  font-weight: 700; font-size: 22px;
  margin-bottom: 3px;
  box-shadow: 0 2px 7px #c2f2ff9a;
  transition: box-shadow .2s, background .18s, color .18s, border .23s;
}
.steps-indicator .step small {
  display: block; font-size: 13px; color: #7cb8e5;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600; transition: color .21s;
}
.steps-indicator .step.active span,
.steps-indicator .step.completed span {
  background: linear-gradient(135deg, #2ad0ff 0%, #57c4ff 80%, #e9f7ff 100%);
  color: #fff; border: 2.5px solid #46baff;
  box-shadow: 0 4px 16px #55cdfdaa;
}
.steps-indicator .step.active small,
.steps-indicator .step.completed small {
  color: #1aabd7;
}
.steps-indicator .step.completed span {
  background: linear-gradient(135deg, #0aa1ff 10%, #57e1ff 90%);
  border-color: #12bbf8;
}
.steps-indicator .step:hover span {
  transform: scale(1.08);
  box-shadow: 0 0 20px #5fd9ff77;
  background: linear-gradient(145deg, #b1f3ff 70%, #13cdf9 100%);
  color: #fff; border-color: #18d8fe;
}
.steps-indicator .step.active { z-index: 5; }
.steps-indicator .step:first-child { margin-left: 0; }
.steps-indicator .step:last-child  { margin-right: 0; }

/* AURA FX */
.steps-indicator .aura {
  position: absolute; left: 50%; top: 50%;
  width: 62px; height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .9s cubic-bezier(.55,0,.1,1), box-shadow .7s;
  box-shadow: 0 0 32px 8px #22e2ff50, 0 0 70px 18px #3effee18;
  background: radial-gradient(circle at 50% 45%, #2eefff36 40%, transparent 100%);
}
.steps-indicator .step.completed .aura,
.steps-indicator .step.active .aura {
  opacity: 1;
}
.steps-indicator .step.active .aura {
  animation: blueAuraPulse 2s infinite alternate;
}
.steps-indicator .step.completed .aura {
  animation: blueAuraPulse 1.3s infinite alternate;
}
.steps-indicator .step[data-step="5"].active .aura,
.steps-indicator .step[data-step="5"].completed .aura {
  box-shadow: 0 0 40px 15px #14f695cc, 0 0 110px 30px #7bffc933;
  background: radial-gradient(circle at 50% 40%, #20f68844 40%, transparent 100%);
  animation: greenAuraPulse 1.7s infinite alternate;
}
@keyframes blueAuraPulse {
  from { opacity: .98; filter: blur(1.5px); }
  to   { opacity: .72; filter: blur(9px);   }
}
@keyframes greenAuraPulse {
  from { opacity: .98; filter: blur(2px);  }
  to   { opacity: .70; filter: blur(13px); }
}

/* ───── STEP SECTIONS (PURE FADE, NO JUMP) ───── */
/* ALL step sections are always present and stacked */
.step-section {
  position: absolute;
  left: 0; top: 0; width: 100%;
  min-height: 480px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 1.15s cubic-bezier(.7,0,.19,1);
  will-change: opacity;
  background: transparent; /* avoid any flicker */
  display: flex; /* always flex! */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.step-section.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 11;
  visibility: visible;
  /* optional: add fadeInUp if you want movement */
  animation: fadeInUp 1.15s cubic-bezier(.45,0,.12,1);
}

.step-section.fading-out {
  opacity: 0;
  pointer-events: none;
  z-index: 12; /* faded out sits above, so fades OVER old */
  visibility: visible;
  animation: fadeOutDown 1.15s cubic-bezier(.45,0,.12,1);
}

/* Animations for optional movement (not strictly needed for fade) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px);}
  to   { opacity: 1; transform: translateY(0);}
}
@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0);}
  to   { opacity: 0; transform: translateY(36px);}
}



/* ───── Inputs, Buttons, Gallery etc. bleiben unverändert ───── */
/* ...dein existierendes CSS ab hier weiterverwenden... */


/* ...DEIN REST BLEIBT UNVERÄNDERT... */
/* (z.B. Buttons, Inputs, Canvas, Gallery, Edit-Controls etc.) */
/* Einfach ab hier wie gehabt lassen! */


/* ...keep the rest of your CSS (buttons, forms, etc) the same as before... */



/* ───── INPUTS & BUTTONS ───── */
.text-input, .select-input {
  width: 100%;
  padding: 13px 18px;
  font-size: 17.5px;
  border: 2px solid #bce3fa;
  border-radius: 11px;
  background: #f5fcff;
  margin-bottom: 18px;
  color: #197dac;
  font-weight: 600;
  outline: none;
  transition: border-color .19s, background .17s;
  box-shadow: 0 2px 7px #d5f3ff0a;
}
.text-input:focus, .select-input:focus {
  border-color: #2ad0ff;
  background: #f1fbff;
}
.radio-group {
  display: flex; gap: 40px; margin-bottom: 30px;
  justify-content: center;
  padding: 8px 0;
}
.radio-group label {
  font-size: 18px; color: #2993c7;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 7px;
  transition: background .19s;
}
.radio-group input { margin-right: 8px; transform: scale(1.12);}
.radio-group label:hover { background: #c7f3ff77; }

/* ───── BUTTONS ───── */
.btn {
  padding: 12px 28px; font-size: 18px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, color .14s, transform .09s;
  margin: 0 9px 14px 0;
  box-shadow: 0 2px 10px #b8e8ff1a;
  background: linear-gradient(140deg, #f7fdff 50%, #c9eefd 100%);
  color: #1596c5;
}
.btn:active { transform: scale(.98);}
.btn:hover {
  background: linear-gradient(110deg, #e5f9ff 60%, #5ddbff 100%);
  color: #07c6fe;
  box-shadow: 0 2px 18px #62e8ff44;
}
.btn-primary { background: linear-gradient(130deg, #32cfff 60%, #6ee0ff 100%); color: #fff;}
.btn-primary:hover { background: linear-gradient(110deg, #53e2ff 60%, #159aff 100%); color: #fff;}
.btn-secondary { background: #e3e9ed; color: #2476b8;}
.btn-secondary:hover { background: #b3e3fa; color: #099bdd;}
.btn-warning { background: linear-gradient(120deg, #ffe288 65%, #ffeab8 100%); color: #b48a00;}
.btn-warning:hover { background: linear-gradient(110deg, #ffe498 55%, #ffcf44 100%); color: #b48a00;}
.btn-success { background: linear-gradient(130deg, #59f7b5 70%, #21e3b1 100%); color: #107d59;}
.btn-success:hover { background: linear-gradient(120deg, #55e0ad 80%, #13bd8f 100%);}
.btn-info { background: linear-gradient(130deg, #7eefff 50%, #27ccf9 100%); color: #177ea8;}
.btn-info:hover { background: linear-gradient(120deg, #41e2ff 70%, #0ca5e7 100%); color: #fff;}

/* ───── IMAGE SELECT & PREVIEWS ───── */
.image-select-group {
  display: flex; gap: 44px; margin-bottom: 24px; justify-content: center;
}
.select-block { flex: 1; text-align: center; }
.select-block label { font-size: 17px; color: #2291c8; font-weight: 700;}
.preview {
  width: 220px; height: 220px;
  background: linear-gradient(145deg, #e6f7ff 40%, #e7fcff 100%);
  border: 2.5px dashed #a8e0f7;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin: 13px auto 0 auto;
  transition: border-color .18s, background .17s;
  box-shadow: 0 2px 12px #b3e8ff29;
}
.preview img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: all 0.22s;
  border-radius: 12px;
}

/* ───── UPLOAD BLOCK ───── */
.upload-block { margin-bottom: 28px; text-align: center;}
.upload-block label {
  display: inline-block;
  padding: 11px 26px;
  background: linear-gradient(135deg, #ffe288 60%, #ffeab8 100%);
  color: #b48a00;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16.7px;
  transition: background .18s, color .18s;
  margin-top: 7px;
}
.upload-block label:hover { background: #fff6c6; color: #ad7b00;}
.upload-block input { display: none; }

/* ───── CANVAS + CONTAINER ───── */
.canvas-container {
  max-width: 630px;
  margin: 0 auto 22px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #eafcff 55%, #caeaff 100%);
  border: 3px solid #b7e2fd;
  border-radius: 24px;
  box-shadow: 0 3px 22px #75e2ff29;
  padding: 18px;
}
.canvas-container canvas {
  display: block;
  background: #0f253a;
  border-radius: 15px;
  outline: none;
  max-width: 100%;
  height: auto; /* always keeps image ratio */
  box-shadow: 0 3px 24px #31c7ff13;
}

/* Responsive for mobile */
@media (max-width: 650px) {
  .canvas-container { max-width: 97vw; min-width: 0; padding: 4vw;}
  .preview { width: 140px; height: 140px;}
  .image-select-group { flex-direction: column; gap: 14px;}
}

/* ───── EDIT CONTROLS ───── */
.edit-controls {
  display: flex; flex-direction: column; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
}
.edit-controls details {
  width: 100%;
  margin-bottom: 7px;
  border: none;
}

/* Style the summary like a Wii/DS button */
.edit-controls summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px;
  background: linear-gradient(110deg, #e2f7ff 60%, #d4f6ff 100%);
  border: 2px solid #b7e2fd;
  border-radius: 10px;
  color: #1ca5e9;
  font-weight: 700;
  font-size: 17.5px;
  transition: background .17s;
  box-shadow: 0 2px 8px #bef3ff15;
}
.edit-controls summary:hover { background: #c5efff; }
.edit-controls summary::-webkit-details-marker, .edit-controls summary::marker { display: none; }
.edit-controls summary::after {
  content: '▶';
  font-size: 12px;
  transition: transform 0.23s;
  color: #26bcfd;
  margin-left: 9px;
}
.edit-controls details[open] summary::after { transform: rotate(90deg); }

.edit-controls .panel-content {
  padding: 14px 16px;
  border: 1.5px solid #b7e2fd;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(108deg, #eefdff 80%, #e1f6ff 100%);
  animation: fadeInUp 0.35s;
  margin-bottom: 2px;
}
.edit-controls label {
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  color: #2291c8;
  margin-bottom: 4px;
  font-weight: 700;
}
.edit-controls input[type=range] {
  width: 155px;
  margin-bottom: 8px;
}

/* ───── MEGA GALLERY ───── */
.mega-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap: 23px;
  margin-bottom: 30px;
}
.thumb-card {
  background: linear-gradient(120deg, #eafdff 60%, #caeaff 100%);
  border-radius: 15px;
  box-shadow: 0 3px 16px #b7eafd1a;
  overflow: hidden;
  text-align: center;
  transition: transform .2s;
  border: 2px solid #bceafd;
}
.thumb-card:hover { transform: translateY(-6px);}
.thumb-card img {
  width: 100%; height: 120px; object-fit: cover;
}
.thumb-card a {
  display: block; padding: 9px;
  background: #20c3f7; color: #fff;
  text-decoration: none; font-size: 14px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.thumb-card a:hover { background: #11a7e6; }

/* ───── Wii-style Loading Overlay ───── */
#mega-loading {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #d9f3fe, #c3e4ff 85%);
  backdrop-filter: blur(9px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  animation: fadeInUp .7s;
}
#mega-loading.show { display: flex; }
.loading-box {
  text-align: center;
  color: #08a8ea;
  font-weight: 700;
  font-size: 1.7rem;
}
.wii-orb {
  width: 74px; height: 74px; margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 35%, #a6f1ff 0%, #24c2ff 80%);
  box-shadow: 0 0 24px #26d7ff66, 0 3px 15px #81eaff55;
  animation: spinOrb 1.18s linear infinite;
  border: 3.5px solid #20baff90;
}
@keyframes spinOrb {
  0%   { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(180deg) scale(1.09);}
  100% { transform: rotate(360deg) scale(1);}
}

/* ───── Animations ───── */
@keyframes gradientWave {
  0% { background-position: 0% 50%;}
  50% { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}

@media (max-width: 540px) {
  .container { max-width: 99vw; padding: 9vw 2vw;}
  .steps-indicator .step span { width: 34px; height: 34px; font-size: 15px;}
  .app-header h1 { font-size: 1.5rem;}
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ...keep everything above here the same... */

/* ───── STEPS BUBBLES ───── */
.steps-indicator {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 42px;
  position: relative; z-index: 1;
  user-select: none;
  min-height: 64px;
  overflow: visible;
}
.steps-indicator .step {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  cursor: pointer;
  transition: all .38s cubic-bezier(.55,0,.16,1); /* smoother */
  margin-bottom: 10px;
  min-width: 75px;
}
.steps-indicator .step span {
  display: inline-block;
  width: 46px; height: 46px; line-height: 46px;
  border-radius: 50%;
  background: linear-gradient(160deg, #e8f8ff 60%, #bbecff 100%);
  color: #34a6ff;
  border: 2.5px solid #e7f4fa;
  font-weight: 700; font-size: 22px;
  margin-bottom: 3px;
  box-shadow: 0 2px 7px #c2f2ff9a, 0 0 0 #39c1ff00;
  transition: box-shadow .2s, background .18s, color .18s, border .23s;
}
.steps-indicator .step small {
  display: block; font-size: 13px; color: #7cb8e5;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600;
  transition: color .21s;
}
.steps-indicator .step.active span,
.steps-indicator .step.completed span {
  background: linear-gradient(135deg, #2ad0ff 0%, #57c4ff 80%, #e9f7ff 100%);
  color: #fff;
  border: 2.5px solid #46baff;
  box-shadow: 0 4px 16px #55cdfdaa, 0 0 0 #80e4ff66;
}
.steps-indicator .step.active small,
.steps-indicator .step.completed small {
  color: #1aabd7;
}
.steps-indicator .step.completed span {
  background: linear-gradient(135deg, #0aa1ff 10%, #57e1ff 90%);
  border-color: #12bbf8;
}
.steps-indicator .step:hover span {
  transform: scale(1.08);
  box-shadow: 0 0 20px #5fd9ff77, 0 0 0 #7fdfff22;
  background: linear-gradient(145deg, #b1f3ff 70%, #13cdf9 100%);
  color: #fff;
  border-color: #18d8fe;
}
.steps-indicator .step.active {
  z-index: 5;
}
.steps-indicator .step:last-child { margin-right: 0; }
.steps-indicator .step:first-child { margin-left: 0; }

/* Step Aura effect (no cubes, just glowing aura) */
.steps-indicator .aura {
  position: absolute;
  left: 50%; top: 50%;
  width: 62px; height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(.55,0,.1,1), box-shadow 0.5s cubic-bezier(.45,0,.15,1);
  box-shadow: 0 0 32px 8px #22e2ff50, 0 0 70px 18px #3effee18;
  background: radial-gradient(circle at 50% 45%, #2eefff36 40%, transparent 100%);
}
.steps-indicator .step.completed .aura,
.steps-indicator .step.active .aura {
  opacity: 1;
}
.steps-indicator .step.active .aura {
  animation: blueAuraPulse 2s infinite alternate;
}
.steps-indicator .step.completed .aura {
  animation: blueAuraPulse 1.4s infinite alternate;
}
.steps-indicator .step[data-step="5"].active .aura,
.steps-indicator .step[data-step="5"].completed .aura {
  box-shadow: 0 0 40px 15px #14f695cc, 0 0 110px 30px #7bffc933;
  background: radial-gradient(circle at 50% 40%, #20f68844 40%, transparent 100%);
  animation: greenAuraPulse 1.9s infinite alternate;
}
@keyframes blueAuraPulse {
  from { opacity: .98; filter: blur(1.5px);}
  to   { opacity: .72; filter: blur(9px);}
}
@keyframes greenAuraPulse {
  from { opacity: .98; filter: blur(2px);}
  to   { opacity: .7; filter: blur(13px);}
}

/* Progress Bar */
.progress-bar-bg {
  position: absolute;
  left: 38px; right: 38px; top: 50%;
  height: 12px;
  background: #d0efff;
  border-radius: 7px;
  z-index: 0;
  transform: translateY(-50%);
  box-shadow: 0 1px 6px #bbe5ff18;
  pointer-events: none;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3ad8ff 0%, #11adff 85%);
  border-radius: 7px;
  width: 0;
  box-shadow: 0 2px 10px #38c7fc88;
  transition: width .55s cubic-bezier(.56,0,.33,1);
}

/* ───── STEP SECTIONS & FADE ANIMATION ───── */
.step-section {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%; left: 0; top: 0;
  transition: opacity .85s cubic-bezier(.68,0,.24,1), visibility .85s;
  z-index: 10;
}
.step-section.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  position: relative;
  animation: fadeInUp 0.7s cubic-bezier(.45,0,.15,1);
  z-index: 11;
}
.step-section.fading-out {
  animation: fadeOutDown .88s cubic-bezier(.55,0,.16,1) forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px);}
  to { opacity: 1; transform: translateY(0);}
}
@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0);}
  to { opacity: 0; transform: translateY(52px);}
}


#fx-bg-cubes {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* optional: fade in/out */
  transition: opacity .8s;
}
.fx-cube {
  position: absolute;
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #e3fcff 30%, #4fd1ff 100%);
  box-shadow: 0 8px 38px #64e7ff7c, 0 0 18px #fff3;
  border-radius: 18px;
  opacity: 0.7;
  filter: blur(0.5px);
  /* Optional: glass effect */
  backdrop-filter: blur(1.2px) brightness(1.1);
  /* 3D cube illusion via box-shadow & rotation */
  transform: rotate3d(1,1,0,23deg) scale(1);
  animation: floatCube 9s infinite alternate cubic-bezier(.54,0,.24,1);
}
@keyframes floatCube {
  0%   { transform: translateY(0) rotate3d(1,1,0,12deg) scale(1);}
  100% { transform: translateY(-80px) rotate3d(1,1,0,32deg) scale(1.13);}
}
#fx-bg-cubes {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 1; /* Behind .container, in front of bg */
  pointer-events: none;
  transition: opacity .7s;
}

.fx-cube {
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 8px 42px #85e4ff66, 0 0 18px #fff6;
  opacity: 0.65;
  background: linear-gradient(135deg, #c2f4ff 40%, #2de2ff 100%);
  filter: blur(0.5px) brightness(1.13);
  transform: rotate3d(1,1,0,23deg) scale(1);
  animation: floatCube 9s infinite alternate cubic-bezier(.54,0,.24,1);
  will-change: transform, opacity;
  backdrop-filter: blur(1.2px) brightness(1.12);
  transition: background .6s, box-shadow .6s;
}
.fx-cube.green {
  background: linear-gradient(133deg, #cfffc2 10%, #51ffb8 80%);
  box-shadow: 0 10px 50px #5cffb055, 0 0 28px #aaffee44;
}
.fx-cube.teal {
  background: linear-gradient(140deg, #beffe9 40%, #25fff8 100%);
  box-shadow: 0 10px 50px #50ffe888, 0 0 24px #aafffa44;
}
.fx-cube.special {
  opacity: 0.88;
  filter: blur(0px) brightness(1.22);
  border-radius: 32px;
  box-shadow: 0 18px 78px #bbffb377, 0 0 32px #9fffde99;
  background: linear-gradient(120deg,#eaffff 15%,#91ffd4 95%);
}

@keyframes floatCube {
  0%   { transform: translateY(0) rotate3d(1,1,0,17deg) scale(1);}
  100% { transform: translateY(-100px) rotate3d(1,1,0,35deg) scale(1.18);}
}

#fx-bg-cubes {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- Aero Bokeh (balls) --- */
.fx-bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 70%, #3ffcf7 110%);
  filter: blur(3.5px) brightness(1.12);
  opacity: 0.34;
  will-change: transform, opacity;
  animation:
    fadeInFloat 1.6s cubic-bezier(.32,0,.22,1.0),
    floatBubble 11s infinite alternate cubic-bezier(.32,0,.22,1.0);
  transition: background .7s, opacity .8s;
}

.fx-bokeh.green {
  background: radial-gradient(circle at 45% 40%, #fff6 60%, #76ff7e 120%);
  opacity: 0.46;
}
.fx-bokeh.teal {
  background: radial-gradient(circle at 42% 35%, #fff6 60%, #45fff2 120%);
  opacity: 0.41;
}

@keyframes floatBubble {
  0% { transform: translateY(0) scale(1);}
  100% { transform: translateY(-60px) scale(1.19);}
}

/* --- Aero Cubes: vertical, glassy, 3D-pillar --- */
#fx-bg-cubes {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- Aero Bokeh (balls) --- */
.fx-bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 70%, #3ffcf7 110%);
  filter: blur(3.5px) brightness(1.12);
  opacity: 0.34;
  will-change: transform, opacity;
  animation:
    fadeInFloat 1.6s cubic-bezier(.32,0,.22,1.0),
    floatBubble 11s infinite alternate cubic-bezier(.32,0,.22,1.0);
  transition: background .7s, opacity .8s;
}

.fx-bokeh.green {
  background: radial-gradient(circle at 45% 40%, #fff6 60%, #76ff7e 120%);
  opacity: 0.46;
}
.fx-bokeh.teal {
  background: radial-gradient(circle at 42% 35%, #fff6 60%, #45fff2 120%);
  opacity: 0.41;
}

@keyframes floatBubble {
  0% { transform: translateY(0) scale(1);}
  100% { transform: translateY(-60px) scale(1.19);}
}

/* --- Aero Cubes: vertical, glassy, 3D-pillar --- */
.fx-cube {
  position: absolute;
  /* Size set in JS, but these are for fallback/default */
  width: 34px;
  height: 90px;
  border-radius: 14px 14px 18px 18px / 32px 32px 20px 20px;
  background: linear-gradient(110deg, #e8fcff 22%, #55ecff 60%, #35d2e5 100%);
  box-shadow:
    0 4px 32px #22e2ff33,
    0 0px 25px #20ffe738;
  filter: blur(0.4px) brightness(1.09);
  will-change: transform, opacity;
  opacity: 0.25;
  animation:
    fadeInFloat 1.25s cubic-bezier(.32,0,.22,1.0),
    floatCube 10s infinite alternate cubic-bezier(.39,0,.23,1.0);
  transition: background .5s, opacity .9s;
}

.fx-cube.teal {
  background: linear-gradient(112deg, #eafffa 22%, #43ffe7 70%, #20bfb1 100%);
  opacity: 0.31;
}
.fx-cube.green {
  background: linear-gradient(115deg, #e6ffec 18%, #59ff8a 75%, #24fa76 120%);
  opacity: 0.38;
}
.fx-cube.special {
  border-radius: 20px 20px 26px 26px / 38px 38px 24px 24px;
  background: linear-gradient(130deg, #e6fff8 20%, #83ffc2 80%, #20fe8a 120%);
  box-shadow:
    0 10px 40px #1fffcc4a,
    0 8px 34px #20fae065,
    0 7px 22px #33ffce99;
  opacity: 0.43;
}

@keyframes floatCube {
  0%   { transform: translateY(0);}
  100% { transform: translateY(-42px);}
}

/* --- Fade-in for both cubes and bokeh --- */
@keyframes fadeInFloat {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 1; }
}

/* --- Glass overlay for Aero (optional!) --- */
#fx-glass-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  background: linear-gradient(135deg, #eefcfff0 0%, #d9f3ff88 60%, #a7f3ff44 100%);
  mix-blend-mode: lighten;
  opacity: 0.13;
  transition: opacity 1.1s cubic-bezier(.52,0,.12,1);
  z-index: 0;
}

/* --- Keep your main UI above the FX --- */
.container,
#mega-loading,
.step-section,
.steps-indicator,
.app-header {
  position: relative;
  z-index: 2;
}
#mini-preview-window { display: flex !important; 
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  background: rgba(20,30,55,0.92);
  border-radius: 16px;
  box-shadow: 0 2px 24px rgba(0,0,32,0.21);
  padding: 18px;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.2s;
  z-index: 50
}
#mini-preview-canvas {
  display: block;
  background: #111;
  border-radius: 8px;
  max-width: 100%;
  z-index: 50
}


@media (max-width: 900px) {
  #mini-preview-window { right: 10px; bottom: 10px; width: 112px; height: 112px; }
  #mini-preview-canvas { width: 96px !important; height: 96px !important; }
}
#daily-todo-box {
  position: fixed;
  top: 24px;
  right: 30px;
  background: rgba(255,255,255,0.98);
  border-radius: 16px;
  box-shadow: 0 4px 18px #beeaff49;
  padding: 18px 26px 16px 22px;
  z-index: 9999;
  min-width: 200px;
  font-family: 'Inter', Arial, sans-serif;
}
#daily-todo-box h3 {
  font-size: 1.13em;
  margin: 0 0 7px 0;
  color: #26a7de;
  letter-spacing: 0.01em;
}
#todo-list {
  list-style: none;
  margin: 0; padding: 0;
}
#todo-list li {
  margin-bottom: 6px;
  font-size: 1em;
  color: #235170;
  display: flex;
  align-items: center;
  gap: 6px;
}
#todo-list input[type="checkbox"] {
  accent-color: #26c7fa;
  width: 17px; height: 17px;
}
@media (max-width: 700px) {
  #daily-todo-box {
    top: 8px; right: 3vw; padding: 11px 10px;
    min-width: 120px; font-size: 0.97em;
  }
  #daily-todo-box h3 { font-size: 1em;}
}
/* (Optional, since we do inline style in JS) */
#daily-todo-box.green {
  background: linear-gradient(120deg, #d5ffe6 60%, #a2f4c3 100%);
  box-shadow: 0 4px 22px #71e3a3bb;
}
.corpus-upload-details[open] .corpus-upload-panel {
  margin: 14px 0 0 0;
  background: linear-gradient(120deg, #fafdff 80%, #e1f4fb 100%);
  border-radius: 13px;
  box-shadow: 0 3px 16px #beeaff1a;
  padding: 16px 20px 13px 20px;
  transition: box-shadow .23s;
}
.corpus-upload-panel form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}
.corpus-upload-panel .text-input, 
.corpus-upload-panel textarea {
  min-width: 170px;
  font-size: 1em;
}
.corpus-upload-panel textarea { font-family: inherit; }
.corpus-upload-panel .btn { margin-bottom: 0; }
.or-separator {
  text-align: center; color: #8bd3fc; font-weight: 700; letter-spacing: 0.05em;
  margin: 8px 0;
}
.style-list-block {
  margin-top: 14px;
  font-size: 0.97em;
  background: #f5fcff;
  border-radius: 7px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px #caecff0a;
}
.corpus-style-list {
  padding: 0 0 0 12px; margin: 5px 0 0 0;
  list-style: disc;
  color: #219fd6;
  font-size: 1em;
  columns: 2;
}
@media (max-width:600px) {
  .corpus-upload-panel form { flex-direction: column; gap: 7px; }
  .corpus-style-list { columns: 1;}
}
#qr-modal { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:1000; }
/* ——— Frutiger-Aero Green Segmented Radios ——— */
#second-mode-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 10px 0 18px;
}

/* make each label a glossy pill button */
#second-mode-group > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  color: #0f7a58;
  user-select: none;

  background:
    linear-gradient(180deg, #effff7 0%, #d7ffe9 55%, #c6ffe1 100%);
  border: 2px solid #9df3cf;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 28px #74ffcc2b,
    0 2px 12px #27eaa61e;
  transition: transform .08s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease, color .25s ease;
}

/* hide native radios but keep accessible */
#second-mode-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* little aero dot */
#second-mode-group > label::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #2de68b;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #b6ffe1 65%, #78f3bd 100%);
  box-shadow:
    inset 0 0 4px #ffffffaa,
    0 0 10px #79ffd64d;
}

/* hover */
#second-mode-group > label:hover {
  background: linear-gradient(180deg, #e9fff5 0%, #cffff0 55%, #baffdf 100%);
  border-color: #79efbe;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 32px #6affca33,
    0 3px 14px #1de6a126;
}

/* active press */
#second-mode-group > label:active { transform: translateY(1px) }

/* FOCUS VISIBLE (keyboard users) */
#second-mode-group > label:focus-within {
  outline: 3px solid #58f0b5;
  outline-offset: 2px;
}

/* CHECKED state — uses :has() to style label if its inner input is checked */
#second-mode-group > label:has(input[type="radio"]:checked) {
  color: #094d38;
  background:
    radial-gradient(120px 60px at 35% 15%, #ffffffaa 0%, #ffffff00 65%),
    linear-gradient(180deg, #d3ffe9 0%, #aaf8d9 55%, #78f0c3 100%);
  border-color: #52ebb1;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 12px 36px #66ffcd55,
    0 4px 18px #26e8a93a;
}

/* checked dot glow */
#second-mode-group > label:has(input[type="radio"]:checked)::before {
  border-color: #14cf7d;
  background:
    radial-gradient(circle at 40% 35%, #ffffff 0%, #a7ffd7 60%, #4bf0a8 100%);
  box-shadow:
    inset 0 0 6px #ffffffaa,
    0 0 16px #4af7b3aa;
}

/* compact on mobile; no overlap */
@media (max-width: 520px) {
  #second-mode-group { gap: 10px }
  #second-mode-group > label { padding: 10px 14px; font-size: 15px }
}
/* —— Base layout: side-by-side, no overlap —— */
.radio-group.aero-pills {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}

/* hide radios (keep accessible) */
.radio-group.aero-pills > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* theme vars (cyan variant overrides below) */
.radio-group.aero-pills {
  --pill-fg: #0b5f7a;
  --pill-fg-active: #093d4f;
  --pill-bd: #8fe5ff;
  --pill-bd-active: #56d4ff;
  --pill-grad-1: #f0fcff;
  --pill-grad-2: #d7f4ff;
  --pill-grad-3: #c7eeff;

  --pill-grad-1-active: #d9f6ff;
  --pill-grad-2-active: #b8ecff;
  --pill-grad-3-active: #93e0ff;

  --dot-bd: #2bc1ff;
  --dot-bd-active: #10a9e6;
  --dot-grad-1: #ffffff;
  --dot-grad-2: #bdeeff;
  --dot-grad-3: #83dcff;
  --dot-grad-2-active: #a6e6ff;
  --dot-grad-3-active: #54cdf7;
}

/* pill button */
.radio-group.aero-pills > label.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  user-select: none;

  color: var(--pill-fg);
  background: linear-gradient(180deg, var(--pill-grad-1) 0%, var(--pill-grad-2) 55%, var(--pill-grad-3) 100%);
  border: 2px solid var(--pill-bd);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 28px #7fe4ff2b,
    0 2px 12px #64d9ff1e;
  transition: transform .08s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease, color .25s ease;
}

/* aero dot */
.radio-group.aero-pills > label.pill::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--dot-bd);
  background: radial-gradient(circle at 35% 35%, var(--dot-grad-1) 0%, var(--dot-grad-2) 65%, var(--dot-grad-3) 100%);
  box-shadow: inset 0 0 4px #ffffffaa, 0 0 10px #7de8ff4d;
}

/* hover / press */
.radio-group.aero-pills > label.pill:hover {
  background: linear-gradient(180deg, #e9fbff 0%, #d1f3ff 55%, #bfeeff 100%);
  border-color: #7ddfff;
  box-shadow: inset 0 1px 0 #ffffff, 0 10px 32px #79e4ff33, 0 3px 14px #37cdf926;
}
.radio-group.aero-pills > label.pill:active { transform: translateY(1px) }

/* keyboard focus (goes on the hidden input) */
.radio-group.aero-pills > input[type="radio"]:focus + label.pill {
  outline: 3px solid #53d8ff; outline-offset: 2px;
}

/* checked */
.radio-group.aero-pills > input[type="radio"]:checked + label.pill {
  color: var(--pill-fg-active);
  background:
    radial-gradient(120px 60px at 35% 15%, #ffffffbb 0%, #ffffff00 65%),
    linear-gradient(180deg, var(--pill-grad-1-active) 0%, var(--pill-grad-2-active) 55%, var(--pill-grad-3-active) 100%);
  border-color: var(--pill-bd-active);
  box-shadow: inset 0 1px 0 #ffffff, 0 12px 36px #7fe4ff55, 0 4px 18px #5bd4ff3a;
}
.radio-group.aero-pills > input[type="radio"]:checked + label.pill::before {
  border-color: var(--dot-bd-active);
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, var(--dot-grad-2-active) 60%, var(--dot-grad-3-active) 100%);
  box-shadow: inset 0 0 6px #ffffffaa, 0 0 16px #74e0ffaa;
}

/* small screens */
@media (max-width: 520px) {
  .radio-group.aero-pills { gap: 10px }
  .radio-group.aero-pills > label.pill { padding: 10px 14px; font-size: 15px }
}

/* —— Cyan modifier (if you want to tweak hues later) —— */
.radio-group.aero-pills--cyan {
  /* you can override the vars here to shift hue/sat/bright */
  --pill-fg: #0c6a86;
  --pill-fg-active: #084459;
  --pill-bd: #86defc;
  --pill-bd-active: #40d0ff;

  --pill-grad-1: #f0fbff;
  --pill-grad-2: #d9f3ff;
  --pill-grad-3: #c8eeff;

  --pill-grad-1-active: #d8f4ff;
  --pill-grad-2-active: #bdeaff;
  --pill-grad-3-active: #8fddff;

  --dot-bd: #28bfff;
  --dot-bd-active: #0aa9ea;
  --dot-grad-2: #b8ecff;
  --dot-grad-3: #7fd9ff;
  --dot-grad-2-active: #a2e5ff;
  --dot-grad-3-active: #4fcbff;
}
/* One centered rail for everything in Step 2 */
#step-2 { --rail: 760px; }
#step-2 > *:not(h2) { width: min(var(--rail), 100%); margin-inline: auto; }

/* Upload buttons row (two equal columns, centered) */
#step-2 .file-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:18px;
  align-items:center;
  justify-items:center;
  margin:14px auto 10px;
}
#step-2 .file-row form{ margin:0 !important; width:100%; display:flex; }
#step-2 .file-row label.btn-aero-cyan{
  width:100%;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Make sure no global .btn rules bleed into these labels */
#step-2 .file-row label.btn-aero-cyan.btn { all: unset; }      /* if .btn is still present by accident */
#step-2 .file-row label.btn-aero-cyan { all: revert; }         /* then re-apply our cyan look */
#step-2 .file-row label.btn-aero-cyan{
  /* re-apply your cyan pill exactly */
  --fg:#0b6a86; --fg-hover:#095a72; --fg-active:#07465a;
  --bd:#7fe0ff; --bd-hover:#54d3ff; --bd-active:#2fc8ff;
  background:
    radial-gradient(120px 60px at 30% 15%, #ffffffb8 0%, #ffffff00 65%),
    linear-gradient(180deg, #f0fbff 0%, #d9f3ff 55%, #c8eeff 100%);
  color:var(--fg);
  border:2px solid var(--bd);
  border-radius:14px;
  padding:12px 20px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 #fff, 0 12px 32px #79e4ff2e, 0 3px 14px #4fd4ff26;
  transition:background .25s, border-color .2s, color .2s, box-shadow .25s, transform .08s;
  cursor:pointer; text-decoration:none; gap:10px;
}
#step-2 .file-row label.btn-aero-cyan:hover{
  background:
    radial-gradient(120px 60px at 32% 14%, #ffffffc2 0%, #ffffff00 65%),
    linear-gradient(180deg, #e9fbff 0%, #d1f3ff 55%, #bfeeff 100%);
  color:var(--fg-hover); border-color:var(--bd-hover);
  box-shadow:inset 0 1px 0 #fff, 0 14px 36px #86e8ff3b, 0 4px 18px #5bd4ff33;
}
#step-2 .file-row label.btn-aero-cyan:active{
  transform:translateY(1px); color:var(--fg-active); border-color:var(--bd-active);
}

/* Second-phrase radios: match exactly the same grid/rail */
#second-mode-group{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:18px; align-items:center; justify-items:center;
  margin:6px auto 12px !important;
}
#second-mode-group > label{
  width:100%; height:52px; display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
}

/* Back / Next row: same rail + columns => perfect symmetry */
#step-2 .nav-buttons{
  display:grid; grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:18px; align-items:center; justify-items:center;
  width:min(var(--rail),100%); margin:12px auto 0;
}
#step-2 .nav-buttons .btn{ margin:0; height:48px; line-height:1; min-width:220px; }

/* Mobile: stack cleanly but centered */
@media (max-width:640px){
  #step-2{ --rail:96vw; }
  #step-2 .file-row,
  #second-mode-group,
  #step-2 .nav-buttons{ grid-template-columns:1fr; }
  #step-2 .file-row label.btn-aero-cyan,
  #second-mode-group > label,
  #step-2 .nav-buttons .btn{ width:100%; }
}
/* ── STEP 2: one centered rail + perfect two-column symmetry ───────────── */
#step-2 { --rail: 760px; --col-min: 320px; }           /* tweak rail/column if you want */
#step-2 > *:not(h2) {
  width: min(var(--rail), 100%);
  margin-left: auto;
  margin-right: auto;
}

/* 1) Upload buttons row (keeps your cyan style) */
#step-2 .file-row{
  /* keep your own look but make the columns equal & centered */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px auto 10px;
}
#step-2 .file-row form{
  flex: 1 1 var(--col-min);       /* equal columns */
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 !important;           /* stop tiny shifts */
}
#step-2 .file-row label.btn-aero-cyan{
  width: 100%;
  height: 52px;
  line-height: 1;
}

/* 2) Second-phrase radios row – same two columns */
#second-mode-group{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 6px auto 12px !important;
}
#second-mode-group > label{
  flex: 1 1 var(--col-min);       /* equal columns */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 100%;
  line-height: 1;
  padding: 10px 16px;
}

/* 3) Back / Next row – same rail + columns => perfect symmetry */
#step-2 .nav-buttons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  width: min(var(--rail), 100%);
  margin: 12px auto 0;
}
#step-2 .nav-buttons .btn{
  flex: 1 1 var(--col-min);
  height: 48px;
  line-height: 1;
  min-width: 0;                   /* let them share space evenly */
  margin: 0;                      /* kill leftover global margins */
}

/* Mobile: stack neatly but stay centered */
@media (max-width: 640px){
  #step-2 { --rail: 96vw; --col-min: 280px; }
  #step-2 .file-row form,
  #second-mode-group > label,
  #step-2 .nav-buttons .btn { flex: 1 1 100%; width: 100%; }
}

/* ===== Canvas drag UX (prevents iOS scroll/zoom while dragging) ===== */
#edit-canvas,
.canvas-wrap {
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ===== Performance mode toggles via <html data-perf="lite"> ===== */
:root {
  --fx-blur: 10px;
  --fx-shadow: 24px;
  --anim-dur: 600ms;
}

html[data-perf="lite"] {
  --fx-blur: 0px;
  --fx-shadow: 8px;
  --anim-dur: 0ms;
}

/* Example: tone down heavy visuals in lite mode */
.fx-cube,
.fx-bokeh {
  filter: blur(var(--fx-blur));
  transition: filter var(--anim-dur), opacity var(--anim-dur);
}
html[data-perf="lite"] .fx-cube,
html[data-perf="lite"] .fx-bokeh {
  opacity: 0.6;
}

.card,
.panel {
  box-shadow: 0 10px var(--fx-shadow) rgba(0,0,0,.18);
}



/* Optional: mini nudge pad layout (if you add it) */
#nudge-pad {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .5rem;
}
#nudge-pad button {
  padding: .4rem .6rem;
  border-radius: .5rem;
  border: 1px solid #ddd;
  background: #fff;
}

/* ——— Artist of the Week ——— */
.aotw{
  position: fixed;
  top: clamp(8px, 2vw, 18px);
  left: clamp(8px, 2vw, 18px);
  width: 190px;
  height: 190px;
  border-radius: 22px;
  padding: 10px;
  z-index: 8; /* raise or lower to sit behind/above your UI as needed */

  /* Frutiger Aero-ish glass + color blobs */
  background:
    radial-gradient(140px 100px at 15% 10%, rgba(0, 255, 200, .28), transparent 60%),
    radial-gradient(160px 130px at 85% 80%, rgba(0, 170, 255, .26), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.40), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.65);
  box-shadow:
    0 12px 36px rgba(0, 185, 255, .25),
    inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  animation: aotwPulse 4.2s ease-in-out infinite;
}

.aotw a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  text-decoration:none;
}

.aotw img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 14px;
  filter: saturate(1.15) contrast(1.05);
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* glossy highlight */
.aotw a::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-30%;
  height:55%;
  background: linear-gradient(to bottom, rgba(255,255,255,.70), rgba(255,255,255,0));
  pointer-events: none;
  mix-blend-mode: screen;
}

/* soft aura ring */
.aotw a::after{
  content:"";
  position:absolute;
  inset:-30%;
  border-radius: 30px;
  box-shadow: 0 0 60px 25px rgba(0, 255, 200, .15);
  pointer-events:none;
  animation: aotwAura 6s ease-in-out infinite;
}

/* Badge pill */
.aotw-badge{
  position:absolute;
  top:8px; left:8px; right:8px;
  display:inline-block;
  padding:6px 10px;
  font: 600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing:.4px;
  text-transform: uppercase;
  color:#043c3a;
  text-align:center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
  box-shadow:
    0 6px 20px rgba(0, 200, 255, .25),
    inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* hover focus */
.aotw:hover img, .aotw:focus-within img{
  transform: scale(1.06);
  filter: saturate(1.25) contrast(1.1);
}

/* subtle pulsing glow */
@keyframes aotwPulse{
  0%,100%{
    box-shadow:
      0 12px 36px rgba(0,185,255,.25),
      inset 0 1px 0 rgba(255,255,255,.5);
  }
  50%{
    box-shadow:
      0 18px 48px rgba(0,185,255,.45),
      0 0 35px rgba(0,255,200,.18),
      inset 0 1px 0 rgba(255,255,255,.6);
  }
}

/* aura breathing */
@keyframes aotwAura{
  0%,100%{ opacity:.35; transform: scale(1); }
  50%   { opacity:.6;  transform: scale(1.04); }
}

/* Small screens — keep it neat */
@media (max-width: 560px){
  .aotw{
    width: 140px;
    height: 140px;
    border-radius: 18px;
    padding: 8px;
  }
  .aotw-badge{ font-size:11px; padding:5px 8px; }
}

/* Performance-lite mode: calmer visuals */
html[data-perf="lite"] .aotw{
  animation: none;
  box-shadow: 0 8px 22px rgba(0,185,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
}
html[data-perf="lite"] .aotw a::after{ display:none; }
 /* Hide any stray link text but keep badge visible */
.aotw a{
  text-decoration: none;
  color: transparent;    /* in case text nodes slip in */
  font-size: 0;          /* collapses accidental link text */
}
.aotw-badge{
  font-size: 12px;       /* restore size for the visible label */
  color: #043c3a;        /* already set; ensures it shows despite parent color */
}
/* --- Phone layout: hide tasks, move AOTW to the RIGHT --- */
@media (max-width: 768px){
  /* hide the daily tasks on phones */
  #daily-todo-box{
    display: none !important;
  }

  /* pin AOTW to the top-right on phones */
  .aotw{
    /* cancel desktop left, use right instead */
    left: auto !important;
    right: clamp(8px, 2vw, 18px) !important;

    /* respect notches / dynamic island when possible */
    top: max(clamp(8px, 2vw, 18px), env(safe-area-inset-top, 0px));
    z-index: 8; /* adjust if you need it above/below other UI */

    /* optional: slightly smaller on phones (you already shrink at 560px) */
    width: 160px;
    height: 160px;
  }
}

/* keep your existing 560px tweaks — they’ll stack with the right-side move */
@media (max-width: 560px){
  .aotw{
    width: 140px;
    height: 140px;
    border-radius: 18px;
    padding: 8px;
  }
  .aotw-badge{ font-size:11px; padding:5px 8px; }
}
/* Phone: hide TikTok Remix / DAW button */
/* Phone-only: hide the TikTok Remix DAW button by its onclick target */
@media (max-width: 768px){
  button[onclick*="/remix"]{
    display:none !important;
  }
}
/* =============== Frutiger Aero CTA =============== */
.aero-cta {
  /* place it inline; remove these if you’ll position it yourself */
  display: inline-block;
}

.aero-cta a{
  --rad: 16px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: var(--rad);
  text-decoration: none;

  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing: .2px;
  color: #062d2a;

  position: relative;
  overflow: hidden;

  /* Aero glass + aqua blobs */
  background:
    radial-gradient(120px 90px at 20% 20%, rgba(0,255,200,.30), transparent 60%),
    radial-gradient(160px 130px at 85% 70%, rgba(0,170,255,.26), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.60));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    0 10px 26px rgba(0,170,255,.25),
    inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  animation: aeroPulse 4.2s ease-in-out infinite;
}

/* glossy swipe */
.aero-cta a::before{
  content:"";
  position:absolute; inset:-40% -20% auto -20%;
  height: 65%;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
  transform: rota
}
/* Fixed header height (desktop & mobile) */
:root { --slito-header-h: 72px; }          /* desktop */
@media (max-width: 540px){
  :root { --slito-header-h: 60px; }        /* mobile */
}

/* Push the whole page down so it sits below the fixed header */
html, body { height: 100%; }
body { padding-top: var(--slito-header-h); }

/* Make sure the header actually uses that fixed height */
.slito-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--slito-header-h);
  z-index: 1000;                 /* above content, below overlay if you have one */
  display: flex; align-items: center;
  /* keep your existing header look (background, shadow, etc.) */
}

/* === Slitoex header: single source of truth === */
:root { --slito-header-h: 76px; }          /* adjust if you change header height */
@media (max-width: 540px){
  :root { --slito-header-h: 60px; }
}

/* Never let any ancestor break fixed positioning */
html, body { transform: none !important; perspective: none !important; filter: none !important; }

/* Pin header to the top forever */
#slito-header.slito-header{
  position: fixed !important;
  top: 0 !important; left: 0; right: 0;
  height: var(--slito-header-h);
  z-index: 2147483647;                    /* highest of the highest */
}

/* Push the whole page under the bar (do this ONCE, no spacer) */
body{
  padding-top: calc(var(--slito-header-h) + env(safe-area-inset-top, 0px)) !important;
}

/* Keep other fixed widgets below the header too */
#daily-todo-box{ top: calc(var(--slito-header-h) + env(safe-area-inset-top, 0px) + 16px) !important; }
.aotw{ top: calc(var(--slito-header-h) + env(safe-area-inset-top, 0px) + 16px) !important; }

/* Optional: make sure your overlay menu still appears (below or above as you like) */
.slito-overlay{ z-index: 2147483646; }   /* below header; set higher if you want it above */