/* ============================================================
   Woord 2025 Dashboard Skin — monochrome & compact
   Black / grays / white only: the marketing purple stays on the public
   site so the app reads quiet and the content stands out. Flat surfaces,
   hairline borders, compact type scale.
   Scoped to body.wd25-dash so guest/marketing pages are untouched.
   ============================================================ */

:root {
  --wd-ink: #0d0d12;          /* primary: text + actions */
  --wd-ink-soft: #55555f;     /* secondary text */
  --wd-ink-faint: #8b8b95;    /* labels, meta */
  --wd-bg: #f7f7f8;           /* app background */
  --wd-bg-sub: #f1f1f3;       /* hover / subtle fills */
  --wd-line: #e6e6ea;         /* hairlines */
  --wd-line-strong: #d4d4da;  /* hover borders */
  --wd-radius: 12px;
  --wd-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */

body.wd25-dash {
  font-family: var(--wd-font) !important;
  font-size: 13.5px;
  color: var(--wd-ink);
  background: var(--wd-bg) !important;
  -webkit-font-smoothing: antialiased;
}

body.wd25-dash h1, body.wd25-dash h2, body.wd25-dash h3,
body.wd25-dash h4, body.wd25-dash h5, body.wd25-dash h6,
body.wd25-dash .card-title, body.wd25-dash label,
body.wd25-dash input, body.wd25-dash textarea, body.wd25-dash select,
body.wd25-dash button, body.wd25-dash p, body.wd25-dash a,
body.wd25-dash span, body.wd25-dash td, body.wd25-dash th {
  font-family: var(--wd-font) !important;
}

body.wd25-dash h1, body.wd25-dash h2, body.wd25-dash h3, body.wd25-dash h4 {
  letter-spacing: -0.012em;
  color: var(--wd-ink);
  font-weight: 700;
}

body.wd25-dash h1 { font-size: 22px; margin-bottom: 10px; }
body.wd25-dash h2 { font-size: 17px; }
body.wd25-dash h3 { font-size: 15px; }
body.wd25-dash h4 { font-size: 14px; }
body.wd25-dash p, body.wd25-dash li { font-size: 13.5px; line-height: 1.6; }
body.wd25-dash small, body.wd25-dash .small { font-size: 12px; }

body.wd25-dash .content-wrapper,
body.wd25-dash .main-panel,
body.wd25-dash .page-body-wrapper {
  background: var(--wd-bg) !important;
}

/* ---------- top navbar ---------- */

body.wd25-dash .navbar.default-layout-navbar,
body.wd25-dash .navbar-brand-wrapper,
body.wd25-dash .navbar-menu-wrapper {
  background: #ffffff !important;
  box-shadow: none !important;
}

body.wd25-dash .navbar.default-layout-navbar {
  border-bottom: 1px solid var(--wd-line);
}

body.wd25-dash .navbar .search-field {
  border: 1px solid var(--wd-line) !important;
  border-radius: 9px;
  background: var(--wd-bg);
  overflow: hidden;
  padding-left: 10px;
}

body.wd25-dash .navbar .search-field .form-control { font-size: 13px; }

body.wd25-dash .navbar-toggler { color: var(--wd-ink-soft); }

/* profile pill — transparent so the dark ink stays readable */
body.wd25-dash .nav-profile-text.emailContainer,
body.wd25-dash .emailContainer {
  background: transparent !important;
  border: 1px solid var(--wd-line);
  border-radius: 9px;
  padding: 5px 12px;
}

body.wd25-dash .emailContainer .emailText {
  color: var(--wd-ink) !important;
  font-weight: 500;
  font-size: 13px;
  margin: 0;
}

body.wd25-dash .nav-profile.dropdown .nav-link { color: var(--wd-ink); }
body.wd25-dash .nav-profile.dropdown:hover .emailContainer { border-color: var(--wd-line-strong); }

/* ---------- buttons ---------- */

body.wd25-dash .btn {
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  padding: 9px 16px;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* a press that actually reads as a press, and a focus ring for keyboards */
body.wd25-dash .btn:active { transform: translateY(1px); }

body.wd25-dash .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.16) !important;
}

body.wd25-dash .btn-primary,
body.wd25-dash .btn-success,
body.wd25-dash .btn-info,
body.wd25-dash .convertButton,
body.wd25-dash .importPhotoButton,
body.wd25-dash .btnBuy {
  background: var(--wd-ink) !important;
  border: 1px solid var(--wd-ink) !important;
  color: #ffffff !important;
}

body.wd25-dash .btn-primary:hover,
body.wd25-dash .btn-primary:focus,
body.wd25-dash .btn-success:hover,
body.wd25-dash .btn-info:hover,
body.wd25-dash .convertButton:hover,
body.wd25-dash .importPhotoButton:hover,
body.wd25-dash .btnBuy:hover {
  background: #2a2a33 !important;
  border-color: #2a2a33 !important;
}

body.wd25-dash .btn-outline-primary,
body.wd25-dash .btn-secondary,
body.wd25-dash .btn-light {
  background: #ffffff !important;
  border: 1px solid var(--wd-line) !important;
  color: var(--wd-ink) !important;
}

body.wd25-dash .btn-outline-primary:hover,
body.wd25-dash .btn-secondary:hover,
body.wd25-dash .btn-light:hover {
  background: var(--wd-bg-sub) !important;
  border-color: var(--wd-line-strong) !important;
}

body.wd25-dash .btn-danger {
  background: #ffffff !important;
  border: 1px solid #f0ccd6 !important;
  color: #b8244d !important;
}

body.wd25-dash .btn-danger:hover {
  background: #fff4f7 !important;
  border-color: #e4a9ba !important;
}

/* the converter's primary action shipped at 230x80 because the play glyph
   carries its own 30px box — bound the height and shrink the icon */
body.wd25-dash #btn_submit,
body.wd25-dash #btn_submit_no_text,
body.wd25-dash #btn_submit_no_val {
  height: 46px;
  min-height: 46px;
  padding: 0 22px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px !important;
}

body.wd25-dash #btn_submit img,
body.wd25-dash #btn_submit_no_text img,
body.wd25-dash #btn_submit_no_val img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* ---------- sidebar ---------- */

body.wd25-dash .sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--wd-line);
  box-shadow: none !important;
}

/* One row, one box.
   sidebar_2024.css draws `border: 1px solid #202124` on .navItem:hover and
   .navItem.active while the link inside carries its own fill — a box inside
   a box. The <li> is now a bare slot and the <a> is the only surface. */
body.wd25-dash .sidebar .navItem,
body.wd25-dash .sidebar .navItem:hover,
body.wd25-dash .sidebar .navItem.active {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 1px 8px;
  overflow: visible;
}

body.wd25-dash .sidebar .menuButton {
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: 9px;
  color: var(--wd-ink-soft) !important;
  padding: 9px 11px;
  transition: background 0.14s ease, color 0.14s ease;
}

body.wd25-dash .sidebar .menuTitle {
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
  margin-left: 11px;
  color: inherit;
}

body.wd25-dash .sidebar .navItem:hover .menuButton {
  background: var(--wd-bg-sub) !important;
  color: var(--wd-ink) !important;
}

/* active item: solid black pill, white glyph */
body.wd25-dash .sidebar .navItem.active .menuButton {
  background: var(--wd-ink) !important;
  color: #ffffff !important;
}

body.wd25-dash .sidebar .navItem.active .menuTitle {
  color: #ffffff;
  font-weight: 600;
}

body.wd25-dash .sidebar .navItem.active .normalImage { display: none; }
body.wd25-dash .sidebar .navItem.active .hoverImage {
  display: block;
  /* Some "white" icon assets ship off-white or semi-transparent; force pure
     white so every active glyph reads the same on the black pill. */
  filter: brightness(0) invert(1);
}

body.wd25-dash .sidebar .divider { border-color: var(--wd-line); margin: 10px 14px; }

/* the CTA was 52px against 38px nav rows, reading as a bulky outlier —
   match the rhythm and share the items' 8px inset */
body.wd25-dash .sidebar-actions { margin-bottom: 6px; }

body.wd25-dash .sidebar-actions .btn-primary {
  border-radius: 9px !important;
  font-weight: 600 !important;
  height: 42px;
  padding: 0 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 16px) !important;
  margin: 0 8px 10px !important;
}

/* the URL bar sat flush against Convert with a cramped 153px field */
body.wd25-dash .navbar .search-field { margin-right: 10px; }
body.wd25-dash .navbar .search-field .input-group { gap: 8px; }
body.wd25-dash .navbar .search-field .form-control { min-width: 190px; }

/* icon sizing so the rail and the expanded menu agree */
body.wd25-dash .sidebar .menuButton img { width: 18px; height: 18px; }
body.wd25-dash .sidebar .menuButton i { font-size: 18px !important; }

/* Inline glyphs: one stroked path that follows the row's colour, instead of
   a dark raster and a white raster toggled by display. */
body.wd25-dash .wd-nav-icon {
  flex: none;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.75;
  transition: opacity 0.14s ease;
}

body.wd25-dash .navItem:hover .wd-nav-icon,
body.wd25-dash .navItem.active .wd-nav-icon { opacity: 1; }

/* The brand was centered in the 260px rail, landing 60px right of the CTA and
   every nav row under it. The anchor also stretches to the full rail and
   centers the image inside itself, so both have to be pinned left. */
body.wd25-dash .navbar-brand-wrapper {
  justify-content: flex-start !important;
  padding-left: 24px;
}

body.wd25-dash .navbar-brand-wrapper .navbar-brand {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}

/* 12px lands the last item on the content's right edge; the group's own box
   runs 12px wider than its last visible child */
body.wd25-dash .navbar-nav-right { padding-right: 12px; }

/* the sidebar CTA is the one loud thing on a quiet rail — give it a lift */
body.wd25-dash .sidebar-actions .btn-primary {
  box-shadow: 0 6px 16px -8px rgba(13, 13, 18, 0.6) !important;
  letter-spacing: 0.01em;
}

body.wd25-dash .sidebar-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(13, 13, 18, 0.55) !important;
}

body.wd25-dash .sidebar-actions .btn-primary:active { transform: translateY(0); }

/* ---------- collapsed (icon-only) sidebar ----------
   The hamburger toggles body.sidebar-icon-only. Without these rules the rail
   keeps the expanded paddings, so the active pill is clipped and the glyphs
   sit off-center. */

/* the theme shrink-wraps the item to its label, leaving a 21px-wide pill on a
   70px rail — force it to fill the rail so the tile is square-ish */
/* the list keeps 14px side padding and the item its own 4px, which left a
   23px tile on a 70px rail — hand the padding to the link instead */
body.wd25-dash.sidebar-icon-only .sidebar .sidebarContainer {
  padding: 0 8px !important;
}

body.wd25-dash.sidebar-icon-only .sidebar .navItem {
  margin: 2px 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  align-self: stretch !important;
  display: block !important;
}

body.wd25-dash.sidebar-icon-only .sidebar .menuButton {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center;
  justify-content: center;
  padding: 11px 0 !important;
  text-align: center;
}

body.wd25-dash.sidebar-icon-only .sidebar .menuTitle { display: none; }

body.wd25-dash.sidebar-icon-only .sidebar .navItem.active,
body.wd25-dash.sidebar-icon-only .sidebar .navItem.active .menuButton {
  border-radius: 9px;
}

/* brand: swap the wordmark for the mark, and never let it overflow the rail */
body.wd25-dash .navbar-brand.brand-logo img { aspect-ratio: 365 / 118; }
body.wd25-dash .navbar-brand.brand-logo-mini img { aspect-ratio: 1 / 1; }

body.wd25-dash .navbar-brand img,
body.wd25-dash .navbar-brand.brand-logo img {
  /* The theme pins width:208px on the wordmark, so any max-height squashes it
     into a flattened blob. Drive the size from the height and let the width
     follow the real aspect ratio. */
  width: auto !important;
  height: 38px !important;   /* 30px read as an afterthought on a 70px bar */
  max-width: 100%;
  object-fit: contain;
}

body.wd25-dash.sidebar-icon-only .navbar-brand.brand-logo { display: none !important; }

body.wd25-dash.sidebar-icon-only .navbar-brand.brand-logo-mini {
  display: inline-block !important;
  padding: 0;
}

body.wd25-dash.sidebar-icon-only .navbar-brand.brand-logo-mini img {
  height: 27px !important;
  width: 27px !important;
  max-height: 27px !important;
  object-fit: contain;
}

/* "Convert to Audio" duplicates the "Text to Audio" item, so the collapsed
   rail drops it instead of rendering an unreadable sliver. */
body.wd25-dash.sidebar-icon-only .sidebar-actions { display: none; }

body.wd25-dash.sidebar-icon-only #counter-section { display: none; }

/* Own the rail geometry instead of trusting the legacy theme: its stylesheet
   loads via rel=preload + onload swap, so the 70px collapse rule applies
   inconsistently and the rail stayed 260px wide with the labels hidden. */
@media (min-width: 992px) {
  /* The rail is a flex item, and a flex item's default `min-width: auto`
     clamps it to its min-content size — that is why `width: 70px` (the
     theme's rule and ours) silently lost and the rail stayed 260px wide.
     min-width: 0 releases the clamp. */
  /* The id raises specificity above every class-based rule in the legacy
     theme, and min-width:0 releases the flex min-content clamp that made
     plain `width` lose on this flex item. */
  body.wd25-dash.sidebar-icon-only nav#sidebar {
    width: 70px !important;
    min-width: 0 !important;
    max-width: 70px !important;
    flex: 0 0 70px !important;
    overflow-x: hidden;
  }
  body.wd25-dash.sidebar-icon-only .navbar .navbar-brand-wrapper { width: 70px !important; }
  body.wd25-dash.sidebar-icon-only .navbar .navbar-menu-wrapper { width: calc(100% - 70px) !important; }
  body.wd25-dash.sidebar-icon-only .main-panel { width: calc(100% - 70px) !important; flex: 1 1 auto !important; }
}

/* ---------- cards / panels ---------- */

body.wd25-dash .card {
  border: 1px solid var(--wd-line) !important;
  border-radius: var(--wd-radius) !important;
  box-shadow: none;
  background: #fff;
}

body.wd25-dash .card .card-body { border-radius: var(--wd-radius); padding: 20px; }

body.wd25-dash .container-bar { border: none; }

/* ---------- forms ---------- */

body.wd25-dash .form-control,
body.wd25-dash textarea,
body.wd25-dash select.form-control,
body.wd25-dash input[type="text"],
body.wd25-dash input[type="email"],
body.wd25-dash input[type="password"],
body.wd25-dash input[type="number"] {
  border: 1px solid var(--wd-line);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--wd-ink);
  background: #fff;
}

body.wd25-dash .form-control:focus,
body.wd25-dash textarea:focus {
  border-color: var(--wd-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.07);
}

body.wd25-dash label {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--wd-ink-soft);
}

/* ---------- tables ---------- */

body.wd25-dash .table { color: var(--wd-ink); font-size: 13px; }

body.wd25-dash .table thead th {
  border-bottom: 1px solid var(--wd-line);
  color: var(--wd-ink-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}

body.wd25-dash .table td, body.wd25-dash .table th {
  border-top: 1px solid var(--wd-line);
  vertical-align: middle;
  padding: 12px 10px;
}

body.wd25-dash .table-hover tbody tr:hover { background: var(--wd-bg); }

/* wide tables must scroll, not clip their action buttons */
body.wd25-dash .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.wd25-dash .table-responsive .table { margin-bottom: 0; }

/* ---------- alerts / badges ---------- */

body.wd25-dash .alert {
  border-radius: 10px;
  border: 1px solid var(--wd-line);
  background: #ffffff;
  color: var(--wd-ink);
  font-size: 13.5px;
  font-weight: 500;
}

/* status stays legible without shouting in color */
body.wd25-dash .alert-success { border-left: 3px solid #1a9463; }
body.wd25-dash .alert-info { border-left: 3px solid var(--wd-ink); }
body.wd25-dash .alert-warning { border-left: 3px solid #c98a12; }
body.wd25-dash .alert-danger { border-left: 3px solid #c22753; }

body.wd25-dash .badge-primary,
body.wd25-dash .badge-info {
  background: var(--wd-ink);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- pagination ---------- */

body.wd25-dash .page-item.active .page-link {
  background: var(--wd-ink);
  border-color: var(--wd-ink);
  color: #fff;
}

body.wd25-dash .page-link {
  color: var(--wd-ink-soft);
  border-color: var(--wd-line);
  font-size: 13px;
}

/* ---------- modals / dropdowns ---------- */

body.wd25-dash .modal-content {
  border-radius: var(--wd-radius);
  border: 1px solid var(--wd-line);
  box-shadow: 0 18px 44px -18px rgba(13, 13, 18, 0.22);
}

body.wd25-dash .dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--wd-line);
  box-shadow: 0 12px 30px -14px rgba(13, 13, 18, 0.18);
  overflow: hidden;
  font-size: 13.5px;
}

body.wd25-dash .dropdown-item:hover { background: var(--wd-bg-sub); color: var(--wd-ink); }

/* ---------- character usage orb ---------- */

body.wd25-dash .orb_value { color: var(--wd-ink); font-weight: 700; font-size: 15px; }
body.wd25-dash svg circle.progress { stroke: var(--wd-ink); }
body.wd25-dash .orb_info .label { color: var(--wd-ink-faint); font-size: 11.5px; }
body.wd25-dash .orb_info .value { color: var(--wd-ink); font-size: 12.5px; }

/* ---------- pricing cards ---------- */

body.wd25-dash .pricing-card,
body.wd25-dash .plan-card,
body.wd25-dash [class*="plan_card"],
body.wd25-dash [class*="planCard"] {
  border-radius: var(--wd-radius) !important;
  border: 1px solid var(--wd-line) !important;
  box-shadow: none;
}

/* ---------- free-plan allowance banner ---------- */

body.wd25-dash .wd-free-counter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--wd-line);
  font-size: 13px;
  color: var(--wd-ink);
}

body.wd25-dash .wd-free-count {
  font-weight: 700;
  font-size: 13px;
  color: var(--wd-ink);
  white-space: nowrap;
}

body.wd25-dash .wd-free-copy { color: var(--wd-ink-soft); }

body.wd25-dash .wd-free-upgrade {
  margin-left: auto;
  font-weight: 600;
  color: var(--wd-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

body.wd25-dash .wd-free-upgrade:hover { color: var(--wd-ink-soft); }

/* ---------- responsive ---------- */

/* tablet & below: the rail must leave the document flow. It was still a flex
   item at 511px, squeezing the content card to 227px and pushing form groups
   to a negative left offset. Off-canvas + full-width panel instead. */
@media (max-width: 991px) {
  body.wd25-dash nav#sidebar {
    position: fixed !important;
    top: 60px;
    bottom: 0;
    left: 0;
    width: 240px !important;
    min-width: 0 !important;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    z-index: 1200;
  }

  /* the theme's hamburger toggles .active on the off-canvas rail */
  body.wd25-dash nav#sidebar.active { transform: translateX(0); }

  /* sidebar_2024.css reveals the account links (Billing, Account, Logout) at
     768px, but the rail becomes a drawer at 991px. Between those widths the
     drawer had no way to reach them and the navbar dropdown is already gone —
     so on a small laptop or a landscape tablet you could not log out. */
  body.wd25-dash .loggedResponsive { display: block; }

  body.wd25-dash .loggedResponsive .divider { margin: 12px 14px; }

  body.wd25-dash .main-panel {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* tablet: tighter chrome */
@media (max-width: 991px) {
  body.wd25-dash h1 { font-size: 20px; }
  body.wd25-dash .card .card-body { padding: 16px; }
  body.wd25-dash .navbar .search-field { display: none !important; }
  body.wd25-dash .content-wrapper { padding: 16px !important; }
}

/* phone: full-width cards, stacked action rows, no cramped tables */
@media (max-width: 767px) {
  body.wd25-dash { font-size: 13px; }
  body.wd25-dash h1 { font-size: 19px; }
  body.wd25-dash .card { border-radius: 10px !important; }
  body.wd25-dash .card .card-body { padding: 14px; }
  body.wd25-dash .content-wrapper { padding: 12px !important; }

  /* the profile pill only needs to show the account, not the full address */
  body.wd25-dash .emailContainer { max-width: 46vw; }
  body.wd25-dash .emailContainer .emailText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* action clusters in tables/cards stack instead of overflowing */
  body.wd25-dash .table td .btn,
  body.wd25-dash .card-body > .btn { width: auto; }
  body.wd25-dash .wd-free-counter { align-items: flex-start; }
  body.wd25-dash .wd-free-upgrade { margin-left: 0; }

  /* the sidebar overlays instead of squeezing the content */
  body.wd25-dash .sidebar { z-index: 1200 !important; }
}

/* ---------- legacy blue chips in the audio table ----------
   The 2024 theme painted speaker badges and row actions in blues/pinks;
   neutralize them into the gray scale (delete keeps a red hint only). */

body.wd25-dash .speakerContainer,
body.wd25-dash .speakerContainer.maleBackground,
body.wd25-dash .speakerContainer.femaleBackground {
  background: var(--wd-bg-sub) !important;
  border: 1px solid var(--wd-line);
  color: var(--wd-ink) !important;
  border-radius: 999px;
  font-size: 12.5px;
}

body.wd25-dash .editButton,
body.wd25-dash .downloadButton,
body.wd25-dash .codeButton,
body.wd25-dash .deleteAudioButton {
  background: #ffffff !important;
  border: 1px solid var(--wd-line) !important;
  border-radius: 8px !important;
  color: var(--wd-ink) !important;
}

body.wd25-dash .editButton:hover,
body.wd25-dash .downloadButton:hover,
body.wd25-dash .codeButton:hover {
  background: var(--wd-bg-sub) !important;
  border-color: var(--wd-line-strong) !important;
}

body.wd25-dash .deleteAudioButton { border-color: #f0ccd6 !important; }
body.wd25-dash .deleteAudioButton:hover { background: #fff4f7 !important; }

/* the icons inside those chips are colored SVGs/fonts — desaturate to ink */
body.wd25-dash .editButton img,
body.wd25-dash .downloadButton img,
body.wd25-dash .codeButton img,
body.wd25-dash .speakerContainer img.speakerGender {
  filter: grayscale(1) brightness(0.35);
}

/* voice avatars inside the select widgets: round them so they sit inside the
   pill instead of poking out of its corners */
body.wd25-dash .select2-selection__rendered .img-flag,
body.wd25-dash .select2-results__option .img-flag,
body.wd25-dash img.img-flag {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--wd-line);
}

/* ============================================================
   Converter: editor + right-hand settings panel (ElevenLabs layout)
   The legacy selects stay in the DOM (they submit the form); grid moves
   them into the panel column and CSS restyles them there.
   ============================================================ */

@media (min-width: 992px) {
  body.wd25-dash .wd-converter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    align-items: start;
  }

  /* Explicit rows: two items sharing one named area would stack on top of
     each other, which is exactly what happened with the panel and the
     legacy controls. */
  body.wd25-dash .wd-converter-form .wd-voice-panel {
    grid-column: 2;
    grid-row: 1;
  }

  body.wd25-dash .wd-converter-form .selectsContainer {
    grid-column: 2;
    grid-row: 2;
    display: block !important;
    align-self: start;
  }

  /* Spans all three rows on purpose. Spanning only rows 1-2 made the editor's
     height stretch those rows, which drove a ~95px gap between the two halves
     of the Settings card. Letting it span into the 1fr row leaves rows 1 and 2
     at their natural height, so the halves stay flush. */
  body.wd25-dash .wd-converter-form .wd-editor-cell {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  /* everything else in the form (errors, the submit row) stays in column 1 */
  body.wd25-dash .wd-converter-form > *:not(.wd-voice-panel):not(.selectsContainer):not(.wd-editor-cell) {
    grid-column: 1;
  }
}

/* Below the two-column breakpoint the form stacks. Two things have to be
   fixed by hand: the legacy markup puts gender/speed *before* the panel, so
   the settings card would read bottom-half-first; and text_2024.css's
   `gap: 4rem` leaves the two fields at ~100px each on a phone. */
@media (max-width: 991px) {
  body.wd25-dash .wd-converter-form {
    display: flex;
    flex-direction: column;
  }

  body.wd25-dash .wd-converter-form .wd-voice-panel { order: -2; }

  /* text_2024.css turns this into a centered column below 1175px, which
     stacks Gender over Speed and lets each shrink to its label. Keep the row. */
  body.wd25-dash .wd-converter-form .selectsContainer {
    order: -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }

  body.wd25-dash .wd-converter-form .selectsContainer > .form-group {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0 !important;
  }

  /* Sharing the row with Gender left the speed slider 27px wide on a phone.
     A slider needs a track you can actually aim at. */
  body.wd25-dash .wd-converter-form .selectsContainer > .form-group:has(.speakingContainer) {
    flex: 1 1 100%;
  }
}

/* never let the track collapse to a nub, whatever the column width */
body.wd25-dash .wd-speed-range { min-width: 90px; }

/* Settings is one card: the panel is its top half and the legacy
   gender/speed controls its bottom half, so they read as a single surface
   instead of two boxes stacked with a seam between them. */
body.wd25-dash .wd-voice-panel {
  border: 1px solid var(--wd-line);
  border-bottom: 0;
  border-radius: var(--wd-radius) var(--wd-radius) 0 0;
  background: #fff;
  padding: 16px 16px 4px;
}

body.wd25-dash .wd-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wd-ink);
  margin-bottom: 14px;
}

body.wd25-dash .wd-panel-block { margin-bottom: 14px; }

body.wd25-dash .wd-panel-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wd-ink-faint);
  margin-bottom: 7px;
}

/* selected-voice card */
body.wd25-dash .wd-voice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.wd25-dash .wd-voice-card:hover { border-color: var(--wd-line-strong); background: var(--wd-bg); }

body.wd25-dash .wd-vc-av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--wd-line);
}

/* No portrait? Initials on a stable tint. A flag emoji in a gray circle was
   the old fallback and it rendered as a black blob for some regions. */
body.wd25-dash .wd-vc-av-mono,
body.wd25-dash .wd-picker-av-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--wd-ink);
  background: var(--wd-bg-sub);
  border-color: transparent;
}

body.wd25-dash [data-tint="0"] { background: #ececf1; }
body.wd25-dash [data-tint="1"] { background: #e7eeea; }
body.wd25-dash [data-tint="2"] { background: #f1eae4; }
body.wd25-dash [data-tint="3"] { background: #e8eaf0; }
body.wd25-dash [data-tint="4"] { background: #f0e9ee; }
body.wd25-dash [data-tint="5"] { background: #eaefef; }

body.wd25-dash .wd-vc-meta { flex: 1; min-width: 0; }
body.wd25-dash .wd-vc-meta b { display: block; font-size: 13.5px; color: var(--wd-ink); }
body.wd25-dash .wd-vc-meta small,
body.wd25-dash .wd-vc-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.wd25-dash .wd-vc-meta small { display: block; font-size: 11.5px; color: var(--wd-ink-faint); text-transform: capitalize; }

/* Tier badge — Regional / Expressive / Premium / Standard. Deliberately says
   nothing about which service synthesizes the voice. */
body.wd25-dash .wd-vc-tier,
body.wd25-dash .wd-picker-tier {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wd-ink-soft);
  background: var(--wd-bg-sub);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* the house catalog is the one worth pointing at */
body.wd25-dash [data-tier="regional"] {
  color: var(--wd-ink);
  background: #fff;
  border-color: var(--wd-line-strong);
}

body.wd25-dash .wd-panel-browse {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  background: var(--wd-bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wd-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.wd25-dash .wd-panel-browse:hover { background: var(--wd-bg-sub); border-color: var(--wd-line-strong); }
body.wd25-dash .wd-panel-browse span { transition: transform 0.15s ease; display: inline-block; }
body.wd25-dash .wd-panel-browse:hover span { transform: translateX(3px); }

/* bottom half of the Settings card */
body.wd25-dash .wd-converter-form .selectsContainer {
  border: 1px solid var(--wd-line);
  border-radius: 0 0 var(--wd-radius) var(--wd-radius);
  background: #fff;
  padding: 4px 16px 16px;
}

body.wd25-dash .wd-converter-form .selectsContainer .form-group { margin-bottom: 14px; }
body.wd25-dash .wd-converter-form .selectsContainer .form-group:last-child { margin-bottom: 0; }

body.wd25-dash .wd-converter-form .selectTitle,
body.wd25-dash .wd-converter-form .customLabel {
  display: block;
  text-align: left !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wd-ink-faint);
  margin-bottom: 7px;
}

/* The Voice and Gender selects are both redundant now that the picker exists:
   gender is a property of the voice you chose, not a separate decision, and
   having both meant two controls that could disagree. Keep them in the DOM —
   a display:none field still submits, and the converter's own scripts read
   them — but take their wrappers out of the layout too. */
body.wd25-dash .wd-converter-form .voiceContainer,
body.wd25-dash .wd-converter-form .genderDiv,
body.wd25-dash .wd-converter-form label[for="language"],
body.wd25-dash .wd-converter-form label[for="gender_voice"],
body.wd25-dash .wd-converter-form label[for="gender_voice-selectized"] { display: none !important; }

body.wd25-dash .wd-converter-form .selectsContainer .form-group:has(> .voiceContainer),
body.wd25-dash .wd-converter-form .selectsContainer .form-group:has(> .genderDiv) {
  display: none !important;
}

/* Gender / Speed.
   text_2024.css pins these at `width: 162.5px !important` and absolutely
   positions the glyph inside them, which left a narrow pill floating in a
   320px column with the icon sitting on top of the value. Put the glyph back
   in flow and let the field own its column. */
body.wd25-dash .wd-converter-form .genderDiv,
body.wd25-dash .wd-converter-form .speakingContainer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100% !important;
  height: 40px;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wd25-dash .wd-converter-form .genderDiv:focus-within,
body.wd25-dash .wd-converter-form .speakingContainer:focus-within {
  border-color: var(--wd-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.07);
}

body.wd25-dash .wd-converter-form .genderIcon {
  position: static !important;
  transform: none !important;
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.45;
}

/* Selectize.js hides the real <select> and renders .selectize-input in its
   place, so styling the <select> alone does nothing. text_2024.css gives that
   replacement a 30px-radius border and a 25px round caret icon — a pill
   inside our field. Flatten it and let the wrapper be the only box. */
body.wd25-dash .wd-converter-form .genderDiv .selectize-control,
body.wd25-dash .wd-converter-form .speakingContainer .selectize-control {
  width: 100% !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
}

/* text_2024.css hardcodes Inter on the selectize input, so Gender and Speed
   were the only text on the page in a different typeface */
body.wd25-dash .selectize-input,
body.wd25-dash .selectize-dropdown { font-family: inherit !important; }

body.wd25-dash .wd-converter-form .genderDiv .selectize-input,
body.wd25-dash .wd-converter-form .speakingContainer .selectize-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 22px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 13.5px !important;
  color: var(--wd-ink) !important;
}

/* swap the round downIcon.svg for one quiet chevron */
body.wd25-dash .wd-converter-form .selectize-control.single .selectize-input:after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  top: 50% !important;
  right: 4px !important;
  margin: -3px 0 0 !important;
  border: solid var(--wd-ink-faint) !important;
  border-width: 0 1.5px 1.5px 0 !important;
  border-radius: 1px;
  transform: rotate(45deg);
}

body.wd25-dash .wd-converter-form .selectize-control.single.dropdown-active .selectize-input:after {
  margin-top: 1px !important;
  transform: rotate(-135deg);
}

/* dropdown panel matches the picker's surfaces */
body.wd25-dash .wd-converter-form .selectize-dropdown {
  border: 1px solid var(--wd-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 34px -18px rgba(13, 13, 18, 0.5) !important;
  padding: 4px !important;
  margin-top: 4px !important;
  font-size: 13px !important;
}

body.wd25-dash .wd-converter-form .selectize-dropdown .option {
  border-radius: 7px !important;
  padding: 7px 10px !important;
}

body.wd25-dash .wd-converter-form .selectize-dropdown .active {
  background: var(--wd-bg-sub) !important;
  color: var(--wd-ink) !important;
}

body.wd25-dash .wd-converter-form .genderDiv select,
body.wd25-dash .wd-converter-form .speakingContainer select {
  -webkit-appearance: none;
  appearance: none;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 22px 0 0 !important;
  height: 38px;
  font-size: 13.5px;
  color: var(--wd-ink);
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238b8b95' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right center / 12px;
  width: 100%;
  cursor: pointer;
}

/* ---------- editor ---------- */

/* text_2024.css locks the editor at 450px with a -20px right margin that
   pushes it past the column edge */
body.wd25-dash .wd-converter-form .textAreaStyle {
  min-height: 340px;
  height: auto !important;
  margin-right: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  font-size: 14.5px;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wd25-dash .wd-converter-form .textAreaStyle:focus {
  border-color: var(--wd-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.07);
}

body.wd25-dash .wd-converter-form .textAreaStyle::placeholder { color: var(--wd-ink-faint); }

/* ---------- picker overlay ---------- */

body.wd25-dash .wd-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 18, 0.45);
  z-index: 1400;
  padding: 5vh 16px;
}

body.wd25-dash .wd-picker-overlay.open { display: flex; justify-content: center; align-items: flex-start; }

body.wd25-dash .wd-picker {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--wd-line);
  box-shadow: 0 30px 70px -30px rgba(13, 13, 18, 0.45);
  overflow: hidden;
}

body.wd25-dash .wd-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--wd-line);
}

body.wd25-dash .wd-picker-head h2 { font-size: 17px; margin: 0; }
body.wd25-dash .wd-picker-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--wd-ink-faint); }

body.wd25-dash .wd-picker-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--wd-ink-faint);
  cursor: pointer;
}

body.wd25-dash .wd-picker-searchbox { position: relative; margin: 14px 20px 10px; }

body.wd25-dash .wd-picker-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wd25-dash .wd-picker-search:focus {
  outline: none;
  border-color: var(--wd-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.07);
}

/* ---------- type-ahead ---------- */

body.wd25-dash .wd-picker-suggest {
  display: none;
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  box-shadow: 0 16px 34px -18px rgba(13, 13, 18, 0.5);
}

body.wd25-dash .wd-picker-suggest.open { display: block; }

body.wd25-dash .wd-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--wd-ink);
  cursor: pointer;
}

body.wd25-dash .wd-suggest-item b { font-weight: 700; }
body.wd25-dash .wd-suggest-item em {
  font-style: normal;
  font-size: 10.5px;
  text-transform: capitalize;
  color: var(--wd-ink-faint);
}

body.wd25-dash .wd-suggest-item:hover,
body.wd25-dash .wd-suggest-item.active { background: var(--wd-bg-sub); }

/* head/search/filters must keep their natural height: with the default
   flex-shrink the long list squashed the chips into a sliver */
body.wd25-dash .wd-picker-head,
body.wd25-dash .wd-picker-searchbox { flex: none; }

body.wd25-dash .wd-picker-filters {
  flex: none;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--wd-line);
  max-height: 32vh;
  overflow-y: auto;
}

body.wd25-dash .wd-filter-group { margin-bottom: 10px; }

body.wd25-dash .wd-filter-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wd-ink-faint);
  margin-bottom: 5px;
}

body.wd25-dash .wd-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

body.wd25-dash .wd-chip-filter {
  border: 1px solid var(--wd-line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wd-ink-soft);
  cursor: pointer;
  transition: all 0.12s ease;
}

body.wd25-dash .wd-chip-filter b { font-weight: 600; opacity: 0.55; margin-left: 3px; }
body.wd25-dash .wd-chip-filter:hover { border-color: var(--wd-line-strong); color: var(--wd-ink); }

body.wd25-dash .wd-chip-filter.active {
  background: var(--wd-ink);
  border-color: var(--wd-ink);
  color: #fff;
}

body.wd25-dash .wd-chip-filter.active b { opacity: 0.7; }

body.wd25-dash .wd-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 14px; }

body.wd25-dash .wd-picker-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}

body.wd25-dash .wd-picker-row:hover { background: var(--wd-bg); }
body.wd25-dash .wd-picker-row.playing { background: var(--wd-bg-sub); }

body.wd25-dash .wd-picker-av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--wd-line);
}

body.wd25-dash .wd-picker-meta { flex: 1; min-width: 0; }
body.wd25-dash .wd-picker-meta b { display: block; font-size: 13.5px; }
body.wd25-dash .wd-picker-meta small { display: block; font-size: 11.5px; color: var(--wd-ink-faint); text-transform: capitalize; }

/* play / stop drawn in CSS so the row never shows a raw ▶ glyph */
body.wd25-dash .wd-picker-play {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--wd-line);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.wd25-dash .wd-picker-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--wd-ink);
}

body.wd25-dash .wd-picker-play:hover { border-color: var(--wd-line-strong); background: var(--wd-bg); }

body.wd25-dash .wd-picker-row.playing .wd-picker-play {
  background: var(--wd-ink);
  border-color: var(--wd-ink);
}

/* the playing row shows a stop square instead of the triangle */
body.wd25-dash .wd-picker-row.playing .wd-picker-play::before {
  transform: translate(-50%, -50%);
  border: 0;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
}

body.wd25-dash .wd-picker-empty { padding: 26px; text-align: center; color: var(--wd-ink-faint); font-size: 13px; }

/* ---------- now playing ----------
   Pinned to the bottom of the dialog: filtering the list must never leave a
   preview running with nothing left to click to stop it. */

body.wd25-dash .wd-now-playing {
  position: sticky;
  bottom: 0;
  z-index: 4;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--wd-ink);
  color: #fff;
  font-size: 12.5px;
}

body.wd25-dash .wd-now-playing[hidden] { display: none; }

body.wd25-dash .wd-np-label { margin-right: auto; opacity: 0.75; }
body.wd25-dash .wd-np-label b { color: #fff; font-weight: 600; opacity: 1; }

body.wd25-dash .wd-np-pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: wd-np-blink 1.1s ease-in-out infinite;
}

@keyframes wd-np-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

body.wd25-dash .wd-np-stop {
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

body.wd25-dash .wd-np-stop:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- converter action bar ----------
   The counter used to float alone above a centered button; this puts the
   usage on the left and the primary action on the right, one row. */

/* The action row belongs to the editor, not to the page.
   The button first sat on bare background under a hairline, so it read as
   detached; boxing it separately just moved the problem. The editor and this
   row are now one card — the editor loses its bottom corners, the row keeps
   them — which is the arrangement it was compared against. */
body.wd25-dash .wd-converter-form .wd-editor-cell .textAreaStyle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  display: block;   /* kill the inline-block baseline gap under the textarea */
}

/* Bootstrap's .form-group margin sat between the two halves of the card. */
body.wd25-dash .wd-converter-form .wd-editor-cell {
  margin-bottom: 0 !important;
}

body.wd25-dash .wd-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 0;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--wd-line);
  border-radius: 0 0 var(--wd-radius) var(--wd-radius);
}

/* Flat and quiet: a lifted, shadowed pill drew more attention than the text
   people are supposed to be writing. */
body.wd25-dash .wd-action-bar .btn-primary {
  border-radius: 10px !important;
  height: 42px;
  padding: 0 22px !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.wd25-dash .wd-action-bar .btn-primary:hover { background: #2a2a33 !important; }
body.wd25-dash .wd-action-bar .btn-primary:active { background: #000000 !important; }

body.wd25-dash .wd-action-bar .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.2) !important;
}

/* text only, like the control it was compared against */
body.wd25-dash .wd-action-bar .btn-primary img { display: none !important; }

/* the collapsed rail is glyphs only — a text badge next to one of them
   overflows the 70px and lands on the content */
body.wd25-dash.sidebar-icon-only .wd-nav-badge { display: none; }

/* The legacy submit ships inside its own centering wrapper with inline
   styles, which floated the button away from the bar's right edge. */
body.wd25-dash .wd-action-bar > div {
  margin: 0 !important;
  max-width: none !important;
  justify-content: flex-end !important;
}

body.wd25-dash .wd-action-bar .btn {
  margin: 0 !important;   /* Bootstrap's mr-2 held it 8px off the edge */
  height: 46px;
  padding: 0 26px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14.5px !important;
}

/* the play glyph carried its own 30px box, which set the button's height */
body.wd25-dash .wd-action-bar .btn img { width: 17px !important; height: 17px; margin: 0; }

body.wd25-dash .wd-action-bar .wd-usage {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--wd-ink-faint);
}

body.wd25-dash .wd-action-bar .wd-usage b { color: var(--wd-ink); font-weight: 600; }

/* the legacy counter block sits in the bar instead of floating above it */
body.wd25-dash .wd-converter-form #charNumFormGroup {
  display: block !important;
  margin: 0;
  font-size: 12.5px;
  color: var(--wd-ink-faint);
}

body.wd25-dash .wd-converter-form #charNumFormGroup label { margin: 0; font-size: 12.5px; text-transform: none; letter-spacing: 0; }

@media (max-width: 767px) {
  body.wd25-dash .wd-action-bar { flex-wrap: wrap; }
  body.wd25-dash .wd-action-bar .btn { width: 100%; }
}

/* ============================================================
   Speed slider
   The legacy <select> stays in the DOM (it submits) but is no longer the
   control you touch: picking one of 16 steps out of a dropdown is a poor
   way to express a continuous value.
   ============================================================ */

body.wd25-dash .wd-converter-form .speakingContainer .selectize-control,
body.wd25-dash .wd-converter-form .speakingContainer select { display: none !important; }

body.wd25-dash .wd-speed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Native control tinted with accent-color: the browser draws the filled
   track for free, which keeps the skin gradient-free and the slider
   accessible without re-implementing a thumb. */
body.wd25-dash .wd-speed-range {
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  accent-color: var(--wd-ink);
  cursor: pointer;
}

body.wd25-dash .wd-speed-range:focus-visible { outline: 2px solid var(--wd-ink); outline-offset: 4px; }

body.wd25-dash .wd-speed-value {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--wd-ink);
}

/* ============================================================
   Picker: reachable filters + a visible reason for an empty list
   ============================================================ */

/* Every facet value stays reachable; `limit` is only a collapsed height.
   Capping the rows outright hid 33 languages with no way to find them. */
body.wd25-dash .wd-filter-more {
  border: 1px dashed var(--wd-line-strong);
  background: transparent;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wd-ink-soft);
  cursor: pointer;
}

body.wd25-dash .wd-filter-more:hover { color: var(--wd-ink); border-color: var(--wd-ink); }

/* The chip block scrolls, so an active chip could scroll out of sight and
   leave "0 voices" looking unexplained. This row never scrolls. */
body.wd25-dash .wd-picker-active {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--wd-bg);
  border-bottom: 1px solid var(--wd-line);
}

body.wd25-dash .wd-picker-active[hidden] { display: none; }

body.wd25-dash .wd-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--wd-ink);
  background: var(--wd-ink);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body.wd25-dash .wd-active-pill i {
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

body.wd25-dash .wd-active-pill b { font-weight: 400; opacity: 0.7; }
body.wd25-dash .wd-active-pill:hover b { opacity: 1; }

body.wd25-dash .wd-active-clear {
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--wd-ink-soft);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 6px;
}

body.wd25-dash .wd-active-clear:hover { color: var(--wd-ink); }

body.wd25-dash .wd-picker-reset {
  display: block;
  margin: 12px auto 0;
  border: 1px solid var(--wd-line-strong);
  background: #fff;
  border-radius: 9px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wd-ink);
  cursor: pointer;
}

body.wd25-dash .wd-picker-reset:hover { background: var(--wd-bg-sub); }

/* Caveat shown when the chosen voice cannot honour something the screen
   offers — regional voices are plain TTS and ignore SSML tags. */
body.wd25-dash .wd-voice-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wd-bg-sub);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--wd-ink-soft);
}

body.wd25-dash .wd-voice-note[hidden] { display: none; }

/* ============================================================
   My Audios
   ============================================================ */

body.wd25-dash #audios_table {
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 4px !important;
  font-size: 13px;
}

/* myAudios_2024.css pins `.columnTitle` at 17px/Inter with !important, which
   made the header row shout louder than the data under it. */
body.wd25-dash #audios_table th,
body.wd25-dash #audios_table th.columnTitle {
  border: none;
  border-bottom: 1px solid var(--wd-line);
  padding: 0 12px 10px;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wd-ink-faint) !important;
  white-space: nowrap;
}

body.wd25-dash #audios_table td {
  border: none;
  border-bottom: 1px solid var(--wd-line);
  padding: 12px;
  vertical-align: middle;
  color: var(--wd-ink);
}

body.wd25-dash #audios_table tbody tr:last-child td { border-bottom: none; }
body.wd25-dash #audios_table tbody tr { transition: background 0.12s ease; }
body.wd25-dash #audios_table tbody tr:hover { background: var(--wd-bg); }

/* the actions column stacked four labelled rows per audio, which made every
   row four lines tall — lay them out inline */
body.wd25-dash #audios_table .dropdown-menu { font-size: 13px; }
body.wd25-dash #audios_table img { max-width: 26px; height: auto; }
body.wd25-dash #audios_table .fa-spinner { font-size: 18px !important; }

/* reset under the chips, where you finish reading them */
body.wd25-dash .wd-picker-reset-all {
  display: block;
  margin: 2px 0 4px;
  border: 1px solid var(--wd-line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wd-ink);
  cursor: pointer;
}

body.wd25-dash .wd-picker-reset-all[hidden] { display: none; }
body.wd25-dash .wd-picker-reset-all:hover { background: var(--wd-bg-sub); }

/* a name alone says nothing about a voice you have not heard */
body.wd25-dash .wd-np-label #wdNowPlayingMeta { opacity: 0.7; font-weight: 400; }

/* a voice with no sample says so instead of leaving a gap where the play
   button sits on every other row */
body.wd25-dash .wd-picker-nopreview {
  flex: none;
  width: 30px;
  font-size: 9.5px;
  line-height: 1.15;
  text-align: center;
  color: var(--wd-ink-faint);
}

/* ============================================================
   Custom Voices (Studio tier)
   ============================================================ */

body.wd25-dash .wd-nav-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wd-ink-soft);
  background: var(--wd-bg-sub);
  border-radius: 999px;
  padding: 2px 7px;
}

body.wd25-dash .navItem.active .wd-nav-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

body.wd25-dash .wd-cv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

body.wd25-dash .wd-cv-head h1 { font-size: 20px; margin: 0 0 4px; }
body.wd25-dash .wd-cv-sub { margin: 0; max-width: 62ch; color: var(--wd-ink-soft); }

body.wd25-dash .wd-cv-quota {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--wd-ink-soft);
  background: var(--wd-bg-sub);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

body.wd25-dash .wd-cv-errors {
  border: 1px solid #f0ccd6;
  background: #fff4f7;
  border-radius: var(--wd-radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}

body.wd25-dash .wd-cv-errors p { margin: 0; color: #b8244d; font-size: 13px; }

body.wd25-dash .wd-cv-empty,
body.wd25-dash .wd-cv-full {
  border: 1px dashed var(--wd-line-strong);
  border-radius: var(--wd-radius);
  padding: 22px;
  text-align: center;
  color: var(--wd-ink-soft);
  margin-bottom: 22px;
}

body.wd25-dash .wd-cv-empty p { margin: 0 0 4px; }

body.wd25-dash .wd-cv-list {
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  margin-bottom: 22px;
  overflow: hidden;
}

body.wd25-dash .wd-cv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--wd-line);
}

body.wd25-dash .wd-cv-item:last-child { border-bottom: none; }

body.wd25-dash .wd-cv-av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wd-bg-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

body.wd25-dash .wd-cv-meta { flex: 1; min-width: 0; }
body.wd25-dash .wd-cv-meta b { display: block; font-size: 13.5px; }
body.wd25-dash .wd-cv-meta small { display: block; font-size: 11.5px; color: var(--wd-ink-faint); text-transform: capitalize; }

body.wd25-dash .wd-cv-status {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--wd-bg-sub);
  color: var(--wd-ink-soft);
}

body.wd25-dash .wd-cv-status[data-status="ready"] { background: var(--wd-ink); color: #fff; }
body.wd25-dash .wd-cv-status[data-status="failed"] { background: #fff4f7; color: #b8244d; }

body.wd25-dash .wd-cv-failure {
  margin: 0;
  padding: 10px 14px 12px 60px;   /* aligned under the name, not the avatar */
  border-bottom: 1px solid var(--wd-line);
  background: #fff9fb;
  font-size: 12px;
  color: #b8244d;
}

body.wd25-dash .wd-cv-list > .wd-cv-failure:last-child { border-bottom: none; }

body.wd25-dash .wd-cv-form {
  border-top: 1px solid var(--wd-line);
  padding-top: 20px;
}

body.wd25-dash .wd-cv-form h2 { font-size: 15px; margin: 0 0 14px; }

body.wd25-dash .wd-cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

body.wd25-dash .wd-cv-field { display: block; margin-bottom: 14px; }

body.wd25-dash .wd-cv-field > span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wd-ink-faint);
  margin-bottom: 6px;
}

body.wd25-dash .wd-cv-field input[type="text"],
body.wd25-dash .wd-cv-field select,
body.wd25-dash .wd-cv-field textarea {
  width: 100%;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wd25-dash .wd-cv-field input:focus,
body.wd25-dash .wd-cv-field select:focus,
body.wd25-dash .wd-cv-field textarea:focus {
  outline: none;
  border-color: var(--wd-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 18, 0.07);
}

body.wd25-dash .wd-cv-field small {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--wd-ink-faint);
}

body.wd25-dash .wd-cv-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  background: var(--wd-bg);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wd-ink-soft);
}

body.wd25-dash .wd-cv-consent input { margin-top: 2px; flex: none; }

/* ============================================================
   Audio player
   One transport bar. The old markup drew a native <audio controls> and a
   second row of custom buttons under it — two players, one of them in the
   browser's own style.
   ============================================================ */

body.wd25-dash .wd-player,
.wd-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--wd-line, #e6e6ea);
  border-radius: var(--wd-radius, 12px);
  font-family: var(--wd-font, inherit);
}

/* Pinned to the window on the edit screen; inline everywhere else, because a
   fixed bar on the marketing homepage would cover its own CTA. */
.wd-player.floating {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1150;
  border: none;
  border-top: 1px solid var(--wd-line, #e6e6ea);
  border-radius: 0;
  box-shadow: 0 -8px 24px -18px rgba(13, 13, 18, 0.5);
}

@media (min-width: 992px) {
  /* clear the sidebar rather than sitting under it */
  body.wd25-dash .wd-player.floating { left: 260px; }
  body.wd25-dash.sidebar-icon-only .wd-player.floating { left: 70px; }
}

/* A fixed bar sits on top of whatever is at the bottom of the page — on the
   edit screen that was Speak It and Cancel. Give the content room for it. */
body.wd25-dash:has(.wd-player.floating) .content-wrapper { padding-bottom: 96px; }

.wd-player-audio { display: none; }

.wd-player-meta { flex: 0 1 240px; min-width: 0; }
.wd-player-meta b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-player-meta small { display: block; font-size: 11.5px; color: var(--wd-ink-faint, #8b8b95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wd-player-transport { display: flex; align-items: center; gap: 10px; flex: none; }

.wd-player-back,
.wd-player-forward,
.wd-player-download {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--wd-ink-soft, #55555f);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.14s ease, color 0.14s ease;
}

.wd-player-back:hover,
.wd-player-forward:hover,
.wd-player-download:hover { background: var(--wd-bg-sub, #f1f1f3); color: var(--wd-ink, #0d0d12); }

/* the ⟲ / ⟳ arcs, drawn rather than shipped as two more icon files */
.wd-player-back::before,
.wd-player-forward::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
}

.wd-player-forward::before { transform: scaleX(-1); }

.wd-player-back span,
.wd-player-forward span { font-size: 8.5px; font-weight: 700; line-height: 1; }

.wd-player-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--wd-ink, #0d0d12);
  cursor: pointer;
  position: relative;
  flex: none;
  transition: transform 0.12s ease;
}

.wd-player-play:hover { transform: scale(1.05); }
.wd-player-play:active { transform: scale(0.97); }

.wd-player-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

/* pause bars while playing */
.wd-player.playing .wd-player-play::before {
  transform: translate(-50%, -50%);
  border: 0;
  width: 4px;
  height: 12px;
  background: #fff;
  box-shadow: 6px 0 0 #fff;
  margin-left: -3px;
}

.wd-player-track { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }

.wd-player-seek {
  flex: 1;
  min-width: 60px;
  height: 16px;
  margin: 0;
  accent-color: var(--wd-ink, #0d0d12);
  cursor: pointer;
}

.wd-player-time {
  flex: none;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--wd-ink-faint, #8b8b95);
}

.wd-player-download svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wd-player-dl-form { display: none; }

@media (max-width: 767px) {
  .wd-player { flex-wrap: wrap; gap: 10px; }
  .wd-player-meta { flex: 1 1 100%; }
  .wd-player-track { order: 3; flex: 1 1 100%; }
}

/* The working state used to be set in 28px — three times the button's own
   text — so pressing the button made it double in size. */
body.wd25-dash .wd-working {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.wd25-dash .wd-working i { font-size: 14px !important; margin: 0 !important; }

/* An audio that is still being synthesized has no file behind it yet, so the
   transport must not invite a click that does nothing. */
.wd-player.is-pending { opacity: 0.6; }
.wd-player.is-pending .wd-player-play,
.wd-player.is-pending .wd-player-back,
.wd-player.is-pending .wd-player-forward,
.wd-player.is-pending .wd-player-seek,
.wd-player.is-pending .wd-player-download { pointer-events: none; }
.wd-player.is-pending .wd-player-play { background: var(--wd-line-strong, #d4d4da); }

/* ============================================================
   Account pill + menu
   ============================================================ */

body.wd25-dash .wd-online-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a06b;
  box-shadow: 0 0 0 2px rgba(34, 160, 107, 0.18);
  margin-right: 8px;
}

body.wd25-dash .emailContainer { display: flex; align-items: center; }

body.wd25-dash .navbar-dropdown {
  border: 1px solid var(--wd-line) !important;
  border-radius: var(--wd-radius) !important;
  box-shadow: 0 18px 40px -20px rgba(13, 13, 18, 0.45) !important;
  padding: 0 !important;
  min-width: 268px;
  overflow: hidden;
}

/* what is left, first — it is what people open this menu to check */
body.wd25-dash .wd-menu-balance {
  padding: 14px 16px;
  background: var(--wd-bg);
  border-bottom: 1px solid var(--wd-line);
}

body.wd25-dash .wd-menu-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.wd25-dash .wd-menu-balance-row span { font-size: 12px; color: var(--wd-ink-faint); }
body.wd25-dash .wd-menu-balance-row b { font-size: 15px; font-variant-numeric: tabular-nums; }

body.wd25-dash .wd-menu-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

body.wd25-dash .wd-menu-plan span { font-size: 12px; color: var(--wd-ink-soft); }

body.wd25-dash .wd-menu-upgrade {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff !important;
  background: var(--wd-ink);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
}

body.wd25-dash .wd-menu-upgrade:hover { background: #2a2a33; }

body.wd25-dash .navbar-dropdown .dropdown-item {
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--wd-ink) !important;
  display: flex;
  align-items: center;
}

body.wd25-dash .navbar-dropdown .dropdown-item:hover { background: var(--wd-bg-sub); }
body.wd25-dash .navbar-dropdown .dropdown-divider { margin: 0; border-color: var(--wd-line); }

/* ============================================================
   Flash messages
   Five near-identical blocks with inline palettes became one component.
   ============================================================ */

body.wd25-dash .wd-flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;          /* it used to sit flush against the next card */
  padding: 13px 16px;
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  background: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wd-ink);
}

body.wd25-dash .wd-flash-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--wd-ink);
  margin-top: 1px;
}

body.wd25-dash .wd-flash-text { flex: 1; margin: 0; min-width: 0; }
body.wd25-dash .wd-flash-list { margin: 6px 0 0; padding-left: 18px; }
body.wd25-dash .wd-flash-list li { font-size: 13px; }

body.wd25-dash .wd-flash-close {
  flex: none;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--wd-ink-faint);
  cursor: pointer;
  padding: 0 2px;
}

body.wd25-dash .wd-flash-close:hover { color: var(--wd-ink); }

/* One accent per tone, on the app's own palette rather than Bootstrap's. */
body.wd25-dash .wd-flash[data-tone="success"] { border-color: #bde5cd; background: #f4fbf7; }
body.wd25-dash .wd-flash[data-tone="success"] .wd-flash-icon { background: #22a06b; }

body.wd25-dash .wd-flash[data-tone="error"] { border-color: #f0ccd6; background: #fff6f8; }
body.wd25-dash .wd-flash[data-tone="error"] .wd-flash-icon { background: #b8244d; }

body.wd25-dash .wd-flash[data-tone="warning"] { border-color: #f0dfb8; background: #fffbf2; }
body.wd25-dash .wd-flash[data-tone="warning"] .wd-flash-icon { background: #b07d16; }

body.wd25-dash .wd-flash[data-tone="info"] { border-color: var(--wd-line-strong); background: var(--wd-bg); }
body.wd25-dash .wd-flash[data-tone="info"] .wd-flash-icon { background: var(--wd-ink-soft); }

/* ============================================================
   Custom Voices — what happens, before the form asks for anything
   ============================================================ */

body.wd25-dash .wd-cv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

body.wd25-dash .wd-cv-step {
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  background: var(--wd-bg);
  padding: 16px;
}

body.wd25-dash .wd-cv-step-icon { display: block; font-size: 22px; margin-bottom: 8px; }
body.wd25-dash .wd-cv-step b { display: block; font-size: 13.5px; margin-bottom: 3px; }
body.wd25-dash .wd-cv-step small { display: block; font-size: 12px; line-height: 1.5; color: var(--wd-ink-faint); }

body.wd25-dash .wd-cv-empty-icon { display: block; font-size: 30px; margin-bottom: 10px; }
body.wd25-dash .wd-cv-empty { padding: 30px 22px; }
body.wd25-dash .wd-cv-form h2 { margin-bottom: 18px; }
body.wd25-dash .wd-cv-grid { gap: 16px; margin-bottom: 18px; }
body.wd25-dash .wd-cv-field { margin-bottom: 18px; }