:root {
      --bg: #f6f7fb;
      --bg-2: #edf2f7;
      --surface: #ffffff;
      --surface-soft: #f3f6fb;
      --border: rgba(15, 23, 42, 0.1);
      --text: #111827;
      --muted: #667085;
      --ink: #111827;
      --teal: #b84dff;
      --teal-deep: #8b2cff;
      --teal-soft: #f3e8ff;
      --coral: #2563eb;
      --coral-soft: #dbeafe;
      --gold: #b45309;
      --gold-soft: #fef3c7;
      --berry: #7c3aed;
      --danger: #dc2626;
      --sand: #fef3c7;
      --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.11);
      --shadow-md: 0 14px 32px rgba(15, 23, 42, 0.09);
      --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.07);
      --radius-xl: 16px;
      --radius-lg: 12px;
      --radius-md: 10px;
      --radius-sm: 8px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      color: var(--text);
      font-family: "Aptos", "Segoe UI", sans-serif;
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    }

    body {
      padding: 24px;
    }

    body.landing-mode {
      background:
        radial-gradient(circle at 88% 6%, rgba(37, 99, 235, 0.12), transparent 26rem),
        radial-gradient(circle at 6% 28%, rgba(15, 118, 110, 0.11), transparent 30rem),
        #f8fafc;
    }

    .landing-page {
      width: min(1320px, 100%);
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 30px 90px rgba(15, 23, 42, 0.09);
    }

    .landing-header {
      min-height: 76px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 28px;
      padding: 0 42px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.07);
      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(18px);
    }

    .landing-brand {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-size: 20px;
      font-weight: 850;
      letter-spacing: -0.03em;
      text-decoration: none;
    }

    .landing-brand-mark {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: linear-gradient(145deg, var(--teal), #0b4f4a);
      color: #fff;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 8px 20px rgba(15, 118, 110, 0.2);
    }

    .landing-nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .landing-nav a {
      color: #475467;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .landing-nav a:hover { color: var(--teal-deep); }

    .landing-login {
      justify-self: end;
      padding: 10px 18px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: #fff;
      color: var(--ink);
    }

    .landing-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(390px, .96fr);
      align-items: center;
      gap: 70px;
      padding: 92px 72px 104px;
    }

    .landing-kicker,
    .landing-section-heading > span,
    .landing-price-copy > span,
    .landing-final-cta > span {
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .landing-kicker {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .landing-kicker span {
      width: 28px;
      height: 2px;
      background: var(--teal);
    }

    .landing-hero h1 {
      margin: 22px 0 22px;
      color: #0b1220;
      font-size: clamp(48px, 6vw, 82px);
      line-height: .96;
      letter-spacing: -.065em;
    }

    .landing-hero h1 em {
      color: var(--teal);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 500;
    }

    .landing-lead {
      max-width: 640px;
      margin: 0;
      color: #536174;
      font-size: 19px;
      line-height: 1.65;
    }

    .landing-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 32px;
    }

    .landing-primary-cta {
      min-height: 54px;
      padding-inline: 24px;
      background: var(--teal) !important;
      box-shadow: 0 14px 30px rgba(15, 118, 110, 0.2) !important;
    }

    .landing-text-button {
      background: transparent;
      color: #344054;
    }

    .landing-trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 26px;
      margin-top: 34px;
      color: #667085;
      font-size: 12px;
    }

    .landing-trust-row span { position: relative; }
    .landing-trust-row span + span::before {
      content: "";
      position: absolute;
      left: -14px;
      top: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    .landing-trust-row b { color: #1d2939; }

    .landing-product-card {
      position: relative;
      padding: 24px;
      border: 1px solid rgba(15, 118, 110, 0.15);
      border-radius: 22px;
      background: linear-gradient(155deg, #ffffff 0%, #f0fdfa 100%);
      box-shadow: 0 34px 70px rgba(15, 23, 42, 0.13);
      transform: rotate(1.2deg);
    }

    .landing-product-card::before {
      content: "";
      position: absolute;
      inset: -18px 18px 18px -18px;
      z-index: -1;
      border-radius: 24px;
      background: rgba(37, 99, 235, 0.07);
      transform: rotate(-3deg);
    }

    .landing-product-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .landing-product-top > div { display: grid; gap: 5px; }
    .landing-product-label,
    .landing-result-card > span {
      color: #7a889b;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .landing-product-top strong { font-size: 18px; }

    .landing-ready {
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 11px;
      font-weight: 800;
    }

    .landing-wave {
      height: 58px;
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 18px 0;
      padding: 0 12px;
      border-radius: 12px;
      background: #0f172a;
    }

    .landing-wave span {
      flex: 1;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(#e9a6ff, #ad42ff);
    }
    .landing-wave span:nth-child(3n) { height: 36px; }
    .landing-wave span:nth-child(4n) { height: 26px; }
    .landing-wave span:nth-child(5n) { height: 44px; }

    .landing-result-card {
      margin-top: 10px;
      padding: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.88);
    }

    .landing-result-accent { border-left: 3px solid var(--teal); }
    .landing-result-card p,
    .landing-result-card ul {
      margin: 8px 0 0;
      color: #475467;
      font-size: 12px;
      line-height: 1.55;
    }
    .landing-result-card ul { padding-left: 17px; }
    .landing-formats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 16px;
      color: #7a889b;
      font-size: 10px;
      font-weight: 800;
    }
    .landing-formats i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #cbd5e1;
    }

    .landing-section { padding: 96px 72px; }
    .landing-section-heading {
      max-width: 720px;
      margin: 0 auto 44px;
      text-align: center;
    }
    .landing-section-heading-left {
      margin-left: 0;
      text-align: left;
    }
    .landing-section-heading h2,
    .landing-price h2,
    .landing-final-cta h2 {
      margin: 12px 0 14px;
      color: #101828;
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.05;
      letter-spacing: -.045em;
    }
    .landing-section-heading p,
    .landing-price-copy p {
      margin: 0;
      color: #667085;
      font-size: 16px;
      line-height: 1.65;
    }

    .landing-step-grid,
    .landing-use-grid {
      display: grid;
      gap: 16px;
    }
    .landing-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-step {
      min-height: 250px;
      padding: 30px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 18px;
      background: #fff;
    }
    .landing-step-featured {
      background: #102a2a;
      color: #fff;
      transform: translateY(-10px);
      box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
    }
    .landing-step-number {
      color: #94a3b8;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
    }
    .landing-step h3,
    .landing-use-grid h3 {
      margin: 58px 0 10px;
      font-size: 21px;
      letter-spacing: -.02em;
    }
    .landing-step p,
    .landing-use-grid p {
      margin: 0;
      color: #667085;
      line-height: 1.6;
    }
    .landing-step-featured p { color: rgba(255, 255, 255, .72); }

    .landing-use-cases { background: #f8fafc; }
    .landing-use-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .landing-use-grid article {
      padding: 24px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
    }
    .landing-use-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #e6fffb;
      color: var(--teal-deep);
      font-size: 20px;
      font-weight: 800;
    }
    .landing-use-grid h3 { margin-top: 28px; }

    .landing-price {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
      align-items: center;
      gap: 72px;
      padding: 96px 72px;
    }
    .landing-price-card {
      padding: 28px;
      border-radius: 20px;
      background: #0f172a;
      color: #fff;
      box-shadow: 0 25px 55px rgba(15, 23, 42, .2);
    }
    .landing-price-card > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,.1);
      color: #cbd5e1;
    }
    .landing-price-card strong { color: #fff; font-size: 28px; }
    .landing-price-card small { color: #94a3b8; font-size: 11px; }
    .landing-price-card .button {
      width: 100%;
      margin-top: 22px;
      background: #fff;
      color: #0f172a;
    }
    .landing-price-card > small {
      display: block;
      margin-top: 12px;
      text-align: center;
    }

    .landing-final-cta {
      margin: 0 24px 24px;
      padding: 76px 28px;
      border-radius: 20px;
      background: linear-gradient(135deg, #7b2cff, #a832ee 55%, #d743ef);
      color: #fff;
      text-align: center;
    }
    .landing-final-cta > span { color: #e9b0ff; }
    .landing-final-cta h2 { color: #fff; }
    .landing-final-cta .button {
      margin-top: 18px;
      padding: 15px 24px;
      background: #fff;
      color: #0f3f3c;
    }

    .landing-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 30px 42px;
      border-top: 1px solid rgba(15, 23, 42, 0.07);
    }
    .landing-footer p {
      max-width: 600px;
      margin: 0;
      color: #667085;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }
    .landing-footer-copy {
      display: grid;
      justify-items: center;
      gap: 9px;
    }
    .landing-legal-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px 16px;
    }
    .landing-contact-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px 14px;
      color: #667085;
      font-size: 11px;
    }
    .landing-contact-links span { font-weight: 800; }
    .landing-contact-links a {
      color: var(--teal-deep);
      font-weight: 800;
      text-decoration: none;
    }
    .landing-contact-links a:hover,
    .landing-contact-links a:focus-visible { text-decoration: underline; }
    .landing-legal-links a {
      color: var(--teal-deep);
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
    }
    .landing-legal-links a:hover,
    .landing-legal-links a:focus-visible { text-decoration: underline; }
    .landing-footer > button {
      padding: 8px;
      background: transparent;
      color: var(--teal-deep);
      font-size: 12px;
    }

    .page {
      width: min(1560px, 100%);
      min-height: calc(100vh - 48px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .button,
    button,
    label.button {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font: inherit;
      font-weight: 700;
      transition: transform .15s ease, opacity .15s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .button:hover,
    button:hover,
    label.button:hover {
      transform: translateY(-1px);
    }

    .button:disabled,
    button:disabled,
    label.button:disabled {
      opacity: 0.56;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .button.primary,
    button.primary {
      background: var(--ink);
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    .button.secondary,
    button.secondary,
    label.button.secondary {
      background: var(--surface);
      color: var(--teal-deep);
      border: 1px solid var(--border);
    }

    .button.ghost,
    button.ghost {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .button.warn,
    button.warn {
      background: linear-gradient(180deg, var(--coral), var(--berry));
      color: #fff;
    }

    .button.danger {
      background: #fef2f2;
      color: var(--danger);
      border: 1px solid #fecaca;
    }

    .library-search {
      display: grid;
      gap: 8px;
      margin-top: 20px;
    }

    .library-search label {
      font-size: 14px;
      font-weight: 700;
    }

    .library-search .search-input:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    .web-shell {
      min-width: 0;
    }

    .web-app {
      min-height: calc(100vh - 48px);
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      position: relative;
    }

    .statusbar {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 12px 18px 12px 22px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.95);
    }

    .statusbar > span:first-child {
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }

    .statusbar-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    .screen {
      grid-column: 2;
      grid-row: 2;
      min-width: 0;
      padding: 26px 30px 36px;
      display: none;
    }

    .screen.active {
      display: block;
    }

    #screen-home.active {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
      gap: 20px;
      align-items: start;
    }

    #screen-home > .screen-title,
    #screen-home > .preprocess-card,
    #screen-home > .hero {
      grid-column: 1 / -1;
      margin-bottom: 0;
    }

    #screen-home > .section {
      min-width: 0;
      margin-top: 0;
    }

    #screen-home > .section:nth-child(4) {
      grid-column: 1 / -1;
    }

    #screen-home > .section:nth-child(5),
    #processingSection {
      grid-column: 1;
    }

    #screen-home > .section:nth-child(6),
    #screen-home > .section:nth-child(8) {
      grid-column: 2;
    }

    #libraryList {
      grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
      align-items: stretch;
    }

    #recentList,
    #processingList {
      grid-template-columns: 1fr;
    }

    .screen-title {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 20px;
    }

    .screen-title small {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }

    .screen-title h2 {
      margin: 0;
      font-size: 34px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .usage-pill {
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      color: var(--teal-deep);
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    .usage-pill.runtime-safe {
      background: var(--teal-deep);
      color: #fff;
      border-color: transparent;
    }

    .usage-pill.runtime-live {
      background: var(--surface-soft);
      color: var(--teal-deep);
    }

    .preprocess-card {
      padding: 14px;
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
      border: 1px solid var(--border);
      box-shadow: none;
      margin-bottom: 18px;
    }

    .preprocess-head,
    .speaker-mode-row,
    .speaker-count-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .preprocess-head {
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .preprocess-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .preprocess-title {
      margin-top: 2px;
      color: var(--text);
      font-size: 18px;
      font-weight: 900;
    }

    .preprocess-badge {
      min-width: 58px;
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }

    .speaker-mode-row {
      margin-bottom: 10px;
    }

    .speaker-mode-btn,
    .speaker-count-btn {
      min-height: 40px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .speaker-mode-btn {
      flex: 1;
    }

    .speaker-mode-btn.active {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .preprocess-status {
      margin: -2px 0 10px;
      color: var(--coral-deep);
      font-size: 11px;
      line-height: 16px;
      font-weight: 800;
    }

    .transcription-language-select {
      width: 100%;
      min-height: 44px;
      margin-bottom: 8px;
      padding: 10px 36px 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-weight: 800;
    }

    .transcription-language-select:focus-visible {
      outline: 3px solid rgba(36, 101, 97, 0.2);
      border-color: var(--teal);
    }

    .preprocess-hint {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    .speaker-count-row {
      flex-wrap: wrap;
    }

    .speaker-count-input {
      width: 62px;
      min-height: 40px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      text-align: center;
      font-size: 16px;
      font-weight: 900;
    }

    .speaker-count-btn {
      flex: 1;
      min-width: 34px;
      padding: 0 8px;
    }

    .speaker-count-btn.active {
      background: var(--sand);
      color: var(--text);
      border-color: rgba(210,155,75,0.55);
    }

    .hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: 24px;
      border-radius: var(--radius-lg);
      color: #fff;
      background: linear-gradient(135deg, #171020 0%, #7f2eea 62%, #d640ef 100%);
      box-shadow: var(--shadow-md);
      margin-bottom: 20px;
      animation: reveal-up .55s ease both;
    }

    .hero::after {
      content: none;
    }

    .hero > * {
      position: relative;
      z-index: 1;
    }

    .hero h3 {
      margin: 14px 0 10px;
      max-width: 780px;
      font-size: 34px;
      line-height: 1.06;
      letter-spacing: 0;
    }

    .hero p {
      max-width: 800px;
      margin: 0;
      color: rgba(255,255,255,0.9);
      line-height: 1.5;
      font-size: 15px;
    }

    .hero-note {
      margin-top: 14px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255,255,255,0.78);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
    }

    .tag.light {
      color: #fff;
      background: rgba(255,255,255,0.14);
    }

    .hero-actions,
    .chip-row,
    .control-row,
    .toolbar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .hero-actions {
      margin-top: 16px;
    }

    .chip-row {
      margin-top: 14px;
    }

    .mini-chip,
    .pill {
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mini-chip {
      background: rgba(255,255,255,0.14);
      color: #fff;
    }

    .pill.teal { background: var(--teal-soft); color: var(--teal-deep); }
    .pill.coral { background: var(--coral-soft); color: var(--coral); }
    .pill.gold { background: var(--gold-soft); color: var(--gold); }
    .pill.neutral { background: var(--surface-soft); color: var(--muted); }

    .pill.filter-pill {
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
    }

    .pill.filter-pill.active {
      background: var(--teal);
      border-color: rgba(23, 21, 19, 0.2);
      color: #fff;
    }

    .section {
      margin-top: 20px;
    }

    .section.reveal {
      animation: reveal-up .55s ease both;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      margin-bottom: 10px;
    }

    .section-head strong { font-size: 18px; }
    .section-head span { font-size: 12px; color: var(--muted); }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .quick-start-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card {
      padding: 14px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.86);
      border: 1px solid var(--border);
      box-shadow: none;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .card.soft-teal { background: linear-gradient(180deg, rgba(45,41,38,0.08), rgba(251,250,248,0.94)); }
    .card.soft-coral { background: linear-gradient(180deg, #f5f1ec, #fbf8f4); }
    .card.soft-gold { background: linear-gradient(180deg, #f3efe9, #fbfaf8); }
    .card.soft-mint { background: linear-gradient(180deg, #efebe6, #fbfaf8); }
    .card.runtime-card { background: linear-gradient(180deg, rgba(45,41,38,0.09), rgba(251,250,248,0.96)); }

    .action-card {
      min-height: 112px;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      gap: 10px;
      cursor: pointer;
    }

    .card:hover,
    .action-card:hover,
    .row-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: rgba(39, 35, 31, 0.16);
    }

    .icon-box {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      font-size: 16px;
    }

    .icon-record { background: var(--coral-soft); color: var(--coral); }
    .icon-import { background: var(--teal-soft); color: var(--teal-deep); }
    .icon-telegram { background: var(--gold-soft); color: var(--gold); }

    .action-card strong {
      font-size: 13px;
      line-height: 1.2;
    }

    .action-card p,
    .card p,
    .text-muted {
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .progress {
      height: 8px;
      border-radius: 999px;
      background: rgba(45,41,38,0.08);
      overflow: hidden;
      margin: 10px 0 0;
    }

    .progress > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--teal), var(--gold));
    }

    .dashboard-grid,
    .library-overview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .library-overview-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-card,
    .library-kpi {
      padding: 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.9);
      border: 1px solid var(--border);
      box-shadow: none;
      animation: reveal-up .55s ease both;
    }

    .dashboard-card span,
    .library-kpi span {
      display: block;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .dashboard-card strong,
    .library-kpi strong {
      display: block;
      font-size: 18px;
      line-height: 1.3;
      margin-bottom: 4px;
    }

    .dashboard-card p,
    .library-kpi p {
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .feature-card,
    .library-overview {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
      animation: reveal-up .6s ease both;
    }

    .feature-card h4 {
      margin: 10px 0 8px;
      font-size: 22px;
      line-height: 1.15;
    }

    .feature-card p,
    .library-overview p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
    }

    .feature-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .feature-footer {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 14px;
    }

    .feature-footnote {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .library-overview {
      padding: 18px;
      margin-top: 16px;
    }

    .library-overview-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: start;
      margin-bottom: 12px;
    }

    .library-overview-head strong {
      display: block;
      font-size: 17px;
      line-height: 1.25;
      margin-bottom: 4px;
    }

    .library-overview-note {
      margin-top: 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .account-card {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
    }

    .profile-avatar {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      font-size: 16px;
      font-weight: 800;
      background: var(--teal);
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    .profile-identity-meta {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .session-note {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .launch-card {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
    }

    .launch-note {
      margin-top: 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .list {
      display: grid;
      gap: 10px;
    }

    .row-card {
      cursor: pointer;
    }

    .row-top,
    .between {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .row-top {
      align-items: start;
      margin-bottom: 8px;
    }

    .row-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
    }

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

    .search-input,
    .field {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.86);
      box-shadow: none;
      font: inherit;
      color: var(--text);
    }

    .search-input::placeholder,
    .field::placeholder {
      color: #9a938b;
    }

    .empty {
      text-align: center;
      padding: 22px;
    }

    .empty strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
    }

    .empty-actions {
      justify-content: center;
      margin-top: 14px;
    }

    .nav {
      grid-column: 1;
      grid-row: 2;
      position: sticky;
      top: 0;
      align-self: start;
      min-height: calc(100vh - 102px);
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 16px;
      background: #f8fafc;
      border-right: 1px solid var(--border);
      box-shadow: none;
    }

    .nav-item {
      position: relative;
      padding: 11px 12px;
      border-radius: var(--radius-sm);
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      transition: background .16s ease, color .16s ease, transform .16s ease;
    }

    .nav-item.active {
      background: var(--ink);
      color: #fff;
      box-shadow: none;
    }

    .nav-item:hover {
      transform: translateY(-1px);
    }

    .hidden { display: none !important; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(28, 24, 20, 0.34);
      backdrop-filter: blur(10px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 40;
    }

    .modal-backdrop.active {
      display: flex;
    }

    .modal {
      width: min(1120px, 100%);
      max-height: min(92vh, 980px);
      overflow: auto;
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(255,255,255,0.5);
      box-shadow: var(--shadow-lg);
      padding: 24px;
    }

    .auth-modal {
      width: min(560px, 100%);
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 5px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
    }

    .auth-tab {
      min-height: 42px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 13px;
      font-weight: 800;
    }

    .auth-tab.active {
      background: #fff;
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }

    .auth-bonus {
      display: grid;
      gap: 4px;
      margin-bottom: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(15, 118, 110, .16);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    }

    .auth-bonus strong {
      color: var(--teal-deep);
      font-size: 14px;
    }

    .auth-bonus span {
      color: #4b6570;
      font-size: 12px;
      line-height: 1.5;
    }

    .auth-form {
      display: grid;
      gap: 10px;
    }

    .auth-consent {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      padding: 4px 2px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }
    .auth-consent input {
      width: 17px;
      height: 17px;
      margin: 1px 0 0;
      accent-color: #b233ed;
    }
    .auth-consent a { color: var(--teal-deep); font-weight: 800; }

    .auth-field-card {
      padding: 14px;
    }

    .auth-field-card label {
      display: block;
      margin-bottom: 9px;
      font-size: 13px;
    }

    .auth-field-card .field {
      background: #fff;
    }

    .auth-error {
      margin: 0;
      padding: 11px 13px;
      border: 1px solid rgba(220, 38, 38, 0.2);
      border-radius: var(--radius-sm);
      background: rgba(254, 226, 226, 0.72);
      color: #991b1b;
      font-size: 13px;
      line-height: 1.45;
    }

    .auth-submit {
      width: 100%;
      min-height: 46px;
      margin-top: 2px;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
      margin-bottom: 18px;
    }

    .modal-header h3 {
      margin: 0;
      font-size: 28px;
      line-height: 1.08;
    }

    .modal-header p {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

    .close-btn {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.86);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 18px;
      padding: 0;
    }

    .transcript-grid,
    .paywall-grid,
    .record-grid {
      display: grid;
      gap: 16px;
    }

    .summary-card {
      background: var(--surface-soft);
    }

    .export-bar {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface-soft);
    }

    .export-copy {
      display: grid;
      gap: 5px;
      max-width: 560px;
    }

    .export-copy strong {
      font-size: 14px;
    }

    .export-copy span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .export-controls {
      display: grid;
      grid-template-columns: minmax(150px, 190px) auto;
      gap: 8px 10px;
      align-items: end;
      flex: 0 0 auto;
    }

    .export-controls label {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .export-select {
      width: 100%;
      min-height: 43px;
      padding: 10px 34px 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 650;
    }

    .export-select:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    .transcript-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .stat-card {
      padding: 14px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.84);
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .stat-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 6px;
    }

    .stat-card strong {
      display: block;
      font-size: 15px;
      line-height: 1.3;
    }

    .key-list {
      display: grid;
      gap: 10px;
    }

    .key-item {
      display: flex;
      gap: 10px;
      align-items: start;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      margin-top: 6px;
      flex: 0 0 auto;
    }

    .key-item strong {
      display: block;
      font-size: 13px;
      line-height: 1.35;
      margin-bottom: 4px;
    }

    .key-item p {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .transcript-body {
      margin: 0;
      white-space: pre-wrap;
      line-height: 1.65;
      font-size: 14px;
      color: var(--text);
    }

    .transcript-body.placeholder {
      color: var(--muted);
    }

    #paywallModal {
      z-index: 60;
    }

    .paywall-modal {
      width: min(1080px, 100%);
      padding: 28px;
      background:
        radial-gradient(circle at 4% 0%, rgba(204, 251, 241, 0.72), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(219, 234, 254, 0.65), transparent 36%),
        rgba(255, 255, 255, 0.99);
    }

    .paywall-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
    }

    .paywall-header h3 {
      max-width: 720px;
      margin: 14px 0 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.04;
      letter-spacing: -0.035em;
    }

    .paywall-header p {
      max-width: 720px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .paywall-balance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(15, 118, 110, 0.16);
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.76);
    }

    .paywall-balance > div:first-child {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .paywall-balance span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .paywall-balance strong {
      font-size: 20px;
    }

    .paywall-rates {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .paywall-rates span {
      padding: 7px 9px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--teal-deep);
      font-size: 11px;
    }

    .paywall-reason {
      margin-top: 12px;
      padding: 12px 14px;
      border: 1px solid rgba(180, 83, 9, 0.2);
      border-radius: var(--radius-sm);
      background: var(--gold-soft);
      color: #78350f;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .paywall-layout {
      display: grid;
      grid-template-columns: minmax(260px, 0.82fr) minmax(480px, 1.3fr);
      gap: 18px;
      margin-top: 18px;
    }

    .paywall-value,
    .paywall-offer {
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.86);
    }

    .paywall-value {
      display: grid;
      align-content: start;
      gap: 4px;
    }

    .paywall-value-card {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      padding: 13px 0;
      border-bottom: 1px solid var(--border);
    }

    .paywall-check {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 13px;
      font-weight: 900;
    }

    .paywall-value-card strong {
      display: block;
      font-size: 13px;
      line-height: 1.35;
    }

    .paywall-value-card p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .paywall-guarantee {
      display: grid;
      gap: 5px;
      margin-top: 12px;
      padding: 13px;
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
    }

    .paywall-guarantee strong {
      font-size: 12px;
    }

    .paywall-guarantee span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .paywall-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }

    .paywall-section-head strong {
      font-size: 16px;
    }

    .paywall-section-head span {
      color: var(--muted);
      font-size: 11px;
    }

    .paywall-topup-card {
      display: grid;
      gap: 12px;
      padding: 22px;
      border: 1px solid rgba(15, 118, 110, .34);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #f0fdfa, #ffffff);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, .06);
    }

    .paywall-amount-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .paywall-amount-label span {
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .paywall-amount-label small {
      color: var(--muted);
      font-size: 11px;
    }

    .paywall-amount-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      overflow: hidden;
    }

    .paywall-amount-control:focus-within {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px var(--teal-soft);
    }

    .paywall-amount-control input {
      width: 100%;
      min-width: 0;
      padding: 13px 4px 13px 14px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 24px;
      font-weight: 850;
    }

    .paywall-amount-control > span {
      padding: 0 14px 0 8px;
      color: var(--muted);
      font-size: 19px;
      font-weight: 800;
    }

    .paywall-presets {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .paywall-presets button {
      min-height: 38px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--muted);
      font-weight: 800;
      cursor: pointer;
    }

    .paywall-presets button.active {
      border-color: var(--teal);
      background: var(--teal-soft);
      color: var(--teal-deep);
    }

    #paywallTopupAllowance {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .paywall-summary {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .paywall-summary > div {
      display: grid;
      gap: 3px;
    }

    .paywall-summary span,
    .paywall-fineprint {
      color: var(--muted);
      font-size: 11px;
    }

    .paywall-summary > strong {
      font-size: 22px;
    }

    .paywall-cta {
      width: 100%;
      min-height: 48px;
      margin-top: 14px;
    }

    .paywall-fineprint {
      margin: 9px 0 0;
      text-align: center;
      line-height: 1.45;
    }
    .paywall-legal {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
      text-align: center;
    }
    .paywall-legal a { color: var(--teal-deep); font-weight: 800; }

    .paywall-checkout-notice {
      margin-top: 10px;
      padding: 11px 12px;
      border: 1px solid rgba(15, 118, 110, 0.18);
      border-radius: var(--radius-sm);
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 12px;
      line-height: 1.45;
    }

    .paywall-later {
      width: 100%;
      margin-top: 4px;
      padding: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
    }

    .badge {
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      background: var(--gold-soft);
      color: var(--teal-deep);
      font-size: 11px;
      font-weight: 800;
    }

    .record-timer {
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
      margin: 6px 0;
    }

    .circle-hero {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
      font-size: 50px;
      border: 1px solid rgba(255,255,255,0.18);
      position: relative;
      isolation: isolate;
      --audio-scale: 1;
      --audio-ring-scale: 1.04;
      --audio-ring-opacity: 0.18;
      transition: background 180ms ease, color 180ms ease, transform 80ms linear;
    }

    .circle-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      border: 2px solid currentColor;
      opacity: 0;
      transform: scale(1);
      transition: opacity 180ms ease, transform 80ms linear;
    }

    .circle-hero.recording {
      transform: scale(var(--audio-scale));
    }

    .circle-hero.recording::before {
      opacity: var(--audio-ring-opacity);
      transform: scale(var(--audio-ring-scale));
    }

    .record-circle-icon {
      line-height: 1;
    }

    .record-level-bars {
      height: 74px;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .circle-hero.recording .record-circle-icon {
      display: none;
    }

    .circle-hero.recording .record-level-bars {
      display: flex;
    }

    .record-level-bar {
      width: 6px;
      height: 10px;
      min-height: 10px;
      max-height: 68px;
      border-radius: 999px;
      background: currentColor;
      transition: height 70ms linear;
    }

    .mic-live-status {
      width: fit-content;
      min-height: 28px;
      margin: 0 auto 10px;
      padding: 5px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 999px;
      background: var(--coral-soft);
      color: var(--coral);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .mic-live-status[hidden] {
      display: none;
    }

    .mic-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 var(--mic-ring-size, 2px) rgba(218, 103, 80, 0.18);
    }

    .circle-hero.idle { background: var(--coral-soft); color: var(--coral); }
    .circle-hero.recording { background: rgba(76,70,64,0.18); color: var(--coral); }
    .circle-hero.paused { background: var(--gold-soft); color: var(--gold); }
    .circle-hero.finished { background: var(--teal-soft); color: var(--teal-deep); }

    @media (prefers-reduced-motion: reduce) {
      .circle-hero,
      .circle-hero::before,
      .record-level-bar {
        transition: none;
      }

      .circle-hero.recording,
      .circle-hero.recording::before {
        transform: none;
      }
    }

    .alert-stack {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 100;
      width: min(420px, calc(100vw - 48px));
      display: grid;
      gap: 10px;
      pointer-events: none;
    }

    .alert {
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.88);
      border: 1px solid var(--border);
      box-shadow: none;
      font-size: 13px;
      line-height: 1.5;
    }

    .alert.error {
      background: linear-gradient(180deg, #f4efea, #faf7f3);
      color: var(--teal-deep);
      border-color: rgba(106,87,80,0.18);
    }

    .alert.success {
      background: linear-gradient(180deg, #f0ece6, #fbf8f4);
      color: var(--teal-deep);
      border-color: rgba(45,41,38,0.14);
    }

    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    input[type="file"] {
      display: none;
    }

    .language-switch {
      display: inline-flex;
      gap: 6px;
      padding: 6px;
      border-radius: var(--radius-sm);
      background: rgba(251, 250, 248, 0.94);
      border: 1px solid rgba(39, 35, 31, 0.08);
      box-shadow: none;
    }

    .lang-btn {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: var(--radius-sm);
      min-width: 44px;
      padding: 10px 12px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      background: transparent;
      transition: background .15s ease, color .15s ease, transform .15s ease;
    }

    .lang-btn.active {
      background: linear-gradient(180deg, var(--teal), var(--teal-deep));
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    @media (max-width: 1080px) {
      .landing-hero {
        gap: 38px;
        padding-inline: 44px;
      }

      .landing-section,
      .landing-price {
        padding-inline: 44px;
      }

      .landing-use-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .web-app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
      }

      .nav {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }

      .nav-item {
        text-align: center;
      }

      .screen {
        grid-column: 1;
        grid-row: 3;
      }

      #screen-home.active {
        grid-template-columns: 1fr;
      }

      #screen-home.active > .section {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 900px) {
      .landing-header {
        grid-template-columns: 1fr auto;
        padding-inline: 28px;
      }

      .landing-nav { display: none; }

      .landing-hero,
      .landing-price {
        grid-template-columns: 1fr;
      }

      .landing-hero {
        padding-block: 64px 76px;
      }

      .landing-product-card {
        max-width: 600px;
        transform: none;
      }

      .landing-step-grid {
        grid-template-columns: 1fr;
      }

      .landing-step {
        min-height: 0;
      }

      .landing-step-featured { transform: none; }

      .landing-price { gap: 38px; }

      .paywall-layout {
        grid-template-columns: 1fr;
      }

      .paywall-value {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .paywall-value-card {
        grid-template-columns: 24px minmax(0, 1fr);
        border: 0;
        padding: 4px 0;
      }

      .paywall-guarantee {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 560px) {
      body { padding: 14px; }
      body.landing-mode { padding: 0; }
      .landing-page {
        border: 0;
        border-radius: 0;
      }
      .landing-header {
        min-height: 66px;
        padding-inline: 18px;
      }
      .landing-brand { font-size: 18px; }
      .landing-brand-mark {
        width: 30px;
        height: 30px;
      }
      .landing-login { padding: 9px 13px; }
      .landing-hero,
      .landing-section,
      .landing-price {
        padding: 58px 20px;
      }
      .landing-hero { gap: 48px; }
      .landing-hero h1 { font-size: 46px; }
      .landing-lead { font-size: 16px; }
      .landing-actions,
      .landing-actions .button { width: 100%; }
      .landing-text-button { min-height: 44px; }
      .landing-trust-row { gap: 10px 18px; }
      .landing-trust-row span + span::before { display: none; }
      .landing-product-card { padding: 18px; }
      .landing-section-heading { text-align: left; }
      .landing-step { padding: 24px; }
      .landing-step h3 { margin-top: 38px; }
      .landing-use-grid { grid-template-columns: 1fr; }
      .landing-final-cta {
        margin: 0 12px 12px;
        padding: 58px 18px;
      }
      .landing-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px 20px;
      }
      .landing-footer p { text-align: left; }
      .landing-footer-copy { justify-items: start; }
      .landing-contact-links,
      .landing-legal-links { justify-content: flex-start; }
      .paywall-topup-card {
        align-items: flex-start;
        flex-direction: column;
      }
      .paywall-presets { grid-template-columns: repeat(2, 1fr); }
      .statusbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 18px;
      }
      .statusbar-meta {
        width: 100%;
        justify-content: space-between;
      }
      .screen {
        padding: 18px;
      }
      .grid-3 {
        grid-template-columns: 1fr;
      }
      .dashboard-grid,
      .library-overview-grid {
        grid-template-columns: 1fr;
      }
      .modal {
        padding: 18px;
      }
      .paywall-modal {
        padding: 18px;
      }
      .paywall-header h3 {
        font-size: 28px;
      }
      .paywall-balance,
      .paywall-balance > div:first-child {
        align-items: flex-start;
        flex-direction: column;
      }
      .paywall-rates {
        justify-content: flex-start;
      }
      .paywall-value {
        grid-template-columns: 1fr;
      }
      .paywall-guarantee {
        grid-column: auto;
      }
      .export-bar {
        align-items: stretch;
        flex-direction: column;
      }
      .export-controls {
        grid-template-columns: 1fr;
      }
      .export-controls label {
        grid-column: auto;
      }
      .export-controls .button {
        width: 100%;
      }
      .screen-title h2 {
        font-size: 26px;
      }
    }

    /* VoxText Neon Studio — October 2026 */
    :root {
      --bg: #08050f;
      --bg-2: #0e0718;
      --surface: #150c24;
      --surface-soft: #1d1030;
      --border: rgba(205, 129, 255, 0.2);
      --text: #fbf7ff;
      --muted: #b7a9c8;
      --ink: #0a0610;
      --teal: #b84dff;
      --teal-deep: #8b2cff;
      --teal-soft: rgba(184, 77, 255, 0.16);
      --coral: #ef3fff;
      --coral-deep: #c826e8;
      --coral-soft: rgba(239, 63, 255, 0.14);
      --gold: #d89bff;
      --gold-soft: rgba(216, 155, 255, 0.14);
      --berry: #7137ff;
      --danger: #ff5c91;
      --sand: rgba(184, 77, 255, 0.16);
      --shadow-lg: 0 32px 100px rgba(47, 8, 82, 0.45);
      --shadow-md: 0 18px 48px rgba(64, 13, 105, 0.34);
      --shadow-sm: 0 8px 24px rgba(89, 25, 137, 0.28);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --neon: #c85cff;
      --neon-bright: #e0a0ff;
      --neon-pink: #f13cff;
      --neon-blue: #755cff;
      --night: #08050f;
      --night-panel: #12091f;
      --night-raised: #1a0d2a;
    }

    html { scroll-behavior: smooth; }

    * {
      scrollbar-width: thin;
      scrollbar-color: #a845e9 #140a20;
    }

    *::-webkit-scrollbar { width: 9px; height: 9px; }
    *::-webkit-scrollbar-track { background: #140a20; }
    *::-webkit-scrollbar-thumb {
      border: 2px solid #140a20;
      border-radius: 999px;
      background: linear-gradient(#8b35ff, #d54cff);
      box-shadow: 0 0 12px rgba(200, 73, 255, .4);
    }

    html,
    body {
      color: var(--text);
      font-family: "Segoe UI Variable", "Aptos", "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 12% 0%, rgba(151, 42, 255, 0.24), transparent 34rem),
        radial-gradient(circle at 96% 18%, rgba(239, 60, 255, 0.18), transparent 30rem),
        var(--night);
    }

    body {
      padding: 20px;
    }

    body.landing-mode {
      padding: 0;
      background:
        radial-gradient(circle at 15% 8%, rgba(143, 45, 255, 0.3), transparent 32rem),
        radial-gradient(circle at 92% 24%, rgba(239, 60, 255, 0.22), transparent 30rem),
        linear-gradient(180deg, #08050f 0%, #0c0614 46%, #07040d 100%);
    }

    body.landing-mode::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .24;
      background-image:
        linear-gradient(rgba(214, 143, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 143, 255, .08) 1px, transparent 1px);
      background-size: 76px 76px;
      mask-image: linear-gradient(to bottom, black, transparent 72%);
    }

    .landing-page {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: none;
      margin: 0;
      overflow: hidden;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .landing-header {
      position: sticky;
      top: 14px;
      z-index: 20;
      width: min(1400px, calc(100% - 48px));
      min-height: 70px;
      margin: 14px auto 0;
      padding: 0 18px 0 22px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 30px;
      border: 1px solid rgba(211, 135, 255, .22);
      border-radius: 18px;
      background: rgba(12, 6, 21, .72);
      box-shadow:
        0 0 0 1px rgba(138, 44, 255, .06) inset,
        0 12px 60px rgba(75, 14, 123, .3),
        0 0 40px rgba(184, 77, 255, .08);
      backdrop-filter: blur(24px) saturate(140%);
    }

    .landing-brand {
      gap: 11px;
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.04em;
    }

    .landing-brand-mark {
      width: 38px;
      height: 38px;
      gap: 3px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 12px;
      background: linear-gradient(145deg, #7024ff, #d84cff 68%, #ff78eb);
      box-shadow: 0 0 26px rgba(196, 73, 255, .72), inset 0 1px rgba(255, 255, 255, .35);
    }

    .landing-brand-mark i {
      width: 3px;
      border-radius: 999px;
      background: white;
      box-shadow: 0 0 8px white;
    }

    .landing-brand-mark i:nth-child(1) { height: 10px; }
    .landing-brand-mark i:nth-child(2) { height: 20px; }
    .landing-brand-mark i:nth-child(3) { height: 14px; }

    .landing-nav { gap: 30px; }
    .landing-nav a {
      color: #c9bbd9;
      font-size: 13px;
      font-weight: 650;
    }
    .landing-nav a:hover { color: #f1c6ff; text-shadow: 0 0 18px rgba(211, 104, 255, .8); }

    .landing-header-actions {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .landing-header-link {
      padding: 10px 14px;
      color: #d6c8e4;
      background: transparent;
      font-size: 13px;
    }

    .landing-header-cta,
    .landing-primary-cta,
    .landing-price-card .button {
      color: #fff !important;
      background: linear-gradient(115deg, #7b2cff 0%, #c241ff 55%, #f347e4 100%) !important;
      border: 1px solid rgba(255, 255, 255, .24) !important;
      box-shadow:
        0 0 24px rgba(184, 77, 255, .48),
        0 10px 30px rgba(95, 24, 154, .42) !important;
    }

    .landing-header-cta { min-height: 44px; padding: 10px 17px; }

    .landing-hero {
      width: min(1400px, calc(100% - 48px));
      min-height: 760px;
      margin: 0 auto;
      padding: 112px 20px 100px;
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
      align-items: center;
      gap: 78px;
    }

    .landing-hero-copy { position: relative; z-index: 2; }

    .landing-kicker,
    .landing-section-heading > span,
    .landing-price-copy > span,
    .landing-final-cta > div > span {
      color: #dc8dff;
      font-size: 12px;
      font-weight: 780;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-shadow: 0 0 18px rgba(196, 76, 255, .7);
    }

    .landing-kicker {
      width: fit-content;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 11px 7px 7px;
      border: 1px solid rgba(208, 119, 255, .28);
      border-radius: 999px;
      background: rgba(114, 37, 173, .12);
      color: #d9c7e7;
      letter-spacing: .03em;
      text-transform: none;
    }

    .landing-kicker span {
      width: auto;
      height: auto;
      padding: 5px 9px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(115deg, #832dff, #e34eff);
      box-shadow: 0 0 16px rgba(196, 76, 255, .6);
    }

    .landing-hero h1 {
      margin: 25px 0 24px;
      color: #fff;
      font-size: clamp(58px, 6.3vw, 94px);
      line-height: .94;
      letter-spacing: -.07em;
      text-wrap: balance;
    }

    .landing-hero h1 em {
      color: transparent;
      font-family: inherit;
      font-weight: 760;
      font-style: normal;
      background: linear-gradient(90deg, #a645ff 2%, #e963ff 48%, #9d72ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      filter: drop-shadow(0 0 22px rgba(196, 75, 255, .42));
    }

    .landing-mobile-break { display: none; }

    .landing-lead {
      max-width: 650px;
      color: #bdb0cc;
      font-size: 19px;
      line-height: 1.65;
    }

    .landing-actions { gap: 18px; margin-top: 34px; }
    .landing-primary-cta { min-height: 58px; padding: 14px 24px !important; }
    .landing-primary-cta span,
    .landing-price-card .button span,
    .landing-final-cta .button span { font-size: 18px; }

    .landing-demo-link {
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      color: #eadff2;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid rgba(218, 142, 255, .52);
    }

    .landing-trust-row {
      gap: 12px 24px;
      margin-top: 34px;
      color: #9485a6;
      font-size: 12px;
    }

    .landing-trust-row span { display: inline-flex; align-items: center; gap: 8px; }
    .landing-trust-row span::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #cf5fff;
      box-shadow: 0 0 12px #c14fff;
    }
    .landing-trust-row span + span::before {
      position: static;
      display: block;
      width: 6px;
      height: 6px;
      background: #cf5fff;
    }

    .landing-product-stage {
      position: relative;
      min-height: 620px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .landing-product-stage::before,
    .landing-product-stage::after,
    .landing-stage-glow {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .landing-product-stage::before {
      width: 470px;
      height: 470px;
      background: rgba(144, 40, 255, .21);
      filter: blur(40px);
      box-shadow: 0 0 130px rgba(210, 55, 255, .24);
    }

    .landing-product-stage::after {
      width: 390px;
      height: 390px;
      border: 1px solid rgba(220, 140, 255, .22);
      box-shadow: 0 0 100px rgba(158, 45, 255, .28), inset 0 0 80px rgba(186, 58, 255, .09);
    }

    .landing-stage-glow {
      width: 170px;
      height: 170px;
      right: 0;
      top: 30px;
      background: #ee3cff;
      opacity: .28;
      filter: blur(62px);
    }

    .landing-product-card {
      position: relative;
      z-index: 2;
      width: min(560px, 100%);
      padding: 18px;
      border: 1px solid rgba(222, 155, 255, .3);
      border-radius: 28px;
      color: #fefaff;
      background: linear-gradient(145deg, rgba(31, 15, 49, .94), rgba(15, 8, 26, .96));
      box-shadow:
        0 0 0 1px rgba(161, 68, 255, .08) inset,
        0 0 52px rgba(154, 45, 232, .24),
        0 44px 90px rgba(0, 0, 0, .48);
      transform: perspective(1100px) rotateY(-4deg) rotateX(1.5deg);
      backdrop-filter: blur(24px);
    }

    .landing-product-card::before {
      content: "";
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(215, 106, 255, .34), transparent 36%, rgba(124, 67, 255, .2));
      transform: none;
      filter: blur(14px);
      opacity: .72;
    }

    .landing-product-top { align-items: center; padding: 2px 3px 14px; }
    .landing-window-dots { display: flex !important; flex-direction: row !important; gap: 6px !important; }
    .landing-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #604d71; }
    .landing-window-dots i:nth-child(2) { background: #8a48ba; }
    .landing-window-dots i:nth-child(3) { background: #db55ff; box-shadow: 0 0 10px #db55ff; }

    .landing-ready {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      color: #eccdff;
      background: rgba(192, 76, 255, .13);
      border: 1px solid rgba(213, 130, 255, .22);
    }
    .landing-ready i { width: 6px; height: 6px; border-radius: 50%; background: #dd74ff; box-shadow: 0 0 12px #d45cff; }

    .landing-file-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border: 1px solid rgba(220, 151, 255, .16);
      border-radius: 17px;
      background: rgba(119, 45, 169, .11);
    }
    .landing-file-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(145deg, #7d31ff, #e14bff);
      box-shadow: 0 0 20px rgba(199, 75, 255, .44);
      font-size: 12px;
    }
    .landing-file-row > div:nth-child(2) { display: grid; gap: 4px; }
    .landing-file-row strong { font-size: 14px; }
    .landing-file-row span { color: #9f91ae; font-size: 10px; }
    .landing-file-row button { padding: 4px; color: #a998b9; background: transparent; }

    .landing-tabs {
      display: flex;
      gap: 22px;
      margin: 18px 4px 12px;
      color: #887a98;
      font-size: 11px;
      font-weight: 750;
    }
    .landing-tabs span { position: relative; padding-bottom: 7px; }
    .landing-tabs .active { color: #f5ddff; }
    .landing-tabs .active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #d45cff; box-shadow: 0 0 10px #cf50ff; }

    .landing-summary-card {
      padding: 17px;
      border: 1px solid rgba(216, 132, 255, .23);
      border-radius: 17px;
      background: linear-gradient(135deg, rgba(145, 55, 214, .19), rgba(56, 25, 91, .13));
      box-shadow: inset 0 0 24px rgba(164, 54, 255, .07);
    }
    .landing-card-label { color: #d676ff; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
    .landing-summary-card p { margin: 9px 0 0; color: #e7dcec; font-size: 13px; line-height: 1.55; }

    .landing-insight-list { margin-top: 9px; display: grid; gap: 7px; }
    .landing-insight-list > div { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); }
    .landing-insight-list span { color: #d46aff; font-size: 9px; font-weight: 850; }
    .landing-insight-list p { margin: 0; color: #bcaec9; font-size: 11px; }

    .landing-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 15px; }
    .landing-card-footer > span { padding: 5px 7px; border-radius: 7px; color: #927fa1; background: rgba(255,255,255,.04); font-size: 8px; }
    .landing-card-footer strong { margin-left: auto; color: #dda0ff; font-size: 10px; }

    .landing-float-note {
      position: absolute;
      z-index: 3;
      right: -26px;
      bottom: 70px;
      width: 168px;
      padding: 16px;
      display: grid;
      gap: 4px;
      border: 1px solid rgba(235, 155, 255, .32);
      border-radius: 18px;
      background: rgba(27, 10, 43, .88);
      box-shadow: 0 0 32px rgba(213, 65, 255, .27);
      backdrop-filter: blur(18px);
    }
    .landing-float-note span,
    .landing-float-note small { color: #9e8cae; font-size: 9px; }
    .landing-float-note strong { color: #f3d9ff; font-size: 18px; text-shadow: 0 0 16px rgba(221, 103, 255, .7); }

    .landing-proof {
      width: min(1400px, calc(100% - 48px));
      margin: 0 auto 30px;
      padding: 24px 32px;
      display: grid;
      grid-template-columns: 1.2fr repeat(3, 1fr);
      align-items: center;
      gap: 24px;
      border: 1px solid rgba(206, 117, 255, .18);
      border-radius: 22px;
      background: linear-gradient(110deg, rgba(59, 20, 91, .26), rgba(23, 10, 37, .58));
      box-shadow: 0 0 60px rgba(97, 24, 153, .12);
    }
    .landing-proof p { margin: 0; color: #a997b7; font-size: 13px; }
    .landing-proof > div { display: flex; align-items: center; gap: 12px; }
    .landing-proof strong { color: #d35fff; font-size: 11px; text-shadow: 0 0 14px #a844e8; }
    .landing-proof span { color: #f4ebf8; font-size: 13px; line-height: 1.25; }

    .landing-section,
    .landing-price {
      width: min(1400px, calc(100% - 48px));
      margin: 0 auto;
      padding: 112px 56px;
    }

    .landing-process {
      margin-top: 70px;
      border: 1px solid rgba(215, 130, 255, .2);
      border-radius: 34px;
      background:
        radial-gradient(circle at 48% 42%, rgba(145, 38, 226, .19), transparent 26rem),
        linear-gradient(145deg, rgba(28, 12, 47, .9), rgba(11, 6, 18, .92));
      box-shadow: 0 0 90px rgba(99, 25, 160, .16), inset 0 1px rgba(255,255,255,.04);
    }

    .landing-section-heading { max-width: 900px; margin-bottom: 54px; }
    .landing-section-heading h2,
    .landing-price h2,
    .landing-final-cta h2 {
      margin: 14px 0 16px;
      color: #fff;
      font-size: clamp(42px, 5vw, 68px);
      line-height: .99;
      letter-spacing: -.055em;
    }
    .landing-section-heading p,
    .landing-price-copy p { color: #ad9ebc; }

    .landing-step-grid { gap: 14px; }
    .landing-step {
      min-height: 370px;
      padding: 24px;
      border: 1px solid rgba(220, 139, 255, .16);
      border-radius: 22px;
      color: #fff;
      background: rgba(255, 255, 255, .025);
      box-shadow: inset 0 1px rgba(255,255,255,.025);
    }
    .landing-step-featured {
      color: #fff;
      background: linear-gradient(150deg, rgba(132, 39, 209, .32), rgba(40, 15, 68, .4));
      border-color: rgba(220, 127, 255, .38);
      transform: translateY(-10px);
      box-shadow: 0 0 42px rgba(156, 49, 231, .18), inset 0 0 38px rgba(194, 74, 255, .06);
    }
    .landing-step-number { color: #c65cff; text-shadow: 0 0 12px #9d3ddb; }
    .landing-step h3 { margin: 24px 0 10px; color: #fff; font-size: 21px; }
    .landing-step p,
    .landing-step-featured p { color: #a99ab8; }

    .landing-step-visual {
      height: 150px;
      margin-top: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(220, 135, 255, .13);
      border-radius: 18px;
      background: rgba(8, 4, 14, .42);
    }
    .landing-step-upload { flex-direction: column; gap: 13px; }
    .landing-step-upload span,
    .landing-step-result span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(233, 170, 255, .38); border-radius: 15px; color: white; background: linear-gradient(145deg, #7730ff, #e34cff); box-shadow: 0 0 24px rgba(204, 74, 255, .45); }
    .landing-step-visual i { color: #907e9f; font-size: 9px; font-style: normal; letter-spacing: .08em; }
    .landing-step-wave { gap: 6px; }
    .landing-step-wave i { width: 7px; border-radius: 999px; background: linear-gradient(#f49aff, #993cff); box-shadow: 0 0 12px rgba(210, 74, 255, .72); }
    .landing-step-wave i:nth-child(1), .landing-step-wave i:nth-child(7) { height: 28px; }
    .landing-step-wave i:nth-child(2), .landing-step-wave i:nth-child(6) { height: 54px; }
    .landing-step-wave i:nth-child(3), .landing-step-wave i:nth-child(5) { height: 84px; }
    .landing-step-wave i:nth-child(4) { height: 112px; }
    .landing-step-result { gap: 14px; }
    .landing-step-result i { color: #d4c2df; font-size: 11px; }

    .landing-scenarios {
      position: relative;
      padding-top: 132px;
      padding-bottom: 92px;
    }

    .landing-scenarios::before {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      left: -180px;
      top: 300px;
      border-radius: 50%;
      background: rgba(174, 51, 255, .16);
      filter: blur(90px);
      pointer-events: none;
    }

    .landing-scenario-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
      grid-template-rows: repeat(2, minmax(260px, auto));
      gap: 16px;
    }

    .landing-scenario-grid article {
      position: relative;
      min-width: 0;
      padding: 30px;
      overflow: hidden;
      border: 1px solid rgba(220, 134, 255, .2);
      border-radius: 26px;
      color: #fff;
      background:
        radial-gradient(circle at 100% 0%, rgba(203, 62, 255, .14), transparent 17rem),
        linear-gradient(145deg, rgba(28, 12, 46, .94), rgba(13, 7, 22, .94));
      box-shadow: 0 0 48px rgba(115, 28, 177, .11), inset 0 1px rgba(255,255,255,.035);
    }

    .landing-scenario-grid article:hover {
      border-color: rgba(230, 151, 255, .4);
      box-shadow: 0 0 52px rgba(181, 52, 245, .17), inset 0 1px rgba(255,255,255,.05);
    }

    .landing-scenario-grid .landing-scenario-featured {
      grid-row: 1 / span 2;
      padding: 38px;
      background:
        radial-gradient(circle at 82% 20%, rgba(237, 60, 255, .28), transparent 20rem),
        radial-gradient(circle at 8% 104%, rgba(112, 51, 255, .48), transparent 25rem),
        linear-gradient(145deg, rgba(41, 15, 65, .98), rgba(13, 7, 22, .98));
      box-shadow: 0 0 70px rgba(170, 46, 235, .2), inset 0 1px rgba(255,255,255,.06);
    }

    .landing-scenario-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: #d375ff;
      font-size: 10px;
      font-weight: 820;
      letter-spacing: .13em;
      text-shadow: 0 0 16px rgba(205, 84, 255, .55);
    }

    .landing-scenario-top i {
      color: #796b85;
      font-style: normal;
      letter-spacing: 0;
      text-shadow: none;
    }

    .landing-scenario-grid h3 {
      max-width: 620px;
      margin: 38px 0 14px;
      font-size: 30px;
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .landing-scenario-featured h3 { margin-top: 72px; font-size: clamp(34px, 3.2vw, 48px); }
    .landing-scenario-grid p { max-width: 620px; color: #aa9ab8; font-size: 14px; line-height: 1.65; }

    .landing-scenario-tags {
      margin-top: 26px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .landing-scenario-tags span {
      padding: 8px 11px;
      border: 1px solid rgba(231, 157, 255, .2);
      border-radius: 999px;
      color: #e9c5fa;
      background: rgba(207, 76, 255, .08);
      font-size: 10px;
    }

    .landing-scenario-result {
      margin-top: 58px;
      display: grid;
      gap: 8px;
    }

    .landing-scenario-result div {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 13px 15px;
      border: 1px solid rgba(224, 142, 255, .14);
      border-radius: 13px;
      background: rgba(255,255,255,.035);
    }

    .landing-scenario-result b { color: #d168ff; font-size: 9px; }
    .landing-scenario-result span { color: #ddcfE6; font-size: 12px; }

    .landing-scenario-signal {
      height: 58px;
      margin-top: 30px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .landing-scenario-signal i {
      width: 7px;
      border-radius: 999px;
      background: linear-gradient(#f293ff, #9c41ff);
      box-shadow: 0 0 14px rgba(210, 76, 255, .65);
    }
    .landing-scenario-signal i:nth-child(1) { height: 20px; }
    .landing-scenario-signal i:nth-child(2) { height: 46px; }
    .landing-scenario-signal i:nth-child(3) { height: 30px; }
    .landing-scenario-signal i:nth-child(4) { height: 54px; }
    .landing-scenario-signal i:nth-child(5) { height: 24px; }

    .landing-scenario-lines { margin-top: 31px; display: grid; gap: 9px; }
    .landing-scenario-lines i { height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(211, 86, 255, .42), rgba(255,255,255,.04)); }
    .landing-scenario-lines i:nth-child(2) { width: 83%; }
    .landing-scenario-lines i:nth-child(3) { width: 61%; }

    .landing-use-cases { background: transparent; }
    .landing-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .landing-use-grid article {
      min-height: 330px;
      padding: 30px;
      border: 1px solid rgba(211, 120, 255, .18);
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(145deg, rgba(31, 13, 50, .88), rgba(15, 8, 25, .78));
      box-shadow: 0 0 50px rgba(107, 30, 163, .1), inset 0 1px rgba(255,255,255,.025);
    }
    .landing-use-grid article:hover { border-color: rgba(220, 128, 255, .38); box-shadow: 0 0 48px rgba(177, 55, 244, .17); }
    .landing-use-grid .landing-use-dark { background: radial-gradient(circle at 80% 20%, rgba(219, 54, 255, .25), transparent 14rem), linear-gradient(145deg, #221033, #0e0718); }
    .landing-use-grid h3 { max-width: 520px; margin: 46px 0 12px; color: #fff; font-size: 28px; line-height: 1.1; }
    .landing-use-grid p { max-width: 520px; color: #a99ab8; }
    .landing-use-index { color: #cf65ff; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-shadow: 0 0 14px rgba(204, 75, 255, .7); }

    .landing-search-demo {
      margin-top: 44px;
      padding: 14px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(220, 136, 255, .24);
      border-radius: 14px;
      color: #9f8eac;
      background: rgba(255,255,255,.035);
      box-shadow: 0 0 25px rgba(154, 51, 220, .1);
      font-size: 12px;
    }
    .landing-search-demo kbd { margin-left: auto; padding: 4px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #806f8e; background: rgba(0,0,0,.2); font: inherit; }
    .landing-format-cloud { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 9px; }
    .landing-format-cloud span,
    .landing-language-row span { padding: 10px 12px; border: 1px solid rgba(222, 135, 255, .25); border-radius: 12px; color: #e5b9ff; background: rgba(167, 58, 231, .11); box-shadow: 0 0 18px rgba(168, 55, 233, .12); font-size: 11px; font-weight: 780; }
    .landing-language-row { margin-top: 42px; display: flex; gap: 10px; }
    .landing-language-row span:nth-child(4) { background: linear-gradient(140deg, #782fff, #d348ff); color: #fff; box-shadow: 0 0 22px rgba(197, 66, 255, .35); }
    .landing-archive-demo { margin-top: 34px; display: grid; gap: 8px; }
    .landing-archive-demo i { height: 30px; border: 1px solid rgba(209, 126, 255, .15); border-radius: 10px; background: linear-gradient(90deg, rgba(194,72,255,.16), rgba(255,255,255,.02)); }
    .landing-archive-demo i:nth-child(2) { width: 84%; }
    .landing-archive-demo i:nth-child(3) { width: 62%; }

    .landing-price {
      grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
      gap: 84px;
      align-items: center;
      padding-top: 118px;
      padding-bottom: 118px;
    }
    .landing-price-copy p { max-width: 570px; font-size: 16px; line-height: 1.7; }
    .landing-bonus { width: fit-content; margin-top: 34px; padding: 14px 18px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(222, 140, 255, .26); border-radius: 16px; background: rgba(148, 49, 213, .1); box-shadow: 0 0 28px rgba(173, 50, 237, .12); }
    .landing-bonus strong { color: #ecb5ff; font-size: 27px; text-shadow: 0 0 18px rgba(218, 103, 255, .6); }
    .landing-bonus span { color: #d9cae2; font-size: 12px; line-height: 1.4; }
    .landing-bonus small { color: #92829f; }

    .landing-price-card {
      padding: 30px;
      border: 1px solid rgba(226, 148, 255, .33);
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 92% 2%, rgba(233, 60, 255, .27), transparent 18rem),
        linear-gradient(145deg, rgba(35, 13, 56, .98), rgba(14, 7, 24, .98));
      box-shadow: 0 0 70px rgba(169, 44, 233, .22), 0 34px 70px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06);
    }
    .landing-price-card > div { border-bottom-color: rgba(224, 150, 255, .14); }
    .landing-price-head { display: grid !important; justify-content: start !important; gap: 10px !important; padding: 0 0 24px !important; }
    .landing-price-head > span { color: #a995b7; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
    .landing-price-head > strong { color: #fff; font-size: 52px; line-height: 1; letter-spacing: -.05em; text-shadow: 0 0 24px rgba(208, 88, 255, .38); }
    .landing-price-head small { color: #b8a1c6; font-size: 13px; letter-spacing: 0; }
    .landing-price-mode { padding: 18px 0 !important; }
    .landing-price-mode > div { display: grid; gap: 5px; }
    .landing-price-mode > div strong { color: #f7edfb; font-size: 15px; }
    .landing-price-mode > div span { color: #9685a4; font-size: 11px; }
    .landing-price-mode b { color: #e9b2ff; font-size: 15px; white-space: nowrap; text-shadow: 0 0 14px rgba(210, 92, 255, .5); }
    .landing-price-card .button { min-height: 56px; margin-top: 24px; }
    .landing-price-card > small { color: #887898; }

    .landing-final-cta {
      width: min(1352px, calc(100% - 48px));
      margin: 10px auto 24px;
      padding: 74px 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 42px;
      border: 1px solid rgba(232, 149, 255, .34);
      border-radius: 32px;
      color: #fff;
      text-align: left;
      background:
        radial-gradient(circle at 82% 25%, rgba(255, 76, 230, .48), transparent 20rem),
        radial-gradient(circle at 16% 120%, rgba(116, 54, 255, .66), transparent 30rem),
        linear-gradient(120deg, #321151, #160824 56%, #2a0c40);
      box-shadow: 0 0 90px rgba(177, 47, 235, .3), inset 0 1px rgba(255,255,255,.1);
    }
    .landing-final-cta h2 { margin-bottom: 0; font-size: clamp(38px, 4.8vw, 66px); }
    .landing-final-cta .button { flex: 0 0 auto; min-height: 60px; padding: 16px 24px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 0 30px rgba(224, 89, 255, .3); }

    .landing-footer {
      width: min(1400px, calc(100% - 48px));
      margin: 0 auto;
      padding: 38px 0;
      border-top: 1px solid rgba(210, 124, 255, .14);
    }
    .landing-footer p { color: #81718f; }
    .landing-footer > button { color: #d68cff; background: transparent; }
    .landing-legal-links a,
    .auth-consent a,
    .paywall-legal a { color: #d98dff; }
    .landing-legal-links a:hover,
    .landing-legal-links a:focus-visible { color: #f2cfff; text-shadow: 0 0 14px rgba(218, 95, 255, .48); }

    /* Workspace */
    .page { width: min(1560px, 100%); }
    .web-app {
      min-height: calc(100vh - 40px);
      grid-template-columns: 228px minmax(0, 1fr);
      border: 1px solid rgba(218, 137, 255, .22);
      border-radius: 28px;
      background: #0d0715;
      box-shadow: 0 0 80px rgba(125, 32, 184, .26), 0 34px 90px rgba(0,0,0,.5);
    }
    .statusbar {
      min-height: 66px;
      padding: 13px 20px 13px 24px;
      color: #a996b8;
      border-bottom: 1px solid rgba(214, 126, 255, .16);
      background: rgba(16, 8, 27, .97);
    }
    .statusbar > span:first-child { color: #fff; font-size: 18px; letter-spacing: -.035em; text-shadow: 0 0 18px rgba(204, 82, 255, .45); }
    .statusbar > span:first-child::before { content: ""; width: 9px; height: 9px; display: inline-block; margin-right: 10px; border-radius: 3px; background: #cd54ff; box-shadow: 0 0 14px #c44aff; }
    .language-switch { background: rgba(125, 43, 177, .1); border-color: rgba(213, 125, 255, .18); }
    .lang-btn { color: #9d8bab; }
    .lang-btn.active { color: #fff; background: linear-gradient(135deg, #7930ff, #d34cff); box-shadow: 0 0 20px rgba(197, 70, 255, .35); }

    .nav {
      min-height: calc(100vh - 107px);
      padding: 18px 14px;
      gap: 8px;
      color: #bbaac8;
      border-right: 1px solid rgba(216, 130, 255, .14);
      background: linear-gradient(180deg, #130a20, #0d0715);
    }
    .nav-item { padding: 13px 14px; border: 1px solid transparent; border-radius: 12px; color: #917fa0; }
    .nav-item.active { color: #fff; border-color: rgba(224, 145, 255, .28); background: linear-gradient(120deg, rgba(126, 43, 207, .52), rgba(206, 64, 255, .28)); box-shadow: 0 0 24px rgba(171, 54, 233, .2), inset 0 1px rgba(255,255,255,.08); }
    .nav-item:hover { color: #e7d7ef; background: rgba(179, 65, 236, .08); }

    .screen { padding: 34px 38px 44px; background: radial-gradient(circle at 95% 0%, rgba(177, 48, 239, .12), transparent 30rem), #0b0612; }
    .screen-title small { color: #a48fb3; }
    .screen-title h2 { color: #fff; font-size: 38px; letter-spacing: -.045em; }
    .usage-pill { color: #f1d8ff; border-color: rgba(222, 136, 255, .22); background: rgba(167, 52, 226, .1); box-shadow: 0 0 20px rgba(176, 50, 234, .12); }
    .usage-pill.runtime-safe,
    .usage-pill.runtime-live { color: #fff; border-color: rgba(229, 156, 255, .25); background: linear-gradient(120deg, rgba(118, 44, 255, .8), rgba(213, 67, 255, .78)); box-shadow: 0 0 24px rgba(195, 65, 255, .28); }

    .preprocess-card,
    .card,
    .dashboard-card,
    .library-kpi,
    .feature-card,
    .library-overview,
    .account-card,
    .launch-card {
      color: #f9f3fc;
      border-color: rgba(215, 126, 255, .17);
      background: linear-gradient(145deg, rgba(28, 14, 45, .94), rgba(17, 9, 28, .95));
      box-shadow: inset 0 1px rgba(255,255,255,.025);
    }
    .card.soft-teal,
    .card.soft-coral,
    .card.soft-gold,
    .card.soft-mint,
    .card.runtime-card { background: linear-gradient(145deg, rgba(91, 30, 139, .25), rgba(22, 10, 36, .94)); }
    .card:hover,
    .action-card:hover,
    .row-card:hover { border-color: rgba(222, 133, 255, .4); box-shadow: 0 0 30px rgba(168, 47, 231, .18); }

    .hero {
      padding: 30px;
      border: 1px solid rgba(230, 149, 255, .26);
      border-radius: 24px;
      color: #fff;
      background:
        radial-gradient(circle at 88% 22%, rgba(247, 62, 230, .44), transparent 17rem),
        radial-gradient(circle at 12% 120%, rgba(110, 50, 255, .72), transparent 26rem),
        linear-gradient(120deg, #2c1046, #12081f 66%);
      box-shadow: 0 0 50px rgba(173, 49, 237, .22), inset 0 1px rgba(255,255,255,.08);
    }
    .hero::after { content: ""; width: 230px; height: 230px; position: absolute; right: -70px; top: -70px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 80px rgba(220, 67, 255, .3); }
    .hero h3 { font-size: 40px; letter-spacing: -.045em; }
    .hero p { color: rgba(244, 229, 250, .78); }
    .tag.light,
    .mini-chip { color: #f7e8ff; border: 1px solid rgba(241, 185, 255, .16); background: rgba(255,255,255,.075); }
    .hero .button.secondary { color: #160820; border-color: #e7aaff; background: linear-gradient(135deg, #e7aaff, #c961ff); box-shadow: 0 0 24px rgba(214, 90, 255, .4); }
    .hero .button.ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }

    .preprocess-badge,
    .icon-import,
    .eyebrow { color: #edcbff; background: rgba(179, 65, 238, .14); border-color: rgba(220, 136, 255, .18); }
    .speaker-mode-btn,
    .speaker-count-btn { color: #9c8aaa; border-color: rgba(210, 123, 255, .17); background: rgba(255,255,255,.03); }
    .speaker-mode-btn.active,
    .speaker-count-btn.active { color: #fff; border-color: rgba(231, 162, 255, .3); background: linear-gradient(120deg, #7132e9, #c443ef); box-shadow: 0 0 18px rgba(194, 63, 243, .25); }
    .transcription-language-select,
    .search-input,
    .field { color: #f7effb; border-color: rgba(211, 122, 255, .18); background: rgba(255,255,255,.035); }
    .search-input::placeholder,
    .field::placeholder { color: #756680; }
    .transcription-language-select option { color: #fff; background: #170b25; }

    .button.primary,
    button.primary { color: #fff; border: 1px solid rgba(255,255,255,.17); background: linear-gradient(120deg, #7830f4, #c742f2 58%, #eb44df); box-shadow: 0 0 22px rgba(186, 59, 241, .3); }
    .button.secondary,
    button.secondary,
    label.button.secondary { color: #e8c9f8; border-color: rgba(220, 133, 255, .22); background: rgba(174, 56, 229, .08); }
    .button.danger { color: #ff9cbd; border-color: rgba(255,92,145,.24); background: rgba(255,92,145,.08); }

    .pill.filter-pill { color: #9886a6; border-color: rgba(215, 127, 255, .17); background: rgba(255,255,255,.025); }
    .pill.filter-pill.active { color: #fff; border-color: rgba(230, 158, 255, .3); background: linear-gradient(120deg, #7632ec, #c841ed); box-shadow: 0 0 18px rgba(189, 61, 239, .23); }
    .pill.teal { color: #e7c3fa; background: rgba(189, 67, 243, .13); }
    .pill.coral { color: #f4bcff; background: rgba(239, 63, 255, .12); }
    .pill.gold { color: #dab6ef; background: rgba(139, 44, 255, .13); }
    .pill.neutral { color: #a290ae; background: rgba(255,255,255,.04); }
    .text-muted,
    .card p,
    .action-card p,
    .dashboard-card span,
    .library-kpi span,
    .dashboard-card p,
    .library-kpi p,
    .feature-card p,
    .library-overview p,
    .section-head span { color: #9b8aaa; }
    .progress { background: rgba(255,255,255,.06); }
    .progress > span { background: linear-gradient(90deg, #7432ff, #d24dff, #ff4bd5); box-shadow: 0 0 12px rgba(208, 71, 255, .5); }

    .modal-backdrop { background: rgba(4, 2, 8, .78); backdrop-filter: blur(18px); }
    .modal {
      color: #f9f3fc;
      border: 1px solid rgba(228, 150, 255, .28);
      background: radial-gradient(circle at 100% 0%, rgba(207, 56, 255, .16), transparent 24rem), rgba(17, 8, 28, .98);
      box-shadow: 0 0 85px rgba(157, 37, 222, .32), 0 40px 100px rgba(0,0,0,.65);
    }
    .auth-tabs,
    .paywall-value,
    .paywall-offer { border-color: rgba(216, 130, 255, .17); background: rgba(255,255,255,.025); }
    .auth-tab { color: #9d8aab; }
    .auth-tab.active { color: #fff; background: linear-gradient(120deg, rgba(121, 48, 244, .76), rgba(204, 64, 240, .72)); box-shadow: 0 0 18px rgba(190, 61, 241, .2); }
    .close-btn { color: #c9b4d5; background: rgba(255,255,255,.05); }
    .paywall-balance { border-color: rgba(218, 133, 255, .2); background: linear-gradient(115deg, rgba(112, 41, 184, .2), rgba(39, 15, 65, .22)); }
    .paywall-rates span { color: #edc7ff; background: rgba(181, 63, 235, .11); }
    .paywall-check { color: #fff; background: linear-gradient(135deg, #7b32ef, #d048f4); box-shadow: 0 0 16px rgba(198, 65, 242, .3); }
    .paywall-guarantee,
    .paywall-topup-card { border-color: rgba(221, 137, 255, .2); background: rgba(168, 54, 226, .09); }
    .paywall-amount-label span { color: #edc7ff; }
    .paywall-amount-control { border-color: rgba(219, 129, 255, .24); background: rgba(8, 4, 14, .54); }
    .paywall-amount-control:focus-within { border-color: #cf54ff; box-shadow: 0 0 0 3px rgba(207, 84, 255, .12), 0 0 24px rgba(207, 84, 255, .16); }
    .paywall-amount-control input { color: #fff; }
    .paywall-presets button { color: #bca8c8; border-color: rgba(219, 129, 255, .18); background: rgba(255,255,255,.035); }
    .paywall-presets button.active { color: #fff; border-color: rgba(235, 163, 255, .4); background: linear-gradient(120deg, #7431ed, #c842f0); box-shadow: 0 0 18px rgba(194, 63, 243, .25); }
    .paywall-checkout-notice { color: #efd5fb; border-color: rgba(219, 129, 255, .22); background: rgba(172, 55, 230, .1); }
    .paywall-later { color: #9d8bab; }
    .alert { color: #f6ecfa; border-color: rgba(220, 135, 255, .22); background: rgba(24, 11, 39, .96); box-shadow: 0 0 34px rgba(171, 49, 230, .17); }
    .alert.error { color: #ffc1d6; border-color: rgba(255,92,145,.24); background: rgba(51, 15, 31, .96); }
    .alert.success { color: #ecc9ff; border-color: rgba(220,135,255,.25); background: rgba(31, 13, 48, .96); }

    .auth-bonus {
      border-color: rgba(229, 145, 255, .28);
      background:
        radial-gradient(circle at 100% 0%, rgba(238, 62, 255, .24), transparent 12rem),
        linear-gradient(135deg, rgba(111, 43, 189, .28), rgba(42, 16, 68, .34));
      box-shadow: 0 0 28px rgba(181, 53, 237, .14), inset 0 1px rgba(255,255,255,.05);
    }

    .auth-bonus strong {
      color: #edb7ff;
      text-shadow: 0 0 14px rgba(215, 92, 255, .48);
    }

    .auth-bonus span { color: #bba8c8; }
    .auth-consent { color: #9f8eac; }

    .auth-field-card .field {
      color: #fbf5ff;
      border-color: rgba(220, 134, 255, .2);
      background: rgba(8, 4, 14, .58);
      box-shadow: inset 0 0 18px rgba(163, 50, 222, .05);
    }

    .auth-field-card .field:focus {
      outline: 2px solid rgba(207, 83, 255, .55);
      outline-offset: 2px;
      box-shadow: 0 0 22px rgba(191, 65, 245, .17);
    }

    .auth-field-card .field::placeholder { color: #6f607b; }

    @media (max-width: 1120px) {
      .landing-hero { grid-template-columns: 1fr 1fr; gap: 34px; }
      .landing-product-card { transform: none; }
      .landing-float-note { right: -4px; }
      .landing-section,
      .landing-price { padding-inline: 38px; }
    }

    @media (max-width: 900px) {
      .landing-header { grid-template-columns: 1fr auto; width: calc(100% - 28px); }
      .landing-nav { display: none; }
      .landing-hero { width: calc(100% - 28px); grid-template-columns: 1fr; padding: 90px 4px 72px; }
      .landing-product-stage { min-height: 570px; }
      .landing-proof { width: calc(100% - 28px); grid-template-columns: 1fr 1fr; }
      .landing-proof p { grid-column: 1 / -1; }
      .landing-section,
      .landing-price { width: calc(100% - 28px); }
      .landing-scenario-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
      .landing-scenario-grid .landing-scenario-featured { grid-row: auto; }
      .landing-price { grid-template-columns: 1fr; gap: 46px; }
      .landing-final-cta { width: calc(100% - 28px); padding: 58px 36px; align-items: flex-start; flex-direction: column; }
      .landing-footer { width: calc(100% - 28px); }
    }

    @media (max-width: 680px) {
      body { padding: 8px; }
      body.landing-mode { padding: 0; }
      .landing-header { top: 8px; width: calc(100% - 16px); min-height: 62px; margin-top: 8px; padding: 0 10px 0 13px; border-radius: 15px; }
      .landing-brand { font-size: 17px; }
      .landing-brand-mark { width: 34px; height: 34px; }
      .landing-header-link { display: none; }
      .landing-header-cta { min-height: 40px; padding: 8px 11px; font-size: 11px; }
      .landing-hero { width: calc(100% - 24px); min-height: 0; padding: 78px 0 48px; gap: 42px; }
      .landing-kicker { font-size: 10px; }
      .landing-hero h1 { font-size: clamp(39px, 11.5vw, 48px); letter-spacing: -.075em; }
      .landing-mobile-break { display: block; }
      .landing-lead { font-size: 16px; line-height: 1.58; }
      .landing-actions { align-items: stretch; flex-direction: column; }
      .landing-actions .button { width: 100%; }
      .landing-demo-link { width: fit-content; min-height: 42px; }
      .landing-trust-row { align-items: flex-start; flex-direction: column; }
      .landing-product-stage { min-height: auto; padding: 18px 0 38px; }
      .landing-product-stage::before { width: 290px; height: 290px; }
      .landing-product-stage::after { width: 260px; height: 260px; }
      .landing-product-card { padding: 13px; border-radius: 22px; }
      .landing-file-row { padding: 13px; }
      .landing-tabs { gap: 14px; overflow: hidden; }
      .landing-card-footer strong { display: none; }
      .landing-float-note { display: none; }
      .landing-proof { width: calc(100% - 24px); padding: 22px; grid-template-columns: 1fr; }
      .landing-proof p { grid-column: auto; }
      .landing-section,
      .landing-price { width: calc(100% - 24px); padding: 80px 0; }
      .landing-process { padding-inline: 14px; border-radius: 26px; }
      .landing-section-heading h2,
      .landing-price h2 { font-size: 42px; }
      .landing-step-grid,
      .landing-use-grid { grid-template-columns: 1fr; }
      .landing-scenarios { padding-top: 90px; padding-bottom: 70px; }
      .landing-scenario-grid article,
      .landing-scenario-grid .landing-scenario-featured { padding: 24px; }
      .landing-scenario-featured h3,
      .landing-scenario-grid h3 { margin-top: 38px; font-size: 28px; }
      .landing-scenario-result { margin-top: 34px; }
      .landing-step { min-height: auto; }
      .landing-step-featured { transform: none; }
      .landing-use-grid article { min-height: 300px; padding: 24px; }
      .landing-use-grid h3 { font-size: 24px; }
      .landing-price { gap: 34px; }
      .landing-price-card { padding: 22px 18px; }
      .landing-price-head > strong { font-size: 44px; }
      .landing-price-mode { align-items: flex-start !important; flex-direction: column; }
      .landing-final-cta { width: calc(100% - 24px); padding: 48px 24px; border-radius: 25px; }
      .landing-final-cta h2 { font-size: 42px; }
      .landing-final-cta .button { width: 100%; }
      .landing-footer { width: calc(100% - 24px); }

      .web-app { min-height: calc(100vh - 16px); border-radius: 20px; }
      .statusbar { padding: 13px 15px; }
      .statusbar-meta > span { display: none; }
      .nav { min-height: 0; padding: 8px; grid-template-columns: repeat(3, 1fr); }
      .nav-item { padding: 11px 7px; font-size: 12px; text-align: center; }
      .screen { padding: 22px 16px 30px; }
      .screen-title h2 { font-size: 31px; }
      .hero { padding: 24px 20px; }
      .hero h3 { font-size: 32px; }
      .dashboard-grid,
      .library-overview-grid { grid-template-columns: 1fr; }
      .modal { padding: 18px; border-radius: 20px; }
    }