/* Layout */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 20px 56px;
}
.container.narrow{ max-width: 860px; }
.section{ margin-top: 22px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; flex-wrap: wrap; margin: 8px 0 10px; }
.section-title{ font-size: 22px; margin: 0; letter-spacing: .2px; }
.section-subtitle{ margin: 0; color: var(--text-muted); max-width: 72ch; }
.section-cta{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; }
.grid-2{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width: 920px){
  .grid-2,.grid-3{ grid-template-columns: 1fr; }
}

/* Reusable site chrome */
.site-header{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(19,21,29,.86);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer{
  margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.site-footer__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 20px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer__meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.site-footer__line{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer__brand{
  font-weight: 800;
  color: rgba(255,255,255,.9);
}
.site-footer__copy{
  color: rgba(255,255,255,.60);
  font-size: 13px;
}
.site-footer__icp{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  text-decoration: none;
  transition: color .18s ease;
}
.site-footer__mail{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  text-decoration: none;
  transition: color .18s ease;
}
.site-footer__icp:hover,
.site-footer__mail:hover{
  color: rgba(255,255,255,.92);
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(19,21,29,.72);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.96);
  font-weight: 800;
  letter-spacing: .6px;
}
.brand-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.brand-text{
  font-size: 16px;
  line-height: 1;
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
}
.nav-left,
.nav-right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav a{
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav a:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.nav a.active{ color: var(--text); background: rgba(255,255,255,.06); }
.nav-link-strong{
  color: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(120deg, rgba(246,208,135,.18), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-link-soft{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.84) !important;
}
.nav-link-app{
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,.84) !important;
  margin-left: 20px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.nav-link-app:hover{
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,.95) !important;
}

.site-header .nav a.active{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.09);
}

/* Dropdown nav */
.nav-dropdown{
  position: relative;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.nav-dropdown-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(120px 70px at 30% 10%, rgba(246,208,135,.14), transparent 70%),
    rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.nav-dropdown-btn:hover{
  transform: translateY(-1px);
  color: rgba(255,255,255,.95);
  border-color: rgba(246,208,135,.36);
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
}
.nav-dropdown-btn .chev{
  opacity: .7;
  font-size: 12px;
  transition: transform .2s ease;
}
.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  padding: 9px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(260px 120px at 20% 0%, rgba(246,208,135,.18), transparent 70%),
    rgba(19,21,29,.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-dropdown-menu a{
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.84);
}
.nav-dropdown-menu a:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
}
.nav-dropdown-menu a::after{
  content: "›";
  color: rgba(255,255,255,.45);
  transition: transform .15s ease, color .15s ease;
}
.nav-dropdown-menu a:hover::after{
  transform: translateX(2px);
  color: rgba(246,208,135,.88);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown-btn .chev,
.nav-dropdown:focus-within .nav-dropdown-btn .chev,
.nav-dropdown.is-open .nav-dropdown-btn .chev{
  transform: rotate(180deg);
}

.nav-faq-menu{
  min-width: 380px;
  padding: 10px;
}
.nav-faq-item + .nav-faq-item{
  margin-top: 6px;
}
.nav-faq-question{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.9);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.nav-faq-question:hover{
  border-color: rgba(246,208,135,.35);
  background: rgba(255,255,255,.06);
}
.faq-chev{
  color: rgba(255,255,255,.6);
  font-weight: 700;
}
.nav-faq-item.is-open .faq-chev{
  color: rgba(246,208,135,.95);
}
.nav-faq-answer{
  display: none;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 10px 2px;
}
.nav-faq-item.is-open .nav-faq-answer{
  display: block;
}

.footer{
  padding: 26px 20px 40px;
  display:flex;
  justify-content: space-between;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}
.footer-muted{ color: var(--text-faint); }

/* Typography */
.page-title{ font-size: 34px; margin: 14px 0 8px; letter-spacing: .2px; }
.page-subtitle{ color: var(--text-muted); margin: 0 0 18px; }
.muted{ color: var(--text-muted); }
.small{ font-size: 12px; }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.045));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px;
  box-shadow: var(--shadow);
}
.card-link{ transition: transform .18s ease, border-color .18s ease; }
.card-link:hover{
  transform: translateY(-2px);
  border-color: rgba(246,208,135,.30);
}

/* Hero */
.hero{
  border: 1px solid rgba(246,208,135,.18);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(246,208,135,.18), transparent 62%),
    radial-gradient(900px 420px at 80% 10%, rgba(222,206,168,.10), transparent 62%),
    rgba(255,255,255,.03);
  border-radius: 26px;
  padding: 34px 22px;
  margin: 16px 0 18px;
}
.hero-splash{ position: relative; overflow: hidden; padding: 0; }
.hero-splash__bg{ position:absolute; inset:0; }
.hero-splash__img{
  position:absolute; inset: -24% -18% auto -18%;
  width: 136%;
  height: 340px;
  object-fit: cover;
  opacity: .55;
  filter: saturate(1.05) contrast(1.05);
}
.hero-splash__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(246,208,135,.16), transparent 60%),
    radial-gradient(900px 520px at 82% 20%, rgba(222,206,168,.12), transparent 62%),
    linear-gradient(180deg, rgba(19,21,29,.10) 0%, rgba(19,21,29,.82) 58%, rgba(19,21,29,.98) 100%);
}
.hero-splash__scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    transparent 2px,
    transparent 5px
  );
  opacity: .22;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.hero-splash__content{ position:relative; padding: 34px 22px 24px; }
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 999px;
}
.hero-title{
  font-size: 44px;
  line-height: 1.08;
  margin: 14px 0 10px;
}
.accent{
  background: linear-gradient(90deg, rgba(246,208,135,.98), rgba(222,206,168,.86));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle{
  max-width: 74ch;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.hero-cta{ display:flex; gap: 10px; flex-wrap: wrap; }

/* Home page redesign */
.home-page{ padding-top: 24px; }
.home-section{ margin-top: 28px; }
.home-hero{
  border: 1px solid rgba(246,208,135,.18);
  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  background:
    radial-gradient(900px 340px at 8% 0%, rgba(246,208,135,.18), transparent 65%),
    radial-gradient(900px 340px at 92% 0%, rgba(222,206,168,.12), transparent 62%),
    rgba(255,255,255,.03);
}
.home-hero__title{
  margin: 10px 0 12px;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: .2px;
}
.home-hero__subtitle{
  margin: 0 0 18px;
  max-width: 60ch;
  color: var(--text-muted);
}
.home-hero__right{
  border-color: rgba(255,255,255,.14);
  background: rgba(8,9,12,.35);
}
.home-metrics{
  display: grid;
  gap: 12px;
}
.home-metric{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.home-metric__k{
  font-size: 24px;
  font-weight: 900;
  color: rgba(246,208,135,.92);
}
.home-metric__v{
  margin-top: 2px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.home-strip{
  margin-top: 16px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-radius: 14px;
  border-color: rgba(255,255,255,.09);
}
.home-strip span{
  color: rgba(255,255,255,.76);
  font-size: 13px;
}
.home-feature-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.home-feature h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.home-feature p{ margin: 0; }
.home-voice-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.home-voice-card{
  padding: 14px;
  border-color: rgba(255,255,255,.12);
}
.home-flow{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.home-flow-item{
  position: relative;
  padding: 16px;
}
.home-flow-item h3{
  margin: 10px 0 8px;
  font-size: 18px;
}
.home-flow-item p{ margin: 0; }
.home-flow-item__step{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(246,208,135,.32);
  background: rgba(246,208,135,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
}
.home-cta{
  margin-top: 30px;
  border-color: rgba(246,208,135,.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  background:
    radial-gradient(560px 260px at 15% 0%, rgba(246,208,135,.16), transparent 62%),
    rgba(255,255,255,.04);
}
.home-cta h2{
  margin: 0 0 6px;
  font-size: clamp(22px, 2.6vw, 30px);
}
.home-cta p{ margin: 0; }
.home-cta__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Demo block */
.demo{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 920px){
  .demo{ grid-template-columns: 1fr; }
}
.demo-tabs{ display:flex; flex-wrap: wrap; gap: 10px; }
.tab{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.tab:hover{ transform: translateY(-1px); border-color: rgba(246,208,135,.30); }
.tab.active{
  color: #1b1a16;
  border-color: rgba(246,208,135,.36);
  background: var(--gradient-button);
  font-weight: 800;
}
.transcript{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px 14px;
  background:
    radial-gradient(600px 220px at 20% 10%, rgba(246,208,135,.10), transparent 62%),
    rgba(0,0,0,.18);
}
.transcript-meta{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(246,208,135,.26);
  background: rgba(246,208,135,.08);
  color: rgba(255,255,255,.86);
  font-size: 12px;
}
.pill-ghost{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
}
.transcript-body{
  font-size: 16px;
  letter-spacing: .1px;
  line-height: 1.6;
}
.tag{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  margin: 0 2px;
}
.demo-card{ padding: 16px 16px 14px; }
.demo-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; margin-bottom: 10px; }
.demo-card-title{ font-weight: 900; letter-spacing: .2px; }
.demo-card-sub{ color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.spark{ display:flex; gap: 4px; align-items:flex-end; height: 26px; opacity: .9; }
.spark span{
  width: 4px; border-radius: 999px;
  background: rgba(246,208,135,.65);
  height: 6px;
  animation: spark 1.2s ease-in-out infinite;
}
.spark span:nth-child(2){ animation-delay: .08s; height: 12px; }
.spark span:nth-child(3){ animation-delay: .16s; height: 18px; }
.spark span:nth-child(4){ animation-delay: .24s; height: 10px; }
.spark span:nth-child(5){ animation-delay: .32s; height: 16px; }
@keyframes spark{
  0%,100%{ transform: translateY(0); opacity: .75; }
  50%{ transform: translateY(-2px); opacity: 1; }
}

/* Custom audio player */
.player{
  position: relative;
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}
.player-btn{
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(246,208,135,.30);
  background: rgba(246,208,135,.12);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.player-btn .icon-pause{ display:none; }
.player.is-playing .player-btn{
  background: var(--gradient-button);
  color: #1b1a16;
  font-weight: 900;
}
.player.is-playing .icon-play{ display:none; }
.player.is-playing .icon-pause{ display:inline; }
.player-wave{
  display:flex;
  align-items:flex-end;
  gap: 3px;
  height: 22px;
  padding-top: 6px;
}
.player-wave span{
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  transform-origin: bottom;
}
.player.is-playing .player-wave span{
  background: rgba(246,208,135,.72);
  animation: wave 1.05s ease-in-out infinite;
}
.player.is-playing .player-wave span:nth-child(2){ animation-delay: .04s; }
.player.is-playing .player-wave span:nth-child(3){ animation-delay: .08s; }
.player.is-playing .player-wave span:nth-child(4){ animation-delay: .12s; }
.player.is-playing .player-wave span:nth-child(5){ animation-delay: .16s; }
.player.is-playing .player-wave span:nth-child(6){ animation-delay: .20s; }
.player.is-playing .player-wave span:nth-child(7){ animation-delay: .24s; }
.player.is-playing .player-wave span:nth-child(8){ animation-delay: .28s; }
.player.is-playing .player-wave span:nth-child(9){ animation-delay: .32s; }
.player.is-playing .player-wave span:nth-child(10){ animation-delay: .36s; }
.player.is-playing .player-wave span:nth-child(11){ animation-delay: .40s; }
.player.is-playing .player-wave span:nth-child(12){ animation-delay: .44s; }
.player.is-playing .player-wave span:nth-child(13){ animation-delay: .48s; }
.player.is-playing .player-wave span:nth-child(14){ animation-delay: .52s; }
.player.is-playing .player-wave span:nth-child(15){ animation-delay: .56s; }
.player.is-playing .player-wave span:nth-child(16){ animation-delay: .60s; }
@keyframes wave{
  0%,100%{ transform: scaleY(.55); opacity: .72; }
  50%{ transform: scaleY(2.35); opacity: 1; }
}
.player-seek{
  grid-column: 2;
  width: 100%;
  accent-color: var(--primary);
}
.player-meta{
  grid-column: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.player-time{ font-variant-numeric: tabular-nums; color: rgba(255,255,255,.86); font-size: 12px; }
.slash{ opacity: .55; padding: 0 6px; }
.player-rate select{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 6px 10px;
  color: rgba(255,255,255,.86);
  outline: none;
}
.demo-hint{ margin-top: 10px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.btn[disabled]{ opacity: .55; cursor: not-allowed; }
.btn-primary{
  border: 1px solid rgba(246,208,135,.34);
  background: var(--gradient-button);
  color: #1b1a16;
  font-weight: 800;
}
.btn-ghost{
  background: transparent;
}

/* Forms */
.form{ display:flex; flex-direction:column; gap: 10px; }
.label{ color: var(--text-muted); font-size: 13px; }
.input,.textarea{
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}
.textarea{ min-height: 120px; resize: vertical; }
.checkbox{ display:flex; gap: 10px; align-items:flex-start; color: var(--text-muted); font-size: 13px; }
.row{ display:flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   TTS PAGE (TEXT TO SPEECH) - CARTESIA STYLE
   ========================================================================== */
.tts-main {
  background: #0a0a0a;
  color: #fff;
  padding: 40px;
  overflow-y: auto;
  height: 100vh;
}
.tts-header {
  margin-bottom: 32px;
}
.tts-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.5px;
}

.tts-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .tts-layout {
    grid-template-columns: 1fr;
  }
}

/* Main Area: Editor */
.tts-editor-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0; /* Important: Prevents flex children from breaking layout when content overflows */
}

/* Fieldset styling (Cartesia wireframe look) */
.tts-fieldset {
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 20px;
  background: rgba(255,255,255,0.02);
}
.tts-fieldset-legend {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #0a0a0a;
  padding: 0 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-family: monospace;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tts-textarea-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.tts-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  min-height: 240px;
  outline: none;
}
.tts-textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

.tts-dictionary-btn {
  position: absolute;
  top: -16px;
  right: 16px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.tts-dictionary-btn:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.tts-examples {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tts-examples::-webkit-scrollbar {
  display: none;
}
.tts-examples-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.tts-example-chip {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.tts-example-chip:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Bottom Controls Row */
.tts-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tts-dropdown-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tts-select {
  appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 8px 36px 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.tts-select:hover {
  border-color: rgba(255,255,255,0.3);
}
.tts-select-voice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,.9);
}
.tts-select-voice:hover {
  border-color: rgba(255,255,255,.26);
}
.tts-voice-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
}
.tts-voice-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}
.tts-voice-modal[hidden] {
  display: none;
}
.tts-voice-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
}
.tts-voice-modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}
.tts-voice-modal__dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1020px, calc(100vw - 36px));
  height: min(84vh, 760px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #0f1116;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tts-voice-modal__head {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tts-voice-modal__head h3 {
  margin: 0;
  text-align: center;
}
.tts-voice-modal__head button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.86);
  cursor: pointer;
}
.tts-voice-modal__head .tts-voice-modal__save {
  color: rgba(246,208,135,.92);
  font-weight: 700;
}
.tts-voice-modal__tools {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 10px;
}
.tts-voice-modal__search,
.tts-voice-modal__lang {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
.tts-voice-modal__tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 14px;
}
.tts-voice-modal__tabs button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.56);
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tts-voice-modal__tabs button.is-active {
  color: rgba(246,208,135,.92);
  border-bottom-color: rgba(246,208,135,.92);
}
.tts-voice-modal__list {
  flex: 1;
  overflow: auto;
}
.tts-voice-row {
  display: grid;
  grid-template-columns: 1fr 120px 220px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
}
.tts-voice-row.is-selected {
  background: rgba(255,255,255,.06);
}
.tts-voice-row__name {
  font-weight: 700;
}
.tts-voice-row__desc {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
}
.tts-voice-row__lang {
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
.tts-voice-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tts-voice-row__btn {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: transparent;
  color: rgba(255,255,255,.88);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.tts-voice-row__btn.is-active {
  border-color: rgba(246,208,135,.45);
  color: rgba(246,208,135,.96);
}
.tts-voice-row__btn--delete {
  border-color: rgba(248,113,113,.35);
  color: rgba(248,113,113,.94);
}
.tts-voice-row__loading {
  padding: 16px 14px;
  color: rgba(255,255,255,.56);
}

.tts-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tts-btn-api {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.tts-btn-api:hover {
  background: rgba(255,255,255,0.1);
}
.tts-btn-generate {
  background: #fff;
  color: #000;
  border: none;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.tts-btn-generate:hover {
  background: #e5e5e5;
}

/* Sidebar: Generation Config */
.tts-config-sidebar {
  display: flex;
  flex-direction: column;
}

.tts-config-panel {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tts-config-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tts-config-label {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-family: monospace;
}

/* Range Slider Styling */
.tts-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tts-slider-val {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.tts-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
  margin: 8px 0;
}
.tts-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.tts-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Login page */
/* ==========================================================================
   GLOBAL FLOATING AUDIO PLAYER
   ========================================================================== */
#global-audio-player {
  position: fixed;
  bottom: -120px;
  left: calc(50% + 75px);
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(18, 18, 18, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: calc(100vw - 550px);
  padding: 16px 24px;
  box-sizing: border-box;
  visibility: hidden;
}

#global-audio-player.is-visible {
  bottom: 15px;
  visibility: visible;
}

@media (max-width: 900px) {
  #global-audio-player {
    width: calc(100vw - 40px);
  }
}

#global-audio-player .gap-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

#global-audio-player .gap-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s;
}
#global-audio-player .gap-play-btn:active {
  transform: scale(0.95);
}
#global-audio-player .gap-play-btn svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}
#global-audio-player .gap-play-btn.is-playing svg {
  margin-left: 0;
}

#global-audio-player .gap-info {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

#global-audio-player .gap-title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#global-audio-player .gap-status {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  margin-top: 4px;
}

#global-audio-player .gap-center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 16px;
}

#global-audio-player .gap-waveform {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 24px;
  overflow: hidden;
}

#global-audio-player .gap-bar {
  flex: 1;
  max-width: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  height: 4px;
  transition: height 0.1s ease;
}

#global-audio-player .gap-waveform.is-playing .gap-bar {
  background: #22c55e;
  animation: gap-bounce 1s ease infinite alternate;
}

#global-audio-player .gap-waveform.is-playing .gap-bar:nth-child(2n) { animation-duration: 1.2s; animation-delay: -0.2s; }
#global-audio-player .gap-waveform.is-playing .gap-bar:nth-child(3n) { animation-duration: 0.9s; animation-delay: -0.5s; }
#global-audio-player .gap-waveform.is-playing .gap-bar:nth-child(5n) { animation-duration: 1.4s; animation-delay: -0.8s; }
#global-audio-player .gap-waveform.is-playing .gap-bar:nth-child(7n) { animation-duration: 0.8s; animation-delay: -0.3s; }

@keyframes gap-bounce {
  0% { height: 4px; }
  100% { height: 24px; }
}

#global-audio-player .gap-progress-container {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  cursor: pointer;
}

#global-audio-player .gap-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff;
  border-radius: 3px;
  width: 0%;
  pointer-events: none;
}

#global-audio-player .gap-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

#global-audio-player .gap-progress-container:hover .gap-progress-thumb {
  opacity: 1;
}

#global-audio-player .gap-time {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 80px;
  text-align: right;
}

#global-audio-player .gap-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  line-height: 1;
  transition: color 0.2s;
}

#global-audio-player .gap-close:hover {
  color: #fff;
}

/* ==========================================================================
   SUBSCRIPTION PAGE
   ========================================================================== */
.subscription-main {
  padding: 40px 10%;
  background: #0a0a0a;
  color: #fff;
  overflow-y: auto;
}
@media (min-width: 1920px) {
  .subscription-main { padding-left: 20%; padding-right: 20%; }
}
.subscription-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.subscription-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.sub-section {
  margin-bottom: 48px;
}
.sub-section-title {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  font-weight: 500;
}
.current-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.current-plan-info h2 {
  font-size: 28px;
  margin: 0 0 8px 0;
}
.current-plan-info p {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin: 0;
}
.current-plan-actions {
  display: flex;
  gap: 12px;
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
}
.btn-white {
  background: #fff;
  color: #000;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-white:hover {
  background: #e5e5e5;
}

.credits-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.credit-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
}
.credit-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.status-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
}
.credit-card-value {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 16px;
}
.credit-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

.overages-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px 24px;
}
.overages-info h3 {
  font-size: 15px;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-blue {
  background: rgba(59,130,246,0.2);
  color: #60a5fa;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.overages-info p {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  margin: 0;
}

.plans-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.plans-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 4px;
}
.plans-toggle button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
}
.plans-toggle button.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.plans-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.plan-item:hover {
  background: rgba(255,255,255,0.05);
}
.plan-item.is-active {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
}
.plan-info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.radio-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.plan-item.is-active .radio-circle {
  border-color: #fff;
}
.plan-item.is-active .radio-circle::after {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}
.plan-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
}
.plan-details p {
  margin: 0;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}
.plan-price {
  font-size: 18px;
  font-weight: 600;
}

.invoices-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.invoices-table th {
  text-align: left;
  padding: 12px 16px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.invoices-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.status-paid {
  color: #22c55e;
  background: rgba(34,197,94,0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.download-link {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.download-link:hover {
  text-decoration: underline;
}

/* Custom Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255,255,255,0.2);
  transition: .4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #fff;
}
input:checked + .slider:before {
  transform: translateX(16px);
  background-color: #000;
}
.cartesia-login-body {
  margin: 0;
  padding: 0;
  background: #050608;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

.cartesia-login-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(71,115,255,0.08), transparent 50%),
    radial-gradient(800px 400px at 50% 100%, rgba(246,208,135,0.06), transparent 50%);
}

.cartesia-login-container {
  max-width: 400px;
  width: 100%;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
}

.cartesia-login-header {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.cartesia-login-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.cartesia-login-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  margin: 0 0 12px 0;
  color: #fff;
}

.cartesia-login-subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.64);
  text-align: center;
  margin: 0 0 32px 0;
}

.cartesia-oauth-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cartesia-oauth-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.cartesia-oauth-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

.cartesia-oauth-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cartesia-oauth-icon svg {
  width: 100%;
  height: 100%;
}

.cartesia-oauth-icon path[fill="#000000"],
.cartesia-oauth-icon path[fill="currentColor"] {
  fill: #ffffff;
}

.cartesia-oauth-copy {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

.cartesia-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  margin: 24px 0;
}

.cartesia-divider::before,
.cartesia-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cartesia-divider span {
  padding: 0 16px;
}

.cartesia-form-group {
  margin-bottom: 16px;
}

.cartesia-form-group input {
  width: 100%;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 16px 20px;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.cartesia-form-group input:focus {
  border-color: rgba(246,208,135,0.4);
}

.cartesia-form-group input::placeholder {
  color: rgba(255,255,255,0.4);
}

.cartesia-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #f8f6f1, #f6d087);
  color: #111;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.cartesia-submit-btn:hover {
  background: #a3a3a3;
}

.cartesia-login-bottom-text {
  text-align: center;
  font-size: 13px;
  color: #737373;
  margin-top: 32px;
  line-height: 1.5;
}

.cartesia-login-bottom-text a {
  color: #737373;
  text-decoration: underline;
}

.cartesia-login-bottom-text a:hover {
  color: #000;
}



/* Console dashboard */
.console-page{
  overflow: hidden;
}
.console-shell{
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
}
.console-sidebar{
  border-right: 1px solid rgba(255,255,255,.05);
  background: #111111;
  padding: 20px 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.console-sidebar-top {
  display: flex;
  flex-direction: column;
}
.console-sidebar-bottom {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.console-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 24px;
  border-bottom: none;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.console-brand img{
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
}
.console-sidebar__head{
  padding: 16px 12px 8px;
  border-bottom: none;
}
.console-sidebar__head h2{
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,.4);
}
.console-sidebar__head p{
  display: none;
}
.console-menu{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.console-menu a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all .15s ease;
}
.console-menu-icon{
  width: 22px;
  text-align: center;
  color: rgba(255,255,255,.6);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.console-menu a:hover{
  background: rgba(255,255,255,.05);
  color: #fff;
}
.console-menu a:hover .console-menu-icon {
  color: #fff;
}
.console-menu a.is-active{
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
  padding-top: 6px;
  padding-bottom: 6px;
}
.console-menu a.is-active .console-menu-icon {
  color: #fff;
}
.console-menu-logout {
  color: rgba(255,255,255,.7) !important;
}
.console-menu-logout:hover {
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
.console-menu-logout .console-menu-icon {
  color: inherit;
}
.console-main{
  background: rgba(10,12,18,.88);
  padding: 40px 550px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.console-main > * {
  width: 100%;
  max-width: none;
}
@media (max-width: 1800px) {
  .console-main { padding-left: 200px; padding-right: 200px; }
}
@media (max-width: 1400px) {
  .console-main { padding-left: 100px; padding-right: 100px; }
}
@media (max-width: 900px) {
  .console-main { padding-left: 20px; padding-right: 20px; }
}
.console-main__head h1{
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.console-main__head p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.5);
  font-size: 13px;
}
.console-summary{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.console-entry-card{
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(480px 200px at 0% 0%, rgba(246,208,135,.13), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.console-entry-card:hover{
  border-color: rgba(246,208,135,.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
}
.console-entry-card__label{
  display: inline-flex;
  border: 1px solid rgba(246,208,135,.3);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(246,208,135,.08);
}
.console-entry-card__title{
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.console-entry-card__title svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  color: rgba(246,208,135,.94);
  flex: 0 0 auto;
}
.console-entry-card__title strong{
  display: block;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 700;
  color: rgba(255,255,255,.94);
}
.console-entry-card__hint{
  margin: 10px 0 0;
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1.55;
}
.console-entry-card__cta{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 600;
}
.console-entry-card__cta::after{
  content: "→";
  color: rgba(246,208,135,.92);
}
.console-summary-card{
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(246,208,135,.12), transparent 62%),
    rgba(255,255,255,.03);
}
.console-summary-card__label{
  display: inline-flex;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.console-summary-card__value{
  display: block;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.console-summary-card__hint{
  margin: 8px 0 0;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  line-height: 1.5;
}
.console-block{
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.02);
}
.console-block__head h2{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.console-block__head p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.56);
  font-size: 13px;
}
.voice-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.voice-card{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(400px 160px at 0% 0%, rgba(246,208,135,.10), transparent 62%),
    rgba(0,0,0,.18);
  transition: border-color .18s ease, transform .18s ease;
}
.voice-card:hover{
  border-color: rgba(246,208,135,.34);
  transform: translateY(-1px);
}
.voice-avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.16);
}
.voice-name{
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}
.play-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(246,208,135,.34);
  background: rgba(246,208,135,.12);
  color: rgba(255,255,255,.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.play-btn:hover{
  transform: translateY(-1px);
  background: rgba(246,208,135,.18);
  border-color: rgba(246,208,135,.48);
}
.play-btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.play-btn.is-playing{
  background: rgba(246,208,135,.28);
  border-color: rgba(246,208,135,.62);
}
.console-goal-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.console-goal-card{
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 13px;
  background: rgba(0,0,0,.18);
  transition: border-color .18s ease, transform .18s ease;
}
.console-goal-card:hover{
  border-color: rgba(246,208,135,.36);
  transform: translateY(-1px);
}
.console-goal-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.console-goal-card__tag{
  border: 1px solid rgba(246,208,135,.3);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
  background: rgba(246,208,135,.08);
}
.console-goal-card__time{
  color: rgba(255,255,255,.52);
  font-size: 12px;
}
.console-goal-card h3{
  margin: 10px 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.console-goal-card p{
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.55;
}
.console-goal-card__cta{
  display: inline-flex;
  margin-top: 10px;
  color: rgba(255,255,255,.9);
  font-size: 13px;
}
.console-quick-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.console-quick-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  transition: border-color .18s ease, transform .18s ease;
}
.console-quick-card:hover{
  border-color: rgba(246,208,135,.30);
  transform: translateY(-1px);
}
.console-quick-card h3{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}
.console-quick-card p{
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 13px;
}
.console-list{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  padding: 12px;
}
.console-list__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.console-list__head h2{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.console-list__head a{
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
.console-list ul{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.console-list li{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 11px 2px;
}
.console-list li:first-child{ border-top: 0; }
.console-list li span{
  color: rgba(255,255,255,.86);
}
.console-list li a{
  color: rgba(255,255,255,.92);
  font-size: 13px;
}

/* Clone workbench */
.clone-main{
  background:
    radial-gradient(980px 320px at 8% 0%, rgba(246,208,135,.08), transparent 62%),
    rgba(10,12,18,.90);
  padding: 40px 550px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.clone-main > * {
  width: 100%;
  max-width: none;
}
@media (max-width: 1800px) {
  .clone-main { padding-left: 300px; padding-right: 300px; }
}
@media (max-width: 1400px) {
  .clone-main { padding-left: 100px; padding-right: 100px; }
}
@media (max-width: 900px) {
  .clone-main { padding-left: 20px; padding-right: 20px; }
}
.clone-workbench{
  width: 100%;
  margin: 0 auto;
}
.clone-head h1{
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.clone-panel{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.clone-tabbar{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(0,0,0,.24);
}
.clone-tab{
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.72);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
.clone-pane{ display: none; }
.clone-pane.is-active{ display: block; }
.clone-tab.is-active{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.clone-row{
  margin-top: 12px;
}
.clone-label{
  font-weight: 800;
  margin-bottom: 8px;
}
.clone-record-btn{
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  cursor: pointer;
}
.clone-upload{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  min-height: 182px;
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  gap: 10px;
}
.clone-upload.is-dragover{
  border-color: rgba(246,208,135,.52);
  background: rgba(246,208,135,.06);
}
.clone-upload__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.clone-upload__btn{
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  font-weight: 800;
  cursor: pointer;
}
.clone-upload__hint{
  color: rgba(255,255,255,.72);
}
.clone-upload__name{
  color: rgba(255,255,255,.58);
  font-size: 12px;
}
.clone-tips{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0,0,0,.20);
}
.clone-tips__title{
  font-weight: 800;
  margin-bottom: 8px;
}
.clone-tips p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
}
.clone-tips ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
  display: grid;
  gap: 6px;
}
.clone-quote{
  margin-top: 12px;
  border-left: 2px solid rgba(255,255,255,.24);
  padding: 10px 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}
.clone-limit{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.62);
  font-size: 12px;
  padding: 10px 12px;
}
.clone-form{
  display: grid;
  gap: 8px;
}
.clone-form label{
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.clone-form label span{
  color: rgba(255,95,95,.92);
}
.clone-form input,
.clone-form textarea,
.clone-form select{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  outline: none;
}
.clone-consent{
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.clone-consent input{
  width: auto;
  margin-top: 3px;
}
.clone-actions{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.clone-result{
  color: rgba(246,208,135,.88);
  font-size: 13px;
}

/* Generic studio pages (design / tts / sfx / podcast) */
.studio-main{
  background:
    radial-gradient(980px 320px at 8% 0%, rgba(246,208,135,.06), transparent 62%),
    rgba(10,12,18,.90);
  padding: 40px 550px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.studio-main > * {
  width: 100%;
  max-width: none;
}
@media (max-width: 1800px) {
  .studio-main { padding-left: 300px; padding-right: 300px; }
}
@media (max-width: 1400px) {
  .studio-main { padding-left: 100px; padding-right: 100px; }
}
@media (max-width: 900px) {
  .studio-main { padding-left: 20px; padding-right: 20px; }
}
.studio-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.studio-panel{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.studio-panel h2{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.studio-form{
  display: grid;
  gap: 8px;
}
.studio-form label{
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.studio-form input,
.studio-form textarea,
.studio-form select{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  outline: none;
}
.studio-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.studio-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.studio-preview-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  padding: 12px;
}
.studio-preview-title{
  font-weight: 800;
}
.studio-preview-card p{
  margin: 8px 0 0;
  color: rgba(255,255,255,.72);
}
.studio-preview-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.studio-library{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.studio-library__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.studio-library__head h3{
  margin: 0;
}
.studio-library__head a{
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
.studio-library ul{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.studio-library li{
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 0;
}
.studio-library li:first-child{ border-top: 0; }
.studio-library em{
  color: rgba(255,255,255,.56);
  font-style: normal;
  font-size: 12px;
}

/* SFX page */
.sfx-main{
}
.sfx-intro{
  margin-top: 12px;
  border: 1px solid rgba(57,96,91,.70);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(246,208,135,.55), rgba(222,206,168,.50));
  color: rgba(20,24,28,.86);
  padding: 14px;
}
.sfx-intro p{
  margin: 0;
  font-weight: 600;
}
.sfx-panel{ margin-top: 14px; }
.sfx-prompt-wrap{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px 12px 0 0;
  background: rgba(42,45,51,.78);
}
.sfx-prompt-wrap textarea{
  width: 100%;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  padding: 10px 12px 10px;
  resize: vertical;
  min-height: 120px;
  outline: none;
}
.sfx-clear{
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  padding: 4px 9px;
  cursor: pointer;
}
.sfx-tags{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: auto;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(42,45,51,.68);
}
.sfx-tags button{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 6px 10px;
  white-space: nowrap;
  background: rgba(77,76,73,.62);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.sfx-tags button.is-active{
  background: rgba(48,48,46,.95);
  border-color: rgba(246,208,135,.42);
}
.sfx-grid{
  margin-top: 14px;
}
.sfx-loop-row{
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sfx-loop-title{
  font-weight: 800;
}
.sfx-loop-row p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}
.sfx-switch{
  flex: 0 0 auto;
  cursor: pointer;
}
.sfx-switch:not(.is-on){
  background: rgba(255,255,255,.20);
}
.sfx-switch:not(.is-on) span{
  right: auto;
  left: 3px;
}
.sfx-footnote{
  margin-top: 14px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
}
.sfx-submit-wrap{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.sfx-submit{
  min-width: 220px;
  border-radius: 28px;
  color: rgba(20,24,28,.92);
  font-size: 16px;
}
.sfx-submit span{
  color: rgba(20,24,28,.72);
  font-size: 14px;
}

/* Podcast page */
.podcast-main {
}
.podcast-card{
  margin-top: 14px;
}
.podcast-topic textarea{
  width: 100%;
  min-height: 118px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}
.podcast-meta{
  color: rgba(255,255,255,.46);
  font-size: 12px;
  margin-top: -4px;
}
.podcast-count-row{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.podcast-count-row > span{
  color: rgba(255,255,255,.72);
}
.podcast-count-switch{
  display: flex;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0,0,0,.22);
}
.podcast-count-switch button{
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,.66);
  padding: 6px 10px;
  cursor: pointer;
}
.podcast-count-switch button.is-active{
  background: rgba(246,208,135,.95);
  color: rgba(20,24,28,.92);
  font-weight: 800;
}
.podcast-speakers{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.podcast-speaker{
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.podcast-speaker.is-hidden{
  display: none;
}
.podcast-avatar{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(246,208,135,.58);
  background: #0a0b0e;
  color: #fff;
  font-weight: 900;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.podcast-avatar.is-playing{
  border-color: rgba(84,188,126,.86);
}
.podcast-voice-select{
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.86);
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.podcast-persona{
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 7px 8px;
  text-align: center;
  outline: none;
}
.podcast-style-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.podcast-style-row span{
  color: rgba(255,255,255,.56);
  font-size: 12px;
}
.podcast-generate-wrap{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.podcast-generate{
  min-width: 230px;
  border-radius: 26px;
  color: rgba(20,24,28,.92);
  font-weight: 800;
}
.podcast-modal[hidden]{
  display: none;
}
.podcast-modal{
  position: fixed;
  inset: 0;
  z-index: 120;
}
.podcast-modal__mask{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
}
.podcast-modal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(840px, calc(100vw - 32px));
  height: min(86vh, 760px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #12151e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.podcast-modal__head{
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.podcast-modal__head h3{
  margin: 0;
  text-align: center;
}
.podcast-modal__head button{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.84);
  cursor: pointer;
}
.podcast-modal__head .podcast-save-btn{
  color: rgba(246,208,135,.94);
  font-weight: 800;
}
.podcast-selected{
  margin: 14px 14px 0;
  border: 2px solid rgba(46,46,46,.9);
  border-radius: 12px;
  background: #252525;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: rgba(255,255,255,.86);
  font-weight: 700;
}
.podcast-tabs{
  margin-top: 14px;
  background: #1c1c1a;
  padding: 0 12px;
  display: flex;
  gap: 10px;
}
.podcast-tabs button{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.52);
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.podcast-tabs button.is-active{
  color: rgba(246,208,135,.92);
  border-bottom-color: rgba(246,208,135,.92);
}
.podcast-voice-list{
  flex: 1;
  overflow: auto;
  padding: 8px 0 10px;
}
.podcast-voice-item{
  border-bottom: 1px solid #353535;
  margin-left: 12px;
  padding: 10px 8px 10px 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
}
.podcast-voice-avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(140deg, #e0bb73, #d3c197);
  color: rgba(20,24,28,.9);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.podcast-voice-name{
  color: #fff;
  font-weight: 700;
}
.podcast-voice-desc{
  color: rgba(255,255,255,.52);
  font-size: 12px;
  margin-top: 2px;
}
.podcast-voice-check{
  color: rgba(246,208,135,.92);
  font-weight: 900;
}
.podcast-clone-entry{
  padding: 10px 14px 14px;
}
.podcast-clone-entry a{
  color: rgba(246,208,135,.92);
}

.clone-experimental{
  margin-top: 14px;
}
.clone-experimental__head h2{
  margin: 0;
  font-size: 24px;
}
.clone-toggle{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.clone-toggle__title{
  font-weight: 800;
}
.clone-toggle p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.66);
}
.clone-switch{
  width: 50px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(246,208,135,.34);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.clone-switch[aria-pressed="false"] {
  background: rgba(255,255,255,0.1);
}
.clone-switch span{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  transform: translateX(22px);
}
.clone-switch[aria-pressed="false"] span {
  transform: translateX(0);
}

/* Chips */
.chip{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-muted);
}
.chip.active{
  border-color: rgba(246,208,135,.34);
  color: var(--text);
}
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
.lang-switch{ display:flex; gap: 10px; flex-wrap: wrap; }

/* Table */
.table{ display:flex; flex-direction:column; gap: 8px; }
.table-row{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.table-head{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.80); }

/* Misc */
.qr{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 16px;
  background: rgba(0,0,0,.22);
}
.qr-placeholder{ color: var(--text-faint); font-size: 13px; }
.code-block{
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.status-pill{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(246,208,135,.12);
  border: 1px solid rgba(246,208,135,.24);
  color: rgba(255,255,255,.86);
  margin: 10px 0 16px;
}

/* Features */
.feature{ position: relative; overflow:hidden; }
.feature-kicker{
  font-weight: 900;
  color: rgba(246,208,135,.90);
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.feature-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.feature.highlight{
  border-color: rgba(246,208,135,.30);
  background:
    radial-gradient(820px 320px at 20% 10%, rgba(246,208,135,.14), transparent 62%),
    radial-gradient(820px 320px at 80% 10%, rgba(222,206,168,.10), transparent 62%),
    rgba(255,255,255,.05);
}

/* Cases */
.case-row{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
}
.case{
  min-width: 320px;
  scroll-snap-align: start;
  display:flex;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.035);
}
.case-face{
  width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(18px 18px at 35% 35%, rgba(246,208,135,.55), transparent 60%),
    radial-gradient(28px 28px at 75% 70%, rgba(222,206,168,.35), transparent 60%),
    rgba(0,0,0,.25);
  flex: 0 0 auto;
}
.case-face.alt{
  background:
    radial-gradient(18px 18px at 35% 35%, rgba(210,174,107,.55), transparent 60%),
    radial-gradient(28px 28px at 75% 70%, rgba(246,208,135,.25), transparent 60%),
    rgba(0,0,0,.25);
}
.case-face.alt2{
  background:
    radial-gradient(18px 18px at 35% 35%, rgba(82,81,70,.70), transparent 60%),
    radial-gradient(28px 28px at 75% 70%, rgba(246,208,135,.22), transparent 60%),
    rgba(0,0,0,.25);
}
.case-name{ font-weight: 900; }
.case-quote{ margin: 8px 0 0; color: rgba(255,255,255,.86); }

@media (prefers-reduced-motion: reduce){
  .spark span, .player.is-playing .player-wave span{ animation: none !important; }
  .tab:hover, .card-link:hover{ transform: none; }
}

@media (max-width: 920px){
  .site-header__inner{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .topbar{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .nav{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav-left,
  .nav-right{
    width: 100%;
    flex-wrap: wrap;
  }
  .nav-right a{
    width: 100%;
    justify-content: center;
  }
  .nav-dropdown-menu{
    position: static;
    margin-top: 8px;
  }
  .nav-faq-menu{
    min-width: 0;
    width: 100%;
  }
  .home-hero{
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .home-feature-grid,
  .home-voice-grid,
  .home-flow{
    grid-template-columns: 1fr;
  }
  .home-cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .login-layout{
    grid-template-columns: 1fr;
  }
  .login-shell{
    grid-template-columns: 1fr;
  }
  .login-hero{
    padding: 20px;
  }
  .console-shell{
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }
  .console-quick-grid{
    grid-template-columns: 1fr;
  }
  .console-summary{
    grid-template-columns: 1fr;
  }
  .console-goal-grid{
    grid-template-columns: 1fr;
  }
  .voice-grid{
    grid-template-columns: 1fr;
  }
  .console-page{
    overflow: auto;
  }
  .clone-main{
    padding: 14px 12px;
  }
  .studio-main{
    padding: 14px 12px;
  }
  .studio-grid{
    grid-template-columns: 1fr;
  }
  .podcast-speakers{
    grid-template-columns: 1fr;
  }
  .sfx-loop-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .clone-tabbar{
    grid-template-columns: 1fr;
  }
  .clone-toggle{
    flex-direction: column;
  }
}

/* Metrics & cases */
.metric{ display:flex; align-items:baseline; gap: 10px; margin-bottom: 8px; }
.metric-k{
  width: 30px; height: 30px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(246,208,135,.12);
  border: 1px solid rgba(246,208,135,.22);
  color: rgba(255,255,255,.90);
  font-weight: 900;
}
.metric-v{ font-weight: 900; letter-spacing: .2px; }
.microline{
  margin-top: 10px;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 10px;
}

.case-audio{ padding: 16px; }
.case-audio-top{ margin-bottom: 10px; }
.case-audio-title{ font-weight: 900; letter-spacing: .2px; }
.prompt{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.5;
}
.case-audio.highlight{
  border-color: rgba(246,208,135,.30);
  background:
    radial-gradient(820px 320px at 20% 10%, rgba(246,208,135,.14), transparent 62%),
    radial-gradient(820px 320px at 80% 10%, rgba(222,206,168,.10), transparent 62%),
    rgba(255,255,255,.05);
}