:root{
  --bg:#050506;
  --panel:#111113;
  --text:#f5f5f6;
  --muted:#8b8b93;
  --muted2:#5f5f67;
  --accent:#d7ff5f;
  --line:rgba(255,255,255,.075);
  --r-xl:32px;
  --r-lg:26px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;
  min-height:100%;
  background:#050506;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{overflow-x:hidden}

.bgArtwork{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:0;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  transition:opacity .45s ease;
}

.bgArtwork.active{opacity:.18}

.bgArtwork::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,6,.66),rgba(5,5,6,.92)),
    radial-gradient(circle at center,rgba(5,5,6,.08),rgba(5,5,6,.86) 72%);
  backdrop-filter:blur(2px);
}

.topProgress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:10px;
  z-index:1000;
  background:rgba(255,255,255,.045);
  pointer-events:none;
  overflow:hidden;
}

.topProgressBar{
  position:absolute;
  left:0;
  top:0;
  width:0%;
  height:10px;
  border-radius:0;
  background:linear-gradient(90deg,#f5f5f6,var(--accent));
  box-shadow:0 0 14px rgba(215,255,95,.36);
  transition:width .2s cubic-bezier(0.2,0.9,0.4,1.1);
  overflow:hidden;
  z-index:1;
}

.topProgressBar::after{
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(
    from var(--angle),
    rgba(215,255,95,0.2),
    rgba(215,255,95,0.9),
    rgba(120,255,214,0.7),
    rgba(120,180,255,0.5),
    rgba(188,140,255,0.4),
    rgba(255,255,255,0.8),
    rgba(215,255,95,0.2)
  );
  animation:magicBorder 3.2s linear infinite;
  opacity:0.6;
  mix-blend-mode:hard-light;
  pointer-events:none;
  z-index:2;
}

@property --angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes magicBorder{
  to{--angle:360deg}
}

.progressPercent{
  position:absolute;
  top:13px;
  left:0;
  transform:translateX(7px);
  color:rgba(215,255,95,.95);
  font-size:10px;
  font-weight:600;
  opacity:0;
  transition:left .2s ease, opacity .2s ease;
  z-index:3;
  text-shadow:0 0 4px rgba(0,0,0,.8);
  white-space:nowrap;
  pointer-events:none;
  font-family:monospace;
}

.page{
  position:relative;
  z-index:1;
  min-height:100svh;
  background:
    radial-gradient(circle at 19% -9%,rgba(215,255,95,.13),transparent 25rem),
    radial-gradient(circle at 75% 4%,rgba(255,255,255,.055),transparent 22rem),
    linear-gradient(180deg,#0b0b0d 0%,#050506 52%);
}

.app{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:30px clamp(22px,4.6vw,76px) 154px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:52px;
  padding:0 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:-8px;
}

.ghostLogo{
  width:34px;
  height:34px;
  color:var(--accent);
  flex:0 0 auto;
  display:grid;
  place-items:center;
  transform:translateY(1px);
  filter:
    drop-shadow(0 0 18px rgba(215,255,95,.22))
    drop-shadow(0 10px 22px rgba(215,255,95,.08));
}

.ghostLogo svg{
  width:34px;
  height:34px;
  display:block;
}

.ghostWordmark{
  display:flex;
  align-items:baseline;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.045em;
  line-height:1;
}

.ghostMain{
  color:#F4F4F5;
  font-size:20px;
  font-weight:800;
}

.ghostFade{
  color:rgba(244,244,245,.36);
  font-size:20px;
  font-weight:760;
}

.exportBtn{
  height:40px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(215,255,95,.38);
  background:rgba(215,255,95,.045);
  color:rgba(215,255,95,.92);
  font-size:12px;
  font-weight:760;
  box-shadow:0 0 24px rgba(215,255,95,.06);
  margin-right:-8px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.exportBtn:hover{
  transform:scale(1.02);
  box-shadow:0 0 32px rgba(215,255,95,.2);
}

.mainGrid{
  display:grid;
  grid-template-columns:minmax(360px,500px) minmax(360px,500px);
  gap:56px;
  align-items:end;
  justify-content:center;
}

.leftCol,.rightCol{min-width:0}
.rightCol{width:100%;max-width:500px;align-self:end}

.label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.038);
  border:1px solid rgba(255,255,255,.065);
  color:rgba(220,220,226,.72);
  font-size:10px;
  font-weight:720;
  letter-spacing:.095em;
  text-transform:uppercase;
}

.label::before{
  content:"";
  width:5.5px;
  height:5.5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 13px var(--accent);
}

/* ОРИГИНАЛЬНЫЙ СТИЛЬ ЗАГОЛОВКА (НЕ ТРОГАЕМ) */
.heroTitle{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
  max-width:none !important;
  margin:18px 0 0 !important;
  font-family:"Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:clamp(68px, 8vw, 112px) !important;
  line-height:.92 !important;
  letter-spacing:-0.075em !important;
  font-weight:600 !important;
  color:#F5F5F6 !important;
  text-wrap:initial !important;
}

.heroTitle span{
  display:block !important;
  white-space:nowrap !important;
}

.sub{
  max-width:520px !important;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.5;
}

/* ПЛАШКА UPLOAD С ХОВЕРОМ (ПОСЛЕДОВАТЕЛЬНАЯ АНИМАЦИЯ) */
.upload{
  position:relative;
  overflow:hidden;
  min-height:314px;
  margin-top:34px;
  border-radius:var(--r-xl);
  border:1.8px dashed rgba(255,255,255,.34);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  cursor:pointer;
}
/* При наведении на всю плашку сначала увеличивается она сама, потом крестик */
.upload:hover {
  transform:scale(1.02);
}
.upload:hover .addBtn {
  transform:scale(1.05);
  transition:transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0.1s; /* задержка 0.1с после увеличения плашки */
}
/* Обратная анимация: сначала крестик, потом плашка */
.upload:not(:hover) .addBtn {
  transform:scale(1);
  transition:transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0s;
}
.upload:not(:hover) {
  transform:scale(1);
  transition:transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0.1s;
}

.uploadCenter{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  pointer-events:none;
  justify-content:center;
  height:100%;
  min-height:280px;
}

.addBtn{
  width:74px;
  height:74px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #f7f7f7 0%, #d7ff5f 100%);
  color:#111;
  box-shadow:
    0 0 92px rgba(215,255,95,.17),
    0 24px 58px rgba(215,255,95,.11),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  margin:0 auto;
  position:relative;
}

.addBtn::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-30%;
  width:160%;
  height:140%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 70%);
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
  border-radius:50%;
}

.addBtn:hover::after{
  opacity:0.7;
}

.addBtn svg{
  width:34px;
  height:34px;
}

/* Убираем старый ховер на addBtn (так как теперь он управляется через родителя) */
.addBtn:hover {
  transform:scale(1); /* сброс, так как анимация идёт от .upload:hover .addBtn */
  box-shadow: 0 0 92px rgba(215,255,95,.17), 0 24px 58px rgba(215,255,95,.11), inset 0 1px 0 rgba(255,255,255,.45);
}

body.hasArtwork .upload,
body.hasArtwork .track{
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}

.realFileInput{
  position:absolute;
  inset:0;
  z-index:50;
  display:block;
  width:100%;
  height:100%;
  opacity:.001;
  cursor:pointer;
  border:0;
  padding:0;
  margin:0;
}

.uploadCenterTitle{
  margin-top:8px;
  font-size:21px;
  line-height:1;
  font-weight:540;
  letter-spacing:-.02em;
  color:rgba(245,245,246,.72);
}

.uploadCenterText{
  color:rgba(255,255,255,.34);
  font-size:11px;
  line-height:1.4;
  font-weight:450;
  letter-spacing:.01em;
}

.coverBox{
  position:absolute;
  inset:16px;
  z-index:1;
  border-radius:23px;
  overflow:hidden;
  opacity:0;
  background-size:cover;
  background-position:center;
  pointer-events:none;
  transition:opacity .28s ease;
}

.coverBox::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,6,.90),rgba(5,5,6,.34) 38%,rgba(5,5,6,.82)),
    radial-gradient(circle at 50% 42%,rgba(5,5,6,.05),rgba(5,5,6,.74) 76%);
}

.coverBox.hasImage{opacity:.92}

.fileName{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:3;
  color:rgba(245,245,246,.84);
  font-size:13px;
  font-weight:520;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

.fileName.hasFile{opacity:1}

.section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 4px 14px;
}

.sectionTitle{
  font-size:17px; /* чуть крупнее */
  font-weight:600; /* не жирно */
  letter-spacing:-0.01em;
}
.sectionMeta{
  color:var(--muted2);
  font-size:12px;
  font-weight:620;
}

.tracksGrid{
  height:314px;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:14px;
}

.track{
  height:150px;
  min-height:0;
  border-radius:var(--r-lg);
  padding:13px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(18,18,21,.48),rgba(8,8,10,.58));
  border:1px solid rgba(255,255,255,.045);
  box-shadow:0 18px 56px rgba(0,0,0,.22);
}

.trackTop{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

.play{
  width:56px;
  height:56px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.035);
  color:white;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.play:disabled{opacity:.34;cursor:not-allowed}
.play svg{width:25px;height:25px}

.trackName{
  font-size:15.5px;
  font-weight:500; /* убрал жирность */
}
.trackTime{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  font-weight:520;
}

.download{
  min-width:48px;
  height:38px;
  padding:0 12px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  background:rgba(215,255,95,.055);
  border:1px solid rgba(215,255,95,.10);
  color:var(--accent);
  font-size:12px;
  font-weight:760;
}

.download.disabled{opacity:.28;pointer-events:none}
.download svg{width:14px;height:14px}

.wave{
  width:100%;
  height:58px;
  display:block;
  margin-top:8px;
}

.legal{
  max-width:1112px;
  margin:42px auto 0;
  color:#575760;
  font-size:11px;
}

.bottom{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(calc(100% - 32px),760px);
  z-index:60;
  pointer-events:none;
}

.bottom::before{
  content:"";
  position:absolute;
  inset:-10px -12px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  box-shadow:
    0 18px 60px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.08);
  z-index:-2;
}

.bottom::after{
  content:"";
  position:absolute;
  inset:-12px -14px;
  border-radius:999px;
  padding:2px;
  background:
    conic-gradient(
      from var(--angle),
      rgba(215,255,95,.10),
      rgba(215,255,95,.92),
      rgba(120,255,214,.72),
      rgba(120,180,255,.58),
      rgba(188,140,255,.42),
      rgba(255,255,255,.74),
      rgba(215,255,95,.10)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.88;
  filter:blur(.35px) saturate(115%);
  animation:magicBorder 3.2s linear infinite;
  z-index:-1;
}

.status,progress{display:none}

.primary{
  position:relative;
  width:100%;
  height:64px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#f7f7f8,#d7ff5f);
  color:#111;
  font-size:17px;
  font-weight:780;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:
    0 0 34px rgba(215,255,95,.12),
    0 18px 48px rgba(215,255,95,.11);
}

.primary:disabled{opacity:.34;cursor:not-allowed}

.primary.isLoading::before{
  content:"";
  position:absolute;
  left:24px;
  top:50%;
  width:22px;
  height:22px;
  margin-top:-11px;
  border-radius:50%;
  border:2.5px solid rgba(0,0,0,.22);
  border-top-color:#111;
  border-right-color:#111;
  animation:spin .72s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.patreonGate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 50% 18%,rgba(255,66,77,.10),transparent 34%),rgba(5,5,6,.88);
  backdrop-filter:blur(24px);
}

.patreonGate.isHidden{display:none}

.patreonCard{
  width:min(430px,100%);
  padding:28px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  box-shadow:0 32px 90px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.07);
}

.patreonBadge{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,66,77,.12);
  border:1px solid rgba(255,66,77,.20);
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:20px;
}

.patreonTitle{
  max-width:330px;
  margin:0 0 14px;
  font-size:32px;
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:650;
}

.patreonText{
  margin:0 0 24px;
  color:rgba(255,255,255,.54);
  font-size:14px;
  line-height:1.52;
}

.patreonButton,.patreonDemo{
  width:100%;
  height:56px;
  border:0;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.patreonButton{
  background:linear-gradient(135deg,#ff795d,#ff424d);
  color:white;
  box-shadow:0 18px 48px rgba(255,66,77,.24);
}

.patreonButton svg{width:18px;height:18px}
.patreonDemo{
  margin-top:10px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.07);
}

/* ========== МОБИЛЬНЫЙ АДАПТИВ ========== */
@media (max-width: 768px) {
  .app {
    padding: 20px 16px 120px;
  }
  /* Заголовок: не меняем размер, только перенос слов */
  .heroTitle {
    white-space: normal !important;
    word-break: break-word;
  }
  .heroTitle span {
    white-space: normal !important;
    display: inline-block !important;
  }
  .sub {
    font-size: 14px;
    max-width: 100%;
  }
  .mainGrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Уменьшаем высоту плашки upload на мобильном, чтобы было видно следующий блок */
  .upload {
    min-height: 220px;
  }
  .uploadCenter {
    min-height: 200px;
  }
  .tracksGrid {
    height: auto;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .track {
    height: auto;
    min-height: 140px;
  }
  .trackTop {
    grid-template-columns: 48px minmax(0,1fr) auto;
  }
  .play {
    width: 48px;
    height: 48px;
  }
  .trackName {
    font-size: 14px;
    font-weight: 500;
  }
  .wave {
    height: 48px;
  }
  .bottom {
    width: calc(100% - 20px);
    bottom: 12px;
  }
  .primary {
    height: 56px;
    font-size: 15px;
  }
  .brand {
    margin-left: -4px;
    gap: 8px;
  }
  .ghostLogo svg {
    width: 28px;
    height: 28px;
  }
  .ghostMain, .ghostFade {
    font-size: 18px;
  }
  .exportBtn {
    margin-right: -4px;
    padding: 0 12px;
    font-size: 11px;
  }
  .uploadCenterTitle {
    font-size: 18px;
  }
  .addBtn {
    width: 64px;
    height: 64px;
  }
  .addBtn svg {
    width: 28px;
    height: 28px;
  }
  .progressPercent {
    top: 14px;
    font-size: 9px;
  }
  /* Дополнительные отступы, чтобы буквы не резались */
  .heroTitle, .sub, .section, .trackName, .trackTime {
    padding: 0 2px;
  }
}

@media (max-width: 480px) {
  .heroTitle {
    word-break: break-word;
  }
  .sub {
    font-size: 13px;
  }
  .trackTop {
    grid-template-columns: 44px minmax(0,1fr) auto;
    gap: 8px;
  }
  .play {
    width: 44px;
    height: 44px;
  }
  .trackName {
    font-size: 13px;
  }
  .download {
    font-size: 10px;
    padding: 0 8px;
  }
  .upload {
    min-height: 200px;
  }
  .uploadCenter {
    min-height: 180px;
  }
}

/* layout refinement update */
.app{
  max-width:1680px;
  padding-left:clamp(28px,5.8vw,112px);
  padding-right:clamp(28px,5.8vw,112px);
}

.mainGrid{
  grid-template-columns:minmax(460px,720px) minmax(360px,500px);
  justify-content:space-between;
  gap:clamp(56px,8vw,150px);
}

.leftCol{
  max-width:760px;
}

.rightCol{
  position:relative;
  max-width:500px;
  width:100%;
}

.upload{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  transition:none !important;
}

.upload:hover{
  transform:none !important;
}

.addBtn{
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease !important;
}

.addBtn:hover{
  transform:scale(1.055) !important;
  filter:brightness(1.04);
}

.upload:hover .addBtn{
  transform:none;
}

/* hero artwork */
.heroArtwork{
  position:relative;
  width:100%;
  height:220px;
  margin:-10px 0 18px;
  overflow:visible;
  pointer-events:none;
}

.heroArtwork img{
  position:absolute;
  right:-52px;
  top:-56px;
  width:600px;
  max-width:none;
  object-fit:contain;
  opacity:.92;
  filter:
    drop-shadow(0 40px 80px rgba(0,0,0,.45))
    saturate(105%);
  -webkit-mask-image:
    radial-gradient(circle at 55% 45%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,.92) 52%,
    rgba(0,0,0,.18) 76%,
    transparent 100%);
  mask-image:
    radial-gradient(circle at 55% 45%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,.92) 52%,
    rgba(0,0,0,.18) 76%,
    transparent 100%);
}

@media (min-width:1180px){
  .heroArtwork{
    margin-top:-32px;
  }

  .heroArtwork img{
    width:600px;
    right:-70px;
    top:-76px;
  }
}

@media (max-width:1100px){
  .app{
    max-width:980px;
    padding-left:28px;
    padding-right:28px;
  }

  .mainGrid{
    grid-template-columns:minmax(0,1fr) minmax(320px,410px);
    gap:28px;
    align-items:end;
  }

  .heroTitle{
    font-size:clamp(50px,6.5vw,72px) !important;
  }

  .heroArtwork{
    height:185px;
    margin:-18px 0 14px;
  }

  .heroArtwork img{
    width:500px;
    right:-70px;
    top:-54px;
  }
}

@media (max-width:768px){
  .app{
    padding-left:16px;
    padding-right:16px;
  }

  .heroTitle{
    font-size:42px !important;
    line-height:.92 !important;
  }

  .mainGrid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .heroArtwork{
    display:block;
    height:150px;
    margin:-8px 0 -6px;
    overflow:visible;
  }

  .heroArtwork img{
    width:400px;
    right:-146px;
    top:-52px;
    opacity:.85;
  }
}

@media (max-width:480px){
  .heroTitle{
    font-size:38px !important;
    line-height:.92 !important;
  }

  .heroArtwork{
    height:130px;
    margin:-2px 0 -2px;
  }

  .heroArtwork img{
    width:250px;
    right:-138px;
    top:-42px;
  }
}

/* UX hotfix: upload complete feedback, title accent, play stop state */
.heroTitle i{
  color:var(--accent) !important;
  font-style:normal !important;
  font-weight:420 !important;
  text-shadow:0 0 24px rgba(215,255,95,.16);
}

.upload.uploadAccepted{
  animation:uploadAcceptedGlow .82s cubic-bezier(.2,.9,.35,1);
}

@keyframes uploadAcceptedGlow{
  0%{box-shadow:0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); border-color:rgba(255,255,255,.34)}
  34%{box-shadow:0 0 0 1px rgba(215,255,95,.28), 0 0 46px rgba(215,255,95,.18), 0 20px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14); border-color:rgba(215,255,95,.62); transform:scale(1.012)}
  100%{box-shadow:0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); border-color:rgba(255,255,255,.34); transform:scale(1)}
}

.primary.isReadyPulse{
  animation:processReadyPulse .78s cubic-bezier(.2,.9,.35,1);
}

@keyframes processReadyPulse{
  0%{filter:saturate(1); transform:translateY(0) scale(1)}
  36%{filter:saturate(1.35) brightness(1.08); transform:translateY(-1px) scale(1.012); box-shadow:0 0 42px rgba(215,255,95,.22)}
  100%{filter:saturate(1); transform:translateY(0) scale(1)}
}

.starBurst{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
}

.starBurst i{
  position:absolute;
  display:block;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,255,95,.96) 42%, rgba(215,255,95,0) 72%);
  box-shadow:0 0 12px rgba(215,255,95,.72), 0 0 2px rgba(255,255,255,.9);
  animation:starCompletePhysics .95s cubic-bezier(.12,.72,.18,1) forwards;
  transform:translate3d(0,0,0) scale(.3);
}

@keyframes starCompletePhysics{
  0%{opacity:0; transform:translate3d(0,0,0) scale(.2) rotate(0deg)}
  12%{opacity:1}
  58%{opacity:.92; transform:translate3d(var(--dx),var(--dy),0) scale(1) rotate(150deg)}
  100%{opacity:0; transform:translate3d(calc(var(--dx) * 1.08),calc(var(--dy) + var(--fall)),0) scale(.18) rotate(320deg)}
}

.play.isPlaying{
  color:#111;
  background:linear-gradient(135deg,#f7f7f7 0%, var(--accent) 100%);
  box-shadow:0 0 28px rgba(215,255,95,.22);
}

.patreonCard::after{content:none !important; display:none !important;}

/* MVP2 UI alignment patch */
.header{
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr);
  align-items:center;
  gap:22px;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-bottom:52px;
}

.brand{margin-left:0 !important; justify-self:start;}

.headerActions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}

.exportBtn{margin-right:0 !important;}

.stemMenu{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(38px,7vw,112px);
  white-space:nowrap;
}

.stemMenuItem{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(245,245,246,.70);
  font:700 13px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.015em;
  cursor:pointer;
  padding:12px 0;
  transition:color .18s ease, opacity .18s ease, transform .18s ease, text-shadow .18s ease;
}

.stemMenuItem:hover{color:rgba(245,245,246,.92); transform:translateY(-1px);}
.stemMenuItem.isActive{color:var(--accent); text-shadow:0 0 22px rgba(215,255,95,.22);}

.waveBurger{
  width:48px;
  height:48px;
  border-radius:17px;
  border:1px solid rgba(215,255,95,.28);
  background:rgba(215,255,95,.045);
  color:var(--accent);
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 24px rgba(215,255,95,.08), inset 0 1px 0 rgba(255,255,255,.07);
}

.waveBurger svg{width:36px;height:26px;display:block;}

.app{
  padding-left:clamp(24px,5vw,88px) !important;
  padding-right:clamp(24px,5vw,88px) !important;
}

.mainGrid{
  position:relative;
  grid-template-columns:minmax(420px,560px) minmax(420px,560px) !important;
  justify-content:center !important;
  gap:clamp(48px,7vw,112px) !important;
  align-items:end;
}

.leftCol,.rightCol{position:relative; z-index:2;}
.rightCol{max-width:560px !important;}

.heroTitle i{text-transform:lowercase;}

.sub{
  display:inline-block;
  width:auto;
  max-width:560px !important;
}

.upload,
.track{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(30px) saturate(170%) contrast(1.04) !important;
  -webkit-backdrop-filter:blur(30px) saturate(170%) contrast(1.04) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.045) !important;
}

.upload::before,
.track::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.18),transparent 28%),
    radial-gradient(circle at 82% 100%,rgba(215,255,95,.08),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.055),transparent 42%,rgba(255,255,255,.035));
  mix-blend-mode:screen;
  opacity:.68;
  z-index:1;
}

.upload::after,
.track::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 28%,transparent 70%,rgba(255,255,255,.06));
  opacity:.45;
  z-index:1;
}

.upload > *, .track > *{position:relative; z-index:3;}

.heroArtwork{z-index:0 !important;}
.heroArtwork img{z-index:0 !important;}
.section,.tracksGrid{position:relative; z-index:3;}

.tracksGrid{height:314px;}
.track{background:linear-gradient(180deg,rgba(18,18,21,.46),rgba(8,8,10,.60)) !important;}

@media (max-width:900px){
  .header{
    grid-template-columns:auto 1fr auto;
    gap:14px;
  }
  .stemMenu{gap:28px;}
  .stemMenuItem{font-size:12px;}
}

@media (max-width:768px){
  .app{
    padding-left:16px !important;
    padding-right:16px !important;
    padding-bottom:118px !important;
  }

  .header{
    grid-template-columns:1fr auto;
    margin-bottom:48px;
  }

  .stemMenu{display:none;}
  .exportBtn{display:none;}
  .waveBurger{display:flex;}

  .mainGrid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:20px !important;
    position:relative;
  }

  .leftCol{z-index:2;}
  .rightCol{display:contents;}

  .heroArtwork{
    position:absolute !important;
    top:116px !important;
    right:-18px !important;
    width:260px !important;
    height:190px !important;
    margin:0 !important;
    z-index:0 !important;
    pointer-events:none;
  }

  .heroArtwork img{
    width:310px !important;
    right:-34px !important;
    top:0 !important;
    opacity:.88 !important;
  }

  .label,.heroTitle,.sub,.upload{position:relative; z-index:2;}

  .sub{
    font-size:12.5px !important;
    line-height:1.35 !important;
    color:rgba(245,245,246,.76) !important;
    padding:5px 8px !important;
    border-radius:10px;
    background:rgba(5,5,6,.72);
    box-shadow:0 8px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
  }

  .upload{
    min-height:176px !important;
    margin-top:18px !important;
    border-radius:26px !important;
  }

  .uploadCenter{min-height:156px !important;}
  .addBtn{width:62px;height:62px;border-radius:22px;}

  .section{
    margin-top:0 !important;
    z-index:3;
  }

  .tracksGrid{
    z-index:3;
    height:auto !important;
    gap:12px !important;
  }

  .track{
    min-height:132px !important;
    height:132px !important;
    border-radius:24px !important;
  }

  .bottom{
    width:calc(100% - 28px) !important;
    bottom:14px !important;
  }
  .bottom::before{inset:-8px -8px !important;}
  .bottom::after{inset:-10px -10px !important;}
}

@media (max-width:480px){
  .header{margin-bottom:44px;}
  .heroTitle{font-size:38px !important;}
  .heroArtwork{
    top:122px !important;
    right:-28px !important;
    width:235px !important;
    height:170px !important;
  }
  .heroArtwork img{
    width:292px !important;
    right:-48px !important;
    top:0 !important;
  }
  .upload{min-height:166px !important;}
  .uploadCenter{min-height:148px !important;}
}


/* MVP2 menu/polish patch */

/* faster smoother selected green word */
.wordSlotFast{
  display:inline-flex !important;
  white-space:nowrap;
  vertical-align:baseline;
}
.wordSlotFast span{
  display:inline-block;
  opacity:0;
  transform:translateY(.28em) scale(.985);
  filter:blur(5px);
  animation:ghostWordIn .42s cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay:calc(var(--i) * 18ms);
}
@keyframes ghostWordIn{
  0%{opacity:0; transform:translateY(.32em) scale(.98); filter:blur(7px)}
  56%{opacity:1; transform:translateY(-.035em) scale(1.012); filter:blur(.4px)}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

/* audio cards border max 1px */
.track,
.trackCard,
.audioCard{
  border-width:1px !important;
}

/* upload dashed border: slightly more spaced */
.upload{
  border:0 !important;
}
.upload::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 7px, transparent 7px 13px) top left/100% 1.8px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 7px, transparent 7px 13px) bottom left/100% 1.8px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.42) 0 7px, transparent 7px 13px) top left/1.8px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.42) 0 7px, transparent 7px 13px) top right/1.8px 100% no-repeat !important;
  opacity:.72;
}

/* intermediate breakpoints: prevent clipping and cramped menu */
@media (max-width:1180px) and (min-width:769px){
  .app{
    padding-left:clamp(32px,5vw,60px) !important;
    padding-right:clamp(32px,5vw,60px) !important;
    overflow:hidden;
  }
  .header{
    display:grid !important;
    grid-template-columns:auto minmax(340px,1fr) auto !important;
    gap:28px !important;
  }
  .stemMenu,
  .topStemMenu{
    justify-self:center !important;
    min-width:min(520px,48vw) !important;
    justify-content:space-between !important;
    gap:clamp(34px,6vw,86px) !important;
  }
  .mainGrid{
    grid-template-columns:minmax(420px, .95fr) minmax(390px, .9fr) !important;
    gap:clamp(28px,4vw,56px) !important;
  }
  .heroTitle{
    font-size:clamp(64px,8.2vw,96px) !important;
  }
}

/* clean mobile burger button, no plate */
.waveBurger,
#mobileMenuBtn{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  position:relative;
  z-index:1302;
}
.waveBurger svg,
#mobileMenuBtn svg{
  overflow:visible;
}
.waveBurger path,
#mobileMenuBtn path{
  transition:transform .38s cubic-bezier(.2,.9,.2,1), d .38s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
  transform-origin:center;
  stroke-width:3.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
body.mobileMenuOpen .waveBurger path:first-child,
body.mobileMenuOpen #mobileMenuBtn path:first-child{
  transform:translateY(5px) rotate(45deg);
}
body.mobileMenuOpen .waveBurger path:last-child,
body.mobileMenuOpen #mobileMenuBtn path:last-child{
  transform:translateY(-5px) rotate(-45deg);
}

/* Mobile slide-out menu */
.mobileMenuOverlay{
  position:fixed;
  inset:0;
  z-index:1290;
  opacity:0;
  pointer-events:none;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:opacity .34s ease, backdrop-filter .34s ease;
}
.mobileMenuPanel{
  position:fixed;
  z-index:1291;
  top:0;
  right:0;
  width:min(82vw,340px);
  height:100svh;
  pointer-events:none;
  transform:translateX(102%);
  opacity:.98;
  transition:transform .42s cubic-bezier(.2,.85,.18,1);
}
.mobileMenuInner{
  height:100%;
  padding:92px 28px 28px;
  background:linear-gradient(180deg,rgba(10,10,12,.72),rgba(5,5,6,.84));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-28px 0 80px rgba(0,0,0,.38), inset 1px 0 0 rgba(255,255,255,.08);
}
.mobileMenuTitle{
  color:rgba(255,255,255,.48);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.mobileStemMenu{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mobileStemItem{
  height:58px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.70);
  text-align:left;
  font:800 34px/1 Inter,system-ui,sans-serif;
  letter-spacing:-.045em;
  padding:0;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
}
.mobileStemItem.isActive{
  color:var(--accent);
}
.mobileStemItem:active{
  transform:translateX(3px);
}
.mobilePatreonBtn{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(215,255,95,.38);
  background:rgba(215,255,95,.10);
  color:var(--accent);
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 52px rgba(0,0,0,.28);
}
body.mobileMenuOpen .mobileMenuOverlay{
  opacity:1;
  pointer-events:auto;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
body.mobileMenuOpen .mobileMenuPanel{
  transform:translateX(0);
  pointer-events:auto;
}

/* menu only on mobile; desktop keeps text menu */
@media (min-width:901px){
  .mobileMenuOverlay,
  .mobileMenuPanel,
  .waveBurger,
  #mobileMenuBtn{
    display:none !important;
  }
}

@media (max-width:900px){
  .exportBtn{
    display:none !important;
  }
  .stemMenu,
  .topStemMenu{
    display:none !important;
  }
}


/* MVP2 visual cleanup overrides */

/* Top menu: compact design-system spacing, not stretched full-width */
.stemMenu,
.topStemMenu{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  justify-content:center !important;
  gap:clamp(56px,7vw,118px) !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.stemMenu button,
.topStemMenu button,
.stemBtn{
  min-width:74px !important;
  text-align:center !important;
}
@media (max-width:1180px) and (min-width:769px){
  .header{
    grid-template-columns:auto 1fr auto !important;
    gap:clamp(22px,4vw,46px) !important;
  }
  .stemMenu,
  .topStemMenu{
    gap:clamp(42px,6vw,82px) !important;
    justify-self:center !important;
  }
}
@media (max-width:980px) and (min-width:769px){
  .stemMenu,
  .topStemMenu{
    gap:clamp(30px,5vw,58px) !important;
  }
  .stemMenu button,
  .topStemMenu button,
  .stemBtn{
    min-width:64px !important;
  }
}

/* Upload dashed border: real 1px, slightly more spaced, corners not clipped */
.upload{
  border:0 !important;
  background:rgba(8,8,10,.34) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.upload::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:calc(var(--r-xl, 32px) - 1px) !important;
  pointer-events:none !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 6px, transparent 6px 13px) top left/100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 6px, transparent 6px 13px) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.38) 0 6px, transparent 6px 13px) top left/1px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.38) 0 6px, transparent 6px 13px) top right/1px 100% no-repeat !important;
  opacity:.78 !important;
}

/* Audio cards: restore old near-black look, clean glass only when artwork passes under */
.track,
.trackCard,
.audioCard{
  border:1px solid rgba(255,255,255,.065) !important;
  background:linear-gradient(180deg,rgba(10,10,12,.58),rgba(5,5,7,.72)) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(255,255,255,.018) !important;
}
.track::before,
.trackCard::before,
.audioCard::before{
  opacity:.18 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 38%,rgba(255,255,255,.018)) !important;
}
.track::after,
.trackCard::after,
.audioCard::after{
  opacity:.16 !important;
}

/* Faster smoother green word animation on every stem change */
.wordSlotFast{
  display:inline-flex !important;
  white-space:nowrap !important;
  vertical-align:baseline !important;
}
.wordSlotFast span{
  display:inline-block !important;
  opacity:0;
  transform:translateY(.18em) scale(.992);
  filter:blur(4px);
  animation:ghostWordInFast .26s cubic-bezier(.16,.9,.25,1) forwards;
  animation-delay:calc(var(--i) * 12ms);
}
@keyframes ghostWordInFast{
  0%{opacity:0; transform:translateY(.22em) scale(.99); filter:blur(5px)}
  70%{opacity:1; transform:translateY(-.02em) scale(1.006); filter:blur(.2px)}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

/* Hero image motion swap via guitar_motion.png */
.heroArtwork,
.heroImage,
.heroVisual{
  overflow:visible !important;
}
.heroMotionGhost{
  position:absolute;
  inset:auto 0 0 auto;
  width:100%;
  max-width:none;
  opacity:0;
  pointer-events:none;
  z-index:2;
  transform:translateX(-12px) scale(1.015);
  filter:blur(2px) saturate(1.25);
  mix-blend-mode:screen;
}
.heroMotionGhost.isActive{
  animation:heroMotionFlash .24s cubic-bezier(.2,.9,.2,1) both;
}
.stemImageEnter{
  animation:stemImageEnter .24s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes heroMotionFlash{
  0%{opacity:0; transform:translateX(-18px) scale(1.02); filter:blur(7px) saturate(1.4)}
  35%{opacity:.72; transform:translateX(0) scale(1.01); filter:blur(4px) saturate(1.6)}
  100%{opacity:0; transform:translateX(18px) scale(1); filter:blur(8px) saturate(1.2)}
}
@keyframes stemImageEnter{
  0%{opacity:.55; transform:translateX(8px)}
  100%{opacity:1; transform:translateX(0)}
}


/* ===== FINAL ITERATION FIX ===== */

/* menu spacing — design-system style */
.stemMenu,
.topStemMenu{
  width:fit-content !important;
  margin:0 auto !important;
  gap:clamp(42px,5vw,88px) !important;
  padding-inline:clamp(18px,2vw,34px) !important;
  justify-content:center !important;
}

@media (max-width:1180px) and (min-width:769px){
  .stemMenu,
  .topStemMenu{
    gap:clamp(30px,4vw,56px) !important;
    padding-inline:18px !important;
  }
}

/* true 1px upload dashed border */
.upload::after{
  inset:0 !important;
  border-radius:inherit !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 5px, transparent 5px 12px) top left/100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 5px, transparent 5px 12px) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.42) 0 5px, transparent 5px 12px) top left/1px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.42) 0 5px, transparent 5px 12px) top right/1px 100% no-repeat !important;
}

/* 1px audio borders */
.track,
.trackCard,
.audioCard{
  border-width:1px !important;
}

/* restore dark almost-black cards */
.track,
.trackCard,
.audioCard,
.upload{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.03), transparent 32%),
    linear-gradient(180deg, rgba(7,7,9,.72), rgba(3,3,4,.82)) !important;
}

/* smoother repeated green word animation */
.wordSlotFast span{
  animation:ghostWordUltra .18s cubic-bezier(.2,.9,.2,1) forwards !important;
  animation-delay:calc(var(--i) * 10ms) !important;
}

@keyframes ghostWordUltra{
  0%{
    opacity:0;
    transform:translateY(.16em);
    filter:blur(4px);
  }
  65%{
    opacity:1;
    transform:translateY(-.015em);
    filter:blur(.2px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

/* motion transition */
.heroMotionGhost{
  opacity:0;
  will-change:transform, opacity, filter;
}

.heroMotionGhost.isActive{
  animation:ghostMotionSwap .22s cubic-bezier(.2,.9,.2,1) both !important;
}

@keyframes ghostMotionSwap{
  0%{
    opacity:0;
    transform:translateX(-28px) scale(1.02);
    filter:blur(10px) saturate(1.4);
  }
  35%{
    opacity:.85;
  }
  100%{
    opacity:0;
    transform:translateX(28px) scale(1);
    filter:blur(12px) saturate(1.2);
  }
}

.stemImageEnter{
  animation:stemImageEnterFast .22s cubic-bezier(.2,.9,.2,1) both !important;
}

@keyframes stemImageEnterFast{
  0%{
    opacity:.55;
    transform:translateX(10px);
  }
  100%{
    opacity:1;
    transform:translateX(0);
  }
}

/* preload screen */
#ghostPreloader{
  position:fixed;
  inset:0;
  background:#050505;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transition:opacity .35s ease;
}

#ghostPreloader.hidden{
  opacity:0;
  pointer-events:none;
}

.preBarWrap{
  width:200px;
  height:2px;
  background:rgba(255,255,255,.1);
  position:relative;
  overflow:visible;
}

.preBar{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:#d6ff5c;
  box-shadow:0 0 12px rgba(214,255,92,.7);
  animation:preloadBar 1.4s ease forwards;
}

.preGhost{
  position:absolute;
  top:-16px;
  left:0;
  width:20px;
  height:20px;
  animation:ghostRide 1.4s ease forwards;
  opacity:.9;
}

@keyframes preloadBar{
  from{width:0%}
  to{width:100%}
}

@keyframes ghostRide{
  0%{
    left:0;
    opacity:.2;
  }
  50%{
    opacity:1;
  }
  100%{
    left:190px;
    opacity:.25;
  }
}



/* ===== FINAL LIQUID GLASS / MOBILE / MENU PATCH ===== */

/* mobile hero image: keep it beside the title */
@media (max-width:768px){
  .heroArtwork,
  .heroImage,
  .heroVisual{
    top:230px !important;
    right:-36px !important;
    width:250px !important;
    height:170px !important;
    z-index:1 !important;
    pointer-events:none;
  }
  .heroArtwork img,
  .heroImage img,
  .heroVisual img,
  #heroImage{
    width:310px !important;
    max-width:none !important;
    right:-52px !important;
    top:-26px !important;
    opacity:.9 !important;
  }
}
@media (max-width:480px){
  .heroArtwork,
  .heroImage,
  .heroVisual{
    top:236px !important;
    right:-48px !important;
    width:235px !important;
    height:160px !important;
  }
  .heroArtwork img,
  .heroImage img,
  .heroVisual img,
  #heroImage{
    width:300px !important;
    right:-58px !important;
    top:-24px !important;
  }
}

/* transparent Liquid Glass, not gray/muddy */
.track,
.trackCard,
.audioCard{
  border:1px solid rgba(255,255,255,.11) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(5,5,7,.16) !important;
  backdrop-filter:blur(28px) saturate(210%) contrast(1.08) brightness(1.08) !important;
  -webkit-backdrop-filter:blur(28px) saturate(210%) contrast(1.08) brightness(1.08) !important;
  box-shadow:
    0 18px 56px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
}
.track::before,
.trackCard::before,
.audioCard::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.24), transparent 22%),
    linear-gradient(120deg, rgba(255,255,255,.14), transparent 28%, transparent 72%, rgba(255,255,255,.07)) !important;
  opacity:.34 !important;
  mix-blend-mode:screen;
}

/* Upload: 1px dashed native border; corners no clipped */
.upload{
  border:1px dashed rgba(255,255,255,.38) !important;
  outline:0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    rgba(5,5,7,.18) !important;
  backdrop-filter:blur(22px) saturate(185%) contrast(1.06) brightness(1.04) !important;
  -webkit-backdrop-filter:blur(22px) saturate(185%) contrast(1.06) brightness(1.04) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.11) !important;
  background-clip:padding-box !important;
}
.upload::after{
  display:none !important;
}

/* Burger menu typography and Patreon button */
.mobileStemItem{
  font-weight:620 !important;
  font-size:31px !important;
  letter-spacing:-.035em !important;
  color:rgba(255,255,255,.68) !important;
}
.mobileStemItem.isActive{
  color:var(--accent) !important;
}
.mobilePatreonBtn{
  background:transparent !important;
  border:1px solid rgba(215,255,95,.45) !important;
  color:rgba(215,255,95,.72) !important;
  box-shadow:none !important;
  font-weight:650 !important;
}

/* Remove old guitar_motion layer */
.heroMotionGhost{
  display:none !important;
}

/* Direct image-to-image elastic swap */
.stemImageLeave{
  animation:stemImageLeave .12s ease both !important;
}
.stemImageElastic{
  animation:stemImageElastic .34s cubic-bezier(.2,1.35,.25,1) both !important;
}
@keyframes stemImageLeave{
  to{
    opacity:.35;
    transform:translateX(-8px) scale(.985);
    filter:blur(4px) saturate(1.2);
  }
}
@keyframes stemImageElastic{
  0%{
    opacity:.25;
    transform:translateX(18px) scale(1.035);
    filter:blur(8px) saturate(1.35);
  }
  58%{
    opacity:1;
    transform:translateX(-4px) scale(.995);
    filter:blur(.6px) saturate(1.08);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0) saturate(1);
  }
}

/* Dust particles during swap */
.heroArtwork,
.heroImage,
.heroVisual{
  overflow:visible !important;
}
.particleBurst{
  position:absolute;
  left:52%;
  top:48%;
  width:1px;
  height:1px;
  z-index:8;
  pointer-events:none;
}
.particleBurst i{
  position:absolute;
  left:0;
  top:0;
  width:var(--s);
  height:var(--s);
  border-radius:999px;
  background:rgba(215,255,95,.88);
  box-shadow:0 0 10px rgba(215,255,95,.38);
  opacity:0;
  transform:translate(0,0) rotate(0deg) scale(.3);
  animation:particleDust .52s cubic-bezier(.14,.72,.25,1) var(--d) both;
}
.particleBurst i:nth-child(3n){
  background:rgba(255,255,255,.78);
  box-shadow:0 0 8px rgba(255,255,255,.25);
}
.particleBurst i:nth-child(4n){
  width:calc(var(--s) * .55);
  height:calc(var(--s) * .55);
  opacity:.45;
  filter:blur(.7px);
}
@keyframes particleDust{
  0%{
    opacity:0;
    transform:translate(0,0) rotate(0deg) scale(.2);
    filter:blur(.2px);
  }
  20%{opacity:.9}
  100%{
    opacity:0;
    transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
    filter:blur(1.2px);
  }
}

.wordSlotFast span{
  animation:ghostWordUltra .18s cubic-bezier(.2,.9,.2,1) forwards !important;
  animation-delay:calc(var(--i) * 10ms) !important;
}

#ghostPreloader.hidden{
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .35s ease, visibility 0s linear .35s !important;
}


/* REVERT IMAGE ANIMATION: no guitar_motion, no particles */
.heroMotionGhost,
.particleBurst,
.particleBurst i{
  display:none !important;
  animation:none !important;
}

.stemImageLeave,
.stemImageElastic{
  animation:none !important;
  filter:none !important;
}

.stemImageFadeOut{
  animation:stemImageFadeOutSimple .10s ease both !important;
}

.stemImageEnterSimple{
  animation:stemImageEnterSimple .24s cubic-bezier(.2,.9,.2,1) both !important;
}

@keyframes stemImageFadeOutSimple{
  0%{opacity:1; transform:translateX(0) scale(1); filter:none}
  100%{opacity:.35; transform:translateX(-8px) scale(.995); filter:blur(2px)}
}

@keyframes stemImageEnterSimple{
  0%{opacity:.35; transform:translateX(10px) scale(1.01); filter:blur(3px)}
  100%{opacity:1; transform:translateX(0) scale(1); filter:blur(0)}
}


/* FINAL OVERRIDE: image swap without jitter/opacity/blur */
.heroMotionGhost,
.particleBurst,
.particleBurst i{
  display:none !important;
  animation:none !important;
}

.stemImageLeave,
.stemImageElastic,
.stemImageFadeOut,
.stemImageEnterSimple{
  animation:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}

.stemImageSlideIn{
  animation:stemImageSlideInOnly .22s cubic-bezier(.2,.9,.2,1) both !important;
  opacity:1 !important;
  filter:none !important;
}

@keyframes stemImageSlideInOnly{
  0%{
    transform:translateX(8px);
    opacity:1;
    filter:none;
  }
  100%{
    transform:translateX(0);
    opacity:1;
    filter:none;
  }
}

/* FINAL OVERRIDE: restore dark audio cards, no bright borders */
.track,
.trackCard,
.audioCard{
  border:1px solid rgba(255,255,255,.055) !important;
  background:
    linear-gradient(180deg, rgba(14,14,17,.46), rgba(4,4,6,.70)) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
}

.track::before,
.trackCard::before,
.audioCard::before{
  opacity:.12 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%, rgba(255,255,255,.012)) !important;
  mix-blend-mode:normal !important;
}

.track::after,
.trackCard::after,
.audioCard::after{
  opacity:.08 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* upload remains dark and not bright */
.upload{
  background:
    linear-gradient(180deg, rgba(12,12,15,.38), rgba(4,4,6,.62)) !important;
  border-color:rgba(255,255,255,.30) !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}


/* MVP stems-5 patch */
.stemMenu{
  gap:clamp(28px,4vw,72px) !important;
}
.stemMenuItem{
  white-space:nowrap;
}
@media (max-width:1180px) and (min-width:901px){
  .stemMenu{
    gap:clamp(18px,2.8vw,44px) !important;
  }
  .stemMenuItem{
    font-size:12px !important;
  }
}
.mobileStemItem{
  height:52px !important;
}
.mobileStemItem[data-stem="multitrack"]{
  font-size:28px !important;
}


/* FINAL WORKING PATCH: multitrack preview + mobile artwork alignment */
.isHidden{display:none !important;}
.multitrackPanel{
  display:grid;
  gap:7px;
  margin-top:8px;
}
.stemMiniRow{
  display:grid;
  grid-template-columns:28px 64px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:28px;
  color:rgba(245,245,246,.82);
}
.stemMiniIcon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:rgba(215,255,95,.86);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);
}
.stemMiniIcon svg{width:17px;height:17px;display:block;}
.stemMiniLabel{
  font-size:11px;
  font-weight:680;
  letter-spacing:.02em;
  color:rgba(245,245,246,.62);
  text-transform:uppercase;
}
.stemMiniWave{
  width:100%;
  height:28px;
  display:block;
  opacity:.9;
}
.track:has(.multitrackPanel:not(.isHidden)){
  padding-bottom:12px;
}
.track:has(.multitrackPanel:not(.isHidden)) .trackTop{
  margin-bottom:2px;
}

/* keep instrument art next to the title on mobile, above upload */
@media (max-width:768px){
  .page{position:relative;}
  .rightCol{display:contents;}
  .heroArtwork{
    position:absolute !important;
    top:128px !important;
    right:-30px !important;
    width:245px !important;
    height:165px !important;
    margin:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }
  .heroArtwork img{
    width:300px !important;
    right:-46px !important;
    top:-34px !important;
    opacity:.88 !important;
  }
  .leftCol{position:relative;z-index:2;}
  .rightCol .section,
  .rightCol .tracksGrid{position:relative;z-index:3;}
  .upload{margin-top:22px !important;}
}
@media (max-width:480px){
  .heroArtwork{
    top:118px !important;
    right:-46px !important;
    width:230px !important;
    height:155px !important;
  }
  .heroArtwork img{
    width:280px !important;
    right:-50px !important;
    top:-30px !important;
  }
}


/* ===== CLEAN FINAL MOBILE WORKING OVERRIDES ===== */

/* Upload must always be tappable on mobile/desktop */
.upload{
  position:relative !important;
  cursor:pointer !important;
}
.realFileInput,
.upload input[type="file"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  opacity:0.001 !important;
  z-index:999 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.uploadCenter,
.coverBox,
.fileName,
.upload::before,
.upload::after{
  pointer-events:none !important;
}

/* Remove old motion/particle layers completely */
.heroMotionGhost,
.particleBurst,
.particleBurst i{
  display:none !important;
  animation:none !important;
}

/* Keep image switch simple: image-to-image, tiny slide, no opacity/blur */
.stemImageLeave,
.stemImageElastic,
.stemImageFadeOut,
.stemImageEnterSimple{
  animation:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
.stemImageSlideIn{
  animation:stemImageSlideInOnly .22s cubic-bezier(.2,.9,.2,1) both !important;
  opacity:1 !important;
  filter:none !important;
}
@keyframes stemImageSlideInOnly{
  0%{transform:translateX(8px); opacity:1; filter:none}
  100%{transform:translateX(0); opacity:1; filter:none}
}

/* Mobile grid: artwork stays beside title and above upload, without blocking upload */
@media (max-width:768px){
  .mainGrid{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .leftCol{
    position:relative !important;
    z-index:2 !important;
  }

  .rightCol{
    display:contents !important;
  }

  .heroArtwork{
    position:absolute !important;
    top:128px !important;
    right:-22px !important;
    width:255px !important;
    height:170px !important;
    margin:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    overflow:visible !important;
  }

  .heroArtwork img,
  #heroArtworkImg{
    position:absolute !important;
    width:295px !important;
    max-width:none !important;
    right:-46px !important;
    top:-18px !important;
    opacity:.88 !important;
    pointer-events:none !important;
  }

  .label,
  .heroTitle,
  .sub,
  .upload{
    position:relative !important;
    z-index:3 !important;
  }

  .sub{
    max-width:calc(100% - 98px) !important;
  }

  .upload{
    margin-top:22px !important;
    min-height:176px !important;
    border:1px dashed rgba(255,255,255,.34) !important;
    border-radius:26px !important;
  }

  .uploadCenter{
    min-height:154px !important;
  }
}

@media (max-width:480px){
  .heroArtwork{
    top:126px !important;
    right:-32px !important;
    width:235px !important;
    height:160px !important;
  }

  .heroArtwork img,
  #heroArtworkImg{
    width:270px !important;
    right:-48px !important;
    top:-10px !important;
  }

  .sub{
    max-width:calc(100% - 92px) !important;
  }

  .upload{
    margin-top:20px !important;
    min-height:166px !important;
  }

  .uploadCenter{
    min-height:146px !important;
  }
}

/* Keep cards dark, not bright/gray */
.track,
.trackCard,
.audioCard{
  border:1px solid rgba(255,255,255,.055) !important;
  background:linear-gradient(180deg, rgba(14,14,17,.46), rgba(4,4,6,.70)) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
}

/* ===== FINAL SEQUENCER / MOBILE / WORD FIX 20260528 ===== */
#stemTitleWord.wordSlotFast{display:inline-flex !important;white-space:nowrap !important;vertical-align:baseline !important;}
#stemTitleWord.wordSlotFast span{display:inline-block !important;opacity:0;transform:translateY(.18em);filter:blur(4px);animation:ghostWordFinalIn .24s cubic-bezier(.18,.9,.25,1) forwards !important;animation-delay:calc(var(--i) * 12ms) !important;}
@keyframes ghostWordFinalIn{0%{opacity:0;transform:translateY(.22em);filter:blur(5px)}68%{opacity:1;transform:translateY(-.025em);filter:blur(.2px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
.multitrackPanel{display:flex;flex-direction:column;gap:7px;margin-top:8px;width:100%;}
.multitrackPanel.isHidden{display:none !important;}
.stemMiniRow{display:grid;grid-template-columns:42px 58px minmax(0,1fr);align-items:center;gap:9px;min-height:36px;padding:3px 6px;border-radius:15px;background:rgba(255,255,255,.018);}
.stemMiniIcon{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;color:rgba(245,245,246,.82);border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.035);}
.stemMiniIcon svg{width:21px;height:21px;display:block;}
.stemMiniLabel{color:rgba(245,245,246,.66);font-size:11px;font-weight:720;letter-spacing:.02em;text-transform:lowercase;}
.stemMiniWave{width:100%;height:34px;display:block;}
.stemMiniRowMuted{opacity:.38;}
.stemMiniRowMuted .stemMiniWave{opacity:.55;}
.track:has(.multitrackPanel:not(.isHidden)){min-height:290px !important;height:auto !important;}
.tracksGrid:has(.multitrackPanel:not(.isHidden)){height:auto !important;grid-template-rows:150px auto !important;}
.upload{position:relative !important;cursor:pointer !important;}
.realFileInput,.upload input[type="file"]{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;display:block !important;opacity:.001 !important;z-index:999 !important;pointer-events:auto !important;cursor:pointer !important;}
.uploadCenter,.coverBox,.fileName,.upload::before,.upload::after{pointer-events:none !important;}
@media (max-width:768px){.heroArtwork{position:absolute !important;top:92px !important;right:-18px !important;width:252px !important;height:168px !important;margin:0 !important;z-index:1 !important;pointer-events:none !important;overflow:visible !important;}.heroArtwork img,#heroArtworkImg{position:absolute !important;width:292px !important;max-width:none !important;right:-44px !important;top:-14px !important;opacity:.88 !important;pointer-events:none !important;}.label,.heroTitle,.sub,.upload{position:relative !important;z-index:3 !important;}.sub{max-width:calc(100% - 100px) !important;}.upload{margin-top:22px !important;}.track:has(.multitrackPanel:not(.isHidden)){min-height:318px !important;}.stemMiniRow{grid-template-columns:38px 52px minmax(0,1fr);gap:7px;min-height:34px;padding:2px 4px;}.stemMiniIcon{width:34px;height:34px;border-radius:13px;}.stemMiniIcon svg{width:20px;height:20px;}.stemMiniLabel{font-size:10px;}.stemMiniWave{height:32px;}}
@media (max-width:480px){.heroArtwork{top:88px !important;right:-30px !important;width:232px !important;height:158px !important;}.heroArtwork img,#heroArtworkImg{width:266px !important;right:-46px !important;top:-8px !important;}.sub{max-width:calc(100% - 92px) !important;}}
.heroMotionGhost,.particleBurst,.particleBurst i{display:none !important;animation:none !important;}
.stemImageSlideIn{animation:stemImageFinalSlide .22s cubic-bezier(.2,.9,.2,1) both !important;opacity:1 !important;filter:none !important;}
@keyframes stemImageFinalSlide{from{transform:translateX(8px)}to{transform:translateX(0)}}
/* ===== HOTFIX 20260528: mobile horizontal scroll + hero image lift ===== */

/* Kill mobile horizontal overflow caused by oversized hero artwork */
html,
body{
  overflow-x:hidden !important;
  width:100% !important;
  max-width:100% !important;
}

.page,
.app{
  overflow-x:hidden !important;
  max-width:100vw !important;
}

@media (max-width:768px){
  .page,
  .app,
  .mainGrid,
  .leftCol,
  .rightCol{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }

  .heroArtwork,
  .heroImage,
  .heroVisual{
    top:30px !important;
    right:-36px !important;
    width:350px !important;
    height:170px !important;
    z-index:1 !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }

  .heroArtwork img,
  .heroImage img,
  .heroVisual img,
  #heroImage,
  #heroArtworkImg{
    width:310px !important;
    max-width:none !important;
    right:-22px !important;
    top:-12px !important;
    opacity:.9 !important;
    pointer-events:none !important;
  }
}

@media (max-width:480px){
  .heroArtwork,
  .heroImage,
  .heroVisual{
    top:210px !important;
    right:-48px !important;
    width:235px !important;
    height:160px !important;
    overflow:hidden !important;
  }

  .heroArtwork img,
  .heroImage img,
  .heroVisual img,
  #heroImage,
  #heroArtworkImg{
    width:300px !important;
    right:-58px !important;
    top:-40px !important;
    max-width:none !important;
  }
}
/* ===== MULTITRACK HERO TITLE / MOBILE ART FIX 20260529 ===== */

body.isMultitrackMode .heroTitle{
  letter-spacing:-0.07em !important;
}

@media (max-width:768px){
  body.isMultitrackMode .heroTitle{
    max-width:270px !important;
  }

  body.isMultitrackMode .heroArtwork,
  body.isMultitrackMode .heroImage,
  body.isMultitrackMode .heroVisual{
    top:198px !important;
    right:-36px !important;
    width:215px !important;
    height:150px !important;
    overflow:hidden !important;
  }

  body.isMultitrackMode .heroArtwork img,
  body.isMultitrackMode .heroImage img,
  body.isMultitrackMode .heroVisual img,
  body.isMultitrackMode #heroImage,
  body.isMultitrackMode #heroArtworkImg{
    width:260px !important;
    right:-42px !important;
    top:-42px !important;
    max-width:none !important;
    opacity:.86 !important;
  }
}

@media (max-width:480px){
  body.isMultitrackMode .heroTitle{
    max-width:245px !important;
  }

  body.isMultitrackMode .heroArtwork,
  body.isMultitrackMode .heroImage,
  body.isMultitrackMode .heroVisual{
    top:202px !important;
    right:-48px !important;
    width:205px !important;
    height:142px !important;
  }

  body.isMultitrackMode .heroArtwork img,
  body.isMultitrackMode .heroImage img,
  body.isMultitrackMode .heroVisual img,
  body.isMultitrackMode #heroImage,
  body.isMultitrackMode #heroArtworkImg{
    width:248px !important;
    right:-42px !important;
    top:-40px !important;
  }
}


/* Premium access code modal */
.premiumPrice{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  margin:0 0 18px;
  color:var(--accent);
  font-size:28px;
  line-height:1;
  font-weight:780;
  letter-spacing:-.04em;
}

.premiumPrice span{
  color:rgba(255,255,255,.46);
  font-size:13px;
  font-weight:620;
  letter-spacing:0;
}

.premiumCodeLabel{
  display:block;
  margin:2px 0 8px;
  color:rgba(255,255,255,.56);
  font-size:11px;
  font-weight:680;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.premiumCodeInput{
  width:100%;
  height:52px;
  margin:0 0 12px;
  padding:0 16px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.10);
  outline:none;
  background:rgba(5,5,6,.48);
  color:#f5f5f6;
  font-size:16px;
  font-weight:720;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.premiumCodeInput:focus{
  border-color:rgba(215,255,95,.36);
  box-shadow:
    0 0 0 3px rgba(215,255,95,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.premiumTelegramLink{
  text-decoration:none;
}

.premiumCodeStatus{
  min-height:18px;
  margin-top:12px;
  color:rgba(215,255,95,.78);
  font-size:12px;
  line-height:1.35;
}

.premiumCodeStatus.isError{
  color:rgba(255,120,130,.88);
}

.heroTitlePrefix{
  display:inline !important;
}


/* Checkout UI refinement patch */
.heroTitle > span{
  display:block !important;
  white-space:nowrap !important;
}

.heroTitle span:not(.heroTitlePrefix){
  white-space:inherit;
}

.heroTitlePrefix{
  display:inline !important;
  white-space:nowrap !important;
}

#stemTitleWord span{
  display:inline-block !important;
  white-space:normal !important;
}

.premiumCard{
  padding:26px !important;
}

.premiumTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.premiumTop .patreonBadge{
  margin-bottom:0;
}

.premiumTop .premiumPrice{
  margin:0;
  flex:0 0 auto;
}

.premiumCard .patreonTitle{
  max-width:100%;
  margin:0 0 10px;
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:680;
}

.premiumIntro{
  margin:0 0 18px !important;
  color:rgba(255,255,255,.56);
  font-size:13.5px;
  line-height:1.48;
}

.premiumCheckout{
  display:grid;
  gap:9px;
}

.premiumCodeLabel{
  margin:0;
}

.premiumCodeInput{
  height:50px;
  margin:0;
  letter-spacing:0;
  text-transform:none;
  font-size:15px;
  font-weight:620;
}

#premiumCodeInput{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:720;
}

.premiumHelpText{
  margin:-2px 0 4px;
  color:rgba(255,255,255,.38);
  font-size:11.5px;
  line-height:1.35;
}

.premiumCheckoutBtn{
  height:54px;
  margin-top:3px;
  background:linear-gradient(135deg,#f7f7f8,#d7ff5f) !important;
  color:#111 !important;
  box-shadow:0 18px 48px rgba(215,255,95,.14) !important;
}

.premiumCheckoutNote{
  margin:3px 0 0;
  color:rgba(255,255,255,.42);
  font-size:11.5px;
  line-height:1.42;
  text-align:center;
}

.premiumDivider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 12px;
  color:rgba(255,255,255,.35);
  font-size:11px;
  font-weight:650;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.premiumDivider::before,
.premiumDivider::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(255,255,255,.075);
}

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

.premiumRedeemBtn{
  height:48px;
  margin-top:0 !important;
}

.premiumCodeStatus{
  min-height:17px;
  margin-top:10px;
  text-align:center;
}

@media (max-width:768px){
  .heroTitle > span{
    display:block !important;
    white-space:nowrap !important;
  }

  .heroTitle span{
    display:inline !important;
  }

  .heroTitle > span{
    display:block !important;
  }

  #stemTitleWord span{
    display:inline-block !important;
  }

  .premiumCard{
    padding:22px !important;
  }

  .premiumCard .patreonTitle{
    font-size:28px;
  }
}


/* ===== 2026-05-30 title + preload-only fix ===== */

/* Keep original desktop sizes/layout. Only force first hero line to be:
   Remove guitar / Remove bass / Remove drums / Remove vocal / Extract stems */
.heroTitle > span{
  display:block !important;
  white-space:nowrap !important;
}

.heroTitle > span:first-child{
  display:flex !important;
  align-items:baseline !important;
  gap:.18em !important;
  white-space:nowrap !important;
  width:max-content !important;
  max-width:100% !important;
}

.heroTitle > span:last-child{
  display:block !important;
  white-space:nowrap !important;
}

.heroTitlePrefix{
  display:inline !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

#stemTitleWord,
#stemTitleWord.wordSlotFast{
  display:inline-flex !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
  vertical-align:baseline !important;
}

#stemTitleWord span,
#stemTitleWord.wordSlotFast span{
  display:inline-block !important;
  white-space:normal !important;
}

/* Smooth artwork switch only. Does not change image size or position. */
.heroArtwork img{
  will-change:opacity, transform !important;
  transition:opacity .16s ease, transform .18s cubic-bezier(.2,.9,.25,1) !important;
  backface-visibility:hidden !important;
}

.heroArtwork img.isSwitching{
  opacity:.86 !important;
  transform:translateX(4px) scale(.999) !important;
}

.stemImageSlideIn{
  animation:stemImageStableIn .18s cubic-bezier(.2,.9,.25,1) both !important;
}

@keyframes stemImageStableIn{
  from{opacity:.88; transform:translateX(4px) scale(.999)}
  to{opacity:.92; transform:translateX(0) scale(1)}
}


/* ===== 2026-05-31 account header + final compact paywall ===== */

.accountWrap{
  position:relative;
  display:flex;
  align-items:center;
}

.accountBtn{
  min-width:112px;
  height:48px;
  padding:0 17px 0 11px;
  border-radius:999px;
  border:1px solid rgba(215,255,95,.42);
  background:rgba(9,10,10,.34);
  color:rgba(255,255,255,.86);
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:680;
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.accountBtn:hover{
  border-color:rgba(215,255,95,.78);
  background:rgba(215,255,95,.08);
}

.accountBtn.isPremium{
  color:var(--accent);
}

.accountAvatar{
  width:27px;
  height:27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(215,255,95,.12);
  font-size:15px;
  line-height:1;
}

.accountMenu{
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:286px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,12,.92);
  backdrop-filter:blur(22px);
  box-shadow:0 22px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
  z-index:70;
}

.accountMenu.isHidden{display:none}

.accountMenuTitle{
  color:rgba(255,255,255,.92);
  font-size:17px;
  font-weight:620;
  letter-spacing:-.03em;
  margin-bottom:5px;
}

.accountMenuStatus{
  color:rgba(255,255,255,.42);
  font-size:12px;
  font-weight:540;
  margin-bottom:14px;
}

.accountMenuStatus.isActive{
  color:var(--accent);
}

.accountMenuRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.065);
  font-size:12px;
}

.accountMenuRow span{
  color:rgba(255,255,255,.42);
}

.accountMenuRow strong{
  max-width:178px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.78);
  font-weight:560;
}

.accountMenuBtn{
  width:100%;
  height:42px;
  margin-top:10px;
  border-radius:999px;
  border:0;
  background:linear-gradient(135deg,#f7f7f8,#d7ff5f);
  color:#111;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}

.accountMenuBtn.ghost{
  margin-top:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.075);
  color:rgba(255,255,255,.68);
}

.patreonGate{
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
}

.paywallCard{
  width:min(92vw, 430px) !important;
  max-height:min(92svh, 650px) !important;
  overflow:auto !important;
  padding:24px !important;
  border-radius:32px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(215,255,95,.09), transparent 30%),
    linear-gradient(180deg, rgba(25,25,29,.82), rgba(8,8,10,.92)) !important;
  border:1px solid rgba(255,255,255,.105) !important;
  box-shadow:0 34px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.paywallCard::-webkit-scrollbar{width:0;height:0}

.paywallHeader{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:18px !important;
  margin:0 0 18px !important;
}

.paywallEyebrow{
  margin:0 0 7px !important;
  color:rgba(255,255,255,.42) !important;
  font-size:11.5px !important;
  font-weight:540 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
}

.paywallTitle,.paywallCard .patreonTitle{
  max-width:230px !important;
  margin:0 !important;
  color:rgba(245,245,246,.94) !important;
  font-size:27px !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  font-weight:560 !important;
}

.paywallPrice{
  display:flex !important;
  align-items:baseline !important;
  justify-content:flex-end !important;
  gap:5px !important;
  padding-top:24px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  text-align:right !important;
}

.paywallPrice span{
  display:inline !important;
  color:var(--accent) !important;
  font-size:27px !important;
  font-weight:620 !important;
  letter-spacing:-.045em !important;
  line-height:1 !important;
}

.paywallPrice small{
  display:inline !important;
  margin:0 !important;
  color:rgba(255,255,255,.44) !important;
  font-size:13px !important;
  font-weight:520 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
}

.paywallBenefits{
  display:grid !important;
  gap:8px !important;
  margin:0 0 18px !important;
  color:rgba(255,255,255,.70) !important;
  font-size:13.5px !important;
  line-height:1.25 !important;
  font-weight:510 !important;
}

.paywallBenefits div{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}

.paywallBenefits span{
  color:var(--accent) !important;
  font-size:13px !important;
  font-weight:760 !important;
}

.paywallCheckout{
  display:grid !important;
  gap:9px !important;
  margin:0 !important;
}

.paywallCard .premiumCodeLabel{
  margin:0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:12.5px !important;
  font-weight:520 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.paywallCard .premiumCodeInput,
.paywallCard .premiumCodeInput:focus,
.paywallCard .premiumCodeInput:active{
  width:100% !important;
  height:47px !important;
  margin:0 !important;
  padding:0 15px !important;
  border-radius:17px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  outline:none !important;
  background:rgba(4,4,6,.55) !important;
  color:#f5f5f6 !important;
  -webkit-text-fill-color:#f5f5f6 !important;
  caret-color:var(--accent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 9999px rgba(4,4,6,.55) inset !important;
  font-size:14.5px !important;
  font-weight:520 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.paywallCard .premiumCodeInput:-webkit-autofill,
.paywallCard .premiumCodeInput:-webkit-autofill:hover,
.paywallCard .premiumCodeInput:-webkit-autofill:focus{
  -webkit-text-fill-color:#f5f5f6 !important;
  caret-color:var(--accent) !important;
  transition:background-color 99999s ease-in-out 0s !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 9999px rgba(4,4,6,.78) inset !important;
  border:1px solid rgba(215,255,95,.16) !important;
}

.paywallCard #premiumCodeInput{
  text-transform:uppercase !important;
  letter-spacing:.055em !important;
  font-weight:650 !important;
}

.paywallCard .premiumHelpText{
  margin:-2px 0 4px !important;
  color:rgba(255,255,255,.34) !important;
  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:470 !important;
}

.paywallCard .premiumCheckoutBtn{
  height:51px !important;
  margin:4px 0 0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#f7f7f8,#d7ff5f) !important;
  color:#111 !important;
  font-size:14.5px !important;
  font-weight:620 !important;
  letter-spacing:-.01em !important;
  box-shadow:0 18px 46px rgba(215,255,95,.12) !important;
}

.paywallCard .premiumCheckoutNote{
  margin:2px 0 0 !important;
  color:rgba(255,255,255,.36) !important;
  font-size:11px !important;
  line-height:1.3 !important;
  text-align:center !important;
  font-weight:470 !important;
}

.paywallCodeToggle{
  display:block !important;
  width:100% !important;
  margin:15px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.43) !important;
  font-size:11.5px !important;
  line-height:1 !important;
  font-weight:520 !important;
  cursor:pointer !important;
  text-align:center !important;
}

.paywallCodePanel{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  margin:13px 0 0 !important;
}

.paywallCodePanel.isHidden{display:none !important}

.paywallCard .premiumRedeemBtn{
  height:46px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.74) !important;
  font-size:14px !important;
  font-weight:560 !important;
}

.paywallCard .premiumCodeStatus{
  min-height:16px !important;
  margin-top:10px !important;
  color:rgba(215,255,95,.78) !important;
  font-size:11.5px !important;
  line-height:1.25 !important;
  text-align:center !important;
}

@media (max-width:768px){
  .accountBtn{
    min-width:auto;
    height:42px;
    padding:0 12px 0 8px;
  }
  .accountBtn #accountBtnText{display:none}
  .accountMenu{
    right:-4px;
    width:min(286px, calc(100vw - 28px));
  }
}

@media (max-width:520px){
  .patreonGate{padding:14px !important}
  .paywallCard{width:100% !important; padding:20px !important; border-radius:28px !important}
  .paywallHeader{gap:12px !important; margin-bottom:16px !important}
  .paywallTitle,.paywallCard .patreonTitle{font-size:25px !important; max-width:190px !important}
  .paywallPrice{padding-top:24px !important}
  .paywallPrice span{font-size:24px !important}
  .paywallPrice small{font-size:12px !important}
}


/* ===== GhostRiff billing plans v1: modal-only styles, layout locked ===== */
.paywallCard{position:relative}
.paywallClose{
  position:absolute;
  right:16px;
  top:14px;
  width:34px;
  height:34px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.62);
  border-radius:999px;
  font-size:22px;
  line-height:1;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.paywallClose:hover{
  color:#fff;
  border-color:rgba(215,255,95,.22);
  background:rgba(215,255,95,.07);
}
.planCards{
  display:grid;
  gap:10px;
  margin:0 0 16px;
}
.planCard{
  width:100%;
  min-height:82px;
  padding:14px 15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.78);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "name price"
    "note note";
  gap:7px 12px;
  text-align:left;
  cursor:pointer;
}
.planCard.isSelected{
  border-color:rgba(215,255,95,.48);
  background:rgba(215,255,95,.085);
  box-shadow:0 0 0 1px rgba(215,255,95,.06) inset, 0 14px 34px rgba(215,255,95,.07);
}
.planName{
  grid-area:name;
  color:rgba(255,255,255,.92);
  font-size:15px;
  font-weight:620;
  letter-spacing:-.02em;
}
.planCard strong{
  grid-area:price;
  color:var(--accent);
  font-size:17px;
  font-weight:650;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.planCard strong em{
  color:rgba(255,255,255,.42);
  font-style:normal;
  font-size:12px;
  font-weight:520;
}
.planCard small{
  grid-area:note;
  color:rgba(255,255,255,.42);
  font-size:11.5px;
  line-height:1.28;
  font-weight:470;
}
.paywallBenefits{
  margin-bottom:16px !important;
}
.premiumCodeStatus.isError{
  color:#ff7f8b !important;
}


/* ===== GhostRiff plans v2: profile, plan picker, email-first flow ===== */
.accountBtn[data-plan="free"],
.accountBtn.isFree{
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.76) !important;
  background:rgba(255,255,255,.045) !important;
}
.accountBtn[data-plan="pro"]{
  border-color:rgba(215,255,95,.42) !important;
  color:var(--accent) !important;
}
.accountBtn[data-plan="premium"]{
  border-color:rgba(215,255,95,.68) !important;
  color:var(--accent) !important;
  box-shadow:0 0 26px rgba(215,255,95,.10), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.planModalCard{
  width:min(94vw, 560px) !important;
}
.planCardsV2{
  grid-template-columns:1fr !important;
  gap:9px !important;
}
.planCardFree{
  opacity:.78;
}
.planActionPanel{
  display:grid;
  gap:9px;
  margin:14px 0 0;
}
.planActionButtons{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9px;
}
.secondaryPlanButton,
.cardComingBtn{
  height:48px;
  min-height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:620;
}
.cardComingBtn{
  width:100%;
  color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.025);
  cursor:not-allowed;
}
.premiumCheckoutBtn:disabled{
  opacity:.36 !important;
  cursor:not-allowed !important;
}
.practiceSoon{
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(215,255,95,.10);
  background:rgba(215,255,95,.045);
  color:rgba(255,255,255,.43);
  font-size:11.5px;
  line-height:1.35;
  text-align:center;
}
@media (max-width:520px){
  .planActionButtons{
    grid-template-columns:1fr;
  }
}


/* ===== GhostRiff plans v3 — account + plan modal only, main layout locked ===== */
.accountBtn[data-plan="free"],
.accountBtn.isFree{
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.045) !important;
}
.accountBtn[data-plan="pro"]{
  border-color:rgba(215,255,95,.42) !important;
  color:var(--accent) !important;
}
.accountBtn[data-plan="premium"]{
  border-color:rgba(215,255,95,.68) !important;
  color:var(--accent) !important;
  box-shadow:0 0 26px rgba(215,255,95,.10), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.planModalCard{
  width:min(94vw, 560px) !important;
  max-height:min(92vh, 820px) !important;
  overflow:auto !important;
}
.planCardsV3{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  margin:0 0 14px !important;
}
.planCardsV3 .planCard{
  min-height:78px !important;
}
.planCardFree{
  opacity:.76;
}
.planActionPanel{
  display:grid !important;
  gap:9px !important;
  margin:14px 0 0 !important;
}
.planActionButtons{
  display:grid !important;
  grid-template-columns:1fr 1.25fr !important;
  gap:9px !important;
}
.secondaryPlanButton,
.cardComingBtn{
  height:48px !important;
  min-height:48px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.72) !important;
  font-size:13px !important;
  font-weight:620 !important;
  cursor:pointer !important;
}
.secondaryPlanButton:hover{
  color:#fff !important;
  border-color:rgba(215,255,95,.18) !important;
}
.cardComingBtn{
  width:100% !important;
  color:rgba(255,255,255,.38) !important;
  background:rgba(255,255,255,.025) !important;
  cursor:not-allowed !important;
}
.premiumCheckoutBtn:disabled{
  opacity:.36 !important;
  cursor:not-allowed !important;
}
.practiceSoon{
  margin:12px 0 0 !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(215,255,95,.10) !important;
  background:rgba(215,255,95,.045) !important;
  color:rgba(255,255,255,.43) !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  text-align:center !important;
}
.patreonCard::after{
  content:none !important;
  display:none !important;
}
@media (max-width:520px){
  .planActionButtons{
    grid-template-columns:1fr !important;
  }
}


/* ===== GhostRiff pricing modal v5 — clean SaaS layout, main page layout untouched ===== */
#premiumGate.patreonGate{
  padding:clamp(18px,3vw,38px) !important;
  align-items:center !important;
  justify-content:center !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(215,255,95,.08), transparent 30%),
    radial-gradient(circle at 84% 0%, rgba(160,94,255,.10), transparent 34%),
    rgba(0,0,0,.78) !important;
  backdrop-filter:blur(22px) saturate(1.1) !important;
}

.pricingModal{
  width:min(1180px, calc(100vw - 48px));
  max-height:min(900px, calc(100vh - 48px));
  overflow:auto;
  position:relative;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 48%, rgba(0,0,0,.18)),
    radial-gradient(circle at 16% 18%, rgba(215,255,95,.075), transparent 36%),
    rgba(10,10,13,.94);
  box-shadow:
    0 44px 140px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.08);
  padding:clamp(28px,3.1vw,44px);
  color:#f7f7f8;
}

.pricingClose{
  position:absolute;
  right:24px;
  top:22px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.70);
  font-size:30px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.pricingClose:hover{
  transform:scale(1.03);
  color:#fff;
  border-color:rgba(215,255,95,.28);
  background:rgba(215,255,95,.06);
}

.pricingHero{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-right:72px;
  margin-bottom:28px;
}

.pricingEyebrow{
  color:var(--accent);
  font-size:12px;
  line-height:1;
  font-weight:760;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.pricingTitle{
  margin:0;
  font-family:var(--display-font, "Space Grotesk", Inter, system-ui, sans-serif);
  font-size:clamp(42px,4.2vw,64px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:640;
}

.pricingSubcopy{
  max-width:620px;
  margin:14px 0 0;
  color:rgba(255,255,255,.56);
  font-size:16px;
  line-height:1.45;
  font-weight:480;
}

.pricingGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin:0 0 20px;
}

.pricingPlan{
  min-height:292px;
  padding:22px 22px 20px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 60% 0%, rgba(255,255,255,.045), transparent 42%),
    rgba(255,255,255,.032);
  color:#f5f5f6;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pricingPlan:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.19);
  background:
    radial-gradient(circle at 60% 0%, rgba(255,255,255,.065), transparent 42%),
    rgba(255,255,255,.046);
}

.pricingPlan.isSelected{
  border-color:rgba(215,255,95,.82);
  background:
    radial-gradient(circle at 54% 0%, rgba(215,255,95,.115), transparent 45%),
    linear-gradient(180deg, rgba(215,255,95,.075), rgba(255,255,255,.032));
  box-shadow:
    0 22px 54px rgba(215,255,95,.075),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.pricingBadge{
  min-height:28px;
  padding:8px 11px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.76);
  font-size:10px;
  line-height:1;
  font-weight:760;
  letter-spacing:.035em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.pricingPlan.isRecommended .pricingBadge{
  background:linear-gradient(135deg, #f6ffde, var(--accent));
  color:#141513;
}
.pricingPlan[data-plan-choice="premium"] .pricingBadge{
  background:rgba(171,125,255,.18);
  color:#c8a8ff;
}

.pricingPlanName{
  font-size:26px;
  line-height:1;
  font-weight:620;
  letter-spacing:-.04em;
  margin-bottom:18px;
}
.pricingPlan.isSelected .pricingPlanName{color:var(--accent)}
.pricingPlan[data-plan-choice="premium"] .pricingPlanName{color:#b98cff}

.pricingAmount{
  font-size:48px;
  line-height:.95;
  font-weight:650;
  letter-spacing:-.065em;
  margin-bottom:22px;
}
.pricingAmount em{
  color:rgba(255,255,255,.47);
  font-style:normal;
  font-size:15px;
  font-weight:540;
  letter-spacing:-.02em;
}

.pricingLine{
  display:block;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.09);
  margin:0 0 18px;
}

.pricingFeature{
  position:relative;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.35;
  font-weight:510;
  padding-left:27px;
  margin:0 0 12px;
}
.pricingFeature::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  color:var(--accent);
  font-weight:760;
}
.pricingFeature.isMuted{
  color:rgba(255,255,255,.44);
}

.pricingCheckout{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)),
    rgba(0,0,0,.22);
  padding:22px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  grid-template-areas:
    "selected emailLabel"
    "selected emailRow"
    "help help"
    "secondary secondary"
    "code code"
    "status status";
  gap:10px 20px;
  align-items:center;
}

.pricingSelected{
  grid-area:selected;
  min-height:102px;
  border-radius:22px;
  padding:19px 20px;
  background:rgba(215,255,95,.055);
  border:1px solid rgba(215,255,95,.16);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.pricingSelected span{
  color:rgba(255,255,255,.46);
  font-size:12px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.pricingSelected strong{
  color:#f7f7f8;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:620;
}

.pricingEmailLabel{
  grid-area:emailLabel;
  color:rgba(255,255,255,.62);
  font-size:13px;
  font-weight:620;
  margin:0;
}

.pricingEmailRow{
  grid-area:emailRow;
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:10px;
}

.pricingEmailInput,
.paywallCard .pricingEmailInput,
.pricingModal .premiumCodeInput{
  width:100% !important;
  height:56px !important;
  margin:0 !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.36) !important;
  color:#f7f7f8 !important;
  -webkit-text-fill-color:#f7f7f8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size:16px !important;
  font-weight:560 !important;
  letter-spacing:-.015em !important;
  outline:none !important;
}
.pricingEmailInput:focus,
.pricingModal .premiumCodeInput:focus{
  border-color:rgba(215,255,95,.36) !important;
  box-shadow:0 0 0 4px rgba(215,255,95,.06), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pricingContinueBtn{
  height:56px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg, #f7f7f8 0%, #eaffae 45%, var(--accent) 100%);
  color:#111;
  font-size:16px;
  font-weight:670;
  letter-spacing:-.02em;
  cursor:pointer;
  box-shadow:0 18px 48px rgba(215,255,95,.16);
  transition:transform .18s ease, filter .18s ease;
}
.pricingContinueBtn:hover{transform:translateY(-1px); filter:brightness(1.03)}
.pricingContinueBtn:active{transform:translateY(0)}

.pricingHelp{
  grid-area:help;
  margin:0;
  color:rgba(255,255,255,.42);
  font-size:12.5px;
  line-height:1.4;
  font-weight:470;
}

.pricingSecondary{
  grid-area:secondary;
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-top:4px;
}

.pricingTextButton{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.52);
  font-size:13px;
  font-weight:590;
  cursor:pointer;
  padding:6px 0;
}
.pricingTextButton:hover{color:var(--accent)}

.pricingCodePanel{
  grid-area:code;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  gap:10px !important;
  margin:2px 0 0 !important;
}
.pricingCodePanel.isHidden{display:none !important}

.pricingCodeInput{
  text-transform:uppercase !important;
  letter-spacing:.045em !important;
}

.pricingRedeemBtn{
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.065);
  color:#f7f7f8;
  font-size:15px;
  font-weight:620;
  cursor:pointer;
}
.pricingRedeemBtn:hover{
  border-color:rgba(215,255,95,.24);
  background:rgba(215,255,95,.075);
}

.pricingStatus{
  grid-area:status;
  min-height:18px !important;
  margin:0 !important;
  text-align:left !important;
}

/* hide legacy pricing pieces if older CSS still exists */
.pricingModal .paywallHeader,
.pricingModal .paywallPrice,
.pricingModal .planActionButtons,
.pricingModal .cardComingBtn,
.pricingModal .practiceSoon,
.pricingModal .premiumHelpText{
  display:none !important;
}

@media (max-width:900px){
  .pricingModal{
    width:min(680px, calc(100vw - 32px));
    padding:26px;
    border-radius:30px;
  }
  .pricingHero{
    padding-right:58px;
    margin-bottom:22px;
  }
  .pricingGrid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .pricingPlan{
    min-height:auto;
    padding:18px;
  }
  .pricingBadge{margin-bottom:14px}
  .pricingPlanName{font-size:23px; margin-bottom:12px}
  .pricingAmount{font-size:38px; margin-bottom:16px}
  .pricingFeature{margin-bottom:8px}
  .pricingCheckout{
    grid-template-columns:1fr;
    grid-template-areas:
      "selected"
      "emailLabel"
      "emailRow"
      "help"
      "secondary"
      "code"
      "status";
  }
  .pricingSelected{min-height:auto}
}

@media (max-width:560px){
  #premiumGate.patreonGate{
    padding:10px !important;
    align-items:flex-start !important;
  }
  .pricingModal{
    width:100%;
    max-height:calc(100vh - 20px);
    padding:21px;
    border-radius:26px;
  }
  .pricingClose{
    right:16px;
    top:16px;
    width:39px;
    height:39px;
  }
  .pricingHero{
    padding-right:48px;
  }
  .pricingTitle{
    font-size:38px;
    letter-spacing:-.055em;
  }
  .pricingSubcopy{
    font-size:14px;
  }
  .pricingEmailRow{
    grid-template-columns:1fr;
  }
  .pricingContinueBtn{
    width:100%;
  }
  .pricingSecondary{
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
  }
  .pricingCodePanel{
    grid-template-columns:1fr !important;
  }
}

/* pricing page redirect fallback */
.miniPricingRedirect{
  width:min(420px,calc(100vw - 32px));
  position:relative;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(12,13,15,.96);
  box-shadow:0 30px 100px rgba(0,0,0,.55);
  color:#f7f7f8;
}
.miniPricingRedirect h2{margin:8px 0 10px;font-family:var(--display-font,"Space Grotesk",Inter,sans-serif);font-size:34px;letter-spacing:-.05em}
.miniPricingRedirect p{color:rgba(255,255,255,.55);line-height:1.45;margin:0 0 18px}
.miniPricingButton{height:52px;border-radius:999px;background:linear-gradient(135deg,#fff,var(--accent));color:#111;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:750}
.visuallyHiddenPricingEmail{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}


/* ===== Auth flow v1: login is account creation, pricing is separate ===== */
.accountBtn[data-plan="anonymous"]{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.76) !important;
}
.accountBtn[data-plan="free"]{
  border-color:rgba(215,255,95,.28) !important;
  background:rgba(215,255,95,.045) !important;
  color:rgba(215,255,95,.92) !important;
}
.loginCard{
  width:min(430px, calc(100vw - 32px));
  position:relative;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(215,255,95,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    rgba(10,10,12,.96);
  box-shadow:0 34px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
  color:#F5F5F6;
  padding:30px;
}
.loginClose{
  position:absolute;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.72);
  font-size:30px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.loginEyebrow{
  color:var(--accent);
  font-size:11px;
  font-weight:780;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:0 52px 12px 0;
}
.loginTitle{
  margin:0;
  font-family:"Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:38px;
  line-height:.96;
  letter-spacing:-.065em;
  font-weight:620;
}
.loginSub{
  margin:14px 0 22px;
  color:rgba(220,220,226,.60);
  font-size:14px;
  line-height:1.45;
  font-weight:520;
}
.loginLabel{
  display:block;
  margin:0 0 8px;
  color:rgba(220,220,226,.62);
  font-size:12px;
  font-weight:700;
}
.loginInput,
.loginCodeInput{
  width:100% !important;
  height:56px !important;
  margin:0 0 12px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(0,0,0,.32) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  outline:none !important;
  font-size:16px !important;
  font-weight:560 !important;
}
.loginInput:focus,
.loginCodeInput:focus{
  border-color:rgba(215,255,95,.34) !important;
  box-shadow:0 0 0 4px rgba(215,255,95,.055) !important;
}
.loginPrimary,
.loginSecondary{
  width:100%;
  height:56px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#f7f7f8 0%,#efffc0 48%,var(--accent) 100%);
  color:#111;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.025em;
  cursor:pointer;
}
.loginSecondary{
  margin-top:0;
  background:rgba(255,255,255,.07);
  color:#F5F5F6;
  border:1px solid rgba(255,255,255,.10);
}
.loginActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:16px 0 0;
}
.loginActions a,
.loginActions button{
  border:0;
  background:transparent;
  color:rgba(220,220,226,.58);
  padding:5px 0;
  text-decoration:none;
  cursor:pointer;
  font-size:13px;
  font-weight:650;
}
.loginActions a:hover,
.loginActions button:hover{
  color:var(--accent);
}
.loginCodePanel{
  display:grid !important;
  gap:10px !important;
  margin:14px 0 0 !important;
}
.loginCodePanel.isHidden{display:none !important;}
.loginCodeInput{
  margin:0 !important;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.loginStatus{
  min-height:18px !important;
  margin:12px 0 0 !important;
  text-align:left !important;
}
.visuallyHiddenPricingEmail{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
@media(max-width:480px){
  .loginCard{
    padding:24px;
    border-radius:26px;
  }
  .loginTitle{
    font-size:32px;
  }
}


/* ===== Auth options v1: social login + darker input + cleaner spacing ===== */
.loginCard{
  width:min(520px, calc(100vw - 32px)) !important;
  padding:34px !important;
  border-radius:32px !important;
}
.loginClose{
  width:38px !important;
  height:38px !important;
  right:20px !important;
  top:20px !important;
  font-size:26px !important;
  color:rgba(255,255,255,.58) !important;
}
.loginEyebrow{
  margin-right:54px !important;
  margin-bottom:14px !important;
}
.loginTitle{
  font-size:42px !important;
  line-height:.96 !important;
  letter-spacing:-.067em !important;
}
.loginSub{
  margin:16px 0 24px !important;
  max-width:410px !important;
  color:rgba(220,220,226,.58) !important;
}
.socialLoginGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 20px;
}
.socialLoginBtn{
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:#F5F5F6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:720;
  letter-spacing:-.015em;
}
.socialLoginBtn:hover{
  border-color:rgba(215,255,95,.24);
  background:rgba(255,255,255,.065);
}
.socialIcon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  line-height:1;
  font-weight:850;
}
.googleIcon{
  background:#fff;
  color:#111;
}
.patreonIcon{
  background:#ff424d;
  color:#fff;
}
.loginDivider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:2px 0 20px;
  color:rgba(220,220,226,.42);
}
.loginDivider span{
  height:1px;
  background:rgba(255,255,255,.085);
}
.loginDivider em{
  font-style:normal;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.loginLabel{
  margin-bottom:9px !important;
}
.loginInput,
.loginCodeInput{
  height:58px !important;
  margin-bottom:16px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(5,5,6,.72) !important;
  color:#F5F5F6 !important;
  -webkit-text-fill-color:#F5F5F6 !important;
  caret-color:var(--accent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.loginInput:-webkit-autofill,
.loginInput:-webkit-autofill:hover,
.loginInput:-webkit-autofill:focus{
  -webkit-text-fill-color:#F5F5F6 !important;
  transition:background-color 9999s ease-in-out 0s !important;
  box-shadow:0 0 0 1000px rgba(5,5,6,.88) inset, 0 0 0 4px rgba(215,255,95,.045) !important;
}
.loginInput:focus,
.loginCodeInput:focus{
  background:rgba(5,5,6,.84) !important;
  border-color:rgba(215,255,95,.40) !important;
  box-shadow:0 0 0 4px rgba(215,255,95,.055), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.loginPrimary{
  height:58px !important;
  margin-top:4px !important;
}
.loginActions{
  justify-content:center !important;
  margin:20px 0 0 !important;
}
.loginActions button{
  color:rgba(220,220,226,.58) !important;
}
.loginCodePanel{
  margin-top:16px !important;
}
.loginStatus{
  margin-top:14px !important;
}
@media(max-width:560px){
  .loginCard{
    padding:28px 24px !important;
  }
  .loginTitle{
    font-size:34px !important;
  }
  .socialLoginGrid{
    grid-template-columns:1fr;
  }
}


/* Patreon-only build */
.patreonOnlyCard{
  max-width:560px !important;
}
.patreonOnlyButton{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  text-decoration:none !important;
}
.loginNote{
  margin:18px auto 0;
  max-width:360px;
  color:rgba(220,220,226,.48);
  font-size:13px;
  line-height:1.45;
  font-weight:650;
  text-align:center;
}
.accountBtn[data-plan="patreon"]{
  border-color:rgba(215,255,95,.45) !important;
  background:rgba(215,255,95,.075) !important;
  color:rgba(215,255,95,.96) !important;
}
.patreonOnlyPricing{
  width:min(560px, calc(100vw - 36px));
  min-height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#F5F5F6;
}
.patreonOnlyPricing .loginTitle{
  margin-bottom:18px;
}
.patreonOnlyPricing .loginSub{
  margin-bottom:28px !important;
}
.patreonOnlyLink{
  width:100%;
  height:62px;
}
.patreonBackLink{
  display:block;
  margin:22px auto 0;
  color:rgba(220,220,226,.58);
  text-decoration:none;
  font-weight:700;
}
.patreonBackLink:hover{
  color:var(--accent);
}


/* Patreon-only final */
.patreonOnlyCard{max-width:560px !important;}
.patreonOnlyButton{display:flex !important;align-items:center !important;justify-content:center !important;gap:12px !important;text-decoration:none !important;}
.loginNote{margin:18px auto 0;max-width:360px;color:rgba(220,220,226,.48);font-size:13px;line-height:1.45;font-weight:650;text-align:center;}
.accountBtn[data-plan="patreon"]{border-color:rgba(215,255,95,.45) !important;background:rgba(215,255,95,.075) !important;color:rgba(215,255,95,.96) !important;}


/* Telegram Premium-only billing */
.premiumOnlyCard{max-width:560px !important;}
.premiumOnlyButton{display:flex !important;align-items:center !important;justify-content:center !important;gap:12px !important;text-decoration:none !important;}
.loginNote{margin:18px auto 0;max-width:410px;color:rgba(220,220,226,.50);font-size:13px;line-height:1.45;font-weight:650;text-align:center;}
.accountBtn[data-plan="premium"]{border-color:rgba(215,255,95,.45) !important;background:rgba(215,255,95,.075) !important;color:rgba(215,255,95,.96) !important;}


.processHint{
  margin:0 auto 8px;
  max-width:720px;
  color:rgba(235,235,240,.44);
  font-size:12px;
  line-height:1.35;
  font-weight:650;
  text-align:center;
}
.loginLabel{
  display:block;
  margin:20px 0 8px;
  color:rgba(245,245,246,.70);
  font-size:13px;
  font-weight:800;
  text-align:left;
}
.loginInput{
  width:100%;
  margin-bottom:14px;
}
.loginActions{
  display:flex;
  justify-content:center;
  margin-top:14px;
}
.loginActions button{
  border:0;
  background:transparent;
  color:rgba(215,255,95,.82);
  font-weight:800;
  cursor:pointer;
}
.loginCodePanel{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:14px;
}
@media(max-width:640px){
  .processHint{font-size:11px;max-width:320px}
  .loginCodePanel{grid-template-columns:1fr}
}


.loginPlanNote{
  margin:-6px 0 14px;
  color:rgba(235,235,240,.48);
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}
.pricingPlanList{
  display:grid;
  gap:12px;
  width:100%;
  margin:22px 0 18px;
}
.pricingPlanChoice{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:18px;
  min-height:auto;
  display:grid;
  gap:6px;
  text-align:left;
}
.pricingPlanChoice strong{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:24px;
  letter-spacing:-.04em;
}
.pricingPlanChoice span{
  color:rgba(215,255,95,.94);
  font-weight:900;
}
.pricingPlanChoice small{
  color:rgba(235,235,240,.52);
  line-height:1.35;
}
.pricingPlanChoice.isSelected{
  border-color:rgba(215,255,95,.55);
  background:rgba(215,255,95,.075);
}


/* Floating job notification */
.jobToast{
  position:fixed;
  left:50%;
  bottom:94px;
  transform:translateX(-50%) translateY(16px);
  z-index:10000;
  max-width:min(520px,calc(100vw - 28px));
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(215,255,95,.28);
  background:rgba(16,18,14,.92);
  color:rgba(245,245,246,.92);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 22px 80px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  backdrop-filter:blur(18px);
}
.jobToast.isVisible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.jobToast.isError{
  border-color:rgba(255,90,90,.35);
  color:#ffd0d0;
}
@media(max-width:640px){
  .jobToast{
    bottom:82px;
    border-radius:22px;
    font-size:12px;
  }
}


.restoreAccessButton{
  width:100%;
  margin:0 0 12px;
}

/* ===== GHOSTRIFF HARD CHECKPOINT 20260609-3 ===== */
/* This block is intentionally last. It overrides all older duplicated rules above. */
html,body,.page,.app{max-width:100vw!important;overflow-x:hidden!important;}
.mainGrid{align-items:start!important;}
.rightCol{align-self:start!important;}
.tracksGrid{height:auto!important;min-height:0!important;display:grid!important;grid-template-rows:auto auto!important;gap:18px!important;align-content:start!important;}
.track{height:auto!important;min-height:154px!important;}
.track:has(.multitrackPanel:not(.isHidden)){height:auto!important;min-height:0!important;padding-bottom:18px!important;}
.track:has(.multitrackPanel:not(.isHidden)) .trackTop{margin-bottom:8px!important;}
#processedWave.isHidden{display:none!important;}
.multitrackPanel{display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important;margin:8px 0 0!important;padding:0!important;}
.multitrackPanel.isHidden{display:none!important;}
.stemMiniRow{display:grid!important;grid-template-columns:28px 58px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;min-height:34px!important;padding:0!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important;cursor:pointer!important;}
.stemMiniRow:hover .stemMiniLabel,.stemMiniRow.isPlaying .stemMiniLabel{color:rgba(215,255,95,.96)!important;}
.stemMiniIcon,.stemMiniPlay{width:28px!important;height:28px!important;min-width:28px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:rgba(215,255,95,.88)!important;padding:0!important;display:grid!important;place-items:center!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;}
.stemMiniIcon::before,.stemMiniIcon::after,.stemMiniPlay::before,.stemMiniPlay::after{content:none!important;display:none!important;}
.stemMiniIcon svg,.stemMiniPlay svg{width:24px!important;height:24px!important;display:block!important;stroke-width:1.75!important;}
.stemMiniLabel{font-size:12px!important;font-weight:800!important;text-transform:lowercase!important;letter-spacing:.01em!important;color:rgba(245,245,246,.68)!important;}
.stemMiniWave{width:100%!important;height:34px!important;display:block!important;opacity:1!important;}
.stemMiniRowMuted{opacity:.55!important;}
.stemMiniRowMuted .stemMiniIcon{color:rgba(245,245,246,.45)!important;}
.stemMiniRowMuted .stemMiniWave{opacity:.62!important;}

@media (min-width:901px){
  .mainGrid{align-items:start!important;}
  .rightCol{max-width:560px!important;}
  .tracksGrid{overflow:visible!important;}
}

/* Mobile hero artwork: show real visible character beside title, above upload. */
@media (max-width:768px){
  .mainGrid{position:relative!important;display:grid!important;grid-template-columns:1fr!important;gap:20px!important;align-items:start!important;overflow:visible!important;}
  .leftCol{position:relative!important;z-index:3!important;}
  .rightCol{display:contents!important;}
  .heroArtwork{display:block!important;position:absolute!important;top:74px!important;right:-58px!important;width:280px!important;height:270px!important;margin:0!important;z-index:1!important;pointer-events:none!important;overflow:visible!important;opacity:1!important;}
  .heroArtwork img,#heroArtworkImg{display:block!important;position:absolute!important;width:640px!important;max-width:none!important;right:-210px!important;top:-96px!important;opacity:.92!important;filter:drop-shadow(0 34px 70px rgba(0,0,0,.48)) saturate(1.04)!important;pointer-events:none!important;}
  .label,.heroTitle,.sub,.upload{position:relative!important;z-index:4!important;}
  .heroTitle{max-width:calc(100% - 86px)!important;}
  .sub{max-width:calc(100% - 112px)!important;}
  .upload{margin-top:34px!important;min-height:176px!important;border-radius:26px!important;}
  .uploadCenter{min-height:154px!important;}
  .section,.tracksGrid{position:relative!important;z-index:5!important;}
  .track{min-height:132px!important;height:auto!important;}
  .track:has(.multitrackPanel:not(.isHidden)){min-height:0!important;padding-bottom:14px!important;}
  .stemMiniRow{grid-template-columns:28px 50px minmax(0,1fr)!important;min-height:32px!important;gap:8px!important;}
  .stemMiniIcon,.stemMiniPlay{width:26px!important;height:26px!important;min-width:26px!important;}
  .stemMiniIcon svg,.stemMiniPlay svg{width:22px!important;height:22px!important;}
  .stemMiniLabel{font-size:10.5px!important;}
  .stemMiniWave{height:30px!important;}
}
@media (max-width:480px){
  .heroArtwork{top:78px!important;right:-72px!important;width:260px!important;height:260px!important;}
  .heroArtwork img,#heroArtworkImg{width:620px!important;right:-220px!important;top:-96px!important;opacity:.93!important;}
  .heroTitle{max-width:calc(100% - 82px)!important;}
  .sub{max-width:calc(100% - 104px)!important;}
  .upload{margin-top:36px!important;min-height:168px!important;}
  .uploadCenter{min-height:148px!important;}
}
@media (max-width:390px){
  .heroArtwork{right:-84px!important;}
  .heroArtwork img,#heroArtworkImg{width:590px!important;right:-222px!important;top:-88px!important;}
}


/* ===== UI STABILITY CHECKPOINT 20260609-4 ===== */
/* Multitrack list: stable layout, no icon plates, no default green state. */
.multitrackPanel{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important;margin:10px 0 0!important;padding:0!important;position:relative!important;z-index:2!important;}
.multitrackPanel.isHidden{display:none!important;}
.track:has(.multitrackPanel:not(.isHidden)){height:auto!important;min-height:0!important;padding-bottom:18px!important;overflow:visible!important;}
.tracksGrid:has(.multitrackPanel:not(.isHidden)){height:auto!important;grid-template-rows:auto auto!important;align-content:start!important;overflow:visible!important;}
.rightCol,.tracksGrid,.track{overflow:visible!important;}
.stemMiniRow{display:grid!important;grid-template-columns:30px 62px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;min-height:36px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer!important;color:rgba(245,245,246,.62)!important;-webkit-tap-highlight-color:transparent!important;}
.stemMiniRow:hover{background:transparent!important;}
.stemMiniRow:hover .stemMiniLabel{color:rgba(245,245,246,.82)!important;}
.stemMiniIcon,.stemMiniPlay{width:30px!important;height:30px!important;min-width:30px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:rgba(245,245,246,.58)!important;padding:0!important;margin:0!important;display:grid!important;place-items:center!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;}
.stemMiniIcon::before,.stemMiniIcon::after,.stemMiniPlay::before,.stemMiniPlay::after{content:none!important;display:none!important;}
.stemMiniIcon svg,.stemMiniPlay svg{width:25px!important;height:25px!important;display:block!important;stroke:currentColor!important;fill:none!important;}
.stemMiniLabel{font-size:12px!important;font-weight:800!important;text-transform:lowercase!important;letter-spacing:.01em!important;color:rgba(245,245,246,.58)!important;transition:color .16s ease!important;}
.stemMiniWave{width:100%!important;height:34px!important;display:block!important;opacity:1!important;}
.stemMiniRow.isSelected .stemMiniLabel{color:rgba(245,245,246,.88)!important;}
.stemMiniRow.isSelected .stemMiniIcon,.stemMiniRow.isSelected .stemMiniPlay{color:rgba(245,245,246,.82)!important;}
.stemMiniRow.isLoading .stemMiniLabel{color:rgba(255,255,255,.86)!important;}
.stemMiniRow.isLoading .stemMiniIcon,.stemMiniRow.isLoading .stemMiniPlay{color:rgba(255,255,255,.82)!important;animation:stemPulse20260609 1s ease-in-out infinite!important;}
.stemMiniRow.isPlaying .stemMiniLabel{color:rgba(215,255,95,.96)!important;}
.stemMiniRow.isPlaying .stemMiniIcon,.stemMiniRow.isPlaying .stemMiniPlay{color:rgba(215,255,95,.96)!important;animation:none!important;}
.stemMiniRow.isErrored .stemMiniLabel{color:rgba(255,110,110,.9)!important;}
.stemMiniRowMuted{opacity:.44!important;pointer-events:none!important;}
@keyframes stemPulse20260609{0%,100%{opacity:.55}50%{opacity:1}}

/* Mobile download/auth patterns. */
#mobilePremiumBtn[data-state="premium"]{color:rgba(215,255,95,.96)!important;}
#mobilePremiumBtn[data-state="account"]{color:rgba(245,245,246,.82)!important;}

/* Modal close is a plain X everywhere, no circle. */
.loginClose,.pricingClose{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;width:40px!important;height:40px!important;right:16px!important;top:8px!important;color:rgba(245,245,246,.68)!important;font-size:32px!important;line-height:1!important;z-index:5!important;}
.loginClose:hover,.pricingClose:hover{background:transparent!important;color:#fff!important;transform:none!important;border:0!important;}
#premiumGate.patreonGate{overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
.loginCodePanel{max-height:none!important;overflow:visible!important;}
#premiumCodePanel{scroll-margin-bottom:28px!important;}

@media (max-width:768px){
  /* Raise artwork clearly above the upload plate. */
  .heroArtwork{display:block!important;position:absolute!important;top:22px!important;right:-80px!important;width:290px!important;height:260px!important;margin:0!important;z-index:1!important;pointer-events:none!important;overflow:visible!important;opacity:1!important;}
  .heroArtwork img,#heroArtworkImg{display:block!important;position:absolute!important;width:610px!important;max-width:none!important;right:-214px!important;top:-134px!important;opacity:.94!important;filter:drop-shadow(0 34px 70px rgba(0,0,0,.48)) saturate(1.04)!important;pointer-events:none!important;}
  .label,.heroTitle,.sub,.upload{position:relative!important;z-index:4!important;}
  .heroTitle{max-width:calc(100% - 84px)!important;}
  .sub{max-width:calc(100% - 112px)!important;}
  .upload{margin-top:46px!important;min-height:172px!important;}
  .uploadCenter{min-height:148px!important;}

  /* Mobile auth is a bottom sheet, not a floating weird popover. */
  #premiumGate.patreonGate{padding:0!important;align-items:flex-end!important;justify-content:flex-end!important;background:rgba(0,0,0,.70)!important;backdrop-filter:blur(18px) saturate(1.05)!important;-webkit-backdrop-filter:blur(18px) saturate(1.05)!important;}
  #premiumGate .loginCard{width:100vw!important;max-width:none!important;max-height:88svh!important;overflow:auto!important;border-radius:28px 28px 0 0!important;padding:32px 22px calc(24px + env(safe-area-inset-bottom))!important;margin:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;}
  #premiumGate .loginClose{top:2px!important;right:14px!important;}
  #premiumGate .loginTitle{font-size:32px!important;line-height:1!important;padding-right:42px!important;}
  #premiumGate .loginSub{font-size:13px!important;margin-bottom:18px!important;}
  #premiumGate .loginInput,#premiumGate .loginCodeInput{height:52px!important;margin-bottom:12px!important;}
  #premiumGate .loginPrimary,#premiumGate .loginSecondary{height:52px!important;border-radius:16px!important;}
  #premiumGate .loginCodePanel{grid-template-columns:1fr!important;gap:10px!important;margin-top:12px!important;padding-bottom:20px!important;}
  #premiumGate .loginStatus{padding-bottom:8px!important;}

  .stemMiniRow{grid-template-columns:30px 54px minmax(0,1fr)!important;gap:8px!important;min-height:34px!important;}
  .stemMiniIcon,.stemMiniPlay{width:30px!important;height:30px!important;min-width:30px!important;}
  .stemMiniIcon svg,.stemMiniPlay svg{width:24px!important;height:24px!important;}
  .stemMiniLabel{font-size:11px!important;}
  .stemMiniWave{height:32px!important;}
}
@media (max-width:430px){
  .heroArtwork{top:14px!important;right:-96px!important;width:278px!important;height:252px!important;}
  .heroArtwork img,#heroArtworkImg{width:590px!important;right:-218px!important;top:-132px!important;}
  .upload{margin-top:50px!important;}
}


/* ===== UI HOTFIX 20260609-5 ===== */
/* Layering only: keep artwork coordinates, but place account/ghost button above it. */
.header,.headerActions,.accountWrap,#accountBtn,.waveBurger{position:relative!important;z-index:120!important;}
.heroArtwork,.heroArtwork img,#heroArtworkImg{z-index:1!important;}
@media (max-width:768px){
  .header,.headerActions,.accountWrap,#accountBtn,.waveBurger{z-index:160!important;}
  .heroArtwork,.heroArtwork img,#heroArtworkImg{z-index:1!important;}
}

/* Mobile plan/auth pattern: bottom sheet for the ghost button. */
@media (max-width:768px){
  #premiumGate.patreonGate:not(.isHidden){display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;background:rgba(0,0,0,.72)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;}
  #premiumGate .loginCard{position:relative!important;width:100vw!important;max-width:none!important;max-height:88svh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;margin:0!important;border-radius:28px 28px 0 0!important;padding:34px 22px calc(24px + env(safe-area-inset-bottom))!important;transform:none!important;}
  #premiumGate .loginCard::before{content:"";position:absolute;top:10px;left:50%;width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.24);transform:translateX(-50%);}
  #premiumGate .loginClose{top:4px!important;right:14px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;}
}

/* Multitrack states: idle gray, loading white, playing green. Immediate visual active uses first green bars. */
.stemMiniRow:not(.isPlaying):not(.isLoading):not(.isVisualActive) .stemMiniIcon,
.stemMiniRow:not(.isPlaying):not(.isLoading):not(.isVisualActive) .stemMiniPlay{color:rgba(245,245,246,.58)!important;}
.stemMiniRow.isVisualActive .stemMiniLabel,
.stemMiniRow.isVisualActive .stemMiniIcon,
.stemMiniRow.isVisualActive .stemMiniPlay{color:rgba(215,255,95,.96)!important;}
.stemMiniIcon svg,.stemMiniPlay svg{fill:currentColor!important;stroke:none!important;}
.stemMiniRow[data-mini-stem="drums"] .stemMiniIcon svg,
.stemMiniRow[data-mini-stem="drums"] .stemMiniPlay svg,
.stemMiniRow[data-mini-stem="vocals"] .stemMiniIcon svg,
.stemMiniRow[data-mini-stem="vocals"] .stemMiniPlay svg,
.stemMiniRow[data-mini-stem="other"] .stemMiniIcon svg,
.stemMiniRow[data-mini-stem="other"] .stemMiniPlay svg,
.stemMiniRow[data-mini-stem="piano"] .stemMiniIcon svg,
.stemMiniRow[data-mini-stem="piano"] .stemMiniPlay svg{fill:none!important;stroke:currentColor!important;}


/* ===== UI HOTFIX 20260610-6 =====
   Focused fix: align right cards to upload, real mobile sheet states, no fake drag handle,
   Lucide-style instrument icons. */
@media (min-width:901px){
  .mainGrid{align-items:start!important;}
  .rightCol{align-self:start!important;}
  .rightCol .section{margin-top:80px!important;}
}

/* Mobile sheet behaviour: body does not drag/scroll behind the sheet. */
body.premiumSheetOpen{overflow:hidden!important;touch-action:none!important;}
@media (max-width:768px){
  #premiumGate.patreonGate:not(.isHidden){display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;background:rgba(0,0,0,.72)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;overscroll-behavior:contain!important;}
  #premiumGate .loginCard::before{content:none!important;display:none!important;}
  #premiumGate .loginCard{width:100vw!important;max-width:none!important;max-height:88svh!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;margin:0!important;border-radius:28px 28px 0 0!important;padding:32px 22px calc(24px + env(safe-area-inset-bottom))!important;}
  #premiumGate.isAccountSheet .loginCard{display:none!important;}
  #premiumGate:not(.isAccountSheet) .mobileAccountSheet{display:none!important;}
  #premiumGate.isAccountSheet .mobileAccountSheet{display:block!important;}
  .mobileAccountSheet{position:relative;width:100vw;max-height:82svh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0;padding:32px 22px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:linear-gradient(180deg,rgba(24,24,28,.98),rgba(8,8,10,.99));border:1px solid rgba(255,255,255,.10);border-left:0;border-right:0;border-bottom:0;box-shadow:0 -24px 90px rgba(0,0,0,.55);color:#f5f5f6;}
  .mobileSheetClose{position:absolute;right:16px;top:6px;width:42px;height:42px;border:0;background:transparent;box-shadow:none;color:rgba(245,245,246,.70);font-size:34px;line-height:1;}
  .mobileSheetIcon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:rgba(215,255,95,.10);border:1px solid rgba(215,255,95,.24);font-size:26px;margin:2px auto 14px;}
  .mobileSheetTitle{text-align:center;font-size:28px;line-height:1.05;font-weight:850;letter-spacing:-.045em;margin:0 42px 4px;}
  .mobileSheetStatus{text-align:center;color:var(--accent);font-weight:820;margin-bottom:18px;}
  .mobileSheetCard{padding:18px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);margin-bottom:16px;}
  .mobileSheetRow{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.075);}
  .mobileSheetRow:last-child{border-bottom:0;}
  .mobileSheetRow span{color:rgba(245,245,246,.55);font-weight:760;}
  .mobileSheetRow strong{color:rgba(245,245,246,.92);font-weight:820;text-align:right;overflow:hidden;text-overflow:ellipsis;}
  .mobileSheetBenefits{display:grid;gap:10px;color:rgba(245,245,246,.74);font-weight:720;margin-top:12px;}
  .mobileSheetPrimary,.mobileSheetGhost{width:100%;height:54px;border-radius:18px;font-weight:850;font-size:16px;}
  .mobileSheetPrimary{border:0;background:linear-gradient(135deg,#fff,#d7ff5f);color:#111;}
  .mobileSheetGhost{margin-top:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:rgba(245,245,246,.76);}
}

/* Real instrument icons: no filled blobs, no fake guitar. */
.stemMiniIcon svg,.stemMiniPlay svg{fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.stemMiniIcon,.stemMiniPlay{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
.stemMiniRow.isVisualActive .stemMiniLabel,
.stemMiniRow.isVisualActive .stemMiniIcon,
.stemMiniRow.isVisualActive .stemMiniPlay{color:rgba(215,255,95,.96)!important;}
.stemMiniRow:not(.isPlaying):not(.isLoading):not(.isVisualActive) .stemMiniLabel{color:rgba(245,245,246,.58)!important;}


/* ===== UX HOTFIX 20260610-7: upload progress + account panel ===== */
.upload.isReadingAudio .realFileInput,
.upload.isReadingAudio input[type="file"]{pointer-events:none!important;}
.upload.isReadingAudio .addBtn{opacity:.68!important;filter:saturate(.82) brightness(.95)!important;}
.upload.isReadingAudio .addBtn::before{
  content:""!important;
  position:absolute!important;
  inset:-6px!important;
  border-radius:30px!important;
  padding:3px!important;
  background:conic-gradient(var(--accent) calc(var(--uploadProgress, 0) * 1%), rgba(255,255,255,.12) 0)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:drop-shadow(0 0 10px rgba(215,255,95,.32))!important;
}
.upload.isReadingAudio .uploadCenterTitle::after{content:" · loading"; color:rgba(215,255,95,.84);}
.primary.isServerCancelable{opacity:1!important;pointer-events:auto!important;cursor:pointer!important;}

#premiumGate.isAccountOverview{display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;overflow:hidden!important;background:rgba(0,0,0,.72)!important;backdrop-filter:blur(22px) saturate(1.1)!important;-webkit-backdrop-filter:blur(22px) saturate(1.1)!important;}
#premiumGate.isAccountOverview .loginCard,
#premiumGate.isAccountOverview .mobileAccountSheet{display:none!important;}
#premiumGate:not(.isAccountOverview) .accountOverviewPanel{display:none!important;}
.accountOverviewPanel{position:relative;width:min(460px,100%);max-height:calc(100svh - 40px);overflow:auto;overscroll-behavior:contain;padding:26px;border-radius:30px;background:linear-gradient(180deg,rgba(24,24,28,.96),rgba(7,7,9,.98));border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);color:#f5f5f6;}
.accountOverviewClose{position:absolute;right:16px;top:10px;width:40px;height:40px;border:0;background:transparent;color:rgba(255,255,255,.62);font-size:32px;line-height:1;cursor:pointer;}
.accountOverviewTop{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-right:36px;}
.accountOverviewAvatar{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:rgba(215,255,95,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font-size:28px;}
.accountOverviewEyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.42);font-weight:800;margin-bottom:7px;}
.accountOverviewTitle{margin:0;font-size:28px;line-height:1;letter-spacing:-.04em;font-weight:760;}
.accountOverviewEmail{margin:7px 0 0;color:rgba(255,255,255,.58);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;}
.accountOverviewPlan{border:1px solid rgba(215,255,95,.16);background:rgba(215,255,95,.055);border-radius:22px;padding:16px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.accountOverviewPlan strong{font-size:18px;color:var(--accent);}
.accountOverviewPlan span{font-size:12px;line-height:1.35;color:rgba(255,255,255,.58);}
.accountOverviewGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.accountOverviewGrid div{border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.035);border-radius:18px;padding:12px;min-width:0;}
.accountOverviewGrid span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.36);font-weight:800;margin-bottom:7px;}
.accountOverviewGrid strong{font-size:14px;color:rgba(255,255,255,.9);white-space:nowrap;}
.accountOverviewActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.accountOverviewPrimary,.accountOverviewSecondary{height:50px;border-radius:16px;font-weight:800;cursor:pointer;}
.accountOverviewPrimary{border:0;background:linear-gradient(135deg,#f7f7f8,var(--accent));color:#111;}
.accountOverviewSecondary{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:rgba(255,255,255,.76);}
body.accountModalOpen,body.premiumSheetOpen{overflow:hidden!important;touch-action:none!important;}
@media (max-width:768px){
  #premiumGate.isAccountOverview{align-items:flex-end!important;justify-content:flex-end!important;padding:0!important;}
  .accountOverviewPanel{width:100vw!important;max-height:82svh!important;border-radius:28px 28px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;padding:28px 22px calc(24px + env(safe-area-inset-bottom))!important;}
  .accountOverviewGrid{grid-template-columns:1fr!important;}
  .accountOverviewActions{grid-template-columns:1fr!important;}
}