:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eaf0f7;
  background: #090e14;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --purple: #7c3aed;
  --purple2: #9333ea;
  --ink: #0c1220;
  --muted: #8d98aa;
  --line: rgba(255,255,255,.09);
  --card: rgba(17, 24, 34, .84);
}
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body { min-width: 320px; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid rgba(147, 197, 253, .45); outline-offset: 3px; }

/* Login */
.login-page { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: #eef4f8; }
.login-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; user-select: none; pointer-events: none; }
.login-panel { position: relative; z-index: 1; width: min(36vw, 620px); min-width: 510px; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 72px 7.4vw 36px; background: rgba(255,255,255,.985); color: #111827; box-shadow: 30px 0 90px rgba(15, 23, 42, .08); }
.login-content { width: min(330px, 100%); margin: auto 0; }
.login-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 56px; }
.login-brand-name { font-size: 38px; font-weight: 760; letter-spacing: -1.7px; color: #111827; }
.login-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--purple2)); box-shadow: 0 0 0 6px rgba(124, 58, 237, .08); }
.login-panel h1 { margin: 0; font-size: clamp(28px, 2.05vw, 38px); line-height: 1.12; letter-spacing: -1.15px; font-weight: 680; color: #101827; }
.login-copy { margin: 20px 0 30px; color: #5f6b7b; line-height: 1.65; font-size: 15px; }
.login-button { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(100deg, #7c3aed, #9333ea); color: white; text-decoration: none; font-weight: 650; font-size: 14px; box-shadow: 0 10px 24px rgba(124,58,237,.16); transition: transform .15s ease, box-shadow .15s ease; }
.login-button:hover { transform: translateY(-1px); box-shadow: 0 13px 30px rgba(124,58,237,.24); }
.login-footnote { color: #8993a1; font-size: 12px; margin-top: 15px; line-height: 1.5; }
.login-legal { display: flex; gap: 10px; align-items: center; color: #99a1ad; font-size: 11px; margin-top: auto; }
.login-legal a { text-decoration: none; }
.login-legal a:hover { color: #5d6673; }

/* App shell */
.app-shell { min-height: 100vh; background: radial-gradient(900px 500px at 22% -5%, rgba(73,110,170,.13), transparent 66%), linear-gradient(180deg,#090e14,#0b1119); }
.app-header { height: 72px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(8,13,19,.82); backdrop-filter: blur(16px); }
.app-header-inner { width: min(1160px, calc(100% - 40px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(110,169,242,.06); border: 1px solid rgba(132,187,255,.10); }
.brand-mark-svg { width: 20px; height: 20px; }
.brand-mark-svg path { fill: none; stroke: #9fcaff; stroke-width: 1.55; stroke-linecap: round; }
.brand-mark-svg circle { fill: #9fcaff; }
.brand-lockup > div { display: flex; gap: 8px; align-items: baseline; }
.brand-lockup strong { font-size: 14px; letter-spacing: .1px; }
.brand-lockup span { color: #718096; font-size: 11px; }
.account { position: relative; }
.account-button { border: 0; background: transparent; color: #dbe5f1; padding: 10px 12px; border-radius: 999px; cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.account-button:hover { background: rgba(255,255,255,.045); }
.chevron { color: #8190a4; transform: translateY(-1px); }
.account-menu { position: absolute; top: 48px; right: 0; width: 220px; padding: 8px; border-radius: 13px; background: #111925; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 50px rgba(0,0,0,.42); }
.account-menu a { display: flex; justify-content: space-between; text-decoration: none; padding: 10px 11px; border-radius: 9px; font-size: 13px; color: #d7e1ed; }
.account-menu a:hover { background: rgba(255,255,255,.055); }
.account-menu .logout-form { margin: 0; }
.account-menu .logout-link { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: #d7e1ed; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.account-menu .logout-link:hover { background: rgba(255,255,255,.055); }
.menu-rule { height: 1px; background: var(--line); margin: 5px 4px; }
.app-main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 30px; }
.eyebrow { font-size: 10px; letter-spacing: .16em; font-weight: 750; color: #79aeea; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.tool-card, .transcript-card { background: linear-gradient(180deg, rgba(20,28,40,.93), rgba(14,20,29,.93)); border: 1px solid rgba(255,255,255,.085); border-radius: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.19); }
.tool-card { padding: 22px; min-height: 280px; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-title-row h2 { margin: 5px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.card-copy { margin: 12px 0 22px; color: #7f8da0; font-size: 13px; line-height: 1.55; }
.status-pill, .file-types { border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 6px 9px; color: #8996a8; font-size: 10px; white-space: nowrap; }
.status-pill.recording { color: #ffacac; border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.07); }
.status-pill.processing { color: #b5d8ff; border-color: rgba(96,165,250,.24); }
.status-pill.done { color: #a8e2c5; border-color: rgba(52,211,153,.20); }
.status-pill.error { color: #ffb1b1; border-color: rgba(239,68,68,.23); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; }
.primary-action, .danger-action, .secondary-action, .icon-action { min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.09); color: #edf4fb; cursor: pointer; transition: background .14s ease, border-color .14s ease, transform .1s ease; }
.primary-action, .danger-action, .secondary-action { padding: 0 14px; font-size: 12px; font-weight: 630; }
.primary-action { background: #1d3048; border-color: rgba(124,181,246,.18); }
.primary-action:hover:not(:disabled) { background: #263d5a; border-color: rgba(124,181,246,.32); }
.danger-action { background: rgba(120,37,45,.5); border-color: rgba(244,93,105,.22); }
.secondary-action { background: #18212e; }
.secondary-action:hover:not(:disabled), .icon-action:hover:not(:disabled) { background: #222e3e; }
.icon-action { width: 40px; padding: 0; background: #151e2a; font-size: 17px; }
button:disabled { opacity: .42; cursor: not-allowed; }
.audio-player { width: 100%; height: 38px; margin-top: 20px; opacity: .82; }
.error-text { color: #e6a5a5; font-size: 12px; }
.dropzone { width: 100%; min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px dashed rgba(148,163,184,.28); border-radius: 14px; color: #8c99aa; background: rgba(5,9,14,.32); cursor: pointer; }
.dropzone strong { color: #c9d3df; font-size: 12px; }
.dropzone span:last-child { font-size: 11px; }
.dropzone.dragging, .dropzone:hover { border-color: rgba(105,174,252,.5); background: rgba(65,115,170,.065); }
.upload-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(97,159,230,.08); color: #91c6ff; margin-bottom: 4px; }
.upload-status { min-height: 20px; display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #8290a2; font-size: 11px; }
.spinner { width: 13px; height: 13px; display: inline-block; border: 2px solid rgba(255,255,255,.17); border-top-color: #9bc9ff; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.transcript-card { margin-top: 18px; padding: 22px; }
.transcript-card textarea { width: 100%; min-height: 280px; resize: vertical; margin-top: 18px; padding: 16px; border-radius: 13px; border: 1px solid rgba(255,255,255,.075); color: #dce5ef; background: rgba(5,9,14,.55); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.65; }
.transcript-card textarea::placeholder { color: #536173; }
.transcript-actions { margin-top: 12px; }
.export-status { color: #8291a5; font-size: 11px; }
.app-footer { display: flex; justify-content: space-between; gap: 18px; padding: 22px 2px 0; color: #667487; font-size: 10px; }
.app-footer a { color: #8493a7; text-decoration: none; }
.app-footer a:hover { color: #a6b3c4; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Subscription */
.subscribe-wrap { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 42px 20px; }
.subscribe-card { width: min(520px, 100%); padding: 34px; border-radius: 20px; background: linear-gradient(180deg, rgba(20,28,40,.96), rgba(14,20,29,.96)); border: 1px solid var(--line); box-shadow: 0 26px 80px rgba(0,0,0,.3); }
.subscribe-card h1 { margin: 8px 0 10px; font-size: 28px; letter-spacing: -.8px; }
.subscribe-card > p { color: #8592a4; font-size: 13px; line-height: 1.6; }
.trial-box, .notice { margin: 22px 0 18px; padding: 15px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 5px; }
.trial-box strong { font-size: 13px; }
.trial-box span, .notice { color: #8290a2; font-size: 11px; line-height: 1.55; }
.notice.error { color: #e4a6a6; border-color: rgba(239,68,68,.18); background: rgba(239,68,68,.045); }
.login-button.compact { width: auto; padding: 0 20px; }
.text-link { display: inline-block; margin-top: 16px; color: #8291a4; font-size: 11px; text-decoration: none; }
.text-link:hover { color: #aeb9c8; }
button.text-link.logout-link { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }

@media (max-width: 900px) {
  .login-panel { min-width: 440px; width: 52vw; padding-left: 48px; padding-right: 48px; }
  .login-hero { object-position: 62% center; }
  .tool-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .login-page { background: white; }
  .login-hero { position: relative; display: block; height: 38vh; min-height: 280px; object-fit: cover; object-position: 72% center; }
  .login-panel { width: 100%; min-width: 0; min-height: 62vh; padding: 36px 28px 24px; box-shadow: none; justify-content: flex-start; }
  .login-content { margin: 0; width: 100%; }
  .login-brand { margin-bottom: 28px; }
  .login-brand-name { font-size: 32px; }
  .login-panel h1 { font-size: 30px; }
  .login-copy { margin: 15px 0 24px; }
  .login-legal { margin-top: 34px; }
  .app-header-inner, .app-main { width: min(100% - 24px, 1160px); }
  .app-main { padding-top: 30px; }
  .brand-lockup > div span { display: none; }
  .account-button span:first-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tool-card, .transcript-card { padding: 18px; border-radius: 15px; }
  .transcript-card textarea { min-height: 240px; }
  .app-footer { flex-direction: column; }
}

/* v3.0.58 boxed application canvas */
@media (min-width: 701px) {
  #root[data-page="app"] { padding: 24px; background: #080c12; min-height: 100dvh; }
  #root[data-page="login"] { padding: 0; min-height: 100dvh; overflow: hidden; background: #eef4f8; }
  #root[data-page="login"] .login-page, #root[data-page="login"] .login-panel { height: 100dvh; min-height: 100dvh; }
  .app-shell { width: min(1184px, 100%); min-height: calc(100vh - 48px); margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 22px; box-shadow: 0 28px 90px rgba(0,0,0,.42); }
  .app-header-inner, .app-main { width: min(1088px, calc(100% - 48px)); }
}

.preparation-note {
  margin-top: 14px;
  min-height: 20px;
  font-size: .79rem;
  color: var(--muted, #8f9aae);
  letter-spacing: .01em;
}