:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e0ec;
  --panel: #ffffff;
  --soft: #f4f7fb;
  --blue: #0766d1;
  --teal: #139c8b;
  --amber: #f4a51c;
  --red: #e33f4f;
  --green: #22a665;
  --shadow: 0 14px 40px rgba(32, 44, 72, 0.12);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(40, 110, 240, 0.08), transparent 320px),
    #eef3f8;
}

button,
select,
textarea,
input {
  font: inherit;
}

button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 16px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}

button:hover {
  border-color: var(--blue);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.primary:not(:disabled):hover {
  border-color: #1558d6;
  background: #1558d6;
  box-shadow: 0 10px 22px rgba(40, 110, 240, 0.22);
  transform: translateY(-1px);
}

.primary:not(:disabled):active {
  background: #0f4bc4;
  box-shadow: 0 5px 14px rgba(40, 110, 240, 0.18);
  transform: translateY(1px);
}

.record {
  border-color: #f2b1b8;
  color: #9b1e2b;
  background: #fff5f6;
}

.record.recording {
  color: #fff;
  background: var(--red);
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
  padding: 0;
}

body:not(.is-authenticated) {
  background: #f3f7fb;
}

body:not(.is-authenticated) .app-shell {
  display: block;
  padding: 0;
}

html.auth-restoring body:not(.is-authenticated) {
  background: #fff;
}

html.auth-restoring body:not(.is-authenticated) .auth-panel {
  display: none;
}

body:not(.is-authenticated) .session-header,
body:not(.is-authenticated) .tabs,
body:not(.is-authenticated) .top-menu-tiles,
body:not(.is-authenticated) .session-controls,
body:not(.is-authenticated) .tab-panel {
  display: none;
}

body.is-authenticated .auth-panel {
  display: none !important;
}

body.is-authenticated:not([data-active-tab="practice"]) .session-controls {
  display: none;
}

.settings-panel,
.workspace {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

.settings-panel {
  display: none;
}

body:not(.is-authenticated) .workspace {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(236, 246, 252, 0.9)),
    #f3f7fb;
}

.login-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: start;
  width: min(1220px, calc(100vw - 36px));
  margin: 0 auto;
}

.login-copy {
  display: grid;
  gap: 14px;
  order: 2;
}

.login-copy h1 {
  max-width: 660px;
  font-size: clamp(1.55rem, 2.25vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.login-copy h1 span {
  display: inline;
  margin-top: 0;
  color: var(--blue);
  font-size: inherit;
}

.login-copy p:not(.eyebrow) {
  max-width: 100%;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.52;
}

.login-art {
  min-height: clamp(260px, 42vh, 390px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #dfeaf5;
  box-shadow: var(--shadow);
}

.login-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.login-art-column {
  display: grid;
  gap: 10px;
  order: 1;
}

.login-auth-column {
  display: grid;
  align-content: start;
  min-width: 0;
  order: 3;
}

.beta-note {
  margin: 0;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
}

.browser-note {
  margin: 0;
  color: var(--red);
  font-size: 0.92rem;
  font-weight: 800;
}

.login-art-headline {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.login-art-summary {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.56;
}

.login-benefits {
  width: min(1180px, calc(100vw - 36px));
  margin: 22px auto 0;
  padding: 22px 0 8px;
  border-top: 1px solid var(--line);
}

.login-benefits h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1.25rem;
}

.login-benefits > p {
  max-width: 920px;
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.58;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.benefit-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.benefit-grid h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 1rem;
}

.benefit-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.readiness-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.readiness-strip article,
.readiness-flow-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08)),
    #fff;
}

.readiness-strip h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 1rem;
}

.readiness-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.52;
}

.readiness-flow-section {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(280px, 0.9fr);
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}

.readiness-flow-image {
  display: block;
  width: 100%;
  border: 1px solid #d7e4f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.analysis-showcase {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.analysis-feature {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.analysis-feature-reverse {
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
}

.analysis-feature-reverse .analysis-feature-copy {
  order: 2;
}

.analysis-feature-reverse img {
  order: 1;
}

.analysis-feature-copy h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 1.12rem;
}

.analysis-feature-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.analysis-feature-copy p + p {
  margin-top: 10px;
}

.analysis-feature img {
  display: block;
  width: 100%;
  max-height: 430px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.analysis-feature-video {
  display: block;
  width: min(100%, 448px);
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #000;
  justify-self: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.retainiq-footer {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(34, 197, 94, 0.08)),
    #fff;
}

.retainiq-brand {
  display: grid;
  place-items: center;
  width: min(100%, 430px);
  margin-top: 6px;
  border: 1px solid #d7e4f3;
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.retainiq-brand img {
  display: block;
  width: min(100%, 360px);
  height: auto;
}

.retainiq-copy {
  display: grid;
  gap: 12px;
}

.retainiq-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.16;
}

.retainiq-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.retainiq-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.retainiq-points span {
  border: 1px solid #bfe7d0;
  border-radius: 999px;
  padding: 7px 11px;
  color: #126b3a;
  background: #ecfff4;
  font-size: 0.9rem;
  font-weight: 850;
}

.retainiq-contact a {
  color: var(--blue);
  font-weight: 850;
}

.auth-card {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

#authHint {
  color: var(--muted);
}

#authHint.is-error {
  color: var(--red);
  font-weight: 700;
}

#authHint.is-success {
  color: #176b3a;
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 2px 0 -13px;
  padding: 0 8px;
  position: relative;
  z-index: 2;
}

.auth-tab {
  min-height: 36px;
  border: 1px solid #3f4654;
  border-bottom-color: var(--line);
  border-radius: 8px 8px 0 0;
  padding: 0 14px;
  color: #fff;
  background: #3f4654;
  font-weight: 700;
}

.auth-tab.active {
  border-color: var(--blue);
  border-bottom-color: #fff;
  color: #fff;
  background: var(--blue);
}

.forgot-password-link {
  justify-self: center;
  min-height: 0;
  border: 0;
  padding: 4px 6px 0;
  color: var(--blue);
  background: transparent;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.forgot-password-link:hover {
  border-color: transparent;
  color: #164ec7;
}

.auth-tab-panel {
  display: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 12px 12px;
  background: #fff;
}

.auth-tab-panel.active {
  display: block;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  width: 100%;
  padding-right: 72px;
}

.password-field button {
  position: absolute;
  top: 50%;
  right: 8px;
  min-height: 28px;
  border: 1px solid #c7dcff;
  border-radius: 6px;
  padding: 0 8px;
  color: #0b57d0;
  background: #eaf3ff;
  font-size: 0.82rem;
  font-weight: 800;
}

.password-field button:hover {
  border-color: #8eb8ff;
  background: #d9eaff;
}

.field-error {
  min-height: 20px;
  margin: -2px 0 0;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 750;
}

.brand-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 1.05rem;
}

.brand-row p,
.eyebrow,
small {
  color: var(--muted);
}

.panel-section {
  padding: 18px 0 4px;
}

.section-heading,
.session-header,
.toolbar,
.range-row,
.toggle-wrap {
  display: flex;
  align-items: center;
}

.section-heading,
.session-header,
.toolbar {
  justify-content: space-between;
  gap: 12px;
}

.transcript-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.download-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-color: #c8d6ea;
  border-radius: 999px;
  padding: 0 18px 0 12px;
  color: #0f2a55;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 20px rgba(40, 110, 240, 0.08);
  font-weight: 700;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.download-action-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 12px 26px rgba(40, 110, 240, 0.16);
  transform: translateY(-1px);
}

.download-action-btn:active:not(:disabled) {
  transform: translateY(0);
}

.download-action-btn:disabled {
  color: #7b8798;
  background: #f5f7fb;
  box-shadow: none;
}

.download-action-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: rgba(40, 110, 240, 0.12);
}

.download-action-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background: var(--blue);
  transform: translateX(-50%);
}

.download-action-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateX(-50%) rotate(45deg);
}

.download-action-btn:disabled .download-action-icon {
  background: #e7ecf4;
}

.download-action-btn:disabled .download-action-icon::before {
  background: #8994a6;
}

.download-action-btn:disabled .download-action-icon::after {
  border-color: #8994a6;
}

.replay-native-audio {
  display: none;
}

.replay-action-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  width: min(430px, 42vw);
  border: 1px solid #c8d6ea;
  border-radius: 999px;
  padding: 0 14px 0 16px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 20px rgba(40, 110, 240, 0.08);
}

.replay-countdown {
  min-width: 46px;
  color: #0f2a55;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.replay-duration {
  min-width: 46px;
  color: #0f2a55;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.replay-play-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  height: 32px;
  border-color: rgba(40, 110, 240, 0.24);
  border-radius: 999px;
  padding: 0;
  background: rgba(40, 110, 240, 0.12);
  box-shadow: none;
}

.replay-play-btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: rgba(40, 110, 240, 0.18);
}

.replay-play-icon {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--blue);
}

.replay-play-btn.is-playing .replay-play-icon {
  width: 10px;
  height: 14px;
  margin-left: 0;
  border: 0;
  border-left: 3px solid var(--blue);
  border-right: 3px solid var(--blue);
}

.replay-seek {
  flex: 1 1 auto;
  min-width: 120px;
  height: 6px;
  accent-color: var(--blue);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) var(--replay-progress, 0%), #d8e2f0 var(--replay-progress, 0%));
  cursor: pointer;
}

.replay-seek:disabled {
  opacity: 0.48;
  cursor: default;
}

.replay-seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.replay-seek::-webkit-slider-thumb {
  margin-top: -5px;
}

.replay-seek::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.replay-seek::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
}

.highlight-action-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid #c8d6ea;
  border-radius: 999px;
  padding: 0 12px;
  color: #0f2a55;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 20px rgba(40, 110, 240, 0.08);
  font-weight: 800;
}

.highlight-action-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: rgba(40, 110, 240, 0.12);
}

.highlight-action-icon::before,
.highlight-action-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 12px;
  height: 4px;
  border-radius: 999px;
  background: var(--blue);
}

.highlight-action-icon::before {
  top: 8px;
  box-shadow: 0 6px 0 rgba(40, 110, 240, 0.7);
}

.highlight-action-icon::after {
  top: 20px;
  width: 8px;
}

.highlight-action-control select {
  min-height: 34px;
  border: 0;
  border-left: 1px solid #d8e2f1;
  border-radius: 0;
  padding: 0 26px 0 12px;
  color: #0f2a55;
  background: transparent;
  font-weight: 700;
}

.highlight-action-control select:focus {
  outline: 2px solid rgba(40, 110, 240, 0.22);
  outline-offset: 2px;
}

.section-heading {
  margin-bottom: 12px;
}

.section-heading h2,
.session-header h2 {
  font-size: 1rem;
}

.section-heading h2,
.settings-mirror h2,
.settings-mirror h3 {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0;
}

.badge {
  border-radius: 999px;
  padding: 4px 10px;
  color: #0c5b52;
  background: #dff6f1;
  font-size: 0.8rem;
  font-weight: 700;
}

label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 650;
}

.language-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(86px, auto);
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.language-row label {
  margin-bottom: 0;
}

.company-roleplay-settings {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #b9d0ef;
  border-radius: 10px;
  background: #f7faff;
}

.session-duration-control.settings-session-duration-inline {
  margin-bottom: 28px;
}

.company-roleplay-settings[hidden] {
  display: none !important;
}

.company-roleplay-settings h3 {
  margin: 0 0 12px;
  color: #07132d;
  font-size: 15px;
}

.company-roleplay-settings-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.45fr);
  gap: 10px 18px;
  align-items: center;
}

.company-roleplay-setting,
.company-roleplay-minimum-score {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #07132d;
}

.company-roleplay-setting-wide {
  grid-column: 1 / -1;
}

.company-roleplay-setting input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
}

.company-roleplay-setting span,
.company-roleplay-minimum-score > span {
  display: grid;
  gap: 3px;
}

.company-roleplay-setting small {
  color: #40516f;
  font-size: 13px;
  font-weight: 400;
}

.company-roleplay-minimum-score {
  justify-content: flex-end;
  align-items: center;
}

.company-roleplay-minimum-score input {
  width: 76px;
}

@media (max-width: 760px) {
  .company-roleplay-settings-grid {
    grid-template-columns: 1fr;
  }

  .company-roleplay-setting-wide {
    grid-column: auto;
  }

  .company-roleplay-minimum-score {
    justify-content: flex-start;
  }
}

.language-select-field {
  min-width: 0;
}

.scenario-fields .language-select-field #languageSelect {
  width: 40%;
  min-width: 240px;
  max-width: 360px;
}

.language-code-field,
.roleplay-type-field {
  gap: 4px;
}

.roleplay-type-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.language-code-label {
  display: block;
}

.roleplay-type-label {
  color: var(--blue);
  font-size: 1.08rem;
  font-weight: 800;
}

#languageCodeDisplay,
#main_languageCodeDisplay {
  color: var(--ink);
  font-weight: 400;
}

.language-code-value {
  display: block;
  min-height: 42px;
  padding-top: 11px;
  color: var(--ink);
}

#roleplayTypeDisplay,
#main_roleplayTypeDisplay {
  color: var(--ink);
  font-weight: 400;
}

.language-code-field input[readonly],
.roleplay-type-field input[readonly] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.check-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  color: var(--ink);
}

.check-row input {
  width: 18px;
  height: 18px;
}

.toggle-wrap label {
  color: var(--blue);
}

textarea,
select,
input[type="range"],
input[type="url"],
input[type="password"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"] {
  width: 100%;
}

textarea,
select,
input[type="url"],
input[type="password"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 28px 10px 11px;
  color: var(--ink);
  background: #fff;
  font-weight: 400;
}

input[type="date"] {
  min-height: 43px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  opacity: 1;
}

input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {
  opacity: 1;
}

/* Voice speed controls must retain their native up/down stepper arrows. */
.voice-speed-number-input {
  appearance: auto;
  -moz-appearance: auto;
}

.voice-speed-number-input::-webkit-inner-spin-button,
.voice-speed-number-input::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  cursor: pointer;
}

textarea::placeholder,
select::placeholder,
input::placeholder {
  font-weight: 400;
}

option {
  font-weight: 400;
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

.toggle-wrap {
  gap: 7px;
}

.toggle-wrap label {
  display: inline;
  margin: 0;
}

.range-row {
  gap: 12px;
}

.range-row input[type="range"] {
  accent-color: var(--blue);
}

.range-row output {
  min-width: 70px;
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.upload-box {
  display: block;
  border: 1px dashed #a9b8cf;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  color: var(--blue);
  background: #f8fbff;
  cursor: pointer;
}

.upload-box input {
  display: none;
}

.utility-link {
  display: inline-block;
  margin: -4px 0 14px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 750;
}

.voice-sample-play-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.ai-agent-voice-field {
  max-width: 680px;
}

.ai-agent-voice-row {
  display: grid;
  grid-template-columns: minmax(240px, 420px) auto;
  gap: 10px;
  align-items: end;
}

.ai-agent-voice-row select {
  width: 100%;
  margin-top: 0;
}

.voice-sample-play-btn {
  align-self: end;
  min-width: 116px;
}

.play-action-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: rgba(40, 110, 240, 0.12);
}

.play-action-icon::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--blue);
}

.voice-status {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.voice-status.is-success {
  color: #176b3a;
  font-weight: 750;
}

.scenario-translation-status {
  margin: 10px 0 0;
  color: #8a5300;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.scenario-translation-status[data-state="completed"] {
  color: #04702c;
}

#assignmentReviewStatus,
#assignmentsStatus,
#completedRoleplaysStatus,
#roleplayStatusMessage {
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 1.5em;
  line-height: 1.35;
}

#assignmentReviewStatus[data-state="processing"],
#assignmentsStatus[data-state="processing"],
#completedRoleplaysStatus[data-state="processing"],
#roleplayStatusMessage[data-state="processing"] {
  color: #8a5300;
}

#assignmentReviewStatus[data-state="completed"],
#assignmentsStatus[data-state="completed"],
#completedRoleplaysStatus[data-state="completed"],
#roleplayStatusMessage[data-state="completed"] {
  color: #04702c;
}

#assignmentReviewStatus[data-state="error"],
#assignmentsStatus[data-state="error"],
#completedRoleplaysStatus[data-state="error"],
#roleplayStatusMessage[data-state="error"] {
  color: #b00020;
}

#assignmentCreateStatus,
#assignmentRecordingActionStatus,
#elevenAssignmentRecordingActionStatus {
  font-size: 1rem;
  font-weight: 750;
  min-height: 1.4em;
}

#assignmentCreateStatus[data-state="processing"],
#assignmentRecordingActionStatus[data-state="processing"],
#elevenAssignmentRecordingActionStatus[data-state="processing"] {
  color: #8a5300;
}

#assignmentCreateStatus[data-state="completed"],
#assignmentRecordingActionStatus[data-state="completed"],
#elevenAssignmentRecordingActionStatus[data-state="completed"] {
  color: #04702c;
}

#assignmentCreateStatus[data-state="error"],
#assignmentRecordingActionStatus[data-state="error"],
#elevenAssignmentRecordingActionStatus[data-state="error"] {
  color: #b00020;
}

.voice-status.smtp-debug {
  white-space: pre-wrap;
  word-break: break-word;
}

.advanced-voice {
  border: 1px solid #c7d7ef;
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 12px;
  background: #f8fbff;
}

.advanced-voice label:last-child {
  margin-bottom: 0;
}

.learner-microphone-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.learner-microphone-settings label {
  max-width: 25ch;
}

.learner-microphone-select {
  max-width: 25ch;
}

.speech-to-text-settings {
  display: grid;
  gap: 10px;
}

.speech-to-text-settings > h3 {
  margin: 0;
  color: var(--blue);
  font-size: 1rem;
}

.speech-to-text-settings .learner-microphone-settings label,
.speech-to-text-settings .learner-microphone-select {
  width: min(100%, 34ch);
  max-width: 34ch;
}

.workspace {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  min-height: calc(100vh - 36px);
}

.top-logout {
  margin-left: 0;
}

.session-header {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 0 18px 0 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.header-promo-brand {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
  padding: 0 0 0 0;
}

.header-promo-brand:has(.company-header-logo:not([hidden])) {
  display: grid;
  grid-template-columns: 268px auto;
  gap: 0;
}

.header-promo-brand img {
  display: block;
  width: auto;
  flex: 0 1 auto;
  max-height: 112px;
  object-fit: contain;
  object-position: left center;
}

.header-promo-left {
  max-width: min(420px, 25vw);
}

.company-header-logo {
  flex: 0 0 auto;
  max-width: 220px;
  max-height: 112px;
  object-fit: contain;
  object-position: left center;
  justify-self: center;
}

.company-header-logo[hidden] {
  display: none;
}

.header-user-summary {
  display: grid;
  justify-items: start;
  gap: 4px;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.25;
  min-width: 0;
}

.header-user-summary[hidden] {
  display: none;
}

.header-user-summary-label {
  color: #0766d1;
  font-weight: 700;
}

.practice-title {
  display: grid;
  gap: 4px;
}

.top-menu-tiles {
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.65vw, 10px);
  min-width: 0;
  padding: 14px 10px 12px;
}

.top-menu-tile {
  position: relative;
  display: block;
  width: clamp(112px, 7.9vw, 152px);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 18px;
  padding: 0 0 8px;
  color: #0f172a;
  background: transparent;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.top-menu-tile:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: translateY(-5px);
}

.top-menu-tile.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.top-menu-tile img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(15, 23, 42, 0.12));
  transition: filter 0.16s ease;
}

.top-menu-tile:hover img,
.top-menu-tile.active img {
  filter: drop-shadow(0 13px 20px rgba(37, 99, 235, 0.26));
}

.top-menu-tile::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 0;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0;
  transition: height 0.16s ease, opacity 0.16s ease;
}

.top-menu-tile.active::after {
  height: 5px;
  opacity: 1;
}

.top-menu-tiles.is-analysis-running .top-menu-tile[data-tab="transcript"],
.top-menu-tiles.is-analysis-running .top-menu-tile[data-tab="analytics"],
.top-menu-tile[data-tab="transcript"].is-recording-load-flash,
.top-menu-tile[data-tab="analytics"].is-recording-load-flash,
.top-menu-tile[data-tab="transcript"].is-recording-complete-flash,
.top-menu-tile[data-tab="analytics"].is-recording-complete-flash {
  animation: top-menu-analysis-lift 0.95s ease-in-out infinite;
}

.top-menu-tiles.is-voice-processing .top-menu-tile.is-voice-processing-flash {
  animation: top-menu-analysis-lift 0.95s ease-in-out infinite;
}

.top-menu-tiles.is-analysis-running .top-menu-tile[data-tab="transcript"]::after,
.top-menu-tiles.is-analysis-running .top-menu-tile[data-tab="analytics"]::after,
.top-menu-tile[data-tab="transcript"].is-recording-load-flash::after,
.top-menu-tile[data-tab="analytics"].is-recording-load-flash::after {
  height: 5px;
  background: var(--red);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.top-menu-tile[data-tab="transcript"].is-recording-complete-flash::after,
.top-menu-tile[data-tab="analytics"].is-recording-complete-flash::after {
  height: 5px;
  background: var(--green);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.top-menu-tiles.is-voice-processing .top-menu-tile.is-voice-processing-flash::after {
  height: 5px;
  background: var(--red);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.side-menu-tiles {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 12px 12px 14px 14px;
  border-right: 1px solid var(--line);
  background: #fff;
  overflow: auto;
}

.side-menu-tiles .top-menu-tile,
.side-menu-logout {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  aspect-ratio: auto;
  border: 1px solid #dce6f4;
  border-radius: 10px;
  padding: 5px 12px 5px 8px;
  color: #07122f;
  background: #fff;
  box-shadow: 0 8px 20px rgba(32, 44, 72, 0.06);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.side-menu-tiles .top-menu-tile:hover,
.side-menu-logout:hover {
  border-color: #b8d1ff;
  background: #f7fbff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
  transform: translateY(-2px);
}

.side-menu-tiles .top-menu-tile.active {
  border-color: #bfd7ff;
  background: #f5faff;
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.16);
}

.side-menu-tiles .top-menu-tile img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 0;
  object-fit: contain;
  filter: none;
}

.side-menu-tiles .top-menu-tile:hover img,
.side-menu-tiles .top-menu-tile.active img {
  filter: none;
}

.side-menu-tiles .top-menu-tile > span:not(.logout-icon),
.side-menu-logout > span:last-child {
  display: grid;
  gap: 0;
  align-content: center;
  min-width: 0;
}

.side-menu-tiles .top-menu-tile::after {
  top: 12px;
  right: 10px;
  bottom: 12px;
  left: auto;
  width: 0;
  height: auto;
  border-radius: 999px;
}

.side-menu-tiles .top-menu-tile.active::after {
  width: 5px;
  height: auto;
  opacity: 1;
}

.side-menu-tiles.is-analysis-running .top-menu-tile[data-tab="transcript"]::after,
.side-menu-tiles.is-analysis-running .top-menu-tile[data-tab="analytics"]::after,
.side-menu-tiles .top-menu-tile[data-tab="transcript"].is-recording-load-flash::after,
.side-menu-tiles .top-menu-tile[data-tab="analytics"].is-recording-load-flash::after {
  width: 5px;
  height: auto;
  background: var(--red);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.side-menu-tiles.is-voice-processing .top-menu-tile.is-voice-processing-flash {
  animation: top-menu-analysis-lift 0.95s ease-in-out infinite;
}

.side-menu-tiles.is-voice-processing .top-menu-tile.is-voice-processing-flash::after {
  width: 5px;
  height: auto;
  background: var(--red);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.side-menu-logout {
  margin-top: 0;
  border: 1px solid #dce6f4;
  cursor: pointer;
}

.side-menu-logout[hidden] {
  display: none;
}

.side-menu-logout .logout-icon {
  width: 42px;
  height: 42px;
  justify-self: center;
  border: 1px solid #cfdced;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2332415c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")
      center / 25px 25px no-repeat,
    #f8fbff;
}

.tabs.chevrons-hidden {
  display: none;
}

.tab-panel {
  grid-column: 2;
  grid-row: 2;
  overflow: auto;
}

.auth-panel {
  grid-column: 1 / -1;
}

.tab-intro-card {
  border: 1px solid #d7e4f7;
  border-radius: 12px;
  padding: 14px 16px;
  color: #172033;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  box-shadow: 0 8px 20px rgba(32, 44, 72, 0.05);
}

.tab-intro-card h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 800;
}

.tab-intro-card h3 .intro-scenario-name {
  color: #0f172a;
}

.tab-intro-card h3 .intro-recording-name {
  color: #0f172a;
  font-weight: 400;
}

.coach-intro-context {
  display: grid;
  gap: 2px;
  margin: -2px 0 8px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.coach-intro-context[hidden] {
  display: none;
}

.coach-intro-label {
  color: var(--blue);
}

.coach-intro-value {
  color: #0f172a;
  font-weight: 400;
}

.tab-intro-card p {
  margin: 0;
  color: #24324a;
  font-size: 0.93rem;
  line-height: 1.48;
}

.tab-intro-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(138px, 168px);
  gap: 14px;
  align-items: stretch;
  margin: 0 0 14px;
}

.tab-intro-action-row > .tab-intro-card {
  margin: 0;
}

.coach-intro-action-row {
  grid-template-columns: minmax(138px, 168px) minmax(0, 1fr);
}

.next-step-tile {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 94px;
  border: 1px solid #bfd7ff;
  border-radius: 14px;
  padding: 14px 32px 14px 16px;
  color: #061a45;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.previous-step-tile {
  padding: 14px 16px 14px 38px;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
}

.next-step-tile:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #eaf3ff, #dbeaff);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
  transform: translateY(-3px);
}

.next-step-tile:active {
  transform: translateY(-1px) scale(0.985);
}

.next-step-tile[hidden] {
  display: none;
}

.post-recording-next-step {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  width: min(176px, 100%);
  min-height: 100%;
  height: 100%;
  margin: 0;
}

.mobile-menu-toggle,
.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 760px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-header,
  .tab-panel {
    grid-column: 1;
  }

  .session-header {
    grid-template-columns: minmax(0, 1fr);
    min-height: 82px;
    padding: 12px 12px 12px 64px;
  }

  .session-header .header-promo-brand,
  .session-header .practice-title,
  .session-header #recordingStatus,
  .session-header .header-status {
    display: none !important;
  }

  .session-header .header-user-summary {
    grid-column: 1;
    width: 100%;
    justify-items: start;
    align-self: center;
    font-size: 0.88rem;
  }

  .learner-assignment-table {
    table-layout: fixed;
  }

  .learner-assignment-table th:nth-child(3),
  .learner-assignment-table .assignment-table-row > td:nth-child(3),
  .learner-assignment-table th:nth-child(4),
  .learner-assignment-table .assignment-table-row > td:nth-child(4),
  .learner-assignment-table th:nth-child(5),
  .learner-assignment-table .assignment-table-row > td:nth-child(5),
  .learner-assignment-table th:nth-child(6),
  .learner-assignment-table .assignment-table-row > td:nth-child(6) {
    display: none;
  }

  .learner-assignment-table th:nth-child(1),
  .learner-assignment-table .assignment-table-row > td:nth-child(1) {
    width: 28%;
  }

  .learner-assignment-table th:nth-child(2),
  .learner-assignment-table .assignment-table-row > td:nth-child(2) {
    width: 48%;
  }

  .learner-assignment-table th:nth-child(7),
  .learner-assignment-table .assignment-table-row > td:nth-child(7) {
    width: 24%;
  }

  .learner-assignment-table th,
  .learner-assignment-table .assignment-table-row > td {
    padding: 8px 6px;
    overflow-wrap: anywhere;
  }

  .learner-assignment-table .assignment-table-select {
    width: 100%;
    overflow-wrap: anywhere;
  }

  .learner-assignment-table .assignment-row-actions,
  .learner-assignment-table .assignment-start-btn {
    width: 100%;
    min-width: 0;
  }

  .learner-assignment-table .assignment-start-btn {
    padding-inline: 8px;
  }

  .mobile-menu-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1202;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border: 1px solid #bfd0e7;
    border-radius: 10px;
    padding: 0;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
  }

  .mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #17233b;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  body.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: rgba(8, 17, 35, 0.46);
  }

  .mobile-menu-backdrop[hidden] {
    display: none;
  }

  .side-menu-tiles {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    width: min(84vw, 320px);
    height: 100dvh;
    padding: 66px 12px 18px;
    border-right: 1px solid #cbd8ea;
    box-shadow: 16px 0 36px rgba(15, 23, 42, 0.2);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 190ms ease, visibility 190ms ease;
  }

  body.mobile-menu-open .side-menu-tiles {
    transform: translateX(0);
    visibility: visible;
  }
}

.next-step-eyebrow {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.next-step-title {
  display: grid;
  gap: 1px;
  color: #07122f;
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.1;
}

#practiceTab .tab-intro-card h3,
#practiceTab .roleplay-assignment-display h3,
#practiceTab .voice-control-rail h3,
#practiceTab .voice-scenario-panel h3,
#practiceTab .avatar-flow-panel h3,
#practiceTab .avatar-analysis-focus h3,
#practiceTab .practice-scenario-summary h3,
#elevenTab .tab-intro-card h3,
#elevenTab .roleplay-assignment-display h3,
#elevenTab .voice-control-rail h3,
#elevenTab .voice-scenario-panel h3,
#elevenTab .avatar-flow-panel h3,
#elevenTab .avatar-analysis-focus h3,
#elevenTab .practice-scenario-summary h3,
#avatarTab .tab-intro-card h3,
#avatarTab .roleplay-assignment-display h3,
#avatarTab .voice-control-rail h3,
#avatarTab .voice-scenario-panel h3,
#avatarTab .avatar-flow-panel h3,
#avatarTab .avatar-analysis-focus h3,
#avatarTab .practice-scenario-summary h3,
#transcriptTab .tab-intro-card h3,
#analyticsTab .tab-intro-card h3 {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

#practiceTab .voice-summary-stack,
#elevenTab .voice-summary-stack,
#avatarTab .avatar-summary-stack {
  display: none !important;
}

#elevenChoiceTitle,
#elevenSessionTitle,
#avatarChoiceTitle,
#avatarSessionTitle {
  color: var(--blue);
}

#practiceTab .tab-intro-card h3,
#practiceTab .roleplay-assignment-display h3,
#practiceTab .voice-control-rail h3,
#practiceTab .voice-scenario-panel h3,
#practiceTab .avatar-flow-panel h3,
#practiceTab .avatar-analysis-focus h3,
#practiceTab .practice-scenario-summary h3,
#elevenTab .tab-intro-card h3,
#elevenTab .roleplay-assignment-display h3,
#elevenTab .voice-control-rail h3,
#elevenTab .voice-scenario-panel h3,
#elevenTab .avatar-flow-panel h3,
#elevenTab .avatar-analysis-focus h3,
#elevenTab .practice-scenario-summary h3,
#avatarTab .tab-intro-card h3,
#avatarTab .roleplay-assignment-display h3,
#avatarTab .voice-control-rail h3,
#avatarTab .voice-scenario-panel h3,
#avatarTab .avatar-flow-panel h3,
#avatarTab .avatar-analysis-focus h3,
#avatarTab .practice-scenario-summary h3,
#transcriptTab .tab-intro-card h3,
#analyticsTab .tab-intro-card h3 {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.next-step-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 1rem;
  font-weight: 900;
  transform: translateY(-50%);
}

.previous-step-tile .next-step-arrow {
  right: auto;
  left: 12px;
}

.next-step-tile::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 8px;
  left: 14px;
  height: 0;
  border-radius: 999px;
  background: var(--red);
  opacity: 0;
}

.previous-step-tile::after {
  right: 14px;
  left: 24px;
}

body.is-analysis-running .next-step-tile[data-tab="transcript"],
body.is-analysis-running .next-step-tile[data-tab="analytics"],
.next-step-tile[data-tab="transcript"].is-recording-load-flash,
.next-step-tile[data-tab="analytics"].is-recording-load-flash,
.next-step-tile[data-tab="transcript"].is-recording-complete-flash,
.next-step-tile[data-tab="analytics"].is-recording-complete-flash {
  animation: top-menu-analysis-lift 0.95s ease-in-out infinite;
}

body.is-post-recording-analysis-running .post-recording-next-step,
.post-recording-next-step.is-post-analysis-running {
  animation: top-menu-analysis-lift 0.95s ease-in-out infinite;
  border-color: #2563eb;
  background: linear-gradient(180deg, #eaf3ff, #dbeafe);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.26);
}

.post-recording-next-step.is-post-step-visible-blink:not(.is-post-analysis-running) {
  animation: post-step-visible-blink 0.72s ease-in-out 6;
}

.post-recording-next-step.is-post-analysis-complete-flash {
  animation: top-menu-analysis-lift 0.72s ease-in-out 6;
  border-color: var(--green);
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.25);
}

body.is-analysis-running .next-step-tile[data-tab="transcript"]::after,
body.is-analysis-running .next-step-tile[data-tab="analytics"]::after,
.next-step-tile[data-tab="transcript"].is-recording-load-flash::after,
.next-step-tile[data-tab="analytics"].is-recording-load-flash::after {
  height: 4px;
  background: var(--red);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.next-step-tile[data-tab="transcript"].is-recording-complete-flash::after,
.next-step-tile[data-tab="analytics"].is-recording-complete-flash::after {
  height: 4px;
  background: var(--green);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

body.is-post-recording-analysis-running .post-recording-next-step::after,
.post-recording-next-step.is-post-analysis-running::after {
  height: 4px;
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.side-menu-tiles .top-menu-tile[data-tab="transcript"].is-recording-complete-flash,
.side-menu-tiles .top-menu-tile[data-tab="analytics"].is-recording-complete-flash {
  animation: top-menu-analysis-lift 0.95s ease-in-out infinite;
}

.side-menu-tiles .top-menu-tile[data-tab="transcript"].is-recording-complete-flash::after,
.side-menu-tiles .top-menu-tile[data-tab="analytics"].is-recording-complete-flash::after {
  width: 5px;
  height: auto;
  background: var(--green);
  opacity: 1;
  animation: top-menu-analysis-line 0.95s ease-in-out infinite;
}

.post-recording-next-step.is-post-step-visible-blink:not(.is-post-analysis-running)::after {
  height: 4px;
  opacity: 1;
  animation: top-menu-analysis-line 0.72s ease-in-out 6;
}

.post-recording-next-step.is-post-analysis-complete-flash::before,
.post-recording-next-step.is-post-analysis-complete-flash::after {
  content: "";
  position: absolute;
  right: 24px;
  left: 14px;
  height: 4px;
  border-radius: 999px;
  background: var(--green);
  opacity: 1;
  animation: top-menu-analysis-line 0.72s ease-in-out 6;
}

.post-recording-next-step.is-post-analysis-complete-flash::before {
  top: 8px;
}

.post-recording-next-step.is-post-analysis-complete-flash::after {
  bottom: 8px;
}

@keyframes post-step-visible-blink {
  0%,
  100% {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transform: translateY(0);
  }

  50% {
    border-color: transparent;
    background: linear-gradient(180deg, #eaf3ff, #dbeaff);
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
    transform: translateY(-4px);
  }
}

.practice-intro-card {
  margin-bottom: 2px;
}

.practice-page-intro {
  margin: 0 0 14px;
}

#settingsTab .practice-page-intro,
#practiceTab .practice-page-intro,
#avatarTab .practice-page-intro {
  max-width: none;
}

.roleplay-assignment-display {
  border: 1px solid #d7e4f7;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(32, 44, 72, 0.04);
}

.roleplay-assignment-display[hidden] {
  display: none;
}

.roleplay-assignment-display h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 800;
}

.roleplay-assignment-display p {
  margin: 0 0 12px;
  color: #0f172a;
  line-height: 1.5;
  white-space: pre-wrap;
}

#elevenTab .roleplay-assignment-display .scenario-translation-status,
#elevenTab .roleplay-assignment-display .scenario-translation-status[data-state="completed"] {
  color: #0f172a;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
}

.roleplay-assignment-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}

.roleplay-assignment-detail-btn {
  min-width: 150px;
}

#elevenTab .assignment-detail-roleplay-actions .roleplay-assignment-detail-btn {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 94, 255, 0.2);
}

#elevenTab .assignment-detail-roleplay-actions .roleplay-assignment-detail-btn:hover:not(:disabled) {
  border-color: #004bd6;
  background: #004bd6;
  color: #fff;
  box-shadow: 0 12px 26px rgba(0, 75, 214, 0.3);
  transform: translateY(-2px);
}

.roleplay-assignment-detail-btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: #fff;
  color: var(--blue);
  box-shadow: 0 12px 26px rgba(40, 110, 240, 0.16);
  transform: translateY(-1px);
}

.roleplay-assignment-detail-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(40, 110, 240, 0.12);
}

.roleplay-assignment-display-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.roleplay-assignment-display-attachment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #c8d6ea;
  border-radius: 999px;
  padding: 7px 12px;
  color: #07122f;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(18, 52, 99, 0.08);
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.roleplay-assignment-display-attachment:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 12px 26px rgba(40, 110, 240, 0.16);
  transform: translateY(-1px);
}

.roleplay-assignment-display-attachment:active {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(40, 110, 240, 0.12);
}

.voice-selector-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #d7e4f7;
  border-radius: 10px;
  padding: 12px;
  background: #f8fbff;
}

.voice-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.voice-play-inline {
  min-height: 42px;
}

.roleplay-assignment-panel > .scenario-panel-summary::before {
  background: #0ea5a4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

#mainSettingsMirror .scenario-new-help {
  display: none;
}

.admin-helper-copy {
  max-width: 760px;
  color: #33415c;
  line-height: 1.45;
}

.admin-invite-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(420px, 1fr);
  gap: 22px;
  align-items: start;
}

.admin-invite-grid {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.admin-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-invite-status {
  white-space: pre-line;
}

.admin-invite-preview {
  border: 1px solid #d7e4f7;
  border-radius: 12px;
  padding: 16px;
  background: #f8fbff;
  box-shadow: 0 10px 24px rgba(32, 44, 72, 0.05);
}

.admin-invite-preview h3 {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 800;
}

.admin-invite-preview-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.admin-invite-preview-meta div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.admin-invite-preview-meta dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-invite-preview-meta dd {
  margin: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.invite-email-preview-body {
  border: 1px solid #d7e4f7;
  border-radius: 10px;
  padding: 18px;
  color: #0f172a;
  background: #fff;
  font-size: 1rem;
  line-height: 1.55;
}

.invite-email-preview-body img {
  max-width: 100%;
  height: auto;
}

.invite-email-preview-body .invite-preview-logo {
  display: block;
  width: min(100%, 430px);
  margin: 0 0 18px;
}

.invite-email-preview-body .invite-preview-small-image {
  width: 150px;
  max-width: 42%;
  margin-right: 16px;
  vertical-align: middle;
}

.tab-intro-wide {
  margin-bottom: 14px;
}

.voice-input-test-intro {
  margin-bottom: 10px;
  padding: 10px 14px;
}

.voice-input-test-intro h3 {
  margin-bottom: 4px;
}

.voice-input-test-intro p {
  max-width: 980px;
  line-height: 1.35;
}

@keyframes top-menu-analysis-lift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes top-menu-analysis-line {
  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 1;
  }
}

.practice-title-with-dot {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.recording-dot {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 12px 12px 12px 4px;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.26);
}

.recording-dot::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 8px -4px 0 #fff, 16px 2px 0 #fff;
}

.recording-dot::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: -7px;
  width: 14px;
  height: 11px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.recording-dot.is-recording {
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.24);
  animation: recordingBlink 1s ease-in-out infinite;
}

.recording-dot.is-recording::before,
.recording-dot.is-recording::after {
  content: none;
}

@keyframes recordingBlink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.82);
  }
}

.practice-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.live-practice-label.is-live {
  color: var(--red);
}

.live-practice-label,
.current-user-email {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 400;
}

.live-practice-label {
  font-weight: 700;
}

.session-header h2,
.active-scenario-language {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
}

.scenario-header-prefix,
.practice-title #activeScenarioName,
.session-header .active-scenario-language .scenario-language-value {
  color: #0f172a;
  font-weight: 400;
}

.header-status {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-timer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-timer-figure {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.header-timer-avatar {
  width: 98px;
  height: 98px;
}

.header-scenario-language,
.header-user-email {
  max-width: 280px;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-user-email {
  display: none;
}

.header-scenario-language {
  display: none;
}

.header-avatar-actions {
  display: grid;
  justify-items: stretch;
  gap: 10px;
}

.eyebrow {
  display: block;
  margin: 0 0 2px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 800;
}

.timer-card {
  display: grid;
  gap: 2px;
  min-width: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  text-align: center;
  background: var(--soft);
}

button.timer-card {
  cursor: pointer;
  font: inherit;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

button.timer-card:hover {
  transform: translateY(-2px);
  border-color: #9bbcf8;
  background: #f7fbff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
}

button.timer-card:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

button.timer-card:focus-visible {
  outline: 3px solid rgba(40, 110, 240, 0.25);
  outline-offset: 2px;
}

.timer-card.is-clickable {
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.timer-card.is-clickable:hover {
  transform: translateY(-2px);
  border-color: #9bbcf8;
  background: #f7fbff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
}

.timer-card.is-clickable:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

.timer-card.is-clickable:focus-visible {
  outline: 3px solid rgba(40, 110, 240, 0.25);
  outline-offset: 2px;
}
.timer-card small {
  font-weight: 800;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#timer,
#avatarTimer {
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 850;
}

#timer.is-session-time-warning,
#avatarTimer.is-session-time-warning {
  color: var(--red);
  animation: session-time-warning-blink 0.85s ease-in-out infinite;
}

@keyframes session-time-warning-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

#remainingQuotaMinutes,
#remainingAvatarMinutes {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 850;
}

#remainingQuotaMinutes.is-empty,
#remainingAvatarMinutes.is-empty {
  color: var(--red);
}

.timer-meta {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
}

.practice-session-time-card {
  justify-self: center;
  width: min(100%, 124px);
  min-height: 82px;
  margin-top: 0;
  padding: 9px 8px;
}

.timer-meta.is-free {
  color: #b42318;
}

.tabs {
  display: none;
  gap: 0;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
  background: #e8f0fd;
}

.tabs.chevrons-hidden .tab {
  display: none;
}

.tabs [data-tab="settings"] {
  order: 1;
}

.tabs [data-tab="practice"] {
  order: 2;
}

.tabs [data-tab="avatar"] {
  order: 3;
}

.tabs [data-tab="analytics"] {
  order: 5;
}

.tabs [data-tab="transcript"] {
  order: 4;
}

.tabs [data-tab="pricing"] {
  order: 6;
}

.tabs [data-tab="admin"] {
  order: 7;
}

.scenario-title-heading-row,
.scenario-title-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

.scenario-title-input-row {
  margin-top: 8px;
}

.scenario-title-user-email {
  color: #334155;
  font-size: 0.86rem;
  font-weight: 500;
}

.tabs .tab-logout {
  order: 10;
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0;
}

.auth-panel {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px 20px;
  background: #f8fbff;
}

body:not(.is-authenticated) .auth-panel {
  min-height: 100vh;
  align-content: start;
  gap: 18px;
  border-top: 0;
  padding: 24px 0;
  background: transparent;
  grid-template-columns: 1fr;
  width: min(1220px, calc(100vw - 36px));
  margin: 0 auto;
}

.auth-panel strong {
  color: var(--blue);
}

.auth-panel span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.login-grid,
.register-grid {
  grid-template-columns: 1fr;
  max-width: 380px;
}

.change-password-grid {
  grid-template-columns: 1fr;
  max-width: 380px;
}

.change-password-grid > input,
.change-password-grid > .password-field,
.change-password-grid > button {
  width: 100%;
}

.login-method-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-method-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 850;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}

.login-divider span {
  margin: 0;
  white-space: nowrap;
}

.google-login-section {
  display: grid;
  gap: 8px;
}

.auth-google-first {
  max-width: 380px;
}

.google-signin-host {
  display: grid;
  justify-content: center;
  min-height: 42px;
}

.google-signin-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
}

.google-signin-status.is-error {
  color: var(--red);
  font-weight: 750;
}

.google-fallback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: min(100%, 360px);
  min-height: 42px;
  border: 1px solid #d7e0ef;
  border-radius: 8px;
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  font-weight: 850;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.google-fallback-button:hover {
  border-color: #b9c8df;
  background: #f8fbff;
}

.google-fallback-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: #4285f4;
  font-size: 0.82rem;
  font-weight: 900;
}

.verify-grid {
  grid-template-columns: 1fr;
  max-width: 380px;
}

.forgot-grid {
  grid-template-columns: 1fr;
  max-width: 380px;
}

.verify-grid span,
.forgot-grid span {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.register-intro {
  max-width: 420px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.session-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
  background: var(--soft);
}

.session-controls-left,
.session-controls-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.session-controls-left {
  flex-wrap: nowrap;
}

.session-controls-left .credit-empty,
.avatar-controls .avatar-credit-empty {
  border-color: var(--line);
  color: var(--muted);
  background: #fff;
  opacity: 1;
}

.credit-message,
.avatar-credit-message {
  color: var(--blue);
  font-weight: 400;
}

.transport-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 168px;
  min-height: 50px;
  border-radius: 999px;
  padding: 0 22px;
  background:
    linear-gradient(180deg, #ffffff, #f3f6fb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(22, 34, 51, 0.08);
  font-weight: 850;
  letter-spacing: 0;
}

.transport-button::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
}

.transport-record.primary,
.transport-record {
  border-color: #f7b4b8;
  color: #a11220;
  background:
    linear-gradient(180deg, #ffffff, #fff3f4);
}

.transport-record::before {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ef233c;
  box-shadow:
    inset 0 -2px 3px rgba(127, 18, 29, 0.28),
    0 0 0 5px rgba(239, 35, 60, 0.12);
}

.transport-stop {
  border-color: #cfd8e6;
  color: #172033;
}

.transport-stop::before {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #172033;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.22);
}

.transport-record:not(:disabled):hover {
  border-color: #ef233c;
  background:
    linear-gradient(180deg, #fffafa, #ffe8eb);
}

.transport-stop:not(:disabled):hover {
  border-color: #ef233c;
  color: #9f1239;
  background:
    linear-gradient(180deg, #ffffff, #fff1f2);
}

.transport-stop:not(:disabled):hover::before {
  background: #ef233c;
}

.transport-button:disabled {
  color: #7a8496;
  background: #f8fafc;
  box-shadow: none;
  opacity: 1;
}

.transport-button:disabled::before {
  background: #a7b0c0;
  box-shadow: none;
}

.pricing-page {
  display: grid;
  gap: 22px;
  align-content: start;
}

.pricing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.pricing-header h2 {
  margin: 0 0 8px;
  font-size: 1.45rem;
}

.pricing-header p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pricing-tile {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 310px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--blue);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.pricing-tile h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.06rem;
}

.pricing-badge {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--blue);
  background: #edf4ff;
  font-size: 0.78rem;
  font-weight: 800;
}

.pricing-minutes {
  color: var(--ink);
  font-size: 1.5rem;
}

.pricing-price {
  margin: 0;
  color: var(--blue);
  font-size: 2rem;
  font-weight: 900;
}

.pricing-rate,
.payment-methods {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.pricing-illustration {
  align-self: center;
  justify-self: center;
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 4px 0;
}

.pricing-illustration-avatar {
  width: 104px;
  height: 104px;
}

.payment-methods {
  font-weight: 800;
}

.pricing-tile button {
  align-self: end;
  margin-top: auto;
  border-color: transparent;
  color: #fff;
  background: var(--blue);
  opacity: 0.62;
}

.pricing-avatar-starter button,
.pricing-avatar-growth button {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  opacity: 1;
}

#pricingStatus {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.35;
  padding: 16px 18px;
}

.pricing-beta {
  border-top-color: var(--red);
}

.pricing-beta .pricing-badge,
.pricing-beta .pricing-price {
  color: var(--red);
}

.pricing-beta .pricing-badge {
  background: #fff1f3;
}

.pricing-practice {
  border-top-color: var(--teal);
}

.pricing-practice .pricing-badge,
.pricing-practice .pricing-price {
  color: var(--teal);
}

.pricing-practice .pricing-badge {
  background: #e8faf7;
}

.pricing-growth {
  border-top-color: var(--amber);
}

.pricing-growth .pricing-badge,
.pricing-growth .pricing-price {
  color: #a76800;
}

.pricing-growth .pricing-badge {
  background: #fff7e6;
}

.pricing-avatar-starter {
  border-top-color: var(--teal);
}

.pricing-avatar-starter .pricing-badge,
.pricing-avatar-starter .pricing-price {
  color: var(--teal);
}

.pricing-avatar-starter .pricing-badge {
  background: #e8faf7;
}

.pricing-avatar-growth {
  border-top-color: var(--green);
}

.pricing-avatar-growth .pricing-badge,
.pricing-avatar-growth .pricing-price {
  color: var(--green);
}

.pricing-avatar-growth .pricing-badge {
  background: #eaffef;
}

.pricing-pro {
  border-top-color: var(--green);
}

.pricing-pro .pricing-badge,
.pricing-pro .pricing-price {
  color: var(--green);
}

.pricing-pro .pricing-badge {
  background: #eaffef;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.field-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.field-title-row button {
  min-height: 32px;
  padding: 0 12px;
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  font-size: 0.85rem;
}

.field-feedback {
  min-height: 18px;
  color: #8a5b00;
  font-size: 0.84rem;
  line-height: 1.35;
}

.field-feedback.is-error {
  color: var(--red);
}

.field-feedback.is-success {
  color: #176b3a;
}

.roleplay-eleven-language-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 12px 0 0;
  border-bottom: 1px solid #bdd2f7;
}

.roleplay-eleven-language-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 38px;
  border: 1px solid #bdd2f7;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 8px 14px;
  color: #0057ff;
  background: #fff;
  font-size: 0.92rem;
  font-weight: 750;
  cursor: pointer;
  margin-bottom: -1px;
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.roleplay-eleven-language-tab:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #f4f8ff;
  box-shadow: 0 6px 14px rgba(0, 87, 255, 0.14);
  transform: translateY(-1px);
}

.roleplay-eleven-language-tab.active,
.roleplay-eleven-language-tab[aria-selected="true"] {
  border-color: #1459df;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(0, 87, 255, 0.22);
}

.roleplay-eleven-language-panels {
  border: 1px solid #bdd2f7;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 12px;
  background: #fff;
}

.roleplay-eleven-language-panel[hidden] {
  display: none !important;
}

.roleplay-eleven-language-meta {
  margin: 8px 0 8px;
  color: #243149;
  font-size: 0.92rem;
}

.tab {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  min-width: 124px;
  border: 0;
  border-radius: 0;
  padding: 0 24px 0 30px;
  color: #243149;
  background:
    linear-gradient(180deg, rgba(210, 232, 255, 0.98), rgba(226, 240, 255, 0.98)),
    #ddecff;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.05;
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    transform 0.16s ease,
    filter 0.16s ease;
}

.tab + .tab {
  margin-left: -13px;
}

.top-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  width: auto;
  min-width: 140px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  color: #26364f;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 31, 52, 0.04);
  font-size: 0.92rem;
  font-weight: 750;
}

.header-promo-brand .top-logout {
  justify-self: start;
  margin-left: 20px;
}

.top-logout:hover {
  border-color: #b7cef8;
  color: var(--blue);
  background: #f8fbff;
}

.logout-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #5b6b85;
  border-right: 0;
  border-radius: 3px 0 0 3px;
}

.logout-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 6px;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: #5b6b85;
}

.logout-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #5b6b85;
  border-right: 2px solid #5b6b85;
  transform: rotate(45deg);
}

.top-logout:hover .logout-icon {
  border-color: var(--blue);
}

.top-logout:hover .logout-icon::before {
  background: var(--blue);
}

.top-logout:hover .logout-icon::after {
  border-color: var(--blue);
}

.tab:hover {
  color: #fff;
  background: var(--blue);
  filter: drop-shadow(0 8px 16px rgba(40, 110, 240, 0.24));
  transform: translateY(-1px);
}

.tab.active {
  color: #fff;
  background: var(--blue);
  filter: drop-shadow(0 8px 16px rgba(40, 110, 240, 0.24));
}

.tab.active::after {
  content: none;
}

.tab-stacked {
  display: inline-grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  line-height: 1.05;
}

.tabs.is-analysis-running .tab[data-tab="transcript"],
.tabs.is-analysis-running .tab[data-tab="analytics"],
.tab[data-tab="transcript"].is-recording-load-flash,
.tab[data-tab="analytics"].is-recording-load-flash {
  animation: analysis-tab-pulse 0.95s ease-in-out infinite;
}

.tab[data-tab="transcript"].is-recording-complete-flash,
.tab[data-tab="analytics"].is-recording-complete-flash {
  animation: analysis-tab-complete-pulse 0.95s ease-in-out infinite;
}

@keyframes analysis-tab-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
  }

  50% {
    color: #fff;
    background: var(--blue);
    filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.55));
  }
}

@keyframes analysis-tab-complete-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(22, 163, 74, 0));
  }

  50% {
    color: #fff;
    background: var(--green);
    filter: drop-shadow(0 0 12px rgba(22, 163, 74, 0.55));
  }
}

.tab-panel {
  display: none;
  min-height: 0;
  padding: 18px 20px;
}

.tab-panel.active {
  display: grid;
}

#recordingsTab {
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 14px;
}

#recordingsTab > .tab-intro-card {
  align-self: start;
  min-height: 0;
  margin-bottom: 0;
  padding: 12px 16px;
}

#practiceTab {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}

#avatarTab {
  gap: 14px;
}

.practice-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(420px, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 0;
  padding: 18px 20px;
}

.voice-control-rail,
.voice-scenario-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.voice-control-rail {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 12px;
}

.practice-local-scenario {
  display: grid;
  gap: 2px;
  color: #0f172a;
  font-size: 0.94rem;
  line-height: 1.25;
  justify-items: center;
  text-align: center;
}

.practice-local-scenario strong {
  color: #0f172a;
  font-weight: 700;
}

.practice-local-scenario span {
  color: #0f172a;
  font-weight: 400;
}

.voice-roleplay-robot {
  display: grid;
  justify-items: center;
  margin: -4px 0 2px;
}

.practice-local-language {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.voice-roleplay-robot img {
  display: block;
  width: min(100%, 230px);
  max-height: 165px;
  border-radius: 10px;
  object-fit: contain;
}

.voice-control-rail h3,
.voice-scenario-panel h3 {
  margin: 0;
  color: var(--blue);
  font-size: 0.98rem;
}

.voice-transport-stack {
  display: grid;
  gap: 10px;
}

.voice-transport-stack .transport-button {
  width: 100%;
  min-width: 0;
}

.voice-round-controls {
  display: grid;
  grid-template-columns: minmax(72px, 0.82fr) minmax(112px, 1fr) minmax(72px, 0.82fr);
  gap: 10px;
  align-items: center;
}

#elevenTab .voice-round-controls {
  grid-template-columns: minmax(60px, 0.75fr) minmax(92px, 1fr) minmax(60px, 0.75fr) minmax(60px, 0.75fr);
}

@media (max-width: 480px) {
  #elevenTab .voice-round-controls {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
  }
}

.voice-control-rail .voice-duration-inline,
.voice-control-rail .voice-tts-speed-control,
.avatar-control-rail .avatar-tts-speed-control {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: none;
  flex: none;
}

.change-session-time-label {
  display: block;
  color: var(--blue);
  font-weight: 750;
  text-align: center;
}

.voice-control-rail .voice-duration-inline .session-duration-heading,
.voice-control-rail .voice-tts-speed-control .session-duration-heading,
.avatar-control-rail .avatar-tts-speed-control .session-duration-heading {
  display: grid;
  gap: 6px;
  white-space: normal;
}

.voice-control-rail .voice-duration-inline > .session-duration-heading {
  display: none;
}

.voice-control-rail .voice-tts-speed-control .session-duration-heading {
  font-weight: 400;
}

.voice-control-rail .voice-duration-inline .range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.voice-control-rail .voice-tts-speed-control input,
.avatar-control-rail .avatar-tts-speed-control input {
  width: 100%;
  min-height: 42px;
  font-size: 1rem;
}

.voice-control-rail .credit-message {
  display: block;
  border: 1px solid #f4c36d;
  border-radius: 8px;
  padding: 10px;
  color: #0f172a;
  background: #fff7e6;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.35;
}

.voice-control-rail .credit-message[hidden] {
  display: none;
}

.eleven-voice-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.eleven-voice-panel h3 {
  margin: 0;
}

.eleven-voice-row,
.eleven-voice-actions {
  display: grid;
  gap: 8px;
}

.eleven-voice-actions {
  grid-template-columns: 1fr 1fr;
}

.eleven-voice-actions .download-action-btn {
  min-width: 0;
  justify-content: center;
}

.eleven-select-btn {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.eleven-select-btn:hover:not(:disabled) {
  background: #155be8;
  border-color: #155be8;
  color: #fff;
}

.transcript-toggle-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background: #f8fbff;
  font-size: 0.9rem;
  font-weight: 800;
}

.transcript-toggle-control input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.avatar-transcript-toggle {
  min-height: 42px;
  background: #fff;
}

.transcript-panel-hidden {
  display: none !important;
}

.transcript-status-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-content: start;
  align-items: center;
  min-width: 0;
}

#elevenTab .practice-local-language,
#elevenTab .user-roleplay-language-row select {
  color: var(--blue);
}

.minimum-score-settings {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 14px 0 26px;
  padding: 12px 14px;
  border: 1px solid #cfe0f8;
  border-radius: 10px;
  background: #f8fbff;
}

.minimum-score-enable-row,
.minimum-score-value-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.45;
}

.minimum-score-enable-row span,
.minimum-score-enable-row small,
.minimum-score-value-row span {
  color: inherit;
  font-size: inherit;
}

.minimum-score-enable-row small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
}

.minimum-score-enable-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.minimum-score-value-row input[type="number"] {
  width: 78px;
  min-width: 78px;
}

.minimum-score-notice {
  display: none;
  border: 1px solid #f2bd72;
  border-radius: 9px;
  padding: 10px 12px;
  color: #172033;
  background: #fff4df;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

.minimum-score-notice.is-visible:not([hidden]) {
  display: block;
}

.minimum-score-notice[hidden] {
  display: none !important;
}

.minimum-score-notice span {
  color: #087a31;
  font-weight: 900;
}

.voice-transcript-stack {
  grid-column: 2;
}

.voice-practice-status {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

.avatar-practice-status {
  grid-column: 1 / -1;
}

.voice-transcript-main {
  min-width: 0;
}

#practiceTab .voice-transcript-main,
#practiceTab .voice-transcript-toggle {
  display: none !important;
}

#elevenTab .voice-transcript-main,
#elevenTab .voice-transcript-toggle,
#avatarTab #avatarTranscriptPanel,
#avatarTab .avatar-transcript-toggle {
  display: none !important;
}

.header-timer-row .header-avatar-quota { display: none; }

.voice-mic-status-indicator {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  place-items: center;
  justify-self: center;
  align-self: center;
  margin-top: 1rem;
  width: clamp(76px, 8vw, 98px);
  height: clamp(76px, 8vw, 98px);
  min-height: 76px;
  border-radius: 999px;
  background: #9ca3af;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.voice-mic-status-indicator.is-listening {
  background: #43a863;
  box-shadow: 0 20px 42px rgba(67, 168, 99, 0.28);
  animation: voiceMicBlink 1s ease-in-out infinite;
}

.voice-mic-status-indicator.is-muted {
  background: #9ca3af;
}

/* Keep the space stable without flashing a grey mic between AI speech chunks. */
:is(#voiceMicStatusIndicator, #elevenMicStatusIndicator).is-muted:not(.is-ai-speaking):not(.is-listening) {
  visibility: hidden;
}

#elevenMicStatusIndicator,
#avatarMicStatusIndicator {
  margin: 1rem auto 1.5rem;
}

#avatarMicStatusIndicator {
  width: clamp(70px, 7vw, 92px);
  height: clamp(70px, 7vw, 92px);
}

@keyframes voiceMicBlink {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.72;
  }
}

.voice-transcript-stack .transcript-toggle-control,
.avatar-transcript-stack .transcript-toggle-control {
  width: 100%;
  background: #fff;
}

.voice-transcript-stack .avatar-analysis-focus,
.voice-transcript-stack .avatar-transcript-measures {
  grid-column: auto;
  grid-row: auto;
}

.voice-scenario-panel {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.voice-scenario-panel .practice-scenario-summary {
  margin: 0;
}

.session-duration-panel {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.session-duration-control {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--blue);
  font-weight: 800;
}

.session-duration-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.voice-duration-inline > .session-duration-heading,
.avatar-duration-inline > .session-duration-heading {
  display: none;
}

.session-duration-control.is-fixed-duration {
  display: none;
}

.session-duration-heading em {
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 3px 9px;
  color: #b42318;
  background: #fff1f2;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 850;
}

.avatar-controls {
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.coach-recording-context {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 600;
}

.coach-recording-context-label {
  color: var(--blue);
}

.coach-recording-context-value {
  color: #0f172a;
}

.avatar-control-rail {
  position: sticky;
  top: 12px;
  min-width: 0;
}

.avatar-control-rail h3 {
  margin: 0;
  color: var(--blue);
  font-size: 1rem;
}

.avatar-round-controls {
  display: grid;
  grid-template-columns: minmax(72px, 0.82fr) minmax(112px, 1fr) minmax(72px, 0.82fr);
  gap: 10px;
  align-items: center;
}

.avatar-round-action {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.avatar-round-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.avatar-round-circle {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(60px, 6vw, 70px);
  height: clamp(60px, 6vw, 70px);
  border-radius: 999px;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.avatar-round-action:not(:disabled):hover .avatar-round-circle {
  transform: translateY(-1px);
}

.avatar-round-action:not(:disabled):active .avatar-round-circle {
  transform: translateY(1px) scale(0.98);
}

.avatar-round-record .avatar-round-circle {
  background: #ef4444;
  box-shadow: 0 18px 32px rgba(239, 68, 68, 0.28);
}

.avatar-round-stop .avatar-round-circle {
  border: 1px solid #dbe4f2;
  background: #fff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
}

.voice-round-pause .avatar-round-circle {
  border: 1px solid #e5a936;
  background: #fff4df;
  box-shadow: 0 14px 28px rgba(138, 83, 0, 0.14);
}

.voice-round-pause.is-paused .avatar-round-circle {
  border-color: #20a45b;
  background: #eaf9f0;
  box-shadow: 0 14px 28px rgba(32, 164, 91, 0.16);
}

.voice-round-pause.gpt-recovery-continue .avatar-round-circle { border: 2px solid #075ee5; background: #dbeafe; box-shadow: 0 12px 28px rgba(7, 94, 229, 0.28); }
.voice-round-pause.gpt-recovery-continue .avatar-round-label { color: #075ee5; font-weight: 850; }
.voice-round-pause.gpt-recovery-continue:hover .avatar-round-circle { border-color: #0044ad; background: #075ee5; box-shadow: 0 16px 34px rgba(7, 94, 229, 0.38); transform: translateY(-2px) scale(1.04); }
.voice-round-pause.gpt-recovery-continue:hover .voice-pause-icon::before { border-left-color: #fff; }
.voice-round-pause.gpt-recovery-continue:hover .avatar-round-label { color: #0044ad; }
.gpt-recovery-help { width: min(250px, 100%); margin: -4px auto 6px !important; color: #334155 !important; font-size: .82rem; font-weight: 650; line-height: 1.45; text-align: center; }
.gpt-recovery-help a { color: #075ee5; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.gpt-recovery-help a:hover { color: #003b91; }

.voice-pause-icon {
  position: relative;
  width: 18px;
  height: 22px;
}

.voice-pause-icon::before,
.voice-pause-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 22px;
  border-radius: 2px;
  background: #8a5300;
}

.voice-pause-icon::before { left: 1px; }
.voice-pause-icon::after { right: 1px; }

.voice-round-pause.is-paused .voice-pause-icon::before {
  left: 3px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #087a31;
  border-radius: 0;
  background: transparent;
}

.voice-round-pause.is-paused .voice-pause-icon::after { display: none; }
.voice-round-pause.is-paused.gpt-recovery-continue .voice-pause-icon::before { border-left-color: #075ee5; }
.voice-round-pause.is-paused.gpt-recovery-continue:hover .voice-pause-icon::before { border-left-color: #fff; }

.mobile-speaker-toggle { display: none; }
.mobile-speaker-toggle .avatar-round-circle { border: 1px solid #8bb8f8; background: #eaf3ff; box-shadow: 0 14px 28px rgba(7, 94, 229, .16); }
.mobile-speaker-icon { position: relative; display: block; width: 25px; height: 22px; }
.mobile-speaker-icon::before { content: ""; position: absolute; left: 1px; top: 4px; width: 15px; height: 14px; background: #075ee5; clip-path: polygon(0 32%, 38% 32%, 100% 0, 100% 100%, 38% 68%, 0 68%); }
.mobile-speaker-icon::after { content: ""; position: absolute; left: 17px; top: 4px; width: 6px; height: 14px; border: 2px solid #075ee5; border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0 50% 50% 0; }
.mobile-speaker-toggle.is-earpiece .avatar-round-circle { border-color: #d6a75f; background: #fff4df; box-shadow: 0 14px 28px rgba(138, 83, 0, .14); }
.mobile-speaker-toggle.is-earpiece .mobile-speaker-icon::before { background: #8a5300; }
.mobile-speaker-toggle.is-earpiece .mobile-speaker-icon::after { display: none; }
.mobile-speaker-toggle:hover .avatar-round-circle { transform: translateY(-2px) scale(1.04); }
@media (max-width: 760px) {
  .mobile-speaker-toggle { display: grid; }
  .voice-round-controls, .avatar-round-controls { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
}

#elevenPracticeRecordingStatus[data-state="paused"] {
  border-color: #e5a936;
  background: #fff4df;
  color: #6f4300;
  font-weight: 750;
}

.avatar-mic-icon {
  position: relative;
  width: 14px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
}

.avatar-mic-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  width: 4px;
  height: 11px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.avatar-mic-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 35px;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.avatar-stop-square {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #111827;
}

.avatar-round-label {
  line-height: 1.2;
}

.voice-duration-inline,
.avatar-duration-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0;
}

.voice-duration-inline {
  flex: 0 1 500px;
  min-width: 340px;
}

.avatar-duration-inline {
  flex: 1 1 360px;
}

.avatar-control-rail .avatar-duration-inline {
  display: grid;
  gap: 10px;
  max-width: none;
}

.avatar-control-rail .avatar-duration-inline .session-duration-heading {
  white-space: normal;
}

.avatar-control-rail .avatar-duration-inline .range-row {
  width: 100%;
}

.avatar-control-rail .avatar-credit-message {
  display: block;
  color: var(--blue);
  font-weight: 850;
}

.avatar-picker-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.avatar-picker-panel label {
  margin: 0;
}

.avatar-sandbox-note {
  margin: 0;
  border: 1px solid #f4c36d;
  border-radius: 8px;
  padding: 10px 12px;
  color: #0f172a;
  background: #fff7e6;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.35;
}

.voice-control-rail .session-duration-control.is-fixed-duration,
.avatar-control-rail .session-duration-control.is-fixed-duration,
.avatar-control-rail .avatar-duration-inline.is-fixed-duration {
  display: none;
}

.avatar-catalog-details {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.35;
}

.avatar-catalog-image {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.avatar-catalog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-catalog-details p,
.avatar-catalog-details ul {
  margin: 0;
}

.avatar-catalog-details strong {
  color: var(--blue);
}

.avatar-catalog-note {
  color: var(--muted);
  font-size: 0.78rem;
}

.voice-duration-inline .session-duration-heading,
.avatar-duration-inline .session-duration-heading {
  flex: 0 0 auto;
  white-space: nowrap;
}

.voice-duration-inline .range-row,
.avatar-duration-inline .range-row {
  flex: 1 1 220px;
}

.avatar-top-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #eef2f7;
  font-weight: 800;
  text-align: center;
}

.avatar-top-status.auth-error {
  border-color: var(--red);
  color: #9f1239;
  background: #fff1f2;
}

.avatar-top-status.is-listening {
  border-color: var(--green);
  color: #006b2f;
  background: #eaffef;
  text-transform: uppercase;
}

.avatar-top-status.is-success {
  border-color: #8bd7a6;
  color: #176b3a;
  background: #ecfff2;
}

.avatar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
}

#avatarTab.avatar-running .avatar-stage {
  grid-template-columns: minmax(0, 1fr);
}

.avatar-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  justify-content: start;
  justify-items: stretch;
  align-items: start;
  gap: 14px;
  min-width: 0;
}

.avatar-redesigned-layout {
  align-items: stretch;
}

.avatar-flow-panel,
.avatar-summary-stack {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(32, 44, 72, 0.04);
}

.avatar-flow-panel p {
  max-width: 980px;
  margin: 6px 0 14px;
  color: #0f172a;
  line-height: 1.45;
}

.avatar-top-status[data-state="warning"],
.practice-recording-status[data-state="warning"] {
  border-color: #eab308;
  color: #000;
  background: #fef9c3;
}

#userRoleplayOriginalLanguageLine.active-roleplay-heading { padding: 18px 20px; margin: 0 0 20px; border-left: 5px solid #286ef0; border-radius: 10px; background: #edf4ff; }
.eleven-roleplay-selector { display: grid; gap: 8px; margin: 0 0 16px; border: 1px solid #c8d8ef; border-radius: 10px; padding: 14px 16px; background: #f8fbff; }
.eleven-roleplay-selector label { color: #0b1f4d; font-weight: 850; }
.eleven-roleplay-selector select { width: min(680px, 100%); min-height: 44px; border: 2px solid #2563eb; border-radius: 8px; padding: 8px 36px 8px 11px; background-color: #eff6ff; color: #0b1f4d; font: inherit; font-weight: 750; cursor: pointer; }
.eleven-roleplay-selector select:hover, .eleven-roleplay-selector select:focus-visible { border-color: #075ee5; background-color: #dbeafe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); outline: none; }
.eleven-roleplay-selector select option:checked { color: #fff; background: #2563eb linear-gradient(0deg, #2563eb 0%, #2563eb 100%); }
.eleven-roleplay-load-status { margin: 0 0 14px !important; border-radius: 8px; padding: 10px 12px; font-weight: 800; text-align: center; }
.eleven-roleplay-load-status[data-state="loading"] { border: 1px solid #9a6a3a; background: #efe0cf; color: #6b3f1d; }
.eleven-roleplay-load-status[data-state="loaded"] { border: 1px solid #70c98c; background: #e7f8ed; color: #126332; }
.eleven-roleplay-load-status[data-state="error"] { border: 1px solid #e28a91; background: #fff0f1; color: #9b1e2b; }
#userRoleplayOriginalLanguageLine .active-roleplay-kind { display: block; color: #215daf; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
#userRoleplayOriginalLanguageLine .active-roleplay-name { margin: 8px 0 12px; color: #07162e; font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
#userRoleplayOriginalLanguageLine .active-roleplay-language { margin: 0; color: #435672; font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) {
  #userRoleplayOriginalLanguageLine.active-roleplay-heading { padding: 16px 14px; }
  #userRoleplayOriginalLanguageLine .active-roleplay-name { font-size: 30px; }
}
.user-roleplay-language-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.user-roleplay-language-row span {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
}

.user-roleplay-language-row select {
  width: min(40ch, 100%);
  max-width: 40ch;
  flex: 0 1 40ch;
}

.learner-file-upload-settings {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #cfe0f8;
  border-radius: 10px;
  background: #f8fbff;
}

.learner-file-upload-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.learner-file-upload-title {
  color: var(--blue);
  font-size: 0.96rem;
  font-weight: 650;
}

.learner-file-upload-label,
.learner-file-upload-instructions-label > span {
  color: #0f172a;
  font-size: 0.96rem;
  font-weight: 400;
}

.learner-file-upload-note {
  color: #334155;
  font-size: 0.9rem;
  font-weight: 600;
}

.learner-file-upload-controls {
  display: flex;
  align-items: flex-start;
  column-gap: 10ch;
  row-gap: 10px;
  flex-wrap: wrap;
}

.learner-file-upload-radio-group {
  display: grid;
  gap: 6px;
}

.learner-file-upload-radio-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.learner-file-upload-selector {
  gap: 0;
  width: fit-content;
  overflow: hidden;
  padding: 3px;
  border: 1px solid #bcd3f6;
  border-radius: 999px;
  background: #eef5ff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.learner-file-upload-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 34px;
  cursor: pointer;
  user-select: none;
}

.learner-file-upload-choice input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  inset: 0;
}

.learner-file-upload-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 7px 16px;
  border-radius: 999px;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.learner-file-upload-choice:hover span {
  background: #dceaff;
  transform: translateY(-1px);
}

.learner-file-upload-choice input:checked + span {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24);
}

.learner-file-upload-choice input:focus-visible + span {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 2px;
}

.learner-file-upload-choice input:disabled + span {
  color: #94a3b8;
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.learner-file-upload-instructions-label {
  display: grid;
  gap: 6px;
}

.learner-runtime-upload-panel h3 {
  color: var(--blue);
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 8px;
}

.learner-runtime-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.learner-runtime-upload-filename {
  min-width: 260px;
  max-width: 380px;
  flex: 1 1 260px;
}

#elevenLearnerUploadStatus {
  min-height: 22px;
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

#elevenLearnerUploadBtn.download-action-btn {
  min-height: 40px;
  border: 1px solid #1d4ed8;
  border-radius: 12px;
  padding: 8px 18px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
  font-weight: 700;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

#elevenLearnerUploadBtn.download-action-btn:hover:not(:disabled) {
  color: #fff;
  border-color: #1742b8;
  background: #1d4ed8;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}

#elevenLearnerUploadBtn.download-action-btn:active:not(:disabled) {
  transform: translateY(0);
}

.grey-outline-button,
.grey-outline-danger,
.neutral-confirm-button {
  min-height: 40px;
  border: 1px solid #9ca3af;
  border-radius: 12px;
  background: #f8fafc;
  color: #111827;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.grey-outline-danger {
  color: #d71920;
}

.grey-outline-button:hover:not(:disabled),
.grey-outline-danger:hover:not(:disabled),
.neutral-confirm-button:hover:not(:disabled) {
  background: #eef2f7;
  border-color: #6b7280;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.avatar-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 420px));
  gap: 16px;
  align-items: start;
}

.avatar-choice-section .avatar-picker-panel,
.avatar-choice-section .avatar-tts-panel {
  width: 100%;
}

.voice-choice-section .voice-selector-panel,
.voice-choice-section .eleven-voice-panel,
.voice-choice-section .voice-tts-panel {
  width: 100%;
}

.voice-choice-section .voice-tts-speed-control {
  margin: 0;
}

.voice-choice-section label > span:first-child,
.voice-choice-section .session-duration-heading,
.avatar-choice-section label > span:first-child,
.avatar-choice-section .session-duration-heading,
.avatar-session-section .change-session-time-label,
.voice-session-section .change-session-time-label {
  color: var(--blue);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

#practiceTab .voice-choice-section label > span:first-child,
#practiceTab .voice-choice-section .session-duration-heading {
  color: #07122f;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.voice-session-section .practice-layout {
  align-items: stretch;
  padding: 0;
}

.voice-session-section .voice-control-rail {
  position: static;
  background: #f8fbff;
}

#elevenTab .eleven-control-rail {
  background: var(--soft);
}

.voice-session-section .transcript-status-stack,
.avatar-session-section .avatar-transcript-stack {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 176px);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-height: 100%;
}

#elevenTab .voice-session-section .transcript-status-stack {
  grid-template-columns: minmax(300px, calc(60% + 15ch)) minmax(150px, 176px);
  grid-template-rows: auto auto minmax(110px, 1fr) auto;
  column-gap: 18px;
  justify-content: start;
}

#elevenTab .voice-session-section .transcript-status-stack .voice-practice-status {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
}

#elevenTab .voice-session-section .transcript-status-stack .voice-check-meter {
  width: min(50%, 520px);
  flex: 1 1 50%;
}

#elevenTab .voice-session-section .transcript-status-stack .voice-check-meter-row {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.voice-check-meter-toggle {
  flex: 0 0 auto;
  border: 1px solid #b7d1fb;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 94, 255, 0.08);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.voice-check-meter-toggle:hover {
  background: #eff6ff;
  border-color: #005eff;
  color: #111827;
  transform: translateY(-1px);
}

.voice-check-meter-row.is-collapsed {
  justify-content: center;
}

.voice-check-meter-row.is-collapsed .voice-check-meter {
  display: none;
}

#elevenTab .voice-session-section .transcript-status-stack .voice-mic-status-indicator {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
}

#elevenTab .voice-session-section .transcript-status-stack .agent-transcript-panel {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  justify-self: stretch;
}

#elevenTab .voice-session-section .transcript-status-stack .translated-agent-transcript-panel {
  grid-row: 5;
}

#elevenTab .voice-session-section .transcript-status-stack .post-recording-next-step {
  grid-column: 2;
  grid-row: 1 / span 4;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  min-height: 172px;
  height: auto;
}

.voice-check-meter {
  margin: 0 0 6px;
}

.voice-check-meter-track {
  height: 12px;
  overflow: hidden;
  border: 1px solid #b7d1fb;
  border-radius: 999px;
  background: #e7edf8;
}

.voice-check-meter-track span {
  display: block;
  width: 0;
  height: 100%;
  background: #2f6fed;
  transition: width 80ms linear;
}

.voice-session-section .voice-mic-status-indicator,
.avatar-session-section .voice-mic-status-indicator {
  margin: 0 auto;
}

.voice-summary-stack .avatar-analysis-focus,
.voice-summary-stack .practice-scenario-summary {
  grid-column: auto;
  grid-row: auto;
}

.avatar-tts-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.avatar-choice-section .avatar-tts-speed-control {
  margin: 0;
}

.avatar-tts-panel p {
  margin: 0;
  color: #33415c;
  font-size: 0.92rem;
  line-height: 1.45;
}

.avatar-readonly-value {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  font-weight: 400;
}

.avatar-session-grid {
  display: grid;
  grid-template-columns: minmax(310px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.avatar-session-section .avatar-control-rail {
  position: static;
  display: grid;
  gap: 12px;
  max-width: none;
  margin-top: 66px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #f8fbff;
}

.avatar-session-section .avatar-stage {
  grid-template-rows: auto auto auto;
  align-items: start;
}

.avatar-summary-stack {
  display: grid;
  gap: 12px;
}

.avatar-summary-stack .avatar-analysis-focus,
.avatar-summary-stack #avatarScenarioSummary {
  grid-column: auto;
  grid-row: auto;
}

.avatar-transcript-stack {
  display: contents;
}

#avatarStatusBar {
  position: static;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  width: 100%;
}

.avatar-practice-status {
  margin: 0;
  align-self: start;
  border-radius: 8px;
}

.detached-practice-status {
  position: sticky;
  top: 8px;
  z-index: 5;
}

.avatar-stage #avatarScenarioSummary {
  grid-column: 1;
  grid-row: 5;
}

.avatar-video-placeholder {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 400px;
  justify-self: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08)),
    #fff;
  color: var(--muted);
  text-align: center;
}

#avatarMicStatusIndicator {
  grid-column: 1;
  grid-row: 3;
  margin: 0 auto 1.5rem;
}

.scenario-panel-summary::after {
  display: none !important;
  content: none !important;
}

#avatarLocalScenarioLanguage,
#voiceLocalScenarioLanguage {
  font-weight: 800;
  color: #0f172a;
}

#avatarLocalScenarioLanguage {
  color: #0f172a;
  font-weight: 800;
  text-align: center;
}

.avatar-video {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.avatar-video-placeholder.has-stream .avatar-video {
  display: block;
}

.avatar-video-placeholder.has-stream strong,
.avatar-video-placeholder.has-stream span {
  display: none;
}

.avatar-video-placeholder strong {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: 1.25rem;
}

.avatar-video-placeholder span {
  position: relative;
  z-index: 1;
}

.avatar-video-placeholder.is-started {
  border-color: var(--green);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(37, 99, 235, 0.1)),
    #f6fff8;
}

.avatar-video-placeholder.is-started strong {
  color: #006b2f;
}

.avatar-preview-panel {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #000;
}

.avatar-preview-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: #000;
}

.avatar-stage .live-transcript {
  min-height: 160px;
  max-height: 260px;
  border-radius: 0 0 8px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.avatar-stage .live-transcript .avatar-agent-line {
  margin: 1em 0;
  color: var(--ink);
}

.avatar-stage .live-transcript .avatar-agent-line strong {
  font-weight: 800;
}

.avatar-stage .live-transcript .avatar-user-line {
  color: var(--blue);
}

.avatar-stage .live-transcript .avatar-interim-line {
  color: var(--blue);
  opacity: 0.78;
}

.avatar-analysis-focus {
  grid-column: 1;
  grid-row: 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.avatar-analysis-focus h3 {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 1rem;
}

.avatar-analysis-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.avatar-analysis-focus-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid #e7eefb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.avatar-analysis-focus-grid strong {
  color: var(--ink);
}

.avatar-analysis-focus-grid span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.9rem;
}

.avatar-stage .practice-scenario-summary {
  grid-column: 1;
  grid-row: 5;
  width: 100%;
  margin-top: 0;
}

.avatar-transcript-measures {
  grid-row: 4;
}

.transcript-measures-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saved-recordings-panel {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.recordings-management-panel {
  width: 100%;
  max-width: none;
}

.saved-recordings-panel h3 {
  margin: 0;
  color: var(--blue);
  font-size: 0.95rem;
}

.saved-recordings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.recordings-top-delete-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}

.saved-recordings-header button {
  min-height: 32px;
  padding: 0 12px;
  color: #b42318;
  border-color: #fecaca;
  background: #fff7f7;
  font-size: 0.84rem;
}

.saved-recordings-header .recordings-top-delete-btn {
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.saved-recordings-header .recordings-top-delete-btn:not(:disabled):hover {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
}

.saved-recordings-header .recordings-top-delete-btn:not(:disabled):active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

.saved-recordings-header .recordings-top-delete-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.recordings-top-delete-hint {
  margin: 0;
  color: #33415c;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: right;
}

.recordings-bulk-delete-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 10px;
  background: #fff7f7;
}

.recordings-bulk-delete-controls span {
  color: #b42318;
  font-weight: 800;
  font-size: 0.86rem;
}

.recordings-bulk-delete-controls button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.84rem;
}

.recordings-bulk-delete-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.recordings-bulk-delete-status:empty {
  display: none;
}

.recordings-count-status {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.recording-load-status {
  min-height: 22px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.recording-load-status:empty {
  display: none;
}

.recording-load-status[data-state="processing"] {
  color: #8a5a00;
}

.recording-load-status.is-loading-blink,
.voice-status.is-loading-blink {
  animation: recording-load-status-blink 0.85s ease-in-out infinite;
}

.recording-load-status[data-state="completed"] {
  color: #176b3a;
}

.recording-load-status[data-state="error"] {
  color: var(--red);
}

.transcript-content-column {
  min-width: 0;
}

.transcript-regenerate-status {
  margin: 0 0 8px;
  font-size: inherit;
}

@keyframes recording-load-status-blink {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

.recordings-select-all-checkbox {
  margin: 0;
}

.saved-recordings-list {
  display: grid;
  gap: 8px;
}

.admin-subtabs,
.admin-user-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.admin-subtab,
.admin-user-tab {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
  color: var(--muted);
  background: #f7f9fc;
  font-size: 0.95rem;
  font-weight: 650;
}

.admin-subtab.active,
.admin-user-tab.active {
  color: var(--blue);
  background: #fff;
}

.admin-user-delete-tab.active {
  color: #b42318;
}

.admin-subpanel,
.admin-user-tab-panel {
  display: none;
}

.admin-subpanel.active,
.admin-user-tab-panel.active {
  display: block;
}

#assignmentsTab {
  align-content: start;
  gap: 10px;
}

#adminTab {
  align-content: start;
  gap: 10px;
}

#adminTab > .tab-intro-card {
  align-self: start;
  min-height: 0;
  margin-bottom: 0;
  padding: 12px 16px;
}

#adminTab > .tab-intro-card p {
  max-width: 1120px;
  line-height: 1.45;
}

#assignmentsTab > .tab-intro-card {
  align-self: start;
  min-height: 0;
  margin-bottom: 0;
  padding: 12px 16px;
}

#assignmentsTab > .tab-intro-card p {
  max-width: 1120px;
  line-height: 1.45;
}

.assignment-user-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 2px;
  color: #0f172a;
}

.assignment-user-context label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #005bff;
  font-weight: 700;
}

.assignment-user-context select {
  width: min(280px, 48vw);
  min-height: 34px;
}

.assignment-workspace-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 14px;
}

.assignment-workspace-menu-toggle {
  display: none;
}

.assignment-workspace-tab {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
  color: var(--muted);
  background: #f7f9fc;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.assignment-workspace-tab:hover:not(.active) {
  color: var(--blue);
  background: #edf5ff;
  border-color: #9cc4ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
}

.assignment-workspace-tab.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.assignment-workspace-tab.active:hover {
  color: #fff;
  background: #1d5fd6;
  border-color: #1d5fd6;
  transform: translateY(-1px);
}

.assignment-workspace-panel {
  display: none;
  align-content: start;
  gap: 12px;
}

.assignment-workspace-panel.active {
  display: grid;
}

.assignment-eleven-voice-section {
  margin-top: 14px;
}

.menu-access-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.menu-access-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.menu-access-table th,
.menu-access-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 12px;
  color: var(--ink);
  text-align: center;
  vertical-align: middle;
}

.menu-access-table tr:last-child th,
.menu-access-table tr:last-child td {
  border-bottom: 0;
}

.menu-access-table th:last-child,
.menu-access-table td:last-child {
  border-right: 0;
}

.menu-access-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  min-width: 150px;
  color: var(--blue);
  text-align: left;
  background: #f7fbff;
}

.menu-access-table td {
  min-width: 120px;
  font-size: 0.92rem;
}

.menu-access-input {
  width: 70px;
  margin: 0 auto;
  padding: 9px 10px;
  text-align: center;
}

.menu-access-input:disabled {
  color: #64748b;
  background: #eef2f7;
  cursor: not-allowed;
}

.delete-user-panel {
  max-width: 560px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 18px;
  background: #fff7f7;
}

.delete-user-panel h3 {
  margin: 0 0 8px;
  color: #b42318;
  font-size: 1.05rem;
}

.delete-user-panel p {
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 750;
}

.delete-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.danger-button {
  border-color: #dc2626;
  color: #fff;
  background: #dc2626;
}

.danger-button:hover {
  border-color: #991b1b;
  background: #b91c1c;
}

.admin-users-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.admin-users-controls {
  display: grid;
  gap: 10px;
  margin: 10px 0 8px;
}

.admin-users-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.admin-users-filter-row > strong {
  align-self: center;
  color: #0f2a55;
}

.admin-users-filter-row label {
  display: grid;
  flex: 0 0 25ch;
  gap: 5px;
  margin: 0;
  color: #005bff;
  font-weight: 700;
}

.admin-users-filter-row input {
  width: 25ch;
  max-width: 100%;
}

.admin-users-filter-row .compact-search-btn {
  flex: 0 0 auto;
  width: fit-content;
  min-width: fit-content;
  padding-inline: 18px;
  white-space: nowrap;
  align-self: end;
}

.admin-company-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 12px 0;
}

.admin-company-form label {
  margin: 0;
}

.company-wide-select {
  width: min(40ch, 100%);
}

.admin-companies-table tr.is-alt td {
  background: #f7f9fc;
}

.assigned-scenario-readonly .scenario-fields input:disabled,
.assigned-scenario-readonly .scenario-fields textarea:disabled,
.assigned-scenario-readonly .scenario-fields select:disabled {
  color: #10213d;
  background: #f8fbff;
  opacity: 1;
}

.shared-assignment-roleplay-notice { margin: 12px 0 16px; padding: 14px 18px; border: 1px solid #69a7f5; border-left: 5px solid #1478e8; border-radius: 8px; background: #edf6ff; color: #0b376f; font-weight: 700; }
.plain-user-role .shared-assignment-roleplay-notice {
  padding: 10px 12px;
  border: 1px solid #f2bd72;
  border-left-width: 1px;
  border-radius: 9px;
  background: #fff4df;
  color: #172033;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}
.assignment-only-note { display: block; margin-bottom: 2px; color: #7b879a; font-size: 12px; font-style: italic; font-weight: 400; }
.plain-user-role .assignment-only-note { display: block; }
.plain-user-role .settings-english-translation-option,
.plain-user-role .minimum-score-settings { display: none !important; }
.assignment-reminder-row { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.assignment-search-row .send-assignment-reminders-btn { margin-left: 22px; }
.send-assignment-reminders-btn { white-space: nowrap; }

#assignmentsClearBtn,
#roleplayStatusClearBtn,
#sendAssignmentRemindersBtn,
#sendRoleplayStatusRemindersBtn {
  min-height: 42px;
  border: 1px solid #606975;
  border-radius: 6px;
  padding: 0 16px;
  color: #27313d;
  background: #eef0f2;
  box-shadow: none;
  font-weight: 700;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

#assignmentsClearBtn:hover:not(:disabled),
#roleplayStatusClearBtn:hover:not(:disabled),
#sendAssignmentRemindersBtn:hover:not(:disabled),
#sendRoleplayStatusRemindersBtn:hover:not(:disabled) {
  border-color: #343b45;
  color: #111827;
  background: #dfe3e7;
  box-shadow: 0 4px 10px rgba(31, 41, 55, 0.16);
  transform: translateY(-1px);
}

.shared-roleplay-blob-mode .scenario-fields > :not(input[type="hidden"]):not(.scenario-save-status):not(.scenario-save-roleplay-callout):not(.scenario-selector-prompt):not(.scenario-file-bar):not(.shared-assignment-roleplay-notice):not(.scenario-save-as-panel):not(.shared-roleplay-html-blob) {
  display: none !important;
}

.scenario-selector-prompt {
  margin: 18px 0 8px;
  color: #000;
  font-weight: 700;
}

.intro-roleplay-visibility {
  color: #000;
  font-weight: 800;
}

.shared-roleplay-html-blob {
  margin-top: 18px;
}

.assigned-roleplay-summary-view,
.assigned-roleplay-analysis-view {
  margin-bottom: 12px;
}

.assigned-roleplay-analysis-view .assignment-analysis-summary {
  margin-bottom: 6px;
}

.admin-user-list,
.admin-user-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.admin-user-list {
  overflow-x: auto;
}

.admin-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.admin-users-table th,
.admin-users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #d8e4f5;
  text-align: left;
}

.admin-users-table th {
  background: #e8f0fd;
  color: #0f2a55;
  font-weight: 700;
}

.admin-users-table-row.is-alt td {
  background: #f7f9fc;
}

.admin-users-table-row.active td {
  background: #edf4ff;
}

.admin-users-detail-row > td {
  padding: 12px;
  background: #f8fbff;
  border-bottom: 1px solid #bcd3f3;
}

.admin-users-detail-row .admin-user-detail {
  width: 100%;
  box-sizing: border-box;
}

.admin-users-table td {
  vertical-align: top;
}

.admin-user-name-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  color: var(--blue);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.admin-user-name-link:hover {
  color: #155be8;
  text-decoration: underline;
  background: transparent;
}

.admin-users-row-status {
  color: #176b3a;
  font-weight: 700;
}

.admin-users-row-status:empty::after {
  content: "";
}

.admin-users-row-status:not(:empty) {
  min-width: 120px;
}

.admin-users-row-status[data-state="error"] {
  color: var(--red);
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.admin-time-users-list {
  display: grid;
  gap: 10px;
  max-width: 1180px;
}

.admin-time-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px 128px 130px 128px 86px;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.admin-time-row strong {
  align-self: center;
  color: var(--ink);
}

.admin-time-row label {
  margin: 0;
}

.admin-time-row button {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 6px 14px rgba(40, 110, 240, 0.18);
  font-weight: 750;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.admin-time-row button:hover {
  border-color: #1558d6;
  background: #1558d6;
  box-shadow: 0 10px 22px rgba(40, 110, 240, 0.28);
  transform: translateY(-1px);
}

.admin-time-row button:active,
.admin-time-row button.is-updating {
  border-color: #0f47b5;
  background: #0f47b5;
  box-shadow: inset 0 2px 5px rgba(11, 36, 89, 0.34);
  transform: translateY(1px);
}

.admin-time-row-status {
  grid-column: 2 / -1;
  min-height: 20px;
  margin: -2px 0 0;
  color: #8a5b00;
  font-size: 0.84rem;
  font-weight: 750;
}

.admin-time-row-status[data-state="success"] {
  color: #176b3a;
}

.admin-time-row-status[data-state="error"] {
  color: var(--red);
}

.admin-user-select {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 0;
  padding: 2px 4px;
  text-align: left;
  background: transparent;
}

.admin-user-select:hover {
  color: inherit;
  background: transparent;
}

.admin-user-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  width: auto;
  min-width: 74px;
  padding: 0 12px;
  border-color: var(--line);
  color: var(--red);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-user-logout:hover:not(:disabled) {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
  box-shadow: 0 8px 18px rgba(215, 25, 32, 0.2);
  transform: translateY(-1px);
}

.admin-user-logout:active:not(:disabled) {
  transform: translateY(0);
}

.admin-user-logout:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.admin-user-logout-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 130px;
}

.admin-user-logout-status {
  min-height: 16px;
  margin: 0;
  color: #7a4b00;
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
}

.admin-user-logout-status[data-state="success"] {
  color: #176b3a;
  font-weight: 700;
}

.admin-user-logout-status[data-state="error"] {
  color: var(--red);
  font-weight: 700;
}

.admin-user-email-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-user-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 147, 89, 0.14);
}

.admin-user-row + .admin-user-row {
  margin-top: 8px;
}

.admin-user-row.active {
  border-color: var(--blue);
  background: #edf4ff;
}

.admin-user-row span {
  color: var(--ink);
}

.admin-user-row strong {
  color: var(--blue);
  font-size: 0.84rem;
}

.admin-user-row small {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-user-workspace {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.admin-recording-select {
  width: 100%;
  text-align: left;
}

.admin-scenario-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(320px, 58ch);
  gap: 16px;
  align-items: start;
}

.admin-scenario-list,
.admin-scenario-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.admin-scenario-summary {
  max-width: 58ch;
  overflow: hidden;
}

.admin-scenario-list h3,
.admin-scenario-summary h3 {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 0.95rem;
}

.admin-scenario-select {
  width: 100%;
  text-align: left;
}

.admin-scenario-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(190px, 230px) auto;
  gap: 8px;
  align-items: center;
}

.admin-scenario-header {
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 4px 4px;
}

.admin-scenario-owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 0.9rem;
}

.admin-scenario-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.admin-scenario-row + .admin-scenario-row {
  margin-top: 8px;
}

.admin-scenario-import,
.admin-scenario-export {
  min-height: 34px;
  padding: 0 12px;
  border-color: var(--blue);
  color: var(--blue);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.admin-scenario-import:hover,
.admin-scenario-export:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.admin-scenario-import:active,
.admin-scenario-export:active {
  transform: translateY(1px);
  box-shadow: none;
}

.admin-scenario-export {
  background: var(--blue);
  color: #fff;
}

.admin-user-detail-status {
  min-height: 24px;
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
}

.admin-user-detail-status[data-state="processing"],
.admin-scenario-export-status[data-state="processing"] {
  color: #8a5a00;
}

.admin-user-detail-status[data-state="success"],
.admin-scenario-export-status[data-state="success"] {
  color: #006b25;
}

.admin-user-detail-status[data-state="error"],
.admin-scenario-export-status[data-state="error"] {
  color: #d71920;
}

.admin-scenario-export-field {
  display: grid;
  gap: 8px;
  margin: 16px 0 8px;
}

.admin-scenario-export-field span {
  color: var(--blue);
  font-weight: 700;
}

.admin-scenario-export-field input {
  width: min(100%, 360px);
  min-height: 42px;
  border: 1px solid #c9d7ef;
  border-radius: 10px;
  padding: 0 14px;
  font: inherit;
}

.admin-scenario-export-confirm {
  min-width: 120px;
  min-height: 42px;
  border: 1px solid #1f9d55;
  border-radius: 10px;
  background: #1f9d55;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.admin-scenario-export-confirm:hover {
  background: #168043;
  box-shadow: 0 8px 18px rgba(31, 157, 85, 0.18);
  transform: translateY(-1px);
}

.admin-scenario-export-confirm:active {
  transform: translateY(1px);
  box-shadow: none;
}

.admin-scenario-export-status {
  min-height: 22px;
  margin: 6px 0 0;
  font-weight: 700;
}

.admin-summary-row {
  border-top: 1px solid #edf0f5;
  padding: 12px 0;
}

.admin-summary-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.admin-summary-row strong {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 0.88rem;
}

.admin-summary-row p {
  margin: 0;
  white-space: pre-wrap;
}

.saved-recording-row {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1.25fr) minmax(160px, 1fr) minmax(110px, 0.7fr) minmax(90px, 0.55fr) auto minmax(170px, auto);
  gap: 6px;
  align-items: center;
  font-size: 1rem;
}

.saved-recording-row.has-owner {
  grid-template-columns: 36px minmax(180px, 1.2fr) minmax(150px, 0.95fr) minmax(105px, 0.62fr) minmax(90px, 0.5fr) auto minmax(150px, 0.9fr) minmax(170px, auto);
}

.saved-recording-row-header {
  padding: 0 0 2px;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 650;
  text-align: left;
}

.saved-recording-row-header span {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
}

.saved-recording-number {
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 34px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.saved-recording-select,
.saved-recording-delete,
.saved-recording-rename {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.95rem;
}

.saved-recording-select {
  overflow: hidden;
  justify-content: flex-start;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-recording-select.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.saved-recording-select.transcript-only {
  color: var(--muted);
  background: #f8fafc;
}

.saved-recording-select.transcript-only.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.saved-recording-checkbox {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.saved-recording-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.saved-recording-status {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #c7d7ee;
  border-radius: 999px;
  color: #061334;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 650;
  white-space: nowrap;
}

.saved-recording-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.saved-recording-actions-header {
  grid-column: auto;
}

.saved-recording-rename {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.saved-recording-rename:hover {
  background: #1d4ed8;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}

.saved-recording-rename:active {
  transform: translateY(0) scale(0.98);
}

.saved-recording-delete:not(:disabled) {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff5f5;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.08);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.saved-recording-delete:not(:disabled):hover {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
  transform: translateY(-1px);
}

.saved-recording-delete:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

.saved-recording-delete:disabled {
  color: #94a3b8;
  border-color: #d8e4f5;
  background: #f8fafc;
  box-shadow: none;
}

.saved-recording-status.is-completed {
  color: #047857;
  border-color: #bbf7d0;
  background: #ecfdf5;
}

.saved-recording-status.is-rejected {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.saved-recording-status.is-submitted {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.saved-recording-owner {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 5px 8px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.saved-recording-meta {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 5px 8px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
}

.app-modal-backdrop[hidden] {
  display: none;
}

.app-confirm-modal {
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.app-confirm-modal-wide {
  width: min(980px, 100%);
  max-height: 86vh;
  overflow: auto;
}

.rename-recording-modal {
  width: min(520px, 100%);
}

.rename-recording-field {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 1rem;
}

.rename-recording-field span {
  color: var(--blue);
  font-weight: 650;
}

.rename-recording-field input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
}

.rename-recording-status {
  min-height: 22px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.rename-recording-status[data-state="processing"] {
  color: #8a5a00;
}

.rename-recording-status[data-state="error"] {
  color: var(--red);
}

.rename-recording-save {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.rename-recording-save:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.rename-recording-save:active {
  transform: translateY(0) scale(0.98);
}

.rename-recording-cancel {
  color: #b42318;
  border-color: #fecaca;
  background: #fff7f7;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.rename-recording-cancel:hover {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
}

.rename-recording-cancel:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

.app-confirm-modal h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
}

.app-confirm-modal p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.app-confirm-modal-wide p {
  color: var(--ink);
}

.assignment-analysis-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 10px;
  background: #fff;
}

.assignment-analysis-summary h4 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 0.98rem;
}

.assignment-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.assignment-analysis-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.assignment-analysis-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: #f8fbff;
}

.assignment-analysis-card strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.assignment-analysis-card span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.app-confirm-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: -2px 0 2px;
}

.saved-recording-status.is-warning {
  color: #854d0e;
  border-color: #eab308;
  background: #fef9c3;
}

.app-confirm-actions button {
  min-width: 92px;
}

.delete-assignment-confirm-button { border: 1px solid #a9151c; color: #a9151c; background: #fff0f1; }
.delete-assignment-confirm-button:hover { border-color: #d71920; color: #fff; background: #d71920; }
.delete-assignment-cancel-button { border: 1px solid #138a43; color: #fff; background: #18a957; }
.delete-assignment-cancel-button:hover { border-color: #0d6d34; color: #fff; background: #118744; }

.roleplay-popup-close-button {
  min-width: 104px;
  border: 1px solid #6b7280;
  border-radius: 8px;
  padding: 10px 18px;
  color: #dc2626;
  background: #f8fafc;
  font-weight: 400;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.roleplay-popup-close-button:hover {
  border-color: #4b5563;
  background: #f1f5f9;
  color: #b91c1c;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.roleplay-popup-close-button:active {
  box-shadow: 0 5px 10px rgba(15, 23, 42, 0.08);
  transform: translateY(1px);
}

.roleplay-popup-close-button-top {
  min-width: 96px;
  padding: 8px 16px;
}

.roleplay-popup-download-button {
  min-width: 124px;
  border: 1px solid #0b62ff;
  border-radius: 8px;
  padding: 10px 18px;
  color: #fff;
  background: #2f7df6;
  font-weight: 400;
  box-shadow: 0 8px 18px rgba(47, 125, 246, 0.18);
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.roleplay-popup-download-button:hover {
  background: #155bd3;
  box-shadow: 0 12px 24px rgba(47, 111, 237, 0.24);
  transform: translateY(-1px);
}

.roleplay-popup-download-button:active {
  box-shadow: 0 5px 12px rgba(47, 111, 237, 0.16);
  transform: translateY(1px);
}

.roleplay-popup-download-button-top {
  min-width: 120px;
  padding: 8px 16px;
}

#appConfirmOkBtn {
  order: 1;
}

#appConfirmCancelBtn {
  order: 2;
}

#appConfirmCancelBtn.confirm-cancel-green {
  border-color: #16a34a;
  color: #fff;
  background: #16a34a;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

#appConfirmCancelBtn.confirm-cancel-green:hover {
  border-color: #15803d;
  background: #15803d;
  box-shadow: 0 10px 22px rgba(21, 128, 61, 0.2);
  transform: translateY(-1px);
}

#appConfirmCancelBtn.confirm-cancel-green:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 5px 12px rgba(21, 128, 61, 0.18);
}

#appConfirmCancelBtn.confirm-cancel-grey {
  border-color: #4b5563;
  color: #111827;
  background: #f3f4f6;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

#appConfirmCancelBtn.confirm-cancel-grey:hover {
  border-color: #374151;
  background: #e5e7eb;
  box-shadow: 0 10px 22px rgba(55, 65, 81, 0.16);
  transform: translateY(-1px);
}

#appConfirmCancelBtn.confirm-cancel-grey:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 5px 12px rgba(55, 65, 81, 0.14);
}

#settingsTab {
  overflow: auto;
}

.settings-mirror {
  display: grid;
  grid-template-columns: minmax(0, 1360px);
  justify-content: stretch;
  gap: 16px;
  padding-bottom: 24px;
}

.settings-mirror .panel-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(255, 255, 255, 1) 180px),
    #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.05);
}

.settings-mirror .scenario-panel-section {
  padding-top: 8px;
}

.scenario-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1fr);
  gap: 22px;
  align-items: start;
}

.scenario-library {
  position: sticky;
  top: 12px;
  align-self: start;
  margin-top: 39px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #f8fbff;
  box-shadow: 0 10px 24px rgba(32, 44, 72, 0.06);
}

.scenario-list {
  width: 100%;
  height: 42px;
  border: 1px solid #d4dfef;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 400;
}

.scenario-file-bar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(260px, 420px);
  gap: 10px;
  align-items: end;
  justify-content: start;
}

.scenario-file-menu-wrap {
  position: relative;
}

.scenario-file-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  min-width: 190px;
  height: 42px;
  border: 1px solid #cdd8e8;
  border-radius: 8px;
  padding: 0 16px;
  color: var(--ink);
  background: linear-gradient(180deg, #f9fbff, #e8edf5);
  box-shadow: 0 3px 8px rgba(32, 44, 72, 0.1);
  font-size: 0.95rem;
  font-weight: 400;
}

.scenario-file-menu-btn:hover,
.scenario-file-menu-btn[aria-expanded="true"] {
  border-color: #9bbcf8;
  background: linear-gradient(180deg, #ffffff, #e6f0ff);
}

.scenario-file-caret {
  width: 0;
  height: 0;
  border-top: 5px solid #32415c;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.scenario-file-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 0;
  min-width: 230px;
  border: 1px solid #d4dfef;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

.scenario-file-menu[hidden] {
  display: none;
}

.scenario-file-menu .scenario-action-open {
  display: none;
}

.scenario-picker-inline {
  display: grid;
  gap: 0;
  align-items: center;
  justify-content: stretch;
}

.scenario-picker-inline[hidden] {
  display: grid;
}

.scenario-library .voice-status,
.scenario-picker-inline .voice-status {
  margin: 0 0 7px;
  color: #0f2a55;
  font-size: 0.9rem;
  font-weight: 800;
}

.scenario-picker-inline .voice-status {
  display: none;
  margin: 0;
}

.scenario-library .voice-status[hidden],
.scenario-picker-inline .voice-status[hidden] {
  display: none;
}

.scenario-fields {
  display: grid;
  gap: 18px;
  justify-self: stretch;
  max-width: 100%;
}

.settings-scenario-preview {
  position: sticky;
  top: 116px;
  align-self: start;
  max-height: calc(100vh - 170px);
  overflow: auto;
}

.settings-scenario-preview.practice-scenario-summary {
  margin-top: 144px;
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(32, 44, 72, 0.06);
}

.scenario-field-actions,
.scenario-file-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.scenario-file-menu {
  display: grid;
  gap: 3px;
  align-items: stretch;
}

.scenario-save-as-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.scenario-save-as-panel[hidden] {
  display: none;
}

.scenario-save-as-panel input {
  margin: 0;
}

.scenario-save-as-panel button {
  min-width: 92px;
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.scenario-save-as-panel #cancelSaveAsScenarioBtn,
.scenario-save-as-panel #main_cancelSaveAsScenarioBtn {
  border-color: #ffd3d8;
  color: #b42318;
  background: #fff8f8;
}

.scenario-save-as-panel #cancelSaveAsScenarioBtn:hover,
.scenario-save-as-panel #main_cancelSaveAsScenarioBtn:hover {
  border-color: #f8a8b1;
  color: #9f1239;
  background: #fff1f2;
}

.scenario-new-help {
  margin: -2px 0 2px;
  max-width: 920px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
}

.scenario-new-help[hidden] {
  display: none;
}

.scenario-save-status {
  min-height: 20px;
  margin: 0;
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.35;
}

.scenario-fields > label,
.scenario-fields > .scenario-basics-panel,
.scenario-fields > .roleplay-panel,
.scenario-fields > .conversation-settings-panel,
.scenario-fields > .measured-settings-panel,
.scenario-fields > .scenario-save-as-panel {
  padding: 16px;
  border: 1px solid #dbe6f6;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(232, 245, 255, 0.98), rgba(242, 249, 255, 0.98)),
    #edf7ff;
  box-shadow: 0 8px 20px rgba(32, 44, 72, 0.045);
}

.scenario-basics-panel {
  display: grid;
  gap: 16px;
  border-color: #d9e1ec;
  background:
    linear-gradient(180deg, rgba(245, 247, 250, 0.98), rgba(250, 251, 253, 0.98)),
    #f4f6f9;
}

.scenario-fields > .roleplay-panel {
  border-color: #d8e8d4;
  background:
    linear-gradient(180deg, rgba(240, 250, 238, 0.98), rgba(248, 253, 247, 0.98)),
    #f0faee;
}

.scenario-fields > .conversation-settings-panel {
  border-color: #eadcc4;
  background:
    linear-gradient(180deg, rgba(252, 245, 235, 0.98), rgba(255, 251, 246, 0.98)),
    #fbf4e8;
}

.scenario-fields > .measured-settings-panel {
  border-color: #cce9e4;
  background:
    linear-gradient(180deg, rgba(235, 250, 248, 0.98), rgba(247, 253, 252, 0.98)),
    #eefaf8;
}

.scenario-save-roleplay-callout {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0 0 14px;
}

.scenario-save-roleplay-callout p {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.45;
}

.scenario-save-roleplay-btn {
  justify-self: start;
  min-width: 170px;
  border-radius: 999px;
  font-weight: 650;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

#saveMenuAccessSettingsBtn {
  margin-top: 14px;
  border-radius: 999px;
  font-weight: 650;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.scenario-collapse-panel {
  display: grid;
  gap: 16px;
  position: relative;
}

.scenario-panel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.scenario-panel-control-btn,
.scenario-panel-toggle-btn {
  border: 1px solid #cfe0ff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #1558d6;
  font-size: 0.86rem;
  font-weight: 650;
  padding: 6px 14px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.scenario-panel-control-btn:hover,
.scenario-panel-toggle-btn:hover {
  border-color: #2f6df6;
  background: #f5f9ff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}

.scenario-panel-control-btn:active,
.scenario-panel-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.scenario-panel-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-right: 96px;
  margin: -2px 0 2px;
  color: #38445a;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.scenario-panel-toggle-btn {
  position: absolute;
  top: 12px;
  right: 14px;
}

.scenario-panel-summary::-webkit-details-marker {
  display: none;
}

.scenario-panel-summary::before {
  content: "";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 6px 14px rgba(32, 44, 72, 0.12);
  font-size: 0.84rem;
  font-weight: 850;
}

.scenario-basics-panel > .scenario-panel-summary::before {
  background: #2f6df6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3Ccircle cx='8' cy='7' r='1.7' fill='white'/%3E%3Ccircle cx='15' cy='12' r='1.7' fill='white'/%3E%3Ccircle cx='11' cy='17' r='1.7' fill='white'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.roleplay-panel > .scenario-panel-summary::before {
  background: #189b62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14v9H9l-4 3V6z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.conversation-settings-panel > .scenario-panel-summary::before {
  background: #b76a16 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14a6 6 0 1 1 4 4l-4 2 1.2-3.8A5.8 5.8 0 0 1 6 14z'/%3E%3Cpath d='M15 7l.7 1.5L17 9l-1.3.5L15 11l-.7-1.5L13 9l1.3-.5L15 7z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.measured-settings-panel > .scenario-panel-summary::before {
  background: #168a82 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V9M12 19V5M19 19v-7'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.scenario-panel-summary::after {
  content: "⌄";
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: 1px solid #cfe0ff;
  border-radius: 999px;
  color: #38445a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  transition: transform 0.16s ease;
}

.scenario-collapse-panel:not([open]) .scenario-panel-summary::after {
  transform: rotate(-90deg);
}

.scenario-panel-body {
  display: grid;
  gap: 18px;
}

.scenario-panel-body > label {
  padding: 16px;
  border: 1px solid #dbe6f6;
  border-radius: 14px;
  background: #f3f9ff;
  box-shadow: 0 8px 20px rgba(32, 44, 72, 0.045);
}

.scenario-fields > label > span:first-child,
.scenario-basics-panel > label > span:first-child,
.scenario-panel-body > label > span:first-child,
.scenario-fields .language-select-field > span:first-child,
.scenario-fields .language-code-label,
.scenario-fields .ai-agent-voice-field > span:first-child,
.scenario-fields .roleplay-type-label {
  color: #38445a;
  font-size: 0.95rem;
  font-weight: 650;
}

.scenario-basics-panel > .voice-status {
  margin: -4px 0 0;
}

.scenario-fields input,
.scenario-fields select,
.scenario-fields textarea {
  margin-top: 8px;
}

.scenario-fields #scenarioNameInput,
.scenario-fields #main_scenarioNameInput {
  width: min(100%, 42ch);
}

.scenario-fields .scenario-label-row + textarea,
.scenario-fields .scenario-label-row + input,
.scenario-fields .scenario-label-row + select {
  margin-top: 10px;
}

.scenario-save-status[data-state="processing"] {
  color: #8a5b00;
}

.scenario-save-status[data-state="success"] {
  color: #176b3a;
}

.scenario-save-status[data-state="error"] {
  color: var(--red);
}

.scenario-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.scenario-field-mode {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  color: var(--blue);
  font-weight: 800;
}

.scenario-field-mode span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.agent-role-field .scenario-label-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: center;
  row-gap: 10px;
}

.agent-role-field .scenario-field-mode {
  grid-column: 1 / -1;
  justify-self: end;
}

.agent-role-field .product-document-actions {
  justify-self: end;
}

.scenario-regenerate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-color: #b8d5ff;
  border-radius: 999px;
  padding: 0 13px 0 9px;
  color: #1558d6;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  box-shadow: 0 6px 14px rgba(40, 110, 240, 0.12);
  font-size: 0.83rem;
  font-weight: 850;
}

.scenario-regenerate-btn > span[aria-hidden="true"],
.ai-action-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1f6bff, #14b8a6);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.ai-action-icon {
  flex: 0 0 auto;
  margin-left: -2px;
  box-shadow: 0 6px 14px rgba(31, 107, 255, 0.18);
}

.scenario-regenerate-btn:hover {
  transform: translateY(-1px);
  border-color: #6ea4ff;
  background: #eaf3ff;
  box-shadow: 0 10px 20px rgba(40, 110, 240, 0.18);
}

.product-document-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.scenario-document-native-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.scenario-file-pick-btn,
.scenario-file-status {
  min-height: 38px;
  border: 1px solid #c8d6ea;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 20px rgba(40, 110, 240, 0.08);
}

.scenario-file-pick-btn {
  padding: 0 16px;
  color: #0f2a55;
  font-weight: 800;
  cursor: pointer;
}

.scenario-file-pick-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 12px 26px rgba(40, 110, 240, 0.16);
}

.scenario-file-status {
  display: inline-flex;
  align-items: center;
  max-width: 210px;
  padding: 0 14px;
  color: #0f2a55;
  font-size: 0.86rem;
  font-weight: 600;
}

.product-document-actions button {
  min-height: 38px;
  border-color: #c8d6ea;
  border-radius: 999px;
  color: #0f2a55;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 20px rgba(40, 110, 240, 0.08);
  font-weight: 800;
}

.product-document-actions button:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 12px 26px rgba(40, 110, 240, 0.16);
}

.product-document-actions .product-document-analyze-btn {
  min-height: 44px;
  padding: 0 18px 0 12px;
  font-weight: 700;
}

.product-document-analyze-btn.is-attention {
  animation: documentAnalyzePulse 0.45s ease-in-out 3;
}

@keyframes documentAnalyzePulse {
  0%,
  100% {
    border-color: #c8d6ea;
    box-shadow: 0 8px 20px rgba(40, 110, 240, 0.08);
    transform: translateY(0);
  }

  50% {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16), 0 14px 30px rgba(37, 99, 235, 0.22);
    color: var(--blue);
    transform: translateY(-1px);
  }
}

.product-document-list {
  display: grid;
  gap: 7px;
}

.product-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px 7px 12px;
  border: 1px solid #d9e4f5;
  border-radius: 999px;
  background: #f8fbff;
}

.product-document-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-document-delete {
  min-height: 30px;
  min-width: 84px;
  border-color: #fecaca;
  border-radius: 999px;
  padding: 0 12px;
  color: #b91c1c;
  background: #fff5f5;
  font-size: 0.84rem;
  font-weight: 760;
}

.product-document-delete:hover {
  border-color: #ef4444;
  color: #fff;
  background: #dc2626;
}

.admin-settings-transfer {
  gap: 10px;
}

.admin-settings-transfer p {
  margin: 0;
}

.admin-transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.roleplay-type-generator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: -4px 0 14px;
}

.roleplay-type-generator .download-action-btn {
  min-width: 210px;
}

.roleplay-type-list-wrap {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.generated-roleplay-types-list {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d9e4f5;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 650;
}

.scenario-create-intro {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
}

.scenario-field-actions .scenario-action-btn,
.scenario-file-menu .scenario-action-btn {
  min-height: 36px;
  min-width: 92px;
  border-color: #cfe0ff;
  border-radius: 999px;
  padding: 0 14px;
  color: #1558d6;
  background: #f6f9ff;
  box-shadow: 0 1px 2px rgba(32, 44, 72, 0.06);
  font-size: 0.92rem;
  font-weight: 720;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
}

.scenario-action-btn > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
}

.scenario-field-actions .scenario-action-btn:hover,
.scenario-file-menu .scenario-action-btn:hover {
  transform: translateY(-1px);
  border-color: #9bbcf8;
  background: #edf4ff;
  box-shadow: 0 8px 18px rgba(32, 44, 72, 0.12);
}

.scenario-field-actions .scenario-action-open.is-open,
.scenario-file-menu .scenario-action-open.is-open {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(40, 110, 240, 0.22);
}

.scenario-field-actions .scenario-action-open.is-open > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-open.is-open > span[aria-hidden="true"] {
  color: var(--blue);
  background: #fff;
}

.scenario-field-actions .scenario-action-btn:focus-visible,
.scenario-file-menu .scenario-action-btn:focus-visible {
  outline: 3px solid rgba(40, 110, 240, 0.24);
  outline-offset: 2px;
}

.scenario-field-actions .scenario-action-save,
.scenario-file-menu .scenario-action-save {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(40, 110, 240, 0.22);
}

.scenario-field-actions .scenario-action-save > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-save > span[aria-hidden="true"] {
  color: var(--blue);
  background: #fff;
}

.scenario-field-actions .scenario-action-save:hover,
.scenario-file-menu .scenario-action-save:hover {
  border-color: #185bd6;
  color: #fff;
  background: #185bd6;
  box-shadow: 0 10px 22px rgba(40, 110, 240, 0.28);
}

.scenario-field-actions .scenario-action-delete,
.scenario-file-menu .scenario-action-delete {
  border-color: #ffd3d8;
  color: #b42318;
  background: #fff8f8;
}

.scenario-field-actions .scenario-action-delete > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-delete > span[aria-hidden="true"] {
  background: var(--red);
}

.scenario-field-actions .scenario-action-delete:hover,
.scenario-file-menu .scenario-action-delete:hover {
  border-color: #f8a8b1;
  color: #9f1239;
  background: #fff1f2;
}

.scenario-field-actions .scenario-action-btn:disabled,
.scenario-file-menu .scenario-action-btn:disabled {
  transform: none;
  box-shadow: none;
}

.scenario-file-menu .scenario-action-btn,
.scenario-file-menu .scenario-action-save,
.scenario-file-menu .scenario-action-save.primary,
.scenario-file-menu .scenario-action-save-as,
.scenario-file-menu .scenario-action-delete {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  color: #0f172a;
  background: transparent;
  box-shadow: none;
  font-size: 0.95rem;
  font-weight: 400;
  text-align: left;
}

.scenario-file-menu .scenario-file-icon {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.scenario-file-menu .scenario-action-btn > span:not([aria-hidden="true"]) {
  justify-self: start;
}

.scenario-file-menu .scenario-action-btn + .scenario-action-btn {
  border-top: 1px solid #d9e2ef;
  border-radius: 0;
}

.scenario-file-menu .scenario-action-btn:hover,
.scenario-file-menu .scenario-action-save:hover,
.scenario-file-menu .scenario-action-save.primary:hover,
.scenario-file-menu .scenario-action-save-as:hover,
.scenario-file-menu .scenario-action-delete:hover {
  transform: none;
  border-color: transparent;
  color: #0f172a;
  background: #eef5ff;
  box-shadow: none;
}

.scenario-file-menu .scenario-action-btn > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-save > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-save.primary > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-save-as > span[aria-hidden="true"],
.scenario-file-menu .scenario-action-delete > span[aria-hidden="true"] {
  margin-right: 12px;
}

.scenario-file-menu .scenario-menu-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 12px;
  border-radius: 0;
  color: transparent;
  background-color: transparent !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
}

.scenario-menu-icon-new::before {
  content: none;
}

.scenario-menu-icon-save::before,
.scenario-menu-icon-save-as::before {
  content: none;
}

.scenario-menu-icon-save-as::after {
  content: none;
}

.scenario-file-menu .scenario-action-delete .scenario-menu-icon {
  color: transparent;
  background-color: transparent !important;
}

.scenario-menu-icon-delete::before {
  content: none;
}

.scenario-menu-icon-new {
  background-image: url("assets/scenario-menu-plus.png");
}

.scenario-menu-icon-save {
  background-image: url("assets/scenario-menu-save.png");
}

.scenario-menu-icon-save-as {
  background-image: url("assets/scenario-menu-save-as.png");
}

.scenario-menu-icon-delete {
  background-image: url("assets/scenario-menu-delete.png");
}

.scenario-fields textarea {
  min-height: 168px;
}

.scenario-fields #voiceSampleText,
.scenario-fields #main_voiceSampleText {
  min-height: 44px;
  height: 44px;
  resize: none;
  overflow: hidden;
}

.scenario-fields #productInput,
.scenario-fields #concernsInput,
.scenario-fields #guidelinesInput,
.scenario-fields #main_productInput,
.scenario-fields #main_concernsInput,
.scenario-fields #main_guidelinesInput {
  min-height: 224px;
}

.scenario-list-item {
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  text-align: left;
}

.scenario-list-item.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.scenario-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.conversation {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  padding-right: 6px;
}

.message {
  max-width: min(720px, 88%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.message.user {
  align-self: flex-end;
  border-color: #b7cef8;
  background: #edf4ff;
}

.message.agent {
  align-self: flex-start;
}

.message strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.83rem;
}

.live-transcript-wrap {
  margin: 0;
}

.mic-test-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.mic-test-panel .section-heading {
  align-items: flex-start;
  margin-bottom: 10px;
}

.mic-test-panel .voice-status {
  margin-bottom: 8px;
}

.live-transcript-wrap h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 1rem;
}

.live-transcript-wrap h3 + .practice-recording-status {
  margin: 0 0 -1px;
  border-radius: 8px 8px 0 0;
}

.live-transcript-wrap h3 + .practice-recording-status + .live-transcript {
  border-radius: 0 0 8px 8px;
}

.live-transcript {
  overflow: auto;
  min-height: 230px;
  max-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fbfcff;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

.practice-recording-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  white-space: pre-wrap;
}

.practice-recording-status[data-state="recording"] {
  border-color: #b7cef8;
  color: var(--blue);
  background: #edf4ff;
}

.practice-recording-status[data-state="processing"] {
  border-color: #f4c36d;
  color: #8a5b00;
  background: #fff7e6;
  text-align: center;
}

.practice-recording-status[data-state="completed"] {
  border-color: #8bd7a6;
  color: #176b3a;
  background: #ecfff2;
}

.practice-recording-status.auth-error {
  border-color: var(--red);
  color: #9f1239;
  background: #fff1f2;
}

.practice-recording-status.is-success {
  border-color: #8bd7a6;
  color: #176b3a;
  background: #ecfff2;
}

.browser-hint-line {
  margin-top: -6px;
  color: #8a5b00;
  font-weight: 800;
}

.practice-scenario-summary {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

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

.summary-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.summary-card-concerns,
.summary-card-keywords {
  grid-column: span 1;
}

.summary-card h4 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 0.94rem;
  font-weight: 850;
}

.summary-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.summary-icon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.summary-icon-product::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid currentColor;
  transform: rotate(30deg) skewY(-10deg);
  border-radius: 3px;
}

.summary-icon-product::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 13px;
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
}

.summary-icon-learner::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 9px;
  width: 10px;
  height: 10px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.summary-icon-learner::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 11px;
  border: 3px solid currentColor;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.summary-icon-agent::before {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 5px;
}

.summary-icon-agent::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 12px;
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    -7px 11px 0 -1px currentColor,
    0 11px 0 -1px currentColor,
    7px 11px 0 -1px currentColor;
}

.summary-icon-concerns::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.summary-icon-concerns::after {
  content: "!";
  position: absolute;
  top: 3px;
  left: 0;
  width: 28px;
  color: currentColor;
  font-size: 20px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

.summary-icon-keywords::before {
  content: "";
  position: absolute;
  inset: 5px 3px;
  border: 3px solid currentColor;
  border-radius: 6px;
}

.summary-icon-keywords::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor;
}

.practice-scenario-summary h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 0.98rem;
}

.roleplay-summary-grid {
  display: grid;
  gap: 10px;
}

.roleplay-summary-top-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.roleplay-summary-top-row.roleplay-summary-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roleplay-summary-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.roleplay-summary-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.roleplay-summary-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.practice-scenario-summary dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.practice-scenario-summary dl > div {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #edf1f7;
}

.practice-scenario-summary dl > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.practice-scenario-summary dt {
  color: var(--ink);
  font-weight: 800;
}

.practice-scenario-summary dd {
  margin: 0;
  color: var(--ink);
}

.manual-save-recording {
  margin-top: 10px;
  min-height: 42px;
  width: min(220px, 100%);
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.live-transcript.has-error {
  border-color: var(--red);
  background: #fff8f8;
}

.live-turn {
  margin: 0 0 10px;
}

.live-user {
  color: var(--blue);
}

.live-user strong,
.transcript-user strong,
.avatar-user-line strong {
  font-weight: 800;
}

.live-agent {
  color: #151a23;
}

.live-system {
  color: #9b1e2b;
}

.live-placeholder,
.live-interim {
  color: var(--muted);
}

.live-interim strong {
  color: var(--blue);
}

.message.system {
  align-self: stretch;
  border-color: #f1a8b0;
  color: #9b1e2b;
  background: #fff5f6;
}

.recording-note {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

#transcriptTab {
  align-content: start;
  gap: 14px;
}

.transcript-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 0;
}

.transcript-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.toolbar label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.transcript-layout {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.term-list,
.transcript,
.coach-list,
.tone-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.term-list {
  padding: 14px;
}

.term-list h3,
.coach-list h3,
.tone-panel h3 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.term-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf0f5;
  padding: 10px 0;
}

.transcript {
  overflow: auto;
  min-height: 460px;
  padding: 18px;
  line-height: 1.72;
}

.transcript p {
  margin-bottom: 13px;
}

.transcript-user {
  color: var(--blue);
}

.transcript-agent {
  color: #151a23;
}

.transcript-system,
.transcript-error {
  color: #9b1e2b;
}

mark {
  border-radius: 4px;
  padding: 1px 3px;
  background: #fff16a;
}

.question-mark {
  background: #d6ecff;
}

.concern-mark {
  background: #dff6e8;
}

.keyword-mark {
  background: #fff16a;
}

#analyticsTab {
  align-content: start;
  gap: 16px;
  overflow: auto;
}

.analytics-report-actions {
  display: flex;
  justify-content: flex-end;
}

.analytics-report-actions .download-action-btn {
  min-width: 190px;
}

.coach-report-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.coach-report-header-actions {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.coach-report-header-actions .download-action-btn {
  min-width: 190px;
}

@media (max-width: 600px) {
  #analyticsTab .coach-report-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  #analyticsTab .coach-report-header-actions {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
  }

  #analyticsTab .coach-report-header-actions .download-action-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

.coach-report-content {
  display: grid;
  gap: 16px;
}

.practice-recording-status[data-state="error"] {
  border-color: var(--red);
  color: #9b1e2b;
  background: #fff1f2;
}

.eleven-session-car-audio-warning {
  color: #000;
  font-weight: 800;
}

.scenario-save-roleplay-callout-bottom {
  margin: 24px 0 4px;
}

.coach-language-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  z-index: 2;
  margin: 0 0 -17px;
  padding: 0 18px;
}

.coach-report-content {
  position: relative;
  z-index: 1;
}

.coach-language-tab {
  border: 1px solid #b9cbea;
  border-radius: 8px 8px 0 0;
  background: #fff;
  color: #0f2a55;
  padding: 10px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  transform: translateY(1px);
}

.coach-language-tab:hover:not(:disabled) {
  border-color: #2563eb;
  background: #eef5ff;
  color: #005bff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16);
  transform: translateY(0);
}

.coach-language-tab.active,
.coach-language-tab.active:hover:not(:disabled) {
  border-color: #1d4ed8;
  background: #2563eb;
  color: #fff;
}

.coach-language-tab:disabled {
  cursor: wait;
  opacity: 0.65;
}

.coach-translation-status {
  margin-left: 8px;
  padding-bottom: 9px;
  color: #475467;
  font-size: 0.88rem;
}

.coach-translation-status[data-state="completed"] { color: #087a32; }
.coach-translation-status[data-state="error"] { color: #c81e1e; }
.coach-translation-status[data-state="processing"],
.coach-translation-status.is-translation-blink {
  color: #8a5a00;
  font-weight: 700;
}

.coach-translation-status.is-translation-blink {
  animation: recording-load-status-blink 0.85s ease-in-out infinite;
}

.coach-translated-report {
  width: 100%;
}

.summary-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.score-card,
.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.score-card {
  display: flex;
  align-items: center;
  gap: 15px;
}

.score-ring {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--amber) 0deg, var(--amber) 260deg, #e7ebf2 260deg);
  font-size: 1.6rem;
  font-weight: 900;
}

.metric-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 1.8rem;
  font-weight: 900;
}

.analytics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
  gap: 16px;
}

.analytics-layout-tone-only {
  grid-template-columns: minmax(280px, 1fr);
}

.coach-list,
.tone-panel,
.objectives-panel,
.detailed-coach-panel,
.coach-scenario-report {
  padding: 16px;
}

.detailed-coach-panel,
.coach-scenario-report {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.detailed-coach-panel h3,
.coach-scenario-report h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.coach-scenario-report h3 {
  color: var(--blue);
}

.scenario-report-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.scenario-report-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid #edf0f5;
  padding-top: 12px;
}

.scenario-report-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.scenario-report-row strong {
  color: var(--blue);
}

.scenario-report-row p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.detailed-coach-status {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.detailed-coach-status[data-state="processing"] {
  color: #8a5a12;
  font-weight: 800;
}

.detailed-coach-status[data-state="completed"] {
  color: #176b3a;
  font-weight: 800;
}

.detailed-coach-status[data-state="error"] {
  color: var(--red);
  font-weight: 800;
}

.detailed-coach-feedback {
  display: grid;
  gap: 16px;
}

.detailed-coach-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid #edf0f5;
  padding-top: 14px;
}

.detailed-coach-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.detailed-coach-section h4 {
  margin: 0;
  color: var(--blue);
  font-size: 0.98rem;
}

.detailed-coach-section p,
.detailed-coach-section li {
  color: #344054;
  line-height: 1.58;
}

.detailed-coach-main-summary h5 {
  margin: 6px 0 0;
  color: #075fd6;
  font-size: 0.96rem;
}

.detailed-coach-main-summary h5:first-of-type {
  color: #08783f;
}

.detailed-coach-summary-list {
  display: grid;
  gap: 5px;
}

.detailed-coach-read-on {
  margin-top: 7px;
  border-left: 4px solid #1478e8;
  padding: 9px 12px;
  background: #edf6ff;
}

.coach-score-value {
  font-weight: 700;
}

.coach-score-pass {
  color: #007a1f;
}

.coach-score-fail {
  color: #d71920;
}

.detailed-coach-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid #edf0f5;
  padding-top: 12px;
}

.detailed-coach-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.detailed-coach-row strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
}

.detailed-coach-row-title {
  display: grid;
  gap: 6px;
  align-content: start;
}

.detailed-coach-category-score {
  margin: 0;
}

.detailed-interview-answer {
  display: grid;
  gap: 10px;
}

.detailed-question-score-layout {
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  align-items: start;
}

.detailed-question-score-left {
  display: grid;
  gap: 8px;
}

.detailed-question-score-left p {
  margin: 0;
}

.detailed-interview-answer span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.detailed-interview-answer p {
  margin: 0;
}

.detailed-interview-answer > div:last-child {
  border-left: 3px solid #1677ff;
  padding: 11px 12px;
  background: #e8f2ff;
  color: #07162e;
}

.detailed-interview-answer > div:last-child span,
.detailed-interview-answer > div:last-child p {
  color: #07162e;
}

.detailed-coach-section ul {
  margin: 0;
  padding-left: 20px;
}

.score-bars {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid #edf0f5;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.score-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 0.86rem;
}

.score-bar-meta span {
  color: var(--blue);
  font-weight: 800;
}

.score-bar-row:has(.score-bar-meta > strong) {
  position: relative;
  padding-bottom: 22px;
}

.score-bar-meta > strong {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--ink);
}

.score-bar-value {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 0.86rem;
  text-align: right;
}

.score-bar-description {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.segmented-score-bar {
  position: relative;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) 0 33.333%, var(--amber) 33.333% 66.666%, var(--green) 66.666% 100%);
}

.segmented-score-bar.pace-bar {
  background: linear-gradient(90deg, var(--red) 0 41.666%, var(--green) 41.666% 79.166%, var(--red) 79.166% 100%);
}

.score-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #111827;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.22);
  transform: translate(-50%, -50%);
}

.objectives-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.objectives-panel h3 {
  margin-bottom: 12px;
}

.objective-item {
  border-top: 1px solid #edf0f5;
  padding: 14px 0;
}

.objective-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.objective-head h4 {
  color: var(--ink);
  font-size: 0.95rem;
}

.objective-head strong {
  min-width: 48px;
  border-radius: 999px;
  padding: 4px 9px;
  color: #fff;
  background: var(--blue);
  text-align: center;
}

.objective-item ul {
  margin: 0;
  padding-left: 20px;
  color: #344054;
}

.objective-item li {
  margin: 6px 0;
}

.feedback-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
  border-top: 1px solid #edf0f5;
  padding: 14px 0;
}

.feedback-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}

.feedback-item.warn .feedback-icon {
  background: var(--amber);
}

.feedback-item small {
  white-space: nowrap;
  font-weight: 800;
}

.tone-row {
  margin-bottom: 18px;
}

.tone-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.tone-track {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e33f4f, #f4a51c, #22a665, #286ef0);
}

.tone-dot {
  position: relative;
  top: -5px;
  width: 17px;
  height: 17px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

#recordingStatus {
  display: none;
  position: absolute;
  left: 50%;
  max-width: min(460px, 42vw);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

#recordingStatus[data-state="recording"] {
  border-color: #b7cef8;
  color: var(--blue);
  background: #edf4ff;
}

#recordingStatus[data-state="processing"] {
  border-color: #f4c36d;
  color: #8a5b00;
  background: #fff7e6;
}

#recordingStatus[data-state="completed"] {
  border-color: #8bd7a6;
  color: #176b3a;
  background: #ecfff2;
}

#recordingStatus.is-listening,
.practice-recording-status.is-listening {
  border-color: #65ca84;
  color: #0b7a35;
  background: #eaffef;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .login-hero {
    grid-template-columns: 1fr;
    padding-top: 18px;
  }

  .login-art {
    min-height: 340px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .header-promo-brand:has(.company-header-logo:not([hidden])) {
    display: flex;
    gap: 10px;
  }

  .summary-grid,
  .analytics-layout,
  .transcript-page-layout,
  .transcript-layout,
  .admin-invite-workspace,
  .practice-layout,
  .avatar-layout,
  .avatar-choice-grid,
  .avatar-session-grid,
  .avatar-stage,
  .pricing-header,
  .benefit-grid,
  .readiness-strip,
  .readiness-flow-section,
  .analysis-feature,
  .analysis-feature-reverse,
  .retainiq-footer,
  .scenario-layout {
    grid-template-columns: 1fr;
  }

  #avatarStatusBar,
  .avatar-stage #avatarScenarioSummary {
    grid-column: auto;
  }

  .avatar-session-section .avatar-control-rail {
    margin-top: 0;
  }

  .session-controls-left {
    flex-wrap: wrap;
  }

  .voice-transcript-stack {
    grid-column: auto;
  }

  .transcript-status-stack {
    grid-template-columns: 1fr;
  }

  .voice-mic-status-indicator,
  .post-recording-next-step {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .post-recording-next-step {
    height: auto;
    min-height: 72px;
  }

  #elevenTab .voice-session-section .transcript-status-stack .post-recording-next-step {
    grid-column: 1;
    grid-row: 5;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    min-height: 72px;
    height: auto;
  }

  .summary-card-grid {
    grid-template-columns: 1fr;
  }

  .roleplay-summary-top-row {
    grid-template-columns: 1fr;
  }

  .roleplay-summary-top-row.roleplay-summary-three {
    grid-template-columns: 1fr;
  }

  .tab-intro-action-row {
    grid-template-columns: 1fr;
  }

  .next-step-tile {
    width: min(100%, 240px);
    min-height: 72px;
  }

  .settings-scenario-preview,
  .scenario-library {
    position: static;
    max-height: none;
    margin-top: 0;
  }

  .detailed-coach-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .voice-duration-inline {
    flex: 1 1 100%;
    min-width: 0;
  }

  .pricing-header {
    align-items: stretch;
    flex-direction: column;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-feature-reverse .analysis-feature-copy,
  .analysis-feature-reverse img {
    order: initial;
  }

}

@media (max-width: 620px) {
  .app-shell {
    padding: 8px;
  }

  body:not(.is-authenticated) .app-shell {
    padding: 0;
  }

  .login-copy h1 {
    font-size: 1.7rem;
  }

  .login-art {
    min-height: 260px;
  }

  .session-header,
  .toolbar,
  .transcript-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .header-status {
    justify-items: stretch;
  }

  .header-timer-row {
    flex-direction: column;
    align-items: stretch;
  }

  .header-avatar-actions {
    justify-items: stretch;
  }

  .header-status .timer-card:first-child {
    position: static;
    transform: none;
  }

  #recordingStatus {
    position: static;
    max-width: none;
    transform: none;
  }

  .tabs {
    overflow: auto;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .admin-time-row {
    grid-template-columns: 1fr;
  }

  .auth-grid {
    grid-template-columns: 1fr;
  }

  .message {
    max-width: 100%;
  }

  .voice-sample-play-row {
    grid-template-columns: 1fr;
  }

  .ai-agent-voice-field {
    max-width: 100%;
  }

  .ai-agent-voice-row {
    grid-template-columns: 1fr;
  }

  .language-row {
    grid-template-columns: 1fr;
  }

  .roleplay-type-generator {
    grid-template-columns: 1fr;
  }

  .voice-sample-play-btn {
    width: 100%;
  }

  .replay-action-control {
    width: 100%;
  }
}

.assignments-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.assignment-review-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}

.assignment-create-panel {
  margin-bottom: 16px;
  border: 1px solid #d5dfef;
  border-radius: 12px;
  padding: 14px;
  background: #f8fbff;
  box-shadow: 0 8px 18px rgba(32, 44, 72, 0.04);
}

.assignment-add-btn {
  min-width: 180px;
  min-height: 42px;
  margin-bottom: 12px;
}

.assignment-create-canvas {
  padding: 18px;
  border: 1px solid #d5dfef;
  border-radius: 12px;
  background: #ffffff;
}

.assignment-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(160px, 0.8fr) minmax(170px, 0.8fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: end;
}

.assignment-form-grid label {
  display: grid;
  gap: 6px;
  color: #0766d1;
  font-weight: 700;
}

.assignment-user-picker {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  border: 1px solid #d4e0f2;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.assignment-user-search-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
}

.assignment-user-search-row input {
  width: 27ch;
  max-width: 100%;
}

.assignment-user-search-row .assignment-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 42px;
  width: fit-content;
  min-width: fit-content;
  padding-inline: 18px;
  white-space: nowrap;
}

.assignment-user-search-row label {
  display: grid;
  flex: 0 0 27ch;
  gap: 6px;
  color: #005bff;
  font-weight: 700;
}

.assignment-user-search-row .assignment-filter-field {
  display: flex;
  align-items: center;
  color: inherit;
}

.assignment-user-search-row .assignment-filter-field input {
  min-height: 42px;
}

@media (max-width: 760px) {
  .assignment-workspace-menu-toggle[hidden] {
    display: none !important;
  }

  .assignment-workspace-menu-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    border: 1px solid #075fd6;
    border-radius: 8px;
    padding: 11px 14px;
    color: #fff;
    background: var(--blue);
    font-weight: 750;
    text-align: left;
  }

  .assignment-workspace-menu-icon {
    display: grid;
    gap: 4px;
    width: 22px;
  }

  .assignment-workspace-menu-icon i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
  }

  .assignment-workspace-tabs {
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 14px;
    border: 1px solid #9cc4ff;
    border-radius: 8px;
    padding: 7px;
    background: #edf5ff;
  }

  .assignment-workspace-tabs.is-open {
    display: flex;
  }

  .assignment-workspace-tab {
    width: 100%;
    border: 1px solid #b7d3f7;
    border-radius: 6px;
    text-align: left;
  }

  .mobile-assignment-table:not(.learner-assignment-table) {
    table-layout: fixed;
  }

  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(3),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(3),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(4),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(4),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(5),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(5),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(6),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(6),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(7),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(7) {
    display: none;
  }

  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(1),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(1) { width: 28%; }
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(2),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(2) { width: 48%; }
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(8),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(8) { width: 24%; }

  .mobile-assignment-table:not(.learner-assignment-table) th,
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td {
    padding: 8px 5px;
    overflow-wrap: anywhere;
  }
}

.assignment-filter-help {
  margin: 0;
  color: #061334;
  font-size: 1rem;
  font-weight: 400;
}

.assignment-user-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assignment-user-list-head strong {
  color: #005bff;
}

.assignment-user-list-head.is-hidden {
  display: none;
}

.assignment-search-row.is-hidden {
  display: none;
}

.assignment-assigned-users-text {
  color: #061334;
  font-size: 0.95rem;
}

.assignment-user-results {
  max-height: 365px;
  overflow: auto;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
}

.assignment-user-table {
  width: 100%;
  border-collapse: collapse;
}

.assignment-user-table th,
.assignment-user-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e3ebf7;
  text-align: left;
  vertical-align: middle;
}

.assignment-user-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e8f0fd;
  color: #0f2a55;
}

.assignment-user-table tr.is-alt td {
  background: #f7f9fc;
}

.assignment-user-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.assignment-list {
  display: grid;
  gap: 10px;
}

#assignmentsTab {
  container-type: inline-size;
  container-name: assignments-workspace;
}

.assignment-search-row {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 0 0 12px;
}

.assignment-search-row input {
  width: 25ch;
  max-width: 100%;
}

.compact-search-btn {
  width: auto;
  min-width: 0;
  padding-inline: 18px;
  white-space: nowrap;
}

.assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  overflow: visible;
  background: #fff;
  box-shadow: 0 8px 18px rgba(32, 44, 72, 0.04);
}

.assignment-table th {
  background: #e8f0fd;
  color: #0f2a55;
  font-weight: 700;
  text-align: left;
  padding: 9px 10px;
  white-space: nowrap;
  border-bottom: 1px solid #c4d3e8;
  font-size: 0.88rem;
}

.assignment-table td {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #dce6f5;
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 0.92rem;
}

.assignment-table-row.is-alt td {
  background: #f7f9fc;
}

.assignment-table-row:hover td {
  background: #edf5ff;
}

.assignment-table-row.active td {
  background: #eef6ff;
  border-top: 1px solid #2563eb;
  border-bottom: 1px solid #2563eb;
}

.assignment-table-row.active td:first-child {
  box-shadow: none;
}

.assignment-table-detail-row td {
  padding: 0;
  background: #eef6ff;
  border-bottom: 1px solid #2563eb;
  box-shadow: none;
}

.assignment-table-select {
  border: 0;
  background: transparent;
  color: #005bff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.assignment-status-cell {
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}

.assignment-table th.assignment-action-heading,
.assignment-table .assignment-recordings-count,
.assignment-table .assignment-recordings-count-cell {
  text-align: center;
}

.assignment-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #c7d2e3;
  border-radius: 999px;
  padding: 2px 11px;
  color: #334155;
  background: #f8fafc;
  line-height: 1.15;
}

.assignment-status-cell.is-completed {
  color: #04702c;
  font-weight: 750;
}
.assignment-status-cell.is-completed .assignment-status-badge { border-color: #8ed59c; color: #111827; background: #effbf1; }

.assignment-status-cell.is-rejected {
  color: #d71920;
  font-weight: 750;
}
.assignment-status-cell.is-rejected .assignment-status-badge { border-color: #f29a9e; color: #111827; background: #fff0f1; }

.assignment-status-cell.is-submitted {
  color: #005bff;
}
.assignment-status-cell.is-submitted .assignment-status-badge { border-color: #9fc2fa; color: #111827; background: #eef5ff; }
.assignment-status-cell.is-warning .assignment-status-badge { border-color: #eab308; color: #854d0e; background: #fef9c3; }
.assignment-status-cell.is-open .assignment-status-badge { min-height: 0; border-color: transparent; padding: 0; color: #111827; background: transparent; }

.assignment-table .assignment-row-actions {
  margin-top: 0;
  gap: 6px;
  flex-wrap: nowrap;
}

.assignment-table .roleplay-status-row-actions {
  width: 100%;
  justify-content: flex-start;
}

.assignment-table .download-action-btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.service-credits-list {
  margin-top: 12px;
}

.service-credits-table th:nth-child(7),
.service-credits-table td:nth-child(7) {
  min-width: 280px;
}

.service-credit-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.service-credit-status-good {
  color: #05603a;
  background: #dcfae6;
  border: 1px solid #abefc6;
}

.service-credit-status-manual {
  color: #7a4b00;
  background: #fff7e6;
  border: 1px solid #ffd89a;
}

.service-credit-status-error {
  color: #b42318;
  background: #fff1f3;
  border: 1px solid #fecdd6;
}

.service-credit-link {
  min-height: 34px;
  padding: 0 14px;
  text-decoration: none;
}

.service-credits-empty {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  background: #f8fbff;
}

.assignment-detail-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid #c8daf5;
  border-radius: 0;
  background: #eef6ff;
  box-shadow: none;
}

.assignment-detail-panel .section-heading h2 {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
}

.assignment-recordings-heading {
  margin: 10px 0 6px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 400;
}

.assignment-recordings-heading.assignment-recordings-reviewer-notice {
  margin-top: 24px;
}

.assignment-recordings-description {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
}

.assignment-recordings-instruction {
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

#assignmentRecordingActionStatus:empty {
  display: none;
}

.assignment-row,
.assignment-recording-row,
.assignment-feedback-row {
  border: 1px solid #cfdcf0;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.assignment-row.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.assignment-row-main {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  color: #061334;
}

.assignment-row-main strong {
  color: #005bff;
}

.assignment-row-actions,
.assignment-review-actions,
.assignment-review-player-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.assignment-review-player-row[hidden] {
  display: none;
}

.assignment-review-audio-loader {
  display: grid;
  gap: 8px;
  margin: 8px 0 4px;
  max-width: 540px;
}

.assignment-review-audio-loader .assignment-recording-select-btn {
  justify-self: start;
}

.assignment-review-score {
  margin: 6px 0;
  color: #07152f;
}

.assignment-review-score.recording-score-pass {
  color: #007a1f;
  font-weight: 700;
}

.assignment-review-score.recording-score-fail {
  color: #d71920;
  font-weight: 700;
}

.assignment-recording-name-audio {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-width: 460px;
}

.assignment-recording-lazy-audio-status {
  margin: 4px 0 8px;
  color: #8a5a00;
  font-weight: 700;
}

.assignment-recording-lazy-audio-status[data-state="completed"] {
  color: #007a1f;
}

.assignment-recording-lazy-audio-status[data-state="error"] {
  color: #b91c1c;
}

.assignment-recordings-list {
  display: grid;
  gap: 10px;
}

.assignment-recordings-table-wrap {
  max-height: 430px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  background: #f3f4f6;
}

.assignment-recordings-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.assignment-recordings-table col.assignment-recording-col-name {
  width: 30%;
}

.assignment-recordings-table col.assignment-recording-col-date {
  width: 13%;
}

.assignment-recordings-table col.assignment-recording-col-status {
  width: 11%;
}

.assignment-recordings-table col.assignment-recording-col-reviewer {
  width: 16%;
}

.assignment-recordings-table col.assignment-recording-col-review-score {
  width: 10%;
}

.assignment-recordings-table col.assignment-recording-col-assigned-duration {
  width: 7%;
}

.assignment-recordings-table col.assignment-recording-col-duration {
  width: 7%;
}

.assignment-recordings-table col.assignment-recording-col-score {
  width: 9%;
}

.assignment-recordings-table col.assignment-recording-col-output {
  width: 12%;
}

.assignment-recordings-table col.assignment-recording-col-action {
  width: 24%;
}

.assignment-recordings-table.no-reviewer-column col.assignment-recording-col-name {
  width: 38%;
}

.assignment-recordings-table.no-reviewer-column col.assignment-recording-col-date {
  width: 14%;
}

.assignment-recordings-table.no-reviewer-column col.assignment-recording-col-status {
  width: 12%;
}

.assignment-recordings-table.has-duration-score-columns col.assignment-recording-col-name {
  width: 26%;
}

.assignment-recordings-table.has-duration-score-columns col.assignment-recording-col-status {
  width: 10%;
}

.assignment-recordings-table.has-duration-score-columns col.assignment-recording-col-reviewer {
  width: 15%;
}

.assignment-recordings-table.has-duration-score-columns col.assignment-recording-col-output {
  width: 12%;
}

.assignment-recordings-table.has-duration-score-columns col.assignment-recording-col-action {
  width: 17%;
}

.assignment-recordings-table.no-reviewer-column col.assignment-recording-col-action {
  width: 30%;
}

.assignment-recordings-table.has-review-score-column col.assignment-recording-col-name {
  width: 34%;
}

.assignment-recording-output-cell {
  color: #334155;
  font-size: 0.88rem;
  white-space: normal;
  text-align: center;
}

.assignment-recording-output-cell .download-action-btn {
  margin: 0 auto 6px;
}

.assignment-recording-output-empty {
  color: #64748b;
}

.assignment-recording-output-heading {
  text-align: center;
}

.assignment-recording-assigned-duration-heading,
.assignment-recording-duration-heading,
.assignment-recording-score-heading,
.assignment-recording-assigned-duration-cell,
.assignment-recording-duration-cell,
.assignment-recording-score-cell {
  text-align: center;
}

.assignment-recording-assigned-duration-heading,
.assignment-recording-duration-heading {
  line-height: 1.15;
  white-space: normal;
}

.assignment-recording-assigned-duration-cell,
.assignment-recording-duration-cell {
  white-space: nowrap;
}

.assignment-recording-score-cell {
  font-weight: 700;
}

.assignment-recording-score-cell.recording-score-pass {
  color: #007a1f;
}

.assignment-recording-score-cell.recording-score-fail {
  color: #d71920;
}

.assignment-output-download-btn {
  max-width: 100%;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.84rem;
  line-height: 1.12;
  white-space: normal;
}

.assignment-recordings-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e8f0fd;
  color: #0f2a55;
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #c4d3e8;
  font-size: 0.9rem;
}

.assignment-recordings-table th.assignment-recording-output-heading {
  text-align: center;
}

.assignment-recordings-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #dce6f5;
  vertical-align: middle;
  background: #fff;
  font-size: 0.9rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.assignment-recording-action-cell {
  width: auto;
  max-width: 100%;
  overflow: hidden;
}

.assignment-recordings-table tr.is-alt td {
  background: #fff;
}

.assignment-recordings-table tbody tr td {
  background: #fff;
}

.assignment-recordings-table tr.active td {
  background: #eef5ff;
  border-left: 0;
  border-right: 0;
}

@keyframes assignmentRecordingAddedBlink {
  0%, 100% {
    background-color: #fff;
    border-color: #dce6f5;
  }
  25%, 75% {
    background-color: #dbeafe;
    border-color: #2f73ea;
  }
  50% {
    background-color: #bfdbfe;
    border-color: #0b5cff;
  }
}

.assignment-recordings-table tr.is-new-recording td {
  animation: assignmentRecordingAddedBlink 0.72s ease-in-out 5;
  border-top: 1px solid #dce6f5;
  border-bottom: 1px solid #dce6f5;
}

.assignment-recordings-table tr.is-new-recording td:first-child {
  border-left: 1px solid #dce6f5;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.assignment-recordings-table tr.is-new-recording td:last-child {
  border-right: 1px solid #dce6f5;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.assignment-recordings-table tr:hover td {
  background: #e8edf4;
}

.assignment-recordings-table .assignment-recording-comments-row td,
.assignment-recordings-table tbody .assignment-recording-comments-row td,
#elevenAssignmentRecordingsList .assignment-recordings-table .assignment-recording-comments-row td {
  background: #f8fbff;
  padding: 8px 12px 12px;
}

.assignment-recordings-table .assignment-recording-comments-row:hover td {
  background: #f8fbff;
}

.assignment-recording-comments {
  display: grid;
  gap: 8px;
}

.assignment-recording-comments-title {
  color: #0f2a55;
  font-size: 0.9rem;
  font-weight: 700;
}

.assignment-recording-feedback-row {
  border-color: #c8d8ef;
  background: #fff;
}

.assignment-recording-feedback-row .download-action-btn {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.84rem;
}

.assignment-recording-select-btn {
  border: 1px solid #bfd2ef;
  border-radius: 999px;
  background: #fff;
  color: #005bff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 7px 12px;
  max-width: 100%;
  min-height: 34px;
  box-shadow: 0 2px 7px rgba(0, 91, 255, 0.08);
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.assignment-recording-select-btn:hover {
  border-color: #2f73ea;
  color: #004ed8;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 91, 255, 0.16);
}

.assignment-recordings-table tr.active .assignment-recording-select-btn,
.assignment-recording-select-btn.is-selected {
  background: #2f73ea;
  border-color: #1f63d7;
  color: #fff;
  box-shadow: 0 7px 16px rgba(47, 115, 234, 0.25);
}

.assignment-recording-name-cell {
  text-align: left;
}

.assignment-recording-name-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  max-width: 100%;
}

.assignment-recording-name-actions .assignment-recording-analysis-buttons {
  justify-content: center;
}

.assignment-recording-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.assignment-recording-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.assignment-recording-buttons .download-action-btn {
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.84rem;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
}

.assignment-recording-audio-player {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(34px, auto);
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid #cfe0f8;
  border-radius: 999px;
  background: #fff;
  color: #07152f;
  box-shadow: 0 8px 18px rgba(31, 111, 235, 0.06);
}

.assignment-recording-audio-current,
.assignment-recording-audio-duration {
  min-width: 34px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #07152f;
  text-align: center;
}

.assignment-recording-audio-player input[type="range"] {
  width: 100%;
  min-width: 0;
}

.assignment-recording-audio-play {
  width: 34px;
  height: 34px;
  border: 1px solid #b9d2fb;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1f6feb;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.assignment-recording-audio-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #1f6feb;
}

.assignment-recording-audio-play.is-playing .assignment-recording-audio-icon {
  width: 12px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, #1f6feb 0 35%, transparent 35% 65%, #1f6feb 65% 100%);
}

.assignment-recording-audio-loading {
  width: 14px;
  height: 14px;
  border: 2px solid #b9d2fb;
  border-top-color: #1f6feb;
  border-radius: 999px;
  animation: assignment-audio-spin 0.8s linear infinite;
}

@keyframes assignment-audio-spin {
  to { transform: rotate(360deg); }
}
.assignment-recording-audio-play:hover:not(:disabled) {
  background: #dbeafe;
  border-color: #7fb0ff;
  box-shadow: 0 8px 18px rgba(31, 111, 235, 0.16);
  transform: translateY(-1px);
}

.assignment-recording-audio-play:active:not(:disabled) {
  transform: translateY(0);
}

.assignment-recording-audio-range {
  width: 100%;
  min-width: 0;
  accent-color: #2f6fed;
}

.assignment-recording-submit-buttons {
  margin-top: 1px;
}

.assignment-recording-buttons .assignment-submit-recording-btn {
  min-height: 30px;
  padding: 5px 14px;
  border-color: #1f6feb;
  background: #2f6fed;
  color: #fff;
  font-size: 0.84rem;
  box-shadow: 0 8px 16px rgba(47, 111, 237, 0.18);
}

.assignment-recording-buttons .assignment-submit-recording-btn:hover:not(:disabled) {
  border-color: #155bd3;
  background: #155bd3;
  color: #fff;
  box-shadow: 0 12px 24px rgba(47, 111, 237, 0.24);
  transform: translateY(-1px);
}

.assignment-recording-buttons .assignment-submit-recording-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(47, 111, 237, 0.16);
}

.assignment-row-actions .assignment-start-btn,
.assignment-row-actions .assignment-start-btn.download-action-btn {
  border-color: #1f6feb;
  background: #2f6fed;
  color: #fff;
  box-shadow: 0 8px 16px rgba(47, 111, 237, 0.18);
}

.assignment-row-actions .assignment-start-btn:hover:not(:disabled),
.assignment-row-actions .assignment-start-btn.download-action-btn:hover:not(:disabled) {
  border-color: #155bd3;
  background: #155bd3;
  color: #fff;
  box-shadow: 0 12px 24px rgba(47, 111, 237, 0.24);
  transform: translateY(-1px);
}

.assignment-row-actions .assignment-start-btn:active:not(:disabled),
.assignment-row-actions .assignment-start-btn.download-action-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(47, 111, 237, 0.16);
}

.assignment-status-cell .assignment-submit-recording-btn {
  min-height: 30px;
  padding: 5px 14px;
  border-color: #1f6feb;
  background: #2f6fed;
  color: #fff;
  font-size: 0.84rem;
  box-shadow: 0 8px 16px rgba(47, 111, 237, 0.18);
}

.assignment-status-cell .assignment-submit-recording-btn:hover:not(:disabled) {
  border-color: #155bd3;
  background: #155bd3;
  color: #fff;
  box-shadow: 0 12px 24px rgba(47, 111, 237, 0.24);
  transform: translateY(-1px);
}

.assignment-status-cell .assignment-submit-recording-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(47, 111, 237, 0.16);
}

.assignment-speed-readout {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #d5dfef;
  border-radius: 10px;
  background: #f8fbff;
  color: #07122f;
}

.assignment-run-readouts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 10px 0 4px;
}

.assignment-run-readouts[hidden] {
  display: none;
}

.assignment-run-readouts .assignment-speed-readout {
  margin-top: 0;
  min-height: 86px;
  padding: 12px 8px;
  border: 1px solid #d5dfef;
  border-radius: 8px;
  background: #f7f9fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.assignment-run-readouts .assignment-microphone-readout {
  grid-column: 5 / 7;
  grid-row: 1;
}

.assignment-run-readouts .assignment-speed-readout:not(.assignment-voice-readout):not(.assignment-microphone-readout):not(.assignment-speech-to-text-readout) {
  grid-column: span 2;
  grid-row: 1;
}

.assignment-run-readouts .assignment-voice-readout {
  grid-column: 1 / 4;
  grid-row: 2;
}

.assignment-run-readouts .assignment-speech-to-text-readout {
  grid-column: 4 / 7;
  grid-row: 2;
}

.assignment-run-readouts .assignment-speech-to-text-readout small {
  color: #52627a;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .assignment-run-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assignment-run-readouts .assignment-speed-readout:not(.assignment-voice-readout):not(.assignment-microphone-readout):not(.assignment-speech-to-text-readout) {
    grid-column: auto;
    grid-row: 1;
  }
  .assignment-run-readouts .assignment-voice-readout {
    grid-column: 1;
    grid-row: 2;
  }
  .assignment-run-readouts .assignment-speech-to-text-readout {
    grid-column: 2;
    grid-row: 2;
  }
  .assignment-run-readouts .assignment-microphone-readout {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

.agent-transcript-panel {
  margin: 10px auto 0;
  text-align: left;
}

.agent-transcript-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #005eff;
  border-radius: 8px;
  background: #eaf3ff;
  color: #0758d3;
  text-align: center;
  color: #0059ff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.agent-transcript-toggle::after {
  content: "\2197";
  justify-self: center;
  color: currentColor;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.agent-transcript-toggle:hover {
  background: #2f6fed;
  border-color: #1f6feb;
  color: #fff;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
}

.agent-transcript-window {
  margin-top: 8px;
  padding: 12px 14px;
  height: calc(8 * 1.45em + 24px);
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid #c7dcff;
  border-radius: 8px;
  background: #fff;
  color: #06143a;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.agent-transcript-window[hidden] {
  display: none;
}

.translated-agent-transcript-panel[hidden] { display: none; }
.translated-agent-transcript-title { margin: 0; padding: 10px 14px; border: 1px solid #8fb9f7; border-radius: 8px 8px 0 0; background: #f0f6ff; color: #0758d3; font-size: 1rem; font-weight: 800; text-align: center; }
.translated-agent-transcript-window { margin-top: 0; border-top: 0; border-radius: 0 0 8px 8px; background: #f8fbff; }

.assignment-run-recordings-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #d5dfef;
  border-radius: 10px;
  background: #f8fbff;
}

.assignment-run-recordings-panel[hidden] {
  display: none;
}

#elevenAssignmentRecordingsList {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
}

#elevenAssignmentRecordingsList .assignment-recordings-table td,
#elevenAssignmentRecordingsList .assignment-recordings-table tr.is-alt td,
#elevenAssignmentRecordingsList .assignment-recordings-table tbody tr td,
#elevenAssignmentRecordingsList .assignment-recordings-table tr.active td {
  background: #fff;
}

#elevenAssignmentRecordingsList .assignment-recordings-table td:nth-child(1),
#elevenAssignmentRecordingsList .assignment-recordings-table td:nth-child(2),
#elevenAssignmentRecordingsList .assignment-recordings-table td:nth-child(3),
#elevenAssignmentRecordingsList .assignment-recording-select-btn {
  font-size: 0.95rem;
}
#elevenAssignmentRecordingsList .assignment-recordings-table tr:hover td {
  background: #f7fbff;
}

.eleven-assignment-recording-card { margin-top: 14px; overflow: hidden; border: 1px solid #a9c9f7; border-radius: 9px; background: #eff6ff; }
.eleven-assignment-recording-card.is-selected { border-color: #075ee5; box-shadow: 0 0 0 1px #075ee5; }
.eleven-assignment-recording-dashboard.roleplay-status-drilldown { border: 0; border-radius: 0; }
.roleplay-status-drilldown .roleplay-status-detail-card h3,
#elevenTab .eleven-assignment-recording-dashboard .roleplay-status-detail-card h3 { color: #111; }
.roleplay-status-drilldown .roleplay-status-latest-card { display: flex; flex-direction: column; }
.roleplay-status-drilldown .roleplay-status-latest-card > h3,
.roleplay-status-drilldown .roleplay-status-latest-card .roleplay-status-wave-icon { display: none; }
.eleven-assignment-recording-meta { display: flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: auto; padding-top: 12px; }
.eleven-assignment-waveform-icon { display: block; width: 44px; height: auto; flex: 0 0 auto; }
.eleven-assignment-recording-status { display: inline-flex; align-items: center; padding: 0; }
.roleplay-status-drilldown .eleven-assignment-recording-status.is-submitted .assignment-status-badge {
  border-color: #4f8ff0;
  color: #064fb8;
  background: #dbeafe;
  box-shadow: 0 2px 6px rgba(7, 94, 229, .14);
}
.roleplay-status-load-recording-card { cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.roleplay-status-load-recording-card:hover,
.roleplay-status-load-recording-card:focus-visible { outline: 0; border-color: #75aaf6; background: #e8f2ff; box-shadow: 0 5px 14px rgba(7, 94, 229, .16); transform: translateY(-1px); }
.eleven-assignment-recording-footer { display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid #cdddf3; background: #fff; }
.eleven-assignment-recording-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.eleven-assignment-recording-actions .download-action-btn { font-size: .95rem; font-weight: 700; }
.eleven-assignment-recording-actions .download-action-btn:not(.danger-button) {
  border-color: #075ee5;
  color: #0758d3;
  background: #eaf3ff;
  box-shadow: none;
}
.eleven-assignment-recording-actions .download-action-btn:not(.danger-button):hover:not(:disabled) {
  border-color: #075ee5;
  color: #fff;
  background: #075ee5;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
}
.eleven-assignment-recording-actions .download-action-btn.danger-button {
  border-color: #c71920;
  color: #c71920;
  background: #fff0f1;
  box-shadow: none;
}
.eleven-assignment-recording-actions .download-action-btn.danger-button:hover:not(:disabled) {
  border-color: #c71920;
  color: #fff;
  background: #c71920;
  box-shadow: 0 4px 10px rgba(199, 25, 32, .2);
}
.eleven-assignment-recording-dashboard .roleplay-status-settings-actions { gap: 0; }
.eleven-assignment-recording-dashboard .roleplay-status-settings-link {
  border: 0;
  border-bottom: 1px solid #e1e8f2;
  border-radius: 0;
  padding: 10px 2px;
  color: #075ee5;
  background: transparent;
  box-shadow: none;
}
.eleven-assignment-recording-dashboard .roleplay-status-settings-link:hover {
  border-bottom-color: #e1e8f2;
  color: #003f9e;
  background: #e8f2ff;
  box-shadow: none;
}
.eleven-assignment-recording-dashboard .roleplay-status-metric-card.meets-minimum-score > strong { color: #07833d; }
.eleven-assignment-recording-dashboard .roleplay-status-metric-card.below-minimum-score > strong { color: #c71920; }
.assignment-table .roleplay-status-start-action { min-width: 76px; min-height: 40px; padding: 8px 16px; border-radius: 7px; font-size: .98rem; }
.assignment-table .roleplay-status-row-actions .roleplay-status-primary-action,
.assignment-table .roleplay-status-row-actions .roleplay-status-edit-action {
  min-width: 76px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: .98rem;
}

.assignment-speed-readout[hidden] {
  display: none;
}

.assignment-speed-readout span {
  color: #34415a;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.15;
}

.assignment-speed-readout strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #07152f;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.25;
}

.assignment-voice-readout strong {
  font-size: 0.86rem;
  font-weight: 400;
}

.assignment-recording-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto auto auto;
  gap: 8px;
  align-items: center;
}

.assignment-recording-row button,
.assignment-action-btn {
  min-height: 38px;
}

.assignment-feedback-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 64px minmax(0, 60ch) auto auto;
  gap: 10px;
  align-items: center;
  background: #f8fbff;
  width: fit-content;
  max-width: 100%;
}

.assignment-feedback-row span,
.assignment-feedback-row textarea {
  width: min(60ch, 100%);
  max-width: 60ch;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.assignment-feedback-row em {
  justify-self: start;
}

.assignment-feedback-edit-row .download-action-btn {
  min-height: 38px;
  padding: 8px 16px;
}

/* Keep the Voice Agent assignment actions visually primary. These rules live
   at the end of the stylesheet so generic button/select rules cannot reset them. */
#elevenTab .roleplay-assignment-display button.roleplay-assignment-detail-btn,
#elevenTab .roleplay-assignment-display .roleplay-assignment-detail-actions button {
  border-color: #005eff !important;
  border-radius: 7px;
  background-color: #eaf3ff !important;
  background-image: none !important;
  color: #0758d3 !important;
  -webkit-text-fill-color: #0758d3;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  min-width: 175px;
  padding: 9px 10px;
  text-align: left;
}

#elevenTab .roleplay-assignment-display button.roleplay-assignment-detail-btn::after,
#elevenTab .roleplay-assignment-display .roleplay-assignment-detail-actions button::after {
  content: "\2197";
  justify-self: center;
  color: currentColor;
  -webkit-text-fill-color: currentColor;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

#elevenTab .roleplay-assignment-display button.roleplay-assignment-detail-btn:hover:not(:disabled),
#elevenTab .roleplay-assignment-display .roleplay-assignment-detail-actions button:hover:not(:disabled) {
  border-color: #1f6feb !important;
  background-color: #2f6fed !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
  transform: translateY(-1px);
}

#elevenTab .roleplay-assignment-display .roleplay-assignment-display-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  justify-content: initial;
  min-width: 175px;
  min-height: 38px;
  border-color: #005eff;
  border-radius: 7px;
  padding: 9px 10px;
  color: #0758d3;
  background: #eaf3ff;
  font-size: .95rem;
  text-align: left;
  box-shadow: none;
}

#elevenTab .roleplay-assignment-display .roleplay-assignment-display-attachment::after {
  content: "\2193";
  justify-self: center;
  color: currentColor;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

#elevenTab .roleplay-assignment-display .roleplay-assignment-display-attachment:hover {
  border-color: #1f6feb;
  color: #fff;
  background: #2f6fed;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
  transform: translateY(-1px);
}

#elevenTab .user-roleplay-language-row select {
  border-color: #005eff !important;
  background-color: #eaf3ff !important;
  background-image: none !important;
  color: #0758d3 !important;
  -webkit-text-fill-color: #0758d3;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

#elevenTab .user-roleplay-language-row select:hover,
#elevenTab .user-roleplay-language-row select:focus-visible {
  border-color: #0046c7 !important;
  background-color: #2f6fed !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
  transform: translateY(-1px);
}

#elevenTab .user-roleplay-language-row select option {
  background: #fff;
  color: #07152f;
}

.delete-comment-btn {
  color: #d71920;
  background: #f8fafc;
  border-color: #cfd8e3;
  box-shadow: none;
}

.delete-comment-btn:hover {
  color: #b00020;
  background: #eef2f7;
  border-color: #b9c5d4;
  transform: translateY(-1px);
}

.delete-comment-btn:active {
  transform: translateY(0);
  background: #e5eaf0;
}

.assignment-cancel-user-btn {
  min-height: 30px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

.assignment-user-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.assignment-review-table th,
.assignment-review-table td {
  font-size: 0.88rem;
}

.assignment-review-table th:nth-child(1),
.assignment-review-table td:nth-child(1) { width: 16%; }
.assignment-review-table th:nth-child(2),
.assignment-review-table td:nth-child(2) { width: 8%; }
.assignment-review-table th:nth-child(3),
.assignment-review-table td:nth-child(3) { width: 12%; }
.assignment-review-table th:nth-child(4),
.assignment-review-table td:nth-child(4) { width: 14%; }
.assignment-review-table th:nth-child(5),
.assignment-review-table td:nth-child(5) { width: 10%; }
.assignment-review-table th:nth-child(6),
.assignment-review-table td:nth-child(6) { width: 14%; }
.assignment-review-table th:nth-child(7),
.assignment-review-table td:nth-child(7) { width: 8%; }
.assignment-review-table th:nth-child(8),
.assignment-review-table td:nth-child(8) { width: 6%; }
.assignment-review-table th:nth-child(9),
.assignment-review-table td:nth-child(9) { width: 6%; }
.assignment-review-table th:nth-child(10),
.assignment-review-table td:nth-child(10) { width: 6%; }

.completed-roleplays-table th:nth-child(6),
.completed-roleplays-table td:nth-child(6) {
  width: 72px;
  max-width: 72px;
  text-align: center;
}

.completed-roleplays-table th:nth-child(7),
.completed-roleplays-table td:nth-child(7) {
  width: 120px;
}

.completed-roleplays-table th:nth-child(8),
.completed-roleplays-table td:nth-child(8) {
  width: 150px;
}

.assignment-status-date {
  display: block;
  margin-top: 4px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.2;
}

.completed-roleplay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.roleplay-status-summary {
  margin: 0 0 14px;
}

.roleplay-status-filter-panel { margin: 0 0 12px; }
.roleplay-status-filter-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: fit-content;
  min-width: 175px;
  align-items: center;
  gap: 12px;
  border: 1px solid #005eff;
  border-radius: 7px;
  padding: 9px 10px;
  color: #0758d3;
  background: #eaf3ff;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.roleplay-status-filter-toggle::-webkit-details-marker { display: none; }
.roleplay-status-filter-toggle:hover {
  border-color: #1f6feb;
  color: #fff;
  background: #2f6fed;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
}
.roleplay-status-filter-close-label { display: none; }
.roleplay-status-filter-panel[open] .roleplay-status-filter-open-label { display: none; }
.roleplay-status-filter-panel[open] .roleplay-status-filter-close-label { display: inline; }
.roleplay-status-filter-panel[open] .roleplay-status-filter-arrow { transform: rotate(180deg); }
.roleplay-status-filter-fields { margin-top: 10px; }

.roleplay-status-heading h2 { margin: 0; color: #0b1f4d; font-size: 1.5rem; }
.roleplay-status-heading p { margin: 5px 0 18px; color: #586780; }
.roleplay-status-tiles { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 16px; }
.roleplay-status-tile { position: relative; display: flex; min-height: 112px; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #cbd8eb; border-radius: 8px; background: #fff; color: #0b1f4d; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(15,42,85,.04); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; }
.roleplay-status-tile:hover { transform: translateY(-3px); border-color: #2563eb; background: #f7faff; box-shadow: 0 10px 24px rgba(37,99,235,.16); }
.roleplay-status-tile:focus-visible { outline: 3px solid rgba(37,99,235,.3); outline-offset: 2px; }
.roleplay-status-tile.is-selected { border: 2px solid #2563eb; background: #f2f7ff; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.roleplay-status-tile-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 10px; background: #eaf2ff; color: #164bb8; }
.roleplay-status-tile-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.roleplay-status-tile-copy { display: grid; gap: 7px; }
.roleplay-status-tile-copy strong { font-size: 1rem; font-weight: 800; }
.roleplay-status-tile-copy b { font-size: 1.8rem; line-height: 1; }
.roleplay-status-completion-rate { color: #067333; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.roleplay-status-pending-started .roleplay-status-tile-icon { color: #a96500; background: #fff4da; }
.roleplay-status-rejected .roleplay-status-tile-icon { color: #d71920; background: #ffeaec; }
.roleplay-status-completed .roleplay-status-tile-icon { color: #067333; background: #e4f7eb; }
.roleplay-status-filter-chip { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #73a7f8; border-radius: 6px; padding: 8px 12px; color: #0758d3; background: #f5f9ff; font: inherit; font-weight: 700; cursor: pointer; }
.roleplay-status-filter-chip:hover { border-color: #0758d3; background: #eaf2ff; }
#roleplayStatusMessage:empty { display: none; }
.roleplay-status-intro { margin: 0 0 14px; color: #111827; font-size: 1rem; line-height: 1.45; }
#roleplayStatusList .scenario-empty { color: #111827; font: inherit; }
.roleplay-status-results-heading { margin: 12px 0 10px; color: #0b1f4d; font-size: 1.05rem; }
.assignment-table .roleplay-status-primary-action { border-color: #8db9f8; color: #0758d3; background: #eaf3ff; }
.assignment-table .roleplay-status-primary-action:hover { border-color: #075ee5; color: #fff; background: #075ee5; box-shadow: 0 4px 10px rgba(7,94,229,.2); }
.roleplay-status-overflow { position: relative; }
.roleplay-status-overflow summary { display: grid; width: 34px; min-height: 32px; place-items: center; border: 1px solid #b9c8dc; border-radius: 6px; color: #17345f; background: #fff; font-size: 1.25rem; font-weight: 800; cursor: pointer; list-style: none; }
.roleplay-status-overflow summary::-webkit-details-marker { display: none; }
.roleplay-status-overflow summary:hover { border-color: #075ee5; color: #075ee5; background: #f2f7ff; }
.roleplay-status-overflow-menu { position: absolute; z-index: 8; top: calc(100% + 5px); right: 0; display: grid; gap: 6px; min-width: 105px; padding: 7px; border: 1px solid #cbd8eb; border-radius: 7px; background: #fff; box-shadow: 0 10px 24px rgba(15,42,85,.18); }
.roleplay-status-overflow-menu .download-action-btn { width: 100%; }
.assignment-table .roleplay-status-edit-action { border-color: #8db9f8; color: #0758d3; background: #eaf3ff; }
.assignment-table .roleplay-status-edit-action:hover { border-color: #075ee5; color: #fff; background: #075ee5; }
.assignment-table .roleplay-status-danger-action,
.assignment-table .roleplay-status-delete-action { border-color: #f1a0a4; color: #c71920; background: #fff0f1; }
.assignment-table .roleplay-status-danger-action:hover,
.assignment-table .roleplay-status-delete-action:hover { border-color: #d71920; color: #fff; background: #d71920; }
.assignment-table .roleplay-status-delete-action { display: inline-grid; width: 32px; min-width: 32px; height: 32px; min-height: 32px; place-items: center; padding: 0; line-height: 1; text-align: center; }
.roleplay-status-no-reports { display: block; padding: 10px 2px; color: #111827; font-size: .9rem; }
.roleplay-status-private-recording { line-height: 1.45; }
.roleplay-status-drilldown { display: grid; grid-template-columns: 1.35fr .7fr .7fr 1.15fr; gap: 14px; padding: 16px; border: 1px solid #a9c9f7; border-radius: 9px; background: #eff6ff; }
.roleplay-status-detail-card { min-width: 0; border: 1px solid #d4e0ef; border-radius: 8px; padding: 16px; background: #fff; }
.roleplay-status-detail-card h3 { margin: 0 0 15px; color: #0b1f4d; font-size: .92rem; }
.roleplay-status-latest-main { display: flex; align-items: center; gap: 12px; }
.roleplay-status-latest-main div { display: grid; gap: 5px; min-width: 0; }
.roleplay-status-latest-main strong { overflow: hidden; color: #0b1f4d; text-overflow: ellipsis; white-space: nowrap; }
.roleplay-status-latest-main span { color: #718096; font-size: .83rem; }
.roleplay-status-latest-main .roleplay-status-recording-language { color: #334155; font-weight: 700; }
.roleplay-status-latest-main .roleplay-status-submitter-email { color: #334155; font-weight: 600; }
.roleplay-status-wave-icon { color: #0968ef; }
.roleplay-status-wave-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.roleplay-status-metric-card { display: flex; flex-direction: column; }
.roleplay-status-metric-card > strong { margin-top: 0; color: #075ee5; font-size: 2rem; }
.roleplay-status-metric-card > span { margin-top: 4px; color: #718096; font-size: .82rem; }
.roleplay-status-analysis-link { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 9px; width: 100%; align-items: center; border: 0; border-bottom: 1px solid #e1e8f2; padding: 10px 2px; color: #075ee5; background: transparent; text-align: left; cursor: pointer; }
.roleplay-status-analysis-link:hover { color: #003f9e; background: #e8f2ff; }
.roleplay-status-analysis-link strong { color: inherit; font: inherit; font-weight: 700; }
.roleplay-status-analysis-link .roleplay-status-language-code { color: #111827; }
.roleplay-status-analysis-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.roleplay-status-analysis-link .roleplay-status-report-icon { width: 18px; height: 18px; justify-self: center; }
.roleplay-status-analysis-link .roleplay-status-open-icon { width: 16px; height: 16px; justify-self: center; }
.roleplay-status-settings-actions { display: grid; }
.roleplay-status-settings-link { display: grid; grid-template-columns: 1fr 18px; gap: 9px; width: 100%; align-items: center; border: 0; border-bottom: 1px solid #e1e8f2; padding: 10px 2px; color: #075ee5; background: transparent; text-align: left; font: inherit; font-weight: 700; cursor: pointer; }
.roleplay-status-settings-link::after { content: "\2197"; justify-self: center; color: currentColor; font-size: 17px; font-weight: 500; line-height: 1; }
.roleplay-status-settings-link:hover { color: #003f9e; background: #e8f2ff; }
.assignment-recording-card-detail-row > td { padding: 0 !important; border-bottom: 1px solid #8dbbff; background: #eff6ff !important; }
.assignment-recording-card-detail-row .roleplay-status-drilldown { border-width: 0 0 1px; border-radius: 0; }
.assignment-review-detail.has-card-dashboard { padding: 0 0 16px; background: #f8fbff; }
.assignment-review-detail.has-card-dashboard > .section-heading,
.assignment-review-detail.has-card-dashboard > .assignment-review-meta,
.assignment-review-detail.has-card-dashboard > .assignment-review-score,
.assignment-review-detail.has-card-dashboard > .assignment-review-audio-loader,
.assignment-review-detail.has-card-dashboard > .assignment-detail-roleplay-actions { display: none !important; }
.assignment-review-card-dashboard { border-width: 0 0 1px; border-radius: 0; }
.assignment-review-workflow { margin: 16px; padding: 16px; border: 1px solid #cbd8eb; border-radius: 8px; background: #fff; }
.assignment-review-workflow > h3 { margin: 0 0 12px; color: #0b1f4d; font-size: 1rem; }
.assignment-review-workflow .assignment-review-player-row { margin: 8px 0 12px; }
.assignment-review-workflow .assignment-review-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.assignment-review-detail.has-card-dashboard #assignmentAcceptBtn { border-color: #138a43; color: #fff; background: #18a957; }
.assignment-review-detail.has-card-dashboard #assignmentAcceptBtn:hover { border-color: #0d6d34; background: #118744; }
.assignment-review-detail.has-card-dashboard #assignmentReviewTranscriptBtn,
.assignment-review-detail.has-card-dashboard #assignmentReviewTranscriptEnBtn,
.assignment-review-detail.has-card-dashboard #assignmentReviewCoachBtn,
.assignment-review-detail.has-card-dashboard #assignmentReviewCoachEnBtn { display: none !important; }
@media (max-width: 1050px) { .roleplay-status-tiles { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .roleplay-status-drilldown { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .roleplay-status-tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
    column-gap: 10px;
    row-gap: 16px;
  }
  .roleplay-status-tile {
    min-height: 86px;
    gap: 10px;
    padding: 12px;
  }
  .roleplay-status-tile-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .roleplay-status-tile-icon svg { width: 25px; height: 25px; }
  .roleplay-status-tile-copy { gap: 4px; }
  .roleplay-status-tile-copy strong { font-size: .9rem; }
  .roleplay-status-tile-copy b { font-size: 1.45rem; }
  .roleplay-status-drilldown { grid-template-columns: 1fr; }
}

/* The assignments workspace can be narrow while the browser viewport is still
   wide (for example in split-screen or an embedded app pane). Respond to the
   usable panel width as well as to the viewport media queries above. */
@container assignments-workspace (max-width: 760px) {
  .roleplay-status-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 16px;
  }

  .roleplay-status-tile {
    min-width: 0;
    min-height: 86px;
    gap: 10px;
    padding: 12px;
  }

  .roleplay-status-tile-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .roleplay-status-tile-icon svg { width: 25px; height: 25px; }
  .roleplay-status-tile-copy { min-width: 0; gap: 4px; }
  .roleplay-status-tile-copy strong { font-size: .9rem; overflow-wrap: anywhere; }
  .roleplay-status-tile-copy b { font-size: 1.45rem; }

  .learner-assignment-table,
  .mobile-assignment-table:not(.learner-assignment-table) {
    width: 100%;
    table-layout: fixed;
  }

  .learner-assignment-table th:nth-child(3),
  .learner-assignment-table .assignment-table-row > td:nth-child(3),
  .learner-assignment-table th:nth-child(4),
  .learner-assignment-table .assignment-table-row > td:nth-child(4),
  .learner-assignment-table th:nth-child(5),
  .learner-assignment-table .assignment-table-row > td:nth-child(5),
  .learner-assignment-table th:nth-child(6),
  .learner-assignment-table .assignment-table-row > td:nth-child(6),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(3),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(3),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(4),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(4),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(5),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(5),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(6),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(6),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(7),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(7) {
    display: none;
  }

  .learner-assignment-table th:nth-child(1),
  .learner-assignment-table .assignment-table-row > td:nth-child(1),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(1),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(1) { width: 28%; }

  .learner-assignment-table th:nth-child(2),
  .learner-assignment-table .assignment-table-row > td:nth-child(2),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(2),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(2) { width: 48%; }

  .learner-assignment-table th:nth-child(7),
  .learner-assignment-table .assignment-table-row > td:nth-child(7),
  .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(8),
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(8) { width: 24%; }

  .learner-assignment-table th,
  .learner-assignment-table .assignment-table-row > td,
  .mobile-assignment-table:not(.learner-assignment-table) th,
  .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td {
    padding: 8px 5px;
    overflow-wrap: anywhere;
  }

  .learner-assignment-table .assignment-row-actions,
  .learner-assignment-table .assignment-start-btn,
  .mobile-assignment-table .assignment-row-actions,
  .mobile-assignment-table .assignment-start-btn {
    width: 100%;
    min-width: 0;
  }
}

.roleplay-status-count-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  overflow: hidden;
}

.roleplay-status-count-table th,
.roleplay-status-count-table td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #dce6f5;
}

.roleplay-status-count-table th {
  background: #e8f0fd;
  color: #0f2a55;
}

.roleplay-status-count-btn {
  min-width: 58px;
  border: 1px solid #cfdcf0;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--ink);
  padding: 7px 14px;
  font: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.roleplay-status-count-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16);
}

.roleplay-status-count-btn.roleplay-status-all {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  font-weight: 700;
}

.roleplay-status-count-btn.roleplay-status-all:hover {
  background: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.roleplay-status-count-btn.roleplay-status-pending { background: #eef2f7; border-color: #cbd5e1; }
.roleplay-status-count-btn.roleplay-status-started { background: #fef3c7; border-color: #facc15; }
.roleplay-status-count-btn.roleplay-status-pending-started { background: #e0f2fe; border-color: #60a5fa; }
.roleplay-status-count-btn.is-submitted { background: #dbeafe; border-color: #93c5fd; }
.roleplay-status-count-btn.is-rejected { background: #fee2e2; border-color: #fca5a5; }
.roleplay-status-count-btn.is-completed { background: #dcfce7; border-color: #86efac; }

.assignment-review-detail-row .assignment-review-detail {
  padding: 14px 16px 18px;
}

.assignment-review-detail .section-heading h2,
.assignment-recording-detail-heading h2 {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
}

.assignment-review-layout {
  display: block;
}

#assignmentReviewTab {
  align-items: start;
  gap: 12px;
}

#assignmentReviewTab .tab-intro-card {
  align-self: start;
  min-height: 0;
  padding: 12px 16px;
}

#completedRoleplaysTab,
#roleplayStatusTab {
  align-content: start;
  gap: 12px;
}

#completedRoleplaysTab .tab-intro-card,
#roleplayStatusTab .tab-intro-card {
  align-self: start;
  min-height: 0;
  padding: 12px 16px;
}

.assignment-review-audio {
  width: min(620px, 100%);
}

.assignment-review-comments {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

/* Final narrow-pane overrides for Roleplay Assignments. The app can be shown
   inside a narrow column even when its surrounding browser layout is wider. */
#assignmentsTab,
#assignmentsTab .assignment-workspace-panel,
#assignmentsTab .assignment-list-panel,
#assignmentsTab .assignment-list,
#assignmentsTab .roleplay-status-summary {
  min-width: 0;
  max-width: 100%;
}

#assignmentsTab.is-compact-assignments {
  overflow-x: hidden;
}

#assignmentsTab.is-compact-assignments .roleplay-status-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
  row-gap: 16px !important;
  width: 100%;
}

#assignmentsTab.is-compact-assignments .roleplay-status-tile {
  width: 100%;
  min-width: 0;
  min-height: 82px;
  gap: 8px;
  padding: 10px;
}

#assignmentsTab.is-compact-assignments .roleplay-status-tile-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

#assignmentsTab.is-compact-assignments .roleplay-status-tile-icon svg { width: 23px; height: 23px; }
#assignmentsTab.is-compact-assignments .roleplay-status-tile-copy { min-width: 0; gap: 3px; }
#assignmentsTab.is-compact-assignments .roleplay-status-tile-copy strong {
  font-size: .84rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#assignmentsTab.is-compact-assignments .roleplay-status-tile-copy b { font-size: 1.35rem; }

#assignmentsTab.is-compact-assignments .mobile-assignment-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

#assignmentsTab.is-compact-assignments .mobile-assignment-table th:nth-child(3),
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td:nth-child(3),
#assignmentsTab.is-compact-assignments .mobile-assignment-table th:nth-child(4),
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td:nth-child(4),
#assignmentsTab.is-compact-assignments .mobile-assignment-table th:nth-child(5),
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td:nth-child(5),
#assignmentsTab.is-compact-assignments .mobile-assignment-table th:nth-child(6),
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td:nth-child(6),
#assignmentsTab.is-compact-assignments .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(7),
#assignmentsTab.is-compact-assignments .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(7) {
  display: none !important;
}

#assignmentsTab.is-compact-assignments .mobile-assignment-table th:nth-child(1),
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td:nth-child(1) { width: 27% !important; }
#assignmentsTab.is-compact-assignments .mobile-assignment-table th:nth-child(2),
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td:nth-child(2) { width: 48% !important; }
#assignmentsTab.is-compact-assignments .learner-assignment-table th:nth-child(7),
#assignmentsTab.is-compact-assignments .learner-assignment-table .assignment-table-row > td:nth-child(7),
#assignmentsTab.is-compact-assignments .mobile-assignment-table:not(.learner-assignment-table) th:nth-child(8),
#assignmentsTab.is-compact-assignments .mobile-assignment-table:not(.learner-assignment-table) .assignment-table-row > td:nth-child(8) { width: 25% !important; }

#assignmentsTab.is-compact-assignments .mobile-assignment-table th,
#assignmentsTab.is-compact-assignments .mobile-assignment-table .assignment-table-row > td {
  padding: 7px 4px !important;
  overflow-wrap: anywhere;
}

#assignmentsTab.is-compact-assignments .assignment-start-btn {
  width: 100%;
  min-width: 0;
  padding-inline: 5px;
}

@media (max-width: 600px) {
  .assignment-recordings-table,
  .assignment-recordings-table tbody,
  .assignment-recordings-table .assignment-recording-table-row,
  .assignment-recordings-table .assignment-recording-table-row > td {
    display: block;
    width: 100%;
  }

  .assignment-recordings-table {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .assignment-recordings-table colgroup,
  .assignment-recordings-table thead {
    display: none;
  }

  .assignment-recordings-table .assignment-recording-table-row {
    overflow: hidden;
    border: 1px solid #cbd9ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 42, 85, 0.06);
  }

  .assignment-recordings-table .assignment-recording-table-row > td {
    box-sizing: border-box;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #e5edf8;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    text-align: left;
  }

  .assignment-recordings-table .assignment-recording-table-row > td:last-child {
    border-bottom: 0;
  }

  .assignment-recordings-table .assignment-recording-table-row > td::before {
    content: attr(data-mobile-label);
    display: block;
    margin-bottom: 6px;
    color: #174ea6;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
  }

  .assignment-recordings-table .assignment-recording-select-btn,
  .assignment-recordings-table .assignment-recording-buttons .download-action-btn,
  .assignment-recordings-table .assignment-recording-output-cell .download-action-btn {
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }

  .assignment-recordings-table .assignment-recording-name-actions,
  .assignment-recordings-table .assignment-recording-actions,
  .assignment-recordings-table .assignment-recording-buttons {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .assignment-recordings-table .assignment-recording-output-cell .download-action-btn {
    margin-right: 6px;
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  .assignments-layout,
  .assignment-review-layout,
  .assignment-form-grid,
  .assignment-recording-action-bar,
  .assignment-recording-row {
    grid-template-columns: 1fr;
  }

  .assignment-actions-menu-wrap {
    justify-self: stretch;
  }
}

.menu-access-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 12px 0 6px;
}

.menu-access-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--blue);
  font-weight: 600;
}

.menu-access-toolbar select {
  min-width: 220px;
}

.menu-access-scope-help {
  margin-top: 4px;
  color: #334155;
}

.assignment-create-canvas .assignment-eleven-voice-section {
  margin: 16px 0 14px;
}

.assignment-create-canvas .assignment-eleven-voice-section h3 {
  margin: 0 0 8px;
  color: #0766d1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.assignment-create-canvas .assignment-eleven-voice-section > p {
  margin: 0 0 14px;
  max-width: 980px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}

.assignment-create-canvas .assignment-eleven-voice-section label > span:first-child,
.assignment-create-canvas .assignment-eleven-voice-section .session-duration-heading {
  color: #0766d1;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.assignment-create-canvas .assignment-eleven-voice-section .avatar-choice-grid {
  grid-template-columns: repeat(2, minmax(280px, 420px));
}



/* Assignment Eleven voice layout polish */
.assignment-create-canvas .assignment-eleven-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.assignment-create-canvas .assignment-eleven-controls-panel .session-duration-control {
  margin: 0;
}

.assignment-create-canvas .assignment-eleven-controls-panel .assignment-eleven-control-title {
  display: block;
  margin: 0 0 8px;
  color: #0766d1;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.assignment-create-canvas .assignment-eleven-controls-panel p {
  margin: 0 0 10px;
  max-width: 380px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.assignment-create-canvas .assignment-eleven-controls-panel input[type="number"] {
  margin-top: 0;
}

.assignment-create-canvas .assignment-eleven-duration-control .range-row {
  margin-top: 8px;
}

.assignment-create-canvas .eleven-voice-panel .voice-status {
  margin: 12px 0 0;
}
.admin-companies-table input {
  width: 100%;
  min-width: 0;
}

.admin-companies-table th,
.admin-companies-table td {
  text-align: left;
  vertical-align: middle;
}

.admin-company-update-row {
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

.subscription-ended-panel.active {
  display: block;
}

.subscription-ended-card {
  max-width: 760px;
  margin: 0;
}

.admin-time-row {
  grid-template-columns: minmax(220px, 1fr) 140px 130px 128px 130px 128px 86px;
}

.admin-subscription-end-display[readonly] {
  background: #f7f9fc;
}

.quota-card[hidden] {
  display: none !important;
}

#adminCompaniesStatus[data-state="processing"] {
  color: #8a5a00;
  font-size: 1rem;
  font-weight: 700;
}

#adminCompaniesStatus[data-state="completed"] {
  color: #176b3a;
  font-size: 1rem;
  font-weight: 700;
}

#adminCompaniesStatus[data-state="error"] {
  color: var(--red);
  font-size: 1rem;
  font-weight: 700;
}

.admin-company-logo-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-company-logo-thumb {
  display: block;
  max-width: 120px;
  max-height: 46px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.company-logo-modal {
  width: min(560px, 100%);
}

.company-logo-description {
  margin: 0;
  color: #334155;
  line-height: 1.45;
}

.company-logo-file-row {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 1rem;
}

.company-logo-file-row > span:first-child {
  color: var(--blue);
  font-weight: 650;
}

.company-logo-file-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-logo-file-controls input {
  flex: 1 1 auto;
  min-height: 42px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #f8fbff;
  color: var(--ink);
}

.company-logo-select {
  border: 1px solid #4b5563;
  color: #111827;
  background: #f3f4f6;
  box-shadow: none;
  white-space: nowrap;
}

.company-logo-select:hover {
  border-color: #374151;
  background: #e5e7eb;
  transform: translateY(-1px);
}

.company-logo-upload {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.company-logo-upload:hover {
  border-color: #1558d6;
  background: #1558d6;
  transform: translateY(-1px);
}

.voice-input-test-panel {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(360px, 1fr);
  gap: 16px;
  align-items: start;
}

.voice-input-test-card {
  border: 1px solid #c9dcff;
  border-radius: 8px;
  background: #f8fbff;
  padding: 16px;
}

.voice-input-test-card h3 {
  color: var(--blue);
  margin: 0 0 12px;
  font-size: 1rem;
}

.voice-input-test-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.voice-input-test-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
}

.voice-input-test-grid input {
  min-height: 42px;
  border: 1px solid #c9dcff;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.voice-input-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

#voiceInputTestStartBtn {
  border-color: #1f66e5;
  background: #2f6fed;
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 111, 237, 0.18);
}

#voiceInputTestStartBtn:not(:disabled):hover {
  border-color: #1558d6;
  background: #1558d6;
  transform: translateY(-1px);
}

#voiceInputTestStartBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.voice-input-test-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  border: 1px solid #c9dcff;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  color: #34445d;
  text-align: center;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.voice-input-test-status[data-state="processing"] {
  color: #7a4a00;
  background: #fff6df;
  border-color: #f0b34d;
}

.voice-input-test-status[data-state="listening"],
.voice-input-test-status[data-state="completed"] {
  color: #006b18;
  background: #e9fff0;
  border-color: #65c47b;
}

.voice-input-test-status[data-state="error"] {
  color: #b00020;
  background: #fff0f0;
  border-color: #f4a5a5;
}

.voice-input-test-meter {
  height: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf8;
}

.voice-input-test-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #2f6fed;
  transition: width 80ms linear;
}

.voice-input-test-mic {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 22px auto;
  border-radius: 999px;
  background: #9ba3b0;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.voice-input-test-mic svg {
  width: 52px;
  height: 52px;
}

.voice-input-test-mic.is-running,
.voice-input-test-mic.is-listening {
  background: #35aa61;
  box-shadow: 0 18px 40px rgba(53, 170, 97, 0.18);
}

.voice-input-test-mic.is-listening {
  animation: voiceMicBlink 1s infinite;
}

.voice-input-test-output {
  min-height: 160px;
  max-height: 300px;
  overflow: auto;
  border: 1px solid #d5e2f6;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.voice-input-test-entry {
  border-bottom: 1px solid #e3ebfa;
  padding: 8px 0;
}

.voice-input-test-entry:last-child {
  border-bottom: 0;
}

.voice-input-test-entry strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
}

.voice-input-test-entry-header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.voice-input-test-entry-header strong {
  margin-bottom: 0;
}

.voice-input-test-play {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid #bcd2f6;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.voice-input-test-play:hover {
  border-color: #1f66e5;
  background: #eaf2ff;
  transform: translateY(-1px);
}

.voice-input-test-entry pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
}

.user-settings-panel {
  max-width: 980px;
}

#userSettingsTab.active {
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}

.user-settings-intro {
  min-height: 0;
  padding: 12px 16px;
}

.user-settings-intro h3 {
  margin-bottom: 5px;
}

.user-settings-intro p {
  max-width: 920px;
  line-height: 1.35;
}

.user-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: end;
}

.user-settings-field,
.user-settings-language-field {
  display: block;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f7fbff;
}

.user-settings-field span,
.user-settings-language-field span {
  display: block;
  margin-bottom: 6px;
  color: #0766d1;
  font-weight: 700;
}

#userSettingsTab .user-settings-intro h3 {
  color: #0766d1;
}

.user-settings-field strong {
  color: #07122f;
  font-weight: 400;
}

.user-settings-language-field select {
  width: 100%;
  border-color: #005eff !important;
  background-color: #eaf3ff !important;
  background-image: none !important;
  color: #0758d3 !important;
  -webkit-text-fill-color: #0758d3;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.user-settings-language-field select:hover,
.user-settings-language-field select:focus-visible {
  border-color: #0046c7 !important;
  background-color: #2f6fed !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
  transform: translateY(-1px);
}

.user-settings-language-field select option {
  background: #fff;
  color: #07152f;
}

.user-settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.user-settings-status {
  margin: 0;
  color: #24324a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.user-settings-status[data-state="processing"] {
  color: #8a5a00;
}

.user-settings-status[data-state="success"] {
  color: #006b1f;
}

.user-settings-status[data-state="error"] {
  color: #b00020;
}

@media (max-width: 900px) {
  .voice-input-test-panel,
  .voice-input-test-grid {
    grid-template-columns: 1fr;
  }
}

.settings-english-translation-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(86, 105, 135, 0.22);
  border-radius: 10px;
  background: rgba(246, 249, 253, 0.82);
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.45;
}

.settings-english-translation-option input {
  margin-top: 3px;
}

.settings-english-translation-option span,
.settings-english-translation-option small {
  display: block;
}

.settings-english-translation-option small {
  margin-top: 3px;
  color: var(--ink);
  font-size: inherit;
  line-height: 1.35;
}

.settings-english-translation-option strong {
  color: inherit;
  font-size: inherit;
}

.admin-recording-storage-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(86, 105, 135, 0.22);
  border-radius: 10px;
  background: rgba(246, 249, 253, 0.82);
}

.admin-recording-storage-option input {
  width: auto;
  margin-top: 3px;
}

.admin-recording-storage-option span,
.admin-recording-storage-option small {
  display: block;
}

.admin-recording-storage-option small {
  margin-top: 3px;
  color: #5d6878;
  line-height: 1.35;
}

/* Full semantic colors for the assignment status tiles. */
.roleplay-status-tile.roleplay-status-submitted {
  --selected-tile-accent: #1d4ed8;
  border-color: #1d4ed8;
  background: #eff6ff;
}

.roleplay-status-tile.roleplay-status-submitted .roleplay-status-tile-copy strong {
  color: #1d4ed8;
}

.roleplay-status-tile.roleplay-status-rejected {
  --selected-tile-accent: #b91c1c;
  border-color: #b91c1c;
  background: #fff1f2;
}

.roleplay-status-tile.roleplay-status-rejected .roleplay-status-tile-copy strong {
  color: #b91c1c;
}

.roleplay-status-tile.roleplay-status-completed {
  --selected-tile-accent: #15803d;
  border-color: #15803d;
  background: #f0fdf4;
}

.roleplay-status-tile.roleplay-status-completed .roleplay-status-tile-copy strong {
  color: #15803d;
}

.roleplay-status-tile.roleplay-status-submitted:hover {
  border-color: #1e3a8a;
  background: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .25);
}

.roleplay-status-tile.roleplay-status-rejected:hover {
  border-color: #7f1d1d;
  background: #dc2626;
  box-shadow: 0 10px 24px rgba(185, 28, 28, .25);
}

.roleplay-status-tile.roleplay-status-completed:hover {
  border-color: #14532d;
  background: #16a34a;
  box-shadow: 0 10px 24px rgba(21, 128, 61, .25);
}

.roleplay-status-tile.roleplay-status-submitted:hover .roleplay-status-tile-copy strong,
.roleplay-status-tile.roleplay-status-submitted:hover .roleplay-status-tile-copy b,
.roleplay-status-tile.roleplay-status-rejected:hover .roleplay-status-tile-copy strong,
.roleplay-status-tile.roleplay-status-rejected:hover .roleplay-status-tile-copy b,
.roleplay-status-tile.roleplay-status-completed:hover .roleplay-status-tile-copy strong,
.roleplay-status-tile.roleplay-status-completed:hover .roleplay-status-tile-copy b,
.roleplay-status-tile.roleplay-status-completed:hover .roleplay-status-completion-rate {
  color: #fff;
}

.roleplay-status-tile.roleplay-status-submitted:hover .roleplay-status-tile-icon,
.roleplay-status-tile.roleplay-status-rejected:hover .roleplay-status-tile-icon,
.roleplay-status-tile.roleplay-status-completed:hover .roleplay-status-tile-icon {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.roleplay-status-tile.roleplay-status-pending-started {
  --selected-tile-accent: #64748b;
  border-color: #64748b;
  background: #f1f5f9;
}

.roleplay-status-tile.roleplay-status-pending-started .roleplay-status-tile-copy strong {
  color: #475569;
}

.roleplay-status-tile.roleplay-status-pending-started .roleplay-status-tile-icon {
  color: #475569;
  background: #e2e8f0;
}

.roleplay-status-tile.roleplay-status-pending-started:hover {
  border-color: #334155;
  color: #fff;
  background: #64748b;
  box-shadow: 0 10px 24px rgba(71, 85, 105, .25);
}

.roleplay-status-tile.roleplay-status-pending-started:hover .roleplay-status-tile-copy strong,
.roleplay-status-tile.roleplay-status-pending-started:hover .roleplay-status-tile-copy b {
  color: #fff;
}

.roleplay-status-tile.roleplay-status-pending-started:hover .roleplay-status-tile-icon {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.roleplay-status-tile.roleplay-status-all {
  --selected-tile-accent: #64748b;
  border-color: #e2e8f0;
  background: #ffffff;
}

.roleplay-status-tile.roleplay-status-all .roleplay-status-tile-copy strong {
  color: #475569;
}

.roleplay-status-tile.roleplay-status-all .roleplay-status-tile-icon {
  color: #64748b;
  background: #f8fafc;
}

.roleplay-status-tile.roleplay-status-all:hover {
  border-color: #7b8a9e;
  color: #fff;
  background: #a8b3c2;
  box-shadow: 0 8px 18px rgba(100, 116, 139, .14);
}

.roleplay-status-tile.roleplay-status-all:hover .roleplay-status-tile-copy strong,
.roleplay-status-tile.roleplay-status-all:hover .roleplay-status-tile-copy b {
  color: #fff;
}

.roleplay-status-tile.roleplay-status-all:hover .roleplay-status-tile-icon {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.roleplay-status-tile.is-selected,
.roleplay-status-tile.is-selected:hover {
  box-sizing: border-box;
  border-color: var(--selected-tile-accent, #2563eb);
  border-width: 4px;
  background: var(--selected-tile-accent, #2563eb);
  color: #fff;
}

.roleplay-status-tile.is-selected::after {
  content: none;
}

.roleplay-status-tile.is-selected .roleplay-status-tile-copy,
.roleplay-status-tile.is-selected .roleplay-status-tile-copy strong,
.roleplay-status-tile.is-selected .roleplay-status-tile-copy b,
.roleplay-status-tile.is-selected .roleplay-status-completion-rate {
  color: #fff;
}

.roleplay-status-tile.is-selected .roleplay-status-tile-icon {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.roleplay-status-tile.roleplay-status-all.is-selected {
  border-color: #64748b;
}

@media (max-width: 760px) {
  /* Assignment lists retain only Action, Roleplay Name and Status on mobile. */
  #assignmentsTab .mobile-assignment-table th:nth-child(n + 3),
  #assignmentsTab .mobile-assignment-table .assignment-table-row > td:nth-child(n + 3) {
    display: none !important;
  }

  #assignmentsTab .mobile-assignment-table th:last-child,
  #assignmentsTab .mobile-assignment-table .assignment-table-row > td:last-child {
    display: table-cell !important;
    width: 25% !important;
  }
}
:root .voice-playback-permission {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  padding: 16px;
  border: 2px solid #175cd3;
  border-radius: 12px;
  background: #fff;
  color: #172b4d;
  box-shadow: 0 6px 28px #0003;
}
:root .voice-playback-permission p { margin: 0 0 12px; }
:root .voice-playback-permission button {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  white-space: normal;
  background: #175cd3;
  color: #fff;
  border-radius: 8px;
}
/* Compact Roleplay Settings: native details keep keyboard/touch semantics. */
@media (max-width: 700px) {
  #mainSettingsMirror .scenario-layout { grid-template-columns: minmax(0, 1fr); }
  #mainSettingsMirror .scenario-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #mainSettingsMirror .scenario-fields > * { grid-column: 1 / -1; min-width: 0; }
  #mainSettingsMirror .scenario-fields > .scenario-collapse-panel {
    display: block;
    grid-column: auto;
    align-self: start;
    padding: 0;
    border: 1px solid #cbdcf4;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #eaf3ff);
    box-shadow: 0 5px 16px #16396b12;
  }
  #mainSettingsMirror .scenario-collapse-panel:not([open]) > :not(summary) { display: none !important; }
  #mainSettingsMirror .scenario-panel-summary {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1;
    margin: 0;
    padding: 14px 10px;
    text-align: center;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 750;
    color: #153660;
    overflow-wrap: anywhere;
    border-radius: 16px;
  }
  #mainSettingsMirror .scenario-panel-summary::before {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background-size: 28px 28px;
  }
  #mainSettingsMirror .mobile-voice-settings-panel > summary::before {
    background: #7354bd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
  }
  #mainSettingsMirror .scenario-panel-summary::after { display: none; }
  #mainSettingsMirror .scenario-panel-toggle-btn { display: none; }
  #mainSettingsMirror .scenario-panel-summary:focus-visible { outline: 3px solid #1762d6; outline-offset: 3px; }
  #mainSettingsMirror .scenario-fields > .scenario-collapse-panel[open] {
    grid-column: 1 / -1;
    padding: 14px;
    background: #fff;
    border-color: #4380d9;
  }
  #mainSettingsMirror .scenario-collapse-panel[open] > summary {
    aspect-ratio: auto;
    min-height: 64px;
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #dbe6f6;
    border-radius: 0;
  }
  #mainSettingsMirror .scenario-collapse-panel[open] > summary::after { display: inline-grid; flex: 0 0 24px; }
  #mainSettingsMirror .scenario-panel-controls {
    position: sticky;
    top: 8px;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    background: #f1f6ff;
    border: 1px solid #cfddf1;
    border-radius: 14px;
    box-shadow: 0 4px 12px #16396b18;
  }
  #mainSettingsMirror .scenario-panel-control-btn {
    min-height: 48px;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
    font-weight: 750;
    color: #174886;
    border: 2px solid #2464be;
  }
  #mainSettingsMirror [id$="openAllScenarioPanelsBtn"] { background: #195fc1; color: #fff; }
  #mainSettingsMirror .scenario-fields input:not([type="checkbox"]):not([type="radio"]),
  #mainSettingsMirror .scenario-fields select, #mainSettingsMirror .scenario-fields textarea {
    box-sizing: border-box; min-width: 0; max-width: 100%; font-size: 16px;
  }
  #mainSettingsMirror .scenario-fields select { min-height: 44px; }
  #mainSettingsMirror .scenario-title-input-row, #mainSettingsMirror .language-row,
  #mainSettingsMirror .learner-file-upload-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  #mainSettingsMirror .scenario-label-row, #mainSettingsMirror .product-document-actions,
  #mainSettingsMirror .scenario-field-mode { flex-wrap: wrap; min-width: 0; }
  #mainSettingsMirror .scenario-panel-title-text { min-width: 0; }
  #mainSettingsMirror .scenario-collapse-panel > label { margin-bottom: 16px; }
  #mainSettingsMirror .mobile-voice-settings-panel > section { padding: 0; border: 0; box-shadow: none; }
}
/* Public product story, scoped below the existing login experience. */
.marketing-home { border-top: 0; padding-top: 12px; color: #152743; }
.marketing-home *, .marketing-home *::before, .marketing-home *::after { box-sizing: border-box; }
.marketing-home h2, .marketing-home h3, .marketing-home p { margin: 0; }
.marketing-home p { line-height: 1.65; }
.marketing-home .marketing-eyebrow { color: #2360af; font-size: 12px; letter-spacing: .13em; font-weight: 800; line-height: 1.5; }
.marketing-home .marketing-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.marketing-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px;
  padding: clamp(24px, 4.5vw, 58px); border-radius: 26px; overflow: hidden;
  background: radial-gradient(ellipse at 90% 80%, #2d205c 0, transparent 60%), #07162e;
  color: #fff;
}
.marketing-hero .marketing-eyebrow { color: #7dddf3; }
.marketing-hero h2 { margin-top: 18px; color: #fff; font-size: clamp(32px, 3.8vw, 49px); line-height: 1.12; letter-spacing: -.035em; }
.marketing-home span { display: inline; margin-top: 0; color: inherit; font-size: inherit; }
.marketing-hero h2 span {
  display: block;
  color: #81ddf0;
  font: inherit;
  letter-spacing: inherit;
}
.marketing-hero .marketing-lead { margin-top: 22px; font-size: 17px; color: #d2deed; max-width: 520px; }
.marketing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.marketing-home .marketing-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 14px 20px; border: 1px solid transparent; border-radius: 10px; background: #80e2f3; color: #07162e; font-weight: 750; text-decoration: none; }
.marketing-home .marketing-button:hover { background: #b0eff8; }
.marketing-home .marketing-linkedin-demo { background: #0a66c2; color: #fff; gap: 12px; line-height: 1.4; }
.marketing-home .marketing-linkedin-demo:hover { background: #084f96; }
.marketing-demo-action { margin-top: 22px; }
.marketing-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 330px; min-width: 0; }
.marketing-home .marketing-text-link { display: inline-flex; align-items: center; gap: 8px; color: #215daf; font-weight: 700; text-underline-offset: 5px; }
.marketing-hero .marketing-text-link { color: #fff; }
.marketing-home a:focus-visible { outline: 3px solid #cc88ff; outline-offset: 5px; }
.marketing-hero .marketing-hero-note { margin-top: 22px; color: #adbed5; font-size: 13px; }
.marketing-signup-invite { min-width: 0; padding-left: 30px; border-left: 1px solid #395478; }
.marketing-signup-invite h3 { margin-top: 14px; color: #fff; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.2; }
.marketing-signup-invite > p:not(.marketing-eyebrow) { margin-top: 18px; color: #d2deed; font-size: 17px; }
.marketing-signup-invite .marketing-button { margin-top: 24px; }
.marketing-signup-invite > p.marketing-signup-note { color: #adbed5; font-size: 13px; }
.marketing-signup-body { margin-top: 22px; color: #d2deed; font-size: 17px; }
.marketing-signup-invite .marketing-actions .marketing-button { margin-top: 0; }
@media (min-width: 901px) {
  .marketing-hero, .marketing-login-experience {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    padding-inline: clamp(24px, 4.5vw, 58px);
  }
  .marketing-hero .marketing-signup-invite { padding-left: 0; border-left: 0; }
  .marketing-hero::after, .marketing-login-experience::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 36px;
    bottom: 36px;
    width: 1px;
    background: #dce5f0;
    pointer-events: none;
  }
  .marketing-hero::after { top: clamp(24px, 4.5vw, 58px); bottom: clamp(24px, 4.5vw, 58px); background: #395478; }
}
@media (min-width: 901px) {
  .marketing-hero { grid-template-rows: auto auto auto auto auto; align-items: stretch; row-gap: 20px; }
  .marketing-hero-copy, .marketing-signup-invite { display: grid; grid-row: span 5; grid-template-rows: subgrid; min-width: 0; }
  .marketing-hero-copy > *, .marketing-signup-invite > * { align-self: start; }
  .marketing-hero .marketing-eyebrow { display: flex; align-items: center; min-height: 32px; }
  .marketing-hero h2, .marketing-hero .marketing-signup-invite h3 { margin-top: 0; font-size: clamp(32px, 3.8vw, 49px); line-height: 1.12; letter-spacing: -.035em; }
  .marketing-hero .marketing-lead, .marketing-hero .marketing-signup-body,
  .marketing-hero .marketing-actions, .marketing-hero .marketing-hero-note,
  .marketing-hero .marketing-signup-note { margin-top: 0; }
  .marketing-hero .marketing-actions { align-self: stretch; align-items: center; }
}
.marketing-practice-showcase { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 42px; padding: 36px 0; border-bottom: 1px solid #dce5f0; }
.marketing-practice-image { min-width: 0; margin: 0; }
.marketing-practice-image img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 32px #183b6518; }
.marketing-home .marketing-loop-horizontal { margin-bottom: 32px; }
.marketing-home .marketing-loop-horizontal li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.marketing-home .marketing-loop-horizontal .marketing-icon,
.marketing-home .marketing-loop-horizontal .marketing-waveform {
  display: block;
  width: 60px;
  height: 60px;
  min-width: 60px;
  max-width: 60px;
  margin: 0;
  object-fit: contain;
}
.marketing-home .marketing-loop-horizontal h3 { font-size: 19px; line-height: 1.35; }
.marketing-home .marketing-loop-horizontal p { font-size: 17px; line-height: 1.65; }
.marketing-home .marketing-loop-horizontal .marketing-practise-step {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
}
.marketing-home .marketing-loop-horizontal .marketing-practise-step .marketing-waveform {
  width: 60px;
  height: 60px;
  padding: 0;
}
.marketing-language-intro { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 24px; padding: 32px 12px 8px; }
.marketing-language-robot { display: block; width: 110px; height: auto; }
.marketing-product-logo { display: block; width: min(100%, 410px); height: auto; margin: 0 0 22px; }
.marketing-language-intro h2 { margin: 0 0 14px; font-size: 30px; letter-spacing: -.02em; line-height: 1.2; }
.marketing-language-intro p { color: #435672; font-size: 17px; }
@media (max-width: 600px) {
  .marketing-language-intro { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-inline: 4px; }
  .marketing-language-robot { justify-self: center; }
  .marketing-product-logo { width: min(100%, 370px); margin: 0 auto 22px; }
}
#homepageLogin { min-width: 0; width: 100%; scroll-margin-top: 24px; }
.marketing-home .homepage-login-title { font-size: 25px; line-height: 1.25; color: #0758d3; margin-bottom: 8px; }
.marketing-home #homepageLogin > .beta-note { margin-bottom: 16px; }
.marketing-home .auth-card span { display: block; margin-top: 3px; color: var(--muted); font-size: .9rem; }
.marketing-hero-visual { margin: 0; min-width: 0; border: 1px solid #395478; border-radius: 18px; overflow: hidden; background: #040b21; box-shadow: 0 18px 54px #0004; }
.marketing-hero-visual img { display: block; width: 100%; height: auto; aspect-ratio: 2.4; object-fit: cover; object-position: center 17%; }
.marketing-hero-visual figcaption { display: flex; align-items: center; gap: 10px; padding: 18px; font-size: 13px; color: #dbeafa; line-height: 1.5; border-top: 1px solid #254265; }
.marketing-live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #80e2f3; }
.marketing-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 32px 12px; list-style: none; border-bottom: 1px solid #dce5f0; }
.marketing-loop li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.marketing-loop svg { color: #2273aa; }
.marketing-loop li:nth-child(2) svg { color: #8b4abc; }
.marketing-loop li:nth-child(3) svg { color: #087d80; }
.marketing-loop li:nth-child(4) svg { color: #ba4945; }
.marketing-loop h3 { font-size: 17px; margin-bottom: 5px; }
.marketing-loop p { color: #52617a; font-size: 14px; }
.marketing-section { padding: 64px 0; }
.marketing-section-heading { max-width: 700px; margin-bottom: 30px; }
.marketing-home .marketing-section-heading h2 { margin-top: 10px; font-size: clamp(27px, 3vw, 36px); line-height: 1.2; letter-spacing: -.025em; }
.marketing-section-heading > p:last-child:not(.marketing-eyebrow) { margin-top: 14px; color: #52617a; font-size: 17px; }
.marketing-usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.marketing-usecases article { padding: 24px 0; border-top: 1px solid #d7e3f1; }
.marketing-case-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #e8f3ff; color: #2468af; margin-bottom: 18px; }
.marketing-usecases article:nth-child(3n + 2) .marketing-case-icon { background: #f1eafa; color: #8051ac; }
.marketing-usecases article:nth-child(3n) .marketing-case-icon { background: #e1f4f1; color: #137c79; }
.marketing-usecases h3 { font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.marketing-usecases p { color: #52617a; font-size: 16px; }
.marketing-audiences { display: grid; grid-template-columns: 1fr 1fr; background: #edf3fb; border-radius: 22px; padding: 38px; gap: 50px; }
.marketing-audiences article + article { border-left: 1px solid #c9d7eb; padding-left: 50px; }
.marketing-audiences h2 { margin: 12px 0 18px; font-size: 30px; letter-spacing: -.02em; line-height: 1.2; }
.marketing-audiences article { display: flex; flex-direction: column; min-width: 0; }
.marketing-audiences article > p:not(.marketing-eyebrow) { color: #435672; }
.marketing-audiences article p strong { color: inherit; font-weight: 700; }
.marketing-audience-picture { margin: auto 0 0; padding-top: 24px; }
.marketing-audience-picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #c9d7eb;
  border-radius: 14px;
}
.marketing-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; }
.marketing-how {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
.marketing-how .marketing-section-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.marketing-how .marketing-steps li {
  text-align: center;
}
.marketing-how .marketing-step-number {
  margin-right: auto;
  margin-left: auto;
}
.marketing-home .marketing-step-number { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; margin: 0 0 20px; background: #07162e; color: #fff; font-size: 30px; font-weight: 750; line-height: 1; }
.marketing-steps li:nth-child(even) .marketing-step-number { background: #087f8c; }
.marketing-steps h3 { font-size: 18px; line-height: 1.35; margin-bottom: 10px; }
.marketing-steps p { color: #52617a; font-size: 15px; }
.marketing-product { padding-top: 8px; }
.marketing-experience-intro { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: 28px; margin-bottom: 32px; }
.marketing-experience-intro > img { display: block; width: 100%; height: auto; border-radius: 16px; }
.marketing-experience-intro .marketing-section-heading { margin-bottom: 0; min-width: 0; }
.marketing-experience-details { display: grid; gap: 28px; min-width: 0; }
.marketing-experience-details #homepageLogin { order: initial; color: var(--ink); }
.marketing-experience-details .auth-card { background: #fff; border-radius: 16px; }
.marketing-opening-experience .marketing-language-intro { padding: 0; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
.marketing-opening-experience .marketing-language-robot { width: 150px; max-width: 100%; }
@media (max-width: 1100px) {
  .marketing-opening-experience .marketing-language-intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .marketing-opening-experience { grid-template-columns: minmax(0, 1fr); }
}
.marketing-login-experience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 42px; row-gap: 52px; padding: 36px 0; border-bottom: 1px solid #dce5f0; }
.marketing-login-experience #homepageLogin { order: initial; }
.marketing-login-experience .marketing-section-heading { margin-bottom: 0; }
.homepage-login-collapsed { display: none !important; }
.marketing-login-portrait { position: relative; display: flex; justify-content: center; min-width: 0; margin: 0; overflow: hidden; border-radius: 18px; background: #fff; }
.marketing-login-portrait img { display: block; width: 100%; height: auto; max-height: 760px; object-fit: contain; object-position: center; }
.marketing-login-portrait-woman img, .marketing-login-portrait-man img { object-position: center 18%; }
.marketing-story-experience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.marketing-practice-visual-card { position: absolute; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; padding: 15px 17px; background: rgba(3, 41, 84, .92); color: #fff; backdrop-filter: blur(10px); box-shadow: 0 12px 28px rgba(3,41,84,.2); }
.marketing-practice-visual-card span { color: #8ddcff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marketing-practice-visual-card strong { color: #fff; font-size: 17px; line-height: 1.35; }
.marketing-soft-section, .marketing-login-experience, .marketing-opening-experience, .marketing-loop-horizontal, .marketing-audiences, .marketing-how, .marketing-product {
  margin-top: 24px;
  border: 1px solid #dce6f1;
  border-radius: 24px;
  padding: clamp(30px, 4vw, 52px);
  box-shadow: 0 14px 34px rgba(3, 41, 84, .055);
}
.marketing-login-experience { background: #f5f9ff; }
.marketing-story-experience { background: #f7fbf8; }
.marketing-opening-experience { background: #fffaf3; }
.marketing-loop-horizontal { background: #f7f8fc; }
.marketing-audiences { background: #f3fafb; }
.marketing-how { background: #faf7fc; }
.marketing-product { background: #f6f9ff; }
@media (min-width: 901px) {
  .marketing-login-experience { align-items: start; column-gap: 56px; padding-inline: clamp(24px, 4.5vw, 58px); }
  .marketing-login-experience #homepageLogin { grid-column: 2; grid-row: 1; }
  .marketing-login-experience .marketing-login-portrait { grid-column: 1; grid-row: 1; }
  .marketing-story-experience .marketing-section-heading { grid-column: 1; grid-row: 1; align-self: center; }
  .marketing-story-experience .marketing-login-portrait { grid-column: 2; grid-row: 1; }
  .marketing-login-portrait { align-self: stretch; }
}
.corrective-behaviour-setting { display: flex !important; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #b9cff7; border-radius: 10px; background: #edf4ff; }
.corrective-behaviour-setting[hidden] { display: none !important; }
.corrective-behaviour-setting input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 3px 0 0; }
.corrective-behaviour-setting > span { line-height: 1.6; color: #000; font-weight: 400; }
.corrective-behaviour-setting > span > strong { color: #000; font-weight: 700; }
.corrective-coach-notice { padding: 14px; background: #edf4ff; border: 1px solid #b9cff7; border-radius: 8px; }
@media (max-width: 800px) {
  .marketing-login-experience { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .marketing-login-experience .marketing-login-portrait { grid-row: 1; }
  .marketing-login-experience #homepageLogin { grid-row: 2; }
  .marketing-story-experience { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .marketing-login-portrait img { height: auto; max-height: 680px; object-fit: contain; }
  .marketing-practice-visual-card { right: 12px; bottom: 12px; left: 12px; }
}
.marketing-opening-experience { padding: 36px 0; margin-bottom: 0; border-bottom: 1px solid #dce5f0; overflow: hidden; }
.marketing-opening-experience > img {
  transform: scale(1.26);
  transform-origin: center;
}
@media (min-width: 901px) {
  .marketing-opening-experience {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    padding-inline: clamp(24px, 4.5vw, 58px);
  }
  .marketing-opening-experience::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 36px;
    bottom: 36px;
    width: 1px;
    background: #dce5f0;
    pointer-events: none;
  }
  .marketing-opening-experience .marketing-language-intro { grid-template-columns: minmax(0, 1fr); }
}
.marketing-phone-showcase {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 280px));
  justify-content: center;
  align-items: start;
  gap: clamp(18px, 2.5vw, 36px);
  padding: 36px 0;
  margin-bottom: 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.marketing-phone-preview { margin: 0; min-width: 0; }
.marketing-phone-carousel { position: relative; background: #fff; padding: 12px 44px 24px; margin-bottom: 32px; }
.marketing-phone-carousel .marketing-phone-showcase { display: flex; position: relative; align-items: start; justify-content: flex-start; gap: 24px; width: 100%; max-width: 900px; margin: 0 auto; padding: 12px 0 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.marketing-phone-carousel .marketing-phone-showcase::-webkit-scrollbar { display: none; }
.marketing-phone-carousel .marketing-phone-preview { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.marketing-carousel-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.marketing-carousel-controls[hidden] { display: none; }
.marketing-carousel-dots { display: flex; gap: 4px; align-items: center; }
.marketing-carousel-controls .phone-carousel-dot { width: 28px; height: 28px; padding: 8px; border: 0; border-radius: 50%; background: #b8c5d7; background-clip: content-box; cursor: pointer; }
.marketing-carousel-controls .phone-carousel-dot[aria-current="true"] { background-color: #07162e; }
.marketing-carousel-controls .phone-carousel-arrow { position: absolute; top: 42%; width: 40px; height: 48px; padding: 0; border: 0; background: transparent; color: #07162e; font-size: 44px; line-height: 1; cursor: pointer; }
.phone-carousel-previous { left: 0; }
.phone-carousel-next { right: 0; }
.marketing-carousel-controls .phone-carousel-pause { padding: 8px 14px; border: 1px solid #b8c5d7; border-radius: 20px; background: #fff; color: #243c60; font-size: 13px; cursor: pointer; }
.marketing-carousel-status { color: #52617a; font-size: 13px; }
.marketing-carousel-controls button:focus-visible, .marketing-phone-carousel .marketing-phone-showcase:focus-visible { outline: 3px solid #286ef0; outline-offset: 3px; }
@media (max-width: 900px) {
  .marketing-phone-carousel .marketing-phone-showcase { max-width: 600px; }
  .marketing-phone-carousel .marketing-phone-preview { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
  .marketing-phone-carousel { padding-inline: 36px; }
  .marketing-phone-carousel .marketing-phone-showcase { max-width: 280px; }
  .marketing-phone-carousel .marketing-phone-preview { flex-basis: 100%; }
  .marketing-carousel-controls .phone-carousel-arrow { width: 32px; }
}
.marketing-phone-mockup { display: block; width: 100%; height: auto; border-radius: 24px; }
.marketing-phone-frame {
  position: relative;
  padding: 28px 6px 18px;
  border: 7px solid #172139;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 18px 32px #183b6526, 0 0 0 2px #aebcd0;
  overflow: hidden;
}
.marketing-phone-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 9px;
  border-radius: 12px;
  background: #172139;
}
.marketing-phone-frame::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 34%;
  width: 32%;
  height: 4px;
  border-radius: 4px;
  background: #172139;
}
.marketing-phone-frame img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19; object-fit: contain; background: #fff; }
.marketing-phone-preview figcaption { margin-top: 22px; text-align: center; color: #243c60; font-size: 17px; font-weight: 650; line-height: 1.4; }
@media (min-width: 701px) and (max-width: 1100px) {
  .marketing-phone-showcase { grid-template-columns: repeat(2, minmax(0, 280px)); }
}
@media (max-width: 700px) {
  .marketing-phone-showcase { grid-template-columns: minmax(0, 260px); gap: 32px; padding: 28px 0; }
}
@media (max-width: 700px) {
  .marketing-experience-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.marketing-product-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 34px 0; border-top: 1px solid #dce5f0; }
.marketing-product-row:nth-of-type(even) > div { order: 2; }
.marketing-product-number { display: block; font-size: 12px; color: #646d88; letter-spacing: .1em; font-weight: 750; margin-bottom: 16px; }
.marketing-product-row h3 { font-size: 29px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 18px; }
.marketing-product-row p { color: #52617a; font-size: 16px; margin-bottom: 18px; }
.marketing-product-row img { display: block; width: 100%; height: auto; border: 1px solid #d5e2f3; border-radius: 14px; box-shadow: 0 14px 32px #183b6512; }
.marketing-product-row.marketing-transcript-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.marketing-product-row.marketing-transcript-row > div { order: initial; width: 100%; max-width: 1000px; justify-self: center; }
.marketing-product-row.marketing-transcript-row img { width: 100%; max-width: 1000px; height: auto; justify-self: center; }
.marketing-transcript-example {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  border: 1px solid #cbd9ee;
  border-radius: 14px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 59, 101, .08);
}
.marketing-transcript-toolbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.marketing-transcript-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #064dff;
  font-size: 14px;
}
.marketing-transcript-toolbar select,
.marketing-transcript-downloads span {
  min-height: 38px;
  border: 1px solid #cbd9ee;
  border-radius: 8px;
  padding: 8px 12px;
  color: #07162e;
  background: #fff;
  font: inherit;
}
.marketing-transcript-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border-radius: 22px;
  padding: 6px 12px;
  color: #111;
  background: #f1f3f4;
  font-size: 13px;
}
.marketing-transcript-progress {
  display: block;
  flex: 1 1 140px;
  min-width: 80px;
  height: 3px;
  border-radius: 999px;
  background: #3f3f3f;
}
.marketing-transcript-downloads { display: flex; gap: 8px; }
.marketing-transcript-downloads span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
}
.marketing-transcript-workspace {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 14px;
}
.marketing-filler-summary,
.marketing-transcript-copy {
  border: 1px solid #cbd9ee;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}
.marketing-filler-summary h4 {
  margin: 0 0 10px;
  border-bottom: 1px solid #e3e9f2;
  padding-bottom: 10px;
  color: #07162e;
  font-size: 15px;
}
.marketing-filler-summary dl,
.marketing-filler-summary dl div { margin: 0; }
.marketing-filler-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.marketing-filler-summary dt,
.marketing-filler-summary dd {
  margin: 0;
  color: #111b2c;
  font-size: 15px;
  line-height: 1.55;
}
.marketing-transcript-copy { min-width: 0; }
.marketing-transcript-copy p {
  margin: 0 0 12px;
  color: #111;
  font-size: 15px;
  line-height: 1.48;
}
.marketing-transcript-copy p:last-child { margin-bottom: 0; }
.marketing-transcript-copy .marketing-transcript-learner { color: #0072d8; font-weight: 600; }
.marketing-transcript-copy mark { padding: 0 1px; color: inherit; background: #fff700; }
.marketing-transcript-copy mark.marketing-secondary-highlight { background: #ffdce5; }
@media (max-width: 900px) {
  .marketing-transcript-toolbar { grid-template-columns: minmax(0, 1fr); }
  .marketing-transcript-downloads { flex-wrap: wrap; }
  .marketing-transcript-workspace { grid-template-columns: minmax(0, 1fr); }
  .marketing-filler-summary dl { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .marketing-filler-summary dl div { min-width: 100px; }
}
@media (max-width: 600px) {
  .marketing-transcript-example { border-radius: 12px; padding: 7px; }
  .marketing-transcript-audio { gap: 7px; padding-inline: 10px; }
  .marketing-transcript-downloads { display: grid; grid-template-columns: minmax(0, 1fr); }
  .marketing-transcript-downloads span { justify-content: center; white-space: normal; }
  .marketing-transcript-copy p { font-size: 14px; }
}
.marketing-product-row.marketing-feedback-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; }
.marketing-product-row.marketing-feedback-row > div { order: initial; width: 100%; max-width: 800px; justify-self: center; }
.marketing-product-row.marketing-feedback-row img { width: 100%; max-width: 560px; height: auto; aspect-ratio: auto; justify-self: center; }

/* Final AI Voice roleplay selector alignment. Both selects intentionally share one visual language. */
#elevenTab .eleven-roleplay-selector {
  display: grid;
  gap: 8px;
  margin: -8px 0 14px;
  border: 0;
  padding: 0;
  background: transparent;
}
#elevenTab .eleven-roleplay-selector select,
#elevenTab .user-roleplay-language-row select {
  box-sizing: border-box;
  width: min(680px, 100%);
  min-height: 46px;
  border: 2px solid #005eff !important;
  border-radius: 8px;
  padding: 8px 38px 8px 12px;
  background-color: #eaf3ff !important;
  background-image: none !important;
  color: #0758d3 !important;
  -webkit-text-fill-color: #0758d3;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
#elevenTab .eleven-roleplay-selector select:hover,
#elevenTab .eleven-roleplay-selector select:focus-visible,
#elevenTab .user-roleplay-language-row select:hover,
#elevenTab .user-roleplay-language-row select:focus-visible {
  border-color: #0046c7 !important;
  background-color: #2f6fed !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
  transform: translateY(-1px);
  outline: none;
}
#elevenTab .eleven-roleplay-selector select option,
#elevenTab .user-roleplay-language-row select option {
  background: #fff;
  color: #07152f;
}
#elevenTab .user-roleplay-language-row { display: block; }

/* Final compact mobile Roleplay Settings toolbar. */
@media (max-width: 700px) {
  #settingsTab > .settings-page-intro { display: none !important; }
  #mainSettingsMirror .scenario-save-roleplay-callout p,
  #mainSettingsMirror .scenario-new-help { display: none !important; }
  #mainSettingsMirror .scenario-save-roleplay-callout { margin-top: 0; }
  #mainSettingsMirror .scenario-file-bar { position: relative; z-index: 90; }
  #mainSettingsMirror .scenario-file-menu-wrap { position: relative; z-index: 120; }
  #mainSettingsMirror .scenario-file-menu-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid #adc1df;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(20, 54, 96, .14);
    font-size: 0;
  }
  #mainSettingsMirror .scenario-file-menu-btn > span { display: none; }
  #mainSettingsMirror .scenario-file-menu-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 18px;
    border-top: 3px solid #17324f;
    border-bottom: 3px solid #17324f;
    background: linear-gradient(#17324f, #17324f) center / 25px 3px no-repeat;
    transform: translate(-50%, -50%);
  }
  #mainSettingsMirror .scenario-file-menu {
    z-index: 240;
    top: calc(100% + 7px);
    left: 0;
    min-width: min(260px, calc(100vw - 44px));
  }
  #mainSettingsMirror .scenario-picker-inline { margin-top: 0; }
  #mainSettingsMirror .scenario-panel-controls {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    width: fit-content;
    margin-left: auto;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #mainSettingsMirror .scenario-panel-controls .scenario-panel-control-btn {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 2px solid #2464be;
    border-radius: 12px;
    background: #fff;
    color: #0758d3;
    box-shadow: 0 3px 9px rgba(22, 57, 107, .12);
  }
  #mainSettingsMirror [id$="openAllScenarioPanelsBtn"] { background: #fff; color: #0758d3; }
}
.marketing-product-row.marketing-answer-coaching-row { grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr); gap: 28px; padding-bottom: 22px; }
.marketing-product-row.marketing-answer-coaching-row > div { order: initial; }
.marketing-answer-coaching-row > div { max-width: 920px; }
.marketing-product-row .marketing-detailed-coach-robot { width: min(100%, 215px); height: auto; border: 0; border-radius: 0; box-shadow: none; justify-self: center; align-self: center; }
.marketing-coach-summary {
  overflow: hidden;
  margin: 0 0 18px;
  border: 1px solid #cfd9e7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 59, 101, .08);
}
.marketing-coach-summary-content {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}
.marketing-coach-summary-content section {
  margin: 0;
}
.marketing-coach-summary h3 {
  margin: 0 0 8px;
  color: #0766d1;
  font-size: 16px;
  line-height: 1.35;
}
.marketing-coach-summary h3.marketing-coach-summary-good {
  color: #008000;
}
.marketing-coach-summary p,
.marketing-coach-summary li {
  color: #111b2c;
  font-size: 16px;
  line-height: 1.5;
}
.marketing-coach-summary p {
  margin: 0;
}
.marketing-coach-summary ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}
.marketing-coach-summary-callout {
  border-left: 3px solid #1677ff;
  padding: 11px 12px;
  background: #e8f2ff;
  color: #07162e !important;
}
.marketing-question-analysis { overflow: hidden; margin: 0 0 34px; border: 1px solid #cfd9e7; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(24, 59, 101, .08); }
.marketing-question-analysis-header { padding: 18px 20px 12px; border-bottom: 1px solid #dce5f0; }
.marketing-question-analysis-header h3 { margin: 0 0 8px; color: #0766d1; font-size: 19px; line-height: 1.3; }
.marketing-question-analysis-header p { margin: 0; color: #101a2d; font-size: 16px; }
.analysis-score { font-weight: 800; }
.analysis-score-average, .analysis-score-low { color: #d92d20; }
.analysis-score-good, .analysis-score-strong { color: #15803d; }
.marketing-question-analysis .marketing-question-score .analysis-score-good {
  color: #15803d;
}
.marketing-question-analysis .marketing-question-score .analysis-score-low {
  color: #d92d20;
}

/* SAS action palette for the Voice Roleplay entry screen and explicitly
   requested primary actions. Keep this block last so legacy component rules
   cannot restore the former single-color treatment. */
:root {
  --sas-light-blue: #c4defd;
  --sas-medium-blue: #4398f9;
  --sas-blue: #0766d1;
  --sas-midnight-blue: #032954;
  --sas-title-grey: #536273;
}

#userRoleplayOriginalLanguageLine.active-roleplay-heading {
  border-left-color: var(--sas-blue);
  background: var(--sas-title-grey);
}
#userRoleplayOriginalLanguageLine :is(.active-roleplay-kind, .active-roleplay-name, .active-roleplay-language),
#userRoleplayOriginalLanguageLine .active-roleplay-language :is(strong, span) {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#userRoleplayOriginalLanguageLine .active-roleplay-name {
  margin-bottom: 0;
}

#elevenTab #userRoleplayLanguageTitle {
  color: #000;
  font-weight: 400;
}

#elevenTab .eleven-roleplay-selector select {
  border-color: var(--sas-blue) !important;
  background-color: var(--sas-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
#elevenTab .eleven-roleplay-selector select:hover,
#elevenTab .eleven-roleplay-selector select:focus-visible {
  border-color: var(--sas-blue) !important;
  background-color: #eaf3ff !important;
  color: var(--sas-blue) !important;
  -webkit-text-fill-color: var(--sas-blue);
  box-shadow: 0 0 0 3px rgba(67, 152, 249, .3);
  transform: translateY(-1px);
}
#elevenTab .eleven-roleplay-selector select option {
  background: #fff;
  color: var(--sas-midnight-blue);
}

#elevenTab .user-roleplay-language-row select {
  border-color: var(--sas-blue) !important;
  background-color: var(--sas-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
#elevenTab .user-roleplay-language-row select:hover,
#elevenTab .user-roleplay-language-row select:focus-visible {
  border-color: var(--sas-blue) !important;
  background-color: #eaf3ff !important;
  color: var(--sas-blue) !important;
  -webkit-text-fill-color: var(--sas-blue);
  box-shadow: 0 0 0 3px rgba(67, 152, 249, .3);
  transform: translateY(-1px);
}
#elevenTab .user-roleplay-language-row select option {
  background: #fff;
  color: var(--sas-midnight-blue);
}

#elevenTab .roleplay-assignment-display .assignment-detail-roleplay-actions button.assignment-instructions-btn {
  border-color: var(--sas-blue) !important;
  background: var(--sas-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
#elevenTab .roleplay-assignment-display .assignment-detail-roleplay-actions button.assignment-instructions-btn:hover:not(:disabled) {
  border-color: var(--sas-midnight-blue) !important;
  background: var(--sas-midnight-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
#elevenTab .roleplay-assignment-display .assignment-detail-roleplay-actions button.assignment-criteria-btn {
  border-color: var(--sas-medium-blue) !important;
  background: var(--sas-medium-blue) !important;
  color: var(--sas-midnight-blue) !important;
  -webkit-text-fill-color: var(--sas-midnight-blue);
}
#elevenTab .roleplay-assignment-display .assignment-detail-roleplay-actions button.assignment-criteria-btn:hover:not(:disabled) {
  border-color: var(--sas-blue) !important;
  background: var(--sas-light-blue) !important;
  color: var(--sas-midnight-blue) !important;
  -webkit-text-fill-color: var(--sas-midnight-blue);
}
#elevenTab .roleplay-assignment-display .roleplay-assignment-display-attachment {
  border-color: var(--sas-midnight-blue);
  padding: 0 0 0 12px;
  background: #fff;
  color: var(--sas-midnight-blue);
  overflow: hidden;
}
#elevenTab .roleplay-assignment-display .roleplay-assignment-display-attachment::after {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 42px;
  min-height: 42px;
  margin-left: 4px;
  color: #fff;
  background: var(--sas-midnight-blue);
}
#elevenTab .roleplay-assignment-display .roleplay-assignment-display-attachment:hover {
  border-color: var(--sas-midnight-blue);
  background: var(--sas-light-blue);
  color: var(--sas-midnight-blue);
}

:is(
  #saveRoleplayMainBtn,
  #saveRoleplayBottomBtn,
  #saveUserSettingsBtn,
  #loginBtn,
  #selectElevenVoiceBtn,
  #assignmentSelectElevenVoiceBtn,
  #regenerateTranscriptAnalysisBtn,
  #regenerateCoachReportBtn,
  [data-roleplay-eleven-action="select"],
  .assignment-start-btn
) {
  min-height: 44px;
  border: 1px solid var(--sas-blue) !important;
  border-radius: 8px !important;
  padding: 10px 18px;
  background: var(--sas-blue) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 6px 14px rgba(7, 102, 209, .2) !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#saveRoleplayMainBtn,
#saveRoleplayBottomBtn {
  border-color: #0766d1 !important;
  background-color: #0766d1 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

#saveRoleplayMainBtn:hover:not(:disabled),
#saveRoleplayBottomBtn:hover:not(:disabled) {
  border-color: #032954 !important;
  background-color: #032954 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

button.scenario-save-roleplay-btn,
.scenario-save-roleplay-callout button.scenario-save-roleplay-btn {
  border: 1px solid #0766d1 !important;
  border-radius: 8px !important;
  background-color: #0766d1 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 6px 14px rgba(7, 102, 209, .2) !important;
}
button.scenario-save-roleplay-btn:hover:not(:disabled),
.scenario-save-roleplay-callout button.scenario-save-roleplay-btn:hover:not(:disabled) {
  border-color: #032954 !important;
  background-color: #032954 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 9px 20px rgba(3, 41, 84, .28) !important;
  transform: translateY(-1px);
}
:is(
  #saveRoleplayMainBtn,
  #saveRoleplayBottomBtn,
  #saveUserSettingsBtn,
  #loginBtn,
  #selectElevenVoiceBtn,
  #assignmentSelectElevenVoiceBtn,
  #regenerateTranscriptAnalysisBtn,
  #regenerateCoachReportBtn,
  [data-roleplay-eleven-action="select"],
  .assignment-start-btn
):hover:not(:disabled) {
  border-color: var(--sas-midnight-blue) !important;
  background: var(--sas-midnight-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 9px 20px rgba(3, 41, 84, .28) !important;
  transform: translateY(-1px);
}
:is(
  #saveRoleplayMainBtn,
  #saveRoleplayBottomBtn,
  #saveUserSettingsBtn,
  #loginBtn,
  #selectElevenVoiceBtn,
  #assignmentSelectElevenVoiceBtn,
  #regenerateTranscriptAnalysisBtn,
  #regenerateCoachReportBtn,
  [data-roleplay-eleven-action="select"],
  .assignment-start-btn
):active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(3, 41, 84, .2) !important;
}
:is(
  #saveRoleplayMainBtn,
  #saveRoleplayBottomBtn,
  #saveUserSettingsBtn,
  #loginBtn,
  #selectElevenVoiceBtn,
  #assignmentSelectElevenVoiceBtn,
  #regenerateTranscriptAnalysisBtn,
  #regenerateCoachReportBtn,
  [data-roleplay-eleven-action="select"],
  .assignment-start-btn
):focus-visible {
  outline: 3px solid var(--sas-medium-blue);
  outline-offset: 3px;
}

#loginAuthTab {
  border-color: var(--sas-blue);
  background: var(--sas-blue);
  color: #fff;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
#loginAuthTab:hover,
#loginAuthTab:focus-visible,
#loginAuthTab.active {
  border-color: var(--sas-midnight-blue);
  background: var(--sas-midnight-blue);
  color: #fff;
  box-shadow: 0 5px 12px rgba(3, 41, 84, .22);
}

/* Shared SAS tab palette. Status/filter controls intentionally remain outside
   this group so their semantic colors are preserved. */
.tab.active,
.auth-tab.active,
.assignment-workspace-tab.active,
.roleplay-eleven-language-tab.active,
.roleplay-eleven-language-tab[aria-selected="true"],
.coach-language-tab.active {
  border-color: #0766d1;
  background-color: #0766d1;
  color: #fff;
}

.tab:hover,
.auth-tab:hover,
.auth-tab.active:hover,
.assignment-workspace-tab:hover,
.assignment-workspace-tab.active:hover,
.roleplay-eleven-language-tab:hover,
.roleplay-eleven-language-tab.active:hover,
.roleplay-eleven-language-tab[aria-selected="true"]:hover,
.coach-language-tab:hover:not(:disabled),
.coach-language-tab.active:hover:not(:disabled) {
  border-color: #032954;
  background-color: #032954;
  color: #fff;
}

.admin-subtab.active,
.admin-user-tab.active {
  color: #0766d1;
}
.admin-subtab:hover,
.admin-user-tab:hover:not(.admin-user-delete-tab) {
  border-color: #032954;
  color: #032954;
}
.marketing-question-analysis-row { display: grid; grid-template-columns: minmax(210px, .27fr) minmax(0, .73fr); gap: 24px; padding: 18px 20px; }
.marketing-question-analysis-row + .marketing-question-analysis-row { border-top: 1px solid #dce5f0; }
.marketing-question-summary, .marketing-question-feedback { min-width: 0; }
.marketing-question-summary p, .marketing-question-feedback p { margin: 0; color: #111b2c; font-size: 16px; line-height: 1.48; }
.marketing-question-score { margin-top: 10px !important; }
.marketing-question-feedback { display: grid; gap: 11px; }
.marketing-question-feedback section { margin: 0; }
.marketing-question-feedback h4 { margin: 0 0 3px; color: #07162e; font-size: 16px; line-height: 1.35; }
.marketing-question-feedback section:last-child {
  border-left: 3px solid #1677ff;
  padding: 11px 12px;
  background: #e8f2ff;
}
@media (max-width: 900px) {
  .marketing-product-row.marketing-feedback-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .marketing-product-row.marketing-answer-coaching-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .marketing-product-row .marketing-detailed-coach-robot { width: min(58vw, 230px); }
  .marketing-question-analysis-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .marketing-question-summary { padding: 15px; border: 1px solid #cbd9ee; border-radius: 10px; background: #f5f9ff; }
}
@media (max-width: 600px) {
  .marketing-coach-summary { border-radius: 12px; }
  .marketing-coach-summary-content { gap: 15px; padding: 16px; }
  .marketing-coach-summary p, .marketing-coach-summary li { font-size: 15px; }
  .marketing-coach-summary-callout { padding: 10px; }
  .marketing-question-analysis { border-radius: 12px; }
  .marketing-question-analysis-header, .marketing-question-analysis-row { padding: 16px; }
  .marketing-question-analysis-header h3 { font-size: 18px; }
  .marketing-question-summary p, .marketing-question-feedback p, .marketing-question-feedback h4 { font-size: 15px; }
}

@media (max-width: 980px) {
  .detailed-interview-question-row .detailed-question-score-left {
    border-radius: 8px;
    padding: 12px;
    background: #64748b;
    color: #fff;
  }
  .detailed-interview-question-row .detailed-question-score-left > strong {
    color: #fff;
  }
  .detailed-interview-question-row .detailed-question-score-left > p,
  .detailed-interview-question-row .detailed-question-score-left > p > strong {
    color: #fff;
  }
  .detailed-interview-question-row .detailed-question-score-left .coach-score-value {
    font-size: 1.25rem;
    line-height: 1.15;
  }
  .detailed-interview-answer span {
    font-size: inherit;
  }
}
.marketing-demo { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 40px; align-items: center; padding: 32px; background: #eef3fb; border-radius: 22px; scroll-margin-top: 24px; }
.marketing-demo h2 { margin: 12px 0 18px; font-size: 30px; line-height: 1.2; }
.marketing-demo p { color: #52617a; }
.marketing-demo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.marketing-how { scroll-margin-top: 24px; }
.marketing-contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(36px, 6vw, 76px); align-items: center; padding: clamp(42px, 6vw, 76px) clamp(22px, 4vw, 54px); margin-top: 64px; border: 1px solid #d5e2f1; border-radius: 24px; background: linear-gradient(135deg, #fff 0%, #f5f9ff 100%); box-shadow: 0 20px 48px rgba(3, 41, 84, .09); scroll-margin-top: 24px; }
.marketing-contact-form-column { min-width: 0; }
.marketing-home .marketing-contact h2 { margin: 10px 0 16px; color: #032954; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.marketing-contact-intro { max-width: 650px; margin-bottom: 28px !important; color: #52617a; font-size: 17px; }
.marketing-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.marketing-contact-form label { display: grid; gap: 7px; min-width: 0; }
.marketing-contact-form label > span { color: #032954; font-size: 13px; font-weight: 800; }
.marketing-contact-form input, .marketing-contact-form textarea { width: 100%; min-width: 0; border: 1px solid #b9c9dc; border-radius: 9px; padding: 14px 15px; background: #fff; color: #07162e; font: inherit; box-shadow: none; }
.marketing-contact-form input { min-height: 50px; }
.marketing-contact-form textarea { min-height: 170px; resize: vertical; }
.marketing-contact-form input:focus, .marketing-contact-form textarea:focus { border-color: #0766d1; outline: 3px solid #c4defd; outline-offset: 1px; }
.marketing-contact-message, .marketing-contact-status { grid-column: 1 / -1; }
.marketing-contact-submit { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; width: fit-content; min-width: 210px; min-height: 50px; border: 1px solid #0766d1; border-radius: 9px; padding: 13px 18px; background: #0766d1; color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgba(7, 102, 209, .2); }
.marketing-contact-submit:hover:not(:disabled) { border-color: #032954; background: #032954; transform: translateY(-1px); }
.marketing-contact-submit:disabled { cursor: wait; opacity: .68; }
.marketing-contact-status { min-height: 24px; color: #52617a; font-weight: 700; }
.marketing-contact-status[data-state="success"] { color: #15803d; }
.marketing-contact-status[data-state="error"] { color: #b91c1c; }
.marketing-contact-visual { position: relative; min-width: 0; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 18px 42px rgba(3, 41, 84, .15); }
.marketing-contact-visual > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.28; object-fit: cover; object-position: center; }
.marketing-contact-visual-card { position: absolute; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; padding: 15px 17px; background: rgba(3, 41, 84, .9); color: #fff; backdrop-filter: blur(10px); }
.marketing-contact-visual-card span { color: #8ddcff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marketing-contact-visual-card strong { color: #fff; font-size: 17px; line-height: 1.35; }
.marketing-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px; margin-top: 64px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #0d2546, #352256); }
.marketing-cta .marketing-eyebrow { color: #acdff6; }
.marketing-cta h2 { color: #fff; font-size: 36px; line-height: 1.15; margin: 14px 0; letter-spacing: -.02em; }
.marketing-cta p { color: #d2deed; }
.marketing-cta .marketing-button { flex: 0 0 auto; }
.marketing-home .retainiq-footer { margin-top: 40px; }
@media (max-width: 900px) {
  .marketing-contact { grid-template-columns: minmax(0, 1fr); }
  .marketing-contact-visual { width: min(100%, 620px); justify-self: center; }
  .marketing-signup-invite { padding: 26px 0 0; border-left: 0; border-top: 1px solid #395478; }
  .marketing-practice-showcase { grid-template-columns: minmax(0, 1fr); }
  .marketing-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .marketing-hero-copy { max-width: 650px; }
  .marketing-hero-visual { width: 100%; }
  .marketing-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .marketing-steps li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; }
  .marketing-how .marketing-steps li { text-align: left; }
  .marketing-how .marketing-step-number { margin-right: 0; margin-left: 0; }
  .marketing-home .marketing-step-number { margin: 0; }
  .marketing-product-row { gap: 28px; }
}
@media (max-width: 600px) {
  .marketing-practice-showcase { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0; }
  .marketing-home { width: 100%; max-width: 100%; padding: 0; }
  .marketing-hero { border-radius: 18px; padding: 26px 20px; }
  .marketing-hero h2 { font-size: 34px; }
  .marketing-hero .marketing-lead { font-size: 16px; }
  .marketing-hero-visual figcaption { font-size: 12px; padding: 12px; }
  .marketing-loop { gap: 24px 16px; padding: 28px 4px; }
  .marketing-loop li { display: block; }
  .marketing-loop-horizontal { grid-template-columns: minmax(0, 1fr); }
  .marketing-loop-horizontal li { display: grid; }
  .marketing-loop svg { margin-bottom: 10px; }
  .marketing-section { padding: 42px 4px; }
  .marketing-usecases { grid-template-columns: minmax(0, 1fr); }
  .marketing-usecases article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; }
  .marketing-case-icon { grid-row: span 2; margin: 0; }
  .marketing-usecases h3 { margin: 0; }
  .marketing-usecases p { grid-column: 2; }
  .marketing-audiences { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 26px 22px; }
  .marketing-audiences article + article { border-left: 0; border-top: 1px solid #c9d7eb; padding: 28px 0 0; }
  .marketing-product-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0; }
  .marketing-product-row:nth-of-type(even) > div { order: initial; }
  .marketing-demo { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 18px; }
  .marketing-cta { flex-direction: column; align-items: flex-start; padding: 30px 22px; margin-top: 40px; }
  .marketing-cta h2 { font-size: 30px; }
  .marketing-home p, .marketing-home h2, .marketing-home h3 { overflow-wrap: anywhere; }
}
.marketing-home .marketing-ai-label { display: flex; align-items: center; gap: 10px; }
.marketing-ai-sparkle { width: 32px; height: 32px; flex: 0 0 32px; color: #bca3ff; }
.marketing-home .marketing-waveform { width: 38px; height: 30px; object-fit: contain; flex: 0 0 38px; border-radius: 5px; background: #fff; padding: 3px; }
.marketing-robot { width: 140px; height: auto; flex: 0 0 140px; border-radius: 22px; background: #fff; padding: 6px; box-shadow: 0 10px 30px #0003; }
@media (max-width: 900px) {
  .marketing-cta { flex-wrap: wrap; }
  .marketing-robot { width: 110px; flex-basis: 110px; }
}
@media (max-width: 600px) {
  .marketing-home .marketing-waveform { margin-bottom: 10px; }
  .marketing-robot { flex-basis: auto; }
}
.voice-mic-status-indicator.is-ai-speaking {
  background: #fff;
  border: 2px solid #d8e7ff;
  box-shadow: 0 8px 28px rgba(28, 99, 255, .22);
  animation: none;
}
.voice-mic-status-indicator.is-ai-speaking .avatar-mic-icon { display: none; }
.voice-mic-status-indicator.is-ai-speaking::after {
  content: "";
  display: block;
  width: 70%;
  height: 70%;
  background: url("assets/recording-waveform-icon.png") center / contain no-repeat;
  transform-origin: center;
  animation: aiWaveformSpeaking 720ms ease-in-out infinite;
}
@keyframes aiWaveformSpeaking {
  0%, 100% { transform: translateY(0) scale(1, .82); }
  20% { transform: translateY(-1px) scale(1.03, 1.08); }
  42% { transform: translateY(1px) scale(.98, .9); }
  64% { transform: translateY(-1px) scale(1.02, 1.12); }
  82% { transform: translateY(0) scale(1, .94); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-mic-status-indicator.is-ai-speaking::after { animation: none; }
}
/* Match the Voice Agent assignment/coaching action buttons. */
:is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
:is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #005eff;
  border-radius: 7px;
  background: #eaf3ff;
  color: #0758d3;
  -webkit-text-fill-color: #0758d3;
  box-shadow: none;
  text-align: left;
  white-space: normal;
  font-weight: 650;
}
:is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn::after {
  content: "\2197";
  justify-self: center;
  color: currentColor;
  -webkit-text-fill-color: currentColor;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}
:is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn[id*="hideAll"]::after {
  content: "\2193";
}
:is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn:hover:not(:disabled) {
  border-color: #1f6feb;
  background: #2f6fed;
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 10px rgba(7, 94, 229, .2);
  transform: translateY(-1px);
}
:is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn:focus-visible {
  outline: 3px solid #0758d3;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  :is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn {
    min-width: 0;
    min-height: 48px;
  }
}

/* Keep the compact AI Voice Agent Roleplay focused on its controls. */
@media (max-width: 600px) {
  .marketing-contact { gap: 30px; padding: 30px 18px; margin-top: 40px; border-radius: 18px; }
  .marketing-contact-form { grid-template-columns: minmax(0, 1fr); }
  .marketing-contact-message, .marketing-contact-status { grid-column: auto; }
  .marketing-contact-submit { width: 100%; }
  .marketing-contact-visual-card { right: 12px; bottom: 12px; left: 12px; }
  #elevenTab #userRoleplayLanguageTitle,
  #elevenTab .roleplay-assignment-display[data-assignment-display="eleven"] > [data-assignment-title],
  #elevenTab .roleplay-assignment-display[data-assignment-display="eleven"] > [data-assignment-text],
  #elevenTab .roleplay-assignment-display[data-assignment-display="eleven"] > [data-assignment-translation-status],
  #elevenTab .voice-session-section > [data-main-intro="elevenSessionBody"] {
    display: none !important;
  }
}
/* Voice selection: soft violet section and the shared blue waveform icon. */
:is(.settings-panel, #mainSettingsMirror) .roleplay-eleven-voice-section {
  border: 1px solid #d9cbef;
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(145deg, #f1eaff, #faf7ff);
  box-shadow: 0 8px 20px rgba(81, 48, 130, .055);
}
:is(.settings-panel, #mainSettingsMirror) .roleplay-eleven-voice-section > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #56358a;
  text-transform: none;
  line-height: 1.35;
}
:is(.settings-panel, #mainSettingsMirror) .roleplay-eleven-voice-section > h3::before {
  content: "";
  display: block;
  flex: 0 0 46px;
  width: 46px;
  height: 42px;
  border-radius: 10px;
  background: #fff url("assets/recording-waveform-icon.png") center / 36px auto no-repeat;
}
@media (max-width: 700px) {
  #mainSettingsMirror .scenario-fields > .mobile-voice-settings-panel,
  #mainSettingsMirror .scenario-fields > .mobile-voice-settings-panel[open] {
    border-color: #d9cbef;
    background: linear-gradient(145deg, #f1eaff, #faf7ff);
  }
  #mainSettingsMirror .mobile-voice-settings-panel > summary::before {
    background: #fff url("assets/recording-waveform-icon.png") center / 36px auto no-repeat;
  }
  #mainSettingsMirror .mobile-voice-settings-panel > .roleplay-eleven-voice-section {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  #mainSettingsMirror .mobile-voice-settings-panel > .roleplay-eleven-voice-section > h3 { display: none; }
}
/* Separate the conversation topic from the person practising it. */
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .topic-settings-panel,
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .topic-settings-panel[open] {
  background: linear-gradient(145deg, #fff3e0, #fffaf1);
  border: 1px solid #ebd3ad;
}
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .learner-settings-panel,
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .learner-settings-panel[open] {
  padding: 16px;
  border: 1px solid #b8ded6;
  border-radius: 14px;
  background: linear-gradient(145deg, #e5f5ef, #f6fcf9);
  box-shadow: 0 8px 20px rgba(25, 94, 77, .05);
}
:is(.settings-panel, #mainSettingsMirror) .topic-settings-panel > summary::before {
  background: #a96a1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 3h11l5 5v13H4zM15 3v6h5M8 13h8M8 17h6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
:is(.settings-panel, #mainSettingsMirror) .learner-settings-panel > summary::before {
  background: #177d69 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-3a7 7 0 0 1 14 0v3M17 3h5v8h-5zM19 6h1M19 8h1'/%3E%3C/svg%3E") center / 18px no-repeat;
}
:is(.settings-panel, #mainSettingsMirror) .learner-settings-panel .learner-file-upload-settings {
  margin: 0;
  padding: 14px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid #bfdfd7;
  border-radius: 10px;
}
@media (max-width: 700px) {
  #mainSettingsMirror .scenario-fields > .learner-settings-panel:not([open]) { padding: 0; }
  #mainSettingsMirror .scenario-fields > .learner-settings-panel[open] { padding: 14px; }
  #mainSettingsMirror .topic-settings-panel > summary::before,
  #mainSettingsMirror .learner-settings-panel > summary::before { background-size: 28px; }
}
/* Playback can start while the recording status still carries "recording".
   Use the actual speaking state for the same amber bar on every turn. */
#recordingStatus.is-ai-speaking,
.practice-recording-status.is-ai-speaking {
  border-color: #f4c36d;
  color: #8a5b00;
  background: #fff7e6;
  text-align: center;
  text-transform: none;
}
/* Voice uses the same collapsible section on desktop and mobile. */
#mainSettingsMirror .scenario-fields > .mobile-voice-settings-panel {
  position: relative;
  padding: 16px;
  border: 1px solid;
  border-radius: 14px;
}
#mainSettingsMirror .mobile-voice-settings-panel > .roleplay-eleven-voice-section {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#mainSettingsMirror .mobile-voice-settings-panel > .roleplay-eleven-voice-section > h3 { display: none; }
/* Illustrated settings icons: the same visual language at desktop and tile sizes. */
.scenario-basics-panel {
  --settings-section-icon: url("assets/settings-controls.svg");
  --settings-panel-light: #eaf3ff;
  --settings-panel-dark: #bddcff;
}
.topic-settings-panel {
  --settings-section-icon: url("assets/settings-topic.svg");
  --settings-panel-light: #fff4df;
  --settings-panel-dark: #ffe0a6;
}
.learner-settings-panel {
  --settings-section-icon: url("assets/settings-learner.svg");
  --settings-panel-light: #e7f9f3;
  --settings-panel-dark: #b8e9d8;
}
.conversation-settings-panel {
  --settings-section-icon: url("assets/settings-conversation.svg");
  --settings-panel-light: #f1eaff;
  --settings-panel-dark: #d8c5fa;
}
.measured-settings-panel {
  --settings-section-icon: url("assets/settings-coaching.svg");
  --settings-panel-light: #e4f8fc;
  --settings-panel-dark: #b5e6ef;
}
.mobile-voice-settings-panel,
.roleplay-eleven-voice-section {
  --settings-section-icon: url("assets/settings-voice.svg");
  --settings-panel-light: #eaf0ff;
  --settings-panel-dark: #c9d9ff;
}
/* Match the six section backgrounds to their SVG base gradients in every state.
   Only direct sections are styled, keeping the mobile voice wrapper transparent inside. */
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .scenario-collapse-panel,
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .scenario-collapse-panel[open],
:is(.settings-panel, #mainSettingsMirror) .scenario-fields > .roleplay-eleven-voice-section {
  background: linear-gradient(145deg, var(--settings-panel-light), var(--settings-panel-dark));
  border-color: var(--settings-panel-dark);
}
:is(.settings-panel, #mainSettingsMirror) .roleplay-eleven-voice-section > h3 {
  color: #234d94;
}
:is(.settings-panel, #mainSettingsMirror) .scenario-collapse-panel > .scenario-panel-summary::before {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 0;
  background: var(--settings-section-icon) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(25, 51, 86, .10));
}
:is(.settings-panel, #mainSettingsMirror) .roleplay-eleven-voice-section > h3::before {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 0;
  border-radius: 0;
  background: url("assets/settings-voice.svg") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(25, 51, 86, .10));
}
@media (max-width: 700px) {
  #mainSettingsMirror .scenario-collapse-panel > .scenario-panel-summary::before {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
  }
  #mainSettingsMirror .scenario-collapse-panel > .scenario-panel-summary { gap: 12px; }
  #mainSettingsMirror .scenario-collapse-panel[open] > .scenario-panel-summary::before {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}
/* Keep a clear, independently focusable disclosure control on every tile. */
@media (max-width: 700px) {
  #mainSettingsMirror .scenario-fields > .mobile-voice-settings-panel:not([open]) { padding: 0; }
  #mainSettingsMirror .scenario-collapse-panel > .scenario-panel-summary { padding-top: 52px; }
  #mainSettingsMirror .scenario-collapse-panel[open] > .scenario-panel-summary {
    padding-top: 0;
    padding-right: 52px;
  }
  #mainSettingsMirror .scenario-panel-toggle-btn {
    display: grid;
    place-items: center;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid #abc5ef;
    border-radius: 12px;
    background: #fff;
    color: #195fc1;
    font-size: 0;
    box-shadow: 0 2px 6px #16396b12;
  }
  #mainSettingsMirror .scenario-panel-toggle-btn::before { content: "+"; font-size: 26px; line-height: 1; }
  #mainSettingsMirror .scenario-collapse-panel[open] > summary > .scenario-panel-toggle-btn::before { content: "−"; }
  #mainSettingsMirror .scenario-panel-toggle-btn:focus-visible { outline: 3px solid #1762d6; outline-offset: 2px; }
}
/* Stack the saved roleplay picker below File rather than squeezing both into a row. */
@media (max-width: 700px) {
  :is(.settings-panel, #mainSettingsMirror) .scenario-file-bar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  :is(.settings-panel, #mainSettingsMirror) .scenario-file-menu-wrap { justify-self: start; }
  :is(.settings-panel, #mainSettingsMirror) .scenario-picker-inline {
    min-width: 0;
    width: 100%;
  }
  :is(.settings-panel, #mainSettingsMirror) .scenario-list {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}
.scenario-panel-mobile-title { display: none; }
@media (max-width: 700px) {
  #mainSettingsMirror :is(.mobile-voice-settings-panel, .topic-settings-panel, .conversation-settings-panel, .measured-settings-panel) > summary > .scenario-panel-title-text {
    display: none;
  }
  #mainSettingsMirror .scenario-panel-mobile-title {
    display: block;
    min-width: 0;
  }
}
/* Mobile toolbar: retain translated button text for assistive technology. */
@media (max-width: 700px) {
  :is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn {
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 0;
  }
  :is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn::after {
    content: "+";
    font-size: 26px;
    font-weight: 650;
  }
  :is(.settings-panel, #mainSettingsMirror) .scenario-panel-controls .scenario-panel-control-btn[id*="hideAll"]::after {
    content: "−";
  }
}